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 feature that lets users create new inspirations from a drawing. </instructions> <product-context> Thumbfast already has an inspiration system where users can create inspirations from a YouTube URL or uploaded images. Inspirations are used as style/composition references when generating thumbnails. Before coding, inspect the current project and identify the existing inspiration creation flow, inspiration list/detail UI, inspiration selector used by the thumbnail editor, image upload/storage path, Convex schema/functions, and the existing canvas-based image editing surface. Do not simply add another upload field. The new feature must introduce a first-class drawing-template workflow that fits the existing product. </product-context> <core-user-story> As a Thumbfast user, I want to create an inspiration by drawing a thumbnail layout from scratch, so I can define the exact composition I want the AI to follow. The user should be able to: 1. Open the existing "New inspiration" flow. 2. Choose a new "Draw" or "Create from drawing" option. 3. Use a full drawing editor to compose a thumbnail template. 4. Save the drawing as an inspiration. 5. Select that inspiration later in the thumbnail generation editor. 6. Reopen the inspiration and edit the original drawing, not just a flattened image. </core-user-story> <drawing-editor-requirements> Build a serious drawing editor, closer in capability to Excalidraw than to a paint canvas. You may use a drawing/canvas library if it helps, but do not use Excalidraw itself. The editor must include: - A main 16:9 thumbnail frame/canvas. - Select, pan, and zoom controls. - Move, resize, rotate, duplicate, delete, and reorder objects. - Undo and redo. - Keyboard shortcuts for common actions. - Snap/alignment behavior or useful guides. - Multi-select and group/ungroup if feasible. - A layers or objects panel if it improves editing. - Export to a raster preview image for inspiration use. - Save and load structured scene data so the drawing remains editable later. Supported object types: - Freehand drawing/pen strokes. - Rectangles and rounded rectangles. - Circles/ellipses. - Lines and arrows. - Text blocks with font size, weight, color, alignment, and outline/shadow controls. - Uploaded images. - Basic thumbnail characters/placeholders such as people silhouettes, faces, reaction poses, arrows, badges, explosions, callouts, and emoji-like shapes. - Reusable built-in composition templates such as before/after, versus, shocked face + arrow, big text + subject, split screen, podcast guest swap, tutorial callout, and product comparison. </drawing-editor-requirements> <template-and-persistence-requirements> The saved inspiration must contain two representations: 1. A generated preview image URL that can be used by the existing AI inspiration pipeline. 2. The structured drawing document data that allows the user to reopen and edit every object. The structured data must preserve: - Canvas size/aspect ratio. - All objects and their stable ids. - Position, size, rotation, opacity, z-order, lock/visibility state. - Shape-specific style, fill, stroke, arrowhead, radius, and text settings. - Uploaded image references. - Template identity if the drawing started from a built-in template. Do not store only a PNG. A flattened image is not enough. </template-and-persistence-requirements> <integration-requirements> Integrate the feature into the existing Thumbfast workflow: - Add "Draw" as a creation mode in the existing inspiration creation dialog. - Save drawn inspirations through the same organization-scoped permission and plan-limit rules as other inspirations. - Store the exported preview image through the existing durable image storage path. - Extend the Convex inspiration model and mutations/actions to support drawing source data. - Show drawn inspirations in the existing inspiration list/grid with a normal preview. - Add an "Edit drawing" action for inspirations created from drawing data. - When editing and saving a drawing, update both the preview image and the structured drawing data. - Keep existing YouTube/upload inspiration creation working. - Keep anonymization/pixelation flows from breaking on normal image inspirations. - Make drawn inspirations selectable from the thumbnail editor's inspiration selector. - Ensure generation receives the drawn inspiration preview image as one of the inspiration images. </integration-requirements> <editor-quality-bar> You should have a code quality in every aspect. </editor-quality-bar> <ai-generation-behavior> The drawing is a template/inspiration, not the final generated thumbnail. When a drawn inspiration is selected for generation: - The exported preview image should be included exactly like other inspiration images. - The AI prompt context should make it clear that the drawing is a composition/layout template. - Placeholder characters or silhouettes should be treated as composition stand-ins unless the user also selected real persons. - Text in the drawing should be preserved as intended layout guidance, unless the user prompt asks otherwise. </ai-generation-behavior> <acceptance-criteria> The feature is complete only when all of these work: - A user can create a new inspiration from a blank drawing. - A user can start from at least three built-in templates and customize them. - A user can add text, arrows, shapes, a placeholder character, and an uploaded image to the frame. - A user can move, resize, rotate, duplicate, delete, undo, and redo object edits. - Saving creates an inspiration visible in the inspirations list. - The saved inspiration has a normal preview image. - The saved inspiration can be selected in the thumbnail creation editor. - Reopening the drawn inspiration restores editable objects, not a flattened image. - Editing the drawing and saving updates the preview and the stored drawing document. - Existing upload and YouTube inspiration creation still work. - Existing thumbnail generation still receives inspiration image URLs correctly. </acceptance-criteria> <important> - Do not use Excalidraw. - Do not ship a fake drawing editor that only exports a static image. - Do not hardcode the feature as a separate demo route disconnected from inspirations. - Do not ask clarifying questions. Inspect the project and make the product/engineering decisions needed to finish the feature. - You can search and use a library if you want to. </important>