@crewlethq/ui 0.35.1 → 0.37.0

package/dist/chunk-WYKWXRJ4.js

@@ -0,0 +1,456 @@
+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);
+  };
+}
+var PREVIEW_FILL_MAX_CUT = 0.2;
+function fitTo(size, width, height, fit) {
+  if (!height || fit === "width") {
+    const k = size.w / width;
+    return { width, height: height ?? size.h / k, transform: `translate(0px, 0px) scale(${k})` };
+  }
+  const contain = Math.min(size.w / width, size.h / height);
+  const cover = Math.max(size.w / width, size.h / height);
+  const cut = 1 - contain / cover;
+  if (fit === "fill" && cut <= PREVIEW_FILL_MAX_CUT) {
+    const left2 = (size.w - width * cover) / 2;
+    return { width, height, transform: `translate(${left2}px, 0px) scale(${cover})` };
+  }
+  const left = (size.w - width * contain) / 2;
+  const top = (size.h - height * contain) / 2;
+  return { width, height, transform: `translate(${left}px, ${top}px) scale(${contain})` };
+}
+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, PREVIEW_FILL_MAX_CUT, PreviewScale, createLivePreviewBudget, createLivePreviewStills, immediately, perFrame, useLivePreview };

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-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
       ]
     }
   );

package/dist/chunk-YSGLEHND.js

@@ -0,0 +1,56 @@
+import { useLayoutEffect } from 'react';
+
+// src/utils/focusModality.ts
+var FOCUS_MODALITY_ATTRIBUTE = "data-crewlet-focus";
+var MODIFIERS = /* @__PURE__ */ new Set(["Shift", "Control", "Alt", "Meta", "CapsLock", "Fn"]);
+var TEXT_INPUT_TYPES = /* @__PURE__ */ new Set(["", "text", "search", "email", "url", "tel", "password", "number", "date", "datetime-local", "month", "time", "week"]);
+function isTextEntry(target) {
+  if (!(target instanceof Element)) return false;
+  if (target instanceof HTMLTextAreaElement) return true;
+  if (target instanceof HTMLInputElement) return TEXT_INPUT_TYPES.has(target.type);
+  if (target instanceof HTMLElement && target.isContentEditable) return true;
+  return target.closest('[contenteditable]:not([contenteditable="false"])') !== null;
+}
+var trackers = /* @__PURE__ */ new WeakMap();
+function trackFocusModality(doc = document) {
+  let tracker = trackers.get(doc);
+  if (!tracker) {
+    const root = doc.documentElement;
+    const set = (modality) => {
+      if (root.getAttribute(FOCUS_MODALITY_ATTRIBUTE) !== modality) root.setAttribute(FOCUS_MODALITY_ATTRIBUTE, modality);
+    };
+    const onKey = (event) => {
+      if (MODIFIERS.has(event.key) || event.metaKey || event.ctrlKey) return;
+      if (event.key === "Tab" || !isTextEntry(event.target)) set("keyboard");
+    };
+    const onPointer = () => set("pointer");
+    if (!root.hasAttribute(FOCUS_MODALITY_ATTRIBUTE)) set("pointer");
+    doc.addEventListener("keydown", onKey, true);
+    doc.addEventListener("pointerdown", onPointer, true);
+    const created = {
+      count: 0,
+      release: () => {
+        doc.removeEventListener("keydown", onKey, true);
+        doc.removeEventListener("pointerdown", onPointer, true);
+        root.removeAttribute(FOCUS_MODALITY_ATTRIBUTE);
+        trackers.delete(doc);
+      }
+    };
+    trackers.set(doc, created);
+    tracker = created;
+  }
+  const held = tracker;
+  held.count += 1;
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    held.count -= 1;
+    if (held.count === 0) held.release();
+  };
+}
+function useFocusModality() {
+  useLayoutEffect(() => trackFocusModality(), []);
+}
+
+export { FOCUS_MODALITY_ATTRIBUTE, trackFocusModality, useFocusModality };

package/dist/generated/index.d.ts

@@ -1,6 +1,7 @@
 export * from '../AccessDeniedCard/index.js';
 export * from '../Accordion/index.js';
 export * from '../AddPill/index.js';
+export * from '../AgentHandoffPanel/index.js';
 export * from '../Announcer/index.js';
 export * from '../AppShell/index.js';
 export * from '../ArrangeBoard/index.js';
@@ -8,12 +9,15 @@ export * from '../ArrangeFrame/index.js';
 export * from '../ArrangeGrid/index.js';
 export * from '../ArrangeGroup/index.js';
 export * from '../ArrangeList/index.js';
+export * from '../ArtifactAccess/index.js';
 export * from '../ArtifactBar/index.js';
 export * from '../ArtifactCard/index.js';
 export * from '../ArtifactCover/index.js';
 export * from '../ArtifactIcon/index.js';
 export * from '../ArtifactKindGlyph/index.js';
 export * from '../ArtifactKindIllustration/index.js';
+export * from '../ArtifactMakeRow/index.js';
+export * from '../ArtifactNameCell/index.js';
 export * from '../ArtifactPanel/index.js';
 export * from '../AuthLayout/index.js';
 export * from '../Avatar/index.js';