{
  "WRN import": {
    "prefix": ["wrn-import", "import"],
    "description": "Import a server-side helper into a WRN file",
    "body": ["import { ${1:appUrl} } from \"${2:@wrnexus/helpers}\";", "", "$0"]
  },
  "WRN page": {
    "prefix": ["wrn-page", "page"],
    "description": "Create a WRN page",
    "body": [
      "page ${1:PageName} {",
      "    layout = \"${2:default}\"",
      "",
      "    seo {",
      "        title = \"${3:Page title}\"",
      "        description = \"${4:Page description}\"",
      "    }",
      "",
      "    view {",
      "        <main>",
      "            <h1>${5:Page heading}</h1>",
      "        </main>",
      "    }",
      "}"
    ]
  },
  "WRN dynamic page": {
    "prefix": ["wrn-dynamic-page", "dynamic-page"],
    "description": "Create a WRN page using a route parameter",
    "body": [
      "page ${1:DynamicPage} {",
      "    layout = \"${2:default}\"",
      "",
      "    state ${3:id} = ctx.params.${3:id}",
      "",
      "    view {",
      "        <main>",
      "            <h1>{${3:id}}</h1>",
      "        </main>",
      "    }",
      "}"
    ]
  },
  "WRN component": {
    "prefix": ["wrn-component", "component"],
    "description": "Create a reusable WRN component",
    "body": [
      "component ${1:ComponentName} {",
      "    props {",
      "        ${2:title} = \"${3:Title}\"",
      "    }",
      "",
      "    state ${4:ready} = false",
      "",
      "    view {",
      "        <div>",
      "            <h2>{${2:title}}</h2>",
      "        </div>",
      "    }",
      "}"
    ]
  },
  "WRN reactive component": {
    "prefix": ["wrn-reactive-component", "reactive-component"],
    "description": "Create a component with functions, lifecycle hooks, and a watcher",
    "body": [
      "component ${1:ComponentName} {",
      "    state ${2:active} = false",
      "",
      "    functions {",
      "        function ${3:updateState}() {",
      "            ${2:active} = true",
      "        }",
      "    }",
      "",
      "    lifecycle {",
      "        mount {",
      "            ${3:updateState}()",
      "        }",
      "",
      "        unmount {",
      "            $0",
      "        }",
      "    }",
      "",
      "    watch ${2:active} {",
      "        console.log(value, previous)",
      "    }",
      "",
      "    view {",
      "        <div>{${2:active}}</div>",
      "    }",
      "}"
    ]
  },
  "WRN layout": {
    "prefix": ["wrn-layout", "layout"],
    "description": "Create a reusable WRN layout",
    "body": [
      "layout ${1:LayoutName} {",
      "    view {",
      "        <main>",
      "            {content}",
      "        </main>",
      "    }",
      "}"
    ]
  },
  "WRN state": {
    "prefix": ["wrn-state", "state"],
    "description": "Create reactive state",
    "body": ["state ${1:name}: ${2:string} = ${3:\"value\"}"]
  },
  "WRN functions block": {
    "prefix": ["wrn-functions", "functions"],
    "description": "Create a browser-side functions block",
    "body": ["functions {", "    function ${1:handler}(${2}) {", "        $0", "    }", "}"]
  },
  "WRN function": {
    "prefix": ["wrn-function", "function"],
    "description": "Create a function inside a functions block",
    "body": ["function ${1:name}(${2}) {", "    $0", "}"]
  },
  "WRN async function": {
    "prefix": ["wrn-async-function", "async-function"],
    "description": "Create an asynchronous component function",
    "body": ["async function ${1:name}(${2}) {", "    $0", "}"]
  },
  "WRN lifecycle": {
    "prefix": ["wrn-lifecycle", "lifecycle"],
    "description": "Create mount, update, and unmount lifecycle hooks",
    "body": [
      "lifecycle {",
      "    mount {",
      "        ${1}",
      "    }",
      "",
      "    update {",
      "        ${2}",
      "    }",
      "",
      "    unmount {",
      "        $0",
      "    }",
      "}"
    ]
  },
  "WRN mount hook": {
    "prefix": ["wrn-mount", "mount"],
    "description": "Create a component mount lifecycle hook",
    "body": ["mount {", "    $0", "}"]
  },
  "WRN update hook": {
    "prefix": ["wrn-update", "update-hook"],
    "description": "Create a batched component update lifecycle hook",
    "body": ["update {", "    $0", "}"]
  },
  "WRN unmount hook": {
    "prefix": ["wrn-unmount", "unmount"],
    "description": "Create a component unmount lifecycle hook",
    "body": ["unmount {", "    $0", "}"]
  },
  "WRN watcher": {
    "prefix": ["wrn-watch", "watch"],
    "description": "Watch a declared state value",
    "body": ["watch ${1:stateName} {", "    console.log(value, previous)", "    $0", "}"]
  },
  "WRN watcher with condition": {
    "prefix": ["wrn-watch-if", "watch-if"],
    "description": "Watch state and react to a specific value",
    "body": ["watch ${1:stateName} {", "    if (value === ${2:true}) {", "        $0", "    }", "}"]
  },
  "WRN SEO block": {
    "prefix": ["wrn-seo", "seo"],
    "description": "Create SEO metadata",
    "body": [
      "seo {",
      "    title = \"${1:Page title}\"",
      "    description = \"${2:Page description}\"",
      "}"
    ]
  },
  "WRN form": {
    "prefix": ["wrn-form", "form"],
    "description": "Create a POST form",
    "body": [
      "<form",
      "    method=\"post\"",
      "    action=\"${1:/api/action}\"",
      ">",
      "    ${2}",
      "",
      "    <button type=\"submit\">",
      "        ${3:Submit}",
      "    </button>",
      "</form>"
    ]
  },
  "WRN input": {
    "prefix": ["wrn-input", "input"],
    "description": "Create a labeled input",
    "body": [
      "<label>",
      "    <span>${1:Label}</span>",
      "",
      "    <input",
      "        type=\"${2|text,email,password,tel,url,number,date|}\"",
      "        name=\"${3:name}\"",
      "        value=\"${4}\"",
      "        ${5:required}",
      "    />",
      "</label>"
    ]
  },
  "WRN conditional class": {
    "prefix": ["wrn-class-if", "class-if"],
    "description": "Add a conditional class directive",
    "body": ["class:${1:border-indigo-500}=\"${2:condition}\""]
  },
  "WRN conditional class pair": {
    "prefix": ["wrn-class-toggle", "class-toggle"],
    "description": "Toggle two classes from one condition",
    "body": ["class:${1:opacity-100}=\"${3:visible}\"", "class:${2:opacity-0}=\"!${3:visible}\""]
  },
  "WRN click event": {
    "prefix": ["wrn-click", "click"],
    "description": "Add a click event handler",
    "body": ["@click=\"${1:handler()}\""]
  },
  "WRN window scroll event": {
    "prefix": ["wrn-window-scroll", "window-scroll"],
    "description": "Add a window scroll event handler",
    "body": ["@window:scroll=\"${1:handler()}\""]
  },
  "WRN window resize event": {
    "prefix": ["wrn-window-resize", "window-resize"],
    "description": "Add a window resize event handler",
    "body": ["@window:resize=\"${1:handler()}\""]
  },
  "WRN document event": {
    "prefix": ["wrn-document-event", "document-event"],
    "description": "Add a document-level event handler",
    "body": ["@document:${1:click}=\"${2:handler()}\""]
  },
  "WRN show directive": {
    "prefix": ["wrn-show", "show"],
    "description": "Conditionally show an element",
    "body": ["data-show=\"${1:condition}\""]
  },
  "WRN loop": {
    "prefix": ["wrn-for", "for"],
    "description": "Create a reactive list loop",
    "body": ["<div data-for=\"${1:item} in ${2:items}\">", "    <span>{${1:item}}</span>", "</div>"]
  },
  "WRN dynamic link": {
    "prefix": ["wrn-route-link", "route-link"],
    "description": "Create a link using route state",
    "body": ["<a href=\"/${1:resource}/{${2:id}}\">", "    ${3:Open}", "</a>"]
  },
  "WRN API GET": {
    "prefix": ["wrn-api-get", "api-get"],
    "description": "Create a GET API route",
    "body": [
      "api GET ${1:/api/resource} {",
      "    return Response.json({",
      "        ${2:success}: true",
      "    })",
      "}"
    ]
  },
  "WRN API POST": {
    "prefix": ["wrn-api-post", "api-post"],
    "description": "Create a POST API route",
    "body": [
      "api POST ${1:/api/resource} {",
      "    const body = await ctx.request.json()",
      "",
      "    return Response.json({",
      "        success: true,",
      "        data: body",
      "    })",
      "}"
    ]
  },
  "WRN loading state": {
    "prefix": ["wrn-loading", "loading-state"],
    "description": "Create loading state and a reactive button",
    "body": [
      "state loading = false",
      "",
      "<button",
      "    type=\"submit\"",
      "    class:opacity-50=\"loading\"",
      "    class:cursor-not-allowed=\"loading\"",
      "    disabled=\"{loading}\"",
      ">",
      "    {loading ? \"Loading...\" : \"${1:Submit}\"}",
      "</button>"
    ]
  },
  "WRN BackToTop component": {
    "prefix": ["wrn-back-to-top", "back-to-top"],
    "description": "Create an optimized BackToTop component using lifecycle cleanup",
    "body": [
      "component BackToTop {",
      "    state visible = false",
      "",
      "    functions {",
      "        function updateBackToTopVisibility() {",
      "            visible = window.scrollY > ${1:500}",
      "        }",
      "",
      "        function scrollToTop() {",
      "            window.scrollTo({",
      "                top: 0,",
      "                behavior: \"smooth\"",
      "            })",
      "        }",
      "    }",
      "",
      "    lifecycle {",
      "        mount {",
      "            updateBackToTopVisibility()",
      "",
      "            window.addEventListener(",
      "                \"scroll\",",
      "                updateBackToTopVisibility,",
      "                { passive: true }",
      "            )",
      "        }",
      "",
      "        unmount {",
      "            window.removeEventListener(",
      "                \"scroll\",",
      "                updateBackToTopVisibility",
      "            )",
      "        }",
      "    }",
      "",
      "    view {",
      "        <button",
      "            type=\"button\"",
      "            @click=\"scrollToTop()\"",
      "            aria-label=\"Back to top\"",
      "            class=\"fixed bottom-5 right-5\"",
      "            class:pointer-events-none=\"!visible\"",
      "            class:translate-y-4=\"!visible\"",
      "            class:opacity-0=\"!visible\"",
      "            class:pointer-events-auto=\"visible\"",
      "            class:translate-y-0=\"visible\"",
      "            class:opacity-100=\"visible\"",
      "        >",
      "            ${2:Back to top}",
      "        </button>",
      "    }",
      "}"
    ]
  },
  "WRN runtime target": {
    "prefix": ["wrn-runtime", "runtime"],
    "description": "Set server, client, or universal execution",
    "body": ["runtime = \"${1|universal,server,client|}\""]
  },
  "WRN hydration strategy": {
    "prefix": ["wrn-hydrate", "hydrate"],
    "description": "Control when a declaration hydrates in the browser",
    "body": ["hydrate = \"${1|load,idle,visible,interaction,none|}\""]
  },
  "WRN media hydration": {
    "prefix": ["wrn-hydrate-media", "hydrate-media"],
    "description": "Hydrate only when a media query matches",
    "body": ["hydrate = \"media:${1:(min-width: 768px)}\""]
  },
  "WRN computed block": {
    "prefix": ["wrn-computed", "computed"],
    "description": "Declare cached reactive derived values",
    "body": ["computed {", "    ${1:displayName} = ${2:firstName + \" \" + lastName}", "}"]
  },
  "WRN effect block": {
    "prefix": ["wrn-effect", "effect"],
    "description": "Run a side effect when reactive dependencies change",
    "body": ["effect {", "    ${1:console.log(value)}", "}"]
  },
  "WRN security block": {
    "prefix": ["wrn-security", "security"],
    "description": "Declare route security policy metadata",
    "body": [
      "security {",
      "    auth = \"${1|required,optional,public|}\"",
      "    csrf = \"${2:true}\"",
      "    rateLimit = \"${3:standard}\"",
      "}"
    ]
  },
  "WRN server load": {
    "prefix": ["wrn-load-server", "load-server"],
    "description": "Load data only on the server",
    "body": ["load server {", "    ${1:return {}}", "}"]
  },
  "WRN client load": {
    "prefix": ["wrn-load-client", "load-client"],
    "description": "Load data in the browser",
    "body": ["load client {", "    ${1:return {}}", "}"]
  },
  "WRN action": {
    "prefix": ["wrn-action", "action"],
    "description": "Declare a named server action",
    "body": ["action ${1:save}(${2:input}) {", "    $0", "}"]
  },
  "WRN type import": {
    "prefix": ["wrn-import-type"],
    "description": "Import an application TypeScript type",
    "body": ["import type {", "    ${1:PublicUser}", "} from \"@/types/${2:user}.ts\"", "$0"]
  },
  "WRN component import": {
    "prefix": ["wrn-import-component"],
    "description": "Import a WRN component",
    "body": ["import ${1:UserCard}", "    from \"@/components/${1:UserCard}.wrn\"", "$0"]
  },
  "WRN outputs": {
    "prefix": ["wrn-outputs"],
    "description": "Declare typed callable outputs",
    "body": [
      "outputs {",
      "    ${1:confirm}(payload: ${2:ConfirmPayload})",
      "    ${3:cancel}()",
      "}"
    ]
  },
  "WRN client function": {
    "prefix": ["wrn-client-function"],
    "description": "Declare a browser-only function",
    "body": ["client ${1|,async |}function ${2:name}(${3}): ${4:void} {", "    $0", "}"]
  },
  "WRN server function": {
    "prefix": ["wrn-server-function"],
    "description": "Declare a server-only function",
    "body": ["server ${1|,async |}function ${2:name}(${3}): ${4:void} {", "    $0", "}"]
  },
  "WRN shared function": {
    "prefix": ["wrn-shared-function"],
    "description": "Declare a shared function",
    "body": ["shared function ${1:name}(${2}): ${3:void} {", "    $0", "}"]
  },
  "WRN state block": {
    "prefix": ["wrn-state-block"],
    "description": "Declare grouped state",
    "body": ["state {", "    ${1:name}: ${2:string} = ${3:\"\"}", "}"]
  },
  "WRN client state": {
    "prefix": ["wrn-client-state"],
    "description": "Declare client state",
    "body": ["client state {", "    ${1:menuOpen}: boolean = false", "}"]
  },
  "WRN server state": {
    "prefix": ["wrn-server-state"],
    "description": "Declare server state",
    "body": ["server state {", "    ${1:sessionId}: string | null = null", "}"]
  },
  "WRN global store": {
    "prefix": ["wrn-global-store"],
    "description": "Declare a request-scoped global store",
    "body": [
      "global store ${1:UserStore} {",
      "    state {",
      "        ${2:user}: ${3:PublicUser | null} = null",
      "    }",
      "}"
    ]
  },
  "WRN page store": {
    "prefix": ["wrn-page-store"],
    "description": "Declare a route-scoped page store",
    "body": [
      "page store ${1:SearchStore} {",
      "    state {",
      "        ${2:query}: string = \"\"",
      "    }",
      "}"
    ]
  },
  "WRN persist": {
    "prefix": ["wrn-persist"],
    "description": "Declare store persistence",
    "body": [
      "persist {",
      "    storage = \"${1|memory,session,local|}\"",
      "    include = [\"${2:field}\"]",
      "    version = ${3:1}",
      "}"
    ]
  }
}