@arbidocs/blocks 0.5.120 → 0.5.121

package/dist/chunk-Q3XJUXID.cjs

@@ -0,0 +1,4774 @@
+"use client";
+'use strict';
+
+var chunkWOOOMTTA_cjs = require('./chunk-WOOOMTTA.cjs');
+var chunk5GCCUXMT_cjs = require('./chunk-5GCCUXMT.cjs');
+var chunkNLOETJCB_cjs = require('./chunk-NLOETJCB.cjs');
+var chunkGKVE5JGB_cjs = require('./chunk-GKVE5JGB.cjs');
+var chunk5LTIZ44D_cjs = require('./chunk-5LTIZ44D.cjs');
+var chunkXTR26TNE_cjs = require('./chunk-XTR26TNE.cjs');
+var chunk7JLJH5CW_cjs = require('./chunk-7JLJH5CW.cjs');
+var chunkVZOOGA47_cjs = require('./chunk-VZOOGA47.cjs');
+var chunkTKHCIHE2_cjs = require('./chunk-TKHCIHE2.cjs');
+var chunkULWRNGGE_cjs = require('./chunk-ULWRNGGE.cjs');
+var react = require('react');
+var lucideReact = require('lucide-react');
+var ui = require('@arbidocs/react/ui');
+var reactDom = require('react-dom');
+var viewers = require('@arbidocs/react/viewers');
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@arbidocs/react');
+var documentTools = require('@arbidocs/react/document-tools');
+
+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 ? { [chunk5LTIZ44D_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 box2 = canvas.getBoundingClientRect();
+      const dpr = view.devicePixelRatio || 1;
+      const width = Math.max(1, Math.round(box2.width * dpr));
+      const height = Math.max(1, Math.round(box2.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 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 = chunkXTR26TNE_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 box2 = target.getBoundingClientRect();
+  state.place(clipId, { x: (x - box2.left) / box2.width, y: (y - box2.top) / box2.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);
+    chunkXTR26TNE_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);
+          chunkXTR26TNE_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 TILE_HEIGHT = 72;
+var TILE_WIDTH = { min: 56, max: 168 };
+function tileSize(aspect, height = TILE_HEIGHT) {
+  const width = Math.min(Math.max(height * aspect, TILE_WIDTH.min), TILE_WIDTH.max);
+  return { width, height };
+}
+function Fitted({ clip, box: box2 }) {
+  const wide = clip.aspect > box2.width / box2.height;
+  const size = wide ? { width: box2.width, height: box2.width / clip.aspect } : { width: box2.height * clip.aspect, height: box2.height };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none", style: size, children: /* @__PURE__ */ jsxRuntime.jsx(ClipImage, { clip }) });
+}
+function Label({ clip }) {
+  const [editing, setEditing] = react.useState(false);
+  if (editing) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        autoFocus: true,
+        defaultValue: clip.caption,
+        "aria-label": "Clip label",
+        className: "w-full rounded border border-input bg-background px-1 text-[11px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        onBlur: (event) => {
+          chunkXTR26TNE_cjs.usePresentation.getState().setCaption(clip.id, event.target.value);
+          setEditing(false);
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Enter") event.currentTarget.blur();
+          if (event.key === "Escape") setEditing(false);
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onDoubleClick: () => setEditing(true),
+      title: "Double-click to rename",
+      className: "block w-full truncate rounded px-0.5 text-left text-[11px] text-muted-foreground hover:text-foreground",
+      children: clip.caption || "Untitled"
+    }
+  );
+}
+function TrayTile({ clip, onSlide }) {
+  const { place, removeClip } = chunkXTR26TNE_cjs.usePresentation.getState();
+  const drag = useClipDrag(clip.id, () => !onSlide && place(clip.id));
+  const itemRef = react.useRef(null);
+  const size = tileSize(clip.aspect);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "li",
+    {
+      ref: itemRef,
+      className: "group relative flex shrink-0 flex-col gap-1",
+      style: { width: size.width },
+      "data-testid": `tray-clip-${clip.id}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: ui.cn(
+              "relative flex cursor-grab touch-pan-x select-none items-center justify-center overflow-hidden rounded-lg border bg-muted active:cursor-grabbing",
+              onSlide ? "border-primary/40" : "border-border hover:bg-muted/70",
+              drag.ghost && "opacity-40"
+            ),
+            style: { height: size.height },
+            ...drag.handlers,
+            title: onSlide ? "On this slide: drag to place it again" : "Drag onto the slide, or tap to add",
+            "data-testid": "tray-clip-handle",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Fitted, { clip, box: { width: size.width - 8, height: size.height - 8 } }),
+              onSlide && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "absolute left-1 top-1 flex size-4 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm",
+                  "aria-label": "On this slide",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-3" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "absolute right-1 top-1 flex size-5 items-center justify-center rounded-md bg-background/90 text-muted-foreground opacity-0 shadow-sm backdrop-blur-sm transition-opacity hover:text-destructive focus-visible:opacity-100 group-hover:opacity-100 pointer-coarse:size-11 pointer-coarse:opacity-100",
+            title: "Delete clip",
+            "aria-label": `Delete ${clip.caption || "clip"}`,
+            onClick: () => removeClip(clip.id),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(Label, { clip }),
+        drag.ghost && reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "pointer-events-none fixed z-[100] flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-lg border border-border bg-card p-1 shadow-xl",
+              style: { left: drag.ghost.x, top: drag.ghost.y },
+              "data-testid": "tray-drag-ghost",
+              children: /* @__PURE__ */ jsxRuntime.jsx(Fitted, { clip, box: tileSize(clip.aspect, 96) })
+            }
+          ),
+          // The tray's own window (the app's, or the presentation pop-out's).
+          itemRef.current?.ownerDocument.body ?? document.body
+        )
+      ]
+    }
+  );
+}
+function ClipTray({ start }) {
+  const all = chunkXTR26TNE_cjs.usePresentation((s) => s.clips);
+  const clips = react.useMemo(() => all.filter((clip) => !clip.plain), [all]);
+  const slide = chunkXTR26TNE_cjs.usePresentation(chunkXTR26TNE_cjs.currentSlide);
+  const onSlide = new Set(slide?.items.map((item) => item.clipId));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-t border-border bg-background", "data-testid": "clip-tray-bar", children: clips.length || start ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "ul",
+    {
+      className: "flex items-start gap-2 overflow-x-auto overscroll-x-contain px-3 py-2 [scrollbar-width:none]",
+      "aria-label": "Clips",
+      "data-testid": "clip-tray",
+      children: [
+        start && /* @__PURE__ */ jsxRuntime.jsx("li", { className: "shrink-0", children: start }),
+        clips.map((clip) => /* @__PURE__ */ jsxRuntime.jsx(TrayTile, { clip, onSlide: onSlide.has(clip.id) }, clip.id))
+      ]
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsxs(
+    "p",
+    {
+      className: "px-4 py-5 text-center text-xs text-muted-foreground",
+      "data-testid": "clip-tray-empty",
+      children: [
+        "Your clips appear here. In a document, choose ",
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Clip" }),
+        " and drag over a page, image or video."
+      ]
+    }
+  ) });
+}
+function Section({ title, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xs font-medium text-muted-foreground", children: title }),
+    children
+  ] });
+}
+function CustomColor({
+  value,
+  selected,
+  label,
+  round,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      title: label,
+      className: ui.cn(
+        "relative flex size-8 cursor-pointer items-center justify-center border border-dashed border-border text-muted-foreground hover:text-foreground",
+        round ? "rounded-full" : "rounded-md",
+        selected && "border-solid ring-2 ring-primary ring-offset-1 ring-offset-background"
+      ),
+      style: selected ? { background: value } : void 0,
+      children: [
+        !selected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "size-3.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "color",
+            value: chunkXTR26TNE_cjs.isHexColor(value) ? value : "#1f2937",
+            onChange: (event) => onChange(event.target.value),
+            "aria-label": label,
+            className: "absolute inset-0 cursor-pointer opacity-0"
+          }
+        )
+      ]
+    }
+  );
+}
+function DesignMenu({ onChooseLogo }) {
+  const theme = chunkXTR26TNE_cjs.usePresentation((s) => s.theme);
+  const setTheme = chunkXTR26TNE_cjs.usePresentation((s) => s.setTheme);
+  const customBackground = chunkXTR26TNE_cjs.isHexColor(theme.background);
+  const customAccent = !chunkXTR26TNE_cjs.ACCENTS.some((accent) => accent.color === theme.accent);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Popover, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        type: "button",
+        size: "icon",
+        variant: "ghost",
+        className: "size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11",
+        title: "Design: background, typeface, accent, logo",
+        "aria-label": "Design",
+        "data-testid": "presentation-design",
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, { className: "size-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.PopoverContent, { align: "end", className: "flex w-[21.5rem] flex-col gap-4 overflow-x-hidden p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "Background", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-7 gap-2", children: [
+        chunkXTR26TNE_cjs.BACKGROUNDS.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            title: preset.label,
+            "aria-label": `${preset.label} background`,
+            "aria-pressed": theme.background === preset.id,
+            onClick: () => setTheme({ background: preset.id }),
+            className: ui.cn(
+              "size-8 rounded-md border border-border shadow-sm",
+              theme.background === preset.id && "ring-2 ring-primary ring-offset-1 ring-offset-background"
+            ),
+            style: { background: chunkXTR26TNE_cjs.backgroundCss(preset.id), containerType: "inline-size" },
+            "data-testid": `design-background-${preset.id}`
+          },
+          preset.id
+        )),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CustomColor,
+          {
+            value: theme.background,
+            selected: customBackground,
+            label: "Your own background colour",
+            onChange: (background) => setTheme({ background })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "Typeface", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2", children: Object.keys(chunkXTR26TNE_cjs.FONTS).map((font) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": theme.font === font,
+          onClick: () => setTheme({ font }),
+          className: ui.cn(
+            "flex flex-col items-center gap-0.5 rounded-md border border-border px-2 py-1.5 hover:bg-muted",
+            theme.font === font && "border-primary bg-primary/5"
+          ),
+          "data-testid": `design-font-${font}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl leading-tight", style: { fontFamily: chunkXTR26TNE_cjs.FONTS[font].css }, children: "Aa" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-muted-foreground", children: chunkXTR26TNE_cjs.FONTS[font].label })
+          ]
+        },
+        font
+      )) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "Accent", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        chunkXTR26TNE_cjs.ACCENTS.map((accent) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            title: accent.label,
+            "aria-label": `${accent.label} accent`,
+            "aria-pressed": theme.accent === accent.color,
+            onClick: () => setTheme({ accent: accent.color }),
+            className: ui.cn(
+              "flex size-8 items-center justify-center rounded-full border border-black/10 shadow-sm",
+              theme.accent === accent.color && "ring-2 ring-primary ring-offset-1 ring-offset-background"
+            ),
+            style: { background: chunkXTR26TNE_cjs.accentColor(accent.color) },
+            children: theme.accent === accent.color && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-3.5 text-black/70" })
+          },
+          accent.color
+        )),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CustomColor,
+          {
+            value: chunkXTR26TNE_cjs.accentColor(theme.accent),
+            selected: customAccent,
+            label: "Your own accent colour",
+            round: true,
+            onChange: (accent) => setTheme({ accent })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "Logo", children: theme.logo ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-sm", title: theme.logo.fileName, children: theme.logo.fileName || "Logo" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex rounded-md border border-border p-0.5", role: "group", children: ["bl", "br"].map((corner) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": theme.logo?.corner === corner,
+            onClick: () => theme.logo && setTheme({ logo: { ...theme.logo, corner } }),
+            className: ui.cn(
+              "rounded px-2 py-0.5 text-xs text-muted-foreground",
+              theme.logo?.corner === corner && "bg-muted text-foreground"
+            ),
+            children: corner === "bl" ? "Left" : "Right"
+          },
+          corner
+        )) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            type: "button",
+            size: "icon",
+            variant: "ghost",
+            className: "size-7 text-muted-foreground",
+            title: "Remove the logo",
+            "aria-label": "Remove the logo",
+            onClick: () => setTheme({ logo: null }),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "size-3.5" })
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          className: "self-start",
+          disabled: !onChooseLogo,
+          onClick: onChooseLogo,
+          "data-testid": "design-choose-logo",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ImagePlus, { className: "size-4" }),
+            "Choose an image\u2026"
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+var at = (box2) => ({
+  left: `${box2.x * 100}%`,
+  top: `${box2.y * 100}%`,
+  width: `${box2.w * 100}%`,
+  height: `${box2.h * 100}%`
+});
+function LayoutThumb({ layout, className }) {
+  const geometry = chunkXTR26TNE_cjs.slideGeometry({ layout, caption: "Title" }, { labels: false, logo: null });
+  const { top, right = 0, bottom = 0, columns } = geometry.reserve;
+  const room = {
+    x: chunkXTR26TNE_cjs.STAGE_MARGIN,
+    y: chunkXTR26TNE_cjs.STAGE_MARGIN + top,
+    w: 1 - 2 * chunkXTR26TNE_cjs.STAGE_MARGIN - right,
+    h: 1 - 2 * chunkXTR26TNE_cjs.STAGE_MARGIN - top - bottom
+  };
+  const blocks = layout === "title" || layout === "section" || layout === "free" ? [] : columns === 2 ? [
+    { ...room, w: room.w / 2 - 0.02 },
+    { ...room, x: room.x + room.w / 2 + 0.02, w: room.w / 2 - 0.02 }
+  ] : [room];
+  const title = geometry.title;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      "aria-hidden": true,
+      className: ui.cn(
+        "relative block aspect-video shrink-0 overflow-hidden rounded-[3px] bg-zinc-800",
+        className
+      ),
+      children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "absolute rounded-full bg-white/90",
+            style: at({
+              x: title.align === "center" ? title.x + title.w * 0.2 : title.x,
+              y: title.y + title.h * 0.3,
+              w: title.align === "center" ? title.w * 0.6 : title.w * 0.55,
+              h: Math.max(0.05, title.h * 0.35)
+            })
+          }
+        ),
+        geometry.text && [0, 1, 2].slice(0, geometry.text.bullets ? 3 : 1).map((line) => /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "absolute rounded-full bg-white/45",
+            style: at({
+              x: geometry.text.align === "center" ? geometry.text.x + geometry.text.w * 0.3 : geometry.text.x,
+              y: geometry.text.y + line * 0.1,
+              w: geometry.text.align === "center" ? geometry.text.w * 0.4 : geometry.text.w * 0.85,
+              h: 0.045
+            })
+          },
+          line
+        )),
+        blocks.map((block, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute rounded-[1px] bg-white/25", style: at(block) }, index))
+      ]
+    }
+  );
+}
+function LayoutMenu({
+  index,
+  className,
+  compact = false
+}) {
+  const layout = chunkXTR26TNE_cjs.usePresentation(
+    (s) => (index === void 0 ? chunkXTR26TNE_cjs.currentSlide(s) : s.slides[index])?.layout ?? "clips"
+  );
+  const setSlideLayout = chunkXTR26TNE_cjs.usePresentation((s) => s.setSlideLayout);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        className: ui.cn(
+          "h-7 gap-1.5 px-1.5 text-xs text-muted-foreground hover:text-foreground",
+          className
+        ),
+        title: "Slide layout",
+        "aria-label": `Slide layout: ${chunkXTR26TNE_cjs.LAYOUT_INFO[layout].label}`,
+        "data-testid": "presentation-layout",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(LayoutThumb, { layout, className: compact ? "w-6" : "w-7" }),
+          !compact && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-3" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuContent, { align: "start", className: "w-56", children: chunkXTR26TNE_cjs.SLIDE_LAYOUTS.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.DropdownMenuItem,
+      {
+        onSelect: () => setSlideLayout(option, index),
+        className: ui.cn(option === layout && "bg-accent"),
+        "data-testid": `presentation-layout-${option}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(LayoutThumb, { layout: option, className: "w-12" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: chunkXTR26TNE_cjs.LAYOUT_INFO[option].label })
+        ]
+      },
+      option
+    )) })
+  ] });
+}
+function Notice() {
+  const notice = chunkXTR26TNE_cjs.usePresentation((s) => s.notice);
+  react.useEffect(() => {
+    if (!notice) return;
+    const timer = setTimeout(
+      () => chunkXTR26TNE_cjs.usePresentation.getState().clearNotice(notice.id),
+      notice.kind === "error" ? 8e3 : 3e3
+    );
+    return () => clearTimeout(timer);
+  }, [notice]);
+  if (!notice) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: notice.kind === "error" ? "alert" : "status",
+      className: "pointer-events-auto fixed left-1/2 top-3 z-[100] flex max-w-[90vw] -translate-x-1/2 items-center gap-2 rounded-lg border border-border bg-popover px-3 py-2 text-sm shadow-lg",
+      "data-testid": "presentation-notice",
+      children: [
+        notice.kind === "error" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleAlert, { className: "size-4 shrink-0 text-destructive" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { className: "size-4 shrink-0 text-primary" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: notice.text }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "ml-1 rounded p-0.5 text-muted-foreground hover:text-foreground",
+            "aria-label": "Dismiss",
+            onClick: () => chunkXTR26TNE_cjs.usePresentation.getState().clearNotice(notice.id),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+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: at2,
+  onRemoved,
+  onEditImage,
+  onCropImage
+}) {
+  const actions = chunkXTR26TNE_cjs.usePresentation.getState();
+  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: `${at2.x * 100}%`, top: `calc(${at2.y * 100}% - 40px)` },
+      onPointerDown: (event) => event.stopPropagation(),
+      "data-testid": "clip-action-bar",
+      children: [
+        SIZES.map(({ command, label, icon }) => /* @__PURE__ */ jsxRuntime.jsx(Action, { label, onClick: () => actions.applyFrame(clipId, command), children: icon }, command)),
+        /* @__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)) })
+        ] }),
+        onCropImage && /* @__PURE__ */ jsxRuntime.jsx(Action, { label: "Crop", onClick: onCropImage, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Crop, { className: "size-4" }) }),
+        onEditImage && /* @__PURE__ */ jsxRuntime.jsx(Action, { label: "Edit image", onClick: onEditImage, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "size-4" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-0.5 h-5 w-px bg-border" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Action, { label: "Bring to front", onClick: () => actions.bringToFront(clipId), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BringToFront, { className: "size-4" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Action, { label: "Send to back", onClick: () => actions.sendToBack(clipId), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SendToBack, { className: "size-4" }) }),
+        /* @__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 = (box2) => ({
+  left: `${box2.x * 100}%`,
+  top: `${box2.y * 100}%`,
+  width: `${box2.w * 100}%`,
+  height: `${box2.h * 100}%`
+});
+var textStyle = (box2, color) => ({
+  ...boxStyle(box2),
+  fontSize: `${box2.size * 100}cqw`,
+  fontWeight: box2.weight,
+  lineHeight: box2.leading,
+  color,
+  letterSpacing: box2.tone === "title" ? "-0.01em" : void 0
+});
+var PLACEHOLDER_COLOR = "rgba(255,255,255,0.32)";
+function Text({
+  box: box2,
+  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",
+        box2.align === "center" && "text-center",
+        box2.bullets && "gap-[0.6cqw]",
+        box2.anchor === "middle" && "justify-center",
+        box2.anchor === "bottom" && "justify-end"
+      ),
+      style: textStyle(box2, empty ? PLACEHOLDER_COLOR : chunkXTR26TNE_cjs.TEXT_COLORS[box2.tone]),
+      onPointerDown: onEdit ? (event) => event.stopPropagation() : void 0,
+      onClick: onEdit,
+      "data-testid": testId,
+      children: (empty ? [placeholder] : lines).map(
+        (line, index) => box2.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: box2,
+  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",
+        box2.align === "center" && "text-center"
+      ),
+      style: {
+        ...textStyle(box2, chunkXTR26TNE_cjs.TEXT_COLORS[box2.tone]),
+        fontFamily: "inherit",
+        // Bulleted lines keep their indent while typed.
+        paddingLeft: box2.bullets ? "1.22em" : void 0
+      },
+      "aria-label": placeholder,
+      "data-testid": testId
+    }
+  );
+}
+function Logo({ image, box: box2 }) {
+  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(box2), objectPosition: box2.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 = chunkXTR26TNE_cjs.slideGeometry(slide, { labels, logo: theme.logo?.corner ?? null });
+  const title = slide.caption.trim();
+  const titled = slide.layout === "title" || slide.layout === "section";
+  const info = chunkXTR26TNE_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: chunkXTR26TNE_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: chunkXTR26TNE_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: chunkXTR26TNE_cjs.textLines(slide.points),
+        accent: chunkXTR26TNE_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 PAN_STEP = 0.1;
+var MAX_ZOOM = 800;
+var HOLD_DELAY = 350;
+var HOLD_EVERY = 90;
+var BUTTON = "pointer-events-auto flex size-7 items-center justify-center rounded-full border border-border bg-background/90 text-foreground shadow-sm backdrop-blur-sm hover:bg-background 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 } = chunkXTR26TNE_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: "pointer-events-none absolute inset-0 z-10",
+      onPointerDown: (event) => event.stopPropagation(),
+      "data-testid": "clip-view-controls",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          HoldButton,
+          {
+            label: "Show more above",
+            disabled: rect.y <= edge,
+            onStep: pan(0, -PAN_STEP),
+            className: "absolute left-1/2 top-4 -translate-x-1/2 pointer-coarse:top-7",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          HoldButton,
+          {
+            label: "Show more below",
+            disabled: rect.y + rect.h >= 1 - edge,
+            onStep: pan(0, PAN_STEP),
+            className: "absolute bottom-10 left-1/2 -translate-x-1/2 pointer-coarse:bottom-14",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          HoldButton,
+          {
+            label: "Show more on the left",
+            disabled: rect.x <= edge,
+            onStep: pan(-PAN_STEP, 0),
+            className: "absolute left-4 top-1/2 -translate-y-1/2 pointer-coarse:left-7",
+            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: "absolute right-4 top-1/2 -translate-y-1/2 pointer-coarse:right-7",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "pointer-events-auto absolute bottom-1.5 left-1/2 -translate-x-1/2",
+            "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: "bg-background/95 shadow-sm backdrop-blur-sm pointer-coarse:h-11",
+                sliderClassName: "w-24"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+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 = chunkXTR26TNE_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 [dragging, setDragging] = react.useState(false);
+  const [reshape, setReshape] = react.useState(null);
+  const shown = reshape ? { ...clip, ...reshape.shape } : clip;
+  const box2 = 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) {
+      setDragging(true);
+      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 = chunkXTR26TNE_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" ? chunkXTR26TNE_cjs.moveFrame(g.frame, g.shape.aspect, dx, dy, g.others, free) : chunkXTR26TNE_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);
+    setDragging(false);
+    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: `${box2.x * 100}%`,
+        top: `${box2.y * 100}%`,
+        width: `${box2.w * 100}%`,
+        height: `${chunkXTR26TNE_cjs.frameHeight(box2, 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: chunkXTR26TNE_cjs.TEXT_COLORS.muted },
+            children: label
+          }
+        ),
+        selected && !dragging && /* @__PURE__ */ jsxRuntime.jsx(ClipViewControls, { clip }),
+        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) => `${chunkXTR26TNE_cjs.pointsToStage(points) * 100}cqw`;
+function runStyle(run, font) {
+  return {
+    fontSize: cqw(run.size ?? chunkXTR26TNE_cjs.DEFAULT_TEXT_SIZE),
+    fontWeight: run.bold ? 700 : 400,
+    fontStyle: run.italic ? "italic" : void 0,
+    textDecoration: run.underline ? "underline" : void 0,
+    color: run.color ?? chunkXTR26TNE_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 = (hex3, alpha = 1) => {
+  if (alpha >= 1) return hex3;
+  const n = parseInt(hex3.slice(1), 16);
+  return `rgba(${n >> 16 & 255}, ${n >> 8 & 255}, ${n & 255}, ${alpha})`;
+};
+function shapeStyle(box2) {
+  const { frame } = box2;
+  const line = box2.line;
+  const shorter = Math.min(frame.w, frame.h * 1 / chunkXTR26TNE_cjs.STAGE_ASPECT);
+  return {
+    background: box2.fill && box2.shape !== "line" ? withAlpha(box2.fill, box2.fillAlpha) : void 0,
+    border: line && box2.shape !== "line" ? `${cqw(line.width)} ${line.dash ? "dashed" : "solid"} ${line.color}` : void 0,
+    borderRadius: box2.shape === "ellipse" ? "50%" : box2.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 ?? chunkXTR26TNE_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: box2,
+  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 } = box2;
+  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(box2.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" ? chunkXTR26TNE_cjs.moveBox(g.frame, dx, dy) : chunkXTR26TNE_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(box2.id, g.next);
+  };
+  const hasText = box2.shape !== "line";
+  const inset = cqw(box2.inset ?? chunkXTR26TNE_cjs.DEFAULT_INSET);
+  const run = chunkXTR26TNE_cjs.firstRun(box2);
+  const transform = box2.rotation ? `rotate(${box2.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-${box2.id}`,
+      children: [
+        box2.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: box2.flipV ? "100%" : "0%",
+                x2: "100%",
+                y2: box2.flipV ? "0%" : "100%",
+                stroke: box2.line?.color ?? chunkXTR26TNE_cjs.TEXT_COLORS.body,
+                style: { strokeWidth: cqw(box2.line?.width ?? 1) },
+                strokeDasharray: box2.line?.dash ? "6 4" : void 0
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: ui.cn(
+              "absolute inset-0 box-border flex flex-col overflow-hidden",
+              box2.anchor === "middle" && "justify-center",
+              box2.anchor === "bottom" && "justify-end"
+            ),
+            style: { ...shapeStyle(box2), padding: inset },
+            children: typing ? /* @__PURE__ */ jsxRuntime.jsx(
+              "textarea",
+              {
+                autoFocus: true,
+                defaultValue: chunkXTR26TNE_cjs.boxText(box2),
+                className: "pointer-events-auto w-full flex-1 resize-none bg-transparent p-0 outline-none",
+                style: {
+                  ...runStyle(run ?? { }, font),
+                  lineHeight: 1.2,
+                  textAlign: box2.paragraphs[0]?.align ?? "left"
+                },
+                onPointerDown: (event) => event.stopPropagation(),
+                onBlur: (event) => {
+                  host.setText(box2.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"
+              }
+            ) : chunkXTR26TNE_cjs.boxText(box2) || !editable ? /* @__PURE__ */ jsxRuntime.jsx(Paragraphs, { paragraphs: box2.paragraphs, font }) : box2.shape === "text" && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "text-white/40",
+                style: { fontSize: cqw(run?.size ?? chunkXTR26TNE_cjs.DEFAULT_TEXT_SIZE) },
+                children: "Double-click to type"
+              }
+            )
+          }
+        ),
+        selected && !typing && !dragging && HANDLES.filter(
+          ({ handle }) => box2.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_NEXT = {
+  left: "center",
+  center: "right",
+  right: "left",
+  justify: "left"
+};
+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: box2, onRemoved }) {
+  const actions = chunkXTR26TNE_cjs.usePresentation.getState();
+  const run = chunkXTR26TNE_cjs.firstRun(box2);
+  const size = run?.size ?? chunkXTR26TNE_cjs.DEFAULT_TEXT_SIZE;
+  const align = box2.paragraphs[0]?.align ?? "left";
+  const update = (change) => actions.updateBox(box2.id, change);
+  const text = box2.shape !== "line";
+  const top = Math.max(0, box2.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, box2.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) => chunkXTR26TNE_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) => chunkXTR26TNE_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) => chunkXTR26TNE_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(
+            Action,
+            {
+              label: "Italic",
+              onClick: () => update((b) => chunkXTR26TNE_cjs.styleRuns(b, (r) => ({ ...r, italic: !run?.italic }))),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Italic, { className: ui.cn("size-4", run?.italic && "text-primary") })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Action,
+            {
+              label: "Align",
+              onClick: () => update((b) => ({
+                ...b,
+                paragraphs: b.paragraphs.map((p) => ({ ...p, align: ALIGN_NEXT[align] }))
+              })),
+              children: ALIGN_ICON[align]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ColorAction,
+            {
+              label: "Text colour",
+              value: run?.color ?? chunkXTR26TNE_cjs.TEXT_COLORS.body,
+              onChange: (color) => update((b) => chunkXTR26TNE_cjs.styleRuns(b, (r) => ({ ...r, color }))),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Baseline, { className: "size-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ColorAction,
+          {
+            label: box2.shape === "line" ? "Line colour" : "Fill",
+            value: (box2.shape === "line" ? box2.line?.color : box2.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.jsx("div", { className: "mx-0.5 h-5 w-px bg-border" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Action, { label: "In front of the clips", onClick: () => actions.restackBox(box2.id, "front"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BringToFront, { className: "size-4" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Action, { label: "Behind the clips", onClick: () => actions.restackBox(box2.id, "back"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SendToBack, { className: "size-4" }) }),
+        /* @__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: "Delete (Delete)",
+            "aria-label": "Delete",
+            onClick: () => {
+              actions.removeBox(box2.id);
+              onRemoved();
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+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,
+  selected = null,
+  onSelect,
+  onEditImage,
+  onCropImage,
+  textEditing,
+  overlay,
+  className
+}) {
+  const index = chunkXTR26TNE_cjs.usePresentation((s) => slideIndex ?? s.current);
+  const slide = chunkXTR26TNE_cjs.usePresentation((s) => s.slides[index]);
+  const clips = chunkXTR26TNE_cjs.usePresentation((s) => s.clips);
+  const blank = chunkXTR26TNE_cjs.usePresentation((s) => s.blank && !editable);
+  const captions = chunkXTR26TNE_cjs.usePresentation((s) => s.captions);
+  const columnValues = chunkXTR26TNE_cjs.usePresentation((s) => s.columnValues);
+  const theme = chunkXTR26TNE_cjs.usePresentation((s) => s.theme);
+  const logoImage = chunkXTR26TNE_cjs.usePresentation((s) => s.logoImage);
+  const media = chunkXTR26TNE_cjs.usePresentation((s) => s.media);
+  const stageRef = react.useRef(null);
+  const guideLayer = react.useRef(null);
+  const dropping = chunkXTR26TNE_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: current2, clips: all } = latest.current;
+        return (current2?.items ?? []).filter((item) => item.clipId !== clipId).map((item) => ({
+          frame: item.frame,
+          aspect: all.find((clip) => clip.id === item.clipId)?.aspect ?? 1
+        }));
+      },
+      select: (clipId) => {
+        chunkXTR26TNE_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 = chunkXTR26TNE_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) => {
+        chunkXTR26TNE_cjs.usePresentation.getState().goTo(latest.current.index);
+        latest.current.onSelect?.(boxId);
+      },
+      commit: (boxId, frame) => chunkXTR26TNE_cjs.usePresentation.getState().updateBox(boxId, (box2) => ({ ...box2, frame })),
+      setText: (boxId, text) => chunkXTR26TNE_cjs.usePresentation.getState().setBoxText(boxId, text)
+    }),
+    []
+  );
+  const font = chunkXTR26TNE_cjs.FONTS[theme.font].css;
+  const boxes = slide?.boxes ?? [];
+  const selectedBox = selected ? boxes.find((box2) => box2.id === selected) : void 0;
+  const renderBoxes = (front) => boxes.filter((box2) => !!box2.front === front).map((box2) => /* @__PURE__ */ jsxRuntime.jsx(
+    StageBox,
+    {
+      box: box2,
+      font,
+      editable,
+      selected: editable && selected === box2.id,
+      host: boxHost
+    },
+    box2.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 = chunkXTR26TNE_cjs.usePresentation.getState().clips.find((entry) => entry.id === selected);
+      if (!item || !clip) return;
+      event.preventDefault();
+      const box2 = 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 / box2.width * clip.rect.w,
+        y: sum.y + deltaY / box2.height * clip.rect.h
+      };
+      request ??= view.requestAnimationFrame(() => {
+        request = null;
+        chunkXTR26TNE_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 ? chunkXTR26TNE_cjs.slideBackgroundCss(slide.background, media) : chunkXTR26TNE_cjs.backgroundCss(theme.background),
+            fontFamily: chunkXTR26TNE_cjs.FONTS[theme.font].css
+          },
+          onPointerDown: () => {
+            if (!editable) return;
+            chunkXTR26TNE_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 ? chunkXTR26TNE_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
+          ]
+        }
+      )
+    }
+  );
+}
+function SlideAction({
+  label,
+  onClick,
+  disabled,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Button,
+    {
+      type: "button",
+      size: "icon",
+      variant: "ghost",
+      className: "size-7 text-muted-foreground hover:text-foreground pointer-coarse:size-10",
+      title: label,
+      "aria-label": label,
+      disabled,
+      onClick,
+      children
+    }
+  );
+}
+var SlideCard = react.memo(function SlideCard2({
+  index,
+  count,
+  current: current2,
+  selected,
+  onSelect,
+  onEditImage,
+  onCropImage
+}) {
+  const empty = chunkXTR26TNE_cjs.usePresentation((s) => {
+    const slide = s.slides[index];
+    return !!slide && !slide.items.length && !slide.boxes.length && slide.layout !== "title" && slide.layout !== "section";
+  });
+  const notes = chunkXTR26TNE_cjs.usePresentation((s) => s.slides[index]?.notes ?? "");
+  const textEditing = react.useMemo(
+    () => ({
+      onTitle: (title) => chunkXTR26TNE_cjs.usePresentation.getState().setSlideCaption(title, index),
+      onPoints: (points) => chunkXTR26TNE_cjs.usePresentation.getState().setSlidePoints(points, index)
+    }),
+    [index]
+  );
+  const select = react.useCallback((clipId) => onSelect(index, clipId), [onSelect, index]);
+  const actions = chunkXTR26TNE_cjs.usePresentation.getState();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group relative flex gap-2", "data-testid": `slide-${index}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-9 shrink-0 flex-col items-center gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: ui.cn(
+            "py-1 text-xs tabular-nums",
+            current2 ? "font-semibold text-foreground" : "text-muted-foreground"
+          ),
+          children: index + 1
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: ui.cn(
+            "flex flex-col items-center gap-0.5 transition-opacity",
+            "opacity-0 focus-within:opacity-100 group-hover:opacity-100",
+            current2 && "pointer-coarse:opacity-100"
+          ),
+          "data-testid": `slide-actions-${index}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(LayoutMenu, { index, compact: true }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SlideAction,
+              {
+                label: "Move up",
+                disabled: index === 0,
+                onClick: () => actions.moveSlide(index, index - 1),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "size-3.5" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SlideAction,
+              {
+                label: "Move down",
+                disabled: index === count - 1,
+                onClick: () => actions.moveSlide(index, index + 1),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "size-3.5" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(SlideAction, { label: "Duplicate", onClick: () => actions.duplicateSlide(index), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "size-3.5" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(SlideAction, { label: "Delete slide", onClick: () => actions.removeSlide(index), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "size-3.5" }) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: ui.cn(
+          "relative aspect-video min-w-0 flex-1 rounded-sm",
+          current2 && "ring-1 ring-primary/40 ring-offset-4 ring-offset-transparent"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PresentationStage,
+            {
+              editable: true,
+              slideIndex: index,
+              selected,
+              onSelect: select,
+              onEditImage,
+              onCropImage,
+              textEditing,
+              overlay: empty && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-[8%] flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-black/40 px-3 py-1 text-[1.4cqw] text-white/70", children: "Drag a clip here from the tray" }) })
+            }
+          ),
+          (notes || current2) && /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              value: notes,
+              rows: notes.split("\n").length,
+              placeholder: "Speaker notes",
+              onChange: (event) => chunkXTR26TNE_cjs.usePresentation.getState().setSlideNotes(event.target.value, index),
+              className: "mt-2 block w-full resize-none rounded-sm border-0 bg-transparent px-1 py-0.5 text-xs text-muted-foreground placeholder:text-muted-foreground/50 focus:bg-background focus:text-foreground focus:outline-none focus:ring-1 focus:ring-ring",
+              "aria-label": `Speaker notes for slide ${index + 1}`,
+              "data-testid": `slide-notes-${index}`
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+var INSERTS = [
+  { shape: "text", label: "Text box", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Type, { className: "size-4" }) },
+  { shape: "rect", label: "Rectangle", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Square, { className: "size-4" }) },
+  {
+    shape: "roundRect",
+    label: "Rounded rectangle",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RectangleHorizontal, { className: "size-4" })
+  },
+  { shape: "ellipse", label: "Ellipse", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "size-4" }) },
+  { shape: "line", label: "Line", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "size-4" }) }
+];
+function InsertMenu({ onInserted }) {
+  const insert = (shape) => {
+    const state = chunkXTR26TNE_cjs.usePresentation.getState();
+    const slide = state.slides[state.current];
+    const box2 = chunkXTR26TNE_cjs.newBox(shape, chunkXTR26TNE_cjs.accentColor(state.theme.accent));
+    const dark = chunkXTR26TNE_cjs.isLightBackground(slide?.background);
+    const { id, ...rest } = dark ? {
+      ...box2,
+      paragraphs: box2.paragraphs.map((p) => ({
+        ...p,
+        runs: p.runs.map((r) => ({ color: "#1f2328", ...r }))
+      }))
+    } : box2;
+    onInserted(state.current, state.addBox(rest));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        type: "button",
+        size: "icon",
+        variant: "ghost",
+        className: "size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11",
+        title: "Insert a text box or shape",
+        "aria-label": "Insert",
+        "data-testid": "slides-insert",
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Shapes, { className: "size-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuContent, { align: "end", children: INSERTS.map(({ shape, label, icon }) => /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.DropdownMenuItem,
+      {
+        onSelect: () => insert(shape),
+        "data-testid": `slides-insert-${shape}`,
+        children: [
+          icon,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: label })
+        ]
+      },
+      shape
+    )) })
+  ] });
+}
+function InsertSlide({ after, always }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "group/insert relative flex h-8 items-center justify-center pl-11", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => chunkXTR26TNE_cjs.usePresentation.getState().addSlide(void 0, after),
+      className: ui.cn(
+        "flex items-center gap-1 rounded-full border border-dashed border-border bg-background px-2.5 py-0.5 text-xs text-muted-foreground transition-opacity hover:border-solid hover:text-foreground focus-visible:opacity-100",
+        !always && "opacity-0 group-hover/insert:opacity-100 pointer-coarse:opacity-100"
+      ),
+      "aria-label": `New slide after slide ${after + 1}`,
+      "data-testid": `slide-insert-${after}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "size-3" }),
+        "Slide"
+      ]
+    }
+  ) });
+}
+function SlidesEditor({
+  onPresent,
+  actions,
+  menuItems,
+  trayStart,
+  onChooseLogo,
+  onEditImage,
+  onCropImage
+}) {
+  const ids = chunkXTR26TNE_cjs.usePresentation((s) => s.slides.map((slide) => slide.id).join(" "));
+  const slideIds = react.useMemo(() => ids.split(" "), [ids]);
+  const current2 = chunkXTR26TNE_cjs.usePresentation((s) => s.current);
+  const captions = chunkXTR26TNE_cjs.usePresentation((s) => s.captions);
+  const [selection, setSelection] = react.useState(null);
+  const [view, setView] = react.useState(null);
+  const list = react.useRef(null);
+  const rootRef = react.useCallback((node) => {
+    if (node) setView(node.ownerDocument.defaultView);
+  }, []);
+  const onSelect = react.useCallback((index, clipId) => {
+    setSelection(clipId ? { index, clipId } : null);
+  }, []);
+  const keySelection = react.useMemo(
+    () => ({ clipId: selection?.clipId ?? null, clear: () => setSelection(null) }),
+    [selection]
+  );
+  chunk5LTIZ44D_cjs.usePresenterKeys(view, false, keySelection);
+  react.useEffect(() => {
+    const card = list.current?.querySelector(`[data-testid="slide-${current2}"]`);
+    card?.scrollIntoView?.({ block: "nearest", behavior: "smooth" });
+  }, [current2, slideIds.length]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: "relative flex h-full min-h-0 flex-col bg-muted/30",
+      "data-testid": "slides-editor",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: list, className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-[1100px] flex-col pb-6 pl-2 pr-6 pt-14", children: slideIds.map((id, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SlideCard,
+            {
+              index,
+              count: slideIds.length,
+              current: index === current2,
+              selected: selection?.index === index ? selection.clipId : null,
+              onSelect,
+              onEditImage,
+              onCropImage
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(InsertSlide, { after: index, always: index === slideIds.length - 1 })
+        ] }, id)) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "absolute right-4 top-2.5 z-40 flex items-center gap-0.5 rounded-full border border-border bg-background p-1 shadow-md",
+            "data-testid": "slides-toolbar",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(DesignMenu, { onChooseLogo }),
+              /* @__PURE__ */ jsxRuntime.jsx(InsertMenu, { onInserted: (index, boxId) => setSelection({ index, clipId: boxId }) }),
+              actions,
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Button,
+                  {
+                    type: "button",
+                    size: "icon",
+                    variant: "ghost",
+                    className: "size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11",
+                    title: "More",
+                    "aria-label": "More",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "size-4" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuContent, { align: "end", children: [
+                  menuItems,
+                  menuItems && /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuSeparator, {}),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.DropdownMenuCheckboxItem,
+                    {
+                      checked: captions,
+                      onCheckedChange: (on) => chunkXTR26TNE_cjs.usePresentation.getState().setCaptions(!!on),
+                      children: "Show source labels"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                ui.Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  className: "ml-0.5 h-8 rounded-full",
+                  onClick: () => {
+                    setSelection(null);
+                    onPresent();
+                  },
+                  title: "Present: the slides alone, in a window to share or put full screen",
+                  "data-testid": "presentation-present-button",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: "size-3.5" }),
+                    "Present"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ClipTray, { start: trayStart }),
+        /* @__PURE__ */ jsxRuntime.jsx(Notice, {})
+      ]
+    }
+  );
+}
+
+// src/presentation/draw-boxes.ts
+var LINE_HEIGHT = 1.2;
+function fontOf(run, themeFont, width) {
+  const size = chunkXTR26TNE_cjs.pointsToStage(run.size ?? chunkXTR26TNE_cjs.DEFAULT_TEXT_SIZE) * width;
+  const family = run.font ? `"${run.font}", ${themeFont}` : themeFont;
+  return `${run.italic ? "italic " : ""}${run.bold ? 700 : 400} ${size}px ${family}`;
+}
+function outline(context, box2, w, h) {
+  context.beginPath();
+  if (box2.shape === "ellipse") context.ellipse(w / 2, h / 2, w / 2, h / 2, 0, 0, Math.PI * 2);
+  else if (box2.shape === "roundRect") context.roundRect(0, 0, w, h, Math.min(w, h) / 6);
+  else context.rect(0, 0, w, h);
+}
+function drawBox(context, box2, width, height, themeFont) {
+  const { frame } = box2;
+  const w = frame.w * width;
+  const h = frame.h * height;
+  context.save();
+  context.translate(frame.x * width + w / 2, frame.y * height + h / 2);
+  if (box2.rotation) context.rotate(box2.rotation * Math.PI / 180);
+  context.translate(-w / 2, -h / 2);
+  const lineWidth = box2.line ? Math.max(1, chunkXTR26TNE_cjs.pointsToStage(box2.line.width) * width) : 0;
+  if (box2.shape === "line") {
+    context.strokeStyle = box2.line?.color ?? chunkXTR26TNE_cjs.TEXT_COLORS.body;
+    context.lineWidth = lineWidth || 1;
+    if (box2.line?.dash) context.setLineDash([lineWidth * 3, lineWidth * 2]);
+    context.beginPath();
+    context.moveTo(0, box2.flipV ? h : 0);
+    context.lineTo(w, box2.flipV ? 0 : h);
+    context.stroke();
+    context.restore();
+    return;
+  }
+  if (box2.fill) {
+    context.globalAlpha = box2.fillAlpha ?? 1;
+    context.fillStyle = box2.fill;
+    outline(context, box2, w, h);
+    context.fill();
+    context.globalAlpha = 1;
+  }
+  if (box2.line && lineWidth) {
+    context.strokeStyle = box2.line.color;
+    context.lineWidth = lineWidth;
+    if (box2.line.dash) context.setLineDash([lineWidth * 3, lineWidth * 2]);
+    outline(context, box2, w, h);
+    context.stroke();
+    context.setLineDash([]);
+  }
+  const inset = chunkXTR26TNE_cjs.pointsToStage(box2.inset ?? chunkXTR26TNE_cjs.DEFAULT_INSET) * width;
+  const room = w - 2 * inset;
+  context.textBaseline = "alphabetic";
+  const lines = [];
+  for (const paragraph of box2.paragraphs) {
+    const size = chunkXTR26TNE_cjs.pointsToStage(paragraph.runs[0]?.size ?? chunkXTR26TNE_cjs.DEFAULT_TEXT_SIZE) * width;
+    const indent = (paragraph.level ?? 0) * 0.5 * size + (paragraph.bullet ? size * 0.9 : 0);
+    const words = [];
+    for (const run of paragraph.runs) {
+      context.font = fontOf(run, themeFont, width);
+      for (const part of run.text.split(/(\s+)/).filter(Boolean)) {
+        words.push({ text: part, run, width: context.measureText(part).width });
+      }
+    }
+    let line = [];
+    let used = 0;
+    let first = true;
+    const flush = () => {
+      lines.push({
+        pieces: line,
+        size,
+        align: paragraph.align ?? "left",
+        indent,
+        ...first && paragraph.bullet ? { bullet: paragraph.runs[0] } : {}
+      });
+      first = false;
+      line = [];
+      used = 0;
+    };
+    for (const word of words) {
+      if (used + word.width > room - indent && line.length && word.text.trim()) flush();
+      if (!line.length && !word.text.trim()) continue;
+      line.push(word);
+      used += word.width;
+    }
+    flush();
+  }
+  const total = lines.reduce((sum, line) => sum + line.size * LINE_HEIGHT, 0);
+  const free = h - 2 * inset - total;
+  let y = inset + (box2.anchor === "middle" ? free / 2 : box2.anchor === "bottom" ? free : 0);
+  context.save();
+  context.beginPath();
+  context.rect(0, 0, w, h);
+  context.clip();
+  for (const line of lines) {
+    const lineWidth2 = line.pieces.reduce((sum, piece) => sum + piece.width, 0);
+    const space = room - line.indent;
+    let x = inset + line.indent + (line.align === "center" ? (space - lineWidth2) / 2 : line.align === "right" ? space - lineWidth2 : 0);
+    const baseline = y + line.size * (LINE_HEIGHT - 0.2);
+    if (line.bullet) {
+      context.font = fontOf(line.bullet, themeFont, width);
+      context.fillStyle = line.bullet.color ?? chunkXTR26TNE_cjs.TEXT_COLORS.body;
+      context.fillText("\u2022", inset + line.indent - line.size * 0.9, baseline);
+    }
+    for (const piece of line.pieces) {
+      context.font = fontOf(piece.run, themeFont, width);
+      context.fillStyle = piece.run.color ?? chunkXTR26TNE_cjs.TEXT_COLORS.body;
+      context.fillText(piece.text, x, baseline);
+      if (piece.run.underline) {
+        context.fillRect(x, baseline + line.size * 0.08, piece.width, Math.max(1, line.size * 0.05));
+      }
+      x += piece.width;
+    }
+    y += line.size * LINE_HEIGHT;
+  }
+  context.restore();
+  context.restore();
+}
+var boxWords = (box2) => box2.paragraphs.map(
+  (paragraph) => paragraph.runs.map((run) => run.text).join("").trim()
+).filter(Boolean);
+
+// src/presentation/render-slides.ts
+var SLIDE_PIXELS = { width: 1920, height: Math.round(1920 / chunkXTR26TNE_cjs.STAGE_ASPECT) };
+async function videoFrame(source, seconds) {
+  const video = document.createElement("video");
+  video.muted = true;
+  video.playsInline = true;
+  video.preload = "auto";
+  const url = URL.createObjectURL(source);
+  video.src = url;
+  const ready = new Promise((resolve) => {
+    const timer = setTimeout(() => resolve(false), 8e3);
+    video.addEventListener(
+      "loadedmetadata",
+      () => {
+        video.currentTime = Math.min(seconds, Math.max(0, (video.duration || 0) - 0.05));
+      },
+      { once: true }
+    );
+    video.addEventListener(
+      "seeked",
+      () => {
+        clearTimeout(timer);
+        resolve(true);
+      },
+      { once: true }
+    );
+    video.addEventListener("error", () => resolve(false), { once: true });
+  });
+  const ok = await ready;
+  URL.revokeObjectURL(url);
+  return ok ? video : null;
+}
+async function drawClip(context, clip, box2) {
+  const { rect } = clip;
+  if (clip.kind === "pdf") {
+    const image = await viewers.renderPdfRegion({
+      file: clip.source,
+      page: clip.page,
+      rect,
+      masks: clip.masks,
+      width: Math.ceil(box2.width)
+    });
+    context.drawImage(image, box2.x, box2.y, box2.width, box2.height);
+    viewers.closePdfRegionImage(image);
+    return;
+  }
+  if (clip.kind === "image") {
+    const bitmap = await createImageBitmap(clip.source);
+    context.drawImage(
+      bitmap,
+      rect.x * bitmap.width,
+      rect.y * bitmap.height,
+      rect.w * bitmap.width,
+      rect.h * bitmap.height,
+      box2.x,
+      box2.y,
+      box2.width,
+      box2.height
+    );
+    bitmap.close();
+    return;
+  }
+  const video = await videoFrame(clip.source, clip.start ?? 0);
+  if (video) {
+    const w = video.videoWidth;
+    const h = video.videoHeight;
+    context.drawImage(
+      video,
+      rect.x * w,
+      rect.y * h,
+      rect.w * w,
+      rect.h * h,
+      box2.x,
+      box2.y,
+      box2.width,
+      box2.height
+    );
+    return;
+  }
+  context.fillStyle = "#262626";
+  context.fillRect(box2.x, box2.y, box2.width, box2.height);
+  context.fillStyle = "#e5e5e5";
+  context.font = `${Math.round(box2.height * 0.12)}px sans-serif`;
+  context.textAlign = "center";
+  context.textBaseline = "middle";
+  context.fillText(
+    `\u25B6 ${clip.caption}`,
+    box2.x + box2.width / 2,
+    box2.y + box2.height / 2,
+    box2.width * 0.9
+  );
+}
+var CLIP_RADIUS = 6e-3;
+async function drawRoundedClip(context, clip, box2, stageWidth, shadow = true) {
+  const radius = stageWidth * CLIP_RADIUS;
+  const outline2 = () => {
+    context.beginPath();
+    context.roundRect(box2.x, box2.y, box2.width, box2.height, radius);
+  };
+  context.save();
+  if (shadow) {
+    context.shadowColor = "rgba(0,0,0,0.5)";
+    context.shadowBlur = stageWidth * 0.016;
+    context.shadowOffsetY = stageWidth * 5e-3;
+  }
+  context.fillStyle = "#fff";
+  outline2();
+  context.fill();
+  context.restore();
+  context.save();
+  outline2();
+  context.clip();
+  await drawClip(context, clip, box2);
+  if (clip.kind === "pdf") chunkXTR26TNE_cjs.paintClipEdge(context, box2, stageWidth);
+  context.restore();
+  context.save();
+  context.strokeStyle = "rgba(255,255,255,0.15)";
+  context.lineWidth = Math.max(1, stageWidth / 1280);
+  outline2();
+  context.stroke();
+  context.restore();
+}
+function wrapLines(context, text, width, max) {
+  const lines = [];
+  let line = "";
+  for (const word of text.split(/\s+/).filter(Boolean)) {
+    const next = line ? `${line} ${word}` : word;
+    if (context.measureText(next).width <= width || !line) {
+      line = next;
+      continue;
+    }
+    lines.push(line);
+    line = word;
+  }
+  if (line) lines.push(line);
+  if (lines.length <= max) return lines;
+  const kept = lines.slice(0, max);
+  let last = kept[max - 1];
+  while (last && context.measureText(`${last}\u2026`).width > width) last = last.slice(0, -1);
+  kept[max - 1] = `${last}\u2026`;
+  return kept;
+}
+function drawText(context, box2, lines, theme, width, height) {
+  const size = box2.size * width;
+  const lineHeight = size * box2.leading;
+  context.font = `${box2.weight} ${size}px ${chunkXTR26TNE_cjs.FONTS[theme.font].css}`;
+  context.textBaseline = "top";
+  const indent = box2.bullets ? size * 1.22 : 0;
+  const left = box2.x * width;
+  const boxWidth = box2.w * width - indent;
+  const gap = box2.bullets ? size * 0.3 : 0;
+  const room = box2.h * height;
+  const paragraphs = [];
+  let used = 0;
+  for (const paragraph of lines) {
+    const fits = Math.floor((room - used + 1e-6) / lineHeight);
+    if (fits < 1) break;
+    const wrapped = wrapLines(context, paragraph, boxWidth, fits);
+    paragraphs.push(wrapped);
+    used += wrapped.length * lineHeight + gap;
+  }
+  used = Math.max(0, used - gap);
+  const offset = box2.anchor === "bottom" ? room - used : box2.anchor === "middle" ? (room - used) / 2 : 0;
+  let y = box2.y * height + offset + (lineHeight - size) / 2;
+  for (const wrapped of paragraphs) {
+    if (box2.bullets) {
+      const square = size * 0.42;
+      context.fillStyle = chunkXTR26TNE_cjs.accentColor(theme.accent);
+      context.fillRect(left, y + size * 0.5 - square / 2, square, square);
+    }
+    context.fillStyle = chunkXTR26TNE_cjs.TEXT_COLORS[box2.tone];
+    context.textAlign = box2.align === "center" ? "center" : "left";
+    for (const line of wrapped) {
+      const x = box2.align === "center" ? left + box2.w * width / 2 : left + indent;
+      context.fillText(line, x, y);
+      y += lineHeight;
+    }
+    y += gap;
+  }
+}
+async function drawLogo(context, logo, box2, width, height) {
+  const image = await loadImage(logo);
+  const scale = Math.min(box2.w * width / image.width, box2.h * height / image.height);
+  const w = image.width * scale;
+  const h = image.height * scale;
+  const x = box2.x < 0.5 ? box2.x * width : (box2.x + box2.w) * width - w;
+  context.globalAlpha = 0.9;
+  context.drawImage(image, x, (box2.y + box2.h) * height - h, w, h);
+  context.globalAlpha = 1;
+}
+async function loadImage(file) {
+  const url = URL.createObjectURL(file);
+  try {
+    const image = new Image();
+    image.src = url;
+    await image.decode();
+    if (!image.naturalWidth) {
+      image.width = 600;
+      image.height = 200;
+    }
+    return image;
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+function slideWords(slide) {
+  const own = slide.layout === "free" ? [] : [slide.caption.trim(), ...chunkXTR26TNE_cjs.textLines(slide.points)];
+  return [...own, ...slide.boxes.flatMap(boxWords)].filter(Boolean);
+}
+function drawSlideText(context, slide, look, width, height) {
+  const geometry = chunkXTR26TNE_cjs.slideGeometry(slide, {
+    labels: look.labels,
+    logo: look.theme.logo?.corner ?? null
+  });
+  const title = slide.caption.trim();
+  if (title && geometry.title) {
+    drawText(context, geometry.title, [title], look.theme, width, height);
+    if (geometry.rule) {
+      context.fillStyle = chunkXTR26TNE_cjs.accentColor(look.theme.accent);
+      const r = geometry.rule;
+      context.fillRect(r.x * width, r.y * height, r.w * width, r.h * height);
+    }
+  }
+  if (geometry.text) {
+    drawText(context, geometry.text, chunkXTR26TNE_cjs.textLines(slide.points), look.theme, width, height);
+  }
+  return geometry;
+}
+async function renderSlide(slide, clips, look) {
+  const { width, height } = SLIDE_PIXELS;
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("Could not draw the slides");
+  if (slide.background) {
+    await chunkXTR26TNE_cjs.paintSlideBackground(context, width, height, slide.background, look.media);
+  } else {
+    chunkXTR26TNE_cjs.paintBackground(context, width, height, look.theme.background);
+  }
+  const geometry = drawSlideText(context, slide, look, width, height);
+  const text = slideWords(slide);
+  const font = chunkXTR26TNE_cjs.FONTS[look.theme.font].css;
+  const drawBoxes = (front) => {
+    for (const box2 of slide.boxes) {
+      if (!!box2.front === front) drawBox(context, box2, width, height, font);
+    }
+  };
+  drawBoxes(false);
+  for (const item of slide.items) {
+    const clip = clips.find((entry) => entry.id === item.clipId);
+    if (!clip) continue;
+    const box2 = {
+      x: item.frame.x * width,
+      y: item.frame.y * height,
+      width: item.frame.w * width,
+      height: chunkXTR26TNE_cjs.frameHeight(item.frame, clip.aspect) * height
+    };
+    if (clip.plain) {
+      await drawClip(context, clip, box2);
+      continue;
+    }
+    await drawRoundedClip(context, clip, box2, width);
+    const label = chunkXTR26TNE_cjs.clipLabel(clip, look.columnValues);
+    if (look.labels && label) {
+      context.fillStyle = chunkXTR26TNE_cjs.TEXT_COLORS.muted;
+      context.font = `${Math.round(width * 0.017)}px ${font}`;
+      context.textAlign = "left";
+      context.textBaseline = "top";
+      context.fillText(label, box2.x, box2.y + box2.height + width * 5e-3, box2.width);
+      text.push(label);
+    }
+  }
+  drawBoxes(true);
+  if (geometry.logo && look.logo) await drawLogo(context, look.logo, geometry.logo, width, height);
+  const image = await new Promise(
+    (resolve, reject) => canvas.toBlob(
+      (blob) => blob ? resolve(blob) : reject(new Error("Could not draw the slides")),
+      "image/jpeg",
+      0.92
+    )
+  );
+  canvas.width = canvas.height = 0;
+  return { image, text };
+}
+
+// src/presentation/export-boxes.ts
+var SLIDE_INCHES = { w: 13.333, h: 7.5 };
+var hex = (color) => color.replace("#", "").toUpperCase();
+function addBox(pptx, page, box2, themeFont) {
+  const { frame } = box2;
+  const place = {
+    x: frame.x * SLIDE_INCHES.w,
+    y: frame.y * SLIDE_INCHES.h,
+    w: Math.max(0.01, frame.w * SLIDE_INCHES.w),
+    h: frame.h * SLIDE_INCHES.h,
+    ...box2.rotation ? { rotate: box2.rotation } : {},
+    ...box2.flipH ? { flipH: true } : {},
+    ...box2.flipV ? { flipV: true } : {}
+  };
+  const line = box2.line ? {
+    color: hex(box2.line.color),
+    width: box2.line.width,
+    ...box2.line.dash ? { dashType: "dash" } : {}
+  } : void 0;
+  if (box2.shape === "line") {
+    page.addShape(pptx.ShapeType.line, {
+      ...place,
+      line: line ?? { color: hex(chunkXTR26TNE_cjs.TEXT_COLORS.body), width: 1 }
+    });
+    return;
+  }
+  const shape = box2.shape === "ellipse" ? pptx.ShapeType.ellipse : box2.shape === "roundRect" ? pptx.ShapeType.roundRect : pptx.ShapeType.rect;
+  const fill = box2.fill ? {
+    color: hex(box2.fill),
+    ...box2.fillAlpha !== void 0 ? { transparency: Math.round((1 - box2.fillAlpha) * 100) } : {}
+  } : void 0;
+  const runs = [];
+  box2.paragraphs.forEach((paragraph, p) => {
+    const last = p === box2.paragraphs.length - 1;
+    const paragraphRuns = paragraph.runs.length ? paragraph.runs : [{ text: "" }];
+    paragraphRuns.forEach((run, r) => {
+      runs.push({
+        text: run.text,
+        options: {
+          fontSize: run.size ?? chunkXTR26TNE_cjs.DEFAULT_TEXT_SIZE,
+          fontFace: run.font ?? themeFont,
+          color: hex(run.color ?? chunkXTR26TNE_cjs.TEXT_COLORS.body),
+          ...run.bold ? { bold: true } : {},
+          ...run.italic ? { italic: true } : {},
+          ...run.underline ? { underline: { style: "sng" } } : {},
+          align: paragraph.align ?? "left",
+          ...paragraph.level ? { indentLevel: paragraph.level } : {},
+          ...paragraph.bullet && r === 0 ? { bullet: true } : {},
+          ...r === paragraphRuns.length - 1 && !last ? { breakLine: true } : {}
+        }
+      });
+    });
+  });
+  const text = runs.some((run) => run.text);
+  if (!text && box2.shape === "text") return;
+  page.addText(text ? runs : "", {
+    ...place,
+    shape,
+    ...fill ? { fill } : {},
+    ...line ? { line } : {},
+    // Its part in the slide (its title, its body), kept by name: read back when imported.
+    ...box2.role ? { objectName: `ARBI ${box2.role}` } : {},
+    valign: box2.anchor ?? "top",
+    margin: box2.inset ?? chunkXTR26TNE_cjs.DEFAULT_INSET,
+    lineSpacingMultiple: 1,
+    fit: "none"
+  });
+}
+
+// src/presentation/export-pptx.ts
+var SLIDE_INCHES2 = { w: 13.333, h: 7.5 };
+var toPoints = (size) => Math.round(size * SLIDE_INCHES2.w * 72 * 10) / 10;
+var hex2 = (color) => color.replace("#", "").toUpperCase();
+async function canvasImage(width, height, draw) {
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, Math.round(width));
+  canvas.height = Math.max(1, Math.round(height));
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("Could not draw the slides");
+  await draw(context);
+  const url = canvas.toDataURL("image/png");
+  canvas.width = canvas.height = 0;
+  return url.replace(/^data:/, "");
+}
+var box = (b) => ({
+  x: b.x * SLIDE_INCHES2.w,
+  y: b.y * SLIDE_INCHES2.h,
+  w: b.w * SLIDE_INCHES2.w,
+  h: b.h * SLIDE_INCHES2.h
+});
+function textOptions(text, look) {
+  return {
+    ...box(text),
+    fontFace: chunkXTR26TNE_cjs.FONTS[look.theme.font].pptx,
+    fontSize: toPoints(text.size),
+    bold: text.weight >= 600,
+    color: hex2(chunkXTR26TNE_cjs.TEXT_COLORS[text.tone]),
+    align: text.align,
+    valign: text.anchor ?? "top",
+    lineSpacingMultiple: text.leading,
+    margin: 0
+  };
+}
+async function buildPptx(deck, look) {
+  const { default: PptxGenJS } = await import('pptxgenjs');
+  const pptx = new PptxGenJS();
+  pptx.layout = "LAYOUT_WIDE";
+  pptx.title = deck.title;
+  pptx.theme = {
+    headFontFace: chunkXTR26TNE_cjs.FONTS[look.theme.font].pptx,
+    bodyFontFace: chunkXTR26TNE_cjs.FONTS[look.theme.font].pptx
+  };
+  const { width, height } = SLIDE_PIXELS;
+  const background = await canvasImage(
+    width,
+    height,
+    (context) => chunkXTR26TNE_cjs.paintBackground(context, width, height, look.theme.background)
+  );
+  const logo = look.logo ? await loadImage(look.logo) : null;
+  const logoData = logo ? await canvasImage(logo.width, logo.height, (context) => context.drawImage(logo, 0, 0)) : null;
+  const themeFont = chunkXTR26TNE_cjs.FONTS[look.theme.font].pptx;
+  for (const slide of deck.slides) {
+    const page = pptx.addSlide();
+    if (slide.background?.color && !slide.background.gradient && !slide.background.image) {
+      page.background = { color: hex2(slide.background.color) };
+    } else if (slide.background) {
+      const own = slide.background;
+      page.background = {
+        data: await canvasImage(
+          width,
+          height,
+          (context) => chunkXTR26TNE_cjs.paintSlideBackground(context, width, height, own, look.media)
+        )
+      };
+    } else {
+      page.background = { data: background };
+    }
+    if (slide.notes?.trim()) page.addNotes(slide.notes);
+    const geometry = chunkXTR26TNE_cjs.slideGeometry(slide, {
+      labels: look.labels,
+      logo: look.theme.logo?.corner ?? null
+    });
+    for (const shape of slide.boxes) if (!shape.front) addBox(pptx, page, shape, themeFont);
+    for (const item of slide.items) {
+      const clip = deck.clips.find((entry) => entry.id === item.clipId);
+      if (!clip) continue;
+      const frame = { ...item.frame, h: chunkXTR26TNE_cjs.frameHeight(item.frame, clip.aspect) };
+      if (clip.plain) {
+        const source = clip.kind === "image" ? await createImageBitmap(clip.source) : null;
+        const scale = source ? Math.min(1, 2400 / Math.max(1, clip.rect.w * source.width)) : 1.5;
+        const pixels2 = source ? { w: clip.rect.w * source.width * scale, h: clip.rect.h * source.height * scale } : { w: frame.w * width * 1.5, h: frame.h * height * 1.5 };
+        source?.close();
+        const data2 = await canvasImage(
+          pixels2.w,
+          pixels2.h,
+          (context) => drawClip(context, clip, { x: 0, y: 0, width: pixels2.w, height: pixels2.h })
+        );
+        page.addImage({ data: data2, ...box(frame), altText: clip.caption || clip.fileName });
+        continue;
+      }
+      const pixels = { w: frame.w * width * 1.5, h: frame.h * height * 1.5 };
+      const data = await canvasImage(
+        pixels.w,
+        pixels.h,
+        (context) => drawRoundedClip(
+          context,
+          clip,
+          { x: 0, y: 0, width: pixels.w, height: pixels.h },
+          width * 1.5,
+          false
+        )
+      );
+      page.addImage({
+        data,
+        ...box(frame),
+        altText: clip.caption,
+        shadow: { type: "outer", blur: 10, offset: 3, angle: 90, color: "000000", opacity: 0.45 }
+      });
+      const label = chunkXTR26TNE_cjs.clipLabel(clip, look.columnValues);
+      if (look.labels && label) {
+        page.addText(label, {
+          ...box({ x: frame.x, y: frame.y + frame.h + 8e-3, w: frame.w, h: 0.045 }),
+          fontFace: chunkXTR26TNE_cjs.FONTS[look.theme.font].pptx,
+          fontSize: toPoints(0.017),
+          color: hex2(chunkXTR26TNE_cjs.TEXT_COLORS.muted),
+          margin: 0,
+          valign: "top",
+          fit: "shrink"
+        });
+      }
+    }
+    const title = slide.caption.trim();
+    if (title && geometry.title) {
+      page.addText(title, textOptions(geometry.title, look));
+      if (geometry.rule) {
+        page.addShape(pptx.ShapeType.rect, {
+          ...box(geometry.rule),
+          fill: { color: hex2(chunkXTR26TNE_cjs.accentColor(look.theme.accent)) },
+          line: { color: hex2(chunkXTR26TNE_cjs.accentColor(look.theme.accent)), width: 0 }
+        });
+      }
+    }
+    const lines = chunkXTR26TNE_cjs.textLines(slide.points);
+    if (geometry.text && lines.length) {
+      const text = geometry.text;
+      page.addText(
+        lines.map((line) => ({
+          text: line,
+          options: {
+            breakLine: true,
+            ...text.bullets ? { bullet: { characterCode: "25A0", indent: toPoints(text.size) * 1.2 } } : {}
+          }
+        })),
+        {
+          ...textOptions(text, look),
+          ...text.bullets ? { paraSpaceAfter: toPoints(text.size) * 0.45 } : {}
+        }
+      );
+    }
+    for (const shape of slide.boxes) if (shape.front) addBox(pptx, page, shape, themeFont);
+    if (geometry.logo && logo && logoData) {
+      const area = box(geometry.logo);
+      const scale = Math.min(area.w / logo.width, area.h / logo.height);
+      const w = logo.width * scale;
+      const h = logo.height * scale;
+      page.addImage({
+        data: logoData,
+        x: geometry.logo.x < 0.5 ? area.x : area.x + area.w - w,
+        y: area.y + area.h - h,
+        w,
+        h,
+        transparency: 10
+      });
+    }
+  }
+  const deckFile = await pptx.write({ outputType: "blob" });
+  return accentBullets(deckFile, chunkXTR26TNE_cjs.accentColor(look.theme.accent));
+}
+async function accentBullets(deck, accent) {
+  const { default: JSZip } = await import('jszip');
+  const zip = await JSZip.loadAsync(deck);
+  const slides = Object.keys(zip.files).filter((name) => /^ppt\/slides\/slide\d+\.xml$/.test(name));
+  for (const name of slides) {
+    const xml = await zip.file(name).async("string");
+    zip.file(
+      name,
+      xml.replaceAll(
+        '<a:buSzPct val="100000"/><a:buChar',
+        `<a:buClr><a:srgbClr val="${hex2(accent)}"/></a:buClr><a:buSzPct val="70000"/><a:buChar`
+      )
+    );
+  }
+  return zip.generateAsync({ type: "blob", mimeType: deck.type || void 0 });
+}
+
+// src/presentation/pptx-data.ts
+var PRESENTATION_XML_NS = "urn:arbi:presentation:v1";
+var RELS_NS = "http://schemas.openxmlformats.org/package/2006/relationships";
+var CUSTOM_XML_REL = "http://schemas.openxmlformats.org/officeDocument/2006/relationships/customXml";
+var CUSTOM_XML_PROPS_REL = "http://schemas.openxmlformats.org/officeDocument/2006/relationships/customXmlProps";
+var CUSTOM_XML_PROPS_TYPE = "application/vnd.openxmlformats-officedocument.customXmlProperties+xml";
+var escapeXml = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var unescapeXml = (text) => text.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&apos;/g, "'").replace(/&amp;/g, "&");
+var ROOT = /<arbiPresentation\b[^>]*xmlns="urn:arbi:presentation:v1"[^>]*>([\s\S]*?)<\/arbiPresentation>/;
+async function loadZip(file) {
+  const { default: JSZip } = await import('jszip');
+  return JSZip.loadAsync(file instanceof Blob ? await file.arrayBuffer() : file);
+}
+var isZipBytes = (bytes) => bytes[0] === 80 && bytes[1] === 75 && bytes[2] === 3 && bytes[3] === 4;
+async function readPptxPresentationData(file) {
+  const zip = await loadZip(file);
+  for (const name of Object.keys(zip.files)) {
+    if (!/^customXml\/item\d+\.xml$/.test(name)) continue;
+    const match = ROOT.exec(await zip.file(name).async("string"));
+    if (match) return unescapeXml(match[1]);
+  }
+  return null;
+}
+async function writePptxPresentationData(file, json) {
+  const zip = await loadZip(file);
+  let index = 1;
+  for (const name of Object.keys(zip.files)) {
+    const match = /^customXml\/item(\d+)\.xml$/.exec(name);
+    if (!match) continue;
+    if (ROOT.test(await zip.file(name).async("string"))) {
+      index = Number(match[1]);
+      break;
+    }
+    index = Math.max(index, Number(match[1]) + 1);
+  }
+  const item = `customXml/item${index}.xml`;
+  const props = `customXml/itemProps${index}.xml`;
+  zip.file(
+    item,
+    `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<arbiPresentation xmlns="${PRESENTATION_XML_NS}">${escapeXml(json)}</arbiPresentation>`
+  );
+  zip.file(
+    props,
+    `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<ds:datastoreItem ds:itemID="{8B1C2E5A-7D40-4E9B-A1F3-0C6D2B9E4A71}" xmlns:ds="http://schemas.openxmlformats.org/officeDocument/2006/customXml"><ds:schemaRefs><ds:schemaRef ds:uri="${PRESENTATION_XML_NS}"/></ds:schemaRefs></ds:datastoreItem>`
+  );
+  zip.file(
+    `customXml/_rels/item${index}.xml.rels`,
+    `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<Relationships xmlns="${RELS_NS}"><Relationship Id="rId1" Type="${CUSTOM_XML_PROPS_REL}" Target="itemProps${index}.xml"/></Relationships>`
+  );
+  const typesName = "[Content_Types].xml";
+  let types = await zip.file(typesName).async("string");
+  if (!types.includes(`PartName="/${props}"`)) {
+    types = types.replace(
+      "</Types>",
+      `<Override PartName="/${props}" ContentType="${CUSTOM_XML_PROPS_TYPE}"/></Types>`
+    );
+    zip.file(typesName, types);
+  }
+  const relsName = "ppt/_rels/presentation.xml.rels";
+  let rels = await zip.file(relsName).async("string");
+  if (!rels.includes(`Target="../${item}"`)) {
+    rels = rels.replace(
+      "</Relationships>",
+      `<Relationship Id="rIdArbiPresentation" Type="${CUSTOM_XML_REL}" Target="../${item}"/></Relationships>`
+    );
+    zip.file(relsName, rels);
+  }
+  return zip.generateAsync({
+    type: "blob",
+    mimeType: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+    compression: "DEFLATE"
+  });
+}
+
+// src/presentation/pptx-xml.ts
+var NS = {
+  r: "http://schemas.openxmlformats.org/officeDocument/2006/relationships"
+};
+var EMU_PER_POINT = 12700;
+function kids(element, name) {
+  if (!element) return [];
+  const found = [];
+  for (let child = element.firstElementChild; child; child = child.nextElementSibling) {
+    if (!name || child.localName === name) found.push(child);
+  }
+  return found;
+}
+function kid(element, name) {
+  if (!element) return null;
+  for (let child = element.firstElementChild; child; child = child.nextElementSibling) {
+    if (child.localName === name) return child;
+  }
+  return null;
+}
+function path(element, ...names) {
+  let at2 = element ?? null;
+  for (const name of names) at2 = kid(at2, name);
+  return at2;
+}
+function numAttr(element, name, fallback = 0) {
+  const value = element?.getAttribute(name);
+  if (value === null || value === void 0 || value === "") return fallback;
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+var relAttr = (element, name) => element?.getAttributeNS(NS.r, name) ?? element?.getAttribute(`r:${name}`) ?? null;
+var boolAttr = (element, name) => {
+  const value = element?.getAttribute(name);
+  if (value === null || value === void 0) return void 0;
+  return value === "1" || value === "true";
+};
+var Package = class {
+  constructor(zip) {
+    this.zip = zip;
+  }
+  zip;
+  parsed = /* @__PURE__ */ new Map();
+  rels = /* @__PURE__ */ new Map();
+  async xml(part) {
+    if (this.parsed.has(part)) return this.parsed.get(part) ?? null;
+    const file = this.zip.file(part);
+    const text = file ? await file.async("string") : null;
+    const doc = text ? new DOMParser().parseFromString(text, "application/xml") : null;
+    const ok = doc && !doc.getElementsByTagName("parsererror").length ? doc : null;
+    this.parsed.set(part, ok);
+    return ok;
+  }
+  async bytes(part) {
+    const file = this.zip.file(part);
+    return file ? file.async("uint8array") : null;
+  }
+  /** A part's relationships by id, their targets resolved to part names. */
+  async relationships(part) {
+    const cached = this.rels.get(part);
+    if (cached) return cached;
+    const slash = part.lastIndexOf("/");
+    const dir = part.slice(0, slash + 1);
+    const relsPart = `${dir}_rels/${part.slice(slash + 1)}.rels`;
+    const doc = await this.xml(relsPart);
+    const map = /* @__PURE__ */ new Map();
+    for (const rel of kids(doc?.documentElement, "Relationship")) {
+      const id = rel.getAttribute("Id");
+      const target = rel.getAttribute("Target") ?? "";
+      const external = rel.getAttribute("TargetMode") === "External";
+      if (!id) continue;
+      map.set(id, {
+        target: external ? target : resolvePart(dir, target),
+        type: rel.getAttribute("Type") ?? "",
+        external
+      });
+    }
+    this.rels.set(part, map);
+    return map;
+  }
+  /** The first relationship of `part` whose type ends with `type` ("/slideLayout"). */
+  async related(part, type) {
+    for (const rel of (await this.relationships(part)).values()) {
+      if (rel.type.endsWith(type) && !rel.external) return rel.target;
+    }
+    return null;
+  }
+};
+function resolvePart(dir, target) {
+  if (target.startsWith("/")) return target.slice(1);
+  const parts = (dir + target).split("/");
+  const out = [];
+  for (const part of parts) {
+    if (part === "..") out.pop();
+    else if (part !== "." && part !== "") out.push(part);
+  }
+  return out.join("/");
+}
+var PRESET_COLORS = {
+  black: "000000",
+  white: "ffffff",
+  red: "ff0000",
+  green: "008000",
+  blue: "0000ff",
+  yellow: "ffff00",
+  gray: "808080",
+  grey: "808080",
+  darkGray: "a9a9a9",
+  lightGray: "d3d3d3",
+  orange: "ffa500",
+  navy: "000080"
+};
+var toHex = (r, g, b) => `#${[r, g, b].map(
+  (v) => Math.round(Math.min(255, Math.max(0, v))).toString(16).padStart(2, "0")
+).join("")}`;
+function rgbToHsl(r, g, b) {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) return [0, 0, l];
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h = max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+  h /= 6;
+  return [h, s, l];
+}
+function hslToRgb(h, s, l) {
+  if (s === 0) return [l * 255, l * 255, l * 255];
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+  const hue = (t) => {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  };
+  return [hue(h + 1 / 3) * 255, hue(h) * 255, hue(h - 1 / 3) * 255];
+}
+function readColor(element, theme, placeholder) {
+  if (!element) return null;
+  let hex3 = null;
+  switch (element.localName) {
+    case "srgbClr":
+      hex3 = element.getAttribute("val");
+      break;
+    case "sysClr":
+      hex3 = element.getAttribute("lastClr") ?? (element.getAttribute("val") === "window" ? "ffffff" : "000000");
+      break;
+    case "prstClr":
+      hex3 = PRESET_COLORS[element.getAttribute("val") ?? ""] ?? "000000";
+      break;
+    case "scrgbClr": {
+      const c = (name) => Math.round(numAttr(element, name) / 1e5 * 255);
+      hex3 = toHex(c("r"), c("g"), c("b")).slice(1);
+      break;
+    }
+    case "schemeClr": {
+      const name = element.getAttribute("val") ?? "";
+      if (name === "phClr") {
+        hex3 = "000000";
+        break;
+      }
+      const mapped = theme.map[name] ?? name;
+      hex3 = theme.scheme[mapped] ?? theme.scheme[name] ?? null;
+      break;
+    }
+    default:
+      return null;
+  }
+  if (!hex3 || !/^[0-9a-f]{6}$/i.test(hex3)) return null;
+  let r = parseInt(hex3.slice(0, 2), 16);
+  let g = parseInt(hex3.slice(2, 4), 16);
+  let b = parseInt(hex3.slice(4, 6), 16);
+  let alpha = 1;
+  for (const mod of kids(element)) {
+    const val = numAttr(mod, "val") / 1e5;
+    switch (mod.localName) {
+      case "alpha":
+        alpha = val;
+        break;
+      case "lumMod":
+      case "lumOff":
+      case "satMod": {
+        const [h, s, l] = rgbToHsl(r, g, b);
+        const next = mod.localName === "lumMod" ? hslToRgb(h, s, Math.min(1, l * val)) : mod.localName === "lumOff" ? hslToRgb(h, s, Math.min(1, Math.max(0, l + val))) : hslToRgb(h, Math.min(1, s * val), l);
+        [r, g, b] = next;
+        break;
+      }
+      case "tint":
+        r = 255 - (255 - r) * val;
+        g = 255 - (255 - g) * val;
+        b = 255 - (255 - b) * val;
+        break;
+      case "shade":
+        r *= val;
+        g *= val;
+        b *= val;
+        break;
+    }
+  }
+  return { hex: toHex(r, g, b), alpha };
+}
+var COLOR_NAMES = ["srgbClr", "schemeClr", "sysClr", "prstClr", "scrgbClr"];
+function colorIn(element, theme, placeholder) {
+  for (const child of kids(element)) {
+    if (COLOR_NAMES.includes(child.localName)) return readColor(child, theme);
+  }
+  return null;
+}
+function readFill(element, theme, placeholder) {
+  for (const child of kids(element)) {
+    switch (child.localName) {
+      case "noFill":
+        return { kind: "none" };
+      case "solidFill": {
+        const color = colorIn(child, theme);
+        return color ? { kind: "solid", color } : null;
+      }
+      case "gradFill": {
+        const stops = kids(kid(child, "gsLst"), "gs").map((gs) => ({ pos: numAttr(gs, "pos"), color: colorIn(gs, theme) })).filter((stop) => stop.color !== null).sort((x, y) => x.pos - y.pos);
+        if (!stops.length) return null;
+        const ang = numAttr(kid(child, "lin"), "ang") / 6e4;
+        return {
+          kind: "gradient",
+          from: stops[0].color,
+          to: stops[stops.length - 1].color,
+          angle: (ang + 90) % 360
+        };
+      }
+      case "pattFill": {
+        const color = colorIn(kid(child, "fgClr"), theme);
+        return color ? { kind: "solid", color } : null;
+      }
+      case "blipFill": {
+        const blip = kid(child, "blip");
+        const embed = relAttr(blip, "embed");
+        return embed ? { kind: "image", embed, srcRect: kid(child, "srcRect") } : null;
+      }
+    }
+  }
+  return null;
+}
+function readLine(ln, theme, placeholder) {
+  if (!ln) return void 0;
+  const fill = readFill(ln, theme);
+  if (fill?.kind === "none") return null;
+  const color = fill?.kind === "solid" ? fill.color : fill?.kind === "gradient" ? fill.from : null;
+  if (!color) return void 0;
+  const dash = kid(ln, "prstDash")?.getAttribute("val");
+  return {
+    color,
+    width: ln.hasAttribute("w") ? numAttr(ln, "w") / EMU_PER_POINT : 0.75,
+    dash: !!dash && dash !== "solid"
+  };
+}
+async function readTheme(pkg, master) {
+  const themePart = await pkg.related(master, "/theme");
+  const doc = themePart ? await pkg.xml(themePart) : null;
+  const elements = path(doc?.documentElement, "themeElements");
+  const scheme = {};
+  const bare = {
+    scheme,
+    map: {}};
+  for (const entry of kids(kid(elements, "clrScheme"))) {
+    const color = colorIn(entry, bare);
+    if (color) scheme[entry.localName] = color.hex.slice(1);
+  }
+  const fonts = kid(elements, "fontScheme");
+  const typeface = (name) => path(fonts, name, "latin")?.getAttribute("typeface") || "Calibri";
+  const masterDoc = await pkg.xml(master);
+  const clrMap = kid(masterDoc?.documentElement, "clrMap");
+  const map = {};
+  for (const attr of Array.from(clrMap?.attributes ?? [])) map[attr.name] = attr.value;
+  const lineWidths = kids(path(elements, "fmtScheme", "lnStyleLst"), "ln").map(
+    (ln) => numAttr(ln, "w", 9525) / EMU_PER_POINT
+  );
+  return {
+    scheme,
+    map,
+    majorFont: typeface("majorFont"),
+    minorFont: typeface("minorFont"),
+    lineWidths
+  };
+}
+function typefaceOf(name, theme) {
+  if (!name) return void 0;
+  if (name.startsWith("+mj")) return theme.majorFont;
+  if (name.startsWith("+mn")) return theme.minorFont;
+  return name;
+}
+async function mediaDataUrl(pkg, part) {
+  const ext = part.split(".").pop()?.toLowerCase() ?? "";
+  const mime = ext === "png" ? "image/png" : ext === "jpg" || ext === "jpeg" ? "image/jpeg" : ext === "gif" ? "image/gif" : ext === "svg" ? "image/svg+xml" : ext === "webp" ? "image/webp" : ext === "bmp" ? "image/bmp" : null;
+  if (!mime) return null;
+  const bytes = await pkg.bytes(part);
+  if (!bytes) return null;
+  let binary = "";
+  for (let i = 0; i < bytes.length; i += 32768) {
+    binary += String.fromCharCode(...bytes.subarray(i, i + 32768));
+  }
+  return `data:${mime};base64,${btoa(binary)}`;
+}
+
+// src/presentation/import-pptx.ts
+var IDENTITY = { sx: 1, sy: 1, ox: 0, oy: 0 };
+var TITLE_TYPES = /* @__PURE__ */ new Set(["title", "ctrTitle"]);
+var FOOTER_TYPES = /* @__PURE__ */ new Set(["dt", "ftr", "sldNum", "hdr"]);
+function placeholderOf(shape) {
+  const nv = kids(shape).find((child) => child.localName.startsWith("nv"));
+  const ph = path(nv, "nvPr", "ph");
+  if (!ph) return null;
+  return { type: ph.getAttribute("type") ?? "body", idx: ph.getAttribute("idx") };
+}
+function findPlaceholder(tree, ph, master) {
+  const shapes = kids(tree).filter((child) => child.localName === "sp");
+  const typeOf = (type) => master ? TITLE_TYPES.has(type) ? "title" : FOOTER_TYPES.has(type) ? type : "body" : type;
+  if (!master && ph.idx !== null) {
+    const byIdx = shapes.find((shape) => placeholderOf(shape)?.idx === ph.idx);
+    if (byIdx) return byIdx;
+  }
+  const wanted = typeOf(ph.type);
+  return shapes.find((shape) => {
+    const other = placeholderOf(shape);
+    return other !== null && typeOf(other.type) === wanted;
+  }) ?? null;
+}
+var ALIGN = { l: "left", ctr: "center", r: "right", just: "justify" };
+function readRunProps(rPr, theme) {
+  if (!rPr) return {};
+  const style = {};
+  if (rPr.hasAttribute("sz")) style.size = numAttr(rPr, "sz") / 100;
+  const b = boolAttr(rPr, "b");
+  if (b !== void 0) style.bold = b;
+  const i = boolAttr(rPr, "i");
+  if (i !== void 0) style.italic = i;
+  const u = rPr.getAttribute("u");
+  if (u) style.underline = u !== "none";
+  const fill = readFill(rPr, theme);
+  if (fill?.kind === "solid") style.color = fill.color;
+  else if (fill?.kind === "gradient") style.color = fill.from;
+  const font = typefaceOf(kid(rPr, "latin")?.getAttribute("typeface"), theme);
+  if (font) style.font = font;
+  return style;
+}
+function readLevel(pPr, theme) {
+  if (!pPr) return {};
+  const style = { ...readRunProps(kid(pPr, "defRPr"), theme) };
+  const algn = pPr.getAttribute("algn");
+  if (algn && ALIGN[algn]) style.align = ALIGN[algn];
+  if (kid(pPr, "buNone")) style.bullet = false;
+  else if (kid(pPr, "buChar") || kid(pPr, "buAutoNum") || kid(pPr, "buBlip")) style.bullet = true;
+  return style;
+}
+function merge(styles) {
+  const out = {};
+  for (const style of styles) {
+    for (const key of Object.keys(style)) {
+      if (out[key] === void 0 && style[key] !== void 0) {
+        out[key] = style[key];
+      }
+    }
+  }
+  return out;
+}
+function levelStyle(chain, level, theme) {
+  return merge(chain.map((list) => readLevel(kid(list, `lvl${level + 1}pPr`), theme)));
+}
+var note = (deck, text) => deck.notes.set(text, (deck.notes.get(text) ?? 0) + 1);
+function hash(text) {
+  let h = 2166136261;
+  for (let i = 0; i < text.length; i++) {
+    h ^= text.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return (h >>> 0).toString(36);
+}
+async function mediaKey(deck, part) {
+  if (deck.mediaKeys.has(part)) return deck.mediaKeys.get(part) ?? null;
+  const url = await mediaDataUrl(deck.pkg, part);
+  const key = url ? `m${hash(url)}` : null;
+  if (url && key) deck.media[key] = url;
+  deck.mediaKeys.set(part, key);
+  return key;
+}
+function areaOf(xfrm, transform) {
+  const off = kid(xfrm, "off");
+  const ext = kid(xfrm, "ext");
+  if (!off || !ext) return null;
+  return {
+    x: transform.ox + numAttr(off, "x") * transform.sx,
+    y: transform.oy + numAttr(off, "y") * transform.sy,
+    w: numAttr(ext, "cx") * transform.sx,
+    h: numAttr(ext, "cy") * transform.sy,
+    rotation: numAttr(xfrm, "rot") / 6e4,
+    flipH: boolAttr(xfrm, "flipH") === true,
+    flipV: boolAttr(xfrm, "flipV") === true
+  };
+}
+function stageFrame(deck, area) {
+  const { cx, cy } = deck.slideSize;
+  const { place } = deck;
+  return {
+    x: place.x + area.x / cx * place.w,
+    y: place.y + area.y / cy * place.h,
+    w: area.w / cx * place.w,
+    h: area.h / cy * place.h
+  };
+}
+var hexOf = (color) => color.hex;
+function renditionClip(deck, part, area, what) {
+  const { documentId, version, fileName } = deck.options;
+  if (!documentId || part.page === null) {
+    note(deck, `${what} could not be shown`);
+    return null;
+  }
+  const { cx, cy } = deck.slideSize;
+  const clamp = (v) => Math.min(1, Math.max(0, v));
+  const x = clamp(area.x / cx);
+  const y = clamp(area.y / cy);
+  const rect = { x, y, w: clamp((area.x + area.w) / cx) - x, h: clamp((area.y + area.h) / cy) - y };
+  if (rect.w <= 0 || rect.h <= 0) return null;
+  const frame = stageFrame(deck, area);
+  note(deck, `${what} shown as a picture`);
+  deck.clips.push({
+    kind: "pdf",
+    documentId,
+    ...version !== void 0 ? { version } : {},
+    fileName: fileName ?? "Presentation.pptx",
+    page: part.page,
+    rect,
+    aspect: frame.w * chunkXTR26TNE_cjs.STAGE_ASPECT / Math.max(frame.h, 1e-6),
+    caption: "",
+    plain: true
+  });
+  return deck.clips.length - 1;
+}
+function readParagraphs(body, chain, deck, defaults, fontScale, fallback = []) {
+  const { theme } = deck;
+  const paragraphs = [];
+  for (const p of kids(body, "p")) {
+    const pPr = kid(p, "pPr");
+    const level = Math.min(8, numAttr(pPr, "lvl"));
+    const own = readLevel(pPr, theme);
+    const style = merge([
+      own,
+      levelStyle(chain, level, theme),
+      defaults.color ? { color: defaults.color } : {},
+      levelStyle(fallback, level, theme)
+    ]);
+    const runStyle2 = (rPr) => {
+      const s = merge([readRunProps(rPr, theme), style]);
+      const color = s.color ?? defaults.base;
+      return {
+        text: "",
+        size: Math.round((s.size ?? 18) * fontScale * deck.pointScale * 10) / 10,
+        ...s.bold ? { bold: true } : {},
+        ...s.italic ? { italic: true } : {},
+        ...s.underline ? { underline: true } : {},
+        ...color ? { color: hexOf(color) } : {},
+        font: s.font ?? theme.minorFont
+      };
+    };
+    const shape = (runs2) => ({
+      runs: runs2,
+      ...style.align && style.align !== "left" ? { align: style.align } : {},
+      ...level ? { level } : {},
+      ...style.bullet && runs2.some((run) => run.text.trim()) ? { bullet: true } : {}
+    });
+    let runs = [];
+    for (const child of kids(p)) {
+      if (child.localName === "r" || child.localName === "fld") {
+        const text = kid(child, "t")?.textContent ?? "";
+        runs.push({ ...runStyle2(kid(child, "rPr")), text });
+      } else if (child.localName === "br") {
+        paragraphs.push(shape(runs.length ? runs : [{ ...runStyle2(kid(child, "rPr")), text: "" }]));
+        runs = [];
+      }
+    }
+    if (!runs.length) runs = [{ ...runStyle2(kid(p, "endParaRPr")), text: "" }];
+    paragraphs.push(shape(runs));
+  }
+  while (paragraphs.length > 1 && !paragraphs[paragraphs.length - 1].runs.some((run) => run.text.trim())) {
+    paragraphs.pop();
+  }
+  return paragraphs;
+}
+var SHAPES = {
+  rect: "rect",
+  flowChartProcess: "rect",
+  snip1Rect: "rect",
+  roundRect: "roundRect",
+  round1Rect: "roundRect",
+  round2SameRect: "roundRect",
+  flowChartAlternateProcess: "roundRect",
+  ellipse: "ellipse",
+  flowChartConnector: "ellipse",
+  line: "line",
+  straightConnector1: "line"
+};
+async function readShape(shape, transform, deck, part, inherit, built) {
+  const { theme } = deck;
+  const name = shape.localName;
+  if (name === "AlternateContent") {
+    const choice = kid(shape, "Fallback") ?? kid(shape, "Choice");
+    for (const child of kids(choice)) await readShape(child, transform, deck, part, inherit, built);
+    return;
+  }
+  if (name === "grpSp") {
+    const xfrm2 = path(shape, "grpSpPr", "xfrm");
+    const off = kid(xfrm2, "off");
+    const ext = kid(xfrm2, "ext");
+    const chOff = kid(xfrm2, "chOff");
+    const chExt = kid(xfrm2, "chExt");
+    let inner = transform;
+    if (off && ext && chOff && chExt) {
+      const sx = numAttr(chExt, "cx") ? numAttr(ext, "cx") / numAttr(chExt, "cx") : 1;
+      const sy = numAttr(chExt, "cy") ? numAttr(ext, "cy") / numAttr(chExt, "cy") : 1;
+      inner = {
+        sx: transform.sx * sx,
+        sy: transform.sy * sy,
+        ox: transform.ox + (numAttr(off, "x") - numAttr(chOff, "x") * sx) * transform.sx,
+        oy: transform.oy + (numAttr(off, "y") - numAttr(chOff, "y") * sy) * transform.sy
+      };
+    }
+    for (const child of kids(shape)) await readShape(child, inner, deck, part, inherit, built);
+    return;
+  }
+  const ph = name === "sp" || name === "pic" ? placeholderOf(shape) : null;
+  if (ph && !inherit) return;
+  if (ph && FOOTER_TYPES.has(ph.type)) return;
+  const layoutPh = ph && inherit ? findPlaceholder(inherit.layoutTree, ph, false) : null;
+  const masterPh = ph && inherit ? findPlaceholder(inherit.masterTree, ph, true) : null;
+  const spPr = kid(shape, name === "graphicFrame" ? "xfrm" : "spPr");
+  const xfrm = name === "graphicFrame" ? kid(shape, "xfrm") : kid(spPr, "xfrm") ?? path(layoutPh, "spPr", "xfrm") ?? path(masterPh, "spPr", "xfrm");
+  const area = areaOf(xfrm, transform);
+  if (!area) return;
+  if (name === "pic") {
+    const blipFill = kid(shape, "blipFill");
+    const embed = relAttr(kid(blipFill, "blip"), "embed");
+    const target = embed ? (await deck.pkg.relationships(part.part)).get(embed) : void 0;
+    const key = target && !target.external ? await mediaKey(deck, target.target) : null;
+    if (!key || Math.abs(area.rotation) > 0.5 || area.flipH || area.flipV) {
+      const clip = renditionClip(deck, part, area, "A picture");
+      if (clip !== null) {
+        const frame2 = stageFrame(deck, area);
+        built.items.push({ clip, frame: frame2, after: built.boxes.length });
+      }
+      return;
+    }
+    const src = kid(blipFill, "srcRect");
+    const l = numAttr(src, "l") / 1e5;
+    const t = numAttr(src, "t") / 1e5;
+    const r = numAttr(src, "r") / 1e5;
+    const b = numAttr(src, "b") / 1e5;
+    const rect = {
+      x: Math.max(0, l),
+      y: Math.max(0, t),
+      w: Math.min(1, 1 - r) - Math.max(0, l),
+      h: Math.min(1, 1 - b) - Math.max(0, t)
+    };
+    if (rect.w <= 0 || rect.h <= 0) return;
+    if (kid(path(shape, "nvPicPr", "nvPr"), "videoFile")) note(deck, "A video shown as its picture");
+    const frame = stageFrame(deck, area);
+    deck.clips.push({
+      kind: "image",
+      documentId: "",
+      fileName: target?.target.split("/").pop() ?? "Picture",
+      page: 1,
+      rect,
+      aspect: frame.w * chunkXTR26TNE_cjs.STAGE_ASPECT / Math.max(frame.h, 1e-6),
+      caption: "",
+      media: key,
+      plain: true
+    });
+    built.items.push({ clip: deck.clips.length - 1, frame, after: built.boxes.length });
+    return;
+  }
+  if (name === "graphicFrame") {
+    const data = path(shape, "graphic", "graphicData");
+    const table = kid(data, "tbl");
+    if (table) {
+      readTable(table, area, deck, built);
+      return;
+    }
+    const uri = data?.getAttribute("uri") ?? "";
+    const what = uri.includes("chart") ? "A chart" : uri.includes("diagram") ? "A SmartArt graphic" : "An embedded object";
+    const clip = renditionClip(deck, part, area, what);
+    if (clip !== null)
+      built.items.push({ clip, frame: stageFrame(deck, area), after: built.boxes.length });
+    return;
+  }
+  if (name !== "sp" && name !== "cxnSp") return;
+  const style = kid(shape, "style");
+  const prst = path(spPr, "prstGeom")?.getAttribute("prst") ?? (kid(spPr, "custGeom") ? "custom" : "rect");
+  let fill = readFill(spPr, theme);
+  const fillRef = kid(style, "fillRef");
+  if (!fill && fillRef && numAttr(fillRef, "idx") > 0) {
+    const color = colorIn(fillRef, theme);
+    if (color) fill = { kind: "solid", color };
+  }
+  if (!fill && ph)
+    fill = readFill(kid(layoutPh, "spPr"), theme) ?? readFill(kid(masterPh, "spPr"), theme);
+  let line = readLine(kid(spPr, "ln"), theme);
+  const lnRef = kid(style, "lnRef");
+  if (line === void 0 && lnRef && numAttr(lnRef, "idx") > 0) {
+    const color = colorIn(lnRef, theme);
+    if (color)
+      line = { color, width: theme.lineWidths[numAttr(lnRef, "idx") - 1] ?? 0.75, dash: false };
+  }
+  if (line === void 0 && name === "cxnSp") line = null;
+  const body = kid(shape, "txBody");
+  const bodyPr = kid(body, "bodyPr");
+  const inheritedBodyPr = [
+    bodyPr,
+    path(layoutPh, "txBody", "bodyPr"),
+    path(masterPh, "txBody", "bodyPr")
+  ];
+  const category = !ph ? "otherStyle" : TITLE_TYPES.has(ph.type) ? "titleStyle" : "bodyStyle";
+  const chain = [
+    kid(body, "lstStyle"),
+    path(layoutPh, "txBody", "lstStyle"),
+    path(masterPh, "txBody", "lstStyle"),
+    ph ? kid(inherit?.masterTxStyles, category) : null
+  ];
+  const fontRef = kid(style, "fontRef");
+  const tx1 = theme.scheme[theme.map.tx1 ?? "dk1"];
+  const fontScale = numAttr(kid(bodyPr, "normAutofit"), "fontScale", 1e5) / 1e5;
+  const paragraphs = body ? readParagraphs(
+    body,
+    chain,
+    deck,
+    {
+      color: colorIn(fontRef, theme) ?? void 0,
+      base: tx1 ? { hex: `#${tx1}`, alpha: 1 } : void 0
+    },
+    fontScale,
+    [deck.defaultText]
+  ) : [];
+  const hasText = paragraphs.some((p) => p.runs.some((run) => run.text.trim()));
+  const visibleFill = fill && fill.kind !== "none" && fill.kind !== "image";
+  if (!hasText && !visibleFill && !line && fill?.kind !== "image") return;
+  let shapeKind = SHAPES[prst] ?? (name === "cxnSp" ? "line" : "rect");
+  const exotic = !SHAPES[prst] && name !== "cxnSp";
+  if (exotic && (visibleFill || line) || fill?.kind === "image") {
+    const clip = renditionClip(deck, part, area, exotic ? "A shape" : "A picture fill");
+    if (clip !== null) {
+      built.items.push({ clip, frame: stageFrame(deck, area), after: built.boxes.length });
+      if (!hasText) return;
+      fill = null;
+      line = null;
+      shapeKind = "text";
+    }
+  }
+  if (shapeKind === "rect" && !visibleFill && !line) shapeKind = "text";
+  const anchorOf = (value) => value === "ctr" ? "middle" : value === "b" ? "bottom" : value === "t" ? "top" : void 0;
+  const anchor = inheritedBodyPr.map((pr) => anchorOf(pr?.getAttribute("anchor"))).find(Boolean) ?? (ph && TITLE_TYPES.has(ph.type) ? "middle" : "top");
+  const insetPr = inheritedBodyPr.find((pr) => pr?.hasAttribute("lIns"));
+  const inset = numAttr(insetPr, "lIns", 91440) / EMU_PER_POINT;
+  const shapeName = path(shape, "nvSpPr", "cNvPr")?.getAttribute("name") ?? "";
+  const role = ph ? TITLE_TYPES.has(ph.type) ? "title" : "body" : shapeName === "ARBI title" ? "title" : shapeName === "ARBI body" ? "body" : void 0;
+  const box2 = {
+    frame: stageFrame(deck, area),
+    shape: shapeKind,
+    paragraphs: hasText ? paragraphs : [],
+    ...Math.abs(area.rotation) > 0.01 ? { rotation: area.rotation } : {},
+    ...area.flipH ? { flipH: true } : {},
+    ...area.flipV ? { flipV: true } : {},
+    ...fill?.kind === "solid" ? { fill: fill.color.hex, ...fill.color.alpha < 1 ? { fillAlpha: fill.color.alpha } : {} } : fill?.kind === "gradient" ? { fill: fill.from.hex } : {},
+    ...line ? { line: { color: line.color.hex, width: line.width, ...line.dash ? { dash: true } : {} } } : {},
+    ...anchor !== "top" ? { anchor } : {},
+    ...Math.abs(inset - 7.2) > 0.05 ? { inset: inset * deck.pointScale } : {},
+    ...role ? { role } : {}
+  };
+  built.boxes.push(box2);
+}
+function readTable(table, area, deck, built) {
+  const { theme } = deck;
+  const tblPr = kid(table, "tblPr");
+  const styled = !!kid(tblPr, "tableStyleId");
+  const firstRow = boolAttr(tblPr, "firstRow") === true;
+  const banded = boolAttr(tblPr, "bandRow") === true;
+  const accent = `#${theme.scheme.accent1 ?? "4472c4"}`;
+  const tint = (hex3, amount) => `#${[1, 3, 5].map(
+    (i) => Math.round(255 - (255 - parseInt(hex3.slice(i, i + 2), 16)) * amount).toString(16).padStart(2, "0")
+  ).join("")}`;
+  const columns = kids(kid(table, "tblGrid"), "gridCol").map((col) => numAttr(col, "w"));
+  const totalW = columns.reduce((sum, w) => sum + w, 0) || area.w;
+  const rows = kids(table, "tr");
+  const totalH = rows.reduce((sum, row) => sum + numAttr(row, "h"), 0) || area.h;
+  const scaleY = area.h / totalH;
+  let y = area.y;
+  rows.forEach((row, r) => {
+    const h = numAttr(row, "h") * scaleY;
+    let x = area.x;
+    let c = 0;
+    for (const cell of kids(row, "tc")) {
+      const span = Math.max(1, numAttr(cell, "gridSpan", 1));
+      const w = columns.slice(c, c + span).reduce((sum, cw) => sum + cw, 0) * (area.w / totalW);
+      c += span;
+      if (boolAttr(cell, "hMerge") || boolAttr(cell, "vMerge")) {
+        x += w;
+        continue;
+      }
+      const rowSpan = Math.max(1, numAttr(cell, "rowSpan", 1));
+      const cellH = rows.slice(r, r + rowSpan).reduce((sum, rr) => sum + numAttr(rr, "h") * scaleY, 0);
+      const tcPr = kid(cell, "tcPr");
+      const own = readFill(tcPr, theme);
+      const header = styled && firstRow && r === 0;
+      const fill = own?.kind === "solid" ? own.color.hex : own?.kind === "none" ? void 0 : styled ? header ? accent : banded && (r - (firstRow ? 1 : 0)) % 2 === 0 ? tint(accent, 0.2) : tint(accent, 0.1) : void 0;
+      const text = readParagraphs(
+        kid(cell, "txBody"),
+        // The table's style sets its text colour, over the deck's default text.
+        [kid(kid(cell, "txBody"), "lstStyle")],
+        deck,
+        {
+          color: {
+            hex: header ? "#ffffff" : `#${theme.scheme[theme.map.tx1 ?? "dk1"] ?? "000000"}`,
+            alpha: 1
+          }
+        },
+        1
+      ).map((p) => header ? { ...p, runs: p.runs.map((run) => ({ ...run, bold: true })) } : p);
+      const border = readLine(kid(tcPr, "lnB"), theme) ?? readLine(kid(tcPr, "lnT"), theme);
+      built.boxes.push({
+        frame: stageFrame(deck, { x, y, w, h: cellH }),
+        shape: fill || border || styled ? "rect" : "text",
+        paragraphs: text,
+        ...fill ? { fill } : {},
+        ...border ? { line: { color: border.color.hex, width: border.width } } : styled ? { line: { color: "#ffffff", width: 1 } } : {},
+        anchor: tcPr?.getAttribute("anchor") === "ctr" ? "middle" : "top",
+        inset: 7.2 * deck.pointScale
+      });
+      x += w;
+    }
+    y += h;
+  });
+}
+async function readBackground(bg, deck, part) {
+  if (!bg) return null;
+  const bgPr = kid(bg, "bgPr");
+  const bgRef = kid(bg, "bgRef");
+  const fill = bgPr ? readFill(bgPr, deck.theme) : null;
+  if (fill?.kind === "solid") return { color: fill.color.hex };
+  if (fill?.kind === "gradient") {
+    return { gradient: { from: fill.from.hex, to: fill.to.hex, angle: fill.angle } };
+  }
+  if (fill?.kind === "image") {
+    const target = (await deck.pkg.relationships(part)).get(fill.embed);
+    const key = target && !target.external ? await mediaKey(deck, target.target) : null;
+    return key ? { image: key } : null;
+  }
+  if (bgRef) {
+    const color = colorIn(bgRef, deck.theme);
+    if (color) return { color: color.hex };
+  }
+  return null;
+}
+async function slideParts(pkg) {
+  const pres = await pkg.xml("ppt/presentation.xml");
+  const rels = await pkg.relationships("ppt/presentation.xml");
+  const parts = [];
+  for (const id of kids(kid(pres?.documentElement, "sldIdLst"), "sldId")) {
+    const rel = rels.get(relAttr(id, "id") ?? "");
+    if (!rel) continue;
+    const slide = await pkg.xml(rel.target);
+    parts.push({ part: rel.target, hidden: slide?.documentElement.getAttribute("show") === "0" });
+  }
+  return parts;
+}
+async function speakerNotes(pkg, part) {
+  const notesPart = await pkg.related(part, "/notesSlide");
+  const doc = notesPart ? await pkg.xml(notesPart) : null;
+  const tree = path(doc?.documentElement, "cSld", "spTree");
+  for (const shape of kids(tree, "sp")) {
+    const ph = placeholderOf(shape);
+    if (ph?.type !== "body") continue;
+    return kids(kid(shape, "txBody"), "p").map(
+      (p) => kids(p).filter((child) => child.localName === "r" || child.localName === "fld").map((run) => kid(run, "t")?.textContent ?? "").join("")
+    ).join("\n").trim();
+  }
+  return "";
+}
+var JSZIP = () => import('jszip').then((module) => module.default);
+async function importPptx(bytes, options = {}) {
+  const JSZip = await JSZIP();
+  const pkg = new Package(await JSZip.loadAsync(bytes));
+  const pres = await pkg.xml("ppt/presentation.xml");
+  if (!pres) throw new Error("This file is not a PowerPoint presentation.");
+  const size = kid(pres.documentElement, "sldSz");
+  const cx = numAttr(size, "cx", 12192e3);
+  const cy = numAttr(size, "cy", 6858e3);
+  const deckAspect = cx / cy;
+  const place = deckAspect < chunkXTR26TNE_cjs.STAGE_ASPECT ? { w: deckAspect / chunkXTR26TNE_cjs.STAGE_ASPECT, h: 1, x: (1 - deckAspect / chunkXTR26TNE_cjs.STAGE_ASPECT) / 2, y: 0 } : { w: 1, h: chunkXTR26TNE_cjs.STAGE_ASPECT / deckAspect, x: 0, y: (1 - chunkXTR26TNE_cjs.STAGE_ASPECT / deckAspect) / 2 };
+  const slides = await slideParts(pkg);
+  const firstLayout = slides.length ? await pkg.related(slides[0].part, "/slideLayout") : null;
+  const firstMaster = firstLayout ? await pkg.related(firstLayout, "/slideMaster") : null;
+  const deck = {
+    pkg,
+    theme: firstMaster ? await readTheme(pkg, firstMaster) : { scheme: {}, map: {}, majorFont: "Calibri", minorFont: "Calibri", lineWidths: [] },
+    slideSize: { cx, cy },
+    place,
+    pointScale: chunkXTR26TNE_cjs.SLIDE_POINTS.h * place.h / (cy / EMU_PER_POINT),
+    defaultText: kid(pres.documentElement, "defaultTextStyle"),
+    options,
+    clips: [],
+    media: {},
+    mediaKeys: /* @__PURE__ */ new Map(),
+    notes: /* @__PURE__ */ new Map()
+  };
+  const saved = [];
+  let page = 0;
+  for (const { part, hidden } of slides) {
+    if (!hidden) page += 1;
+    const layout = await pkg.related(part, "/slideLayout");
+    const master = layout ? await pkg.related(layout, "/slideMaster") : null;
+    if (master && master !== firstMaster) deck.theme = await readTheme(pkg, master);
+    const slideDoc = await pkg.xml(part);
+    const layoutDoc = layout ? await pkg.xml(layout) : null;
+    const masterDoc = master ? await pkg.xml(master) : null;
+    const tree = (doc) => path(doc?.documentElement, "cSld", "spTree");
+    const built = { boxes: [], items: [] };
+    const partContext = { part, page: hidden ? null : page };
+    const showMaster = (doc) => doc?.documentElement.getAttribute("showMasterSp") !== "0";
+    if (masterDoc && showMaster(slideDoc) && showMaster(layoutDoc)) {
+      for (const shape of kids(tree(masterDoc))) {
+        await readShape(
+          shape,
+          IDENTITY,
+          deck,
+          { part: master, page: partContext.page },
+          null,
+          built
+        );
+      }
+    }
+    if (layoutDoc && showMaster(slideDoc)) {
+      for (const shape of kids(tree(layoutDoc))) {
+        await readShape(
+          shape,
+          IDENTITY,
+          deck,
+          { part: layout, page: partContext.page },
+          null,
+          built
+        );
+      }
+    }
+    const inherit = {
+      layoutTree: tree(layoutDoc),
+      masterTree: tree(masterDoc),
+      masterTxStyles: kid(masterDoc?.documentElement, "txStyles")
+    };
+    for (const shape of kids(tree(slideDoc))) {
+      await readShape(shape, IDENTITY, deck, partContext, inherit, built);
+    }
+    const bg = await readBackground(path(slideDoc?.documentElement, "cSld", "bg"), deck, part) ?? (layout ? await readBackground(path(layoutDoc?.documentElement, "cSld", "bg"), deck, layout) : null) ?? (master ? await readBackground(path(masterDoc?.documentElement, "cSld", "bg"), deck, master) : null) ?? {
+      color: "#ffffff"
+    };
+    if (hidden) note(deck, "A hidden slide");
+    const firstClipAt = built.items.length ? Math.min(...built.items.map((item) => item.after)) : Infinity;
+    const boxes = built.boxes.map(
+      (box2, index) => index >= firstClipAt ? { ...box2, front: true } : box2
+    );
+    const title = boxes.find((box2) => box2.role === "title");
+    const notes = await speakerNotes(pkg, part);
+    saved.push({
+      caption: title ? title.paragraphs.map((p) => p.runs.map((run) => run.text).join("")).join(" ").replace(/\s+/g, " ").trim() : "",
+      auto: false,
+      layout: "free",
+      items: built.items.map(({ clip, frame }) => ({
+        clip,
+        frame: { x: frame.x, y: frame.y, w: frame.w }
+      })),
+      boxes,
+      background: bg,
+      ...notes ? { notes } : {}
+    });
+  }
+  for (const part of Object.keys(pkg.zip.files)) {
+    if (/^ppt\/slides\/slide\d+\.xml$/.test(part)) {
+      const xml = await pkg.zip.file(part).async("string");
+      if (/<p:timing\b/.test(xml)) {
+        note(deck, "Animations are not kept");
+        break;
+      }
+    }
+  }
+  const core = await pkg.xml("docProps/core.xml");
+  const coreTitle = Array.from(core?.documentElement.childNodes ?? []).find(
+    (node) => node instanceof Element && node.localName === "title"
+  )?.textContent;
+  return {
+    saved: {
+      format: "arbi-presentation",
+      version: 1,
+      title: options.title ?? (coreTitle?.trim() || "Presentation"),
+      captions: false,
+      theme: chunkXTR26TNE_cjs.DEFAULT_THEME,
+      clips: deck.clips,
+      slides: saved,
+      ...Object.keys(deck.media).length ? { media: deck.media } : {}
+    },
+    notes: [...deck.notes.entries()].map(
+      ([text, count]) => count > 1 && !text.startsWith("Animations") ? `${text} (${count})` : text
+    ),
+    fingerprints: await fingerprintsOf(pkg, slides)
+  };
+}
+async function fingerprintsOf(pkg, slides) {
+  const out = [];
+  for (const { part } of slides) {
+    const doc = await pkg.xml(part);
+    const tree = path(doc?.documentElement, "cSld", "spTree");
+    const parts = [];
+    const visit = (element) => {
+      for (const child of kids(element)) {
+        const name = child.localName;
+        if (name === "t") parts.push(child.textContent ?? "");
+        else if (name === "off") {
+          parts.push(
+            `@${Math.round(numAttr(child, "x") / 12e4)},${Math.round(numAttr(child, "y") / 68e3)}`
+          );
+        } else if (name === "blip") parts.push("pic");
+        else visit(child);
+      }
+    };
+    if (tree) visit(tree);
+    parts.push(`notes:${await speakerNotes(pkg, part)}`);
+    out.push(hash(parts.join("|").replace(/\s+/g, " ")));
+  }
+  return out;
+}
+async function slideFingerprints(bytes) {
+  const JSZip = await JSZIP();
+  const pkg = new Package(await JSZip.loadAsync(bytes));
+  return fingerprintsOf(pkg, await slideParts(pkg));
+}
+
+// src/presentation/merge-outside-edits.ts
+function mergeOutsideEdits(saved, imported, fingerprints) {
+  const used = /* @__PURE__ */ new Set();
+  const offset = saved.clips.length;
+  const changed = [];
+  const slides = fingerprints.map((fingerprint, index) => {
+    const own = saved.slides.findIndex(
+      (slide2, i) => !used.has(i) && slide2.fingerprint === fingerprint
+    );
+    if (own >= 0) {
+      used.add(own);
+      return saved.slides[own];
+    }
+    changed.push(index + 1);
+    const slide = imported.slides[index];
+    return {
+      ...slide,
+      items: slide.items.map((item) => ({ ...item, clip: item.clip + offset })),
+      fingerprint
+    };
+  });
+  return {
+    saved: {
+      ...saved,
+      clips: [...saved.clips, ...imported.clips],
+      slides,
+      ...saved.media || imported.media ? { media: { ...saved.media, ...imported.media } } : {}
+    },
+    changed
+  };
+}
+
+// src/connection/presentation/usePresentationFiles.ts
+var PPTX_TYPE = "application/vnd.openxmlformats-officedocument.presentationml.presentation";
+var SLIDE_PAGE = { width: 1280, height: 720 };
+function dataUrlBlob(url) {
+  const [head, body] = url.split(",", 2);
+  const type = /^data:([^;]+)/.exec(head)?.[1] ?? "application/octet-stream";
+  const binary = atob(body ?? "");
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+  return new Blob([bytes], { type });
+}
+async function presentationData(bytes) {
+  if (isZipBytes(bytes)) return readPptxPresentationData(bytes);
+  const isPdf = bytes[0] === 37 && bytes[1] === 80 && bytes[2] === 68 && bytes[3] === 70;
+  if (!isPdf) return new TextDecoder().decode(bytes);
+  const data = await documentTools.readPdfAttachment(bytes, chunkXTR26TNE_cjs.PRESENTATION_ATTACHMENT);
+  if (!data) {
+    throw new Error(
+      "This PDF has no editable presentation in it (it may have been changed outside ARBI)."
+    );
+  }
+  return new TextDecoder().decode(data);
+}
+function current(withoutClips) {
+  const state = chunkXTR26TNE_cjs.usePresentation.getState();
+  return withoutClips ? {
+    ...state,
+    clips: [],
+    slides: state.slides.map((slide) => ({ ...slide, items: [] }))
+  } : state;
+}
+var lookOf = (state) => ({
+  labels: state.captions,
+  columnValues: state.columnValues,
+  theme: state.theme,
+  logo: state.logoImage,
+  media: state.media
+});
+function usePresentationFiles() {
+  const arbi = react$1.useArbi();
+  const { client } = documentTools.useDocumentTools();
+  const workspaceId = react$1.useArbiSessionState((s) => s.workspaceId);
+  const buildFile = react.useCallback(async (title, withoutClips) => {
+    const state = current(withoutClips);
+    const deck = await buildPptx({ title, slides: state.slides, clips: state.clips }, lookOf(state));
+    const fingerprints = await slideFingerprints(deck);
+    const data = chunkXTR26TNE_cjs.serializePresentation({ ...state, title, fingerprints });
+    return writePptxPresentationData(deck, JSON.stringify(data, null, 2));
+  }, []);
+  const save = react.useCallback(
+    async (title, { asNew = false, template = false } = {}) => {
+      if (!arbi || !workspaceId) throw new Error("Open a workspace to save the presentation.");
+      const state = chunkXTR26TNE_cjs.usePresentation.getState();
+      const versionOf = asNew || template ? null : state.savedId;
+      const deck = await buildFile(title, template);
+      const file = new File([deck], chunkXTR26TNE_cjs.presentationFileName(title), { type: PPTX_TYPE });
+      const result = await arbi.documents.upload([file], {
+        folder: template ? chunkXTR26TNE_cjs.TEMPLATES_FOLDER : chunkXTR26TNE_cjs.PRESENTATIONS_FOLDER,
+        workspaceExtId: workspaceId,
+        ...versionOf ? { versionOf } : {}
+      });
+      const id = versionOf ?? result.doc_ext_ids?.[0];
+      if (!id) throw new Error("The presentation could not be saved.");
+      if (!template) {
+        const [doc] = await arbi.documents.get([id]).catch(() => []);
+        state.setSaved(id, title, doc?.current_version ?? null);
+      }
+      return id;
+    },
+    [arbi, workspaceId, buildFile]
+  );
+  const exportPdf = react.useCallback(
+    async (title) => {
+      if (!arbi || !workspaceId) throw new Error("Open a workspace to export the PDF.");
+      const state = current(false);
+      const pages = [];
+      for (const slide of state.slides) {
+        const { image, text } = await renderSlide(slide, state.clips, lookOf(state));
+        pages.push({ image, text, width: SLIDE_PAGE.width, height: SLIDE_PAGE.height });
+      }
+      const pdf = await documentTools.imagesToPdf(pages, { title });
+      const result = await arbi.documents.upload(
+        [new File([pdf], `${chunkXTR26TNE_cjs.safeFileStem(title)}.pdf`, { type: "application/pdf" })],
+        { folder: chunkXTR26TNE_cjs.EXPORTS_FOLDER, workspaceExtId: workspaceId }
+      );
+      const id = result.doc_ext_ids?.[0];
+      if (!id) throw new Error("The PDF could not be saved.");
+      return id;
+    },
+    [arbi, workspaceId]
+  );
+  const list = react.useCallback(
+    async (scope = "presentations") => {
+      if (!arbi || !workspaceId) return [];
+      const docs = await arbi.documents.list({ workspaceId });
+      return docs.filter((doc) => {
+        const folder = doc.folder ?? "";
+        if (!ui.isPresentationFileName(doc.file_name, folder)) return false;
+        return scope === "templates" ? folder === chunkXTR26TNE_cjs.TEMPLATES_FOLDER : folder.startsWith(chunkXTR26TNE_cjs.PRESENTATIONS_FOLDER) && folder !== chunkXTR26TNE_cjs.TEMPLATES_FOLDER && !folder.startsWith(chunkXTR26TNE_cjs.EXPORTS_FOLDER);
+      }).map((doc) => ({
+        id: doc.external_id,
+        title: chunkXTR26TNE_cjs.presentationTitle(doc.file_name ?? ""),
+        updatedAt: doc.updated_at ?? doc.created_at ?? null
+      })).sort((a, b) => (a.updatedAt ?? "") < (b.updatedAt ?? "") ? 1 : -1);
+    },
+    [arbi, workspaceId]
+  );
+  const readSaved = react.useCallback(
+    async (id, version) => {
+      if (!arbi) throw new Error("Sign in to open a presentation.");
+      const response = await arbi.documents.download(id, version);
+      const bytes = new Uint8Array(await response.arrayBuffer());
+      const text = await presentationData(bytes);
+      const [doc] = await arbi.documents.get([id]).catch(() => []);
+      const openedVersion = version ?? doc?.current_version ?? null;
+      if (text === null) {
+        const imported = await importPptx(bytes, {
+          title: chunkXTR26TNE_cjs.presentationTitle(doc?.file_name ?? "Presentation.pptx"),
+          documentId: id,
+          version: version ?? doc?.current_version,
+          fileName: doc?.file_name ?? void 0
+        });
+        return {
+          saved: imported.saved,
+          legacy: false,
+          imported: { notes: imported.notes },
+          openedVersion
+        };
+      }
+      let saved = chunkXTR26TNE_cjs.parsePresentation(text);
+      let changedOutside;
+      if (isZipBytes(bytes) && saved.slides.some((slide) => slide.fingerprint)) {
+        const now = await slideFingerprints(bytes);
+        const unchanged = now.length === saved.slides.length && now.every((fingerprint, i) => fingerprint === saved.slides[i].fingerprint);
+        if (!unchanged) {
+          const imported = await importPptx(bytes, {
+            title: saved.title,
+            documentId: id,
+            version: version ?? doc?.current_version,
+            fileName: doc?.file_name ?? void 0
+          });
+          const merged = mergeOutsideEdits(saved, imported.saved, now);
+          saved = merged.saved;
+          changedOutside = merged.changed;
+        }
+      }
+      return {
+        saved,
+        // Saved before presentations were PowerPoint files: its next save is a new PowerPoint
+        // file, not a version of this one (a document's versions keep one format).
+        legacy: !isZipBytes(bytes),
+        changedOutside,
+        openedVersion
+      };
+    },
+    [arbi]
+  );
+  const startFromTemplate = react.useCallback(
+    async (id) => {
+      const { saved } = await readSaved(id);
+      chunkXTR26TNE_cjs.usePresentation.getState().load({
+        title: "Untitled presentation",
+        savedId: null,
+        captions: saved.captions,
+        labelColumn: saved.labelColumn ?? null,
+        theme: saved.theme,
+        clips: [],
+        slides: saved.slides.map((slide) => ({ ...slide, items: [] })),
+        media: saved.media
+      });
+    },
+    [readSaved]
+  );
+  const downloadFile = react.useCallback(
+    async (id) => {
+      if (!arbi) throw new Error("Sign in to read the file.");
+      return (await arbi.documents.download(id)).blob();
+    },
+    [arbi]
+  );
+  const open = react.useCallback(
+    async (id, version) => {
+      if (!arbi) throw new Error("Sign in to open a presentation.");
+      const { saved, legacy, imported, changedOutside, openedVersion } = await readSaved(
+        id,
+        version
+      );
+      const media = saved.media ?? {};
+      const sources = /* @__PURE__ */ new Map();
+      const sourceOf = (clip) => {
+        if (clip.media) {
+          const url = media[clip.media];
+          return url ? Promise.resolve(dataUrlBlob(url)) : Promise.reject(new Error("No image"));
+        }
+        const key = `${clip.kind === "pdf" ? "pdf" : "file"}:${clip.documentId}@${clip.version ?? ""}`;
+        let pending = sources.get(key);
+        if (!pending) {
+          pending = clip.kind === "pdf" ? documentTools.fetchDocumentPdf(client, clip.documentId, { version: clip.version ?? null }) : arbi.documents.download(clip.documentId, clip.version).then((r) => r.blob());
+          sources.set(key, pending);
+        }
+        return pending;
+      };
+      const markups = /* @__PURE__ */ new Map();
+      const masksOf = (clip) => {
+        const key = `${clip.documentId}@${clip.version ?? ""}`;
+        let pending = markups.get(key);
+        if (!pending) {
+          pending = documentTools.createMarkupStore({ version: clip.version, client }).load(clip.documentId).then((layer) => {
+            const byPage = /* @__PURE__ */ new Map();
+            for (const mark of layer.annotations) {
+              if (mark.kind !== "redaction" || mark.status === "rejected") continue;
+              byPage.set(mark.page, [...byPage.get(mark.page) ?? [], ...mark.rects]);
+            }
+            return byPage;
+          }).catch((error) => {
+            if (error instanceof documentTools.MarkupStoreError && error.status === 404) return /* @__PURE__ */ new Map();
+            throw error;
+          });
+          markups.set(key, pending);
+        }
+        return pending;
+      };
+      const opened = await Promise.all(
+        saved.clips.map(async (clip) => {
+          try {
+            const [source, masks] = await Promise.all([
+              sourceOf(clip),
+              clip.kind === "pdf" && !clip.media ? masksOf(clip) : Promise.resolve(/* @__PURE__ */ new Map())
+            ]);
+            return { ...clip, source, masks: masks.get(clip.page) ?? [] };
+          } catch {
+            return null;
+          }
+        })
+      );
+      const kept = [];
+      const newIndex = opened.map((clip) => clip ? kept.push(clip) - 1 : -1);
+      chunkXTR26TNE_cjs.usePresentation.getState().load({
+        title: saved.title,
+        savedId: legacy ? null : id,
+        version: legacy ? null : openedVersion,
+        boundTo: id,
+        captions: saved.captions,
+        labelColumn: saved.labelColumn ?? null,
+        theme: saved.theme,
+        clips: kept,
+        slides: saved.slides.map((slide) => ({
+          ...slide,
+          items: slide.items.filter((item) => newIndex[item.clip] >= 0).map((item) => ({ ...item, clip: newIndex[item.clip] }))
+        })),
+        media
+      });
+      return {
+        missing: opened.length - kept.length,
+        stale: saved.slidesStale === true,
+        ...imported ? { imported } : {},
+        ...changedOutside?.length ? { changedOutside } : {}
+      };
+    },
+    [arbi, client, readSaved]
+  );
+  return {
+    save,
+    exportPdf,
+    list,
+    open,
+    startFromTemplate,
+    downloadFile,
+    canSave: !!arbi && !!workspaceId
+  };
+}
+var WHOLE = { x: 0, y: 0, w: 1, h: 1 };
+async function aspectOf(blob) {
+  const bitmap = await createImageBitmap(blob);
+  const aspect = bitmap.width / bitmap.height;
+  bitmap.close();
+  return aspect;
+}
+function useGenerateImageLaunch() {
+  const arbi = react$1.useArbi();
+  const workspaceId = react$1.useArbiSessionState((s) => s.workspaceId);
+  return react.useCallback(
+    async ({ inputs }) => {
+      if (!arbi || !workspaceId) throw new Error("Open a workspace to generate images.");
+      const prompt = typeof inputs.prompt === "string" ? inputs.prompt.trim() : "";
+      if (!prompt) return;
+      const tools = chunkNLOETJCB_cjs.PROMPT_BINDINGS[chunk7JLJH5CW_cjs.GENERATE_IMAGE_ID].tools?.(inputs);
+      let image;
+      let answer = "";
+      let failure = "";
+      await arbi.assistant.ask(
+        { question: `/image ${prompt}`, workspaceId, ...tools ? { tools } : {} },
+        {
+          onToken: (token) => {
+            answer += token;
+          },
+          onError: (error) => {
+            failure = error instanceof Error ? error.message : String(error);
+          },
+          onArtifact: (artifact) => {
+            if (artifact.mode === "image" && artifact.doc_ext_id) image = artifact;
+          }
+        }
+      ).catch((error) => {
+        failure ||= error instanceof Error ? error.message : String(error);
+      });
+      const documentId = image?.doc_ext_id;
+      if (!documentId)
+        throw new Error(failure || answer.trim() || "The image could not be generated.");
+      const source = await (await arbi.documents.download(documentId)).blob();
+      const fileName = `${prompt.split("\n")[0].slice(0, 60)}.png`;
+      chunkXTR26TNE_cjs.usePresentation.getState().addClip({
+        kind: "image",
+        documentId,
+        fileName,
+        page: 1,
+        rect: WHOLE,
+        aspect: await aspectOf(source),
+        masks: [],
+        source,
+        caption: chunkXTR26TNE_cjs.mediaCaption(fileName)
+      });
+    },
+    [arbi, workspaceId]
+  );
+}
+function GenerateImageDialog({
+  open,
+  onOpenChange,
+  referenceId
+}) {
+  const notify = chunkXTR26TNE_cjs.usePresentation((s) => s.notify);
+  const { skills } = chunkGKVE5JGB_cjs.useWorkflowDefinitions();
+  const run = useGenerateImageLaunch();
+  const workflows = react.useMemo(
+    () => skills.filter((w) => w.id === chunk7JLJH5CW_cjs.GENERATE_IMAGE_ID).map((w) => ({ ...w, options: { ...w.options, agent: false } })),
+    [skills]
+  );
+  const onLaunch = react.useCallback(
+    async (launch) => {
+      try {
+        await run(launch);
+        notify("The image is in your clips", "success");
+      } catch (error) {
+        notify(error instanceof Error ? error.message : "The image could not be generated", "error");
+        throw error;
+      }
+    },
+    [run, notify]
+  );
+  if (!open || !workflows.length) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkNLOETJCB_cjs.ConnectedWorkflowStart,
+    {
+      workflows,
+      showTiles: false,
+      activeId: chunk7JLJH5CW_cjs.GENERATE_IMAGE_ID,
+      onActiveIdChange: (id) => id === null && onOpenChange(false),
+      initialInputsFor: () => referenceId ? { references: { folders: [], labels: [], documents: [referenceId] } } : {},
+      onLaunch,
+      uploadInPlace: true
+    }
+  );
+}
+var SAVE_TEXT = {
+  save: {
+    title: "Save presentation",
+    description: "Saved in Files \u203A Presentations as a PowerPoint file: searchable, it opens again here for editing, and in PowerPoint.",
+    action: "Save"
+  },
+  saveAs: {
+    title: "Save as",
+    description: "A new copy under this name in Files \u203A Presentations.",
+    action: "Save"
+  },
+  template: {
+    title: "Save as template",
+    description: "Its look and slides, without clips, in Files \u203A Presentations \u203A Templates: New from template starts from it.",
+    action: "Save template"
+  },
+  export: {
+    title: "Export PDF",
+    description: "A PDF of the slides in Files \u203A Presentations \u203A Exports: to send or file. Redactions are burnt in.",
+    action: "Export"
+  }
+};
+function SavePresentationDialog({
+  open,
+  onOpenChange,
+  mode = "save"
+}) {
+  const notify = chunkXTR26TNE_cjs.usePresentation((s) => s.notify);
+  const { save, exportPdf } = usePresentationFiles();
+  const current2 = chunkXTR26TNE_cjs.usePresentation((s) => s.title);
+  const [title, setTitle] = react.useState(current2);
+  const [busy, setBusy] = react.useState(false);
+  const text = SAVE_TEXT[mode];
+  react.useEffect(() => {
+    if (!open) return;
+    const named = current2 === "Untitled presentation" ? "" : current2;
+    setTitle(mode === "saveAs" && named ? `${named} (copy)` : mode === "template" ? "" : named);
+  }, [open, current2, mode]);
+  const submit = async () => {
+    const name = title.trim();
+    if (!name || busy) return;
+    setBusy(true);
+    try {
+      if (mode === "export") {
+        await exportPdf(name);
+        notify(`"${name}.pdf" saved in Presentations`, "success");
+      } else {
+        await save(name, { asNew: mode === "saveAs", template: mode === "template" });
+        notify(`"${name}" saved in Presentations`, "success");
+      }
+      onOpenChange(false);
+    } catch (error) {
+      notify(error instanceof Error ? error.message : "Could not save", "error");
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    chunkULWRNGGE_cjs.ModalScaffold,
+    {
+      open,
+      onOpenChange,
+      title: text.title,
+      description: text.description,
+      showDescription: true,
+      icon: mode === "export" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileDown, { className: "size-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "size-5" }),
+      size: "sm",
+      testId: "presentation-save-dialog",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chunkULWRNGGE_cjs.ModalScaffold.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Input,
+          {
+            autoFocus: true,
+            value: title,
+            onChange: (event) => setTitle(event.target.value),
+            onKeyDown: (event) => event.key === "Enter" && void submit(),
+            placeholder: "Name, e.g. Opening statement",
+            "aria-label": "Name",
+            disabled: busy
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkULWRNGGE_cjs.ModalScaffold.Footer, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { type: "button", onClick: () => void submit(), disabled: !title.trim() || busy, children: [
+            busy && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-4 animate-spin" }),
+            text.action
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function OpenPresentationDialog({
+  open,
+  onOpenChange,
+  onOpened,
+  templates = false
+}) {
+  const { confirm } = chunkTKHCIHE2_cjs.useBlocksEnvironment();
+  const notify = chunkXTR26TNE_cjs.usePresentation((s) => s.notify);
+  const { list, startFromTemplate } = usePresentationFiles();
+  const [entries, setEntries] = react.useState(null);
+  const [opening, setOpening] = react.useState(null);
+  react.useEffect(() => {
+    if (!open) return;
+    setEntries(null);
+    list(templates ? "templates" : "presentations").then(setEntries).catch(() => setEntries([]));
+  }, [open, list, templates]);
+  const choose = async (entry) => {
+    if (!templates) {
+      onOpenChange(false);
+      onOpened(entry.id);
+      return;
+    }
+    if (chunkXTR26TNE_cjs.usePresentation.getState().clips.length) {
+      const ok = await confirm({
+        title: "New from template",
+        message: "Replace the presentation that is open? Save it first to keep it.",
+        kind: "confirm"
+      });
+      if (!ok) return;
+    }
+    setOpening(entry.id);
+    try {
+      await startFromTemplate(entry.id);
+      onOpenChange(false);
+      onOpened(null);
+    } catch (error) {
+      notify(error instanceof Error ? error.message : "The template could not be opened", "error");
+    } finally {
+      setOpening(null);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkULWRNGGE_cjs.ModalScaffold,
+    {
+      open,
+      onOpenChange,
+      title: templates ? "New from template" : "Open presentation",
+      description: templates ? "A new presentation with the template\u2019s look and slides." : "Presentations saved in this workspace.",
+      showDescription: true,
+      icon: templates ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutTemplate, { className: "size-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderOpen, { className: "size-5" }),
+      testId: templates ? "presentation-template-dialog" : "presentation-open-dialog",
+      children: /* @__PURE__ */ jsxRuntime.jsx(chunkULWRNGGE_cjs.ModalScaffold.Body, { children: entries === null ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-4 animate-spin" }),
+        " Loading\u2026"
+      ] }) : entries.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: templates ? "No templates yet. Save as template\u2026 keeps one in Files \u203A Presentations \u203A Templates." : "No saved presentations yet." }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "divide-y divide-border rounded-lg border border-border", children: entries.map((entry) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          disabled: !!opening,
+          onClick: () => void choose(entry),
+          className: "flex w-full items-center gap-3 px-3 py-2.5 text-left hover:bg-muted focus-visible:bg-muted focus-visible:outline-none disabled:opacity-60 pointer-coarse:min-h-11",
+          children: [
+            opening === entry.id ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-4 shrink-0 animate-spin text-muted-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Presentation, { className: "size-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", children: entry.title }),
+            entry.updatedAt && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: new Date(entry.updatedAt).toLocaleDateString() })
+          ]
+        }
+      ) }, entry.id)) }) })
+    }
+  );
+}
+var IMAGE_FILE = /\.(png|jpe?g|gif|webp|svg)$/i;
+function ChooseLogoDialog({ open, onOpenChange }) {
+  const setTheme = chunkXTR26TNE_cjs.usePresentation((s) => s.setTheme);
+  const corner = chunkXTR26TNE_cjs.usePresentation((s) => s.theme.logo?.corner ?? "br");
+  const { data: documents } = react$1.useDocuments(void 0, { enabled: open });
+  const [picked, setPicked] = react.useState("");
+  const groups = react.useMemo(
+    () => [
+      {
+        id: "images",
+        docs: (documents ?? []).filter((doc) => IMAGE_FILE.test(doc.file_name ?? "")).map((doc) => ({
+          id: doc.external_id,
+          title: ui.getDocumentTitle(doc, "Untitled"),
+          fileName: doc.file_name
+        })).sort((a, b) => a.title.localeCompare(b.title))
+      }
+    ],
+    [documents]
+  );
+  const selected = groups[0].docs.find((doc) => doc.id === picked);
+  const use = () => {
+    if (!selected) return;
+    setTheme({ logo: { documentId: selected.id, fileName: selected.fileName ?? "", corner } });
+    setPicked("");
+    onOpenChange(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    chunkULWRNGGE_cjs.ModalScaffold,
+    {
+      open,
+      onOpenChange,
+      title: "Logo",
+      description: "An image of this workspace (a PNG with a transparent background looks best), small in the footer of every slide.",
+      showDescription: true,
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ImageIcon, { className: "size-5" }),
+      size: "sm",
+      testId: "presentation-logo-dialog",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chunkULWRNGGE_cjs.ModalScaffold.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          chunkVZOOGA47_cjs.DocumentPicker,
+          {
+            groups,
+            value: picked,
+            onValueChange: setPicked,
+            labels: { placeholder: "Choose an image", noDocuments: "No images in this workspace." }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkULWRNGGE_cjs.ModalScaffold.Footer, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              type: "button",
+              onClick: use,
+              disabled: !selected,
+              "data-testid": "presentation-logo-use",
+              children: "Use as logo"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function CropClipDialog({ clip, onOpenChange }) {
+  const url = chunkWOOOMTTA_cjs.useObjectUrl(clip?.source ?? EMPTY);
+  const [natural, setNatural] = react.useState(null);
+  const [area, setArea] = react.useState(null);
+  react.useEffect(() => {
+    setNatural(null);
+    setArea(null);
+    if (!clip) return;
+    let cancelled = false;
+    void createImageBitmap(clip.source).then((bitmap) => {
+      if (!cancelled) setNatural({ width: bitmap.width, height: bitmap.height });
+      bitmap.close();
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [clip]);
+  const original = natural ? natural.width / natural.height : 1;
+  const apply = () => {
+    if (!clip || !natural || !area || !area.width || !area.height) return;
+    const rect = {
+      x: Math.max(0, area.x / natural.width),
+      y: Math.max(0, area.y / natural.height),
+      w: Math.min(1, area.width / natural.width),
+      h: Math.min(1, area.height / natural.height)
+    };
+    chunkXTR26TNE_cjs.usePresentation.getState().cropClip(clip.id, rect, area.width / area.height);
+    onOpenChange(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    chunkULWRNGGE_cjs.ModalScaffold,
+    {
+      open: !!clip,
+      onOpenChange,
+      title: "Crop",
+      description: "Choose the part of the image the clip shows.",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Crop, { className: "size-5" }),
+      size: "lg",
+      testId: "presentation-crop-dialog",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chunkULWRNGGE_cjs.ModalScaffold.Body, { children: url && natural && /* @__PURE__ */ jsxRuntime.jsx(
+          react$1.ImageCropper,
+          {
+            image: url,
+            aspect: original,
+            aspectOptions: [
+              { label: "Original", value: original },
+              { label: "16:9", value: 16 / 9 },
+              { label: "4:3", value: 4 / 3 },
+              { label: "1:1", value: 1 },
+              { label: "3:4", value: 3 / 4 }
+            ],
+            onCropComplete: (next) => setArea(next)
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkULWRNGGE_cjs.ModalScaffold.Footer, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              type: "button",
+              onClick: apply,
+              disabled: !area,
+              "data-testid": "presentation-crop-apply",
+              children: "Crop"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var EMPTY = new Blob();
+var NONE = "none";
+function LabelColumnMenu({ columns }) {
+  const labelColumn = chunkXTR26TNE_cjs.usePresentation((s) => s.labelColumn);
+  const setLabelColumn = chunkXTR26TNE_cjs.usePresentation((s) => s.setLabelColumn);
+  if (!columns.length) return null;
+  const chosen = columns.find((column) => column.id === labelColumn);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuSub, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuSubTrigger, { "data-testid": "presentation-label-column", children: [
+      "Label clips with",
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto pl-3 text-xs text-muted-foreground", children: chosen?.name ?? "None" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuSubContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.DropdownMenuRadioGroup,
+      {
+        value: chosen?.id ?? NONE,
+        onValueChange: (value) => setLabelColumn(value === NONE ? null : value),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuRadioItem, { value: NONE, children: "No column" }),
+          columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuRadioItem, { value: column.id, children: column.name }, column.id))
+        ]
+      }
+    ) })
+  ] });
+}
+function GenerateTile({ onClick }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      title: "Generate an image",
+      "aria-label": "Generate image",
+      className: "flex h-[72px] w-[72px] flex-col items-center justify-center gap-1 rounded-lg border border-dashed border-border text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      "data-testid": "presentation-generate-image",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "size-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium", children: "Generate" })
+      ]
+    }
+  );
+}
+var VALUE_FORMATS = /* @__PURE__ */ new Set(["text", "number", "select"]);
+function useLabelColumns(active) {
+  const workspaceId = react$1.useArbiSessionState((s) => s.workspaceId);
+  const { data: tags } = react$1.useTags(workspaceId, { enabled: active });
+  const { data: documents } = react$1.useDocuments(workspaceId, { enabled: active });
+  const labelColumn = chunkXTR26TNE_cjs.usePresentation((s) => s.labelColumn);
+  const documentIds = chunkXTR26TNE_cjs.usePresentation((s) => s.clips.map((clip) => clip.documentId).join(" "));
+  const columns = react.useMemo(
+    () => (tags ?? []).filter((tag) => tag.kind !== "search" && VALUE_FORMATS.has(tag.tag_type.type)).map((tag) => ({ id: tag.external_id, name: tag.name })).sort((a, b) => a.name.localeCompare(b.name)),
+    [tags]
+  );
+  react.useEffect(() => {
+    const values = {};
+    if (labelColumn) {
+      const wanted = new Set(documentIds.split(" "));
+      for (const doc of documents ?? []) {
+        if (!wanted.has(doc.external_id)) continue;
+        const note2 = doc.doctags?.find((dt) => dt.tag_ext_id === labelColumn)?.note?.trim();
+        if (note2) values[doc.external_id] = note2;
+      }
+    }
+    chunkXTR26TNE_cjs.usePresentation.getState().setColumnValues(values);
+  }, [labelColumn, documentIds, documents]);
+  return columns;
+}
+function usePresentationController(active) {
+  const session = react$1.useArbiSessionStore();
+  const notify = chunkXTR26TNE_cjs.usePresentation((s) => s.notify);
+  const { save, canSave } = usePresentationFiles();
+  const labelColumns = useLabelColumns(active);
+  const [dialog, setDialog] = react.useState(null);
+  const [reference, setReference] = react.useState(null);
+  const [cropping, setCropping] = react.useState(null);
+  const cropClip = chunkXTR26TNE_cjs.usePresentation((s) => s.clips.find((c) => c.id === cropping) ?? null);
+  const [saving, setSaving] = react.useState(false);
+  const close = (open) => !open && setDialog(null);
+  const quickSave = react.useCallback(async () => {
+    const { savedId, title } = chunkXTR26TNE_cjs.usePresentation.getState();
+    if (!savedId) return setDialog("save");
+    setSaving(true);
+    try {
+      await save(title);
+      notify("Presentation saved", "success");
+    } catch (error) {
+      notify(
+        error instanceof Error ? error.message : "The presentation could not be saved",
+        "error"
+      );
+    } finally {
+      setSaving(false);
+    }
+  }, [save, notify]);
+  const generate = react.useCallback((referenceId) => {
+    setReference(referenceId);
+    setDialog("generate");
+  }, []);
+  const saveModes = ["save", "saveAs", "export", "template"];
+  const dialogs = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SavePresentationDialog,
+      {
+        open: saveModes.includes(dialog),
+        mode: saveModes.includes(dialog) ? dialog : "save",
+        onOpenChange: close
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      OpenPresentationDialog,
+      {
+        open: dialog === "open" || dialog === "fromTemplate",
+        templates: dialog === "fromTemplate",
+        onOpened: (id) => chunk5LTIZ44D_cjs.editPresentation(session, id ? { kind: "open", documentId: id } : { kind: "new" }),
+        onOpenChange: close
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(ChooseLogoDialog, { open: dialog === "logo", onOpenChange: close }),
+    /* @__PURE__ */ jsxRuntime.jsx(CropClipDialog, { clip: cropClip, onOpenChange: (open) => !open && setCropping(null) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      GenerateImageDialog,
+      {
+        open: dialog === "generate",
+        referenceId: reference,
+        onOpenChange: close
+      }
+    )
+  ] });
+  const editor = {
+    actions: canSave && /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        type: "button",
+        size: "icon",
+        variant: "ghost",
+        className: "size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11",
+        title: "Save (in Files \u203A Presentations)",
+        "aria-label": "Save",
+        disabled: saving,
+        onClick: () => void quickSave(),
+        "data-testid": "presentation-save",
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "size-4" })
+      }
+    ),
+    menuItems: canSave && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuItem, { onSelect: () => setDialog("open"), children: "Open\u2026" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuItem, { onSelect: () => setDialog("fromTemplate"), children: "New from template\u2026" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuItem, { onSelect: () => setDialog("saveAs"), children: "Save as\u2026" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuItem, { onSelect: () => setDialog("template"), children: "Save as template\u2026" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuItem, { onSelect: () => setDialog("export"), children: "Export PDF\u2026" }),
+      /* @__PURE__ */ jsxRuntime.jsx(LabelColumnMenu, { columns: labelColumns })
+    ] }),
+    trayStart: canSave && /* @__PURE__ */ jsxRuntime.jsx(GenerateTile, { onClick: () => generate(null) }),
+    onChooseLogo: canSave ? () => setDialog("logo") : void 0,
+    onEditImage: (clipId) => {
+      const clip = chunkXTR26TNE_cjs.usePresentation.getState().clips.find((c) => c.id === clipId);
+      if (clip) generate(clip.documentId);
+    },
+    onCropImage: setCropping
+  };
+  return { editor, dialogs };
+}
+
+exports.PresentationStage = PresentationStage;
+exports.SlidesEditor = SlidesEditor;
+exports.usePresentationController = usePresentationController;
+exports.usePresentationFiles = usePresentationFiles;
+//# sourceMappingURL=chunk-Q3XJUXID.cjs.map
+//# sourceMappingURL=chunk-Q3XJUXID.cjs.map