pmx-canvas 0.7.2 → 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 (251) 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 +60 -0
  10. package/Readme.md +44 -16
  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 +844 -710
  23. package/dist/canvas/index.js +92 -90
  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/json-render/index.js +55 -55
  29. package/dist/types/cli/commands/record.d.ts +1 -1
  30. package/dist/types/client/canvas/ChoiceMenu.d.ts +13 -0
  31. package/dist/types/client/canvas/NodeContextMark.d.ts +24 -0
  32. package/dist/types/client/canvas/SessionReceipt.d.ts +3 -1
  33. package/dist/types/client/icons.d.ts +1 -2
  34. package/dist/types/client/mcp-app/index.d.ts +1 -0
  35. package/dist/types/client/nodes/McpAppNode.d.ts +2 -1
  36. package/dist/types/client/nodes/ax-node-actions.d.ts +2 -2
  37. package/dist/types/client/nodes/markdown-sanitize.d.ts +2 -0
  38. package/dist/types/client/nodes/use-workbench-asset.d.ts +2 -0
  39. package/dist/types/client/nodes/viewer-runtime-state.d.ts +1 -0
  40. package/dist/types/client/state/attention-store.d.ts +0 -5
  41. package/dist/types/client/state/canvas-store.d.ts +2 -0
  42. package/dist/types/client/state/context-status-store.d.ts +53 -0
  43. package/dist/types/client/state/intent-bridge.d.ts +4 -1
  44. package/dist/types/client/state/near-pin-store.d.ts +16 -0
  45. package/dist/types/client/state/presence-store.d.ts +5 -0
  46. package/dist/types/client/state/session-store.d.ts +33 -3
  47. package/dist/types/client/state/workbench-transport.d.ts +16 -0
  48. package/dist/types/client/theme/tokens.d.ts +1 -3
  49. package/dist/types/client/types.d.ts +9 -0
  50. package/dist/types/json-render/renderer/index.d.ts +2 -1
  51. package/dist/types/json-render/server.d.ts +3 -1
  52. package/dist/types/mcp/app-server.d.ts +3 -0
  53. package/dist/types/mcp/canvas-access.d.ts +1 -1
  54. package/dist/types/mcp/canvas-app.d.ts +4 -0
  55. package/dist/types/mcp/workbench-app.d.ts +4 -0
  56. package/dist/types/server/agent-presence.d.ts +1 -1
  57. package/dist/types/server/ax-state.d.ts +1 -1
  58. package/dist/types/server/canvas-db.d.ts +8 -0
  59. package/dist/types/server/canvas-geometry.d.ts +25 -0
  60. package/dist/types/server/canvas-operations.d.ts +1 -11
  61. package/dist/types/server/canvas-state.d.ts +25 -3
  62. package/dist/types/server/context-brief.d.ts +8 -1
  63. package/dist/types/server/context-reads.d.ts +30 -7
  64. package/dist/types/server/index.d.ts +6 -1
  65. package/dist/types/server/mcp-app-runtime.d.ts +1 -0
  66. package/dist/types/server/operations/http.d.ts +2 -0
  67. package/dist/types/server/operations/invoker.d.ts +4 -2
  68. package/dist/types/server/operations/ops/nodes.d.ts +0 -6
  69. package/dist/types/server/server.d.ts +1 -0
  70. package/dist/types/server/spatial-analysis.d.ts +2 -0
  71. package/dist/types/shared/agent-context.d.ts +22 -0
  72. package/dist/types/shared/agent-presence.d.ts +3 -10
  73. package/dist/types/shared/ax-surface-protocol.d.ts +2 -0
  74. package/dist/types/shared/canvas-app.d.ts +54 -0
  75. package/dist/types/shared/themes.d.ts +1 -1
  76. package/docs/RELEASE.md +7 -3
  77. package/docs/agent-plugin.md +123 -0
  78. package/docs/ax-host-adapter-contract.md +13 -2
  79. package/docs/ax-state-contract.md +40 -0
  80. package/docs/cli.md +7 -2
  81. package/docs/design/AgentContext.dc.html +186 -0
  82. package/docs/design/Before.dc.html +208 -0
  83. package/docs/design/BoardPins.dc.html +151 -0
  84. package/docs/design/Chrome.dc.html +208 -0
  85. package/docs/design/Context.dc.html +239 -0
  86. package/docs/design/Flows.dc.html +181 -0
  87. package/docs/design/Home.dc.html +209 -0
  88. package/docs/design/HomeGraph.dc.html +211 -0
  89. package/docs/design/HomeMap.dc.html +117 -0
  90. package/docs/design/HomeTeam.dc.html +176 -0
  91. package/docs/design/Light.dc.html +28 -0
  92. package/docs/design/Main.dc.html +280 -0
  93. package/docs/design/NearPin.dc.html +260 -0
  94. package/docs/design/Pane600.dc.html +120 -0
  95. package/docs/design/Relations.dc.html +297 -0
  96. package/docs/design/Themes.dc.html +121 -0
  97. package/docs/design/TokenSystem.dc.html +136 -0
  98. package/docs/design/Tokens.dc.html +163 -0
  99. package/docs/design/Types1.dc.html +177 -0
  100. package/docs/design/Types2.dc.html +226 -0
  101. package/docs/design/Types3.dc.html +195 -0
  102. package/docs/design/Uses.dc.html +152 -0
  103. package/docs/design/Vision.dc.html +116 -0
  104. package/docs/design/Zoom.dc.html +82 -0
  105. package/docs/design/canvas.json +274 -0
  106. package/docs/design.md +214 -0
  107. package/docs/environment.md +1 -1
  108. package/docs/http-api.md +80 -15
  109. package/docs/mcp.md +198 -3
  110. package/docs/node-types.md +34 -10
  111. package/docs/plans/plan-009-tech-debt-backlog.md +1 -1
  112. package/docs/plans/plan-015-design-foundation-wave-0.md +177 -0
  113. package/docs/plans/plan-016-context-made-visible-wave-1.md +148 -0
  114. package/docs/product-vision-2026-09.md +47 -7
  115. package/docs/screenshot.png +0 -0
  116. package/docs/sdk.md +1 -0
  117. package/package.json +10 -4
  118. package/plugins/pmx-canvas/LICENSE +21 -0
  119. package/plugins/pmx-canvas/THIRD_PARTY_LICENSES.txt +331 -0
  120. package/plugins/pmx-canvas/assets/preview.png +0 -0
  121. package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/extension.mjs +930 -0
  122. package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/runtime.json +3 -0
  123. package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/runtime.mjs +194 -0
  124. package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/steering-delivery.mjs +79 -0
  125. package/plugins/pmx-canvas/mcp.json +12 -0
  126. package/plugins/pmx-canvas/plugin.json +24 -0
  127. package/plugins/pmx-canvas/runtime.json +3 -0
  128. package/plugins/pmx-canvas/runtime.mjs +194 -0
  129. package/plugins/pmx-canvas/start-mcp.mjs +51 -0
  130. package/plugins/pmx-canvas/tools.json +2560 -0
  131. package/skills/pmx-canvas/SKILL.md +31 -16
  132. package/skills/pmx-canvas/evals/evals.json +69 -0
  133. package/skills/pmx-canvas/references/full-reference.md +14 -10
  134. package/skills/pmx-canvas/references/github-copilot-app-adapter.md +20 -8
  135. package/skills/pmx-canvas/references/installing-pmx-canvas.md +76 -4
  136. package/skills/pmx-canvas-testing/SKILL.md +54 -4
  137. package/src/cli/commands/copilot.ts +5 -0
  138. package/src/cli/commands/view.ts +1 -1
  139. package/src/cli/index.ts +8 -3
  140. package/src/client/App.tsx +6 -1
  141. package/src/client/canvas/AgentPresenceLayer.tsx +3 -3
  142. package/src/client/canvas/AnnotationLayer.tsx +1 -1
  143. package/src/client/canvas/CanvasNode.tsx +208 -220
  144. package/src/client/canvas/CanvasViewport.tsx +6 -2
  145. package/src/client/canvas/ChoiceMenu.tsx +122 -0
  146. package/src/client/canvas/CommandBar.tsx +25 -23
  147. package/src/client/canvas/CommandPalette.tsx +3 -2
  148. package/src/client/canvas/ContextMenu.tsx +11 -0
  149. package/src/client/canvas/EdgeLayer.tsx +1 -1
  150. package/src/client/canvas/ExportDialog.tsx +33 -6
  151. package/src/client/canvas/FeedbackDialog.tsx +10 -8
  152. package/src/client/canvas/IntentLayer.tsx +2 -2
  153. package/src/client/canvas/Minimap.tsx +12 -7
  154. package/src/client/canvas/NodeContextMark.tsx +156 -0
  155. package/src/client/canvas/SessionPanel.tsx +4 -7
  156. package/src/client/canvas/SessionReceipt.tsx +114 -17
  157. package/src/client/canvas/ShortcutOverlay.tsx +6 -1
  158. package/src/client/canvas/SnapshotPanel.tsx +11 -2
  159. package/src/client/canvas/ToolRail.tsx +58 -108
  160. package/src/client/canvas/TopBar.tsx +16 -11
  161. package/src/client/icons.tsx +2 -12
  162. package/src/client/mcp-app/index.tsx +137 -0
  163. package/src/client/mcp-app/style.css +10 -0
  164. package/src/client/nodes/AttachmentNode.tsx +8 -1
  165. package/src/client/nodes/AxStepControls.tsx +1 -1
  166. package/src/client/nodes/ContextNode.tsx +9 -9
  167. package/src/client/nodes/ExtAppFrame.tsx +13 -8
  168. package/src/client/nodes/FileNode.tsx +8 -5
  169. package/src/client/nodes/ImageNode.tsx +4 -2
  170. package/src/client/nodes/InlineMarkdownEditor.tsx +2 -1
  171. package/src/client/nodes/LedgerNode.tsx +2 -2
  172. package/src/client/nodes/MarkdownNode.tsx +44 -9
  173. package/src/client/nodes/McpAppNode.tsx +22 -4
  174. package/src/client/nodes/PromptNode.tsx +5 -17
  175. package/src/client/nodes/ResponseNode.tsx +3 -15
  176. package/src/client/nodes/StatusNode.tsx +2 -2
  177. package/src/client/nodes/StatusSummary.tsx +3 -1
  178. package/src/client/nodes/TraceNode.tsx +6 -4
  179. package/src/client/nodes/WebpageNode.tsx +1 -1
  180. package/src/client/nodes/ax-node-actions.ts +2 -2
  181. package/src/client/nodes/iframe-document-url.ts +3 -2
  182. package/src/client/nodes/markdown-sanitize.ts +10 -0
  183. package/src/client/nodes/surface-url.ts +10 -0
  184. package/src/client/nodes/use-ax-surface-bridge.ts +4 -2
  185. package/src/client/nodes/use-surface-frame.ts +3 -1
  186. package/src/client/nodes/use-workbench-asset.ts +26 -0
  187. package/src/client/nodes/viewer-runtime-state.ts +78 -0
  188. package/src/client/state/attention-bridge.ts +0 -8
  189. package/src/client/state/attention-store.ts +0 -17
  190. package/src/client/state/canvas-store.ts +7 -2
  191. package/src/client/state/context-status-store.ts +66 -0
  192. package/src/client/state/human-store.ts +2 -0
  193. package/src/client/state/iframe-mode.ts +5 -0
  194. package/src/client/state/intent-bridge.ts +24 -6
  195. package/src/client/state/near-pin-store.ts +53 -0
  196. package/src/client/state/presence-store.ts +5 -10
  197. package/src/client/state/session-store.ts +106 -9
  198. package/src/client/state/sse-bridge.ts +26 -7
  199. package/src/client/state/theme-override.ts +1 -1
  200. package/src/client/state/workbench-transport.ts +36 -0
  201. package/src/client/theme/global.css +844 -710
  202. package/src/client/theme/surface-theme.css +151 -46
  203. package/src/client/theme/tokens.ts +7 -11
  204. package/src/client/types.ts +10 -0
  205. package/src/json-render/renderer/index.tsx +58 -38
  206. package/src/json-render/server.ts +79 -15
  207. package/src/mcp/app-server.ts +64 -0
  208. package/src/mcp/canvas-access.ts +14 -11
  209. package/src/mcp/canvas-app.ts +318 -0
  210. package/src/mcp/server.ts +1 -1
  211. package/src/mcp/workbench-app.ts +211 -0
  212. package/src/server/agent-presence.ts +45 -6
  213. package/src/server/ax-context.ts +1 -1
  214. package/src/server/ax-state.ts +1 -1
  215. package/src/server/board-export.ts +5 -2
  216. package/src/server/canvas-db.ts +46 -12
  217. package/src/server/canvas-geometry.ts +64 -0
  218. package/src/server/canvas-operations.ts +6 -24
  219. package/src/server/canvas-state.ts +105 -15
  220. package/src/server/canvas-validation.ts +19 -4
  221. package/src/server/context-brief.ts +39 -2
  222. package/src/server/context-reads.ts +86 -15
  223. package/src/server/demo-state.json +31 -31
  224. package/src/server/html-surface.ts +4 -5
  225. package/src/server/index.ts +19 -3
  226. package/src/server/mcp-app-runtime.ts +11 -0
  227. package/src/server/operations/composites.ts +4 -3
  228. package/src/server/operations/http.ts +4 -4
  229. package/src/server/operations/invoker.ts +13 -4
  230. package/src/server/operations/ops/ax-read.ts +1 -1
  231. package/src/server/operations/ops/ax-timeline.ts +37 -0
  232. package/src/server/operations/ops/boards.ts +1 -1
  233. package/src/server/operations/ops/canvas-wire.ts +3 -6
  234. package/src/server/operations/ops/intent.ts +31 -2
  235. package/src/server/operations/ops/json-render.ts +1 -1
  236. package/src/server/operations/ops/nodes.ts +8 -76
  237. package/src/server/operations/ops/query.ts +8 -2
  238. package/src/server/operations/ops/snapshots.ts +4 -1
  239. package/src/server/operations/ops/viewport.ts +29 -5
  240. package/src/server/operations/registry.ts +38 -4
  241. package/src/server/scope-fence.ts +55 -10
  242. package/src/server/server.ts +86 -6
  243. package/src/server/spatial-analysis.ts +2 -2
  244. package/src/server/workboard.ts +6 -1
  245. package/src/{server → shared}/agent-context.ts +2 -2
  246. package/src/shared/agent-presence.ts +3 -15
  247. package/src/shared/ax-surface-protocol.ts +3 -0
  248. package/src/shared/canvas-app.ts +62 -0
  249. package/src/shared/themes.ts +5 -5
  250. package/src/client/canvas/FocusFieldLayer.tsx +0 -116
  251. package/src/client/canvas/kind-colors.ts +0 -23
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>
package/docs/design/HomeGraph.dc.html ADDED
@@ -0,0 +1,211 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Home — graph</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: #06111e; 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
+ </nav>
21
+
22
+ <header style="position: absolute; left: 52px; top: 0; width: 1088px; height: 64px; box-sizing: border-box; padding: 0 24px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid #1b2c44; background: #081524">
23
+ <h1 style="margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; flex: 1">Library</h1>
24
+ <span style="font-size: 12px; color: #8ea3bd">24 boards · 312 cards · 61 links</span>
25
+ <div role="tablist" aria-label="View" style="display: flex; padding: 2px; border-radius: 8px; border: 1px solid #1b2c44; background: #0f1d31">
26
+ <button role="tab" aria-selected="false" style="{{s.tab}}">Folders</button>
27
+ <button role="tab" aria-selected="false" style="{{s.tab}}">Map</button>
28
+ <button role="tab" aria-selected="true" style="{{s.tabOn}}">Graph</button>
29
+ </div>
30
+ </header>
31
+
32
+ <div style="position: absolute; left: 52px; top: 64px; width: 1088px; height: 896px; overflow: hidden">
33
+ <svg width="1088" height="896" viewBox="0 0 1088 896" style="position: absolute; left: 0; top: 0; fill: none; stroke-linecap: round">
34
+ <path d="{{e.memberDim}}" style="stroke: #2a3b55; stroke-width: 0.8; opacity: 0.5"></path>
35
+ <path d="{{e.portalDim}}" style="stroke: #3d5170; stroke-width: 1.1; opacity: 0.45"></path>
36
+ <path d="{{e.crossDim}}" style="stroke: #3d5170; stroke-width: 1; opacity: 0.45"></path>
37
+ <path d="{{e.memberHi}}" style="stroke: #8ea3bd; stroke-width: 1"></path>
38
+ <path d="{{e.portalHi}}" style="stroke: #D5DEEA; stroke-width: 1.6"></path>
39
+ <path d="{{e.x0.d}}" style="stroke: {{e.x0.c}}; stroke-width: 1.8"></path>
40
+ <path d="{{e.x1.d}}" style="stroke: {{e.x1.c}}; stroke-width: 1.8"></path>
41
+ <path d="{{e.x2.d}}" style="stroke: {{e.x2.c}}; stroke-width: 1.8"></path>
42
+ <path d="{{e.x3.d}}" style="stroke: {{e.x3.c}}; stroke-width: 1.8"></path>
43
+ </svg>
44
+ <sc-for list="{{cards}}" as="cd" hint-placeholder-count="120">
45
+ <span style="position: absolute; left: {{cd.l}}px; top: {{cd.t}}px; width: {{cd.d}}px; height: {{cd.d}}px; border-radius: 999px; background: {{cd.fill}}; opacity: {{cd.o}}"></span>
46
+ </sc-for>
47
+ <sc-for list="{{boards}}" as="b" hint-placeholder-count="22">
48
+ <span style="position: absolute; left: {{b.l}}px; top: {{b.t}}px; width: {{b.d}}px; height: {{b.d}}px; box-sizing: border-box; border-radius: 999px; background: {{b.fill}}; border: {{b.ring}}; box-shadow: {{b.glow}}; opacity: {{b.o}}"></span>
49
+ <span style="position: absolute; left: {{b.lx}}px; top: {{b.ly}}px; width: 180px; text-align: center; font-size: {{b.fs}}px; font-weight: {{b.fw}}; color: #e6eef7; opacity: {{b.lo}}; white-space: nowrap">{{b.name}}</span>
50
+ </sc-for>
51
+ <div style="position: absolute; left: 24px; bottom: 20px; display: flex; gap: 14px; font-size: 11px; color: #8ea3bd">
52
+ <span style="display: flex; align-items: center; gap: 6px"><span style="width: 12px; height: 12px; border-radius: 999px; background: #8ea3bd"></span>board</span>
53
+ <span style="display: flex; align-items: center; gap: 6px"><span style="width: 6px; height: 6px; border-radius: 999px; background: #8ea3bd"></span>card</span>
54
+ <span style="display: flex; align-items: center; gap: 6px"><span style="width: 12px; height: 12px; box-sizing: border-box; border-radius: 999px; border: 2px solid #4BBCFF"></span>in the agent's context</span>
55
+ <span>hovering: Pricing research</span>
56
+ </div>
57
+ </div>
58
+
59
+ <aside aria-label="Graph settings" style="position: absolute; left: 1140px; top: 0; width: 300px; height: 960px; box-sizing: border-box; padding: 18px 18px; background: #0b1828; border-left: 1px solid #1b2c44; display: flex; flex-direction: column; gap: 18px; overflow: hidden">
60
+
61
+ <div style="display: flex; flex-direction: column; gap: 8px">
62
+ <span style="{{s.sec}}">Filters</span>
63
+ <label style="display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 6px; border: 1px solid #1b2c44; background: #0f1d31"><span style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0)">Filter the graph</span><input type="search" placeholder="Search boards and cards…" style="flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #e6eef7; font-family: inherit; font-size: 12px"></label>
64
+ <sc-for list="{{filters}}" as="fl" hint-placeholder-count="5">
65
+ <label style="{{s.check}}"><input type="checkbox" checked="{{fl.on}}" style="accent-color: #4BBCFF; margin: 0"><span style="flex: 1">{{fl.name}}</span><span style="font-size: 11px; color: #6b7d94">{{fl.n}}</span></label>
66
+ </sc-for>
67
+ </div>
68
+
69
+ <div style="display: flex; flex-direction: column; gap: 6px">
70
+ <span style="{{s.sec}}">Groups · by folder</span>
71
+ <sc-for list="{{groups}}" as="gr" hint-placeholder-count="4">
72
+ <div style="display: flex; align-items: center; gap: 8px; height: 26px; font-size: 12px"><span style="width: 12px; height: 12px; border-radius: 999px; background: {{gr.c}}"></span><span style="flex: 1">{{gr.name}}</span><span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #6b7d94">{{gr.q}}</span></div>
73
+ </sc-for>
74
+ <span style="font-size: 12px; color: #8ea3bd">+ New group</span>
75
+ </div>
76
+
77
+ <div style="display: flex; flex-direction: column; gap: 6px">
78
+ <span style="{{s.sec}}">Links</span>
79
+ <sc-for list="{{linkTypes}}" as="lt" hint-placeholder-count="3">
80
+ <label style="{{s.check}}"><input type="checkbox" checked="{{lt.on}}" style="accent-color: #4BBCFF; margin: 0"><span style="flex: 1">{{lt.name}}</span><span style="font-size: 11px; color: #6b7d94">{{lt.n}}</span></label>
81
+ </sc-for>
82
+ </div>
83
+
84
+ <div style="display: flex; flex-direction: column; gap: 6px">
85
+ <span style="{{s.sec}}">Display and forces</span>
86
+ <sc-for list="{{sliders}}" as="sl" hint-placeholder-count="4">
87
+ <label style="display: flex; flex-direction: column; gap: 2px; font-size: 12px"><span>{{sl.name}}</span><input type="range" min="0" max="100" value="{{sl.v}}" style="accent-color: #4BBCFF; width: 100%; margin: 0"></label>
88
+ </sc-for>
89
+ </div>
90
+
91
+ <div style="margin-top: auto; padding: 12px; border-radius: 10px; border: 1px solid #2a4566; background: #13243b; display: flex; flex-direction: column; gap: 8px">
92
+ <div style="display: flex; align-items: center; gap: 8px"><span style="width: 10px; height: 10px; border-radius: 999px; background: #7C9CFF; box-shadow: 0 0 0 2px #4BBCFF"></span><span style="font-size: 13px; font-weight: 600; flex: 1">Pricing research</span><span style="font-size: 11px; color: #6b7d94">Research › Pricing</span></div>
93
+ <span style="font-size: 11px; color: #b9c6d6">27 cards · links to 5 boards · in context</span>
94
+ <label style="display: flex; align-items: center; gap: 8px; font-size: 12px"><span style="flex: 1">Local graph, depth</span><input type="range" min="1" max="4" value="2" style="accent-color: #4BBCFF; width: 110px; margin: 0"><span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #8ea3bd">2</span></label>
95
+ <div style="display: flex; gap: 6px"><button style="flex: 1; height: 28px; border: 0; border-radius: 6px; background: #4BBCFF; color: #081524; font-family: inherit; font-size: 12px; font-weight: 600">Open board</button><button style="height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid #2a4566; background: #0f1d31; color: #e6eef7; font-family: inherit; font-size: 12px">Remove from context</button></div>
96
+ </div>
97
+ </aside>
98
+
99
+ </div>
100
+ </x-dc>
101
+ <script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":960}}'>
102
+ class Component extends DCLogic {
103
+ renderVals() {
104
+ var HUE = { te: '#5FCFC0', re: '#7C9CFF', ws: '#E58FB0', none: '#6b7d94', home: '#D5DEEA' };
105
+ var B = [
106
+ { id: 'home', name: 'Home', x: 560, y: 120, n: 6, g: 'home' },
107
+ { id: 'ov', name: 'Tech Enabling — overview', x: 300, y: 250, n: 18, g: 'te', ctx: true },
108
+ { id: 'c4', name: 'C4 2026 OKR planning', x: 210, y: 380, n: 34, g: 'te', ctx: true },
109
+ { id: 'apr', name: 'April OKRs', x: 90, y: 300, n: 12, g: 'te', old: true },
110
+ { id: 'dm', name: 'Delivery metrics', x: 400, y: 390, n: 22, g: 'te' },
111
+ { id: 'dora', name: 'DORA dashboard', x: 470, y: 300, n: 8, g: 'te' },
112
+ { id: 'road', name: 'Platform roadmap 2027', x: 230, y: 140, n: 26, g: 'te' },
113
+ { id: 'q3', name: 'Q3 risks', x: 100, y: 170, n: 9, g: 'te', old: true },
114
+ { id: 'pd', name: 'Product discovery', x: 330, y: 520, n: 6, g: 'te', old: true },
115
+ { id: 'idx', name: 'Research — index', x: 700, y: 260, n: 6, g: 're' },
116
+ { id: 'pr', name: 'Pricing research', x: 690, y: 430, n: 27, g: 're', ctx: true },
117
+ { id: 'ch', name: 'Churn analysis', x: 540, y: 540, n: 14, g: 're' },
118
+ { id: 'smb', name: 'SMB interviews', x: 850, y: 470, n: 11, g: 're' },
119
+ { id: 'ct', name: 'Competitor teardown', x: 790, y: 610, n: 19, g: 're' },
120
+ { id: 'fm', name: 'Feature matrix', x: 920, y: 660, n: 7, g: 're', old: true },
121
+ { id: 'wwa', name: 'Working with agents', x: 930, y: 170, n: 11, g: 'ws' },
122
+ { id: 'wf', name: 'Workshop flow', x: 1010, y: 260, n: 5, g: 'ws' },
123
+ { id: 'u1', name: 'Scratch 2026-09-30', x: 990, y: 790, n: 4, g: 'none' },
124
+ { id: 'u2', name: 'Board 2026-10-04 06:27', x: 130, y: 740, n: 40, g: 'none' },
125
+ { id: 'u3', name: 'Untitled', x: 640, y: 800, n: 1, g: 'none' }
126
+ ];
127
+ var byId = {};
128
+ B.forEach(function (b) { byId[b.id] = b; });
129
+ var portals = [['home', 'ov'], ['home', 'idx'], ['home', 'wwa'], ['ov', 'c4'], ['ov', 'dm'], ['ov', 'road'], ['ov', 'pd'], ['c4', 'apr'], ['dm', 'dora'], ['road', 'q3'], ['idx', 'pr'], ['idx', 'ch'], ['idx', 'smb'], ['idx', 'ct'], ['ct', 'fm'], ['wwa', 'wf']];
130
+ var focus = 'pr';
131
+ var hiBoards = { pr: 1, idx: 1, ch: 1, smb: 1, ct: 1, c4: 1 };
132
+ var seed = 7;
133
+ function rnd() { seed = (seed * 16807) % 2147483647; return (seed - 1) / 2147483646; }
134
+ function r1(v) { return Math.round(v * 10) / 10; }
135
+ var cards = [], memberDim = '', memberHi = '';
136
+ var cardPos = {};
137
+ B.forEach(function (b) {
138
+ var count = Math.min(b.n, 12);
139
+ var hi = b.id === focus;
140
+ cardPos[b.id] = [];
141
+ for (var i = 0; i < count; i++) {
142
+ var a = (i / count) * Math.PI * 2 + rnd() * 0.6;
143
+ var dist = 26 + Math.sqrt(b.n) * 3 + rnd() * 22;
144
+ var x = b.x + Math.cos(a) * dist, y = b.y + Math.sin(a) * dist;
145
+ cardPos[b.id].push({ x: x, y: y });
146
+ var seg = 'M ' + r1(b.x) + ' ' + r1(b.y) + ' L ' + r1(x) + ' ' + r1(y) + ' ';
147
+ if (hi) memberHi += seg; else memberDim += seg;
148
+ var d = 4 + rnd() * 2.5;
149
+ var o = hi ? 0.9 : (hiBoards[b.id] ? 0.45 : 0.18);
150
+ cards.push({ l: r1(x - d / 2), t: r1(y - d / 2), d: r1(d), fill: HUE[b.g], o: o });
151
+ }
152
+ });
153
+ var portalDim = '', portalHi = '';
154
+ portals.forEach(function (p) {
155
+ var a = byId[p[0]], b = byId[p[1]];
156
+ var seg = 'M ' + a.x + ' ' + a.y + ' L ' + b.x + ' ' + b.y + ' ';
157
+ if (p[0] === focus || p[1] === focus) portalHi += seg; else portalDim += seg;
158
+ });
159
+ function cardLink(fromB, fi, toB, ti) {
160
+ var f = cardPos[fromB][fi], t = cardPos[toB][ti];
161
+ return 'M ' + r1(f.x) + ' ' + r1(f.y) + ' Q ' + r1((f.x + t.x) / 2 + 20) + ' ' + r1((f.y + t.y) / 2 - 20) + ', ' + r1(t.x) + ' ' + r1(t.y);
162
+ }
163
+ var e = {
164
+ memberDim: memberDim || 'M 0 0', memberHi: memberHi || 'M 0 0', portalDim: portalDim, portalHi: portalHi || 'M 0 0',
165
+ crossDim: cardLink('dora', 1, 'ch', 3) + ' ' + cardLink('wwa', 2, 'ov', 5),
166
+ x0: { d: cardLink('pr', 4, 'c4', 2), c: '#E58FB0' },
167
+ x1: { d: cardLink('ch', 0, 'pr', 7), c: '#7C9CFF' },
168
+ x2: { d: cardLink('smb', 2, 'pr', 1), c: '#7C9CFF' },
169
+ x3: { d: cardLink('ct', 9, 'pr', 10), c: '#7C9CFF' }
170
+ };
171
+ var boards = B.map(function (b) {
172
+ var r = b.id === 'home' ? 11 : 5 + Math.sqrt(b.n) * 1.3;
173
+ var hi = !!hiBoards[b.id] || b.id === 'home';
174
+ var isFocus = b.id === focus;
175
+ var o = isFocus ? 1 : hi ? 0.95 : (b.old ? 0.25 : 0.4);
176
+ var d = r * 2;
177
+ return {
178
+ name: b.name, l: r1(b.x - r), t: r1(b.y - r), d: r1(d), fill: HUE[b.g], o: o,
179
+ ring: b.ctx ? '2.5px solid #4BBCFF' : '0',
180
+ glow: isFocus ? '0 0 0 6px rgba(124,156,255,0.18), 0 0 24px rgba(124,156,255,0.45)' : 'none',
181
+ lx: r1(b.x - 90), ly: r1(b.y + r + 4), fs: isFocus ? 13 : 11, fw: isFocus ? 600 : 500,
182
+ lo: isFocus ? 1 : hi ? 0.9 : (b.n >= 14 ? 0.35 : 0)
183
+ };
184
+ });
185
+ var filters = [
186
+ { name: 'Boards', n: 24, on: true }, { name: 'Cards', n: 312, on: true },
187
+ { name: 'Only in the agent’s context', n: 3, on: false }, { name: 'Unfiled and unlinked', n: 3, on: true },
188
+ { name: 'Archived', n: 5, on: false }
189
+ ];
190
+ var groups = [
191
+ { name: 'Tech Enabling', q: 'folder:TE', c: HUE.te },
192
+ { name: 'Research', q: 'folder:Research', c: HUE.re },
193
+ { name: 'Workshops', q: 'folder:Workshops', c: HUE.ws },
194
+ { name: 'Unfiled', q: 'no folder', c: HUE.none }
195
+ ];
196
+ var linkTypes = [
197
+ { name: 'Portals', n: 16, on: true }, { name: 'Wiki links', n: 12, on: true }, { name: 'Card relations (supports, cites…)', n: 33, on: true }
198
+ ];
199
+ var sliders = [{ name: 'Label fade', v: 55 }, { name: 'Node size', v: 40 }, { name: 'Repel', v: 62 }, { name: 'Link distance', v: 35 }];
200
+ var s = {
201
+ sec: 'font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:#6b7d94;',
202
+ check: 'display:flex;align-items:center;gap:8px;height:24px;font-size:12px;',
203
+ tab: 'height:28px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:#8ea3bd;font-family:inherit;font-size:12px;font-weight:500;',
204
+ tabOn: 'height:28px;padding:0 12px;border:0;border-radius:6px;background:#1b2c44;color:#e6eef7;font-family:inherit;font-size:12px;font-weight:500;'
205
+ };
206
+ return { e: e, cards: cards, boards: boards, filters: filters, groups: groups, linkTypes: linkTypes, sliders: sliders, s: s };
207
+ }
208
+ }
209
+ </script>
210
+ </body>
211
+ </html>
package/docs/design/HomeMap.dc.html ADDED
@@ -0,0 +1,117 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Home — map</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
+ </nav>
21
+
22
+ <header style="position: absolute; left: 52px; top: 0; right: 0; height: 96px; box-sizing: border-box; padding: 20px 32px 0; display: flex; align-items: flex-start; gap: 16px; border-bottom: 1px solid #1b2c44">
23
+ <div style="flex: 1">
24
+ <h1 style="margin: 0; font-size: 20px; line-height: 28px; font-weight: 600">Library</h1>
25
+ <div style="display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 11px; color: #8ea3bd">
26
+ <span style="display: flex; align-items: center; gap: 6px"><svg width="22" height="6" viewBox="0 0 22 6" style="fill: none; stroke: #D5DEEA; stroke-width: 2; stroke-linecap: round"><path d="M1 3 H21"></path></svg>portal</span>
27
+ <span style="display: flex; align-items: center; gap: 6px"><svg width="22" height="6" viewBox="0 0 22 6" style="fill: none; stroke: #8ea3bd; stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round"><path d="M1 3 H21"></path></svg>wiki link</span>
28
+ <span style="display: flex; align-items: center; gap: 6px"><span style="width: 12px; height: 12px; border-radius: 999px; background: #4BBCFF"></span>in the agent's context</span>
29
+ <span>faded = untouched 30 days+</span>
30
+ <span>size = number of cards</span>
31
+ </div>
32
+ </div>
33
+ <span style="height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(75,188,255,0.3); background: rgba(75,188,255,0.08); color: #4BBCFF; font-size: 12px; font-weight: 500; line-height: 28px">In context: 3 boards · ≈ 21k tokens</span>
34
+ <div role="tablist" aria-label="View" style="display: flex; padding: 2px; border-radius: 8px; border: 1px solid #1b2c44; background: #0f1d31">
35
+ <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">Folders</button>
36
+ <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">Map</button>
37
+ <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>
38
+ </div>
39
+ </header>
40
+
41
+ <div style="position: absolute; left: 52px; top: 96px; width: 1388px; height: 864px; overflow: hidden; background-color: #081524; background-image: radial-gradient(rgba(142,163,189,0.12) 1px, transparent 1.2px); background-size: 24px 24px">
42
+
43
+ <div style="{{m.frame}} left: 40px; top: 130px; width: 560px; height: 520px; border-color: rgba(95,207,192,0.45); background: rgba(95,207,192,0.03)"></div>
44
+ <span style="{{m.pill}} left: 56px; top: 120px; border-color: rgba(95,207,192,0.45)"><span style="{{m.hue}} background: #5FCFC0"></span>Tech Enabling<span style="{{m.n}}">12</span></span>
45
+ <div style="{{m.frame}} left: 70px; top: 290px; width: 240px; height: 196px; border-color: rgba(95,207,192,0.28)"></div>
46
+ <span style="{{m.sub}} left: 82px; top: 282px">OKRs · 3</span>
47
+ <div style="{{m.frame}} left: 330px; top: 290px; width: 240px; height: 196px; border-color: rgba(95,207,192,0.28)"></div>
48
+ <span style="{{m.sub}} left: 342px; top: 282px">Delivery metrics · 4</span>
49
+ <div style="{{m.folder}} left: 70px; top: 510px; opacity: 0.6"><span style="{{m.hue}} background: #5FCFC0"></span>Product discovery<span style="{{m.n}}">2 boards · 41d</span></div>
50
+
51
+ <div style="{{m.frame}} left: 640px; top: 130px; width: 420px; height: 520px; border-color: rgba(124,156,255,0.45); background: rgba(124,156,255,0.03)"></div>
52
+ <span style="{{m.pill}} left: 656px; top: 120px; border-color: rgba(124,156,255,0.45)"><span style="{{m.hue}} background: #7C9CFF"></span>Research<span style="{{m.n}}">7</span></span>
53
+ <div style="{{m.frame}} left: 660px; top: 290px; width: 180px; height: 196px; border-color: rgba(124,156,255,0.28)"></div>
54
+ <span style="{{m.sub}} left: 672px; top: 282px">Pricing · 3</span>
55
+ <div style="{{m.frame}} left: 860px; top: 290px; width: 180px; height: 196px; border-color: rgba(124,156,255,0.28)"></div>
56
+ <span style="{{m.sub}} left: 872px; top: 282px">Competitors · 4</span>
57
+
58
+ <div style="{{m.frame}} left: 1100px; top: 130px; width: 250px; height: 250px; border-color: rgba(229,143,176,0.45); background: rgba(229,143,176,0.03)"></div>
59
+ <span style="{{m.pill}} left: 1116px; top: 120px; border-color: rgba(229,143,176,0.45)"><span style="{{m.hue}} background: #E58FB0"></span>Workshops<span style="{{m.n}}">2</span></span>
60
+
61
+ <div style="{{m.frame}} left: 40px; top: 690px; width: 1310px; height: 140px; border-color: #3d5170"></div>
62
+ <span style="{{m.pill}} left: 56px; top: 680px; border-color: #3d5170; color: #8ea3bd">Unfiled — no folder and no portal reaches these<span style="{{m.n}}">3</span></span>
63
+
64
+ <svg width="1388" height="864" viewBox="0 0 1388 864" style="position: absolute; left: 0; top: 0; fill: none; stroke-linecap: round">
65
+ <path d="M 694 76 C 694 130, 300 120, 300 166" style="stroke: #D5DEEA; stroke-width: 2"></path><path d="M 300 169 L 295.5 160 L 304.5 160 Z" style="fill: #D5DEEA"></path>
66
+ <path d="M 694 76 C 694 130, 800 120, 800 166" style="stroke: #D5DEEA; stroke-width: 2"></path><path d="M 800 169 L 795.5 160 L 804.5 160 Z" style="fill: #D5DEEA"></path>
67
+ <path d="M 694 76 C 694 120, 1220 110, 1220 176" style="stroke: #D5DEEA; stroke-width: 2"></path><path d="M 1220 179 L 1215.5 170 L 1224.5 170 Z" style="fill: #D5DEEA"></path>
68
+ <path d="M 300 234 C 300 280, 190 270, 190 316" style="stroke: #D5DEEA; stroke-width: 2"></path><path d="M 190 319 L 185.5 310 L 194.5 310 Z" style="fill: #D5DEEA"></path>
69
+ <path d="M 300 234 C 300 280, 450 270, 450 316" style="stroke: #D5DEEA; stroke-width: 2"></path><path d="M 450 319 L 445.5 310 L 454.5 310 Z" style="fill: #D5DEEA"></path>
70
+ <path d="M 800 222 C 800 270, 750 270, 750 316" style="stroke: #D5DEEA; stroke-width: 2"></path><path d="M 750 319 L 745.5 310 L 754.5 310 Z" style="fill: #D5DEEA"></path>
71
+ <path d="M 800 222 C 800 270, 950 270, 950 316" style="stroke: #D5DEEA; stroke-width: 2"></path><path d="M 950 319 L 945.5 310 L 954.5 310 Z" style="fill: #D5DEEA"></path>
72
+ <path d="M 675 428 L 556 428" style="stroke: #8ea3bd; stroke-width: 2; stroke-dasharray: 2 5"></path><path d="M 552 428 L 561 423.5 L 561 432.5 Z" style="fill: #8ea3bd"></path>
73
+ </svg>
74
+
75
+ <div style="{{m.node}} left: 614px; top: 24px; width: 160px; height: 52px">Home<span style="{{m.meta}}">level 0 · 5 portals</span></div>
76
+ <div style="{{m.node}} {{m.inctx}} left: 200px; top: 170px; width: 200px; height: 64px">Tech Enabling — overview<span style="{{m.meta}}">README · 18 cards</span><span style="{{m.badge}}"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></span></div>
77
+ <div style="{{m.node}} {{m.inctx}} left: 90px; top: 320px; width: 200px; height: 60px">C4 2026 OKR planning<span style="{{m.meta}}">34 cards · yesterday</span><span style="{{m.badge}}"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></span></div>
78
+ <div style="{{m.node}} left: 90px; top: 404px; width: 160px; height: 52px; opacity: 0.45">April OKRs<span style="{{m.meta}}">12 cards · 160d</span></div>
79
+ <div style="{{m.node}} left: 350px; top: 320px; width: 200px; height: 56px">Delivery metrics<span style="{{m.meta}}">22 cards · 3d</span></div>
80
+ <div style="{{m.node}} left: 350px; top: 400px; width: 200px; height: 56px">DORA dashboard<span style="{{m.meta}}">8 cards · 3d</span></div>
81
+ <div style="{{m.node}} left: 720px; top: 170px; width: 160px; height: 52px">Research — index<span style="{{m.meta}}">README · 6 cards</span></div>
82
+ <div style="{{m.node}} {{m.inctx}} left: 675px; top: 320px; width: 150px; height: 56px">Pricing research<span style="{{m.meta}}">27 cards · today</span><span style="{{m.badge}}"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></span></div>
83
+ <div style="{{m.node}} left: 675px; top: 400px; width: 150px; height: 56px">Churn analysis<span style="{{m.meta}}">14 cards · 2d</span></div>
84
+ <div style="{{m.node}} left: 875px; top: 320px; width: 150px; height: 56px">Competitor teardown<span style="{{m.meta}}">19 cards · 6d</span></div>
85
+ <div style="{{m.node}} left: 875px; top: 400px; width: 150px; height: 52px; opacity: 0.6">Feature matrix<span style="{{m.meta}}">7 cards · 38d</span></div>
86
+ <div style="{{m.node}} left: 1120px; top: 180px; width: 200px; height: 56px">Working with agents<span style="{{m.meta}}">deck · 11 cards</span></div>
87
+ <div style="{{m.node}} left: 1120px; top: 270px; width: 160px; height: 52px">Workshop flow<span style="{{m.meta}}">5 cards · 9d</span></div>
88
+ <div style="{{m.ghost}} left: 70px; top: 730px">Scratch 2026-09-30<span style="{{m.meta}}">4 cards</span></div>
89
+ <div style="{{m.ghost}} left: 290px; top: 730px">Board 2026-10-04 06:27<span style="{{m.meta}}">70 cards</span></div>
90
+ <div style="{{m.ghost}} left: 510px; top: 730px">Untitled<span style="{{m.meta}}">1 card</span></div>
91
+ <span style="position: absolute; left: 576px; top: 438px; font-size: 11px; color: #8ea3bd; background: #081524; padding: 0 4px">[[DORA dashboard]]</span>
92
+ </div>
93
+
94
+ </div>
95
+ </x-dc>
96
+ <script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":960}}'>
97
+ class Component extends DCLogic {
98
+ renderVals() {
99
+ var m = {
100
+ frame: 'position:absolute;box-sizing:border-box;border-radius:14px;border:1.5px dashed;',
101
+ pill: 'position:absolute;display:flex;align-items:center;gap:8px;height:22px;padding:0 10px;border-radius:999px;border:1px solid;background:#0f1d31;font-size:12px;font-weight:600;line-height:20px;',
102
+ sub: 'position:absolute;height:18px;padding:0 8px;border-radius:999px;background:#081524;font-size:11px;font-weight:500;line-height:18px;color:#b9c6d6;',
103
+ hue: 'width:8px;height:8px;border-radius:3px;',
104
+ n: 'font-size:11px;font-weight:500;color:#6b7d94;',
105
+ folder: 'position:absolute;width:240px;height:40px;box-sizing:border-box;padding:0 12px;border-radius:8px;border:1px solid #1b2c44;background:#0f1d31;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;',
106
+ node: 'position:absolute;box-sizing:border-box;padding:6px 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;line-height:1.3;display:flex;flex-direction:column;justify-content:center;gap:1px;',
107
+ inctx: 'border:1.5px solid #4BBCFF;background:linear-gradient(rgba(75,188,255,0.10), rgba(75,188,255,0.10)), #0f1d31;',
108
+ badge: 'position:absolute;right:-7px;top:-7px;width:18px;height:18px;border-radius:999px;background:#4BBCFF;color:#081524;display:flex;align-items:center;justify-content:center;',
109
+ meta: 'font-size:11px;font-weight:400;color:#8ea3bd;',
110
+ ghost: 'position:absolute;width:200px;height:56px;box-sizing:border-box;padding:6px 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;justify-content:center;gap:1px;'
111
+ };
112
+ return { m: m };
113
+ }
114
+ }
115
+ </script>
116
+ </body>
117
+ </html>