@thewhatmatters/wmds 0.4.1 → 0.4.3

package/CHANGELOG.md

@@ -7,6 +7,44 @@ Every release of `@thewhatmatters/wmds` is listed here, newest first.
 - **Pasted patterns:** when a release changes a **Pattern — …** story's Show code, it is named under Consumer actions so apps re-copy it.
 - **How to add an entry** (contributors): add your change to the top entry. If that version is already on npm (`npm view @thewhatmatters/wmds versions`), start a new entry above it and bump `version` in `package.json` to match. `npm run check:changelog` enforces the format.
 
+## 0.4.3
+
+**ChatDock: the gate takes over the window.** Start a project no longer sits as a card inside the chat. While a `gate` is up the window is the form: one header, the step, and the footer on the window's bottom edge, and the window is modal. Also: two hydration fixes, a promise-based send for the gate pattern, options for the post page and filtered index patterns, and fewer false positives in `wmds-check`. See the amendments to **ADR-0039**, **ADR-0040**, and **ADR-0041**.
+
+- **ChatDock `gate`** — fills the window. The window's header, the conversation, the composer, the suggestion rows, the follow-ups, and the disclaimer fade out and wait behind it; finishing or cancelling brings them back as they were. The cap that kept the latest reply in view is gone: the step body takes the window's height and scrolls, and the footer sits on the window's bottom edge (above the home indicator on phones). While the gate is up the fixed window is modal: a scrim covers the page and **SiteNav**, the page is inert and does not scroll, and Tab stays inside (`aria-modal="true"`). Inline previews are not modal.
+- **One close.** The gate's header close (named "Close chat", from ChatDock's `labels.close`), Escape, and a click on the scrim fold the window and keep the gate with its progress; reopening the chat brings it back. The gate's Cancel leaves it. Before, Escape and the gate's close left the gate and the window had a second close.
+- **ChatDock.Gate** — a flush shell in the window instead of a raised card; the step sits on the window surface, not an inset well. New `pending` (shows `labels.pending`, "Sending…", in a status line, disables the step controls, sets `aria-busy`) and `error` (a line over the footer, announced). The header's next control is off on the last step, so `onNext` there is the footer's primary action — "Send" or "Try again" through `continueLabel`. New label `pending`.
+- **Components/ChatDock → Pattern — start a project gate** — `onSubmit` returns a promise. Booking or skipping shows "Sending…"; the confetti, the answers, and the confirmation wait for it to resolve. If it rejects, every answer stays, the gate says the send failed, and Try again sends it again. `close` is the gate's Cancel. New stories: **Start a project — send failed** at 1280 and 390.
+- **Fix: Toaster hydration.** **Toaster** rendered its list in the browser and nothing on the server, so a layout that held it failed hydration on every page. It now renders nothing on the server and in the hydration render, and mounts its list right after.
+- **Fix: ChatDock hydration under reduced motion.** The closed window's inline style differed between the server and a browser that prefers reduced motion. ChatDock now reads reduced motion as off on the server and in the hydration render, and switches right after, while the window is hidden.
+- **Guides/Post page → Pattern — post page** — `metadataSide` (`"start"`, default, or `"end"`) and `metadataColumns` (`4`, default, or `3`; the article takes the rest) place the metadata panel from `lg`. Below `lg` it stacks above the article either way. New story **Metadata on the right**.
+- **Guides/Filter panel → Pattern — filtered index** — a post's `facets` take one option or a list per group (`{ topic: ["guides", "brand"] }`); within a group the options on are alternatives, and each option counts every post that has it. New `defaultSelection` (the filters on when the page opens) and `selection` + `onSelectionChange` (the app holds them). New exported types `FilterSelection` and `FilteredIndexProps`. New story **Starting selection**.
+- **`wmds-check`** — `pattern-drift` compares a pasted pattern's markup and classes with the shipped file (its elements in order, its `className` and `style` values, and its `*Classes` constants), so edits to content, data, handlers, and exported names no longer warn; the warning names the first difference. `raw-color` no longer reads a character reference such as `'` as a hex color.
+
+### Consumer actions
+
+1. **WhatMatters site: re-copy Components/ChatDock → Pattern — start a project gate** (`node_modules/@thewhatmatters/wmds/docs/patterns/components-chatdock--pattern-start-project-gate.tsx`) over `components/start-project-gate.tsx`, and re-apply only your services, budgets, step copy, and calendar. Then make `onSubmit` return the send's promise and reject when it fails — for example `onSubmit={async (intake) => { const response = await fetch("/api/intake", { method: "POST", body: JSON.stringify(intake) }); if (!response.ok) throw new Error("Intake failed"); }}`. TypeScript flags a handler that returns nothing. Remove the toast you show on a failed send; the gate shows the error and Try again.
+2. **The gate taking over the window: nothing to re-copy.** It comes with the upgrade, and **Pattern — chat dock** is unchanged. While the gate is up the page behind is inert: a site test that clicks the page with the gate open must close the window first (the gate's close, Escape, or the scrim). A test that pressed Escape or the gate's close to leave the gate now finds the window folded with the gate kept; press **Cancel** to leave it.
+3. **Mount `<Toaster />` directly in the layout** and remove the after-hydration workaround.
+4. **WhatMatters site, post page: re-copy Guides/Post page → Pattern — post page** (`node_modules/@thewhatmatters/wmds/docs/patterns/guides-post-page--post-page.tsx`), re-apply only your content, data, and handlers, and pass `metadataSide="end"` and `metadataColumns={3}` where you render `PostPage` instead of editing the panel's classes.
+5. **WhatMatters site, blog index: re-copy Guides/Filter panel → Pattern — filtered index** (`node_modules/@thewhatmatters/wmds/docs/patterns/guides-filter-panel--filtered-index.tsx`) and re-apply only your content and data. Map each post's topics to a list (`facets: { topic: post.topics }`). For the category tags that link to `/blog?topic=<id>`, read the parameter in the page and pass `defaultSelection={{ topic: [topic] }}` when it is set — or pass `selection` and `onSelectionChange` to keep the filters in the URL.
+6. **`npx wmds-check --max-warnings 0`** now passes with content-only edits to pasted patterns. A remaining `pattern-drift` names the first markup or class that differs: re-copy that pattern, or use the pattern's props (steps 4 and 5) instead of editing its classes.
+7. Other apps: steps 2 and 3 only, if they render a ChatDock `gate` or a **Toaster**. **ChatDock.Gate** `pending` and `error`, and the patterns' new props, are optional.
+
+## 0.4.2
+
+**Breadcrumb** — the path to the current page, after the shadcn/ui breadcrumb: links from the root, a separator between them, the current page last, and a long path folded into a "…" menu of links. See **ADR-0042**.
+
+- **Breadcrumb** (new) — pass `items` (`{ label, href }`; the last item, without `href`, is the current page). Above `maxItems` (default 4) the first item and the last two stay and the middle folds into a "…" control; it opens a menu of the hidden links, with focus on the first, arrow keys between them, and Escape back to the control. Long labels truncate. `separator`: `chevron` (default) or `slash`. `variant`: `sans` (default) or `mono` (eyebrow caps). `renderLink` routes every link through your router (`(item) => <Link href={item.href} />`). New **Pattern — path**, **Pattern — long path**, **Pattern — router links**, and **Pattern — editorial**.
+- **Dropdown.Item** `render` — compose a row onto another element, such as `render={<a href />}` for a menu of links.
+- **Guides/Post page → Pattern — post page** — a mono, slash-separated **Breadcrumb** above the title. `PostPageData` gains `breadcrumb`.
+
+### Consumer actions
+
+1. **WhatMatters site, post page: re-copy Guides/Post page → Pattern — post page** (`node_modules/@thewhatmatters/wmds/docs/patterns/guides-post-page--post-page.tsx`) and re-apply only your content, data, and handlers. Pass `breadcrumb` in `PostPageData`, ending with the post — for example `[{ label: "Home", href: "/" }, { label: "Blog", href: "/blog" }, { label: post.title }]`, with the post's category between Blog and the title if you link categories. To route crumbs through Next, pass `renderLink={(item) => <Link href={item.href} />}` on the pattern's **Breadcrumb**.
+2. **WhatMatters site, other deep pages** (a resource category, a case study): add `<Breadcrumb items={…} />` above the page title — `variant="mono" separator="slash"` on editorial pages, to match the post page.
+3. Other apps: none. **Breadcrumb** and **Dropdown.Item** `render` are new and optional.
+
 ## 0.4.1
 
 **ChatDock:** follow-ups in the open window, actions and a match score under each reply, a Start a project gate in the composer's place, the visitor's messages on a brand tint, and a new open and close transition.

package/CONSUMING.md

@@ -152,7 +152,7 @@ npx wmds-check app components --max-warnings 0
 | `raw-color` | error | hex, `rgb()`, `hsl()`, `oklch()` values in `className` or `style` |
 | `raw-type` | warning | `text-sm`-style sizes or `text-[…]` — use `type-*` utilities |
 | `raw-motion` | warning | `duration-[…]`, `ease-[…]`, `delay-[…]`, numeric Motion durations |
-| `pattern-drift` | warning | a pasted pattern differs from `docs/patterns/<id>.tsx` in the installed version |
+| `pattern-drift` | warning | a pasted pattern's markup or classes differ from `docs/patterns/<id>.tsx` in the installed version — its elements in order, its `className` and `style` values, and its `*Classes` constants. Content, data, handlers, and exported names may change without a warning |
 | `pattern-stale` | warning | a pasted pattern's header names an older version |
 | `pattern-removed` | error | a pasted pattern's id no longer ships |
 
@@ -265,9 +265,10 @@ import {
 | `Input` | `label`, `description`, `status`, `message`, `loading`, `endBadge`, `icon`, `size` | Components/Input — pill shell; Required via `endBadge={<Badge>…</Badge>}` |
 | `Search` | `size`, `placeholder`, `onSubmit` | Components/Search — inline input + button row |
 | `PromptBar` | `value`, `onValueChange`, `onSend`, `placeholder` (default Ask anything…), `start`, `end` | Components/PromptBar — **Pattern — prompt bar**. Wide pill, inline field (one line empty, up to 3 lines, then scroll), inset **IconButton** send. Muted until there is text, then `--color-brand` (`#011272`). Enter sends. `start` takes the brand mark; `end` takes extra inset controls. Voice and attachments are not part of this version. |
-| `ChatDock` | `title`, `subtitle`, `mark`, `greeting`, `messages` (replies may carry `copyText`, `meta`, `feedback`), `thinking`, `suggestions`, `followUps`, `followUpsPlacement`, `onSend`, `onSuggestionSelect`, `onMessageFeedback`, `gate` (**ChatDock.Gate**), `disclaimer` | Components/ChatDock — **Pattern — chat dock**. The site assistant: a pinned **PromptBar** with suggested-question pills on hover that opens into a non-modal chat window (full screen on phones). The app owns the conversation and the request, and passes `followUps` for the latest reply when it has them (shown under the reply by default). Finished replies get Copy, thumbs, and a score row from `copyText`, `onMessageFeedback` with `feedback`, and `meta`. Start a project runs as a `gate` in the composer's place — **Pattern — start a project gate**. Replaces the separate ask page. |
+| `ChatDock` | `title`, `subtitle`, `mark`, `greeting`, `messages` (replies may carry `copyText`, `meta`, `feedback`), `thinking`, `suggestions`, `followUps`, `followUpsPlacement`, `onSend`, `onSuggestionSelect`, `onMessageFeedback`, `gate` (**ChatDock.Gate**), `disclaimer` | Components/ChatDock — **Pattern — chat dock**. The site assistant: a pinned **PromptBar** with suggested-question pills on hover that opens into a non-modal chat window (full screen on phones). The app owns the conversation and the request, and passes `followUps` for the latest reply when it has them (shown under the reply by default). Finished replies get Copy, thumbs, and a score row from `copyText`, `onMessageFeedback` with `feedback`, and `meta`. Start a project runs as a `gate` that takes over the window (modal while it is up) — **Pattern — start a project gate**. Replaces the separate ask page. |
 | `Card` | `variant`, `shape`, `padding` | Components/Card/Card — `Card.Header` (`start` | `end`), **`Card.Body` slot** (no default fill), `Card.Footer` |
 | `Accordion` | `variant`, `flush` (plain), `Accordion.Item` `leading` / `label` / `trailing` / `open` | Components/Accordion — FAQ, settings sections; **Pattern — flush** for filter groups. Closed panels leave the tab order |
+| `Breadcrumb` | `items` (`{ label, href }`, current page last), `maxItems`, `separator` (`chevron` \| `slash`), `variant` (`sans` \| `mono`), `renderLink`, `labels` | Components/Breadcrumb — **Pattern — path**, **long path**, **router links**, **editorial** |
 | `DescriptionList` | `layout` (`inline` \| `stacked`), `rule` (`solid` \| `dotted` \| `none`), `variant` (`sans` \| `mono`), `DescriptionList.Item` `name` / `layout` | Components/DescriptionList — **Pattern — post metadata**, **Pattern — details** |
 | `SectionCaption` | `children`, `as`, `id`, `end`, `marker`, `rule` | Components/SectionCaption — **Pattern — column caption**, **Pattern — caption with an action** |
 | `Prose` | `size` (`lg` \| `md`), `measure` (`reading` \| `none`), `as` | Components/Prose — **Pattern — article body**. Full page: **Guides/Post page → Pattern — post page** |

package/bin/wmds-check.mjs

@@ -13,7 +13,9 @@
  *   raw-color         error  hex / rgb / hsl colors in className or style
  *   raw-type          warn   text-xs…text-9xl or text-[…] sizes — use type-* utilities
  *   raw-motion        warn   duration-[…] / ease-[…] / delay-[…] utilities, or numeric Motion durations
- *   pattern-drift     warn   a pasted pattern differs from docs/patterns/<id>.tsx in the installed package
+ *   pattern-drift     warn   a pasted pattern's markup or classes differ from docs/patterns/<id>.tsx in the
+ *                             installed package (its elements, className / style values, *Classes constants);
+ *                             content, data, handlers, and exports may change
  *   pattern-stale     warn   a pasted pattern's header names an older package version
  *   pattern-removed   error  a pasted pattern's id no longer ships
  *
@@ -77,12 +79,100 @@ const rawControls = [
   ["textarea", "TextArea / PromptBar"],
 ];
 
-const strip = (source) =>
-  source
-    .split("\n")
-    .filter((line) => !/^\/\/ (@thewhatmatters\/wmds@|Storybook:|Show code)/.test(line))
-    .join("\n")
-    .trim();
+// Hex colors, not character references such as &#039; or &#x27;.
+const colorValue = /(?<![&\w])#[0-9a-fA-F]{3,8}\b|rgba?\(|hsla?\(|oklch\(/;
+const colorMatch = /(?<![&\w])#[0-9a-fA-F]{3,8}|rgba?\(.*?\)|hsla?\(.*?\)|oklch\(.*?\)/;
+
+/** The index past the end of the string literal that opens at `start` (quote or backtick). */
+const skipString = (code, start) => {
+  const quote = code[start];
+  for (let index = start + 1; index < code.length; index++) {
+    const char = code[index];
+    if (char === "\\") {
+      index++;
+    } else if (quote === "`" && char === "$" && code[index + 1] === "{") {
+      index = skipBalanced(code, index + 1) - 1;
+    } else if (char === quote) {
+      return index + 1;
+    }
+  }
+  return code.length;
+};
+
+/** The index past the bracket that closes the one at `start`, skipping strings. */
+const skipBalanced = (code, start) => {
+  let depth = 0;
+  for (let index = start; index < code.length; index++) {
+    const char = code[index];
+    if (char === '"' || char === "'" || char === "`") {
+      index = skipString(code, index) - 1;
+    } else if ("{([".includes(char)) {
+      depth++;
+    } else if ("})]".includes(char)) {
+      depth--;
+      if (depth === 0) return index + 1;
+    }
+  }
+  return code.length;
+};
+
+/** One attribute value from `start`: a quoted string or a {…} expression. */
+const readValue = (code, start) => {
+  const char = code[start];
+  if (char === '"' || char === "'") return code.slice(start, skipString(code, start));
+  if (char === "{") return code.slice(start, skipBalanced(code, start));
+  return "";
+};
+
+/** A declaration's value from `start` to the semicolon that ends it. */
+const readDeclaration = (code, start) => {
+  let depth = 0;
+  for (let index = start; index < code.length; index++) {
+    const char = code[index];
+    if (char === '"' || char === "'" || char === "`") index = skipString(code, index) - 1;
+    else if ("{([".includes(char)) depth++;
+    else if ("})]".includes(char)) depth--;
+    else if (char === ";" && depth === 0) return code.slice(start, index);
+  }
+  return code.slice(start);
+};
+
+const squash = (text) => text.replace(/\s+/g, " ").trim();
+
+/**
+ * What a pasted pattern must keep: its JSX elements in order, every className and style value, and
+ * every *Classes constant. Text, data, handler bodies, and names an app exports are content — they
+ * can change without drift.
+ */
+const patternStructure = (source) => {
+  const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/(^|[^:"'`\\])\/\/.*$/gm, "$1");
+  const parts = [];
+  const tokens = /(?<![\w.$)\]])<([A-Za-z][\w.]*)|\b(className|style)=|\bconst\s+(\w*Classes)\b[^=]*=\s*/g;
+  for (const match of code.matchAll(tokens)) {
+    const end = match.index + match[0].length;
+    if (match[1]) parts.push(`<${match[1]}>`);
+    else if (match[2]) parts.push(`${match[2]}=${squash(readValue(code, end))}`);
+    else parts.push(`${match[3]} = ${squash(readDeclaration(code, end))}`);
+  }
+  return parts;
+};
+
+/** The first place two structures part, for the finding's message — clipped around where they differ. */
+const firstDifference = (shipped, pasted) => {
+  const length = Math.max(shipped.length, pasted.length);
+  for (let index = 0; index < length; index++) {
+    const want = shipped[index];
+    const have = pasted[index];
+    if (want === have) continue;
+    let common = 0;
+    while (want != null && have != null && common < want.length && want[common] === have[common]) common++;
+    const from = Math.max(0, common - 24);
+    const clip = (text) =>
+      text == null ? "nothing" : `${from > 0 ? "…" : ""}${text.slice(from, from + 64)}${text.length > from + 64 ? "…" : ""}`;
+    return `${clip(have)} where the pattern has ${clip(want)}`;
+  }
+  return "";
+};
 
 for (const file of files) {
   const source = readFileSync(file, "utf8");
@@ -120,7 +210,7 @@ for (const file of files) {
     }
 
     if (/(className|class|style)=/.test(line) || /(color|background|border|fill|stroke)\s*:/.test(line)) {
-      if (/#[0-9a-fA-F]{3,8}\b|rgba?\(|hsla?\(|oklch\(/.test(line) && !/var\(--/.test(line.match(/#[0-9a-fA-F]{3,8}|rgba?\(.*?\)|hsla?\(.*?\)|oklch\(.*?\)/)?.[0] ?? "") && !ignored(lines, index, "raw-color")) {
+      if (colorValue.test(line) && !/var\(--/.test(line.match(colorMatch)?.[0] ?? "") && !ignored(lines, index, "raw-color")) {
         report(file, n, "raw-color", "error", "raw color value — use a semantic color utility or token");
       }
     }
@@ -150,8 +240,16 @@ for (const file of files) {
       if (header[1] !== packageVersion) {
         report(file, 1, "pattern-stale", "warn", `pasted from ${header[1]}, installed ${packageVersion} — re-copy if CHANGELOG names it`);
       }
-      if (strip(readFileSync(shipped, "utf8")) !== strip(source)) {
-        report(file, 1, "pattern-drift", "warn", `differs from docs/patterns/${id}.tsx — allowed edits are content, data, handlers, exports`);
+      const shippedStructure = patternStructure(readFileSync(shipped, "utf8"));
+      const pastedStructure = patternStructure(source);
+      if (shippedStructure.join("\n") !== pastedStructure.join("\n")) {
+        report(
+          file,
+          1,
+          "pattern-drift",
+          "warn",
+          `markup or classes differ from docs/patterns/${id}.tsx (${firstDifference(shippedStructure, pastedStructure)}) — allowed edits are content, data, handlers, exports`,
+        );
       }
     }
   }

package/dist/components/molecules/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,59 @@
+import { type ReactElement } from "react";
+import { type BreadcrumbSeparator, type BreadcrumbVariant } from "./breadcrumbStyles";
+export { breadcrumbSeparators, breadcrumbVariants, type BreadcrumbSeparator, type BreadcrumbVariant, } from "./breadcrumbStyles";
+/** Layout-only — margin or grid placement. */
+export type BreadcrumbLayoutClassName = string;
+export interface BreadcrumbItemDef {
+    /** Stable key. Default: `href`, else `label`. */
+    id?: string;
+    label: string;
+    /** Where the crumb goes. Leave it out on the last item — the current page. */
+    href?: string;
+}
+/** A crumb with somewhere to go — what `renderLink` receives. */
+export type BreadcrumbLinkItem = BreadcrumbItemDef & {
+    href: string;
+};
+export interface BreadcrumbLabels {
+    /** Names the navigation landmark. Default: "Breadcrumb". */
+    nav: string;
+    /** Names the "…" control. Default: "Show 2 more pages". */
+    more: (count: number) => string;
+}
+export declare const breadcrumbDefaultLabels: BreadcrumbLabels;
+export interface BreadcrumbProps {
+    /** The path, from the root to the current page (the last item). */
+    items: BreadcrumbItemDef[];
+    /**
+     * The most crumbs shown. A longer path keeps the first item and the last `maxItems - 2`, and
+     * folds the middle into a "…" control that opens a menu of its links. Default: 4. Minimum: 3.
+     */
+    maxItems?: number;
+    /** `chevron` (default) or `slash`. */
+    separator?: BreadcrumbSeparator;
+    /** `sans` (default, body type) or `mono` (eyebrow caps, for editorial pages). */
+    variant?: BreadcrumbVariant;
+    /**
+     * Route links through your router: return the link element without children, for example
+     * `(item) => <Link href={item.href} />`. Default: `<a href={item.href} />`.
+     */
+    renderLink?: (item: BreadcrumbLinkItem) => ReactElement;
+    labels?: Partial<BreadcrumbLabels>;
+    className?: BreadcrumbLayoutClassName;
+}
+type BreadcrumbSlot = {
+    kind: "item";
+    item: BreadcrumbItemDef;
+    current: boolean;
+} | {
+    kind: "more";
+    items: BreadcrumbItemDef[];
+};
+/** First, the collapsed middle, then the last `maxItems - 2`. */
+export declare function breadcrumbSlots(items: BreadcrumbItemDef[], maxItems?: number): BreadcrumbSlot[];
+/**
+ * The path to the current page — links from the root, the current page last. A long path folds its
+ * middle into a "…" control that opens a menu of the hidden links.
+ */
+export declare function Breadcrumb({ items, maxItems, separator, variant, renderLink, labels: labelsProp, className, }: BreadcrumbProps): import("react").JSX.Element;
+//# sourceMappingURL=Breadcrumb.d.ts.map

package/dist/components/molecules/Breadcrumb/Breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAWL,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AAQf,OAAO,EAUL,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACvB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,GACvB,MAAM,oBAAoB,CAAC;AAE5B,8CAA8C;AAC9C,MAAM,MAAM,yBAAyB,GAAG,MAAM,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC,iDAAiD;IACjD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,iEAAiE;AACjE,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtE,MAAM,WAAW,gBAAgB;IAC/B,4DAA4D;IAC5D,GAAG,EAAE,MAAM,CAAC;IACZ,2DAA2D;IAC3D,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,uBAAuB,EAAE,gBAGrC,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,mEAAmE;IACnE,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,iFAAiF;IACjF,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,YAAY,CAAC;IACxD,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,yBAAyB,CAAC;CACvC;AAED,KAAK,cAAc,GACf;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,iBAAiB,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,GAC3D;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,iBAAiB,EAAE,CAAA;CAAE,CAAC;AAEjD,iEAAiE;AACjE,wBAAgB,eAAe,CAC7B,KAAK,EAAE,iBAAiB,EAAE,EAC1B,QAAQ,SAAI,GACX,cAAc,EAAE,CAiBlB;AAoND;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAY,EACZ,SAAqB,EACrB,OAAgB,EAChB,UAA8B,EAC9B,MAAM,EAAE,UAAU,EAClB,SAAS,GACV,EAAE,eAAe,+BAwCjB"}

package/dist/components/molecules/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,188 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { ButtonIcon as t } from "../../atoms/Button/ButtonIcon.js";
+import { IconButton as n } from "../../atoms/IconButton/IconButton.js";
+import { Dropdown as r } from "../Dropdown/Dropdown.js";
+import { measureDropdownMenuStyle as i } from "../Dropdown/dropdownMenuPosition.js";
+import { breadcrumbItemClasses as a, breadcrumbLinkClasses as o, breadcrumbListClasses as s, breadcrumbMoreClasses as c, breadcrumbPageClasses as l, breadcrumbSeparatorClasses as u, breadcrumbSeparators as d, breadcrumbSlashClasses as f, breadcrumbTextClasses as p, breadcrumbVariantClasses as m, breadcrumbVariants as h } from "./breadcrumbStyles.js";
+import { Fragment as g, useCallback as _, useEffect as v, useId as y, useLayoutEffect as b, useRef as x, useState as S } from "react";
+import { ChevronRight as C, Ellipsis as w } from "lucide-react";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
+import { useRender as D } from "@base-ui/react/use-render";
+//#region src/components/molecules/Breadcrumb/Breadcrumb.tsx
+var O = {
+	nav: "Breadcrumb",
+	more: (e) => `Show ${e} more ${e === 1 ? "page" : "pages"}`
+};
+function k(e, t = 4) {
+	let n = Math.max(3, Math.floor(t)), r = e.length - 1, i = (e, t) => ({
+		kind: "item",
+		item: e,
+		current: t === r
+	});
+	if (e.length <= n) return e.map(i);
+	let a = n - 2;
+	return [
+		i(e[0], 0),
+		{
+			kind: "more",
+			items: e.slice(1, e.length - a)
+		},
+		...e.slice(e.length - a).map((t, n) => i(t, e.length - a + n))
+	];
+}
+function A(e) {
+	return e.id ?? e.href ?? e.label;
+}
+function j(e) {
+	return /* @__PURE__ */ T("a", { href: e.href });
+}
+function M(e) {
+	return e.href != null;
+}
+function N({ item: e, renderLink: t }) {
+	return D({
+		render: t(e),
+		props: {
+			className: o,
+			title: e.label,
+			children: e.label
+		}
+	});
+}
+function P({ separator: e }) {
+	return /* @__PURE__ */ T("li", {
+		role: "presentation",
+		"aria-hidden": "true",
+		className: u,
+		children: e === "slash" ? /* @__PURE__ */ T("span", {
+			className: f,
+			children: "/"
+		}) : /* @__PURE__ */ T(t, {
+			size: "xs",
+			children: /* @__PURE__ */ T(C, {})
+		})
+	});
+}
+function F({ items: e, label: t, renderLink: a }) {
+	let o = y(), s = x(null), l = x(null), u = x(null), [d, f] = S(!1), [p, m] = S(null), h = x(!1), g = _(() => {
+		let t = l.current;
+		t != null && m(i(t, e.map((e) => ({ label: e.label })), {
+			align: "start",
+			widthMode: "content"
+		}));
+	}, [e]), C = _((e) => {
+		f(!1), m(null), e && l.current?.querySelector("button")?.focus();
+	}, []);
+	b(() => {
+		if (d) return g(), window.addEventListener("resize", g), window.addEventListener("scroll", g, !0), () => {
+			window.removeEventListener("resize", g), window.removeEventListener("scroll", g, !0);
+		};
+	}, [d, g]), v(() => {
+		!d || p == null || !h.current || (h.current = !1, u.current?.querySelector("a, [href], button")?.focus());
+	}, [d, p]), v(() => {
+		if (!d) return;
+		function e(e) {
+			s.current != null && !s.current.contains(e.target) && C(!1);
+		}
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [d, C]);
+	function D() {
+		return [...u.current?.querySelectorAll("a, [href], button") ?? []];
+	}
+	function O(e) {
+		if (!d) {
+			e.key === "ArrowDown" && (e.preventDefault(), h.current = !0, f(!0));
+			return;
+		}
+		if (e.key === "Escape") {
+			e.preventDefault(), C(!0);
+			return;
+		}
+		if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+		let t = D();
+		if (t.length === 0) return;
+		e.preventDefault();
+		let n = t.indexOf(document.activeElement), r = e.key === "ArrowDown" ? 1 : -1;
+		t[n === -1 ? r === 1 ? 0 : t.length - 1 : (n + r + t.length) % t.length]?.focus();
+	}
+	function k(e) {
+		if (!d) return;
+		let t = e.relatedTarget;
+		(t == null || !s.current?.contains(t)) && C(!1);
+	}
+	return /* @__PURE__ */ E("div", {
+		ref: s,
+		className: c,
+		onKeyDown: O,
+		onBlur: k,
+		children: [/* @__PURE__ */ T("div", {
+			ref: l,
+			className: "inline-flex",
+			children: /* @__PURE__ */ T(n, {
+				size: "sm",
+				icon: /* @__PURE__ */ T(w, {}),
+				"aria-label": t,
+				title: "",
+				"aria-expanded": d,
+				"aria-controls": d ? o : void 0,
+				onClick: () => {
+					d ? C(!1) : (h.current = !0, f(!0));
+				}
+			})
+		}), d && p != null ? /* @__PURE__ */ T("div", {
+			ref: u,
+			children: /* @__PURE__ */ T(r.Menu, {
+				id: o,
+				"aria-label": t,
+				style: p,
+				children: e.map((e) => /* @__PURE__ */ T("li", { children: M(e) ? /* @__PURE__ */ T(r.Item, {
+					truncate: !1,
+					render: a(e),
+					onClick: () => C(!1),
+					children: e.label
+				}) : /* @__PURE__ */ T(r.Item, {
+					truncate: !1,
+					disabled: !0,
+					children: e.label
+				}) }, A(e)))
+			})
+		}) : null]
+	});
+}
+function I({ items: t, maxItems: n = 4, separator: r = "chevron", variant: i = "sans", renderLink: o = j, labels: c, className: u }) {
+	let d = {
+		...O,
+		...c
+	}, f = k(t, n);
+	return /* @__PURE__ */ T("nav", {
+		"aria-label": d.nav,
+		className: u,
+		"data-variant": i,
+		children: /* @__PURE__ */ T("ol", {
+			className: e(s, m[i]),
+			children: f.map((e, t) => /* @__PURE__ */ E(g, { children: [t > 0 ? /* @__PURE__ */ T(P, { separator: r }) : null, /* @__PURE__ */ T("li", {
+				className: a,
+				children: e.kind === "more" ? /* @__PURE__ */ T(F, {
+					items: e.items,
+					label: d.more(e.items.length),
+					renderLink: o
+				}) : e.current ? /* @__PURE__ */ T("span", {
+					className: l,
+					"aria-current": "page",
+					title: e.item.label,
+					children: e.item.label
+				}) : M(e.item) ? /* @__PURE__ */ T(N, {
+					item: e.item,
+					renderLink: o
+				}) : /* @__PURE__ */ T("span", {
+					className: p,
+					title: e.item.label,
+					children: e.item.label
+				})
+			})] }, e.kind === "more" ? "more" : A(e.item)))
+		})
+	});
+}
+//#endregion
+export { I as Breadcrumb, O as breadcrumbDefaultLabels, d as breadcrumbSeparators, k as breadcrumbSlots, h as breadcrumbVariants };

package/dist/components/molecules/Breadcrumb/breadcrumbStyles.d.ts

@@ -0,0 +1,21 @@
+export declare const breadcrumbSeparators: readonly ["chevron", "slash"];
+/** Between crumbs: a chevron (default) or a slash. */
+export type BreadcrumbSeparator = (typeof breadcrumbSeparators)[number];
+export declare const breadcrumbVariants: readonly ["sans", "mono"];
+/** `sans` (default) — body type. `mono` — `type-eyebrow` caps, for editorial pages beside **SectionCaption**. */
+export type BreadcrumbVariant = (typeof breadcrumbVariants)[number];
+export declare const breadcrumbListClasses = "m-0 flex min-w-0 list-none flex-wrap items-center gap-x-1.5 gap-y-1 p-0 sm:gap-x-2";
+export declare const breadcrumbVariantClasses: Record<BreadcrumbVariant, string>;
+export declare const breadcrumbItemClasses = "inline-flex min-w-0 items-center";
+/** A link crumb — muted, darkening with an underline on hover, the focus ring. */
+export declare const breadcrumbLinkClasses: string;
+/** The current page — the last crumb, not a link. */
+export declare const breadcrumbPageClasses: string;
+/** A crumb with no link that is not the current page. */
+export declare const breadcrumbTextClasses: string;
+export declare const breadcrumbSeparatorClasses = "inline-flex shrink-0 items-center text-muted";
+/** The slash separator — a character in the crumbs' own type. */
+export declare const breadcrumbSlashClasses = "select-none";
+/** Holds the 36px "…" control in the text line without growing the row. */
+export declare const breadcrumbMoreClasses = "relative -mx-2.5 -my-2 inline-flex";
+//# sourceMappingURL=breadcrumbStyles.d.ts.map

package/dist/components/molecules/Breadcrumb/breadcrumbStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Breadcrumb/breadcrumbStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB,+BAAgC,CAAC;AAElE,sDAAsD;AACtD,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC;AAExE,eAAO,MAAM,kBAAkB,2BAA4B,CAAC;AAE5D,iHAAiH;AACjH,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpE,eAAO,MAAM,qBAAqB,uFAAuF,CAAC;AAE1H,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAGtE,CAAC;AAEF,eAAO,MAAM,qBAAqB,qCAAqC,CAAC;AAKxE,kFAAkF;AAClF,eAAO,MAAM,qBAAqB,QAOjC,CAAC;AAEF,qDAAqD;AACrD,eAAO,MAAM,qBAAqB,QAAwC,CAAC;AAE3E,yDAAyD;AACzD,eAAO,MAAM,qBAAqB,QAA2C,CAAC;AAE9E,eAAO,MAAM,0BAA0B,iDAAiD,CAAC;AAEzF,iEAAiE;AACjE,eAAO,MAAM,sBAAsB,gBAAgB,CAAC;AAEpD,2EAA2E;AAC3E,eAAO,MAAM,qBAAqB,uCAAuC,CAAC"}

package/dist/components/molecules/Breadcrumb/breadcrumbStyles.js

@@ -0,0 +1,11 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { typographyClass as t } from "../../../lib/typography.js";
+import { motionTransition as n } from "../../../lib/motion.js";
+//#region src/components/molecules/Breadcrumb/breadcrumbStyles.ts
+var r = ["chevron", "slash"], i = ["sans", "mono"], a = "m-0 flex min-w-0 list-none flex-wrap items-center gap-x-1.5 gap-y-1 p-0 sm:gap-x-2", o = {
+	sans: e(t("body"), "text-muted"),
+	mono: t("eyebrow")
+}, s = "inline-flex min-w-0 items-center", c = "block max-w-[10rem] truncate sm:max-w-[16rem] lg:max-w-[24rem]", l = e(c, "rounded-sm text-muted underline decoration-transparent decoration-solid underline-offset-4", "transition-[color,text-decoration-color]", n("fast"), "hover:text-fg hover:decoration-current", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-body"), u = e(c, "text-fg"), d = e(c, "text-muted"), f = "inline-flex shrink-0 items-center text-muted", p = "select-none", m = "relative -mx-2.5 -my-2 inline-flex";
+//#endregion
+export { s as breadcrumbItemClasses, l as breadcrumbLinkClasses, a as breadcrumbListClasses, m as breadcrumbMoreClasses, u as breadcrumbPageClasses, f as breadcrumbSeparatorClasses, r as breadcrumbSeparators, p as breadcrumbSlashClasses, d as breadcrumbTextClasses, o as breadcrumbVariantClasses, i as breadcrumbVariants };

package/dist/components/molecules/Dropdown/DropdownItem.d.ts

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes, ReactNode } from "react";
+import type { ButtonHTMLAttributes, ReactElement, ReactNode } from "react";
 /** Layout-only — not for row colors or typography overrides. */
 export type DropdownItemLayoutClassName = string;
 export interface DropdownItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
@@ -14,10 +14,15 @@ export interface DropdownItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonE
     active?: boolean;
     /** When false, label stays full width — **Select** listbox. Default true for action menus. */
     truncate?: boolean;
+    /**
+     * Compose the row onto another element (Base UI `render`) — `render={<a href="/docs" />}` for a
+     * menu of links, such as **Breadcrumb**'s collapsed pages. `disabled` maps to `aria-disabled`.
+     */
+    render?: ReactElement;
     className?: DropdownItemLayoutClassName;
 }
 /**
  * Dropdown row — start | label | end. Used by **Select** listbox options and future menu patterns.
  */
-export declare function DropdownItem({ children, start, end, selected, active, truncate, disabled, className, type, ...props }: DropdownItemProps): import("react").JSX.Element;
+export declare function DropdownItem({ children, start, end, selected, active, truncate, disabled, className, type, render, ...props }: DropdownItemProps): import("react").JSX.Element;
 //# sourceMappingURL=DropdownItem.d.ts.map

package/dist/components/molecules/Dropdown/DropdownItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownItem.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Dropdown/DropdownItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAc7D,gEAAgE;AAChE,MAAM,MAAM,2BAA2B,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,yBAAyB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,wEAAwE;IACxE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oFAAoF;IACpF,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,2BAA2B,CAAC;CACzC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,GAAG,EACH,QAAgB,EAChB,MAAc,EACd,QAAe,EACf,QAAQ,EACR,SAAS,EACT,IAAe,EACf,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAmCnB"}
+{"version":3,"file":"DropdownItem.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Dropdown/DropdownItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAc3E,gEAAgE;AAChE,MAAM,MAAM,2BAA2B,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,yBAAyB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,wEAAwE;IACxE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oFAAoF;IACpF,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,2BAA2B,CAAC;CACzC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,GAAG,EACH,QAAgB,EAChB,MAAc,EACd,QAAe,EACf,QAAQ,EACR,SAAS,EACT,IAAe,EACf,MAAM,EACN,GAAG,KAAK,EACT,EAAE,iBAAiB,+BA2CnB"}

package/dist/components/molecules/Dropdown/DropdownItem.js

@@ -2,35 +2,51 @@
 import { cn as e } from "../../../lib/cn.js";
 import { dropdownItemButtonClasses as t, dropdownItemEndClasses as n, dropdownItemLabelClasses as r, dropdownItemLabelFullClasses as i, dropdownItemSelectedCheckClasses as a, dropdownItemStartClasses as o } from "./dropdownStyles.js";
 import { Check as s } from "lucide-react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useRender as d } from "@base-ui/react/use-render";
 //#region src/components/molecules/Dropdown/DropdownItem.tsx
-function u({ children: u, start: d, end: f, selected: p = !1, active: m = !1, truncate: h = !0, disabled: g, className: _, type: v = "button", ...y }) {
-	let b = p ? /* @__PURE__ */ c("span", {
+function f({ children: d, start: f, end: m, selected: h = !1, active: g = !1, truncate: _ = !0, disabled: v, className: y, type: b = "button", render: x, ...S }) {
+	let C = h ? /* @__PURE__ */ l("span", {
 		className: a,
 		"aria-hidden": !0,
-		children: /* @__PURE__ */ c(s, { strokeWidth: 2 })
-	}) : f == null ? null : /* @__PURE__ */ c("span", {
+		children: /* @__PURE__ */ l(s, { strokeWidth: 2 })
+	}) : m == null ? null : /* @__PURE__ */ l("span", {
 		className: n,
-		children: f
+		children: m
+	}), w = e(t, h && "hover:bg-transparent focus-visible:bg-transparent", g && !h && "bg-accent-muted", v && "pointer-events-none opacity-50", y), T = /* @__PURE__ */ u(c, { children: [
+		f == null ? null : /* @__PURE__ */ l("span", {
+			className: o,
+			"aria-hidden": !0,
+			children: f
+		}),
+		/* @__PURE__ */ l("span", {
+			className: _ ? r : i,
+			children: d
+		}),
+		C
+	] });
+	return /* @__PURE__ */ l(p, {
+		...S,
+		render: x,
+		type: b,
+		disabled: v,
+		className: w,
+		children: T
 	});
-	return /* @__PURE__ */ l("button", {
-		...y,
-		type: v,
-		disabled: g,
-		className: e(t, p && "hover:bg-transparent focus-visible:bg-transparent", m && !p && "bg-accent-muted", g && "pointer-events-none opacity-50", _),
-		children: [
-			d == null ? null : /* @__PURE__ */ c("span", {
-				className: o,
-				"aria-hidden": !0,
-				children: d
-			}),
-			/* @__PURE__ */ c("span", {
-				className: h ? r : i,
-				children: u
-			}),
-			b
-		]
+}
+function p({ render: e, type: t, disabled: n, ...r }) {
+	return d({
+		render: e,
+		defaultTagName: "button",
+		props: e ? {
+			...r,
+			"aria-disabled": n ? !0 : void 0
+		} : {
+			...r,
+			type: t,
+			disabled: n
+		}
 	});
 }
 //#endregion
-export { u as DropdownItem };
+export { f as DropdownItem };