@arbidocs/blocks 0.5.122 → 0.5.124

package/dist/connection/presentation/ConnectedSlidesTab.js

@@ -8,7 +8,7 @@ import {
   useArbiSessionState,
   useArbiSessionStore
 } from "@arbidocs/react";
-import { Button } from "@arbidocs/react/ui";
+import { Button, DropdownMenuItem } from "@arbidocs/react/ui";
 import { useBlocksEnvironment } from "../../provider/environment.js";
 import { usePanelHostSupport } from "../../shell/panel-host.js";
 import {
@@ -23,6 +23,8 @@ import { editPresentation } from "./requests.js";
 import { usePresentationController } from "./usePresentationController.js";
 import { usePresentationFiles } from "./usePresentationFiles.js";
 const listOf = (numbers) => numbers.length < 2 ? String(numbers[0] ?? "") : `${numbers.slice(0, -1).join(", ")} and ${numbers[numbers.length - 1]}`;
+const AUTO_SAVE_AFTER_MS = 2500;
+const DEFAULT_NAMES = /^(new|untitled) presentation( \d+)?$/i;
 const STALE = "This presentation was changed outside the editor: Save to draw its slides again.";
 const hasContent = () => hasUnsavedChanges(usePresentation.getState());
 function ConnectedSlidesTab({
@@ -138,6 +140,29 @@ function ConnectedSlidesTab({
       )
     ).finally(() => setLoading(false));
   }, [currentVersion, heldVersion, isDraft, version, loading, open, documentId, target, notify]);
+  const draftHasContent = usePresentation(
+    (state) => isDraft && state.boundTo === target && state.savedId === null && hasUnsavedChanges(state)
+  );
+  const autoSaved = useRef(null);
+  useEffect(() => {
+    if (!draftHasContent || autoSaved.current === target) return;
+    const timer = setTimeout(() => {
+      autoSaved.current = target;
+      const state = usePresentation.getState();
+      const firstTitle = state.slides.find((slide) => slide.caption.trim())?.caption.trim();
+      const named = state.title && !DEFAULT_NAMES.test(state.title) ? state.title : null;
+      const title = named ?? firstTitle ?? (state.title || "Untitled presentation");
+      if (title !== state.title) state.setTitle(title);
+      void save(title).catch((error) => {
+        autoSaved.current = null;
+        notify(
+          error instanceof Error ? error.message : "The presentation could not be saved",
+          "error"
+        );
+      });
+    }, AUTO_SAVE_AFTER_MS);
+    return () => clearTimeout(timer);
+  }, [draftHasContent, target, save, draftTitle, notify]);
   useEffect(() => {
     if (isDraft || version || savedId !== documentId || boundTo !== target) return;
     return registerDocumentTurnFlush(documentId, async () => {
@@ -194,20 +219,17 @@ function ConnectedSlidesTab({
       SlidesEditor,
       {
         ...controller.editor,
-        actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-          controller.editor.actions,
-          /* @__PURE__ */ jsx(
-            Button,
+        menuItems: /* @__PURE__ */ jsxs(Fragment, { children: [
+          controller.editor.menuItems,
+          /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
             {
-              type: "button",
-              size: "icon",
-              variant: "ghost",
-              className: "size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11",
-              title: "Edit in its own window, beside the documents you clip from",
-              "aria-label": "Pop out",
-              onClick: () => openPresentation(session, { windows, title: popoutTitle("Presentation") }),
+              onSelect: () => openPresentation(session, { windows, title: popoutTitle("Presentation") }),
               "data-testid": "presentation-pop-out",
-              children: /* @__PURE__ */ jsx(ExternalLink, { className: "size-4" })
+              children: [
+                /* @__PURE__ */ jsx(ExternalLink, { className: "size-4" }),
+                /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Edit in its own window" })
+              ]
             }
           )
         ] }),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/connection/presentation/ConnectedSlidesTab.tsx"],
-  "sourcesContent": ["/**\n * A presentation's slides tab in the document viewer: the slides editor, on the presentation the\n * viewer shows. Opening a saved presentation loads it (unless it is the one being edited); a new\n * one (a presentation draft) takes the clips gathered so far. Clips gathered with no presentation\n * open join the one opened next. Saving a draft makes it a document, and the tab moves to it.\n *\n * The editor can also move to the presentation's own window (Pop out), beside the documents its\n * clips come from; the tab then says so. Present opens that window with the slides alone.\n */\n\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { ExternalLink, Loader2, PanelLeftClose, Presentation } from 'lucide-react'\nimport {\n  isPanelOpen,\n  registerDocumentTurnFlush,\n  useArbiSessionState,\n  useArbiSessionStore,\n} from '@arbidocs/react'\nimport { Button } from '@arbidocs/react/ui'\nimport { useBlocksEnvironment } from '../../provider/environment'\nimport { usePanelHostSupport } from '../../shell/panel-host'\nimport {\n  PRESENTATION_PANEL,\n  openPresentation,\n  presentationWindowOnlyPresents,\n} from '../../presentation/panel-id'\nimport { SlidesEditor } from '../../presentation/SlidesEditor'\nimport { hasUnsavedChanges, usePresentation } from '../../presentation/store'\nimport { EmptyState } from '../../components/EmptyState'\nimport { editPresentation } from './requests'\nimport { usePresentationController } from './usePresentationController'\nimport { usePresentationFiles } from './usePresentationFiles'\n\nexport interface ConnectedSlidesTabProps {\n  /** The viewed document's id, or a presentation draft's (`draft-\u2026`). */\n  documentId: string\n  /** The version on screen, when an older one. */\n  version?: number\n  /** The document's current version: a newer one than the one being edited is opened. */\n  currentVersion?: number\n  /** A new presentation, not saved yet: its draft title. */\n  draftTitle?: string\n}\n\n/** \"2, 3 and 5\". */\nconst listOf = (numbers: number[]) =>\n  numbers.length < 2\n    ? String(numbers[0] ?? '')\n    : `${numbers.slice(0, -1).join(', ')} and ${numbers[numbers.length - 1]}`\n\nconst STALE = 'This presentation was changed outside the editor: Save to draw its slides again.'\n\n/** The presentation has anything in it worth asking about before it is replaced. */\nconst hasContent = () => hasUnsavedChanges(usePresentation.getState())\n\nexport function ConnectedSlidesTab({\n  documentId,\n  version,\n  currentVersion,\n  draftTitle,\n}: ConnectedSlidesTabProps) {\n  const session = useArbiSessionStore()\n  const { windows, popoutTitle } = usePanelHostSupport()\n  const { confirm } = useBlocksEnvironment()\n  const { open, save } = usePresentationFiles()\n  const notify = usePresentation((s) => s.notify)\n  const boundTo = usePresentation((s) => s.boundTo)\n  const savedId = usePresentation((s) => s.savedId)\n  const [loading, setLoading] = useState(false)\n  const isDraft = draftTitle !== undefined\n  const target = version ? `${documentId}@v${version}` : documentId\n  const poppedOut = useArbiSessionState(\n    (state) => isPanelOpen(state, PRESENTATION_PANEL) && !presentationWindowOnlyPresents()\n  )\n  const controller = usePresentationController(!poppedOut)\n  const asked = useRef<string | null>(null)\n  // Another presentation, with changes, is being edited and the user kept it.\n  const [declined, setDeclined] = useState(false)\n  const [force, setForce] = useState(0)\n\n  // Show the presentation this tab is for (once per presentation: a remount does not ask again).\n  useEffect(() => {\n    const state = usePresentation.getState()\n    if (state.boundTo === target || asked.current === `${target}#${force}`) return\n    asked.current = `${target}#${force}`\n    setDeclined(false)\n    void (async () => {\n      // Clips gathered with no presentation open join this one.\n      const gathered = state.boundTo === null ? state.clips : []\n      if (state.boundTo !== null && hasContent() && !force) {\n        const ok = await confirm({\n          title: 'Open presentation',\n          message: 'Replace the presentation being edited? Save it first to keep its changes.',\n          kind: 'confirm',\n        })\n        if (!ok) return setDeclined(true)\n      }\n      if (isDraft) {\n        if (state.boundTo !== null) state.reset()\n        usePresentation.getState().bind(target)\n        usePresentation.getState().setTitle(draftTitle || 'Untitled presentation')\n        return\n      }\n      setLoading(true)\n      try {\n        const { missing, stale, imported, changedOutside } = await open(documentId, version)\n        usePresentation.getState().bind(target)\n        if (gathered.length) usePresentation.getState().adoptClips(gathered)\n        if (stale) notify(STALE, 'error')\n        if (imported) {\n          notify(\n            ['Opened from PowerPoint, ready to edit.', ...imported.notes].join(' \u00B7 '),\n            'success'\n          )\n        }\n        if (changedOutside) {\n          notify(\n            `${changedOutside.length === 1 ? `Slide ${changedOutside[0]} was` : `Slides ${listOf(changedOutside)} were`} changed in PowerPoint: brought in as changed there.`,\n            'success'\n          )\n        }\n        if (missing) {\n          notify(\n            `${missing} clip${missing === 1 ? '' : 's'} could not be opened (moved, deleted or not shared with you)`,\n            'error'\n          )\n        }\n      } catch (error) {\n        notify(\n          error instanceof Error ? error.message : 'The presentation could not be opened',\n          'error'\n        )\n      } finally {\n        setLoading(false)\n      }\n    })()\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- a draft's title changes as it is typed\n  }, [target, documentId, version, isDraft, force, open, confirm, notify])\n\n  // A draft's title is the presentation's.\n  useEffect(() => {\n    if (isDraft && boundTo === target && draftTitle) usePresentation.getState().setTitle(draftTitle)\n  }, [isDraft, boundTo, target, draftTitle])\n\n  // Saved as another document (a draft's first save, Save as, an older file saved as a\n  // PowerPoint): the viewer follows it. Only once this tab's presentation was the one edited\n  // (another, still bound as the tab opens, is not \"its\" save).\n  const wasBound = useRef(false)\n  useEffect(() => {\n    if (boundTo === target) wasBound.current = true\n    if (!wasBound.current || !savedId || boundTo !== savedId || savedId === target) return\n    if (isDraft) session.clearDraftDocument(documentId)\n    editPresentation(session, { kind: 'open', documentId: savedId })\n  }, [isDraft, savedId, boundTo, target, documentId, session])\n\n  // A newer version saved meanwhile (by ARBI, asked in the chat beside the deck, or by someone\n  // else): shown at once, unless this one has changes of its own, which are never thrown away.\n  const heldVersion = usePresentation((s) => (s.boundTo === target ? s.version : null))\n  const toldNewer = useRef<number | null>(null)\n  useEffect(() => {\n    if (isDraft || version || !currentVersion || heldVersion === null) return\n    if (currentVersion <= heldVersion || loading) return\n    if (hasContent()) {\n      if (toldNewer.current === currentVersion) return\n      toldNewer.current = currentVersion\n      notify(\n        `A newer version (${currentVersion}) was saved while you edited. Save as\u2026 keeps yours; reopen the presentation to see it.`,\n        'error'\n      )\n      return\n    }\n    setLoading(true)\n    void open(documentId)\n      .then(() => {\n        usePresentation.getState().bind(target)\n        notify(`Updated to version ${currentVersion}.`, 'success')\n      })\n      .catch((error: unknown) =>\n        notify(\n          error instanceof Error ? error.message : 'The new version could not be opened',\n          'error'\n        )\n      )\n      .finally(() => setLoading(false))\n  }, [currentVersion, heldVersion, isDraft, version, loading, open, documentId, target, notify])\n\n  // A chat turn about this presentation (the chat beside it) saves its unsaved changes first, so\n  // ARBI works on the slides as they are on screen.\n  useEffect(() => {\n    if (isDraft || version || savedId !== documentId || boundTo !== target) return\n    return registerDocumentTurnFlush(documentId, async () => {\n      const state = usePresentation.getState()\n      if (state.savedId === documentId && hasUnsavedChanges(state)) await save(state.title)\n    })\n  }, [isDraft, version, savedId, boundTo, documentId, target, save])\n\n  const present = useCallback(() => {\n    openPresentation(session, { present: true, windows, title: popoutTitle('Presentation') })\n    usePresentation.getState().setPresenting(true)\n  }, [session, windows, popoutTitle])\n\n  if (poppedOut) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-6\" data-testid=\"slides-popped-out\">\n        <EmptyState\n          icon={ExternalLink}\n          title=\"Editing in its own window\"\n          description=\"The presentation is open in its own window, beside the documents you clip from.\"\n          action={\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => session.closePanel(PRESENTATION_PANEL)}\n            >\n              <PanelLeftClose className=\"size-4\" />\n              Bring it back here\n            </Button>\n          }\n        />\n      </div>\n    )\n  }\n  if (declined && boundTo !== target) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-6\" data-testid=\"slides-declined\">\n        <EmptyState\n          icon={Presentation}\n          title=\"Another presentation is being edited\"\n          description=\"It has changes. Save it first, or open this one in its place.\"\n          action={\n            <Button type=\"button\" variant=\"outline\" onClick={() => setForce((n) => n + 1)}>\n              Open this one instead\n            </Button>\n          }\n        />\n      </div>\n    )\n  }\n  if (loading || boundTo !== target) {\n    return (\n      <div className=\"flex h-full items-center justify-center gap-2 text-sm text-muted-foreground\">\n        <Loader2 className=\"size-4 animate-spin\" />\n        Opening the presentation\u2026\n      </div>\n    )\n  }\n  return (\n    <>\n      {controller.dialogs}\n      <SlidesEditor\n        {...controller.editor}\n        actions={\n          <>\n            {controller.editor.actions}\n            <Button\n              type=\"button\"\n              size=\"icon\"\n              variant=\"ghost\"\n              className=\"size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11\"\n              title=\"Edit in its own window, beside the documents you clip from\"\n              aria-label=\"Pop out\"\n              onClick={() =>\n                openPresentation(session, { windows, title: popoutTitle('Presentation') })\n              }\n              data-testid=\"presentation-pop-out\"\n            >\n              <ExternalLink className=\"size-4\" />\n            </Button>\n          </>\n        }\n        onPresent={present}\n      />\n    </>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * A presentation's slides tab in the document viewer: the slides editor, on the presentation the\n * viewer shows. Opening a saved presentation loads it (unless it is the one being edited); a new\n * one (a presentation draft) takes the clips gathered so far. Clips gathered with no presentation\n * open join the one opened next. Saving a draft makes it a document, and the tab moves to it.\n *\n * The editor can also move to the presentation's own window (Pop out), beside the documents its\n * clips come from; the tab then says so. Present opens that window with the slides alone.\n */\n\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { ExternalLink, Loader2, PanelLeftClose, Presentation } from 'lucide-react'\nimport {\n  isPanelOpen,\n  registerDocumentTurnFlush,\n  useArbiSessionState,\n  useArbiSessionStore,\n} from '@arbidocs/react'\nimport { Button, DropdownMenuItem } from '@arbidocs/react/ui'\nimport { useBlocksEnvironment } from '../../provider/environment'\nimport { usePanelHostSupport } from '../../shell/panel-host'\nimport {\n  PRESENTATION_PANEL,\n  openPresentation,\n  presentationWindowOnlyPresents,\n} from '../../presentation/panel-id'\nimport { SlidesEditor } from '../../presentation/SlidesEditor'\nimport { hasUnsavedChanges, usePresentation } from '../../presentation/store'\nimport { EmptyState } from '../../components/EmptyState'\nimport { editPresentation } from './requests'\nimport { usePresentationController } from './usePresentationController'\nimport { usePresentationFiles } from './usePresentationFiles'\n\nexport interface ConnectedSlidesTabProps {\n  /** The viewed document's id, or a presentation draft's (`draft-\u2026`). */\n  documentId: string\n  /** The version on screen, when an older one. */\n  version?: number\n  /** The document's current version: a newer one than the one being edited is opened. */\n  currentVersion?: number\n  /** A new presentation, not saved yet: its draft title. */\n  draftTitle?: string\n}\n\n/** \"2, 3 and 5\". */\nconst listOf = (numbers: number[]) =>\n  numbers.length < 2\n    ? String(numbers[0] ?? '')\n    : `${numbers.slice(0, -1).join(', ')} and ${numbers[numbers.length - 1]}`\n\n/** A new presentation saves itself this long after its first content (typing settles first). */\nconst AUTO_SAVE_AFTER_MS = 2500\n/** The names a new presentation starts with (not chosen by anyone). */\nconst DEFAULT_NAMES = /^(new|untitled) presentation( \\d+)?$/i\n\nconst STALE = 'This presentation was changed outside the editor: Save to draw its slides again.'\n\n/** The presentation has anything in it worth asking about before it is replaced. */\nconst hasContent = () => hasUnsavedChanges(usePresentation.getState())\n\nexport function ConnectedSlidesTab({\n  documentId,\n  version,\n  currentVersion,\n  draftTitle,\n}: ConnectedSlidesTabProps) {\n  const session = useArbiSessionStore()\n  const { windows, popoutTitle } = usePanelHostSupport()\n  const { confirm } = useBlocksEnvironment()\n  const { open, save } = usePresentationFiles()\n  const notify = usePresentation((s) => s.notify)\n  const boundTo = usePresentation((s) => s.boundTo)\n  const savedId = usePresentation((s) => s.savedId)\n  const [loading, setLoading] = useState(false)\n  const isDraft = draftTitle !== undefined\n  const target = version ? `${documentId}@v${version}` : documentId\n  const poppedOut = useArbiSessionState(\n    (state) => isPanelOpen(state, PRESENTATION_PANEL) && !presentationWindowOnlyPresents()\n  )\n  const controller = usePresentationController(!poppedOut)\n  const asked = useRef<string | null>(null)\n  // Another presentation, with changes, is being edited and the user kept it.\n  const [declined, setDeclined] = useState(false)\n  const [force, setForce] = useState(0)\n\n  // Show the presentation this tab is for (once per presentation: a remount does not ask again).\n  useEffect(() => {\n    const state = usePresentation.getState()\n    if (state.boundTo === target || asked.current === `${target}#${force}`) return\n    asked.current = `${target}#${force}`\n    setDeclined(false)\n    void (async () => {\n      // Clips gathered with no presentation open join this one.\n      const gathered = state.boundTo === null ? state.clips : []\n      if (state.boundTo !== null && hasContent() && !force) {\n        const ok = await confirm({\n          title: 'Open presentation',\n          message: 'Replace the presentation being edited? Save it first to keep its changes.',\n          kind: 'confirm',\n        })\n        if (!ok) return setDeclined(true)\n      }\n      if (isDraft) {\n        if (state.boundTo !== null) state.reset()\n        usePresentation.getState().bind(target)\n        usePresentation.getState().setTitle(draftTitle || 'Untitled presentation')\n        return\n      }\n      setLoading(true)\n      try {\n        const { missing, stale, imported, changedOutside } = await open(documentId, version)\n        usePresentation.getState().bind(target)\n        if (gathered.length) usePresentation.getState().adoptClips(gathered)\n        if (stale) notify(STALE, 'error')\n        if (imported) {\n          notify(\n            ['Opened from PowerPoint, ready to edit.', ...imported.notes].join(' \u00B7 '),\n            'success'\n          )\n        }\n        if (changedOutside) {\n          notify(\n            `${changedOutside.length === 1 ? `Slide ${changedOutside[0]} was` : `Slides ${listOf(changedOutside)} were`} changed in PowerPoint: brought in as changed there.`,\n            'success'\n          )\n        }\n        if (missing) {\n          notify(\n            `${missing} clip${missing === 1 ? '' : 's'} could not be opened (moved, deleted or not shared with you)`,\n            'error'\n          )\n        }\n      } catch (error) {\n        notify(\n          error instanceof Error ? error.message : 'The presentation could not be opened',\n          'error'\n        )\n      } finally {\n        setLoading(false)\n      }\n    })()\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- a draft's title changes as it is typed\n  }, [target, documentId, version, isDraft, force, open, confirm, notify])\n\n  // A draft's title is the presentation's.\n  useEffect(() => {\n    if (isDraft && boundTo === target && draftTitle) usePresentation.getState().setTitle(draftTitle)\n  }, [isDraft, boundTo, target, draftTitle])\n\n  // Saved as another document (a draft's first save, Save as, an older file saved as a\n  // PowerPoint): the viewer follows it. Only once this tab's presentation was the one edited\n  // (another, still bound as the tab opens, is not \"its\" save).\n  const wasBound = useRef(false)\n  useEffect(() => {\n    if (boundTo === target) wasBound.current = true\n    if (!wasBound.current || !savedId || boundTo !== savedId || savedId === target) return\n    if (isDraft) session.clearDraftDocument(documentId)\n    editPresentation(session, { kind: 'open', documentId: savedId })\n  }, [isDraft, savedId, boundTo, target, documentId, session])\n\n  // A newer version saved meanwhile (by ARBI, asked in the chat beside the deck, or by someone\n  // else): shown at once, unless this one has changes of its own, which are never thrown away.\n  const heldVersion = usePresentation((s) => (s.boundTo === target ? s.version : null))\n  const toldNewer = useRef<number | null>(null)\n  useEffect(() => {\n    if (isDraft || version || !currentVersion || heldVersion === null) return\n    if (currentVersion <= heldVersion || loading) return\n    if (hasContent()) {\n      if (toldNewer.current === currentVersion) return\n      toldNewer.current = currentVersion\n      notify(\n        `A newer version (${currentVersion}) was saved while you edited. Save as\u2026 keeps yours; reopen the presentation to see it.`,\n        'error'\n      )\n      return\n    }\n    setLoading(true)\n    void open(documentId)\n      .then(() => {\n        usePresentation.getState().bind(target)\n        notify(`Updated to version ${currentVersion}.`, 'success')\n      })\n      .catch((error: unknown) =>\n        notify(\n          error instanceof Error ? error.message : 'The new version could not be opened',\n          'error'\n        )\n      )\n      .finally(() => setLoading(false))\n  }, [currentVersion, heldVersion, isDraft, version, loading, open, documentId, target, notify])\n\n  // A new presentation saves itself once it has something in it (a clip, a title, a point): from\n  // then on it is a document of Presentations, which a chat can work in and look at (its PDF), and\n  // which is not lost with the tab. Later saves stay the person's (each a version they chose).\n  const draftHasContent = usePresentation(\n    (state) =>\n      isDraft && state.boundTo === target && state.savedId === null && hasUnsavedChanges(state)\n  )\n  const autoSaved = useRef<string | null>(null)\n  useEffect(() => {\n    if (!draftHasContent || autoSaved.current === target) return\n    const timer = setTimeout(() => {\n      autoSaved.current = target\n      const state = usePresentation.getState()\n      // Still called what every new one is called: named after its first slide's title instead.\n      const firstTitle = state.slides.find((slide) => slide.caption.trim())?.caption.trim()\n      const named = state.title && !DEFAULT_NAMES.test(state.title) ? state.title : null\n      const title = named ?? firstTitle ?? (state.title || 'Untitled presentation')\n      if (title !== state.title) state.setTitle(title)\n      void save(title).catch((error: unknown) => {\n        autoSaved.current = null\n        notify(\n          error instanceof Error ? error.message : 'The presentation could not be saved',\n          'error'\n        )\n      })\n    }, AUTO_SAVE_AFTER_MS)\n    return () => clearTimeout(timer)\n  }, [draftHasContent, target, save, draftTitle, notify])\n\n  // A chat turn about this presentation (the chat beside it) saves its unsaved changes first, so\n  // ARBI works on the slides as they are on screen.\n  useEffect(() => {\n    if (isDraft || version || savedId !== documentId || boundTo !== target) return\n    return registerDocumentTurnFlush(documentId, async () => {\n      const state = usePresentation.getState()\n      if (state.savedId === documentId && hasUnsavedChanges(state)) await save(state.title)\n    })\n  }, [isDraft, version, savedId, boundTo, documentId, target, save])\n\n  const present = useCallback(() => {\n    openPresentation(session, { present: true, windows, title: popoutTitle('Presentation') })\n    usePresentation.getState().setPresenting(true)\n  }, [session, windows, popoutTitle])\n\n  if (poppedOut) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-6\" data-testid=\"slides-popped-out\">\n        <EmptyState\n          icon={ExternalLink}\n          title=\"Editing in its own window\"\n          description=\"The presentation is open in its own window, beside the documents you clip from.\"\n          action={\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => session.closePanel(PRESENTATION_PANEL)}\n            >\n              <PanelLeftClose className=\"size-4\" />\n              Bring it back here\n            </Button>\n          }\n        />\n      </div>\n    )\n  }\n  if (declined && boundTo !== target) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-6\" data-testid=\"slides-declined\">\n        <EmptyState\n          icon={Presentation}\n          title=\"Another presentation is being edited\"\n          description=\"It has changes. Save it first, or open this one in its place.\"\n          action={\n            <Button type=\"button\" variant=\"outline\" onClick={() => setForce((n) => n + 1)}>\n              Open this one instead\n            </Button>\n          }\n        />\n      </div>\n    )\n  }\n  if (loading || boundTo !== target) {\n    return (\n      <div className=\"flex h-full items-center justify-center gap-2 text-sm text-muted-foreground\">\n        <Loader2 className=\"size-4 animate-spin\" />\n        Opening the presentation\u2026\n      </div>\n    )\n  }\n  return (\n    <>\n      {controller.dialogs}\n      <SlidesEditor\n        {...controller.editor}\n        menuItems={\n          <>\n            {controller.editor.menuItems}\n            <DropdownMenuItem\n              onSelect={() =>\n                openPresentation(session, { windows, title: popoutTitle('Presentation') })\n              }\n              data-testid=\"presentation-pop-out\"\n            >\n              <ExternalLink className=\"size-4\" />\n              <span className=\"ml-2\">Edit in its own window</span>\n            </DropdownMenuItem>\n          </>\n        }\n        onPresent={present}\n      />\n    </>\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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/connection/presentation/SpotlightStrip.tsx"],
+  "sourcesContent": ["/**\n * The clips gathered in the viewer, in a small strip over the document: each clip (\u00D7 takes it\n * out), a note to show as the spotlight's title, another document to clip from, and Show (or S),\n * which puts them in the spotlight over this same viewer. Rarer actions \u2014 keep them as a slide,\n * add them to the presentation's tray, clear them \u2014 are in its \"\u2026\" menu.\n *\n * The strip and the spotlight stay over whichever document the viewer shows, so clips are gathered\n * from several documents in a row. Esc brings the document back where it was scrolled to.\n */\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Eraser, MoreHorizontal, Inbox, Presentation, StickyNote, X } from 'lucide-react'\nimport { useArbiSessionStore, useDocuments } from '@arbidocs/react'\nimport {\n  Button,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  Input,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  cn,\n  getDocumentTitle,\n} from '@arbidocs/react/ui'\nimport { ClipImage } from '../../presentation/ClipImage'\nimport type { Clip } from '../../presentation/model'\nimport { SpotlightView, type ScreenRect } from '../../presentation/SpotlightView'\nimport { useSpotlight } from '../../presentation/spotlight'\nimport { DocumentPicker, type PickerGroup } from '../../settings/DocumentPicker'\n\n/** The viewer this strip is over (its frame), found from the strip's own element. */\nconst frameOf = (node: HTMLElement | null) =>\n  node?.closest<HTMLElement>('[data-slot=\"viewer-frame\"]') ?? null\n\nconst isTyping = (target: EventTarget | null) =>\n  !!(target as HTMLElement | null)?.closest?.('input, textarea, select, [contenteditable=\"true\"]')\n\n/**\n * Where a clip is on screen now: its area of its page, while its document is clipped in the viewer\n * (`data-clip-document`) and that page is in view.\n */\nfunction clipOnPage(frame: HTMLElement, clip: Clip): ScreenRect | null {\n  const clipped = Array.from(frame.querySelectorAll('[data-clip-document]')).find(\n    (element) => element.getAttribute('data-clip-document') === clip.documentId\n  )\n  const page = clipped?.querySelector<HTMLElement>(`[data-page-number=\"${clip.page}\"]`)\n  if (!page) return null\n  const box = page.getBoundingClientRect()\n  const view = frame.ownerDocument.defaultView\n  const rect = {\n    left: box.left + clip.rect.x * box.width,\n    top: box.top + clip.rect.y * box.height,\n    width: clip.rect.w * box.width,\n    height: clip.rect.h * box.height,\n  }\n  const visible =\n    rect.width > 0 &&\n    rect.top + rect.height > 0 &&\n    rect.left + rect.width > 0 &&\n    (!view || (rect.top < view.innerHeight && rect.left < view.innerWidth))\n  return visible ? rect : null\n}\n\nfunction useDocumentSwitcher(clips: readonly Clip[]) {\n  const session = useArbiSessionStore()\n  const { data: documents } = useDocuments()\n  const groups = useMemo<PickerGroup[]>(() => {\n    const all = (documents ?? [])\n      .map((doc) => ({\n        id: doc.external_id,\n        title: getDocumentTitle(doc, 'Untitled'),\n        fileName: doc.file_name,\n      }))\n      .sort((a, b) => a.title.localeCompare(b.title))\n    const clipped = new Set(clips.map((clip) => clip.documentId))\n    const from = all.filter((doc) => clipped.has(doc.id))\n    return [\n      ...(from.length ? [{ id: 'clipped', heading: 'Clipped from', docs: from }] : []),\n      { id: 'all', heading: 'Documents', docs: all },\n    ]\n  }, [documents, clips])\n  const open = (id: string) => session.setViewingDocument({ id, page: null })\n  return { groups, open }\n}\n\nexport function SpotlightStrip() {\n  const clips = useSpotlight((s) => s.clips)\n  const note = useSpotlight((s) => s.note)\n  const showing = useSpotlight((s) => s.showing)\n  const actions = useSpotlight.getState()\n  const switcher = useDocumentSwitcher(clips)\n  const [noteOpen, setNoteOpen] = useState(false)\n\n  const strip = useRef<HTMLDivElement | null>(null)\n  const [view, setView] = useState<Window | null>(null)\n  const stripRef = useCallback((node: HTMLDivElement | null) => {\n    strip.current = node\n    if (node) setView(node.ownerDocument.defaultView)\n  }, [])\n\n  // S shows the spotlight (not while typing).\n  useEffect(() => {\n    if (!view || showing) return\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.metaKey || event.ctrlKey || event.altKey || isTyping(event.target)) return\n      if (event.key !== 's' && event.key !== 'S') return\n      event.preventDefault()\n      useSpotlight.getState().show()\n    }\n    view.addEventListener('keydown', onKeyDown)\n    return () => view.removeEventListener('keydown', onKeyDown)\n  }, [view, showing])\n\n  // Back from the spotlight, the document is where it was scrolled to.\n  const scrolled = useRef<{ element: HTMLElement; top: number; left: number } | null>(null)\n  useEffect(() => {\n    const scroller = frameOf(strip.current)?.querySelector<HTMLElement>(\n      '[data-slot=\"pdf-scroller\"]'\n    )\n    if (showing) {\n      scrolled.current = scroller\n        ? { element: scroller, top: scroller.scrollTop, left: scroller.scrollLeft }\n        : null\n      return\n    }\n    const before = scrolled.current\n    scrolled.current = null\n    if (before?.element.isConnected) {\n      before.element.scrollTop = before.top\n      before.element.scrollLeft = before.left\n    }\n  }, [showing])\n\n  const fromRect = useCallback((clip: Clip) => {\n    const frame = frameOf(strip.current)\n    const onPage = frame ? clipOnPage(frame, clip) : null\n    // Not on screen (another document's clip): from its chip in the strip.\n    return (\n      onPage ??\n      strip.current?.querySelector(`[data-spotlight-clip=\"${clip.id}\"]`)?.getBoundingClientRect() ??\n      null\n    )\n  }, [])\n\n  const count = `${clips.length} clip${clips.length === 1 ? '' : 's'}`\n  return (\n    <>\n      <div\n        ref={stripRef}\n        className={cn(\n          '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',\n          showing && 'invisible'\n        )}\n        role=\"toolbar\"\n        aria-label=\"Gathered clips\"\n        data-testid=\"spotlight-strip\"\n      >\n        <ul className=\"flex min-w-0 items-center gap-1 overflow-x-auto [scrollbar-width:none]\">\n          {clips.map((clip, index) => (\n            <li\n              key={clip.id}\n              className=\"group relative h-8 shrink-0 overflow-hidden rounded-md border border-border bg-white\"\n              style={{ width: `${Math.min(4.5, Math.max(1.5, 2 * clip.aspect))}rem` }}\n              title={clip.caption}\n              data-spotlight-clip={clip.id}\n              data-testid={`spotlight-chip-${index}`}\n            >\n              <ClipImage clip={clip} className=\"h-full w-full\" />\n              <button\n                type=\"button\"\n                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\"\n                onClick={() => actions.remove(clip.id)}\n                aria-label={`Remove ${clip.caption}`}\n                data-testid={`spotlight-remove-${index}`}\n              >\n                <X className=\"size-3.5\" />\n              </button>\n            </li>\n          ))}\n        </ul>\n        <span className=\"shrink-0 text-xs text-muted-foreground\" data-testid=\"spotlight-count\">\n          {count}\n        </span>\n        <Popover open={noteOpen} onOpenChange={setNoteOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              type=\"button\"\n              variant={note ? 'secondary' : 'ghost'}\n              size=\"sm\"\n              className=\"h-7 max-w-40 shrink-0 gap-1 rounded-full px-2 text-xs\"\n              title={note ? `Note: ${note}` : 'Type a note to show as the title'}\n              data-testid=\"spotlight-note\"\n            >\n              <StickyNote className=\"size-3.5 shrink-0\" />\n              {note ? <span className=\"truncate\">{note}</span> : <span>Note</span>}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent side=\"top\" className=\"w-72 p-2\">\n            <Input\n              autoFocus\n              value={note}\n              placeholder=\"Type a note\"\n              onChange={(event) => actions.setNote(event.target.value)}\n              onKeyDown={(event) => {\n                if (event.key === 'Enter') setNoteOpen(false)\n              }}\n              data-testid=\"spotlight-note-input\"\n            />\n          </PopoverContent>\n        </Popover>\n        <div className=\"w-44 shrink-0 [&_[role=combobox]]:h-7 [&_[role=combobox]]:rounded-full [&_[role=combobox]]:text-xs\">\n          <DocumentPicker\n            groups={switcher.groups}\n            value=\"\"\n            onValueChange={switcher.open}\n            labels={{ placeholder: 'Clip another document' }}\n          />\n        </div>\n        <Button\n          type=\"button\"\n          size=\"sm\"\n          className=\"h-7 shrink-0 gap-1 rounded-full px-3 text-xs\"\n          onClick={actions.show}\n          title=\"Show the clips over the document (S)\"\n          data-testid=\"spotlight-show\"\n        >\n          <Presentation className=\"size-3.5\" />\n          Show\n        </Button>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"size-7 shrink-0 rounded-full\"\n              aria-label=\"More\"\n              data-testid=\"spotlight-more\"\n            >\n              <MoreHorizontal className=\"size-4\" />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            <DropdownMenuItem onSelect={actions.keep} data-testid=\"spotlight-menu-keep\">\n              <Presentation className=\"mr-2 size-4\" /> Keep as slide\n            </DropdownMenuItem>\n            <DropdownMenuItem onSelect={actions.addToTray} data-testid=\"spotlight-menu-tray\">\n              <Inbox className=\"mr-2 size-4\" /> Add to the presentation tray\n            </DropdownMenuItem>\n            <DropdownMenuItem onSelect={actions.clear} data-testid=\"spotlight-menu-clear\">\n              <Eraser className=\"mr-2 size-4\" /> Clear the clips\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n      {showing && <SpotlightView fromRect={fromRect} />}\n    </>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -1,8 +1,8 @@
 /**
  * The document viewer's Clip mode: whether it is on, and its header controls. Clips made in it
- * join the presentation's tray (a presentation being made, or one started from them); it stays on
- * from one document to the next, so clips are gathered from several documents in a row. Beside it,
- * the Presentation pill goes back to arrange them.
+ * are gathered in the viewer's spotlight strip (`SpotlightStrip`: Show them over the document, or
+ * keep them as a slide); it stays on from one document to the next, so clips are gathered from
+ * several documents in a row. Beside it, the Presentation pill goes back to the presentation.
  */
 import { type ReactNode } from 'react';
 export declare function useViewerClipping(
@@ -11,4 +11,5 @@ clippable: boolean, compact: boolean): {
     clipping: boolean;
     stop: () => void;
     button: ReactNode;
+    layer: ReactNode;
 };

package/dist/connection/presentation/useViewerClipping.js

@@ -1,16 +1,20 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
+import { useCallback } from "react";
+import { useSpotlight } from "../../presentation/spotlight.js";
 import { ClipButton } from "../../document-tools/DocumentToolButtons.js";
 import { PresentationPill } from "./PresentationPill.js";
+import { SpotlightLayer } from "./SpotlightLayer.js";
 function useViewerClipping(clippable, compact) {
-  const [on, setOn] = useState(false);
-  const stop = useCallback(() => setOn(false), []);
+  const on = useSpotlight((s) => s.clipping);
+  const setOn = useSpotlight((s) => s.setClipping);
+  const stop = useCallback(() => setOn(false), [setOn]);
   const button = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(PresentationPill, { compact }),
     clippable && /* @__PURE__ */ jsx(ClipButton, { active: on, compact, onClick: () => setOn(!on) })
   ] });
-  return { clipping: on && clippable, stop, button };
+  const layer = /* @__PURE__ */ jsx(SpotlightLayer, {});
+  return { clipping: on && clippable, stop, button, layer };
 }
 export {
   useViewerClipping

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/connection/presentation/useViewerClipping.tsx"],
-  "sourcesContent": ["/**\n * The document viewer's Clip mode: whether it is on, and its header controls. Clips made in it\n * join the presentation's tray (a presentation being made, or one started from them); it stays on\n * from one document to the next, so clips are gathered from several documents in a row. Beside it,\n * the Presentation pill goes back to arrange them.\n */\n\nimport { useCallback, useState, type ReactNode } from 'react'\nimport { ClipButton } from '../../document-tools/DocumentToolButtons'\nimport { PresentationPill } from './PresentationPill'\n\nexport function useViewerClipping(\n  /** A PDF, an image or a video is on screen. Clip mode shows over the viewer's other modes. */\n  clippable: boolean,\n  compact: boolean\n): { clipping: boolean; stop: () => void; button: ReactNode } {\n  const [on, setOn] = useState(false)\n  const stop = useCallback(() => setOn(false), [])\n  const button = (\n    <>\n      <PresentationPill compact={compact} />\n      {clippable && <ClipButton active={on} compact={compact} onClick={() => setOn(!on)} />}\n    </>\n  )\n  return { clipping: on && clippable, stop, button }\n}\n"],
-  "mappings": ";AAmBI,mBACE,KADF;AAZJ,SAAS,aAAa,gBAAgC;AACtD,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAE1B,SAAS,kBAEd,WACA,SAC4D;AAC5D,QAAM,CAAC,IAAI,KAAK,IAAI,SAAS,KAAK;AAClC,QAAM,OAAO,YAAY,MAAM,MAAM,KAAK,GAAG,CAAC,CAAC;AAC/C,QAAM,SACJ,iCACE;AAAA,wBAAC,oBAAiB,SAAkB;AAAA,IACnC,aAAa,oBAAC,cAAW,QAAQ,IAAI,SAAkB,SAAS,MAAM,MAAM,CAAC,EAAE,GAAG;AAAA,KACrF;AAEF,SAAO,EAAE,UAAU,MAAM,WAAW,MAAM,OAAO;AACnD;",
+  "sourcesContent": ["/**\n * The document viewer's Clip mode: whether it is on, and its header controls. Clips made in it\n * are gathered in the viewer's spotlight strip (`SpotlightStrip`: Show them over the document, or\n * keep them as a slide); it stays on from one document to the next, so clips are gathered from\n * several documents in a row. Beside it, the Presentation pill goes back to the presentation.\n */\n\nimport { useCallback, type ReactNode } from 'react'\nimport { useSpotlight } from '../../presentation/spotlight'\nimport { ClipButton } from '../../document-tools/DocumentToolButtons'\nimport { PresentationPill } from './PresentationPill'\nimport { SpotlightLayer } from './SpotlightLayer'\n\nexport function useViewerClipping(\n  /** A PDF, an image or a video is on screen. Clip mode shows over the viewer's other modes. */\n  clippable: boolean,\n  compact: boolean\n): { clipping: boolean; stop: () => void; button: ReactNode; layer: ReactNode } {\n  // In the spotlight's store: it stays on while the viewer opens another document.\n  const on = useSpotlight((s) => s.clipping)\n  const setOn = useSpotlight((s) => s.setClipping)\n  const stop = useCallback(() => setOn(false), [setOn])\n  const button = (\n    <>\n      <PresentationPill compact={compact} />\n      {clippable && <ClipButton active={on} compact={compact} onClick={() => setOn(!on)} />}\n    </>\n  )\n  // Over the viewer's body: the gathered clips' strip, and the spotlight.\n  const layer = <SpotlightLayer />\n  return { clipping: on && clippable, stop, button, layer }\n}\n"],
+  "mappings": ";AAuBI,mBACE,KADF;AAhBJ,SAAS,mBAAmC;AAC5C,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAExB,SAAS,kBAEd,WACA,SAC8E;AAE9E,QAAM,KAAK,aAAa,CAAC,MAAM,EAAE,QAAQ;AACzC,QAAM,QAAQ,aAAa,CAAC,MAAM,EAAE,WAAW;AAC/C,QAAM,OAAO,YAAY,MAAM,MAAM,KAAK,GAAG,CAAC,KAAK,CAAC;AACpD,QAAM,SACJ,iCACE;AAAA,wBAAC,oBAAiB,SAAkB;AAAA,IACnC,aAAa,oBAAC,cAAW,QAAQ,IAAI,SAAkB,SAAS,MAAM,MAAM,CAAC,EAAE,GAAG;AAAA,KACrF;AAGF,QAAM,QAAQ,oBAAC,kBAAe;AAC9B,SAAO,EAAE,UAAU,MAAM,WAAW,MAAM,QAAQ,MAAM;AAC1D;",
   "names": []
 }