@crewlethq/ui 0.55.0 → 0.57.0

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-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-5TK3C6RG.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-TV2QW6GX.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-TV2QW6GX.js → chunk-YEURM24I.js}

@@ -1,9 +1,9 @@
 import { LayerNodeBridge } from './chunk-LM3ISVJA.js';
 import { Tooltip } from './chunk-I33UIUZD.js';
-import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-OMV5W53A.js';
 import { Kbd } from './chunk-SMBKXWML.js';
-import { Button } from './chunk-OG6CL3EB.js';
-import { IconButton } from './chunk-LACA4JGC.js';
+import { Button } from './chunk-HD4QJ2SI.js';
+import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-OMV5W53A.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';

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

@@ -1,12 +1,15 @@
 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 { focusables, useModalLayer, isComposing, layerCount } from './chunk-H5XTJ7GJ.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';
 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 +79,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 +98,23 @@ function AppShell({
   navigationKey,
   toggleLabel = "Sections",
   skipLabel = "Skip to content",
+  aside,
+  asideWidth = APP_SHELL_ASIDE_WIDTH,
+  asideReserve,
+  asideLabel,
+  asideShape = "column",
+  asideModal = true,
+  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 +148,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 +182,7 @@ function AppShell({
     "div",
     {
       ...rest,
+      ref: root,
       className: cx(
         "crewlet-app-shell",
         fill && "crewlet-app-shell--fill",
@@ -155,10 +191,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 +234,134 @@ 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,
+            modal: asideShape === "sheet" || asideShape === "overlay" && asideModal,
+            label: asideLabel,
+            width: asideWidth,
+            resize: asideResize,
+            onClose: onAsideClose,
+            children: aside
+          }
+        ) : null
       ]
     }
   ) });
 }
+function ShellAside({ shape, modal, label, width, resize, onClose, children }) {
+  const region = useRef(null);
+  const surfaceId = useId();
+  useLooseOverlay(region, shape === "overlay" && !modal, onClose);
+  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 || shape === "overlay" ? -1 : void 0,
+        "data-modal": modal ? "true" : "false",
+        style: modal && z !== null ? { zIndex: z + 1 } : void 0,
+        children: [
+          shape === "column" && 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 useLooseOverlay(region, active, onClose) {
+  const [opener] = useState(() => typeof document === "undefined" ? null : document.activeElement);
+  const loose = useRef(active);
+  loose.current = active;
+  const close = useRef(onClose);
+  close.current = onClose;
+  useEffect(() => {
+    const panel = region.current;
+    if (!loose.current || !panel || panel.contains(document.activeElement)) return;
+    (focusables(panel)[0] ?? panel).focus();
+  }, [region]);
+  useLayoutEffect(() => {
+    const panel = region.current;
+    return () => {
+      if (!loose.current || !panel?.contains(document.activeElement)) return;
+      if (opener instanceof HTMLElement && opener.isConnected && opener !== document.body) returnFocus(opener);
+    };
+  }, [region, opener]);
+  useEffect(() => {
+    const panel = region.current;
+    if (!active || !panel) return void 0;
+    const doc = panel.ownerDocument;
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented || isComposing(event)) return;
+      if (!(event.target instanceof Node) || !panel.contains(event.target)) return;
+      if (layerCount() > 0 || !close.current) return;
+      event.preventDefault();
+      close.current();
+    };
+    doc.addEventListener("keydown", onKeyDown);
+    return () => doc.removeEventListener("keydown", onKeyDown);
+  }, [active, region]);
+}
+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 +560,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-IW55G7XG.js → chunk-YNRKVY7X.js}

@@ -9,8 +9,18 @@ function useDownload(options = {}) {
     (text, filename, mime = DEFAULT_MIME) => run(() => downloadText(typeof text === "function" ? text() : text, filename, mime).started),
     [run]
   );
+  const downloadFile = useCallback(
+    (file, filename) => run(async () => {
+      try {
+        return downloadBlob(await file(), filename).started;
+      } catch {
+        return false;
+      }
+    }),
+    [run]
+  );
   const state = outcome.state === "done" ? "started" : outcome.state;
-  return { state, attempt: outcome.attempt, download };
+  return { state, attempt: outcome.attempt, download, downloadFile };
 }
 function downloadText(text, filename, mime = DEFAULT_MIME) {
   if (typeof Blob === "undefined") return { started: false, name: safeFilename(filename) };

package/dist/{chunk-LFHCXZO5.js → chunk-Z3GDMNMU.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './DiffList-3EX64AAE.css';
+import './DiffList-GE6YBRLJ.css';
 import { DiffGlyph, MinusGlyph, PlusGlyph, ArrowRightGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -15,7 +15,7 @@ var GLYPHS = {
   removed: MinusGlyph,
   changed: DiffGlyph
 };
-function DiffList({ rows, emptyMessage, labels: overrides, className }) {
+function DiffList({ rows, emptyMessage, layout = "columns", labels: overrides, className }) {
   const labels = overrides ? { ...DIFF_LIST_LABELS, ...overrides } : DIFF_LIST_LABELS;
   if (rows.length === 0 && emptyMessage != null) {
     return /* @__PURE__ */ jsx("p", { className: "crewlet-diff-list__empty", children: emptyMessage });
@@ -25,7 +25,7 @@ function DiffList({ rows, emptyMessage, labels: overrides, className }) {
     // list role with them, so "12 differences" would never be read. The
     // redundant-role rule is silenced for that reason, not obeyed.
     // eslint-disable-next-line jsx-a11y/no-redundant-roles
-    /* @__PURE__ */ jsx("ul", { role: "list", className: cx("crewlet-diff-list", className), children: rows.map((row, index) => {
+    /* @__PURE__ */ jsx("ul", { role: "list", className: cx("crewlet-diff-list", layout !== "columns" && `crewlet-diff-list--${layout}`, className), children: rows.map((row, index) => {
       const Glyph = GLYPHS[row.kind];
       return /* @__PURE__ */ jsxs(
         "li",

package/dist/{chunk-LQPU5O3B.js → chunk-Z7PJF6F3.js}

@@ -1,9 +1,9 @@
-import { Modal } from './chunk-NWGGH2LN.js';
+import { Modal } from './chunk-QZ4B72FP.js';
 import { useListbox, useHighlightRest } from './chunk-7KHM2FZH.js';
-import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { Kbd } from './chunk-SMBKXWML.js';
-import { Input } from './chunk-XANKR3EP.js';
+import { Input } from './chunk-FXQLNETQ.js';
 import { Count } from './chunk-BHHIIK3M.js';
+import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-HDHL773Z.js → chunk-ZH4MJM73.js}

@@ -1,5 +1,5 @@
-import { ConfirmModal } from './chunk-NWGGH2LN.js';
 import { InlineCode } from './chunk-5CLW2CXT.js';
+import { ConfirmModal } from './chunk-QZ4B72FP.js';
 import { Callout } from './chunk-BPCY7ZID.js';
 import './LinkInterstitial-ET4MSVSV.css';
 import { jsx, jsxs } from 'react/jsx-runtime';