@crewlethq/ui 0.4.3 → 0.5.0

package/dist/chunk-IA232OTU.js

@@ -0,0 +1,156 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Avatar-XID7Z74C.css';
+import './AvatarStack-GEJBNV7E.css';
+import { useState, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var AVATAR_SIZES = { xs: 20, sm: 26, md: 32, lg: 40 };
+var AVATAR_CORNER_RATIO = 0.29;
+var getInitials = (name) => {
+  if (!name) return "?";
+  const words = name.trim().split(/[\s\-_.]+/).filter(Boolean);
+  if (words.length === 0) return "?";
+  const first = (word2) => (Array.from(word2)[0] ?? "").toUpperCase();
+  if (words.length >= 2) return words.slice(0, 2).map(first).join("") || "?";
+  const word = words[0];
+  const humps = word.split(/(?<=\p{Ll})(?=\p{Lu})/u);
+  if (humps.length >= 2) return humps.slice(0, 2).map(first).join("");
+  return Array.from(word).slice(0, 2).map((character) => character.toUpperCase()).join("") || "?";
+};
+var TINT_COUNT = 10;
+var avatarTint = (seed) => {
+  let hash = 0;
+  for (let i = 0; i < seed.length; i += 1) {
+    hash = hash * 31 + seed.charCodeAt(i) >>> 0;
+  }
+  return hash % TINT_COUNT;
+};
+function avatarPixels(size) {
+  return typeof size === "number" ? size : AVATAR_SIZES[size];
+}
+function avatarCorner(pixels) {
+  return pixels * AVATAR_CORNER_RATIO;
+}
+var Avatar = ({
+  src,
+  name,
+  size = "md",
+  kind = "agent",
+  tone = "neutral",
+  ring,
+  decorative = false,
+  colorSeed,
+  className,
+  style,
+  ...rest
+}) => {
+  const [imageFailed, setImageFailed] = useState(false);
+  useEffect(() => {
+    setImageFailed(false);
+  }, [src]);
+  const step = typeof size === "number" ? null : size;
+  const pixels = avatarPixels(size);
+  const measured = step === null ? {
+    "--crewlet-avatar-size": `${pixels}px`,
+    fontSize: Math.max(9, Math.round(pixels * 0.36))
+  } : {};
+  const seeded = tone === "seeded" ? avatarTint(colorSeed ?? name ?? "") : null;
+  const classes = cx(
+    "crewlet-avatar",
+    `crewlet-avatar--${kind}`,
+    step === null ? null : `crewlet-avatar--${step}`,
+    ring === void 0 ? null : `crewlet-avatar--ring-${ring}`,
+    className
+  );
+  if (src && !imageFailed) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        ...rest,
+        className: cx(classes, "crewlet-avatar--image"),
+        style: { ...measured, ...style },
+        src,
+        alt: decorative ? "" : name ?? "",
+        "aria-hidden": decorative ? true : void 0,
+        onError: () => setImageFailed(true)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...rest,
+      className: cx(
+        classes,
+        "crewlet-avatar--fallback",
+        `crewlet-avatar--${tone}`,
+        seeded === null ? null : `crewlet-avatar--tint-${seeded}`
+      ),
+      style: { ...measured, ...style },
+      role: decorative ? void 0 : "img",
+      "aria-hidden": decorative ? true : void 0,
+      "aria-label": decorative ? void 0 : name ? `${name} avatar` : "Avatar",
+      children: getInitials(name)
+    }
+  );
+};
+function counted(count, one, many) {
+  return `${count} ${count === 1 ? one : many}`;
+}
+function avatarStackLabel(members) {
+  const humans = members.filter((member) => member.kind === "human").length;
+  const agents = members.length - humans;
+  const agentWords = counted(agents, "agent", "agents");
+  const humanWords = counted(humans, "person", "people");
+  const who = humans === 0 ? agentWords : agents === 0 ? humanWords : `${agentWords} and ${humanWords}`;
+  return `${who}: ${members.map((member) => member.name).join(", ")}`;
+}
+function AvatarStack({
+  members,
+  max = 4,
+  size = "sm",
+  label,
+  decorative = false,
+  className,
+  style,
+  ...rest
+}) {
+  if (!Number.isInteger(max) || max < 1) {
+    throw new RangeError(`AvatarStack max must be a whole number of at least 1; it was ${max}`);
+  }
+  if (members.length === 0) return null;
+  const shown = members.slice(0, max);
+  const overflow = members.length - shown.length;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...rest,
+      className: cx("crewlet-avatar-stack", className),
+      style: { "--crewlet-avatar-stack-size": `${AVATAR_SIZES[size]}px`, ...style },
+      role: decorative ? void 0 : "img",
+      "aria-label": decorative ? void 0 : label ?? avatarStackLabel(members),
+      "aria-hidden": decorative ? true : void 0,
+      children: [
+        shown.map((member) => /* @__PURE__ */ jsx(
+          Avatar,
+          {
+            className: "crewlet-avatar-stack__member",
+            name: member.name,
+            kind: member.kind,
+            src: member.src,
+            ring: member.ring,
+            size,
+            decorative: true
+          },
+          member.id ?? member.name
+        )),
+        overflow > 0 ? /* @__PURE__ */ jsxs("span", { className: "crewlet-avatar-stack__member crewlet-avatar-stack__more", "aria-hidden": "true", children: [
+          "+",
+          overflow
+        ] }) : null
+      ]
+    }
+  );
+}
+
+export { AVATAR_CORNER_RATIO, AVATAR_SIZES, Avatar, AvatarStack, avatarCorner, avatarPixels, avatarStackLabel, avatarTint, getInitials };

package/dist/{chunk-2EOKFKHX.js → chunk-IG27QX7Q.js}

@@ -1,13 +1,13 @@
 import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { useLayerContainer } from './chunk-7RPGY3JE.js';
-import { focusables, useModalLayer, useBodyScrollLock } from './chunk-ITHXJHBB.js';
-import { IconButton } from './chunk-F27EPQ7D.js';
-import { Button } from './chunk-BZYDZBAN.js';
+import { focusables, useModalLayer, useBodyScrollLock } from './chunk-R25RGPUB.js';
+import { IconButton } from './chunk-4UQ7SMPK.js';
+import { Button } from './chunk-ETYEBKR4.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Modal-XYQJ4BL6.css';
+import './Modal-JAYBS2KS.css';
 import { useId, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
-import { CloseGlyph } from '@crewlethq/icons/glyphs';
+import { XGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function Modal({ open, ...rest }) {
@@ -120,7 +120,7 @@ function ModalFrame({
         {
           className: "crewlet-modal__close",
           label: closeLabel,
-          icon: /* @__PURE__ */ jsx(CloseGlyph, { size: "md" }),
+          icon: /* @__PURE__ */ jsx(XGlyph, { size: "md" }),
           onClick: onClose,
           disabledReason: dismissable ? void 0 : closeDisabledReason
         }
@@ -197,7 +197,7 @@ function ConfirmModal({
   cancelLabel = "Cancel",
   destructive = false,
   confirmVariant,
-  cancelVariant = "tertiary",
+  cancelVariant = "ghost",
   confirmDisabled = false,
   confirmDisabledReason = "Complete the confirmation above to continue.",
   submitting = false,

package/dist/chunk-IKB6HFGK.js

@@ -0,0 +1,55 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './StatCard-KPAFD4E2.css';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var StatCard = ({
+  label,
+  value,
+  unit,
+  sub,
+  subTone = "neutral",
+  delta,
+  trend,
+  icon,
+  tone = "neutral",
+  loading = false,
+  loadingLabel = "Loading",
+  flush = false,
+  className,
+  ...rest
+}) => {
+  const change = loading ? void 0 : delta;
+  const said = sub !== void 0 && sub !== null && sub !== false && sub !== "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      className: cx("crewlet-statcard", `crewlet-statcard--${tone}`, flush && "crewlet-statcard--flush", className),
+      "aria-busy": loading || void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-statcard__label", children: [
+          icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__icon", "aria-hidden": true, children: icon }) : null,
+          label
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-statcard__reading", children: [
+          /* @__PURE__ */ jsx("div", { className: "crewlet-statcard__value", children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__placeholder", "aria-hidden": true }),
+            /* @__PURE__ */ jsx(VisuallyHidden, { children: loadingLabel })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            value,
+            unit ? /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__unit", children: unit }) : null
+          ] }) }),
+          trend && !loading ? /* @__PURE__ */ jsx("div", { className: "crewlet-statcard__trend", children: trend }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: cx("crewlet-statcard__sub", subTone !== "neutral" && `crewlet-statcard__sub--${subTone}`), children: [
+          change ? /* @__PURE__ */ jsx("span", { className: cx("crewlet-statcard__delta", `crewlet-statcard__delta--${change.polarity}`), children: change.value }) : null,
+          change && said ? " " : null,
+          sub
+        ] })
+      ]
+    }
+  );
+};
+
+export { StatCard };

package/dist/{chunk-FBZAKNSX.js → chunk-IPVQKAHO.js}

@@ -1,12 +1,12 @@
 import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
-import { usePopupLayer } from './chunk-ITHXJHBB.js';
-import { IconButton } from './chunk-F27EPQ7D.js';
-import { Button } from './chunk-BZYDZBAN.js';
+import { usePopupLayer } from './chunk-R25RGPUB.js';
+import { IconButton } from './chunk-4UQ7SMPK.js';
+import { Button } from './chunk-ETYEBKR4.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Menu-6DE7I66I.css';
+import './Menu-BT5PMFJI.css';
 import { useId, useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { MoreVertGlyph, CheckGlyph } from '@crewlethq/icons/glyphs';
+import { EllipsisVerticalGlyph, CheckGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var ITEM_SELECTOR = "[role='menuitem'],[role='menuitemradio']";
@@ -29,7 +29,7 @@ function Menu({
   items,
   icon,
   trigger,
-  triggerVariant = "tertiary",
+  triggerVariant = "ghost",
   triggerTabIndex,
   open: controlled,
   onOpenChange,
@@ -113,10 +113,13 @@ function Menu({
     container?.addEventListener(LAYER_REPOSITION_EVENT, onLayout);
     window.addEventListener("resize", onLayout);
     window.addEventListener("scroll", onLayout, true);
+    const resize = typeof ResizeObserver === "function" ? new ResizeObserver(onLayout) : null;
+    if (menu.current) resize?.observe(menu.current);
     return () => {
       container?.removeEventListener(LAYER_REPOSITION_EVENT, onLayout);
       window.removeEventListener("resize", onLayout);
       window.removeEventListener("scroll", onLayout, true);
+      resize?.disconnect();
     };
   }, [open, container, position]);
   useEffect(() => {
@@ -255,7 +258,7 @@ function Menu({
     onKeyDown: onTriggerKeyDown
   };
   return /* @__PURE__ */ jsxs("span", { className: "crewlet-menu-anchor", children: [
-    trigger === void 0 ? /* @__PURE__ */ jsx(IconButton, { ...shared, label, icon: icon ?? /* @__PURE__ */ jsx(MoreVertGlyph, {}), size: "sm" }) : /* @__PURE__ */ jsx(Button, { ...shared, variant: triggerVariant, size: "small", leadingIcon: icon, children: trigger }),
+    trigger === void 0 ? /* @__PURE__ */ jsx(IconButton, { ...shared, label, icon: icon ?? /* @__PURE__ */ jsx(EllipsisVerticalGlyph, {}), size: "sm" }) : /* @__PURE__ */ jsx(Button, { ...shared, variant: triggerVariant, size: "small", leadingIcon: icon, children: trigger }),
     list && container ? createPortal(list, container) : null
   ] });
 }

package/dist/{chunk-3EYF6HKB.js → chunk-IVFJD7WY.js}

@@ -1,14 +1,14 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SidebarNav-QGSFKZYA.css';
+import './SidebarNav-X5NLZNWA.css';
 import { useId, useState } from 'react';
-import { KeyboardArrowDownGlyph } from '@crewlethq/icons/glyphs';
+import { ChevronDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function SidebarNav({ label, className, children }) {
   return /* @__PURE__ */ jsx("nav", { className: cx("crewlet-sidebar-nav", className), "aria-label": label, children });
 }
-function NavGroup({ label, className, children }) {
+function NavGroup({ label, action, className, children }) {
   const id = useId();
   const named = label !== void 0 && label !== null && label !== false && label !== "";
   return /* @__PURE__ */ jsxs(
@@ -18,17 +18,30 @@ function NavGroup({ label, className, children }) {
       role: named ? "group" : void 0,
       "aria-labelledby": named ? id : void 0,
       children: [
-        named ? /* @__PURE__ */ jsx("div", { className: "crewlet-nav-group__label", id, children: label }) : null,
+        named || action ? /* @__PURE__ */ jsxs("div", { className: "crewlet-nav-group__head", children: [
+          named ? /* @__PURE__ */ jsx("span", { className: "crewlet-nav-group__label", id, children: label }) : null,
+          action ? /* @__PURE__ */ jsx("button", { type: "button", className: "crewlet-nav-group__action", "aria-label": action.label, onClick: action.onClick, children: /* @__PURE__ */ jsx("span", { className: "crewlet-nav-group__action-icon", "aria-hidden": true, children: action.icon }) }) : null
+        ] }) : null,
         children
       ]
     }
   );
 }
+function Figure({ figure, className, mark }) {
+  return /* @__PURE__ */ jsx("span", { className, "aria-hidden": true, children: /* @__PURE__ */ jsxs("span", { className: "crewlet-nav-item__figure", children: [
+    mark ? /* @__PURE__ */ jsx("span", { className: "crewlet-nav-item__mark", children: mark }) : null,
+    figure.value
+  ] }) });
+}
+function spoken(figures) {
+  return figures.filter((figure) => figure !== void 0).map((figure) => `, ${String(figure.value)} ${figure.label}`).join("");
+}
 function NavItem({
   label,
   icon,
+  lead,
+  count,
   badge,
-  badgeTone = "neutral",
   href,
   current = false,
   disabledReason,
@@ -53,8 +66,14 @@ function NavItem({
   }
   const inside = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-nav-item__icon", "aria-hidden": true, children: icon }) : null,
-    /* @__PURE__ */ jsx("span", { className: "crewlet-nav-item__label", children: label }),
-    badge ? /* @__PURE__ */ jsx("span", { className: cx("crewlet-nav-item__badge", badgeTone === "attention" && "crewlet-nav-item__badge--attention"), children: badge }) : null
+    lead ? /* @__PURE__ */ jsx("span", { className: "crewlet-nav-item__lead", children: lead }) : null,
+    lead ? " " : null,
+    /* @__PURE__ */ jsxs("span", { className: "crewlet-nav-item__label", children: [
+      label,
+      count || badge ? /* @__PURE__ */ jsx(VisuallyHidden, { children: spoken([count, badge]) }) : null
+    ] }),
+    count ? /* @__PURE__ */ jsx(Figure, { figure: count, mark: count.mark, className: "crewlet-nav-item__count" }) : null,
+    badge ? /* @__PURE__ */ jsx(Figure, { figure: badge, className: "crewlet-nav-item__badge" }) : null
   ] });
   const rowClass = "crewlet-nav-item__row";
   let row;
@@ -96,7 +115,7 @@ function NavItem({
         },
         children: [
           inside,
-          nested ? /* @__PURE__ */ jsx("span", { className: cx("crewlet-nav-item__chevron", open && "crewlet-nav-item__chevron--open"), "aria-hidden": true, children: /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { size: "sm" }) }) : null
+          nested ? /* @__PURE__ */ jsx("span", { className: cx("crewlet-nav-item__chevron", open && "crewlet-nav-item__chevron--open"), "aria-hidden": true, children: /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "sm" }) }) : null
         ]
       }
     );
@@ -120,7 +139,7 @@ function NavItem({
             "aria-controls": `${id}-children`,
             "aria-label": expandLabel ?? (typeof label === "string" ? `${label} sections` : "Sections"),
             onClick: toggle,
-            children: /* @__PURE__ */ jsx("span", { className: cx("crewlet-nav-item__chevron", open && "crewlet-nav-item__chevron--open"), "aria-hidden": true, children: /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { size: "sm" }) })
+            children: /* @__PURE__ */ jsx("span", { className: cx("crewlet-nav-item__chevron", open && "crewlet-nav-item__chevron--open"), "aria-hidden": true, children: /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "sm" }) })
           }
         ) : null
       ] }),

package/dist/{chunk-WOYYD2YR.js → chunk-JGRNTBF2.js}

@@ -1,14 +1,14 @@
-import { Select } from './chunk-OFHBK7RI.js';
-import { Popover } from './chunk-DD5BBGBE.js';
+import { Select } from './chunk-SJQ546ID.js';
+import { Popover } from './chunk-AUS5FNQE.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-GXQ3B46I.js';
-import { Input } from './chunk-O6232G37.js';
-import { isComposing } from './chunk-ITHXJHBB.js';
-import { IconButton } from './chunk-F27EPQ7D.js';
-import { Button } from './chunk-BZYDZBAN.js';
+import { Input } from './chunk-DSUY5F4E.js';
+import { isComposing } from './chunk-R25RGPUB.js';
+import { IconButton } from './chunk-4UQ7SMPK.js';
+import { Button } from './chunk-ETYEBKR4.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TimeWindowPicker-7I7KWCMU.css';
 import { useMemo, useState, useRef, useId, useEffect } from 'react';
-import { ScheduleGlyph, KeyboardArrowDownGlyph, CheckGlyph, ChevronLeftGlyph, ChevronRightGlyph } from '@crewlethq/icons/glyphs';
+import { ClockGlyph, ChevronDownGlyph, CheckGlyph, ChevronLeftGlyph, ChevronRightGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/TimeWindowPicker/mask.ts
@@ -354,9 +354,9 @@ function TimeWindowPicker({
           "aria-expanded": open,
           "aria-label": labels.triggerName(ariaLabel, shown),
           children: [
-            /* @__PURE__ */ jsx(ScheduleGlyph, { className: "crewlet-time-window__icon", size: "sm" }),
+            /* @__PURE__ */ jsx(ClockGlyph, { className: "crewlet-time-window__icon", size: "sm" }),
             /* @__PURE__ */ jsx("span", { className: cx("crewlet-time-window__label", !isSet && "is-placeholder"), children: shown }),
-            /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { className: "crewlet-time-window__chevron", size: "sm" })
+            /* @__PURE__ */ jsx(ChevronDownGlyph, { className: "crewlet-time-window__chevron", size: "sm" })
           ]
         }
       ),
@@ -438,12 +438,12 @@ function Panel({
               Button,
               {
                 size: "small",
-                variant: "tertiary",
+                variant: "ghost",
                 onClick: () => setDraft(normalise(defaultValue)),
                 children: labels.resetLabel
               }
             ) : null,
-            /* @__PURE__ */ jsx(Button, { size: "small", variant: "tertiary", onClick: close, children: labels.cancelLabel }),
+            /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", onClick: close, children: labels.cancelLabel }),
             /* @__PURE__ */ jsx(
               Button,
               {

package/dist/chunk-K3OWD7BJ.js

@@ -0,0 +1,121 @@
+import { useSyncExternalStore, useCallback, useEffect } from 'react';
+
+// src/ThemeSwitcher/preferences.ts
+var THEMES = ["system", "light", "dark"];
+var DENSITIES = ["normal", "compact", "comfortable"];
+function read(key, allowed, fallback) {
+  try {
+    const held2 = globalThis.localStorage?.getItem(key);
+    return allowed.includes(held2) ? held2 : fallback;
+  } catch {
+    return fallback;
+  }
+}
+function write(key, value) {
+  try {
+    const storage = globalThis.localStorage;
+    if (!storage) return false;
+    storage.setItem(key, value);
+    return true;
+  } catch {
+    return false;
+  }
+}
+var listeners = /* @__PURE__ */ new Map();
+var unsaved = /* @__PURE__ */ new Map();
+function held(key, allowed, fallback) {
+  const kept = unsaved.get(key);
+  if (kept !== void 0) return kept;
+  return read(key, allowed, fallback);
+}
+function keep(key, value) {
+  if (write(key, value)) unsaved.delete(key);
+  else unsaved.set(key, value);
+  for (const notify of listeners.get(key) ?? []) notify();
+}
+function subscribeTo(key, notify) {
+  let set = listeners.get(key);
+  if (!set) listeners.set(key, set = /* @__PURE__ */ new Set());
+  set.add(notify);
+  const fromElsewhere = (event) => {
+    if (event.key === key || event.key === null) notify();
+  };
+  const target = typeof window === "undefined" ? null : window;
+  target?.addEventListener("storage", fromElsewhere);
+  return () => {
+    set.delete(notify);
+    if (set.size === 0) listeners.delete(key);
+    target?.removeEventListener("storage", fromElsewhere);
+  };
+}
+function useStoredChoice(key, allowed, fallback, apply) {
+  const subscribe = useCallback((notify) => subscribeTo(key, notify), [key]);
+  const value = useSyncExternalStore(
+    subscribe,
+    () => held(key, allowed, fallback),
+    () => fallback
+  );
+  useEffect(() => {
+    apply(value);
+  }, [apply, value]);
+  const choose = useCallback(
+    (next) => {
+      apply(next);
+      keep(key, next);
+    },
+    [apply, key]
+  );
+  return [value, choose];
+}
+function root() {
+  return typeof document === "undefined" ? null : document.documentElement;
+}
+function applyTheme(theme) {
+  const el = root();
+  if (!el) return;
+  if (theme === "system") el.removeAttribute("data-theme");
+  else el.setAttribute("data-theme", theme);
+}
+function applyDensity(density) {
+  const el = root();
+  if (!el) return;
+  if (density === "normal") el.removeAttribute("data-density");
+  else el.setAttribute("data-density", density);
+}
+function useThemePreference({
+  storageKey
+}) {
+  return useStoredChoice(storageKey, THEMES, "system", applyTheme);
+}
+function useDensityPreference({
+  storageKey
+}) {
+  return useStoredChoice(storageKey, DENSITIES, "normal", applyDensity);
+}
+var LIGHT_SYSTEM = "(prefers-color-scheme: light)";
+function systemLight() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(LIGHT_SYSTEM).matches : false;
+}
+function subscribeToSystem(notify) {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {
+  };
+  const list = window.matchMedia(LIGHT_SYSTEM);
+  list.addEventListener("change", notify);
+  return () => list.removeEventListener("change", notify);
+}
+function useSystemTheme() {
+  const light = useSyncExternalStore(subscribeToSystem, systemLight, () => false);
+  return light ? "light" : "dark";
+}
+function resolveTheme(preference, system) {
+  return preference === "system" ? system : preference;
+}
+function applyStoredPreferences({ themeKey, densityKey }) {
+  const theme = themeKey ? held(themeKey, THEMES, "system") : "system";
+  const density = densityKey ? held(densityKey, DENSITIES, "normal") : "normal";
+  applyTheme(theme);
+  applyDensity(density);
+  return { theme, density };
+}
+
+export { applyDensity, applyStoredPreferences, applyTheme, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference };

package/dist/{chunk-BJSKPEZI.js → chunk-KD4H66L6.js}

@@ -1,8 +1,8 @@
-import { Tag } from './chunk-S2XHHEW4.js';
-import { useListbox } from './chunk-GTOUGQQK.js';
+import { Tag } from './chunk-74KMX7YH.js';
+import { useListbox } from './chunk-6MU7HNB4.js';
 import { announce } from './chunk-RSAQOKH3.js';
-import { isComposing } from './chunk-ITHXJHBB.js';
-import { IconButton } from './chunk-F27EPQ7D.js';
+import { isComposing } from './chunk-R25RGPUB.js';
+import { IconButton } from './chunk-4UQ7SMPK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TagsInput-W4P36PRJ.css';
 import { forwardRef, useState, useRef, useId, useImperativeHandle, useEffect, useMemo, useLayoutEffect } from 'react';
@@ -44,7 +44,6 @@ var TagsInput = forwardRef(function TagsInput2({
   const [open, setOpen] = useState(false);
   const field = useRef(null);
   const chips = useRef(null);
-  const list = useRef(null);
   const generatedId = useId();
   const fieldId = id ?? generatedId;
   useImperativeHandle(ref, () => ({ focus: () => field.current?.focus() }));
@@ -87,9 +86,9 @@ var TagsInput = forwardRef(function TagsInput2({
     const want = wanted.current;
     if (!want) return;
     wanted.current = null;
-    const list2 = chips.current;
+    const list = chips.current;
     const control = (index2, prefer) => {
-      const chip = list2?.querySelector(`[data-chip="${index2}"]`);
+      const chip = list?.querySelector(`[data-chip="${index2}"]`);
       if (!chip) return null;
       const order = prefer === "remove" ? ["button:not([data-move])"] : prefer === "earlier" ? ['[data-move="earlier"]', '[data-move="later"]', "button:not([data-move])"] : ['[data-move="later"]', '[data-move="earlier"]', "button:not([data-move])"];
       for (const selector of order) {
@@ -155,15 +154,6 @@ var TagsInput = forwardRef(function TagsInput2({
     },
     onClose: () => setOpen(false)
   });
-  useEffect(() => {
-    const box = list.current;
-    const row = box?.querySelector('[data-active="true"]');
-    if (!box || !row) return;
-    const bounds = box.getBoundingClientRect();
-    const spot = row.getBoundingClientRect();
-    if (spot.top < bounds.top) box.scrollTop -= bounds.top - spot.top;
-    else if (spot.bottom > bounds.bottom) box.scrollTop += spot.bottom - bounds.bottom;
-  }, [listbox.active, flat.length, lists]);
   function onKeyDown(event) {
     if (isComposing(event)) return;
     if (picking && !showing && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
@@ -330,10 +320,7 @@ var TagsInput = forwardRef(function TagsInput2({
       lists ? /* @__PURE__ */ jsx(
         "div",
         {
-          ref: (el) => {
-            list.current = el;
-            listbox.listRef(el);
-          },
+          ref: listbox.listRef,
           id: listbox.listId,
           className: "crewlet-tags-input__list crewlet-listbox",
           role: "listbox",

package/dist/{chunk-SFZOKW2G.js → chunk-KJ34ZBBI.js}

@@ -1,6 +1,7 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Kbd-W66MXQI5.css';
+import './Kbd-JPLDVJIP.css';
+import { Fragment } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function isApplePlatform() {
@@ -38,13 +39,17 @@ function keyGlyph(key, apple) {
   return { glyph: shown, spoken: shown };
 }
 var Kbd = ({ subtle = false, keys, apple, className, children, ...rest }) => {
+  const cap = cx("crewlet-kbd", subtle && "crewlet-kbd--subtle");
   if (keys === void 0) {
-    return /* @__PURE__ */ jsx("kbd", { ...rest, className: cx("crewlet-kbd", subtle && "crewlet-kbd--subtle", className), children });
+    return /* @__PURE__ */ jsx("kbd", { ...rest, className: cx(cap, className), children });
   }
   const onApple = apple ?? isApplePlatform();
   const mapped = keys.map((key) => keyGlyph(key, onApple));
   return /* @__PURE__ */ jsxs("span", { ...rest, className: cx("crewlet-kbd-combo", className), children: [
-    /* @__PURE__ */ jsx("span", { className: "crewlet-kbd-keys", "aria-hidden": true, children: mapped.map((key, index) => /* @__PURE__ */ jsx("kbd", { className: cx("crewlet-kbd", subtle && "crewlet-kbd--subtle"), children: key.glyph }, index)) }),
+    /* @__PURE__ */ jsx("kbd", { className: cap, "aria-hidden": true, children: mapped.map((key, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      index > 0 && !onApple ? "+" : null,
+      /* @__PURE__ */ jsx("kbd", { className: "crewlet-kbd__key", children: key.glyph })
+    ] }, index)) }),
     /* @__PURE__ */ jsx(VisuallyHidden, { children: mapped.map((key) => key.spoken).join(" plus ") })
   ] });
 };