@arbidocs/blocks 0.5.120 → 0.5.122

package/dist/presentation/theme.js

@@ -0,0 +1,276 @@
+"use client";
+const BRAND = "brand";
+const DEFAULT_THEME = {
+  background: BRAND,
+  font: "sans",
+  accent: BRAND,
+  logo: null
+};
+const 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 }
+];
+const 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"
+  }
+};
+const 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" }
+];
+const TEXT_COLORS = { title: "#ffffff", body: "#e6e8ec", muted: "#aab0ba" };
+const HEX = /^#[0-9a-f]{6}$/i;
+const 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)}`;
+}
+const 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];
+}
+let 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;
+}
+const 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();
+  }
+}
+const CLIP_EDGE_SOLID = 2e-3;
+const CLIP_EDGE_FADE = 9e-3;
+const 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 color = background?.gradient?.from ?? background?.color;
+  if (!color || !isHexColor(color)) return false;
+  const n = parseInt(color.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
+  };
+}
+export {
+  ACCENTS,
+  BACKGROUNDS,
+  BRAND,
+  CLIP_EDGE_FADE,
+  CLIP_EDGE_MAX,
+  CLIP_EDGE_SOLID,
+  DEFAULT_THEME,
+  FONTS,
+  TEXT_COLORS,
+  accentColor,
+  backgroundCss,
+  backgroundSpec,
+  brandColors,
+  clipEdgeCss,
+  isHexColor,
+  isLightBackground,
+  paintBackground,
+  paintClipEdge,
+  paintSlideBackground,
+  parseTheme,
+  slideBackgroundCss
+};
+//# sourceMappingURL=theme.js.map

package/dist/presentation/theme.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/theme.ts"],
+  "sourcesContent": ["/**\n * A presentation's theme: one look for every slide (background, typeface, accent colour, a logo\n * in the footer). The same values draw the stage (CSS), the saved PDF (canvas) and the PowerPoint\n * export, so they always match.\n *\n * Backgrounds are dark, for contrast with the clips: a deep diagonal gradient with a soft light\n * from the top left (the gloss), optionally a fine texture. A custom colour gets the same\n * treatment. Typefaces are ones PowerPoint has, so an exported deck keeps its type.\n */\n\nimport type { SlideBackground } from './boxes'\n\nexport type FontId = 'sans' | 'serif' | 'classic'\nexport type LogoCorner = 'bl' | 'br'\n\nexport interface ThemeLogo {\n  /** An image document of the workspace (a reference; its file is fetched when opened). */\n  documentId: string\n  fileName: string\n  corner: LogoCorner\n}\n\nexport interface Theme {\n  /** A background preset's id, or a custom colour (`#rrggbb`). */\n  background: string\n  font: FontId\n  /** `#rrggbb`: the rule under titles, bullets. */\n  accent: string\n  logo: ThemeLogo | null\n}\n\n/** The app's own colours (its `--primary` and `--secondary` tokens), as a background or accent. */\nexport const BRAND = 'brand'\n\n/** By default a presentation wears the app's brand: its primary as the background, its accent. */\nexport const DEFAULT_THEME: Theme = {\n  background: BRAND,\n  font: 'sans',\n  accent: BRAND,\n  logo: null,\n}\n\ninterface BackgroundSpec {\n  /** Top left of the gradient. */\n  from: string\n  /** Bottom right. */\n  to: string\n  /** The light from the top left (white, this opacity). */\n  glow: number\n  texture?: 'linen'\n}\n\nexport const BACKGROUNDS: ({ id: string; label: string } & BackgroundSpec)[] = [\n  // The app's primary colour, read from its tokens when drawn (`brandColors`).\n  { id: BRAND, label: 'Brand', from: '', to: '', glow: 0.1 },\n  { id: 'graphite', label: 'Graphite', from: '#2b3038', to: '#0c0e11', glow: 0.09 },\n  { id: 'midnight', label: 'Midnight', from: '#17294a', to: '#050a15', glow: 0.1 },\n  { id: 'oxford', label: 'Oxford', from: '#123d45', to: '#04141a', glow: 0.08 },\n  { id: 'claret', label: 'Claret', from: '#4b1526', to: '#110409', glow: 0.08 },\n  { id: 'linen', label: 'Linen', from: '#2a2b30', to: '#111215', glow: 0.06, texture: 'linen' },\n  { id: 'onyx', label: 'Onyx', from: '#000000', to: '#000000', glow: 0 },\n]\n\nexport const FONTS: Record<FontId, { label: string; css: string; pptx: string }> = {\n  sans: {\n    label: 'Modern',\n    css: 'Calibri, Carlito, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif',\n    pptx: 'Calibri',\n  },\n  serif: {\n    label: 'Editorial',\n    css: 'Georgia, Gelasio, \"Times New Roman\", serif',\n    pptx: 'Georgia',\n  },\n  classic: {\n    label: 'Classic',\n    css: 'Garamond, \"EB Garamond\", \"Cormorant Garamond\", \"Times New Roman\", serif',\n    pptx: 'Garamond',\n  },\n}\n\nexport const ACCENTS: { label: string; color: string }[] = [\n  { label: 'Brand', color: BRAND },\n  { label: 'Gold', color: '#c9a96e' },\n  { label: 'Teal', color: '#4fb3bf' },\n  { label: 'Blue', color: '#6b9bf2' },\n  { label: 'Coral', color: '#e57a6e' },\n  { label: 'Silver', color: '#cfd4dc' },\n]\n\n/** Slide text colours, over the dark background. */\nexport const TEXT_COLORS = { title: '#ffffff', body: '#e6e8ec', muted: '#aab0ba' }\n\nconst HEX = /^#[0-9a-f]{6}$/i\n\nexport const isHexColor = (value: string): boolean => HEX.test(value)\n\nfunction mix(hex: string, toward: number, amount: number): string {\n  const channel = (i: number) => {\n    const value = parseInt(hex.slice(1 + i * 2, 3 + i * 2), 16)\n    return Math.round(value + (toward - value) * amount)\n      .toString(16)\n      .padStart(2, '0')\n  }\n  return `#${channel(0)}${channel(1)}${channel(2)}`\n}\n\n/** The tokens as the app's light theme defines them, where the page has none (tests, workers). */\nconst BRAND_TOKENS = { primary: '229.85 50.43% 25.29%', secondary: '195 100% 47%' }\n\nfunction hslToHex(h: number, s: number, l: number): string {\n  const k = (n: number) => (n + h / 30) % 12\n  const a = s * Math.min(l, 1 - l)\n  const f = (n: number) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)))\n  return `#${[f(0), f(8), f(4)]\n    .map((x) =>\n      Math.round(x * 255)\n        .toString(16)\n        .padStart(2, '0')\n    )\n    .join('')}`\n}\n\n/** A token's value (\"H S% L%\"), as hue and fractions. */\nfunction readToken(name: string, fallback: string): [number, number, number] {\n  const value =\n    (typeof document !== 'undefined' &&\n      getComputedStyle(document.documentElement).getPropertyValue(name).trim()) ||\n    fallback\n  const [h, s, l] = value.split(/\\s+/).map((part) => parseFloat(part))\n  return [h, s / 100, l / 100]\n}\n\nlet brand: { primary: string; secondary: string } | null = null\n\n/**\n * The app's brand colours, from its `--primary` and `--secondary` tokens (another host's, in that\n * host). The primary stays deep, as a slide background: in a dark mode, where the token is light,\n * its hue is kept at the light theme's depth. Read once.\n */\nexport function brandColors(): { primary: string; secondary: string } {\n  if (brand) return brand\n  const [ph, ps, pl] = readToken('--primary', BRAND_TOKENS.primary)\n  const [sh, ss, sl] = readToken('--secondary', BRAND_TOKENS.secondary)\n  brand = { primary: hslToHex(ph, ps, Math.min(pl, 0.3)), secondary: hslToHex(sh, ss, sl) }\n  return brand\n}\n\n/** A theme's accent as a colour (`brand`: the app's secondary colour). */\nexport const accentColor = (accent: string): string =>\n  accent === BRAND ? brandColors().secondary : accent\n\n/** The background a theme names: a preset, or a custom colour given the presets' finish. */\nexport function backgroundSpec(background: string): BackgroundSpec {\n  if (background === BRAND) {\n    const { primary } = brandColors()\n    return { from: mix(primary, 255, 0.05), to: mix(primary, 0, 0.6), glow: 0.1 }\n  }\n  const preset = BACKGROUNDS.find((entry) => entry.id === background)\n  if (preset) return preset\n  if (isHexColor(background)) {\n    return { from: mix(background, 255, 0.06), to: mix(background, 0, 0.62), glow: 0.08 }\n  }\n  return backgroundSpec(BRAND)\n}\n\n/** The background as CSS (container units: the texture keeps its size on any stage). */\nexport function backgroundCss(background: string): string {\n  const spec = backgroundSpec(background)\n  const layers: string[] = []\n  if (spec.glow > 0) {\n    layers.push(\n      `radial-gradient(120% 90% at 12% -10%, rgba(255,255,255,${spec.glow}), transparent 60%)`\n    )\n  }\n  if (spec.texture === 'linen') {\n    layers.push(\n      'repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 0.06cqw, transparent 0.06cqw 0.32cqw)',\n      'repeating-linear-gradient(-45deg, rgba(255,255,255,0.02) 0 0.06cqw, transparent 0.06cqw 0.32cqw)'\n    )\n  }\n  layers.push(`linear-gradient(155deg, ${spec.from} 0%, ${spec.to} 100%)`)\n  return layers.join(', ')\n}\n\n/** The background painted on a canvas (the saved PDF's pages, the PowerPoint backgrounds). */\nexport function paintBackground(\n  context: CanvasRenderingContext2D,\n  width: number,\n  height: number,\n  background: string\n): void {\n  const spec = backgroundSpec(background)\n  // CSS's 155deg gradient line: through the centre, long enough to reach the corners.\n  const angle = (155 * Math.PI) / 180\n  const dx = Math.sin(angle)\n  const dy = -Math.cos(angle)\n  const length = Math.abs(width * dx) + Math.abs(height * dy)\n  const cx = width / 2\n  const cy = height / 2\n  const gradient = context.createLinearGradient(\n    cx - (dx * length) / 2,\n    cy - (dy * length) / 2,\n    cx + (dx * length) / 2,\n    cy + (dy * length) / 2\n  )\n  gradient.addColorStop(0, spec.from)\n  gradient.addColorStop(1, spec.to)\n  context.fillStyle = gradient\n  context.fillRect(0, 0, width, height)\n\n  if (spec.texture === 'linen') {\n    const step = width * 0.0032\n    context.save()\n    context.lineWidth = width * 0.0006\n    for (const [direction, alpha] of [\n      [1, 0.025],\n      [-1, 0.02],\n    ] as const) {\n      context.strokeStyle = `rgba(255,255,255,${alpha})`\n      context.beginPath()\n      for (let offset = -height; offset < width + height; offset += step) {\n        context.moveTo(offset, direction === 1 ? height : 0)\n        context.lineTo(offset + height, direction === 1 ? 0 : height)\n      }\n      context.stroke()\n    }\n    context.restore()\n  }\n\n  if (spec.glow > 0) {\n    // An ellipse 120% \u00D7 90% of the slide centred above its top left, fading out by 60%.\n    const rx = width * 1.2\n    const ry = height * 0.9\n    context.save()\n    context.translate(width * 0.12, -height * 0.1)\n    context.scale(rx, ry)\n    const glow = context.createRadialGradient(0, 0, 0, 0, 0, 1)\n    glow.addColorStop(0, `rgba(255,255,255,${spec.glow})`)\n    glow.addColorStop(0.6, 'rgba(255,255,255,0)')\n    context.fillStyle = glow\n    context.fillRect(-1, -1, 2, 2)\n    context.restore()\n  }\n}\n\n/**\n * A page clip's soft edge: paper white at its very edge (`CLIP_EDGE_SOLID`), fading to nothing by\n * `CLIP_EDGE_FADE` (fractions of the stage width; never more than `CLIP_EDGE_MAX` of the clip), so\n * text cut by the clip fades out instead of being sliced, and the clip has a little margin.\n */\nexport const CLIP_EDGE_SOLID = 0.002\nexport const CLIP_EDGE_FADE = 0.009\nexport const CLIP_EDGE_MAX = 0.08\n\n/** The soft edge as CSS (on the stage: container units). */\nexport function clipEdgeCss(): string {\n  const solid = `min(${CLIP_EDGE_SOLID * 100}cqw, ${CLIP_EDGE_MAX * 25}%)`\n  const fade = `min(${CLIP_EDGE_FADE * 100}cqw, ${CLIP_EDGE_MAX * 100}%)`\n  return ['to right', 'to left', 'to bottom', 'to top']\n    .map(\n      (direction) =>\n        `linear-gradient(${direction}, #fff 0, #fff ${solid}, rgba(255,255,255,0) ${fade})`\n    )\n    .join(', ')\n}\n\n/** The soft edge painted over a clip drawn in `box` (the saved PDF, the PowerPoint images). */\nexport function paintClipEdge(\n  context: CanvasRenderingContext2D,\n  box: { x: number; y: number; width: number; height: number },\n  stageWidth: number\n): void {\n  const sides = [\n    { length: box.width, from: [box.x, 0], to: [box.x + 1, 0] },\n    { length: box.width, from: [box.x + box.width, 0], to: [box.x + box.width - 1, 0] },\n    { length: box.height, from: [0, box.y], to: [0, box.y + 1] },\n    { length: box.height, from: [0, box.y + box.height], to: [0, box.y + box.height - 1] },\n  ]\n  for (const side of sides) {\n    const fade = Math.min(CLIP_EDGE_FADE * stageWidth, CLIP_EDGE_MAX * side.length)\n    const solid = Math.min(CLIP_EDGE_SOLID * stageWidth, CLIP_EDGE_MAX * 0.25 * side.length)\n    // Along the side's inward normal, `fade` long.\n    const [fx, fy] = side.from\n    const [tx, ty] = side.to\n    const gradient = context.createLinearGradient(\n      fx,\n      fy,\n      fx + (tx - fx) * fade,\n      fy + (ty - fy) * fade\n    )\n    gradient.addColorStop(0, 'rgba(255,255,255,1)')\n    gradient.addColorStop(Math.min(1, solid / fade), 'rgba(255,255,255,1)')\n    gradient.addColorStop(1, 'rgba(255,255,255,0)')\n    context.fillStyle = gradient\n    context.fillRect(box.x, box.y, box.width, box.height)\n  }\n}\n\n/** A slide's own background as CSS: its image (from the presentation's media), gradient or colour. */\nexport function slideBackgroundCss(\n  background: SlideBackground,\n  media: Readonly<Record<string, string>>\n): string {\n  const image = background.image ? media[background.image] : undefined\n  if (image) return `center / cover no-repeat url(\"${image}\")`\n  if (background.gradient) {\n    const { angle, from, to } = background.gradient\n    return `linear-gradient(${angle}deg, ${from}, ${to})`\n  }\n  return background.color ?? '#ffffff'\n}\n\n/** A slide's own background painted on a canvas. */\nexport async function paintSlideBackground(\n  context: CanvasRenderingContext2D,\n  width: number,\n  height: number,\n  background: SlideBackground,\n  media: Readonly<Record<string, string>>\n): Promise<void> {\n  const image = background.image ? media[background.image] : undefined\n  if (image) {\n    const picture = new Image()\n    picture.src = image\n    await picture.decode()\n    // Cover: fill the slide, cropping the overflow.\n    const scale = Math.max(width / picture.width, height / picture.height)\n    const w = picture.width * scale\n    const h = picture.height * scale\n    context.drawImage(picture, (width - w) / 2, (height - h) / 2, w, h)\n    return\n  }\n  if (background.gradient) {\n    const { angle, from, to } = background.gradient\n    const radians = (angle * Math.PI) / 180\n    const dx = Math.sin(radians)\n    const dy = -Math.cos(radians)\n    const length = Math.abs(width * dx) + Math.abs(height * dy)\n    const gradient = context.createLinearGradient(\n      width / 2 - (dx * length) / 2,\n      height / 2 - (dy * length) / 2,\n      width / 2 + (dx * length) / 2,\n      height / 2 + (dy * length) / 2\n    )\n    gradient.addColorStop(0, from)\n    gradient.addColorStop(1, to)\n    context.fillStyle = gradient\n  } else {\n    context.fillStyle = background.color ?? '#ffffff'\n  }\n  context.fillRect(0, 0, width, height)\n}\n\n/** Whether a slide's background is light (text on it should be dark). */\nexport function isLightBackground(background: SlideBackground | undefined): boolean {\n  const color = background?.gradient?.from ?? background?.color\n  if (!color || !isHexColor(color)) return false\n  const n = parseInt(color.slice(1), 16)\n  const luminance = 0.2126 * ((n >> 16) & 255) + 0.7152 * ((n >> 8) & 255) + 0.0722 * (n & 255)\n  return luminance > 150\n}\n\n/** A theme read from saved data, every field checked (anything wrong falls back to the default). */\nexport function parseTheme(value: unknown): Theme {\n  const data = (value ?? {}) as Partial<Theme>\n  const logo = data.logo as Partial<ThemeLogo> | null | undefined\n  return {\n    background:\n      typeof data.background === 'string' &&\n      (BACKGROUNDS.some((entry) => entry.id === data.background) || isHexColor(data.background))\n        ? data.background\n        : DEFAULT_THEME.background,\n    font: data.font && data.font in FONTS ? data.font : DEFAULT_THEME.font,\n    accent:\n      typeof data.accent === 'string' && (isHexColor(data.accent) || data.accent === BRAND)\n        ? data.accent\n        : DEFAULT_THEME.accent,\n    logo:\n      logo && typeof logo.documentId === 'string'\n        ? {\n            documentId: logo.documentId,\n            fileName: typeof logo.fileName === 'string' ? logo.fileName : '',\n            corner: logo.corner === 'bl' ? 'bl' : 'br',\n          }\n        : null,\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/presentation/useClipDrag.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Dragging a clip from the tray onto a slide, with pointer events: the same for a mouse, a pen and
+ * a finger (HTML drag and drop does not work on touch screens). A drag starts once the pointer has
+ * moved a little; a thumbnail follows it; on release, what is under it decides: the stage (the
+ * clip goes on the current slide where it was dropped) or a slide chip (on that slide). A press
+ * that does not move is a tap.
+ *
+ * Drop targets are marked with `data-presentation-drop` ("stage", or "slide" with
+ * `data-slide-index`), so they are found under the pointer in whichever window the tray is in.
+ */
+import { type PointerEvent as ReactPointerEvent } from 'react';
+export declare const DROP_ATTRIBUTE = "data-presentation-drop";
+export interface ClipDrag {
+    /** Where the dragged thumbnail is (client px), while dragging. */
+    ghost: {
+        x: number;
+        y: number;
+    } | null;
+    handlers: {
+        onPointerDown: (event: ReactPointerEvent<HTMLElement>) => void;
+        onPointerMove: (event: ReactPointerEvent<HTMLElement>) => void;
+        onPointerUp: (event: ReactPointerEvent<HTMLElement>) => void;
+        onPointerCancel: () => void;
+    };
+}
+export declare function useClipDrag(clipId: string, onTap: () => void): ClipDrag;

package/dist/presentation/useClipDrag.js

@@ -0,0 +1,65 @@
+"use client";
+import { useRef, useState } from "react";
+import { usePresentation } from "./store.js";
+const DRAG_THRESHOLD = 6;
+const DROP_ATTRIBUTE = "data-presentation-drop";
+function dropAt(doc, clipId, x, y) {
+  const target = doc.elementFromPoint(x, y)?.closest(`[${DROP_ATTRIBUTE}]`);
+  if (!target) return false;
+  const state = usePresentation.getState();
+  if (target.getAttribute(DROP_ATTRIBUTE) === "slide") {
+    const index2 = Number(target.getAttribute("data-slide-index"));
+    if (!Number.isInteger(index2)) return false;
+    state.goTo(index2);
+    state.place(clipId);
+    return true;
+  }
+  const index = Number(target.getAttribute("data-slide-index"));
+  if (target.hasAttribute("data-slide-index") && Number.isInteger(index)) state.goTo(index);
+  const box = target.getBoundingClientRect();
+  state.place(clipId, { x: (x - box.left) / box.width, y: (y - box.top) / box.height });
+  return true;
+}
+function useClipDrag(clipId, onTap) {
+  const press = useRef(null);
+  const [ghost, setGhost] = useState(null);
+  const end = () => {
+    press.current = null;
+    setGhost(null);
+    usePresentation.getState().setDragging(null);
+  };
+  return {
+    ghost,
+    handlers: {
+      onPointerDown: (event) => {
+        if (event.button !== 0) return;
+        press.current = { x: event.clientX, y: event.clientY, dragging: false };
+      },
+      onPointerMove: (event) => {
+        const p = press.current;
+        if (!p) return;
+        if (!p.dragging) {
+          if (Math.hypot(event.clientX - p.x, event.clientY - p.y) < DRAG_THRESHOLD) return;
+          p.dragging = true;
+          event.currentTarget.setPointerCapture(event.pointerId);
+          usePresentation.getState().setDragging(clipId);
+        }
+        event.preventDefault();
+        setGhost({ x: event.clientX, y: event.clientY });
+      },
+      onPointerUp: (event) => {
+        const p = press.current;
+        if (p?.dragging)
+          dropAt(event.currentTarget.ownerDocument, clipId, event.clientX, event.clientY);
+        else if (p) onTap();
+        end();
+      },
+      onPointerCancel: end
+    }
+  };
+}
+export {
+  DROP_ATTRIBUTE,
+  useClipDrag
+};
+//# sourceMappingURL=useClipDrag.js.map

package/dist/presentation/useClipDrag.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/useClipDrag.ts"],
+  "sourcesContent": ["/**\n * Dragging a clip from the tray onto a slide, with pointer events: the same for a mouse, a pen and\n * a finger (HTML drag and drop does not work on touch screens). A drag starts once the pointer has\n * moved a little; a thumbnail follows it; on release, what is under it decides: the stage (the\n * clip goes on the current slide where it was dropped) or a slide chip (on that slide). A press\n * that does not move is a tap.\n *\n * Drop targets are marked with `data-presentation-drop` (\"stage\", or \"slide\" with\n * `data-slide-index`), so they are found under the pointer in whichever window the tray is in.\n */\n\nimport { useRef, useState, type PointerEvent as ReactPointerEvent } from 'react'\nimport { usePresentation } from './store'\n\n/** How far (px) the pointer moves before a press becomes a drag. */\nconst DRAG_THRESHOLD = 6\n\nexport const DROP_ATTRIBUTE = 'data-presentation-drop'\n\nexport interface ClipDrag {\n  /** Where the dragged thumbnail is (client px), while dragging. */\n  ghost: { x: number; y: number } | null\n  handlers: {\n    onPointerDown: (event: ReactPointerEvent<HTMLElement>) => void\n    onPointerMove: (event: ReactPointerEvent<HTMLElement>) => void\n    onPointerUp: (event: ReactPointerEvent<HTMLElement>) => void\n    onPointerCancel: () => void\n  }\n}\n\n/** Drop a clip at a point of the window: on the stage there, or on a slide chip. */\nfunction dropAt(doc: Document, clipId: string, x: number, y: number): boolean {\n  const target = doc.elementFromPoint(x, y)?.closest(`[${DROP_ATTRIBUTE}]`)\n  if (!target) return false\n  const state = usePresentation.getState()\n  if (target.getAttribute(DROP_ATTRIBUTE) === 'slide') {\n    const index = Number(target.getAttribute('data-slide-index'))\n    if (!Number.isInteger(index)) return false\n    state.goTo(index)\n    state.place(clipId)\n    return true\n  }\n  // A slide's stage (the editor shows them all): that slide, at the point.\n  const index = Number(target.getAttribute('data-slide-index'))\n  if (target.hasAttribute('data-slide-index') && Number.isInteger(index)) state.goTo(index)\n  const box = target.getBoundingClientRect()\n  state.place(clipId, { x: (x - box.left) / box.width, y: (y - box.top) / box.height })\n  return true\n}\n\nexport function useClipDrag(clipId: string, onTap: () => void): ClipDrag {\n  const press = useRef<{ x: number; y: number; dragging: boolean } | null>(null)\n  const [ghost, setGhost] = useState<{ x: number; y: number } | null>(null)\n\n  const end = () => {\n    press.current = null\n    setGhost(null)\n    usePresentation.getState().setDragging(null)\n  }\n\n  return {\n    ghost,\n    handlers: {\n      onPointerDown: (event) => {\n        if (event.button !== 0) return\n        press.current = { x: event.clientX, y: event.clientY, dragging: false }\n      },\n      onPointerMove: (event) => {\n        const p = press.current\n        if (!p) return\n        if (!p.dragging) {\n          if (Math.hypot(event.clientX - p.x, event.clientY - p.y) < DRAG_THRESHOLD) return\n          p.dragging = true\n          // Keep receiving the pointer wherever it goes, and stop the browser scrolling for it.\n          event.currentTarget.setPointerCapture(event.pointerId)\n          usePresentation.getState().setDragging(clipId)\n        }\n        event.preventDefault()\n        setGhost({ x: event.clientX, y: event.clientY })\n      },\n      onPointerUp: (event) => {\n        const p = press.current\n        if (p?.dragging)\n          dropAt(event.currentTarget.ownerDocument, clipId, event.clientX, event.clientY)\n        else if (p) onTap()\n        end()\n      },\n      onPointerCancel: end,\n    },\n  }\n}\n"],
+  "mappings": ";AAWA,SAAS,QAAQ,gBAAwD;AACzE,SAAS,uBAAuB;AAGhC,MAAM,iBAAiB;AAEhB,MAAM,iBAAiB;AAc9B,SAAS,OAAO,KAAe,QAAgB,GAAW,GAAoB;AAC5E,QAAM,SAAS,IAAI,iBAAiB,GAAG,CAAC,GAAG,QAAQ,IAAI,cAAc,GAAG;AACxE,MAAI,CAAC,OAAQ,QAAO;AACpB,QAAM,QAAQ,gBAAgB,SAAS;AACvC,MAAI,OAAO,aAAa,cAAc,MAAM,SAAS;AACnD,UAAMA,SAAQ,OAAO,OAAO,aAAa,kBAAkB,CAAC;AAC5D,QAAI,CAAC,OAAO,UAAUA,MAAK,EAAG,QAAO;AACrC,UAAM,KAAKA,MAAK;AAChB,UAAM,MAAM,MAAM;AAClB,WAAO;AAAA,EACT;AAEA,QAAM,QAAQ,OAAO,OAAO,aAAa,kBAAkB,CAAC;AAC5D,MAAI,OAAO,aAAa,kBAAkB,KAAK,OAAO,UAAU,KAAK,EAAG,OAAM,KAAK,KAAK;AACxF,QAAM,MAAM,OAAO,sBAAsB;AACzC,QAAM,MAAM,QAAQ,EAAE,IAAI,IAAI,IAAI,QAAQ,IAAI,OAAO,IAAI,IAAI,IAAI,OAAO,IAAI,OAAO,CAAC;AACpF,SAAO;AACT;AAEO,SAAS,YAAY,QAAgB,OAA6B;AACvE,QAAM,QAAQ,OAA2D,IAAI;AAC7E,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA0C,IAAI;AAExE,QAAM,MAAM,MAAM;AAChB,UAAM,UAAU;AAChB,aAAS,IAAI;AACb,oBAAgB,SAAS,EAAE,YAAY,IAAI;AAAA,EAC7C;AAEA,SAAO;AAAA,IACL;AAAA,IACA,UAAU;AAAA,MACR,eAAe,CAAC,UAAU;AACxB,YAAI,MAAM,WAAW,EAAG;AACxB,cAAM,UAAU,EAAE,GAAG,MAAM,SAAS,GAAG,MAAM,SAAS,UAAU,MAAM;AAAA,MACxE;AAAA,MACA,eAAe,CAAC,UAAU;AACxB,cAAM,IAAI,MAAM;AAChB,YAAI,CAAC,EAAG;AACR,YAAI,CAAC,EAAE,UAAU;AACf,cAAI,KAAK,MAAM,MAAM,UAAU,EAAE,GAAG,MAAM,UAAU,EAAE,CAAC,IAAI,eAAgB;AAC3E,YAAE,WAAW;AAEb,gBAAM,cAAc,kBAAkB,MAAM,SAAS;AACrD,0BAAgB,SAAS,EAAE,YAAY,MAAM;AAAA,QAC/C;AACA,cAAM,eAAe;AACrB,iBAAS,EAAE,GAAG,MAAM,SAAS,GAAG,MAAM,QAAQ,CAAC;AAAA,MACjD;AAAA,MACA,aAAa,CAAC,UAAU;AACtB,cAAM,IAAI,MAAM;AAChB,YAAI,GAAG;AACL,iBAAO,MAAM,cAAc,eAAe,QAAQ,MAAM,SAAS,MAAM,OAAO;AAAA,iBACvE,EAAG,OAAM;AAClB,YAAI;AAAA,MACN;AAAA,MACA,iBAAiB;AAAA,IACnB;AAAA,EACF;AACF;",
+  "names": ["index"]
+}

package/dist/presentation/useObjectUrl.d.ts

@@ -0,0 +1,6 @@
+/**
+ * An object URL for a file, owned by the mount that made it and revoked when it unmounts or the
+ * file changes. Made in an effect, not a memo: a memoised URL survives a remount (React's
+ * StrictMode replays mount effects) while the first mount's cleanup has already revoked it.
+ */
+export declare function useObjectUrl(file: Blob): string | undefined;

package/dist/presentation/useObjectUrl.js

@@ -0,0 +1,15 @@
+"use client";
+import { useEffect, useState } from "react";
+function useObjectUrl(file) {
+  const [url, setUrl] = useState();
+  useEffect(() => {
+    const next = URL.createObjectURL(file);
+    setUrl(next);
+    return () => URL.revokeObjectURL(next);
+  }, [file]);
+  return url;
+}
+export {
+  useObjectUrl
+};
+//# sourceMappingURL=useObjectUrl.js.map

package/dist/presentation/useObjectUrl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/useObjectUrl.ts"],
+  "sourcesContent": ["import { useEffect, useState } from 'react'\n\n/**\n * An object URL for a file, owned by the mount that made it and revoked when it unmounts or the\n * file changes. Made in an effect, not a memo: a memoised URL survives a remount (React's\n * StrictMode replays mount effects) while the first mount's cleanup has already revoked it.\n */\nexport function useObjectUrl(file: Blob): string | undefined {\n  const [url, setUrl] = useState<string>()\n  useEffect(() => {\n    const next = URL.createObjectURL(file)\n    setUrl(next)\n    return () => URL.revokeObjectURL(next)\n  }, [file])\n  return url\n}\n"],
+  "mappings": ";AAAA,SAAS,WAAW,gBAAgB;AAO7B,SAAS,aAAa,MAAgC;AAC3D,QAAM,CAAC,KAAK,MAAM,IAAI,SAAiB;AACvC,YAAU,MAAM;AACd,UAAM,OAAO,IAAI,gBAAgB,IAAI;AACrC,WAAO,IAAI;AACX,WAAO,MAAM,IAAI,gBAAgB,IAAI;AAAA,EACvC,GAAG,CAAC,IAAI,CAAC;AACT,SAAO;AACT;",
+  "names": []
+}

package/dist/presentation/usePresenterKeys.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The keys of the presentation window. A presenter (or a presentation clicker, which sends Page Up /
+ * Page Down and "." or "b"): previous / next slide and blank the stage; while presenting, F for
+ * full screen and Escape back to editing. While editing with a clip selected: the arrows nudge it
+ * (Shift: further), Delete takes it off the slide and Escape deselects it.
+ */
+/** Full screen on or off for a window's page (from a key or click in that window). */
+export declare function toggleFullscreen(view: Window): void;
+export interface PresenterSelection {
+    clipId: string | null;
+    clear: () => void;
+}
+export declare function usePresenterKeys(view: Window | null | undefined, presenting: boolean, selection?: PresenterSelection): void;

package/dist/presentation/usePresenterKeys.js

@@ -0,0 +1,62 @@
+"use client";
+import { useEffect } from "react";
+import { toggleStageVideos } from "./stage-videos.js";
+import { STAGE_ASPECT } from "./model.js";
+import { usePresentation } from "./store.js";
+import { moveBox } from "./boxes.js";
+const NUDGE = 5e-3;
+const BIG_NUDGE = 0.04;
+function toggleFullscreen(view) {
+  const doc = view.document;
+  if (doc.fullscreenElement) void doc.exitFullscreen();
+  else void doc.documentElement.requestFullscreen?.();
+}
+function usePresenterKeys(view, presenting, selection) {
+  const selected = presenting ? null : selection?.clipId ?? null;
+  const clear = selection?.clear;
+  useEffect(() => {
+    if (!view) return;
+    const onKeyDown = (event) => {
+      if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return;
+      const target = event.target;
+      if (target?.closest?.('input, textarea, select, [contenteditable="true"]')) return;
+      const state = usePresentation.getState();
+      const key = event.key;
+      const onSlide = selected && state.slides[state.current]?.items.some((i) => i.clipId === selected);
+      const box = selected?.startsWith("box-") ? state.slides.flatMap((slide) => slide.boxes).find((entry) => entry.id === selected) : void 0;
+      if (box && key.startsWith("Arrow")) {
+        const step = event.shiftKey ? BIG_NUDGE : NUDGE;
+        const dx = key === "ArrowLeft" ? -step : key === "ArrowRight" ? step : 0;
+        const dy = (key === "ArrowUp" ? -step : key === "ArrowDown" ? step : 0) * STAGE_ASPECT;
+        state.updateBox(box.id, (entry) => ({ ...entry, frame: moveBox(entry.frame, dx, dy) }));
+      } else if (box && (key === "Delete" || key === "Backspace")) {
+        state.removeBox(box.id);
+        clear?.();
+      } else if (onSlide && key.startsWith("Arrow")) {
+        const step = event.shiftKey ? BIG_NUDGE : NUDGE;
+        const dx = key === "ArrowLeft" ? -step : key === "ArrowRight" ? step : 0;
+        const dy = (key === "ArrowUp" ? -step : key === "ArrowDown" ? step : 0) * STAGE_ASPECT;
+        state.nudge(selected, dx, dy);
+      } else if (onSlide && (key === "Delete" || key === "Backspace")) {
+        state.unplace(selected);
+        clear?.();
+      } else if (selected && key === "Escape") clear?.();
+      else if (!presenting) return;
+      else if (key === "ArrowRight" || key === "PageDown") state.goTo(state.current + 1);
+      else if (key === "ArrowLeft" || key === "PageUp") state.goTo(state.current - 1);
+      else if (key === "b" || key === "B" || key === ".") state.setBlank(!state.blank);
+      else if (presenting && (key === "f" || key === "F")) toggleFullscreen(view);
+      else if (presenting && key === " " && toggleStageVideos(view.document)) {
+      } else if (presenting && key === "Escape") state.setPresenting(false);
+      else return;
+      event.preventDefault();
+    };
+    view.addEventListener("keydown", onKeyDown);
+    return () => view.removeEventListener("keydown", onKeyDown);
+  }, [view, presenting, selected, clear]);
+}
+export {
+  toggleFullscreen,
+  usePresenterKeys
+};
+//# sourceMappingURL=usePresenterKeys.js.map

package/dist/presentation/usePresenterKeys.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/usePresenterKeys.ts"],
+  "sourcesContent": ["/**\n * The keys of the presentation window. A presenter (or a presentation clicker, which sends Page Up /\n * Page Down and \".\" or \"b\"): previous / next slide and blank the stage; while presenting, F for\n * full screen and Escape back to editing. While editing with a clip selected: the arrows nudge it\n * (Shift: further), Delete takes it off the slide and Escape deselects it.\n */\n\nimport { useEffect } from 'react'\nimport { toggleStageVideos } from './stage-videos'\nimport { STAGE_ASPECT } from './model'\nimport { usePresentation } from './store'\nimport { moveBox } from './boxes'\n\n/** A nudge, as a fraction of the stage width (vertical nudges move as far on screen). */\nconst NUDGE = 0.005\nconst BIG_NUDGE = 0.04\n\n/** Full screen on or off for a window's page (from a key or click in that window). */\nexport function toggleFullscreen(view: Window): void {\n  const doc = view.document\n  if (doc.fullscreenElement) void doc.exitFullscreen()\n  else void doc.documentElement.requestFullscreen?.()\n}\n\nexport interface PresenterSelection {\n  clipId: string | null\n  clear: () => void\n}\n\nexport function usePresenterKeys(\n  view: Window | null | undefined,\n  presenting: boolean,\n  selection?: PresenterSelection\n): void {\n  const selected = presenting ? null : (selection?.clipId ?? null)\n  const clear = selection?.clear\n  useEffect(() => {\n    if (!view) return\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return\n      const target = event.target as HTMLElement | null\n      if (target?.closest?.('input, textarea, select, [contenteditable=\"true\"]')) return\n      const state = usePresentation.getState()\n      const key = event.key\n      const onSlide =\n        selected && state.slides[state.current]?.items.some((i) => i.clipId === selected)\n      const box = selected?.startsWith('box-')\n        ? state.slides.flatMap((slide) => slide.boxes).find((entry) => entry.id === selected)\n        : undefined\n      if (box && key.startsWith('Arrow')) {\n        const step = event.shiftKey ? BIG_NUDGE : NUDGE\n        const dx = key === 'ArrowLeft' ? -step : key === 'ArrowRight' ? step : 0\n        const dy = (key === 'ArrowUp' ? -step : key === 'ArrowDown' ? step : 0) * STAGE_ASPECT\n        state.updateBox(box.id, (entry) => ({ ...entry, frame: moveBox(entry.frame, dx, dy) }))\n      } else if (box && (key === 'Delete' || key === 'Backspace')) {\n        state.removeBox(box.id)\n        clear?.()\n      } else if (onSlide && key.startsWith('Arrow')) {\n        const step = event.shiftKey ? BIG_NUDGE : NUDGE\n        const dx = key === 'ArrowLeft' ? -step : key === 'ArrowRight' ? step : 0\n        const dy = (key === 'ArrowUp' ? -step : key === 'ArrowDown' ? step : 0) * STAGE_ASPECT\n        state.nudge(selected, dx, dy)\n      } else if (onSlide && (key === 'Delete' || key === 'Backspace')) {\n        state.unplace(selected)\n        clear?.()\n      } else if (selected && key === 'Escape') clear?.()\n      // Editing (in the app's own window too): only a selected clip takes keys.\n      else if (!presenting) return\n      else if (key === 'ArrowRight' || key === 'PageDown') state.goTo(state.current + 1)\n      else if (key === 'ArrowLeft' || key === 'PageUp') state.goTo(state.current - 1)\n      else if (key === 'b' || key === 'B' || key === '.') state.setBlank(!state.blank)\n      else if (presenting && (key === 'f' || key === 'F')) toggleFullscreen(view)\n      // Space plays or pauses the slide's videos.\n      else if (presenting && key === ' ' && toggleStageVideos(view.document)) {\n        // handled\n      }\n      // Out of full screen the browser takes the first Escape; the next one stops presenting.\n      else if (presenting && key === 'Escape') state.setPresenting(false)\n      else return\n      event.preventDefault()\n    }\n    view.addEventListener('keydown', onKeyDown)\n    return () => view.removeEventListener('keydown', onKeyDown)\n  }, [view, presenting, selected, clear])\n}\n"],
+  "mappings": ";AAOA,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,eAAe;AAGxB,MAAM,QAAQ;AACd,MAAM,YAAY;AAGX,SAAS,iBAAiB,MAAoB;AACnD,QAAM,MAAM,KAAK;AACjB,MAAI,IAAI,kBAAmB,MAAK,IAAI,eAAe;AAAA,MAC9C,MAAK,IAAI,gBAAgB,oBAAoB;AACpD;AAOO,SAAS,iBACd,MACA,YACA,WACM;AACN,QAAM,WAAW,aAAa,OAAQ,WAAW,UAAU;AAC3D,QAAM,QAAQ,WAAW;AACzB,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,YAAY,CAAC,UAAyB;AAC1C,UAAI,MAAM,oBAAoB,MAAM,WAAW,MAAM,WAAW,MAAM,OAAQ;AAC9E,YAAM,SAAS,MAAM;AACrB,UAAI,QAAQ,UAAU,mDAAmD,EAAG;AAC5E,YAAM,QAAQ,gBAAgB,SAAS;AACvC,YAAM,MAAM,MAAM;AAClB,YAAM,UACJ,YAAY,MAAM,OAAO,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,MAAM,EAAE,WAAW,QAAQ;AAClF,YAAM,MAAM,UAAU,WAAW,MAAM,IACnC,MAAM,OAAO,QAAQ,CAAC,UAAU,MAAM,KAAK,EAAE,KAAK,CAAC,UAAU,MAAM,OAAO,QAAQ,IAClF;AACJ,UAAI,OAAO,IAAI,WAAW,OAAO,GAAG;AAClC,cAAM,OAAO,MAAM,WAAW,YAAY;AAC1C,cAAM,KAAK,QAAQ,cAAc,CAAC,OAAO,QAAQ,eAAe,OAAO;AACvE,cAAM,MAAM,QAAQ,YAAY,CAAC,OAAO,QAAQ,cAAc,OAAO,KAAK;AAC1E,cAAM,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE,GAAG,OAAO,OAAO,QAAQ,MAAM,OAAO,IAAI,EAAE,EAAE,EAAE;AAAA,MACxF,WAAW,QAAQ,QAAQ,YAAY,QAAQ,cAAc;AAC3D,cAAM,UAAU,IAAI,EAAE;AACtB,gBAAQ;AAAA,MACV,WAAW,WAAW,IAAI,WAAW,OAAO,GAAG;AAC7C,cAAM,OAAO,MAAM,WAAW,YAAY;AAC1C,cAAM,KAAK,QAAQ,cAAc,CAAC,OAAO,QAAQ,eAAe,OAAO;AACvE,cAAM,MAAM,QAAQ,YAAY,CAAC,OAAO,QAAQ,cAAc,OAAO,KAAK;AAC1E,cAAM,MAAM,UAAU,IAAI,EAAE;AAAA,MAC9B,WAAW,YAAY,QAAQ,YAAY,QAAQ,cAAc;AAC/D,cAAM,QAAQ,QAAQ;AACtB,gBAAQ;AAAA,MACV,WAAW,YAAY,QAAQ,SAAU,SAAQ;AAAA,eAExC,CAAC,WAAY;AAAA,eACb,QAAQ,gBAAgB,QAAQ,WAAY,OAAM,KAAK,MAAM,UAAU,CAAC;AAAA,eACxE,QAAQ,eAAe,QAAQ,SAAU,OAAM,KAAK,MAAM,UAAU,CAAC;AAAA,eACrE,QAAQ,OAAO,QAAQ,OAAO,QAAQ,IAAK,OAAM,SAAS,CAAC,MAAM,KAAK;AAAA,eACtE,eAAe,QAAQ,OAAO,QAAQ,KAAM,kBAAiB,IAAI;AAAA,eAEjE,cAAc,QAAQ,OAAO,kBAAkB,KAAK,QAAQ,GAAG;AAAA,MAExE,WAES,cAAc,QAAQ,SAAU,OAAM,cAAc,KAAK;AAAA,UAC7D;AACL,YAAM,eAAe;AAAA,IACvB;AACA,SAAK,iBAAiB,WAAW,SAAS;AAC1C,WAAO,MAAM,KAAK,oBAAoB,WAAW,SAAS;AAAA,EAC5D,GAAG,CAAC,MAAM,YAAY,UAAU,KAAK,CAAC;AACxC;",
+  "names": []
+}