@arbidocs/blocks 0.5.123 → 0.5.124

package/dist/presentation/SpotlightView.js

@@ -0,0 +1,180 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Check, ChevronLeft, ChevronRight, Presentation, X } from "lucide-react";
+import { cn } from "@arbidocs/react/ui";
+import { Control } from "./PresentControls.js";
+import { PresentationStage } from "./PresentationStage.js";
+import { spotlightSlide, spotlightSteps, useSpotlight } from "./spotlight.js";
+import { usePresentation } from "./store.js";
+import { usePointerActive } from "./usePointerActive.js";
+const SPOTLIGHT_MS = 300;
+const EASING = "cubic-bezier(0.2, 0, 0, 1)";
+const prefersReducedMotion = (view) => !!view?.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+function SpotlightView({ fromRect }) {
+  const clips = useSpotlight((s) => s.clips);
+  const note = useSpotlight((s) => s.note);
+  const step = useSpotlight((s) => s.step);
+  const captions = usePresentation((s) => s.captions);
+  const theme = usePresentation((s) => s.theme);
+  const steps = useMemo(() => spotlightSteps(clips), [clips]);
+  const ids = steps[step] ?? [];
+  const stepKey = ids.join();
+  const slide = useMemo(
+    () => spotlightSlide(clips, ids, note, { captions, theme }),
+    // `ids` is new each render; its key says when it changed.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [clips, stepKey, note, captions, theme]
+  );
+  const show = useMemo(() => ({ slide, clips }), [slide, clips]);
+  const [view, setView] = useState(null);
+  const root = useRef(null);
+  const rootRef = useCallback((node) => {
+    root.current = node;
+    if (node) setView(node.ownerDocument.defaultView);
+  }, []);
+  const active = usePointerActive(view);
+  const [kept, setKept] = useState(null);
+  const last = useRef(/* @__PURE__ */ new Map());
+  const fromRectRef = useRef(fromRect);
+  fromRectRef.current = fromRect;
+  useLayoutEffect(() => {
+    const node = root.current;
+    if (!node) return;
+    const reduce = prefersReducedMotion(node.ownerDocument.defaultView);
+    const next = /* @__PURE__ */ new Map();
+    for (const id of stepKey.split(",").filter(Boolean)) {
+      const element = node.querySelector(`[data-testid="stage-item-${id}"]`);
+      const clip = useSpotlight.getState().clips.find((entry) => entry.id === id);
+      if (!element || !clip) continue;
+      const to = element.getBoundingClientRect();
+      next.set(id, to);
+      const from = last.current.get(id) ?? fromRectRef.current(clip);
+      if (reduce || !from || !to.width || !to.height || typeof element.animate !== "function") {
+        continue;
+      }
+      element.animate(
+        [
+          {
+            transform: `translate(${from.left - to.left}px, ${from.top - to.top}px) scale(${from.width / to.width}, ${from.height / to.height})`
+          },
+          { transform: "none" }
+        ],
+        { duration: SPOTLIGHT_MS, easing: EASING }
+      );
+    }
+    last.current = next;
+  }, [stepKey]);
+  const backdrop = useRef(null);
+  useLayoutEffect(() => {
+    const element = backdrop.current;
+    if (!element || typeof element.animate !== "function") return;
+    if (prefersReducedMotion(element.ownerDocument.defaultView)) return;
+    element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: SPOTLIGHT_MS, easing: EASING });
+  }, []);
+  useEffect(() => {
+    if (!view) return;
+    const onKeyDown = (event) => {
+      if (event.metaKey || event.ctrlKey || event.altKey) return;
+      const target = event.target;
+      if (target?.closest?.('input, textarea, select, [contenteditable="true"]')) return;
+      const state = useSpotlight.getState();
+      if (event.key === "Escape") state.hide();
+      else if (event.key === "ArrowRight" || event.key === "PageDown") state.goTo(state.step + 1);
+      else if (event.key === "ArrowLeft" || event.key === "PageUp") state.goTo(state.step - 1);
+      else return;
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    view.addEventListener("keydown", onKeyDown, true);
+    return () => view.removeEventListener("keydown", onKeyDown, true);
+  }, [view]);
+  const actions = useSpotlight.getState();
+  const isKept = kept === `${stepKey}|${note}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: "absolute inset-0 z-30 select-none",
+      style: { cursor: active ? "default" : "none" },
+      role: "dialog",
+      "aria-label": "Spotlight",
+      "data-testid": "spotlight",
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: backdrop, className: "absolute inset-0 bg-black/85" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 p-4 pb-16", children: /* @__PURE__ */ jsx(PresentationStage, { show, className: "bg-transparent" }) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "absolute bottom-3 left-1/2 z-10 flex -translate-x-1/2 items-center gap-0.5 rounded-full bg-black/60 p-1 text-white shadow-lg backdrop-blur transition-opacity duration-300",
+              active ? "opacity-100" : "pointer-events-none opacity-0"
+            ),
+            role: "toolbar",
+            "aria-label": "Spotlight",
+            "data-testid": "spotlight-controls",
+            children: [
+              /* @__PURE__ */ jsx(
+                Control,
+                {
+                  label: "Previous (\u2190)",
+                  onClick: () => actions.goTo(step - 1),
+                  disabled: step === 0,
+                  testId: "spotlight-previous",
+                  children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: "min-w-12 text-center text-xs tabular-nums text-white/85",
+                  "data-testid": "spotlight-position",
+                  children: [
+                    step + 1,
+                    " / ",
+                    steps.length
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Control,
+                {
+                  label: "Next (\u2192)",
+                  onClick: () => actions.goTo(step + 1),
+                  disabled: step >= steps.length - 1,
+                  testId: "spotlight-next",
+                  children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "mx-1 h-4 w-px bg-white/25" }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "inline-flex h-8 items-center gap-1.5 whitespace-nowrap rounded-full px-3 text-xs text-white/85 hover:bg-white/15 hover:text-white disabled:opacity-60 disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 pointer-coarse:h-11",
+                  disabled: isKept,
+                  onClick: () => {
+                    actions.keep();
+                    setKept(`${stepKey}|${note}`);
+                  },
+                  title: "Add this as a slide of the open presentation",
+                  "data-testid": "spotlight-keep",
+                  children: [
+                    isKept ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(Presentation, { className: "size-3.5" }),
+                    isKept ? "Kept as slide" : "Keep as slide"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(Control, { label: "Back to the document (Esc)", onClick: actions.hide, testId: "spotlight-close", children: /* @__PURE__ */ jsx(X, { className: "size-4" }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  SPOTLIGHT_MS,
+  SpotlightView
+};
+//# sourceMappingURL=SpotlightView.js.map

package/dist/presentation/SpotlightView.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/SpotlightView.tsx"],
+  "sourcesContent": ["/**\n * The spotlight on screen: the document dims and the gathered clips fly from where they are on\n * their pages into a slide over it, in the same window (a call sharing it goes on sharing it). It is\n * the presentation's own stage (`PresentationStage`), so it looks as a slide of the deck would.\n *\n * \u2190 \u2192 step through the clips together and each alone, Esc goes back to the document. Each move is\n * a FLIP: a clip is drawn where it ends and animated from where it was (its page, or its place on\n * the previous step) by a transform, about 300 ms; with reduced motion it simply appears.\n */\n\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'\nimport { Check, ChevronLeft, ChevronRight, Presentation, X } from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\nimport type { Clip } from './model'\nimport { Control } from './PresentControls'\nimport { PresentationStage } from './PresentationStage'\nimport { spotlightSlide, spotlightSteps, useSpotlight } from './spotlight'\nimport { usePresentation } from './store'\nimport { usePointerActive } from './usePointerActive'\n\n/** How long a clip takes to fly into place. */\nexport const SPOTLIGHT_MS = 300\nconst EASING = 'cubic-bezier(0.2, 0, 0, 1)'\n\n/** A box on screen, in CSS pixels. */\nexport type ScreenRect = Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>\n\nexport interface SpotlightViewProps {\n  /** Where a clip is on screen before the spotlight (its passage on the page), if it shows. */\n  fromRect: (clip: Clip) => ScreenRect | null\n}\n\nconst prefersReducedMotion = (view: Window | null) =>\n  !!view?.matchMedia?.('(prefers-reduced-motion: reduce)').matches\n\nexport function SpotlightView({ fromRect }: SpotlightViewProps) {\n  const clips = useSpotlight((s) => s.clips)\n  const note = useSpotlight((s) => s.note)\n  const step = useSpotlight((s) => s.step)\n  const captions = usePresentation((s) => s.captions)\n  const theme = usePresentation((s) => s.theme)\n  const steps = useMemo(() => spotlightSteps(clips), [clips])\n  const ids = steps[step] ?? []\n  const stepKey = ids.join()\n  const slide = useMemo(\n    () => spotlightSlide(clips, ids, note, { captions, theme }),\n    // `ids` is new each render; its key says when it changed.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [clips, stepKey, note, captions, theme]\n  )\n  const show = useMemo(() => ({ slide, clips }), [slide, clips])\n\n  const [view, setView] = useState<Window | null>(null)\n  const root = useRef<HTMLDivElement | null>(null)\n  const rootRef = useCallback((node: HTMLDivElement | null) => {\n    root.current = node\n    if (node) setView(node.ownerDocument.defaultView)\n  }, [])\n  const active = usePointerActive(view)\n  const [kept, setKept] = useState<string | null>(null)\n\n  // FLIP: each clip from where it was (on its page, or on the step before) to where it is now.\n  const last = useRef(new Map<string, ScreenRect>())\n  const fromRectRef = useRef(fromRect)\n  fromRectRef.current = fromRect\n  useLayoutEffect(() => {\n    const node = root.current\n    if (!node) return\n    const reduce = prefersReducedMotion(node.ownerDocument.defaultView)\n    const next = new Map<string, ScreenRect>()\n    for (const id of stepKey.split(',').filter(Boolean)) {\n      const element = node.querySelector<HTMLElement>(`[data-testid=\"stage-item-${id}\"]`)\n      const clip = useSpotlight.getState().clips.find((entry) => entry.id === id)\n      if (!element || !clip) continue\n      const to = element.getBoundingClientRect()\n      next.set(id, to)\n      const from = last.current.get(id) ?? fromRectRef.current(clip)\n      if (reduce || !from || !to.width || !to.height || typeof element.animate !== 'function') {\n        continue\n      }\n      element.animate(\n        [\n          {\n            transform: `translate(${from.left - to.left}px, ${from.top - to.top}px) scale(${\n              from.width / to.width\n            }, ${from.height / to.height})`,\n          },\n          { transform: 'none' },\n        ],\n        { duration: SPOTLIGHT_MS, easing: EASING }\n      )\n    }\n    last.current = next\n  }, [stepKey])\n\n  // The document dims as the clips arrive.\n  const backdrop = useRef<HTMLDivElement>(null)\n  useLayoutEffect(() => {\n    const element = backdrop.current\n    if (!element || typeof element.animate !== 'function') return\n    if (prefersReducedMotion(element.ownerDocument.defaultView)) return\n    element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: SPOTLIGHT_MS, easing: EASING })\n  }, [])\n\n  // Esc back to the document, \u2190 \u2192 through the steps; taken before the viewer's own keys.\n  useEffect(() => {\n    if (!view) return\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.metaKey || event.ctrlKey || event.altKey) return\n      const target = event.target as HTMLElement | null\n      if (target?.closest?.('input, textarea, select, [contenteditable=\"true\"]')) return\n      const state = useSpotlight.getState()\n      if (event.key === 'Escape') state.hide()\n      else if (event.key === 'ArrowRight' || event.key === 'PageDown') state.goTo(state.step + 1)\n      else if (event.key === 'ArrowLeft' || event.key === 'PageUp') state.goTo(state.step - 1)\n      else return\n      event.preventDefault()\n      event.stopPropagation()\n    }\n    view.addEventListener('keydown', onKeyDown, true)\n    return () => view.removeEventListener('keydown', onKeyDown, true)\n  }, [view])\n\n  const actions = useSpotlight.getState()\n  const isKept = kept === `${stepKey}|${note}`\n  return (\n    <div\n      ref={rootRef}\n      className=\"absolute inset-0 z-30 select-none\"\n      style={{ cursor: active ? 'default' : 'none' }}\n      role=\"dialog\"\n      aria-label=\"Spotlight\"\n      data-testid=\"spotlight\"\n    >\n      <div ref={backdrop} className=\"absolute inset-0 bg-black/85\" />\n      <div className=\"absolute inset-0 p-4 pb-16\">\n        <PresentationStage show={show} className=\"bg-transparent\" />\n      </div>\n      <div\n        className={cn(\n          'absolute bottom-3 left-1/2 z-10 flex -translate-x-1/2 items-center gap-0.5 rounded-full bg-black/60 p-1 text-white shadow-lg backdrop-blur transition-opacity duration-300',\n          active ? 'opacity-100' : 'pointer-events-none opacity-0'\n        )}\n        role=\"toolbar\"\n        aria-label=\"Spotlight\"\n        data-testid=\"spotlight-controls\"\n      >\n        <Control\n          label=\"Previous (\u2190)\"\n          onClick={() => actions.goTo(step - 1)}\n          disabled={step === 0}\n          testId=\"spotlight-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=\"spotlight-position\"\n        >\n          {step + 1} / {steps.length}\n        </span>\n        <Control\n          label=\"Next (\u2192)\"\n          onClick={() => actions.goTo(step + 1)}\n          disabled={step >= steps.length - 1}\n          testId=\"spotlight-next\"\n        >\n          <ChevronRight className=\"size-4\" />\n        </Control>\n        <div className=\"mx-1 h-4 w-px bg-white/25\" />\n        <button\n          type=\"button\"\n          className=\"inline-flex h-8 items-center gap-1.5 whitespace-nowrap rounded-full px-3 text-xs text-white/85 hover:bg-white/15 hover:text-white disabled:opacity-60 disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 pointer-coarse:h-11\"\n          disabled={isKept}\n          onClick={() => {\n            actions.keep()\n            setKept(`${stepKey}|${note}`)\n          }}\n          title=\"Add this as a slide of the open presentation\"\n          data-testid=\"spotlight-keep\"\n        >\n          {isKept ? <Check className=\"size-3.5\" /> : <Presentation className=\"size-3.5\" />}\n          {isKept ? 'Kept as slide' : 'Keep as slide'}\n        </button>\n        <Control label=\"Back to the document (Esc)\" onClick={actions.hide} testId=\"spotlight-close\">\n          <X className=\"size-4\" />\n        </Control>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/presentation/passage-clip.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Clipping a passage with one click: the parser places each passage on its page (`page_bbox`,
+ * fractions of the page), so in clip mode the passage under the pointer is outlined and a click
+ * clips exactly its box, with a little room around it — the same room the server leaves when it
+ * clips a passage for a slide (`PASSAGE_MARGIN_X` / `_Y` in its presentation tool).
+ */
+import type { Rect } from './model';
+/** Room kept around a clipped passage, as fractions of the page's width and height. */
+export declare const PASSAGE_MARGIN_X = 0.015;
+export declare const PASSAGE_MARGIN_Y = 0.008;
+/** A passage's box `[x0, y0, x1, y1]` as the area to clip: with its margin, kept on the page. */
+export declare function passageClipRect([x0, y0, x1, y1]: readonly [number, number, number, number]): Rect;
+/**
+ * The passage at a point of the page (fractions), if any: the smallest one holding it, so a
+ * caption inside a figure's box wins over the figure.
+ */
+export declare function passageAt(passages: readonly Rect[], x: number, y: number): Rect | null;

package/dist/presentation/passage-clip.js

@@ -0,0 +1,25 @@
+"use client";
+const PASSAGE_MARGIN_X = 0.015;
+const PASSAGE_MARGIN_Y = 8e-3;
+function passageClipRect([x0, y0, x1, y1]) {
+  const left = Math.max(0, x0 - PASSAGE_MARGIN_X);
+  const top = Math.max(0, y0 - PASSAGE_MARGIN_Y);
+  const right = Math.min(1, x1 + PASSAGE_MARGIN_X);
+  const bottom = Math.min(1, y1 + PASSAGE_MARGIN_Y);
+  return { x: left, y: top, w: right - left, h: bottom - top };
+}
+function passageAt(passages, x, y) {
+  let best = null;
+  for (const passage of passages) {
+    const inside = x >= passage.x && x <= passage.x + passage.w && y >= passage.y && y <= passage.y + passage.h;
+    if (inside && (!best || passage.w * passage.h < best.w * best.h)) best = passage;
+  }
+  return best;
+}
+export {
+  PASSAGE_MARGIN_X,
+  PASSAGE_MARGIN_Y,
+  passageAt,
+  passageClipRect
+};
+//# sourceMappingURL=passage-clip.js.map

package/dist/presentation/passage-clip.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/passage-clip.ts"],
+  "sourcesContent": ["/**\n * Clipping a passage with one click: the parser places each passage on its page (`page_bbox`,\n * fractions of the page), so in clip mode the passage under the pointer is outlined and a click\n * clips exactly its box, with a little room around it \u2014 the same room the server leaves when it\n * clips a passage for a slide (`PASSAGE_MARGIN_X` / `_Y` in its presentation tool).\n */\n\nimport type { Rect } from './model'\n\n/** Room kept around a clipped passage, as fractions of the page's width and height. */\nexport const PASSAGE_MARGIN_X = 0.015\nexport const PASSAGE_MARGIN_Y = 0.008\n\n/** A passage's box `[x0, y0, x1, y1]` as the area to clip: with its margin, kept on the page. */\nexport function passageClipRect([x0, y0, x1, y1]: readonly [number, number, number, number]): Rect {\n  const left = Math.max(0, x0 - PASSAGE_MARGIN_X)\n  const top = Math.max(0, y0 - PASSAGE_MARGIN_Y)\n  const right = Math.min(1, x1 + PASSAGE_MARGIN_X)\n  const bottom = Math.min(1, y1 + PASSAGE_MARGIN_Y)\n  return { x: left, y: top, w: right - left, h: bottom - top }\n}\n\n/**\n * The passage at a point of the page (fractions), if any: the smallest one holding it, so a\n * caption inside a figure's box wins over the figure.\n */\nexport function passageAt(passages: readonly Rect[], x: number, y: number): Rect | null {\n  let best: Rect | null = null\n  for (const passage of passages) {\n    const inside =\n      x >= passage.x && x <= passage.x + passage.w && y >= passage.y && y <= passage.y + passage.h\n    if (inside && (!best || passage.w * passage.h < best.w * best.h)) best = passage\n  }\n  return best\n}\n"],
+  "mappings": ";AAUO,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AAGzB,SAAS,gBAAgB,CAAC,IAAI,IAAI,IAAI,EAAE,GAAoD;AACjG,QAAM,OAAO,KAAK,IAAI,GAAG,KAAK,gBAAgB;AAC9C,QAAM,MAAM,KAAK,IAAI,GAAG,KAAK,gBAAgB;AAC7C,QAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,gBAAgB;AAC/C,QAAM,SAAS,KAAK,IAAI,GAAG,KAAK,gBAAgB;AAChD,SAAO,EAAE,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,MAAM,GAAG,SAAS,IAAI;AAC7D;AAMO,SAAS,UAAU,UAA2B,GAAW,GAAwB;AACtF,MAAI,OAAoB;AACxB,aAAW,WAAW,UAAU;AAC9B,UAAM,SACJ,KAAK,QAAQ,KAAK,KAAK,QAAQ,IAAI,QAAQ,KAAK,KAAK,QAAQ,KAAK,KAAK,QAAQ,IAAI,QAAQ;AAC7F,QAAI,WAAW,CAAC,QAAQ,QAAQ,IAAI,QAAQ,IAAI,KAAK,IAAI,KAAK,GAAI,QAAO;AAAA,EAC3E;AACA,SAAO;AACT;",
+  "names": []
+}

package/dist/presentation/spotlight.d.ts

@@ -0,0 +1,58 @@
+/**
+ * The spotlight: clips gathered in the document viewer (from one document or several) and shown,
+ * on request, as a slide over the viewer itself — the same window, so a call sharing it keeps
+ * sharing it. It is transient: nothing reaches the presentation unless "Keep as slide" (or "Add to
+ * the presentation") puts it there.
+ *
+ * Kept in memory only, like the presentation (a clip holds its decrypted file), and cleared when
+ * another user signs in (`owner`).
+ */
+import { type Clip, type Slide } from './model';
+import { reserveOf, type NewClip } from './store';
+/** A spotlight slide holds this many clips at most; more are shown on further slides. */
+export declare const SPOTLIGHT_PER_SLIDE = 4;
+interface SpotlightState {
+    clips: Clip[];
+    /** A line of text shown as the spotlight's title (empty: none). */
+    note: string;
+    /** The spotlight is on screen. */
+    showing: boolean;
+    /** Which of its steps (`spotlightSteps`) is shown. */
+    step: number;
+    /** The user the clips were gathered by. */
+    owner: string | null;
+    /**
+     * The viewer's Clip mode is on: kept here, not in the viewer, so it stays on as the viewer opens
+     * one document after another.
+     */
+    clipping: boolean;
+}
+interface SpotlightActions {
+    gather(clip: NewClip): string;
+    remove(clipId: string): void;
+    setNote(note: string): void;
+    show(): void;
+    hide(): void;
+    goTo(step: number): void;
+    /** The step on screen, as a slide of the open presentation (after its current slide). */
+    keep(): void;
+    /** The gathered clips, into the presentation's tray (not placed); the spotlight is emptied. */
+    addToTray(): void;
+    clear(): void;
+    /** Gathering for this user: another's clips are dropped. */
+    own(userId: string | null): void;
+    setClipping(on: boolean): void;
+}
+export type SpotlightStore = SpotlightState & SpotlightActions;
+/**
+ * What ← → step through: the clips together (up to four a slide), and, where a slide shows more
+ * than one, each of them alone after it. Each step lists clip ids.
+ */
+export declare function spotlightSteps(clips: readonly Pick<Clip, 'id'>[]): string[][];
+/**
+ * A step as a slide, arranged as the presentation arranges one (`autoLayout`: two tall clips go
+ * side by side, two wide ones stack), with the note as its title and the presentation's look.
+ */
+export declare function spotlightSlide(clips: readonly Clip[], ids: readonly string[], note: string, look: Parameters<typeof reserveOf>[1]): Slide;
+export declare const useSpotlight: import("zustand").UseBoundStore<import("zustand").StoreApi<SpotlightStore>>;
+export {};

package/dist/presentation/spotlight.js

@@ -0,0 +1,110 @@
+"use client";
+import { create } from "zustand";
+import { releasePdfRegionSource } from "@arbidocs/react/viewers";
+import { autoLayout, defaultCaption } from "./model.js";
+import { reserveOf, usePresentation } from "./store.js";
+const SPOTLIGHT_PER_SLIDE = 4;
+function spotlightSteps(clips) {
+  const steps = [];
+  for (let i = 0; i < clips.length; i += SPOTLIGHT_PER_SLIDE) {
+    const group = clips.slice(i, i + SPOTLIGHT_PER_SLIDE).map((clip) => clip.id);
+    steps.push(group);
+    if (group.length > 1) steps.push(...group.map((id) => [id]));
+  }
+  return steps;
+}
+function spotlightSlide(clips, ids, note, look) {
+  const shown = ids.map((id) => clips.find((clip) => clip.id === id)).filter((clip) => !!clip);
+  const base = { caption: note.trim(), layout: "clips" };
+  const frames = autoLayout(
+    shown.map((clip) => clip.aspect),
+    reserveOf(base, look)
+  );
+  return {
+    ...base,
+    id: "spotlight",
+    auto: true,
+    points: "",
+    boxes: [],
+    items: shown.map((clip, i) => ({ clipId: clip.id, frame: frames[i] }))
+  };
+}
+let sequence = 0;
+function release(gone, kept) {
+  const inUse = new Set([...kept, ...usePresentation.getState().clips].map((clip) => clip.source));
+  for (const source of new Set(gone.map((clip) => clip.source))) {
+    if (!inUse.has(source)) releasePdfRegionSource(source);
+  }
+}
+const EMPTY = {
+  clips: [],
+  note: "",
+  showing: false,
+  step: 0
+};
+const useSpotlight = create()((set, get) => ({
+  ...EMPTY,
+  owner: null,
+  clipping: false,
+  gather(clip) {
+    const id = `spot-${Date.now().toString(36)}-${++sequence}`;
+    const full = {
+      ...clip,
+      id,
+      caption: clip.caption ?? defaultCaption(clip.fileName, clip.page),
+      zoomBase: clip.zoomBase ?? clip.rect.w
+    };
+    set((state) => ({ clips: [...state.clips, full] }));
+    return id;
+  },
+  remove(clipId) {
+    const { clips, step } = get();
+    const gone = clips.filter((clip) => clip.id === clipId);
+    if (!gone.length) return;
+    const rest = clips.filter((clip) => clip.id !== clipId);
+    const steps = spotlightSteps(rest).length;
+    set({
+      clips: rest,
+      step: Math.min(step, Math.max(0, steps - 1)),
+      ...rest.length ? {} : { showing: false, note: "" }
+    });
+    release(gone, rest);
+  },
+  setNote: (note) => set({ note }),
+  show: () => set((state) => state.clips.length ? { showing: true, step: 0 } : state),
+  hide: () => set({ showing: false }),
+  goTo: (step) => set(
+    (state) => step < 0 || step >= spotlightSteps(state.clips).length || step === state.step ? state : { step }
+  ),
+  keep() {
+    const { clips, step, note } = get();
+    const ids = spotlightSteps(clips)[step];
+    if (!ids) return;
+    usePresentation.getState().addSlideOf(
+      ids.map((id) => clips.find((clip) => clip.id === id)),
+      note.trim()
+    );
+  },
+  addToTray() {
+    usePresentation.getState().adoptClips(get().clips);
+    set({ ...EMPTY });
+  },
+  clear() {
+    const gone = get().clips;
+    set({ ...EMPTY });
+    release(gone, []);
+  },
+  own(userId) {
+    if (get().owner === userId) return;
+    get().clear();
+    set({ owner: userId, clipping: false });
+  },
+  setClipping: (clipping) => set({ clipping })
+}));
+export {
+  SPOTLIGHT_PER_SLIDE,
+  spotlightSlide,
+  spotlightSteps,
+  useSpotlight
+};
+//# sourceMappingURL=spotlight.js.map

package/dist/presentation/spotlight.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/spotlight.ts"],
+  "sourcesContent": ["/**\n * The spotlight: clips gathered in the document viewer (from one document or several) and shown,\n * on request, as a slide over the viewer itself \u2014 the same window, so a call sharing it keeps\n * sharing it. It is transient: nothing reaches the presentation unless \"Keep as slide\" (or \"Add to\n * the presentation\") puts it there.\n *\n * Kept in memory only, like the presentation (a clip holds its decrypted file), and cleared when\n * another user signs in (`owner`).\n */\n\nimport { create } from 'zustand'\nimport { releasePdfRegionSource } from '@arbidocs/react/viewers'\nimport { autoLayout, defaultCaption, type Clip, type Slide } from './model'\nimport { reserveOf, usePresentation, type NewClip } from './store'\n\n/** A spotlight slide holds this many clips at most; more are shown on further slides. */\nexport const SPOTLIGHT_PER_SLIDE = 4\n\ninterface SpotlightState {\n  clips: Clip[]\n  /** A line of text shown as the spotlight's title (empty: none). */\n  note: string\n  /** The spotlight is on screen. */\n  showing: boolean\n  /** Which of its steps (`spotlightSteps`) is shown. */\n  step: number\n  /** The user the clips were gathered by. */\n  owner: string | null\n  /**\n   * The viewer's Clip mode is on: kept here, not in the viewer, so it stays on as the viewer opens\n   * one document after another.\n   */\n  clipping: boolean\n}\n\ninterface SpotlightActions {\n  gather(clip: NewClip): string\n  remove(clipId: string): void\n  setNote(note: string): void\n  show(): void\n  hide(): void\n  goTo(step: number): void\n  /** The step on screen, as a slide of the open presentation (after its current slide). */\n  keep(): void\n  /** The gathered clips, into the presentation's tray (not placed); the spotlight is emptied. */\n  addToTray(): void\n  clear(): void\n  /** Gathering for this user: another's clips are dropped. */\n  own(userId: string | null): void\n  setClipping(on: boolean): void\n}\n\nexport type SpotlightStore = SpotlightState & SpotlightActions\n\n/**\n * What \u2190 \u2192 step through: the clips together (up to four a slide), and, where a slide shows more\n * than one, each of them alone after it. Each step lists clip ids.\n */\nexport function spotlightSteps(clips: readonly Pick<Clip, 'id'>[]): string[][] {\n  const steps: string[][] = []\n  for (let i = 0; i < clips.length; i += SPOTLIGHT_PER_SLIDE) {\n    const group = clips.slice(i, i + SPOTLIGHT_PER_SLIDE).map((clip) => clip.id)\n    steps.push(group)\n    if (group.length > 1) steps.push(...group.map((id) => [id]))\n  }\n  return steps\n}\n\n/**\n * A step as a slide, arranged as the presentation arranges one (`autoLayout`: two tall clips go\n * side by side, two wide ones stack), with the note as its title and the presentation's look.\n */\nexport function spotlightSlide(\n  clips: readonly Clip[],\n  ids: readonly string[],\n  note: string,\n  look: Parameters<typeof reserveOf>[1]\n): Slide {\n  const shown = ids\n    .map((id) => clips.find((clip) => clip.id === id))\n    .filter((clip): clip is Clip => !!clip)\n  const base = { caption: note.trim(), layout: 'clips' as const }\n  const frames = autoLayout(\n    shown.map((clip) => clip.aspect),\n    reserveOf(base, look)\n  )\n  return {\n    ...base,\n    id: 'spotlight',\n    auto: true,\n    points: '',\n    boxes: [],\n    items: shown.map((clip, i) => ({ clipId: clip.id, frame: frames[i] })),\n  }\n}\n\nlet sequence = 0\n\n/** Its file goes from the PDF engine once neither the spotlight nor the presentation shows it. */\nfunction release(gone: readonly Clip[], kept: readonly Clip[]) {\n  const inUse = new Set([...kept, ...usePresentation.getState().clips].map((clip) => clip.source))\n  for (const source of new Set(gone.map((clip) => clip.source))) {\n    if (!inUse.has(source)) releasePdfRegionSource(source)\n  }\n}\n\nconst EMPTY: Omit<SpotlightState, 'owner' | 'clipping'> = {\n  clips: [],\n  note: '',\n  showing: false,\n  step: 0,\n}\n\nexport const useSpotlight = create<SpotlightStore>()((set, get) => ({\n  ...EMPTY,\n  owner: null,\n  clipping: false,\n\n  gather(clip) {\n    const id = `spot-${Date.now().toString(36)}-${++sequence}`\n    const full: Clip = {\n      ...clip,\n      id,\n      caption: clip.caption ?? defaultCaption(clip.fileName, clip.page),\n      zoomBase: clip.zoomBase ?? clip.rect.w,\n    }\n    set((state) => ({ clips: [...state.clips, full] }))\n    return id\n  },\n\n  remove(clipId) {\n    const { clips, step } = get()\n    const gone = clips.filter((clip) => clip.id === clipId)\n    if (!gone.length) return\n    const rest = clips.filter((clip) => clip.id !== clipId)\n    const steps = spotlightSteps(rest).length\n    set({\n      clips: rest,\n      step: Math.min(step, Math.max(0, steps - 1)),\n      ...(rest.length ? {} : { showing: false, note: '' }),\n    })\n    release(gone, rest)\n  },\n\n  setNote: (note) => set({ note }),\n  show: () => set((state) => (state.clips.length ? { showing: true, step: 0 } : state)),\n  hide: () => set({ showing: false }),\n  goTo: (step) =>\n    set((state) =>\n      step < 0 || step >= spotlightSteps(state.clips).length || step === state.step\n        ? state\n        : { step }\n    ),\n\n  keep() {\n    const { clips, step, note } = get()\n    const ids = spotlightSteps(clips)[step]\n    if (!ids) return\n    usePresentation.getState().addSlideOf(\n      ids.map((id) => clips.find((clip) => clip.id === id)!),\n      note.trim()\n    )\n  },\n\n  addToTray() {\n    usePresentation.getState().adoptClips(get().clips)\n    set({ ...EMPTY })\n  },\n\n  clear() {\n    const gone = get().clips\n    set({ ...EMPTY })\n    release(gone, [])\n  },\n\n  own(userId) {\n    if (get().owner === userId) return\n    get().clear()\n    set({ owner: userId, clipping: false })\n  },\n\n  setClipping: (clipping) => set({ clipping }),\n}))\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/presentation/store.d.ts

@@ -154,6 +154,11 @@ interface PresentationActions {
     bind(boundTo: string | null): void;
     /** Clips gathered before (with no presentation open), added to the tray, not placed. */
     adoptClips(clips: readonly Clip[]): void;
+    /**
+     * A slide of these clips (added to the tray too), arranged, with `caption` as its title: after
+     * the current slide, or in its place while that is empty. It becomes the current slide.
+     */
+    addSlideOf(clips: readonly Clip[], caption?: string): void;
     /** Replace the presentation with one opened from a file (its clips' sources fetched). */
     load(opened: {
         title: string;

package/dist/presentation/store.js

@@ -371,6 +371,25 @@ const usePresentation = create()((set, get) => {
         ...adopted.filter((clip) => !state.clips.some((entry) => entry.id === clip.id))
       ]
     })),
+    addSlideOf: (added, caption = "") => set((state) => {
+      const fresh = added.map((clip) => ({ ...clip, id: nextId("clip") }));
+      const clips = [...state.clips, ...fresh];
+      const slide = arranged(
+        {
+          ...emptySlide("clips"),
+          caption,
+          items: fresh.map((clip) => ({ clipId: clip.id, frame: fitFrame(clip.aspect) }))
+        },
+        clips,
+        state
+      );
+      const here = state.slides[state.current];
+      const empty = !!here && !here.items.length && !here.boxes.length && !here.caption.trim() && !here.points.trim();
+      const at = empty ? state.current : state.current + 1;
+      const slides = state.slides.slice();
+      slides.splice(at, empty ? 1 : 0, slide);
+      return { clips, slides, current: at };
+    }),
     load(opened) {
       get().reset();
       const clips = opened.clips.map((clip) => ({ ...clip, id: nextId("clip") }));