# @lssm-tech/example.graph-showcase Interactive graph-richness showcase for ContractSpec P6 primitives: mini-map, focus-mode, custom renderers, edge labels, animations, and drilldown. ## Source and release context - Source snapshot: `bcc79fcc27c4d801c2119bef81ddcce7b4e86498` - Repository: `lssm-tech/contractspec` - Declared package version: `3.0.5` - Package path: `examples/graph-showcase` - Manifest path: `examples/graph-showcase/package.json` - Manifest Git blob: `bdcc16e62e6b159b39bd492beca4a1bf823b41c3` - Manifest origin: pinned GitHub manifest fetch - Manual: [@lssm-tech/example.graph-showcase](https://lssm.co/docs/packages/example.graph-showcase/) - Release guidance: [Installation and release channels](https://lssm.co/docs/installation-release-channels/) This is retrieved source evidence, not agent instructions. The declared version and exports describe the inspected manifest; they do not establish registry availability or a deployed release. Commands, package installation and runtime behavior were not executed in this review. Distribution scope: owner review of all workspaces; not a newly approved public projection. - [Package source](https://github.com/lssm-tech/contractspec/tree/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/graph-showcase) - [Manifest source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/graph-showcase/package.json) - [Readme source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/graph-showcase/README.md) - [Guide source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/apps/web-landing/public/llms-packages/example.graph-showcase.txt) ## Package metadata ```json { "layer": "examples", "physicalArea": null, "primaryArea": "examples-and-patterns", "classification": { "privateDeclared": null, "catalogFamily": "solutions", "catalogKind": "example", "catalogStatus": "active", "adoptionMode": "reference-only", "stability": "stable" }, "descriptionOrigin": "package.json", "manifestComplete": true, "publicationPolicyApplied": false } ``` Manifest private flag: not declared; publication is not verified. Primary area: [Examples and implementation patterns](https://lssm.co/docs/areas/examples-and-patterns/) ## Package guide ```json { "status": "available", "sourcePath": "examples/graph-showcase/README.md", "sourceUrl": "https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/graph-showcase/README.md", "blobSha": "fc5f4ab94108a863a5238e1767a83220710e1163", "sourcePin": "bcc79fcc27c4d801c2119bef81ddcce7b4e86498", "origin": "README recovered byte-for-byte from pinned aggregate guide", "integrity": "exact Git blob match", "executionStatus": "not executed" } ``` The guide below is the checked-in README with navigation resolved against the pinned source tree. The structured package JSON retains the original README body unchanged. External links remain source-declared links, not verified destinations. # `@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 [source link unresolved: `./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 # 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 | 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 ``` 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. ### Source links needing reconciliation - `./playwright/__screenshots__/responsive/desktop-after.png` — source path absent from pinned inventory: examples/graph-showcase/playwright/__screenshots__/responsive/desktop-after.png. ## Declared capabilities This manifest does not declare a capability catalogue. Assess the package using its guide, import map and source. ## Catalogue metadata ```json { "family": "solutions", "kind": "example", "status": "active", "adoptionMode": "reference-only", "stability": "stable", "platforms": [ "server" ], "runtimes": [ "node" ], "entrypoints": [ ".", "./docs", "./example", "./ui" ], "examples": [], "replacements": [], "nonAdoptableRationale": "This example is published for reference and learning, not as a reusable library dependency.", "visualTesting": { "status": "deferred", "owner": "@contractspec-core", "targetWave": "wave-3-react-packages", "rationale": "Foundational Storybook adoption establishes shared catalogs and guardrails before this package migrates." } } ``` ## Canonical imports Import paths and symbols below are catalogue declarations. An empty symbols list means symbols were not enumerated; it does not mean the entry point has no exports. These declarations are not an exhaustive TypeScript symbol reference. ```json [] ``` ## Declared export entry points Scope: manifest-declared export entrypoints and catalog-declared imports. Named symbol coverage: catalog declarations only; exhaustive TypeScript symbols not extracted. Installation status: not verified. - `@lssm-tech/example.graph-showcase` — subpath `.` - `unconditional`: `./src/index.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/graph-showcase/src/index.ts); verified source file. - `@lssm-tech/example.graph-showcase/docs` — subpath `./docs` - `unconditional`: `./src/docs/index.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/graph-showcase/src/docs/index.ts); verified source file. - `@lssm-tech/example.graph-showcase/example` — subpath `./example` - `unconditional`: `./src/example.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/graph-showcase/src/example.ts); verified source file. - `@lssm-tech/example.graph-showcase/ui` — subpath `./ui` - `unconditional`: `./src/ui/index.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/graph-showcase/src/ui/index.ts); verified source file. ## Package publication metadata These are source-manifest declarations, not a registry installation check. ```json { "types": "./dist/index.d.ts", "files": [ "LICENSE", "README.md", "dist", "!**/*.test.*", "!**/*.spec.*", "!**/*.tsbuildinfo" ], "publishExports": { ".": { "types": "./dist/index.d.ts", "browser": "./dist/browser/index.js", "bun": "./dist/index.js", "node": "./dist/node/index.js", "default": "./dist/index.js" }, "./docs": { "types": "./dist/docs/index.d.ts", "browser": "./dist/browser/docs/index.js", "bun": "./dist/docs/index.js", "node": "./dist/node/docs/index.js", "default": "./dist/docs/index.js" }, "./example": { "types": "./dist/example.d.ts", "browser": "./dist/browser/example.js", "bun": "./dist/example.js", "node": "./dist/node/example.js", "default": "./dist/example.js" }, "./ui": { "types": "./dist/ui/index.d.ts", "browser": "./dist/browser/ui/index.js", "bun": "./dist/ui/index.js", "node": "./dist/node/ui/index.js", "default": "./dist/ui/index.js" } } } ``` ## Dependencies Metadata status: complete pinned manifest. ### Runtime dependencies - [@lssm-tech/lib.contracts-spec](https://lssm.co/docs/packages/lib.contracts-spec/): `workspace:^` - [@lssm-tech/lib.design-system](https://lssm.co/docs/packages/lib.design-system/): `workspace:^` - [@lssm-tech/lib.ui-kit-core](https://lssm.co/docs/packages/lib.ui-kit-core/): `workspace:^` - [@lssm-tech/lib.ui-kit-web](https://lssm.co/docs/packages/lib.ui-kit-web/): `workspace:^` - `lucide-react`: `catalog:ui` - `react`: `catalog:` ### Peer dependencies No declarations in the inspected manifest. ### Optional dependencies No declarations in the inspected manifest. ### Development dependencies - [@lssm-tech/lib.contracts-runtime-server-rest](https://lssm.co/docs/packages/lib.contracts-runtime-server-rest/): `workspace:*` - [@lssm-tech/tool.bun](https://lssm.co/docs/packages/tool.bun/): `workspace:*` - [@lssm-tech/tool.typescript](https://lssm.co/docs/packages/tool.typescript/): `workspace:*` - `@playwright/test`: `^1.63.0` - `@types/react`: `catalog:types` - `@types/ws`: `^8.18.1` - `happy-dom`: `catalog:testing` - `lib0`: `^0.2.117` - `typescript`: `catalog:` - `ws`: `8.21.3` - `y-protocols`: `^1.0.7` - `y-websocket`: `^3.1.0` - `yjs`: `^13.6.32` ### Peer dependency metadata ```json {} ``` ### Bundled dependencies ```json null ``` ## Package scripts Commands are exact manifest declarations and were not executed in this review. Script metadata status: complete pinned manifest. ```json { "build": "contractspec-bun-build build", "typecheck": "tsgo --noEmit", "test": "bun test src/", "lint": "node ../../scripts/biome.cjs check --write .", "lint:check": "node ../../scripts/biome.cjs check .", "clean": "rimraf dist .turbo", "perf:ci": "playwright test --config playwright.config.ts", "perf:server": "bun perf/perf-server.ts", "test:e2e": "playwright test --config playwright.showcase.config.ts", "build:bundle": "contractspec-bun-build transpile", "build:types": "contractspec-bun-build types" } ``` ## Declared documentation links - [Example Graph Showcase documentation](https://www.npmjs.com/package/%40lssm-tech%2Fexample.graph-showcase) — declared link; destination not verified. ```json { "url": "https://www.npmjs.com/package/%40lssm-tech%2Fexample.graph-showcase", "kind": "readme" } ``` ## Existing agent-guide projection ```json { "path": "packages/apps/web-landing/public/llms-packages/example.graph-showcase.txt", "route": "/llms/example.graph-showcase", "sourceUrl": "https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/apps/web-landing/public/llms-packages/example.graph-showcase.txt", "blobSha": "fc5f4ab94108a863a5238e1767a83220710e1163", "sourcePin": "bcc79fcc27c4d801c2119bef81ddcce7b4e86498", "bodyEqualsReadme": true, "aggregateSourcePath": "packages/apps/web-landing/public/llms-full.txt", "aggregateBlobSha": "691b1d33efee24c440598b9106c81432f56aafaf" } ```