@crewlethq/ui 0.54.1 → 0.56.0

package/dist/{chunk-34ANLQW2.js → chunk-UVYGMCJ4.js}

@@ -1,12 +1,14 @@
 import { useMediaMatch } from './chunk-RTPQDNW3.js';
-import { Menu } from './chunk-TMM32U7D.js';
+import { Menu } from './chunk-TKS7FTTO.js';
+import { PeekContext, AsideContext, ResizeHandle, clampSize } from './chunk-PIYJNCN7.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { useModalLayer, focusables } from './chunk-H5XTJ7GJ.js';
-import { IconButton } from './chunk-LACA4JGC.js';
+import { IconButton } from './chunk-2BQYODY3.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';
-import './AppShell-5LPXYUV3.css';
+import './AppShell-ZVCJRGXH.css';
+import './ResizeHandle-2UNSZ4ZQ.css';
 import { createContext, forwardRef, useContext, useId, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
 import { ChevronUpGlyph, ChevronsUpDownGlyph, ChevronRightGlyph, MenuGlyph } from '@crewlethq/icons/glyphs';
@@ -76,6 +78,7 @@ function AccountRow({
     actions ? /* @__PURE__ */ jsx("div", { className: "crewlet-account-row__actions", children: actions }) : null
   ] });
 }
+var APP_SHELL_ASIDE_WIDTH = 420;
 var NARROW = `(width < ${breakpoint.shell})`;
 var AppShellContext = createContext(null);
 function useAppShell() {
@@ -94,11 +97,22 @@ function AppShell({
   navigationKey,
   toggleLabel = "Sections",
   skipLabel = "Skip to content",
+  aside,
+  asideWidth = APP_SHELL_ASIDE_WIDTH,
+  asideReserve,
+  asideLabel,
+  asideShape = "column",
+  onAsideClose,
+  asideResize,
+  peek,
+  peekShape = "column",
   className,
   style,
   children,
   ...rest
 }) {
+  const hasAside = aside !== void 0 && aside !== null && aside !== false;
+  const hasPeek = peek !== void 0 && peek !== null && peek !== false;
   const generatedId = useId();
   const railId = `${generatedId}-rail`;
   const main = mainId ?? `${generatedId}-main`;
@@ -132,6 +146,25 @@ function AppShell({
     observer.observe(scroller);
     return () => observer.disconnect();
   }, [scroller]);
+  const root = useRef(null);
+  const sheet = useRef(null);
+  const asideColumn = hasAside && asideShape === "column";
+  const [occupied, setOccupied] = useState(null);
+  useLayoutEffect(() => {
+    const frame = root.current;
+    const page = sheet.current;
+    if (!asideColumn || !frame || !page) {
+      setOccupied(null);
+      return void 0;
+    }
+    const measure = () => setOccupied(Math.max(0, Math.round(frame.getBoundingClientRect().right - page.getBoundingClientRect().right)));
+    measure();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(measure);
+    observer.observe(page);
+    observer.observe(frame);
+    return () => observer.disconnect();
+  }, [asideColumn]);
   const shell = {
     narrow,
     drawerOpen,
@@ -147,6 +180,7 @@ function AppShell({
     "div",
     {
       ...rest,
+      ref: root,
       className: cx(
         "crewlet-app-shell",
         fill && "crewlet-app-shell--fill",
@@ -155,10 +189,21 @@ function AppShell({
         !shell.hasRail && "crewlet-app-shell--no-rail",
         className
       ),
+      "data-aside": hasAside ? asideShape : void 0,
+      "data-peek": hasPeek ? peekShape : void 0,
       style: {
         ...style,
         ["--crewlet-app-shell-gutter"]: `${gutter}px`,
-        ...drawerZ === null ? null : { ["--crewlet-app-shell-drawer-z"]: String(drawerZ) }
+        ...drawerZ === null ? null : { ["--crewlet-app-shell-drawer-z"]: String(drawerZ) },
+        // The aside's width is published on the ROOT, because two things
+        // read it from opposite sides: the grid track that sizes the column
+        // is declared here, and the overlay that sizes itself is a
+        // descendant. A custom property inherits downward only.
+        ...hasAside ? {
+          ["--crewlet-app-shell-aside"]: `${asideWidth}px`,
+          ...asideReserve === void 0 ? null : { ["--crewlet-app-shell-aside-reserve"]: `${asideReserve}px` }
+        } : null,
+        ...occupied === null ? null : { ["--crewlet-app-shell-aside-occupied"]: `${occupied}px` }
       },
       children: [
         /* @__PURE__ */ jsx(
@@ -187,16 +232,99 @@ function AppShell({
             children: sidebar
           }
         ) : null,
-        /* @__PURE__ */ jsxs("div", { className: "crewlet-app-shell__sheet", children: [
+        /* @__PURE__ */ jsxs("div", { ref: sheet, className: "crewlet-app-shell__sheet", children: [
           topbar,
           banner ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__banner", children: banner }) : null,
-          /* @__PURE__ */ jsx("main", { id: main, ref: setMain, className: "crewlet-app-shell__main", tabIndex: -1, children: /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__content", children }) }),
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-app-shell__body", children: [
+            /* @__PURE__ */ jsx("main", { id: main, ref: setMain, className: "crewlet-app-shell__main", tabIndex: -1, children: /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__content", children }) }),
+            hasPeek ? /* @__PURE__ */ jsx(PeekContext.Provider, { value: { shape: peekShape }, children: peek }) : null
+          ] }),
           footer
-        ] })
+        ] }),
+        hasAside ? /* @__PURE__ */ jsx(
+          ShellAside,
+          {
+            shape: asideShape,
+            label: asideLabel,
+            width: asideWidth,
+            resize: asideResize,
+            onClose: onAsideClose,
+            children: aside
+          }
+        ) : null
       ]
     }
   ) });
 }
+function ShellAside({ shape, label, width, resize, onClose, children }) {
+  const region = useRef(null);
+  const surfaceId = useId();
+  const modal = shape !== "column";
+  const [z, setZ] = useState(null);
+  return /* @__PURE__ */ jsxs(AsideContext.Provider, { value: { shape }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: region,
+        className: "crewlet-app-shell__aside",
+        "data-shape": shape,
+        role: modal ? "dialog" : "complementary",
+        "aria-modal": modal || void 0,
+        "aria-label": label,
+        tabIndex: modal ? -1 : void 0,
+        style: modal && z !== null ? { zIndex: z + 1 } : void 0,
+        children: [
+          !modal && resize ? /* @__PURE__ */ jsx(
+            ResizeHandle,
+            {
+              label: resize.label,
+              value: width,
+              min: resize.min,
+              max: resize.max,
+              defaultValue: resize.defaultValue,
+              onValueChange: resize.onChange,
+              onValueCommit: resize.onCommit,
+              controls: surfaceId,
+              edge: "left"
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("div", { id: surfaceId, className: "crewlet-app-shell__aside-sheet", children })
+        ]
+      }
+    ),
+    modal ? /* @__PURE__ */ jsx(AsideVeil, { region, onClose, onZIndex: setZ }) : null
+  ] });
+}
+function AsideVeil({
+  region,
+  onClose,
+  onZIndex
+}) {
+  const layer = useModalLayer({
+    onClose: () => onClose?.(),
+    // A modal that nothing can close keeps Escape and its veil from doing
+    // anything rather than pretending to: the host gave no way to close it.
+    dismissable: onClose !== void 0
+  });
+  const { panelRef, zIndex } = layer;
+  useEffect(() => {
+    onZIndex(zIndex);
+    return () => onZIndex(null);
+  }, [onZIndex, zIndex]);
+  useLayoutEffect(() => {
+    panelRef(region.current);
+    return () => panelRef(null);
+  }, [panelRef, region]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "crewlet-app-shell__veil crewlet-app-shell__aside-veil",
+      ref: layer.veilRef,
+      role: "presentation",
+      style: { zIndex }
+    }
+  );
+}
 function ShellDrawer({
   rail,
   onClose,
@@ -395,5 +523,42 @@ AppShell.RailStatus = AppShellRailStatus;
 AppShell.Topbar = AppShellTopbar;
 AppShell.Toggle = AppShellToggle;
 AppShell.AccountRow = AccountRow;
+AppShell.ResizeHandle = ResizeHandle;
+function defaultStorage() {
+  try {
+    return typeof window === "undefined" ? null : window.localStorage;
+  } catch {
+    return null;
+  }
+}
+function readStoredWidth(storage, key, min, max) {
+  if (!storage) return null;
+  try {
+    const stored = storage.getItem(key);
+    if (stored === null || stored.trim() === "") return null;
+    const value = Number(stored);
+    return Number.isFinite(value) && value >= min && value <= max ? Math.round(value) : null;
+  } catch {
+    return null;
+  }
+}
+function useStoredWidth({ key, min, max, storage }) {
+  const [store] = useState(() => storage === void 0 ? defaultStorage() : storage);
+  const [width, setStored] = useState(() => readStoredWidth(store, key, min, max));
+  const setWidth = useCallback((px) => setStored(clampSize(px, min, max)), [min, max]);
+  const commitWidth = useCallback(
+    (px) => {
+      const next = clampSize(px, min, max);
+      setStored(next);
+      if (!store) return;
+      try {
+        store.setItem(key, String(next));
+      } catch {
+      }
+    },
+    [key, min, max, store]
+  );
+  return { width, setWidth, commitWidth };
+}
 
-export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, useAppShell };
+export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useStoredWidth };

package/dist/{chunk-ON2E46DX.js → chunk-VRNUKH2W.js}

@@ -2,7 +2,7 @@ import { useTreeState, treeExpandable, treeLevel, treePosInSet, treeSetSize, tre
 import { LayerNodeBridge } from './chunk-LM3ISVJA.js';
 import { LayerHost, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
 import { focusables } from './chunk-H5XTJ7GJ.js';
-import { IconButton } from './chunk-LACA4JGC.js';
+import { IconButton } from './chunk-2BQYODY3.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TreeGrid-UCPV37XB.css';

package/dist/{chunk-XX2VQE55.js → chunk-WBRC3MNE.js}

@@ -1,4 +1,4 @@
-import { Button } from './chunk-OG6CL3EB.js';
+import { Button } from './chunk-HD4QJ2SI.js';
 import './ErrorBoundary-U2PA3LY2.css';
 import { Component } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/chunk-WDIVALLP.js

@@ -0,0 +1,51 @@
+import { Tag } from './chunk-KYIAFNU7.js';
+import { Card } from './chunk-INHXF2CL.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './StatusCard-6RPEE6UU.css';
+import { useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function StatusCard({
+  title,
+  subtitle,
+  subtitlePlacement,
+  status,
+  settled = false,
+  bodyPadding = "md",
+  strip,
+  actions,
+  actionsAlign = "end",
+  className,
+  children,
+  ...rest
+}) {
+  const id = useId();
+  const titleId = `${id}-title`;
+  const statusId = `${id}-status`;
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      ...rest,
+      as: "section",
+      "aria-labelledby": status ? `${titleId} ${statusId}` : titleId,
+      className: cx("crewlet-status-card", settled && "crewlet-status-card--settled", className),
+      "data-settled": settled || void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          Card.Header,
+          {
+            subtitle,
+            subtitlePlacement,
+            actions: status ? /* @__PURE__ */ jsx(Tag, { id: statusId, size: "sm", variant: status.tone, leadingIcon: status.icon, children: status.label }) : void 0,
+            children: /* @__PURE__ */ jsx(Card.Title, { id: titleId, truncate: true, children: title })
+          }
+        ),
+        children === void 0 || children === null || children === false ? null : /* @__PURE__ */ jsx(Card.Body, { padding: bodyPadding, className: "crewlet-status-card__body", children }),
+        strip === void 0 || strip === null || strip === false ? null : /* @__PURE__ */ jsx(Card.Footer, { padding: "none", className: "crewlet-status-card__strip", children: strip }),
+        actions === void 0 || actions === null || actions === false ? null : /* @__PURE__ */ jsx(Card.Footer, { className: cx("crewlet-status-card__actions", `crewlet-status-card__actions--${actionsAlign}`), children: actions })
+      ]
+    }
+  );
+}
+
+export { StatusCard };

package/dist/{chunk-SQ4JFHO7.js → chunk-WOW5SCEK.js}

@@ -1,7 +1,7 @@
 import { SlideStage } from './chunk-RMEBFYL7.js';
 import { useReorder } from './chunk-XJ2QEBMM.js';
 import { Kbd, isApplePlatform } from './chunk-SMBKXWML.js';
-import { Menu } from './chunk-TMM32U7D.js';
+import { Menu } from './chunk-TKS7FTTO.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SlideFilmstrip-PAT7P4OG.css';

package/dist/chunk-XODESBSR.js

@@ -0,0 +1,250 @@
+import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
+import { useAppShellAside, ResizeHandle } from './chunk-PIYJNCN7.js';
+import { useModalLayer } from './chunk-H5XTJ7GJ.js';
+import { IconButton } from './chunk-2BQYODY3.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import { createContext, useId, useRef, useContext, useLayoutEffect, useEffect, useMemo } from 'react';
+import { MinimizeGlyph, MaximizeGlyph, XGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var SidePanelFrameContext = createContext(null);
+function part(name, alias) {
+  return cx(`crewlet-side-panel__${name}`, alias && `${alias}__${name}`);
+}
+function SidePanelBase({
+  alias,
+  title,
+  icon,
+  onClose,
+  closeLabel,
+  actions,
+  footer,
+  flush = false,
+  initialFocus = "heading",
+  ringHeading = false,
+  hideTitle = false,
+  expanded = false,
+  onExpandedChange,
+  expandLabel = "Expand",
+  collapseLabel = "Collapse",
+  width,
+  minWidth = 0,
+  maxWidth,
+  defaultWidth,
+  onWidthChange,
+  onWidthCommit,
+  resizable = false,
+  resizeLabel,
+  className,
+  children
+}) {
+  const titleId = useId();
+  const panelId = useId();
+  const root = useRef(null);
+  const heading = useRef(null);
+  const before = useRef(null);
+  const start = useRef(initialFocus);
+  const inShell = useAppShellAside() !== null;
+  const frame = useContext(SidePanelFrameContext);
+  const shape = frame?.shape ?? null;
+  const modal = !inShell && shape === "sheet";
+  const role = inShell ? void 0 : modal ? "dialog" : "complementary";
+  useLayoutEffect(() => {
+    const panel = root.current;
+    before.current = document.activeElement;
+    const target = start.current;
+    if (target === "heading") heading.current?.focus({ preventScroll: true });
+    else if (target !== "none") target.current?.focus({ preventScroll: true });
+    return () => {
+      const back = before.current;
+      if (panel?.contains(document.activeElement) && back instanceof HTMLElement && back.isConnected) {
+        back.focus({ preventScroll: true });
+      }
+    };
+  }, []);
+  const close = useRef(onClose);
+  close.current = onClose;
+  useEffect(() => {
+    const panel = root.current;
+    if (!panel) return void 0;
+    const doc = panel.ownerDocument;
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+      if (!(event.target instanceof Node) || !panel.contains(event.target)) return;
+      event.preventDefault();
+      close.current();
+    };
+    doc.addEventListener("keydown", onKeyDown);
+    return () => doc.removeEventListener("keydown", onKeyDown);
+  }, []);
+  const sized = !inShell && !expanded && width !== void 0;
+  const grip = resizable && !inShell && !expanded && (shape === null || shape === "column") && width !== void 0 && onWidthChange;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: root,
+        id: panelId,
+        className: cx("crewlet-side-panel", inShell && "crewlet-side-panel--fill", alias, className),
+        role,
+        "aria-modal": modal || void 0,
+        "aria-labelledby": inShell ? void 0 : titleId,
+        "data-expanded": expanded || void 0,
+        style: sized ? { ["--crewlet-side-panel-width"]: `${width}px` } : void 0,
+        children: [
+          grip ? /* @__PURE__ */ jsx(
+            ResizeHandle,
+            {
+              label: resizeLabel ?? `Resize ${title}`,
+              value: width,
+              min: minWidth,
+              max: maxWidth ?? width,
+              defaultValue: defaultWidth,
+              onValueChange: onWidthChange,
+              onValueCommit: onWidthCommit,
+              controls: panelId,
+              edge: "left"
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs("div", { className: part("head", alias), children: [
+            icon ? /* @__PURE__ */ jsx("span", { className: part("icon", alias), "aria-hidden": true, children: icon }) : null,
+            /* @__PURE__ */ jsx(
+              "h2",
+              {
+                ref: heading,
+                id: titleId,
+                className: cx(
+                  part("title", alias),
+                  !ringHeading && "crewlet-side-panel__title--quiet",
+                  hideTitle && "crewlet-side-panel__title--hidden"
+                ),
+                tabIndex: -1,
+                children: title
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: part("actions", alias), children: [
+              actions,
+              onExpandedChange ? /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  label: expanded ? collapseLabel : expandLabel,
+                  icon: expanded ? /* @__PURE__ */ jsx(MinimizeGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(MaximizeGlyph, { size: "sm" }),
+                  size: "sm",
+                  variant: "ghost",
+                  onClick: () => onExpandedChange(!expanded)
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(IconButton, { label: closeLabel, icon: /* @__PURE__ */ jsx(XGlyph, { size: "sm" }), size: "sm", variant: "ghost", onClick: onClose })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: cx(part("body", alias), flush && "crewlet-side-panel__body--flush"), children: /* @__PURE__ */ jsx(HeadingLevelProvider, { level: 3, children }) }),
+          footer ? /* @__PURE__ */ jsx("div", { className: part("foot", alias), children: footer }) : null
+        ]
+      }
+    ),
+    modal ? /* @__PURE__ */ jsx(SheetLayer, { panel: root, onClose }) : null
+  ] });
+}
+function SheetLayer({ panel, onClose }) {
+  const layer = useModalLayer({ onClose });
+  const { panelRef } = layer;
+  useLayoutEffect(() => {
+    panelRef(panel.current);
+    return () => panelRef(null);
+  }, [panelRef, panel]);
+  return null;
+}
+var SIDE_PANEL_WIDTH = 420;
+var SIDE_PANEL_MIN_WIDTH = 360;
+var SIDE_PANEL_MAX_WIDTH = 640;
+var SIDE_PANEL_LABELS = {
+  close: (title) => `Close ${title}`,
+  resize: (title) => `Resize ${title}`
+};
+function SidePanel({
+  title,
+  icon,
+  hideTitle,
+  onClose,
+  actions,
+  footer,
+  flush,
+  width,
+  minWidth = SIDE_PANEL_MIN_WIDTH,
+  maxWidth = SIDE_PANEL_MAX_WIDTH,
+  defaultWidth = SIDE_PANEL_WIDTH,
+  onWidthChange,
+  onWidthCommit,
+  resizable,
+  initialFocus,
+  labels,
+  className,
+  children
+}) {
+  const words = { ...SIDE_PANEL_LABELS, ...labels };
+  return /* @__PURE__ */ jsx(
+    SidePanelBase,
+    {
+      title,
+      icon,
+      hideTitle,
+      onClose,
+      closeLabel: words.close(title),
+      resizeLabel: words.resize(title),
+      actions,
+      footer,
+      flush,
+      width: width ?? (resizable ? defaultWidth : void 0),
+      minWidth,
+      maxWidth,
+      defaultWidth,
+      onWidthChange,
+      onWidthCommit,
+      resizable,
+      initialFocus,
+      className,
+      children
+    }
+  );
+}
+function SidePanelFrameBase({
+  alias,
+  panel,
+  shape,
+  reserve,
+  expanded = false,
+  bodyRef,
+  bodyClassName,
+  bodyLabel,
+  className,
+  children
+}) {
+  const context = useMemo(() => ({ shape: shape ?? null }), [shape]);
+  return /* @__PURE__ */ jsx(SidePanelFrameContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("crewlet-side-panel-frame", alias, className),
+      "data-shape": shape ?? "auto",
+      "data-panel": panel ? expanded ? "expanded" : "open" : void 0,
+      style: reserve === void 0 ? void 0 : { ["--crewlet-side-panel-reserve"]: `${reserve}px` },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: bodyRef,
+            className: cx("crewlet-side-panel-frame__body", alias && `${alias}__body`, bodyClassName),
+            role: bodyLabel ? "region" : void 0,
+            "aria-label": bodyLabel,
+            children
+          }
+        ),
+        panel
+      ]
+    }
+  ) });
+}
+function SidePanelFrame(props) {
+  return /* @__PURE__ */ jsx(SidePanelFrameBase, { ...props });
+}
+
+export { SIDE_PANEL_LABELS, SIDE_PANEL_MAX_WIDTH, SIDE_PANEL_MIN_WIDTH, SIDE_PANEL_WIDTH, SidePanel, SidePanelBase, SidePanelFrame, SidePanelFrameBase };

package/dist/chunk-XQI2OUV4.js

@@ -0,0 +1,59 @@
+import { Button } from './chunk-HD4QJ2SI.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ReceiptStrip-IIRKRTBG.css';
+import { CircleAlertGlyph, TriangleAlertGlyph, InfoGlyph, CircleCheckGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var ICONS = {
+  success: /* @__PURE__ */ jsx(CircleCheckGlyph, { size: "md" }),
+  neutral: /* @__PURE__ */ jsx(InfoGlyph, { size: "md" }),
+  info: /* @__PURE__ */ jsx(InfoGlyph, { size: "md" }),
+  warning: /* @__PURE__ */ jsx(TriangleAlertGlyph, { size: "md" }),
+  danger: /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "md" })
+};
+function ReceiptStrip({ tone = "success", icon, children, actions, className, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      role: tone === "danger" ? "alert" : "status",
+      className: cx("crewlet-receipt-strip", `crewlet-receipt-strip--${tone}`, className),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-receipt-strip__icon", "aria-hidden": "true", children: icon ?? ICONS[tone] }),
+        /* @__PURE__ */ jsx("div", { className: "crewlet-receipt-strip__text", children }),
+        actions === void 0 || actions === null || actions === false ? null : /* @__PURE__ */ jsx("div", { className: "crewlet-receipt-strip__actions", children: actions })
+      ]
+    }
+  );
+}
+var REFUSAL_STRIP_LABELS = { retry: "Try again", dismiss: "Dismiss" };
+function RefusalStrip({
+  children,
+  hint,
+  onRetry,
+  retrying = false,
+  onDismiss,
+  placement = "inline",
+  labels: overrides,
+  className,
+  ...rest
+}) {
+  const labels = overrides ? { ...REFUSAL_STRIP_LABELS, ...overrides } : REFUSAL_STRIP_LABELS;
+  const actions = onRetry || onDismiss ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    onRetry ? /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", loading: retrying, onClick: onRetry, children: labels.retry }) : null,
+    onDismiss ? /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", onClick: onDismiss, children: labels.dismiss }) : null
+  ] }) : void 0;
+  const words = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "crewlet-refusal-strip__sentence", children }),
+    hint === void 0 || hint === null ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-refusal-strip__hint", children: hint })
+  ] });
+  if (placement === "foot") {
+    return /* @__PURE__ */ jsx(ReceiptStrip, { ...rest, tone: "danger", actions, className: cx("crewlet-refusal-strip--foot", className), children: words });
+  }
+  return /* @__PURE__ */ jsxs("span", { ...rest, role: "alert", className: cx("crewlet-refusal-strip", className), children: [
+    words,
+    actions
+  ] });
+}
+
+export { REFUSAL_STRIP_LABELS, ReceiptStrip, RefusalStrip };

package/dist/{chunk-EJWPYEG4.js → chunk-XRZGGB6I.js}

@@ -1,4 +1,4 @@
-import { toISO, useNow, formatRelative } from './chunk-3CZ7XAVY.js';
+import { toISO, useNow, formatRelative } from './chunk-KS7YIJ4S.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './EditingStatus-YU7EGM6Y.css';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-34C7NYIQ.js → chunk-Y73BQL74.js}

@@ -1,5 +1,5 @@
 import { Callout } from './chunk-BPCY7ZID.js';
-import { Button } from './chunk-OG6CL3EB.js';
+import { Button } from './chunk-HD4QJ2SI.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { useEffect } from 'react';

package/dist/{chunk-KIRQZG3G.js → chunk-YCGZK2E4.js}

@@ -1,6 +1,6 @@
 import { ContrastLevelTag } from './chunk-WW7TU6HE.js';
 import { Popover } from './chunk-KHJIEPZV.js';
-import { IconButton } from './chunk-LACA4JGC.js';
+import { IconButton } from './chunk-2BQYODY3.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ContrastHelp-MZCAW5WQ.css';
 import { InfoGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-CAVWDJF4.js → chunk-YCZ2FBKA.js}

@@ -1,5 +1,5 @@
 import { useTreeState, useMeasuredSizes, layoutForest, treeAncestors, useLayoutAnchor, treeExpandable, layoutConnectors, treeItemAction, treeStep, treePosInSet, treeSetSize, treeLevel, placeGroups } from './chunk-MY374UUD.js';
-import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-D7Q5MQRF.js';
+import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-YEURM24I.js';
 import { focusables } from './chunk-H5XTJ7GJ.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TreeCanvas-QA3PDFTK.css';

package/dist/{chunk-D7Q5MQRF.js → chunk-YEURM24I.js}

@@ -1,9 +1,9 @@
 import { LayerNodeBridge } from './chunk-LM3ISVJA.js';
 import { Tooltip } from './chunk-I33UIUZD.js';
 import { Kbd } from './chunk-SMBKXWML.js';
+import { Button } from './chunk-HD4QJ2SI.js';
 import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-OMV5W53A.js';
-import { Button } from './chunk-OG6CL3EB.js';
-import { IconButton } from './chunk-LACA4JGC.js';
+import { IconButton } from './chunk-2BQYODY3.js';
 import { returnFocus } from './chunk-NUZHC6MM.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';