@crewlethq/ui 0.31.1 → 0.33.0

package/dist/{chunk-OJ45PPCV.js → chunk-22UEIXZE.js}

@@ -1,13 +1,29 @@
-import { LayerNodeBridge } from './chunk-VYOKRN2I.js';
-import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-HMPFGIWM.js';
+import { LayerNodeBridge } from './chunk-LM3ISVJA.js';
+import { Kbd } from './chunk-SMBKXWML.js';
+import { Tooltip } from './chunk-5FYPE5GL.js';
+import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-OMV5W53A.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Canvas-YVXHMWLN.css';
+import './Canvas-VUG2HLZK.css';
 import { useId, useRef, useState, useCallback, useLayoutEffect, useImperativeHandle, useEffect } from 'react';
-import { ZoomOutGlyph, ZoomInGlyph, FullscreenGlyph } from '@crewlethq/icons/glyphs';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { CURSORS, ZoomOutGlyph, ZoomInGlyph, FullscreenGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function ShortcutTip({ label, keys, placement = "top", children }) {
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      placement,
+      content: /* @__PURE__ */ jsxs("span", { className: "crewlet-shortcut-tip", children: [
+        label,
+        /* @__PURE__ */ jsx(Kbd, { keys, subtle: true })
+      ] }),
+      children
+    }
+  );
+}
 
 // src/Canvas/geometry.ts
 var IDENTITY_VIEW = { x: 0, y: 0, k: 1 };
@@ -26,9 +42,9 @@ var CANVAS_REVEAL_PADDING = 24;
 var CANVAS_PAN_STEP = 64;
 var CANVAS_TAP_SLOP = { mouse: 4, pen: 4, touch: 10 };
 var CANVAS_ZOOM_LIMITS = { min: CANVAS_MIN_ZOOM, max: CANVAS_MAX_ZOOM };
-function zoomLimits(content, viewport, largestItem, padding = CANVAS_FIT_PADDING) {
+function zoomLimits(content, viewport, largestItem, padding = CANVAS_FIT_PADDING, floor = CANVAS_MIN_ZOOM) {
   const measured = content !== null && viewport.width > 0 && viewport.height > 0;
-  const min = measured ? fitView(content, viewport, padding).k : CANVAS_MIN_ZOOM;
+  const min = measured ? fitView(content, viewport, padding, floor).k : floor;
   const room = viewport.width - 2 * padding;
   const wanted = largestItem !== void 0 && largestItem > 0 && room > 0 ? room / largestItem : CANVAS_MAX_ZOOM;
   const max = Math.min(CANVAS_ZOOM_CEILING, Math.max(CANVAS_MAX_ZOOM, wanted));
@@ -73,13 +89,13 @@ function clampPan(view, content, viewport, margin = CANVAS_PAN_MARGIN) {
     k: view.k
   };
 }
-function fitView(content, viewport, padding = CANVAS_FIT_PADDING) {
+function fitView(content, viewport, padding = CANVAS_FIT_PADDING, floor = CANVAS_MIN_ZOOM) {
   if (viewport.width <= 0 || viewport.height <= 0) return IDENTITY_VIEW;
   const roomX = Math.max(0, viewport.width - 2 * padding);
   const roomY = Math.max(0, viewport.height - 2 * padding);
   const scaleX = content.width > 0 ? roomX / content.width : Infinity;
   const scaleY = content.height > 0 ? roomY / content.height : Infinity;
-  const k = Math.max(CANVAS_MIN_ZOOM, Math.min(CANVAS_FIT_MAX_ZOOM, scaleX, scaleY));
+  const k = Math.max(floor, Math.min(CANVAS_FIT_MAX_ZOOM, scaleX, scaleY));
   const drawnHeight = content.height * k;
   const x = (viewport.width - content.width * k) / 2 - content.x * k;
   const y = drawnHeight <= roomY ? (viewport.height - drawnHeight) / 2 - content.y * k : padding - content.y * k;
@@ -145,10 +161,11 @@ var LABELS = {
   zoomIn: "Zoom in",
   zoomOut: "Zoom out",
   fit: "Fit to view",
+  actualSize: "Zoom to 100%",
   zoom: (percent) => `Zoom is ${percent} percent. Set a zoom level`,
   zoomLevel: "Zoom level, percent",
   done: "Done",
-  keys: "Plus and minus zoom this canvas and zero fits everything in view. With the canvas itself focused, the arrow keys pan it."
+  keys: "Plus and minus zoom this canvas, zero or Shift 1 fits everything in view, and Shift 0 shows it at actual size. With the canvas itself focused, the arrow keys pan it."
 };
 var INTERACTIVE = "button, a[href], input, select, textarea, [contenteditable='true'], label";
 var TYPING = "input, textarea, select, [contenteditable='true']";
@@ -160,11 +177,15 @@ function Canvas({
   controls = true,
   controlsPlacement = "bottom-right",
   controlsExtra,
+  controlsActualSize = false,
   controlsBelow,
   hint,
   largestItemWidth,
   dimmed = false,
   ground = "plain",
+  minZoom = CANVAS_MIN_ZOOM,
+  cursor = "hand",
+  refitOnResize = false,
   touch = true,
   labels,
   onReady,
@@ -190,10 +211,17 @@ function Canvas({
   contentNow.current = content;
   touchNow.current = touchActive;
   sizeNow.current = size;
-  const limits = zoomLimits(content, size, largestItemWidth);
+  const limits = zoomLimits(content, size, largestItemWidth, CANVAS_FIT_PADDING, minZoom);
   const limitsNow = useRef(limits);
   limitsNow.current = limits;
+  const floorNow = useRef(minZoom);
+  floorNow.current = minZoom;
+  const fitOf = useCallback(
+    (bounds, viewportSize = sizeNow.current) => fitView(bounds, viewportSize, CANVAS_FIT_PADDING, floorNow.current),
+    []
+  );
   const left = useRef(null);
+  const fitted = useRef(null);
   const apply = useCallback((next, eased) => {
     const bounds = contentNow.current;
     const clamped = bounds ? clampPan(next, bounds, sizeNow.current) : next;
@@ -203,6 +231,13 @@ function Canvas({
     viewNow.current = clamped;
     setView(clamped);
   }, []);
+  const fitNow = useCallback(
+    (bounds) => {
+      apply(fitOf(bounds), "near");
+      fitted.current = viewNow.current;
+    },
+    [apply, fitOf]
+  );
   useLayoutEffect(() => {
     const el = viewport.current;
     if (!el || typeof ResizeObserver === "undefined") return;
@@ -217,15 +252,29 @@ function Canvas({
   announceReady.current = onReady;
   useLayoutEffect(() => {
     if (ready || !content || size.width <= 0 || size.height <= 0) return;
-    const first = fitView(content, size);
+    const first = fitOf(content, size);
     viewNow.current = first;
+    fitted.current = first;
     setView(first);
     setReady(true);
     announceReady.current?.();
-  }, [ready, content, size]);
+  }, [ready, content, size, fitOf]);
+  const sizeSeen = useRef(size);
   useLayoutEffect(() => {
-    if (ready) apply(viewNow.current);
-  }, [ready, size, content, apply]);
+    if (!ready) return;
+    const resized = sizeSeen.current.width !== size.width || sizeSeen.current.height !== size.height;
+    sizeSeen.current = size;
+    const was = fitted.current;
+    const now = viewNow.current;
+    const untouched = was !== null && was.x === now.x && was.y === now.y && was.k === now.k;
+    if (refitOnResize && resized && untouched && content) {
+      apply(fitOf(content), false);
+      fitted.current = viewNow.current;
+    } else {
+      apply(now);
+      if (untouched) fitted.current = viewNow.current;
+    }
+  }, [ready, size, content, apply, fitOf, refitOnResize]);
   const reportView = useRef(onViewChange);
   reportView.current = onViewChange;
   useLayoutEffect(() => {
@@ -239,17 +288,26 @@ function Canvas({
     setAnimate(false);
     layer?.dispatchEvent(new CustomEvent(LAYER_REPOSITION_EVENT, { detail: viewNow.current }));
   };
+  const local = useCallback((event) => {
+    const rect = viewport.current?.getBoundingClientRect();
+    return { x: event.clientX - (rect?.left ?? 0), y: event.clientY - (rect?.top ?? 0) };
+  }, []);
   useImperativeHandle(
     ref,
     () => ({
       fit: () => {
         const bounds = contentNow.current;
-        if (bounds) apply(fitView(bounds, sizeNow.current), "near");
+        if (bounds) fitNow(bounds);
       },
       zoomBy: (factor) => {
         const { width, height } = sizeNow.current;
         apply(zoomAt(viewNow.current, factor, { x: width / 2, y: height / 2 }, limitsNow.current), "near");
       },
+      zoomTo: (scale) => {
+        const { width, height } = sizeNow.current;
+        const factor = scale / viewNow.current.k;
+        apply(zoomAt(viewNow.current, factor, { x: width / 2, y: height / 2 }, limitsNow.current), "near");
+      },
       reveal: (target) => {
         const next = revealView(viewNow.current, target, sizeNow.current);
         if (next.x !== viewNow.current.x || next.y !== viewNow.current.y) apply(next, "near");
@@ -268,9 +326,10 @@ function Canvas({
         left.current = null;
         apply(was, "travel");
       },
-      screenRect: (target) => screenRect(viewNow.current, target)
+      screenRect: (target) => screenRect(viewNow.current, target),
+      worldAt: (client) => toWorld(viewNow.current, local({ clientX: client.x, clientY: client.y }))
     }),
-    [apply]
+    [apply, fitNow, local]
   );
   useEffect(() => {
     const el = viewport.current;
@@ -294,10 +353,6 @@ function Canvas({
   }, [apply]);
   const pointers = useRef(/* @__PURE__ */ new Map());
   const gesture = useRef(null);
-  const local = useCallback((event) => {
-    const rect = viewport.current?.getBoundingClientRect();
-    return { x: event.clientX - (rect?.left ?? 0), y: event.clientY - (rect?.top ?? 0) };
-  }, []);
   const endGesture = useCallback(() => {
     gesture.current = null;
     setPanning(false);
@@ -411,12 +466,17 @@ function Canvas({
     const { width, height } = sizeNow.current;
     const centre = { x: width / 2, y: height / 2 };
     let handled = true;
-    if (event.key === "+" || mod && event.key === "=") {
+    const shiftDigit = event.shiftKey && !mod && !event.altKey ? event.code : "";
+    if (shiftDigit === "Digit0") {
+      centreZoom(1 / viewNow.current.k);
+    } else if (shiftDigit === "Digit1") {
+      if (content) fitNow(content);
+    } else if (event.key === "+" || mod && event.key === "=") {
       apply(zoomAt(viewNow.current, CANVAS_ZOOM_STEP, centre, limitsNow.current), "near");
     } else if (event.key === "-") {
       apply(zoomAt(viewNow.current, 1 / CANVAS_ZOOM_STEP, centre, limitsNow.current), "near");
     } else if (event.key === "0") {
-      if (content) apply(fitView(content, sizeNow.current), "near");
+      if (content) fitNow(content);
     } else if (!onViewport) {
       handled = false;
     } else if (!mod && !event.altKey && event.key.startsWith("Arrow")) {
@@ -455,6 +515,8 @@ function Canvas({
     {
       className: cx("crewlet-canvas", className),
       ref: root,
+      style: ground === "grid" ? { ...CURSOR_PROPERTIES, ...gridProperties(view) } : CURSOR_PROPERTIES,
+      "data-cursor": cursor,
       "data-dimmed": dimmed,
       "data-ground": ground,
       "data-ready": ready,
@@ -501,16 +563,17 @@ function Canvas({
           (controls || touchActive) && /* @__PURE__ */ jsxs("div", { className: "crewlet-canvas__bar", children: [
             touchActive && /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: () => setTouchActive(false), children: text.done }),
             controls && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(ShortcutTip, { label: text.zoomOut, keys: ["-"], children: /* @__PURE__ */ jsx(
                 IconButton,
                 {
                   size: "sm",
                   label: text.zoomOut,
+                  title: "",
                   icon: /* @__PURE__ */ jsx(ZoomOutGlyph, {}),
                   onClick: () => centreZoom(1 / CANVAS_ZOOM_STEP),
                   disabled: !ready
                 }
-              ),
+              ) }),
               /* @__PURE__ */ jsx(
                 ZoomReadout,
                 {
@@ -521,26 +584,39 @@ function Canvas({
                   disabled: !ready
                 }
               ),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(ShortcutTip, { label: text.zoomIn, keys: ["+"], children: /* @__PURE__ */ jsx(
                 IconButton,
                 {
                   size: "sm",
                   label: text.zoomIn,
+                  title: "",
                   icon: /* @__PURE__ */ jsx(ZoomInGlyph, {}),
                   onClick: () => centreZoom(CANVAS_ZOOM_STEP),
                   disabled: !ready
                 }
-              ),
-              /* @__PURE__ */ jsx(
+              ) }),
+              controlsActualSize && /* @__PURE__ */ jsx(ShortcutTip, { label: text.actualSize, keys: ["Shift", "0"], children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "crewlet-canvas__zoom crewlet-canvas__actual",
+                  "aria-label": text.actualSize,
+                  onClick: () => centreZoom(1 / viewNow.current.k),
+                  disabled: !ready,
+                  children: "1:1"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(ShortcutTip, { label: text.fit, keys: ["Shift", "1"], children: /* @__PURE__ */ jsx(
                 IconButton,
                 {
                   size: "sm",
                   label: text.fit,
+                  title: "",
                   icon: /* @__PURE__ */ jsx(FullscreenGlyph, {}),
-                  onClick: () => content && apply(fitView(content, sizeNow.current), "near"),
+                  onClick: () => content && fitNow(content),
                   disabled: !ready
                 }
-              ),
+              ) }),
               controlsExtra
             ] })
           ] }),
@@ -552,6 +628,25 @@ function Canvas({
     }
   );
 }
+function gridOf(view) {
+  const k = view.k > 0 && Number.isFinite(view.k) ? view.k : 1;
+  return { scale: k * 2 ** -Math.floor(Math.log2(k)), x: view.x, y: view.y };
+}
+var CURSOR_PROPERTIES = {
+  "--crewlet-canvas-cursor-pointer": CURSORS.pointer,
+  "--crewlet-canvas-cursor-hand": CURSORS.hand,
+  "--crewlet-canvas-cursor-grabbing": CURSORS.grabbing,
+  "--crewlet-canvas-cursor-crosshair": CURSORS.crosshair,
+  "--crewlet-canvas-cursor-text": CURSORS.text
+};
+function gridProperties(view) {
+  const grid = gridOf(view);
+  return {
+    "--crewlet-canvas-grid-scale": String(grid.scale),
+    "--crewlet-canvas-grid-x": `${grid.x}px`,
+    "--crewlet-canvas-grid-y": `${grid.y}px`
+  };
+}
 function ZoomReadout({
   zoom,
   onZoom,
@@ -633,4 +728,4 @@ function swallowNextClick(within) {
   setTimeout(() => window.removeEventListener("click", swallow, { capture: true }), 0);
 }
 
-export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits };
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits };

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-S6VG5ZFZ.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-OJ45PPCV.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-RODMM35O.js → chunk-7Q7WDXHG.js}

@@ -1,14 +1,14 @@
 import { PageHeader } from './chunk-HOXGBLEY.js';
-import { Toolbar } from './chunk-PGRPNDWM.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 { Popover } from './chunk-BWRGFKJP.js';
+import { Toolbar } from './chunk-PGRPNDWM.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';