brustjs 0.1.62-alpha → 0.1.64-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brustjs",
-  "version": "0.1.62-alpha",
+  "version": "0.1.64-alpha",
   "description": "Bun + Rust SSR framework — React on the server, Rust everywhere else (napi cdylib + per-worker SharedArrayBuffer).",
   "license": "MIT",
   "repository": {
@@ -41,12 +41,12 @@
     "typescript": "^6.0.3"
   },
   "optionalDependencies": {
-    "brustjs-darwin-x64": "0.1.62-alpha",
-    "brustjs-darwin-arm64": "0.1.62-alpha",
-    "brustjs-linux-x64-gnu": "0.1.62-alpha",
-    "brustjs-linux-arm64-gnu": "0.1.62-alpha",
-    "brustjs-linux-x64-musl": "0.1.62-alpha",
-    "brustjs-linux-arm64-musl": "0.1.62-alpha"
+    "brustjs-darwin-x64": "0.1.64-alpha",
+    "brustjs-darwin-arm64": "0.1.64-alpha",
+    "brustjs-linux-x64-gnu": "0.1.64-alpha",
+    "brustjs-linux-arm64-gnu": "0.1.64-alpha",
+    "brustjs-linux-x64-musl": "0.1.64-alpha",
+    "brustjs-linux-arm64-musl": "0.1.64-alpha"
   },
   "peerDependencies": {
     "react": "^19.2.6",

package/runtime/cli/native-routes-emit.ts

@@ -8,6 +8,22 @@ import { islandChunkBasename } from '../islands/chunk-id.ts'
 import { emitBehaviorSsrModule } from '../islands/behavior-ssr-loader.ts'
 import { DIRECTIVES_BOOTSTRAP, ISLANDS_IMPORTMAP_AND_BOOTSTRAP } from '../islands/importmap.ts'
 
+const NATIVE_INLINE_FALLBACK_WARNING = /^native component "([^"\r\n]+)" not inlined: ([\s\S]+)$/
+
+export function formatCompilerWarning(warning: string): string {
+  const match = NATIVE_INLINE_FALLBACK_WARNING.exec(warning)
+  if (!match) return `brust: ${warning}`
+
+  const [, component, reason] = match
+  return [
+    `brust: warning — native component "${component}" was not inlined`,
+    `  reason: ${reason}`,
+    '  impact: rendered through React SSR; React hooks and event handlers are not hydrated automatically on a native route',
+    `  interactive fix: use <Island component={${component}} props={...} />`,
+    `  zero-JS fix: rewrite ${component} using native-compatible JSX`,
+  ].join('\n')
+}
+
 /** Gather transitive component sources starting from a page source file.
  *
  * BFS/DFS over local imports reachable from `pageSourcePath`:
@@ -936,8 +952,12 @@ export async function emitNativeTemplates(opts: NativeRouteEmitOpts): Promise<Na
       )
     }
 
-    // Print non-fatal compiler warnings to stderr.
-    for (const w of compiled.warnings ?? []) process.stderr.write(`brust: ${w}\n`)
+    // Print non-fatal compiler warnings to stderr. Native-inline fallbacks get
+    // actionable multiline guidance; all other warning strings retain the
+    // existing one-line prefix.
+    for (const warning of compiled.warnings ?? []) {
+      process.stderr.write(`${formatCompilerWarning(warning)}\n`)
+    }
 
     // SPA navigation extracts the FIRST <main>…</main> block, so a native route
     // template must hold exactly one <main>. More than one (typically a leaf

package/runtime/index.js

@@ -77,8 +77,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-android-arm64')
         const bindingPackageVersion = require('brustjs-android-arm64/package.json').version
-        if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -93,8 +93,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-android-arm-eabi')
         const bindingPackageVersion = require('brustjs-android-arm-eabi/package.json').version
-        if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -114,8 +114,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-win32-x64-gnu')
         const bindingPackageVersion = require('brustjs-win32-x64-gnu/package.json').version
-        if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -130,8 +130,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-win32-x64-msvc')
         const bindingPackageVersion = require('brustjs-win32-x64-msvc/package.json').version
-        if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -147,8 +147,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-win32-ia32-msvc')
         const bindingPackageVersion = require('brustjs-win32-ia32-msvc/package.json').version
-        if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -163,8 +163,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-win32-arm64-msvc')
         const bindingPackageVersion = require('brustjs-win32-arm64-msvc/package.json').version
-        if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -182,8 +182,8 @@ function requireNative() {
     try {
       const binding = require('brustjs-darwin-universal')
       const bindingPackageVersion = require('brustjs-darwin-universal/package.json').version
-      if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-        throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+      if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+        throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
       }
       return binding
     } catch (e) {
@@ -198,8 +198,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-darwin-x64')
         const bindingPackageVersion = require('brustjs-darwin-x64/package.json').version
-        if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -214,8 +214,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-darwin-arm64')
         const bindingPackageVersion = require('brustjs-darwin-arm64/package.json').version
-        if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -234,8 +234,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-freebsd-x64')
         const bindingPackageVersion = require('brustjs-freebsd-x64/package.json').version
-        if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -250,8 +250,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-freebsd-arm64')
         const bindingPackageVersion = require('brustjs-freebsd-arm64/package.json').version
-        if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -271,8 +271,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-x64-musl')
           const bindingPackageVersion = require('brustjs-linux-x64-musl/package.json').version
-          if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -287,8 +287,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-x64-gnu')
           const bindingPackageVersion = require('brustjs-linux-x64-gnu/package.json').version
-          if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -305,8 +305,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-arm64-musl')
           const bindingPackageVersion = require('brustjs-linux-arm64-musl/package.json').version
-          if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -321,8 +321,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-arm64-gnu')
           const bindingPackageVersion = require('brustjs-linux-arm64-gnu/package.json').version
-          if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -339,8 +339,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-arm-musleabihf')
           const bindingPackageVersion = require('brustjs-linux-arm-musleabihf/package.json').version
-          if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -355,8 +355,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-arm-gnueabihf')
           const bindingPackageVersion = require('brustjs-linux-arm-gnueabihf/package.json').version
-          if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -373,8 +373,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-loong64-musl')
           const bindingPackageVersion = require('brustjs-linux-loong64-musl/package.json').version
-          if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -389,8 +389,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-loong64-gnu')
           const bindingPackageVersion = require('brustjs-linux-loong64-gnu/package.json').version
-          if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -407,8 +407,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-riscv64-musl')
           const bindingPackageVersion = require('brustjs-linux-riscv64-musl/package.json').version
-          if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -423,8 +423,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-riscv64-gnu')
           const bindingPackageVersion = require('brustjs-linux-riscv64-gnu/package.json').version
-          if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -440,8 +440,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-linux-ppc64-gnu')
         const bindingPackageVersion = require('brustjs-linux-ppc64-gnu/package.json').version
-        if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -456,8 +456,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-linux-s390x-gnu')
         const bindingPackageVersion = require('brustjs-linux-s390x-gnu/package.json').version
-        if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -476,8 +476,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-openharmony-arm64')
         const bindingPackageVersion = require('brustjs-openharmony-arm64/package.json').version
-        if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -492,8 +492,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-openharmony-x64')
         const bindingPackageVersion = require('brustjs-openharmony-x64/package.json').version
-        if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -508,8 +508,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-openharmony-arm')
         const bindingPackageVersion = require('brustjs-openharmony-arm/package.json').version
-        if (bindingPackageVersion !== '0.1.62-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.62-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.64-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.64-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {

package/runtime/native/runtime.ts

@@ -12,22 +12,25 @@ export type Instance = Record<string, unknown>
  *                    for side-effects on signal change (sync localStorage, the DOM
  *                    outside the component, timers). Returns the disposer too.
  *  - `onCleanup(fn)` — register a one-shot teardown for unmount (e.g. removeEventListener). */
-export interface BehaviorCtx {
-  el: HTMLElement
+export interface BehaviorCtx<Host extends Element = HTMLElement> {
+  el: Host
   props: unknown
   // biome-ignore lint/suspicious/noConfusingVoidType: React useEffect return shape (`void | Destructor`) — see store `effect`.
   effect: (fn: () => void | (() => void)) => () => void
   onCleanup: (fn: () => void) => void
 }
-export type Behavior = (ctx: BehaviorCtx) => Instance
+export type Behavior<Host extends Element = HTMLElement> = (ctx: BehaviorCtx<Host>) => Instance
 
 interface Mounted {
   disposers: Array<() => void>
 }
 
-const registry = new Map<string, Behavior>()
-const mounted = new WeakMap<HTMLElement, Mounted>()
+type RegisteredBehavior = Behavior<Element>
+
+const registry = new Map<string, RegisteredBehavior>()
+const mounted = new WeakMap<Element, Mounted>()
 const loading = new Map<string, Promise<unknown>>()
+const pending = new Map<string, Set<Element>>()
 let started = false
 
 /** Per-component behavior chunk URL. Each native interactive component is built to
@@ -39,8 +42,15 @@ const CHUNK_BASE = '/_brust/islands/'
 /** Register a component behavior under `name`. Called by `<name>.directive.js` chunks
  * via the global handle below (they do NOT import this module — keeps each chunk to
  * just its behavior, with the runtime shared as the single `_directives.js` copy). */
-export function register(name: string, behavior: Behavior): void {
-  registry.set(name, behavior)
+export function register<Host extends Element = HTMLElement>(
+  name: string,
+  behavior: Behavior<Host>,
+): void {
+  registry.set(name, behavior as unknown as RegisteredBehavior)
+  const hosts = pending.get(name)
+  if (!hosts) return
+  pending.delete(name)
+  for (const el of hosts) mountElement(el)
 }
 // Expose `register` on a global so dynamically-imported behavior chunks self-register
 // into THIS runtime's registry without importing/duplicating the runtime. Symbol.for
@@ -72,8 +82,8 @@ export function start(root?: ParentNode): void {
 }
 
 function scanAndMount(scope: ParentNode): void {
-  if (scope instanceof HTMLElement && scope.hasAttribute('x-data')) mountElement(scope)
-  for (const el of Array.from(scope.querySelectorAll<HTMLElement>('[x-data]'))) {
+  if (scope instanceof Element && scope.hasAttribute('x-data')) mountElement(scope)
+  for (const el of Array.from(scope.querySelectorAll<Element>('[x-data]'))) {
     mountElement(el)
   }
   // R10 — OPEN shadow roots host their own component trees: scan each the same
@@ -81,8 +91,8 @@ function scanAndMount(scope: ParentNode): void {
   // per root, since neither the body observer nor an outer root's observer sees
   // mutations inside an inner shadow tree. Closed roots expose `shadowRoot ===
   // null` and are unreachable by design. The walk-all is per added subtree only.
-  if (scope instanceof HTMLElement && scope.shadowRoot) scanShadowRoot(scope.shadowRoot)
-  for (const el of Array.from(scope.querySelectorAll<HTMLElement>('*'))) {
+  if (scope instanceof Element && scope.shadowRoot) scanShadowRoot(scope.shadowRoot)
+  for (const el of Array.from(scope.querySelectorAll<Element>('*'))) {
     if (el.shadowRoot) scanShadowRoot(el.shadowRoot)
   }
 }
@@ -92,7 +102,7 @@ function scanShadowRoot(root: ShadowRoot): void {
   observeRoot(root)
 }
 
-function mountElement(el: HTMLElement): void {
+function mountElement(el: Element): void {
   if (mounted.has(el)) return
   // Removed mid-scan (e.g. an initial-falsy x-if subtree pruned while scanAndMount's
   // snapshot loop was still iterating): mounting a detached element would leak its
@@ -101,6 +111,12 @@ function mountElement(el: HTMLElement): void {
   const name = el.getAttribute('x-data') ?? ''
   const behavior = registry.get(name)
   if (!behavior) {
+    let hosts = pending.get(name)
+    if (!hosts) {
+      hosts = new Set()
+      pending.set(name, hosts)
+    }
+    hosts.add(el)
     // Behavior chunk not loaded yet → fetch it on demand, then mount this name.
     loadBehavior(name)
     return
@@ -124,12 +140,12 @@ function mountElement(el: HTMLElement): void {
   mounted.set(el, m)
   // ctxEffect/onCleanup typed via BehaviorCtx so the `void | Destructor` shape is
   // declared in one place (the interface) — no inline void-union to suppress here.
-  const ctxEffect: BehaviorCtx['effect'] = (fn) => {
+  const ctxEffect: BehaviorCtx<Element>['effect'] = (fn) => {
     const dispose = effect(fn)
     m.disposers.push(dispose)
     return dispose
   }
-  const onCleanup: BehaviorCtx['onCleanup'] = (fn) => {
+  const onCleanup: BehaviorCtx<Element>['onCleanup'] = (fn) => {
     m.disposers.push(fn)
   }
   const instance = behavior({ el, props, effect: ctxEffect, onCleanup })
@@ -150,6 +166,7 @@ function mountElement(el: HTMLElement): void {
 function loadBehavior(name: string): void {
   if (registry.has(name) || loading.has(name)) return
   if (!/^[A-Za-z0-9_-]+$/.test(name)) {
+    pending.delete(name)
     console.warn(`[brust] unsafe x-data component name "${name}" — not loaded`)
     return
   }
@@ -159,17 +176,16 @@ function loadBehavior(name: string): void {
     .then(() => import(/* @vite-ignore */ `${CHUNK_BASE}${name}.directive.js`))
     .then(() => {
       if (!registry.has(name)) {
+        loading.delete(name)
+        pending.delete(name)
         console.warn(`[brust] "${name}.directive.js" loaded but did not register "${name}"`)
-        return
-      }
-      // Mount every element waiting on this name (initial + swapped-in).
-      if (typeof document !== 'undefined') {
-        for (const el of Array.from(document.querySelectorAll<HTMLElement>(`[x-data="${name}"]`))) {
-          mountElement(el)
-        }
       }
     })
-    .catch((e) => console.error(`[brust] failed to load directive component "${name}":`, e))
+    .catch((e) => {
+      loading.delete(name)
+      pending.delete(name)
+      console.error(`[brust] failed to load directive component "${name}":`, e)
+    })
   loading.set(name, p)
 }
 
@@ -180,7 +196,7 @@ function loadBehavior(name: string): void {
 // independently via scanAndMount's shadow-root scan (R10), never inheriting the
 // enclosing instance's scope. (The `el.children` walk below naturally excludes
 // shadow content; this is by design, not an accident.)
-function bindTree(el: HTMLElement, instance: Instance, disposers: Array<() => void>): void {
+function bindTree(el: Element, instance: Instance, disposers: Array<() => void>): void {
   // Coexistence check MUST precede the x-for early-exit, else x-for preempts and the
   // warn never fires. Strip x-if so x-for's template clones don't carry it either.
   if (el.hasAttribute('x-if') && el.hasAttribute('x-for')) {
@@ -197,7 +213,7 @@ function bindTree(el: HTMLElement, instance: Instance, disposers: Array<() => vo
   }
   bindAttrs(el, instance, disposers)
   for (const child of Array.from(el.children)) {
-    if (!(child instanceof HTMLElement)) continue
+    if (!(child instanceof Element)) continue
     if (child.hasAttribute('x-data')) continue
     bindTree(child, instance, disposers)
   }
@@ -243,7 +259,7 @@ export function parseFor(raw: string): ForExpr | null {
 }
 
 interface ForEntry {
-  node: HTMLElement
+  node: Element
   itemSig: Signal<unknown>
   idxSig?: Signal<number>
   disposers: Array<() => void>
@@ -259,7 +275,7 @@ const forMountGuard = new WeakMap<Node, Set<string>>()
 // (legacy v1, now with optional plain index). With `by <keypath>...` it is an opt-in
 // keyed reconcile that reuses DOM nodes (focus/scroll survive) and is reactive
 // per-item via a per-clone `signal(item)` resolved through `read`'s unwrap-each-hop.
-function bindFor(tplEl: HTMLElement, instance: Instance, disposers: Array<() => void>): void {
+function bindFor(tplEl: Element, instance: Instance, disposers: Array<() => void>): void {
   const expr = parseFor(tplEl.getAttribute('x-for') ?? '')
   if (!expr) {
     console.warn(`[brust] malformed x-for expression: "${tplEl.getAttribute('x-for')}"`)
@@ -292,12 +308,12 @@ function bindFor(tplEl: HTMLElement, instance: Instance, disposers: Array<() =>
   const anchor = tplEl.ownerDocument.createComment(`x-for:${itemName}`)
   parent.insertBefore(anchor, tplEl)
   tplEl.removeAttribute('x-for')
-  const template = tplEl.cloneNode(true) as HTMLElement
+  const template = tplEl.cloneNode(true) as Element
   tplEl.remove()
 
   // ---- legacy (no `by`) — full re-render, with optional plain index ----
   if (!keyPaths) {
-    const rendered: HTMLElement[] = []
+    const rendered: Element[] = []
     const childDisposers: Array<() => void> = []
     const clear = () => {
       for (const d of childDisposers.splice(0)) {
@@ -315,7 +331,7 @@ function bindFor(tplEl: HTMLElement, instance: Instance, disposers: Array<() =>
         const list = read(instance, listPath)
         if (!Array.isArray(list)) return
         for (let i = 0; i < list.length; i++) {
-          const clone = template.cloneNode(true) as HTMLElement
+          const clone = template.cloneNode(true) as Element
           const childScope: Instance = Object.create(instance)
           childScope[itemName] = list[i]
           if (indexName) childScope[indexName] = i
@@ -340,7 +356,7 @@ function installKeyedReconcile(
   instance: Instance,
   parent: Node,
   expr: ForExpr,
-  template: HTMLElement,
+  template: Element,
   anchor: Comment,
   initialMap: Map<string, ForEntry>,
   disposers: Array<() => void>,
@@ -382,7 +398,7 @@ function installKeyedReconcile(
           live.delete(key)
           next.set(key, existing)
         } else {
-          const clone = template.cloneNode(true) as HTMLElement
+          const clone = template.cloneNode(true) as Element
           const itemSig = signal(item)
           const idxSig = indexName ? signal(i) : undefined
           const childScope: Instance = Object.create(instance)
@@ -409,11 +425,11 @@ function installKeyedReconcile(
  *  `data-x-key-0`). Only direct children — the key attr lives on the for-item
  *  root, never a descendant. The x-for match prevents a sibling x-for list under
  *  the same parent from having its seeds consumed by this one. */
-function collectSeeds(parent: Node, keyPaths: string[], xforRaw: string): HTMLElement[] {
+function collectSeeds(parent: Node, keyPaths: string[], xforRaw: string): Element[] {
   const sel = keyPaths.length > 1 ? '[data-x-key-0]' : '[data-x-key]'
-  const out: HTMLElement[] = []
+  const out: Element[] = []
   for (const c of Array.from((parent as Element).children ?? [])) {
-    if (c instanceof HTMLElement && c.matches(sel) && c.getAttribute('x-for') === xforRaw) {
+    if (c instanceof Element && c.matches(sel) && c.getAttribute('x-for') === xforRaw) {
       out.push(c)
     }
   }
@@ -422,14 +438,14 @@ function collectSeeds(parent: Node, keyPaths: string[], xforRaw: string): HTMLEl
 
 /** The seed's key from markup — must match the reconcile's computed key (single
  *  `data-x-key`, OR `data-x-key-*` joined with `\x00` IN JS — NUL never in HTML). */
-function seedKey(node: HTMLElement, keyPaths: string[]): string {
+function seedKey(node: Element, keyPaths: string[]): string {
   if (keyPaths.length > 1) {
     return keyPaths.map((_, i) => node.getAttribute(`data-x-key-${i}`) ?? '').join('\x00')
   }
   return node.getAttribute('data-x-key') ?? ''
 }
 
-function stripKeyAttrs(el: HTMLElement, keyPaths: string[]): void {
+function stripKeyAttrs(el: Element, keyPaths: string[]): void {
   if (keyPaths.length > 1) {
     for (let i = 0; i < keyPaths.length; i++) el.removeAttribute(`data-x-key-${i}`)
   } else {
@@ -440,10 +456,10 @@ function stripKeyAttrs(el: HTMLElement, keyPaths: string[]): void {
 /** Bind an adopted seed node as a plain subtree. The node KEEPS its x-for attr so
  *  the parent bindTree loop's later re-visit routes back to bindFor → mount guard
  *  no-ops; do NOT route the node itself through bindFor again here. */
-function bindAdoptedNode(node: HTMLElement, scope: Instance, disposers: Array<() => void>): void {
+function bindAdoptedNode(node: Element, scope: Instance, disposers: Array<() => void>): void {
   bindAttrs(node, scope, disposers)
   for (const child of Array.from(node.children)) {
-    if (!(child instanceof HTMLElement)) continue
+    if (!(child instanceof Element)) continue
     if (child.hasAttribute('x-data')) continue
     bindTree(child, scope, disposers)
   }
@@ -453,7 +469,7 @@ function bindAdoptedNode(node: HTMLElement, scope: Instance, disposers: Array<()
  *  each item-signal from the matching client item by key, wire reactivity, then
  *  hand the pre-populated map to the shared reconcile (first run = all reused). */
 function bindForAdopt(
-  seeds: HTMLElement[],
+  seeds: Element[],
   instance: Instance,
   parent: Node,
   expr: ForExpr,
@@ -469,7 +485,7 @@ function bindForAdopt(
   }
   const keys = keyPaths as string[]
   // template for future creates: stripped clone of the first seed.
-  const template = seeds[0].cloneNode(true) as HTMLElement
+  const template = seeds[0].cloneNode(true) as Element
   template.removeAttribute('x-for')
   stripKeyAttrs(template, keys)
   // anchor AFTER the last seed so future inserts keep document order.
@@ -489,7 +505,7 @@ function bindForAdopt(
   // adopt each seed in place.
   const map = new Map<string, ForEntry>()
   for (let si = 0; si < seeds.length; si++) {
-    const node = seeds[si] as HTMLElement
+    const node = seeds[si] as Element
     let key = seedKey(node, keys)
     if (map.has(key)) {
       // mirror the reconcile's dup-key handling: suffix so the entry is tracked
@@ -518,15 +534,15 @@ function bindForAdopt(
  * the node and runs those disposers. The per-clone disposers cover only non-x-data
  * teardown (bindTree skips nested x-data); nested x-data dispose/mount is delegated
  * to the MutationObserver on removal/insert — single-owner discipline. */
-function bindIf(el: HTMLElement, instance: Instance, disposers: Array<() => void>): void {
+function bindIf(el: Element, instance: Instance, disposers: Array<() => void>): void {
   const path = el.getAttribute('x-if') ?? ''
   const parent = el.parentNode
   if (!parent) return
   const anchor = el.ownerDocument.createComment('x-if')
   parent.insertBefore(anchor, el)
   el.removeAttribute('x-if')
-  const template = el.cloneNode(true) as HTMLElement // capture FIRST (before initial effect)
-  let current: HTMLElement | null = el // the original, adopted if initially truthy
+  const template = el.cloneNode(true) as Element // capture FIRST (before initial effect)
+  let current: Element | null = el // the original, adopted if initially truthy
   let bound = false // original starts unbound; clones are bound at creation
   const currentDisposers: Array<() => void> = []
   const teardown = () => {
@@ -557,7 +573,7 @@ function bindIf(el: HTMLElement, instance: Instance, disposers: Array<() => void
         }
         return
       }
-      const clone = template.cloneNode(true) as HTMLElement
+      const clone = template.cloneNode(true) as Element
       bindTree(clone, instance, currentDisposers) // bind BEFORE insert (observer mounts nested x-data after)
       anchor.parentNode?.insertBefore(clone, anchor.nextSibling)
       current = clone
@@ -657,13 +673,14 @@ function bindModel(
   )
 }
 
-function bindAttrs(el: HTMLElement, scope: Instance, disposers: Array<() => void>): void {
+function bindAttrs(el: Element, scope: Instance, disposers: Array<() => void>): void {
   for (const attr of Array.from(el.attributes)) {
     const name = attr.name
     const value = attr.value
     if (name === 'x-data' || name === 'x-props') continue
     if (name === 'x-model') {
-      bindModel(el, scope, value, disposers)
+      if (el instanceof HTMLElement) bindModel(el, scope, value, disposers)
+      else console.warn('[brust] x-model is only supported on HTML elements — binding skipped')
       continue
     }
     if (name === 'x-text') {
@@ -678,7 +695,11 @@ function bindAttrs(el: HTMLElement, scope: Instance, disposers: Array<() => void
     if (name === 'x-show') {
       disposers.push(
         effect(() => {
-          el.style.display = read(scope, value) ? '' : 'none'
+          if ('style' in el) {
+            ;(el as Element & { style: CSSStyleDeclaration }).style.display = read(scope, value)
+              ? ''
+              : 'none'
+          }
         }),
       )
       continue
@@ -718,40 +739,40 @@ function observeRoot(root: Node): void {
   const obs = new MutationObserver((records) => {
     for (const rec of records) {
       for (const node of Array.from(rec.removedNodes)) {
-        if (node instanceof HTMLElement) disposeTree(node)
+        if (node instanceof Element) disposeTree(node)
       }
       for (const node of Array.from(rec.addedNodes)) {
-        if (node instanceof HTMLElement) scanAndMount(node)
+        if (node instanceof Element) scanAndMount(node)
       }
     }
   })
   obs.observe(root, { childList: true, subtree: true })
 }
 
-function disposeTree(node: HTMLElement): void {
+function disposeTree(node: Element): void {
   if (mounted.has(node)) disposeElement(node)
-  for (const el of Array.from(node.querySelectorAll<HTMLElement>('[x-data]'))) {
+  for (const el of Array.from(node.querySelectorAll<Element>('[x-data]'))) {
     disposeElement(el)
   }
   // R10 — a removed HOST's shadow contents never reach any observer: the host's
   // removal fires on the light tree's observer, and the shadow root's own
   // observer only sees mutations INSIDE the root. Walk shadow roots explicitly.
   if (node.shadowRoot) disposeShadowContents(node.shadowRoot)
-  for (const el of Array.from(node.querySelectorAll<HTMLElement>('*'))) {
+  for (const el of Array.from(node.querySelectorAll<Element>('*'))) {
     if (el.shadowRoot) disposeShadowContents(el.shadowRoot)
   }
 }
 
 function disposeShadowContents(root: ShadowRoot): void {
-  for (const el of Array.from(root.querySelectorAll<HTMLElement>('[x-data]'))) {
+  for (const el of Array.from(root.querySelectorAll<Element>('[x-data]'))) {
     disposeElement(el)
   }
-  for (const el of Array.from(root.querySelectorAll<HTMLElement>('*'))) {
+  for (const el of Array.from(root.querySelectorAll<Element>('*'))) {
     if (el.shadowRoot) disposeShadowContents(el.shadowRoot)
   }
 }
 
-function disposeElement(el: HTMLElement): void {
+function disposeElement(el: Element): void {
   const m = mounted.get(el)
   if (!m) return
   for (const d of m.disposers.splice(0)) {
@@ -766,15 +787,19 @@ function disposeElement(el: HTMLElement): void {
 
 const BOOL_PROPS = new Set(['disabled', 'checked', 'hidden', 'readonly', 'required', 'selected'])
 
-/** Apply a bound value to a DOM attr/property. class → className; boolean props →
- * property (when present) + attribute presence; value → property; else attribute. */
-export function setBound(el: HTMLElement, attr: string, value: unknown): void {
+/** Apply a bound value to a DOM attr/property. class → HTML className or a
+ * namespace-safe attribute; boolean/value properties are used only when present. */
+export function setBound(el: Element, attr: string, value: unknown): void {
   if (attr === 'class') {
-    el.className = value == null ? '' : String(value)
+    if (el instanceof HTMLElement) el.className = value == null ? '' : String(value)
+    else if (value == null) el.removeAttribute('class')
+    else el.setAttribute('class', String(value))
     return
   }
   if (attr === 'value') {
-    ;(el as unknown as { value: unknown }).value = value == null ? '' : value
+    if ('value' in el) (el as unknown as { value: unknown }).value = value == null ? '' : value
+    else if (value == null) el.removeAttribute(attr)
+    else el.setAttribute(attr, String(value))
     return
   }
   if (BOOL_PROPS.has(attr)) {

package/types/cli/native-routes-emit.d.ts

@@ -1,3 +1,4 @@
+export declare function formatCompilerWarning(warning: string): string;
 /** Gather transitive component sources starting from a page source file.
  *
  * BFS/DFS over local imports reachable from `pageSourcePath`:

package/types/native/runtime.d.ts

@@ -6,17 +6,17 @@ export type Instance = Record<string, unknown>;
  *                    for side-effects on signal change (sync localStorage, the DOM
  *                    outside the component, timers). Returns the disposer too.
  *  - `onCleanup(fn)` — register a one-shot teardown for unmount (e.g. removeEventListener). */
-export interface BehaviorCtx {
-    el: HTMLElement;
+export interface BehaviorCtx<Host extends Element = HTMLElement> {
+    el: Host;
     props: unknown;
     effect: (fn: () => void | (() => void)) => () => void;
     onCleanup: (fn: () => void) => void;
 }
-export type Behavior = (ctx: BehaviorCtx) => Instance;
+export type Behavior<Host extends Element = HTMLElement> = (ctx: BehaviorCtx<Host>) => Instance;
 /** Register a component behavior under `name`. Called by `<name>.directive.js` chunks
  * via the global handle below (they do NOT import this module — keeps each chunk to
  * just its behavior, with the runtime shared as the single `_directives.js` copy). */
-export declare function register(name: string, behavior: Behavior): void;
+export declare function register<Host extends Element = HTMLElement>(name: string, behavior: Behavior<Host>): void;
 /** Scan `root` (default: document) for [x-data], mount each, and (once) attach a
  * MutationObserver for dynamic mount/dispose. Idempotent. NOTE: `root` scopes the
  * INITIAL scan only; the observer always watches the global `document.body` (one
@@ -39,9 +39,9 @@ export declare function parseFor(raw: string): ForExpr | null;
  * for multi-hop paths). The LEAF is never called: `isSignal(leaf)` → `.set(value)`,
  * else warn once and skip. */
 export declare function writePath(scope: Instance, path: string, value: unknown): void;
-/** Apply a bound value to a DOM attr/property. class → className; boolean props →
- * property (when present) + attribute presence; value → property; else attribute. */
-export declare function setBound(el: HTMLElement, attr: string, value: unknown): void;
+/** Apply a bound value to a DOM attr/property. class → HTML className or a
+ * namespace-safe attribute; boolean/value properties are used only when present. */
+export declare function setBound(el: Element, attr: string, value: unknown): void;
 /** Walk a dotted member path against `scope`, unwrapping a signal/computed at EVERY
  * hop (so an intermediate item-signal is tracked by `effect`); at the LEAF also call
  * a plain function to obtain its value (this read is what `effect` tracks). */