@arbidocs/blocks 0.5.120 → 0.5.122

package/dist/presentation/ClipImage.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { closePdfRegionImage, renderPdfRegion } from "@arbidocs/react/viewers";
+import { cn } from "@arbidocs/react/ui";
+import { MediaClip } from "./MediaClip.js";
+const WIDTH_STEP = 160;
+const SETTLE_MS = 150;
+const ClipImage = memo(function ClipImage2({
+  clip,
+  className,
+  live = false
+}) {
+  return clip.kind === "pdf" ? /* @__PURE__ */ jsx(PdfClip, { clip, className }) : /* @__PURE__ */ jsx(MediaClip, { clip, className, live });
+});
+const sameRect = (a, b) => a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;
+function PdfClip({ clip, className }) {
+  const canvasRef = useRef(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const [rendered, setRendered] = useState(null);
+  const [failed, setFailed] = useState(false);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const view = canvas?.ownerDocument.defaultView;
+    if (!canvas || !view) return;
+    const measure = () => {
+      const box = canvas.getBoundingClientRect();
+      const dpr = view.devicePixelRatio || 1;
+      const width = Math.max(1, Math.round(box.width * dpr));
+      const height = Math.max(1, Math.round(box.height * dpr));
+      setSize((s) => s.width === width && s.height === height ? s : { width, height });
+    };
+    measure();
+    const Observer = view.ResizeObserver ?? ResizeObserver;
+    const observer = new Observer(measure);
+    observer.observe(canvas);
+    return () => observer.disconnect();
+  }, []);
+  useLayoutEffect(() => {
+    const canvas = canvasRef.current;
+    const context = canvas?.getContext("2d");
+    if (!canvas || !context || !size.width) return;
+    if (canvas.width !== size.width) canvas.width = size.width;
+    if (canvas.height !== size.height) canvas.height = size.height;
+    context.fillStyle = "#fff";
+    context.fillRect(0, 0, size.width, size.height);
+    if (!rendered) return;
+    const { rect } = clip;
+    const sx = size.width / rect.w;
+    const sy = size.height / rect.h;
+    try {
+      context.drawImage(
+        rendered.image,
+        (rendered.rect.x - rect.x) * sx,
+        (rendered.rect.y - rect.y) * sy,
+        rendered.rect.w * sx,
+        rendered.rect.h * sy
+      );
+    } catch {
+      setRendered(null);
+    }
+  }, [size, rendered, clip]);
+  const wanted = Math.ceil(size.width / WIDTH_STEP) * WIDTH_STEP;
+  const stale = wanted > 0 && (!rendered || !sameRect(rendered.rect, clip.rect) || wanted > rendered.width || wanted < rendered.width / 2);
+  useEffect(() => {
+    if (!stale) return;
+    const controller = new AbortController();
+    const rect = clip.rect;
+    const timer = setTimeout(() => {
+      renderPdfRegion({
+        file: clip.source,
+        page: clip.page,
+        rect,
+        masks: clip.masks,
+        width: wanted,
+        signal: controller.signal
+      }).then((image) => {
+        if (controller.signal.aborted) return closePdfRegionImage(image);
+        setFailed(false);
+        setRendered({ image, rect, width: wanted });
+      }).catch(() => !controller.signal.aborted && setFailed(true));
+    }, SETTLE_MS);
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [stale, wanted, clip.source, clip.page, clip.rect, clip.masks]);
+  const previous = useRef(null);
+  useEffect(() => {
+    if (previous.current && previous.current !== rendered) {
+      closePdfRegionImage(previous.current.image);
+    }
+    previous.current = rendered;
+  }, [rendered]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("relative h-full w-full overflow-hidden bg-white", className),
+      "data-testid": `clip-image-${clip.id}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            className: "pointer-events-none block h-full w-full",
+            role: "img",
+            "aria-label": clip.caption,
+            "aria-busy": !rendered
+          }
+        ),
+        failed && !rendered && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center p-2 text-center text-xs text-neutral-500", children: "Couldn't draw this clip" })
+      ]
+    }
+  );
+}
+export {
+  ClipImage
+};
+//# sourceMappingURL=ClipImage.js.map

package/dist/presentation/ClipImage.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/ClipImage.tsx"],
+  "sourcesContent": ["/**\n * A clip as shown on a slide or in the tray.\n *\n * A PDF clip is drawn into a canvas the size of its box in device pixels (measured in whichever\n * window it is in), from a bitmap of its region rendered for that size: as sharp as the screen\n * allows. The canvas remembers what area its bitmap covers, so when the clip is scrolled or\n * resized it is redrawn at once from the bitmap it has (shifted or scaled: cheap), and the sharp\n * rendering follows once the change settles. An older render still running is cancelled; renders\n * across clips are queued a few at a time (`renderPdfRegion`), so the page stays smooth.\n *\n * An image or video clip is its own file, cropped (`MediaClip`).\n */\n\nimport { memo, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { closePdfRegionImage, renderPdfRegion, type PdfRegionImage } from '@arbidocs/react/viewers'\nimport { cn } from '@arbidocs/react/ui'\nimport { MediaClip } from './MediaClip'\nimport type { Clip, Rect } from './model'\n\n/** Rendered widths are rounded up to this step, so small size changes reuse the rendering. */\nconst WIDTH_STEP = 160\n/** A new rendering is asked for once the clip has stopped changing for this long. */\nconst SETTLE_MS = 150\n\nexport interface ClipImageProps {\n  clip: Clip\n  className?: string\n  /** On the presented stage: a video clip plays with its sound (the editor's copy is muted). */\n  live?: boolean\n}\n\n/** An image or video clip is its own file, cropped; a PDF clip is drawn for its size. */\nexport const ClipImage = memo(function ClipImage({\n  clip,\n  className,\n  live = false,\n}: ClipImageProps) {\n  return clip.kind === 'pdf' ? (\n    <PdfClip clip={clip} className={className} />\n  ) : (\n    <MediaClip clip={clip} className={className} live={live} />\n  )\n})\n\ninterface Rendered {\n  image: PdfRegionImage\n  /** The page area the image shows. */\n  rect: Rect\n  /** Its width in device pixels. */\n  width: number\n}\n\nconst sameRect = (a: Rect, b: Rect) => a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h\n\nfunction PdfClip({ clip, className }: Omit<ClipImageProps, 'live'>) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  // The canvas's size in device pixels.\n  const [size, setSize] = useState({ width: 0, height: 0 })\n  const [rendered, setRendered] = useState<Rendered | null>(null)\n  const [failed, setFailed] = useState(false)\n\n  // Size the canvas to its box in its own window's device pixels.\n  useEffect(() => {\n    const canvas = canvasRef.current\n    const view = canvas?.ownerDocument.defaultView\n    if (!canvas || !view) return\n    const measure = () => {\n      const box = canvas.getBoundingClientRect()\n      const dpr = view.devicePixelRatio || 1\n      const width = Math.max(1, Math.round(box.width * dpr))\n      const height = Math.max(1, Math.round(box.height * dpr))\n      setSize((s) => (s.width === width && s.height === height ? s : { width, height }))\n    }\n    measure()\n    const Observer = (view as typeof window).ResizeObserver ?? ResizeObserver\n    const observer = new Observer(measure)\n    observer.observe(canvas)\n    return () => observer.disconnect()\n  }, [])\n\n  // Draw what there is now: the last rendering placed where its area falls in the clip's area.\n  useLayoutEffect(() => {\n    const canvas = canvasRef.current\n    const context = canvas?.getContext('2d')\n    if (!canvas || !context || !size.width) return\n    if (canvas.width !== size.width) canvas.width = size.width\n    if (canvas.height !== size.height) canvas.height = size.height\n    context.fillStyle = '#fff'\n    context.fillRect(0, 0, size.width, size.height)\n    if (!rendered) return\n    const { rect } = clip\n    const sx = size.width / rect.w\n    const sy = size.height / rect.h\n    try {\n      context.drawImage(\n        rendered.image,\n        (rendered.rect.x - rect.x) * sx,\n        (rendered.rect.y - rect.y) * sy,\n        rendered.rect.w * sx,\n        rendered.rect.h * sy\n      )\n    } catch {\n      // A rendering already freed: draw it again rather than fail.\n      setRendered(null)\n    }\n  }, [size, rendered, clip])\n\n  // Render the region again once the clip has settled, if what is drawn is not sharp or not it.\n  const wanted = Math.ceil(size.width / WIDTH_STEP) * WIDTH_STEP\n  const stale =\n    wanted > 0 &&\n    (!rendered ||\n      !sameRect(rendered.rect, clip.rect) ||\n      wanted > rendered.width ||\n      wanted < rendered.width / 2)\n  useEffect(() => {\n    if (!stale) return\n    const controller = new AbortController()\n    const rect = clip.rect\n    const timer = setTimeout(() => {\n      renderPdfRegion({\n        file: clip.source,\n        page: clip.page,\n        rect,\n        masks: clip.masks,\n        width: wanted,\n        signal: controller.signal,\n      })\n        .then((image) => {\n          if (controller.signal.aborted) return closePdfRegionImage(image)\n          setFailed(false)\n          setRendered({ image, rect, width: wanted })\n        })\n        .catch(() => !controller.signal.aborted && setFailed(true))\n    }, SETTLE_MS)\n    return () => {\n      clearTimeout(timer)\n      controller.abort()\n    }\n  }, [stale, wanted, clip.source, clip.page, clip.rect, clip.masks])\n\n  // A rendering's memory is freed once the next has replaced it on screen. Never in a cleanup: a\n  // remount (React's StrictMode replays mount effects) would free the one still in use. One left\n  // when the clip goes is reclaimed by the browser with it.\n  const previous = useRef<Rendered | null>(null)\n  useEffect(() => {\n    if (previous.current && previous.current !== rendered) {\n      closePdfRegionImage(previous.current.image)\n    }\n    previous.current = rendered\n  }, [rendered])\n\n  return (\n    <div\n      className={cn('relative h-full w-full overflow-hidden bg-white', className)}\n      data-testid={`clip-image-${clip.id}`}\n    >\n      <canvas\n        ref={canvasRef}\n        className=\"pointer-events-none block h-full w-full\"\n        role=\"img\"\n        aria-label={clip.caption}\n        aria-busy={!rendered}\n      />\n      {failed && !rendered && (\n        <div className=\"absolute inset-0 flex items-center justify-center p-2 text-center text-xs text-neutral-500\">\n          {\"Couldn't draw this clip\"}\n        </div>\n      )}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["ClipImage"]
+}

package/dist/presentation/ClipTray.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The clips taken so far, as a strip of tiles along the bottom (the files explorer's tile look).
+ * Drag one up onto the slide or onto a slide card, with a mouse, pen or finger, or tap it to add
+ * it to this slide; a check marks those already on it; × deletes a clip; double-click its label
+ * to rename it. The strip scrolls sideways; on a touch screen a sideways swipe scrolls and a drag
+ * upwards moves the clip.
+ */
+import { type ReactNode } from 'react';
+export declare function ClipTray({ start }: {
+    start?: ReactNode;
+}): import("react").JSX.Element;

package/dist/presentation/ClipTray.js

@@ -0,0 +1,152 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Check, X } from "lucide-react";
+import { cn } from "@arbidocs/react/ui";
+import { ClipImage } from "./ClipImage.js";
+import { currentSlide, usePresentation } from "./store.js";
+import { useClipDrag } from "./useClipDrag.js";
+const TILE_HEIGHT = 72;
+const TILE_WIDTH = { min: 56, max: 168 };
+function tileSize(aspect, height = TILE_HEIGHT) {
+  const width = Math.min(Math.max(height * aspect, TILE_WIDTH.min), TILE_WIDTH.max);
+  return { width, height };
+}
+function Fitted({ clip, box }) {
+  const wide = clip.aspect > box.width / box.height;
+  const size = wide ? { width: box.width, height: box.width / clip.aspect } : { width: box.height * clip.aspect, height: box.height };
+  return /* @__PURE__ */ jsx("div", { className: "pointer-events-none", style: size, children: /* @__PURE__ */ jsx(ClipImage, { clip }) });
+}
+function Label({ clip }) {
+  const [editing, setEditing] = useState(false);
+  if (editing) {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        autoFocus: true,
+        defaultValue: clip.caption,
+        "aria-label": "Clip label",
+        className: "w-full rounded border border-input bg-background px-1 text-[11px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        onBlur: (event) => {
+          usePresentation.getState().setCaption(clip.id, event.target.value);
+          setEditing(false);
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Enter") event.currentTarget.blur();
+          if (event.key === "Escape") setEditing(false);
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onDoubleClick: () => setEditing(true),
+      title: "Double-click to rename",
+      className: "block w-full truncate rounded px-0.5 text-left text-[11px] text-muted-foreground hover:text-foreground",
+      children: clip.caption || "Untitled"
+    }
+  );
+}
+function TrayTile({ clip, onSlide }) {
+  const { place, removeClip } = usePresentation.getState();
+  const drag = useClipDrag(clip.id, () => !onSlide && place(clip.id));
+  const itemRef = useRef(null);
+  const size = tileSize(clip.aspect);
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      ref: itemRef,
+      className: "group relative flex shrink-0 flex-col gap-1",
+      style: { width: size.width },
+      "data-testid": `tray-clip-${clip.id}`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative flex cursor-grab touch-pan-x select-none items-center justify-center overflow-hidden rounded-lg border bg-muted active:cursor-grabbing",
+              onSlide ? "border-primary/40" : "border-border hover:bg-muted/70",
+              drag.ghost && "opacity-40"
+            ),
+            style: { height: size.height },
+            ...drag.handlers,
+            title: onSlide ? "On this slide: drag to place it again" : "Drag onto the slide, or tap to add",
+            "data-testid": "tray-clip-handle",
+            children: [
+              /* @__PURE__ */ jsx(Fitted, { clip, box: { width: size.width - 8, height: size.height - 8 } }),
+              onSlide && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "absolute left-1 top-1 flex size-4 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm",
+                  "aria-label": "On this slide",
+                  children: /* @__PURE__ */ jsx(Check, { className: "size-3" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "absolute right-1 top-1 flex size-5 items-center justify-center rounded-md bg-background/90 text-muted-foreground opacity-0 shadow-sm backdrop-blur-sm transition-opacity hover:text-destructive focus-visible:opacity-100 group-hover:opacity-100 pointer-coarse:size-11 pointer-coarse:opacity-100",
+            title: "Delete clip",
+            "aria-label": `Delete ${clip.caption || "clip"}`,
+            onClick: () => removeClip(clip.id),
+            children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+          }
+        ),
+        /* @__PURE__ */ jsx(Label, { clip }),
+        drag.ghost && createPortal(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "pointer-events-none fixed z-[100] flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-lg border border-border bg-card p-1 shadow-xl",
+              style: { left: drag.ghost.x, top: drag.ghost.y },
+              "data-testid": "tray-drag-ghost",
+              children: /* @__PURE__ */ jsx(Fitted, { clip, box: tileSize(clip.aspect, 96) })
+            }
+          ),
+          // The tray's own window (the app's, or the presentation pop-out's).
+          itemRef.current?.ownerDocument.body ?? document.body
+        )
+      ]
+    }
+  );
+}
+function ClipTray({ start }) {
+  const all = usePresentation((s) => s.clips);
+  const clips = useMemo(() => all.filter((clip) => !clip.plain), [all]);
+  const slide = usePresentation(currentSlide);
+  const onSlide = new Set(slide?.items.map((item) => item.clipId));
+  return /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-border bg-background", "data-testid": "clip-tray-bar", children: clips.length || start ? /* @__PURE__ */ jsxs(
+    "ul",
+    {
+      className: "flex items-start gap-2 overflow-x-auto overscroll-x-contain px-3 py-2 [scrollbar-width:none]",
+      "aria-label": "Clips",
+      "data-testid": "clip-tray",
+      children: [
+        start && /* @__PURE__ */ jsx("li", { className: "shrink-0", children: start }),
+        clips.map((clip) => /* @__PURE__ */ jsx(TrayTile, { clip, onSlide: onSlide.has(clip.id) }, clip.id))
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs(
+    "p",
+    {
+      className: "px-4 py-5 text-center text-xs text-muted-foreground",
+      "data-testid": "clip-tray-empty",
+      children: [
+        "Your clips appear here. In a document, choose ",
+        /* @__PURE__ */ jsx("strong", { children: "Clip" }),
+        " and drag over a page, image or video."
+      ]
+    }
+  ) });
+}
+export {
+  ClipTray
+};
+//# sourceMappingURL=ClipTray.js.map

package/dist/presentation/ClipTray.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/ClipTray.tsx"],
+  "sourcesContent": ["/**\n * The clips taken so far, as a strip of tiles along the bottom (the files explorer's tile look).\n * Drag one up onto the slide or onto a slide card, with a mouse, pen or finger, or tap it to add\n * it to this slide; a check marks those already on it; \u00D7 deletes a clip; double-click its label\n * to rename it. The strip scrolls sideways; on a touch screen a sideways swipe scrolls and a drag\n * upwards moves the clip.\n */\n\nimport { useMemo, useRef, useState, type ReactNode } from 'react'\nimport { createPortal } from 'react-dom'\nimport { Check, X } from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\nimport { ClipImage } from './ClipImage'\nimport type { Clip } from './model'\nimport { currentSlide, usePresentation } from './store'\nimport { useClipDrag } from './useClipDrag'\n\n/** Tile height (px); its width follows the clip's shape, within these bounds. */\nconst TILE_HEIGHT = 72\nconst TILE_WIDTH = { min: 56, max: 168 }\n\nfunction tileSize(aspect: number, height = TILE_HEIGHT) {\n  const width = Math.min(Math.max(height * aspect, TILE_WIDTH.min), TILE_WIDTH.max)\n  return { width, height }\n}\n\n/** The clip, fitted in a box, aspect kept. */\nfunction Fitted({ clip, box }: { clip: Clip; box: { width: number; height: number } }) {\n  const wide = clip.aspect > box.width / box.height\n  const size = wide\n    ? { width: box.width, height: box.width / clip.aspect }\n    : { width: box.height * clip.aspect, height: box.height }\n  return (\n    <div className=\"pointer-events-none\" style={size}>\n      <ClipImage clip={clip} />\n    </div>\n  )\n}\n\nfunction Label({ clip }: { clip: Clip }) {\n  const [editing, setEditing] = useState(false)\n  if (editing) {\n    return (\n      <input\n        autoFocus\n        defaultValue={clip.caption}\n        aria-label=\"Clip label\"\n        className=\"w-full rounded border border-input bg-background px-1 text-[11px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        onBlur={(event) => {\n          usePresentation.getState().setCaption(clip.id, event.target.value)\n          setEditing(false)\n        }}\n        onKeyDown={(event) => {\n          if (event.key === 'Enter') event.currentTarget.blur()\n          if (event.key === 'Escape') setEditing(false)\n        }}\n      />\n    )\n  }\n  return (\n    <button\n      type=\"button\"\n      onDoubleClick={() => setEditing(true)}\n      title=\"Double-click to rename\"\n      className=\"block w-full truncate rounded px-0.5 text-left text-[11px] text-muted-foreground hover:text-foreground\"\n    >\n      {clip.caption || 'Untitled'}\n    </button>\n  )\n}\n\nfunction TrayTile({ clip, onSlide }: { clip: Clip; onSlide: boolean }) {\n  const { place, removeClip } = usePresentation.getState()\n  const drag = useClipDrag(clip.id, () => !onSlide && place(clip.id))\n  const itemRef = useRef<HTMLLIElement>(null)\n  const size = tileSize(clip.aspect)\n  return (\n    <li\n      ref={itemRef}\n      className=\"group relative flex shrink-0 flex-col gap-1\"\n      style={{ width: size.width }}\n      data-testid={`tray-clip-${clip.id}`}\n    >\n      <div\n        className={cn(\n          'relative flex cursor-grab touch-pan-x select-none items-center justify-center overflow-hidden rounded-lg border bg-muted active:cursor-grabbing',\n          onSlide ? 'border-primary/40' : 'border-border hover:bg-muted/70',\n          drag.ghost && 'opacity-40'\n        )}\n        style={{ height: size.height }}\n        {...drag.handlers}\n        title={\n          onSlide ? 'On this slide: drag to place it again' : 'Drag onto the slide, or tap to add'\n        }\n        data-testid=\"tray-clip-handle\"\n      >\n        <Fitted clip={clip} box={{ width: size.width - 8, height: size.height - 8 }} />\n        {onSlide && (\n          <span\n            className=\"absolute left-1 top-1 flex size-4 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm\"\n            aria-label=\"On this slide\"\n          >\n            <Check className=\"size-3\" />\n          </span>\n        )}\n      </div>\n      <button\n        type=\"button\"\n        className=\"absolute right-1 top-1 flex size-5 items-center justify-center rounded-md bg-background/90 text-muted-foreground opacity-0 shadow-sm backdrop-blur-sm transition-opacity hover:text-destructive focus-visible:opacity-100 group-hover:opacity-100 pointer-coarse:size-11 pointer-coarse:opacity-100\"\n        title=\"Delete clip\"\n        aria-label={`Delete ${clip.caption || 'clip'}`}\n        onClick={() => removeClip(clip.id)}\n      >\n        <X className=\"size-3\" />\n      </button>\n      <Label clip={clip} />\n      {/* The tile following the pointer while dragging, above everything in its window. */}\n      {drag.ghost &&\n        createPortal(\n          <div\n            className=\"pointer-events-none fixed z-[100] flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-lg border border-border bg-card p-1 shadow-xl\"\n            style={{ left: drag.ghost.x, top: drag.ghost.y }}\n            data-testid=\"tray-drag-ghost\"\n          >\n            <Fitted clip={clip} box={tileSize(clip.aspect, 96)} />\n          </div>,\n          // The tray's own window (the app's, or the presentation pop-out's).\n          itemRef.current?.ownerDocument.body ?? document.body\n        )}\n    </li>\n  )\n}\n\nexport function ClipTray({ start }: { start?: ReactNode }) {\n  const all = usePresentation((s) => s.clips)\n  // A picture that is part of a slide's design (an imported deck's) is no clip to arrange.\n  const clips = useMemo(() => all.filter((clip) => !clip.plain), [all])\n  const slide = usePresentation(currentSlide)\n  const onSlide = new Set(slide?.items.map((item) => item.clipId))\n  return (\n    <div className=\"shrink-0 border-t border-border bg-background\" data-testid=\"clip-tray-bar\">\n      {clips.length || start ? (\n        <ul\n          className=\"flex items-start gap-2 overflow-x-auto overscroll-x-contain px-3 py-2 [scrollbar-width:none]\"\n          aria-label=\"Clips\"\n          data-testid=\"clip-tray\"\n        >\n          {start && <li className=\"shrink-0\">{start}</li>}\n          {clips.map((clip) => (\n            <TrayTile key={clip.id} clip={clip} onSlide={onSlide.has(clip.id)} />\n          ))}\n        </ul>\n      ) : (\n        <p\n          className=\"px-4 py-5 text-center text-xs text-muted-foreground\"\n          data-testid=\"clip-tray-empty\"\n        >\n          Your clips appear here. In a document, choose <strong>Clip</strong> and drag over a page,\n          image or video.\n        </p>\n      )}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/presentation/ClipViewControls.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The selected clip's view controls, on a layer over it (editor only): arrows at the middle of each
+ * edge scroll what the clip shows over its source (a press steps, holding keeps scrolling; an arrow
+ * at the source's edge is off), and a zoom slider zooms about the clip's centre.
+ * The clip's frame on the slide does not change; only the part of the source it shows. Presses
+ * here never start moving the clip.
+ */
+import type { Clip } from './model';
+export declare function ClipViewControls({ clip }: {
+    clip: Clip;
+}): import("react").JSX.Element;

package/dist/presentation/ClipViewControls.js

@@ -0,0 +1,142 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
+import { cn } from "@arbidocs/react/ui";
+import { ZoomSlider } from "../components/ZoomSlider.js";
+import { usePresentation } from "./store.js";
+const PAN_STEP = 0.1;
+const MAX_ZOOM = 800;
+const HOLD_DELAY = 350;
+const HOLD_EVERY = 90;
+const BUTTON = "pointer-events-auto flex size-7 items-center justify-center rounded-full border border-border bg-background/90 text-foreground shadow-sm backdrop-blur-sm hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-30 pointer-coarse:size-11";
+function HoldButton({
+  label,
+  disabled,
+  onStep,
+  className,
+  children
+}) {
+  const timer = useRef(null);
+  const stop = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+  };
+  useEffect(() => stop, []);
+  useEffect(() => {
+    if (disabled) stop();
+  }, [disabled]);
+  const start = (event) => {
+    event.stopPropagation();
+    if (disabled || event.button !== 0) return;
+    onStep();
+    const repeat = () => {
+      onStep();
+      timer.current = setTimeout(repeat, HOLD_EVERY);
+    };
+    timer.current = setTimeout(repeat, HOLD_DELAY);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: cn(BUTTON, className),
+      title: label,
+      "aria-label": label,
+      disabled,
+      onPointerDown: start,
+      onPointerUp: stop,
+      onPointerLeave: stop,
+      onPointerCancel: stop,
+      onClick: (event) => event.detail === 0 && onStep(),
+      children
+    }
+  );
+}
+function ClipViewControls({ clip }) {
+  const { panClip, setClipZoom } = usePresentation.getState();
+  const { rect } = clip;
+  const zoomBase = clip.zoomBase ?? rect.w;
+  const minZoom = Math.min(100, Math.floor(zoomBase / Math.min(1, rect.w / rect.h) * 100));
+  const pan = (dx, dy) => () => panClip(clip.id, dx * rect.w, dy * rect.h);
+  const zoom = Math.round(zoomBase / rect.w * 100);
+  const edge = 1e-6;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "pointer-events-none absolute inset-0 z-10",
+      onPointerDown: (event) => event.stopPropagation(),
+      "data-testid": "clip-view-controls",
+      children: [
+        /* @__PURE__ */ jsx(
+          HoldButton,
+          {
+            label: "Show more above",
+            disabled: rect.y <= edge,
+            onStep: pan(0, -PAN_STEP),
+            className: "absolute left-1/2 top-4 -translate-x-1/2 pointer-coarse:top-7",
+            children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          HoldButton,
+          {
+            label: "Show more below",
+            disabled: rect.y + rect.h >= 1 - edge,
+            onStep: pan(0, PAN_STEP),
+            className: "absolute bottom-10 left-1/2 -translate-x-1/2 pointer-coarse:bottom-14",
+            children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          HoldButton,
+          {
+            label: "Show more on the left",
+            disabled: rect.x <= edge,
+            onStep: pan(-PAN_STEP, 0),
+            className: "absolute left-4 top-1/2 -translate-y-1/2 pointer-coarse:left-7",
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          HoldButton,
+          {
+            label: "Show more on the right",
+            disabled: rect.x + rect.w >= 1 - edge,
+            onStep: pan(PAN_STEP, 0),
+            className: "absolute right-4 top-1/2 -translate-y-1/2 pointer-coarse:right-7",
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pointer-events-auto absolute bottom-1.5 left-1/2 -translate-x-1/2",
+            "data-testid": "clip-zoom-control",
+            children: /* @__PURE__ */ jsx(
+              ZoomSlider,
+              {
+                value: zoom,
+                min: minZoom,
+                max: Math.max(MAX_ZOOM, zoom),
+                zoomOutStep: 25,
+                onChange: (value) => setClipZoom(clip.id, value),
+                label: "Zoom",
+                valueLabel: /* @__PURE__ */ jsxs("span", { "data-testid": "clip-zoom", children: [
+                  zoom,
+                  "%"
+                ] }),
+                className: "bg-background/95 shadow-sm backdrop-blur-sm pointer-coarse:h-11",
+                sliderClassName: "w-24"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ClipViewControls
+};
+//# sourceMappingURL=ClipViewControls.js.map

package/dist/presentation/ClipViewControls.js.map

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

package/dist/presentation/DesignMenu.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Design: the presentation's one look, for every slide — its background (a preset, or any
+ * colour), typeface, accent colour and footer logo. A popover from the header; each choice applies
+ * at once (the stage behind it shows the result).
+ */
+export declare function DesignMenu({ onChooseLogo }: {
+    onChooseLogo?: () => void;
+}): import("react").JSX.Element;