create-brainerce-store 1.62.0 → 1.63.0

package/templates/nextjs/designs/atelier/ui/product/variant-selector.tsx

@@ -1,206 +1,206 @@
-'use client';
-
-import { useMemo } from 'react';
-import type { Product, ProductVariant } from 'brainerce';
-import { getVariantOptions, getProductSwatches } from 'brainerce';
-import { cn } from '@/core/lib/utils';
-
-interface VariantSelectorProps {
-  product: Product;
-  selectedVariant: ProductVariant | null;
-  onVariantChange: (variant: ProductVariant) => void;
-  className?: string;
-}
-
-interface AttributeGroup {
-  name: string;
-  displayType: string;
-  values: Array<{
-    value: string;
-    swatchColor?: string | null;
-    swatchColor2?: string | null;
-    swatchImageUrl?: string | null;
-    variants: ProductVariant[];
-  }>;
-}
-
-/**
- * Variant selector on the product page: one group per attribute (Size,
- * Color, …) rendered as pill buttons; merchant swatch metadata
- * (`swatchColor`, `swatchColor2`, `swatchImageUrl`) renders as a color/image
- * dot inside the pill. Selection state + matching logic are the contract.
- */
-export function VariantSelector({
-  product,
-  selectedVariant,
-  onVariantChange,
-  className,
-}: VariantSelectorProps) {
-  const variants = useMemo(() => product.variants || [], [product.variants]);
-
-  // Get swatch metadata from product attribute options
-  const swatchData = useMemo(() => getProductSwatches(product), [product]);
-  const swatchMap = useMemo(() => {
-    const map = new Map<
-      string,
-      {
-        displayType: string;
-        options: Map<
-          string,
-          {
-            swatchColor?: string | null;
-            swatchColor2?: string | null;
-            swatchImageUrl?: string | null;
-          }
-        >;
-      }
-    >();
-    for (const attr of swatchData) {
-      const optMap = new Map<
-        string,
-        {
-          swatchColor?: string | null;
-          swatchColor2?: string | null;
-          swatchImageUrl?: string | null;
-        }
-      >();
-      for (const opt of attr.options) {
-        optMap.set(opt.name, {
-          swatchColor: opt.swatchColor,
-          swatchColor2: opt.swatchColor2,
-          swatchImageUrl: opt.swatchImageUrl,
-        });
-      }
-      map.set(attr.attributeName, { displayType: attr.displayType, options: optMap });
-    }
-    return map;
-  }, [swatchData]);
-
-  // Build attribute groups from variant data, enriched with swatch info
-  const attributeGroups = useMemo<AttributeGroup[]>(() => {
-    const groups = new Map<string, Map<string, ProductVariant[]>>();
-
-    for (const variant of variants) {
-      const options = getVariantOptions(variant);
-      for (const { name, value } of options) {
-        if (!groups.has(name)) {
-          groups.set(name, new Map());
-        }
-        const valuesMap = groups.get(name)!;
-        if (!valuesMap.has(value)) {
-          valuesMap.set(value, []);
-        }
-        valuesMap.get(value)!.push(variant);
-      }
-    }
-
-    return Array.from(groups.entries()).map(([name, valuesMap]) => {
-      const attrSwatch = swatchMap.get(name);
-      return {
-        name,
-        displayType: attrSwatch?.displayType || 'DROPDOWN',
-        values: Array.from(valuesMap.entries()).map(([value, variantList]) => {
-          const optSwatch = attrSwatch?.options.get(value);
-          return {
-            value,
-            swatchColor: optSwatch?.swatchColor,
-            swatchColor2: optSwatch?.swatchColor2,
-            swatchImageUrl: optSwatch?.swatchImageUrl,
-            variants: variantList,
-          };
-        }),
-      };
-    });
-  }, [variants, swatchMap]);
-
-  // Get currently selected attribute values
-  const selectedOptions = useMemo(() => {
-    if (!selectedVariant) return new Map<string, string>();
-    const opts = getVariantOptions(selectedVariant);
-    return new Map(opts.map(({ name, value }) => [name, value]));
-  }, [selectedVariant]);
-
-  // Find the variant that matches all selected attributes
-  function findMatchingVariant(
-    attributeName: string,
-    newValue: string
-  ): ProductVariant | undefined {
-    const nextSelection = new Map(selectedOptions);
-    nextSelection.set(attributeName, newValue);
-
-    return variants.find((v) => {
-      const opts = getVariantOptions(v);
-      return Array.from(nextSelection.entries()).every(([name, value]) =>
-        opts.some((o) => o.name === name && o.value === value)
-      );
-    });
-  }
-
-  if (attributeGroups.length === 0) return null;
-
-  return (
-    <div className={cn('space-y-5', className)}>
-      {attributeGroups.map((group) => (
-        <fieldset key={group.name} data-display-type={group.displayType}>
-          <legend className="mb-2.5 text-sm font-semibold text-foreground">
-            {group.name}
-            {selectedOptions.get(group.name) && (
-              <span className="font-normal text-muted-foreground">
-                : {selectedOptions.get(group.name)}
-              </span>
-            )}
-          </legend>
-          <div className="flex flex-wrap gap-2">
-            {group.values.map(({ value, swatchColor, swatchColor2, swatchImageUrl, variants: matchingVariants }) => {
-              const isSelected = selectedOptions.get(group.name) === value;
-              const matchedVariant = findMatchingVariant(group.name, value);
-              const isAvailable = matchedVariant?.inventory?.canPurchase !== false;
-              const hasSwatch = Boolean(swatchColor || swatchImageUrl);
-
-              return (
-                <button
-                  key={value}
-                  type="button"
-                  disabled={!isAvailable}
-                  aria-pressed={isSelected}
-                  onClick={() => {
-                    const variant = matchedVariant || matchingVariants[0];
-                    if (variant) onVariantChange(variant);
-                  }}
-                  className={cn(
-                    'inline-flex min-h-10 items-center gap-2 rounded-full border px-4 py-1.5 text-sm font-medium transition-colors',
-                    isSelected
-                      ? 'border-primary bg-primary text-primary-foreground'
-                      : 'border-border bg-background text-foreground hover:border-foreground',
-                    !isAvailable && 'opacity-40 line-through'
-                  )}
-                >
-                  {hasSwatch && (
-                    <span
-                      aria-hidden="true"
-                      className="inline-block h-5 w-5 shrink-0 rounded-full border border-foreground/15 bg-cover bg-center"
-                      style={
-                        swatchImageUrl
-                          ? { backgroundImage: `url(${swatchImageUrl})` }
-                          : swatchColor2
-                            ? {
-                                background: `linear-gradient(135deg, ${swatchColor} 50%, ${swatchColor2} 50%)`,
-                              }
-                            : { backgroundColor: swatchColor ?? undefined }
-                      }
-                    />
-                  )}
-                  {value}
-                </button>
-              );
-            })}
-          </div>
-        </fieldset>
-      ))}
-
-      {/* Variant-specific price + stock intentionally NOT repeated here — the
-          buy box's PriceDisplay and StockBadge react to the selected variant
-          via useProductPage(), so a strip here would duplicate them. */}
-    </div>
-  );
-}
+'use client';
+
+import { useMemo } from 'react';
+import type { Product, ProductVariant } from 'brainerce';
+import { getVariantOptions, getProductSwatches } from 'brainerce';
+import { cn } from '@/core/lib/utils';
+
+interface VariantSelectorProps {
+  product: Product;
+  selectedVariant: ProductVariant | null;
+  onVariantChange: (variant: ProductVariant) => void;
+  className?: string;
+}
+
+interface AttributeGroup {
+  name: string;
+  displayType: string;
+  values: Array<{
+    value: string;
+    swatchColor?: string | null;
+    swatchColor2?: string | null;
+    swatchImageUrl?: string | null;
+    variants: ProductVariant[];
+  }>;
+}
+
+/**
+ * Variant selector on the product page: one group per attribute (Size,
+ * Color, …) rendered as pill buttons; merchant swatch metadata
+ * (`swatchColor`, `swatchColor2`, `swatchImageUrl`) renders as a color/image
+ * dot inside the pill. Selection state + matching logic are the contract.
+ */
+export function VariantSelector({
+  product,
+  selectedVariant,
+  onVariantChange,
+  className,
+}: VariantSelectorProps) {
+  const variants = useMemo(() => product.variants || [], [product.variants]);
+
+  // Get swatch metadata from product attribute options
+  const swatchData = useMemo(() => getProductSwatches(product), [product]);
+  const swatchMap = useMemo(() => {
+    const map = new Map<
+      string,
+      {
+        displayType: string;
+        options: Map<
+          string,
+          {
+            swatchColor?: string | null;
+            swatchColor2?: string | null;
+            swatchImageUrl?: string | null;
+          }
+        >;
+      }
+    >();
+    for (const attr of swatchData) {
+      const optMap = new Map<
+        string,
+        {
+          swatchColor?: string | null;
+          swatchColor2?: string | null;
+          swatchImageUrl?: string | null;
+        }
+      >();
+      for (const opt of attr.options) {
+        optMap.set(opt.name, {
+          swatchColor: opt.swatchColor,
+          swatchColor2: opt.swatchColor2,
+          swatchImageUrl: opt.swatchImageUrl,
+        });
+      }
+      map.set(attr.attributeName, { displayType: attr.displayType, options: optMap });
+    }
+    return map;
+  }, [swatchData]);
+
+  // Build attribute groups from variant data, enriched with swatch info
+  const attributeGroups = useMemo<AttributeGroup[]>(() => {
+    const groups = new Map<string, Map<string, ProductVariant[]>>();
+
+    for (const variant of variants) {
+      const options = getVariantOptions(variant);
+      for (const { name, value } of options) {
+        if (!groups.has(name)) {
+          groups.set(name, new Map());
+        }
+        const valuesMap = groups.get(name)!;
+        if (!valuesMap.has(value)) {
+          valuesMap.set(value, []);
+        }
+        valuesMap.get(value)!.push(variant);
+      }
+    }
+
+    return Array.from(groups.entries()).map(([name, valuesMap]) => {
+      const attrSwatch = swatchMap.get(name);
+      return {
+        name,
+        displayType: attrSwatch?.displayType || 'DROPDOWN',
+        values: Array.from(valuesMap.entries()).map(([value, variantList]) => {
+          const optSwatch = attrSwatch?.options.get(value);
+          return {
+            value,
+            swatchColor: optSwatch?.swatchColor,
+            swatchColor2: optSwatch?.swatchColor2,
+            swatchImageUrl: optSwatch?.swatchImageUrl,
+            variants: variantList,
+          };
+        }),
+      };
+    });
+  }, [variants, swatchMap]);
+
+  // Get currently selected attribute values
+  const selectedOptions = useMemo(() => {
+    if (!selectedVariant) return new Map<string, string>();
+    const opts = getVariantOptions(selectedVariant);
+    return new Map(opts.map(({ name, value }) => [name, value]));
+  }, [selectedVariant]);
+
+  // Find the variant that matches all selected attributes
+  function findMatchingVariant(
+    attributeName: string,
+    newValue: string
+  ): ProductVariant | undefined {
+    const nextSelection = new Map(selectedOptions);
+    nextSelection.set(attributeName, newValue);
+
+    return variants.find((v) => {
+      const opts = getVariantOptions(v);
+      return Array.from(nextSelection.entries()).every(([name, value]) =>
+        opts.some((o) => o.name === name && o.value === value)
+      );
+    });
+  }
+
+  if (attributeGroups.length === 0) return null;
+
+  return (
+    <div className={cn('space-y-5', className)}>
+      {attributeGroups.map((group) => (
+        <fieldset key={group.name} data-display-type={group.displayType}>
+          <legend className="mb-2.5 text-sm font-semibold text-foreground">
+            {group.name}
+            {selectedOptions.get(group.name) && (
+              <span className="font-normal text-muted-foreground">
+                : {selectedOptions.get(group.name)}
+              </span>
+            )}
+          </legend>
+          <div className="flex flex-wrap gap-2">
+            {group.values.map(({ value, swatchColor, swatchColor2, swatchImageUrl, variants: matchingVariants }) => {
+              const isSelected = selectedOptions.get(group.name) === value;
+              const matchedVariant = findMatchingVariant(group.name, value);
+              const isAvailable = matchedVariant?.inventory?.canPurchase !== false;
+              const hasSwatch = Boolean(swatchColor || swatchImageUrl);
+
+              return (
+                <button
+                  key={value}
+                  type="button"
+                  disabled={!isAvailable}
+                  aria-pressed={isSelected}
+                  onClick={() => {
+                    const variant = matchedVariant || matchingVariants[0];
+                    if (variant) onVariantChange(variant);
+                  }}
+                  className={cn(
+                    'inline-flex min-h-10 items-center gap-2 rounded-full border px-4 py-1.5 text-sm font-medium transition-colors',
+                    isSelected
+                      ? 'border-primary bg-primary text-primary-foreground'
+                      : 'border-border bg-background text-foreground hover:border-foreground',
+                    !isAvailable && 'opacity-40 line-through'
+                  )}
+                >
+                  {hasSwatch && (
+                    <span
+                      aria-hidden="true"
+                      className="inline-block h-5 w-5 shrink-0 rounded-full border border-foreground/15 bg-cover bg-center"
+                      style={
+                        swatchImageUrl
+                          ? { backgroundImage: `url(${swatchImageUrl})` }
+                          : swatchColor2
+                            ? {
+                                background: `linear-gradient(135deg, ${swatchColor} 50%, ${swatchColor2} 50%)`,
+                              }
+                            : { backgroundColor: swatchColor ?? undefined }
+                      }
+                    />
+                  )}
+                  {value}
+                </button>
+              );
+            })}
+          </div>
+        </fieldset>
+      ))}
+
+      {/* Variant-specific price + stock intentionally NOT repeated here — the
+          buy box's PriceDisplay and StockBadge react to the selected variant
+          via useProductPage(), so a strip here would duplicate them. */}
+    </div>
+  );
+}

package/templates/nextjs/designs/atelier/ui/shared/cdn-image.tsx

@@ -1,29 +1,29 @@
-import Image, { type ImageProps } from 'next/image';
-import { OPTIMIZED_IMAGE_HOSTS } from '@/core/lib/image-hosts';
-
-const OPTIMIZED_HOSTS = new Set(OPTIMIZED_IMAGE_HOSTS);
-
-function isOptimizedHost(src: ImageProps['src']): boolean {
-  if (typeof src !== 'string') return true; // StaticImageData — always local
-  try {
-    return OPTIMIZED_HOSTS.has(new URL(src).hostname);
-  } catch {
-    return false;
-  }
-}
-
-/**
- * Drop-in `next/image` replacement for Brainerce-sourced images (product
- * photos, blog covers). Uploaded images get re-hosted onto cdn.brainerce.com
- * by the backend's async image-import pipeline, but a product/variant can
- * still carry a raw upstream-merchant URL while mid-import, or if that job
- * failed. next/image throws if `src`'s host isn't in `images.remotePatterns`,
- * so any host outside our known CDN falls back to `unoptimized` — an
- * unresized, direct-from-origin fetch — instead of crashing the page.
- *
- * DESIGN ME — shared image wrapper; render ALL catalog images through this
- * component (not raw next/image) so unknown hosts never crash the page.
- */
-export function CdnImage({ unoptimized, ...props }: ImageProps) {
-  return <Image {...props} unoptimized={unoptimized ?? !isOptimizedHost(props.src)} />;
-}
+import Image, { type ImageProps } from 'next/image';
+import { OPTIMIZED_IMAGE_HOSTS } from '@/core/lib/image-hosts';
+
+const OPTIMIZED_HOSTS = new Set(OPTIMIZED_IMAGE_HOSTS);
+
+function isOptimizedHost(src: ImageProps['src']): boolean {
+  if (typeof src !== 'string') return true; // StaticImageData — always local
+  try {
+    return OPTIMIZED_HOSTS.has(new URL(src).hostname);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Drop-in `next/image` replacement for Brainerce-sourced images (product
+ * photos, blog covers). Uploaded images get re-hosted onto cdn.brainerce.com
+ * by the backend's async image-import pipeline, but a product/variant can
+ * still carry a raw upstream-merchant URL while mid-import, or if that job
+ * failed. next/image throws if `src`'s host isn't in `images.remotePatterns`,
+ * so any host outside our known CDN falls back to `unoptimized` — an
+ * unresized, direct-from-origin fetch — instead of crashing the page.
+ *
+ * DESIGN ME — shared image wrapper; render ALL catalog images through this
+ * component (not raw next/image) so unknown hosts never crash the page.
+ */
+export function CdnImage({ unoptimized, ...props }: ImageProps) {
+  return <Image {...props} unoptimized={unoptimized ?? !isOptimizedHost(props.src)} />;
+}

package/templates/nextjs/designs/atelier/ui/shared/fly-to-cart.ts

@@ -1,86 +1,86 @@
-/**
- * "Fly to cart" — a small round thumbnail of the product lifts off the image
- * and drifts into the header cart icon, which then bumps.
- *
- * RTL gotcha (learned the hard way): next/image renders its <img> with
- * `inset: 0`; a naive clone keeps that, and in an RTL document an
- * over-constrained left+right resolves to RIGHT — pinning the clone to the
- * wrong edge. `inset: 'auto'` must be set BEFORE top/left.
- *
- * Pure presentation; no-ops under prefers-reduced-motion or when either end
- * of the flight is missing.
- */
-export function flyToCart(source: HTMLElement | null) {
-  if (!source || typeof document === 'undefined') return;
-  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
-
-  const target = document.getElementById('cart-anchor');
-  if (!target) return;
-
-  const img = source.querySelector('img') ?? source;
-  const from = img.getBoundingClientRect();
-  const to = target.getBoundingClientRect();
-  if (from.width === 0 || to.width === 0) return;
-
-  const SIZE = 64;
-  const startX = from.left + from.width / 2 - SIZE / 2;
-  const startY = from.top + from.height / 2 - SIZE / 2;
-
-  const clone = img.cloneNode(true) as HTMLElement;
-  Object.assign(clone.style, {
-    inset: 'auto', // kill next/image's inset:0 BEFORE top/left (RTL right-wins)
-    position: 'fixed',
-    top: `${startY}px`,
-    left: `${startX}px`,
-    width: `${SIZE}px`,
-    height: `${SIZE}px`,
-    borderRadius: '9999px',
-    objectFit: 'cover',
-    zIndex: '9999',
-    pointerEvents: 'none',
-    margin: '0',
-    border: '2px solid hsl(var(--background))',
-    boxShadow: '0 10px 24px -10px hsl(var(--primary) / 0.5)',
-    background: 'hsl(var(--background))',
-  });
-  document.body.appendChild(clone);
-
-  const dx = to.left + to.width / 2 - (startX + SIZE / 2);
-  const dy = to.top + to.height / 2 - (startY + SIZE / 2);
-
-  const flight = clone.animate(
-    [
-      { transform: 'translate(0, 0) scale(0.6)', opacity: 0 },
-      { transform: 'translate(0, -14px) scale(1)', opacity: 1, offset: 0.18 },
-      {
-        transform: `translate(${dx * 0.55}px, ${dy * 0.55 - 56}px) scale(0.75)`,
-        opacity: 1,
-        offset: 0.62,
-      },
-      { transform: `translate(${dx}px, ${dy}px) scale(0.15)`, opacity: 0.4 },
-    ],
-    { duration: 750, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' }
-  );
-
-  const land = () => {
-    clone.remove();
-    target.classList.add('cart-bump');
-    window.setTimeout(() => target.classList.remove('cart-bump'), 450);
-  };
-  flight.onfinish = land;
-  // Failsafe — never leave a stray clone in the DOM (tab switch, WAAPI hiccup)
-  window.setTimeout(() => {
-    if (clone.isConnected) land();
-  }, 1100);
-}
-
-/** Picks the first visible element matching the selector — for pages that
- *  render separate mobile/desktop galleries. */
-export function firstVisible(selector: string): HTMLElement | null {
-  if (typeof document === 'undefined') return null;
-  for (const el of document.querySelectorAll<HTMLElement>(selector)) {
-    const rect = el.getBoundingClientRect();
-    if (rect.width > 0 && rect.height > 0) return el;
-  }
-  return null;
-}
+/**
+ * "Fly to cart" — a small round thumbnail of the product lifts off the image
+ * and drifts into the header cart icon, which then bumps.
+ *
+ * RTL gotcha (learned the hard way): next/image renders its <img> with
+ * `inset: 0`; a naive clone keeps that, and in an RTL document an
+ * over-constrained left+right resolves to RIGHT — pinning the clone to the
+ * wrong edge. `inset: 'auto'` must be set BEFORE top/left.
+ *
+ * Pure presentation; no-ops under prefers-reduced-motion or when either end
+ * of the flight is missing.
+ */
+export function flyToCart(source: HTMLElement | null) {
+  if (!source || typeof document === 'undefined') return;
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+  const target = document.getElementById('cart-anchor');
+  if (!target) return;
+
+  const img = source.querySelector('img') ?? source;
+  const from = img.getBoundingClientRect();
+  const to = target.getBoundingClientRect();
+  if (from.width === 0 || to.width === 0) return;
+
+  const SIZE = 64;
+  const startX = from.left + from.width / 2 - SIZE / 2;
+  const startY = from.top + from.height / 2 - SIZE / 2;
+
+  const clone = img.cloneNode(true) as HTMLElement;
+  Object.assign(clone.style, {
+    inset: 'auto', // kill next/image's inset:0 BEFORE top/left (RTL right-wins)
+    position: 'fixed',
+    top: `${startY}px`,
+    left: `${startX}px`,
+    width: `${SIZE}px`,
+    height: `${SIZE}px`,
+    borderRadius: '9999px',
+    objectFit: 'cover',
+    zIndex: '9999',
+    pointerEvents: 'none',
+    margin: '0',
+    border: '2px solid hsl(var(--background))',
+    boxShadow: '0 10px 24px -10px hsl(var(--primary) / 0.5)',
+    background: 'hsl(var(--background))',
+  });
+  document.body.appendChild(clone);
+
+  const dx = to.left + to.width / 2 - (startX + SIZE / 2);
+  const dy = to.top + to.height / 2 - (startY + SIZE / 2);
+
+  const flight = clone.animate(
+    [
+      { transform: 'translate(0, 0) scale(0.6)', opacity: 0 },
+      { transform: 'translate(0, -14px) scale(1)', opacity: 1, offset: 0.18 },
+      {
+        transform: `translate(${dx * 0.55}px, ${dy * 0.55 - 56}px) scale(0.75)`,
+        opacity: 1,
+        offset: 0.62,
+      },
+      { transform: `translate(${dx}px, ${dy}px) scale(0.15)`, opacity: 0.4 },
+    ],
+    { duration: 750, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' }
+  );
+
+  const land = () => {
+    clone.remove();
+    target.classList.add('cart-bump');
+    window.setTimeout(() => target.classList.remove('cart-bump'), 450);
+  };
+  flight.onfinish = land;
+  // Failsafe — never leave a stray clone in the DOM (tab switch, WAAPI hiccup)
+  window.setTimeout(() => {
+    if (clone.isConnected) land();
+  }, 1100);
+}
+
+/** Picks the first visible element matching the selector — for pages that
+ *  render separate mobile/desktop galleries. */
+export function firstVisible(selector: string): HTMLElement | null {
+  if (typeof document === 'undefined') return null;
+  for (const el of document.querySelectorAll<HTMLElement>(selector)) {
+    const rect = el.getBoundingClientRect();
+    if (rect.width > 0 && rect.height > 0) return el;
+  }
+  return null;
+}