@arbidocs/blocks 0.5.120 → 0.5.121

package/dist/presentation/SlidesEditor.js

@@ -0,0 +1,359 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  ArrowDown,
+  ArrowUp,
+  Circle,
+  Copy,
+  Minus,
+  MoreHorizontal,
+  Play,
+  Plus,
+  RectangleHorizontal,
+  Shapes,
+  Square,
+  Trash2,
+  Type
+} from "lucide-react";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  cn
+} from "@arbidocs/react/ui";
+import { ClipTray } from "./ClipTray.js";
+import { DesignMenu } from "./DesignMenu.js";
+import { LayoutMenu } from "./LayoutMenu.js";
+import { Notice } from "./Notice.js";
+import { PresentationStage } from "./PresentationStage.js";
+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,
+  current,
+  selected,
+  onSelect,
+  onEditImage,
+  onCropImage
+}) {
+  const empty = usePresentation((s) => {
+    const slide = s.slides[index];
+    return !!slide && !slide.items.length && !slide.boxes.length && slide.layout !== "title" && slide.layout !== "section";
+  });
+  const notes = usePresentation((s) => s.slides[index]?.notes ?? "");
+  const textEditing = useMemo(
+    () => ({
+      onTitle: (title) => usePresentation.getState().setSlideCaption(title, index),
+      onPoints: (points) => usePresentation.getState().setSlidePoints(points, index)
+    }),
+    [index]
+  );
+  const select = useCallback((clipId) => onSelect(index, clipId), [onSelect, index]);
+  const actions = usePresentation.getState();
+  return /* @__PURE__ */ jsxs("div", { className: "group relative flex gap-2", "data-testid": `slide-${index}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex w-9 shrink-0 flex-col items-center gap-0.5", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "py-1 text-xs tabular-nums",
+            current ? "font-semibold text-foreground" : "text-muted-foreground"
+          ),
+          children: index + 1
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex flex-col items-center gap-0.5 transition-opacity",
+            "opacity-0 focus-within:opacity-100 group-hover:opacity-100",
+            current && "pointer-coarse:opacity-100"
+          ),
+          "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(
+      "div",
+      {
+        className: cn(
+          "relative aspect-video min-w-0 flex-1 rounded-sm",
+          current && "ring-1 ring-primary/40 ring-offset-4 ring-offset-transparent"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            PresentationStage,
+            {
+              editable: true,
+              slideIndex: index,
+              selected,
+              onSelect: select,
+              onEditImage,
+              onCropImage,
+              textEditing,
+              overlay: empty && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-[8%] flex justify-center", children: /* @__PURE__ */ jsx("span", { className: "rounded-full bg-black/40 px-3 py-1 text-[1.4cqw] text-white/70", children: "Drag a clip here from the tray" }) })
+            }
+          ),
+          (notes || current) && /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              value: notes,
+              rows: notes.split("\n").length,
+              placeholder: "Speaker notes",
+              onChange: (event) => usePresentation.getState().setSlideNotes(event.target.value, index),
+              className: "mt-2 block w-full resize-none rounded-sm border-0 bg-transparent px-1 py-0.5 text-xs text-muted-foreground placeholder:text-muted-foreground/50 focus:bg-background focus:text-foreground focus:outline-none focus:ring-1 focus:ring-ring",
+              "aria-label": `Speaker notes for slide ${index + 1}`,
+              "data-testid": `slide-notes-${index}`
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+const INSERTS = [
+  { shape: "text", label: "Text box", icon: /* @__PURE__ */ jsx(Type, { className: "size-4" }) },
+  { shape: "rect", label: "Rectangle", icon: /* @__PURE__ */ jsx(Square, { className: "size-4" }) },
+  {
+    shape: "roundRect",
+    label: "Rounded rectangle",
+    icon: /* @__PURE__ */ jsx(RectangleHorizontal, { className: "size-4" })
+  },
+  { shape: "ellipse", label: "Ellipse", icon: /* @__PURE__ */ jsx(Circle, { className: "size-4" }) },
+  { shape: "line", label: "Line", icon: /* @__PURE__ */ jsx(Minus, { className: "size-4" }) }
+];
+function InsertMenu({ onInserted }) {
+  const insert = (shape) => {
+    const state = usePresentation.getState();
+    const slide = state.slides[state.current];
+    const box = newBox(shape, accentColor(state.theme.accent));
+    const dark = isLightBackground(slide?.background);
+    const { id, ...rest } = dark ? {
+      ...box,
+      paragraphs: box.paragraphs.map((p) => ({
+        ...p,
+        runs: p.runs.map((r) => ({ color: "#1f2328", ...r }))
+      }))
+    } : box;
+    void id;
+    onInserted(state.current, state.addBox(rest));
+  };
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        size: "icon",
+        variant: "ghost",
+        className: "size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11",
+        title: "Insert a text box or shape",
+        "aria-label": "Insert",
+        "data-testid": "slides-insert",
+        children: /* @__PURE__ */ jsx(Shapes, { className: "size-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: INSERTS.map(({ shape, label, icon }) => /* @__PURE__ */ jsxs(
+      DropdownMenuItem,
+      {
+        onSelect: () => insert(shape),
+        "data-testid": `slides-insert-${shape}`,
+        children: [
+          icon,
+          /* @__PURE__ */ jsx("span", { className: "ml-2", children: label })
+        ]
+      },
+      shape
+    )) })
+  ] });
+}
+function InsertSlide({ after, always }) {
+  return /* @__PURE__ */ jsx("div", { className: "group/insert relative flex h-8 items-center justify-center pl-11", children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => usePresentation.getState().addSlide(void 0, after),
+      className: cn(
+        "flex items-center gap-1 rounded-full border border-dashed border-border bg-background px-2.5 py-0.5 text-xs text-muted-foreground transition-opacity hover:border-solid hover:text-foreground focus-visible:opacity-100",
+        !always && "opacity-0 group-hover/insert:opacity-100 pointer-coarse:opacity-100"
+      ),
+      "aria-label": `New slide after slide ${after + 1}`,
+      "data-testid": `slide-insert-${after}`,
+      children: [
+        /* @__PURE__ */ jsx(Plus, { className: "size-3" }),
+        "Slide"
+      ]
+    }
+  ) });
+}
+function SlidesEditor({
+  onPresent,
+  actions,
+  menuItems,
+  trayStart,
+  onChooseLogo,
+  onEditImage,
+  onCropImage
+}) {
+  const ids = usePresentation((s) => s.slides.map((slide) => slide.id).join(" "));
+  const slideIds = useMemo(() => ids.split(" "), [ids]);
+  const current = usePresentation((s) => s.current);
+  const captions = usePresentation((s) => s.captions);
+  const [selection, setSelection] = useState(null);
+  const [view, setView] = useState(null);
+  const list = useRef(null);
+  const rootRef = useCallback((node) => {
+    if (node) setView(node.ownerDocument.defaultView);
+  }, []);
+  const onSelect = useCallback((index, clipId) => {
+    setSelection(clipId ? { index, clipId } : null);
+  }, []);
+  const keySelection = useMemo(
+    () => ({ clipId: selection?.clipId ?? null, clear: () => setSelection(null) }),
+    [selection]
+  );
+  usePresenterKeys(view, false, keySelection);
+  useEffect(() => {
+    const card = list.current?.querySelector(`[data-testid="slide-${current}"]`);
+    card?.scrollIntoView?.({ block: "nearest", behavior: "smooth" });
+  }, [current, slideIds.length]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: "relative flex h-full min-h-0 flex-col bg-muted/30",
+      "data-testid": "slides-editor",
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: list, className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-[1100px] flex-col pb-6 pl-2 pr-6 pt-14", children: slideIds.map((id, index) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            SlideCard,
+            {
+              index,
+              count: slideIds.length,
+              current: index === current,
+              selected: selection?.index === index ? selection.clipId : null,
+              onSelect,
+              onEditImage,
+              onCropImage
+            }
+          ),
+          /* @__PURE__ */ jsx(InsertSlide, { after: index, always: index === slideIds.length - 1 })
+        ] }, id)) }) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "absolute right-4 top-2.5 z-40 flex items-center gap-0.5 rounded-full border border-border bg-background p-1 shadow-md",
+            "data-testid": "slides-toolbar",
+            children: [
+              /* @__PURE__ */ jsx(DesignMenu, { onChooseLogo }),
+              /* @__PURE__ */ jsx(InsertMenu, { onInserted: (index, boxId) => setSelection({ index, clipId: boxId }) }),
+              actions,
+              /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    size: "icon",
+                    variant: "ghost",
+                    className: "size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11",
+                    title: "More",
+                    "aria-label": "More",
+                    children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+                  menuItems,
+                  menuItems && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                  /* @__PURE__ */ jsx(
+                    DropdownMenuCheckboxItem,
+                    {
+                      checked: captions,
+                      onCheckedChange: (on) => usePresentation.getState().setCaptions(!!on),
+                      children: "Show source labels"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  className: "ml-0.5 h-8 rounded-full",
+                  onClick: () => {
+                    setSelection(null);
+                    onPresent();
+                  },
+                  title: "Present: the slides alone, in a window to share or put full screen",
+                  "data-testid": "presentation-present-button",
+                  children: [
+                    /* @__PURE__ */ jsx(Play, { className: "size-3.5" }),
+                    "Present"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(ClipTray, { start: trayStart }),
+        /* @__PURE__ */ jsx(Notice, {})
+      ]
+    }
+  );
+}
+export {
+  SlidesEditor
+};
+//# sourceMappingURL=SlidesEditor.js.map

package/dist/presentation/SlidesEditor.js.map

@@ -0,0 +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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",
+  "names": ["SlideCard"]
+}

package/dist/presentation/StageBox.d.ts

@@ -0,0 +1,30 @@
+/**
+ * A text box or shape on the stage (`boxes`), drawn in CSS sized in container units so it scales
+ * with the stage. In the editor it is selected with a click, moved by dragging it, resized from
+ * its eight handles (its shape free), and typed in after a second click (a double click, or
+ * Enter): the text is edited in place, in its own type.
+ *
+ * Like a clip, it moves on the GPU while dragged: a transform (or, resizing, its box) is set once
+ * per animation frame and the new frame reaches the presentation when the drag ends.
+ */
+import { type BoxFrame, type Paragraph, type SlideBox } from './boxes';
+export declare function Paragraphs({ paragraphs, font, }: {
+    paragraphs: readonly Paragraph[];
+    font: string;
+}): import("react").JSX.Element;
+/** What a stage gives its boxes (stable: the boxes are memoised). */
+export interface StageBoxHost {
+    stageBox(): DOMRect | null;
+    select(boxId: string): void;
+    commit(boxId: string, frame: BoxFrame): void;
+    setText(boxId: string, text: string): void;
+}
+export interface StageBoxProps {
+    box: SlideBox;
+    /** The theme's typeface (CSS), for runs without one of their own. */
+    font: string;
+    editable: boolean;
+    selected: boolean;
+    host: StageBoxHost;
+}
+export declare const StageBox: import("react").NamedExoticComponent<StageBoxProps>;