pmx-canvas 0.8.2 → 0.9.1
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/runtime.json +1 -1
- package/.github/extensions/pmx-canvas/tools.json +601 -22
- package/CHANGELOG.md +59 -0
- package/Readme.md +131 -532
- package/dist/canvas/global.css +2724 -476
- package/dist/canvas/index.js +168 -107
- package/dist/canvas/mcp-app.html +2899 -596
- package/dist/json-render/index.js +20 -20
- package/dist/types/client/canvas/BarHint.d.ts +12 -2
- package/dist/types/client/canvas/BoardLinkDialog.d.ts +3 -1
- package/dist/types/client/canvas/BoardPinButton.d.ts +10 -0
- package/dist/types/client/canvas/BoardSwitcher.d.ts +1 -1
- package/dist/types/client/canvas/CanvasViewport.d.ts +1 -1
- package/dist/types/client/canvas/CommandBar.d.ts +3 -4
- package/dist/types/client/canvas/ConnectionBanner.d.ts +2 -1
- package/dist/types/client/canvas/ContextChip.d.ts +3 -0
- package/dist/types/client/canvas/CrossBoardReferences.d.ts +5 -0
- package/dist/types/client/canvas/EdgeLayer.d.ts +14 -3
- package/dist/types/client/canvas/EmptyState.d.ts +4 -4
- package/dist/types/client/canvas/HomeGraphView.d.ts +2 -0
- package/dist/types/client/canvas/HomeMapView.d.ts +1 -0
- package/dist/types/client/canvas/HomeReviewView.d.ts +6 -0
- package/dist/types/client/canvas/HomeView.d.ts +9 -7
- package/dist/types/client/canvas/KnowledgeDialog.d.ts +4 -0
- package/dist/types/client/canvas/LifecycleChrome.d.ts +5 -0
- package/dist/types/client/canvas/LifecycleFields.d.ts +7 -0
- package/dist/types/client/canvas/LifecyclePanel.d.ts +1 -0
- package/dist/types/client/canvas/MemoryInspector.d.ts +7 -0
- package/dist/types/client/canvas/NearPinLayer.d.ts +14 -0
- package/dist/types/client/canvas/NodeContextMark.d.ts +40 -7
- package/dist/types/client/canvas/RelationPresetsDialog.d.ts +4 -0
- package/dist/types/client/canvas/RelationsPanel.d.ts +4 -0
- package/dist/types/client/canvas/SessionPanel.d.ts +2 -0
- package/dist/types/client/canvas/canvas-area.d.ts +1 -1
- package/dist/types/client/canvas/graph-geometry.d.ts +27 -0
- package/dist/types/client/canvas/graph-model.d.ts +37 -0
- package/dist/types/client/canvas/memory-layout.d.ts +23 -0
- package/dist/types/client/canvas/use-chrome-height.d.ts +2 -0
- package/dist/types/client/canvas/use-focus-trap.d.ts +1 -0
- package/dist/types/client/canvas/use-memory-graph.d.ts +8 -0
- package/dist/types/client/canvas/use-pan-zoom.d.ts +4 -1
- package/dist/types/client/icons.d.ts +0 -10
- package/dist/types/client/nodes/AxStepControls.d.ts +1 -1
- package/dist/types/client/nodes/InlineMarkdownEditor.d.ts +4 -4
- package/dist/types/client/nodes/MarkdownNode.d.ts +5 -1
- package/dist/types/client/nodes/McpAppNode.d.ts +4 -4
- package/dist/types/client/nodes/viewer-runtime-state.d.ts +1 -1
- package/dist/types/client/state/boards-store.d.ts +81 -9
- package/dist/types/client/state/canvas-store.d.ts +14 -1
- package/dist/types/client/state/context-chip-store.d.ts +22 -0
- package/dist/types/client/state/context-status-store.d.ts +35 -0
- package/dist/types/client/state/human-store.d.ts +2 -1
- package/dist/types/client/state/intent-bridge.d.ts +11 -8
- package/dist/types/client/state/knowledge-store.d.ts +22 -0
- package/dist/types/client/state/near-pin-store.d.ts +44 -1
- package/dist/types/client/state/presence-store.d.ts +4 -4
- package/dist/types/client/state/presentation.d.ts +28 -0
- package/dist/types/client/state/relation-store.d.ts +10 -0
- package/dist/types/client/state/session-store.d.ts +41 -2
- package/dist/types/client/state/workspace-settings.d.ts +7 -0
- package/dist/types/client/types.d.ts +13 -1
- package/dist/types/client/utils/keyboard.d.ts +2 -0
- package/dist/types/client/utils/time-ago.d.ts +4 -0
- package/dist/types/mcp/context-uri-template.d.ts +3 -1
- package/dist/types/server/agent-presence.d.ts +10 -3
- package/dist/types/server/ax-context.d.ts +1 -1
- package/dist/types/server/canvas-db.d.ts +30 -7
- package/dist/types/server/canvas-operations.d.ts +24 -2
- package/dist/types/server/canvas-provenance.d.ts +22 -2
- package/dist/types/server/canvas-serialization.d.ts +2 -0
- package/dist/types/server/canvas-state.d.ts +93 -15
- package/dist/types/server/canvas-validation.d.ts +1 -1
- package/dist/types/server/context-brief.d.ts +94 -6
- package/dist/types/server/context-reads.d.ts +33 -7
- package/dist/types/server/edit-summary.d.ts +20 -0
- package/dist/types/server/index.d.ts +71 -10
- package/dist/types/server/knowledge-lifecycle.d.ts +221 -0
- package/dist/types/server/lifecycle-status.d.ts +10 -0
- package/dist/types/server/memory-graph.d.ts +9 -0
- package/dist/types/server/mutation-history.d.ts +2 -0
- package/dist/types/server/operations/ops/ax-shared.d.ts +1 -1
- package/dist/types/server/operations/ops/boards.d.ts +2 -1
- package/dist/types/server/operations/ops/lifecycle.d.ts +2 -0
- package/dist/types/server/operations/ops/memory-graph.d.ts +2 -0
- package/dist/types/server/operations/ops/nodes.d.ts +5 -0
- package/dist/types/server/operations/ops/query.d.ts +23 -0
- package/dist/types/server/operations/registry.d.ts +1 -0
- package/dist/types/server/placement.d.ts +7 -0
- package/dist/types/server/scope-fence.d.ts +2 -1
- package/dist/types/server/spatial-analysis.d.ts +6 -3
- package/dist/types/server/tour-control.d.ts +32 -0
- package/dist/types/server/wiki-links.d.ts +14 -0
- package/dist/types/server/workbench-auth.d.ts +2 -0
- package/dist/types/shared/agent-context.d.ts +2 -0
- package/dist/types/shared/agent-presence.d.ts +15 -12
- package/dist/types/shared/auto-arrange.d.ts +1 -0
- package/dist/types/shared/boards.d.ts +4 -4
- package/dist/types/shared/knowledge-lifecycle.d.ts +41 -0
- package/dist/types/shared/knowledge-presets.d.ts +6 -0
- package/dist/types/shared/lifecycle-status.d.ts +24 -0
- package/dist/types/shared/memory-graph.d.ts +53 -0
- package/dist/types/shared/relations.d.ts +68 -0
- package/dist/types/shared/semantic-attention.d.ts +2 -0
- package/dist/types/shared/tour.d.ts +38 -0
- package/dist/types/shared/workspace-settings.d.ts +11 -0
- package/docs/RELEASE.md +21 -3
- package/docs/adr-001-bun-only-runtime.md +7 -1
- package/docs/adr-002-shared-product-separate-runtimes.md +93 -0
- package/docs/api-reference.md +109 -0
- package/docs/ax-host-adapter-contract.md +1 -1
- package/docs/ax-state-contract.md +5 -4
- package/docs/cli.md +153 -15
- package/docs/demos/pmx-canvas-demo.mp4 +0 -0
- package/docs/design/AgentContext.dc.html +3 -3
- package/docs/design/BoardPins.dc.html +37 -22
- package/docs/design/Categories.dc.html +208 -0
- package/docs/design/CategoryEditor.dc.html +33 -0
- package/docs/design/Chrome.dc.html +52 -9
- package/docs/design/ContextChip.dc.html +224 -0
- package/docs/design/ContextChip600.dc.html +136 -0
- package/docs/design/EmptyState.dc.html +45 -0
- package/docs/design/Flows.dc.html +23 -1
- package/docs/design/HeaderMarks.dc.html +183 -0
- package/docs/design/Home.dc.html +19 -1
- package/docs/design/HomeGraph.dc.html +86 -202
- package/docs/design/HomeMap.dc.html +23 -1
- package/docs/design/HomeTeam.dc.html +32 -14
- package/docs/design/Lifecycle.dc.html +22 -0
- package/docs/design/Lifecycle600.dc.html +18 -0
- package/docs/design/LifecycleVariants.dc.html +157 -0
- package/docs/design/LinkAuthorship.dc.html +139 -0
- package/docs/design/LinksChanged.dc.html +203 -0
- package/docs/design/LinksOptions.dc.html +137 -0
- package/docs/design/LinksOptions600.dc.html +134 -0
- package/docs/design/NearPin.dc.html +9 -10
- package/docs/design/Pane600.dc.html +4 -3
- package/docs/design/Relations.dc.html +3 -2
- package/docs/design/Restore.dc.html +152 -0
- package/docs/design/SeeChange.dc.html +267 -0
- package/docs/design/Uses.dc.html +12 -6
- package/docs/design/canvas.json +146 -19
- package/docs/design.md +449 -16
- package/docs/environment.md +0 -1
- package/docs/evals/curation-effect.md +128 -0
- package/docs/http-api.md +459 -37
- package/docs/mcp.md +146 -18
- package/docs/node-types.md +58 -3
- package/docs/plans/design-gaps-2026-10-08.md +53 -0
- package/docs/plans/plan-009-tech-debt-backlog.md +379 -0
- package/docs/plans/plan-016-context-made-visible-wave-1.md +150 -5
- package/docs/plans/plan-017-knowledge-categories-and-lifecycle.md +175 -0
- package/docs/plans/plan-018-connected-memory-wave-2.md +594 -0
- package/docs/plans/plan-019-post-0.9-roadmap.md +198 -0
- package/docs/product-context-vision-2026-09.md +17 -1
- package/docs/product-vision-2026-09.md +1082 -43
- package/docs/product-vision-review-2026-09.md +13 -1
- package/docs/screenshots/workbench-live-dark.png +0 -0
- package/docs/screenshots/workbench-live-light.png +0 -0
- package/docs/sdk.md +62 -2
- package/package.json +1 -1
- package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/runtime.json +1 -1
- package/plugins/pmx-canvas/plugin.json +1 -1
- package/plugins/pmx-canvas/runtime.json +1 -1
- package/plugins/pmx-canvas/tools.json +601 -22
- package/skills/pmx-canvas/SKILL.md +216 -42
- package/skills/pmx-canvas/evals/evals.json +224 -0
- package/skills/pmx-canvas/references/full-reference.md +120 -21
- package/skills/pmx-canvas/references/github-copilot-app-adapter.md +2 -2
- package/skills/pmx-canvas/references/importing-context.md +132 -0
- package/skills/pmx-canvas/references/installing-pmx-canvas.md +6 -6
- package/skills/pmx-canvas/references/tours-and-recording.md +16 -1
- package/skills/pmx-canvas-testing/SKILL.md +20 -0
- package/src/cli/agent.ts +2 -0
- package/src/cli/commands/ax.ts +12 -0
- package/src/cli/commands/boards.ts +88 -11
- package/src/cli/commands/edges.ts +28 -0
- package/src/cli/commands/groups.ts +7 -0
- package/src/cli/commands/nodes.ts +1 -0
- package/src/cli/commands/query.ts +34 -2
- package/src/cli/commands/record.ts +199 -48
- package/src/cli/index.ts +6 -1
- package/src/client/App.tsx +177 -70
- package/src/client/canvas/AttentionHistory.tsx +0 -2
- package/src/client/canvas/BarHint.tsx +40 -2
- package/src/client/canvas/BoardCopyDialog.tsx +1 -1
- package/src/client/canvas/BoardFolderDialog.tsx +7 -7
- package/src/client/canvas/BoardLinkDialog.tsx +138 -33
- package/src/client/canvas/BoardPinButton.tsx +33 -0
- package/src/client/canvas/BoardSwitcher.tsx +26 -40
- package/src/client/canvas/CanvasNode.tsx +360 -237
- package/src/client/canvas/CanvasViewport.tsx +45 -7
- package/src/client/canvas/CommandBar.tsx +29 -23
- package/src/client/canvas/CommandPalette.tsx +5 -12
- package/src/client/canvas/ConnectionBanner.tsx +3 -3
- package/src/client/canvas/ContextChip.tsx +296 -0
- package/src/client/canvas/ContextMenu.tsx +63 -5
- package/src/client/canvas/CrossBoardReferences.tsx +60 -0
- package/src/client/canvas/EdgeLayer.tsx +339 -76
- package/src/client/canvas/EmptyState.tsx +33 -18
- package/src/client/canvas/ExpandedNodeOverlay.tsx +72 -40
- package/src/client/canvas/ExternalWriters.tsx +57 -42
- package/src/client/canvas/HomeGraphView.tsx +942 -0
- package/src/client/canvas/HomeMapView.tsx +641 -0
- package/src/client/canvas/HomeReviewView.tsx +167 -0
- package/src/client/canvas/HomeView.tsx +687 -160
- package/src/client/canvas/IntentLayer.tsx +19 -12
- package/src/client/canvas/KnowledgeDialog.tsx +488 -0
- package/src/client/canvas/LifecycleChrome.tsx +133 -0
- package/src/client/canvas/LifecycleFields.tsx +91 -0
- package/src/client/canvas/LifecyclePanel.tsx +543 -0
- package/src/client/canvas/MemoryInspector.tsx +104 -0
- package/src/client/canvas/Minimap.tsx +3 -3
- package/src/client/canvas/NearPinLayer.tsx +187 -0
- package/src/client/canvas/NodeContextMark.tsx +175 -97
- package/src/client/canvas/Presentation.tsx +23 -57
- package/src/client/canvas/RelationPresetsDialog.tsx +413 -0
- package/src/client/canvas/RelationsPanel.tsx +82 -0
- package/src/client/canvas/SelectionBar.tsx +3 -6
- package/src/client/canvas/SessionPanel.tsx +90 -50
- package/src/client/canvas/SessionReceipt.tsx +311 -39
- package/src/client/canvas/ShortcutOverlay.tsx +1 -1
- package/src/client/canvas/SnapshotPanel.tsx +27 -36
- package/src/client/canvas/ToolRail.tsx +367 -192
- package/src/client/canvas/TopBar.tsx +354 -124
- package/src/client/canvas/canvas-area.ts +10 -3
- package/src/client/canvas/graph-geometry.ts +195 -0
- package/src/client/canvas/graph-model.ts +254 -0
- package/src/client/canvas/memory-layout.ts +106 -0
- package/src/client/canvas/use-chrome-height.ts +20 -0
- package/src/client/canvas/use-focus-trap.ts +31 -5
- package/src/client/canvas/use-memory-graph.ts +58 -0
- package/src/client/canvas/use-node-drag.ts +2 -1
- package/src/client/canvas/use-pan-zoom.ts +64 -7
- package/src/client/icons.tsx +0 -63
- package/src/client/mcp-app/style.css +0 -6
- package/src/client/nodes/AxStepControls.tsx +74 -50
- package/src/client/nodes/BoardNode.tsx +5 -1
- package/src/client/nodes/ContextNode.tsx +18 -11
- package/src/client/nodes/ExtAppFrame.tsx +6 -3
- package/src/client/nodes/FileNode.tsx +46 -42
- package/src/client/nodes/HtmlNode.tsx +32 -0
- package/src/client/nodes/ImageNode.tsx +1 -1
- package/src/client/nodes/InlineFormatBar.tsx +6 -9
- package/src/client/nodes/InlineMarkdownEditor.tsx +56 -17
- package/src/client/nodes/MarkdownNode.tsx +377 -109
- package/src/client/nodes/McpAppNode.tsx +50 -20
- package/src/client/nodes/MdFormatBar.tsx +21 -18
- package/src/client/nodes/PromptNode.tsx +1 -1
- package/src/client/nodes/ResponseNode.tsx +1 -1
- package/src/client/nodes/viewer-runtime-state.ts +54 -22
- package/src/client/state/attention-bridge.ts +64 -15
- package/src/client/state/boards-store.ts +193 -39
- package/src/client/state/canvas-store.ts +99 -12
- package/src/client/state/context-chip-store.ts +70 -0
- package/src/client/state/context-status-store.ts +53 -0
- package/src/client/state/human-store.ts +13 -7
- package/src/client/state/intent-bridge.ts +51 -30
- package/src/client/state/knowledge-store.ts +43 -0
- package/src/client/state/near-pin-store.ts +115 -6
- package/src/client/state/presence-store.ts +7 -10
- package/src/client/state/presentation.ts +91 -0
- package/src/client/state/relation-store.ts +81 -0
- package/src/client/state/session-store.ts +144 -18
- package/src/client/state/sse-bridge.ts +235 -32
- package/src/client/state/workspace-settings.ts +11 -0
- package/src/client/theme/global.css +2724 -476
- package/src/client/types.ts +12 -0
- package/src/client/utils/keyboard.ts +10 -0
- package/src/client/utils/time-ago.ts +14 -0
- package/src/json-render/renderer/index.tsx +31 -0
- package/src/mcp/canvas-app.ts +12 -2
- package/src/mcp/context-uri-template.ts +7 -4
- package/src/mcp/server.ts +63 -41
- package/src/mcp/workbench-app.ts +39 -6
- package/src/server/agent-presence.ts +128 -28
- package/src/server/ax-context.ts +27 -13
- package/src/server/board-export.ts +12 -1
- package/src/server/canvas-db.ts +331 -42
- package/src/server/canvas-operations.ts +195 -83
- package/src/server/canvas-provenance.ts +53 -22
- package/src/server/canvas-serialization.ts +2 -0
- package/src/server/canvas-state.ts +950 -122
- package/src/server/canvas-validation.ts +9 -2
- package/src/server/context-brief.ts +345 -38
- package/src/server/context-reads.ts +178 -30
- package/src/server/demo-state.json +355 -24
- package/src/server/edit-summary.ts +74 -0
- package/src/server/html-surface.ts +8 -1
- package/src/server/index.ts +181 -11
- package/src/server/knowledge-lifecycle.ts +304 -0
- package/src/server/lifecycle-status.ts +232 -0
- package/src/server/memory-graph.ts +166 -0
- package/src/server/mutation-history.ts +18 -6
- package/src/server/operations/composites.ts +32 -11
- package/src/server/operations/http.ts +7 -2
- package/src/server/operations/index.ts +4 -0
- package/src/server/operations/mcp.ts +26 -1
- package/src/server/operations/ops/ax-presence.ts +1 -1
- package/src/server/operations/ops/ax-read.ts +57 -6
- package/src/server/operations/ops/ax-timeline.ts +28 -2
- package/src/server/operations/ops/backup.ts +5 -3
- package/src/server/operations/ops/batch.ts +35 -4
- package/src/server/operations/ops/boards.ts +188 -47
- package/src/server/operations/ops/canvas-wire.ts +31 -1
- package/src/server/operations/ops/edges.ts +36 -2
- package/src/server/operations/ops/groups.ts +6 -1
- package/src/server/operations/ops/lifecycle.ts +262 -0
- package/src/server/operations/ops/memory-graph.ts +45 -0
- package/src/server/operations/ops/nodes.ts +107 -24
- package/src/server/operations/ops/query.ts +281 -68
- package/src/server/operations/ops/snapshots.ts +73 -1
- package/src/server/operations/ops/validate.ts +5 -1
- package/src/server/operations/ops/viewport.ts +97 -3
- package/src/server/operations/registry.ts +74 -25
- package/src/server/placement.ts +29 -0
- package/src/server/scope-fence.ts +78 -6
- package/src/server/server.ts +115 -16
- package/src/server/spatial-analysis.ts +48 -23
- package/src/server/tour-control.ts +82 -0
- package/src/server/wiki-links.ts +137 -0
- package/src/server/workbench-auth.ts +11 -0
- package/src/shared/agent-context.ts +3 -0
- package/src/shared/agent-presence.ts +15 -15
- package/src/shared/auto-arrange.ts +2 -0
- package/src/shared/boards.ts +4 -4
- package/src/shared/knowledge-lifecycle.ts +22 -0
- package/src/shared/knowledge-presets.ts +80 -0
- package/src/shared/lifecycle-status.ts +26 -0
- package/src/shared/memory-graph.ts +74 -0
- package/src/shared/relations.ts +98 -0
- package/src/shared/semantic-attention.ts +15 -1
- package/src/shared/tour.ts +23 -5
- package/src/shared/workspace-settings.ts +13 -0
- package/dist/types/client/canvas/ContextPinBar.d.ts +0 -1
- package/dist/types/client/canvas/FocusFieldLayer.d.ts +0 -1
- package/dist/types/client/canvas/kind-colors.d.ts +0 -3
- package/dist/types/server/agent-context.d.ts +0 -22
- package/src/client/canvas/ContextPinBar.tsx +0 -25
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Node header with several marks</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: 1440px; box-sizing: border-box; padding: 40px 48px; background: #081524; color: #e6eef7; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 22px">
|
|
17
|
+
|
|
18
|
+
<div>
|
|
19
|
+
<h1 style="margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em">A node header with more than one mark</h1>
|
|
20
|
+
<p style="margin: 4px 0 0; font-size: 13px; color: #8ea3bd">The title is what a person reads first, so it keeps its room. “By the agent” is authorship, not state: it leaves the row of chips for good and becomes a violet sparkle on the type icon, at every width. The remaining marks keep their word while they fit, then fold to their glyph in a fixed order — never the amber one.</p>
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
<section style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px">
|
|
24
|
+
<sc-for list="{{intro}}" as="x" hint-placeholder-count="2">
|
|
25
|
+
<div style="display: flex; flex-direction: column; gap: 8px">
|
|
26
|
+
<span style="{{s.label}}">{{x.label}}</span>
|
|
27
|
+
<div style="{{x.card.node}}"><div style="{{x.card.head}}">
|
|
28
|
+
<span style="position: relative; display: inline-flex; flex-shrink: 0"><svg width="16" height="16" viewBox="0 0 24 24" style="{{x.card.iconSt}}"><path d="{{i.doc}}"></path></svg><sc-if value="{{x.card.spark}}" hint-placeholder-val="{{ true }}"><svg width="10" height="10" viewBox="0 0 24 24" style="{{x.card.sparkSt}}"><path d="{{i.spark}}"></path></svg></sc-if></span>
|
|
29
|
+
<span style="{{x.card.title}}">{{x.card.t}}</span>
|
|
30
|
+
<sc-for list="{{x.card.marks}}" as="m" hint-placeholder-count="2"><span style="{{m.st}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{m.ic}}"></path></svg>{{m.word}}</span></sc-for>
|
|
31
|
+
<span style="{{x.card.btn}}"><svg width="13" height="13" viewBox="0 0 24 24" style="{{s.ic2}}"><path d="{{i.expand}}"></path></svg></span>
|
|
32
|
+
<span style="{{x.card.pin}}"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.icPin}}"><path d="{{i.pin}}"></path></svg></span>
|
|
33
|
+
</div><div style="{{x.card.body}}">Working notes on what the brief sends the agent.</div></div>
|
|
34
|
+
<span style="font-size: 12px; color: #b9c6d6">{{x.note}}</span>
|
|
35
|
+
</div>
|
|
36
|
+
</sc-for>
|
|
37
|
+
</section>
|
|
38
|
+
|
|
39
|
+
<sc-for list="{{themes}}" as="th" hint-placeholder-count="2">
|
|
40
|
+
<section style="{{th.section}}">
|
|
41
|
+
<div style="display: grid; grid-template-columns: 150px 260px 340px 480px; gap: 16px; align-items: end"><span style="{{th.label}}">{{th.name}}</span><span style="{{th.label}}">260 px card</span><span style="{{th.label}}">340 px — default markdown</span><span style="{{th.label}}">480 px</span></div>
|
|
42
|
+
<sc-for list="{{th.rows}}" as="r" hint-placeholder-count="4">
|
|
43
|
+
<div style="display: grid; grid-template-columns: 150px 260px 340px 480px; gap: 16px; align-items: center">
|
|
44
|
+
<div style="display: flex; flex-direction: column"><span style="{{th.caseName}}">{{r.name}}</span><span style="{{th.caseNote}}">{{r.note}}</span></div>
|
|
45
|
+
<sc-for list="{{r.cells}}" as="c" hint-placeholder-count="3">
|
|
46
|
+
<div style="{{c.node}}"><div style="{{c.head}}">
|
|
47
|
+
<span style="position: relative; display: inline-flex; flex-shrink: 0"><svg width="16" height="16" viewBox="0 0 24 24" style="{{c.iconSt}}"><path d="{{i.doc}}"></path></svg><sc-if value="{{c.spark}}" hint-placeholder-val="{{ true }}"><svg width="10" height="10" viewBox="0 0 24 24" style="{{c.sparkSt}}"><path d="{{i.spark}}"></path></svg></sc-if></span>
|
|
48
|
+
<span style="{{c.title}}">{{c.t}}</span>
|
|
49
|
+
<sc-for list="{{c.marks}}" as="m" hint-placeholder-count="2"><span style="{{m.st}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{m.ic}}"></path></svg>{{m.word}}</span></sc-for>
|
|
50
|
+
<span style="{{c.btn}}"><svg width="13" height="13" viewBox="0 0 24 24" style="{{s.ic2}}"><path d="{{i.expand}}"></path></svg></span>
|
|
51
|
+
<span style="{{c.pin}}"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.icPin}}"><path d="{{i.pin}}"></path></svg></span>
|
|
52
|
+
</div></div>
|
|
53
|
+
</sc-for>
|
|
54
|
+
</div>
|
|
55
|
+
</sc-for>
|
|
56
|
+
</section>
|
|
57
|
+
</sc-for>
|
|
58
|
+
|
|
59
|
+
<section style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px">
|
|
60
|
+
<div style="{{s.panel}} padding: 16px 18px; gap: 8px">
|
|
61
|
+
<span style="font-size: 13px; font-weight: 600">The rule</span>
|
|
62
|
+
<sc-for list="{{rules}}" as="r" hint-placeholder-count="5"><span style="font-size: 12px; color: #b9c6d6">{{r}}</span></sc-for>
|
|
63
|
+
</div>
|
|
64
|
+
<div style="{{s.panel}} padding: 16px 18px; gap: 10px">
|
|
65
|
+
<span style="font-size: 13px; font-weight: 600">Where the folded words go</span>
|
|
66
|
+
<div style="display: flex; align-items: flex-start; gap: 16px">
|
|
67
|
+
<div style="position: relative; width: 340px; height: 92px; flex-shrink: 0">
|
|
68
|
+
<div style="position: absolute; left: 0; top: 0; width: 250px; height: 34px; box-sizing: border-box; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 12px; border-radius: 10px 10px 0 0; border: 1px solid #1b2c44; background: #0f1d31"><span style="position: relative; display: inline-flex"><svg width="16" height="16" viewBox="0 0 24 24" style="fill: none; stroke: #8ea3bd; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round"><path d="{{i.doc}}"></path></svg><svg width="10" height="10" viewBox="0 0 24 24" style="position: absolute; right: -5px; top: -5px; fill: #B388FF; stroke: #0f1d31; stroke-width: 3; paint-order: stroke"><path d="{{i.spark}}"></path></svg></span><span style="font-size: 12px; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">The brief as a map</span></div>
|
|
69
|
+
<div style="position: absolute; left: 4px; top: 40px; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 1px solid #2a4566; background: #13243b; box-shadow: 0 10px 30px rgba(0,0,0,0.6); font-size: 11px; color: #e6eef7; white-space: nowrap">✦ Written by Claude · 14:06 · <span style="color: #8ea3bd">near Release runbook</span></div>
|
|
70
|
+
</div>
|
|
71
|
+
<span style="font-size: 12px; color: #b9c6d6">Hovering or focusing the type icon opens one hint with every folded word, so nothing is lost; the expanded card and the context panel always show them in full. The agent’s name is whichever agent is attached.</span>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
</section>
|
|
75
|
+
|
|
76
|
+
</div>
|
|
77
|
+
</x-dc>
|
|
78
|
+
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1440}}'>
|
|
79
|
+
class Component extends DCLogic {
|
|
80
|
+
renderVals() {
|
|
81
|
+
var i = {
|
|
82
|
+
doc: 'M6 3h9l4 4v14H6zM14 3v5h5M9 12h7M9 16h5',
|
|
83
|
+
spark: 'M12 2l2.2 6.6L21 11l-6.8 2.4L12 20l-2.2-6.6L3 11l6.8-2.4z',
|
|
84
|
+
pin: 'M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20',
|
|
85
|
+
expand: 'M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7',
|
|
86
|
+
eye: 'M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12zM12 9.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 1 0 0-5',
|
|
87
|
+
warn: 'M12 4l9 16H3zM12 10v4M12 17v.5',
|
|
88
|
+
near: 'M12 4a8 8 0 1 0 0 16a8 8 0 1 0 0-16M12 10.5a1.5 1.5 0 1 0 0 3a1.5 1.5 0 1 0 0-3'
|
|
89
|
+
};
|
|
90
|
+
var s = {
|
|
91
|
+
label: 'font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:#6b7d94;',
|
|
92
|
+
panel: 'display:flex;flex-direction:column;border-radius:10px;border:1px solid #1b2c44;background:#0f1d31;',
|
|
93
|
+
ic: 'fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;',
|
|
94
|
+
ic2: 'fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;',
|
|
95
|
+
icPin: 'fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;'
|
|
96
|
+
};
|
|
97
|
+
function hexA(h, a) { var n = parseInt(h.slice(1), 16); return 'rgba(' + (n >> 16 & 255) + ',' + (n >> 8 & 255) + ',' + (n & 255) + ',' + a + ')'; }
|
|
98
|
+
var H = { name: 'Harbor', bg: '#081524', panel: '#0f1d31', soft: '#13243b', line: '#1b2c44', line2: '#2a4566', text: '#e6eef7', muted: '#8ea3bd', dim: '#6b7d94', pin: '#4BBCFF', onPin: '#081524', agent: '#B388FF', warn: '#f4c542', shadow: '0 1px 2px rgba(0,0,0,0.4),0 6px 20px rgba(0,0,0,0.24)' };
|
|
99
|
+
var D = { name: 'Daylight', bg: '#F6F7F9', panel: '#FFFFFF', soft: '#F2F4F7', line: '#DDE2E9', line2: '#C9D1DC', text: '#0B1726', muted: '#55657a', dim: '#7a8899', pin: '#1A7ABF', onPin: '#FFFFFF', agent: '#7C4DDB', warn: '#94600A', shadow: '0 1px 2px rgba(8,21,36,0.1),0 6px 20px rgba(8,21,36,0.08)' };
|
|
100
|
+
|
|
101
|
+
// Estimated widths (IBM Plex Sans): title 12px/600 ≈ 6.7 px a character; a chip word 11px/500 ≈ 6 px.
|
|
102
|
+
var CHAR_T = 6.7, CHAR_W = 6.0, GAP = 6;
|
|
103
|
+
function chipW(word) { return Math.round(word.length * CHAR_W + 11 + 4 + 14); }
|
|
104
|
+
var GLYPH = 22;
|
|
105
|
+
// Fold order: read first, then near. Amber (changed) never folds. By-agent never sits in the row.
|
|
106
|
+
var FOLD = ['read', 'near'];
|
|
107
|
+
var WORDS = { near: 'near', read: 'read', changed: 'changed', agent: 'by Claude' };
|
|
108
|
+
function layout(width, title, kinds, today) {
|
|
109
|
+
var inner = width - 3 - 12 - 8;
|
|
110
|
+
var fixed = 16 + 22 + 18 + GAP * 3;
|
|
111
|
+
var marks = kinds.filter(function (k) { return today || k !== 'agent'; }).map(function (k) { return { k: k, word: true }; });
|
|
112
|
+
var natural = Math.round(title.length * CHAR_T);
|
|
113
|
+
var hasAmber = kinds.indexOf('changed') >= 0;
|
|
114
|
+
function used() { return marks.reduce(function (a, m) { return a + (m.word ? chipW(WORDS[m.k]) : GLYPH) + GAP; }, 0); }
|
|
115
|
+
function room() { return inner - fixed - used(); }
|
|
116
|
+
if (!today) {
|
|
117
|
+
var target = Math.min(natural, 140);
|
|
118
|
+
// 1. fold words to glyphs, read first, then near, while the title is below its minimum
|
|
119
|
+
FOLD.forEach(function (k) { var m = marks.filter(function (x) { return x.k === k; })[0]; if (m && room() < target) m.word = false; });
|
|
120
|
+
// 2. amber may push the title down to 80 px; otherwise a folded glyph moves into the icon hint
|
|
121
|
+
var floor = hasAmber ? Math.min(natural, 80) : target;
|
|
122
|
+
FOLD.forEach(function (k) { if (room() < floor) marks = marks.filter(function (x) { return x.k !== k; }); });
|
|
123
|
+
}
|
|
124
|
+
return marks;
|
|
125
|
+
}
|
|
126
|
+
function cell(c, width, title, kinds, pinned, today) {
|
|
127
|
+
var marks = layout(width, title, kinds, today).map(function (m) {
|
|
128
|
+
var col = m.k === 'changed' ? c.warn : m.k === 'read' || m.k === 'agent' ? c.agent : c.pin;
|
|
129
|
+
var base = 'display:inline-flex;align-items:center;justify-content:center;gap:4px;height:20px;box-sizing:border-box;border-radius:999px;font-size:11px;font-weight:500;flex-shrink:0;white-space:nowrap;color:' + col + ';';
|
|
130
|
+
var skin = m.k === 'near' ? 'border:1px dotted ' + hexA(c.pin, 0.7) + ';background:' + hexA(c.pin, 0.06) + ';' : 'background:' + hexA(col, 0.14) + ';';
|
|
131
|
+
var ic = m.k === 'changed' ? i.warn : m.k === 'read' ? i.eye : m.k === 'agent' ? i.spark : i.near;
|
|
132
|
+
return { word: m.word ? WORDS[m.k] : '', ic: ic, st: base + skin + (m.word ? 'padding:0 7px;' : 'width:' + GLYPH + 'px;padding:0;') };
|
|
133
|
+
});
|
|
134
|
+
var spark = !today && kinds.indexOf('agent') >= 0;
|
|
135
|
+
return {
|
|
136
|
+
t: title, marks: marks, spark: spark,
|
|
137
|
+
node: 'width:' + width + 'px;box-sizing:border-box;border-radius:10px;overflow:hidden;background:' + c.panel + ';box-shadow:' + c.shadow + ';' + (pinned ? 'border:1.5px solid ' + c.pin + ';' : 'border:1px solid ' + c.line + ';'),
|
|
138
|
+
head: 'display:flex;align-items:center;gap:' + GAP + 'px;height:34px;padding:0 8px 0 12px;' + (pinned ? 'background:' + hexA(c.pin, 0.1) + ';' : ''),
|
|
139
|
+
body: 'padding:8px 12px;font-size:12px;color:' + c.muted + ';border-top:1px solid ' + c.line + ';',
|
|
140
|
+
iconSt: 'fill:none;stroke:' + c.muted + ';stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;',
|
|
141
|
+
sparkSt: 'position:absolute;right:-5px;top:-5px;fill:' + c.agent + ';stroke:' + c.panel + ';stroke-width:3;paint-order:stroke;',
|
|
142
|
+
title: 'flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:600;color:' + c.text + ';',
|
|
143
|
+
btn: 'width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:' + c.muted + ';',
|
|
144
|
+
pin: pinned ? 'width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:' + c.pin + ';color:' + c.onPin + ';' : 'width:18px;height:18px;box-sizing:border-box;border-radius:999px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid ' + c.dim + ';color:' + c.muted + ';'
|
|
145
|
+
};
|
|
146
|
+
}
|
|
147
|
+
var cases = [
|
|
148
|
+
{ name: 'Agent wrote it, near a pin', note: 'the common case on an agent-written board', title: 'The brief as a map — wave 1', kinds: ['near', 'agent'], pinned: false },
|
|
149
|
+
{ name: 'Pinned, changed since read, agent wrote it', note: 'amber keeps its word; the title gives way to 80 px first', title: 'SMB interview notes and quotes', kinds: ['changed', 'agent'], pinned: true },
|
|
150
|
+
{ name: 'Near a pin, agent wrote it, long title', note: 'near folds to its glyph before the title drops below 140 px', title: 'Competitor pricing teardown — September list', kinds: ['near', 'agent'], pinned: false },
|
|
151
|
+
{ name: 'Pinned, read, agent wrote it', note: 'the pin badge already says in context', title: 'Churn flat after last raise', kinds: ['read', 'agent'], pinned: true }
|
|
152
|
+
];
|
|
153
|
+
var themes = [H, D].map(function (c) {
|
|
154
|
+
return {
|
|
155
|
+
name: c.name,
|
|
156
|
+
section: 'display:flex;flex-direction:column;gap:14px;padding:18px 20px;border-radius:12px;background:' + c.bg + ';border:1px solid ' + c.line + ';',
|
|
157
|
+
label: 'font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:' + c.dim + ';',
|
|
158
|
+
caseName: 'font-size:12px;font-weight:600;color:' + c.text + ';',
|
|
159
|
+
caseNote: 'font-size:11px;color:' + c.muted + ';',
|
|
160
|
+
rows: cases.map(function (k) {
|
|
161
|
+
return { name: k.name, note: k.note, cells: [260, 340, 480].map(function (w) { return cell(c, w, k.title, k.kinds, k.pinned, false); }) };
|
|
162
|
+
})
|
|
163
|
+
};
|
|
164
|
+
});
|
|
165
|
+
var intro = [
|
|
166
|
+
{ label: 'Today, 340 px — near and by-agent side by side', card: cell(H, 340, 'The brief as a map — wave 1', ['near', 'agent'], false, true),
|
|
167
|
+
note: 'Two chips, expand and the pin leave the title about 50 px: “The bri…”. On an agent-written board nearly every card looks like this.' },
|
|
168
|
+
{ label: 'Proposed, 340 px — authorship on the icon', card: cell(H, 340, 'The brief as a map — wave 1', ['near', 'agent'], false, false),
|
|
169
|
+
note: 'The violet sparkle on the type icon says the agent wrote it; “near” keeps its word; the title reads in full.' }
|
|
170
|
+
];
|
|
171
|
+
var rules = [
|
|
172
|
+
'1 · The title keeps at least 140 px (all of it when shorter). Only an amber mark may push it down, to 80 px.',
|
|
173
|
+
'2 · “By <agent>” never takes a chip in the header. A violet sparkle on the type icon carries it at every width; its word is in the icon’s hint. The violet dot on the pin badge keeps meaning “pinned by the agent”.',
|
|
174
|
+
'3 · Read marks (read, changed) sit on pinned cards only and near on unpinned cards only (2026-10-08), so they never meet in one header. When the title would drop below its minimum, a mark folds to its glyph — read or near. If a glyph still leaves the title too little, it moves into the icon’s hint. Amber “changed” never folds — amber always carries its word.',
|
|
175
|
+
'4 · At most one amber chip and one other worded chip in a header; everything else is a glyph. Expand and the context pin never fold (Chrome).',
|
|
176
|
+
'5 · Folded words live in one hint on the type icon (BarHint, not a title attribute), and in full in the expanded card and the context panel.'
|
|
177
|
+
];
|
|
178
|
+
return { i: i, s: s, intro: intro, themes: themes, rules: rules };
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
</script>
|
|
182
|
+
</body>
|
|
183
|
+
</html>
|
package/docs/design/Home.dc.html
CHANGED
|
@@ -141,8 +141,26 @@ body{margin:0}
|
|
|
141
141
|
</aside>
|
|
142
142
|
|
|
143
143
|
</div>
|
|
144
|
+
<section style="width:1440px;height:700px;box-sizing:border-box;padding:40px 48px;background:#081524;color:#e6eef7;font:13px/1.5 'IBM Plex Sans',system-ui,sans-serif">
|
|
145
|
+
<h1 style="font-size:28px;margin:0">H2 · Dedicated Home Review queue</h1>
|
|
146
|
+
<p style="color:#8ea3bd">Selected 2026-10-14 · local implementation, validation ongoing. The folder summary opens Review, not a board-grouped popover.</p>
|
|
147
|
+
<div style="display:flex;gap:24px;border:1px solid #1b2c44;border-radius:10px;background:#0f1d31;padding:20px;margin-top:20px">
|
|
148
|
+
<aside style="width:220px;border-right:1px solid #1b2c44;padding-right:20px"><strong>Library</strong><p style="color:#8ea3bd">Find boards, cards, folders…</p><p>▸ Engineering</p><p style="background:#13243b;padding:6px;border-radius:6px">▾ Projects</p><p style="padding-left:16px">Product<br>Research<br>Launch</p><p>▸ Sources</p></aside>
|
|
149
|
+
<main style="flex:1;min-width:0">
|
|
150
|
+
<nav style="display:flex;gap:16px;color:#8ea3bd">Folders · Map · Graph · <strong style="color:#e6eef7">Review</strong><span style="margin-left:auto">Categories · Relation presets</span></nav>
|
|
151
|
+
<div style="display:flex;align-items:center;justify-content:space-between;margin-top:20px"><h2 style="font-size:20px;margin:0">Knowledge review</h2><label>Review scope <select style="font:inherit;color:inherit;background:#081524;border:1px solid #1b2c44;border-radius:6px;padding:7px"><option>Projects and descendants</option><option>Whole library</option></select></label></div>
|
|
152
|
+
<p style="color:#8ea3bd">Projects and descendants</p>
|
|
153
|
+
<div style="display:flex;gap:16px;align-items:center"><label>Find review cards <input type="search" style="font:inherit;color:inherit;background:#081524;border:1px solid #1b2c44;border-radius:6px;padding:7px"></label><label><input type="checkbox"> Source warnings only</label><button style="font:inherit;color:inherit;background:#081524;border:1px solid #1b2c44;border-radius:6px;padding:7px">Refresh queue</button></div>
|
|
154
|
+
<p>Review needed: 3 cards · Showing 3</p>
|
|
155
|
+
<table style="width:100%;border-collapse:collapse;text-align:left;font:13px/1.5 inherit"><thead style="color:#8ea3bd"><tr><th style="padding:10px">Card</th><th>Board</th><th>Why review</th><th>Last checked</th><th>Open</th></tr></thead><tbody>
|
|
156
|
+
<tr style="border-top:1px solid #1b2c44"><td style="padding:12px">Churn by month</td><td>Product metrics</td><td>Billing dashboard changed</td><td>12 September</td><td>Open review →</td></tr>
|
|
157
|
+
<tr style="border-top:1px solid #1b2c44"><td style="padding:12px">Interview finding</td><td>Pricing research</td><td>Content changed since check</td><td>3 September</td><td>Open review →</td></tr>
|
|
158
|
+
<tr style="border-top:1px solid #1b2c44"><td style="padding:12px">Launch assumptions</td><td>Launch plan</td><td>Scheduled check due</td><td>Never checked</td><td>Open review →</td></tr>
|
|
159
|
+
</tbody></table><p style="color:#8ea3bd;border-top:1px solid #1b2c44;padding-top:12px">No review policy: 4 cards. Missing policy is neutral, not overdue. Explicit content or source warnings still enter the queue.</p>
|
|
160
|
+
</main></div><p style="color:#8ea3bd">Nonretired due or source-warning cards count once. Titles are authoritative. Opening never validates. Unavailable state retains results with an out-of-date warning and Refresh to retry; empty filters say “No actionable cards in these filters.”</p>
|
|
161
|
+
</section>
|
|
144
162
|
</x-dc>
|
|
145
|
-
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":
|
|
163
|
+
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1660}}'>
|
|
146
164
|
class Component extends DCLogic {
|
|
147
165
|
renderVals() {
|
|
148
166
|
var rowBase = 'display:flex;align-items:center;gap:8px;height:30px;padding:0 8px;border:0;border-radius:6px;font-family:inherit;text-align:left;';
|
|
@@ -1,211 +1,95 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<title>Home — graph</title>
|
|
6
|
-
<script src="./support.js"></script>
|
|
7
|
-
</head>
|
|
3
|
+
<head><meta charset="utf-8"><title>Home Graph: Library > Board > Card topology explorer</title><script src="./support.js"></script></head>
|
|
8
4
|
<body>
|
|
9
5
|
<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>
|
|
6
|
+
<helmet><style>
|
|
13
7
|
body{margin:0}
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
</
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
<
|
|
45
|
-
<
|
|
46
|
-
</
|
|
47
|
-
<
|
|
48
|
-
<
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
<
|
|
53
|
-
<
|
|
54
|
-
<
|
|
55
|
-
<
|
|
56
|
-
</
|
|
57
|
-
</
|
|
58
|
-
|
|
59
|
-
<
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
<
|
|
64
|
-
<
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
</
|
|
68
|
-
|
|
69
|
-
<
|
|
70
|
-
<
|
|
71
|
-
<
|
|
72
|
-
<
|
|
73
|
-
|
|
74
|
-
<
|
|
75
|
-
</
|
|
76
|
-
|
|
77
|
-
<
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
<
|
|
81
|
-
</
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
<
|
|
85
|
-
<
|
|
86
|
-
<
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
</
|
|
90
|
-
|
|
91
|
-
<
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
<
|
|
95
|
-
<
|
|
96
|
-
</
|
|
97
|
-
|
|
98
|
-
|
|
8
|
+
.graph{width:1440px;max-width:100vw;height:1280px;background:#081524;color:#e6eef7;font:14px/1.4 'IBM Plex Sans',system-ui,sans-serif;overflow:auto}
|
|
9
|
+
.graph header,.graph nav,.graph footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 16px;border-bottom:1px solid #1b2c44}
|
|
10
|
+
.graph h1{font-size:20px;margin:0;flex:1}.graph h2{font-size:15px;margin:0}
|
|
11
|
+
.graph button{min-height:36px;border:1px solid #1b2c44;border-radius:6px;background:#0f1d31;color:#b9c6d6;padding:6px 10px;font:inherit}
|
|
12
|
+
.graph .scene{border-bottom:1px solid #1b2c44}.graph .scene header{background:#0b1828}
|
|
13
|
+
.graph .counts{margin-left:auto;color:#8ea3bd;font-size:13px}
|
|
14
|
+
.graph svg{display:block;width:1440px;height:300px}
|
|
15
|
+
.graph text{fill:#e6eef7;font-size:14px;text-anchor:middle;paint-order:stroke;stroke:#081524;stroke-width:4px;stroke-linejoin:round}
|
|
16
|
+
.graph .meta{fill:#8ea3bd;font-size:12px}
|
|
17
|
+
.graph .external{--footprint-dash:6 4}.graph .focused{--footprint-ink:#e6eef7;--footprint-weight:2}
|
|
18
|
+
.graph .node text{text-anchor:start;stroke:none}.graph .node .name{font-size:14px;font-weight:500}
|
|
19
|
+
.graph .bundle{fill:none;stroke:#8ea3bd;stroke-width:2}.graph .exact{fill:none;stroke:#5fcfc0;stroke-width:2}.graph .against{stroke:#e59b6b}
|
|
20
|
+
.graph .tray{fill:#0b1828;stroke:#1b2c44}.graph .node{cursor:pointer}.graph .node:focus{outline:2px solid #b9c6d6}.graph .edge{cursor:pointer}
|
|
21
|
+
.graph .dock{background:#0b1828}.graph .dock strong{flex:1}.graph footer{color:#8ea3bd;font-size:13px}
|
|
22
|
+
@media(max-width:760px){.graph{width:600px}.graph .counts{margin-left:0;width:100%}}
|
|
23
|
+
</style></helmet>
|
|
24
|
+
<!-- Owner-authorized Claude/Oracle agreement, 2026-10-18.
|
|
25
|
+
Three snapshots of ONE zoomable explorer, not simultaneous product panes.
|
|
26
|
+
Coordinates depict settled topology, not a placement algorithm or folder geometry.
|
|
27
|
+
Deterministic initial solve; dragging reheats forces, then cools around the dropped node.
|
|
28
|
+
Cancel restores the pre-drag layout. Live updates alone preserve settled anchors.
|
|
29
|
+
Node click/Enter/Space drills; edge selects exact evidence in the existing bottom dock.
|
|
30
|
+
Back restores history state; breadcrumb ascends ownership. Open is separate.
|
|
31
|
+
Sample counts illustrate complete small scenes, not fixed display limits.
|
|
32
|
+
Footprints follow GRAPH_NODE (220 × 96) in graph-geometry.ts; glyphs and
|
|
33
|
+
internal text follow graph-specific global.css rules. Spacing is illustrative,
|
|
34
|
+
not an exact production layout. Routes meet boundary ports, outside all bodies.
|
|
35
|
+
Large sets use counted search/reveal; no new framework or dependencies.
|
|
36
|
+
Map is unchanged, including its 280px default dock. -->
|
|
37
|
+
<div class="graph">
|
|
38
|
+
<header><h1>Library · Graph</h1><button>Folders</button><button>Map</button><button aria-pressed="true">Graph</button><button>Search boards / cards…</button><button>Filters</button><button>Reveal hidden · 0</button></header>
|
|
39
|
+
<section class="scene">
|
|
40
|
+
<header><h2>Library</h2><span class="counts">5 / 5 boards displayed · 0 filtered · 0 hidden · 1 unconnected · 3 cross-board facts</span></header>
|
|
41
|
+
<svg viewBox="0 0 1440 300" aria-label="Library: neutral counted board-pair bundles, with an unconnected board tray">
|
|
42
|
+
<defs>
|
|
43
|
+
<g id="board-body"><rect class="footprint" width="220" height="96" rx="10" style="fill:#0f1d31;stroke:var(--footprint-ink,#1b2c44);stroke-width:var(--footprint-weight,1);stroke-dasharray:var(--footprint-dash,none)"/><circle cx="24" cy="48" r="13" style="fill:#081524;stroke:#b9c6d6;stroke-width:2"/></g>
|
|
44
|
+
<g id="card-body"><rect class="footprint" width="220" height="96" rx="10" style="fill:#0f1d31;stroke:var(--footprint-ink,#1b2c44);stroke-width:var(--footprint-weight,1);stroke-dasharray:var(--footprint-dash,none)"/><rect x="12" y="36" width="24" height="24" rx="6" style="fill:#081524;stroke:#b9c6d6;stroke-width:2"/></g>
|
|
45
|
+
</defs>
|
|
46
|
+
<path class="bundle edge" tabindex="0" role="button" aria-label="Inspect 1 fact between Interviews and Pricing" d="M 300 148 L 400 148"/><text class="meta" x="350" y="134">1 fact</text>
|
|
47
|
+
<path class="bundle edge" tabindex="0" role="button" aria-label="Inspect 1 fact between Billing and Pricing" d="M 620 148 L 650 148 L 650 68 L 720 68"/><text class="meta" x="677" y="53">1 fact</text>
|
|
48
|
+
<path class="bundle edge" tabindex="0" role="button" aria-label="Inspect 1 fact between Pricing and Delivery" d="M 510 196 L 510 212 L 708 212 L 720 212"/><text class="meta" x="650" y="238">1 fact</text>
|
|
49
|
+
<g class="node" transform="translate(80 100)" tabindex="0" role="button" aria-label="Drill into Interviews"><use href="#board-body"/><text class="name" x="48" y="32">Interviews</text><text class="meta" x="48" y="60">Board</text><text class="meta" x="48" y="80">1 cross-board fact</text></g>
|
|
50
|
+
<g class="node" transform="translate(400 100)" tabindex="0" role="button" aria-label="Drill into Pricing"><use href="#board-body"/><text class="name" x="48" y="32">Pricing</text><text class="meta" x="48" y="60">1 internal relation</text><text class="meta" x="48" y="80">3 cross-board facts</text></g>
|
|
51
|
+
<g class="node" transform="translate(720 20)" tabindex="0" role="button" aria-label="Drill into Billing"><use href="#board-body"/><text class="name" x="48" y="32">Billing</text><text class="meta" x="48" y="60">Board</text><text class="meta" x="48" y="80">1 cross-board fact</text></g>
|
|
52
|
+
<g class="node" transform="translate(720 164)" tabindex="0" role="button" aria-label="Drill into Delivery"><use href="#board-body"/><text class="name" x="48" y="32">Delivery</text><text class="meta" x="48" y="60">Board</text><text class="meta" x="48" y="80">1 cross-board fact</text></g>
|
|
53
|
+
<rect class="tray" x="1150" y="50" width="270" height="170" rx="6"/><text class="meta" x="1285" y="76">Unconnected boards · 1</text>
|
|
54
|
+
<g class="node" transform="translate(1175 96)" tabindex="0" role="button" aria-label="Drill into Legal, unconnected board"><use href="#board-body"/><text class="name" x="48" y="32">Legal</text><text class="meta" x="48" y="60">Board</text><text class="meta" x="48" y="80">0 cross-board facts</text></g>
|
|
55
|
+
</svg>
|
|
56
|
+
</section>
|
|
57
|
+
<section class="scene">
|
|
58
|
+
<header><button>Back</button><nav aria-label="Board ownership breadcrumb"><button>Library</button><span>› Pricing</span></nav><button>Open board</button><span class="counts">3 / 3 cards · 3 / 3 neighbor boards · 0 filtered · 0 hidden</span></header>
|
|
59
|
+
<svg viewBox="0 0 1440 300" aria-label="Pricing: internal relation topology and external neighbor boards, with unconnected cards in a tray">
|
|
60
|
+
<defs><marker id="board-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path fill="#5fcfc0" d="M 0 0 L 10 5 L 0 10 z"/></marker></defs>
|
|
61
|
+
<path class="bundle edge" d="M 260 158 L 350 158"/><text class="meta" x="305" y="144">1 fact</text>
|
|
62
|
+
<path class="exact edge" marker-end="url(#board-arrow)" d="M 570 158 L 594 158 L 594 238 L 650 238"/><text class="meta" x="607" y="274">supports</text>
|
|
63
|
+
<path class="bundle edge" d="M 460 110 L 460 68 L 650 68"/><text class="meta" x="550" y="54">1 fact</text>
|
|
64
|
+
<path class="bundle edge" d="M 870 238 L 960 238"/><text class="meta" x="915" y="224">1 fact</text>
|
|
65
|
+
<g class="node external" transform="translate(40 110)" tabindex="0" role="button" aria-label="Drill into Interviews"><use href="#board-body"/><text class="name" x="48" y="32">Interviews</text><text class="meta" x="48" y="60">External board</text><text class="meta" x="48" y="80">1 fact with Pricing</text></g>
|
|
66
|
+
<g class="node" transform="translate(350 110)" tabindex="0" role="button" aria-label="Drill into Pricing: Pro at $24?"><use href="#card-body"/><text class="name" x="48" y="32">Pro at $24?</text><text class="meta" x="48" y="60">Pricing</text><text class="meta" x="48" y="80">Card · 3 relations</text></g>
|
|
67
|
+
<g class="node" transform="translate(650 190)" tabindex="0" role="button" aria-label="Drill into Pricing: Margin model"><use href="#card-body"/><text class="name" x="48" y="32">Margin model</text><text class="meta" x="48" y="60">Pricing</text><text class="meta" x="48" y="80">Card · 2 relations</text></g>
|
|
68
|
+
<g class="node external" transform="translate(650 20)" tabindex="0" role="button" aria-label="Drill into Billing"><use href="#board-body"/><text class="name" x="48" y="32">Billing</text><text class="meta" x="48" y="60">External board</text><text class="meta" x="48" y="80">1 fact with Pricing</text></g>
|
|
69
|
+
<g class="node external" transform="translate(960 190)" tabindex="0" role="button" aria-label="Drill into Delivery"><use href="#board-body"/><text class="name" x="48" y="32">Delivery</text><text class="meta" x="48" y="60">External board</text><text class="meta" x="48" y="80">1 fact with Pricing</text></g>
|
|
70
|
+
<rect class="tray" x="1170" y="16" width="250" height="154" rx="6"/><text class="meta" x="1295" y="42">Unconnected cards · 1</text>
|
|
71
|
+
<g class="node" transform="translate(1185 58)" tabindex="0" role="button" aria-label="Drill into Pricing: Assumptions"><use href="#card-body"/><text class="name" x="48" y="32">Assumptions</text><text class="meta" x="48" y="60">Pricing</text><text class="meta" x="48" y="80">Card · 0 relations</text></g>
|
|
72
|
+
</svg>
|
|
73
|
+
</section>
|
|
74
|
+
<section class="scene">
|
|
75
|
+
<header><button>Back</button><nav aria-label="Card ownership breadcrumb"><button>Library</button><span>›</span><button>Pricing</button><span>› Pro at $24?</span></nav><button>Open card</button><span class="counts">3 / 3 one-hop neighbors · 0 filtered · 0 hidden</span></header>
|
|
76
|
+
<svg viewBox="0 0 1440 300" aria-label="Card: incoming qualified neighbors on the left, outgoing on the right">
|
|
77
|
+
<defs><marker id="card-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path fill="#5fcfc0" d="M 0 0 L 10 5 L 0 10 z"/></marker><marker id="against-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path fill="#e59b6b" d="M 0 0 L 10 5 L 0 10 z"/></marker></defs>
|
|
78
|
+
<text class="meta" x="210" y="20">Incoming · 2 facts</text><text class="meta" x="1110" y="20">Outgoing · 1 fact</text>
|
|
79
|
+
<path class="exact against edge" tabindex="0" role="button" aria-label="Inspect SMB survey contradicts Pro at $24?" marker-end="url(#against-arrow)" d="M 320 78 L 400 78 L 400 148 L 560 148"/><text x="465" y="100">contradicts</text>
|
|
80
|
+
<path class="exact edge" tabindex="0" role="button" aria-label="Inspect Pricing brief supports Pro at $24?" marker-end="url(#card-arrow)" d="M 320 218 L 670 218 L 670 196"/><text x="457" y="242">supports</text>
|
|
81
|
+
<path class="exact edge" tabindex="0" role="button" aria-label="Inspect Pro at $24? supports Margin model" marker-end="url(#card-arrow)" d="M 780 148 L 1000 148"/><text x="890" y="134">supports</text>
|
|
82
|
+
<g class="node" transform="translate(100 30)" tabindex="0" role="button" aria-label="Drill into Interviews: SMB survey"><use href="#card-body"/><text class="name" x="48" y="32">SMB survey</text><text class="meta" x="48" y="60">Interviews</text><text class="meta" x="48" y="80">Card · incoming</text></g>
|
|
83
|
+
<g class="node" transform="translate(100 170)" tabindex="0" role="button" aria-label="Drill into Billing: Pricing brief"><use href="#card-body"/><text class="name" x="48" y="32">Pricing brief</text><text class="meta" x="48" y="60">Billing</text><text class="meta" x="48" y="80">Card · incoming</text></g>
|
|
84
|
+
<g class="node focused" transform="translate(560 100)"><use href="#card-body"/><text class="name" x="48" y="32">Pro at $24?</text><text class="meta" x="48" y="60">Pricing</text><text class="meta" x="48" y="80">Focused card</text></g>
|
|
85
|
+
<g class="node" transform="translate(1000 100)" tabindex="0" role="button" aria-label="Drill into Pricing: Margin model"><use href="#card-body"/><text class="name" x="48" y="32">Margin model</text><text class="meta" x="48" y="60">Pricing</text><text class="meta" x="48" y="80">Card · outgoing</text></g>
|
|
86
|
+
</svg>
|
|
87
|
+
</section>
|
|
88
|
+
<header class="dock"><strong>Connections · collapsed initially</strong><button>Expand details</button><span>Edge selection → exact qualified endpoints, kind and reason here</span></header>
|
|
89
|
+
<footer>One explorer · Three illustrative snapshots · ○ Board glyph / □ Card glyph inside outlined footprints · Dashed outline = external board</footer>
|
|
90
|
+
<footer>Node click / Enter / Space drills · Edge inspects evidence · Pan / zoom the graph · Illustrative spacing, not a production layout measurement</footer>
|
|
91
|
+
<footer>Back restores scene + camera + query + filters + selection. Breadcrumb goes up ownership. Open is separate. Dragging moves neighbors; the graph settles after release. Live additions preserve anchors.</footer>
|
|
99
92
|
</div>
|
|
100
93
|
</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
94
|
</body>
|
|
211
95
|
</html>
|