@rtkelly-labs/design-system 0.0.0-bootstrap.0 → 0.16.0-dev.0.37dedac

package/dist/components/blog/BlogPost.js

@@ -0,0 +1,116 @@
+// src/components/blog/BlogPost.tsx
+import { Calendar, Clock, User } from "lucide-react";
+import { PageTitle } from "../PageTitle.js";
+import { Card } from "../Card.js";
+import { Badge } from "../Badge.js";
+import { AsciiDivider } from "../AsciiDivider.js";
+import { SiteLink } from "../LinkProvider.js";
+import { deriveInitials, resolveAuthor } from "./author.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var BlogPost = ({
+  title,
+  subtitle,
+  author: authorProp,
+  authorCard,
+  date,
+  readingTime,
+  tags,
+  children
+}) => {
+  const author = resolveAuthor(authorProp);
+  const initials = author.initials ?? deriveInitials(author.name);
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      "data-slot": "blog-post",
+      style: {
+        maxWidth: "840px",
+        margin: "0 auto",
+        padding: "2rem 1.5rem",
+        color: "var(--ds-text-primary)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("header", { style: { marginBottom: "2.5rem" }, children: [
+          /* @__PURE__ */ jsx(PageTitle, { subtitle, bracketed: true, children: title }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "1.5rem",
+                padding: "1rem 0",
+                borderTop: "2px solid var(--ds-border-strong)",
+                borderBottom: "2px solid var(--ds-border-strong)",
+                fontFamily: "var(--ds-font-mono)",
+                fontSize: "0.85rem",
+                color: "var(--ds-accent-primary)",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem" }, children: [
+                  /* @__PURE__ */ jsx(User, { size: 15 }),
+                  /* @__PURE__ */ jsx("span", { children: author.name })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem" }, children: [
+                  /* @__PURE__ */ jsx(Calendar, { size: 15 }),
+                  /* @__PURE__ */ jsx("span", { children: date })
+                ] }),
+                readingTime && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem" }, children: [
+                  /* @__PURE__ */ jsx(Clock, { size: 15 }),
+                  /* @__PURE__ */ jsx("span", { children: readingTime })
+                ] }),
+                tags && tags.length > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "0.5rem", marginLeft: "auto" }, children: tags.map((t) => /* @__PURE__ */ jsxs(Badge, { accent: "primary", children: [
+                  "#",
+                  t
+                ] }, t)) })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontFamily: "var(--ds-font-body)",
+              fontSize: "1.125rem",
+              lineHeight: 1.8
+            },
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(AsciiDivider, {}),
+        authorCard !== null && authorCard !== false && /* @__PURE__ */ jsx("footer", { style: { marginTop: "3rem" }, children: authorCard === void 0 ? /* @__PURE__ */ jsx(Card, { style: { borderColor: "var(--ds-accent-primary)" }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "1rem", marginBottom: "0.5rem" }, children: [
+          author.avatar ?? /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                width: "40px",
+                height: "40px",
+                backgroundColor: "var(--ds-accent-primary)",
+                color: "var(--ds-text-inverse)",
+                fontWeight: 900,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontFamily: "var(--ds-font-display)"
+              },
+              children: initials
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("h4", { style: { fontFamily: "var(--ds-font-display)", margin: 0, fontSize: "1.1rem", fontWeight: 800, textTransform: "uppercase" }, children: [
+              "Written by ",
+              author.url ? /* @__PURE__ */ jsx(SiteLink, { href: author.url, className: "text-inherit underline decoration-2 underline-offset-4", children: author.name }) : author.name
+            ] }),
+            author.description ? /* @__PURE__ */ jsx("span", { style: { fontFamily: "var(--ds-font-mono)", fontSize: "0.8rem", color: "var(--ds-accent-secondary)" }, children: author.description }) : null
+          ] })
+        ] }) }) : authorCard })
+      ]
+    }
+  );
+};
+export {
+  BlogPost
+};
+//# sourceMappingURL=BlogPost.js.map

package/dist/components/blog/BlogPost.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/blog/BlogPost.tsx"],"sourcesContent":["import type React from 'react';\nimport { Calendar, Clock, User, Tag as TagIcon } from 'lucide-react';\nimport { PageTitle } from '../PageTitle';\nimport { Card } from '../Card';\nimport { Badge } from '../Badge';\nimport { AsciiDivider } from '../AsciiDivider';\nimport { SiteLink } from '../LinkProvider';\nimport { deriveInitials, resolveAuthor } from './author';\nimport type { BlogAuthor } from './author';\n\nexport type { BlogAuthor } from './author';\n\nexport interface BlogPostProps {\n  /** The post's title, set as a bracketed `PageTitle`. */\n  title: string;\n  /** A line under the title — the standfirst. Omitted when not supplied. */\n  subtitle?: string;\n  /**\n   * Who wrote it. Omit it for the site's own author — the byline and author\n   * card render exactly as they always have. A string is a name: the default\n   * author's name gets the default card whole, any other gets just that name,\n   * with derived initials and no description. A `BlogAuthor` object sets every\n   * field the card shows, and only those it sets are shown.\n   */\n  author?: string | BlogAuthor;\n  /**\n   * Replaces the author card under the body — the slot for anything an\n   * `BlogAuthor` cannot express, such as a bio with links or several authors. It\n   * is rendered inside the post's `<footer>`; `null` or `false` removes the\n   * footer. The byline row still reads `author`.\n   */\n  authorCard?: React.ReactNode;\n  /** The publication date, shown in the byline row exactly as given. */\n  date: string;\n  /**\n   * Reading time, e.g. `'9 min read'`. Omitted from the byline row when not\n   * supplied — there is no default, because a reading time nobody measured is\n   * worse than no reading time at all.\n   */\n  readingTime?: string;\n  /** Topic tags in the header. Omitted entirely when not supplied or empty. */\n  tags?: string[];\n  /** The article body. Wrap Markdown output in `Prose`; this applies no typography. */\n  children: React.ReactNode;\n}\n\n/**\n * The editorial article shell: title, byline row, tags, rule, body.\n *\n * It composes `PageTitle`, `Badge` and `Divider` into the standard post header\n * so every article on the site agrees about where the date sits. The body is\n * yours — it applies no typography of its own, so Markdown output should be\n * wrapped in `Prose` inside it.\n *\n * `readingTime` and `tags` have no defaults, and that is deliberate: they are\n * content, not configuration, so inventing them would publish a claim nobody\n * made — a nine-thousand-word article confidently advertising \"5 min read\".\n * Each is simply omitted from the header when absent.\n *\n * `author` *does* default, to the site's own author. That is defensible where\n * the other two are not: the byline of a personal site is the same on almost\n * every post, where a reading time and a topic list differ on all of them. The\n * default lives outside this file, and every field of it — name, initials,\n * avatar, link, description — is overridable: pass a `BlogAuthor` for a guest\n * post, or `authorCard` for a card a `BlogAuthor` cannot describe.\n *\n * ```tsx\n * <BlogPost title=\"Where a theme stops applying\" date=\"2026-08-11\"\n *           readingTime=\"9 min read\" tags={['CSS', 'Design systems']}>\n *   <Prose>{content}</Prose>\n * </BlogPost>\n *\n * <BlogPost title=\"A guest post\" date=\"2026-09-01\"\n *           author={{ name: 'Ada King Lovelace', url: 'https://example.com',\n *                     description: 'Analyst, Analytical Engine' }}>\n *   <Prose>{content}</Prose>\n * </BlogPost>\n * ```\n */\nexport const BlogPost: React.FC<BlogPostProps> = ({\n  title,\n  subtitle,\n  author: authorProp,\n  authorCard,\n  date,\n  readingTime,\n  tags,\n  children,\n}) => {\n  const author = resolveAuthor(authorProp);\n  const initials = author.initials ?? deriveInitials(author.name);\n  return (\n    <article data-slot=\"blog-post\"\n      style={{\n        maxWidth: '840px',\n        margin: '0 auto',\n        padding: '2rem 1.5rem',\n        color: 'var(--ds-text-primary)',\n      }}\n    >\n      {/* Blog Post Header */}\n      <header style={{ marginBottom: '2.5rem' }}>\n        <PageTitle subtitle={subtitle} bracketed>\n          {title}\n        </PageTitle>\n\n        {/* Metadata Bar */}\n        <div\n          style={{\n            display: 'flex',\n            flexWrap: 'wrap',\n            gap: '1.5rem',\n            padding: '1rem 0',\n            borderTop: '2px solid var(--ds-border-strong)',\n            borderBottom: '2px solid var(--ds-border-strong)',\n            fontFamily: 'var(--ds-font-mono)',\n            fontSize: '0.85rem',\n            color: 'var(--ds-accent-primary)',\n            alignItems: 'center',\n          }}\n        >\n          <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>\n            <User size={15} />\n            <span>{author.name}</span>\n          </div>\n\n          <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>\n            <Calendar size={15} />\n            <span>{date}</span>\n          </div>\n\n          {readingTime && (\n            <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>\n              <Clock size={15} />\n              <span>{readingTime}</span>\n            </div>\n          )}\n\n          {tags && tags.length > 0 && (\n            <div style={{ display: 'flex', gap: '0.5rem', marginLeft: 'auto' }}>\n              {tags.map((t) => (\n                <Badge key={t} accent=\"primary\">\n                  #{t}\n                </Badge>\n              ))}\n            </div>\n          )}\n        </div>\n      </header>\n\n      {/* Main Narrative Body */}\n      <div\n        style={{\n          fontFamily: 'var(--ds-font-body)',\n          fontSize: '1.125rem',\n          lineHeight: 1.8,\n        }}\n      >\n        {children}\n      </div>\n\n      <AsciiDivider />\n\n      {/* Author Bio Footer */}\n      {authorCard !== null && authorCard !== false && (\n        <footer style={{ marginTop: '3rem' }}>\n          {authorCard === undefined ? (\n            <Card style={{ borderColor: 'var(--ds-accent-primary)' }}>\n              <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '0.5rem' }}>\n                {author.avatar ?? (\n                  <div\n                    style={{\n                      width: '40px',\n                      height: '40px',\n                      backgroundColor: 'var(--ds-accent-primary)',\n                      color: 'var(--ds-text-inverse)',\n                      fontWeight: 900,\n                      display: 'flex',\n                      alignItems: 'center',\n                      justifyContent: 'center',\n                      fontFamily: 'var(--ds-font-display)',\n                    }}\n                  >\n                    {initials}\n                  </div>\n                )}\n                <div>\n                  <h4 style={{ fontFamily: 'var(--ds-font-display)', margin: 0, fontSize: '1.1rem', fontWeight: 800, textTransform: 'uppercase' }}>\n                    Written by {author.url ? (\n                      <SiteLink href={author.url} className=\"text-inherit underline decoration-2 underline-offset-4\">\n                        {author.name}\n                      </SiteLink>\n                    ) : (\n                      author.name\n                    )}\n                  </h4>\n                  {author.description ? (\n                    <span style={{ fontFamily: 'var(--ds-font-mono)', fontSize: '0.8rem', color: 'var(--ds-accent-secondary)' }}>\n                      {author.description}\n                    </span>\n                  ) : null}\n                </div>\n              </div>\n            </Card>\n          ) : (\n            authorCard\n          )}\n        </footer>\n      )}\n    </article>\n  );\n};\n"],"mappings":";AACA,SAAS,UAAU,OAAO,YAA4B;AACtD,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB,qBAAqB;AA+FtC,cAmBE,YAnBF;AAvBD,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,SAAS,cAAc,UAAU;AACvC,QAAM,WAAW,OAAO,YAAY,eAAe,OAAO,IAAI;AAC9D,SACE;AAAA,IAAC;AAAA;AAAA,MAAQ,aAAU;AAAA,MACjB,OAAO;AAAA,QACL,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,OAAO;AAAA,MACT;AAAA,MAGA;AAAA,6BAAC,YAAO,OAAO,EAAE,cAAc,SAAS,GACtC;AAAA,8BAAC,aAAU,UAAoB,WAAS,MACrC,iBACH;AAAA,UAGA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,SAAS;AAAA,gBACT,UAAU;AAAA,gBACV,KAAK;AAAA,gBACL,SAAS;AAAA,gBACT,WAAW;AAAA,gBACX,cAAc;AAAA,gBACd,YAAY;AAAA,gBACZ,UAAU;AAAA,gBACV,OAAO;AAAA,gBACP,YAAY;AAAA,cACd;AAAA,cAEA;AAAA,qCAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,SAAS,GACjE;AAAA,sCAAC,QAAK,MAAM,IAAI;AAAA,kBAChB,oBAAC,UAAM,iBAAO,MAAK;AAAA,mBACrB;AAAA,gBAEA,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,SAAS,GACjE;AAAA,sCAAC,YAAS,MAAM,IAAI;AAAA,kBACpB,oBAAC,UAAM,gBAAK;AAAA,mBACd;AAAA,gBAEC,eACC,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,SAAS,GACjE;AAAA,sCAAC,SAAM,MAAM,IAAI;AAAA,kBACjB,oBAAC,UAAM,uBAAY;AAAA,mBACrB;AAAA,gBAGD,QAAQ,KAAK,SAAS,KACrB,oBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,UAAU,YAAY,OAAO,GAC9D,eAAK,IAAI,CAAC,MACT,qBAAC,SAAc,QAAO,WAAU;AAAA;AAAA,kBAC5B;AAAA,qBADQ,CAEZ,CACD,GACH;AAAA;AAAA;AAAA,UAEJ;AAAA,WACF;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,YAAY;AAAA,YACd;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QAEA,oBAAC,gBAAa;AAAA,QAGb,eAAe,QAAQ,eAAe,SACrC,oBAAC,YAAO,OAAO,EAAE,WAAW,OAAO,GAChC,yBAAe,SACd,oBAAC,QAAK,OAAO,EAAE,aAAa,2BAA2B,GACrD,+BAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,QAAQ,cAAc,SAAS,GACtF;AAAA,iBAAO,UACN;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,iBAAiB;AAAA,gBACjB,OAAO;AAAA,gBACP,YAAY;AAAA,gBACZ,SAAS;AAAA,gBACT,YAAY;AAAA,gBACZ,gBAAgB;AAAA,gBAChB,YAAY;AAAA,cACd;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UAEF,qBAAC,SACC;AAAA,iCAAC,QAAG,OAAO,EAAE,YAAY,0BAA0B,QAAQ,GAAG,UAAU,UAAU,YAAY,KAAK,eAAe,YAAY,GAAG;AAAA;AAAA,cACnH,OAAO,MACjB,oBAAC,YAAS,MAAM,OAAO,KAAK,WAAU,0DACnC,iBAAO,MACV,IAEA,OAAO;AAAA,eAEX;AAAA,YACC,OAAO,cACN,oBAAC,UAAK,OAAO,EAAE,YAAY,uBAAuB,UAAU,UAAU,OAAO,6BAA6B,GACvG,iBAAO,aACV,IACE;AAAA,aACN;AAAA,WACF,GACF,IAEA,YAEJ;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/blog/LoremIpsumPost.js

@@ -0,0 +1,62 @@
+// src/components/blog/LoremIpsumPost.tsx
+import { BlogPost } from "./BlogPost.js";
+import { TLDR } from "../TLDR.js";
+import { NoteBlock } from "../NoteBlock.js";
+import { BracketText } from "../BracketText.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LoremIpsumPost = () => {
+  return /* @__PURE__ */ jsxs(
+    BlogPost,
+    {
+      title: "Architecture of a Brutalist Design Engine",
+      subtitle: "Extending terminal aesthetics and dual-mode theme propagation across web surfaces",
+      date: "July 26, 2026",
+      readingTime: "6 min read",
+      tags: ["Design System", "Brutalism", "Architecture"],
+      children: [
+        /* @__PURE__ */ jsxs(TLDR, { children: [
+          "Modern web design systems often default to safe, generic rounded corners and muted colors. By enforcing zero border-radius, hard offset shadows, bracketed display typography, and a unified dual-mode (",
+          /* @__PURE__ */ jsx(BracketText, { accent: "primary", children: "DARK" }),
+          " / ",
+          /* @__PURE__ */ jsx(BracketText, { accent: "secondary", children: "SKETCH" }),
+          ") token matrix, we achieve an unmistakable visual identity that scales across every application."
+        ] }),
+        /* @__PURE__ */ jsx("h2", { style: { fontFamily: "var(--ds-font-display)", fontSize: "1.75rem", fontWeight: 800, textTransform: "uppercase", marginTop: "2.5rem", color: "var(--ds-accent-primary)" }, children: "[ 01. The Problem with Generic Web UI ]" }),
+        /* @__PURE__ */ jsx("p", { style: { marginTop: "1rem" }, children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta." }),
+        /* @__PURE__ */ jsxs(NoteBlock, { type: "important", title: "SYSTEM RULE ENFORCEMENT", children: [
+          "Never hardcode pixel border radii or hex literals inside downstream component code. All colors must resolve through standard CSS tokens (",
+          /* @__PURE__ */ jsx("code", { style: { color: "var(--ds-accent-primary)" }, children: "--ds-accent-primary" }),
+          ", ",
+          /* @__PURE__ */ jsx("code", { style: { color: "var(--ds-accent-tertiary)" }, children: "--ds-accent-tertiary" }),
+          ") to preserve paper-and-ink theme remapping."
+        ] }),
+        /* @__PURE__ */ jsx("h2", { style: { fontFamily: "var(--ds-font-display)", fontSize: "1.75rem", fontWeight: 800, textTransform: "uppercase", marginTop: "2.5rem", color: "var(--ds-accent-tertiary)" }, children: "[ 02. Executable Design Tokens ]" }),
+        /* @__PURE__ */ jsx("p", { style: { marginTop: "1rem" }, children: "Below is an example of code block rendering within the design system:" }),
+        /* @__PURE__ */ jsxs("div", { style: { margin: "1.5rem 0", border: "2px solid var(--ds-border-strong)", backgroundColor: "var(--ds-surface-base)" }, children: [
+          /* @__PURE__ */ jsx("div", { style: { padding: "0.75rem 1.25rem", backgroundColor: "var(--ds-border-strong)", color: "var(--ds-surface-base)", fontFamily: "var(--ds-font-mono)", fontWeight: 800, fontSize: "0.875rem" }, children: "// tailwind-preset.ts" }),
+          /* @__PURE__ */ jsx("pre", { tabIndex: 0, role: "region", "aria-label": "Code sample", style: { padding: "1.25rem", fontFamily: "var(--ds-font-mono)", fontSize: "0.875rem", color: "var(--ds-intent-success)", overflowX: "auto", margin: 0 }, children: `export const brutalistTailwindPreset = {
+  theme: {
+    extend: {
+      borderRadius: { none: '0px' },
+      boxShadow: {
+        'hard-md': '4px 4px 0px 0px var(--ds-shadow-color)',
+        'hard-cyan': '4px 4px 0px 0px var(--ds-accent-primary)',
+      }
+    }
+  }
+};` })
+        ] }),
+        /* @__PURE__ */ jsxs(NoteBlock, { type: "tip", title: "DUAL-MODE THEME SYNCHRONIZATION", children: [
+          "When cycling to ",
+          /* @__PURE__ */ jsx(BracketText, { accent: "secondary", children: "SKETCH" }),
+          " mode, the dark screen transforms into a warm paper sheet, while cyan and pink re-map into rich blue and red pen inks."
+        ] }),
+        /* @__PURE__ */ jsx("p", { style: { marginTop: "1.5rem" }, children: "In conclusion, adopting this design system as a shared foundation guarantees that every website and project inherits a cohesive, high-performance visual surface." })
+      ]
+    }
+  );
+};
+export {
+  LoremIpsumPost
+};
+//# sourceMappingURL=LoremIpsumPost.js.map

package/dist/components/blog/LoremIpsumPost.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/blog/LoremIpsumPost.tsx"],"sourcesContent":["import type React from 'react';\nimport { BlogPost } from './BlogPost';\nimport { TLDR } from '../TLDR';\nimport { NoteBlock } from '../NoteBlock';\nimport { BracketText } from '../BracketText';\n\nexport const LoremIpsumPost: React.FC = () => {\n  return (\n    <BlogPost\n      title=\"Architecture of a Brutalist Design Engine\"\n      subtitle=\"Extending terminal aesthetics and dual-mode theme propagation across web surfaces\"\n      date=\"July 26, 2026\"\n      readingTime=\"6 min read\"\n      tags={['Design System', 'Brutalism', 'Architecture']}\n    >\n      <TLDR>\n        Modern web design systems often default to safe, generic rounded corners and muted colors.\n        By enforcing zero border-radius, hard offset shadows, bracketed display typography, and a unified\n        dual-mode (<BracketText accent=\"primary\">DARK</BracketText> / <BracketText accent=\"secondary\">SKETCH</BracketText>) token matrix,\n        we achieve an unmistakable visual identity that scales across every application.\n      </TLDR>\n\n      <h2 style={{ fontFamily: 'var(--ds-font-display)', fontSize: '1.75rem', fontWeight: 800, textTransform: 'uppercase', marginTop: '2.5rem', color: 'var(--ds-accent-primary)' }}>\n        [ 01. The Problem with Generic Web UI ]\n      </h2>\n      <p style={{ marginTop: '1rem' }}>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.\n        Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.\n      </p>\n\n      <NoteBlock type=\"important\" title=\"SYSTEM RULE ENFORCEMENT\">\n        Never hardcode pixel border radii or hex literals inside downstream component code.\n        All colors must resolve through standard CSS tokens (<code style={{ color: 'var(--ds-accent-primary)' }}>--ds-accent-primary</code>, <code style={{ color: 'var(--ds-accent-tertiary)' }}>--ds-accent-tertiary</code>) to preserve paper-and-ink theme remapping.\n      </NoteBlock>\n\n      <h2 style={{ fontFamily: 'var(--ds-font-display)', fontSize: '1.75rem', fontWeight: 800, textTransform: 'uppercase', marginTop: '2.5rem', color: 'var(--ds-accent-tertiary)' }}>\n        [ 02. Executable Design Tokens ]\n      </h2>\n      <p style={{ marginTop: '1rem' }}>\n        Below is an example of code block rendering within the design system:\n      </p>\n\n      <div style={{ margin: '1.5rem 0', border: '2px solid var(--ds-border-strong)', backgroundColor: 'var(--ds-surface-base)' }}>\n        <div style={{ padding: '0.75rem 1.25rem', backgroundColor: 'var(--ds-border-strong)', color: 'var(--ds-surface-base)', fontFamily: 'var(--ds-font-mono)', fontWeight: 800, fontSize: '0.875rem' }}>\n          // tailwind-preset.ts\n        </div>\n        {/* Scrollable at narrow widths — see `CodeBlock` for why this needs a tabIndex. */}\n        <pre tabIndex={0} role=\"region\" aria-label=\"Code sample\" style={{ padding: '1.25rem', fontFamily: 'var(--ds-font-mono)', fontSize: '0.875rem', color: 'var(--ds-intent-success)', overflowX: 'auto', margin: 0 }}>\n{`export const brutalistTailwindPreset = {\n  theme: {\n    extend: {\n      borderRadius: { none: '0px' },\n      boxShadow: {\n        'hard-md': '4px 4px 0px 0px var(--ds-shadow-color)',\n        'hard-cyan': '4px 4px 0px 0px var(--ds-accent-primary)',\n      }\n    }\n  }\n};`}\n        </pre>\n      </div>\n\n      <NoteBlock type=\"tip\" title=\"DUAL-MODE THEME SYNCHRONIZATION\">\n        When cycling to <BracketText accent=\"secondary\">SKETCH</BracketText> mode, the dark screen transforms into a warm paper sheet,\n        while cyan and pink re-map into rich blue and red pen inks.\n      </NoteBlock>\n\n      <p style={{ marginTop: '1.5rem' }}>\n        In conclusion, adopting this design system as a shared foundation guarantees that every website and project\n        inherits a cohesive, high-performance visual surface.\n      </p>\n    </BlogPost>\n  );\n};\n"],"mappings":";AACA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAWtB,SAGa,KAHb;AATC,IAAM,iBAA2B,MAAM;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,UAAS;AAAA,MACT,MAAK;AAAA,MACL,aAAY;AAAA,MACZ,MAAM,CAAC,iBAAiB,aAAa,cAAc;AAAA,MAEnD;AAAA,6BAAC,QAAK;AAAA;AAAA,UAGO,oBAAC,eAAY,QAAO,WAAU,kBAAI;AAAA,UAAc;AAAA,UAAG,oBAAC,eAAY,QAAO,aAAY,oBAAM;AAAA,UAAc;AAAA,WAEpH;AAAA,QAEA,oBAAC,QAAG,OAAO,EAAE,YAAY,0BAA0B,UAAU,WAAW,YAAY,KAAK,eAAe,aAAa,WAAW,UAAU,OAAO,2BAA2B,GAAG,qDAE/K;AAAA,QACA,oBAAC,OAAE,OAAO,EAAE,WAAW,OAAO,GAAG,4QAGjC;AAAA,QAEA,qBAAC,aAAU,MAAK,aAAY,OAAM,2BAA0B;AAAA;AAAA,UAEL,oBAAC,UAAK,OAAO,EAAE,OAAO,2BAA2B,GAAG,iCAAmB;AAAA,UAAO;AAAA,UAAE,oBAAC,UAAK,OAAO,EAAE,OAAO,4BAA4B,GAAG,kCAAoB;AAAA,UAAO;AAAA,WACvN;AAAA,QAEA,oBAAC,QAAG,OAAO,EAAE,YAAY,0BAA0B,UAAU,WAAW,YAAY,KAAK,eAAe,aAAa,WAAW,UAAU,OAAO,4BAA4B,GAAG,8CAEhL;AAAA,QACA,oBAAC,OAAE,OAAO,EAAE,WAAW,OAAO,GAAG,mFAEjC;AAAA,QAEA,qBAAC,SAAI,OAAO,EAAE,QAAQ,YAAY,QAAQ,qCAAqC,iBAAiB,yBAAyB,GACvH;AAAA,8BAAC,SAAI,OAAO,EAAE,SAAS,mBAAmB,iBAAiB,2BAA2B,OAAO,0BAA0B,YAAY,uBAAuB,YAAY,KAAK,UAAU,WAAW,GAAG,mCAEnM;AAAA,UAEA,oBAAC,SAAI,UAAU,GAAG,MAAK,UAAS,cAAW,eAAc,OAAO,EAAE,SAAS,WAAW,YAAY,uBAAuB,UAAU,YAAY,OAAO,4BAA4B,WAAW,QAAQ,QAAQ,EAAE,GACtN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAWO;AAAA,WACF;AAAA,QAEA,qBAAC,aAAU,MAAK,OAAM,OAAM,mCAAkC;AAAA;AAAA,UAC5C,oBAAC,eAAY,QAAO,aAAY,oBAAM;AAAA,UAAc;AAAA,WAEtE;AAAA,QAEA,oBAAC,OAAE,OAAO,EAAE,WAAW,SAAS,GAAG,+KAGnC;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/blog/author.js

@@ -0,0 +1,25 @@
+// src/components/blog/author.ts
+var DEFAULT_AUTHOR = {
+  name: "Ryan Kelly",
+  description: "ryankelly.dev \u2022 Systems Architecture & Brutalist UI"
+};
+function deriveInitials(name) {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return "";
+  const first = (word) => Array.from(word)[0] ?? "";
+  const letters = words.length === 1 ? first(words[0]) : first(words[0]) + first(words[words.length - 1]);
+  return letters.toUpperCase();
+}
+function resolveAuthor(author) {
+  if (author === void 0) return DEFAULT_AUTHOR;
+  if (typeof author === "string") {
+    return author === DEFAULT_AUTHOR.name ? DEFAULT_AUTHOR : { name: author };
+  }
+  return author;
+}
+export {
+  DEFAULT_AUTHOR,
+  deriveInitials,
+  resolveAuthor
+};
+//# sourceMappingURL=author.js.map

package/dist/components/blog/author.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/blog/author.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\n/** Who wrote a post, as `BlogPost`'s byline and author card display it. */\nexport interface BlogAuthor {\n  /** Shown in the byline row and after \"Written by\" in the author card. */\n  name: string;\n  /**\n   * The letters in the author card's square. Derived from `name` when absent:\n   * the first letter of the first word and of the last word, so a one-word\n   * name gives one letter and a three-word name skips the middle one.\n   */\n  initials?: string;\n  /**\n   * Replaces the initials square when present — normally an `Avatar` with the\n   * author's picture. Use `size=\"sm\"` to keep the card's 40px rhythm.\n   */\n  avatar?: ReactNode;\n  /**\n   * Where the name in the author card links to. The name is plain text when\n   * absent. Internal hrefs go through the `LinkProvider`'s router link.\n   */\n  url?: string;\n  /** The line under the name in the author card. Omitted when absent. */\n  description?: string;\n}\n\n// The byline of the site this package was built for. It lives here rather\n// than in `BlogPost.tsx` so the component holds no author of its own: every\n// field below is what a consumer who passes nothing gets, and each one is\n// overridable through `BlogPost`'s `author` prop.\n//\n// `initials` is left to derivation, which gives `RK`, and there is no `url`:\n// the card has never linked the name, and a link would move the default's\n// rendering.\nexport const DEFAULT_AUTHOR: BlogAuthor = {\n  name: 'Ryan Kelly',\n  description: 'ryankelly.dev • Systems Architecture & Brutalist UI',\n};\n\n// First letter of the first word, plus first letter of the last word when\n// there is more than one: `Ryan Kelly` is `RK`, `Prince` is `P`, `Ada King\n// Lovelace` is `AL`. Words split on whitespace only, so `Jean-Luc Picard` is\n// `JP`. Letters are taken by code point rather than UTF-16 unit, so a name\n// beginning outside the BMP is not cut in half. An empty name gives `''`.\n// Uppercased without a locale, so a server and the browser hydrating its\n// markup agree whatever their locales are: `ipek` is `I`, never Turkish `İ`.\nexport function deriveInitials(name: string): string {\n  const words = name.trim().split(/\\s+/).filter(Boolean);\n  if (words.length === 0) return '';\n  const first = (word: string) => Array.from(word)[0] ?? '';\n  const letters =\n    words.length === 1 ? first(words[0]) : first(words[0]) + first(words[words.length - 1]);\n  return letters.toUpperCase();\n}\n\n// A string is a name. Naming the default author gets the default author\n// whole, so `author=\"Ryan Kelly\"` renders exactly as omitting the prop does;\n// any other name gets only itself, so a guest is never given the default's\n// description.\nexport function resolveAuthor(author: string | BlogAuthor | undefined): BlogAuthor {\n  if (author === undefined) return DEFAULT_AUTHOR;\n  if (typeof author === 'string') {\n    return author === DEFAULT_AUTHOR.name ? DEFAULT_AUTHOR : { name: author };\n  }\n  return author;\n}\n"],"mappings":";AAkCO,IAAM,iBAA6B;AAAA,EACxC,MAAM;AAAA,EACN,aAAa;AACf;AASO,SAAS,eAAe,MAAsB;AACnD,QAAM,QAAQ,KAAK,KAAK,EAAE,MAAM,KAAK,EAAE,OAAO,OAAO;AACrD,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,QAAM,QAAQ,CAAC,SAAiB,MAAM,KAAK,IAAI,EAAE,CAAC,KAAK;AACvD,QAAM,UACJ,MAAM,WAAW,IAAI,MAAM,MAAM,CAAC,CAAC,IAAI,MAAM,MAAM,CAAC,CAAC,IAAI,MAAM,MAAM,MAAM,SAAS,CAAC,CAAC;AACxF,SAAO,QAAQ,YAAY;AAC7B;AAMO,SAAS,cAAc,QAAqD;AACjF,MAAI,WAAW,OAAW,QAAO;AACjC,MAAI,OAAO,WAAW,UAAU;AAC9B,WAAO,WAAW,eAAe,OAAO,iBAAiB,EAAE,MAAM,OAAO;AAAA,EAC1E;AACA,SAAO;AACT;","names":[]}

package/dist/components/booleanControl.js

@@ -0,0 +1,50 @@
+// src/components/booleanControl.ts
+import { recipe } from "../lib/recipe.js";
+var booleanControl = recipe({
+  slots: {
+    control: "flex shrink-0 border-2 border-edge-strong bg-surface-base transition-colors duration-quick ease-brutalist data-[disabled]:cursor-not-allowed data-[disabled]:border-edge-subtle data-[disabled]:bg-surface-sunken data-[invalid]:border-intent-danger motion-reduce:transition-none",
+    mark: "pointer-events-none"
+  },
+  variants: {
+    shape: {
+      // A square box with a mark in it: the checkbox.
+      //
+      // Disabled and checked are both attribute variants, so which background
+      // won used to be CSS source order — and it was the disabled one, leaving
+      // `text-content-inverse`, an ink chosen for the accent fill, nearly
+      // invisible on `surface-sunken` (#270). The compound selectors below make
+      // the disabled surface win on purpose, and the mark drops to
+      // `text-content-muted`, the pair `check:contrast` verifies on every
+      // surface. That is how `dot` already handles it: the state stays legible,
+      // only the emphasis goes.
+      box: {
+        control: "size-6 cursor-pointer items-center justify-center data-[checked]:bg-[var(--field-accent)] data-[indeterminate]:bg-[var(--field-accent)] data-[checked]:data-[disabled]:bg-surface-sunken data-[indeterminate]:data-[disabled]:bg-surface-sunken",
+        mark: "font-mono text-sm font-bold leading-none text-content-inverse data-[disabled]:text-content-muted"
+      },
+      /**
+       * The same box holding a solid square: the radio. One option of a set
+       * is a boolean too — selected or not — so it wears this surface rather
+       * than a third one.
+       *
+       * Square, not round, because the radius is zero everywhere (DESIGN.md)
+       * and a circle would be the one exception. What tells it from a checkbox
+       * is the mark instead: a checkbox *fills* with the accent and carries an
+       * `X`; a radio stays on the base surface and carries a smaller solid
+       * square, so a set of them never reads as a set of ticks.
+       */
+      dot: {
+        control: "size-6 cursor-pointer items-center justify-center",
+        mark: "size-2.5 bg-[var(--field-accent)] data-[disabled]:bg-content-muted"
+      },
+      /** A track the thumb travels along: the switch. */
+      track: {
+        control: "h-6 w-12 cursor-pointer items-center p-0.5 data-[checked]:bg-[var(--field-accent)]",
+        mark: "size-4 bg-content-primary transition-transform duration-quick ease-brutalist data-[checked]:translate-x-6 data-[checked]:bg-content-inverse data-[disabled]:bg-content-muted motion-reduce:transition-none"
+      }
+    }
+  }
+});
+export {
+  booleanControl
+};
+//# sourceMappingURL=booleanControl.js.map

package/dist/components/booleanControl.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/booleanControl.ts"],"sourcesContent":["import { recipe } from '../lib/recipe';\n\n/**\n * The surface a boolean control wears, in its two presentations.\n *\n * `Checkbox` and `Switch` are one capability — a boolean — drawn twice (and\n * `Radio` is one option of a set, drawn a third time), so the\n * border weight, the checked fill, the disabled treatment and the invalid\n * border are declared **once** and selected by `shape`. Two recipes would\n * drift, and the drift would show up as a switch that disagrees with the\n * checkbox beside it about what \"disabled\" looks like.\n *\n * A module of its own for the reason `dialogSurface.ts` gives: `src/index.ts`\n * re-exports the component files wholesale, and a `recipe` in the published\n * surface puts `tailwind-variants`' types back into the `.d.ts`.\n *\n * Every state here is a Base UI data attribute — `data-checked`,\n * `data-indeterminate`, `data-disabled`, `data-invalid` — so nothing in the\n * components computes a class from a prop. `data-invalid` in particular is\n * inherited from the enclosing `Field.Root`, which is what makes an error on\n * the field visible on the control without either being told about the other.\n *\n * No focus class. The global `:focus-visible` outline in `styles.css` is the\n * ring, and a component-level override is exactly the #44 regression that rule\n * exists to prevent.\n */\nexport const booleanControl = recipe({\n  slots: {\n    control:\n      'flex shrink-0 border-2 border-edge-strong bg-surface-base transition-colors duration-quick ease-brutalist '\n      + 'data-[disabled]:cursor-not-allowed data-[disabled]:border-edge-subtle data-[disabled]:bg-surface-sunken '\n      + 'data-[invalid]:border-intent-danger motion-reduce:transition-none',\n    mark: 'pointer-events-none',\n  },\n  variants: {\n    shape: {\n      // A square box with a mark in it: the checkbox.\n      //\n      // Disabled and checked are both attribute variants, so which background\n      // won used to be CSS source order — and it was the disabled one, leaving\n      // `text-content-inverse`, an ink chosen for the accent fill, nearly\n      // invisible on `surface-sunken` (#270). The compound selectors below make\n      // the disabled surface win on purpose, and the mark drops to\n      // `text-content-muted`, the pair `check:contrast` verifies on every\n      // surface. That is how `dot` already handles it: the state stays legible,\n      // only the emphasis goes.\n      box: {\n        control:\n          'size-6 cursor-pointer items-center justify-center '\n          + 'data-[checked]:bg-[var(--field-accent)] data-[indeterminate]:bg-[var(--field-accent)] '\n          + 'data-[checked]:data-[disabled]:bg-surface-sunken '\n          + 'data-[indeterminate]:data-[disabled]:bg-surface-sunken',\n        mark:\n          'font-mono text-sm font-bold leading-none text-content-inverse '\n          + 'data-[disabled]:text-content-muted',\n      },\n      /**\n       * The same box holding a solid square: the radio. One option of a set\n       * is a boolean too — selected or not — so it wears this surface rather\n       * than a third one.\n       *\n       * Square, not round, because the radius is zero everywhere (DESIGN.md)\n       * and a circle would be the one exception. What tells it from a checkbox\n       * is the mark instead: a checkbox *fills* with the accent and carries an\n       * `X`; a radio stays on the base surface and carries a smaller solid\n       * square, so a set of them never reads as a set of ticks.\n       */\n      dot: {\n        control: 'size-6 cursor-pointer items-center justify-center',\n        mark: 'size-2.5 bg-[var(--field-accent)] data-[disabled]:bg-content-muted',\n      },\n      /** A track the thumb travels along: the switch. */\n      track: {\n        control:\n          'h-6 w-12 cursor-pointer items-center p-0.5 '\n          + 'data-[checked]:bg-[var(--field-accent)]',\n        mark:\n          'size-4 bg-content-primary transition-transform duration-quick ease-brutalist '\n          + 'data-[checked]:translate-x-6 data-[checked]:bg-content-inverse '\n          + 'data-[disabled]:bg-content-muted motion-reduce:transition-none',\n      },\n    },\n  },\n});\n"],"mappings":";AAAA,SAAS,cAAc;AA0BhB,IAAM,iBAAiB,OAAO;AAAA,EACnC,OAAO;AAAA,IACL,SACE;AAAA,IAGF,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAWL,KAAK;AAAA,QACH,SACE;AAAA,QAIF,MACE;AAAA,MAEJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAYA,KAAK;AAAA,QACH,SAAS;AAAA,QACT,MAAM;AAAA,MACR;AAAA;AAAA,MAEA,OAAO;AAAA,QACL,SACE;AAAA,QAEF,MACE;AAAA,MAGJ;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}

package/dist/components/dialogPopupRef.js

@@ -0,0 +1,28 @@
+"use client";
+
+// src/components/dialogPopupRef.ts
+import { useCallback, useRef } from "react";
+function assignRef(ref, node) {
+  if (typeof ref === "function") {
+    ref(node);
+    return;
+  }
+  if (ref) {
+    ref.current = node;
+  }
+}
+function usePopupRef(forwarded) {
+  const popup = useRef(null);
+  const attach = useCallback(
+    (node) => {
+      popup.current = node;
+      assignRef(forwarded, node);
+    },
+    [forwarded]
+  );
+  return [popup, attach];
+}
+export {
+  usePopupRef
+};
+//# sourceMappingURL=dialogPopupRef.js.map

package/dist/components/dialogPopupRef.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/dialogPopupRef.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useRef } from 'react';\nimport type { ForwardedRef } from 'react';\n\n/**\n * The ref plumbing every dialog surface needs, in one place.\n *\n * A module of its own for the reason `dialogSurface.ts` is one: `src/index.ts`\n * re-exports `Modal.tsx` and `Drawer.tsx` wholesale, so a helper living in\n * either would be published — and a hook in the `.d.ts` is API, whatever it\n * was written for. Nothing exports this file, so it stays internal.\n *\n * It was `Modal`'s, verbatim, until `Drawer` needed the same thing. Copying it\n * would have meant two `initialFocus` races to fix the day one of them is\n * found.\n */\n\n/**\n * Module scope on purpose: written inline, the assignment reads to the\n * compiler lint as a component mutating a value it captured during render.\n */\nfunction assignRef<T>(ref: ForwardedRef<T>, node: T | null) {\n  if (typeof ref === 'function') {\n    ref(node);\n    return;\n  }\n  if (ref) {\n    ref.current = node;\n  }\n}\n\n/**\n * Keeps a local handle on the popup while still honouring a caller's ref.\n *\n * `initialFocus` needs the popup *element*, and the only ref slot Base UI\n * offers is the one the caller may also have asked for. Merging them here is\n * cheaper than making the caller give theirs up.\n */\nexport function usePopupRef(forwarded: ForwardedRef<HTMLDivElement>) {\n  const popup = useRef<HTMLDivElement | null>(null);\n\n  const attach = useCallback(\n    (node: HTMLDivElement | null) => {\n      popup.current = node;\n      assignRef(forwarded, node);\n    },\n    [forwarded],\n  );\n\n  return [popup, attach] as const;\n}\n"],"mappings":";;;AAEA,SAAS,aAAa,cAAc;AAoBpC,SAAS,UAAa,KAAsB,MAAgB;AAC1D,MAAI,OAAO,QAAQ,YAAY;AAC7B,QAAI,IAAI;AACR;AAAA,EACF;AACA,MAAI,KAAK;AACP,QAAI,UAAU;AAAA,EAChB;AACF;AASO,SAAS,YAAY,WAAyC;AACnE,QAAM,QAAQ,OAA8B,IAAI;AAEhD,QAAM,SAAS;AAAA,IACb,CAAC,SAAgC;AAC/B,YAAM,UAAU;AAChB,gBAAU,WAAW,IAAI;AAAA,IAC3B;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,SAAO,CAAC,OAAO,MAAM;AACvB;","names":[]}

package/dist/components/dialogSurface.js

@@ -0,0 +1,75 @@
+// src/components/dialogSurface.ts
+import { recipe } from "../lib/recipe.js";
+var dialogSurface = recipe({
+  slots: {
+    /*
+     * Enter and exit are `data-starting-style` / `data-ending-style` rather
+     * than keyframes: Base UI sets them for one frame either side of the
+     * transition, so an opacity pair and a duration is the whole animation.
+     * `motion-reduce` drops it — an overlay appearing is exactly the motion
+     * `prefers-reduced-motion` is asking not to see.
+     */
+    backdrop: "fixed inset-0 z-top bg-surface-overlay transition-opacity duration-quick ease-brutalist data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 motion-reduce:transition-none",
+    viewport: "fixed inset-0 z-top flex items-center justify-center p-4",
+    /*
+     * `focus-visible:outline-none!` on the popup and nowhere else. Focus lands
+     * on this element so a screen reader announces the dialog's own title
+     * rather than its close button — it is an announcement target, not a
+     * keyboard stop, and the global `:focus-visible` rule in styles.css would
+     * otherwise draw the accent ring around the entire surface. The
+     * hand-rolled container this replaced took focus the same way and painted
+     * no ring; Base UI's focus call matches `:focus-visible`, so the ring has
+     * to be turned off here instead. Controls inside the dialog keep theirs.
+     *
+     * The `!` is load-bearing, and the only one in the package. That rule is
+     * unlayered on purpose — styles.css says keyboard focus must stay visible
+     * even where a component restyles it — so it outranks Tailwind's
+     * `@layer utilities` regardless of specificity. Important is the sanctioned
+     * way past it, and the narrow scope is what makes it safe: one slot, one
+     * element that no keyboard user can Tab to.
+     */
+    popup: "max-h-[90vh] w-full max-w-lg overflow-y-auto border-4 border-edge-strong bg-surface-raised focus-visible:outline-none! font-mono shadow-hard-lg transition-opacity duration-quick ease-brutalist data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 motion-reduce:transition-none",
+    header: "flex items-center justify-between border-b-2 border-edge-strong bg-surface-base px-6 py-4",
+    title: "font-display text-xl font-bold uppercase tracking-wider text-content-primary",
+    close: "border-2 border-edge-strong bg-surface-raised px-2 font-mono text-lg font-bold text-content-primary transition-colors hover:bg-surface-base hover:text-accent-tertiary focus-visible:ring-2 focus-visible:ring-accent-primary",
+    body: "p-6 font-sans text-sm leading-relaxed text-content-primary",
+    footer: "flex justify-end gap-3 border-t-2 border-edge-strong bg-surface-base px-6 py-4"
+  },
+  /*
+   * Placement, and nothing else.
+   *
+   * There is deliberately no `centred` value and no `defaultVariants`. `Modal`
+   * and `AlertDialog` call `dialogSurface()` with no argument and get exactly
+   * the class strings above, unchanged — a default variant would have appended
+   * classes to both and made two components' rendering depend on an edit made
+   * for a third.
+   *
+   * `top` and `bottom` are absent for the reason #241 states: no consumer asks
+   * for them, and an edge nobody anchors to is surface that still has to be
+   * themed, screenshotted and kept working.
+   */
+  variants: {
+    placement: {
+      left: {
+        // `items-stretch` and `justify-start` beat the base's centring, and
+        // `p-0` its gutter: a drawer meets three edges of the viewport, so the
+        // padding that keeps a modal off the edges is exactly wrong here.
+        viewport: "items-stretch justify-start p-0",
+        popup: "flex h-full max-h-full max-w-sm flex-col overflow-y-hidden border-y-0 border-l-0 border-r-4 transition data-[starting-style]:-translate-x-full data-[ending-style]:-translate-x-full",
+        // The panel is as tall as the viewport, so the body takes the slack
+        // and scrolls inside it. Scrolling the whole popup instead would take
+        // the title and the close control off-screen with the content.
+        body: "flex-1 overflow-y-auto"
+      },
+      right: {
+        viewport: "items-stretch justify-end p-0",
+        popup: "flex h-full max-h-full max-w-sm flex-col overflow-y-hidden border-y-0 border-r-0 border-l-4 shadow-none transition data-[starting-style]:translate-x-full data-[ending-style]:translate-x-full",
+        body: "flex-1 overflow-y-auto"
+      }
+    }
+  }
+});
+export {
+  dialogSurface
+};
+//# sourceMappingURL=dialogSurface.js.map

package/dist/components/dialogSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/dialogSurface.ts"],"sourcesContent":["import { recipe } from '../lib/recipe';\n\n/**\n * The chrome both dialogs wear.\n *\n * A module of its own, not a shared export from `Modal.tsx`: `src/index.ts`\n * re-exports that file wholesale, and a `recipe` in the published surface puts\n * `tailwind-variants`' types back into the `.d.ts` — which `lib/recipe.ts`\n * exists to prevent, since it would make swapping the engine a breaking\n * change. Nothing exports this one, so the types stay in.\n *\n * `Modal` and `AlertDialog` are the same surface with different dismissal\n * contracts, so the surface is declared once. Two recipes would drift, and the\n * drift would show up as a confirmation dialog that does not look like the\n * dialog it was opened from.\n *\n * `Drawer` is the third caller and the reason `placement` exists. A drawer is\n * a dialog anchored to an edge — the same chrome, a different position and a\n * different transition — so it takes a variant here rather than a recipe of\n * its own. The header, title, close, body and footer slots are shared\n * verbatim, which is the point: a drawer that does not look like the modal it\n * sits beside is the drift a second recipe would have produced.\n *\n * `overlay` and `popup` both sit on `z-top`: the viewport follows the backdrop\n * in DOM order, so it paints above it without a second stacking value. The\n * layer comes from the `--ds-layer-*` scale either way — the `z-50` this\n * component used to hardcode is the drift the token layer exists to prevent.\n */\nexport const dialogSurface = recipe({\n  slots: {\n    /*\n     * Enter and exit are `data-starting-style` / `data-ending-style` rather\n     * than keyframes: Base UI sets them for one frame either side of the\n     * transition, so an opacity pair and a duration is the whole animation.\n     * `motion-reduce` drops it — an overlay appearing is exactly the motion\n     * `prefers-reduced-motion` is asking not to see.\n     */\n    backdrop:\n      'fixed inset-0 z-top bg-surface-overlay transition-opacity duration-quick ease-brutalist '\n      + 'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 motion-reduce:transition-none',\n    viewport: 'fixed inset-0 z-top flex items-center justify-center p-4',\n    /*\n     * `focus-visible:outline-none!` on the popup and nowhere else. Focus lands\n     * on this element so a screen reader announces the dialog's own title\n     * rather than its close button — it is an announcement target, not a\n     * keyboard stop, and the global `:focus-visible` rule in styles.css would\n     * otherwise draw the accent ring around the entire surface. The\n     * hand-rolled container this replaced took focus the same way and painted\n     * no ring; Base UI's focus call matches `:focus-visible`, so the ring has\n     * to be turned off here instead. Controls inside the dialog keep theirs.\n     *\n     * The `!` is load-bearing, and the only one in the package. That rule is\n     * unlayered on purpose — styles.css says keyboard focus must stay visible\n     * even where a component restyles it — so it outranks Tailwind's\n     * `@layer utilities` regardless of specificity. Important is the sanctioned\n     * way past it, and the narrow scope is what makes it safe: one slot, one\n     * element that no keyboard user can Tab to.\n     */\n    popup:\n      'max-h-[90vh] w-full max-w-lg overflow-y-auto border-4 border-edge-strong bg-surface-raised '\n      + 'focus-visible:outline-none! '\n      + 'font-mono shadow-hard-lg transition-opacity duration-quick ease-brutalist '\n      + 'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 motion-reduce:transition-none',\n    header:\n      'flex items-center justify-between border-b-2 border-edge-strong bg-surface-base px-6 py-4',\n    title:\n      'font-display text-xl font-bold uppercase tracking-wider text-content-primary',\n    close:\n      'border-2 border-edge-strong bg-surface-raised px-2 font-mono text-lg font-bold '\n      + 'text-content-primary transition-colors hover:bg-surface-base hover:text-accent-tertiary '\n      + 'focus-visible:ring-2 focus-visible:ring-accent-primary',\n    body: 'p-6 font-sans text-sm leading-relaxed text-content-primary',\n    footer:\n      'flex justify-end gap-3 border-t-2 border-edge-strong bg-surface-base px-6 py-4',\n  },\n  /*\n   * Placement, and nothing else.\n   *\n   * There is deliberately no `centred` value and no `defaultVariants`. `Modal`\n   * and `AlertDialog` call `dialogSurface()` with no argument and get exactly\n   * the class strings above, unchanged — a default variant would have appended\n   * classes to both and made two components' rendering depend on an edit made\n   * for a third.\n   *\n   * `top` and `bottom` are absent for the reason #241 states: no consumer asks\n   * for them, and an edge nobody anchors to is surface that still has to be\n   * themed, screenshotted and kept working.\n   */\n  variants: {\n    placement: {\n      left: {\n        // `items-stretch` and `justify-start` beat the base's centring, and\n        // `p-0` its gutter: a drawer meets three edges of the viewport, so the\n        // padding that keeps a modal off the edges is exactly wrong here.\n        viewport: 'items-stretch justify-start p-0',\n        popup:\n          'flex h-full max-h-full max-w-sm flex-col overflow-y-hidden '\n          + 'border-y-0 border-l-0 border-r-4 '\n          // `transition`, not the base's `transition-opacity`: the drawer moves\n          // as well as fades, and a translate with no transition on it would\n          // land instantly and leave only the fade visible.\n          + 'transition data-[starting-style]:-translate-x-full data-[ending-style]:-translate-x-full',\n        // The panel is as tall as the viewport, so the body takes the slack\n        // and scrolls inside it. Scrolling the whole popup instead would take\n        // the title and the close control off-screen with the content.\n        body: 'flex-1 overflow-y-auto',\n      },\n      right: {\n        viewport: 'items-stretch justify-end p-0',\n        popup:\n          'flex h-full max-h-full max-w-sm flex-col overflow-y-hidden '\n          + 'border-y-0 border-r-0 border-l-4 '\n          // The hard shadow falls down and to the right, so on a drawer flush\n          // with the right edge it paints off-screen and draws nothing. The\n          // 4px inner border is the separation instead. `shadow-none` clears it\n          // only because `lib/recipe.ts` declares the hard-shadow scale to the\n          // merger — the case its `mergeConfig` comment calls out.\n          + 'shadow-none '\n          + 'transition data-[starting-style]:translate-x-full data-[ending-style]:translate-x-full',\n        body: 'flex-1 overflow-y-auto',\n      },\n    },\n  },\n});\n"],"mappings":";AAAA,SAAS,cAAc;AA4BhB,IAAM,gBAAgB,OAAO;AAAA,EAClC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQL,UACE;AAAA,IAEF,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAkBV,OACE;AAAA,IAIF,QACE;AAAA,IACF,OACE;AAAA,IACF,OACE;AAAA,IAGF,MAAM;AAAA,IACN,QACE;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcA,UAAU;AAAA,IACR,WAAW;AAAA,MACT,MAAM;AAAA;AAAA;AAAA;AAAA,QAIJ,UAAU;AAAA,QACV,OACE;AAAA;AAAA;AAAA;AAAA,QASF,MAAM;AAAA,MACR;AAAA,MACA,OAAO;AAAA,QACL,UAAU;AAAA,QACV,OACE;AAAA,QASF,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}

package/dist/components/docs/AnchorHeading.js

@@ -0,0 +1,80 @@
+"use client";
+
+// src/components/docs/AnchorHeading.tsx
+import { useCallback, useMemo } from "react";
+import { Check, Link2 } from "lucide-react";
+import { useCopyToClipboard } from "../../hooks/useCopyToClipboard.js";
+import { childrenToText, slugify } from "../../lib/slug.js";
+import { HEADING_EMPHASIS, accentVar } from "../../lib/theme.js";
+import { cn } from "../../lib/recipe.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function AnchorHeading({
+  level,
+  children,
+  id,
+  anchor = true,
+  emphasis,
+  className = "",
+  ...rest
+}) {
+  const Tag = `h${level}`;
+  const { copied, copy } = useCopyToClipboard();
+  const headingId = useMemo(
+    () => id ?? slugify(childrenToText(children)),
+    [id, children]
+  );
+  const onCopyLink = useCallback(
+    (event) => {
+      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+      event.preventDefault();
+      const url = typeof window === "undefined" ? `#${headingId}` : `${window.location.origin}${window.location.pathname}${window.location.search}#${headingId}`;
+      void copy(url);
+      if (typeof window !== "undefined") {
+        window.history.replaceState(null, "", `#${headingId}`);
+        document.getElementById(headingId)?.scrollIntoView({ behavior: "smooth" });
+      }
+    },
+    [copy, headingId]
+  );
+  const color = accentVar(emphasis, HEADING_EMPHASIS[level]);
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      "data-slot": "anchor-heading",
+      id: headingId,
+      className: cn("docs-anchor-heading group", className),
+      ...rest,
+      children: [
+        children,
+        anchor && /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: `#${headingId}`,
+            onClick: onCopyLink,
+            className: "docs-anchor-link",
+            style: { color },
+            "aria-label": copied ? "Link copied" : "Copy link to this section",
+            title: copied ? "Copied!" : "Copy link to this section",
+            children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Check, { size: 14, "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { children: "COPIED" })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Link2, { size: 14, "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { children: "COPY LINK" })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function createAnchorHeading(level) {
+  const Heading = ({ children, id, ...rest }) => /* @__PURE__ */ jsx(AnchorHeading, { level, id, ...rest, children });
+  Heading.displayName = `AnchorHeading${level}`;
+  return Heading;
+}
+export {
+  AnchorHeading,
+  createAnchorHeading
+};
+//# sourceMappingURL=AnchorHeading.js.map

package/dist/components/docs/AnchorHeading.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/docs/AnchorHeading.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useMemo } from 'react';\nimport type { HTMLAttributes, MouseEvent, ReactNode } from 'react';\nimport { Check, Link2 } from 'lucide-react';\nimport { useCopyToClipboard } from '../../hooks/useCopyToClipboard';\nimport { childrenToText, slugify } from '../../lib/slug';\nimport { HEADING_EMPHASIS, accentVar } from '../../lib/theme';\nimport type { AccentToken } from '../../lib/theme';\nimport { cn } from '../../lib/recipe';\n\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport interface AnchorHeadingProps\n  extends Omit<HTMLAttributes<HTMLHeadingElement>, 'id'> {\n  level: HeadingLevel;\n  children: ReactNode;\n  /**\n   * Explicit anchor id. Prefer passing this — build-time sluggers\n   * (`rehype-slug`) deduplicate repeated headings across the whole document,\n   * which a per-heading component cannot see. Omit it only for one-off headings\n   * outside a compiled MDX page.\n   */\n  id?: string;\n  /** Hide the copy-link affordance (e.g. a page title that is not a section). */\n  anchor?: boolean;\n  /**\n   * Emphasis of the anchor affordance. Defaults to the level's place in\n   * {@link HEADING_EMPHASIS}, so colour hierarchy tracks document hierarchy\n   * without every heading restating it.\n   */\n  emphasis?: AccentToken;\n}\n\n/**\n * A section heading that owns its own anchor.\n *\n * Every heading gets a stable `#slug` id so any section is directly linkable,\n * and the trailing affordance copies the *absolute* url including that hash —\n * the thing people actually want to paste into a ticket or a chat. Clicking\n * also updates `location.hash` via `history.replaceState`, so the address bar\n * agrees with what was copied without pushing a history entry per click.\n *\n * `scroll-margin-top` is applied through the `docs-anchor-heading` class in\n * `prose.css` rather than inline, so a sticky header can retune the offset by\n * setting `--docs-header-height` without this component re-rendering.\n */\nexport function AnchorHeading({\n  level,\n  children,\n  id,\n  anchor = true,\n  emphasis,\n  className = '',\n  ...rest\n}: AnchorHeadingProps) {\n  const Tag = `h${level}` as const;\n  const { copied, copy } = useCopyToClipboard();\n\n  const headingId = useMemo(\n    () => id ?? slugify(childrenToText(children)),\n    [id, children],\n  );\n\n  const onCopyLink = useCallback(\n    (event: MouseEvent<HTMLAnchorElement>) => {\n      // Let modified clicks behave like a normal link (new tab, download, …).\n      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;\n      event.preventDefault();\n\n      const url =\n        typeof window === 'undefined'\n          ? `#${headingId}`\n          : `${window.location.origin}${window.location.pathname}${window.location.search}#${headingId}`;\n\n      void copy(url);\n\n      if (typeof window !== 'undefined') {\n        window.history.replaceState(null, '', `#${headingId}`);\n        document.getElementById(headingId)?.scrollIntoView({ behavior: 'smooth' });\n      }\n    },\n    [copy, headingId],\n  );\n\n  const color = accentVar(emphasis, HEADING_EMPHASIS[level]);\n\n  return (\n    <Tag\n      data-slot=\"anchor-heading\"\n      id={headingId}\n      className={cn('docs-anchor-heading group', className)}\n      {...rest}\n    >\n      {children}\n      {anchor && (\n        <a\n          href={`#${headingId}`}\n          onClick={onCopyLink}\n          className=\"docs-anchor-link\"\n          style={{ color }}\n          aria-label={copied ? 'Link copied' : 'Copy link to this section'}\n          title={copied ? 'Copied!' : 'Copy link to this section'}\n        >\n          {copied ? (\n            <>\n              <Check size={14} aria-hidden=\"true\" />\n              <span>COPIED</span>\n            </>\n          ) : (\n            <>\n              <Link2 size={14} aria-hidden=\"true\" />\n              <span>COPY LINK</span>\n            </>\n          )}\n        </a>\n      )}\n    </Tag>\n  );\n}\n\n/**\n * Factory for the `h1`–`h6` entries of an MDX component map. The compiled MDX\n * supplies `id` (from `rehype-slug`) and `children`; everything else is fixed\n * per level.\n */\nexport function createAnchorHeading(level: HeadingLevel) {\n  const Heading = ({ children, id, ...rest }: HTMLAttributes<HTMLHeadingElement>) => (\n    <AnchorHeading level={level} id={id} {...rest}>\n      {children}\n    </AnchorHeading>\n  );\n  Heading.displayName = `AnchorHeading${level}`;\n  return Heading;\n}\n"],"mappings":";;;AAEA,SAAS,aAAa,eAAe;AAErC,SAAS,OAAO,aAAa;AAC7B,SAAS,0BAA0B;AACnC,SAAS,gBAAgB,eAAe;AACxC,SAAS,kBAAkB,iBAAiB;AAE5C,SAAS,UAAU;AAgGP,mBACE,KADF;AA1DL,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAuB;AACrB,QAAM,MAAM,IAAI,KAAK;AACrB,QAAM,EAAE,QAAQ,KAAK,IAAI,mBAAmB;AAE5C,QAAM,YAAY;AAAA,IAChB,MAAM,MAAM,QAAQ,eAAe,QAAQ,CAAC;AAAA,IAC5C,CAAC,IAAI,QAAQ;AAAA,EACf;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,UAAyC;AAExC,UAAI,MAAM,WAAW,MAAM,WAAW,MAAM,YAAY,MAAM,OAAQ;AACtE,YAAM,eAAe;AAErB,YAAM,MACJ,OAAO,WAAW,cACd,IAAI,SAAS,KACb,GAAG,OAAO,SAAS,MAAM,GAAG,OAAO,SAAS,QAAQ,GAAG,OAAO,SAAS,MAAM,IAAI,SAAS;AAEhG,WAAK,KAAK,GAAG;AAEb,UAAI,OAAO,WAAW,aAAa;AACjC,eAAO,QAAQ,aAAa,MAAM,IAAI,IAAI,SAAS,EAAE;AACrD,iBAAS,eAAe,SAAS,GAAG,eAAe,EAAE,UAAU,SAAS,CAAC;AAAA,MAC3E;AAAA,IACF;AAAA,IACA,CAAC,MAAM,SAAS;AAAA,EAClB;AAEA,QAAM,QAAQ,UAAU,UAAU,iBAAiB,KAAK,CAAC;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,IAAI;AAAA,MACJ,WAAW,GAAG,6BAA6B,SAAS;AAAA,MACnD,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,UACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,IAAI,SAAS;AAAA,YACnB,SAAS;AAAA,YACT,WAAU;AAAA,YACV,OAAO,EAAE,MAAM;AAAA,YACf,cAAY,SAAS,gBAAgB;AAAA,YACrC,OAAO,SAAS,YAAY;AAAA,YAE3B,mBACC,iCACE;AAAA,kCAAC,SAAM,MAAM,IAAI,eAAY,QAAO;AAAA,cACpC,oBAAC,UAAK,oBAAM;AAAA,eACd,IAEA,iCACE;AAAA,kCAAC,SAAM,MAAM,IAAI,eAAY,QAAO;AAAA,cACpC,oBAAC,UAAK,uBAAS;AAAA,eACjB;AAAA;AAAA,QAEJ;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAOO,SAAS,oBAAoB,OAAqB;AACvD,QAAM,UAAU,CAAC,EAAE,UAAU,IAAI,GAAG,KAAK,MACvC,oBAAC,iBAAc,OAAc,IAAS,GAAG,MACtC,UACH;AAEF,UAAQ,cAAc,gBAAgB,KAAK;AAC3C,SAAO;AACT;","names":[]}

package/dist/components/docs/Breadcrumbs.js

@@ -0,0 +1,26 @@
+// src/components/docs/Breadcrumbs.tsx
+import { Fragment } from "react";
+import { DocsLink } from "./DocsLinkProvider.js";
+import { cn } from "../../lib/recipe.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Breadcrumbs({ items, separator = "/", className = "" }) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx("nav", { "data-slot": "breadcrumbs", className: cn("not-prose", className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "docs-breadcrumbs-list", children: items.map((crumb, index) => {
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("li", { children: crumb.href && !isLast ? /* @__PURE__ */ jsx(DocsLink, { href: crumb.href, className: "docs-breadcrumbs-link", children: crumb.label }) : /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "docs-breadcrumbs-current",
+          ...isLast ? { "aria-current": "page" } : {},
+          children: crumb.label
+        }
+      ) }),
+      !isLast && /* @__PURE__ */ jsx("li", { "aria-hidden": "true", className: "docs-breadcrumbs-sep", children: separator })
+    ] }, `${crumb.label}-${index}`);
+  }) }) });
+}
+export {
+  Breadcrumbs
+};
+//# sourceMappingURL=Breadcrumbs.js.map

package/dist/components/docs/Breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/docs/Breadcrumbs.tsx"],"sourcesContent":["import { Fragment } from 'react';\nimport { DocsLink } from './DocsLinkProvider';\nimport { cn } from '../../lib/recipe';\n\nexport interface Crumb {\n  label: string;\n  /** Omit on the final crumb, or for grouping segments with no index page. */\n  href?: string;\n}\n\nexport interface BreadcrumbsProps {\n  items: readonly Crumb[];\n  /** Separator glyph between crumbs. */\n  separator?: string;\n  className?: string;\n}\n\n/**\n * Path trail for nested documentation.\n *\n * The last crumb is always rendered as plain text and marked `aria-current`\n * even when it carries an `href` — self-links read as navigation to assistive\n * tech but go nowhere.\n */\nexport function Breadcrumbs({ items, separator = '/', className = '' }: BreadcrumbsProps) {\n  if (items.length === 0) return null;\n\n  return (\n    <nav data-slot=\"breadcrumbs\" className={cn('not-prose', className)} aria-label=\"Breadcrumb\">\n      <ol className=\"docs-breadcrumbs-list\">\n        {items.map((crumb, index) => {\n          const isLast = index === items.length - 1;\n\n          return (\n            <Fragment key={`${crumb.label}-${index}`}>\n              <li>\n                {crumb.href && !isLast ? (\n                  <DocsLink href={crumb.href} className=\"docs-breadcrumbs-link\">\n                    {crumb.label}\n                  </DocsLink>\n                ) : (\n                  <span\n                    className=\"docs-breadcrumbs-current\"\n                    {...(isLast ? { 'aria-current': 'page' as const } : {})}\n                  >\n                    {crumb.label}\n                  </span>\n                )}\n              </li>\n              {!isLast && (\n                <li aria-hidden=\"true\" className=\"docs-breadcrumbs-sep\">\n                  {separator}\n                </li>\n              )}\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":";AAAA,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,UAAU;AAgCP,SAGM,KAHN;AAVL,SAAS,YAAY,EAAE,OAAO,YAAY,KAAK,YAAY,GAAG,GAAqB;AACxF,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,SACE,oBAAC,SAAI,aAAU,eAAc,WAAW,GAAG,aAAa,SAAS,GAAG,cAAW,cAC7E,8BAAC,QAAG,WAAU,yBACX,gBAAM,IAAI,CAAC,OAAO,UAAU;AAC3B,UAAM,SAAS,UAAU,MAAM,SAAS;AAExC,WACE,qBAAC,YACC;AAAA,0BAAC,QACE,gBAAM,QAAQ,CAAC,SACd,oBAAC,YAAS,MAAM,MAAM,MAAM,WAAU,yBACnC,gBAAM,OACT,IAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACT,GAAI,SAAS,EAAE,gBAAgB,OAAgB,IAAI,CAAC;AAAA,UAEpD,gBAAM;AAAA;AAAA,MACT,GAEJ;AAAA,MACC,CAAC,UACA,oBAAC,QAAG,eAAY,QAAO,WAAU,wBAC9B,qBACH;AAAA,SAlBW,GAAG,MAAM,KAAK,IAAI,KAAK,EAoBtC;AAAA,EAEJ,CAAC,GACH,GACF;AAEJ;","names":[]}