example.graph-showcase

@lssm-tech/example.graph-showcase

Showroom-grade interactive showcase — 23 graph demos across 8 categories, 4-engine layout (ELK DAG / Ortho / Tree + d3-force), 3-preset theme system with full dark-mode, pointer/touch/keyboard interactions, and Playwright integration tests.

Graph showcase — Workflow DAG, n8n-card light^†

What you'll see

Interactions

Shell

The showcase uses a hash-based router (useShowcaseRouter) with 23 SHOWCASE_ROUTES entries (key / label / category / recommendedTheme). Each demo is wrapped in <GraphThemeProvider themeId={recommendedTheme}> — the shell auto-selects the best visual preset per route.

Global keyboard handlers in ShowcaseShell: ⌘K / Ctrl+K → CommandPalette; / → SearchBar.

Theme presets

Three presets ship with WCAG AA 4.5:1 verified tokens in both light and dark.

Toggle dark mode via ☾ in the AppBar. This sets DesignSystemThemeProvider mode="dark" and the Tailwind dark class on <html>, updating both chrome surfaces (Tailwind dark: utilities) and graph tokens (--graph-* CSS vars via CanvasVarsInjector).

Architecture

graph TD
    DSP["DesignSystemThemeProvider\nmode: light | dark"]
    Shell["ShowcaseShell\ncontext providers · dark toggle"]
    AppBar["AppBar  48px\nlogo · search · GitHub · CTA · ☾"]
    SidebarNav["SidebarNav  240px\n23 routes · 8 categories · ⌘B"]
    DemoHeader["DemoHeader  56px\nbreadcrumb · role · layout pills"]
    CanvasArea["CanvasArea\nadaptive dot-grid · border"]
    GTP["GraphThemeProvider\nthemeId context"]
    CVI["CanvasVarsInjector\n--graph-* CSS vars"]
    Demo["Demo Screen\nWorkflowDagDemo · AgentTreeDemo …"]
    GC["GraphCanvas\nSVG renderer · useGraphLayout"]
    Atoms["Node / Edge Atoms\nN8nCardNode · GhSlimNode\nObsidianDotNode + edges"]

    DSP -->|wraps| Shell
    Shell --> AppBar
    Shell --> SidebarNav
    Shell --> DemoHeader
    Shell --> CanvasArea
    CanvasArea --> GTP
    GTP --> CVI
    CVI --> Demo
    Demo --> GC
    GC --> Atoms

Token flow: DesignSystemThemeProvider(mode) → useGraphTheme(themeId) inside CanvasVarsInjector → emits --graph-node-fill, --graph-kind-{kind}-{fill|stroke|label|accent} CSS vars on a wrapper <div> → atom components read them as var(--graph-node-fill, <light-fallback>).

Fixture data

All demo screens share synthetic fixtures in src/fixtures.ts:

• 12 nodes spanning 4 kind values (contract, entity, event, feature)
• 14 directed edges — mix of labeled and unlabeled
• A focus sub-graph (6-node cluster) for minimap + focus-mode demos
• Seed Viewport and selection values

Usage

import { SHOWCASE_ROUTES } from '@lssm-tech/example.graph-showcase';
// Enumerate all 23 route keys:
SHOWCASE_ROUTES.forEach(r => console.log(r.key, r.category, r.recommendedTheme));

Commands

bun run typecheck      # tsgo --noEmit
bun test               # unit + smoke tests (bun test runner)
bun run test:e2e       # Playwright integration tests (showcase config, port 5999)
bun run lint:check     # Biome lint check

Playwright integration tests

Regenerate dark-mode baselines:

bun exec playwright test --config playwright.showcase.config.ts \
  template-darkmode.spec.ts --update-snapshots

Declaration builds use build:types through the shared Bun tool; build runs bundle and declaration generation. Declared exports are preserved. Generated artifacts exclude test-only files; tests/typecheck remain separate gates.