@crewlethq/ui 0.12.0 → 0.13.0

package/dist/chunk-S3IENQ3E.js

@@ -0,0 +1,336 @@
+import { Skeleton } from './chunk-W5J7R5EB.js';
+import { Modal } from './chunk-CF6DTETT.js';
+import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
+import { Input } from './chunk-FTEJPHBI.js';
+import { KeyChip, highlightMatch } from './chunk-FYTIJM2T.js';
+import { useMediaMatch } from './chunk-IG75YMUN.js';
+import { announce } from './chunk-RSAQOKH3.js';
+import { Popover } from './chunk-O2ZDZZS7.js';
+import { focusables, isComposing } from './chunk-R25RGPUB.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Switcher-B44Q4WF4.css';
+import { forwardRef, useId, useRef, useCallback, useMemo, useEffect } from 'react';
+import { ChevronDownGlyph, SearchGlyph } from '@crewlethq/icons/glyphs';
+import { breakpoint } from '@crewlethq/tokens';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var PHONE = `(width < ${breakpoint.phone})`;
+var TOUCH = "(pointer: coarse)";
+var DROP = 6;
+var SKELETON_NAMES = [72, 128, 96, 150, 110, 84];
+function Switcher({ label, open, onOpenChange, trigger, className, ...panel }) {
+  const phone = useMediaMatch(PHONE);
+  const touch = useMediaMatch(TOUCH);
+  const triggerId = useId();
+  const body = useRef(null);
+  const shift = useRef(0);
+  const place = phone ? "sheet" : trigger ? "anchored" : "centered";
+  const close = useCallback(() => onOpenChange(false), [onOpenChange]);
+  const initialFocus = useCallback(() => touch ? body.current : null, [touch]);
+  const alignUnder = useCallback((surface, anchor) => {
+    const mark = anchor.querySelector(".crewlet-key-chip, .crewlet-switcher-trigger__label");
+    const lead = surface.querySelector(".crewlet-switcher__lead");
+    if (mark && lead) {
+      const from = mark.getBoundingClientRect().left - anchor.getBoundingClientRect().left;
+      const to = lead.getBoundingClientRect().left - surface.getBoundingClientRect().left;
+      shift.current = from - to;
+    }
+    return shift.current;
+  }, []);
+  function done() {
+    close();
+    if (place === "anchored") document.getElementById(triggerId)?.focus();
+  }
+  function leave(back) {
+    const button = document.getElementById(triggerId);
+    close();
+    if (!button) return;
+    const surface = body.current;
+    const next = back ? void 0 : focusables(document.body).find(
+      (el) => (button.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0 && !button.contains(el) && !surface?.contains(el)
+    );
+    (next ?? button).focus();
+  }
+  const content = /* @__PURE__ */ jsx(
+    SwitcherPanel,
+    {
+      ...panel,
+      panelRef: body,
+      onDone: done,
+      onLeave: place === "anchored" ? leave : void 0
+    }
+  );
+  if (place === "anchored" && trigger) {
+    return /* @__PURE__ */ jsx(
+      Popover,
+      {
+        label,
+        open,
+        onOpenChange: (next) => onOpenChange(next),
+        alignOffset: alignUnder,
+        sideOffset: DROP,
+        initialFocus,
+        className: cx("crewlet-switcher", "crewlet-switcher--anchored", className),
+        trigger: (isOpen, toggle) => /* @__PURE__ */ jsx(SwitcherButton, { ...trigger, id: triggerId, expanded: isOpen, onToggle: toggle, onOpen: () => onOpenChange(true) }),
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger ? /* @__PURE__ */ jsx(
+      SwitcherButton,
+      {
+        ...trigger,
+        id: triggerId,
+        expanded: open,
+        onToggle: () => onOpenChange(!open),
+        onOpen: () => onOpenChange(true)
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        open,
+        onClose: close,
+        placement: place === "sheet" ? "bottom" : "top",
+        title: place === "sheet" ? label : void 0,
+        ariaLabel: label,
+        showCloseButton: place === "sheet",
+        flush: true,
+        initialFocus,
+        className: cx("crewlet-switcher", `crewlet-switcher--${place}`, className),
+        children: content
+      }
+    )
+  ] });
+}
+var SwitcherButton = forwardRef(function SwitcherButton2({ label, keyChip, tag, mono, title, id, expanded, onToggle, onOpen, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-haspopup": "dialog",
+      "aria-expanded": expanded,
+      ...rest,
+      ref,
+      id,
+      title,
+      className: cx("crewlet-switcher-trigger", mono && "is-mono"),
+      onClick: onToggle,
+      onKeyDown: (event) => {
+        if (event.key !== "ArrowDown" || expanded || event.altKey || event.ctrlKey || event.metaKey) return;
+        event.preventDefault();
+        onOpen();
+      },
+      children: [
+        keyChip ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KeyChip, { children: keyChip }),
+          " "
+        ] }) : null,
+        /* @__PURE__ */ jsx("span", { className: "crewlet-switcher-trigger__label", children: label }),
+        tag !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "crewlet-switcher-trigger__tag", children: tag })
+        ] }) : null,
+        /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "sm", className: "crewlet-switcher-trigger__chevron", "aria-hidden": "true" })
+      ]
+    }
+  );
+});
+function SwitcherPanel({
+  query,
+  onQueryChange,
+  placeholder = "Search",
+  listLabel,
+  pinned,
+  note,
+  message,
+  groups = [],
+  footer = [],
+  loading = false,
+  loadingLabel = "Loading",
+  announcement,
+  panelRef,
+  onDone,
+  onLeave
+}) {
+  const id = useId();
+  const footerId = `${id}-footer`;
+  const noteId = `${id}-note`;
+  const titleId = `${id}-message`;
+  const bodyId = `${id}-message-body`;
+  const flat = useMemo(
+    () => [...pinned ? [pinned] : [], ...message?.actions ?? [], ...groups.flatMap((group) => group.options), ...footer],
+    [pinned, message, groups, footer]
+  );
+  const held = useCallback((index2) => Boolean(flat[index2]?.held), [flat]);
+  const listbox = useListbox({
+    id,
+    open: true,
+    count: flat.length,
+    // The surface around the list owns Escape and a press outside it.
+    popup: false,
+    // ENTER TAKES A ROW THE WAY A PRESS DOES: through the row's own click, so
+    // a link with nothing else to do is followed as a link.
+    onCommit: (index2) => document.getElementById(listbox.optionId(index2))?.click(),
+    onClose: onDone
+  });
+  const keys = useOptionKeys({ listbox, count: flat.length, disabled: held, ends: false });
+  const { active, setActive } = listbox;
+  const { step } = keys;
+  useEffect(() => {
+    if (active >= 0 && held(active)) setActive(step(active, 1));
+  }, [active, held, setActive, step]);
+  useEffect(() => setActive(loading ? -1 : 0), [loading, setActive]);
+  useEffect(() => {
+    if (announcement) announce(announcement);
+  }, [announcement]);
+  function onKeyDown(event) {
+    if (isComposing(event)) return;
+    if (keys.onKeyDown(event)) return;
+    if (event.key === "Enter" && (event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey) {
+      const option = flat[active];
+      if (option?.href && !option.held) {
+        event.preventDefault();
+        window.open(option.href, "_blank", "noopener");
+      }
+      return;
+    }
+    if (listbox.onKeyDown(event)) return;
+    if (event.key === "Tab" && onLeave && !event.altKey && !event.ctrlKey && !event.metaKey) {
+      event.preventDefault();
+      onLeave(event.shiftKey);
+    }
+  }
+  function onRowClick(event, option) {
+    if (option.held) {
+      event.preventDefault();
+      return;
+    }
+    if (option.href && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) return;
+    if (option.onSelect) event.preventDefault();
+    if (!option.keepsOpen) onDone();
+    option.onSelect?.();
+  }
+  let index = -1;
+  function row(option, highlight) {
+    index += 1;
+    const mine = index;
+    const name = option.accessibleLabel && option.held ? `${option.accessibleLabel}, ${option.held}` : option.accessibleLabel;
+    const props = {
+      id: listbox.optionId(mine),
+      role: "option",
+      className: cx("crewlet-listbox__option", "crewlet-switcher__option", option.current && "is-current"),
+      "aria-selected": mine === active,
+      "aria-current": option.current ? "page" : void 0,
+      "aria-disabled": option.held ? true : void 0,
+      "aria-label": name,
+      // The press is prevented so focus stays in the field; a middle press is
+      // left alone, because it is what opens a link in a new tab.
+      onMouseDown: (event) => {
+        if (event.button === 0) event.preventDefault();
+      },
+      onMouseEnter: () => {
+        if (!option.held) setActive(mine);
+      },
+      onClick: (event) => onRowClick(event, option)
+    };
+    const words = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "crewlet-switcher__lead", "aria-hidden": option.keyChip ? void 0 : true, children: option.keyChip ? /* @__PURE__ */ jsx(KeyChip, { highlight: highlight ? query : void 0, children: option.keyChip }) : option.icon }),
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "crewlet-switcher__label", children: highlight ? highlightMatch(option.label, query, "word", "crewlet-switcher__match") : option.label }),
+      option.meta !== void 0 || option.held ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        /* @__PURE__ */ jsxs("span", { className: "crewlet-switcher__meta", children: [
+          option.meta,
+          option.held
+        ] })
+      ] }) : null
+    ] });
+    return option.href && !option.held ? /* @__PURE__ */ jsx("a", { ...props, href: option.href, tabIndex: -1, children: words }, option.id) : /* @__PURE__ */ jsx("div", { ...props, children: words }, option.id);
+  }
+  const follows = Boolean(note || message || groups.length > 0 || loading);
+  const describedBy = [note ? noteId : "", message ? titleId : "", message?.body ? bodyId : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { ref: panelRef, className: "crewlet-switcher__panel", tabIndex: -1, children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        appearance: "command",
+        containerClassName: "crewlet-switcher__search",
+        leading: /* @__PURE__ */ jsx(SearchGlyph, { size: "sm" }),
+        value: query,
+        onChange: (event) => {
+          onQueryChange(event.target.value);
+          setActive(0);
+        },
+        onClear: () => {
+          onQueryChange("");
+          setActive(0);
+        },
+        clearLabel: "Clear the search",
+        onKeyDown,
+        placeholder,
+        role: "combobox",
+        "aria-label": placeholder,
+        "aria-expanded": true,
+        "aria-controls": listbox.listId,
+        "aria-autocomplete": "list",
+        "aria-activedescendant": active >= 0 ? listbox.optionId(active) : void 0,
+        "aria-describedby": describedBy || void 0,
+        autoComplete: "off",
+        spellCheck: false
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-switcher__scroller", ref: listbox.listRef, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          id: listbox.listId,
+          role: "listbox",
+          "aria-label": listLabel,
+          "aria-owns": footer.length > 0 ? footerId : void 0,
+          "aria-busy": loading || void 0,
+          className: "crewlet-switcher__list",
+          children: [
+            pinned ? row(pinned, false) : null,
+            pinned && follows ? /* @__PURE__ */ jsx("div", { className: "crewlet-listbox__separator", "aria-hidden": "true" }) : null,
+            note ? /* @__PURE__ */ jsx("div", { role: "presentation", id: noteId, className: "crewlet-switcher__note", children: note }) : null,
+            message ? (
+              // A MESSAGE NAMES WHAT CAN BE DONE ABOUT IT: its actions are a group
+              // labelled by it, so a row reached by the arrows is heard with it.
+              /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": titleId, "aria-describedby": message.body ? bodyId : void 0, children: [
+                /* @__PURE__ */ jsxs("div", { role: "presentation", className: "crewlet-switcher__message", children: [
+                  /* @__PURE__ */ jsx("span", { id: titleId, className: "crewlet-switcher__message-title", children: message.title }),
+                  message.body ? /* @__PURE__ */ jsx("span", { id: bodyId, className: "crewlet-switcher__message-body", children: message.body }) : null
+                ] }),
+                (message.actions ?? []).map((option) => row(option, false))
+              ] })
+            ) : null,
+            groups.map((group) => (
+              // Named by its heading's own words, not the figure beside them.
+              /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": `${id}-group-${group.id}`, children: [
+                /* @__PURE__ */ jsxs("div", { role: "presentation", className: "crewlet-listbox__heading crewlet-switcher__heading", children: [
+                  /* @__PURE__ */ jsx("span", { id: `${id}-group-${group.id}`, children: group.label }),
+                  group.count !== void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-switcher__count", children: group.count }) : null
+                ] }),
+                group.options.map((option) => row(option, true))
+              ] }, group.id)
+            ))
+          ]
+        }
+      ),
+      loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "crewlet-switcher__skeleton", "aria-hidden": "true", children: SKELETON_NAMES.map((width) => /* @__PURE__ */ jsxs("div", { className: "crewlet-switcher__skeleton-row", children: [
+          /* @__PURE__ */ jsx("span", { className: "crewlet-switcher__lead", children: /* @__PURE__ */ jsx(Skeleton, { variant: "box", width: 34, height: 10, borderRadius: 4 }) }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "box", width, height: 10, borderRadius: 4 }),
+          /* @__PURE__ */ jsx("span", { className: "crewlet-switcher__meta", children: /* @__PURE__ */ jsx(Skeleton, { variant: "box", width: 14, height: 10, borderRadius: 4 }) })
+        ] }, width)) }),
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", { role: "status", children: loadingLabel }) })
+      ] }) : null
+    ] }),
+    footer.length > 0 ? /* @__PURE__ */ jsx("div", { id: footerId, role: "group", className: "crewlet-switcher__footer", children: footer.map((option) => row(option, false)) }) : null
+  ] });
+}
+
+export { Switcher };

package/dist/{chunk-WEIINZPA.js → chunk-SBRE7IML.js}

@@ -1,5 +1,5 @@
 import { useThemePreference, useDensityPreference } from './chunk-K3OWD7BJ.js';
-import { SegmentedControl } from './chunk-EBBAAQDY.js';
+import { SegmentedControl } from './chunk-26PEPONN.js';
 import { SunGlyph, MonitorGlyph, MoonGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';
 
@@ -32,11 +32,12 @@ function StoredThemeSwitcher({
 function ThemeRow({
   value,
   onChange,
-  label = "Theme",
+  label = "Mode",
   lightLabel = "Light",
   systemLabel = "Follow the system",
   darkLabel = "Dark",
   size = "sm",
+  fill,
   className
 }) {
   return /* @__PURE__ */ jsx(
@@ -45,6 +46,7 @@ function ThemeRow({
       label,
       semantics: "radio",
       size,
+      fill,
       className,
       value,
       onValueChange: onChange,
@@ -93,6 +95,7 @@ function DensityRow({
   normalMark = "M",
   comfortableMark = "L",
   size = "sm",
+  fill,
   className
 }) {
   return /* @__PURE__ */ jsx(
@@ -101,6 +104,7 @@ function DensityRow({
       label,
       semantics: "radio",
       size,
+      fill,
       className,
       value,
       onValueChange: onChange,

package/dist/{chunk-IVFJD7WY.js → chunk-UCCC7YVZ.js}

@@ -1,6 +1,7 @@
+import { KeyChip } from './chunk-FYTIJM2T.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SidebarNav-X5NLZNWA.css';
+import './SidebarNav-KF66MLOM.css';
 import { useId, useState } from 'react';
 import { ChevronDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -66,7 +67,7 @@ function NavItem({
   }
   const inside = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-nav-item__icon", "aria-hidden": true, children: icon }) : null,
-    lead ? /* @__PURE__ */ jsx("span", { className: "crewlet-nav-item__lead", children: lead }) : null,
+    lead ? /* @__PURE__ */ jsx(KeyChip, { className: "crewlet-nav-item__lead", children: lead }) : null,
     lead ? " " : null,
     /* @__PURE__ */ jsxs("span", { className: "crewlet-nav-item__label", children: [
       label,

package/dist/{chunk-IINFVK3W.js → chunk-UZPHPW3Z.js}

@@ -1,15 +1,15 @@
-import { Toolbar } from './chunk-PGRPNDWM.js';
 import { PageHeader } from './chunk-HOXGBLEY.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
-import { DateTimePicker } from './chunk-JCNUQ3US.js';
-import { useListbox, useOptionKeys } from './chunk-6MU7HNB4.js';
+import { Toolbar } from './chunk-PGRPNDWM.js';
+import { DataTable } from './chunk-WY2NLRZN.js';
+import { Menu } from './chunk-TFH6SYWB.js';
+import { DateTimePicker } from './chunk-JDPAA2JU.js';
+import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { Input } from './chunk-FTEJPHBI.js';
-import { DataTable } from './chunk-GOUKOXJK.js';
-import { Menu } from './chunk-TFH6SYWB.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
-import { Popover } from './chunk-PDUZO35I.js';
+import { Popover } from './chunk-O2ZDZZS7.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/chunk-VWNC2L6W.js

@@ -0,0 +1,110 @@
+import { KeyChip } from './chunk-FYTIJM2T.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Breadcrumb-YMWVM3SV.css';
+import { useRef, useState, useLayoutEffect } from 'react';
+import { ChevronRightGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function Breadcrumb({ crumbs, current, label = "Breadcrumb", className, style, ...rest }) {
+  const trail = useRef(null);
+  const signature = crumbs.map((crumb) => [crumb.label, crumb.keyChip ?? "", crumb.mono ? "m" : "", crumb.href ? "l" : ""].join("\0")).join("
");
+  const overflows = useOverflows(trail, signature);
+  const floor = useFloor(trail, signature);
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ...rest,
+      ref: trail,
+      className: cx("crewlet-breadcrumb", className),
+      "aria-label": label,
+      tabIndex: overflows ? 0 : void 0,
+      style: floor > 0 ? { ...style, "--crewlet-breadcrumb-floor": `${floor}px` } : style,
+      children: crumbs.map((crumb, i) => {
+        const last = i === crumbs.length - 1;
+        const words = /* @__PURE__ */ jsxs(Fragment, { children: [
+          crumb.icon !== void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-breadcrumb__icon", "aria-hidden": "true", children: crumb.icon }) : null,
+          crumb.keyChip ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(KeyChip, { className: "crewlet-breadcrumb__key", children: crumb.keyChip }),
+            " "
+          ] }) : null,
+          crumb.badge !== void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-breadcrumb__badge", "aria-hidden": "true", children: crumb.badge }) : null,
+          /* @__PURE__ */ jsx("span", { className: "crewlet-breadcrumb__text", children: crumb.label })
+        ] });
+        const face = crumb.mono ? "is-mono" : void 0;
+        return (
+          // KEYED BY DEPTH, not by words: the crumb at a depth is the same place
+          // in the trail whatever it is called, so a heading whose subject is
+          // switched keeps its element, and the control in it keeps focus.
+          /* @__PURE__ */ jsxs("span", { className: "crewlet-breadcrumb__part", children: [
+            i > 0 ? /* @__PURE__ */ jsx(ChevronRightGlyph, { size: "xs", className: "crewlet-breadcrumb__separator", "aria-hidden": "true" }) : null,
+            last ? /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: cx("crewlet-breadcrumb__here", current !== void 0 && "crewlet-breadcrumb__here--control", face),
+                "aria-current": "page",
+                children: current !== void 0 ? current : words
+              }
+            ) : crumb.href ? /* @__PURE__ */ jsx("a", { className: cx("crewlet-breadcrumb__crumb", face), href: crumb.href, children: words }) : (
+              // AN ANCESTOR WITH NO PAGE OF ITS OWN, or one the reader is
+              // already on ("Work" on Work's landing): its words in the
+              // ancestors' quiet ink, with nothing to press.
+              /* @__PURE__ */ jsx("span", { className: cx("crewlet-breadcrumb__crumb", face), children: words })
+            )
+          ] }, i)
+        );
+      })
+    }
+  );
+}
+function useFloor(el, content) {
+  const [floor, setFloor] = useState(0);
+  useLayoutEffect(() => {
+    const node = el.current;
+    if (!node) return;
+    const bar = node.parentElement;
+    const measure = () => {
+      const last = node.querySelector(".crewlet-breadcrumb__part:last-child > .crewlet-breadcrumb__here");
+      if (!last) return setFloor(0);
+      const start = node.getBoundingClientRect().left - node.scrollLeft;
+      const offset = last.getBoundingClientRect().left - start;
+      const stub = parseFloat(getComputedStyle(last).minWidth) || 0;
+      const wanted = Math.max(0, Math.ceil(offset + stub));
+      setFloor(bar ? Math.min(wanted, roomBeside(bar, node)) : wanted);
+    };
+    measure();
+    if (typeof ResizeObserver !== "function") return;
+    const watch = new ResizeObserver(measure);
+    for (const part of node.querySelectorAll(".crewlet-breadcrumb__part")) watch.observe(part);
+    if (bar) watch.observe(bar);
+    return () => watch.disconnect();
+  }, [el, content]);
+  return floor;
+}
+function roomBeside(bar, item) {
+  const style = getComputedStyle(bar);
+  const content = bar.clientWidth - (parseFloat(style.paddingLeft) || 0) - (parseFloat(style.paddingRight) || 0);
+  if (content <= 0) return Infinity;
+  const gap = parseFloat(style.columnGap) || 0;
+  let before = 0;
+  for (let sib = item.previousElementSibling; sib; sib = sib.previousElementSibling) {
+    const width = sib.getBoundingClientRect().width;
+    if (width > 0) before += width + gap;
+  }
+  return Math.max(0, Math.floor(content - before));
+}
+function useOverflows(el, content) {
+  const [overflows, setOverflows] = useState(false);
+  useLayoutEffect(() => {
+    const node = el.current;
+    if (!node) return;
+    const measure = () => setOverflows(node.scrollWidth > node.clientWidth);
+    measure();
+    if (typeof ResizeObserver !== "function") return;
+    const watch = new ResizeObserver(measure);
+    watch.observe(node);
+    return () => watch.disconnect();
+  }, [el, content]);
+  return overflows;
+}
+
+export { Breadcrumb };

package/dist/chunk-VYY56AMX.js

@@ -0,0 +1,2 @@
+import './Tabs-ITJYJFMU.css';
+import './SegmentedControl-PKBLJVSA.css';

package/dist/chunk-WI6K5M5X.js

@@ -0,0 +1,24 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Document-PQGXJHB7.css';
+import { jsx } from 'react/jsx-runtime';
+
+function Document({ as: Tag = "div", size = "md", measure = "normal", className, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...rest,
+      className: cx(
+        "crewlet-document",
+        `crewlet-document--${size}`,
+        measure === "normal" && "crewlet-document--measure",
+        className
+      ),
+      children
+    }
+  );
+}
+function DocumentTitle({ as: Tag = "h1", className, children, ...rest }) {
+  return /* @__PURE__ */ jsx(Tag, { ...rest, className: cx("crewlet-document-title", className), children });
+}
+
+export { Document, DocumentTitle };

package/dist/{chunk-GOUKOXJK.js → chunk-WY2NLRZN.js}

@@ -1,10 +1,10 @@
-import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
 import { Menu } from './chunk-TFH6SYWB.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
-import { Modal } from './chunk-TEEJSTFG.js';
+import { Checkbox } from './chunk-YCTMKKRA.js';
 import { useClipboard } from './chunk-5VNUYO76.js';
+import { Modal } from './chunk-CF6DTETT.js';
 import { Button } from './chunk-OG6CL3EB.js';
-import { Checkbox } from './chunk-YCTMKKRA.js';
+import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';