Feat/add llms

component-library/.storybook/manager.ts

@@ -2,6 +2,23 @@ import { addons } from 'storybook/manager-api';
 
 import theme from './theme';
 
+const redirectStaticDocsPath = () => {
+	const docsPath = new URL(window.location.href).searchParams.get('path');
+
+	if (docsPath === '/llms.txt' || docsPath === '/llms-full.txt') {
+		window.location.replace(docsPath);
+		return;
+	}
+
+	if (!docsPath?.startsWith('/docs/') || !docsPath.endsWith('.md')) {
+		return;
+	}
+
+	window.location.replace(docsPath);
+};
+
+redirectStaticDocsPath();
+
 addons.setConfig({
 	theme,
 });

component-library/.storybook/preview-head.html

@@ -235,6 +235,7 @@
   }
 
 </style>
+<script src="/docs-markdown-actions.js" defer></script>
 <script>
   function openLightbox(src) {
     var el = document.getElementById('docs-lightbox');

component-library/.storybook/preview.ts

@@ -15,6 +15,7 @@ import { installBccLightbox } from '../src/components/custom/BccLightbox/state';
 import { BccConfirmDialog, BccToast } from '../src/index';
 import '../src/style.css';
 import '../src/styles/archivo-font.css';
+import '../src/styles/docs-markdown-actions.css';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* ── Color swatch copy popover (tippy) ── */
@@ -269,6 +270,8 @@ const preview: Preview = {
 						'Tokens',
 						'Token Reference',
 					],
+					'AI Tools',
+					['LLMS.txt'],
 					'Custom',
 					'Wrapped',
 					'PrimeVue',

component-library/README.md

@@ -41,7 +41,6 @@ app.mount('#app');
 
 2. **Add styles** using one of the two options below.
 
-
 ### Styles Option 1 — Recommended: full Tailwind in your app
 
 Use this if you want Tailwind utility classes in your own templates while still letting the library's components render correctly.
@@ -71,7 +70,7 @@ That single import is enough. `theme.css` includes:
 - BCC design tokens, `@theme` / `@utility` definitions, and the rest of the design-system CSS inlined from `src/style.css` (including component-specific rules such as `BccInput` icon sizing and `BccButton` context tokens).
 - `library-utilities.css`, the pre-compiled Tailwind **utility class** rules used inside library templates (which your build cannot infer from the published JS).
 
-Do **not** rely on `library-utilities.css` alone with a minimal “base” import: you still need the full `theme.css` (or `style.css` for Option 2) so non-utility component styles and tokens are present. 
+Do **not** rely on `library-utilities.css` alone with a minimal “base” import: you still need the full `theme.css` (or `style.css` for Option 2) so non-utility component styles and tokens are present.
 
 ### Styles Option 2 — Pre-built CSS only
 
@@ -85,7 +84,6 @@ import '@bcc-code/component-library-vue/style.css';
 
 You get the BCC theme and component styles only; no Tailwind utilities in your app.
 
-
 # Components
 
 All components are namespaced with `Bcc`. Use them in templates or register them globally in your `main.ts`.
@@ -130,9 +128,26 @@ The library exports both **custom BCC components** (e.g. `BccBadge`, `BccFrame`,
 pnpm install
 pnpm run start        # Storybook on port 6006
 pnpm run build        # Typecheck, types, and Vite build
+pnpm run docs:ai      # Build Storybook, then generate AI-ready docs outputs
+pnpm run build:llms   # Regenerate AI docs from an existing storybook-static/index.json
 pnpm run build:vite   # Vite build only (includes theme.css)
 ```
 
+### AI-ready docs outputs
+
+
+`pnpm run docs:ai` generates the public AI documentation artifacts into `storybook-static/`:
+
+- `/llms.txt`: Markdown index of public docs pages.
+- `/llms-full.txt`: concatenated Markdown for all public docs pages.
+- `/docs/<page>.md`: per-page Markdown mirroring the Storybook docs route, e.g. `/docs/foundations-colors--docs` -> `/docs/foundations-colors--docs.md`.
+
+`build-storybook` runs the same generation after Storybook builds, so deployed docs get these files at runtime. The generated files live in `storybook-static/`, which is ignored and not committed; CI does not need a drift check unless these build artifacts are committed later.
+
+The generator uses Storybook's `storybook-static/index.json` as the route source of truth, converts MDX to readable Markdown, and summarizes autodocs story pages from story metadata. It only reads public docs entries from `docs` and `src` through the Storybook manifest, and excludes private/internal/secrets paths, env files, dependency folders, build outputs, and caches.
+
+Override the published URL base with `LLMS_BASE_URL=https://your-docs-host pnpm run build:llms` if needed. Only static Markdown and JSON documentation artifacts are produced.
+
 ### Folder structure (where to work)
 
 - `src/components/custom`: New BCC-first components and component-specific styles/logic.

component-library/docs/ai-tools/LLMS.mdx

@@ -0,0 +1,64 @@
+import { Meta, Unstyled } from '@storybook/addon-docs/blocks';
+
+<Meta title="AI Tools/LLMS.txt" />
+
+<Unstyled>
+<div className="font-archivo flex flex-col gap-12">
+
+	<div>
+		<h1 className="heading-2xl text-default">LLMs.txt</h1>
+		<p className="body-lg text-subtle mt-2">AI-ready documentation endpoints generated from the BCC Component Library Storybook docs.</p>
+	</div>
+
+	<div className="flex flex-col gap-4">
+		<div className="py-3 overflow-hidden flex flex-col">
+			<div className="border-default flex flex-col gap-2">
+				<h2 className="heading-xl text-default">/llms.txt</h2>
+				<p className="body-md text-subtle">A concise index of public Storybook documentation pages. Use this endpoint when an AI assistant needs a quick, high-signal entry point to the most relevant docs.</p>
+			</div>
+			<div className="py-3">
+				<a
+					className="inline-flex items-center rounded-md border border-default px-4 py-2 no-underline body-md font-semibold text-default hover:border-brand hover:text-brand-default transition-colors"
+					href="/llms.txt"
+					target="_top"
+				>
+					Open llms.txt
+				</a>
+			</div>
+		</div>
+
+		<div className="py-3 overflow-hidden flex flex-col">
+			<div className="border-default flex flex-col gap-2">
+				<h2 className="heading-xl text-default">/llms-full.txt</h2>
+				<p className="body-md text-subtle">A complete export of all public Storybook docs pages. Use this file when AI tooling needs full documentation coverage instead of a summarized index.</p>
+			</div>
+			<div className="py-3">
+				<a
+					className="inline-flex items-center rounded-md border border-default px-4 py-2 no-underline body-md font-semibold text-default hover:border-brand hover:text-brand-default transition-colors"
+					href="/llms-full.txt"
+					target="_top"
+				>
+					Open llms-full.txt
+				</a>
+			</div>
+		</div>
+
+		<div className="py-3 overflow-hidden flex flex-col">
+			<div className="border-default flex flex-col gap-2">
+				<h2 className="heading-xl text-default">.md extension</h2>
+				<p className="body-md text-subtle">Append <code className="text-xs bg-neutral-100 border border-default rounded px-1 py-0.5">.md</code> to any public docs URL to get a Markdown version of that page. This is useful for ingestion in AI workflows and external documentation tooling.</p>
+			</div>
+			<div className="py-3">
+				<a
+					className="inline-flex items-center rounded-md border border-default px-4 py-2 no-underline body-md font-semibold text-default hover:border-brand hover:text-brand-default transition-colors"
+					href="/docs/foundations-colors--docs.md"
+					target="_top"
+				>
+					Open /docs/foundations-colors--docs.md
+				</a>
+			</div>
+		</div>
+	</div>
+
+</div>
+</Unstyled>