@arbidocs/blocks 0.5.119 → 0.5.121

package/dist/chunk-XTR26TNE.cjs

@@ -0,0 +1,1358 @@
+"use client";
+'use strict';
+
+var chunkVJ5ZLRBD_cjs = require('./chunk-VJ5ZLRBD.cjs');
+var zustand = require('zustand');
+var viewers = require('@arbidocs/react/viewers');
+
+// src/presentation/model.ts
+var SLIDE_LAYOUTS = [
+  "clips",
+  "points",
+  "compare",
+  "title",
+  "section",
+  "free"
+];
+var STAGE_ASPECT = 16 / 9;
+var STAGE_MARGIN = 0.03;
+var STAGE_GAP = 0.02;
+var MIN_FRAME_WIDTH = 0.05;
+var SNAP_DISTANCE = 0.012;
+var CAPTION_SPACE = 0.06;
+var NO_RESERVE = { top: 0, below: 0 };
+function frameHeight(frame, aspect) {
+  return frame.w * STAGE_ASPECT / aspect;
+}
+function containWidth(aspect, width, height) {
+  return Math.max(0, Math.min(width, height * aspect / STAGE_ASPECT));
+}
+function autoLayout(aspects, reserve = NO_RESERVE) {
+  const n = aspects.length;
+  if (n === 0) return [];
+  const { top, below, right = 0, bottom = 0, columns, inset = 0 } = reserve;
+  const left = STAGE_MARGIN + inset;
+  const innerW = 1 - 2 * left - right;
+  const innerH = 1 - 2 * STAGE_MARGIN - top - bottom;
+  let best = null;
+  const fixed = columns ? Math.min(columns, n) : 0;
+  for (let cols = fixed || 1; cols <= (fixed || n); cols++) {
+    const rows = Math.ceil(n / cols);
+    const cellW = (innerW - (cols - 1) * STAGE_GAP) / cols;
+    const cellH = (innerH - (rows - 1) * STAGE_GAP) / rows;
+    if (cellW <= 0 || cellH <= below) continue;
+    const frames = [];
+    let area = 0;
+    for (let i = 0; i < n; i++) {
+      const row = Math.floor(i / cols);
+      const inRow = row === rows - 1 ? n - row * cols : cols;
+      const col = i - row * cols;
+      const rowStart = left + (cols - inRow) * (cellW + STAGE_GAP) / 2;
+      const w = containWidth(aspects[i], cellW, cellH - below);
+      const h = frameHeight({ w }, aspects[i]);
+      frames.push({
+        x: rowStart + col * (cellW + STAGE_GAP) + (cellW - w) / 2,
+        y: STAGE_MARGIN + top + row * (cellH + STAGE_GAP) + (cellH - h - below) / 2,
+        w
+      });
+      area += w * h;
+    }
+    if (!best || area > best.area + 1e-9) best = { frames, area };
+  }
+  return best?.frames ?? [];
+}
+function fitFrame(aspect, reserve = NO_RESERVE) {
+  return autoLayout([aspect], reserve)[0];
+}
+function fullWidthFrame(frame, aspect, reserve = NO_RESERVE) {
+  const { top, below, right = 0, bottom = 0, inset = 0 } = reserve;
+  const w = 1 - 2 * (STAGE_MARGIN + inset) - right;
+  const h = frameHeight({ w }, aspect);
+  if (h + below > 1 - 2 * STAGE_MARGIN - top - bottom) return fitFrame(aspect, reserve);
+  const centre = frame.y + frameHeight(frame, aspect) / 2;
+  return {
+    x: STAGE_MARGIN + inset,
+    y: clamp(centre - h / 2, STAGE_MARGIN + top, 1 - STAGE_MARGIN - h - below - bottom),
+    w
+  };
+}
+function fullHeightFrame(frame, aspect, reserve = NO_RESERVE) {
+  const { top, below, right = 0, bottom = 0 } = reserve;
+  const inner = 1 - 2 * STAGE_MARGIN;
+  const w = (inner - top - below - bottom) * aspect / STAGE_ASPECT;
+  if (w > inner - right) return fitFrame(aspect, reserve);
+  const centre = frame.x + frame.w / 2;
+  return {
+    x: clamp(centre - w / 2, STAGE_MARGIN, 1 - STAGE_MARGIN - right - w),
+    y: STAGE_MARGIN + top,
+    w
+  };
+}
+function clamp(value, min, max) {
+  return max < min ? (min + max) / 2 : Math.min(Math.max(value, min), max);
+}
+var SNAP_DISTANCE_Y = SNAP_DISTANCE * STAGE_ASPECT;
+function snapTargets(axis, others) {
+  const targets = [0, STAGE_MARGIN, 0.5, 1 - STAGE_MARGIN, 1];
+  for (const { frame, aspect } of others) {
+    const start = axis === "x" ? frame.x : frame.y;
+    const size = axis === "x" ? frame.w : frameHeight(frame, aspect);
+    targets.push(start, start + size / 2, start + size);
+  }
+  return targets;
+}
+function snapSpan(start, size, targets, distance) {
+  let best = null;
+  let bestDistance = distance;
+  for (const target of targets) {
+    for (const offset of [0, size / 2, size]) {
+      const d = Math.abs(start + offset - target);
+      if (d < bestDistance) {
+        bestDistance = d;
+        best = { start: target - offset, at: target };
+      }
+    }
+  }
+  return best;
+}
+function moveFrame(frame, aspect, dx, dy, others = [], free = false) {
+  const h = frameHeight(frame, aspect);
+  let x = frame.x + dx;
+  let y = frame.y + dy;
+  const guides = [];
+  if (!free) {
+    const sx = snapSpan(x, frame.w, snapTargets("x", others), SNAP_DISTANCE);
+    const sy = snapSpan(y, h, snapTargets("y", others), SNAP_DISTANCE_Y);
+    if (sx) {
+      x = sx.start;
+      guides.push({ axis: "x", at: sx.at });
+    }
+    if (sy) {
+      y = sy.start;
+      guides.push({ axis: "y", at: sy.at });
+    }
+  }
+  return { frame: { x: clamp(x, 0, 1 - frame.w), y: clamp(y, 0, 1 - h), w: frame.w }, guides };
+}
+function resizeFrame(frame, aspect, corner, dx, dy, others = [], free = false) {
+  const h0 = frameHeight(frame, aspect);
+  const west = corner === "nw" || corner === "sw";
+  const north = corner === "nw" || corner === "ne";
+  const anchorX = west ? frame.x + frame.w : frame.x;
+  const anchorY = north ? frame.y + h0 : frame.y;
+  const pointerX = (west ? frame.x : frame.x + frame.w) + dx;
+  const pointerY = (north ? frame.y : frame.y + h0) + dy;
+  const widthOfHeight = (height) => height * aspect / STAGE_ASPECT;
+  let w = Math.max(Math.abs(pointerX - anchorX), widthOfHeight(Math.abs(pointerY - anchorY)));
+  const guides = [];
+  if (!free) {
+    const edgeX = west ? anchorX - w : anchorX + w;
+    const edgeY = north ? anchorY - frameHeight({ w }, aspect) : anchorY + frameHeight({ w }, aspect);
+    const sx = snapSpan(edgeX, 0, snapTargets("x", others), SNAP_DISTANCE);
+    const sy = snapSpan(edgeY, 0, snapTargets("y", others), SNAP_DISTANCE_Y);
+    const dxSnap = sx ? Math.abs(sx.at - edgeX) : Infinity;
+    const dySnap = sy ? Math.abs(sy.at - edgeY) / STAGE_ASPECT : Infinity;
+    if (sx && dxSnap <= dySnap) {
+      w = Math.abs(sx.at - anchorX);
+      guides.push({ axis: "x", at: sx.at });
+    } else if (sy) {
+      w = widthOfHeight(Math.abs(sy.at - anchorY));
+      guides.push({ axis: "y", at: sy.at });
+    }
+  }
+  const maxW = Math.min(west ? anchorX : 1 - anchorX, widthOfHeight(north ? anchorY : 1 - anchorY));
+  w = clamp(w, Math.min(MIN_FRAME_WIDTH, maxW), maxW);
+  const h = frameHeight({ w }, aspect);
+  return { frame: { x: west ? anchorX - w : anchorX, y: north ? anchorY - h : anchorY, w }, guides };
+}
+var MIN_CLIP_SPAN = 0.02;
+function reshapeFrame(frame, clip, edge, dx, dy, others = [], free = false) {
+  const { rect, aspect } = clip;
+  const horizontal = edge === "e" || edge === "w";
+  const far = edge === "e" || edge === "s";
+  const start = horizontal ? frame.x : frame.y;
+  const size = horizontal ? frame.w : frameHeight(frame, aspect);
+  const sourceStart = horizontal ? rect.x : rect.y;
+  const sourceSize = horizontal ? rect.w : rect.h;
+  const scale = size / sourceSize;
+  const axis = horizontal ? "x" : "y";
+  let at = (far ? start + size : start) + (horizontal ? dx : dy);
+  if (!free) {
+    const distance = horizontal ? SNAP_DISTANCE : SNAP_DISTANCE_Y;
+    const snap = snapSpan(at, 0, snapTargets(axis, others), distance);
+    if (snap) at = snap.at;
+  }
+  const least = Math.min(
+    size,
+    Math.max(horizontal ? MIN_FRAME_WIDTH : MIN_FRAME_WIDTH * STAGE_ASPECT, MIN_CLIP_SPAN * scale)
+  );
+  const end = start + size;
+  const most = far ? Math.min(1 - start, (1 - sourceStart) * scale) : Math.min(end, (sourceStart + sourceSize) * scale);
+  const nextSize = clamp(far ? at - start : end - at, least, Math.max(most, size));
+  const nextSourceSize = nextSize / scale;
+  const nextStart = far ? start : end - nextSize;
+  const nextSourceStart = far ? sourceStart : sourceStart + sourceSize - nextSourceSize;
+  const nextRect = horizontal ? { ...rect, x: nextSourceStart, w: nextSourceSize } : { ...rect, y: nextSourceStart, h: nextSourceSize };
+  const sourceAspect = aspect * rect.h / rect.w;
+  const edgeAt = far ? nextStart + nextSize : nextStart;
+  return {
+    frame: horizontal ? { x: nextStart, y: frame.y, w: nextSize } : { x: frame.x, y: nextStart, w: frame.w },
+    rect: nextRect,
+    aspect: sourceAspect * nextRect.w / nextRect.h,
+    // A guide only where the edge did snap (not where a bound stopped it).
+    guides: !free && Math.abs(edgeAt - at) < 1e-9 && snapTargets(axis, others).includes(at) ? [{ axis, at }] : []
+  };
+}
+function alignFrame(frame, aspect, alignment, reserve = NO_RESERVE) {
+  const h = frameHeight(frame, aspect);
+  const right = reserve.right ?? 0;
+  const side = STAGE_MARGIN + (reserve.inset ?? 0);
+  const below = reserve.below + (reserve.bottom ?? 0);
+  switch (alignment) {
+    case "left":
+      return { ...frame, x: side };
+    case "centre":
+      return { ...frame, x: (1 - right - frame.w) / 2 };
+    case "right":
+      return { ...frame, x: 1 - side - right - frame.w };
+    case "top":
+      return { ...frame, y: STAGE_MARGIN + reserve.top };
+    case "middle":
+      return { ...frame, y: (1 + reserve.top - below - h) / 2 };
+    case "bottom":
+      return { ...frame, y: 1 - STAGE_MARGIN - below - h };
+  }
+}
+function dropFrame(aspect, at) {
+  const fit = fitFrame(aspect);
+  const w = Math.min(fit.w, 0.45);
+  const h = frameHeight({ w }, aspect);
+  return { x: clamp(at.x - w / 2, 0, 1 - w), y: clamp(at.y - h / 2, 0, 1 - h), w };
+}
+function defaultCaption(fileName, page) {
+  return `${documentName(fileName)} \xB7 p. ${page}`;
+}
+var documentName = (fileName) => fileName.replace(/\.[a-z0-9]{1,5}$/i, "") || "Document";
+function formatTime(seconds) {
+  const total = Math.max(0, Math.floor(seconds));
+  const h = Math.floor(total / 3600);
+  const m = Math.floor(total % 3600 / 60);
+  const s = String(total % 60).padStart(2, "0");
+  return h ? `${h}:${String(m).padStart(2, "0")}:${s}` : `${m}:${s}`;
+}
+function clipLabel(clip, columnValues) {
+  const value = columnValues[clip.documentId]?.trim();
+  if (!value) return clip.caption;
+  return clip.caption ? `${value} \xB7 ${clip.caption}` : value;
+}
+function mediaCaption(fileName, start) {
+  const name = documentName(fileName);
+  return start === void 0 ? name : `${name} \xB7 ${formatTime(start)}`;
+}
+
+// src/presentation/slide-layout.ts
+var TEXT_INSET = 0.06;
+var LAYOUT_INFO = {
+  clips: { label: "Title and clips" },
+  points: { label: "Clips and points", text: "One point per line" },
+  compare: { label: "Side by side" },
+  title: { label: "Title slide", text: "Subtitle" },
+  section: { label: "Section", text: "Subtitle" },
+  free: { label: "Blank" }
+};
+var FOOTER = 0.085;
+function slideGeometry(slide, options) {
+  const below = options.labels ? CAPTION_SPACE : 0;
+  const bottom = options.logo ? FOOTER : 0;
+  const logo = options.logo ? {
+    x: options.logo === "bl" ? TEXT_INSET : 1 - TEXT_INSET - 0.16,
+    y: 1 - 0.03 - 0.055,
+    w: 0.16,
+    h: 0.055
+  } : null;
+  const hasTitle = slide.caption.trim() !== "";
+  if (slide.layout === "free") {
+    return { title: null, rule: null, text: null, logo, reserve: { top: 0, below, bottom } };
+  }
+  if (slide.layout === "title" || slide.layout === "section") {
+    const centred = slide.layout === "title";
+    const title2 = centred ? {
+      x: 0.1,
+      y: 0.28,
+      w: 0.8,
+      h: 0.2,
+      size: 0.052,
+      weight: 700,
+      align: "center",
+      tone: "title",
+      leading: 1.1,
+      // Just above the rule, however many lines it takes.
+      anchor: "bottom"
+    } : {
+      x: TEXT_INSET + 0.02,
+      y: 0.36,
+      w: 0.8,
+      h: 0.18,
+      size: 0.046,
+      weight: 700,
+      align: "left",
+      tone: "title",
+      leading: 1.1
+    };
+    return {
+      title: title2,
+      rule: centred ? { x: 0.47, y: 0.505, w: 0.06, h: 7e-3 } : { x: TEXT_INSET + 0.02, y: 0.33, w: 0.07, h: 8e-3 },
+      text: {
+        x: title2.x,
+        y: centred ? 0.545 : 0.555,
+        w: title2.w,
+        h: 0.1,
+        size: 0.021,
+        weight: 400,
+        align: title2.align,
+        tone: "muted",
+        leading: 1.3
+      },
+      logo,
+      // Clips, if any, go under the text.
+      reserve: { top: 0.62, below, bottom }
+    };
+  }
+  const title = {
+    x: TEXT_INSET,
+    y: 0.05,
+    w: 1 - 2 * TEXT_INSET,
+    h: 0.075,
+    size: 0.03,
+    weight: 600,
+    align: "left",
+    tone: "title",
+    leading: 1.15
+  };
+  const top = hasTitle ? 0.14 : 0;
+  const inset = hasTitle || slide.layout === "points" ? TEXT_INSET - STAGE_MARGIN : 0;
+  const geometry = {
+    title,
+    rule: hasTitle ? { x: TEXT_INSET, y: 0.128, w: 0.045, h: 6e-3 } : null,
+    text: null,
+    logo,
+    reserve: { top, below, bottom, inset }
+  };
+  if (slide.layout === "points") {
+    const y = STAGE_MARGIN + top;
+    geometry.text = {
+      x: 0.6,
+      y,
+      w: 1 - 0.6 - TEXT_INSET,
+      h: 1 - y - STAGE_MARGIN - bottom - below,
+      // Level with the clips, which are centred in their room.
+      anchor: "middle",
+      size: 0.0195,
+      weight: 400,
+      align: "left",
+      tone: "body",
+      bullets: true,
+      leading: 1.45
+    };
+    geometry.reserve = { ...geometry.reserve, right: 0.4 - inset };
+  }
+  if (slide.layout === "compare") geometry.reserve = { ...geometry.reserve, columns: 2 };
+  return geometry;
+}
+var textLines = (text) => text.split("\n").map((line) => line.trim()).filter(Boolean);
+
+// src/presentation/theme.ts
+var BRAND = "brand";
+var DEFAULT_THEME = {
+  background: BRAND,
+  font: "sans",
+  accent: BRAND,
+  logo: null
+};
+var BACKGROUNDS = [
+  // The app's primary colour, read from its tokens when drawn (`brandColors`).
+  { id: BRAND, label: "Brand", from: "", to: "", glow: 0.1 },
+  { id: "graphite", label: "Graphite", from: "#2b3038", to: "#0c0e11", glow: 0.09 },
+  { id: "midnight", label: "Midnight", from: "#17294a", to: "#050a15", glow: 0.1 },
+  { id: "oxford", label: "Oxford", from: "#123d45", to: "#04141a", glow: 0.08 },
+  { id: "claret", label: "Claret", from: "#4b1526", to: "#110409", glow: 0.08 },
+  { id: "linen", label: "Linen", from: "#2a2b30", to: "#111215", glow: 0.06, texture: "linen" },
+  { id: "onyx", label: "Onyx", from: "#000000", to: "#000000", glow: 0 }
+];
+var FONTS = {
+  sans: {
+    label: "Modern",
+    css: 'Calibri, Carlito, "Segoe UI", "Helvetica Neue", Arial, sans-serif',
+    pptx: "Calibri"
+  },
+  serif: {
+    label: "Editorial",
+    css: 'Georgia, Gelasio, "Times New Roman", serif',
+    pptx: "Georgia"
+  },
+  classic: {
+    label: "Classic",
+    css: 'Garamond, "EB Garamond", "Cormorant Garamond", "Times New Roman", serif',
+    pptx: "Garamond"
+  }
+};
+var ACCENTS = [
+  { label: "Brand", color: BRAND },
+  { label: "Gold", color: "#c9a96e" },
+  { label: "Teal", color: "#4fb3bf" },
+  { label: "Blue", color: "#6b9bf2" },
+  { label: "Coral", color: "#e57a6e" },
+  { label: "Silver", color: "#cfd4dc" }
+];
+var TEXT_COLORS = { title: "#ffffff", body: "#e6e8ec", muted: "#aab0ba" };
+var HEX = /^#[0-9a-f]{6}$/i;
+var isHexColor = (value) => HEX.test(value);
+function mix(hex, toward, amount) {
+  const channel = (i) => {
+    const value = parseInt(hex.slice(1 + i * 2, 3 + i * 2), 16);
+    return Math.round(value + (toward - value) * amount).toString(16).padStart(2, "0");
+  };
+  return `#${channel(0)}${channel(1)}${channel(2)}`;
+}
+var BRAND_TOKENS = { primary: "229.85 50.43% 25.29%", secondary: "195 100% 47%" };
+function hslToHex(h, s, l) {
+  const k = (n) => (n + h / 30) % 12;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+  return `#${[f(0), f(8), f(4)].map(
+    (x) => Math.round(x * 255).toString(16).padStart(2, "0")
+  ).join("")}`;
+}
+function readToken(name, fallback) {
+  const value = typeof document !== "undefined" && getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+  const [h, s, l] = value.split(/\s+/).map((part) => parseFloat(part));
+  return [h, s / 100, l / 100];
+}
+var brand = null;
+function brandColors() {
+  if (brand) return brand;
+  const [ph, ps, pl] = readToken("--primary", BRAND_TOKENS.primary);
+  const [sh, ss, sl] = readToken("--secondary", BRAND_TOKENS.secondary);
+  brand = { primary: hslToHex(ph, ps, Math.min(pl, 0.3)), secondary: hslToHex(sh, ss, sl) };
+  return brand;
+}
+var accentColor = (accent) => accent === BRAND ? brandColors().secondary : accent;
+function backgroundSpec(background) {
+  if (background === BRAND) {
+    const { primary } = brandColors();
+    return { from: mix(primary, 255, 0.05), to: mix(primary, 0, 0.6), glow: 0.1 };
+  }
+  const preset = BACKGROUNDS.find((entry) => entry.id === background);
+  if (preset) return preset;
+  if (isHexColor(background)) {
+    return { from: mix(background, 255, 0.06), to: mix(background, 0, 0.62), glow: 0.08 };
+  }
+  return backgroundSpec(BRAND);
+}
+function backgroundCss(background) {
+  const spec = backgroundSpec(background);
+  const layers = [];
+  if (spec.glow > 0) {
+    layers.push(
+      `radial-gradient(120% 90% at 12% -10%, rgba(255,255,255,${spec.glow}), transparent 60%)`
+    );
+  }
+  if (spec.texture === "linen") {
+    layers.push(
+      "repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 0.06cqw, transparent 0.06cqw 0.32cqw)",
+      "repeating-linear-gradient(-45deg, rgba(255,255,255,0.02) 0 0.06cqw, transparent 0.06cqw 0.32cqw)"
+    );
+  }
+  layers.push(`linear-gradient(155deg, ${spec.from} 0%, ${spec.to} 100%)`);
+  return layers.join(", ");
+}
+function paintBackground(context, width, height, background) {
+  const spec = backgroundSpec(background);
+  const angle = 155 * Math.PI / 180;
+  const dx = Math.sin(angle);
+  const dy = -Math.cos(angle);
+  const length = Math.abs(width * dx) + Math.abs(height * dy);
+  const cx = width / 2;
+  const cy = height / 2;
+  const gradient = context.createLinearGradient(
+    cx - dx * length / 2,
+    cy - dy * length / 2,
+    cx + dx * length / 2,
+    cy + dy * length / 2
+  );
+  gradient.addColorStop(0, spec.from);
+  gradient.addColorStop(1, spec.to);
+  context.fillStyle = gradient;
+  context.fillRect(0, 0, width, height);
+  if (spec.texture === "linen") {
+    const step = width * 32e-4;
+    context.save();
+    context.lineWidth = width * 6e-4;
+    for (const [direction, alpha] of [
+      [1, 0.025],
+      [-1, 0.02]
+    ]) {
+      context.strokeStyle = `rgba(255,255,255,${alpha})`;
+      context.beginPath();
+      for (let offset = -height; offset < width + height; offset += step) {
+        context.moveTo(offset, direction === 1 ? height : 0);
+        context.lineTo(offset + height, direction === 1 ? 0 : height);
+      }
+      context.stroke();
+    }
+    context.restore();
+  }
+  if (spec.glow > 0) {
+    const rx = width * 1.2;
+    const ry = height * 0.9;
+    context.save();
+    context.translate(width * 0.12, -height * 0.1);
+    context.scale(rx, ry);
+    const glow = context.createRadialGradient(0, 0, 0, 0, 0, 1);
+    glow.addColorStop(0, `rgba(255,255,255,${spec.glow})`);
+    glow.addColorStop(0.6, "rgba(255,255,255,0)");
+    context.fillStyle = glow;
+    context.fillRect(-1, -1, 2, 2);
+    context.restore();
+  }
+}
+var CLIP_EDGE_SOLID = 2e-3;
+var CLIP_EDGE_FADE = 9e-3;
+var CLIP_EDGE_MAX = 0.08;
+function clipEdgeCss() {
+  const solid = `min(${CLIP_EDGE_SOLID * 100}cqw, ${CLIP_EDGE_MAX * 25}%)`;
+  const fade = `min(${CLIP_EDGE_FADE * 100}cqw, ${CLIP_EDGE_MAX * 100}%)`;
+  return ["to right", "to left", "to bottom", "to top"].map(
+    (direction) => `linear-gradient(${direction}, #fff 0, #fff ${solid}, rgba(255,255,255,0) ${fade})`
+  ).join(", ");
+}
+function paintClipEdge(context, box, stageWidth) {
+  const sides = [
+    { length: box.width, from: [box.x, 0], to: [box.x + 1, 0] },
+    { length: box.width, from: [box.x + box.width, 0], to: [box.x + box.width - 1, 0] },
+    { length: box.height, from: [0, box.y], to: [0, box.y + 1] },
+    { length: box.height, from: [0, box.y + box.height], to: [0, box.y + box.height - 1] }
+  ];
+  for (const side of sides) {
+    const fade = Math.min(CLIP_EDGE_FADE * stageWidth, CLIP_EDGE_MAX * side.length);
+    const solid = Math.min(CLIP_EDGE_SOLID * stageWidth, CLIP_EDGE_MAX * 0.25 * side.length);
+    const [fx, fy] = side.from;
+    const [tx, ty] = side.to;
+    const gradient = context.createLinearGradient(
+      fx,
+      fy,
+      fx + (tx - fx) * fade,
+      fy + (ty - fy) * fade
+    );
+    gradient.addColorStop(0, "rgba(255,255,255,1)");
+    gradient.addColorStop(Math.min(1, solid / fade), "rgba(255,255,255,1)");
+    gradient.addColorStop(1, "rgba(255,255,255,0)");
+    context.fillStyle = gradient;
+    context.fillRect(box.x, box.y, box.width, box.height);
+  }
+}
+function slideBackgroundCss(background, media) {
+  const image = background.image ? media[background.image] : void 0;
+  if (image) return `center / cover no-repeat url("${image}")`;
+  if (background.gradient) {
+    const { angle, from, to } = background.gradient;
+    return `linear-gradient(${angle}deg, ${from}, ${to})`;
+  }
+  return background.color ?? "#ffffff";
+}
+async function paintSlideBackground(context, width, height, background, media) {
+  const image = background.image ? media[background.image] : void 0;
+  if (image) {
+    const picture = new Image();
+    picture.src = image;
+    await picture.decode();
+    const scale = Math.max(width / picture.width, height / picture.height);
+    const w = picture.width * scale;
+    const h = picture.height * scale;
+    context.drawImage(picture, (width - w) / 2, (height - h) / 2, w, h);
+    return;
+  }
+  if (background.gradient) {
+    const { angle, from, to } = background.gradient;
+    const radians = angle * Math.PI / 180;
+    const dx = Math.sin(radians);
+    const dy = -Math.cos(radians);
+    const length = Math.abs(width * dx) + Math.abs(height * dy);
+    const gradient = context.createLinearGradient(
+      width / 2 - dx * length / 2,
+      height / 2 - dy * length / 2,
+      width / 2 + dx * length / 2,
+      height / 2 + dy * length / 2
+    );
+    gradient.addColorStop(0, from);
+    gradient.addColorStop(1, to);
+    context.fillStyle = gradient;
+  } else {
+    context.fillStyle = background.color ?? "#ffffff";
+  }
+  context.fillRect(0, 0, width, height);
+}
+function isLightBackground(background) {
+  const color2 = background?.gradient?.from ?? background?.color;
+  if (!color2 || !isHexColor(color2)) return false;
+  const n = parseInt(color2.slice(1), 16);
+  const luminance = 0.2126 * (n >> 16 & 255) + 0.7152 * (n >> 8 & 255) + 0.0722 * (n & 255);
+  return luminance > 150;
+}
+function parseTheme(value) {
+  const data = value ?? {};
+  const logo = data.logo;
+  return {
+    background: typeof data.background === "string" && (BACKGROUNDS.some((entry) => entry.id === data.background) || isHexColor(data.background)) ? data.background : DEFAULT_THEME.background,
+    font: data.font && data.font in FONTS ? data.font : DEFAULT_THEME.font,
+    accent: typeof data.accent === "string" && (isHexColor(data.accent) || data.accent === BRAND) ? data.accent : DEFAULT_THEME.accent,
+    logo: logo && typeof logo.documentId === "string" ? {
+      documentId: logo.documentId,
+      fileName: typeof logo.fileName === "string" ? logo.fileName : "",
+      corner: logo.corner === "bl" ? "bl" : "br"
+    } : null
+  };
+}
+
+// src/presentation/saved-boxes.ts
+var HEX2 = /^#[0-9a-f]{6}$/i;
+var SHAPES = ["text", "rect", "roundRect", "ellipse", "line"];
+var ALIGNS = ["left", "center", "right", "justify"];
+var num = (v) => typeof v === "number" && Number.isFinite(v);
+var color = (v) => typeof v === "string" && HEX2.test(v) ? v.toLowerCase() : void 0;
+function parseRun(value) {
+  const run = value;
+  if (!run || typeof run.text !== "string") return null;
+  return {
+    text: run.text,
+    ...num(run.size) && run.size > 0 && run.size < 400 ? { size: run.size } : {},
+    ...run.bold === true ? { bold: true } : {},
+    ...run.italic === true ? { italic: true } : {},
+    ...run.underline === true ? { underline: true } : {},
+    ...color(run.color) ? { color: color(run.color) } : {},
+    ...typeof run.font === "string" && run.font ? { font: run.font.slice(0, 64) } : {}
+  };
+}
+function parseParagraph(value) {
+  const paragraph = value;
+  if (!paragraph || !Array.isArray(paragraph.runs)) return null;
+  return {
+    runs: paragraph.runs.map(parseRun).filter((run) => run !== null),
+    ...ALIGNS.includes(paragraph.align) ? { align: paragraph.align } : {},
+    ...num(paragraph.level) && paragraph.level > 0 ? { level: Math.min(8, Math.round(paragraph.level)) } : {},
+    ...paragraph.bullet === true ? { bullet: true } : {}
+  };
+}
+function parseBox(value) {
+  const box = value;
+  const frame = box?.frame;
+  if (!box || !frame || !num(frame.x) || !num(frame.y) || !num(frame.w) || !num(frame.h) || frame.w < 0 || frame.h < 0 || !SHAPES.includes(box.shape)) {
+    return null;
+  }
+  const line = box.line;
+  return {
+    frame: { x: frame.x, y: frame.y, w: frame.w, h: frame.h },
+    shape: box.shape,
+    paragraphs: Array.isArray(box.paragraphs) ? box.paragraphs.map(parseParagraph).filter((p) => p !== null) : [],
+    ...num(box.rotation) && box.rotation % 360 !== 0 ? { rotation: box.rotation % 360 } : {},
+    ...box.flipH === true ? { flipH: true } : {},
+    ...box.flipV === true ? { flipV: true } : {},
+    ...color(box.fill) ? { fill: color(box.fill) } : {},
+    ...num(box.fillAlpha) && box.fillAlpha >= 0 && box.fillAlpha < 1 ? { fillAlpha: box.fillAlpha } : {},
+    ...line && color(line.color) && num(line.width) && line.width >= 0 ? {
+      line: {
+        color: color(line.color),
+        width: line.width,
+        ...line.dash === true ? { dash: true } : {}
+      }
+    } : {},
+    ...box.anchor === "middle" || box.anchor === "bottom" || box.anchor === "top" ? { anchor: box.anchor } : {},
+    ...num(box.inset) && box.inset >= 0 ? { inset: box.inset } : {},
+    ...box.role === "title" || box.role === "body" ? { role: box.role } : {},
+    ...box.front === true ? { front: true } : {}
+  };
+}
+function parseBoxes(value) {
+  return Array.isArray(value) ? value.map(parseBox).filter((b) => b !== null) : [];
+}
+function parseBackground(value, media) {
+  const background = value;
+  if (!background || typeof background !== "object") return void 0;
+  const gradient = background.gradient;
+  const parsed = {
+    ...color(background.color) ? { color: color(background.color) } : {},
+    ...gradient && color(gradient.from) && color(gradient.to) && num(gradient.angle) ? {
+      gradient: { from: color(gradient.from), to: color(gradient.to), angle: gradient.angle }
+    } : {},
+    ...typeof background.image === "string" && media[background.image] ? { image: background.image } : {}
+  };
+  return Object.keys(parsed).length ? parsed : void 0;
+}
+
+// src/presentation/persistence.ts
+var PRESENTATIONS_FOLDER = "Presentations";
+var TEMPLATES_FOLDER = `${PRESENTATIONS_FOLDER}/Templates`;
+var EXPORTS_FOLDER = `${PRESENTATIONS_FOLDER}/Exports`;
+var PRESENTATION_ATTACHMENT = "arbi-presentation.json";
+var FORMAT = "arbi-presentation";
+function serializePresentation(snapshot) {
+  const index = new Map(snapshot.clips.map((clip, i) => [clip.id, i]));
+  return {
+    format: FORMAT,
+    version: 1,
+    title: snapshot.title,
+    captions: snapshot.captions,
+    ...snapshot.labelColumn ? { labelColumn: snapshot.labelColumn } : {},
+    ...snapshot.theme ? { theme: snapshot.theme } : {},
+    clips: snapshot.clips.map((clip) => ({
+      kind: clip.kind,
+      documentId: clip.documentId,
+      ...clip.version !== void 0 ? { version: clip.version } : {},
+      fileName: clip.fileName,
+      page: clip.page,
+      rect: clip.rect,
+      aspect: clip.aspect,
+      caption: clip.caption,
+      ...clip.start !== void 0 ? { start: clip.start } : {},
+      ...clip.zoomBase !== void 0 ? { zoomBase: clip.zoomBase } : {},
+      ...clip.media ? { media: clip.media } : {},
+      ...clip.plain ? { plain: true } : {}
+    })),
+    slides: snapshot.slides.map((slide, i) => ({
+      caption: slide.caption,
+      auto: slide.auto,
+      layout: slide.layout ?? "clips",
+      ...slide.points ? { points: slide.points } : {},
+      items: slide.items.filter((item) => index.has(item.clipId)).map((item) => ({ clip: index.get(item.clipId), frame: item.frame })),
+      ...slide.boxes?.length ? { boxes: slide.boxes.map(({ id: _id, ...box }) => (box)) } : {},
+      ...slide.background ? { background: slide.background } : {},
+      ...slide.notes?.trim() ? { notes: slide.notes } : {},
+      ...snapshot.fingerprints?.[i] ? { fingerprint: snapshot.fingerprints[i] } : {}
+    })),
+    ...usedMedia(snapshot) ? { media: usedMedia(snapshot) } : {}
+  };
+}
+function usedMedia(snapshot) {
+  const media = snapshot.media ?? {};
+  const keys = /* @__PURE__ */ new Set();
+  for (const clip of snapshot.clips) if (clip.media) keys.add(clip.media);
+  for (const slide of snapshot.slides) if (slide.background?.image) keys.add(slide.background.image);
+  const used = Object.fromEntries(
+    [...keys].filter((key) => media[key]).map((key) => [key, media[key]])
+  );
+  return Object.keys(used).length ? used : void 0;
+}
+var isNumber = (v) => typeof v === "number" && Number.isFinite(v);
+var isRect = (v) => {
+  const r = v;
+  return !!r && isNumber(r.x) && isNumber(r.y) && isNumber(r.w) && isNumber(r.h) && r.w > 0 && r.h > 0;
+};
+var isFrame = (v) => {
+  const f = v;
+  return !!f && isNumber(f.x) && isNumber(f.y) && isNumber(f.w) && f.w > 0;
+};
+function parsePresentation(text) {
+  const data = JSON.parse(text);
+  if (data?.format !== FORMAT || data.version !== 1) throw new Error("Not a presentation file");
+  const clips = Array.isArray(data.clips) ? data.clips : [];
+  const slides = Array.isArray(data.slides) ? data.slides : [];
+  const media = data.media && typeof data.media === "object" ? Object.fromEntries(
+    Object.entries(data.media).filter(
+      ([, url]) => typeof url === "string" && url.startsWith("data:image/")
+    )
+  ) : {};
+  for (const clip of clips) {
+    if (!["pdf", "image", "video"].includes(clip.kind) || typeof clip.documentId !== "string" || clip.media !== void 0 && !media[clip.media] || !isRect(clip.rect) || !isNumber(clip.aspect) || !isNumber(clip.page)) {
+      throw new Error("The presentation file is damaged");
+    }
+  }
+  for (const slide of slides) {
+    if (!Array.isArray(slide.items)) throw new Error("The presentation file is damaged");
+    for (const item of slide.items) {
+      if (!isNumber(item.clip) || !clips[item.clip] || !isFrame(item.frame)) {
+        throw new Error("The presentation file is damaged");
+      }
+    }
+  }
+  return {
+    format: FORMAT,
+    version: 1,
+    title: typeof data.title === "string" ? data.title : "Presentation",
+    captions: data.captions !== false,
+    ...data.theme !== void 0 ? { theme: parseTheme(data.theme) } : {},
+    ...typeof data.labelColumn === "string" && data.labelColumn ? { labelColumn: data.labelColumn } : {},
+    clips,
+    slides: slides.map((slide) => {
+      const { boxes, background, fingerprint, notes, ...rest } = slide;
+      const parsedBoxes = parseBoxes(boxes);
+      const parsedBackground = parseBackground(background, media);
+      return {
+        ...rest,
+        layout: SLIDE_LAYOUTS.includes(slide.layout) ? slide.layout : "clips",
+        ...typeof slide.points === "string" && slide.points ? { points: slide.points } : {},
+        ...parsedBoxes.length ? { boxes: parsedBoxes } : {},
+        ...parsedBackground ? { background: parsedBackground } : {},
+        ...typeof fingerprint === "string" ? { fingerprint } : {},
+        ...typeof notes === "string" && notes.trim() ? { notes } : {}
+      };
+    }),
+    ...Object.keys(media).length ? { media } : {},
+    ...data.slidesStale === true ? { slidesStale: true } : {}
+  };
+}
+function safeFileStem(title) {
+  return title.replace(/[\\/:*?"<>|]+/g, " ").trim() || "Presentation";
+}
+function presentationFileName(title) {
+  return `${safeFileStem(title)}.pptx`;
+}
+function presentationTitle(fileName) {
+  for (const suffix of [chunkVJ5ZLRBD_cjs.PRESENTATION_FILE_SUFFIX, chunkVJ5ZLRBD_cjs.LEGACY_PRESENTATION_SUFFIX, ".pptx", ".pdf"]) {
+    if (fileName.endsWith(suffix)) return fileName.slice(0, -suffix.length);
+  }
+  return fileName;
+}
+
+// src/presentation/boxes.ts
+var SLIDE_POINTS = { w: 960, h: 540 };
+var DEFAULT_TEXT_SIZE = 18;
+var DEFAULT_INSET = 7.2;
+var MIN_BOX = 0.02;
+var pointsToStage = (points) => points / SLIDE_POINTS.w;
+var boxText = (box) => box.paragraphs.map((paragraph) => paragraph.runs.map((run) => run.text).join("")).join("\n");
+function withText(box, text) {
+  const lines = text.split("\n");
+  const fallback = box.paragraphs[box.paragraphs.length - 1] ?? { runs: [{ text: "" }] };
+  const paragraphs = lines.map((line, index) => {
+    const before = box.paragraphs[index] ?? fallback;
+    const { text: _old, ...style } = before.runs[0] ?? { text: "" };
+    return { ...before, runs: [{ ...style, text: line }] };
+  });
+  return { ...box, paragraphs };
+}
+function styleRuns(box, change) {
+  return {
+    ...box,
+    paragraphs: box.paragraphs.map((paragraph) => ({
+      ...paragraph,
+      runs: paragraph.runs.map(change)
+    }))
+  };
+}
+var firstRun = (box) => box.paragraphs.find((paragraph) => paragraph.runs.length)?.runs[0];
+var clamp2 = (value, min, max) => max < min ? (min + max) / 2 : Math.min(Math.max(value, min), max);
+function moveBox(frame, dx, dy) {
+  return {
+    ...frame,
+    x: clamp2(frame.x + dx, -frame.w / 2, 1 - frame.w / 2),
+    y: clamp2(frame.y + dy, -frame.h / 2, 1 - frame.h / 2)
+  };
+}
+function stretchBox(frame, handle, dx, dy) {
+  let { x, y, w, h } = frame;
+  if (handle.includes("w")) {
+    const right = x + w;
+    x = Math.min(x + dx, right - MIN_BOX);
+    w = right - x;
+  } else if (handle.includes("e")) {
+    w = Math.max(MIN_BOX, w + dx);
+  }
+  if (handle.startsWith("n")) {
+    const bottom = y + h;
+    y = Math.min(y + dy, bottom - MIN_BOX);
+    h = bottom - y;
+  } else if (handle.startsWith("s")) {
+    h = Math.max(MIN_BOX, h + dy);
+  }
+  return { x, y, w, h };
+}
+var sequence = 0;
+var nextBoxId = () => `box-${Date.now().toString(36)}-${++sequence}`;
+function newBox(shape, accent) {
+  const id = nextBoxId();
+  if (shape === "text") {
+    return {
+      id,
+      shape,
+      frame: { x: 0.3, y: 0.42, w: 0.4, h: 0.12 },
+      paragraphs: [{ runs: [{ text: "", size: 24 }] }],
+      front: true
+    };
+  }
+  if (shape === "line") {
+    return {
+      id,
+      shape,
+      frame: { x: 0.35, y: 0.5, w: 0.3, h: 0 },
+      line: { color: accent, width: 2 },
+      paragraphs: [],
+      front: true
+    };
+  }
+  return {
+    id,
+    shape,
+    frame: { x: 0.35, y: 0.35, w: 0.3, h: 0.3 },
+    fill: accent,
+    paragraphs: [{ runs: [{ text: "", size: 20, color: "#ffffff" }], align: "center" }],
+    anchor: "middle",
+    front: false
+  };
+}
+
+// src/presentation/store.ts
+var MIN_CLIP_AREA = 0.02;
+var MAX_ITEMS_PER_SLIDE = 6;
+var AUTO_PLACE_BELOW = 2;
+var sequence2 = 0;
+var nextId = (kind) => `${kind}-${Date.now().toString(36)}-${++sequence2}`;
+var emptySlide = (layout = "clips") => ({
+  id: nextId("slide"),
+  items: [],
+  auto: true,
+  caption: "",
+  layout,
+  points: "",
+  boxes: []
+});
+var 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] }))
+  };
+}
+var 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;
+}
+var usePresentation = zustand.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))
+        viewers.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: ++sequence2 } }),
+    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;
+      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))) {
+        viewers.releasePdfRegionSource(source);
+      }
+      set(initialState());
+    }
+  };
+});
+var 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()
+  );
+}
+
+exports.ACCENTS = ACCENTS;
+exports.BACKGROUNDS = BACKGROUNDS;
+exports.DEFAULT_INSET = DEFAULT_INSET;
+exports.DEFAULT_TEXT_SIZE = DEFAULT_TEXT_SIZE;
+exports.DEFAULT_THEME = DEFAULT_THEME;
+exports.EXPORTS_FOLDER = EXPORTS_FOLDER;
+exports.FONTS = FONTS;
+exports.LAYOUT_INFO = LAYOUT_INFO;
+exports.PRESENTATIONS_FOLDER = PRESENTATIONS_FOLDER;
+exports.PRESENTATION_ATTACHMENT = PRESENTATION_ATTACHMENT;
+exports.SLIDE_LAYOUTS = SLIDE_LAYOUTS;
+exports.SLIDE_POINTS = SLIDE_POINTS;
+exports.STAGE_ASPECT = STAGE_ASPECT;
+exports.STAGE_MARGIN = STAGE_MARGIN;
+exports.TEMPLATES_FOLDER = TEMPLATES_FOLDER;
+exports.TEXT_COLORS = TEXT_COLORS;
+exports.accentColor = accentColor;
+exports.backgroundCss = backgroundCss;
+exports.boxText = boxText;
+exports.clipEdgeCss = clipEdgeCss;
+exports.clipLabel = clipLabel;
+exports.currentSlide = currentSlide;
+exports.firstRun = firstRun;
+exports.formatTime = formatTime;
+exports.frameHeight = frameHeight;
+exports.hasUnsavedChanges = hasUnsavedChanges;
+exports.isHexColor = isHexColor;
+exports.isLightBackground = isLightBackground;
+exports.mediaCaption = mediaCaption;
+exports.moveBox = moveBox;
+exports.moveFrame = moveFrame;
+exports.newBox = newBox;
+exports.paintBackground = paintBackground;
+exports.paintClipEdge = paintClipEdge;
+exports.paintSlideBackground = paintSlideBackground;
+exports.parsePresentation = parsePresentation;
+exports.pointsToStage = pointsToStage;
+exports.presentationFileName = presentationFileName;
+exports.presentationTitle = presentationTitle;
+exports.reshapeFrame = reshapeFrame;
+exports.resizeFrame = resizeFrame;
+exports.safeFileStem = safeFileStem;
+exports.serializePresentation = serializePresentation;
+exports.slideBackgroundCss = slideBackgroundCss;
+exports.slideGeometry = slideGeometry;
+exports.stretchBox = stretchBox;
+exports.styleRuns = styleRuns;
+exports.textLines = textLines;
+exports.usePresentation = usePresentation;
+//# sourceMappingURL=chunk-XTR26TNE.cjs.map
+//# sourceMappingURL=chunk-XTR26TNE.cjs.map