feat: add typed WRN declarations

editors/vscode/src/completion.js

@@ -58,11 +58,23 @@ const BLOCK_COMPLETIONS = [
       "}",
     ].join("\n"),
   },
+  {
+    label: "types",
+    detail: "TypeScript type declarations block",
+    documentation: "Declare interfaces and type aliases used by props, state, and functions.",
+    snippet: [
+      "types {",
+      "    interface ${1:Item} {",
+      "        ${2:id}: ${3:string}",
+      "    }",
+      "}",
+    ].join("\n"),
+  },
   {
     label: "props",
     detail: "Component or layout props block",
     documentation: "Declare values accepted by a component or layout.",
-    snippet: ["props {", '    ${1:title} = "${2:Title}"', "}"].join("\n"),
+    snippet: ["props {", '    ${1:title}: ${2:string} = "${3:Title}"', "}"].join("\n"),
   },
   {
     label: "seo",
@@ -85,22 +97,28 @@ const BLOCK_COMPLETIONS = [
     label: "state",
     detail: "Reactive state declaration",
     documentation: "Declare reactive state owned by the current component, layout, or page.",
-    snippet: 'state ${1:name} = ${2:"value"}',
+    snippet: 'state ${1:name}: ${2:string} = ${3:"value"}',
   },
   {
     label: "functions",
     detail: "Browser component functions block",
     documentation:
       "Declare functions that can be called from events, lifecycle hooks, and watchers.",
-    snippet: ["functions {", "    function ${1:handler}(${2}) {", "        $0", "    }", "}"].join(
-      "\n",
-    ),
+    snippet: [
+      "functions {",
+      "    function ${1:handler}(${2:value}: ${3:unknown}): ${4:void} {",
+      "        $0",
+      "    }",
+      "}",
+    ].join("\n"),
   },
   {
     label: "function",
     detail: "WRN component function",
     documentation: "Declare a browser-side function inside a functions block.",
-    snippet: ["function ${1:name}(${2}) {", "    $0", "}"].join("\n"),
+    snippet: ["function ${1:name}(${2:value}: ${3:unknown}): ${4:void} {", "    $0", "}"].join(
+      "\n",
+    ),
   },
   {
     label: "lifecycle",
@@ -278,7 +296,7 @@ function extractRouteParams(document) {
 function extractStates(document) {
   const source = document.getText();
 
-  const matches = [...source.matchAll(/^\s*state\s+([A-Za-z_$][\w$]*)\s*=/gm)];
+  const matches = [...source.matchAll(/^\s*state\s+([A-Za-z_$][\w$]*)(?:\s*:\s*[^=\r\n]+)?\s*=/gm)];
 
   return [...new Set(matches.map((match) => match[1]))];
 }
@@ -293,7 +311,9 @@ function extractProps(document) {
   while ((blockMatch = propsBlockPattern.exec(source)) !== null) {
     const body = blockMatch[1];
 
-    for (const match of body.matchAll(/^\s*([A-Za-z_$][\w$]*)\s*=/gm)) {
+    for (const match of body.matchAll(
+      /^\s*([A-Za-z_$][\w$]*)(?:\s*:\s*[^=\r\n]+)?(?:\s*=|\s*$)/gm,
+    )) {
       props.add(match[1]);
     }
   }
@@ -323,7 +343,12 @@ function extractFunctions(document) {
       .split(",")
       .map((parameter) => parameter.trim())
       .filter(Boolean)
-      .map((parameter) => parameter.replace(/=.*$/, "").trim());
+      .map((parameter) =>
+        parameter
+          .replace(/=.*$/, "")
+          .replace(/\??\s*:\s*[\s\S]+$/, "")
+          .trim(),
+      );
 
     functions.push({
       name,