Layer storage and reassembly
Every MomentA design stores its layers individually in the database. This means any layer can be swapped, restyled, or repositioned without restarting the AI generation.
When you save or launch a design, MomentA persists each layer individually in the asset_layer table — one database row per semantic zone per page. This is separate from the flattened PNG and the Fabric.js canvas JSON. It allows any layer to be individually replaced, repositioned, or re-styled in a future edit without touching the other layers.
The 12-layer semantic model
Every design follows a fixed z-order called the semantic layer model. Layers are ordered back-to-front. Not every design uses all 12 layers — unused zones simply have no row in the database.
| Z-order | Zone ID | What it is | Editable separately |
|---|---|---|---|
| z10 | background | Solid colour or texture — the full-canvas backdrop. | Yes |
| z20 | decorative-bg | Watercolor splashes, confetti, bokeh patterns. | Yes |
| z30 | border | Decorative outer frame or ribbon. | Yes |
| z40 | hero | Main AI-generated illustration. | Yes — swap or reposition |
| z50 | photo | Recipient/sender portrait composited over the hero. | Yes — replace photo |
| z60 | accent | Sparkles, flowers, balloons around the hero. | Yes |
| z70 | headline | Primary greeting text. | Yes — direct text edit |
| z80 | subheadline | Subtitle or occasion line. | Yes — direct text edit |
| z90 | body | Personalised paragraph. | Yes — direct text edit |
| z100 | quote | Verse, poem, or scripture. | Yes — direct text edit |
| z110 | signature | Sender names. | Yes — direct text edit |
| z120 | qr-cta | QR code, brand mark, or video CTA. | Yes — swap URL |
What each layer row stores
- zoneId — the semantic zone name (e.g. 'hero', 'headline').
- zIndex — z-order number matching the table above.
- kind — 'image' | 'text' | 'shape' | 'video' | 'audio'.
- src — Blob URL for image/video layers; null for text/shape.
- textContent — the raw string for text layers.
- fabricProps — full Fabric.js object state: position, scale, angle, opacity, filters, font, fill, etc. Enough to reconstruct the layer pixel-perfectly.
- meta.generatedFrom — provenance tag: 'spec' | 'ai-image' | 'user-upload' | 'rearrange'.
- meta.layoutIntentId — the LayoutRecipe that placed this layer last, linking it to the AI art director's decision.
Edit any layer in fine-tune
Open a design from your library and click 'Fine-tune'. Every layer is independently selectable and movable. The Layout Planner Rearrange button re-solves positions for all layers at once.
How layers are persisted
- On launch — when you click 'Save to library' at the end of the wizard, all layers are upserted to asset_layer.
- On save in fine-tune — every time you click Save in the editor toolbar, all layers are upserted.
- After Rearrange — the layout planner updates asset.meta.layoutRecipe with the new LayoutRecipe after a successful rearrange.
Note
The flattened PNG (used for previews, sharing, and print) is always regenerated from the live Fabric.js canvas on save, not from the layer rows. The layer rows are for reassembly and the layout engine, not for rendering.