Skip to content

Cartoon UX: simplify Focused Lettering Editor into a canvas-first mode #501

Description

@realproject7

Problem

Focused Lettering Editor is the most important cartoon editing surface and is already closer to the desired full-screen workflow, but it still spends too much space on explanatory chrome and inspector cards.

Observed in Chrome after opening Cut 01 focused editor:

  • The editor correctly expands to full width and hides the terminal/work area.
  • The editor still shows mode tabs above it.
  • Header/toolbar occupies about 83.5px (y 85.5-169) and includes explanatory copy.
  • Checklist/status row occupies another 24px (y 169-193).
  • The right inspector starts with an AI draft explanatory card instead of task controls.
  • Copy AI draft prompt is unclear as a primary user-facing control. The desired behavior is an action that creates editable draft bubbles, preferably launched from the full cut review view before entering the editor.

Goal

Make Focused Lettering Editor feel like a dedicated canvas-first editing mode.

Proposed Layout

┌──────────────────────────────────────────────────────────────┐
│ ← Cuts   Cut 01   Clean ✓  Text ✓  Bubbles 1   [Save] [Cancel]│
├──────────────────────────────────────────────┬───────────────┤
│                                              │ Speech        │
│              large editable image canvas     │ Text          │
│                                              │ Position      │
│                                              │ Bubble style  │
│                                              │ Delete        │
└──────────────────────────────────────────────┴───────────────┘

Optional AI flow from cut review:

Cut 01 · Ready for lettering       [AI draft bubbles] [Open editor]

Requirements

  • Compress the Focused Editor header into a single toolbar row where possible.
  • Move explanatory text into a help modal or guide affordance.
  • Convert checklist text into compact status chips/badges.
  • Remove or demote Copy AI draft prompt from the primary editor surface.
  • Add or preserve a clear Back to cut review control.
  • If AI drafting remains available, expose it as AI draft bubbles on the full cut review card, creating editable draft overlays that the user can tune in Focused Editor.
  • Preserve ability to reveal the terminal/work area again via an explicit Show work area or equivalent control.

Acceptance Criteria

  • Focused Editor canvas starts higher than the current y 193 position.
  • Toolbar is compact and does not include long explanatory sentences.
  • The inspector prioritizes selected overlay controls, not AI prompt-copy instructions.
  • AI draft behavior results in editable bubble overlays, not a copied prompt workflow as the main path.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions