@thorprovider/create-storefront 0.1.1

package/skills/storefront-best-practices/reference/mobile-responsiveness.md

@@ -0,0 +1,183 @@
+# Mobile Responsiveness for Ecommerce Storefronts
+
+## Contents
+
+- [Overview](#overview)
+- [Mobile Ecommerce Patterns](#mobile-ecommerce-patterns)
+- [Touch-Friendly Interactions](#touch-friendly-interactions)
+- [Mobile Performance](#mobile-performance)
+- [Safe Area Insets (iOS)](#safe-area-insets-ios)
+- [Common Mobile Mistakes](#common-mobile-mistakes)
+
+## Overview
+
+Over 60% of ecommerce traffic is mobile. Mobile-first design is essential for conversion.
+
+### Key Requirements
+
+- Mobile-first CSS (min-width media queries)
+- 44x44px minimum touch targets
+- Sticky header with cart access
+- Large form inputs (48px height minimum)
+- Optimized images for mobile
+- Fast loading (LCP < 2.5s)
+
+**Assumed knowledge**: AI agents already know mobile-first design principles, breakpoints, and responsive CSS. This guide focuses on ecommerce-specific mobile patterns.
+
+## Mobile Ecommerce Patterns
+
+### Sticky Elements (Critical for Conversion)
+
+**Cart access always visible:**
+- Sticky header with cart icon (top-right)
+- Or: Sticky bottom navigation with cart
+- Never hide cart in hamburger drawer
+- Shows count badge, updates in real-time
+
+**Sticky "Add to Cart" bar (product pages):**
+- Fixed at bottom of screen
+- Shows: Price + "Add to Cart" button
+- Appears after scrolling past fold
+- Always accessible without scrolling
+- **CRITICAL: Must use `env(safe-area-inset-bottom)` for iOS devices** (see Safe Area Insets section)
+- Significantly higher conversion rates
+
+### Mobile Navigation Patterns
+
+**Bottom navigation (optional pattern):**
+- Consider for mobile-heavy stores (>70% mobile traffic)
+- 4-5 primary actions: Home, Categories, Cart, Account, Search
+- Fixed at bottom (easier thumb access)
+- Icons + labels for clarity
+
+**When to use:**
+- Mobile-first brands (fashion, beauty)
+- Younger demographic (18-34)
+- App-like experience desired
+
+**When NOT to use:**
+- Desktop-heavy traffic
+- Complex navigation needs (>5 items)
+- B2B stores (desktop-focused)
+
+### Mobile Product Browsing
+
+**Image galleries:**
+- Full-width swipeable carousel
+- Pinch to zoom
+- Tap to open full-screen view
+- Dot indicators (1/5, 2/5)
+
+**Filter drawer:**
+- "Filters" button with badge count (e.g., "Filters (3)")
+- Slide-out drawer (full-screen or 80% width)
+- Accordion sections for filter categories
+- "Apply" button at bottom (batch filtering)
+- "Clear All" option at top
+
+**Why batch filtering on mobile:**
+- Prevents multiple re-renders on slow connections
+- User adjusts multiple filters before applying
+- Less disruptive mobile UX
+
+### Mobile Checkout Optimization
+
+**Digital wallets priority (CRITICAL for mobile conversion):**
+- Apple Pay / Google Pay buttons prominent at top (if supported in ecommerce backend)
+- Can improve mobile checkout conversion by 20-40%
+- One-click payment with pre-filled shipping addresses (if supported in ecommerce backend)
+- Consider making digital wallet the default on mobile
+
+**Decision: Order summary placement**
+- Collapsible at top (recommended): Saves screen space for form, expandable for review
+- Fixed at bottom: Always visible but takes space from form
+- Use collapsible on mobile to prioritize form completion
+
+**Form optimizations:**
+- Single-column layout (never multi-column on mobile)
+- 44-48px input height minimum
+- Proper keyboard types (`inputMode="email"`, `"numeric"`, `"tel"`)
+- Autocomplete attributes for autofill (`autocomplete="email"`, `"name"`, `"address-line1"`)
+- Consider single-page layout over multi-step (less friction on mobile)
+
+## Touch-Friendly Interactions
+
+**Standard touch targets:** 44x44px minimum for all interactive elements. Pay special attention to:
+- Filter checkboxes on product listings
+- Quantity +/- buttons on product pages
+- Small action buttons on product cards
+- Modal close buttons
+
+**Swipe gestures for ecommerce:**
+- Product image galleries (critical - users expect swipeable images)
+- Related product sliders
+- Category carousels
+
+**Mobile input optimization:**
+- 16px minimum font size for inputs (prevents iOS auto-zoom)
+- Proper `inputMode` attributes: `"email"`, `"numeric"`, `"tel"`
+- Autocomplete attributes: `autocomplete="email"`, `"name"`, `"address-line1"`
+
+## Mobile Performance
+
+**Ecommerce performance priorities:**
+
+1. **Product images** (highest impact): Optimize for mobile (<500KB), lazy load below-fold, responsive images with appropriate sizes
+2. **Optimistic UI**: Cart count updates immediately, instant feedback on add to cart
+3. **Skeleton screens**: Show loading placeholders for product grids, not blank pages
+
+**Critical mobile performance issues:**
+- Unoptimized product images (>1MB) - most common issue
+- Loading entire product catalog at once - use pagination or infinite scroll
+- Heavy analytics scripts on checkout - defer to post-purchase
+
+**Target**: LCP < 2.5s, mobile-optimized images, server-side rendering for product pages
+
+## Safe Area Insets (iOS)
+
+Use `env(safe-area-inset-*)` to handle iOS notches and rounded corners on:
+- Sticky headers (top inset)
+- Sticky bottom navigation or add-to-cart bars (bottom inset)
+- Full-screen modals
+
+**Critical for ecommerce**: Bottom "Add to Cart" bars will be cut off by iOS home indicator without bottom inset (~34px). Test on real iOS devices with notches.
+
+## Common Mobile Mistakes
+
+**Ecommerce-specific mobile issues:**
+
+1. **Hiding cart in drawer** - Cart icon hidden in hamburger menu. Keep cart always visible in header (top-right).
+
+2. **No sticky cart access** - Cart scrolls off screen on product pages. Use sticky header or sticky bottom "Add to Cart" bar.
+
+3. **Desktop-sized images** - Serving 2MB+ product images to mobile. Use responsive images optimized for mobile (<500KB).
+
+4. **Poor form experience** - Small inputs, wrong keyboards, no autocomplete. Use 48px inputs, proper `inputMode`, autocomplete attributes.
+
+5. **Hover-only interactions** - Quick view, wishlist only work on hover. Add tap handlers, show on tap instead.
+
+6. **Ignoring safe area insets** - Bottom "Add to Cart" bars cut off by iOS home indicator. Use `env(safe-area-inset-bottom)` for sticky bottom elements.
+
+7. **No digital wallet options** - Missing Apple Pay/Google Pay on mobile checkout. Mobile users expect one-tap checkout options.
+
+## Mobile Checklist
+
+**Essential mobile optimizations:**
+
+- [ ] Mobile-first CSS (min-width media queries)
+- [ ] 44x44px minimum touch targets throughout
+- [ ] Adequate spacing between interactive elements (8-16px)
+- [ ] Sticky header with cart icon (always visible)
+- [ ] Or: Sticky bottom "Add to Cart" bar on product pages
+- [ ] Large form inputs (48px height minimum)
+- [ ] Appropriate input types (`inputMode="email"`, `"numeric"`, `"tel"`)
+- [ ] Swipeable image galleries on product pages
+- [ ] Filter drawer with batch apply on product listings
+- [ ] Digital wallets prominent in checkout (Apple Pay, Google Pay)
+- [ ] Collapsible order summary in checkout
+- [ ] Optimized images for mobile (<500KB)
+- [ ] Lazy loading for below-fold content
+- [ ] Safe area insets for iOS notches (sticky elements)
+- [ ] 16px minimum font size (prevents iOS auto-zoom)
+- [ ] Test on real mobile devices (not just Chrome DevTools)
+- [ ] Core Web Vitals within targets (LCP < 2.5s, CLS < 0.1, INP < 200ms)

package/skills/storefront-best-practices/reference/seo.md

@@ -0,0 +1,195 @@
+# SEO Optimization for Ecommerce Storefronts
+
+## Contents
+
+- [Overview](#overview)
+- [Meta Tags Requirements](#meta-tags-requirements)
+- [Structured Data (Critical for Ecommerce)](#structured-data-critical-for-ecommerce)
+- [Ecommerce URL Patterns](#ecommerce-url-patterns)
+- [Product Page SEO](#product-page-seo)
+- [Duplicate Content Issues](#duplicate-content-issues)
+- [Dynamic Sitemaps](#dynamic-sitemaps)
+- [Common SEO Mistakes](#common-seo-mistakes)
+
+## Overview
+
+SEO is critical for ecommerce - organic search drives high-intent traffic. Proper implementation helps search engines understand products and enables rich results (star ratings, price, availability in search).
+
+**Assumed knowledge**: AI agents know basic SEO (meta tags, Open Graph, Core Web Vitals). This guide focuses on ecommerce-specific patterns.
+
+### Every Product Page Needs
+
+- Unique title and description (product name + features)
+- Product schema with price, availability, rating
+- Breadcrumb schema (category hierarchy)
+- Canonical URL (prevents duplicate content)
+- Descriptive image alt text
+- Fast load time (LCP < 2.5s)
+
+## Meta Tags Requirements
+
+Generate unique meta tags for every product page dynamically from product data:
+
+- **Title**: "Product Name - Key Feature | Store Name" (50-60 characters)
+- **Description**: Key features + USP (150-160 characters)
+- **Open Graph** tags for social sharing (image 1200x630px)
+- **Canonical URL** for variants and category paths
+
+**Common mistake**: Same title/description across all products. Generate dynamically from product data.
+
+## Structured Data (Critical for Ecommerce)
+
+Enables rich results in search (star ratings, price, availability shown directly in search results).
+
+### Product Schema (Required on All Product Pages)
+
+Implement schema.org Product structured data with these critical fields:
+
+**Essential fields:**
+- `name`, `description`, `image`, `sku`, `brand`
+- `offers` object with:
+  - `price`: Current price (Medusa: use as-is; other backends: check format)
+  - `priceCurrency`: ISO 4217 code (USD, EUR, GBP)
+  - `availability`: Must accurately reflect real stock status (InStock, OutOfStock, PreOrder)
+  - `priceValidUntil`: Required for Google Shopping (set 30+ days in future)
+
+**Critical**: `availability` must be dynamic and accurate. Marking out-of-stock items as InStock violates Google's guidelines.
+
+### AggregateRating Schema (When Reviews Exist)
+
+Add `aggregateRating` object to Product schema when real reviews exist:
+- `ratingValue`: Average rating (e.g., "4.5")
+- `reviewCount`: Total number of reviews
+- `bestRating`: "5", `worstRating`: "1"
+
+Displays star ratings in search results - powerful for CTR. **Only use for real reviews** - fake reviews violate guidelines.
+
+### Breadcrumb Schema (Navigation Hierarchy)
+
+Implement schema.org BreadcrumbList showing category hierarchy:
+- Home → Category → Product
+- Each level has `position`, `name`, `item` URL
+- Helps search engines understand site structure
+
+### Organization Schema (Homepage Only)
+
+Add on homepage only: Organization name, URL, logo, contact information. Helps establish brand identity in search.
+
+## Ecommerce URL Patterns
+
+**Product URLs**: Use readable slugs with hyphens (`/products/wireless-headphones-pro`). Include keywords naturally, keep short (<75 characters), never change URLs.
+
+**Category URLs**: Choose consistent structure:
+- Hierarchical (`/categories/electronics/laptops`) for deep catalogs
+- Flat (`/categories/laptops`) for simpler management
+- Don't mix both approaches
+
+**Pagination URLs**: Use query parameters (`/products?page=2`). Implement `rel="prev"` and `rel="next"` tags. Each page is canonical to itself (NOT to page 1) so all pages can be indexed.
+
+**Filter URLs**: Use query parameters (`/products?color=blue&size=large`).
+
+**Canonical decision for filters:**
+- Few filters (2-3): Index filtered pages (primary navigation)
+- Many filters (5+): Canonical to unfiltered (prevents duplicate content)
+- Popular combinations: Consider indexing separately
+
+## Product Page SEO
+
+**Title tags**: Pattern "Product Name - Key Feature | Store Name" (50-60 characters). Avoid generic titles or keyword stuffing.
+
+**Meta descriptions**: Include 2-3 key features + USP (free shipping, returns, warranty) in 150-160 characters. Make it compelling.
+
+**Image alt text**: Descriptive and specific. Describe what's visible, include product name and key visual attributes. Don't keyword stuff. Keep under 125 characters.
+
+## Duplicate Content Issues
+
+### Ecommerce Duplicate Content Challenges
+
+**Common scenarios:**
+1. **Product variants**: Same product in multiple colors/sizes
+2. **Multiple categories**: Product listed in multiple categories
+3. **Filter combinations**: Filtered views create unique URLs
+4. **Sort parameters**: Sorted views create unique URLs
+
+### Solution: Canonical URLs
+
+**Variant handling:**
+- Choose one variant as canonical (usually default)
+- All other variants canonical to that one
+- Example: Blue, Red, Green shirts all canonical to Blue (default)
+
+**Multiple category paths:**
+- Choose one category as canonical (usually primary category)
+- Example: Product in both "Electronics" and "Laptops" → canonical to "Laptops"
+
+**Filtered/sorted views:**
+- Canonical to unfiltered, default-sorted page
+- Example: `/products?color=blue&sort=price` → canonical to `/products`
+
+**Implementation:**
+```html
+<!-- On variant page (Red shirt) -->
+<link rel="canonical" href="https://yourstore.com/products/cotton-tshirt" />
+
+<!-- On filtered page -->
+<link rel="canonical" href="https://yourstore.com/products" />
+```
+
+## Dynamic Sitemaps
+
+Generate sitemaps dynamically from database to help search engines discover all products and categories.
+
+**Requirements:**
+- Include all public product and category pages
+- Update `lastModified` when products change (fetch from database)
+- Exclude `noindex` pages and filtered/sorted URLs
+- Split into multiple sitemaps if >50,000 URLs
+- Priority: Homepage (1.0) > Products (0.8) > Categories (0.6)
+
+**Critical**: Regenerate sitemap when products are added/updated. Submit sitemap URL to Google Search Console.
+
+## Common SEO Mistakes
+
+**Ecommerce-specific SEO issues:**
+
+1. **Duplicate content** - Same product accessible via multiple URLs (variants, categories). Use canonical URLs to consolidate signals.
+
+2. **Missing Product schema** - No structured data on product pages. Implement Product schema for rich results (ratings, price in search).
+
+3. **Incorrect availability status** - Marking out-of-stock items as "InStock" in schema. Dynamically set based on real stock levels (violates Google guidelines).
+
+4. **Thin product content** - Only image and price, no description. Add detailed descriptions, specifications, reviews (200+ words).
+
+5. **Static sitemap** - Never updates when products change. Generate dynamically from database so search engines discover new products.
+
+6. **Poor image alt text** - Missing or generic "product image". Use descriptive alt text for image search traffic.
+
+## SEO Checklist
+
+### On Every Product Page
+
+- [ ] Unique, descriptive title tag (50-60 characters)
+- [ ] Unique, compelling meta description (150-160 characters)
+- [ ] Open Graph and Twitter Card tags
+- [ ] Product schema with price, availability, rating (if reviews exist)
+- [ ] Breadcrumb schema (category hierarchy)
+- [ ] Descriptive alt text on all images
+- [ ] Canonical URL (especially for variants)
+- [ ] Fast load time (LCP < 2.5s)
+- [ ] Mobile-responsive design
+- [ ] Internal links to related products/categories
+- [ ] Detailed product description (200+ words ideal)
+
+### Site-wide
+
+- [ ] Dynamic XML sitemap submitted to search engines
+- [ ] Robots.txt properly configured
+- [ ] SSL certificate (HTTPS)
+- [ ] Mobile-friendly design (44px touch targets)
+- [ ] Organization schema on homepage
+- [ ] Proper heading hierarchy (H1 for product title)
+- [ ] Pagination implemented with rel="prev/next"
+- [ ] Canonical URLs for filtered/sorted pages
+- [ ] 404 pages with helpful navigation
+- [ ] Image optimization (WebP, lazy loading)
+- [ ] Core Web Vitals within targets (LCP < 2.5s, CLS < 0.1, INP < 200ms)

package/templates/app/app/[[...slug]]/page.tsx

@@ -0,0 +1,17 @@
+// Generated by Thor Commerce sf-scaffold (template: templates/app/app/[[...slug]]/page.tsx)
+
+import { notFound } from 'next/navigation'
+import { __STOREFRONT_CAMEL__App } from '@/lib/__STOREFRONT__/runtime'
+import { StorefrontRenderer } from './renderer'
+
+export const { generateMetadata, generateStaticParams } = __STOREFRONT_CAMEL__App
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ slug?: string[] }>
+}) {
+  const data = await __STOREFRONT_CAMEL__App.getPageData({ params })
+  if (!data) return notFound()
+  return <StorefrontRenderer {...data} />
+}

package/templates/app/app/[[...slug]]/renderer.tsx

@@ -0,0 +1,10 @@
+'use client'
+
+// Generated by Thor Commerce sf-scaffold (template: templates/app/app/[[...slug]]/renderer.tsx)
+
+import { PageRenderer } from '@json-render/next'
+import type { PageData } from '@json-render/next'
+
+export function StorefrontRenderer(data: PageData) {
+  return <PageRenderer {...data} />
+}

package/templates/app/app/globals.css

@@ -0,0 +1,101 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "@thorprovider/blocks/styles.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --font-sans: var(--font-geist-sans);
+}
+
+:root {
+  --background: oklch(0.98 0.002 90);
+  --foreground: oklch(0.15 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.15 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.15 0 0);
+  --primary: oklch(0.15 0 0);
+  --primary-foreground: oklch(0.98 0.002 90);
+  --secondary: oklch(0.96 0.003 90);
+  --secondary-foreground: oklch(0.15 0 0);
+  --muted: oklch(0.94 0.003 90);
+  --muted-foreground: oklch(0.45 0 0);
+  --accent: oklch(0.58 0.16 25);
+  --accent-foreground: oklch(1 0 0);
+  --destructive: oklch(0.55 0.2 25);
+  --destructive-foreground: oklch(0.98 0.002 90);
+  --success: oklch(0.47 0.14 155);
+  --success-foreground: oklch(0.98 0.01 155);
+  --warning: oklch(0.55 0.18 75);
+  --warning-foreground: oklch(0.98 0.02 75);
+  --border: oklch(0.88 0.003 90);
+  --input: oklch(0.92 0.003 90);
+  --ring: oklch(0.15 0 0);
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+}
+
+.dark {
+  --background: oklch(0.15 0 0);
+  --foreground: oklch(0.98 0.002 90);
+  --card: oklch(0.2 0 0);
+  --card-foreground: oklch(0.98 0.002 90);
+  --popover: oklch(0.2 0 0);
+  --popover-foreground: oklch(0.98 0.002 90);
+  --primary: oklch(0.98 0.002 90);
+  --primary-foreground: oklch(0.15 0 0);
+  --secondary: oklch(0.25 0.003 90);
+  --secondary-foreground: oklch(0.98 0.002 90);
+  --muted: oklch(0.25 0.003 90);
+  --muted-foreground: oklch(0.65 0 0);
+  --accent: oklch(0.65 0.15 25);
+  --accent-foreground: oklch(0.15 0 0);
+  --destructive: oklch(0.65 0.2 25);
+  --destructive-foreground: oklch(0.15 0 0);
+  --success: oklch(0.6 0.13 155);
+  --success-foreground: oklch(0.1 0.02 155);
+  --warning: oklch(0.7 0.15 75);
+  --warning-foreground: oklch(0.1 0.02 75);
+  --border: oklch(0.3 0.003 90);
+  --input: oklch(0.3 0.003 90);
+  --ring: oklch(0.85 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/templates/app/app/layout.tsx

@@ -0,0 +1,35 @@
+// Generated by Thor Commerce sf-scaffold (template: templates/app/app/layout.tsx)
+
+import type { Metadata } from 'next'
+import { Geist } from 'next/font/google'
+import { StorefrontProvider } from '@thorprovider/storefronts/host-glue/providers'
+import { themeVarsToCss, themeTokensToVars } from '@thorprovider/storefronts/render-core/theme'
+import { DEFAULT_THEME_TOKENS } from '@thorprovider/storefronts/contracts'
+import { registry } from '@/lib/__STOREFRONT__/registry'
+import './globals.css'
+
+const geist = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+})
+
+const themeCss = themeVarsToCss(themeTokensToVars(DEFAULT_THEME_TOKENS))
+
+export const metadata: Metadata = {
+  title: '__SITE_NAME__',
+  description: 'Tienda online de __SITE_NAME__.',
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="es" className={geist.variable}>
+      <body className="font-sans antialiased">
+        <StorefrontProvider themeCss={themeCss} registry={registry}>
+          {children}
+        </StorefrontProvider>
+      </body>
+    </html>
+  )
+}

package/templates/app/lib/__STOREFRONT__/catalog.ts

@@ -0,0 +1,132 @@
+// Generated by Thor Commerce sf-scaffold (template: templates/app/lib/__STOREFRONT__/catalog.ts)
+// json-render catalog for the base storefront. Recipe-added views extend this file.
+// UI contracts come exclusively from @thorprovider/blocks.
+
+import { defineCatalog } from '@json-render/core'
+import { schema } from '@json-render/react/schema'
+import { z } from 'zod'
+import { cardProductSchema } from '@thorprovider/blocks'
+
+const ctaSchema = z.object({
+  label: z.string(),
+  href: z.string().optional(),
+})
+
+const navLinkSchema = z.object({
+  label: z.string(),
+  href: z.string().optional(),
+})
+
+const footerLinkSchema = z.object({
+  label: z.string(),
+  href: z.string().optional(),
+})
+
+const footerLinkColumnSchema = z.object({
+  title: z.string(),
+  links: z.array(footerLinkSchema),
+})
+
+const featuredProductSchema = z.object({
+  id: z.union([z.string(), z.number()]),
+  name: z.string(),
+  price: z.number(),
+  image: z.string(),
+  href: z.string().optional(),
+})
+
+const categoryCardSchema = z.object({
+  id: z.union([z.string(), z.number()]),
+  title: z.string(),
+  image: z.string(),
+  href: z.string().optional(),
+  count: z.number().optional(),
+})
+
+const featureItemSchema = z.object({
+  id: z.union([z.string(), z.number()]),
+  title: z.string(),
+  description: z.string(),
+  icon: z.string().optional(),
+})
+
+const productSchema = cardProductSchema
+
+export const catalog = defineCatalog(schema, {
+  components: {
+    Layout: {
+      props: z.object({}),
+      slots: ['default', 'header', 'footer'],
+      description: 'Shared store layout with header and footer regions',
+    },
+    Navbar: {
+      props: z.object({
+        navLinks: z.array(navLinkSchema),
+        logoText: z.string(),
+        logoHref: z.string().optional(),
+        currentPath: z.string().optional(),
+        signIn: ctaSchema.optional(),
+        cta: ctaSchema.optional(),
+        cartCount: z.number().optional(),
+      }),
+      description: 'Store navigation bar with links and auth CTA',
+    },
+    StorefrontHero: {
+      props: z.object({
+        title: z.string(),
+        description: z.string(),
+        products: z.array(featuredProductSchema),
+        titleAccent: z.string().optional(),
+        badge: z.string().optional(),
+        primaryCta: ctaSchema.optional(),
+        secondaryCta: ctaSchema.optional(),
+      }),
+      description: 'E-commerce storefront hero with featured products',
+    },
+    Feature: {
+      props: z.object({
+        items: z.array(featureItemSchema),
+        badge: z.string().optional(),
+        title: z.string().optional(),
+        description: z.string().optional(),
+        learnMoreLabel: z.string().optional(),
+        ctaLabel: z.string().optional(),
+      }),
+      description: 'Feature benefits grid',
+    },
+    CategoryCards: {
+      props: z.object({
+        title: z.string().optional(),
+        description: z.string().optional(),
+        categories: z.array(categoryCardSchema),
+        cta: ctaSchema.optional(),
+      }),
+      description: 'Category grid with image overlay',
+    },
+    ProductCard: {
+      props: z.object({
+        products: z.array(productSchema),
+        heading: z.string().optional(),
+        maxItems: z.number().optional(),
+      }),
+      description: 'Product grid',
+    },
+    Footer: {
+      props: z.object({
+        brandName: z.string(),
+        brandDescription: z.string().optional(),
+        linkColumns: z.array(footerLinkColumnSchema),
+        newsletter: z
+          .object({
+            placeholder: z.string().optional(),
+            buttonLabel: z.string(),
+          })
+          .optional(),
+      }),
+      description: 'Store footer with link columns and newsletter',
+    },
+  },
+  actions: {},
+})
+
+export type StorefrontCatalog = typeof catalog