sygnal 6.2.0 → 6.3.0

package/src/extra/diagnostics/codes.ts

@@ -276,6 +276,10 @@ export const CODE_TITLES: Record<string, string> = {
   SYG423: 'Context change skipped a view whose output it changes',
   SYG424: 'Duplicate Collection item id',
   SYG425: 'isolatedState slice lacks initialState keys',
+  // PLAN-9 (D471): checks/next.ts; dev entry and sygnal-check
+  SYG426: 'Deprecated lowercase marker tag',
+  // PLAN-9 (D470): checks/next.ts; dev entry
+  SYG453: 'Two children with the same identity share one instance',
   SYG601: "Retired in 6.0: Missing or invalid sources",
   SYG602: 'Intent is not a function',
   SYG603: 'Intent returned an invalid value',
@@ -339,6 +343,29 @@ export const CODE_TITLES: Record<string, string> = {
   // PLAN-6 A-2: experimentalExposeWebMcp (src/extra/ai/webmcp.ts; dev)
   SYG674: 'WebMCP not available',
   SYG676: 'WebMCP registerTool rejected',
+  // ---- PLAN-9 compose (A: src/extra/ai/compose/; dev, reported with the severity passed) ----
+  SYG161: 'Catalog container render is a component with a model',
+  SYG162: 'Catalog part with neither component nor render',
+  SYG250: 'Layout names an unknown part or slot',
+  SYG251: 'Invalid param value in a layout',
+  SYG252: 'Record param from() does not return an array of { value }',
+  SYG450: 'Catalog in names an unknown container or slot',
+  SYG451: 'Composed has no catalog or from is not a composition',
+  SYG452: 'Layout lists a node key twice',
+  SYG681: 'Compose backend option problem',
+  // PLAN-9 B-1/B-2: compose.decisions() (src/extra/ai/compose/decisions.ts; explicit severities)
+  SYG680: 'Part is LLM-only under a decision backend',
+  SYG682: 'Decision model answered outside the criteria',
+  // PLAN-9 B-3: compose.llm() (src/extra/ai/compose/llm.ts; the compose status becomes 'error')
+  SYG683: 'LLM layout invalid after repair',
+  // PLAN-9 X-2: static only (sygnal-check rules/syg253-catalog.js)
+  SYG253: 'Misspelled catalog declaration key',
+  SYG254: 'Catalog descriptions or options overlap',
+  // PLAN-9 H: chat client tools and ask (src/extra/ai/chat/behavior.ts, compose/ask.ts, compose/render.ts)
+  SYG160: 'Result part rendered outside a card',
+  SYG684: 'Client tool shadows an agent tool',
+  SYG685: 'Answer for a tool call that is not open',
+  SYG686: 'Ask catalog without a result part',
   // PLAN-4 GS-3: a11y lane (static only, sygnal-check)
   SYG701: 'Click listener on a non-interactive element',
   SYG702: 'Form field without an accessible label',
@@ -457,6 +484,10 @@ export const DEV_CODE_SEVERITY: Record<string, DiagnosticSeverity> = {
   SYG423: 'warn',
   SYG424: 'warn',
   SYG425: 'warn',
+  // PLAN-9 (checks/next.ts): D471 a lowercase <collection> / <switchable> tag (deprecated in 6.3.0)
+  SYG426: 'warn',
+  // PLAN-9 (checks/next.ts): D470 key identity, two children with one identity
+  SYG453: 'warn',
   SYG612: 'error',
   // PLAN-4 D131 (element.ts, through the core bridge; a console warning in dev with diagnostics off)
   SYG644: 'warn',
@@ -497,6 +528,16 @@ export const DEV_CODE_SEVERITY: Record<string, DiagnosticSeverity> = {
   // PLAN-6 A-2 (experimentalExposeWebMcp reports them with an explicit severity)
   SYG674: 'info',
   SYG676: 'warn',
+  // PLAN-9 B-1/B-2 (compose.decisions() reports them with an explicit severity)
+  SYG680: 'info',
+  SYG682: 'warn',
+  // PLAN-9 B-3 (compose.llm)
+  SYG683: 'error',
+  // PLAN-9 H (chat client tools and ask; reported with the severity passed)
+  SYG160: 'warn',
+  SYG684: 'warn',
+  SYG685: 'warn',
+  SYG686: 'warn',
   // PLAN-5 V-1: VirtualCollection (checks/virtual.ts, through the core bridge)
   SYG430: 'warn',
   SYG431: 'warn',
@@ -528,6 +569,19 @@ export const DEV_CODE_SEVERITY: Record<string, DiagnosticSeverity> = {
   SYG153: 'warn',
   SYG730: 'warn',
   SYG731: 'warn',
+  // ---- PLAN-9 compose (A: src/extra/ai/compose/, reported with the severity passed, dev) ----
+  SYG161: 'error',
+  SYG162: 'error',
+  SYG250: 'warn',
+  SYG251: 'warn',
+  SYG252: 'warn',
+  SYG450: 'warn',
+  SYG451: 'warn',
+  SYG452: 'warn',
+  SYG681: 'error',
+  // PLAN-9 X-2: static only (sygnal-check); listed so the entry knows their titles
+  SYG253: 'warn',
+  SYG254: 'info',
 }
 
 export function getCodeInfo(code: string): DiagnosticCodeInfo | undefined {

package/src/extra/fetchDriver.ts

@@ -81,6 +81,12 @@ import {validateWith} from './standardSchema';
  *   the socket driver's backoff; the failure (with `attempts`) is delivered once, at the end.
  * - `validate: schema` (a Standard Schema): the parsed body is validated (and transformed); a
  *   failure is an error with `issues`.
+ * - D472 (G-757): `batch: [request, …]` sends those requests in parallel instead of this one (each
+ *   inherits its fields; its own `json` / `body` / `parse` win) and `combine(bodies, requests)`
+ *   merges their parsed bodies into the one reply; `split(request, error)` turns a failed one (or
+ *   the request itself) into requests sent again in parallel and combined, at most 3 deep. One
+ *   failure fails the request once (`error.status` / `error.body`). No cache entry sharing, no
+ *   per-part retry. The test fake (`_whole`) sends and answers it as one request. decide() uses it.
  * - dispose / sink completion aborts everything in flight.
  * - `fetch` is read at request time (options.fetch, else globalThis.fetch), so test stubs work.
  * - PLAN-3 5-1 (H-9): renderComponent's HTTP fake runs this driver over an in-memory fetch;
@@ -137,6 +143,15 @@ const autoParse = async (res: any) => {
   return text ? JSON.parse(text) : null;
 };
 
+/** a non-2xx response */
+const bad = (res: any) => res.ok === false || res.status < 200 || res.status > 299;
+/** the failure of a non-2xx response: `status`, `body` (parsed with 'auto') */
+const httpError = async (res: any, href: string) => {
+  let body: any;
+  try { body = await autoParse(res); } catch (_) {}
+  return Object.assign(new Error(`HTTP ${res.status}${res.statusText ? ' ' + res.statusText : ''}: ${href}`), {status: res.status, body});
+};
+
 const PARSERS: Record<string, (res: any) => any> = {
   auto: autoParse,
   json: res => res.json(),
@@ -144,6 +159,8 @@ const PARSERS: Record<string, (res: any) => any> = {
   response: res => res,
 };
 
+const parserOf = (pz: any) => typeof pz == 'function' ? pz : PARSERS[pz] || autoParse;
+
 const pickInit = (init: any) => {
   const out: any = {};
   if (init && typeof init == 'object') INIT_KEYS.forEach(k => { if (init[k] !== undefined) out[k] = init[k]; });
@@ -379,15 +396,23 @@ export function makeFetchDriver(options: any = {}) {
       if (abort) return cancel(r => r.scope === scope && (!('category' in req) || r.category === category));
       if (rn !== undefined || (!pf && (latest ?? options.latest))) cancel(rk === undefined ? r => r.rk === undefined && r.scope === scope && r.category === category : r => r.sender === sender && r.rk === rk);
 
-      const href = withQuery((options.baseUrl || '') + (url ?? ''), query);
-      const base = options.init, own = init;
-      const h = mergeHeaders(options.headers, base?.headers, own?.headers, headers);
-      let b = body ?? own?.body;
-      if (json !== undefined) {
-        b = JSON.stringify(json);
-        if (!Object.keys(h).some(k => k.toLowerCase() == 'content-type')) h['content-type'] = 'application/json';
-      }
-      const m = method || own?.method || base?.method || (b !== undefined ? 'POST' : 'GET');
+      const base = options.init;
+      // a request's URL and fetch() init (the batch's sub-requests inherit the request's fields)
+      const prep = ({url, method, headers, query, json, body, init: own}: any) => {
+        const h = mergeHeaders(options.headers, base?.headers, own?.headers, headers);
+        let b = body ?? own?.body;
+        if (json !== undefined) {
+          b = JSON.stringify(json);
+          if (!Object.keys(h).some(k => k.toLowerCase() == 'content-type')) h['content-type'] = 'application/json';
+        }
+        return [withQuery((options.baseUrl || '') + (url ?? ''), query), {...pickInit(base), ...pickInit(own), method: method || own?.method || base?.method || (b !== undefined ? 'POST' : 'GET'), headers: h, body: b}];
+      };
+      const [href, fetchInit] = prep(req);
+      const m = fetchInit.method;
+      // D472: `batch` (sub-requests sent in parallel) and `split` (a failed request sent again in
+      // parts, at most 3 deep), their parsed bodies merged by `combine` into one reply. The test
+      // fake (_whole) answers such a request as one
+      const {batch, split, combine = (x: any) => x} = options._whole ? {} as any : req;
       const k = C?.key(req, rn !== undefined || pf);
       const id = ++seq;
       const r: any = {category, scope, sender, rk};
@@ -421,18 +446,10 @@ export function makeFetchDriver(options: any = {}) {
         const tries = pol.count ?? 3;
         F = {id, k, q: req, s: new Set(), n: 0};
         if (k !== undefined) C.f.set(k, F);
-        const pz = parse || options.parse || 'auto';
-        const parser = typeof pz == 'function' ? pz : PARSERS[pz] || autoParse;
+        const parser = parserOf(parse || options.parse);
         // the global fetch is called as a method: a detached window.fetch throws "Illegal invocation"
         const g: any = globalThis;
         const doFetch = options.fetch || (typeof g.fetch == 'function' && ((u: string, i: any) => g.fetch(u, i)));
-        const fetchInit = {
-          ...pickInit(base),
-          ...pickInit(own),
-          method: m,
-          headers: h,
-          body: b,
-        };
         // the outcome, to every request waiting on this fetch (the failure once, after the last attempt)
         const end = (e: any, x?: any, status?: number) => {
           done(F);
@@ -454,23 +471,37 @@ export function makeFetchDriver(options: any = {}) {
             // 5-1 (H-9): renderComponent's fake learns which request (and resource) the next fetch is for
             options._tap?.(req, rn, pf);
             // called synchronously, so a test sees the call right after the sink emitted
-            p = Promise.resolve(doFetch(href, {...fetchInit, signal: ctl.signal}));
+            p = batch ? Promise.resolve() : Promise.resolve(doFetch(href, {...fetchInit, signal: ctl.signal}));
+            if (batch || split) {
+              // D472: parts in parallel; a failed one split again when `split` says how
+              const one = (q: any, d: number, first?: any): Promise<any> => {
+                const [u, i] = prep({...req, ...q});
+                return (first || Promise.resolve(doFetch(u, {...i, signal: ctl.signal}))).then(async (res: any) => {
+                  if (bad(res)) {
+                    const e = await httpError(res, u);
+                    const qs = d < 3 && live() && split?.(q, e);
+                    if (qs?.length > 1) return all(qs, d + 1);
+                    throw e;
+                  }
+                  return parserOf(q.parse || parse || options.parse)(res);
+                });
+              };
+              const all = (qs: any[], d: number) => Promise.all(qs.map(q => one(q, d))).then(bodies => combine(bodies, qs));
+              p = (batch ? all(batch, 0) : one(req, 0, p)).then(v => ({b: v}));
+            }
           } catch (e) {
             p = Promise.reject(e);
           }
           p.then(async (res: any) => {
+            if (batch || split) return live() && (k !== undefined && !F.z && C.put(k, req, res.b), end(0, res.b, 200));
             if (!live()) return;
             // R4-3: anything that throws here (a non-Response, a parser) fails the request
             try {
               const st = res.status;
-              if (res.ok === false || st < 200 || st > 299) {
-                let errBody: any;
-                try { errBody = await autoParse(res); } catch (_) {}
+              if (bad(res)) {
+                const e = await httpError(res, href);
                 if (!live() || ((st == 408 || st == 429 || st > 499) && again(res))) return;
-                const e: any = new Error(`HTTP ${st}${res.statusText ? ' ' + res.statusText : ''}: ${href}`);
-                e.status = st;
-                e.body = errBody;
-                return end(e, {status: st, body: errBody});
+                return end(e, {status: st, body: e.body});
               }
               let v: any;
               try { v = await parser(res); } catch (e) { return live() && end(e, {status: st}); }
@@ -480,7 +511,7 @@ export function makeFetchDriver(options: any = {}) {
             } catch (e) {
               live() && end(e);
             }
-          }, (e: any) => { live() && !again() && end(e); });
+          }, (e: any) => { live() && (e?.status ? end(e, {status: e.status, body: e.body}) : !again() && end(e)); });
         };
         go();
       }

package/src/extra/lens.ts

@@ -0,0 +1,15 @@
+/*
+ * PLAN-9 (D463): byId(field, id, idKey = 'id'), a { get, set } lens to the element of the array
+ * `state[field]` whose `idKey` is `id`: a record part's state (`state: (node) => byId('projects',
+ * node.params.id)`), or any child's `state={byId('todos', 3)}`. get: the element (undefined when it
+ * is gone); set: the array with that element replaced (the state unchanged when it is gone).
+ * Side-effect free.
+ */
+export const byId = (field: string, id: any, idKey = 'id') => ({
+  get: (s: any) => (Array.isArray(s?.[field]) ? s[field].find((x: any) => x?.[idKey] === id) : undefined),
+  set: (s: any, v: any) => {
+    const a = s?.[field]
+    if (!Array.isArray(a) || !a.some((x: any) => x?.[idKey] === id)) return s
+    return {...s, [field]: a.map((x: any) => (x?.[idKey] === id ? v : x))}
+  },
+})

package/src/extra/ssr.ts

@@ -163,14 +163,14 @@ function withResources(def: any, state: any): any {
 }
 
 // PLAN-4 GS-9: uid(name?) as on the client: the root is 'u'; a child component adds its path in
-// the parent's view (or its `id` prop), as getComponentIdFromElement and instantiateSubComponents
+// the parent's view (or its vnode `key`, else its `id` prop, D456), as getComponentIdFromElement and instantiateSubComponents
 // in the core do; a Collection item adds its key, a Switchable page its name; anything but
 // each part encoded by uidPart (G-214); in the root option anything but [A-Za-z0-9_-] becomes '_'
 // (as run() does). SSR ids = hydration ids
 const makeUid = (base: string) => (n?: string) => n ? base + '-' + n : base
 function childUid(uid: string, vnode: any, path: string): string {
-  const id = vnode.data?.props?.id
-  return uid + '-' + uidPart(('::' + ((id && JSON.stringify(id).replaceAll('"', '')) || path)).replace(/.*::(r\.)?/, ''))
+  const id = vnode.key ?? vnode.data?.props?.id
+  return uid + '-' + uidPart(('::' + ((id != null && JSON.stringify(id).replaceAll('"', '')) || path)).replace(/.*::(r\.)?/, ''))
 }
 
 // G-567: a view that returns a string or a number renders it as text (core/instance.ts view());

package/src/extra/testing.ts

@@ -1754,6 +1754,8 @@ export function renderComponent(
         // 5-3: focus / online come from t.focus() / t.online() only
         _on: (f: any) => { signals.add(f); return () => signals.delete(f); },
         _tap: (req: any, res?: string, pf?: any) => { tapped = [req, res, pf]; },
+        // D472: a batch / split request (a large decide()) is one fetch here, answered as one
+        _whole: true,
         fetch: (url: string, init: any) => new Promise((resolve, reject) => {
           const [req, res, pf] = tapped || [{url}];
           tapped = undefined;

package/src/extra/widget.ts

@@ -171,14 +171,14 @@ function rewrite(n: any, o: any, path: string): any {
   return r
 }
 
-/** widget markers among a Portal's children (the core doesn't walk them) */
+/** widget markers among a Portal's children (the core doesn't walk them): `pres.widget.$k`, which the
+ * Portal's rewrite calls (core/markers/portal.ts; G-751: either may be registered first) */
 const inPortal = (c: any[], o: any, x: string): any[] =>
   c.map((n, i) => n?.sel == 'widget' ? rewrite(n, o, x + '.' + i) : n?.children ? {...n, children: inPortal(n.children, o, x + '.' + i)} : n)
+;(rewrite as any).$k = inPortal
 
 export function defineWidget(def: any): any {
   pres.widget ||= rewrite
-  const p: any = pres.portal
-  if (p && !p.$w) ((pres.portal = (n: any, o: any, x: string) => p({...n, children: inPortal(n.children || [], o, x)}, o, x)) as any).$w = 1
   const w: any = () => {}, commands: any = {}
   // D200: any name, `close` and `togglePopover` too (the core passes a widget command the options)
   for (const m in def.commands) commands[m] = (el: any, o: any) => el[W] && def.commands[m](el[W].i, o || {}, el)

package/src/index.d.ts

@@ -2358,6 +2358,21 @@ export type FetchRequest = string | {
    * schema's (possibly transformed) value. A failure is an error with `issues`
    */
   validate?: StandardSchemaLike;
+  /**
+   * D472: send these sub-requests instead, in parallel (each inherits this request's fields:
+   * `url`, `headers`, `init`, ...; its own `json` / `body` / `parse` win), and deliver ONE reply:
+   * `combine(bodies, requests)`. One failure fails the request (once). The test fake
+   * (renderComponent) answers the request as one, by its own `url` / `json`. `decide()` makes these
+   */
+  batch?: ReadonlyArray<{ url?: string; method?: string; headers?: Record<string, string>; query?: Record<string, unknown>; json?: unknown; body?: BodyInit; parse?: 'auto' | 'json' | 'text' | ((response: Response) => any) }>;
+  /** D472: merges the parsed bodies of `batch` / `split` parts into the reply (default: the array) */
+  combine?: (bodies: any[], requests: any[]) => any;
+  /**
+   * D472: a request (or a `batch` part) that fails with an HTTP error is sent again as the
+   * requests this returns (≥ 2, in parallel, merged by `combine`), at most 3 times deep; null keeps
+   * the error. `decide()` halves its questions on a 400 / 413 that names a size limit
+   */
+  split?: (request: any, error: Error & { status?: number; body?: any }) => any[] | null | undefined;
   /** Your own fields (an id, ...): not sent, returned on the reply's `request` */
   [appData: string]: any;
 } | {
@@ -3708,7 +3723,9 @@ declare global {
   namespace JSX {
     interface IntrinsicElements {
       [elemName: string]: any;
+      /** @deprecated since 6.3.0, removed in the next major: `import { Collection } from 'sygnal'` and write `<Collection …>` (SYG426) */
       collection: CollectionProps<any>;
+      /** @deprecated since 6.3.0, removed in the next major: `import { Switchable } from 'sygnal'` and write `<Switchable …>` (SYG426) */
       switchable: SwitchableProps<any>;
       slot: SlotProps;
     }
@@ -3721,6 +3738,15 @@ declare global {
       children: {};
     }
 
+    /**
+     * `key` on any tag (D456): on a component, its identity among its parent's children (before
+     * its `id` prop, then its position): a keyed instance survives a move or a reorder, and a new
+     * key makes a new instance. Never a prop of the component.
+     */
+    interface IntrinsicAttributes {
+      key?: string | number | null;
+    }
+
     /**
      * A component's view receives `state: STATE` and `context`, but in JSX the parent passes
      * an optional `state` slice name or lens (`<Editor state="editor" />`, `<Panel />`).
@@ -3754,6 +3780,21 @@ export type { ChatState, ChatStatus, ChatActions, ChatDone, ChatOptions } from '
 // PLAN-6 M-2 / M-3 (3-M)
 export { answers, commandBar } from './ai.d'
 export type { AnswerPick, AnswerPicks, CommandBarState, CommandBarStatus, CommandBarActions, CommandBarOptions, CommandBarResult, CommandBarUnsure } from './ai.d'
+// PLAN-9 (A): catalogs, the compose behavior, composeWith, the layout utilities
+export { defineCatalog, compose, composeWith, fromTree, toTree, removeNode } from './ai.d'
+// PLAN-9 H: chat client tools and cards
+export { openToolCalls, askCard } from './ai.d'
+export { Composed } from './ai.d'
+export type { ChatClientTool, ChatAskOptions, ChatCard, ChatCardStatus, ChatToolPart, ComposedProps } from './ai.d'
+export type { Catalog, CatalogDecl, CatalogPartDecl, CatalogContainerDecl, CatalogParam, CatalogParamValue, CatalogParamsOf, CatalogRecord, CatalogPart, CatalogContainer, CatalogOption, CatalogTree, CatalogTreeNode, ComposeTree, ContainerView, Layout, LayoutNode, ComposeRenderOptions, ComposeRenderable, ComposeBackend, ComposeNames, ComposeState, ComposeStatus, ComposeActions, ComposeOptions, ComposeAnswer } from './ai.d'
+
+/**
+ * PLAN-9 (D463): a `{ get, set }` lens to the element of the array `state[field]` whose `idKey`
+ * (default 'id') is `id`: a record part's state (`state: (node) => byId('projects',
+ * node.params.id)`) or any child's `state={byId('todos', 3)}`. `get` is undefined once the element
+ * is gone; `set` then leaves the state unchanged.
+ */
+export function byId<T = any, S = any>(field: string, id: unknown, idKey?: string): { get(state: S): T | undefined; set(state: S, value: T): S }
 // PLAN-6 X-1 (3-X)
 export { makeMcpAppDriver } from './ai.d'
 export type { McpAppDriverOptions, McpAppSource, McpAppRequest, McpAppError, McpToolResult, McpHostContext, McpContentBlock, McpAppDisplayMode } from './ai.d'

package/src/index.ts

@@ -68,6 +68,14 @@ export { anthropicMessages, agui, fromAISDK, strictSchemas } from './extra/ai/in
 export { makeMcpAppDriver } from './extra/ai/index'
 // A-3 (3-A3, experimental, D291)
 export { formTool } from './extra/ai/index'
+// PLAN-9 (A): catalogs, the compose behavior, composeWith, the layout utilities
+export { defineCatalog, compose, composeWith, fromTree, toTree, removeNode } from './extra/ai/index'
+// PLAN-9 H: chat client tools and cards
+export { openToolCalls, askCard } from './extra/ai/index'
+// PLAN-9 M-1: <Composed catalog from /> (documented import: 'sygnal/ai')
+export { Composed } from './extra/ai/index'
+// PLAN-9 (D463): a lens to an array element by id
+export { byId } from './extra/lens'
 
 // export dom helper functions (h, makeDOMDriver, etc.)
 export * from './cycle/dom/index'

package/src/lazy.ts

@@ -1,5 +1,5 @@
-// the core's resolver for lazy components, registered on import (D157)
-import './core/markers/lazy';
+// the core's resolver for lazy components (D157), registered by the first lazy() call (G-751)
+import {enableLazy} from './core/markers/lazy';
 
 /**
  * PLAN-5 B-4 (D103): `when` defers the import: 'visible' starts it when a placeholder enters the
@@ -24,6 +24,7 @@ export interface LazyOptions {
 const WHEN = 'data-sygnal-when';
 
 export function lazy(loadFn: () => Promise<any>, options?: LazyOptions): any {
+  enableLazy();
   let cachedComponent: any = null;
   let loadError: any = null;
   const g: any = globalThis, when = options?.when, ph = options?.placeholderHeight;

package/src/portal.ts

@@ -1,13 +1,16 @@
 import {h} from './cycle/dom/snabbdom';
-// the core's handler for this marker, registered on import (D157)
-import './core/markers/portal';
+// the core's handler for this marker (D157), registered when a tag uses it (G-751: the pragma calls
+// `$reg`; not on import, so a bundle that never uses the marker drops the handler)
+import {enablePortal as reg} from './core/markers/portal';
 
 const Portal = (props: any) => {
+  reg();
   const {children, ...sanitizedProps} = props;
   return h('portal', {props: sanitizedProps}, children);
 };
 (Portal as any).componentName = 'portal';
 (Portal as any).preventInstantiation = true;
+(Portal as any).$reg = reg;
 
 export {Portal};
 export default Portal;

package/src/pragma/index.ts

@@ -322,7 +322,8 @@ export const createElementWithModules = (modules: Record<string, any>) => {
     if (typeof text === 'undefined') plain = !!(flatten(children, kids = []) & +plain)
     // G-492: a custom element (bit 8) routes list as a prop, in its own cache
     const d = data ? sanitizeData(data, modules, isComponent ? croutes : t & 8 ? xroutes : routes, isComponent || t & 8 && 2) : {}
-    if (fn) d[fn.preventInstantiation ? 'm' : 'c'] = fn
+    // G-751: a marker's core handler registers on first use (`$reg`), not when its module loads
+    if (fn) d[fn.preventInstantiation ? 'm' : 'c'] = fn, fn.$reg?.()
     const key = k !== undefined ? k : data ? data.key : undefined
     const vnode = plain ? new (Plain as any)(sel, d, kids, text, key) : { sel, data: d, children: kids, text, elm: undefined, key }
     if (t & 2) applySvg(vnode)

package/src/suspense.ts

@@ -1,13 +1,16 @@
 import {h} from './cycle/dom/snabbdom';
-// the core's handler for this marker, registered on import (D157)
-import './core/markers/suspense';
+// the core's handler for this marker (D157), registered when a tag uses it (G-751: the pragma calls
+// `$reg`; not on import, so a bundle that never uses the marker drops the handler)
+import {enableSuspense as reg} from './core/markers/suspense';
 
 const Suspense = (props: any) => {
+  reg();
   const {children, ...sanitizedProps} = props;
   return h('suspense', {props: sanitizedProps}, children);
 };
 (Suspense as any).componentName = 'suspense';
 (Suspense as any).preventInstantiation = true;
+(Suspense as any).$reg = reg;
 
 export {Suspense};
 export default Suspense;

package/src/switchable.ts

@@ -1,5 +1,6 @@
 import {h} from './cycle/dom/snabbdom';
-// the core's handler for this marker, registered on import (D157)
+// the core's host for this marker, registered on import (D157): unlike Portal, Transition and
+// Suspense (G-751), not on first use, because the lowercase tag works without an import (docs)
 import './core/hosts/switchable';
 
 /** `<Switchable of={{ a: A, b: B }} current={state.tab} />`: a marker vnode the core's Switchable host renders */

package/src/transition.ts

@@ -1,13 +1,16 @@
 import {h} from './cycle/dom/snabbdom';
-// the core's handler for this marker, registered on import (D157)
-import './core/markers/transition';
+// the core's handler for this marker (D157), registered when a tag uses it (G-751: the pragma calls
+// `$reg`; not on import, so a bundle that never uses the marker drops the handler)
+import {enableTransition as reg} from './core/markers/transition';
 
 const Transition = (props: any) => {
+  reg();
   const {children, ...sanitizedProps} = props;
   return h('transition', {props: sanitizedProps}, children);
 };
 (Transition as any).componentName = 'transition';
 (Transition as any).preventInstantiation = true;
+(Transition as any).$reg = reg;
 
 export {Transition};
 export default Transition;

package/src/vike/onRenderClient.ts

@@ -105,7 +105,8 @@ function componentVNode(comp: any, key: string, stateField: any, children: any[]
     children,
     text: undefined,
     elm: undefined,
-    key: '__vike_' + key + '__',
+    // no vnode key: it would be the instance identity (D456); `id` is (G-207)
+    key: undefined,
   }
 }
 
@@ -132,7 +133,7 @@ function pageChildVNode(pageState: any, stateField: any = 'page'): any {
     children: [],
     text: undefined,
     elm: undefined,
-    key: '__vike_page__',
+    key: undefined,
   }
 }