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

pmx-canvas 0.7.3 → 0.8.2

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 (244) 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 +64 -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 +726 -674
package/dist/canvas/index.js +90 -88
package/dist/canvas/mcp-app.html +7879 -0
package/dist/canvas/mermaid-entry.js +1 -1
package/dist/canvas/surface-theme.css +151 -46
package/dist/json-render/index.css +81 -1
package/dist/json-render/index.js +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/HtmlNode.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 +211 -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 +217 -0
package/docs/environment.md +1 -1
package/docs/http-api.md +86 -16
package/docs/mcp.md +202 -4
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 +29 -9
package/skills/pmx-canvas/evals/evals.json +62 -0
package/skills/pmx-canvas/references/ax-html-control-surface.md +6 -0
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/nodes.ts +3 -2
package/src/cli/commands/view.ts +1 -1
package/src/cli/index.ts +10 -4
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/HtmlNode.tsx +12 -2
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 +726 -674
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/renderer/index.css +6 -1
package/src/json-render/renderer/index.tsx +0 -1
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 +7 -25
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 +87 -15
package/src/server/demo-state.json +31 -31
package/src/server/html-surface.ts +4 -5
package/src/server/index.ts +41 -5
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/mcp.ts +6 -0
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 +6 -2
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 +41 -5
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/AgentContext.dc.html ADDED Viewed

@@ -0,0 +1,186 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>What the agent did with 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: 1500px; 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: 28px">
+<div style="display: flex; gap: 40px; align-items: flex-end">
+<div style="flex: 1">
+<h1 style="margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em">What the agent did with context</h1>
+<p style="margin: 4px 0 0; font-size: 13px; color: #8ea3bd">Two questions, two colours. Every mark has a glyph and a word, so it reads without the colour, and every mark explains itself on hover.</p>
+</div>
+<div style="display: flex; gap: 10px">
+<div style="{{s.rule}} border-color: rgba(75,188,255,0.4)"><span style="{{s.ruleDot}} background: #4BBCFF"></span><span><b style="font-weight: 600; color: #4BBCFF">Blue</b> — what's in context<br><span style="color: #8ea3bd">You or the agent pinned it</span></span></div>
+<div style="{{s.rule}} border-color: rgba(179,136,255,0.4)"><span style="{{s.ruleDot}} background: #B388FF"></span><span><b style="font-weight: 600; color: #B388FF">Violet</b> — what the agent did<br><span style="color: #8ea3bd">Read, created, edited, suggested</span></span></div>
+<div style="{{s.rule}} border-color: rgba(244,197,66,0.4)"><span style="{{s.ruleDot}} background: #f4c542"></span><span><b style="font-weight: 600; color: #f4c542">Amber</b> — needs a look<br><span style="color: #8ea3bd">The agent's copy is out of date</span></span></div>
+</div>
+</div>
+<section style="display: flex; flex-direction: column; gap: 12px">
+<h2 style="margin: 0; font-size: 15px; font-weight: 600">The key</h2>
+<div style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px">
+<sc-for list="{{key}}" as="k" hint-placeholder-count="8">
+<div style="display: flex; flex-direction: column; gap: 8px">
+<div style="position: relative; height: 104px; border-radius: 8px; background: #06111e; padding: 12px; box-sizing: border-box">
+<div style="{{k.node}}">
+<sc-if value="{{k.bar}}" hint-placeholder-val="{{ false }}"><div style="position: absolute; left: 0; right: 0; top: 0; height: 2.5px; background: #B388FF"></div></sc-if>
+<div style="{{k.head}}">
+<span style="flex: 1; min-width: 0; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{k.title}}</span>
+<sc-if value="{{k.mark}}" hint-placeholder-val="{{ true }}"><span style="{{k.markStyle}}"><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="{{k.icon}}"></path></svg>{{k.markText}}</span></sc-if>
+<sc-if value="{{k.pin}}" hint-placeholder-val="{{ false }}"><span style="position: relative; width: 18px; height: 18px; border-radius: 999px; background: #4BBCFF; color: #081524; 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.6; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg><sc-if value="{{k.byAgent}}" hint-placeholder-val="{{ false }}"><span style="position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px; border-radius: 999px; background: #B388FF; border: 2px solid #0f1d31"></span></sc-if></span></sc-if>
+</div>
+<div style="padding: 6px 10px; font-size: 11px; color: #8ea3bd">{{k.meta}}</div>
+<sc-if value="{{k.actions}}" hint-placeholder-val="{{ false }}"><div style="position: absolute; right: 8px; bottom: 6px; display: flex; gap: 4px"><span style="{{s.mini}} background: rgba(179,136,255,0.16); color: #B388FF">Accept</span><span style="{{s.mini}} color: #8ea3bd">Dismiss</span></div></sc-if>
+</div>
+</div>
+<div><div style="font-size: 12px; font-weight: 600">{{k.name}}</div><div style="font-size: 11px; color: #8ea3bd">{{k.desc}}</div></div>
+</div>
+</sc-for>
+</div>
+</section>
+<section style="display: flex; flex-direction: column; gap: 12px">
+<h2 style="margin: 0; font-size: 15px; font-weight: 600">After a session — the agent-activity lens</h2>
+<div style="display: flex; gap: 24px">
+<div style="position: relative; width: 900px; height: 600px; border-radius: 10px; border: 1px solid #1b2c44; overflow: hidden; background-color: #081524; background-image: radial-gradient(rgba(142,163,189,0.14) 1px, transparent 1.2px); background-size: 24px 24px">
+<svg width="900" height="600" viewBox="0 0 900 600" style="position: absolute; left: 0; top: 0; fill: none; stroke-linecap: round">
+<path d="M 170 172 C 170 140, 400 160, 400 130" style="stroke: #5FCFC0; stroke-width: 2"></path><path d="M 400 126 L 395.5 135 L 404.5 135 Z" style="fill: #5FCFC0"></path>
+<path d="M 470 172 L 470 130" style="stroke: #E59B6B; stroke-width: 2"></path><path d="M 470 126 L 465.5 135 L 474.5 135 Z" style="fill: #E59B6B"></path>
+<path d="M 640 214 C 600 214, 560 170, 560 130" style="stroke: #B388FF; stroke-width: 2; stroke-dasharray: 6 5"></path><path d="M 560 126 L 555.5 135 L 564.5 135 Z" style="fill: #B388FF"></path>
+</svg>
+<span style="position: absolute; left: 596px; top: 136px; height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(179,136,255,0.16); color: #B388FF; font-size: 11px; font-weight: 500; line-height: 20px">suggested: supports</span>
+<div style="{{sc.node}} left: 360px; top: 40px; border: 1.5px solid #4BBCFF"><div style="{{sc.head}} background: rgba(75,188,255,0.10)"><span style="{{sc.title}}">Raise Pro to $24?</span><span style="{{sc.read}}"><svg width="12" height="12" viewBox="0 0 24 24" style="{{sc.ic}}"><path d="{{i.eye}}"></path></svg>read</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><span style="{{sc.pin}}"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round"><path d="{{i.pin}}"></path></svg></span></div><div style="{{sc.body}}">question · pinned by you</div></div>
+<div style="{{sc.node}} left: 640px; top: 30px; border: 1.5px dashed #B388FF; background: rgba(179,136,255,0.06)"><div style="{{sc.head}}"><span style="{{sc.title}} color: #d9c7ff">Summary: case for $24</span><span style="{{sc.read}}"><svg width="12" height="12" viewBox="0 0 24 24" style="{{sc.ic}}"><path d="{{i.spark}}"></path></svg>suggested</span></div><div style="{{sc.body}} display: flex; gap: 6px"><span style="{{s.mini}} background: rgba(179,136,255,0.16); color: #B388FF">Accept</span><span style="{{s.mini}} color: #8ea3bd">Dismiss</span></div></div>
+<div style="{{sc.node}} left: 60px; top: 172px"><div style="{{sc.head}}"><span style="{{sc.title}}">Churn flat after last raise</span><span style="{{sc.read}}"><svg width="12" height="12" viewBox="0 0 24 24" style="{{sc.ic}}"><path d="{{i.spark}}"></path></svg>by Claude</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="{{sc.body}}">finding · created 14:06</div></div>
+<div style="{{sc.node}} left: 360px; top: 172px; border: 1.5px solid #4BBCFF"><div style="position: absolute; left: 0; right: 0; top: 0; height: 2.5px; background: #B388FF"></div><div style="{{sc.head}} background: rgba(75,188,255,0.10)"><span style="{{sc.title}}">SMB is price-sensitive</span><span style="{{sc.read}}"><svg width="12" height="12" viewBox="0 0 24 24" style="{{sc.ic}}"><path d="{{i.pen}}"></path></svg>edited</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><span style="{{sc.pin}}"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round"><path d="{{i.pin}}"></path></svg></span></div><div style="{{sc.body}}">finding · edited 14:12 · <span style="color: #B388FF">see change</span></div></div>
+<div style="{{sc.node}} left: 640px; top: 172px"><div style="{{sc.head}}"><span style="{{sc.title}}">Competitor pricing</span><span style="{{sc.read}}"><svg width="12" height="12" viewBox="0 0 24 24" style="{{sc.ic}}"><path d="{{i.eye}}"></path></svg>read</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="{{sc.body}}">webpage · not pinned, read anyway</div></div>
+<div style="{{sc.node}} left: 60px; top: 330px; border: 1.5px solid #4BBCFF"><div style="{{sc.head}} background: rgba(75,188,255,0.10)"><span style="{{sc.title}}">Churn by plan</span><span style="{{sc.read}}"><svg width="12" height="12" viewBox="0 0 24 24" style="{{sc.ic}}"><path d="{{i.eye}}"></path></svg>read</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><span style="{{sc.pin}} position: relative"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round"><path d="{{i.pin}}"></path></svg><span style="position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px; border-radius: 999px; background: #B388FF; border: 2px solid #0f1d31"></span></span></div><div style="{{sc.body}}">chart · pinned by Claude</div></div>
+<div style="{{sc.node}} left: 360px; top: 330px; border: 1.5px solid #4BBCFF"><div style="{{sc.head}} background: rgba(75,188,255,0.10)"><span style="{{sc.title}}">SMB interviews</span><span style="{{sc.read}} background: rgba(244,197,66,0.14); color: #f4c542"><svg width="12" height="12" viewBox="0 0 24 24" style="{{sc.ic}}"><path d="{{i.warn}}"></path></svg>changed</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><span style="{{sc.pin}}"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round"><path d="{{i.pin}}"></path></svg></span></div><div style="{{sc.body}}">notes · you added 2 calls at 14:15</div></div>
+<div style="{{sc.node}} left: 640px; top: 330px; opacity: 0.35"><div style="{{sc.head}}"><span style="{{sc.title}}">Pricing notes</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="{{sc.body}}">markdown · untouched by the agent</div></div>
+<div style="position: absolute; left: 60px; top: 424px; width: 300px; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid #2a4566; background: #13243b; box-shadow: 0 10px 30px rgba(0,0,0,0.55); display: flex; flex-direction: column; gap: 6px; font-size: 11px">
+<span style="font-size: 12px; font-weight: 600; color: #e6eef7">Churn by plan</span>
+<span style="color: #b9c6d6"><span style="color: #B388FF">Pinned by Claude</span> · 14:04 — “the chart the churn finding rests on”</span>
+<span style="color: #b9c6d6"><span style="color: #B388FF">Read 3 times</span> · last 14:11</span>
+</div>
+<div style="position: absolute; left: 380px; top: 452px; width: 300px; display: flex; flex-direction: column; gap: 8px">
+<button style="align-self: flex-start; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(75,188,255,0.3); background: #0f1d31; color: #4BBCFF; font-family: inherit; font-size: 12px; font-weight: 500"><svg width="13" height="13" 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<span style="color: #f4c542">· 1 out of date</span></button>
+</div>
+<div style="position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(179,136,255,0.35); background: rgba(10,23,41,0.94)">
+<span style="display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #B388FF"><span style="width: 8px; height: 8px; border-radius: 999px; background: #B388FF"></span>Claude · this session</span>
+<sc-for list="{{lens}}" as="l" hint-placeholder-count="5">
+<span style="display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid #2a4566; font-size: 11px; color: #e6eef7"><svg width="12" height="12" viewBox="0 0 24 24" style="fill: none; stroke: #B388FF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="{{l.icon}}"></path></svg>{{l.name}}<span style="color: #6b7d94">{{l.n}}</span></span>
+</sc-for>
+<span style="flex: 1"></span>
+<span style="font-size: 11px; color: #8ea3bd">Untouched nodes dimmed</span>
+<span role="switch" aria-checked="true" aria-label="Agent activity lens" style="width: 32px; height: 18px; border-radius: 999px; background: #B388FF; position: relative"><span style="position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 999px; background: #081524"></span></span>
+</div>
+</div>
+<aside style="width: 360px; height: 600px; box-sizing: border-box; padding: 16px; border-radius: 10px; border: 1px solid #1b2c44; background: #0b1828; display: flex; flex-direction: column; gap: 12px; overflow: hidden">
+<div><div style="font-size: 13px; font-weight: 600">What Claude did</div><div style="font-size: 11px; color: #8ea3bd">This session · 14:02–14:20 · saved as a snapshot</div></div>
+<div style="display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(244,197,66,0.10); color: #f4c542; font-size: 11px"><svg width="13" height="13" viewBox="0 0 24 24" style="flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round"><path d="{{i.warn}}"></path></svg><span style="flex: 1">SMB interviews changed after Claude read it.</span><span style="{{s.mini}} background: rgba(244,197,66,0.16)">Tell Claude</span></div>
+<sc-for list="{{activity}}" as="a" hint-placeholder-count="5">
+<div style="display: flex; flex-direction: column; gap: 3px; padding-bottom: 8px; border-bottom: 1px solid #1b2c44">
+<div style="display: flex; align-items: center; gap: 6px"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: #B388FF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="{{a.icon}}"></path></svg><span style="font-size: 12px; font-weight: 600; flex: 1">{{a.name}}</span><span style="font-size: 11px; color: #6b7d94">{{a.n}}</span><sc-if value="{{a.action}}" hint-placeholder-val="{{ false }}"><span style="{{s.mini}} color: #e6eef7; border: 1px solid #2a4566">{{a.action}}</span></sc-if></div>
+<div style="font-size: 11px; color: #8ea3bd; padding-left: 19px">{{a.items}}</div>
+</div>
+</sc-for>
+</aside>
+</div>
+</section>
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1500}}'>
+class Component extends DCLogic {
+  renderVals() {
+    var i = {
+      eye: 'M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12zM12 9.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 1 0 0-5',
+      eyeOff: 'M3 3l18 18M10.6 6.1A10 10 0 0 1 12 6c6.5 0 10 6 10 6a17 17 0 0 1-3 3.6M6.6 6.6C3.8 8.3 2 12 2 12s3.5 6 10 6a9.6 9.6 0 0 0 4.4-1',
+      spark: 'M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z',
+      pen: 'M4 20l4.2-1L19 8.2 15.8 5 5 15.8z',
+      warn: 'M12 4l9 16H3zM12 10v4M12 17v.5',
+      pin: 'M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20',
+      link: 'M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'
+    };
+    var V = '#B388FF', VA = 'rgba(179,136,255,0.16)';
+    var nodeBase = 'position:relative;height:80px;box-sizing:border-box;overflow:hidden;border-radius:10px;background:#0f1d31;box-shadow:0 1px 2px rgba(0,0,0,0.4),0 6px 20px rgba(0,0,0,0.24);';
+    var headBase = 'display:flex;align-items:center;gap:6px;height:34px;padding:0 8px 0 10px;border-bottom:1px solid #1b2c44;';
+    function mark(text, color, bg) { return 'display:flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:500;flex-shrink:0;color:' + color + ';background:' + bg + ';'; }
+    function k(o) {
+      var pinned = !!o.pin;
+      return {
+        name: o.name, desc: o.desc, title: o.title, meta: o.meta,
+        node: nodeBase + (o.dashed ? 'border:1.5px dashed ' + V + ';background:rgba(179,136,255,0.06);' : pinned ? 'border:1.5px solid #4BBCFF;' : 'border:1px solid #1b2c44;'),
+        head: headBase + (pinned ? 'background:rgba(75,188,255,0.10);' : ''),
+        bar: !!o.bar, pin: pinned, byAgent: !!o.byAgent, actions: !!o.actions,
+        mark: !!o.icon, icon: o.icon || '', markText: o.markText || '',
+        markStyle: o.warn ? mark('', '#f4c542', 'rgba(244,197,66,0.14)') : o.muted ? mark('', '#8ea3bd', '#13243b') : mark('', V, VA)
+      };
+    }
+    var key = [
+      k({ name: 'In context — pinned by you', desc: 'Blue border, tinted header, pin badge.', title: 'Raise Pro to $24?', meta: 'question', pin: true }),
+      k({ name: 'In context — pinned by the agent', desc: 'Same blue, with a violet dot on the pin; hover says why.', title: 'Churn by plan', meta: 'pinned by Claude · 14:04', pin: true, byAgent: true }),
+      k({ name: 'Read by the agent', desc: 'It loaded this into its context, pinned or not.', title: 'Competitor pricing', meta: 'read 14:11', icon: i.eye, markText: 'read' }),
+      k({ name: 'Pinned, not read yet', desc: 'In context, but the agent hasn’t loaded it since you pinned it.', title: 'Pricing notes', meta: 'pinned 14:18', pin: true, icon: i.eyeOff, markText: 'not read', muted: true }),
+      k({ name: 'Created by the agent', desc: 'Its byline stays until you edit the node.', title: 'Churn flat after last raise', meta: 'created 14:06', icon: i.spark, markText: 'by Claude' }),
+      k({ name: 'Edited by the agent', desc: 'Violet bar for the session; “see change” opens the diff and undo.', title: 'SMB is price-sensitive', meta: 'edited 14:12 · see change', bar: true, icon: i.pen, markText: 'edited' }),
+      k({ name: 'Suggested by the agent', desc: 'A node, link or pin it proposes. Nothing changes until you accept.', title: 'Summary: case for $24', meta: '', dashed: true, icon: i.spark, markText: 'suggested', actions: true }),
+      k({ name: 'Agent’s copy is out of date', desc: 'Pinned and read, then changed. Amber, because it’s a real warning.', title: 'SMB interviews', meta: 'you added 2 calls · 14:15', pin: true, icon: i.warn, markText: 'changed since read', warn: true })
+    ];
+    var lens = [
+      { name: 'read', n: 4, icon: i.eye }, { name: 'created', n: 1, icon: i.spark }, { name: 'edited', n: 1, icon: i.pen },
+      { name: 'suggested', n: 2, icon: i.link }, { name: 'pinned', n: 1, icon: i.pin }
+    ];
+    var activity = [
+      { name: 'Read', n: '4', icon: i.eye, items: 'Raise Pro to $24?, Competitor pricing, Churn by plan, SMB interviews', action: '' },
+      { name: 'Pinned', n: '1', icon: i.pin, items: 'Churn by plan — “the chart the churn finding rests on”', action: 'Unpin' },
+      { name: 'Created', n: '1', icon: i.spark, items: 'Churn flat after last raise', action: '' },
+      { name: 'Edited', n: '1', icon: i.pen, items: 'SMB is price-sensitive — rewrote the second paragraph', action: 'Undo' },
+      { name: 'Suggested', n: '2', icon: i.link, items: 'Node “Summary: case for $24”; link Competitor pricing → Raise Pro to $24? (supports)', action: 'Review' }
+    ];
+    var s = {
+      rule: 'display:flex;align-items:flex-start;gap:10px;width:230px;box-sizing:border-box;padding:10px 12px;border-radius:10px;border:1px solid;background:#0f1d31;font-size:12px;line-height:1.45;',
+      ruleDot: 'width:12px;height:12px;border-radius:999px;flex-shrink:0;margin-top:3px;',
+      mini: 'height:20px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:500;line-height:20px;'
+    };
+    var sc = {
+      node: 'position:absolute;width:250px;height:84px;box-sizing:border-box;overflow:hidden;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);',
+      head: 'display:flex;align-items:center;gap:6px;height:36px;padding:0 8px 0 10px;border-bottom:1px solid #1b2c44;',
+      title: 'flex:1;min-width:0;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;',
+      read: 'display:flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:500;flex-shrink:0;color:' + V + ';background:' + VA + ';',
+      ic: 'fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;',
+      pin: 'width:18px;height:18px;border-radius:999px;background:#4BBCFF;color:#081524;display:flex;align-items:center;justify-content:center;flex-shrink:0;',
+      body: 'padding:8px 10px;font-size:11px;color:#8ea3bd;'
+    };
+    return { key: key, lens: lens, activity: activity, s: s, sc: sc, i: i };
+  }
+}
+</script>
+</body>
+</html>

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

@@ -0,0 +1,208 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>PMX Canvas — today</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;display=swap">
+<style>
+body{margin:0}
+</style>
+</helmet>
+<div style="position: relative; width: 1440px; height: 900px; overflow: hidden; background: #081524; color: #e6eef7; font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif; font-size: 11px; line-height: 1.45">
+<nav aria-label="Tools" style="position: absolute; left: 0; top: 0; width: 52px; height: 900px; box-sizing: border-box; padding: 8px 0; background: #0b1828; border-right: 1px solid #1b2c44; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #8ea3bd">
+<button aria-label="Home" style="width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #4BBCFF; padding: 0; display: flex; align-items: center; justify-content: center"><svg width="20" height="20" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.6"><rect x="4" y="4" width="16" height="16" rx="4"></rect><rect x="9" y="9" width="6" height="6" rx="1.5"></rect></svg></button>
+<button aria-label="Bug and feedback" style="width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #8ea3bd; padding: 0; 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"><rect x="8" y="7" width="8" height="12" rx="4"></rect><path d="M12 7V4M5 10h3M16 10h3M5 15h3M16 15h3M9 5l1.5 2M15 5l-1.5 2"></path></svg></button>
+<div style="width: 24px; height: 1px; margin: 4px 0; background: #1b2c44"></div>
+<button aria-label="Select (V)" style="width: 36px; height: 36px; border: 1px solid #2a4566; border-radius: 8px; background: #13243b; color: #4BBCFF; padding: 0; 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-linejoin: round"><path d="M5 3.5l13 7.5-5.6 1.6L10.8 18z"></path></svg></button>
+<button aria-label="Pan (Space)" style="width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #8ea3bd; padding: 0; 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="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"></path></svg></button>
+<button aria-label="Connect (C)" style="width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #8ea3bd; padding: 0; 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"><circle cx="6" cy="6" r="2.2"></circle><circle cx="18" cy="18" r="2.2"></circle><path d="M7.6 7.6l8.8 8.8"></path></svg></button>
+<div style="width: 24px; height: 1px; margin: 4px 0; background: #1b2c44"></div>
+<button aria-label="Markdown note (M)" style="width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #8ea3bd; padding: 0; 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"><rect x="4" y="5" width="16" height="14" rx="2"></rect><path d="M8 10h8M8 14h5"></path></svg></button>
+<button aria-label="Attach files" style="width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #8ea3bd; padding: 0; 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="M12 15V4M7.5 8.5L12 4l4.5 4.5M5 19.5h14"></path></svg></button>
+<button aria-label="Webpage (W)" style="width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #8ea3bd; padding: 0; 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"><rect x="3.5" y="5" width="17" height="14" rx="2"></rect><path d="M3.5 9h17"></path></svg></button>
+<button aria-label="Group (G)" style="width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #8ea3bd; padding: 0; 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-dasharray: 3 3"><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg></button>
+<button aria-label="Draw (A)" style="width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #8ea3bd; padding: 0; 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-linejoin: round"><path d="M4 20l4.2-1L19 8.2 15.8 5 5 15.8z"></path></svg></button>
+<button aria-label="Text note" style="width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #8ea3bd; padding: 0; 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"><path d="M5.5 6h13M12 6v13"></path></svg></button>
+<button aria-label="Eraser" style="width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #8ea3bd; padding: 0; 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-linejoin: round"><path d="M4 15l9-9 6 6-7 7H8zM9 10l6 6M8 19h12"></path></svg></button>
+<div style="width: 24px; height: 1px; margin: 4px 0; background: #1b2c44"></div>
+<button aria-label="Search and commands" style="width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #8ea3bd; padding: 0; 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"><circle cx="11" cy="11" r="6"></circle><path d="M20 20l-4.6-4.6"></path></svg></button>
+<button aria-label="Arrange" style="width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #8ea3bd; padding: 0; 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"><rect x="4" y="4" width="6" height="6" rx="1.2"></rect><rect x="14" y="4" width="6" height="6" rx="1.2"></rect><rect x="4" y="14" width="6" height="6" rx="1.2"></rect><rect x="14" y="14" width="6" height="6" rx="1.2"></rect></svg></button>
+<button aria-label="Enable trace" style="width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #8ea3bd; padding: 0; 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"><circle cx="12" cy="12" r="8"></circle><circle cx="12" cy="12" r="3"></circle></svg></button>
+<button aria-label="Clear trace" style="width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #8ea3bd; padding: 0; 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"><circle cx="12" cy="12" r="8"></circle><path d="M9 9l6 6M15 9l-6 6"></path></svg></button>
+<button aria-label="Hide minimap" style="width: 36px; height: 36px; border: 1px solid #2a4566; border-radius: 8px; background: #13243b; color: #4BBCFF; padding: 0; 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"><rect x="4" y="5" width="16" height="14" rx="2"></rect><rect x="11" y="11" width="6" height="5" rx="1"></rect></svg></button>
+<button aria-label="Snapshots" style="width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #8ea3bd; padding: 0; 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-linejoin: round"><path d="M4 8h3l1.5-2h7L17 8h3v11H4z"></path><circle cx="12" cy="13" r="3"></circle></svg></button>
+<button aria-label="Choose theme" style="width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #8ea3bd; padding: 0; 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"><circle cx="12" cy="12" r="4"></circle><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6L7 7M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4"></path></svg></button>
+<button aria-label="Shortcuts" style="width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #8ea3bd; padding: 0; 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"><rect x="3" y="6" width="18" height="12" rx="2"></rect><path d="M7 10h1M11 10h1M15 10h1M8 14h8"></path></svg></button>
+</nav>
+<header style="position: absolute; left: 52px; top: 0; right: 0; height: 48px; box-sizing: border-box; padding: 0 12px 0 16px; display: flex; align-items: center; gap: 10px; background: #0b1828; border-bottom: 1px solid #1b2c44">
+<span style="width: 9px; height: 9px; border-radius: 999px; background: #2fd07f"></span>
+<button style="font-family: Arial, sans-serif; font-size: 14px; font-weight: 700; color: #e6eef7; background: transparent; border: 0; padding: 0">Board 2026-10-04 06:27 ⌄</button>
+<span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #5c6b80">pmx-mutfv69j · 70 nodes · 9 edges · 3 traces</span>
+<div style="flex: 1"></div>
+<button style="font-family: Arial, sans-serif; font-size: 12px; font-weight: 700; color: #8ea3bd; background: transparent; border: 1px solid #1b2c44; border-radius: 999px; height: 28px; padding: 0 12px">● Start agent session  beta</button>
+<button style="font-family: Arial, sans-serif; font-size: 13px; color: #e6eef7; background: transparent; border: 1px solid #1b2c44; border-radius: 6px; height: 30px; padding: 0 12px">Export</button>
+<button style="font-family: Arial, sans-serif; font-size: 13px; color: #e6eef7; background: transparent; border: 1px solid #1b2c44; border-radius: 6px; height: 30px; padding: 0 12px">Present</button>
+<span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #8ea3bd; padding: 0 10px">⊖   52%   ⊕   ⛶</span>
+</header>
+<main style="position: absolute; left: 52px; top: 48px; width: 1388px; height: 852px; overflow: hidden; background-color: #081524; background-image: radial-gradient(rgba(142,163,189,0.10) 1px, transparent 1.2px); background-size: 24px 24px">
+<div style="position: absolute; left: 32px; top: 6px; width: 1256px; height: 78px; box-sizing: border-box; border: 1.5px solid rgba(244,197,66,0.45); border-radius: 22px; background: rgba(244,197,66,0.05); box-shadow: 0 0 36px rgba(244,197,66,0.14)"></div>
+<div style="position: absolute; left: 32px; top: 72px; width: 432px; height: 372px; box-sizing: border-box; border: 1.5px solid rgba(244,197,66,0.45); border-radius: 22px; background: rgba(244,197,66,0.05); box-shadow: 0 0 36px rgba(244,197,66,0.14)"></div>
+<div style="position: absolute; left: 464px; top: 72px; width: 372px; height: 372px; box-sizing: border-box; border: 1.5px solid rgba(244,197,66,0.45); border-radius: 22px; background: rgba(244,197,66,0.05); box-shadow: 0 0 36px rgba(244,197,66,0.14)"></div>
+<div style="position: absolute; left: 836px; top: 72px; width: 502px; height: 372px; box-sizing: border-box; border: 1.5px solid rgba(244,197,66,0.45); border-radius: 22px; background: rgba(244,197,66,0.05); box-shadow: 0 0 36px rgba(244,197,66,0.14)"></div>
+<div style="position: absolute; left: 32px; top: 442px; width: 1256px; height: 78px; box-sizing: border-box; border: 1.5px solid rgba(244,197,66,0.45); border-radius: 22px; background: rgba(244,197,66,0.05); box-shadow: 0 0 36px rgba(244,197,66,0.14)"></div>
+<div style="position: absolute; left: 32px; top: 510px; width: 432px; height: 206px; box-sizing: border-box; border: 1.5px solid rgba(244,197,66,0.45); border-radius: 22px; background: rgba(244,197,66,0.05); box-shadow: 0 0 36px rgba(244,197,66,0.14)"></div>
+<div style="position: absolute; left: 836px; top: 510px; width: 452px; height: 206px; box-sizing: border-box; border: 1.5px solid rgba(244,197,66,0.45); border-radius: 22px; background: rgba(244,197,66,0.05); box-shadow: 0 0 36px rgba(244,197,66,0.14)"></div>
+<section style="position: absolute; left: 48px; top: 16px; width: 1224px; height: 58px; box-sizing: border-box; background: #0f1d31; border: 1px solid #1b2c44; border-radius: 12px 12px 8px 8px; 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: 24px; padding: 0 10px; background: #13243b; border-bottom: 1px solid #1b2c44"><span style="color: #4BBCFF">▤</span><span style="font-size: 11px; font-weight: 600">① Start here</span><span style="flex: 1"></span><span style="font-family: Arial, sans-serif; color: #8ea3bd; letter-spacing: 8px">⤢⌄×</span></div>
+<div style="padding: 2px 10px; font-size: 9px; color: #b9c6d6">What the agent is doing, what context it holds, what it decided, and the tool calls behind it.</div>
+<div style="display: flex; justify-content: space-between; padding: 0 10px; font-family: Arial, sans-serif; font-size: 9px; color: #5c6b80"><span>Set as README</span><span>Edit</span></div>
+</section>
+<section style="position: absolute; left: 48px; top: 88px; width: 400px; height: 340px; box-sizing: border-box; background: #0f1d31; border: 1px solid rgba(244,197,66,0.6); border-radius: 12px 12px 8px 8px; box-shadow: 0 0 0 2px #f4c542, 0 0 8px rgba(244,197,66,0.3), 0 12px 34px rgba(244,197,66,0.18); overflow: hidden">
+<div style="display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; background: linear-gradient(90deg, rgba(244,197,66,0.12), transparent 68%), #13243b; border-bottom: 1px solid #1b2c44"><span style="font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: rgba(244,197,66,0.15); color: #f4c542">▤</span><span style="font-size: 12px; font-weight: 600">PMX Canvas — guided tour</span><span style="flex: 1"></span><span style="font-family: Arial, sans-serif; color: #8ea3bd; letter-spacing: 7px">○✧↗⤢⌄×</span></div>
+<div style="padding: 10px 12px; display: flex; flex-direction: column; gap: 6px">
+<div style="font-size: 12px; font-weight: 700">PMX Canvas</div>
+<div style="font-size: 9.5px; color: #b9c6d6">An infinite spatial canvas that agents drive over MCP, HTTP or the Bun SDK — and that humans steer by pinning nodes.</div>
+<div style="display: grid; grid-template-columns: 110px 1fr; font-size: 9px; border: 1px solid #1b2c44">
+<div style="padding: 3px 6px; background: #13243b; color: #8ea3bd">Band</div><div style="padding: 3px 6px; background: #13243b; color: #8ea3bd">Shows</div>
+<div style="padding: 3px 6px; border-top: 1px solid #1b2c44">① Start here</div><div style="padding: 3px 6px; border-top: 1px solid #1b2c44; color: #8ea3bd">status · context · ledger · trace</div>
+<div style="padding: 3px 6px; border-top: 1px solid #1b2c44">② Files &amp; review</div><div style="padding: 3px 6px; border-top: 1px solid #1b2c44; color: #8ea3bd">file · CSV · diff · image · webpage</div>
+<div style="padding: 3px 6px; border-top: 1px solid #1b2c44">③ Diagrams</div><div style="padding: 3px 6px; border-top: 1px solid #1b2c44; color: #8ea3bd">mermaid · raw HTML · MCP app</div>
+<div style="padding: 3px 6px; border-top: 1px solid #1b2c44">④ Charts</div><div style="padding: 3px 6px; border-top: 1px solid #1b2c44; color: #8ea3bd">all 12 graph types</div>
+</div>
+<div style="font-size: 9.5px; color: #b9c6d6">Pin a node in the browser and the agent reads it back from canvas://pinned-context.</div>
+</div>
+<div style="position: absolute; left: 12px; right: 12px; bottom: 6px; display: flex; justify-content: space-between; font-family: Arial, sans-serif; font-size: 9px; color: #5c6b80"><span>Set as README</span><span>Edit</span></div>
+</section>
+<section style="position: absolute; left: 480px; top: 88px; width: 340px; height: 140px; box-sizing: border-box; background: #0f1d31; border: 1px solid #1b2c44; border-radius: 12px 12px 8px 8px; box-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); overflow: hidden">
+<div style="display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; background: linear-gradient(90deg, rgba(244,197,66,0.12), transparent 68%), #13243b; border-bottom: 1px solid #1b2c44"><span style="font-size: 10px; padding: 1px 5px; border-radius: 4px; background: rgba(47,208,127,0.15); color: #2fd07f">◉</span><span style="font-size: 11.5px; font-weight: 600">Agent</span><span style="flex: 1"></span><span style="font-family: Arial, sans-serif; color: #8ea3bd; letter-spacing: 8px">⌄×</span></div>
+<div style="padding: 8px 12px; display: flex; flex-direction: column; gap: 5px; font-size: 10px">
+<div><span style="color: #4BBCFF">● </span><strong style="color: #4BBCFF">TOOLING</strong> <span style="color: #8ea3bd">Rebuilding the release checklist</span></div>
+<div style="font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #f4c542">● canvas_render</div>
+<div style="font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #4BBCFF">◦ release-auditor <span style="color: #5c6b80">(running)</span></div>
+<div style="color: #8ea3bd">3 of 5 gates green</div>
+</div>
+</section>
+<div style="position: absolute; left: 649px; top: 228px; width: 1.5px; height: 44px; background: #2a4566"></div>
+<span style="position: absolute; left: 622px; top: 238px; font-family: Arial, sans-serif; font-size: 11px; line-height: 22px; padding: 0 8px; border-radius: 4px; background: #13243b; border: 1px solid #2a4566; color: #b9c6d6">runs</span>
+<div style="position: absolute; left: 480px; top: 272px; width: 340px; height: 56px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 18px; background: #0f1d31; border: 1px solid #1b2c44; border-radius: 999px; box-shadow: 0 0 0 1px rgba(244,197,66,0.3), 0 8px 24px rgba(244,197,66,0.1)">
+<span style="color: #2fd07f">✓</span><span style="font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #4BBCFF">canvas_query · search</span><span style="font-size: 9px; padding: 1px 5px; border-radius: 4px; background: #13243b; color: #5c6b80">38ms</span>
+</div>
+<div style="position: absolute; left: 649px; top: 328px; width: 1.5px; height: 44px; background: #2a4566"></div>
+<span style="position: absolute; left: 624px; top: 338px; font-family: Arial, sans-serif; font-size: 11px; line-height: 22px; padding: 0 8px; border-radius: 4px; background: #13243b; border: 1px solid #2a4566; color: #b9c6d6">then</span>
+<div style="position: absolute; left: 480px; top: 372px; width: 340px; height: 56px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 18px; background: #0f1d31; border: 1.5px solid #4BBCFF; border-radius: 999px; box-shadow: 0 0 14px rgba(75,188,255,0.35)">
+<span style="color: #5c6b80">◦</span><span style="font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #f4c542">edit_file · CHANGELOG.md</span><span style="font-size: 9px; padding: 1px 5px; border-radius: 4px; background: #13243b; color: #5c6b80">1.2s</span>
+</div>
+<section style="position: absolute; left: 852px; top: 88px; width: 470px; height: 340px; box-sizing: border-box; background: #0f1d31; border: 1px solid #1b2c44; border-radius: 12px 12px 8px 8px; 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">▥</span><span style="font-size: 11.5px; font-weight: 600">bar — merged PRs per …</span><span style="flex: 1"></span><span style="font-family: Arial, sans-serif; color: #8ea3bd; letter-spacing: 7px">↗⤢⌄×</span></div>
+<div style="position: absolute; left: 8px; right: 8px; top: 40px; height: 230px; box-sizing: border-box; padding: 12px 14px; background: #000000; border: 1px solid #1f1f1f; border-radius: 8px">
+<div style="font-size: 10px; font-weight: 700; color: #f2f2f2">bar — merged PRs per week</div>
+<div style="position: absolute; left: 40px; right: 16px; bottom: 30px; height: 150px; display: flex; align-items: flex-end; gap: 14px; border-left: 1px solid #333; border-bottom: 1px solid #333; padding: 0 8px">
+<div style="flex: 1; height: 92px; background: #2b4a6b"></div><div style="flex: 1; height: 84px; background: #2b4a6b"></div><div style="flex: 1; height: 118px; background: #2b4a6b"></div><div style="flex: 1; height: 106px; background: #2b4a6b"></div><div style="flex: 1; height: 128px; background: #2b4a6b"></div><div style="flex: 1; height: 146px; background: #4BBCFF"></div>
+</div>
+<div style="position: absolute; left: 48px; right: 16px; bottom: 12px; display: flex; justify-content: space-around; font-size: 8.5px; color: #8a8a8a"><span>W23</span><span>W24</span><span>W25</span><span>W26</span><span>W27</span><span>W28</span></div>
+</div>
+</section>
+<button style="position: absolute; right: 16px; top: 96px; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 12px; border-radius: 999px; border: 1px solid #2a4566; background: #0f1d31; color: #e6eef7; font-family: Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; box-shadow: 0 8px 24px rgba(0,0,0,0.5)">▣ UPDATES <span style="width: 18px; height: 18px; border-radius: 999px; background: #f4c542; color: #081524; font-size: 11px; display: flex; align-items: center; justify-content: center">1</span></button>
+<section style="position: absolute; left: 48px; top: 452px; width: 1224px; height: 58px; box-sizing: border-box; background: #0f1d31; border: 1px solid #1b2c44; border-radius: 12px 12px 8px 8px; 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: 24px; padding: 0 10px; background: #13243b; border-bottom: 1px solid #1b2c44"><span style="color: #4BBCFF">▤</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">⤢⌄×</span></div>
+<div style="padding: 2px 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; font-family: Arial, sans-serif; font-size: 9px; color: #5c6b80"><span>Set as README</span><span>Edit</span></div>
+</section>
+<section style="position: absolute; left: 48px; top: 524px; width: 400px; height: 176px; box-sizing: border-box; background: #0f1d31; border: 1px solid #1b2c44; border-radius: 12px 12px 8px 8px; 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: 30px; 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">▭</span><span style="font-size: 11.5px; font-weight: 600">Model Context Protocol — Res…</span><span style="flex: 1"></span><span style="font-family: Arial, sans-serif; color: #8ea3bd; letter-spacing: 7px">○↗⤢⌄×</span></div>
+<div style="padding: 8px 12px; display: flex; flex-direction: column; gap: 6px">
+<div style="font-size: 9.5px; padding: 4px 8px; border-radius: 4px; background: rgba(244,197,66,0.10); color: #f4c542">⚠ Showing cached copy — live fetch failed</div>
+<div style="font-size: 11px; font-weight: 700">Resources</div>
+<div style="font-size: 9.5px; color: #b9c6d6">Servers expose data and content that clients can read and use as context for model interactions.</div>
+</div>
+</section>
+<section style="position: absolute; left: 480px; top: 524px; width: 340px; height: 176px; box-sizing: border-box; background: #0f1d31; border: 1px solid #1b2c44; border-radius: 12px 12px 8px 8px; overflow: hidden">
+<div style="display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; background: #13243b; border-bottom: 1px solid #1b2c44"><span style="font-size: 10px; padding: 1px 5px; border-radius: 4px; background: rgba(75,188,255,0.12); color: #4BBCFF">▯</span><span style="font-size: 11.5px; font-weight: 600">node-sizes.ts</span><span style="flex: 1"></span><span style="font-family: Arial, sans-serif; color: #8ea3bd; letter-spacing: 7px">○↗⤢⌄×</span></div>
+<div style="padding: 8px 12px; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; line-height: 1.6; color: #b9c6d6; white-space: pre">export const NODE_MIN = { width: 180, height: 96 };
+export function clampSize(size) {
+  return {
+    width: Math.max(size.width, NODE_MIN.width),
+    height: Math.max(size.height, NODE_MIN.height),</div>
+</section>
+<section style="position: absolute; left: 852px; top: 524px; width: 420px; height: 176px; box-sizing: border-box; background: #0f1d31; border: 1px solid #1b2c44; border-radius: 12px 12px 8px 8px; 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: 30px; padding: 0 10px; background: #13243b; border-bottom: 1px solid #1b2c44"><span style="font-size: 10px; padding: 1px 5px; border-radius: 4px; background: rgba(75,188,255,0.12); color: #4BBCFF">±</span><span style="font-size: 11.5px; font-weight: 600">Readability floor — 2 files</span><span style="flex: 1"></span><span style="font-family: Arial, sans-serif; color: #8ea3bd; letter-spacing: 7px">○✧↗⤢⌄×</span></div>
+<div style="padding: 6px 0; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; line-height: 1.7">
+<div style="padding: 0 12px; color: #5c6b80">@@ src/client/theme/global.css</div>
+<div style="padding: 0 12px; background: rgba(255,106,127,0.10); color: #ff6a7f">-  font-size: 10px;</div>
+<div style="padding: 0 12px; background: rgba(47,208,127,0.10); color: #2fd07f">+  font-size: var(--fs-meta);</div>
+<div style="padding: 0 12px; background: rgba(255,106,127,0.10); color: #ff6a7f">-  border-radius: 12px 12px 8px 8px;</div>
+<div style="padding: 0 12px; background: rgba(47,208,127,0.10); color: #2fd07f">+  border-radius: var(--r-node);</div>
+</div>
+</section>
+<button style="position: absolute; left: 574px; bottom: 20px; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(244,197,66,0.55); background: rgba(30,32,30,0.92); color: #f4c542; font-family: Arial, sans-serif; font-size: 13px; font-weight: 700">✦ 4 nodes in context <span style="color: #8ea3bd">×</span></button>
+<div style="position: absolute; right: 16px; bottom: 16px; width: 200px; height: 130px; box-sizing: border-box; border-radius: 8px; border: 1px solid #2a4566; background: #0b1828; overflow: hidden">
+<div style="position: absolute; left: 10px; top: 10px; width: 16px; height: 8px; background: #4BBCFF"></div>
+<div style="position: absolute; left: 30px; top: 10px; width: 20px; height: 8px; background: #2fd07f"></div>
+<div style="position: absolute; left: 54px; top: 10px; width: 14px; height: 8px; background: #2fd07f"></div>
+<div style="position: absolute; left: 10px; top: 22px; width: 18px; height: 10px; background: #8d6bff"></div>
+<div style="position: absolute; left: 32px; top: 22px; width: 18px; height: 10px; background: #8d6bff"></div>
+<div style="position: absolute; left: 54px; top: 22px; width: 18px; height: 10px; background: #2fd07f"></div>
+<div style="position: absolute; left: 10px; top: 36px; width: 18px; height: 10px; background: #8d6bff"></div>
+<div style="position: absolute; left: 32px; top: 36px; width: 18px; height: 10px; background: #4BBCFF"></div>
+<div style="position: absolute; left: 54px; top: 36px; width: 18px; height: 10px; background: #8d6bff"></div>
+<div style="position: absolute; left: 10px; top: 50px; width: 18px; height: 10px; background: #8d6bff"></div>
+<div style="position: absolute; left: 32px; top: 50px; width: 18px; height: 10px; background: #8d6bff"></div>
+<div style="position: absolute; left: 82px; top: 10px; width: 22px; height: 14px; background: #2fd07f"></div>
+<div style="position: absolute; left: 108px; top: 10px; width: 22px; height: 14px; background: #2fd07f"></div>
+<div style="position: absolute; left: 134px; top: 10px; width: 22px; height: 14px; background: #4BBCFF"></div>
+<div style="position: absolute; left: 82px; top: 28px; width: 22px; height: 18px; background: #c9a227"></div>
+<div style="position: absolute; left: 108px; top: 28px; width: 22px; height: 18px; background: #c9a227"></div>
+<div style="position: absolute; left: 134px; top: 28px; width: 22px; height: 18px; background: #c9a227"></div>
+<div style="position: absolute; left: 160px; top: 28px; width: 22px; height: 18px; background: #c9a227"></div>
+<div style="position: absolute; left: 82px; top: 50px; width: 22px; height: 18px; background: #c9a227"></div>
+<div style="position: absolute; left: 108px; top: 50px; width: 22px; height: 18px; background: #c9a227"></div>
+<div style="position: absolute; left: 134px; top: 50px; width: 22px; height: 18px; background: #c9a227"></div>
+<div style="position: absolute; left: 160px; top: 50px; width: 22px; height: 18px; background: #c9a227"></div>
+<div style="position: absolute; left: 82px; top: 72px; width: 22px; height: 18px; background: #c9a227"></div>
+<div style="position: absolute; left: 108px; top: 72px; width: 22px; height: 18px; background: #c9a227"></div>
+<div style="position: absolute; left: 134px; top: 72px; width: 22px; height: 18px; background: #c9a227"></div>
+<div style="position: absolute; left: 160px; top: 72px; width: 22px; height: 18px; background: #c9a227"></div>
+<div style="position: absolute; left: 10px; top: 72px; width: 18px; height: 10px; background: #8d6bff"></div>
+<div style="position: absolute; left: 32px; top: 72px; width: 18px; height: 10px; background: #8d6bff"></div>
+<div style="position: absolute; left: 82px; top: 94px; width: 22px; height: 18px; background: #c9a227"></div>
+<div style="position: absolute; left: 8px; top: 8px; width: 46px; height: 28px; border: 1.5px solid #4BBCFF"></div>
+<span style="position: absolute; right: 6px; bottom: 4px; font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: #5c6b80">52%</span>
+</div>
+</main>
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":900}}'>
+class Component extends DCLogic {
+  renderVals() {
+    return {};
+  }
+}
+</script>
+</body>
+</html>