/* spec-architecture.jsx — Theme folder structure, file map, naming conventions */ const TREE = [ { depth:0, name:'theme/', type:'dir' }, { depth:1, name:'assets/', type:'dir' }, { depth:2, name:'glose.css', type:'file', note:'CSS custom props + global styles' }, { depth:2, name:'glose.js', type:'file', note:'Cart drawer, dropdowns, qty stepper' }, { depth:2, name:'icons.svg', type:'file', note:'SVG sprite (bag, search, account, close, chevron)' }, { depth:1, name:'config/', type:'dir' }, { depth:2, name:'settings_schema.json', type:'file', note:'Theme editor — global color, type direction' }, { depth:2, name:'settings_data.json', type:'file', note:'Saved editor values (git-tracked)' }, { depth:1, name:'layout/', type:'dir' }, { depth:2, name:'theme.liquid', type:'file', note:', CSS vars, global snippets, body scaffold' }, { depth:2, name:'password.liquid', type:'file', note:'Coming-soon / drop-teaser page' }, { depth:1, name:'sections/', type:'dir' }, { depth:2, name:'announcement-bar.liquid', type:'file', note:'Ticker strip (drop alert, shipping threshold)' }, { depth:2, name:'header.liquid', type:'file', note:'Sticky nav + cart icon trigger' }, { depth:2, name:'footer.liquid', type:'file', note:'4-column footer + wordmark' }, { depth:2, name:'hero.liquid', type:'file', note:'Full-width hero, optional countdown' }, { depth:2, name:'collection-grid.liquid', type:'file', note:'Product card grid (2–4 col)' }, { depth:2, name:'product-detail.liquid', type:'file', note:'PDP: gallery + form + meta' }, { depth:2, name:'lookbook-grid.liquid', type:'file', note:'Editorial mosaic tile grid' }, { depth:2, name:'drop-countdown.liquid', type:'file', note:'Standalone countdown block' }, { depth:2, name:'rich-text.liquid', type:'file', note:'Constrained prose, max-width 640px' }, { depth:2, name:'featured-product.liquid', type:'file', note:'Single product highlight, 2-col' }, { depth:2, name:'newsletter.liquid', type:'file', note:'Email capture with Klaviyo hook' }, { depth:2, name:'image-banner.liquid', type:'file', note:'Full-bleed image with overlaid text' }, { depth:1, name:'snippets/', type:'dir' }, { depth:2, name:'product-card.liquid', type:'file', note:'Card: image, name, color, price, quick-add' }, { depth:2, name:'cart-drawer.liquid', type:'file', note:'Slide-in cart panel (spring transition)' }, { depth:2, name:'price.liquid', type:'file', note:'Price display: regular, sale, sold-out' }, { depth:2, name:'tag-pill.liquid', type:'file', note:'Status pill: NEW · SOLD OUT · LIVE · LAST N' }, { depth:2, name:'quantity-selector.liquid', type:'file', note:'−/qty/+ stepper' }, { depth:2, name:'icon.liquid', type:'file', note:'SVG sprite caller, size + color params' }, { depth:2, name:'image.liquid', type:'file', note:'Responsive image wrapper with aspect ratio' }, { depth:1, name:'templates/', type:'dir' }, { depth:2, name:'index.json', type:'file', note:'Homepage — hero + featured + lookbook' }, { depth:2, name:'collection.json', type:'file', note:'Collection grid ± image banner header' }, { depth:2, name:'product.json', type:'file', note:'PDP — product-detail section' }, { depth:2, name:'page.json', type:'file', note:'Generic page — rich-text' }, { depth:2, name:'cart.json', type:'file', note:'Cart page (fallback for no-JS)' }, { depth:2, name:'search.json', type:'file', note:'Search results grid' }, { depth:2, name:'404.json', type:'file', note:'404 — minimal, on-brand' }, { depth:2, name:'password.json', type:'file', note:'Drop teaser — countdown + notify form' }, { depth:1, name:'locales/', type:'dir' }, { depth:2, name:'en.default.json', type:'file', note:'EN — primary' }, { depth:2, name:'cs.json', type:'file', note:'CS — Czech (client language)' }, { depth:2, name:'it.json', type:'file', note:'IT — Italian (origin market)' }, ]; const DS_MAP = [ ['Wordmark (F1A)', 'snippets/icon.liquid + glose.css .wordmark', 'SVG or CSS-only; acute strap drawn in CSS'], ['Nav component', 'sections/header.liquid', 'Sticky, threshold-based bg change'], ['Announcement bar', 'sections/announcement-bar.liquid', 'Marquee-mode for drop windows'], ['Product card', 'snippets/product-card.liquid', 'Hover quick-add via JS class toggle'], ['Btn · primary', 'glose.css .btn-primary + glose.js', 'Ink→neon on hover via CSS custom prop'], ['Btn · ghost', 'glose.css .btn-ghost', ''], ['Field / input', 'glose.css .field', 'Focus: bottom border 2px'], ['Tag / pill', 'snippets/tag-pill.liquid', 'variant param: default|solid|neon|ghost'], ['Cart drawer', 'snippets/cart-drawer.liquid + glose.js', 'Spring 480ms, overlay backdrop'], ['PDP pattern', 'sections/product-detail.liquid', 'Variant picker, qty stepper, add-to-cart'], ['Drop hero', 'sections/hero.liquid', 'Optional countdown via drop-countdown.js'], ['Lookbook tile grid', 'sections/lookbook-grid.liquid', 'CSS Grid, no JS parallax on Shopify (perf)'], ['Footer', 'sections/footer.liquid', '4-col grid, bone-on-ink'], ['Color tokens (T.*)', 'glose.css :root { --color-* }', 'See handoff → CSS custom properties'], ['Spacing scale (S.*)', 'glose.css --space-{1..10}', '4px base unit'], ['Motion tokens (M.*)', 'glose.css --dur-fast, --dur-base…', 'cubic-bezier encoded in CSS vars'], ]; const ArchitectureSection = () => (
{TREE.map((item, i) => { const indent = item.depth * 20; const isDir = item.type === 'dir'; return (
{isDir ? '▸' : '·'} {item.name}
{item.note}
); })}
↳ Dawn 14+ as base — override only what differs. Delete unused Dawn sections.
{['DS component (F1B)', 'Shopify file', 'Implementation note'].map(h => ( {h} ))}
{DS_MAP.map(([ds, file, note], i) => (
{ds} {file} {note}
))}
↳ Every DS token maps 1:1 to a CSS custom property in :root — see section 04 (Handoff)
{[ ['Liquid sections', 'kebab-case noun · section-name.liquid', 'hero.liquid, collection-grid.liquid'], ['Liquid snippets', 'kebab-case noun · snippet-name.liquid', 'product-card.liquid, tag-pill.liquid'], ['CSS classes', '.block__element--modifier (BEM-lite)', '.product-card__image--hovered'], ['CSS custom props', '--color-ink, --space-5, --dur-base', 'Mirrors DS token names'], ['JS custom events', 'glose:cart:open, glose:drawer:close', 'Dispatched on document'], ['Schema IDs', 'snake_case · no dashes', 'show_countdown, grid_columns'], ['Section blocks', 'snake_case type, kebab label', 'type: "nav_link", "feature_item"'], ['Git branches', 'feature/section-name', 'feature/product-detail, fix/cart-drawer'], ].map(([rule, pattern, example], i) => (
{rule}
{pattern}
{example}
))}
); Object.assign(window, { ArchitectureSection });