@arbidocs/blocks 0.5.120 → 0.5.122

package/dist/presentation/SlideDecor.js

@@ -0,0 +1,189 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useState } from "react";
+import { cn } from "@arbidocs/react/ui";
+import { LAYOUT_INFO, slideGeometry, textLines } from "./slide-layout.js";
+import { TEXT_COLORS, accentColor } from "./theme.js";
+import { useObjectUrl } from "./useObjectUrl.js";
+const boxStyle = (box) => ({
+  left: `${box.x * 100}%`,
+  top: `${box.y * 100}%`,
+  width: `${box.w * 100}%`,
+  height: `${box.h * 100}%`
+});
+const textStyle = (box, color) => ({
+  ...boxStyle(box),
+  fontSize: `${box.size * 100}cqw`,
+  fontWeight: box.weight,
+  lineHeight: box.leading,
+  color,
+  letterSpacing: box.tone === "title" ? "-0.01em" : void 0
+});
+const PLACEHOLDER_COLOR = "rgba(255,255,255,0.32)";
+function Text({
+  box,
+  lines,
+  accent,
+  placeholder,
+  onEdit,
+  testId
+}) {
+  const empty = lines.length === 0;
+  if (empty && !placeholder) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "absolute flex flex-col overflow-hidden",
+        onEdit ? "pointer-events-auto cursor-text rounded-[0.3cqw] hover:outline hover:outline-1 hover:outline-white/25" : "pointer-events-none",
+        box.align === "center" && "text-center",
+        box.bullets && "gap-[0.6cqw]",
+        box.anchor === "middle" && "justify-center",
+        box.anchor === "bottom" && "justify-end"
+      ),
+      style: textStyle(box, empty ? PLACEHOLDER_COLOR : TEXT_COLORS[box.tone]),
+      onPointerDown: onEdit ? (event) => event.stopPropagation() : void 0,
+      onClick: onEdit,
+      "data-testid": testId,
+      children: (empty ? [placeholder] : lines).map(
+        (line, index) => box.bullets ? /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-[0.8em]", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "inline-block size-[0.42em] shrink-0 -translate-y-[0.12em]",
+              style: { background: empty ? "currentColor" : accent }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: line })
+        ] }, index) : /* @__PURE__ */ jsx("div", { children: line }, index)
+      )
+    }
+  );
+}
+function TextField({
+  box,
+  value,
+  placeholder,
+  multiline,
+  onChange,
+  onDone,
+  testId
+}) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      autoFocus: true,
+      value,
+      placeholder,
+      onChange: (event) => onChange(multiline ? event.target.value : event.target.value.replace(/\n/g, " ")),
+      onBlur: onDone,
+      onPointerDown: (event) => event.stopPropagation(),
+      onKeyDown: (event) => {
+        if (event.key === "Escape" || !multiline && event.key === "Enter") {
+          event.preventDefault();
+          event.currentTarget.blur();
+        }
+      },
+      className: cn(
+        "pointer-events-auto absolute resize-none overflow-hidden rounded-[0.3cqw] bg-white/5 p-0 outline outline-1 outline-white/40 placeholder:text-white/30 focus:outline-white/60",
+        box.align === "center" && "text-center"
+      ),
+      style: {
+        ...textStyle(box, TEXT_COLORS[box.tone]),
+        fontFamily: "inherit",
+        // Bulleted lines keep their indent while typed.
+        paddingLeft: box.bullets ? "1.22em" : void 0
+      },
+      "aria-label": placeholder,
+      "data-testid": testId
+    }
+  );
+}
+function Logo({ image, box }) {
+  const url = useObjectUrl(image);
+  if (!url) return null;
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: url,
+      alt: "",
+      className: "pointer-events-none absolute object-contain opacity-90",
+      style: { ...boxStyle(box), objectPosition: box.x < 0.5 ? "left bottom" : "right bottom" },
+      "data-testid": "stage-logo"
+    }
+  );
+}
+const SlideDecor = memo(function SlideDecor2({
+  slide,
+  theme,
+  labels,
+  logoImage,
+  editable,
+  editing,
+  dim
+}) {
+  const [typing, setTyping] = useState(null);
+  const geometry = slideGeometry(slide, { labels, logo: theme.logo?.corner ?? null });
+  const title = slide.caption.trim();
+  const titled = slide.layout === "title" || slide.layout === "section";
+  const info = LAYOUT_INFO[slide.layout];
+  return /* @__PURE__ */ jsxs("div", { className: cn("pointer-events-none absolute inset-0", dim && "opacity-30"), children: [
+    !geometry.title ? null : editing && typing === "title" ? /* @__PURE__ */ jsx(
+      TextField,
+      {
+        box: geometry.title,
+        value: slide.caption,
+        placeholder: "Title",
+        multiline: false,
+        onChange: editing.onTitle,
+        onDone: () => setTyping(null),
+        testId: "stage-slide-caption-input"
+      }
+    ) : /* @__PURE__ */ jsx(
+      Text,
+      {
+        box: geometry.title,
+        lines: title ? [title] : [],
+        accent: accentColor(theme.accent),
+        placeholder: editable && (titled || editing) ? "Click to add a title" : void 0,
+        onEdit: editing ? () => setTyping("title") : void 0,
+        testId: "stage-slide-caption"
+      }
+    ),
+    geometry.rule && (title || editable && titled) && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute",
+        style: { ...boxStyle(geometry.rule), background: accentColor(theme.accent) }
+      }
+    ),
+    geometry.text && (editing && typing === "text" ? /* @__PURE__ */ jsx(
+      TextField,
+      {
+        box: geometry.text,
+        value: slide.points,
+        placeholder: info.text ?? "",
+        multiline: true,
+        onChange: editing.onPoints,
+        onDone: () => setTyping(null),
+        testId: "stage-slide-points-input"
+      }
+    ) : /* @__PURE__ */ jsx(
+      Text,
+      {
+        box: geometry.text,
+        lines: textLines(slide.points),
+        accent: accentColor(theme.accent),
+        placeholder: editable ? info.text : void 0,
+        onEdit: editing ? () => setTyping("text") : void 0,
+        testId: "stage-slide-points"
+      }
+    )),
+    geometry.logo && logoImage && /* @__PURE__ */ jsx(Logo, { image: logoImage, box: geometry.logo })
+  ] });
+});
+export {
+  SlideDecor
+};
+//# sourceMappingURL=SlideDecor.js.map

package/dist/presentation/SlideDecor.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/SlideDecor.tsx"],
+  "sourcesContent": ["/**\n * What a slide shows besides its clips, by its layout and the theme: its title with the accent\n * rule, its points (accent bullets) or subtitle, and the logo in the footer. Positioned on the\n * stage from `slideGeometry`, sized in container units (`cqw`) so it scales with the stage. The\n * saved PDF and the PowerPoint export draw the same geometry.\n *\n * In the editor (`editing`), the title and text are typed on the slide itself: a click swaps the\n * text for a field with the same type, size and place, so nothing moves while it is edited.\n */\n\nimport { memo, useState, type CSSProperties } from 'react'\nimport { cn } from '@arbidocs/react/ui'\nimport type { Slide } from './model'\nimport { LAYOUT_INFO, slideGeometry, textLines, type Box, type TextBox } from './slide-layout'\nimport { TEXT_COLORS, accentColor, type Theme } from './theme'\nimport { useObjectUrl } from './useObjectUrl'\n\n/** Typing a slide's title and text on the slide. */\nexport interface SlideTextEditing {\n  onTitle(title: string): void\n  onPoints(points: string): void\n}\n\nconst boxStyle = (box: Box) => ({\n  left: `${box.x * 100}%`,\n  top: `${box.y * 100}%`,\n  width: `${box.w * 100}%`,\n  height: `${box.h * 100}%`,\n})\n\nconst textStyle = (box: TextBox, color: string): CSSProperties => ({\n  ...boxStyle(box),\n  fontSize: `${box.size * 100}cqw`,\n  fontWeight: box.weight,\n  lineHeight: box.leading,\n  color,\n  letterSpacing: box.tone === 'title' ? '-0.01em' : undefined,\n})\n\nconst PLACEHOLDER_COLOR = 'rgba(255,255,255,0.32)'\n\nfunction Text({\n  box,\n  lines,\n  accent,\n  placeholder,\n  onEdit,\n  testId,\n}: {\n  box: TextBox\n  lines: string[]\n  accent: string\n  /** Shown faintly in the editor while the text is empty. */\n  placeholder?: string\n  /** A click starts typing (the editor). */\n  onEdit?: () => void\n  testId: string\n}) {\n  const empty = lines.length === 0\n  if (empty && !placeholder) return null\n  return (\n    <div\n      className={cn(\n        'absolute flex flex-col overflow-hidden',\n        onEdit\n          ? 'pointer-events-auto cursor-text rounded-[0.3cqw] hover:outline hover:outline-1 hover:outline-white/25'\n          : 'pointer-events-none',\n        box.align === 'center' && 'text-center',\n        box.bullets && 'gap-[0.6cqw]',\n        box.anchor === 'middle' && 'justify-center',\n        box.anchor === 'bottom' && 'justify-end'\n      )}\n      style={textStyle(box, empty ? PLACEHOLDER_COLOR : TEXT_COLORS[box.tone])}\n      onPointerDown={onEdit ? (event) => event.stopPropagation() : undefined}\n      onClick={onEdit}\n      data-testid={testId}\n    >\n      {(empty ? [placeholder!] : lines).map((line, index) =>\n        box.bullets ? (\n          <div key={index} className=\"flex items-baseline gap-[0.8em]\">\n            <span\n              aria-hidden\n              className=\"inline-block size-[0.42em] shrink-0 -translate-y-[0.12em]\"\n              style={{ background: empty ? 'currentColor' : accent }}\n            />\n            <span>{line}</span>\n          </div>\n        ) : (\n          <div key={index}>{line}</div>\n        )\n      )}\n    </div>\n  )\n}\n\n/** The field a title or text is typed in: the text's own type, size and place. */\nfunction TextField({\n  box,\n  value,\n  placeholder,\n  multiline,\n  onChange,\n  onDone,\n  testId,\n}: {\n  box: TextBox\n  value: string\n  placeholder: string\n  multiline: boolean\n  onChange: (value: string) => void\n  onDone: () => void\n  testId: string\n}) {\n  return (\n    <textarea\n      autoFocus\n      value={value}\n      placeholder={placeholder}\n      onChange={(event) =>\n        onChange(multiline ? event.target.value : event.target.value.replace(/\\n/g, ' '))\n      }\n      onBlur={onDone}\n      onPointerDown={(event) => event.stopPropagation()}\n      onKeyDown={(event) => {\n        if (event.key === 'Escape' || (!multiline && event.key === 'Enter')) {\n          event.preventDefault()\n          event.currentTarget.blur()\n        }\n      }}\n      className={cn(\n        'pointer-events-auto absolute resize-none overflow-hidden rounded-[0.3cqw] bg-white/5 p-0 outline outline-1 outline-white/40 placeholder:text-white/30 focus:outline-white/60',\n        box.align === 'center' && 'text-center'\n      )}\n      style={{\n        ...textStyle(box, TEXT_COLORS[box.tone]),\n        fontFamily: 'inherit',\n        // Bulleted lines keep their indent while typed.\n        paddingLeft: box.bullets ? '1.22em' : undefined,\n      }}\n      aria-label={placeholder}\n      data-testid={testId}\n    />\n  )\n}\n\nfunction Logo({ image, box }: { image: Blob; box: Box }) {\n  const url = useObjectUrl(image)\n  if (!url) return null\n  return (\n    <img\n      src={url}\n      alt=\"\"\n      className=\"pointer-events-none absolute object-contain opacity-90\"\n      style={{ ...boxStyle(box), objectPosition: box.x < 0.5 ? 'left bottom' : 'right bottom' }}\n      data-testid=\"stage-logo\"\n    />\n  )\n}\n\nexport const SlideDecor = memo(function SlideDecor({\n  slide,\n  theme,\n  labels,\n  logoImage,\n  editable,\n  editing,\n  dim,\n}: {\n  slide: Pick<Slide, 'layout' | 'caption' | 'points'>\n  theme: Theme\n  labels: boolean\n  logoImage: Blob | null\n  editable: boolean\n  editing?: SlideTextEditing\n  dim?: boolean\n}) {\n  const [typing, setTyping] = useState<'title' | 'text' | null>(null)\n  const geometry = slideGeometry(slide, { labels, logo: theme.logo?.corner ?? null })\n  const title = slide.caption.trim()\n  const titled = slide.layout === 'title' || slide.layout === 'section'\n  const info = LAYOUT_INFO[slide.layout]\n  return (\n    <div className={cn('pointer-events-none absolute inset-0', dim && 'opacity-30')}>\n      {!geometry.title ? null : editing && typing === 'title' ? (\n        <TextField\n          box={geometry.title}\n          value={slide.caption}\n          placeholder=\"Title\"\n          multiline={false}\n          onChange={editing.onTitle}\n          onDone={() => setTyping(null)}\n          testId=\"stage-slide-caption-input\"\n        />\n      ) : (\n        <Text\n          box={geometry.title}\n          lines={title ? [title] : []}\n          accent={accentColor(theme.accent)}\n          placeholder={editable && (titled || editing) ? 'Click to add a title' : undefined}\n          onEdit={editing ? () => setTyping('title') : undefined}\n          testId=\"stage-slide-caption\"\n        />\n      )}\n      {geometry.rule && (title || (editable && titled)) && (\n        <div\n          className=\"absolute\"\n          style={{ ...boxStyle(geometry.rule), background: accentColor(theme.accent) }}\n        />\n      )}\n      {geometry.text &&\n        (editing && typing === 'text' ? (\n          <TextField\n            box={geometry.text}\n            value={slide.points}\n            placeholder={info.text ?? ''}\n            multiline\n            onChange={editing.onPoints}\n            onDone={() => setTyping(null)}\n            testId=\"stage-slide-points-input\"\n          />\n        ) : (\n          <Text\n            box={geometry.text}\n            lines={textLines(slide.points)}\n            accent={accentColor(theme.accent)}\n            placeholder={editable ? info.text : undefined}\n            onEdit={editing ? () => setTyping('text') : undefined}\n            testId=\"stage-slide-points\"\n          />\n        ))}\n      {geometry.logo && logoImage && <Logo image={logoImage} box={geometry.logo} />}\n    </div>\n  )\n})\n"],
+  "mappings": "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",
+  "names": ["SlideDecor"]
+}

package/dist/presentation/SlidesEditor.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The presentation editor: its slides one under the other, scrolled like a PDF's pages, each one
+ * edited where it is — clips dragged, resized and reshaped on it, its title and points typed on
+ * it. Hovering a slide shows its actions (layout, move up or down, duplicate, delete); between two
+ * slides, + inserts one. One small floating bar holds the rest (Design, the host's Save and other
+ * actions, Present, "…"), so no header takes room from the slides. The clips collected for the
+ * presentation wait in the tray along the bottom, to be dragged onto any slide.
+ *
+ * The same editor shows wherever the host mounts it (the viewer's tab, or its own window).
+ */
+import { type ReactNode } from 'react';
+export interface SlidesEditorProps {
+    /** Present: the host opens the shareable window. */
+    onPresent: () => void;
+    /** In the floating bar, before Present (e.g. Save, pop out). */
+    actions?: ReactNode;
+    /** At the top of the "…" menu (e.g. New from template, Save as, Export). */
+    menuItems?: ReactNode;
+    /** First in the clip tray (e.g. Generate image). */
+    trayStart?: ReactNode;
+    onChooseLogo?: () => void;
+    onEditImage?: (clipId: string) => void;
+    onCropImage?: (clipId: string) => void;
+}
+export declare function SlidesEditor({ onPresent, actions, menuItems, trayStart, onChooseLogo, onEditImage, onCropImage, }: SlidesEditorProps): import("react").JSX.Element;

package/dist/presentation/SlidesEditor.js

@@ -0,0 +1,375 @@
+"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 presenting = usePresentation((s) => s.presenting);
+  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"
+                    }
+                  )
+                ] })
+              ] }),
+              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",
+                  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