@arbidocs/blocks 0.5.121 → 0.5.123

package/dist/{chunk-Q3XJUXID.cjs → chunk-DWMWEALB.cjs}

@@ -3,10 +3,10 @@
 
 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 chunk2F57IO7S_cjs = require('./chunk-2F57IO7S.cjs');
+var chunkUFT22LAB_cjs = require('./chunk-UFT22LAB.cjs');
+var chunkWFMWKPGY_cjs = require('./chunk-WFMWKPGY.cjs');
+var chunk4TTX6ZNS_cjs = require('./chunk-4TTX6ZNS.cjs');
 var chunk7JLJH5CW_cjs = require('./chunk-7JLJH5CW.cjs');
 var chunkVZOOGA47_cjs = require('./chunk-VZOOGA47.cjs');
 var chunkTKHCIHE2_cjs = require('./chunk-TKHCIHE2.cjs');
@@ -62,7 +62,7 @@ function MediaClip({
           preload: "auto",
           className: "pointer-events-none block select-none",
           style: cropStyle(clip.rect),
-          ...live ? { [chunk5LTIZ44D_cjs.STAGE_VIDEO_ATTRIBUTE]: "" } : {}
+          ...live ? { [chunkWFMWKPGY_cjs.STAGE_VIDEO_ATTRIBUTE]: "" } : {}
         }
       ) : /* @__PURE__ */ jsxRuntime.jsx(
         "img",
@@ -191,7 +191,7 @@ 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();
+  const state = chunk4TTX6ZNS_cjs.usePresentation.getState();
   if (target.getAttribute(DROP_ATTRIBUTE) === "slide") {
     const index2 = Number(target.getAttribute("data-slide-index"));
     if (!Number.isInteger(index2)) return false;
@@ -211,7 +211,7 @@ function useClipDrag(clipId, onTap) {
   const end = () => {
     press.current = null;
     setGhost(null);
-    chunkXTR26TNE_cjs.usePresentation.getState().setDragging(null);
+    chunk4TTX6ZNS_cjs.usePresentation.getState().setDragging(null);
   };
   return {
     ghost,
@@ -227,7 +227,7 @@ function useClipDrag(clipId, onTap) {
           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);
+          chunk4TTX6ZNS_cjs.usePresentation.getState().setDragging(clipId);
         }
         event.preventDefault();
         setGhost({ x: event.clientX, y: event.clientY });
@@ -265,7 +265,7 @@ function Label({ clip }) {
         "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);
+          chunk4TTX6ZNS_cjs.usePresentation.getState().setCaption(clip.id, event.target.value);
           setEditing(false);
         },
         onKeyDown: (event) => {
@@ -287,7 +287,7 @@ function Label({ clip }) {
   );
 }
 function TrayTile({ clip, onSlide }) {
-  const { place, removeClip } = chunkXTR26TNE_cjs.usePresentation.getState();
+  const { place, removeClip } = chunk4TTX6ZNS_cjs.usePresentation.getState();
   const drag = useClipDrag(clip.id, () => !onSlide && place(clip.id));
   const itemRef = react.useRef(null);
   const size = tileSize(clip.aspect);
@@ -354,9 +354,9 @@ function TrayTile({ clip, onSlide }) {
   );
 }
 function ClipTray({ start }) {
-  const all = chunkXTR26TNE_cjs.usePresentation((s) => s.clips);
+  const all = chunk4TTX6ZNS_cjs.usePresentation((s) => s.clips);
   const clips = react.useMemo(() => all.filter((clip) => !clip.plain), [all]);
-  const slide = chunkXTR26TNE_cjs.usePresentation(chunkXTR26TNE_cjs.currentSlide);
+  const slide = chunk4TTX6ZNS_cjs.usePresentation(chunk4TTX6ZNS_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",
@@ -411,7 +411,7 @@ function CustomColor({
           "input",
           {
             type: "color",
-            value: chunkXTR26TNE_cjs.isHexColor(value) ? value : "#1f2937",
+            value: chunk4TTX6ZNS_cjs.isHexColor(value) ? value : "#1f2937",
             onChange: (event) => onChange(event.target.value),
             "aria-label": label,
             className: "absolute inset-0 cursor-pointer opacity-0"
@@ -422,10 +422,10 @@ function CustomColor({
   );
 }
 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);
+  const theme = chunk4TTX6ZNS_cjs.usePresentation((s) => s.theme);
+  const setTheme = chunk4TTX6ZNS_cjs.usePresentation((s) => s.setTheme);
+  const customBackground = chunk4TTX6ZNS_cjs.isHexColor(theme.background);
+  const customAccent = !chunk4TTX6ZNS_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,
@@ -442,7 +442,7 @@ function DesignMenu({ onChooseLogo }) {
     ) }),
     /* @__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(
+        chunk4TTX6ZNS_cjs.BACKGROUNDS.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
@@ -454,7 +454,7 @@ function DesignMenu({ onChooseLogo }) {
               "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" },
+            style: { background: chunk4TTX6ZNS_cjs.backgroundCss(preset.id), containerType: "inline-size" },
             "data-testid": `design-background-${preset.id}`
           },
           preset.id
@@ -469,7 +469,7 @@ function DesignMenu({ onChooseLogo }) {
           }
         )
       ] }) }),
-      /* @__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(
+      /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "Typeface", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2", children: Object.keys(chunk4TTX6ZNS_cjs.FONTS).map((font) => /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
           type: "button",
@@ -481,14 +481,14 @@ function DesignMenu({ onChooseLogo }) {
           ),
           "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 })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl leading-tight", style: { fontFamily: chunk4TTX6ZNS_cjs.FONTS[font].css }, children: "Aa" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-muted-foreground", children: chunk4TTX6ZNS_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(
+        chunk4TTX6ZNS_cjs.ACCENTS.map((accent) => /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
@@ -500,7 +500,7 @@ function DesignMenu({ onChooseLogo }) {
               "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) },
+            style: { background: chunk4TTX6ZNS_cjs.accentColor(accent.color) },
             children: theme.accent === accent.color && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-3.5 text-black/70" })
           },
           accent.color
@@ -508,7 +508,7 @@ function DesignMenu({ onChooseLogo }) {
         /* @__PURE__ */ jsxRuntime.jsx(
           CustomColor,
           {
-            value: chunkXTR26TNE_cjs.accentColor(theme.accent),
+            value: chunk4TTX6ZNS_cjs.accentColor(theme.accent),
             selected: customAccent,
             label: "Your own accent colour",
             round: true,
@@ -571,13 +571,13 @@ var at = (box2) => ({
   height: `${box2.h * 100}%`
 });
 function LayoutThumb({ layout, className }) {
-  const geometry = chunkXTR26TNE_cjs.slideGeometry({ layout, caption: "Title" }, { labels: false, logo: null });
+  const geometry = chunk4TTX6ZNS_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
+    x: chunk4TTX6ZNS_cjs.STAGE_MARGIN,
+    y: chunk4TTX6ZNS_cjs.STAGE_MARGIN + top,
+    w: 1 - 2 * chunk4TTX6ZNS_cjs.STAGE_MARGIN - right,
+    h: 1 - 2 * chunk4TTX6ZNS_cjs.STAGE_MARGIN - top - bottom
   };
   const blocks = layout === "title" || layout === "section" || layout === "free" ? [] : columns === 2 ? [
     { ...room, w: room.w / 2 - 0.02 },
@@ -628,10 +628,10 @@ function LayoutMenu({
   className,
   compact = false
 }) {
-  const layout = chunkXTR26TNE_cjs.usePresentation(
-    (s) => (index === void 0 ? chunkXTR26TNE_cjs.currentSlide(s) : s.slides[index])?.layout ?? "clips"
+  const layout = chunk4TTX6ZNS_cjs.usePresentation(
+    (s) => (index === void 0 ? chunk4TTX6ZNS_cjs.currentSlide(s) : s.slides[index])?.layout ?? "clips"
   );
-  const setSlideLayout = chunkXTR26TNE_cjs.usePresentation((s) => s.setSlideLayout);
+  const setSlideLayout = chunk4TTX6ZNS_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,
@@ -644,7 +644,7 @@ function LayoutMenu({
           className
         ),
         title: "Slide layout",
-        "aria-label": `Slide layout: ${chunkXTR26TNE_cjs.LAYOUT_INFO[layout].label}`,
+        "aria-label": `Slide layout: ${chunk4TTX6ZNS_cjs.LAYOUT_INFO[layout].label}`,
         "data-testid": "presentation-layout",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(LayoutThumb, { layout, className: compact ? "w-6" : "w-7" }),
@@ -652,7 +652,7 @@ function LayoutMenu({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuContent, { align: "start", className: "w-56", children: chunkXTR26TNE_cjs.SLIDE_LAYOUTS.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuContent, { align: "start", className: "w-56", children: chunk4TTX6ZNS_cjs.SLIDE_LAYOUTS.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
       ui.DropdownMenuItem,
       {
         onSelect: () => setSlideLayout(option, index),
@@ -660,7 +660,7 @@ function LayoutMenu({
         "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 })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: chunk4TTX6ZNS_cjs.LAYOUT_INFO[option].label })
         ]
       },
       option
@@ -668,11 +668,11 @@ function LayoutMenu({
   ] });
 }
 function Notice() {
-  const notice = chunkXTR26TNE_cjs.usePresentation((s) => s.notice);
+  const notice = chunk4TTX6ZNS_cjs.usePresentation((s) => s.notice);
   react.useEffect(() => {
     if (!notice) return;
     const timer = setTimeout(
-      () => chunkXTR26TNE_cjs.usePresentation.getState().clearNotice(notice.id),
+      () => chunk4TTX6ZNS_cjs.usePresentation.getState().clearNotice(notice.id),
       notice.kind === "error" ? 8e3 : 3e3
     );
     return () => clearTimeout(timer);
@@ -693,7 +693,7 @@ function Notice() {
             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),
+            onClick: () => chunk4TTX6ZNS_cjs.usePresentation.getState().clearNotice(notice.id),
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3.5" })
           }
         )
@@ -701,6 +701,132 @@ function Notice() {
     }
   );
 }
+var PAN_STEP = 0.1;
+var MAX_ZOOM = 800;
+var HOLD_DELAY = 350;
+var HOLD_EVERY = 90;
+var BUTTON = "flex size-7 items-center justify-center rounded-full border border-border bg-background text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-30 pointer-coarse:size-11";
+function HoldButton({
+  label,
+  disabled,
+  onStep,
+  className,
+  children
+}) {
+  const timer = react.useRef(null);
+  const stop = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+  };
+  react.useEffect(() => stop, []);
+  react.useEffect(() => {
+    if (disabled) stop();
+  }, [disabled]);
+  const start = (event) => {
+    event.stopPropagation();
+    if (disabled || event.button !== 0) return;
+    onStep();
+    const repeat = () => {
+      onStep();
+      timer.current = setTimeout(repeat, HOLD_EVERY);
+    };
+    timer.current = setTimeout(repeat, HOLD_DELAY);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: ui.cn(BUTTON, className),
+      title: label,
+      "aria-label": label,
+      disabled,
+      onPointerDown: start,
+      onPointerUp: stop,
+      onPointerLeave: stop,
+      onPointerCancel: stop,
+      onClick: (event) => event.detail === 0 && onStep(),
+      children
+    }
+  );
+}
+function ClipViewControls({ clip }) {
+  const { panClip, setClipZoom } = chunk4TTX6ZNS_cjs.usePresentation.getState();
+  const { rect } = clip;
+  const zoomBase = clip.zoomBase ?? rect.w;
+  const minZoom = Math.min(100, Math.floor(zoomBase / Math.min(1, rect.w / rect.h) * 100));
+  const pan = (dx, dy) => () => panClip(clip.id, dx * rect.w, dy * rect.h);
+  const zoom = Math.round(zoomBase / rect.w * 100);
+  const edge = 1e-6;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex flex-col items-center gap-2 p-1",
+      onPointerDown: (event) => event.stopPropagation(),
+      "data-testid": "clip-view-controls",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 grid-rows-3 place-items-center gap-0.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            HoldButton,
+            {
+              label: "Show more above",
+              disabled: rect.y <= edge,
+              onStep: pan(0, -PAN_STEP),
+              className: "col-start-2 row-start-1",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            HoldButton,
+            {
+              label: "Show more on the left",
+              disabled: rect.x <= edge,
+              onStep: pan(-PAN_STEP, 0),
+              className: "col-start-1 row-start-2",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            HoldButton,
+            {
+              label: "Show more on the right",
+              disabled: rect.x + rect.w >= 1 - edge,
+              onStep: pan(PAN_STEP, 0),
+              className: "col-start-3 row-start-2",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            HoldButton,
+            {
+              label: "Show more below",
+              disabled: rect.y + rect.h >= 1 - edge,
+              onStep: pan(0, PAN_STEP),
+              className: "col-start-2 row-start-3",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "clip-zoom-control", children: /* @__PURE__ */ jsxRuntime.jsx(
+          chunk5GCCUXMT_cjs.ZoomSlider,
+          {
+            value: zoom,
+            min: minZoom,
+            max: Math.max(MAX_ZOOM, zoom),
+            zoomOutStep: 25,
+            onChange: (value) => setClipZoom(clip.id, value),
+            label: "Zoom",
+            valueLabel: /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "clip-zoom", children: [
+              zoom,
+              "%"
+            ] }),
+            className: "pointer-coarse:h-11",
+            sliderClassName: "w-28"
+          }
+        ) })
+      ]
+    }
+  );
+}
 var ACTION = "inline-flex size-7 items-center justify-center rounded text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:size-11";
 var SIZES = [
   { command: "fit", label: "Fit the slide", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "size-4" }) },
@@ -729,7 +855,8 @@ function ClipActionBar({
   onEditImage,
   onCropImage
 }) {
-  const actions = chunkXTR26TNE_cjs.usePresentation.getState();
+  const actions = chunk4TTX6ZNS_cjs.usePresentation.getState();
+  const clip = chunk4TTX6ZNS_cjs.usePresentation((state) => state.clips.find((entry) => entry.id === clipId));
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -740,7 +867,7 @@ function ClipActionBar({
       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.jsx(Action, { label: "Fit the slide", onClick: () => actions.applyFrame(clipId, "fit"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "size-4" }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: ACTION, title: "Align", "aria-label": "Align", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignCenterHorizontal, { className: "size-4" }) }) }),
           /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuContent, { align: "start", children: ALIGNMENTS.map(({ alignment, label, icon }) => /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuItem, { onSelect: () => actions.align(clipId, alignment), children: [
@@ -748,11 +875,56 @@ function ClipActionBar({
             /* @__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" }) }),
+        clip && /* @__PURE__ */ jsxRuntime.jsxs(ui.Popover, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: ACTION,
+              title: "View: scroll or zoom what the clip shows (or scroll over it)",
+              "aria-label": "View",
+              "data-testid": "clip-view-button",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ZoomIn, { className: "size-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.PopoverContent, { align: "start", className: "w-auto p-2", children: /* @__PURE__ */ jsxRuntime.jsx(ClipViewControls, { clip }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: ACTION,
+              title: "More",
+              "aria-label": "More",
+              "data-testid": "clip-more-menu",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "size-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuContent, { align: "start", children: [
+            SIZES.filter(({ command }) => command !== "fit").map(({ command, label, icon }) => /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuItem, { onSelect: () => actions.applyFrame(clipId, command), children: [
+              icon,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: label })
+            ] }, command)),
+            onCropImage && /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuItem, { onSelect: onCropImage, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Crop, { className: "size-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Crop" })
+            ] }),
+            onEditImage && /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuItem, { onSelect: onEditImage, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "size-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Edit image" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuItem, { onSelect: () => actions.bringToFront(clipId), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BringToFront, { className: "size-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Bring to front" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuItem, { onSelect: () => actions.sendToBack(clipId), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SendToBack, { className: "size-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Send to back" })
+            ] })
+          ] })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-0.5 h-5 w-px bg-border" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
@@ -808,7 +980,7 @@ function Text({
         box2.anchor === "middle" && "justify-center",
         box2.anchor === "bottom" && "justify-end"
       ),
-      style: textStyle(box2, empty ? PLACEHOLDER_COLOR : chunkXTR26TNE_cjs.TEXT_COLORS[box2.tone]),
+      style: textStyle(box2, empty ? PLACEHOLDER_COLOR : chunk4TTX6ZNS_cjs.TEXT_COLORS[box2.tone]),
       onPointerDown: onEdit ? (event) => event.stopPropagation() : void 0,
       onClick: onEdit,
       "data-testid": testId,
@@ -857,7 +1029,7 @@ function TextField({
         box2.align === "center" && "text-center"
       ),
       style: {
-        ...textStyle(box2, chunkXTR26TNE_cjs.TEXT_COLORS[box2.tone]),
+        ...textStyle(box2, chunk4TTX6ZNS_cjs.TEXT_COLORS[box2.tone]),
         fontFamily: "inherit",
         // Bulleted lines keep their indent while typed.
         paddingLeft: box2.bullets ? "1.22em" : void 0
@@ -891,10 +1063,10 @@ var SlideDecor = react.memo(function SlideDecor2({
   dim
 }) {
   const [typing, setTyping] = react.useState(null);
-  const geometry = chunkXTR26TNE_cjs.slideGeometry(slide, { labels, logo: theme.logo?.corner ?? null });
+  const geometry = chunk4TTX6ZNS_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];
+  const info = chunk4TTX6ZNS_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,
@@ -912,7 +1084,7 @@ var SlideDecor = react.memo(function SlideDecor2({
       {
         box: geometry.title,
         lines: title ? [title] : [],
-        accent: chunkXTR26TNE_cjs.accentColor(theme.accent),
+        accent: chunk4TTX6ZNS_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"
@@ -922,7 +1094,7 @@ var SlideDecor = react.memo(function SlideDecor2({
       "div",
       {
         className: "absolute",
-        style: { ...boxStyle(geometry.rule), background: chunkXTR26TNE_cjs.accentColor(theme.accent) }
+        style: { ...boxStyle(geometry.rule), background: chunk4TTX6ZNS_cjs.accentColor(theme.accent) }
       }
     ),
     geometry.text && (editing && typing === "text" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -940,8 +1112,8 @@ var SlideDecor = react.memo(function SlideDecor2({
       Text,
       {
         box: geometry.text,
-        lines: chunkXTR26TNE_cjs.textLines(slide.points),
-        accent: chunkXTR26TNE_cjs.accentColor(theme.accent),
+        lines: chunk4TTX6ZNS_cjs.textLines(slide.points),
+        accent: chunk4TTX6ZNS_cjs.accentColor(theme.accent),
         placeholder: editable ? info.text : void 0,
         onEdit: editing ? () => setTyping("text") : void 0,
         testId: "stage-slide-points"
@@ -950,137 +1122,6 @@ var SlideDecor = react.memo(function SlideDecor2({
     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" },
@@ -1094,7 +1135,7 @@ var CORNERS = [
   { 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 EDGE_CSS = chunk4TTX6ZNS_cjs.clipEdgeCss();
 var StageItem = react.memo(function StageItem2({
   clip,
   frame,
@@ -1106,7 +1147,6 @@ var StageItem = react.memo(function StageItem2({
 }) {
   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;
@@ -1156,7 +1196,6 @@ var StageItem = react.memo(function StageItem2({
     const g = gesture.current;
     if (!g) return;
     if (!g.next) {
-      setDragging(true);
       host.dragging(true);
       if (element.current) element.current.style.willChange = "transform";
     }
@@ -1164,14 +1203,14 @@ var StageItem = react.memo(function StageItem2({
     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);
+      const result = chunk4TTX6ZNS_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.next = g.kind === "move" ? chunk4TTX6ZNS_cjs.moveFrame(g.frame, g.shape.aspect, dx, dy, g.others, free) : chunk4TTX6ZNS_cjs.resizeFrame(g.frame, g.shape.aspect, g.kind, dx, dy, g.others, free);
     }
     g.request ??= view().requestAnimationFrame(apply);
   };
@@ -1187,7 +1226,6 @@ var StageItem = react.memo(function StageItem2({
     }
     if (!g.next) return;
     setReshape(null);
-    setDragging(false);
     host.dragging(false);
     host.guides([]);
     host.commit(clip.id, g.next.frame, g.next.shape);
@@ -1208,7 +1246,7 @@ var StageItem = react.memo(function StageItem2({
         left: `${box2.x * 100}%`,
         top: `${box2.y * 100}%`,
         width: `${box2.w * 100}%`,
-        height: `${chunkXTR26TNE_cjs.frameHeight(box2, shown.aspect) * 100}%`
+        height: `${chunk4TTX6ZNS_cjs.frameHeight(box2, shown.aspect) * 100}%`
       },
       onPointerDown: (event) => start(event, "move"),
       onPointerMove: move,
@@ -1233,11 +1271,10 @@ var StageItem = react.memo(function StageItem2({
           "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 },
+            style: { color: chunk4TTX6ZNS_cjs.TEXT_COLORS.muted },
             children: label
           }
         ),
-        selected && !dragging && /* @__PURE__ */ jsxRuntime.jsx(ClipViewControls, { clip }),
         selected && CORNERS.map(({ corner, left, top, cursor }) => /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -1277,14 +1314,14 @@ var StageItem = react.memo(function StageItem2({
 });
 
 // src/presentation/box-style.ts
-var cqw = (points) => `${chunkXTR26TNE_cjs.pointsToStage(points) * 100}cqw`;
+var cqw = (points) => `${chunk4TTX6ZNS_cjs.pointsToStage(points) * 100}cqw`;
 function runStyle(run, font) {
   return {
-    fontSize: cqw(run.size ?? chunkXTR26TNE_cjs.DEFAULT_TEXT_SIZE),
+    fontSize: cqw(run.size ?? chunk4TTX6ZNS_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,
+    color: run.color ?? chunk4TTX6ZNS_cjs.TEXT_COLORS.body,
     fontFamily: run.font ? `"${run.font}", ${font}` : font
   };
 }
@@ -1306,7 +1343,7 @@ var withAlpha = (hex3, alpha = 1) => {
 function shapeStyle(box2) {
   const { frame } = box2;
   const line = box2.line;
-  const shorter = Math.min(frame.w, frame.h * 1 / chunkXTR26TNE_cjs.STAGE_ASPECT);
+  const shorter = Math.min(frame.w, frame.h * 1 / chunk4TTX6ZNS_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,
@@ -1319,7 +1356,7 @@ function Paragraphs({
 }) {
   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 size = first?.size ?? chunk4TTX6ZNS_cjs.DEFAULT_TEXT_SIZE;
     const indent = (paragraph.level ?? 0) * 0.5 * size;
     const empty = !paragraph.runs.some((run) => run.text);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1406,7 +1443,7 @@ var StageBox = react.memo(function StageBox2({
     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.next = g.handle === "move" ? chunk4TTX6ZNS_cjs.moveBox(g.frame, dx, dy) : chunk4TTX6ZNS_cjs.stretchBox(g.frame, g.handle, dx, dy);
     g.request ??= view().requestAnimationFrame(apply);
   };
   const end = () => {
@@ -1430,8 +1467,8 @@ var StageBox = react.memo(function StageBox2({
     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 inset = cqw(box2.inset ?? chunk4TTX6ZNS_cjs.DEFAULT_INSET);
+  const run = chunk4TTX6ZNS_cjs.firstRun(box2);
   const transform = box2.rotation ? `rotate(${box2.rotation}deg)` : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -1479,7 +1516,7 @@ var StageBox = react.memo(function StageBox2({
                 y1: box2.flipV ? "100%" : "0%",
                 x2: "100%",
                 y2: box2.flipV ? "0%" : "100%",
-                stroke: box2.line?.color ?? chunkXTR26TNE_cjs.TEXT_COLORS.body,
+                stroke: box2.line?.color ?? chunk4TTX6ZNS_cjs.TEXT_COLORS.body,
                 style: { strokeWidth: cqw(box2.line?.width ?? 1) },
                 strokeDasharray: box2.line?.dash ? "6 4" : void 0
               }
@@ -1498,7 +1535,7 @@ var StageBox = react.memo(function StageBox2({
               "textarea",
               {
                 autoFocus: true,
-                defaultValue: chunkXTR26TNE_cjs.boxText(box2),
+                defaultValue: chunk4TTX6ZNS_cjs.boxText(box2),
                 className: "pointer-events-auto w-full flex-1 resize-none bg-transparent p-0 outline-none",
                 style: {
                   ...runStyle(run ?? { }, font),
@@ -1517,11 +1554,11 @@ var StageBox = react.memo(function StageBox2({
                 "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(
+            ) : chunk4TTX6ZNS_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) },
+                style: { fontSize: cqw(run?.size ?? chunk4TTX6ZNS_cjs.DEFAULT_TEXT_SIZE) },
                 children: "Double-click to type"
               }
             )
@@ -1547,12 +1584,6 @@ var StageBox = react.memo(function StageBox2({
 });
 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" }),
@@ -1587,9 +1618,9 @@ function ColorAction({
   ] });
 }
 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 actions = chunk4TTX6ZNS_cjs.usePresentation.getState();
+  const run = chunk4TTX6ZNS_cjs.firstRun(box2);
+  const size = run?.size ?? chunk4TTX6ZNS_cjs.DEFAULT_TEXT_SIZE;
   const align = box2.paragraphs[0]?.align ?? "left";
   const update = (change) => actions.updateBox(box2.id, change);
   const text = box2.shape !== "line";
@@ -1612,7 +1643,7 @@ function BoxActionBar({ box: box2, onRemoved }) {
             Action,
             {
               label: "Smaller",
-              onClick: () => update((b) => chunkXTR26TNE_cjs.styleRuns(b, (r) => ({ ...r, size: nextSize(r.size ?? size, false) }))),
+              onClick: () => update((b) => chunk4TTX6ZNS_cjs.styleRuns(b, (r) => ({ ...r, size: nextSize(r.size ?? size, false) }))),
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AArrowDown, { className: "size-4" })
             }
           ),
@@ -1628,7 +1659,7 @@ function BoxActionBar({ box: box2, onRemoved }) {
             Action,
             {
               label: "Larger",
-              onClick: () => update((b) => chunkXTR26TNE_cjs.styleRuns(b, (r) => ({ ...r, size: nextSize(r.size ?? size, true) }))),
+              onClick: () => update((b) => chunk4TTX6ZNS_cjs.styleRuns(b, (r) => ({ ...r, size: nextSize(r.size ?? size, true) }))),
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AArrowUp, { className: "size-4" })
             }
           ),
@@ -1636,35 +1667,16 @@ function BoxActionBar({ box: box2, onRemoved }) {
             Action,
             {
               label: "Bold",
-              onClick: () => update((b) => chunkXTR26TNE_cjs.styleRuns(b, (r) => ({ ...r, bold: !run?.bold }))),
+              onClick: () => update((b) => chunk4TTX6ZNS_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 }))),
+              value: run?.color ?? chunk4TTX6ZNS_cjs.TEXT_COLORS.body,
+              onChange: (color) => update((b) => chunk4TTX6ZNS_cjs.styleRuns(b, (r) => ({ ...r, color }))),
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Baseline, { className: "size-4" })
             }
           )
@@ -1680,10 +1692,58 @@ function BoxActionBar({ box: box2, onRemoved }) {
             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.jsxs(ui.DropdownMenu, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: ACTION,
+              title: "More",
+              "aria-label": "More",
+              "data-testid": "box-more-menu",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "size-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuContent, { align: "start", children: [
+            text && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                ui.DropdownMenuCheckboxItem,
+                {
+                  checked: !!run?.italic,
+                  onCheckedChange: () => update((b) => chunk4TTX6ZNS_cjs.styleRuns(b, (r) => ({ ...r, italic: !run?.italic }))),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Italic, { className: "size-4" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Italic" })
+                  ]
+                }
+              ),
+              ["left", "center", "right"].map((value) => /* @__PURE__ */ jsxRuntime.jsxs(
+                ui.DropdownMenuCheckboxItem,
+                {
+                  checked: align === value,
+                  onCheckedChange: () => update((b) => ({
+                    ...b,
+                    paragraphs: b.paragraphs.map((p) => ({ ...p, align: value }))
+                  })),
+                  children: [
+                    ALIGN_ICON[value],
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: value === "left" ? "Align left" : value === "center" ? "Centre" : "Align right" })
+                  ]
+                },
+                value
+              )),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuSeparator, {})
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuItem, { onSelect: () => actions.restackBox(box2.id, "front"), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BringToFront, { className: "size-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "In front of the clips" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuItem, { onSelect: () => actions.restackBox(box2.id, "back"), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SendToBack, { className: "size-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Behind the clips" })
+            ] })
+          ] })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -1728,18 +1788,18 @@ function PresentationStage({
   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 index = chunk4TTX6ZNS_cjs.usePresentation((s) => slideIndex ?? s.current);
+  const slide = chunk4TTX6ZNS_cjs.usePresentation((s) => s.slides[index]);
+  const clips = chunk4TTX6ZNS_cjs.usePresentation((s) => s.clips);
+  const blank = chunk4TTX6ZNS_cjs.usePresentation((s) => s.blank && !editable);
+  const captions = chunk4TTX6ZNS_cjs.usePresentation((s) => s.captions);
+  const columnValues = chunk4TTX6ZNS_cjs.usePresentation((s) => s.columnValues);
+  const theme = chunk4TTX6ZNS_cjs.usePresentation((s) => s.theme);
+  const logoImage = chunk4TTX6ZNS_cjs.usePresentation((s) => s.logoImage);
+  const media = chunk4TTX6ZNS_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 dropping = chunk4TTX6ZNS_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 };
@@ -1754,13 +1814,13 @@ function PresentationStage({
         }));
       },
       select: (clipId) => {
-        chunkXTR26TNE_cjs.usePresentation.getState().goTo(latest.current.index);
+        chunk4TTX6ZNS_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();
+        const state = chunk4TTX6ZNS_cjs.usePresentation.getState();
         state.goTo(latest.current.index);
         if (shape) state.reshapeClip(clipId, frame, shape.rect, shape.aspect);
         else state.setFrame(clipId, frame);
@@ -1772,15 +1832,15 @@ function PresentationStage({
     () => ({
       stageBox: () => stageRef.current?.getBoundingClientRect() ?? null,
       select: (boxId) => {
-        chunkXTR26TNE_cjs.usePresentation.getState().goTo(latest.current.index);
+        chunk4TTX6ZNS_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)
+      commit: (boxId, frame) => chunk4TTX6ZNS_cjs.usePresentation.getState().updateBox(boxId, (box2) => ({ ...box2, frame })),
+      setText: (boxId, text) => chunk4TTX6ZNS_cjs.usePresentation.getState().setBoxText(boxId, text)
     }),
     []
   );
-  const font = chunkXTR26TNE_cjs.FONTS[theme.font].css;
+  const font = chunk4TTX6ZNS_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(
@@ -1806,7 +1866,7 @@ function PresentationStage({
       const item = event.target?.closest?.(
         `[data-testid="stage-item-${selected}"]`
       );
-      const clip = chunkXTR26TNE_cjs.usePresentation.getState().clips.find((entry) => entry.id === selected);
+      const clip = chunk4TTX6ZNS_cjs.usePresentation.getState().clips.find((entry) => entry.id === selected);
       if (!item || !clip) return;
       event.preventDefault();
       const box2 = item.getBoundingClientRect();
@@ -1819,7 +1879,7 @@ function PresentationStage({
       };
       request ??= view.requestAnimationFrame(() => {
         request = null;
-        chunkXTR26TNE_cjs.usePresentation.getState().panClip(selected, sum.x, sum.y);
+        chunk4TTX6ZNS_cjs.usePresentation.getState().panClip(selected, sum.x, sum.y);
         sum = { x: 0, y: 0 };
       });
     };
@@ -1848,12 +1908,12 @@ function PresentationStage({
             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
+            background: slide?.background ? chunk4TTX6ZNS_cjs.slideBackgroundCss(slide.background, media) : chunk4TTX6ZNS_cjs.backgroundCss(theme.background),
+            fontFamily: chunk4TTX6ZNS_cjs.FONTS[theme.font].css
           },
           onPointerDown: () => {
             if (!editable) return;
-            chunkXTR26TNE_cjs.usePresentation.getState().goTo(index);
+            chunk4TTX6ZNS_cjs.usePresentation.getState().goTo(index);
             onSelect?.(null);
           },
           ...editable ? { [DROP_ATTRIBUTE]: "stage", "data-slide-index": index } : {},
@@ -1883,7 +1943,7 @@ function PresentationStage({
                   editable,
                   selected: editable && selected === clip.id,
                   dim: false,
-                  label: captions ? chunkXTR26TNE_cjs.clipLabel(clip, columnValues) : "",
+                  label: captions ? chunk4TTX6ZNS_cjs.clipLabel(clip, columnValues) : "",
                   host
                 },
                 clip.id
@@ -1909,27 +1969,6 @@ function PresentationStage({
     }
   );
 }
-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,
@@ -1939,20 +1978,20 @@ var SlideCard = react.memo(function SlideCard2({
   onEditImage,
   onCropImage
 }) {
-  const empty = chunkXTR26TNE_cjs.usePresentation((s) => {
+  const empty = chunk4TTX6ZNS_cjs.usePresentation((s) => {
     const slide = s.slides[index];
-    return !!slide && !slide.items.length && !slide.boxes.length && slide.layout !== "title" && slide.layout !== "section";
+    return !!slide && !slide.items.length && !slide.boxes.length && !slide.points.trim() && slide.layout !== "title" && slide.layout !== "section";
   });
-  const notes = chunkXTR26TNE_cjs.usePresentation((s) => s.slides[index]?.notes ?? "");
+  const notes = chunk4TTX6ZNS_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)
+      onTitle: (title) => chunk4TTX6ZNS_cjs.usePresentation.getState().setSlideCaption(title, index),
+      onPoints: (points) => chunk4TTX6ZNS_cjs.usePresentation.getState().setSlidePoints(points, index)
     }),
     [index]
   );
   const select = react.useCallback((clipId) => onSelect(index, clipId), [onSelect, index]);
-  const actions = chunkXTR26TNE_cjs.usePresentation.getState();
+  const actions = chunk4TTX6ZNS_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(
@@ -1976,26 +2015,61 @@ var SlideCard = react.memo(function SlideCard2({
           "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(ui.DropdownMenu, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Button,
+                {
+                  type: "button",
+                  size: "icon",
+                  variant: "ghost",
+                  className: "size-7 text-muted-foreground hover:text-foreground pointer-coarse:size-11",
+                  title: "Slide actions",
+                  "aria-label": `Slide ${index + 1} actions`,
+                  "data-testid": `slide-menu-${index}`,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "size-3.5" })
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuContent, { align: "start", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  ui.DropdownMenuItem,
+                  {
+                    disabled: index === 0,
+                    onSelect: () => actions.moveSlide(index, index - 1),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "size-4" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Move up" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  ui.DropdownMenuItem,
+                  {
+                    disabled: index === count - 1,
+                    onSelect: () => actions.moveSlide(index, index + 1),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "size-4" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Move down" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuItem, { onSelect: () => actions.duplicateSlide(index), children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "size-4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Duplicate" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuSeparator, {}),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  ui.DropdownMenuItem,
+                  {
+                    className: "text-destructive",
+                    onSelect: () => actions.removeSlide(index),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "size-4" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Delete slide" })
+                    ]
+                  }
+                )
+              ] })
+            ] })
           ]
         }
       )
@@ -2027,7 +2101,7 @@ var SlideCard = react.memo(function SlideCard2({
               value: notes,
               rows: notes.split("\n").length,
               placeholder: "Speaker notes",
-              onChange: (event) => chunkXTR26TNE_cjs.usePresentation.getState().setSlideNotes(event.target.value, index),
+              onChange: (event) => chunk4TTX6ZNS_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}`
@@ -2051,10 +2125,10 @@ var INSERTS = [
 ];
 function InsertMenu({ onInserted }) {
   const insert = (shape) => {
-    const state = chunkXTR26TNE_cjs.usePresentation.getState();
+    const state = chunk4TTX6ZNS_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 box2 = chunk4TTX6ZNS_cjs.newBox(shape, chunk4TTX6ZNS_cjs.accentColor(state.theme.accent));
+    const dark = chunk4TTX6ZNS_cjs.isLightBackground(slide?.background);
     const { id, ...rest } = dark ? {
       ...box2,
       paragraphs: box2.paragraphs.map((p) => ({
@@ -2097,7 +2171,7 @@ function InsertSlide({ after, always }) {
     "button",
     {
       type: "button",
-      onClick: () => chunkXTR26TNE_cjs.usePresentation.getState().addSlide(void 0, after),
+      onClick: () => chunk4TTX6ZNS_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"
@@ -2120,10 +2194,11 @@ function SlidesEditor({
   onEditImage,
   onCropImage
 }) {
-  const ids = chunkXTR26TNE_cjs.usePresentation((s) => s.slides.map((slide) => slide.id).join(" "));
+  const ids = chunk4TTX6ZNS_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 current2 = chunk4TTX6ZNS_cjs.usePresentation((s) => s.current);
+  const captions = chunk4TTX6ZNS_cjs.usePresentation((s) => s.captions);
+  const presenting = chunk4TTX6ZNS_cjs.usePresentation((s) => s.presenting);
   const [selection, setSelection] = react.useState(null);
   const [view, setView] = react.useState(null);
   const list = react.useRef(null);
@@ -2137,7 +2212,7 @@ function SlidesEditor({
     () => ({ clipId: selection?.clipId ?? null, clear: () => setSelection(null) }),
     [selection]
   );
-  chunk5LTIZ44D_cjs.usePresenterKeys(view, false, keySelection);
+  chunkWFMWKPGY_cjs.usePresenterKeys(view, false, keySelection);
   react.useEffect(() => {
     const card = list.current?.querySelector(`[data-testid="slide-${current2}"]`);
     card?.scrollIntoView?.({ block: "nearest", behavior: "smooth" });
@@ -2193,13 +2268,28 @@ function SlidesEditor({
                     ui.DropdownMenuCheckboxItem,
                     {
                       checked: captions,
-                      onCheckedChange: (on) => chunkXTR26TNE_cjs.usePresentation.getState().setCaptions(!!on),
+                      onCheckedChange: (on) => chunk4TTX6ZNS_cjs.usePresentation.getState().setCaptions(!!on),
                       children: "Show source labels"
                     }
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(
+              presenting ? /* @__PURE__ */ jsxRuntime.jsxs(
+                ui.Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  variant: "destructive",
+                  className: "ml-0.5 h-8 rounded-full",
+                  onClick: () => chunk4TTX6ZNS_cjs.usePresentation.getState().setPresenting(false),
+                  title: "Stop presenting (the presentation window closes)",
+                  "data-testid": "presentation-stop-button",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Square, { className: "size-3 fill-current" }),
+                    "Stop presenting"
+                  ]
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsxs(
                 ui.Button,
                 {
                   type: "button",
@@ -2230,7 +2320,7 @@ function SlidesEditor({
 // 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 size = chunk4TTX6ZNS_cjs.pointsToStage(run.size ?? chunk4TTX6ZNS_cjs.DEFAULT_TEXT_SIZE) * width;
   const family = run.font ? `"${run.font}", ${themeFont}` : themeFont;
   return `${run.italic ? "italic " : ""}${run.bold ? 700 : 400} ${size}px ${family}`;
 }
@@ -2248,9 +2338,9 @@ function drawBox(context, box2, width, height, themeFont) {
   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;
+  const lineWidth = box2.line ? Math.max(1, chunk4TTX6ZNS_cjs.pointsToStage(box2.line.width) * width) : 0;
   if (box2.shape === "line") {
-    context.strokeStyle = box2.line?.color ?? chunkXTR26TNE_cjs.TEXT_COLORS.body;
+    context.strokeStyle = box2.line?.color ?? chunk4TTX6ZNS_cjs.TEXT_COLORS.body;
     context.lineWidth = lineWidth || 1;
     if (box2.line?.dash) context.setLineDash([lineWidth * 3, lineWidth * 2]);
     context.beginPath();
@@ -2275,12 +2365,12 @@ function drawBox(context, box2, width, height, themeFont) {
     context.stroke();
     context.setLineDash([]);
   }
-  const inset = chunkXTR26TNE_cjs.pointsToStage(box2.inset ?? chunkXTR26TNE_cjs.DEFAULT_INSET) * width;
+  const inset = chunk4TTX6ZNS_cjs.pointsToStage(box2.inset ?? chunk4TTX6ZNS_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 size = chunk4TTX6ZNS_cjs.pointsToStage(paragraph.runs[0]?.size ?? chunk4TTX6ZNS_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) {
@@ -2326,12 +2416,12 @@ function drawBox(context, box2, width, height, themeFont) {
     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.fillStyle = line.bullet.color ?? chunk4TTX6ZNS_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.fillStyle = piece.run.color ?? chunk4TTX6ZNS_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));
@@ -2348,7 +2438,7 @@ var boxWords = (box2) => box2.paragraphs.map(
 ).filter(Boolean);
 
 // src/presentation/render-slides.ts
-var SLIDE_PIXELS = { width: 1920, height: Math.round(1920 / chunkXTR26TNE_cjs.STAGE_ASPECT) };
+var SLIDE_PIXELS = { width: 1920, height: Math.round(1920 / chunk4TTX6ZNS_cjs.STAGE_ASPECT) };
 async function videoFrame(source, seconds) {
   const video = document.createElement("video");
   video.muted = true;
@@ -2460,7 +2550,7 @@ async function drawRoundedClip(context, clip, box2, stageWidth, shadow = true) {
   outline2();
   context.clip();
   await drawClip(context, clip, box2);
-  if (clip.kind === "pdf") chunkXTR26TNE_cjs.paintClipEdge(context, box2, stageWidth);
+  if (clip.kind === "pdf") chunk4TTX6ZNS_cjs.paintClipEdge(context, box2, stageWidth);
   context.restore();
   context.save();
   context.strokeStyle = "rgba(255,255,255,0.15)";
@@ -2492,7 +2582,7 @@ function wrapLines(context, text, width, max) {
 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.font = `${box2.weight} ${size}px ${chunk4TTX6ZNS_cjs.FONTS[theme.font].css}`;
   context.textBaseline = "top";
   const indent = box2.bullets ? size * 1.22 : 0;
   const left = box2.x * width;
@@ -2514,10 +2604,10 @@ function drawText(context, box2, lines, theme, width, height) {
   for (const wrapped of paragraphs) {
     if (box2.bullets) {
       const square = size * 0.42;
-      context.fillStyle = chunkXTR26TNE_cjs.accentColor(theme.accent);
+      context.fillStyle = chunk4TTX6ZNS_cjs.accentColor(theme.accent);
       context.fillRect(left, y + size * 0.5 - square / 2, square, square);
     }
-    context.fillStyle = chunkXTR26TNE_cjs.TEXT_COLORS[box2.tone];
+    context.fillStyle = chunk4TTX6ZNS_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;
@@ -2553,11 +2643,11 @@ async function loadImage(file) {
   }
 }
 function slideWords(slide) {
-  const own = slide.layout === "free" ? [] : [slide.caption.trim(), ...chunkXTR26TNE_cjs.textLines(slide.points)];
+  const own = slide.layout === "free" ? [] : [slide.caption.trim(), ...chunk4TTX6ZNS_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, {
+  const geometry = chunk4TTX6ZNS_cjs.slideGeometry(slide, {
     labels: look.labels,
     logo: look.theme.logo?.corner ?? null
   });
@@ -2565,13 +2655,13 @@ function drawSlideText(context, slide, look, width, height) {
   if (title && geometry.title) {
     drawText(context, geometry.title, [title], look.theme, width, height);
     if (geometry.rule) {
-      context.fillStyle = chunkXTR26TNE_cjs.accentColor(look.theme.accent);
+      context.fillStyle = chunk4TTX6ZNS_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);
+    drawText(context, geometry.text, chunk4TTX6ZNS_cjs.textLines(slide.points), look.theme, width, height);
   }
   return geometry;
 }
@@ -2583,13 +2673,13 @@ async function renderSlide(slide, clips, look) {
   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);
+    await chunk4TTX6ZNS_cjs.paintSlideBackground(context, width, height, slide.background, look.media);
   } else {
-    chunkXTR26TNE_cjs.paintBackground(context, width, height, look.theme.background);
+    chunk4TTX6ZNS_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 font = chunk4TTX6ZNS_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);
@@ -2603,16 +2693,16 @@ async function renderSlide(slide, clips, look) {
       x: item.frame.x * width,
       y: item.frame.y * height,
       width: item.frame.w * width,
-      height: chunkXTR26TNE_cjs.frameHeight(item.frame, clip.aspect) * height
+      height: chunk4TTX6ZNS_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);
+    const label = chunk4TTX6ZNS_cjs.clipLabel(clip, look.columnValues);
     if (look.labels && label) {
-      context.fillStyle = chunkXTR26TNE_cjs.TEXT_COLORS.muted;
+      context.fillStyle = chunk4TTX6ZNS_cjs.TEXT_COLORS.muted;
       context.font = `${Math.round(width * 0.017)}px ${font}`;
       context.textAlign = "left";
       context.textBaseline = "top";
@@ -2655,7 +2745,7 @@ function addBox(pptx, page, box2, themeFont) {
   if (box2.shape === "line") {
     page.addShape(pptx.ShapeType.line, {
       ...place,
-      line: line ?? { color: hex(chunkXTR26TNE_cjs.TEXT_COLORS.body), width: 1 }
+      line: line ?? { color: hex(chunk4TTX6ZNS_cjs.TEXT_COLORS.body), width: 1 }
     });
     return;
   }
@@ -2672,9 +2762,9 @@ function addBox(pptx, page, box2, themeFont) {
       runs.push({
         text: run.text,
         options: {
-          fontSize: run.size ?? chunkXTR26TNE_cjs.DEFAULT_TEXT_SIZE,
+          fontSize: run.size ?? chunk4TTX6ZNS_cjs.DEFAULT_TEXT_SIZE,
           fontFace: run.font ?? themeFont,
-          color: hex(run.color ?? chunkXTR26TNE_cjs.TEXT_COLORS.body),
+          color: hex(run.color ?? chunk4TTX6ZNS_cjs.TEXT_COLORS.body),
           ...run.bold ? { bold: true } : {},
           ...run.italic ? { italic: true } : {},
           ...run.underline ? { underline: { style: "sng" } } : {},
@@ -2696,7 +2786,7 @@ function addBox(pptx, page, box2, themeFont) {
     // 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,
+    margin: box2.inset ?? chunk4TTX6ZNS_cjs.DEFAULT_INSET,
     lineSpacingMultiple: 1,
     fit: "none"
   });
@@ -2726,10 +2816,10 @@ var box = (b) => ({
 function textOptions(text, look) {
   return {
     ...box(text),
-    fontFace: chunkXTR26TNE_cjs.FONTS[look.theme.font].pptx,
+    fontFace: chunk4TTX6ZNS_cjs.FONTS[look.theme.font].pptx,
     fontSize: toPoints(text.size),
     bold: text.weight >= 600,
-    color: hex2(chunkXTR26TNE_cjs.TEXT_COLORS[text.tone]),
+    color: hex2(chunk4TTX6ZNS_cjs.TEXT_COLORS[text.tone]),
     align: text.align,
     valign: text.anchor ?? "top",
     lineSpacingMultiple: text.leading,
@@ -2742,18 +2832,18 @@ async function buildPptx(deck, look) {
   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
+    headFontFace: chunk4TTX6ZNS_cjs.FONTS[look.theme.font].pptx,
+    bodyFontFace: chunk4TTX6ZNS_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)
+    (context) => chunk4TTX6ZNS_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;
+  const themeFont = chunk4TTX6ZNS_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) {
@@ -2764,14 +2854,14 @@ async function buildPptx(deck, look) {
         data: await canvasImage(
           width,
           height,
-          (context) => chunkXTR26TNE_cjs.paintSlideBackground(context, width, height, own, look.media)
+          (context) => chunk4TTX6ZNS_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, {
+    const geometry = chunk4TTX6ZNS_cjs.slideGeometry(slide, {
       labels: look.labels,
       logo: look.theme.logo?.corner ?? null
     });
@@ -2779,7 +2869,7 @@ async function buildPptx(deck, look) {
     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) };
+      const frame = { ...item.frame, h: chunk4TTX6ZNS_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;
@@ -2811,13 +2901,13 @@ async function buildPptx(deck, look) {
         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);
+      const label = chunk4TTX6ZNS_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,
+          fontFace: chunk4TTX6ZNS_cjs.FONTS[look.theme.font].pptx,
           fontSize: toPoints(0.017),
-          color: hex2(chunkXTR26TNE_cjs.TEXT_COLORS.muted),
+          color: hex2(chunk4TTX6ZNS_cjs.TEXT_COLORS.muted),
           margin: 0,
           valign: "top",
           fit: "shrink"
@@ -2830,12 +2920,12 @@ async function buildPptx(deck, 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 }
+          fill: { color: hex2(chunk4TTX6ZNS_cjs.accentColor(look.theme.accent)) },
+          line: { color: hex2(chunk4TTX6ZNS_cjs.accentColor(look.theme.accent)), width: 0 }
         });
       }
     }
-    const lines = chunkXTR26TNE_cjs.textLines(slide.points);
+    const lines = chunk4TTX6ZNS_cjs.textLines(slide.points);
     if (geometry.text && lines.length) {
       const text = geometry.text;
       page.addText(
@@ -2869,7 +2959,7 @@ async function buildPptx(deck, look) {
     }
   }
   const deckFile = await pptx.write({ outputType: "blob" });
-  return accentBullets(deckFile, chunkXTR26TNE_cjs.accentColor(look.theme.accent));
+  return accentBullets(deckFile, chunk4TTX6ZNS_cjs.accentColor(look.theme.accent));
 }
 async function accentBullets(deck, accent) {
   const { default: JSZip } = await import('jszip');
@@ -3400,7 +3490,7 @@ function renditionClip(deck, part, area, what) {
     fileName: fileName ?? "Presentation.pptx",
     page: part.page,
     rect,
-    aspect: frame.w * chunkXTR26TNE_cjs.STAGE_ASPECT / Math.max(frame.h, 1e-6),
+    aspect: frame.w * chunk4TTX6ZNS_cjs.STAGE_ASPECT / Math.max(frame.h, 1e-6),
     caption: "",
     plain: true
   });
@@ -3539,7 +3629,7 @@ async function readShape(shape, transform, deck, part, inherit, built) {
       fileName: target?.target.split("/").pop() ?? "Picture",
       page: 1,
       rect,
-      aspect: frame.w * chunkXTR26TNE_cjs.STAGE_ASPECT / Math.max(frame.h, 1e-6),
+      aspect: frame.w * chunk4TTX6ZNS_cjs.STAGE_ASPECT / Math.max(frame.h, 1e-6),
       caption: "",
       media: key,
       plain: true
@@ -3762,7 +3852,7 @@ async function importPptx(bytes, options = {}) {
   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 place = deckAspect < chunk4TTX6ZNS_cjs.STAGE_ASPECT ? { w: deckAspect / chunk4TTX6ZNS_cjs.STAGE_ASPECT, h: 1, x: (1 - deckAspect / chunk4TTX6ZNS_cjs.STAGE_ASPECT) / 2, y: 0 } : { w: 1, h: chunk4TTX6ZNS_cjs.STAGE_ASPECT / deckAspect, x: 0, y: (1 - chunk4TTX6ZNS_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;
@@ -3771,7 +3861,7 @@ async function importPptx(bytes, options = {}) {
     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),
+    pointScale: chunk4TTX6ZNS_cjs.SLIDE_POINTS.h * place.h / (cy / EMU_PER_POINT),
     defaultText: kid(pres.documentElement, "defaultTextStyle"),
     options,
     clips: [],
@@ -3867,7 +3957,7 @@ async function importPptx(bytes, options = {}) {
       version: 1,
       title: options.title ?? (coreTitle?.trim() || "Presentation"),
       captions: false,
-      theme: chunkXTR26TNE_cjs.DEFAULT_THEME,
+      theme: chunk4TTX6ZNS_cjs.DEFAULT_THEME,
       clips: deck.clips,
       slides: saved,
       ...Object.keys(deck.media).length ? { media: deck.media } : {}
@@ -3955,7 +4045,7 @@ 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);
+  const data = await documentTools.readPdfAttachment(bytes, chunk4TTX6ZNS_cjs.PRESENTATION_ATTACHMENT);
   if (!data) {
     throw new Error(
       "This PDF has no editable presentation in it (it may have been changed outside ARBI)."
@@ -3964,7 +4054,7 @@ async function presentationData(bytes) {
   return new TextDecoder().decode(data);
 }
 function current(withoutClips) {
-  const state = chunkXTR26TNE_cjs.usePresentation.getState();
+  const state = chunk4TTX6ZNS_cjs.usePresentation.getState();
   return withoutClips ? {
     ...state,
     clips: [],
@@ -3986,18 +4076,18 @@ function usePresentationFiles() {
     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 });
+    const data = chunk4TTX6ZNS_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 state = chunk4TTX6ZNS_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 file = new File([deck], chunk4TTX6ZNS_cjs.presentationFileName(title), { type: PPTX_TYPE });
       const result = await arbi.documents.upload([file], {
-        folder: template ? chunkXTR26TNE_cjs.TEMPLATES_FOLDER : chunkXTR26TNE_cjs.PRESENTATIONS_FOLDER,
+        folder: template ? chunk4TTX6ZNS_cjs.TEMPLATES_FOLDER : chunk4TTX6ZNS_cjs.PRESENTATIONS_FOLDER,
         workspaceExtId: workspaceId,
         ...versionOf ? { versionOf } : {}
       });
@@ -4022,8 +4112,8 @@ function usePresentationFiles() {
       }
       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 }
+        [new File([pdf], `${chunk4TTX6ZNS_cjs.safeFileStem(title)}.pdf`, { type: "application/pdf" })],
+        { folder: chunk4TTX6ZNS_cjs.EXPORTS_FOLDER, workspaceExtId: workspaceId }
       );
       const id = result.doc_ext_ids?.[0];
       if (!id) throw new Error("The PDF could not be saved.");
@@ -4038,10 +4128,10 @@ function usePresentationFiles() {
       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);
+        return scope === "templates" ? folder === chunk4TTX6ZNS_cjs.TEMPLATES_FOLDER : folder.startsWith(chunk4TTX6ZNS_cjs.PRESENTATIONS_FOLDER) && folder !== chunk4TTX6ZNS_cjs.TEMPLATES_FOLDER && !folder.startsWith(chunk4TTX6ZNS_cjs.EXPORTS_FOLDER);
       }).map((doc) => ({
         id: doc.external_id,
-        title: chunkXTR26TNE_cjs.presentationTitle(doc.file_name ?? ""),
+        title: chunk4TTX6ZNS_cjs.presentationTitle(doc.file_name ?? ""),
         updatedAt: doc.updated_at ?? doc.created_at ?? null
       })).sort((a, b) => (a.updatedAt ?? "") < (b.updatedAt ?? "") ? 1 : -1);
     },
@@ -4057,7 +4147,7 @@ function usePresentationFiles() {
       const openedVersion = version ?? doc?.current_version ?? null;
       if (text === null) {
         const imported = await importPptx(bytes, {
-          title: chunkXTR26TNE_cjs.presentationTitle(doc?.file_name ?? "Presentation.pptx"),
+          title: chunk4TTX6ZNS_cjs.presentationTitle(doc?.file_name ?? "Presentation.pptx"),
           documentId: id,
           version: version ?? doc?.current_version,
           fileName: doc?.file_name ?? void 0
@@ -4069,7 +4159,7 @@ function usePresentationFiles() {
           openedVersion
         };
       }
-      let saved = chunkXTR26TNE_cjs.parsePresentation(text);
+      let saved = chunk4TTX6ZNS_cjs.parsePresentation(text);
       let changedOutside;
       if (isZipBytes(bytes) && saved.slides.some((slide) => slide.fingerprint)) {
         const now = await slideFingerprints(bytes);
@@ -4100,7 +4190,7 @@ function usePresentationFiles() {
   const startFromTemplate = react.useCallback(
     async (id) => {
       const { saved } = await readSaved(id);
-      chunkXTR26TNE_cjs.usePresentation.getState().load({
+      chunk4TTX6ZNS_cjs.usePresentation.getState().load({
         title: "Untitled presentation",
         savedId: null,
         captions: saved.captions,
@@ -4177,7 +4267,7 @@ function usePresentationFiles() {
       );
       const kept = [];
       const newIndex = opened.map((clip) => clip ? kept.push(clip) - 1 : -1);
-      chunkXTR26TNE_cjs.usePresentation.getState().load({
+      chunk4TTX6ZNS_cjs.usePresentation.getState().load({
         title: saved.title,
         savedId: legacy ? null : id,
         version: legacy ? null : openedVersion,
@@ -4226,7 +4316,7 @@ function useGenerateImageLaunch() {
       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);
+      const tools = chunk2F57IO7S_cjs.PROMPT_BINDINGS[chunk7JLJH5CW_cjs.GENERATE_IMAGE_ID].tools?.(inputs);
       let image;
       let answer = "";
       let failure = "";
@@ -4251,7 +4341,7 @@ function useGenerateImageLaunch() {
         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({
+      chunk4TTX6ZNS_cjs.usePresentation.getState().addClip({
         kind: "image",
         documentId,
         fileName,
@@ -4260,7 +4350,7 @@ function useGenerateImageLaunch() {
         aspect: await aspectOf(source),
         masks: [],
         source,
-        caption: chunkXTR26TNE_cjs.mediaCaption(fileName)
+        caption: chunk4TTX6ZNS_cjs.mediaCaption(fileName)
       });
     },
     [arbi, workspaceId]
@@ -4271,8 +4361,8 @@ function GenerateImageDialog({
   onOpenChange,
   referenceId
 }) {
-  const notify = chunkXTR26TNE_cjs.usePresentation((s) => s.notify);
-  const { skills } = chunkGKVE5JGB_cjs.useWorkflowDefinitions();
+  const notify = chunk4TTX6ZNS_cjs.usePresentation((s) => s.notify);
+  const { skills } = chunkUFT22LAB_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 } })),
@@ -4292,7 +4382,7 @@ function GenerateImageDialog({
   );
   if (!open || !workflows.length) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkNLOETJCB_cjs.ConnectedWorkflowStart,
+    chunk2F57IO7S_cjs.ConnectedWorkflowStart,
     {
       workflows,
       showTiles: false,
@@ -4331,9 +4421,9 @@ function SavePresentationDialog({
   onOpenChange,
   mode = "save"
 }) {
-  const notify = chunkXTR26TNE_cjs.usePresentation((s) => s.notify);
+  const notify = chunk4TTX6ZNS_cjs.usePresentation((s) => s.notify);
   const { save, exportPdf } = usePresentationFiles();
-  const current2 = chunkXTR26TNE_cjs.usePresentation((s) => s.title);
+  const current2 = chunk4TTX6ZNS_cjs.usePresentation((s) => s.title);
   const [title, setTitle] = react.useState(current2);
   const [busy, setBusy] = react.useState(false);
   const text = SAVE_TEXT[mode];
@@ -4403,7 +4493,7 @@ function OpenPresentationDialog({
   templates = false
 }) {
   const { confirm } = chunkTKHCIHE2_cjs.useBlocksEnvironment();
-  const notify = chunkXTR26TNE_cjs.usePresentation((s) => s.notify);
+  const notify = chunk4TTX6ZNS_cjs.usePresentation((s) => s.notify);
   const { list, startFromTemplate } = usePresentationFiles();
   const [entries, setEntries] = react.useState(null);
   const [opening, setOpening] = react.useState(null);
@@ -4418,7 +4508,7 @@ function OpenPresentationDialog({
       onOpened(entry.id);
       return;
     }
-    if (chunkXTR26TNE_cjs.usePresentation.getState().clips.length) {
+    if (chunk4TTX6ZNS_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.",
@@ -4469,8 +4559,8 @@ function OpenPresentationDialog({
 }
 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 setTheme = chunk4TTX6ZNS_cjs.usePresentation((s) => s.setTheme);
+  const corner = chunk4TTX6ZNS_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(
@@ -4557,7 +4647,7 @@ function CropClipDialog({ clip, onOpenChange }) {
       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);
+    chunk4TTX6ZNS_cjs.usePresentation.getState().cropClip(clip.id, rect, area.width / area.height);
     onOpenChange(false);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4606,8 +4696,8 @@ function CropClipDialog({ clip, onOpenChange }) {
 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);
+  const labelColumn = chunk4TTX6ZNS_cjs.usePresentation((s) => s.labelColumn);
+  const setLabelColumn = chunk4TTX6ZNS_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: [
@@ -4650,8 +4740,8 @@ 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 labelColumn = chunk4TTX6ZNS_cjs.usePresentation((s) => s.labelColumn);
+  const documentIds = chunk4TTX6ZNS_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]
@@ -4666,23 +4756,23 @@ function useLabelColumns(active) {
         if (note2) values[doc.external_id] = note2;
       }
     }
-    chunkXTR26TNE_cjs.usePresentation.getState().setColumnValues(values);
+    chunk4TTX6ZNS_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 notify = chunk4TTX6ZNS_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 cropClip = chunk4TTX6ZNS_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();
+    const { savedId, title } = chunk4TTX6ZNS_cjs.usePresentation.getState();
     if (!savedId) return setDialog("save");
     setSaving(true);
     try {
@@ -4716,7 +4806,7 @@ function usePresentationController(active) {
       {
         open: dialog === "open" || dialog === "fromTemplate",
         templates: dialog === "fromTemplate",
-        onOpened: (id) => chunk5LTIZ44D_cjs.editPresentation(session, id ? { kind: "open", documentId: id } : { kind: "new" }),
+        onOpened: (id) => chunkWFMWKPGY_cjs.editPresentation(session, id ? { kind: "open", documentId: id } : { kind: "new" }),
         onOpenChange: close
       }
     ),
@@ -4758,7 +4848,7 @@ function usePresentationController(active) {
     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);
+      const clip = chunk4TTX6ZNS_cjs.usePresentation.getState().clips.find((c) => c.id === clipId);
       if (clip) generate(clip.documentId);
     },
     onCropImage: setCropping
@@ -4770,5 +4860,5 @@ exports.PresentationStage = PresentationStage;
 exports.SlidesEditor = SlidesEditor;
 exports.usePresentationController = usePresentationController;
 exports.usePresentationFiles = usePresentationFiles;
-//# sourceMappingURL=chunk-Q3XJUXID.cjs.map
-//# sourceMappingURL=chunk-Q3XJUXID.cjs.map
+//# sourceMappingURL=chunk-DWMWEALB.cjs.map
+//# sourceMappingURL=chunk-DWMWEALB.cjs.map