Thumbfast Drawing Inspiration Editor
Implement a full drawing-template editor in Thumbfast so users can create, save, edit, and reuse drawn thumbnail inspirations.
<instructions> Implement in Thumbfast a drawing-based inspiration creation experience. The goal is to let users create a new inspiration by drawing a thumbnail composition from scratch, then save that drawing as an inspiration that can be reused for thumbnail generation and reopened later for editing. </instructions> <core-direction> Create a real drawing experience from scratch inside Thumbfast. Do not use Excalidraw. If the current implementation uses Excalidraw or an Excalidraw wrapper, remove that implementation and replace it with a custom Thumbfast drawing editor. You may use lower-level drawing/canvas libraries if they help, but the product experience, toolbar, object model, save flow, and integration must be built for Thumbfast. The result should feel inspired by Excalidraw's simplicity: smart, fast, obvious, and calm. It should not feel like a complicated design suite. </core-direction> <page-experience> The drawing editor must be a dedicated fullscreen page, not a cramped modal. The user should be able to enter it from the inspiration creation flow with an action such as "Draw inspiration" or "Create from drawing". Fullscreen page requirements: - A large central 16:9 thumbnail canvas/frame. - A compact top or floating toolbar for tools. - A small properties area only when useful. - Clear actions to save the drawing as an inspiration, cancel, and return. - No accidental page close when pressing Escape. - Escape should defocus active text inputs or clear the current selection first. - The browser/page should stay stable during editing. </page-experience> <editor-behavior> Build the minimum complete drawing editor that feels excellent. Required tools: - Select/move tool. - Text tool. - Arrow tool. - Rectangle tool. - Circle/ellipse tool. - Freehand or pencil tool. - Image insertion. - Person/character placeholder insertion. - A few useful thumbnail starter templates. Required interactions: - Click an object to select it. - Drag selected objects to move them. - Drag corners/handles to resize objects directly. - Rotate if the object model supports it cleanly. - Double-click text to edit it. - Press Escape to leave text editing or clear selection without leaving the page. - Delete/Backspace removes selected objects. - Cmd/Ctrl+Z and Cmd/Ctrl+Shift+Z undo/redo. - Cmd/Ctrl+C, Cmd/Ctrl+V, and duplicate should work for selected objects. - Shift should constrain resize or drawing when relevant. - Selection outlines and resize handles must be easy to understand. </editor-behavior> <visual-style> Use a restrained Excalidraw-like style, adapted to Thumbfast. - Few colors by default. - Simple toolbar buttons. - Friendly hand-drawn or sketch-like shapes if it fits the implementation. - Clean canvas background. - Obvious selected states. - No overdesigned panels. - No huge template gallery. - No decorative UI that gets in the way of drawing. </visual-style> <templates-and-elements> Do not build thousands of templates. Include only a few templates that prove the system works: - Big text plus subject placeholder. - Person reaction plus arrow. - Split-screen versus layout. - Tutorial callout layout. Templates should be editable drawings, not static images. After inserting a template, the user must be able to click, move, resize, edit text, delete elements, and save the changed result. </templates-and-elements> <inspiration-save-flow> Saving the drawing must create a normal Thumbfast inspiration. The saved inspiration must include: 1. A preview image generated from the drawing canvas, stored through the existing durable image storage path. 2. Structured drawing data that allows the editor to restore the exact editable scene later. Do not store only a flattened PNG. When a user reopens a drawing-based inspiration, Thumbfast must restore the editable objects, text, images, placeholders, positions, sizes, and styles. </inspiration-save-flow> <thumbfast-integration> Integrate with the current Thumbfast inspiration system. - Keep the existing YouTube and upload-based inspiration creation flows working. - Add the drawing creation path without breaking current inspiration list/detail views. - Show drawing inspirations in the normal inspiration grid/list with their preview image. - Add an "Edit drawing" action for inspirations that have drawing data. - Make drawing inspirations selectable from the thumbnail creation editor. - When a drawing inspiration is selected for generation, pass its preview image as an inspiration image. - Keep existing pixelation/anonymization behavior working for normal image inspirations. - Reuse existing organization permissions, plan limits, storage, and Convex patterns. </thumbfast-integration> <implementation-quality> This is a model benchmark for product and interaction quality. The implementation should have: - A clear drawing document schema. - Type-safe object models for shapes, text, images, and placeholders. - Reliable serialization and deserialization. - Undo/redo based on document changes. - Good pointer/mouse interaction handling. - Sensible keyboard shortcut handling. - Save/loading/error states. - Protection against losing unsaved changes. - Clean separation between editor state, rendering, toolbar UI, persistence, and Thumbfast integration. </implementation-quality> <acceptance-criteria> The feature is complete only when: - A user can create a drawing inspiration from a dedicated fullscreen page. - A user can add a person placeholder, text, arrows, rectangles, circles, freehand marks, and an uploaded image. - A user can move, resize, duplicate, delete, and edit objects. - Escape behaves correctly and does not accidentally close the page. - Text can be edited by double-clicking and exited with Escape. - At least a few starter templates can be inserted and edited. - Saving creates a normal inspiration with a preview image. - Reopening the inspiration restores the editable drawing. - The drawing inspiration can be selected for thumbnail generation. - Existing non-drawing inspiration flows still work. </acceptance-criteria> <important> - Do not use Excalidraw. - Do not ship a modal-only editor. - Do not ship a static canvas that cannot reopen editable objects. - Do not overbuild a template marketplace. - Focus on a small, excellent drawing workflow with real object editing. - Inspect the project before coding and fit the feature into the existing Thumbfast architecture. </important>