ADR-0030 — Preview Design edite le storefront, Builder redige, Workflow orchestre

Remplacé par l'ADR 0031. Builder est le canvas Onlook; Preview lit seulement; les formats sont un outil dans Builder.

Statut

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

Piliers : ai-platform, design-system, integrations

Remplacé par l'ADR 0031. Builder est le canvas Onlook; Preview lit seulement; les formats sont un outil dans Builder.

Contexte

Apres #1397, le stepper du store est Preview · Builder · Workflow · Studio. Builder porte la Redaction (formats structures → Shopify). Worktree (code) reste un toggle de la toolbar Preview. La tentation est de :

renommer Workflow en Builder et y coller un canvas type Onlook ;
absorber la Redaction dans Preview comme le Worktree ;
forker Onlook dans le cockpit.

Ces trois mouvements confondent trois jobs distincts et cassent le stepper qu'on vient de figer. Onlook inspire l'UX d'edition visuelle sur une iframe ; son runtime (sandbox Next + Tailwind + AST JSX) n'est pas celui d'un theme Liquid Shopify (ADR 0029 : growth / storefront).

Décision

Le cockpit garde quatre steps et un outil Preview :

Surface	Role	UI
Preview	Voir le storefront	iframe
Preview → Design	Editer visuellement le storefront (chrome type Onlook)	toolbar + panels sur l'iframe
Preview → Worktree	Editer les fichiers du theme	CodeMirror
Builder	Rediger des objets structures (PDP, article, …)	formats / slots
Workflow	Orchestrer des automations	canvas React Flow
Studio	Produire image / video	galerie / compose

Design n'est pas un WorkspaceMode ni un step. C'est un etat de chrome de Preview (comme Inspect), mutuellement exclusif avec Worktree et desactive hors mode === "preview".

Les moteurs (Actions serialisables, resolve Liquid, Figma → tokens, theme write) viennent apres le shell UI. Ce ADR fige la separation produit ; il n'autorise pas un fork Onlook ni l'ouverture des writes MCP.

Alternatives écartées

Option	Pourquoi non
Renommer Workflow → Builder	Builder existe deja (Redaction). Workflow est le canvas d'automation ; Onlook n'est pas ce canvas.
Placer Design dans Builder	Builder n'a pas l'iframe. Deux metiers (texte vs canvas) dans un mode.
Delete Builder, tout dans Preview	Contredit `#1397` : Redaction est un mode de scene, pas un rail Studio ni un toggle Preview.
Fork / embed Onlook	Runtime Next+sandbox vs theme Liquid. Apache-2 ok pour idees ; on reimplemente.
5e step « Design »	Un step de plus pour un outil de Preview. Inspect n'est pas un step non plus.

Conséquences

La page publique / le marketing qui disent « Builder = theme editor » doivent dire Preview Design + Worktree, ou etre corrigees (0115 reste le ticket produit des capacites manquantes : diff, history, theme-check, publish).
Figma connector alimente un panel Brand de Design, pas une section Studio.
Tailwind n'est pas presuppose : L0 = CSS vars / section settings ; L1 = theme avec build Tailwind ; L2 = Hydrogen plus tard.

Comment c'est appliqué

Shell UI : src/features/ai/preview/design/ + toggle dans store-browser.tsx
Moteurs : resolve-liquid.ts, design-actions.ts, commit-styles.ts (L0 CSS → assets/boostecom-design.css via /api/stores/.../theme-assets + decideThemeWrite), Brand depuis StoreContext.modules.brandKit
Capacite : design-capability.ts — tailwindToolbar: false jusqu'a L1 (theme avec build Tailwind)
Inspect enrichi : src/app/api/preview/[storeId]/[[...path]]/route.ts
Garde : src/test/preview-design-is-preview-chrome.test.ts
ADR 0029 borne le perimetre storefront

Was this page helpful?