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/NearPin.dc.html ADDED Viewed

@@ -0,0 +1,260 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Near a pin</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: 2020px; box-sizing: border-box; padding: 44px 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>
+<h1 style="margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em">Near a pin</h1>
+<p style="margin: 4px 0 0; font-size: 13px; color: #8ea3bd; max-width: 1100px">Each pinned node pulls up to five unpinned nodes whose centres are within 600 px into the agent's brief — each as its title and a short summary, with “near &lt;pin&gt;” as the reason, never its full content. They get their own, weaker mark: a dotted chip with the word “near”. The mark ships in wave 1 together with that brief change, so it claims exactly what the agent receives.</p>
+</div>
+<section style="display: grid; grid-template-columns: 860px minmax(0, 1fr); gap: 32px">
+<div style="display: flex; flex-direction: column; gap: 8px">
+<span style="{{s.label}}">1 · At rest</span>
+<div style="{{s.scene}} height: 420px">
+<sc-for list="{{rest}}" as="n" hint-placeholder-count="6">
+<div style="{{n.box}}">
+<div style="{{n.head}}"><svg width="14" height="14" viewBox="0 0 24 24" style="{{s.kind}}"><path d="{{i.note}}"></path></svg><span style="{{s.title}}">{{n.title}}</span>
+<sc-if value="{{n.near}}" hint-placeholder-val="{{ false }}"><span style="{{s.chip}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ring}}"><circle cx="12" cy="12" r="8"></circle><circle cx="12" cy="12" r="2.4" style="fill: currentColor; stroke: none"></circle></svg>{{n.nearText}}</span></sc-if>
+<span style="{{s.expand}}"><svg width="12" height="12" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.expand}}"></path></svg></span>
+<span style="{{n.pinStyle}}"><svg width="9" height="9" viewBox="0 0 24 24" style="{{s.ic2}}"><path d="{{i.pin}}"></path></svg></span>
+</div>
+<div style="padding: 7px 10px; font-size: 11px; color: #8ea3bd">{{n.meta}}</div>
+</div>
+</sc-for>
+</div>
+<span style="font-size: 12px; color: #8ea3bd">Two pins. Price page copy and Churn deep-dive are near Release runbook; Pricing notes is near both pins (“near 2”). Q3 risks is farther than 600 px, so it carries nothing.</span>
+</div>
+<div style="display: flex; flex-direction: column; gap: 12px">
+<span style="{{s.label}}">The mark</span>
+<div style="{{s.card}} gap: 12px">
+<div style="display: flex; align-items: center; gap: 10px"><span style="{{s.chip}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ring}}"><circle cx="12" cy="12" r="8"></circle><circle cx="12" cy="12" r="2.4" style="fill: currentColor; stroke: none"></circle></svg>near</span><span style="font-size: 12px; color: #b9c6d6">Dotted ring with a dot, the word “near”, a dotted pin-blue outline. In the header after the title, before expand and the pin.</span></div>
+<div style="display: flex; align-items: center; gap: 10px"><span style="{{s.chip}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ring}}"><circle cx="12" cy="12" r="8"></circle><circle cx="12" cy="12" r="2.4" style="fill: currentColor; stroke: none"></circle></svg>near 2</span><span style="font-size: 12px; color: #b9c6d6">Near more than one pin: the count. Hover lists the pins.</span></div>
+<div style="height: 1px; background: #1b2c44"></div>
+<sc-for list="{{compare}}" as="c" hint-placeholder-count="4">
+<div style="display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 12px"><span style="font-weight: 600">{{c.k}}</span><span style="color: #b9c6d6">{{c.v}}</span></div>
+</sc-for>
+</div>
+<div style="{{s.card}} gap: 6px">
+<span style="font-size: 12px; font-weight: 600">What the agent gets (wave 1 brief)</span>
+<span style="font-size: 12px; color: #b9c6d6">In the main brief, after the pinned cards: each near node's title and a short summary, nearest first, with the pin it is near as the reason. Never its full content — pin it for that.</span>
+<div style="padding: 8px 10px; border-radius: 6px; background: #06111e; border: 1px solid #1b2c44; font-family: 'IBM Plex Mono', monospace; font-size: 11px; line-height: 1.6; color: #b9c6d6; white-space: pre-wrap">near “Release runbook” · 240 px
+Price page copy — Draft copy for the Pro plan page: headline, three benefits, FAQ.</div>
+</div>
+</div>
+</section>
+<section style="display: grid; grid-template-columns: 860px minmax(0, 1fr); gap: 32px">
+<div style="display: flex; flex-direction: column; gap: 8px">
+<span style="{{s.label}}">2 · Which pin? Hover a pin to see its neighbours</span>
+<div style="{{s.scene}} height: 420px">
+<svg width="860" height="420" viewBox="0 0 860 420" style="position: absolute; left: 0; top: 0; fill: none; stroke-linecap: round">
+<circle cx="425" cy="192" r="285" style="stroke: rgba(75,188,255,0.25); stroke-width: 1.5; stroke-dasharray: 3 6"></circle>
+<path d="{{tether.a}}" style="stroke: #4BBCFF; stroke-width: 1.5; stroke-dasharray: 2 5"></path>
+<path d="{{tether.b}}" style="stroke: #4BBCFF; stroke-width: 1.5; stroke-dasharray: 2 5"></path>
+<path d="{{tether.c}}" style="stroke: #4BBCFF; stroke-width: 1.5; stroke-dasharray: 2 5"></path>
+</svg>
+<span style="position: absolute; left: 640px; top: 392px; font-size: 11px; color: rgba(75,188,255,0.7)">600 px from Release runbook</span>
+<sc-for list="{{hover}}" as="n" hint-placeholder-count="6">
+<div style="{{n.box}}">
+<div style="{{n.head}}"><svg width="14" height="14" viewBox="0 0 24 24" style="{{s.kind}}"><path d="{{i.note}}"></path></svg><span style="{{s.title}}">{{n.title}}</span>
+<sc-if value="{{n.near}}" hint-placeholder-val="{{ false }}"><span style="{{n.chipStyle}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ring}}"><circle cx="12" cy="12" r="8"></circle><circle cx="12" cy="12" r="2.4" style="fill: currentColor; stroke: none"></circle></svg>{{n.nearText}}</span></sc-if>
+<span style="{{s.expand}}"><svg width="12" height="12" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.expand}}"></path></svg></span>
+<span style="{{n.pinStyle}}"><svg width="9" height="9" viewBox="0 0 24 24" style="{{s.ic2}}"><path d="{{i.pin}}"></path></svg></span>
+</div>
+<div style="padding: 7px 10px; font-size: 11px; color: #8ea3bd">{{n.meta}}</div>
+</div>
+</sc-for>
+<sc-for list="{{nums}}" as="m" hint-placeholder-count="3"><span style="position: absolute; left: {{m.x}}px; top: {{m.y}}px; width: 20px; height: 20px; border-radius: 999px; background: #081524; border: 1px dotted #4BBCFF; color: #4BBCFF; font-size: 11px; font-weight: 600; text-align: center; line-height: 18px">{{m.n}}</span></sc-for>
+</div>
+<span style="font-size: 12px; color: #8ea3bd">Dotted tethers, numbered nearest first, and the 600 px radius while the pin is hovered or selected. Tethers are drawn in screen space, so they still join a pin and its neighbours at fit zoom. Other nodes are untouched.</span>
+</div>
+<div style="display: flex; flex-direction: column; gap: 12px">
+<span style="{{s.label}}">Hover a near chip</span>
+<div style="padding: 12px 14px; 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">
+<span style="font-size: 12px; font-weight: 600">Near 2 pins</span>
+<div style="display: flex; justify-content: space-between; font-size: 12px"><span>Release runbook</span><span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #8ea3bd">240 px</span></div>
+<div style="display: flex; justify-content: space-between; font-size: 12px"><span>Readability floor</span><span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #8ea3bd">410 px</span></div>
+<span style="font-size: 11px; color: #b9c6d6">The agent gets this node's title and a short summary, not its full content.</span>
+<div style="display: flex; gap: 6px"><button style="height: 26px; padding: 0 10px; border: 0; border-radius: 6px; background: #4BBCFF; color: #081524; font-family: inherit; font-size: 11px; font-weight: 600">Pin to send content</button><button style="height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid #2a4566; background: transparent; color: #e6eef7; font-family: inherit; font-size: 11px">Show pins</button></div>
+</div>
+<span style="{{s.label}}">The context chip</span>
+<div style="padding: 12px; border-radius: 12px; border: 1px solid #2a4566; background: #13243b; display: flex; flex-direction: column; gap: 6px">
+<div style="display: flex; align-items: center; justify-content: space-between"><span style="font-size: 12px; font-weight: 600">In the agent's context</span><span style="font-size: 11px; color: #8ea3bd">2 cards · 3 near</span></div>
+<span style="font-size: 11px; color: #8ea3bd">Pinned · full content</span>
+<span style="font-size: 12px">Release runbook · Readability floor</span>
+<span style="font-size: 11px; color: #8ea3bd">Near your pins · title and summary</span>
+<span style="font-size: 12px; color: #b9c6d6">Price page copy · Churn deep-dive · Pricing notes</span>
+</div>
+</div>
+</section>
+<section style="display: flex; flex-direction: column; gap: 10px">
+<span style="{{s.label}}">3 · The moment it changes</span>
+<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px">
+<sc-for list="{{moments}}" as="mo" hint-placeholder-count="3">
+<div style="display: flex; flex-direction: column; gap: 8px">
+<div style="{{s.scene}} height: 190px">
+<sc-if value="{{mo.ring}}" hint-placeholder-val="{{ false }}"><svg width="420" height="190" viewBox="0 0 420 190" style="position: absolute; left: 0; top: 0; fill: none"><circle cx="110" cy="95" r="150" style="stroke: rgba(75,188,255,0.35); stroke-width: 1.5; stroke-dasharray: 3 6"></circle></svg></sc-if>
+<div style="{{s.pinnedBox}} left: 20px; top: 60px"><div style="{{s.pinnedHead}}"><span style="{{s.title}}">Release runbook</span><span style="{{s.pinOn}}"><svg width="9" height="9" viewBox="0 0 24 24" style="{{s.ic2}}"><path d="{{i.pin}}"></path></svg></span></div></div>
+<div style="{{mo.box}}"><div style="{{s.plainHead}}"><span style="{{s.title}}">Price page copy</span><sc-if value="{{mo.chip}}" hint-placeholder-val="{{ false }}"><span style="{{mo.chipStyle}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ring}}"><circle cx="12" cy="12" r="8"></circle><circle cx="12" cy="12" r="2.4" style="fill: currentColor; stroke: none"></circle></svg>near</span></sc-if></div></div>
+</div>
+<span style="font-size: 12px; font-weight: 600">{{mo.t}}</span>
+<span style="font-size: 12px; color: #8ea3bd">{{mo.d}}</span>
+<div style="display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; border: 1px solid #1b2c44; background: #0f1d31; font-size: 11px; color: #b9c6d6"><span style="width: 6px; height: 6px; border-radius: 999px; background: #4BBCFF; flex-shrink: 0"></span>{{mo.update}}</div>
+</div>
+</sc-for>
+</div>
+</section>
+<section style="display: grid; grid-template-columns: minmax(0, 1fr) 640px; gap: 32px">
+<div style="display: flex; flex-direction: column; gap: 10px">
+<span style="{{s.label}}">4 · It survives the other states</span>
+<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px">
+<sc-for list="{{combos}}" as="cb" hint-placeholder-count="6">
+<div style="display: flex; flex-direction: column; gap: 6px">
+<div style="position: relative; height: 104px; border-radius: 8px; background: #06111e">
+<div style="{{cb.box}}">
+<sc-if value="{{cb.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="{{cb.head}}"><span style="{{s.title}}">Price page copy</span>
+<sc-if value="{{cb.near}}" hint-placeholder-val="{{ false }}"><span style="{{s.chip}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ring}}"><circle cx="12" cy="12" r="8"></circle><circle cx="12" cy="12" r="2.4" style="fill: currentColor; stroke: none"></circle></svg>{{cb.nearText}}</span></sc-if>
+<span style="{{cb.pinStyle}}"><svg width="9" height="9" viewBox="0 0 24 24" style="{{s.ic2}}"><path d="{{i.pin}}"></path></svg></span>
+</div>
+<div style="padding: 6px 10px; font-size: 11px; color: #8ea3bd">copy draft · v3</div>
+</div>
+<sc-if value="{{cb.handles}}" hint-placeholder-val="{{ false }}"><span style="{{s.h}} left: 7px; top: 7px"></span><span style="{{s.h}} right: 7px; top: 7px"></span><span style="{{s.h}} left: 7px; bottom: 7px"></span><span style="{{s.h}} right: 7px; bottom: 7px"></span></sc-if>
+</div>
+<span style="font-size: 12px; font-weight: 600">{{cb.t}}</span>
+<span style="font-size: 11px; color: #8ea3bd">{{cb.d}}</span>
+</div>
+</sc-for>
+</div>
+</div>
+<div style="display: flex; flex-direction: column; gap: 10px">
+<span style="{{s.label}}">At 600 px — the narrow end</span>
+<div style="position: relative; width: 600px; height: 360px; border-radius: 12px; border: 1px solid #2a4566; 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="600" height="360" viewBox="0 0 600 360" style="position: absolute; left: 0; top: 0; fill: none; stroke-linecap: round"><path d="M 300 108 L 160 196" style="stroke: #4BBCFF; stroke-width: 1.5; stroke-dasharray: 2 5"></path><path d="M 300 108 L 440 196" style="stroke: #4BBCFF; stroke-width: 1.5; stroke-dasharray: 2 5"></path></svg>
+<div style="{{s.pinnedBox}} left: 190px; top: 24px; width: 220px"><div style="{{s.pinnedHead}}"><span style="{{s.title}}">Release runbook</span><span style="{{s.expand}}"><svg width="12" height="12" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.expand}}"></path></svg></span><span style="{{s.pinOn}}"><svg width="9" height="9" viewBox="0 0 24 24" style="{{s.ic2}}"><path d="{{i.pin}}"></path></svg></span></div><div style="padding: 7px 10px; font-size: 11px; color: #8ea3bd">pinned · hovered</div></div>
+<div style="{{s.plainBox}} left: 24px; top: 196px; width: 270px"><div style="{{s.plainHead}}"><span style="{{s.title}}">Price page copy draft for Pro</span><span style="{{s.chip}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ring}}"><circle cx="12" cy="12" r="8"></circle><circle cx="12" cy="12" r="2.4" style="fill: currentColor; stroke: none"></circle></svg>near</span><span style="{{s.pinOff}}"><svg width="9" height="9" viewBox="0 0 24 24" style="{{s.ic2}}"><path d="{{i.pin}}"></path></svg></span></div><div style="padding: 7px 10px; font-size: 11px; color: #8ea3bd">The title truncates first; the chip keeps its word.</div></div>
+<div style="{{s.plainBox}} left: 306px; top: 196px; width: 270px"><div style="{{s.plainHead}}"><span style="{{s.title}}">Pricing notes</span><span style="{{s.chip}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ring}}"><circle cx="12" cy="12" r="8"></circle><circle cx="12" cy="12" r="2.4" style="fill: currentColor; stroke: none"></circle></svg>near 2</span><span style="{{s.pinOff}}"><svg width="9" height="9" viewBox="0 0 24 24" style="{{s.ic2}}"><path d="{{i.pin}}"></path></svg></span></div><div style="padding: 7px 10px; font-size: 11px; color: #8ea3bd">near 2 pins</div></div>
+<span style="position: absolute; left: 24px; bottom: 14px; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(75,188,255,0.3); background: #0f1d31; color: #4BBCFF; font-size: 12px; font-weight: 500">2 in context · 3 near</span>
+</div>
+</div>
+</section>
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":2020}}'>
+class Component extends DCLogic {
+  renderVals() {
+    var i = {
+      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',
+      pin: 'M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20',
+      expand: 'M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7'
+    };
+    var pinOn = 'width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#4BBCFF;color:#081524;';
+    var pinOff = 'width:18px;height:18px;box-sizing:border-box;border-radius:999px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid #6b7d94;color:#b9c6d6;';
+    var chip = 'display:flex;align-items:center;gap:4px;height:18px;padding:0 7px;border-radius:999px;border:1px dotted #4BBCFF;color:#7fcfff;font-size:11px;font-weight:500;flex-shrink:0;white-space:nowrap;';
+    var chipLit = chip + 'background:rgba(75,188,255,0.12);';
+    var chipPulse = chip + 'background:rgba(75,188,255,0.18);box-shadow:0 0 0 4px rgba(75,188,255,0.12);';
+    var chipFade = chip + 'opacity:0.35;';
+    var e1 = '0 1px 2px rgba(0,0,0,0.4),0 6px 20px rgba(0,0,0,0.24)';
+    var boxBase = 'position:absolute;box-sizing:border-box;overflow:hidden;border-radius:10px;background:#0f1d31;box-shadow:' + e1 + ';';
+    var headBase = 'display:flex;align-items:center;gap:6px;height:34px;padding:0 8px 0 10px;border-bottom:1px solid #1b2c44;';
+    var s = {
+      label: 'font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:#6b7d94;',
+      scene: 'position:relative;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;',
+      card: 'display:flex;flex-direction:column;padding:14px 16px;border-radius:10px;border:1px solid #1b2c44;background:#0b1828;',
+      kind: 'flex-shrink:0;color:#8ea3bd;fill:none;stroke:currentColor;stroke-width:1.7;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;',
+      ring: 'flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:2.2 2.6;',
+      ic: 'fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;',
+      ic2: 'fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;',
+      expand: 'width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#b9c6d6;',
+      chip: chip, pinOn: pinOn, pinOff: pinOff,
+      pinnedBox: boxBase + 'width:180px;border:1.5px solid #4BBCFF;',
+      pinnedHead: headBase + 'background:rgba(75,188,255,0.10);',
+      plainBox: boxBase + 'border:1px solid #1b2c44;',
+      plainHead: headBase,
+      h: 'position:absolute;width:8px;height:8px;box-sizing:border-box;border-radius:2px;background:#0f1d31;border:1.5px solid #4BBCFF;'
+    };
+    function node(x, y, title, meta, kind, nearText, chipStyle) {
+      var pinned = kind === 'pin';
+      return {
+        title: title, meta: meta, near: !!nearText, nearText: nearText || '', chipStyle: chipStyle || chip,
+        box: boxBase + 'left:' + x + 'px;top:' + y + 'px;width:250px;height:84px;border:' + (pinned ? '1.5px solid #4BBCFF' : '1px solid #1b2c44') + ';',
+        head: headBase + (pinned ? 'background:rgba(75,188,255,0.10);' : ''),
+        pinStyle: pinned ? pinOn : pinOff
+      };
+    }
+    var rest = [
+      node(300, 150, 'Release runbook', 'pinned', 'pin'),
+      node(30, 40, 'Price page copy', 'near Release runbook', '', 'near'),
+      node(580, 40, 'Churn deep-dive', 'near Release runbook', '', 'near'),
+      node(40, 290, 'Pricing notes', 'near both pins', '', 'near 2'),
+      node(330, 300, 'Readability floor', 'pinned', 'pin'),
+      node(590, 300, 'Q3 risks', 'more than 600 px away', '')
+    ];
+    var hover = [
+      node(300, 150, 'Release runbook', 'pinned · hovered', 'pin'),
+      node(30, 40, 'Price page copy', 'near · 1st', '', 'near', chipLit),
+      node(580, 40, 'Churn deep-dive', 'near · 3rd', '', 'near', chipLit),
+      node(40, 290, 'Pricing notes', 'near · 2nd', '', 'near 2', chipLit),
+      node(330, 300, 'Readability floor', 'pinned', 'pin'),
+      node(590, 300, 'Q3 risks', 'not near', '')
+    ];
+    var tether = { a: 'M 425 192 L 155 124', b: 'M 425 192 L 705 124', c: 'M 425 192 L 165 290' };
+    var nums = [{ n: '1', x: 120, y: 128 }, { n: '3', x: 700, y: 128 }, { n: '2', x: 170, y: 262 }];
+    var compare = [
+      { k: 'Near', v: 'dotted chip in the header; the border does not change' },
+      { k: 'Pinned', v: 'solid 1.5 px border, tinted header, filled badge' },
+      { k: 'Selected', v: 'a ring with a gap outside the node, plus handles' },
+      { k: 'Agent editing', v: 'violet bar across the top' }
+    ];
+    var moments = [
+      { t: 'Dragging toward a pin', d: 'The nearest pin shows its 600 px radius while you drag; the chip previews “near” once the centre is inside.', ring: true, chip: true, chipStyle: chip + 'opacity:0.6;', update: 'Release runbook · 600 px',
+        box: boxBase + 'border:1px solid #1b2c44;left:220px;top:110px;width:180px;' },
+      { t: 'Dropped inside', d: 'The chip pulses once. One Updates entry names the node and the pin — no generic toast.', ring: false, chip: true, chipStyle: chipPulse, update: '“Price page copy” is now near “Release runbook” — the agent gets its title and summary.',
+        box: boxBase + 'border:1px solid #1b2c44;left:220px;top:110px;width:180px;' },
+      { t: 'Moved out', d: 'The chip fades out; the entry says the agent no longer sees it.', ring: false, chip: true, chipStyle: chipFade, update: '“Price page copy” left “Release runbook” — it is out of the agent’s brief.',
+        box: boxBase + 'border:1px solid #1b2c44;left:236px;top:18px;width:170px;' }
+    ];
+    function combo(t, d, opts) {
+      var sel = !!opts.sel, pinned = !!opts.pinned;
+      var shadow = sel ? '0 0 0 3px #06111e, 0 0 0 5px #4BBCFF, ' + e1 : e1;
+      return {
+        t: t, d: d, near: !!opts.near, nearText: opts.nearText || 'near', bar: !!opts.bar, handles: sel,
+        box: 'position:absolute;left:14px;top:14px;right:14px;bottom:14px;box-sizing:border-box;overflow:hidden;border-radius:10px;background:#0f1d31;box-shadow:' + shadow + ';border:' + (pinned ? '1.5px solid #4BBCFF' : '1px solid #1b2c44') + ';',
+        head: 'display:flex;align-items:center;gap:6px;height:32px;padding:0 8px 0 10px;border-bottom:1px solid #1b2c44;' + (pinned ? 'background:rgba(75,188,255,0.10);' : ''),
+        pinStyle: pinned ? pinOn : pinOff
+      };
+    }
+    var combos = [
+      combo('Near', 'The chip only.', { near: true }),
+      combo('Near + selected', 'The chip inside, the gap ring outside.', { near: true, sel: true }),
+      combo('Near + agent editing', 'The violet bar on top, the chip in the header.', { near: true, bar: true }),
+      combo('Near two pins', 'The count; hover lists both pins.', { near: true, nearText: 'near 2' }),
+      combo('Pinned', 'Never “near”: only unpinned nodes are neighbours. Pin it and the chip goes.', { pinned: true }),
+      combo('Pinned + agent editing', 'Pin styling and the violet bar; no chip.', { pinned: true, bar: true })
+    ];
+    return { s: s, i: i, rest: rest, hover: hover, tether: tether, nums: nums, compare: compare, moments: moments, combos: combos };
+  }
+}
+</script>
+</body>
+</html>

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

@@ -0,0 +1,120 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>The narrow end, 600 px</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: 1000px; box-sizing: border-box; padding: 40px 56px; background: #050d17; color: #e6eef7; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 16px">
+<div><h1 style="margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em">At 600 px — the narrow end</h1><p style="margin: 4px 0 0; font-size: 13px; color: #8ea3bd">The narrow end of the reference widths (600, 1024, 1920 px): an agent-host pane or a narrow side browser. One column, panels become drawers and sheets, nothing important hides behind a scrollbar. Every board above is the full-window end.</p></div>
+<div style="display: flex; gap: 64px">
+<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">Home · Folders</span>
+<div style="position: relative; width: 600px; height: 840px; border-radius: 12px; border: 1px solid #2a4566; overflow: hidden; background: #081524">
+<header style="display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 10px 0 12px; border-bottom: 1px solid #1b2c44; background: #0f1d31">
+<button aria-label="Folders" style="{{p.ib}}"><svg width="18" height="18" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round"><path d="M4 7h16M4 12h16M4 17h10"></path></svg></button>
+<span style="font-size: 13px; font-weight: 600; flex: 1">Library</span>
+<div role="tablist" aria-label="View" style="display: flex; padding: 2px; border-radius: 8px; border: 1px solid #1b2c44"><button role="tab" aria-selected="true" style="{{p.tabOn}}">Folders</button><button role="tab" aria-selected="false" style="{{p.tab}}">Map</button><button role="tab" aria-selected="false" style="{{p.tab}}">Graph</button></div>
+</header>
+<div style="padding: 12px; display: flex; flex-direction: column; gap: 12px">
+<div style="display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(75,188,255,0.3); background: rgba(75,188,255,0.08); font-size: 12px"><span style="width: 16px; height: 16px; border-radius: 999px; background: #4BBCFF; color: #081524; display: flex; align-items: center; justify-content: center"><svg width="9" height="9" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></span><span style="color: #4BBCFF; font-weight: 600">In context: 3 boards</span><span style="color: #8ea3bd; flex: 1">≈ 21k tokens</span><span style="color: #8ea3bd">Show ▾</span></div>
+<button style="align-self: flex-start; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 6px; border: 1px solid #1b2c44; background: #0f1d31; color: #e6eef7; font-family: inherit; font-size: 13px; font-weight: 600"><span style="width: 9px; height: 9px; border-radius: 3px; background: #5FCFC0"></span>Tech Enabling<span style="color: #6b7d94; font-weight: 400">· 12 ▾</span></button>
+<div style="display: flex; gap: 8px; overflow: hidden">
+<sc-for list="{{chips}}" as="c" hint-placeholder-count="3"><span style="flex-shrink: 0; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid #1b2c44; background: #0f1d31; font-size: 12px; font-weight: 500"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: #8ea3bd; stroke-width: 1.7; stroke-linejoin: round"><path d="M4 7a1 1 0 0 1 1-1h4l2 2h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z"></path></svg>{{c}}</span></sc-for>
+</div>
+<sc-for list="{{rows}}" as="r" hint-placeholder-count="4">
+<div style="display: flex; gap: 12px; padding: 10px; border-radius: 10px; border: {{r.border}}; background: #0f1d31; opacity: {{r.o}}">
+<div style="position: relative; width: 96px; height: 64px; flex-shrink: 0; border-radius: 6px; background-color: #081524; background-image: radial-gradient(rgba(142,163,189,0.16) 1px, transparent 1.2px); background-size: 8px 8px; border: 1px solid #1b2c44"><span style="position: absolute; left: 8px; top: 8px; width: 30px; height: 20px; border-radius: 2px; border: 1px solid {{r.l1}}; background: #13243b"></span><span style="position: absolute; left: 44px; top: 8px; width: 40px; height: 20px; border-radius: 2px; border: 1px solid #2a4566; background: #13243b"></span><span style="position: absolute; left: 8px; top: 34px; width: 76px; height: 20px; border-radius: 2px; border: 1px solid #2a4566; background: #13243b"></span></div>
+<div style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px">
+<div style="display: flex; align-items: center; gap: 6px"><span style="font-size: 13px; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{r.name}}</span><sc-if value="{{r.pin}}" hint-placeholder-val="{{ false }}"><span style="width: 16px; height: 16px; border-radius: 999px; background: #4BBCFF; color: #081524; display: flex; align-items: center; justify-content: center"><svg width="9" height="9" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.8; 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></div>
+<span style="font-size: 11px; color: #b9c6d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{r.readme}}</span>
+<span style="font-size: 11px; color: #6b7d94">{{r.meta}}</span>
+</div>
+</div>
+</sc-for>
+</div>
+<div style="position: absolute; left: 0; right: 0; bottom: 0; padding: 12px; border-top: 1px solid #2a4566; background: #0b1828; border-radius: 14px 14px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 6px">
+<span style="width: 36px; height: 4px; border-radius: 999px; background: #2a4566; align-self: center"></span>
+<div style="display: flex; align-items: center; gap: 8px"><span style="font-size: 13px; font-weight: 600; flex: 1">Tech Enabling — overview</span><button style="height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: #4BBCFF; color: #081524; font-family: inherit; font-size: 12px; font-weight: 600">Open</button></div>
+<span style="font-size: 11px; color: #8ea3bd">Details as a bottom sheet: README, 2 pinned cards, 4 links, in-context switch.</span>
+</div>
+</div>
+</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">A board</span>
+<div style="position: relative; width: 600px; height: 840px; border-radius: 12px; border: 1px solid #2a4566; overflow: hidden; background-color: #081524; background-image: radial-gradient(rgba(142,163,189,0.14) 1px, transparent 1.2px); background-size: 24px 24px">
+<header style="position: absolute; left: 44px; top: 0; right: 0; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 8px 0 10px; border-bottom: 1px solid #1b2c44; background: #0f1d31">
+<span style="width: 7px; height: 7px; border-radius: 999px; background: #2fd07f"></span>
+<span style="font-size: 13px; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">Pricing research ▾</span>
+<span style="font-size: 12px; color: #8ea3bd">100%</span>
+<button aria-label="More: export, present, zoom, fit" style="{{p.ib}}"><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>
+</header>
+<nav aria-label="Tools" style="position: absolute; left: 0; top: 0; width: 44px; height: 840px; box-sizing: border-box; padding: 6px 0; background: #0f1d31; border-right: 1px solid #1b2c44; display: flex; flex-direction: column; align-items: center; gap: 2px">
+<sc-for list="{{rail}}" as="ic" hint-placeholder-count="9"><span style="width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: {{ic.c}}; background: {{ic.bg}}; margin-top: {{ic.mt}}px"><svg width="16" height="16" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round"><path d="{{ic.d}}"></path></svg></span></sc-for>
+</nav>
+<svg width="600" height="840" viewBox="0 0 600 840" style="position: absolute; left: 0; top: 0; fill: none; stroke-linecap: round">
+<path d="M 200 330 C 200 290, 250 280, 250 236" style="stroke: #5FCFC0; stroke-width: 2"></path><path d="M 250 232 L 245.5 241 L 254.5 241 Z" style="fill: #5FCFC0"></path>
+<path d="M 420 330 C 420 290, 370 280, 370 236" style="stroke: #E59B6B; stroke-width: 2"></path><path d="M 370 232 L 365.5 241 L 374.5 241 Z" style="fill: #E59B6B"></path>
+</svg>
+<div style="{{p.node}} left: 180px; top: 120px; width: 260px; border: 1.5px solid #4BBCFF"><div style="{{p.head}} background: rgba(75,188,255,0.10)"><span style="{{p.title}}">Raise Pro to $24?</span><span style="{{p.mark}}"><svg width="11" height="11" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="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"></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="width: 18px; height: 18px; border-radius: 999px; background: #4BBCFF; color: #081524; 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.6; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></span></div><div style="{{p.body}}">Should Pro move from $19 to $24 in 2027?</div></div>
+<div style="{{p.node}} left: 64px; top: 330px; width: 250px"><div style="{{p.head}}"><span style="{{p.title}}">Churn flat after raise</span><span style="{{p.mark}}"><svg width="11" height="11" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"></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="{{p.body}}">Pro churn 2.1% → 2.2%.</div></div>
+<div style="{{p.node}} left: 330px; top: 330px; width: 250px"><div style="position: absolute; left: 0; right: 0; top: 0; height: 2.5px; background: #B388FF"></div><div style="{{p.head}}"><span style="{{p.title}}">SMB is price-sensitive</span><span style="{{p.mark}}"><svg width="11" height="11" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M4 20l4.2-1L19 8.2 15.8 5 5 15.8z"></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><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="{{p.body}}">6 of 9 would downgrade.</div></div>
+<div style="position: absolute; left: 56px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 8px">
+<div style="display: flex; gap: 8px; flex-wrap: wrap">
+<span style="display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(75,188,255,0.3); background: #0f1d31; color: #4BBCFF; font-size: 12px; font-weight: 500">4 in context <span style="color: #f4c542">· 1 out of date</span></span>
+<span style="display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(179,136,255,0.35); background: #0f1d31; color: #B388FF; font-size: 12px; font-weight: 500"><span style="width: 7px; height: 7px; border-radius: 999px; background: #B388FF"></span>Claude · 4 read · 1 edited</span>
+</div>
+<span style="font-size: 11px; color: #6b7d94">Minimap off by default under 700 px; the legend sits behind a “Relations” chip.</span>
+</div>
+</div>
+</div>
+</div>
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1000}}'>
+class Component extends DCLogic {
+  renderVals() {
+    var p = {
+      ib: 'width:32px;height:32px;border:0;border-radius:6px;padding:0;background:transparent;color:#8ea3bd;display:flex;align-items:center;justify-content:center;',
+      tab: 'height:26px;padding:0 9px;border:0;border-radius:6px;background:transparent;color:#8ea3bd;font-family:inherit;font-size:12px;font-weight:500;',
+      tabOn: 'height:26px;padding:0 9px;border:0;border-radius:6px;background:#1b2c44;color:#e6eef7;font-family:inherit;font-size:12px;font-weight:500;',
+      node: 'position:absolute;height:92px;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;',
+      mark: 'display:flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:500;color:#B388FF;background:rgba(179,136,255,0.16);flex-shrink:0;',
+      body: 'padding:8px 10px;font-size:12px;color:#b9c6d6;'
+    };
+    var chips = ['OKRs · 3', 'Delivery metrics · 4', 'Product discovery · 2'];
+    var rows = [
+      { name: 'Tech Enabling — overview', readme: 'Who we are, what we own and the three outcomes for 2027.', meta: '18 cards · 4 links · today', pin: true, border: '1.5px solid #4BBCFF', l1: '#4BBCFF', o: 1 },
+      { name: 'Platform roadmap 2027', readme: 'Quarterly themes, bets and team dependencies.', meta: '26 cards · 2 links · 4d ago', pin: false, border: '1px solid #1b2c44', l1: '#2a4566', o: 1 },
+      { name: 'Q3 risks and dependencies', readme: 'Retired risks from Q3. Kept for the record.', meta: '9 cards · 1 link · 74d ago', pin: false, border: '1px solid #1b2c44', l1: '#2a4566', o: 0.6 }
+    ];
+    var rail = [
+      { d: '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-4z', c: '#8ea3bd', bg: 'transparent', mt: 0 },
+      { d: 'M5 3.5l13 7.5-5.6 1.6L10.8 18z', c: '#4BBCFF', bg: 'rgba(75,188,255,0.14)', mt: 8 },
+      { d: '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', c: '#8ea3bd', bg: 'transparent', mt: 0 },
+      { 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', c: '#8ea3bd', bg: 'transparent', mt: 8 },
+      { d: 'M12 15V4M7.5 8.5L12 4l4.5 4.5M5 19.5h14', c: '#8ea3bd', bg: 'transparent', mt: 0 },
+      { d: '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', c: '#8ea3bd', bg: 'transparent', mt: 0 },
+      { d: 'M4 20l4.2-1L19 8.2 15.8 5 5 15.8z', c: '#8ea3bd', bg: 'transparent', mt: 0 },
+      { d: 'M5 11a6 6 0 1 0 12 0a6 6 0 1 0-12 0M20 20l-4.6-4.6', c: '#8ea3bd', bg: 'transparent', mt: 8 },
+      { d: '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', c: '#8ea3bd', bg: 'transparent', mt: 440 }
+    ];
+    return { p: p, chips: chips, rows: rows, rail: rail };
+  }
+}
+</script>
+</body>
+</html>