@vmz/core 0.1.16 → 0.1.18

package/dist/dom-core.d.ts

@@ -153,14 +153,14 @@ export declare const directApi: {
      */
     projectDefaultSlot(hostEl: any, node: any): void;
     /**
-     * Direct if/else — no blueprint `kind: "if"` dispatch.
+     * Direct if/else — comment anchors (no empty `span[data-vmz-if]` layout box).
      * @param {object} inst
      * @param {number|string|null} bindingId
      * @param {string[]} deps
      * @param {Array<{ cond?: => any, create: (api: typeof directApi) => Node }>} branches
      * @param {number|string|null} [regionId]
      */
-    ifBlock(inst: any, bindingId: any, deps: any, branches: any, regionId?: any): HTMLSpanElement;
+    ifBlock(inst: any, bindingId: any, deps: any, branches: any, regionId?: any): DocumentFragment;
     /**
      * Direct keyed each — no blueprint `kind: "each"` dispatch.
      * /: Set/Map + Fragment batch insert; item-local binds; host field dispatch; event delegate.
@@ -172,6 +172,13 @@ export declare const directApi: {
      */
     eachBlock(inst: any, bindingId: any, deps: any, spec: any, regionId?: any): DocumentFragment;
 };
+/**
+ * Vue-familiar `@click` / legacy `onClick` → canonical `onXxx` prop name.
+ * Function props that are not events are treated as getters (`v.call(host)`).
+ * @param {unknown} name
+ * @returns {string | null}
+ */
+export declare function eventPropHandlerName(name: any): string;
 export declare function isEventPropName(name: any): boolean;
 /** HTML boolean attributes: presence means true; `false`/`null` must remove the attr. */
 export declare const BOOLEAN_HTML_ATTRS: Set<string>;

package/dist/dom-core.js

@@ -9,6 +9,12 @@
  */
 /** @type {Record<string, new (props?: object) => any>} */
 const components = Object.create(null);
+/**
+ * Inline chip hosts that opt into `display: contents` (`ui-direct-host-box`).
+ * Block surfaces (DataTable / shells / overlays) must keep a real layout box.
+ * @type {Set<string>}
+ */
+const INLINE_HOST_CONTENTS = new Set(['Button', 'Badge', 'Link', 'Tag', 'Icon']);
 /**
  * Precision lab counters (test / MCP / benchmarks — not a user API).
  * Primary keys: BindingId (IR). `*ByDep` is transitional stable-string adapter.
@@ -428,8 +434,9 @@ export const directApi = {
         /** @type {Record<string, any>} */
         const resolved = {};
         for (const [k, v] of Object.entries(props || {})) {
-            if (typeof v === 'function' && isEventPropName(k))
-                resolved[k] = v;
+            const onKey = typeof v === 'function' ? eventPropHandlerName(k) : null;
+            if (onKey)
+                resolved[onKey] = v;
             else if (typeof v === 'function')
                 resolved[k] = v.call(hostInst);
             else
@@ -454,6 +461,13 @@ export const directApi = {
         const Ctor = components[name];
         if (!Ctor)
             throw new Error(`vmz:dom unknown component <${name} />`);
+        // Inline chips opt into no-box host (`ui-direct-host-box`). Block surfaces
+        // (tables/shells/overlays) keep a real box — default `contents` breaks
+        // hit-testing / slot hosts (DataTable select timed out in ui-automation).
+        const hostBox = Ctor.__vmzHostBox;
+        if (hostBox === 'contents' || (hostBox == null && INLINE_HOST_CONTENTS.has(String(name)))) {
+            host.style.display = 'contents';
+        }
         const child = createInstance(Ctor, resolved);
         if (!(Ctor.__vmzDirect && typeof Ctor.__vmzCreate === 'function')) {
             throw new Error(`vmz:dom direct component <${name}> requires __vmzCreate (rebuild child with Direct)`);
@@ -539,7 +553,7 @@ export const directApi = {
             hostEl.appendChild(node);
     },
     /**
-     * Direct if/else — no blueprint `kind: "if"` dispatch.
+     * Direct if/else — comment anchors (no empty `span[data-vmz-if]` layout box).
      * @param {object} inst
      * @param {number|string|null} bindingId
      * @param {string[]} deps
@@ -548,10 +562,22 @@ export const directApi = {
      */
     ifBlock(inst, bindingId, deps, branches, regionId = null) {
         noteDomCreate();
-        const host = document.createElement('span');
-        host.setAttribute('data-vmz-if', '');
+        const start = document.createComment('vmz-if');
+        const end = document.createComment('/vmz-if');
         if (regionId != null)
-            host.setAttribute('data-vmz-region', String(regionId));
+            start.__vmzRegion = regionId;
+        const frag = document.createDocumentFragment();
+        frag.appendChild(start);
+        /** @type {HTMLElement | null} */
+        let regionHost = null;
+        if (regionId != null) {
+            // Queryable region marker without a layout box (`display: contents`).
+            regionHost = document.createElement('span');
+            regionHost.style.display = 'contents';
+            regionHost.setAttribute('data-vmz-region', String(regionId));
+            frag.appendChild(regionHost);
+        }
+        frag.appendChild(end);
         /** @type {Array<Node | null>} */
         const cached = branches.map(() => null);
         /** @type {Array<Array<{ deps: string[], fn: => any, bindingId?: number|string|null }>>} */
@@ -634,14 +660,18 @@ export const directApi = {
             if (next < 0)
                 return;
             wireBranch(next);
-            if (cached[next])
-                host.appendChild(cached[next]);
+            if (cached[next] && end.parentNode) {
+                if (regionHost)
+                    regionHost.appendChild(cached[next]);
+                else
+                    end.parentNode.insertBefore(cached[next], end);
+            }
         };
         registerBind(inst, deps || [], apply, bindingId);
         if (directApi._itemPatches)
             directApi._itemPatches.push(apply);
         // parent destroy disposes all cached branch trees (pause ≠ destroy on switch).
-        host.__vmzDispose = () => {
+        start.__vmzDispose = () => {
             for (let i = 0; i < cached.length; i++) {
                 unwireBranch(i);
                 if (cached[i])
@@ -651,7 +681,7 @@ export const directApi = {
             active = -1;
         };
         apply();
-        return host;
+        return frag;
     },
     /**
      * Direct keyed each — no blueprint `kind: "each"` dispatch.
@@ -2616,8 +2646,28 @@ function wireDirectBind(inst, bindingId, deps, get, write, cf) {
     apply();
     trackDirectBind(inst, liveDeps, apply, bindingId);
 }
+/**
+ * Vue-familiar `@click` / legacy `onClick` → canonical `onXxx` prop name.
+ * Function props that are not events are treated as getters (`v.call(host)`).
+ * @param {unknown} name
+ * @returns {string | null}
+ */
+export function eventPropHandlerName(name) {
+    if (typeof name !== 'string' || !name)
+        return null;
+    if (/^on[A-Z]/.test(name))
+        return name;
+    // `@input` → `onInput`; reject `@update:modelValue` until that surface exists.
+    if (name.charAt(0) === '@' && name.length > 1 && !name.includes(':')) {
+        const ev = name.slice(1);
+        if (!ev || !/^[A-Za-z]/.test(ev))
+            return null;
+        return `on${ev.charAt(0).toUpperCase()}${ev.slice(1)}`;
+    }
+    return null;
+}
 export function isEventPropName(name) {
-    return typeof name === 'string' && /^on[A-Z]/.test(name);
+    return eventPropHandlerName(name) != null;
 }
 /** Monotonic id for `bindComponentProp` BindingIds (per process). */
 let directPropBindSeq = 0;

package/dist/dom-ssr.js

@@ -3,7 +3,7 @@
  * VMZ DOM SSR / hydrate / resume — precise patches, no VDOM diff.
  * Imports client DOM primitives from ./dom-core.js for tree-shakeable browser entry.
  */
-import { applyDomAttr, applyPreservedState, BOOLEAN_HTML_ATTRS, createInstance, destroy, directApi, getRegisteredComponent, hasMeaningfulChild, isEventEntryStrategy, isEventPropName, mount, noteDomCreate, resolveComponent, runDirectCreate, scheduleClientOn, settlePendingChildMounts, snapshotInstanceState, stripFns, } from './dom-core.js';
+import { applyDomAttr, applyPreservedState, BOOLEAN_HTML_ATTRS, createInstance, destroy, directApi, eventPropHandlerName, getRegisteredComponent, hasMeaningfulChild, isEventEntryStrategy, mount, noteDomCreate, resolveComponent, runDirectCreate, scheduleClientOn, settlePendingChildMounts, snapshotInstanceState, stripFns, } from './dom-core.js';
 /** @type {Error | null} last linkedom resolve failure (for clear SSR errors) */
 let _ssrDocumentLastError = null;
 /**
@@ -671,16 +671,8 @@ const serializeApi = {
         el.children = [];
     },
     ifBlock(inst, bindingId, deps, branches) {
-        const host = {
-            __kind: 'el',
-            tag: 'span',
-            attrs: { 'data-vmz-if': '' },
-            children: [],
-            appendChild(c) {
-                if (c != null)
-                    this.children.push(c);
-            },
-        };
+        // No empty `span[data-vmz-if]` box (`ui-vif-dom`): false → empty frag.
+        const frag = serializeApi.frag();
         let idx = -1;
         for (let i = 0; i < branches.length; i++) {
             const b = branches[i];
@@ -701,9 +693,9 @@ const serializeApi = {
         if (idx >= 0 && branches[idx].create) {
             const created = branches[idx].create.call(inst, serializeApi);
             if (created)
-                host.children.push(created);
+                frag.appendChild(created);
         }
-        return host;
+        return frag;
     },
     eachBlock(inst, bindingId, deps, spec) {
         const frag = serializeApi.frag();
@@ -755,7 +747,8 @@ const serializeApi = {
         /** @type {Record<string, any>} */
         const resolved = {};
         for (const [k, v] of Object.entries(props || {})) {
-            if (typeof v === 'function' && isEventPropName(k))
+            const onKey = typeof v === 'function' ? eventPropHandlerName(k) : null;
+            if (onKey)
                 continue;
             else if (typeof v === 'function')
                 resolved[k] = v.call(hostInst);
@@ -815,10 +808,17 @@ const serializeApi = {
             serializeApi._inst = child;
             try {
                 const node = Ctor.__vmzCreate.call(child, serializeApi);
+                /** @type {Record<string, string>} */
+                const attrs = { 'data-vmz': name };
+                const hostBox = Ctor.__vmzHostBox;
+                if (hostBox === 'contents' ||
+                    (hostBox == null && (name === 'Button' || name === 'Badge' || name === 'Link' || name === 'Tag' || name === 'Icon'))) {
+                    attrs.style = 'display:contents';
+                }
                 return {
                     __kind: 'el',
                     tag: 'div',
-                    attrs: { 'data-vmz': name },
+                    attrs,
                     children: node ? [node] : [],
                     appendChild(c) {
                         if (c != null)

package/dist/serve-host.mjs

@@ -211,6 +211,22 @@ async function renderPage(pathname, opts = {}) {
  * @returns {Promise<{ status: number, stream?: AsyncGenerator<string, void, void>, redirect?: string, headers?: Record<string, string> } | null>}
  */
 async function renderPageStream(pathname, opts = {}) {
+    try {
+        return await renderPageStreamInner(pathname, opts);
+    }
+    catch (err) {
+        const normalized = normalizeDevError(err);
+        lastDevError = normalized;
+        console.error('vmz serve: renderPageStream failed', normalized.message);
+        return { status: 500, stream: emitDevErrorHtml(normalized) };
+    }
+}
+/**
+ * @param {string} pathname
+ * @param {{ signal?: AbortSignal, searchParams?: URLSearchParams, cookieHeader?: string, method?: string, body?: unknown }} [opts]
+ * @returns {Promise<{ status: number, stream?: AsyncGenerator<string, void, void>, redirect?: string, headers?: Record<string, string> } | null>}
+ */
+async function renderPageStreamInner(pathname, opts = {}) {
     if (isDev && lastDevError && pageCtors.size === 0) {
         return { status: 500, stream: emitDevErrorHtml(lastDevError) };
     }
@@ -945,7 +961,7 @@ async function* emitDevErrorHtml(err) {
     .hint{opacity:.65;font-size:12px}
   </style>`;
     const body = `${style}
-  <main>
+  <main data-vmz-error="500">
     <h1>Dev Error</h1>
     <pre>${msg}</pre>
     ${stack ? `<pre style="opacity:.7;font-size:12px">${stack}</pre>` : ''}
@@ -961,17 +977,23 @@ async function* emitDevErrorHtml(err) {
     };
   })();
   </script>`;
-    const native = loadNativeAddon();
-    if (typeof native.generateHtmlShell !== 'function') {
-        throw new Error('vmz native addon missing generateHtmlShell — rebuild with `pnpm napi:build`');
+    try {
+        const native = loadNativeAddon();
+        if (typeof native.generateHtmlShell === 'function') {
+            yield native.generateHtmlShell({
+                title: 'Dev Error',
+                lang: 'en',
+                cssHrefs: [],
+                bodyHtml: body,
+                bodyAttrs: [],
+            });
+            return;
+        }
     }
-    yield native.generateHtmlShell({
-        title: 'Dev Error',
-        lang: 'en',
-        cssHrefs: [],
-        bodyHtml: body,
-        bodyAttrs: [],
-    });
+    catch {
+        /* fall through to plain HTML — never throw from the error page itself */
+    }
+    yield `<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>Dev Error</title></head><body>${body}</body></html>`;
 }
 /** @param {string} s */
 function escapeHtml(s) {

package/dist/server.js

@@ -328,7 +328,12 @@ export async function handleNodeRequest(req, res, opts = {}) {
             }
         }
         if (!res.headersSent) {
-            sendJson(res, 404, { error: 'not found', path: url.pathname });
+            if (wantsBrowserHtml(req)) {
+                sendHtml(res, 404, browserErrorHtml(404, 'Not Found', `No page matched ${url.pathname}`));
+            }
+            else {
+                sendJson(res, 404, { error: 'not found', path: url.pathname });
+            }
         }
     }
     catch (err) {
@@ -342,9 +347,14 @@ export async function handleNodeRequest(req, res, opts = {}) {
             }
             return;
         }
-        sendJson(res, 500, {
-            error: err instanceof Error ? err.message : String(err),
-        });
+        const message = err instanceof Error ? err.message : String(err);
+        const stack = err instanceof Error ? err.stack : undefined;
+        if (wantsBrowserHtml(req)) {
+            sendHtml(res, 500, browserErrorHtml(500, 'Dev Error', message, stack));
+        }
+        else {
+            sendJson(res, 500, { error: message });
+        }
     }
 }
 /**
@@ -585,7 +595,7 @@ function parseMultipartBuffer(buf, contentType) {
         const splitAt = indexOfBuffer(part, Buffer.from('\r\n\r\n'), 0);
         if (splitAt >= 0) {
             const headerText = part.subarray(0, splitAt).toString('utf8');
-            let body = part.subarray(splitAt + 4);
+            const body = part.subarray(splitAt + 4);
             const nameM = /content-disposition:[^\r\n]*;\s*name="([^"]*)"/i.exec(headerText);
             const fileM = /content-disposition:[^\r\n]*;\s*filename="([^"]*)"/i.exec(headerText);
             const typeM = /content-type:\s*([^\r\n]+)/i.exec(headerText);
@@ -657,6 +667,73 @@ function parseFormBody(raw, contentType) {
         return { raw };
     }
 }
+/**
+ * @param {import('node:http').IncomingMessage} req
+ * @returns {boolean}
+ */
+function wantsBrowserHtml(req) {
+    const accept = String(req.headers?.accept || '');
+    const method = String(req.method || 'GET').toUpperCase();
+    if (method !== 'GET' && method !== 'HEAD')
+        return false;
+    // Document navigations: browsers send text/html and/or Sec-Fetch-Dest: document.
+    // Bare `*/*` / empty Accept (Node fetch, many API clients) must stay JSON.
+    const dest = String(req.headers?.['sec-fetch-dest'] || '');
+    const mode = String(req.headers?.['sec-fetch-mode'] || '');
+    if (dest === 'document' || mode === 'navigate')
+        return true;
+    if (!accept || accept === '*/*')
+        return false;
+    const html = accept.includes('text/html');
+    const json = accept.includes('application/json');
+    if (html && !json)
+        return true;
+    if (html && json) {
+        const hi = accept.indexOf('text/html');
+        const ji = accept.indexOf('application/json');
+        return hi <= ji;
+    }
+    return false;
+}
+/**
+ * Browser-facing error document (no N-API). Used when SSR returns null or throws
+ * on a document navigation — must not fall back to API-shaped JSON.
+ * @param {number} status
+ * @param {string} title
+ * @param {string} message
+ * @param {string} [stack]
+ */
+function browserErrorHtml(status, title, message, stack) {
+    const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+    const stackBlock = stack ? `<pre class="stack">${esc(stack)}</pre>` : '';
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>${esc(title)}</title>
+  <style>
+    body{margin:0;background:#0f1115;color:#f4f4f5;font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+    main{max-width:56rem;margin:0 auto;padding:2rem 1.25rem}
+    h1{margin:0 0 .75rem;color:#f87171;font-size:1.1rem}
+    .code{opacity:.65;font-size:12px;margin-bottom:.75rem}
+    pre{white-space:pre-wrap;margin:0 0 1rem}
+    .stack{opacity:.7;font-size:12px}
+    .hint{opacity:.65;font-size:12px}
+  </style>
+</head>
+<body data-vmz-error="${status}">
+  <main>
+    <p class="code">HTTP ${status}</p>
+    <h1>${esc(title)}</h1>
+    <pre>${esc(message)}</pre>
+    ${stackBlock}
+    <p class="hint">Document navigation returns HTML errors — not API JSON.</p>
+  </main>
+</body>
+</html>
+`;
+}
 /**
  * @param {import('node:http').ServerResponse} res
  * @param {number} status

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vmz/core",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "type": "module",
   "description": "VMZ production runtime core — DOM / SSR / HTTP / WriteBarrier (no compiler)",
   "exports": {
@@ -58,12 +58,12 @@
     "linkedom": "^0.18.13"
   },
   "optionalDependencies": {
-    "@vmz/vmz-win32-x64": "0.1.16",
-    "@vmz/vmz-win32-arm64": "0.1.16",
-    "@vmz/vmz-darwin-x64": "0.1.16",
-    "@vmz/vmz-darwin-arm64": "0.1.16",
-    "@vmz/vmz-linux-x64": "0.1.16",
-    "@vmz/vmz-linux-arm64": "0.1.16"
+    "@vmz/vmz-win32-x64": "0.1.18",
+    "@vmz/vmz-win32-arm64": "0.1.18",
+    "@vmz/vmz-darwin-x64": "0.1.18",
+    "@vmz/vmz-darwin-arm64": "0.1.18",
+    "@vmz/vmz-linux-x64": "0.1.18",
+    "@vmz/vmz-linux-arm64": "0.1.18"
   },
   "publishConfig": {
     "access": "public"