Skip to content

feat(ui): multi-graph mosaic dashboard with persistent layout#64

Merged
fedorovvvv merged 1 commit into
developfrom
feature/multi-graph-mosaic
May 6, 2026
Merged

feat(ui): multi-graph mosaic dashboard with persistent layout#64
fedorovvvv merged 1 commit into
developfrom
feature/multi-graph-mosaic

Conversation

@fedorovvvv
Copy link
Copy Markdown
Collaborator

Replace single-canvas-with-view-toggle home page with a recursive binary split-tree mosaic that hosts 1–4 DependencyGraph panes. Each pane has its own view selector, reset, add and close controls in a draggable header; layout (open panes + sizes in %) persists to localStorage under forgeplan-web:layout:v1.

Drag semantics:

  • Pane header onto another pane's center → swap views (sizes kept).
  • Pane header onto another pane's edge → move (remove source +
    insert at target's edge).
  • Splitter pointer/keyboard drag → resize, clamped [10..90]%.

Layout model lives under template/src/widgets/mosaic/ (FSD widget):

  • model/{types,tree}.ts pure tree ops with vitest coverage (20 tests).
  • lib/{drag,persist}.ts module-level drag payload (workaround for the spec-mandated empty getData during dragover) + 5 quadrant tests.
  • ui/{MosaicCanvas,MosaicNodeView,PaneFrame,Splitter,DropOverlay}.svelte recursive render via 3-track CSS Grid (a% 0px b% with overlay splitter) — no JS layout math at render time.

A11y: splitters expose role=separator with arrow-key resize, pane headers are toolbar with tabindex=-1, drag fallback writes text/plain so the operation initialises in browsers that require non-empty data.

Refs: PRD-016, RFC-015, EVID-020

Replace single-canvas-with-view-toggle home page with a recursive
binary split-tree mosaic that hosts 1–4 DependencyGraph panes.
Each pane has its own view selector, reset, add and close controls
in a draggable header; layout (open panes + sizes in %) persists to
localStorage under forgeplan-web:layout:v1.

Drag semantics:
- Pane header onto another pane's center  → swap views (sizes kept).
- Pane header onto another pane's edge    → move (remove source +
                                              insert at target's edge).
- Splitter pointer/keyboard drag          → resize, clamped [10..90]%.

Layout model lives under template/src/widgets/mosaic/ (FSD widget):
- model/{types,tree}.ts pure tree ops with vitest coverage (20 tests).
- lib/{drag,persist}.ts module-level drag payload (workaround for the
  spec-mandated empty getData during dragover) + 5 quadrant tests.
- ui/{MosaicCanvas,MosaicNodeView,PaneFrame,Splitter,DropOverlay}.svelte
  recursive render via 3-track CSS Grid (a% 0px b% with overlay
  splitter) — no JS layout math at render time.

A11y: splitters expose role=separator with arrow-key resize, pane
headers are toolbar with tabindex=-1, drag fallback writes text/plain
so the operation initialises in browsers that require non-empty data.

Refs: PRD-016, RFC-015, EVID-020

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@fedorovvvv fedorovvvv enabled auto-merge May 6, 2026 21:38
@fedorovvvv fedorovvvv merged commit b727a47 into develop May 6, 2026
3 checks passed
@fedorovvvv fedorovvvv deleted the feature/multi-graph-mosaic branch May 6, 2026 21:39
explosivebit added a commit that referenced this pull request May 6, 2026
… light theme (#65)

## Summary

Bundles three feature streams from develop into v0.1.12:

- **F18 Time-travel slider — SINGLE mode** (PR #63) —
`/api/snapshot?at=ISO`, `/api/timeline-events`, `widgets/timeline/`,
canvas snapshot hydration. PRD-008 / RFC-007 / EVID-020 active.
- **`init --experimental` flag** (PR #60) — opt-in to esbuild
single-file bundle, ~9× smaller `dist/`. PRD-014 / RFC-013 / EVID-018
active. Closes the verification ask in #59.
- **Multi-graph mosaic dashboard** (PR #64) — split-pane layout with
persistent layout, addresses #61.
- **Version display footer** (PR #57) — `getForgeplanVersion()` +
`compareSemver`. PRD-012 / RFC-011 / EVID-016 active.
- **Shared UI primitives + npm update notification** (PR #58) — modal
manager + update checker. PRD-013 / RFC-012 / EVID-017 active.
- **Light theme** (PR #62) — dual-token CSS + `data-theme` attribute.
PRD-015 / RFC-014 / EVID-019 active.

COMPARE mode for time-travel (Alt-drag two scrubbers + diff overlay)
intentionally deferred — endpoint returns 501 with TODO marker.

## Why

Five feature PRs accumulated on develop since v0.1.11 (May 6). Cutting
them as a single minor-patch release rather than gating on the v0.2.0
milestone (full proactive-surfacer arc) keeps the cadence steady and
ships the bundle-size win + multi-graph layout to users now.

## Test plan

- [x] `npm run check` — 0 errors / 0 warnings across 486 files
- [x] `npx vitest run` — 14 files / 127 tests pass
- [x] PR #63 CI matrix (3 OS, node 22) — green before merge
- [ ] release/v0.1.12 CI matrix — pending on this PR
- [ ] Manual smoke after tag → GitHub Release fires `release.yml`
workflow

## Refs

PRDs activated since v0.1.11: PRD-008, PRD-012, PRD-013, PRD-014,
PRD-015.
RFCs activated: RFC-007, RFC-011, RFC-012, RFC-013, RFC-014.
Evidence: EVID-016 / EVID-017 / EVID-018 / EVID-019 / EVID-020.

🤖 Generated with [Claude Code](https://claude.com/claude-code)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant