pmx-canvas 0.7.2 → 0.7.3

package/src/client/theme/global.css

@@ -572,9 +572,23 @@ body,
   box-shadow: 0 4px 24px var(--c-shadow);
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  overflow: visible;
   transition: box-shadow 0.15s ease;
-  contain: layout style paint;
+  contain: layout style;
+}
+
+/* Clip card content, not the connection handles centered on its border. */
+.node-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  border-radius: inherit;
+  overflow: hidden;
+  contain: paint;
+}
+.group-node > .node-content {
+  display: contents;
 }
 
 .canvas-node:hover {
@@ -610,34 +624,42 @@ body,
 /* ── Connection port handles (drag-to-connect) ───────────── */
 .node-port {
   position: absolute;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: var(--c-accent);
-  border: 2px solid var(--c-panel);
+  /* The visible dot stays compact; its grab area stays usable at every zoom. */
+  width: calc(32px * var(--node-port-scale, 1));
+  height: calc(32px * var(--node-port-scale, 1));
+  display: grid;
+  place-items: center;
   opacity: 0;
   cursor: crosshair;
   z-index: 10;
-  transition: opacity 0.15s, transform 0.15s;
-  transform: translate(-50%, -50%) scale(0.6);
+  touch-action: none;
+  transition: opacity 0.15s;
   pointer-events: auto;
 }
-.canvas-node:hover .node-port {
+.node-port::after {
+  content: '';
+  width: calc(6px * var(--node-port-scale, 1));
+  height: calc(6px * var(--node-port-scale, 1));
+  border-radius: 50%;
+  background: var(--c-accent);
+  border: calc(2px * var(--node-port-scale, 1)) solid var(--c-panel);
+  box-shadow: 0 0 0 calc(1px * var(--node-port-scale, 1)) var(--c-accent);
+}
+.canvas-node:hover .node-port,
+.canvas-node.selected .node-port,
+.canvas-node:focus-within .node-port {
   opacity: 1;
-  transform: translate(-50%, -50%) scale(1);
 }
-.node-port:hover {
+.node-port:hover::after {
   background: var(--c-accent-hover);
-  transform: translate(-50%, -50%) scale(1.3);
 }
-.node-port-top    { top: 0;   left: 50%; }
-.node-port-bottom { bottom: 0; left: 50%; transform: translate(-50%, 50%) scale(0.6); }
-.node-port-left   { left: 0;  top: 50%; }
-.node-port-right  { right: 0; top: 50%; transform: translate(50%, -50%) scale(0.6); }
-.canvas-node:hover .node-port-bottom { transform: translate(-50%, 50%) scale(1); }
-.canvas-node:hover .node-port-right  { transform: translate(50%, -50%) scale(1); }
-.node-port-bottom:hover { transform: translate(-50%, 50%) scale(1.3); }
-.node-port-right:hover  { transform: translate(50%, -50%) scale(1.3); }
+/* Bias vertical grab areas outward so they do not steal title/footer clicks. */
+.node-port-top    { top: 0; left: 50%; transform: translate(-50%, -75%); }
+.node-port-bottom { bottom: 0; left: 50%; transform: translate(-50%, 75%); }
+.node-port-top::after { transform: translateY(calc(8px * var(--node-port-scale, 1))); }
+.node-port-bottom::after { transform: translateY(calc(-8px * var(--node-port-scale, 1))); }
+.node-port-left   { left: 0; top: 50%; transform: translate(-50%, -50%); }
+.node-port-right  { right: 0; top: 50%; transform: translate(50%, -50%); }
 
 .canvas-node .node-titlebar {
   display: flex;
@@ -2001,6 +2023,7 @@ body,
   color: var(--c-dim);
 }
 .command-bar-composer {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 10px;
@@ -2012,24 +2035,72 @@ body,
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
 }
 .command-bar-target {
-  appearance: none;
-  -webkit-appearance: none;
   max-width: 148px;
-  padding: 4px 18px 4px 8px;
-  border: 1px solid var(--c-line);
-  border-radius: 7px;
-  background: color-mix(in srgb, var(--c-panel) 80%, transparent)
-    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%237a8699' stroke-width='1.4'/%3E%3C/svg%3E")
-    no-repeat right 6px center;
-  color: var(--c-text-soft);
-  font: 12px/1.3 var(--mono);
-  cursor: pointer;
   flex-shrink: 0;
 }
-.command-bar-target:hover,
-.command-bar-target:focus-visible {
-  border-color: var(--c-accent-25);
+.choice-menu {
+  position: relative;
+  min-width: 0;
+}
+.choice-menu-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  width: 100%;
+  min-height: 36px;
+  padding: 8px 10px;
+  border: 1px solid color-mix(in srgb, var(--c-line) 65%, var(--c-muted));
+  border-radius: 8px;
+  background: var(--c-panel-overlay);
   color: var(--c-text);
+  font: 12px/1.35 var(--font);
+  cursor: pointer;
+}
+.choice-menu-trigger > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.choice-menu-trigger svg { flex-shrink: 0; }
+.choice-menu-trigger:hover,
+.choice-menu-trigger[aria-expanded='true'] { border-color: var(--c-accent); }
+.choice-menu-trigger:focus-visible,
+.choice-menu-options button:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 2px;
+}
+.toolbar-menu.choice-menu-options {
+  top: calc(100% + 6px);
+  left: 0;
+  right: auto;
+  min-width: 100%;
+  width: max-content;
+  max-width: min(320px, calc(100vw - 64px));
+  max-height: min(280px, 40vh);
+  overflow-y: auto;
+  z-index: 20;
+}
+.toolbar-menu.choice-menu-options.opens-above {
+  top: auto;
+  bottom: calc(100% + 6px);
+}
+.command-bar-target.choice-menu {
+  position: static;
+}
+.command-bar-target .choice-menu-options {
+  /* Anchor to the composer, not its inset trigger, to clear the session rail. */
+  min-width: min(200px, 100%);
+  max-width: 100%;
+}
+.choice-menu-options .toolbar-menu-item {
+  min-height: 36px;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+.choice-menu-options button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 .command-bar-icon {
@@ -4498,13 +4569,24 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 .text-prompt-cancel,
 .text-prompt-confirm {
-  padding: 5px 12px;
+  min-height: 36px;
+  padding: 8px 14px;
   border-radius: 7px;
-  border: 1px solid var(--c-line);
-  background: none;
-  color: var(--c-text-soft);
+  border: 1px solid color-mix(in srgb, var(--c-line) 65%, var(--c-muted));
+  background: var(--c-panel-overlay);
+  color: var(--c-text);
   cursor: pointer;
   font-size: 12px;
+  font-weight: 600;
+}
+.text-prompt-cancel:hover {
+  background: var(--c-accent-10);
+  border-color: var(--c-muted);
+}
+.text-prompt-cancel:focus-visible,
+.text-prompt-confirm:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 2px;
 }
 .text-prompt-confirm {
   background: var(--c-accent);
@@ -4524,7 +4606,8 @@ html.is-node-resizing .ext-app-preview-catcher {
   overflow-y: auto;
   color: var(--c-text);
 }
-.feedback-dialog label {
+.feedback-dialog label,
+.feedback-field {
   display: flex;
   flex-direction: column;
   gap: 6px;

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

@@ -979,6 +979,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 +997,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')};`,

package/src/server/server.ts

@@ -1737,10 +1737,12 @@ async function handleJsonRenderView(url: URL): Promise<Response> {
   const html = await buildJsonRenderViewerHtml({
     title,
     spec,
+    nodeId,
+    stateToken: url.searchParams.get('stateToken') ?? undefined,
     ...(theme ? { theme } : {}),
     ...(display ? { display } : {}),
     ...(devtoolsEnabled ? { devtools: true } : {}),
-    ...(axToken ? { nodeId, axToken } : {}),
+    ...(axToken ? { axToken } : {}),
     // Seed the read-side AX state (only for AX-enabled nodes) so specs can bind /ax.
     ...(axToken && axEnabled ? { axState: buildCanvasAxSurfaceSnapshot() } : {}),
     // Content-fit: report natural height (charts render intrinsic) so the node grows.

package/src/shared/ax-surface-protocol.ts

@@ -18,6 +18,9 @@ export const AX_SURFACE_ACK_SOURCE = 'pmx-canvas-ax-ack';
 /** Parent→surface pushes (theme updates, live AX state) into html/viewer iframes. */
 export const HTML_SURFACE_PUSH_SOURCE = 'pmx-canvas-html-node';
 
+/** Tab-local JSON viewer state handoff, independent of AX capabilities. */
+export const JSON_VIEWER_STATE_SOURCE = 'pmx-canvas-json-state';
+
 /** Ext-app boot beacon: the iframe's scripts executed (WebKit watchdog liveness). */
 export const EXT_APP_BOOT_BEACON_SOURCE = 'pmx-canvas-ext-app-alive';