@arbidocs/blocks 0.5.121 → 0.5.123

package/dist/presentation/ClipViewControls.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/presentation/ClipViewControls.tsx"],
-  "sourcesContent": ["/**\n * The selected clip's view controls, on a layer over it (editor only): arrows at the middle of each\n * edge scroll what the clip shows over its source (a press steps, holding keeps scrolling; an arrow\n * at the source's edge is off), and a zoom slider zooms about the clip's centre.\n * The clip's frame on the slide does not change; only the part of the source it shows. Presses\n * here never start moving the clip.\n */\n\nimport { useEffect, useRef, type PointerEvent as ReactPointerEvent, type ReactNode } from 'react'\nimport { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\nimport { ZoomSlider } from '../components/ZoomSlider'\nimport type { Clip } from './model'\nimport { usePresentation } from './store'\n\n/** One step scrolls this much of what the clip shows. */\nconst PAN_STEP = 0.1\n/** The closest a clip zooms, in percent of how close it was cut. */\nconst MAX_ZOOM = 800\n/** Holding a button repeats it after this long, this often. */\nconst HOLD_DELAY = 350\nconst HOLD_EVERY = 90\n\nconst BUTTON =\n  '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'\n\n/** A button that acts on press and keeps acting while held. */\nfunction HoldButton({\n  label,\n  disabled,\n  onStep,\n  className,\n  children,\n}: {\n  label: string\n  disabled?: boolean\n  onStep: () => void\n  className?: string\n  children: ReactNode\n}) {\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const stop = () => {\n    if (timer.current) clearTimeout(timer.current)\n    timer.current = null\n  }\n  useEffect(() => stop, [])\n  useEffect(() => {\n    if (disabled) stop()\n  }, [disabled])\n  const start = (event: ReactPointerEvent) => {\n    event.stopPropagation()\n    if (disabled || event.button !== 0) return\n    onStep()\n    const repeat = () => {\n      onStep()\n      timer.current = setTimeout(repeat, HOLD_EVERY)\n    }\n    timer.current = setTimeout(repeat, HOLD_DELAY)\n  }\n  return (\n    <button\n      type=\"button\"\n      className={cn(BUTTON, className)}\n      title={label}\n      aria-label={label}\n      disabled={disabled}\n      onPointerDown={start}\n      onPointerUp={stop}\n      onPointerLeave={stop}\n      onPointerCancel={stop}\n      // Keyboard: Enter / Space step once.\n      onClick={(event) => event.detail === 0 && onStep()}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport function ClipViewControls({ clip }: { clip: Clip }) {\n  const { panClip, setClipZoom } = usePresentation.getState()\n  const { rect } = clip\n  const zoomBase = clip.zoomBase ?? rect.w\n  // As far out as it goes: the widest area of this shape the source holds.\n  const minZoom = Math.min(100, Math.floor((zoomBase / Math.min(1, rect.w / rect.h)) * 100))\n  const pan = (dx: number, dy: number) => () => panClip(clip.id, dx * rect.w, dy * rect.h)\n  const zoom = Math.round((zoomBase / rect.w) * 100)\n  const edge = 1e-6\n  return (\n    <div\n      className=\"pointer-events-none absolute inset-0 z-10\"\n      // A press on the layer is not a press on the clip (which would start moving it).\n      onPointerDown={(event) => event.stopPropagation()}\n      data-testid=\"clip-view-controls\"\n    >\n      <HoldButton\n        label=\"Show more above\"\n        disabled={rect.y <= edge}\n        onStep={pan(0, -PAN_STEP)}\n        className=\"absolute left-1/2 top-4 -translate-x-1/2 pointer-coarse:top-7\"\n      >\n        <ChevronUp className=\"size-4\" />\n      </HoldButton>\n      <HoldButton\n        label=\"Show more below\"\n        disabled={rect.y + rect.h >= 1 - edge}\n        onStep={pan(0, PAN_STEP)}\n        className=\"absolute bottom-10 left-1/2 -translate-x-1/2 pointer-coarse:bottom-14\"\n      >\n        <ChevronDown className=\"size-4\" />\n      </HoldButton>\n      <HoldButton\n        label=\"Show more on the left\"\n        disabled={rect.x <= edge}\n        onStep={pan(-PAN_STEP, 0)}\n        className=\"absolute left-4 top-1/2 -translate-y-1/2 pointer-coarse:left-7\"\n      >\n        <ChevronLeft className=\"size-4\" />\n      </HoldButton>\n      <HoldButton\n        label=\"Show more on the right\"\n        disabled={rect.x + rect.w >= 1 - edge}\n        onStep={pan(PAN_STEP, 0)}\n        className=\"absolute right-4 top-1/2 -translate-y-1/2 pointer-coarse:right-7\"\n      >\n        <ChevronRight className=\"size-4\" />\n      </HoldButton>\n      {/* Zoom: a slider, from as far out as the source allows to MAX_ZOOM. */}\n      <div\n        className=\"pointer-events-auto absolute bottom-1.5 left-1/2 -translate-x-1/2\"\n        data-testid=\"clip-zoom-control\"\n      >\n        <ZoomSlider\n          value={zoom}\n          min={minZoom}\n          max={Math.max(MAX_ZOOM, zoom)}\n          zoomOutStep={25}\n          onChange={(value) => setClipZoom(clip.id, value)}\n          label=\"Zoom\"\n          valueLabel={<span data-testid=\"clip-zoom\">{zoom}%</span>}\n          // Over the clip: on the surface colour, so it reads over any content.\n          className=\"bg-background/95 shadow-sm backdrop-blur-sm pointer-coarse:h-11\"\n          sliderClassName=\"w-24\"\n        />\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * A clip's view controls (in its action bar's View popover, so nothing covers what it shows):\n * arrows scroll what the clip shows over its source (a press steps, holding keeps scrolling; an\n * arrow at the source's edge is off), and a zoom slider zooms about the clip's centre.\n * The clip's frame on the slide does not change; only the part of the source it shows. Presses\n * here never start moving the clip.\n */\n\nimport { useEffect, useRef, type PointerEvent as ReactPointerEvent, type ReactNode } from 'react'\nimport { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\nimport { ZoomSlider } from '../components/ZoomSlider'\nimport type { Clip } from './model'\nimport { usePresentation } from './store'\n\n/** One step scrolls this much of what the clip shows. */\nconst PAN_STEP = 0.1\n/** The closest a clip zooms, in percent of how close it was cut. */\nconst MAX_ZOOM = 800\n/** Holding a button repeats it after this long, this often. */\nconst HOLD_DELAY = 350\nconst HOLD_EVERY = 90\n\nconst BUTTON =\n  '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'\n\n/** A button that acts on press and keeps acting while held. */\nfunction HoldButton({\n  label,\n  disabled,\n  onStep,\n  className,\n  children,\n}: {\n  label: string\n  disabled?: boolean\n  onStep: () => void\n  className?: string\n  children: ReactNode\n}) {\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const stop = () => {\n    if (timer.current) clearTimeout(timer.current)\n    timer.current = null\n  }\n  useEffect(() => stop, [])\n  useEffect(() => {\n    if (disabled) stop()\n  }, [disabled])\n  const start = (event: ReactPointerEvent) => {\n    event.stopPropagation()\n    if (disabled || event.button !== 0) return\n    onStep()\n    const repeat = () => {\n      onStep()\n      timer.current = setTimeout(repeat, HOLD_EVERY)\n    }\n    timer.current = setTimeout(repeat, HOLD_DELAY)\n  }\n  return (\n    <button\n      type=\"button\"\n      className={cn(BUTTON, className)}\n      title={label}\n      aria-label={label}\n      disabled={disabled}\n      onPointerDown={start}\n      onPointerUp={stop}\n      onPointerLeave={stop}\n      onPointerCancel={stop}\n      // Keyboard: Enter / Space step once.\n      onClick={(event) => event.detail === 0 && onStep()}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport function ClipViewControls({ clip }: { clip: Clip }) {\n  const { panClip, setClipZoom } = usePresentation.getState()\n  const { rect } = clip\n  const zoomBase = clip.zoomBase ?? rect.w\n  // As far out as it goes: the widest area of this shape the source holds.\n  const minZoom = Math.min(100, Math.floor((zoomBase / Math.min(1, rect.w / rect.h)) * 100))\n  const pan = (dx: number, dy: number) => () => panClip(clip.id, dx * rect.w, dy * rect.h)\n  const zoom = Math.round((zoomBase / rect.w) * 100)\n  const edge = 1e-6\n  return (\n    <div\n      className=\"flex flex-col items-center gap-2 p-1\"\n      // A press here is not a press on the clip (which would start moving it).\n      onPointerDown={(event) => event.stopPropagation()}\n      data-testid=\"clip-view-controls\"\n    >\n      {/* Move the view: what the clip shows, over its source (the wheel does the same). */}\n      <div className=\"grid grid-cols-3 grid-rows-3 place-items-center gap-0.5\">\n        <HoldButton\n          label=\"Show more above\"\n          disabled={rect.y <= edge}\n          onStep={pan(0, -PAN_STEP)}\n          className=\"col-start-2 row-start-1\"\n        >\n          <ChevronUp className=\"size-4\" />\n        </HoldButton>\n        <HoldButton\n          label=\"Show more on the left\"\n          disabled={rect.x <= edge}\n          onStep={pan(-PAN_STEP, 0)}\n          className=\"col-start-1 row-start-2\"\n        >\n          <ChevronLeft className=\"size-4\" />\n        </HoldButton>\n        <HoldButton\n          label=\"Show more on the right\"\n          disabled={rect.x + rect.w >= 1 - edge}\n          onStep={pan(PAN_STEP, 0)}\n          className=\"col-start-3 row-start-2\"\n        >\n          <ChevronRight className=\"size-4\" />\n        </HoldButton>\n        <HoldButton\n          label=\"Show more below\"\n          disabled={rect.y + rect.h >= 1 - edge}\n          onStep={pan(0, PAN_STEP)}\n          className=\"col-start-2 row-start-3\"\n        >\n          <ChevronDown className=\"size-4\" />\n        </HoldButton>\n      </div>\n      {/* Zoom: a slider, from as far out as the source allows to MAX_ZOOM. */}\n      <div data-testid=\"clip-zoom-control\">\n        <ZoomSlider\n          value={zoom}\n          min={minZoom}\n          max={Math.max(MAX_ZOOM, zoom)}\n          zoomOutStep={25}\n          onChange={(value) => setClipZoom(clip.id, value)}\n          label=\"Zoom\"\n          valueLabel={<span data-testid=\"clip-zoom\">{zoom}%</span>}\n          className=\"pointer-coarse:h-11\"\n          sliderClassName=\"w-28\"\n        />\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/presentation/PresentControls.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The presented slides' controls, bottom left: previous and next slide (with where you are),
+ * blank, full screen and stop. Like a slideshow's, they show while the pointer moves (or a key is
+ * pressed) and fade after a moment, with the pointer, so a shared screen rarely shows them.
+ */
+export interface PresentControlsProps {
+    /** The window presented in (full screen is that window's). */
+    view: Window | null;
+    shown: boolean;
+}
+export declare function PresentControls({ view, shown }: PresentControlsProps): import("react").JSX.Element;

package/dist/presentation/PresentControls.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, EyeOff, Maximize, Square } from "lucide-react";
+import { cn } from "@arbidocs/react/ui";
+import { usePresentation } from "./store.js";
+import { toggleFullscreen } from "./usePresenterKeys.js";
+const CONTROL = "inline-flex size-8 items-center justify-center rounded-full text-white/85 hover:bg-white/15 hover:text-white disabled:opacity-30 disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 pointer-coarse:size-11";
+function Control({
+  label,
+  onClick,
+  disabled,
+  children,
+  testId
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: CONTROL,
+      title: label,
+      "aria-label": label,
+      disabled,
+      onClick: (event) => {
+        event.stopPropagation();
+        onClick();
+      },
+      "data-testid": testId,
+      children
+    }
+  );
+}
+function PresentControls({ view, shown }) {
+  const current = usePresentation((s) => s.current);
+  const count = usePresentation((s) => s.slides.length);
+  const blank = usePresentation((s) => s.blank);
+  const actions = usePresentation.getState();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "absolute bottom-4 left-4 z-30 flex items-center gap-0.5 rounded-full bg-black/60 p-1 text-white shadow-lg backdrop-blur transition-opacity duration-300",
+        shown ? "opacity-100" : "pointer-events-none opacity-0"
+      ),
+      onPointerDown: (event) => event.stopPropagation(),
+      onDoubleClick: (event) => event.stopPropagation(),
+      role: "toolbar",
+      "aria-label": "Slideshow",
+      "data-testid": "present-controls",
+      children: [
+        /* @__PURE__ */ jsx(
+          Control,
+          {
+            label: "Previous slide (\u2190)",
+            onClick: () => actions.goTo(current - 1),
+            disabled: current === 0,
+            testId: "present-previous",
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "min-w-12 text-center text-xs tabular-nums text-white/85",
+            "data-testid": "present-position",
+            children: [
+              current + 1,
+              " / ",
+              count
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Control,
+          {
+            label: "Next slide (\u2192, or click the slide)",
+            onClick: () => actions.goTo(current + 1),
+            disabled: current >= count - 1,
+            testId: "present-next",
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "mx-1 h-4 w-px bg-white/25" }),
+        /* @__PURE__ */ jsx(
+          Control,
+          {
+            label: blank ? "Show the slide (B)" : "Blank the screen (B)",
+            onClick: () => actions.setBlank(!blank),
+            testId: "present-blank",
+            children: /* @__PURE__ */ jsx(EyeOff, { className: cn("size-4", blank && "text-amber-300") })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Control,
+          {
+            label: "Full screen (F)",
+            onClick: () => view && toggleFullscreen(view),
+            testId: "present-fullscreen",
+            children: /* @__PURE__ */ jsx(Maximize, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Control,
+          {
+            label: "Stop presenting (Esc)",
+            onClick: () => actions.setPresenting(false),
+            testId: "present-stop",
+            children: /* @__PURE__ */ jsx(Square, { className: "size-3.5 fill-current" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  PresentControls
+};
+//# sourceMappingURL=PresentControls.js.map

package/dist/presentation/PresentControls.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/PresentControls.tsx"],
+  "sourcesContent": ["/**\n * The presented slides' controls, bottom left: previous and next slide (with where you are),\n * blank, full screen and stop. Like a slideshow's, they show while the pointer moves (or a key is\n * pressed) and fade after a moment, with the pointer, so a shared screen rarely shows them.\n */\n\nimport type { ReactNode } from 'react'\nimport { ChevronLeft, ChevronRight, EyeOff, Maximize, Square } from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\nimport { usePresentation } from './store'\nimport { toggleFullscreen } from './usePresenterKeys'\n\nconst CONTROL =\n  'inline-flex size-8 items-center justify-center rounded-full text-white/85 hover:bg-white/15 hover:text-white disabled:opacity-30 disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 pointer-coarse:size-11'\n\nfunction Control({\n  label,\n  onClick,\n  disabled,\n  children,\n  testId,\n}: {\n  label: string\n  onClick: () => void\n  disabled?: boolean\n  children: ReactNode\n  testId: string\n}) {\n  return (\n    <button\n      type=\"button\"\n      className={CONTROL}\n      title={label}\n      aria-label={label}\n      disabled={disabled}\n      onClick={(event) => {\n        // A click on the controls is not a click on the slide (which goes to the next one).\n        event.stopPropagation()\n        onClick()\n      }}\n      data-testid={testId}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport interface PresentControlsProps {\n  /** The window presented in (full screen is that window's). */\n  view: Window | null\n  shown: boolean\n}\n\nexport function PresentControls({ view, shown }: PresentControlsProps) {\n  const current = usePresentation((s) => s.current)\n  const count = usePresentation((s) => s.slides.length)\n  const blank = usePresentation((s) => s.blank)\n  const actions = usePresentation.getState()\n  return (\n    <div\n      className={cn(\n        'absolute bottom-4 left-4 z-30 flex items-center gap-0.5 rounded-full bg-black/60 p-1 text-white shadow-lg backdrop-blur transition-opacity duration-300',\n        shown ? 'opacity-100' : 'pointer-events-none opacity-0'\n      )}\n      onPointerDown={(event) => event.stopPropagation()}\n      onDoubleClick={(event) => event.stopPropagation()}\n      role=\"toolbar\"\n      aria-label=\"Slideshow\"\n      data-testid=\"present-controls\"\n    >\n      <Control\n        label=\"Previous slide (\u2190)\"\n        onClick={() => actions.goTo(current - 1)}\n        disabled={current === 0}\n        testId=\"present-previous\"\n      >\n        <ChevronLeft className=\"size-4\" />\n      </Control>\n      <span\n        className=\"min-w-12 text-center text-xs tabular-nums text-white/85\"\n        data-testid=\"present-position\"\n      >\n        {current + 1} / {count}\n      </span>\n      <Control\n        label=\"Next slide (\u2192, or click the slide)\"\n        onClick={() => actions.goTo(current + 1)}\n        disabled={current >= count - 1}\n        testId=\"present-next\"\n      >\n        <ChevronRight className=\"size-4\" />\n      </Control>\n      <div className=\"mx-1 h-4 w-px bg-white/25\" />\n      <Control\n        label={blank ? 'Show the slide (B)' : 'Blank the screen (B)'}\n        onClick={() => actions.setBlank(!blank)}\n        testId=\"present-blank\"\n      >\n        <EyeOff className={cn('size-4', blank && 'text-amber-300')} />\n      </Control>\n      <Control\n        label=\"Full screen (F)\"\n        onClick={() => view && toggleFullscreen(view)}\n        testId=\"present-fullscreen\"\n      >\n        <Maximize className=\"size-4\" />\n      </Control>\n      <Control\n        label=\"Stop presenting (Esc)\"\n        onClick={() => actions.setPresenting(false)}\n        testId=\"present-stop\"\n      >\n        <Square className=\"size-3.5 fill-current\" />\n      </Control>\n    </div>\n  )\n}\n"],
+  "mappings": ";AA6BI,cAiDE,YAjDF;AAtBJ,SAAS,aAAa,cAAc,QAAQ,UAAU,cAAc;AACpE,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AAEjC,MAAM,UACJ;AAEF,SAAS,QAAQ;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,MACX,OAAO;AAAA,MACP,cAAY;AAAA,MACZ;AAAA,MACA,SAAS,CAAC,UAAU;AAElB,cAAM,gBAAgB;AACtB,gBAAQ;AAAA,MACV;AAAA,MACA,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ;AAQO,SAAS,gBAAgB,EAAE,MAAM,MAAM,GAAyB;AACrE,QAAM,UAAU,gBAAgB,CAAC,MAAM,EAAE,OAAO;AAChD,QAAM,QAAQ,gBAAgB,CAAC,MAAM,EAAE,OAAO,MAAM;AACpD,QAAM,QAAQ,gBAAgB,CAAC,MAAM,EAAE,KAAK;AAC5C,QAAM,UAAU,gBAAgB,SAAS;AACzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,QAAQ,gBAAgB;AAAA,MAC1B;AAAA,MACA,eAAe,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAChD,eAAe,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAChD,MAAK;AAAA,MACL,cAAW;AAAA,MACX,eAAY;AAAA,MAEZ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,SAAS,MAAM,QAAQ,KAAK,UAAU,CAAC;AAAA,YACvC,UAAU,YAAY;AAAA,YACtB,QAAO;AAAA,YAEP,8BAAC,eAAY,WAAU,UAAS;AAAA;AAAA,QAClC;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YAEX;AAAA,wBAAU;AAAA,cAAE;AAAA,cAAI;AAAA;AAAA;AAAA,QACnB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,SAAS,MAAM,QAAQ,KAAK,UAAU,CAAC;AAAA,YACvC,UAAU,WAAW,QAAQ;AAAA,YAC7B,QAAO;AAAA,YAEP,8BAAC,gBAAa,WAAU,UAAS;AAAA;AAAA,QACnC;AAAA,QACA,oBAAC,SAAI,WAAU,6BAA4B;AAAA,QAC3C;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,QAAQ,uBAAuB;AAAA,YACtC,SAAS,MAAM,QAAQ,SAAS,CAAC,KAAK;AAAA,YACtC,QAAO;AAAA,YAEP,8BAAC,UAAO,WAAW,GAAG,UAAU,SAAS,gBAAgB,GAAG;AAAA;AAAA,QAC9D;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,SAAS,MAAM,QAAQ,iBAAiB,IAAI;AAAA,YAC5C,QAAO;AAAA,YAEP,8BAAC,YAAS,WAAU,UAAS;AAAA;AAAA,QAC/B;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,SAAS,MAAM,QAAQ,cAAc,KAAK;AAAA,YAC1C,QAAO;AAAA,YAEP,8BAAC,UAAO,WAAU,yBAAwB;AAAA;AAAA,QAC5C;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}

package/dist/presentation/PresenterView.js

@@ -1,11 +1,12 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import { PresentationStage } from "./PresentationStage.js";
 import { SlidesEditor } from "./SlidesEditor.js";
 import { STAGE_ASPECT } from "./model.js";
 import { usePresentation } from "./store.js";
 import { toggleFullscreen, usePresenterKeys } from "./usePresenterKeys.js";
+import { PresentControls } from "./PresentControls.js";
 const PRESENT_WIDTH = 1280;
 function useStageShapedWindow(view, presenting) {
   useEffect(() => {
@@ -34,6 +35,28 @@ function useStageShapedWindow(view, presenting) {
     };
   }, [view, presenting]);
 }
+const IDLE_MS = 2200;
+function usePointerActive(view) {
+  const [active, setActive] = useState(true);
+  useEffect(() => {
+    if (!view) return;
+    setActive(true);
+    let timer = view.setTimeout(() => setActive(false), IDLE_MS);
+    const wake = () => {
+      setActive(true);
+      view.clearTimeout(timer);
+      timer = view.setTimeout(() => setActive(false), IDLE_MS);
+    };
+    view.addEventListener("pointermove", wake);
+    view.addEventListener("keydown", wake);
+    return () => {
+      view.clearTimeout(timer);
+      view.removeEventListener("pointermove", wake);
+      view.removeEventListener("keydown", wake);
+    };
+  }, [view]);
+  return active;
+}
 function PresenterView({ onPresent, ...editor }) {
   const presenting = usePresentation((s) => s.presenting);
   const [view, setView] = useState(null);
@@ -42,16 +65,24 @@ function PresenterView({ onPresent, ...editor }) {
   }, []);
   usePresenterKeys(presenting ? view : null, true);
   useStageShapedWindow(view, presenting);
+  const active = usePointerActive(presenting ? view : null);
   if (presenting) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         ref: rootRef,
-        className: "h-full w-full select-none bg-black",
-        style: { cursor: "none" },
+        className: "relative h-full w-full select-none bg-black",
+        style: { cursor: active ? "default" : "none" },
+        onClick: () => {
+          const state = usePresentation.getState();
+          state.goTo(state.current + 1);
+        },
         onDoubleClick: () => view && toggleFullscreen(view),
         "data-testid": "presentation-present",
-        children: /* @__PURE__ */ jsx(PresentationStage, {})
+        children: [
+          /* @__PURE__ */ jsx(PresentationStage, {}),
+          /* @__PURE__ */ jsx(PresentControls, { view, shown: active })
+        ]
       }
     );
   }

package/dist/presentation/PresenterView.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/presentation/PresenterView.tsx"],
-  "sourcesContent": ["/**\n * The presentation in a window of its own, in one of two modes.\n *\n * Present: nothing but the stage on black, no controls and no pointer: what is shared in a call or\n * shown on a projector. Keys drive it (arrows / Page Up / Page Down change slide, B blanks, F or\n * double-click toggles full screen, Space plays videos, Escape stops presenting).\n *\n * Edit: the slides editor (`SlidesEditor`), the same as in the viewer's tab, when the presentation\n * is edited in its own window (beside the document its clips come from).\n */\n\nimport { useCallback, useEffect, useState } from 'react'\nimport { PresentationStage } from './PresentationStage'\nimport { SlidesEditor, type SlidesEditorProps } from './SlidesEditor'\nimport { STAGE_ASPECT } from './model'\nimport { usePresentation } from './store'\nimport { toggleFullscreen, usePresenterKeys } from './usePresenterKeys'\n\n/** The presenting window's page width, at most (smaller on a small screen). */\nconst PRESENT_WIDTH = 1280\n\n/**\n * While presenting in a pop-out, its page is made 16:9 and wide enough to share sharply, so a\n * shared window is all stage with no bars; editing again gives the window back its size. Only a\n * pop-out (a window this app opened) can be resized; the app's own window is left alone.\n */\nfunction useStageShapedWindow(view: Window | null, presenting: boolean) {\n  useEffect(() => {\n    if (!view || !presenting || !view.opener) return\n    const before = { width: view.outerWidth, height: view.outerHeight }\n    const chromeWidth = view.outerWidth - view.innerWidth\n    const chromeHeight = view.outerHeight - view.innerHeight\n    // Wide enough for a sharp share (a call receives about what the window shows), and 16:9.\n    const width = Math.max(\n      view.innerWidth,\n      Math.min(PRESENT_WIDTH, Math.round((view.screen.availWidth - chromeWidth) * 0.6))\n    )\n    const height = Math.min(\n      Math.round(width / STAGE_ASPECT),\n      view.screen.availHeight - chromeHeight\n    )\n    try {\n      view.resizeTo(Math.round(height * STAGE_ASPECT) + chromeWidth, height + chromeHeight)\n    } catch {\n      return // not resizable: the stage letterboxes in black\n    }\n    return () => {\n      try {\n        if (!view.closed) view.resizeTo(before.width, before.height)\n      } catch {\n        // gone or not resizable\n      }\n    }\n  }, [view, presenting])\n}\n\nexport type PresenterViewProps = Omit<SlidesEditorProps, 'onPresent'> & {\n  /** Present (default: here, in this window). */\n  onPresent?: () => void\n}\n\nexport function PresenterView({ onPresent, ...editor }: PresenterViewProps) {\n  const presenting = usePresentation((s) => s.presenting)\n  const [view, setView] = useState<Window | null>(null)\n  // The keys work in whichever window the presenter is in.\n  const rootRef = useCallback((node: HTMLDivElement | null) => {\n    if (node) setView(node.ownerDocument.defaultView)\n  }, [])\n  usePresenterKeys(presenting ? view : null, true)\n  useStageShapedWindow(view, presenting)\n\n  if (presenting) {\n    return (\n      <div\n        ref={rootRef}\n        className=\"h-full w-full select-none bg-black\"\n        style={{ cursor: 'none' }}\n        onDoubleClick={() => view && toggleFullscreen(view)}\n        data-testid=\"presentation-present\"\n      >\n        <PresentationStage />\n      </div>\n    )\n  }\n  return (\n    <div ref={rootRef} className=\"h-full min-h-0\" data-testid=\"presenter-view\">\n      <SlidesEditor\n        {...editor}\n        onPresent={onPresent ?? (() => usePresentation.getState().setPresenting(true))}\n      />\n    </div>\n  )\n}\n"],
-  "mappings": ";AAgFQ;AArER,SAAS,aAAa,WAAW,gBAAgB;AACjD,SAAS,yBAAyB;AAClC,SAAS,oBAA4C;AACrD,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,kBAAkB,wBAAwB;AAGnD,MAAM,gBAAgB;AAOtB,SAAS,qBAAqB,MAAqB,YAAqB;AACtE,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,OAAQ;AAC1C,UAAM,SAAS,EAAE,OAAO,KAAK,YAAY,QAAQ,KAAK,YAAY;AAClE,UAAM,cAAc,KAAK,aAAa,KAAK;AAC3C,UAAM,eAAe,KAAK,cAAc,KAAK;AAE7C,UAAM,QAAQ,KAAK;AAAA,MACjB,KAAK;AAAA,MACL,KAAK,IAAI,eAAe,KAAK,OAAO,KAAK,OAAO,aAAa,eAAe,GAAG,CAAC;AAAA,IAClF;AACA,UAAM,SAAS,KAAK;AAAA,MAClB,KAAK,MAAM,QAAQ,YAAY;AAAA,MAC/B,KAAK,OAAO,cAAc;AAAA,IAC5B;AACA,QAAI;AACF,WAAK,SAAS,KAAK,MAAM,SAAS,YAAY,IAAI,aAAa,SAAS,YAAY;AAAA,IACtF,QAAQ;AACN;AAAA,IACF;AACA,WAAO,MAAM;AACX,UAAI;AACF,YAAI,CAAC,KAAK,OAAQ,MAAK,SAAS,OAAO,OAAO,OAAO,MAAM;AAAA,MAC7D,QAAQ;AAAA,MAER;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,UAAU,CAAC;AACvB;AAOO,SAAS,cAAc,EAAE,WAAW,GAAG,OAAO,GAAuB;AAC1E,QAAM,aAAa,gBAAgB,CAAC,MAAM,EAAE,UAAU;AACtD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AAEpD,QAAM,UAAU,YAAY,CAAC,SAAgC;AAC3D,QAAI,KAAM,SAAQ,KAAK,cAAc,WAAW;AAAA,EAClD,GAAG,CAAC,CAAC;AACL,mBAAiB,aAAa,OAAO,MAAM,IAAI;AAC/C,uBAAqB,MAAM,UAAU;AAErC,MAAI,YAAY;AACd,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO,EAAE,QAAQ,OAAO;AAAA,QACxB,eAAe,MAAM,QAAQ,iBAAiB,IAAI;AAAA,QAClD,eAAY;AAAA,QAEZ,8BAAC,qBAAkB;AAAA;AAAA,IACrB;AAAA,EAEJ;AACA,SACE,oBAAC,SAAI,KAAK,SAAS,WAAU,kBAAiB,eAAY,kBACxD;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,cAAc,MAAM,gBAAgB,SAAS,EAAE,cAAc,IAAI;AAAA;AAAA,EAC9E,GACF;AAEJ;",
+  "sourcesContent": ["/**\n * The presentation in a window of its own, in one of two modes.\n *\n * Present: nothing but the stage on black, no controls and no pointer: what is shared in a call or\n * shown on a projector. Keys drive it (arrows / Page Up / Page Down change slide, B blanks, F or\n * double-click toggles full screen, Space plays videos, Escape stops presenting).\n *\n * Edit: the slides editor (`SlidesEditor`), the same as in the viewer's tab, when the presentation\n * is edited in its own window (beside the document its clips come from).\n */\n\nimport { useCallback, useEffect, useState } from 'react'\nimport { PresentationStage } from './PresentationStage'\nimport { SlidesEditor, type SlidesEditorProps } from './SlidesEditor'\nimport { STAGE_ASPECT } from './model'\nimport { usePresentation } from './store'\nimport { toggleFullscreen, usePresenterKeys } from './usePresenterKeys'\nimport { PresentControls } from './PresentControls'\n\n/** The presenting window's page width, at most (smaller on a small screen). */\nconst PRESENT_WIDTH = 1280\n\n/**\n * While presenting in a pop-out, its page is made 16:9 and wide enough to share sharply, so a\n * shared window is all stage with no bars; editing again gives the window back its size. Only a\n * pop-out (a window this app opened) can be resized; the app's own window is left alone.\n */\nfunction useStageShapedWindow(view: Window | null, presenting: boolean) {\n  useEffect(() => {\n    if (!view || !presenting || !view.opener) return\n    const before = { width: view.outerWidth, height: view.outerHeight }\n    const chromeWidth = view.outerWidth - view.innerWidth\n    const chromeHeight = view.outerHeight - view.innerHeight\n    // Wide enough for a sharp share (a call receives about what the window shows), and 16:9.\n    const width = Math.max(\n      view.innerWidth,\n      Math.min(PRESENT_WIDTH, Math.round((view.screen.availWidth - chromeWidth) * 0.6))\n    )\n    const height = Math.min(\n      Math.round(width / STAGE_ASPECT),\n      view.screen.availHeight - chromeHeight\n    )\n    try {\n      view.resizeTo(Math.round(height * STAGE_ASPECT) + chromeWidth, height + chromeHeight)\n    } catch {\n      return // not resizable: the stage letterboxes in black\n    }\n    return () => {\n      try {\n        if (!view.closed) view.resizeTo(before.width, before.height)\n      } catch {\n        // gone or not resizable\n      }\n    }\n  }, [view, presenting])\n}\n\n/** How long the pointer (or a key) has to rest before the controls fade. */\nconst IDLE_MS = 2200\n\n/** The pointer has moved (or a key was pressed) in `view` within the last moment. */\nfunction usePointerActive(view: Window | null): boolean {\n  const [active, setActive] = useState(true)\n  useEffect(() => {\n    if (!view) return\n    setActive(true)\n    let timer = view.setTimeout(() => setActive(false), IDLE_MS)\n    const wake = () => {\n      setActive(true)\n      view.clearTimeout(timer)\n      timer = view.setTimeout(() => setActive(false), IDLE_MS)\n    }\n    view.addEventListener('pointermove', wake)\n    view.addEventListener('keydown', wake)\n    return () => {\n      view.clearTimeout(timer)\n      view.removeEventListener('pointermove', wake)\n      view.removeEventListener('keydown', wake)\n    }\n  }, [view])\n  return active\n}\n\nexport type PresenterViewProps = Omit<SlidesEditorProps, 'onPresent'> & {\n  /** Present (default: here, in this window). */\n  onPresent?: () => void\n}\n\nexport function PresenterView({ onPresent, ...editor }: PresenterViewProps) {\n  const presenting = usePresentation((s) => s.presenting)\n  const [view, setView] = useState<Window | null>(null)\n  // The keys work in whichever window the presenter is in.\n  const rootRef = useCallback((node: HTMLDivElement | null) => {\n    if (node) setView(node.ownerDocument.defaultView)\n  }, [])\n  usePresenterKeys(presenting ? view : null, true)\n  useStageShapedWindow(view, presenting)\n\n  const active = usePointerActive(presenting ? view : null)\n\n  if (presenting) {\n    return (\n      <div\n        ref={rootRef}\n        className=\"relative h-full w-full select-none bg-black\"\n        // The pointer shows while it moves, with the controls; idle, nothing but the slide.\n        style={{ cursor: active ? 'default' : 'none' }}\n        // A click on the slide goes to the next one, as in a slideshow.\n        onClick={() => {\n          const state = usePresentation.getState()\n          state.goTo(state.current + 1)\n        }}\n        onDoubleClick={() => view && toggleFullscreen(view)}\n        data-testid=\"presentation-present\"\n      >\n        <PresentationStage />\n        <PresentControls view={view} shown={active} />\n      </div>\n    )\n  }\n  return (\n    <div ref={rootRef} className=\"h-full min-h-0\" data-testid=\"presenter-view\">\n      <SlidesEditor\n        {...editor}\n        onPresent={onPresent ?? (() => usePresentation.getState().setPresenting(true))}\n      />\n    </div>\n  )\n}\n"],
+  "mappings": ";AAsGM,SAaE,KAbF;AA3FN,SAAS,aAAa,WAAW,gBAAgB;AACjD,SAAS,yBAAyB;AAClC,SAAS,oBAA4C;AACrD,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,kBAAkB,wBAAwB;AACnD,SAAS,uBAAuB;AAGhC,MAAM,gBAAgB;AAOtB,SAAS,qBAAqB,MAAqB,YAAqB;AACtE,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,OAAQ;AAC1C,UAAM,SAAS,EAAE,OAAO,KAAK,YAAY,QAAQ,KAAK,YAAY;AAClE,UAAM,cAAc,KAAK,aAAa,KAAK;AAC3C,UAAM,eAAe,KAAK,cAAc,KAAK;AAE7C,UAAM,QAAQ,KAAK;AAAA,MACjB,KAAK;AAAA,MACL,KAAK,IAAI,eAAe,KAAK,OAAO,KAAK,OAAO,aAAa,eAAe,GAAG,CAAC;AAAA,IAClF;AACA,UAAM,SAAS,KAAK;AAAA,MAClB,KAAK,MAAM,QAAQ,YAAY;AAAA,MAC/B,KAAK,OAAO,cAAc;AAAA,IAC5B;AACA,QAAI;AACF,WAAK,SAAS,KAAK,MAAM,SAAS,YAAY,IAAI,aAAa,SAAS,YAAY;AAAA,IACtF,QAAQ;AACN;AAAA,IACF;AACA,WAAO,MAAM;AACX,UAAI;AACF,YAAI,CAAC,KAAK,OAAQ,MAAK,SAAS,OAAO,OAAO,OAAO,MAAM;AAAA,MAC7D,QAAQ;AAAA,MAER;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,UAAU,CAAC;AACvB;AAGA,MAAM,UAAU;AAGhB,SAAS,iBAAiB,MAA8B;AACtD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,IAAI;AACzC,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,cAAU,IAAI;AACd,QAAI,QAAQ,KAAK,WAAW,MAAM,UAAU,KAAK,GAAG,OAAO;AAC3D,UAAM,OAAO,MAAM;AACjB,gBAAU,IAAI;AACd,WAAK,aAAa,KAAK;AACvB,cAAQ,KAAK,WAAW,MAAM,UAAU,KAAK,GAAG,OAAO;AAAA,IACzD;AACA,SAAK,iBAAiB,eAAe,IAAI;AACzC,SAAK,iBAAiB,WAAW,IAAI;AACrC,WAAO,MAAM;AACX,WAAK,aAAa,KAAK;AACvB,WAAK,oBAAoB,eAAe,IAAI;AAC5C,WAAK,oBAAoB,WAAW,IAAI;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AACT,SAAO;AACT;AAOO,SAAS,cAAc,EAAE,WAAW,GAAG,OAAO,GAAuB;AAC1E,QAAM,aAAa,gBAAgB,CAAC,MAAM,EAAE,UAAU;AACtD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AAEpD,QAAM,UAAU,YAAY,CAAC,SAAgC;AAC3D,QAAI,KAAM,SAAQ,KAAK,cAAc,WAAW;AAAA,EAClD,GAAG,CAAC,CAAC;AACL,mBAAiB,aAAa,OAAO,MAAM,IAAI;AAC/C,uBAAqB,MAAM,UAAU;AAErC,QAAM,SAAS,iBAAiB,aAAa,OAAO,IAAI;AAExD,MAAI,YAAY;AACd,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAU;AAAA,QAEV,OAAO,EAAE,QAAQ,SAAS,YAAY,OAAO;AAAA,QAE7C,SAAS,MAAM;AACb,gBAAM,QAAQ,gBAAgB,SAAS;AACvC,gBAAM,KAAK,MAAM,UAAU,CAAC;AAAA,QAC9B;AAAA,QACA,eAAe,MAAM,QAAQ,iBAAiB,IAAI;AAAA,QAClD,eAAY;AAAA,QAEZ;AAAA,8BAAC,qBAAkB;AAAA,UACnB,oBAAC,mBAAgB,MAAY,OAAO,QAAQ;AAAA;AAAA;AAAA,IAC9C;AAAA,EAEJ;AACA,SACE,oBAAC,SAAI,KAAK,SAAS,WAAU,kBAAiB,eAAY,kBACxD;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,cAAc,MAAM,gBAAgB,SAAS,EAAE,cAAc,IAAI;AAAA;AAAA,EAC9E,GACF;AAEJ;",
   "names": []
 }

package/dist/presentation/SlidesEditor.js

@@ -35,27 +35,6 @@ import { usePresentation } from "./store.js";
 import { newBox } from "./boxes.js";
 import { accentColor, isLightBackground } from "./theme.js";
 import { usePresenterKeys } from "./usePresenterKeys.js";
-function SlideAction({
-  label,
-  onClick,
-  disabled,
-  children
-}) {
-  return /* @__PURE__ */ jsx(
-    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
-    }
-  );
-}
 const SlideCard = memo(function SlideCard2({
   index,
   count,
@@ -67,7 +46,7 @@ const SlideCard = memo(function SlideCard2({
 }) {
   const empty = 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 = usePresentation((s) => s.slides[index]?.notes ?? "");
   const textEditing = useMemo(
@@ -102,26 +81,61 @@ const SlideCard = memo(function SlideCard2({
           "data-testid": `slide-actions-${index}`,
           children: [
             /* @__PURE__ */ jsx(LayoutMenu, { index, compact: true }),
-            /* @__PURE__ */ jsx(
-              SlideAction,
-              {
-                label: "Move up",
-                disabled: index === 0,
-                onClick: () => actions.moveSlide(index, index - 1),
-                children: /* @__PURE__ */ jsx(ArrowUp, { className: "size-3.5" })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              SlideAction,
-              {
-                label: "Move down",
-                disabled: index === count - 1,
-                onClick: () => actions.moveSlide(index, index + 1),
-                children: /* @__PURE__ */ jsx(ArrowDown, { className: "size-3.5" })
-              }
-            ),
-            /* @__PURE__ */ jsx(SlideAction, { label: "Duplicate", onClick: () => actions.duplicateSlide(index), children: /* @__PURE__ */ jsx(Copy, { className: "size-3.5" }) }),
-            /* @__PURE__ */ jsx(SlideAction, { label: "Delete slide", onClick: () => actions.removeSlide(index), children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" }) })
+            /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                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__ */ jsx(MoreHorizontal, { className: "size-3.5" })
+                }
+              ) }),
+              /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", children: [
+                /* @__PURE__ */ jsxs(
+                  DropdownMenuItem,
+                  {
+                    disabled: index === 0,
+                    onSelect: () => actions.moveSlide(index, index - 1),
+                    children: [
+                      /* @__PURE__ */ jsx(ArrowUp, { className: "size-4" }),
+                      /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Move up" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  DropdownMenuItem,
+                  {
+                    disabled: index === count - 1,
+                    onSelect: () => actions.moveSlide(index, index + 1),
+                    children: [
+                      /* @__PURE__ */ jsx(ArrowDown, { className: "size-4" }),
+                      /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Move down" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => actions.duplicateSlide(index), children: [
+                  /* @__PURE__ */ jsx(Copy, { className: "size-4" }),
+                  /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Duplicate" })
+                ] }),
+                /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                /* @__PURE__ */ jsxs(
+                  DropdownMenuItem,
+                  {
+                    className: "text-destructive",
+                    onSelect: () => actions.removeSlide(index),
+                    children: [
+                      /* @__PURE__ */ jsx(Trash2, { className: "size-4" }),
+                      /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Delete slide" })
+                    ]
+                  }
+                )
+              ] })
+            ] })
           ]
         }
       )
@@ -251,6 +265,7 @@ function SlidesEditor({
   const slideIds = useMemo(() => ids.split(" "), [ids]);
   const current = usePresentation((s) => s.current);
   const captions = usePresentation((s) => s.captions);
+  const presenting = usePresentation((s) => s.presenting);
   const [selection, setSelection] = useState(null);
   const [view, setView] = useState(null);
   const list = useRef(null);
@@ -326,7 +341,22 @@ function SlidesEditor({
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs(
+              presenting ? /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  variant: "destructive",
+                  className: "ml-0.5 h-8 rounded-full",
+                  onClick: () => usePresentation.getState().setPresenting(false),
+                  title: "Stop presenting (the presentation window closes)",
+                  "data-testid": "presentation-stop-button",
+                  children: [
+                    /* @__PURE__ */ jsx(Square, { className: "size-3 fill-current" }),
+                    "Stop presenting"
+                  ]
+                }
+              ) : /* @__PURE__ */ jsxs(
                 Button,
                 {
                   type: "button",

package/dist/presentation/SlidesEditor.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/presentation/SlidesEditor.tsx"],
-  "sourcesContent": ["/**\n * The presentation editor: its slides one under the other, scrolled like a PDF's pages, each one\n * edited where it is \u2014 clips dragged, resized and reshaped on it, its title and points typed on\n * it. Hovering a slide shows its actions (layout, move up or down, duplicate, delete); between two\n * slides, + inserts one. One small floating bar holds the rest (Design, the host's Save and other\n * actions, Present, \"\u2026\"), so no header takes room from the slides. The clips collected for the\n * presentation wait in the tray along the bottom, to be dragged onto any slide.\n *\n * The same editor shows wherever the host mounts it (the viewer's tab, or its own window).\n */\n\nimport { memo, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'\nimport {\n  ArrowDown,\n  ArrowUp,\n  Circle,\n  Copy,\n  Minus,\n  MoreHorizontal,\n  Play,\n  Plus,\n  RectangleHorizontal,\n  Shapes,\n  Square,\n  Trash2,\n  Type,\n} from 'lucide-react'\nimport {\n  Button,\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n  cn,\n} from '@arbidocs/react/ui'\nimport { ClipTray } from './ClipTray'\nimport { DesignMenu } from './DesignMenu'\nimport { LayoutMenu } from './LayoutMenu'\nimport { Notice } from './Notice'\nimport { PresentationStage } from './PresentationStage'\nimport type { SlideTextEditing } from './SlideDecor'\nimport { usePresentation } from './store'\nimport { newBox, type BoxShape } from './boxes'\nimport { accentColor, isLightBackground } from './theme'\nimport { usePresenterKeys } from './usePresenterKeys'\n\nexport interface SlidesEditorProps {\n  /** Present: the host opens the shareable window. */\n  onPresent: () => void\n  /** In the floating bar, before Present (e.g. Save, pop out). */\n  actions?: ReactNode\n  /** At the top of the \"\u2026\" menu (e.g. New from template, Save as, Export). */\n  menuItems?: ReactNode\n  /** First in the clip tray (e.g. Generate image). */\n  trayStart?: ReactNode\n  onChooseLogo?: () => void\n  onEditImage?: (clipId: string) => void\n  onCropImage?: (clipId: string) => void\n}\n\ninterface Selection {\n  index: number\n  clipId: string\n}\n\n/** A small icon button of a slide's hover bar. */\nfunction SlideAction({\n  label,\n  onClick,\n  disabled,\n  children,\n}: {\n  label: string\n  onClick: () => void\n  disabled?: boolean\n  children: ReactNode\n}) {\n  return (\n    <Button\n      type=\"button\"\n      size=\"icon\"\n      variant=\"ghost\"\n      className=\"size-7 text-muted-foreground hover:text-foreground pointer-coarse:size-10\"\n      title={label}\n      aria-label={label}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </Button>\n  )\n}\n\nconst SlideCard = memo(function SlideCard({\n  index,\n  count,\n  current,\n  selected,\n  onSelect,\n  onEditImage,\n  onCropImage,\n}: {\n  index: number\n  count: number\n  current: boolean\n  selected: string | null\n  onSelect: (index: number, clipId: string | null) => void\n  onEditImage?: (clipId: string) => void\n  onCropImage?: (clipId: string) => void\n}) {\n  const empty = usePresentation((s) => {\n    const slide = s.slides[index]\n    return (\n      !!slide &&\n      !slide.items.length &&\n      !slide.boxes.length &&\n      slide.layout !== 'title' &&\n      slide.layout !== 'section'\n    )\n  })\n  const notes = usePresentation((s) => s.slides[index]?.notes ?? '')\n  const textEditing = useMemo<SlideTextEditing>(\n    () => ({\n      onTitle: (title) => usePresentation.getState().setSlideCaption(title, index),\n      onPoints: (points) => usePresentation.getState().setSlidePoints(points, index),\n    }),\n    [index]\n  )\n  const select = useCallback((clipId: string | null) => onSelect(index, clipId), [onSelect, index])\n  const actions = usePresentation.getState()\n  return (\n    <div className=\"group relative flex gap-2\" data-testid={`slide-${index}`}>\n      {/* The gutter: the slide's number, and its actions on hover (always on a touch screen's\n          current slide), clear of the slide itself. */}\n      <div className=\"flex w-9 shrink-0 flex-col items-center gap-0.5\">\n        <span\n          className={cn(\n            'py-1 text-xs tabular-nums',\n            current ? 'font-semibold text-foreground' : 'text-muted-foreground'\n          )}\n        >\n          {index + 1}\n        </span>\n        <div\n          className={cn(\n            'flex flex-col items-center gap-0.5 transition-opacity',\n            'opacity-0 focus-within:opacity-100 group-hover:opacity-100',\n            current && 'pointer-coarse:opacity-100'\n          )}\n          data-testid={`slide-actions-${index}`}\n        >\n          <LayoutMenu index={index} compact />\n          <SlideAction\n            label=\"Move up\"\n            disabled={index === 0}\n            onClick={() => actions.moveSlide(index, index - 1)}\n          >\n            <ArrowUp className=\"size-3.5\" />\n          </SlideAction>\n          <SlideAction\n            label=\"Move down\"\n            disabled={index === count - 1}\n            onClick={() => actions.moveSlide(index, index + 1)}\n          >\n            <ArrowDown className=\"size-3.5\" />\n          </SlideAction>\n          <SlideAction label=\"Duplicate\" onClick={() => actions.duplicateSlide(index)}>\n            <Copy className=\"size-3.5\" />\n          </SlideAction>\n          <SlideAction label=\"Delete slide\" onClick={() => actions.removeSlide(index)}>\n            <Trash2 className=\"size-3.5\" />\n          </SlideAction>\n        </div>\n      </div>\n      <div\n        className={cn(\n          'relative aspect-video min-w-0 flex-1 rounded-sm',\n          current && 'ring-1 ring-primary/40 ring-offset-4 ring-offset-transparent'\n        )}\n      >\n        <PresentationStage\n          editable\n          slideIndex={index}\n          selected={selected}\n          onSelect={select}\n          onEditImage={onEditImage}\n          onCropImage={onCropImage}\n          textEditing={textEditing}\n          overlay={\n            empty && (\n              <div className=\"pointer-events-none absolute inset-x-0 bottom-[8%] flex justify-center\">\n                <span className=\"rounded-full bg-black/40 px-3 py-1 text-[1.4cqw] text-white/70\">\n                  Drag a clip here from the tray\n                </span>\n              </div>\n            )\n          }\n        />\n        {(notes || current) && (\n          <textarea\n            value={notes}\n            rows={notes.split('\\n').length}\n            placeholder=\"Speaker notes\"\n            onChange={(event) =>\n              usePresentation.getState().setSlideNotes(event.target.value, index)\n            }\n            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\"\n            aria-label={`Speaker notes for slide ${index + 1}`}\n            data-testid={`slide-notes-${index}`}\n          />\n        )}\n      </div>\n    </div>\n  )\n})\n\nconst INSERTS: { shape: BoxShape; label: string; icon: ReactNode }[] = [\n  { shape: 'text', label: 'Text box', icon: <Type className=\"size-4\" /> },\n  { shape: 'rect', label: 'Rectangle', icon: <Square className=\"size-4\" /> },\n  {\n    shape: 'roundRect',\n    label: 'Rounded rectangle',\n    icon: <RectangleHorizontal className=\"size-4\" />,\n  },\n  { shape: 'ellipse', label: 'Ellipse', icon: <Circle className=\"size-4\" /> },\n  { shape: 'line', label: 'Line', icon: <Minus className=\"size-4\" /> },\n]\n\n/** Insert a text box or a shape on the current slide; it is selected, ready to type in. */\nfunction InsertMenu({ onInserted }: { onInserted: (index: number, boxId: string) => void }) {\n  const insert = (shape: BoxShape) => {\n    const state = usePresentation.getState()\n    const slide = state.slides[state.current]\n    const box = newBox(shape, accentColor(state.theme.accent))\n    // On a light slide (an imported deck's), text is dark.\n    const dark = isLightBackground(slide?.background)\n    const { id, ...rest } = dark\n      ? {\n          ...box,\n          paragraphs: box.paragraphs.map((p) => ({\n            ...p,\n            runs: p.runs.map((r) => ({ color: '#1f2328', ...r })),\n          })),\n        }\n      : box\n    void id\n    onInserted(state.current, state.addBox(rest))\n  }\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          type=\"button\"\n          size=\"icon\"\n          variant=\"ghost\"\n          className=\"size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11\"\n          title=\"Insert a text box or shape\"\n          aria-label=\"Insert\"\n          data-testid=\"slides-insert\"\n        >\n          <Shapes className=\"size-4\" />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        {INSERTS.map(({ shape, label, icon }) => (\n          <DropdownMenuItem\n            key={shape}\n            onSelect={() => insert(shape)}\n            data-testid={`slides-insert-${shape}`}\n          >\n            {icon}\n            <span className=\"ml-2\">{label}</span>\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\n/** Between two slides (and after the last): + inserts a slide there, shown on hover. */\nfunction InsertSlide({ after, always }: { after: number; always?: boolean }) {\n  return (\n    <div className=\"group/insert relative flex h-8 items-center justify-center pl-11\">\n      <button\n        type=\"button\"\n        onClick={() => usePresentation.getState().addSlide(undefined, after)}\n        className={cn(\n          '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',\n          !always && 'opacity-0 group-hover/insert:opacity-100 pointer-coarse:opacity-100'\n        )}\n        aria-label={`New slide after slide ${after + 1}`}\n        data-testid={`slide-insert-${after}`}\n      >\n        <Plus className=\"size-3\" />\n        Slide\n      </button>\n    </div>\n  )\n}\n\nexport function SlidesEditor({\n  onPresent,\n  actions,\n  menuItems,\n  trayStart,\n  onChooseLogo,\n  onEditImage,\n  onCropImage,\n}: SlidesEditorProps) {\n  const ids = usePresentation((s) => s.slides.map((slide) => slide.id).join(' '))\n  const slideIds = useMemo(() => ids.split(' '), [ids])\n  const current = usePresentation((s) => s.current)\n  const captions = usePresentation((s) => s.captions)\n  const [selection, setSelection] = useState<Selection | null>(null)\n  const [view, setView] = useState<Window | null>(null)\n  const list = useRef<HTMLDivElement>(null)\n  const rootRef = useCallback((node: HTMLDivElement | null) => {\n    if (node) setView(node.ownerDocument.defaultView)\n  }, [])\n\n  const onSelect = useCallback((index: number, clipId: string | null) => {\n    setSelection(clipId ? { index, clipId } : null)\n  }, [])\n  const keySelection = useMemo(\n    () => ({ clipId: selection?.clipId ?? null, clear: () => setSelection(null) }),\n    [selection]\n  )\n  usePresenterKeys(view, false, keySelection)\n\n  // A slide added, duplicated or moved becomes the current one: brought into view.\n  useEffect(() => {\n    const card = list.current?.querySelector(`[data-testid=\"slide-${current}\"]`)\n    card?.scrollIntoView?.({ block: 'nearest', behavior: 'smooth' })\n  }, [current, slideIds.length])\n\n  return (\n    <div\n      ref={rootRef}\n      className=\"relative flex h-full min-h-0 flex-col bg-muted/30\"\n      data-testid=\"slides-editor\"\n    >\n      <div ref={list} className=\"min-h-0 flex-1 overflow-y-auto\">\n        <div className=\"mx-auto flex max-w-[1100px] flex-col pb-6 pl-2 pr-6 pt-14\">\n          {slideIds.map((id, index) => (\n            <div key={id}>\n              <SlideCard\n                index={index}\n                count={slideIds.length}\n                current={index === current}\n                selected={selection?.index === index ? selection.clipId : null}\n                onSelect={onSelect}\n                onEditImage={onEditImage}\n                onCropImage={onCropImage}\n              />\n              <InsertSlide after={index} always={index === slideIds.length - 1} />\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* The rest, in one small floating bar: no header row. */}\n      <div\n        className=\"absolute right-4 top-2.5 z-40 flex items-center gap-0.5 rounded-full border border-border bg-background p-1 shadow-md\"\n        data-testid=\"slides-toolbar\"\n      >\n        <DesignMenu onChooseLogo={onChooseLogo} />\n        <InsertMenu onInserted={(index, boxId) => setSelection({ index, clipId: boxId })} />\n        {actions}\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              type=\"button\"\n              size=\"icon\"\n              variant=\"ghost\"\n              className=\"size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11\"\n              title=\"More\"\n              aria-label=\"More\"\n            >\n              <MoreHorizontal className=\"size-4\" />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            {menuItems}\n            {menuItems && <DropdownMenuSeparator />}\n            <DropdownMenuCheckboxItem\n              checked={captions}\n              onCheckedChange={(on) => usePresentation.getState().setCaptions(!!on)}\n            >\n              Show source labels\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Button\n          type=\"button\"\n          size=\"sm\"\n          className=\"ml-0.5 h-8 rounded-full\"\n          onClick={() => {\n            setSelection(null)\n            onPresent()\n          }}\n          title=\"Present: the slides alone, in a window to share or put full screen\"\n          data-testid=\"presentation-present-button\"\n        >\n          <Play className=\"size-3.5\" />\n          Present\n        </Button>\n      </div>\n\n      <ClipTray start={trayStart} />\n      <Notice />\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * The presentation editor: its slides one under the other, scrolled like a PDF's pages, each one\n * edited where it is \u2014 clips dragged, resized and reshaped on it, its title and points typed on\n * it. Hovering a slide shows its actions (layout, move up or down, duplicate, delete); between two\n * slides, + inserts one. One small floating bar holds the rest (Design, the host's Save and other\n * actions, Present, \"\u2026\"), so no header takes room from the slides. The clips collected for the\n * presentation wait in the tray along the bottom, to be dragged onto any slide.\n *\n * The same editor shows wherever the host mounts it (the viewer's tab, or its own window).\n */\n\nimport { memo, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'\nimport {\n  ArrowDown,\n  ArrowUp,\n  Circle,\n  Copy,\n  Minus,\n  MoreHorizontal,\n  Play,\n  Plus,\n  RectangleHorizontal,\n  Shapes,\n  Square,\n  Trash2,\n  Type,\n} from 'lucide-react'\nimport {\n  Button,\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n  cn,\n} from '@arbidocs/react/ui'\nimport { ClipTray } from './ClipTray'\nimport { DesignMenu } from './DesignMenu'\nimport { LayoutMenu } from './LayoutMenu'\nimport { Notice } from './Notice'\nimport { PresentationStage } from './PresentationStage'\nimport type { SlideTextEditing } from './SlideDecor'\nimport { usePresentation } from './store'\nimport { newBox, type BoxShape } from './boxes'\nimport { accentColor, isLightBackground } from './theme'\nimport { usePresenterKeys } from './usePresenterKeys'\n\nexport interface SlidesEditorProps {\n  /** Present: the host opens the shareable window. */\n  onPresent: () => void\n  /** In the floating bar, before Present (e.g. Save, pop out). */\n  actions?: ReactNode\n  /** At the top of the \"\u2026\" menu (e.g. New from template, Save as, Export). */\n  menuItems?: ReactNode\n  /** First in the clip tray (e.g. Generate image). */\n  trayStart?: ReactNode\n  onChooseLogo?: () => void\n  onEditImage?: (clipId: string) => void\n  onCropImage?: (clipId: string) => void\n}\n\ninterface Selection {\n  index: number\n  clipId: string\n}\n\nconst SlideCard = memo(function SlideCard({\n  index,\n  count,\n  current,\n  selected,\n  onSelect,\n  onEditImage,\n  onCropImage,\n}: {\n  index: number\n  count: number\n  current: boolean\n  selected: string | null\n  onSelect: (index: number, clipId: string | null) => void\n  onEditImage?: (clipId: string) => void\n  onCropImage?: (clipId: string) => void\n}) {\n  const empty = usePresentation((s) => {\n    const slide = s.slides[index]\n    return (\n      !!slide &&\n      !slide.items.length &&\n      !slide.boxes.length &&\n      !slide.points.trim() &&\n      slide.layout !== 'title' &&\n      slide.layout !== 'section'\n    )\n  })\n  const notes = usePresentation((s) => s.slides[index]?.notes ?? '')\n  const textEditing = useMemo<SlideTextEditing>(\n    () => ({\n      onTitle: (title) => usePresentation.getState().setSlideCaption(title, index),\n      onPoints: (points) => usePresentation.getState().setSlidePoints(points, index),\n    }),\n    [index]\n  )\n  const select = useCallback((clipId: string | null) => onSelect(index, clipId), [onSelect, index])\n  const actions = usePresentation.getState()\n  return (\n    <div className=\"group relative flex gap-2\" data-testid={`slide-${index}`}>\n      {/* The gutter: the slide's number, and its actions on hover (always on a touch screen's\n          current slide), clear of the slide itself. */}\n      <div className=\"flex w-9 shrink-0 flex-col items-center gap-0.5\">\n        <span\n          className={cn(\n            'py-1 text-xs tabular-nums',\n            current ? 'font-semibold text-foreground' : 'text-muted-foreground'\n          )}\n        >\n          {index + 1}\n        </span>\n        <div\n          className={cn(\n            'flex flex-col items-center gap-0.5 transition-opacity',\n            'opacity-0 focus-within:opacity-100 group-hover:opacity-100',\n            current && 'pointer-coarse:opacity-100'\n          )}\n          data-testid={`slide-actions-${index}`}\n        >\n          <LayoutMenu index={index} compact />\n          {/* The slide's other actions, behind \"\u2026\": moving it, copying it, deleting it. */}\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                type=\"button\"\n                size=\"icon\"\n                variant=\"ghost\"\n                className=\"size-7 text-muted-foreground hover:text-foreground pointer-coarse:size-11\"\n                title=\"Slide actions\"\n                aria-label={`Slide ${index + 1} actions`}\n                data-testid={`slide-menu-${index}`}\n              >\n                <MoreHorizontal className=\"size-3.5\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem\n                disabled={index === 0}\n                onSelect={() => actions.moveSlide(index, index - 1)}\n              >\n                <ArrowUp className=\"size-4\" />\n                <span className=\"ml-2\">Move up</span>\n              </DropdownMenuItem>\n              <DropdownMenuItem\n                disabled={index === count - 1}\n                onSelect={() => actions.moveSlide(index, index + 1)}\n              >\n                <ArrowDown className=\"size-4\" />\n                <span className=\"ml-2\">Move down</span>\n              </DropdownMenuItem>\n              <DropdownMenuItem onSelect={() => actions.duplicateSlide(index)}>\n                <Copy className=\"size-4\" />\n                <span className=\"ml-2\">Duplicate</span>\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem\n                className=\"text-destructive\"\n                onSelect={() => actions.removeSlide(index)}\n              >\n                <Trash2 className=\"size-4\" />\n                <span className=\"ml-2\">Delete slide</span>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </div>\n      <div\n        className={cn(\n          'relative aspect-video min-w-0 flex-1 rounded-sm',\n          current && 'ring-1 ring-primary/40 ring-offset-4 ring-offset-transparent'\n        )}\n      >\n        <PresentationStage\n          editable\n          slideIndex={index}\n          selected={selected}\n          onSelect={select}\n          onEditImage={onEditImage}\n          onCropImage={onCropImage}\n          textEditing={textEditing}\n          overlay={\n            empty && (\n              <div className=\"pointer-events-none absolute inset-x-0 bottom-[8%] flex justify-center\">\n                <span className=\"rounded-full bg-black/40 px-3 py-1 text-[1.4cqw] text-white/70\">\n                  Drag a clip here from the tray\n                </span>\n              </div>\n            )\n          }\n        />\n        {(notes || current) && (\n          <textarea\n            value={notes}\n            rows={notes.split('\\n').length}\n            placeholder=\"Speaker notes\"\n            onChange={(event) =>\n              usePresentation.getState().setSlideNotes(event.target.value, index)\n            }\n            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\"\n            aria-label={`Speaker notes for slide ${index + 1}`}\n            data-testid={`slide-notes-${index}`}\n          />\n        )}\n      </div>\n    </div>\n  )\n})\n\nconst INSERTS: { shape: BoxShape; label: string; icon: ReactNode }[] = [\n  { shape: 'text', label: 'Text box', icon: <Type className=\"size-4\" /> },\n  { shape: 'rect', label: 'Rectangle', icon: <Square className=\"size-4\" /> },\n  {\n    shape: 'roundRect',\n    label: 'Rounded rectangle',\n    icon: <RectangleHorizontal className=\"size-4\" />,\n  },\n  { shape: 'ellipse', label: 'Ellipse', icon: <Circle className=\"size-4\" /> },\n  { shape: 'line', label: 'Line', icon: <Minus className=\"size-4\" /> },\n]\n\n/** Insert a text box or a shape on the current slide; it is selected, ready to type in. */\nfunction InsertMenu({ onInserted }: { onInserted: (index: number, boxId: string) => void }) {\n  const insert = (shape: BoxShape) => {\n    const state = usePresentation.getState()\n    const slide = state.slides[state.current]\n    const box = newBox(shape, accentColor(state.theme.accent))\n    // On a light slide (an imported deck's), text is dark.\n    const dark = isLightBackground(slide?.background)\n    const { id, ...rest } = dark\n      ? {\n          ...box,\n          paragraphs: box.paragraphs.map((p) => ({\n            ...p,\n            runs: p.runs.map((r) => ({ color: '#1f2328', ...r })),\n          })),\n        }\n      : box\n    void id\n    onInserted(state.current, state.addBox(rest))\n  }\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          type=\"button\"\n          size=\"icon\"\n          variant=\"ghost\"\n          className=\"size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11\"\n          title=\"Insert a text box or shape\"\n          aria-label=\"Insert\"\n          data-testid=\"slides-insert\"\n        >\n          <Shapes className=\"size-4\" />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        {INSERTS.map(({ shape, label, icon }) => (\n          <DropdownMenuItem\n            key={shape}\n            onSelect={() => insert(shape)}\n            data-testid={`slides-insert-${shape}`}\n          >\n            {icon}\n            <span className=\"ml-2\">{label}</span>\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\n/** Between two slides (and after the last): + inserts a slide there, shown on hover. */\nfunction InsertSlide({ after, always }: { after: number; always?: boolean }) {\n  return (\n    <div className=\"group/insert relative flex h-8 items-center justify-center pl-11\">\n      <button\n        type=\"button\"\n        onClick={() => usePresentation.getState().addSlide(undefined, after)}\n        className={cn(\n          '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',\n          !always && 'opacity-0 group-hover/insert:opacity-100 pointer-coarse:opacity-100'\n        )}\n        aria-label={`New slide after slide ${after + 1}`}\n        data-testid={`slide-insert-${after}`}\n      >\n        <Plus className=\"size-3\" />\n        Slide\n      </button>\n    </div>\n  )\n}\n\nexport function SlidesEditor({\n  onPresent,\n  actions,\n  menuItems,\n  trayStart,\n  onChooseLogo,\n  onEditImage,\n  onCropImage,\n}: SlidesEditorProps) {\n  const ids = usePresentation((s) => s.slides.map((slide) => slide.id).join(' '))\n  const slideIds = useMemo(() => ids.split(' '), [ids])\n  const current = usePresentation((s) => s.current)\n  const captions = usePresentation((s) => s.captions)\n  // Presenting in the presentation's own window: Present becomes Stop presenting.\n  const presenting = usePresentation((s) => s.presenting)\n  const [selection, setSelection] = useState<Selection | null>(null)\n  const [view, setView] = useState<Window | null>(null)\n  const list = useRef<HTMLDivElement>(null)\n  const rootRef = useCallback((node: HTMLDivElement | null) => {\n    if (node) setView(node.ownerDocument.defaultView)\n  }, [])\n\n  const onSelect = useCallback((index: number, clipId: string | null) => {\n    setSelection(clipId ? { index, clipId } : null)\n  }, [])\n  const keySelection = useMemo(\n    () => ({ clipId: selection?.clipId ?? null, clear: () => setSelection(null) }),\n    [selection]\n  )\n  usePresenterKeys(view, false, keySelection)\n\n  // A slide added, duplicated or moved becomes the current one: brought into view.\n  useEffect(() => {\n    const card = list.current?.querySelector(`[data-testid=\"slide-${current}\"]`)\n    card?.scrollIntoView?.({ block: 'nearest', behavior: 'smooth' })\n  }, [current, slideIds.length])\n\n  return (\n    <div\n      ref={rootRef}\n      className=\"relative flex h-full min-h-0 flex-col bg-muted/30\"\n      data-testid=\"slides-editor\"\n    >\n      <div ref={list} className=\"min-h-0 flex-1 overflow-y-auto\">\n        <div className=\"mx-auto flex max-w-[1100px] flex-col pb-6 pl-2 pr-6 pt-14\">\n          {slideIds.map((id, index) => (\n            <div key={id}>\n              <SlideCard\n                index={index}\n                count={slideIds.length}\n                current={index === current}\n                selected={selection?.index === index ? selection.clipId : null}\n                onSelect={onSelect}\n                onEditImage={onEditImage}\n                onCropImage={onCropImage}\n              />\n              <InsertSlide after={index} always={index === slideIds.length - 1} />\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* The rest, in one small floating bar: no header row. */}\n      <div\n        className=\"absolute right-4 top-2.5 z-40 flex items-center gap-0.5 rounded-full border border-border bg-background p-1 shadow-md\"\n        data-testid=\"slides-toolbar\"\n      >\n        <DesignMenu onChooseLogo={onChooseLogo} />\n        <InsertMenu onInserted={(index, boxId) => setSelection({ index, clipId: boxId })} />\n        {actions}\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              type=\"button\"\n              size=\"icon\"\n              variant=\"ghost\"\n              className=\"size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11\"\n              title=\"More\"\n              aria-label=\"More\"\n            >\n              <MoreHorizontal className=\"size-4\" />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            {menuItems}\n            {menuItems && <DropdownMenuSeparator />}\n            <DropdownMenuCheckboxItem\n              checked={captions}\n              onCheckedChange={(on) => usePresentation.getState().setCaptions(!!on)}\n            >\n              Show source labels\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        {presenting ? (\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            variant=\"destructive\"\n            className=\"ml-0.5 h-8 rounded-full\"\n            onClick={() => usePresentation.getState().setPresenting(false)}\n            title=\"Stop presenting (the presentation window closes)\"\n            data-testid=\"presentation-stop-button\"\n          >\n            <Square className=\"size-3 fill-current\" />\n            Stop presenting\n          </Button>\n        ) : (\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            className=\"ml-0.5 h-8 rounded-full\"\n            onClick={() => {\n              setSelection(null)\n              onPresent()\n            }}\n            title=\"Present: the slides alone, in a window to share or put full screen\"\n            data-testid=\"presentation-present-button\"\n          >\n            <Play className=\"size-3.5\" />\n            Present\n          </Button>\n        )}\n      </div>\n\n      <ClipTray start={trayStart} />\n      <Notice />\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": ["SlideCard"]
 }

package/dist/presentation/StageItem.js

@@ -3,7 +3,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useRef, useState } from "react";
 import { cn } from "@arbidocs/react/ui";
 import { ClipImage } from "./ClipImage.js";
-import { ClipViewControls } from "./ClipViewControls.js";
 import {
   frameHeight,
   moveFrame,
@@ -36,7 +35,6 @@ const StageItem = memo(function StageItem2({
 }) {
   const element = useRef(null);
   const gesture = useRef(null);
-  const [dragging, setDragging] = useState(false);
   const [reshape, setReshape] = useState(null);
   const shown = reshape ? { ...clip, ...reshape.shape } : clip;
   const box = reshape?.frame ?? frame;
@@ -86,7 +84,6 @@ const StageItem = 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";
     }
@@ -117,7 +114,6 @@ const StageItem = 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);
@@ -167,7 +163,6 @@ const StageItem = memo(function StageItem2({
             children: label
           }
         ),
-        selected && !dragging && /* @__PURE__ */ jsx(ClipViewControls, { clip }),
         selected && CORNERS.map(({ corner, left, top, cursor }) => /* @__PURE__ */ jsx(
           "div",
           {