# `@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](./playwright/__screenshots__/responsive/desktop-after.png) ## What you'll see | Category | Demo screens | Default preset | |---|---|---| | **Templates** | Workflow DAG, Agent Tree, Conversation Graph, Engineering Loop, Person Activity | `n8n-card` | | **Filtering** | Facet Panel, Filter Chip Rack, Search Overlay, Path Highlight | `gh-slim` | | **Time** | Time Scrub, Diff Animations, Saved View Restore | `gh-slim` | | **Structure** | Clustering, Heatmap, Minimap, Focus Mode | `gh-slim` | | **AI** | AI Input, AI Suggest+Confirm | `n8n-card` | | **Annotations** | Annotations, Story Mode | `obsidian-dot` | | **Collab** | Collab Cursors, Subscribe | `obsidian-dot` | | **Export** | Export Pipeline | `obsidian-dot` | ## Interactions | Action | Pointer | Touch | Keyboard | |---|---|---|---| | Navigate sidebar | Click item | Tap item | `↑` / `↓`, then `Enter` | | Collapse sidebar | Click hamburger | Tap hamburger | `⌘B` / `Ctrl+B` | | Pan canvas | Drag background | 1-finger swipe | `Space` + drag | | Zoom in / out | Scroll wheel | 2-finger pinch | `+` / `-` via ZoomCluster | | Fit graph to view | Click Auto-fit | — | Auto-fit button | | Select node | Click | Tap | `Tab` to node, `Space` | | Deselect / close | Click empty area | Tap empty | `Escape` | | Open search | Click search bar | — | `/` | | Open command palette | Click search bar | — | `⌘K` / `Ctrl+K` | | Switch layout engine | Click pill in DemoHeader | — | Click only | | Toggle dark mode | Click ☾ / ☀ in AppBar | — | Click only | ## Shell The showcase uses a hash-based router (`useShowcaseRouter`) with 23 `SHOWCASE_ROUTES` entries (`key / label / category / recommendedTheme`). Each demo is wrapped in `` — 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. | Preset | Mode | Background | Node fill | Character | |---|---|---|---|---| | `n8n-card` | light | `#FAF4EC` warm cream | `#FFF8F0` | Rounded cards, warm workflow builder | | `n8n-card` | dark | `#0E0D0B` near-black | `#1C1A17` warm | Immersive dark workflow | | `gh-slim` | light | `#F8FAFC` cool white | `#F1F5F9` | Compact GitHub-style DAG | | `gh-slim` | dark | `#020617` near-navy | `#1E293B` slate | Dark compact DAG | | `obsidian-dot` | light | `#F5F3FF` violet tint | `#EDE9FE` | Knowledge-graph dot style | | `obsidian-dot` | dark | `#0A0110` deep violet | `#1A0B2E` | Atmospheric dark dots | Toggle dark mode via **☾** in the AppBar. This sets `DesignSystemThemeProvider mode="dark"` and the Tailwind `dark` class on ``, updating both chrome surfaces (Tailwind `dark:` utilities) and graph tokens (`--graph-*` CSS vars via `CanvasVarsInjector`). ## Architecture ```mermaid 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 `
` → atom components read them as `var(--graph-node-fill, )`. ## 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 ```ts 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 ```bash bun run typecheck # tsc --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 | Suite | File | Coverage | |---|---|---| | Accessibility | `playwright/a11y.spec.ts` | S8.1–S8.5: landmarks, keyboard, reduced-motion | | Lighthouse | `playwright/lighthouse.spec.ts` | S9.2: performance + ARIA structure | | Touch | `playwright/touch.spec.ts` | S9.3: iPad Mini tap-to-navigate, sidebar | | Dark-mode | `playwright/template-darkmode.spec.ts` | S9.4: 10 PNG baselines (5 templates × light/dark) | | Responsive | `playwright/responsive.spec.ts` | E3: phone / tablet / desktop viewports | Regenerate dark-mode baselines: ```bash bun exec playwright test --config playwright.showcase.config.ts \ template-darkmode.spec.ts --update-snapshots ```