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/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>
package/docs/design/HomeTeam.dc.html ADDED
@@ -0,0 +1,176 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Home on a team server</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: 1000px; 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: 1000px; 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
+ <span aria-label="Signed in" style="width: 30px; height: 30px; border-radius: 999px; background: #2a4566; color: #e6eef7; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-bottom: 6px">You</span>
22
+ </nav>
23
+
24
+ <aside aria-label="Library" style="position: absolute; left: 52px; top: 0; width: 280px; height: 1000px; box-sizing: border-box; padding: 16px 12px; background: #0b1828; border-right: 1px solid #1b2c44; display: flex; flex-direction: column; gap: 14px">
25
+ <button style="display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid #1b2c44; background: #0f1d31; color: #e6eef7; font-family: inherit; text-align: left">
26
+ <svg width="16" height="16" viewBox="0 0 24 24" style="{{s.icon}}"><path d="{{i.team}}"></path></svg><span style="flex: 1; font-size: 13px; font-weight: 600">Tech Enabling team</span><span style="font-size: 11px; color: #6b7d94">12 members ▾</span></button>
27
+
28
+ <div style="display: flex; flex-direction: column; gap: 2px">
29
+ <span style="{{s.sec}}">Your pinned boards</span>
30
+ <sc-for list="{{pinned}}" as="b" hint-placeholder-count="3">
31
+ <div style="{{s.row}}"><span style="{{s.pinOn}}"><svg width="9" height="9" viewBox="0 0 24 24" style="{{s.ic2}}"><path d="{{i.pin}}"></path></svg></span><span style="{{s.name}}">{{b.name}}</span><span style="{{b.tag}}">{{b.scope}}</span></div>
32
+ </sc-for>
33
+ <span style="font-size: 11px; color: #6b7d94; padding: 2px 8px 0 32px">Only you see these pins · ≈ 19k tokens</span>
34
+ </div>
35
+
36
+ <div style="display: flex; flex-direction: column; gap: 2px">
37
+ <div style="display: flex; align-items: center; gap: 8px; padding: 0 8px 4px"><svg width="13" height="13" viewBox="0 0 24 24" style="{{s.icon}}"><path d="{{i.team}}"></path></svg><span style="{{s.secInline}}">Workspace</span><span style="font-size: 11px; color: #6b7d94">shared</span></div>
38
+ <sc-for list="{{workspace}}" as="f" hint-placeholder-count="5">
39
+ <div style="{{f.style}}"><span style="width: {{f.indent}}px; flex-shrink: 0"></span><span style="width: 8px; height: 8px; border-radius: 3px; background: {{f.hue}}; flex-shrink: 0"></span><span style="{{s.name}}">{{f.name}}</span><span style="font-size: 11px; color: #6b7d94">{{f.role}}</span></div>
40
+ </sc-for>
41
+ </div>
42
+
43
+ <div style="display: flex; flex-direction: column; gap: 2px">
44
+ <div style="display: flex; align-items: center; gap: 8px; padding: 0 8px 4px"><svg width="13" height="13" viewBox="0 0 24 24" style="{{s.icon}}"><path d="{{i.person}}"></path></svg><span style="{{s.secInline}}">Personal</span><span style="font-size: 11px; color: #6b7d94">only you</span></div>
45
+ <sc-for list="{{personal}}" as="f" hint-placeholder-count="4">
46
+ <div style="{{f.style}}"><span style="width: {{f.indent}}px; flex-shrink: 0"></span><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.icon}} flex-shrink: 0"><path d="{{f.icon}}"></path></svg><span style="{{s.name}}">{{f.name}}</span><span style="font-size: 11px; color: #6b7d94">{{f.n}}</span></div>
47
+ </sc-for>
48
+ </div>
49
+ </aside>
50
+
51
+ <main style="position: absolute; left: 332px; top: 0; width: 808px; height: 1000px; box-sizing: border-box; padding: 24px 32px; display: flex; flex-direction: column; gap: 18px">
52
+ <div style="display: flex; align-items: flex-start; gap: 16px">
53
+ <div style="flex: 1">
54
+ <div style="font-size: 12px; color: #6b7d94">Personal <span style="color: #3d5170">/</span> <span style="color: #b9c6d6">Pricing drafts</span></div>
55
+ <h1 style="margin: 2px 0 0; font-size: 20px; line-height: 28px; font-weight: 600; display: flex; align-items: center; gap: 10px"><svg width="16" height="16" viewBox="0 0 24 24" style="{{s.icon}}"><path d="{{i.person}}"></path></svg>Pricing drafts</h1>
56
+ <p style="margin: 4px 0 0; font-size: 13px; color: #b9c6d6">Your boards. Nobody else sees them until you share or move one.</p>
57
+ </div>
58
+ <div role="tablist" aria-label="View" style="display: flex; padding: 2px; border-radius: 8px; border: 1px solid #1b2c44; background: #0f1d31"><button role="tab" aria-selected="true" style="{{s.tabOn}}">Folders</button><button role="tab" aria-selected="false" style="{{s.tab}}">Map</button><button role="tab" aria-selected="false" style="{{s.tab}}">Graph</button></div>
59
+ </div>
60
+
61
+ <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px">
62
+ <sc-for list="{{boards}}" as="bd" hint-placeholder-count="3">
63
+ <article style="border-radius: 10px; border: {{bd.border}}; background: #0f1d31; overflow: hidden">
64
+ <div style="position: relative; height: 96px; 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">
65
+ <span style="{{bd.pinStyle}} position: absolute; right: 10px; top: 10px"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.ic2}}"><path d="{{i.pin}}"></path></svg></span>
66
+ </div>
67
+ <div style="padding: 10px 12px; display: flex; flex-direction: column; gap: 4px">
68
+ <div style="font-size: 13px; font-weight: 600">{{bd.name}}</div>
69
+ <div style="display: flex; align-items: center; gap: 6px; font-size: 11px; color: #8ea3bd"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.icon}}"><path d="{{bd.icon}}"></path></svg>{{bd.access}}</div>
70
+ </div>
71
+ </article>
72
+ </sc-for>
73
+ </div>
74
+
75
+ <div style="display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 12px; border: 1px solid #2a4566; background: #0f1d31; box-shadow: 0 10px 30px rgba(0,0,0,0.5)">
76
+ <div style="display: flex; align-items: baseline; gap: 10px"><span style="font-size: 15px; font-weight: 600; flex: 1">Move “Pricing research” to the workspace</span><span style="font-size: 11px; color: #6b7d94">from Personal / Pricing drafts</span></div>
77
+ <label style="display: flex; flex-direction: column; gap: 4px"><span style="font-size: 12px; color: #8ea3bd">Workspace folder</span>
78
+ <span style="display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 6px; border: 1px solid #2a4566; background: #13243b; font-size: 13px"><span style="width: 8px; height: 8px; border-radius: 3px; background: #7C9CFF"></span>Research / Pricing<span style="flex: 1"></span><span style="color: #6b7d94">▾</span></span></label>
79
+ <div style="display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 8px; background: #13243b; font-size: 12px">
80
+ <span style="font-weight: 600">What changes</span>
81
+ <sc-for list="{{effects}}" as="e" hint-placeholder-count="4"><div style="display: flex; gap: 8px; color: #b9c6d6"><span style="color: {{e.c}}; flex-shrink: 0">{{e.g}}</span><span>{{e.t}}</span></div></sc-for>
82
+ </div>
83
+ <div style="display: flex; justify-content: flex-end; gap: 8px"><button style="height: 32px; padding: 0 14px; border-radius: 6px; border: 1px solid #2a4566; background: transparent; color: #e6eef7; font-family: inherit; font-size: 12px; font-weight: 500">Share instead…</button><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">Move to workspace</button></div>
84
+ </div>
85
+ </main>
86
+
87
+ <aside aria-label="Board details" style="position: absolute; left: 1140px; top: 0; width: 300px; height: 1000px; box-sizing: border-box; padding: 20px 18px; background: #0b1828; border-left: 1px solid #1b2c44; display: flex; flex-direction: column; gap: 14px">
88
+ <div style="display: flex; flex-direction: column; gap: 2px"><span style="font-size: 11px; color: #6b7d94">Workspace · Decisions</span><span style="font-size: 15px; font-weight: 600">Q4 pricing decision</span><span style="font-size: 11px; color: #8ea3bd">You can read · 3 editors · 12 members can read</span></div>
89
+ <div style="display: flex; flex-direction: column; gap: 4px">
90
+ <span style="{{s.secInline}} padding: 0">Links · 4</span>
91
+ <sc-for list="{{links}}" as="lk" hint-placeholder-count="4">
92
+ <div style="display: flex; align-items: center; gap: 8px; min-height: 30px; font-size: 12px; color: {{lk.c}}"><svg width="12" height="12" viewBox="0 0 24 24" style="{{s.icon}} flex-shrink: 0"><path d="{{lk.icon}}"></path></svg><span style="flex: 1">{{lk.name}}</span><span style="font-size: 11px; color: #6b7d94">{{lk.kind}}</span></div>
93
+ </sc-for>
94
+ </div>
95
+ <div style="padding: 10px 12px; border-radius: 8px; border: 1px dashed #3d5170; display: flex; flex-direction: column; gap: 4px">
96
+ <div style="display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #b9c6d6"><svg width="13" height="13" viewBox="0 0 24 24" style="{{s.icon}}"><path d="{{i.lock}}"></path></svg>A private board</div>
97
+ <span style="font-size: 11px; color: #8ea3bd">What a teammate sees for a link to someone's personal board: no title, no summary, not in their agent's brief.</span>
98
+ </div>
99
+ <div style="margin-top: auto; display: flex; flex-direction: column; gap: 8px">
100
+ <sc-for list="{{rules}}" as="r" hint-placeholder-count="5"><div style="display: flex; gap: 8px; font-size: 11px; color: #b9c6d6"><span style="color: #4BBCFF; flex-shrink: 0">•</span><span><b style="font-weight: 600; color: #e6eef7">{{r.t}}</b> {{r.d}}</span></div></sc-for>
101
+ </div>
102
+ </aside>
103
+
104
+ </div>
105
+ </x-dc>
106
+ <script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1000}}'>
107
+ class Component extends DCLogic {
108
+ renderVals() {
109
+ var i = {
110
+ pin: 'M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20',
111
+ team: 'M9 11a3 3 0 1 0 0-6a3 3 0 1 0 0 6zM3 20a6 6 0 0 1 12 0M17 11a2.5 2.5 0 1 0 0-5M21 20a5 5 0 0 0-4-4.9',
112
+ person: 'M12 11a3.5 3.5 0 1 0 0-7a3.5 3.5 0 1 0 0 7zM5 20a7 7 0 0 1 14 0',
113
+ lock: 'M7 11h10v9H7zM9 11V8a3 3 0 0 1 6 0v3',
114
+ folder: 'M4 7a1 1 0 0 1 1-1h4l2 2h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z',
115
+ share: 'M8 12a2 2 0 1 0 0 .01M16 7a2 2 0 1 0 0 .01M16 17a2 2 0 1 0 0 .01M9.8 11l4.4-3M9.8 13l4.4 3',
116
+ arrow: 'M5 12h14M13 6l6 6-6 6'
117
+ };
118
+ var rowBase = 'display:flex;align-items:center;gap:8px;height:30px;padding:0 8px;border-radius:6px;';
119
+ var pinOn = 'width:16px;height:16px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#4BBCFF;color:#081524;';
120
+ var pinOn18 = 'width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#4BBCFF;color:#081524;';
121
+ var pinOff18 = 'width:18px;height:18px;box-sizing:border-box;border-radius:999px;display:flex;align-items:center;justify-content:center;border:1.5px solid #6b7d94;color:#b9c6d6;';
122
+ var tagW = 'font-size:11px;padding:0 6px;border-radius:999px;border:1px solid #2a4566;color:#b9c6d6;';
123
+ var tagP = 'font-size:11px;padding:0 6px;border-radius:999px;border:1px dashed #3d5170;color:#8ea3bd;';
124
+ var s = {
125
+ sec: 'font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:#6b7d94;padding:0 8px 4px;',
126
+ secInline: 'font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:#8ea3bd;flex:1;',
127
+ row: rowBase,
128
+ name: 'flex:1;min-width:0;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;',
129
+ icon: 'fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:#8ea3bd;',
130
+ ic2: 'fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;',
131
+ pinOn: pinOn,
132
+ tab: 'height:28px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:#8ea3bd;font-family:inherit;font-size:12px;font-weight:500;',
133
+ tabOn: 'height:28px;padding:0 12px;border:0;border-radius:6px;background:#1b2c44;color:#e6eef7;font-family:inherit;font-size:12px;font-weight:500;'
134
+ };
135
+ var pinned = [
136
+ { name: 'Q4 pricing decision', scope: 'workspace', tag: tagW },
137
+ { name: 'C4 2026 OKR planning', scope: 'workspace', tag: tagW },
138
+ { name: 'Pricing research', scope: 'personal', tag: tagP }
139
+ ];
140
+ function w(name, role, depth, hue, sel) { return { name: name, role: role, indent: depth * 16, hue: hue, style: rowBase + (sel ? 'background:#13243b;' : '') }; }
141
+ var workspace = [
142
+ w('Tech Enabling', 'edit', 0, '#5FCFC0'), w('OKRs', 'edit', 1, '#5FCFC0'),
143
+ w('Research', 'edit', 0, '#7C9CFF'), w('Decisions', 'read', 0, '#E58FB0'), w('Workshops', 'comment', 0, '#E59B6B')
144
+ ];
145
+ function p(name, n, depth, sel, icon) { return { name: name, n: n, indent: depth * 16, icon: icon || i.folder, style: rowBase + (sel ? 'background:#13243b;' : '') }; }
146
+ var personal = [p('Pricing drafts', 3, 0, true), p('1:1 prep', 4, 0), p('Reading notes', 9, 0), p('Scratch', 2, 0)];
147
+ var boards = [
148
+ { name: 'Pricing research', access: 'Only you', icon: i.lock, pinStyle: pinOn18, border: '1.5px solid #4BBCFF' },
149
+ { name: 'Churn deep-dive', access: 'Shared with 2 people', icon: i.share, pinStyle: pinOff18, border: '1px solid #1b2c44' },
150
+ { name: 'Price page copy', access: 'Only you', icon: i.lock, pinStyle: pinOff18, border: '1px solid #1b2c44' }
151
+ ];
152
+ var effects = [
153
+ { g: '+', c: '#2fd07f', t: 'All 12 members of Tech Enabling team can read it; editors of Research can change it.' },
154
+ { g: '+', c: '#2fd07f', t: 'It can appear in teammates’ search, Map and Graph — and in their agents’ briefs if they pin it.' },
155
+ { g: '=', c: '#8ea3bd', t: 'Your pins stay yours. Its links to your other personal boards stay locked for everyone else.' },
156
+ { g: '!', c: '#f4c542', t: 'Moving is the step that shares it. Nothing becomes shared through a link, a pin or an agent edit.' }
157
+ ];
158
+ var links = [
159
+ { name: 'C4 2026 OKR planning', kind: 'workspace', icon: i.arrow, c: '#e6eef7' },
160
+ { name: 'Competitor teardown', kind: 'workspace', icon: i.arrow, c: '#e6eef7' },
161
+ { name: 'Pricing research', kind: 'your personal', icon: i.arrow, c: '#e6eef7' },
162
+ { name: 'A private board', kind: 'locked', icon: i.lock, c: '#8ea3bd' }
163
+ ];
164
+ var rules = [
165
+ { t: 'Personal is private', d: 'until you share or move it.' },
166
+ { t: 'Crossing over is explicit:', d: 'share (per-board roles) or move into a workspace folder.' },
167
+ { t: 'Pins are yours;', d: 'the board README is the shared default.' },
168
+ { t: 'Agents act as you,', d: 'with your rights, never reading others’ personal boards.' },
169
+ { t: 'Local installs', d: 'have one scope; this arrives with step 5.' }
170
+ ];
171
+ return { s: s, i: i, pinned: pinned, workspace: workspace, personal: personal, boards: boards, effects: effects, links: links, rules: rules };
172
+ }
173
+ }
174
+ </script>
175
+ </body>
176
+ </html>
package/docs/design/Light.dc.html ADDED
@@ -0,0 +1,28 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>PMX Canvas — proposed, Daylight</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: 900px">
17
+ <dc-import name="Main" theme="daylight" hint-size="1440px,900px"></dc-import>
18
+ </div>
19
+ </x-dc>
20
+ <script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":900}}'>
21
+ class Component extends DCLogic {
22
+ renderVals() {
23
+ return {};
24
+ }
25
+ }
26
+ </script>
27
+ </body>
28
+ </html>