@crewlethq/ui 0.32.0 → 0.34.0

package/dist/{chunk-I3KKZ2O3.js → chunk-XEGZHHRH.js}

@@ -1,10 +1,10 @@
 import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
-import { useLayerContainer } from './chunk-HMPFGIWM.js';
+import { useLayerContainer } from './chunk-OMV5W53A.js';
 import { focusables, useModalLayer, useBodyScrollLock } from './chunk-R25RGPUB.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Modal-XOSV6FAH.css';
+import './Modal-7MWRCWAI.css';
 import { useId, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { ChevronLeftGlyph, XGlyph } from '@crewlethq/icons/glyphs';
@@ -104,40 +104,49 @@ function ModalFrame({
   };
   const closes = banded && showCloseButton;
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    banded && (given(title) || given(subtitle) || given(headerActions) || closes || onBack) ? /* @__PURE__ */ jsxs("div", { className: cx("crewlet-modal__header", sheet ? "crewlet-modal__header--sheet" : void 0), children: [
-      onBack ? /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          className: "crewlet-modal__back",
-          label: backLabel,
-          icon: /* @__PURE__ */ jsx(ChevronLeftGlyph, { size: "md" }),
-          onClick: onBack
-        }
-      ) : null,
-      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",
-          {
-            className: cx("crewlet-modal__title", sheet ? "crewlet-modal__title--sheet" : void 0),
-            id: titleId,
-            children: title
-          }
-        ) : null,
-        given(subtitle) ? /* @__PURE__ */ jsx("p", { className: "crewlet-modal__subtitle", id: subtitleId, children: subtitle }) : null
-      ] }),
-      given(headerActions) ? /* @__PURE__ */ jsx("div", { className: "crewlet-modal__actions", children: headerActions }) : null,
-      closes ? /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          className: "crewlet-modal__close",
-          label: closeLabel,
-          icon: /* @__PURE__ */ jsx(XGlyph, { size: "md" }),
-          onClick: onClose,
-          disabledReason: dismissable ? void 0 : closeDisabledReason
-        }
-      ) : null
-    ] }) : null,
+    banded && (given(title) || given(subtitle) || given(headerActions) || closes || onBack) ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(
+          "crewlet-modal__header",
+          sheet ? "crewlet-modal__header--sheet" : given(subtitle) ? "crewlet-modal__header--subtitled" : void 0
+        ),
+        children: [
+          onBack ? /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              className: "crewlet-modal__back",
+              label: backLabel,
+              icon: /* @__PURE__ */ jsx(ChevronLeftGlyph, { size: "md" }),
+              onClick: onBack
+            }
+          ) : null,
+          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",
+              {
+                className: cx("crewlet-modal__title", sheet ? "crewlet-modal__title--sheet" : void 0),
+                id: titleId,
+                children: title
+              }
+            ) : null,
+            given(subtitle) ? /* @__PURE__ */ jsx("p", { className: "crewlet-modal__subtitle", id: subtitleId, children: subtitle }) : null
+          ] }),
+          given(headerActions) ? /* @__PURE__ */ jsx("div", { className: "crewlet-modal__actions", children: headerActions }) : null,
+          closes ? /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              className: "crewlet-modal__close",
+              label: closeLabel,
+              icon: /* @__PURE__ */ jsx(XGlyph, { size: "md" }),
+              onClick: onClose,
+              disabledReason: dismissable ? void 0 : closeDisabledReason
+            }
+          ) : null
+        ]
+      }
+    ) : null,
     given(children) || prompt && given(title) ? /* @__PURE__ */ jsxs(
       "div",
       {

package/dist/{chunk-IKB6HFGK.js → chunk-XO7PUL4F.js}

@@ -1,16 +1,18 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './StatCard-KPAFD4E2.css';
+import './StatCard-4T7TMWMN.css';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var StatCard = ({
   label,
+  hideLabel = false,
   value,
   unit,
   sub,
   subTone = "neutral",
   delta,
   trend,
+  trendPlacement = "end",
   icon,
   tone = "neutral",
   loading = false,
@@ -28,16 +30,16 @@ var StatCard = ({
       className: cx("crewlet-statcard", `crewlet-statcard--${tone}`, flush && "crewlet-statcard--flush", className),
       "aria-busy": loading || void 0,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "crewlet-statcard__label", children: [
+        hideLabel ? /* @__PURE__ */ jsx(VisuallyHidden, { children: label }) : /* @__PURE__ */ jsxs("div", { className: "crewlet-statcard__label", children: [
           icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__icon", "aria-hidden": true, children: icon }) : null,
           label
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "crewlet-statcard__reading", children: [
+        /* @__PURE__ */ jsxs("div", { className: cx("crewlet-statcard__reading", trendPlacement === "below" && "crewlet-statcard__reading--below"), children: [
           /* @__PURE__ */ jsx("div", { className: "crewlet-statcard__value", children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__placeholder", "aria-hidden": true }),
             /* @__PURE__ */ jsx(VisuallyHidden, { children: loadingLabel })
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            value,
+            /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__number", children: value }),
             unit ? /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__unit", children: unit }) : null
           ] }) }),
           trend && !loading ? /* @__PURE__ */ jsx("div", { className: "crewlet-statcard__trend", children: trend }) : null

package/dist/chunk-XTOVADJU.js

@@ -0,0 +1,170 @@
+import { Skeleton } from './chunk-TEUQWOWZ.js';
+import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
+import { RelativeTime } from './chunk-3CZ7XAVY.js';
+import { Card } from './chunk-ACA27MZH.js';
+import { AvatarStack } from './chunk-5AQBPHZD.js';
+import { ArtifactKindGround } from './chunk-UDQW6UK7.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ArtifactCard-XHRLAL7C.css';
+import { useId } from 'react';
+import { TableGlyph, LayoutDashboardGlyph, PaletteGlyph, PresentationGlyph, FileTextGlyph, FileCodeGlyph, PinGlyph, BuildingComplexGlyph, UsersGlyph, LockGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ARTIFACT_KINDS = ["html", "doc", "slides", "design", "dashboard", "sheet"];
+var KIND_GLYPHS = {
+  html: FileCodeGlyph,
+  doc: FileTextGlyph,
+  slides: PresentationGlyph,
+  design: PaletteGlyph,
+  dashboard: LayoutDashboardGlyph,
+  sheet: TableGlyph
+};
+function ArtifactKindGlyph({ kind, size = "md" }) {
+  const Drawn = KIND_GLYPHS[kind];
+  return /* @__PURE__ */ jsx(Drawn, { size });
+}
+function ArtifactPreviewGlyph({ kind }) {
+  return /* @__PURE__ */ jsx(ArtifactKindGround, { kind });
+}
+var ACCESS_GLYPHS = {
+  private: LockGlyph,
+  shared: UsersGlyph,
+  company: BuildingComplexGlyph
+};
+var LABELS = {
+  kinds: { html: "HTML", doc: "Doc", slides: "Slides", design: "Design", dashboard: "Dashboard", sheet: "Sheet" },
+  pinned: "Pinned",
+  version: (version) => `v${version}`,
+  changes: (count) => count === 1 ? "1 change since you looked" : `${count} changes since you looked`,
+  present: (count) => count === 1 ? "1 here now" : `${count} here now`,
+  updated: "Edited",
+  by: (name) => `by ${name}`,
+  access: { private: "Private", shared: "Shared", company: "Shared with the company" }
+};
+function ArtifactCard({
+  title,
+  kind,
+  href,
+  preview,
+  owner,
+  updatedAt,
+  updatedBy,
+  presence,
+  changes,
+  pinned = false,
+  version,
+  project,
+  access,
+  actions,
+  trashed = false,
+  size = "card",
+  className,
+  now,
+  labels
+}) {
+  const text = {
+    ...LABELS,
+    ...labels,
+    kinds: { ...LABELS.kinds, ...labels?.kinds },
+    access: { ...LABELS.access, ...labels?.access }
+  };
+  const titleId = useId();
+  const factsId = useId();
+  const present = presence && presence.length > 0 ? presence : null;
+  const changedBy = updatedBy && updatedBy !== owner?.name ? updatedBy : void 0;
+  const edited = /* @__PURE__ */ jsxs("span", { children: [
+    `${text.updated} `,
+    /* @__PURE__ */ jsx(RelativeTime, { value: updatedAt, now }),
+    changedBy ? ` ${text.by(changedBy)}` : null
+  ] });
+  const extra = present || changes !== void 0 && changes > 0 ? /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__line", children: [
+    present ? /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__presence", children: [
+      /* @__PURE__ */ jsx(AvatarStack, { members: present, max: 3, size: "xs", decorative: true }),
+      /* @__PURE__ */ jsx("span", { children: text.present(present.length) })
+    ] }) : null,
+    changes !== void 0 && changes > 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__changes", children: text.changes(changes) }) : null
+  ] }) : null;
+  if (size === "compact") {
+    return /* @__PURE__ */ jsxs(
+      Card,
+      {
+        href,
+        variant: "subtle",
+        padding: "none",
+        className: cx("crewlet-artifact-card", "crewlet-artifact-card--compact", className),
+        "aria-labelledby": titleId,
+        "aria-describedby": factsId,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__glyph crewlet-artifact-card__glyph--compact", "aria-hidden": true, children: /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind, size: "lg" }) }),
+          /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__body", children: [
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__title-row", children: [
+              /* @__PURE__ */ jsx("span", { id: titleId, className: "crewlet-artifact-card__title", title, children: title }),
+              pinned ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__pin", title: text.pinned, "aria-hidden": true, children: /* @__PURE__ */ jsx(PinGlyph, { size: "xs" }) }) : null
+            ] }),
+            /* @__PURE__ */ jsxs("span", { id: factsId, className: "crewlet-artifact-card__facts", children: [
+              /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__line", children: [
+                /* @__PURE__ */ jsx("span", { children: text.kinds[kind] }),
+                project ? /* @__PURE__ */ jsx("span", { children: project }) : null,
+                version !== void 0 ? /* @__PURE__ */ jsx("span", { children: text.version(version) }) : null,
+                pinned ? /* @__PURE__ */ jsx(VisuallyHidden, { children: text.pinned }) : null
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__line", children: [
+                owner ? /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__owner", children: [
+                  /* @__PURE__ */ jsx(PrincipalAvatar, { principal: owner, size: "xs" }),
+                  /* @__PURE__ */ jsx("span", { children: owner.name })
+                ] }) : null,
+                edited
+              ] }),
+              extra
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+  const Access = access ? ACCESS_GLYPHS[access] : null;
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-artifact-card", "crewlet-artifact-card--card", trashed && "crewlet-artifact-card--trashed", className), children: [
+    /* @__PURE__ */ jsxs("a", { href, className: "crewlet-artifact-card__link", "aria-labelledby": titleId, "aria-describedby": factsId, children: [
+      /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__preview", "aria-hidden": true, children: preview ?? /* @__PURE__ */ jsx(ArtifactPreviewGlyph, { kind }) }),
+      /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__body", children: [
+        /* @__PURE__ */ jsx("span", { className: cx("crewlet-artifact-card__badge", `crewlet-kind--${kind}`), "aria-hidden": true, children: /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind, size: "md" }) }),
+        /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__title-row", children: [
+          /* @__PURE__ */ jsx("span", { id: titleId, className: "crewlet-artifact-card__title", title, children: title }),
+          pinned ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__pin", title: text.pinned, "aria-hidden": true, children: /* @__PURE__ */ jsx(PinGlyph, { size: "sm" }) }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("span", { id: factsId, className: "crewlet-artifact-card__facts", children: [
+          /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+            text.kinds[kind],
+            pinned ? `, ${text.pinned}` : ""
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__line crewlet-artifact-card__meta", children: [
+            Access && access ? /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__access", title: text.access[access], children: [
+              /* @__PURE__ */ jsx(Access, { size: "sm" }),
+              /* @__PURE__ */ jsx(VisuallyHidden, { children: text.access[access] })
+            ] }) : null,
+            owner ? /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__owner", children: [
+              /* @__PURE__ */ jsx(PrincipalAvatar, { principal: owner, size: "xs" }),
+              /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__owner-name", children: owner.name })
+            ] }) : null,
+            edited
+          ] }),
+          extra
+        ] })
+      ] })
+    ] }),
+    actions ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__actions", children: actions }) : null
+  ] });
+}
+function ArtifactCardSkeleton({ className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-artifact-card", "crewlet-artifact-card--card", "crewlet-artifact-card--skeleton", className), "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__preview", children: /* @__PURE__ */ jsx(Skeleton, { variant: "box", width: "100%", height: "100%", borderRadius: 0 }) }),
+    /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__body", children: [
+      /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__badge" }),
+      /* @__PURE__ */ jsx(Skeleton, { variant: "box", width: "62%", height: 18, borderRadius: "var(--radius-sm)" }),
+      /* @__PURE__ */ jsx(Skeleton, { variant: "box", width: "38%", height: 12, borderRadius: "var(--radius-sm)", marginTop: 6 })
+    ] })
+  ] });
+}
+
+export { ARTIFACT_KINDS, ArtifactCard, ArtifactCardSkeleton, ArtifactKindGlyph, ArtifactPreviewGlyph };

package/dist/chunk-XV32RKQZ.js

@@ -0,0 +1,142 @@
+import { SlideStage } from './chunk-LV4APO72.js';
+import { useReorder } from './chunk-XJ2QEBMM.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './SlideFilmstrip-5U6Z55GS.css';
+import { useRef, useLayoutEffect } from 'react';
+import { EyeOffGlyph, GripVerticalGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var LABELS = {
+  list: "Slides",
+  slide: (position, title) => `Slide ${position}, ${title}`,
+  hidden: "Hidden when presenting",
+  untitled: "Untitled"
+};
+var STEP_KEYS = {
+  vertical: { back: "ArrowUp", forward: "ArrowDown" },
+  horizontal: { back: "ArrowLeft", forward: "ArrowRight" }
+};
+function SlideFilmstrip({
+  slides,
+  selected,
+  onSelect,
+  renderSlide,
+  onReorder,
+  orientation = "vertical",
+  className,
+  labels
+}) {
+  const text = { ...LABELS, ...labels };
+  const ids = slides.map((s) => s.id);
+  const byId = new Map(slides.map((s) => [s.id, s]));
+  const titleOf = (id) => byId.get(id)?.title || text.untitled;
+  const reorder = useReorder({
+    keys: ids,
+    onReorder: (next) => onReorder?.(next),
+    nameOf: (id) => text.slide(ids.indexOf(id) + 1, titleOf(id)),
+    // A ROW IS A ONE-LINE GRID to the reorder: its items are side by side, so
+    // a drop lands by the pointer's half across, and Left and Right move too.
+    axis: orientation === "vertical" ? "vertical" : "grid"
+  });
+  const order = onReorder ? reorder.order : ids;
+  const options = useRef(/* @__PURE__ */ new Map());
+  const root = useRef(null);
+  useLayoutEffect(() => {
+    const port = root.current;
+    const item = options.current.get(selected)?.closest("li");
+    if (!port || !item) return;
+    scrollIntoPort(port, item, orientation);
+  }, [selected, orientation]);
+  const go = (id) => {
+    if (!id) return;
+    onSelect(id);
+    options.current.get(id)?.focus();
+  };
+  const onKeyDown = (event) => {
+    const at = order.indexOf(selected);
+    const step = STEP_KEYS[orientation];
+    const to = {
+      [step.forward]: order[at + 1],
+      [step.back]: order[at - 1],
+      Home: order[0],
+      End: order[order.length - 1]
+    }[event.key];
+    if (to === void 0) return;
+    event.preventDefault();
+    go(to);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: root,
+      className: cx("crewlet-slide-filmstrip", `crewlet-slide-filmstrip--${orientation}`, className),
+      children: [
+        onReorder ? /* @__PURE__ */ jsx(VisuallyHidden, { id: reorder.hintId, children: reorder.hint }) : null,
+        /* @__PURE__ */ jsx(
+          "ol",
+          {
+            className: "crewlet-slide-filmstrip__list",
+            "aria-label": text.list,
+            ...onReorder ? reorder.containerProps : {},
+            children: order.map((id, i) => {
+              const slide = byId.get(id);
+              const isSelected = id === selected;
+              return /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  className: "crewlet-slide-filmstrip__item",
+                  "data-selected": isSelected ? "true" : void 0,
+                  "data-hidden": slide?.hidden ? "true" : void 0,
+                  ...onReorder ? reorder.itemProps(id) : {},
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "crewlet-slide-filmstrip__number", "aria-hidden": "true", children: i + 1 }),
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        ref: (node) => {
+                          if (node) options.current.set(id, node);
+                          else options.current.delete(id);
+                        },
+                        className: "crewlet-slide-filmstrip__thumb",
+                        "aria-current": isSelected ? "true" : void 0,
+                        "aria-label": text.slide(i + 1, titleOf(id)) + (slide?.hidden ? `, ${text.hidden}` : ""),
+                        tabIndex: isSelected ? 0 : -1,
+                        onClick: () => go(id),
+                        onKeyDown,
+                        children: [
+                          /* @__PURE__ */ jsx(SlideStage, { label: text.slide(i + 1, titleOf(id)), children: renderSlide(id) }),
+                          slide?.hidden ? /* @__PURE__ */ jsx("span", { className: "crewlet-slide-filmstrip__hidden", children: /* @__PURE__ */ jsx(EyeOffGlyph, { size: "sm" }) }) : null
+                        ]
+                      }
+                    ),
+                    onReorder ? /* @__PURE__ */ jsx("button", { type: "button", className: "crewlet-slide-filmstrip__handle", ...reorder.handleProps(id), children: /* @__PURE__ */ jsx(GripVerticalGlyph, { size: "sm" }) }) : null
+                  ]
+                },
+                id
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+function scrollIntoPort(port, item, orientation) {
+  const p = port.getBoundingClientRect();
+  const r = item.getBoundingClientRect();
+  if (orientation === "vertical") {
+    if (port.scrollHeight <= port.clientHeight) return;
+    const pad = r.height / 4;
+    if (r.top < p.top) port.scrollTop += r.top - p.top - pad;
+    else if (r.bottom > p.bottom) port.scrollTop += r.bottom - p.bottom + pad;
+  } else {
+    if (port.scrollWidth <= port.clientWidth) return;
+    const pad = r.width / 4;
+    if (r.left < p.left) port.scrollLeft += r.left - p.left - pad;
+    else if (r.right > p.right) port.scrollLeft += r.right - p.right + pad;
+  }
+}
+
+export { SlideFilmstrip };

package/dist/{chunk-TBMDMXEX.js → chunk-YA3AWELW.js}

@@ -1,4 +1,4 @@
-import { OrgLabel } from './chunk-AKEZ3G5V.js';
+import { OrgLabel } from './chunk-ONQKKHON.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './OrgNode-TCHJH5FO.css';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-HVIX5ECM.js → chunk-YEVG2X5R.js}

@@ -1,5 +1,5 @@
 import { useRoving, tabStop } from './chunk-RKKO7QHH.js';
-import { Avatar } from './chunk-5OM447RW.js';
+import { Avatar } from './chunk-PZKHBB7D.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { CREWLET_CHARACTERS, CREWLET_CHARACTER_GEOMETRY } from '@crewlethq/icons/characters';
 import { jsx } from 'react/jsx-runtime';