@crewlethq/ui 0.48.2 → 0.49.0

package/dist/{chunk-2MYSESZF.js → chunk-FB5CFQTG.js}

@@ -1,9 +1,10 @@
+import { Checkbox } from './chunk-NCHKKYPQ.js';
 import { EmptyState } from './chunk-PPUR46MK.js';
 import { useMediaMatch } from './chunk-RTPQDNW3.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './DataGrid-AQKPJD7W.css';
+import './DataGrid-VNGQESJA.css';
 import { useId, useRef, useState, useMemo, useCallback, useLayoutEffect, useImperativeHandle } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
 import { ChevronDownGlyph, ChevronUpGlyph } from '@crewlethq/icons/glyphs';
@@ -50,8 +51,10 @@ var LABELS = {
   hiddenToFit: (names) => `Hidden to fit: ${names}`,
   loadMore: "Load more",
   showEveryColumn: "Show every column",
-  and: "and"
+  and: "and",
+  selectAll: "Select every row"
 };
+var SELECT_COLUMN = "crewlet-select";
 function parseGridSort(raw) {
   if (!raw) return null;
   return raw.startsWith("-") ? { key: raw.slice(1), desc: true } : { key: raw, desc: false };
@@ -103,7 +106,7 @@ function overflowing(wrap) {
   const inner = wrap.getBoundingClientRect().left + wrap.clientLeft + wrap.clientWidth;
   return last.getBoundingClientRect().right > inner + 0.5;
 }
-function squeezed(wrap, visible) {
+function squeezed(wrap, visible, leading = 0) {
   const heads = wrap.querySelector(":scope > .crewlet-data-grid__head")?.children;
   if (!heads) return false;
   const cap = wrap.clientWidth * SHRINK_SHARE - 1;
@@ -114,10 +117,10 @@ function squeezed(wrap, visible) {
   for (let i = 0; i < visible.length; i++) {
     const column = visible[i];
     if (!column.shrink || column.width) continue;
-    const head = heads[i];
+    const head = heads[i + leading];
     if (!head || head.getBoundingClientRect().width >= cap) continue;
     for (const row of rows) {
-      const cell = row.querySelectorAll(":scope > .crewlet-data-grid__cell")[i];
+      const cell = row.querySelectorAll(":scope > .crewlet-data-grid__cell")[i + leading];
       if (cell && cutShort(cell)) return true;
     }
   }
@@ -145,6 +148,7 @@ function DataGrid({
   onRowActivate,
   rowHref,
   isSelected,
+  selection,
   isFailed,
   sort: sortRaw = "",
   onSortChange,
@@ -208,6 +212,70 @@ function DataGrid({
     if (bands) return bands.flatMap(walk);
     return sortRows(rows ?? []);
   }, [bands, rows, sortRows]);
+  const anchor = useRef(null);
+  const pickable = useMemo(
+    () => selection ? flat.filter((row) => selection.isSelectable?.(row) ?? true) : [],
+    [flat, selection]
+  );
+  const pickedCount = selection ? pickable.filter((row) => selection.selected.has(rowKey(row))).length : 0;
+  const allPicked = pickable.length > 0 && pickedCount === pickable.length;
+  const pick = (row, on, range) => {
+    if (!selection) return;
+    const key = rowKey(row);
+    const next = new Set(selection.selected);
+    const to = flat.findIndex((r) => rowKey(r) === key);
+    const from = range && anchor.current !== null ? flat.findIndex((r) => rowKey(r) === anchor.current) : -1;
+    const span = from >= 0 && to >= 0 ? flat.slice(Math.min(from, to), Math.max(from, to) + 1) : [row];
+    for (const r of span) {
+      if (selection.isSelectable?.(r) === false) continue;
+      if (on) next.add(rowKey(r));
+      else next.delete(rowKey(r));
+    }
+    anchor.current = key;
+    selection.onChange(next);
+  };
+  const pickAll = () => {
+    if (!selection) return;
+    const next = new Set(selection.selected);
+    for (const row of pickable) {
+      if (allPicked) next.delete(rowKey(row));
+      else next.add(rowKey(row));
+    }
+    anchor.current = null;
+    selection.onChange(next);
+  };
+  const selectColumn = selection ? {
+    key: SELECT_COLUMN,
+    header: /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        hideLabel: true,
+        label: text.selectAll,
+        checked: allPicked,
+        indeterminate: pickedCount > 0 && !allPicked,
+        disabled: pickable.length === 0,
+        onChange: pickAll
+      }
+    ),
+    cell: (row) => (
+      // ABOVE THE ROW'S LINK, so the press lands on the box.
+      /* @__PURE__ */ jsx("span", { className: "crewlet-data-grid__select", "data-above-row": true, children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          hideLabel: true,
+          label: selection.rowLabel(row),
+          checked: selection.selected.has(rowKey(row)),
+          disabled: selection.isSelectable?.(row) === false,
+          onChange: (event) => pick(row, event.target.checked, event.nativeEvent.shiftKey === true)
+        }
+      ) })
+    ),
+    action: true,
+    phoneLead: true,
+    width: "calc(var(--size-target-min) + var(--spacing-3) * 2)"
+  } : null;
+  const drawnColumns = selectColumn ? [selectColumn, ...visibleColumns] : visibleColumns;
+  const leading = drawnColumns.length - visibleColumns.length;
   const [boxWidth, setBoxWidth] = useState(0);
   useLayoutEffect(() => {
     if (!wrap || typeof ResizeObserver !== "function") return;
@@ -221,11 +289,11 @@ function DataGrid({
     const next = fitGridColumns({
       fit: fit.set === shownKeys ? fit : { ...NO_FIT, set: shownKeys },
       width: el.clientWidth,
-      overflows: overflowing(el) || squeezed(el, visibleColumns),
+      overflows: overflowing(el) || squeezed(el, visibleColumns, leading),
       visible: visibleColumns
     });
     if (next !== null) setFit(next);
-  }, [wrap, phone, fit, shownKeys, visibleColumns, flat, boxWidth]);
+  }, [wrap, phone, fit, shownKeys, visibleColumns, leading, flat, boxWidth]);
   useImperativeHandle(
     handleRef,
     () => ({
@@ -250,7 +318,7 @@ function DataGrid({
     else if (sort?.key === column.key && sort.desc) onSortChange("");
     else onSortChange(column.key);
   }
-  const template = visibleColumns.map((c) => c.width ?? (c.shrink ? `fit-content(${SHRINK_CAP})` : `minmax(${c.floor ?? 0}, 1fr)`)).join(" ");
+  const template = drawnColumns.map((c) => c.width ?? (c.shrink ? `fit-content(${SHRINK_CAP})` : `minmax(${c.floor ?? 0}, 1fr)`)).join(" ");
   if (flat.length === 0 && !bands?.length && empty) {
     return /* @__PURE__ */ jsx("div", { className: cx("crewlet-data-grid", className), "data-flush": flush || void 0, children: /* @__PURE__ */ jsx(
       EmptyState,
@@ -269,6 +337,7 @@ function DataGrid({
     const at = index;
     const link = rowHref?.(row);
     const marked = Boolean(isSelected?.(row));
+    const picked = Boolean(selection?.selected.has(rowKey(row)));
     const rowId = `${gridId}-row-${at}`;
     const overlay = link !== void 0 ? (
       // eslint-disable-next-line jsx-a11y/anchor-has-content
@@ -292,7 +361,7 @@ function DataGrid({
         onClick: (e) => onRowActivate(row, e)
       }
     ) : null;
-    const inner = visibleColumns.map((column, i) => /* @__PURE__ */ jsxs(
+    const inner = drawnColumns.map((column, i) => /* @__PURE__ */ jsxs(
       "span",
       {
         role: "cell",
@@ -319,6 +388,7 @@ function DataGrid({
         className: cx(
           "crewlet-data-grid__row",
           marked && "crewlet-data-grid__row--selected",
+          picked && "crewlet-data-grid__row--picked",
           isFailed?.(row) && "crewlet-data-grid__row--failed",
           cursor === at && "crewlet-data-grid__row--cursor"
         ),
@@ -335,13 +405,13 @@ function DataGrid({
       // A BAND IS ROWS OF THE TABLE: its head and its foot are rows of one
       // cell each across every column, and its own box is layout alone.
       /* @__PURE__ */ jsxs("div", { className: "crewlet-data-grid__band", role: "none", children: [
-        /* @__PURE__ */ jsx("div", { className: "crewlet-data-grid__band-head", role: "row", children: /* @__PURE__ */ jsxs("span", { className: "crewlet-data-grid__band-cell", role: "rowheader", "aria-colspan": visibleColumns.length, children: [
+        /* @__PURE__ */ jsx("div", { className: "crewlet-data-grid__band-head", role: "row", children: /* @__PURE__ */ jsxs("span", { className: "crewlet-data-grid__band-cell", role: "rowheader", "aria-colspan": drawnColumns.length, children: [
           band.mark,
           /* @__PURE__ */ jsx("span", { className: "crewlet-data-grid__truncate", children: band.label }),
           /* @__PURE__ */ jsx("span", { className: "crewlet-data-grid__band-count", children: band.total != null && band.total !== loaded ? `${loaded} of ${band.total}` : loaded })
         ] }) }),
         band.bands ? band.bands.map((sub) => renderBand(sub)) : sortRows(band.rows).map(renderRow),
-        band.footer && /* @__PURE__ */ jsx("div", { className: "crewlet-data-grid__band-foot", role: "row", children: /* @__PURE__ */ jsx("span", { className: "crewlet-data-grid__band-cell", role: "cell", "aria-colspan": visibleColumns.length, children: band.footer }) })
+        band.footer && /* @__PURE__ */ jsx("div", { className: "crewlet-data-grid__band-foot", role: "row", children: /* @__PURE__ */ jsx("span", { className: "crewlet-data-grid__band-cell", role: "cell", "aria-colspan": drawnColumns.length, children: band.footer }) })
       ] }, band.key)
     );
   }
@@ -358,7 +428,7 @@ function DataGrid({
       style: { gridTemplateColumns: template },
       onPointerDown,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "crewlet-data-grid__head", role: "row", children: visibleColumns.map((column) => {
+        /* @__PURE__ */ jsx("div", { className: "crewlet-data-grid__head", role: "row", children: drawnColumns.map((column) => {
           const sorted = sort?.key === column.key;
           const sortable = Boolean(column.sortValue && onSortChange);
           const headClass = cx(

package/dist/{chunk-KNMQS3JY.js → chunk-GHY63X4C.js}

@@ -1,5 +1,5 @@
 import { Kbd } from './chunk-SMBKXWML.js';
-import { Textarea } from './chunk-D4EOPIFL.js';
+import { Textarea } from './chunk-EXRRTKWT.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Composer-TXULCPPV.css';
 import { forwardRef } from 'react';

package/dist/{chunk-DY4DQ7EB.js → chunk-GP4YWZFO.js}

@@ -1,5 +1,5 @@
+import { ConfirmModal } from './chunk-YCC2S7DF.js';
 import { InlineCode } from './chunk-5CLW2CXT.js';
-import { ConfirmModal } from './chunk-6AKG2VLR.js';
 import { Callout } from './chunk-SZZRIHGT.js';
 import './LinkInterstitial-ET4MSVSV.css';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-NRWJUGNA.js → chunk-H55D66IK.js}

@@ -1,6 +1,6 @@
 import { Switch } from './chunk-A722MUNR.js';
 import { useReorder } from './chunk-XJ2QEBMM.js';
-import { Checkbox } from './chunk-YUAQSWNW.js';
+import { Checkbox } from './chunk-NCHKKYPQ.js';
 import { IconButton } from './chunk-LACA4JGC.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-JNFTFAPN.js → chunk-H7NMJ5AI.js}

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

package/dist/{chunk-GKRPPSWY.js → chunk-ILFEWRLG.js}

@@ -1,7 +1,7 @@
 import { StatusDot } from './chunk-WIATRXEJ.js';
 import { useRoving, tabStop } from './chunk-EGMQURBR.js';
 import { Count } from './chunk-BHHIIK3M.js';
-import { Menu } from './chunk-3JIZ2A6K.js';
+import { Menu } from './chunk-TMM32U7D.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/chunk-ITI2Z44C.js

@@ -0,0 +1,139 @@
+import { FileDrop, FilePickButton } from './chunk-THDGBD6Y.js';
+import { contrastRatio } from './chunk-B235ANDO.js';
+import { normalizeHex } from './chunk-UZMNR366.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './LogoSlot-T2UFOJXU.css';
+import { useId } from 'react';
+import { ImageGlyph, CircleAlertGlyph, UploadGlyph, TrashGlyph } from '@crewlethq/icons/glyphs';
+import { themes } from '@crewlethq/tokens';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var LABELS = {
+  choose: "Choose a file",
+  replace: "Replace",
+  remove: "Remove",
+  drop: "Drop the file to use it",
+  uploading: "Uploading",
+  empty: "No logo yet",
+  hint: "SVG, PNG or WebP, up to 2 MB."
+};
+var DEFAULT_GROUNDS = {
+  light: themes.light.color.surface.background,
+  dark: themes.dark.color.surface.background
+};
+var INKS = [themes.light.color.text.secondary, themes.dark.color.text.secondary];
+function inkOn(ground) {
+  let best = INKS[0];
+  let most = -1;
+  for (const ink of INKS) {
+    const ratio = contrastRatio(ink, ground) ?? 0;
+    if (ratio > most) {
+      most = ratio;
+      best = ink;
+    }
+  }
+  return best;
+}
+function LogoSlot({
+  label,
+  description,
+  ground,
+  groundColor,
+  shape = "wide",
+  src,
+  alt,
+  guide = true,
+  uploading = false,
+  error,
+  editable = false,
+  onFile,
+  onRemove,
+  accept = "image/svg+xml,image/png,image/webp",
+  download,
+  emptyNote,
+  className,
+  labels
+}) {
+  const text = { ...LABELS, ...labels };
+  const labelId = useId();
+  const descriptionId = useId();
+  const groundValue = normalizeHex(groundColor) ?? DEFAULT_GROUNDS[ground];
+  const filled = Boolean(src);
+  const take = (files) => {
+    const first = files[0];
+    if (first && !uploading) onFile?.(first.file);
+  };
+  const stage = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        "crewlet-logo-slot__stage",
+        `crewlet-logo-slot__stage--${ground}`,
+        `crewlet-logo-slot__stage--${shape}`,
+        !filled && "is-empty",
+        uploading && "is-uploading"
+      ),
+      style: { "--crewlet-logo-slot-ground": groundValue, "--crewlet-logo-slot-ink": inkOn(groundValue) },
+      children: /* @__PURE__ */ jsx("span", { className: cx("crewlet-logo-slot__space", guide && "has-guide"), children: filled ? /* @__PURE__ */ jsx("img", { src: src ?? void 0, alt, className: "crewlet-logo-slot__image", draggable: false }) : /* @__PURE__ */ jsx("span", { className: "crewlet-logo-slot__placeholder", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ImageGlyph, { size: "lg" }) }) })
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-labelledby": labelId,
+      "aria-describedby": description ? descriptionId : void 0,
+      "aria-busy": uploading || void 0,
+      className: cx("crewlet-logo-slot", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-logo-slot__head", children: [
+          /* @__PURE__ */ jsxs("span", { className: "crewlet-logo-slot__words", children: [
+            /* @__PURE__ */ jsx("span", { id: labelId, className: "crewlet-logo-slot__label", children: label }),
+            description ? /* @__PURE__ */ jsx("span", { id: descriptionId, className: "crewlet-logo-slot__description", children: description }) : null
+          ] }),
+          download && filled ? /* @__PURE__ */ jsx("span", { className: "crewlet-logo-slot__download", children: download }) : null
+        ] }),
+        editable ? /* @__PURE__ */ jsx(FileDrop, { title: text.drop, onFiles: take, disabled: uploading, children: stage }) : stage,
+        !filled && (!editable || emptyNote) ? /* @__PURE__ */ jsx("p", { className: "crewlet-logo-slot__empty", children: emptyNote ?? text.empty }) : null,
+        error ? /* @__PURE__ */ jsxs("p", { className: "crewlet-logo-slot__error", role: "alert", children: [
+          /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "sm", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { children: error })
+        ] }) : null,
+        editable ? /* @__PURE__ */ jsxs("div", { className: "crewlet-logo-slot__foot", children: [
+          /* @__PURE__ */ jsx(
+            FilePickButton,
+            {
+              size: "small",
+              variant: "secondary",
+              leadingIcon: /* @__PURE__ */ jsx(UploadGlyph, { size: "sm" }),
+              accept,
+              multiple: false,
+              loading: uploading,
+              "aria-describedby": labelId,
+              onFiles: take,
+              children: filled ? text.replace : text.choose
+            }
+          ),
+          filled && onRemove ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              variant: "ghost",
+              leadingIcon: /* @__PURE__ */ jsx(TrashGlyph, { size: "sm" }),
+              disabledReason: uploading ? text.uploading : void 0,
+              "aria-describedby": labelId,
+              onClick: onRemove,
+              children: text.remove
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("span", { className: "crewlet-logo-slot__hint", children: text.hint })
+        ] }) : null,
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", { role: "status", children: uploading ? text.uploading : "" }) })
+      ]
+    }
+  );
+}
+
+export { LogoSlot };

package/dist/{chunk-P5VGSVWG.js → chunk-J24Q4HTD.js}

@@ -1,21 +1,30 @@
-import { ArtifactKindGlyph } from './chunk-CE2THTQR.js';
+import { ArtifactKindGlyph } from './chunk-RSKW25Y5.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArtifactKinds-CVD3FCYO.css';
-import './ArtifactNameCell-RTVP4LO4.css';
-import { PinGlyph } from '@crewlethq/icons/glyphs';
+import './ArtifactKinds-O3CALPVX.css';
+import './ArtifactNameCell-3AHLUSE5.css';
+import { FolderGlyph, PinGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var LABELS = {
-  kinds: { html: "HTML", doc: "Doc", slides: "Slides", design: "Design", dashboard: "Dashboard", sheet: "Sheet" },
-  pinned: "Pinned"
+  kinds: { html: "HTML", doc: "Doc", slides: "Slides", design: "Design", dashboard: "Dashboard", sheet: "Sheet", brand: "Brand" },
+  pinned: "Pinned",
+  folder: "Folder"
 };
 function ArtifactNameCell({ kind, title, detail, pinned = false, trashed = false, className, labels }) {
   const text = { ...LABELS, ...labels, kinds: { ...LABELS.kinds, ...labels?.kinds } };
-  const kindWord = text.kinds[kind];
+  const folder = kind === "folder";
+  const kindWord = folder ? text.folder : text.kinds[kind];
   const about = detail?.trim();
   return /* @__PURE__ */ jsxs("span", { className: cx("crewlet-artifact-name", trashed && "crewlet-artifact-name--trashed", className), children: [
-    /* @__PURE__ */ jsx("span", { className: cx("crewlet-artifact-name__mark", `crewlet-kind--${kind}`), "aria-hidden": "true", children: /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind, size: "sm" }) }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cx("crewlet-artifact-name__mark", folder ? "crewlet-artifact-name__mark--folder" : `crewlet-kind--${kind}`),
+        "aria-hidden": "true",
+        children: folder ? /* @__PURE__ */ jsx(FolderGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind, size: "sm" })
+      }
+    ),
     /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-name__words", children: [
       /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-name__title-row", children: [
         /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-name__title", title, children: title }),

package/dist/{chunk-2FDTSARB.js → chunk-JFDIMO3A.js}

@@ -1,6 +1,6 @@
-import { Select } from './chunk-LD3GEVQU.js';
+import { Select } from './chunk-XQZ6EWOE.js';
+import { Modal } from './chunk-YCC2S7DF.js';
 import { CopyButton } from './chunk-7SHAFLEX.js';
-import { Modal } from './chunk-6AKG2VLR.js';
 import { Callout } from './chunk-SZZRIHGT.js';
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';

package/dist/chunk-JKAFEFFC.js

@@ -0,0 +1,44 @@
+import { fontStack, safeFontFamily } from './chunk-5SGHW42B.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './TypeSpecimen-WK6YNHL7.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var LABELS = {
+  glyphs: "Aa",
+  sample: "Every doc, deck and page your company makes, in its own type."
+};
+function quotedFamily(family) {
+  return `"${family.replace(/["\\\r\n]/g, "").trim()}"`;
+}
+function TypeSpecimen({
+  family,
+  label,
+  fontFamily,
+  sample,
+  detail,
+  weight = "regular",
+  size = "md",
+  className,
+  labels
+}) {
+  const text = { ...LABELS, ...labels };
+  const stack = fontStack(safeFontFamily(fontFamily) ?? quotedFamily(family), "var(--font-family-sans)");
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      className: cx("crewlet-type-specimen", `crewlet-type-specimen--${size}`, `crewlet-type-specimen--${weight}`, className),
+      style: { "--crewlet-type-specimen-family": stack },
+      children: [
+        /* @__PURE__ */ jsxs("figcaption", { className: "crewlet-type-specimen__caption", children: [
+          /* @__PURE__ */ jsx("span", { className: "crewlet-type-specimen__label", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "crewlet-type-specimen__family", children: family }),
+          detail ? /* @__PURE__ */ jsx("span", { className: "crewlet-type-specimen__detail", children: detail }) : null
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "crewlet-type-specimen__glyphs", "aria-hidden": "true", children: text.glyphs }),
+        /* @__PURE__ */ jsx("span", { className: "crewlet-type-specimen__sample", children: sample ?? text.sample })
+      ]
+    }
+  );
+}
+
+export { TypeSpecimen };

package/dist/{chunk-6HYPQ5PY.js → chunk-JWNYI7UD.js}

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

package/dist/{chunk-WT5UPL6P.js → chunk-KHZYAEGZ.js}

@@ -1,4 +1,4 @@
-import { Combobox } from './chunk-LOBV4QON.js';
+import { Combobox } from './chunk-P5JBDHWC.js';
 import { PRINCIPAL_KINDS, PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './PrincipalPicker-7NNZTGUP.css';

package/dist/chunk-M4QM477B.js

@@ -0,0 +1,80 @@
+import { Card } from './chunk-INHXF2CL.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './FolderTile-FDT5Y63Z.css';
+import { useId } from 'react';
+import { FolderGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var CONTENTS = {
+  artifacts: (count) => count === 1 ? "1 artifact" : `${count} artifacts`,
+  folders: (count) => count === 1 ? "1 folder" : `${count} folders`,
+  nothing: "Nothing you can open yet"
+};
+function describeFolderContents(contents, labels) {
+  const text = { ...CONTENTS, ...labels };
+  const parts = [];
+  if (contents.artifacts > 0) parts.push(text.artifacts(contents.artifacts));
+  if (contents.folders > 0) parts.push(text.folders(contents.folders));
+  return parts.length > 0 ? parts.join(" \xB7 ") : text.nothing;
+}
+var LABELS = {
+  ...CONTENTS,
+  folder: "Folder",
+  selected: "Selected"
+};
+function FolderTile({
+  name,
+  href,
+  visibility,
+  contents,
+  actions,
+  selected = false,
+  dropTarget = false,
+  size = "tile",
+  className,
+  labels
+}) {
+  const text = { ...LABELS, ...labels };
+  const nameId = useId();
+  const factsId = useId();
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      variant: "subtle",
+      padding: "none",
+      interactive: true,
+      selected,
+      className: cx(
+        "crewlet-folder-tile",
+        `crewlet-folder-tile--${size}`,
+        dropTarget && "is-drop-target",
+        actions ? "crewlet-folder-tile--with-actions" : null,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("a", { href, className: "crewlet-folder-tile__link", "aria-labelledby": nameId, "aria-describedby": factsId, children: [
+          /* @__PURE__ */ jsx("span", { className: "crewlet-folder-tile__glyph", "aria-hidden": "true", children: /* @__PURE__ */ jsx(FolderGlyph, { size: size === "row" ? "md" : "lg" }) }),
+          /* @__PURE__ */ jsxs("span", { className: "crewlet-folder-tile__body", children: [
+            /* @__PURE__ */ jsx("span", { id: nameId, className: "crewlet-folder-tile__name", title: name, children: name }),
+            /* @__PURE__ */ jsxs("span", { id: factsId, className: "crewlet-folder-tile__facts", children: [
+              /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+                text.folder,
+                selected ? `, ${text.selected}` : "",
+                visibility || contents ? ", " : ""
+              ] }),
+              visibility ? /* @__PURE__ */ jsx("span", { className: "crewlet-folder-tile__visibility", children: visibility }) : null,
+              contents ? /* @__PURE__ */ jsxs("span", { className: "crewlet-folder-tile__contents", children: [
+                visibility ? /* @__PURE__ */ jsx(VisuallyHidden, { children: ", " }) : null,
+                describeFolderContents(contents, text)
+              ] }) : null
+            ] })
+          ] })
+        ] }),
+        actions ? /* @__PURE__ */ jsx("span", { className: "crewlet-folder-tile__actions", children: actions }) : null
+      ]
+    }
+  );
+}
+
+export { FolderTile, describeFolderContents };

package/dist/{chunk-YUDUYMZB.js → chunk-MIEBOO7Y.js}

@@ -1,7 +1,7 @@
-import { Modal } from './chunk-6AKG2VLR.js';
+import { Modal } from './chunk-YCC2S7DF.js';
 import { useListbox, useHighlightRest } from './chunk-7KHM2FZH.js';
 import { Kbd } from './chunk-SMBKXWML.js';
-import { Input } from './chunk-D4EOPIFL.js';
+import { Input } from './chunk-EXRRTKWT.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';

package/dist/{chunk-IVA7ZWDS.js → chunk-NAWUXCBC.js}

@@ -1,14 +1,14 @@
 import { PageHeader } from './chunk-DKB73KZI.js';
-import { DataTable } from './chunk-DETVVKAH.js';
-import { DateTimePicker } from './chunk-K77LKW3X.js';
+import { DateTimePicker } from './chunk-ZFM5L7M4.js';
+import { DataTable } from './chunk-WQ7S7CKZ.js';
 import { useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
-import { Popover } from './chunk-KHJIEPZV.js';
 import { Toolbar } from './chunk-NR4CPM4T.js';
+import { Popover } from './chunk-KHJIEPZV.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { Kbd } from './chunk-SMBKXWML.js';
-import { Input } from './chunk-D4EOPIFL.js';
+import { Input } from './chunk-EXRRTKWT.js';
 import { Count } from './chunk-BHHIIK3M.js';
-import { Menu } from './chunk-3JIZ2A6K.js';
+import { Menu } from './chunk-TMM32U7D.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-LACA4JGC.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-YUAQSWNW.js → chunk-NCHKKYPQ.js}

@@ -1,6 +1,7 @@
-import { FormField } from './chunk-D4EOPIFL.js';
+import { FormField } from './chunk-EXRRTKWT.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Checkbox-ALWG3WV2.css';
+import './Checkbox-MB22OW6P.css';
 import { forwardRef, useId, useRef, useCallback, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -11,6 +12,7 @@ var Checkbox = forwardRef(function Checkbox2({
   framed = false,
   size = "md",
   indeterminate = false,
+  hideLabel = false,
   onCheckedChange,
   onChange,
   className = "",
@@ -44,6 +46,7 @@ var Checkbox = forwardRef(function Checkbox2({
         tone === "danger" && "crewlet-checkbox--danger",
         framed && "crewlet-checkbox--framed",
         size === "sm" && "crewlet-checkbox--sm",
+        hideLabel && "crewlet-checkbox--bare",
         disabled && "is-disabled",
         className
       ),
@@ -65,7 +68,7 @@ var Checkbox = forwardRef(function Checkbox2({
             ...rest
           }
         ),
-        /* @__PURE__ */ jsxs("span", { className: "crewlet-checkbox__text", children: [
+        hideLabel ? /* @__PURE__ */ jsx(VisuallyHidden, { id: labelId, children: label }) : /* @__PURE__ */ jsxs("span", { className: "crewlet-checkbox__text", children: [
           /* @__PURE__ */ jsx("span", { className: "crewlet-checkbox__label", id: labelId, children: label }),
           description ? /* @__PURE__ */ jsx("span", { className: "crewlet-checkbox__description", id: descriptionId, children: description }) : null
         ] })