refactor: migrate legacy wire namespace to wrn

examples/inter-app-api-showcase/apps/admin/CLAUDE.md

@@ -62,7 +62,7 @@ page Home {
   }
 
   style {
-    h1 { color: var(--wire-color-text); }
+    h1 { color: var(--wrn-color-text); }
   }
 }
 ```
@@ -94,7 +94,7 @@ Components render on the server with their props, then hydrate — no per-compon
 - **Server loop (DB/list/table):** `{#each <list> as <item>[, <i>]} …rows… {:empty} …fallback… {/each}` — iterates SSR data on the server and renders markup per item. `{item.field}` interpolates (HTML-escaped, XSS-safe). `<list>` is a JS expression, usually an `ssr` data binding (see "Data-driven tables" below). This is how you render a database table in `.wrn`.
 - **Server conditional:** `{#if <expr>} … {:else if <expr>} … {:else} … {/if}` — renders the first truthy branch on the server. `<expr>` can reference `ssr` data, or the `item`/`index` of an enclosing `{#each}`. Works at page level and inside loops (e.g. `{#if r.active}<span>●</span>{:else}<span>○</span>{/if}` per row). For client-side show/hide based on reactive `state`, use `data-show="expr"` instead.
 - i18n: `{t:home.title}` in text, `t:placeholder="form.name"` on attributes — resolved per request from `app/locales/`.
-- Theme: any element with `data-wire-theme-toggle` toggles light/dark; `data-wire-theme-set="dark"` sets it.
+- Theme: any element with `data-wrn-theme-toggle` toggles light/dark; `data-wrn-theme-set="dark"` sets it.
 - Void/self-closing tags are fine: `<br />`, `<img src="..." />`.
 - Only `{` and `}` are special (interpolation). Don't use a bare `}` in view text.
 
@@ -258,7 +258,7 @@ export default v.object({
 ```
 
 In an API route: `import s from "../schemas/login"; import { parseBody } from "@wrnexus/validation"; const r = await parseBody(s, ctx.req);` → `r.ok ? r.value : r.response`.
-In a form: `<form data-schema="login" action="/api/login" method="post">` + `<span data-error="email"></span>` (client + server validation wired automatically).
+In a form: `<form data-schema="login" action="/api/login" method="post">` + `<span data-error="email"></span>` (client + server validation connected automatically).
 
 ## AI / LLM (`@wrnexus/ai`)
 
@@ -283,7 +283,7 @@ wrnexus update --latest       # deps + syntax/config migrations + verification
 wrnexus generate page <Name>  # scaffold a page   (aliases: g p)
 wrnexus generate component <name> | api <path> | schema <name>
 wrnexus db migrate | rollback | status | new [--from-models] | generate | seed
-wrnexus eject <component>     # copy a Wire UI component's .wrn into app/components to customize
+wrnexus eject <component>     # copy a WrNexus UI component's .wrn into app/components to customize
 ```
 
 ## When asked to "create a page/component/feature"
@@ -291,5 +291,5 @@ wrnexus eject <component>     # copy a Wire UI component's .wrn into app/compone
 1. Create the `.wrn` file under `app/pages/` (or `app/components/`) with a `page`/`component` block — or run `wrnexus generate page <Name>`.
 2. Put markup in `view { }`, interactive bits in `state` + `{expr}` + `@event`, reusable UI as components mounted via `data-component`.
 3. For data, add an `app/api/*.ts` route and `getDb()`; for forms, add an `app/schemas/*.ts` and `data-schema`.
-4. Style with Tailwind utility classes in the view, or theme tokens (`var(--wire-*)`), or `style { }`.
+4. Style with Tailwind utility classes in the view, or theme tokens (`var(--wrn-*)`), or `style { }`.
 5. Never emit React/JSX, a manual router, or client-side island JS — the framework handles hydration.

examples/inter-app-api-showcase/apps/admin/app/pages/index.wrn

@@ -16,7 +16,7 @@ page Home {
             <span class="grid h-7 w-7 place-items-center rounded-md bg-gradient-to-br from-indigo-500 to-violet-600 text-sm font-bold text-white">W</span>
             admin
           </span>
-          <button data-wire-theme-toggle class="rounded-md border border-slate-200 px-3 py-1.5 text-sm text-slate-600 transition hover:border-slate-300 hover:text-slate-900 dark:border-white/10 dark:text-slate-400 dark:hover:border-white/20 dark:hover:text-white">
+          <button data-wrn-theme-toggle class="rounded-md border border-slate-200 px-3 py-1.5 text-sm text-slate-600 transition hover:border-slate-300 hover:text-slate-900 dark:border-white/10 dark:text-slate-400 dark:hover:border-white/20 dark:hover:text-white">
             Toggle theme
           </button>
         </header>

examples/inter-app-api-showcase/apps/admin/app/styles/global.css

@@ -11,9 +11,9 @@
 
 /* Make Tailwind's `dark:` variant follow the framework's data-theme attribute
  * (set on <html> by the theme system), not the OS setting. Any element with
- * data-wire-theme-toggle flips it. */
+ * data-wrn-theme-toggle flips it. */
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
 body {
-  font-family: var(--wire-font-sans, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif);
+  font-family: var(--wrn-font-sans, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif);
 }

examples/inter-app-api-showcase/apps/admin/public/llms.txt

@@ -56,7 +56,7 @@ page Home {
   }
 
   style {
-    h1 { color: var(--wire-color-text); }
+    h1 { color: var(--wrn-color-text); }
   }
 }
 ```
@@ -88,7 +88,7 @@ Components render on the server with their props, then hydrate — no per-compon
 - **Server loop (DB/list/table):** `{#each <list> as <item>[, <i>]} …rows… {:empty} …fallback… {/each}` — iterates SSR data on the server and renders markup per item. `{item.field}` interpolates (HTML-escaped, XSS-safe). `<list>` is a JS expression, usually an `ssr` data binding (see "Data-driven tables" below). This is how you render a database table in `.wrn`.
 - **Server conditional:** `{#if <expr>} … {:else if <expr>} … {:else} … {/if}` — renders the first truthy branch on the server. `<expr>` can reference `ssr` data, or the `item`/`index` of an enclosing `{#each}`. Works at page level and inside loops (e.g. `{#if r.active}<span>●</span>{:else}<span>○</span>{/if}` per row). For client-side show/hide based on reactive `state`, use `data-show="expr"` instead.
 - i18n: `{t:home.title}` in text, `t:placeholder="form.name"` on attributes — resolved per request from `app/locales/`.
-- Theme: any element with `data-wire-theme-toggle` toggles light/dark; `data-wire-theme-set="dark"` sets it.
+- Theme: any element with `data-wrn-theme-toggle` toggles light/dark; `data-wrn-theme-set="dark"` sets it.
 - Void/self-closing tags are fine: `<br />`, `<img src="..." />`.
 - Only `{` and `}` are special (interpolation). Don't use a bare `}` in view text.
 
@@ -239,7 +239,7 @@ export default v.object({
 });
 ```
 In an API route: `import s from "../schemas/login"; import { parseBody } from "@wrnexus/validation"; const r = await parseBody(s, ctx.req);` → `r.ok ? r.value : r.response`.
-In a form: `<form data-schema="login" action="/api/login" method="post">` + `<span data-error="email"></span>` (client + server validation wired automatically).
+In a form: `<form data-schema="login" action="/api/login" method="post">` + `<span data-error="email"></span>` (client + server validation connected automatically).
 
 ## AI / LLM (`@wrnexus/ai`)
 
@@ -264,7 +264,7 @@ wrnexus update --latest       # deps + syntax/config migrations + verification
 wrnexus generate page <Name>  # scaffold a page   (aliases: g p)
 wrnexus generate component <name> | api <path> | schema <name>
 wrnexus db migrate | rollback | status | new [--from-models] | generate | seed
-wrnexus eject <component>     # copy a Wire UI component's .wrn into app/components to customize
+wrnexus eject <component>     # copy a WrNexus UI component's .wrn into app/components to customize
 ```
 
 ## When asked to "create a page/component/feature"
@@ -272,5 +272,5 @@ wrnexus eject <component>     # copy a Wire UI component's .wrn into app/compone
 1. Create the `.wrn` file under `app/pages/` (or `app/components/`) with a `page`/`component` block — or run `wrnexus generate page <Name>`.
 2. Put markup in `view { }`, interactive bits in `state` + `{expr}` + `@event`, reusable UI as components mounted via `data-component`.
 3. For data, add an `app/api/*.ts` route and `getDb()`; for forms, add an `app/schemas/*.ts` and `data-schema`.
-4. Style with Tailwind utility classes in the view, or theme tokens (`var(--wire-*)`), or `style { }`.
+4. Style with Tailwind utility classes in the view, or theme tokens (`var(--wrn-*)`), or `style { }`.
 5. Never emit React/JSX, a manual router, or client-side island JS — the framework handles hydration.