solid2-agent-kit 0.14.0 → 0.16.0

package/files/skills/solid-2/SKILL.md

@@ -41,7 +41,8 @@ Practical consequences:
 | Expensive derivation, multiple consumers, or equality boundary needed | `createMemo(() => ...)` |
 | Follows a prop but user can locally override; prop change resets | writable derivation: `createSignal(() => props.value)` / `createStore(() => props.value, fallback)` |
 | Shared by a subtree, independent per provider instance | signal/store created inside a provider component, passed via context |
-| Truly app-wide singleton (theme, session, locale) | module-level signal/store (beware SSR: module state is shared across requests) |
+| App-wide state (theme, session, cart, locale) | the same provider, placed at the root of `App` — not a module-level signal/store (under SSR one module instance serves every request) |
+| Constants (a category list, a formatter, the `createContext` call) | module scope |
 | Tentative value during a mutation | `createOptimistic` / `createOptimisticStore` + `action` |
 | Values pushed by an external subscription (websocket, reactive client) | async iterable returned from a memo (or function-form `createStore` for keyed reconciliation) — never `{ data, error }` signal pairs |
 
@@ -72,9 +73,9 @@ Most React `useEffect` code should NOT become `createEffect`:
 | Overlay / modal | `<Portal>` — hoist async reads *above* the portal (reads inside start on the client) |
 | Async value used several layers down | Create the memo high; pass `value={memo()}` through intermediates (they do not wait); put `<Loading>` around the leaf read |
 | Nested child with its own fetch | Leave it nested — it runs in parallel. Sequential only when the second call needs the first response (`fetchAuthor(story().authorId)`) |
-| Browser-only widget (charts, maps, `window`) | `clientOnly(() => import("./Chart"))` from `@solidjs/web` (`{ lazy: true }` defers the import until first render) |
+| Browser-only widget (charts, maps, `window`) | `clientOnly(() => import("./Chart"))` from `@solidjs/web` (`{ lazy: true }` defers the import until first render; `{ export: "Chart" }` for a named export). Placeholder: `<Chart fallback={<Skeleton />} />` — SSR renders the fallback; a `<Loading>` around it leaves the server HTML empty |
 | Browser-only *value* (`localStorage`, viewport size) | `createMemo(..., { ssrSource: "client" })` — per-value policy at the data source, no component split (`"hybrid"` when server data mixes with client signals) |
-| Server vs browser branch | `isServer` / `isDev` from `@solidjs/web` (build-time constants), not `typeof window` |
+| Server vs browser code path | `isServer` / `isDev` from `@solidjs/web` (build-time constants), not `typeof window` — never to choose markup (`{isServer ? <A /> : <B />}` is a hydration mismatch; use `clientOnly` / `ssrSource`) |
 | SSR-stable `id` / `for` / `aria-*` pairing | `createUniqueId()` |
 
 ## Canonical patterns
@@ -158,6 +159,32 @@ at component-body top level is a write in an owned scope — dev throws
 `[REACTIVE_WRITE_IN_OWNED_SCOPE]` (rc.9 closed the exemption store writes had) — so
 seed the shape through the `createStore` argument or a derivation.
 
+**The store itself is read-only; only the draft writes.** An assignment or mutating
+call on the store proxy outside a setter is *ignored* — no throw, no dev warning, the
+value does not change, and TypeScript accepts it (`Store<T>` is `T`). This is the
+MobX / Vue / Solid 1 `createMutable` reflex:
+
+```tsx
+// WRONG — all silently ignored
+todos.push(todo);
+state.count++;
+todo.done = !todo.done;
+
+// CORRECT
+setTodos((draft) => { draft.push(todo); });
+setState((draft) => { draft.count++; });
+setTodos((draft) => {
+  const row = draft.find((t) => t.id === id);
+  if (row) row.done = !row.done;
+});
+```
+
+Plain objects and arrays are proxied; `Map`, `Set`, and `Date` are stored as they are.
+`draft.selected.add(id)` inside a setter mutates the `Set` but notifies nobody. Keep a
+set of ids as `Record<string, true>` (`draft.selected[id] = true` /
+`delete draft.selected[id]`, both tracked) or an array, or assign a new instance
+(`draft.tags = new Set([...draft.tags, tag])`) so the property itself changes.
+
 **External collections enter stores through reconciliation, never wholesale assignment.**
 `draft.todos = serverTodos` renders correctly but replaces every object identity — all
 subscribers under the path re-run and row identity is lost. In order of preference:
@@ -168,7 +195,10 @@ subscribers under the path re-run and row identity is lost. In order of preferen
    `setState((draft) => { reconcile(fresh, 'id')(draft.todos); })`. Positional data
    (fixed-shape dashboards): `reconcile(next, null)`.
 
-Plain non-reactive copy for logging/serialization/`structuredClone`: `snapshot(store)`.
+Plain non-reactive view for logging/serialization: `snapshot(store)`. It is not a copy —
+subtrees with no pending changes are the store's own objects, so mutating the snapshot
+(or letting a library `sort()` it) changes the store with no notification. Edit
+`structuredClone(snapshot(store))` instead.
 Subscribe an effect compute to every nested change: `deep(store)`.
 
 ### Children: pass through, or resolve with `children()`
@@ -248,6 +278,25 @@ createEffect(
 );
 ```
 
+`apply` returns a cleanup function or nothing — write it with a **block body**. An
+expression-bodied arrow returns whatever the expression evaluates to: an assignment
+(`(t) => (document.title = t)`) returns the string, and a setter (`(v) => setDraft(v)`)
+returns the value it set. Dev throws `effect callback returned an invalid cleanup value`,
+production throws a `TypeError` on the next run, and both halt the whole
+reactive system (`[REACTIVITY_HALTED]`). TypeScript reports it as TS2345; a JS project
+gets no warning. The cleanup of an effect is the `apply` return value — `onCleanup`
+inside `apply` has no owner and never runs (`[NO_OWNER_CLEANUP]`).
+
+```tsx
+// WRONG — returns the assigned string; halts reactivity (dev: first run, prod: next run)
+createEffect(() => title(), (t) => (document.title = t));
+
+// CORRECT
+createEffect(() => title(), (t) => {
+  document.title = t;
+});
+```
+
 Reads inside `apply` do not track. Extract every needed reactive value in `compute`
 (e.g. `() => ({ name: user.name, role: user.role })`). Passing a store proxy into `apply`
 and reading `user.name` there *runs once* and never retriggers. Compute-phase errors can be
@@ -454,7 +503,10 @@ registers this hook must load before the server graph — put it in the plugin's
 `start: { instrument: "./src/instrument.ts" }`, not at the top of an entry (see
 [Production observability](#production-observability-the-observe-build)).
 
-`render` / `hydrate` accept a per-root `onError` that wins over the ambient hook.
+`render` / `hydrate` accept a per-root `onError` that wins over the ambient hook —
+`render(() => <App />, root, undefined, { onError })` (options are the 4th argument; a
+3rd-argument object is taken as `init` and the hook is silently not installed) and
+`hydrate(() => <App />, root, { onError })`.
 Uncaught errors (`REACTIVITY_HALTED`) go to the platform's `reportError`, which every
 monitor already listens on — do not report them twice. `renderToStream` /
 `renderToString`'s `onError` option *is* the per-render server hook: it now hears every
@@ -572,12 +624,28 @@ function createTodos() { // call from a component — not module scope (SSR shar
 Three layers, in this order: durable source → ephemeral UI that must survive
 overlay discard (the `errors` map, folded in the projection) → optimistic overlay
 (`pending`, the predicted `completed`). Consumers read one store. Catch
-*expected* mutation failures in the action so a toggle error does not blank the
-list through `<Errored>`; unhandled projection/render errors still reach the
-boundary.
+*expected* mutation failures in the action, because nothing else will show them:
+an error that escapes an action discards its optimistic writes and rejects the
+promise the call returned — it never reaches `<Errored>`, which catches failing
+reads and renders only (projection and render errors still reach the boundary).
+Uncaught, the UI silently reverts and the rejection is unhandled. Put expected
+failures in the errors map or a toast inside the action, and `.catch` the call in
+the handler for the rest:
+
+```tsx
+<button
+  type="button"
+  onClick={() => {
+    removeTodo(todo.id).catch(() => showToast('Could not delete'));
+  }}
+>
+  Delete
+</button>
+```
 
 Going from a client store to the server is **additive**: same `setTodos`
-calls, wrap each mutation in `action`, swap in `createOptimisticStore` and a
+calls, wrap each mutation in `action`, swap in the **function form**
+`createOptimisticStore(() => api.list(), [])` (with `refresh` after the `yield`) and a
 file of server functions. Do not rewrite `App.tsx` with loading/error branches,
 and do not snapshot-the-cache / write-a-prediction / restore-on-error. A cache
 library is not the productionizing step — the sync mutation already was the
@@ -594,6 +662,16 @@ Ordinary signal/store writes inside an action are held until it settles. Never c
 Do not set a `submitted` signal and watch it from an effect — that work belongs in the
 handler or the `action`.
 
+**The value form has no durable layer.** `createOptimisticStore([])` (or
+`createOptimistic(value)`) is a pure overlay: writes inside an action vanish when it
+settles, and writes outside an action do not stick. Copying the reference example
+`createOptimisticStore<Todo[]>([])` and writing the saved row after the `yield`
+leaves an empty list once the action settles, with no warning. Durable data comes
+from the function form — `createOptimisticStore(() => api.list(), [])` refreshed
+after the `yield`, or `createOptimisticStore(() => base.todos, [])` over a separate
+`createStore` that the action writes the confirmed value into. Keep the value form for
+in-flight flags.
+
 `createOptimistic` / `createOptimisticStore` are for a tentative value during an
 active mutation, not a local editing session (use a writable derivation or a plain
 store for that). A whole-form `createOptimistic(false)` saving flag is fine; prefer
@@ -772,9 +850,47 @@ function ThemeButton() {
 
 Pass accessors/setters/stores through context — never `value={theme()}` (a dead snapshot).
 No `useMemo` for the value object, no context splitting: the object is created once and
-fine-grained updates flow through the signals inside it. Context is **subtree scoping**.
-A true app-wide singleton (theme, session, locale) is a module-level signal/store —
-do not invent a root provider for that. Module state is shared across SSR requests.
+fine-grained updates flow through the signals inside it.
+
+**App-wide state is the same provider, placed at the root of `App`** — not a
+module-level signal or store. Module scope is for constants and the `createContext`
+call itself:
+
+```tsx
+import { createContext, createStore, useContext, type ParentProps } from 'solid-js';
+
+type CartItem = { id: string; quantity: number };
+
+// WRONG under SSR — one store for every request the server ever handles
+// export const [cart, setCart] = createStore({ items: [] as CartItem[] });
+
+// CORRECT — one store per provider instance: per tab in the browser, per request on the server
+function createCart() {
+  const [cart, setCart] = createStore({ items: [] as CartItem[] });
+  return { cart, setCart };
+}
+
+const CartContext = createContext<ReturnType<typeof createCart>>();
+
+export function CartProvider(props: ParentProps) {
+  return <CartContext value={createCart()}>{props.children}</CartContext>;
+}
+
+export function useCart() {
+  return useContext(CartContext); // throws ContextNotFoundError outside CartProvider
+}
+
+// App: <CartProvider><ThemeProvider>{/* router / pages */}</ThemeProvider></CartProvider>
+```
+
+Module state has no owner (nothing disposes it), and under `ssr: true` the server
+loads the module once and serves every request from it: `createStore(value)` on the
+server is the plain object, so one visitor's writes render into the next visitor's
+HTML (`[SERVER_WRITE]`). A module-level store derived from a server function fails
+sooner — `Cannot call server function outside of a request` while the module loads.
+In a client-only build a module-level store is one per tab and works, which is why it
+looks fine until `ssr: true` is turned on; the provider costs nothing extra and
+survives that change.
 
 ### Refs
 
@@ -815,6 +931,32 @@ do not `return () => cleanup`. Put owned setup in a **directive factory** (like
 `ResizeObserver`, third-party widgets, and native listener options (`capture` /
 `passive`) — Solid event props do not take those options.
 
+### `onSettled` — one-time setup, restricted scope
+
+`onSettled` is the `onMount` replacement, and its callback is a **restricted scope**:
+`onCleanup` throws there (`[CLEANUP_IN_FORBIDDEN_SCOPE]`), creating a memo or effect
+throws (`[PRIMITIVE_IN_FORBIDDEN_SCOPE]`), and so does `flush()` — each halts the
+reactive system in dev. Return the cleanup; create effects and memos in the component
+body, next to the `onSettled` call, not inside it.
+
+```tsx
+// WRONG — the mechanical 1.x port of onMount + onCleanup
+onSettled(() => {
+  const id = setInterval(tick, 1000);
+  onCleanup(() => clearInterval(id));
+});
+
+// CORRECT
+onSettled(() => {
+  const id = setInterval(tick, 1000);
+  return () => clearInterval(id);
+});
+```
+
+Effect callbacks follow the same shape: return the cleanup from `apply` (an
+`onCleanup` there never runs), and `flush()` inside one is a no-op
+(`[FLUSH_IN_EFFECT_CALLBACK]`).
+
 ### Per-value SSR policy: `ssrSource`
 
 `clientOnly` splits a *component*; `ssrSource` keeps one *value* off the server,
@@ -893,6 +1035,14 @@ test('increments on click', () => {
 });
 ```
 
+Primitive tests write **outside** the root callback — a write inside `createRoot((dispose)
+=> { …; setA(2); })` is `[REACTIVE_WRITE_IN_OWNED_SCOPE]` in dev. Return the handles, then
+write and `flush()`: `const { setA, b, dispose } = createRoot((dispose) => { …; return
+{ setA, b, dispose }; }); setA(2); flush();`. A hook that reads context runs under
+`renderHook(useCart, { wrapper: CartProvider })`. A routed component gets a router built in
+the test — `createRouter({ routes, history: memoryHistory("/orders/42") })` — because
+Testing Library's `render(…, { location })` is typed but not implemented (1.0.0-beta.3).
+
 `jsxImportSource` for tests and app code is `"@solidjs/web"`, not `"solid-js"`.
 Vite plugin is `@solidjs/vite-plugin`, not `vite-plugin-solid`.
 
@@ -1151,22 +1301,28 @@ Solid Router 0.x/1.x stand-ins.** Patterns below; fetch the matching pages from
 ```
 
 `solid-js` does **not** export a `JSX` namespace — `import type { JSX } from "solid-js"`
-is a type error (TS2305), and `JSX.Element` as the children type is a React reflex.
-Children/return types are the renderer-neutral `Element` from `solid-js`
+is a type error (TS2305). Markup types are `JSX.Element` from `@solidjs/web` (the
+docs' choice; it also admits DOM nodes) or the renderer-neutral `Element` from `solid-js`
 (`children?: Element`), alongside `Component` / `ParentProps` / `Accessor` / `Setter`.
-DOM-specific `JSX` types (`JSX.IntrinsicElements`, `JSX.CSSProperties`) and
-`ComponentProps` come from `@solidjs/web`. Vite: `import solid from "@solidjs/vite-plugin"`
+Import the latter as `import type { Element as SolidElement } from "solid-js"` in any file
+that also uses DOM elements — unaliased, it shadows the DOM `Element`
+(`el.getBoundingClientRect()` becomes TS2339). DOM-specific `JSX` types
+(`JSX.IntrinsicElements`, `JSX.CSSProperties`) and `ComponentProps` come from
+`@solidjs/web`. Vite: `import solid from "@solidjs/vite-plugin"`
 with `start: true` / `ssr: true` / `serverFunctions: true` only when the
 project already uses start mode. Tiers are `bare` → `basic` (router) →
 `fullstack` (SSR + server functions); do not jump a tier without cause.
-Under `start: true` the plugin owns entries, the document shell, and the build —
-write `src/App.tsx`, not SolidStart-style `entry-client.tsx` / `entry-server.tsx`
-or a hand-written `index.html`.
+Under `start: true` the plugin owns entries and the build — write `src/App.tsx`, not
+SolidStart-style `entry-client.tsx` / `entry-server.tsx` (authored ones replace the
+generated entries) or a hand-written `index.html`. The document shell (`<html lang>`,
+favicon, fallback `<title>`) is an optional `src/Document.tsx` default export that renders
+`<HydrationScript />` in `<head>` and `<body>{props.children}</body>`; `App` never renders
+`<html>`.
 
 ### Solid Router 2 — `createRouter`, not JSX `<Route>`
 
 ```tsx
-import { lazy } from 'solid-js';
+import { Loading, lazy } from 'solid-js';
 import { createRouter } from '@solidjs/router';
 
 export const Router = createRouter({
@@ -1184,7 +1340,9 @@ export default function App() {
       {(props) => (
         <>
           <a href={Router.paths}>Home</a>
-          <main>{props.children}</main>
+          <Loading fallback={<p>Loading…</p>}>
+            <main>{props.children}</main>
+          </Loading>
         </>
       )}
     </Router>
@@ -1192,7 +1350,9 @@ export default function App() {
 }
 ```
 
-Create the instance at **module scope**. Nested layouts are `children` arrays
+The `<Loading>` covers the first load of the lazy pages (and lets SSR stream the shell);
+later navigations hold the current page while the next one loads (links get
+`data-pending`). Create the instance at **module scope**. Nested layouts are `children` arrays
 on the route objects, not nested `<Route>` / nested routers. Solid Router does
 **not** support nested `<Router>` instances — compose one route tree (or a lazy
 `children` thunk). Navigate with
@@ -1200,8 +1360,57 @@ plain `<a href={Router.paths.about}>` (or `useNavigate`); there is no `<A>` /
 `<Navigate>` / `<HashRouter>` / `<FileRoutes />`. Do not assign
 `window.location.href` or call `history.pushState` for in-app navigation.
 Session location is `useLocation` / `useParams`,
-not `Router.paths`. A route `preload` result is `props.data` on the matched
-component (and the factory `preload` result is the root render prop's `props.data`).
+not `Router.paths`.
+
+**Route `preload` starts reads; the page reads them in a memo.** `preload` runs when
+the route matches (and on link hover), so it should kick off the query and return
+nothing; the component reads the same query through a memo that tracks the params:
+
+```tsx
+// src/data/products.ts
+import { query } from '@solidjs/router';
+
+export const getProduct = query(async (id: string) => {
+  const response = await fetch(`/api/products/${id}`);
+  return (await response.json()) as Product;
+}, 'product');
+
+// src/router.ts — defineRoute types params from the path (params.id: string)
+import { lazy } from 'solid-js';
+import { createRouter, defineRoute } from '@solidjs/router';
+import { getProduct } from './data/products';
+
+export const Router = createRouter({
+  routes: [
+    defineRoute({
+      path: '/products/:id',
+      preload: ({ params }) => void getProduct(params.id),
+      component: lazy(() => import('./pages/Product')),
+    }),
+  ],
+});
+
+// src/pages/Product.tsx
+import { createMemo } from 'solid-js';
+import type { RouteProps } from '@solidjs/router';
+import { getProduct } from '../data/products';
+
+export default function ProductPage(props: RouteProps<'/products/:id'>) {
+  const product = createMemo(() => getProduct(props.params.id));
+  return <h1>{product().name}</h1>;
+}
+```
+
+Do not return the data from `preload` and render `props.data` (the Remix-loader
+shape): `props.data` is whatever `preload` returned when the route first matched, so
+navigating `/products/mug` → `/products/bowl` keeps showing the mug, and an `async`
+preload makes it a Promise (`props.data.name` is TS2339). Return a value only for
+data that stays fixed while the route is matched. The factory `preload` on
+`createRouter` runs once per mount/request; its result is the root render prop's
+`props.data`. Plain route objects type `params` as an open record (`string |
+undefined` per key) — wrap a route in `defineRoute` when `preload` or the component
+needs `params.id: string`.
+
 Link warming: `preload="false"` skips that link's *data* preload; `preloadLinks: false`
 disables automatic link preloading. Intent values are `"initial"` / `"navigate"` /
 `"native"` / `"preload"`. One router per app.
@@ -1225,7 +1434,9 @@ setSearch] = useSearchParams()` — the setter merges and navigates without scro
 `""` / `undefined` / `null` removes a key. For typed values, put a synchronous
 Standard Schema on the route's `search` field and pass the path node:
 `useSearchParams(Router.paths.search)` (async schemas throw; a failing schema leaves
-the raw strings rather than throwing).
+the raw strings rather than throwing). Query values are strings, so coerce in the schema —
+`page: v.optional(v.pipe(v.unknown(), v.transform(Number)), 1)`; a plain `v.number()`
+rejects every value and hands back the string, still typed `number`.
 
 **Two different `action`s.** Core `action` from `solid-js` is a generator transaction
 (optimistic writes that span an async gap). Router `action` from `@solidjs/router` is
@@ -1250,6 +1461,14 @@ const save = action(async (form: FormData) => {
 Only POST forms are accepted. Bind extra args with `.with(id)` (they go in the
 action URL). `onSubmit={(e) => { e.preventDefault(); fetch(...) }}` *runs* and
 drops the no-JS form fallback. `useAction` is JS-only for the same reason.
+Optimistic rows for a router form keep the `<form>` and add no core `action`: read the
+list `query` with `createOptimisticStore(() => getList(), [])` and register
+`save.onSubmit((form) => setList((d) => { d.push({ …, pending: true }); }))` in the
+component — the hook runs inside the action's transaction, so the row is an overlay,
+replaced on settle by the revalidated `query` (a plain server-function read is not
+revalidated, so the row just disappears).
+`useSubmissions` keeps only completions with a result or error; observe void and
+redirect completions with `save.onSettled(hook)`.
 
 Validated forms come in three passes sharing one HTML shape. Pass 1 (above) posts
 uncontrolled inputs with browser `required` / `pattern` — it works with no JavaScript.
@@ -1349,7 +1568,15 @@ A function-level server function cannot close over component locals — pass
 values as arguments. Treat every argument as untrusted — TypeScript does not
 cross the HTTP boundary, so do not invent tRPC / RPC type-gen;
 validate inside the function (a parse in the function body is that
-validation, not an RPC schema across the wire). These functions *are* the RPC — do not add an
+validation, not an RPC schema across the wire). Checks belong in the body: HTTP dispatch
+calls a function-level `"use server"` body directly, so a HOF around it (`withAuth(fn)`,
+`validated(schema, fn)`) runs for in-process calls and is skipped for `curl` — an auth
+bypass. A wrapper inside a file-level `"use server"` module (`export const x =
+withAccount(async …)`) is what gets registered and does run. Arguments are capped at 1 MiB
+by default (413 beyond; the host's `bodySizeLimit`) — upload large files to a signed URL.
+Never hand a server function point-free to a library callback (`mutationFn: renameUser`,
+`onClick={deleteTodo}`): every argument the callback receives (a context object, the
+event) is sent over the wire — wrap it in an arrow that passes only the data. These functions *are* the RPC — do not add an
 API-route file (or a Next `route.ts`) just to wrap `db.todos.insert`. API
 routes are for real HTTP endpoints (webhooks, third-party POST), not for the
 app's own RPC. Read trusted identity
@@ -1358,8 +1585,42 @@ reference runs in-process (no HTTP); in the browser it is HTTP. Anything
 referenced only inside the `"use server"` body (db client, secrets) never
 reaches the client — the directive is the privacy boundary. Mutations that should
 revalidate: `redirect` / `reload` from `@solidjs/web` (see the server-function
-guides). Return or throw a redirect — guards read `if (!session?.userId) throw
-redirect("/sign-in")`. `redirect()` and `respond()` accept the same `revalidate`
+guides).
+
+**`redirect()` / `reload()` are signals for an integration, not navigation.** Solid
+Router's `action` / `query` apply them (navigate, revalidate), and a no-JS form post
+follows the 302. Any other caller — a core `action`, an event handler, a plain
+`createMemo(() => listOrders())` — receives the raw `Response` as the resolved value:
+no navigation happens, and the type still claims your data. (When a mounted router's
+single-flight hook intercepts a direct POST call, it does navigate, but the call
+resolves to `null`; a direct `GET()` read always gets the `Response`.) Either way the
+caller never gets its data, so the redirect guard belongs to functions called through
+the router:
+
+```ts
+import { getRequestEvent, redirect, respond } from '@solidjs/web';
+
+// called through a router action/query: the router navigates to /sign-in
+export async function listOrders() {
+  'use server';
+  const userId = getRequestEvent()?.locals.userId;
+  if (!userId) throw redirect('/sign-in');
+  return database.orders.forUser(userId);
+}
+
+// no router in the project (core action + server functions): reject instead
+export async function listMyOrders() {
+  'use server';
+  const userId = getRequestEvent()?.locals.userId;
+  if (!userId) throw respond(null, { status: 401 });
+  return database.orders.forUser(userId);
+}
+```
+
+Without the router, fail with `throw respond(..., { status })` (the call rejects and
+`<Errored>` / the action's `catch` sees it), or return a value and navigate in the
+caller. Return a redirect when it is the successful outcome, throw it for an early
+exit. `redirect()` and `respond()` accept the same `revalidate`
 option as `reload()` when the mutation also changes location or returns a value;
 `revalidate: REVALIDATE_ALL` (`"*"`, from `@solidjs/web`) declares every cache entry
 stale, distinct from omitting it (the host's default) and from `[]` (nothing). After a router/server mutation do **not** follow with a client `fetch`
@@ -1370,11 +1631,17 @@ on the server-function wire **and**, since 2.0.0-rc.9, on every SSR road a failu
 takes (an `<Errored>` fallback rendered on the server, a rejected async source
 serialized into the stream, a `<Loading>` fragment's rejection), so `err().message`
 in a fallback reads the generic message in a production server render. Use
-`markSafeError` or `respond(..., { status })` for intentional client-facing
-failures. Do not `return Response.json(...)` from `"use server"` — that is
-HTTP-handler control flow; `respond(value, { status })` is what a scripted
-caller unwraps. JSON-encodable arguments only unless `enableRichArguments()`
-was called once in the client entry (`Date` / `Map` / `Set` throw without it).
+`throw markSafeError(...)` or `throw respond(..., { status })` for intentional
+client-facing failures — a *returned* `respond()` resolves the call whatever its
+status, so `return respond({ error }, { status: 400 })` reads as success to the UI,
+`useSubmissions`, and the optimistic overlay. Do not `return Response.json(...)` from
+`"use server"` — that is HTTP-handler control flow; `return respond(value, { status: 201 })`
+is success metadata a scripted caller unwraps. Arguments are JSON: send `Date` / `Map` /
+`Set` as ISO strings / arrays (they throw otherwise; one `File` / `Blob` / `FormData`
+argument travels natively). `enableRichArguments()` from
+`@solidjs/web/server-functions/rich-args` (at `src/App.tsx` module scope) lifts that, but
+in rc.9 importing it fails `vite build` (`"./client" is not exported` — the dev server
+works, so the break shows only at build).
 `GET()` is only for idempotent reads (URLs leak into logs/history);
 import it from `@solidjs/web/server-functions`, never `@solidjs/start`.
 Reads are function calls too: `GET(async (id) => { "use server"; ... })` is invoked
@@ -1467,19 +1734,33 @@ When the app has a server bundle (`ssr` or server functions), production is
 `handleRequest(request)` from the built `dist/server/server.js` (or that
 module's Fetchable default `fetch`) — not an import from `solid-js`. Cloudflare /
 Netlify / Nitro Vite plugins adopt that handler — do not write a Solid adapter,
-a custom Worker, or a Netlify Function. For Node, use the official template
-`server.js` (web `Request` in, stream the response); do not invent an
-Express/Solid bridge. Client-only `start: true` is still static `dist/client`
+a custom Worker, or a Netlify Function. For Node, set `start: { node: true }` and run
+`node dist/server/node.js` (serves `dist/client`, reads `PORT` / `HOST`); inside an
+existing Express / Fastify app, mount the `listener` that file exports — do not
+hand-write a Node↔web bridge (`node dist/server/server.js` starts nothing: it is the
+handler module). Client-only `start: true` is still static `dist/client`
 — there is no handler to wrap. Request middleware is the Vite option
 `start: { middleware: "./src/middleware.ts" }` (web `Request` + `next`), not
 Express `app.use`. Server functions that return components
 (`serverFunctions: { components: true }`) are experimental preview — do not use
 them unless the project already has that flag on.
 
-Unscripted forms: `<form method="post" action={createTodo.url}>` (the reference
-`.url`), not a client `preventDefault` + `fetch`, and not a hand-built
-`/_server/` URL. GET forms (`method="get" action={search.url}`) are only for
-idempotent search — do not use a GET form for a mutation.
+Unscripted (no-JS) POST forms go through a router action —
+`const save = action(createTodo, "create-todo")` from `@solidjs/router`, then
+`<form action={save} method="post">` — not a client `preventDefault` + `fetch`, not a
+hand-built `/_server/` URL, and not `action={createTodo.url}`: a bare `"use server"`
+function keeps its declared function type, so `.url` is a type error (TS2339) even
+though it exists at runtime (and `serverFunctionActionUrl(createTodo)` is TS2345).
+The post arrives as one `FormData` argument, so the function behind `action={save}`
+takes `(form: FormData)` and parses and validates the fields inside; any other
+signature makes `action={save}` a type error (TS2322). Bind leading JSON-safe
+arguments with `action={save.with(id)}` for `(id: string, form: FormData)`; a function
+that already has a typed signature gets a separate `FormData` server function that
+parses and calls it.
+`.url` is typed only on `GET()` / `live()` references, which makes it the address of a
+`method="get"` search form (`action={searchProducts.url}`; the function receives the
+fields as `URLSearchParams`). GET forms are only for idempotent search — do not use a
+GET form for a mutation.
 
 ### Document head — no MetaProvider
 
@@ -1515,8 +1796,11 @@ how to reuse. Prefer the form on the right.
 | `action(async function* () { await save(); setX(v); })` | `yield save()` or `await save(); yield; setX(v)` |
 | `action(async (item) => { ... })` with core `action` from `solid-js` | `action(function* (item) { ...; yield ...; ... })` — only a generator re-enters the transaction (`solid2-kit check` flags this). Router `action` from `@solidjs/router` is the one that takes `async (form) => ...` |
 | `todos()` on a store | `todos.length` / `todo.title` (property reads) |
+| `todos.push(x)` / `state.count++` / `todo.done = !todo.done` on the store itself | `setTodos((draft) => { draft.push(x); })` — writes to the store proxy outside a setter are silently ignored (no error, no warning, tsc passes) |
+| `createStore({ selected: new Set<string>() })` + `draft.selected.add(id)` | `selected: {} as Record<string, true>` + `draft.selected[id] = true` / `delete draft.selected[id]`, or `draft.selected = new Set([...draft.selected, id])` — `Map` / `Set` / `Date` are stored as-is, not tracked |
 | `draft.todos = fresh` (wholesale fresh-tree assignment) | `reconcile(fresh, "id")`, or function-form `createStore` / `createProjection` (auto-keyed by `"id"`). Removal via `setTodos((t) => t.filter(...))` is fine — survivors keep identity |
-| `createEffect(() => user, (u) => log(u.name))` | `createEffect(() => user.name, (name) => log(name))` |
+| `createEffect(() => user, (u) => { log(u.name); })` | `createEffect(() => user.name, (name) => { log(name); })` |
+| `createEffect(() => title(), (t) => (document.title = t))` / `(v) => setX(v)` | `(t) => { document.title = t; }` — apply returns a cleanup or nothing; any other return value halts reactivity. An apply that only calls a local setter is rule 4 even with braces (`solid2-kit check` flags it): use a (writable) derivation |
 | `<Loading fallback={<PageSkeleton />}>{/* header + data */}</Loading>` | wrap only the data slot; chrome stays outside |
 | `<Loading on={id} fallback={...}>` (the accessor) | `on={id()}` — a value, so identity changes can show fallback |
 | `setCount(count() + 1)` when writes can batch | `setCount((c) => c + 1)` |
@@ -1553,15 +1837,17 @@ how to reuse. Prefer the form on the right.
 | `clientOnly` split (or `isServer` branch) for one browser-only *value* | `createMemo(() => localStorage.getItem(k), { ssrSource: "client" })` — `"hybrid"` when server data mixes with client signals |
 | `await flush()` / `flush()` to wait on a pending memo | `await resolve(() => value())` (or Testing Library async queries); `flush()` only drains staged *sync* writes |
 | `action(function* () { setX(v); })` around a navigation-shaped setter | plain setter; async computeds hold previous values. Core `action` only when writes happen *after* async work |
-| `createContext` + a root provider for a true app singleton | module-level signal/store (SSR: shared across requests). Context is subtree scoping |
+| `export const [cart, setCart] = createStore(...)` for app-wide state | `createCart()` called by a `CartProvider` at the root of `App`, read with `useCart()` over `createContext<T>()` — module state has no owner and, under SSR, one instance serves every request (`[SERVER_WRITE]`). Module scope is for constants and `createContext` |
 | `import { GET } from "@solidjs/start"` / `createAsync` / `useSubmission` / `<FileRoutes />` / `"use client"` | `GET` from `@solidjs/web/server-functions`; `createMemo(() => getUser(id()))`; `useSubmissions`; `fileRoutes(pageRoutes)`; Solid has no `"use client"` |
 | `<Show keyed when={user()}>` by default | default `Show` (keeps children mounted); `keyed` only when internal state must reset |
 | overlapping truthy `<Match>`es all expected to render | first truthy `<Match>` wins; later matches are skipped |
 | missing `<HydrationScript />` / one script for many roots | once, before app markup, when the app owns the document; distinct `renderId` per extra root |
-| `Router.paths` as the current URL; calling `preload()` and using the return as props | `useLocation` / `useParams`; factory/route `preload` result is `props.data` |
+| `Router.paths` as the current URL | `useLocation` / `useParams` |
+| `preload: async ({ params }) => getProduct(params.id)` + `props.data.name` in the page | `preload: ({ params }) => void getProduct(params.id)` + `createMemo(() => getProduct(props.params.id))` — `props.data` is captured once when the route matches (stale on param change; a Promise for async preloads) |
 | `query.get(key)` with no guaranteed entry; `query.set(key, promise)` | `query.get` throws if missing; `query.set` does not accept a promise |
 | `onCleanup(() => ...)` in a component body | `onSettled(() => { ...; return cleanup })` — `onCleanup` is for custom primitives |
-| `onSettled` with reactive reads expecting re-runs | each call is a **single** fire; reads are untracked. Ongoing work is `createEffect` |
+| `onSettled` with reactive reads expecting re-runs | each call is a **single** fire; reads are untracked. Ongoing work is `createEffect`, created in the component body |
+| `onSettled(() => { const id = setInterval(tick, 1000); onCleanup(() => clearInterval(id)); })` | `onSettled(() => { const id = setInterval(tick, 1000); return () => clearInterval(id); })` — `onCleanup`, `createMemo` / `createEffect`, and `flush()` throw inside the callback |
 | `<Router>` nested inside `<Router>` | one instance; nest `children` arrays (or a lazy children thunk) |
 | `const View = tab() ? A : B; return <View />` | `const View = dynamic(() => (tab() ? A : B))` — the ternary at setup freezes the choice |
 | `<For each={resolved()}>` after `children()` | `{resolved.toArray()}` — resolved children are not a reactive data list |
@@ -1571,8 +1857,8 @@ how to reuse. Prefer the form on the right.
 | `createOptimistic` for a local edit draft | writable derivation / plain store. Optimistic is for an in-flight mutation |
 | `createMemo(async fn, { loadingValue })` / `{ seedLoadingValue: true }` as the default first-flight UI | `<Loading>` for first flight; those options are escape hatches (store projections use `seedLoadingValue`) |
 | `setSubmitted(true)` + an effect that watches it | do the work in the handler or an `action` |
-| `findUser(userId)` with the id from the client as identity | `getRequestEvent()!.locals.userId` |
-| `action={"/_server/" + id}` in app JSX | `action={createTodo.url}` or a router `action` |
+| `findUser(userId)` with the id from the client as identity | `const userId = getRequestEvent()?.locals.userId; if (!userId) throw respond(null, { status: 401 });` (`throw redirect("/sign-in")` under a router `action` / `query`) |
+| `action={"/_server/" + id}` / `action={createTodo.url}` on a POST form | a router action: `const save = action(createTodo, "create-todo")` + `<form action={save} method="post">` over a `(form: FormData)` server function (other signatures are TS2322) — `.url` on a bare `"use server"` function is TS2339; it is typed only on `GET()` / `live()` references (GET search forms) |
 | `<form method="get" action={update.url}>` for a mutation | GET forms only for idempotent search; mutations are POST |
 | `window.location.href = ...` / `history.pushState` | `useNavigate()` or `<a href={Router.paths...}>` |
 | `class={{ active: location.pathname === "/about" }}` hand-rolled link state | CSS on automatic `aria-current` / `data-active` / `data-pending`; `useLinkState` in JSX, `useIsRouting()` for progress bars |
@@ -1587,7 +1873,7 @@ how to reuse. Prefer the form on the right.
 | `class={{ pending: isPending(id) }}` flashing on every navigation | same class + a short CSS `transition-delay` so only slow swaps show |
 | `<Comments />` nested under `{story().title}` assumed to waterfall | both mount immediately and fetch in parallel if the child reads an already-known id; a real waterfall is `createMemo(() => fetchAuthor(story().authorId))` or `storyId={props.story.id}` |
 | `<Errored>` as a terminal ErrorBoundary; `reset={() => location.reload()}` | the boundary heals when the source succeeds again; `reset` retries collected *sources*, not a UI remount |
-| `<Errored>` around a list catching a toggle/save failure | catch expected mutation failures in the `action`; keep row errors in a map the projection folds in (survives overlay discard) |
+| `<Errored>` around a list expected to catch a toggle/save failure | an error thrown out of an `action` never reaches `<Errored>` — it reverts the overlay and rejects the call's promise. Catch expected failures in the `action` (row errors in a map the projection folds in, which survives overlay discard; otherwise a toast) and `.catch` the call in the handler |
 | `yield { ...tick, connected: true }` from `live()` | yield the value; wire status is `source.onstatus` (`"connected"` / `"reconnecting"` / `"closed"`) |
 | sibling `<Loading>` fallbacks stacking as popcorn | `<Reveal collapsed>` (sequential default) suppresses tail skeletons past the frontier |
 | in-memory cache around a GET server function | `return respond(value, { headers: { "cache-control": "..." } })` — metadata rides HTTP, the value rides the graph |
@@ -1599,6 +1885,7 @@ how to reuse. Prefer the form on the right.
 | a held write with no feedback anywhere | pair it with `isPending()` / `latest()` / an optimistic value / `affects()` — otherwise dev + attribution reports `[SILENT_HOLD]` |
 | `refresh(getUser.key)` / `revalidate(user)` / `return refresh()` from `"use server"` | three APIs: core `refresh(source)` reruns a reactive source; router `revalidate(getUser.key)` invalidates the query cache; `return reload({ revalidate: "todos" })` asks the integration to refresh cached data |
 | `return redirect(...)` as the only redirect shape | guards `throw redirect("/sign-in")`; `redirect()` / `respond()` take `revalidate` too when the mutation also moves or returns a value |
+| `throw redirect("/sign-in")` / `return reload(...)` in a function called directly (core `action`, handler, plain memo) | only Solid Router `action` / `query` (and no-JS form posts) apply them — a direct caller resolves to the raw `Response` (or `null` when the router's single-flight hook intercepts a POST call), typed as your data. Without the router: `throw respond(null, { status: 401 })` or return a value and navigate in the caller |
 | `submission.clear()` from an effect | on dismiss/resubmit only — from an effect, errors flash and vanish |
 | `revalidate(liveSource)` | `live()` updates through the open stream; do not revalidate it |
 | `refresh(user)` without `affects` when the reload should look pending | pair `affects(user)` with `refresh(user)` — a bare `refresh` re-asks quietly |
@@ -1606,7 +1893,7 @@ how to reuse. Prefer the form on the right.
 | `setStore(async (draft) => { draft.x = await load(); })` | `const x = await load(); setStore((draft) => { draft.x = x; })` — the setter is a synchronous transaction; dev throws `[ASYNC_STORE_SETTER]` |
 | `setStore((d) => { d.items = seed; })` in a component body | seed through `createStore(seed)` / `createStore(() => props.items, fallback)` — a body-level store write is `[REACTIVE_WRITE_IN_OWNED_SCOPE]` |
 | `const saved = await api.save(); yield until(() => ...)` | `await api.save(); yield; yield until(() => ...)` — a bare `yield` re-enters the transaction before any reader is created, not only before writes |
-| `fallback={(err) => { captureException(err()); return <Fallback />; }}` | `configureClientErrors({ onError })` from `solid-js` (or `render(..., { onError })`), `configureServerErrors({ onError })` from `@solidjs/web` — once per error, with `ownerPath` / `boundaryPath` |
+| `fallback={(err) => { captureException(err()); return <Fallback />; }}` | `configureClientErrors({ onError })` from `solid-js` (or per root `render(fn, root, undefined, { onError })`), `configureServerErrors({ onError })` from `@solidjs/web` — once per error, with `ownerPath` / `boundaryPath` |
 | `latest(user) ?? placeholder` in a handler as a null-safe read | `latest()` throws `NotReadyError` before the first value in every scope; read settled values under `<Loading>`, or `await until(() => user())` |
 | `attribution.why(total)` / `attribution.format(e)` / `attribution.costs()` | named imports from `solid-js/attribution`: `why(total)`, `formatRerun(e)`, `costs()`, `feedback()`, `subscriptions(scope)` (rc.9) |
 | `attribution.enable()` unguarded in app code, or `enable()` with the default `log: true` left on | `if (isDev) attribution.enable({ log: false })` — on the observe build an unguarded `enable()` records in production; prefer the `/__solid/diagnostics` session (`begin` enables, `end` disables) so app code carries nothing |
@@ -1629,18 +1916,19 @@ how to reuse. Prefer the form on the right.
 | `fetch('/api')` at component-body top level | `createMemo(async () => { ... fetch ... })` under `<Loading>` — a top-level fetch runs once at mount and is not a reactive source |
 | `<input type="checkbox" value={on()} />` | `checked={on()}` for the toggle; `value="string"` only when grouping radios or listing submitted values |
 | `createMemo(() => { void save(); return x(); })` / an effect that calls an action | invoke actions from handlers, not from memos or effects |
-| `createSignal(props.value)` / `createStore(props.items)` | `createSignal(() => props.value)` / `createStore(() => props.items, fallback)` — a bare `props.x` at setup is a snapshot |
-| `createRenderEffect` / `createTrackedEffect` as the default effect | two-phase `createEffect(compute, apply)` |
+| `createSignal(props.value)` / `createStore(props.items)` | `createSignal(() => props.value)` / `createStore(() => props.items, fallback)` — a bare `props.x` at setup is a snapshot. That form resets on every prop change; an intentional one-time read (an `initialCount` prop) is `createSignal(untrack(() => props.initialCount))` |
+| `createRenderEffect` / `createTrackedEffect` as the default effect | two-phase `createEffect(compute, apply)`; `createTrackedEffect` is `@deprecated` (rc.9) |
 | `createEffect(() => source(), () => setError(null))` to reset a signal | `createSignal(() => { source(); return null; })` — the writable derivation resets on change; a sole-setter apply is rule 4 |
 | a "server-safe" initial value adopted after mount (React hydration-mismatch fix) | client mode mounts with `render()` into an empty body — no hydration, no mismatch; read `localStorage` / `matchMedia` directly at signal creation |
-| rewrite `App.tsx` with loading/error branches, or snapshot/restore, when the list moves to the server | same `setTodos`; wrap mutations in `action`; swap `createOptimisticStore` + a server-functions file. The overlay is discarded; the confirmed store is the truth |
+| rewrite `App.tsx` with loading/error branches, or snapshot/restore, when the list moves to the server | same `setTodos`; wrap mutations in `action`; swap in function-form `createOptimisticStore(() => api.list(), [])` + a server-functions file. The overlay is discarded; the confirmed store is the truth |
+| `createOptimisticStore<Todo[]>([])` holding the list, saved rows written after `yield` | `createOptimisticStore(() => api.list(), [])` + `refresh(todos)` (or a function form over a separate `createStore`) — the value form is a pure overlay: action writes vanish on settle |
 | disable an optimistic row until ack, or mutex rapid clicks / freeze unrelated writes | keep the control enabled; `action` is the transaction. An in-flight action does not freeze other writes. Failed-action replay is optional |
 | tRPC / RPC type-gen around `"use server"` | TypeScript does not cross HTTP — validate inside the function. Locals only the body reads (db, secrets) stay off the client |
 | `src/routes/api/todos.ts` (or a Next `route.ts`) wrapping `db.todos.insert` | `"use server"` *is* the RPC. API routes are for real HTTP endpoints (webhooks), not the app's own mutations |
 | router/server mutation, then `fetch` / `onSettled` / `hydrate` to refresh the page | `reload` / `revalidate` / single-flight (the mutation response can seed destination preloads). In-flight Promises serialize as Promises; `live()` continues from HTML |
 | delay `renderToStream` so HTML arrives in visual order | stream as soon as ready; `<Reveal collapsed>` controls when content *appears* |
 | subscribe/unsubscribe in the component around `live()` | `createMemo(() => stockPrice(props.symbol))` — hoist that memo to share one connection. `onstatus` is on the iterable the `live()` call returns, not on the memo. Until the first yield, `<Loading>`; later yields are updates |
-| a Solid adapter / custom Worker / Express bridge, or `entry-client.tsx` under `start: true` | With a server bundle: `handleRequest` from `dist/server/server.js` / Fetchable `fetch`; platform plugins adopt it. Node: template `server.js`. Client-only start: static `dist/client`. Middleware is `start: { middleware: "..." }`, not Express `app.use` |
+| a Solid adapter / custom Worker / Express bridge, or `entry-client.tsx` under `start: true` | With a server bundle: `handleRequest` from `dist/server/server.js` / Fetchable `fetch`; platform plugins adopt it. Node: `start: { node: true }` → `node dist/server/node.js` (its `listener` for an existing Express / Fastify app). Client-only start: static `dist/client`. Middleware is `start: { middleware: "..." }`, not Express `app.use` |
 | `createMemo(async () => (await props.story).author)` | `createMemo(() => props.story.author)` — a derivation over an async value becomes async; no await, no Promise type |
 | return a component from `"use server"` / flip `serverFunctions.components` | experimental preview — do not enable unless the project already has that flag |
 
@@ -1779,17 +2067,19 @@ always-applied rules installed alongside this skill.
       bind `latest(query)`; failures throw to `<Errored>`, never `{ success: false }`
       result objects checked at every read.
 - [ ] Lists via `<For>` (server/refetched rows keyed by stable id), conditionals via
-      ternary/`<Show>`; no `{list().map(...)}` in JSX; no `key` props; no `value()!`.
+      ternary/`<Show>`; no `{list().map(...)}` in JSX; no `key` props (except
+      `@solidjs/meta` tags); no `value()!`.
 - [ ] Effects are two-phase and only at imperative boundaries; apply does not read stores.
 - [ ] Async reads sit under `<Loading>` (the data slot, not chrome); errors under `<Errored>`.
       Reactive inputs of an async memo are read before the first `await`. No hand-rolled
       `loading`/`error` signals or `=== undefined` readiness branches. First load is
       `<Loading>`; refetch indicator is `isPending(user)` (the accessor, not `user()`)
       or `isPending(selectedId)` when the write is the question. `<Errored>` heals
-      when the source succeeds; `reset` retries sources, not a UI remount. Per-row
-      mutation failures stay in the action/projection, not in `<Errored>` around
-      the list. Error monitoring goes through `configureClientErrors` /
-      `configureServerErrors` (or `render(..., { onError })`), never a side effect in
+      when the source succeeds; `reset` retries sources, not a UI remount. Mutation
+      failures never reach `<Errored>` (an escaping error reverts the overlay and
+      rejects the call): catch them in the action/projection, and `.catch` the call
+      in the handler. Error monitoring goes through `configureClientErrors` /
+      `configureServerErrors` (or `render(fn, root, undefined, { onError })`), never a side effect in
       the fallback. Core `refresh(source)`, router `revalidate(key)`, and `return reload(...)` are
       different APIs — do not mix them. Client → server is additive (same
       setters + `action` + server functions): do not rewrite App with
@@ -1807,13 +2097,16 @@ always-applied rules installed alongside this skill.
 - [ ] Rest props via `omit`, not `{ ...props }`. Conditional `class` via objects, not string concat.
 - [ ] Input filters write back to the DOM on reject (inputs do not rewind).
 - [ ] No Solid 1.x imports or APIs (`solid-js/store`, `createResource`, `onMount`, `Suspense`, ...).
-      No `JSX` imported from `solid-js` — children/return types are `Element` from
-      `solid-js`; DOM `JSX` types come from `@solidjs/web`.
+      No `JSX` imported from `solid-js` — markup types are `JSX.Element` from
+      `@solidjs/web` or `Element` from `solid-js` (aliased next to DOM code).
 - [ ] Inspect children with `children()`; code-split with `lazy` + `<Loading>`; reactive
       component choice with `dynamic()`. No `React.lazy`, no effects inside ref callbacks.
 - [ ] Browser-only code uses `isServer` / `clientOnly` (components) / `ssrSource`
       (values), not `typeof window`.
-      Component teardown is `onSettled` (return cleanup), not `onCleanup`.
+      Component teardown is `onSettled` (return cleanup), not `onCleanup`; nothing
+      inside the `onSettled` callback calls `onCleanup`, `flush()`, or creates a
+      memo/effect. Effect `apply` functions have block bodies and return only a
+      cleanup or nothing.
 - [ ] Dev console shows no diagnostics: reads in tracking scopes (no
       `[STRICT_READ_UNTRACKED]`), store setters synchronous and never called at
       body level (no `[ASYNC_STORE_SETTER]` / `[REACTIVE_WRITE_IN_OWNED_SCOPE]`), held