@crewlethq/ui 0.32.0 → 0.33.0

package/dist/{chunk-UZ6MA2V6.js → chunk-2DHMVB5J.js}

@@ -1,5 +1,5 @@
-import { Select } from './chunk-FC4YTTFJ.js';
-import { Popover } from './chunk-BWRGFKJP.js';
+import { Select } from './chunk-UQGFHNDI.js';
+import { Popover } from './chunk-K3IJQNB7.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-GXQ3B46I.js';
 import { Input } from './chunk-6QFAK2WV.js';
 import { isComposing } from './chunk-R25RGPUB.js';

package/dist/{chunk-WJDQ7XQA.js → chunk-2QEDJSJC.js}

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

package/dist/{chunk-2HIOJ4YZ.js → chunk-3EB2AV3H.js}

@@ -1,4 +1,4 @@
-import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup, LAYER_REPOSITION_EVENT } from './chunk-HMPFGIWM.js';
+import { useLayerContainer, viewportBounds, LAYER_GAP, anchorGone, placePopup, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
 import { usePopupLayer } from './chunk-R25RGPUB.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
@@ -99,14 +99,13 @@ function Menu({
       width: rect.width,
       height: rect.height
     };
-    const whole = { x: 0, y: 0, width: host.width, height: host.height };
     const bounds = {
       x: LAYER_GAP,
       y: LAYER_GAP,
       width: host.width - 2 * LAYER_GAP,
       height: host.height - 2 * LAYER_GAP
     };
-    if (outsideBounds(local, whole)) {
+    if (anchorGone(rect, host, inHost)) {
       close(true);
       return;
     }

package/dist/{chunk-ODT5H4MN.js → chunk-3LYWD3BO.js}

@@ -1,9 +1,9 @@
 import { presenceHueClass } from './chunk-I6POAB4V.js';
 import { presenceLabels, presenceOrder } from './chunk-Z7JYG5TF.js';
-import { AVATAR_SIZES, Avatar } from './chunk-5OM447RW.js';
+import { AVATAR_SIZES, Avatar } from './chunk-PZKHBB7D.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './PresenceStack-QSXQJND5.css';
+import './PresenceStack-FJJQVH74.css';
 import { isCrewletCharacter } from '@crewlethq/icons/characters';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-FAQGGX2Z.js → chunk-3TFDQLW3.js}

@@ -1,6 +1,6 @@
 import { useHeadingLevel, headingTag, HeadingLevelProvider, nextHeadingLevel } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Section-QR3ILQVK.css';
+import './Section-O5AHGSOG.css';
 import { useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-VYDFB6PJ.js → chunk-3U7S6ZUN.js}

@@ -1,25 +1,26 @@
-import { Skeleton } from './chunk-W5J7R5EB.js';
+import { Skeleton } from './chunk-TEUQWOWZ.js';
 import { frameThemeMessage, readFrameHello, frameOriginMatches, negotiateBridge, FRAME_MESSAGE, portTargetOrigin, checkFrameSandbox, httpOrigin, isFrameNonce, frameFragment, readOpenLink, externalUrl, isFocusExit } from './chunk-F6V2PTN6.js';
-import { Callout } from './chunk-SVSCLHHI.js';
+import { Callout } from './chunk-SZZRIHGT.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SandboxedFrame-L6HBQZCD.css';
+import './SandboxedFrame-P5NASXB7.css';
 import { useState, useMemo, useRef, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var LABELS = {
   loading: (title) => `Loading ${title}`,
-  failed: "This page failed to load.",
+  failed: "This page failed to load",
   failedDetail: "It did not finish starting. Reload it, and if it fails again, ask its owner to republish it.",
-  navigated: "This page left its frame, so it was closed.",
+  navigated: "This page left its frame, so it was closed",
   navigatedDetail: "An artifact may only show its own pages. Reload it to open it again.",
-  refused: "This page cannot be shown safely.",
+  refused: "This page cannot be shown safely",
   refusedDetail: "It arrived with a frame policy this dashboard does not accept.",
-  outdated: "This page needs a newer dashboard.",
+  outdated: "This page needs a newer dashboard",
   outdatedDetail: "Reload the dashboard to update it, then open the page again.",
   reload: "Reload"
 };
 var FRAME_HELLO_TIMEOUT_MS = 1e4;
+var FRAME_LOAD_GRACE_MS = 1500;
 function framePolicy(src, origin, mode, sandbox, nonce, theme) {
   const verdict = checkFrameSandbox(sandbox, mode);
   if (!verdict.ok) return { ok: false, refusal: { kind: "sandbox", tokens: verdict.refused } };
@@ -54,6 +55,7 @@ function FrameInstance(props) {
     onRefusal: _onRefusal,
     onReload,
     helloTimeoutMs = FRAME_HELLO_TIMEOUT_MS,
+    loadGraceMs = FRAME_LOAD_GRACE_MS,
     labels,
     className,
     ...rest
@@ -168,7 +170,7 @@ function FrameInstance(props) {
       }
       owed = true;
       clearTimeout(loadTimer);
-      loadTimer = setTimeout(() => end(greeted > 0 ? "navigated" : "failed"), helloTimeoutMs);
+      loadTimer = setTimeout(() => end(greeted > 0 ? "navigated" : "failed"), Math.min(helloTimeoutMs, loadGraceMs));
     };
     window.addEventListener("message", onWindowMessage);
     frame.addEventListener("load", onLoad);
@@ -183,7 +185,7 @@ function FrameInstance(props) {
       clearTimeout(loadTimer);
       closePort();
     };
-  }, [policy, mode, nonce, helloTimeoutMs]);
+  }, [policy, mode, nonce, helloTimeoutMs, loadGraceMs]);
   const { mode: themeMode, palette, density } = theme;
   useEffect(() => {
     portRef.current?.postMessage(frameThemeMessage({ mode: themeMode, palette, density }));
@@ -216,17 +218,15 @@ function FrameInstance(props) {
             ...credentialless
           }
         ) : null,
-        state === "loading" ? /* @__PURE__ */ jsx("div", { className: "crewlet-sandboxed-frame__loading", children: /* @__PURE__ */ jsx(Skeleton, { variant: "box", width: "100%", height: "100%", label: text.loading(title) }) }) : null,
-        ending ? /* @__PURE__ */ jsx("div", { className: "crewlet-sandboxed-frame__end", children: /* @__PURE__ */ jsx(
-          Callout,
+        state === "loading" ? /* @__PURE__ */ jsx(FrameLoading, { label: text.loading(title) }) : null,
+        ending ? /* @__PURE__ */ jsx(
+          FrameEnd,
           {
-            variant: "danger",
-            title: text[ending.title],
-            live: "polite",
+            heading: text[ending.title],
             action: onReload ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "small", onClick: onReload, children: text.reload }) : void 0,
             children: text[ending.detail]
           }
-        ) }) : null
+        ) : null
       ]
     }
   );
@@ -239,5 +239,38 @@ var END_TEXT = {
   refused: { title: "refused", detail: "refusedDetail" },
   outdated: { title: "outdated", detail: "outdatedDetail" }
 };
+function FrameLoading({ label }) {
+  return /* @__PURE__ */ jsx("div", { className: "crewlet-sandboxed-frame__loading", children: /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      variant: "box",
+      width: "100%",
+      height: "100%",
+      marginTop: 0,
+      borderRadius: "var(--radius-md)",
+      label
+    }
+  ) });
+}
+function FrameEnd({ heading, action, children }) {
+  return /* @__PURE__ */ jsx("div", { className: "crewlet-sandboxed-frame__end", children: /* @__PURE__ */ jsx(Callout, { variant: "danger", title: heading, live: "polite", action, children }) });
+}
+function SandboxedFramePlaceholder({ title, label, className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      role: "region",
+      "aria-label": title,
+      "aria-busy": true,
+      "data-state": "loading",
+      className: cx("crewlet-sandboxed-frame", className),
+      children: /* @__PURE__ */ jsx(FrameLoading, { label: label ?? LABELS.loading(title) })
+    }
+  );
+}
+function SandboxedFrameNotice({ title, heading, action, children, className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { ...rest, role: "region", "aria-label": title, "data-state": "failed", className: cx("crewlet-sandboxed-frame", className), children: /* @__PURE__ */ jsx(FrameEnd, { heading, action, children }) });
+}
 
-export { FRAME_HELLO_TIMEOUT_MS, SandboxedFrame };
+export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedFrameNotice, SandboxedFramePlaceholder };

package/dist/{chunk-A4E5YLXO.js → chunk-4B6LSFDS.js}

@@ -1,4 +1,4 @@
-import { MARKDOWN_CALLOUT_NAMES } from './chunk-SKOYC2CF.js';
+import { MARKDOWN_CALLOUT_NAMES } from './chunk-KK5OYNAF.js';
 
 // src/RichEditor/types.ts
 var RICH_EDITOR_LABELS = {

package/dist/{chunk-WTNUVQVI.js → chunk-4IJS5CPF.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-OTN35CI4.js';
+import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-22UEIXZE.js';
 import { focusables } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TreeCanvas-L2XYONWL.css';

package/dist/{chunk-UAN5NE7M.js → chunk-5AQBPHZD.js}

@@ -1,4 +1,4 @@
-import { AVATAR_SIZES, Avatar } from './chunk-5OM447RW.js';
+import { AVATAR_SIZES, Avatar } from './chunk-PZKHBB7D.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Avatar-3C2H2WA4.css';
 import './AvatarStack-GEJBNV7E.css';

package/dist/{chunk-QWOPX2MN.js → chunk-5FYPE5GL.js}

@@ -1,4 +1,4 @@
-import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup, LAYER_REPOSITION_EVENT } from './chunk-HMPFGIWM.js';
+import { useLayerContainer, viewportBounds, LAYER_GAP, anchorGone, placePopup, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
 import { usePopupLayer } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Tooltip-LKQF7CE4.css';
@@ -100,14 +100,13 @@ function Tooltip({
       width: rect.width,
       height: rect.height
     };
-    const whole = { x: 0, y: 0, width: host.width, height: host.height };
     const bounds = {
       x: LAYER_GAP,
       y: LAYER_GAP,
       width: host.width - 2 * LAYER_GAP,
       height: host.height - 2 * LAYER_GAP
     };
-    if (outsideBounds({ ...local, x: rect.x - (inHost ? host.x : 0) }, whole)) {
+    if (anchorGone(rect, host, inHost)) {
       setOpen(false);
       return;
     }

package/dist/{chunk-CJKMURZO.js → chunk-5SZGKSGL.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './Note-ONSKKTOA.css';
+import './Note-WI5MLZOO.css';
 import { forwardRef, useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/chunk-6VOS2GMB.js

@@ -0,0 +1,54 @@
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './SlideNav-BLFJF6AH.css';
+import { ChevronLeftGlyph, ChevronRightGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SLIDE_NAV_LABELS = {
+  nav: "Slide controls",
+  previous: "Previous slide",
+  next: "Next slide",
+  start: "This is the first slide",
+  end: "End of the deck",
+  position: (position, total) => `${position} of ${total}`
+};
+function SlideNav({
+  position,
+  total,
+  onPrevious,
+  onNext,
+  tone = "page",
+  children,
+  className,
+  labels
+}) {
+  const text = { ...SLIDE_NAV_LABELS, ...labels };
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-slide-nav", `crewlet-slide-nav--${tone}`, className), role: "group", "aria-label": text.nav, children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        label: text.previous,
+        icon: /* @__PURE__ */ jsx(ChevronLeftGlyph, {}),
+        variant: "ghost",
+        size: "sm",
+        onClick: onPrevious,
+        disabledReason: position <= 1 ? text.start : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "crewlet-slide-nav__position", children: text.position(position, total) }),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        label: text.next,
+        icon: /* @__PURE__ */ jsx(ChevronRightGlyph, {}),
+        variant: "ghost",
+        size: "sm",
+        onClick: onNext,
+        disabledReason: position >= total ? text.end : void 0
+      }
+    ),
+    children ? /* @__PURE__ */ jsx("span", { className: "crewlet-slide-nav__more", children }) : null
+  ] });
+}
+
+export { SLIDE_NAV_LABELS, SlideNav };

package/dist/{chunk-3ZAFJ4GK.js → chunk-7Q7WDXHG.js}

@@ -1,14 +1,14 @@
 import { PageHeader } from './chunk-HOXGBLEY.js';
-import { DateTimePicker } from './chunk-Y5NQ2LMS.js';
-import { DataTable } from './chunk-EBJREOKS.js';
+import { DateTimePicker } from './chunk-BY4N65PM.js';
+import { DataTable } from './chunk-UXXJDIYE.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
 import { Toolbar } from './chunk-PGRPNDWM.js';
-import { Popover } from './chunk-BWRGFKJP.js';
+import { Popover } from './chunk-K3IJQNB7.js';
 import { Input } from './chunk-6QFAK2WV.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { Count } from './chunk-BHHIIK3M.js';
-import { Menu } from './chunk-2HIOJ4YZ.js';
+import { Menu } from './chunk-3EB2AV3H.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-JI5AVQLA.js → chunk-7WHDPLVJ.js}

@@ -1,4 +1,4 @@
-import { Tooltip } from './chunk-QWOPX2MN.js';
+import { Tooltip } from './chunk-5FYPE5GL.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './FactList-G2H73NFR.css';

package/dist/{chunk-QH3AKP2N.js → chunk-AC22RZKC.js}

@@ -1,7 +1,7 @@
-import { useLayerContainer } from './chunk-HMPFGIWM.js';
+import { useLayerContainer } from './chunk-OMV5W53A.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Toaster-EOOOTSJT.css';
+import './Toaster-C6BQ7L6I.css';
 import { createContext, useMemo, useState, useRef, useEffect, useContext, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { XGlyph, CircleAlertGlyph, TriangleAlertGlyph, CircleCheckGlyph, InfoGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-ZITJKF6Z.js → chunk-AYB6AYNH.js}

@@ -1,5 +1,5 @@
 import { Combobox } from './chunk-QS4ZGTEU.js';
-import { PRINCIPAL_KINDS, PrincipalAvatar } from './chunk-4KP4RC3O.js';
+import { PRINCIPAL_KINDS, PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './PrincipalPicker-7NNZTGUP.css';
 import { useState, useId, useMemo } from 'react';

package/dist/{chunk-Y5NQ2LMS.js → chunk-BY4N65PM.js}

@@ -1,4 +1,4 @@
-import { Popover } from './chunk-BWRGFKJP.js';
+import { Popover } from './chunk-K3IJQNB7.js';
 import { today, CalendarGrid, shiftMonth, compareDays } from './chunk-GXQ3B46I.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';

package/dist/{chunk-YFW4MTK4.js → chunk-C7DKX453.js}

@@ -1,4 +1,4 @@
-import { MARKDOWN_CALLOUT_TONES, parseMarkdownSpans, markdownInline, markdownCodeText } from './chunk-SKOYC2CF.js';
+import { MARKDOWN_CALLOUT_TONES, parseMarkdownSpans, markdownInline, markdownCodeText } from './chunk-KK5OYNAF.js';
 import { Schema, Fragment } from 'prosemirror-model';
 
 function headingTag(level) {

package/dist/{chunk-RCQXUT5K.js → chunk-CCAXYHQS.js}

@@ -1,4 +1,4 @@
-import { tabId } from './chunk-HJEVSQN6.js';
+import { tabId } from './chunk-VL6CUNSX.js';
 import { useRoving, tabStop } from './chunk-RKKO7QHH.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-4KP4RC3O.js → chunk-CI3VPIJN.js}

@@ -1,4 +1,4 @@
-import { Avatar } from './chunk-5OM447RW.js';
+import { Avatar } from './chunk-PZKHBB7D.js';
 import { UsersGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-7T42VQQT.js → chunk-CPEPST4S.js}

@@ -1,6 +1,6 @@
 import { FormField } from './chunk-6QFAK2WV.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Checkbox-5UORUG3F.css';
+import './Checkbox-ALWG3WV2.css';
 import { forwardRef, useId, useRef, useCallback, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-AAOH2P6Y.js → chunk-DFK5EQTU.js}

@@ -1,8 +1,8 @@
-import { Skeleton } from './chunk-W5J7R5EB.js';
+import { Skeleton } from './chunk-TEUQWOWZ.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './WidgetFrame-LRZIL62O.css';
+import './WidgetFrame-BTFW3CRK.css';
 import { useId } from 'react';
 import { ClockGlyph, LockGlyph, CircleAlertGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -22,6 +22,7 @@ function WidgetFrame({
   onCite,
   actions,
   flush = false,
+  holdTitle = false,
   headingLevel = 3,
   now,
   labels,
@@ -36,7 +37,7 @@ function WidgetFrame({
   const citation = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(VisuallyHidden, { children: text.cite }),
     " ",
-    /* @__PURE__ */ jsx("span", { className: "crewlet-widget-frame__source", children: source.label }),
+    /* @__PURE__ */ jsx("span", { className: "crewlet-widget-frame__source", title: source.label, children: source.label }),
     source.status === "live" ? /* @__PURE__ */ jsxs(Fragment, { children: [
       " ",
       /* @__PURE__ */ jsx("span", { className: "crewlet-widget-frame__when", children: text.live })
@@ -64,6 +65,7 @@ function WidgetFrame({
         "crewlet-widget-frame",
         `crewlet-widget-frame--${source.status}`,
         flush && "crewlet-widget-frame--flush",
+        holdTitle && "crewlet-widget-frame--hold-title",
         className
       ),
       "aria-labelledby": titleId,

package/dist/{chunk-GOSQXEZU.js → chunk-DFZMYB5X.js}

@@ -1,10 +1,10 @@
-import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
+import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
-import { AvatarStack } from './chunk-UAN5NE7M.js';
 import { Card } from './chunk-ACA27MZH.js';
+import { AvatarStack } from './chunk-5AQBPHZD.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArtifactCard-EXVAEBV6.css';
+import './ArtifactCard-AS5Z4CVI.css';
 import { useId } from 'react';
 import { TableGlyph, LayoutDashboardGlyph, PaletteGlyph, PresentationGlyph, FileTextGlyph, FileCodeGlyph, PinGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -22,13 +22,17 @@ function ArtifactKindGlyph({ kind, size = "md" }) {
   const Drawn = KIND_GLYPHS[kind];
   return /* @__PURE__ */ jsx(Drawn, { size });
 }
+function ArtifactPreviewGlyph({ kind }) {
+  return /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__glyph", children: /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind, size: 32 }) });
+}
 var LABELS = {
-  kinds: { html: "Page", doc: "Doc", slides: "Slides", design: "Design", dashboard: "Dashboard", sheet: "Sheet" },
+  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: "Updated"
+  updated: "Updated",
+  by: (name) => `by ${name}`
 };
 function ArtifactCard({
   title,
@@ -52,6 +56,7 @@ function ArtifactCard({
   const titleId = useId();
   const factsId = useId();
   const present = presence && presence.length > 0 ? presence : null;
+  const changedBy = updatedBy && updatedBy !== owner?.name ? updatedBy : void 0;
   return /* @__PURE__ */ jsxs(
     Card,
     {
@@ -62,10 +67,10 @@ function ArtifactCard({
       "aria-labelledby": titleId,
       "aria-describedby": factsId,
       children: [
-        size === "card" ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__preview", "aria-hidden": true, children: preview ?? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__glyph", children: /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind, size: 32 }) }) }) : /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__glyph crewlet-artifact-card__glyph--compact", "aria-hidden": true, children: /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind, size: "lg" }) }),
+        size === "card" ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__preview", "aria-hidden": true, children: preview ?? /* @__PURE__ */ jsx(ArtifactPreviewGlyph, { kind }) }) : /* @__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", children: title }),
+            /* @__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: [
@@ -81,8 +86,9 @@ function ArtifactCard({
                 /* @__PURE__ */ jsx("span", { children: owner.name })
               ] }) : null,
               /* @__PURE__ */ jsxs("span", { children: [
-                updatedBy ? `${updatedBy} ` : `${text.updated} `,
-                /* @__PURE__ */ jsx(RelativeTime, { value: updatedAt, now })
+                `${text.updated} `,
+                /* @__PURE__ */ jsx(RelativeTime, { value: updatedAt, now }),
+                changedBy ? ` ${text.by(changedBy)}` : null
               ] })
             ] }),
             present || changes !== void 0 && changes > 0 ? /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__line", children: [
@@ -99,4 +105,4 @@ function ArtifactCard({
   );
 }
 
-export { ARTIFACT_KINDS, ArtifactCard, ArtifactKindGlyph };
+export { ARTIFACT_KINDS, ArtifactCard, ArtifactKindGlyph, ArtifactPreviewGlyph };

package/dist/{chunk-TGYDROIB.js → chunk-EBCHVFCS.js}

@@ -1,8 +1,8 @@
-import { HuePicker } from './chunk-LIXSV5YI.js';
-import { Popover } from './chunk-BWRGFKJP.js';
+import { HuePicker } from './chunk-GPHWCK7M.js';
+import { Popover } from './chunk-K3IJQNB7.js';
 import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
-import { CharacterPicker } from './chunk-HVIX5ECM.js';
-import { Avatar } from './chunk-5OM447RW.js';
+import { CharacterPicker } from './chunk-YEVG2X5R.js';
+import { Avatar } from './chunk-PZKHBB7D.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './AvatarPicker-PREY36MG.css';
 import { CREWLET_CHARACTER_GEOMETRY, CREWLET_CHARACTERS } from '@crewlethq/icons/characters';

package/dist/{chunk-YDBC4DNW.js → chunk-FWYHRU7M.js}

@@ -1,4 +1,4 @@
-import { avatarCorner, Avatar } from './chunk-5OM447RW.js';
+import { avatarCorner, Avatar } from './chunk-PZKHBB7D.js';
 import './ImageUpload-NVGMN7DP.css';
 import { useRef } from 'react';
 import { CameraGlyph, XGlyph } from '@crewlethq/icons/glyphs';