ADR-0031 — Builder est le canvas Onlook; Preview lit; formats sont un outil

Remplacé par l'ADR 0032. Builder est l'editeur Onlook. La Preview est la seule stage storefront. Le chrome Design sur l'iframe n'est plus le Builder.

Statut

Remplacé par ADR-0032 · 2026-09-22

Remplace : ADR-0030

Piliers : ai-platform, design-system

Remplacé par l'ADR 0032. Builder est l'editeur Onlook. La Preview est la seule stage storefront. Le chrome Design sur l'iframe n'est plus le Builder.

Contexte

ADR 0030 plaçait le chrome Onlook-like en Preview → Design et faisait de Builder la Rédaction (formats structurés, #1397). C'était une inversion de primitive : Onlook est l'éditeur (visuel + texte sur le canvas). La rédaction n'est pas un mode séparé inventé à côté.

Décision

Surface	Role
Preview	Voir le storefront (iframe, lecture)
Builder	Canvas Onlook adapté Shopify : layers, pick, style, texte, commit theme
Formats	Outil / panneau dans Builder (PDP, article, page…) — pas le Builder
Worktree (`code`)	IDE fichiers theme (toolbar)
Workflow	Automations
Studio	Image / video

Pas de fork Onlook. Runtime = theme Liquid + Admin writes (ADR 0029). Tailwind toolbar reste off (L0 CSS) jusqu'à capability L1.

Alternatives écartées

Option	Pourquoi non
Builder = Rédaction seule (0030)	Confond la primitive avec un outil de contenu
Design chrome sur Preview	L'édition visuelle n'est pas « voir »
Mode Rédaction séparé	Onlook n'a pas ça : le texte s'édite dans le canvas / ses panels

Conséquences

Le step Builder monte le chrome Design (toujours on) + iframe
BuilderPane / features/writing = panneau Formats du Builder
ADR 0030 est remplacé (historique, pas la cible produit)
Les moteurs (resolve-liquid, Actions, commit CSS, Brand) restent sous preview/design/ (impl) mais appartiennent produit au mode Builder

Comment c'est appliqué

store-browser.tsx : mode === "builder" → iframe + DesignChrome
Panneau formats dans DesignChrome
Garde : src/test/builder-is-onlook-canvas.test.ts

Was this page helpful?