sygnal 5.3.7 → 6.0.0

package/src/extra/ssr.ts

@@ -4,6 +4,9 @@
  * Renders Sygnal component trees to HTML strings without a browser DOM.
  * Handles sub-components, Collections, Suspense boundaries, and Portals.
  */
+import {uidPart, vtStyle} from '../shared'
+import {sortFn} from '../core/hosts/collection'
+import {keyOf} from '../core/cell'
 
 // Void elements that must not have closing tags
 const VOID_ELEMENTS = new Set([
@@ -20,8 +23,24 @@ const ESC_MAP: Record<string, string> = {
   "'": '&#39;',
 }
 
-function escapeHtml(str: string): string {
-  return String(str).replace(/[&<>"']/g, (ch) => ESC_MAP[ch])
+// 4-F: renderComponent's t.html() serialises like the browser's innerHTML: text escapes only
+// & < >, attribute values only & and " (SSR output keeps escaping all five)
+let innerHtmlMode = false
+// G-480: the <Slot> marker (its function in `data.m`), not a plain <slot> element
+const isSlot = (v: any): boolean => v?.data?.m && v.sel === 'slot'
+
+function escapeHtml(str: string, attr?: boolean): string {
+  return String(str).replace(innerHtmlMode ? (attr ? /[&"]/g : /[&<>]/g) : /[&<>"']/g, (ch) => ESC_MAP[ch])
+}
+
+/** @internal renderToString serialised like innerHTML (for renderComponent's t.html()) */
+export function renderToInnerHtml(componentDef: any): string {
+  innerHtmlMode = true
+  try {
+    return renderToString(componentDef)
+  } finally {
+    innerHtmlMode = false
+  }
 }
 
 /**
@@ -65,6 +84,124 @@ export interface RenderToStringOptions {
    * When a string, uses that as the variable name instead.
    */
   hydrateState?: boolean | string
+  /**
+   * PLAN-3 (HEAD driver): an array that receives each rendered component's `head` static
+   * value (in render order); `renderHead(list)` turns it into tags.
+   */
+  head?: any[]
+  /**
+   * PLAN-3 5-5 (H-7): a queryCache() the components' `resources` render from: a cached entry
+   * renders as `{ status: 'success', data }`, any other request as `{ status: 'loading' }`.
+   * Nothing is fetched during SSR; seed the cache in a loader (`cache.set(request, data)`)
+   */
+  cache?: any
+  /**
+   * PLAN-4 GS-11: the app-level error hook, as run()'s `onError`: called with phase 'view' after
+   * the component's onError boundary chose the fallback. Reporting only
+   */
+  onError?: (error: any, info: {componentName?: string; action?: string; phase: string}) => void
+  /**
+   * PLAN-4 G-206: the root of the uid() strings (default 'u'), as run()'s `uid` option: pass the
+   * same value to both so the hydrated ids match
+   */
+  uid?: string
+}
+
+// the `onError` option of the outermost renderToString call that has one (GS-11)
+let ssrOnError: any
+
+// the `head` option of the outermost renderToString call that has one
+let heads: any[] | undefined
+// 5-5: the `cache` option of the outermost renderToString call that has one
+let ssrCache: any
+
+/**
+ * PLAN-4 GS-1: a host's behaviors: each `uses` key missing from the state is the slice the
+ * behavior starts with (its initialState, the options naming its keys, its calculated fields: the
+ * factory's precomputed `state`), as the client's merge gives it (behaviors.ts). A host with no
+ * state gets an object with just its slices
+ */
+function withUses(def: any, state: any): any {
+  const uses = def && def.uses
+  if (!uses || typeof uses !== 'object') return state
+  if (state == null) state = {}
+  if (typeof state !== 'object' || Array.isArray(state)) return state
+  let out = state
+  for (const k in uses) {
+    const u = uses[k]
+    if (!u) continue
+    let v = out[k] === undefined ? u.state : out[k]
+    // G-423: a sygnal/ui part (ui/shared.ts keyed()) names its ids by its `uses` key (or its
+    // `id` option) when the slice has no id, as the client's merge and calculated `id` do
+    if (u.keyed && v && typeof v === 'object' && v.id == null) v = {...v, id: u.options?.id ?? k}
+    if (v !== out[k] && v !== undefined) {
+      if (out === state) out = {...state}
+      out[k] = v
+    }
+  }
+  return out
+}
+
+/**
+ * 5-5 (H-7): the state a component's view renders with: each `resources` entry missing from the
+ * state reads from the cache ('success' with the cached data), else 'loading' ('idle' for a
+ * falsy request), as the client's first paint does with the same (hydrated) cache
+ */
+function withResources(def: any, state: any): any {
+  state = withUses(def, state)
+  const res = def && def.resources
+  if (!res || !state || typeof state !== 'object' || Array.isArray(state)) return state
+  const out = {...state}
+  for (const n of Object.keys(res)) {
+    if (out[n] !== undefined) continue
+    let q: any
+    try { q = typeof res[n] === 'function' ? res[n](state) : res[n] } catch (_) {}
+    const E = q && ssrCache ? ssrCache.get(ssrCache.key(q, 1)) : undefined
+    out[n] = E && E.at > 0 ? {status: 'success', data: E.v} : {status: q ? 'loading' : 'idle'}
+  }
+  return out
+}
+
+// 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
+// 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\.)?/, ''))
+}
+
+// G-567: a view that returns a string or a number renders it as text (core/instance.ts view());
+// another falsy value, an empty <div>
+const textOr = (r: any): any => typeof r == 'string' || typeof r == 'number' ? {text: '' + r} : r
+const viewOut = (r: any): any => textOr(r) || {sel: 'div', data: {}, children: [], text: undefined, elm: undefined, key: undefined}
+const errorDiv = (): any => ({sel: 'div', data: {attrs: {'data-sygnal-error': ''}}, children: [], text: undefined, elm: undefined, key: undefined})
+
+/**
+ * A view threw: the component's onError boundary picks the fallback (the error <div> without
+ * one, or when it throws), then the app's onError hook is told (GS-11)
+ */
+function viewFailed(def: any, err: any, name: string): any {
+  let vnode: any = errorDiv()
+  if (typeof def.onError === 'function') {
+    try {
+      vnode = def.onError(err, {componentName: name})
+    } catch (_) {
+      vnode = errorDiv()
+    }
+  }
+  // reporting only: a throwing hook is logged and swallowed (no diagnostics import: the Astro and
+  // Vike server bundles carry this file without the core)
+  try { ssrOnError && ssrOnError(err, {componentName: name, phase: 'view'}) } catch (e) { console.error(e) }
+  return vnode
+}
+
+function collectHead(def: any, state: any): void {
+  const h = def && def.head
+  if (!heads || !h) return
+  try { heads.push(typeof h === 'function' ? h(state) : h) } catch (_) {}
 }
 
 /**
@@ -77,16 +214,39 @@ export interface RenderToStringOptions {
  * import { renderToString } from 'sygnal'
  *
  * const html = renderToString(App, { state: { count: 0 } })
- * // → '<div><h1>Count: 0</h1></div>'
+ * // → '<div data-sygnal-ssr=""><h1>Count: 0</h1></div>'
  * ```
+ *
+ * The root element (a fragment's first element) carries an empty `data-sygnal-ssr` attribute,
+ * which marks the markup as Sygnal's server HTML (persist() under plain run() then restores after
+ * the first render); the first client render removes it.
  */
 export function renderToString(
   componentDef: any,
   options: RenderToStringOptions = {}
 ): string {
+  const prevHeads = heads, prevCache = ssrCache, prevOnError = ssrOnError
+  if (options.head) heads = options.head
+  if (options.cache) ssrCache = options.cache
+  if (options.onError) ssrOnError = options.onError
+  try {
+    return renderRoot(componentDef, options)
+  } finally {
+    heads = prevHeads
+    ssrCache = prevCache
+    ssrOnError = prevOnError
+  }
+}
+
+function renderRoot(componentDef: any, options: RenderToStringOptions): string {
   const {state, props = {}, context = {}, hydrateState} = options
+  // G-206: the uid root (sanitized as run() does)
+  const uid = (options.uid || 'u').replace(/[^\w-]+/g, '_')
 
-  const resolvedState = state !== undefined ? state : componentDef.initialState
+  const ownState = state !== undefined ? state : componentDef.initialState
+  // 5-5: the view sees its resources; the hydration script keeps the state as it was given
+  const resolvedState = withResources(componentDef, ownState)
+  collectHead(componentDef, resolvedState)
 
   // Build context: merge parent context with component's own context definitions
   const componentContext = componentDef.context || {}
@@ -109,20 +269,11 @@ export function renderToString(
       children: props.children || [],
       slots: props.slots || {},
       context: mergedContext,
-      peers: {},
-    }, resolvedState, mergedContext, {})
+      uid: makeUid(uid),
+    })
   } catch (err: any) {
     // Error boundary
-    if (typeof componentDef.onError === 'function') {
-      const name = componentDef.componentName || componentDef.name || 'Component'
-      try {
-        vnode = componentDef.onError(err, {componentName: name})
-      } catch (_) {
-        vnode = {sel: 'div', data: {attrs: {'data-sygnal-error': ''}}, children: [], text: undefined, elm: undefined, key: undefined}
-      }
-    } else {
-      vnode = {sel: 'div', data: {attrs: {'data-sygnal-error': ''}}, children: [], text: undefined, elm: undefined, key: undefined}
-    }
+    vnode = viewFailed(componentDef, err, componentDef.componentName || componentDef.name || 'Component')
   }
 
   if (!vnode) {
@@ -130,16 +281,27 @@ export function renderToString(
   }
 
   // Process special components in the VNode tree
-  vnode = processSSRTree(vnode, mergedContext, resolvedState)
+  vnode = processSSRTree(vnode, mergedContext, resolvedState, uid, 'r')
+
+  // PLAN-4 3-R: mark the root element (a fragment's first element) as Sygnal's server markup, so
+  // persist() under plain run() can tell it from a client-only app's loading placeholder. The
+  // first client render drops the attribute (the new vnode doesn't have it)
+  // (4-H: through nested fragments, e.g. a Collection's)
+  const firstEl = (v: any): any => {
+    if (v?.sel) return v.sel !== '!' && v
+    if (Array.isArray(v?.children)) for (const c of v.children) { const f = firstEl(c); if (f) return f }
+  }
+  const first = vnode?.sel ? vnode : firstEl(vnode)
+  if (first && !innerHtmlMode) first.data = {...first.data, attrs: {'data-sygnal-ssr': '', ...first.data?.attrs}}
 
   // Serialize to HTML
   let html = vnodeToHtml(vnode)
 
   // Optionally embed state for hydration
-  if (hydrateState && resolvedState != null) {
+  if (hydrateState && ownState != null) {
     const varName = typeof hydrateState === 'string' ? hydrateState : '__SYGNAL_STATE__'
-    const serialized = escapeHtml(JSON.stringify(resolvedState))
-    html += `<script>window.${varName}=${JSON.stringify(resolvedState)}</script>`
+    const serialized = escapeHtml(JSON.stringify(ownState))
+    html += `<script>window.${varName}=${JSON.stringify(ownState)}</script>`
   }
 
   return html
@@ -149,7 +311,7 @@ export function renderToString(
  * Walk the VNode tree and recursively render sub-components,
  * handle Suspense/Portal/Transition markers, and process Collections.
  */
-function processSSRTree(vnode: any, context: Record<string, any>, parentState?: any): any {
+function processSSRTree(vnode: any, context: Record<string, any>, parentState: any, uid: string, path: string): any {
   if (!vnode) return vnode
   if (typeof vnode === 'string' || vnode.text != null) return vnode
 
@@ -158,7 +320,7 @@ function processSSRTree(vnode: any, context: Record<string, any>, parentState?:
   // Fragment: no selector, recurse into children
   if (!sel && vnode.children && Array.isArray(vnode.children)) {
     vnode.children = vnode.children
-      .map((c: any) => processSSRTree(c, context, parentState))
+      .map((c: any, i: number) => processSSRTree(c, context, parentState, uid, `${path}.${i}`))
       .filter((c: any) => c != null)
     return vnode
   }
@@ -167,11 +329,13 @@ function processSSRTree(vnode: any, context: Record<string, any>, parentState?:
   if (sel === 'portal') {
     const children = vnode.children || []
     if (children.length === 0) return null
-    if (children.length === 1) return processSSRTree(children[0], context, parentState)
+    if (children.length === 1) return processSSRTree(children[0], context, parentState, uid, `${path}.0`)
+    // P46-Q (D187): the client placeholder's selector (div.sygnal-portal), so hydration patches
+    // this element in place and the Portal mounts from its postpatch (G-318)
     return {
-      sel: 'div',
-      data: {attrs: {'data-sygnal-portal': ''}},
-      children: children.map((c: any) => processSSRTree(c, context, parentState)),
+      sel: 'div.sygnal-portal',
+      data: {attrs: {'data-sygnal-portal': vnode.data?.props?.target ?? ''}},
+      children: children.map((c: any, i: number) => processSSRTree(c, context, parentState, uid, `${path}.${i}`)),
       text: undefined,
       elm: undefined,
       key: undefined,
@@ -183,18 +347,18 @@ function processSSRTree(vnode: any, context: Record<string, any>, parentState?:
     const children = vnode.children || []
     const child = children[0]
     if (!child) return null
-    return processSSRTree(child, context, parentState)
+    return processSSRTree(child, context, parentState, uid, path)
   }
 
   // Suspense: render children (SSR always shows content, not fallback)
   if (sel === 'suspense') {
     const children = vnode.children || []
     if (children.length === 0) return null
-    if (children.length === 1) return processSSRTree(children[0], context, parentState)
+    if (children.length === 1) return processSSRTree(children[0], context, parentState, uid, `${path}.0`)
     return {
       sel: 'div',
       data: {attrs: {'data-sygnal-suspense': 'resolved'}},
-      children: children.map((c: any) => processSSRTree(c, context, parentState)),
+      children: children.map((c: any, i: number) => processSSRTree(c, context, parentState, uid, `${path}.${i}`)),
       text: undefined,
       elm: undefined,
       key: undefined,
@@ -207,7 +371,7 @@ function processSSRTree(vnode: any, context: Record<string, any>, parentState?:
     const fallback = props.fallback
     if (fallback) {
       // fallback can be a VNode or a string
-      return processSSRTree(fallback, context, parentState)
+      return processSSRTree(fallback, context, parentState, uid, path)
     }
     // No fallback — render an empty placeholder div
     return {
@@ -220,15 +384,23 @@ function processSSRTree(vnode: any, context: Record<string, any>, parentState?:
     }
   }
 
+  // PLAN-5 W-1 widget marker: the host element with the widget's `fallback` inside (processed like
+  // any children); the client patch replaces the fallback and mounts the widget (extra/widget.ts)
+  if (sel === 'widget' && vnode.data?.ww) {
+    const {ww, wp, h} = vnode.data, fb = ww.def.fallback, host = ww.$ssr(vnode)
+    if (fb != null) host.children = [].concat(typeof fb == 'function' ? fb(wp, h) : fb).map((c: any) => typeof c == 'object' ? c : {text: String(c)})
+    return processSSRTree(host, context, parentState, uid, path)
+  }
+
   // Slot: unwrap to children
-  if (sel === 'slot') {
+  if (isSlot(vnode)) {
     const children = vnode.children || []
     if (children.length === 0) return null
-    if (children.length === 1) return processSSRTree(children[0], context, parentState)
+    if (children.length === 1) return processSSRTree(children[0], context, parentState, uid, `${path}.0`)
     return {
       sel: 'div',
       data: {},
-      children: children.map((c: any) => processSSRTree(c, context, parentState)),
+      children: children.map((c: any, i: number) => processSSRTree(c, context, parentState, uid, `${path}.${i}`)),
       text: undefined,
       elm: undefined,
       key: undefined,
@@ -237,18 +409,24 @@ function processSSRTree(vnode: any, context: Record<string, any>, parentState?:
 
   // Sub-component: render recursively
   const props = vnode.data?.props || {}
-  if (props.sygnalOptions || typeof props.sygnalFactory === 'function') {
-    return renderSubComponent(vnode, context, parentState)
+  // (PLAN-4.6: the pragma's `data.c`, the component function)
+  if (typeof vnode.data?.c === 'function') {
+    return renderSubComponent(vnode, context, parentState, childUid(uid, vnode, path))
   }
 
   // Collection: render each item
   if (sel === 'collection') {
-    return renderCollection(vnode, context, parentState)
+    return renderCollection(vnode, context, parentState, childUid(uid, vnode, path))
+  }
+
+  // PLAN-5 V-1: a VirtualCollection renders its no-layout window (the first rows) in its container
+  if (sel === 'virtual-collection') {
+    return renderVirtual(vnode, context, parentState, childUid(uid, vnode, path))
   }
 
   // Switchable: render the active component
   if (sel === 'switchable') {
-    return renderSwitchable(vnode, context, parentState)
+    return renderSwitchable(vnode, context, parentState, childUid(uid, vnode, path))
   }
 
   // Regular element: recurse into children
@@ -256,12 +434,12 @@ function processSSRTree(vnode: any, context: Record<string, any>, parentState?:
     if (Array.isArray(vnode.children)) {
       if (vnode.children.length > 0) {
         vnode.children = vnode.children
-          .map((c: any) => processSSRTree(c, context, parentState))
+          .map((c: any, i: number) => processSSRTree(c, context, parentState, uid, `${path}.${i}`))
           .filter((c: any) => c != null)
       }
     } else if (vnode.children && typeof vnode.children === 'object') {
       // Single child object (text element)
-      vnode.children = processSSRTree(vnode.children, context, parentState)
+      vnode.children = processSSRTree(vnode.children, context, parentState, uid, `${path}.0`)
     }
   }
 
@@ -269,39 +447,11 @@ function processSSRTree(vnode: any, context: Record<string, any>, parentState?:
 }
 
 /**
- * Render a sub-component (identified by sygnalOptions or sygnalFactory in props).
+ * Render a sub-component (the pragma's `data.c`: the component function, with its statics).
  */
-function renderSubComponent(vnode: any, context: Record<string, any>, parentState?: any): any {
-  const props = vnode.data?.props || {}
-  const {sygnalOptions, sygnalFactory, ...childProps} = props
-
-  // Get the component definition (view function with static properties)
-  let componentDef: any
-  if (sygnalOptions) {
-    componentDef = sygnalOptions.view
-    // Copy static properties
-    if (!componentDef.initialState && sygnalOptions.initialState) {
-      componentDef = Object.assign(componentDef, {
-        initialState: sygnalOptions.initialState,
-        model: sygnalOptions.model,
-        intent: sygnalOptions.intent,
-        context: sygnalOptions.context,
-        onError: sygnalOptions.onError,
-        calculated: sygnalOptions.calculated,
-      })
-    }
-  } else if (sygnalFactory && sygnalFactory.componentName) {
-    // Factory-created component — we can't easily extract the view from an already-wrapped factory.
-    // Return a placeholder.
-    return {
-      sel: 'div',
-      data: {attrs: {'data-sygnal-ssr': vnode.sel || 'component'}},
-      children: vnode.children || [],
-      text: undefined,
-      elm: undefined,
-      key: undefined,
-    }
-  }
+function renderSubComponent(vnode: any, context: Record<string, any>, parentState: any, uid: string): any {
+  const childProps = vnode.data?.props || {}
+  const componentDef: any = vnode.data?.c
 
   if (!componentDef || typeof componentDef !== 'function') {
     // Can't render — return children or empty div
@@ -324,6 +474,7 @@ function renderSubComponent(vnode: any, context: Record<string, any>, parentStat
     // State passed directly
     childState = stateProp
   }
+  childState = withResources(componentDef, childState)
 
   // Build child context
   const childContext: Record<string, any> = {...context}
@@ -342,7 +493,7 @@ function renderSubComponent(vnode: any, context: Record<string, any>, parentStat
   const defaultSlotChildren: any[] = []
   const vnodeChildren = vnode.children || []
   for (const child of vnodeChildren) {
-    if (child && child.sel === 'slot') {
+    if (isSlot(child)) {
       const slotName = child.data?.props?.name || 'default'
       if (!slots[slotName]) slots[slotName] = []
       const slotChildren = child.children || []
@@ -356,6 +507,8 @@ function renderSubComponent(vnode: any, context: Record<string, any>, parentStat
     slots.default.push(...defaultSlotChildren)
   }
 
+  collectHead(componentDef, childState)
+
   // Call the view function
   let result: any
   try {
@@ -365,46 +518,88 @@ function renderSubComponent(vnode: any, context: Record<string, any>, parentStat
       children: slots.default || vnodeChildren,
       slots,
       context: childContext,
-      peers: {},
-    }, childState, childContext, {})
+      uid: makeUid(uid),
+    })
   } catch (err: any) {
-    if (typeof componentDef.onError === 'function') {
-      const name = componentDef.componentName || componentDef.name || 'Component'
-      try {
-        result = componentDef.onError(err, {componentName: name})
-      } catch (_) {
-        result = {sel: 'div', data: {attrs: {'data-sygnal-error': ''}}, children: [], text: undefined, elm: undefined, key: undefined}
-      }
-    } else {
-      result = {sel: 'div', data: {attrs: {'data-sygnal-error': ''}}, children: [], text: undefined, elm: undefined, key: undefined}
-    }
-  }
-
-  if (!result) {
-    result = {sel: 'div', data: {}, children: [], text: undefined, elm: undefined, key: undefined}
+    result = viewFailed(componentDef, err, componentDef.componentName || componentDef.name || 'Component')
   }
 
   // Recursively process the rendered sub-tree
-  return processSSRTree(result, childContext, childState)
+  return processSSRTree(viewOut(result), childContext, childState, uid, 'r')
 }
 
+/** the Collection's own props (core/hosts/collection.ts OWN): the others go to every item */
+const COLLECTION_OWN = new Set(['of', 'from', 'filter', 'sort', 'idfield', 'className', 'viewTransitionName'])
+/** the VirtualCollection container's props (extra/virtual.ts OWN) */
+const VIRTUAL_OWN = /^(estimateSize|overscan|role|tabIndex|style|id|aria-(label|labelledby|describedby))$/
+
 /**
- * Render a Collection by iterating over the state array.
+ * PLAN-5 2-S G-396: the items a Collection shows, as the client's host lists them
+ * (core/hosts/collection.ts arrayCell + list()): `from` a state key (missing or not an array:
+ * none, D178), a `{ get }` lens, or none (the owner's state is the array, or its `value`); then
+ * `filter` (item, index, array) and `sort` (every form sortFn takes); a duplicate key once (D177).
+ * Each entry: [the item, its raw index]
  */
-function renderCollection(vnode: any, context: Record<string, any>, parentState?: any): any {
-  const props = vnode.data?.props || {}
-  const {of: itemComponent, from, className} = props
-
-  if (!itemComponent || !from || !parentState) {
-    return {sel: 'div', data: {}, children: [], text: undefined, elm: undefined, key: undefined}
-  }
+function collectionItems(props: any, parentState: any): any[][] {
+  const {from, filter, sort} = props
+  let a: any
+  if (from === undefined) a = !Array.isArray(parentState) && Array.isArray(parentState?.value) ? parentState.value : parentState
+  else if (typeof from === 'string') a = parentState?.[from]
+  else if (from && typeof from === 'object' && typeof from.get === 'function') {
+    try { a = from.get(parentState) } catch (_) { a = undefined }
+  }
+  if (!Array.isArray(a)) return []
+  let idx: number[] = a.map((_: any, i: number) => i)
+  try {
+    if (typeof filter === 'function') idx = idx.filter((i) => filter(a[i], i, a))
+    const cmp = sort ? sortFn(sort) : undefined
+    if (cmp) idx.sort((x, y) => cmp(a[x], a[y]))
+  } catch (_) { /* as the client: a throwing filter / sort renders the array as it is */ }
+  const first = new Map<string, number>(), out: any[][] = []
+  for (let i = 0; i < a.length; i++) { const k = keyOf(a[i], i); if (!first.has(k)) first.set(k, i) }
+  for (const i of idx) if (first.get(keyOf(a[i], i)) === i) out.push([a[i], i])
+  return out
+}
 
-  const items = parentState[from]
-  if (!Array.isArray(items)) {
-    return {sel: 'div', data: {}, children: [], text: undefined, elm: undefined, key: undefined}
+/** a component's children split into slots (as renderSubComponent: `<Slot name>` children by name, the rest `default`) */
+function slotsOf(children: any[]): Record<string, any[]> {
+  const slots: Record<string, any[]> = {}
+  for (const child of children) {
+    const name = isSlot(child) ? child.data?.props?.name || 'default' : 'default'
+    ;(slots[name] ||= []).push(...(isSlot(child) ? child.children || [] : [child]))
   }
+  return slots
+}
 
-  const renderedItems = items.map((itemState: any, index: number) => {
+/**
+ * Render a Collection: its items (collectionItems: from, filter, sort), each with the other
+ * props and the Collection's children, as the client's host gives them (G-396). `limit`: only
+ * the first that many (a VirtualCollection's window); `skip`: props that aren't the items'.
+ * 4-H (D229): a fragment of the items (no wrapper element), as the client's.
+ */
+function renderCollection(vnode: any, context: Record<string, any>, parentState: any, uid: string, limit?: number, skip?: RegExp, deco?: (row: any, i: number) => any): any {
+  const props = vnode.data?.props || {}
+  const {of: itemComponent, viewTransitionName: vtn} = props
+  const frag = (children: any[]) => ({sel: undefined, data: {}, children, text: undefined, elm: undefined, key: undefined})
+
+  if (!itemComponent || typeof itemComponent !== 'function') return frag([])
+
+  let items = collectionItems(props, parentState)
+  const count = items.length
+  if (limit !== undefined) items = items.slice(0, limit)
+  const itemProps: Record<string, any> = {}
+  for (const k in props) if (!COLLECTION_OWN.has(k) && !(skip && skip.test(k)) && k !== 'key' && k !== 'children') itemProps[k] = props[k]
+  const kids = vnode.children || []
+  const slots = slotsOf(kids)
+
+  const renderedItems = items.map(([raw, index]: any[], pos: number) => {
+    let itemState = raw
+    // GS-9: the key the client's Collection gives this item
+    const isItemObj = itemState && typeof itemState === 'object' && !Array.isArray(itemState)
+    // PLAN-4.6 G-322: an id-less item's uid part is `_i<index>` (core/cell.ts keyName)
+    const itemUid = uid + '-' + (isItemObj && itemState.id != null ? uidPart(itemState.id) : '_i' + index)
+    // GS-1: an item host's behavior slices (the client reads them as defaults, behaviors.ts)
+    itemState = withUses(itemComponent, itemState)
     // Build context for this item
     const itemContext: Record<string, any> = {...context}
     const componentContext = itemComponent.context || {}
@@ -420,46 +615,68 @@ function renderCollection(vnode: any, context: Record<string, any>, parentState?
     let itemVnode: any
     try {
       itemVnode = itemComponent({
+        ...itemProps,
         state: itemState,
-        children: [],
-        slots: {},
+        children: slots.default || kids,
+        slots,
         context: itemContext,
-        peers: {},
-      }, itemState, itemContext, {})
+        uid: makeUid(itemUid),
+      })
     } catch (err: any) {
-      if (typeof itemComponent.onError === 'function') {
-        try {
-          itemVnode = itemComponent.onError(err, {componentName: itemComponent.name || 'CollectionItem'})
-        } catch (_) {
-          itemVnode = {sel: 'div', data: {attrs: {'data-sygnal-error': ''}}, children: [], text: undefined, elm: undefined, key: undefined}
-        }
-      } else {
-        itemVnode = {sel: 'div', data: {attrs: {'data-sygnal-error': ''}}, children: [], text: undefined, elm: undefined, key: undefined}
-      }
+      itemVnode = viewFailed(itemComponent, err, itemComponent.name || 'CollectionItem')
     }
 
-    return processSSRTree(itemVnode, itemContext, itemState)
+    const out = processSSRTree(textOr(itemVnode), itemContext, itemState, itemUid, 'r')
+    // PLAN-5 A-1: the names the client's Collection gives a keyed item's root element
+    const named = vtn && isItemObj && itemState.id != null && out?.sel
+      ? {...out, data: {...out.data, style: vtStyle(vtn, itemState.id, out.data?.style)}}
+      : out
+    // a VirtualCollection's row decoration, with the row's position in the list (G-431: counted
+    // before the rows that render nothing are left out, as the client counts them)
+    return deco && named?.sel ? deco(named, pos) : named
   }).filter((v: any) => v != null)
 
-  const containerData: any = {}
-  if (className) {
-    containerData.props = {className}
-  }
+  return frag(renderedItems)
+}
 
-  return {
-    sel: 'div',
-    data: containerData,
-    children: renderedItems,
-    text: undefined,
-    elm: undefined,
-    key: undefined,
-  }
+/**
+ * PLAN-5 V-1: a VirtualCollection on the server: the client's markup (extra/virtual.ts) for the
+ * window it computes without layout, the first 10 rows + overscan, with the spacer as tall as
+ * every row's estimate. The client measures and moves the window once it has layout. G-396: the
+ * rows are the Collection's (from, filter, sort, the other props and the children to every
+ * item); aria-setsize and the spacer count the filtered list.
+ */
+function renderVirtual(vnode: any, context: Record<string, any>, parentState: any, uid: string): any {
+  const p = vnode.data?.props || {}, est = p.estimateSize, size = est > 0 ? est : 32
+  const n = 10 + (p.overscan >= 0 ? p.overscan : 5)
+  const items = typeof p.of === 'function' ? collectionItems(p, parentState) : []
+  const role = p.role === undefined ? 'list' : p.role
+  const rows = renderCollection(vnode, context, parentState, uid, n, VIRTUAL_OWN, (r: any, i: number) => {
+    const own = r.data?.attrs?.role || r.data?.props?.role, attrs: any = {...r.data?.attrs, 'data-index': i}
+    if (role == 'list' || own) attrs['aria-posinset'] = i + 1, attrs['aria-setsize'] = items.length
+    if (role == 'list' && !own) attrs.role = 'listitem'
+    return {...r, data: {...r.data, attrs}}
+  }).children
+  const attrs: any = {tabindex: p.tabIndex ?? 0}
+  if (role != null) attrs.role = role
+  for (const k of ['id', 'aria-label', 'aria-labelledby', 'aria-describedby']) if (p[k] != null) attrs[k] = p[k]
+  let total = 0
+  for (let i = 0; i < items.length; i++) {
+    const s = typeof est == 'function' ? est(items[i][0], i) : size
+    total += s > 0 ? s : 32
+  }
+  const div = (data: any, children: any[]) => ({sel: 'div', data, children, text: undefined, elm: undefined, key: undefined})
+  return div({props: p.className ? {className: p.className} : {}, attrs, style: {overflowY: 'auto', overflowAnchor: 'none', ...p.style}}, [
+    div({style: {position: 'relative', width: '100%', height: total + 'px'}}, [
+      div({style: {position: 'absolute', top: '0', left: '0', width: '100%', transform: 'translateY(0px)'}}, rows),
+    ]),
+  ])
 }
 
 /**
  * Render a Switchable by determining the active component from state.
  */
-function renderSwitchable(vnode: any, context: Record<string, any>, parentState?: any): any {
+function renderSwitchable(vnode: any, context: Record<string, any>, parentState: any, uid: string): any {
   const props = vnode.data?.props || {}
   const {components, active, initial} = props
 
@@ -489,14 +706,14 @@ function renderSwitchable(vnode: any, context: Record<string, any>, parentState?
     return {sel: 'div', data: {}, children: [], text: undefined, elm: undefined, key: undefined}
   }
 
-  return renderToStringInternal(activeComponent, parentState, context)
+  return renderToStringInternal(activeComponent, parentState, context, uid + '-' + uidPart(activeName))
 }
 
 /**
  * Internal helper: render a component def to a VNode (not HTML string).
  */
-function renderToStringInternal(componentDef: any, state: any, context: Record<string, any>): any {
-  const resolvedState = state !== undefined ? state : componentDef.initialState
+function renderToStringInternal(componentDef: any, state: any, context: Record<string, any>, uid: string): any {
+  const resolvedState = withResources(componentDef, state !== undefined ? state : componentDef.initialState)
 
   const componentContext = componentDef.context || {}
   const mergedContext: Record<string, any> = {...context}
@@ -509,6 +726,7 @@ function renderToStringInternal(componentDef: any, state: any, context: Record<s
     }
   }
 
+  collectHead(componentDef, resolvedState)
   let vnode: any
   try {
     vnode = componentDef({
@@ -516,31 +734,38 @@ function renderToStringInternal(componentDef: any, state: any, context: Record<s
       children: [],
       slots: {},
       context: mergedContext,
-      peers: {},
-    }, resolvedState, mergedContext, {})
+      uid: makeUid(uid),
+    })
   } catch (err: any) {
-    if (typeof componentDef.onError === 'function') {
-      try {
-        vnode = componentDef.onError(err, {componentName: componentDef.name || 'Component'})
-      } catch (_) {
-        vnode = {sel: 'div', data: {attrs: {'data-sygnal-error': ''}}, children: [], text: undefined, elm: undefined, key: undefined}
-      }
-    } else {
-      vnode = {sel: 'div', data: {attrs: {'data-sygnal-error': ''}}, children: [], text: undefined, elm: undefined, key: undefined}
-    }
+    vnode = viewFailed(componentDef, err, componentDef.name || 'Component')
   }
 
-  if (!vnode) {
-    vnode = {sel: 'div', data: {}, children: [], text: undefined, elm: undefined, key: undefined}
-  }
+  return processSSRTree(viewOut(vnode), mergedContext, resolvedState, uid, 'r')
+}
 
-  return processSSRTree(vnode, mergedContext, resolvedState)
+// G-465: a form field's `value` (a DOM property) has no attribute on <textarea> / <select>: the
+// textarea's goes in as its text, the select's marks the matching <option> (`sv`: the values, as
+// strings, of the <select> the option is in, and whether it is multiple) as selected. G-495: as
+// the browser does: an option without a value matches by its text with ASCII whitespace stripped
+// and collapsed; a single select marks only its first match; an explicit `selected` (true or
+// false) is the option's own. G-496: not in t.html()'s innerHTML mode (a property, which
+// innerHTML doesn't show)
+type SV = {v: string[]; m: boolean}
+const ws = (t: string): string => t.replace(/[\t\n\f\r ]+/g, ' ').replace(/^ | $/g, '')
+const fieldValue = (data: any): any => data?.props?.value ?? data?.attrs?.value
+const withoutValue = (data: any): any => {
+  const out = {...data}
+  if (out.props) { out.props = {...out.props}; delete out.props.value }
+  if (out.attrs) { out.attrs = {...out.attrs}; delete out.attrs.value }
+  return out
 }
+const textOf = (v: any): string => v == null ? '' : typeof v != 'object' ? String(v)
+  : v.text != null ? String(v.text) : Array.isArray(v.children) ? v.children.map(textOf).join('') : ''
 
 /**
  * Serialize a VNode tree to an HTML string.
  */
-function vnodeToHtml(vnode: any): string {
+function vnodeToHtml(vnode: any, sv?: SV): string {
   if (vnode == null) return ''
 
   // Text node
@@ -553,7 +778,7 @@ function vnodeToHtml(vnode: any): string {
     if (vnode.text != null) return escapeHtml(String(vnode.text))
     // Fragment: no selector, but has children — concatenate child HTML
     if (vnode.children && Array.isArray(vnode.children)) {
-      return vnode.children.map((c: any) => vnodeToHtml(c)).join('')
+      return vnode.children.map((c: any) => vnodeToHtml(c, sv)).join('')
     }
     return ''
   }
@@ -561,8 +786,28 @@ function vnodeToHtml(vnode: any): string {
   // Parse selector: tag#id.class1.class2
   const {tag, id, selectorClasses} = parseSelector(sel)
 
+  let data = vnode.data || {}, content: string | undefined
+  const value = fieldValue(data)
+  if (innerHtmlMode) {
+    // (G-496)
+  } else if (tag == 'textarea' && value != null) {
+    data = withoutValue(data)
+    // the HTML parser drops a leading newline (a CR or CRLF is one: G-495), so one is added
+    const t = String(value)
+    content = escapeHtml((t[0] == '\n' || t[0] == '\r' ? '\n' : '') + t)
+  } else if (tag == 'select' && value != null) {
+    data = withoutValue(data)
+    sv = {v: ([] as any[]).concat(value).map(String), m: !!(data.props?.multiple ?? data.attrs?.multiple)}
+  } else if (tag == 'option' && sv && data.props?.selected == null && data.attrs?.selected == null) {
+    if (sv.v.includes(value != null ? String(value) : ws(textOf(vnode)))) {
+      data = {...data, attrs: {...data.attrs, selected: true}}
+      if (!sv.m) sv.v = []
+    }
+  }
+  if (tag != 'select' && tag != 'optgroup' && tag != 'option') sv = undefined
+
   // Build attributes from VNode data
-  const attrs = buildAttributes(vnode.data || {}, id, selectorClasses)
+  const attrs = buildAttributes(data, id, selectorClasses, tag.includes('-'))
 
   // Opening tag
   let html = `<${tag}`
@@ -570,7 +815,7 @@ function vnodeToHtml(vnode: any): string {
     if (val === true) {
       html += ` ${key}`
     } else if (val !== false && val != null) {
-      html += ` ${key}="${escapeHtml(String(val))}"`
+      html += ` ${key}="${escapeHtml(String(val), true)}"`
     }
   }
   html += '>'
@@ -589,13 +834,15 @@ function vnodeToHtml(vnode: any): string {
 
   // Children — snabbdom uses `text` for single text children (even when
   // `children` holds a text element object). Prioritize `text` when set.
-  if (vnode.text != null) {
+  if (content !== undefined) {
+    html += content
+  } else if (vnode.text != null) {
     html += escapeHtml(String(vnode.text))
   } else if (vnode.children) {
     // children can be an array or a single text element object
     const kids = Array.isArray(vnode.children) ? vnode.children : [vnode.children]
     for (const child of kids) {
-      html += vnodeToHtml(child)
+      html += vnodeToHtml(child, sv)
     }
   }
 
@@ -644,29 +891,49 @@ function parseSelector(sel: string): {tag: string; id: string | null; selectorCl
 /**
  * Build an ordered list of [attrName, attrValue] from VNode data.
  */
+// 1-R G-365: camelCase HTML IDL properties whose content attribute is their lowercase name
+const IDL_ATTRS = /^(tabIndex|readOnly|maxLength|minLength|contentEditable|accessKey|inputMode|enterKeyHint|spellCheck|autoFocus|autoComplete|autoCapitalize|autoPlay|noValidate|formAction|formEnctype|formMethod|formNoValidate|formTarget|crossOrigin|referrerPolicy|useMap|isMap|dateTime|colSpan|rowSpan|srcSet|allowFullscreen|playsInline|noModule|popoverTarget|popoverTargetAction|encType)$/
+const kebab = (k: string): string => k.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase())
+
 function buildAttributes(
   data: any,
   selectorId: string | null,
-  selectorClasses: string[]
+  selectorClasses: string[],
+  custom?: boolean
 ): Array<[string, any]> {
   const result: Array<[string, any]> = []
   const classNames: string[] = [...selectorClasses]
 
   // From data.props (DOM properties like className, htmlFor, etc.)
   if (data.props) {
-    for (const [key, val] of Object.entries(data.props)) {
+    for (let [key, val] of Object.entries(data.props)) {
       if (key === 'className') {
         if (typeof val === 'string' && val) classNames.push(val)
       } else if (key === 'htmlFor') {
         result.push(['for', val])
       } else if (key === 'innerHTML' || key === 'textContent') {
         // Skip — handled separately if needed
-      } else if (key === 'sygnalOptions' || key === 'sygnalFactory') {
-        // Internal — skip
-      } else if (typeof val === 'boolean') {
-        if (val) result.push([key, true])
-      } else if (val != null) {
-        result.push([key, val])
+      } else if (custom && (typeof val === 'function' || (val && typeof val === 'object'))) {
+        // PLAN-5 D199: a custom element's function / object property has no attribute form
+      } else {
+        // PLAN-5 D199 / 1-R G-365: a custom element's camelCase property as attributes. A
+        // reflected HTML IDL name gets its attribute (tabIndex → tabindex, readOnly → readonly),
+        // an ARIA reflection its aria-* one (ariaLabel → aria-label). Any other camelCase name is
+        // written twice: kebab-case (withClear → with-clear: Web Awesome / Shoelace's declared
+        // attributes, Stencil's default, sygnal/element's defineElement) and lowercase
+        // (withclear: Lit's and FAST's default attribute name); the element reads the one it
+        // observes and ignores the other
+        const keys = !custom || !/[A-Z]/.test(key) ? [key]
+          : IDL_ATTRS.test(key) ? [key.toLowerCase()]
+          : /^aria[A-Z]/.test(key) ? [kebab(key)]
+          : [kebab(key), key.toLowerCase()]
+        for (const k of keys) {
+          if (typeof val === 'boolean') {
+            if (val) result.push([k, true])
+          } else if (val != null) {
+            result.push([k, val])
+          }
+        }
       }
     }
   }