@crewlethq/ui 0.4.3 → 0.5.0

package/dist/chunk-4AK52VHB.js

@@ -0,0 +1,88 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './SegmentedMeter-KQNML2TW.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function settle(difference, scale) {
+  if (Math.abs(difference) <= scale * 1e-12) return 0;
+  return Number(difference.toPrecision(12));
+}
+function checked(segments, total) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const segment of segments) {
+    if (seen.has(segment.id)) {
+      throw new RangeError(`SegmentedMeter segment ids must be unique; "${segment.id}" is used twice`);
+    }
+    seen.add(segment.id);
+    if (!Number.isFinite(segment.value) || segment.value < 0) {
+      throw new RangeError(
+        `SegmentedMeter segment "${segment.id}" must be a finite count of at least 0; it was ${segment.value}`
+      );
+    }
+  }
+  if (total !== void 0 && (!Number.isFinite(total) || total < 0)) {
+    throw new RangeError(`SegmentedMeter total must be a finite count of at least 0; it was ${total}`);
+  }
+}
+function measure(segments, total) {
+  const sum = segments.reduce((running, segment) => running + segment.value, 0);
+  const whole = total ?? sum;
+  const scale = Math.max(whole, sum);
+  const remainder = Math.max(0, settle(whole - sum, scale));
+  return { whole, scale, remainder };
+}
+function segmentedMeterLabel(segments, total, remainderLabel) {
+  checked(segments, total);
+  const { whole, remainder } = measure(segments, total);
+  const words = segments.filter((segment) => segment.value > 0).map((segment) => `${segment.value} ${segment.label}`);
+  if (remainder > 0 && remainderLabel !== void 0) words.push(`${remainder} ${remainderLabel}`);
+  return `${words.length === 0 ? "0" : words.join(", ")} of ${whole}`;
+}
+function SegmentedMeter({
+  segments,
+  total,
+  remainderLabel,
+  size = "default",
+  label,
+  decorative = false,
+  className,
+  style,
+  ...rest
+}) {
+  checked(segments, total);
+  const { scale, remainder } = measure(segments, total);
+  const parts = segments.filter((segment) => segment.value > 0);
+  const share = (value) => `${value / scale * 100}%`;
+  const leftover = scale === 0 ? "100%" : remainder > 0 ? share(remainder) : null;
+  const drawn = parts.length + (leftover === null ? 0 : 1);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      className: cx("crewlet-segmented-meter", `crewlet-segmented-meter--${size}`, className),
+      style: { "--crewlet-segmented-meter-count": drawn, ...style },
+      role: decorative ? void 0 : "img",
+      "aria-label": decorative ? void 0 : label ?? segmentedMeterLabel(segments, total, remainderLabel),
+      "aria-hidden": decorative ? true : void 0,
+      children: [
+        parts.map((segment) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "crewlet-segmented-meter__segment",
+            "data-tone": segment.tone,
+            style: { flexBasis: share(segment.value) }
+          },
+          segment.id
+        )),
+        leftover === null ? null : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "crewlet-segmented-meter__segment crewlet-segmented-meter__remainder",
+            style: { flexBasis: leftover }
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { SegmentedMeter, segmentedMeterLabel };

package/dist/{chunk-7EM5T4ME.js → chunk-4IQD3HUQ.js}

@@ -1,5 +1,5 @@
-import { Button } from './chunk-BZYDZBAN.js';
-import './ErrorBoundary-ME36CQTA.css';
+import { Button } from './chunk-ETYEBKR4.js';
+import './ErrorBoundary-U2PA3LY2.css';
 import { Component } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-YODNNSZL.js → chunk-4PZ6FJKW.js}

@@ -1,29 +1,58 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Meter-SKOOXQBC.css';
+import './Meter-5VCSFMZW.css';
 import { useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var METER_STATES = Object.freeze(["ok", "near", "refusing"]);
+var DEFAULT_METER_THRESHOLDS = Object.freeze({ near: 0.75 });
+var STATE_TONES = {
+  ok: "quantity",
+  near: "warning",
+  refusing: "danger"
+};
+function meterStateTone(state) {
+  if (!Object.hasOwn(STATE_TONES, state)) {
+    throw new RangeError(`Meter state must be one of ${METER_STATES.join(", ")}; it was ${String(state)}`);
+  }
+  return STATE_TONES[state];
+}
+function meterState(fraction, thresholds = DEFAULT_METER_THRESHOLDS) {
+  const { near } = thresholds;
+  if (!Number.isFinite(near) || near <= 0 || near > 1) {
+    throw new RangeError(`Meter thresholds.near must be a fraction of the limit above 0 and at most 1; it was ${near}`);
+  }
+  if (fraction >= 1) return "refusing";
+  if (fraction >= near) return "near";
+  return "ok";
+}
 function meterTone(percent) {
-  if (percent >= 100) return "danger";
-  if (percent >= 75) return "warning";
-  return "brand";
+  return meterStateTone(meterState(percent / 100));
 }
 function progressTone(percent) {
-  return percent >= 100 ? "success" : "brand";
+  return percent >= 100 ? "success" : "quantity";
+}
+function drawnTone({
+  state,
+  tone,
+  polarity = "spent",
+  thresholds
+}, fraction, percent) {
+  if (state !== void 0) return meterStateTone(state);
+  if (tone !== void 0) return tone;
+  if (polarity === "progress") return progressTone(percent);
+  return meterStateTone(meterState(fraction, thresholds));
 }
-var RAMPS = {
-  spent: meterTone,
-  progress: progressTone
-};
 function Meter({
   value,
   max,
   label,
   valueText,
   hint,
+  state,
   tone,
-  polarity = "spent",
+  polarity,
+  thresholds,
   size = "default",
   hideLabel = false,
   className,
@@ -31,8 +60,9 @@ function Meter({
 }) {
   const labelId = useId();
   const bounded = max > 0;
-  const percent = bounded ? Math.min(100, Math.max(0, value / max * 100)) : 0;
-  const drawn = tone ?? RAMPS[polarity](percent);
+  const fraction = bounded ? value / max : 0;
+  const percent = bounded ? Math.min(100, Math.max(0, fraction * 100)) : 0;
+  const drawn = drawnTone({ state, tone, polarity, thresholds }, fraction, percent);
   const trailing = hint ?? valueText;
   const reported = bounded ? Math.min(max, Math.max(0, value)) : value;
   const spoken = bounded ? valueText ?? (reported === value ? void 0 : `${value} of ${max}`) : void 0;
@@ -60,4 +90,4 @@ function Meter({
   ] });
 }
 
-export { Meter, meterTone, progressTone };
+export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone };

package/dist/{chunk-F27EPQ7D.js → chunk-4UQ7SMPK.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './IconButton-VQGNMJDI.css';
+import './IconButton-TVEUWK6L.css';
 import { forwardRef, useId, Children, isValidElement, cloneElement } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 

package/dist/chunk-5QWIJSQM.js

@@ -0,0 +1,73 @@
+import { StatusDot } from './chunk-WIATRXEJ.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Stepper-HW4JM3YH.css';
+import { CheckGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function Stepper({
+  steps,
+  current,
+  label,
+  tone = "info",
+  pulse = false,
+  doneLabel = "Done",
+  className,
+  ...rest
+}) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const step of steps) {
+    if (seen.has(step.id)) throw new RangeError(`Stepper step ids must be unique; "${step.id}" is used twice`);
+    seen.add(step.id);
+  }
+  const at = current === null ? steps.length : steps.findIndex((step) => step.id === current);
+  if (at < 0) {
+    throw new RangeError(
+      `Stepper current must be the id of one of its steps, or null once every step is done; "${current}" is not one of ${steps.map((step) => `"${step.id}"`).join(", ")}`
+    );
+  }
+  if (steps.length === 0) return null;
+  const stateOf = (index) => index < at ? "done" : index === at ? "current" : "later";
+  return (
+    /*
+     * `role="list"` although an `ol` already has one, which is why the lint
+     * rule that calls it redundant is silenced here rather than obeyed, as
+     * `Legend` and `DiffList` silence it: the stylesheet takes the markers off,
+     * and WebKit answers a marker-less list as a group of paragraphs, so a
+     * reader would no longer be told how many steps there are before hearing
+     * them. The role puts that back.
+     */
+    // eslint-disable-next-line jsx-a11y/no-redundant-roles
+    /* @__PURE__ */ jsx(
+      "ol",
+      {
+        ...rest,
+        role: "list",
+        className: cx("crewlet-stepper", `crewlet-stepper--${tone}`, className),
+        "aria-label": label,
+        children: steps.map((step, index) => {
+          const state = stateOf(index);
+          return /* @__PURE__ */ jsx(
+            "li",
+            {
+              className: cx("crewlet-stepper__step", `crewlet-stepper__step--${state}`),
+              "aria-current": state === "current" ? "step" : void 0,
+              children: /* @__PURE__ */ jsxs("span", { className: "crewlet-stepper__chip", children: [
+                state === "done" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(CheckGlyph, { size: "xs", className: "crewlet-stepper__check" }),
+                  /* @__PURE__ */ jsx(VisuallyHidden, { children: doneLabel }),
+                  " "
+                ] }) : null,
+                state === "current" ? /* @__PURE__ */ jsx(StatusDot, { tone, pulse, className: "crewlet-stepper__dot" }) : null,
+                /* @__PURE__ */ jsx("span", { className: "crewlet-stepper__label", children: step.label })
+              ] })
+            },
+            step.id
+          );
+        })
+      }
+    )
+  );
+}
+
+export { Stepper };

package/dist/{chunk-GTOUGQQK.js → chunk-6MU7HNB4.js}

@@ -1,5 +1,5 @@
-import { usePopupLayer, isComposing } from './chunk-ITHXJHBB.js';
-import './Listbox-X2DOTSQA.css';
+import { usePopupLayer, isComposing } from './chunk-R25RGPUB.js';
+import './Listbox-6WJNJQVQ.css';
 import { useState, useRef, useCallback, useEffect } from 'react';
 
 function useListbox({
@@ -12,7 +12,7 @@ function useListbox({
   popup = true
 }) {
   const [at, setAt] = useState(0);
-  const active = count === 0 ? -1 : Math.min(Math.max(at, 0), count - 1);
+  const active = count === 0 ? -1 : Math.min(Math.max(at, -1), count - 1);
   const listId = `${id}-listbox`;
   const layer = usePopupLayer({ open: open && popup, onDismiss: () => onClose() });
   const list = useRef(null);
@@ -25,13 +25,13 @@ function useListbox({
   );
   useEffect(() => {
     const box = list.current;
-    const row = box?.querySelector('[aria-selected="true"]');
-    if (!box || !row) return;
+    const row = active >= 0 ? document.getElementById(`${listId}-${active}`) : null;
+    if (!box || !row || !box.contains(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;
-  }, [active, count, open]);
+  }, [active, count, open, listId]);
   function onKeyDown(event) {
     if (!open || isComposing(event)) return false;
     if (event.key === "Escape") {
@@ -52,6 +52,7 @@ function useListbox({
         setAt((active - 1 + count) % count);
         return true;
       case "Enter":
+        if (event.metaKey || event.ctrlKey || event.altKey) return false;
         event.preventDefault();
         onCommit(active);
         return true;
@@ -69,6 +70,7 @@ function useListbox({
     setActive: setAt,
     listId,
     listRef,
+    panelRef: layer.panelRef,
     anchorRef: layer.insideRef,
     optionId: (index) => `${listId}-${index}`,
     onKeyDown,
@@ -82,7 +84,7 @@ function useListbox({
   };
 }
 var TYPE_AHEAD_WINDOW = 500;
-function useOptionKeys({ listbox, count, disabled, textOf }) {
+function useOptionKeys({ listbox, count, disabled, textOf, ends = true }) {
   const typed = useRef({ text: "", at: 0 });
   const { active, setActive } = listbox;
   const step = useCallback(
@@ -96,7 +98,7 @@ function useOptionKeys({ listbox, count, disabled, textOf }) {
     },
     [count, disabled]
   );
-  const opening = useCallback((chosen) => chosen >= 0 && !disabled?.(chosen) ? chosen : Math.max(step(0, 1), 0), [disabled, step]);
+  const opening = useCallback((chosen) => chosen >= 0 && !disabled?.(chosen) ? chosen : step(0, 1), [disabled, step]);
   const typeAhead = useCallback(
     (key) => {
       if (!textOf) return false;
@@ -118,6 +120,7 @@ function useOptionKeys({ listbox, count, disabled, textOf }) {
   );
   const onKeyDown = useCallback(
     (event) => {
+      if (isComposing(event)) return false;
       if (event.key === "ArrowDown" || event.key === "ArrowUp") {
         event.preventDefault();
         const by = event.key === "ArrowDown" ? 1 : -1;
@@ -125,7 +128,7 @@ function useOptionKeys({ listbox, count, disabled, textOf }) {
         if (next >= 0) setActive(next);
         return true;
       }
-      if (event.key === "Home" || event.key === "End") {
+      if (ends && (event.key === "Home" || event.key === "End")) {
         event.preventDefault();
         const next = event.key === "Home" ? step(0, 1) : step(count - 1, -1);
         if (next >= 0) setActive(next);
@@ -139,7 +142,7 @@ function useOptionKeys({ listbox, count, disabled, textOf }) {
       }
       return false;
     },
-    [active, count, setActive, step, typeAhead]
+    [active, count, ends, setActive, step, typeAhead]
   );
   return { onKeyDown, step, opening };
 }

package/dist/{chunk-S2XHHEW4.js → chunk-74KMX7YH.js}

@@ -1,7 +1,7 @@
-import { StatusDot } from './chunk-PZSWF74H.js';
+import { StatusDot } from './chunk-WIATRXEJ.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Tag-VNZEYLB6.css';
-import { CloseGlyph } from '@crewlethq/icons/glyphs';
+import './Tag-GBE7LQJP.css';
+import { XGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function Tag(props) {
@@ -63,7 +63,7 @@ function Tag(props) {
         onRemove();
       },
       "aria-label": removeAriaLabel,
-      children: /* @__PURE__ */ jsx(CloseGlyph, { size: "xs" })
+      children: /* @__PURE__ */ jsx(XGlyph, { size: "xs" })
     }
   );
   if (split) {

package/dist/{chunk-WNI2WSJF.js → chunk-7KBNFFM3.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './BrandLockup-6ISDEHPJ.css';
+import './BrandLockup-JKGXFCZF.css';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function BrandLockup({ name, mark, context, href, renderLink, className }) {

package/dist/{chunk-DD5BBGBE.js → chunk-AUS5FNQE.js}

@@ -1,5 +1,5 @@
 import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
-import { usePopupLayer, focusables } from './chunk-ITHXJHBB.js';
+import { usePopupLayer, focusables } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Popover-WJGCF3ZQ.css';
 import { useId, useState, useRef, useCallback, useLayoutEffect, useEffect, cloneElement } from 'react';
@@ -50,10 +50,10 @@ function Popover({
     const inHost = container !== document.body;
     const host = inHost ? container.getBoundingClientRect() : viewportBounds();
     const rect = at.getBoundingClientRect();
+    box.style.width = width === "match" ? `${rect.width}px` : "";
     const own = box.getBoundingClientRect();
-    const panelWidth = width === "match" ? rect.width : own.width;
     const local = {
-      x: (align === "end" ? rect.right - panelWidth : rect.left) - (inHost ? host.x : 0),
+      x: (align === "end" ? rect.right - own.width : rect.left) - (inHost ? host.x : 0),
       y: rect.top - (inHost ? host.y : 0),
       width: rect.width,
       height: rect.height
@@ -69,15 +69,16 @@ function Popover({
       close("anchor-gone");
       return;
     }
+    const asked = width === "match" ? rect.width : void 0;
     const spot = placePopup(
       local,
-      { width: panelWidth, height: own.height },
+      { width: own.width, height: own.height },
       bounds,
       LAYER_GAP,
       side === "top" ? "above" : "below"
     );
     setPlace(
-      (was) => was && was.left === spot.left && was.top === spot.top && was.side === spot.side && was.width === panelWidth ? was : { left: spot.left, top: spot.top, side: spot.side, width: width === "match" ? panelWidth : void 0 }
+      (was) => was && was.left === spot.left && was.top === spot.top && was.side === spot.side && was.width === asked ? was : { left: spot.left, top: spot.top, side: spot.side, width: asked }
     );
   }, [align, close, container, side, width]);
   useLayoutEffect(() => {
@@ -87,10 +88,13 @@ function Popover({
     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 (panel.current) resize?.observe(panel.current);
     return () => {
       container?.removeEventListener(LAYER_REPOSITION_EVENT, onLayout);
       window.removeEventListener("resize", onLayout);
       window.removeEventListener("scroll", onLayout, true);
+      resize?.disconnect();
     };
   }, [open, container, position]);
   useEffect(() => {

package/dist/{chunk-CMEE37QJ.js → chunk-BMYPGGPV.js}

@@ -1,12 +1,12 @@
 import { LayerNodeBridge } from './chunk-53DVJCVW.js';
 import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-7RPGY3JE.js';
-import { IconButton } from './chunk-F27EPQ7D.js';
-import { Button } from './chunk-BZYDZBAN.js';
+import { IconButton } from './chunk-4UQ7SMPK.js';
+import { Button } from './chunk-ETYEBKR4.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Canvas-Q6JETCWR.css';
 import { useId, useRef, useState, useCallback, useLayoutEffect, useImperativeHandle, useEffect } from 'react';
-import { ZoomOutGlyph, ZoomInGlyph, FitScreenGlyph } from '@crewlethq/icons/glyphs';
+import { ZoomOutGlyph, ZoomInGlyph, FullscreenGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/Canvas/geometry.ts
@@ -528,7 +528,7 @@ function Canvas({
                 {
                   size: "sm",
                   label: text.fit,
-                  icon: /* @__PURE__ */ jsx(FitScreenGlyph, {}),
+                  icon: /* @__PURE__ */ jsx(FullscreenGlyph, {}),
                   onClick: () => content && apply(fitView(content, sizeNow.current), "near"),
                   disabled: !ready
                 }

package/dist/{chunk-H4FBTAYS.js → chunk-BNCCEER3.js}

@@ -1,12 +1,12 @@
-import { TreeGrid } from './chunk-5SDBMKUO.js';
-import { createTreeModel } from './chunk-NTRZGNEX.js';
-import { OrgLabel } from './chunk-5C5YMZQU.js';
-import { AddPill } from './chunk-S4GZWSKR.js';
-import { IconButton } from './chunk-F27EPQ7D.js';
+import { TreeGrid } from './chunk-FIFNP6PL.js';
+import { createTreeModel } from './chunk-S3BCVWTU.js';
+import { OrgLabel } from './chunk-WOFOMTGB.js';
+import { AddPill } from './chunk-OM5E3TTK.js';
+import { IconButton } from './chunk-4UQ7SMPK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './OrgTable-VWMFC3TB.css';
 import { useMemo, useRef, useImperativeHandle, useCallback } from 'react';
-import { KeyboardArrowDownGlyph, KeyboardArrowUpGlyph } from '@crewlethq/icons/glyphs';
+import { ChevronDownGlyph, ChevronUpGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 var LABELS = {
@@ -69,7 +69,7 @@ function OrgTable({
           size: "sm",
           label: text.expandAll,
           title: text.expandAll,
-          icon: /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, {}),
+          icon: /* @__PURE__ */ jsx(ChevronDownGlyph, {}),
           onClick: () => grid.current?.expandAll()
         }
       ),
@@ -79,7 +79,7 @@ function OrgTable({
           size: "sm",
           label: text.collapseAll,
           title: text.collapseAll,
-          icon: /* @__PURE__ */ jsx(KeyboardArrowUpGlyph, {}),
+          icon: /* @__PURE__ */ jsx(ChevronUpGlyph, {}),
           onClick: () => grid.current?.collapseAll()
         }
       )

package/dist/chunk-C5WJUZVR.js

@@ -0,0 +1,56 @@
+import { useThemePreference, useSystemTheme, resolveTheme } from './chunk-K3OWD7BJ.js';
+import { IconButton } from './chunk-4UQ7SMPK.js';
+import { SunGlyph, MoonGlyph } from '@crewlethq/icons/glyphs';
+import { jsx } from 'react/jsx-runtime';
+
+function ThemeToggle(props) {
+  if (props.value !== void 0) {
+    const { storageKey: _none, ...controlled } = props;
+    return /* @__PURE__ */ jsx(ToggleButton, { ...controlled });
+  }
+  const { value: _stored, storageKey = "crewlet_theme", ...button } = props;
+  return /* @__PURE__ */ jsx(StoredThemeToggle, { ...button, storageKey });
+}
+function StoredThemeToggle({
+  storageKey,
+  onChange,
+  ...button
+}) {
+  const [theme, choose] = useThemePreference({ storageKey });
+  return /* @__PURE__ */ jsx(
+    ToggleButton,
+    {
+      ...button,
+      value: theme,
+      onChange: (next) => {
+        choose(next);
+        onChange?.(next);
+      }
+    }
+  );
+}
+function ToggleButton({
+  value,
+  onChange,
+  toLightLabel = "Switch to the light theme",
+  toDarkLabel = "Switch to the dark theme",
+  size = "sm",
+  variant = "ghost",
+  className
+}) {
+  const system = useSystemTheme();
+  const next = resolveTheme(value, system) === "dark" ? "light" : "dark";
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      label: next === "light" ? toLightLabel : toDarkLabel,
+      icon: next === "light" ? /* @__PURE__ */ jsx(SunGlyph, {}) : /* @__PURE__ */ jsx(MoonGlyph, {}),
+      size,
+      variant,
+      className,
+      onClick: () => onChange(next)
+    }
+  );
+}
+
+export { ThemeToggle };

package/dist/{chunk-5WS6L6FA.js → chunk-CAIHUYXV.js}

@@ -1,14 +1,14 @@
-import { avatarSquareCorner, Avatar } from './chunk-PNFASD6F.js';
-import './ImageUpload-HKFIZR6D.css';
+import { avatarCorner, Avatar } from './chunk-IA232OTU.js';
+import './ImageUpload-YCHJMUGX.css';
 import { useRef } from 'react';
-import { PhotoCameraGlyph, CloseGlyph } from '@crewlethq/icons/glyphs';
+import { CameraGlyph, XGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var ImageUpload = ({
   src,
   name,
   size = 64,
-  shape = "square",
+  kind = "agent",
   readOnly = false,
   uploading = false,
   accept = "image/*",
@@ -41,7 +41,7 @@ var ImageUpload = ({
   const empty = !src && !readOnly;
   const wrapperClasses = [
     "crewlet-image-upload",
-    `crewlet-image-upload--${shape}`,
+    `crewlet-image-upload--${kind}`,
     uploading ? "is-uploading" : "",
     empty ? "is-empty" : "",
     className
@@ -54,7 +54,7 @@ var ImageUpload = ({
      * showed the badge's corners through the overlay at every size but the one
      * the step was chosen for.
      */
-    "--crewlet-image-upload-corner": avatarSquareCorner(size),
+    "--crewlet-image-upload-corner": `${avatarCorner(size)}px`,
     ...style
   };
   const triggerLabel = uploading ? "Uploading image" : src ? "Change image" : "Upload image";
@@ -69,9 +69,9 @@ var ImageUpload = ({
         "aria-label": triggerLabel,
         "aria-busy": uploading,
         children: [
-          /* @__PURE__ */ jsx(Avatar, { src, name, size, shape }),
+          /* @__PURE__ */ jsx(Avatar, { src, name, size, kind }),
           !readOnly ? /* @__PURE__ */ jsx("span", { className: "crewlet-image-upload__overlay", "aria-hidden": true, children: uploading ? /* @__PURE__ */ jsx("span", { className: "crewlet-image-upload__spinner" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(PhotoCameraGlyph, { size: "lg" }),
+            /* @__PURE__ */ jsx(CameraGlyph, { size: "lg" }),
             /* @__PURE__ */ jsx("span", { className: "crewlet-image-upload__overlay-text", children: src ? "Change" : "Upload" })
           ] }) }) : null
         ]
@@ -85,7 +85,7 @@ var ImageUpload = ({
         onClick: handleRemove,
         disabled: uploading,
         "aria-label": "Remove image",
-        children: /* @__PURE__ */ jsx(CloseGlyph, { size: "sm" })
+        children: /* @__PURE__ */ jsx(XGlyph, { size: "sm" })
       }
     ) : null,
     !readOnly ? (

package/dist/{chunk-XV6WRMBC.js → chunk-CQY5NTRS.js}

@@ -1,5 +1,5 @@
 import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
-import { usePopupLayer } from './chunk-ITHXJHBB.js';
+import { usePopupLayer } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Tooltip-LKQF7CE4.css';
 import { useId, useState, useRef, useCallback, useEffect, useLayoutEffect, cloneElement } from 'react';
@@ -123,10 +123,13 @@ function Tooltip({
     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 (panel.current) resize?.observe(panel.current);
     return () => {
       container?.removeEventListener(LAYER_REPOSITION_EVENT, onLayout);
       window.removeEventListener("resize", onLayout);
       window.removeEventListener("scroll", onLayout, true);
+      resize?.disconnect();
     };
   }, [open, container, position]);
   useEffect(() => {

package/dist/{chunk-UOGSZKLT.js → chunk-D6EVJUGU.js}

@@ -1,5 +1,5 @@
-import { useListbox } from './chunk-GTOUGQQK.js';
-import { Input } from './chunk-O6232G37.js';
+import { useListbox } from './chunk-6MU7HNB4.js';
+import { Input } from './chunk-DSUY5F4E.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Combobox-4FUVYIE7.css';
 import { forwardRef, useId, useMemo, useRef, useCallback } from 'react';

package/dist/{chunk-6ZFVFA56.js → chunk-DHPUMOTX.js}

@@ -1,8 +1,8 @@
-import { useRoving, tabStop, tabId } from './chunk-QEUY3A5P.js';
+import { useRoving, tabStop, tabId } from './chunk-QY7UU5ZB.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Tabs-VLICJFVB.css';
+import './Tabs-XCNPHA7B.css';
 import './SegmentedControl-X3BI3XU4.css';
 import { useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';