astro-component-kit 0.4.0 → 0.5.0

package/src/components/lib/templates/ecommerce/data.ts

@@ -0,0 +1,187 @@
+// src/components/lib/templates/ecommerce/data.ts
+// Demo catalogue and settings for the e-commerce template.
+// Copy this file, replace the products and settings with yours, and pass it as `store`.
+
+import type { Product, ShippingRate, StoreCategory } from '../../ecommerce/types';
+
+export interface StoreRoutes {
+  /** Store home. */
+  home: string;
+  /** Catalogue / category page. Category links add `?category=<id>`. */
+  shop: string;
+  /** Product URL prefix — product pages live at `${product}${slug}/`. */
+  product: string;
+  /** Checkout page. */
+  checkout: string;
+}
+
+export interface StoreConfig {
+  name: string;
+  tagline: string;
+  currency: string;
+  locale: string;
+  cartKey: string;
+  freeShippingThreshold: number;
+  taxRate: number;
+  promoCodes: Record<string, number>;
+  promoMessages: string[];
+  shippingRates: ShippingRate[];
+  categories: StoreCategory[];
+  products: Product[];
+  /** Recent purchases shown by LiveActivityToast (product = slug). */
+  recentBuyers: Array<{ name: string; city: string; product: string; ago: string }>;
+  /** Product slugs featured on the home page. */
+  bestSellers: string[];
+  newArrivals: string[];
+  footer: Array<{ title: string; links: Array<{ label: string; href: string }> }>;
+}
+
+export const defaultRoutes: StoreRoutes = {
+  home: '/',
+  shop: '/shop/',
+  product: '/product/',
+  checkout: '/checkout/',
+};
+
+const C = {
+  graphite: { name: 'Graphite', hex: '#2b2b2f' },
+  sand: { name: 'Sand', hex: '#d8c3a5' },
+  ocean: { name: 'Ocean', hex: '#3d6f9e' },
+  moss: { name: 'Moss', hex: '#5f7a4e' },
+  clay: { name: 'Clay', hex: '#b5654a' },
+  snow: { name: 'Snow', hex: '#e9e9ea' },
+};
+
+export const demoStore: StoreConfig = {
+  name: 'Nova Store',
+  tagline: 'Considered gear for everyday life. Designed in small batches, built to last.',
+  currency: 'USD',
+  locale: 'en-US',
+  cartKey: 'nova-cart',
+  freeShippingThreshold: 75,
+  taxRate: 0.08,
+  promoCodes: { ASTRO10: 10, WELCOME15: 15 },
+  promoMessages: [
+    'Free shipping on orders over $75',
+    'Use code ASTRO10 for 10% off your first order',
+    '30-day free returns on everything',
+  ],
+  shippingRates: [
+    { id: 'standard', label: 'Standard', eta: '3–5 business days', price: 6 },
+    { id: 'express', label: 'Express', eta: '1–2 business days', price: 14 },
+    { id: 'pickup', label: 'Store pickup', eta: 'Ready in 2 hours', price: 0 },
+  ],
+  categories: [
+    { id: 'audio', name: 'Audio', description: 'Headphones and speakers tuned for warm, detailed sound.', icon: 'headphones', hue: 38 },
+    { id: 'wearables', name: 'Wearables', description: 'Watches and eyewear that keep up with your day.', icon: 'watch', hue: 205 },
+    { id: 'bags', name: 'Bags', description: 'Backpacks and totes for commutes and weekends.', icon: 'backpack', hue: 150 },
+    { id: 'home', name: 'Home', description: 'Lamps, mugs and planters for calmer spaces.', icon: 'lamp', hue: 22 },
+    { id: 'apparel', name: 'Apparel', description: 'Layers and sneakers made from better materials.', icon: 'jacket', hue: 280 },
+  ],
+  products: [
+    {
+      slug: 'aurora-headphones', name: 'Aurora Wireless Headphones', price: 189, compareAt: 229, category: 'audio',
+      rating: 4.8, reviews: 312, badge: 'Bestseller', badgeVariant: 'warning', icon: 'headphones', hue: 38,
+      colors: [C.graphite, C.sand, C.ocean], inStock: true, stock: 4,
+      description: 'Adaptive noise cancelling, 40-hour battery and memory-foam cushions that disappear after five minutes. Tuned in-house for a warm, detailed sound.',
+    },
+    {
+      slug: 'pulse-speaker', name: 'Pulse Portable Speaker', price: 129, category: 'audio',
+      rating: 4.6, reviews: 184, badge: 'New', badgeVariant: 'info', icon: 'speaker', hue: 262,
+      colors: [C.graphite, C.clay, C.moss], inStock: true,
+      description: '360° sound in a waterproof aluminium shell. 20 hours of playback and a strap that clips to anything.',
+    },
+    {
+      slug: 'orbit-watch', name: 'Orbit Smart Watch', price: 249, category: 'wearables',
+      rating: 4.7, reviews: 226, badge: 'New', badgeVariant: 'info', icon: 'watch', hue: 205,
+      colors: [C.graphite, C.snow, C.ocean, C.clay, C.moss], inStock: true, stock: 2,
+      description: 'Sapphire glass, seven-day battery and health tracking that stays out of your way until you need it.',
+    },
+    {
+      slug: 'solace-sunglasses', name: 'Solace Polarised Sunglasses', price: 139, category: 'wearables',
+      rating: 4.5, reviews: 98, icon: 'sunglasses', hue: 18,
+      colors: [C.graphite, C.sand], inStock: true,
+      description: 'Hand-polished acetate frames with polarised, UV400 lenses and a lifetime hinge warranty.',
+    },
+    {
+      slug: 'trail-backpack', name: 'Trail 24L Backpack', price: 119, category: 'bags',
+      rating: 4.9, reviews: 402, badge: 'Bestseller', badgeVariant: 'warning', icon: 'backpack', hue: 150,
+      colors: [C.moss, C.graphite, C.sand], inStock: true,
+      description: 'Recycled ripstop, a padded 16" laptop sleeve and a clamshell opening that packs like a suitcase.',
+    },
+    {
+      slug: 'city-tote', name: 'City Canvas Tote', price: 69, compareAt: 89, category: 'bags',
+      rating: 4.4, reviews: 76, badge: '-22%', badgeVariant: 'danger', icon: 'bag', hue: 32,
+      colors: [C.sand, C.graphite], inStock: true,
+      description: 'Waxed organic canvas with leather handles and an inner zip pocket. Gets better with age.',
+    },
+    {
+      slug: 'halo-lamp', name: 'Halo Desk Lamp', price: 89, category: 'home',
+      rating: 4.6, reviews: 143, icon: 'lamp', hue: 45,
+      colors: [C.snow, C.graphite, C.clay], inStock: true,
+      description: 'Dimmable, flicker-free light with a warm-to-cool range and a touch strip on the base.',
+    },
+    {
+      slug: 'ember-mug', name: 'Ember Stoneware Mug', price: 34, category: 'home',
+      rating: 4.8, reviews: 268, icon: 'mug', hue: 12,
+      colors: [C.clay, C.snow, C.ocean], inStock: true,
+      description: 'Hand-thrown stoneware, 350 ml, dishwasher and microwave safe. Every glaze is slightly unique.',
+    },
+    {
+      slug: 'fern-planter', name: 'Fern Ceramic Planter', price: 42, category: 'home',
+      rating: 4.3, reviews: 51, icon: 'plant', hue: 120,
+      colors: [C.snow, C.moss], inStock: true,
+      description: 'Matte ceramic planter with a hidden drainage tray, sized for 15 cm pots.',
+    },
+    {
+      slug: 'nomad-bottle', name: 'Nomad Insulated Bottle', price: 39, category: 'home',
+      rating: 4.7, reviews: 189, icon: 'bottle', hue: 190,
+      colors: [C.ocean, C.graphite, C.moss], inStock: false,
+      description: 'Keeps drinks cold for 24 hours or hot for 12. Leak-proof lid, 750 ml.',
+    },
+    {
+      slug: 'drift-sneakers', name: 'Drift Everyday Sneakers', price: 149, category: 'apparel',
+      rating: 4.6, reviews: 211, badge: 'Restocked', badgeVariant: 'success', icon: 'sneaker', hue: 0,
+      colors: [C.snow, C.graphite, C.sand], sizes: ['38', '39', '40', '41', '42', '43', '44'], inStock: true, stock: 3,
+      description: 'A cushioned sugarcane-foam sole and a knit upper you can throw in the washing machine.',
+    },
+    {
+      slug: 'storm-jacket', name: 'Storm Shell Jacket', price: 219, compareAt: 259, category: 'apparel',
+      rating: 4.8, reviews: 133, badge: '-15%', badgeVariant: 'danger', icon: 'jacket', hue: 280,
+      colors: [C.graphite, C.ocean, C.clay], sizes: ['XS', 'S', 'M', 'L', 'XL'], inStock: true, stock: 6,
+      description: 'Three-layer waterproof shell with taped seams, pit zips and a helmet-compatible hood.',
+    },
+  ],
+  recentBuyers: [
+    { name: 'Lucía', city: 'Madrid', product: 'aurora-headphones', ago: '2 min ago' },
+    { name: 'Tom', city: 'Berlin', product: 'trail-backpack', ago: '5 min ago' },
+    { name: 'Aiko', city: 'Osaka', product: 'orbit-watch', ago: '9 min ago' },
+    { name: 'Marco', city: 'Milan', product: 'drift-sneakers', ago: '14 min ago' },
+    { name: 'Chloé', city: 'Lyon', product: 'ember-mug', ago: '21 min ago' },
+  ],
+  bestSellers: ['aurora-headphones', 'trail-backpack', 'orbit-watch', 'ember-mug'],
+  newArrivals: ['pulse-speaker', 'drift-sneakers', 'storm-jacket', 'halo-lamp'],
+  footer: [
+    { title: 'Shop', links: [{ label: 'Audio', href: '#' }, { label: 'Wearables', href: '#' }, { label: 'Bags', href: '#' }, { label: 'Home', href: '#' }] },
+    { title: 'Help', links: [{ label: 'Shipping', href: '#' }, { label: 'Returns', href: '#' }, { label: 'Order status', href: '#' }, { label: 'Contact', href: '#' }] },
+    { title: 'Company', links: [{ label: 'About', href: '#' }, { label: 'Journal', href: '#' }, { label: 'Stores', href: '#' }] },
+    { title: 'Legal', links: [{ label: 'Privacy', href: '#' }, { label: 'Terms', href: '#' }, { label: 'Cookies', href: '#' }] },
+  ],
+};
+
+/** Helpers shared by the template pages. */
+export function productHref(routes: StoreRoutes, slug: string): string {
+  return `${routes.product}${slug}/`;
+}
+
+export function categoryHref(routes: StoreRoutes, id?: string): string {
+  return id ? `${routes.shop}?category=${encodeURIComponent(id)}` : routes.shop;
+}
+
+export function categoryNames(store: StoreConfig): Record<string, string> {
+  return Object.fromEntries(store.categories.map((c) => [c.id, c.name]));
+}
+
+export function pickProducts(store: StoreConfig, slugs: string[]): Product[] {
+  return slugs.map((s) => store.products.find((p) => p.slug === s)).filter((p): p is Product => Boolean(p));
+}

package/src/components/lib/templates/ecommerce/index.ts

@@ -0,0 +1,14 @@
+// src/components/lib/templates/ecommerce/index.ts
+// E-commerce template: complete store pages built from library components.
+//
+//   import { StoreHomePage } from 'astro-component-kit/templates/ecommerce';
+//   <StoreHomePage store={myStore} routes={{ home: '/', shop: '/shop/', product: '/product/', checkout: '/checkout/' }} />
+
+export { default as StoreLayout } from './StoreLayout.astro';
+export { default as StoreHomePage } from './StoreHomePage.astro';
+export { default as StoreCategoryPage } from './StoreCategoryPage.astro';
+export { default as StoreProductPage } from './StoreProductPage.astro';
+export { default as StoreCheckoutPage } from './StoreCheckoutPage.astro';
+
+export { demoStore, defaultRoutes, productHref, categoryHref, categoryNames, pickProducts } from './data';
+export type { StoreConfig, StoreRoutes } from './data';

package/src/components/lib/templates/ecommerce-editorial/EditorialBagPage.astro

@@ -0,0 +1,52 @@
+---
+/**
+ * EditorialBagPage — Full shopping-bag page (CartPageList) with gift note and summary,
+ * followed by a "You may also like" ShopProductRail.
+ *
+ * Usage (src/pages/bag.astro):
+ *   import { EditorialBagPage } from 'astro-component-kit/templates/ecommerce-editorial';
+ *   <EditorialBagPage />
+ *
+ * @param {EditorialStore} store - Catalogue and settings.
+ * @param {EditorialRoutes} routes - Page URLs.
+ * @param {string} theme - Initial theme (light|dark|auto). Default 'light'.
+ * @param {boolean} seedCart - Pre-fill the bag with demo items. Default false.
+ * @param {boolean} noindex - Add robots noindex. Default true (bag pages should not be indexed).
+ */
+import EditorialLayout from './EditorialLayout.astro';
+import CartPageList from '../../ecommerce/CartPageList.astro';
+import ShopProductRail from '../../sections/ShopProductRail.astro';
+import { formaStore, editorialRoutes, pickEditorial, type EditorialStore, type EditorialRoutes } from './data';
+
+interface Props {
+  store?: EditorialStore;
+  routes?: EditorialRoutes;
+  theme?: 'light' | 'dark' | 'auto';
+  seedCart?: boolean;
+  noindex?: boolean;
+}
+
+const { store = formaStore, routes = editorialRoutes, theme = 'light', seedCart = false, noindex = true } = Astro.props;
+const suggestions = pickEditorial(store, ['kiln-mug', 'organic-tee', 'acetate-frames', 'paper-lamp', 'canvas-runner']);
+---
+
+<EditorialLayout title="Your bag" description={`Your bag — ${store.name}`} store={store} routes={routes} currentHref={routes.bag} theme={theme} seedCart={seedCart} noindex={noindex}>
+  <div class="forma-wrap bag-page">
+    <CartPageList
+      cartKey={store.cartKey}
+      checkoutHref={routes.checkout}
+      continueHref={routes.shop}
+      freeShippingThreshold={store.freeShippingThreshold}
+      shippingFlat={store.shippingFlat}
+      currency={store.currency}
+      locale={store.locale}
+    />
+  </div>
+  <div class="forma-wrap section-space">
+    <ShopProductRail eyebrow="Before you go" title="You may also *like*" products={suggestions} productBase={routes.product} link={{ label: 'Shop all', href: routes.shop }} id="bag-rail" size="sm" currency={store.currency} locale={store.locale} cartKey={store.cartKey} />
+  </div>
+</EditorialLayout>
+
+<style>
+  .bag-page { padding-top: clamp(2rem, 5vw, 3.5rem); }
+</style>

package/src/components/lib/templates/ecommerce-editorial/EditorialCheckoutPage.astro

@@ -0,0 +1,123 @@
+---
+/**
+ * EditorialCheckoutPage — Split-screen checkout in focus mode: CheckoutForm on the paper side,
+ * a full-height tinted panel with OrderSummary (promo codes, shipping, total) on the other.
+ *
+ * Usage (src/pages/checkout.astro):
+ *   import { EditorialCheckoutPage } from 'astro-component-kit/templates/ecommerce-editorial';
+ *   <EditorialCheckoutPage />
+ *
+ * @param {EditorialStore} store - Catalogue and settings.
+ * @param {EditorialRoutes} routes - Page URLs.
+ * @param {string} theme - Initial theme (light|dark|auto). Default 'light'.
+ * @param {boolean} seedCart - Pre-fill the bag with demo items. Default false.
+ * @param {boolean} noindex - Add robots noindex. Default true.
+ */
+import EditorialLayout from './EditorialLayout.astro';
+import CheckoutForm from '../../ecommerce/CheckoutForm.astro';
+import OrderSummary from '../../ecommerce/OrderSummary.astro';
+import { formaStore, editorialRoutes, type EditorialStore, type EditorialRoutes } from './data';
+
+interface Props {
+  store?: EditorialStore;
+  routes?: EditorialRoutes;
+  theme?: 'light' | 'dark' | 'auto';
+  seedCart?: boolean;
+  noindex?: boolean;
+}
+
+const { store = formaStore, routes = editorialRoutes, theme = 'light', seedCart = false, noindex = true } = Astro.props;
+---
+
+<EditorialLayout title="Checkout" description={`Secure checkout — ${store.name}`} store={store} routes={routes} theme={theme} seedCart={seedCart} noindex={noindex} minimal>
+  <div class="co-split">
+    <div class="co-split__form">
+      <div class="co-split__inner">
+      <nav class="co-steps" aria-label="Checkout steps">
+        <ol>
+          <li><a href={routes.bag}>Bag</a></li>
+          <li><span aria-current="step">Details &amp; payment</span></li>
+          <li><span>Confirmation</span></li>
+        </ol>
+      </nav>
+      <h1 class="co-title">Checkout</h1>
+      <CheckoutForm
+        id="checkout"
+        variant="plain"
+        shippingRates={store.shippingRates}
+        freeShippingThreshold={store.freeShippingThreshold}
+        countries={[
+          { label: 'Spain', value: 'ES' },
+          { label: 'Portugal', value: 'PT' },
+          { label: 'France', value: 'FR' },
+          { label: 'Germany', value: 'DE' },
+          { label: 'Italy', value: 'IT' },
+          { label: 'United Kingdom', value: 'GB' },
+        ]}
+        cartKey={store.cartKey}
+        currency={store.currency}
+        locale={store.locale}
+        continueHref={routes.home}
+      />
+      </div>
+    </div>
+    <div class="co-split__summary">
+      <OrderSummary
+        title="In your bag"
+        variant="plain"
+        cartKey={store.cartKey}
+        shippingRates={store.shippingRates}
+        freeShippingThreshold={store.freeShippingThreshold}
+        taxRate={store.taxRate}
+        promoCodes={store.promoCodes}
+        editHref={routes.bag}
+        currency={store.currency}
+        locale={store.locale}
+      />
+    </div>
+  </div>
+</EditorialLayout>
+
+<script>
+  document.addEventListener('ack:order-placed', () => {
+    const steps = document.querySelectorAll<HTMLElement>('.co-steps li');
+    steps.forEach((li, i) => {
+      const el = li.firstElementChild as HTMLElement | null;
+      if (!el) return;
+      if (i === steps.length - 1) el.setAttribute('aria-current', 'step');
+      else el.removeAttribute('aria-current');
+    });
+  });
+</script>
+
+<style>
+  .co-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); min-height: calc(100vh - var(--shop-header-h)); }
+  .co-split__form { padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 4vw, 4.5rem) clamp(3rem, 6vw, 5rem); }
+  .co-split__inner { max-width: 640px; margin-left: auto; }
+  .co-split__summary { padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 4vw, 4rem); background: var(--c-bg-2); border-left: 1px solid var(--c-border); }
+  .co-split__summary > :global(.o-summary) { max-width: 460px; position: sticky; top: calc(var(--shop-header-h) + 1.5rem); }
+  .co-steps ol { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 var(--sp-5); padding: 0; list-style: none; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text-2); }
+  .co-steps li + li::before { content: '→'; margin-right: 0.6rem; opacity: 0.5; }
+  .co-steps a { color: inherit; }
+  .co-steps [aria-current] { color: var(--c-text-1); font-weight: 700; }
+  .co-title { margin: 0 0 var(--sp-6); font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 400; letter-spacing: -0.04em; line-height: 1; color: var(--c-text-1); }
+
+  /* Editorial tuning of the shared checkout components */
+  .co-split :global(.checkout__section) { padding-bottom: var(--sp-6); border-bottom: 1px solid var(--c-border); }
+  .co-split :global(.checkout__section legend) { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; letter-spacing: -0.02em; }
+  .co-split :global(.checkout__num) { background: transparent; border: 1px solid var(--c-text-1); color: var(--c-text-1); font-family: var(--font-sans); }
+  .co-split :global(.checkout__rate) { border-radius: var(--r-sm); }
+  .co-split :global(.checkout__pay) { border-radius: var(--r-sm); background: var(--c-text-1); color: var(--c-bg); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.9rem; }
+  .co-split :global(.checkout__pay:hover) { background: var(--shop-accent); color: var(--c-on-primary); filter: none; }
+  .co-split :global(.checkout__done) { border-radius: var(--r-sm); }
+  .co-split :global(.o-summary__title) { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; }
+  .co-split :global(.o-summary__promo input), .co-split :global(.o-summary__promo button) { border-radius: var(--r-sm); }
+  .co-split :global(.o-line__media) { border-radius: var(--r-sm); }
+
+  @media (max-width: 960px) {
+    .co-split { grid-template-columns: 1fr; }
+    .co-split__summary { order: -1; border-left: 0; border-bottom: 1px solid var(--c-border); }
+    .co-split__summary > :global(.o-summary) { position: static; max-width: none; }
+    .co-split__inner { margin-left: 0; max-width: none; }
+  }
+</style>

package/src/components/lib/templates/ecommerce-editorial/EditorialHomePage.astro

@@ -0,0 +1,102 @@
+---
+/**
+ * EditorialHomePage — Editorial store home: magazine hero with ticker, collection mosaic,
+ * new-in product rail, shoppable lookbook, values marquee, reviews and newsletter.
+ *
+ * Usage (src/pages/index.astro):
+ *   import { EditorialHomePage } from 'astro-component-kit/templates/ecommerce-editorial';
+ *   <EditorialHomePage />
+ *
+ * @param {EditorialStore} store - Catalogue and settings. Default: Forma demo store.
+ * @param {EditorialRoutes} routes - Page URLs.
+ * @param {string} theme - Initial theme (light|dark|auto). Default 'light'.
+ * @param {boolean} seedCart - Pre-fill the bag with demo items. Default false.
+ * @param {boolean} noindex - Add robots noindex. Default false.
+ */
+import EditorialLayout from './EditorialLayout.astro';
+import ShopHeroEditorial from '../../sections/ShopHeroEditorial.astro';
+import ShopCollectionMosaic from '../../sections/ShopCollectionMosaic.astro';
+import ShopProductRail from '../../sections/ShopProductRail.astro';
+import ShopLookbook from '../../sections/ShopLookbook.astro';
+import ShopValuesMarquee from '../../sections/ShopValuesMarquee.astro';
+import ShopReviewsEditorial from '../../sections/ShopReviewsEditorial.astro';
+import ShopNewsletterEditorial from '../../sections/ShopNewsletterEditorial.astro';
+import { formaStore, editorialRoutes, editorialProductHref, editorialCategoryHref, pickEditorial, type EditorialStore, type EditorialRoutes } from './data';
+
+interface Props {
+  store?: EditorialStore;
+  routes?: EditorialRoutes;
+  theme?: 'light' | 'dark' | 'auto';
+  seedCart?: boolean;
+  noindex?: boolean;
+}
+
+const { store = formaStore, routes = editorialRoutes, theme = 'light', seedCart = false, noindex = false } = Astro.props;
+
+const count = (id: string) => store.products.filter((p) => p.category === id).length;
+const cat = (id: string) => store.categories.find((c) => c.id === id);
+const mosaic = ['clothing', 'objects', 'bags', 'shoes']
+  .map((id) => cat(id))
+  .filter((c): c is NonNullable<typeof c> => Boolean(c))
+  .map((c) => ({ title: c.name, text: c.description, href: editorialCategoryHref(routes, c.id), count: count(c.id), icon: c.icon, hue: c.hue }));
+const coat = store.products.find((p) => p.slug === 'wool-overcoat') ?? store.products[0];
+const fmt = (n: number) => new Intl.NumberFormat(store.locale, { style: 'currency', currency: store.currency, maximumFractionDigits: 0 }).format(n);
+const look = store.look
+  .map((l) => {
+    const product = store.products.find((p) => p.slug === l.slug);
+    return product ? { x: l.x, y: l.y, product, href: editorialProductHref(routes, product.slug) } : null;
+  })
+  .filter((s): s is NonNullable<typeof s> => Boolean(s));
+const money = { currency: store.currency, locale: store.locale, cartKey: store.cartKey };
+---
+
+<EditorialLayout title={`${store.name} Studio — ${store.tagline.split(',')[0]}`} description={store.tagline} store={store} routes={routes} currentHref={routes.home} theme={theme} seedCart={seedCart} noindex={noindex}>
+  <ShopHeroEditorial
+    kicker="Autumn / Winter 26"
+    issue="N° 04"
+    title="Quiet *objects* for everyday rituals"
+    text={store.tagline}
+    primary={{ label: 'Shop the collection', href: routes.shop }}
+    secondary={{ label: 'New in', href: `${routes.shop}?sort=featured` }}
+    media={{ icon: coat.icon, hue: coat.hue, caption: `${coat.name}, in ${coat.colors?.[0]?.name ?? 'Rust'} — ${fmt(coat.price)}`, href: editorialProductHref(routes, coat.slug) }}
+  />
+
+  <div class="forma-wrap section-space">
+    <ShopCollectionMosaic eyebrow={`${store.categories.length} categories`} title="Shop by *intention*" items={mosaic} />
+  </div>
+
+  <div class="forma-wrap section-space home-tight">
+    <ShopProductRail
+      eyebrow="Just in"
+      title="New this *week*"
+      products={pickEditorial(store, store.newIn)}
+      productBase={routes.product}
+      link={{ label: 'View all', href: routes.shop }}
+      id="new-in"
+      {...money}
+    />
+  </div>
+
+  <div class="forma-wrap section-space">
+    <ShopLookbook
+      eyebrow="Lookbook · N° 04"
+      title="A Sunday *uniform*"
+      text="Linen, canvas and stoneware: three pieces that make a slow morning feel deliberate."
+      media={{ icon: 'jacket', hue: 26 }}
+      spots={look}
+      {...money}
+    />
+  </div>
+
+  <ShopValuesMarquee values={store.values} />
+
+  <div class="forma-wrap section-space">
+    <ShopReviewsEditorial score={4.9} count={1284} reviews={store.reviews} />
+  </div>
+
+  <ShopNewsletterEditorial variant="accent" />
+</EditorialLayout>
+
+<style>
+  .home-tight { padding-top: 0; }
+</style>