@arbidocs/blocks 0.5.123 → 0.5.125

package/dist/connect/viewer.cjs

@@ -1,36 +1,40 @@
 "use client";
 'use strict';
 
-var chunkJD2HX2BR_cjs = require('../chunk-JD2HX2BR.cjs');
-require('../chunk-WFMWKPGY.cjs');
-require('../chunk-4TTX6ZNS.cjs');
+var chunk6JMW3IJ2_cjs = require('../chunk-6JMW3IJ2.cjs');
+require('../chunk-JITYC4OS.cjs');
+require('../chunk-WVZLAAIZ.cjs');
+require('../chunk-MVXHTAJ4.cjs');
+require('../chunk-ADPRIBSH.cjs');
+require('../chunk-ORNLCBNE.cjs');
 require('../chunk-4CIVQWAX.cjs');
 var chunkPL7HUTM3_cjs = require('../chunk-PL7HUTM3.cjs');
 require('../chunk-GFUOCGY6.cjs');
-require('../chunk-ADDQKZ5I.cjs');
-require('../chunk-KXIRVKCJ.cjs');
-require('../chunk-5QERK4PK.cjs');
-require('../chunk-T73BHNQX.cjs');
+require('../chunk-J3FFSEKO.cjs');
+require('../chunk-PWBRE7JA.cjs');
+require('../chunk-4ONPEVTP.cjs');
+require('../chunk-V3KLUWQQ.cjs');
+require('../chunk-CQ2RJYE2.cjs');
+require('../chunk-2K6IMIVL.cjs');
+require('../chunk-JH6JTI76.cjs');
+require('../chunk-ZESMRGDV.cjs');
+require('../chunk-UUENH4BJ.cjs');
+require('../chunk-AS6QZETU.cjs');
+require('../chunk-OHWHYVKG.cjs');
 require('../chunk-HYUKPHCT.cjs');
-require('../chunk-ALK3PUUB.cjs');
+require('../chunk-L6HTZIBD.cjs');
 require('../chunk-223D4727.cjs');
 require('../chunk-SNUBQMIS.cjs');
-require('../chunk-7557LDAN.cjs');
-require('../chunk-4ONPEVTP.cjs');
-require('../chunk-V3KLUWQQ.cjs');
 require('../chunk-P5AQYC4D.cjs');
 require('../chunk-WAV762GP.cjs');
-require('../chunk-46P7IDBX.cjs');
-require('../chunk-GNZAH6UI.cjs');
-require('../chunk-JH6JTI76.cjs');
 require('../chunk-QQMMCXBP.cjs');
 require('../chunk-DTMBAFIL.cjs');
-require('../chunk-ZESMRGDV.cjs');
 require('../chunk-VCEX7COE.cjs');
 require('../chunk-34HQO4ZQ.cjs');
 require('../chunk-KA3F6TIH.cjs');
 require('../chunk-K4763GD5.cjs');
 require('../chunk-2RLA6QO2.cjs');
+require('../chunk-BLIO3B7Z.cjs');
 require('../chunk-MZZ3SBQL.cjs');
 require('../chunk-NY3YUCOW.cjs');
 require('../chunk-325GVZE6.cjs');
@@ -38,30 +42,27 @@ require('../chunk-WQMR3O2D.cjs');
 require('../chunk-ORELHENJ.cjs');
 require('../chunk-NWNVWO6L.cjs');
 require('../chunk-SK6HQ46Q.cjs');
-require('../chunk-TG2GM7WJ.cjs');
-require('../chunk-MNIQDXM6.cjs');
-require('../chunk-E3Y7RI3J.cjs');
-require('../chunk-VKH3BEZE.cjs');
 require('../chunk-OEJQFPWO.cjs');
+require('../chunk-TG2GM7WJ.cjs');
+require('../chunk-JJZOL5MG.cjs');
 require('../chunk-OYXWQTHF.cjs');
 require('../chunk-S237ORM3.cjs');
 require('../chunk-II2OEXHW.cjs');
-require('../chunk-JJZOL5MG.cjs');
 require('../chunk-3YEXZX4H.cjs');
 require('../chunk-4PA6VCCR.cjs');
 require('../chunk-WXUU3COI.cjs');
 require('../chunk-AHDJXIUB.cjs');
-require('../chunk-YVCOQHCE.cjs');
 require('../chunk-RL2HI6NP.cjs');
 require('../chunk-6UZC4XVV.cjs');
+require('../chunk-YVCOQHCE.cjs');
 require('../chunk-JV5TVUOU.cjs');
+require('../chunk-VZOOGA47.cjs');
 require('../chunk-ZVEW3JBT.cjs');
 require('../chunk-EG7EJFUE.cjs');
 require('../chunk-VG24E4JJ.cjs');
 require('../chunk-U2FFG2B3.cjs');
 require('../chunk-KKYNTWDU.cjs');
 require('../chunk-M74FWYNL.cjs');
-require('../chunk-VZOOGA47.cjs');
 require('../chunk-HQDR43JC.cjs');
 require('../chunk-JR2YSBD5.cjs');
 require('../chunk-3YZKDCWY.cjs');
@@ -78,21 +79,23 @@ require('../chunk-KQF7POTG.cjs');
 require('../chunk-75BNMCUX.cjs');
 require('../chunk-FX3K6LNZ.cjs');
 require('../chunk-QGVOT7E4.cjs');
+require('../chunk-IPSHAMO2.cjs');
 require('../chunk-QRAQZTJE.cjs');
 require('../chunk-UDSHVNU3.cjs');
-require('../chunk-IPSHAMO2.cjs');
 require('../chunk-PPCATBOY.cjs');
+require('../chunk-LJJJ6CYH.cjs');
+require('../chunk-MNIQDXM6.cjs');
+require('../chunk-E3Y7RI3J.cjs');
 require('../chunk-TKHCIHE2.cjs');
 require('../chunk-JDFBEGQO.cjs');
 require('../chunk-ULWRNGGE.cjs');
-require('../chunk-LJJJ6CYH.cjs');
 require('../chunk-PLIF5CUV.cjs');
 
 
 
 Object.defineProperty(exports, "ConnectedDocumentViewer", {
   enumerable: true,
-  get: function () { return chunkJD2HX2BR_cjs.ConnectedDocumentViewer; }
+  get: function () { return chunk6JMW3IJ2_cjs.ConnectedDocumentViewer; }
 });
 Object.defineProperty(exports, "ConnectedDocumentToolsProvider", {
   enumerable: true,

package/dist/connection/presentation/ClippingMediaViewer.js

@@ -5,7 +5,7 @@ import { Pause, Play, Plus } from "lucide-react";
 import { Button } from "@arbidocs/react/ui";
 import { ClipCaptureOverlay } from "../../presentation/ClipCaptureOverlay.js";
 import { formatTime, mediaCaption } from "../../presentation/model.js";
-import { usePresentation } from "../../presentation/store.js";
+import { useSpotlight } from "../../presentation/spotlight.js";
 import { useObjectUrl } from "../../presentation/useObjectUrl.js";
 const WHOLE = { x: 0, y: 0, w: 1, h: 1 };
 function ClippingMediaViewer({
@@ -38,7 +38,7 @@ function ClippingMediaViewer({
   const capture = useCallback(
     ({ rect, aspect }) => {
       const start = kind === "video" ? videoRef.current?.currentTime ?? 0 : void 0;
-      usePresentation.getState().addClip({
+      useSpotlight.getState().gather({
         kind,
         documentId,
         fileName,
@@ -54,7 +54,7 @@ function ClippingMediaViewer({
     [kind, documentId, fileName, file]
   );
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", "data-testid": "clipping-media-viewer", children: [
-    /* @__PURE__ */ jsx("div", { className: "border-b border-border bg-muted px-3 py-1.5 text-xs text-muted-foreground", children: kind === "video" ? "Drag over the video to clip that area from this moment, or add the whole frame." : "Drag over the part of the image to show it in the presentation." }),
+    /* @__PURE__ */ jsx("div", { className: "border-b border-border bg-muted px-3 py-1.5 text-xs text-muted-foreground", children: kind === "video" ? "Drag over the video to clip that area from this moment, or add the whole frame." : "Drag over the part of the image to clip it." }),
     /* @__PURE__ */ jsx("div", { className: "relative min-h-0 flex-1 bg-black", style: { containerType: "size" }, children: /* @__PURE__ */ jsxs(
       "div",
       {

package/dist/connection/presentation/ClippingMediaViewer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/connection/presentation/ClippingMediaViewer.tsx"],
-  "sourcesContent": ["/**\n * An image or a video while clipping for a presentation: drag over it and that area becomes a clip\n * (of a video: from the moment on screen). A video has its own small bar (play / pause, scrub, and\n * \"Add whole frame\"), since the drag area covers the picture.\n */\n\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { Pause, Play, Plus } from 'lucide-react'\nimport { Button } from '@arbidocs/react/ui'\nimport { ClipCaptureOverlay } from '../../presentation/ClipCaptureOverlay'\nimport { formatTime, mediaCaption, type Rect } from '../../presentation/model'\nimport { usePresentation } from '../../presentation/store'\nimport { useObjectUrl } from '../../presentation/useObjectUrl'\n\nexport interface ClippingMediaViewerProps {\n  file: Blob\n  kind: 'image' | 'video'\n  documentId: string\n  fileName: string\n}\n\nconst WHOLE: Rect = { x: 0, y: 0, w: 1, h: 1 }\n\nexport function ClippingMediaViewer({\n  file,\n  kind,\n  documentId,\n  fileName,\n}: ClippingMediaViewerProps) {\n  const url = useObjectUrl(file)\n  const videoRef = useRef<HTMLVideoElement>(null)\n  const imageRef = useRef<HTMLImageElement>(null)\n  // The picture's own width / height, once known.\n  const [natural, setNatural] = useState<number | null>(null)\n  const [time, setTime] = useState(0)\n  const [duration, setDuration] = useState(0)\n  const [playing, setPlaying] = useState(false)\n\n  // Its size, read as soon as it is known: at once if it already loaded (a cached file can load\n  // before any handler is attached), else when it does.\n  useEffect(() => {\n    const media = videoRef.current ?? imageRef.current\n    if (!media || !url) return\n    const read = () => {\n      const width = media instanceof HTMLVideoElement ? media.videoWidth : media.naturalWidth\n      const height = media instanceof HTMLVideoElement ? media.videoHeight : media.naturalHeight\n      if (width && height) setNatural(width / height)\n      if (media instanceof HTMLVideoElement) setDuration(media.duration || 0)\n    }\n    read()\n    const event = media instanceof HTMLVideoElement ? 'loadedmetadata' : 'load'\n    media.addEventListener(event, read)\n    return () => media.removeEventListener(event, read)\n  }, [url])\n\n  const capture = useCallback(\n    ({ rect, aspect }: { rect: Rect; aspect: number }) => {\n      const start = kind === 'video' ? (videoRef.current?.currentTime ?? 0) : undefined\n      usePresentation.getState().addClip({\n        kind,\n        documentId,\n        fileName,\n        page: 1,\n        rect,\n        aspect,\n        masks: [],\n        source: file,\n        start,\n        caption: mediaCaption(fileName, start),\n      })\n    },\n    [kind, documentId, fileName, file]\n  )\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\" data-testid=\"clipping-media-viewer\">\n      <div className=\"border-b border-border bg-muted px-3 py-1.5 text-xs text-muted-foreground\">\n        {kind === 'video'\n          ? 'Drag over the video to clip that area from this moment, or add the whole frame.'\n          : 'Drag over the part of the image to show it in the presentation.'}\n      </div>\n      <div className=\"relative min-h-0 flex-1 bg-black\" style={{ containerType: 'size' }}>\n        {/* The picture as large as fits, aspect kept; the drag area covers exactly it. */}\n        <div\n          className=\"absolute inset-0 m-auto\"\n          style={\n            natural\n              ? {\n                  width: `min(100cqw, calc(100cqh * ${natural}))`,\n                  height: `min(100cqh, calc(100cqw / ${natural}))`,\n                }\n              : { width: '100%', height: '100%' }\n          }\n        >\n          {kind === 'video' ? (\n            <video\n              ref={videoRef}\n              src={url}\n              playsInline\n              preload=\"auto\"\n              className=\"block h-full w-full\"\n              onTimeUpdate={(event) => setTime(event.currentTarget.currentTime)}\n              onPlay={() => setPlaying(true)}\n              onPause={() => setPlaying(false)}\n            />\n          ) : (\n            <img\n              ref={imageRef}\n              src={url}\n              alt={fileName}\n              draggable={false}\n              className=\"block h-full w-full select-none\"\n            />\n          )}\n          {natural && <ClipCaptureOverlay page={1} onCapture={capture} />}\n        </div>\n      </div>\n      {kind === 'video' && (\n        <div className=\"flex items-center gap-2 border-t border-border px-3 py-1.5\">\n          <Button\n            type=\"button\"\n            size=\"icon\"\n            variant=\"ghost\"\n            className=\"size-8\"\n            onClick={() => {\n              const v = videoRef.current\n              if (!v) return\n              if (v.paused) void v.play()\n              else v.pause()\n            }}\n            aria-label={playing ? 'Pause' : 'Play'}\n          >\n            {playing ? <Pause className=\"size-4\" /> : <Play className=\"size-4\" />}\n          </Button>\n          <input\n            type=\"range\"\n            min={0}\n            max={duration || 0}\n            step={0.1}\n            value={time}\n            onChange={(event) => {\n              const v = videoRef.current\n              if (v) v.currentTime = Number(event.target.value)\n            }}\n            className=\"min-w-0 flex-1\"\n            aria-label=\"Position in the video\"\n          />\n          <span className=\"text-xs tabular-nums text-muted-foreground\">\n            {formatTime(time)} / {formatTime(duration)}\n          </span>\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            variant=\"outline\"\n            disabled={!natural}\n            onClick={() => natural && capture({ rect: WHOLE, aspect: natural })}\n            data-testid=\"clip-whole-frame\"\n          >\n            <Plus className=\"mr-1 size-4\" />\n            Add whole frame\n          </Button>\n        </div>\n      )}\n    </div>\n  )\n}\n"],
-  "mappings": ";AA4EM,cAOE,YAPF;AAtEN,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AACzD,SAAS,OAAO,MAAM,YAAY;AAClC,SAAS,cAAc;AACvB,SAAS,0BAA0B;AACnC,SAAS,YAAY,oBAA+B;AACpD,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAS7B,MAAM,QAAc,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE;AAEtC,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6B;AAC3B,QAAM,MAAM,aAAa,IAAI;AAC7B,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,WAAW,OAAyB,IAAI;AAE9C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAwB,IAAI;AAC1D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC;AAC1C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAI5C,YAAU,MAAM;AACd,UAAM,QAAQ,SAAS,WAAW,SAAS;AAC3C,QAAI,CAAC,SAAS,CAAC,IAAK;AACpB,UAAM,OAAO,MAAM;AACjB,YAAM,QAAQ,iBAAiB,mBAAmB,MAAM,aAAa,MAAM;AAC3E,YAAM,SAAS,iBAAiB,mBAAmB,MAAM,cAAc,MAAM;AAC7E,UAAI,SAAS,OAAQ,YAAW,QAAQ,MAAM;AAC9C,UAAI,iBAAiB,iBAAkB,aAAY,MAAM,YAAY,CAAC;AAAA,IACxE;AACA,SAAK;AACL,UAAM,QAAQ,iBAAiB,mBAAmB,mBAAmB;AACrE,UAAM,iBAAiB,OAAO,IAAI;AAClC,WAAO,MAAM,MAAM,oBAAoB,OAAO,IAAI;AAAA,EACpD,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,UAAU;AAAA,IACd,CAAC,EAAE,MAAM,OAAO,MAAsC;AACpD,YAAM,QAAQ,SAAS,UAAW,SAAS,SAAS,eAAe,IAAK;AACxE,sBAAgB,SAAS,EAAE,QAAQ;AAAA,QACjC;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,OAAO,CAAC;AAAA,QACR,QAAQ;AAAA,QACR;AAAA,QACA,SAAS,aAAa,UAAU,KAAK;AAAA,MACvC,CAAC;AAAA,IACH;AAAA,IACA,CAAC,MAAM,YAAY,UAAU,IAAI;AAAA,EACnC;AAEA,SACE,qBAAC,SAAI,WAAU,gCAA+B,eAAY,yBACxD;AAAA,wBAAC,SAAI,WAAU,6EACZ,mBAAS,UACN,oFACA,mEACN;AAAA,IACA,oBAAC,SAAI,WAAU,oCAAmC,OAAO,EAAE,eAAe,OAAO,GAE/E;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OACE,UACI;AAAA,UACE,OAAO,6BAA6B,OAAO;AAAA,UAC3C,QAAQ,6BAA6B,OAAO;AAAA,QAC9C,IACA,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,QAGrC;AAAA,mBAAS,UACR;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAK;AAAA,cACL,aAAW;AAAA,cACX,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,cAAc,CAAC,UAAU,QAAQ,MAAM,cAAc,WAAW;AAAA,cAChE,QAAQ,MAAM,WAAW,IAAI;AAAA,cAC7B,SAAS,MAAM,WAAW,KAAK;AAAA;AAAA,UACjC,IAEA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAK;AAAA,cACL,KAAK;AAAA,cACL,WAAW;AAAA,cACX,WAAU;AAAA;AAAA,UACZ;AAAA,UAED,WAAW,oBAAC,sBAAmB,MAAM,GAAG,WAAW,SAAS;AAAA;AAAA;AAAA,IAC/D,GACF;AAAA,IACC,SAAS,WACR,qBAAC,SAAI,WAAU,8DACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,SAAS,MAAM;AACb,kBAAM,IAAI,SAAS;AACnB,gBAAI,CAAC,EAAG;AACR,gBAAI,EAAE,OAAQ,MAAK,EAAE,KAAK;AAAA,gBACrB,GAAE,MAAM;AAAA,UACf;AAAA,UACA,cAAY,UAAU,UAAU;AAAA,UAE/B,oBAAU,oBAAC,SAAM,WAAU,UAAS,IAAK,oBAAC,QAAK,WAAU,UAAS;AAAA;AAAA,MACrE;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,KAAK;AAAA,UACL,KAAK,YAAY;AAAA,UACjB,MAAM;AAAA,UACN,OAAO;AAAA,UACP,UAAU,CAAC,UAAU;AACnB,kBAAM,IAAI,SAAS;AACnB,gBAAI,EAAG,GAAE,cAAc,OAAO,MAAM,OAAO,KAAK;AAAA,UAClD;AAAA,UACA,WAAU;AAAA,UACV,cAAW;AAAA;AAAA,MACb;AAAA,MACA,qBAAC,UAAK,WAAU,8CACb;AAAA,mBAAW,IAAI;AAAA,QAAE;AAAA,QAAI,WAAW,QAAQ;AAAA,SAC3C;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,UAAU,CAAC;AAAA,UACX,SAAS,MAAM,WAAW,QAAQ,EAAE,MAAM,OAAO,QAAQ,QAAQ,CAAC;AAAA,UAClE,eAAY;AAAA,UAEZ;AAAA,gCAAC,QAAK,WAAU,eAAc;AAAA,YAAE;AAAA;AAAA;AAAA,MAElC;AAAA,OACF;AAAA,KAEJ;AAEJ;",
+  "sourcesContent": ["/**\n * An image or a video while clipping for a presentation: drag over it and that area becomes a clip\n * (of a video: from the moment on screen). A video has its own small bar (play / pause, scrub, and\n * \"Add whole frame\"), since the drag area covers the picture.\n */\n\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { Pause, Play, Plus } from 'lucide-react'\nimport { Button } from '@arbidocs/react/ui'\nimport { ClipCaptureOverlay } from '../../presentation/ClipCaptureOverlay'\nimport { formatTime, mediaCaption, type Rect } from '../../presentation/model'\nimport { useSpotlight } from '../../presentation/spotlight'\nimport { useObjectUrl } from '../../presentation/useObjectUrl'\n\nexport interface ClippingMediaViewerProps {\n  file: Blob\n  kind: 'image' | 'video'\n  documentId: string\n  fileName: string\n}\n\nconst WHOLE: Rect = { x: 0, y: 0, w: 1, h: 1 }\n\nexport function ClippingMediaViewer({\n  file,\n  kind,\n  documentId,\n  fileName,\n}: ClippingMediaViewerProps) {\n  const url = useObjectUrl(file)\n  const videoRef = useRef<HTMLVideoElement>(null)\n  const imageRef = useRef<HTMLImageElement>(null)\n  // The picture's own width / height, once known.\n  const [natural, setNatural] = useState<number | null>(null)\n  const [time, setTime] = useState(0)\n  const [duration, setDuration] = useState(0)\n  const [playing, setPlaying] = useState(false)\n\n  // Its size, read as soon as it is known: at once if it already loaded (a cached file can load\n  // before any handler is attached), else when it does.\n  useEffect(() => {\n    const media = videoRef.current ?? imageRef.current\n    if (!media || !url) return\n    const read = () => {\n      const width = media instanceof HTMLVideoElement ? media.videoWidth : media.naturalWidth\n      const height = media instanceof HTMLVideoElement ? media.videoHeight : media.naturalHeight\n      if (width && height) setNatural(width / height)\n      if (media instanceof HTMLVideoElement) setDuration(media.duration || 0)\n    }\n    read()\n    const event = media instanceof HTMLVideoElement ? 'loadedmetadata' : 'load'\n    media.addEventListener(event, read)\n    return () => media.removeEventListener(event, read)\n  }, [url])\n\n  const capture = useCallback(\n    ({ rect, aspect }: { rect: Rect; aspect: number }) => {\n      const start = kind === 'video' ? (videoRef.current?.currentTime ?? 0) : undefined\n      useSpotlight.getState().gather({\n        kind,\n        documentId,\n        fileName,\n        page: 1,\n        rect,\n        aspect,\n        masks: [],\n        source: file,\n        start,\n        caption: mediaCaption(fileName, start),\n      })\n    },\n    [kind, documentId, fileName, file]\n  )\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\" data-testid=\"clipping-media-viewer\">\n      <div className=\"border-b border-border bg-muted px-3 py-1.5 text-xs text-muted-foreground\">\n        {kind === 'video'\n          ? 'Drag over the video to clip that area from this moment, or add the whole frame.'\n          : 'Drag over the part of the image to clip it.'}\n      </div>\n      <div className=\"relative min-h-0 flex-1 bg-black\" style={{ containerType: 'size' }}>\n        {/* The picture as large as fits, aspect kept; the drag area covers exactly it. */}\n        <div\n          className=\"absolute inset-0 m-auto\"\n          style={\n            natural\n              ? {\n                  width: `min(100cqw, calc(100cqh * ${natural}))`,\n                  height: `min(100cqh, calc(100cqw / ${natural}))`,\n                }\n              : { width: '100%', height: '100%' }\n          }\n        >\n          {kind === 'video' ? (\n            <video\n              ref={videoRef}\n              src={url}\n              playsInline\n              preload=\"auto\"\n              className=\"block h-full w-full\"\n              onTimeUpdate={(event) => setTime(event.currentTarget.currentTime)}\n              onPlay={() => setPlaying(true)}\n              onPause={() => setPlaying(false)}\n            />\n          ) : (\n            <img\n              ref={imageRef}\n              src={url}\n              alt={fileName}\n              draggable={false}\n              className=\"block h-full w-full select-none\"\n            />\n          )}\n          {natural && <ClipCaptureOverlay page={1} onCapture={capture} />}\n        </div>\n      </div>\n      {kind === 'video' && (\n        <div className=\"flex items-center gap-2 border-t border-border px-3 py-1.5\">\n          <Button\n            type=\"button\"\n            size=\"icon\"\n            variant=\"ghost\"\n            className=\"size-8\"\n            onClick={() => {\n              const v = videoRef.current\n              if (!v) return\n              if (v.paused) void v.play()\n              else v.pause()\n            }}\n            aria-label={playing ? 'Pause' : 'Play'}\n          >\n            {playing ? <Pause className=\"size-4\" /> : <Play className=\"size-4\" />}\n          </Button>\n          <input\n            type=\"range\"\n            min={0}\n            max={duration || 0}\n            step={0.1}\n            value={time}\n            onChange={(event) => {\n              const v = videoRef.current\n              if (v) v.currentTime = Number(event.target.value)\n            }}\n            className=\"min-w-0 flex-1\"\n            aria-label=\"Position in the video\"\n          />\n          <span className=\"text-xs tabular-nums text-muted-foreground\">\n            {formatTime(time)} / {formatTime(duration)}\n          </span>\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            variant=\"outline\"\n            disabled={!natural}\n            onClick={() => natural && capture({ rect: WHOLE, aspect: natural })}\n            data-testid=\"clip-whole-frame\"\n          >\n            <Plus className=\"mr-1 size-4\" />\n            Add whole frame\n          </Button>\n        </div>\n      )}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/connection/presentation/ClippingPdfViewer.d.ts

@@ -1,6 +1,7 @@
 /**
- * The PDF while clipping for a presentation: drag over a page and the area becomes a clip in the
- * presentation (and goes on the current slide while that has fewer than two).
+ * The PDF while clipping: a click on a passage clips that passage (outlined under the pointer), a
+ * drag over a page clips that area. Clips are gathered in the viewer's spotlight strip
+ * (`SpotlightStrip`), to show over the document or keep as a slide.
  *
  * Redactions are honoured: when the version has markup, its redaction marks (all but rejected
  * ones) are read first and every clip carries those over its area as black masks, so a redacted
@@ -8,7 +9,7 @@
  * read.
  */
 import { type ComponentType } from 'react';
-import type { PdfViewerProps } from '@arbidocs/react/viewers';
+import { type PdfViewerProps } from '@arbidocs/react/viewers';
 export interface ClippingPdfViewerProps extends Omit<PdfViewerProps, 'renderPageOverlay'> {
     file: Blob;
     documentId: string;

package/dist/connection/presentation/ClippingPdfViewer.js

@@ -1,9 +1,18 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { useParsedDocument } from "@arbidocs/react";
 import { createMarkupStore, useDocumentTools } from "@arbidocs/react/document-tools";
+import { useProcessedChunks } from "@arbidocs/react/viewers";
 import { ClipCaptureOverlay } from "../../presentation/ClipCaptureOverlay.js";
-import { usePresentation } from "../../presentation/store.js";
+import { passageClipRect } from "../../presentation/passage-clip.js";
+import { useSpotlight } from "../../presentation/spotlight.js";
+import { placedPassagesByPage } from "../viewer/pdf/passageHighlights.js";
 const NO_MASKS = { status: "ready", masks: /* @__PURE__ */ new Map() };
 function useRedactionMasks(documentId, version, hasMarkup) {
   const { client } = useDocumentTools();
@@ -30,6 +39,20 @@ function useRedactionMasks(documentId, version, hasMarkup) {
   }, [client, documentId, version, hasMarkup]);
   return state;
 }
+const NO_FOOTNOTES = {};
+const NO_PASSAGES = /* @__PURE__ */ new Map();
+function usePassageAreas(documentId, current) {
+  const { data: parsed } = useParsedDocument(documentId, "final", { enabled: current });
+  const { processedChunks } = useProcessedChunks(parsed?.chunks, NO_FOOTNOTES);
+  return useMemo(() => {
+    if (!current || !processedChunks.length) return NO_PASSAGES;
+    const areas = /* @__PURE__ */ new Map();
+    for (const [page, boxes] of placedPassagesByPage(processedChunks)) {
+      areas.set(page, boxes.map(passageClipRect));
+    }
+    return areas;
+  }, [current, processedChunks]);
+}
 function Notice({ children }) {
   return /* @__PURE__ */ jsx("div", { className: "border-b border-border bg-muted px-3 py-1.5 text-xs text-muted-foreground", children });
 }
@@ -42,11 +65,12 @@ function ClippingPdfViewer({
   ...viewerProps
 }) {
   const masks = useRedactionMasks(documentId, version, hasMarkup);
+  const passages = usePassageAreas(documentId, version === void 0);
   const file = viewerProps.file;
   const capture = useCallback(
     ({ page, rect, aspect }) => {
       if (masks.status !== "ready") return;
-      usePresentation.getState().addClip({
+      useSpotlight.getState().gather({
         kind: "pdf",
         documentId,
         version,
@@ -61,13 +85,28 @@ function ClippingPdfViewer({
     [masks, documentId, version, fileName, file]
   );
   const renderPageOverlay = useCallback(
-    ({ pageNumber }) => masks.status === "ready" ? /* @__PURE__ */ jsx(ClipCaptureOverlay, { page: pageNumber, onCapture: capture }) : null,
-    [masks.status, capture]
+    ({ pageNumber }) => masks.status === "ready" ? /* @__PURE__ */ jsx(
+      ClipCaptureOverlay,
+      {
+        page: pageNumber,
+        passages: passages.get(pageNumber),
+        onCapture: capture
+      }
+    ) : null,
+    [masks.status, capture, passages]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex h-full min-h-0 flex-col",
+      "data-clip-document": documentId,
+      "data-testid": "clipping-pdf-viewer",
+      children: [
+        /* @__PURE__ */ jsx(Notice, { children: masks.status === "loading" ? "Reading the redactions before clipping\u2026" : masks.status === "error" ? "Couldn't read this document's redactions, so it can't be clipped." : passages.size ? "Click a passage to clip it, or drag over any area." : "Drag over the part of a page to clip it." }),
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(Viewer, { ...viewerProps, renderPageOverlay }) })
+      ]
+    }
   );
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", "data-testid": "clipping-pdf-viewer", children: [
-    /* @__PURE__ */ jsx(Notice, { children: masks.status === "loading" ? "Reading the redactions before clipping\u2026" : masks.status === "error" ? "Couldn't read this document's redactions, so it can't be clipped." : "Drag over the part of a page to show it in the presentation." }),
-    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(Viewer, { ...viewerProps, renderPageOverlay }) })
-  ] });
 }
 export {
   ClippingPdfViewer

package/dist/connection/presentation/ClippingPdfViewer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/connection/presentation/ClippingPdfViewer.tsx"],
-  "sourcesContent": ["/**\n * The PDF while clipping for a presentation: drag over a page and the area becomes a clip in the\n * presentation (and goes on the current slide while that has fewer than two).\n *\n * Redactions are honoured: when the version has markup, its redaction marks (all but rejected\n * ones) are read first and every clip carries those over its area as black masks, so a redacted\n * passage never reaches a shared screen. Clipping waits for them, and stays off if they cannot be\n * read.\n */\n\nimport { useCallback, useEffect, useState, type ComponentType, type ReactNode } from 'react'\nimport { createMarkupStore, useDocumentTools } from '@arbidocs/react/document-tools'\nimport type { PdfViewerProps } from '@arbidocs/react/viewers'\nimport { ClipCaptureOverlay } from '../../presentation/ClipCaptureOverlay'\nimport type { Rect } from '../../presentation/model'\nimport { usePresentation } from '../../presentation/store'\n\ntype MaskState =\n  | { status: 'loading' }\n  | { status: 'error' }\n  | { status: 'ready'; masks: ReadonlyMap<number, Rect[]> }\n\nconst NO_MASKS: MaskState = { status: 'ready', masks: new Map() }\n\n/** The version's redaction rectangles by page; none to read when it has no markup. */\nfunction useRedactionMasks(documentId: string, version: number | undefined, hasMarkup: boolean) {\n  const { client } = useDocumentTools()\n  const [state, setState] = useState<MaskState>(hasMarkup ? { status: 'loading' } : NO_MASKS)\n  useEffect(() => {\n    if (!hasMarkup) {\n      setState(NO_MASKS)\n      return\n    }\n    let cancelled = false\n    setState({ status: 'loading' })\n    createMarkupStore({ version, client })\n      .load(documentId)\n      .then((layer) => {\n        if (cancelled) return\n        const masks = new Map<number, Rect[]>()\n        for (const mark of layer.annotations) {\n          if (mark.kind !== 'redaction' || mark.status === 'rejected') continue\n          masks.set(mark.page, [...(masks.get(mark.page) ?? []), ...mark.rects])\n        }\n        setState({ status: 'ready', masks })\n      })\n      .catch(() => !cancelled && setState({ status: 'error' }))\n    return () => {\n      cancelled = true\n    }\n  }, [client, documentId, version, hasMarkup])\n  return state\n}\n\nexport interface ClippingPdfViewerProps extends Omit<PdfViewerProps, 'renderPageOverlay'> {\n  file: Blob\n  documentId: string\n  /** The version on screen when it is an older one. */\n  version?: number\n  fileName: string\n  /** The version has markup, which may hold redactions. */\n  hasMarkup: boolean\n  viewer: ComponentType<PdfViewerProps>\n}\n\nfunction Notice({ children }: { children: ReactNode }) {\n  return (\n    <div className=\"border-b border-border bg-muted px-3 py-1.5 text-xs text-muted-foreground\">\n      {children}\n    </div>\n  )\n}\n\nexport function ClippingPdfViewer({\n  documentId,\n  version,\n  fileName,\n  hasMarkup,\n  viewer: Viewer,\n  ...viewerProps\n}: ClippingPdfViewerProps) {\n  const masks = useRedactionMasks(documentId, version, hasMarkup)\n  const file = viewerProps.file\n\n  const capture = useCallback(\n    ({ page, rect, aspect }: { page: number; rect: Rect; aspect: number }) => {\n      if (masks.status !== 'ready') return\n      usePresentation.getState().addClip({\n        kind: 'pdf',\n        documentId,\n        version,\n        fileName,\n        page,\n        rect,\n        aspect,\n        masks: masks.masks.get(page) ?? [],\n        source: file,\n      })\n      // It joins the presentation's tray (the viewer's Presentation pill counts it).\n    },\n    [masks, documentId, version, fileName, file]\n  )\n\n  const renderPageOverlay = useCallback(\n    ({ pageNumber }: { pageNumber: number }) =>\n      masks.status === 'ready' ? (\n        <ClipCaptureOverlay page={pageNumber} onCapture={capture} />\n      ) : null,\n    [masks.status, capture]\n  )\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\" data-testid=\"clipping-pdf-viewer\">\n      <Notice>\n        {masks.status === 'loading'\n          ? 'Reading the redactions before clipping\u2026'\n          : masks.status === 'error'\n            ? \"Couldn't read this document's redactions, so it can't be clipped.\"\n            : 'Drag over the part of a page to show it in the presentation.'}\n      </Notice>\n      <div className=\"min-h-0 flex-1\">\n        <Viewer {...viewerProps} renderPageOverlay={renderPageOverlay} />\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": ";AAmEI,cA6CA,YA7CA;AAzDJ,SAAS,aAAa,WAAW,gBAAoD;AACrF,SAAS,mBAAmB,wBAAwB;AAEpD,SAAS,0BAA0B;AAEnC,SAAS,uBAAuB;AAOhC,MAAM,WAAsB,EAAE,QAAQ,SAAS,OAAO,oBAAI,IAAI,EAAE;AAGhE,SAAS,kBAAkB,YAAoB,SAA6B,WAAoB;AAC9F,QAAM,EAAE,OAAO,IAAI,iBAAiB;AACpC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAoB,YAAY,EAAE,QAAQ,UAAU,IAAI,QAAQ;AAC1F,YAAU,MAAM;AACd,QAAI,CAAC,WAAW;AACd,eAAS,QAAQ;AACjB;AAAA,IACF;AACA,QAAI,YAAY;AAChB,aAAS,EAAE,QAAQ,UAAU,CAAC;AAC9B,sBAAkB,EAAE,SAAS,OAAO,CAAC,EAClC,KAAK,UAAU,EACf,KAAK,CAAC,UAAU;AACf,UAAI,UAAW;AACf,YAAM,QAAQ,oBAAI,IAAoB;AACtC,iBAAW,QAAQ,MAAM,aAAa;AACpC,YAAI,KAAK,SAAS,eAAe,KAAK,WAAW,WAAY;AAC7D,cAAM,IAAI,KAAK,MAAM,CAAC,GAAI,MAAM,IAAI,KAAK,IAAI,KAAK,CAAC,GAAI,GAAG,KAAK,KAAK,CAAC;AAAA,MACvE;AACA,eAAS,EAAE,QAAQ,SAAS,MAAM,CAAC;AAAA,IACrC,CAAC,EACA,MAAM,MAAM,CAAC,aAAa,SAAS,EAAE,QAAQ,QAAQ,CAAC,CAAC;AAC1D,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,QAAQ,YAAY,SAAS,SAAS,CAAC;AAC3C,SAAO;AACT;AAaA,SAAS,OAAO,EAAE,SAAS,GAA4B;AACrD,SACE,oBAAC,SAAI,WAAU,6EACZ,UACH;AAEJ;AAEO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAA2B;AACzB,QAAM,QAAQ,kBAAkB,YAAY,SAAS,SAAS;AAC9D,QAAM,OAAO,YAAY;AAEzB,QAAM,UAAU;AAAA,IACd,CAAC,EAAE,MAAM,MAAM,OAAO,MAAoD;AACxE,UAAI,MAAM,WAAW,QAAS;AAC9B,sBAAgB,SAAS,EAAE,QAAQ;AAAA,QACjC,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,MAAM,MAAM,IAAI,IAAI,KAAK,CAAC;AAAA,QACjC,QAAQ;AAAA,MACV,CAAC;AAAA,IAEH;AAAA,IACA,CAAC,OAAO,YAAY,SAAS,UAAU,IAAI;AAAA,EAC7C;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,EAAE,WAAW,MACZ,MAAM,WAAW,UACf,oBAAC,sBAAmB,MAAM,YAAY,WAAW,SAAS,IACxD;AAAA,IACN,CAAC,MAAM,QAAQ,OAAO;AAAA,EACxB;AAEA,SACE,qBAAC,SAAI,WAAU,gCAA+B,eAAY,uBACxD;AAAA,wBAAC,UACE,gBAAM,WAAW,YACd,iDACA,MAAM,WAAW,UACf,sEACA,gEACR;AAAA,IACA,oBAAC,SAAI,WAAU,kBACb,8BAAC,UAAQ,GAAG,aAAa,mBAAsC,GACjE;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["/**\n * The PDF while clipping: a click on a passage clips that passage (outlined under the pointer), a\n * drag over a page clips that area. Clips are gathered in the viewer's spotlight strip\n * (`SpotlightStrip`), to show over the document or keep as a slide.\n *\n * Redactions are honoured: when the version has markup, its redaction marks (all but rejected\n * ones) are read first and every clip carries those over its area as black masks, so a redacted\n * passage never reaches a shared screen. Clipping waits for them, and stays off if they cannot be\n * read.\n */\n\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type ComponentType,\n  type ReactNode,\n} from 'react'\nimport { useParsedDocument } from '@arbidocs/react'\nimport { createMarkupStore, useDocumentTools } from '@arbidocs/react/document-tools'\nimport { useProcessedChunks, type PdfViewerProps } from '@arbidocs/react/viewers'\nimport { ClipCaptureOverlay } from '../../presentation/ClipCaptureOverlay'\nimport type { Rect } from '../../presentation/model'\nimport { passageClipRect } from '../../presentation/passage-clip'\nimport { useSpotlight } from '../../presentation/spotlight'\nimport { placedPassagesByPage } from '../viewer/pdf/passageHighlights'\n\ntype MaskState =\n  | { status: 'loading' }\n  | { status: 'error' }\n  | { status: 'ready'; masks: ReadonlyMap<number, Rect[]> }\n\nconst NO_MASKS: MaskState = { status: 'ready', masks: new Map() }\n\n/** The version's redaction rectangles by page; none to read when it has no markup. */\nfunction useRedactionMasks(documentId: string, version: number | undefined, hasMarkup: boolean) {\n  const { client } = useDocumentTools()\n  const [state, setState] = useState<MaskState>(hasMarkup ? { status: 'loading' } : NO_MASKS)\n  useEffect(() => {\n    if (!hasMarkup) {\n      setState(NO_MASKS)\n      return\n    }\n    let cancelled = false\n    setState({ status: 'loading' })\n    createMarkupStore({ version, client })\n      .load(documentId)\n      .then((layer) => {\n        if (cancelled) return\n        const masks = new Map<number, Rect[]>()\n        for (const mark of layer.annotations) {\n          if (mark.kind !== 'redaction' || mark.status === 'rejected') continue\n          masks.set(mark.page, [...(masks.get(mark.page) ?? []), ...mark.rects])\n        }\n        setState({ status: 'ready', masks })\n      })\n      .catch(() => !cancelled && setState({ status: 'error' }))\n    return () => {\n      cancelled = true\n    }\n  }, [client, documentId, version, hasMarkup])\n  return state\n}\n\nconst NO_FOOTNOTES: Record<string, string> = {}\nconst NO_PASSAGES: ReadonlyMap<number, Rect[]> = new Map()\n\n/**\n * The areas a click clips, by page: each passage the parser placed, with its margin. Only for the\n * current version (the passages are its own); an older one is clipped by dragging.\n */\nfunction usePassageAreas(documentId: string, current: boolean): ReadonlyMap<number, Rect[]> {\n  const { data: parsed } = useParsedDocument(documentId, 'final', { enabled: current })\n  const { processedChunks } = useProcessedChunks(parsed?.chunks, NO_FOOTNOTES)\n  return useMemo(() => {\n    if (!current || !processedChunks.length) return NO_PASSAGES\n    const areas = new Map<number, Rect[]>()\n    for (const [page, boxes] of placedPassagesByPage(processedChunks)) {\n      areas.set(page, boxes.map(passageClipRect))\n    }\n    return areas\n  }, [current, processedChunks])\n}\n\nexport interface ClippingPdfViewerProps extends Omit<PdfViewerProps, 'renderPageOverlay'> {\n  file: Blob\n  documentId: string\n  /** The version on screen when it is an older one. */\n  version?: number\n  fileName: string\n  /** The version has markup, which may hold redactions. */\n  hasMarkup: boolean\n  viewer: ComponentType<PdfViewerProps>\n}\n\nfunction Notice({ children }: { children: ReactNode }) {\n  return (\n    <div className=\"border-b border-border bg-muted px-3 py-1.5 text-xs text-muted-foreground\">\n      {children}\n    </div>\n  )\n}\n\nexport function ClippingPdfViewer({\n  documentId,\n  version,\n  fileName,\n  hasMarkup,\n  viewer: Viewer,\n  ...viewerProps\n}: ClippingPdfViewerProps) {\n  const masks = useRedactionMasks(documentId, version, hasMarkup)\n  const passages = usePassageAreas(documentId, version === undefined)\n  const file = viewerProps.file\n\n  const capture = useCallback(\n    ({ page, rect, aspect }: { page: number; rect: Rect; aspect: number }) => {\n      if (masks.status !== 'ready') return\n      useSpotlight.getState().gather({\n        kind: 'pdf',\n        documentId,\n        version,\n        fileName,\n        page,\n        rect,\n        aspect,\n        masks: masks.masks.get(page) ?? [],\n        source: file,\n      })\n      // It joins the viewer's spotlight strip.\n    },\n    [masks, documentId, version, fileName, file]\n  )\n\n  const renderPageOverlay = useCallback(\n    ({ pageNumber }: { pageNumber: number }) =>\n      masks.status === 'ready' ? (\n        <ClipCaptureOverlay\n          page={pageNumber}\n          passages={passages.get(pageNumber)}\n          onCapture={capture}\n        />\n      ) : null,\n    [masks.status, capture, passages]\n  )\n\n  return (\n    <div\n      className=\"flex h-full min-h-0 flex-col\"\n      // The spotlight finds a clip's page here, to fly it from there.\n      data-clip-document={documentId}\n      data-testid=\"clipping-pdf-viewer\"\n    >\n      <Notice>\n        {masks.status === 'loading'\n          ? 'Reading the redactions before clipping\u2026'\n          : masks.status === 'error'\n            ? \"Couldn't read this document's redactions, so it can't be clipped.\"\n            : passages.size\n              ? 'Click a passage to clip it, or drag over any area.'\n              : 'Drag over the part of a page to clip it.'}\n      </Notice>\n      <div className=\"min-h-0 flex-1\">\n        <Viewer {...viewerProps} renderPageOverlay={renderPageOverlay} />\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/connection/presentation/SpotlightLayer.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The viewer's spotlight, over its body: nothing until a clip is gathered, then the strip of
+ * gathered clips and, when shown, the spotlight itself (their own chunk, loaded then).
+ */
+export declare function SpotlightLayer(): import("react").JSX.Element | null;

package/dist/connection/presentation/SpotlightLayer.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { lazy, Suspense, useEffect } from "react";
+import { useSpotlight } from "../../presentation/spotlight.js";
+import { useConnectedWorkspace } from "../ConnectionProvider.js";
+const SpotlightStrip = lazy(
+  () => import("./SpotlightStrip.js").then((m) => ({ default: m.SpotlightStrip }))
+);
+function SpotlightLayer() {
+  const { userId } = useConnectedWorkspace();
+  const gathered = useSpotlight((s) => s.clips.length > 0);
+  useEffect(() => useSpotlight.getState().own(userId ?? null), [userId]);
+  if (!gathered) return null;
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(SpotlightStrip, {}) });
+}
+export {
+  SpotlightLayer
+};
+//# sourceMappingURL=SpotlightLayer.js.map

package/dist/connection/presentation/SpotlightLayer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/connection/presentation/SpotlightLayer.tsx"],
+  "sourcesContent": ["/**\n * The viewer's spotlight, over its body: nothing until a clip is gathered, then the strip of\n * gathered clips and, when shown, the spotlight itself (their own chunk, loaded then).\n */\n\nimport { lazy, Suspense, useEffect } from 'react'\nimport { useSpotlight } from '../../presentation/spotlight'\nimport { useConnectedWorkspace } from '../ConnectionProvider'\n\nconst SpotlightStrip = lazy(() =>\n  import('./SpotlightStrip').then((m) => ({ default: m.SpotlightStrip }))\n)\n\nexport function SpotlightLayer() {\n  // Clips gathered by another user are dropped.\n  const { userId } = useConnectedWorkspace()\n  const gathered = useSpotlight((s) => s.clips.length > 0)\n  useEffect(() => useSpotlight.getState().own(userId ?? null), [userId])\n  if (!gathered) return null\n  return (\n    <Suspense fallback={null}>\n      <SpotlightStrip />\n    </Suspense>\n  )\n}\n"],
+  "mappings": ";AAqBM;AAhBN,SAAS,MAAM,UAAU,iBAAiB;AAC1C,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B;AAEtC,MAAM,iBAAiB;AAAA,EAAK,MAC1B,OAAO,kBAAkB,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE;AACxE;AAEO,SAAS,iBAAiB;AAE/B,QAAM,EAAE,OAAO,IAAI,sBAAsB;AACzC,QAAM,WAAW,aAAa,CAAC,MAAM,EAAE,MAAM,SAAS,CAAC;AACvD,YAAU,MAAM,aAAa,SAAS,EAAE,IAAI,UAAU,IAAI,GAAG,CAAC,MAAM,CAAC;AACrE,MAAI,CAAC,SAAU,QAAO;AACtB,SACE,oBAAC,YAAS,UAAU,MAClB,8BAAC,kBAAe,GAClB;AAEJ;",
+  "names": []
+}

package/dist/connection/presentation/SpotlightStrip.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The clips gathered in the viewer, in a small strip over the document: each clip (× takes it
+ * out), a note to show as the spotlight's title, another document to clip from, and Show (or S),
+ * which puts them in the spotlight over this same viewer. Rarer actions — keep them as a slide,
+ * add them to the presentation's tray, clear them — are in its "…" menu.
+ *
+ * The strip and the spotlight stay over whichever document the viewer shows, so clips are gathered
+ * from several documents in a row. Esc brings the document back where it was scrolled to.
+ */
+export declare function SpotlightStrip(): import("react").JSX.Element;

package/dist/connection/presentation/SpotlightStrip.js

@@ -0,0 +1,237 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Eraser, MoreHorizontal, Inbox, Presentation, StickyNote, X } from "lucide-react";
+import { useArbiSessionStore, useDocuments } from "@arbidocs/react";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  cn,
+  getDocumentTitle
+} from "@arbidocs/react/ui";
+import { ClipImage } from "../../presentation/ClipImage.js";
+import { SpotlightView } from "../../presentation/SpotlightView.js";
+import { useSpotlight } from "../../presentation/spotlight.js";
+import { DocumentPicker } from "../../settings/DocumentPicker.js";
+const frameOf = (node) => node?.closest('[data-slot="viewer-frame"]') ?? null;
+const isTyping = (target) => !!target?.closest?.('input, textarea, select, [contenteditable="true"]');
+function clipOnPage(frame, clip) {
+  const clipped = Array.from(frame.querySelectorAll("[data-clip-document]")).find(
+    (element) => element.getAttribute("data-clip-document") === clip.documentId
+  );
+  const page = clipped?.querySelector(`[data-page-number="${clip.page}"]`);
+  if (!page) return null;
+  const box = page.getBoundingClientRect();
+  const view = frame.ownerDocument.defaultView;
+  const rect = {
+    left: box.left + clip.rect.x * box.width,
+    top: box.top + clip.rect.y * box.height,
+    width: clip.rect.w * box.width,
+    height: clip.rect.h * box.height
+  };
+  const visible = rect.width > 0 && rect.top + rect.height > 0 && rect.left + rect.width > 0 && (!view || rect.top < view.innerHeight && rect.left < view.innerWidth);
+  return visible ? rect : null;
+}
+function useDocumentSwitcher(clips) {
+  const session = useArbiSessionStore();
+  const { data: documents } = useDocuments();
+  const groups = useMemo(() => {
+    const all = (documents ?? []).map((doc) => ({
+      id: doc.external_id,
+      title: getDocumentTitle(doc, "Untitled"),
+      fileName: doc.file_name
+    })).sort((a, b) => a.title.localeCompare(b.title));
+    const clipped = new Set(clips.map((clip) => clip.documentId));
+    const from = all.filter((doc) => clipped.has(doc.id));
+    return [
+      ...from.length ? [{ id: "clipped", heading: "Clipped from", docs: from }] : [],
+      { id: "all", heading: "Documents", docs: all }
+    ];
+  }, [documents, clips]);
+  const open = (id) => session.setViewingDocument({ id, page: null });
+  return { groups, open };
+}
+function SpotlightStrip() {
+  const clips = useSpotlight((s) => s.clips);
+  const note = useSpotlight((s) => s.note);
+  const showing = useSpotlight((s) => s.showing);
+  const actions = useSpotlight.getState();
+  const switcher = useDocumentSwitcher(clips);
+  const [noteOpen, setNoteOpen] = useState(false);
+  const strip = useRef(null);
+  const [view, setView] = useState(null);
+  const stripRef = useCallback((node) => {
+    strip.current = node;
+    if (node) setView(node.ownerDocument.defaultView);
+  }, []);
+  useEffect(() => {
+    if (!view || showing) return;
+    const onKeyDown = (event) => {
+      if (event.metaKey || event.ctrlKey || event.altKey || isTyping(event.target)) return;
+      if (event.key !== "s" && event.key !== "S") return;
+      event.preventDefault();
+      useSpotlight.getState().show();
+    };
+    view.addEventListener("keydown", onKeyDown);
+    return () => view.removeEventListener("keydown", onKeyDown);
+  }, [view, showing]);
+  const scrolled = useRef(null);
+  useEffect(() => {
+    const scroller = frameOf(strip.current)?.querySelector(
+      '[data-slot="pdf-scroller"]'
+    );
+    if (showing) {
+      scrolled.current = scroller ? { element: scroller, top: scroller.scrollTop, left: scroller.scrollLeft } : null;
+      return;
+    }
+    const before = scrolled.current;
+    scrolled.current = null;
+    if (before?.element.isConnected) {
+      before.element.scrollTop = before.top;
+      before.element.scrollLeft = before.left;
+    }
+  }, [showing]);
+  const fromRect = useCallback((clip) => {
+    const frame = frameOf(strip.current);
+    const onPage = frame ? clipOnPage(frame, clip) : null;
+    return onPage ?? strip.current?.querySelector(`[data-spotlight-clip="${clip.id}"]`)?.getBoundingClientRect() ?? null;
+  }, []);
+  const count = `${clips.length} clip${clips.length === 1 ? "" : "s"}`;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: stripRef,
+        className: cn(
+          "absolute bottom-[4.5rem] left-1/2 z-20 flex max-w-[calc(100%-1.5rem)] -translate-x-1/2 items-center gap-1.5 rounded-full border border-border bg-background/95 p-1 pl-1.5 shadow-lg backdrop-blur",
+          showing && "invisible"
+        ),
+        role: "toolbar",
+        "aria-label": "Gathered clips",
+        "data-testid": "spotlight-strip",
+        children: [
+          /* @__PURE__ */ jsx("ul", { className: "flex min-w-0 items-center gap-1 overflow-x-auto [scrollbar-width:none]", children: clips.map((clip, index) => /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "group relative h-8 shrink-0 overflow-hidden rounded-md border border-border bg-white",
+              style: { width: `${Math.min(4.5, Math.max(1.5, 2 * clip.aspect))}rem` },
+              title: clip.caption,
+              "data-spotlight-clip": clip.id,
+              "data-testid": `spotlight-chip-${index}`,
+              children: [
+                /* @__PURE__ */ jsx(ClipImage, { clip, className: "h-full w-full" }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "absolute inset-0 flex items-center justify-center bg-black/50 text-white opacity-0 transition-opacity focus-visible:opacity-100 group-hover:opacity-100",
+                    onClick: () => actions.remove(clip.id),
+                    "aria-label": `Remove ${clip.caption}`,
+                    "data-testid": `spotlight-remove-${index}`,
+                    children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+                  }
+                )
+              ]
+            },
+            clip.id
+          )) }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", "data-testid": "spotlight-count", children: count }),
+          /* @__PURE__ */ jsxs(Popover, { open: noteOpen, onOpenChange: setNoteOpen, children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: note ? "secondary" : "ghost",
+                size: "sm",
+                className: "h-7 max-w-40 shrink-0 gap-1 rounded-full px-2 text-xs",
+                title: note ? `Note: ${note}` : "Type a note to show as the title",
+                "data-testid": "spotlight-note",
+                children: [
+                  /* @__PURE__ */ jsx(StickyNote, { className: "size-3.5 shrink-0" }),
+                  note ? /* @__PURE__ */ jsx("span", { className: "truncate", children: note }) : /* @__PURE__ */ jsx("span", { children: "Note" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(PopoverContent, { side: "top", className: "w-72 p-2", children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                autoFocus: true,
+                value: note,
+                placeholder: "Type a note",
+                onChange: (event) => actions.setNote(event.target.value),
+                onKeyDown: (event) => {
+                  if (event.key === "Enter") setNoteOpen(false);
+                },
+                "data-testid": "spotlight-note-input"
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "w-44 shrink-0 [&_[role=combobox]]:h-7 [&_[role=combobox]]:rounded-full [&_[role=combobox]]:text-xs", children: /* @__PURE__ */ jsx(
+            DocumentPicker,
+            {
+              groups: switcher.groups,
+              value: "",
+              onValueChange: switcher.open,
+              labels: { placeholder: "Clip another document" }
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              className: "h-7 shrink-0 gap-1 rounded-full px-3 text-xs",
+              onClick: actions.show,
+              title: "Show the clips over the document (S)",
+              "data-testid": "spotlight-show",
+              children: [
+                /* @__PURE__ */ jsx(Presentation, { className: "size-3.5" }),
+                "Show"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "icon",
+                className: "size-7 shrink-0 rounded-full",
+                "aria-label": "More",
+                "data-testid": "spotlight-more",
+                children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", side: "top", children: [
+              /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: actions.keep, "data-testid": "spotlight-menu-keep", children: [
+                /* @__PURE__ */ jsx(Presentation, { className: "mr-2 size-4" }),
+                " Keep as slide"
+              ] }),
+              /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: actions.addToTray, "data-testid": "spotlight-menu-tray", children: [
+                /* @__PURE__ */ jsx(Inbox, { className: "mr-2 size-4" }),
+                " Add to the presentation tray"
+              ] }),
+              /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: actions.clear, "data-testid": "spotlight-menu-clear", children: [
+                /* @__PURE__ */ jsx(Eraser, { className: "mr-2 size-4" }),
+                " Clear the clips"
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    showing && /* @__PURE__ */ jsx(SpotlightView, { fromRect })
+  ] });
+}
+export {
+  SpotlightStrip
+};
+//# sourceMappingURL=SpotlightStrip.js.map