@crewlethq/ui 0.12.0 → 0.14.0

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-XV65NTIT.js → chunk-WYQOHFML.js}

@@ -1,14 +1,14 @@
-import { useListbox } from './chunk-6MU7HNB4.js';
+import { Modal } from './chunk-TFMJH2E6.js';
+import { useListbox, useHighlightRest } from './chunk-F73MC7EZ.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { Input } from './chunk-FTEJPHBI.js';
-import { Modal } from './chunk-TEEJSTFG.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { isComposing } from './chunk-R25RGPUB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './CommandPalette-C5AMKGN2.css';
-import { useId, useMemo } from 'react';
-import { SearchGlyph } from '@crewlethq/icons/glyphs';
+import './CommandPalette-HBTNKHZQ.css';
+import { useId, useMemo, useRef, useEffect, useState } from 'react';
+import { ChevronLeftGlyph, SearchGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function CommandPalette(props) {
@@ -33,6 +33,8 @@ function Palette({
   onScopeChange,
   groupsScope,
   scopesLabel = "Search in",
+  step,
+  onHighlight,
   className,
   ...rest
 }) {
@@ -48,11 +50,33 @@ function Palette({
     onCommit: (at) => {
       const item = flat[at];
       if (!item) return;
-      item.onSelect();
-      onClose();
+      if (item.onSelect() !== false) onClose();
     },
     onClose
   });
+  const offeredNow = useRef(flat);
+  offeredNow.current = flat;
+  const highlight = useHighlightRest(
+    onHighlight ? (key) => onHighlight(key === null ? null : offeredNow.current.find((item) => item.id === key) ?? null) : void 0
+  );
+  const byPointer = useRef(false);
+  const restingKey = flat[listbox.active]?.id ?? null;
+  useEffect(() => {
+    const pointer = byPointer.current;
+    byPointer.current = false;
+    if (restingKey === null) highlight.now(null);
+    else if (pointer) highlight.rest(restingKey);
+    else highlight.now(restingKey);
+  }, [restingKey, highlight]);
+  const stepKey = step?.label ?? null;
+  const [shownStep, setShownStep] = useState(stepKey);
+  const [before, setBefore] = useState(0);
+  if (stepKey !== shownStep) {
+    setShownStep(stepKey);
+    if (shownStep === null) setBefore(listbox.active);
+    const start = step?.startAt === void 0 ? -1 : flat.findIndex((item) => item.id === step.startAt);
+    listbox.setActive(stepKey === null ? before : Math.max(start, 0));
+  }
   const tabId = (scopeId) => `${id}-scope-${scopeId}`;
   const panelId = `${id}-panel`;
   const current = scopes?.find((candidate) => candidate.id === scope);
@@ -62,17 +86,24 @@ function Palette({
     listbox.setActive(0);
   }
   function onKeyDown(event) {
+    if (step && !isComposing(event) && !event.altKey && !event.ctrlKey && !event.metaKey) {
+      if (event.key === "Escape" || event.key === "Backspace" && query === "") {
+        event.preventDefault();
+        step.onBack();
+        return;
+      }
+    }
     if (listbox.onKeyDown(event)) return;
     if (!scopes || scopes.length === 0 || isComposing(event)) return;
     if (event.altKey || event.ctrlKey || event.metaKey) return;
-    let step = 0;
-    if (event.key === "Tab") step = event.shiftKey ? -1 : 1;
-    else if (query === "" && !event.shiftKey && event.key === "ArrowRight") step = 1;
-    else if (query === "" && !event.shiftKey && event.key === "ArrowLeft") step = -1;
-    if (step === 0) return;
+    let by = 0;
+    if (event.key === "Tab") by = event.shiftKey ? -1 : 1;
+    else if (query === "" && !event.shiftKey && event.key === "ArrowRight") by = 1;
+    else if (query === "" && !event.shiftKey && event.key === "ArrowLeft") by = -1;
+    if (by === 0) return;
     event.preventDefault();
     const at = scopes.findIndex((candidate) => candidate.id === scope);
-    const next = scopes[(at + step + scopes.length) % scopes.length];
+    const next = scopes[(at + by + scopes.length) % scopes.length];
     if (next) choose(next.id);
   }
   const active = listbox.active;
@@ -91,31 +122,49 @@ function Palette({
       className: cx("crewlet-palette", className),
       footerStart: footer,
       children: [
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            appearance: "command",
-            containerClassName: "crewlet-palette__field",
-            leading: /* @__PURE__ */ jsx(SearchGlyph, { size: "sm" }),
-            trailing: escapeHint ? /* @__PURE__ */ jsx(Kbd, { subtle: true, "aria-hidden": true, className: "crewlet-palette__escape", children: "Esc" }) : void 0,
-            value: query,
-            onChange: (event) => {
-              onQueryChange(event.target.value);
-              listbox.setActive(0);
-            },
-            onKeyDown,
-            placeholder,
-            role: "combobox",
-            "aria-label": label,
-            "aria-expanded": true,
-            "aria-controls": listbox.listId,
-            "aria-autocomplete": "list",
-            "aria-activedescendant": active >= 0 ? listbox.optionId(active) : void 0,
-            "aria-describedby": current ? tabId(current.id) : void 0,
-            autoComplete: "off",
-            spellCheck: false
-          }
-        ),
+        /* @__PURE__ */ jsxs("div", { className: cx("crewlet-palette__bar", step && "is-step"), children: [
+          step ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "crewlet-palette__step",
+              tabIndex: -1,
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: step.onBack,
+              children: [
+                /* @__PURE__ */ jsx(ChevronLeftGlyph, { size: "sm" }),
+                /* @__PURE__ */ jsx(VisuallyHidden, { children: "Back from" }),
+                " ",
+                step.label
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              appearance: "command",
+              containerClassName: "crewlet-palette__field",
+              leading: step ? void 0 : /* @__PURE__ */ jsx(SearchGlyph, { size: "sm" }),
+              trailing: escapeHint ? /* @__PURE__ */ jsx(Kbd, { subtle: true, "aria-hidden": true, className: "crewlet-palette__escape", children: "Esc" }) : void 0,
+              value: query,
+              onChange: (event) => {
+                onQueryChange(event.target.value);
+                listbox.setActive(0);
+              },
+              onKeyDown,
+              placeholder,
+              role: "combobox",
+              "aria-label": step ? step.label : label,
+              "aria-expanded": true,
+              "aria-controls": listbox.listId,
+              "aria-autocomplete": "list",
+              "aria-activedescendant": active >= 0 ? listbox.optionId(active) : void 0,
+              "aria-describedby": current ? tabId(current.id) : void 0,
+              autoComplete: "off",
+              spellCheck: false
+            }
+          )
+        ] }),
         scopes ? /* @__PURE__ */ jsx("div", { className: "crewlet-palette__scopes", role: "tablist", "aria-label": scopesLabel, children: scopes.map((candidate) => {
           const selected = candidate.id === scope;
           return /* @__PURE__ */ jsxs(
@@ -143,6 +192,7 @@ function Palette({
           {
             className: "crewlet-palette__results",
             ref: listbox.listRef,
+            onMouseLeave: () => highlight.now(null),
             ...scopes ? { id: panelId, role: "tabpanel", "aria-labelledby": current ? tabId(current.id) : void 0 } : {},
             children: [
               /* @__PURE__ */ jsx("div", { className: "crewlet-palette__lead", "aria-live": "polite", children: lead }),
@@ -187,11 +237,14 @@ function Palette({
                               className: "crewlet-listbox__option crewlet-palette__row",
                               role: "option",
                               "aria-selected": mine === active,
-                              onMouseEnter: listbox.optionHandlers(mine).onMouseEnter,
+                              onMouseEnter: () => {
+                                if (mine === active) highlight.rest(item.id);
+                                else byPointer.current = true;
+                                listbox.optionHandlers(mine).onMouseEnter();
+                              },
                               onMouseDown: (event) => event.preventDefault(),
                               onClick: () => {
-                                item.onSelect();
-                                onClose();
+                                if (item.onSelect() !== false) onClose();
                               },
                               children: [
                                 item.icon !== void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-palette__icon", "aria-hidden": "true", children: item.icon }) : null,

package/dist/chunk-XYCADWZN.js

@@ -0,0 +1,100 @@
+import { Eyebrow } from './chunk-RK4XPHVG.js';
+import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './InboxList-YMFWKGGS.css';
+import { useId } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function InboxList({ label, className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("nav", { ...rest, "aria-label": label, className: cx("crewlet-inbox-list", className), children });
+}
+function InboxGroup({ label, hideLabel = false, headingLevel, className, children, ...rest }) {
+  const level = useHeadingLevel();
+  const Heading = headingTag(headingLevel ?? level);
+  const labelId = useId();
+  return /* @__PURE__ */ jsxs("section", { ...rest, "aria-labelledby": labelId, className: cx("crewlet-inbox-list__group", className), children: [
+    hideLabel ? /* @__PURE__ */ jsx(VisuallyHidden, { as: Heading, id: labelId, children: label }) : /* @__PURE__ */ jsx(Heading, { id: labelId, className: "crewlet-inbox-list__label", children: /* @__PURE__ */ jsx(Eyebrow, { children: label }) }),
+    /* @__PURE__ */ jsx("ul", { className: "crewlet-inbox-list__rows", children })
+  ] });
+}
+function InboxRow({
+  title,
+  qualifier,
+  qualifierTone = "default",
+  meta,
+  leading,
+  excerpt,
+  aside,
+  selected = false,
+  unread = false,
+  unreadLabel = "Unread",
+  actionable = false,
+  done = false,
+  doneLabel = "Done",
+  href,
+  onClick,
+  className,
+  children,
+  ...rest
+}) {
+  const contents = /* @__PURE__ */ jsxs(Fragment, { children: [
+    leading === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "crewlet-inbox-row__leading", children: leading }),
+      " "
+    ] }),
+    /* @__PURE__ */ jsxs("span", { className: "crewlet-inbox-row__main", children: [
+      /* @__PURE__ */ jsxs("span", { className: "crewlet-inbox-row__head", children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-inbox-row__title", children: title }),
+        qualifier === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx("span", { className: cx("crewlet-inbox-row__qualifier", qualifierTone === "danger" && "crewlet-inbox-row__qualifier--danger"), children: qualifier })
+        ] }),
+        meta === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "crewlet-inbox-row__meta", children: meta })
+        ] })
+      ] }),
+      " ",
+      /* @__PURE__ */ jsxs("span", { className: "crewlet-inbox-row__text", children: [
+        children,
+        excerpt === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "crewlet-inbox-row__excerpt", children: excerpt })
+        ] })
+      ] }),
+      unread ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: unreadLabel })
+      ] }) : null,
+      done ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: doneLabel })
+      ] }) : null
+    ] })
+  ] });
+  const controlClass = cx(
+    "crewlet-inbox-row__control",
+    unread && "crewlet-inbox-row__control--unread",
+    actionable && "crewlet-inbox-row__control--actionable",
+    done && "crewlet-inbox-row__control--done"
+  );
+  const current = selected ? "true" : void 0;
+  const control = href !== void 0 ? /* @__PURE__ */ jsx("a", { className: controlClass, href, "aria-current": current, onClick, children: contents }) : /* @__PURE__ */ jsx("button", { type: "button", className: controlClass, "aria-current": current, onClick, children: contents });
+  return /* @__PURE__ */ jsxs("li", { ...rest, className: cx("crewlet-inbox-row", selected && "crewlet-inbox-row--selected", className), children: [
+    control,
+    aside === void 0 || aside === null || aside === false ? null : /* @__PURE__ */ jsx("div", { className: "crewlet-inbox-row__aside", children: aside })
+  ] });
+}
+function InboxMore({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { ...rest, className: cx("crewlet-inbox-list__more", className), children });
+}
+function InboxToggle({ expanded, className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("button", { ...rest, type: "button", "aria-expanded": expanded, className: cx("crewlet-inbox-list__toggle", className), children });
+}
+InboxList.Group = InboxGroup;
+InboxList.Row = InboxRow;
+InboxList.More = InboxMore;
+InboxList.Toggle = InboxToggle;
+
+export { InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle };