plotlink-ows 1.2.97 → 1.2.98

package/app/web/components/StoryBrowser.tsx

@@ -124,6 +124,22 @@ export function StoryBrowser({ authFetch, selectedStory, selectedFile, onSelectF
     return files[0]?.file ?? null;
   };
 
+  const isEpisodeFile = (file: string) =>
+    file === "genesis.md" || /^plot-\d+\.md$/.test(file);
+
+  const cartoonEpisodeMeta = (file: string): { label: string; sort: number } | null => {
+    if (file === "genesis.md") {
+      return { label: "epi-01 (Genesis)", sort: 1 };
+    }
+    const m = file.match(/^plot-(\d+)\.md$/);
+    if (!m) return null;
+    const n = parseInt(m[1], 10) + 1;
+    return {
+      label: `epi-${String(n).padStart(2, "0")}`,
+      sort: n,
+    };
+  };
+
   const handleStoryClick = (story: StoryInfo) => {
     toggleExpand(story.name);
     // Cartoon: a root-row click opens the story-level progress overview (#418) on
@@ -139,8 +155,18 @@ export function StoryBrowser({ authFetch, selectedStory, selectedFile, onSelectF
     }
   };
 
-  // Sort files: structure first, genesis, then plots in order
-  const sortFiles = (files: FileStatus[]) => {
+  // Sort files: structure first, genesis, then plots in order. Cartoon stories
+  // show only episode files to avoid leaking the markdown implementation model.
+  const sortFiles = (files: FileStatus[], contentType?: "fiction" | "cartoon") => {
+    if (contentType === "cartoon") {
+      return [...files]
+        .filter((f) => isEpisodeFile(f.file))
+        .sort((a, b) => {
+          const aa = cartoonEpisodeMeta(a.file)?.sort ?? 999;
+          const bb = cartoonEpisodeMeta(b.file)?.sort ?? 999;
+          return aa - bb;
+        });
+    }
     const order = (f: string) => {
       if (f === "structure.md") return 0;
       if (f === "genesis.md") return 1;
@@ -238,27 +264,35 @@ export function StoryBrowser({ authFetch, selectedStory, selectedFile, onSelectF
                 {story.contentType === "cartoon" && (
                   <span className="bg-accent/10 text-accent rounded px-1.5 py-0.5 text-[10px] font-medium flex-shrink-0">Cartoon</span>
                 )}
-                <span className="ml-auto flex-shrink-0 text-xs text-muted">
-                  {story.publishedCount}/{story.files.length}
-                </span>
-              </button>
-              {expanded.has(story.name) && (
-                <div className="pl-4">
-                  {sortFiles(story.files).map((f) => {
-                    const isSelected = selectedStory === story.name && selectedFile === f.file;
-                    return (
-                      <button
-                        key={f.file}
+	                <span className="ml-auto flex-shrink-0 text-xs text-muted">
+	                  {story.contentType === "cartoon"
+	                    ? `${sortFiles(story.files, "cartoon").length} ep`
+	                    : `${story.publishedCount}/${story.files.length}`}
+	                </span>
+	              </button>
+	              {expanded.has(story.name) && (
+	                <div className="pl-4">
+	                  {sortFiles(story.files, story.contentType).map((f) => {
+	                    const isSelected = selectedStory === story.name && selectedFile === f.file;
+	                    const cartoonMeta =
+	                      story.contentType === "cartoon"
+	                        ? cartoonEpisodeMeta(f.file)
+	                        : null;
+	                    return (
+	                      <button
+	                        key={f.file}
                         onClick={() => onSelectFile(story.name, f.file)}
                         className={`w-full px-3 py-1.5 text-left flex items-center gap-2 text-xs hover:bg-surface ${
                           isSelected ? "bg-surface font-medium" : ""
                         }`}
-                      >
-                        <span className={STATUS_COLOR[f.status]}>{STATUS_ICON[f.status]}</span>
-                        <span className="truncate font-mono">{f.file}</span>
-                      </button>
-                    );
-                  })}
+	                      >
+	                        <span className={STATUS_COLOR[f.status]}>{STATUS_ICON[f.status]}</span>
+	                        <span className={story.contentType === "cartoon" ? "truncate" : "truncate font-mono"}>
+	                          {cartoonMeta?.label ?? f.file}
+	                        </span>
+	                      </button>
+	                    );
+	                  })}
                 </div>
               )}
             </div>

package/app/web/components/StoryProgressPanel.tsx

@@ -137,7 +137,7 @@ function Section({
   title: string;
   status: SectionStatus;
   items: ChecklistItem[];
-  /** Power-user secondary text (real file name), shown small. */
+  /** Secondary text, shown small. */
   fileName?: string | null;
   /** Called to open the section's underlying file, or undefined for no navigation. */
   openFile?: () => void;
@@ -171,6 +171,14 @@ function episodeStatus(ep: EpisodeProgress, isActive: boolean): SectionStatus {
   return "needs-action";
 }
 
+function episodeDisplayLabel(ep: EpisodeProgress): string {
+  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")}`;
+}
+
 /** Build the rendered checklist for a cartoon episode from its production checklist. */
 function episodeItems(ep: EpisodeProgress, openingDone = true): ChecklistItem[] {
   const steps = ep.checklist ?? [];
@@ -243,9 +251,8 @@ function CartoonWorkflowMap({
 
       <Section
         index={++idx}
-        title="Story Whitepaper"
+        title="Story Bible"
         status={whitepaperStatus}
-        fileName="structure.md"
         openFile={hasStructure ? () => onOpenFile(storyName, "structure.md") : undefined}
         items={[{ label: "Planning document", status: hasStructure ? "done" : "todo", detail: hasStructure ? null : "Not written yet" }]}
       />
@@ -302,12 +309,12 @@ function EpisodeSection({
     markdownReady: ep.state === "ready" || ep.published,
     published: ep.published,
   });
-  const title = ep.title ? `${ep.label} · ${ep.title}` : ep.label;
+  const label = episodeDisplayLabel(ep);
+  const title = ep.title ? `${label} · ${ep.title}` : label;
   const heading = (
     <div className="flex items-center gap-2 min-w-0">
       <span className={`flex-shrink-0 ${SECTION_TONE[status]}`} aria-hidden>{SECTION_ICON[status]}</span>
       <span className="text-xs font-medium text-foreground truncate">{index}. {title}</span>
-      <span className="text-[10px] text-muted truncate">{ep.file}</span>
       <span className={`ml-auto text-[10px] font-medium ${SECTION_TONE[status]} flex-shrink-0`}>{SECTION_LABEL[status]}</span>
     </div>
   );

package/app/web/dist/assets/{export-cut-Cj-cOtan.js → export-cut-DVpOZ5AO.js}

@@ -1 +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-CF7pE09m.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};
+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-CoG6WKyb.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};