@mastra/playground-ui 64.0.1-alpha.0 → 65.0.0-alpha.1

package/README.md

@@ -21,6 +21,14 @@ export function SaveButton() {
 }
 ```
 
+With a Tailwind build of your own, compile one sheet instead of `style.css`: import the components' stylesheet uncompiled, and `sources.css` so Tailwind emits the classes the compiled components use.
+
+```css
+@import 'tailwindcss';
+@import '@mastra/playground-ui/components.css';
+@import '@mastra/playground-ui/sources.css';
+```
+
 ### Tool approvals
 
 `ToolApproval` renders a standalone approval request in the shared activity layout: the tool name
@@ -227,7 +235,7 @@ Text fields, textareas, input groups, and the default Select, Combobox, and Date
 
 A field in an error state sets `--field-rim` and `--field-rim-focus` to `--destructive-indicator`, so the red outline shows on every surface and stays red while focused.
 
-If your app generates additional semantic utilities, import `@mastra/playground-ui/theme.css` into its Tailwind stylesheet so Tailwind can read the `@theme inline` mappings.
+If your app keeps `style.css` and generates additional semantic utilities, import `@mastra/playground-ui/theme.css` into its Tailwind stylesheet so Tailwind can read the `@theme inline` mappings. `components.css` already includes it.
 
 ### Brand colors
 
@@ -263,7 +271,7 @@ import { ProductBadge } from '@mastra/playground-ui/components/ProductBadge';
 
 Charts use hue-named roles for categories (`--chart-blue`, `--chart-blue-deep`, `--chart-amber`, `--chart-green`, `--chart-purple`, `--chart-orange`, `--chart-pink`, `--chart-red`) and `--chart-sequential-1` through `--chart-sequential-5` for ordered values. Span colors use `--span-agent`, `--span-workflow`, and the other span names. Pastel chart colors are fills, not text colors; keep labels on `--foreground` or `--muted-foreground`.
 
-Numbered `accent*` tokens, `positive1`, `negative1`, `warning1`, `notice-success/destructive/warning/info`, and `--brand-green-*` are removed. The `yellow` ramp is now `amber`: `--yellow-*`, `--yellow-soft-*`, `--badge-yellow-*`, `--chart-yellow`, and the Badge `yellow` tone are removed in favor of their `amber` names. `--color-brand-yellow` is unchanged. Status consumers use the existing `success`, `destructive`, `warning`, or `info` roles. Focus styling uses `border-focus`; categorical charts and span icons use their own roles. CodeMirror uses five local `--syntax-*` properties scoped to `.cm-editor`, not a global palette.
+Numbered `accent*` tokens, `positive1`, `negative1`, `warning1`, `notice-success/destructive/warning/info`, and `--brand-green-*` are removed. The `yellow` ramp is now `amber`: `--yellow-*`, `--yellow-soft-*`, `--badge-yellow-*`, `--chart-yellow`, and the Badge `yellow` tone are removed in favor of their `amber` names. `--color-brand-yellow` is unchanged. Status consumers use the existing `success`, `destructive`, `warning`, or `info` roles. Focus styling uses `border-focus`; categorical charts and span icons use their own roles. CodeMirror reads five `--syntax-*` roles from `theme/code.css`, not a global palette.
 
 Every badge hue (`green`, `red`, `amber`, `blue`, `purple`, `orange`, `cyan`, `pink`) is a categorical tone built from the ramps, with `--badge-{hue}-strong`, `-subtle`, `-edge`, `-foreground`, and `-indicator`. `-strong` and `-subtle` are the fills behind `emphasis="strong"` and `emphasis="subtle"`. Badge backgrounds are translucent tints, so a badge follows the surface under it when a card or row changes on hover: `--{hue}-600` at 32% (strong) and 13% (subtle) in dark mode, `--{hue}-400` at 20% and 10% in light mode. On a resting card they match the solid fills they replaced. Product avatars stay solid (`--{hue}-soft-900` / `--{hue}-soft-950` in dark mode, `--{hue}-100` / `--{hue}-50` in light mode) because they overlap each other. The soft steps keep the lightness and hue of `900`/`950` at 75% chroma, and are available as utilities such as `bg-green-soft-900`. `--badge-{hue}-indicator` colors dots, icons, and labels for a category: `--{hue}-soft-300` in dark mode and `--{hue}-soft-600` in light mode, which hold every hue at the same 0.1 chroma so no hue shouts. Use the status role with `-subtle`, `-edge`, `-subtle-foreground`, or `-indicator` for its intended job. Notice variants are unchanged. Badge status variants are `success`, `destructive`, `warning`, and `info`, for states. `green`, `red`, `amber`, and `blue` are categorical tones like `purple` and `orange`, for labels that are not states. `Badge` takes `emphasis="strong"` (the default) or `emphasis="subtle"` (a quieter tinted fill). Use `--green-*` for the shared chromatic ramp.
 

package/components.css

@@ -0,0 +1,340 @@
+/* The components' stylesheet, uncompiled: tokens, plugins, custom utilities, base styles,
+ * keyframes. An app compiles it into its own sheet after `@import 'tailwindcss'`, with
+ * `sources.css` beside it. `sources.css` is not imported here: `src/index.css` builds
+ * `dist/style.css` from this file and would scan its own output. */
+@import 'tw-animate-css';
+
+@import './theme.css';
+
+@plugin '@tailwindcss/typography';
+
+@custom-variant dark (&:is(.dark *));
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+  @media (width >= theme(--breakpoint-3xl)) {
+    max-width: none;
+  }
+  @media (width >= 1400px) {
+    max-width: 1400px;
+  }
+}
+
+/* Assembled here, not in `theme.css`, so `--surface-rim` resolves against the
+ * element wearing the utility: a custom property that referenced it would be
+ * substituted once on the root and inherited as a finished string.
+ *
+ * `--surface-tint` is the state layer of a surface that cannot carry a
+ * pseudo-element — an `<input>`. An inset shadow paints over the element's own
+ * fill and under its content, so a wash there behaves like `state-layer`'s
+ * `::before` without needing a child, and it sits below the rim layer so the
+ * boundary keeps its resting weight while the fill moves. Each utility resets
+ * it, because a custom property would otherwise inherit into every raised
+ * surface nested inside a hovered one. */
+@utility shadow-raised {
+  --surface-tint: transparent;
+
+  box-shadow:
+    var(--elevation-lip),
+    inset 0 0 0 1px var(--surface-rim),
+    inset 0 0 0 9999px var(--surface-tint),
+    var(--elevation-raised);
+}
+
+@utility shadow-input {
+  --surface-tint: transparent;
+  --surface-rim: var(--field-rim);
+
+  box-shadow:
+    var(--elevation-lip),
+    inset 0 0 0 1px var(--surface-rim),
+    inset 0 0 0 9999px var(--surface-tint),
+    var(--elevation-raised);
+}
+
+@utility shadow-inset {
+  box-shadow:
+    inset 0 1px 0 var(--inset-highlight),
+    inset 0 0 0 1px var(--inset-rim);
+}
+
+@utility shadow-rim {
+  box-shadow: inset 0 0 0 1px var(--surface-rim);
+}
+
+@utility shadow-overlay {
+  --surface-tint: transparent;
+
+  box-shadow:
+    var(--elevation-lip),
+    inset 0 0 0 1px var(--surface-rim),
+    inset 0 0 0 9999px var(--surface-tint),
+    var(--elevation-overlay);
+}
+
+/* Interaction states for a surface that already has an opaque fill.
+ *
+ * A `hover:bg-fill-subtle` on such a surface *replaces* its `background-color`,
+ * so the rung composites over the parent instead of over the surface. Measured
+ * on `bg-muted`, that lands 3 levels darker in dark and 5 lighter in light — the
+ * hover inverts across themes. Layered, the same rung is +9/-9 from whatever it
+ * sits on, in both themes, whatever the resting rung.
+ *
+ * The layer is a pseudo-element rather than a `background-image` so it can still
+ * transition, and it stops a pixel short of the edge to leave the inset rim of
+ * `shadow-raised` visible. `isolation` is what keeps a negative z-index from
+ * escaping to an ancestor's stacking context.
+ *
+ * It does not touch the rim: `--surface-rim` inherits, so brightening it here
+ * would repaint the rim of every raised surface nested inside the hovered one.
+ *
+ * This and `--surface-tint` are the same rung by two mechanisms, and both stay:
+ * the pseudo-element transitions its colour and stops a pixel short of the rim,
+ * which is what a surface with content inside it wants; the tint paints edge to
+ * edge, cannot transition (a box-shadow list transitions as a whole, so the rim
+ * and the drops would animate with it), and is the only option for an element
+ * that cannot own a child — an `<input>`. Reach for this one unless the element
+ * is a bare control. */
+@utility state-layer {
+  position: relative;
+  isolation: isolate;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 1px;
+    z-index: -1;
+    border-radius: inherit;
+    pointer-events: none;
+    transition: background-color var(--duration-fast) var(--ease-out-custom);
+  }
+
+  &:not(:disabled, [aria-disabled='true']) {
+    &:hover::before,
+    &:focus-visible::before {
+      background-color: var(--fill-subtle);
+    }
+
+    &:active::before {
+      background-color: var(--fill);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &::before {
+      transition: none;
+    }
+  }
+}
+
+/* Pulls a ScrollArea's scrollbar ends in from a rounded container's corners, keyed to the same
+   radius steps as `rounded-*`: pair `rounded-xl` with `scrollbar-inset-xl`. At 0.7 of the radius
+   the corner's curve no longer cuts into the 6px bar. An arbitrary radius takes an arbitrary
+   inset, `scrollbar-inset-[22px]`. ScrollBar reads the variable and defaults to 0. */
+@utility scrollbar-inset-* {
+  --scroll-area-scrollbar-inset: calc(--value(--radius-*, [length]) * 0.7);
+}
+
+@utility rounded-studio-frame {
+  border-radius: var(--studio-frame-radius, 1.5rem);
+}
+
+@utility rounded-studio-panel {
+  border-radius: max(0px, calc(var(--studio-frame-radius, 1.5rem) - var(--studio-frame-inset, 0.5rem)));
+}
+
+@utility rounded-tr-studio-panel {
+  border-top-right-radius: max(0px, calc(var(--studio-frame-radius, 1.5rem) - var(--studio-frame-inset, 0.5rem)));
+}
+
+@layer utilities {
+  .shiki-token {
+    color: var(--shiki-light, var(--foreground));
+    background-color: var(--shiki-light-bg, transparent);
+  }
+
+  .dark .shiki-token {
+    color: var(--shiki-dark, var(--foreground));
+    background-color: var(--shiki-dark-bg, transparent);
+  }
+}
+
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+
+  :where(code, samp, pre, .font-mono) {
+    font-size-adjust: var(--font-mono-size-adjust, none);
+  }
+
+  kbd {
+    font-size-adjust: none;
+  }
+
+  :focus-visible {
+    outline: 1px solid var(--border-focus);
+    outline-offset: 0;
+  }
+
+  body {
+    background-color: var(--sidebar);
+    color: var(--foreground);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-strong) transparent;
+  }
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--border-strong);
+    border-radius: 9999px;
+    border: 3px solid transparent;
+    background-clip: padding-box;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--border-focus);
+  }
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}
+
+@utility wrap-break-word {
+  overflow-wrap: break-word;
+}
+
+@utility time-input {
+  &::-webkit-calendar-picker-indicator {
+    @apply cursor-pointer;
+    background: url('/icons/clock.svg') no-repeat center;
+    background-size: 1em 1em;
+    filter: invert(50%);
+  }
+}
+
+.thread-viewport > [data-radix-scroll-area-content] {
+  @apply flex flex-col items-center self-stretch bg-inherit;
+}
+
+[hidden]:where(:not([hidden='until-found'])) {
+  display: none !important;
+}
+
+.unset-position {
+  position: unset;
+}
+
+.react-flow__controls-button {
+  --xy-controls-button-color: var(--foreground);
+  --xy-controls-button-color-hover: var(--foreground);
+  --xy-controls-button-background-color: var(--surface-panel);
+  --xy-controls-button-background-color-hover: var(--gray-2);
+  --xy-controls-button-border-color: transparent;
+}
+
+/* Skeleton highlight: enters off the left edge and leaves off the right before it loops. It
+   moves `translate` (what Tailwind v4's translate utilities set), so it doesn't stack on the
+   skeleton's own `-translate-x-full` start position. */
+@keyframes shimmer {
+  from {
+    translate: -100% 0;
+  }
+
+  to {
+    translate: 100% 0;
+  }
+}
+
+/* Chart ghost sweep, in SVG user units (a 0-100 viewBox): a 40-unit band of light from off the
+   left edge to off the right, on the same 2s loop as the skeleton shimmer. */
+@keyframes chart-ghost-sweep {
+  from {
+    transform: translateX(-40px);
+  }
+
+  to {
+    transform: translateX(140px);
+  }
+}
+
+@keyframes click-ripple {
+  0% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+.animate-click-ripple {
+  animation: click-ripple 300ms ease-out forwards;
+}
+
+@keyframes fade-row-highlight {
+  0% {
+    background-color: var(--fill-hover);
+  }
+
+  100% {
+    background-color: transparent;
+  }
+}
+
+.animate-row-highlight {
+  animation: fade-row-highlight 2000ms ease-out forwards;
+}
+
+/* Sort arrows are "drawn" in their pointing direction: asc reveals from the
+   bottom up, desc from the top down. */
+@keyframes sort-arrow-reveal-up {
+  0% {
+    clip-path: inset(100% 0 0 0);
+    transform: translateY(20%);
+  }
+
+  100% {
+    clip-path: inset(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes sort-arrow-reveal-down {
+  0% {
+    clip-path: inset(0 0 100% 0);
+    transform: translateY(-20%);
+  }
+
+  100% {
+    clip-path: inset(0);
+    transform: translateY(0);
+  }
+}
+
+.animate-sort-arrow-up {
+  animation: sort-arrow-reveal-up 200ms var(--ease-out-custom) both;
+}
+
+.animate-sort-arrow-down {
+  animation: sort-arrow-reveal-down 200ms var(--ease-out-custom) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-sort-arrow-up,
+  .animate-sort-arrow-down {
+    animation: none;
+  }
+}

package/dist/code-DJReJPSX.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"code-DJReJPSX.cjs","sources":["../src/ds/components/Code/use-highlight.ts","../src/ds/components/Code/code.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { CSSProperties } from 'react';\nimport type { ThemedToken } from 'shiki/core';\nimport { useDebounce } from 'use-debounce';\n\nimport { highlight } from '../CodeEditor/highlight';\n\nexport interface Highlighted {\n  code: string;\n  lang: string;\n  tokens: ThemedToken[][];\n}\n\nconst HIGHLIGHT_SAMPLE_INTERVAL_MS = 75;\n\n/** Tokens land a pass behind the code, so the value may still describe the previous code. */\nexport function useHighlight(code: string, lang: string | undefined): Highlighted | null {\n  const [highlighted, setHighlighted] = useState<Highlighted | null>(null);\n  // maxWait equal to the delay turns the debounce into a throttle.\n  const [sampledCode, sampler] = useDebounce(code, HIGHLIGHT_SAMPLE_INTERVAL_MS, {\n    leading: true,\n    maxWait: HIGHLIGHT_SAMPLE_INTERVAL_MS,\n  });\n\n  // With `leading`, use-debounce's pending timer still calls setState after unmount.\n  useEffect(() => () => sampler.cancel(), [sampler]);\n\n  useEffect(() => {\n    if (!lang) return;\n\n    let cancelled = false;\n\n    void highlight(sampledCode, lang)\n      .then(tokens => {\n        if (!cancelled && tokens?.length) setHighlighted({ code: sampledCode, lang, tokens });\n      })\n      .catch(() => {});\n\n    return () => {\n      cancelled = true;\n    };\n  }, [sampledCode, lang]);\n\n  return lang ? highlighted : null;\n}\n\nexport function tokenStyle(token: ThemedToken): CSSProperties | undefined {\n  if (token.htmlStyle && typeof token.htmlStyle === 'object') {\n    return token.htmlStyle as CSSProperties;\n  }\n\n  return token.color ? { color: token.color } : undefined;\n}\n","import * as React from 'react';\n\nimport { tokenStyle, useHighlight } from './use-highlight';\nimport type { Highlighted } from './use-highlight';\n\nexport interface CodeProps extends React.HTMLAttributes<HTMLPreElement> {\n  code: string;\n  lang?: string;\n  /** Per-line class, e.g. for diff or search highlighting. When set, every line is wrapped in a `[data-line]` span. */\n  lineClassName?: (lineIndex: number, lineText: string) => string | undefined;\n}\n\n/** Colors from an earlier pass still hold when the new code only appends to the old. */\nfunction usableHighlight(highlighted: Highlighted | null, code: string, lang?: string): Highlighted | null {\n  if (!highlighted || highlighted.lang !== lang) return null;\n  return code.startsWith(highlighted.code) ? highlighted : null;\n}\n\n/**\n * Low-level shiki token renderer shared by `CodeBlock` and `MarkdownRenderer`.\n * Dual-theme colors stay as `--shiki-light` / `--shiki-dark` CSS variables on\n * each token span; the `.shiki-token` class (index.css) picks the variant from\n * the `.dark` root class, so theme switching is pure CSS — no ThemeProvider\n * required. Renders plain text while highlighting is pending or when the\n * language is missing/unknown.\n *\n * A streaming fence re-renders on every delta while highlighting stays a sample\n * behind. Dropping the previous tokens each time would strobe the whole block\n * between colored and plain, so the settled prefix keeps its colors and only\n * the newly arrived tail waits, uncolored, for the next pass.\n */\nexport const Code = React.memo(function Code({ code, lang, lineClassName, ...props }: CodeProps) {\n  const highlighted = useHighlight(code, lang);\n\n  const usable = usableHighlight(highlighted, code, lang);\n  if (!usable) {\n    if (!lineClassName) return <pre {...props}>{code}</pre>;\n    const lines = code.split('\\n');\n    return (\n      <pre {...props}>\n        {lines.map((text, i) => (\n          <React.Fragment key={i}>\n            <span data-line={i} className={lineClassName(i, text)}>\n              {text}\n            </span>\n            {i !== lines.length - 1 && '\\n'}\n          </React.Fragment>\n        ))}\n      </pre>\n    );\n  }\n\n  const tail = code.slice(usable.code.length);\n  let codeOffset = 0;\n\n  return (\n    <pre {...props}>\n      <code className=\"font-[inherit]\">\n        {usable.tokens.map((line, lineIndex) => {\n          const lineOffset = codeOffset;\n          let tokenOffset = lineOffset;\n          const tokenSpans = line.map(token => {\n            const key = tokenOffset;\n            tokenOffset += token.content.length;\n\n            return (\n              <span key={key} className=\"shiki-token\" style={tokenStyle(token)}>\n                {token.content}\n              </span>\n            );\n          });\n\n          codeOffset = tokenOffset + 1;\n\n          return (\n            <React.Fragment key={lineOffset}>\n              {lineClassName ? (\n                <span\n                  data-line={lineIndex}\n                  className={lineClassName(lineIndex, line.map(token => token.content).join(''))}\n                >\n                  {tokenSpans}\n                </span>\n              ) : (\n                <span>{tokenSpans}</span>\n              )}\n              {lineIndex !== usable.tokens.length - 1 && '\\n'}\n            </React.Fragment>\n          );\n        })}\n        {tail}\n      </code>\n    </pre>\n  );\n});\n"],"names":["useState","useDebounce","useEffect","highlight","React","Code","jsx","jsxs"],"mappings":"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"}
+{"version":3,"file":"code-DJReJPSX.cjs","sources":["../src/ds/components/Code/use-highlight.ts","../src/ds/components/Code/code.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { CSSProperties } from 'react';\nimport type { ThemedToken } from 'shiki/core';\nimport { useDebounce } from 'use-debounce';\n\nimport { highlight } from '../CodeEditor/highlight';\n\nexport interface Highlighted {\n  code: string;\n  lang: string;\n  tokens: ThemedToken[][];\n}\n\nconst HIGHLIGHT_SAMPLE_INTERVAL_MS = 75;\n\n/** Tokens land a pass behind the code, so the value may still describe the previous code. */\nexport function useHighlight(code: string, lang: string | undefined): Highlighted | null {\n  const [highlighted, setHighlighted] = useState<Highlighted | null>(null);\n  // maxWait equal to the delay turns the debounce into a throttle.\n  const [sampledCode, sampler] = useDebounce(code, HIGHLIGHT_SAMPLE_INTERVAL_MS, {\n    leading: true,\n    maxWait: HIGHLIGHT_SAMPLE_INTERVAL_MS,\n  });\n\n  // With `leading`, use-debounce's pending timer still calls setState after unmount.\n  useEffect(() => () => sampler.cancel(), [sampler]);\n\n  useEffect(() => {\n    if (!lang) return;\n\n    let cancelled = false;\n\n    void highlight(sampledCode, lang)\n      .then(tokens => {\n        if (!cancelled && tokens?.length) setHighlighted({ code: sampledCode, lang, tokens });\n      })\n      .catch(() => {});\n\n    return () => {\n      cancelled = true;\n    };\n  }, [sampledCode, lang]);\n\n  return lang ? highlighted : null;\n}\n\nexport function tokenStyle(token: ThemedToken): CSSProperties | undefined {\n  if (token.htmlStyle && typeof token.htmlStyle === 'object') {\n    return token.htmlStyle as CSSProperties;\n  }\n\n  return token.color ? { color: token.color } : undefined;\n}\n","import * as React from 'react';\n\nimport { tokenStyle, useHighlight } from './use-highlight';\nimport type { Highlighted } from './use-highlight';\n\nexport interface CodeProps extends React.HTMLAttributes<HTMLPreElement> {\n  code: string;\n  lang?: string;\n  /** Per-line class, e.g. for diff or search highlighting. When set, every line is wrapped in a `[data-line]` span. */\n  lineClassName?: (lineIndex: number, lineText: string) => string | undefined;\n}\n\n/** Colors from an earlier pass still hold when the new code only appends to the old. */\nfunction usableHighlight(highlighted: Highlighted | null, code: string, lang?: string): Highlighted | null {\n  if (!highlighted || highlighted.lang !== lang) return null;\n  return code.startsWith(highlighted.code) ? highlighted : null;\n}\n\n/**\n * Low-level shiki token renderer shared by `CodeBlock` and `MarkdownRenderer`.\n * Dual-theme colors stay as `--shiki-light` / `--shiki-dark` CSS variables on\n * each token span; the `.shiki-token` class (components.css) picks the variant from\n * the `.dark` root class, so theme switching is pure CSS — no ThemeProvider\n * required. Renders plain text while highlighting is pending or when the\n * language is missing/unknown.\n *\n * A streaming fence re-renders on every delta while highlighting stays a sample\n * behind. Dropping the previous tokens each time would strobe the whole block\n * between colored and plain, so the settled prefix keeps its colors and only\n * the newly arrived tail waits, uncolored, for the next pass.\n */\nexport const Code = React.memo(function Code({ code, lang, lineClassName, ...props }: CodeProps) {\n  const highlighted = useHighlight(code, lang);\n\n  const usable = usableHighlight(highlighted, code, lang);\n  if (!usable) {\n    if (!lineClassName) return <pre {...props}>{code}</pre>;\n    const lines = code.split('\\n');\n    return (\n      <pre {...props}>\n        {lines.map((text, i) => (\n          <React.Fragment key={i}>\n            <span data-line={i} className={lineClassName(i, text)}>\n              {text}\n            </span>\n            {i !== lines.length - 1 && '\\n'}\n          </React.Fragment>\n        ))}\n      </pre>\n    );\n  }\n\n  const tail = code.slice(usable.code.length);\n  let codeOffset = 0;\n\n  return (\n    <pre {...props}>\n      <code className=\"font-[inherit]\">\n        {usable.tokens.map((line, lineIndex) => {\n          const lineOffset = codeOffset;\n          let tokenOffset = lineOffset;\n          const tokenSpans = line.map(token => {\n            const key = tokenOffset;\n            tokenOffset += token.content.length;\n\n            return (\n              <span key={key} className=\"shiki-token\" style={tokenStyle(token)}>\n                {token.content}\n              </span>\n            );\n          });\n\n          codeOffset = tokenOffset + 1;\n\n          return (\n            <React.Fragment key={lineOffset}>\n              {lineClassName ? (\n                <span\n                  data-line={lineIndex}\n                  className={lineClassName(lineIndex, line.map(token => token.content).join(''))}\n                >\n                  {tokenSpans}\n                </span>\n              ) : (\n                <span>{tokenSpans}</span>\n              )}\n              {lineIndex !== usable.tokens.length - 1 && '\\n'}\n            </React.Fragment>\n          );\n        })}\n        {tail}\n      </code>\n    </pre>\n  );\n});\n"],"names":["useState","useDebounce","useEffect","highlight","React","Code","jsx","jsxs"],"mappings":"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"}

package/dist/code-DLuATvYu.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-DLuATvYu.js","sources":["../src/ds/components/Code/use-highlight.ts","../src/ds/components/Code/code.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { CSSProperties } from 'react';\nimport type { ThemedToken } from 'shiki/core';\nimport { useDebounce } from 'use-debounce';\n\nimport { highlight } from '../CodeEditor/highlight';\n\nexport interface Highlighted {\n  code: string;\n  lang: string;\n  tokens: ThemedToken[][];\n}\n\nconst HIGHLIGHT_SAMPLE_INTERVAL_MS = 75;\n\n/** Tokens land a pass behind the code, so the value may still describe the previous code. */\nexport function useHighlight(code: string, lang: string | undefined): Highlighted | null {\n  const [highlighted, setHighlighted] = useState<Highlighted | null>(null);\n  // maxWait equal to the delay turns the debounce into a throttle.\n  const [sampledCode, sampler] = useDebounce(code, HIGHLIGHT_SAMPLE_INTERVAL_MS, {\n    leading: true,\n    maxWait: HIGHLIGHT_SAMPLE_INTERVAL_MS,\n  });\n\n  // With `leading`, use-debounce's pending timer still calls setState after unmount.\n  useEffect(() => () => sampler.cancel(), [sampler]);\n\n  useEffect(() => {\n    if (!lang) return;\n\n    let cancelled = false;\n\n    void highlight(sampledCode, lang)\n      .then(tokens => {\n        if (!cancelled && tokens?.length) setHighlighted({ code: sampledCode, lang, tokens });\n      })\n      .catch(() => {});\n\n    return () => {\n      cancelled = true;\n    };\n  }, [sampledCode, lang]);\n\n  return lang ? highlighted : null;\n}\n\nexport function tokenStyle(token: ThemedToken): CSSProperties | undefined {\n  if (token.htmlStyle && typeof token.htmlStyle === 'object') {\n    return token.htmlStyle as CSSProperties;\n  }\n\n  return token.color ? { color: token.color } : undefined;\n}\n","import * as React from 'react';\n\nimport { tokenStyle, useHighlight } from './use-highlight';\nimport type { Highlighted } from './use-highlight';\n\nexport interface CodeProps extends React.HTMLAttributes<HTMLPreElement> {\n  code: string;\n  lang?: string;\n  /** Per-line class, e.g. for diff or search highlighting. When set, every line is wrapped in a `[data-line]` span. */\n  lineClassName?: (lineIndex: number, lineText: string) => string | undefined;\n}\n\n/** Colors from an earlier pass still hold when the new code only appends to the old. */\nfunction usableHighlight(highlighted: Highlighted | null, code: string, lang?: string): Highlighted | null {\n  if (!highlighted || highlighted.lang !== lang) return null;\n  return code.startsWith(highlighted.code) ? highlighted : null;\n}\n\n/**\n * Low-level shiki token renderer shared by `CodeBlock` and `MarkdownRenderer`.\n * Dual-theme colors stay as `--shiki-light` / `--shiki-dark` CSS variables on\n * each token span; the `.shiki-token` class (index.css) picks the variant from\n * the `.dark` root class, so theme switching is pure CSS — no ThemeProvider\n * required. Renders plain text while highlighting is pending or when the\n * language is missing/unknown.\n *\n * A streaming fence re-renders on every delta while highlighting stays a sample\n * behind. Dropping the previous tokens each time would strobe the whole block\n * between colored and plain, so the settled prefix keeps its colors and only\n * the newly arrived tail waits, uncolored, for the next pass.\n */\nexport const Code = React.memo(function Code({ code, lang, lineClassName, ...props }: CodeProps) {\n  const highlighted = useHighlight(code, lang);\n\n  const usable = usableHighlight(highlighted, code, lang);\n  if (!usable) {\n    if (!lineClassName) return <pre {...props}>{code}</pre>;\n    const lines = code.split('\\n');\n    return (\n      <pre {...props}>\n        {lines.map((text, i) => (\n          <React.Fragment key={i}>\n            <span data-line={i} className={lineClassName(i, text)}>\n              {text}\n            </span>\n            {i !== lines.length - 1 && '\\n'}\n          </React.Fragment>\n        ))}\n      </pre>\n    );\n  }\n\n  const tail = code.slice(usable.code.length);\n  let codeOffset = 0;\n\n  return (\n    <pre {...props}>\n      <code className=\"font-[inherit]\">\n        {usable.tokens.map((line, lineIndex) => {\n          const lineOffset = codeOffset;\n          let tokenOffset = lineOffset;\n          const tokenSpans = line.map(token => {\n            const key = tokenOffset;\n            tokenOffset += token.content.length;\n\n            return (\n              <span key={key} className=\"shiki-token\" style={tokenStyle(token)}>\n                {token.content}\n              </span>\n            );\n          });\n\n          codeOffset = tokenOffset + 1;\n\n          return (\n            <React.Fragment key={lineOffset}>\n              {lineClassName ? (\n                <span\n                  data-line={lineIndex}\n                  className={lineClassName(lineIndex, line.map(token => token.content).join(''))}\n                >\n                  {tokenSpans}\n                </span>\n              ) : (\n                <span>{tokenSpans}</span>\n              )}\n              {lineIndex !== usable.tokens.length - 1 && '\\n'}\n            </React.Fragment>\n          );\n        })}\n        {tail}\n      </code>\n    </pre>\n  );\n});\n"],"names":["Code"],"mappings":"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"}
+{"version":3,"file":"code-DLuATvYu.js","sources":["../src/ds/components/Code/use-highlight.ts","../src/ds/components/Code/code.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { CSSProperties } from 'react';\nimport type { ThemedToken } from 'shiki/core';\nimport { useDebounce } from 'use-debounce';\n\nimport { highlight } from '../CodeEditor/highlight';\n\nexport interface Highlighted {\n  code: string;\n  lang: string;\n  tokens: ThemedToken[][];\n}\n\nconst HIGHLIGHT_SAMPLE_INTERVAL_MS = 75;\n\n/** Tokens land a pass behind the code, so the value may still describe the previous code. */\nexport function useHighlight(code: string, lang: string | undefined): Highlighted | null {\n  const [highlighted, setHighlighted] = useState<Highlighted | null>(null);\n  // maxWait equal to the delay turns the debounce into a throttle.\n  const [sampledCode, sampler] = useDebounce(code, HIGHLIGHT_SAMPLE_INTERVAL_MS, {\n    leading: true,\n    maxWait: HIGHLIGHT_SAMPLE_INTERVAL_MS,\n  });\n\n  // With `leading`, use-debounce's pending timer still calls setState after unmount.\n  useEffect(() => () => sampler.cancel(), [sampler]);\n\n  useEffect(() => {\n    if (!lang) return;\n\n    let cancelled = false;\n\n    void highlight(sampledCode, lang)\n      .then(tokens => {\n        if (!cancelled && tokens?.length) setHighlighted({ code: sampledCode, lang, tokens });\n      })\n      .catch(() => {});\n\n    return () => {\n      cancelled = true;\n    };\n  }, [sampledCode, lang]);\n\n  return lang ? highlighted : null;\n}\n\nexport function tokenStyle(token: ThemedToken): CSSProperties | undefined {\n  if (token.htmlStyle && typeof token.htmlStyle === 'object') {\n    return token.htmlStyle as CSSProperties;\n  }\n\n  return token.color ? { color: token.color } : undefined;\n}\n","import * as React from 'react';\n\nimport { tokenStyle, useHighlight } from './use-highlight';\nimport type { Highlighted } from './use-highlight';\n\nexport interface CodeProps extends React.HTMLAttributes<HTMLPreElement> {\n  code: string;\n  lang?: string;\n  /** Per-line class, e.g. for diff or search highlighting. When set, every line is wrapped in a `[data-line]` span. */\n  lineClassName?: (lineIndex: number, lineText: string) => string | undefined;\n}\n\n/** Colors from an earlier pass still hold when the new code only appends to the old. */\nfunction usableHighlight(highlighted: Highlighted | null, code: string, lang?: string): Highlighted | null {\n  if (!highlighted || highlighted.lang !== lang) return null;\n  return code.startsWith(highlighted.code) ? highlighted : null;\n}\n\n/**\n * Low-level shiki token renderer shared by `CodeBlock` and `MarkdownRenderer`.\n * Dual-theme colors stay as `--shiki-light` / `--shiki-dark` CSS variables on\n * each token span; the `.shiki-token` class (components.css) picks the variant from\n * the `.dark` root class, so theme switching is pure CSS — no ThemeProvider\n * required. Renders plain text while highlighting is pending or when the\n * language is missing/unknown.\n *\n * A streaming fence re-renders on every delta while highlighting stays a sample\n * behind. Dropping the previous tokens each time would strobe the whole block\n * between colored and plain, so the settled prefix keeps its colors and only\n * the newly arrived tail waits, uncolored, for the next pass.\n */\nexport const Code = React.memo(function Code({ code, lang, lineClassName, ...props }: CodeProps) {\n  const highlighted = useHighlight(code, lang);\n\n  const usable = usableHighlight(highlighted, code, lang);\n  if (!usable) {\n    if (!lineClassName) return <pre {...props}>{code}</pre>;\n    const lines = code.split('\\n');\n    return (\n      <pre {...props}>\n        {lines.map((text, i) => (\n          <React.Fragment key={i}>\n            <span data-line={i} className={lineClassName(i, text)}>\n              {text}\n            </span>\n            {i !== lines.length - 1 && '\\n'}\n          </React.Fragment>\n        ))}\n      </pre>\n    );\n  }\n\n  const tail = code.slice(usable.code.length);\n  let codeOffset = 0;\n\n  return (\n    <pre {...props}>\n      <code className=\"font-[inherit]\">\n        {usable.tokens.map((line, lineIndex) => {\n          const lineOffset = codeOffset;\n          let tokenOffset = lineOffset;\n          const tokenSpans = line.map(token => {\n            const key = tokenOffset;\n            tokenOffset += token.content.length;\n\n            return (\n              <span key={key} className=\"shiki-token\" style={tokenStyle(token)}>\n                {token.content}\n              </span>\n            );\n          });\n\n          codeOffset = tokenOffset + 1;\n\n          return (\n            <React.Fragment key={lineOffset}>\n              {lineClassName ? (\n                <span\n                  data-line={lineIndex}\n                  className={lineClassName(lineIndex, line.map(token => token.content).join(''))}\n                >\n                  {tokenSpans}\n                </span>\n              ) : (\n                <span>{tokenSpans}</span>\n              )}\n              {lineIndex !== usable.tokens.length - 1 && '\\n'}\n            </React.Fragment>\n          );\n        })}\n        {tail}\n      </code>\n    </pre>\n  );\n});\n"],"names":["Code"],"mappings":"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"}

package/dist/components/Breadcrumb.cjs.js

@@ -18,6 +18,7 @@ const CrumbSkeleton = (props) => /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleto
 const Crumb = ({
   className,
   as,
+  to,
   isCurrent,
   action,
   switcher,
@@ -27,7 +28,7 @@ const Crumb = ({
   ...props
 }) => {
   const Root = as || "span";
-  const switcherCoversCrumb = Boolean(isCurrent && switcher);
+  const switcherCoversCrumb = Boolean(switcher && (isCurrent || !to));
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "li",
@@ -49,9 +50,10 @@ const Crumb = ({
                 primitives_controlSize.controlSizeClasses.sm,
                 primitives_transitions.controlStateColorTransition,
                 // Long labels truncate: the current crumb gets more room than nav crumbs.
-                isCurrent ? "max-w-xs cursor-default text-foreground" : utils_cn.cn(primitives_typography.quietTextHover, "max-w-48 cursor-pointer hover:bg-fill-subtle active:bg-fill"),
+                isCurrent ? "max-w-xs cursor-default text-foreground" : switcherCoversCrumb ? utils_cn.cn(primitives_typography.quietTextHoverInGroup, "max-w-48") : utils_cn.cn(primitives_typography.quietTextHover, "max-w-48 cursor-pointer hover:bg-fill-subtle active:bg-fill"),
                 className
               ),
+              to,
               ...props,
               children: [
                 icon && /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/Breadcrumb.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.cjs.js","sources":["../../src/ds/components/Breadcrumb/Breadcrumb.tsx","../../src/ds/components/Breadcrumb/crumb-switcher.ts"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { SlashIcon } from '../../icons/SlashIcon';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nexport interface BreadcrumbProps {\n  children?: React.ReactNode;\n  label?: string;\n  className?: string;\n  listClassName?: string;\n}\n\nexport const Breadcrumb = ({ children, label, className, listClassName }: BreadcrumbProps) => {\n  return (\n    <nav aria-label={label} className={className}>\n      <ol className={cn('flex items-center gap-0.5', listClassName)}>{children}</ol>\n    </nav>\n  );\n};\n\nexport interface CrumbProps {\n  isCurrent?: boolean;\n  as: React.ElementType;\n  className?: string;\n  to?: string;\n  prefetch?: boolean | null;\n  children?: React.ReactNode;\n  /** Prefix icon (bare SVG). The crumb wraps it in `<Icon>` and aligns it like a Button adornment. */\n  icon?: React.ReactNode;\n  /** Renders `CrumbSkeleton` in place of the label. */\n  isLoading?: boolean;\n  /**\n   * Sibling control rendered next to the label (never inside it). Expected to be a\n   * `size=\"icon-sm\"` ghost control, e.g. a CopyButton. Entity switchers go in `switcher`.\n   */\n  action?: React.ReactNode;\n  /**\n   * Entity switcher rendered next to the label; spread `crumbSwitcherTriggerProps` on it.\n   * On the current crumb there is nowhere to navigate, so its hit area covers the whole crumb.\n   */\n  switcher?: React.ReactNode;\n  'data-testid'?: string;\n}\n\nexport const CrumbSkeleton = (props: { 'data-testid'?: string }) => <Skeleton className=\"h-3 w-24\" {...props} />;\n\nexport const Crumb = ({\n  className,\n  as,\n  isCurrent,\n  action,\n  switcher,\n  icon,\n  isLoading,\n  children,\n  ...props\n}: CrumbProps) => {\n  const Root = as || 'span';\n  const switcherCoversCrumb = Boolean(isCurrent && switcher);\n\n  return (\n    <>\n      <li\n        className={cn(\n          'group flex h-control-sm min-w-0 items-center',\n          isCurrent ? 'shrink' : 'shrink-0',\n          switcherCoversCrumb &&\n            'relative rounded-full has-[[data-slot=crumb-switcher]_[data-popup-open]]:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:hover:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:active:bg-fill',\n        )}\n      >\n        <Root\n          aria-current={isCurrent ? 'page' : undefined}\n          className={cn(\n            // Same box as `buttonVariants({ variant: 'ghost', size: 'sm' })` so a label and an\n            // icon-sm control sitting next to it share height, radius, padding and colors.\n            'inline-flex min-w-0 items-center gap-2 overflow-hidden rounded-full px-[.9em]',\n            controlSizeClasses.sm,\n            controlStateColorTransition,\n            // Long labels truncate: the current crumb gets more room than nav crumbs.\n            isCurrent\n              ? 'max-w-xs cursor-default text-foreground'\n              : cn(quietTextHover, 'max-w-48 cursor-pointer hover:bg-fill-subtle active:bg-fill'),\n            className,\n          )}\n          {...props}\n        >\n          {icon && (\n            <Icon\n              className={cn(\n                '-ml-[.3em] shrink-0 opacity-50 group-hover:opacity-100',\n                'transition-opacity duration-normal ease-out-custom',\n              )}\n            >\n              {icon}\n            </Icon>\n          )}\n          {isLoading ? (\n            <CrumbSkeleton />\n          ) : (\n            // `text-overflow` needs a block container, so the label truncates in its\n            // own box rather than on the flex Root. Works for plain strings and for\n            // components that resolve to a string (route-header `Component` crumbs).\n            <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n          )}\n        </Root>\n        {switcher && (\n          <span\n            data-slot=\"crumb-switcher\"\n            className={cn(\n              '-ml-1 flex h-control-sm shrink-0 items-center',\n              switcherCoversCrumb &&\n                '[&_button]:bg-transparent! [&_button:enabled]:after:absolute [&_button:enabled]:after:inset-0 [&_button:enabled]:after:rounded-full',\n            )}\n          >\n            {switcher}\n          </span>\n        )}\n        {action && <span className=\"-ml-1 flex h-control-sm shrink-0 items-center\">{action}</span>}\n      </li>\n      {!isCurrent && (\n        <li role=\"separator\" className=\"flex h-full items-center\">\n          <Icon className=\"text-placeholder\">\n            <SlashIcon />\n          </Icon>\n        </li>\n      )}\n    </>\n  );\n};\n","import type { ComboboxProps } from '../Combobox';\n\nexport const crumbSwitcherTriggerProps = {\n  variant: 'ghost',\n  size: 'icon-sm',\n  align: 'end',\n} as const satisfies Pick<ComboboxProps, 'variant' | 'size' | 'align'>;\n"],"names":["jsx","cn","Skeleton","jsxs","Fragment","controlSizeClasses","controlStateColorTransition","quietTextHover","Icon","SlashIcon"],"mappings":"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"}
+{"version":3,"file":"Breadcrumb.cjs.js","sources":["../../src/ds/components/Breadcrumb/Breadcrumb.tsx","../../src/ds/components/Breadcrumb/crumb-switcher.ts"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { SlashIcon } from '../../icons/SlashIcon';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover, quietTextHoverInGroup } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nexport interface BreadcrumbProps {\n  children?: React.ReactNode;\n  label?: string;\n  className?: string;\n  listClassName?: string;\n}\n\nexport const Breadcrumb = ({ children, label, className, listClassName }: BreadcrumbProps) => {\n  return (\n    <nav aria-label={label} className={className}>\n      <ol className={cn('flex items-center gap-0.5', listClassName)}>{children}</ol>\n    </nav>\n  );\n};\n\nexport interface CrumbProps {\n  isCurrent?: boolean;\n  as: React.ElementType;\n  className?: string;\n  to?: string;\n  prefetch?: boolean | null;\n  children?: React.ReactNode;\n  /** Prefix icon (bare SVG). The crumb wraps it in `<Icon>` and aligns it like a Button adornment. */\n  icon?: React.ReactNode;\n  /** Renders `CrumbSkeleton` in place of the label. */\n  isLoading?: boolean;\n  /**\n   * Sibling control rendered next to the label (never inside it). Expected to be a\n   * `size=\"icon-sm\"` ghost control, e.g. a CopyButton. Entity switchers go in `switcher`.\n   */\n  action?: React.ReactNode;\n  /**\n   * Entity switcher rendered next to the label; spread `crumbSwitcherTriggerProps` on it.\n   * When the crumb doesn't navigate (current crumb, or no `to`), its hit area covers the whole crumb.\n   */\n  switcher?: React.ReactNode;\n  'data-testid'?: string;\n}\n\nexport const CrumbSkeleton = (props: { 'data-testid'?: string }) => <Skeleton className=\"h-3 w-24\" {...props} />;\n\nexport const Crumb = ({\n  className,\n  as,\n  to,\n  isCurrent,\n  action,\n  switcher,\n  icon,\n  isLoading,\n  children,\n  ...props\n}: CrumbProps) => {\n  const Root = as || 'span';\n  const switcherCoversCrumb = Boolean(switcher && (isCurrent || !to));\n\n  return (\n    <>\n      <li\n        className={cn(\n          'group flex h-control-sm min-w-0 items-center',\n          isCurrent ? 'shrink' : 'shrink-0',\n          switcherCoversCrumb &&\n            'relative rounded-full has-[[data-slot=crumb-switcher]_[data-popup-open]]:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:hover:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:active:bg-fill',\n        )}\n      >\n        <Root\n          aria-current={isCurrent ? 'page' : undefined}\n          className={cn(\n            // Same box as `buttonVariants({ variant: 'ghost', size: 'sm' })` so a label and an\n            // icon-sm control sitting next to it share height, radius, padding and colors.\n            'inline-flex min-w-0 items-center gap-2 overflow-hidden rounded-full px-[.9em]',\n            controlSizeClasses.sm,\n            controlStateColorTransition,\n            // Long labels truncate: the current crumb gets more room than nav crumbs.\n            isCurrent\n              ? 'max-w-xs cursor-default text-foreground'\n              : switcherCoversCrumb\n                ? cn(quietTextHoverInGroup, 'max-w-48')\n                : cn(quietTextHover, 'max-w-48 cursor-pointer hover:bg-fill-subtle active:bg-fill'),\n            className,\n          )}\n          to={to}\n          {...props}\n        >\n          {icon && (\n            <Icon\n              className={cn(\n                '-ml-[.3em] shrink-0 opacity-50 group-hover:opacity-100',\n                'transition-opacity duration-normal ease-out-custom',\n              )}\n            >\n              {icon}\n            </Icon>\n          )}\n          {isLoading ? (\n            <CrumbSkeleton />\n          ) : (\n            // `text-overflow` needs a block container, so the label truncates in its\n            // own box rather than on the flex Root. Works for plain strings and for\n            // components that resolve to a string (route-header `Component` crumbs).\n            <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n          )}\n        </Root>\n        {switcher && (\n          <span\n            data-slot=\"crumb-switcher\"\n            className={cn(\n              '-ml-1 flex h-control-sm shrink-0 items-center',\n              switcherCoversCrumb &&\n                '[&_button]:bg-transparent! [&_button:enabled]:after:absolute [&_button:enabled]:after:inset-0 [&_button:enabled]:after:rounded-full',\n            )}\n          >\n            {switcher}\n          </span>\n        )}\n        {action && <span className=\"-ml-1 flex h-control-sm shrink-0 items-center\">{action}</span>}\n      </li>\n      {!isCurrent && (\n        <li role=\"separator\" className=\"flex h-full items-center\">\n          <Icon className=\"text-placeholder\">\n            <SlashIcon />\n          </Icon>\n        </li>\n      )}\n    </>\n  );\n};\n","import type { ComboboxProps } from '../Combobox';\n\nexport const crumbSwitcherTriggerProps = {\n  variant: 'ghost',\n  size: 'icon-sm',\n  align: 'end',\n} as const satisfies Pick<ComboboxProps, 'variant' | 'size' | 'align'>;\n"],"names":["jsx","cn","Skeleton","jsxs","Fragment","controlSizeClasses","controlStateColorTransition","quietTextHoverInGroup","quietTextHover","Icon","SlashIcon"],"mappings":"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"}

package/dist/components/Breadcrumb.es.js

@@ -4,7 +4,7 @@ import { SlashIcon } from '../icons/SlashIcon.es.js';
 import { S as Skeleton } from '../skeleton-Q4fDAXcz.js';
 import { controlSizeClasses } from '../primitives/control-size.es.js';
 import { controlStateColorTransition } from '../primitives/transitions.es.js';
-import { quietTextHover } from '../primitives/typography.es.js';
+import { quietTextHoverInGroup, quietTextHover } from '../primitives/typography.es.js';
 import { c as cn } from '../cn-CQUhN5Jx.js';
 
 const Breadcrumb = ({ children, label, className, listClassName }) => {
@@ -14,6 +14,7 @@ const CrumbSkeleton = (props) => /* @__PURE__ */ jsx(Skeleton, { className: "h-3
 const Crumb = ({
   className,
   as,
+  to,
   isCurrent,
   action,
   switcher,
@@ -23,7 +24,7 @@ const Crumb = ({
   ...props
 }) => {
   const Root = as || "span";
-  const switcherCoversCrumb = Boolean(isCurrent && switcher);
+  const switcherCoversCrumb = Boolean(switcher && (isCurrent || !to));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "li",
@@ -45,9 +46,10 @@ const Crumb = ({
                 controlSizeClasses.sm,
                 controlStateColorTransition,
                 // Long labels truncate: the current crumb gets more room than nav crumbs.
-                isCurrent ? "max-w-xs cursor-default text-foreground" : cn(quietTextHover, "max-w-48 cursor-pointer hover:bg-fill-subtle active:bg-fill"),
+                isCurrent ? "max-w-xs cursor-default text-foreground" : switcherCoversCrumb ? cn(quietTextHoverInGroup, "max-w-48") : cn(quietTextHover, "max-w-48 cursor-pointer hover:bg-fill-subtle active:bg-fill"),
                 className
               ),
+              to,
               ...props,
               children: [
                 icon && /* @__PURE__ */ jsx(

package/dist/components/Breadcrumb.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.es.js","sources":["../../src/ds/components/Breadcrumb/Breadcrumb.tsx","../../src/ds/components/Breadcrumb/crumb-switcher.ts"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { SlashIcon } from '../../icons/SlashIcon';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nexport interface BreadcrumbProps {\n  children?: React.ReactNode;\n  label?: string;\n  className?: string;\n  listClassName?: string;\n}\n\nexport const Breadcrumb = ({ children, label, className, listClassName }: BreadcrumbProps) => {\n  return (\n    <nav aria-label={label} className={className}>\n      <ol className={cn('flex items-center gap-0.5', listClassName)}>{children}</ol>\n    </nav>\n  );\n};\n\nexport interface CrumbProps {\n  isCurrent?: boolean;\n  as: React.ElementType;\n  className?: string;\n  to?: string;\n  prefetch?: boolean | null;\n  children?: React.ReactNode;\n  /** Prefix icon (bare SVG). The crumb wraps it in `<Icon>` and aligns it like a Button adornment. */\n  icon?: React.ReactNode;\n  /** Renders `CrumbSkeleton` in place of the label. */\n  isLoading?: boolean;\n  /**\n   * Sibling control rendered next to the label (never inside it). Expected to be a\n   * `size=\"icon-sm\"` ghost control, e.g. a CopyButton. Entity switchers go in `switcher`.\n   */\n  action?: React.ReactNode;\n  /**\n   * Entity switcher rendered next to the label; spread `crumbSwitcherTriggerProps` on it.\n   * On the current crumb there is nowhere to navigate, so its hit area covers the whole crumb.\n   */\n  switcher?: React.ReactNode;\n  'data-testid'?: string;\n}\n\nexport const CrumbSkeleton = (props: { 'data-testid'?: string }) => <Skeleton className=\"h-3 w-24\" {...props} />;\n\nexport const Crumb = ({\n  className,\n  as,\n  isCurrent,\n  action,\n  switcher,\n  icon,\n  isLoading,\n  children,\n  ...props\n}: CrumbProps) => {\n  const Root = as || 'span';\n  const switcherCoversCrumb = Boolean(isCurrent && switcher);\n\n  return (\n    <>\n      <li\n        className={cn(\n          'group flex h-control-sm min-w-0 items-center',\n          isCurrent ? 'shrink' : 'shrink-0',\n          switcherCoversCrumb &&\n            'relative rounded-full has-[[data-slot=crumb-switcher]_[data-popup-open]]:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:hover:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:active:bg-fill',\n        )}\n      >\n        <Root\n          aria-current={isCurrent ? 'page' : undefined}\n          className={cn(\n            // Same box as `buttonVariants({ variant: 'ghost', size: 'sm' })` so a label and an\n            // icon-sm control sitting next to it share height, radius, padding and colors.\n            'inline-flex min-w-0 items-center gap-2 overflow-hidden rounded-full px-[.9em]',\n            controlSizeClasses.sm,\n            controlStateColorTransition,\n            // Long labels truncate: the current crumb gets more room than nav crumbs.\n            isCurrent\n              ? 'max-w-xs cursor-default text-foreground'\n              : cn(quietTextHover, 'max-w-48 cursor-pointer hover:bg-fill-subtle active:bg-fill'),\n            className,\n          )}\n          {...props}\n        >\n          {icon && (\n            <Icon\n              className={cn(\n                '-ml-[.3em] shrink-0 opacity-50 group-hover:opacity-100',\n                'transition-opacity duration-normal ease-out-custom',\n              )}\n            >\n              {icon}\n            </Icon>\n          )}\n          {isLoading ? (\n            <CrumbSkeleton />\n          ) : (\n            // `text-overflow` needs a block container, so the label truncates in its\n            // own box rather than on the flex Root. Works for plain strings and for\n            // components that resolve to a string (route-header `Component` crumbs).\n            <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n          )}\n        </Root>\n        {switcher && (\n          <span\n            data-slot=\"crumb-switcher\"\n            className={cn(\n              '-ml-1 flex h-control-sm shrink-0 items-center',\n              switcherCoversCrumb &&\n                '[&_button]:bg-transparent! [&_button:enabled]:after:absolute [&_button:enabled]:after:inset-0 [&_button:enabled]:after:rounded-full',\n            )}\n          >\n            {switcher}\n          </span>\n        )}\n        {action && <span className=\"-ml-1 flex h-control-sm shrink-0 items-center\">{action}</span>}\n      </li>\n      {!isCurrent && (\n        <li role=\"separator\" className=\"flex h-full items-center\">\n          <Icon className=\"text-placeholder\">\n            <SlashIcon />\n          </Icon>\n        </li>\n      )}\n    </>\n  );\n};\n","import type { ComboboxProps } from '../Combobox';\n\nexport const crumbSwitcherTriggerProps = {\n  variant: 'ghost',\n  size: 'icon-sm',\n  align: 'end',\n} as const satisfies Pick<ComboboxProps, 'variant' | 'size' | 'align'>;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Breadcrumb.es.js","sources":["../../src/ds/components/Breadcrumb/Breadcrumb.tsx","../../src/ds/components/Breadcrumb/crumb-switcher.ts"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { SlashIcon } from '../../icons/SlashIcon';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover, quietTextHoverInGroup } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nexport interface BreadcrumbProps {\n  children?: React.ReactNode;\n  label?: string;\n  className?: string;\n  listClassName?: string;\n}\n\nexport const Breadcrumb = ({ children, label, className, listClassName }: BreadcrumbProps) => {\n  return (\n    <nav aria-label={label} className={className}>\n      <ol className={cn('flex items-center gap-0.5', listClassName)}>{children}</ol>\n    </nav>\n  );\n};\n\nexport interface CrumbProps {\n  isCurrent?: boolean;\n  as: React.ElementType;\n  className?: string;\n  to?: string;\n  prefetch?: boolean | null;\n  children?: React.ReactNode;\n  /** Prefix icon (bare SVG). The crumb wraps it in `<Icon>` and aligns it like a Button adornment. */\n  icon?: React.ReactNode;\n  /** Renders `CrumbSkeleton` in place of the label. */\n  isLoading?: boolean;\n  /**\n   * Sibling control rendered next to the label (never inside it). Expected to be a\n   * `size=\"icon-sm\"` ghost control, e.g. a CopyButton. Entity switchers go in `switcher`.\n   */\n  action?: React.ReactNode;\n  /**\n   * Entity switcher rendered next to the label; spread `crumbSwitcherTriggerProps` on it.\n   * When the crumb doesn't navigate (current crumb, or no `to`), its hit area covers the whole crumb.\n   */\n  switcher?: React.ReactNode;\n  'data-testid'?: string;\n}\n\nexport const CrumbSkeleton = (props: { 'data-testid'?: string }) => <Skeleton className=\"h-3 w-24\" {...props} />;\n\nexport const Crumb = ({\n  className,\n  as,\n  to,\n  isCurrent,\n  action,\n  switcher,\n  icon,\n  isLoading,\n  children,\n  ...props\n}: CrumbProps) => {\n  const Root = as || 'span';\n  const switcherCoversCrumb = Boolean(switcher && (isCurrent || !to));\n\n  return (\n    <>\n      <li\n        className={cn(\n          'group flex h-control-sm min-w-0 items-center',\n          isCurrent ? 'shrink' : 'shrink-0',\n          switcherCoversCrumb &&\n            'relative rounded-full has-[[data-slot=crumb-switcher]_[data-popup-open]]:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:hover:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:active:bg-fill',\n        )}\n      >\n        <Root\n          aria-current={isCurrent ? 'page' : undefined}\n          className={cn(\n            // Same box as `buttonVariants({ variant: 'ghost', size: 'sm' })` so a label and an\n            // icon-sm control sitting next to it share height, radius, padding and colors.\n            'inline-flex min-w-0 items-center gap-2 overflow-hidden rounded-full px-[.9em]',\n            controlSizeClasses.sm,\n            controlStateColorTransition,\n            // Long labels truncate: the current crumb gets more room than nav crumbs.\n            isCurrent\n              ? 'max-w-xs cursor-default text-foreground'\n              : switcherCoversCrumb\n                ? cn(quietTextHoverInGroup, 'max-w-48')\n                : cn(quietTextHover, 'max-w-48 cursor-pointer hover:bg-fill-subtle active:bg-fill'),\n            className,\n          )}\n          to={to}\n          {...props}\n        >\n          {icon && (\n            <Icon\n              className={cn(\n                '-ml-[.3em] shrink-0 opacity-50 group-hover:opacity-100',\n                'transition-opacity duration-normal ease-out-custom',\n              )}\n            >\n              {icon}\n            </Icon>\n          )}\n          {isLoading ? (\n            <CrumbSkeleton />\n          ) : (\n            // `text-overflow` needs a block container, so the label truncates in its\n            // own box rather than on the flex Root. Works for plain strings and for\n            // components that resolve to a string (route-header `Component` crumbs).\n            <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n          )}\n        </Root>\n        {switcher && (\n          <span\n            data-slot=\"crumb-switcher\"\n            className={cn(\n              '-ml-1 flex h-control-sm shrink-0 items-center',\n              switcherCoversCrumb &&\n                '[&_button]:bg-transparent! [&_button:enabled]:after:absolute [&_button:enabled]:after:inset-0 [&_button:enabled]:after:rounded-full',\n            )}\n          >\n            {switcher}\n          </span>\n        )}\n        {action && <span className=\"-ml-1 flex h-control-sm shrink-0 items-center\">{action}</span>}\n      </li>\n      {!isCurrent && (\n        <li role=\"separator\" className=\"flex h-full items-center\">\n          <Icon className=\"text-placeholder\">\n            <SlashIcon />\n          </Icon>\n        </li>\n      )}\n    </>\n  );\n};\n","import type { ComboboxProps } from '../Combobox';\n\nexport const crumbSwitcherTriggerProps = {\n  variant: 'ghost',\n  size: 'icon-sm',\n  align: 'end',\n} as const satisfies Pick<ComboboxProps, 'variant' | 'size' | 'align'>;\n"],"names":[],"mappings":"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"}