@arbidocs/blocks 0.5.119 → 0.5.121

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

@@ -0,0 +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": "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",
+  "names": []
+}

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

@@ -0,0 +1,22 @@
+/**
+ * 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).
+ *
+ * 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
+ * passage never reaches a shared screen. Clipping waits for them, and stays off if they cannot be
+ * read.
+ */
+import { type ComponentType } from 'react';
+import type { PdfViewerProps } from '@arbidocs/react/viewers';
+export interface ClippingPdfViewerProps extends Omit<PdfViewerProps, 'renderPageOverlay'> {
+    file: Blob;
+    documentId: string;
+    /** The version on screen when it is an older one. */
+    version?: number;
+    fileName: string;
+    /** The version has markup, which may hold redactions. */
+    hasMarkup: boolean;
+    viewer: ComponentType<PdfViewerProps>;
+}
+export declare function ClippingPdfViewer({ documentId, version, fileName, hasMarkup, viewer: Viewer, ...viewerProps }: ClippingPdfViewerProps): import("react").JSX.Element;

package/dist/connection/presentation/ClippingPdfViewer.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { createMarkupStore, useDocumentTools } from "@arbidocs/react/document-tools";
+import { ClipCaptureOverlay } from "../../presentation/ClipCaptureOverlay.js";
+import { usePresentation } from "../../presentation/store.js";
+const NO_MASKS = { status: "ready", masks: /* @__PURE__ */ new Map() };
+function useRedactionMasks(documentId, version, hasMarkup) {
+  const { client } = useDocumentTools();
+  const [state, setState] = useState(hasMarkup ? { status: "loading" } : NO_MASKS);
+  useEffect(() => {
+    if (!hasMarkup) {
+      setState(NO_MASKS);
+      return;
+    }
+    let cancelled = false;
+    setState({ status: "loading" });
+    createMarkupStore({ version, client }).load(documentId).then((layer) => {
+      if (cancelled) return;
+      const masks = /* @__PURE__ */ new Map();
+      for (const mark of layer.annotations) {
+        if (mark.kind !== "redaction" || mark.status === "rejected") continue;
+        masks.set(mark.page, [...masks.get(mark.page) ?? [], ...mark.rects]);
+      }
+      setState({ status: "ready", masks });
+    }).catch(() => !cancelled && setState({ status: "error" }));
+    return () => {
+      cancelled = true;
+    };
+  }, [client, documentId, version, hasMarkup]);
+  return state;
+}
+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 });
+}
+function ClippingPdfViewer({
+  documentId,
+  version,
+  fileName,
+  hasMarkup,
+  viewer: Viewer,
+  ...viewerProps
+}) {
+  const masks = useRedactionMasks(documentId, version, hasMarkup);
+  const file = viewerProps.file;
+  const capture = useCallback(
+    ({ page, rect, aspect }) => {
+      if (masks.status !== "ready") return;
+      usePresentation.getState().addClip({
+        kind: "pdf",
+        documentId,
+        version,
+        fileName,
+        page,
+        rect,
+        aspect,
+        masks: masks.masks.get(page) ?? [],
+        source: file
+      });
+    },
+    [masks, documentId, version, fileName, file]
+  );
+  const renderPageOverlay = useCallback(
+    ({ pageNumber }) => masks.status === "ready" ? /* @__PURE__ */ jsx(ClipCaptureOverlay, { page: pageNumber, onCapture: capture }) : null,
+    [masks.status, capture]
+  );
+  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
+};
+//# sourceMappingURL=ClippingPdfViewer.js.map

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

@@ -0,0 +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;",
+  "names": []
+}

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

@@ -0,0 +1,12 @@
+/**
+ * The presentation's own window, mounted once by the app shell (the session's `PRESENTATION_PANEL`,
+ * a pop-out). It presents: the slides alone, what is shared in a call or put full screen; or, when
+ * the editor is popped out of the viewer's slides tab, it edits there, beside the documents its
+ * clips come from. A window opened only to present closes when presenting ends.
+ *
+ * It also keeps what the presentation needs wherever it is edited: the theme's logo image, read
+ * when the logo changes; and a clean slate when the session signs out or another user signs in
+ * (the presentation holds decrypted files in memory).
+ */
+/** The presentation's window, with the document tools it needs (sources, redactions). */
+export declare function ConnectedPresentation(): import("react").JSX.Element;

package/dist/connection/presentation/ConnectedPresentation.js

@@ -0,0 +1,100 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
+import { PanelLeftClose } from "lucide-react";
+import {
+  isPanelOpen,
+  useArbiSession,
+  useArbiSessionState,
+  useArbiSessionStore
+} from "@arbidocs/react";
+import { Button } from "@arbidocs/react/ui";
+import { ConnectedPanelHost } from "../panels/ConnectedPanelHost.js";
+import { ConnectedDocumentToolsProvider } from "../viewer/ConnectedDocumentToolsProvider.js";
+import { PRESENTATION_PANEL, presentationWindowOnlyPresents } from "../../presentation/panel-id.js";
+import { PresenterView } from "../../presentation/PresenterView.js";
+import { usePresentation } from "../../presentation/store.js";
+import { usePresentationController } from "./usePresentationController.js";
+import { usePresentationFiles } from "./usePresentationFiles.js";
+function ConnectedPresentation() {
+  return /* @__PURE__ */ jsx(ConnectedDocumentToolsProvider, { children: /* @__PURE__ */ jsx(PresentationWindow, {}) });
+}
+function PresentationWindow() {
+  const session = useArbiSessionStore();
+  const notify = usePresentation((s) => s.notify);
+  const presenting = usePresentation((s) => s.presenting);
+  const isOpen = useArbiSessionState((state) => isPanelOpen(state, PRESENTATION_PANEL));
+  const { user } = useArbiSession();
+  const userId = user?.external_id ?? null;
+  const shownFor = useRef(userId);
+  const { downloadFile } = usePresentationFiles();
+  const logoId = usePresentation((s) => s.theme.logo?.documentId ?? null);
+  const controller = usePresentationController(isOpen && !presenting);
+  useEffect(() => {
+    if (shownFor.current === userId) return;
+    shownFor.current = userId;
+    usePresentation.getState().reset();
+    session.closePanel(PRESENTATION_PANEL);
+  }, [userId, session]);
+  useEffect(() => {
+    if (!logoId) return;
+    let current = true;
+    downloadFile(logoId).then((image) => current && usePresentation.getState().setLogoImage(image)).catch(() => current && notify("The logo could not be read", "error"));
+    return () => {
+      current = false;
+    };
+  }, [logoId, downloadFile, notify]);
+  useEffect(() => {
+    if (!isOpen) usePresentation.getState().setPresenting(false);
+  }, [isOpen]);
+  const wasPresenting = useRef(presenting);
+  useEffect(() => {
+    if (wasPresenting.current && !presenting && isOpen && presentationWindowOnlyPresents()) {
+      session.closePanel(PRESENTATION_PANEL);
+    }
+    wasPresenting.current = presenting;
+  }, [presenting, isOpen, session]);
+  const onClose = useCallback(() => session.closePanel(PRESENTATION_PANEL), [session]);
+  return /* @__PURE__ */ jsx(
+    ConnectedPanelHost,
+    {
+      panelId: PRESENTATION_PANEL,
+      isOpen,
+      onClose,
+      title: "Presentation",
+      defaultMode: "popout",
+      defaultWidth: 960,
+      closeTestId: "presentation-panel-close",
+      children: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        !presenting && controller.dialogs,
+        /* @__PURE__ */ jsx(
+          PresenterView,
+          {
+            ...controller.editor,
+            actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+              controller.editor.actions,
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  size: "icon",
+                  variant: "ghost",
+                  className: "size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11",
+                  title: "Back into the app's viewer",
+                  "aria-label": "Back to the viewer",
+                  onClick: onClose,
+                  "data-testid": "presentation-pop-in",
+                  children: /* @__PURE__ */ jsx(PanelLeftClose, { className: "size-4" })
+                }
+              )
+            ] })
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  ConnectedPresentation
+};
+//# sourceMappingURL=ConnectedPresentation.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/connection/presentation/ConnectedPresentation.tsx"],
+  "sourcesContent": ["/**\n * The presentation's own window, mounted once by the app shell (the session's `PRESENTATION_PANEL`,\n * a pop-out). It presents: the slides alone, what is shared in a call or put full screen; or, when\n * the editor is popped out of the viewer's slides tab, it edits there, beside the documents its\n * clips come from. A window opened only to present closes when presenting ends.\n *\n * It also keeps what the presentation needs wherever it is edited: the theme's logo image, read\n * when the logo changes; and a clean slate when the session signs out or another user signs in\n * (the presentation holds decrypted files in memory).\n */\n\nimport { useCallback, useEffect, useRef } from 'react'\nimport { PanelLeftClose } from 'lucide-react'\nimport {\n  isPanelOpen,\n  useArbiSession,\n  useArbiSessionState,\n  useArbiSessionStore,\n} from '@arbidocs/react'\nimport { Button } from '@arbidocs/react/ui'\nimport { ConnectedPanelHost } from '../panels/ConnectedPanelHost'\nimport { ConnectedDocumentToolsProvider } from '../viewer/ConnectedDocumentToolsProvider'\nimport { PRESENTATION_PANEL, presentationWindowOnlyPresents } from '../../presentation/panel-id'\nimport { PresenterView } from '../../presentation/PresenterView'\nimport { usePresentation } from '../../presentation/store'\nimport { usePresentationController } from './usePresentationController'\nimport { usePresentationFiles } from './usePresentationFiles'\n\n/** The presentation's window, with the document tools it needs (sources, redactions). */\nexport function ConnectedPresentation() {\n  return (\n    <ConnectedDocumentToolsProvider>\n      <PresentationWindow />\n    </ConnectedDocumentToolsProvider>\n  )\n}\n\nfunction PresentationWindow() {\n  const session = useArbiSessionStore()\n  const notify = usePresentation((s) => s.notify)\n  const presenting = usePresentation((s) => s.presenting)\n  const isOpen = useArbiSessionState((state) => isPanelOpen(state, PRESENTATION_PANEL))\n  const { user } = useArbiSession()\n  const userId = user?.external_id ?? null\n  const shownFor = useRef(userId)\n  const { downloadFile } = usePresentationFiles()\n  const logoId = usePresentation((s) => s.theme.logo?.documentId ?? null)\n  const controller = usePresentationController(isOpen && !presenting)\n\n  useEffect(() => {\n    if (shownFor.current === userId) return\n    shownFor.current = userId\n    usePresentation.getState().reset()\n    session.closePanel(PRESENTATION_PANEL)\n  }, [userId, session])\n\n  // The theme's logo image, fetched whenever the logo changes (the theme keeps a reference only).\n  useEffect(() => {\n    if (!logoId) return\n    let current = true\n    downloadFile(logoId)\n      .then((image) => current && usePresentation.getState().setLogoImage(image))\n      .catch(() => current && notify('The logo could not be read', 'error'))\n    return () => {\n      current = false\n    }\n  }, [logoId, downloadFile, notify])\n\n  // A closed window is not presenting.\n  useEffect(() => {\n    if (!isOpen) usePresentation.getState().setPresenting(false)\n  }, [isOpen])\n\n  // Opened only to present: closed when presenting ends (Escape).\n  const wasPresenting = useRef(presenting)\n  useEffect(() => {\n    if (wasPresenting.current && !presenting && isOpen && presentationWindowOnlyPresents()) {\n      session.closePanel(PRESENTATION_PANEL)\n    }\n    wasPresenting.current = presenting\n  }, [presenting, isOpen, session])\n\n  const onClose = useCallback(() => session.closePanel(PRESENTATION_PANEL), [session])\n\n  return (\n    <ConnectedPanelHost\n      panelId={PRESENTATION_PANEL}\n      isOpen={isOpen}\n      onClose={onClose}\n      title=\"Presentation\"\n      defaultMode=\"popout\"\n      defaultWidth={960}\n      closeTestId=\"presentation-panel-close\"\n    >\n      {/* Inside the panel, so its dialogs open in its window. */}\n      {() => (\n        <>\n          {!presenting && controller.dialogs}\n          <PresenterView\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=\"Back into the app's viewer\"\n                  aria-label=\"Back to the viewer\"\n                  onClick={onClose}\n                  data-testid=\"presentation-pop-in\"\n                >\n                  <PanelLeftClose className=\"size-4\" />\n                </Button>\n              </>\n            }\n          />\n        </>\n      )}\n    </ConnectedPanelHost>\n  )\n}\n"],
+  "mappings": ";AAgCM,SAqEQ,UArER,KAqEQ,YArER;AArBN,SAAS,aAAa,WAAW,cAAc;AAC/C,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,0BAA0B;AACnC,SAAS,sCAAsC;AAC/C,SAAS,oBAAoB,sCAAsC;AACnE,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AAG9B,SAAS,wBAAwB;AACtC,SACE,oBAAC,kCACC,8BAAC,sBAAmB,GACtB;AAEJ;AAEA,SAAS,qBAAqB;AAC5B,QAAM,UAAU,oBAAoB;AACpC,QAAM,SAAS,gBAAgB,CAAC,MAAM,EAAE,MAAM;AAC9C,QAAM,aAAa,gBAAgB,CAAC,MAAM,EAAE,UAAU;AACtD,QAAM,SAAS,oBAAoB,CAAC,UAAU,YAAY,OAAO,kBAAkB,CAAC;AACpF,QAAM,EAAE,KAAK,IAAI,eAAe;AAChC,QAAM,SAAS,MAAM,eAAe;AACpC,QAAM,WAAW,OAAO,MAAM;AAC9B,QAAM,EAAE,aAAa,IAAI,qBAAqB;AAC9C,QAAM,SAAS,gBAAgB,CAAC,MAAM,EAAE,MAAM,MAAM,cAAc,IAAI;AACtE,QAAM,aAAa,0BAA0B,UAAU,CAAC,UAAU;AAElE,YAAU,MAAM;AACd,QAAI,SAAS,YAAY,OAAQ;AACjC,aAAS,UAAU;AACnB,oBAAgB,SAAS,EAAE,MAAM;AACjC,YAAQ,WAAW,kBAAkB;AAAA,EACvC,GAAG,CAAC,QAAQ,OAAO,CAAC;AAGpB,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,QAAI,UAAU;AACd,iBAAa,MAAM,EAChB,KAAK,CAAC,UAAU,WAAW,gBAAgB,SAAS,EAAE,aAAa,KAAK,CAAC,EACzE,MAAM,MAAM,WAAW,OAAO,8BAA8B,OAAO,CAAC;AACvE,WAAO,MAAM;AACX,gBAAU;AAAA,IACZ;AAAA,EACF,GAAG,CAAC,QAAQ,cAAc,MAAM,CAAC;AAGjC,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ,iBAAgB,SAAS,EAAE,cAAc,KAAK;AAAA,EAC7D,GAAG,CAAC,MAAM,CAAC;AAGX,QAAM,gBAAgB,OAAO,UAAU;AACvC,YAAU,MAAM;AACd,QAAI,cAAc,WAAW,CAAC,cAAc,UAAU,+BAA+B,GAAG;AACtF,cAAQ,WAAW,kBAAkB;AAAA,IACvC;AACA,kBAAc,UAAU;AAAA,EAC1B,GAAG,CAAC,YAAY,QAAQ,OAAO,CAAC;AAEhC,QAAM,UAAU,YAAY,MAAM,QAAQ,WAAW,kBAAkB,GAAG,CAAC,OAAO,CAAC;AAEnF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA,OAAM;AAAA,MACN,aAAY;AAAA,MACZ,cAAc;AAAA,MACd,aAAY;AAAA,MAGX,gBACC,iCACG;AAAA,SAAC,cAAc,WAAW;AAAA,QAC3B;AAAA,UAAC;AAAA;AAAA,YACE,GAAG,WAAW;AAAA,YACf,SACE,iCACG;AAAA,yBAAW,OAAO;AAAA,cACnB;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,SAAQ;AAAA,kBACR,WAAU;AAAA,kBACV,OAAM;AAAA,kBACN,cAAW;AAAA,kBACX,SAAS;AAAA,kBACT,eAAY;AAAA,kBAEZ,8BAAC,kBAAe,WAAU,UAAS;AAAA;AAAA,cACrC;AAAA,eACF;AAAA;AAAA,QAEJ;AAAA,SACF;AAAA;AAAA,EAEJ;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,20 @@
+/**
+ * A presentation's slides tab in the document viewer: the slides editor, on the presentation the
+ * viewer shows. Opening a saved presentation loads it (unless it is the one being edited); a new
+ * one (a presentation draft) takes the clips gathered so far. Clips gathered with no presentation
+ * open join the one opened next. Saving a draft makes it a document, and the tab moves to it.
+ *
+ * The editor can also move to the presentation's own window (Pop out), beside the documents its
+ * clips come from; the tab then says so. Present opens that window with the slides alone.
+ */
+export interface ConnectedSlidesTabProps {
+    /** The viewed document's id, or a presentation draft's (`draft-…`). */
+    documentId: string;
+    /** The version on screen, when an older one. */
+    version?: number;
+    /** The document's current version: a newer one than the one being edited is opened. */
+    currentVersion?: number;
+    /** A new presentation, not saved yet: its draft title. */
+    draftTitle?: string;
+}
+export declare function ConnectedSlidesTab({ documentId, version, currentVersion, draftTitle, }: ConnectedSlidesTabProps): import("react").JSX.Element;

package/dist/connection/presentation/ConnectedSlidesTab.js

@@ -0,0 +1,220 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ExternalLink, Loader2, PanelLeftClose, Presentation } from "lucide-react";
+import {
+  isPanelOpen,
+  registerDocumentTurnFlush,
+  useArbiSessionState,
+  useArbiSessionStore
+} from "@arbidocs/react";
+import { Button } from "@arbidocs/react/ui";
+import { useBlocksEnvironment } from "../../provider/environment.js";
+import {
+  PRESENTATION_PANEL,
+  openPresentation,
+  presentationWindowOnlyPresents
+} from "../../presentation/panel-id.js";
+import { SlidesEditor } from "../../presentation/SlidesEditor.js";
+import { hasUnsavedChanges, usePresentation } from "../../presentation/store.js";
+import { EmptyState } from "../../components/EmptyState.js";
+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 STALE = "This presentation was changed outside the editor: Save to draw its slides again.";
+const hasContent = () => hasUnsavedChanges(usePresentation.getState());
+function ConnectedSlidesTab({
+  documentId,
+  version,
+  currentVersion,
+  draftTitle
+}) {
+  const session = useArbiSessionStore();
+  const { confirm } = useBlocksEnvironment();
+  const { open, save } = usePresentationFiles();
+  const notify = usePresentation((s) => s.notify);
+  const boundTo = usePresentation((s) => s.boundTo);
+  const savedId = usePresentation((s) => s.savedId);
+  const [loading, setLoading] = useState(false);
+  const isDraft = draftTitle !== void 0;
+  const target = version ? `${documentId}@v${version}` : documentId;
+  const poppedOut = useArbiSessionState(
+    (state) => isPanelOpen(state, PRESENTATION_PANEL) && !presentationWindowOnlyPresents()
+  );
+  const controller = usePresentationController(!poppedOut);
+  const asked = useRef(null);
+  const [declined, setDeclined] = useState(false);
+  const [force, setForce] = useState(0);
+  useEffect(() => {
+    const state = usePresentation.getState();
+    if (state.boundTo === target || asked.current === `${target}#${force}`) return;
+    asked.current = `${target}#${force}`;
+    setDeclined(false);
+    void (async () => {
+      const gathered = state.boundTo === null ? state.clips : [];
+      if (state.boundTo !== null && hasContent() && !force) {
+        const ok = await confirm({
+          title: "Open presentation",
+          message: "Replace the presentation being edited? Save it first to keep its changes.",
+          kind: "confirm"
+        });
+        if (!ok) return setDeclined(true);
+      }
+      if (isDraft) {
+        if (state.boundTo !== null) state.reset();
+        usePresentation.getState().bind(target);
+        usePresentation.getState().setTitle(draftTitle || "Untitled presentation");
+        return;
+      }
+      setLoading(true);
+      try {
+        const { missing, stale, imported, changedOutside } = await open(documentId, version);
+        usePresentation.getState().bind(target);
+        if (gathered.length) usePresentation.getState().adoptClips(gathered);
+        if (stale) notify(STALE, "error");
+        if (imported) {
+          notify(
+            ["Opened from PowerPoint, ready to edit.", ...imported.notes].join(" \xB7 "),
+            "success"
+          );
+        }
+        if (changedOutside) {
+          notify(
+            `${changedOutside.length === 1 ? `Slide ${changedOutside[0]} was` : `Slides ${listOf(changedOutside)} were`} changed in PowerPoint: brought in as changed there.`,
+            "success"
+          );
+        }
+        if (missing) {
+          notify(
+            `${missing} clip${missing === 1 ? "" : "s"} could not be opened (moved, deleted or not shared with you)`,
+            "error"
+          );
+        }
+      } catch (error) {
+        notify(
+          error instanceof Error ? error.message : "The presentation could not be opened",
+          "error"
+        );
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [target, documentId, version, isDraft, force, open, confirm, notify]);
+  useEffect(() => {
+    if (isDraft && boundTo === target && draftTitle) usePresentation.getState().setTitle(draftTitle);
+  }, [isDraft, boundTo, target, draftTitle]);
+  const wasBound = useRef(false);
+  useEffect(() => {
+    if (boundTo === target) wasBound.current = true;
+    if (!wasBound.current || !savedId || boundTo !== savedId || savedId === target) return;
+    if (isDraft) session.clearDraftDocument(documentId);
+    editPresentation(session, { kind: "open", documentId: savedId });
+  }, [isDraft, savedId, boundTo, target, documentId, session]);
+  const heldVersion = usePresentation((s) => s.boundTo === target ? s.version : null);
+  const toldNewer = useRef(null);
+  useEffect(() => {
+    if (isDraft || version || !currentVersion || heldVersion === null) return;
+    if (currentVersion <= heldVersion || loading) return;
+    if (hasContent()) {
+      if (toldNewer.current === currentVersion) return;
+      toldNewer.current = currentVersion;
+      notify(
+        `A newer version (${currentVersion}) was saved while you edited. Save as\u2026 keeps yours; reopen the presentation to see it.`,
+        "error"
+      );
+      return;
+    }
+    setLoading(true);
+    void open(documentId).then(() => {
+      usePresentation.getState().bind(target);
+      notify(`Updated to version ${currentVersion}.`, "success");
+    }).catch(
+      (error) => notify(
+        error instanceof Error ? error.message : "The new version could not be opened",
+        "error"
+      )
+    ).finally(() => setLoading(false));
+  }, [currentVersion, heldVersion, isDraft, version, loading, open, documentId, target, notify]);
+  useEffect(() => {
+    if (isDraft || version || savedId !== documentId || boundTo !== target) return;
+    return registerDocumentTurnFlush(documentId, async () => {
+      const state = usePresentation.getState();
+      if (state.savedId === documentId && hasUnsavedChanges(state)) await save(state.title);
+    });
+  }, [isDraft, version, savedId, boundTo, documentId, target, save]);
+  const present = useCallback(() => {
+    openPresentation(session, { present: true });
+    usePresentation.getState().setPresenting(true);
+  }, [session]);
+  if (poppedOut) {
+    return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-6", "data-testid": "slides-popped-out", children: /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        icon: ExternalLink,
+        title: "Editing in its own window",
+        description: "The presentation is open in its own window, beside the documents you clip from.",
+        action: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: () => session.closePanel(PRESENTATION_PANEL),
+            children: [
+              /* @__PURE__ */ jsx(PanelLeftClose, { className: "size-4" }),
+              "Bring it back here"
+            ]
+          }
+        )
+      }
+    ) });
+  }
+  if (declined && boundTo !== target) {
+    return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-6", "data-testid": "slides-declined", children: /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        icon: Presentation,
+        title: "Another presentation is being edited",
+        description: "It has changes. Save it first, or open this one in its place.",
+        action: /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => setForce((n) => n + 1), children: "Open this one instead" })
+      }
+    ) });
+  }
+  if (loading || boundTo !== target) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center justify-center gap-2 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }),
+      "Opening the presentation\u2026"
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    controller.dialogs,
+    /* @__PURE__ */ jsx(
+      SlidesEditor,
+      {
+        ...controller.editor,
+        actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+          controller.editor.actions,
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              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),
+              "data-testid": "presentation-pop-out",
+              children: /* @__PURE__ */ jsx(ExternalLink, { className: "size-4" })
+            }
+          )
+        ] }),
+        onPresent: present
+      }
+    )
+  ] });
+}
+export {
+  ConnectedSlidesTab
+};
+//# sourceMappingURL=ConnectedSlidesTab.js.map

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

@@ -0,0 +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 {\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 { 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 })\n    usePresentation.getState().setPresenting(true)\n  }, [session])\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={() => openPresentation(session)}\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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",
+  "names": []
+}

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

@@ -0,0 +1,11 @@
+/**
+ * Crop an image clip: the app's image cropper over the whole source image, to choose the part the
+ * clip shows (and its shape). The image itself is untouched: only the clip's area changes, so it
+ * can be cropped again, wider or narrower, at any time.
+ */
+import type { Clip } from '../../presentation/model';
+export interface CropClipDialogProps {
+    clip: Clip | null;
+    onOpenChange: (open: boolean) => void;
+}
+export declare function CropClipDialog({ clip, onOpenChange }: CropClipDialogProps): import("react").JSX.Element;