npm - pmx-canvas - Versions diffs - 0.7.3 → 0.8.0 - Mend

pmx-canvas 0.7.3 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (235) hide show

package/.github/extensions/pmx-canvas/THIRD_PARTY_LICENSES.txt +331 -0
package/.github/extensions/pmx-canvas/extension.mjs +25 -172
package/.github/extensions/pmx-canvas/mcp-bootstrap.ts +198 -0
package/.github/extensions/pmx-canvas/runtime.d.mts +41 -0
package/.github/extensions/pmx-canvas/runtime.json +3 -0
package/.github/extensions/pmx-canvas/runtime.mjs +194 -0
package/.github/extensions/pmx-canvas/start-mcp.mjs +51 -0
package/.github/extensions/pmx-canvas/tools.json +2560 -0
package/CHANGELOG.md +47 -0
package/Readme.md +21 -7
package/dist/canvas/fonts/OFL.txt +93 -0
package/dist/canvas/fonts/ibm-plex-mono-latin-400-normal.woff2 +0 -0
package/dist/canvas/fonts/ibm-plex-mono-latin-500-normal.woff2 +0 -0
package/dist/canvas/fonts/ibm-plex-mono-latin-ext-400-normal.woff2 +0 -0
package/dist/canvas/fonts/ibm-plex-mono-latin-ext-500-normal.woff2 +0 -0
package/dist/canvas/fonts/ibm-plex-sans-latin-400-normal.woff2 +0 -0
package/dist/canvas/fonts/ibm-plex-sans-latin-500-normal.woff2 +0 -0
package/dist/canvas/fonts/ibm-plex-sans-latin-600-normal.woff2 +0 -0
package/dist/canvas/fonts/ibm-plex-sans-latin-ext-400-normal.woff2 +0 -0
package/dist/canvas/fonts/ibm-plex-sans-latin-ext-500-normal.woff2 +0 -0
package/dist/canvas/fonts/ibm-plex-sans-latin-ext-600-normal.woff2 +0 -0
package/dist/canvas/global.css +723 -672
package/dist/canvas/index.js +90 -88
package/dist/canvas/mcp-app.html +7878 -0
package/dist/canvas/mermaid-entry.js +1 -1
package/dist/canvas/surface-theme.css +151 -46
package/dist/json-render/index.css +1 -1
package/dist/types/cli/commands/record.d.ts +1 -1
package/dist/types/client/canvas/NodeContextMark.d.ts +24 -0
package/dist/types/client/canvas/SessionReceipt.d.ts +3 -1
package/dist/types/client/icons.d.ts +1 -2
package/dist/types/client/mcp-app/index.d.ts +1 -0
package/dist/types/client/nodes/ax-node-actions.d.ts +2 -2
package/dist/types/client/nodes/markdown-sanitize.d.ts +2 -0
package/dist/types/client/nodes/use-workbench-asset.d.ts +2 -0
package/dist/types/client/state/attention-store.d.ts +0 -5
package/dist/types/client/state/context-status-store.d.ts +53 -0
package/dist/types/client/state/intent-bridge.d.ts +3 -0
package/dist/types/client/state/near-pin-store.d.ts +16 -0
package/dist/types/client/state/presence-store.d.ts +5 -0
package/dist/types/client/state/session-store.d.ts +33 -3
package/dist/types/client/state/workbench-transport.d.ts +16 -0
package/dist/types/client/theme/tokens.d.ts +1 -3
package/dist/types/client/types.d.ts +9 -0
package/dist/types/json-render/server.d.ts +1 -1
package/dist/types/mcp/app-server.d.ts +3 -0
package/dist/types/mcp/canvas-access.d.ts +1 -1
package/dist/types/mcp/canvas-app.d.ts +4 -0
package/dist/types/mcp/workbench-app.d.ts +4 -0
package/dist/types/server/agent-presence.d.ts +1 -1
package/dist/types/server/ax-state.d.ts +1 -1
package/dist/types/server/canvas-db.d.ts +8 -0
package/dist/types/server/canvas-geometry.d.ts +25 -0
package/dist/types/server/canvas-operations.d.ts +1 -11
package/dist/types/server/canvas-state.d.ts +25 -3
package/dist/types/server/context-brief.d.ts +8 -1
package/dist/types/server/context-reads.d.ts +30 -7
package/dist/types/server/index.d.ts +6 -1
package/dist/types/server/mcp-app-runtime.d.ts +1 -0
package/dist/types/server/operations/http.d.ts +2 -0
package/dist/types/server/operations/invoker.d.ts +4 -2
package/dist/types/server/operations/ops/nodes.d.ts +0 -6
package/dist/types/server/server.d.ts +1 -0
package/dist/types/server/spatial-analysis.d.ts +2 -0
package/dist/types/shared/agent-context.d.ts +22 -0
package/dist/types/shared/agent-presence.d.ts +3 -10
package/dist/types/shared/canvas-app.d.ts +54 -0
package/dist/types/shared/themes.d.ts +1 -1
package/docs/RELEASE.md +7 -3
package/docs/agent-plugin.md +123 -0
package/docs/ax-state-contract.md +40 -0
package/docs/cli.md +7 -2
package/docs/design/AgentContext.dc.html +186 -0
package/docs/design/Before.dc.html +208 -0
package/docs/design/BoardPins.dc.html +151 -0
package/docs/design/Chrome.dc.html +208 -0
package/docs/design/Context.dc.html +239 -0
package/docs/design/Flows.dc.html +181 -0
package/docs/design/Home.dc.html +209 -0
package/docs/design/HomeGraph.dc.html +211 -0
package/docs/design/HomeMap.dc.html +117 -0
package/docs/design/HomeTeam.dc.html +176 -0
package/docs/design/Light.dc.html +28 -0
package/docs/design/Main.dc.html +280 -0
package/docs/design/NearPin.dc.html +260 -0
package/docs/design/Pane600.dc.html +120 -0
package/docs/design/Relations.dc.html +297 -0
package/docs/design/Themes.dc.html +121 -0
package/docs/design/TokenSystem.dc.html +136 -0
package/docs/design/Tokens.dc.html +163 -0
package/docs/design/Types1.dc.html +177 -0
package/docs/design/Types2.dc.html +226 -0
package/docs/design/Types3.dc.html +195 -0
package/docs/design/Uses.dc.html +152 -0
package/docs/design/Vision.dc.html +116 -0
package/docs/design/Zoom.dc.html +82 -0
package/docs/design/canvas.json +274 -0
package/docs/design.md +214 -0
package/docs/environment.md +1 -1
package/docs/http-api.md +80 -15
package/docs/mcp.md +198 -3
package/docs/node-types.md +34 -10
package/docs/plans/plan-009-tech-debt-backlog.md +1 -1
package/docs/plans/plan-015-design-foundation-wave-0.md +177 -0
package/docs/plans/plan-016-context-made-visible-wave-1.md +148 -0
package/docs/product-vision-2026-09.md +47 -7
package/docs/screenshot.png +0 -0
package/docs/sdk.md +1 -0
package/package.json +10 -4
package/plugins/pmx-canvas/LICENSE +21 -0
package/plugins/pmx-canvas/THIRD_PARTY_LICENSES.txt +331 -0
package/plugins/pmx-canvas/assets/preview.png +0 -0
package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/extension.mjs +930 -0
package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/runtime.json +3 -0
package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/runtime.mjs +194 -0
package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/steering-delivery.mjs +79 -0
package/plugins/pmx-canvas/mcp.json +12 -0
package/plugins/pmx-canvas/plugin.json +24 -0
package/plugins/pmx-canvas/runtime.json +3 -0
package/plugins/pmx-canvas/runtime.mjs +194 -0
package/plugins/pmx-canvas/start-mcp.mjs +51 -0
package/plugins/pmx-canvas/tools.json +2560 -0
package/skills/pmx-canvas/SKILL.md +10 -7
package/skills/pmx-canvas/references/full-reference.md +11 -7
package/skills/pmx-canvas/references/github-copilot-app-adapter.md +20 -8
package/skills/pmx-canvas/references/installing-pmx-canvas.md +6 -6
package/skills/pmx-canvas-testing/SKILL.md +5 -4
package/src/cli/commands/copilot.ts +5 -0
package/src/cli/commands/view.ts +1 -1
package/src/cli/index.ts +8 -3
package/src/client/App.tsx +6 -1
package/src/client/canvas/AgentPresenceLayer.tsx +3 -3
package/src/client/canvas/AnnotationLayer.tsx +1 -1
package/src/client/canvas/CanvasNode.tsx +32 -49
package/src/client/canvas/CanvasViewport.tsx +0 -2
package/src/client/canvas/CommandPalette.tsx +3 -2
package/src/client/canvas/ContextMenu.tsx +11 -0
package/src/client/canvas/EdgeLayer.tsx +1 -1
package/src/client/canvas/ExportDialog.tsx +33 -6
package/src/client/canvas/IntentLayer.tsx +2 -2
package/src/client/canvas/Minimap.tsx +12 -7
package/src/client/canvas/NodeContextMark.tsx +156 -0
package/src/client/canvas/SessionPanel.tsx +4 -7
package/src/client/canvas/SessionReceipt.tsx +114 -17
package/src/client/canvas/ShortcutOverlay.tsx +6 -1
package/src/client/canvas/SnapshotPanel.tsx +11 -2
package/src/client/canvas/ToolRail.tsx +12 -9
package/src/client/canvas/TopBar.tsx +16 -11
package/src/client/icons.tsx +2 -12
package/src/client/mcp-app/index.tsx +137 -0
package/src/client/mcp-app/style.css +10 -0
package/src/client/nodes/AttachmentNode.tsx +8 -1
package/src/client/nodes/AxStepControls.tsx +1 -1
package/src/client/nodes/ContextNode.tsx +9 -9
package/src/client/nodes/ExtAppFrame.tsx +13 -8
package/src/client/nodes/FileNode.tsx +8 -5
package/src/client/nodes/ImageNode.tsx +4 -2
package/src/client/nodes/InlineMarkdownEditor.tsx +2 -1
package/src/client/nodes/LedgerNode.tsx +2 -2
package/src/client/nodes/MarkdownNode.tsx +44 -9
package/src/client/nodes/McpAppNode.tsx +6 -4
package/src/client/nodes/PromptNode.tsx +5 -17
package/src/client/nodes/ResponseNode.tsx +3 -15
package/src/client/nodes/StatusNode.tsx +2 -2
package/src/client/nodes/StatusSummary.tsx +3 -1
package/src/client/nodes/TraceNode.tsx +6 -4
package/src/client/nodes/WebpageNode.tsx +1 -1
package/src/client/nodes/ax-node-actions.ts +2 -2
package/src/client/nodes/iframe-document-url.ts +3 -2
package/src/client/nodes/markdown-sanitize.ts +10 -0
package/src/client/nodes/surface-url.ts +10 -0
package/src/client/nodes/use-surface-frame.ts +3 -1
package/src/client/nodes/use-workbench-asset.ts +26 -0
package/src/client/state/attention-bridge.ts +0 -8
package/src/client/state/attention-store.ts +0 -17
package/src/client/state/canvas-store.ts +4 -2
package/src/client/state/context-status-store.ts +66 -0
package/src/client/state/human-store.ts +2 -0
package/src/client/state/iframe-mode.ts +5 -0
package/src/client/state/intent-bridge.ts +10 -4
package/src/client/state/near-pin-store.ts +53 -0
package/src/client/state/presence-store.ts +5 -10
package/src/client/state/session-store.ts +106 -9
package/src/client/state/sse-bridge.ts +26 -7
package/src/client/state/theme-override.ts +1 -1
package/src/client/state/workbench-transport.ts +36 -0
package/src/client/theme/global.css +723 -672
package/src/client/theme/surface-theme.css +151 -46
package/src/client/theme/tokens.ts +7 -11
package/src/client/types.ts +10 -0
package/src/json-render/server.ts +71 -14
package/src/mcp/app-server.ts +64 -0
package/src/mcp/canvas-access.ts +14 -11
package/src/mcp/canvas-app.ts +318 -0
package/src/mcp/server.ts +1 -1
package/src/mcp/workbench-app.ts +211 -0
package/src/server/agent-presence.ts +45 -6
package/src/server/ax-context.ts +1 -1
package/src/server/ax-state.ts +1 -1
package/src/server/board-export.ts +5 -2
package/src/server/canvas-db.ts +46 -12
package/src/server/canvas-geometry.ts +64 -0
package/src/server/canvas-operations.ts +6 -24
package/src/server/canvas-state.ts +105 -15
package/src/server/canvas-validation.ts +19 -4
package/src/server/context-brief.ts +39 -2
package/src/server/context-reads.ts +86 -15
package/src/server/demo-state.json +31 -31
package/src/server/html-surface.ts +4 -5
package/src/server/index.ts +19 -3
package/src/server/mcp-app-runtime.ts +11 -0
package/src/server/operations/composites.ts +4 -3
package/src/server/operations/http.ts +4 -4
package/src/server/operations/invoker.ts +13 -4
package/src/server/operations/ops/ax-read.ts +1 -1
package/src/server/operations/ops/ax-timeline.ts +37 -0
package/src/server/operations/ops/boards.ts +1 -1
package/src/server/operations/ops/canvas-wire.ts +3 -6
package/src/server/operations/ops/intent.ts +31 -2
package/src/server/operations/ops/json-render.ts +1 -1
package/src/server/operations/ops/nodes.ts +8 -76
package/src/server/operations/ops/query.ts +8 -2
package/src/server/operations/ops/snapshots.ts +4 -1
package/src/server/operations/ops/viewport.ts +29 -5
package/src/server/operations/registry.ts +38 -4
package/src/server/scope-fence.ts +55 -10
package/src/server/server.ts +83 -5
package/src/server/spatial-analysis.ts +2 -2
package/src/server/workboard.ts +6 -1
package/src/{server → shared}/agent-context.ts +2 -2
package/src/shared/agent-presence.ts +3 -15
package/src/shared/canvas-app.ts +62 -0
package/src/shared/themes.ts +5 -5
package/src/client/canvas/FocusFieldLayer.tsx +0 -116
package/src/client/canvas/kind-colors.ts +0 -23

package/docs/design/Chrome.dc.html ADDED Viewed

@@ -0,0 +1,208 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Rail, node header and section labels</title>
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&amp;family=IBM+Plex+Sans:wght@400;500;600&amp;display=swap">
+<style>
+body{margin:0}
+</style>
+</helmet>
+<div style="width: 1440px; height: 820px; box-sizing: border-box; padding: 40px 48px; background: #081524; color: #e6eef7; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px">
+<section style="display: flex; flex-direction: column; gap: 14px">
+<div><h2 style="margin: 0; font-size: 15px; font-weight: 600">7 · Tool rail in a 690px-tall window</h2><p style="margin: 2px 0 0; font-size: 12px; color: #8ea3bd">20 buttons need 850px. Settings-type tools move into one menu.</p></div>
+<div style="display: flex; gap: 20px; align-items: flex-start">
+<div style="display: flex; flex-direction: column; gap: 8px">
+<span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Today</span>
+<div style="position: relative; width: 120px; height: 600px; border: 1px solid #1b2c44; border-radius: 10px; overflow: hidden; background: #081524">
+<div style="width: 52px; height: 600px; box-sizing: border-box; padding: 8px 0; background: #0b1828; border-right: 1px solid #1b2c44; display: flex; flex-direction: column; align-items: center; gap: 4px">
+<sc-for list="{{railToday}}" as="i" hint-placeholder-count="20">
+<sc-if value="{{i.sep}}" hint-placeholder-val="{{ false }}"><div style="width: 24px; height: 1px; margin: 4px 0; background: #1b2c44; flex-shrink: 0"></div></sc-if>
+<sc-if value="{{i.btn}}" hint-placeholder-val="{{ true }}"><button aria-label="{{i.label}}" style="flex-shrink: 0; width: 36px; height: 36px; border: 0; border-radius: 8px; padding: 0; background: transparent; color: #8ea3bd; display: flex; align-items: center; justify-content: center"><svg width="18" height="18" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><path d="{{i.d}}"></path></svg></button></sc-if>
+</sc-for>
+</div>
+<div style="position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(transparent, rgba(255,106,127,0.18))"></div>
+</div>
+<span style="width: 120px; font-size: 11px; color: #ff8a9b">Snapshots, Theme and Shortcuts are cut off; Home scrolls away when you reach them.</span>
+</div>
+<div style="display: flex; flex-direction: column; gap: 8px; flex: 1">
+<span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Proposed</span>
+<div style="position: relative; height: 600px; border: 1px solid #1b2c44; border-radius: 10px; overflow: hidden; background: #081524">
+<div style="width: 52px; height: 600px; box-sizing: border-box; padding: 8px 0; background: #0f1d31; border-right: 1px solid #1b2c44; display: flex; flex-direction: column; align-items: center; gap: 4px">
+<sc-for list="{{railNew}}" as="i" hint-placeholder-count="12">
+<sc-if value="{{i.sep}}" hint-placeholder-val="{{ false }}"><div style="width: 24px; height: 1px; margin: 6px 0; background: #1b2c44; flex-shrink: 0"></div></sc-if>
+<sc-if value="{{i.grow}}" hint-placeholder-val="{{ false }}"><div style="flex: 1"></div></sc-if>
+<sc-if value="{{i.btn}}" hint-placeholder-val="{{ true }}"><button aria-label="{{i.label}}" style="{{i.style}}"><svg width="18" height="18" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><path d="{{i.d}}"></path></svg></button></sc-if>
+</sc-for>
+</div>
+<div role="menu" aria-label="Settings" style="position: absolute; left: 60px; bottom: 8px; width: 180px; box-sizing: border-box; padding: 6px; border-radius: 10px; border: 1px solid #1b2c44; background: #0f1d31; box-shadow: 0 10px 30px rgba(0,0,0,0.6); display: flex; flex-direction: column; gap: 2px">
+<sc-for list="{{settings}}" as="m" hint-placeholder-count="6">
+<sc-if value="{{m.sep}}" hint-placeholder-val="{{ false }}"><div style="height: 1px; margin: 4px 6px; background: #1b2c44"></div></sc-if>
+<sc-if value="{{m.btn}}" hint-placeholder-val="{{ true }}"><button role="menuitem" style="display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: {{m.bg}}; color: #e6eef7; font-family: inherit; font-size: 12px; text-align: left">{{m.label}}<span style="font-size: 11px; color: #6b7d94">{{m.hint}}</span></button></sc-if>
+</sc-for>
+</div>
+</div>
+<span style="font-size: 11px; color: #8ea3bd">12 tools, then Settings: theme, snapshots, minimap, shortcuts, trace, feedback.</span>
+</div>
+</div>
+</section>
+<section style="display: flex; flex-direction: column; gap: 14px">
+<div><h2 style="margin: 0; font-size: 15px; font-weight: 600">8 · Node header</h2><p style="margin: 2px 0 0; font-size: 12px; color: #8ea3bd">Expand and the context pin always show; ⋯ on hover opens the existing node menu (now with Open in new tab), and Set as README stays in the markdown footer.</p></div>
+<span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Today</span>
+<div style="border-radius: 12px 12px 8px 8px; border: 1px solid #1b2c44; background: #0f1d31; box-shadow: 0 0 0 1px rgba(244,197,66,0.3), 0 8px 24px rgba(244,197,66,0.1); overflow: hidden">
+<div style="display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; background: #13243b; border-bottom: 1px solid #1b2c44">
+<span style="font-size: 10px; padding: 1px 5px; border-radius: 4px; background: rgba(244,197,66,0.12); color: #f4c542; font-family: -apple-system, system-ui, sans-serif">▤</span>
+<span style="flex: 1; min-width: 0; font-family: -apple-system, system-ui, sans-serif; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">PMX Canvas — guided t…</span>
+<sc-for list="{{oldIcons}}" as="o" hint-placeholder-count="6"><svg width="15" height="15" viewBox="0 0 24 24" style="flex-shrink: 0; color: #8ea3bd; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><path d="{{o.d}}"></path></svg></sc-for>
+</div>
+<div style="height: 44px; padding: 8px 10px; box-sizing: border-box; font-family: -apple-system, system-ui, sans-serif; font-size: 9.5px; color: #b9c6d6">An infinite spatial canvas that agents drive over MCP, HTTP or the Bun SDK.</div>
+</div>
+<span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Proposed — resting</span>
+<div style="border-radius: 10px; border: 1px solid #1b2c44; background: #0f1d31; box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 6px 20px rgba(0,0,0,0.24); overflow: hidden">
+<div style="display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 12px; border-bottom: 1px solid #1b2c44">
+<svg width="16" height="16" viewBox="0 0 24 24" style="color: #8ea3bd; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><path d="M6 5h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM8 10h8M8 14h5"></path></svg>
+<span style="flex: 1; font-size: 12px; font-weight: 600">PMX Canvas — guided tour</span>
+<button aria-label="Expand (Enter)" style="width: 22px; height: 22px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button>
+<button aria-label="Add to context (P)" style="width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid #6b7d94; border-radius: 999px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></button>
+</div>
+<div style="height: 44px; padding: 10px 12px; box-sizing: border-box; font-size: 12px; color: #b9c6d6">An infinite spatial canvas that agents drive over MCP, HTTP or the Bun SDK.</div>
+</div>
+<span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Proposed — hover, ⋯ open</span>
+<div style="position: relative; border-radius: 10px; border: 1px solid #2a4566; background: #0f1d31; box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 6px 20px rgba(0,0,0,0.24)">
+<div style="display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 12px; border-bottom: 1px solid #1b2c44">
+<svg width="16" height="16" viewBox="0 0 24 24" style="color: #8ea3bd; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><path d="M6 5h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM8 10h8M8 14h5"></path></svg>
+<span style="flex: 1; font-size: 12px; font-weight: 600">PMX Canvas — guided tour</span>
+<button aria-label="Expand (Enter)" style="width: 22px; height: 22px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button>
+<button aria-label="Add to context (P)" style="width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid #6b7d94; border-radius: 999px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></button>
+<button aria-label="More actions" style="width: 24px; height: 24px; border: 0; border-radius: 6px; padding: 0; background: #1b2c44; color: #e6eef7; display: flex; align-items: center; justify-content: center"><svg width="16" height="16" viewBox="0 0 24 24" style="fill: currentColor; stroke: none"><circle cx="6" cy="12" r="1.4"></circle><circle cx="12" cy="12" r="1.4"></circle><circle cx="18" cy="12" r="1.4"></circle></svg></button>
+<button aria-label="Close" style="width: 24px; height: 24px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #8ea3bd; display: flex; align-items: center; justify-content: center"><svg width="14" height="14" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round"><path d="M7 7l10 10M17 7L7 17"></path></svg></button>
+</div>
+<div style="height: 44px"></div>
+<div role="menu" aria-label="Node actions" style="position: absolute; right: 36px; top: 34px; width: 210px; box-sizing: border-box; padding: 6px; border-radius: 10px; border: 1px solid #1b2c44; background: #13243b; box-shadow: 0 10px 30px rgba(0,0,0,0.6); display: flex; flex-direction: column; gap: 2px">
+<sc-for list="{{nodeMenu}}" as="m" hint-placeholder-count="8">
+<sc-if value="{{m.sep}}" hint-placeholder-val="{{ false }}"><div style="height: 1px; margin: 4px 6px; background: #1b2c44"></div></sc-if>
+<sc-if value="{{m.btn}}" hint-placeholder-val="{{ true }}"><button role="menuitem" style="display: flex; align-items: center; justify-content: space-between; height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: {{m.bg}}; color: #e6eef7; font-family: inherit; font-size: 12px">{{m.label}}<span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #6b7d94">{{m.hint}}</span></button></sc-if>
+</sc-for>
+</div>
+</div>
+</section>
+<section style="display: flex; flex-direction: column; gap: 14px">
+<div><h2 style="margin: 0; font-size: 15px; font-weight: 600">9–10 · Section labels and floating chrome</h2><p style="margin: 2px 0 0; font-size: 12px; color: #8ea3bd">A one-line caption doesn't need a node's chrome.</p></div>
+<span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Today</span>
+<div style="padding: 10px; border: 1.5px solid rgba(244,197,66,0.45); border-radius: 20px; background: rgba(244,197,66,0.05); box-shadow: 0 0 36px rgba(244,197,66,0.14)">
+<div style="border-radius: 12px 12px 8px 8px; border: 1px solid #1b2c44; background: #0f1d31; box-shadow: 0 0 0 1px rgba(244,197,66,0.3); overflow: hidden; font-family: -apple-system, system-ui, sans-serif">
+<div style="display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; background: #13243b; border-bottom: 1px solid #1b2c44"><span style="color: #4BBCFF; font-size: 11px">▤</span><span style="font-size: 11px; font-weight: 600">② Files &amp; review</span><span style="flex: 1"></span><span style="font-family: Arial, sans-serif; color: #8ea3bd; letter-spacing: 8px; font-size: 11px">⤢⌄×</span></div>
+<div style="padding: 3px 10px; font-size: 9px; color: #b9c6d6">Inline file text, unified diffs, images and cached webpages.</div>
+<div style="display: flex; justify-content: space-between; padding: 0 10px 3px; font-family: Arial, sans-serif; font-size: 9px; color: #5c6b80"><span>Set as README</span><span>Edit</span></div>
+</div>
+</div>
+<span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Proposed</span>
+<div style="padding: 20px 16px; border-radius: 10px; border: 1px dashed #1b2c44; background-color: #081524; background-image: radial-gradient(rgba(142,163,189,0.14) 1px, transparent 1.2px); background-size: 24px 24px">
+<div style="font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -0.01em">② Files &amp; review</div>
+<div style="font-size: 12px; color: #8ea3bd">Inline file text, unified diffs, images and cached webpages.</div>
+</div>
+<span style="font-size: 11px; color: #8ea3bd">Same markdown node, rendered as a heading: no titlebar, no footer; controls appear on hover.</span>
+<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px">
+<div style="display: flex; flex-direction: column; gap: 8px">
+<span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Today</span>
+<div style="position: relative; height: 120px; border-radius: 10px; border: 1px solid #1b2c44; background: #081524; overflow: hidden">
+<div style="position: absolute; left: 12px; right: -20px; top: 30px; height: 100px; border-radius: 10px; background: #0f1d31; border: 1px solid #1b2c44"><div style="height: 30px; border-bottom: 1px solid #1b2c44; background: #13243b; padding: 0 10px; font-size: 11px; line-height: 30px; font-weight: 600">Working context</div></div>
+<span style="position: absolute; right: 8px; top: 26px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid #2a4566; background: #0f1d31; font-family: Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 28px; box-shadow: 0 8px 24px rgba(0,0,0,0.5)">UPDATES 1</span>
+</div>
+<span style="font-size: 11px; color: #8ea3bd">The pill covers the node title.</span>
+</div>
+<div style="display: flex; flex-direction: column; gap: 8px">
+<span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Proposed</span>
+<div style="position: relative; height: 120px; border-radius: 10px; border: 1px solid #1b2c44; background: #081524; overflow: hidden">
+<div style="position: absolute; left: 0; right: 0; top: 0; height: 44px; background: rgba(75,188,255,0.04); border-bottom: 1px dashed #1b2c44"></div>
+<div style="position: absolute; left: 12px; right: -20px; top: 54px; height: 100px; border-radius: 10px; background: #0f1d31; border: 1px solid #1b2c44"><div style="height: 30px; border-bottom: 1px solid #1b2c44; padding: 0 10px; font-size: 12px; line-height: 30px; font-weight: 600">Working context</div></div>
+<span style="position: absolute; right: 8px; top: 7px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid #1b2c44; background: #0f1d31; font-size: 12px; font-weight: 500; line-height: 28px; color: #b9c6d6">Updates <span style="color: #4BBCFF">1</span></span>
+</div>
+<span style="font-size: 11px; color: #8ea3bd">Fit and focus keep a lane clear for floating chrome.</span>
+</div>
+</div>
+</section>
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":820}}'>
+class Component extends DCLogic {
+  renderVals() {
+    var P = {
+      home: 'M8 4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4zM10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3A1.5 1.5 0 0 1 10.5 9z',
+      bug: 'M10 7h4a3 3 0 0 1 3 3v5a5 5 0 0 1-10 0v-5a3 3 0 0 1 3-3zM12 7V4M4 11h3M17 11h3M4 16h3M17 16h3',
+      select: 'M5 3.5l13 7.5-5.6 1.6L10.8 18z',
+      pan: 'M8 12V6.5a1.5 1.5 0 0 1 3 0V11M11 10.5V5a1.5 1.5 0 0 1 3 0v6M14 10.5V7a1.5 1.5 0 0 1 3 0v6.5a6.5 6.5 0 0 1-6.5 6.5h-.6a6 6 0 0 1-5-2.7l-1.8-3a1.5 1.5 0 0 1 2.5-1.6L8 14',
+      connect: 'M4 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0M16 18a2 2 0 1 0 4 0a2 2 0 1 0-4 0M7.6 7.6l8.8 8.8',
+      note: 'M6 5h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM8 10h8M8 14h5',
+      attach: 'M12 15V4M7.5 8.5L12 4l4.5 4.5M5 19.5h14',
+      web: 'M5.5 5h13a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM3.5 9h17',
+      group: 'M4 7V5.5A1.5 1.5 0 0 1 5.5 4H7M11 4h2M17 4h1.5A1.5 1.5 0 0 1 20 5.5V7M20 11v2M20 17v1.5a1.5 1.5 0 0 1-1.5 1.5H17M13 20h-2M7 20H5.5A1.5 1.5 0 0 1 4 18.5V17M4 13v-2',
+      draw: 'M4 20l4.2-1L19 8.2 15.8 5 5 15.8z',
+      text: 'M5.5 6h13M12 6v13',
+      eraser: 'M4 15l9-9 6 6-7 7H8zM9 10l6 6M8 19h12',
+      search: 'M5 11a6 6 0 1 0 12 0a6 6 0 1 0-12 0M20 20l-4.6-4.6',
+      arrange: 'M5 4h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zM15 4h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zM5 14h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zM15 14h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1z',
+      traceOn: 'M4 12a8 8 0 1 0 16 0a8 8 0 1 0-16 0M9 12a3 3 0 1 0 6 0a3 3 0 1 0-6 0',
+      traceOff: 'M4 12a8 8 0 1 0 16 0a8 8 0 1 0-16 0M9 9l6 6M15 9l-6 6',
+      minimap: 'M6 5h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM12 11h4v4h-4z',
+      snap: 'M4 8h3l1.5-2h7L17 8h3v11H4zM9 13a3 3 0 1 0 6 0a3 3 0 1 0-6 0',
+      theme: 'M8 12a4 4 0 1 0 8 0a4 4 0 1 0-8 0M12 3v2M12 19v2M3 12h2M19 12h2',
+      keys: 'M5 6h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zM7 10h1M11 10h1M15 10h1M8 14h8',
+      settings: 'M4 7h9M17 7h3M4 17h3M11 17h9M13 7a2 2 0 1 0 4 0a2 2 0 1 0-4 0M7 17a2 2 0 1 0 4 0a2 2 0 1 0-4 0',
+      ctx: 'M4 12a8 8 0 1 0 16 0a8 8 0 1 0-16 0',
+      ask: 'M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z',
+      open: 'M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5',
+      expand: 'M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7',
+      chevron: 'M7 10l5 5 5-5',
+      close: 'M7 7l10 10M17 7L7 17'
+    };
+    function b(label, d) { return { btn: true, sep: false, grow: false, label: label, d: d }; }
+    var sep = { btn: false, sep: true, grow: false };
+    var grow = { btn: false, sep: false, grow: true };
+    var railToday = [
+      b('Home', P.home), b('Bug and feedback', P.bug), sep,
+      b('Select', P.select), b('Pan', P.pan), b('Connect', P.connect), sep,
+      b('Markdown note', P.note), b('Attach files', P.attach), b('Webpage', P.web), b('Group', P.group), b('Draw', P.draw), b('Text note', P.text), b('Eraser', P.eraser), sep,
+      b('Search and commands', P.search), b('Arrange', P.arrange), b('Enable trace', P.traceOn), b('Clear trace', P.traceOff), b('Hide minimap', P.minimap), b('Snapshots', P.snap), b('Choose theme', P.theme), b('Shortcuts', P.keys)
+    ];
+    var base = 'flex-shrink:0;width:36px;height:36px;border:0;border-radius:6px;padding:0;display:flex;align-items:center;justify-content:center;font-family:inherit;';
+    var off = base + 'background:transparent;color:#8ea3bd;';
+    var on = base + 'background:rgba(75,188,255,0.14);color:#4BBCFF;';
+    var railNew = [
+      b('Home', P.home), sep,
+      b('Select', P.select), b('Pan', P.pan), b('Connect', P.connect), sep,
+      b('Markdown note', P.note), b('Attach files', P.attach), b('Webpage', P.web), b('Group', P.group), b('Draw', P.draw), b('Text note', P.text), sep,
+      b('Search and commands', P.search), b('Arrange', P.arrange), grow, b('Settings', P.settings)
+    ].map(function (i) {
+      if (!i.btn) return i;
+      return Object.assign({}, i, { style: i.label === 'Select' || i.label === 'Settings' ? on : off });
+    });
+    function m(label, hint, active) { return { btn: true, sep: false, label: label, hint: hint, bg: active ? '#1b2c44' : 'transparent' }; }
+    var msep = { btn: false, sep: true };
+    var settings = [m('Theme', 'Dark ›', true), m('Snapshots', ''), m('Minimap', 'On'), m('Keyboard shortcuts', '?'), msep, m('Trace', 'Off ›'), m('Send feedback', '')];
+    var nodeMenu = [m('Focus', ''), m('Rename…', ''), m('Collapse', ''), m('Open in new tab', '', true), msep, m('Delete', '⌫')];
+    var oldIcons = [{ d: P.ctx }, { d: P.ask }, { d: P.open }, { d: P.expand }, { d: P.chevron }, { d: P.close }];
+    return { railToday: railToday, railNew: railNew, settings: settings, nodeMenu: nodeMenu, oldIcons: oldIcons };
+  }
+}
+</script>
+</body>
+</html>

package/docs/design/Context.dc.html ADDED Viewed

@@ -0,0 +1,239 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Nodes in context</title>
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&amp;family=IBM+Plex+Sans:wght@400;500;600&amp;display=swap">
+<style>
+body{margin:0}
+</style>
+</helmet>
+<div style="width: 1440px; height: 1400px; box-sizing: border-box; padding: 48px 56px; background: #081524; color: #e6eef7; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 36px">
+<div>
+<h1 style="margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em">Nodes in context</h1>
+<p style="margin: 4px 0 0; font-size: 13px; color: #8ea3bd">Pinned, being edited by the agent, and selected are three different facts. Today a pin spreads an amber halo to its neighbours and an agent edit is a faint blue sheen; proposed, each fact has its own signal and they combine.</p>
+</div>
+<section style="display: flex; flex-direction: column; gap: 12px">
+<h2 style="margin: 0; font-size: 15px; font-weight: 600">Which two nodes are in context?</h2>
+<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px">
+<sc-for list="{{scenes}}" as="sc" hint-placeholder-count="2">
+<div style="display: flex; flex-direction: column; gap: 8px">
+<span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">{{sc.label}}</span>
+<div style="position: relative; height: 290px; border-radius: 10px; border: 1px solid #1b2c44; overflow: hidden; background-color: {{sc.bg}}; background-image: radial-gradient({{sc.dot}} 1px, transparent 1.2px); background-size: 24px 24px">
+<sc-for list="{{sc.nodes}}" as="cell" hint-placeholder-count="6">
+<div style="position: absolute; left: {{cell.x}}px; top: {{cell.y}}px; width: 204px; height: 124px">
+<sc-if value="{{cell.field}}" hint-placeholder-val="{{ false }}"><div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; border: 1.5px solid rgba(244,197,66,0.45); border-radius: 20px; background: rgba(244,197,66,0.05); box-shadow: 0 0 30px rgba(244,197,66,0.12)"></div></sc-if>
+<div style="{{cell.node}}">
+<div style="{{cell.head}}">
+<svg width="14" height="14" viewBox="0 0 24 24" style="{{cell.icon}}"><path d="M6 5h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM8 10h8M8 14h5"></path></svg>
+<span style="{{cell.title}}">{{cell.name}}</span>
+<sc-if value="{{cell.oldPin}}" hint-placeholder-val="{{ false }}"><span style="color: #f4c542; font-size: 10px">●</span></sc-if>
+<sc-if value="{{cell.expand}}" hint-placeholder-val="{{ false }}"><span style="{{cell.expandStyle}}"><svg width="12" height="12" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></span></sc-if><sc-if value="{{cell.pinOff}}" hint-placeholder-val="{{ false }}"><span style="{{cell.pinOffStyle}}"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></span></sc-if><sc-if value="{{cell.pin}}" hint-placeholder-val="{{ false }}"><span style="{{cell.pinBadge}}"><svg width="11" height="11" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></span></sc-if>
+<span style="{{cell.ctl}}">{{cell.ctlText}}</span>
+</div>
+<div style="{{cell.body}}">{{cell.text}}</div>
+<sc-if value="{{cell.bar}}" hint-placeholder-val="{{ false }}"><div style="{{cell.barStyle}}"></div></sc-if>
+</div>
+<sc-if value="{{cell.handles}}" hint-placeholder-val="{{ false }}"><div style="{{cell.hTL}}"></div><div style="{{cell.hTR}}"></div><div style="{{cell.hBL}}"></div><div style="{{cell.hBR}}"></div></sc-if>
+</div>
+</sc-for>
+</div>
+<span style="font-size: 12px; color: {{sc.captionColor}}">{{sc.caption}}</span>
+</div>
+</sc-for>
+</div>
+</section>
+<section style="display: flex; flex-direction: column; gap: 12px">
+<h2 style="margin: 0; font-size: 15px; font-weight: 600">Every state, side by side</h2>
+<div style="display: grid; grid-template-columns: 120px repeat(6, minmax(0, 1fr)); column-gap: 12px; align-items: end">
+<span></span>
+<sc-for list="{{stateNames}}" as="sn" hint-placeholder-count="6"><span style="font-size: 12px; font-weight: 600; padding-bottom: 4px">{{sn}}</span></sc-for>
+</div>
+<sc-for list="{{rows}}" as="row" hint-placeholder-count="3">
+<div style="display: grid; grid-template-columns: 120px repeat(6, minmax(0, 1fr)); column-gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid #1b2c44">
+<div style="padding-top: 12px"><div style="font-size: 12px; font-weight: 600">{{row.label}}</div><div style="font-size: 11px; color: #8ea3bd">{{row.sub}}</div></div>
+<sc-for list="{{row.cells}}" as="cell" hint-placeholder-count="6">
+<div style="display: flex; flex-direction: column; gap: 6px">
+<div style="position: relative; height: 128px; border-radius: 8px; background: {{row.bg}}">
+<sc-if value="{{cell.field}}" hint-placeholder-val="{{ false }}"><div style="position: absolute; left: 2px; top: 2px; right: 2px; bottom: 2px; border: 1.5px solid rgba(244,197,66,0.45); border-radius: 18px; background: rgba(244,197,66,0.05); box-shadow: 0 0 24px rgba(244,197,66,0.12)"></div></sc-if>
+<div style="{{cell.node}}">
+<div style="{{cell.head}}">
+<svg width="14" height="14" viewBox="0 0 24 24" style="{{cell.icon}}"><path d="M6 5h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM8 10h8M8 14h5"></path></svg>
+<span style="{{cell.title}}">{{cell.name}}</span>
+<sc-if value="{{cell.oldPin}}" hint-placeholder-val="{{ false }}"><span style="color: #f4c542; font-size: 10px">●</span></sc-if>
+<sc-if value="{{cell.expand}}" hint-placeholder-val="{{ false }}"><span style="{{cell.expandStyle}}"><svg width="12" height="12" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></span></sc-if><sc-if value="{{cell.pinOff}}" hint-placeholder-val="{{ false }}"><span style="{{cell.pinOffStyle}}"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></span></sc-if><sc-if value="{{cell.pin}}" hint-placeholder-val="{{ false }}"><span style="{{cell.pinBadge}}"><svg width="11" height="11" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></span></sc-if>
+<span style="{{cell.ctl}}">{{cell.ctlText}}</span>
+</div>
+<div style="{{cell.body}}">{{cell.text}}</div>
+<sc-if value="{{cell.bar}}" hint-placeholder-val="{{ false }}"><div style="{{cell.barStyle}}"></div></sc-if>
+</div>
+<sc-if value="{{cell.handles}}" hint-placeholder-val="{{ false }}"><div style="{{cell.hTL}}"></div><div style="{{cell.hTR}}"></div><div style="{{cell.hBL}}"></div><div style="{{cell.hBR}}"></div></sc-if>
+</div>
+<span style="font-size: 11px; line-height: 1.4; color: {{cell.noteColor}}">{{cell.note}}</span>
+</div>
+</sc-for>
+</div>
+</sc-for>
+</section>
+<section style="display: flex; flex-direction: column; gap: 12px">
+<h2 style="margin: 0; font-size: 15px; font-weight: 600">The context count</h2>
+<div style="display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 24px; align-items: start">
+<div style="display: flex; flex-direction: column; gap: 10px">
+<span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Today</span>
+<div style="display: flex; align-items: center; gap: 12px; align-self: flex-start; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid #f4c542; background: rgba(15,29,49,0.88); font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif">
+<span style="font-size: 12px; font-weight: 600; color: #f4c542">✦ 4 nodes in context</span>
+<span style="font-family: Arial, sans-serif; color: #8ea3bd">×</span>
+</div>
+<span style="font-size: 11px; color: #8ea3bd">Amber, the same color as warnings and the agent's halos.</span>
+</div>
+<div style="display: flex; flex-direction: column; gap: 10px">
+<span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Proposed — no session</span>
+<div style="display: flex; align-items: center; gap: 8px; align-self: flex-start; height: 32px; padding: 0 6px 0 12px; border-radius: 999px; border: 1px solid rgba(75,188,255,0.3); background: #0f1d31; box-shadow: 0 10px 30px rgba(0,0,0,0.45); color: #4BBCFF; font-size: 12px; font-weight: 500">
+<svg width="14" height="14" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg>
+4 in context
+<button aria-label="Clear all context pins" style="width: 22px; height: 22px; border: 0; border-radius: 999px; padding: 0; background: rgba(75,188,255,0.14); color: #4BBCFF; display: flex; align-items: center; justify-content: center"><svg width="12" height="12" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round"><path d="M7 7l10 10M17 7L7 17"></path></svg></button>
+</div>
+<span style="font-size: 11px; color: #8ea3bd">Same blue as the pin badge, so the count and the nodes read as one thing. Hover lights the four nodes.</span>
+</div>
+<div style="display: flex; flex-direction: column; gap: 10px">
+<span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Proposed — agent session (command bar)</span>
+<div style="display: flex; flex-direction: column; gap: 10px; padding: 10px 14px; border-radius: 10px; border: 1px solid #1b2c44; background: rgba(10,23,41,0.92)">
+<div style="display: flex; align-items: center; gap: 6px; flex-wrap: wrap">
+<sc-for list="{{chips}}" as="ch" hint-placeholder-count="4">
+<span style="display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 4px 0 10px; border-radius: 999px; border: 1px solid rgba(75,188,255,0.25); background: rgba(75,188,255,0.1); color: #4BBCFF; font-size: 11px; font-weight: 600">{{ch}}<button aria-label="Remove from context" style="width: 18px; height: 18px; border: 0; border-radius: 999px; padding: 0; background: transparent; color: #4BBCFF; display: flex; align-items: center; justify-content: center"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round"><path d="M7 7l10 10M17 7L7 17"></path></svg></button></span>
+</sc-for>
+<span style="flex: 1"></span>
+<span style="display: flex; align-items: center; gap: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #8ea3bd"><span style="width: 60px; height: 4px; border-radius: 2px; background: #1b2c44; overflow: hidden"><span style="display: block; width: 24%; height: 4px; background: #2fd07f"></span></span>48.2k / 200k</span>
+</div>
+<div style="display: flex; gap: 8px">
+<label style="flex: 1; display: flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid #1b2c44; background: #0f1d31"><span style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0)">Message the agent</span><input placeholder="Steer the agent…" style="flex: 1; border: 0; outline: none; background: transparent; color: #e6eef7; font-family: inherit; font-size: 12px"></label>
+<button style="height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: #4BBCFF; color: #081524; font-family: inherit; font-size: 12px; font-weight: 600">Send</button>
+</div>
+</div>
+<span style="font-size: 11px; color: #8ea3bd">Each pinned node becomes a named chip; × unpins it and the budget drops (your v2 mockup).</span>
+</div>
+</div>
+</section>
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1400}}'>
+class Component extends DCLogic {
+  renderVals() {
+    var P = {
+      dark: { bg: '#081524', dot: 'rgba(142,163,189,0.14)', panel: '#0f1d31', line: '#1b2c44', text: '#e6eef7', soft: '#b9c6d6', muted: '#8ea3bd', accent: '#4BBCFF', accentA: 'rgba(75,188,255,0.12)', onAccent: '#081524', attn: '#B388FF', e1: '0 1px 2px rgba(0,0,0,0.4), 0 6px 20px rgba(0,0,0,0.24)' },
+      light: { bg: '#F6F7F9', dot: 'rgba(11,23,38,0.12)', panel: '#FFFFFF', line: '#DDE2E9', text: '#0B1726', soft: '#3d4d63', muted: '#55657a', accent: '#1A7ABF', accentA: 'rgba(26,122,191,0.09)', onAccent: '#FFFFFF', attn: '#7C4DDB', e1: '0 1px 2px rgba(11,23,38,0.06), 0 4px 14px rgba(11,23,38,0.06)' }
+    };
+    var inset = 'position:absolute;left:12px;top:12px;right:12px;bottom:12px;box-sizing:border-box;overflow:hidden;';
+    function handle(pos, fill, line) {
+      return 'position:absolute;' + pos + 'width:8px;height:8px;box-sizing:border-box;border-radius:2px;background:' + fill + ';border:1.5px solid ' + line + ';';
+    }
+    function today(state, name, text) {
+      var pinned = state === 'pin' || state === 'pinagent' || state === 'pinsel';
+      var agent = state === 'agent' || state === 'pinagent';
+      // semantic-attention.ts: the pinned nodes are the primary focus, so a pin always brings the halo and field
+      var primary = pinned;
+      var border = '#1b2c44', shadow = '0 4px 24px rgba(0,0,0,0.3)';
+      if (state === 'sec') shadow = '0 0 0 1px rgba(244,197,66,0.3), 0 8px 24px rgba(244,197,66,0.1)';
+      if (state === 'sel') { border = '#4BBCFF'; shadow = '0 0 0 1px #4BBCFF, 0 0 0 4px rgba(75,188,255,0.1)'; }
+      if (pinned) { border = 'rgba(244,197,66,0.6)'; shadow = '0 0 0 2px #f4c542, 0 0 8px rgba(244,197,66,0.3)'; }
+      if (primary) shadow = '0 0 0 1px rgba(244,197,66,0.72), 0 12px 34px rgba(244,197,66,0.18), inset 0 0 0 1px rgba(244,197,66,0.28)';
+      var headBg = primary ? 'linear-gradient(90deg, rgba(244,197,66,0.12), transparent 68%), #0b1828' : '#0b1828';
+      // agent-mutating before wave 0: accent border at 45% and a moving accent sheen
+      var bg = agent ? 'linear-gradient(100deg, transparent 20%, rgba(75,188,255,0.13) 50%, transparent 80%), #0f1d31' : '#0f1d31';
+      if (agent) border = 'rgba(75,188,255,0.45)';
+      var sel = state === 'sel' || state === 'pinsel';
+      return {
+        field: primary, oldPin: pinned, pin: false, pinOff: false, expand: false, bar: false, handles: sel, name: name, text: text,
+        node: inset + 'background:' + bg + ';border:1px solid ' + border + ';box-shadow:' + shadow + ';border-radius:12px 12px 8px 8px;font-family:-apple-system,"SF Pro Text",system-ui,sans-serif;',
+        head: 'display:flex;align-items:center;gap:6px;height:28px;padding:0 8px;border-bottom:1px solid #1b2c44;background:' + headBg + ';',
+        icon: 'flex-shrink:0;color:#4BBCFF;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;',
+        title: 'flex:1;min-width:0;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e6eef7;',
+        ctl: 'font-family:Arial,sans-serif;font-size:10px;letter-spacing:3px;color:#8ea3bd;', ctlText: '⤢⌄×',
+        body: 'padding:6px 8px;font-size:9.5px;line-height:1.45;color:#b9c6d6;',
+        hTL: handle('left:8px;top:8px;', '#e6eef7', '#4BBCFF'), hTR: handle('right:8px;top:8px;', '#e6eef7', '#4BBCFF'),
+        hBL: handle('left:8px;bottom:8px;', '#e6eef7', '#4BBCFF'), hBR: handle('right:8px;bottom:8px;', '#e6eef7', '#4BBCFF')
+      };
+    }
+    function proposed(theme, state, name, text) {
+      var c = P[theme];
+      var pinned = state === 'pin' || state === 'pinagent' || state === 'pinsel';
+      var touched = state === 'agent' || state === 'pinagent';
+      var sel = state === 'sel' || state === 'pinsel';
+      var border = pinned ? '1.5px solid ' + c.accent : '1px solid ' + c.line;
+      var shadow = sel ? '0 0 0 3px ' + c.bg + ', 0 0 0 5px ' + c.accent + ', ' + c.e1 : c.e1;
+      return {
+        field: false, oldPin: false, pin: pinned, pinOff: !pinned, expand: true,
+        expandStyle: 'flex-shrink:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:' + c.soft + ';',
+        pinOffStyle: 'flex-shrink:0;width:18px;height:18px;box-sizing:border-box;border-radius:999px;border:1.5px solid ' + c.muted + ';color:' + c.soft + ';display:flex;align-items:center;justify-content:center;', bar: touched, handles: sel, name: name, text: text,
+        node: inset + 'background:' + c.panel + ';border:' + border + ';box-shadow:' + shadow + ';border-radius:10px;font-family:"IBM Plex Sans",system-ui,sans-serif;',
+        head: 'display:flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 10px;border-bottom:1px solid ' + c.line + ';background:' + (pinned ? c.accentA : 'transparent') + ';',
+        icon: 'flex-shrink:0;color:' + (pinned ? c.accent : c.muted) + ';fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;',
+        title: 'flex:1;min-width:0;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:' + c.text + ';',
+        pinBadge: 'flex-shrink:0;width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:' + c.accent + ';color:' + c.onAccent + ';',
+        ctl: 'display:none;', ctlText: '',
+        body: 'padding:7px 10px;font-size:11px;line-height:1.5;color:' + c.soft + ';',
+        barStyle: 'position:absolute;left:0;right:0;top:0;height:2.5px;background:' + c.attn + ';',
+        hTL: handle('left:3px;top:3px;', c.panel, c.accent), hTR: handle('right:3px;top:3px;', c.panel, c.accent),
+        hBL: handle('left:3px;bottom:3px;', c.panel, c.accent), hBR: handle('right:3px;bottom:3px;', c.panel, c.accent)
+      };
+    }
+    var states = ['rest', 'pin', 'agent', 'pinagent', 'sel', 'pinsel'];
+    var stateNames = ['Resting', 'In context', 'Agent editing', 'In context + agent editing', 'Selected', 'In context + selected'];
+    var todayNotes = ['Plain — unless it sits next to a pin: then it gets an amber halo too', 'Amber ring, halo and glowing field — all from the pin', 'A faint blue sheen in the accent, the colour of a selection', 'The pin’s amber halo with the blue sheen', 'Blue ring', 'Blue ring is lost; only the handles show'];
+    var badNotes = { 0: true, 2: true, 5: true };
+    var newNotes = ['', 'Blue border, tinted header, pin badge — no halos, no field', 'Violet bar while the agent edits; read, created and edited marks follow in wave 1', 'Both signals, independently', 'Ring with a gap, plus handles', 'Pin styling stays inside the ring'];
+    var nm = 'Release runbook', tx = 'Pre-flight gates, tag → publish, smoke checklist.';
+    function rowOf(kind) {
+      return states.map(function (st, i) {
+        var cell = kind === 'today' ? today(st, nm, tx) : proposed(kind, st, nm, tx);
+        cell.note = kind === 'today' ? todayNotes[i] : (kind === 'dark' ? newNotes[i] : '');
+        cell.noteColor = kind === 'today' && badNotes[i] ? '#ff8a9b' : '#8ea3bd';
+        return cell;
+      });
+    }
+    var rows = [
+      { label: 'Today', sub: 'Harbor', bg: '#081524', cells: rowOf('today') },
+      { label: 'Proposed', sub: 'Harbor', bg: '#081524', cells: rowOf('dark') },
+      { label: 'Proposed', sub: 'Daylight', bg: '#F6F7F9', cells: rowOf('light') }
+    ];
+    var pos = [[16, 24], [222, 24], [428, 24], [16, 150], [222, 150], [428, 150]];
+    var names = [
+      ['Release runbook', 'Pre-flight gates, tag → publish.'],
+      ['Decision ledger', '09:12 Ship 0.4.7 behind the smoke gate.'],
+      ['Readability floor', '2 files · +2 −2'],
+      ['Agent', 'Tooling · rebuilding the checklist.'],
+      ['node-sizes.ts', 'export const NODE_MIN = …'],
+      ['Sprint state', 'Review · 6 of 7 items merged']
+    ];
+    var todayStates = ['pin', 'sec', 'pin', 'sec', 'rest', 'agent'];
+    var newStates = ['pin', 'rest', 'pin', 'rest', 'rest', 'agent'];
+    function scene(fn) {
+      return pos.map(function (p, i) {
+        var cell = fn(i);
+        cell.x = p[0]; cell.y = p[1];
+        return cell;
+      });
+    }
+    var scenes = [
+      { label: 'Today', bg: '#081524', dot: 'rgba(142,163,189,0.10)', caption: 'Runbook and Readability floor are pinned — but their unpinned neighbours glow amber too, and Sprint state, which the agent is editing, only gets a faint blue sheen.', captionColor: '#ff8a9b',
+        nodes: scene(function (i) { return today(todayStates[i], names[i][0], names[i][1]); }) },
+      { label: 'Proposed', bg: '#081524', dot: 'rgba(142,163,189,0.14)', caption: 'Only the two pinned nodes carry the blue border and pin badge. Sprint state, which the agent is editing, has the violet bar.', captionColor: '#8ea3bd',
+        nodes: scene(function (i) { return proposed('dark', newStates[i], names[i][0], names[i][1]); }) }
+    ];
+    var chips = ['Release runbook', 'PMX Canvas — guided tour', 'Readability floor', 'Working context'];
+    return { scenes: scenes, rows: rows, stateNames: stateNames, chips: chips };
+  }
+}
+</script>
+</body>
+</html>