@arbidocs/blocks 0.5.123 → 0.5.125

package/dist/presentation/ClipCaptureOverlay.d.ts

@@ -1,14 +1,18 @@
 /**
- * Over a page while clipping: drag a rectangle and it becomes a clip. The rectangle is kept as
- * fractions of the page (`toNorm`), so it does not depend on the zoom it was drawn at.
+ * Over a page while clipping. A click on a passage clips exactly that passage (the parser placed it
+ * on the page; it is outlined under the pointer); a drag clips any rectangle (a figure, a scan, a
+ * page with no passages). Either way the area is kept as fractions of the page (`toNorm`), so it
+ * does not depend on the zoom it was taken at.
  */
 import type { Rect } from './model';
 export interface ClipCaptureOverlayProps {
     page: number;
+    /** The page's passages, as the areas a click clips (page fractions, margin included). */
+    passages?: readonly Rect[];
     onCapture: (capture: {
         page: number;
         rect: Rect;
         aspect: number;
     }) => void;
 }
-export declare function ClipCaptureOverlay({ page, onCapture }: ClipCaptureOverlayProps): import("react").JSX.Element;
+export declare function ClipCaptureOverlay({ page, passages, onCapture }: ClipCaptureOverlayProps): import("react").JSX.Element;

package/dist/presentation/ClipCaptureOverlay.js

@@ -1,26 +1,43 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { toNorm } from "@arbidocs/react/annotations";
+import { passageAt } from "./passage-clip.js";
 const MIN_CLIP_FRACTION = 0.02;
-function ClipCaptureOverlay({ page, onCapture }) {
+const percent = (rect) => ({
+  left: `${rect.x * 100}%`,
+  top: `${rect.y * 100}%`,
+  width: `${rect.w * 100}%`,
+  height: `${rect.h * 100}%`
+});
+function ClipCaptureOverlay({ page, passages = [], onCapture }) {
   const start = useRef(null);
   const [draft, setDraft] = useState(null);
+  const [hovered, setHovered] = useState(null);
   const point = (event, box) => ({
     x: event.clientX - box.left,
     y: event.clientY - box.top
   });
+  const passageUnder = (event, box) => {
+    if (!passages.length || !box.width || !box.height) return null;
+    const p = point(event, box);
+    return passageAt(passages, p.x / box.width, p.y / box.height);
+  };
   const onPointerDown = (event) => {
     if (event.button !== 0) return;
     event.preventDefault();
-    event.currentTarget.setPointerCapture(event.pointerId);
+    event.currentTarget.setPointerCapture?.(event.pointerId);
     const box = event.currentTarget.getBoundingClientRect();
     start.current = { ...point(event, box), box };
     setDraft(null);
   };
   const onPointerMove = (event) => {
     const s = start.current;
-    if (!s) return;
+    if (!s) {
+      const next = passageUnder(event, event.currentTarget.getBoundingClientRect());
+      if (next !== hovered) setHovered(next);
+      return;
+    }
     const p = point(event, s.box);
     setDraft({ x: s.x, y: s.y, width: p.x - s.x, height: p.y - s.y });
   };
@@ -31,8 +48,9 @@ function ClipCaptureOverlay({ page, onCapture }) {
     if (!s) return;
     const p = point(event, s.box);
     const size = { width: s.box.width, height: s.box.height };
-    const rect = toNorm({ x: s.x, y: s.y, width: p.x - s.x, height: p.y - s.y }, size);
-    if (rect.w < MIN_CLIP_FRACTION || rect.h < MIN_CLIP_FRACTION) return;
+    const dragged = toNorm({ x: s.x, y: s.y, width: p.x - s.x, height: p.y - s.y }, size);
+    const rect = dragged.w < MIN_CLIP_FRACTION || dragged.h < MIN_CLIP_FRACTION ? passageUnder(event, s.box) : dragged;
+    if (!rect) return;
     onCapture({ page, rect, aspect: rect.w * size.width / (rect.h * size.height) });
   };
   const shown = draft && {
@@ -41,25 +59,36 @@ function ClipCaptureOverlay({ page, onCapture }) {
     width: Math.abs(draft.width),
     height: Math.abs(draft.height)
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: "absolute inset-0 z-20 cursor-crosshair touch-none select-none",
       onPointerDown,
       onPointerMove,
       onPointerUp,
+      onPointerLeave: () => setHovered(null),
       onPointerCancel: () => {
         start.current = null;
         setDraft(null);
       },
       "data-testid": `clip-capture-${page}`,
-      children: shown && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "pointer-events-none absolute border-2 border-dashed border-primary bg-primary/10",
-          style: shown
-        }
-      )
+      children: [
+        hovered && !draft && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pointer-events-none absolute rounded-sm bg-ai-soft/40 ring-2 ring-ai-accent",
+            style: percent(hovered),
+            "data-testid": "clip-passage-outline"
+          }
+        ),
+        shown && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pointer-events-none absolute border-2 border-dashed border-primary bg-primary/10",
+            style: shown
+          }
+        )
+      ]
     }
   );
 }

package/dist/presentation/ClipCaptureOverlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/presentation/ClipCaptureOverlay.tsx"],
-  "sourcesContent": ["/**\n * Over a page while clipping: drag a rectangle and it becomes a clip. The rectangle is kept as\n * fractions of the page (`toNorm`), so it does not depend on the zoom it was drawn at.\n */\n\nimport { useRef, useState, type PointerEvent as ReactPointerEvent } from 'react'\nimport { toNorm, type PixelRect } from '@arbidocs/react/annotations'\nimport type { Rect } from './model'\n\n/** Smaller than this (a fraction of the page, either side) is a stray click, not a clip. */\nconst MIN_CLIP_FRACTION = 0.02\n\nexport interface ClipCaptureOverlayProps {\n  page: number\n  onCapture: (capture: { page: number; rect: Rect; aspect: number }) => void\n}\n\nexport function ClipCaptureOverlay({ page, onCapture }: ClipCaptureOverlayProps) {\n  const start = useRef<{ x: number; y: number; box: DOMRect } | null>(null)\n  const [draft, setDraft] = useState<PixelRect | null>(null)\n\n  const point = (event: ReactPointerEvent, box: DOMRect) => ({\n    x: event.clientX - box.left,\n    y: event.clientY - box.top,\n  })\n\n  const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (event.button !== 0) return\n    event.preventDefault()\n    event.currentTarget.setPointerCapture(event.pointerId)\n    const box = event.currentTarget.getBoundingClientRect()\n    start.current = { ...point(event, box), box }\n    setDraft(null)\n  }\n\n  const onPointerMove = (event: ReactPointerEvent) => {\n    const s = start.current\n    if (!s) return\n    const p = point(event, s.box)\n    setDraft({ x: s.x, y: s.y, width: p.x - s.x, height: p.y - s.y })\n  }\n\n  const onPointerUp = (event: ReactPointerEvent) => {\n    const s = start.current\n    start.current = null\n    setDraft(null)\n    if (!s) return\n    const p = point(event, s.box)\n    const size = { width: s.box.width, height: s.box.height }\n    const rect = toNorm({ x: s.x, y: s.y, width: p.x - s.x, height: p.y - s.y }, size)\n    if (rect.w < MIN_CLIP_FRACTION || rect.h < MIN_CLIP_FRACTION) return\n    onCapture({ page, rect, aspect: (rect.w * size.width) / (rect.h * size.height) })\n  }\n\n  const shown = draft && {\n    left: Math.min(draft.x, draft.x + draft.width),\n    top: Math.min(draft.y, draft.y + draft.height),\n    width: Math.abs(draft.width),\n    height: Math.abs(draft.height),\n  }\n\n  return (\n    <div\n      className=\"absolute inset-0 z-20 cursor-crosshair touch-none select-none\"\n      onPointerDown={onPointerDown}\n      onPointerMove={onPointerMove}\n      onPointerUp={onPointerUp}\n      onPointerCancel={() => {\n        start.current = null\n        setDraft(null)\n      }}\n      data-testid={`clip-capture-${page}`}\n    >\n      {shown && (\n        <div\n          className=\"pointer-events-none absolute border-2 border-dashed border-primary bg-primary/10\"\n          style={shown}\n        />\n      )}\n    </div>\n  )\n}\n"],
-  "mappings": ";AA0EQ;AArER,SAAS,QAAQ,gBAAwD;AACzE,SAAS,cAA8B;AAIvC,MAAM,oBAAoB;AAOnB,SAAS,mBAAmB,EAAE,MAAM,UAAU,GAA4B;AAC/E,QAAM,QAAQ,OAAsD,IAAI;AACxE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA2B,IAAI;AAEzD,QAAM,QAAQ,CAAC,OAA0B,SAAkB;AAAA,IACzD,GAAG,MAAM,UAAU,IAAI;AAAA,IACvB,GAAG,MAAM,UAAU,IAAI;AAAA,EACzB;AAEA,QAAM,gBAAgB,CAAC,UAA6C;AAClE,QAAI,MAAM,WAAW,EAAG;AACxB,UAAM,eAAe;AACrB,UAAM,cAAc,kBAAkB,MAAM,SAAS;AACrD,UAAM,MAAM,MAAM,cAAc,sBAAsB;AACtD,UAAM,UAAU,EAAE,GAAG,MAAM,OAAO,GAAG,GAAG,IAAI;AAC5C,aAAS,IAAI;AAAA,EACf;AAEA,QAAM,gBAAgB,CAAC,UAA6B;AAClD,UAAM,IAAI,MAAM;AAChB,QAAI,CAAC,EAAG;AACR,UAAM,IAAI,MAAM,OAAO,EAAE,GAAG;AAC5B,aAAS,EAAE,GAAG,EAAE,GAAG,GAAG,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,GAAG,QAAQ,EAAE,IAAI,EAAE,EAAE,CAAC;AAAA,EAClE;AAEA,QAAM,cAAc,CAAC,UAA6B;AAChD,UAAM,IAAI,MAAM;AAChB,UAAM,UAAU;AAChB,aAAS,IAAI;AACb,QAAI,CAAC,EAAG;AACR,UAAM,IAAI,MAAM,OAAO,EAAE,GAAG;AAC5B,UAAM,OAAO,EAAE,OAAO,EAAE,IAAI,OAAO,QAAQ,EAAE,IAAI,OAAO;AACxD,UAAM,OAAO,OAAO,EAAE,GAAG,EAAE,GAAG,GAAG,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,GAAG,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAG,IAAI;AACjF,QAAI,KAAK,IAAI,qBAAqB,KAAK,IAAI,kBAAmB;AAC9D,cAAU,EAAE,MAAM,MAAM,QAAS,KAAK,IAAI,KAAK,SAAU,KAAK,IAAI,KAAK,QAAQ,CAAC;AAAA,EAClF;AAEA,QAAM,QAAQ,SAAS;AAAA,IACrB,MAAM,KAAK,IAAI,MAAM,GAAG,MAAM,IAAI,MAAM,KAAK;AAAA,IAC7C,KAAK,KAAK,IAAI,MAAM,GAAG,MAAM,IAAI,MAAM,MAAM;AAAA,IAC7C,OAAO,KAAK,IAAI,MAAM,KAAK;AAAA,IAC3B,QAAQ,KAAK,IAAI,MAAM,MAAM;AAAA,EAC/B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB,MAAM;AACrB,cAAM,UAAU;AAChB,iBAAS,IAAI;AAAA,MACf;AAAA,MACA,eAAa,gBAAgB,IAAI;AAAA,MAEhC,mBACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA;AAAA,MACT;AAAA;AAAA,EAEJ;AAEJ;",
+  "sourcesContent": ["/**\n * Over a page while clipping. A click on a passage clips exactly that passage (the parser placed it\n * on the page; it is outlined under the pointer); a drag clips any rectangle (a figure, a scan, a\n * page with no passages). Either way the area is kept as fractions of the page (`toNorm`), so it\n * does not depend on the zoom it was taken at.\n */\n\nimport { useRef, useState, type PointerEvent as ReactPointerEvent } from 'react'\nimport { toNorm, type PixelRect } from '@arbidocs/react/annotations'\nimport type { Rect } from './model'\nimport { passageAt } from './passage-clip'\n\n/** Smaller than this (a fraction of the page, either side) is a click, not a dragged clip. */\nconst MIN_CLIP_FRACTION = 0.02\n\nexport interface ClipCaptureOverlayProps {\n  page: number\n  /** The page's passages, as the areas a click clips (page fractions, margin included). */\n  passages?: readonly Rect[]\n  onCapture: (capture: { page: number; rect: Rect; aspect: number }) => void\n}\n\nconst percent = (rect: Rect) => ({\n  left: `${rect.x * 100}%`,\n  top: `${rect.y * 100}%`,\n  width: `${rect.w * 100}%`,\n  height: `${rect.h * 100}%`,\n})\n\nexport function ClipCaptureOverlay({ page, passages = [], onCapture }: ClipCaptureOverlayProps) {\n  const start = useRef<{ x: number; y: number; box: DOMRect } | null>(null)\n  const [draft, setDraft] = useState<PixelRect | null>(null)\n  const [hovered, setHovered] = useState<Rect | null>(null)\n\n  const point = (event: ReactPointerEvent, box: DOMRect) => ({\n    x: event.clientX - box.left,\n    y: event.clientY - box.top,\n  })\n  /** The passage under the pointer, if any. */\n  const passageUnder = (event: ReactPointerEvent, box: DOMRect) => {\n    if (!passages.length || !box.width || !box.height) return null\n    const p = point(event, box)\n    return passageAt(passages, p.x / box.width, p.y / box.height)\n  }\n\n  const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (event.button !== 0) return\n    event.preventDefault()\n    event.currentTarget.setPointerCapture?.(event.pointerId)\n    const box = event.currentTarget.getBoundingClientRect()\n    start.current = { ...point(event, box), box }\n    setDraft(null)\n  }\n\n  const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n    const s = start.current\n    if (!s) {\n      const next = passageUnder(event, event.currentTarget.getBoundingClientRect())\n      if (next !== hovered) setHovered(next)\n      return\n    }\n    const p = point(event, s.box)\n    setDraft({ x: s.x, y: s.y, width: p.x - s.x, height: p.y - s.y })\n  }\n\n  const onPointerUp = (event: ReactPointerEvent) => {\n    const s = start.current\n    start.current = null\n    setDraft(null)\n    if (!s) return\n    const p = point(event, s.box)\n    const size = { width: s.box.width, height: s.box.height }\n    const dragged = toNorm({ x: s.x, y: s.y, width: p.x - s.x, height: p.y - s.y }, size)\n    // A click: the passage under it, if there is one.\n    const rect =\n      dragged.w < MIN_CLIP_FRACTION || dragged.h < MIN_CLIP_FRACTION\n        ? passageUnder(event, s.box)\n        : dragged\n    if (!rect) return\n    onCapture({ page, rect, aspect: (rect.w * size.width) / (rect.h * size.height) })\n  }\n\n  const shown = draft && {\n    left: Math.min(draft.x, draft.x + draft.width),\n    top: Math.min(draft.y, draft.y + draft.height),\n    width: Math.abs(draft.width),\n    height: Math.abs(draft.height),\n  }\n\n  return (\n    <div\n      className=\"absolute inset-0 z-20 cursor-crosshair touch-none select-none\"\n      onPointerDown={onPointerDown}\n      onPointerMove={onPointerMove}\n      onPointerUp={onPointerUp}\n      onPointerLeave={() => setHovered(null)}\n      onPointerCancel={() => {\n        start.current = null\n        setDraft(null)\n      }}\n      data-testid={`clip-capture-${page}`}\n    >\n      {/* The passage a click would clip, exactly as it would be clipped. */}\n      {hovered && !draft && (\n        <div\n          className=\"pointer-events-none absolute rounded-sm bg-ai-soft/40 ring-2 ring-ai-accent\"\n          style={percent(hovered)}\n          data-testid=\"clip-passage-outline\"\n        />\n      )}\n      {shown && (\n        <div\n          className=\"pointer-events-none absolute border-2 border-dashed border-primary bg-primary/10\"\n          style={shown}\n        />\n      )}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/presentation/PresentControls.d.ts

@@ -3,6 +3,14 @@
  * blank, full screen and stop. Like a slideshow's, they show while the pointer moves (or a key is
  * pressed) and fade after a moment, with the pointer, so a shared screen rarely shows them.
  */
+import type { ReactNode } from 'react';
+export declare function Control({ label, onClick, disabled, children, testId, }: {
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    children: ReactNode;
+    testId: string;
+}): import("react").JSX.Element;
 export interface PresentControlsProps {
     /** The window presented in (full screen is that window's). */
     view: Window | null;

package/dist/presentation/PresentControls.js

@@ -112,6 +112,7 @@ function PresentControls({ view, shown }) {
   );
 }
 export {
+  Control,
   PresentControls
 };
 //# sourceMappingURL=PresentControls.js.map

package/dist/presentation/PresentControls.js.map

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

package/dist/presentation/PresentationStage.d.ts

@@ -9,11 +9,19 @@
  */
 import { type ReactNode } from 'react';
 import { type SlideTextEditing } from './SlideDecor';
-import { type Guide } from './model';
+import { type Clip, type Guide, type Slide } from './model';
 export interface PresentationStageProps {
     editable?: boolean;
     /** The slide shown (default: the current one). */
     slideIndex?: number;
+    /**
+     * A slide that is not one of the presentation's, shown with its own clips (the viewer's
+     * spotlight); the presentation's look still applies.
+     */
+    show?: {
+        slide: Slide;
+        clips: readonly Clip[];
+    };
     selected?: string | null;
     onSelect?: (clipId: string | null) => void;
     /** Offered on a selected image clip: make a new version of it. */
@@ -29,4 +37,4 @@ export interface PresentationStageProps {
 export interface GuideLayerHandle {
     set(guides: Guide[]): void;
 }
-export declare function PresentationStage({ editable, slideIndex, selected, onSelect, onEditImage, onCropImage, textEditing, overlay, className, }: PresentationStageProps): import("react").JSX.Element;
+export declare function PresentationStage({ editable, slideIndex, show, selected, onSelect, onEditImage, onCropImage, textEditing, overlay, className, }: PresentationStageProps): import("react").JSX.Element;

package/dist/presentation/PresentationStage.js

@@ -37,6 +37,7 @@ const GuideLayer = memo(
 function PresentationStage({
   editable = false,
   slideIndex,
+  show,
   selected = null,
   onSelect,
   onEditImage,
@@ -46,9 +47,11 @@ function PresentationStage({
   className
 }) {
   const index = usePresentation((s) => slideIndex ?? s.current);
-  const slide = usePresentation((s) => s.slides[index]);
-  const clips = usePresentation((s) => s.clips);
-  const blank = usePresentation((s) => s.blank && !editable);
+  const deckSlide = usePresentation((s) => s.slides[index]);
+  const deckClips = usePresentation((s) => s.clips);
+  const slide = show?.slide ?? deckSlide;
+  const clips = show?.clips ?? deckClips;
+  const blank = usePresentation((s) => s.blank && !editable && !show);
   const captions = usePresentation((s) => s.captions);
   const columnValues = usePresentation((s) => s.columnValues);
   const theme = usePresentation((s) => s.theme);

package/dist/presentation/PresentationStage.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/presentation/PresentationStage.tsx"],
-  "sourcesContent": ["/**\n * The 16:9 stage: a slide's clips in their frames, its title, points and logo, as large as the\n * container allows. Presenting shows it bare; the editor's copy is `editable`: each clip\n * (`StageItem`) is moved, resized and reshaped by dragging, snapping with guide lines; clips are\n * selected for their floating actions, and clips dragged from the tray are dropped onto it.\n *\n * A slide's stage re-renders only when its slide (or the clips, theme or labels) change; a clip's\n * drag re-renders nothing here but the guides and, at its start and end, the floating actions.\n */\n\nimport {\n  forwardRef,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react'\nimport { cn } from '@arbidocs/react/ui'\nimport { ClipActionBar } from './ClipActionBar'\nimport { SlideDecor, type SlideTextEditing } from './SlideDecor'\nimport { StageItem, type StageItemHost } from './StageItem'\nimport { StageBox, type StageBoxHost } from './StageBox'\nimport { BoxActionBar } from './BoxActionBar'\nimport { FONTS, backgroundCss, slideBackgroundCss } from './theme'\nimport { clipLabel, type Clip, type Frame, type Guide } from './model'\nimport { usePresentation } from './store'\nimport { DROP_ATTRIBUTE } from './useClipDrag'\n\nexport interface PresentationStageProps {\n  editable?: boolean\n  /** The slide shown (default: the current one). */\n  slideIndex?: number\n  selected?: string | null\n  onSelect?: (clipId: string | null) => void\n  /** Offered on a selected image clip: make a new version of it. */\n  onEditImage?: (clipId: string) => void\n  /** Offered on a selected image clip: choose the part of the image it shows. */\n  onCropImage?: (clipId: string) => void\n  /** Typing the slide's title and points on the slide itself (the editor's stages). */\n  textEditing?: SlideTextEditing\n  /** Over the slide (e.g. the editor's hover actions). */\n  overlay?: ReactNode\n  className?: string\n}\n\nexport interface GuideLayerHandle {\n  set(guides: Guide[]): void\n}\n\n/** The snap lines of a dragged clip: its own state, so drawing them re-renders nothing else. */\nconst GuideLayer = memo(\n  forwardRef<GuideLayerHandle>(function GuideLayer(_, ref) {\n    const [guides, setGuides] = useState<Guide[]>([])\n    useImperativeHandle(ref, () => ({ set: setGuides }), [])\n    return (\n      <>\n        {guides.map((guide) => (\n          <div\n            key={`${guide.axis}-${guide.at}`}\n            className=\"pointer-events-none absolute z-10 bg-primary\"\n            style={\n              guide.axis === 'x'\n                ? { left: `${guide.at * 100}%`, top: 0, bottom: 0, width: 1 }\n                : { top: `${guide.at * 100}%`, left: 0, right: 0, height: 1 }\n            }\n            data-testid={`stage-guide-${guide.axis}`}\n          />\n        ))}\n      </>\n    )\n  })\n)\n\nexport function PresentationStage({\n  editable = false,\n  slideIndex,\n  selected = null,\n  onSelect,\n  onEditImage,\n  onCropImage,\n  textEditing,\n  overlay,\n  className,\n}: PresentationStageProps) {\n  const index = usePresentation((s) => slideIndex ?? s.current)\n  const slide = usePresentation((s) => s.slides[index])\n  const clips = usePresentation((s) => s.clips)\n  const blank = usePresentation((s) => s.blank && !editable)\n  const captions = usePresentation((s) => s.captions)\n  const columnValues = usePresentation((s) => s.columnValues)\n  const theme = usePresentation((s) => s.theme)\n  const logoImage = usePresentation((s) => s.logoImage)\n  const media = usePresentation((s) => s.media)\n  const stageRef = useRef<HTMLDivElement>(null)\n  const guideLayer = useRef<GuideLayerHandle>(null)\n  // A clip dragged from the tray: the stage shows it can take it.\n  const dropping = usePresentation((s) => editable && s.dragging !== null)\n  // A clip being dragged on the stage: its floating actions hide meanwhile.\n  const [dragging, setDragging] = useState(false)\n\n  // The latest values the clips' gestures read as they begin (the host itself never changes).\n  const latest = useRef({ slide, clips, index, onSelect })\n  latest.current = { slide, clips, index, onSelect }\n  const host = useMemo<StageItemHost>(\n    () => ({\n      stageBox: () => stageRef.current?.getBoundingClientRect() ?? null,\n      others: (clipId) => {\n        const { slide: current, clips: all } = latest.current\n        return (current?.items ?? [])\n          .filter((item) => item.clipId !== clipId)\n          .map((item) => ({\n            frame: item.frame,\n            aspect: all.find((clip) => clip.id === item.clipId)?.aspect ?? 1,\n          }))\n      },\n      select: (clipId) => {\n        usePresentation.getState().goTo(latest.current.index)\n        latest.current.onSelect?.(clipId)\n      },\n      guides: (guides) => guideLayer.current?.set(guides),\n      dragging: setDragging,\n      commit: (clipId: string, frame: Frame, shape?: Pick<Clip, 'rect' | 'aspect'>) => {\n        const state = usePresentation.getState()\n        state.goTo(latest.current.index)\n        if (shape) state.reshapeClip(clipId, frame, shape.rect, shape.aspect)\n        else state.setFrame(clipId, frame)\n      },\n    }),\n    []\n  )\n\n  const boxHost = useMemo<StageBoxHost>(\n    () => ({\n      stageBox: () => stageRef.current?.getBoundingClientRect() ?? null,\n      select: (boxId) => {\n        usePresentation.getState().goTo(latest.current.index)\n        latest.current.onSelect?.(boxId)\n      },\n      commit: (boxId, frame) =>\n        usePresentation.getState().updateBox(boxId, (box) => ({ ...box, frame })),\n      setText: (boxId, text) => usePresentation.getState().setBoxText(boxId, text),\n    }),\n    []\n  )\n  const font = FONTS[theme.font].css\n  const boxes = slide?.boxes ?? []\n  const selectedBox = selected ? boxes.find((box) => box.id === selected) : undefined\n  const renderBoxes = (front: boolean) =>\n    boxes\n      .filter((box) => !!box.front === front)\n      .map((box) => (\n        <StageBox\n          key={box.id}\n          box={box}\n          font={font}\n          editable={editable}\n          selected={editable && selected === box.id}\n          host={boxHost}\n        />\n      ))\n\n  const clipOf = (id: string): Clip | undefined => clips.find((clip) => clip.id === id)\n  const selectedFrame = selected\n    ? slide?.items.find((item) => item.clipId === selected)?.frame\n    : undefined\n\n  // Scrolling over the selected clip (wheel or trackpad; Shift for sideways) scrolls what it shows\n  // over its source: the lines above or below, say. A native listener, so the editor itself does\n  // not scroll; steps are gathered and applied once per animation frame.\n  useEffect(() => {\n    const stage = stageRef.current\n    const view = stage?.ownerDocument.defaultView\n    if (!editable || !selected || !stage || !view) return\n    let sum = { x: 0, y: 0 }\n    let request: number | null = null\n    const onWheel = (event: WheelEvent) => {\n      const item = (event.target as Element | null)?.closest?.(\n        `[data-testid=\"stage-item-${selected}\"]`\n      )\n      const clip = usePresentation.getState().clips.find((entry) => entry.id === selected)\n      if (!item || !clip) return\n      event.preventDefault()\n      const box = item.getBoundingClientRect()\n      const horizontal = event.shiftKey && !event.deltaX\n      const deltaX = horizontal ? event.deltaY : event.deltaX\n      const deltaY = horizontal ? 0 : event.deltaY\n      // Screen pixels to fractions of the source: the clip's area spans the clip's box.\n      sum = {\n        x: sum.x + (deltaX / box.width) * clip.rect.w,\n        y: sum.y + (deltaY / box.height) * clip.rect.h,\n      }\n      request ??= view.requestAnimationFrame(() => {\n        request = null\n        usePresentation.getState().panClip(selected, sum.x, sum.y)\n        sum = { x: 0, y: 0 }\n      })\n    }\n    stage.addEventListener('wheel', onWheel, { passive: false })\n    return () => {\n      stage.removeEventListener('wheel', onWheel)\n      if (request !== null) view.cancelAnimationFrame(request)\n    }\n  }, [editable, selected])\n\n  return (\n    <div\n      className={cn('relative h-full w-full', !editable && 'overflow-hidden bg-black', className)}\n      // The stage's size comes from this box's (container query units): 16:9, as large as fits.\n      style={{ containerType: 'size' }}\n      data-testid={editable ? 'presentation-stage-editor' : 'presentation-stage'}\n    >\n      <div\n        ref={stageRef}\n        className={cn(\n          'absolute inset-0 m-auto',\n          editable ? 'shadow-md' : 'overflow-hidden',\n          dropping && 'outline outline-2 outline-offset-2 outline-primary'\n        )}\n        style={{\n          width: 'min(100cqw, calc(100cqh * 16 / 9))',\n          height: 'min(100cqh, calc(100cqw * 9 / 16))',\n          containerType: 'inline-size',\n          background: slide?.background\n            ? slideBackgroundCss(slide.background, media)\n            : backgroundCss(theme.background),\n          fontFamily: FONTS[theme.font].css,\n        }}\n        onPointerDown={() => {\n          if (!editable) return\n          usePresentation.getState().goTo(index)\n          onSelect?.(null)\n        }}\n        {...(editable ? { [DROP_ATTRIBUTE]: 'stage', 'data-slide-index': index } : {})}\n        aria-label={`Slide ${index + 1}`}\n      >\n        {/* Blanked: the shared stage is black. */}\n        {blank && <div className=\"absolute inset-0 z-20 bg-black\" />}\n        {/* The title, points and logo, by the slide's layout. */}\n        {slide && (\n          <SlideDecor\n            slide={slide}\n            theme={theme}\n            labels={captions}\n            logoImage={logoImage}\n            editable={editable}\n            editing={textEditing}\n          />\n        )}\n        {renderBoxes(false)}\n        {slide?.items.map((item) => {\n          const clip = clipOf(item.clipId)\n          if (!clip) return null\n          return (\n            <StageItem\n              key={clip.id}\n              clip={clip}\n              frame={item.frame}\n              editable={editable}\n              selected={editable && selected === clip.id}\n              dim={false}\n              label={captions ? clipLabel(clip, columnValues) : ''}\n              host={host}\n            />\n          )\n        })}\n        {renderBoxes(true)}\n        {/* Smart guides: the lines the dragged clip snapped to (editor only). */}\n        {editable && <GuideLayer ref={guideLayer} />}\n        {/* The selected clip's floating actions, above it (the stage leaves room). */}\n        {editable && selectedFrame && selected && !dragging && (\n          <ClipActionBar\n            clipId={selected}\n            at={selectedFrame}\n            onRemoved={() => onSelect?.(null)}\n            onEditImage={\n              onEditImage && clipOf(selected)?.kind === 'image'\n                ? () => onEditImage(selected)\n                : undefined\n            }\n            onCropImage={\n              onCropImage && clipOf(selected)?.kind === 'image'\n                ? () => onCropImage(selected)\n                : undefined\n            }\n          />\n        )}\n        {editable && selectedBox && (\n          <BoxActionBar box={selectedBox} onRemoved={() => onSelect?.(null)} />\n        )}\n        {overlay}\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * The 16:9 stage: a slide's clips in their frames, its title, points and logo, as large as the\n * container allows. Presenting shows it bare; the editor's copy is `editable`: each clip\n * (`StageItem`) is moved, resized and reshaped by dragging, snapping with guide lines; clips are\n * selected for their floating actions, and clips dragged from the tray are dropped onto it.\n *\n * A slide's stage re-renders only when its slide (or the clips, theme or labels) change; a clip's\n * drag re-renders nothing here but the guides and, at its start and end, the floating actions.\n */\n\nimport {\n  forwardRef,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react'\nimport { cn } from '@arbidocs/react/ui'\nimport { ClipActionBar } from './ClipActionBar'\nimport { SlideDecor, type SlideTextEditing } from './SlideDecor'\nimport { StageItem, type StageItemHost } from './StageItem'\nimport { StageBox, type StageBoxHost } from './StageBox'\nimport { BoxActionBar } from './BoxActionBar'\nimport { FONTS, backgroundCss, slideBackgroundCss } from './theme'\nimport { clipLabel, type Clip, type Frame, type Guide, type Slide } from './model'\nimport { usePresentation } from './store'\nimport { DROP_ATTRIBUTE } from './useClipDrag'\n\nexport interface PresentationStageProps {\n  editable?: boolean\n  /** The slide shown (default: the current one). */\n  slideIndex?: number\n  /**\n   * A slide that is not one of the presentation's, shown with its own clips (the viewer's\n   * spotlight); the presentation's look still applies.\n   */\n  show?: { slide: Slide; clips: readonly Clip[] }\n  selected?: string | null\n  onSelect?: (clipId: string | null) => void\n  /** Offered on a selected image clip: make a new version of it. */\n  onEditImage?: (clipId: string) => void\n  /** Offered on a selected image clip: choose the part of the image it shows. */\n  onCropImage?: (clipId: string) => void\n  /** Typing the slide's title and points on the slide itself (the editor's stages). */\n  textEditing?: SlideTextEditing\n  /** Over the slide (e.g. the editor's hover actions). */\n  overlay?: ReactNode\n  className?: string\n}\n\nexport interface GuideLayerHandle {\n  set(guides: Guide[]): void\n}\n\n/** The snap lines of a dragged clip: its own state, so drawing them re-renders nothing else. */\nconst GuideLayer = memo(\n  forwardRef<GuideLayerHandle>(function GuideLayer(_, ref) {\n    const [guides, setGuides] = useState<Guide[]>([])\n    useImperativeHandle(ref, () => ({ set: setGuides }), [])\n    return (\n      <>\n        {guides.map((guide) => (\n          <div\n            key={`${guide.axis}-${guide.at}`}\n            className=\"pointer-events-none absolute z-10 bg-primary\"\n            style={\n              guide.axis === 'x'\n                ? { left: `${guide.at * 100}%`, top: 0, bottom: 0, width: 1 }\n                : { top: `${guide.at * 100}%`, left: 0, right: 0, height: 1 }\n            }\n            data-testid={`stage-guide-${guide.axis}`}\n          />\n        ))}\n      </>\n    )\n  })\n)\n\nexport function PresentationStage({\n  editable = false,\n  slideIndex,\n  show,\n  selected = null,\n  onSelect,\n  onEditImage,\n  onCropImage,\n  textEditing,\n  overlay,\n  className,\n}: PresentationStageProps) {\n  const index = usePresentation((s) => slideIndex ?? s.current)\n  const deckSlide = usePresentation((s) => s.slides[index])\n  const deckClips = usePresentation((s) => s.clips)\n  const slide = show?.slide ?? deckSlide\n  const clips = show?.clips ?? deckClips\n  const blank = usePresentation((s) => s.blank && !editable && !show)\n  const captions = usePresentation((s) => s.captions)\n  const columnValues = usePresentation((s) => s.columnValues)\n  const theme = usePresentation((s) => s.theme)\n  const logoImage = usePresentation((s) => s.logoImage)\n  const media = usePresentation((s) => s.media)\n  const stageRef = useRef<HTMLDivElement>(null)\n  const guideLayer = useRef<GuideLayerHandle>(null)\n  // A clip dragged from the tray: the stage shows it can take it.\n  const dropping = usePresentation((s) => editable && s.dragging !== null)\n  // A clip being dragged on the stage: its floating actions hide meanwhile.\n  const [dragging, setDragging] = useState(false)\n\n  // The latest values the clips' gestures read as they begin (the host itself never changes).\n  const latest = useRef({ slide, clips, index, onSelect })\n  latest.current = { slide, clips, index, onSelect }\n  const host = useMemo<StageItemHost>(\n    () => ({\n      stageBox: () => stageRef.current?.getBoundingClientRect() ?? null,\n      others: (clipId) => {\n        const { slide: current, clips: all } = latest.current\n        return (current?.items ?? [])\n          .filter((item) => item.clipId !== clipId)\n          .map((item) => ({\n            frame: item.frame,\n            aspect: all.find((clip) => clip.id === item.clipId)?.aspect ?? 1,\n          }))\n      },\n      select: (clipId) => {\n        usePresentation.getState().goTo(latest.current.index)\n        latest.current.onSelect?.(clipId)\n      },\n      guides: (guides) => guideLayer.current?.set(guides),\n      dragging: setDragging,\n      commit: (clipId: string, frame: Frame, shape?: Pick<Clip, 'rect' | 'aspect'>) => {\n        const state = usePresentation.getState()\n        state.goTo(latest.current.index)\n        if (shape) state.reshapeClip(clipId, frame, shape.rect, shape.aspect)\n        else state.setFrame(clipId, frame)\n      },\n    }),\n    []\n  )\n\n  const boxHost = useMemo<StageBoxHost>(\n    () => ({\n      stageBox: () => stageRef.current?.getBoundingClientRect() ?? null,\n      select: (boxId) => {\n        usePresentation.getState().goTo(latest.current.index)\n        latest.current.onSelect?.(boxId)\n      },\n      commit: (boxId, frame) =>\n        usePresentation.getState().updateBox(boxId, (box) => ({ ...box, frame })),\n      setText: (boxId, text) => usePresentation.getState().setBoxText(boxId, text),\n    }),\n    []\n  )\n  const font = FONTS[theme.font].css\n  const boxes = slide?.boxes ?? []\n  const selectedBox = selected ? boxes.find((box) => box.id === selected) : undefined\n  const renderBoxes = (front: boolean) =>\n    boxes\n      .filter((box) => !!box.front === front)\n      .map((box) => (\n        <StageBox\n          key={box.id}\n          box={box}\n          font={font}\n          editable={editable}\n          selected={editable && selected === box.id}\n          host={boxHost}\n        />\n      ))\n\n  const clipOf = (id: string): Clip | undefined => clips.find((clip) => clip.id === id)\n  const selectedFrame = selected\n    ? slide?.items.find((item) => item.clipId === selected)?.frame\n    : undefined\n\n  // Scrolling over the selected clip (wheel or trackpad; Shift for sideways) scrolls what it shows\n  // over its source: the lines above or below, say. A native listener, so the editor itself does\n  // not scroll; steps are gathered and applied once per animation frame.\n  useEffect(() => {\n    const stage = stageRef.current\n    const view = stage?.ownerDocument.defaultView\n    if (!editable || !selected || !stage || !view) return\n    let sum = { x: 0, y: 0 }\n    let request: number | null = null\n    const onWheel = (event: WheelEvent) => {\n      const item = (event.target as Element | null)?.closest?.(\n        `[data-testid=\"stage-item-${selected}\"]`\n      )\n      const clip = usePresentation.getState().clips.find((entry) => entry.id === selected)\n      if (!item || !clip) return\n      event.preventDefault()\n      const box = item.getBoundingClientRect()\n      const horizontal = event.shiftKey && !event.deltaX\n      const deltaX = horizontal ? event.deltaY : event.deltaX\n      const deltaY = horizontal ? 0 : event.deltaY\n      // Screen pixels to fractions of the source: the clip's area spans the clip's box.\n      sum = {\n        x: sum.x + (deltaX / box.width) * clip.rect.w,\n        y: sum.y + (deltaY / box.height) * clip.rect.h,\n      }\n      request ??= view.requestAnimationFrame(() => {\n        request = null\n        usePresentation.getState().panClip(selected, sum.x, sum.y)\n        sum = { x: 0, y: 0 }\n      })\n    }\n    stage.addEventListener('wheel', onWheel, { passive: false })\n    return () => {\n      stage.removeEventListener('wheel', onWheel)\n      if (request !== null) view.cancelAnimationFrame(request)\n    }\n  }, [editable, selected])\n\n  return (\n    <div\n      className={cn('relative h-full w-full', !editable && 'overflow-hidden bg-black', className)}\n      // The stage's size comes from this box's (container query units): 16:9, as large as fits.\n      style={{ containerType: 'size' }}\n      data-testid={editable ? 'presentation-stage-editor' : 'presentation-stage'}\n    >\n      <div\n        ref={stageRef}\n        className={cn(\n          'absolute inset-0 m-auto',\n          editable ? 'shadow-md' : 'overflow-hidden',\n          dropping && 'outline outline-2 outline-offset-2 outline-primary'\n        )}\n        style={{\n          width: 'min(100cqw, calc(100cqh * 16 / 9))',\n          height: 'min(100cqh, calc(100cqw * 9 / 16))',\n          containerType: 'inline-size',\n          background: slide?.background\n            ? slideBackgroundCss(slide.background, media)\n            : backgroundCss(theme.background),\n          fontFamily: FONTS[theme.font].css,\n        }}\n        onPointerDown={() => {\n          if (!editable) return\n          usePresentation.getState().goTo(index)\n          onSelect?.(null)\n        }}\n        {...(editable ? { [DROP_ATTRIBUTE]: 'stage', 'data-slide-index': index } : {})}\n        aria-label={`Slide ${index + 1}`}\n      >\n        {/* Blanked: the shared stage is black. */}\n        {blank && <div className=\"absolute inset-0 z-20 bg-black\" />}\n        {/* The title, points and logo, by the slide's layout. */}\n        {slide && (\n          <SlideDecor\n            slide={slide}\n            theme={theme}\n            labels={captions}\n            logoImage={logoImage}\n            editable={editable}\n            editing={textEditing}\n          />\n        )}\n        {renderBoxes(false)}\n        {slide?.items.map((item) => {\n          const clip = clipOf(item.clipId)\n          if (!clip) return null\n          return (\n            <StageItem\n              key={clip.id}\n              clip={clip}\n              frame={item.frame}\n              editable={editable}\n              selected={editable && selected === clip.id}\n              dim={false}\n              label={captions ? clipLabel(clip, columnValues) : ''}\n              host={host}\n            />\n          )\n        })}\n        {renderBoxes(true)}\n        {/* Smart guides: the lines the dragged clip snapped to (editor only). */}\n        {editable && <GuideLayer ref={guideLayer} />}\n        {/* The selected clip's floating actions, above it (the stage leaves room). */}\n        {editable && selectedFrame && selected && !dragging && (\n          <ClipActionBar\n            clipId={selected}\n            at={selectedFrame}\n            onRemoved={() => onSelect?.(null)}\n            onEditImage={\n              onEditImage && clipOf(selected)?.kind === 'image'\n                ? () => onEditImage(selected)\n                : undefined\n            }\n            onCropImage={\n              onCropImage && clipOf(selected)?.kind === 'image'\n                ? () => onCropImage(selected)\n                : undefined\n            }\n          />\n        )}\n        {editable && selectedBox && (\n          <BoxActionBar box={selectedBox} onRemoved={() => onSelect?.(null)} />\n        )}\n        {overlay}\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": ["GuideLayer"]
 }

package/dist/presentation/PresenterView.js

@@ -7,6 +7,7 @@ import { STAGE_ASPECT } from "./model.js";
 import { usePresentation } from "./store.js";
 import { toggleFullscreen, usePresenterKeys } from "./usePresenterKeys.js";
 import { PresentControls } from "./PresentControls.js";
+import { usePointerActive } from "./usePointerActive.js";
 const PRESENT_WIDTH = 1280;
 function useStageShapedWindow(view, presenting) {
   useEffect(() => {
@@ -35,28 +36,6 @@ function useStageShapedWindow(view, presenting) {
     };
   }, [view, presenting]);
 }
-const IDLE_MS = 2200;
-function usePointerActive(view) {
-  const [active, setActive] = useState(true);
-  useEffect(() => {
-    if (!view) return;
-    setActive(true);
-    let timer = view.setTimeout(() => setActive(false), IDLE_MS);
-    const wake = () => {
-      setActive(true);
-      view.clearTimeout(timer);
-      timer = view.setTimeout(() => setActive(false), IDLE_MS);
-    };
-    view.addEventListener("pointermove", wake);
-    view.addEventListener("keydown", wake);
-    return () => {
-      view.clearTimeout(timer);
-      view.removeEventListener("pointermove", wake);
-      view.removeEventListener("keydown", wake);
-    };
-  }, [view]);
-  return active;
-}
 function PresenterView({ onPresent, ...editor }) {
   const presenting = usePresentation((s) => s.presenting);
   const [view, setView] = useState(null);

package/dist/presentation/PresenterView.js.map

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

package/dist/presentation/SpotlightView.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The spotlight on screen: the document dims and the gathered clips fly from where they are on
+ * their pages into a slide over it, in the same window (a call sharing it goes on sharing it). It is
+ * the presentation's own stage (`PresentationStage`), so it looks as a slide of the deck would.
+ *
+ * ← → step through the clips together and each alone, Esc goes back to the document. Each move is
+ * a FLIP: a clip is drawn where it ends and animated from where it was (its page, or its place on
+ * the previous step) by a transform, about 300 ms; with reduced motion it simply appears.
+ */
+import type { Clip } from './model';
+/** How long a clip takes to fly into place. */
+export declare const SPOTLIGHT_MS = 300;
+/** A box on screen, in CSS pixels. */
+export type ScreenRect = Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>;
+export interface SpotlightViewProps {
+    /** Where a clip is on screen before the spotlight (its passage on the page), if it shows. */
+    fromRect: (clip: Clip) => ScreenRect | null;
+}
+export declare function SpotlightView({ fromRect }: SpotlightViewProps): import("react").JSX.Element;