chore(release): publish language server 0.8.10

Adds a scratch page (kept intentionally, per controller ruling on Task 8)
and one end-to-end test that drives the real language server over LSP
stdio against that page's real text, verifying completion (with the
seo-block negative case tested via a simulated '<' keystroke and
mutation-verified against html-regions.ts), hover, folding ranges,
linked editing, and wrn/tagComplete all work together on realistic
content.

Regenerates routes.gen.ts and wrnexus.generated.d.ts for the new page's
route, required by check:generated-types.

Two checks from the original brief (auto-close-tag insertion and Emmet
Tab-expansion) require a live VS Code Extension Development Host and
are documented as outstanding manual verification in
.superpowers/sdd/2026-08-18-wrn-html-editing/task-8-report.md.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

.npmrc

@@ -1,3 +1,3 @@
-@wrnexus:registry=https://registry.npmjs.org/
+@wrnexus:registry=https://registry.workroot.in/repository/npm/
 audit=true
 fund=false

docs/public-api-0.8.json

@@ -973,6 +973,10 @@
         "EffectBlock",
         "EventDecl",
         "FormatWrnOptions",
+        "IslandBuildResult",
+        "IslandDiagnostic",
+        "IslandInput",
+        "IslandStrategy",
         "LexError",
         "Lexer",
         "LoadBlock",
@@ -999,7 +1003,9 @@
         "analyzeOptimizations",
         "analyzeRuntimeImports",
         "analyzeRuntimeRequirements",
+        "assertReactAvailable",
         "assertValidAst",
+        "buildIslands",
         "compilationKey",
         "compile",
         "compileNativeWrnFile",
@@ -1015,19 +1021,26 @@
         "generate",
         "generateBrowserModule",
         "generateDeclarations",
+        "generateIslandEntry",
         "generateNative",
         "generateServerFunctionsModule",
         "generateStoreBrowserModule",
         "generateStoreModule",
         "generateTargets",
         "inferredRuntimeType",
+        "islandNamesFrom",
+        "islandPropValue",
         "optimizeAst",
         "parse",
+        "parseIslandStrategy",
+        "renderIslandMarker",
         "resolveWrnImport",
         "resolveWrnImports",
+        "routeNeedsIslands",
         "rpcManifest",
         "runtimeCapabilities",
-        "runtimeTypeOf"
+        "runtimeTypeOf",
+        "serializeIslandProps"
       ]
     },
     "@wrnexus/content": {
@@ -1661,6 +1674,7 @@
     "@wrnexus/i18n": {
       ".": [
         "ExtractedTranslationKey",
+        "I18N_DATA_ATTRIBUTE",
         "I18N_JS_HREF",
         "I18N_RUNTIME",
         "I18nConfig",
@@ -1697,6 +1711,7 @@
         "plural",
         "pseudoLocalize",
         "renderI18nData",
+        "renderI18nDataTag",
         "resolveI18n",
         "resolveLang",
         "translateHtml",
@@ -2259,6 +2274,42 @@
         "subjectQueue"
       ]
     },
+    "@wrnexus/react": {
+      ".": [
+        "BoundStore",
+        "IslandErrorBoundary",
+        "IslandErrorBoundaryProps",
+        "IslandStore",
+        "MountOptions",
+        "SnapshotCache",
+        "SnapshotSource",
+        "StoreResolver",
+        "createSelectorCache",
+        "createSnapshotCache",
+        "discardDetachedRoots",
+        "islandRootCount",
+        "mountIslands",
+        "remountIslands",
+        "setStoreResolver",
+        "unmountIslands",
+        "useWrnActions",
+        "useWrnStore"
+      ],
+      "./browser": [
+        "MountOptions",
+        "discardDetachedRoots",
+        "islandRootCount",
+        "mountIslands",
+        "remountIslands",
+        "setStoreResolver",
+        "unmountIslands",
+        "useWrnActions",
+        "useWrnStore"
+      ],
+      "./runtime": [
+        "getIslandRuntime"
+      ]
+    },
     "@wrnexus/reactive": {
       ".": [
         "AnimationTimeline",

docs/superpowers/specs/2026-08-18-react-islands-design.md

@@ -0,0 +1,267 @@
+# React Islands for WRNexus — Design
+
+**Date:** 2026-08-18
+**Status:** Approved for implementation
+**Scope:** Add opt-in React islands to WRNexus without altering the existing SSR-first rendering model.
+
+## Goal
+
+Give WRNexus authors access to the npm React ecosystem — charts, editors, date pickers,
+drag-and-drop, maps — without rebuilding those components natively and without adopting React
+as the framework's rendering model.
+
+This is explicitly **not** a migration path toward React, and not a replacement for `.wrn`
+components. Islands are a consumption path for third-party components.
+
+### Non-goals
+
+- Server-rendering islands (deferred; see "Deferred to v2").
+- React Fast Refresh.
+- `bind:` syntax sugar for store binding.
+- Replacing the `.wrn` authoring format.
+
+## Guiding constraint
+
+WRNexus's differentiator is that non-interactive routes ship **zero** framework JavaScript.
+Every decision below is subordinate to preserving that. An app that uses no islands must be
+byte-for-byte unchanged, and a route with no islands must ship no React.
+
+## Decisions
+
+| Question         | Decision                                                                                 |
+| ---------------- | ---------------------------------------------------------------------------------------- |
+| Purpose          | npm ecosystem access                                                                     |
+| Server rendering | Client-only by default; SSR opt-in deferred to v2                                        |
+| Authoring        | `import Chart from "./Chart.tsx"` in `.wrn` frontmatter, used as `<Chart client:only />` |
+| Data flow        | Two-way store access via `useSyncExternalStore` (read + write through actions)           |
+| Bundling         | Extend the existing Bun pipeline                                                         |
+| Packaging        | New isolated package `@wrnexus/react`                                                    |
+
+## Architecture
+
+### Package boundary
+
+All React-specific code lives in a new package, `@wrnexus/react`. `react` and `react-dom` are
+declared as **optional peer dependencies**, so both the bundle cost and the dependency itself
+land only on apps that import a `.tsx` island.
+
+This boundary is deliberate: React concerns must never leak into `core`, `csr`, `store`, or
+`compiler` beyond the narrow, explicitly enumerated hooks below. If islands do not earn their
+keep, the feature is removed by deleting one package and reverting a small number of tagged
+integration points.
+
+### Island lifecycle
+
+The compiler emits a placeholder element carrying `data-wrn-island` (name, strategy, serialized
+props) alongside the existing `data-wrn-scope` marker.
+
+The island runtime is lazy-loaded using the same marker-presence pattern as
+`loadComponentControllers` in `packages/csr/src/index.ts` — fetched only if a `data-wrn-island`
+marker exists in the document. A page with no islands downloads nothing, including React.
+
+Mount strategies:
+
+- `client:only` (default) — mount via `createRoot` once the bundle arrives.
+- `client:load` — mount on document load.
+- `client:visible` — mount via `IntersectionObserver`.
+- `client:idle` — mount on `requestIdleCallback`.
+
+**Unmount is mandatory.** WRNexus has client-side navigation (`packages/csr/src/nav-runtime.ts`).
+Island roots are tracked per scope and explicitly `root.unmount()`-ed on route change. Omitting
+this leaks React roots, detached DOM, and store subscriptions on every navigation.
+
+### Asset serving
+
+Two additions following the existing `/__wrnexus/*` convention:
+
+- `/__wrnexus/islands.js` — the mount runtime.
+- `/__wrnexus/island/<hash>.js` — per-island bundles, content-hashed.
+
+Registered in the three existing locations:
+
+- `packages/dev-server/src/assets.ts` (dev)
+- `packages/dev-server/src/prod.ts` (prod)
+- `packages/cli/src/build.ts` (static build)
+
+## Store bridge
+
+### The hook
+
+`useWrnStore(name, selector?)`, built on `useSyncExternalStore`.
+
+`StoreInstanceCore` (`packages/store/src/types.ts`) already provides both halves of React's
+external-store contract — `subscribe(listener) => unsubscribe` and `snapshot()` — so the
+adapter is thin. Islands resolve the browser container via `browserStoreContainer()` from
+`packages/store/src/client.ts`, reading the store already hydrated from the server render. No
+separate island hydration channel is introduced.
+
+### Snapshot caching (load-bearing)
+
+`readonlySnapshot` in `packages/store/src/index.ts` returns `Object.freeze(clone(state))` — a
+**new reference on every call**. `useSyncExternalStore` requires `getSnapshot()` to return a
+referentially identical value when nothing has changed; otherwise React throws
+_"The result of getSnapshot should be cached to avoid an infinite loop"_ and spins.
+
+**The cache lives in the `@wrnexus/react` adapter, not in `@wrnexus/store`.** The adapter holds
+one cached snapshot per store instance, returns the same reference until the store's `subscribe`
+callback fires, then recomputes.
+
+Rationale: changing `readonlySnapshot` would alter semantics for all existing consumers and the
+current test suite in order to serve one new caller. Keeping the cache in the adapter leaves the
+store package untouched and confines this feature's blast radius to the new package.
+
+### Selectors
+
+`snapshot()` returns whole state, so without a selector any mutation re-renders every island
+bound to that store. `useWrnStore("cart", s => s.itemCount)` caches the selected value and
+compares with `Object.is`, re-rendering only on actual change.
+
+### Writes
+
+Writes go through `instance.actions.*`, never direct state assignment. The `mutableState` Proxy
+would technically accept a raw write, but that bypasses action naming and the `StoreMutation`
+record that subscribers and devtools depend on.
+
+### The one author-facing rule
+
+Write → action → store notifies → snapshot changes → island re-renders. This terminates cleanly
+**provided writes never occur during render**. Writes belong in event handlers or effects.
+
+This rule is documented rather than machine-enforced — see "Dropped: the write-during-render
+guard" below. It is also the reason this shape was chosen over generated `bind:` sugar: the
+cycle stays visible in the author's own code rather than being hidden in generated glue.
+
+## Compiler and bundler changes
+
+### Detection
+
+`candidates()` in `packages/compiler/src/import-resolver.ts` currently resolves `.wrn`, `.ts`,
+`.d.ts` and index variants. Add `.tsx` and `index.tsx`, and tag `ResolvedImport` with
+`kind: "island"` when the resolved path ends in `.tsx`.
+
+Because authoring uses an explicit frontmatter import, detection requires no heuristics and no
+configuration.
+
+### Server codegen
+
+Where a `.wrn` component import generates a server render call, an island import instead emits
+the placeholder marker with name, strategy, and props serialized as JSON through the existing
+`escapeHtml`. Since islands are client-only in v1, the server never imports React.
+
+### Props contract
+
+Island props must be JSON-serializable. Passing a function, symbol, or class instance is a
+compile-time diagnostic (`WRN-ISLAND-PROPS`) rather than a runtime failure. This makes the
+serialization boundary explicit at the point where it is cheapest to correct.
+
+### Bundling
+
+Each island gets a generated entry (component + mount runtime), bundled via `Bun.build`, with
+content-hashed output.
+
+**React must be emitted as a shared chunk.** Five islands on one page must not ship five copies
+of `react-dom`. This is a day-one splitting requirement, not a later optimization, because
+getting it wrong fails silently and multiplies bundle size.
+
+### Route classification
+
+The compiler already classifies routes (static, static-interactive, request SSR, and so on), and
+that classification determines whether a route ships JavaScript. A route containing an island is
+no longer zero-JS static — it is static-interactive. Islands must feed into that existing
+classifier so the framework's performance reporting stays accurate.
+
+### HMR
+
+On island source change: unmount the root and re-mount with the new bundle. Correct and simple;
+the cost is that component state resets on edit.
+
+React Fast Refresh requires a Babel/SWC transform plus a runtime and is out of scope. If authors
+report that state-preserving edits matter, that is the concrete evidence that would justify
+introducing Vite or esbuild for island bundling — and the bundler interface is the intended swap
+point.
+
+## Error handling
+
+| Condition                         | Behavior                                                                                                                                             |
+| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `react`/`react-dom` not installed | Compiler diagnostic `WRN-ISLAND-REACT-MISSING`, naming the install command — not a raw module-resolution failure                                     |
+| Island throws during render       | Per-island error boundary. Dev: render error in place with component name and stack. Prod: log, render nothing, leave surrounding server HTML intact |
+| Island bundle fails to load       | Placeholder remains, warning logged; page stays functional because everything else was server-rendered                                               |
+| Non-serializable props            | Compile-time `WRN-ISLAND-PROPS`                                                                                                                      |
+| Unknown store name                | Dev: throw, listing available store names. Prod: warn, return undefined                                                                              |
+| Action fired during render        | Left to React. See "Dropped: the write-during-render guard" below.                                                                                   |
+| Cleanup throws on unmount         | Caught and logged; navigation must not break                                                                                                         |
+
+Islands failing **locally** is the most valuable property of this model: a crashed chart leaves
+the rest of the page working.
+
+## Dropped: the write-during-render guard
+
+The design originally called for a dev-only guard that threw when an island
+called a store action during render. It was implemented, then removed: the
+mechanism is unreliable in both directions.
+
+- **False positives.** React runs effects before a queued microtask drains, so a
+  render-phase flag cleared on a microtask is still set inside `useEffect`. An
+  island writing from an effect — the documented correct pattern — would throw.
+- **False negatives.** The flag can only be set from the error boundary`s
+  render. When an island updates its own state, only the island re-renders, so
+  the flag is never set and a genuine write-during-render passes silently.
+
+There is no reliable public API for detecting React`s render phase; doing it
+properly requires React internals, which is not acceptable in a shipped
+framework.
+
+React already covers the real hazard: writing during render that notifies
+subscribers produces "Cannot update a component while rendering a different
+component", and the infinite-loop case is caught by the `getSnapshot` caching
+requirement handled in the store bridge. The custom guard added false positives
+without covering anything React misses.
+
+The author-facing rule still stands and is still documented — it is simply not
+machine-enforced.
+
+## Testing
+
+### Compiler unit tests
+
+- `.tsx` resolution through `candidates()`
+- Marker emission with correct name, strategy, and props
+- JSON serialization and escaping of props
+- `WRN-ISLAND-PROPS` diagnostic for non-serializable props
+- `WRN-ISLAND-REACT-MISSING` diagnostic
+- Route reclassification from static to static-interactive when an island is present
+
+### Store bridge unit tests
+
+- **`getSnapshot()` returns a referentially identical value across repeated calls with no
+  mutation, and a new one after a mutation.** This single test stands between the
+  implementation and an infinite render loop.
+- Selector memoization and `Object.is` change detection
+- `subscribe`/`unsubscribe` symmetry
+
+### Island runtime tests (`happy-dom`, already a dev dependency)
+
+- Mount per strategy: `only`, `load`, `visible`, `idle`
+- Error boundary containment
+- **Unmount on navigation** — roots disposed, store subscriptions released; subscription counts
+  stay flat across repeated simulated navigations
+
+### Integration guards
+
+Both protect the core promise:
+
+1. A route with no islands ships **zero** framework JavaScript.
+2. A page with multiple islands ships React exactly **once**.
+
+All of the above run under the existing `bun test packages` and `test:examples`, so
+`check:production` covers islands from day one.
+
+## Deferred to v2
+
+- **SSR opt-in** — `renderToString` + `hydrateRoot` for libraries that support it. The marker and
+  bundling design already accommodate this; only the server codegen path and a hydration
+  strategy are missing.
+- **`bind:` sugar** — generated two-way binding in `.wrn` markup, layered over the v1 store
+  bridge as pure syntax. Add only if authors ask.
+- **React Fast Refresh** — see HMR above.

docs/superpowers/specs/2026-08-18-wrn-html-editing-design.md

@@ -0,0 +1,252 @@
+# HTML editing support for `.wrn` files — Design
+
+**Date:** 2026-08-18
+**Status:** Approved for implementation
+**Scope:** HTML autocomplete, tag closing, hover, Emmet, and folding inside `view { }` blocks.
+
+## Goal
+
+Writing markup in a `.wrn` file should feel like writing HTML. Today it does not: there is
+syntax highlighting but no tag completion, no attribute completion, no tag closing, and no
+tag-level folding.
+
+The grammar already declares `embeddedLanguages` (`meta.embedded.block.html` → `html`), which is
+why markup _highlights_. That mapping only affects tokenization — VS Code's HTML language
+service does not run on `.wrn` documents, so none of the editing behaviour follows from it.
+
+### Non-goals
+
+- **HTML formatting.** See "Formatting is deliberately excluded" below.
+- Editor support outside VS Code beyond what standard LSP gives for free.
+- Changing `.wrn` syntax or the compiler.
+
+## Decisions
+
+| Question            | Decision                                                                     |
+| ------------------- | ---------------------------------------------------------------------------- |
+| Features            | Tag/attribute completion, auto-close and rename tags, hover + Emmet, folding |
+| Placement           | Shared language server; only auto-close-on-type is VS Code-specific          |
+| Completion strategy | One merged list, WRNexus entries ranked above HTML                           |
+| Region detection    | Tolerant scanner over a virtual document, not the AST                        |
+| HTML knowledge      | `vscode-html-languageservice`                                                |
+| Formatting          | Excluded — `formatWrn` already owns markup formatting                        |
+
+## Architecture
+
+### Virtual HTML document
+
+New module: `packages/language-server/src/html-regions.ts`, exporting
+`virtualHtmlDocument(document)`.
+
+Everything outside a `view { }` block is replaced by whitespace of **identical length**, with
+newlines preserved. The virtual document therefore has the same size and the same line/column
+geometry as the source, so a position in the source _is_ the position in the virtual document.
+No mapping table and no translation layer.
+
+This is deliberately **not** the same shape as the existing `virtualTypeScriptDocument`, which
+compacts code and carries line mappings back to source. Compaction is necessary there because
+the output must be valid TypeScript. HTML has no such requirement, so the simpler
+offset-preserving form applies, and the class of off-by-one bugs that mapping tables produce
+does not arise.
+
+**The load-bearing invariant:** `virtualHtmlDocument(doc).text.length === doc.text.length`, with
+newlines at identical offsets. If this breaks, every feature reports positions off by some
+amount rather than failing loudly.
+
+### Region detection
+
+Region detection is a tolerant scanner, **not** the `@wrnexus/syntax` parser. Completion fires
+while the document is being typed, which is exactly when it does not parse. The scanner finds
+`view` followed by `{` and tracks brace depth to the matching close.
+
+Two hazards it must handle, both of which defeat a naive implementation:
+
+- **Apostrophes in text content.** `<p>it's fine</p>` — a scanner treating `'` as a string
+  delimiter anywhere will consider the rest of the file one open string and lose every later
+  region. Quotes are tracked only inside attribute values, never in text nodes.
+- **Nested braces from interpolation.** `class={cond ? "a" : "b"}` and `{{ a: 1 }}` nest, so
+  depth must be counted rather than scanning for the next `}`.
+
+WRNexus-specific syntax (`@click`, `client:visible`, `{expr}`) is **not** blanked. The HTML
+service tolerates unknown attributes, and blanking would cost region fidelity for no gain.
+
+**Caching** is keyed on document URI and version, so a burst of requests from one keystroke
+costs a single scan.
+
+## Completion
+
+### The server becomes the single authority inside view blocks
+
+`textDocument/completion` gains a context check: a position is "in HTML" exactly when the
+virtual document is non-blank there, which costs one character lookup.
+
+**Inside a view block**, one list is assembled from two sources:
+
+| Source  | `sortText` prefix | Content                                                                  |
+| ------- | ----------------- | ------------------------------------------------------------------------ |
+| WRNexus | `0`               | Components, their props/outputs/slots, directives (`@click`, `client:*`) |
+| HTML    | `1`               | Tags, attributes, attribute values                                       |
+
+`sortText` drives ordering independently of the label, so components rank above HTML tags
+without filtering anything out. **Outside a view block**, behaviour is unchanged: WRN keywords
+plus workspace items.
+
+The server already indexes components, props, outputs, and slots
+(`buildWorkspaceCompletionItems` in `packages/language-server/src/workspace.ts`), so both halves
+of the merge are already available to it.
+
+**Deduplication on exact label match, WRNexus wins.** A component named `Table` and the HTML
+`table` differ in case and both survive; a component that genuinely shadows an HTML tag name
+resolves to the component.
+
+### Trigger characters
+
+The server currently declares `["<", "@", ":", "."]`. Attributes and values additionally need
+`" "`, `"="`, `"\""`, and `"/"`.
+
+### This fixes an existing bug
+
+The extension's `completion.js` registers its own provider with `<` among its trigger
+characters, and the language server answers `textDocument/completion` as well. VS Code
+concatenates both today, producing duplicate entries and unpredictable ordering before HTML is
+involved at all.
+
+As part of this work the extension's provider returns nothing when the position is inside a view
+block, and keeps its current behaviour elsewhere. One owner per context.
+
+**Consequence to accept knowingly:** the server becomes authoritative for the richest completion
+context, so future component-intelligence work belongs in the server rather than in
+`completion.js`.
+
+## Hover
+
+`textDocument/hover` answers from the HTML service over the virtual document when the position
+is inside a view region, giving MDN documentation for tags and attributes. Outside a view
+region, existing hover behaviour is unchanged.
+
+Where a position resolves to a WRNexus component or prop, the component's own detail wins over
+any HTML entry of the same name, matching the completion precedence rule above.
+
+## Tag handling
+
+### Linked editing is standard LSP
+
+Renaming `<div>` and having `</div>` follow is `textDocument/linkedEditingRange` (LSP 3.16), so
+it lives in the shared server like everything else.
+
+### Auto-close on type is the one client-side piece
+
+LSP has no request for "close this tag as I type". VS Code's own HTML extension implements it
+client-side, and this follows the same shape:
+
+1. The extension subscribes to `onDidChangeTextDocument`, filtered to `wrn` documents.
+2. When the typed character is `>` or `/`, it sends a custom request, `wrn/tagComplete`.
+3. The server runs the HTML service's `doTagComplete` against the virtual document and returns a
+   snippet or `null`.
+4. The client inserts it with `insertSnippet`, so the cursor lands between the tags.
+
+The decision stays server-side because it needs parse knowledge: void elements (`<br>`, `<img>`,
+`<input>`) must not be closed, and an already-closed tag must not be closed twice. Returning
+`null` outside a view region is what stops it firing inside `functions { }` or `style { }`.
+
+Component tags come along for free: `<Card>` closes to `</Card>` because the HTML service closes
+unknown tags like any other, and `<Card /` completes to `<Card />` through the same `/` path.
+
+**New setting:** `wrnexus.html.autoClosingTags`, default `true`, following the existing
+`wrnexus.*` naming.
+
+### Emmet
+
+A manifest change: `emmet.includeLanguages: { "wrn": "html" }` in `contributes.configurationDefaults`.
+
+**Known limitation:** `emmet.includeLanguages` is per-language, not per-region, so Emmet is also
+live inside `functions { }` and `style { }` blocks. VS Code offers no way to scope it to a
+region. Emmet only expands on Tab against an abbreviation pattern, so misfires are rare, but the
+edge is real.
+
+## Folding
+
+`textDocument/foldingRange` in the server returns tag-level ranges from the HTML service over
+the virtual document, filtered to view regions.
+
+Today folding comes only from `language-configuration.json` markers, which work at block level
+(`page`, `component`, `view`, braces). Markup does not fold, so a long `<table>` cannot be
+collapsed. VS Code merges marker-based folding with provider ranges, so block folding continues
+to work unchanged and tag folding appears inside markup.
+
+**One rule:** return ranges only where the virtual document is non-blank. A range spanning
+outside a view region would let a fold swallow a brace boundary.
+
+## Formatting is deliberately excluded
+
+`formatWrn` (`packages/syntax/src/formatter.ts`) is 927 lines, iterates to a fixed point with
+cycle detection, and already handles tags, attribute wrapping, `multilineAttributes`, and
+`printWidth`. It is a markup formatter that understands WRNexus syntax.
+
+Adding HTML formatting would do two harmful things:
+
+- **Two formatters would fight.** Output would depend on which ran last.
+- **It would mangle syntax it does not model.** `@click={handler}` and `client:visible` are not
+  HTML attributes, and an HTML formatter is free to rewrite spacing inside them.
+
+If markup formatting is unsatisfying, the fix is improving `formatWrn`. That is separate work.
+
+## Dependencies
+
+`vscode-html-languageservice` becomes a dependency of **both** `packages/language-server` and
+`editors/vscode`.
+
+The editor bundler (`scripts/build-editor-language-server.mjs`) bundles only workspace sources
+and passes other `require`s through to Node, so the package must be resolvable at runtime from
+the extension. `editors/vscode` currently ships exactly one runtime dependency
+(`vscode-languageclient`); this adds the second.
+
+`check:editor-language-server` already verifies the bundled `.cjs` starts under Node, so a
+missing or unresolvable dependency fails the gate rather than shipping a broken VSIX.
+
+## Testing
+
+### Region scanner (`packages/language-server/test/`)
+
+- **The invariant**, property-style across fixtures: virtual text length equals source length and
+  newlines sit at identical offsets.
+- **Apostrophes in text**: `<p>it's fine</p>` followed by a second view block — both regions
+  found.
+- **Nested interpolation**: `class={cond ? "a" : "b"}` and `{{ a: 1 }}` do not end the region.
+- **Broken markup**: `<div class="` mid-typing still yields a region. This is the normal case for
+  completion, not an edge case.
+- **Multiple view blocks**, and files with none.
+
+### Completion
+
+- Inside a view block: both sources present, WRNexus `sortText` ordering first.
+- Outside a view block: response identical to current behaviour — the guard proving non-markup
+  contexts are undisturbed.
+- Collision: a component named `Table` yields one entry, the component.
+
+### Tag handling
+
+- `<div>` → `</div>`; `<br>` → nothing; `<Card /` → `/>`; outside a view region → `null`.
+- Linked editing returns ranges covering both the opening and closing tag names.
+
+### Hover
+
+- Inside a view region, a known tag returns HTML documentation.
+- A component name returns the component detail, not an HTML entry of the same name.
+
+### Folding
+
+- Every returned range lies inside a view region.
+- Block-level marker folding still works.
+
+### Toolchain guards
+
+- `check:editor-language-server` passes with the new dependency (bundle starts under Node).
+- Manifest assertion that `emmet.includeLanguages` maps `wrn` → `html`, alongside the existing
+  marketplace checks in `editors/vscode/test`.
+
+## Deferred
+
+- HTML formatting — see above; improve `formatWrn` instead.
+- Moving the remaining `completion.js` component intelligence into the server. This design only
+  requires it to stand down inside view blocks; relocating the rest is follow-up work.

docs/ui-visual-contract-0.8.json

@@ -13,8 +13,8 @@
     "packages/ui/components/Breadcrumb.wrn": "9f6c23550ebfc635c36ca8660953775170b4a471c0cd0206b9a7ba760994980a",
     "packages/ui/components/ButtonGroup.wrn": "fc23565ad56bd8483fcb777d9e02ccba2f9ea476c085754d42503bb83b718f72",
     "packages/ui/components/CTASection.wrn": "d0665f2aa33eea95e6f84120f739b3dd9c8723c882138bcb1a7f80dcd7909904",
-    "packages/ui/components/Card.wrn": "255912df0668ebcf45b6cc3ffe99a4a3e0bf87376a5d199e3adcdf3610ea79e3",
-    "packages/ui/components/Carousel.wrn": "7ab122bc0ce772346c665b43d62e73c9865a13b97c02ccf5b03d1e3eaea757d6",
+    "packages/ui/components/Card.wrn": "3cc2ff238bda279c169026a462236144ad11ec0046deef00ab00e001a07e8a4c",
+    "packages/ui/components/Carousel.wrn": "e7d921f802aa19210f3f415b59b70750a2c8d78e30684ad334809741c70a6bf9",
     "packages/ui/components/Chart.wrn": "07bc01247b5a1c2b82c2ba8386b7fcdbf480efead75d52b7da04d471072c7ee4",
     "packages/ui/components/ChatBubble.wrn": "d71f7d6567d76ac0eb3ecc8e2e567fec12bb3236ea05f4d0a72286abc0b7cbb1",
     "packages/ui/components/Clipboard.wrn": "5a93f2bae337d7ce364229b796bac673f60dde6dc135f0969f4e106e04854d30",
@@ -39,7 +39,7 @@
     "packages/ui/components/FeatureIconCard.wrn": "3b4f3fa62c6729e686886a5b848e26c255766684829cec2b715967b4e73d6f07",
     "packages/ui/components/FileInput.wrn": "866a292a3280527bf429893469e7c50f7cf38965d8adb37b45a35ede1606d5b8",
     "packages/ui/components/FileUploadProgress.wrn": "e5da29c562a521cdd6bb50b8f4d217aa1ab981d7b2a2432af47391472f0a8034",
-    "packages/ui/components/Footer.wrn": "c498820a160c1286331a423a4498054e7852d2f1a9eb6e81eb5b008b1693efc4",
+    "packages/ui/components/Footer.wrn": "f7c5a77064a09e244f689d42475c4c20143f4c8859cac451c10a50c14652db33",
     "packages/ui/components/Grid.wrn": "83d4f5f2656d539538723f5791ba3c238901432e9d8c55c74f068d3eb5a74517",
     "packages/ui/components/Hero.wrn": "345478b212701817ff57060f87982a987baf01a7179c979768e1cd4218b50900",
     "packages/ui/components/HeroActions.wrn": "67cd31400ccb6abdbbf16219267dee946b44b064b79f25276d20ceb7d6e8a790",
@@ -60,7 +60,7 @@
     "packages/ui/components/MetricGrid.wrn": "c71e53249835908833055b553e64a8ee55fdf11ac4605436a9581ebb87a0608b",
     "packages/ui/components/Modal.wrn": "7fa4b877772736f29f690e24d8742922b310397ef3083f0b78acb67a9f0d14b2",
     "packages/ui/components/Nav.wrn": "c45b0ecb42250f4b3ede33c8932a025f789dda9ef48dbf332459ae458163e69a",
-    "packages/ui/components/Navbar.wrn": "ed3bb1974b93d52c480af468bdb1c0b253cb9196f3a00602614d3ce1e271a669",
+    "packages/ui/components/Navbar.wrn": "01903230210cd2e5e6d9325a0708f85af9623d4118e3a53f1adb770fd545425d",
     "packages/ui/components/PageHeader.wrn": "321cde36ce8d521a57901033d46e8b437f42e558cca27f49ca26f7172aff1d54",
     "packages/ui/components/Pagination.wrn": "d54226705d4556f76ee5f0d6ae82d101ca6d006397756d547a9aa5954415ba39",
     "packages/ui/components/PinInput.wrn": "4dc398456f6392d7925db941debb484c7cb0358ecef527f696fe5ec4800a7602",
@@ -95,14 +95,14 @@
     "packages/ui/components/badge.wrn": "e44e33633fb34e897696cd9290f210108e35a3e2dc3b2a4a367411f45c69a1e1",
     "packages/ui/components/button.wrn": "cba4ccbbd23bb75b3836ec7a53673e40f1e043d18bfcee3d613db96c318f4ba8",
     "packages/ui/components/checkbox.wrn": "18046396b75d0b9c6bb2bdb09dbff1846c84fb07490f390a25ca7b5367fd2ef4",
-    "packages/ui/components/input.wrn": "a576e5ee2c6d0da963ebb14e8809ddf3ec7333b1eae095d5a4b7fce3ceb1fb55",
+    "packages/ui/components/input.wrn": "e4c14527f009b610b4aa96d8d7b7d5ac3ca1ffd34237bab348ee9dc4ddc55847",
     "packages/ui/components/progress.wrn": "6307a90585197d7aab19a8710b2430f5d4ed27ce77e9b90b1414ea0eed876492",
     "packages/ui/components/radio.wrn": "09425a78358de5bbd2f47482f313e80065135335b969ce5ccdd5c7cc3ea5232c",
-    "packages/ui/components/select.wrn": "b107b259d228201e9071701370ad1c912ac9a8131f9e0a55834bcc84ef0dd417",
+    "packages/ui/components/select.wrn": "1d8d47a74d5ab9ed58d0ba11f46910897233b96652d17f5962f5dda60bd4cf8a",
     "packages/ui/components/skeleton.wrn": "4fc5e0846eeefd7830c038e1789be995c4f9d833aa913ff079eb4863baa65648",
     "packages/ui/components/spinner.wrn": "2322645da7ef53f7c06035ff071d9a2f6ffe2901ff9338daed84037369367105",
     "packages/ui/components/switch.wrn": "874504e4828e9db6a570d78984c4d3a76d0ceb39d70baa877649cb3798c82c85",
-    "packages/ui/components/textarea.wrn": "76d432179f2b7790ab9cdd644752928c259e1f496ad89c4db79981b74bbd226f",
+    "packages/ui/components/textarea.wrn": "9870d37664471a103d44435a3977bf40b087a743acd76ee4d77df9b56cccbb2b",
     "packages/ui/components/tooltip.wrn": "f3dfdfa5cd9661fe5e95ef3580eef4c7437c069726421370c2d7328fbe7d840d",
     "packages/ui/styles/SelectStyles.wrn": "074fe0d67de4ef5e9f9cfe879beb72fd5c83352888687d3a1a4b7722c87af3ca",
     "packages/ui/ui.css": "9ea591404e9cf675bbf1003e15e9fad00327094ff217dc20733f0fc87c0f4a62"

editors/vscode/package.json

@@ -134,6 +134,11 @@
           "maximum": 240,
           "scope": "resource",
           "description": "Preferred WRNexus formatter line width before long tags are expanded."
+        },
+        "wrnexus.html.autoClosingTags": {
+          "type": "boolean",
+          "default": true,
+          "description": "Automatically close HTML tags inside .wrn view blocks."
         }
       }
     },
@@ -141,6 +146,9 @@
       "files.associations": {
         "*.wrn": "wrn"
       },
+      "emmet.includeLanguages": {
+        "wrn": "html"
+      },
       "[wrn]": {
         "editor.defaultFormatter": "wrnexus.wrnexus",
         "editor.formatOnSave": false,
@@ -283,6 +291,7 @@
     "@vscode/vsce": "^3.9.2"
   },
   "dependencies": {
-    "vscode-languageclient": "^10.1.0"
+    "vscode-languageclient": "^10.1.0",
+    "vscode-html-languageservice": "^5.6.2"
   }
 }

editors/vscode/src/compiler.cjs

@@ -1,8 +1,8 @@
 "use strict";
 // Generated by scripts/build-editor-compiler.mjs. Do not edit directly.
-// WRN editor compiler source hash: c0e3e8c72c68cb3c182e2de84c13ef0b8921579d9b081550002b8cdbe4af3397
-// WRN editor compiler generator hash: c71e7fe4258c97b73b384ff14b321f0cf0b30cc2ed0322f5f84b04e757159b18
-// Generated with TypeScript: 5.9.3
+// WRN editor compiler source hash: fd183ab8c54df72c779d099d7625ce0068e49bea458052335c77cbf31ccf9179
+// WRN editor compiler generator hash: a54ca847c758bc98d8e353ad6d70088df31de1820f6cf9d1c3462505f563e6b8
+// Generated with TypeScript: 6.0.3
 const __nodeRequire = require;
 const __path = __nodeRequire("node:path");
 const __modules = {
@@ -11,6 +11,7 @@ const __modules = {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.optimizeAst = optimizeAst;
 exports.analyzeOptimizations = analyzeOptimizations;
+exports.routeNeedsIslands = routeNeedsIslands;
 exports.analyzeRuntimeRequirements = analyzeRuntimeRequirements;
 function identifiers(value) {
     return new Set(value.match(/[A-Za-z_$][\w$]*/g) ?? []);
@@ -191,8 +192,18 @@ function hasEvent(nodes) {
     }
     return false;
 }
-function analyzeRuntimeRequirements(ast) {
+/**
+ * A route containing a React island ships JavaScript and can no longer be
+ * classified as zero-JS static, so island presence must reach the classifier.
+ */
+function routeNeedsIslands(imports) {
+    return imports.some((entry) => entry.kind === "island");
+}
+function analyzeRuntimeRequirements(ast, options = {}) {
+    const hasIslands = options.hasIslands ?? false;
     const reasons = [];
+    if (hasIslands)
+        reasons.push("react island");
     const clientFunctions = ast.runtimeFunctions.some((fn) => fn.runtime !== "server");
     const clientState = ast.states.some((state) => state.runtime !== "server");
     const interactive = clientFunctions ||
@@ -246,11 +257,16 @@ function analyzeRuntimeRequirements(ast) {
         kind = "streaming-ssr";
         reasons.push("partial-static shell with streamed dynamic regions");
     }
+    // An island ships JavaScript, so a would-be zero-JS static route must be
+    // reported as static-interactive. Explicit render modes still win above.
+    if (hasIslands && kind === "static")
+        kind = "static-interactive";
     const clientDisabled = ast.renderMode === "static" || ast.renderMode === "server";
     const serverDisabled = ast.renderMode === "client";
     return {
         kind,
         canPrerender: kind === "static" || kind === "static-interactive",
+        needsIslandRuntime: hasIslands,
         needsClientRuntime: !clientDisabled &&
             (interactive || ast.renderMode === "client") &&
             ast.hydrate !== "none" &&
@@ -773,7 +789,46 @@ const types_ts_1 = require("./types.js");
 const syntax_1 = require("@wrnexus/syntax");
 const store_codegen_ts_1 = require("./store-codegen.js");
 const analysis_ts_1 = require("./analysis.js");
+const island_codegen_ts_1 = require("./island-codegen.js");
 const client_codegen_ts_1 = require("./client-codegen.js");
+/**
+ * Island names for the file currently being generated.
+ *
+ * Codegen is a synchronous single pass, so a module-scoped set avoids threading
+ * an extra parameter through every render function. Always reset in generate().
+ */
+let currentIslands = new Set();
+/**
+ * Builds the island placeholder for a component tag that was imported from a
+ * .tsx file. Returns null for ordinary .wrn components.
+ */
+function islandMarkerFor(node) {
+    if (!currentIslands.has(node.tag))
+        return null;
+    const directives = node.attrs
+        .map((attr) => attr.name)
+        .filter((name) => name.startsWith("client:"));
+    const props = {};
+    for (const attr of node.attrs) {
+        if (attr.name.startsWith("client:"))
+            continue;
+        const parsed = (0, island_codegen_ts_1.islandPropValue)(attr.value);
+        if ("dynamic" in parsed) {
+            throw new Error(`WRN-ISLAND-PROPS: Island '${node.tag}' received a runtime expression for prop '${attr.name}'. ` +
+                `Island props are serialized at build time, so they must be literal values ` +
+                `(for example start={3} or title="Revenue"), not ${attr.value}.`);
+        }
+        props[attr.name] = parsed.value;
+    }
+    const serialized = (0, island_codegen_ts_1.serializeIslandProps)(node.tag, props);
+    if ("diagnostic" in serialized)
+        throw new Error(serialized.diagnostic.message);
+    return (0, island_codegen_ts_1.renderIslandMarker)({
+        name: node.tag,
+        strategy: (0, island_codegen_ts_1.parseIslandStrategy)(directives),
+        propsJson: serialized.json,
+    });
+}
 function isComponentTag(tag) {
     return /^[A-Z][A-Za-z0-9_$]*$/.test(tag);
 }
@@ -1121,6 +1176,9 @@ function renderLoopBody(node) {
             escLit("</div>"));
     }
     if (componentTag) {
+        const island = islandMarkerFor(node);
+        if (island)
+            return escLit(island);
         return (escLit(`<div data-component="${attrEscape(node.tag)}"`) +
             attrs +
             escLit(">") +
@@ -1314,6 +1372,9 @@ function renderNode(node, ssrBindings, csrBindings, apiBindings, loops, reactive
     return `<${node.tag}${renderAttrs(node.attrs, csrId, reactive, loops)}>${inner}</${node.tag}>`;
 }
 function renderPageComponentInvocation(node, ssrBindings, csrBindings, apiBindings, loops, reactive) {
+    const island = islandMarkerFor(node);
+    if (island)
+        return island;
     const attrs = node.attrs
         .filter((attr) => attr.name !== "data-component")
         .map((attr) => renderPageComponentAttr(attr, loops))
@@ -1324,6 +1385,10 @@ function renderPageComponentInvocation(node, ssrBindings, csrBindings, apiBindin
     return `<div data-component="${attrEscape(node.tag)}"` + `${attrs}>${inner}</div>`;
 }
 function renderNestedComponentInvocation(node, ctx) {
+    // Islands work inside .wrn components too, not just pages.
+    const island = islandMarkerFor(node);
+    if (island)
+        return island;
     let bindIndex = 0;
     const attrs = node.attrs
         .filter((attr) => attr.name !== "data-component")
@@ -1780,7 +1845,16 @@ function markServerAsyncBoundaries(nodes, serverLoads) {
         markServerAsyncBoundaries(node.children, serverLoads);
     }
 }
-function generate(ast) {
+function generate(ast, options = {}) {
+    currentIslands = options.islands ?? new Set();
+    try {
+        return generateInner(ast);
+    }
+    finally {
+        currentIslands = new Set();
+    }
+}
+function generateInner(ast) {
     ast = (0, analysis_ts_1.optimizeAst)(ast).ast;
     if (ast.kind === "global-store" || ast.kind === "page-store")
         return (0, store_codegen_ts_1.generateStoreModule)(ast);
@@ -3107,9 +3181,11 @@ function candidates(path) {
             path,
             `${path}.wrn`,
             `${path}.ts`,
+            `${path}.tsx`,
             `${path}.d.ts`,
             (0, node_path_1.join)(path, "index.wrn"),
             (0, node_path_1.join)(path, "index.ts"),
+            (0, node_path_1.join)(path, "index.tsx"),
         ];
 }
 function resolveWrnImport(declaration, importer, options) {
@@ -3136,8 +3212,12 @@ function resolveWrnImport(declaration, importer, options) {
             return false;
         }
     });
-    if (found)
-        return { declaration, resolved: (0, node_fs_1.realpathSync)(found) };
+    if (found) {
+        const resolved = (0, node_fs_1.realpathSync)(found);
+        return resolved.endsWith(".tsx")
+            ? { declaration, resolved, kind: "island" }
+            : { declaration, resolved };
+    }
     const severity = (options.mode ?? "compatible") === "explicit" ? "error" : "warning";
     return {
         declaration,
@@ -3162,7 +3242,7 @@ function resolveWrnImports(declarations, importer, options) {
  * `@wrnexus/syntax` package. This package owns platform-specific codegen.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DependencyGraph = exports.createCompilationCache = exports.compilationKey = exports.runtimeTypeOf = exports.inferredRuntimeType = exports.eraseFunctionTypes = exports.LexError = exports.Lexer = exports.NativeCompileError = exports.generateNative = exports.runtimeCapabilities = exports.analyzeRuntimeImports = exports.optimizeAst = exports.analyzeRuntimeRequirements = exports.analyzeOptimizations = exports.createWrnSourceMap = exports.resolveWrnImports = exports.resolveWrnImport = exports.createComponentContract = exports.generateStoreModule = exports.generateStoreBrowserModule = exports.generateDeclarations = exports.rpcManifest = exports.generateServerFunctionsModule = exports.generateBrowserModule = exports.generateTargets = exports.generate = exports.ParseError = exports.parse = exports.formatDiagnostic = exports.diagnosticFromError = exports.diagnose = exports.assertValidAst = exports.formatWrn = void 0;
+exports.routeNeedsIslands = exports.generateIslandEntry = exports.buildIslands = exports.assertReactAvailable = exports.serializeIslandProps = exports.renderIslandMarker = exports.parseIslandStrategy = exports.islandPropValue = exports.islandNamesFrom = exports.DependencyGraph = exports.createCompilationCache = exports.compilationKey = exports.runtimeTypeOf = exports.inferredRuntimeType = exports.eraseFunctionTypes = exports.LexError = exports.Lexer = exports.NativeCompileError = exports.generateNative = exports.runtimeCapabilities = exports.analyzeRuntimeImports = exports.optimizeAst = exports.analyzeRuntimeRequirements = exports.analyzeOptimizations = exports.createWrnSourceMap = exports.resolveWrnImports = exports.resolveWrnImport = exports.createComponentContract = exports.generateStoreModule = exports.generateStoreBrowserModule = exports.generateDeclarations = exports.rpcManifest = exports.generateServerFunctionsModule = exports.generateBrowserModule = exports.generateTargets = exports.generate = exports.ParseError = exports.parse = exports.formatDiagnostic = exports.diagnosticFromError = exports.diagnose = exports.assertValidAst = exports.formatWrn = void 0;
 exports.compileNativeWrnFile = compileNativeWrnFile;
 exports.compileWrnFile = compileWrnFile;
 exports.compile = compile;
@@ -3258,6 +3338,281 @@ var cache_ts_1 = require("./cache.js");
 Object.defineProperty(exports, "compilationKey", { enumerable: true, get: function () { return cache_ts_1.compilationKey; } });
 Object.defineProperty(exports, "createCompilationCache", { enumerable: true, get: function () { return cache_ts_1.createCompilationCache; } });
 Object.defineProperty(exports, "DependencyGraph", { enumerable: true, get: function () { return cache_ts_1.DependencyGraph; } });
+var island_codegen_ts_1 = require("./island-codegen.js");
+Object.defineProperty(exports, "islandNamesFrom", { enumerable: true, get: function () { return island_codegen_ts_1.islandNamesFrom; } });
+Object.defineProperty(exports, "islandPropValue", { enumerable: true, get: function () { return island_codegen_ts_1.islandPropValue; } });
+Object.defineProperty(exports, "parseIslandStrategy", { enumerable: true, get: function () { return island_codegen_ts_1.parseIslandStrategy; } });
+Object.defineProperty(exports, "renderIslandMarker", { enumerable: true, get: function () { return island_codegen_ts_1.renderIslandMarker; } });
+Object.defineProperty(exports, "serializeIslandProps", { enumerable: true, get: function () { return island_codegen_ts_1.serializeIslandProps; } });
+var island_bundle_ts_1 = require("./island-bundle.js");
+Object.defineProperty(exports, "assertReactAvailable", { enumerable: true, get: function () { return island_bundle_ts_1.assertReactAvailable; } });
+Object.defineProperty(exports, "buildIslands", { enumerable: true, get: function () { return island_bundle_ts_1.buildIslands; } });
+Object.defineProperty(exports, "generateIslandEntry", { enumerable: true, get: function () { return island_bundle_ts_1.generateIslandEntry; } });
+var analysis_ts_2 = require("./analysis.js");
+Object.defineProperty(exports, "routeNeedsIslands", { enumerable: true, get: function () { return analysis_ts_2.routeNeedsIslands; } });
+
+},
+"packages/compiler/src/island-bundle.ts": function (module, exports, require, __filename, __dirname) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateIslandEntry = generateIslandEntry;
+exports.reactJsxPlugin = reactJsxPlugin;
+exports.assertReactAvailable = assertReactAvailable;
+exports.buildIslands = buildIslands;
+const node_crypto_1 = require("node:crypto");
+const node_fs_1 = require("node:fs");
+const node_module_1 = require("node:module");
+const node_path_1 = require("node:path");
+/**
+ * Generates the per-island browser entry.
+ *
+ * Never imports react-dom/server — islands are client-only.
+ */
+function generateIslandEntry(input) {
+    return [
+        "/** @jsxImportSource react */",
+        `import Component from ${JSON.stringify(input.sourcePath)};`,
+        `export const name = ${JSON.stringify(input.name)};`,
+        `export default Component;`,
+        "",
+    ].join("\n");
+}
+/**
+ * Compiles every island `.tsx` against React's JSX runtime.
+ *
+ * The repo's root tsconfig sets `jsxImportSource` to `@wrnexus/core`, so an
+ * island would otherwise compile to WRNexus's HTML-string renderer and
+ * silently never mount. A `@jsxImportSource` pragma applies only to the file
+ * that carries it, so putting one in the generated entry does nothing for the
+ * author's own component — the injection has to happen per source file, which
+ * is what this plugin does. App-authored islands stay plain `.tsx`.
+ */
+function reactJsxPlugin() {
+    return {
+        name: "wrnexus-island-jsx",
+        setup(build) {
+            build.onLoad({ filter: /\.tsx$/ }, async (args) => {
+                // Only first-party island sources need the pragma. Third-party .tsx
+                // under node_modules is left alone so Bun's own handling is untouched.
+                if (args.path.includes("node_modules"))
+                    return undefined;
+                return {
+                    contents: `/** @jsxImportSource react */\n${await Bun.file(args.path).text()}`,
+                    loader: "tsx",
+                };
+            });
+        },
+    };
+}
+function assertReactAvailable(appRoot) {
+    const require = (0, node_module_1.createRequire)((0, node_path_1.join)(appRoot, "package.json"));
+    try {
+        require.resolve("react");
+        require.resolve("react-dom");
+        return null;
+    }
+    catch {
+        return {
+            code: "WRN-ISLAND-REACT-MISSING",
+            severity: "error",
+            message: "This app imports a .tsx island but react and react-dom are not installed. " +
+                "Run: bun add react react-dom",
+        };
+    }
+}
+/**
+ * Bundles island entries. `splitting: true` is required so React is emitted
+ * once as a shared chunk rather than duplicated into every island.
+ */
+async function buildIslands(input) {
+    if (input.islands.length === 0)
+        return { assets: [], sharedChunks: [] };
+    // Each island gets its own generated entry file named after the island.
+    // Passing the component sources directly would dedupe two islands that share
+    // a source file, and output order is not guaranteed to match input order —
+    // both of which silently mismatch island names to bundles.
+    //
+    // The entries live inside outDir so `react` resolves from the app that
+    // installed it, exactly as the island's own imports do.
+    const entryDir = (0, node_path_1.join)(input.outDir, ".entries");
+    (0, node_fs_1.mkdirSync)(entryDir, { recursive: true });
+    const islandNames = new Set(input.islands.map((island) => island.name));
+    for (const island of input.islands) {
+        (0, node_fs_1.writeFileSync)((0, node_path_1.join)(entryDir, `${island.name}.tsx`), generateIslandEntry(island), "utf8");
+    }
+    const entrypoints = input.islands.map((island) => (0, node_path_1.join)(entryDir, `${island.name}.tsx`));
+    if (input.appRoot) {
+        const resolveFrom = (0, node_module_1.createRequire)((0, node_path_1.join)(input.appRoot, "package.json"));
+        const runtimeEntry = (0, node_path_1.join)(entryDir, "runtime.ts");
+        (0, node_fs_1.writeFileSync)(runtimeEntry, `export * from ${JSON.stringify(resolveFrom.resolve("@wrnexus/react/browser"))};
+`, "utf8");
+        entrypoints.push(runtimeEntry);
+    }
+    try {
+        const result = await Bun.build({
+            entrypoints,
+            outdir: input.outDir,
+            target: "browser",
+            format: "esm",
+            splitting: true,
+            minify: true,
+            plugins: [reactJsxPlugin()],
+        });
+        if (!result.success) {
+            throw new AggregateError(result.logs, "Island bundling failed");
+        }
+        const assets = [];
+        const sharedChunks = [];
+        for (const output of result.outputs) {
+            if (output.kind === "entry-point") {
+                // Bun names an entry's output after its entry file, so the basename
+                // identifies the island unambiguously.
+                const stem = (0, node_path_1.basename)(output.path).replace(/\.js$/, "");
+                if (stem === "runtime")
+                    continue;
+                if (!islandNames.has(stem))
+                    continue;
+                assets.push({
+                    name: stem,
+                    hash: (0, node_crypto_1.createHash)("sha256").update(output.path).digest("hex").slice(0, 16),
+                    path: output.path,
+                });
+            }
+            else if (output.kind === "chunk") {
+                sharedChunks.push(output.path);
+            }
+        }
+        return { assets, sharedChunks };
+    }
+    finally {
+        (0, node_fs_1.rmSync)(entryDir, { recursive: true, force: true });
+    }
+}
+
+},
+"packages/compiler/src/island-codegen.ts": function (module, exports, require, __filename, __dirname) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseIslandStrategy = parseIslandStrategy;
+exports.islandPropValue = islandPropValue;
+exports.serializeIslandProps = serializeIslandProps;
+exports.renderIslandMarker = renderIslandMarker;
+exports.islandNamesFrom = islandNamesFrom;
+// Implemented locally rather than imported from @wrnexus/core: compiler modules
+// are bundled into the Node-only VS Code extension, which contains no other
+// packages, so a runtime import of core would break the editor compiler.
+const HTML_ESCAPES = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;",
+};
+function escapeHtml(value) {
+    return value.replace(/[&<>"']/g, (character) => HTML_ESCAPES[character]);
+}
+const SAFE_ISLAND_NAME = /^[A-Za-z0-9_-]+$/;
+function isSafeIslandName(name) {
+    return SAFE_ISLAND_NAME.test(name);
+}
+const STRATEGIES = {
+    "client:only": "only",
+    "client:load": "load",
+    "client:visible": "visible",
+    "client:idle": "idle",
+};
+function parseIslandStrategy(directives) {
+    for (const directive of directives) {
+        const match = STRATEGIES[directive];
+        if (match)
+            return match;
+    }
+    return "only";
+}
+function unsupportedProp(value) {
+    const type = typeof value;
+    if (type === "function" || type === "symbol" || type === "bigint" || type === "undefined") {
+        return true;
+    }
+    if (value === null || type !== "object")
+        return false;
+    if (Array.isArray(value))
+        return value.some(unsupportedProp);
+    const proto = Object.getPrototypeOf(value);
+    if (proto !== Object.prototype && proto !== null)
+        return true;
+    return Object.values(value).some(unsupportedProp);
+}
+/**
+ * Interprets an island attribute value with JSX semantics.
+ *
+ * `title="Revenue"` is a string, `start={3}` is a number, `flag` alone is
+ * `true`. Without this every prop arrives as a string, so `start={3}` would be
+ * `"3"` and arithmetic in the island silently concatenates.
+ *
+ * Returns `dynamic` for a `{…}` value that is not JSON: such expressions are
+ * evaluated at runtime and cannot cross the serialization boundary.
+ */
+function islandPropValue(raw) {
+    if (raw === undefined || raw === "")
+        return { value: true };
+    const expression = /^\{([\s\S]*)\}$/.exec(raw);
+    if (!expression)
+        return { value: raw };
+    const inner = expression[1].trim();
+    try {
+        return { value: JSON.parse(inner) };
+    }
+    catch {
+        return { dynamic: inner };
+    }
+}
+function serializeIslandProps(componentName, props) {
+    const offenders = Object.entries(props)
+        .filter(([, value]) => unsupportedProp(value))
+        .map(([key]) => key);
+    if (offenders.length > 0) {
+        return {
+            diagnostic: {
+                code: "WRN-ISLAND-PROPS",
+                severity: "error",
+                message: `Island '${componentName}' received non-serializable prop(s): ${offenders.join(", ")}. ` +
+                    `Island props cross a serialization boundary and must be JSON-safe ` +
+                    `(no functions, symbols, bigints, undefined, or class instances).`,
+            },
+        };
+    }
+    return { json: JSON.stringify(props) };
+}
+function renderIslandMarker(input) {
+    // The name becomes a path segment when the browser fetches
+    // /__wrnexus/island/<name>.js, so reuse the framework's conservative charset
+    // rather than relying on escaping alone.
+    if (!isSafeIslandName(input.name)) {
+        throw new Error(`Island name '${input.name}' is not a safe identifier. ` +
+            `Island names may only contain letters, digits, underscores, and hyphens.`);
+    }
+    return (`<div data-wrn-island="${escapeHtml(input.name)}"` +
+        ` data-wrn-island-strategy="${input.strategy}"` +
+        ` data-wrn-island-props="${escapeHtml(input.propsJson)}"></div>`);
+}
+/**
+ * Local binding names introduced by island imports.
+ *
+ * Codegen sees only component tag names, so it needs the set of names that came
+ * from `.tsx` imports to tell an island apart from a `.wrn` component.
+ */
+function islandNamesFrom(imports) {
+    const names = new Set();
+    for (const entry of imports) {
+        if (entry.kind !== "island")
+            continue;
+        const local = entry.declaration.defaultImport;
+        if (local)
+            names.add(local);
+    }
+    return names;
+}
 
 },
 "packages/compiler/src/native-codegen.ts": function (module, exports, require, __filename, __dirname) {

editors/vscode/src/completion.js

@@ -570,6 +570,41 @@ function isInsideWatch(document, position) {
   return depth > 0;
 }
 
+/**
+ * Whether an offset sits inside a `view { }` block.
+ *
+ * The language server owns completion there and returns a merged list, so this
+ * provider stands down to avoid VS Code concatenating two independent lists.
+ * Quotes are only tracked inside a tag: `<p>it's</p>` would otherwise open a
+ * string that never closes.
+ */
+function isInsideViewBlock(text, offset) {
+  const pattern = /\bview\s*\{/g;
+  let match;
+  while ((match = pattern.exec(text))) {
+    const start = match.index + match[0].length;
+    let depth = 1;
+    let inTag = false;
+    let quote = null;
+    let index = start;
+    for (; index < text.length && depth > 0; index += 1) {
+      const char = text[index];
+      if (quote) {
+        if (char === quote) quote = null;
+        continue;
+      }
+      if (inTag && (char === '"' || char === "'")) quote = char;
+      else if (char === "<") inTag = true;
+      else if (char === ">") inTag = false;
+      else if (char === "{") depth += 1;
+      else if (char === "}") depth -= 1;
+    }
+    if (offset >= start && offset <= index) return true;
+    pattern.lastIndex = index;
+  }
+  return false;
+}
+
 function isAfterWatchKeyword(document, position) {
   const linePrefix = document.lineAt(position.line).text.slice(0, position.character);
 
@@ -634,6 +669,8 @@ function addFunctionCompletions(items, document) {
 }
 
 function provideCompletionItems(document, position) {
+  if (isInsideViewBlock(document.getText(), document.offsetAt(position))) return [];
+
   const items = [];
 
   const linePrefix = document.lineAt(position.line).text.slice(0, position.character);
@@ -707,6 +744,7 @@ module.exports = {
   extractProps,
   extractRouteParams,
   extractStates,
+  isInsideViewBlock,
   provideCompletionItems,
   registerCompletionProvider,
 };

editors/vscode/src/extension.bundle.cjs

@@ -1,4 +1,4 @@
-// WRN editor extension source hash: 28a3937b948e6affb33150753d537162c6702786551dd90ab0968ef9166f21ac
+// WRN editor extension source hash: 2012cf8721073e3d9df81af2d3207fdf070119fb3f85ed832ce23c3ee4307662
 // WRN editor extension generator hash: 456d1d614e44e5fb1f19b784176c09cf2ade9b64ef73a17934c2698150b62728
 "use strict";
 var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
@@ -22718,6 +22718,42 @@ async function recoverWrnLanguage(document) {
     console.warn("[wrnexus] unable to recover .wrn language association:", error instanceof Error ? error.message : String(error));
   }
 }
+function registerAutoCloseTags(context, client2) {
+  const listener = vscode.workspace.onDidChangeTextDocument(async (event) => {
+    if (event.document.languageId !== "wrn")
+      return;
+    if (!vscode.workspace.getConfiguration("wrnexus.html").get("autoClosingTags", true))
+      return;
+    const change = event.contentChanges[0];
+    if (!change || change.text !== ">" && change.text !== "/")
+      return;
+    if (change.rangeLength !== 0)
+      return;
+    const editor = vscode.window.activeTextEditor;
+    if (!editor || editor.document !== event.document)
+      return;
+    const documentVersion = event.document.version;
+    const position = change.range.start.translate(0, change.text.length);
+    if (!editor.selection.isEmpty || !editor.selection.active.isEqual(position))
+      return;
+    const snippet = await client2.sendRequest("wrn/tagComplete", {
+      textDocument: { uri: event.document.uri.toString() },
+      position: { line: position.line, character: position.character }
+    });
+    if (typeof snippet !== "string" || !snippet)
+      return;
+    if (vscode.window.activeTextEditor !== editor)
+      return;
+    if (editor.document !== event.document)
+      return;
+    if (editor.document.version !== documentVersion)
+      return;
+    if (!editor.selection.isEmpty || !editor.selection.active.isEqual(position))
+      return;
+    await editor.insertSnippet(new vscode.SnippetString(snippet), position);
+  });
+  context.subscriptions.push(listener);
+}
 async function activate(context) {
   for (const document of vscode.workspace.textDocuments)
     recoverWrnLanguage(document);
@@ -22730,6 +22766,7 @@ async function activate(context) {
     debug: { module: module2, transport: TransportKind.stdio, options: { execArgv: ["--nolazy"] } }
   }, { documentSelector: [{ scheme: "file", language: WRN_LANGUAGE_ID }] });
   await client.start();
+  registerAutoCloseTags(context, client);
 }
 async function deactivate() {
   const running = client;
@@ -22737,4 +22774,4 @@ async function deactivate() {
   if (running)
     await running.stop();
 }
-module.exports = { activate, deactivate, recoverWrnLanguage };
+module.exports = { activate, deactivate, recoverWrnLanguage, registerAutoCloseTags };

editors/vscode/src/extension.js

@@ -23,6 +23,51 @@ async function recoverWrnLanguage(document) {
   }
 }
 
+/**
+ * Auto-close tags as they are typed.
+ *
+ * LSP has no request for this, so the client watches document changes and asks
+ * the server whether the tag should close. The server owns the decision because
+ * void elements and already-closed tags must not be closed.
+ */
+function registerAutoCloseTags(context, client) {
+  const listener = vscode.workspace.onDidChangeTextDocument(async (event) => {
+    if (event.document.languageId !== "wrn") return;
+    if (!vscode.workspace.getConfiguration("wrnexus.html").get("autoClosingTags", true)) return;
+
+    const change = event.contentChanges[0];
+    if (!change || (change.text !== ">" && change.text !== "/")) return;
+    // A replaced selection (overtype/select-and-type) makes `range.start + text.length`
+    // an incorrect offset for both the query and the insertion; decline rather than guess.
+    if (change.rangeLength !== 0) return;
+
+    const editor = vscode.window.activeTextEditor;
+    if (!editor || editor.document !== event.document) return;
+
+    const documentVersion = event.document.version;
+    const position = change.range.start.translate(0, change.text.length);
+    if (!editor.selection.isEmpty || !editor.selection.active.isEqual(position)) return;
+
+    const snippet = await client.sendRequest("wrn/tagComplete", {
+      textDocument: { uri: event.document.uri.toString() },
+      position: { line: position.line, character: position.character },
+    });
+    if (typeof snippet !== "string" || !snippet) return;
+
+    // The user may have kept typing during the round-trip; re-validate everything the
+    // insertion depends on before touching the document, since a stale offset would
+    // silently corrupt it.
+    if (vscode.window.activeTextEditor !== editor) return;
+    if (editor.document !== event.document) return;
+    if (editor.document.version !== documentVersion) return;
+    if (!editor.selection.isEmpty || !editor.selection.active.isEqual(position)) return;
+
+    await editor.insertSnippet(new vscode.SnippetString(snippet), position);
+  });
+
+  context.subscriptions.push(listener);
+}
+
 /** @param {vscode.ExtensionContext} context */
 async function activate(context) {
   for (const document of vscode.workspace.textDocuments) void recoverWrnLanguage(document);
@@ -43,6 +88,7 @@ async function activate(context) {
     { documentSelector: [{ scheme: "file", language: WRN_LANGUAGE_ID }] },
   );
   await client.start();
+  registerAutoCloseTags(context, client);
 }
 
 async function deactivate() {
@@ -51,4 +97,4 @@ async function deactivate() {
   if (running) await running.stop();
 }
 
-module.exports = { activate, deactivate, recoverWrnLanguage };
+module.exports = { activate, deactivate, recoverWrnLanguage, registerAutoCloseTags };

editors/vscode/test/completion-scope.test.js

@@ -0,0 +1,110 @@
+"use strict";
+
+const test = require("node:test");
+const assert = require("node:assert");
+const Module = require("node:module");
+
+// Mock the vscode module for unit tests
+const originalLoad = Module._load;
+Module._load = function load(request, parent, isMain) {
+  if (request === "vscode") {
+    return {
+      Position: class Position {
+        constructor(line, character) {
+          this.line = line;
+          this.character = character;
+        }
+      },
+      Range: class Range {
+        constructor(start, end) {
+          this.start = start;
+          this.end = end;
+        }
+      },
+      CompletionItem: class CompletionItem {
+        constructor(label, kind) {
+          this.label = label;
+          this.kind = kind;
+        }
+      },
+      CompletionItemKind: {
+        Event: 23,
+        Property: 10,
+        Function: 12,
+        Keyword: 14,
+        Variable: 13,
+      },
+      SnippetString: class SnippetString {
+        constructor(text) {
+          this.value = text;
+        }
+      },
+      MarkdownString: class MarkdownString {
+        constructor(text) {
+          this.value = text;
+        }
+      },
+    };
+  }
+  return originalLoad.call(this, request, parent, isMain);
+};
+const { isInsideViewBlock, provideCompletionItems } = require("../src/completion.js");
+Module._load = originalLoad;
+
+const PAGE = `page Home {
+  view {
+    <div>hello</div>
+  }
+  functions {
+    function go() {}
+  }
+}
+`;
+
+test("a markup offset is inside a view block", () => {
+  assert.equal(isInsideViewBlock(PAGE, PAGE.indexOf("<div")), true);
+});
+
+test("a functions-block offset is not inside a view block", () => {
+  assert.equal(isInsideViewBlock(PAGE, PAGE.indexOf("function go")), false);
+});
+
+test("provideCompletionItems returns empty array when inside view block", () => {
+  const document = {
+    getText() {
+      return PAGE;
+    },
+    offsetAt() {
+      return PAGE.indexOf("<div");
+    },
+    lineAt() {
+      return { text: "<div>hello</div>" };
+    },
+    fileName: "test.wrn",
+  };
+  const position = { line: 2, character: 4 };
+
+  const result = provideCompletionItems(document, position);
+  assert.equal(Array.isArray(result), true);
+  assert.equal(result.length, 0);
+});
+
+test("provideCompletionItems returns non-empty array when inside functions block", () => {
+  const document = {
+    getText() {
+      return PAGE;
+    },
+    offsetAt() {
+      return PAGE.indexOf("function go");
+    },
+    lineAt() {
+      return { text: "    function go() {}" };
+    },
+    fileName: "test.wrn",
+  };
+  const position = { line: 5, character: 4 };
+
+  const result = provideCompletionItems(document, position);
+  assert.equal(Array.isArray(result), true);
+  assert(result.length > 0, "should return non-empty completions outside view block");
+});

editors/vscode/test/validate.mjs

@@ -113,6 +113,21 @@ try {
     readFileSync(join(root, rel), "utf8");
     ok(`Marketplace document exists: ${rel}`);
   }
+
+  const emmetLanguages = manifest.contributes?.configurationDefaults?.["emmet.includeLanguages"];
+  emmetLanguages?.wrn === "html"
+    ? ok("Emmet is mapped for wrn documents")
+    : bad("Emmet is mapped for wrn documents", `got ${JSON.stringify(emmetLanguages)}`);
+
+  const autoClose =
+    manifest.contributes?.configuration?.properties?.["wrnexus.html.autoClosingTags"];
+  autoClose?.type === "boolean" && autoClose?.default === true
+    ? ok("auto-closing tags setting is contributed")
+    : bad("auto-closing tags setting is contributed", `got ${JSON.stringify(autoClose)}`);
+
+  manifest.dependencies?.["vscode-html-languageservice"]
+    ? ok("HTML language service ships as a runtime dependency")
+    : bad("HTML language service ships as a runtime dependency");
 } catch (e) {
   bad("Marketplace metadata", e.message);
 }

examples/auth-showcase/package.json

@@ -19,10 +19,10 @@
     "@wrnexus/validation": "workspace:*"
   },
   "devDependencies": {
-    "@iconify-json/lucide": "^1.2.0",
-    "@iconify/tailwind4": "^1.0.0",
-    "@tailwindcss/cli": "^4.0.0",
-    "tailwindcss": "^4.0.0",
-    "typescript": "^5.9.2"
+    "@iconify-json/lucide": "^1.2.123",
+    "@iconify/tailwind4": "^1.2.3",
+    "@tailwindcss/cli": "^4.3.3",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^6.0.3"
   }
 }

examples/basic-app/app/db/queries.gen.ts

@@ -1,4 +1,4 @@
-// AUTO-GENERATED by `wrnexus db generate` — do not edit.
+// AUTO-GENERATED by `wrnexus db generate` (dialect: sqlite) — do not edit.
 import type { Db, ExecResult } from "@wrnexus/db";
 import { users } from "./schema.ts";
 

examples/basic-app/app/islands/Counter.tsx

@@ -0,0 +1,10 @@
+import { useState } from "react";
+
+export default function Counter({ start = 0 }: { start?: number }) {
+  const [count, setCount] = useState(start);
+  return (
+    <button type="button" onClick={() => setCount((value) => value + 1)}>
+      {`clicked ${count}`}
+    </button>
+  );
+}

examples/basic-app/app/pages/html-editing-check.wrn

@@ -0,0 +1,13 @@
+page HtmlEditingCheck {
+  seo {
+    title = "HTML editing check"
+    description = "Scratch page for verifying editor support inside view blocks."
+    canonical = "/html-editing-check"
+  }
+
+  view {
+    <main>
+      <h1>Editor check</h1>
+    </main>
+  }
+}

examples/basic-app/app/pages/island-demo.wrn

@@ -0,0 +1,21 @@
+import Counter from "../islands/Counter"
+
+// React island demo. Route: /island-demo
+//
+// Counter.tsx is a plain React component: the compiler emits an island
+// placeholder here instead of a server-rendered component mount, and the
+// browser mounts it with createRoot.
+page IslandDemo {
+  seo {
+    title = "Island demo"
+    description = "Mounts a React island inside a server-rendered WRNexus page."
+    canonical = "/island-demo"
+  }
+
+  view {
+    <main>
+      <h1>React island</h1>
+      <Counter start={3} client:visible />
+    </main>
+  }
+}

examples/basic-app/app/routes.gen.ts

@@ -9,6 +9,8 @@ export interface Routes {
   "/client-only": Record<string, never>;
   "/dashboard": Record<string, never>;
   "/hello": Record<string, never>;
+  "/html-editing-check": Record<string, never>;
+  "/island-demo": Record<string, never>;
   "/language-tools": Record<string, never>;
   "/layout": Record<string, never>;
   "/login": Record<string, never>;
@@ -31,6 +33,8 @@ export interface RouteNames {
   "client.only": "/client-only";
   "dashboard": "/dashboard";
   "hello": "/hello";
+  "html.editing.check": "/html-editing-check";
+  "island.demo": "/island-demo";
   "language.tools": "/language-tools";
   "layout": "/layout";
   "login": "/login";
@@ -122,6 +126,8 @@ export function route<N extends RouteName>(
   "client.only": "/client-only",
   "dashboard": "/dashboard",
   "hello": "/hello",
+  "html.editing.check": "/html-editing-check",
+  "island.demo": "/island-demo",
   "language.tools": "/language-tools",
   "layout": "/layout",
   "login": "/login",

examples/basic-app/app/types/wrnexus.generated.d.ts

@@ -13,7 +13,7 @@ declare namespace WRNexusGenerated {
       : never;
   type RealtimeMessage<T> = T extends import("@wrnexus/core").RoomDefinition<any, infer M> ? M : unknown;
   type QueuePayload<T> = T extends import("@wrnexus/queue").JobDefinition<infer I> ? I : unknown;
-  type RouteName = "about" | "async.data" | "chat" | "client.only" | "dashboard" | "hello" | "index" | "language.tools" | "layout" | "login" | "modal" | "navigation" | "partial.static" | "platform.showcase" | "reactive" | "server.actions" | "table" | "test" | "ui";
+  type RouteName = "about" | "async.data" | "chat" | "client.only" | "dashboard" | "hello" | "html.editing.check" | "index" | "island.demo" | "language.tools" | "layout" | "login" | "modal" | "navigation" | "partial.static" | "platform.showcase" | "reactive" | "server.actions" | "table" | "test" | "ui";
   type ApiRoute = "/api/accounts" | "/api/echo" | "/api/graphql-example" | "/api/hello" | "/api/invite" | "/api/login" | "/api/logout" | "/api/me" | "/api/typed-user" | "/api/users/csr" | "/api/users/ssr" | "/api/webhooks/payment";
   type RealtimeRoute = "/realtime/chat" | "/realtime/hello";
   type EnvironmentKey = "APP_LABEL" | "DATABASE_URL" | "DEMO_SHARED" | "HOST" | "NODE_ENV" | "PORT" | "SESSION_SECRET" | "UAT_ONLY";

examples/basic-app/package.json

@@ -23,12 +23,12 @@
   "devDependencies": {
     "@wrnexus/test": "workspace:*",
     "@eslint/js": "^10.0.1",
-    "@iconify-json/lucide": "^1.2.118",
+    "@iconify-json/lucide": "^1.2.123",
     "@iconify/tailwind4": "^1.2.3",
-    "@tailwindcss/cli": "^4.0.0",
-    "eslint": "^10.8.0",
-    "prettier": "^3.9.4",
-    "tailwindcss": "^4.0.0",
-    "typescript-eslint": "^8.65.0"
+    "@tailwindcss/cli": "^4.3.3",
+    "eslint": "^10.8.1",
+    "prettier": "^3.9.6",
+    "tailwindcss": "^4.3.3",
+    "typescript-eslint": "^8.67.0"
   }
 }

examples/captcha-showcase/package.json

@@ -16,10 +16,10 @@
     "@wrnexus/validation": "workspace:*"
   },
   "devDependencies": {
-    "@iconify-json/lucide": "^1.2.0",
-    "@iconify/tailwind4": "^1.0.0",
-    "@tailwindcss/cli": "^4.0.0",
-    "tailwindcss": "^4.0.0",
-    "typescript": "^5.9.2"
+    "@iconify-json/lucide": "^1.2.123",
+    "@iconify/tailwind4": "^1.2.3",
+    "@tailwindcss/cli": "^4.3.3",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^6.0.3"
   }
 }

examples/component-showcase/package.json

@@ -18,10 +18,10 @@
     "@wrnexus/ui": "workspace:*"
   },
   "devDependencies": {
-    "@iconify-json/lucide": "^1.2.118",
+    "@iconify-json/lucide": "^1.2.123",
     "@iconify/tailwind4": "^1.2.3",
-    "@tailwindcss/cli": "^4.0.0",
-    "tailwindcss": "^4.0.0",
-    "typescript": "^5.5.0"
+    "@tailwindcss/cli": "^4.3.3",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^6.0.3"
   }
 }

examples/i18n-showcase/package.json

@@ -16,10 +16,10 @@
     "@wrnexus/ui": "workspace:*"
   },
   "devDependencies": {
-    "@iconify-json/lucide": "^1.2.118",
+    "@iconify-json/lucide": "^1.2.123",
     "@iconify/tailwind4": "^1.2.3",
-    "@tailwindcss/cli": "^4.0.0",
-    "tailwindcss": "^4.0.0",
-    "typescript": "^5.9.2"
+    "@tailwindcss/cli": "^4.3.3",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^6.0.3"
   }
 }

examples/inter-app-api-showcase/apps/admin/package.json

@@ -24,40 +24,40 @@
     "check": "bun run typecheck && bun run lint && bun run test && bun run format:check"
   },
   "dependencies": {
-    "@wrnexus/ai": "0.8.6",
-    "@wrnexus/auth": "0.8.6",
-    "@wrnexus/captcha": "0.8.6",
-    "@wrnexus/core": "0.8.6",
-    "@wrnexus/csr": "0.8.6",
-    "@wrnexus/db": "0.8.6",
-    "@wrnexus/dev-server": "0.8.6",
-    "@wrnexus/encryption": "0.8.6",
-    "@wrnexus/helpers": "0.8.6",
-    "@wrnexus/i18n": "0.8.6",
-    "@wrnexus/image": "0.8.6",
-    "@wrnexus/jwt": "0.8.6",
-    "@wrnexus/observability": "0.8.6",
-    "@wrnexus/realtime": "0.8.6",
-    "@wrnexus/security": "0.8.6",
-    "@wrnexus/store": "0.8.6",
-    "@wrnexus/styles": "0.8.6",
-    "@wrnexus/tracking": "0.8.6",
-    "@wrnexus/ui": "0.8.6",
-    "@wrnexus/uploader": "0.8.6",
-    "@wrnexus/validation": "0.8.6",
-    "@wrnexus/authz": "0.8.6"
+    "@wrnexus/ai": "^0.8.9",
+    "@wrnexus/auth": "^0.8.12",
+    "@wrnexus/captcha": "^0.8.11",
+    "@wrnexus/core": "^0.8.9",
+    "@wrnexus/csr": "^0.8.21",
+    "@wrnexus/db": "^0.8.15",
+    "@wrnexus/dev-server": "^0.8.33",
+    "@wrnexus/encryption": "^0.8.9",
+    "@wrnexus/helpers": "^0.8.8",
+    "@wrnexus/i18n": "^0.8.11",
+    "@wrnexus/image": "^0.8.10",
+    "@wrnexus/jwt": "^0.8.9",
+    "@wrnexus/observability": "^0.8.8",
+    "@wrnexus/realtime": "^0.8.10",
+    "@wrnexus/security": "^0.8.8",
+    "@wrnexus/store": "^0.8.8",
+    "@wrnexus/styles": "^0.8.15",
+    "@wrnexus/tracking": "^0.8.8",
+    "@wrnexus/ui": "^0.8.19",
+    "@wrnexus/uploader": "^0.8.10",
+    "@wrnexus/validation": "^0.8.10",
+    "@wrnexus/authz": "^0.8.9"
   },
   "devDependencies": {
-    "@wrnexus/cli": "0.8.6",
-    "@eslint/js": "^9.0.0",
-    "@iconify-json/lucide": "^1.2.118",
+    "@wrnexus/cli": "^0.8.36",
+    "@eslint/js": "^10.0.1",
+    "@iconify-json/lucide": "^1.2.123",
     "@iconify/tailwind4": "^1.2.3",
-    "@tailwindcss/cli": "^4.0.0",
+    "@tailwindcss/cli": "^4.3.3",
     "@types/bun": "^1.3.14",
-    "eslint": "^9.0.0",
+    "eslint": "^10.8.1",
     "prettier": "^3.9.6",
-    "tailwindcss": "^4.0.0",
-    "typescript": "^5.5.0",
-    "typescript-eslint": "^8.65.0"
+    "tailwindcss": "^4.3.3",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.67.0"
   }
 }

examples/inter-app-api-showcase/apps/web/package.json

@@ -24,40 +24,40 @@
     "check": "bun run typecheck && bun run lint && bun run test && bun run format:check"
   },
   "dependencies": {
-    "@wrnexus/ai": "0.8.6",
-    "@wrnexus/auth": "0.8.6",
-    "@wrnexus/captcha": "0.8.6",
-    "@wrnexus/core": "0.8.6",
-    "@wrnexus/csr": "0.8.6",
-    "@wrnexus/db": "0.8.6",
-    "@wrnexus/dev-server": "0.8.6",
-    "@wrnexus/encryption": "0.8.6",
-    "@wrnexus/helpers": "0.8.6",
-    "@wrnexus/i18n": "0.8.6",
-    "@wrnexus/image": "0.8.6",
-    "@wrnexus/jwt": "0.8.6",
-    "@wrnexus/observability": "0.8.6",
-    "@wrnexus/realtime": "0.8.6",
-    "@wrnexus/security": "0.8.6",
-    "@wrnexus/store": "0.8.6",
-    "@wrnexus/styles": "0.8.6",
-    "@wrnexus/tracking": "0.8.6",
-    "@wrnexus/ui": "0.8.6",
-    "@wrnexus/uploader": "0.8.6",
-    "@wrnexus/validation": "0.8.6",
-    "@wrnexus/authz": "0.8.6"
+    "@wrnexus/ai": "^0.8.9",
+    "@wrnexus/auth": "^0.8.12",
+    "@wrnexus/captcha": "^0.8.11",
+    "@wrnexus/core": "^0.8.9",
+    "@wrnexus/csr": "^0.8.21",
+    "@wrnexus/db": "^0.8.15",
+    "@wrnexus/dev-server": "^0.8.33",
+    "@wrnexus/encryption": "^0.8.9",
+    "@wrnexus/helpers": "^0.8.8",
+    "@wrnexus/i18n": "^0.8.11",
+    "@wrnexus/image": "^0.8.10",
+    "@wrnexus/jwt": "^0.8.9",
+    "@wrnexus/observability": "^0.8.8",
+    "@wrnexus/realtime": "^0.8.10",
+    "@wrnexus/security": "^0.8.8",
+    "@wrnexus/store": "^0.8.8",
+    "@wrnexus/styles": "^0.8.15",
+    "@wrnexus/tracking": "^0.8.8",
+    "@wrnexus/ui": "^0.8.19",
+    "@wrnexus/uploader": "^0.8.10",
+    "@wrnexus/validation": "^0.8.10",
+    "@wrnexus/authz": "^0.8.9"
   },
   "devDependencies": {
-    "@wrnexus/cli": "0.8.6",
-    "@eslint/js": "^9.0.0",
-    "@iconify-json/lucide": "^1.2.118",
+    "@wrnexus/cli": "^0.8.36",
+    "@eslint/js": "^10.0.1",
+    "@iconify-json/lucide": "^1.2.123",
     "@iconify/tailwind4": "^1.2.3",
-    "@tailwindcss/cli": "^4.0.0",
+    "@tailwindcss/cli": "^4.3.3",
     "@types/bun": "^1.3.14",
-    "eslint": "^9.0.0",
+    "eslint": "^10.8.1",
     "prettier": "^3.9.6",
-    "tailwindcss": "^4.0.0",
-    "typescript": "^5.5.0",
-    "typescript-eslint": "^8.65.0"
+    "tailwindcss": "^4.3.3",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.67.0"
   }
 }

examples/inter-app-api-showcase/package.json

@@ -21,12 +21,12 @@
     "check": "bun run typecheck && bun run lint && bun run test && bun run format:check"
   },
   "devDependencies": {
-    "@wrnexus/cli": "0.8.6",
-    "@eslint/js": "^9.0.0",
+    "@wrnexus/cli": "^0.8.36",
+    "@eslint/js": "^10.0.1",
     "@types/bun": "^1.3.14",
-    "eslint": "^9.0.0",
+    "eslint": "^10.8.1",
     "prettier": "^3.9.6",
-    "typescript": "^5.5.0",
-    "typescript-eslint": "^8.65.0"
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.67.0"
   }
 }

examples/inter-app-api-showcase/packages/shared/package.json

@@ -12,6 +12,6 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@wrnexus/pubsub": "0.8.6"
+    "@wrnexus/pubsub": "^0.8.9"
   }
 }

package.json

@@ -71,12 +71,16 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@types/bun": "^1.3.14",
-    "eslint": "^10.8.0",
-    "happy-dom": "^20.11.1",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "eslint": "^10.8.1",
+    "happy-dom": "^20.11.2",
     "prettier": "^3.9.6",
+    "react": "^19",
+    "react-dom": "^19",
     "tsup": "^8.5.1",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.65.0"
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.67.0"
   },
   "engines": {
     "bun": ">=1.3.0"

packages/auth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/auth",
-  "version": "0.8.11",
+  "version": "0.8.12",
   "description": "Complete authentication, account security, MFA, passkeys, recovery, devices, risk, and audit system for WRNexusJS.",
   "type": "module",
   "sideEffects": false,
@@ -54,7 +54,7 @@
   "devDependencies": {
     "@types/bun": "^1.3.14",
     "@wrnexus/syntax": "workspace:*",
-    "typescript": "^5.9.2"
+    "typescript": "^6.0.3"
   },
   "wrnexus": {
     "plugin": {

packages/captcha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/captcha",
-  "version": "0.8.10",
+  "version": "0.8.11",
   "description": "First-class CAPTCHA challenges, providers, verification guards, page gates, and WRNexusJS UI.",
   "type": "module",
   "sideEffects": false,
@@ -48,7 +48,7 @@
   },
   "devDependencies": {
     "@types/bun": "^1.3.14",
-    "typescript": "^5.9.2",
+    "typescript": "^6.0.3",
     "@wrnexus/syntax": "workspace:*"
   },
   "wrnexus": {

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/cli",
-  "version": "0.8.32",
+  "version": "0.8.42",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
@@ -28,6 +28,7 @@
     "@wrnexus/db": "workspace:*",
     "@wrnexus/authz": "workspace:*",
     "@wrnexus/plugin": "workspace:*",
+    "@wrnexus/react": "workspace:*",
     "@wrnexus/syntax": "workspace:*",
     "@wrnexus/typecheck": "workspace:*",
     "@wrnexus/security": "workspace:*",

packages/cli/src/build.ts

@@ -24,9 +24,13 @@ import {
 import { basename, dirname, extname, join, relative, resolve } from "node:path";
 import { buildRouter, type Route } from "@wrnexus/router";
 import { getComponentControllerRuntime, getReactiveRuntime } from "@wrnexus/csr";
+import { getIslandRuntime } from "@wrnexus/react/runtime";
 import {
   analyzeRuntimeImports,
   analyzeRuntimeRequirements,
+  assertReactAvailable,
+  buildIslands,
+  islandNamesFrom,
   assertValidAst,
   generate,
   generateTargets,
@@ -112,6 +116,7 @@ export async function runBuild(appRoot: string): Promise<void> {
   const clientModulesDir = join(distDir, "client");
   const reactivePath = join(distDir, "reactive.js");
   const controllersPath = join(distDir, "controllers.js");
+  const islandsPath = join(distDir, "islands.js");
   const publicDir = join(root, "public");
   const distPublicDir = join(distDir, "public");
   const config = await loadAppConfig(root);
@@ -183,6 +188,8 @@ export async function runBuild(appRoot: string): Promise<void> {
   const clientFiles = new Map<string, string>();
   const runtimeAnalysis = new Map<string, RuntimeRequirements>();
   const partialStaticFiles = new Set<string>();
+  /** Island component name -> resolved .tsx source, collected across all routes. */
+  const discoveredIslands = new Map<string, string>();
   const compileWrn = async (file: string): Promise<void> => {
     if (!file.endsWith(".wrn") || compiledFiles.has(file)) return;
     const source = readFileSync(file, "utf8");
@@ -207,7 +214,25 @@ export async function runBuild(appRoot: string): Promise<void> {
     assertValidAst(ast, { file, accessibility: true });
     ast = await pluginRunner.transformAst(ast, file);
     if (ast.renderMode === "partial-static") partialStaticFiles.add(file);
-    runtimeAnalysis.set(file, analyzeRuntimeRequirements(ast));
+
+    // Islands must be known before codegen (to emit markers instead of
+    // component mounts) and before route analysis (an island route ships JS).
+    const fileImports = resolveWrnImports(ast.structuredImports, file, {
+      appRoot: root,
+      mode: config.imports?.mode ?? "compatible",
+      aliases: config.imports?.aliases,
+    });
+    const fileIslands = islandNamesFrom(fileImports);
+    for (const imported of fileImports) {
+      if (imported.kind === "island" && imported.resolved) {
+        discoveredIslands.set(imported.declaration.defaultImport!, imported.resolved);
+      }
+    }
+
+    runtimeAnalysis.set(
+      file,
+      analyzeRuntimeRequirements(ast, { hasIslands: fileIslands.size > 0 }),
+    );
     const pluginDiagnostics = await pluginRunner.diagnostics(ast, file);
     const errors = pluginDiagnostics.filter((diagnostic) => diagnostic.severity === "error");
     for (const diagnostic of pluginDiagnostics.filter((item) => item.severity !== "error")) {
@@ -221,10 +246,11 @@ export async function runBuild(appRoot: string): Promise<void> {
 
     try {
       const targets = generateTargets(ast);
-      let code = `// compiled from ${fwd(relative(root, file))}\n${generate(ast)}`.replaceAll(
-        "__WRNEXUS_CLIENT_MODULE__",
-        clientUrl,
-      );
+      let code =
+        `// compiled from ${fwd(relative(root, file))}\n${generate(ast, { islands: fileIslands })}`.replaceAll(
+          "__WRNEXUS_CLIENT_MODULE__",
+          clientUrl,
+        );
       let browserCode = `// browser module compiled from ${fwd(relative(root, file))}\n${targets.browser}`;
       code = await pluginRunner.transformCode(code, file);
       browserCode = await pluginRunner.transformCode(browserCode, file);
@@ -247,11 +273,7 @@ export async function runBuild(appRoot: string): Promise<void> {
         );
       }
 
-      const resolvedImports = resolveWrnImports(ast.structuredImports, file, {
-        appRoot: root,
-        mode: config.imports?.mode ?? "compatible",
-        aliases: config.imports?.aliases,
-      });
+      const resolvedImports = fileImports;
       for (const imported of resolvedImports) {
         if (imported.diagnostic?.severity === "error") {
           throw new Error(`${imported.diagnostic.code}: ${imported.diagnostic.message}`);
@@ -493,6 +515,36 @@ export async function runBuild(appRoot: string): Promise<void> {
   assetHash.update(controllerCode);
   console.log(`✓ Controllers: ${controllersPath}`);
 
+  // Island bootstrap: emitted unconditionally but inert without markers, so a
+  // build with no islands still ships no React.
+  const islandCode = await buildBrowserRuntime(
+    getIslandRuntime(),
+    islandsPath,
+    join(compiledDir, "islands.entry.js"),
+  );
+  assetHash.update(islandCode);
+  console.log(`✓ Islands: ${islandsPath}`);
+
+  // Island bundles are emitted only when a route actually imported a .tsx, so a
+  // build with no islands produces no React and no island assets at all.
+  const islandsDir = join(distDir, "island");
+  if (discoveredIslands.size > 0) {
+    const missingReact = assertReactAvailable(root);
+    if (missingReact) {
+      throw new Error(`${missingReact.code}: ${missingReact.message}`);
+    }
+    mkdirSync(islandsDir, { recursive: true });
+    const islandBuild = await buildIslands({
+      islands: [...discoveredIslands].map(([name, sourcePath]) => ({ name, sourcePath })),
+      outDir: islandsDir,
+      appRoot: root,
+    });
+    for (const asset of islandBuild.assets) assetHash.update(asset.hash);
+    console.log(
+      `✓ Island bundles: ${islandBuild.assets.length} (${islandBuild.sharedChunks.length} shared chunks)`,
+    );
+  }
+
   // 1a) Theme tokens + client switcher (always emitted; built-in light/dark).
   const theme = resolveThemeConfig(config.theme, config.cookies);
   const themeCss = renderThemeCss(theme);
@@ -568,10 +620,14 @@ export async function runBuild(appRoot: string): Promise<void> {
         appDir,
         appRoot: root,
         mode: "production",
-        sources: [
-          ...componentDirs,
-          ...pluginContributions.styles.flatMap((style) => (style.source ? [style.source] : [])),
-        ],
+        // Component discovery is not style discovery. Built-in and plugin
+        // components own their CSS; scanning every available component makes
+        // Tailwind/Iconify generate rules for packages and components the app
+        // never renders. Packages that intentionally use app utilities opt in
+        // through an explicit styles.source contribution.
+        sources: pluginContributions.styles.flatMap((style) =>
+          style.source ? [style.source] : [],
+        ),
         entries: pluginContributions.styles.flatMap((style) => (style.entry ? [style.entry] : [])),
       },
       config.styles,
@@ -735,6 +791,7 @@ await createProductionServer(
     reactivePath: join(import.meta.dir, "reactive.js"),
     controllersPath: join(import.meta.dir, "controllers.js"),
     clientModulesDir: join(import.meta.dir, "client"),
+    islandsDir: join(import.meta.dir, "island"),
     themePath: join(import.meta.dir, "theme.css"),
     themeAssetsDir: join(import.meta.dir, "theme"),
     themeJsPath: join(import.meta.dir, "theme.js"),

packages/cli/src/create.ts

@@ -121,16 +121,16 @@ Thumbs.db
   },
   "devDependencies": {
     "@wrnexus/cli": "${cliVersion}",
-    "@eslint/js": "^9.0.0",
-    "@iconify-json/lucide": "^1.2.118",
+    "@eslint/js": "^10.0.1",
+    "@iconify-json/lucide": "^1.2.123",
     "@iconify/tailwind4": "^1.2.3",
-    "@tailwindcss/cli": "^4.0.0",
-    "@types/bun": "latest",
-    "eslint": "^9.0.0",
-    "prettier": "latest",
-    "tailwindcss": "^4.0.0",
-    "typescript": "^5.5.0",
-    "typescript-eslint": "latest"
+    "@tailwindcss/cli": "^4.3.3",
+    "@types/bun": "^1.3.14",
+    "eslint": "^10.8.1",
+    "prettier": "^3.9.6",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.67.0"
   }
 }
 `,

packages/cli/src/mobile.ts

@@ -92,7 +92,7 @@ export async function generateMobile(appRoot: string, options: MobileOptions = {
     devDependencies: {
       "@capacitor/cli": "^8.0.0",
       "@capacitor/assets": "^3.0.0",
-      typescript: "^5.5.0",
+      typescript: "^6.0.3",
     },
   };
 
@@ -237,7 +237,7 @@ function generateNativeMobile(
       "react-native-safe-area-context": "^5.6.0",
       "react-native-screens": "^4.23.0",
     },
-    devDependencies: { "@types/react": "^19.2.0", typescript: "^5.9.0" },
+    devDependencies: { "@types/react": "^19.2.0", typescript: "^6.0.3" },
   };
   const expo = `import type { ExpoConfig } from "expo/config";\nimport appConfig from "../wrnexus.config.ts";\n\nconst mobile = appConfig.mobile ?? {};\nconst config: ExpoConfig = {\n  name: mobile.appName ?? ${JSON.stringify(name)},\n  slug: ${JSON.stringify(slug(name))},\n  scheme: mobile.scheme ?? ${JSON.stringify(scheme)},\n  ios: { bundleIdentifier: mobile.appId ?? ${JSON.stringify(appId)} },\n  android: { package: mobile.appId ?? ${JSON.stringify(appId)} },\n  plugins: ["expo-router"],\n  ...(mobile.expo ?? {}),\n};\nexport default config;\n`;
   const env = `/** Shared connection settings for native screens. */\nexport const API_URL = process.env.EXPO_PUBLIC_WRNEXUS_URL ?? ${JSON.stringify(apiUrl)};\nexport async function api<T>(path: string, init?: RequestInit): Promise<T> {\n  const response = await fetch(new URL(path, API_URL), init);\n  if (!response.ok) throw new Error(\`WrNexus request failed: \${response.status}\`);\n  return response.json() as Promise<T>;\n}\nexport function realtimeUrl(path: string): string {\n  const url = new URL(path, API_URL);\n  url.protocol = url.protocol === "https:" ? "wss:" : "ws:";\n  return url.toString();\n}\n`;

packages/cli/src/system.ts

@@ -53,7 +53,7 @@ export function generateSystem(rootDir: string, input: string): string[] {
             "@wrnexus/core": "workspace:*",
             "@wrnexus/plugin": "workspace:*",
           },
-          devDependencies: { "@types/bun": "latest", typescript: "^5.9.2" },
+          devDependencies: { "@types/bun": "^1.3.14", typescript: "^6.0.3" },
           wrnexus: {
             plugin: { plugin: "./src/plugin.ts", export: "default", factory: true },
           },

packages/cli/src/workspace.ts

@@ -13,7 +13,7 @@
 import { existsSync, mkdirSync, readFileSync, readdirSync, rmSync, writeFileSync } from "node:fs";
 import { dirname, join, resolve } from "node:path";
 import { pathToFileURL } from "node:url";
-import { scaffoldApp } from "./create.ts";
+import { scaffoldApp, scaffoldFrameworkRange } from "./create.ts";
 import { currentCliVersion } from "./update-notifier.ts";
 import type { GatewayAuth, GatewaySecurity } from "@wrnexus/dev-server";
 
@@ -88,12 +88,12 @@ export const workspaceFiles = (name: string): Record<string, string> => ({
   },
   "devDependencies": {
     "@wrnexus/cli": "${frameworkVersion}",
-    "@eslint/js": "^9.0.0",
-    "@types/bun": "latest",
-    "eslint": "^9.0.0",
-    "prettier": "latest",
-    "typescript": "^5.5.0",
-    "typescript-eslint": "latest"
+    "@eslint/js": "^10.0.1",
+    "@types/bun": "^1.3.14",
+    "eslint": "^10.8.1",
+    "prettier": "^3.9.6",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.67.0"
   }
 }
 `,
@@ -250,7 +250,7 @@ export default tseslint.config(
     "test": "bun test"
   },
   "dependencies": {
-    "@wrnexus/pubsub": "${frameworkVersion}"
+    "@wrnexus/pubsub": "${scaffoldFrameworkRange}"
   }
 }
 `,

packages/cli/test/create.test.ts

@@ -147,7 +147,7 @@ test("scaffoldApp uses compatible framework packages and pins the current CLI",
     }
     expect(pkg.devDependencies["@wrnexus/cli"]).toBe(version);
     expect(pkg.devDependencies["@iconify/tailwind4"]).toBe("^1.2.3");
-    expect(pkg.devDependencies["@iconify-json/lucide"]).toBe("^1.2.118");
+    expect(pkg.devDependencies["@iconify-json/lucide"]).toBe("^1.2.123");
     const globalCss = readFileSync(join(root, "app", "styles", "global.css"), "utf8");
     expect(globalCss).toContain('@plugin "@iconify/tailwind4";');
     expect(globalCss).toContain('"Plus Jakarta Sans"');

packages/cli/test/plugin-runtime-production.test.ts

@@ -69,7 +69,9 @@ export default {
     }
 
     if (port === undefined) {
-      throw new Error(`production server failed to start: ${await new Response(proc.stderr).text()}`);
+      throw new Error(
+        `production server failed to start: ${await new Response(proc.stderr).text()}`,
+      );
     }
 
     const page = await fetch(`http://127.0.0.1:${port}/`);

packages/cli/test/workspace.test.ts

@@ -3,6 +3,7 @@ import { existsSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync
 import { tmpdir } from "node:os";
 import { join } from "node:path";
 import { currentCliVersion } from "../src/update-notifier.ts";
+import { scaffoldFrameworkRange } from "../src/create.ts";
 import {
   addWorkspaceApp,
   insertWorkspaceApp,
@@ -36,14 +37,14 @@ test("workspace environments preserve runtime and HMR policy", () => {
   expect(resolved.apps[0]?.publicOrigin).toBe("https://www.staging.example.com");
 });
 
-test("workspace templates pin the running framework release", () => {
+test("workspace templates pin the CLI and use compatible independent package ranges", () => {
   const files = workspaceFiles("acme");
   const rootPackage = JSON.parse(files["package.json"]!);
   const sharedPackage = JSON.parse(files["packages/shared/package.json"]!);
   const version = currentCliVersion();
 
   expect(rootPackage.devDependencies["@wrnexus/cli"]).toBe(version);
-  expect(sharedPackage.dependencies["@wrnexus/pubsub"]).toBe(version);
+  expect(sharedPackage.dependencies["@wrnexus/pubsub"]).toBe(scaffoldFrameworkRange);
   expect(files["README.md"]).toContain("http://127.0.0.1:3000");
   expect(files["README.md"]).toContain("internal gateway targets");
   expect(JSON.parse(files["package.json"]!).scripts.production).toBe("wrnexus production");

packages/compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/compiler",
-  "version": "0.8.10",
+  "version": "0.8.11",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
@@ -8,8 +8,8 @@
   },
   "dependencies": {
     "@wrnexus/csr": "workspace:*",
-    "@wrnexus/syntax": "workspace:*",
     "@wrnexus/store": "workspace:*",
+    "@wrnexus/syntax": "workspace:*",
     "@wrnexus/validation": "workspace:*"
   }
 }

packages/compiler/src/analysis.ts

@@ -1,4 +1,5 @@
 import type { PageAst, ViewNode } from "@wrnexus/syntax";
+import type { ResolvedImport } from "./import-resolver.ts";
 
 export type RouteExecutionKind =
   | "static"
@@ -12,6 +13,8 @@ export interface RuntimeRequirements {
   kind: RouteExecutionKind;
   canPrerender: boolean;
   needsClientRuntime: boolean;
+  /** True when the route mounts a React island and must ship the island runtime. */
+  needsIslandRuntime: boolean;
   needsServerRuntime: boolean;
   hydrationStrategy: string | null;
   reasons: string[];
@@ -210,8 +213,21 @@ function hasEvent(nodes: ViewNode[]): boolean {
   return false;
 }
 
-export function analyzeRuntimeRequirements(ast: PageAst): RuntimeRequirements {
+/**
+ * A route containing a React island ships JavaScript and can no longer be
+ * classified as zero-JS static, so island presence must reach the classifier.
+ */
+export function routeNeedsIslands(imports: ResolvedImport[]): boolean {
+  return imports.some((entry) => entry.kind === "island");
+}
+
+export function analyzeRuntimeRequirements(
+  ast: PageAst,
+  options: { hasIslands?: boolean } = {},
+): RuntimeRequirements {
+  const hasIslands = options.hasIslands ?? false;
   const reasons: string[] = [];
+  if (hasIslands) reasons.push("react island");
   const clientFunctions = ast.runtimeFunctions.some((fn) => fn.runtime !== "server");
   const clientState = ast.states.some((state) => state.runtime !== "server");
   const interactive =
@@ -260,12 +276,17 @@ export function analyzeRuntimeRequirements(ast: PageAst): RuntimeRequirements {
     reasons.push("partial-static shell with streamed dynamic regions");
   }
 
+  // An island ships JavaScript, so a would-be zero-JS static route must be
+  // reported as static-interactive. Explicit render modes still win above.
+  if (hasIslands && kind === "static") kind = "static-interactive";
+
   const clientDisabled = ast.renderMode === "static" || ast.renderMode === "server";
   const serverDisabled = ast.renderMode === "client";
 
   return {
     kind,
     canPrerender: kind === "static" || kind === "static-interactive",
+    needsIslandRuntime: hasIslands,
     needsClientRuntime:
       !clientDisabled &&
       (interactive || ast.renderMode === "client") &&

packages/compiler/src/codegen.ts

@@ -22,6 +22,12 @@ import { eraseFunctionTypes, runtimeTypeOf } from "./types.ts";
 import { stripRuntimeFunctionModifiers } from "@wrnexus/syntax";
 import { generateStoreModule } from "./store-codegen.ts";
 import { optimizeAst } from "./analysis.ts";
+import {
+  islandPropValue,
+  parseIslandStrategy,
+  renderIslandMarker,
+  serializeIslandProps,
+} from "./island-codegen.ts";
 import { browserModuleRequired } from "./client-codegen.ts";
 
 interface RenderBinding {
@@ -43,6 +49,48 @@ interface NamedDataBinding extends RenderBinding {
   mode: DataMode;
 }
 
+/**
+ * Island names for the file currently being generated.
+ *
+ * Codegen is a synchronous single pass, so a module-scoped set avoids threading
+ * an extra parameter through every render function. Always reset in generate().
+ */
+let currentIslands: ReadonlySet<string> = new Set<string>();
+
+/**
+ * Builds the island placeholder for a component tag that was imported from a
+ * .tsx file. Returns null for ordinary .wrn components.
+ */
+function islandMarkerFor(node: {
+  tag: string;
+  attrs: Array<{ name: string; value?: string }>;
+}): string | null {
+  if (!currentIslands.has(node.tag)) return null;
+  const directives = node.attrs
+    .map((attr) => attr.name)
+    .filter((name) => name.startsWith("client:"));
+  const props: Record<string, unknown> = {};
+  for (const attr of node.attrs) {
+    if (attr.name.startsWith("client:")) continue;
+    const parsed = islandPropValue(attr.value);
+    if ("dynamic" in parsed) {
+      throw new Error(
+        `WRN-ISLAND-PROPS: Island '${node.tag}' received a runtime expression for prop '${attr.name}'. ` +
+          `Island props are serialized at build time, so they must be literal values ` +
+          `(for example start={3} or title="Revenue"), not ${attr.value}.`,
+      );
+    }
+    props[attr.name] = parsed.value;
+  }
+  const serialized = serializeIslandProps(node.tag, props);
+  if ("diagnostic" in serialized) throw new Error(serialized.diagnostic.message);
+  return renderIslandMarker({
+    name: node.tag,
+    strategy: parseIslandStrategy(directives),
+    propsJson: serialized.json,
+  });
+}
+
 function isComponentTag(tag: string): boolean {
   return /^[A-Z][A-Za-z0-9_$]*$/.test(tag);
 }
@@ -448,6 +496,8 @@ function renderLoopBody(node: ViewNode): string {
   }
 
   if (componentTag) {
+    const island = islandMarkerFor(node);
+    if (island) return escLit(island);
     return (
       escLit(`<div data-component="${attrEscape(node.tag)}"`) +
       attrs +
@@ -704,6 +754,9 @@ function renderPageComponentInvocation(
   loops: string[],
   reactive: PageReactive | null,
 ): string {
+  const island = islandMarkerFor(node);
+  if (island) return island;
+
   const attrs = node.attrs
     .filter((attr) => attr.name !== "data-component")
     .map((attr) => renderPageComponentAttr(attr, loops))
@@ -720,6 +773,10 @@ function renderNestedComponentInvocation(
   node: Extract<ViewNode, { type: "element" }>,
   ctx: CompCtx,
 ): string {
+  // Islands work inside .wrn components too, not just pages.
+  const island = islandMarkerFor(node);
+  if (island) return island;
+
   let bindIndex = 0;
 
   const attrs = node.attrs
@@ -1255,7 +1312,21 @@ function markServerAsyncBoundaries(nodes: ViewNode[], serverLoads: ReadonlySet<s
   }
 }
 
-export function generate(ast: PageAst): string {
+export interface GenerateOptions {
+  /** Local names bound to .tsx island imports in this file. */
+  islands?: ReadonlySet<string>;
+}
+
+export function generate(ast: PageAst, options: GenerateOptions = {}): string {
+  currentIslands = options.islands ?? new Set<string>();
+  try {
+    return generateInner(ast);
+  } finally {
+    currentIslands = new Set<string>();
+  }
+}
+
+function generateInner(ast: PageAst): string {
   ast = optimizeAst(ast).ast;
   if (ast.kind === "global-store" || ast.kind === "page-store") return generateStoreModule(ast);
   if (ast.kind === "component" || ast.kind === "layout") {

packages/compiler/src/import-resolver.ts

@@ -11,6 +11,8 @@ export interface ImportResolverOptions {
 export interface ResolvedImport {
   declaration: StructuredImportDecl;
   resolved?: string;
+  /** `.tsx` imports are React islands, not `.wrn` components. */
+  kind?: "island";
   diagnostic?: { code: string; message: string; severity: "error" | "warning" };
 }
 
@@ -21,9 +23,11 @@ function candidates(path: string): string[] {
         path,
         `${path}.wrn`,
         `${path}.ts`,
+        `${path}.tsx`,
         `${path}.d.ts`,
         join(path, "index.wrn"),
         join(path, "index.ts"),
+        join(path, "index.tsx"),
       ];
 }
 
@@ -56,7 +60,12 @@ export function resolveWrnImport(
       return false;
     }
   });
-  if (found) return { declaration, resolved: realpathSync(found) };
+  if (found) {
+    const resolved = realpathSync(found);
+    return resolved.endsWith(".tsx")
+      ? { declaration, resolved, kind: "island" as const }
+      : { declaration, resolved };
+  }
   const severity = (options.mode ?? "compatible") === "explicit" ? "error" : "warning";
   return {
     declaration,

packages/compiler/src/index.ts

@@ -126,3 +126,15 @@ export function compile(source: string, filePath = "<inline .wrn>"): CompileResu
 }
 export { compilationKey, createCompilationCache, DependencyGraph } from "./cache.ts";
 export type { CompilationCache, CompilationCacheEntry, CompilationCacheOptions } from "./cache.ts";
+
+export {
+  islandNamesFrom,
+  islandPropValue,
+  parseIslandStrategy,
+  renderIslandMarker,
+  serializeIslandProps,
+} from "./island-codegen.ts";
+export type { IslandDiagnostic, IslandStrategy } from "./island-codegen.ts";
+export { assertReactAvailable, buildIslands, generateIslandEntry } from "./island-bundle.ts";
+export type { IslandBuildResult, IslandInput } from "./island-bundle.ts";
+export { routeNeedsIslands } from "./analysis.ts";

packages/compiler/src/island-bundle.ts

@@ -0,0 +1,165 @@
+import type { BunPlugin } from "bun";
+import { createHash } from "node:crypto";
+import { mkdirSync, rmSync, writeFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { basename, join } from "node:path";
+
+export interface IslandInput {
+  name: string;
+  sourcePath: string;
+}
+
+export interface IslandBuildResult {
+  assets: Array<{ name: string; hash: string; path: string }>;
+  sharedChunks: string[];
+}
+
+/**
+ * Generates the per-island browser entry.
+ *
+ * Never imports react-dom/server — islands are client-only.
+ */
+export function generateIslandEntry(input: IslandInput): string {
+  return [
+    "/** @jsxImportSource react */",
+    `import Component from ${JSON.stringify(input.sourcePath)};`,
+    `export const name = ${JSON.stringify(input.name)};`,
+    `export default Component;`,
+    "",
+  ].join("\n");
+}
+
+/**
+ * Compiles every island `.tsx` against React's JSX runtime.
+ *
+ * The repo's root tsconfig sets `jsxImportSource` to `@wrnexus/core`, so an
+ * island would otherwise compile to WRNexus's HTML-string renderer and
+ * silently never mount. A `@jsxImportSource` pragma applies only to the file
+ * that carries it, so putting one in the generated entry does nothing for the
+ * author's own component — the injection has to happen per source file, which
+ * is what this plugin does. App-authored islands stay plain `.tsx`.
+ */
+export function reactJsxPlugin(): BunPlugin {
+  return {
+    name: "wrnexus-island-jsx",
+    setup(build) {
+      build.onLoad({ filter: /\.tsx$/ }, async (args) => {
+        // Only first-party island sources need the pragma. Third-party .tsx
+        // under node_modules is left alone so Bun's own handling is untouched.
+        if (args.path.includes("node_modules")) return undefined;
+        return {
+          contents: `/** @jsxImportSource react */\n${await Bun.file(args.path).text()}`,
+          loader: "tsx" as const,
+        };
+      });
+    },
+  };
+}
+
+export function assertReactAvailable(
+  appRoot: string,
+): { code: "WRN-ISLAND-REACT-MISSING"; message: string; severity: "error" } | null {
+  const require = createRequire(join(appRoot, "package.json"));
+  try {
+    require.resolve("react");
+    require.resolve("react-dom");
+    return null;
+  } catch {
+    return {
+      code: "WRN-ISLAND-REACT-MISSING",
+      severity: "error",
+      message:
+        "This app imports a .tsx island but react and react-dom are not installed. " +
+        "Run: bun add react react-dom",
+    };
+  }
+}
+
+/**
+ * Bundles island entries. `splitting: true` is required so React is emitted
+ * once as a shared chunk rather than duplicated into every island.
+ */
+export async function buildIslands(input: {
+  islands: IslandInput[];
+  outDir: string;
+  /**
+   * App root used to resolve the island mount runtime. When given, the runtime
+   * is emitted as `runtime.js` in the SAME build as the islands.
+   *
+   * This is not a convenience: building the runtime separately gives it its own
+   * copy of React, and a component rendered by one copy while importing hooks
+   * from another fails with "Cannot read properties of null (reading
+   * 'useState')". One build with splitting keeps React in a single shared chunk.
+   */
+  appRoot?: string;
+}): Promise<IslandBuildResult> {
+  if (input.islands.length === 0) return { assets: [], sharedChunks: [] };
+
+  // Each island gets its own generated entry file named after the island.
+  // Passing the component sources directly would dedupe two islands that share
+  // a source file, and output order is not guaranteed to match input order —
+  // both of which silently mismatch island names to bundles.
+  //
+  // The entries live inside outDir so `react` resolves from the app that
+  // installed it, exactly as the island's own imports do.
+  const entryDir = join(input.outDir, ".entries");
+  mkdirSync(entryDir, { recursive: true });
+
+  const islandNames = new Set(input.islands.map((island) => island.name));
+  for (const island of input.islands) {
+    writeFileSync(join(entryDir, `${island.name}.tsx`), generateIslandEntry(island), "utf8");
+  }
+
+  const entrypoints = input.islands.map((island) => join(entryDir, `${island.name}.tsx`));
+  if (input.appRoot) {
+    const resolveFrom = createRequire(join(input.appRoot, "package.json"));
+    const runtimeEntry = join(entryDir, "runtime.ts");
+    writeFileSync(
+      runtimeEntry,
+      `export * from ${JSON.stringify(resolveFrom.resolve("@wrnexus/react/browser"))};
+`,
+      "utf8",
+    );
+    entrypoints.push(runtimeEntry);
+  }
+
+  try {
+    const result = await Bun.build({
+      entrypoints,
+      outdir: input.outDir,
+      target: "browser",
+      format: "esm",
+      splitting: true,
+      minify: true,
+      plugins: [reactJsxPlugin()],
+    });
+
+    if (!result.success) {
+      throw new AggregateError(result.logs, "Island bundling failed");
+    }
+
+    const assets: IslandBuildResult["assets"] = [];
+    const sharedChunks: string[] = [];
+
+    for (const output of result.outputs) {
+      if (output.kind === "entry-point") {
+        // Bun names an entry's output after its entry file, so the basename
+        // identifies the island unambiguously.
+        const stem = basename(output.path).replace(/\.js$/, "");
+        if (stem === "runtime") continue;
+        if (!islandNames.has(stem)) continue;
+        assets.push({
+          name: stem,
+          hash: createHash("sha256").update(output.path).digest("hex").slice(0, 16),
+          path: output.path,
+        });
+      } else if (output.kind === "chunk") {
+        sharedChunks.push(output.path);
+      }
+    }
+
+    return { assets, sharedChunks };
+  } finally {
+    rmSync(entryDir, { recursive: true, force: true });
+  }
+}

packages/compiler/src/island-codegen.ts

@@ -0,0 +1,141 @@
+// Implemented locally rather than imported from @wrnexus/core: compiler modules
+// are bundled into the Node-only VS Code extension, which contains no other
+// packages, so a runtime import of core would break the editor compiler.
+const HTML_ESCAPES: Record<string, string> = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;",
+};
+
+function escapeHtml(value: string): string {
+  return value.replace(/[&<>"']/g, (character) => HTML_ESCAPES[character]!);
+}
+
+const SAFE_ISLAND_NAME = /^[A-Za-z0-9_-]+$/;
+
+function isSafeIslandName(name: string): boolean {
+  return SAFE_ISLAND_NAME.test(name);
+}
+
+export type IslandStrategy = "only" | "load" | "visible" | "idle";
+
+export interface IslandDiagnostic {
+  code: "WRN-ISLAND-PROPS";
+  message: string;
+  severity: "error";
+}
+
+const STRATEGIES: Record<string, IslandStrategy> = {
+  "client:only": "only",
+  "client:load": "load",
+  "client:visible": "visible",
+  "client:idle": "idle",
+};
+
+export function parseIslandStrategy(directives: string[]): IslandStrategy {
+  for (const directive of directives) {
+    const match = STRATEGIES[directive];
+    if (match) return match;
+  }
+  return "only";
+}
+
+function unsupportedProp(value: unknown): boolean {
+  const type = typeof value;
+  if (type === "function" || type === "symbol" || type === "bigint" || type === "undefined") {
+    return true;
+  }
+  if (value === null || type !== "object") return false;
+  if (Array.isArray(value)) return (value as unknown[]).some(unsupportedProp);
+  const proto = Object.getPrototypeOf(value);
+  if (proto !== Object.prototype && proto !== null) return true;
+  return Object.values(value as Record<string, unknown>).some(unsupportedProp);
+}
+
+/**
+ * Interprets an island attribute value with JSX semantics.
+ *
+ * `title="Revenue"` is a string, `start={3}` is a number, `flag` alone is
+ * `true`. Without this every prop arrives as a string, so `start={3}` would be
+ * `"3"` and arithmetic in the island silently concatenates.
+ *
+ * Returns `dynamic` for a `{…}` value that is not JSON: such expressions are
+ * evaluated at runtime and cannot cross the serialization boundary.
+ */
+export function islandPropValue(raw: string | undefined): { value: unknown } | { dynamic: string } {
+  if (raw === undefined || raw === "") return { value: true };
+  const expression = /^\{([\s\S]*)\}$/.exec(raw);
+  if (!expression) return { value: raw };
+  const inner = expression[1]!.trim();
+  try {
+    return { value: JSON.parse(inner) as unknown };
+  } catch {
+    return { dynamic: inner };
+  }
+}
+
+export function serializeIslandProps(
+  componentName: string,
+  props: Record<string, unknown>,
+): { json: string } | { diagnostic: IslandDiagnostic } {
+  const offenders = Object.entries(props)
+    .filter(([, value]) => unsupportedProp(value))
+    .map(([key]) => key);
+
+  if (offenders.length > 0) {
+    return {
+      diagnostic: {
+        code: "WRN-ISLAND-PROPS",
+        severity: "error",
+        message:
+          `Island '${componentName}' received non-serializable prop(s): ${offenders.join(", ")}. ` +
+          `Island props cross a serialization boundary and must be JSON-safe ` +
+          `(no functions, symbols, bigints, undefined, or class instances).`,
+      },
+    };
+  }
+
+  return { json: JSON.stringify(props) };
+}
+
+export function renderIslandMarker(input: {
+  name: string;
+  strategy: IslandStrategy;
+  propsJson: string;
+}): string {
+  // The name becomes a path segment when the browser fetches
+  // /__wrnexus/island/<name>.js, so reuse the framework's conservative charset
+  // rather than relying on escaping alone.
+  if (!isSafeIslandName(input.name)) {
+    throw new Error(
+      `Island name '${input.name}' is not a safe identifier. ` +
+        `Island names may only contain letters, digits, underscores, and hyphens.`,
+    );
+  }
+
+  return (
+    `<div data-wrn-island="${escapeHtml(input.name)}"` +
+    ` data-wrn-island-strategy="${input.strategy}"` +
+    ` data-wrn-island-props="${escapeHtml(input.propsJson)}"></div>`
+  );
+}
+
+/**
+ * Local binding names introduced by island imports.
+ *
+ * Codegen sees only component tag names, so it needs the set of names that came
+ * from `.tsx` imports to tell an island apart from a `.wrn` component.
+ */
+export function islandNamesFrom(
+  imports: Array<{ kind?: "island"; declaration: { defaultImport?: string } }>,
+): Set<string> {
+  const names = new Set<string>();
+  for (const entry of imports) {
+    if (entry.kind !== "island") continue;
+    const local = entry.declaration.defaultImport;
+    if (local) names.add(local);
+  }
+  return names;
+}

packages/compiler/test/island-bundle.test.ts

@@ -0,0 +1,61 @@
+import { afterAll, expect, test } from "bun:test";
+import { mkdtempSync, readFileSync, readdirSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+
+import { assertReactAvailable, buildIslands, generateIslandEntry } from "../src/island-bundle.ts";
+
+const created: string[] = [];
+afterAll(() => {
+  for (const dir of created) rmSync(dir, { recursive: true, force: true });
+});
+
+test("generates an entry that re-exports the island component", () => {
+  const entry = generateIslandEntry({ name: "Chart", sourcePath: "/app/Chart.tsx" });
+  expect(entry).toContain("/app/Chart.tsx");
+  expect(entry).toContain("Chart");
+  expect(entry).not.toContain("react-dom/server");
+});
+
+test("island .tsx compiles against React's JSX runtime, not WRNexus's", async () => {
+  // The root tsconfig points jsxImportSource at @wrnexus/core, so an island
+  // would otherwise compile to WRNexus's HTML-string renderer and never mount.
+  // A pragma applies only to the file carrying it, so this asserts the built
+  // output rather than the generated entry text.
+  // The fixture must live inside the repo: Bun resolves `react` from the
+  // importing file's location, exactly as a real island resolves it from the
+  // app that installed react.
+  const root = mkdtempSync(join(process.cwd(), ".island-jsx-test-"));
+  created.push(root);
+  const source = join(root, "Chart.tsx");
+  writeFileSync(
+    source,
+    `export default function Chart({ title }: { title: string }) {
+       return <div className="chart">{title}</div>;
+     }`,
+  );
+
+  const outDir = join(root, "out");
+  await buildIslands({ islands: [{ name: "Chart", sourcePath: source }], outDir });
+
+  const built = readdirSync(outDir)
+    .filter((file) => file.endsWith(".js"))
+    .map((file) => readFileSync(join(outDir, file), "utf8"))
+    .join("\n");
+
+  expect(built).not.toContain("wrnexus");
+  expect(built).toMatch(/react\/jsx|jsxDEV|jsx_runtime/);
+});
+
+test("reports WRN-ISLAND-REACT-MISSING when react is not installed", () => {
+  const root = mkdtempSync(join(tmpdir(), "wrnexus-noreact-"));
+  writeFileSync(join(root, "package.json"), JSON.stringify({ name: "app" }));
+
+  const diagnostic = assertReactAvailable(root);
+  expect(diagnostic?.code).toBe("WRN-ISLAND-REACT-MISSING");
+  expect(diagnostic?.message).toContain("bun add react react-dom");
+});
+
+test("returns null when react resolves", () => {
+  expect(assertReactAvailable(process.cwd())).toBeNull();
+});

packages/compiler/test/island-classification.test.ts

@@ -0,0 +1,56 @@
+import { expect, test } from "bun:test";
+import { parse } from "@wrnexus/syntax";
+import { analyzeRuntimeRequirements, routeNeedsIslands } from "../src/analysis.ts";
+
+test("a route with an island import needs client JavaScript", () => {
+  expect(
+    routeNeedsIslands([
+      { declaration: { source: "./a" } as any, resolved: "/app/a.ts" },
+      { declaration: { source: "./Chart" } as any, resolved: "/app/Chart.tsx", kind: "island" },
+    ]),
+  ).toBe(true);
+});
+
+test("a route with no island imports stays zero-JS", () => {
+  expect(
+    routeNeedsIslands([{ declaration: { source: "./a" } as any, resolved: "/app/a.ts" }]),
+  ).toBe(false);
+});
+
+test("an empty import list stays zero-JS", () => {
+  expect(routeNeedsIslands([])).toBe(false);
+});
+
+test("an unresolved import does not count as an island", () => {
+  expect(
+    routeNeedsIslands([
+      {
+        declaration: { source: "./missing" } as any,
+        diagnostic: { code: "WRN-IMPORT-NOT-FOUND", message: "nope", severity: "warning" },
+      },
+    ]),
+  ).toBe(false);
+});
+
+test("an island promotes a static route to static-interactive", () => {
+  const source = `page Home { view { <div>hello</div> } }`;
+  const ast = parse(source);
+
+  const plain = analyzeRuntimeRequirements(ast);
+  expect(plain.kind).toBe("static");
+  expect(plain.needsIslandRuntime).toBe(false);
+
+  const withIsland = analyzeRuntimeRequirements(ast, { hasIslands: true });
+  expect(withIsland.kind).toBe("static-interactive");
+  expect(withIsland.needsIslandRuntime).toBe(true);
+  expect(withIsland.reasons).toContain("react island");
+});
+
+test("an island does not turn on the WRNexus reactive runtime", () => {
+  const ast = parse(`page Home { view { <div>hello</div> } }`);
+  const withIsland = analyzeRuntimeRequirements(ast, { hasIslands: true });
+
+  // Islands ship the island runtime, not WRNexus's own client runtime.
+  expect(withIsland.needsClientRuntime).toBe(false);
+  expect(withIsland.needsIslandRuntime).toBe(true);
+});

packages/compiler/test/island-codegen.test.ts

@@ -0,0 +1,100 @@
+import { expect, test } from "bun:test";
+import {
+  islandNamesFrom,
+  islandPropValue,
+  parseIslandStrategy,
+  renderIslandMarker,
+  serializeIslandProps,
+} from "../src/island-codegen.ts";
+
+test("defaults to the client-only strategy", () => {
+  expect(parseIslandStrategy([])).toBe("only");
+  expect(parseIslandStrategy(["client:visible"])).toBe("visible");
+  expect(parseIslandStrategy(["client:idle"])).toBe("idle");
+  expect(parseIslandStrategy(["client:load"])).toBe("load");
+});
+
+test("serializes JSON-safe props", () => {
+  const result = serializeIslandProps("Chart", { title: "Revenue", points: [1, 2] });
+  expect(result).toEqual({ json: '{"title":"Revenue","points":[1,2]}' });
+});
+
+test("rejects non-serializable props with WRN-ISLAND-PROPS", () => {
+  const result = serializeIslandProps("Chart", { onClick: () => {} });
+  expect(result).toHaveProperty("diagnostic");
+  const { diagnostic } = result as { diagnostic: { code: string; message: string } };
+  expect(diagnostic.code).toBe("WRN-ISLAND-PROPS");
+  expect(diagnostic.message).toContain("Chart");
+  expect(diagnostic.message).toContain("onClick");
+});
+
+test("rejects class instances and nested offenders", () => {
+  class Point {
+    constructor(public x = 1) {}
+  }
+  expect(serializeIslandProps("Chart", { origin: new Point() })).toHaveProperty("diagnostic");
+  expect(serializeIslandProps("Chart", { nested: { deep: () => {} } })).toHaveProperty(
+    "diagnostic",
+  );
+  expect(serializeIslandProps("Chart", { list: [1, () => {}] })).toHaveProperty("diagnostic");
+});
+
+test("accepts null and nested plain data", () => {
+  const result = serializeIslandProps("Chart", {
+    empty: null,
+    nested: { rows: [{ id: 1 }], flag: false },
+  });
+  expect(result).toHaveProperty("json");
+});
+
+test("rejects island names that are unsafe as URL path segments", () => {
+  // The name is fetched as /__wrnexus/island/<name>.js, so traversal and
+  // separators must be refused rather than merely escaped.
+  expect(() =>
+    renderIslandMarker({ name: "../secret", strategy: "only", propsJson: "{}" }),
+  ).toThrow(/not a safe identifier/);
+  expect(() => renderIslandMarker({ name: "a/b", strategy: "only", propsJson: "{}" })).toThrow(
+    /not a safe identifier/,
+  );
+  expect(() =>
+    renderIslandMarker({ name: "Chart", strategy: "only", propsJson: "{}" }),
+  ).not.toThrow();
+});
+
+test("renders a marker with escaped props", () => {
+  const html = renderIslandMarker({
+    name: "Chart",
+    strategy: "visible",
+    propsJson: '{"title":"a<b\\"c"}',
+  });
+  expect(html).toContain('data-wrn-island="Chart"');
+  expect(html).toContain('data-wrn-island-strategy="visible"');
+  expect(html).not.toContain('title":"a<b"c');
+  expect(html).toContain("&lt;");
+  expect(html).toContain("&quot;");
+});
+
+test("collects local binding names from island imports only", () => {
+  const names = islandNamesFrom([
+    { kind: "island", declaration: { defaultImport: "Chart" } },
+    { declaration: { defaultImport: "Card" } },
+    { kind: "island", declaration: {} },
+  ]);
+  expect([...names]).toEqual(["Chart"]);
+});
+
+test("island prop values follow JSX semantics, not raw attribute strings", () => {
+  // Without this, start={3} arrives as the string "3" and arithmetic inside the
+  // island concatenates: 3 -> "31" -> "311".
+  expect(islandPropValue("{3}")).toEqual({ value: 3 });
+  expect(islandPropValue("{true}")).toEqual({ value: true });
+  expect(islandPropValue("{[1,2]}")).toEqual({ value: [1, 2] });
+  expect(islandPropValue('{"a"}')).toEqual({ value: "a" });
+  expect(islandPropValue("Revenue")).toEqual({ value: "Revenue" });
+  expect(islandPropValue(undefined)).toEqual({ value: true });
+});
+
+test("a runtime expression prop is reported as dynamic", () => {
+  expect(islandPropValue("{someVariable}")).toEqual({ dynamic: "someVariable" });
+  expect(islandPropValue("{fn()}")).toEqual({ dynamic: "fn()" });
+});

packages/compiler/test/island-emit.test.ts

@@ -0,0 +1,62 @@
+import { expect, test } from "bun:test";
+import { parse } from "@wrnexus/syntax";
+import { generate } from "../src/codegen.ts";
+
+const SOURCE = `page Home {
+  view {
+    <Chart title="Revenue" client:visible />
+    <Card>plain</Card>
+  }
+}`;
+
+test("an island tag emits an island marker instead of a component mount", () => {
+  const out = generate(parse(SOURCE), { islands: new Set(["Chart"]) });
+
+  expect(out).toContain("data-wrn-island=");
+  expect(out).toContain("Chart");
+  expect(out).toContain('data-wrn-island-strategy="visible"');
+  // Non-island components still mount the normal way.
+  expect(out).toContain('data-component="Card"');
+});
+
+test("without the island set the same tag stays a normal component", () => {
+  const out = generate(parse(SOURCE));
+
+  expect(out).not.toContain("data-wrn-island=");
+  expect(out).toContain('data-component="Chart"');
+});
+
+test("island props are serialized into the marker", () => {
+  const out = generate(parse(SOURCE), { islands: new Set(["Chart"]) });
+  expect(out).toContain("Revenue");
+});
+
+test("numeric and boolean island props keep their types through the marker", () => {
+  const source = `page Home {
+  view { <Chart start={3} live={true} title="Revenue" /> }
+}`;
+  const out = generate(parse(source), { islands: new Set(["Chart"]) });
+
+  expect(out).toContain("&quot;start&quot;:3");
+  expect(out).toContain("&quot;live&quot;:true");
+  expect(out).toContain("&quot;title&quot;:&quot;Revenue&quot;");
+});
+
+test("a runtime expression prop fails the build with WRN-ISLAND-PROPS", () => {
+  const source = `page Home {
+  state count = 1
+  view { <Chart value={count} /> }
+}`;
+  expect(() => generate(parse(source), { islands: new Set(["Chart"]) })).toThrow(
+    /WRN-ISLAND-PROPS/,
+  );
+});
+
+test("an island inside a .wrn component also emits a marker", () => {
+  const source = `component Panel {
+  view { <Chart start={1} /> }
+}`;
+  const out = generate(parse(source), { islands: new Set(["Chart"]) });
+  expect(out).toContain("data-wrn-island=");
+  expect(out).not.toContain('data-component="Chart"');
+});

packages/compiler/test/island-integration.test.ts

@@ -0,0 +1,83 @@
+import { afterAll, beforeAll, expect, test } from "bun:test";
+import { mkdtempSync, readFileSync, readdirSync, rmSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { routeNeedsIslands } from "../src/analysis.ts";
+import { buildIslands, type IslandBuildResult } from "../src/island-bundle.ts";
+
+const COUNTER = resolve(import.meta.dir, "../../../examples/basic-app/app/islands/Counter.tsx");
+
+const created: string[] = [];
+afterAll(() => {
+  for (const dir of created) rmSync(dir, { recursive: true, force: true });
+});
+
+function outDir(label: string): string {
+  const dir = mkdtempSync(join(process.cwd(), `.island-int-${label}-`));
+  created.push(dir);
+  return dir;
+}
+
+// Every assertion that needs a real bundle shares this one build.
+//
+// Not just for speed: `bun test` interferes with Bun.build's module reads once
+// several build calls have run across test files in the same process, while the
+// same calls succeed repeatedly outside the runner. Production is unaffected —
+// the dev server's rebuild loop was verified separately — but tests must keep
+// their build count low to stay reliable in the full suite.
+let dir: string;
+let result: IslandBuildResult;
+let bundles: string[];
+
+beforeAll(async () => {
+  dir = outDir("shared");
+  result = await buildIslands({
+    islands: [
+      { name: "CounterA", sourcePath: COUNTER },
+      { name: "CounterB", sourcePath: COUNTER },
+    ],
+    outDir: dir,
+  });
+  bundles = readdirSync(dir)
+    .filter((file) => file.endsWith(".js"))
+    .map((file) => readFileSync(join(dir, file), "utf8"));
+});
+
+test("a route with no islands ships zero framework JavaScript", async () => {
+  const empty = outDir("nojs");
+  const none = await buildIslands({ islands: [], outDir: empty });
+
+  expect(none.assets).toHaveLength(0);
+  expect(none.sharedChunks).toHaveLength(0);
+  expect(readdirSync(empty)).toHaveLength(0);
+  expect(routeNeedsIslands([])).toBe(false);
+});
+
+test("a page with multiple islands ships React exactly once", () => {
+  // React's internals must appear in at most one emitted file — the shared
+  // chunk. If splitting regresses, every island inlines its own copy.
+  const withReactInternals = bundles.filter(
+    (source) => source.includes("REACT_ELEMENT_TYPE") || source.includes("react.development"),
+  );
+
+  expect(result.assets).toHaveLength(2);
+  expect(withReactInternals.length).toBeLessThanOrEqual(1);
+});
+
+test("two islands sharing one source get distinct, correctly named assets", () => {
+  // Passing component sources as entrypoints deduped them, so the second island
+  // silently lost its bundle and names could bind to the wrong output.
+  expect(result.assets.map((asset) => asset.name).sort()).toEqual(["CounterA", "CounterB"]);
+  expect(new Set(result.assets.map((asset) => asset.path)).size).toBe(2);
+});
+
+test("a real island builds against React and never pulls in the WRNexus renderer", () => {
+  const built = bundles.join("\n");
+
+  expect(built).not.toContain("wrnexus");
+  expect(built).not.toContain("react-dom/server");
+  expect(built).toContain("useState");
+});
+
+test("the generated entry directory is not left behind in the output", () => {
+  expect(readdirSync(dir)).not.toContain(".entries");
+});

packages/compiler/test/island-resolution.test.ts

@@ -0,0 +1,64 @@
+import { expect, test } from "bun:test";
+import { mkdirSync, mkdtempSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { resolveWrnImport } from "../src/import-resolver.ts";
+
+function appWith(files: Record<string, string>) {
+  const root = mkdtempSync(join(tmpdir(), "wrnexus-island-"));
+  mkdirSync(join(root, "app"), { recursive: true });
+  for (const [name, contents] of Object.entries(files)) {
+    writeFileSync(join(root, "app", name), contents);
+  }
+  return root;
+}
+
+test("resolves a .tsx import and tags it as an island", () => {
+  const root = appWith({ "Chart.tsx": "export default function Chart() { return null; }" });
+  const result = resolveWrnImport(
+    { source: "./Chart", specifiers: [] } as any,
+    join(root, "app", "page.wrn"),
+    { appRoot: root },
+  );
+
+  expect(result.resolved).toContain("Chart.tsx");
+  expect(result.kind).toBe("island");
+});
+
+test("does not tag a .ts import as an island", () => {
+  const root = appWith({ "helper.ts": "export const value = 1;" });
+  const result = resolveWrnImport(
+    { source: "./helper", specifiers: [] } as any,
+    join(root, "app", "page.wrn"),
+    { appRoot: root },
+  );
+
+  expect(result.resolved).toContain("helper.ts");
+  expect(result.kind).toBeUndefined();
+});
+
+test("prefers .wrn over .tsx when both exist", () => {
+  const root = appWith({
+    "Widget.wrn": "<template></template>",
+    "Widget.tsx": "export default function Widget() { return null; }",
+  });
+  const result = resolveWrnImport(
+    { source: "./Widget", specifiers: [] } as any,
+    join(root, "app", "page.wrn"),
+    { appRoot: root },
+  );
+
+  expect(result.resolved).toContain("Widget.wrn");
+  expect(result.kind).toBeUndefined();
+});
+
+test("resolves an explicit .tsx extension as an island", () => {
+  const root = appWith({ "Chart.tsx": "export default function Chart() { return null; }" });
+  const result = resolveWrnImport(
+    { source: "./Chart.tsx", specifiers: [] } as any,
+    join(root, "app", "page.wrn"),
+    { appRoot: root },
+  );
+
+  expect(result.kind).toBe("island");
+});

packages/content/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/content",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "type": "module",
   "description": "Typed Markdown content collections, loaders, indexes, feeds, and preview workflows for WRNexusJS.",
   "main": "./src/index.ts",
@@ -14,6 +14,6 @@
   ],
   "devDependencies": {
     "@types/bun": "^1.3.14",
-    "typescript": "^5.9.2"
+    "typescript": "^6.0.3"
   }
 }

packages/csr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/csr",
-  "version": "0.8.19",
+  "version": "0.8.22",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/csr/src/nav-runtime.ts

@@ -367,6 +367,43 @@ export const NAV_RUNTIME = String.raw`
       });
   }
 
+  function syncI18n(nextDocument) {
+    var script = nextDocument.querySelector('script[type="application/json"][data-wrn-i18n]');
+    if (!script) return;
+    try {
+      var incoming = JSON.parse(String(script.textContent || "{}"));
+      var current = window.__wrnI18n || {};
+      var translator = current.t;
+      var setter = current.set;
+      function mergeCatalog(base, update) {
+        var output = {};
+        Object.keys(base && typeof base === "object" ? base : {}).forEach(function (key) {
+          var value = base[key];
+          output[key] = value && typeof value === "object" && !Array.isArray(value)
+            ? mergeCatalog(value, {})
+            : value;
+        });
+        Object.keys(update && typeof update === "object" ? update : {}).forEach(function (key) {
+          var left = output[key];
+          var right = update[key];
+          output[key] = left && right && typeof left === "object" && typeof right === "object" && !Array.isArray(left) && !Array.isArray(right)
+            ? mergeCatalog(left, right)
+            : right;
+        });
+        return output;
+      }
+      if (current.lang && current.lang === incoming.lang) {
+        incoming.messages = mergeCatalog(current.messages, incoming.messages);
+        incoming.fallbackMessages = mergeCatalog(current.fallbackMessages, incoming.fallbackMessages);
+      }
+      window.__wrnI18n = incoming;
+      if (translator) window.__wrnI18n.t = translator;
+      if (setter) window.__wrnI18n.set = setter;
+    } catch (error) {
+      console.error("[wrnexus] failed to synchronize i18n data", error);
+    }
+  }
+
   /**
    * Run explicit component cleanup before removing the existing page.
    *
@@ -516,6 +553,8 @@ export const NAV_RUNTIME = String.raw`
 
     syncPreservationPolicy(doc);
 
+    syncI18n(doc);
+
     syncWrnStyles(doc);
 
     var importedNodes = [];
@@ -568,6 +607,10 @@ export const NAV_RUNTIME = String.raw`
      */
     rehydrate(currentApp);
 
+    if (window.__wrnLang && typeof window.__wrnLang.bind === "function") {
+      window.__wrnLang.bind(currentApp);
+    }
+
     if (!isPop) {
       history.pushState(
         {

packages/csr/test/nav.test.ts

@@ -139,6 +139,58 @@ test("rebinds theme controls after swapping the page", async () => {
   expect(win.document.querySelector("[data-wrn-theme-toggle]")).not.toBeNull();
 });
 
+test("synchronizes and rebinds i18n data during client navigation", async () => {
+  install(`<div id="app"><a href="/about" id="lnk">About</a></div>`);
+  let boundRoot: unknown;
+  const translate = () => "translated";
+  const setLanguage = () => true;
+  win.__wrnI18n = { lang: "en", messages: { old: "Old" }, t: translate, set: setLanguage };
+  win.__wrnLang = { bind: (root: unknown) => (boundRoot = root) };
+  nextHtml =
+    `<html lang="mr"><body><div id="app"><p data-t="home.title">नवीन</p></div>` +
+    `<script type="application/json" data-wrn-i18n>{"lang":"mr","messages":{"home":{"title":"नवीन"}},"fallbackMessages":{}}</script>` +
+    `</body></html>`;
+
+  win.document.getElementById("lnk").click();
+  await flush();
+
+  expect(win.__wrnI18n.lang).toBe("mr");
+  expect(win.__wrnI18n.messages.home.title).toBe("नवीन");
+  expect(win.__wrnI18n.t).toBe(translate);
+  expect(win.__wrnI18n.set).toBe(setLanguage);
+  expect(boundRoot).toBe(win.document.getElementById("app"));
+});
+
+test("preserves same-language translations when an incoming navigation catalog is partial", async () => {
+  install(`<div id="app"><a href="/about" id="lnk">About</a></div>`);
+  win.__wrnI18n = {
+    lang: "en",
+    messages: { navigation: { home: "Home" }, footer: { contact: "Contact" } },
+    fallbackMessages: {},
+  };
+  win.__wrnLang = {
+    bind: (root: ParentNode) => {
+      root.querySelectorAll("[data-t]").forEach((node) => {
+        const parts = String(node.getAttribute("data-t") || "").split(".");
+        let value: any = win.__wrnI18n.messages;
+        for (const part of parts) value = value?.[part];
+        node.textContent = typeof value === "string" ? value : node.getAttribute("data-t");
+      });
+    },
+  };
+  nextHtml =
+    `<html lang="en"><body><div id="app"><p data-t="navigation.home">navigation.home</p></div>` +
+    `<script type="application/json" data-wrn-i18n>{"lang":"en","messages":{},"fallbackMessages":{}}</script>` +
+    `</body></html>`;
+
+  win.document.getElementById("lnk").click();
+  await flush();
+
+  expect(win.__wrnI18n.messages.navigation.home).toBe("Home");
+  expect(win.__wrnI18n.messages.footer.contact).toBe("Contact");
+  expect(win.document.querySelector("[data-t]")?.textContent).toBe("Home");
+});
+
 test("unmounts and remounts package runtimes during client navigation", async () => {
   install(
     `<div id="app"><div data-wrnexus-runtime="captcha">Old</div><a href="/next" id="lnk">Next</a></div>`,

packages/db/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/db",
-  "version": "0.8.12",
+  "version": "0.8.16",
   "private": true,
   "type": "module",
   "main": "./src/index.ts",
@@ -26,6 +26,6 @@
   },
   "devDependencies": {
     "@types/bun": "^1.3.14",
-    "typescript": "^5.9.2"
+    "typescript": "^6.0.3"
   }
 }

packages/db/src/client.ts

@@ -14,7 +14,18 @@ import type { Db } from "./driver.ts";
 const DEFAULT = "default";
 type DbFactory = () => Db;
 type RegistryEntry = { db?: Db; factory?: DbFactory };
-const registry = new Map<string, RegistryEntry>();
+const REGISTRY_KEY = Symbol.for("@wrnexus/db:registry:v1");
+type RegistryGlobal = typeof globalThis & { [REGISTRY_KEY]?: Map<string, RegistryEntry> };
+
+// Production bundlers can include @wrnexus/db more than once when an app and
+// the server runtime resolve compatible but distinct package installations.
+// A module-local Map splits configuration from consumers in that case. Store
+// the registry on globalThis under a stable symbol so every bundled copy in
+// the process observes the same default and named connections.
+function databaseRegistry(): Map<string, RegistryEntry> {
+  const scope = globalThis as RegistryGlobal;
+  return (scope[REGISTRY_KEY] ??= new Map<string, RegistryEntry>());
+}
 
 /** Set the default database (called by the runtime at startup). */
 export function setDb(db: Db): Db;
@@ -23,7 +34,7 @@ export function setDb(name: string, db: Db): Db;
 export function setDb(a: string | Db, b?: Db): Db {
   const name = typeof a === "string" ? a : DEFAULT;
   const db = typeof a === "string" ? b! : a;
-  registry.set(name, { db });
+  databaseRegistry().set(name, { db });
   return db;
 }
 
@@ -37,12 +48,12 @@ export function registerDb(name: string, db: Db): Db {
  * `getDb(name)` call creates and caches the connection.
  */
 export function registerLazyDb(name: string, factory: DbFactory): void {
-  registry.set(name, { factory });
+  databaseRegistry().set(name, { factory });
 }
 
 /** The default database, or a named one. Throws if it isn't configured. */
 export function getDb(name = DEFAULT): Db {
-  const entry = registry.get(name);
+  const entry = databaseRegistry().get(name);
   if (!entry) {
     throw new Error(
       name === DEFAULT
@@ -60,16 +71,17 @@ export function getDb(name = DEFAULT): Db {
 
 /** Whether the default (or a named) database has been configured. */
 export function hasDb(name = DEFAULT): boolean {
-  return registry.has(name);
+  return databaseRegistry().has(name);
 }
 
 /** Names of all configured databases (the default appears as "default"). */
 export function databaseNames(): string[] {
-  return [...registry.keys()];
+  return [...databaseRegistry().keys()];
 }
 
 /** Close every configured database and clear the registry. */
 export async function closeDatabases(): Promise<void> {
+  const registry = databaseRegistry();
   const databases = [...registry.values()].flatMap((entry) => (entry.db ? [entry.db] : []));
   registry.clear();
   const results = await Promise.allSettled(databases.map((db) => db.close()));

packages/db/src/generate.ts

@@ -226,11 +226,16 @@ export function generateQueriesFile(
     );
   }
 
-  const imports = [
-    `import type { Db${usesExecResult ? ", ExecResult" : ""} } from "@wrnexus/db";`,
-  ];
+  const imports = [`import type { Db${usesExecResult ? ", ExecResult" : ""} } from "@wrnexus/db";`];
   if (usedModels.size > 0) {
     imports.push(`import { ${[...usedModels].sort().join(", ")} } from "./schema.ts";`);
   }
-  return `// AUTO-GENERATED by \`wrnexus db generate\` — do not edit.\n${imports.join("\n")}\n\n${blocks.join("\n\n")}\n`;
+  // The dialect is stamped into the header because it changes the emitted SQL:
+  // postgres uses $1 placeholders where sqlite and mysql use ?. Regenerating
+  // under a different profile therefore rewrites this committed file, and
+  // without the stamp the diff looks like unexplained churn.
+  return (
+    `// AUTO-GENERATED by \`wrnexus db generate\` (dialect: ${dialect}) — do not edit.\n` +
+    `${imports.join("\n")}\n\n${blocks.join("\n\n")}\n`
+  );
 }

packages/db/src/migrate.ts

@@ -86,6 +86,41 @@ function hasExecutableSql(sql: string): boolean {
   return false;
 }
 
+function additiveColumnTarget(sql: string): { table: string; column: string } | undefined {
+  const executable = sql
+    .replace(/\/\*[\s\S]*?\*\//g, " ")
+    .replace(/--[^\r\n]*/g, " ")
+    .trim();
+  const match =
+    /^ALTER\s+TABLE\s+([A-Za-z_][A-Za-z0-9_]*)\s+ADD\s+COLUMN\s+([A-Za-z_][A-Za-z0-9_]*)\b[\s\S]*;?\s*$/i.exec(
+      executable,
+    );
+  return match ? { table: match[1]!, column: match[2]! } : undefined;
+}
+
+async function additiveColumnAlreadyExists(db: Db, sql: string): Promise<boolean> {
+  const target = additiveColumnTarget(sql);
+  if (!target) return false;
+  if (db.driver.dialect === "sqlite") {
+    const columns = await db.all<{ name: string }>(`PRAGMA table_info(${target.table})`);
+    return columns.some(({ name }) => name.toLowerCase() === target.column.toLowerCase());
+  }
+  if (db.driver.dialect === "postgres") {
+    return Boolean(
+      await db.one(
+        "SELECT 1 AS present FROM information_schema.columns WHERE table_schema = current_schema() AND table_name = ? AND column_name = ?",
+        [target.table, target.column],
+      ),
+    );
+  }
+  return Boolean(
+    await db.one(
+      "SELECT 1 AS present FROM information_schema.columns WHERE table_schema = DATABASE() AND table_name = ? AND column_name = ?",
+      [target.table, target.column],
+    ),
+  );
+}
+
 /** Load and parse all migration files in a directory, sorted by filename. */
 export function loadMigrations(dir: string): Migration[] {
   if (!existsSync(dir)) return [];
@@ -171,7 +206,12 @@ export async function applyMigrations(
     for (const migration of pending.filter(({ name }) => !current.has(name))) {
       throwIfAborted(options.signal);
       await db.tx(async (tx) => {
-        if (hasExecutableSql(migration.up)) await tx.exec(migration.up);
+        if (
+          hasExecutableSql(migration.up) &&
+          !(await additiveColumnAlreadyExists(tx, migration.up))
+        ) {
+          await tx.exec(migration.up);
+        }
         await tx.exec(`INSERT INTO ${MIGRATIONS_TABLE} (name) VALUES (?)`, [migration.name]);
       });
       done.push(migration.name);

packages/db/test/db.test.ts

@@ -161,6 +161,24 @@ test("comment-only migrations are recorded without executing empty SQL", async (
   await db.close();
 });
 
+test("add-column migrations recover when the column exists but the migration record does not", async () => {
+  const db = createDb(sqlite());
+  await db.exec("CREATE TABLE otp_challenges (id TEXT PRIMARY KEY, purpose TEXT NOT NULL)");
+  const migrations = [
+    {
+      name: "0002_otp_purpose",
+      up: "ALTER TABLE otp_challenges ADD COLUMN purpose TEXT NOT NULL DEFAULT 'verification';",
+      down: "ALTER TABLE otp_challenges DROP COLUMN purpose;",
+    },
+  ];
+
+  expect(await applyMigrations(db, migrations)).toEqual(["0002_otp_purpose"]);
+  expect(await appliedMigrations(db)).toContain("0002_otp_purpose");
+  const columns = await db.all<{ name: string }>("PRAGMA table_info(otp_challenges)");
+  expect(columns.filter(({ name }) => name === "purpose")).toHaveLength(1);
+  await db.close();
+});
+
 test("migration dry-run plans changes without applying schema and honors cancellation", async () => {
   const db = createDb(sqlite());
   const migrations = [

packages/db/test/generate-dialect.test.ts

@@ -0,0 +1,23 @@
+import { expect, test } from "bun:test";
+import { generateQueriesFile, parseQueries } from "../src/generate.ts";
+
+const queries = parseQueries(`-- name: GetUser :one\nSELECT * FROM users WHERE email = :email;\n`);
+
+test("the generated header records the dialect it was built for", () => {
+  // The same command emits different SQL per dialect, so a build under another
+  // profile rewrites the committed file. The stamp makes that visible in the
+  // diff instead of looking like unexplained churn.
+  expect(generateQueriesFile(queries, [], "sqlite")).toContain("(dialect: sqlite)");
+  expect(generateQueriesFile(queries, [], "postgres")).toContain("(dialect: postgres)");
+});
+
+test("placeholder style follows the dialect", () => {
+  expect(generateQueriesFile(queries, [], "sqlite")).toContain("email = ?");
+  expect(generateQueriesFile(queries, [], "postgres")).toContain("email = $1");
+});
+
+test("generation is deterministic for a fixed dialect", () => {
+  const first = generateQueriesFile(queries, [], "postgres");
+  const second = generateQueriesFile(queries, [], "postgres");
+  expect(first).toBe(second);
+});

packages/db/test/registry.test.ts

@@ -92,3 +92,16 @@ test("registry closes every database and clears itself when one close fails", as
   expect(secondClosed).toBe(true);
   expect(databaseNames()).toEqual([]);
 });
+
+test("separately evaluated package copies share the process-wide registry", async () => {
+  await closeDatabases();
+  const secondCopy = await import(`../src/client.ts?copy=${crypto.randomUUID()}`);
+  const main = createDb(sqlite(":memory:"));
+
+  setDb(main);
+  expect(secondCopy.hasDb()).toBe(true);
+  expect(secondCopy.getDb()).toBe(main);
+
+  await secondCopy.closeDatabases();
+  expect(hasDb()).toBe(false);
+});

packages/dev-server/README.md

@@ -66,6 +66,14 @@ interface RunningServer {
 
 In development, `startServer` also connects `app/db/migrations` (and `app/db/<name>/migrations`) and auto-applies migrations, then starts an in-process file watcher. CSS edits hot-swap live. Page, component, layout, API, middleware, realtime, schema, locale, and public-asset edits invalidate only their cached modules, rescan routes where necessary, and morph fresh HTML through the existing HMR WebSocket. The server process and active gateway stay running.
 
+### Custom not-found handlers
+
+Add `app/pages/404.wrn` to customize unmatched frontend routes. The rendered
+page keeps the requested response's HTTP `404` status. Add `app/api/404.ts`
+with normal HTTP method exports to customize unmatched backend/API responses;
+its response body and headers are preserved and its status is normalized to
+`404`.
+
 `getWrnCompileMetrics()` exposes cumulative content-addressed compiler cache
 `hits`, `misses`, successful `compilations`, `errors`, `totalDurationMs`, and
 `lastDurationMs` for the DevToolbar or custom diagnostics. Tests and embedded

packages/dev-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/dev-server",
-  "version": "0.8.29",
+  "version": "0.8.38",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/dev-server/src/assets.ts

@@ -25,6 +25,7 @@ import {
   type ResolvedTheme,
   type StylesConfig,
 } from "@wrnexus/styles";
+import { getIslandRuntime } from "@wrnexus/react/runtime";
 import { VALIDATE_RUNTIME } from "@wrnexus/validation";
 import { I18N_RUNTIME } from "@wrnexus/i18n";
 import { UPLOAD_RUNTIME, UPLOAD_JS_HREF, UPLOADS_PREFIX, serveStoredFile } from "@wrnexus/uploader";
@@ -32,7 +33,8 @@ import type { Mode } from "@wrnexus/core";
 import type { AssetServer } from "./runtime.ts";
 import { servePublicAsset } from "./public.ts";
 import { servePluginAsset, type ServedPluginAsset } from "./plugin-assets.ts";
-import { serveWrnBrowserArtifact } from "./pipeline.ts";
+import { serveIslandArtifact, serveWrnBrowserArtifact } from "./pipeline.ts";
+import { HMR_CLIENT_HREF, HMR_CLIENT_JS } from "./runtime.ts";
 
 /** Style inputs the dev asset server needs to build `/__wrnexus/styles.css`. */
 export interface DevStyles {
@@ -95,6 +97,11 @@ export function createDevAssetServer(
       if (pathname.startsWith("/__wrnexus/client/")) {
         return serveWrnBrowserArtifact(pathname) ?? new Response("Not Found", { status: 404 });
       }
+      if (pathname.startsWith("/__wrnexus/island/")) {
+        return serveIslandArtifact(pathname) ?? new Response("Not Found", { status: 404 });
+      }
+      if (pathname === HMR_CLIENT_HREF) return jsResponse(HMR_CLIENT_JS);
+      if (pathname === "/__wrnexus/islands.js") return jsResponse(getIslandRuntime(true));
       if (pathname === "/__wrnexus/reactive.js") return jsResponse(getReactiveRuntime(true));
       if (pathname === "/__wrnexus/controllers.js")
         return jsResponse(getComponentControllerRuntime(true));

packages/dev-server/src/gateway.ts

@@ -113,6 +113,7 @@ interface Target extends GatewayApp {
 interface WsBridge {
   origin: string;
   path: string;
+  headers: Record<string, string>;
   backend?: WebSocket;
   queue: Array<string | ArrayBuffer>;
   maxMessageBytes: number;
@@ -158,7 +159,7 @@ function requestMessageBytes(value: string | ArrayBuffer | ArrayBufferView): num
   return value instanceof ArrayBuffer ? value.byteLength : value.byteLength;
 }
 
-function gatewayWebSocketOriginAllowed(
+export function gatewayWebSocketOriginAllowed(
   req: Request,
   target: Target,
   configured: string[],
@@ -173,7 +174,11 @@ function gatewayWebSocketOriginAllowed(
   }
   if (configured.includes(origin)) return true;
   if (target.publicOrigin && origin === new URL(target.publicOrigin).origin) return true;
-  return target.domains.some((domain) => parsed.host.toLowerCase() === domain.toLowerCase());
+  // Compare hostnames, not hosts: configured domains carry no port, while the
+  // browser's Origin does. publicOrigin above only ever matches domains[0], so
+  // every other domain fell through to here and was denied purely on the port,
+  // which left the HMR socket reconnecting forever on those hosts.
+  return target.domains.some((domain) => parsed.hostname.toLowerCase() === domain.toLowerCase());
 }
 
 /**
@@ -433,6 +438,30 @@ export function gatewayProxyHeaders(
   return headers;
 }
 
+/** Forward application identity to the child while leaving WebSocket framing to Bun. */
+export function gatewayWebSocketBackendHeaders(
+  req: Request,
+  url: URL,
+  ip: string,
+  forwardedHeaders: boolean,
+  backendOrigin: string,
+): Record<string, string> {
+  const headers = stripUntrustedInternalHeaders(
+    gatewayProxyHeaders(req, url, ip, forwardedHeaders),
+  );
+  headers.delete("host");
+  headers.delete("connection");
+  headers.delete("upgrade");
+  headers.delete("accept-encoding");
+  for (const name of [...headers.keys()]) {
+    if (name.startsWith("sec-websocket-")) headers.delete(name);
+  }
+  // The public origin was validated at the gateway edge. The child receives a
+  // new, trusted same-origin connection from its private gateway listener.
+  headers.set("origin", backendOrigin);
+  return Object.fromEntries(headers);
+}
+
 /** Remove headers that only a direct workspace-to-app request may supply. */
 export function stripUntrustedInternalHeaders(headers: Headers): Headers {
   const sanitized = new Headers(headers);
@@ -692,6 +721,13 @@ export async function startGateway(opts: GatewayOptions): Promise<RunningGateway
             data: {
               origin: target.origin,
               path: url.pathname + url.search,
+              headers: gatewayWebSocketBackendHeaders(
+                req,
+                url,
+                ip,
+                forwardedHeaders,
+                target.origin,
+              ),
               queue: [],
               maxMessageBytes: websocketSecurity.maxMessageBytes ?? 64 * 1024,
               maxQueuedMessages: websocketSecurity.maxQueuedMessages ?? 100,
@@ -753,7 +789,11 @@ export async function startGateway(opts: GatewayOptions): Promise<RunningGateway
       websocket: {
         open(ws) {
           const backendUrl = ws.data.origin.replace(/^http/, "ws") + ws.data.path;
-          const backend = new WebSocket(backendUrl);
+          const BackendWebSocket = WebSocket as unknown as new (
+            url: string,
+            options: Bun.WebSocketOptions,
+          ) => WebSocket;
+          const backend = new BackendWebSocket(backendUrl, { headers: ws.data.headers });
           ws.data.backend = backend;
           backend.addEventListener("open", () => {
             for (const m of ws.data.queue) backend.send(m);

packages/dev-server/src/index.ts

@@ -43,6 +43,7 @@ import {
   loadWrnServerModule,
   setCompileCacheDir,
   setCompileImportOptions,
+  rebuildChangedIslands,
   setDevCompilerPipeline,
   wrnBrowserArtifactUrlAsync,
 } from "./pipeline.ts";
@@ -439,10 +440,9 @@ export async function startServer(opts: ServeOptions): Promise<RunningServer> {
       config: opts.stylesConfig,
       appRoot,
       publicDir: join(appRoot, "public"),
-      sources: [
-        ...componentDirs,
-        ...pluginContributions.styles.flatMap((style) => (style.source ? [style.source] : [])),
-      ],
+      // Component discovery is separate from utility-source discovery.
+      // Packages that need Tailwind scanning opt in via styles.source.
+      sources: pluginContributions.styles.flatMap((style) => (style.source ? [style.source] : [])),
       entries: pluginContributions.styles.flatMap((style) => (style.entry ? [style.entry] : [])),
     },
     theme,
@@ -685,6 +685,18 @@ export async function startServer(opts: ServeOptions): Promise<RunningServer> {
 
       console.log(`[wrnexus] hot update — ${files.join(", ")}`);
       await pluginRunner.hook("hmrUpdate", files);
+      // Island .tsx sources are not .wrn files, so nothing below would rebuild
+      // them; page modules are cached, so no compile runs on the next request.
+      const islandFiles = files
+        .map((changed) => (isAbsolute(changed) ? changed : resolve(appDir, changed)))
+        .filter((changed) => changed.endsWith(".tsx"));
+      if (islandFiles.length > 0) {
+        try {
+          await rebuildChangedIslands(islandFiles);
+        } catch (error) {
+          console.warn("[wrnexus] island rebuild failed", error);
+        }
+      }
       const storeUpdates: Array<{ name: string; url: string; kind: string }> = [];
       for (const changed of files) {
         const absolute = isAbsolute(changed) ? changed : resolve(appDir, changed);

packages/dev-server/src/pipeline.ts

@@ -19,6 +19,8 @@ import {
   compile,
   generate,
   generateTargets,
+  buildIslands,
+  islandNamesFrom,
   resolveWrnImports,
   type PageAst,
   type ViewNode,
@@ -57,6 +59,7 @@ export function runMiddleware(
 const moduleCache = new Map<string, Promise<Record<string, unknown>>>();
 const moduleVersions = new Map<string, number>();
 const browserArtifactPaths = new Map<string, string>();
+const islandArtifactPaths = new Map<string, string>();
 
 type ImportMode = "legacy" | "compatible" | "explicit";
 interface CompileImportOptions {
@@ -125,6 +128,102 @@ function importOptionsHash(file: string): string {
   return hashPath(JSON.stringify({ ...options, aliases }));
 }
 
+/** Island bundles already built this dev session, keyed by resolved source. */
+const builtIslands = new Map<string, string>();
+/** Island name -> resolved .tsx source, so the watcher can rebuild on edit. */
+const islandSources = new Map<string, string>();
+let islandAppRoot: string | null = null;
+let islandRuntimeBuilt = false;
+
+/**
+ * Builds island bundles on demand in dev and registers them under
+ * /__wrnexus/island/. Without this the browser bootstrap 404s and no island
+ * ever mounts.
+ */
+async function ensureIslandArtifacts(
+  islands: Array<{ name: string; sourcePath: string }>,
+  appRoot: string,
+): Promise<void> {
+  if (islands.length === 0) return;
+  const outDir = join(appRoot, ".wrnexus", "island");
+  islandAppRoot = appRoot;
+  for (const island of islands) islandSources.set(island.name, island.sourcePath);
+
+  // Keyed by source AND mtime: keying on the path alone serves a stale bundle
+  // forever once an island .tsx is edited.
+  const stamp = (island: { name: string; sourcePath: string }) => {
+    let mtime: number;
+    try {
+      mtime = statSync(island.sourcePath).mtimeMs;
+    } catch {
+      mtime = 0;
+    }
+    return `${island.sourcePath}:${mtime}`;
+  };
+  const pending = islands.filter((island) => builtIslands.get(island.name) !== stamp(island));
+  if (pending.length === 0 && islandRuntimeBuilt) return;
+
+  // The runtime is built alongside the islands so they share one React copy.
+  const result = await buildIslands({
+    islands: pending.length ? pending : islands,
+    outDir,
+    appRoot,
+  });
+  registerIslandArtifact("/__wrnexus/island/runtime.js", join(outDir, "runtime.js"));
+  islandRuntimeBuilt = true;
+  for (const asset of result.assets) {
+    registerIslandArtifact(`/__wrnexus/island/${asset.name}.js`, asset.path);
+    const rebuilt = pending.find((island) => island.name === asset.name);
+    if (rebuilt) builtIslands.set(asset.name, stamp(rebuilt));
+  }
+  for (const chunk of result.sharedChunks) {
+    registerIslandArtifact(`/__wrnexus/island/${basename(chunk)}`, chunk);
+  }
+}
+
+/**
+ * Island imports in this file: names so codegen emits placeholders instead of
+ * component mounts, and sources so the bundles can be built.
+ */
+/**
+ * Rebuilds islands whose .tsx source changed.
+ *
+ * Page modules are cached after the first request, so no compile runs on a
+ * later request and nothing else would notice an island edit.
+ */
+export async function rebuildChangedIslands(changed: string[]): Promise<boolean> {
+  if (!islandAppRoot) return false;
+  const touched = new Set(changed.map((file) => resolve(file)));
+  const affected = [...islandSources]
+    .filter(([, sourcePath]) => touched.has(resolve(sourcePath)))
+    .map(([name, sourcePath]) => ({ name, sourcePath }));
+  if (affected.length === 0) return false;
+  await ensureIslandArtifacts(affected, islandAppRoot);
+  return true;
+}
+
+function islandsForFile(
+  ast: PageAst,
+  importer: string,
+): { names: Set<string>; inputs: Array<{ name: string; sourcePath: string }> } {
+  if (!ast.structuredImports.length) return { names: new Set(), inputs: [] };
+  const root = projectRootForFile(importer);
+  const importOptions = compileImportOptions.get(resolve(root)) ?? {
+    mode: "compatible" as const,
+    aliases: { "@": "./app" },
+    autoImport: true,
+  };
+  const resolved = resolveWrnImports(ast.structuredImports, importer, {
+    appRoot: root,
+    mode: importOptions.mode,
+    aliases: importOptions.aliases,
+  });
+  const inputs = resolved
+    .filter((entry) => entry.kind === "island" && entry.resolved && entry.declaration.defaultImport)
+    .map((entry) => ({ name: entry.declaration.defaultImport!, sourcePath: entry.resolved! }));
+  return { names: islandNamesFrom(resolved), inputs };
+}
+
 function rewriteArtifactImports(
   code: string,
   ast: PageAst,
@@ -395,6 +494,8 @@ export interface WrnCompileArtifacts {
   declarations: string;
   contract: string;
   rpc: string;
+  /** Island inputs for this file, so a cache hit can still build islands. */
+  islands: string;
 }
 
 export interface WrnCompileMetrics {
@@ -485,15 +586,20 @@ export function compileWrnArtifactsAsync(file: string, version = 0): Promise<Wrn
       declarations: join(cacheDir, `${stem}.d.ts`),
       contract: join(cacheDir, `${stem}.contract.json`),
       rpc: join(cacheDir, `${stem}.rpc.json`),
+      islands: join(cacheDir, `${stem}.islands.json`),
     };
     const result = compile(source, file);
     validateConfiguredImports(source, result.ast, file);
     const ast = await devCompilerPipeline!.transformAst(result.ast, file);
+    const { names: islands, inputs: islandInputs } = islandsForFile(ast, file);
+    mkdirSync(cacheDir, { recursive: true });
+    writeFileSync(artifacts.islands, JSON.stringify(islandInputs), "utf8");
+    await ensureIslandArtifacts(islandInputs, projectRootForFile(file));
     const targets = generateTargets(ast);
     mkdirSync(cacheDir, { recursive: true });
     const browserPath = `/__wrnexus/client/${stem}.mjs`;
     const outputs = {
-      main: `// compiled from .wrn\n${generate(ast)}`.replaceAll(
+      main: `// compiled from .wrn\n${generate(ast, { islands })}`.replaceAll(
         "__WRNEXUS_CLIENT_MODULE__",
         browserPath,
       ),
@@ -554,13 +660,36 @@ export function compileWrnArtifacts(file: string, version = 0): WrnCompileArtifa
     declarations: join(cacheDir, `${stem}.d.ts`),
     contract: join(cacheDir, `${stem}.contract.json`),
     rpc: join(cacheDir, `${stem}.rpc.json`),
+    islands: join(cacheDir, `${stem}.islands.json`),
   };
   compileInProgress.set(file, artifacts);
   try {
     try {
-      if (Object.values(artifacts).every((path) => statSync(path).isFile())) {
+      // The islands manifest is written only by the async compile path, so it
+      // is not part of the completeness check — a missing manifest means "no
+      // islands known for this file", not a stale cache.
+      const requiredArtifacts = Object.entries(artifacts)
+        .filter(([key]) => key !== "islands")
+        .map(([, path]) => path);
+      if (requiredArtifacts.every((path) => statSync(path).isFile())) {
         compileMetrics.hits++;
         browserArtifactPaths.set(`/__wrnexus/client/${stem}.mjs`, artifacts.browser);
+        // A cached .wrn still needs its island bundles: the .tsx may have changed
+        // since, and after a restart with a warm cache nothing else would build them.
+        let cachedIslands: Array<{ name: string; sourcePath: string }> = [];
+        try {
+          cachedIslands = JSON.parse(readFileSync(artifacts.islands, "utf8")) as Array<{
+            name: string;
+            sourcePath: string;
+          }>;
+        } catch {
+          cachedIslands = [];
+        }
+        // This variant is synchronous, so the rebuild is kicked off rather than
+        // awaited. The async compile path awaits it before serving a page.
+        void ensureIslandArtifacts(cachedIslands, projectRootForFile(file)).catch((error) => {
+          console.warn("[wrnexus] island rebuild failed", error);
+        });
         return artifacts;
       }
     } catch {
@@ -644,6 +773,25 @@ export function serveWrnBrowserArtifact(pathname: string): Response | null {
   });
 }
 
+/** Registers a built island asset for serving under `/__wrnexus/island/`. */
+export function registerIslandArtifact(pathname: string, artifact: string): void {
+  islandArtifactPaths.set(pathname, artifact);
+}
+
+/** Serves a built island bundle, chunk, or the island mount runtime. */
+export function serveIslandArtifact(pathname: string): Response | null {
+  const artifact = islandArtifactPaths.get(pathname);
+  if (!artifact || !existsSync(artifact)) return null;
+  return new Response(readFileSync(artifact, "utf8"), {
+    headers: {
+      "content-type": "text/javascript; charset=utf-8",
+      "cache-control": "no-store, max-age=0",
+      pragma: "no-cache",
+      expires: "0",
+    },
+  });
+}
+
 /** Forget one module and force its next dynamic import to bypass Bun's import cache. */
 export function invalidateModule(file: string): void {
   file = resolve(file);

packages/dev-server/src/prod.ts

@@ -25,6 +25,7 @@ import {
   getNavRuntime,
   getRealtimeRuntime,
 } from "@wrnexus/csr";
+import { getIslandRuntime } from "@wrnexus/react/runtime";
 import {
   loadEnv,
   resolveProfile,
@@ -99,6 +100,7 @@ export interface ProdOptions {
   controllersPath?: string;
   /** Absolute directory containing bundled per-WRN browser modules. */
   clientModulesDir?: string;
+  islandsDir?: string;
   /** Absolute path to the pre-built theme stylesheet (`theme.css`). */
   themePath?: string;
   /** Pre-built active theme/accent stylesheets, loaded on demand. */
@@ -341,6 +343,15 @@ function createProdAssetServer(opts: ProdOptions): AssetServer {
         }
         return serveFile(join(opts.clientModulesDir, name), JS_HEADERS);
       }
+      if (pathname.startsWith("/__wrnexus/island/")) {
+        const name = pathname.slice("/__wrnexus/island/".length);
+        if (!opts.islandsDir || !/^[A-Za-z0-9._-]+\.js$/.test(name)) {
+          return new Response("Not Found", { status: 404 });
+        }
+        return serveFile(join(opts.islandsDir, name), JS_HEADERS);
+      }
+      if (pathname === "/__wrnexus/islands.js")
+        return new Response(getIslandRuntime(), { headers: JS_HEADERS });
       if (pathname === "/__wrnexus/reactive.js") {
         if (opts.reactivePath) {
           const file = Bun.file(opts.reactivePath);

packages/dev-server/src/runtime.ts

@@ -81,7 +81,7 @@ import {
   type TenancyConfig,
 } from "@wrnexus/styles";
 import {
-  renderI18nData,
+  renderI18nDataTag,
   makeT,
   resolveLang,
   translateHtml,
@@ -672,6 +672,19 @@ export const HMR_CLIENT_JS = `
     pendingSync = false;
     var doc = new DOMParser().parseFromString(html, "text/html");
 
+    var i18nScript = doc.querySelector('script[type="application/json"][data-wrn-i18n]');
+    if (i18nScript) {
+      try {
+        var incomingI18n = JSON.parse(String(i18nScript.textContent || "{}"));
+        var existingI18n = window.__wrnI18n || {};
+        incomingI18n.t = existingI18n.t;
+        incomingI18n.set = existingI18n.set;
+        window.__wrnI18n = incomingI18n;
+      } catch (error) {
+        console.error("[wrnexus] failed to synchronize i18n HMR data", error);
+      }
+    }
+
     if (doc.title) {
       document.title = doc.title;
     }
@@ -704,6 +717,10 @@ export const HMR_CLIENT_JS = `
       window.__wrnexusHydrateCsrFetches(document);
     }
 
+    if (window.__wrnLang && typeof window.__wrnLang.bind === "function") {
+      window.__wrnLang.bind(document);
+    }
+
     if (
       window.wrnTheme &&
       typeof window.wrnTheme.bind === "function"
@@ -782,6 +799,30 @@ export const HMR_CLIENT_JS = `
   // Preserve a hydrated subtree only while its server hydration signature and
   // behavior are unchanged. Component edits must replace and re-hydrate the
   // old subtree or HMR will keep stale markup indefinitely.
+  // HMR fetches fresh HTML whose inline scripts carry a NEW server nonce, but a
+  // document's CSP nonce is fixed at load and cannot be updated. Any node moved
+  // across therefore has to be re-stamped with the live document's nonce or the
+  // browser blocks it.
+  function adoptNonce(node) {
+    var nonce = currentDocumentNonce();
+    if (!nonce || !node || node.nodeType !== 1) return node;
+    var stamp = function (element) {
+      if (element.getAttribute("src")) return;
+      element.setAttribute("nonce", nonce);
+      try {
+        element.nonce = nonce;
+      } catch (error) {
+        // Read-only in some engines; the attribute above is what CSP checks.
+      }
+    };
+    if (node.nodeName === "SCRIPT" || node.nodeName === "STYLE") stamp(node);
+    if (node.querySelectorAll) {
+      var nested = node.querySelectorAll("script,style");
+      for (var i = 0; i < nested.length; i++) stamp(nested[i]);
+    }
+    return node;
+  }
+
   function morph(from, to) {
     if (from.__wrnexusHydrated) {
       var sameHydration =
@@ -790,16 +831,16 @@ export const HMR_CLIENT_JS = `
         from.getAttribute("data-scope") === to.getAttribute("data-scope");
       if (sameHydration) return;
       if (window.__wrnexusDisposeBehaviors) window.__wrnexusDisposeBehaviors(from);
-      from.replaceWith(to.cloneNode(true));
+      from.replaceWith(adoptNonce(to.cloneNode(true)));
       return;
     }
     syncAttrs(from, to);
     var fc = from.childNodes, tc = to.childNodes, i;
     for (i = 0; i < tc.length; i++) {
       var t = tc[i], f = fc[i];
-      if (!f) { from.appendChild(t.cloneNode(true)); continue; }
+      if (!f) { from.appendChild(adoptNonce(t.cloneNode(true))); continue; }
       if (f.nodeType !== t.nodeType || (f.nodeType === 1 && f.nodeName !== t.nodeName)) {
-        from.replaceChild(t.cloneNode(true), f); continue;
+        from.replaceChild(adoptNonce(t.cloneNode(true)), f); continue;
       }
       if (f.nodeType === 3 || f.nodeType === 8) { if (f.nodeValue !== t.nodeValue) f.nodeValue = t.nodeValue; continue; }
       if (f.nodeType === 1) morph(f, t);
@@ -808,8 +849,10 @@ export const HMR_CLIENT_JS = `
   }
   function syncAttrs(from, to) {
     var ta = to.attributes, fa = from.attributes, i;
-    for (i = 0; i < ta.length; i++) if (from.getAttribute(ta[i].name) !== ta[i].value) from.setAttribute(ta[i].name, ta[i].value);
-    for (i = fa.length - 1; i >= 0; i--) if (!to.hasAttribute(fa[i].name)) from.removeAttribute(fa[i].name);
+    // Never copy the incoming nonce: it belongs to the fetched document and
+    // would replace the live nonce this document's CSP actually allows.
+    for (i = 0; i < ta.length; i++) if (ta[i].name !== "nonce" && from.getAttribute(ta[i].name) !== ta[i].value) from.setAttribute(ta[i].name, ta[i].value);
+    for (i = fa.length - 1; i >= 0; i--) if (fa[i].name !== "nonce" && !to.hasAttribute(fa[i].name)) from.removeAttribute(fa[i].name);
   }
 
   // Exposed for tests; harmless (the client is injected only in dev).
@@ -829,8 +872,19 @@ function randomNonce(): string {
 }
 
 /** The dev HMR client as a nonce-tagged inline script (strict-CSP friendly). */
-function hmrClientTag(nonce: string): string {
-  return `<script nonce="${nonce}">${HMR_CLIENT_JS}</script>`;
+/** Path the dev asset server publishes the HMR client on. */
+export const HMR_CLIENT_HREF = "/__wrnexus/hmr-client.js";
+
+/**
+ * The HMR client is served as an external module rather than inlined.
+ *
+ * A document's CSP nonce is fixed at load, so an inline script arriving from a
+ * later response — which is exactly what an HMR reload produces — can never
+ * carry a nonce this document accepts. An external file is covered by
+ * script-src 'self' and needs no nonce at all.
+ */
+function hmrClientTag(_nonce: string): string {
+  return `<script src="${HMR_CLIENT_HREF}"></script>`;
 }
 
 /** 403 for a rejected cross-site WebSocket handshake. */
@@ -1449,7 +1503,23 @@ export function createHandlers(deps: RuntimeDeps): Handlers {
 
   async function handleApi(ctx: Context): Promise<Response> {
     const matched = router.matchApi(ctx.url.pathname);
-    if (!matched) return Response.json({ error: "Not Found" }, { status: 404 });
+    if (!matched) {
+      const fallback = router.matchApi("/api/404");
+      if (fallback && ctx.url.pathname !== "/api/404") {
+        const originalPath = ctx.url.pathname;
+        ctx.url.pathname = "/api/404";
+        try {
+          const response = await handleApi(ctx);
+          return new Response(response.body, {
+            status: 404,
+            headers: response.headers,
+          });
+        } finally {
+          ctx.url.pathname = originalPath;
+        }
+      }
+      return Response.json({ error: "Not Found" }, { status: 404 });
+    }
 
     // Expose the canonical matched route to package dispatchers. A package may
     // contribute several URL paths from one module, and request URLs can be
@@ -1606,7 +1676,23 @@ export function createHandlers(deps: RuntimeDeps): Handlers {
           }),
         );
       }
-      const response = renderNotFound();
+      let response: Response;
+      const fallback = router.matchPage("/404");
+      if (fallback && ctx.url.pathname !== "/404") {
+        const originalPath = ctx.url.pathname;
+        ctx.url.pathname = "/404";
+        try {
+          const rendered = await handlePage(ctx);
+          response = new Response(rendered.body, {
+            status: 404,
+            headers: rendered.headers,
+          });
+        } finally {
+          ctx.url.pathname = originalPath;
+        }
+      } else {
+        response = renderNotFound();
+      }
       if (!isMobileRequest) return response;
       const headers = new Headers(response.headers);
       headers.set("x-wrnexus-original-status", "404");
@@ -1886,9 +1972,7 @@ export function createHandlers(deps: RuntimeDeps): Handlers {
       extraBody:
         [
           renderStoreHydration(storeContainer, (ctx.locals.cspNonce as string) ?? undefined),
-          deps.i18n
-            ? `<script${ctx.locals.cspNonce ? ` nonce="${String(ctx.locals.cspNonce)}"` : ""}>${renderI18nData(deps.i18n, language)}</script>`
-            : "",
+          deps.i18n ? renderI18nDataTag(deps.i18n, language) : "",
           hmr ? hmrClientTag((ctx.locals.cspNonce as string) ?? "") : "",
           shouldEnableDevToolbar(mode, deps) ? DEV_TOOLBAR_SCRIPT : "",
         ]

packages/dev-server/src/script-selection.ts

@@ -19,6 +19,9 @@ export function collectScripts(
   ) {
     scripts.push("/__wrnexus/reactive.js");
   }
+  // Islands ship their own bootstrap, not the reactive runtime — a page whose
+  // only interactivity is an island must not pull in WRNexus's client runtime.
+  if (/\bdata-wrn-island=/.test(body)) scripts.push("/__wrnexus/islands.js");
   if (/\bdata-wrn-action=/.test(body)) scripts.push("/__wrnexus/actions.js");
   if (
     /\bdata-wrn-theme-(toggle|set)\b/.test(body) ||

packages/dev-server/test/gateway-ws-origin.test.ts

@@ -0,0 +1,55 @@
+import { expect, test } from "bun:test";
+import { gatewayWebSocketOriginAllowed } from "../src/gateway.ts";
+
+const target = {
+  name: "web",
+  origin: "http://127.0.0.1:3101",
+  domains: ["localhost", "web.localhost"],
+  publicOrigin: "http://localhost:3000",
+} as any;
+
+function upgrade(origin: string, host: string): Request {
+  return new Request("http://" + host + "/__wrnexus/hmr", {
+    headers: { origin, host, upgrade: "websocket" },
+  });
+}
+
+test("allows an upgrade from the app's primary domain", () => {
+  expect(
+    gatewayWebSocketOriginAllowed(upgrade("http://localhost:3000", "localhost:3000"), target, []),
+  ).toBe(true);
+});
+
+test("allows an upgrade from a secondary domain on a non-default port", () => {
+  // publicOrigin is built from domains[0], so a browser on web.localhost falls
+  // through to the domain list — where the origin host still carries :3000 and
+  // the configured domain does not. That mismatch denied every HMR socket on
+  // any domain but the first, leaving the client reconnecting forever.
+  expect(
+    gatewayWebSocketOriginAllowed(
+      upgrade("http://web.localhost:3000", "web.localhost:3000"),
+      target,
+      [],
+    ),
+  ).toBe(true);
+});
+
+test("still denies an unrelated origin", () => {
+  expect(
+    gatewayWebSocketOriginAllowed(
+      upgrade("http://evil.example:3000", "web.localhost:3000"),
+      target,
+      [],
+    ),
+  ).toBe(false);
+});
+
+test("still denies a lookalike suffix domain", () => {
+  expect(
+    gatewayWebSocketOriginAllowed(
+      upgrade("http://notweb.localhost:3000", "web.localhost:3000"),
+      target,
+      [],
+    ),
+  ).toBe(false);
+});

packages/dev-server/test/gateway.test.ts

@@ -5,6 +5,7 @@ import {
   forwardAuthFailure,
   forwardAuthHeaders,
   gatewayProxyHeaders,
+  gatewayWebSocketBackendHeaders,
   stripUntrustedInternalHeaders,
   gatewayRestartDelay,
   internalError,
@@ -37,6 +38,35 @@ test("gateway disables compression for its internal proxy hop", () => {
   expect(headers.get("x-forwarded-for")).toBe("127.0.0.1");
 });
 
+test("gateway WebSocket bridge forwards validated application identity", () => {
+  const request = new Request("http://web.localhost:3000/__wrnexus/hmr", {
+    headers: {
+      host: "web.localhost:3000",
+      origin: "http://web.localhost:3000",
+      cookie: "session=abc",
+      connection: "Upgrade",
+      upgrade: "websocket",
+      "sec-websocket-key": "test-key",
+    },
+  });
+  const headers = gatewayWebSocketBackendHeaders(
+    request,
+    new URL(request.url),
+    "127.0.0.1",
+    true,
+    "http://127.0.0.1:3001",
+  );
+
+  expect(headers.origin).toBe("http://127.0.0.1:3001");
+  expect(headers.cookie).toBe("session=abc");
+  expect(headers["x-forwarded-host"]).toBe("web.localhost:3000");
+  expect(headers["x-forwarded-proto"]).toBe("http");
+  expect(headers.host).toBeUndefined();
+  expect(headers.connection).toBeUndefined();
+  expect(headers.upgrade).toBeUndefined();
+  expect(headers["sec-websocket-key"]).toBeUndefined();
+});
+
 test("gateway proxy headers do not preserve the RPC internal marker", () => {
   const request = new Request("http://localhost:3000/path", {
     headers: { "x-wrnexus-internal": "1" },

packages/dev-server/test/hmr-client-syntax.test.ts

@@ -0,0 +1,18 @@
+import { expect, test } from "bun:test";
+import { HMR_CLIENT_JS } from "../src/runtime.ts";
+
+test("the HMR client script is syntactically valid JavaScript", () => {
+  // HMR_CLIENT_JS is a TypeScript template literal, so an escape like \t or \n
+  // written unescaped is expanded by TypeScript into a real control character.
+  // Inside a regex literal that produces a raw newline, which is a syntax error
+  // that silently kills the whole HMR client in the browser.
+  expect(() => new Function(HMR_CLIENT_JS)).not.toThrow();
+});
+
+test("the HMR client contains no raw control characters inside regex literals", () => {
+  const regexLiterals = HMR_CLIENT_JS.match(/\/(?![/*])(?:\.|\[[^\]]*\]|[^/\n\r])+\//g) ?? [];
+  expect(regexLiterals.length).toBeGreaterThan(0);
+  for (const literal of regexLiterals) {
+    expect(literal).not.toMatch(/[\n\r\t]/);
+  }
+});

packages/dev-server/test/hmr.test.ts

@@ -14,5 +14,6 @@ test("HMR replaces hydrated components when their server signature changes", ()
   expect(HMR_CLIENT_JS).toContain('from.getAttribute("data-wrn-behavior")');
   expect(HMR_CLIENT_JS).toContain('from.getAttribute("data-scope")');
   expect(HMR_CLIENT_JS).toContain("window.__wrnexusDisposeBehaviors(from)");
-  expect(HMR_CLIENT_JS).toContain("from.replaceWith(to.cloneNode(true))");
+  // Cloned nodes are re-stamped with the live document nonce before insertion.
+  expect(HMR_CLIENT_JS).toContain("from.replaceWith(adoptNonce(to.cloneNode(true)))");
 });

packages/dev-server/test/island-e2e.test.ts

@@ -0,0 +1,73 @@
+import { afterAll, expect, test } from "bun:test";
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { compile, generate, islandNamesFrom, resolveWrnImports } from "@wrnexus/compiler";
+import { collectScripts } from "../src/script-selection.ts";
+
+const created: string[] = [];
+afterAll(() => {
+  for (const dir of created) rmSync(dir, { recursive: true, force: true });
+});
+
+function app() {
+  const root = mkdtempSync(join(process.cwd(), ".island-e2e-"));
+  created.push(root);
+  mkdirSync(join(root, "app"), { recursive: true });
+  writeFileSync(
+    join(root, "app", "Chart.tsx"),
+    `export default function Chart({ title }: { title: string }) { return <div>{title}</div>; }`,
+  );
+  writeFileSync(join(root, "app", "Card.wrn"), `component Card { view { <div>card</div> } }`);
+  return root;
+}
+
+test("a .wrn importing a .tsx emits an island marker and requests the bootstrap", () => {
+  const root = app();
+  const page = join(root, "app", "page.wrn");
+  const source = [
+    'import Chart from "./Chart"',
+    'import Card from "./Card"',
+    "page Home {",
+    "  view {",
+    '    <Chart title="Revenue" client:visible />',
+    "    <Card />",
+    "  }",
+    "}",
+  ].join("\n");
+  writeFileSync(page, source);
+
+  const ast = compile(source, page).ast;
+  const islands = islandNamesFrom(
+    resolveWrnImports(ast.structuredImports, page, { appRoot: root }),
+  );
+
+  // Only the .tsx import is an island; the .wrn component is not.
+  expect([...islands]).toEqual(["Chart"]);
+
+  const out = generate(ast, { islands });
+  expect(out).toContain('data-wrn-island="Chart"');
+  expect(out).toContain('data-wrn-island-strategy="visible"');
+  expect(out).toContain('data-component="Card"');
+
+  // Rendered island markup must pull in the island bootstrap.
+  expect(collectScripts('<div data-wrn-island="Chart"></div>')).toContain("/__wrnexus/islands.js");
+});
+
+test("a page with no .tsx imports emits no island markup and no island script", () => {
+  const root = app();
+  const page = join(root, "app", "plain.wrn");
+  const source = ['import Card from "./Card"', "page Plain {", "  view { <Card /> }", "}"].join(
+    "\n",
+  );
+  writeFileSync(page, source);
+
+  const ast = compile(source, page).ast;
+  const islands = islandNamesFrom(
+    resolveWrnImports(ast.structuredImports, page, { appRoot: root }),
+  );
+  expect(islands.size).toBe(0);
+
+  const out = generate(ast, { islands });
+  expect(out).not.toContain("data-wrn-island");
+  expect(collectScripts(out)).not.toContain("/__wrnexus/islands.js");
+});

packages/dev-server/test/island-scripts.test.ts

@@ -0,0 +1,16 @@
+import { expect, test } from "bun:test";
+import { collectScripts } from "../src/script-selection.ts";
+
+test("island markup pulls in the island bootstrap", () => {
+  const scripts = collectScripts(`<div data-wrn-island="Chart"></div>`);
+  expect(scripts).toContain("/__wrnexus/islands.js");
+});
+
+test("markup without islands ships no island bootstrap", () => {
+  expect(collectScripts(`<p>plain server html</p>`)).toEqual([]);
+});
+
+test("islands alone do not pull in the reactive runtime", () => {
+  const scripts = collectScripts(`<div data-wrn-island="Chart"></div>`);
+  expect(scripts).not.toContain("/__wrnexus/reactive.js");
+});

packages/dev-server/test/not-found-runtime.test.ts

@@ -0,0 +1,54 @@
+import { afterEach, expect, test } from "bun:test";
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { buildRouter } from "@wrnexus/router";
+import { createHandlers, type RuntimeDeps } from "../src/runtime.ts";
+
+const roots: string[] = [];
+afterEach(() => roots.splice(0).forEach((root) => rmSync(root, { recursive: true, force: true })));
+
+function customNotFoundRuntime() {
+  const root = mkdtempSync(join(tmpdir(), "wrnexus-not-found-"));
+  roots.push(root);
+  const app = join(root, "app");
+  mkdirSync(join(app, "pages"), { recursive: true });
+  mkdirSync(join(app, "api"), { recursive: true });
+  writeFileSync(join(app, "pages/404.ts"), "export default () => '';");
+  writeFileSync(join(app, "api/404.ts"), "export const GET = () => null;");
+  return createHandlers({
+    mode: "production",
+    hmr: false,
+    router: buildRouter(app),
+    loadModule: async (file) =>
+      file.includes(`${join("api", "404")}.ts`)
+        ? {
+            GET: () =>
+              Response.json({ code: "CUSTOM_NOT_FOUND" }, { headers: { "x-custom": "yes" } }),
+          }
+        : { default: () => "<main><h1>That page is gone</h1></main>" },
+    getMiddleware: async () => [],
+    assets: { serve: async () => null },
+  } satisfies RuntimeDeps);
+}
+
+const server = { upgrade: () => false };
+
+test("renders app/pages/404 with an HTTP 404 status", async () => {
+  const response = await customNotFoundRuntime().fetch(
+    new Request("https://example.test/missing"),
+    server,
+  );
+  expect(response?.status).toBe(404);
+  expect(await response?.text()).toContain("That page is gone");
+});
+
+test("uses app/api/404 for unmatched API routes and preserves headers", async () => {
+  const response = await customNotFoundRuntime().fetch(
+    new Request("https://example.test/api/missing"),
+    server,
+  );
+  expect(response?.status).toBe(404);
+  expect(response?.headers.get("x-custom")).toBe("yes");
+  expect(await response?.json()).toEqual({ code: "CUSTOM_NOT_FOUND" });
+});

packages/dev-toolbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/dev-toolbar",
-  "version": "0.8.9",
+  "version": "0.8.13",
   "private": true,
   "type": "module",
   "sideEffects": false,
@@ -20,6 +20,6 @@
   },
   "devDependencies": {
     "@types/bun": "^1.3.14",
-    "typescript": "^5.9.2"
+    "typescript": "^6.0.3"
   }
 }

packages/dev-toolbar/src/client/runtime.ts

@@ -43,8 +43,8 @@ export const DEV_TOOLBAR_RUNTIME = String.raw`(() => {
     try{for(let i=0;i<localStorage.length;i++){const key=localStorage.key(i)||"";if(/(?:token|secret|password|session|credential|authorization)/i.test(key))found.push(issue("security/sensitive-local-storage","security","error","Sensitive value may be stored in localStorage","Storage key “"+key+"” looks authentication- or secret-related.",null,"Keep sessions and credentials in Secure, HttpOnly cookies."));}}catch{}
     if(document.documentElement.scrollWidth>innerWidth+2)found.push(issue("responsive/document-overflow","responsive","error","Page has horizontal overflow","Document width exceeds the viewport.",null,"Inspect fixed widths, long text and overflowing media."));
     q("body *").filter(visible).slice(0,2500).forEach(el=>{const r=el.getBoundingClientRect();if((r.right>innerWidth+8||r.left<-8)&&found.filter(x=>x.ruleId==="responsive/element-overflow").length<20)found.push(issue("responsive/element-overflow","responsive","warning","Element extends outside the viewport","Element bounds exceed the current viewport.",el,"Use fluid sizing, wrapping, max-width or an intentional scroll container."));});
-    const resources=performance.getEntriesByType("resource");const total=resources.reduce((s,e)=>s+(e.transferSize||0),0);const jsBytes=resources.filter(e=>/(?:\.m?js)(?:\?|$)/i.test(e.name)).reduce((sum,e)=>sum+(e.transferSize||0),0);if(resources.length>150)found.push(issue("performance/resource-count","performance","warning","Page loads many resources","Found "+resources.length+" resource requests.",null,"Remove duplicates and defer non-critical resources."));if(total>5000000)found.push(issue("performance/transfer-size","performance",total>10000000?"error":"warning","Page transfer size is large","Observed transfer size is about "+(total/1000000).toFixed(2)+" MB.",null,"Compress and optimize page resources."));if(jsBytes>150000)found.push(issue("performance/javascript-budget","javascript",jsBytes>300000?"error":"warning","JavaScript budget exceeded","JavaScript transfer is about "+(jsBytes/1000).toFixed(1)+" KB.",null,"Split routes and defer optional hydration."));const hydrationRoots=q("[data-wrn-client-module],[data-wrn-hydrate]");if(hydrationRoots.length>50)found.push(issue("performance/hydration-count","runtime","warning","Many components hydrate",hydrationRoots.length+" hydration boundaries were found.",null,"Use visible, idle or interaction hydration."));if(state.runtimeMetrics.longTasks.length)found.push(issue("performance/long-tasks","javascript","warning","Long main-thread tasks detected",state.runtimeMetrics.longTasks.length+" task(s) exceeded 50 ms.",null,"Split expensive work and reduce hydration.","high",{longestMs:Math.max(...state.runtimeMetrics.longTasks)}));
-    let checkedSelectors=0,unusedSelectors=0;for(const sheet of [...document.styleSheets]){let rules;try{rules=[...(sheet.cssRules||[])]}catch{continue}for(const rule of rules){if(checkedSelectors>=2000)break;const selector=rule.selectorText;if(!selector||selector.includes(":"))continue;checkedSelectors++;try{if(!document.querySelector(selector))unusedSelectors++}catch{}}}if(unusedSelectors)found.push(issue("css/unused-selectors","css","suggestion","Potentially unused CSS",unusedSelectors+" of "+checkedSelectors+" inspected selectors do not match this page.",null,"Review across routes before removing selectors.","medium",{checkedSelectors,unusedSelectors}));const memory=performance.memory;if(memory&&memory.jsHeapSizeLimit&&memory.usedJSHeapSize/memory.jsHeapSizeLimit>.8)found.push(issue("performance/memory-pressure","performance","warning","High JavaScript heap usage",Math.round(memory.usedJSHeapSize/1048576)+" MiB of "+Math.round(memory.jsHeapSizeLimit/1048576)+" MiB is in use.",null,"Inspect retained objects and repeated hydration."));
+    const resources=performance.getEntriesByType("resource");const total=resources.reduce((s,e)=>s+(e.transferSize||0),0);const jsResources=resources.filter(e=>/(?:\.m?js)(?:\?|$)/i.test(e.name)&&!/\/__wrnexus\/dev-toolbar\.js(?:\?|$)/.test(e.name));const jsBytes=jsResources.reduce((sum,e)=>sum+(e.transferSize||0),0);if(resources.length>150)found.push(issue("performance/resource-count","performance","warning","Page loads many resources","Found "+resources.length+" resource requests.",null,"Remove duplicates and defer non-critical resources."));if(total>5000000)found.push(issue("performance/transfer-size","performance",total>10000000?"error":"warning","Page transfer size is large","Observed transfer size is about "+(total/1000000).toFixed(2)+" MB.",null,"Compress and optimize page resources."));if(jsBytes>300000)found.push(issue("performance/javascript-budget","javascript",jsBytes>600000?"error":"warning","Development JavaScript is large","Application JavaScript transfer is about "+(jsBytes/1000).toFixed(1)+" KB in development.",null,"Check the production build report before splitting routes; development modules are unminified.","medium",{javascriptBytes:jsBytes,mode:"development"}));const hydrationRoots=q("[data-wrn-client-module],[data-wrn-hydrate]");if(hydrationRoots.length>50)found.push(issue("performance/hydration-count","runtime","warning","Many components hydrate",hydrationRoots.length+" hydration boundaries were found.",null,"Use visible, idle or interaction hydration."));if(state.runtimeMetrics.longTasks.length)found.push(issue("performance/long-tasks","javascript","warning","Long main-thread tasks detected",state.runtimeMetrics.longTasks.length+" task(s) exceeded 50 ms.",null,"Split expensive work and reduce hydration.","high",{longestMs:Math.max(...state.runtimeMetrics.longTasks)}));
+    let checkedSelectors=0,unusedSelectors=0;for(const sheet of [...document.styleSheets]){const href=sheet.href||"";if(/\/__wrnexus\/(?:ui|framework)\.css(?:\?|$)|\/__wrnexus\/theme\/[^/?]+\.css(?:\?|$)/.test(href))continue;let rules;try{rules=[...(sheet.cssRules||[])]}catch{continue}for(const rule of rules){if(checkedSelectors>=2000)break;const selector=rule.selectorText;if(!selector||selector.includes(":"))continue;checkedSelectors++;try{if(!document.querySelector(selector))unusedSelectors++}catch{}}}const unusedRatio=checkedSelectors?unusedSelectors/checkedSelectors:0;if(checkedSelectors>=20&&unusedRatio>=.8)found.push(issue("css/unused-selectors","css","suggestion","Low current-page CSS coverage",unusedSelectors+" of "+checkedSelectors+" inspected application selectors do not match this page.",null,"Review across routes before removing selectors. WRNexus UI and theme styles are excluded.","medium",{checkedSelectors,unusedSelectors,unusedRatio}));const memory=performance.memory;if(memory&&memory.jsHeapSizeLimit&&memory.usedJSHeapSize/memory.jsHeapSizeLimit>.8)found.push(issue("performance/memory-pressure","performance","warning","High JavaScript heap usage",Math.round(memory.usedJSHeapSize/1048576)+" MiB of "+Math.round(memory.jsHeapSizeLimit/1048576)+" MiB is in use.",null,"Inspect retained objects and repeated hydration."));
     q("[data-wrn-client-module]").forEach(el=>found.push(issue("runtime/client-module","runtime","info","Client function module",el.getAttribute("data-wrn-client-module")||"Unknown module",el,"Loaded according to the component hydration strategy.","high",{hydration:el.getAttribute("data-wrn-hydrate"),runtime:el.getAttribute("data-wrn-runtime")})));
     const storeContainer=window.__wrnexusStoreContainer;
     if(storeContainer&&typeof storeContainer.inspect==="function"){

packages/dev-toolbar/test/client/assets.test.ts

@@ -9,6 +9,12 @@ test("exports usable development assets", () => {
   expect(DEV_TOOLBAR_RUNTIME).toContain('data-category="accessibility"');
   expect(DEV_TOOLBAR_RUNTIME).toContain('issue("plugin/"+app.id');
   expect(DEV_TOOLBAR_RUNTIME).toContain("apps.appendChild(button)");
+  expect(DEV_TOOLBAR_RUNTIME).toContain("Low current-page CSS coverage");
+  expect(DEV_TOOLBAR_RUNTIME).toContain("WRNexus UI and theme styles are excluded");
+  expect(DEV_TOOLBAR_RUNTIME).toContain("checkedSelectors>=20&&unusedRatio>=.8");
+  expect(DEV_TOOLBAR_RUNTIME).toContain("Development JavaScript is large");
+  expect(DEV_TOOLBAR_RUNTIME).toContain("dev-toolbar\\.js");
+  expect(DEV_TOOLBAR_RUNTIME).toContain("jsBytes>300000");
   expect(DEV_TOOLBAR_CSS).toContain(".wrn-panel");
   expect(DEV_TOOLBAR_CSS).toContain(".wrn-plugin-panel");
 });

packages/encryption/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/encryption",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "private": true,
   "type": "module",
   "main": "./src/index.ts",
@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "@types/bun": "^1.3.14",
-    "typescript": "^5.9.2"
+    "typescript": "^6.0.3"
   },
   "dependencies": {
     "@wrnexus/core": "workspace:*"

packages/i18n/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/i18n",
-  "version": "0.8.10",
+  "version": "0.8.12",
   "private": true,
   "type": "module",
   "main": "./src/index.ts",
@@ -23,7 +23,7 @@
   ],
   "devDependencies": {
     "@types/bun": "^1.3.14",
-    "typescript": "^5.9.2",
+    "typescript": "^6.0.3",
     "@wrnexus/syntax": "workspace:*"
   },
   "wrnexus": {

packages/i18n/src/index.ts

@@ -425,9 +425,20 @@ function safeJson(value: unknown): string {
     .replace(/\u2029/g, "\\u2029");
 }
 
+/** Attribute marking the JSON block that carries per-request i18n data. */
+export const I18N_DATA_ATTRIBUTE = "data-wrn-i18n";
+
+/**
+ * The i18n payload, emitted as JSON rather than as an assignment.
+ *
+ * It ships inside a `type="application/json"` block, which the browser never
+ * executes, so `script-src` does not apply to it. As an inline executable
+ * script it was blocked whenever the surrounding document's CSP nonce came
+ * from a different response, leaving window.__wrnI18n undefined.
+ */
 export function renderI18nData(i18n: ResolvedI18n, lang: string): string {
   const active = i18n.langs.includes(lang) ? lang : i18n.default;
-  return `window.__wrnI18n=${safeJson({
+  return `${safeJson({
     lang: active,
     langs: i18n.langs,
     default: i18n.default,
@@ -437,7 +448,12 @@ export function renderI18nData(i18n: ResolvedI18n, lang: string): string {
     directions: i18n.direction,
     labels: i18n.labels,
     cookie: i18n.cookie,
-  })};`;
+  })}`;
+}
+
+/** The full JSON block, including its script tag. */
+export function renderI18nDataTag(i18n: ResolvedI18n, lang: string): string {
+  return `<script type="application/json" ${I18N_DATA_ATTRIBUTE}>${renderI18nData(i18n, lang)}</script>`;
 }
 
 export const I18N_RUNTIME = String.raw`
@@ -457,7 +473,23 @@ export const I18N_RUNTIME = String.raw`
       return params && Object.prototype.hasOwnProperty.call(params, name) ? String(params[name]) : "{" + name + "}";
     });
   }
-  function state() { return window.__wrnI18n || {}; }
+  function readDataBlock() {
+    var node = document.querySelector('script[type="application/json"][data-wrn-i18n]');
+    if (!node) return null;
+    try {
+      return JSON.parse(node.textContent || "{}");
+    } catch (error) {
+      console.error("[wrnexus] i18n data block was not valid JSON", error);
+      return null;
+    }
+  }
+  function state() {
+    if (!window.__wrnI18n) {
+      var data = readDataBlock();
+      if (data) window.__wrnI18n = data;
+    }
+    return window.__wrnI18n || {};
+  }
   function t(key, params) {
     var current = state();
     return interpolate(lookup(current.messages, key) || lookup(current.fallbackMessages, key) || key, params);

packages/i18n/test/i18n-data-block.test.ts

@@ -0,0 +1,25 @@
+import { expect, test } from "bun:test";
+import { I18N_RUNTIME, renderI18nData, renderI18nDataTag, resolveI18n } from "../src/index.ts";
+
+const i18n = resolveI18n({ en: { hello: "Hello" }, es: { hello: "Hola" } }, { default: "en" });
+
+test("the i18n payload is plain JSON, not an assignment", () => {
+  const data = renderI18nData(i18n, "en");
+  expect(() => JSON.parse(data)).not.toThrow();
+  expect(data).not.toContain("window.__wrnI18n");
+});
+
+test("the data tag is a non-executable JSON block", () => {
+  // An executable inline script is subject to script-src and gets blocked
+  // whenever the document's CSP nonce came from a different response, which is
+  // what left window.__wrnI18n undefined. A JSON block is never executed.
+  const tag = renderI18nDataTag(i18n, "es");
+  expect(tag).toContain('type="application/json"');
+  expect(tag).toContain("data-wrn-i18n");
+  expect(tag).not.toContain("nonce=");
+  expect(tag).toContain("Hola");
+});
+
+test("the i18n runtime reads the data block instead of relying on an inline assignment", () => {
+  expect(I18N_RUNTIME).toContain('script[type="application/json"][data-wrn-i18n]');
+});

packages/image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/image",
-  "version": "0.8.9",
+  "version": "0.8.10",
   "type": "module",
   "description": "Responsive image planning, secure remote image policies, and performance auditing for WRNexusJS.",
   "main": "./src/index.ts",
@@ -22,7 +22,7 @@
   ],
   "devDependencies": {
     "@types/bun": "^1.3.14",
-    "typescript": "^5.9.2",
+    "typescript": "^6.0.3",
     "@wrnexus/syntax": "workspace:*"
   },
   "peerDependencies": {

packages/jwt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/jwt",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "private": true,
   "type": "module",
   "main": "./src/index.ts",
@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "@types/bun": "^1.3.14",
-    "typescript": "^5.9.2"
+    "typescript": "^6.0.3"
   },
   "dependencies": {
     "@wrnexus/core": "workspace:*"

packages/language-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/language-server",
-  "version": "0.8.9",
+  "version": "0.8.10",
   "type": "module",
   "description": "Editor-neutral Language Server Protocol implementation for WRNexus .wrn files.",
   "main": "src/index.ts",
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@wrnexus/syntax": "workspace:*",
-    "@wrnexus/typecheck": "workspace:*"
+    "@wrnexus/typecheck": "workspace:*",
+    "vscode-html-languageservice": "^5.6.2"
   }
 }

packages/language-server/src/html-regions.ts

@@ -0,0 +1,120 @@
+import type { TextDocument } from "./index.ts";
+
+export interface HtmlRegion {
+  start: number;
+  end: number;
+}
+
+/**
+ * Byte ranges of the markup inside each `view { }` block.
+ *
+ * This is a tolerant scanner rather than the parser: completion fires while
+ * the document is being typed, which is exactly when it does not parse.
+ */
+export function viewRegions(text: string): HtmlRegion[] {
+  const regions: HtmlRegion[] = [];
+  const pattern = /\bview\s*\{/g;
+  let match: RegExpExecArray | null;
+
+  while ((match = pattern.exec(text))) {
+    const bodyStart = match.index + match[0].length;
+    const end = matchingBrace(text, bodyStart);
+    regions.push({ start: bodyStart, end });
+    pattern.lastIndex = end;
+  }
+  return regions;
+}
+
+/**
+ * Offset of the brace closing the block that starts at `from`, or the end of
+ * the text when it is never closed (an unterminated block is normal mid-edit).
+ *
+ * Quotes are only tracked inside a tag, never in text content: `<p>it's</p>`
+ * would otherwise open a string that never closes and swallow the rest of the
+ * file.
+ */
+function matchingBrace(text: string, from: number): number {
+  let depth = 1;
+  let inTag = false;
+  let quote: string | null = null;
+
+  for (let index = from; index < text.length; index += 1) {
+    const char = text[index]!;
+
+    if (quote) {
+      if (char === quote) quote = null;
+      continue;
+    }
+    if (inTag && (char === '"' || char === "'")) {
+      quote = char;
+      continue;
+    }
+    if (char === "<") inTag = true;
+    else if (char === ">") inTag = false;
+    else if (char === "{") depth += 1;
+    else if (char === "}") {
+      depth -= 1;
+      if (depth === 0) return index;
+    }
+  }
+  return text.length;
+}
+
+/**
+ * A parallel document containing only the markup.
+ *
+ * Everything outside a view block becomes whitespace of the same length, and
+ * newlines are preserved, so an offset in the source is the same offset here.
+ * That removes the need for a mapping table entirely.
+ */
+export function virtualHtmlDocument(document: TextDocument): {
+  uri: string;
+  languageId: "html";
+  text: string;
+} {
+  const source = document.text;
+  const keep = new Array<boolean>(source.length).fill(false);
+  for (const region of viewRegions(source)) {
+    for (let index = region.start; index < region.end; index += 1) keep[index] = true;
+  }
+
+  let text = "";
+  for (let index = 0; index < source.length; index += 1) {
+    const char = source[index]!;
+    text += keep[index] || char === "\n" ? char : char === "\r" ? "\r" : " ";
+  }
+
+  return { uri: `${document.uri}.html`, languageId: "html", text };
+}
+
+export function isInsideHtml(document: TextDocument, offset: number): boolean {
+  return regionsFor(document).some((region) => offset >= region.start && offset <= region.end);
+}
+
+/**
+ * Regions for a document, cached by uri and version.
+ *
+ * A single keystroke produces a burst of completion, hover, and tag-close
+ * requests; without this each one rescans the file.
+ */
+const regionCache = new Map<string, { version: number; regions: HtmlRegion[] }>();
+
+function regionsFor(document: TextDocument): HtmlRegion[] {
+  // Documents without a version have no way to signal changes, so bypass cache.
+  if (document.version === undefined) {
+    return viewRegions(document.text);
+  }
+
+  const cached = regionCache.get(document.uri);
+  if (cached && cached.version === document.version) return cached.regions;
+
+  const regions = viewRegions(document.text);
+  regionCache.set(document.uri, { version: document.version, regions });
+  return regions;
+}
+
+/** Drops a document's cached regions. Call when a document closes. */
+export function clearHtmlRegionCache(uri?: string): void {
+  if (uri) regionCache.delete(uri);
+  else regionCache.clear();
+}

packages/language-server/src/html-service.ts

@@ -0,0 +1,176 @@
+// The default `main` entrypoint is a UMD bundle whose internal AMD-style
+// `require("./parser/htmlScanner")` calls survive bundling literally instead
+// of being inlined, so a bundled language server fails at runtime with
+// "Cannot find module './parser/htmlScanner'". The ESM entrypoint bundles
+// cleanly, so import it explicitly.
+import {
+  getLanguageService,
+  TextDocument as HtmlTextDocument,
+} from "vscode-html-languageservice/lib/esm/htmlLanguageService.js";
+import { isInsideHtml, virtualHtmlDocument } from "./html-regions.ts";
+import { offsetAt, type Position, type TextDocument } from "./index.ts";
+
+export interface HtmlCompletionItem {
+  label: string;
+  kind: number;
+  detail?: string;
+  documentation?: string;
+  sortText?: string;
+  insertText?: string;
+}
+
+const service = getLanguageService();
+
+/** The virtual document as the HTML service's own document type. */
+function htmlDocument(document: TextDocument) {
+  const virtual = virtualHtmlDocument(document);
+  return HtmlTextDocument.create(virtual.uri, "html", document.version ?? 1, virtual.text);
+}
+
+function markdown(value: unknown): string {
+  if (typeof value === "string") return value;
+  if (value && typeof value === "object" && "value" in value) {
+    return String((value as { value: unknown }).value);
+  }
+  return "";
+}
+
+/**
+ * HTML completions for a position inside a view block.
+ *
+ * Every item carries the `1` sortText prefix so the server can rank WRNexus
+ * entries above these without filtering either list.
+ */
+export function htmlCompletions(document: TextDocument, position: Position): HtmlCompletionItem[] {
+  if (!isInsideHtml(document, offsetAt(document.text, position))) return [];
+
+  const virtual = htmlDocument(document);
+  const parsed = service.parseHTMLDocument(virtual);
+  const list = service.doComplete(virtual, position, parsed);
+
+  return list.items.map((item) => ({
+    label: item.label,
+    kind: typeof item.kind === "number" ? item.kind : 1,
+    detail: item.detail,
+    documentation: markdown(item.documentation),
+    sortText: `1${item.sortText ?? item.label}`,
+    insertText: item.textEdit && "newText" in item.textEdit ? item.textEdit.newText : undefined,
+  }));
+}
+
+export function htmlHover(document: TextDocument, position: Position): { contents: string } | null {
+  if (!isInsideHtml(document, offsetAt(document.text, position))) return null;
+
+  const virtual = htmlDocument(document);
+  const result = service.doHover(virtual, position, service.parseHTMLDocument(virtual));
+  if (!result) return null;
+
+  const contents = markdown(result.contents);
+  return contents ? { contents } : null;
+}
+
+export function htmlFoldingRanges(
+  document: TextDocument,
+): Array<{ startLine: number; endLine: number }> {
+  return service
+    .getFoldingRanges(htmlDocument(document))
+    .map((range) => ({ startLine: range.startLine, endLine: range.endLine }));
+}
+
+/** Ranges of the opening and closing tag names, so renaming one renames both. */
+export function htmlLinkedEditingRanges(
+  document: TextDocument,
+  position: Position,
+): Array<{ start: Position; end: Position }> | null {
+  if (!isInsideHtml(document, offsetAt(document.text, position))) return null;
+
+  const virtual = htmlDocument(document);
+  const ranges = service.findLinkedEditingRanges(
+    virtual,
+    position,
+    service.parseHTMLDocument(virtual),
+  );
+  return ranges && ranges.length ? ranges : null;
+}
+
+/**
+ * Detects `<Name attr="x" /` just before `position` and completes the `>`.
+ *
+ * `vscode-html-languageservice`'s own `doTagComplete` only reacts to a typed
+ * `/` when it opens an end tag (`</`); it has no notion of a self-closing
+ * start tag, since plain HTML has no such elements outside its fixed void-element
+ * list. WRNexus components (`<Card />`) are exactly that case, so we complete
+ * it ourselves rather than relying on the library.
+ *
+ * The scan tracks quote state from the tag's opening `<` up to `offset` (quotes
+ * are only meaningful inside a tag) so a `/` inside an attribute value — e.g. the
+ * first slash of `href="https://..."` — never misfires as a self-close: the
+ * library already returns `null` there on purpose, because the cursor sits in an
+ * attribute value, not a tag-close position.
+ */
+function selfClosingTagCompletion(text: string, offset: number): string | null {
+  if (text.charAt(offset - 1) !== "/") return null;
+  if (text.charAt(offset) === ">") return null;
+
+  const tagStart = text.lastIndexOf("<", offset - 1);
+  if (tagStart < 0) return null;
+  if (!/^<[A-Za-z][\w-]*/.test(text.slice(tagStart))) return null;
+
+  let quote: '"' | "'" | null = null;
+  for (let i = tagStart + 1; i < offset - 1; i++) {
+    const ch = text[i];
+    if (quote) {
+      if (ch === quote) quote = null;
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      quote = ch;
+      continue;
+    }
+    if (ch === "<" || ch === ">") return null;
+  }
+  if (quote) return null;
+
+  return ">";
+}
+
+/**
+ * The snippet that closes the tag being typed, or null.
+ *
+ * Void elements and already-closed tags return null, which is why this decision
+ * belongs here rather than in the editor client.
+ */
+export function htmlTagComplete(document: TextDocument, position: Position): string | null {
+  const offset = offsetAt(document.text, position);
+  if (!isInsideHtml(document, offset)) return null;
+
+  const virtual = htmlDocument(document);
+  const result = service.doTagComplete(virtual, position, service.parseHTMLDocument(virtual));
+  if (result) return result;
+
+  return selfClosingTagCompletion(document.text, offset);
+}
+
+/**
+ * One completion list from both sources.
+ *
+ * WRNexus entries take the `0` sortText prefix so they rank above HTML without
+ * either list being filtered. An exact label collision resolves to the
+ * WRNexus entry: a component named `Table` is what the author meant.
+ */
+interface CompletionLike {
+  label: string;
+  kind?: number;
+  sortText?: string;
+}
+
+export function mergeCompletions(
+  wrnexus: CompletionLike[],
+  html: CompletionLike[],
+): CompletionLike[] {
+  const taken = new Set(wrnexus.map((item) => item.label));
+  return [
+    ...wrnexus.map((item) => ({ ...item, sortText: `0${item.sortText ?? item.label}` })),
+    ...html.filter((item) => !taken.has(item.label)),
+  ];
+}

packages/language-server/src/server.ts

@@ -19,6 +19,15 @@ import {
   htmlToWrn,
   type TextDocument,
 } from "./index.ts";
+import {
+  htmlCompletions,
+  htmlFoldingRanges,
+  htmlHover,
+  htmlLinkedEditingRanges,
+  htmlTagComplete,
+  mergeCompletions,
+} from "./html-service.ts";
+import { clearHtmlRegionCache } from "./html-regions.ts";
 
 type JsonRpc = { jsonrpc?: string; id?: number | string; method?: string; params?: any };
 const documents = new Map<string, TextDocument>();
@@ -111,8 +120,12 @@ async function handle(message: JsonRpc): Promise<void> {
         capabilities: {
           textDocumentSync: { openClose: true, change: 1, save: true },
           documentFormattingProvider: true,
-          completionProvider: { triggerCharacters: ["<", "@", ":", "."] },
+          completionProvider: {
+            triggerCharacters: ["<", "@", ":", ".", " ", "=", '"', "/"],
+          },
           hoverProvider: true,
+          foldingRangeProvider: true,
+          linkedEditingRangeProvider: true,
           definitionProvider: true,
           referencesProvider: true,
           renameProvider: { prepareProvider: true },
@@ -172,6 +185,7 @@ async function handle(message: JsonRpc): Promise<void> {
     case "textDocument/didClose":
       clearDiagnosticTimer(params.textDocument.uri);
       documents.delete(params.textDocument.uri);
+      clearHtmlRegionCache(params.textDocument.uri);
       send({
         jsonrpc: "2.0",
         method: "textDocument/publishDiagnostics",
@@ -195,9 +209,13 @@ async function handle(message: JsonRpc): Promise<void> {
       );
       break;
     }
-    case "textDocument/completion":
-      result(message.id, [...completionItems(), ...workspaceCompletionItems(workspaceRoot)]);
+    case "textDocument/completion": {
+      const document = documents.get(params.textDocument.uri);
+      const wrnexus = [...completionItems(), ...workspaceCompletionItems(workspaceRoot)];
+      const html = document ? htmlCompletions(document, params.position) : [];
+      result(message.id, html.length ? mergeCompletions(wrnexus, html) : wrnexus);
       break;
+    }
     case "textDocument/documentSymbol": {
       const document = documents.get(params.textDocument.uri);
       result(message.id, document ? documentSymbols(document) : []);
@@ -210,7 +228,24 @@ async function handle(message: JsonRpc): Promise<void> {
     }
     case "textDocument/hover": {
       const document = documents.get(params.textDocument.uri);
-      result(message.id, document ? hover(document, params.position) : null);
+      const html = document ? htmlHover(document, params.position) : null;
+      result(message.id, html ?? (document ? hover(document, params.position) : null));
+      break;
+    }
+    case "textDocument/foldingRange": {
+      const document = documents.get(params.textDocument.uri);
+      result(message.id, document ? htmlFoldingRanges(document) : []);
+      break;
+    }
+    case "textDocument/linkedEditingRange": {
+      const document = documents.get(params.textDocument.uri);
+      const ranges = document ? htmlLinkedEditingRanges(document, params.position) : null;
+      result(message.id, ranges ? { ranges } : null);
+      break;
+    }
+    case "wrn/tagComplete": {
+      const document = documents.get(params.textDocument.uri);
+      result(message.id, document ? htmlTagComplete(document, params.position) : null);
       break;
     }
     case "textDocument/definition": {

packages/language-server/test/html-editing-e2e.test.ts

@@ -0,0 +1,199 @@
+import { expect, test } from "bun:test";
+import { fileURLToPath } from "node:url";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { positionAt } from "../src/index.ts";
+
+// End-to-end verification (Task 8): drives the real language server, over
+// real LSP stdio framing, against the real scratch page checked in at
+// examples/basic-app/app/pages/html-editing-check.wrn. The page's text is
+// read from disk rather than duplicated here, so this test breaks if the
+// page and the test drift apart.
+
+const pagePath = join(
+  fileURLToPath(new URL("../../../", import.meta.url)),
+  "examples/basic-app/app/pages/html-editing-check.wrn",
+);
+const pageText = readFileSync(pagePath, "utf8");
+
+function packet(value: unknown): Uint8Array {
+  const body = JSON.stringify(value);
+  return new TextEncoder().encode(`Content-Length: ${Buffer.byteLength(body)}\r\n\r\n${body}`);
+}
+
+async function withServer<T>(
+  run: (
+    send: (msg: unknown) => Promise<void>,
+    readUntil: (marker: string) => Promise<string>,
+  ) => Promise<T>,
+): Promise<T> {
+  const process = Bun.spawn(
+    ["bun", "run", fileURLToPath(new URL("../src/server.ts", import.meta.url))],
+    { stdin: "pipe", stdout: "pipe", stderr: "pipe" },
+  );
+  const reader = process.stdout.getReader();
+  let output = "";
+  async function readUntil(marker: string): Promise<string> {
+    while (!output.includes(marker)) {
+      const chunk = await reader.read();
+      if (chunk.done) break;
+      output += new TextDecoder().decode(chunk.value);
+    }
+    return output.slice(output.indexOf(marker));
+  }
+  async function send(message: unknown): Promise<void> {
+    process.stdin.write(packet(message));
+    await process.stdin.flush();
+  }
+  try {
+    return await run(send, readUntil);
+  } finally {
+    process.kill();
+    await process.exited;
+  }
+}
+
+test("HTML editor support works end-to-end against the real scratch page", async () => {
+  const uri = "file:///html-editing-check.wrn";
+
+  // Positions derived from the real file content, not hardcoded line/column
+  // literals, so the test tracks the page if it changes.
+  const viewOpenBrace = pageText.indexOf("view {");
+  const viewCloseBrace = pageText.indexOf("}", pageText.indexOf("</main>"));
+  const h1TagOffset = pageText.indexOf("<h1>") + 1; // inside "h1"
+  const mainOpenNameOffset = pageText.indexOf("<main>") + 1; // inside "main" opening tag name
+  const mainOpenTagEndOffset = pageText.indexOf("<main>") + "<main>".length; // just after '>'
+  const seoTitleOffset = pageText.indexOf('title = "HTML editing check"'); // inside the seo block
+
+  // Simulate typing "<" inside the seo {} block: insert the character into a
+  // copy of the real page text (the checked-in file itself is never
+  // mutated) and ask for completion right after it. This is the scenario
+  // that actually exercises the view-region guard: if the guard were
+  // defeated, this exact position is where the HTML language service would
+  // offer tag completions, because it is positioned directly after an
+  // unclosed "<".
+  const seoInjectedText = pageText.slice(0, seoTitleOffset) + "<" + pageText.slice(seoTitleOffset);
+  const seoInjectedPosition = positionAt(seoInjectedText, seoTitleOffset + 1);
+
+  const viewPosition = positionAt(pageText, h1TagOffset);
+  const linkedEditingPosition = positionAt(pageText, mainOpenNameOffset);
+  const tagCompletePosition = positionAt(pageText, mainOpenTagEndOffset);
+  const viewStartLine = positionAt(pageText, viewOpenBrace).line;
+  const viewEndLine = positionAt(pageText, viewCloseBrace).line;
+
+  await withServer(async (send, readUntil) => {
+    await send({ jsonrpc: "2.0", id: 1, method: "initialize", params: {} });
+    await readUntil('"id":1');
+
+    await send({
+      jsonrpc: "2.0",
+      method: "textDocument/didOpen",
+      params: { textDocument: { uri, version: 1, text: pageText } },
+    });
+
+    // --- Completion inside view {} : HTML entries present, WRNexus sorts first ---
+    await send({
+      jsonrpc: "2.0",
+      id: 2,
+      method: "textDocument/completion",
+      params: { textDocument: { uri }, position: viewPosition },
+    });
+    const completionReply = await readUntil('"id":2');
+    // An HTML tag entry is present, tagged with the "1" (below-wrnexus) sortText prefix.
+    expect(completionReply).toMatch(/"label":"div"[^}]*"sortText":"1/);
+    // A WRNexus keyword entry is present, tagged with the "0" (above-html) sortText prefix.
+    expect(completionReply).toMatch(/"label":"page"[^}]*"sortText":"0/);
+    // No html-prefixed sortText is lexicographically smaller than any wrnexus one:
+    // every "0..." sortText must precede every "1..." sortText, which is exactly
+    // what makes WRNexus entries render above HTML ones in an editor.
+    expect(completionReply).not.toMatch(/"sortText":"1[^"]*"[\s\S]*"sortText":"0/);
+
+    // --- Negative case: completion right after "<" typed inside seo {} must NOT include HTML entries ---
+    const seoUri = "file:///html-editing-check-seo-inject.wrn";
+    await send({
+      jsonrpc: "2.0",
+      method: "textDocument/didOpen",
+      params: { textDocument: { uri: seoUri, version: 1, text: seoInjectedText } },
+    });
+    await send({
+      jsonrpc: "2.0",
+      id: 3,
+      method: "textDocument/completion",
+      params: { textDocument: { uri: seoUri }, position: seoInjectedPosition },
+    });
+    const seoReply = await readUntil('"id":3');
+    expect(seoReply).not.toContain('"label":"div"');
+    expect(seoReply).not.toContain('"label":"span"');
+    expect(seoReply).not.toContain('"label":"h1"');
+    expect(seoReply).not.toMatch(/"sortText":"1/);
+
+    // --- Hover over a tag inside the view block returns documentation ---
+    await send({
+      jsonrpc: "2.0",
+      id: 4,
+      method: "textDocument/hover",
+      params: { textDocument: { uri }, position: viewPosition },
+    });
+    const hoverReply = await readUntil('"id":4');
+    expect(hoverReply).toContain('"contents"');
+    expect(hoverReply).not.toMatch(/"result":\s*null/);
+
+    // --- Folding ranges are returned and all lie within the view block ---
+    await send({
+      jsonrpc: "2.0",
+      id: 5,
+      method: "textDocument/foldingRange",
+      params: { textDocument: { uri } },
+    });
+    const foldReply = await readUntil('"id":5');
+    expect(foldReply).toContain('"result":[');
+    const foldBody = foldReply.slice(foldReply.indexOf('"result":['));
+    const foldRanges = [...foldBody.matchAll(/"startLine":(\d+),"endLine":(\d+)/g)];
+    expect(foldRanges.length).toBeGreaterThan(0);
+    for (const [, start, end] of foldRanges) {
+      expect(Number(start)).toBeGreaterThanOrEqual(viewStartLine);
+      expect(Number(end)).toBeLessThanOrEqual(viewEndLine);
+    }
+
+    // --- Linked editing at the <main> opening tag name returns two ranges ---
+    await send({
+      jsonrpc: "2.0",
+      id: 6,
+      method: "textDocument/linkedEditingRange",
+      params: { textDocument: { uri }, position: linkedEditingPosition },
+    });
+    const linkedReply = await readUntil('"id":6');
+    expect(linkedReply).toContain('"ranges"');
+    const rangeCount = (linkedReply.match(/"start":\{/g) ?? []).length;
+    expect(rangeCount).toBe(2);
+
+    // --- wrn/tagComplete after <main> returns the closing snippet ---
+    await send({
+      jsonrpc: "2.0",
+      id: 7,
+      method: "wrn/tagComplete",
+      params: { textDocument: { uri }, position: tagCompletePosition },
+    });
+    const tagCompleteReply = await readUntil('"id":7');
+    expect(tagCompleteReply).toContain('"result":"$0</main>"');
+
+    // --- wrn/tagComplete for a void element (<br>) returns null ---
+    const voidText = `page A {\n  view {\n    <br>\n  }\n}\n`;
+    const voidUri = "file:///html-editing-check-void.wrn";
+    await send({
+      jsonrpc: "2.0",
+      method: "textDocument/didOpen",
+      params: { textDocument: { uri: voidUri, version: 1, text: voidText } },
+    });
+    const brOffset = voidText.indexOf("<br>") + "<br>".length;
+    const brPosition = positionAt(voidText, brOffset);
+    await send({
+      jsonrpc: "2.0",
+      id: 8,
+      method: "wrn/tagComplete",
+      params: { textDocument: { uri: voidUri }, position: brPosition },
+    });
+    const voidReply = await readUntil('"id":8');
+    expect(voidReply).toContain('"result":null');
+  });
+});

packages/language-server/test/html-regions.test.ts

@@ -0,0 +1,146 @@
+import { expect, test } from "bun:test";
+import {
+  clearHtmlRegionCache,
+  isInsideHtml,
+  viewRegions,
+  virtualHtmlDocument,
+} from "../src/html-regions.ts";
+
+function doc(text: string): { uri: string; text: string; version?: number } {
+  return { uri: `file:///${Math.random()}.wrn`, text };
+}
+
+const PAGE = `page Home {
+  view {
+    <div class="card">hello</div>
+  }
+}
+`;
+
+test("the virtual document preserves length and newline offsets", () => {
+  // This is what makes position mapping unnecessary. If it breaks, every
+  // feature reports positions off by some amount instead of failing loudly.
+  const source = doc(PAGE);
+  const virtual = virtualHtmlDocument(source);
+
+  expect(virtual.text.length).toBe(source.text.length);
+  expect(virtual.languageId).toBe("html");
+  for (let i = 0; i < source.text.length; i += 1) {
+    if (source.text[i] === "\n") expect(virtual.text[i]).toBe("\n");
+  }
+});
+
+test("markup survives into the virtual document and everything else is blanked", () => {
+  const virtual = virtualHtmlDocument(doc(PAGE));
+  expect(virtual.text).toContain('<div class="card">hello</div>');
+  expect(virtual.text).not.toContain("page Home");
+  expect(virtual.text).not.toContain("view");
+});
+
+test("an apostrophe in text content does not swallow later regions", () => {
+  // A scanner treating ' as a string delimiter anywhere considers the rest of
+  // the file one open string and loses every later region.
+  const source = `page A {
+  view {
+    <p>it's fine</p>
+  }
+}
+component B {
+  view {
+    <span>second</span>
+  }
+}
+`;
+  expect(viewRegions(source)).toHaveLength(2);
+  expect(virtualHtmlDocument(doc(source)).text).toContain("<span>second</span>");
+});
+
+test("interpolation braces nest without ending the region early", () => {
+  const source = `page A {
+  view {
+    <div class={cond ? "a" : "b"} data-x={{ a: 1 }}>after</div>
+  }
+}
+`;
+  const regions = viewRegions(source);
+  expect(regions).toHaveLength(1);
+  expect(virtualHtmlDocument(doc(source)).text).toContain("after</div>");
+});
+
+test("unparseable mid-edit markup still yields a region", () => {
+  // Completion fires exactly when the document does not parse.
+  const source = `page A {
+  view {
+    <div class="
+  }
+}
+`;
+  expect(viewRegions(source).length).toBe(1);
+});
+
+test("a file with no view block yields no regions and a fully blank document", () => {
+  const source = `page A {
+  functions {
+    function go() {}
+  }
+}
+`;
+  expect(viewRegions(source)).toEqual([]);
+  expect(virtualHtmlDocument(doc(source)).text.trim()).toBe("");
+});
+
+test("regions are cached per document version", () => {
+  // One keystroke fans out into completion, hover, and tag-close requests.
+  const first = doc(PAGE);
+  first.version = 1;
+  expect(isInsideHtml(first, PAGE.indexOf("<div"))).toBe(true);
+
+  // Same version, mutated text: the cached regions are reused, proving the
+  // scan did not run again.
+  first.text = "page A { }";
+  expect(isInsideHtml(first, PAGE.indexOf("<div"))).toBe(true);
+
+  first.version = 2;
+  expect(isInsideHtml(first, PAGE.indexOf("<div"))).toBe(false);
+});
+
+test("clearHtmlRegionCache drops a closed document's cached regions", () => {
+  // A reopened document commonly restarts at version 1. Without clearing the
+  // cache on close, that version would match the stale entry from the prior
+  // session and serve regions scanned from the old text.
+  const first = doc(PAGE);
+  first.version = 1;
+  expect(isInsideHtml(first, PAGE.indexOf("<div"))).toBe(true);
+
+  clearHtmlRegionCache(first.uri);
+
+  // Same uri, same version 1, but a document with no view block at all: if
+  // the cache had survived, this would still report true from the old scan.
+  const reopened = { uri: first.uri, text: "page A { }", version: 1 };
+  expect(isInsideHtml(reopened, PAGE.indexOf("<div"))).toBe(false);
+});
+
+test("isInsideHtml distinguishes markup from surrounding code", () => {
+  const source = doc(PAGE);
+  const markupOffset = PAGE.indexOf("<div");
+  const keywordOffset = PAGE.indexOf("page");
+
+  expect(isInsideHtml(source, markupOffset)).toBe(true);
+  expect(isInsideHtml(source, keywordOffset)).toBe(false);
+});
+
+test("documents without a version field scan every time and detect mutations", () => {
+  // Without a version, the cache has no key to validate freshness. Mutations
+  // must be detected on every call, even when uri and document are reused.
+  const source = doc(PAGE);
+  // Explicitly verify version is undefined (not set by doc() helper).
+  expect(source.version).toBeUndefined();
+
+  const markupOffset = PAGE.indexOf("<div");
+  expect(isInsideHtml(source, markupOffset)).toBe(true);
+
+  // Mutate the text: remove the view block.
+  source.text = "page A { }";
+  // Same uri, same missing version, but different text: mutation must be detected.
+  expect(isInsideHtml(source, markupOffset)).toBe(false);
+});

packages/language-server/test/html-service.test.ts

@@ -0,0 +1,197 @@
+import { expect, test } from "bun:test";
+import {
+  htmlCompletions,
+  htmlFoldingRanges,
+  htmlHover,
+  htmlLinkedEditingRanges,
+  htmlTagComplete,
+} from "../src/html-service.ts";
+
+function doc(text: string) {
+  return { uri: "file:///Page.wrn", text };
+}
+
+function positionOf(text: string, needle: string) {
+  const offset = text.indexOf(needle) + needle.length;
+  const before = text.slice(0, offset);
+  const lines = before.split("\n");
+  return { line: lines.length - 1, character: lines[lines.length - 1]!.length };
+}
+
+test("suggests HTML tags inside a view block", () => {
+  const text = `page A {
+  view {
+    <
+  }
+}
+`;
+  const items = htmlCompletions(doc(text), positionOf(text, "    <"));
+  expect(items.some((item) => item.label === "div")).toBe(true);
+  expect(items.every((item) => item.sortText?.startsWith("1"))).toBe(true);
+});
+
+test("suggests attributes inside a tag", () => {
+  const text = `page A {
+  view {
+    <input 
+  }
+}
+`;
+  const items = htmlCompletions(doc(text), positionOf(text, "<input "));
+  expect(items.some((item) => item.label === "type")).toBe(true);
+});
+
+test("returns nothing outside a view block", () => {
+  const text = `page A {
+  functions {
+    function go() { }
+  }
+}
+`;
+  expect(htmlCompletions(doc(text), positionOf(text, "function go() "))).toEqual([]);
+});
+
+test("hovers a tag inside a view block and nothing outside one", () => {
+  const text = `page A {
+  view {
+    <div>x</div>
+  }
+}
+`;
+  expect(htmlHover(doc(text), positionOf(text, "<di"))).not.toBeNull();
+
+  const code = `page A {
+  functions {
+    function go() { }
+  }
+}
+`;
+  expect(htmlHover(doc(code), positionOf(code, "func"))).toBeNull();
+});
+
+test("closes an open tag and leaves void elements alone", () => {
+  const open = `page A {
+  view {
+    <div>
+  }
+}
+`;
+  expect(htmlTagComplete(doc(open), positionOf(open, "<div>"))).toContain("</div>");
+
+  const void_ = `page A {
+  view {
+    <br>
+  }
+}
+`;
+  expect(htmlTagComplete(doc(void_), positionOf(void_, "<br>"))).toBeNull();
+});
+
+test("completes a self-closing component tag", () => {
+  const text = `page A {
+  view {
+    <Card /
+  }
+}
+`;
+  expect(htmlTagComplete(doc(text), positionOf(text, "<Card /"))).toBe(">");
+});
+
+test("does not misfire inside a quoted attribute value containing a slash", () => {
+  const doubleQuoted = `page A {
+  view {
+    <a href="https:/
+  }
+}
+`;
+  expect(htmlTagComplete(doc(doubleQuoted), positionOf(doubleQuoted, `href="https:/`))).toBeNull();
+
+  const singleQuoted = `page A {
+  view {
+    <img src='/assets/
+  }
+}
+`;
+  expect(htmlTagComplete(doc(singleQuoted), positionOf(singleQuoted, `src='/assets/`))).toBeNull();
+});
+
+test("still completes a self-close after a preceding attribute", () => {
+  const text = `page A {
+  view {
+    <Card title="x" /
+  }
+}
+`;
+  expect(htmlTagComplete(doc(text), positionOf(text, `title="x" /`))).toBe(">");
+});
+
+test("returns no tag completion outside a view block", () => {
+  const text = `page A {
+  functions {
+    function go() { }
+  }
+}
+`;
+  expect(htmlTagComplete(doc(text), positionOf(text, "function go() "))).toBeNull();
+});
+
+test("folding ranges stay inside view regions", () => {
+  const text = `page A {
+  view {
+    <ul>
+      <li>one</li>
+    </ul>
+  }
+}
+`;
+  const ranges = htmlFoldingRanges(doc(text));
+  expect(ranges.length).toBeGreaterThan(0);
+
+  const viewStartLine = text.slice(0, text.indexOf("view {")).split("\n").length - 1;
+  for (const range of ranges) expect(range.startLine).toBeGreaterThan(viewStartLine - 1);
+});
+
+import { mergeCompletions } from "../src/html-service.ts";
+
+test("merging ranks WRNexus entries above HTML and drops exact collisions", () => {
+  const merged = mergeCompletions(
+    [
+      { label: "Card", kind: 7 },
+      { label: "table", kind: 7 },
+    ],
+    [
+      { label: "div", kind: 10, sortText: "1div" },
+      { label: "table", kind: 10, sortText: "1table" },
+    ],
+  );
+
+  const labels = merged.map((item) => item.label);
+  expect(labels.filter((label) => label === "table")).toHaveLength(1);
+  expect(merged.find((item) => item.label === "Card")?.sortText?.startsWith("0")).toBe(true);
+  expect(merged.find((item) => item.label === "div")?.sortText?.startsWith("1")).toBe(true);
+
+  const sorted = [...merged].sort((a, b) => (a.sortText ?? "").localeCompare(b.sortText ?? ""));
+  expect(sorted[0]!.label).toBe("Card");
+});
+
+test("linked editing returns both the opening and closing tag names", () => {
+  const text = `page A {
+  view {
+    <div>x</div>
+  }
+}
+`;
+  const ranges = htmlLinkedEditingRanges(doc(text), positionOf(text, "<di"));
+  expect(ranges).not.toBeNull();
+  expect(ranges).toHaveLength(2);
+});
+
+test("linked editing returns null outside a view block", () => {
+  const text = `page A {
+  functions {
+    function go() { }
+  }
+}
+`;
+  expect(htmlLinkedEditingRanges(doc(text), positionOf(text, "func"))).toBeNull();
+});

packages/language-server/test/language-server.test.ts

@@ -217,3 +217,207 @@ test("coalesces rapid document changes into one pending diagnostic analysis", as
   process.kill();
   await process.exited;
 });
+
+test("didClose drops the region cache so a reopened document at the same version is rescanned", async () => {
+  // Regression coverage for the didClose wiring in server.ts: without the
+  // clearHtmlRegionCache(uri) call there, a document that closes and reopens
+  // at version 1 (a common restart point) matches the stale cache entry from
+  // the prior session. Open first WITHOUT a view block (caching "no HTML
+  // here" for this uri/version), close, then reopen the SAME uri at the SAME
+  // version WITH a view block covering the same offset: correct behaviour
+  // rescans and finds it, a stale cache still says "no HTML here" and
+  // suppresses the completions entirely.
+  const process = Bun.spawn(
+    ["bun", "run", fileURLToPath(new URL("../src/server.ts", import.meta.url))],
+    { stdin: "pipe", stdout: "pipe", stderr: "pipe" },
+  );
+  const uri = "file:///reopen.wrn";
+  const withoutView = `page A {
+  functions {
+    x
+  }
+}
+`;
+  const withView = `page A {
+  view {
+    <
+  }
+}
+`;
+  const position = { line: 2, character: 5 };
+  const reader = process.stdout.getReader();
+  let output = "";
+  async function readUntil(marker: string): Promise<void> {
+    while (!output.includes(marker)) {
+      const chunk = await reader.read();
+      if (chunk.done) break;
+      output += new TextDecoder().decode(chunk.value);
+    }
+  }
+
+  process.stdin.write(packet({ jsonrpc: "2.0", id: 1, method: "initialize", params: {} }));
+  await process.stdin.flush();
+  await readUntil('"id":1');
+
+  process.stdin.write(
+    packet({
+      jsonrpc: "2.0",
+      method: "textDocument/didOpen",
+      params: { textDocument: { uri, version: 1, text: withoutView } },
+    }),
+  );
+  process.stdin.write(
+    packet({
+      jsonrpc: "2.0",
+      id: 2,
+      method: "textDocument/completion",
+      params: { textDocument: { uri }, position },
+    }),
+  );
+  await process.stdin.flush();
+  await readUntil('"id":2');
+  const firstReply = output.slice(output.indexOf('"id":2'));
+  expect(firstReply).not.toContain('"label":"div"');
+
+  process.stdin.write(
+    packet({ jsonrpc: "2.0", method: "textDocument/didClose", params: { textDocument: { uri } } }),
+  );
+  process.stdin.write(
+    packet({
+      jsonrpc: "2.0",
+      method: "textDocument/didOpen",
+      params: { textDocument: { uri, version: 1, text: withView } },
+    }),
+  );
+  process.stdin.write(
+    packet({
+      jsonrpc: "2.0",
+      id: 3,
+      method: "textDocument/completion",
+      params: { textDocument: { uri }, position },
+    }),
+  );
+  await process.stdin.flush();
+  await readUntil('"id":3');
+  const secondReply = output.slice(output.indexOf('"id":3'));
+  expect(secondReply).toContain('"label":"div"');
+
+  process.kill();
+  await process.exited;
+});
+
+test("advertises and serves folding ranges and linked editing ranges over the wire", async () => {
+  const process = Bun.spawn(
+    ["bun", "run", fileURLToPath(new URL("../src/server.ts", import.meta.url))],
+    { stdin: "pipe", stdout: "pipe", stderr: "pipe" },
+  );
+  const uri = "file:///fold.wrn";
+  const text = `page A {
+  view {
+    <div>x</div>
+  }
+}
+`;
+  const reader = process.stdout.getReader();
+  let output = "";
+  async function readUntil(marker: string): Promise<void> {
+    while (!output.includes(marker)) {
+      const chunk = await reader.read();
+      if (chunk.done) break;
+      output += new TextDecoder().decode(chunk.value);
+    }
+  }
+
+  process.stdin.write(packet({ jsonrpc: "2.0", id: 1, method: "initialize", params: {} }));
+  await process.stdin.flush();
+  await readUntil('"id":1');
+  const initReply = output.slice(output.indexOf('"id":1'));
+  expect(initReply).toContain('"foldingRangeProvider":true');
+  expect(initReply).toContain('"linkedEditingRangeProvider":true');
+
+  process.stdin.write(
+    packet({
+      jsonrpc: "2.0",
+      method: "textDocument/didOpen",
+      params: { textDocument: { uri, version: 1, text } },
+    }),
+  );
+  process.stdin.write(
+    packet({
+      jsonrpc: "2.0",
+      id: 2,
+      method: "textDocument/foldingRange",
+      params: { textDocument: { uri } },
+    }),
+  );
+  await process.stdin.flush();
+  await readUntil('"id":2');
+  const foldReply = output.slice(output.indexOf('"id":2'));
+  expect(foldReply).toContain('"result":[');
+
+  process.stdin.write(
+    packet({
+      jsonrpc: "2.0",
+      id: 3,
+      method: "textDocument/linkedEditingRange",
+      params: { textDocument: { uri }, position: { line: 2, character: 6 } },
+    }),
+  );
+  await process.stdin.flush();
+  await readUntil('"id":3');
+  const linkedReply = output.slice(output.indexOf('"id":3'));
+  expect(linkedReply).toContain('"ranges"');
+
+  process.kill();
+  await process.exited;
+});
+
+test("serves wrn/tagComplete over the wire", async () => {
+  const process = Bun.spawn(
+    ["bun", "run", fileURLToPath(new URL("../src/server.ts", import.meta.url))],
+    { stdin: "pipe", stdout: "pipe", stderr: "pipe" },
+  );
+  const uri = "file:///tag-complete.wrn";
+  const text = `page A {
+  view {
+    <div>
+  }
+}
+`;
+  const reader = process.stdout.getReader();
+  let output = "";
+  async function readUntil(marker: string): Promise<void> {
+    while (!output.includes(marker)) {
+      const chunk = await reader.read();
+      if (chunk.done) break;
+      output += new TextDecoder().decode(chunk.value);
+    }
+  }
+
+  process.stdin.write(packet({ jsonrpc: "2.0", id: 1, method: "initialize", params: {} }));
+  await process.stdin.flush();
+  await readUntil('"id":1');
+
+  process.stdin.write(
+    packet({
+      jsonrpc: "2.0",
+      method: "textDocument/didOpen",
+      params: { textDocument: { uri, version: 1, text } },
+    }),
+  );
+  process.stdin.write(
+    packet({
+      jsonrpc: "2.0",
+      id: 2,
+      method: "wrn/tagComplete",
+      params: { textDocument: { uri }, position: { line: 2, character: 9 } },
+    }),
+  );
+  await process.stdin.flush();
+  await readUntil('"id":2');
+  const reply = output.slice(output.indexOf('"id":2'));
+  expect(reply).toContain('"result":"$0</div>"');
+
+  process.kill();
+  await process.exited;
+});