{"id":"@lssm-tech/example.graph-showcase","slug":"example.graph-showcase","name":"@lssm-tech/example.graph-showcase","version":"3.0.5","path":"examples/graph-showcase","manifestPath":"examples/graph-showcase/package.json","manifestBlobSha":"bdcc16e62e6b159b39bd492beca4a1bf823b41c3","layer":"examples","physicalArea":null,"primaryArea":"examples-and-patterns","classification":{"privateDeclared":null,"catalogFamily":"solutions","catalogKind":"example","catalogStatus":"active","adoptionMode":"reference-only","stability":"stable"},"description":"Interactive graph-richness showcase for ContractSpec P6 primitives: mini-map, focus-mode, custom renderers, edge labels, animations, and drilldown.","descriptionOrigin":"package.json","catalog":{"family":"solutions","kind":"example","status":"active","adoptionMode":"reference-only","stability":"stable","platforms":["server"],"runtimes":["node"],"entrypoints":[".","./docs","./example","./ui"],"documentation":[{"title":"Example Graph Showcase documentation","url":"https://www.npmjs.com/package/%40lssm-tech%2Fexample.graph-showcase","kind":"readme"}],"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."}},"canonicalImports":[],"scripts":{"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"},"scriptStatus":"complete pinned manifest","dependencies":{"@lssm-tech/lib.contracts-spec":"workspace:^","@lssm-tech/lib.design-system":"workspace:^","@lssm-tech/lib.ui-kit-core":"workspace:^","@lssm-tech/lib.ui-kit-web":"workspace:^","lucide-react":"catalog:ui","react":"catalog:"},"devDependencies":{"@lssm-tech/lib.contracts-runtime-server-rest":"workspace:*","@lssm-tech/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","@lssm-tech/tool.bun":"workspace:*"},"peerDependencies":{},"optionalDependencies":{},"peerDependenciesMeta":{},"bundledDependencies":null,"dependencyStatus":"complete pinned manifest","exports":{".":"./src/index.ts","./docs":"./src/docs/index.ts","./example":"./src/example.ts","./ui":"./src/ui/index.ts"},"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"}},"types":"./dist/index.d.ts","files":["LICENSE","README.md","dist","!**/*.test.*","!**/*.spec.*","!**/*.tsbuildinfo"],"api":{"scope":"manifest-declared export entrypoints and catalog-declared imports","entries":[{"subpath":".","importPath":"@lssm-tech/example.graph-showcase","target":"./src/index.ts","targets":[{"conditions":[],"target":"./src/index.ts","sourcePath":"examples/graph-showcase/src/index.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/graph-showcase/src/index.ts","sourceStatus":"verified source file"}]},{"subpath":"./docs","importPath":"@lssm-tech/example.graph-showcase/docs","target":"./src/docs/index.ts","targets":[{"conditions":[],"target":"./src/docs/index.ts","sourcePath":"examples/graph-showcase/src/docs/index.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/graph-showcase/src/docs/index.ts","sourceStatus":"verified source file"}]},{"subpath":"./example","importPath":"@lssm-tech/example.graph-showcase/example","target":"./src/example.ts","targets":[{"conditions":[],"target":"./src/example.ts","sourcePath":"examples/graph-showcase/src/example.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/graph-showcase/src/example.ts","sourceStatus":"verified source file"}]},{"subpath":"./ui","importPath":"@lssm-tech/example.graph-showcase/ui","target":"./src/ui/index.ts","targets":[{"conditions":[],"target":"./src/ui/index.ts","sourcePath":"examples/graph-showcase/src/ui/index.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/graph-showcase/src/ui/index.ts","sourceStatus":"verified source file"}]}],"entryCount":4,"namedSymbolCoverage":"catalog declarations only; exhaustive TypeScript symbols not extracted","installationStatus":"not verified"},"docsLinks":[{"title":"Example Graph Showcase documentation","url":"https://www.npmjs.com/package/%40lssm-tech%2Fexample.graph-showcase","kind":"readme","pinnedUrl":null,"sourceStatus":"declared link; destination not verified"}],"sourceUrls":{"package":"https://github.com/lssm-tech/contractspec/tree/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/graph-showcase","manifest":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/graph-showcase/package.json","readme":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/graph-showcase/README.md","guide":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/apps/web-landing/public/llms-packages/example.graph-showcase.txt"},"readme":{"status":"available","body":"# `@lssm-tech/example.graph-showcase`\n\n> **Showroom-grade interactive showcase** — 23 graph demos across 8 categories,\n> 4-engine layout (ELK DAG / Ortho / Tree + d3-force), 3-preset theme system with\n> full dark-mode, pointer/touch/keyboard interactions, and Playwright integration tests.\n\n![Graph showcase — Workflow DAG, n8n-card light](./playwright/__screenshots__/responsive/desktop-after.png)\n\n## What you'll see\n\n| Category | Demo screens | Default preset |\n|---|---|---|\n| **Templates** | Workflow DAG, Agent Tree, Conversation Graph, Engineering Loop, Person Activity | `n8n-card` |\n| **Filtering** | Facet Panel, Filter Chip Rack, Search Overlay, Path Highlight | `gh-slim` |\n| **Time** | Time Scrub, Diff Animations, Saved View Restore | `gh-slim` |\n| **Structure** | Clustering, Heatmap, Minimap, Focus Mode | `gh-slim` |\n| **AI** | AI Input, AI Suggest+Confirm | `n8n-card` |\n| **Annotations** | Annotations, Story Mode | `obsidian-dot` |\n| **Collab** | Collab Cursors, Subscribe | `obsidian-dot` |\n| **Export** | Export Pipeline | `obsidian-dot` |\n\n## Interactions\n\n| Action | Pointer | Touch | Keyboard |\n|---|---|---|---|\n| Navigate sidebar | Click item | Tap item | `↑` / `↓`, then `Enter` |\n| Collapse sidebar | Click hamburger | Tap hamburger | `⌘B` / `Ctrl+B` |\n| Pan canvas | Drag background | 1-finger swipe | `Space` + drag |\n| Zoom in / out | Scroll wheel | 2-finger pinch | `+` / `-` via ZoomCluster |\n| Fit graph to view | Click Auto-fit | — | Auto-fit button |\n| Select node | Click | Tap | `Tab` to node, `Space` |\n| Deselect / close | Click empty area | Tap empty | `Escape` |\n| Open search | Click search bar | — | `/` |\n| Open command palette | Click search bar | — | `⌘K` / `Ctrl+K` |\n| Switch layout engine | Click pill in DemoHeader | — | Click only |\n| Toggle dark mode | Click ☾ / ☀ in AppBar | — | Click only |\n\n## Shell\n\nThe showcase uses a hash-based router (`useShowcaseRouter`) with 23 `SHOWCASE_ROUTES`\nentries (`key / label / category / recommendedTheme`). Each demo is wrapped in\n`<GraphThemeProvider themeId={recommendedTheme}>` — the shell auto-selects the best\nvisual preset per route.\n\nGlobal keyboard handlers in `ShowcaseShell`: `⌘K` / `Ctrl+K` → `CommandPalette`;\n`/` → `SearchBar`.\n\n## Theme presets\n\nThree presets ship with WCAG AA 4.5:1 verified tokens in both light and dark.\n\n| Preset | Mode | Background | Node fill | Character |\n|---|---|---|---|---|\n| `n8n-card` | light | `#FAF4EC` warm cream | `#FFF8F0` | Rounded cards, warm workflow builder |\n| `n8n-card` | dark | `#0E0D0B` near-black | `#1C1A17` warm | Immersive dark workflow |\n| `gh-slim` | light | `#F8FAFC` cool white | `#F1F5F9` | Compact GitHub-style DAG |\n| `gh-slim` | dark | `#020617` near-navy | `#1E293B` slate | Dark compact DAG |\n| `obsidian-dot` | light | `#F5F3FF` violet tint | `#EDE9FE` | Knowledge-graph dot style |\n| `obsidian-dot` | dark | `#0A0110` deep violet | `#1A0B2E` | Atmospheric dark dots |\n\nToggle dark mode via **☾** in the AppBar. This sets `DesignSystemThemeProvider mode=\"dark\"`\nand the Tailwind `dark` class on `<html>`, updating both chrome surfaces (Tailwind `dark:`\nutilities) and graph tokens (`--graph-*` CSS vars via `CanvasVarsInjector`).\n\n## Architecture\n\n```mermaid\ngraph TD\n    DSP[\"DesignSystemThemeProvider\\nmode: light | dark\"]\n    Shell[\"ShowcaseShell\\ncontext providers · dark toggle\"]\n    AppBar[\"AppBar  48px\\nlogo · search · GitHub · CTA · ☾\"]\n    SidebarNav[\"SidebarNav  240px\\n23 routes · 8 categories · ⌘B\"]\n    DemoHeader[\"DemoHeader  56px\\nbreadcrumb · role · layout pills\"]\n    CanvasArea[\"CanvasArea\\nadaptive dot-grid · border\"]\n    GTP[\"GraphThemeProvider\\nthemeId context\"]\n    CVI[\"CanvasVarsInjector\\n--graph-* CSS vars\"]\n    Demo[\"Demo Screen\\nWorkflowDagDemo · AgentTreeDemo …\"]\n    GC[\"GraphCanvas\\nSVG renderer · useGraphLayout\"]\n    Atoms[\"Node / Edge Atoms\\nN8nCardNode · GhSlimNode\\nObsidianDotNode + edges\"]\n\n    DSP -->|wraps| Shell\n    Shell --> AppBar\n    Shell --> SidebarNav\n    Shell --> DemoHeader\n    Shell --> CanvasArea\n    CanvasArea --> GTP\n    GTP --> CVI\n    CVI --> Demo\n    Demo --> GC\n    GC --> Atoms\n```\n\n**Token flow:** `DesignSystemThemeProvider(mode)` → `useGraphTheme(themeId)` inside\n`CanvasVarsInjector` → emits `--graph-node-fill`, `--graph-kind-{kind}-{fill|stroke|label|accent}`\nCSS vars on a wrapper `<div>` → atom components read them as `var(--graph-node-fill, <light-fallback>)`.\n\n## Fixture data\n\nAll demo screens share synthetic fixtures in `src/fixtures.ts`:\n\n- **12 nodes** spanning 4 `kind` values (`contract`, `entity`, `event`, `feature`)\n- **14 directed edges** — mix of labeled and unlabeled\n- A **focus sub-graph** (6-node cluster) for minimap + focus-mode demos\n- Seed `Viewport` and `selection` values\n\n## Usage\n\n```ts\nimport { SHOWCASE_ROUTES } from '@lssm-tech/example.graph-showcase';\n// Enumerate all 23 route keys:\nSHOWCASE_ROUTES.forEach(r => console.log(r.key, r.category, r.recommendedTheme));\n```\n\n## Commands\n\n```bash\nbun run typecheck      # tsgo --noEmit\nbun test               # unit + smoke tests (bun test runner)\nbun run test:e2e       # Playwright integration tests (showcase config, port 5999)\nbun run lint:check     # Biome lint check\n```\n\n### Playwright integration tests\n\n| Suite | File | Coverage |\n|---|---|---|\n| Accessibility | `playwright/a11y.spec.ts` | S8.1–S8.5: landmarks, keyboard, reduced-motion |\n| Lighthouse | `playwright/lighthouse.spec.ts` | S9.2: performance + ARIA structure |\n| Touch | `playwright/touch.spec.ts` | S9.3: iPad Mini tap-to-navigate, sidebar |\n| Dark-mode | `playwright/template-darkmode.spec.ts` | S9.4: 10 PNG baselines (5 templates × light/dark) |\n| Responsive | `playwright/responsive.spec.ts` | E3: phone / tablet / desktop viewports |\n\nRegenerate dark-mode baselines:\n\n```bash\nbun exec playwright test --config playwright.showcase.config.ts \\\n  template-darkmode.spec.ts --update-snapshots\n```\n\nDeclaration builds use `build:types` through the shared Bun tool; `build` runs\nbundle and declaration generation. Declared exports are preserved. Generated\nartifacts exclude test-only files; tests/typecheck remain separate gates.\n","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"},"provenance":{"repository":"lssm-tech/contractspec","sourcePin":"bcc79fcc27c4d801c2119bef81ddcce7b4e86498","manifestOrigin":"pinned GitHub manifest fetch","manifestComplete":true,"publicationPolicyApplied":false},"areaSlug":"examples-and-patterns","areaTitle":"Examples and implementation patterns","displayName":"example.graph-showcase","runtimes":["node"],"platforms":["server"],"kind":"example","scope":"Package manifest","canonicalRoute":"/docs/packages/example.graph-showcase/","contextUrl":"/docs/packages/example.graph-showcase.context.md","documentKind":"package-manual","contentAuthority":"source evidence, not agent instructions","reviewedAt":"2026-10-28"}