@arbidocs/blocks 0.5.119 → 0.5.121

package/dist/presentation/stage-videos.d.ts

@@ -0,0 +1,5 @@
+/** The presented stage's videos, which the presenter plays and pauses with Space. */
+/** Marks the stage's videos, for the presenter's Space key. */
+export declare const STAGE_VIDEO_ATTRIBUTE = "data-presentation-video";
+/** Play the presented stage's videos, or pause them if any is playing. */
+export declare function toggleStageVideos(doc: Document): boolean;

package/dist/presentation/stage-videos.js

@@ -0,0 +1,19 @@
+"use client";
+const STAGE_VIDEO_ATTRIBUTE = "data-presentation-video";
+function toggleStageVideos(doc) {
+  const videos = Array.from(
+    doc.querySelectorAll(`video[${STAGE_VIDEO_ATTRIBUTE}]`)
+  );
+  if (!videos.length) return false;
+  const playing = videos.some((video) => !video.paused);
+  for (const video of videos) {
+    if (playing) video.pause();
+    else void video.play().catch(() => void 0);
+  }
+  return true;
+}
+export {
+  STAGE_VIDEO_ATTRIBUTE,
+  toggleStageVideos
+};
+//# sourceMappingURL=stage-videos.js.map

package/dist/presentation/stage-videos.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/stage-videos.ts"],
+  "sourcesContent": ["/** The presented stage's videos, which the presenter plays and pauses with Space. */\n\n/** Marks the stage's videos, for the presenter's Space key. */\nexport const STAGE_VIDEO_ATTRIBUTE = 'data-presentation-video'\n\n/** Play the presented stage's videos, or pause them if any is playing. */\nexport function toggleStageVideos(doc: Document): boolean {\n  const videos = Array.from(\n    doc.querySelectorAll<HTMLVideoElement>(`video[${STAGE_VIDEO_ATTRIBUTE}]`)\n  )\n  if (!videos.length) return false\n  const playing = videos.some((video) => !video.paused)\n  for (const video of videos) {\n    if (playing) video.pause()\n    else void video.play().catch(() => undefined)\n  }\n  return true\n}\n"],
+  "mappings": ";AAGO,MAAM,wBAAwB;AAG9B,SAAS,kBAAkB,KAAwB;AACxD,QAAM,SAAS,MAAM;AAAA,IACnB,IAAI,iBAAmC,SAAS,qBAAqB,GAAG;AAAA,EAC1E;AACA,MAAI,CAAC,OAAO,OAAQ,QAAO;AAC3B,QAAM,UAAU,OAAO,KAAK,CAAC,UAAU,CAAC,MAAM,MAAM;AACpD,aAAW,SAAS,QAAQ;AAC1B,QAAI,QAAS,OAAM,MAAM;AAAA,QACpB,MAAK,MAAM,KAAK,EAAE,MAAM,MAAM,MAAS;AAAA,EAC9C;AACA,SAAO;AACT;",
+  "names": []
+}

package/dist/presentation/store.d.ts

@@ -0,0 +1,203 @@
+/**
+ * The presentation of this session: the clips taken, the slides they are arranged on, the slide on
+ * the stage, whether the stage is blanked and whether the presentation window presents (shows only
+ * the stage, for sharing) or edits. Clips taken in the app's viewer land in it at once.
+ *
+ * Kept in memory only: a clip holds the decrypted PDF it is drawn from, so nothing is written to
+ * storage, and everything is cleared when the session signs out (`ConnectedPresentation`).
+ */
+import { type Alignment, type Clip, type Rect, type Reserve, type Frame, type Slide, type SlideLayout } from './model';
+import { type Theme } from './theme';
+import { type SlideBackground, type SlideBox } from './boxes';
+import type { SavedBox } from './saved-boxes';
+/** A slide holds a handful of clips: more would be too small to read on a shared screen. */
+export declare const MAX_ITEMS_PER_SLIDE = 6;
+export type NewClip = Omit<Clip, 'id' | 'caption'> & {
+    caption?: string;
+};
+export type FrameCommand = 'fullWidth' | 'fullHeight' | 'fit';
+interface PresentationState {
+    clips: Clip[];
+    slides: Slide[];
+    /** Index of the slide on the stage. */
+    current: number;
+    /** The stage shows nothing (black) while true. */
+    blank: boolean;
+    captions: boolean;
+    /** One look for every slide: background, typeface, accent, logo. Saved. */
+    theme: Theme;
+    /** The theme's logo image (this session only; fetched by the host from `theme.logo`). */
+    logoImage: Blob | null;
+    /**
+     * The annotation column (a tag's id) whose value for each clip's document leads its label: an
+     * Exhibit column's "R-100". Saved with the presentation.
+     */
+    labelColumn: string | null;
+    /** Each clip document's value in `labelColumn`, kept current by the host (not saved). */
+    columnValues: Readonly<Record<string, string>>;
+    /** Present mode: the presentation window shows only the stage (what is shared). */
+    presenting: boolean;
+    /** The presentation's name (its file's, once saved). */
+    title: string;
+    /** The document it is saved as, once saved: saving again adds a version to it. */
+    savedId: string | null;
+    /** Which version of that document this is (as opened or saved), when known. */
+    version: number | null;
+    /**
+     * The document (or draft) this presentation is edited as, in the viewer: its slides tab shows
+     * it. Null: clips gathered with no presentation open yet (a new one takes them).
+     */
+    boundTo: string | null;
+    /** The presentation as last opened or saved (serialised), to tell unsaved changes; null: never. */
+    clean: string | null;
+    /**
+     * A message for the presentation window itself (saved, failed…): the app's notifications show in
+     * the app's window, out of sight behind a popped-out presentation.
+     */
+    notice: {
+        text: string;
+        kind: 'success' | 'error';
+        id: number;
+    } | null;
+    /** The clip being dragged from the tray, while it is (the drop targets light up). */
+    dragging: string | null;
+    /** Images embedded in the presentation (an imported deck's pictures), as data URLs, by key. */
+    media: Readonly<Record<string, string>>;
+}
+interface PresentationActions {
+    /** Add a clip; it is placed on the current slide while that has fewer than two. */
+    addClip(clip: NewClip): string;
+    removeClip(clipId: string): void;
+    setCaption(clipId: string, caption: string): void;
+    /** Put a clip on the current slide (at a point, when dropped there). */
+    place(clipId: string, at?: {
+        x: number;
+        y: number;
+    }): void;
+    unplace(clipId: string): void;
+    /** Move or resize a clip by hand: the slide stops arranging itself. */
+    setFrame(clipId: string, frame: Frame): void;
+    applyFrame(clipId: string, command: FrameCommand): void;
+    /** Overlapping clips: this one on top of the others (later items are drawn over earlier ones). */
+    bringToFront(clipId: string): void;
+    /** Overlapping clips: this one under the others. */
+    sendToBack(clipId: string): void;
+    /**
+     * Scroll what a clip shows over its page, image or video by `dx, dy` (fractions of the source),
+     * its size kept and kept within the source: e.g. to show the lines above or below a passage.
+     */
+    panClip(clipId: string, dx: number, dy: number): void;
+    /**
+     * Zoom what a clip shows by `factor` (2: twice as close) about its centre: its area over the
+     * source shrinks or grows, its shape kept, never past the source's edges.
+     */
+    zoomClip(clipId: string, factor: number): void;
+    /** Zoom a clip to `percent` of how close it was cut (100: as cut), about its centre. */
+    setClipZoom(clipId: string, percent: number): void;
+    /** Align a clip on the stage (inside the margins and the slide's reserved room). */
+    align(clipId: string, alignment: Alignment): void;
+    /** Nudge a clip by `dx, dy` (stage fractions), kept on the stage, not snapped. */
+    nudge(clipId: string, dx: number, dy: number): void;
+    /** The current slide's caption (shown across its top; empty for none). */
+    /** A slide's title (default the current slide's). */
+    setSlideCaption(caption: string, index?: number): void;
+    /** The current slide's layout: it is arranged for it again. */
+    setSlideLayout(layout: SlideLayout, index?: number): void;
+    /** The current slide's text (its points, or subtitle). */
+    setSlidePoints(points: string, index?: number): void;
+    /** Change the theme; slides arranging themselves make room for a logo (or give it back). */
+    setTheme(change: Partial<Theme>): void;
+    setLogoImage(image: Blob | null): void;
+    /** Arrange the current slide automatically again. */
+    arrange(): void;
+    /** A new slide after the current one (by default with the current slide's layout). */
+    addSlide(layout?: SlideLayout, after?: number): void;
+    /** Remove a slide (default the current one); the last one left is emptied instead. */
+    removeSlide(index?: number): void;
+    /** A copy of a slide (its title, points and clips), right after it. */
+    duplicateSlide(index: number): void;
+    /** Move a slide to `to` (the others shift up or down). */
+    moveSlide(index: number, to: number): void;
+    goTo(index: number): void;
+    setBlank(blank: boolean): void;
+    setCaptions(captions: boolean): void;
+    setLabelColumn(tagId: string | null): void;
+    setColumnValues(values: Readonly<Record<string, string>>): void;
+    setPresenting(presenting: boolean): void;
+    setDragging(clipId: string | null): void;
+    setTitle(title: string): void;
+    notify(text: string, kind: 'success' | 'error'): void;
+    clearNotice(id: number): void;
+    /** Show another part of an image or video clip's source (a new crop): its area and shape. */
+    cropClip(clipId: string, rect: Rect, aspect: number): void;
+    /**
+     * A clip reshaped on the current slide (`reshapeFrame`): it shows `rect` of its source, in
+     * `frame`, at the same scale and zoom. Slides arranging themselves arrange around its new shape.
+     */
+    reshapeClip(clipId: string, frame: Frame, rect: Rect, aspect: number): void;
+    /** A text box or shape on a slide (default the current one), on top; resolves with its id. */
+    addBox(box: Omit<SlideBox, 'id'>, index?: number): string;
+    /** Change a box (wherever it is). */
+    updateBox(boxId: string, change: (box: SlideBox) => SlideBox): void;
+    /** Type a box's text (one paragraph per line, each keeping its style). */
+    setBoxText(boxId: string, text: string): void;
+    removeBox(boxId: string): void;
+    /** A box over the slide's clips and other boxes, or under them all. */
+    restackBox(boxId: string, to: 'front' | 'back'): void;
+    /** A slide's speaker notes (default the current slide's). */
+    setSlideNotes(notes: string, index?: number): void;
+    /** A slide's own background (none: the theme's). */
+    setSlideBackground(background: SlideBackground | undefined, index?: number): void;
+    /** Saved as this document (under this title), as its `version`. */
+    setSaved(savedId: string, title: string, version?: number | null): void;
+    /** Edited as this document or draft (see `boundTo`). */
+    bind(boundTo: string | null): void;
+    /** Clips gathered before (with no presentation open), added to the tray, not placed. */
+    adoptClips(clips: readonly Clip[]): void;
+    /** Replace the presentation with one opened from a file (its clips' sources fetched). */
+    load(opened: {
+        title: string;
+        /** The document it is saved as; null for a new one (from a template). */
+        savedId: string | null;
+        /** Its version, when known. */
+        version?: number | null;
+        /** Edited as (default `savedId`): an older file opened unsaved is still its own. */
+        boundTo?: string | null;
+        captions: boolean;
+        labelColumn?: string | null;
+        theme?: Theme;
+        clips: Omit<Clip, 'id'>[];
+        slides: {
+            caption: string;
+            auto: boolean;
+            layout?: SlideLayout;
+            points?: string;
+            items: {
+                clip: number;
+                frame: Frame;
+            }[];
+            boxes?: readonly SavedBox[];
+            background?: SlideBackground;
+            notes?: string;
+        }[];
+        media?: Readonly<Record<string, string>>;
+    }): void;
+    reset(): void;
+}
+export type PresentationStore = PresentationState & PresentationActions;
+/** What arranging a slide depends on besides its clips: labels shown, a logo in the footer. */
+type Look = Pick<PresentationState, 'captions' | 'theme'>;
+/**
+ * The room a slide keeps free of clips: its title and text (by its layout), each clip's label
+ * under it, the footer while a logo shows.
+ */
+export declare const reserveOf: (slide: Pick<Slide, "caption" | "layout">, look: Look) => Reserve;
+export declare const usePresentation: import("zustand").UseBoundStore<import("zustand").StoreApi<PresentationStore>>;
+/** The slide on the stage. */
+export declare const currentSlide: (state: PresentationState) => Slide | undefined;
+/**
+ * The presentation has changes not saved: since it was opened or saved; or, never saved, anything
+ * in it at all (a clip, a title, a point).
+ */
+export declare function hasUnsavedChanges(state: PresentationState): boolean;
+export {};

package/dist/presentation/store.js

@@ -0,0 +1,429 @@
+"use client";
+import { create } from "zustand";
+import { releasePdfRegionSource } from "@arbidocs/react/viewers";
+import {
+  alignFrame,
+  autoLayout,
+  defaultCaption,
+  dropFrame,
+  fitFrame,
+  fullHeightFrame,
+  fullWidthFrame,
+  moveFrame
+} from "./model.js";
+import { slideGeometry } from "./slide-layout.js";
+import { DEFAULT_THEME } from "./theme.js";
+import { serializePresentation } from "./persistence.js";
+import { nextBoxId, withText } from "./boxes.js";
+const MIN_CLIP_AREA = 0.02;
+const MAX_ITEMS_PER_SLIDE = 6;
+const AUTO_PLACE_BELOW = 2;
+let sequence = 0;
+const nextId = (kind) => `${kind}-${Date.now().toString(36)}-${++sequence}`;
+const emptySlide = (layout = "clips") => ({
+  id: nextId("slide"),
+  items: [],
+  auto: true,
+  caption: "",
+  layout,
+  points: "",
+  boxes: []
+});
+const initialState = () => ({
+  clips: [],
+  slides: [emptySlide()],
+  current: 0,
+  blank: false,
+  captions: true,
+  theme: DEFAULT_THEME,
+  logoImage: null,
+  labelColumn: null,
+  columnValues: {},
+  presenting: false,
+  dragging: null,
+  notice: null,
+  title: "Untitled presentation",
+  savedId: null,
+  version: null,
+  boundTo: null,
+  clean: null,
+  media: {}
+});
+function arranged(slide, clips, look) {
+  const aspects = slide.items.map((item) => aspectOf(clips, item.clipId));
+  const frames = autoLayout(aspects, reserveOf(slide, look));
+  return {
+    ...slide,
+    auto: true,
+    items: slide.items.map((item, i) => ({ ...item, frame: frames[i] }))
+  };
+}
+const reserveOf = (slide, look) => slideGeometry(slide, { labels: look.captions, logo: look.theme.logo?.corner ?? null }).reserve;
+function aspectOf(clips, clipId) {
+  return clips.find((clip) => clip.id === clipId)?.aspect ?? 1;
+}
+const usePresentation = create()((set, get) => {
+  const updateSlide = (change, at) => set((state) => {
+    const index = at ?? state.current;
+    const slide = state.slides[index];
+    if (!slide) return state;
+    const next = change(slide, state.clips);
+    if (next === slide) return state;
+    const slides = state.slides.slice();
+    slides[index] = next.auto ? arranged(next, state.clips, state) : next;
+    return { slides };
+  });
+  const updateBoxes = (boxId, change) => set((state) => {
+    const index = state.slides.findIndex((slide2) => slide2.boxes.some((box) => box.id === boxId));
+    if (index < 0) return state;
+    const slide = state.slides[index];
+    const slides = state.slides.slice();
+    slides[index] = {
+      ...slide,
+      boxes: change(
+        slide.boxes,
+        slide.boxes.findIndex((box) => box.id === boxId)
+      )
+    };
+    return { slides };
+  });
+  const restack = (clipId, to) => set((state) => {
+    const slide = state.slides[state.current];
+    const item = slide?.items.find((entry) => entry.clipId === clipId);
+    if (!slide || !item) return state;
+    const rest = slide.items.filter((entry) => entry !== item);
+    const items = to === "front" ? [...rest, item] : [item, ...rest];
+    if (items.every((entry, i) => entry === slide.items[i])) return state;
+    const slides = state.slides.slice();
+    slides[state.current] = { ...slide, items };
+    return { slides };
+  });
+  return {
+    ...initialState(),
+    addClip(clip) {
+      const id = nextId("clip");
+      const full = {
+        ...clip,
+        id,
+        caption: clip.caption ?? defaultCaption(clip.fileName, clip.page),
+        zoomBase: clip.zoomBase ?? clip.rect.w
+      };
+      set((state) => ({ clips: [...state.clips, full] }));
+      const slide = get().slides[get().current];
+      if (slide && slide.items.length < AUTO_PLACE_BELOW) get().place(id);
+      return id;
+    },
+    removeClip(clipId) {
+      const { clips, slides } = get();
+      const removed = clips.find((clip) => clip.id === clipId);
+      if (!removed) return;
+      const rest = clips.filter((clip) => clip.id !== clipId);
+      set({
+        clips: rest,
+        slides: slides.map((slide) => {
+          if (!slide.items.some((item) => item.clipId === clipId)) return slide;
+          const next = { ...slide, items: slide.items.filter((item) => item.clipId !== clipId) };
+          return next.auto ? arranged(next, rest, get()) : next;
+        })
+      });
+      if (!rest.some((clip) => clip.source === removed.source))
+        releasePdfRegionSource(removed.source);
+    },
+    setCaption: (clipId, caption) => set((state) => ({
+      clips: state.clips.map((clip) => clip.id === clipId ? { ...clip, caption } : clip)
+    })),
+    place: (clipId, at) => updateSlide((slide, clips) => {
+      if (!clips.some((clip) => clip.id === clipId)) return slide;
+      const others = slide.items.filter((item) => item.clipId !== clipId);
+      if (!at && others.length < slide.items.length) return slide;
+      if (others.length >= MAX_ITEMS_PER_SLIDE) return slide;
+      const aspect = aspectOf(clips, clipId);
+      const frame = slide.auto ? fitFrame(aspect) : dropFrame(aspect, at ?? { x: 0.5, y: 0.5 });
+      return { ...slide, items: [...others, { clipId, frame }] };
+    }),
+    unplace: (clipId) => updateSlide(
+      (slide) => slide.items.some((item) => item.clipId === clipId) ? { ...slide, items: slide.items.filter((item) => item.clipId !== clipId) } : slide
+    ),
+    setFrame: (clipId, frame) => updateSlide((slide) => ({
+      ...slide,
+      auto: false,
+      items: slide.items.map((item) => item.clipId === clipId ? { ...item, frame } : item)
+    })),
+    applyFrame(clipId, command) {
+      const slide = get().slides[get().current];
+      const item = slide?.items.find((entry) => entry.clipId === clipId);
+      if (!item) return;
+      const aspect = aspectOf(get().clips, clipId);
+      const reserve = reserveOf(slide, get());
+      const frame = command === "fullWidth" ? fullWidthFrame(item.frame, aspect, reserve) : command === "fullHeight" ? fullHeightFrame(item.frame, aspect, reserve) : fitFrame(aspect, reserve);
+      get().setFrame(clipId, frame);
+      get().bringToFront(clipId);
+    },
+    bringToFront: (clipId) => restack(clipId, "front"),
+    sendToBack: (clipId) => restack(clipId, "back"),
+    panClip: (clipId, dx, dy) => set((state) => {
+      const clip = state.clips.find((entry) => entry.id === clipId);
+      if (!clip) return state;
+      const { rect } = clip;
+      const x = Math.min(Math.max(rect.x + dx, 0), 1 - rect.w);
+      const y = Math.min(Math.max(rect.y + dy, 0), 1 - rect.h);
+      if (x === rect.x && y === rect.y) return state;
+      return {
+        clips: state.clips.map(
+          (entry) => entry === clip ? { ...clip, rect: { ...rect, x, y } } : entry
+        )
+      };
+    }),
+    zoomClip: (clipId, factor) => set((state) => {
+      const clip = state.clips.find((entry) => entry.id === clipId);
+      if (!clip || !(factor > 0)) return state;
+      const { rect } = clip;
+      const largest = Math.min(1 / rect.w, 1 / rect.h);
+      const smallest = Math.max(MIN_CLIP_AREA / rect.w, MIN_CLIP_AREA / rect.h);
+      const scale = Math.min(Math.max(1 / factor, smallest), largest);
+      if (scale === 1) return state;
+      const w = rect.w * scale;
+      const h = rect.h * scale;
+      const x = Math.min(Math.max(rect.x + (rect.w - w) / 2, 0), 1 - w);
+      const y = Math.min(Math.max(rect.y + (rect.h - h) / 2, 0), 1 - h);
+      return {
+        clips: state.clips.map(
+          (entry) => entry === clip ? { ...clip, rect: { x, y, w, h } } : entry
+        )
+      };
+    }),
+    setClipZoom(clipId, percent) {
+      const clip = get().clips.find((entry) => entry.id === clipId);
+      if (!clip || !(percent > 0)) return;
+      const width = (clip.zoomBase ?? clip.rect.w) / (percent / 100);
+      get().zoomClip(clipId, clip.rect.w / width);
+    },
+    align(clipId, alignment) {
+      const slide = get().slides[get().current];
+      const item = slide?.items.find((entry) => entry.clipId === clipId);
+      if (!slide || !item) return;
+      const aspect = aspectOf(get().clips, clipId);
+      get().setFrame(clipId, alignFrame(item.frame, aspect, alignment, reserveOf(slide, get())));
+    },
+    nudge(clipId, dx, dy) {
+      const slide = get().slides[get().current];
+      const item = slide?.items.find((entry) => entry.clipId === clipId);
+      if (!item) return;
+      const aspect = aspectOf(get().clips, clipId);
+      get().setFrame(clipId, moveFrame(item.frame, aspect, dx, dy, [], true).frame);
+    },
+    // An auto slide makes (or gives back) the caption's room; one arranged by hand keeps its places.
+    // A blank slide's title is its title box's text.
+    setSlideCaption: (caption, index) => updateSlide(
+      (slide) => ({
+        ...slide,
+        caption,
+        boxes: slide.boxes.map((box) => box.role === "title" ? withText(box, caption) : box)
+      }),
+      index
+    ),
+    setSlideLayout: (layout, index) => updateSlide((slide) => ({ ...slide, layout, auto: true }), index),
+    setSlidePoints: (points, index) => updateSlide((slide) => ({ ...slide, points }), index),
+    setTheme: (change) => set((state) => {
+      const theme = { ...state.theme, ...change };
+      const logoMoved = (theme.logo?.corner ?? null) !== (state.theme.logo?.corner ?? null);
+      return {
+        theme,
+        ...theme.logo?.documentId !== state.theme.logo?.documentId ? { logoImage: null } : {},
+        slides: logoMoved ? state.slides.map(
+          (slide) => slide.auto ? arranged(slide, state.clips, { ...state, theme }) : slide
+        ) : state.slides
+      };
+    }),
+    setLogoImage: (logoImage) => set({ logoImage }),
+    arrange: () => updateSlide((slide) => ({ ...slide, auto: true })),
+    addSlide: (layout, after) => set((state) => {
+      const at = (after ?? state.current) + 1;
+      const slides = state.slides.slice();
+      const before = state.slides[at - 1];
+      const slide = emptySlide(layout ?? before?.layout ?? "clips");
+      slides.splice(
+        at,
+        0,
+        before?.background ? { ...slide, background: before.background } : slide
+      );
+      return { slides, current: at };
+    }),
+    removeSlide: (index) => set((state) => {
+      const target = index ?? state.current;
+      if (state.slides.length <= 1) return { slides: [emptySlide()], current: 0 };
+      const slides = state.slides.filter((_, i) => i !== target);
+      const current = state.current > target ? state.current - 1 : state.current;
+      return { slides, current: Math.min(current, slides.length - 1) };
+    }),
+    duplicateSlide: (index) => set((state) => {
+      const slide = state.slides[index];
+      if (!slide) return state;
+      const slides = state.slides.slice();
+      slides.splice(index + 1, 0, {
+        ...slide,
+        id: nextId("slide"),
+        items: slide.items.map((item) => ({ ...item, frame: { ...item.frame } })),
+        boxes: slide.boxes.map((box) => ({ ...box, id: nextBoxId() }))
+      });
+      return { slides, current: index + 1 };
+    }),
+    moveSlide: (index, to) => set((state) => {
+      if (to < 0 || to >= state.slides.length || index === to || !state.slides[index]) {
+        return state;
+      }
+      const slides = state.slides.slice();
+      const [slide] = slides.splice(index, 1);
+      slides.splice(to, 0, slide);
+      return { slides, current: to };
+    }),
+    goTo: (index) => set(
+      (state) => index < 0 || index >= state.slides.length || index === state.current ? state : { current: index }
+    ),
+    setBlank: (blank) => set({ blank }),
+    // Slides arranged automatically make (or give back) the captions' room.
+    setCaptions: (captions) => set((state) => ({
+      captions,
+      slides: state.slides.map(
+        (slide) => slide.auto ? arranged(slide, state.clips, { ...state, captions }) : slide
+      )
+    })),
+    setLabelColumn: (labelColumn) => set({ labelColumn }),
+    setColumnValues: (columnValues) => set({ columnValues }),
+    setPresenting: (presenting) => set({ presenting }),
+    setDragging: (dragging) => set({ dragging }),
+    setTitle: (title) => set({ title }),
+    notify: (text, kind) => set({ notice: { text, kind, id: ++sequence } }),
+    clearNotice: (id) => set((state) => state.notice?.id === id ? { notice: null } : state),
+    cropClip: (clipId, rect, aspect) => set((state) => {
+      const clips = state.clips.map(
+        (clip) => clip.id === clipId ? { ...clip, rect, aspect } : clip
+      );
+      return {
+        clips,
+        // Its shape changed: slides arranged automatically arrange again around it.
+        slides: state.slides.map(
+          (slide) => slide.auto && slide.items.some((item) => item.clipId === clipId) ? arranged(slide, clips, state) : slide
+        )
+      };
+    }),
+    reshapeClip: (clipId, frame, rect, aspect) => set((state) => {
+      const clip = state.clips.find((entry) => entry.id === clipId);
+      if (!clip) return state;
+      const zoomBase = (clip.zoomBase ?? clip.rect.w) * rect.w / clip.rect.w;
+      const clips = state.clips.map(
+        (entry) => entry === clip ? { ...clip, rect, aspect, zoomBase } : entry
+      );
+      return {
+        clips,
+        slides: state.slides.map((slide, index) => {
+          if (index === state.current) {
+            return {
+              ...slide,
+              auto: false,
+              items: slide.items.map(
+                (item) => item.clipId === clipId ? { ...item, frame } : item
+              )
+            };
+          }
+          return slide.auto && slide.items.some((item) => item.clipId === clipId) ? arranged(slide, clips, state) : slide;
+        })
+      };
+    }),
+    addBox(box, index) {
+      const id = nextBoxId();
+      updateSlide((slide) => ({ ...slide, boxes: [...slide.boxes, { ...box, id }] }), index);
+      return id;
+    },
+    updateBox: (boxId, change) => updateBoxes(boxId, (boxes, at) => {
+      const next = boxes.slice();
+      next[at] = change(boxes[at]);
+      return next;
+    }),
+    setBoxText(boxId, text) {
+      get().updateBox(boxId, (box) => withText(box, text));
+      set((state) => ({
+        slides: state.slides.map(
+          (slide) => slide.boxes.some((box) => box.id === boxId && box.role === "title") ? { ...slide, caption: text.replace(/\s*\n\s*/g, " ").trim() } : slide
+        )
+      }));
+    },
+    removeBox: (boxId) => updateBoxes(boxId, (boxes, at) => boxes.filter((_, i) => i !== at)),
+    restackBox: (boxId, to) => updateBoxes(boxId, (boxes, at) => {
+      const box = { ...boxes[at], front: to === "front" };
+      const rest = boxes.filter((_, i) => i !== at);
+      return to === "front" ? [...rest, box] : [box, ...rest];
+    }),
+    setSlideNotes: (notes, index) => updateSlide((slide) => ({ ...slide, notes }), index),
+    setSlideBackground: (background, index) => updateSlide((slide) => {
+      const { background: _old, ...rest } = slide;
+      void _old;
+      return background ? { ...rest, background } : rest;
+    }, index),
+    setSaved: (savedId, title, version = null) => {
+      set({ savedId, title, boundTo: savedId, version });
+      set({ clean: snapshotOf(get()) });
+    },
+    bind: (boundTo) => set({ boundTo }),
+    adoptClips: (adopted) => set((state) => ({
+      clips: [
+        ...state.clips,
+        ...adopted.filter((clip) => !state.clips.some((entry) => entry.id === clip.id))
+      ]
+    })),
+    load(opened) {
+      get().reset();
+      const clips = opened.clips.map((clip) => ({ ...clip, id: nextId("clip") }));
+      const slides = opened.slides.map((slide) => ({
+        id: nextId("slide"),
+        caption: slide.caption,
+        auto: slide.auto,
+        layout: slide.layout ?? "clips",
+        points: slide.points ?? "",
+        // Items whose clip could not be opened are left out.
+        items: slide.items.filter((item) => clips[item.clip]).map((item) => ({ clipId: clips[item.clip].id, frame: item.frame })),
+        boxes: (slide.boxes ?? []).map((box) => ({ ...box, id: nextBoxId() })),
+        ...slide.background ? { background: slide.background } : {},
+        ...slide.notes ? { notes: slide.notes } : {}
+      }));
+      set({
+        title: opened.title,
+        savedId: opened.savedId,
+        version: opened.version ?? null,
+        boundTo: opened.boundTo ?? opened.savedId,
+        captions: opened.captions,
+        labelColumn: opened.labelColumn ?? null,
+        theme: opened.theme ?? DEFAULT_THEME,
+        clips,
+        slides: slides.length ? slides : [emptySlide()],
+        current: 0,
+        media: opened.media ?? {}
+      });
+      set({ clean: opened.savedId ? snapshotOf(get()) : null });
+    },
+    reset() {
+      for (const source of new Set(get().clips.map((clip) => clip.source))) {
+        releasePdfRegionSource(source);
+      }
+      set(initialState());
+    }
+  };
+});
+const currentSlide = (state) => state.slides[state.current];
+function snapshotOf(state) {
+  return JSON.stringify(serializePresentation({ ...state, media: void 0 }));
+}
+function hasUnsavedChanges(state) {
+  if (state.clean !== null) return snapshotOf(state) !== state.clean;
+  return state.clips.length > 0 || state.slides.some(
+    (slide) => slide.items.length || slide.boxes.length || slide.caption.trim() || slide.points.trim()
+  );
+}
+export {
+  MAX_ITEMS_PER_SLIDE,
+  currentSlide,
+  hasUnsavedChanges,
+  reserveOf,
+  usePresentation
+};
+//# sourceMappingURL=store.js.map