@arbidocs/blocks 0.5.123 → 0.5.124

package/dist/chunk-JY7UUZQG.cjs

@@ -0,0 +1,1513 @@
+"use client";
+'use strict';
+
+var chunkWOOOMTTA_cjs = require('./chunk-WOOOMTTA.cjs');
+var chunk5GCCUXMT_cjs = require('./chunk-5GCCUXMT.cjs');
+var chunkADPRIBSH_cjs = require('./chunk-ADPRIBSH.cjs');
+var chunkORNLCBNE_cjs = require('./chunk-ORNLCBNE.cjs');
+var react = require('react');
+var viewers = require('@arbidocs/react/viewers');
+var ui = require('@arbidocs/react/ui');
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+
+function cropStyle(rect) {
+  return {
+    position: "absolute",
+    width: `${100 / rect.w}%`,
+    height: `${100 / rect.h}%`,
+    left: `${-rect.x / rect.w * 100}%`,
+    top: `${-rect.y / rect.h * 100}%`,
+    maxWidth: "none"
+  };
+}
+function MediaClip({
+  clip,
+  className,
+  live
+}) {
+  const url = chunkWOOOMTTA_cjs.useObjectUrl(clip.source);
+  const videoRef = react.useRef(null);
+  react.useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    const toStart = () => {
+      video.currentTime = clip.start ?? 0;
+    };
+    if (video.readyState >= 1) toStart();
+    else video.addEventListener("loadedmetadata", toStart, { once: true });
+    return () => video.removeEventListener("loadedmetadata", toStart);
+  }, [clip.start, url]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: ui.cn("relative h-full w-full overflow-hidden bg-black", className),
+      "data-testid": `clip-image-${clip.id}`,
+      children: clip.kind === "video" ? /* @__PURE__ */ jsxRuntime.jsx(
+        "video",
+        {
+          ref: videoRef,
+          src: url,
+          muted: !live,
+          playsInline: true,
+          preload: "auto",
+          className: "pointer-events-none block select-none",
+          style: cropStyle(clip.rect),
+          ...live ? { [chunkADPRIBSH_cjs.STAGE_VIDEO_ATTRIBUTE]: "" } : {}
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: url,
+          alt: clip.caption,
+          draggable: false,
+          className: "pointer-events-none block select-none",
+          style: cropStyle(clip.rect)
+        }
+      )
+    }
+  );
+}
+var WIDTH_STEP = 160;
+var SETTLE_MS = 150;
+var ClipImage = react.memo(function ClipImage2({
+  clip,
+  className,
+  live = false
+}) {
+  return clip.kind === "pdf" ? /* @__PURE__ */ jsxRuntime.jsx(PdfClip, { clip, className }) : /* @__PURE__ */ jsxRuntime.jsx(MediaClip, { clip, className, live });
+});
+var sameRect = (a, b) => a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;
+function PdfClip({ clip, className }) {
+  const canvasRef = react.useRef(null);
+  const [size, setSize] = react.useState({ width: 0, height: 0 });
+  const [rendered, setRendered] = react.useState(null);
+  const [failed, setFailed] = react.useState(false);
+  react.useEffect(() => {
+    const canvas = canvasRef.current;
+    const view = canvas?.ownerDocument.defaultView;
+    if (!canvas || !view) return;
+    const measure = () => {
+      const box = canvas.getBoundingClientRect();
+      const dpr = view.devicePixelRatio || 1;
+      const width = Math.max(1, Math.round(box.width * dpr));
+      const height = Math.max(1, Math.round(box.height * dpr));
+      setSize((s) => s.width === width && s.height === height ? s : { width, height });
+    };
+    measure();
+    const Observer = view.ResizeObserver ?? ResizeObserver;
+    const observer = new Observer(measure);
+    observer.observe(canvas);
+    return () => observer.disconnect();
+  }, []);
+  react.useLayoutEffect(() => {
+    const canvas = canvasRef.current;
+    const context = canvas?.getContext("2d");
+    if (!canvas || !context || !size.width) return;
+    if (canvas.width !== size.width) canvas.width = size.width;
+    if (canvas.height !== size.height) canvas.height = size.height;
+    context.fillStyle = "#fff";
+    context.fillRect(0, 0, size.width, size.height);
+    if (!rendered) return;
+    const { rect } = clip;
+    const sx = size.width / rect.w;
+    const sy = size.height / rect.h;
+    try {
+      context.drawImage(
+        rendered.image,
+        (rendered.rect.x - rect.x) * sx,
+        (rendered.rect.y - rect.y) * sy,
+        rendered.rect.w * sx,
+        rendered.rect.h * sy
+      );
+    } catch {
+      setRendered(null);
+    }
+  }, [size, rendered, clip]);
+  const wanted = Math.ceil(size.width / WIDTH_STEP) * WIDTH_STEP;
+  const stale = wanted > 0 && (!rendered || !sameRect(rendered.rect, clip.rect) || wanted > rendered.width || wanted < rendered.width / 2);
+  react.useEffect(() => {
+    if (!stale) return;
+    const controller = new AbortController();
+    const rect = clip.rect;
+    const timer = setTimeout(() => {
+      viewers.renderPdfRegion({
+        file: clip.source,
+        page: clip.page,
+        rect,
+        masks: clip.masks,
+        width: wanted,
+        signal: controller.signal
+      }).then((image) => {
+        if (controller.signal.aborted) return viewers.closePdfRegionImage(image);
+        setFailed(false);
+        setRendered({ image, rect, width: wanted });
+      }).catch(() => !controller.signal.aborted && setFailed(true));
+    }, SETTLE_MS);
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [stale, wanted, clip.source, clip.page, clip.rect, clip.masks]);
+  const previous = react.useRef(null);
+  react.useEffect(() => {
+    if (previous.current && previous.current !== rendered) {
+      viewers.closePdfRegionImage(previous.current.image);
+    }
+    previous.current = rendered;
+  }, [rendered]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: ui.cn("relative h-full w-full overflow-hidden bg-white", className),
+      "data-testid": `clip-image-${clip.id}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            className: "pointer-events-none block h-full w-full",
+            role: "img",
+            "aria-label": clip.caption,
+            "aria-busy": !rendered
+          }
+        ),
+        failed && !rendered && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center p-2 text-center text-xs text-neutral-500", children: "Couldn't draw this clip" })
+      ]
+    }
+  );
+}
+var PAN_STEP = 0.1;
+var MAX_ZOOM = 800;
+var HOLD_DELAY = 350;
+var HOLD_EVERY = 90;
+var BUTTON = "flex size-7 items-center justify-center rounded-full border border-border bg-background text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-30 pointer-coarse:size-11";
+function HoldButton({
+  label,
+  disabled,
+  onStep,
+  className,
+  children
+}) {
+  const timer = react.useRef(null);
+  const stop = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+  };
+  react.useEffect(() => stop, []);
+  react.useEffect(() => {
+    if (disabled) stop();
+  }, [disabled]);
+  const start = (event) => {
+    event.stopPropagation();
+    if (disabled || event.button !== 0) return;
+    onStep();
+    const repeat = () => {
+      onStep();
+      timer.current = setTimeout(repeat, HOLD_EVERY);
+    };
+    timer.current = setTimeout(repeat, HOLD_DELAY);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: ui.cn(BUTTON, className),
+      title: label,
+      "aria-label": label,
+      disabled,
+      onPointerDown: start,
+      onPointerUp: stop,
+      onPointerLeave: stop,
+      onPointerCancel: stop,
+      onClick: (event) => event.detail === 0 && onStep(),
+      children
+    }
+  );
+}
+function ClipViewControls({ clip }) {
+  const { panClip, setClipZoom } = chunkORNLCBNE_cjs.usePresentation.getState();
+  const { rect } = clip;
+  const zoomBase = clip.zoomBase ?? rect.w;
+  const minZoom = Math.min(100, Math.floor(zoomBase / Math.min(1, rect.w / rect.h) * 100));
+  const pan = (dx, dy) => () => panClip(clip.id, dx * rect.w, dy * rect.h);
+  const zoom = Math.round(zoomBase / rect.w * 100);
+  const edge = 1e-6;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex flex-col items-center gap-2 p-1",
+      onPointerDown: (event) => event.stopPropagation(),
+      "data-testid": "clip-view-controls",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 grid-rows-3 place-items-center gap-0.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            HoldButton,
+            {
+              label: "Show more above",
+              disabled: rect.y <= edge,
+              onStep: pan(0, -PAN_STEP),
+              className: "col-start-2 row-start-1",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            HoldButton,
+            {
+              label: "Show more on the left",
+              disabled: rect.x <= edge,
+              onStep: pan(-PAN_STEP, 0),
+              className: "col-start-1 row-start-2",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            HoldButton,
+            {
+              label: "Show more on the right",
+              disabled: rect.x + rect.w >= 1 - edge,
+              onStep: pan(PAN_STEP, 0),
+              className: "col-start-3 row-start-2",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            HoldButton,
+            {
+              label: "Show more below",
+              disabled: rect.y + rect.h >= 1 - edge,
+              onStep: pan(0, PAN_STEP),
+              className: "col-start-2 row-start-3",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "clip-zoom-control", children: /* @__PURE__ */ jsxRuntime.jsx(
+          chunk5GCCUXMT_cjs.ZoomSlider,
+          {
+            value: zoom,
+            min: minZoom,
+            max: Math.max(MAX_ZOOM, zoom),
+            zoomOutStep: 25,
+            onChange: (value) => setClipZoom(clip.id, value),
+            label: "Zoom",
+            valueLabel: /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "clip-zoom", children: [
+              zoom,
+              "%"
+            ] }),
+            className: "pointer-coarse:h-11",
+            sliderClassName: "w-28"
+          }
+        ) })
+      ]
+    }
+  );
+}
+var ACTION = "inline-flex size-7 items-center justify-center rounded text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:size-11";
+var SIZES = [
+  { command: "fit", label: "Fit the slide", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "size-4" }) },
+  { command: "fullWidth", label: "Full width", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoveHorizontal, { className: "size-4" }) },
+  { command: "fullHeight", label: "Full height", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoveVertical, { className: "size-4" }) }
+];
+var ALIGNMENTS = [
+  { alignment: "left", label: "Left", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignStartVertical, { className: "size-4" }) },
+  { alignment: "centre", label: "Centre", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignCenterVertical, { className: "size-4" }) },
+  { alignment: "right", label: "Right", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignEndVertical, { className: "size-4" }) },
+  { alignment: "top", label: "Top", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignStartHorizontal, { className: "size-4" }) },
+  { alignment: "middle", label: "Middle", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignCenterHorizontal, { className: "size-4" }) },
+  { alignment: "bottom", label: "Bottom", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignEndHorizontal, { className: "size-4" }) }
+];
+function Action({
+  label,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: ACTION, title: label, "aria-label": label, onClick, children });
+}
+function ClipActionBar({
+  clipId,
+  at,
+  onRemoved,
+  onEditImage,
+  onCropImage
+}) {
+  const actions = chunkORNLCBNE_cjs.usePresentation.getState();
+  const clip = chunkORNLCBNE_cjs.usePresentation((state) => state.clips.find((entry) => entry.id === clipId));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": "Clip",
+      className: "absolute z-20 flex items-center gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-md",
+      style: { left: `${at.x * 100}%`, top: `calc(${at.y * 100}% - 40px)` },
+      onPointerDown: (event) => event.stopPropagation(),
+      "data-testid": "clip-action-bar",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Action, { label: "Fit the slide", onClick: () => actions.applyFrame(clipId, "fit"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "size-4" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: ACTION, title: "Align", "aria-label": "Align", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignCenterHorizontal, { className: "size-4" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuContent, { align: "start", children: ALIGNMENTS.map(({ alignment, label, icon }) => /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuItem, { onSelect: () => actions.align(clipId, alignment), children: [
+            icon,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: label })
+          ] }, alignment)) })
+        ] }),
+        clip && /* @__PURE__ */ jsxRuntime.jsxs(ui.Popover, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: ACTION,
+              title: "View: scroll or zoom what the clip shows (or scroll over it)",
+              "aria-label": "View",
+              "data-testid": "clip-view-button",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ZoomIn, { className: "size-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.PopoverContent, { align: "start", className: "w-auto p-2", children: /* @__PURE__ */ jsxRuntime.jsx(ClipViewControls, { clip }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: ACTION,
+              title: "More",
+              "aria-label": "More",
+              "data-testid": "clip-more-menu",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "size-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuContent, { align: "start", children: [
+            SIZES.filter(({ command }) => command !== "fit").map(({ command, label, icon }) => /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuItem, { onSelect: () => actions.applyFrame(clipId, command), children: [
+              icon,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: label })
+            ] }, command)),
+            onCropImage && /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuItem, { onSelect: onCropImage, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Crop, { className: "size-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Crop" })
+            ] }),
+            onEditImage && /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuItem, { onSelect: onEditImage, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "size-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Edit image" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuItem, { onSelect: () => actions.bringToFront(clipId), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BringToFront, { className: "size-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Bring to front" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuItem, { onSelect: () => actions.sendToBack(clipId), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SendToBack, { className: "size-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Send to back" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-0.5 h-5 w-px bg-border" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: ui.cn(ACTION, "text-destructive hover:bg-destructive/10"),
+            title: "Remove from slide (Delete)",
+            "aria-label": "Remove from slide",
+            onClick: () => {
+              actions.unplace(clipId);
+              onRemoved();
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+var boxStyle = (box) => ({
+  left: `${box.x * 100}%`,
+  top: `${box.y * 100}%`,
+  width: `${box.w * 100}%`,
+  height: `${box.h * 100}%`
+});
+var textStyle = (box, color) => ({
+  ...boxStyle(box),
+  fontSize: `${box.size * 100}cqw`,
+  fontWeight: box.weight,
+  lineHeight: box.leading,
+  color,
+  letterSpacing: box.tone === "title" ? "-0.01em" : void 0
+});
+var PLACEHOLDER_COLOR = "rgba(255,255,255,0.32)";
+function Text({
+  box,
+  lines,
+  accent,
+  placeholder,
+  onEdit,
+  testId
+}) {
+  const empty = lines.length === 0;
+  if (empty && !placeholder) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: ui.cn(
+        "absolute flex flex-col overflow-hidden",
+        onEdit ? "pointer-events-auto cursor-text rounded-[0.3cqw] hover:outline hover:outline-1 hover:outline-white/25" : "pointer-events-none",
+        box.align === "center" && "text-center",
+        box.bullets && "gap-[0.6cqw]",
+        box.anchor === "middle" && "justify-center",
+        box.anchor === "bottom" && "justify-end"
+      ),
+      style: textStyle(box, empty ? PLACEHOLDER_COLOR : chunkORNLCBNE_cjs.TEXT_COLORS[box.tone]),
+      onPointerDown: onEdit ? (event) => event.stopPropagation() : void 0,
+      onClick: onEdit,
+      "data-testid": testId,
+      children: (empty ? [placeholder] : lines).map(
+        (line, index) => box.bullets ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-[0.8em]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "inline-block size-[0.42em] shrink-0 -translate-y-[0.12em]",
+              style: { background: empty ? "currentColor" : accent }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: line })
+        ] }, index) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: line }, index)
+      )
+    }
+  );
+}
+function TextField({
+  box,
+  value,
+  placeholder,
+  multiline,
+  onChange,
+  onDone,
+  testId
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      autoFocus: true,
+      value,
+      placeholder,
+      onChange: (event) => onChange(multiline ? event.target.value : event.target.value.replace(/\n/g, " ")),
+      onBlur: onDone,
+      onPointerDown: (event) => event.stopPropagation(),
+      onKeyDown: (event) => {
+        if (event.key === "Escape" || !multiline && event.key === "Enter") {
+          event.preventDefault();
+          event.currentTarget.blur();
+        }
+      },
+      className: ui.cn(
+        "pointer-events-auto absolute resize-none overflow-hidden rounded-[0.3cqw] bg-white/5 p-0 outline outline-1 outline-white/40 placeholder:text-white/30 focus:outline-white/60",
+        box.align === "center" && "text-center"
+      ),
+      style: {
+        ...textStyle(box, chunkORNLCBNE_cjs.TEXT_COLORS[box.tone]),
+        fontFamily: "inherit",
+        // Bulleted lines keep their indent while typed.
+        paddingLeft: box.bullets ? "1.22em" : void 0
+      },
+      "aria-label": placeholder,
+      "data-testid": testId
+    }
+  );
+}
+function Logo({ image, box }) {
+  const url = chunkWOOOMTTA_cjs.useObjectUrl(image);
+  if (!url) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: url,
+      alt: "",
+      className: "pointer-events-none absolute object-contain opacity-90",
+      style: { ...boxStyle(box), objectPosition: box.x < 0.5 ? "left bottom" : "right bottom" },
+      "data-testid": "stage-logo"
+    }
+  );
+}
+var SlideDecor = react.memo(function SlideDecor2({
+  slide,
+  theme,
+  labels,
+  logoImage,
+  editable,
+  editing,
+  dim
+}) {
+  const [typing, setTyping] = react.useState(null);
+  const geometry = chunkORNLCBNE_cjs.slideGeometry(slide, { labels, logo: theme.logo?.corner ?? null });
+  const title = slide.caption.trim();
+  const titled = slide.layout === "title" || slide.layout === "section";
+  const info = chunkORNLCBNE_cjs.LAYOUT_INFO[slide.layout];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cn("pointer-events-none absolute inset-0", dim && "opacity-30"), children: [
+    !geometry.title ? null : editing && typing === "title" ? /* @__PURE__ */ jsxRuntime.jsx(
+      TextField,
+      {
+        box: geometry.title,
+        value: slide.caption,
+        placeholder: "Title",
+        multiline: false,
+        onChange: editing.onTitle,
+        onDone: () => setTyping(null),
+        testId: "stage-slide-caption-input"
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      Text,
+      {
+        box: geometry.title,
+        lines: title ? [title] : [],
+        accent: chunkORNLCBNE_cjs.accentColor(theme.accent),
+        placeholder: editable && (titled || editing) ? "Click to add a title" : void 0,
+        onEdit: editing ? () => setTyping("title") : void 0,
+        testId: "stage-slide-caption"
+      }
+    ),
+    geometry.rule && (title || editable && titled) && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute",
+        style: { ...boxStyle(geometry.rule), background: chunkORNLCBNE_cjs.accentColor(theme.accent) }
+      }
+    ),
+    geometry.text && (editing && typing === "text" ? /* @__PURE__ */ jsxRuntime.jsx(
+      TextField,
+      {
+        box: geometry.text,
+        value: slide.points,
+        placeholder: info.text ?? "",
+        multiline: true,
+        onChange: editing.onPoints,
+        onDone: () => setTyping(null),
+        testId: "stage-slide-points-input"
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      Text,
+      {
+        box: geometry.text,
+        lines: chunkORNLCBNE_cjs.textLines(slide.points),
+        accent: chunkORNLCBNE_cjs.accentColor(theme.accent),
+        placeholder: editable ? info.text : void 0,
+        onEdit: editing ? () => setTyping("text") : void 0,
+        testId: "stage-slide-points"
+      }
+    )),
+    geometry.logo && logoImage && /* @__PURE__ */ jsxRuntime.jsx(Logo, { image: logoImage, box: geometry.logo })
+  ] });
+});
+var isEdge = (kind) => kind === "n" || kind === "e" || kind === "s" || kind === "w";
+var EDGES = [
+  { edge: "n", left: "50%", top: "0%", cursor: "ns-resize", label: "top" },
+  { edge: "e", left: "100%", top: "50%", cursor: "ew-resize", label: "right" },
+  { edge: "s", left: "50%", top: "100%", cursor: "ns-resize", label: "bottom" },
+  { edge: "w", left: "0%", top: "50%", cursor: "ew-resize", label: "left" }
+];
+var CORNERS = [
+  { corner: "nw", left: "0%", top: "0%", cursor: "nwse-resize" },
+  { corner: "ne", left: "100%", top: "0%", cursor: "nesw-resize" },
+  { corner: "sw", left: "0%", top: "100%", cursor: "nesw-resize" },
+  { corner: "se", left: "100%", top: "100%", cursor: "nwse-resize" }
+];
+var EDGE_CSS = chunkORNLCBNE_cjs.clipEdgeCss();
+var StageItem = react.memo(function StageItem2({
+  clip,
+  frame,
+  editable,
+  selected,
+  dim,
+  label,
+  host
+}) {
+  const element = react.useRef(null);
+  const gesture = react.useRef(null);
+  const [reshape, setReshape] = react.useState(null);
+  const shown = reshape ? { ...clip, ...reshape.shape } : clip;
+  const box = reshape?.frame ?? frame;
+  const view = () => element.current?.ownerDocument.defaultView ?? window;
+  const apply = () => {
+    const g = gesture.current;
+    const el = element.current;
+    if (!g) return;
+    g.request = null;
+    const next = g.next;
+    if (!next || !el) return;
+    if (next.shape) {
+      setReshape({ frame: next.frame, shape: next.shape });
+    } else {
+      const dx = (next.frame.x - g.frame.x) * g.stage.width;
+      const dy = (next.frame.y - g.frame.y) * g.stage.height;
+      const scale = next.frame.w / g.frame.w;
+      el.style.transform = `translate3d(${dx}px, ${dy}px, 0) scale(${scale})`;
+    }
+    const key = next.guides.map((guide) => `${guide.axis}${guide.at}`).join();
+    if (key !== g.guidesKey) {
+      g.guidesKey = key;
+      host.guides(next.guides);
+    }
+  };
+  const start = (event, kind) => {
+    if (!editable || event.button !== 0) return;
+    const stage = host.stageBox();
+    if (!stage) return;
+    event.preventDefault();
+    event.stopPropagation();
+    host.select(clip.id);
+    event.currentTarget.setPointerCapture(event.pointerId);
+    gesture.current = {
+      kind,
+      pointer: { x: event.clientX, y: event.clientY },
+      frame,
+      shape: { rect: clip.rect, aspect: clip.aspect },
+      stage,
+      others: host.others(clip.id),
+      next: null,
+      request: null,
+      guidesKey: ""
+    };
+  };
+  const move = (event) => {
+    const g = gesture.current;
+    if (!g) return;
+    if (!g.next) {
+      host.dragging(true);
+      if (element.current) element.current.style.willChange = "transform";
+    }
+    const dx = (event.clientX - g.pointer.x) / g.stage.width;
+    const dy = (event.clientY - g.pointer.y) / g.stage.height;
+    const free = event.altKey;
+    if (isEdge(g.kind)) {
+      const result = chunkORNLCBNE_cjs.reshapeFrame(g.frame, g.shape, g.kind, dx, dy, g.others, free);
+      g.next = {
+        frame: result.frame,
+        shape: { rect: result.rect, aspect: result.aspect },
+        guides: result.guides
+      };
+    } else {
+      g.next = g.kind === "move" ? chunkORNLCBNE_cjs.moveFrame(g.frame, g.shape.aspect, dx, dy, g.others, free) : chunkORNLCBNE_cjs.resizeFrame(g.frame, g.shape.aspect, g.kind, dx, dy, g.others, free);
+    }
+    g.request ??= view().requestAnimationFrame(apply);
+  };
+  const end = () => {
+    const g = gesture.current;
+    gesture.current = null;
+    if (!g) return;
+    if (g.request !== null) view().cancelAnimationFrame(g.request);
+    const el = element.current;
+    if (el) {
+      el.style.transform = "";
+      el.style.willChange = "";
+    }
+    if (!g.next) return;
+    setReshape(null);
+    host.dragging(false);
+    host.guides([]);
+    host.commit(clip.id, g.next.frame, g.next.shape);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: element,
+      className: ui.cn(
+        "absolute origin-top-left",
+        // Lifted off the background (a picture that is part of the slide's design is not).
+        !clip.plain && "rounded-[0.6cqw] shadow-[0_0.5cqw_1.6cqw_rgba(0,0,0,0.5)]",
+        editable && "cursor-move touch-none",
+        selected && "outline outline-2 outline-offset-2 outline-primary",
+        dim && "opacity-30"
+      ),
+      style: {
+        left: `${box.x * 100}%`,
+        top: `${box.y * 100}%`,
+        width: `${box.w * 100}%`,
+        height: `${chunkORNLCBNE_cjs.frameHeight(box, shown.aspect) * 100}%`
+      },
+      onPointerDown: (event) => start(event, "move"),
+      onPointerMove: move,
+      onPointerUp: end,
+      onPointerCancel: end,
+      "data-testid": `stage-item-${clip.id}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cn("absolute inset-0 overflow-hidden", !clip.plain && "rounded-[0.6cqw]"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ClipImage, { clip: shown, live: !editable }),
+          clip.kind === "pdf" && !clip.plain && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "pointer-events-none absolute inset-0",
+              style: { background: EDGE_CSS },
+              "data-testid": "stage-clip-edge"
+            }
+          ),
+          !clip.plain && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 rounded-[0.6cqw] ring-1 ring-inset ring-white/15" })
+        ] }),
+        label && !clip.plain && // Under the clip, in the room the layout keeps (CAPTION_SPACE): never over it.
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "pointer-events-none absolute left-0 top-full mt-[0.5cqw] max-w-full truncate text-[1.7cqw] leading-tight",
+            style: { color: chunkORNLCBNE_cjs.TEXT_COLORS.muted },
+            children: label
+          }
+        ),
+        selected && CORNERS.map(({ corner, left, top, cursor }) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute flex size-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center pointer-coarse:size-11",
+            style: { left, top, cursor, touchAction: "none" },
+            onPointerDown: (event) => start(event, corner),
+            "aria-label": `Resize from the ${corner} corner`,
+            "data-testid": `stage-item-resize-${corner}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none size-3 rounded-full border-2 border-primary bg-background" })
+          },
+          corner
+        )),
+        selected && EDGES.map(({ edge, left, top, cursor, label: side }) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute flex size-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center pointer-coarse:size-11",
+            style: { left, top, cursor, touchAction: "none" },
+            onPointerDown: (event) => start(event, edge),
+            "aria-label": `Show more or less at the ${side}`,
+            title: "Drag to show more or less of the page",
+            "data-testid": `stage-item-reshape-${edge}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: ui.cn(
+                  "pointer-events-none rounded-full border-2 border-primary bg-background",
+                  edge === "n" || edge === "s" ? "h-2 w-4" : "h-4 w-2"
+                )
+              }
+            )
+          },
+          edge
+        ))
+      ]
+    }
+  );
+});
+
+// src/presentation/box-style.ts
+var cqw = (points) => `${chunkORNLCBNE_cjs.pointsToStage(points) * 100}cqw`;
+function runStyle(run, font) {
+  return {
+    fontSize: cqw(run.size ?? chunkORNLCBNE_cjs.DEFAULT_TEXT_SIZE),
+    fontWeight: run.bold ? 700 : 400,
+    fontStyle: run.italic ? "italic" : void 0,
+    textDecoration: run.underline ? "underline" : void 0,
+    color: run.color ?? chunkORNLCBNE_cjs.TEXT_COLORS.body,
+    fontFamily: run.font ? `"${run.font}", ${font}` : font
+  };
+}
+var HANDLES = [
+  { handle: "nw", left: "0%", top: "0%", cursor: "nwse-resize" },
+  { handle: "n", left: "50%", top: "0%", cursor: "ns-resize" },
+  { handle: "ne", left: "100%", top: "0%", cursor: "nesw-resize" },
+  { handle: "e", left: "100%", top: "50%", cursor: "ew-resize" },
+  { handle: "se", left: "100%", top: "100%", cursor: "nwse-resize" },
+  { handle: "s", left: "50%", top: "100%", cursor: "ns-resize" },
+  { handle: "sw", left: "0%", top: "100%", cursor: "nesw-resize" },
+  { handle: "w", left: "0%", top: "50%", cursor: "ew-resize" }
+];
+var withAlpha = (hex, alpha = 1) => {
+  if (alpha >= 1) return hex;
+  const n = parseInt(hex.slice(1), 16);
+  return `rgba(${n >> 16 & 255}, ${n >> 8 & 255}, ${n & 255}, ${alpha})`;
+};
+function shapeStyle(box) {
+  const { frame } = box;
+  const line = box.line;
+  const shorter = Math.min(frame.w, frame.h * 1 / chunkORNLCBNE_cjs.STAGE_ASPECT);
+  return {
+    background: box.fill && box.shape !== "line" ? withAlpha(box.fill, box.fillAlpha) : void 0,
+    border: line && box.shape !== "line" ? `${cqw(line.width)} ${line.dash ? "dashed" : "solid"} ${line.color}` : void 0,
+    borderRadius: box.shape === "ellipse" ? "50%" : box.shape === "roundRect" ? `${shorter * 16.67}cqw` : void 0
+  };
+}
+function Paragraphs({
+  paragraphs,
+  font
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: paragraphs.map((paragraph, index) => {
+    const first = paragraph.runs[0];
+    const size = first?.size ?? chunkORNLCBNE_cjs.DEFAULT_TEXT_SIZE;
+    const indent = (paragraph.level ?? 0) * 0.5 * size;
+    const empty = !paragraph.runs.some((run) => run.text);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "whitespace-pre-wrap break-words",
+        style: {
+          textAlign: paragraph.align ?? "left",
+          lineHeight: 1.2,
+          paddingLeft: cqw(indent + (paragraph.bullet ? size * 0.9 : 0)),
+          textIndent: paragraph.bullet ? cqw(-size * 0.9) : void 0,
+          // An empty line keeps its height.
+          fontSize: cqw(size)
+        },
+        children: [
+          paragraph.bullet && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                ...runStyle(first ?? { }, font),
+                display: "inline-block",
+                width: cqw(size * 0.9),
+                textIndent: 0
+              },
+              children: "\u2022"
+            }
+          ),
+          empty ? "\u200B" : paragraph.runs.map((run, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: runStyle(run, font), children: run.text }, i))
+        ]
+      },
+      index
+    );
+  }) });
+}
+var StageBox = react.memo(function StageBox2({
+  box,
+  font,
+  editable,
+  selected,
+  host
+}) {
+  const element = react.useRef(null);
+  const gesture = react.useRef(null);
+  const [typing, setTyping] = react.useState(false);
+  const [dragging, setDragging] = react.useState(false);
+  const { frame } = box;
+  const view = () => element.current?.ownerDocument.defaultView ?? window;
+  const apply = () => {
+    const g = gesture.current;
+    const el = element.current;
+    if (!g || !el) return;
+    g.request = null;
+    if (!g.next) return;
+    if (g.handle === "move") {
+      el.style.translate = `${(g.next.x - g.frame.x) * g.stage.width}px ${(g.next.y - g.frame.y) * g.stage.height}px`;
+    } else {
+      el.style.left = `${g.next.x * 100}%`;
+      el.style.top = `${g.next.y * 100}%`;
+      el.style.width = `${g.next.w * 100}%`;
+      el.style.height = `${g.next.h * 100}%`;
+    }
+  };
+  const start = (event, handle) => {
+    if (!editable || typing || event.button !== 0) return;
+    const stage = host.stageBox();
+    if (!stage) return;
+    event.preventDefault();
+    event.stopPropagation();
+    host.select(box.id);
+    event.currentTarget.setPointerCapture(event.pointerId);
+    gesture.current = {
+      handle,
+      pointer: { x: event.clientX, y: event.clientY },
+      frame,
+      stage,
+      next: null,
+      request: null,
+      wasSelected: selected
+    };
+  };
+  const move = (event) => {
+    const g = gesture.current;
+    if (!g) return;
+    const dx = (event.clientX - g.pointer.x) / g.stage.width;
+    const dy = (event.clientY - g.pointer.y) / g.stage.height;
+    if (!g.next) setDragging(true);
+    g.next = g.handle === "move" ? chunkORNLCBNE_cjs.moveBox(g.frame, dx, dy) : chunkORNLCBNE_cjs.stretchBox(g.frame, g.handle, dx, dy);
+    g.request ??= view().requestAnimationFrame(apply);
+  };
+  const end = () => {
+    const g = gesture.current;
+    gesture.current = null;
+    if (!g) return;
+    if (g.request !== null) view().cancelAnimationFrame(g.request);
+    if (!g.next) {
+      if (g.wasSelected && g.handle === "move" && hasText) setTyping(true);
+      return;
+    }
+    const el = element.current;
+    if (el) {
+      el.style.translate = "";
+      el.style.left = `${g.frame.x * 100}%`;
+      el.style.top = `${g.frame.y * 100}%`;
+      el.style.width = `${g.frame.w * 100}%`;
+      el.style.height = `${g.frame.h * 100}%`;
+    }
+    setDragging(false);
+    host.commit(box.id, g.next);
+  };
+  const hasText = box.shape !== "line";
+  const inset = cqw(box.inset ?? chunkORNLCBNE_cjs.DEFAULT_INSET);
+  const run = chunkORNLCBNE_cjs.firstRun(box);
+  const transform = box.rotation ? `rotate(${box.rotation}deg)` : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: element,
+      className: ui.cn(
+        "absolute",
+        editable ? "pointer-events-auto" : "pointer-events-none",
+        editable && !typing && "cursor-move touch-none",
+        editable && !selected && "hover:outline hover:outline-1 hover:outline-white/30",
+        selected && "outline outline-2 outline-offset-1 outline-primary"
+      ),
+      style: {
+        left: `${frame.x * 100}%`,
+        top: `${frame.y * 100}%`,
+        width: `${frame.w * 100}%`,
+        height: `${frame.h * 100}%`,
+        transform,
+        willChange: dragging ? "translate" : void 0
+      },
+      onPointerDown: (event) => start(event, "move"),
+      onPointerMove: move,
+      onPointerUp: end,
+      onPointerCancel: end,
+      onDoubleClick: () => editable && hasText && setTyping(true),
+      onKeyDown: (event) => {
+        if (selected && !typing && event.key === "Enter" && hasText) {
+          event.preventDefault();
+          setTyping(true);
+        }
+      },
+      tabIndex: editable ? 0 : void 0,
+      "data-testid": `stage-box-${box.id}`,
+      children: [
+        box.shape === "line" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "absolute inset-0 size-full overflow-visible",
+            preserveAspectRatio: "none",
+            "aria-hidden": true,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "line",
+              {
+                x1: "0%",
+                y1: box.flipV ? "100%" : "0%",
+                x2: "100%",
+                y2: box.flipV ? "0%" : "100%",
+                stroke: box.line?.color ?? chunkORNLCBNE_cjs.TEXT_COLORS.body,
+                style: { strokeWidth: cqw(box.line?.width ?? 1) },
+                strokeDasharray: box.line?.dash ? "6 4" : void 0
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: ui.cn(
+              "absolute inset-0 box-border flex flex-col overflow-hidden",
+              box.anchor === "middle" && "justify-center",
+              box.anchor === "bottom" && "justify-end"
+            ),
+            style: { ...shapeStyle(box), padding: inset },
+            children: typing ? /* @__PURE__ */ jsxRuntime.jsx(
+              "textarea",
+              {
+                autoFocus: true,
+                defaultValue: chunkORNLCBNE_cjs.boxText(box),
+                className: "pointer-events-auto w-full flex-1 resize-none bg-transparent p-0 outline-none",
+                style: {
+                  ...runStyle(run ?? { }, font),
+                  lineHeight: 1.2,
+                  textAlign: box.paragraphs[0]?.align ?? "left"
+                },
+                onPointerDown: (event) => event.stopPropagation(),
+                onBlur: (event) => {
+                  host.setText(box.id, event.currentTarget.value);
+                  setTyping(false);
+                },
+                onKeyDown: (event) => {
+                  event.stopPropagation();
+                  if (event.key === "Escape") event.currentTarget.blur();
+                },
+                "aria-label": "Text",
+                "data-testid": "stage-box-text-input"
+              }
+            ) : chunkORNLCBNE_cjs.boxText(box) || !editable ? /* @__PURE__ */ jsxRuntime.jsx(Paragraphs, { paragraphs: box.paragraphs, font }) : box.shape === "text" && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "text-white/40",
+                style: { fontSize: cqw(run?.size ?? chunkORNLCBNE_cjs.DEFAULT_TEXT_SIZE) },
+                children: "Double-click to type"
+              }
+            )
+          }
+        ),
+        selected && !typing && !dragging && HANDLES.filter(
+          ({ handle }) => box.shape !== "line" || handle === "e" || handle === "w" || handle === "n" || handle === "s"
+        ).map(({ handle, left, top, cursor }) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute flex size-5 -translate-x-1/2 -translate-y-1/2 items-center justify-center pointer-coarse:size-11",
+            style: { left, top, cursor, touchAction: "none" },
+            onPointerDown: (event) => start(event, handle),
+            "aria-label": `Resize from ${handle}`,
+            "data-testid": `stage-box-resize-${handle}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none size-2.5 rounded-full border-2 border-primary bg-background" })
+          },
+          handle
+        ))
+      ]
+    }
+  );
+});
+var SIZE_STEPS = [8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 44, 54, 66, 80, 96];
+var nextSize = (size, up) => up ? SIZE_STEPS.find((step) => step > size + 0.5) ?? size : [...SIZE_STEPS].reverse().find((step) => step < size - 0.5) ?? size;
+var ALIGN_ICON = {
+  left: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignLeft, { className: "size-4" }),
+  center: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignCenter, { className: "size-4" }),
+  right: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignRight, { className: "size-4" }),
+  justify: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignLeft, { className: "size-4" })
+};
+function ColorAction({
+  label,
+  value,
+  onChange,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: ui.cn(ACTION, "relative cursor-pointer"), title: label, "aria-label": label, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "pointer-events-none absolute inset-x-1.5 bottom-0.5 h-0.5 rounded-full",
+        style: { background: value }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "color",
+        value,
+        onChange: (event) => onChange(event.target.value),
+        className: "absolute inset-0 size-full cursor-pointer opacity-0",
+        "aria-label": label
+      }
+    )
+  ] });
+}
+function BoxActionBar({ box, onRemoved }) {
+  const actions = chunkORNLCBNE_cjs.usePresentation.getState();
+  const run = chunkORNLCBNE_cjs.firstRun(box);
+  const size = run?.size ?? chunkORNLCBNE_cjs.DEFAULT_TEXT_SIZE;
+  const align = box.paragraphs[0]?.align ?? "left";
+  const update = (change) => actions.updateBox(box.id, change);
+  const text = box.shape !== "line";
+  const top = Math.max(0, box.frame.y);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": "Text box",
+      className: "absolute z-20 flex items-center gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-md",
+      style: {
+        left: `${Math.min(Math.max(0, box.frame.x), 0.6) * 100}%`,
+        top: `calc(${top * 100}% - 40px)`
+      },
+      onPointerDown: (event) => event.stopPropagation(),
+      "data-testid": "box-action-bar",
+      children: [
+        text && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Action,
+            {
+              label: "Smaller",
+              onClick: () => update((b) => chunkORNLCBNE_cjs.styleRuns(b, (r) => ({ ...r, size: nextSize(r.size ?? size, false) }))),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AArrowDown, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "w-7 text-center text-xs tabular-nums text-muted-foreground",
+              "data-testid": "box-text-size",
+              children: Math.round(size)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Action,
+            {
+              label: "Larger",
+              onClick: () => update((b) => chunkORNLCBNE_cjs.styleRuns(b, (r) => ({ ...r, size: nextSize(r.size ?? size, true) }))),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AArrowUp, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Action,
+            {
+              label: "Bold",
+              onClick: () => update((b) => chunkORNLCBNE_cjs.styleRuns(b, (r) => ({ ...r, bold: !run?.bold }))),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bold, { className: ui.cn("size-4", run?.bold && "text-primary") })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ColorAction,
+            {
+              label: "Text colour",
+              value: run?.color ?? chunkORNLCBNE_cjs.TEXT_COLORS.body,
+              onChange: (color) => update((b) => chunkORNLCBNE_cjs.styleRuns(b, (r) => ({ ...r, color }))),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Baseline, { className: "size-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ColorAction,
+          {
+            label: box.shape === "line" ? "Line colour" : "Fill",
+            value: (box.shape === "line" ? box.line?.color : box.fill) ?? "#ffffff",
+            onChange: (color) => update(
+              (b) => b.shape === "line" ? { ...b, line: { width: b.line?.width ?? 2, ...b.line, color } } : { ...b, fill: color, shape: b.shape === "text" ? "rect" : b.shape }
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PaintBucket, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: ACTION,
+              title: "More",
+              "aria-label": "More",
+              "data-testid": "box-more-menu",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "size-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuContent, { align: "start", children: [
+            text && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                ui.DropdownMenuCheckboxItem,
+                {
+                  checked: !!run?.italic,
+                  onCheckedChange: () => update((b) => chunkORNLCBNE_cjs.styleRuns(b, (r) => ({ ...r, italic: !run?.italic }))),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Italic, { className: "size-4" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Italic" })
+                  ]
+                }
+              ),
+              ["left", "center", "right"].map((value) => /* @__PURE__ */ jsxRuntime.jsxs(
+                ui.DropdownMenuCheckboxItem,
+                {
+                  checked: align === value,
+                  onCheckedChange: () => update((b) => ({
+                    ...b,
+                    paragraphs: b.paragraphs.map((p) => ({ ...p, align: value }))
+                  })),
+                  children: [
+                    ALIGN_ICON[value],
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: value === "left" ? "Align left" : value === "center" ? "Centre" : "Align right" })
+                  ]
+                },
+                value
+              )),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuSeparator, {})
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuItem, { onSelect: () => actions.restackBox(box.id, "front"), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BringToFront, { className: "size-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "In front of the clips" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuItem, { onSelect: () => actions.restackBox(box.id, "back"), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SendToBack, { className: "size-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Behind the clips" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: ui.cn(ACTION, "text-destructive hover:bg-destructive/10"),
+            title: "Delete (Delete)",
+            "aria-label": "Delete",
+            onClick: () => {
+              actions.removeBox(box.id);
+              onRemoved();
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+var DRAG_THRESHOLD = 6;
+var DROP_ATTRIBUTE = "data-presentation-drop";
+function dropAt(doc, clipId, x, y) {
+  const target = doc.elementFromPoint(x, y)?.closest(`[${DROP_ATTRIBUTE}]`);
+  if (!target) return false;
+  const state = chunkORNLCBNE_cjs.usePresentation.getState();
+  if (target.getAttribute(DROP_ATTRIBUTE) === "slide") {
+    const index2 = Number(target.getAttribute("data-slide-index"));
+    if (!Number.isInteger(index2)) return false;
+    state.goTo(index2);
+    state.place(clipId);
+    return true;
+  }
+  const index = Number(target.getAttribute("data-slide-index"));
+  if (target.hasAttribute("data-slide-index") && Number.isInteger(index)) state.goTo(index);
+  const box = target.getBoundingClientRect();
+  state.place(clipId, { x: (x - box.left) / box.width, y: (y - box.top) / box.height });
+  return true;
+}
+function useClipDrag(clipId, onTap) {
+  const press = react.useRef(null);
+  const [ghost, setGhost] = react.useState(null);
+  const end = () => {
+    press.current = null;
+    setGhost(null);
+    chunkORNLCBNE_cjs.usePresentation.getState().setDragging(null);
+  };
+  return {
+    ghost,
+    handlers: {
+      onPointerDown: (event) => {
+        if (event.button !== 0) return;
+        press.current = { x: event.clientX, y: event.clientY, dragging: false };
+      },
+      onPointerMove: (event) => {
+        const p = press.current;
+        if (!p) return;
+        if (!p.dragging) {
+          if (Math.hypot(event.clientX - p.x, event.clientY - p.y) < DRAG_THRESHOLD) return;
+          p.dragging = true;
+          event.currentTarget.setPointerCapture(event.pointerId);
+          chunkORNLCBNE_cjs.usePresentation.getState().setDragging(clipId);
+        }
+        event.preventDefault();
+        setGhost({ x: event.clientX, y: event.clientY });
+      },
+      onPointerUp: (event) => {
+        const p = press.current;
+        if (p?.dragging)
+          dropAt(event.currentTarget.ownerDocument, clipId, event.clientX, event.clientY);
+        else if (p) onTap();
+        end();
+      },
+      onPointerCancel: end
+    }
+  };
+}
+var GuideLayer = react.memo(
+  react.forwardRef(function GuideLayer2(_, ref) {
+    const [guides, setGuides] = react.useState([]);
+    react.useImperativeHandle(ref, () => ({ set: setGuides }), []);
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: guides.map((guide) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "pointer-events-none absolute z-10 bg-primary",
+        style: guide.axis === "x" ? { left: `${guide.at * 100}%`, top: 0, bottom: 0, width: 1 } : { top: `${guide.at * 100}%`, left: 0, right: 0, height: 1 },
+        "data-testid": `stage-guide-${guide.axis}`
+      },
+      `${guide.axis}-${guide.at}`
+    )) });
+  })
+);
+function PresentationStage({
+  editable = false,
+  slideIndex,
+  show,
+  selected = null,
+  onSelect,
+  onEditImage,
+  onCropImage,
+  textEditing,
+  overlay,
+  className
+}) {
+  const index = chunkORNLCBNE_cjs.usePresentation((s) => slideIndex ?? s.current);
+  const deckSlide = chunkORNLCBNE_cjs.usePresentation((s) => s.slides[index]);
+  const deckClips = chunkORNLCBNE_cjs.usePresentation((s) => s.clips);
+  const slide = show?.slide ?? deckSlide;
+  const clips = show?.clips ?? deckClips;
+  const blank = chunkORNLCBNE_cjs.usePresentation((s) => s.blank && !editable && !show);
+  const captions = chunkORNLCBNE_cjs.usePresentation((s) => s.captions);
+  const columnValues = chunkORNLCBNE_cjs.usePresentation((s) => s.columnValues);
+  const theme = chunkORNLCBNE_cjs.usePresentation((s) => s.theme);
+  const logoImage = chunkORNLCBNE_cjs.usePresentation((s) => s.logoImage);
+  const media = chunkORNLCBNE_cjs.usePresentation((s) => s.media);
+  const stageRef = react.useRef(null);
+  const guideLayer = react.useRef(null);
+  const dropping = chunkORNLCBNE_cjs.usePresentation((s) => editable && s.dragging !== null);
+  const [dragging, setDragging] = react.useState(false);
+  const latest = react.useRef({ slide, clips, index, onSelect });
+  latest.current = { slide, clips, index, onSelect };
+  const host = react.useMemo(
+    () => ({
+      stageBox: () => stageRef.current?.getBoundingClientRect() ?? null,
+      others: (clipId) => {
+        const { slide: current, clips: all } = latest.current;
+        return (current?.items ?? []).filter((item) => item.clipId !== clipId).map((item) => ({
+          frame: item.frame,
+          aspect: all.find((clip) => clip.id === item.clipId)?.aspect ?? 1
+        }));
+      },
+      select: (clipId) => {
+        chunkORNLCBNE_cjs.usePresentation.getState().goTo(latest.current.index);
+        latest.current.onSelect?.(clipId);
+      },
+      guides: (guides) => guideLayer.current?.set(guides),
+      dragging: setDragging,
+      commit: (clipId, frame, shape) => {
+        const state = chunkORNLCBNE_cjs.usePresentation.getState();
+        state.goTo(latest.current.index);
+        if (shape) state.reshapeClip(clipId, frame, shape.rect, shape.aspect);
+        else state.setFrame(clipId, frame);
+      }
+    }),
+    []
+  );
+  const boxHost = react.useMemo(
+    () => ({
+      stageBox: () => stageRef.current?.getBoundingClientRect() ?? null,
+      select: (boxId) => {
+        chunkORNLCBNE_cjs.usePresentation.getState().goTo(latest.current.index);
+        latest.current.onSelect?.(boxId);
+      },
+      commit: (boxId, frame) => chunkORNLCBNE_cjs.usePresentation.getState().updateBox(boxId, (box) => ({ ...box, frame })),
+      setText: (boxId, text) => chunkORNLCBNE_cjs.usePresentation.getState().setBoxText(boxId, text)
+    }),
+    []
+  );
+  const font = chunkORNLCBNE_cjs.FONTS[theme.font].css;
+  const boxes = slide?.boxes ?? [];
+  const selectedBox = selected ? boxes.find((box) => box.id === selected) : void 0;
+  const renderBoxes = (front) => boxes.filter((box) => !!box.front === front).map((box) => /* @__PURE__ */ jsxRuntime.jsx(
+    StageBox,
+    {
+      box,
+      font,
+      editable,
+      selected: editable && selected === box.id,
+      host: boxHost
+    },
+    box.id
+  ));
+  const clipOf = (id) => clips.find((clip) => clip.id === id);
+  const selectedFrame = selected ? slide?.items.find((item) => item.clipId === selected)?.frame : void 0;
+  react.useEffect(() => {
+    const stage = stageRef.current;
+    const view = stage?.ownerDocument.defaultView;
+    if (!editable || !selected || !stage || !view) return;
+    let sum = { x: 0, y: 0 };
+    let request = null;
+    const onWheel = (event) => {
+      const item = event.target?.closest?.(
+        `[data-testid="stage-item-${selected}"]`
+      );
+      const clip = chunkORNLCBNE_cjs.usePresentation.getState().clips.find((entry) => entry.id === selected);
+      if (!item || !clip) return;
+      event.preventDefault();
+      const box = item.getBoundingClientRect();
+      const horizontal = event.shiftKey && !event.deltaX;
+      const deltaX = horizontal ? event.deltaY : event.deltaX;
+      const deltaY = horizontal ? 0 : event.deltaY;
+      sum = {
+        x: sum.x + deltaX / box.width * clip.rect.w,
+        y: sum.y + deltaY / box.height * clip.rect.h
+      };
+      request ??= view.requestAnimationFrame(() => {
+        request = null;
+        chunkORNLCBNE_cjs.usePresentation.getState().panClip(selected, sum.x, sum.y);
+        sum = { x: 0, y: 0 };
+      });
+    };
+    stage.addEventListener("wheel", onWheel, { passive: false });
+    return () => {
+      stage.removeEventListener("wheel", onWheel);
+      if (request !== null) view.cancelAnimationFrame(request);
+    };
+  }, [editable, selected]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: ui.cn("relative h-full w-full", !editable && "overflow-hidden bg-black", className),
+      style: { containerType: "size" },
+      "data-testid": editable ? "presentation-stage-editor" : "presentation-stage",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: stageRef,
+          className: ui.cn(
+            "absolute inset-0 m-auto",
+            editable ? "shadow-md" : "overflow-hidden",
+            dropping && "outline outline-2 outline-offset-2 outline-primary"
+          ),
+          style: {
+            width: "min(100cqw, calc(100cqh * 16 / 9))",
+            height: "min(100cqh, calc(100cqw * 9 / 16))",
+            containerType: "inline-size",
+            background: slide?.background ? chunkORNLCBNE_cjs.slideBackgroundCss(slide.background, media) : chunkORNLCBNE_cjs.backgroundCss(theme.background),
+            fontFamily: chunkORNLCBNE_cjs.FONTS[theme.font].css
+          },
+          onPointerDown: () => {
+            if (!editable) return;
+            chunkORNLCBNE_cjs.usePresentation.getState().goTo(index);
+            onSelect?.(null);
+          },
+          ...editable ? { [DROP_ATTRIBUTE]: "stage", "data-slide-index": index } : {},
+          "aria-label": `Slide ${index + 1}`,
+          children: [
+            blank && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-20 bg-black" }),
+            slide && /* @__PURE__ */ jsxRuntime.jsx(
+              SlideDecor,
+              {
+                slide,
+                theme,
+                labels: captions,
+                logoImage,
+                editable,
+                editing: textEditing
+              }
+            ),
+            renderBoxes(false),
+            slide?.items.map((item) => {
+              const clip = clipOf(item.clipId);
+              if (!clip) return null;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                StageItem,
+                {
+                  clip,
+                  frame: item.frame,
+                  editable,
+                  selected: editable && selected === clip.id,
+                  dim: false,
+                  label: captions ? chunkORNLCBNE_cjs.clipLabel(clip, columnValues) : "",
+                  host
+                },
+                clip.id
+              );
+            }),
+            renderBoxes(true),
+            editable && /* @__PURE__ */ jsxRuntime.jsx(GuideLayer, { ref: guideLayer }),
+            editable && selectedFrame && selected && !dragging && /* @__PURE__ */ jsxRuntime.jsx(
+              ClipActionBar,
+              {
+                clipId: selected,
+                at: selectedFrame,
+                onRemoved: () => onSelect?.(null),
+                onEditImage: onEditImage && clipOf(selected)?.kind === "image" ? () => onEditImage(selected) : void 0,
+                onCropImage: onCropImage && clipOf(selected)?.kind === "image" ? () => onCropImage(selected) : void 0
+              }
+            ),
+            editable && selectedBox && /* @__PURE__ */ jsxRuntime.jsx(BoxActionBar, { box: selectedBox, onRemoved: () => onSelect?.(null) }),
+            overlay
+          ]
+        }
+      )
+    }
+  );
+}
+
+exports.ClipImage = ClipImage;
+exports.PresentationStage = PresentationStage;
+exports.useClipDrag = useClipDrag;
+//# sourceMappingURL=chunk-JY7UUZQG.cjs.map
+//# sourceMappingURL=chunk-JY7UUZQG.cjs.map