@arbidocs/blocks 0.5.120 → 0.5.122

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  // 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/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>;

package/dist/presentation/StageBox.js

@@ -0,0 +1,281 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  memo,
+  useRef,
+  useState
+} from "react";
+import { cn } from "@arbidocs/react/ui";
+import {
+  DEFAULT_INSET,
+  DEFAULT_TEXT_SIZE,
+  boxText,
+  firstRun,
+  moveBox,
+  stretchBox
+} from "./boxes.js";
+import { STAGE_ASPECT } from "./model.js";
+import { TEXT_COLORS } from "./theme.js";
+import { cqw, runStyle } from "./box-style.js";
+const HANDLES = [
+  { handle: "nw", left: "0%", top: "0%", cursor: "nwse-resize" },
+  { handle: "n", left: "50%", top: "0%", cursor: "ns-resize" },
+  { handle: "ne", left: "100%", top: "0%", cursor: "nesw-resize" },
+  { handle: "e", left: "100%", top: "50%", cursor: "ew-resize" },
+  { handle: "se", left: "100%", top: "100%", cursor: "nwse-resize" },
+  { handle: "s", left: "50%", top: "100%", cursor: "ns-resize" },
+  { handle: "sw", left: "0%", top: "100%", cursor: "nesw-resize" },
+  { handle: "w", left: "0%", top: "50%", cursor: "ew-resize" }
+];
+const withAlpha = (hex, alpha = 1) => {
+  if (alpha >= 1) return hex;
+  const n = parseInt(hex.slice(1), 16);
+  return `rgba(${n >> 16 & 255}, ${n >> 8 & 255}, ${n & 255}, ${alpha})`;
+};
+function shapeStyle(box) {
+  const { frame } = box;
+  const line = box.line;
+  const shorter = Math.min(frame.w, frame.h * 1 / STAGE_ASPECT);
+  return {
+    background: box.fill && box.shape !== "line" ? withAlpha(box.fill, box.fillAlpha) : void 0,
+    border: line && box.shape !== "line" ? `${cqw(line.width)} ${line.dash ? "dashed" : "solid"} ${line.color}` : void 0,
+    borderRadius: box.shape === "ellipse" ? "50%" : box.shape === "roundRect" ? `${shorter * 16.67}cqw` : void 0
+  };
+}
+function Paragraphs({
+  paragraphs,
+  font
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: paragraphs.map((paragraph, index) => {
+    const first = paragraph.runs[0];
+    const size = first?.size ?? DEFAULT_TEXT_SIZE;
+    const indent = (paragraph.level ?? 0) * 0.5 * size;
+    const empty = !paragraph.runs.some((run) => run.text);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "whitespace-pre-wrap break-words",
+        style: {
+          textAlign: paragraph.align ?? "left",
+          lineHeight: 1.2,
+          paddingLeft: cqw(indent + (paragraph.bullet ? size * 0.9 : 0)),
+          textIndent: paragraph.bullet ? cqw(-size * 0.9) : void 0,
+          // An empty line keeps its height.
+          fontSize: cqw(size)
+        },
+        children: [
+          paragraph.bullet && /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                ...runStyle(first ?? { text: "" }, font),
+                display: "inline-block",
+                width: cqw(size * 0.9),
+                textIndent: 0
+              },
+              children: "\u2022"
+            }
+          ),
+          empty ? "\u200B" : paragraph.runs.map((run, i) => /* @__PURE__ */ jsx("span", { style: runStyle(run, font), children: run.text }, i))
+        ]
+      },
+      index
+    );
+  }) });
+}
+const StageBox = memo(function StageBox2({
+  box,
+  font,
+  editable,
+  selected,
+  host
+}) {
+  const element = useRef(null);
+  const gesture = useRef(null);
+  const [typing, setTyping] = useState(false);
+  const [dragging, setDragging] = useState(false);
+  const { frame } = box;
+  const view = () => element.current?.ownerDocument.defaultView ?? window;
+  const apply = () => {
+    const g = gesture.current;
+    const el = element.current;
+    if (!g || !el) return;
+    g.request = null;
+    if (!g.next) return;
+    if (g.handle === "move") {
+      el.style.translate = `${(g.next.x - g.frame.x) * g.stage.width}px ${(g.next.y - g.frame.y) * g.stage.height}px`;
+    } else {
+      el.style.left = `${g.next.x * 100}%`;
+      el.style.top = `${g.next.y * 100}%`;
+      el.style.width = `${g.next.w * 100}%`;
+      el.style.height = `${g.next.h * 100}%`;
+    }
+  };
+  const start = (event, handle) => {
+    if (!editable || typing || event.button !== 0) return;
+    const stage = host.stageBox();
+    if (!stage) return;
+    event.preventDefault();
+    event.stopPropagation();
+    host.select(box.id);
+    event.currentTarget.setPointerCapture(event.pointerId);
+    gesture.current = {
+      handle,
+      pointer: { x: event.clientX, y: event.clientY },
+      frame,
+      stage,
+      next: null,
+      request: null,
+      wasSelected: selected
+    };
+  };
+  const move = (event) => {
+    const g = gesture.current;
+    if (!g) return;
+    const dx = (event.clientX - g.pointer.x) / g.stage.width;
+    const dy = (event.clientY - g.pointer.y) / g.stage.height;
+    if (!g.next) setDragging(true);
+    g.next = g.handle === "move" ? moveBox(g.frame, dx, dy) : stretchBox(g.frame, g.handle, dx, dy);
+    g.request ??= view().requestAnimationFrame(apply);
+  };
+  const end = () => {
+    const g = gesture.current;
+    gesture.current = null;
+    if (!g) return;
+    if (g.request !== null) view().cancelAnimationFrame(g.request);
+    if (!g.next) {
+      if (g.wasSelected && g.handle === "move" && hasText) setTyping(true);
+      return;
+    }
+    const el = element.current;
+    if (el) {
+      el.style.translate = "";
+      el.style.left = `${g.frame.x * 100}%`;
+      el.style.top = `${g.frame.y * 100}%`;
+      el.style.width = `${g.frame.w * 100}%`;
+      el.style.height = `${g.frame.h * 100}%`;
+    }
+    setDragging(false);
+    host.commit(box.id, g.next);
+  };
+  const hasText = box.shape !== "line";
+  const inset = cqw(box.inset ?? DEFAULT_INSET);
+  const run = firstRun(box);
+  const transform = box.rotation ? `rotate(${box.rotation}deg)` : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: element,
+      className: cn(
+        "absolute",
+        editable ? "pointer-events-auto" : "pointer-events-none",
+        editable && !typing && "cursor-move touch-none",
+        editable && !selected && "hover:outline hover:outline-1 hover:outline-white/30",
+        selected && "outline outline-2 outline-offset-1 outline-primary"
+      ),
+      style: {
+        left: `${frame.x * 100}%`,
+        top: `${frame.y * 100}%`,
+        width: `${frame.w * 100}%`,
+        height: `${frame.h * 100}%`,
+        transform,
+        willChange: dragging ? "translate" : void 0
+      },
+      onPointerDown: (event) => start(event, "move"),
+      onPointerMove: move,
+      onPointerUp: end,
+      onPointerCancel: end,
+      onDoubleClick: () => editable && hasText && setTyping(true),
+      onKeyDown: (event) => {
+        if (selected && !typing && event.key === "Enter" && hasText) {
+          event.preventDefault();
+          setTyping(true);
+        }
+      },
+      tabIndex: editable ? 0 : void 0,
+      "data-testid": `stage-box-${box.id}`,
+      children: [
+        box.shape === "line" ? /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "absolute inset-0 size-full overflow-visible",
+            preserveAspectRatio: "none",
+            "aria-hidden": true,
+            children: /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: "0%",
+                y1: box.flipV ? "100%" : "0%",
+                x2: "100%",
+                y2: box.flipV ? "0%" : "100%",
+                stroke: box.line?.color ?? TEXT_COLORS.body,
+                style: { strokeWidth: cqw(box.line?.width ?? 1) },
+                strokeDasharray: box.line?.dash ? "6 4" : void 0
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute inset-0 box-border flex flex-col overflow-hidden",
+              box.anchor === "middle" && "justify-center",
+              box.anchor === "bottom" && "justify-end"
+            ),
+            style: { ...shapeStyle(box), padding: inset },
+            children: typing ? /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                autoFocus: true,
+                defaultValue: boxText(box),
+                className: "pointer-events-auto w-full flex-1 resize-none bg-transparent p-0 outline-none",
+                style: {
+                  ...runStyle(run ?? { text: "" }, font),
+                  lineHeight: 1.2,
+                  textAlign: box.paragraphs[0]?.align ?? "left"
+                },
+                onPointerDown: (event) => event.stopPropagation(),
+                onBlur: (event) => {
+                  host.setText(box.id, event.currentTarget.value);
+                  setTyping(false);
+                },
+                onKeyDown: (event) => {
+                  event.stopPropagation();
+                  if (event.key === "Escape") event.currentTarget.blur();
+                },
+                "aria-label": "Text",
+                "data-testid": "stage-box-text-input"
+              }
+            ) : boxText(box) || !editable ? /* @__PURE__ */ jsx(Paragraphs, { paragraphs: box.paragraphs, font }) : box.shape === "text" && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "text-white/40",
+                style: { fontSize: cqw(run?.size ?? DEFAULT_TEXT_SIZE) },
+                children: "Double-click to type"
+              }
+            )
+          }
+        ),
+        selected && !typing && !dragging && HANDLES.filter(
+          ({ handle }) => box.shape !== "line" || handle === "e" || handle === "w" || handle === "n" || handle === "s"
+        ).map(({ handle, left, top, cursor }) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute flex size-5 -translate-x-1/2 -translate-y-1/2 items-center justify-center pointer-coarse:size-11",
+            style: { left, top, cursor, touchAction: "none" },
+            onPointerDown: (event) => start(event, handle),
+            "aria-label": `Resize from ${handle}`,
+            "data-testid": `stage-box-resize-${handle}`,
+            children: /* @__PURE__ */ jsx("span", { className: "pointer-events-none size-2.5 rounded-full border-2 border-primary bg-background" })
+          },
+          handle
+        ))
+      ]
+    }
+  );
+});
+export {
+  Paragraphs,
+  StageBox
+};
+//# sourceMappingURL=StageBox.js.map

package/dist/presentation/StageBox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/StageBox.tsx"],
+  "sourcesContent": ["/**\n * A text box or shape on the stage (`boxes`), drawn in CSS sized in container units so it scales\n * with the stage. In the editor it is selected with a click, moved by dragging it, resized from\n * its eight handles (its shape free), and typed in after a second click (a double click, or\n * Enter): the text is edited in place, in its own type.\n *\n * Like a clip, it moves on the GPU while dragged: a transform (or, resizing, its box) is set once\n * per animation frame and the new frame reaches the presentation when the drag ends.\n */\n\nimport {\n  memo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type PointerEvent as ReactPointerEvent,\n} from 'react'\nimport { cn } from '@arbidocs/react/ui'\nimport {\n  DEFAULT_INSET,\n  DEFAULT_TEXT_SIZE,\n  boxText,\n  firstRun,\n  moveBox,\n  stretchBox,\n  type BoxFrame,\n  type BoxHandle,\n  type Paragraph,\n  type SlideBox,\n} from './boxes'\nimport { STAGE_ASPECT } from './model'\nimport { TEXT_COLORS } from './theme'\nimport { cqw, runStyle } from './box-style'\n\nconst HANDLES: { handle: BoxHandle; left: string; top: string; cursor: string }[] = [\n  { handle: 'nw', left: '0%', top: '0%', cursor: 'nwse-resize' },\n  { handle: 'n', left: '50%', top: '0%', cursor: 'ns-resize' },\n  { handle: 'ne', left: '100%', top: '0%', cursor: 'nesw-resize' },\n  { handle: 'e', left: '100%', top: '50%', cursor: 'ew-resize' },\n  { handle: 'se', left: '100%', top: '100%', cursor: 'nwse-resize' },\n  { handle: 's', left: '50%', top: '100%', cursor: 'ns-resize' },\n  { handle: 'sw', left: '0%', top: '100%', cursor: 'nesw-resize' },\n  { handle: 'w', left: '0%', top: '50%', cursor: 'ew-resize' },\n]\n\nconst withAlpha = (hex: string, alpha = 1) => {\n  if (alpha >= 1) return hex\n  const n = parseInt(hex.slice(1), 16)\n  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`\n}\n\n/** A box's shape and outline, as CSS. */\nfunction shapeStyle(box: SlideBox): CSSProperties {\n  const { frame } = box\n  const line = box.line\n  // A rounded rectangle's corners: a sixth of its shorter side, as PowerPoint's default.\n  const shorter = Math.min(frame.w, (frame.h * 1) / STAGE_ASPECT)\n  return {\n    background: box.fill && box.shape !== 'line' ? withAlpha(box.fill, box.fillAlpha) : undefined,\n    border:\n      line && box.shape !== 'line'\n        ? `${cqw(line.width)} ${line.dash ? 'dashed' : 'solid'} ${line.color}`\n        : undefined,\n    borderRadius:\n      box.shape === 'ellipse'\n        ? '50%'\n        : box.shape === 'roundRect'\n          ? `${shorter * 16.67}cqw`\n          : undefined,\n  }\n}\n\nexport function Paragraphs({\n  paragraphs,\n  font,\n}: {\n  paragraphs: readonly Paragraph[]\n  font: string\n}) {\n  return (\n    <>\n      {paragraphs.map((paragraph, index) => {\n        const first = paragraph.runs[0]\n        const size = first?.size ?? DEFAULT_TEXT_SIZE\n        const indent = (paragraph.level ?? 0) * 0.5 * size\n        const empty = !paragraph.runs.some((run) => run.text)\n        return (\n          <div\n            key={index}\n            className=\"whitespace-pre-wrap break-words\"\n            style={{\n              textAlign: paragraph.align ?? 'left',\n              lineHeight: 1.2,\n              paddingLeft: cqw(indent + (paragraph.bullet ? size * 0.9 : 0)),\n              textIndent: paragraph.bullet ? cqw(-size * 0.9) : undefined,\n              // An empty line keeps its height.\n              fontSize: cqw(size),\n            }}\n          >\n            {paragraph.bullet && (\n              <span\n                style={{\n                  ...runStyle(first ?? { text: '' }, font),\n                  display: 'inline-block',\n                  width: cqw(size * 0.9),\n                  textIndent: 0,\n                }}\n              >\n                \u2022\n              </span>\n            )}\n            {empty\n              ? '\u200B'\n              : paragraph.runs.map((run, i) => (\n                  <span key={i} style={runStyle(run, font)}>\n                    {run.text}\n                  </span>\n                ))}\n          </div>\n        )\n      })}\n    </>\n  )\n}\n\n/** What a stage gives its boxes (stable: the boxes are memoised). */\nexport interface StageBoxHost {\n  stageBox(): DOMRect | null\n  select(boxId: string): void\n  commit(boxId: string, frame: BoxFrame): void\n  setText(boxId: string, text: string): void\n}\n\nexport interface StageBoxProps {\n  box: SlideBox\n  /** The theme's typeface (CSS), for runs without one of their own. */\n  font: string\n  editable: boolean\n  selected: boolean\n  host: StageBoxHost\n}\n\ninterface Gesture {\n  handle: BoxHandle | 'move'\n  pointer: { x: number; y: number }\n  frame: BoxFrame\n  stage: DOMRect\n  next: BoxFrame | null\n  request: number | null\n  /** The box was already selected: a click on it (no move) starts typing. */\n  wasSelected: boolean\n}\n\nexport const StageBox = memo(function StageBox({\n  box,\n  font,\n  editable,\n  selected,\n  host,\n}: StageBoxProps) {\n  const element = useRef<HTMLDivElement>(null)\n  const gesture = useRef<Gesture | null>(null)\n  const [typing, setTyping] = useState(false)\n  const [dragging, setDragging] = useState(false)\n  const { frame } = box\n  const view = () => element.current?.ownerDocument.defaultView ?? window\n\n  const apply = () => {\n    const g = gesture.current\n    const el = element.current\n    if (!g || !el) return\n    g.request = null\n    if (!g.next) return\n    if (g.handle === 'move') {\n      el.style.translate = `${(g.next.x - g.frame.x) * g.stage.width}px ${(g.next.y - g.frame.y) * g.stage.height}px`\n    } else {\n      el.style.left = `${g.next.x * 100}%`\n      el.style.top = `${g.next.y * 100}%`\n      el.style.width = `${g.next.w * 100}%`\n      el.style.height = `${g.next.h * 100}%`\n    }\n  }\n\n  const start = (event: ReactPointerEvent, handle: Gesture['handle']) => {\n    if (!editable || typing || event.button !== 0) return\n    const stage = host.stageBox()\n    if (!stage) return\n    event.preventDefault()\n    event.stopPropagation()\n    host.select(box.id)\n    event.currentTarget.setPointerCapture(event.pointerId)\n    gesture.current = {\n      handle,\n      pointer: { x: event.clientX, y: event.clientY },\n      frame,\n      stage,\n      next: null,\n      request: null,\n      wasSelected: selected,\n    }\n  }\n\n  const move = (event: ReactPointerEvent) => {\n    const g = gesture.current\n    if (!g) return\n    const dx = (event.clientX - g.pointer.x) / g.stage.width\n    const dy = (event.clientY - g.pointer.y) / g.stage.height\n    if (!g.next) setDragging(true)\n    g.next = g.handle === 'move' ? moveBox(g.frame, dx, dy) : stretchBox(g.frame, g.handle, dx, dy)\n    g.request ??= view().requestAnimationFrame(apply)\n  }\n\n  const end = () => {\n    const g = gesture.current\n    gesture.current = null\n    if (!g) return\n    if (g.request !== null) view().cancelAnimationFrame(g.request)\n    if (!g.next) {\n      // A click: selected; on a box already selected, typing starts (as in PowerPoint).\n      if (g.wasSelected && g.handle === 'move' && hasText) setTyping(true)\n      return\n    }\n    const el = element.current\n    if (el) {\n      // Back to the frame React set (the committed one replaces it on the next render).\n      el.style.translate = ''\n      el.style.left = `${g.frame.x * 100}%`\n      el.style.top = `${g.frame.y * 100}%`\n      el.style.width = `${g.frame.w * 100}%`\n      el.style.height = `${g.frame.h * 100}%`\n    }\n    setDragging(false)\n    host.commit(box.id, g.next)\n  }\n\n  const hasText = box.shape !== 'line'\n  const inset = cqw(box.inset ?? DEFAULT_INSET)\n  const run = firstRun(box)\n  const transform = box.rotation ? `rotate(${box.rotation}deg)` : undefined\n\n  return (\n    <div\n      ref={element}\n      className={cn(\n        'absolute',\n        editable ? 'pointer-events-auto' : 'pointer-events-none',\n        editable && !typing && 'cursor-move touch-none',\n        editable && !selected && 'hover:outline hover:outline-1 hover:outline-white/30',\n        selected && 'outline outline-2 outline-offset-1 outline-primary'\n      )}\n      style={{\n        left: `${frame.x * 100}%`,\n        top: `${frame.y * 100}%`,\n        width: `${frame.w * 100}%`,\n        height: `${frame.h * 100}%`,\n        transform,\n        willChange: dragging ? 'translate' : undefined,\n      }}\n      onPointerDown={(event) => start(event, 'move')}\n      onPointerMove={move}\n      onPointerUp={end}\n      onPointerCancel={end}\n      onDoubleClick={() => editable && hasText && setTyping(true)}\n      onKeyDown={(event) => {\n        if (selected && !typing && event.key === 'Enter' && hasText) {\n          event.preventDefault()\n          setTyping(true)\n        }\n      }}\n      tabIndex={editable ? 0 : undefined}\n      data-testid={`stage-box-${box.id}`}\n    >\n      {box.shape === 'line' ? (\n        <svg\n          className=\"absolute inset-0 size-full overflow-visible\"\n          preserveAspectRatio=\"none\"\n          aria-hidden\n        >\n          <line\n            x1=\"0%\"\n            y1={box.flipV ? '100%' : '0%'}\n            x2=\"100%\"\n            y2={box.flipV ? '0%' : '100%'}\n            stroke={box.line?.color ?? TEXT_COLORS.body}\n            style={{ strokeWidth: cqw(box.line?.width ?? 1) }}\n            strokeDasharray={box.line?.dash ? '6 4' : undefined}\n          />\n        </svg>\n      ) : (\n        <div\n          className={cn(\n            'absolute inset-0 box-border flex flex-col overflow-hidden',\n            box.anchor === 'middle' && 'justify-center',\n            box.anchor === 'bottom' && 'justify-end'\n          )}\n          style={{ ...shapeStyle(box), padding: inset }}\n        >\n          {typing ? (\n            <textarea\n              autoFocus\n              defaultValue={boxText(box)}\n              className=\"pointer-events-auto w-full flex-1 resize-none bg-transparent p-0 outline-none\"\n              style={{\n                ...runStyle(run ?? { text: '' }, font),\n                lineHeight: 1.2,\n                textAlign: box.paragraphs[0]?.align ?? 'left',\n              }}\n              onPointerDown={(event) => event.stopPropagation()}\n              onBlur={(event) => {\n                host.setText(box.id, event.currentTarget.value)\n                setTyping(false)\n              }}\n              onKeyDown={(event) => {\n                event.stopPropagation()\n                if (event.key === 'Escape') event.currentTarget.blur()\n              }}\n              aria-label=\"Text\"\n              data-testid=\"stage-box-text-input\"\n            />\n          ) : boxText(box) || !editable ? (\n            <Paragraphs paragraphs={box.paragraphs} font={font} />\n          ) : (\n            box.shape === 'text' && (\n              <span\n                className=\"text-white/40\"\n                style={{ fontSize: cqw(run?.size ?? DEFAULT_TEXT_SIZE) }}\n              >\n                Double-click to type\n              </span>\n            )\n          )}\n        </div>\n      )}\n      {selected &&\n        !typing &&\n        !dragging &&\n        HANDLES.filter(\n          ({ handle }) =>\n            box.shape !== 'line' ||\n            handle === 'e' ||\n            handle === 'w' ||\n            handle === 'n' ||\n            handle === 's'\n        ).map(({ handle, left, top, cursor }) => (\n          <div\n            key={handle}\n            className=\"absolute flex size-5 -translate-x-1/2 -translate-y-1/2 items-center justify-center pointer-coarse:size-11\"\n            style={{ left, top, cursor, touchAction: 'none' }}\n            onPointerDown={(event) => start(event, handle)}\n            aria-label={`Resize from ${handle}`}\n            data-testid={`stage-box-resize-${handle}`}\n          >\n            <span className=\"pointer-events-none size-2.5 rounded-full border-2 border-primary bg-background\" />\n          </div>\n        ))}\n    </div>\n  )\n})\n"],
+  "mappings": "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",
+  "names": ["StageBox"]
+}

package/dist/presentation/StageItem.d.ts

@@ -0,0 +1,37 @@
+/**
+ * One clip on the stage, and its own gestures: moved by dragging it, resized from a corner (its
+ * shape kept), reshaped from a side's middle (more or less of the page that way), snapping to the
+ * stage and to the other clips.
+ *
+ * Built for smooth dragging: while a clip is moved or resized nothing re-renders and nothing is
+ * laid out again. Its element is moved by a GPU transform (translate, scale) once per animation
+ * frame, and the new frame reaches the presentation once, when the drag ends. Only reshaping, which
+ * changes what the clip shows, re-renders the clip itself (and nothing else). The component is
+ * memoised: other clips, the slide's text and the other slides are untouched by its drags.
+ */
+import { type Clip, type Frame, type Guide, type Placed } from './model';
+/** What a stage gives its clips (stable across renders: the clips are memoised). */
+export interface StageItemHost {
+    /** The stage's box on screen, as a gesture begins. */
+    stageBox(): DOMRect | null;
+    /** The other clips of the slide, as a gesture begins: what this one snaps to. */
+    others(clipId: string): Placed[];
+    select(clipId: string): void;
+    /** The snap lines to draw while a clip is dragged (empty: none). */
+    guides(guides: Guide[]): void;
+    /** A drag is on (the stage hides the selected clip's floating actions meanwhile). */
+    dragging(on: boolean): void;
+    /** The drag's result, once it ends. */
+    commit(clipId: string, frame: Frame, shape?: Pick<Clip, 'rect' | 'aspect'>): void;
+}
+export interface StageItemProps {
+    clip: Clip;
+    frame: Frame;
+    editable: boolean;
+    selected: boolean;
+    dim: boolean;
+    /** Its source label, under it (empty: none). */
+    label: string;
+    host: StageItemHost;
+}
+export declare const StageItem: import("react").NamedExoticComponent<StageItemProps>;