sygnal 6.3.0 → 6.5.0

package/llms.txt

@@ -4,7 +4,7 @@
 
 ## 1. Mental model
 - A component is a pure view function plus static properties: `.intent` (WHEN: sources → named action streams), `.model` (WHAT: action → one reducer per sink), `.initialState`.
-- There is one state tree. A child sees its parent's whole state, or a slice with `state="key"`. A Collection item sees one array element.
+- There is one state tree. A child sees its parent's whole state, or a slice with `state="key"` (or a path: `state="settings.rules"`, `"boards[0].title"`). A Collection item sees one array element.
 - Every side effect is a sink of a model entry (STATE, EVENTS, PARENT, EFFECT, custom drivers). JSX never has event handlers (`onClick`).
 - Streams are xstream, not RxJS. An intent's DOM selectors only see the component's own JSX, never a child component's.
 
@@ -79,7 +79,7 @@ SaveButton.intent = ({ DOM }) => ({ SAVE: DOM.click('.save') })
 SaveButton.model = {
   SAVE: {
     STATE:  (state) => ({ ...state, saving: true }),
-    EVENTS: event('DOC_SAVED', (state) => ({ id: state.id })),  // or event('RESET'), event('MODE', 'dark')
+    EVENTS: event('DOC_SAVED', (state) => ({ id: state.id })),  // or event('RESET'), event('MODE', 'dark'); return ABORT to send nothing
   },
 }
 function Toast({ state }) {   // anywhere in the tree: EVENTS is a global bus
@@ -117,7 +117,7 @@ TaskList.initialState = { picked: null, tasks: [{ id: 1, title: 'Write' }, { id:
 TaskList.intent = ({ CHILD }) => ({ PICKED: CHILD.select(TaskItem) })  // the function, not a string
 TaskList.model = { PICKED: (state, { taskId }) => ({ ...state, picked: taskId }) }
 ```
-- `from` names an array field. Items are keyed by `.id` (by index if they have none). `filter={t => !t.done}`; `sort="title"`, `{ title: 'desc' }`, an array of those, or a compare function. Sorting and filtering only change what renders: the state array keeps its order, and an item's edit (`{ ...state, done: true }`) is written back to its element by key. Items render directly into the parent element, with no wrapper (`<Collection className>` is SYG612: put the class on your own `<ul>`). Switchable: `<Switchable of={{ home: Home, settings: Settings }} current={state.tab} />` (optional `state="slice"`); hidden pages stay alive, and `instance={key}` re-creates the current page with fresh state when the key changes (a router: `instance={state.route.path}`).
+- `from` names an array field (or a path to one: `from="board.cards"`). Items are keyed by `.id` (by index if they have none). `filter={t => !t.done}`; `sort="title"`, `{ title: 'desc' }`, an array of those, or a compare function. Sorting and filtering only change what renders: the state array keeps its order, and an item's edit (`{ ...state, done: true }`) is written back to its element by key. Items render directly into the parent element, with no wrapper (`<Collection className>` is SYG612: put the class on your own `<ul>`). Switchable: `<Switchable of={{ home: Home, settings: Settings }} current={state.tab} />` (optional `state="slice"`); hidden pages stay alive, and `instance={key}` re-creates the current page with fresh state when the key changes (a router: `instance={state.route.path}`).
 ### Behaviors (`uses`): shared state + actions
 - `TaskList.uses = { pager: pager({ pageSize: 10, next: '.newer', prev: '.older' }) }` adds `state.pager` (`{ page, pageSize, total }` + calculated `offset`, `pages`, `hasPrev`, `hasNext`) and the actions `pager.NEXT`, `pager.PREV`, `pager.GOTO`, `pager.SET_TOTAL`; a click on what `next`/`prev` name triggers them. Options set the slice's start values; the key must not also be in `initialState` (SYG127). Also from `'sygnal'`: `selection({ multi: true, item: '.pick', from: 'mails' })` (`data-id` on each item; `isSelected(state.sel, id)`) and `undo({ key: 'doc', undo: '.undo', redo: '.redo' })` (`state.history.canUndo`/`canRedo`; `coalesce: ['TYPE'], coalesceMs: 500` groups only typing, each other action is its own step; `key: ['todo', 'done']` records several keys as one step; `node_modules/sygnal/dist/guide/undo.md`).
 - Your own: `const disclosure = defineBehavior({ initialState: { open: false }, intent: ({ DOM }, { toggle }) => ({ TOGGLE: DOM.click(toggle) }), model: { TOGGLE: (slice) => ({ ...slice, open: !slice.open }) } })`, used as `uses = { more: disclosure({ toggle: '.more' }) }`. Its reducers and `calculated` get and return the slice (`state.more`), its action names have no key, and any sink works. Options: `persist: false` (UI state `persist()` never saves), `undoStep: ['DONE']` (its other actions form one gesture: one undo entry when `DONE` completes it).
@@ -258,7 +258,7 @@ TaskPage.model = {   // a page shares the parent's state: no initialState (SYG40
 - Guides: `node_modules/sygnal/dist/guide/ai-chat.md` (transports, structured `output`, tools, shipping), `ai-decisions.md` (escalation, `decide.openai()`), `ai-compose.md` (catalogs, containers, edits, `byId`), `ai-cards.md` (`chat({ ask })`, client tools), `agent.md` (the in-app assistant `uses = { assistant: chat({ form: '.ask', prompt: '.prompt', instructions }) }`, `commandBar`, security), `webmcp.md` (`experimentalExposeWebMcp(app)`, `form(schema, { tool: formTool({ name, description }) })`: experimental, outside semver), `mcp-apps.md` (`makeMcpAppDriver()`: the app inside Claude or ChatGPT); online https://sygnal.js.org/guide/ai-chat/ (and `/guide/ai-decisions/`, `/guide/ai-compose/`, `/guide/ai-cards/`, `/guide/agent/`, `/guide/webmcp/`, `/guide/mcp-apps/`)
 
 ## 4. API facts
-- **Child props**: `<Rating name="food" value={state.food} />` → `function Rating({ state, name, value })`; reducers read `props.name` (4th arg); intent gets the `props$` stream. Reserved: `state` (lens: `"key"` or `{ get, set }`), `children`, `slots`, `context`, `uid` (SYG106; an error in strict mode). `key={…}` is a child's identity (not a prop; else its `id` prop, else its place in the view): a new key re-creates it. Without `state=` a child shares its parent's whole state. A child rendered by tag (`<Stopwatch state="stopwatch" />`) has no `initialState`: its start values go in the parent's (`stopwatch: { ms: 0 }`); its own throws SYG405 and the parent renders its error fallback (a test rendering the child as the root doesn't show it). Test a child alone with `renderComponent(Child, { initialState, context: { lang: 'fr' } })` (the ancestors' context). `uid(name?)` (a view prop, also on reducers' `props`) is a stable per-instance id for `id`/`for`/`aria-*` pairs: `<label for={uid('email')}>`, `<input id={uid('email')} />`.
+- **Child props**: `<Rating name="food" value={state.food} />` → `function Rating({ state, name, value })`; reducers read `props.name` (4th arg); intent gets the `props$` stream. Reserved: `state` (`"key"`, a path `"a.b"` / `"a[0].b"` (writes copy only the levels on it; for list items use `byId`), or a `{ get, set }` lens), `children`, `slots`, `context`, `uid` (SYG106; an error in strict mode). `key={…}` is a child's identity (not a prop; else its `id` prop, else its place in the view): a new key re-creates it. Without `state=` a child shares its parent's whole state. A child rendered by tag (`<Stopwatch state="stopwatch" />`) has no `initialState`: its start values go in the parent's (`stopwatch: { ms: 0 }`); its own throws SYG405 and the parent renders its error fallback (a test rendering the child as the root doesn't show it). Test a child alone with `renderComponent(Child, { initialState, context: { lang: 'fr' } })` (the ancestors' context). `uid(name?)` (a view prop, also on reducers' `props`) is a stable per-instance id for `id`/`for`/`aria-*` pairs: `<label for={uid('email')}>`, `<input id={uid('email')} />`.
 - **A sliced child with its own start values**: `Editor.isolatedState = true` lets `<Editor state="draft" />` keep an `initialState`, used only while `state.draft` is `undefined` (an existing slice is kept; SYG425 warns when it lacks keys the `initialState` has). To start it from its `initialState` on every mount: `<Editor state="draft" resetState />`.
 - **CHILD.select(Comp)** emits exactly what the child's `PARENT` function returned, for every instance (Collection items too). Put an id in the payload.
 - **Extract a component without changing markup**: snapshot `t.html()` on the unchanged code first; move the elements verbatim into the child (a component adds no wrapper element and no attributes, so the HTML stays identical); props in, `PARENT` out; the parent drops its old selectors and uses `CHILD.select(Child)`; the snapshot must still match. Recipe: https://sygnal.js.org/guide/parent-child/#recipe-extract-a-component-without-changing-the-markup

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sygnal",
-  "version": "6.3.0",
+  "version": "6.5.0",
   "description": "An intuitive framework for building fast and small components or applications based on Cycle.js",
   "main": "./dist/index.cjs.js",
   "types": "./dist/index.d.ts",

package/src/core/cell.ts

@@ -38,24 +38,42 @@ export function localCell(app: {commit(): void}, parent: Cell): Cell {
 }
 
 /**
- * state="key". `owner`: the parent's name when `k` is one of its calculated fields (SYG409:
- * writes ignored; `what` names the writer in the message). `dflt`: an isolated child's
- * initialState, read while the slice is undefined. `has()`: the slice itself is defined (D174).
+ * SPIKE (state paths): a state designator as segments. A plain key is one segment; 'a.b.0' and
+ * 'a[0].b' are paths into nested objects and arrays. No array form: an array `from` / `state` is
+ * the data passed by mistake (SYG410 / SYG412), and ['x', 'y'] would be ambiguous.
+ */
+export const pathOf = (p: string): string[] => p.replace(/\[(\d+)\]/g, '.$1').split('.')
+const getIn = (o: any, ks: any[]) => { for (const k of ks) { if (o == null) return undefined; o = o[k] } return o }
+/** `o` with the value at `ks` replaced; only the levels on the path are copied (a missing level becomes {}) */
+function setIn(o: any, ks: any[], i: number, v: any): any {
+  if (i == ks.length) return v
+  const k = ks[i], cur = o?.[k], n = setIn(cur, ks, i + 1, v)
+  if (n === cur && o != null) return o
+  if (Array.isArray(o)) { const c = o.slice(); c[k] = n; return c }
+  return {...o, [k]: n}
+}
+
+/**
+ * state="key" (SPIKE: or a path, 'a.b' / 'a[0].b'). `owner`: the parent's name when the first
+ * segment is one of its calculated fields (SYG409: writes ignored; `what` names the writer in
+ * the message). `dflt`: an isolated child's initialState, read while the slice is undefined.
+ * `has()`: the slice itself is defined (D174).
  */
 export function keyCell(parent: Cell, k: string, owner?: string | false, dflt?: any, what = 'Sub-component'): Cell & {has(): boolean} {
+  const ks = pathOf(k)
   let lp: any = {}, lv: any
   return {
     get() {
       const p = parent.get()
-      if (p !== lp) { lp = p; lv = p == null ? undefined : p[k]; if (lv === undefined) lv = dflt }
+      if (p !== lp) { lp = p; lv = getIn(p, ks); if (lv === undefined) lv = dflt }
       return lv
     },
     set(v) {
-      if (owner) return warn('SYG409', owner, `${what} tried to update calculated field '${k}'; ignored`, 'Bind it to a non-calculated field')
+      if (owner) return warn('SYG409', owner, `${what} tried to update calculated field '${ks[0]}'; ignored`, 'Bind it to a non-calculated field')
       const p = parent.get()
-      if (p?.[k] !== v) parent.set({...p, [k]: v})
+      if (getIn(p, ks) !== v) parent.set(setIn(p, ks, 0, v))
     },
-    has: () => parent.get()?.[k] !== undefined,
+    has: () => getIn(parent.get(), ks) !== undefined,
   }
 }
 

package/src/core/hosts/collection.ts

@@ -4,8 +4,9 @@
  *
  * It stands where the `<Collection>` marker was in its owner's template and renders the items
  * inside the owner's render: no stream of its own, no pickCombine.
- * - `of`: a component function (D163: no names). `from`: a state key (SYG409 on a calculated
- *   one), a `{ get, set }` lens (SYG412 without get(); SYG401 for a non-array) or none (the
+ * - `of`: a component function (D163: no names). `from`: a state key or path ('board.cards';
+ *   SYG409 on a calculated first segment; SYG401 when it isn't an array: the dev entry's), a
+ *   `{ get, set }` lens (SYG412 without get(); SYG401 for a non-array) or none (the
  *   owner's state is the array).
  * - Items are keyed by `id`, an id-less item by its raw index (D169); one key -> index map per
  *   array identity serves every item (cell.ts indexer). A duplicate key renders its first element
@@ -30,7 +31,7 @@
  */
 import {hosts, resolvers} from '../registry'
 import {Inst, shallowEq} from '../instance'
-import {Cell, Index, indexer, itemCell, keyCell, keyOf, keyName} from '../cell'
+import {Cell, Index, indexer, itemCell, keyCell, keyOf, keyName, pathOf} from '../cell'
 import {CoreDef, isObj} from '../define'
 import {uidPart, vtStyle} from '../../shared'
 import {viewOf} from '../view'
@@ -89,14 +90,8 @@ function arrayCell(owner: Inst, from: any): Cell | null {
       set: (v) => oc.set(v),
     }
   }
-  if (typeof from == 'string') {
-    const cs = oc.get(), calc = owner.def.calcNames?.has(from)
-    if (isObj(cs) && !(from in cs) && !calc) {
-      const arrays = Object.keys(cs).filter(k => Array.isArray(cs[k]))
-      warn('SYG401', name, `Collection from="${from}" is not in state${arrays.length ? ` (array fields: '${arrays.join("', '")}')` : ''}; it renders nothing until it exists`, 'Set it to an array in initialState')
-    } else if (isObj(cs) && !Array.isArray(cs[from])) warn('SYG401', name, `Collection 'from' field '${from}' is not an array; it renders nothing`, 'Set it to an array in initialState')
-    return keyCell(oc, from, calc && name, undefined, 'Collection')
-  }
+  // a key or a path ('board.cards'); SYG401 for one that isn't an array is the dev entry's (checks/collections.ts)
+  if (typeof from == 'string') return keyCell(oc, from, owner.def.calcNames?.has(pathOf(from)[0]) && name, undefined, 'Collection')
   if (isObj(from) && typeof from.get == 'function') {
     let lp: any = {}, lv: any
     return {

package/src/core/hosts/switchable.ts

@@ -18,7 +18,7 @@
 import {hosts} from '../registry'
 import {resolve} from './collection'
 import {Inst, shallowEq} from '../instance'
-import {Cell, keyCell, lensCell, localCell} from '../cell'
+import {Cell, keyCell, lensCell, localCell, pathOf} from '../cell'
 import {isObj} from '../define'
 import {uidPart} from '../../shared'
 import {error as logError, fail} from '../../extra/diagnostics/legacy'
@@ -61,7 +61,7 @@ export class SwitchableHost {
 
   constructor(public owner: Inst, props: Record<string, any>, children: any[], id: string) {
     check(owner, props)
-    const st = props.state, calc = typeof st == 'string' && owner.def.calcNames?.has(st)
+    const st = props.state, calc = typeof st == 'string' && owner.def.calcNames?.has(pathOf(st)[0])
     this.cell = typeof st == 'string' ? keyCell(owner.cell, st, calc && owner.def.name, undefined, 'Switchable sub-component')
       : st !== undefined ? lensCell(owner.cell, st, owner.def.name, (e) => owner.app.appError(owner, e, 'view'))
       : owner.cell

package/src/core/instance.ts

@@ -20,7 +20,7 @@ import {warn, error as logError, fail} from '../extra/diagnostics/legacy'
 import type {App} from './runtime'
 import {tearDown, INST, SEED} from './teardown'
 import {CoreDef, defOf, isObj} from './define'
-import {Cell, CalcCell, calcCell, keyCell, lensCell, localCell} from './cell'
+import {Cell, CalcCell, calcCell, keyCell, lensCell, localCell, pathOf} from './cell'
 import {hosts, posts, pres, resolvers} from './registry'
 import {handle} from './actions'
 import {viewOf} from './view'
@@ -536,7 +536,7 @@ export class Inst {
         fail('SYG405', def.name, 'Sub-component initialState replaces the state its parent passes in', 'Remove initialState, or set isolatedState = true')
       }
       const dflt = def.isolated ? def.initialState : undefined
-      const cell = typeof st == 'string' ? keyCell(this.cell, st, calcOf?.has(st) && this.def.name, dflt)
+      const cell = typeof st == 'string' ? keyCell(this.cell, st, calcOf?.has(pathOf(st)[0]) && this.def.name, dflt)
         : st !== undefined ? lensCell(this.cell, st, this.def.name, (e) => app.appError(this, e, 'view'), dflt)
         : def.isolated ? localCell(app, this.cell) : this.cell
       const scope = app.scope()

package/src/extra/diagnostics/checks/collections.ts

@@ -1,18 +1,13 @@
 /**
- * SYG401 — <Collection> has no `from` and the whole state is not an array (warn).
- * A defined `from` is checked by the core (D22).
+ * SYG401 — a <Collection> / <VirtualCollection> whose items aren't an array (warn):
+ *   - no `from`, and the whole state is not an array
+ *   - `from` a key or a path ('board.cards') that isn't in state, or isn't an array there
+ * A lens `from` (a getter that returns a non-array, SYG401) and an invalid `from` (SYG412) are
+ * the core's. The string `from` checks moved here from the core in 6.5.0 (production apps don't
+ * print them; dev and tests do: sygnal/vite and renderComponent load this entry).
  *
- * Reported through diagnostics in addition to the existing console output.
- *
- * Mechanism: the core has no hook at Collection instantiation, and the
- * Collection marker vnode is gone by the time onRender sees the tree. So, at
- * onModel (construction time, before the first render), this check wraps the
- * component INSTANCE's instantiateCollection method (an own property that
- * shadows the prototype method; Component calls `this.instantiateCollection`
- * for every new Collection). The wrapper inspects the marker's props and the
- * component's current state, then always calls the original. This only
- * happens when the dev-only 'sygnal/diagnostics' entry is loaded and
- * diagnostics are on. Reported once per component name and `from` value.
+ * Called by the dev layer (next.ts onHostProps) with the owner's facade and the host's props.
+ * Reported once per component name and `from` value.
  */
 import type {DiagnosticCheck} from '../index'
 import {reportSafely, once, nameOf, isPlainObject} from './shared'
@@ -30,25 +25,36 @@ export function checkCollection(component: any, el: any): void {
   let state = component.currentState
   try { if (typeof component.addCalculated === 'function') state = component.addCalculated(state) } catch (_) {}
 
-  let problem: string | undefined
-  let fix = `Pass the name of an array field in ${name}'s state, e.g. <Collection of={${ofName}} from="items" />, and initialize that field to [] in initialState`
-  // Every defined `from` (string field, lens object, or an invalid value) is reported by
-  // the core itself (SYG401/SYG412, retrofitted in 1E) in every diagnostics mode (D22), so
-  // this check only covers a missing `from`.
+  if (typeof from === 'string') return checkFrom(component, name, from, ofName, state)
+  // a lens or an invalid value: the core's (SYG401 / SYG412)
   if (from !== undefined) return
-  if (!Array.isArray(state) && !(state && Array.isArray(state.value))) {
-    problem = `has no 'from' prop, so it uses ${name}'s whole state, which is ${describe(state)}, not an array`
-  }
-
-  if (!problem || !once(`SYG401:${name}:undefined`)) return
+  if (Array.isArray(state) || (state && Array.isArray(state.value))) return
+  if (!once(`SYG401:${name}:undefined`)) return
   reportSafely('SYG401', {
     component,
-    message: `<Collection of={${ofName}}> ${problem}, so it renders no items`,
-    fix,
+    message: `<Collection of={${ofName}}> has no 'from' prop, so it uses ${name}'s whole state, which is ${describe(state)}, not an array, so it renders no items`,
+    fix: `Pass the name of an array field in ${name}'s state, e.g. <Collection of={${ofName}} from="items" />, and initialize that field to [] in initialState`,
     data: {from: 'undefined', of: ofName},
   })
 }
 
+/** `from` a key or a path ('board.cards', 'boards[0].cards'), as the core reads it (cell.ts pathOf) */
+function checkFrom(component: any, name: string, from: string, ofName: string, state: any): void {
+  const ks = from.replace(/\[(\d+)\]/g, '.$1').split('.')
+  const calc = component._calculatedFieldNames
+  if (calc?.has?.(ks[0])) return
+  const at = ks.slice(0, -1).reduce((o: any, k: string) => (o == null ? o : o[k]), state), last = ks[ks.length - 1]
+  if (!isPlainObject(at) && !Array.isArray(at)) return // a level still missing: renders once it appears (D178)
+  let message: string
+  if (!(last in at)) {
+    const arrays = Object.keys(at).filter(k => Array.isArray(at[k]))
+    message = `Collection from="${from}" is not in state${arrays.length ? ` (array fields: '${arrays.join("', '")}')` : ''}; it renders nothing until it exists`
+  } else if (!Array.isArray(at[last])) message = `Collection 'from' field '${from}' is not an array; it renders nothing`
+  else return
+  if (!once(`SYG401:${name}:${from}`)) return
+  reportSafely('SYG401', {component, message, fix: 'Set it to an array in initialState', data: {from, of: ofName}})
+}
+
 const WRAPPED = '__sygnalDiagWrapped'
 
 export const collectionsCheck: DiagnosticCheck = {

package/src/extra/diagnostics/checks/dom.ts

@@ -25,8 +25,10 @@
  *      that matches in one Collection item is fine for all of them.
  *
  * SYG103 noise control (conditional rendering is normal): a selector whose
- * class/id/tag tokens all appear in the component's view source is assumed
- * to be conditionally rendered and is not reported. A selector that does not
+ * class/id/tag tokens all appear in the component's view source (or in the
+ * words sygnal/vite registered for it: markup drawn by view helpers in its
+ * module and its relative imports) is assumed to be conditionally rendered
+ * and is not reported. A selector that does not
  * appear in the view (typo, or an element rendered elsewhere) is reported as
  * info on the first sweep, and escalated per the rule above.
  *
@@ -71,12 +73,18 @@ onReset(() => {
 
 const unref = (t: any) => { if (t && typeof t.unref === 'function') t.unref(); return t }
 
+/**
+ * The view's source, plus the words sygnal/vite registered for the component (its module's and
+ * its relative imports' string literals: markup a view helper draws), when it did
+ */
 function viewSource(component: any): string {
   const view = component && component.view
   if (typeof view !== 'function') return ''
   let src = viewTokens.get(view)
   if (src === undefined) {
     try { src = Function.prototype.toString.call(view) } catch (_) { src = '' }
+    const registered = (globalThis as any).__SYGNAL_VIEW_TOKENS__?.get?.(view)
+    if (typeof registered == 'string') src += '\n' + registered
     viewTokens.set(view, src as string)
   }
   return src as string

package/src/extra/diagnostics/checks/next.ts

@@ -66,6 +66,33 @@ function removed(component: any, name: string, anchor: string, detail?: string):
   })
 }
 
+/**
+ * SYG428 (6.5.0): `state="a.b"` / `from="a.b"` is a path, read as `state.a.b`. Before 6.5.0 it was
+ * one key named "a.b"; when the owner's state still has such a key, the designator now misses it.
+ */
+function dottedKey(f: any, what: string, designator: any, ownerState: any): void {
+  if (typeof designator != 'string' || !/[.[]/.test(designator) || !isPlainObject(ownerState)) return
+  if (!Object.prototype.hasOwnProperty.call(ownerState, designator) || !once(`SYG428:${f.name}:${designator}`)) return
+  devReport('SYG428', {
+    component: f.name,
+    message: `${what}="${designator}" is a path (since 6.5.0), read as ${designator.replace(/\[(\d+)\]/g, '.$1').split('.').map((k: string) => `[${JSON.stringify(k)}]`).join('')}, but the state has a key named "${designator}"`,
+    fix: `Rename the key so it has no dot (and point ${what} at it), or use a lens: ${what}={{ get: (s) => s['${designator}'], set: (s, v) => ({ ...s, '${designator}': v }) }}`,
+    data: {designator, what},
+  })
+}
+
+/** SYG427: CHILD.select(x) with no component (an import of a name the module doesn't export) */
+function notComponent(f: any, x: any): void {
+  if (!once(`SYG427:${f.name}`)) return
+  const got = x === null ? 'null' : typeof x == 'object' ? 'an object' : String(x)
+  devReport('SYG427', {
+    component: f.name,
+    message: `${f.name}'s intent calls CHILD.select(${got}): that is not a component, so it never emits`,
+    fix: "Pass the child component itself, and check its import: a name its module doesn't export is undefined (Vitest runs on; the browser fails to link the module). Export it: export function Child() { … }",
+    data: {got},
+  })
+}
+
 /** the removed forms a definition shows (statics, view arity, model keys), once per function */
 let seenDefs = new WeakSet<object>()
 // G-332: resetChecks() forgets them (as the once() dedupe)
@@ -361,11 +388,16 @@ export function nextHooks(_api: any): any {
   // G-527: one chain of SYG149 checks over the latest patches (G-501: it stops once every instance
   // that renders a named Collection is disposed, the app's dispose included)
   const vtCheck = vtChecker(() => vtp.size && on())
+  // SYG428: the live instances by id, to read a child's parent state
+  const live = new Map<any, any>()
   return {
     onCreate(iv: any) {
+      live.set(iv.id, iv)
       if (!on()) return
       log.onCreate(iv)
       const f = fac(iv)
+      const parent = live.get(iv.parentId)
+      if (parent) dottedKey(f, `<${f.name} state`, iv.props?.state, parent.state)
       removedStatics(f)
       if (!iv.def.intent) wire(iv, [])
     },
@@ -381,7 +413,11 @@ export function nextHooks(_api: any): any {
         get(t: any, k: any) {
           const v = t[k]
           if (k !== 'CHILD' || !v || typeof v.select != 'function') return v
-          return {...v, select: (x: any, ...r: any[]) => { if (typeof x == 'string') removed(f, f.name, 'child-select-name', `CHILD.select('${x}')`); return v.select(x, ...r) }}
+          return {...v, select: (x: any, ...r: any[]) => {
+            if (typeof x == 'string') removed(f, f.name, 'child-select-name', `CHILD.select('${x}')`)
+            else if (typeof x != 'function') notComponent(f, x)
+            return v.select(x, ...r)
+          }}
         },
       })
     },
@@ -402,6 +438,7 @@ export function nextHooks(_api: any): any {
     },
     onDispose(iv: any) {
       vtp.delete(iv)
+      live.delete(iv.id)
       H.onDispose(fac(iv))
     },
     onAction(iv: any, a: any) { log.onAction(iv, a) },
@@ -435,6 +472,7 @@ export function nextHooks(_api: any): any {
         if (w.length) removed(f, f.name, 'collection-wrapper', w.map(k => k == 'dataset' ? 'data-*' : k == 'hook' ? 'ref / hook' : k).join(', '))
       }
       try { checkCollection(f, {data: {props}}) } catch (_) { /* ignore */ }
+      dottedKey(f, `<${sel == 'collection' ? 'Collection' : 'VirtualCollection'} from`, props.from, owner.state)
       // G-419: SYG148 for a prefix that isn't an identifier; a valid one is checked for
       // duplicate names after each patch (SYG149). G-460: a falsy one names nothing (as the host)
       const p = props.viewTransitionName

package/src/extra/diagnostics/checks/persist.ts

@@ -6,7 +6,8 @@
  *          or restored. Under Vike's Layout/Wrapper shell (the `__vike` source) the message says
  *          persist isn't supported on Vike pages, layouts or wrappers yet.
  * SYG223 (warn)  — a `pick` / `omit` key of persist() that isn't a key of the component's
- *          `initialState` static (a typo: that key is never saved, or never left out).
+ *          `initialState` static or of its `uses` (a behavior's slice, such as a chat's), so it is
+ *          a typo: that key is never saved, or never left out.
  * Once per component name. Mechanism: onModel reads the static `view.persist` (the persist()
  * value carries its options) and `view.initialState`.
  */
@@ -38,7 +39,8 @@ export const persistCheck: DiagnosticCheck = {
     }
     const o = p.options, init = view.initialState
     if (!o || !init || typeof init != 'object') return
-    const keys = Object.keys(init)
+    // a behavior's slice (`uses = { chat: chat() }`) is a state key too
+    const keys = [...Object.keys(init), ...Object.keys(view.uses || {})]
     for (const opt of ['pick', 'omit']) {
       for (const k of Array.isArray(o[opt]) ? o[opt] : []) {
         if (keys.includes(k) || !once(`SYG223:${name}:${opt}:${k}`)) continue

package/src/extra/diagnostics/checks/wiring.ts

@@ -36,12 +36,20 @@ const underTest = (c: any) => {
   const dom = c?.sources?.[c.DOMSourceName || 'DOM']
   return !!dom && typeof dom == 'object' && '_hub' in dom
 }
-// G-620: an LLM / chat sink gets the chat driver's fix, not makeFetchDriver's
-const driverFix = (sink: string) =>
-  `Pass a driver named ${sink} to run(): ` + (/^(LLM|CHAT|AI|ASSISTANT)$/.test(sink)
-    ? `run(App, { ${sink}: makeChatDriver({ transport: openResponses({ baseURL: 'http://localhost:11434/v1', model: 'llama3.2' }) }) }) (from 'sygnal/ai'; uiMessageStream('/api/chat') for an AI SDK server)`
-    : `run(App, { ${sink}: makeFetchDriver() }) for HTTP, or driverFromAsync(fn) / your own driver`) +
-  `. Check the spelling against the drivers you pass`
+// G-620: the usual driver for a known sink name (an LLM / chat sink gets the chat driver's fix,
+// SW the service worker's), the generic text for any other name
+const DRIVER_FOR: Array<[RegExp, (sink: string) => string]> = [
+  [/^(LLM|CHAT|AI|ASSISTANT)$/, (s) => `run(App, { ${s}: makeChatDriver({ transport: openResponses({ baseURL: 'http://localhost:11434/v1', model: 'llama3.2' }) }) }) (from 'sygnal/ai'; uiMessageStream('/api/chat') for an AI SDK server)`],
+  [/^(SW|SERVICE_WORKER)$/, (s) => `run(App, { ${s}: makeServiceWorkerDriver('/sw.js', { enabled: import.meta.env.PROD }) }) (enabled: false keeps the driver, with no service worker, on a dev server)`],
+  [/^(HTTP|API|FETCH)$/, (s) => `run(App, { ${s}: makeFetchDriver() })`],
+  [/^(WS|SOCKET)$/, (s) => `run(App, { ${s}: makeSocketDriver() })`],
+]
+const driverFix = (sink: string) => {
+  const known = DRIVER_FOR.find(([re]) => re.test(sink))
+  return `Pass a driver named ${sink} to run(): ` +
+    (known ? known[1](sink) : `run(App, { ${sink}: makeFetchDriver() }) for HTTP, or driverFromAsync(fn) / your own driver`) +
+    `. Check the spelling against the drivers you pass`
+}
 
 export const wiringCheck: DiagnosticCheck = {
   id: 'wiring',

package/src/extra/diagnostics/codes.ts

@@ -278,6 +278,11 @@ export const CODE_TITLES: Record<string, string> = {
   SYG425: 'isolatedState slice lacks initialState keys',
   // PLAN-9 (D471): checks/next.ts; dev entry and sygnal-check
   SYG426: 'Deprecated lowercase marker tag',
+  // checks/next.ts and sygnal-check: a component reference that is not a function (an import of
+  // a name the module doesn't export is undefined under Vitest)
+  SYG427: 'CHILD.select() of something that is not a component',
+  // 6.5.0 (checks/next.ts): state="a.b" / from="a.b" is a path; the parent state has a literal "a.b" key
+  SYG428: 'A state path that names a key containing a dot',
   // 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",
@@ -486,6 +491,10 @@ export const DEV_CODE_SEVERITY: Record<string, DiagnosticSeverity> = {
   SYG425: 'warn',
   // PLAN-9 (checks/next.ts): D471 a lowercase <collection> / <switchable> tag (deprecated in 6.3.0)
   SYG426: 'warn',
+  // checks/next.ts: CHILD.select(undefined), usually a missing export
+  SYG427: 'error',
+  // checks/next.ts: a path designator that 6.4 read as one key with a dot
+  SYG428: 'warn',
   // PLAN-9 (checks/next.ts): D470 key identity, two children with one identity
   SYG453: 'warn',
   SYG612: 'error',

package/src/extra/pwa.ts

@@ -18,6 +18,8 @@ export interface ServiceWorkerCommand {
 
 export interface ServiceWorkerOptions {
   scope?: string;
+  /** false: register nothing, ignore commands, emit nothing (a dev server: `enabled: import.meta.env.PROD`) */
+  enabled?: boolean;
 }
 
 export interface InstallPrompt {
@@ -47,7 +49,7 @@ export function makeServiceWorkerDriver(
   return function serviceWorkerDriver(sink$: Stream<ServiceWorkerCommand>): ServiceWorkerSource {
     const events = new EventTarget();
 
-    if (typeof navigator !== 'undefined' && 'serviceWorker' in navigator) {
+    if (options.enabled !== false && typeof navigator !== 'undefined' && 'serviceWorker' in navigator) {
       navigator.serviceWorker
         .register(scriptUrl, {scope: options.scope})
         .then((reg) => {

package/src/extra/reducers.ts

@@ -5,6 +5,8 @@
  * shorthand factories for the most frequent reducer shapes.
  */
 
+import {ABORT, isAbort} from '../shared'
+
 // ── set() ──────────────────────────────────────────────────────────
 /**
  * Create a reducer that merges a partial update into state.
@@ -40,13 +42,17 @@ export function toggle<S = any>(field: keyof S & string): (state: S) => S {
 }
 
 // event(type, payload?) → EVENTS sink fn for the object form:
-// `ACTION: { EVENTS: event('TYPE', (state, data) => payload) }` (static payloads allowed)
+// `ACTION: { EVENTS: event('TYPE', (state, data) => payload) }` (static payloads allowed).
+// A payload function that returns ABORT sends nothing, as ABORT does from any other sink.
 export function event(
   type: string,
   payload?: any | ((state: any, data: any, next: Function, props: any) => any)
-): (state: any, data: any, next: Function, props: any) => { type: string; data: any } {
+): (state: any, data: any, next: Function, props: any) => { type: string; data: any } | typeof ABORT {
   return typeof payload === 'function'
-    ? (state, data, next, props) => ({ type, data: payload(state, data, next, props) })
+    ? (state, data, next, props) => {
+      const d = payload(state, data, next, props)
+      return isAbort(d) ? ABORT : { type, data: d }
+    }
     : () => ({ type, data: payload })
 }
 
@@ -66,6 +72,6 @@ export function event(
 export function emit(
   type: string,
   data?: any | ((state: any, actionData: any, next: Function, props: any) => any)
-): { EVENTS: (state: any, actionData: any, next: Function, props: any) => { type: string; data: any } } {
+): { EVENTS: (state: any, actionData: any, next: Function, props: any) => { type: string; data: any } | typeof ABORT } {
   return { EVENTS: event(type, data) }
 }

package/src/index.d.ts

@@ -59,7 +59,9 @@ export type ViewProps<STATE = any, PROPS = {}, CONTEXT = {}> =
 
 /**
  * The `state` prop a parent passes to a sub-component in JSX: the name of a field of the
- * parent's state (`state="editor"`) or a lens. Without it the child shares the parent's state.
+ * parent's state (`state="editor"`), a path to nested state (`state="settings.rules"`,
+ * `state="boards[0].title"`; since 6.5.0: a write copies only the levels on the path), or a
+ * lens. Without it the child shares the parent's state.
  */
 export type StateProp = string | Lense<any, any>
 
@@ -156,7 +158,7 @@ type EventNextFunction = (action: string, data?: any, delay?: number) => void
 
 /** Payload function for `event()` / `emit()`: receives the reducer arguments, returns the event data. */
 export type EventPayloadFunction<TYPE extends string = string, STATE = any, DATA = any> =
-  (state: STATE, data: DATA, next: EventNextFunction, props: any) => EventPayload<TYPE>
+  (state: STATE, data: DATA, next: EventNextFunction, props: any) => EventPayload<TYPE> | ABORT
 
 /**
  * Remaining arguments of `event()` / `emit()` when the payload is a static value.
@@ -1574,13 +1576,25 @@ export type ArrayKeysOf<STATE> = {
   [KEY in keyof STATE]-?: NonNullable<STATE[KEY]> extends ReadonlyArray<any> ? KEY : never
 }[keyof STATE] & string
 
+/**
+ * Array-valued keys of STATE and dotted paths to arrays in its nested objects, up to three levels
+ * (`'tasks' | 'board.cards'`; since 6.5.0). Paths through array positions (`'boards.0.cards'`)
+ * aren't listed: for a list item, use `byId`.
+ */
+export type ArrayPathsOf<STATE, DEPTH extends unknown[] = []> = DEPTH['length'] extends 3 ? never : {
+  [KEY in keyof STATE & string]-?: NonNullable<STATE[KEY]> extends ReadonlyArray<any> ? KEY
+    : NonNullable<STATE[KEY]> extends Record<string, any> ? `${KEY}.${ArrayPathsOf<NonNullable<STATE[KEY]>, [...DEPTH, 1]>}`
+    : never
+}[keyof STATE & string]
+
 /**
  * Valid `from` values for a Collection: any string or Lense while the parent STATE is unknown
- * (`any`); otherwise an array-valued key of STATE or a Lense over STATE.
+ * (`any`); otherwise an array-valued key of STATE, a dotted path to one (`'board.cards'`), or a
+ * Lense over STATE.
  */
 export type CollectionFrom<STATE = any> = 0 extends (1 & STATE)
   ? string | Lense
-  : ArrayKeysOf<STATE> | Lense<STATE, any>
+  : ArrayPathsOf<STATE> | Lense<STATE, any>
 
 /**
  * Collection props. Pass the parent component's state type as STATE to type-check `from`:
@@ -1977,7 +1991,8 @@ export function emit<TYPE extends EventName>(
  *   }
  *
  * The payload is either a function `(state, data, next, props) => payload` or a static value:
- *   `event('RESET')`, `event('SET_MODE', 'dark')`.
+ *   `event('RESET')`, `event('SET_MODE', 'dark')`. A payload function that returns `ABORT` sends
+ *   nothing: `event('SAVED', (state) => state.dirty ? { id: state.id } : ABORT)`.
  *
  * With a `SygnalEvents` registry, `type` must be a registered name and the payload must match
  * its type. When used inside a model, the payload function's `state` and `data` parameters are
@@ -3005,6 +3020,12 @@ export interface ServiceWorkerCommand {
 
 export interface ServiceWorkerOptions {
   scope?: string;
+  /**
+   * `false`: the driver registers no service worker, ignores commands and emits nothing, so the
+   * app keeps its `SW` wiring where a worker must not run: `enabled: import.meta.env.PROD`.
+   * Default `true`.
+   */
+  enabled?: boolean;
 }
 
 export function makeServiceWorkerDriver(