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

@@ -0,0 +1,151 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Board pins</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: 1100px; 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: 24px">
+<div>
+<h1 style="margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em">Board pins — a working set across boards</h1>
+<p style="margin: 4px 0 0; font-size: 13px; color: #8ea3bd">One gesture at two levels. Pin a card and its content goes to the agent. Pin a board and the whole board joins the agent's working set, wherever it sits in the library.</p>
+</div>
+<div style="display: grid; grid-template-columns: 600px minmax(0, 1fr); gap: 40px">
+<section style="display: flex; flex-direction: column; gap: 12px">
+<span style="{{s.label}}">Where you pin a board — same pin, same place</span>
+<div style="{{s.card}}">
+<span style="{{s.cap}}">Home — board cards</span>
+<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px">
+<div style="border-radius: 10px; border: 1.5px solid #4BBCFF; background: #0f1d31; overflow: hidden"><div style="position: relative; height: 70px; background-color: #081524; background-image: radial-gradient(rgba(142,163,189,0.14) 1px, transparent 1.2px); background-size: 10px 10px; border-bottom: 1px solid #1b2c44"><span style="{{s.pinOn}} position: absolute; right: 8px; top: 8px"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.pin}}"></path></svg></span></div><div style="padding: 8px 10px"><div style="font-size: 12px; font-weight: 600">C4 2026 OKR planning</div><div style="font-size: 11px; color: #8ea3bd">in context · 34 cards</div></div></div>
+<div style="border-radius: 10px; border: 1px solid #1b2c44; background: #0f1d31; overflow: hidden"><div style="position: relative; height: 70px; background-color: #081524; background-image: radial-gradient(rgba(142,163,189,0.14) 1px, transparent 1.2px); background-size: 10px 10px; border-bottom: 1px solid #1b2c44"><span style="{{s.pinOff}} position: absolute; right: 8px; top: 8px"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.pin}}"></path></svg></span></div><div style="padding: 8px 10px"><div style="font-size: 12px; font-weight: 600">Platform roadmap 2027</div><div style="font-size: 11px; color: #8ea3bd">click the pin to add · 26 cards</div></div></div>
+</div>
+</div>
+<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px">
+<div style="{{s.card}}">
+<span style="{{s.cap}}">Board switcher</span>
+<sc-for list="{{switcher}}" as="b" hint-placeholder-count="4">
+<div style="display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: 6px; background: {{b.bg}}"><span style="width: 8px; height: 8px; border-radius: 3px; background: {{b.hue}}"></span><span style="flex: 1; font-size: 12px; font-weight: 500">{{b.name}}</span><span style="{{b.pinStyle}}"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.pin}}"></path></svg></span></div>
+</sc-for>
+</div>
+<div style="{{s.card}}">
+<span style="{{s.cap}}">A portal card on a board</span>
+<div style="border-radius: 10px; border: 1.5px solid #4BBCFF; background: #0f1d31; overflow: hidden">
+<div style="display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 10px; border-bottom: 1px solid #1b2c44; background: rgba(75,188,255,0.10)"><svg width="14" height="14" viewBox="0 0 24 24" style="color: #4BBCFF; {{s.ic}}"><path d="M5 6h9v12H5zM14 9l5-3v12l-5-3"></path></svg><span style="flex: 1; font-size: 12px; font-weight: 600">Pricing research</span><span style="{{s.pinOn}}"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.pin}}"></path></svg></span></div>
+<div style="padding: 8px 10px; font-size: 11px; color: #8ea3bd">Board · 27 cards · pinned here, so it travels with you</div>
+</div>
+</div>
+</div>
+<div style="{{s.card}}">
+<span style="{{s.cap}}">The open board's top bar</span>
+<div style="display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border-radius: 8px; background: #0f1d31; border: 1px solid #1b2c44">
+<span style="width: 7px; height: 7px; border-radius: 999px; background: #2fd07f"></span>
+<span style="font-size: 13px; font-weight: 600">Pricing research ▾</span>
+<span style="{{s.pinOn}}"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.pin}}"></path></svg></span>
+<span style="flex: 1"></span>
+<span style="display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(75,188,255,0.3); color: #4BBCFF; font-size: 12px; font-weight: 500">4 cards · 3 boards in context</span>
+</div>
+</div>
+<div style="display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid #1b2c44; background: #0b1828; font-size: 12px; color: #b9c6d6"><span style="color: #4BBCFF; font-weight: 600; flex-shrink: 0">Read, not write.</span><span>A pinned board is context. The agent still writes only to the board that's open; pinning never widens what it may change.</span></div>
+</section>
+<section style="display: flex; flex-direction: column; gap: 12px">
+<span style="{{s.label}}">What the agent gets — the brief, in order</span>
+<sc-for list="{{tiers}}" as="t" hint-placeholder-count="3">
+<div style="{{s.card}} gap: 8px; border-color: {{t.border}}">
+<div style="display: flex; align-items: baseline; gap: 10px"><span style="width: 22px; height: 22px; border-radius: 999px; background: {{t.numBg}}; color: {{t.numC}}; font-size: 12px; font-weight: 600; text-align: center; line-height: 22px; flex-shrink: 0">{{t.n}}</span><span style="font-size: 15px; font-weight: 600; flex: 1">{{t.title}}</span><span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #8ea3bd">{{t.tokens}}</span></div>
+<span style="font-size: 12px; color: #8ea3bd">{{t.what}}</span>
+<sc-for list="{{t.rows}}" as="r" hint-placeholder-count="2">
+<div style="display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 6px; background: #13243b; font-size: 12px"><span style="{{r.mark}}">{{r.markText}}</span><span style="flex: 1; font-weight: 500">{{r.name}}</span><span style="font-size: 11px; color: #8ea3bd">{{r.detail}}</span></div>
+</sc-for>
+</div>
+</sc-for>
+<div style="display: flex; align-items: center; gap: 12px; font-size: 12px; color: #8ea3bd"><span style="width: 200px; height: 6px; border-radius: 999px; background: #1b2c44; overflow: hidden; display: block"><span style="display: block; width: 77%; height: 6px; background: #f4c542"></span></span><span style="font-family: 'IBM Plex Mono', monospace; color: #e6eef7; white-space: nowrap">24.5k / 32k</span><span>Over budget, a pinned board falls back to discovery — said on the chip, never silent.</span></div>
+</section>
+</div>
+<section style="display: flex; flex-direction: column; gap: 12px">
+<span style="{{s.label}}">On any board — the context chip, opened</span>
+<div style="display: flex; gap: 24px; align-items: flex-start">
+<div style="width: 420px; box-sizing: border-box; padding: 12px; border-radius: 12px; border: 1px solid #2a4566; background: #13243b; box-shadow: 0 10px 30px rgba(0,0,0,0.55); display: flex; flex-direction: column; gap: 8px">
+<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-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #8ea3bd">24.5k tokens</span></div>
+<span style="{{s.cap}}">Boards · 3</span>
+<sc-for list="{{chipBoards}}" as="r" hint-placeholder-count="3">
+<div style="display: flex; align-items: center; gap: 8px; height: 28px; font-size: 12px"><span style="width: 8px; height: 8px; border-radius: 3px; background: {{r.hue}}"></span><span style="flex: 1">{{r.name}}</span><span style="{{r.readStyle}}">{{r.read}}</span><span style="color: #6b7d94">×</span></div>
+</sc-for>
+<span style="{{s.cap}}">Cards on this board · 4</span>
+<div style="font-size: 12px; color: #b9c6d6">Raise Pro to $24? · Churn flat after last raise · SMB is price-sensitive · Competitor pricing</div>
+</div>
+<div style="flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px">
+<sc-for list="{{rules}}" as="r" hint-placeholder-count="3">
+<div style="{{s.card}} gap: 4px"><span style="font-size: 12px; font-weight: 600">{{r.t}}</span><span style="font-size: 11px; color: #b9c6d6">{{r.d}}</span></div>
+</sc-for>
+</div>
+</div>
+</section>
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1100}}'>
+class Component extends DCLogic {
+  renderVals() {
+    var i = { pin: 'M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20' };
+    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 s = {
+      label: 'font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:#6b7d94;',
+      cap: 'font-size:11px;font-weight:500;color:#8ea3bd;',
+      card: 'display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:10px;border:1px solid #1b2c44;background:#0b1828;',
+      ic: 'fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;',
+      pinOn: pinOn, pinOff: pinOff
+    };
+    var switcher = [
+      { name: 'Pricing research', hue: '#7C9CFF', pinStyle: pinOn, bg: '#13243b' },
+      { name: 'C4 2026 OKR planning', hue: '#5FCFC0', pinStyle: pinOn, bg: 'transparent' },
+      { name: 'Tech Enabling — overview', hue: '#5FCFC0', pinStyle: pinOn, bg: 'transparent' },
+      { name: 'Platform roadmap 2027', hue: '#5FCFC0', pinStyle: pinOff, bg: 'transparent' }
+    ];
+    var mOn = 'font-size:11px;font-weight:600;padding:0 6px;border-radius:999px;background:rgba(75,188,255,0.14);color:#4BBCFF;';
+    var mDisc = 'font-size:11px;font-weight:600;padding:0 6px;border-radius:999px;background:#1b2c44;color:#8ea3bd;';
+    var tiers = [
+      { n: '1', title: 'This board’s pinned cards', tokens: '9k', what: 'Full content, as today.', border: 'rgba(75,188,255,0.35)', numBg: '#4BBCFF', numC: '#081524',
+        rows: [{ name: '4 cards on Pricing research', detail: 'full text', mark: mOn, markText: 'cards' }] },
+      { n: '2', title: 'Pinned boards', tokens: '14k', what: 'Each board’s README and its pinned cards, in full. New.', border: 'rgba(75,188,255,0.35)', numBg: '#4BBCFF', numC: '#081524',
+        rows: [{ name: 'Tech Enabling — overview', detail: 'README + 2 pinned · 6k', mark: mOn, markText: 'board' },
+               { name: 'C4 2026 OKR planning', detail: 'README + 3 pinned · 8k', mark: mOn, markText: 'board' }] },
+      { n: '3', title: 'Discovery', tokens: '1.5k', what: 'Linked and same-folder boards: README summary and pinned titles only — today’s behaviour.', border: '#1b2c44', numBg: '#1b2c44', numC: '#b9c6d6',
+        rows: [{ name: 'Churn analysis · SMB interviews · Competitor teardown', detail: 'summaries', mark: mDisc, markText: 'linked' }] }
+    ];
+    var read = 'font-size:11px;font-weight:500;padding:0 6px;border-radius:999px;background:rgba(179,136,255,0.16);color:#B388FF;';
+    var notRead = 'font-size:11px;font-weight:500;padding:0 6px;border-radius:999px;background:#1b2c44;color:#8ea3bd;';
+    var chipBoards = [
+      { name: 'Pricing research (this board)', hue: '#7C9CFF', read: 'read 2m ago', readStyle: read },
+      { name: 'Tech Enabling — overview', hue: '#5FCFC0', read: 'read 2m ago', readStyle: read },
+      { name: 'C4 2026 OKR planning', hue: '#5FCFC0', read: 'not read yet', readStyle: notRead }
+    ];
+    var rules = [
+      { t: 'Lasts until you unpin', d: 'Board pins belong to the workspace: they survive board switches and restarts. You or the agent can pin; the agent’s pins carry its violet dot.' },
+      { t: 'Seen like card pins', d: 'Read and “not read yet” come from the recorded reads, per board — so you know which boards the agent actually loaded.' },
+      { t: 'Agents use the same pins', d: 'canvas://pinned-context lists pinned boards; canvas_board pin / unpin sets them, with the HTTP route, SDK and CLI kept in step.' }
+    ];
+    return { s: s, i: i, switcher: switcher, tiers: tiers, chipBoards: chipBoards, rules: rules };
+  }
+}
+</script>
+</body>
+</html>

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

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