astro-component-kit 0.3.1 → 0.4.1

package/src/components/lib/sections/TestimonialFeatured.astro

@@ -0,0 +1,122 @@
+---
+/**
+ * TestimonialFeatured — A single large customer quote paired with the company's
+ * headline results (case-study style), plus a link to the full story.
+ *
+ * @param {string} quote - The testimonial text.
+ * @param {string} name - Author name.
+ * @param {string} role - Author role and company.
+ * @param {string} company - Company wordmark text.
+ * @param {Array<{value: string, label: string}>} metrics - Outcome stats.
+ * @param {{label: string, href: string}} link - Case study link.
+ * @param {string} variant - Layout style (split|centered|card).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Props {
+  quote?: string;
+  name?: string;
+  role?: string;
+  company?: string;
+  metrics?: Array<{ value: string; label: string }>;
+  link?: { label: string; href: string };
+  variant?: 'split' | 'centered' | 'card';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  quote = 'We replaced three tools and a chart library with this kit. Our product pages load twice as fast and our conversion rate has never been higher.',
+  name = 'Elena Vasquez',
+  role = 'VP of Marketing, Orbitly',
+  company = 'Orbitly',
+  metrics = [
+    { value: '2.1×', label: 'faster page loads' },
+    { value: '+38%', label: 'trial conversion' },
+    { value: '−64%', label: 'front-end bundle size' },
+  ],
+  link = { label: 'Read the case study', href: '#' },
+  variant = 'split',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const initials = name.split(' ').map((p) => p[0]).slice(0, 2).join('');
+---
+
+<div class="cq-testimonial-featured-cq">
+<section class={`tf tf--${variant} tf--${size} ${className}`} aria-label={`Customer story: ${company}`}>
+  <div class="tf__inner">
+    <figure class="tf__figure">
+      <p class="tf__company" aria-hidden="true">
+        <svg width="22" height="22" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" /><circle cx="12" cy="12" r="4" fill="currentColor" /></svg>
+        {company}
+      </p>
+      <svg class="tf__mark" width="48" height="36" viewBox="0 0 48 36" aria-hidden="true"><path d="M0 36V22C0 9 7 2 20 0l2 5C14 7 11 12 11 18h9v18H0zm28 0V22C28 9 35 2 48 0l2 5c-8 2-11 7-11 13h9v18H28z" fill="currentColor" /></svg>
+      <blockquote class="tf__quote"><p>{quote}</p></blockquote>
+      <figcaption class="tf__author">
+        <span class="tf__avatar" aria-hidden="true">{initials}</span>
+        <span><strong>{name}</strong><span class="tf__role">{role}</span></span>
+      </figcaption>
+    </figure>
+
+    <div class="tf__side">
+      <dl class="tf__metrics">
+        {metrics.map((mt) => (
+          <div class="tf__metric">
+            <dt>{mt.label}</dt>
+            <dd>{mt.value}</dd>
+          </div>
+        ))}
+      </dl>
+      {link && (
+        <a class="tf__link" href={link.href}>
+          {link.label}
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
+        </a>
+      )}
+    </div>
+  </div>
+</section>
+</div>
+<style>
+  .cq-testimonial-featured-cq { container-type: inline-size; }
+  .tf {
+    --tf-py: 5.5rem;
+    padding: var(--tf-py) var(--sp-6, 1.5rem);
+    background: var(--c-bg, #050505);
+  }
+  .tf--sm { --tf-py: 3.5rem; }
+  .tf--lg { --tf-py: 7.5rem; }
+  .tf__inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
+  .tf--card .tf__inner {
+    padding: clamp(2rem, 5vw, 3.5rem);
+    border-radius: var(--r-xl, 28px);
+    background: radial-gradient(circle at 0% 0%, var(--c-primary-glow, color-mix(in srgb, var(--c-primary, #b8860b) 14%, transparent)), transparent 55%), rgb(var(--ink-rgb, 255 255 255) / 0.025);
+    border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.08));
+  }
+  .tf--centered .tf__inner { grid-template-columns: 1fr; text-align: center; max-width: 860px; }
+  .tf--centered .tf__author, .tf--centered .tf__company { justify-content: center; }
+  .tf--centered .tf__mark { margin-inline: auto; }
+  .tf__figure { margin: 0; }
+  .tf__company { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 2rem; font-size: 1.125rem; font-weight: 750; letter-spacing: -0.02em; color: var(--c-text-1, #fff); }
+  .tf__mark { display: block; color: var(--c-primary-light, #d4a017); opacity: 0.8; margin-bottom: 1.25rem; }
+  .tf__quote { margin: 0 0 2rem; }
+  .tf__quote p { margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.875rem); font-weight: 550; line-height: 1.4; letter-spacing: -0.015em; color: var(--c-text-1, #fff); text-wrap: pretty; }
+  .tf__author { display: flex; align-items: center; gap: 0.85rem; }
+  .tf__author strong { display: block; color: var(--c-text-1, #fff); }
+  .tf__role { display: block; font-size: 0.875rem; color: var(--c-text-2, #a3a3a3); }
+  .tf__avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--chart-7, #9085e9), var(--chart-1, #3987e5)); color: #fff; font-weight: 700; }
+  .tf__side { display: grid; gap: 1.5rem; }
+  .tf__metrics { margin: 0; display: grid; gap: 1px; border-radius: var(--r-lg, 20px); overflow: hidden; background: rgb(var(--ink-rgb, 255 255 255) / 0.07); }
+  .tf--centered .tf__metrics { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
+  .tf__metric { display: flex; flex-direction: column-reverse; gap: 0.25rem; padding: 1.25rem 1.5rem; background: var(--c-bg-1, #0a0a0a); }
+  .tf__metric dt { font-size: 0.875rem; color: var(--c-text-2, #a3a3a3); }
+  .tf__metric dd { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--c-text-1, #fff); font-variant-numeric: tabular-nums; }
+  .tf__link { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; font-weight: 650; color: var(--c-primary-light, #d4a017); text-decoration: none; }
+  .tf--centered .tf__link { justify-self: center; }
+  .tf__link svg { transition: transform 0.2s ease; }
+  .tf__link:hover svg { transform: translateX(3px); }
+  .tf__link:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; border-radius: 4px; }
+  @container (max-width: 820px) { .tf__inner { grid-template-columns: 1fr; } }
+</style>

package/src/components/lib/sections/TestimonialGridSection.astro

@@ -0,0 +1,188 @@
+---
+/**
+ * TestimonialGridSection — Bento grid showcase of verified customer reviews with dark glass styling and star ratings.
+ * 
+ * @param {string} eyebrow - Small uppercase category lead. Default is 'WALL OF LOVE'.
+ * @param {string} title - Section main headline. Default is 'Trusted by innovative engineering teams'.
+ * @param {string} subtitle - Subtitle description.
+ */
+interface Props {
+  eyebrow?: string;
+  title?: string;
+  subtitle?: string;
+}
+
+const {
+  eyebrow = 'WALL OF LOVE',
+  title = 'Trusted by thousands of Astro builders',
+  subtitle = 'Discover why developers, indie hackers, and creative agencies rely on Astro Components Kit for production websites.',
+} = Astro.props;
+
+const testimonials = [
+  {
+    name: 'Elena Rostova',
+    role: 'Principal Architect @ Veloce Labs',
+    avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&auto=format&fit=crop&q=80',
+    quote: 'The pure zero-JS philosophy with Astro 5 is game-changing. Our Core Web Vitals score hit 100 on every audited route without tweaking hydration.',
+    stars: 5,
+    highlight: true,
+  },
+  {
+    name: 'Marcus Vance',
+    role: 'Founder @ HyperSync',
+    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&auto=format&fit=crop&q=80',
+    quote: 'Copying and pasting self-contained Astro components directly shaved two full sprints off our SaaS launch timeline.',
+    stars: 5,
+  },
+  {
+    name: 'Sofia Chen',
+    role: 'Senior UI/UX Designer',
+    avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&auto=format&fit=crop&q=80',
+    quote: 'The glassmorphic dark palette with gold accents feels extraordinarily premium right out of the box. Highly recommended.',
+    stars: 5,
+  },
+];
+---
+
+<section class="testi-section">
+  <div class="testi-section__header">
+    <span class="testi-section__eyebrow">{eyebrow}</span>
+    <h2 class="testi-section__title">{title}</h2>
+    <p class="testi-section__subtitle">{subtitle}</p>
+  </div>
+
+  <div class="testi-section__grid">
+    {testimonials.map((t) => (
+      <article class:list={['testi-card', { 'testi-card--highlight': t.highlight }]}>
+        <div class="testi-card__stars" aria-label={`${t.stars} out of 5 stars`}>
+          {Array.from({ length: t.stars }).map(() => (
+            <span>★</span>
+          ))}
+        </div>
+        <blockquote class="testi-card__quote">
+          "{t.quote}"
+        </blockquote>
+        <div class="testi-card__author">
+          <img src={t.avatar} alt={t.name} class="testi-card__avatar" loading="lazy" />
+          <div class="testi-card__meta">
+            <h5 class="testi-card__name">{t.name}</h5>
+            <span class="testi-card__role">{t.role}</span>
+          </div>
+        </div>
+      </article>
+    ))}
+  </div>
+</section>
+
+<style>
+  .testi-section {
+    padding: var(--sp-12, 3rem) var(--sp-6, 1.5rem);
+    max-width: 1200px;
+    margin: 0 auto;
+    font-family: var(--font-sans, system-ui, sans-serif);
+  }
+
+  .testi-section__header {
+    text-align: center;
+    max-width: 640px;
+    margin: 0 auto 3rem auto;
+  }
+
+  .testi-section__eyebrow {
+    display: inline-block;
+    font-size: 0.75rem;
+    font-weight: 800;
+    letter-spacing: 0.12em;
+    color: var(--c-primary-light, #d4a017);
+    padding: 0.35rem 0.8rem;
+    border: 1px solid color-mix(in srgb, var(--c-primary, #b8860b) 30%, transparent);
+    border-radius: var(--r-sm, 8px);
+    margin-bottom: 1rem;
+    text-transform: uppercase;
+  }
+
+  .testi-section__title {
+    font-size: clamp(1.8rem, 4vw, 2.8rem);
+    font-weight: 900;
+    color: var(--c-text-1, #ffffff);
+    letter-spacing: -0.03em;
+    margin: 0 0 1rem 0;
+  }
+
+  .testi-section__subtitle {
+    font-size: 0.95rem;
+    color: var(--c-text-2, #a3a3a3);
+    line-height: 1.6;
+    margin: 0;
+  }
+
+  .testi-section__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 1.5rem;
+  }
+
+  .testi-card {
+    display: flex;
+    flex-direction: column;
+    padding: var(--sp-8, 2rem);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.02);
+    backdrop-filter: blur(16px);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
+    border-radius: var(--r-xl, 24px);
+    transition: transform 0.3s ease, border-color 0.3s ease;
+  }
+
+  .testi-card:hover {
+    transform: translateY(-4px);
+    border-color: color-mix(in srgb, var(--c-primary, #b8860b) 30%, transparent);
+  }
+
+  .testi-card--highlight {
+    background: radial-gradient(circle at top left, color-mix(in srgb, var(--c-primary, #b8860b) 10%, transparent), rgb(var(--ink-rgb, 255 255 255) / 0.02) 70%);
+    border-color: color-mix(in srgb, var(--c-primary, #b8860b) 40%, transparent);
+  }
+
+  .testi-card__stars {
+    color: #fbbf24;
+    font-size: 1rem;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+  }
+
+  .testi-card__quote {
+    font-size: 0.95rem;
+    color: var(--c-text-1, #ffffff);
+    line-height: 1.65;
+    margin: 0 0 1.5rem 0;
+    flex: 1;
+    font-style: italic;
+  }
+
+  .testi-card__author {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: auto;
+  }
+
+  .testi-card__avatar {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid color-mix(in srgb, var(--c-primary, #b8860b) 40%, transparent);
+  }
+
+  .testi-card__name {
+    font-size: 0.92rem;
+    font-weight: 700;
+    color: var(--c-text-1, #ffffff);
+    margin: 0 0 2px 0;
+  }
+
+  .testi-card__role {
+    font-size: 0.75rem;
+    color: var(--c-text-3, #737373);
+  }
+</style>

package/src/components/lib/sections/TestimonialWallGlass.astro

@@ -21,6 +21,7 @@ const {
 } = Astro.props;
 ---
 
+<div class="cq-testimonial-wall-glass-cq">
 <section class={`testimonials-section ${className}`} aria-labelledby="testimonials-title">
   <div class="testimonials-bg" aria-hidden="true">
     <div class="test-glow test-glow--1"></div>
@@ -151,8 +152,9 @@ const {
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-testimonial-wall-glass-cq { container-type: inline-size; }
   .testimonials-section {
     position: relative;
     padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
@@ -211,7 +213,7 @@ const {
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
-    background: rgba(184, 134, 11, 0.12);
+    background: color-mix(in srgb, var(--c-primary, #b8860b) 12%, transparent);
     color: #eab308;
     border: 1px solid rgba(234, 179, 8, 0.25);
     margin-bottom: var(--sp-4, 1rem);
@@ -241,7 +243,7 @@ const {
     gap: 2rem;
     padding: 1.25rem 2rem;
     background: rgba(15, 23, 42, 0.7);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: 16px;
     backdrop-filter: blur(12px);
     max-width: 750px;
@@ -284,7 +286,7 @@ const {
   .trust-sep {
     width: 1px;
     height: 40px;
-    background: rgba(255, 255, 255, 0.1);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.1);
   }
 
   /* Wall Grid */
@@ -299,7 +301,7 @@ const {
     background: rgba(15, 23, 42, 0.55);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-xl, 18px);
     padding: 1.75rem;
     display: flex;
@@ -310,7 +312,7 @@ const {
 
   .test-card:hover {
     transform: translateY(-4px);
-    border-color: rgba(255, 255, 255, 0.2);
+    border-color: rgb(var(--ink-rgb, 255 255 255) / 0.2);
   }
 
   .test-card--featured {
@@ -352,7 +354,7 @@ const {
     align-items: center;
     gap: 0.85rem;
     padding-top: 1rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    border-top: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
   }
 
   .author-avatar {
@@ -364,7 +366,7 @@ const {
     font-weight: 800;
     font-size: 0.85rem;
     color: #fff;
-    border: 2px solid rgba(255, 255, 255, 0.15);
+    border: 2px solid rgb(var(--ink-rgb, 255 255 255) / 0.15);
   }
 
   .author-avatar--1 { background: linear-gradient(135deg, #6366f1, #a855f7); }
@@ -390,7 +392,7 @@ const {
     color: #64748b;
   }
 
-  @media (max-width: 960px) {
+  @container (max-width: 960px) {
     .trust-bar {
       flex-direction: column;
       gap: 1rem;

package/src/components/lib/sections/TypographyShowcase.astro

@@ -8,6 +8,7 @@ interface Props {
 const { title = "Typography", subtitle = "Headings and text patterns." } = Astro.props;
 ---
 
+<div class="cq-typography-showcase-cq">
 <section class="typography-showcase">
   <div class="container">
     <div class="showcase-header">
@@ -54,8 +55,9 @@ const { title = "Typography", subtitle = "Headings and text patterns." } = Astro
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-typography-showcase-cq { container-type: inline-size; }
   .typography-showcase {
     padding: var(--sp-16) 0;
     position: relative;
@@ -72,8 +74,8 @@ const { title = "Typography", subtitle = "Headings and text patterns." } = Astro
     text-transform: uppercase;
     letter-spacing: 0.1em;
     color: var(--c-primary-light);
-    background: rgba(184,134,11,0.1);
-    border: 1px solid rgba(184,134,11,0.25);
+    background: color-mix(in srgb, var(--c-primary, #b8860b) 10%, transparent);
+    border: 1px solid color-mix(in srgb, var(--c-primary, #b8860b) 25%, transparent);
     border-radius: var(--r-full);
     margin-bottom: var(--sp-4);
   }
@@ -95,7 +97,7 @@ const { title = "Typography", subtitle = "Headings and text patterns." } = Astro
     padding: var(--sp-12);
     background: rgba(10, 10, 10, 0.6);
     backdrop-filter: blur(20px);
-    border: 1px solid rgba(255,255,255,0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-xl);
     margin-bottom: var(--sp-6);
     box-shadow: 0 20px 60px rgba(0,0,0,0.4);
@@ -117,9 +119,9 @@ const { title = "Typography", subtitle = "Headings and text patterns." } = Astro
   /* Typography Mockups */
   .typo-mockup {
     padding: var(--sp-6);
-    background: rgba(255,255,255,0.02);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.02);
     border-radius: var(--r-md);
-    border: 1px solid rgba(255,255,255,0.05);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.05);
   }
 
   /* Gradient Heading */
@@ -221,7 +223,7 @@ const { title = "Typography", subtitle = "Headings and text patterns." } = Astro
   .usage-code {
     text-align: center;
     padding: var(--sp-4);
-    background: rgba(255,255,255,0.02);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.02);
     border-radius: var(--r-md);
   }
   .usage-code code {
@@ -230,7 +232,7 @@ const { title = "Typography", subtitle = "Headings and text patterns." } = Astro
     color: var(--c-primary-light);
   }
 
-  @media (max-width: 640px) {
+  @container (max-width: 640px) {
     .typo-stack { gap: var(--sp-5); }
     .typo-mockup { padding: var(--sp-4); }
     .preview-stage { padding: var(--sp-8) var(--sp-4); }

package/src/components/lib/sections/index.ts

@@ -26,3 +26,42 @@ export { default as FaqAccordionSection } from './FaqAccordionSection.astro';
 export { default as StatsMetricShowcase } from './StatsMetricShowcase.astro';
 export { default as TeamGridSection } from './TeamGridSection.astro';
 export { default as ContactGlassForm } from './ContactGlassForm.astro';
+export { default as TestimonialGridSection } from './TestimonialGridSection.astro';
+export { default as LogoCloudSection } from './LogoCloudSection.astro';
+export { default as HeroShowcaseSplit } from './HeroShowcaseSplit.astro';
+
+// Additional sections (v0.4)
+export { default as HeroMinimalCentered } from './HeroMinimalCentered.astro';
+export { default as HeroTerminal } from './HeroTerminal.astro';
+export { default as HeroWaitlist } from './HeroWaitlist.astro';
+export { default as HeroDashboardPreview } from './HeroDashboardPreview.astro';
+export { default as FeatureIconGrid } from './FeatureIconGrid.astro';
+export { default as FeatureAlternatingRows } from './FeatureAlternatingRows.astro';
+export { default as FeatureTabsShowcase } from './FeatureTabsShowcase.astro';
+export { default as HowItWorksSteps } from './HowItWorksSteps.astro';
+export { default as IntegrationsGrid } from './IntegrationsGrid.astro';
+export { default as PricingToggleCards } from './PricingToggleCards.astro';
+export { default as PricingSinglePlan } from './PricingSinglePlan.astro';
+export { default as TestimonialCarousel } from './TestimonialCarousel.astro';
+export { default as TestimonialFeatured } from './TestimonialFeatured.astro';
+export { default as CtaNewsletterSection } from './CtaNewsletterSection.astro';
+export { default as CtaSplitImage } from './CtaSplitImage.astro';
+export { default as StatsCounterBand } from './StatsCounterBand.astro';
+export { default as StatsDashboardSection } from './StatsDashboardSection.astro';
+export { default as CareersOpenings } from './CareersOpenings.astro';
+export { default as FaqTwoColumn } from './FaqTwoColumn.astro';
+export { default as ContactSplitMap } from './ContactSplitMap.astro';
+export { default as LogoWallGrid } from './LogoWallGrid.astro';
+export { default as BlogGridSection } from './BlogGridSection.astro';
+export { default as ChangelogSection } from './ChangelogSection.astro';
+export { default as FooterMegaSection } from './FooterMegaSection.astro';
+export { default as ShopHeaderEditorial } from './ShopHeaderEditorial.astro';
+export { default as ShopHeroEditorial } from './ShopHeroEditorial.astro';
+export { default as ShopCollectionMosaic } from './ShopCollectionMosaic.astro';
+export { default as ShopProductRail } from './ShopProductRail.astro';
+export { default as ShopLookbook } from './ShopLookbook.astro';
+export { default as ShopValuesMarquee } from './ShopValuesMarquee.astro';
+export { default as ShopReviewsEditorial } from './ShopReviewsEditorial.astro';
+export { default as ShopNewsletterEditorial } from './ShopNewsletterEditorial.astro';
+export { default as ShopFooterWordmark } from './ShopFooterWordmark.astro';
+export { default as ShopCategoryHero } from './ShopCategoryHero.astro';

package/src/components/lib/templates/ecommerce/StoreCategoryPage.astro

@@ -0,0 +1,160 @@
+---
+/**
+ * StoreCategoryPage — E-commerce template catalogue: breadcrumb, category chips, toolbar
+ * with live count + sort, FilterSidebar and ProductGrid (instant client-side filtering).
+ *
+ * Usage (src/pages/shop.astro):
+ *   import { StoreCategoryPage } from 'astro-component-kit/templates/ecommerce';
+ *   <StoreCategoryPage />
+ * Category links use `?category=<id>`; pass `category` to build one static page per category.
+ *
+ * @param {StoreConfig} store - Catalogue and settings. Default: demo store.
+ * @param {StoreRoutes} routes - Page URLs.
+ * @param {string} category - Pre-selected category id (optional).
+ * @param {boolean} seedCart - Pre-fill the cart with demo items. Default false.
+ * @param {string} theme - Initial theme (dark|light|auto). Default 'dark'.
+ * @param {boolean} noindex - Add robots noindex. Default false.
+ */
+import StoreLayout from './StoreLayout.astro';
+import ProductToolbar from '../../ecommerce/ProductToolbar.astro';
+import FilterSidebar from '../../ecommerce/FilterSidebar.astro';
+import ProductGrid from '../../ecommerce/ProductGrid.astro';
+import TrustBadges from '../../ecommerce/TrustBadges.astro';
+import { demoStore, defaultRoutes, categoryHref, categoryNames, type StoreConfig, type StoreRoutes } from './data';
+
+interface Props {
+  store?: StoreConfig;
+  routes?: StoreRoutes;
+  category?: string;
+  seedCart?: boolean;
+  noindex?: boolean;
+  theme?: 'dark' | 'light' | 'auto';
+}
+
+const { store = demoStore, routes = defaultRoutes, category, seedCart = false, noindex = false, theme = 'dark' } = Astro.props;
+
+const active = store.categories.find((c) => c.id === category);
+const names = categoryNames(store);
+const maxPrice = Math.ceil(Math.max(...store.products.map((p) => p.price)) / 50) * 50;
+const colors = Array.from(new Map(store.products.flatMap((p) => p.colors ?? []).map((c) => [c.name, c])).values());
+const filterCats = store.categories.map((c) => ({ id: c.id, name: c.name, count: store.products.filter((p) => p.category === c.id).length }));
+const title = active ? active.name : 'All products';
+const description = active?.description ?? 'Everything we make, in one place. Filter by category, price, colour and rating.';
+---
+
+<StoreLayout theme={theme} title={title} description={description} store={store} routes={routes} currentHref={routes.shop} seedCart={seedCart} noindex={noindex}>
+  <div class="store-container shop">
+    <nav class="crumbs" aria-label="Breadcrumb">
+      <ol>
+        <li><a href={routes.home}>Home</a></li>
+        <li><a href={routes.shop} aria-current={active ? undefined : 'page'}>Shop</a></li>
+        {active && <li><span aria-current="page">{active.name}</span></li>}
+      </ol>
+    </nav>
+
+    <ProductToolbar title={title} description={description} total={store.products.length} target="shop-grid" filtersId="shop-filters" />
+
+    <ul class="chips" aria-label="Categories">
+      <li><a class="chip" href={routes.shop} aria-current={!active ? 'page' : undefined}>All</a></li>
+      {store.categories.map((c) => (
+        <li><a class="chip" href={categoryHref(routes, c.id)} aria-current={active?.id === c.id ? 'page' : undefined} data-chip={c.id}>{c.name}</a></li>
+      ))}
+    </ul>
+
+    <div class="shop__layout">
+      <div class="shop__filters">
+        <FilterSidebar
+          target="shop-grid"
+          id="shop-filters"
+          categories={filterCats}
+          selected={active ? [active.id] : []}
+          maxPrice={maxPrice}
+          colors={colors}
+          currency={store.currency}
+          locale={store.locale}
+        />
+      </div>
+      <ProductGrid
+        id="shop-grid"
+        products={store.products}
+        productBase={routes.product}
+        categoryNames={names}
+        columns={3}
+        currency={store.currency}
+        locale={store.locale}
+        cartKey={store.cartKey}
+        openCart={false}
+      />
+    </div>
+
+    <div class="shop__trust">
+      <TrustBadges variant="divided" size="sm" />
+    </div>
+  </div>
+</StoreLayout>
+
+<script>
+  // Category chips filter in place (no reload) and keep FilterSidebar in sync.
+  document.querySelectorAll<HTMLAnchorElement>('.chips a').forEach((chip) => {
+    chip.addEventListener('click', (e) => {
+      const form = document.getElementById('shop-filters') as HTMLFormElement | null;
+      if (!form) return;
+      e.preventDefault();
+      const id = chip.dataset.chip;
+      form.querySelectorAll<HTMLInputElement>('input[name="category"]').forEach((i) => { i.checked = id ? i.value === id : false; });
+      form.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+  });
+  const syncChips = () => {
+    const form = document.getElementById('shop-filters') as HTMLFormElement | null;
+    if (!form) return;
+    const checked = Array.from(form.querySelectorAll<HTMLInputElement>('input[name="category"]:checked')).map((i) => i.value);
+    document.querySelectorAll<HTMLAnchorElement>('.chips a').forEach((chip) => {
+      const id = chip.dataset.chip;
+      const on = id ? checked.length === 1 && checked[0] === id : checked.length === 0;
+      if (on) chip.setAttribute('aria-current', 'page');
+      else chip.removeAttribute('aria-current');
+    });
+  };
+  document.getElementById('shop-filters')?.addEventListener('change', syncChips);
+  document.getElementById('shop-filters')?.addEventListener('reset', () => window.setTimeout(syncChips, 0));
+  syncChips();
+</script>
+
+<style>
+  .shop { padding-block: var(--sp-6) clamp(3rem, 7vw, 5rem); }
+
+  .crumbs ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-6); padding: 0; list-style: none; font-size: 0.85rem; }
+  .crumbs li { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-text-2); }
+  .crumbs li + li::before { content: '/'; opacity: 0.5; }
+  .crumbs a { color: var(--c-text-2); }
+  .crumbs a:hover { color: var(--c-text-1); }
+  .crumbs [aria-current='page'] { color: var(--c-text-1); font-weight: 600; }
+
+  .chips { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-6); padding: 0 0 4px; list-style: none; overflow-x: auto; scrollbar-width: none; }
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    min-height: 40px;
+    padding: 0 var(--sp-4);
+    border-radius: var(--r-full);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
+    color: var(--c-text-2);
+    font-size: 0.88rem;
+    font-weight: 600;
+    white-space: nowrap;
+    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+  }
+  .chip:hover { color: var(--c-text-1); border-color: rgb(var(--ink-rgb, 255 255 255) / 0.25); }
+  .chip[aria-current='page'] { background: var(--c-text-1); color: var(--c-bg); border-color: var(--c-text-1); }
+  .chip:focus-visible { outline: 2px solid var(--c-primary-light); outline-offset: 2px; }
+
+  .shop__layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
+  .shop__filters { position: sticky; top: 88px; }
+  .shop__trust { margin-top: clamp(3rem, 6vw, 4.5rem); }
+
+  @media (max-width: 900px) {
+    .shop__layout { grid-template-columns: 1fr; gap: var(--sp-4); }
+    .shop__filters { position: static; }
+  }
+</style>