Files
pad/web/package.json
T
xarmian 771d102e89 feat(web): 2D directional dependency-graph renderer (TASK-1783) (#720)
* feat(web): 2D directional dependency-graph renderer (TASK-1783)

Add ItemGraph.svelte — a reusable, self-contained component that renders a
single item's dependency neighborhood as a 2D layered graph (parents above,
children below) via dagre layout + SVG.

- Lazy-imports @dagrejs/dagre so the layout lib stays out of the main
  bundle (confirmed split into its own chunk).
- Fetches via api.graph.getFocused; re-roots on an internal currentFocus so
  clicking a non-focus node navigates the chain, clicking the focus node (or
  Open ↗) opens it. Depth (1–5) selector + include-done toggle; breadcrumb
  back to the original root.
- Edge styling by type (hierarchy tethers, red directional blocks arrows,
  faint wiki-link dashes, muted others); collection-colored nodes with
  focus highlight + dimmed terminals; pan/zoom + fit-to-content; legend and
  a truncation notice.
- Reactivity follows CONVE-1688 (loadToken guard, no read+write of one rune
  in an effect) and CONVE-606 (data-load effect split from prop-sync).

Extract the collection palette into a shared $lib/graph/palette.ts and point
the 3D workspace graph at it too, so both views agree on collection colors.

Parent: PLAN-1780.

* fix(web): correct hierarchy layout direction + node border color-mix per Codex review (round 1)

- P1: 'parent'/'implements' edges are child→parent in the API, so feeding
  them to dagre as-is put children above parents under rankdir TB. Reverse
  those edges for layout ranking only; rendered edges keep true source→target
  so 'blocks' arrowheads still point correctly.
- P2: unfocused node border used a JS string literal with an un-interpolated
  {n.color}, yielding an invalid CSS color and a dropped stroke. Use a
  template literal so the collection tint actually applies.

Parent: PLAN-1780.
2026-06-08 18:34:50 -04:00

71 lines
2.0 KiB
JSON

{
"name": "web",
"private": true,
"version": "0.0.1",
"license": "Apache-2.0",
"type": "module",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"prepare": "svelte-kit sync || echo ''",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"test:e2e": "playwright test",
"test:e2e:ui": "playwright test --ui",
"test:e2e:install": "playwright install --with-deps chromium"
},
"devDependencies": {
"@playwright/test": "^1.59.1",
"@sveltejs/adapter-auto": "^7.0.1",
"@sveltejs/adapter-static": "^3.0.10",
"@sveltejs/kit": "^2.59.1",
"@sveltejs/vite-plugin-svelte": "^7.1.2",
"@types/d3-scale": "4.0.9",
"@types/qrcode": "^1.5.6",
"marked": "^18.0.3",
"svelte": "^5.55.5",
"svelte-check": "^4.4.7",
"typescript": "^6.0.3",
"vite": "^8.0.11"
},
"overrides": {
"cookie": "^0.7.2",
"layercake": {
"typescript": "$typescript"
}
},
"dependencies": {
"@dagrejs/dagre": "3.0.0",
"@tiptap/core": "^3.22.5",
"@tiptap/extension-bubble-menu": "^3.22.5",
"@tiptap/extension-code-block-lowlight": "^3.22.5",
"@tiptap/extension-collaboration": "3.22.5",
"@tiptap/extension-collaboration-caret": "3.22.5",
"@tiptap/extension-link": "^3.22.5",
"@tiptap/extension-placeholder": "^3.22.5",
"@tiptap/extension-table": "^3.22.5",
"@tiptap/extension-task-item": "^3.22.5",
"@tiptap/extension-task-list": "^3.22.5",
"@tiptap/pm": "^3.20.4",
"@tiptap/starter-kit": "^3.22.5",
"@tiptap/suggestion": "^3.22.5",
"@tiptap/y-tiptap": "^3.0.3",
"3d-force-graph": "1.80.0",
"d3-scale": "4.0.2",
"diff": "^9.0.0",
"dompurify": "^3.4.2",
"idb": "^8.0.3",
"layercake": "10.0.2",
"lowlight": "^3.3.0",
"mermaid": "^11.14.0",
"minisearch": "7.2.0",
"qrcode": "^1.5.4",
"svelte-dnd-action": "^0.9.69",
"three-spritetext": "1.10.0",
"tiptap-markdown": "^0.9.0",
"y-protocols": "^1.0.7",
"yjs": "^13.6.30"
}
}