M01
FINALIZED
Design Tokens & Breakpoint System
Five variable modes, breakpoint system, full binding census recovered from canonical tokens.
Figma → Specification → Storefront
Recto was rebuilt module by module from its canonical Figma source — every design token, screen and interaction extracted into a written specification, put through an adversarial review gate, then implemented as a live Next.js + Shopify storefront. This page is the public record of that work.
Methodology
No module shipped on a single pass. Each was extracted from the canonical file, independently reviewed by a separate agent that tried to break it, and only finalized once every finding was resolved — 103 in total.
Mechanically derive the canonical section from the 50 MB Figma file.
Write a precise spec — tokens, geometry, states, motion — with full census.
An adversarial reviewer audits every number against source and rejects on any gap.
Fix every finding; re-review until the verdict is a clean approve.
Build the spec into the live storefront and verify parity with the prototype.
The build · 29 modules
The complete registry, grouped by phase. Every module reached the FINALIZED gate; the count beneath each is the review findings it resolved on the way there.
Design-system primitives extracted from the canonical Figma file.
Five variable modes, breakpoint system, full binding census recovered from canonical tokens.
Six shared text/grid styles decoded; 383 ad-hoc type nodes + character-level overrides censused.
Button / TextBTN variants, state colors, 300ms ease-out hover wiring across 3.7k instances.
TextField, CheckBox, Dropdown, Accordion — caret blink + smart-animate accordion behavior.
Brand wordmark + icon set, geometry and usage rules.
Imagery hover/dissolve transitions and price-display widgets.
Commerce widgets — size pickers, stock indicators, add-to-bag affordances.
Global chrome — 4 disambiguated Header sets, mega-menu hover model, Nav, Footer, TextBanner.
Every screen and overlay, reconstructed pixel-faithfully from the prototype.
Home screen — editorial regions, hero, campaign cards.
Product listing page + responsive product grid.
PLP filter / sort overlay panel.
Product detail page — gallery, size/color, info accordions.
Search overlay — input state + results state.
Store-stock check overlay + restock-notification alert.
Wishlist overlay drawer.
Shopping bag (cart) drawer.
Payment / checkout page.
Join + Login authentication screens.
Account dashboard and sub-screens.
About — campaign / collection editorial navigation.
Footer destination screens.
Popup / modal system.
Global prototype flow & motion — 4 breakpoint flows, transition timing.
The Next.js + Shopify storefront that renders the design as a live store.
Next.js app architecture & design-token wiring.
Shopify Storefront integration — catalog, search, customer.
Cart & customized checkout (minimal Shopify handoff).
Assembly, routing parity with the prototype flow, QA matrix.
Asset acquisition & verification.
Account-recovery flow added from a later canonical fetch.
FindID + FindPassword auth-recovery screens.
The record · 104 checkpoints
Every checkpoint logged during the build and the production fixes that followed launch — the full trail from first extraction to the live store and beyond.
Inventoried inputs (.env, 5 variable token files). Fetched canonical Figma data via REST (file.json 50MB, name "Recto", 176 components, 31 sets, 6 styles, 20 sections, 6036 interaction-bearing nodes). variables/local endpoint 403 (token scope) → the 5 exported
Done: canonical slices derived mechanically (20 section slices + 4 indexes via canonical/derive/slice.sh). PLAN.md written (27-module registry, pipeline rules). Now: M01 (design tokens) extraction. Stuck-loop assessment: no loops; on schedule.
Done: M01 spec drafted (5 variable modes + binding census + 2 unexported string vars recovered). M02 spec drafted (6 shared styles fully decoded: 4 text styles incl. unused BD-13-12, 2 grid styles with mode-resolved configs; ad-hoc typography census 383 nodes;
M01 review round 1: REJECT, 8 findings (incl. real Tablet arithmetic error 800−40≠768 and the omitted explicitVariableModes mechanism — collection 5:79, mode IDs derived: 5:2=Mobile, 767:0=Tablet, 5:1=DesktopSmall, 565:0=DesktopLarge). All 8 fixed in spec;
M02 review round 1: REJECT, 9 findings — headline: 134 nodes carry character-level styleOverrideTable segments (139 segments, 6 classes incl. Mode-1-pinned non-scaling runs); all 383 ad-hoc text nodes bind to Mode-1 primitives (non-responsive). Spec rewritten (new §2.5
M01 round 2: REJECT (7 findings) — but ALL in the revision-added §1.1 text (my exception-check regexes were too permissive; 25 alternate-convention pinned frames + mischaracterized 33 Footer pins). Everything else passed 100% audit. All 7 fixed + missing Open-questions section added;
Verdicts processed: M02 r2 REJECT (5 findings, all fixed — incl. independently-corrected 105-node dual-alias census, reviewer said 101); M03 r1 REJECT (6 findings: 128 TextBTN typography overrides = main-nav/filter labels — fixer agent dispatched); M01 r3 REJECT
M01 r4: REJECT with only 2 MINOR — LOOP GUARD TRIGGERED (4 consecutive rejections). Root cause confirmed + approach changed: round-5 fixes use the reviewer's own wording verbatim (documented in M01 review-log). r5 launched. M03 fixer done (all numbers re-verified); r2
M02 FINALIZED (r3 APPROVE — first module through the gate; 105-census adjudicated in spec's favor). ✅ M01 FINALIZED (r5 APPROVE — 8→7→5→2→0; reviewer-worded fixes worked). M03 r2: 1 MINOR ("all sections" → 17 of 20) — fixed inline, r3 launched.
M04 FINALIZED (r2 APPROVE, 8→0). ✅ M03 FINALIZED (r3 APPROVE, 6→1→0; ~90% re-derivation). Four foundation+component modules now canonical (M01–M04). M06 fixer done (5/5 + one mechanism-wording tightened preemptively); r2 launched. Screen extractors expanded:
User instructed: no new extractions; pause current extractions; focus on getting in-progress pessimistic reviews approved. Actions: stopped extraction agents M09 (Main), M17 (Payment), M18 (Join/Login), M10 (PLP+Grid), M12 (PDP) — all mid-flight, partial work discarded (their
M06 FINALIZED (r2 APPROVE, 5→0; full census recount). M08 r1 and M16 r1 reviews were stopped EXTERNALLY (user-side) — not relaunched; partial findings preserved in review-logs (M08's AccountNav HORIZONTAL_SCROLLING finding verified + fixed in spec; M16's chip-fill
User: out of tokens for ~3h17m; let M05 r2 review finish if it can; start NO new tasks. M07 r3 review was stopped externally before this directive (its 2 round-2 findings are already fixed in the spec; needs only a confirmation round later). Pipeline frozen except
Token budget restored. The earlier M05 r2 agent never ran (died instantly on session limit). Plan: two reviews at a time to pace token spend — wave 1: M07 r3 (narrow, 2 fixes) + M05 r2 (12 fixes); wave 2 after those land: M08 r1 (full, AccountNav finding pre-fixed) + M16 r1
M05 FINALIZED (r3, 12→2→0). ✅ M07 FINALIZED (r3, 8→2→0). ✅ M16 FINALIZED (r2 completed rounds, 4→0 — first screen module; the interrupted run's chip-fill observation confirmed and fixed). M08: r1 completed with 11 findings (incl. BLOCKER: 42 dropped SMART_ANIMATE collapse
M08 FINALIZED (r2, 11→0; SA census reconciled against M03). With M16, M05, M07 done earlier: the ENTIRE component layer M01–M08 plus screen module M16 are canonical — 9 finalized modules total. No agents running. Awaiting user direction for the remaining
Fresh session. Per PLAN.md registry + check-15 checklist: screen wave restarted from scratch (prior partial M09/M10 work was discarded; only stale STATUS files remained). Launched: M09 (Main, 762:9926 + standalone component 7:320) extractor; M10 (PLP+Grid,
Both restarted extractions DONE. M09 spec: 4 frames, 161 interaction entries/103 nodes, 7:320 census 20 (5/frame), 5 open questions (hidden HeaderVer2 w/ dead interactions; mobile logo unwired). M10 spec: PLP section is 8 frames (2 densities × 4 breakpoints) + 4 Grid
M09 FINALIZED (r2 APPROVE, 2→0; r1 was a 100% load-bearing audit with only 2 findings — false "detached bindings" parenthetical on 7:313 + trailing-LF md5 artifact; both fixed inline, r2 confirmed fixes + no-regression on §1.3/§5.2). 10 modules canonical (M01–M09, M16).
M10 FINALIZED (r2 APPROVE, 4→0; all 4 fixes re-derived against slice incl. independent re-derivation of the three ×64 transition families and the 10 explicitVariableModes carriers). 11 modules canonical (M01–M10, M16). In flight: M11 (Filter) extractor; M12 (PDP) extractor
M11 (Filter) extraction DONE: 4 overlay frames (DRAG→CLOSE, RIGHT/CENTER), facets are TextBTN chips only (zero M04 form components — contrary to expectation, documented as fact); 39 instances/frame (152 TextBTN + 4 Button section-wide, matches M03 census); 308 in-section
M11 FINALIZED (r1 APPROVE — first first-round approval in the pipeline; reviewer re-derived 100% of load-bearing values + near-full remainder, 18-point checklist, zero findings). 12 modules canonical (M01–M11, M16). M13 (Search) extractor launching; M12 (PDP) extractor
M12 (PDP) extraction DONE — largest module so far: 762:9932 holds 2 nested SECTIONs, 31 frames (PDP-Grid 17: base/SelectSize/SoldOut/Launch ×4 + BottomSheet-Mobile; PDP-ViewImg 14: Mobile+1280 only, ZERO inbound wiring — orphaned). 1802 instances,
M13 (Search) extraction DONE: 8 frames (4 Search-Result + 4 Search input, all overlay panels matching M11 geometry); owned component 374:4375 documented (20 instances, 5/Result frame, override classes A/B/C); censuses cross-checked vs M03/M04/M05/M06; 76/84/88
M13 r1: REJECT, 1 finding only (MAJOR — two over-broad "no SPACE_BETWEEN" sentences in §2.1/§5 contradicting the 4 inherited Completed-TextField instances; rest of spec matched at 100% load-bearing coverage). Both sentences rescoped inline per reviewer wording; canonical
M12 r1: REJECT, 3 findings (MAJOR clipsContent distributions — frame Empty 7T/9F, spacer 11T/5F, not the claimed 4/12 "same flip"; MINOR systematic 16-digit float serialization, 22 values; MINOR two vacuous clauses). All fixed directly: 40 float replacements via script,
M13 r2: REJECT, 1 new MINOR — my r1-fix wording "unlike M11/M16 roots" was false for M16 (M16 roots null; its SPACE_BETWEEN is on inherited cart-row Info frames ;161:3619). Lesson: comparative clauses added during fixes must themselves be canonical-checked.
M13 FINALIZED (r3 APPROVE, 1→1→0; r3 verified the M11/M16 comparative clause against both sections' slices + finalized specs). 13 modules canonical (M01–M11, M13, M16). M14 (CheckStock+RestockNotification, 762:9955 + 762:9957) extractor launching.
M12 FINALIZED (r2 APPROVE, 3→0; reviewer independently re-derived both clipsContent distributions over all 32 Empty nodes, verified all 22 float fixes + zero stale survivors, and re-checked every edited passage). 14 modules canonical (M01–M13, M16) — all of
M15 (Wish) extraction DONE: 4 overlay frames, owned component 1302:19901 (20 instances), 48/48/48 interactions in 4 patterns, ZERO outbound edges; 356-entry inbound census re-derives M05 heart numbers; 9 open questions. M14 (CheckStock+Restock) extraction DONE: CheckStock is
Infrastructure hiccup: both M14 r1 and M15 r1 review agents stalled (600s watchdog kill, no verdict, no review-log writes — died mid-verification, not a REJECT). Relaunched both as fresh r1 reviewers with a "work efficiently / batch jq" note. Doesn't count toward the
M14 FINALIZED (r1 APPROVE on relaunch — zero findings; 16-point checklist incl. ghost ;240:4621 confirmed real, 25 inbound carriers verified in PDP slice, ~70% coverage beyond load-bearing). 15 modules canonical (M01–M14, M16). M17 (Payment) extractor launching.
M15 r1 (relaunch): REJECT, 3 findings (MAJOR §0.4 override records misattributed to placed copies — they live only on definition-internal instances; MINOR card-height formula missing the 8px gutter; MINOR 1920 heart right-inset 11.665008544921875, not 12). All fixed inline;
M15 FINALIZED (r2 APPROVE, 3→0; reviewer re-enumerated all override records on both the section and definition sides, all 20 hearts, all card geometry). 16 modules canonical (M01–M16 complete!). Entire overlay-drawer family done (Filter/Search/CheckStock/Restock/
Session token limit hit at ~08:30: M17 extractor died AFTER writing a complete 52KB spec (Status: DRAFT, proper closing sections — only its summary message was lost); M18 extractor died before writing anything. Limit reset at 9:10am KST; resumed immediately:
M17 r1: REJECT, 4 findings (MAJOR node census 2367→565 — extractor had counted VARIABLE_ALIAS objects as scene nodes; MAJOR resetVideoPosition pairings swapped on TAB/1920 header overlays; MAJOR Dropdown stroke binding 16:268→87:2657 contradicting M04; MINOR
M17 FINALIZED (r2 APPROVE, 4→0; reviewer re-derived the 566-node census, all rvp flags incl. unflagged 1280 line, Dropdown/TextField stroke bindings, and the 4 inbound M16 edges). 17 modules canonical (M01–M17). M19 (Account) extractor launching (21MB slice — jq only,
M18 (Join+Login) extraction DONE (relaunch): Join = 4 FULL-PAGE frames (roots inert, literal white fills, GRID Body, zero self-authored interactions, 회원가입 CTA unwired dead-end); Login = 4 standard drawers (로그인→Account NAVIGATE, 회원가입→Join NAVIGATE).
M18 r1: REJECT, 3 findings (MAJOR Login Title counterAxisAlignItems CENTER claimed on all 4 frames — true only on Mobile, both-null on TAB/1280/1920; MINOR M08 §3 mis-citation for the header account fact — footer §3 cites were correct and kept; MINOR dual Column.4 serializations
M18 FINALIZED (r2 APPROVE, 3→0; reviewer re-derived all 4 Title alignments + the Find rows, verified M08 citations on both sides, float64-equality-checked the two Column.4 serializations, recounted the 170-edge wiring census). 18 modules canonical (M01–M18). M20 (About) extractor
M20 (About) extraction DONE — largest by frame count: 5 nested SECTIONs / 48 frames (Campaign 12, Collection 12, Brand 4, FStore 4, DStore 16); 2028 instances; 1196 interaction entries / 760 carriers; 1132 image fills (132 unique); owned AboutImgItem 602:16285 fully
M19 extractor (run 1) DIED: "Request timed out" after 89 min / 64 tool uses, wrote NOTHING. Mitigation: I enumerated the section myself (8 nested SECTIONs, 44 frames: Account 4, Edit 12 incl. duplicate-named Mobile frames, Adress 4, OrderList 8, RestockNotificationList 4,
M20 r1: REJECT, 12 findings — biggest verdict of the session. 1 BLOCKER: spec dismissed opacity overrides as residue but 240 VAS filmstrip items serialize opacity 0.50 (active-item dimming behavior dropped!). MAJORs: override membership 488/496 not "#2..#n" (Campaign #1s
M20 fixer done: 12/12 applied, every value re-derived (opacity-0.50 ×240 documented as VAS dimming FACT; true children-recursion counts for all 48 frames; sizing tags re-derived from layoutSizingVertical+layoutGrow incl. full 52-Body and 20-Nav surveys). Fixer listed its
M20 FINALIZED (r2 APPROVE, 12→0; reviewer re-derived all 12 fixes incl. the 240×0.50 opacity census, all 48 frame node-counts, both full surveys, all 10 pairwise imageRef intersections, and the item#1↔Select image linking claim). 19 modules canonical (M01–M18,
M19 (Account) extraction DONE on attempt 2 (incremental writes worked): 8 nested SECTIONs / 44 frames; 4497 nodes, 1644 instances, 1744 interaction entries; hub hero + 9-button router; Edit 3-state cycle; OrderList→Detail (only item 2 wired); Restock 7-item dataset; FQA
M21 (Footer screens) extraction DONE: 12 frames, no nested SECTIONs (MenbershipInfo / Agreement / FQA ×4 modes); 532 instances; 472/656 interaction census; inbound 416 edges (372 placed-footer + 12 master + 24 intra-Nav + 8 Account buttons incl. the 회원 탈퇴 ×4
M19 r1: REJECT, 10 findings (4 MAJOR: CheckOut "0 carriers" self-contradiction; def-edge counts conflated placed hub edges; textarea = 10 newlines not 9; hub Text child-order claim wrong on 2 of 4 modes. 6 MINOR incl. counting slips 17→18 / 33→31 / 14→11, dual footer-y
M21 r1: REJECT, 3 textual findings (MAJOR overlay census arithmetic "14 other ids"→15; MINOR textRangeFills on 12 footer address TEXTs omitted from bv-key claim; MINOR BACK button ;5:258 override list shorthand hid its boundVariables field). Fixed inline;
M19 fixer done: 10/10 applied with full re-derivation (incl. the per-set def-edge splits and the 44-frame footer-y serialization diff). Fixer also corrected the r1 verdict's own mislabel (M17's erroneous chip line is its Open-questions item 11, not Downstream contract) — my M17
M21 FINALIZED (r2 APPROVE, 3→0; reviewer re-derived the 16-destination overlay census, the 381/12 bv-key split with all 12 textRangeFills bindings, and all 4 BACK-button override lists + full action census byte-for-byte). 20 modules canonical (M01–M18, M20, M21).
M19 FINALIZED (r2 APPROVE, 10→0; reviewer re-derived all 10 fixes incl. full nav-edge groupings for all 14 family frames, the 46-node gridRowsSizing census, the 44-frame footer-y diff, and adjudicated the M17 Open-questions-item-11 erratum flag as accurate).
M22 (Popup) extraction DONE — the last screen module: 20 frames = 4 dialog families × 5 presentation variants (incl. Mobile bottom-sheet); 160 nodes; 30 Button 5:261 instances, ALL semantically blank (default 장바구니 담기 label, hover-only); section FULLY ORPHANED
M22 r1: REJECT, 2 findings (MAJOR §0.1 M01 cross-ref claimed "exactly the frames" of M01 §1.1's alternate-convention census but that census is ×9/×5/×5/×5 incl. the 4 Grid frames — rescoped to strict-subset wording + attributed the ×8/×4/×4/×4 multiset to M01 §1's Popup
M22 FINALIZED (r2 APPROVE, 2→0; both fixes verified incl. byte-compare of the Popup lorem against M09's 565:29674 and the M01 §1.1 vs §1 cross-ref adjudication). ALL 22 EXTRACTION MODULES CANONICAL (M01–M22): tokens, typography, full component layer,
M23 extraction DONE: 6036 records / 8708 entries / 9019 actions fully attributed; exactly 14 transition signatures, only 2 easing/duration pairs file-wide; 39 zero-inbound frames (Main-Mobile flow-start + 14 ViewImg + 20 Popup + 4 Grid); 47 dangling actions (all M08
M28 (assets) acquisition COMPLETE: 722/722 images downloaded (2.0GB, 0 failures); sha1(content)==imageRef verified on ALL 722 (0 mismatches — Figma imageRef is the content SHA-1); MIME census 490 jpeg + 232 png; all 213 fill-used refs present; manifest.tsv written
M28 r1: REJECT, 2 findings — spec claimed "single document font" but M02 documents Neue Haas Grotesk Display Pro on exactly 2 specimen nodes (deliberately excluded from production per M02 DIRECTIVE); contract item 3 inherited the ambiguity. Both fixed with the M02 citation;
M28 FINALIZED (r2 APPROVE, 2→0; reviewer verified the font-census fix against file.json + M02 §2.3 + M02's exclusion DIRECTIVE + M01's token alias, and confirmed the fixes touched nothing else). The user-raised asset gap is fully closed: 722 sha1-verified images on disk,
M23 r1: REJECT, 9 findings (7 MAJOR + 2 MINOR), all precise attribution/census errors: 22-pair (not 21×7) AccountNav def-edge census incl. the AccountNav=6 Membership ×6+×1 anomaly; PLP standard-order hearts span Mobile/TAB/1280; SMART_ANIMATE row mis-attributed expand
M23 fixer done: 9/9 applied with re-derivation, incl. the full per-set definition flow census (NAVIGATE 238 / OVERLAY 224 / URL 12 = 474) added to §7.2 so contract #3 now holds as "placed 2052 + definitions 474 = 2526". Fixer also re-classed the SwipeList PUSH RIGHT ×6
M23 FINALIZED (r2 APPROVE, 9→0; reviewer re-derived all 9 fixes incl. the 22-pair grouping, the full 823-action SMART_ANIMATE census, the per-set definition tables cell-for-cell, the 1/1/3/3/3 mega-menu shape in all four sets, and 2052+474=2526 contract arithmetic).
User green-lit M24–M27. Sibling repo created: ~/projects/verycommon/recto-fable (git init, main branch, README wiring to FIGMA-FETCH canonical sources + credential instructions, .gitignore covers .env*). Shopify Storefront credentials confirmed present at
Repo renamed per user: recto-web → recto-fable (~/projects/verycommon/recto-fable; README, PLAN.md, PROGRESS.md, memory all updated; git history shows init + rename commits). All references consistent; no stale "recto-web" anywhere. Implementation phase will start
User: Shopify store has products but NO collections; only Storefront tokens available (can't create collections via Storefront API). Recorded in PLAN.md START-HERE + memory: M25 step 1 = catalog query + proposed collection structure from design nav taxonomy
M24 spec FINALIZED on round 1 (third r1-clean ever, after M11/M14). Author agent wrote 420-line spec (stack pins Node22/pnpm10/Next16/React19/TS5-strict; src/ layout with src/design/tokens.ts per M01 §5; token codegen with 30-property mapping table + 3 exclusions;
M24 implementation landed in ../recto-fable (commit a23683e, 278 tracked files): scaffold (Next 16.2.9 / React 19.2.7 / TS 5.9.3 strict / pnpm@10.34.2 packageManager / Node-22 pins via engines+.nvmrc), scripts/build-tokens.mjs + sync-assets.mjs per spec §3/§7,
M25 spec authored (405→549 lines; collection proposal w/ 12+ handles, jq-verified counts; private-token client; classic customer accounts; live-API verification baked in). Catalog snapshot pinned to modules/M25-shopify-storefront/catalog-snapshot.json (63 products, 1
r4 REJECT 2 (BLOCKER: men-tops-t-shirts interim query returns 9 live, not 37 — quoted &-phrases break OR evaluation in Storefront search syntax, order-dependently: "Shirts & Tops" OR T-Shirts → 0(!); T-Shirts OR Tops → 38 true union; MAJOR: the r3
Orchestrator re-probed r4's evidence byte-exact (query passed as GraphQL $q variable via jq --arg; quotes provably preserved in payload; each probe run twice with productType sets inspected): the ORIGINAL spec queries return exactly the claimed 37/1/6/0; the alleged
M25 FINALIZED. 5 rounds: 16→6→4→2(refuted)→APPROVE. True-finding trajectory 16→6→4→0. r5 adjudicated the r4 dispute under the mandatory byte-exact probe protocol: orchestrator's refutation reproduced in full, artifact (quote-stripping → 9) deliberately reproduced.
M25 implementation committed (recto-fable d5a1d3a): lib/shopify (client/types/queries/ customer/actions), 47-key navMap byte-exact, PLP/PDP/search/account/join wired live, overlays (Search/Login/Wish/Filter/Restock), localStorage libs, remotePatterns. Verified
M26 spec finalized (381→431 lines, 2 rounds: 9→0). Decision of record: M17 Payment page NOT built; /checkout = handoff Route Handler (5-step: cookie→fetch→null/empty redirect→ buyer-identity attach→307 to checkoutUrl). Live-verified cart API surface incl. three
M26 implementation committed (recto-fable): lib/cart complete, /checkout handoff route, BagDrawer + BottomSheet, PDP/Wish/TopBar wiring, login/logout cart-cookie policy. Independent verify: build ✓ lint ✓ /checkout 307→/ ✓. M27 (assembly, routing parity,
M27 spec finalized (364 lines; pre-review 23-finding citation pass + 3 rounds 9→1→0). The assembly-policy layer is canonical: phased build map (0→H, opener notation), R0–R8 design-vs-data rules, chrome contract (Header state machine, link-target table onto navMap,
Commits in recto-fable: ecd24e3 (A chrome: Header/MegaMenu/TextBanner/Footer/PLPNav/ AccountNav, TopBar deleted), 04a363a (B pages: M09 Main 3-region + 5 editorial cards, M10 PLP density/bottom bar/card anatomy, M12 PDP gallery+ViewImg+accordions+buy bar),
Browser QA pass executed in the user's sanctioned Chrome tab: 4 width passes (500*/800/1280/ 1920; *Chrome macOS min width 500 — DEV-15 browser-limitation; Mobile mode active at 500), 1036 matrix cells fully judged, checkout handoff verified INTO Shopify hosted checkout and
User: PDP 위시리스트 button must ADD to wishlist (prototype/M12 §1.6-c wires it overlay-only; M25 §5 had assigned adds to hearts — both readings were implemented faithfully, user now overrides). Both PDP wish CTA sites call addWish(handle) then open the drawer (recto-fable
User: wish drawer (and drawers generally) visually merge with the page — canonical frames have no stroke/scrim (white-on-white; M16/M23 encode neither, faithfully implemented). Decision: 1px solid var(--color-black) border-left on the DrawerShell panel at ≥800 only
User created a real account via /join (CLASSIC CUSTOMER AUTH CONFIRMED WORKING on the store — closes QA DEV-16's auth question; admin has no classic/new toggle on this store, hosted- surface settings are irrelevant to the headless flow). Reported: membership widget greets
Live at https://recto-fable-1039760624489.asia-northeast3.run.app — GCP project recto-fable (new, billing-linked, APIs run/cloudbuild/artifactregistry/secretmanager), region asia-northeast3, min-instances=1 + startup CPU boost, 1 vCPU/1Gi, 4 SHOPIFY_* secrets in
Domain ownership verified fully via API (ADC + siteverification scope; TXT planted through Porkbun API; zero Search Console visits). Cloud Run domain mapping NOT available in asia-northeast3 → built the production-grade alternative: global external HTTPS LB
1) login button centered (left-pack variant removed); 2) PDP sticky buy bar now scroll- triggered via IntersectionObserver (product decision; canonical showed it always); 3) drawer outside-click closes (product decision; canonical backdrop was an inert fence);
User spotted wider logo→content gap vs Figma on the landing page. Root cause: canonical model places Header ABSOLUTE overlapping the top 60px of every Body (M18 §A0.1 verbatim; M09 §0/M10 §1.1), Gap.L padding budgets for it; our in-flow sticky header added 60px on top
User: "join sends but nothing changes; login button stays grey." Diagnosis (browser E2E): join flow itself CORRECT (fresh signup → instant redirect to /account logged in — verified); the user's attempt was rejected by Shopify's PHONE-UNIQUENESS rule ("Phone has already been
User: header icons look small on phone vs canonical. Measured in-browser: glyphs rendered ~5px vs canonical 12px (Vector per M08 §1.1.1). Root cause: icon SVGs declare width/height=28 (the 28×28 InteractiveArea), but global `svg{max-width:100%}` clamped SVG width to the 12px
User: /about/f-store text left-aligned, canonical is centered. Verified canonical: address TEXT 629:16059 + map TextBTN 629:16061 = style.textAlignHorizontal CENTER (M20 §4.2); our .address had no text-align (→ left), .mapRow justify-self:start. Fixed both to center;
User flagged f-store breadcrumb + 'korea' left, wanted full alignment audit. Confirmed canonical: Location/Filter rows pa=CENTER (all widths), korea TextBTN frame-centered at 328/760/1240/1880 → fixed StoreCrumbs (breadcrumb justify-content:center + grid-column 1/-1;
User: banner 닫기 doesn't close. It was canonically faithful (M08 §4: TextBanner has zero interactions; M23 §8.9 prototype-silent) — shipped inert. Product decision: wire it. TextBanner → client component; 닫기 dismisses + persists for the session (sessionStorage via
User opted for a custom in-app dashboard (over Shopify metaobjects) to swap ALL editorial images sitewide for image OR video, shared-password auth, lean build. Built: GCS bucket recto-fable-media (public read; Cloud Run SA objectAdmin), ADMIN_PASSWORD secret + MEDIA_BUCKET
User: About→Campaign should have 2 distinct images, About→Collection 2, main dropdowns 1 — build showed the same placeholder (ece298d0) for every mega-menu cell. Root cause: M27 assembly used the Img master-default for all Content cells; canonical has 5 DISTINCT refs
Multi-batch client-reported UI fixes; all browser-verified (dev + live recto.gunho.ai), build 0-err + lint clean, deployed rev 00013 (recto-fable-00013-24g, 100% traffic), committed 0e7fc82 + pushed origin main. PROGRESS for the session's product decisions / canonical fixes:
Four client-reported mobile fixes; build 0-err + lint clean, deployed rev 00014 (recto-fable-00014-q6b, 100% traffic), committed e53ee46 + pushed origin main. All four verified live on recto.gunho.ai via served CSS/HTML (Chrome extension was disconnected this
Plan-mode batch (tasks 7/9/10/11; task 8 PLP card +/X SKIPPED per client). Build 0-err + lint clean, deployed rev 00015 (recto-fable-00015-s6w, 100% traffic), committed c9e6f66 + pushed. All browser-verified live (dev + recto.gunho.ai) at mobile 500px and desktop 1366px. Changes:
Two header tweaks to the campaign/collection mega-menu CONTENT IMAGE CAPTION (Header.tsx renderContent `<span class="… text-rg-13-11">`, e.g. "men fall summer 2024"). Build 0-err + lint clean, deployed rev 00016 (recto-fable-00016-x5q, 100%), committed 71e4cc6 + pushed. Verified live
Three client tweaks. Build 0-err + lint clean, deployed rev 00017 (recto-fable-00017-qrr, 100%), committed fd62c04 + pushed. Verified live (dev): /join + restock-drawer phone format to 010-XXXX-XXXX; login "account" title font-weight 400; restock submit justify-content center.
M29 (v2367) IMPLEMENTED in ../recto-fable: new routes /find-id + /find-password (src/app/), shared src/components/forms/FindForm.tsx (variant id|password; password adds the leading 아이디 field) per M29 §A0.2/§A0.3. Reuses forms/ui.module.css (.body/.col/.stackS/.stackM/.field/.button)
New `src/components/about/AboutNav.tsx` (+ .module.css), a PLPNav-modeled client breadcrumb nav, replaces the static `StoreCrumbs.LocationRow` on the d-store (DStoreClient.tsx) and f-store (about/f-store/page.tsx) pages. `LocationRow` removed; `KoreaNav` unchanged.
Built on branch feat/plp-card-color-size-cart (5 commits) → merged --no-ff into main → pushed (e55fb91) → deployed by user (Cloud Run rev recto-fable-00020-4tl, 100% traffic). (1) card defaults to LEFTMOST color; chip select drives image (variant.image when distinct) + size
Request: on entering a PDP, never leave only a color selected — resolve a full SKU (color+size). Default to the SMALLEST AVAILABLE size for the active color; if that color is entirely sold out, select the SMALLEST size variant and the bag CTA reads 재입고 알림 신청.
Client: the 재입고 알림 신청 drawer header was Bold; make it Regular. One-line fix in RestockDrawer.tsx — pass `regularTitle` to DrawerShell (same flag BagDrawer already uses), so the <h2> renders text-rg-13-11 instead of text-bd-13-11. The two utility classes (src/styles/typography.css)
WORKFLOW SHIFT (98160dc): all future recto-fable fixes now go on the `dev` branch, which auto-deploys via GitHub Actions + WIF to a SEPARATE staging service recto-fable-dev (recto-dev.gunho.ai). dev→main via PR; no direct commits to main/prod. Staging is isolated (own media bucket via…
Five client tweaks on `dev` (recto-dev.gunho.ai), each live-verified: Phone auto-format on /account/address add+edit forms (ce2dec5): new client PhoneField wraps the server-rendered input with formatKoreanPhone onChange (010-XXXX-XXXX as typed); phoneToE164 strips the
15-issue feedback from Notion page "8" (read via logged-in Chrome; private page). Grouped into batches. BATCH A (7447c90) — CSS/quick wins: (#6/#7-8) PLP card +dropdown size list shows ALL sizes and scrolls WITHIN the thumbnail — `.card` made a container-query container; list bounded to…
INCIDENT: staging /shop rendered chrome but an EMPTY product grid (PlpGrid 0 children). Diagnosed via Cloud Run logs: `TypeError: fetch failed` ONLY on rev 00013 (Batch B), starting 11:13 UTC — but 00013 had deployed 09:37 and run clean ~1.5h first (a code/image defect fails from the first…