pmx-canvas 0.7.3 → 0.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/extensions/pmx-canvas/THIRD_PARTY_LICENSES.txt +331 -0
- package/.github/extensions/pmx-canvas/extension.mjs +25 -172
- package/.github/extensions/pmx-canvas/mcp-bootstrap.ts +198 -0
- package/.github/extensions/pmx-canvas/runtime.d.mts +41 -0
- package/.github/extensions/pmx-canvas/runtime.json +3 -0
- package/.github/extensions/pmx-canvas/runtime.mjs +194 -0
- package/.github/extensions/pmx-canvas/start-mcp.mjs +51 -0
- package/.github/extensions/pmx-canvas/tools.json +2560 -0
- package/CHANGELOG.md +64 -0
- package/Readme.md +21 -7
- package/dist/canvas/fonts/OFL.txt +93 -0
- package/dist/canvas/fonts/ibm-plex-mono-latin-400-normal.woff2 +0 -0
- package/dist/canvas/fonts/ibm-plex-mono-latin-500-normal.woff2 +0 -0
- package/dist/canvas/fonts/ibm-plex-mono-latin-ext-400-normal.woff2 +0 -0
- package/dist/canvas/fonts/ibm-plex-mono-latin-ext-500-normal.woff2 +0 -0
- package/dist/canvas/fonts/ibm-plex-sans-latin-400-normal.woff2 +0 -0
- package/dist/canvas/fonts/ibm-plex-sans-latin-500-normal.woff2 +0 -0
- package/dist/canvas/fonts/ibm-plex-sans-latin-600-normal.woff2 +0 -0
- package/dist/canvas/fonts/ibm-plex-sans-latin-ext-400-normal.woff2 +0 -0
- package/dist/canvas/fonts/ibm-plex-sans-latin-ext-500-normal.woff2 +0 -0
- package/dist/canvas/fonts/ibm-plex-sans-latin-ext-600-normal.woff2 +0 -0
- package/dist/canvas/global.css +726 -674
- package/dist/canvas/index.js +90 -88
- package/dist/canvas/mcp-app.html +7879 -0
- package/dist/canvas/mermaid-entry.js +1 -1
- package/dist/canvas/surface-theme.css +151 -46
- package/dist/json-render/index.css +81 -1
- package/dist/json-render/index.js +1 -1
- package/dist/types/cli/commands/record.d.ts +1 -1
- package/dist/types/client/canvas/NodeContextMark.d.ts +24 -0
- package/dist/types/client/canvas/SessionReceipt.d.ts +3 -1
- package/dist/types/client/icons.d.ts +1 -2
- package/dist/types/client/mcp-app/index.d.ts +1 -0
- package/dist/types/client/nodes/HtmlNode.d.ts +1 -0
- package/dist/types/client/nodes/ax-node-actions.d.ts +2 -2
- package/dist/types/client/nodes/markdown-sanitize.d.ts +2 -0
- package/dist/types/client/nodes/use-workbench-asset.d.ts +2 -0
- package/dist/types/client/state/attention-store.d.ts +0 -5
- package/dist/types/client/state/context-status-store.d.ts +53 -0
- package/dist/types/client/state/intent-bridge.d.ts +3 -0
- package/dist/types/client/state/near-pin-store.d.ts +16 -0
- package/dist/types/client/state/presence-store.d.ts +5 -0
- package/dist/types/client/state/session-store.d.ts +33 -3
- package/dist/types/client/state/workbench-transport.d.ts +16 -0
- package/dist/types/client/theme/tokens.d.ts +1 -3
- package/dist/types/client/types.d.ts +9 -0
- package/dist/types/json-render/server.d.ts +1 -1
- package/dist/types/mcp/app-server.d.ts +3 -0
- package/dist/types/mcp/canvas-access.d.ts +1 -1
- package/dist/types/mcp/canvas-app.d.ts +4 -0
- package/dist/types/mcp/workbench-app.d.ts +4 -0
- package/dist/types/server/agent-presence.d.ts +1 -1
- package/dist/types/server/ax-state.d.ts +1 -1
- package/dist/types/server/canvas-db.d.ts +8 -0
- package/dist/types/server/canvas-geometry.d.ts +25 -0
- package/dist/types/server/canvas-operations.d.ts +1 -11
- package/dist/types/server/canvas-state.d.ts +25 -3
- package/dist/types/server/context-brief.d.ts +8 -1
- package/dist/types/server/context-reads.d.ts +30 -7
- package/dist/types/server/index.d.ts +6 -1
- package/dist/types/server/mcp-app-runtime.d.ts +1 -0
- package/dist/types/server/operations/http.d.ts +2 -0
- package/dist/types/server/operations/invoker.d.ts +4 -2
- package/dist/types/server/operations/ops/nodes.d.ts +0 -6
- package/dist/types/server/server.d.ts +1 -0
- package/dist/types/server/spatial-analysis.d.ts +2 -0
- package/dist/types/shared/agent-context.d.ts +22 -0
- package/dist/types/shared/agent-presence.d.ts +3 -10
- package/dist/types/shared/canvas-app.d.ts +54 -0
- package/dist/types/shared/themes.d.ts +1 -1
- package/docs/RELEASE.md +7 -3
- package/docs/agent-plugin.md +123 -0
- package/docs/ax-state-contract.md +40 -0
- package/docs/cli.md +7 -2
- package/docs/design/AgentContext.dc.html +186 -0
- package/docs/design/Before.dc.html +208 -0
- package/docs/design/BoardPins.dc.html +151 -0
- package/docs/design/Chrome.dc.html +211 -0
- package/docs/design/Context.dc.html +239 -0
- package/docs/design/Flows.dc.html +181 -0
- package/docs/design/Home.dc.html +209 -0
- package/docs/design/HomeGraph.dc.html +211 -0
- package/docs/design/HomeMap.dc.html +117 -0
- package/docs/design/HomeTeam.dc.html +176 -0
- package/docs/design/Light.dc.html +28 -0
- package/docs/design/Main.dc.html +280 -0
- package/docs/design/NearPin.dc.html +260 -0
- package/docs/design/Pane600.dc.html +120 -0
- package/docs/design/Relations.dc.html +297 -0
- package/docs/design/Themes.dc.html +121 -0
- package/docs/design/TokenSystem.dc.html +136 -0
- package/docs/design/Tokens.dc.html +163 -0
- package/docs/design/Types1.dc.html +177 -0
- package/docs/design/Types2.dc.html +226 -0
- package/docs/design/Types3.dc.html +195 -0
- package/docs/design/Uses.dc.html +152 -0
- package/docs/design/Vision.dc.html +116 -0
- package/docs/design/Zoom.dc.html +82 -0
- package/docs/design/canvas.json +274 -0
- package/docs/design.md +217 -0
- package/docs/environment.md +1 -1
- package/docs/http-api.md +86 -16
- package/docs/mcp.md +202 -4
- package/docs/node-types.md +34 -10
- package/docs/plans/plan-009-tech-debt-backlog.md +1 -1
- package/docs/plans/plan-015-design-foundation-wave-0.md +177 -0
- package/docs/plans/plan-016-context-made-visible-wave-1.md +148 -0
- package/docs/product-vision-2026-09.md +47 -7
- package/docs/screenshot.png +0 -0
- package/docs/sdk.md +1 -0
- package/package.json +10 -4
- package/plugins/pmx-canvas/LICENSE +21 -0
- package/plugins/pmx-canvas/THIRD_PARTY_LICENSES.txt +331 -0
- package/plugins/pmx-canvas/assets/preview.png +0 -0
- package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/extension.mjs +930 -0
- package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/runtime.json +3 -0
- package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/runtime.mjs +194 -0
- package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/steering-delivery.mjs +79 -0
- package/plugins/pmx-canvas/mcp.json +12 -0
- package/plugins/pmx-canvas/plugin.json +24 -0
- package/plugins/pmx-canvas/runtime.json +3 -0
- package/plugins/pmx-canvas/runtime.mjs +194 -0
- package/plugins/pmx-canvas/start-mcp.mjs +51 -0
- package/plugins/pmx-canvas/tools.json +2560 -0
- package/skills/pmx-canvas/SKILL.md +29 -9
- package/skills/pmx-canvas/evals/evals.json +62 -0
- package/skills/pmx-canvas/references/ax-html-control-surface.md +6 -0
- package/skills/pmx-canvas/references/full-reference.md +11 -7
- package/skills/pmx-canvas/references/github-copilot-app-adapter.md +20 -8
- package/skills/pmx-canvas/references/installing-pmx-canvas.md +6 -6
- package/skills/pmx-canvas-testing/SKILL.md +5 -4
- package/src/cli/commands/copilot.ts +5 -0
- package/src/cli/commands/nodes.ts +3 -2
- package/src/cli/commands/view.ts +1 -1
- package/src/cli/index.ts +10 -4
- package/src/client/App.tsx +6 -1
- package/src/client/canvas/AgentPresenceLayer.tsx +3 -3
- package/src/client/canvas/AnnotationLayer.tsx +1 -1
- package/src/client/canvas/CanvasNode.tsx +32 -49
- package/src/client/canvas/CanvasViewport.tsx +0 -2
- package/src/client/canvas/CommandPalette.tsx +3 -2
- package/src/client/canvas/ContextMenu.tsx +11 -0
- package/src/client/canvas/EdgeLayer.tsx +1 -1
- package/src/client/canvas/ExportDialog.tsx +33 -6
- package/src/client/canvas/IntentLayer.tsx +2 -2
- package/src/client/canvas/Minimap.tsx +12 -7
- package/src/client/canvas/NodeContextMark.tsx +156 -0
- package/src/client/canvas/SessionPanel.tsx +4 -7
- package/src/client/canvas/SessionReceipt.tsx +114 -17
- package/src/client/canvas/ShortcutOverlay.tsx +6 -1
- package/src/client/canvas/SnapshotPanel.tsx +11 -2
- package/src/client/canvas/ToolRail.tsx +12 -9
- package/src/client/canvas/TopBar.tsx +16 -11
- package/src/client/icons.tsx +2 -12
- package/src/client/mcp-app/index.tsx +137 -0
- package/src/client/mcp-app/style.css +10 -0
- package/src/client/nodes/AttachmentNode.tsx +8 -1
- package/src/client/nodes/AxStepControls.tsx +1 -1
- package/src/client/nodes/ContextNode.tsx +9 -9
- package/src/client/nodes/ExtAppFrame.tsx +13 -8
- package/src/client/nodes/FileNode.tsx +8 -5
- package/src/client/nodes/HtmlNode.tsx +12 -2
- package/src/client/nodes/ImageNode.tsx +4 -2
- package/src/client/nodes/InlineMarkdownEditor.tsx +2 -1
- package/src/client/nodes/LedgerNode.tsx +2 -2
- package/src/client/nodes/MarkdownNode.tsx +44 -9
- package/src/client/nodes/McpAppNode.tsx +6 -4
- package/src/client/nodes/PromptNode.tsx +5 -17
- package/src/client/nodes/ResponseNode.tsx +3 -15
- package/src/client/nodes/StatusNode.tsx +2 -2
- package/src/client/nodes/StatusSummary.tsx +3 -1
- package/src/client/nodes/TraceNode.tsx +6 -4
- package/src/client/nodes/WebpageNode.tsx +1 -1
- package/src/client/nodes/ax-node-actions.ts +2 -2
- package/src/client/nodes/iframe-document-url.ts +3 -2
- package/src/client/nodes/markdown-sanitize.ts +10 -0
- package/src/client/nodes/surface-url.ts +10 -0
- package/src/client/nodes/use-surface-frame.ts +3 -1
- package/src/client/nodes/use-workbench-asset.ts +26 -0
- package/src/client/state/attention-bridge.ts +0 -8
- package/src/client/state/attention-store.ts +0 -17
- package/src/client/state/canvas-store.ts +4 -2
- package/src/client/state/context-status-store.ts +66 -0
- package/src/client/state/human-store.ts +2 -0
- package/src/client/state/iframe-mode.ts +5 -0
- package/src/client/state/intent-bridge.ts +10 -4
- package/src/client/state/near-pin-store.ts +53 -0
- package/src/client/state/presence-store.ts +5 -10
- package/src/client/state/session-store.ts +106 -9
- package/src/client/state/sse-bridge.ts +26 -7
- package/src/client/state/theme-override.ts +1 -1
- package/src/client/state/workbench-transport.ts +36 -0
- package/src/client/theme/global.css +726 -674
- package/src/client/theme/surface-theme.css +151 -46
- package/src/client/theme/tokens.ts +7 -11
- package/src/client/types.ts +10 -0
- package/src/json-render/renderer/index.css +6 -1
- package/src/json-render/renderer/index.tsx +0 -1
- package/src/json-render/server.ts +71 -14
- package/src/mcp/app-server.ts +64 -0
- package/src/mcp/canvas-access.ts +14 -11
- package/src/mcp/canvas-app.ts +318 -0
- package/src/mcp/server.ts +1 -1
- package/src/mcp/workbench-app.ts +211 -0
- package/src/server/agent-presence.ts +45 -6
- package/src/server/ax-context.ts +1 -1
- package/src/server/ax-state.ts +1 -1
- package/src/server/board-export.ts +5 -2
- package/src/server/canvas-db.ts +46 -12
- package/src/server/canvas-geometry.ts +64 -0
- package/src/server/canvas-operations.ts +7 -25
- package/src/server/canvas-state.ts +105 -15
- package/src/server/canvas-validation.ts +19 -4
- package/src/server/context-brief.ts +39 -2
- package/src/server/context-reads.ts +87 -15
- package/src/server/demo-state.json +31 -31
- package/src/server/html-surface.ts +4 -5
- package/src/server/index.ts +41 -5
- package/src/server/mcp-app-runtime.ts +11 -0
- package/src/server/operations/composites.ts +4 -3
- package/src/server/operations/http.ts +4 -4
- package/src/server/operations/invoker.ts +13 -4
- package/src/server/operations/mcp.ts +6 -0
- package/src/server/operations/ops/ax-read.ts +1 -1
- package/src/server/operations/ops/ax-timeline.ts +37 -0
- package/src/server/operations/ops/boards.ts +1 -1
- package/src/server/operations/ops/canvas-wire.ts +3 -6
- package/src/server/operations/ops/intent.ts +31 -2
- package/src/server/operations/ops/json-render.ts +6 -2
- package/src/server/operations/ops/nodes.ts +8 -76
- package/src/server/operations/ops/query.ts +8 -2
- package/src/server/operations/ops/snapshots.ts +4 -1
- package/src/server/operations/ops/viewport.ts +29 -5
- package/src/server/operations/registry.ts +41 -5
- package/src/server/scope-fence.ts +55 -10
- package/src/server/server.ts +83 -5
- package/src/server/spatial-analysis.ts +2 -2
- package/src/server/workboard.ts +6 -1
- package/src/{server → shared}/agent-context.ts +2 -2
- package/src/shared/agent-presence.ts +3 -15
- package/src/shared/canvas-app.ts +62 -0
- package/src/shared/themes.ts +5 -5
- package/src/client/canvas/FocusFieldLayer.tsx +0 -116
- package/src/client/canvas/kind-colors.ts +0 -23
|
@@ -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&family=IBM+Plex+Sans:wght@400;500;600&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>
|
|
@@ -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&family=IBM+Plex+Sans:wght@400;500;600&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>
|
|
@@ -0,0 +1,280 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>PMX Canvas — proposed</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&family=IBM+Plex+Sans:wght@400;500;600&display=swap">
|
|
12
|
+
<style>
|
|
13
|
+
body{margin:0}
|
|
14
|
+
</style>
|
|
15
|
+
</helmet>
|
|
16
|
+
<div style="position: relative; width: 1440px; height: 900px; overflow: hidden; background: {{c.bg}}; color: {{c.text}}; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.5">
|
|
17
|
+
|
|
18
|
+
<nav aria-label="Tools" style="position: absolute; left: 0; top: 0; width: 52px; height: 900px; box-sizing: border-box; padding: 8px 0; background: {{c.panel}}; border-right: 1px solid {{c.line}}; display: flex; flex-direction: column; align-items: center; gap: 4px">
|
|
19
|
+
<button aria-label="Home" style="{{s.rail}}"><svg width="20" height="20" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><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="width: 24px; height: 1px; margin: 6px 0; background: {{c.line}}"></div>
|
|
21
|
+
<button aria-label="Select (V)" style="{{s.railOn}}"><svg width="18" height="18" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><path d="M5 3.5l13 7.5-5.6 1.6L10.8 18z"></path></svg></button>
|
|
22
|
+
<button aria-label="Pan (Space)" style="{{s.rail}}"><svg width="18" height="18" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><path d="M8 12V6.5a1.5 1.5 0 0 1 3 0V11M11 10.5V5a1.5 1.5 0 0 1 3 0v6M14 10.5V7a1.5 1.5 0 0 1 3 0v6.5a6.5 6.5 0 0 1-6.5 6.5h-.6a6 6 0 0 1-5-2.7l-1.8-3a1.5 1.5 0 0 1 2.5-1.6L8 14"></path></svg></button>
|
|
23
|
+
<button aria-label="Connect (C)" style="{{s.rail}}"><svg width="18" height="18" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><circle cx="6" cy="6" r="2.2"></circle><circle cx="18" cy="18" r="2.2"></circle><path d="M7.6 7.6l8.8 8.8"></path></svg></button>
|
|
24
|
+
<div style="width: 24px; height: 1px; margin: 6px 0; background: {{c.line}}"></div>
|
|
25
|
+
<button aria-label="Markdown note (M)" style="{{s.rail}}"><svg width="18" height="18" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><rect x="4" y="5" width="16" height="14" rx="2"></rect><path d="M8 10h8M8 14h5"></path></svg></button>
|
|
26
|
+
<button aria-label="Attach files" style="{{s.rail}}"><svg width="18" height="18" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><path d="M12 15V4M7.5 8.5L12 4l4.5 4.5M5 19.5h14"></path></svg></button>
|
|
27
|
+
<button aria-label="Webpage (W)" style="{{s.rail}}"><svg width="18" height="18" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><rect x="3.5" y="5" width="17" height="14" rx="2"></rect><path d="M3.5 9h17"></path></svg></button>
|
|
28
|
+
<button aria-label="Group (G)" style="{{s.rail}}"><svg width="18" height="18" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 3 3"><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg></button>
|
|
29
|
+
<button aria-label="Draw (A)" style="{{s.rail}}"><svg width="18" height="18" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><path d="M4 20l4.2-1L19 8.2 15.8 5 5 15.8z"></path></svg></button>
|
|
30
|
+
<button aria-label="Text note" style="{{s.rail}}"><svg width="18" height="18" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><path d="M5.5 6h13M12 6v13"></path></svg></button>
|
|
31
|
+
<div style="width: 24px; height: 1px; margin: 6px 0; background: {{c.line}}"></div>
|
|
32
|
+
<button aria-label="Search and commands (⌘K)" style="{{s.rail}}"><svg width="18" height="18" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><circle cx="11" cy="11" r="6"></circle><path d="M20 20l-4.6-4.6"></path></svg></button>
|
|
33
|
+
<button aria-label="Arrange" style="{{s.rail}}"><svg width="18" height="18" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><rect x="4" y="4" width="6" height="6" rx="1.2"></rect><rect x="14" y="4" width="6" height="6" rx="1.2"></rect><rect x="4" y="14" width="6" height="6" rx="1.2"></rect><rect x="14" y="14" width="6" height="6" rx="1.2"></rect></svg></button>
|
|
34
|
+
<div style="flex: 1"></div>
|
|
35
|
+
<button aria-label="Settings: theme, snapshots, minimap, shortcuts, trace, feedback" style="{{s.rail}}"><svg width="18" height="18" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><path d="M4 7h9M17 7h3M4 17h3M11 17h9"></path><circle cx="15" cy="7" r="2"></circle><circle cx="9" cy="17" r="2"></circle></svg></button>
|
|
36
|
+
</nav>
|
|
37
|
+
|
|
38
|
+
<header style="position: absolute; left: 52px; top: 0; right: 0; height: 48px; box-sizing: border-box; padding: 0 12px 0 16px; display: flex; align-items: center; gap: 8px; background: {{c.panel}}; border-bottom: 1px solid {{c.line}}">
|
|
39
|
+
<span style="width: 8px; height: 8px; border-radius: 999px; background: {{c.ok}}"></span>
|
|
40
|
+
<button style="{{s.ghost}} font-size: 13px; font-weight: 600; color: {{c.text}}; gap: 6px">Release review<svg width="14" height="14" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round"><path d="M7 10l5 5 5-5"></path></svg></button>
|
|
41
|
+
<span style="font-size: 11px; color: {{c.dim}}">70 nodes</span>
|
|
42
|
+
<div style="flex: 1"></div>
|
|
43
|
+
<button style="{{s.pill}}"><span style="width: 7px; height: 7px; border-radius: 999px; background: {{c.dim}}"></span>Start agent session<span style="font-size: 11px; color: {{c.dim}}">beta</span></button>
|
|
44
|
+
<div style="width: 1px; height: 20px; margin: 0 4px; background: {{c.line}}"></div>
|
|
45
|
+
<button style="{{s.btn}}">Export</button>
|
|
46
|
+
<button style="{{s.btn}}">Present</button>
|
|
47
|
+
<div style="width: 1px; height: 20px; margin: 0 4px; background: {{c.line}}"></div>
|
|
48
|
+
<button aria-label="Zoom out" style="{{s.icon28}}"><svg width="16" height="16" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round"><circle cx="11" cy="11" r="6"></circle><path d="M8.5 11h5M20 20l-4.6-4.6"></path></svg></button>
|
|
49
|
+
<span style="font-size: 12px; font-weight: 500; color: {{c.soft}}; font-variant-numeric: tabular-nums; width: 40px; text-align: center">100%</span>
|
|
50
|
+
<button aria-label="Zoom in" style="{{s.icon28}}"><svg width="16" height="16" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round"><circle cx="11" cy="11" r="6"></circle><path d="M8.5 11h5M11 8.5v5M20 20l-4.6-4.6"></path></svg></button>
|
|
51
|
+
<button aria-label="Fit all (F)" style="{{s.icon28}}"><svg width="16" height="16" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round"><path d="M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5"></path></svg></button>
|
|
52
|
+
</header>
|
|
53
|
+
|
|
54
|
+
<main style="position: absolute; left: 52px; top: 48px; width: 1388px; height: 852px; overflow: hidden; background-color: {{c.bg}}; background-image: radial-gradient({{c.dot}} 1px, transparent 1.2px); background-size: 24px 24px">
|
|
55
|
+
|
|
56
|
+
<div style="position: absolute; left: 48px; top: 20px; width: 900px">
|
|
57
|
+
<h2 style="margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; color: {{c.text}}">① Start here</h2>
|
|
58
|
+
<p style="margin: 2px 0 0; font-size: 12px; color: {{c.muted}}">What the agent is doing, what context it holds, what it decided, and the tool calls behind it.</p>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<section style="{{s.nodePinned}}">
|
|
62
|
+
<div style="{{s.head}}">
|
|
63
|
+
<svg width="16" height="16" viewBox="0 0 24 24" style="flex-shrink: 0; color: {{c.muted}}; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><rect x="4" y="5" width="16" height="14" rx="2"></rect><path d="M8 10h8M8 14h5"></path></svg>
|
|
64
|
+
<span style="{{s.title}}">PMX Canvas — guided tour</span>
|
|
65
|
+
<button aria-label="Expand (Enter)" style="{{s.expand}}"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button>
|
|
66
|
+
<span role="img" aria-label="In agent context" style="{{s.pinOn}}"><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>
|
|
67
|
+
</div>
|
|
68
|
+
<div style="padding: 14px 16px; display: flex; flex-direction: column; gap: 10px">
|
|
69
|
+
<div style="font-size: 15px; font-weight: 600; line-height: 1.35">PMX Canvas</div>
|
|
70
|
+
<p style="margin: 0; font-size: 12px; line-height: 1.6; color: {{c.soft}}">An infinite spatial canvas that agents drive over <strong style="color: {{c.text}}; font-weight: 600">MCP</strong>, HTTP or the Bun SDK — and that humans steer by pinning nodes.</p>
|
|
71
|
+
<div style="display: grid; grid-template-columns: 120px 1fr; font-size: 12px; border: 1px solid {{c.line}}; border-radius: 6px; overflow: hidden">
|
|
72
|
+
<div style="{{s.th}}">Band</div><div style="{{s.th}}">Shows</div>
|
|
73
|
+
<div style="{{s.td}}">① Start here</div><div style="{{s.tdm}}">status · context · ledger · trace</div>
|
|
74
|
+
<div style="{{s.td}}">② Files & review</div><div style="{{s.tdm}}">file · CSV · diff · image · webpage</div>
|
|
75
|
+
<div style="{{s.td}}">③ Diagrams</div><div style="{{s.tdm}}">mermaid · raw HTML · MCP app</div>
|
|
76
|
+
<div style="{{s.td}}">④ Charts</div><div style="{{s.tdm}}">all 12 graph types</div>
|
|
77
|
+
</div>
|
|
78
|
+
<p style="margin: 0; font-size: 12px; line-height: 1.6; color: {{c.soft}}">Pin a node in the browser and the agent reads it back from <code style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 1px 5px; border-radius: 4px; background: {{c.panel2}}; color: {{c.text}}">canvas://pinned-context</code>.</p>
|
|
79
|
+
</div>
|
|
80
|
+
</section>
|
|
81
|
+
|
|
82
|
+
<section style="{{s.node}} left: 480px; top: 88px; width: 340px; height: 140px">
|
|
83
|
+
<div style="position: absolute; left: 0; right: 0; top: 0; height: 2px; background: {{c.attn}}"></div>
|
|
84
|
+
<div style="{{s.head}}">
|
|
85
|
+
<svg width="16" height="16" viewBox="0 0 24 24" style="flex-shrink: 0; color: {{c.muted}}; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><circle cx="12" cy="12" r="8"></circle><path d="M8 12h2l1.5-3 2 6 1.5-3h1"></path></svg>
|
|
86
|
+
<span style="{{s.title}}">Agent</span>
|
|
87
|
+
<span style="font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 999px; background: {{c.attnA}}; color: {{c.attn}}">agent editing</span>
|
|
88
|
+
<button aria-label="Add to context (P)" style="{{s.pinOff}}"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></button>
|
|
89
|
+
</div>
|
|
90
|
+
<div style="padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 12px">
|
|
91
|
+
<div style="display: flex; align-items: center; gap: 8px"><span style="width: 7px; height: 7px; border-radius: 999px; background: {{c.attn}}"></span><span style="font-weight: 600">Tooling</span><span style="color: {{c.muted}}">Rebuilding the release checklist</span></div>
|
|
92
|
+
<div style="font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: {{c.soft}}">canvas_render · release-auditor</div>
|
|
93
|
+
<div style="display: flex; align-items: center; gap: 10px"><div style="flex: 1; height: 4px; border-radius: 999px; background: {{c.line}}; overflow: hidden"><div style="width: 60%; height: 4px; background: {{c.ok}}"></div></div><span style="font-size: 11px; color: {{c.muted}}">3 of 5 gates green</span></div>
|
|
94
|
+
</div>
|
|
95
|
+
</section>
|
|
96
|
+
|
|
97
|
+
<div style="position: absolute; left: 649px; top: 228px; width: 1.5px; height: 44px; background: {{c.line}}"></div>
|
|
98
|
+
<span style="{{s.edgeLabel}} left: 626px; top: 239px">runs</span>
|
|
99
|
+
|
|
100
|
+
<div style="{{s.trace}} left: 480px; top: 272px; width: 340px; height: 56px">
|
|
101
|
+
<svg width="16" height="16" viewBox="0 0 24 24" style="flex-shrink: 0; color: {{c.ok}}; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg>
|
|
102
|
+
<div style="flex: 1; min-width: 0"><div style="font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500">canvas_query · search</div><div style="font-size: 11px; color: {{c.muted}}">7 nodes matched “release”</div></div>
|
|
103
|
+
<span style="font-size: 11px; color: {{c.dim}}; font-variant-numeric: tabular-nums">38 ms</span>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
<div style="position: absolute; left: 649px; top: 328px; width: 1.5px; height: 44px; background: {{c.line}}"></div>
|
|
107
|
+
<span style="{{s.edgeLabel}} left: 628px; top: 339px">then</span>
|
|
108
|
+
|
|
109
|
+
<div style="{{s.trace}} left: 480px; top: 372px; width: 340px; height: 56px">
|
|
110
|
+
<span style="width: 16px; display: flex; justify-content: center"><span style="width: 8px; height: 8px; border-radius: 999px; background: {{c.attn}}; box-shadow: 0 0 0 4px {{c.attnA}}"></span></span>
|
|
111
|
+
<div style="flex: 1; min-width: 0"><div style="font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500">edit_file · CHANGELOG.md</div><div style="font-size: 11px; color: {{c.muted}}">Writing 0.4.7 highlights</div></div>
|
|
112
|
+
<span style="font-size: 11px; color: {{c.dim}}; font-variant-numeric: tabular-nums">1.2 s</span>
|
|
113
|
+
</div>
|
|
114
|
+
|
|
115
|
+
<section style="{{s.node}} left: 852px; top: 88px; width: 420px; height: 340px">
|
|
116
|
+
<div style="{{s.head}}">
|
|
117
|
+
<svg width="16" height="16" viewBox="0 0 24 24" style="flex-shrink: 0; color: {{c.muted}}; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><path d="M4 4v16h16M8 16v-4M12 16V8M16 16v-6"></path></svg>
|
|
118
|
+
<span style="{{s.title}}">Merged PRs per week</span>
|
|
119
|
+
<button aria-label="Expand (Enter)" style="{{s.expand}}"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button>
|
|
120
|
+
<button aria-label="Add to context (P)" style="{{s.pinOff}}"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></button>
|
|
121
|
+
<button aria-label="More actions" style="{{s.ibtnOn}}"><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>
|
|
122
|
+
<button aria-label="Close" style="{{s.ibtn}}"><svg width="14" height="14" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round"><path d="M7 7l10 10M17 7L7 17"></path></svg></button>
|
|
123
|
+
</div>
|
|
124
|
+
<div style="padding: 12px 16px 14px; flex: 1; display: flex; flex-direction: column; gap: 10px">
|
|
125
|
+
<div style="display: flex; align-items: baseline; justify-content: space-between"><span style="font-size: 11px; color: {{c.muted}}">bar · W23–W28</span><span style="font-size: 11px; color: {{c.muted}}"><span style="display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: {{c.accent}}"></span>merged</span></div>
|
|
126
|
+
<div style="flex: 1; position: relative; display: flex; align-items: flex-end; gap: 18px; padding: 0 4px; border-bottom: 1px solid {{c.line}}; background-image: linear-gradient({{c.line}} 1px, transparent 1px); background-size: 100% 56px">
|
|
127
|
+
<sc-for list="{{bars}}" as="b" hint-placeholder-count="6">
|
|
128
|
+
<div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%"><div style="height: {{b.h}}px; border-radius: 4px 4px 0 0; background: {{b.fill}}"></div></div>
|
|
129
|
+
</sc-for>
|
|
130
|
+
</div>
|
|
131
|
+
<div style="display: flex; gap: 18px; padding: 0 4px">
|
|
132
|
+
<sc-for list="{{bars}}" as="b" hint-placeholder-count="6">
|
|
133
|
+
<span style="flex: 1; text-align: center; font-size: 11px; color: {{c.muted}}">{{b.label}}</span>
|
|
134
|
+
</sc-for>
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
</section>
|
|
138
|
+
|
|
139
|
+
<div style="position: absolute; left: 48px; top: 456px; width: 900px">
|
|
140
|
+
<h2 style="margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; color: {{c.text}}">② Files & review</h2>
|
|
141
|
+
<p style="margin: 2px 0 0; font-size: 12px; color: {{c.muted}}">Inline file text, unified diffs, images and cached webpages.</p>
|
|
142
|
+
</div>
|
|
143
|
+
|
|
144
|
+
<section style="{{s.node}} left: 48px; top: 524px; width: 400px; height: 176px">
|
|
145
|
+
<div style="{{s.head}}">
|
|
146
|
+
<svg width="16" height="16" viewBox="0 0 24 24" style="flex-shrink: 0; color: {{c.muted}}; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><rect x="3.5" y="5" width="17" height="14" rx="2"></rect><path d="M3.5 9h17"></path></svg>
|
|
147
|
+
<span style="{{s.title}}">Model Context Protocol — Resources</span>
|
|
148
|
+
<button aria-label="Expand (Enter)" style="{{s.expand}}"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button>
|
|
149
|
+
<button aria-label="Add to context (P)" style="{{s.pinOff}}"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></button>
|
|
150
|
+
</div>
|
|
151
|
+
<div style="padding: 10px 14px; display: flex; flex-direction: column; gap: 8px">
|
|
152
|
+
<div style="display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; background: {{c.warnA}}; color: {{c.warn}}; font-size: 12px; font-weight: 500"><svg width="14" height="14" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round"><path d="M12 4l9 16H3zM12 10v4M12 17v.5"></path></svg>Showing cached copy — live fetch failed</div>
|
|
153
|
+
<div style="font-size: 13px; font-weight: 600">Resources</div>
|
|
154
|
+
<p style="margin: 0; font-size: 12px; line-height: 1.6; color: {{c.soft}}">Servers expose data and content that clients can read and use as context for model interactions.</p>
|
|
155
|
+
</div>
|
|
156
|
+
</section>
|
|
157
|
+
|
|
158
|
+
<section style="{{s.node}} left: 480px; top: 524px; width: 340px; height: 176px">
|
|
159
|
+
<div style="{{s.head}}">
|
|
160
|
+
<svg width="16" height="16" viewBox="0 0 24 24" style="flex-shrink: 0; color: {{c.muted}}; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><path d="M7 3.5h7l4 4V20.5H6V3.5zM14 3.5V8h4"></path></svg>
|
|
161
|
+
<span style="{{s.title}}">node-sizes.ts</span>
|
|
162
|
+
<span style="font-size: 11px; color: {{c.dim}}">src/shared</span>
|
|
163
|
+
<button aria-label="Expand (Enter)" style="{{s.expand}}"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button>
|
|
164
|
+
<button aria-label="Add to context (P)" style="{{s.pinOff}}"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></button>
|
|
165
|
+
</div>
|
|
166
|
+
<div style="flex: 1; padding: 10px 14px; background: {{c.codeBg}}; font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.6; color: {{c.soft}}; white-space: pre">export const NODE_MIN = { width: 180, height: 96 };
|
|
167
|
+
|
|
168
|
+
export function clampSize(size) {
|
|
169
|
+
return {
|
|
170
|
+
width: Math.max(size.width, NODE_MIN.width),
|
|
171
|
+
height: Math.max(size.height, NODE_MIN.height),</div>
|
|
172
|
+
</section>
|
|
173
|
+
|
|
174
|
+
<section style="{{s.node}} left: 852px; top: 524px; width: 420px; height: 176px">
|
|
175
|
+
<div style="{{s.head}}">
|
|
176
|
+
<svg width="16" height="16" viewBox="0 0 24 24" style="flex-shrink: 0; color: {{c.muted}}; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><rect x="4" y="3" width="16" height="18" rx="2"></rect><path d="M12 6.5v6M9 9.5h6M9 17h6"></path></svg>
|
|
177
|
+
<span style="{{s.title}}">Readability floor — 2 files</span>
|
|
178
|
+
<span style="font-size: 11px; color: {{c.ok}}">+2</span><span style="font-size: 11px; color: {{c.danger}}">−2</span>
|
|
179
|
+
<button aria-label="Expand (Enter)" style="{{s.expand}}"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button>
|
|
180
|
+
<button aria-label="Add to context (P)" style="{{s.pinOff}}"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></button>
|
|
181
|
+
</div>
|
|
182
|
+
<div style="flex: 1; padding: 8px 0; background: {{c.codeBg}}; font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.7">
|
|
183
|
+
<div style="padding: 0 14px; color: {{c.dim}}">@@ src/client/theme/global.css</div>
|
|
184
|
+
<div style="padding: 0 14px; background: {{c.dangerA}}; color: {{c.danger}}">- font-size: 10px;</div>
|
|
185
|
+
<div style="padding: 0 14px; background: {{c.okA}}; color: {{c.ok}}">+ font-size: var(--fs-meta);</div>
|
|
186
|
+
<div style="padding: 0 14px; background: {{c.dangerA}}; color: {{c.danger}}">- border-radius: 12px 12px 8px 8px;</div>
|
|
187
|
+
<div style="padding: 0 14px; background: {{c.okA}}; color: {{c.ok}}">+ border-radius: var(--r-node);</div>
|
|
188
|
+
</div>
|
|
189
|
+
</section>
|
|
190
|
+
|
|
191
|
+
<button style="position: absolute; right: 16px; top: 16px; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 12px; border-radius: 999px; border: 1px solid {{c.line}}; background: {{c.panel}}; box-shadow: {{c.e2}}; color: {{c.soft}}; font-family: inherit; font-size: 12px; font-weight: 500">Updates<span style="min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: {{c.accent}}; color: {{c.onAccent}}; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center">1</span></button>
|
|
192
|
+
|
|
193
|
+
<div style="position: absolute; left: 594px; bottom: 20px; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 12px; border-radius: 999px; border: 1px solid {{c.accentRing}}; background: {{c.panel}}; box-shadow: {{c.e2}}; font-size: 12px; font-weight: 500; color: {{c.accent}}">
|
|
194
|
+
<svg width="14" height="14" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg>
|
|
195
|
+
4 in context
|
|
196
|
+
<button aria-label="Clear all context pins" style="width: 22px; height: 22px; border: 0; border-radius: 999px; background: {{c.accentA}}; color: {{c.accent}}; display: flex; align-items: center; justify-content: center; padding: 0"><svg width="12" height="12" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round"><path d="M7 7l10 10M17 7L7 17"></path></svg></button>
|
|
197
|
+
</div>
|
|
198
|
+
|
|
199
|
+
<div style="position: absolute; right: 16px; bottom: 16px; width: 200px; height: 130px; box-sizing: border-box; border-radius: 10px; border: 1px solid {{c.line}}; background: {{c.panel}}; box-shadow: {{c.e2}}; overflow: hidden">
|
|
200
|
+
<sc-for list="{{mini}}" as="m" hint-placeholder-count="12">
|
|
201
|
+
<div style="position: absolute; left: {{m.x}}px; top: {{m.y}}px; width: {{m.w}}px; height: {{m.h}}px; border-radius: 2px; background: {{m.fill}}"></div>
|
|
202
|
+
</sc-for>
|
|
203
|
+
<div style="position: absolute; left: 10px; top: 10px; width: 64px; height: 44px; border: 1.5px solid {{c.soft}}; border-radius: 3px"></div>
|
|
204
|
+
<span style="position: absolute; right: 8px; bottom: 6px; font-size: 11px; color: {{c.dim}}">100%</span>
|
|
205
|
+
</div>
|
|
206
|
+
|
|
207
|
+
</main>
|
|
208
|
+
</div>
|
|
209
|
+
</x-dc>
|
|
210
|
+
<script type="text/x-dc" data-dc-script data-props='{"theme":{"editor":"enum","options":["harbor","daylight"],"default":"harbor"},"$preview":{"width":1440,"height":900}}'>
|
|
211
|
+
class Component extends DCLogic {
|
|
212
|
+
renderVals() {
|
|
213
|
+
var themes = {
|
|
214
|
+
harbor: {
|
|
215
|
+
bg: '#081524', dot: 'rgba(142,163,189,0.14)', panel: '#0f1d31', panel2: '#13243b', line: '#1b2c44',
|
|
216
|
+
text: '#e6eef7', soft: '#b9c6d6', muted: '#8ea3bd', dim: '#6b7d94',
|
|
217
|
+
accent: '#4BBCFF', accentA: 'rgba(75,188,255,0.14)', accentRing: 'rgba(75,188,255,0.24)', onAccent: '#081524',
|
|
218
|
+
attn: '#B388FF', attnA: 'rgba(179,136,255,0.16)',
|
|
219
|
+
warn: '#f4c542', warnA: 'rgba(244,197,66,0.12)', ok: '#2fd07f', okA: 'rgba(47,208,127,0.10)',
|
|
220
|
+
danger: '#ff6a7f', dangerA: 'rgba(255,106,127,0.10)', codeBg: '#0b1828',
|
|
221
|
+
e1: '0 1px 2px rgba(0,0,0,0.4), 0 6px 20px rgba(0,0,0,0.24)', e2: '0 10px 30px rgba(0,0,0,0.45)',
|
|
222
|
+
mm: 'rgba(142,163,189,0.30)', bar: 'rgba(75,188,255,0.45)'
|
|
223
|
+
},
|
|
224
|
+
daylight: {
|
|
225
|
+
bg: '#F6F7F9', dot: 'rgba(11,23,38,0.12)', panel: '#FFFFFF', panel2: '#F2F4F7', line: '#DDE2E9',
|
|
226
|
+
text: '#0B1726', soft: '#3d4d63', muted: '#55657a', dim: '#6f7d90',
|
|
227
|
+
accent: '#1A7ABF', accentA: 'rgba(26,122,191,0.10)', accentRing: 'rgba(26,122,191,0.20)', onAccent: '#FFFFFF',
|
|
228
|
+
attn: '#7C4DDB', attnA: 'rgba(124,77,219,0.10)',
|
|
229
|
+
warn: '#94600A', warnA: 'rgba(214,150,30,0.14)', ok: '#1E7F51', okA: 'rgba(30,143,90,0.10)',
|
|
230
|
+
danger: '#B8344A', dangerA: 'rgba(201,58,79,0.08)', codeBg: '#F7F9FB',
|
|
231
|
+
e1: '0 1px 2px rgba(11,23,38,0.06), 0 4px 14px rgba(11,23,38,0.06)', e2: '0 10px 30px rgba(11,23,38,0.12)',
|
|
232
|
+
mm: 'rgba(11,23,38,0.14)', bar: 'rgba(26,122,191,0.35)'
|
|
233
|
+
}
|
|
234
|
+
};
|
|
235
|
+
var c = themes[this.props.theme] || themes.harbor;
|
|
236
|
+
var btnBase = 'display:flex;align-items:center;justify-content:center;border:0;padding:0;font-family:inherit;cursor:pointer;';
|
|
237
|
+
var s = {
|
|
238
|
+
rail: btnBase + 'width:36px;height:36px;border-radius:6px;background:transparent;color:' + c.muted + ';',
|
|
239
|
+
railOn: btnBase + 'width:36px;height:36px;border-radius:6px;background:' + c.accentA + ';color:' + c.accent + ';',
|
|
240
|
+
ghost: btnBase + 'height:30px;padding:0 6px;border-radius:6px;background:transparent;',
|
|
241
|
+
pill: btnBase + 'gap:8px;height:30px;padding:0 12px;border-radius:999px;border:1px solid ' + c.line + ';background:transparent;color:' + c.muted + ';font-size:12px;font-weight:500;',
|
|
242
|
+
btn: btnBase + 'height:30px;padding:0 12px;border-radius:6px;border:1px solid ' + c.line + ';background:' + c.panel2 + ';color:' + c.text + ';font-size:12px;font-weight:500;',
|
|
243
|
+
icon28: btnBase + 'width:28px;height:28px;border-radius:6px;background:transparent;color:' + c.muted + ';',
|
|
244
|
+
ibtn: btnBase + 'width:24px;height:24px;border-radius:6px;background:transparent;color:' + c.muted + ';',
|
|
245
|
+
ibtnOn: btnBase + 'width:24px;height:24px;border-radius:6px;background:' + c.panel2 + ';color:' + c.text + ';',
|
|
246
|
+
node: 'position:absolute;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;background:' + c.panel + ';border:1px solid ' + c.line + ';border-radius:10px;box-shadow:' + c.e1 + ';',
|
|
247
|
+
nodePinned: 'position:absolute;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;background:' + c.panel + ';border:1.5px solid ' + c.accent + ';border-radius:10px;box-shadow:0 0 0 3px ' + c.accentRing + ', ' + c.e1 + ';left:48px;top:88px;width:400px;height:340px;',
|
|
248
|
+
pinOff: btnBase + 'flex-shrink:0;width:18px;height:18px;box-sizing:border-box;border-radius:999px;border:1.5px solid ' + c.dim + ';background:transparent;color:' + c.soft + ';',
|
|
249
|
+
expand: btnBase + 'flex-shrink:0;width:22px;height:22px;border-radius:6px;background:transparent;color:' + c.soft + ';',
|
|
250
|
+
pinOn: 'flex-shrink:0;width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:' + c.accent + ';color:' + c.onAccent + ';',
|
|
251
|
+
head: 'position:relative;display:flex;align-items:center;gap:8px;height:36px;flex-shrink:0;box-sizing:border-box;padding:0 8px 0 12px;border-bottom:1px solid ' + c.line + ';',
|
|
252
|
+
title: 'flex:1;min-width:0;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:' + c.text + ';',
|
|
253
|
+
trace: 'position:absolute;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:0 14px;background:' + c.panel + ';border:1px solid ' + c.line + ';border-radius:10px;box-shadow:' + c.e1 + ';',
|
|
254
|
+
edgeLabel: 'position:absolute;font-size:11px;line-height:20px;padding:0 8px;border-radius:999px;border:1px solid ' + c.line + ';background:' + c.panel2 + ';color:' + c.muted + ';',
|
|
255
|
+
th: 'padding:5px 10px;font-size:11px;font-weight:600;color:' + c.muted + ';background:' + c.panel2 + ';border-bottom:1px solid ' + c.line + ';',
|
|
256
|
+
td: 'padding:5px 10px;border-bottom:1px solid ' + c.line + ';color:' + c.text + ';',
|
|
257
|
+
tdm: 'padding:5px 10px;border-bottom:1px solid ' + c.line + ';color:' + c.muted + ';'
|
|
258
|
+
};
|
|
259
|
+
var heights = [92, 84, 118, 106, 128, 150];
|
|
260
|
+
var labels = ['W23', 'W24', 'W25', 'W26', 'W27', 'W28'];
|
|
261
|
+
var bars = heights.map(function (h, i) {
|
|
262
|
+
return { h: h, label: labels[i], fill: i === heights.length - 1 ? c.accent : c.bar };
|
|
263
|
+
});
|
|
264
|
+
var mini = [
|
|
265
|
+
{ x: 10, y: 10, w: 22, h: 18, fill: c.accent },
|
|
266
|
+
{ x: 36, y: 10, w: 18, h: 8, fill: c.mm }, { x: 36, y: 21, w: 18, h: 3, fill: c.mm }, { x: 36, y: 26, w: 18, h: 3, fill: c.mm },
|
|
267
|
+
{ x: 58, y: 10, w: 22, h: 18, fill: c.mm },
|
|
268
|
+
{ x: 10, y: 36, w: 22, h: 10, fill: c.mm }, { x: 36, y: 36, w: 18, h: 10, fill: c.mm }, { x: 58, y: 36, w: 22, h: 10, fill: c.mm },
|
|
269
|
+
{ x: 92, y: 10, w: 26, h: 20, fill: c.mm }, { x: 122, y: 10, w: 26, h: 20, fill: c.mm }, { x: 152, y: 10, w: 26, h: 20, fill: c.mm },
|
|
270
|
+
{ x: 92, y: 36, w: 26, h: 20, fill: c.mm }, { x: 122, y: 36, w: 26, h: 20, fill: c.mm }, { x: 152, y: 36, w: 26, h: 20, fill: c.mm },
|
|
271
|
+
{ x: 10, y: 62, w: 22, h: 18, fill: c.mm }, { x: 36, y: 62, w: 22, h: 18, fill: c.mm }, { x: 62, y: 62, w: 22, h: 18, fill: c.mm },
|
|
272
|
+
{ x: 92, y: 62, w: 26, h: 20, fill: c.mm }, { x: 122, y: 62, w: 26, h: 20, fill: c.mm }, { x: 152, y: 62, w: 26, h: 20, fill: c.mm },
|
|
273
|
+
{ x: 10, y: 88, w: 50, h: 12, fill: c.mm }, { x: 92, y: 88, w: 26, h: 20, fill: c.mm }, { x: 122, y: 88, w: 26, h: 20, fill: c.mm }
|
|
274
|
+
];
|
|
275
|
+
return { c: c, s: s, bars: bars, mini: mini };
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
</script>
|
|
279
|
+
</body>
|
|
280
|
+
</html>
|