@crewlethq/ui 0.35.1 → 0.36.0

package/dist/{chunk-7DZDSSJS.js → chunk-RH2NCQBZ.js}

@@ -1,13 +1,14 @@
-import { Textarea } from './chunk-6QFAK2WV.js';
+import { Textarea } from './chunk-IUYUS2SO.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Composer-ABGJIAIR.css';
+import './Composer-PXITWNEK.css';
 import { forwardRef } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var COMPOSER_COUNTER_AT = 0.8;
 var Composer = forwardRef(function Composer2({ value, onChange, onSubmit, label, actions, maxLength, className, rows = 3, onKeyDown, ...rest }, ref) {
   const near = maxLength !== void 0 && value.length >= maxLength * COMPOSER_COUNTER_AT;
+  const hasActions = actions !== void 0 && actions !== null && actions !== false;
   const keyDown = (event) => {
     onKeyDown?.(event);
     if (event.defaultPrevented || !onSubmit) return;
@@ -32,7 +33,7 @@ var Composer = forwardRef(function Composer2({ value, onChange, onSubmit, label,
         ...rest
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "crewlet-composer__footer", children: [
+    onSubmit || near || hasActions ? /* @__PURE__ */ jsxs("div", { className: "crewlet-composer__footer", "data-hint-only": !near && !hasActions || void 0, children: [
       onSubmit ? /* @__PURE__ */ jsxs("span", { className: "crewlet-composer__hint", children: [
         /* @__PURE__ */ jsx(Kbd, { keys: ["Mod", "Enter"], subtle: true }),
         " to send"
@@ -40,7 +41,7 @@ var Composer = forwardRef(function Composer2({ value, onChange, onSubmit, label,
       near ? /* @__PURE__ */ jsx("span", { className: "crewlet-composer__counter", "aria-live": "polite", children: `${value.length.toLocaleString()} / ${maxLength.toLocaleString()}` }) : null,
       /* @__PURE__ */ jsx("span", { className: "crewlet-composer__spacer" }),
       actions
-    ] })
+    ] }) : null
   ] });
 });
 

package/dist/{chunk-3VD3G3IL.js → chunk-T5RQGI6O.js}

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

package/dist/{chunk-F2KY4RLI.js → chunk-TVRBQMIX.js}

@@ -1,12 +1,13 @@
-import { Select } from './chunk-BQ7AKL2N.js';
+import { Select } from './chunk-VKKUGZ3G.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-GXQ3B46I.js';
 import { Popover } from './chunk-K3IJQNB7.js';
-import { Input } from './chunk-6QFAK2WV.js';
+import { Input } from './chunk-IUYUS2SO.js';
+import { useFocusModality } from './chunk-YSGLEHND.js';
 import { isComposing } from './chunk-R25RGPUB.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './TimeWindowPicker-T763GLXH.css';
+import './TimeWindowPicker-DEFDV77Z.css';
 import { useMemo, useState, useRef, useId, useEffect } from 'react';
 import { ClockGlyph, ChevronDownGlyph, CheckGlyph, ChevronLeftGlyph, ChevronRightGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -322,6 +323,7 @@ function TimeWindowPicker({
   size = "md",
   labels: labelOverrides
 }) {
+  useFocusModality();
   const labels = useMemo(() => withLabels(labelOverrides), [labelOverrides]);
   const isSet = isTimeWindowSet(value);
   const described = describeTimeWindow(value, { presets, labels });

package/dist/{chunk-QEFHYUCY.js → chunk-UWGUKMBK.js}

@@ -1,5 +1,5 @@
 import { useReorder } from './chunk-XJ2QEBMM.js';
-import { Input } from './chunk-6QFAK2WV.js';
+import { Input } from './chunk-IUYUS2SO.js';
 import { Menu } from './chunk-BUVCV3WI.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-5YLON2PW.js → chunk-UYZZV4DZ.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './FilterChip-EZ4QMW4E.css';
+import './FilterChip-VL33P3JL.css';
 import { createContext, useContext, useRef, useId, useCallback, useLayoutEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-BQ7AKL2N.js → chunk-VKKUGZ3G.js}

@@ -1,7 +1,8 @@
 import { useListbox, useOptionKeys, useHighlightRest } from './chunk-F73MC7EZ.js';
+import { useFocusModality } from './chunk-YSGLEHND.js';
 import { useLayerContainer, viewportBounds, anchorGone, placePopup, LAYER_GAP, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Select-A54YS5EP.css';
+import './Select-W3CHTZXP.css';
 import { forwardRef, useId, useMemo, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { ChevronDownGlyph, CheckGlyph, SearchGlyph } from '@crewlethq/icons/glyphs';
@@ -36,6 +37,7 @@ var Select = forwardRef(function Select2({
   onHighlight,
   ...native
 }, ref) {
+  useFocusModality();
   const generatedId = useId();
   const rootId = id ?? generatedId;
   const classes = cx(className, width === "auto" && "crewlet-select--auto", appearance === "quiet" && "crewlet-select--quiet");

package/dist/{chunk-DEJHAOC5.js → chunk-WMXAX6VA.js}

@@ -1,7 +1,7 @@
 import { announce } from './chunk-RSAQOKH3.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArrangeFrame-3PLZAG22.css';
+import './ArrangeFrame-QXOQTFAH.css';
 import { forwardRef, useRef, useCallback, useState, useEffect } from 'react';
 import { TrashGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-6JVRY5DQ.js → chunk-WNAYQQ6Y.js}

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

package/dist/{chunk-VDPJGP4Q.js → chunk-WX2NIG4G.js}

@@ -1,5 +1,5 @@
 import { BrandLockup } from './chunk-7KBNFFM3.js';
-import { Card } from './chunk-ACA27MZH.js';
+import { Card } from './chunk-5QXRI35B.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './AuthLayout-ODHBUPHQ.css';
 import { useId } from 'react';

package/dist/{chunk-ZU3DUXD2.js → chunk-WZGYIVYH.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './ChoiceList-RBL7FNQL.css';
+import './ChoiceList-EA2W6MOS.css';
 import { useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/chunk-XGBLRDSU.js

@@ -0,0 +1,446 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './LivePreview-BROGKR4N.css';
+import { createContext, useMemo, useContext, useRef, useState, useCallback, useEffect, useLayoutEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/LivePreview/budget.ts
+var LIVE_PREVIEW_MAX = 6;
+var LIVE_PREVIEW_MAX_FRAMES = 12;
+var immediately = (run) => {
+  run();
+  return () => {
+  };
+};
+var perFrame = (run) => {
+  if (typeof requestAnimationFrame === "undefined") return immediately(run);
+  let timer;
+  const frame = requestAnimationFrame(() => {
+    timer = setTimeout(run, 0);
+  });
+  return () => {
+    cancelAnimationFrame(frame);
+    if (timer !== void 0) clearTimeout(timer);
+  };
+};
+function createLivePreviewBudget(max = LIVE_PREVIEW_MAX, schedule = immediately, maxFrames = LIVE_PREVIEW_MAX_FRAMES) {
+  const rendering = /* @__PURE__ */ new Set();
+  const frames = /* @__PURE__ */ new Set();
+  const parked = /* @__PURE__ */ new Set();
+  const queue = [];
+  let pending = null;
+  const pick = () => {
+    if (rendering.size >= max) return null;
+    for (const ask of queue) {
+      if (!ask.frame || frames.size < maxFrames) return { ask, victim: void 0 };
+      const victim = parked.values().next().value;
+      if (victim) return { ask, victim };
+    }
+    return null;
+  };
+  const drop = (ask) => {
+    rendering.delete(ask);
+    frames.delete(ask);
+    parked.delete(ask);
+  };
+  const next = () => {
+    if (pending || !pick()) return;
+    let ran = false;
+    const cancel = schedule(() => {
+      ran = true;
+      pending = null;
+      const chosen = pick();
+      if (chosen) {
+        if (chosen.victim) {
+          drop(chosen.victim);
+          chosen.victim.reclaim?.();
+        }
+        queue.splice(queue.indexOf(chosen.ask), 1);
+        rendering.add(chosen.ask);
+        if (chosen.ask.frame) frames.add(chosen.ask);
+        chosen.ask.grant();
+      }
+      next();
+    });
+    if (!ran) pending = cancel;
+  };
+  const withdraw = (ask) => {
+    const at = queue.indexOf(ask);
+    if (at >= 0) queue.splice(at, 1);
+    if (queue.length === 0 && pending) {
+      pending();
+      pending = null;
+    }
+  };
+  return {
+    max,
+    maxFrames,
+    request(grant, reclaim, frame = false) {
+      const ask = { grant, reclaim, frame };
+      queue.push(ask);
+      next();
+      let done = false;
+      const held = () => rendering.has(ask) || frames.has(ask);
+      const release = () => {
+        if (done) return;
+        done = true;
+        if (held()) {
+          drop(ask);
+          next();
+        } else withdraw(ask);
+      };
+      return {
+        release,
+        drawn() {
+          if (done || !rendering.has(ask)) return;
+          if (!ask.frame) {
+            release();
+            return;
+          }
+          rendering.delete(ask);
+          next();
+        },
+        park() {
+          if (done) return;
+          if (!held()) {
+            release();
+            return;
+          }
+          if (!ask.frame) return;
+          parked.add(ask);
+          next();
+        },
+        resume() {
+          if (done || !held()) return false;
+          parked.delete(ask);
+          return true;
+        }
+      };
+    },
+    live: () => rendering.size,
+    frames: () => frames.size,
+    parked: () => parked.size,
+    waiting: () => queue.length
+  };
+}
+
+// src/LivePreview/stills.ts
+var LIVE_PREVIEW_STILLS_KEPT = 200;
+function createLivePreviewStills(kept = LIVE_PREVIEW_STILLS_KEPT) {
+  const held = /* @__PURE__ */ new Map();
+  const sized = /* @__PURE__ */ new Map();
+  let watcher = null;
+  return {
+    get(key) {
+      const got = held.get(key);
+      if (got !== void 0) {
+        held.delete(key);
+        held.set(key, got);
+      }
+      return got;
+    },
+    put(key, value) {
+      held.delete(key);
+      held.set(key, value);
+      while (held.size > kept) held.delete(held.keys().next().value);
+    },
+    forget(key) {
+      held.delete(key);
+    },
+    watch(el, told) {
+      if (typeof ResizeObserver === "undefined") return () => {
+      };
+      watcher ??= new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const rect = entry.target.getBoundingClientRect();
+          sized.get(entry.target)?.({ w: rect.width, h: rect.height });
+        }
+      });
+      sized.set(el, told);
+      watcher.observe(el);
+      return () => {
+        sized.delete(el);
+        watcher?.unobserve(el);
+      };
+    }
+  };
+}
+var LOADS = "iframe, frame, video, audio, object, embed";
+function copyOf(nodes) {
+  return nodes.flatMap((node) => {
+    if (!(node instanceof Element)) return [node.cloneNode(true)];
+    if (node.matches(LOADS)) return [];
+    const copy = node.cloneNode(true);
+    const drawn = node.querySelectorAll("canvas");
+    copy.querySelectorAll("canvas").forEach((blank, i) => {
+      const image = pictureOf(drawn[i], blank);
+      if (image) blank.replaceWith(image);
+    });
+    for (const loads of copy.querySelectorAll(LOADS)) loads.remove();
+    if (node instanceof HTMLCanvasElement) return [pictureOf(node, copy) ?? copy];
+    return [copy];
+  });
+}
+function pictureOf(canvas, copy) {
+  let src;
+  try {
+    src = canvas.toDataURL();
+  } catch {
+    return null;
+  }
+  const image = canvas.ownerDocument.createElement("img");
+  image.src = src;
+  image.alt = "";
+  for (const { name, value } of copy.attributes) if (name !== "width" && name !== "height") image.setAttribute(name, value);
+  image.style.width = `${canvas.clientWidth}px`;
+  image.style.height = `${canvas.clientHeight}px`;
+  return image;
+}
+var LIVE_PREVIEW_DWELL_MS = 120;
+var LIVE_PREVIEW_MARGIN = "100% 0px";
+var LIVE_PREVIEW_RENDER_MS = 15e3;
+var DefaultShared = { budget: createLivePreviewBudget(LIVE_PREVIEW_MAX, perFrame), stills: createLivePreviewStills() };
+var SharedContext = createContext(DefaultShared);
+function LivePreviewBudgetProvider({
+  max = LIVE_PREVIEW_MAX,
+  maxFrames = LIVE_PREVIEW_MAX_FRAMES,
+  kept = LIVE_PREVIEW_STILLS_KEPT,
+  children
+}) {
+  const budget = useMemo(() => createLivePreviewBudget(max, perFrame, maxFrames), [max, maxFrames]);
+  const stills = useMemo(() => createLivePreviewStills(kept), [kept]);
+  const shared = useMemo(() => ({ budget, stills }), [budget, stills]);
+  return /* @__PURE__ */ jsx(SharedContext.Provider, { value: shared, children });
+}
+var NOOP = { ready: () => {
+}, fail: () => {
+} };
+var SignalContext = createContext(NOOP);
+function useLivePreview() {
+  return useContext(SignalContext);
+}
+function scrollRoot(el) {
+  for (let at = el.parentElement; at; at = at.parentElement) {
+    const style = getComputedStyle(at);
+    if (/(auto|scroll|overlay)/.test(`${style.overflowY} ${style.overflowX}`)) return at;
+  }
+  return null;
+}
+function afterDrawn(then) {
+  let off = false;
+  let frame = 0;
+  const paint = (left) => {
+    if (off) return;
+    if (left === 0 || typeof requestAnimationFrame === "undefined") then();
+    else frame = requestAnimationFrame(() => paint(left - 1));
+  };
+  const fonts = typeof document === "undefined" ? void 0 : document.fonts;
+  if (fonts) void fonts.ready.then(() => paint(2));
+  else paint(2);
+  return () => {
+    off = true;
+    if (frame && typeof cancelAnimationFrame !== "undefined") cancelAnimationFrame(frame);
+  };
+}
+function fitTo(size, width, height, fit) {
+  const k = fit === "contain" && height ? Math.min(size.w / width, size.h / height) : size.w / width;
+  const h = height ?? size.h / k;
+  const left = fit === "contain" ? (size.w - width * k) / 2 : 0;
+  const top = fit === "contain" ? (size.h - h * k) / 2 : 0;
+  return { width, height: h, transform: `translate(${left}px, ${top}px) scale(${k})` };
+}
+function stillOf(live, width, box) {
+  const rect = box.getBoundingClientRect();
+  const from = width === void 0 ? live : live.querySelector(":scope > .crewlet-preview-scale > .crewlet-preview-scale__layer") ?? live;
+  return { nodes: copyOf([...from.childNodes]), width, size: { w: rect.width, h: rect.height } };
+}
+function LivePreview(props) {
+  return /* @__PURE__ */ jsx(Preview, { ...props }, props.snapshot ?? "");
+}
+function Preview({ children, fallback, width, rootMargin = LIVE_PREVIEW_MARGIN, disabled = false, frame = false, snapshot, dwellMs = LIVE_PREVIEW_DWELL_MS, onStateChange, className }) {
+  const { budget, stills } = useContext(SharedContext);
+  const box = useRef(null);
+  const liveLayer = useRef(null);
+  const stillLayer = useRef(null);
+  const slot = useRef(null);
+  const granted = useRef(false);
+  const [kept] = useState(() => snapshot !== void 0 && !frame && !disabled ? stills.get(snapshot) : void 0);
+  const [state, setState] = useState(kept === "failed" ? "failed" : kept ? "ready" : "idle");
+  const current = useRef(state);
+  current.current = state;
+  const [still, setStill] = useState(kept && kept !== "failed" ? { drawing: kept, fresh: false } : null);
+  const [near, setNear] = useState(false);
+  const done = state === "failed" || state === "ready" && !frame;
+  const settle = useCallback((next) => {
+    slot.current?.release();
+    slot.current = null;
+    granted.current = false;
+    setState(next);
+  }, []);
+  useEffect(() => {
+    const el = box.current;
+    if (!el || disabled || done || typeof IntersectionObserver === "undefined") return void 0;
+    const seen = new IntersectionObserver((entries) => setNear(entries.some((e) => e.isIntersecting)), { root: scrollRoot(el), rootMargin });
+    seen.observe(el);
+    return () => seen.disconnect();
+  }, [disabled, done, rootMargin]);
+  const reclaim = useCallback(() => {
+    slot.current = null;
+    granted.current = false;
+    setState("idle");
+  }, []);
+  useEffect(() => {
+    if (disabled || done) return void 0;
+    const held = slot.current;
+    if (!near) {
+      if (held && granted.current) held.park();
+      else if (held) {
+        held.release();
+        slot.current = null;
+      }
+      setState((s) => s === "waiting" ? "idle" : s);
+      return void 0;
+    }
+    if (held) {
+      if (granted.current) held.resume();
+      return void 0;
+    }
+    setState("waiting");
+    const dwell = setTimeout(() => {
+      granted.current = false;
+      slot.current = budget.request(
+        () => {
+          granted.current = true;
+          setState("live");
+        },
+        reclaim,
+        frame
+      );
+    }, dwellMs);
+    return () => clearTimeout(dwell);
+  }, [near, disabled, done, frame, budget, dwellMs, reclaim]);
+  useEffect(() => {
+    if (!disabled) return;
+    slot.current?.release();
+    slot.current = null;
+    granted.current = false;
+    setStill(null);
+    setState((s) => s === "failed" ? s : "idle");
+  }, [disabled]);
+  useEffect(
+    () => () => {
+      slot.current?.release();
+      slot.current = null;
+    },
+    []
+  );
+  useEffect(() => {
+    if (state !== "live") return void 0;
+    const t = setTimeout(() => settle("failed"), LIVE_PREVIEW_RENDER_MS);
+    return () => clearTimeout(t);
+  }, [state, settle]);
+  const capture = useRef(null);
+  useEffect(() => () => capture.current?.(), []);
+  const signals = useMemo(
+    () => ({
+      ready: () => {
+        if (current.current !== "live" || capture.current) return;
+        slot.current?.drawn();
+        if (frame) {
+          setState("ready");
+          return;
+        }
+        capture.current = afterDrawn(() => {
+          capture.current = null;
+          const live = liveLayer.current;
+          const el = box.current;
+          if (current.current !== "live" || !live || !el) return;
+          const drawing = stillOf(live, width, el);
+          if (snapshot !== void 0) stills.put(snapshot, drawing);
+          setStill({ drawing, fresh: true });
+          settle("ready");
+        });
+      },
+      fail: () => {
+        if (current.current === "failed") return;
+        capture.current?.();
+        capture.current = null;
+        if (snapshot !== void 0 && !frame) stills.put(snapshot, "failed");
+        settle("failed");
+      }
+    }),
+    [frame, width, snapshot, stills, settle]
+  );
+  useLayoutEffect(() => {
+    const target = stillLayer.current;
+    const el = box.current;
+    if (!still || !target || !el) return void 0;
+    const { drawing } = still;
+    const placed = drawing.nodes.some((n) => n.isConnected) ? copyOf(drawing.nodes) : drawing.nodes;
+    if (drawing.width === void 0) {
+      target.replaceChildren(...placed);
+      return stills.watch(el, (size) => {
+        if (Math.abs(size.w - drawing.size.w) < 1 && Math.abs(size.h - drawing.size.h) < 1) return;
+        if (snapshot !== void 0) stills.forget(snapshot);
+        setStill(null);
+        setState("idle");
+      });
+    }
+    const outer = target.ownerDocument.createElement("span");
+    outer.className = "crewlet-preview-scale";
+    const layer = target.ownerDocument.createElement("span");
+    layer.className = "crewlet-preview-scale__layer";
+    layer.append(...placed);
+    outer.append(layer);
+    target.replaceChildren(outer);
+    const scale = (size) => {
+      if (size.w <= 0) return;
+      const fitted = fitTo(size, drawing.width, void 0, "width");
+      layer.style.width = `${fitted.width}px`;
+      layer.style.height = `${fitted.height}px`;
+      layer.style.transform = fitted.transform;
+    };
+    const rect = el.getBoundingClientRect();
+    scale({ w: rect.width, h: rect.height });
+    return stills.watch(el, scale);
+  }, [still, snapshot, stills]);
+  useEffect(() => onStateChange?.(state), [state, onStateChange]);
+  const mounted = state === "live" || frame && state === "ready";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: box,
+      className: cx("crewlet-live-preview", className),
+      "data-state": state,
+      "data-still": still ? "" : void 0,
+      "data-fresh": still?.fresh ? "" : void 0,
+      "data-frame": frame ? "" : void 0,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-live-preview__fallback", children: fallback }),
+        still ? /* @__PURE__ */ jsx("span", { ref: stillLayer, className: "crewlet-live-preview__still", inert: true }) : null,
+        mounted ? /* @__PURE__ */ jsx("span", { ref: liveLayer, className: "crewlet-live-preview__live", inert: true, children: /* @__PURE__ */ jsx(SignalContext.Provider, { value: signals, children: width === void 0 ? children : /* @__PURE__ */ jsx(PreviewScale, { width, children }) }) }) : null
+      ]
+    }
+  );
+}
+function PreviewScale({ children, width, height, fit = "width" }) {
+  const box = useRef(null);
+  const [size, setSize] = useState(null);
+  useLayoutEffect(() => {
+    const el = box.current;
+    if (!el) return void 0;
+    const measure = () => {
+      const rect = el.getBoundingClientRect();
+      if (rect.width > 0) setSize((was) => was && was.w === rect.width && was.h === rect.height ? was : { w: rect.width, h: rect.height });
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const watch = new ResizeObserver(measure);
+    watch.observe(el);
+    return () => watch.disconnect();
+  }, []);
+  const layer = size ? fitTo(size, width, height, fit) : { width, visibility: "hidden" };
+  return /* @__PURE__ */ jsx("span", { ref: box, className: "crewlet-preview-scale", children: /* @__PURE__ */ jsx("span", { className: "crewlet-preview-scale__layer", style: layer, children }) });
+}
+
+export { LIVE_PREVIEW_DWELL_MS, LIVE_PREVIEW_MARGIN, LIVE_PREVIEW_MAX, LIVE_PREVIEW_MAX_FRAMES, LIVE_PREVIEW_RENDER_MS, LIVE_PREVIEW_STILLS_KEPT, LivePreview, LivePreviewBudgetProvider, PreviewScale, createLivePreviewBudget, createLivePreviewStills, immediately, perFrame, useLivePreview };

package/dist/{chunk-22CQQDFW.js → chunk-XMRTFPWX.js}

@@ -1,6 +1,6 @@
-import { useClipboard } from './chunk-STJ7QBC3.js';
 import { Modal } from './chunk-XEGZHHRH.js';
-import { Checkbox } from './chunk-CPEPST4S.js';
+import { useClipboard } from './chunk-STJ7QBC3.js';
+import { Checkbox } from './chunk-PJIPUEJ3.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
 import { Menu } from './chunk-BUVCV3WI.js';

package/dist/{chunk-HUVG2FFT.js → chunk-Y5BD4MTE.js}

@@ -1,7 +1,7 @@
 import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArtifactPanel-HW3SU7CP.css';
+import './ArtifactPanel-KKUUIPEU.css';
 import { useId, useRef, useLayoutEffect, useEffect } from 'react';
 import { MinimizeGlyph, MaximizeGlyph, XGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -19,6 +19,7 @@ function ArtifactPanel({
   expanded = false,
   onExpandedChange,
   actions,
+  footer,
   focusOnOpen = true,
   labels,
   className,
@@ -82,7 +83,8 @@ function ArtifactPanel({
             /* @__PURE__ */ jsx(IconButton, { label: words.close(title), icon: /* @__PURE__ */ jsx(XGlyph, { size: "sm" }), size: "sm", variant: "ghost", onClick: onClose })
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "crewlet-artifact-panel__body", children: /* @__PURE__ */ jsx(HeadingLevelProvider, { level: 3, children }) })
+        /* @__PURE__ */ jsx("div", { className: "crewlet-artifact-panel__body", children: /* @__PURE__ */ jsx(HeadingLevelProvider, { level: 3, children }) }),
+        footer ? /* @__PURE__ */ jsx("div", { className: "crewlet-artifact-panel__foot", children: footer }) : null
       ]
     }
   );