{"id":"@lssm-tech/integration.storybook","slug":"integration.storybook","name":"@lssm-tech/integration.storybook","version":"3.0.3","path":"packages/integrations/storybook","manifestPath":"packages/integrations/storybook/package.json","manifestBlobSha":"758e3934cbab75bb0ab955e68aa239f236749f30","layer":"integrations","physicalArea":null,"primaryArea":"ui-and-presentations","classification":{"privateDeclared":null,"catalogFamily":"integrations","catalogKind":"integration","catalogStatus":"active","adoptionMode":"adoptable","stability":"experimental"},"description":"Contract-driven Storybook generation and optional Chromatic integration.","descriptionOrigin":"package.json","catalog":{"family":"integrations","kind":"integration","status":"active","adoptionMode":"adoptable","stability":"experimental","platforms":["web"],"runtimes":["node","bun"],"entrypoints":[".","./bindings","./catalog","./chromatic","./generator","./preset","./preview","./sandbox","./viewports","./integration","./feature"],"documentation":[{"title":"Storybook and Chromatic integration guide","url":"https://www.contractspec.io/docs/integrations/storybook","kind":"guide"}],"examples":[{"title":"ContractSpec Storybook dogfood host","url":"https://github.com/lssm-tech/contractspec/tree/main/packages/apps/storybook","kind":"example"}],"replacements":[],"capabilities":[{"id":"ui.visual-testing","title":"Contract-driven visual testing","description":"Generate Storybook catalogs and publish approved synthetic or sanitized captures to Chromatic.","status":"active","useCases":["Build a reusable Storybook for a product vertical","Run governed Chromatic visual review"],"aliases":["storybook","reusable Storybook preset","CSF story generation","chromatic","Chromatic visual regression","visual testing","component catalog","downstream React vertical Storybook"],"canonicalImports":[{"from":"@lssm-tech/integration.storybook","symbols":["createReactViteConfig","createNextjsViteConfig"]},{"from":"@lssm-tech/integration.storybook/generator","symbols":["generateStorybook","checkStorybook"]}],"constraints":{"platforms":["web"],"runtimes":["node","bun"],"requires":["React","Storybook 10.5","TypeScript"],"avoidWhen":["The target is a native-only or non-React component catalog.","External visual capture cannot be limited to synthetic or sanitized fixtures."]}}]},"canonicalImports":[{"capabilityId":"ui.visual-testing","from":"@lssm-tech/integration.storybook","symbols":["createReactViteConfig","createNextjsViteConfig"]},{"capabilityId":"ui.visual-testing","from":"@lssm-tech/integration.storybook/generator","symbols":["generateStorybook","checkStorybook"]}],"scripts":{"build":"contractspec-bun-build build","build:bundle":"contractspec-bun-build transpile","build:types":"contractspec-bun-build types","clean":"rimraf dist .turbo","lint:check":"node ../../../scripts/biome.cjs check .","lint:fix":"node ../../../scripts/biome.cjs check --write .","test":"bun test","typecheck":"tsgo --noEmit"},"scriptStatus":"complete pinned manifest","dependencies":{"@lssm-tech/lib.contracts-integrations":"workspace:^","@lssm-tech/lib.contracts-spec-core":"workspace:^","@lssm-tech/lib.schema":"workspace:^"},"devDependencies":{"@lssm-tech/tool.bun":"workspace:*","@lssm-tech/tool.typescript":"workspace:*","@storybook/addon-a11y":"catalog:testing","@storybook/addon-docs":"catalog:testing","@storybook/addon-mcp":"catalog:testing","@storybook/addon-themes":"catalog:testing","@storybook/addon-vitest":"catalog:testing","@storybook/react-vite":"catalog:testing","@types/bun":"catalog:types","@types/node":"catalog:types","@vitest/browser":"4.1.11","@vitest/browser-playwright":"4.1.11","msw":"catalog:testing","msw-storybook-addon":"catalog:testing","chromatic":"catalog:testing","rimraf":"catalog:build","typescript":"catalog:testing","vitest":"4.1.11"},"peerDependencies":{"storybook":"10.6.0","@storybook/addon-a11y":"10.6.0","@storybook/addon-docs":"10.6.0","@storybook/addon-mcp":"10.6.0","@storybook/addon-themes":"10.6.0","@storybook/addon-vitest":"10.6.0","@storybook/react-vite":"10.6.0","@storybook/nextjs-vite":"10.6.0","@vitest/browser":"^4.1.11","@vitest/browser-playwright":"^4.1.11","vitest":"^4.1.11","msw":"2.15.0","msw-storybook-addon":"3.0.3","chromatic":"^18.9.4"},"optionalDependencies":{},"peerDependenciesMeta":{"@storybook/react-vite":{"optional":true},"@storybook/nextjs-vite":{"optional":true},"chromatic":{"optional":true}},"bundledDependencies":null,"dependencyStatus":"complete pinned manifest","exports":{".":"./src/index.ts","./authoring-bindings":"./src/authoring-bindings.ts","./bindings":"./src/bindings.ts","./catalog":"./src/catalog.ts","./chromatic":"./src/chromatic.ts","./config":"./src/config.ts","./feature":"./src/feature.ts","./generator":"./src/generator.ts","./generator-authoring":"./src/generator-authoring.ts","./generator-inputs":"./src/generator-inputs.ts","./generator-parameters":"./src/generator-parameters.ts","./generator-source":"./src/generator-source.ts","./integration":"./src/integration.ts","./preset":"./src/preset.ts","./preview":"./src/preview.ts","./sandbox":"./src/sandbox.ts","./types":"./src/types.ts","./viewports":"./src/viewports.ts"},"publishExports":{".":{"types":"./dist/index.d.ts","bun":"./dist/index.js","node":"./dist/node/index.js","default":"./dist/index.js"},"./authoring-bindings":{"types":"./dist/authoring-bindings.d.ts","bun":"./dist/authoring-bindings.js","node":"./dist/node/authoring-bindings.js","default":"./dist/authoring-bindings.js"},"./bindings":{"types":"./dist/bindings.d.ts","bun":"./dist/bindings.js","node":"./dist/node/bindings.js","default":"./dist/bindings.js"},"./catalog":{"types":"./dist/catalog.d.ts","bun":"./dist/catalog.js","node":"./dist/node/catalog.js","default":"./dist/catalog.js"},"./chromatic":{"types":"./dist/chromatic.d.ts","bun":"./dist/chromatic.js","node":"./dist/node/chromatic.js","default":"./dist/chromatic.js"},"./config":{"types":"./dist/config.d.ts","bun":"./dist/config.js","node":"./dist/node/config.js","default":"./dist/config.js"},"./feature":{"types":"./dist/feature.d.ts","bun":"./dist/feature.js","node":"./dist/node/feature.js","default":"./dist/feature.js"},"./generator":{"types":"./dist/generator.d.ts","bun":"./dist/generator.js","node":"./dist/node/generator.js","default":"./dist/generator.js"},"./generator-authoring":{"types":"./dist/generator-authoring.d.ts","bun":"./dist/generator-authoring.js","node":"./dist/node/generator-authoring.js","default":"./dist/generator-authoring.js"},"./generator-inputs":{"types":"./dist/generator-inputs.d.ts","bun":"./dist/generator-inputs.js","node":"./dist/node/generator-inputs.js","default":"./dist/generator-inputs.js"},"./generator-parameters":{"types":"./dist/generator-parameters.d.ts","bun":"./dist/generator-parameters.js","node":"./dist/node/generator-parameters.js","default":"./dist/generator-parameters.js"},"./generator-source":{"types":"./dist/generator-source.d.ts","bun":"./dist/generator-source.js","node":"./dist/node/generator-source.js","default":"./dist/generator-source.js"},"./integration":{"types":"./dist/integration.d.ts","bun":"./dist/integration.js","node":"./dist/node/integration.js","default":"./dist/integration.js"},"./preset":{"types":"./dist/preset.d.ts","bun":"./dist/preset.js","node":"./dist/node/preset.js","default":"./dist/preset.js"},"./preview":{"types":"./dist/preview.d.ts","bun":"./dist/preview.js","node":"./dist/node/preview.js","default":"./dist/preview.js"},"./sandbox":{"types":"./dist/sandbox.d.ts","bun":"./dist/sandbox.js","node":"./dist/node/sandbox.js","default":"./dist/sandbox.js"},"./types":{"types":"./dist/types.d.ts","bun":"./dist/types.js","node":"./dist/node/types.js","default":"./dist/types.js"},"./viewports":{"types":"./dist/viewports.d.ts","bun":"./dist/viewports.js","node":"./dist/node/viewports.js","default":"./dist/viewports.js"}},"types":"./dist/index.d.ts","files":["dist","src","README.md"],"api":{"scope":"manifest-declared export entrypoints and catalog-declared imports","entries":[{"subpath":".","importPath":"@lssm-tech/integration.storybook","target":"./src/index.ts","targets":[{"conditions":[],"target":"./src/index.ts","sourcePath":"packages/integrations/storybook/src/index.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/integrations/storybook/src/index.ts","sourceStatus":"verified source file"}]},{"subpath":"./authoring-bindings","importPath":"@lssm-tech/integration.storybook/authoring-bindings","target":"./src/authoring-bindings.ts","targets":[{"conditions":[],"target":"./src/authoring-bindings.ts","sourcePath":"packages/integrations/storybook/src/authoring-bindings.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/integrations/storybook/src/authoring-bindings.ts","sourceStatus":"verified source file"}]},{"subpath":"./bindings","importPath":"@lssm-tech/integration.storybook/bindings","target":"./src/bindings.ts","targets":[{"conditions":[],"target":"./src/bindings.ts","sourcePath":"packages/integrations/storybook/src/bindings.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/integrations/storybook/src/bindings.ts","sourceStatus":"verified source file"}]},{"subpath":"./catalog","importPath":"@lssm-tech/integration.storybook/catalog","target":"./src/catalog.ts","targets":[{"conditions":[],"target":"./src/catalog.ts","sourcePath":"packages/integrations/storybook/src/catalog.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/integrations/storybook/src/catalog.ts","sourceStatus":"verified source file"}]},{"subpath":"./chromatic","importPath":"@lssm-tech/integration.storybook/chromatic","target":"./src/chromatic.ts","targets":[{"conditions":[],"target":"./src/chromatic.ts","sourcePath":"packages/integrations/storybook/src/chromatic.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/integrations/storybook/src/chromatic.ts","sourceStatus":"verified source file"}]},{"subpath":"./config","importPath":"@lssm-tech/integration.storybook/config","target":"./src/config.ts","targets":[{"conditions":[],"target":"./src/config.ts","sourcePath":"packages/integrations/storybook/src/config.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/integrations/storybook/src/config.ts","sourceStatus":"verified source file"}]},{"subpath":"./feature","importPath":"@lssm-tech/integration.storybook/feature","target":"./src/feature.ts","targets":[{"conditions":[],"target":"./src/feature.ts","sourcePath":"packages/integrations/storybook/src/feature.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/integrations/storybook/src/feature.ts","sourceStatus":"verified source file"}]},{"subpath":"./generator","importPath":"@lssm-tech/integration.storybook/generator","target":"./src/generator.ts","targets":[{"conditions":[],"target":"./src/generator.ts","sourcePath":"packages/integrations/storybook/src/generator.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/integrations/storybook/src/generator.ts","sourceStatus":"verified source file"}]},{"subpath":"./generator-authoring","importPath":"@lssm-tech/integration.storybook/generator-authoring","target":"./src/generator-authoring.ts","targets":[{"conditions":[],"target":"./src/generator-authoring.ts","sourcePath":"packages/integrations/storybook/src/generator-authoring.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/integrations/storybook/src/generator-authoring.ts","sourceStatus":"verified source file"}]},{"subpath":"./generator-inputs","importPath":"@lssm-tech/integration.storybook/generator-inputs","target":"./src/generator-inputs.ts","targets":[{"conditions":[],"target":"./src/generator-inputs.ts","sourcePath":"packages/integrations/storybook/src/generator-inputs.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/integrations/storybook/src/generator-inputs.ts","sourceStatus":"verified source file"}]},{"subpath":"./generator-parameters","importPath":"@lssm-tech/integration.storybook/generator-parameters","target":"./src/generator-parameters.ts","targets":[{"conditions":[],"target":"./src/generator-parameters.ts","sourcePath":"packages/integrations/storybook/src/generator-parameters.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/integrations/storybook/src/generator-parameters.ts","sourceStatus":"verified source file"}]},{"subpath":"./generator-source","importPath":"@lssm-tech/integration.storybook/generator-source","target":"./src/generator-source.ts","targets":[{"conditions":[],"target":"./src/generator-source.ts","sourcePath":"packages/integrations/storybook/src/generator-source.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/integrations/storybook/src/generator-source.ts","sourceStatus":"verified source file"}]},{"subpath":"./integration","importPath":"@lssm-tech/integration.storybook/integration","target":"./src/integration.ts","targets":[{"conditions":[],"target":"./src/integration.ts","sourcePath":"packages/integrations/storybook/src/integration.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/integrations/storybook/src/integration.ts","sourceStatus":"verified source file"}]},{"subpath":"./preset","importPath":"@lssm-tech/integration.storybook/preset","target":"./src/preset.ts","targets":[{"conditions":[],"target":"./src/preset.ts","sourcePath":"packages/integrations/storybook/src/preset.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/integrations/storybook/src/preset.ts","sourceStatus":"verified source file"}]},{"subpath":"./preview","importPath":"@lssm-tech/integration.storybook/preview","target":"./src/preview.ts","targets":[{"conditions":[],"target":"./src/preview.ts","sourcePath":"packages/integrations/storybook/src/preview.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/integrations/storybook/src/preview.ts","sourceStatus":"verified source file"}]},{"subpath":"./sandbox","importPath":"@lssm-tech/integration.storybook/sandbox","target":"./src/sandbox.ts","targets":[{"conditions":[],"target":"./src/sandbox.ts","sourcePath":"packages/integrations/storybook/src/sandbox.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/integrations/storybook/src/sandbox.ts","sourceStatus":"verified source file"}]},{"subpath":"./types","importPath":"@lssm-tech/integration.storybook/types","target":"./src/types.ts","targets":[{"conditions":[],"target":"./src/types.ts","sourcePath":"packages/integrations/storybook/src/types.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/integrations/storybook/src/types.ts","sourceStatus":"verified source file"}]},{"subpath":"./viewports","importPath":"@lssm-tech/integration.storybook/viewports","target":"./src/viewports.ts","targets":[{"conditions":[],"target":"./src/viewports.ts","sourcePath":"packages/integrations/storybook/src/viewports.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/integrations/storybook/src/viewports.ts","sourceStatus":"verified source file"}]}],"entryCount":18,"namedSymbolCoverage":"catalog declarations only; exhaustive TypeScript symbols not extracted","installationStatus":"not verified"},"docsLinks":[{"title":"Storybook and Chromatic integration guide","url":"https://www.contractspec.io/docs/integrations/storybook","kind":"guide","pinnedUrl":null,"sourceStatus":"declared link; destination not verified"}],"sourceUrls":{"package":"https://github.com/lssm-tech/contractspec/tree/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/integrations/storybook","manifest":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/integrations/storybook/package.json","readme":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/integrations/storybook/README.md","guide":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/apps/web-landing/public/llms-packages/integration.storybook.txt"},"readme":{"status":"available","body":"# `@lssm-tech/integration.storybook`\n\nStorybook 10.6 hosts require Vitest 4.1.11 and matching `@vitest/browser`,\n`@vitest/browser-playwright`, and `@vitest/coverage-v8` versions. The upstream\nStorybook addon does not yet support Vitest 5.\n\nThe Storybook authoring host uses TypeScript 5.9.3 for its `tsconfck` parser.\nThis is isolated in `catalog:testing`; application TypeScript 7 and native\nTypeScript 6 catalogs are not downgraded.\n\nContractSpec's provider-neutral bridge from visual-scenario contracts to executable Storybook CSF. It provides React-Vite and Next.js-Vite config factories, deterministic generation and drift checks, typed render/lifecycle/interaction bindings, opt-in package catalogs, documentation and sandbox metadata, browser-test policy, MCP configuration, accessibility defaults, and an external-capture gate for Chromatic.\n\n```bash\nbun add -d @lssm-tech/integration.storybook storybook \\\n  @storybook/react-vite @storybook/addon-a11y @storybook/addon-docs \\\n  @storybook/addon-mcp @storybook/addon-themes @storybook/addon-vitest \\\n  msw msw-storybook-addon vitest @vitest/browser \\\n  @vitest/browser-playwright @vitest/coverage-v8\n```\n\nUse `@storybook/nextjs-vite` instead of `@storybook/react-vite` for a Next.js\nvertical. Add `chromatic` only when external visual review is enabled.\n\nRegister the integration through Storybook's supported preset API:\n\n```ts\nexport default {\n\tframework: { name: '@storybook/nextjs-vite', options: {} },\n\tstories: [],\n\taddons: [\n\t\t{\n\t\t\tname: '@lssm-tech/integration.storybook/preset',\n\t\t\toptions: { contractspec: config },\n\t\t},\n\t],\n};\n```\n\n```ts\nimport { generateStorybook } from '@lssm-tech/integration.storybook/generator';\n\nawait generateStorybook({\n\tcwd: process.cwd(),\n\tconfigFile: 'contractspec.storybook.ts',\n});\n```\n\nGenerated story IDs derive from catalog namespace, presentation key, and case key. Filesystem moves therefore do not change review identity. Source and artifact hashes normalize binding paths relative to the consumer workspace, so identical checkouts produce identical evidence on macOS and Linux. Chromatic publication fails closed unless a scenario declares synthetic or sanitized data and `capture.external: true`.\n\nPackage catalogs are never discovered transitively. Import each dependency's\n`StorybookCatalogManifest` and pass that manifest object through\n`ContractSpecStorybookConfig.catalogs`; string package names are intentionally\nnot resolved or scanned implicitly.\n\n```ts\nimport { communicationOsStorybookCatalog } from '@lssm-tech/module.communication-os/storybook';\n\nexport default {\n\t// framework, globs, bindings, and generated directory omitted\n\tcatalogs: [communicationOsStorybookCatalog],\n};\n```\n\nA catalog chooses exactly one delivery mode:\n\n- `storyGlobs` points at committed executable CSF.\n- `scenarios` embeds provider-neutral scenario data for the consumer's\n  deterministic generation step.\n\nEmbedded catalogs specify a catalog-level `bindingModule`, or a binding module\non every scenario. Bare package specifiers are preserved in generated CSF;\nrelative modules resolve from the consumer workspace passed as `cwd`.\n`requirements` are resolved from that workspace before generation and fail\nclosed when a package is unavailable. `previewAnnotations` are appended by the\npreset so a package can opt in its CSS, providers, decorators, and toolbar\nglobals. Optional `coverage` data is carried as package-owned governance\nmetadata and participates in the deterministic source hash.\n\n```ts\nexport const designCatalog = {\n\tnamespace: '@example/design-catalog',\n\tversion: '1.0.0',\n\tscenarios: designScenarios,\n\tbindingModule: '@example/design-system/storybook-bindings',\n\trequirements: ['@example/design-system'],\n\tpreviewAnnotations: ['@example/design-system/storybook-preview'],\n\tcoverage: { owner: 'design-platform' },\n} satisfies StorybookCatalogManifest;\n```\n\nEmbedded story IDs use the selected catalog's namespace, presentation key, and\ncase key. Catalog order does not affect IDs, source hashes, artifact hashes, or\ndrift results, and filesystem placement does not affect IDs. Normalized ID and\noutput-file collisions fail generation before any files are written.\n\n## Authoring and sandbox contracts\n\nVisual scenarios may reference public components, subcomponents, meta- or\nstory-level renders, decorators, setup hooks, and interaction workflows by\nbinding name. Serializable args, globals, and parameters stay in the contract;\nReact values and executable hooks remain in package-owned binding modules.\n\nCatalogs may contribute locales, context scenarios, feature-flag sets, API\nstates, routes, provider annotations, and public-surface coverage. The host\nmerges them into deterministic toolbar globals and isolated providers. Native\nand desktop-only catalogs use explicit platform qualification rather than a\nweb rendering shim.\n","sourcePath":"packages/integrations/storybook/README.md","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/integrations/storybook/README.md","blobSha":"c3f106020b413cae29cea725affc3cff1b6448e7","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":"ui-and-presentations","areaTitle":"Interfaces, presentations and design","displayName":"integration.storybook","runtimes":["node","bun"],"platforms":["web"],"kind":"integration","scope":"Package manifest","canonicalRoute":"/docs/packages/integration.storybook/","contextUrl":"/docs/packages/integration.storybook.context.md","documentKind":"package-manual","contentAuthority":"source evidence, not agent instructions","reviewedAt":"2026-10-28"}