@arbidocs/blocks 0.5.120 → 0.5.121

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;

package/dist/connection/presentation/CropClipDialog.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Crop } from "lucide-react";
+import { ImageCropper } from "@arbidocs/react";
+import { Button } from "@arbidocs/react/ui";
+import { ModalScaffold } from "../../settings/ModalScaffold.js";
+import { usePresentation } from "../../presentation/store.js";
+import { useObjectUrl } from "../../presentation/useObjectUrl.js";
+function CropClipDialog({ clip, onOpenChange }) {
+  const url = useObjectUrl(clip?.source ?? EMPTY);
+  const [natural, setNatural] = useState(null);
+  const [area, setArea] = useState(null);
+  useEffect(() => {
+    setNatural(null);
+    setArea(null);
+    if (!clip) return;
+    let cancelled = false;
+    void createImageBitmap(clip.source).then((bitmap) => {
+      if (!cancelled) setNatural({ width: bitmap.width, height: bitmap.height });
+      bitmap.close();
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [clip]);
+  const original = natural ? natural.width / natural.height : 1;
+  const apply = () => {
+    if (!clip || !natural || !area || !area.width || !area.height) return;
+    const rect = {
+      x: Math.max(0, area.x / natural.width),
+      y: Math.max(0, area.y / natural.height),
+      w: Math.min(1, area.width / natural.width),
+      h: Math.min(1, area.height / natural.height)
+    };
+    usePresentation.getState().cropClip(clip.id, rect, area.width / area.height);
+    onOpenChange(false);
+  };
+  return /* @__PURE__ */ jsxs(
+    ModalScaffold,
+    {
+      open: !!clip,
+      onOpenChange,
+      title: "Crop",
+      description: "Choose the part of the image the clip shows.",
+      icon: /* @__PURE__ */ jsx(Crop, { className: "size-5" }),
+      size: "lg",
+      testId: "presentation-crop-dialog",
+      children: [
+        /* @__PURE__ */ jsx(ModalScaffold.Body, { children: url && natural && /* @__PURE__ */ jsx(
+          ImageCropper,
+          {
+            image: url,
+            aspect: original,
+            aspectOptions: [
+              { label: "Original", value: original },
+              { label: "16:9", value: 16 / 9 },
+              { label: "4:3", value: 4 / 3 },
+              { label: "1:1", value: 1 },
+              { label: "3:4", value: 3 / 4 }
+            ],
+            onCropComplete: (next) => setArea(next)
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(ModalScaffold.Footer, { children: [
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              onClick: apply,
+              disabled: !area,
+              "data-testid": "presentation-crop-apply",
+              children: "Crop"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+const EMPTY = new Blob();
+export {
+  CropClipDialog
+};
+//# sourceMappingURL=CropClipDialog.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/connection/presentation/CropClipDialog.tsx"],
+  "sourcesContent": ["/**\n * Crop an image clip: the app's image cropper over the whole source image, to choose the part the\n * clip shows (and its shape). The image itself is untouched: only the clip's area changes, so it\n * can be cropped again, wider or narrower, at any time.\n */\n\nimport { useEffect, useState } from 'react'\nimport { Crop } from 'lucide-react'\nimport { ImageCropper, type CropArea } from '@arbidocs/react'\nimport { Button } from '@arbidocs/react/ui'\nimport { ModalScaffold } from '../../settings/ModalScaffold'\nimport type { Clip } from '../../presentation/model'\nimport { usePresentation } from '../../presentation/store'\nimport { useObjectUrl } from '../../presentation/useObjectUrl'\n\nexport interface CropClipDialogProps {\n  clip: Clip | null\n  onOpenChange: (open: boolean) => void\n}\n\nexport function CropClipDialog({ clip, onOpenChange }: CropClipDialogProps) {\n  const url = useObjectUrl(clip?.source ?? EMPTY)\n  const [natural, setNatural] = useState<{ width: number; height: number } | null>(null)\n  const [area, setArea] = useState<CropArea | null>(null)\n\n  // The source's own size, to turn the cropper's pixels into fractions of the image.\n  useEffect(() => {\n    setNatural(null)\n    setArea(null)\n    if (!clip) return\n    let cancelled = false\n    void createImageBitmap(clip.source).then((bitmap) => {\n      if (!cancelled) setNatural({ width: bitmap.width, height: bitmap.height })\n      bitmap.close()\n    })\n    return () => {\n      cancelled = true\n    }\n  }, [clip])\n\n  const original = natural ? natural.width / natural.height : 1\n  const apply = () => {\n    if (!clip || !natural || !area || !area.width || !area.height) return\n    const rect = {\n      x: Math.max(0, area.x / natural.width),\n      y: Math.max(0, area.y / natural.height),\n      w: Math.min(1, area.width / natural.width),\n      h: Math.min(1, area.height / natural.height),\n    }\n    usePresentation.getState().cropClip(clip.id, rect, area.width / area.height)\n    onOpenChange(false)\n  }\n\n  return (\n    <ModalScaffold\n      open={!!clip}\n      onOpenChange={onOpenChange}\n      title=\"Crop\"\n      description=\"Choose the part of the image the clip shows.\"\n      icon={<Crop className=\"size-5\" />}\n      size=\"lg\"\n      testId=\"presentation-crop-dialog\"\n    >\n      <ModalScaffold.Body>\n        {url && natural && (\n          <ImageCropper\n            image={url}\n            aspect={original}\n            aspectOptions={[\n              { label: 'Original', value: original },\n              { label: '16:9', value: 16 / 9 },\n              { label: '4:3', value: 4 / 3 },\n              { label: '1:1', value: 1 },\n              { label: '3:4', value: 3 / 4 },\n            ]}\n            onCropComplete={(next) => setArea(next)}\n          />\n        )}\n      </ModalScaffold.Body>\n      <ModalScaffold.Footer>\n        <Button type=\"button\" variant=\"outline\" onClick={() => onOpenChange(false)}>\n          Cancel\n        </Button>\n        <Button\n          type=\"button\"\n          onClick={apply}\n          disabled={!area}\n          data-testid=\"presentation-crop-apply\"\n        >\n          Crop\n        </Button>\n      </ModalScaffold.Footer>\n    </ModalScaffold>\n  )\n}\n\nconst EMPTY = new Blob()\n"],
+  "mappings": ";AA2DY,cAoBN,YApBM;AArDZ,SAAS,WAAW,gBAAgB;AACpC,SAAS,YAAY;AACrB,SAAS,oBAAmC;AAC5C,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAOtB,SAAS,eAAe,EAAE,MAAM,aAAa,GAAwB;AAC1E,QAAM,MAAM,aAAa,MAAM,UAAU,KAAK;AAC9C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAmD,IAAI;AACrF,QAAM,CAAC,MAAM,OAAO,IAAI,SAA0B,IAAI;AAGtD,YAAU,MAAM;AACd,eAAW,IAAI;AACf,YAAQ,IAAI;AACZ,QAAI,CAAC,KAAM;AACX,QAAI,YAAY;AAChB,SAAK,kBAAkB,KAAK,MAAM,EAAE,KAAK,CAAC,WAAW;AACnD,UAAI,CAAC,UAAW,YAAW,EAAE,OAAO,OAAO,OAAO,QAAQ,OAAO,OAAO,CAAC;AACzE,aAAO,MAAM;AAAA,IACf,CAAC;AACD,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,WAAW,UAAU,QAAQ,QAAQ,QAAQ,SAAS;AAC5D,QAAM,QAAQ,MAAM;AAClB,QAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,SAAS,CAAC,KAAK,OAAQ;AAC/D,UAAM,OAAO;AAAA,MACX,GAAG,KAAK,IAAI,GAAG,KAAK,IAAI,QAAQ,KAAK;AAAA,MACrC,GAAG,KAAK,IAAI,GAAG,KAAK,IAAI,QAAQ,MAAM;AAAA,MACtC,GAAG,KAAK,IAAI,GAAG,KAAK,QAAQ,QAAQ,KAAK;AAAA,MACzC,GAAG,KAAK,IAAI,GAAG,KAAK,SAAS,QAAQ,MAAM;AAAA,IAC7C;AACA,oBAAgB,SAAS,EAAE,SAAS,KAAK,IAAI,MAAM,KAAK,QAAQ,KAAK,MAAM;AAC3E,iBAAa,KAAK;AAAA,EACpB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,CAAC,CAAC;AAAA,MACR;AAAA,MACA,OAAM;AAAA,MACN,aAAY;AAAA,MACZ,MAAM,oBAAC,QAAK,WAAU,UAAS;AAAA,MAC/B,MAAK;AAAA,MACL,QAAO;AAAA,MAEP;AAAA,4BAAC,cAAc,MAAd,EACE,iBAAO,WACN;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,eAAe;AAAA,cACb,EAAE,OAAO,YAAY,OAAO,SAAS;AAAA,cACrC,EAAE,OAAO,QAAQ,OAAO,KAAK,EAAE;AAAA,cAC/B,EAAE,OAAO,OAAO,OAAO,IAAI,EAAE;AAAA,cAC7B,EAAE,OAAO,OAAO,OAAO,EAAE;AAAA,cACzB,EAAE,OAAO,OAAO,OAAO,IAAI,EAAE;AAAA,YAC/B;AAAA,YACA,gBAAgB,CAAC,SAAS,QAAQ,IAAI;AAAA;AAAA,QACxC,GAEJ;AAAA,QACA,qBAAC,cAAc,QAAd,EACC;AAAA,8BAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,SAAS,MAAM,aAAa,KAAK,GAAG,oBAE5E;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,UAAU,CAAC;AAAA,cACX,eAAY;AAAA,cACb;AAAA;AAAA,UAED;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,QAAQ,IAAI,KAAK;",
+  "names": []
+}

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

@@ -0,0 +1,4 @@
+/** The dashed first tile of the clip tray: Generate image. */
+export declare function GenerateTile({ onClick }: {
+    onClick: () => void;
+}): import("react").JSX.Element;

package/dist/connection/presentation/GenerateTile.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Sparkles } from "lucide-react";
+function GenerateTile({ onClick }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      title: "Generate an image",
+      "aria-label": "Generate image",
+      className: "flex h-[72px] w-[72px] flex-col items-center justify-center gap-1 rounded-lg border border-dashed border-border text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      "data-testid": "presentation-generate-image",
+      children: [
+        /* @__PURE__ */ jsx(Sparkles, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium", children: "Generate" })
+      ]
+    }
+  );
+}
+export {
+  GenerateTile
+};
+//# sourceMappingURL=GenerateTile.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/connection/presentation/GenerateTile.tsx"],
+  "sourcesContent": ["import { Sparkles } from 'lucide-react'\n\n/** The dashed first tile of the clip tray: Generate image. */\nexport function GenerateTile({ onClick }: { onClick: () => void }) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      title=\"Generate an image\"\n      aria-label=\"Generate image\"\n      className=\"flex h-[72px] w-[72px] flex-col items-center justify-center gap-1 rounded-lg border border-dashed border-border text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n      data-testid=\"presentation-generate-image\"\n    >\n      <Sparkles className=\"size-4\" />\n      <span className=\"text-[10px] font-medium\">Generate</span>\n    </button>\n  )\n}\n"],
+  "mappings": ";AAKI,SAQE,KARF;AALJ,SAAS,gBAAgB;AAGlB,SAAS,aAAa,EAAE,QAAQ,GAA4B;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,OAAM;AAAA,MACN,cAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MAEZ;AAAA,4BAAC,YAAS,WAAU,UAAS;AAAA,QAC7B,oBAAC,UAAK,WAAU,2BAA0B,sBAAQ;AAAA;AAAA;AAAA,EACpD;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,8 @@
+import type { LabelColumn } from './useLabelColumns';
+/**
+ * "Label clips with" in the presentation's menu: no column, or one of the workspace's annotation
+ * columns (`useLabelColumns`), whose value leads each clip's label.
+ */
+export declare function LabelColumnMenu({ columns }: {
+    columns: LabelColumn[];
+}): import("react").JSX.Element | null;

package/dist/connection/presentation/LabelColumnMenu.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger
+} from "@arbidocs/react/ui";
+import { usePresentation } from "../../presentation/store.js";
+const NONE = "none";
+function LabelColumnMenu({ columns }) {
+  const labelColumn = usePresentation((s) => s.labelColumn);
+  const setLabelColumn = usePresentation((s) => s.setLabelColumn);
+  if (!columns.length) return null;
+  const chosen = columns.find((column) => column.id === labelColumn);
+  return /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+    /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { "data-testid": "presentation-label-column", children: [
+      "Label clips with",
+      /* @__PURE__ */ jsx("span", { className: "ml-auto pl-3 text-xs text-muted-foreground", children: chosen?.name ?? "None" })
+    ] }),
+    /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: /* @__PURE__ */ jsxs(
+      DropdownMenuRadioGroup,
+      {
+        value: chosen?.id ?? NONE,
+        onValueChange: (value) => setLabelColumn(value === NONE ? null : value),
+        children: [
+          /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: NONE, children: "No column" }),
+          columns.map((column) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: column.id, children: column.name }, column.id))
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  LabelColumnMenu
+};
+//# sourceMappingURL=LabelColumnMenu.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/connection/presentation/LabelColumnMenu.tsx"],
+  "sourcesContent": ["import {\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n} from '@arbidocs/react/ui'\nimport { usePresentation } from '../../presentation/store'\nimport type { LabelColumn } from './useLabelColumns'\n\nconst NONE = 'none'\n\n/**\n * \"Label clips with\" in the presentation's menu: no column, or one of the workspace's annotation\n * columns (`useLabelColumns`), whose value leads each clip's label.\n */\nexport function LabelColumnMenu({ columns }: { columns: LabelColumn[] }) {\n  const labelColumn = usePresentation((s) => s.labelColumn)\n  const setLabelColumn = usePresentation((s) => s.setLabelColumn)\n  if (!columns.length) return null\n  const chosen = columns.find((column) => column.id === labelColumn)\n  return (\n    <DropdownMenuSub>\n      <DropdownMenuSubTrigger data-testid=\"presentation-label-column\">\n        Label clips with\n        <span className=\"ml-auto pl-3 text-xs text-muted-foreground\">{chosen?.name ?? 'None'}</span>\n      </DropdownMenuSubTrigger>\n      <DropdownMenuSubContent>\n        <DropdownMenuRadioGroup\n          value={chosen?.id ?? NONE}\n          onValueChange={(value) => setLabelColumn(value === NONE ? null : value)}\n        >\n          <DropdownMenuRadioItem value={NONE}>No column</DropdownMenuRadioItem>\n          {columns.map((column) => (\n            <DropdownMenuRadioItem key={column.id} value={column.id}>\n              {column.name}\n            </DropdownMenuRadioItem>\n          ))}\n        </DropdownMenuRadioGroup>\n      </DropdownMenuSubContent>\n    </DropdownMenuSub>\n  )\n}\n"],
+  "mappings": ";AAuBM,SAEE,KAFF;AAvBN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAGhC,MAAM,OAAO;AAMN,SAAS,gBAAgB,EAAE,QAAQ,GAA+B;AACvE,QAAM,cAAc,gBAAgB,CAAC,MAAM,EAAE,WAAW;AACxD,QAAM,iBAAiB,gBAAgB,CAAC,MAAM,EAAE,cAAc;AAC9D,MAAI,CAAC,QAAQ,OAAQ,QAAO;AAC5B,QAAM,SAAS,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,WAAW;AACjE,SACE,qBAAC,mBACC;AAAA,yBAAC,0BAAuB,eAAY,6BAA4B;AAAA;AAAA,MAE9D,oBAAC,UAAK,WAAU,8CAA8C,kBAAQ,QAAQ,QAAO;AAAA,OACvF;AAAA,IACA,oBAAC,0BACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,QAAQ,MAAM;AAAA,QACrB,eAAe,CAAC,UAAU,eAAe,UAAU,OAAO,OAAO,KAAK;AAAA,QAEtE;AAAA,8BAAC,yBAAsB,OAAO,MAAM,uBAAS;AAAA,UAC5C,QAAQ,IAAI,CAAC,WACZ,oBAAC,yBAAsC,OAAO,OAAO,IAClD,iBAAO,QADkB,OAAO,EAEnC,CACD;AAAA;AAAA;AAAA,IACH,GACF;AAAA,KACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,39 @@
+/**
+ * The presentation's dialogs: the app's Generate image (to create or edit an image into the clips),
+ * save under a title (or as a template), open a saved one (or start from a template), choose the
+ * theme's logo.
+ */
+interface DialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+/**
+ * Generate image, from the presentation: the app's own Generate image dialog (the workflow's form),
+ * opened straight on its form, with `referenceId` as its source image when editing one. Its run
+ * adds the image to the clips instead of opening a chat.
+ */
+export declare function GenerateImageDialog({ open, onOpenChange, referenceId, }: DialogProps & {
+    referenceId?: string | null;
+}): import("react").JSX.Element | null;
+/** Save the presentation under a title (in the workspace's Presentations folder). */
+/** How the presentation is saved: again, as a new copy, as a template, or exported as a PDF. */
+export type SaveMode = 'save' | 'saveAs' | 'export' | 'template';
+/** Save under a name you type, in the workspace's Presentations folder. */
+export declare function SavePresentationDialog({ open, onOpenChange, mode, }: DialogProps & {
+    mode?: SaveMode;
+}): import("react").JSX.Element;
+/**
+ * Open a presentation saved in this workspace, in place of this one; or (`templates`) start a new
+ * one from a template.
+ */
+export declare function OpenPresentationDialog({ open, onOpenChange, onOpened, templates, }: DialogProps & {
+    /**
+     * Show the chosen presentation (the viewer's slides tab opens its document, and loads it);
+     * after a template, `null`: a new presentation, its look and slides already loaded.
+     */
+    onOpened: (documentId: string | null) => void;
+    templates?: boolean;
+}): import("react").JSX.Element;
+/** Design › Logo: one of the workspace's images, in the footer of every slide. */
+export declare function ChooseLogoDialog({ open, onOpenChange }: DialogProps): import("react").JSX.Element;
+export {};