pmx-canvas 0.7.2 → 0.8.0

package/src/client/theme/surface-theme.css

@@ -30,9 +30,18 @@
   --c-accent: #4BBCFF;
   --c-ok: #2fd07f;
   --c-warn: #f4c542;
-  --c-warn-alt: #FFB300;
   --c-danger: #ff6a7f;
-  --c-purple: #b07aff;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #4BBCFF;
+  --c-on-pin: #081524;
+  --c-agent: #B388FF;
+  --c-subagent: #E879F9;
+  --c-rel-supports: #5FCFC0;
+  --c-rel-contradicts: #E59B6B;
+  --c-rel-cites: #7C9CFF;
+  --c-rel-derived: #D5DEEA;
+  --c-rel-informs: #E58FB0;
+  --c-rel-related: #8ea3bd;
 
   /* Common aliases authored HTML might use. */
   --color-bg: #081524;
@@ -49,44 +58,74 @@
   --color-warning: #f4c542;
   --color-danger: #ff6a7f;
 
-  --font: "IBM Plex Sans", "SF Pro Text", "Avenir Next", system-ui, sans-serif;
-  --mono: "IBM Plex Mono", "SF Mono", "Fira Code", monospace;
+  --font-ui: "IBM Plex Sans", "SF Pro Text", "Avenir Next", system-ui, sans-serif;
+  --font-code: "IBM Plex Mono", "SF Mono", "Fira Code", monospace;
   --font-sans: "IBM Plex Sans", "SF Pro Text", "Avenir Next", system-ui, sans-serif;
   --font-mono: "IBM Plex Mono", "SF Mono", "Fira Code", monospace;
+  /* ── Scale (same in every theme; see docs/design.md) ───────── */
+  --fs-meta: 11px;
+  --fs-ui: 12px;
+  --fs-body: 13px;
+  --fs-title: 15px;
+  --fs-heading: 20px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --r-control: 6px;
+  --r-node: 10px;
+  --r-overlay: 14px;
+  --r-pill: 999px;
+  --e-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.24);
+  --e-2: 0 10px 30px rgba(0, 0, 0, 0.6);
 
   color-scheme: dark light;
 }
 
-:root[data-theme="light"] {
-  /* ── Core palette (light · paper + ink) ──────────────────── */
-  --c-bg: #F4EFE6;
-  --c-panel: #EFE7D4;
-  --c-panel-soft: #ECE4D0;
-  --c-line: #D6CBB4;
-  --c-text: #081524;
+:root[data-theme="daylight"] {
+  /* ── Core palette (Daylight · neutral paper + ink) ───────── */
+  --c-bg: #F6F7F9;
+  --c-panel: #FFFFFF;
+  --c-panel-soft: #F2F4F7;
+  --c-line: #DDE2E9;
+  --c-text: #0B1726;
   --c-text-soft: #3d4d63;
-  --c-muted: #5c6b80;
-  --c-dim: #8794a6;
+  --c-muted: #55657a;
+  --c-dim: #6f7d90;
   --c-accent: #1A7ABF;
-  --c-ok: #1a9f55;
-  --c-warn: #c89b2a;
-  --c-warn-alt: #b8860b;
-  --c-danger: #d32f2f;
-  --c-purple: #7c4dff;
+  --c-ok: #1E7F51;
+  --c-warn: #94600A;
+  --c-danger: #B8344A;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #1A7ABF;
+  --c-on-pin: #FFFFFF;
+  --c-agent: #7C4DDB;
+  --c-subagent: #A83BB0;
+  --c-rel-supports: #1E8C80;
+  --c-rel-contradicts: #B8572A;
+  --c-rel-cites: #4257C9;
+  --c-rel-derived: #4A5566;
+  --c-rel-informs: #B03F72;
+  --c-rel-related: #5c6b80;
+  /* Light themes: ink-tinted shadows (the drawn black ones are for dark surfaces). */
+  --e-1: 0 1px 2px rgba(8, 21, 36, 0.1), 0 6px 20px rgba(8, 21, 36, 0.08);
+  --e-2: 0 10px 30px rgba(8, 21, 36, 0.18);
 
-  --color-bg: #F4EFE6;
-  --color-panel: #EFE7D4;
-  --color-surface: #ECE4D0;
-  --color-border: #D6CBB4;
-  --color-text: #081524;
-  --color-text-primary: #081524;
+  --color-bg: #F6F7F9;
+  --color-panel: #FFFFFF;
+  --color-surface: #F2F4F7;
+  --color-border: #DDE2E9;
+  --color-text: #0B1726;
+  --color-text-primary: #0B1726;
   --color-text-secondary: #3d4d63;
-  --color-text-muted: #5c6b80;
-  --color-text-dim: #8794a6;
+  --color-text-muted: #55657a;
+  --color-text-dim: #6f7d90;
   --color-accent: #1A7ABF;
-  --color-success: #1a9f55;
-  --color-warning: #c89b2a;
-  --color-danger: #d32f2f;
+  --color-success: #1E7F51;
+  --color-warning: #94600A;
+  --color-danger: #B8344A;
 }
 
 :root[data-theme="high-contrast"] {
@@ -102,9 +141,18 @@
   --c-accent: #00ffff;
   --c-ok: #00ff00;
   --c-warn: #ffff00;
-  --c-warn-alt: #ffcc00;
   --c-danger: #ff0000;
-  --c-purple: #e040fb;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #00ffff;
+  --c-on-pin: #000000;
+  --c-agent: #e040fb;
+  --c-subagent: #ff99ff;
+  --c-rel-supports: #00e5c0;
+  --c-rel-contradicts: #ff8a00;
+  --c-rel-cites: #8c9eff;
+  --c-rel-derived: #ffffff;
+  --c-rel-informs: #ff80ab;
+  --c-rel-related: #aaaaaa;
 
   --color-bg: #000000;
   --color-panel: #0a0a0a;
@@ -134,9 +182,18 @@
   --c-accent: #8B96FF;
   --c-ok: #34D399;
   --c-warn: #F5C452;
-  --c-warn-alt: #FFB300;
   --c-danger: #FF6B8A;
-  --c-purple: #B388FF;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #4BBCFF;
+  --c-on-pin: #081524;
+  --c-agent: #B388FF;
+  --c-subagent: #E879F9;
+  --c-rel-supports: #5FCFC0;
+  --c-rel-contradicts: #E59B6B;
+  --c-rel-cites: #7C9CFF;
+  --c-rel-derived: #D5DEEA;
+  --c-rel-informs: #E58FB0;
+  --c-rel-related: #8D96BC;
 
   --color-bg: #0A0D1C;
   --color-panel: #12172E;
@@ -165,10 +222,22 @@
   --c-dim: #978870;
   --c-accent: #B4632C;
   --c-ok: #3E7D4F;
-  --c-warn: #A97B1E;
-  --c-warn-alt: #8F6A0D;
+  --c-warn: #8A5A00;
   --c-danger: #B3402E;
-  --c-purple: #8456B0;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #1F6FA8;
+  --c-on-pin: #FFFFFF;
+  --c-agent: #7046A6;
+  --c-subagent: #A83BB0;
+  --c-rel-supports: #1E8C80;
+  --c-rel-contradicts: #A3461C;
+  --c-rel-cites: #3D50B0;
+  --c-rel-derived: #4E4433;
+  --c-rel-informs: #9C3A66;
+  --c-rel-related: #6B6A66;
+  /* Light themes: ink-tinted shadows (the drawn black ones are for dark surfaces). */
+  --e-1: 0 1px 2px rgba(8, 21, 36, 0.1), 0 6px 20px rgba(8, 21, 36, 0.08);
+  --e-2: 0 10px 30px rgba(8, 21, 36, 0.18);
 
   --color-bg: #F2E7D5;
   --color-panel: #EBDCC2;
@@ -181,7 +250,7 @@
   --color-text-dim: #978870;
   --color-accent: #B4632C;
   --color-success: #3E7D4F;
-  --color-warning: #A97B1E;
+  --color-warning: #8A5A00;
   --color-danger: #B3402E;
 }
 
@@ -198,9 +267,18 @@
   --c-accent: #7FC8DE;
   --c-ok: #74C596;
   --c-warn: #E8C476;
-  --c-warn-alt: #E0A93F;
   --c-danger: #D9707C;
-  --c-purple: #B48EAD;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #6EC1F5;
+  --c-on-pin: #081524;
+  --c-agent: #B388FF;
+  --c-subagent: #E879F9;
+  --c-rel-supports: #5FCFC0;
+  --c-rel-contradicts: #E59B6B;
+  --c-rel-cites: #7C9CFF;
+  --c-rel-derived: #D5DEEA;
+  --c-rel-informs: #E58FB0;
+  --c-rel-related: #939DB1;
 
   --color-bg: #20242E;
   --color-panel: #2A2F3C;
@@ -230,9 +308,18 @@
   --c-accent: #F34E1C;
   --c-ok: #4CC38A;
   --c-warn: #F5B944;
-  --c-warn-alt: #FFB300;
   --c-danger: #F0566A;
-  --c-purple: #A78BFA;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #4BBCFF;
+  --c-on-pin: #081524;
+  --c-agent: #B388FF;
+  --c-subagent: #E879F9;
+  --c-rel-supports: #5FCFC0;
+  --c-rel-contradicts: #E59B6B;
+  --c-rel-cites: #7C9CFF;
+  --c-rel-derived: #D5DEEA;
+  --c-rel-informs: #E58FB0;
+  --c-rel-related: #96948D;
 
   --color-bg: #0B0B0C;
   --color-panel: #161618;
@@ -262,9 +349,18 @@
   --c-accent: #5CCF8F;
   --c-ok: #74D99F;
   --c-warn: #E0B84F;
-  --c-warn-alt: #D9A421;
   --c-danger: #E57373;
-  --c-purple: #A88FE0;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #4BBCFF;
+  --c-on-pin: #081524;
+  --c-agent: #B388FF;
+  --c-subagent: #E879F9;
+  --c-rel-supports: #4FC9D9;
+  --c-rel-contradicts: #E59B6B;
+  --c-rel-cites: #7C9CFF;
+  --c-rel-derived: #D5DEEA;
+  --c-rel-informs: #E58FB0;
+  --c-rel-related: #8BA695;
 
   --color-bg: #0C1712;
   --color-panel: #14231B;
@@ -294,9 +390,18 @@
   --c-accent: #DFDFC1;
   --c-ok: #52C880;
   --c-warn: #E4C465;
-  --c-warn-alt: #FFB300;
   --c-danger: #D67670;
-  --c-purple: #BC8FB4;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #4BBCFF;
+  --c-on-pin: #081524;
+  --c-agent: #B388FF;
+  --c-subagent: #E879F9;
+  --c-rel-supports: #5FCFC0;
+  --c-rel-contradicts: #E59B6B;
+  --c-rel-cites: #7C9CFF;
+  --c-rel-derived: #D5DEEA;
+  --c-rel-informs: #E58FB0;
+  --c-rel-related: #9CA49C;
 
   --color-bg: #0B0D0B;
   --color-panel: #171A17;
@@ -319,7 +424,7 @@ body {
   padding: 0;
   background: var(--c-bg);
   color: var(--c-text);
-  font-family: var(--font, system-ui, sans-serif);
+  font-family: var(--font-ui, system-ui, sans-serif);
   font-size: 14px;
   line-height: 1.5;
 }

package/src/client/theme/tokens.ts

@@ -12,10 +12,8 @@ export interface CanvasTokens {
   accent: string;
   ok: string;
   warn: string;
-  warnAlt: string;
   danger: string;
-  purple: string;
-  thinking: string;
+  agent: string;
   subagent: string;
   font: string;
   mono: string;
@@ -42,13 +40,11 @@ export function getCanvasTokens(): CanvasTokens {
     accent: read('--c-accent'),
     ok: read('--c-ok'),
     warn: read('--c-warn'),
-    warnAlt: read('--c-warn-alt'),
     danger: read('--c-danger'),
-    purple: read('--c-purple'),
-    thinking: read('--c-thinking'),
+    agent: read('--c-agent'),
     subagent: read('--c-subagent'),
-    font: read('--font'),
-    mono: read('--mono'),
+    font: read('--font-ui'),
+    mono: read('--font-code'),
   };
   return cached;
 }
@@ -62,11 +58,11 @@ export function invalidateTokenCache(): void {
 export const PHASE_COLORS: Record<string, string> = {
   idle: 'var(--c-muted)',
   running: 'var(--c-accent)',
-  planning: 'var(--c-thinking)',
-  thinking: 'var(--c-thinking)',
+  planning: 'var(--c-agent)',
+  thinking: 'var(--c-agent)',
   drafting: 'var(--c-accent)',
   tooling: 'var(--c-accent)',
   review: 'var(--c-ok)',
   'waiting-approval': 'var(--c-warn)',
-  waiting: 'var(--c-warn-alt)',
+  waiting: 'var(--c-warn)',
 };

package/src/client/types.ts

@@ -32,9 +32,19 @@ export interface CanvasNodeState {
   zIndex: number;
   collapsed: boolean;
   pinned: boolean;
+  contentRevision?: number;
+  /** Who created / last edited the node's content (server attribution). */
+  createdBy?: NodeActor;
+  lastEditedBy?: NodeActor;
   data: Record<string, unknown>;
 }
 
+export interface NodeActor {
+  actor: 'human' | 'agent' | 'system' | 'unknown';
+  source: string;
+  agentId?: string;
+}
+
 export interface CanvasEdge {
   id: string;
   from: string;

package/src/json-render/renderer/index.tsx

@@ -7,11 +7,14 @@
  * from an inline global injected by the server-side viewer route.
  */
 
-import type { Spec } from '@json-render/core';
-import { AX_SURFACE_EMIT_SOURCE, HTML_SURFACE_PUSH_SOURCE } from '../../shared/ax-surface-protocol.js';
-import { useEffect } from 'react';
+import { createStateStore, type Spec, type StateStore } from '@json-render/core';
+import {
+  AX_SURFACE_EMIT_SOURCE,
+  HTML_SURFACE_PUSH_SOURCE,
+  JSON_VIEWER_STATE_SOURCE,
+} from '../../shared/ax-surface-protocol.js';
 import { createRoot } from 'react-dom/client';
-import { defineRegistry, JSONUIProvider, Renderer, useStateBinding } from '@json-render/react';
+import { defineRegistry, JSONUIProvider, Renderer } from '@json-render/react';
 import { shadcnComponents } from '@json-render/shadcn';
 import { catalog } from '../catalog';
 import { chartComponents } from '../charts/components';
@@ -106,29 +109,10 @@ declare global {
     __PMX_CANVAS_JSON_RENDER_NODE_ID__?: string;
     __PMX_CANVAS_AX_TOKEN__?: string;
     __PMX_CANVAS_AX_STATE__?: unknown;
+    __PMX_CANVAS_UI_STATE_TOKEN__?: string;
   }
 }
 
-// Read-side AX bridge for json-render: keeps the spec-bound `/ax` state live as
-// the parent canvas pushes nonce-validated `ax-update` messages, so a declarative
-// board ({ "$state": "/ax/workItems" }) reflects the work queue in real time.
-function AxStateSync() {
-  const [, setAx] = useStateBinding<unknown>('ax');
-  useEffect(() => {
-    const token = window.__PMX_CANVAS_AX_TOKEN__;
-    if (!token) return undefined;
-    function onMessage(event: MessageEvent) {
-      const m = event.data as { source?: string; type?: string; token?: string; state?: unknown } | null;
-      if (!m || m.source !== HTML_SURFACE_PUSH_SOURCE || m.type !== 'ax-update' || m.token !== token) return;
-      window.__PMX_CANVAS_AX_STATE__ = m.state;
-      setAx(m.state);
-    }
-    window.addEventListener('message', onMessage);
-    return () => window.removeEventListener('message', onMessage);
-  }, [setAx]);
-  return null;
-}
-
 // AX interaction types a json-render spec can bind actions to. When an action
 // named like one of these fires, we forward it to the parent canvas (which
 // validates + submits through the capability-gated endpoint). Convention-based
@@ -188,7 +172,7 @@ function applyTheme(theme: unknown): void {
   document.documentElement.style.colorScheme = theme === 'light' ? 'light' : 'dark';
 }
 
-function App() {
+function App({ store }: { store: StateStore }) {
   const spec = window.__PMX_CANVAS_JSON_RENDER_SPEC__;
 
   if (!spec) {
@@ -208,11 +192,6 @@ function App() {
     );
   }
 
-  // Seed AX state under a reserved `/ax` key so specs can bind { "$state": "/ax/workItems" }.
-  const axState = window.__PMX_CANVAS_AX_STATE__;
-  const initialState =
-    axState !== undefined && axState !== null ? { ...(spec.state ?? {}), ax: axState } : (spec.state ?? undefined);
-
   // Standalone "Open as site" tab (#65): fill the browser viewport instead of the
   // in-canvas card height. The chart child flex-grows; useChartFrameHeight measures
   // the full viewport in this mode. Embedded/expanded keep the padded min-height box.
@@ -229,13 +208,7 @@ function App() {
     : { minHeight: '100vh', padding: 16, boxSizing: 'border-box' as const };
   return (
     <div style={containerStyle}>
-      <JSONUIProvider
-        registry={registry}
-        initialState={initialState}
-        directives={pmxCanvasDirectives}
-        handlers={buildAxHandlers()}
-      >
-        <AxStateSync />
+      <JSONUIProvider registry={registry} store={store} directives={pmxCanvasDirectives} handlers={buildAxHandlers()}>
         <div style={isSite ? { flex: 1, minHeight: 0 } : undefined}>
           <Renderer spec={spec} registry={registry} loading={false} />
         </div>
@@ -248,5 +221,52 @@ function App() {
 const root = document.getElementById('root');
 if (root) {
   syncPreferredTheme();
-  createRoot(root).render(<App />);
+  const stateToken = window.__PMX_CANVAS_UI_STATE_TOKEN__;
+  let store: StateStore | undefined;
+  const mount = (restored: Record<string, unknown> | null) => {
+    if (store) return;
+    const seed = restored ?? window.__PMX_CANVAS_JSON_RENDER_SPEC__?.state ?? {};
+    const ax = window.__PMX_CANVAS_AX_STATE__;
+    store = createStateStore(ax != null ? { ...seed, ax } : seed);
+    if (stateToken) {
+      // subscribe fires synchronously at the input/action write, not in a React
+      // effect that can be lost on unmount. Never mirror the server-owned /ax.
+      store.subscribe(() => {
+        const { ax: _ax, ...state } = store!.getSnapshot();
+        window.parent.postMessage(
+          {
+            source: JSON_VIEWER_STATE_SOURCE,
+            type: 'snapshot',
+            token: stateToken,
+            nodeId: window.__PMX_CANVAS_JSON_RENDER_NODE_ID__,
+            state,
+          },
+          '*',
+        );
+      });
+    }
+    createRoot(root).render(<App store={store} />);
+  };
+  // Install before document load. The parent supplies a snapshot (or null) in
+  // onLoad; restore BEFORE mounting so watchers don't replay past user actions.
+  // Standalone viewers have no state token and render immediately.
+  window.addEventListener('message', (event: MessageEvent) => {
+    if (event.source !== window.parent) return;
+    const m = event.data as { source?: string; type?: string; token?: string; state?: unknown } | null;
+    if (!m) return;
+    if (m.source === JSON_VIEWER_STATE_SOURCE && m.type === 'restore' && stateToken && m.token === stateToken) {
+      if (m.state === null || (typeof m.state === 'object' && !Array.isArray(m.state)))
+        mount(m.state as Record<string, unknown> | null);
+    }
+    if (
+      m.source === HTML_SURFACE_PUSH_SOURCE &&
+      m.type === 'ax-update' &&
+      window.__PMX_CANVAS_AX_TOKEN__ &&
+      m.token === window.__PMX_CANVAS_AX_TOKEN__
+    ) {
+      window.__PMX_CANVAS_AX_STATE__ = m.state;
+      store?.set('/ax', m.state);
+    }
+  });
+  if (!stateToken) mount(null);
 }

package/src/json-render/server.ts

@@ -472,6 +472,73 @@ function normalizeSpec(spec: Record<string, unknown>): Record<string, unknown> {
   return changed ? { ...spec, elements: normalizedElements } : spec;
 }
 
+/** shadcn 0.21 ignores these props unless the renderer supplies a two-way binding. */
+const BINDING_ONLY_PROPS: Record<string, string> = {
+  Input: 'value',
+  Textarea: 'value',
+  Select: 'value',
+  Radio: 'value',
+  Slider: 'value',
+  ToggleGroup: 'value',
+  ButtonGroup: 'selected',
+  Tabs: 'value',
+};
+
+/** Element keys rendered once per item of a `repeat`; a single state path would be shared by every item. */
+function collectRepeatedElementKeys(elements: Record<string, unknown>): Set<string> {
+  const repeated = new Set<string>();
+  const visit = (key: string): void => {
+    const element = asRecord(elements[key]);
+    if (!element) return;
+    const slots = Object.values(asRecord(element.slots) ?? {}).flat();
+    for (const child of [...(Array.isArray(element.children) ? element.children : []), ...slots]) {
+      if (typeof child === 'string' && !repeated.has(child)) {
+        repeated.add(child);
+        visit(child);
+      }
+    }
+  };
+  for (const [key, element] of Object.entries(elements)) {
+    if (asRecord(element)?.repeat !== undefined) visit(key);
+  }
+  return repeated;
+}
+
+/**
+ * Rewrite a literal value on a binding-only form prop (e.g. Input `value: "nw1 6xe"`) into
+ * `{ $bindState: "/form/<element>" }` and seed that path in `state`, so the control shows the
+ * value instead of rendering empty. Controls inside a repeat, or a spec whose `state.form` is not
+ * an object, are left alone and still reported by `jsonRenderFormWarnings`.
+ */
+function bindLiteralFormValues(spec: Record<string, unknown>): Record<string, unknown> {
+  const elements = asRecord(spec.elements);
+  if (!elements) return spec;
+  if (spec.state !== undefined && !asRecord(spec.state)) return spec;
+  const state = asRecord(spec.state) ?? {};
+  if (state.form !== undefined && !asRecord(state.form)) return spec;
+  const form: Record<string, unknown> = { ...(asRecord(state.form) ?? {}) };
+  const repeated = collectRepeatedElementKeys(elements);
+  const nextElements: Record<string, unknown> = { ...elements };
+  let changed = false;
+
+  for (const [key, rawElement] of Object.entries(elements)) {
+    const element = asRecord(rawElement);
+    const prop = typeof element?.type === 'string' ? BINDING_ONLY_PROPS[element.type] : undefined;
+    const props = asRecord(element?.props);
+    if (!element || !prop || !props || repeated.has(key)) continue;
+    const value = props[prop];
+    if (value === undefined || asRecord(value)) continue;
+    const base = deriveElementName(key);
+    let field = base;
+    for (let n = 2; field in form; n++) field = `${base}-${n}`;
+    form[field] = value;
+    nextElements[key] = { ...element, props: { ...props, [prop]: { $bindState: `/form/${field}` } } };
+    changed = true;
+  }
+
+  return changed ? { ...spec, state: { ...state, form }, elements: nextElements } : spec;
+}
+
 function isBareJsonRenderElement(spec: Record<string, unknown>): boolean {
   return typeof spec.type === 'string' && !('root' in spec) && !('elements' in spec);
 }
@@ -528,7 +595,7 @@ export function normalizeAndValidateJsonRenderSpec(spec: unknown): JsonRenderSpe
     }
   }
 
-  const normalizedSpec = normalizeSpec(specRecord);
+  const normalizedSpec = bindLiteralFormValues(normalizeSpec(specRecord));
   const validation = catalog.validate(normalizedSpec);
   if (!validation.success || !validation.data) {
     throw new Error(formatValidationError(validation.error));
@@ -542,30 +609,20 @@ export function normalizeAndValidateJsonRenderSpec(spec: unknown): JsonRenderSpe
   return propsValidation.data as JsonRenderSpec;
 }
 
-/** shadcn 0.21 ignores these props unless the renderer supplies a two-way binding. */
+/** Binding-only form props that normalization could not bind (see bindLiteralFormValues). */
 export function jsonRenderFormWarnings(spec: JsonRenderSpec): string[] {
-  const bindingOnlyProps: Record<string, string> = {
-    Input: 'value',
-    Textarea: 'value',
-    Select: 'value',
-    Radio: 'value',
-    Slider: 'value',
-    ToggleGroup: 'value',
-    ButtonGroup: 'selected',
-    Tabs: 'value',
-  };
   const warnings: string[] = [];
   for (const [key, rawElement] of Object.entries(spec.elements)) {
     const element = asRecord(rawElement);
     const type = typeof element?.type === 'string' ? element.type : '';
-    const prop = bindingOnlyProps[type];
+    const prop = BINDING_ONLY_PROPS[type];
     if (!prop) continue;
     const value = asRecord(element?.props)?.[prop];
     if (value === undefined || value === null) continue;
     const expression = asRecord(value);
     if (hasString(expression?.$bindState) || hasString(expression?.$bindItem)) continue;
     warnings.push(
-      `elements.${key}.props.${prop}: ${type} ignores an unbound ${prop} (including literal values and $state expressions). Use { "$bindState": "/form/field" } and seed spec.state.form.field with the initial value; inside a repeat use $bindItem with seeded item data.${type === 'Tabs' ? ' For an uncontrolled initial tab, use defaultValue instead.' : ''}`,
+      `elements.${key}.props.${prop}: ${type} ignores an unbound ${prop}. PMX binds literal values automatically, but not $state or other expressions, controls inside a repeat, or specs whose state.form is not an object. Use { "$bindState": "/form/field" } and seed spec.state.form.field with the initial value; inside a repeat use $bindItem with seeded item data.${type === 'Tabs' ? ' For an uncontrolled initial tab, use defaultValue instead.' : ''}`,
     );
   }
   return warnings;
@@ -979,6 +1036,8 @@ export async function buildJsonRenderViewerHtml(options: {
   nodeId?: string;
   axToken?: string;
   axState?: unknown;
+  /** Independent nonce for tab-local runtime state across focus transitions. */
+  stateToken?: string;
   /** Nonce for the content-height reporter so the node can grow to fit the chart. */
   frameToken?: string;
   /** When true, charts render at their natural (intrinsic) height instead of
@@ -995,9 +1054,14 @@ export async function buildJsonRenderViewerHtml(options: {
       ...(options.theme ? [`window.__PMX_CANVAS_JSON_RENDER_THEME__ = ${JSON.stringify(options.theme)};`] : []),
       ...(options.display ? [`window.__PMX_CANVAS_JSON_RENDER_DISPLAY__ = ${JSON.stringify(options.display)};`] : []),
       ...(options.devtools ? ['window.__PMX_CANVAS_JSON_RENDER_DEVTOOLS__ = true;'] : []),
+      ...(options.nodeId
+        ? [`window.__PMX_CANVAS_JSON_RENDER_NODE_ID__ = ${JSON.stringify(sanitizeAxValue(options.nodeId))};`]
+        : []),
+      ...(options.stateToken
+        ? [`window.__PMX_CANVAS_UI_STATE_TOKEN__ = ${JSON.stringify(sanitizeAxValue(options.stateToken))};`]
+        : []),
       ...(options.nodeId && options.axToken
         ? [
-            `window.__PMX_CANVAS_JSON_RENDER_NODE_ID__ = ${JSON.stringify(sanitizeAxValue(options.nodeId))};`,
             `window.__PMX_CANVAS_AX_TOKEN__ = ${JSON.stringify(sanitizeAxValue(options.axToken))};`,
             // Read-side AX state: seed for initial render + bound under /ax for specs.
             `window.__PMX_CANVAS_AX_STATE__ = ${JSON.stringify(options.axState ?? null).replace(/</g, '\\u003c')};`,