plotlink-ows 1.2.96 → 1.2.98

package/app/web/components/CutOverlayPreview.tsx

@@ -0,0 +1,314 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  getDefaultFont,
+  getDisplayFont,
+  getFontCdnUrl,
+  getFontFamily,
+  type FontEntry,
+} from "@app-lib/fonts";
+import {
+  speechTailPoints,
+  balloonPathD,
+  bubbleLayoutOptionsForOverlay,
+  balloonRadiusForOverlay,
+  type Overlay,
+} from "@app-lib/overlays";
+import { layoutBubbleText } from "@app-lib/bubble-text";
+import { textPanelDimensions } from "@app-lib/cuts";
+import { useAuthedAsset } from "./asset-image";
+
+type AuthFetch = (url: string, opts?: RequestInit) => Promise<Response>;
+
+function loadFont(font: FontEntry) {
+  const id = `gfont-${font.googleFontsId}`;
+  if (document.getElementById(id)) return;
+  const link = document.createElement("link");
+  link.id = id;
+  link.rel = "stylesheet";
+  link.href = getFontCdnUrl(font);
+  document.head.appendChild(link);
+}
+
+interface CutOverlayPreviewProps {
+  storyName: string;
+  assetPath?: string | null;
+  authFetch: AuthFetch;
+  alt: string;
+  overlays: Overlay[];
+  language?: string;
+  background?: string;
+  aspectRatio?: string;
+  className?: string;
+  onClick?: () => void;
+  testId?: string;
+}
+
+export function CutOverlayPreview({
+  storyName,
+  assetPath,
+  authFetch,
+  alt,
+  overlays,
+  language = "English",
+  background,
+  aspectRatio,
+  className,
+  onClick,
+  testId,
+}: CutOverlayPreviewProps) {
+  const bodyFont = getDefaultFont(language);
+  const displayFont = getDisplayFont();
+  const bodyFontFamily = getFontFamily(bodyFont);
+  const displayFontFamily = getFontFamily(displayFont);
+  const asset = useAuthedAsset(storyName, assetPath, authFetch);
+  const stageRef = useRef<HTMLDivElement | null>(null);
+  const measureContext = useMemo(
+    () =>
+      typeof document !== "undefined"
+        ? document.createElement("canvas").getContext("2d")
+        : null,
+    [],
+  );
+  const [fontsReady, setFontsReady] = useState(false);
+  const [naturalSize, setNaturalSize] = useState<{ width: number; height: number }>(
+    () => textPanelDimensions(aspectRatio) ?? { width: 800, height: 600 },
+  );
+  const [stageSize, setStageSize] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    loadFont(bodyFont);
+    loadFont(displayFont);
+  }, [bodyFont, displayFont]);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        if (document.fonts?.load) {
+          await Promise.all([
+            document.fonts.load(`16px "${bodyFont.family}"`),
+            document.fonts.load(`16px "${displayFont.family}"`),
+          ]);
+        }
+      } catch {
+        /* best effort */
+      }
+      if (!cancelled) setFontsReady(true);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [bodyFont.family, displayFont.family]);
+
+  useEffect(() => {
+    const el = stageRef.current;
+    if (!el) return;
+    const update = () => {
+      setStageSize({
+        width: el.clientWidth,
+        height: el.clientHeight,
+      });
+    };
+    if (typeof ResizeObserver === "undefined") {
+      update();
+      window.addEventListener("resize", update);
+      return () => window.removeEventListener("resize", update);
+    }
+    const observer = new ResizeObserver(() => {
+      update();
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  const measureWidth = useCallback(
+    (fontFamily: string) =>
+      (text: string, fontSize: number, fontWeight: 400 | 700 = 400): number => {
+        if (!measureContext) return text.length * fontSize * 0.5;
+        measureContext.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+        return measureContext.measureText(text).width;
+      },
+    [measureContext],
+  );
+
+  const stage = (
+    <div
+      className={className ?? "w-full rounded border border-border bg-white"}
+      data-testid={testId}
+      ref={stageRef}
+      style={{
+        aspectRatio: `${naturalSize.width} / ${naturalSize.height}`,
+        maxHeight: "32rem",
+      }}
+    >
+      <div className="relative w-full h-full overflow-hidden rounded border border-border bg-white">
+        {assetPath ? (
+          asset.error || (!asset.loading && !asset.url) ? (
+            <div className="w-full h-full flex items-center justify-center text-[10px] text-muted bg-surface/40">
+              Image not available
+            </div>
+          ) : asset.url ? (
+            <img
+              src={asset.url}
+              alt={alt}
+              className="absolute inset-0 w-full h-full object-contain"
+              draggable={false}
+              onLoad={(e) => {
+                const width = e.currentTarget.naturalWidth || naturalSize.width;
+                const height = e.currentTarget.naturalHeight || naturalSize.height;
+                if (width > 0 && height > 0) setNaturalSize({ width, height });
+              }}
+            />
+          ) : (
+            <div className="w-full h-full flex items-center justify-center text-[10px] text-muted bg-surface/40">
+              Loading image…
+            </div>
+          )
+        ) : (
+          <div
+            className="absolute inset-0"
+            style={{ background: background || "#101820" }}
+          />
+        )}
+
+        {stageSize.width > 0 && stageSize.height > 0 && overlays.length > 0 && (
+          <>
+            <svg
+              className="absolute inset-0 w-full h-full pointer-events-none"
+              data-testid={testId ? `${testId}-overlay-layer` : undefined}
+            >
+              {overlays.map((overlay) => {
+                if (overlay.type !== "speech") return null;
+                const ox = overlay.x * stageSize.width;
+                const oy = overlay.y * stageSize.height;
+                const ow = overlay.width * stageSize.width;
+                const oh = overlay.height * stageSize.height;
+                const radius = balloonRadiusForOverlay(overlay, ow, oh);
+                const tail = overlay.tailAnchor
+                  ? speechTailPoints(ox, oy, ow, oh, overlay.tailAnchor, radius)
+                  : null;
+                const strokeW = Math.max(1.25, stageSize.height * 0.004);
+                return (
+                  <path
+                    key={overlay.id}
+                    data-testid={testId ? `${testId}-overlay-${overlay.id}` : undefined}
+                    d={balloonPathD(ox, oy, ow, oh, tail, radius)}
+                    className="fill-white/95 stroke-[#1a1a1a]"
+                    strokeWidth={strokeW}
+                    strokeLinejoin="round"
+                  />
+                );
+              })}
+            </svg>
+            {overlays.map((overlay) => {
+              const left = overlay.x * stageSize.width;
+              const top = overlay.y * stageSize.height;
+              const width = overlay.width * stageSize.width;
+              const height = overlay.height * stageSize.height;
+              const fontFamily =
+                overlay.type === "sfx" ? displayFontFamily : bodyFontFamily;
+              const isSpeech = overlay.type === "speech";
+              const isNarration = overlay.type === "narration";
+              const hasSpeaker = overlay.type !== "sfx" && !!overlay.speaker;
+              return (
+                <div
+                  key={overlay.id}
+                  className={`absolute rounded overflow-hidden ${
+                    isSpeech ? "" : "border-2"
+                  } ${
+                    overlay.type === "narration"
+                      ? "border-muted/40 bg-[#f4efe6]/85 rounded-md"
+                      : overlay.type === "sfx"
+                        ? "border-accent/40"
+                        : ""
+                  }`}
+                  style={{ left, top, width, height }}
+                >
+                  {!overlay.text ? (
+                    <span
+                      className="block truncate px-1 text-[9px] text-muted"
+                      style={{ fontFamily }}
+                    >
+                      {overlay.type}
+                    </span>
+                  ) : !fontsReady ? (
+                    <div
+                      className="absolute inset-0 flex items-center justify-center px-1 text-center break-words"
+                      style={{
+                        fontFamily,
+                        fontSize: Math.max(8, Math.min(height * 0.05, 14)),
+                        fontWeight: overlay.textStyle?.fontWeight ?? 400,
+                      }}
+                    >
+                      {hasSpeaker ? `${overlay.speaker}: ${overlay.text}` : overlay.text}
+                    </div>
+                  ) : (
+                    (() => {
+                      const layout = layoutBubbleText(
+                        measureWidth(fontFamily),
+                        overlay.text,
+                        width,
+                        height,
+                        bubbleLayoutOptionsForOverlay(
+                          overlay,
+                          stageSize.height,
+                          width,
+                          height,
+                        ),
+                      );
+                      return (
+                        <div
+                          className="absolute inset-0 flex flex-col items-center justify-center px-1 text-center"
+                          style={{ fontFamily }}
+                        >
+                          {hasSpeaker && (
+                            <span
+                              className="block font-bold text-[#3a3a3a]"
+                              style={{
+                                fontSize: layout.speakerFontSize,
+                                lineHeight: 1.2,
+                              }}
+                            >
+                              {overlay.speaker}
+                            </span>
+                          )}
+                          <span
+                            className="text-[#1a1a1a]"
+                            style={{
+                              fontSize: layout.fontSize,
+                              lineHeight: `${layout.lineHeight}px`,
+                              fontWeight: overlay.textStyle?.fontWeight ?? 400,
+                            }}
+                          >
+                            {layout.lines.map((line, i) => (
+                              <span key={i} className="block">
+                                {line}
+                              </span>
+                            ))}
+                          </span>
+                        </div>
+                      );
+                    })()
+                  )}
+                </div>
+              );
+            })}
+          </>
+        )}
+      </div>
+    </div>
+  );
+
+  if (!onClick) return stage;
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="block w-full text-left"
+      data-testid={testId ? `${testId}-open` : undefined}
+    >
+      {stage}
+    </button>
+  );
+}

package/app/web/components/EpisodesPage.tsx

@@ -45,13 +45,44 @@ export function EpisodesPage({ storyName, authFetch, onOpenFile }: EpisodesPageP
     return <div className="h-full flex items-center justify-center text-muted text-sm">Could not load episodes.</div>;
   }
 
+  const publishedCount = episodes.filter((ep) => ep.published).length;
+  const activeCount = episodes.filter((ep) => !ep.published).length;
+  const blockedCount = episodes.filter((ep) => ep.state === "blocked").length;
+  const readyCount = episodes.filter((ep) => ep.state === "ready").length;
+  const displayLabel = (ep: EpisodeProgress) => {
+    if (ep.file === "genesis.md") return "epi-01 (Genesis)";
+    const m = ep.file.match(/^plot-(\d+)\.md$/);
+    if (!m) return ep.label;
+    const episodeNumber = parseInt(m[1], 10) + 1;
+    return `epi-${String(episodeNumber).padStart(2, "0")}`;
+  };
+
   return (
     <div className="h-full overflow-y-auto px-4 py-4" data-testid="episodes-page">
       <h2 className="text-base font-serif text-foreground">Episodes</h2>
-      <p className="mt-0.5 text-[11px] text-muted">Genesis is Episode 1; each plot file is the next episode.</p>
+      <p className="mt-0.5 text-[11px] text-muted">Open an episode to preview its cuts or edit lettering.</p>
+      <div className="mt-3 flex flex-wrap gap-1.5 text-[10px]" data-testid="episodes-summary">
+        <span className="rounded-full border border-border bg-background px-2 py-0.5 text-foreground">
+          {episodes.length} total
+        </span>
+        <span className="rounded-full border border-border bg-background px-2 py-0.5 text-muted">
+          {activeCount} active
+        </span>
+        <span className="rounded-full border border-green-700/30 bg-green-700/10 px-2 py-0.5 text-green-700">
+          {publishedCount} published
+        </span>
+        <span className="rounded-full border border-accent/30 bg-accent/10 px-2 py-0.5 text-accent">
+          {readyCount} ready
+        </span>
+        {blockedCount > 0 && (
+          <span className="rounded-full border border-error/30 bg-error/10 px-2 py-0.5 text-error">
+            {blockedCount} need fixes
+          </span>
+        )}
+      </div>
 
       {episodes.length === 0 ? (
-        <p className="mt-4 text-xs text-muted italic" data-testid="episodes-empty">No episodes yet — write the Genesis to start Episode 1.</p>
+        <p className="mt-4 text-xs text-muted italic" data-testid="episodes-empty">No episodes yet.</p>
       ) : (
         <ol className="mt-3 flex flex-col gap-1">
           {episodes.map((ep) => (
@@ -64,9 +95,8 @@ export function EpisodesPage({ storyName, authFetch, onOpenFile }: EpisodesPageP
               >
                 <span className="min-w-0 flex-1">
                   <span className="flex items-center gap-1.5">
-                    <span className="text-xs font-medium text-foreground">{ep.label}</span>
+                    <span className="text-xs font-medium text-foreground">{displayLabel(ep)}</span>
                     {ep.title && <span className="text-[11px] text-muted truncate">· {ep.title}</span>}
-                    <span className="ml-auto text-[10px] text-muted">{ep.file}</span>
                   </span>
                   <span className="block text-[11px] text-muted">{ep.summary}</span>
                 </span>

package/app/web/components/FinishEpisodePanel.tsx

@@ -1,8 +1,5 @@
-import { groupCartoonIssues, type CartoonChecklist } from "@app-lib/cartoon-readiness";
-
-type StepStatus = "done" | "current" | "todo";
-
-const STATUS_MARK: Record<StepStatus, string> = { done: "✓", current: "▸", todo: "○" };
+import type { CartoonChecklist } from "@app-lib/cartoon-readiness";
+import { CartoonProductionStatus } from "./CartoonProductionStatus";
 
 interface FinishEpisodePanelProps {
   /** Writer-language production checklist for this episode (null ⇒ not a cartoon plot). */
@@ -23,28 +20,11 @@ interface FinishEpisodePanelProps {
   published?: boolean;
 }
 
-interface DisplayStep {
-  key: string;
-  label: string;
-  status: StepStatus;
-  detail: string | null;
-}
-
 /**
  * Guided "Finish episode" flow for a cartoon plot (#414).
  *
- * The end-to-end pilot showed the production tail (export → upload → prepare
- * markdown → publish) was technically complete but fragmented: a writer had to know
- * which low-level button to click and read a flat wall of "Cut N: …" errors. This
- * panel makes the tail one guided surface in writer language: it shows the six
- * production steps with live status, offers ONE primary "Finish episode" action
- * that runs the remaining automatable steps in order (resumable — already-uploaded
- * cuts are skipped by the caller), and groups any blockers under the actionable
- * step heading instead of a long red list. The lower-level controls stay available
- * elsewhere in the workspace for manual recovery.
- *
- * Renders nothing when there is no checklist (e.g. a fiction plot or an unparsed
- * cut plan), so it never appears outside the cartoon flow.
+ * This now reuses the shared production-status surface so the Cuts workspace and
+ * Publish tab speak the same workflow language and active-step text.
  */
 export function FinishEpisodePanel({
   checklist,
@@ -58,105 +38,38 @@ export function FinishEpisodePanel({
 }: FinishEpisodePanelProps) {
   if (!checklist || checklist.steps.length === 0) return null;
 
-  const groups = groupCartoonIssues(issues);
-
-  // The base checklist (plan → upload) models per-cut art/lettering/export/upload
-  // progress; it has no notion of the publish markdown being assembled. #414 needs
-  // the post-upload tail modelled explicitly, so replace its single "publish" step
-  // with two real states: "Episode sequence prepared" (markdown built + ready) and
-  // "Ready to publish" (which becomes "Published" once it's on-chain).
-  const uploadDone = checklist.steps.find((s) => s.key === "upload")?.status === "done";
-  const ready = uploadDone && markdownReady && !published; // ready to publish, not yet published
-
-  const assembleStatus: StepStatus = published || markdownReady ? "done" : uploadDone ? "current" : "todo";
-  const readyStatus: StepStatus = published ? "done" : ready ? "current" : "todo";
-
-  const steps: DisplayStep[] = [
-    ...checklist.steps.filter((s) => s.key !== "publish"),
-    { key: "assemble", label: "Episode sequence prepared", status: assembleStatus, detail: null },
-    { key: "ready", label: published ? "Published to PlotLink" : "Ready to publish", status: readyStatus, detail: null },
-  ];
-
   const buttonLabel = finishing
     ? progressText || "Finishing…"
     : published
       ? "Published ✓"
-      : ready
+      : markdownReady
         ? "Episode ready to publish"
         : "Finish episode";
 
-  const outstandingCount = steps.filter((s) => s.status !== "done").length;
-  const issuesCount = groups.reduce((sum, g) => sum + g.lines.length, 0);
-
   return (
-    <div
-      className="px-3 py-1.5 border-b border-border bg-surface/50 flex-shrink-0"
-      data-testid="finish-episode-panel"
-    >
-      <div className="flex flex-wrap items-center gap-2">
-        <span className="text-[11px] font-medium text-foreground">Finish episode</span>
-        {checklist.nextStep && (
-          <span className="min-w-0 flex-1 text-[10px] text-muted truncate" data-testid="finish-next-step">
-            Next: {checklist.nextStep}
-          </span>
-        )}
+    <CartoonProductionStatus
+      checklist={checklist}
+      markdownReady={markdownReady}
+      published={published}
+      issues={issues}
+      title="Episode production"
+      subtitle="Per-cut actions stay on each card. Open details for the full workflow and blockers."
+      rootTestId="finish-episode-panel"
+      detailsTestId="finish-episode-details"
+      stepTestIdPrefix="finish-step"
+      issuesTestId="finish-issues"
+      issueGroupTestIdPrefix="finish-issue-group"
+      action={(
         <button
           onClick={onFinish}
           disabled={finishing || !canFinish}
           data-testid="finish-episode-btn"
           title="Upload the exported final panels, then prepare the episode for publishing — picks up where it left off"
-          className="px-2.5 py-0.5 text-[11px] border border-accent/40 text-accent rounded hover:bg-accent/5 disabled:opacity-50"
+          className="px-2.5 py-1 text-[11px] border border-accent/40 text-accent rounded hover:bg-accent/5 disabled:opacity-50"
         >
           {buttonLabel}
         </button>
-      </div>
-
-      <details className="mt-1" data-testid="finish-episode-details">
-        <summary className="cursor-pointer select-none text-[10px] text-muted hover:text-foreground">
-          {outstandingCount === 0 ? "Progress details" : `${outstandingCount} step${outstandingCount === 1 ? "" : "s"} left`}
-          {issuesCount > 0 ? ` · ${issuesCount} blocker${issuesCount === 1 ? "" : "s"}` : ""}
-        </summary>
-
-        <div className="mt-1.5 space-y-1.5">
-          {/* Writer-language step status — the exact webtoon production sequence. */}
-          <ol className="flex flex-wrap gap-1.5">
-            {steps.map((s) => (
-              <li
-                key={s.key}
-                data-testid={`finish-step-${s.key}`}
-                data-status={s.status}
-                className={`flex items-center gap-1 rounded border px-1.5 py-0.5 text-[10px] ${
-                  s.status === "current"
-                    ? "border-accent/40 bg-accent/10 text-accent"
-                    : s.status === "done"
-                      ? "border-border bg-background/70 text-foreground"
-                      : "border-border/70 bg-background/40 text-muted"
-                }`}
-              >
-                <span aria-hidden>{STATUS_MARK[s.status]}</span>
-                <span>{s.label}</span>
-                {s.detail && <span className="text-muted">· {s.detail}</span>}
-              </li>
-            ))}
-          </ol>
-
-          {/* Blockers grouped by the step that fixes them, not a flat red list. */}
-          {groups.length > 0 && (
-            <div className="space-y-1.5" data-testid="finish-issues">
-              {groups.map((g) => (
-                <div key={g.key} data-testid={`finish-issue-group-${g.key}`} className="text-[10px]">
-                  <p className="font-medium text-amber-700">{g.title}</p>
-                  <ul className="ml-3 list-disc text-muted">
-                    {g.lines.map((line, i) => (
-                      <li key={i}>{line}</li>
-                    ))}
-                  </ul>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      </details>
-    </div>
+      )}
+    />
   );
 }