#501 Simplify focused lettering editor into canvas-first mode

app/web/components/CutListPanel.test.tsx

@@ -1989,7 +1989,7 @@
 
   // #441: a PNG clean image is a friendly conversion step, not a red error.
   it("shows a Convert artwork step for PNG clean images instead of red unsupported-extension errors", async () => {
     const fn = vi.fn((url: string, opts?: RequestInit) => {
       if (url.includes("/asset-diagnostics")) {
         return Promise.resolve({
           ok: true,
@@ -2098,7 +2098,7 @@
   // card per cut with a creator-facing status + primary action, technical
   // controls collapsed by default.
   it("renders an episode header, progress summary, per-cut card statuses, and collapses technical controls", async () => {
     const fn = vi.fn((url: string, opts?: RequestInit) => {
       if (url.includes("/asset-diagnostics")) {
         return Promise.resolve({
           ok: true,
@@ -2337,7 +2337,9 @@
     expect(
       await screen.findByTestId("lettering-review-state-1"),
     ).toHaveTextContent("No draft");
-    expect(screen.getByTestId("ai-draft-1")).toBeInTheDocument();
+    expect(screen.getByTestId("ai-draft-1")).toHaveTextContent(
+      "AI draft bubbles",
+    );
 
     fireEvent.click(screen.getByTestId("ai-draft-1"));
     expect(

app/web/components/CutListPanel.tsx

@@ -413,7 +413,9 @@ function CutRow({
     !cut.uploadedUrl &&
     canDraftLettering(cut);
   const aiDraftLabel =
-    (cut.overlays?.length ?? 0) > 0 ? "Re-draft with AI" : "AI draft lettering";
+    (cut.overlays?.length ?? 0) > 0
+      ? "Re-draft bubbles with AI"
+      : "AI draft bubbles";
 
   const primary: { label: string; onClick: () => void; testid: string } | null =
     board.key === "convert"

app/web/components/LetteringEditor.test.tsx

@@ -853,6 +853,34 @@ describe("LetteringEditor", () => {
     expect(onClose).toHaveBeenCalled();
   });
 
+  it("keeps the focused editor toolbar compact and moves guide copy behind Help (#501)", async () => {
+    render(
+      <LetteringEditor
+        storyName="story"
+        cut={makeCut({
+          dialogue: [{ speaker: "Mira", text: "We move now." }],
+        })}
+        plotFile="plot-01"
+        authFetch={makeAssetAuthFetch()}
+        onSave={vi.fn()}
+        onClose={vi.fn()}
+        targetLabel="Cut 01"
+      />,
+    );
+
+    const toolbar = screen.getByTestId("lettering-toolbar");
+    expect(toolbar).toHaveTextContent("Focused lettering editor");
+    expect(toolbar).not.toHaveTextContent(
+      /Place bubbles, captions, SFX, or between-scene card text/i,
+    );
+    expect(screen.queryByTestId("lettering-help-panel")).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId("lettering-help-toggle"));
+    expect(screen.getByTestId("lettering-help-panel")).toHaveTextContent(
+      /Add or select a bubble/i,
+    );
+  });
+
   // #310: the editor preview must wrap bubble dialogue into multiple lines
   // (shared layout with the export), not a single truncated label.
   it("renders wrapped multi-line bubble text in the preview (WYSIWYG)", async () => {