@crewlethq/ui 0.38.0 → 0.40.0

package/dist/{chunk-W7PAIVAP.js → chunk-E7QLG3PG.js}

@@ -1,31 +1,34 @@
+import { LockedLabel } from './chunk-OHGH7O6T.js';
 import { KeyChip } from './chunk-FYTIJM2T.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';
-import './SidebarNav-7SGUZYKK.css';
-import { useId, useState } from 'react';
+import './SidebarNav-YI74SPDC.css';
+import { createContext, useId, useContext, useState } from 'react';
 import { ChevronDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+var GroupLocked = createContext(false);
 function SidebarNav({ label, className, children }) {
   return /* @__PURE__ */ jsx("nav", { className: cx("crewlet-sidebar-nav", className), "aria-label": label, children });
 }
-function NavGroup({ label, action, className, children }) {
+function NavGroup({ label, action, locked, className, children }) {
   const id = useId();
   const named = label !== void 0 && label !== null && label !== false && label !== "";
+  const groupLocked = named && locked !== void 0 && locked !== "";
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx("crewlet-nav-group", className),
+      className: cx("crewlet-nav-group", groupLocked && "crewlet-nav-group--locked", className),
       role: named ? "group" : void 0,
       "aria-labelledby": named ? id : void 0,
       children: [
         named || action ? /* @__PURE__ */ jsxs("div", { className: "crewlet-nav-group__head", children: [
-          named ? /* @__PURE__ */ jsx("span", { className: "crewlet-nav-group__label", id, children: label }) : null,
+          named ? /* @__PURE__ */ jsx("span", { className: "crewlet-nav-group__label", id, children: /* @__PURE__ */ jsx(LockedLabel, { reason: groupLocked ? locked : void 0, 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
+        /* @__PURE__ */ jsx(GroupLocked.Provider, { value: groupLocked, children })
       ]
     }
   );
@@ -48,6 +51,9 @@ function NavItem({
   href,
   current = false,
   disabledReason,
+  locked,
+  title,
+  onPrefetch,
   renderLink,
   onClick,
   children,
@@ -58,6 +64,7 @@ function NavItem({
   className
 }) {
   const id = useId();
+  const inLockedGroup = useContext(GroupLocked);
   const [ownExpanded, setOwnExpanded] = useState(defaultExpanded);
   const open = expanded ?? ownExpanded;
   const nested = children !== void 0 && children !== null && children !== false;
@@ -72,7 +79,7 @@ function NavItem({
     lead ? /* @__PURE__ */ jsx(KeyChip, { className: "crewlet-nav-item__lead", children: lead }) : null,
     lead ? " " : null,
     /* @__PURE__ */ jsxs("span", { className: "crewlet-nav-item__label", children: [
-      label,
+      /* @__PURE__ */ jsx(LockedLabel, { reason: locked, mark: !inLockedGroup, 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,
@@ -99,10 +106,24 @@ function NavItem({
       children: inside,
       ...href === void 0 ? {} : { href },
       ...current ? { "aria-current": "page" } : {},
-      ...onClick === void 0 ? {} : { onClick }
+      ...onClick === void 0 ? {} : { onClick },
+      ...title === void 0 ? {} : { title },
+      ...onPrefetch === void 0 ? {} : { onPointerEnter: onPrefetch, onFocus: onPrefetch }
     });
   } else if (href !== void 0) {
-    row = /* @__PURE__ */ jsx("a", { className: rowClass, href, "aria-current": current ? "page" : void 0, onClick, children: inside });
+    row = /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: rowClass,
+        href,
+        "aria-current": current ? "page" : void 0,
+        onClick,
+        title,
+        onPointerEnter: onPrefetch,
+        onFocus: onPrefetch,
+        children: inside
+      }
+    );
   } else {
     row = /* @__PURE__ */ jsxs(
       "button",

package/dist/{chunk-RKKO7QHH.js → chunk-EGMQURBR.js}

@@ -5,22 +5,23 @@ function tabStop(items, selected) {
   if (selected >= 0 && !items[selected]?.disabled) return selected;
   return items.findIndex((item) => !item.disabled);
 }
+function reachable(el) {
+  return Boolean(el) && !el.disabled && !el.hasAttribute("inert");
+}
 function useRoving(count, select, { followFocus = false, columns } = {}) {
   const buttons = useRef([]);
   const [landed, setLanded] = useState(null);
   function step(from, by) {
     for (let i = 0; i < count; i += 1) {
       const at = ((from + by * i) % count + count) % count;
-      const el = buttons.current[at];
-      if (el && !el.disabled) return at;
+      if (reachable(buttons.current[at])) return at;
     }
     return null;
   }
   function rowStep(at, by, across) {
     const target = at + by * across;
     if (target < 0 || target >= count) return null;
-    const el = buttons.current[target];
-    return el && !el.disabled ? target : null;
+    return reachable(buttons.current[target]) ? target : null;
   }
   function moveTo(key, at, vertical) {
     if (count === 0) return null;

package/dist/{chunk-GMW4ZHST.js → chunk-EX22Q5SH.js}

@@ -1,6 +1,6 @@
 import { Toolbar } from './chunk-NR4CPM4T.js';
-import { SegmentedControl } from './chunk-2QZ2VPHR.js';
-import { tabId } from './chunk-7SDUKCNW.js';
+import { SegmentedControl } from './chunk-4OK4DX3V.js';
+import { tabId } from './chunk-X4IXXLWM.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './MarkdownEditor-WOKV7CLK.css';

package/dist/{chunk-A23KDROH.js → chunk-FXBGEANQ.js}

@@ -1,5 +1,5 @@
 import { useClipboard } from './chunk-STJ7QBC3.js';
-import { Modal } from './chunk-SVGARBDY.js';
+import { Modal } from './chunk-IAGYPTEJ.js';
 import { Checkbox } from './chunk-AXS6MBNH.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';

package/dist/{chunk-4L2BWSHR.js → chunk-GFYQKMQZ.js}

@@ -1,10 +1,10 @@
 import { Select } from './chunk-XQZ6EWOE.js';
 import { SHEET_LABELS, SHEET_COLUMN_TYPES, optionHue, retypeColumn } from './chunk-LFSIKGRQ.js';
-import { HueSwatch } from './chunk-F4LPQA4E.js';
+import { HueSwatch } from './chunk-BA32AVKS.js';
 import { NODE_HUES, NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
 import { Checkbox } from './chunk-AXS6MBNH.js';
-import { Kbd } from './chunk-SMBKXWML.js';
 import { FormField, Input } from './chunk-TYONQSOK.js';
+import { Kbd } from './chunk-SMBKXWML.js';
 import { Menu } from './chunk-D6FEHY5G.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';

package/dist/{chunk-HG5VF3TZ.js → chunk-HMVQQEHW.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Charts-MBJG72BS.css';
+import './Charts-TZ744HT6.css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useCallback, useId } from 'react';
 
@@ -340,6 +340,95 @@ function ActivityStrip({
     )
   ] });
 }
+var MAX_TICKS = 5;
+function histogramTicks(bars) {
+  if (bars <= 0) return [];
+  if (bars <= MAX_TICKS) return Array.from({ length: bars }, (_, i) => i);
+  const span = bars - 1;
+  const least = Math.ceil(span / (MAX_TICKS - 1));
+  let stride = least;
+  for (let s = least; s <= Math.ceil(least * 1.5); s++) {
+    if (span % s === 0) {
+      stride = s;
+      break;
+    }
+  }
+  const out = [];
+  for (let at = 0; at < span; at += stride) out.push(at);
+  if (span - out[out.length - 1] < stride / 2) out.pop();
+  out.push(span);
+  return out;
+}
+function tickPlace(index, bars) {
+  if (index === 0) return { left: 0 };
+  if (index === bars - 1) return { right: 0 };
+  return { left: `${(index + 0.5) / bars * 100}%`, transform: "translateX(-50%)" };
+}
+function Histogram({
+  bars,
+  label,
+  summary,
+  formatTitle,
+  formatTick,
+  onSelect,
+  height = 96,
+  emptyLabel = "Nothing recorded in this window",
+  className
+}) {
+  if (bars.length === 0) {
+    return /* @__PURE__ */ jsx(ChartEmpty, { className, height: `${height}px`, children: emptyLabel });
+  }
+  const peak = Math.max(1, ...bars.map((bar) => bar.v));
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-histogram", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "crewlet-histogram__plot",
+        role: "group",
+        "aria-label": label,
+        style: { "--crewlet-histogram-height": `${height}px` },
+        children: [
+          bars.map((bar, index) => {
+            const part = Math.min(bar.v, Math.max(0, bar.part ?? 0));
+            const title = formatTitle(bar, index);
+            const empty = bar.v === 0 ? "" : void 0;
+            const fill = /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "crewlet-histogram__fill",
+                style: { "--crewlet-histogram-fill": `${bar.v / peak * 100}%` },
+                children: part > 0 && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "crewlet-histogram__part",
+                    style: { "--crewlet-histogram-part": `${part / bar.v * 100}%` }
+                  }
+                )
+              }
+            );
+            return onSelect ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "crewlet-histogram__bar",
+                title,
+                "aria-label": title,
+                "data-empty": empty,
+                onClick: () => onSelect(bar, index),
+                children: fill
+              },
+              bar.t
+            ) : /* @__PURE__ */ jsx("div", { className: "crewlet-histogram__bar", title, "data-empty": empty, children: fill }, bar.t);
+          }),
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: summary })
+        ]
+      }
+    ),
+    formatTick && // Hidden from assistive technology: every bar carries its own bucket
+    // in its name, and five loose dates under a chart place nothing.
+    /* @__PURE__ */ jsx("div", { className: "crewlet-histogram__axis", "aria-hidden": "true", children: histogramTicks(bars.length).map((index) => /* @__PURE__ */ jsx("span", { className: "crewlet-histogram__tick", style: tickPlace(index, bars.length), children: formatTick(bars[index], index) }, bars[index].t)) })
+  ] });
+}
 function TimeSeries({
   series,
   from,
@@ -713,4 +802,4 @@ function StackedColumns({
   );
 }
 
-export { ActivityStrip, BarList, ChartEmpty, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover };
+export { ActivityStrip, BarList, ChartEmpty, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Histogram, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, histogramTicks, niceScale, useChartHover };

package/dist/{chunk-IPWU6ERC.js → chunk-HQJ24WPM.js}

@@ -58,8 +58,10 @@ function DatasetSource({
   const summary = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("span", { className: "crewlet-dataset-source__head", children: [
       /* @__PURE__ */ jsx("span", { id: titleId, className: "crewlet-dataset-source__title", children: title }),
-      " ",
-      /* @__PURE__ */ jsx(Tag, { size: "xs", appearance: "outline", className: "crewlet-dataset-source__kind", children: text.kinds[kind] })
+      kind === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        /* @__PURE__ */ jsx(Tag, { size: "xs", appearance: "outline", className: "crewlet-dataset-source__kind", children: text.kinds[kind] })
+      ] })
     ] }),
     " ",
     /* @__PURE__ */ jsx("span", { className: "crewlet-dataset-source__definition", children: definition }),

package/dist/{chunk-SVGARBDY.js → chunk-IAGYPTEJ.js}

@@ -4,7 +4,7 @@ import { focusables, useModalLayer, useBodyScrollLock } from './chunk-H5XTJ7GJ.j
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Modal-7MWRCWAI.css';
+import './Modal-TOEWHDCQ.css';
 import { useId, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { ChevronLeftGlyph, XGlyph } from '@crewlethq/icons/glyphs';
@@ -124,7 +124,7 @@ function ModalFrame({
           given(icon) ? /* @__PURE__ */ jsx("span", { className: "crewlet-modal__icon", "aria-hidden": "true", children: icon }) : null,
           /* @__PURE__ */ jsxs("div", { className: "crewlet-modal__heading", children: [
             given(title) ? /* @__PURE__ */ jsx(
-              "p",
+              "h1",
               {
                 className: cx("crewlet-modal__title", sheet ? "crewlet-modal__title--sheet" : void 0),
                 id: titleId,

package/dist/{chunk-ZK3VYY7L.js → chunk-INHXF2CL.js}

@@ -2,7 +2,7 @@ import { CardHeaderSlotContext } from './chunk-AV2DXAEL.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { useHeadingLevel, HeadingLevelProvider, nextHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Card-G2ZGT5Z6.css';
+import './Card-JR2UPQH7.css';
 import { createContext, useId, useState, isValidElement, useRef, useCallback, useMemo, Children, cloneElement, useContext, useEffect, Fragment } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -160,6 +160,7 @@ var CardHeader = ({
   icon,
   count,
   subtitle,
+  subtitlePlacement = "beside",
   actions,
   className,
   children,
@@ -173,16 +174,28 @@ var CardHeader = ({
     },
     [host]
   );
-  return /* @__PURE__ */ jsxs("div", { ...rest, className: cx("crewlet-card__header", !divided && "crewlet-card__header--plain", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "crewlet-card__header-main", children: [
-      icon === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-card__header-icon", "aria-hidden": true, children: icon }),
-      children,
-      count === void 0 ? null : /* @__PURE__ */ jsx(Count, { value: count })
-    ] }),
-    subtitle === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-card__subtitle", children: subtitle }),
-    actions === void 0 ? null : /* @__PURE__ */ jsx("div", { className: "crewlet-card__header-actions", children: actions }),
-    card === null ? null : /* @__PURE__ */ jsx("div", { className: "crewlet-card__header-chrome", ref: chromeRef })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      className: cx(
+        "crewlet-card__header",
+        !divided && "crewlet-card__header--plain",
+        subtitle !== void 0 && subtitlePlacement === "below" && "crewlet-card__header--stacked",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-card__header-main", children: [
+          icon === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-card__header-icon", "aria-hidden": true, children: icon }),
+          typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(CardTitle, { children }) : children,
+          count === void 0 || count === 0 || count === "0" ? null : /* @__PURE__ */ jsx(Count, { value: count })
+        ] }),
+        subtitle === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-card__subtitle", children: subtitle }),
+        actions === void 0 ? null : /* @__PURE__ */ jsx("div", { className: "crewlet-card__header-actions", children: actions }),
+        card === null ? null : /* @__PURE__ */ jsx("div", { className: "crewlet-card__header-chrome", ref: chromeRef })
+      ]
+    }
+  );
 };
 var CardBody = ({ padding = "md", className, children, ...rest }) => /* @__PURE__ */ jsx("div", { ...rest, className: cx("crewlet-card__body", `crewlet-card__body--p-${padding}`, className), children });
 var CardFooter = ({ variant = "actions", padding = "sm", className, children, ...rest }) => /* @__PURE__ */ jsx(

package/dist/chunk-INVSUFJK.js

@@ -0,0 +1,71 @@
+import { SidebarNav } from './chunk-E7QLG3PG.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './SectionFrame-M62UUVFQ.css';
+import { useState, useId } from 'react';
+import { ChevronDownGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function SectionFrame({ columnWidth, folded = false, className, children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx("crewlet-section-frame", className),
+      "data-folded": folded || void 0,
+      style: { "--crewlet-section-frame-column": columnWidth },
+      children
+    }
+  );
+}
+function SectionFrameNav({ scope, current, location, openOnArrival = false, children }) {
+  const [open, setOpen] = useState(openOnArrival);
+  const [openedAt, setOpenedAt] = useState(location);
+  const [picked, setPicked] = useState(null);
+  if (openedAt !== location) {
+    setOpenedAt(location);
+    setOpen(picked !== location && openOnArrival);
+    setPicked(null);
+  }
+  const listId = useId();
+  function pick(event) {
+    const link = event.target.closest("a[href]");
+    if (!link) return;
+    setOpen(false);
+    const to = link.getAttribute("href");
+    if (to !== null && to !== location) setPicked(to);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "crewlet-section-frame__nav", "data-open": open || void 0, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "crewlet-section-frame__toggle",
+        "aria-expanded": open,
+        "aria-controls": listId,
+        onClick: () => setOpen((was) => !was),
+        children: [
+          current?.icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-section-frame__toggle-icon", "aria-hidden": "true", children: current.icon }) : null,
+          /* @__PURE__ */ jsx("span", { className: "crewlet-section-frame__toggle-name", children: current ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-section-frame__toggle-prefix", children: [
+              /* @__PURE__ */ jsx(VisuallyHidden, { children: scope }),
+              " Section",
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \xB7" }),
+              /* @__PURE__ */ jsx(VisuallyHidden, { children: ":" })
+            ] }),
+            " ",
+            current.label
+          ] }) : `${scope} sections` }),
+          /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "xs", "aria-hidden": "true", className: "crewlet-section-frame__chevron" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { id: listId, className: "crewlet-section-frame__list", onClick: pick, children: /* @__PURE__ */ jsx(SidebarNav, { label: `${scope} sections`, children }) })
+  ] });
+}
+function SectionFrameBody({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("crewlet-section-frame__body", className), children });
+}
+SectionFrame.Nav = SectionFrameNav;
+SectionFrame.Body = SectionFrameBody;
+
+export { SectionFrame, SectionFrameBody, SectionFrameNav };

package/dist/{chunk-6NNY5WBF.js → chunk-JKAGN4V4.js}

@@ -1,4 +1,4 @@
-import { Modal } from './chunk-SVGARBDY.js';
+import { Modal } from './chunk-IAGYPTEJ.js';
 import { useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { KeyChip, highlightMatch } from './chunk-FYTIJM2T.js';

package/dist/{chunk-4LRAJXHL.js → chunk-JSWOXRRE.js}

@@ -1,5 +1,5 @@
 import { diffLines, diffStat, collapseDiff, DiffSummary, DiffView } from './chunk-BVWSLXTY.js';
-import { SegmentedControl } from './chunk-2QZ2VPHR.js';
+import { SegmentedControl } from './chunk-4OK4DX3V.js';
 import { EmptyState } from './chunk-RA2ULG6H.js';
 import { useHeadingLevel, headingTag, nextHeadingLevel, HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-DYB66CNM.js → chunk-KKNHMXTE.js}

@@ -6,7 +6,7 @@ import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';
-import './AppShell-NDU4XMGF.css';
+import './AppShell-NPSWZ3XW.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';
@@ -231,10 +231,13 @@ function ShellDrawer({
     }
   );
 }
-function AppShellRail({ header, footer, className, children }) {
+function AppShellRail({ header, search, footer, className, children }) {
   return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-app-shell__rail-inner", className), children: [
     header ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-head", children: header }) : null,
-    /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-body", children }),
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-app-shell__rail-body", children: [
+      search ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-search", children: search }) : null,
+      children
+    ] }),
     footer ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-foot", children: footer }) : null
   ] });
 }

package/dist/{chunk-UWRBD2YO.js → chunk-KNHUBHFX.js}

@@ -1,6 +1,6 @@
 import { Select } from './chunk-XQZ6EWOE.js';
 import { CopyButton } from './chunk-W46LPU4R.js';
-import { Modal } from './chunk-SVGARBDY.js';
+import { Modal } from './chunk-IAGYPTEJ.js';
 import { Callout } from './chunk-SZZRIHGT.js';
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';

package/dist/{chunk-ZMDYQ2HH.js → chunk-KWWP3D7M.js}

@@ -1,5 +1,5 @@
 import { useThemePreference, useDensityPreference } from './chunk-Z24ZUSTX.js';
-import { SegmentedControl } from './chunk-2QZ2VPHR.js';
+import { SegmentedControl } from './chunk-4OK4DX3V.js';
 import { SunGlyph, MonitorGlyph, MoonGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-46RL3E54.js → chunk-M6NQ4XGK.js}

@@ -1,4 +1,4 @@
-import { useRoving } from './chunk-RKKO7QHH.js';
+import { useRoving } from './chunk-EGMQURBR.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './LayersList-TBNF4XGL.css';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-PT6WKXKW.js → chunk-MMPKN7WV.js}

@@ -1,7 +1,7 @@
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { toInstant, RelativeTime, formatExact, toISO } from './chunk-3CZ7XAVY.js';
 import { Document } from './chunk-PWG3VHRQ.js';
-import { Composer } from './chunk-ETVEGR2Y.js';
+import { Composer } from './chunk-ISA2O2BK.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { Button } from './chunk-OG6CL3EB.js';

package/dist/{chunk-NRBAXRWE.js → chunk-N3TFYBN3.js}

@@ -1,4 +1,4 @@
-import { ConfirmModal } from './chunk-SVGARBDY.js';
+import { ConfirmModal } from './chunk-IAGYPTEJ.js';
 import { InlineCode } from './chunk-5CLW2CXT.js';
 import { Callout } from './chunk-SZZRIHGT.js';
 import './LinkInterstitial-ET4MSVSV.css';

package/dist/chunk-NNTO3TNC.js

@@ -0,0 +1,9 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './TileGrid-I6LNYD2H.css';
+import { jsx } from 'react/jsx-runtime';
+
+function TileGrid({ columns = 3, as: Track = "div", className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("crewlet-tile-grid", className), "data-columns": columns, children: /* @__PURE__ */ jsx(Track, { ...rest, className: "crewlet-tile-grid__track", children }) });
+}
+
+export { TileGrid };

package/dist/{chunk-DS2C73RJ.js → chunk-NZWX27J7.js}

@@ -1,13 +1,13 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './List-MYJIV6MP.css';
+import './List-YHLIZFK4.css';
 import { createContext, useContext, Children, isValidElement, cloneElement } from 'react';
 import { CircleAlertGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var ListContext = createContext({ variant: "divided", templated: false });
 function List({ variant = "divided", template, className, style, children, ...rest }) {
-  const Tag = variant === "numbered" ? "ol" : "ul";
+  const Tag = variant === "numbered" || variant === "numbered-divided" ? "ol" : "ul";
   const templated = template !== void 0;
   return /* @__PURE__ */ jsx(ListContext.Provider, { value: { variant, templated }, children: /* @__PURE__ */ jsx(
     Tag,

package/dist/{chunk-VGE3G3T4.js → chunk-ODOJJGXH.js}

@@ -1,6 +1,6 @@
 import { Link } from './chunk-FBSEJO2C.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ObjectHeader-D7GU7QNI.css';
+import './ObjectHeader-ZOS22FKX.css';
 import { ArrowUpRightGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 

package/dist/chunk-OHGH7O6T.js

@@ -0,0 +1,19 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './LockedLabel-VQEGEB7G.css';
+import { KeyGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+function LockedLabel({ children, reason, mark = true, className }) {
+  if (reason === void 0 || reason === "") return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsxs("span", { className: cx("crewlet-locked-label", className), title: reason, children: [
+    children,
+    mark ? /* @__PURE__ */ jsx(KeyGlyph, { size: "xs", "aria-hidden": "true", className: "crewlet-locked-label__key" }) : null,
+    /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+      ", ",
+      reason
+    ] })
+  ] });
+}
+
+export { LockedLabel };

package/dist/{chunk-4ISUIS6F.js → chunk-OOC7Q67K.js}

@@ -1,3 +1,3 @@
 import './HitArea-QUOS6ZDJ.css';
-import './Tabs-WIF7457H.css';
+import './Tabs-S7F4RWAN.css';
 import './SegmentedControl-B7XCUOML.css';

package/dist/{chunk-BT5H2THK.js → chunk-OUD75UB2.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './StatGroup-DOFHX5QJ.css';
+import './StatGroup-ZMW7VQWP.css';
 import { jsx } from 'react/jsx-runtime';
 
 function StatGroup({ columns = 4, flush = false, className, children, ...rest }) {

package/dist/chunk-PCT47E7O.js

@@ -0,0 +1,48 @@
+import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './CatalogTile-XL4XLFUH.css';
+import { useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function CatalogTile({
+  as: Element = "article",
+  mark,
+  title,
+  headingLevel,
+  status,
+  description,
+  meta,
+  action,
+  quiet = false,
+  className,
+  ...rest
+}) {
+  const level = useHeadingLevel();
+  const Heading = headingTag(headingLevel ?? level);
+  const titleId = useId();
+  const foot = meta !== void 0 || action !== void 0;
+  return /* @__PURE__ */ jsxs(
+    Element,
+    {
+      "aria-labelledby": Element === "article" ? titleId : void 0,
+      ...rest,
+      className: cx("crewlet-catalog-tile", quiet && "crewlet-catalog-tile--quiet", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-catalog-tile__head", children: [
+          /* @__PURE__ */ jsx("span", { className: "crewlet-catalog-tile__mark", "aria-hidden": "true", children: mark }),
+          /* @__PURE__ */ jsxs("span", { className: "crewlet-catalog-tile__title", children: [
+            /* @__PURE__ */ jsx(Heading, { id: titleId, className: "crewlet-catalog-tile__name", children: title }),
+            status === void 0 || status === null ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-catalog-tile__status", children: status })
+          ] })
+        ] }),
+        description === void 0 ? null : /* @__PURE__ */ jsx("p", { className: "crewlet-catalog-tile__description", children: description }),
+        foot ? /* @__PURE__ */ jsxs("div", { className: "crewlet-catalog-tile__foot", children: [
+          /* @__PURE__ */ jsx("span", { className: "crewlet-catalog-tile__meta", children: meta }),
+          action === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-catalog-tile__action", children: action })
+        ] }) : null
+      ]
+    }
+  );
+}
+
+export { CatalogTile };

package/dist/{chunk-X3UYTAOG.js → chunk-PFZOFAQ6.js}

@@ -9,7 +9,7 @@ import { jsx } from 'react/jsx-runtime';
 var engine = null;
 var loading = null;
 function loadEngine() {
-  loading ??= import('./Editor-QV4JP242.js').then(
+  loading ??= import('./Editor-IRDQ3JDZ.js').then(
     (module) => {
       engine = module.Editor;
       return engine;