astro-component-kit 0.4.0 → 0.5.0

package/src/components/lib/ecommerce/ProductCardMinimal.astro

@@ -0,0 +1,229 @@
+---
+/**
+ * ProductCardMinimal — Editorial product card: tall media that swaps to a second view on hover,
+ * quick-add size buttons, name, price and colour count. Square corners, typography-led.
+ *
+ * @param {Product} product - Product data. A demo product is used by default.
+ * @param {string} href - Product page URL. Default '#'.
+ * @param {number} index - Optional catalogue number shown as "N° 01".
+ * @param {string} currency - ISO currency. Default 'EUR'.
+ * @param {string} locale - Number format locale. Default 'en-GB'.
+ * @param {string} cartKey - Cart storage key. Default 'ack-cart'.
+ * @param {boolean} quickAdd - Show quick-add (sizes, or a single "Add" button). Default true.
+ * @param {string} ratio - Media aspect ratio. Default '3 / 4'.
+ * @param {string} variant - Style (plain|framed). Default 'plain'.
+ * @param {string} size - Type scale (sm|md|lg). Default 'md'.
+ * @param {string} headingLevel - Title element (h2|h3|h4). Default 'h3'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: the title is a stretched link; quick-add buttons sit above it with their own
+ * labels ("Add size M"), are reachable by keyboard and appear on focus as well as hover.
+ */
+import ProductMedia from './ProductMedia.astro';
+import { formatMoney } from './cart-store';
+import type { Product } from './types';
+
+interface Props {
+  product?: Product;
+  href?: string;
+  index?: number;
+  currency?: string;
+  locale?: string;
+  cartKey?: string;
+  quickAdd?: boolean;
+  ratio?: string;
+  variant?: 'plain' | 'framed';
+  size?: 'sm' | 'md' | 'lg';
+  headingLevel?: 'h2' | 'h3' | 'h4';
+  className?: string;
+}
+
+const {
+  product = {
+    slug: 'linen-overshirt',
+    name: 'Linen Overshirt',
+    price: 145,
+    category: 'clothing',
+    badge: 'New',
+    colors: [{ name: 'Oat', hex: '#d9cbb3' }, { name: 'Ink', hex: '#22252b' }, { name: 'Rust', hex: '#9c3d1c' }],
+    sizes: ['XS', 'S', 'M', 'L', 'XL'],
+    icon: 'shirt',
+    hue: 30,
+  },
+  href = '#',
+  index,
+  currency = 'EUR',
+  locale = 'en-GB',
+  cartKey = 'ack-cart',
+  quickAdd = true,
+  ratio = '3 / 4',
+  variant = 'plain',
+  size = 'md',
+  headingLevel = 'h3',
+  className = '',
+} = Astro.props;
+
+const Heading = headingLevel;
+const money = { currency, locale };
+const inStock = product.inStock !== false;
+const base = { id: product.slug, name: product.name, price: product.price, icon: product.icon, hue: product.hue, image: product.image };
+const color = product.colors?.[0]?.name;
+const titleId = `pcm-${product.slug}`;
+---
+
+<article
+  class:list={['pcm', `pcm--${variant}`, `pcm--${size}`, className]}
+  aria-labelledby={titleId}
+  data-product
+  data-name={product.name.toLowerCase()}
+  data-category={product.category}
+  data-price={product.price}
+  data-rating={product.rating ?? 0}
+  data-colors={(product.colors ?? []).map((c) => c.name.toLowerCase()).join(',')}
+  data-stock={inStock ? 'in' : 'out'}
+>
+  <div class="pcm__media">
+    <div class="pcm__view pcm__view--a">
+      <ProductMedia image={product.image} alt={product.name} icon={product.icon} hue={product.hue} ratio={ratio} variant="soft" size="lg" />
+    </div>
+    <div class="pcm__view pcm__view--b" aria-hidden="true">
+      <ProductMedia icon={product.icon} hue={(product.hue ?? 30) + 20} ratio={ratio} variant="glow" size="sm" />
+    </div>
+    {(product.badge || !inStock) && <span class="pcm__badge">{inStock ? product.badge : 'Sold out'}</span>}
+    {index !== undefined && <span class="pcm__index" aria-hidden="true">N° {String(index).padStart(2, '0')}</span>}
+
+    {quickAdd && inStock && (
+      <div class="pcm__quick" role="group" aria-label={`Quick add ${product.name}`}>
+        {product.sizes?.length ? (
+          <>
+            <span class="pcm__quick-label" aria-hidden="true">Quick add</span>
+            <div class="pcm__sizes">
+              {product.sizes.map((s) => (
+                <button
+                  type="button"
+                  class="pcm__size"
+                  data-add-to-cart={JSON.stringify({ ...base, variant: [color, s].filter(Boolean).join(' / ') })}
+                  data-cart-key={cartKey}
+                  data-open-cart="false"
+                  aria-label={`Add ${product.name}, size ${s}`}
+                ><span data-label>{s}</span></button>
+              ))}
+            </div>
+          </>
+        ) : (
+          <button
+            type="button"
+            class="pcm__size pcm__size--wide"
+            data-add-to-cart={JSON.stringify({ ...base, variant: color })}
+            data-cart-key={cartKey}
+            data-open-cart="false"
+            data-added-label="Added"
+            aria-label={`Add ${product.name} to bag`}
+          ><span data-label>Add to bag +</span></button>
+        )}
+      </div>
+    )}
+  </div>
+
+  <div class="pcm__info">
+    <Heading class="pcm__title" id={titleId}><a class="pcm__link" href={href}>{product.name}</a></Heading>
+    <p class="pcm__price">
+      <span>{formatMoney(product.price, money)}</span>
+      {product.compareAt && <s><span class="sr-only">Was </span>{formatMoney(product.compareAt, money)}</s>}
+    </p>
+    {product.colors && product.colors.length > 0 && (
+      <p class="pcm__colors">
+        <span class="pcm__dots" aria-hidden="true">{product.colors.slice(0, 4).map((c) => <i style={`--sw: ${c.hex}`}></i>)}</span>
+        {product.colors.length} {product.colors.length === 1 ? 'colour' : 'colours'}
+      </p>
+    )}
+  </div>
+</article>
+
+<script>
+  import { bindAddToCart } from './cart-store';
+  bindAddToCart(document);
+</script>
+
+<style>
+  .pcm { position: relative; display: flex; flex-direction: column; gap: var(--sp-3, 0.75rem); min-width: 0; }
+  .pcm--framed { padding: var(--sp-3, 0.75rem); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08)); }
+  .pcm__media { position: relative; overflow: hidden; border-radius: var(--r-sm, 2px); background: var(--c-bg-2, #111); }
+  .pcm__view { transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
+  .pcm__view--b { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); }
+  .pcm__view--b :global(.p-media__art) { transform: rotate(-12deg) scale(1.25); }
+  .pcm:hover .pcm__view--b, .pcm:focus-within .pcm__view--b { opacity: 1; transform: none; }
+  .pcm:hover .pcm__view--a { transform: scale(1.03); }
+
+  .pcm__badge, .pcm__index {
+    position: absolute;
+    top: var(--sp-3, 0.75rem);
+    z-index: 2;
+    font-size: 0.68rem;
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+  }
+  .pcm__badge { left: var(--sp-3, 0.75rem); padding: 0.3rem 0.55rem; background: var(--c-bg-1, #0a0a0a); color: var(--c-text-1, #fff); }
+  .pcm__index { right: var(--sp-3, 0.75rem); color: var(--c-text-2, #a3a3a3); font-variant-numeric: tabular-nums; }
+
+  .pcm__quick {
+    position: absolute;
+    left: var(--sp-2, 0.5rem);
+    right: var(--sp-2, 0.5rem);
+    bottom: var(--sp-2, 0.5rem);
+    z-index: 3;
+    display: grid;
+    gap: 6px;
+    padding: var(--sp-3, 0.75rem);
+    background: rgb(var(--paper-rgb, 5 5 5) / 0.92);
+    backdrop-filter: blur(10px);
+    transform: translateY(calc(100% + 12px));
+    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  .pcm:hover .pcm__quick, .pcm__quick:focus-within { transform: none; }
+  .pcm__quick-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-2, #a3a3a3); }
+  .pcm__sizes { display: flex; flex-wrap: wrap; gap: 4px; }
+  .pcm__size {
+    flex: 1 0 36px;
+    min-height: 36px;
+    padding: 0 6px;
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.18);
+    border-radius: var(--r-sm, 2px);
+    background: transparent;
+    color: var(--c-text-1, #fff);
+    font: inherit;
+    font-size: 0.78rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+  }
+  .pcm__size:hover { background: var(--c-text-1, #fff); color: var(--c-bg, #050505); border-color: var(--c-text-1, #fff); }
+  .pcm__size.is-added { background: var(--shop-accent, var(--c-primary-light, #d4a017)); border-color: transparent; color: var(--c-on-primary, #050505); }
+  .pcm__size--wide { flex: 1 1 100%; letter-spacing: 0.04em; }
+  .pcm__size:focus-visible { outline: 2px solid var(--shop-accent, var(--c-primary-light, #d4a017)); outline-offset: 2px; }
+
+  .pcm__info { display: grid; gap: 2px; }
+  .pcm__title { margin: 0; font-family: var(--font-display, Georgia, 'Times New Roman', serif); font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
+  .pcm--sm .pcm__title { font-size: 0.95rem; }
+  .pcm--lg .pcm__title { font-size: 1.3rem; }
+  .pcm__link { color: var(--c-text-1, #fff); text-decoration: none; }
+  .pcm__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
+  .pcm__link:focus-visible { outline: none; }
+  .pcm:focus-within:not(:has(.pcm__quick:focus-within)) { outline: 2px solid var(--shop-accent, var(--c-primary-light, #d4a017)); outline-offset: 4px; }
+  .pcm__price { display: flex; gap: var(--sp-2, 0.5rem); margin: 0; font-size: 0.9rem; color: var(--c-text-1, #fff); font-variant-numeric: tabular-nums; }
+  .pcm__price s { color: var(--c-text-2, #a3a3a3); }
+  .pcm__colors { display: flex; align-items: center; gap: var(--sp-2, 0.5rem); margin: 2px 0 0; font-size: 0.78rem; color: var(--c-text-2, #a3a3a3); }
+  .pcm__dots { display: inline-flex; }
+  .pcm__dots i { width: 10px; height: 10px; margin-right: -3px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1.5px var(--c-bg, #050505); }
+
+  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+  @media (hover: none) {
+    .pcm__quick { position: static; transform: none; padding: var(--sp-2, 0.5rem) 0 0; background: transparent; backdrop-filter: none; }
+    .pcm__quick-label { display: none; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pcm__view, .pcm__quick { transition: none; }
+  }
+</style>

package/src/components/lib/ecommerce/ProductGallery.astro

@@ -0,0 +1,145 @@
+---
+/**
+ * ProductGallery — Product image viewer with a large stage and thumbnail rail.
+ * Works with real photos (`images`) or generates several illustrated "angles".
+ *
+ * @param {string[]} images - Photo URLs. When empty, illustrated views are generated.
+ * @param {string} alt - Alt text base for photos. Default 'Product photo'.
+ * @param {string} icon - Illustration for generated views. Default 'headphones'.
+ * @param {number} hue - Backdrop hue for generated views. Default 38.
+ * @param {number} views - Number of generated views (2–5). Default 4.
+ * @param {string} layout - Thumbnail position (bottom|side). Default 'side'.
+ * @param {string} size - Stage ratio preset (sm|md|lg). Default 'md'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: thumbnails are buttons with aria-pressed and labels; arrow keys move
+ * between thumbnails; the stage announces the current view number.
+ */
+import ProductMedia from './ProductMedia.astro';
+
+interface Props {
+  images?: string[];
+  alt?: string;
+  icon?: string;
+  hue?: number;
+  views?: number;
+  layout?: 'bottom' | 'side';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  images = [],
+  alt = 'Product photo',
+  icon = 'headphones',
+  hue = 38,
+  views = 4,
+  layout = 'side',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const generated = Array.from({ length: Math.min(5, Math.max(2, views)) }, (_, i) => ({
+  hue: (hue + i * 18) % 360,
+  variant: (i % 2 === 0 ? 'glow' : 'soft') as 'glow' | 'soft',
+  turn: [0, -14, 12, -4, 20][i] ?? 0,
+  zoom: [1, 1.18, 0.92, 1.3, 1.05][i] ?? 1,
+}));
+const slides = images.length
+  ? images.map((src, i) => ({ src, label: `${alt} ${i + 1}` }))
+  : generated.map((g, i) => ({ ...g, label: `View ${i + 1}` }));
+const ratio = size === 'sm' ? '1 / 1' : size === 'lg' ? '4 / 5' : '5 / 5.4';
+---
+
+<div class="p-gallery-cq">
+<div class:list={['p-gallery', `p-gallery--${layout}`, `p-gallery--${size}`, className]} data-gallery>
+  <div class="p-gallery__stage" aria-live="polite">
+    {slides.map((s: any, i) => (
+      <div class:list={['p-gallery__slide', { 'is-active': i === 0 }]} data-slide hidden={i !== 0} style={s.turn !== undefined ? `--turn: ${s.turn}deg; --zoom: ${s.zoom}` : ''}>
+        {s.src
+          ? <ProductMedia image={s.src} alt={s.label} ratio={ratio} />
+          : <ProductMedia icon={icon} hue={s.hue} variant={s.variant} ratio={ratio} size="lg" />}
+        <span class="sr-only">{s.label} of {slides.length}</span>
+      </div>
+    ))}
+  </div>
+  <div class="p-gallery__thumbs" role="group" aria-label="Product views">
+    {slides.map((s: any, i) => (
+      <button class:list={['p-gallery__thumb']} type="button" aria-pressed={i === 0 ? 'true' : 'false'} aria-label={`Show ${s.label}`} data-thumb={i} style={s.turn !== undefined ? `--turn: ${s.turn}deg; --zoom: ${s.zoom}` : ''}>
+        {s.src
+          ? <ProductMedia image={s.src} alt="" ratio="1 / 1" />
+          : <ProductMedia icon={icon} hue={s.hue} variant={s.variant} ratio="1 / 1" size="sm" />}
+      </button>
+    ))}
+  </div>
+</div>
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-gallery]:not([data-bound])').forEach((g) => {
+    g.dataset.bound = '';
+    const slides = Array.from(g.querySelectorAll<HTMLElement>('[data-slide]'));
+    const thumbs = Array.from(g.querySelectorAll<HTMLButtonElement>('[data-thumb]'));
+    const show = (i: number, focus = false) => {
+      slides.forEach((s, n) => { s.hidden = n !== i; s.classList.toggle('is-active', n === i); });
+      thumbs.forEach((t, n) => t.setAttribute('aria-pressed', String(n === i)));
+      if (focus) thumbs[i]?.focus();
+    };
+    thumbs.forEach((t, i) => {
+      t.addEventListener('click', () => show(i));
+      t.addEventListener('keydown', (e) => {
+        const keys: Record<string, number> = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+        if (!(e.key in keys)) return;
+        e.preventDefault();
+        show((i + keys[e.key] + thumbs.length) % thumbs.length, true);
+      });
+    });
+  });
+</script>
+
+<style>
+  .p-gallery-cq { container-type: inline-size; }
+  .p-gallery { display: grid; gap: var(--sp-3, 0.75rem); }
+  .p-gallery--side { grid-template-columns: 84px minmax(0, 1fr); }
+  .p-gallery--side .p-gallery__stage { order: 2; }
+  .p-gallery--side .p-gallery__thumbs { order: 1; flex-direction: column; }
+
+  .p-gallery__stage {
+    position: relative;
+    border-radius: var(--r-xl, 28px);
+    border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05));
+    overflow: hidden;
+  }
+  .p-gallery__slide[hidden] { display: none; }
+  .p-gallery__slide.is-active { animation: pg-in 0.35s ease-out; }
+  .p-gallery__slide :global(.p-media__art),
+  .p-gallery__thumb :global(.p-media__art) { transform: rotate(var(--turn, 0deg)) scale(var(--zoom, 1)); }
+
+  .p-gallery__thumbs { display: flex; gap: var(--sp-2, 0.5rem); }
+  .p-gallery__thumb {
+    flex: 0 0 84px;
+    width: 84px;
+    padding: 0;
+    border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05));
+    border-radius: var(--r-md, 12px);
+    overflow: hidden;
+    background: none;
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.2s ease, border-color 0.2s ease;
+  }
+  .p-gallery__thumb:hover { opacity: 1; }
+  .p-gallery__thumb[aria-pressed='true'] { opacity: 1; border-color: var(--c-primary-light, #d4a017); }
+  .p-gallery__thumb:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; }
+
+  @keyframes pg-in { from { opacity: 0.4; transform: scale(0.985); } }
+  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+  @container (max-width: 700px) {
+    .p-gallery--side { grid-template-columns: 1fr; }
+    .p-gallery--side .p-gallery__stage { order: 1; }
+    .p-gallery--side .p-gallery__thumbs { order: 2; flex-direction: row; }
+    .p-gallery__thumb { flex-basis: 64px; width: 64px; }
+  }
+  @media (prefers-reduced-motion: reduce) { .p-gallery__slide.is-active { animation: none; } }
+</style>

package/src/components/lib/ecommerce/ProductGrid.astro

@@ -0,0 +1,118 @@
+---
+/**
+ * ProductGrid — Responsive grid of StoreProductCard tiles with an empty state.
+ * Works on its own or as the target of FilterSidebar / ProductToolbar (same `id`).
+ *
+ * @param {Product[]} products - Products to render.
+ * @param {string} id - Grid id; FilterSidebar and ProductToolbar point at it. Default 'product-grid'.
+ * @param {string} productBase - Product URL prefix; links become `${productBase}${slug}/`. Default '#'.
+ * @param {Record<string, string>} categoryNames - Category id → label for the card eyebrow.
+ * @param {number} columns - Desktop columns (2–5). Default 4.
+ * @param {string} cardVariant - StoreProductCard variant (glass|minimal|bordered). Default 'glass'.
+ * @param {string} cardSize - StoreProductCard size (sm|md|lg). Default 'md'.
+ * @param {string} currency - ISO currency. Default 'USD'.
+ * @param {string} locale - Number format locale. Default 'en-US'.
+ * @param {string} cartKey - Cart storage key. Default 'ack-cart'.
+ * @param {boolean} openCart - Open the drawer after adding (false = toast). Default true.
+ * @param {string} emptyTitle - Empty state heading. Default 'No products match'.
+ * @param {string} emptyText - Empty state copy.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: cards keep their own headings; the empty state is a polite status message.
+ */
+import StoreProductCard from './StoreProductCard.astro';
+import type { Product } from './types';
+
+interface Props {
+  products?: Product[];
+  id?: string;
+  productBase?: string;
+  categoryNames?: Record<string, string>;
+  columns?: number;
+  cardVariant?: 'glass' | 'minimal' | 'bordered';
+  cardSize?: 'sm' | 'md' | 'lg';
+  currency?: string;
+  locale?: string;
+  cartKey?: string;
+  openCart?: boolean;
+  emptyTitle?: string;
+  emptyText?: string;
+  className?: string;
+}
+
+const {
+  products = [
+    { slug: 'aurora-headphones', name: 'Aurora Wireless Headphones', price: 189, compareAt: 229, category: 'audio', rating: 4.8, reviews: 312, badge: '-18%', badgeVariant: 'warning', icon: 'headphones', hue: 38 },
+    { slug: 'orbit-watch', name: 'Orbit Smart Watch', price: 249, category: 'wearables', rating: 4.6, reviews: 198, badge: 'New', badgeVariant: 'info', icon: 'watch', hue: 205 },
+    { slug: 'trail-backpack', name: 'Trail 24L Backpack', price: 119, category: 'bags', rating: 4.7, reviews: 87, icon: 'backpack', hue: 150 },
+    { slug: 'halo-lamp', name: 'Halo Desk Lamp', price: 79, category: 'home', rating: 4.5, reviews: 54, icon: 'lamp', hue: 25 },
+  ],
+  id = 'product-grid',
+  productBase = '#',
+  categoryNames = { audio: 'Audio', wearables: 'Wearables', bags: 'Bags', home: 'Home' },
+  columns = 4,
+  cardVariant = 'glass',
+  cardSize = 'md',
+  currency = 'USD',
+  locale = 'en-US',
+  cartKey = 'ack-cart',
+  openCart = true,
+  emptyTitle = 'No products match',
+  emptyText = 'Try removing a filter or widening the price range.',
+  className = '',
+} = Astro.props;
+
+const cols = Math.min(5, Math.max(2, columns));
+const hrefFor = (slug: string) => (productBase === '#' ? '#' : `${productBase}${slug}/`);
+---
+
+<div class:list={['p-grid-wrap', className]}>
+  <div class="p-grid" id={id} style={`--pg-cols: ${cols}`} data-product-list>
+    {products.map((p, i) => (
+      <StoreProductCard
+        product={p}
+        href={hrefFor(p.slug)}
+        categoryLabel={categoryNames[p.category] ?? ''}
+        variant={cardVariant}
+        size={cardSize}
+        currency={currency}
+        locale={locale}
+        cartKey={cartKey}
+        openCart={openCart}
+      />
+    ))}
+  </div>
+  <div class="p-grid__empty" role="status" data-product-empty hidden>
+    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5M8 11h6"/></svg>
+    <p><strong>{emptyTitle}</strong></p>
+    <p>{emptyText}</p>
+  </div>
+</div>
+
+<style>
+  .p-grid-wrap { container-type: inline-size; }
+  .p-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--pg-cols), minmax(0, 1fr));
+    gap: var(--sp-5, 1.25rem);
+  }
+  .p-grid > :global([hidden]) { display: none; }
+  .p-grid__empty {
+    display: grid;
+    justify-items: center;
+    gap: var(--sp-2, 0.5rem);
+    padding: var(--sp-16, 4rem) var(--sp-6, 1.5rem);
+    border: 1px dashed rgb(var(--ink-rgb, 255 255 255) / 0.1);
+    border-radius: var(--r-lg, 20px);
+    text-align: center;
+    color: var(--c-text-2, #a3a3a3);
+  }
+  .p-grid__empty[hidden] { display: none; }
+  .p-grid__empty svg { color: var(--c-primary-light, #d4a017); }
+  .p-grid__empty p { margin: 0; }
+  .p-grid__empty strong { color: var(--c-text-1, #fff); font-size: 1.05rem; }
+
+  @container (max-width: 1100px) { .p-grid { grid-template-columns: repeat(min(var(--pg-cols), 3), minmax(0, 1fr)); } }
+  @container (max-width: 760px) { .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3, 0.75rem); } }
+  @container (max-width: 380px) { .p-grid { grid-template-columns: 1fr; } }
+</style>

package/src/components/lib/ecommerce/ProductMedia.astro

@@ -0,0 +1,113 @@
+---
+/**
+ * ProductMedia — Product visual: a real photo, or a generated backdrop with a
+ * line-art illustration so demo catalogs look finished without external images.
+ *
+ * @param {string} image - Product photo URL. When set, replaces the illustration.
+ * @param {string} alt - Alternative text. Required for photos; illustrations are decorative.
+ * @param {string} icon - Built-in illustration (headphones|watch|sneaker|backpack|camera|lamp|keyboard|sunglasses|bottle|speaker|jacket|mug|plant|shirt|bag|phone).
+ * @param {number} hue - 0–360 hue of the generated backdrop. Default 40 (gold).
+ * @param {string} ratio - CSS aspect-ratio. Default '1 / 1'.
+ * @param {string} size - Illustration scale (sm|md|lg). Default 'md'.
+ * @param {string} variant - Backdrop style (glow|soft|flat). Default 'glow'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: illustrations are aria-hidden; photos need `alt`.
+ */
+import { productIcon } from './product-icons';
+
+interface Props {
+  image?: string;
+  alt?: string;
+  icon?: string;
+  hue?: number;
+  ratio?: string;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'glow' | 'soft' | 'flat';
+  className?: string;
+}
+
+const {
+  image,
+  alt = '',
+  icon = 'bag',
+  hue = 40,
+  ratio = '1 / 1',
+  size = 'md',
+  variant = 'glow',
+  className = '',
+} = Astro.props;
+---
+
+<div
+  class:list={['p-media', `p-media--${size}`, `p-media--${variant}`, className]}
+  style={`--pm-hue: ${hue}; --pm-ratio: ${ratio};`}
+>
+  {image ? (
+    <img class="p-media__img" src={image} alt={alt} loading="lazy" decoding="async" />
+  ) : (
+    <svg class="p-media__art" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><Fragment set:html={productIcon(icon)} /></svg>
+  )}
+  <slot />
+</div>
+
+<style>
+  .p-media {
+    --pm-bg-1: hsl(var(--pm-hue) 70% 50% / 0.28);
+    --pm-bg-2: hsl(var(--pm-hue) 60% 30% / 0.14);
+    --pm-ink: hsl(var(--pm-hue) var(--pm-ink-s, 80%) var(--pm-ink-l, 80%));
+    position: relative;
+    display: grid;
+    place-items: center;
+    aspect-ratio: var(--pm-ratio);
+    width: 100%;
+    overflow: hidden;
+    border-radius: inherit;
+    background:
+      radial-gradient(circle at 50% 42%, var(--pm-bg-1), transparent 62%),
+      linear-gradient(160deg, var(--pm-bg-2), var(--c-bg-1, #0a0a0a) 75%);
+    isolation: isolate;
+  }
+  .p-media--soft {
+    background: linear-gradient(160deg, hsl(var(--pm-hue) var(--pm-soft-s, 40%) var(--pm-soft-l, 20%) / var(--pm-soft-a, 0.5)), var(--c-bg-1, #0a0a0a));
+  }
+  .p-media--flat { background: var(--c-bg-2, #111); }
+
+  .p-media::after {
+    content: '';
+    position: absolute;
+    inset: auto 22% 14% 22%;
+    height: 10%;
+    border-radius: 50%;
+    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), transparent 70%);
+    z-index: -1;
+  }
+  .p-media--flat::after { display: none; }
+
+  .p-media__art {
+    width: 46%;
+    height: auto;
+    color: var(--pm-ink);
+    filter: drop-shadow(0 6px 18px hsl(var(--pm-hue) 80% 50% / 0.35));
+    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  .p-media--sm .p-media__art { width: 58%; stroke-width: 2.4; }
+  .p-media--lg .p-media__art { width: 40%; stroke-width: 1.4; }
+
+  .p-media__img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  :global(.is-hoverable:hover) .p-media__art,
+  :global(.is-hoverable:focus-within) .p-media__art {
+    transform: translateY(-4%) rotate(-4deg) scale(1.04);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .p-media__art { transition: none; }
+  }
+</style>

package/src/components/lib/ecommerce/ProductRating.astro

@@ -0,0 +1,78 @@
+---
+/**
+ * ProductRating — Read-only star rating with value and review count.
+ *
+ * @param {number} value - Average rating, 0–5. Default 4.6.
+ * @param {number} count - Number of reviews (optional).
+ * @param {string} size - Visual size (sm|md|lg). Default 'sm'.
+ * @param {boolean} showValue - Print the numeric value. Default true.
+ * @param {string} label - Accessible label template; `{value}` and `{count}` are replaced.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: exposed as one `role="img"` with a full text label; stars are decorative.
+ */
+interface Props {
+  value?: number;
+  count?: number;
+  size?: 'sm' | 'md' | 'lg';
+  showValue?: boolean;
+  label?: string;
+  className?: string;
+}
+
+const {
+  value = 4.6,
+  count,
+  size = 'sm',
+  showValue = true,
+  label = 'Rated {value} out of 5{count}',
+  className = '',
+} = Astro.props;
+
+const clamped = Math.max(0, Math.min(5, value));
+const pct = `${(clamped / 5) * 100}%`;
+const aria = label
+  .replace('{value}', clamped.toFixed(1))
+  .replace('{count}', count !== undefined ? `, ${count} reviews` : '');
+const stars = '★★★★★';
+---
+
+<span class:list={['p-rating', `p-rating--${size}`, className]} role="img" aria-label={aria}>
+  <span class="p-rating__stars" aria-hidden="true" style={`--p-rating-fill: ${pct}`}>
+    <span class="p-rating__base">{stars}</span>
+    <span class="p-rating__fill">{stars}</span>
+  </span>
+  {showValue && <span class="p-rating__value" aria-hidden="true">{clamped.toFixed(1)}</span>}
+  {count !== undefined && <span class="p-rating__count" aria-hidden="true">({count})</span>}
+</span>
+
+<style>
+  .p-rating {
+    --p-rating-star: var(--c-primary-light, #d4a017);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35em;
+    font-size: 0.8rem;
+    line-height: 1;
+    color: var(--c-text-2, #a3a3a3);
+  }
+  .p-rating--md { font-size: 0.95rem; }
+  .p-rating--lg { font-size: 1.15rem; }
+
+  .p-rating__stars {
+    position: relative;
+    display: inline-block;
+    letter-spacing: 0.08em;
+  }
+  .p-rating__base { color: rgb(var(--ink-rgb, 255 255 255) / 0.14); }
+  .p-rating__fill {
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: var(--p-rating-fill);
+    overflow: hidden;
+    white-space: nowrap;
+    color: var(--p-rating-star);
+  }
+  .p-rating__value { font-weight: 700; color: var(--c-text-1, #fff); }
+  .p-rating__count { color: var(--c-text-3, #737373); }
+</style>