pmx-canvas 0.7.3 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (235) hide show
  1. package/.github/extensions/pmx-canvas/THIRD_PARTY_LICENSES.txt +331 -0
  2. package/.github/extensions/pmx-canvas/extension.mjs +25 -172
  3. package/.github/extensions/pmx-canvas/mcp-bootstrap.ts +198 -0
  4. package/.github/extensions/pmx-canvas/runtime.d.mts +41 -0
  5. package/.github/extensions/pmx-canvas/runtime.json +3 -0
  6. package/.github/extensions/pmx-canvas/runtime.mjs +194 -0
  7. package/.github/extensions/pmx-canvas/start-mcp.mjs +51 -0
  8. package/.github/extensions/pmx-canvas/tools.json +2560 -0
  9. package/CHANGELOG.md +47 -0
  10. package/Readme.md +21 -7
  11. package/dist/canvas/fonts/OFL.txt +93 -0
  12. package/dist/canvas/fonts/ibm-plex-mono-latin-400-normal.woff2 +0 -0
  13. package/dist/canvas/fonts/ibm-plex-mono-latin-500-normal.woff2 +0 -0
  14. package/dist/canvas/fonts/ibm-plex-mono-latin-ext-400-normal.woff2 +0 -0
  15. package/dist/canvas/fonts/ibm-plex-mono-latin-ext-500-normal.woff2 +0 -0
  16. package/dist/canvas/fonts/ibm-plex-sans-latin-400-normal.woff2 +0 -0
  17. package/dist/canvas/fonts/ibm-plex-sans-latin-500-normal.woff2 +0 -0
  18. package/dist/canvas/fonts/ibm-plex-sans-latin-600-normal.woff2 +0 -0
  19. package/dist/canvas/fonts/ibm-plex-sans-latin-ext-400-normal.woff2 +0 -0
  20. package/dist/canvas/fonts/ibm-plex-sans-latin-ext-500-normal.woff2 +0 -0
  21. package/dist/canvas/fonts/ibm-plex-sans-latin-ext-600-normal.woff2 +0 -0
  22. package/dist/canvas/global.css +723 -672
  23. package/dist/canvas/index.js +90 -88
  24. package/dist/canvas/mcp-app.html +7878 -0
  25. package/dist/canvas/mermaid-entry.js +1 -1
  26. package/dist/canvas/surface-theme.css +151 -46
  27. package/dist/json-render/index.css +1 -1
  28. package/dist/types/cli/commands/record.d.ts +1 -1
  29. package/dist/types/client/canvas/NodeContextMark.d.ts +24 -0
  30. package/dist/types/client/canvas/SessionReceipt.d.ts +3 -1
  31. package/dist/types/client/icons.d.ts +1 -2
  32. package/dist/types/client/mcp-app/index.d.ts +1 -0
  33. package/dist/types/client/nodes/ax-node-actions.d.ts +2 -2
  34. package/dist/types/client/nodes/markdown-sanitize.d.ts +2 -0
  35. package/dist/types/client/nodes/use-workbench-asset.d.ts +2 -0
  36. package/dist/types/client/state/attention-store.d.ts +0 -5
  37. package/dist/types/client/state/context-status-store.d.ts +53 -0
  38. package/dist/types/client/state/intent-bridge.d.ts +3 -0
  39. package/dist/types/client/state/near-pin-store.d.ts +16 -0
  40. package/dist/types/client/state/presence-store.d.ts +5 -0
  41. package/dist/types/client/state/session-store.d.ts +33 -3
  42. package/dist/types/client/state/workbench-transport.d.ts +16 -0
  43. package/dist/types/client/theme/tokens.d.ts +1 -3
  44. package/dist/types/client/types.d.ts +9 -0
  45. package/dist/types/json-render/server.d.ts +1 -1
  46. package/dist/types/mcp/app-server.d.ts +3 -0
  47. package/dist/types/mcp/canvas-access.d.ts +1 -1
  48. package/dist/types/mcp/canvas-app.d.ts +4 -0
  49. package/dist/types/mcp/workbench-app.d.ts +4 -0
  50. package/dist/types/server/agent-presence.d.ts +1 -1
  51. package/dist/types/server/ax-state.d.ts +1 -1
  52. package/dist/types/server/canvas-db.d.ts +8 -0
  53. package/dist/types/server/canvas-geometry.d.ts +25 -0
  54. package/dist/types/server/canvas-operations.d.ts +1 -11
  55. package/dist/types/server/canvas-state.d.ts +25 -3
  56. package/dist/types/server/context-brief.d.ts +8 -1
  57. package/dist/types/server/context-reads.d.ts +30 -7
  58. package/dist/types/server/index.d.ts +6 -1
  59. package/dist/types/server/mcp-app-runtime.d.ts +1 -0
  60. package/dist/types/server/operations/http.d.ts +2 -0
  61. package/dist/types/server/operations/invoker.d.ts +4 -2
  62. package/dist/types/server/operations/ops/nodes.d.ts +0 -6
  63. package/dist/types/server/server.d.ts +1 -0
  64. package/dist/types/server/spatial-analysis.d.ts +2 -0
  65. package/dist/types/shared/agent-context.d.ts +22 -0
  66. package/dist/types/shared/agent-presence.d.ts +3 -10
  67. package/dist/types/shared/canvas-app.d.ts +54 -0
  68. package/dist/types/shared/themes.d.ts +1 -1
  69. package/docs/RELEASE.md +7 -3
  70. package/docs/agent-plugin.md +123 -0
  71. package/docs/ax-state-contract.md +40 -0
  72. package/docs/cli.md +7 -2
  73. package/docs/design/AgentContext.dc.html +186 -0
  74. package/docs/design/Before.dc.html +208 -0
  75. package/docs/design/BoardPins.dc.html +151 -0
  76. package/docs/design/Chrome.dc.html +208 -0
  77. package/docs/design/Context.dc.html +239 -0
  78. package/docs/design/Flows.dc.html +181 -0
  79. package/docs/design/Home.dc.html +209 -0
  80. package/docs/design/HomeGraph.dc.html +211 -0
  81. package/docs/design/HomeMap.dc.html +117 -0
  82. package/docs/design/HomeTeam.dc.html +176 -0
  83. package/docs/design/Light.dc.html +28 -0
  84. package/docs/design/Main.dc.html +280 -0
  85. package/docs/design/NearPin.dc.html +260 -0
  86. package/docs/design/Pane600.dc.html +120 -0
  87. package/docs/design/Relations.dc.html +297 -0
  88. package/docs/design/Themes.dc.html +121 -0
  89. package/docs/design/TokenSystem.dc.html +136 -0
  90. package/docs/design/Tokens.dc.html +163 -0
  91. package/docs/design/Types1.dc.html +177 -0
  92. package/docs/design/Types2.dc.html +226 -0
  93. package/docs/design/Types3.dc.html +195 -0
  94. package/docs/design/Uses.dc.html +152 -0
  95. package/docs/design/Vision.dc.html +116 -0
  96. package/docs/design/Zoom.dc.html +82 -0
  97. package/docs/design/canvas.json +274 -0
  98. package/docs/design.md +214 -0
  99. package/docs/environment.md +1 -1
  100. package/docs/http-api.md +80 -15
  101. package/docs/mcp.md +198 -3
  102. package/docs/node-types.md +34 -10
  103. package/docs/plans/plan-009-tech-debt-backlog.md +1 -1
  104. package/docs/plans/plan-015-design-foundation-wave-0.md +177 -0
  105. package/docs/plans/plan-016-context-made-visible-wave-1.md +148 -0
  106. package/docs/product-vision-2026-09.md +47 -7
  107. package/docs/screenshot.png +0 -0
  108. package/docs/sdk.md +1 -0
  109. package/package.json +10 -4
  110. package/plugins/pmx-canvas/LICENSE +21 -0
  111. package/plugins/pmx-canvas/THIRD_PARTY_LICENSES.txt +331 -0
  112. package/plugins/pmx-canvas/assets/preview.png +0 -0
  113. package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/extension.mjs +930 -0
  114. package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/runtime.json +3 -0
  115. package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/runtime.mjs +194 -0
  116. package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/steering-delivery.mjs +79 -0
  117. package/plugins/pmx-canvas/mcp.json +12 -0
  118. package/plugins/pmx-canvas/plugin.json +24 -0
  119. package/plugins/pmx-canvas/runtime.json +3 -0
  120. package/plugins/pmx-canvas/runtime.mjs +194 -0
  121. package/plugins/pmx-canvas/start-mcp.mjs +51 -0
  122. package/plugins/pmx-canvas/tools.json +2560 -0
  123. package/skills/pmx-canvas/SKILL.md +10 -7
  124. package/skills/pmx-canvas/references/full-reference.md +11 -7
  125. package/skills/pmx-canvas/references/github-copilot-app-adapter.md +20 -8
  126. package/skills/pmx-canvas/references/installing-pmx-canvas.md +6 -6
  127. package/skills/pmx-canvas-testing/SKILL.md +5 -4
  128. package/src/cli/commands/copilot.ts +5 -0
  129. package/src/cli/commands/view.ts +1 -1
  130. package/src/cli/index.ts +8 -3
  131. package/src/client/App.tsx +6 -1
  132. package/src/client/canvas/AgentPresenceLayer.tsx +3 -3
  133. package/src/client/canvas/AnnotationLayer.tsx +1 -1
  134. package/src/client/canvas/CanvasNode.tsx +32 -49
  135. package/src/client/canvas/CanvasViewport.tsx +0 -2
  136. package/src/client/canvas/CommandPalette.tsx +3 -2
  137. package/src/client/canvas/ContextMenu.tsx +11 -0
  138. package/src/client/canvas/EdgeLayer.tsx +1 -1
  139. package/src/client/canvas/ExportDialog.tsx +33 -6
  140. package/src/client/canvas/IntentLayer.tsx +2 -2
  141. package/src/client/canvas/Minimap.tsx +12 -7
  142. package/src/client/canvas/NodeContextMark.tsx +156 -0
  143. package/src/client/canvas/SessionPanel.tsx +4 -7
  144. package/src/client/canvas/SessionReceipt.tsx +114 -17
  145. package/src/client/canvas/ShortcutOverlay.tsx +6 -1
  146. package/src/client/canvas/SnapshotPanel.tsx +11 -2
  147. package/src/client/canvas/ToolRail.tsx +12 -9
  148. package/src/client/canvas/TopBar.tsx +16 -11
  149. package/src/client/icons.tsx +2 -12
  150. package/src/client/mcp-app/index.tsx +137 -0
  151. package/src/client/mcp-app/style.css +10 -0
  152. package/src/client/nodes/AttachmentNode.tsx +8 -1
  153. package/src/client/nodes/AxStepControls.tsx +1 -1
  154. package/src/client/nodes/ContextNode.tsx +9 -9
  155. package/src/client/nodes/ExtAppFrame.tsx +13 -8
  156. package/src/client/nodes/FileNode.tsx +8 -5
  157. package/src/client/nodes/ImageNode.tsx +4 -2
  158. package/src/client/nodes/InlineMarkdownEditor.tsx +2 -1
  159. package/src/client/nodes/LedgerNode.tsx +2 -2
  160. package/src/client/nodes/MarkdownNode.tsx +44 -9
  161. package/src/client/nodes/McpAppNode.tsx +6 -4
  162. package/src/client/nodes/PromptNode.tsx +5 -17
  163. package/src/client/nodes/ResponseNode.tsx +3 -15
  164. package/src/client/nodes/StatusNode.tsx +2 -2
  165. package/src/client/nodes/StatusSummary.tsx +3 -1
  166. package/src/client/nodes/TraceNode.tsx +6 -4
  167. package/src/client/nodes/WebpageNode.tsx +1 -1
  168. package/src/client/nodes/ax-node-actions.ts +2 -2
  169. package/src/client/nodes/iframe-document-url.ts +3 -2
  170. package/src/client/nodes/markdown-sanitize.ts +10 -0
  171. package/src/client/nodes/surface-url.ts +10 -0
  172. package/src/client/nodes/use-surface-frame.ts +3 -1
  173. package/src/client/nodes/use-workbench-asset.ts +26 -0
  174. package/src/client/state/attention-bridge.ts +0 -8
  175. package/src/client/state/attention-store.ts +0 -17
  176. package/src/client/state/canvas-store.ts +4 -2
  177. package/src/client/state/context-status-store.ts +66 -0
  178. package/src/client/state/human-store.ts +2 -0
  179. package/src/client/state/iframe-mode.ts +5 -0
  180. package/src/client/state/intent-bridge.ts +10 -4
  181. package/src/client/state/near-pin-store.ts +53 -0
  182. package/src/client/state/presence-store.ts +5 -10
  183. package/src/client/state/session-store.ts +106 -9
  184. package/src/client/state/sse-bridge.ts +26 -7
  185. package/src/client/state/theme-override.ts +1 -1
  186. package/src/client/state/workbench-transport.ts +36 -0
  187. package/src/client/theme/global.css +723 -672
  188. package/src/client/theme/surface-theme.css +151 -46
  189. package/src/client/theme/tokens.ts +7 -11
  190. package/src/client/types.ts +10 -0
  191. package/src/json-render/server.ts +71 -14
  192. package/src/mcp/app-server.ts +64 -0
  193. package/src/mcp/canvas-access.ts +14 -11
  194. package/src/mcp/canvas-app.ts +318 -0
  195. package/src/mcp/server.ts +1 -1
  196. package/src/mcp/workbench-app.ts +211 -0
  197. package/src/server/agent-presence.ts +45 -6
  198. package/src/server/ax-context.ts +1 -1
  199. package/src/server/ax-state.ts +1 -1
  200. package/src/server/board-export.ts +5 -2
  201. package/src/server/canvas-db.ts +46 -12
  202. package/src/server/canvas-geometry.ts +64 -0
  203. package/src/server/canvas-operations.ts +6 -24
  204. package/src/server/canvas-state.ts +105 -15
  205. package/src/server/canvas-validation.ts +19 -4
  206. package/src/server/context-brief.ts +39 -2
  207. package/src/server/context-reads.ts +86 -15
  208. package/src/server/demo-state.json +31 -31
  209. package/src/server/html-surface.ts +4 -5
  210. package/src/server/index.ts +19 -3
  211. package/src/server/mcp-app-runtime.ts +11 -0
  212. package/src/server/operations/composites.ts +4 -3
  213. package/src/server/operations/http.ts +4 -4
  214. package/src/server/operations/invoker.ts +13 -4
  215. package/src/server/operations/ops/ax-read.ts +1 -1
  216. package/src/server/operations/ops/ax-timeline.ts +37 -0
  217. package/src/server/operations/ops/boards.ts +1 -1
  218. package/src/server/operations/ops/canvas-wire.ts +3 -6
  219. package/src/server/operations/ops/intent.ts +31 -2
  220. package/src/server/operations/ops/json-render.ts +1 -1
  221. package/src/server/operations/ops/nodes.ts +8 -76
  222. package/src/server/operations/ops/query.ts +8 -2
  223. package/src/server/operations/ops/snapshots.ts +4 -1
  224. package/src/server/operations/ops/viewport.ts +29 -5
  225. package/src/server/operations/registry.ts +38 -4
  226. package/src/server/scope-fence.ts +55 -10
  227. package/src/server/server.ts +83 -5
  228. package/src/server/spatial-analysis.ts +2 -2
  229. package/src/server/workboard.ts +6 -1
  230. package/src/{server → shared}/agent-context.ts +2 -2
  231. package/src/shared/agent-presence.ts +3 -15
  232. package/src/shared/canvas-app.ts +62 -0
  233. package/src/shared/themes.ts +5 -5
  234. package/src/client/canvas/FocusFieldLayer.tsx +0 -116
  235. package/src/client/canvas/kind-colors.ts +0 -23
package/docs/design/Flows.dc.html ADDED
@@ -0,0 +1,181 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Lineage, evidence and drill-in</title>
6
+ <script src="./support.js"></script>
7
+ </head>
8
+ <body>
9
+ <x-dc>
10
+ <helmet>
11
+ <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">
12
+ <style>
13
+ body{margin:0}
14
+ </style>
15
+ </helmet>
16
+ <div style="width: 1440px; height: 1280px; box-sizing: border-box; padding: 48px 56px; background: #081524; color: #e6eef7; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 32px">
17
+
18
+ <div>
19
+ <h1 style="margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em">Lineage, evidence and drill-in</h1>
20
+ <p style="margin: 4px 0 0; font-size: 13px; color: #8ea3bd">The same relation layer for data work: where a number came from and whether it's still current, what a finding rests on, and a group of sources opened with its outside links kept.</p>
21
+ </div>
22
+
23
+ <section style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px">
24
+
25
+ <div style="display: flex; flex-direction: column; gap: 8px">
26
+ <span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Today — lineage drawn by hand</span>
27
+ <div style="position: relative; width: 644px; height: 330px; border-radius: 10px; border: 1px solid #1b2c44; overflow: hidden; background-color: #081524; background-image: radial-gradient(rgba(142,163,189,0.10) 1px, transparent 1.2px); background-size: 24px 24px; font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif">
28
+ <svg width="644" height="330" viewBox="0 0 644 330" style="position: absolute; left: 0; top: 0; fill: none; stroke-linecap: round">
29
+ <path d="M 152 148 C 164 148, 164 148, 176 148" style="stroke: #4BBCFF; stroke-width: 1.5; opacity: 0.85"></path><path d="M 176 148 L 168 144.8 L 168 151.2 Z" style="fill: #4BBCFF; opacity: 0.75"></path>
30
+ <path d="M 308 148 C 320 148, 320 148, 332 148" style="stroke: #4BBCFF; stroke-width: 1.5; opacity: 0.85"></path><path d="M 332 148 L 324 144.8 L 324 151.2 Z" style="fill: #4BBCFF; opacity: 0.75"></path>
31
+ <path d="M 464 148 C 476 148, 476 148, 488 148" style="stroke: #4BBCFF; stroke-width: 1.5; opacity: 0.85"></path><path d="M 488 148 L 480 144.8 L 480 151.2 Z" style="fill: #4BBCFF; opacity: 0.75"></path>
32
+ </svg>
33
+ <sc-for list="{{oldSteps}}" as="st" hint-placeholder-count="4">
34
+ <div style="position: absolute; left: {{st.x}}px; top: 84px; width: 132px; height: 128px; box-sizing: border-box; border-radius: 12px 12px 8px 8px; border: 1px solid #1b2c44; background: #0f1d31; box-shadow: 0 4px 24px rgba(0,0,0,0.3); overflow: hidden; display: flex; flex-direction: column">
35
+ <div style="height: 26px; padding: 0 8px; display: flex; align-items: center; gap: 4px; background: #0b1828; border-bottom: 1px solid #1b2c44"><span style="font-size: 10px; color: {{st.ic}}">{{st.glyph}}</span><span style="flex: 1; font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{st.title}}</span></div>
36
+ <div style="padding: 6px 8px; font-size: 9px; color: #b9c6d6; flex: 1">{{st.body}}</div>
37
+ </div>
38
+ </sc-for>
39
+ <span style="position: absolute; left: 20px; top: 230px; font-size: 10px; color: #5c6b80">churn-raw.csv was replaced this morning.</span>
40
+ </div>
41
+ <span style="font-size: 12px; color: #ff8a9b">Blue “flow” links, the same as every other flow. When the raw export is replaced, the cleaned table, the chart and the finding all look current.</span>
42
+ </div>
43
+
44
+ <div style="display: flex; flex-direction: column; gap: 8px">
45
+ <span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Proposed — lineage that knows it's stale</span>
46
+ <div style="position: relative; width: 644px; height: 330px; 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">
47
+ <svg width="644" height="330" viewBox="0 0 644 330" style="position: absolute; left: 0; top: 0; fill: none; stroke-linecap: round; stroke-linejoin: round">
48
+ <path d="M 152 135 L 174 135" style="stroke: #f4c542; stroke-width: 2; stroke-dasharray: 5 4"></path><path d="M 178 135 L 169 130.5 L 169 139.5 Z" style="fill: #f4c542"></path>
49
+ <path d="M 308 135 L 330 135" style="stroke: #f4c542; stroke-width: 2; stroke-dasharray: 5 4"></path><path d="M 334 135 L 325 130.5 L 325 139.5 Z" style="fill: #f4c542"></path>
50
+ <path d="M 464 135 L 486 135" style="stroke: #f4c542; stroke-width: 2; stroke-dasharray: 5 4"></path><path d="M 490 135 L 481 130.5 L 481 139.5 Z" style="fill: #f4c542"></path>
51
+ <path d="M 400 190 L 400 246" style="stroke: #7C9CFF; stroke-width: 2"></path><path d="M 400 250 L 395.5 241 L 404.5 241 Z" style="fill: #7C9CFF"></path>
52
+ </svg>
53
+ <span style="position: absolute; left: 410px; top: 210px; font-size: 11px; color: #7C9CFF">cited by</span>
54
+ <div style="{{c.step}} left: 24px">
55
+ <div style="{{c.head}}"><svg width="14" height="14" viewBox="0 0 24 24" style="{{c.ic}}"><path d="M7 3.5h7l4 4V20.5H6V3.5zM14 3.5V8h4"></path></svg><span style="{{c.title}}">churn-raw.csv</span></div>
56
+ <div style="{{c.body}}">14,212 rows</div>
57
+ <div style="padding: 0 10px 8px"><span style="{{c.chip}} background: rgba(47,208,127,0.12); color: #2fd07f">updated 2h ago</span></div>
58
+ </div>
59
+ <div style="{{c.step}} left: 180px">
60
+ <div style="{{c.head}}"><svg width="14" height="14" viewBox="0 0 24 24" style="{{c.ic}}"><path d="M7 3.5h7l4 4V20.5H6V3.5zM14 3.5V8h4"></path></svg><span style="{{c.title}}">churn-clean.csv</span></div>
61
+ <div style="{{c.body}}">Trials and test accounts removed</div>
62
+ <div style="padding: 0 10px 8px"><span style="{{c.chip}} background: rgba(244,197,66,0.12); color: #f4c542">stale</span></div>
63
+ </div>
64
+ <div style="{{c.step}} left: 336px">
65
+ <div style="{{c.head}}"><svg width="14" height="14" viewBox="0 0 24 24" style="{{c.ic}}"><path d="M4 4v16h16M8 16v-4M12 16V8M16 16v-6"></path></svg><span style="{{c.title}}">Churn by plan</span></div>
66
+ <div style="{{c.body}}">bar · monthly, by plan</div>
67
+ <div style="padding: 0 10px 8px"><span style="{{c.chip}} background: rgba(244,197,66,0.12); color: #f4c542">stale</span></div>
68
+ </div>
69
+ <div style="{{c.step}} left: 492px">
70
+ <div style="{{c.head}}"><svg width="14" height="14" viewBox="0 0 24 24" style="{{c.ic}}"><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="{{c.title}}">Churn flat after raise</span></div>
71
+ <div style="{{c.body}}">Finding · rests on a stale chart</div>
72
+ <div style="padding: 0 10px 8px"><span style="{{c.chip}} background: rgba(244,197,66,0.12); color: #f4c542">check</span></div>
73
+ </div>
74
+ <div style="position: absolute; left: 300px; top: 252px; width: 200px; height: 56px; box-sizing: border-box; padding: 8px 12px; border-radius: 10px; border: 1px solid #1b2c44; background: #0f1d31; display: flex; flex-direction: column; justify-content: center"><span style="font-size: 12px; font-weight: 600">SMB is price-sensitive</span><span style="font-size: 11px; color: #8ea3bd">finding · also cites the chart</span></div>
75
+ <div style="position: absolute; left: 24px; top: 262px; display: flex; flex-direction: column; gap: 6px">
76
+ <span style="font-size: 11px; color: #f4c542">3 nodes downstream of a changed source</span>
77
+ <div style="display: flex; gap: 6px"><button style="{{c.btn}}">Show lineage</button><button style="{{c.btn}}">Ask agent to refresh</button></div>
78
+ </div>
79
+ </div>
80
+ <span style="font-size: 12px; color: #8ea3bd">“Derived from” links know their direction. When a source changes, everything downstream turns amber (a real warning) until it's refreshed or confirmed.</span>
81
+ </div>
82
+
83
+ </section>
84
+
85
+ <section style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px">
86
+
87
+ <div style="display: flex; flex-direction: column; gap: 8px">
88
+ <span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Proposed — what a finding rests on (new)</span>
89
+ <div style="position: relative; height: 560px; border-radius: 10px; border: 1px solid #1b2c44; overflow: hidden; background: rgba(4,10,18,0.9); display: flex">
90
+ <div style="flex: 1; padding: 20px; display: flex; flex-direction: column">
91
+ <div style="flex: 1; border-radius: 14px; border: 1px solid #1b2c44; background: #0f1d31; box-shadow: 0 24px 64px rgba(0,0,0,0.5); display: flex; flex-direction: column; overflow: hidden">
92
+ <div style="height: 40px; padding: 0 14px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #1b2c44"><span style="font-size: 15px; font-weight: 600; flex: 1">Churn flat after last raise</span><span style="font-size: 11px; color: #6b7d94">finding</span></div>
93
+ <div style="padding: 14px; color: #b9c6d6; font-size: 12px; line-height: 1.6">Pro churn was 2.1% in the three months before the 2024 raise and 2.2% after it. The effect is within normal month-to-month noise.</div>
94
+ </div>
95
+ </div>
96
+ <aside style="width: 300px; box-sizing: border-box; padding: 18px 16px; border-left: 1px solid #1b2c44; background: #0b1828; display: flex; flex-direction: column; gap: 12px; overflow: hidden">
97
+ <div style="display: flex; align-items: center; justify-content: space-between"><span style="font-size: 12px; font-weight: 600">Relations</span><button style="height: 24px; padding: 0 9px; border-radius: 6px; border: 1px solid #2a4566; background: #13243b; color: #e6eef7; font-family: inherit; font-size: 11px">Show on canvas</button></div>
98
+ <div style="display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: rgba(244,197,66,0.12); color: #f4c542; font-size: 11px; font-weight: 500"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round"><path d="M12 4l9 16H3zM12 10v4M12 17v.5"></path></svg>Rests on a stale chart</div>
99
+ <sc-for list="{{groups}}" as="g" hint-placeholder-count="3">
100
+ <div>
101
+ <div style="{{c.sec}}">{{g.name}}</div>
102
+ <sc-for list="{{g.items}}" as="rel" hint-placeholder-count="2">
103
+ <div style="{{c.rel}}"><div style="display: flex; align-items: center; gap: 6px"><svg width="16" height="6" viewBox="0 0 16 6" style="flex-shrink: 0; fill: none; stroke: {{rel.c}}; stroke-width: 2; stroke-linecap: round"><path d="M1 3 H15"></path></svg><span style="font-size: 11px; color: {{rel.c}}">{{rel.type}}</span><span style="font-size: 12px; font-weight: 600; color: #e6eef7">{{rel.target}}</span></div><div style="font-size: 11px; color: #8ea3bd; padding-left: 22px">{{rel.why}}</div></div>
104
+ </sc-for>
105
+ </div>
106
+ </sc-for>
107
+ </aside>
108
+ </div>
109
+ <span style="font-size: 12px; color: #8ea3bd">In the expanded node: evidence for, evidence against, and what uses this finding, each with its reason. Pinning the finding can bring its evidence into the agent's context too.</span>
110
+ </div>
111
+
112
+ <div style="display: flex; flex-direction: column; gap: 8px">
113
+ <span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Proposed — open a group of sources (new)</span>
114
+ <div style="position: relative; height: 560px; 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">
115
+ <div style="position: absolute; left: 16px; top: 14px; display: flex; align-items: center; gap: 6px; font-size: 12px"><span style="color: #8ea3bd">Q4 pricing</span><span style="color: #3d5170">/</span><span style="font-weight: 600">Pricing research</span><span style="margin-left: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 0 6px; border-radius: 4px; border: 1px solid #1b2c44; color: #6b7d94">Esc</span><span style="font-size: 11px; color: #6b7d94">goes up</span></div>
116
+ <div style="position: absolute; left: 24px; top: 52px; width: 596px; height: 300px; box-sizing: border-box; border-radius: 14px; border: 1.5px dashed rgba(75,188,255,0.35); background: rgba(75,188,255,0.03)"></div>
117
+ <span style="position: absolute; left: 40px; top: 42px; height: 20px; padding: 0 9px; border-radius: 999px; background: #0f1d31; border: 1px solid rgba(75,188,255,0.35); font-size: 11px; font-weight: 600; line-height: 18px">Inside Pricing research</span>
118
+ <svg width="644" height="560" viewBox="0 0 644 560" style="position: absolute; left: 0; top: 0; fill: none; stroke-linecap: round; stroke-linejoin: round">
119
+ <path d="M 236 150 L 308 150" style="stroke: #7C9CFF; stroke-width: 2"></path><path d="M 312 150 L 303 145.5 L 303 154.5 Z" style="fill: #7C9CFF"></path>
120
+ <path d="M 400 186 L 400 228" style="stroke: #D5DEEA; stroke-width: 2"></path><path d="M 400 232 L 395.5 223 L 404.5 223 Z" style="fill: #D5DEEA"></path>
121
+ <path d="M 140 186 C 140 300, 120 340, 120 420" style="stroke: #5FCFC0; stroke-width: 2"></path><path d="M 120 424 L 115.5 415 L 124.5 415 Z" style="fill: #5FCFC0"></path>
122
+ <path d="M 450 306 C 450 372, 330 360, 330 420" style="stroke: #7C9CFF; stroke-width: 2"></path><path d="M 330 424 L 325.5 415 L 334.5 415 Z" style="fill: #7C9CFF"></path>
123
+ <path d="M 540 424 C 540 360, 560 330, 560 186" style="stroke: #E59B6B; stroke-width: 2"></path><path d="M 560 182 L 555.5 191 L 564.5 191 Z" style="fill: #E59B6B"></path>
124
+ </svg>
125
+ <div style="{{c.card}} left: 48px; top: 114px; width: 188px">Competitor pricing<span style="{{c.meta}}">webpage · 4 rivals</span></div>
126
+ <div style="{{c.card}} left: 312px; top: 114px; width: 176px">Price tiers<span style="{{c.meta}}">table · from the pages</span></div>
127
+ <div style="{{c.card}} left: 312px; top: 234px; width: 176px">Tier comparison<span style="{{c.meta}}">chart</span></div>
128
+ <div style="{{c.card}} left: 512px; top: 114px; width: 92px">Notes<span style="{{c.meta}}">markdown</span></div>
129
+ <span style="position: absolute; left: 24px; top: 392px; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Outside</span>
130
+ <div style="{{c.ghost}} left: 40px; top: 426px">Raise Pro to $24?<span style="{{c.meta}}">question · ① Question</span></div>
131
+ <div style="{{c.ghost}} left: 250px; top: 426px">Decision memo<span style="{{c.meta}}">markdown · ④ Decision</span></div>
132
+ <div style="{{c.ghost}} left: 460px; top: 426px">SMB interviews<span style="{{c.meta}}">notes · ② Evidence</span></div>
133
+ </div>
134
+ <span style="font-size: 12px; color: #8ea3bd">Opening a group keeps its outside links: the question it supports, the memo that cites it, the interview notes that push back.</span>
135
+ </div>
136
+
137
+ </section>
138
+
139
+ </div>
140
+ </x-dc>
141
+ <script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1280}}'>
142
+ class Component extends DCLogic {
143
+ renderVals() {
144
+ var c = {
145
+ step: 'position:absolute;top:80px;width:128px;height:110px;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);display:flex;flex-direction:column;',
146
+ head: 'display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-bottom:1px solid #1b2c44;',
147
+ ic: 'flex-shrink:0;color:#8ea3bd;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;',
148
+ title: 'font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;',
149
+ body: 'padding:6px 10px;font-size:11px;line-height:1.45;color:#b9c6d6;flex:1;',
150
+ chip: 'font-size:11px;line-height:18px;padding:0 7px;border-radius:999px;font-weight:500;',
151
+ btn: 'height:24px;padding:0 9px;border-radius:6px;border:1px solid #2a4566;background:#13243b;color:#e6eef7;font-family:inherit;font-size:11px;font-weight:500;',
152
+ sec: 'font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:#6b7d94;margin-bottom:4px;',
153
+ rel: 'padding:7px 0;border-bottom:1px solid #1b2c44;display:flex;flex-direction:column;gap:2px;',
154
+ card: 'position:absolute;height:72px;box-sizing:border-box;padding:10px 12px;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);font-size:12px;font-weight:600;display:flex;flex-direction:column;gap:2px;',
155
+ ghost: 'position:absolute;width:170px;height:60px;box-sizing:border-box;padding:9px 12px;border-radius:10px;border:1.5px dashed #2a4566;background:rgba(15,29,49,0.5);font-size:12px;font-weight:600;color:#b9c6d6;display:flex;flex-direction:column;gap:2px;',
156
+ meta: 'font-size:11px;font-weight:400;color:#6b7d94;'
157
+ };
158
+ var oldSteps = [
159
+ { x: 20, title: 'churn-raw.csv', body: '14,212 rows', glyph: '▯', ic: '#4BBCFF' },
160
+ { x: 176, title: 'churn-clean.csv', body: 'Trials and test accounts removed', glyph: '▯', ic: '#4BBCFF' },
161
+ { x: 332, title: 'Churn by plan', body: 'bar · monthly, by plan', glyph: '▥', ic: '#b07aff' },
162
+ { x: 488, title: 'Churn flat after raise', body: 'Pro churn 2.1% → 2.2% after the 2024 raise.', glyph: '▤', ic: '#4BBCFF' }
163
+ ];
164
+ var groups = [
165
+ { name: 'Evidence for · 2', items: [
166
+ { type: 'cites', c: '#7C9CFF', target: 'Churn by plan', why: 'Pro churn 2.1% before vs 2.2% after.' },
167
+ { type: 'supports', c: '#5FCFC0', target: 'Competitor pricing', why: 'Rivals charge $25–29 for the same tier.' }
168
+ ] },
169
+ { name: 'Evidence against · 1', items: [
170
+ { type: 'contradicts', c: '#E59B6B', target: 'SMB is price-sensitive', why: 'SMB churn rose 0.6 pts after the raise.' }
171
+ ] },
172
+ { name: 'Used by · 1', items: [
173
+ { type: 'supports', c: '#5FCFC0', target: 'Raise Pro to $24?', why: 'The last raise did not move churn.' }
174
+ ] }
175
+ ];
176
+ return { c: c, oldSteps: oldSteps, groups: groups };
177
+ }
178
+ }
179
+ </script>
180
+ </body>
181
+ </html>
package/docs/design/Home.dc.html ADDED
@@ -0,0 +1,209 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Home — library</title>
6
+ <script src="./support.js"></script>
7
+ </head>
8
+ <body>
9
+ <x-dc>
10
+ <helmet>
11
+ <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">
12
+ <style>
13
+ body{margin:0}
14
+ </style>
15
+ </helmet>
16
+ <div style="position: relative; width: 1440px; height: 960px; overflow: hidden; background: #081524; color: #e6eef7; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.5">
17
+
18
+ <nav aria-label="Navigation" style="position: absolute; left: 0; top: 0; width: 52px; height: 960px; box-sizing: border-box; padding: 8px 0; background: #0f1d31; border-right: 1px solid #1b2c44; display: flex; flex-direction: column; align-items: center; gap: 4px">
19
+ <button aria-label="Home" style="width: 36px; height: 36px; border: 0; border-radius: 6px; padding: 0; background: rgba(75,188,255,0.14); color: #4BBCFF; display: flex; align-items: center; justify-content: center"><svg width="20" height="20" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.6"><rect x="4" y="4" width="16" height="16" rx="4"></rect><rect x="9" y="9" width="6" height="6" rx="1.5"></rect></svg></button>
20
+ <div style="flex: 1"></div>
21
+ <button aria-label="Settings" style="width: 36px; height: 36px; border: 0; border-radius: 6px; 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"><path d="M4 7h9M17 7h3M4 17h3M11 17h9"></path><circle cx="15" cy="7" r="2"></circle><circle cx="9" cy="17" r="2"></circle></svg></button>
22
+ </nav>
23
+
24
+ <aside aria-label="Library" style="position: absolute; left: 52px; top: 0; width: 256px; height: 960px; box-sizing: border-box; padding: 16px 12px; background: #0b1828; border-right: 1px solid #1b2c44; display: flex; flex-direction: column; gap: 16px">
25
+ <div style="display: flex; align-items: center; justify-content: space-between; padding: 0 4px"><span style="font-size: 15px; font-weight: 600">Library</span><span style="font-size: 11px; color: #6b7d94">24 boards</span></div>
26
+ <label style="display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 6px; border: 1px solid #1b2c44; background: #0f1d31; color: #8ea3bd">
27
+ <svg width="14" height="14" viewBox="0 0 24 24" style="flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round"><circle cx="11" cy="11" r="6"></circle><path d="M20 20l-4.6-4.6"></path></svg>
28
+ <span style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0)">Find boards, cards and folders</span>
29
+ <input type="search" placeholder="Boards, cards, folders…" style="flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #e6eef7; font-family: inherit; font-size: 12px">
30
+ <span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #6b7d94">⌘K</span>
31
+ </label>
32
+
33
+ <div style="display: flex; flex-direction: column; gap: 2px">
34
+ <span style="{{s.sec}}">Pinned boards</span>
35
+ <sc-for list="{{brief}}" as="b" hint-placeholder-count="3">
36
+ <button style="{{s.row}}"><span style="width: 16px; height: 16px; border-radius: 999px; background: #4BBCFF; color: #081524; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></span><span style="{{s.name}}">{{b.name}}</span><span style="{{s.count}}">{{b.where}}</span></button>
37
+ </sc-for>
38
+ <span style="font-size: 11px; color: #6b7d94; padding: 2px 8px 0 32px">≈ 21k tokens · 3 boards</span>
39
+ </div>
40
+
41
+ <div style="display: flex; flex-direction: column; gap: 2px; flex: 1">
42
+ <span style="{{s.sec}}">Folders</span>
43
+ <sc-for list="{{tree}}" as="f" hint-placeholder-count="9">
44
+ <button style="{{f.style}}">
45
+ <span style="width: {{f.indent}}px; flex-shrink: 0"></span>
46
+ <svg width="12" height="12" viewBox="0 0 24 24" style="flex-shrink: 0; color: #6b7d94; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate({{f.rot}}deg); opacity: {{f.chev}}"><path d="M9 6l6 6-6 6"></path></svg>
47
+ <span style="width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; background: {{f.hue}}; border: {{f.hueBorder}}"></span>
48
+ <span style="{{s.name}} color: {{f.color}}">{{f.name}}</span>
49
+ <sc-if value="{{f.pinned}}" hint-placeholder-val="{{ false }}"><span style="width: 6px; height: 6px; border-radius: 999px; background: #4BBCFF; flex-shrink: 0"></span></sc-if>
50
+ <span style="{{s.count}}">{{f.n}}</span>
51
+ </button>
52
+ </sc-for>
53
+ <button style="{{s.row}} color: #8ea3bd; margin-top: 4px"><span style="width: 16px; text-align: center">+</span><span style="{{s.name}} color: #8ea3bd">New folder</span></button>
54
+ </div>
55
+ </aside>
56
+
57
+ <main style="position: absolute; left: 294px; top: 27px; width: 852px; height: 960px; box-sizing: border-box; padding: 24px 32px; display: flex; flex-direction: column; gap: 20px; overflow: hidden">
58
+
59
+ <div style="display: flex; align-items: flex-start; gap: 16px">
60
+ <div style="flex: 1">
61
+ <div style="font-size: 12px; color: #6b7d94">Library <span style="color: #3d5170">/</span> <span style="color: #b9c6d6">Tech Enabling</span></div>
62
+ <h1 style="margin: 2px 0 0; font-size: 20px; line-height: 28px; font-weight: 600; display: flex; align-items: center; gap: 10px"><span style="width: 10px; height: 10px; border-radius: 3px; background: #5FCFC0"></span>Tech Enabling</h1>
63
+ <p style="margin: 4px 0 0; font-size: 13px; color: #b9c6d6">Developer platform area: OKRs, delivery metrics and product discovery. <span style="color: #6b7d94">From the folder's README board.</span></p>
64
+ </div>
65
+ <div role="tablist" aria-label="View" style="display: flex; padding: 2px; border-radius: 8px; border: 1px solid #1b2c44; background: #0f1d31">
66
+ <button role="tab" aria-selected="true" style="height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: #1b2c44; color: #e6eef7; font-family: inherit; font-size: 12px; font-weight: 500">Folders</button>
67
+ <button role="tab" aria-selected="false" style="height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: #8ea3bd; font-family: inherit; font-size: 12px; font-weight: 500">Map</button>
68
+ <button role="tab" aria-selected="false" style="height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: #8ea3bd; font-family: inherit; font-size: 12px; font-weight: 500">Graph</button>
69
+ </div>
70
+ <button style="height: 32px; padding: 0 14px; border: 0; border-radius: 6px; background: #4BBCFF; color: #081524; font-family: inherit; font-size: 12px; font-weight: 600">New board here</button>
71
+ </div>
72
+
73
+ <div style="display: flex; flex-direction: column; gap: 10px">
74
+ <span style="{{s.sec}} padding: 0">Folders · 3</span>
75
+ <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px">
76
+ <sc-for list="{{subfolders}}" as="sf" hint-placeholder-count="3">
77
+ <button style="position: relative; height: 112px; box-sizing: border-box; padding: 14px; border-radius: 10px; border: 1px solid #1b2c44; background: #0f1d31; color: #e6eef7; font-family: inherit; text-align: left; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; overflow: hidden">
78
+ <span style="position: absolute; left: 14px; top: 14px; width: 56px; height: 36px; border-radius: 4px; background: #13243b; border: 1px solid #2a4566"></span>
79
+ <span style="position: absolute; left: 22px; top: 20px; width: 56px; height: 36px; border-radius: 4px; background: #13243b; border: 1px solid #2a4566"></span>
80
+ <span style="position: absolute; left: 30px; top: 26px; width: 56px; height: 36px; border-radius: 4px; background: #13243b; border: 1px solid #3d5170"></span>
81
+ <sc-if value="{{sf.inBrief}}" hint-placeholder-val="{{ false }}"><span style="position: absolute; right: 12px; top: 12px; height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(75,188,255,0.12); color: #4BBCFF; font-size: 11px; font-weight: 500; line-height: 20px">{{sf.inBrief}}</span></sc-if>
82
+ <span style="font-size: 13px; font-weight: 600">{{sf.name}}</span>
83
+ <span style="font-size: 11px; color: #8ea3bd">{{sf.meta}}</span>
84
+ </button>
85
+ </sc-for>
86
+ </div>
87
+ </div>
88
+
89
+ <div style="display: flex; flex-direction: column; gap: 10px">
90
+ <span style="{{s.sec}} padding: 0">Boards in Tech Enabling · 3</span>
91
+ <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px">
92
+ <sc-for list="{{boards}}" as="bd" hint-placeholder-count="3">
93
+ <article style="border-radius: 10px; border: {{bd.border}}; background: #0f1d31; box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 6px 20px rgba(0,0,0,0.24); overflow: hidden; opacity: {{bd.o}}">
94
+ <div style="position: relative; height: 128px; border-bottom: 1px solid #1b2c44; background-color: #081524; background-image: radial-gradient(rgba(142,163,189,0.14) 1px, transparent 1.2px); background-size: 12px 12px">
95
+ <sc-for list="{{bd.rects}}" as="r" hint-placeholder-count="6">
96
+ <div style="position: absolute; left: {{r.x}}px; top: {{r.y}}px; width: {{r.w}}px; height: {{r.h}}px; box-sizing: border-box; border-radius: 3px; background: #13243b; border: 1px solid {{r.line}}"></div>
97
+ </sc-for>
98
+ <sc-if value="{{bd.unpinned}}" hint-placeholder-val="{{ false }}"><button aria-label="Pin board to the agent's context" style="position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; box-sizing: border-box; border-radius: 999px; border: 1.5px solid #6b7d94; background: #0f1d31; color: #b9c6d6; padding: 0; display: flex; align-items: center; justify-content: center"><svg width="11" height="11" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></button></sc-if><sc-if value="{{bd.pin}}" hint-placeholder-val="{{ false }}"><span style="position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; border-radius: 999px; background: #4BBCFF; color: #081524; display: flex; align-items: center; justify-content: center"><svg width="11" height="11" 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></sc-if>
99
+ </div>
100
+ <div style="padding: 12px 14px; display: flex; flex-direction: column; gap: 6px">
101
+ <div style="font-size: 13px; font-weight: 600">{{bd.name}}</div>
102
+ <div style="font-size: 11px; line-height: 1.5; color: #b9c6d6; height: 33px; overflow: hidden">{{bd.readme}}</div>
103
+ <div style="display: flex; gap: 10px; font-size: 11px; color: #6b7d94"><span>{{bd.cards}}</span><span>{{bd.links}}</span><span style="margin-left: auto">{{bd.when}}</span></div>
104
+ </div>
105
+ </article>
106
+ </sc-for>
107
+ </div>
108
+ </div>
109
+
110
+ </main>
111
+
112
+ <aside aria-label="Board details" style="position: absolute; left: 1160px; top: 0; width: 280px; height: 960px; box-sizing: border-box; padding: 20px 18px; background: #0b1828; border-left: 1px solid #1b2c44; display: flex; flex-direction: column; gap: 16px">
113
+ <div style="display: flex; flex-direction: column; gap: 2px">
114
+ <span style="font-size: 11px; color: #6b7d94">Tech Enabling</span>
115
+ <span style="font-size: 15px; font-weight: 600">Tech Enabling — overview</span>
116
+ </div>
117
+ <div style="display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(75,188,255,0.3); background: rgba(75,188,255,0.08)">
118
+ <span style="display: flex; flex-direction: column"><span style="font-size: 12px; font-weight: 600; color: #4BBCFF">In the agent's context</span><span style="font-size: 11px; color: #8ea3bd">README + 2 pinned cards · ≈ 6k tokens</span></span>
119
+ <span role="switch" aria-checked="true" aria-label="In the agent's context" style="width: 32px; height: 18px; border-radius: 999px; background: #4BBCFF; position: relative; flex-shrink: 0"><span style="position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 999px; background: #081524"></span></span>
120
+ </div>
121
+ <div style="display: flex; flex-direction: column; gap: 4px">
122
+ <span style="{{s.sec}} padding: 0">README</span>
123
+ <p style="margin: 0; font-size: 12px; line-height: 1.6; color: #b9c6d6">Who we are, what we own and the three outcomes for 2027. Start here; the OKR and metrics boards hang off it.</p>
124
+ </div>
125
+ <div style="display: flex; flex-direction: column; gap: 4px">
126
+ <span style="{{s.sec}} padding: 0">Pinned cards · 2</span>
127
+ <sc-for list="{{pinnedCards}}" as="pc" hint-placeholder-count="2">
128
+ <div style="display: flex; align-items: center; gap: 8px; height: 28px; font-size: 12px"><span style="width: 3px; height: 16px; border-radius: 2px; background: #4BBCFF"></span>{{pc}}</div>
129
+ </sc-for>
130
+ </div>
131
+ <div style="display: flex; flex-direction: column; gap: 4px">
132
+ <span style="{{s.sec}} padding: 0">Links · 4</span>
133
+ <sc-for list="{{links}}" as="lk" hint-placeholder-count="4">
134
+ <div style="display: flex; align-items: center; gap: 8px; height: 28px; font-size: 12px"><span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #6b7d94; width: 14px">{{lk.dir}}</span><span style="flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{lk.name}}</span><span style="font-size: 11px; color: #6b7d94">{{lk.kind}}</span></div>
135
+ </sc-for>
136
+ </div>
137
+ <div style="margin-top: auto; display: flex; gap: 8px">
138
+ <button style="flex: 1; height: 34px; border: 0; border-radius: 6px; background: #4BBCFF; color: #081524; font-family: inherit; font-size: 12px; font-weight: 600">Open board</button>
139
+ <button aria-label="More: move, rename, create from, delete" style="width: 34px; height: 34px; border-radius: 6px; border: 1px solid #1b2c44; background: #13243b; color: #e6eef7; display: flex; align-items: center; justify-content: center; padding: 0"><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>
140
+ </div>
141
+ </aside>
142
+
143
+ </div>
144
+ </x-dc>
145
+ <script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":960}}'>
146
+ class Component extends DCLogic {
147
+ renderVals() {
148
+ var rowBase = 'display:flex;align-items:center;gap:8px;height:30px;padding:0 8px;border:0;border-radius:6px;font-family:inherit;text-align:left;';
149
+ var s = {
150
+ sec: 'font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:#6b7d94;padding:0 8px 4px;',
151
+ row: rowBase + 'background:transparent;color:#e6eef7;',
152
+ name: 'flex:1;min-width:0;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;',
153
+ count: 'font-size:11px;color:#6b7d94;font-variant-numeric:tabular-nums;'
154
+ };
155
+ var HUE = { te: '#5FCFC0', re: '#7C9CFF', ws: '#E58FB0' };
156
+ function f(name, n, depth, hue, opts) {
157
+ opts = opts || {};
158
+ return {
159
+ name: name, n: n, indent: depth * 16, hue: opts.unfiled ? 'transparent' : hue,
160
+ hueBorder: opts.unfiled ? '1px dashed #6b7d94' : '0',
161
+ rot: opts.open ? 90 : 0, chev: opts.leaf ? 0 : 1, pinned: !!opts.pinned,
162
+ color: opts.unfiled ? '#8ea3bd' : '#e6eef7',
163
+ style: rowBase + (opts.selected ? 'background:#13243b;color:#e6eef7;' : 'background:transparent;color:#e6eef7;')
164
+ };
165
+ }
166
+ var tree = [
167
+ f('Tech Enabling', 12, 0, HUE.te, { open: true, selected: true, pinned: true }),
168
+ f('OKRs', 3, 1, HUE.te, { pinned: true }),
169
+ f('Delivery metrics', 4, 1, HUE.te),
170
+ f('Product discovery', 2, 1, HUE.te),
171
+ f('Research', 7, 0, HUE.re, { open: true, pinned: true }),
172
+ f('Pricing', 3, 1, HUE.re, { pinned: true }),
173
+ f('Competitors', 4, 1, HUE.re),
174
+ f('Workshops', 2, 0, HUE.ws),
175
+ f('Unfiled', 3, 0, '', { unfiled: true, leaf: true })
176
+ ];
177
+ var brief = [
178
+ { name: 'Tech Enabling — overview', where: 'TE' },
179
+ { name: 'C4 2026 OKR planning', where: 'OKRs' },
180
+ { name: 'Pricing research', where: 'Pricing' }
181
+ ];
182
+ var subfolders = [
183
+ { name: 'OKRs', meta: '3 boards · updated yesterday', inBrief: '1 in context' },
184
+ { name: 'Delivery metrics', meta: '4 boards · updated 3d ago', inBrief: '' },
185
+ { name: 'Product discovery', meta: '2 boards · updated 41d ago', inBrief: '' }
186
+ ];
187
+ var line = '#1b2c44', pin = '#4BBCFF';
188
+ function rect(x, y, w, h, l) { return { x: x, y: y, w: w, h: h, line: l || line }; }
189
+ var boards = [
190
+ { name: 'Tech Enabling — overview', pin: true, unpinned: false, readme: 'Who we are, what we own and the three outcomes for 2027.', cards: '18 cards', links: '↔ 4 links', when: 'today', o: 1, border: '1.5px solid #4BBCFF',
191
+ rects: [rect(16, 14, 110, 12), rect(16, 34, 60, 40, pin), rect(84, 34, 42, 40, pin), rect(134, 14, 100, 60), rect(16, 82, 218, 30)] },
192
+ { name: 'Platform roadmap 2027', pin: false, unpinned: true, readme: 'Quarterly themes, bets and the dependencies between teams.', cards: '26 cards', links: '↔ 2 links', when: '4d ago', o: 1, border: '1px solid #1b2c44',
193
+ rects: [rect(16, 16, 50, 30), rect(74, 16, 50, 30), rect(132, 16, 50, 30), rect(190, 16, 44, 30), rect(16, 56, 218, 20), rect(16, 84, 140, 28)] },
194
+ { name: 'Q3 risks and dependencies', pin: false, unpinned: true, readme: 'Retired risks from Q3. Kept for the record.', cards: '9 cards', links: '↔ 1 link', when: '74d ago', o: 0.6, border: '1px solid #1b2c44',
195
+ rects: [rect(30, 20, 60, 40), rect(120, 30, 60, 40), rect(60, 76, 60, 34), rect(170, 80, 50, 30)] }
196
+ ];
197
+ var pinnedCards = ['Team charter', '2027 outcomes'];
198
+ var links = [
199
+ { dir: '→', name: 'C4 2026 OKR planning', kind: 'portal' },
200
+ { dir: '→', name: 'Delivery metrics', kind: 'portal' },
201
+ { dir: '←', name: 'Home', kind: 'portal' },
202
+ { dir: '←', name: 'Working with agents (deck)', kind: 'wiki link' }
203
+ ];
204
+ return { s: s, tree: tree, brief: brief, subfolders: subfolders, boards: boards, pinnedCards: pinnedCards, links: links };
205
+ }
206
+ }
207
+ </script>
208
+ </body>
209
+ </html>