@arbidocs/blocks 0.5.122 → 0.5.123

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

@@ -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" }) },
@@ -730,6 +856,7 @@ function ClipActionBar({
   onCropImage
 }) {
   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",
@@ -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 } = 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: "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" },
@@ -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";
     }
@@ -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);
@@ -1237,7 +1275,6 @@ var StageItem = react.memo(function StageItem2({
             children: label
           }
         ),
-        selected && !dragging && /* @__PURE__ */ jsxRuntime.jsx(ClipViewControls, { clip }),
         selected && CORNERS.map(({ corner, left, top, cursor }) => /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -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" }),
@@ -1640,25 +1671,6 @@ function BoxActionBar({ box: box2, onRemoved }) {
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bold, { className: ui.cn("size-4", run?.bold && "text-primary") })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Action,
-            {
-              label: "Italic",
-              onClick: () => update((b) => chunk4TTX6ZNS_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,
             {
@@ -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",
           {
@@ -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,
@@ -1941,7 +1980,7 @@ var SlideCard = react.memo(function SlideCard2({
 }) {
   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 = chunk4TTX6ZNS_cjs.usePresentation((s) => s.slides[index]?.notes ?? "");
   const textEditing = react.useMemo(
@@ -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" })
+                    ]
+                  }
+                )
+              ] })
+            ] })
           ]
         }
       )
@@ -4786,5 +4860,5 @@ exports.PresentationStage = PresentationStage;
 exports.SlidesEditor = SlidesEditor;
 exports.usePresentationController = usePresentationController;
 exports.usePresentationFiles = usePresentationFiles;
-//# sourceMappingURL=chunk-USNTRL22.cjs.map
-//# sourceMappingURL=chunk-USNTRL22.cjs.map
+//# sourceMappingURL=chunk-DWMWEALB.cjs.map
+//# sourceMappingURL=chunk-DWMWEALB.cjs.map