plotlink-ows 1.0.33 → 1.2.95

package/app/web/components/WorkflowCoach.tsx

@@ -0,0 +1,156 @@
+import { useEffect, useState } from "react";
+import type { CartoonCoach, CoachUiAction } from "@app-lib/cartoon-coach";
+import type { StoryProgress } from "@app-lib/story-progress";
+
+/**
+ * Persistent cartoon workflow coach (#429). Converts the current story/episode
+ * state into one stage label + one primary next action — an agent copy-paste
+ * prompt or a direct in-app UI action — so a normal writer always knows the next
+ * step without reading terminal logs or technical warnings. It never blocks the
+ * terminal or advanced controls; it just makes the normal path obvious.
+ *
+ * Two pieces:
+ *  - `WorkflowCoachView` is presentational (takes an already-loaded coach) so the
+ *    progress overview, which already fetches the progress payload, can render it
+ *    with no extra request.
+ *  - `WorkflowCoach` is the self-loading container the file views use.
+ *
+ * Fiction is unaffected: the coach is null for fiction, so the view renders
+ * nothing.
+ */
+
+interface WorkflowCoachViewProps {
+  coach: CartoonCoach | null | undefined;
+  /** Run an app-driven step (the agent steps copy a prompt instead). */
+  onAction: (action: CoachUiAction, episodeFile: string | null) => void;
+  className?: string;
+  /** Show a clear completed state instead of disappearing when no coach exists. */
+  showEmptyState?: boolean;
+}
+
+export function WorkflowCoachView({ coach, onAction, className = "", showEmptyState = false }: WorkflowCoachViewProps) {
+  // Track the prompt that was copied rather than a bare boolean, so the "Copied!"
+  // confirmation derives to false the moment the coach (and its prompt) changes —
+  // no reset effect, no stale confirmation under a new stage.
+  const [copiedPrompt, setCopiedPrompt] = useState<string | null>(null);
+  const copied = copiedPrompt !== null && copiedPrompt === coach?.prompt;
+
+  if (coach === undefined) return null;
+  if (!coach) {
+    if (!showEmptyState) return null;
+    return (
+      <div
+        className={`m-3 rounded-lg border border-green-700/25 bg-green-950/5 px-4 py-3 ${className}`}
+        data-testid="workflow-coach"
+        data-state="complete"
+      >
+        <div className="flex items-start gap-3">
+          <span className="rounded-full bg-green-700/10 px-2 py-1 text-[10px] font-bold uppercase tracking-[0.16em] text-green-700">
+            Complete
+          </span>
+          <div className="min-w-0 flex-1">
+            <p className="text-sm font-semibold text-foreground">No next action available</p>
+            <p className="mt-0.5 text-xs text-muted">This workflow has no queued next step right now.</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`m-3 rounded-lg border border-accent/40 bg-accent/10 px-4 py-3 shadow-sm ${className}`}
+      data-testid="workflow-coach"
+      data-stage={coach.stageLabel}
+      data-action-kind={coach.actionKind}
+      data-ui-action={coach.uiAction ?? ""}
+    >
+      <div className="flex items-center gap-3">
+        <div className="min-w-0 flex-1">
+          <span className="inline-flex rounded-full bg-background px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.14em] text-accent" data-testid="workflow-coach-stage">
+            {coach.stageLabel}
+          </span>
+          <p className="mt-1 text-sm text-foreground" data-testid="workflow-coach-action">
+            <span className="font-semibold">Next: </span>
+            <span>{coach.action}</span>
+          </p>
+          {copied && <p className="mt-1 text-[11px] font-medium text-accent">Prompt copied.</p>}
+        </div>
+        {coach.actionKind === "agent" && coach.prompt ? (
+          <button
+            onClick={() => {
+              if (!coach.prompt) return;
+              const prompt = coach.prompt;
+              navigator.clipboard?.writeText(prompt).then(() => setCopiedPrompt(prompt)).catch(() => {});
+            }}
+            data-testid="workflow-coach-copy"
+            className="flex-shrink-0 rounded bg-accent px-4 py-2.5 text-sm font-bold text-white shadow-sm transition-colors hover:bg-accent-dim"
+          >
+            Next Action
+          </button>
+        ) : coach.actionKind === "ui" && coach.uiAction ? (
+          <button
+            onClick={() => onAction(coach.uiAction!, coach.episodeFile)}
+            data-testid="workflow-coach-do"
+            className="flex-shrink-0 rounded bg-accent px-4 py-2.5 text-sm font-bold text-white shadow-sm transition-colors hover:bg-accent-dim"
+          >
+            Next Action
+          </button>
+        ) : null}
+    </div>
+    </div>
+  );
+}
+
+interface WorkflowCoachProps {
+  storyName: string;
+  /** The file currently in focus, so the coach speaks about that episode (#429). */
+  fileName?: string | null;
+  authFetch: (url: string, opts?: RequestInit) => Promise<Response>;
+  /** Bumped by the parent to reload after a state change (cut edit / publish). */
+  refreshKey?: number;
+  onAction: (action: CoachUiAction, episodeFile: string | null) => void;
+  showEmptyState?: boolean;
+}
+
+/**
+ * Self-loading coach for the file views. Fetches the story progress (scoped to
+ * the focused file) and renders the coach bar. The coach is cleared in EVERY
+ * load exit path — at the start, on a non-OK response, and on error — so a
+ * previous file's coach can never linger under a different file when the new
+ * request fails or 404s (the stale-state-on-error class flagged on #420/#427).
+ */
+export function WorkflowCoach({ storyName, fileName, authFetch, refreshKey = 0, onAction, showEmptyState = false }: WorkflowCoachProps) {
+  const [coach, setCoach] = useState<CartoonCoach | null | undefined>(undefined);
+
+  // Reset the coach the instant the target changes (file switch / refresh),
+  // during render — React's recommended way to reset state on a changing input.
+  // This clears the prior file's coach BEFORE the new load resolves; and because
+  // the effect below sets the coach to null on a non-OK response and never sets
+  // it on error, it also STAYS cleared when the new load fails or 404s (the
+  // stale-state-on-error class flagged on #420/#427).
+  //
+  // JSON.stringify keeps the key printable and source-safe (#437): it changes
+  // whenever any input changes — identical reset semantics — and it escapes the
+  // parts so a separator can never collide with the values' own content.
+  const targetKey = JSON.stringify([storyName, fileName ?? "", refreshKey]);
+  const [loadedKey, setLoadedKey] = useState<string | null>(null);
+  if (loadedKey !== targetKey) {
+    setCoach(undefined);
+    setLoadedKey(targetKey);
+  }
+
+  useEffect(() => {
+    let cancelled = false;
+    const focus = fileName ? `?focus=${encodeURIComponent(fileName)}` : "";
+    authFetch(`/api/stories/${storyName}/progress${focus}`)
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data: (StoryProgress & { coach?: CartoonCoach | null }) | null) => {
+        if (!cancelled) setCoach(data?.coach ?? null);
+      })
+      .catch(() => { /* leave it cleared — the coach is best-effort */ });
+    return () => { cancelled = true; };
+  }, [storyName, fileName, authFetch, refreshKey]);
+
+  return <WorkflowCoachView coach={coach} onAction={onAction} showEmptyState={showEmptyState} />;
+}

package/app/web/components/asset-image.tsx

@@ -0,0 +1,114 @@
+import { useState, useEffect } from "react";
+
+type AuthFetch = (url: string, opts?: RequestInit) => Promise<Response>;
+
+/** Resolve a story-relative asset path to its auth-protected API URL. */
+export function assetUrl(storyName: string, assetPath: string): string {
+  const relative = assetPath.startsWith("assets/") ? assetPath.slice(7) : assetPath;
+  return `/api/stories/${storyName}/asset/${relative}`;
+}
+
+interface AssetState {
+  /** Same-origin blob object URL safe to use as an <img src>, or null. */
+  url: string | null;
+  loading: boolean;
+  error: boolean;
+}
+
+/**
+ * Load an auth-protected story asset as a blob object URL.
+ *
+ * Story asset routes sit behind `requireAuth`, but a browser `<img src>`
+ * request never carries the `Authorization: Bearer` header that `authFetch`
+ * adds, so the raw URL 401s and the image breaks. Instead we fetch the asset
+ * via `authFetch`, turn the response into a blob, and hand back an object URL.
+ * The object URL is revoked when the asset path changes or the component
+ * unmounts so we don't leak blobs across cut selections.
+ */
+export function useAuthedAsset(
+  storyName: string,
+  assetPath: string | null | undefined,
+  authFetch: AuthFetch,
+): AssetState {
+  const [state, setState] = useState<AssetState>({
+    url: null,
+    loading: !!assetPath,
+    error: false,
+  });
+
+  useEffect(() => {
+    if (!assetPath) {
+      setState({ url: null, loading: false, error: false });
+      return;
+    }
+
+    let objectUrl: string | null = null;
+    let cancelled = false;
+    setState({ url: null, loading: true, error: false });
+
+    (async () => {
+      try {
+        const res = await authFetch(assetUrl(storyName, assetPath));
+        if (!res.ok) throw new Error(`asset request failed (${res.status})`);
+        const blob = await res.blob();
+        if (cancelled) return;
+        objectUrl = URL.createObjectURL(blob);
+        setState({ url: objectUrl, loading: false, error: false });
+      } catch {
+        if (!cancelled) setState({ url: null, loading: false, error: true });
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [storyName, assetPath, authFetch]);
+
+  return state;
+}
+
+interface AssetImageProps {
+  storyName: string;
+  assetPath: string;
+  authFetch: AuthFetch;
+  alt: string;
+  className?: string;
+}
+
+/**
+ * Render an auth-protected story asset as an image, loading it through
+ * `useAuthedAsset`. Shows a neutral placeholder while loading and a clear
+ * "Image not available" state on failure so a broken auth boundary surfaces
+ * instead of a broken-image glyph.
+ */
+export function AssetImage({ storyName, assetPath, authFetch, alt, className }: AssetImageProps) {
+  const { url, loading, error } = useAuthedAsset(storyName, assetPath, authFetch);
+
+  if (error || (!loading && !url)) {
+    return (
+      <div className="w-full aspect-video bg-surface border border-border rounded flex items-center justify-center">
+        <span className="text-xs text-muted">Image not available</span>
+      </div>
+    );
+  }
+
+  if (!url) {
+    return (
+      <div
+        className="w-full aspect-video bg-surface border border-border rounded flex items-center justify-center"
+        data-testid="asset-loading"
+      >
+        <span className="text-xs text-muted">Loading image…</span>
+      </div>
+    );
+  }
+
+  return (
+    <img
+      src={url}
+      alt={alt}
+      className={className ?? "w-full rounded border border-border"}
+    />
+  );
+}

package/app/web/components/asset-test-utils.ts

@@ -0,0 +1,44 @@
+import { vi } from "vitest";
+
+/** Object URL returned by the stubbed `URL.createObjectURL` in jsdom tests. */
+export const MOCK_BLOB_URL = "blob:mock-asset-url";
+
+/**
+ * jsdom doesn't implement the object-URL APIs that `useAuthedAsset` relies on.
+ * Stub them so blob-backed asset loading works in component tests, and so a
+ * test can assert that an `<img>` points at the object URL rather than the
+ * raw auth-protected API route.
+ */
+export function installObjectUrlStub(): void {
+  const u = URL as unknown as {
+    createObjectURL: (b: Blob) => string;
+    revokeObjectURL: (s: string) => void;
+  };
+  u.createObjectURL = vi.fn(() => MOCK_BLOB_URL);
+  u.revokeObjectURL = vi.fn();
+}
+
+/**
+ * `authFetch` double for tests that render asset-loading components. Asset
+ * routes (`/asset/`) resolve to an image blob the way the real authenticated
+ * route does; every other route resolves to `jsonData`. This mirrors the real
+ * world where the Bearer header reaches both the data route and the image —
+ * the bug being fixed was a raw `<img src>` that never sent that header.
+ */
+export function makeAssetAuthFetch(jsonData: unknown = {}) {
+  return vi.fn((url: string) =>
+    Promise.resolve(
+      url.includes("/asset/")
+        ? {
+            ok: true,
+            status: 200,
+            blob: () => Promise.resolve(new Blob(["img-bytes"], { type: "image/webp" })),
+          }
+        : {
+            ok: true,
+            status: 200,
+            json: () => Promise.resolve(jsonData),
+          },
+    ),
+  );
+}

package/app/web/components/export-cut.ts

@@ -0,0 +1,320 @@
+import {
+  speechTailPoints,
+  balloonOutline,
+  validateOverlaysForExport,
+  bubbleLayoutOptionsForOverlay,
+  balloonRadiusForOverlay,
+  type TailPoints,
+} from "@app-lib/overlays";
+import { textPanelDimensions } from "@app-lib/cuts";
+// Re-exported so existing importers/tests can keep getting it from export-cut.
+export { textPanelDimensions } from "@app-lib/cuts";
+import { layoutBubbleText } from "@app-lib/bubble-text";
+import { compressCanvasToBlob, MAX_IMAGE_BYTES } from "../lib/image-compress";
+
+interface Overlay {
+  id: string;
+  type: "speech" | "narration" | "sfx";
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  text: string;
+  speaker?: string;
+  tailAnchor?: { x: number; y: number };
+  textStyle?: {
+    mode?: "auto" | "manual";
+    fontScale?: number;
+    fontWeight?: 400 | 700;
+    lineHeightFactor?: number;
+    speakerScale?: number;
+  };
+  bubbleStyle?: {
+    paddingX?: number;
+    paddingY?: number;
+    cornerRadius?: number;
+  };
+}
+
+// Re-exported for the existing export-size validation + tests; the compression
+// policy now lives in the shared image-compress module so the lettering export
+// and the Codex-image import path (#301) stay in lockstep.
+const MAX_SIZE = MAX_IMAGE_BYTES;
+
+export async function ensureFontsReady(families: string[]): Promise<{ ready: boolean; missing: string[] }> {
+  if (typeof document === "undefined" || !document.fonts || typeof document.fonts.load !== "function") {
+    return { ready: true, missing: [] };
+  }
+
+  const missing: string[] = [];
+  for (const family of families) {
+    try {
+      const loaded = await document.fonts.load(`16px "${family}"`);
+      // load() resolves with the FontFace[] that matched. An empty array means
+      // the family was never registered (e.g. CDN CSS blocked), so check() may
+      // only be matching a system fallback — treat as missing.
+      if (!loaded || loaded.length === 0) {
+        missing.push(family);
+      } else if (!document.fonts.check(`16px "${family}"`)) {
+        missing.push(family);
+      }
+    } catch {
+      missing.push(family);
+    }
+  }
+
+  return { ready: missing.length === 0, missing };
+}
+
+function loadImage(url: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error("Failed to load image"));
+    img.src = url;
+  });
+}
+
+// Webtoon balloon styling (#363). A near-opaque bubble with a strong, clean
+// near-black outline reads as a comic speech balloon rather than a faint UI box
+// (the old rgba(0,0,0,0.3) hairline). Narration is an intentional parchment
+// card with a softer outline; both stroke weights scale with the panel so the
+// look holds at any export resolution.
+const SPEECH_FILL = "rgba(255, 255, 255, 0.95)";
+const SPEECH_STROKE = "#1a1a1a";
+const NARRATION_FILL = "rgba(244, 239, 230, 0.94)";
+const NARRATION_STROKE = "rgba(26, 26, 26, 0.55)";
+
+// Outline weight as a fraction of the rendered panel height, so a balloon keeps
+// the same visual line thickness whether exported small or large (#363).
+function balloonStrokeWidth(renderHeight: number): number {
+  return Math.max(2, renderHeight * 0.004);
+}
+
+// Trace a speech balloon — rounded-rect body plus its pointer tail — as ONE
+// continuous outline, from the SHARED balloonOutline geometry (#341, formerly a
+// duplicate of #317's tracer). Because the editor-preview SVG path and this
+// export canvas now build from the identical command list, the tail is always a
+// detour in the body's perimeter (never a separate stroked shape) and the
+// exported balloon matches the preview with no internal body/tail seam. `tail`
+// is null for a bubble with no (or inside-the-bubble) tail → a rounded rect.
+function traceBalloonPath(
+  ctx: CanvasRenderingContext2D,
+  ox: number,
+  oy: number,
+  ow: number,
+  oh: number,
+  tail: TailPoints | null,
+  radius?: number,
+) {
+  ctx.beginPath();
+  for (const c of balloonOutline(ox, oy, ow, oh, tail, radius)) {
+    if (c.k === "M") ctx.moveTo(c.x, c.y);
+    else if (c.k === "L") ctx.lineTo(c.x, c.y);
+    else ctx.arcTo(c.cornerX, c.cornerY, c.x, c.y, c.r);
+  }
+  ctx.closePath();
+}
+
+export function renderOverlays(
+  ctx: CanvasRenderingContext2D,
+  overlays: Overlay[],
+  width: number,
+  height: number,
+  bodyFont: string,
+  displayFont: string,
+) {
+  for (const overlay of overlays) {
+    const ox = overlay.x * width;
+    const oy = overlay.y * height;
+    const ow = overlay.width * width;
+    const oh = overlay.height * height;
+
+    const strokeW = balloonStrokeWidth(height);
+    if (overlay.type === "speech") {
+      // Trace the body and its tail as a single outline so the exported balloon
+      // has no internal seam between them (#317): one fill, one stroke, with the
+      // tail forming part of the balloon's outline instead of a shape laid over
+      // a fully-stroked body border. A rounded line join keeps the tail/corner
+      // junctions soft and organic (#363).
+      const radius = balloonRadiusForOverlay(overlay, ow, oh);
+      const tail = overlay.tailAnchor ? speechTailPoints(ox, oy, ow, oh, overlay.tailAnchor, radius) : null;
+      traceBalloonPath(ctx, ox, oy, ow, oh, tail, radius);
+      ctx.fillStyle = SPEECH_FILL;
+      ctx.fill();
+      ctx.strokeStyle = SPEECH_STROKE;
+      ctx.lineWidth = strokeW;
+      ctx.lineJoin = "round";
+      ctx.stroke();
+    } else if (overlay.type === "narration") {
+      // Narration stays rectangular but reads as an intentional webtoon caption
+      // card: gently rounded corners + a confident (if softer-than-speech)
+      // outline, instead of a hairline box (#363).
+      const nr = Math.min(ow, oh) * 0.12;
+      ctx.beginPath();
+      ctx.roundRect(ox, oy, ow, oh, nr);
+      ctx.fillStyle = NARRATION_FILL;
+      ctx.fill();
+      ctx.strokeStyle = NARRATION_STROKE;
+      ctx.lineWidth = Math.max(1.5, strokeW * 0.75);
+      ctx.lineJoin = "round";
+      ctx.stroke();
+    }
+
+    const font = overlay.type === "sfx" ? displayFont : bodyFont;
+    const hasSpeaker = overlay.type !== "sfx" && !!overlay.speaker;
+    // Measure with the actual draw font so wrapping matches what is rendered.
+    const measure = (text: string, fontSize: number, fontWeight: 400 | 700 = 400): number => {
+      ctx.font = `${fontWeight} ${fontSize}px ${font}`;
+      return ctx.measureText(text).width;
+    };
+    const layout = layoutBubbleText(
+      measure,
+      overlay.text,
+      ow,
+      oh,
+      bubbleLayoutOptionsForOverlay(overlay, height, ow, oh),
+    );
+
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    const cx = ox + ow / 2;
+    const speakerStrip = hasSpeaker ? layout.speakerFontSize * 1.2 : 0;
+
+    // Draw the speaker label on its own strip at the top of the bubble.
+    if (hasSpeaker) {
+      ctx.fillStyle = "#3a3a3a";
+      ctx.font = `700 ${layout.speakerFontSize}px ${font}`;
+      ctx.fillText(overlay.speaker as string, cx, oy + speakerStrip / 2 + oh * 0.04, ow - 6);
+    }
+
+    // Lay out the wrapped body lines, vertically centered in the remaining box.
+    const bodyTop = oy + speakerStrip;
+    const bodyH = oh - speakerStrip;
+    const totalTextH = layout.lines.length * layout.lineHeight;
+    let lineY = bodyTop + bodyH / 2 - totalTextH / 2 + layout.lineHeight / 2;
+
+    ctx.font = `${overlay.textStyle?.fontWeight ?? 400} ${layout.fontSize}px ${font}`;
+    for (const line of layout.lines) {
+      if (overlay.type === "sfx") {
+        ctx.fillStyle = "#000";
+        ctx.strokeStyle = "#fff";
+        ctx.lineWidth = 3;
+        ctx.strokeText(line, cx, lineY);
+        ctx.fillText(line, cx, lineY);
+      } else {
+        ctx.fillStyle = "#1a1a1a";
+        ctx.fillText(line, cx, lineY);
+      }
+      lineY += layout.lineHeight;
+    }
+  }
+}
+
+interface CutTextContent {
+  narration?: string;
+  dialogue?: { speaker: string; text: string }[];
+}
+
+function renderCutText(
+  ctx: CanvasRenderingContext2D,
+  content: CutTextContent,
+  width: number,
+  height: number,
+  font: string,
+) {
+  const fontSize = Math.max(14, Math.min(height * 0.05, 28));
+  ctx.font = `${fontSize}px ${font}`;
+  ctx.fillStyle = "#1a1a1a";
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+
+  const lines: string[] = [];
+  if (content.dialogue) {
+    for (const d of content.dialogue) {
+      lines.push(`${d.speaker}: ${d.text}`);
+    }
+  }
+  if (content.narration) {
+    lines.push(content.narration);
+  }
+
+  const lineHeight = fontSize * 1.6;
+  const startY = height / 2 - ((lines.length - 1) * lineHeight) / 2;
+  for (let i = 0; i < lines.length; i++) {
+    ctx.fillText(lines[i], width / 2, startY + i * lineHeight, width - 40);
+  }
+}
+
+/** Style for a text/interstitial panel exported without a clean image (#351). */
+export interface TextPanelStyle {
+  /** CSS background color for the panel canvas. Defaults to white. */
+  background?: string;
+  /** Aspect ratio "W:H" (e.g. "4:5") sizing the canvas. Defaults to 800×600. */
+  aspectRatio?: string;
+}
+
+export async function exportCut(
+  cleanImageUrl: string | null,
+  overlays: Overlay[],
+  bodyFontFamily: string,
+  displayFontFamily: string,
+  cutText?: CutTextContent,
+  textPanel?: TextPanelStyle,
+): Promise<Blob> {
+  // Refuse to export an image whose overlays have invalid geometry — otherwise
+  // malformed (e.g. semantic-position) overlays render nothing and we silently
+  // produce an unlettered final (#309).
+  const overlayCheck = validateOverlaysForExport(overlays);
+  if (!overlayCheck.valid) {
+    throw new Error(overlayCheck.error ?? "Overlay geometry is invalid");
+  }
+
+  let width = 800;
+  let height = 600;
+  let img: HTMLImageElement | null = null;
+
+  if (cleanImageUrl) {
+    img = await loadImage(cleanImageUrl);
+    width = img.naturalWidth;
+    height = img.naturalHeight;
+  } else if (textPanel) {
+    // Text/interstitial panel: no clean image — render text on a styled canvas
+    // sized by the panel's aspect ratio (#351).
+    const dims = textPanelDimensions(textPanel.aspectRatio);
+    if (dims) {
+      width = dims.width;
+      height = dims.height;
+    }
+  }
+
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d")!;
+
+  if (img) {
+    ctx.drawImage(img, 0, 0, width, height);
+  } else {
+    ctx.fillStyle = textPanel?.background || "#ffffff";
+    ctx.fillRect(0, 0, width, height);
+  }
+
+  renderOverlays(ctx, overlays, width, height, bodyFontFamily, displayFontFamily);
+
+  if (cutText && overlays.length === 0 && !img) {
+    renderCutText(ctx, cutText, width, height, bodyFontFamily);
+  }
+
+  return compressCanvasToBlob(canvas);
+}
+
+export function validateExportSize(blob: Blob): { valid: boolean; error?: string } {
+  if (blob.size > MAX_SIZE) {
+    return { valid: false, error: `Image is ${(blob.size / 1024).toFixed(0)}KB, exceeds 1MB limit` };
+  }
+  return { valid: true };
+}
+
+export { MAX_SIZE };

package/app/web/dist/assets/export-cut-che5mMWc.js

@@ -0,0 +1 @@
+import{M as w,v as O,t as A,c as M,b as R,s as H,l as I,a as B,d as F}from"./index-Dc2TQ3Ij.js";const z=w;async function G(e){if(typeof document>"u"||!document.fonts||typeof document.fonts.load!="function")return{ready:!0,missing:[]};const n=[];for(const s of e)try{const t=await document.fonts.load(`16px "${s}"`);!t||t.length===0?n.push(s):document.fonts.check(`16px "${s}"`)||n.push(s)}catch{n.push(s)}return{ready:n.length===0,missing:n}}function C(e){return new Promise((n,s)=>{const t=new Image;t.crossOrigin="anonymous",t.onload=()=>n(t),t.onerror=()=>s(new Error("Failed to load image")),t.src=e})}const W="rgba(255, 255, 255, 0.95)",_="#1a1a1a",L="rgba(244, 239, 230, 0.94)",N="rgba(26, 26, 26, 0.55)";function Y(e){return Math.max(2,e*.004)}function K(e,n,s,t,c,d,f){e.beginPath();for(const o of F(n,s,t,c,d,f))o.k==="M"?e.moveTo(o.x,o.y):o.k==="L"?e.lineTo(o.x,o.y):e.arcTo(o.cornerX,o.cornerY,o.x,o.y,o.r);e.closePath()}function P(e,n,s,t,c,d){var f;for(const o of n){const l=o.x*s,i=o.y*t,r=o.width*s,a=o.height*t,y=Y(t);if(o.type==="speech"){const u=R(o,r,a),k=o.tailAnchor?H(l,i,r,a,o.tailAnchor,u):null;K(e,l,i,r,a,k,u),e.fillStyle=W,e.fill(),e.strokeStyle=_,e.lineWidth=y,e.lineJoin="round",e.stroke()}else if(o.type==="narration"){const u=Math.min(r,a)*.12;e.beginPath(),e.roundRect(l,i,r,a,u),e.fillStyle=L,e.fill(),e.strokeStyle=N,e.lineWidth=Math.max(1.5,y*.75),e.lineJoin="round",e.stroke()}const g=o.type==="sfx"?d:c,T=o.type!=="sfx"&&!!o.speaker,h=I((u,k,E=400)=>(e.font=`${E} ${k}px ${g}`,e.measureText(u).width),o.text,r,a,B(o,t,r,a));e.textAlign="center",e.textBaseline="middle";const p=l+r/2,S=T?h.speakerFontSize*1.2:0;T&&(e.fillStyle="#3a3a3a",e.font=`700 ${h.speakerFontSize}px ${g}`,e.fillText(o.speaker,p,i+S/2+a*.04,r-6));const v=i+S,b=a-S,$=h.lines.length*h.lineHeight;let m=v+b/2-$/2+h.lineHeight/2;e.font=`${((f=o.textStyle)==null?void 0:f.fontWeight)??400} ${h.fontSize}px ${g}`;for(const u of h.lines)o.type==="sfx"?(e.fillStyle="#000",e.strokeStyle="#fff",e.lineWidth=3,e.strokeText(u,p,m),e.fillText(u,p,m)):(e.fillStyle="#1a1a1a",e.fillText(u,p,m)),m+=h.lineHeight}}function X(e,n,s,t,c){const d=Math.max(14,Math.min(t*.05,28));e.font=`${d}px ${c}`,e.fillStyle="#1a1a1a",e.textAlign="center",e.textBaseline="middle";const f=[];if(n.dialogue)for(const i of n.dialogue)f.push(`${i.speaker}: ${i.text}`);n.narration&&f.push(n.narration);const o=d*1.6,l=t/2-(f.length-1)*o/2;for(let i=0;i<f.length;i++)e.fillText(f[i],s/2,l+i*o,s-40)}async function Z(e,n,s,t,c,d){const f=O(n);if(!f.valid)throw new Error(f.error??"Overlay geometry is invalid");let o=800,l=600,i=null;if(e)i=await C(e),o=i.naturalWidth,l=i.naturalHeight;else if(d){const y=A(d.aspectRatio);y&&(o=y.width,l=y.height)}const r=document.createElement("canvas");r.width=o,r.height=l;const a=r.getContext("2d");return i?a.drawImage(i,0,0,o,l):(a.fillStyle=(d==null?void 0:d.background)||"#ffffff",a.fillRect(0,0,o,l)),P(a,n,o,l,s,t),c&&n.length===0&&!i&&X(a,c,o,l,s),M(r)}function j(e){return e.size>z?{valid:!1,error:`Image is ${(e.size/1024).toFixed(0)}KB, exceeds 1MB limit`}:{valid:!0}}export{z as MAX_SIZE,G as ensureFontsReady,Z as exportCut,P as renderOverlays,A as textPanelDimensions,j as validateExportSize};