@thorprovider/blocks 2.0.0 → 3.0.1

package/dist/blocks/e-commerce/product-categories/product-category.mjs

@@ -0,0 +1,322 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  ArrowRight,
+  Baby,
+  BookOpen,
+  Boxes,
+  Cable,
+  Camera,
+  Car,
+  Dumbbell,
+  Gamepad2,
+  Gift,
+  Heart,
+  Home,
+  Laptop,
+  LayoutGrid,
+  Lightbulb,
+  Package,
+  Search,
+  ShieldCheck,
+  Shirt,
+  ShoppingBag,
+  Smartphone,
+  Sparkles,
+  Store,
+  Tag,
+  Utensils,
+  Wrench
+} from "lucide-react";
+import { Badge } from "../../../ui/badge.mjs";
+import { Button } from "../../../ui/button.mjs";
+import { Card, CardContent } from "../../../ui/card.mjs";
+import { Input } from "../../../ui/input.mjs";
+import { cn } from "../../../lib/utils.mjs";
+import { PRODUCT_IMAGE_FALLBACK } from "../../../lib/contracts.mjs";
+const CATEGORY_ICONS = {
+  grid: LayoutGrid,
+  boxes: Boxes,
+  smartphone: Smartphone,
+  laptop: Laptop,
+  camera: Camera,
+  cable: Cable,
+  wrench: Wrench,
+  shield: ShieldCheck,
+  sparkles: Sparkles,
+  lightbulb: Lightbulb,
+  package: Package,
+  tag: Tag,
+  store: Store,
+  home: Home,
+  shirt: Shirt,
+  book: BookOpen,
+  gift: Gift,
+  heart: Heart,
+  car: Car,
+  utensils: Utensils,
+  gamepad: Gamepad2,
+  baby: Baby,
+  dumbbell: Dumbbell
+};
+const FALLBACK_ICON = LayoutGrid;
+function resolveCategoryIcon(icon) {
+  if (!icon) return FALLBACK_ICON;
+  return CATEGORY_ICONS[icon] ?? FALLBACK_ICON;
+}
+function formatCount(itemCount, itemsLabel) {
+  if (itemCount === void 0 || !Number.isFinite(itemCount) || itemCount < 0) {
+    return void 0;
+  }
+  const value = itemCount.toLocaleString();
+  return itemsLabel ? `${value} ${itemsLabel}` : value;
+}
+function resolveImage(image, fallback) {
+  return image && image.trim() !== "" ? image : fallback;
+}
+function SectionCta({ cta }) {
+  if (!cta) return null;
+  return /* @__PURE__ */ jsx("div", { className: "mt-12 text-center", children: /* @__PURE__ */ jsx(Button, { size: "lg", className: "h-10 cursor-pointer gap-2 px-4", asChild: true, children: /* @__PURE__ */ jsxs("a", { href: cta.href, children: [
+    /* @__PURE__ */ jsx(ShoppingBag, { className: "size-5" }),
+    cta.label
+  ] }) }) });
+}
+function ViewAllButton({ onViewAll, viewAllLabel }) {
+  if (!onViewAll || !viewAllLabel) return null;
+  return /* @__PURE__ */ jsx("div", { className: "mt-12 text-center", children: /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "h-9 cursor-pointer px-4", onClick: onViewAll, children: [
+    viewAllLabel,
+    /* @__PURE__ */ jsx(ArrowRight, {})
+  ] }) });
+}
+function GridPresentation({
+  categories,
+  title,
+  description,
+  cta,
+  onBrowse,
+  browseLabel,
+  trendingLabel,
+  itemsLabel,
+  imageFallback,
+  className
+}) {
+  const fallback = imageFallback ?? PRODUCT_IMAGE_FALLBACK;
+  return /* @__PURE__ */ jsx("section", { className: cn("py-12", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8", children: [
+    title || description ? /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center", children: [
+      title ? /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight text-balance", children: title }) : null,
+      description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4 text-lg", children: description }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { className: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3", children: categories.map((category) => {
+      const countLabel = formatCount(category.itemCount, itemsLabel);
+      return /* @__PURE__ */ jsx(
+        Card,
+        {
+          className: "group overflow-hidden py-0 transition-all duration-500 hover:shadow-lg",
+          children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-[5/4] overflow-hidden", children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: resolveImage(category.image, fallback),
+                alt: category.name,
+                className: "size-full object-cover transition-transform duration-500 group-hover:scale-105"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent" }),
+            category.trending && trendingLabel ? /* @__PURE__ */ jsx(Badge, { className: "absolute top-4 left-4 rounded-sm px-2.5 py-0.5 font-semibold", children: trendingLabel }) : null,
+            /* @__PURE__ */ jsxs("div", { className: "absolute right-0 bottom-0 left-0 p-6 text-white", children: [
+              /* @__PURE__ */ jsx("h3", { className: "mb-1 text-xl font-bold", children: category.name }),
+              category.description ? /* @__PURE__ */ jsx("p", { className: "mb-3 text-sm text-white/90", children: category.description }) : null,
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                countLabel ? /* @__PURE__ */ jsx("span", { className: "text-sm", children: countLabel }) : null,
+                onBrowse && browseLabel ? /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    size: "sm",
+                    variant: "secondary",
+                    "aria-label": `${browseLabel} ${category.name}`,
+                    className: "ms-auto h-8 cursor-pointer border-white/30 bg-white/20 px-3 text-xs text-white backdrop-blur-sm hover:bg-white/30",
+                    onClick: () => onBrowse(category),
+                    children: [
+                      browseLabel,
+                      /* @__PURE__ */ jsx(ArrowRight, {})
+                    ]
+                  }
+                ) : null
+              ] })
+            ] })
+          ] })
+        },
+        category.id
+      );
+    }) }),
+    /* @__PURE__ */ jsx(SectionCta, { cta })
+  ] }) });
+}
+function IconsPresentation({
+  categories,
+  title,
+  description,
+  badge,
+  cta,
+  onBrowse,
+  onViewAll,
+  viewAllLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsx("section", { className: cn("py-12", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8", children: [
+    badge || title || description ? /* @__PURE__ */ jsxs("div", { className: "mx-auto mb-12 max-w-3xl text-center", children: [
+      badge ? /* @__PURE__ */ jsx("div", { className: "mb-4 inline-flex", children: /* @__PURE__ */ jsx("span", { className: "bg-secondary/80 text-secondary-foreground rounded-full px-4 py-1.5 text-sm font-medium", children: badge }) }) : null,
+      title ? /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight text-balance", children: title }) : null,
+      description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4", children: description }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { className: "mx-auto grid max-w-5xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", children: categories.map((category) => {
+      const Icon = resolveCategoryIcon(category.icon);
+      const clickable = Boolean(onBrowse);
+      return /* @__PURE__ */ jsxs(
+        Card,
+        {
+          className: cn(
+            "group relative overflow-hidden px-2 py-6 shadow-xs transition-all hover:shadow-md",
+            clickable && "cursor-pointer"
+          ),
+          children: [
+            clickable ? (
+              // A stretched native control keeps the whole card clickable
+              // while focus, activation, and the accessible name come from
+              // the platform. The Card stays non-interactive so no
+              // block-level element is nested inside the button, and with
+              // no browse handler there is no control and no focus target.
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onBrowse?.(category),
+                  "aria-label": category.name,
+                  className: "absolute inset-0 z-10 rounded-xl focus-visible:inset-ring-2 focus-visible:inset-ring-ring focus-visible:outline-none"
+                }
+              )
+            ) : null,
+            /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+              /* @__PURE__ */ jsx("div", { className: "bg-secondary/80 text-secondary-foreground flex size-12 items-center justify-center rounded-lg", children: /* @__PURE__ */ jsx(Icon, { className: "size-5", strokeWidth: 1.5, "aria-hidden": "true" }) }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("h3", { className: "text-foreground text-lg font-semibold", children: category.name }),
+                category.description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: category.description }) : null
+              ] })
+            ] }) })
+          ]
+        },
+        category.id
+      );
+    }) }),
+    /* @__PURE__ */ jsx(SectionCta, { cta }),
+    /* @__PURE__ */ jsx(ViewAllButton, { onViewAll, viewAllLabel })
+  ] }) });
+}
+function ListPresentation({
+  categories,
+  title,
+  description,
+  query,
+  onQueryChange,
+  searchPlaceholder,
+  searchLabel,
+  emptyLabel,
+  noResultsLabel,
+  featuredLabel,
+  browseLabel,
+  itemsLabel,
+  onBrowse,
+  onViewAll,
+  viewAllLabel,
+  className
+}) {
+  const hasQuery = Boolean(query && query.trim() !== "");
+  const emptyMessage = hasQuery ? noResultsLabel ?? emptyLabel : emptyLabel;
+  return /* @__PURE__ */ jsx("section", { className: cn("py-12", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8", children: [
+    title || description ? /* @__PURE__ */ jsxs("div", { className: "mb-8 text-center", children: [
+      title ? /* @__PURE__ */ jsx("h2", { className: "mb-4 text-3xl font-bold tracking-tight text-balance", children: title }) : null,
+      description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-lg", children: description }) : null
+    ] }) : null,
+    onQueryChange ? /* @__PURE__ */ jsxs("div", { className: "relative mx-auto mb-8 max-w-md", children: [
+      /* @__PURE__ */ jsx(
+        Search,
+        {
+          className: "text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2",
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "search",
+          placeholder: searchPlaceholder,
+          value: query ?? "",
+          onChange: (event) => onQueryChange(event.target.value),
+          className: "ps-9 h-9",
+          "aria-label": searchLabel ?? searchPlaceholder
+        }
+      )
+    ] }) : null,
+    categories.length === 0 ? emptyMessage ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground py-10 text-center text-sm", children: emptyMessage }) : null : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-2", children: categories.map((category) => {
+      const Icon = resolveCategoryIcon(category.icon);
+      const countLabel = formatCount(category.itemCount, itemsLabel);
+      return /* @__PURE__ */ jsx(
+        Card,
+        {
+          className: cn(
+            "group hover:border-primary relative py-0 transition-all duration-200 hover:shadow-md"
+          ),
+          children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: "bg-primary/10 group-hover:bg-primary/20 flex size-12 items-center justify-center rounded-lg transition-colors", children: /* @__PURE__ */ jsx(Icon, { className: "text-primary size-6", "aria-hidden": "true" }) }) }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: category.name }),
+                  category.featured && featuredLabel ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "rounded-sm px-2 py-0.5 font-semibold", children: featuredLabel }) : null
+                ] }),
+                category.description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-3 line-clamp-2 text-sm", children: category.description }) : null,
+                category.subcategories && category.subcategories.length > 0 ? /* @__PURE__ */ jsx("div", { className: "mb-3 flex flex-wrap gap-2", children: category.subcategories.map((sub, index) => /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "bg-muted text-muted-foreground rounded-md px-2 py-1 text-xs",
+                    children: sub
+                  },
+                  `${category.id}:sub:${index}`
+                )) }) : null,
+                countLabel ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-sm", children: countLabel }) : null
+              ] })
+            ] }),
+            onBrowse && browseLabel ? /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                "aria-label": `${browseLabel} ${category.name}`,
+                className: "absolute end-4 bottom-4 h-8 cursor-pointer px-3 text-xs opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100",
+                onClick: () => onBrowse(category),
+                children: [
+                  browseLabel,
+                  /* @__PURE__ */ jsx(ArrowRight, {})
+                ]
+              }
+            ) : null
+          ] })
+        },
+        category.id
+      );
+    }) }),
+    /* @__PURE__ */ jsx(ViewAllButton, { onViewAll, viewAllLabel })
+  ] }) });
+}
+function ProductCategory(props) {
+  const presentation = props.presentation ?? "grid";
+  if (presentation === "icons") return /* @__PURE__ */ jsx(IconsPresentation, { ...props });
+  if (presentation === "list") return /* @__PURE__ */ jsx(ListPresentation, { ...props });
+  return /* @__PURE__ */ jsx(GridPresentation, { ...props });
+}
+var product_category_default = ProductCategory;
+export {
+  ProductCategory,
+  product_category_default as default
+};
+//# sourceMappingURL=product-category.mjs.map

package/dist/blocks/e-commerce/product-categories/product-category.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/product-categories/product-category.tsx"],"sourcesContent":["'use client'\n\nimport {\n  ArrowRight,\n  Baby,\n  BookOpen,\n  Boxes,\n  Cable,\n  Camera,\n  Car,\n  Dumbbell,\n  Gamepad2,\n  Gift,\n  Heart,\n  Home,\n  Laptop,\n  LayoutGrid,\n  Lightbulb,\n  Package,\n  Search,\n  ShieldCheck,\n  Shirt,\n  ShoppingBag,\n  Smartphone,\n  Sparkles,\n  Store,\n  Tag,\n  Utensils,\n  Wrench,\n  type LucideIcon,\n} from 'lucide-react'\n\nimport { Badge } from '../../../ui/badge'\nimport { Button } from '../../../ui/button'\nimport { Card, CardContent } from '../../../ui/card'\nimport { Input } from '../../../ui/input'\nimport { cn } from '../../../lib/utils'\nimport { PRODUCT_IMAGE_FALLBACK } from '../../../lib/contracts'\nimport type { CTA } from '../../../lib/types'\nimport type { ProductCategoryItem, ProductCategorySpecProps } from '../../../lib/contracts'\n\n/**\n * The bounded presentation surface. `grid` is image-forward, `icons` is a\n * compact icon grid, and `list` is a described row list with subcategory chips\n * and an optional controlled search. The value changes structure, never the\n * data contract or the callbacks.\n */\nexport type ProductCategoryPresentation = NonNullable<ProductCategorySpecProps['presentation']>\n\nexport interface ProductCategoryProps {\n  /** Canonical category projection; absent optional fields degrade gracefully. */\n  categories: ProductCategoryItem[]\n  /** Bounded presentation option; defaults to `grid`. */\n  presentation?: ProductCategoryPresentation\n  title?: string\n  description?: string\n  /** Optional eyebrow label (`icons` presentation). */\n  badge?: string\n  /** Optional section-level link action. */\n  cta?: CTA\n  /** Controlled search value (`list` presentation); the host owns filtering. */\n  query?: string\n  onQueryChange?: (query: string) => void\n  onBrowse?: (category: ProductCategoryItem) => void\n  onViewAll?: () => void\n  // All user-facing copy is supplied by the host; the block ships no defaults.\n  searchPlaceholder?: string\n  searchLabel?: string\n  emptyLabel?: string\n  noResultsLabel?: string\n  browseLabel?: string\n  viewAllLabel?: string\n  trendingLabel?: string\n  featuredLabel?: string\n  itemsLabel?: string\n  /** Neutral placeholder for a missing image; defaults to `PRODUCT_IMAGE_FALLBACK`. */\n  imageFallback?: string\n  className?: string\n}\n\n/**\n * Bounded, neutral icon vocabulary. The prop is a plain string (never a named\n * or sector-specific enum); an unknown or absent key renders a neutral fallback.\n */\nconst CATEGORY_ICONS: Record<string, LucideIcon> = {\n  grid: LayoutGrid,\n  boxes: Boxes,\n  smartphone: Smartphone,\n  laptop: Laptop,\n  camera: Camera,\n  cable: Cable,\n  wrench: Wrench,\n  shield: ShieldCheck,\n  sparkles: Sparkles,\n  lightbulb: Lightbulb,\n  package: Package,\n  tag: Tag,\n  store: Store,\n  home: Home,\n  shirt: Shirt,\n  book: BookOpen,\n  gift: Gift,\n  heart: Heart,\n  car: Car,\n  utensils: Utensils,\n  gamepad: Gamepad2,\n  baby: Baby,\n  dumbbell: Dumbbell,\n}\n\nconst FALLBACK_ICON: LucideIcon = LayoutGrid\n\nfunction resolveCategoryIcon(icon: string | undefined): LucideIcon {\n  if (!icon) return FALLBACK_ICON\n  return CATEGORY_ICONS[icon] ?? FALLBACK_ICON\n}\n\n/**\n * Formats a category item count only when it is a supplied, finite,\n * non-negative number. Returns `undefined` for unknown or invalid values so the\n * caller omits the count entirely (a real `0` is preserved). The optional\n * `itemsLabel` is host-supplied copy — the block never hardcodes a unit.\n */\nfunction formatCount(itemCount: number | undefined, itemsLabel: string | undefined): string | undefined {\n  if (itemCount === undefined || !Number.isFinite(itemCount) || itemCount < 0) {\n    return undefined\n  }\n  const value = itemCount.toLocaleString()\n  return itemsLabel ? `${value} ${itemsLabel}` : value\n}\n\nfunction resolveImage(image: string | undefined, fallback: string): string {\n  return image && image.trim() !== '' ? image : fallback\n}\n\nfunction SectionCta({ cta }: { cta: CTA | undefined }) {\n  if (!cta) return null\n  return (\n    <div className='mt-12 text-center'>\n      <Button size='lg' className='h-10 cursor-pointer gap-2 px-4' asChild>\n        <a href={cta.href}>\n          <ShoppingBag className='size-5' />\n          {cta.label}\n        </a>\n      </Button>\n    </div>\n  )\n}\n\nfunction ViewAllButton({ onViewAll, viewAllLabel }: { onViewAll?: () => void; viewAllLabel?: string }) {\n  // Purpose-gated: no handler or no label means no affordance.\n  if (!onViewAll || !viewAllLabel) return null\n  return (\n    <div className='mt-12 text-center'>\n      <Button variant='outline' className='h-9 cursor-pointer px-4' onClick={onViewAll}>\n        {viewAllLabel}\n        <ArrowRight />\n      </Button>\n    </div>\n  )\n}\n\nfunction GridPresentation({\n  categories,\n  title,\n  description,\n  cta,\n  onBrowse,\n  browseLabel,\n  trendingLabel,\n  itemsLabel,\n  imageFallback,\n  className,\n}: ProductCategoryProps) {\n  const fallback = imageFallback ?? PRODUCT_IMAGE_FALLBACK\n  return (\n    <section className={cn('py-12', className)}>\n      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>\n        {title || description ? (\n          <div className='mb-12 text-center'>\n            {title ? <h2 className='text-3xl font-bold tracking-tight text-balance'>{title}</h2> : null}\n            {description ? <p className='text-muted-foreground mt-4 text-lg'>{description}</p> : null}\n          </div>\n        ) : null}\n\n        <div className='grid gap-6 sm:grid-cols-2 lg:grid-cols-3'>\n          {categories.map(category => {\n            const countLabel = formatCount(category.itemCount, itemsLabel)\n            return (\n              <Card\n                key={category.id}\n                className='group overflow-hidden py-0 transition-all duration-500 hover:shadow-lg'\n              >\n                <div className='relative aspect-[5/4] overflow-hidden'>\n                  <img\n                    src={resolveImage(category.image, fallback)}\n                    alt={category.name}\n                    className='size-full object-cover transition-transform duration-500 group-hover:scale-105'\n                  />\n                  <div className='absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent' />\n\n                  {category.trending && trendingLabel ? (\n                    <Badge className='absolute top-4 left-4 rounded-sm px-2.5 py-0.5 font-semibold'>\n                      {trendingLabel}\n                    </Badge>\n                  ) : null}\n\n                  <div className='absolute right-0 bottom-0 left-0 p-6 text-white'>\n                    <h3 className='mb-1 text-xl font-bold'>{category.name}</h3>\n                    {category.description ? (\n                      <p className='mb-3 text-sm text-white/90'>{category.description}</p>\n                    ) : null}\n                    <div className='flex items-center justify-between'>\n                      {countLabel ? <span className='text-sm'>{countLabel}</span> : null}\n                      {onBrowse && browseLabel ? (\n                        <Button\n                          size='sm'\n                          variant='secondary'\n                          aria-label={`${browseLabel} ${category.name}`}\n                          className='ms-auto h-8 cursor-pointer border-white/30 bg-white/20 px-3 text-xs text-white backdrop-blur-sm hover:bg-white/30'\n                          onClick={() => onBrowse(category)}\n                        >\n                          {browseLabel}\n                          <ArrowRight />\n                        </Button>\n                      ) : null}\n                    </div>\n                  </div>\n                </div>\n              </Card>\n            )\n          })}\n        </div>\n\n        <SectionCta cta={cta} />\n      </div>\n    </section>\n  )\n}\n\nfunction IconsPresentation({\n  categories,\n  title,\n  description,\n  badge,\n  cta,\n  onBrowse,\n  onViewAll,\n  viewAllLabel,\n  className,\n}: ProductCategoryProps) {\n  return (\n    <section className={cn('py-12', className)}>\n      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>\n        {badge || title || description ? (\n          <div className='mx-auto mb-12 max-w-3xl text-center'>\n            {badge ? (\n              <div className='mb-4 inline-flex'>\n                <span className='bg-secondary/80 text-secondary-foreground rounded-full px-4 py-1.5 text-sm font-medium'>\n                  {badge}\n                </span>\n              </div>\n            ) : null}\n            {title ? <h2 className='text-3xl font-bold tracking-tight text-balance'>{title}</h2> : null}\n            {description ? <p className='text-muted-foreground mt-4'>{description}</p> : null}\n          </div>\n        ) : null}\n\n        <div className='mx-auto grid max-w-5xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4'>\n          {categories.map(category => {\n            const Icon = resolveCategoryIcon(category.icon)\n            const clickable = Boolean(onBrowse)\n            return (\n              <Card\n                key={category.id}\n                className={cn(\n                  'group relative overflow-hidden px-2 py-6 shadow-xs transition-all hover:shadow-md',\n                  clickable && 'cursor-pointer',\n                )}\n              >\n                {clickable ? (\n                  // A stretched native control keeps the whole card clickable\n                  // while focus, activation, and the accessible name come from\n                  // the platform. The Card stays non-interactive so no\n                  // block-level element is nested inside the button, and with\n                  // no browse handler there is no control and no focus target.\n                  <button\n                    type='button'\n                    onClick={() => onBrowse?.(category)}\n                    aria-label={category.name}\n                    className='absolute inset-0 z-10 rounded-xl focus-visible:inset-ring-2 focus-visible:inset-ring-ring focus-visible:outline-none'\n                  />\n                ) : null}\n                <CardContent>\n                  <div className='flex flex-col gap-4'>\n                    <div className='bg-secondary/80 text-secondary-foreground flex size-12 items-center justify-center rounded-lg'>\n                      <Icon className='size-5' strokeWidth={1.5} aria-hidden='true' />\n                    </div>\n                    <div>\n                      <h3 className='text-foreground text-lg font-semibold'>{category.name}</h3>\n                      {category.description ? (\n                        <p className='text-muted-foreground text-sm'>{category.description}</p>\n                      ) : null}\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            )\n          })}\n        </div>\n\n        <SectionCta cta={cta} />\n        <ViewAllButton onViewAll={onViewAll} viewAllLabel={viewAllLabel} />\n      </div>\n    </section>\n  )\n}\n\nfunction ListPresentation({\n  categories,\n  title,\n  description,\n  query,\n  onQueryChange,\n  searchPlaceholder,\n  searchLabel,\n  emptyLabel,\n  noResultsLabel,\n  featuredLabel,\n  browseLabel,\n  itemsLabel,\n  onBrowse,\n  onViewAll,\n  viewAllLabel,\n  className,\n}: ProductCategoryProps) {\n  const hasQuery = Boolean(query && query.trim() !== '')\n  // The host owns filtering: this presentation renders exactly the categories it\n  // receives. Only the empty copy depends on whether a query is active.\n  const emptyMessage = hasQuery ? noResultsLabel ?? emptyLabel : emptyLabel\n\n  return (\n    <section className={cn('py-12', className)}>\n      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>\n        {title || description ? (\n          <div className='mb-8 text-center'>\n            {title ? (\n              <h2 className='mb-4 text-3xl font-bold tracking-tight text-balance'>{title}</h2>\n            ) : null}\n            {description ? <p className='text-muted-foreground text-lg'>{description}</p> : null}\n          </div>\n        ) : null}\n\n        {onQueryChange ? (\n          <div className='relative mx-auto mb-8 max-w-md'>\n            <Search\n              className='text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2'\n              aria-hidden='true'\n            />\n            <Input\n              type='search'\n              placeholder={searchPlaceholder}\n              value={query ?? ''}\n              onChange={event => onQueryChange(event.target.value)}\n              className='ps-9 h-9'\n              aria-label={searchLabel ?? searchPlaceholder}\n            />\n          </div>\n        ) : null}\n\n        {categories.length === 0 ? (\n          emptyMessage ? (\n            <p className='text-muted-foreground py-10 text-center text-sm'>{emptyMessage}</p>\n          ) : null\n        ) : (\n          <div className='grid grid-cols-1 gap-4 lg:grid-cols-2'>\n            {categories.map(category => {\n              const Icon = resolveCategoryIcon(category.icon)\n              const countLabel = formatCount(category.itemCount, itemsLabel)\n              return (\n                <Card\n                  key={category.id}\n                  className={cn(\n                    'group hover:border-primary relative py-0 transition-all duration-200 hover:shadow-md',\n                  )}\n                >\n                  <CardContent className='p-6'>\n                    <div className='flex items-start gap-4'>\n                      <div className='flex-shrink-0'>\n                        <div className='bg-primary/10 group-hover:bg-primary/20 flex size-12 items-center justify-center rounded-lg transition-colors'>\n                          <Icon className='text-primary size-6' aria-hidden='true' />\n                        </div>\n                      </div>\n\n                      <div className='min-w-0 flex-1'>\n                        <div className='mb-2 flex items-center gap-2'>\n                          <h3 className='text-lg font-semibold'>{category.name}</h3>\n                          {category.featured && featuredLabel ? (\n                            <Badge variant='secondary' className='rounded-sm px-2 py-0.5 font-semibold'>\n                              {featuredLabel}\n                            </Badge>\n                          ) : null}\n                        </div>\n\n                        {category.description ? (\n                          <p className='text-muted-foreground mb-3 line-clamp-2 text-sm'>\n                            {category.description}\n                          </p>\n                        ) : null}\n\n                        {category.subcategories && category.subcategories.length > 0 ? (\n                          <div className='mb-3 flex flex-wrap gap-2'>\n                            {category.subcategories.map((sub, index) => (\n                              <span\n                                key={`${category.id}:sub:${index}`}\n                                className='bg-muted text-muted-foreground rounded-md px-2 py-1 text-xs'\n                              >\n                                {sub}\n                              </span>\n                            ))}\n                          </div>\n                        ) : null}\n\n                        {countLabel ? (\n                          <div className='text-muted-foreground text-sm'>{countLabel}</div>\n                        ) : null}\n                      </div>\n                    </div>\n\n                    {onBrowse && browseLabel ? (\n                      <Button\n                        variant='ghost'\n                        size='sm'\n                        aria-label={`${browseLabel} ${category.name}`}\n                        className='absolute end-4 bottom-4 h-8 cursor-pointer px-3 text-xs opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100'\n                        onClick={() => onBrowse(category)}\n                      >\n                        {browseLabel}\n                        <ArrowRight />\n                      </Button>\n                    ) : null}\n                  </CardContent>\n                </Card>\n              )\n            })}\n          </div>\n        )}\n\n        <ViewAllButton onViewAll={onViewAll} viewAllLabel={viewAllLabel} />\n      </div>\n    </section>\n  )\n}\n\nexport function ProductCategory(props: ProductCategoryProps) {\n  const presentation = props.presentation ?? 'grid'\n  if (presentation === 'icons') return <IconsPresentation {...props} />\n  if (presentation === 'list') return <ListPresentation {...props} />\n  return <GridPresentation {...props} />\n}\n\nexport default ProductCategory\n"],"mappings":"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","names":[]}

package/dist/blocks/e-commerce/product-list/product-card.d.ts

@@ -0,0 +1,47 @@
+import type { ProductCardSpecProps, ProductPresentation } from '../../../lib/contracts';
+/**
+ * The bounded presentation surface. `classic` is the boxed card with an
+ * add-to-cart footer, `minimal` is a lean image-forward tile, and `rich` adds
+ * overlay actions (wishlist heart, view similar). The value changes structure,
+ * never the data contract or the callbacks.
+ */
+export type ProductCardPresentation = NonNullable<ProductCardSpecProps['presentation']>;
+export interface ProductCardProps {
+    /** The single canonical product presentation item (canonical `Money`). */
+    item: ProductPresentation;
+    /** Bounded presentation option; defaults to `classic`. */
+    presentation?: ProductCardPresentation;
+    /** Host-resolved wishlist membership; reflects the rich presentation heart. */
+    wishlisted?: boolean;
+    onAddToCart?: (item: ProductPresentation) => void;
+    /**
+     * Hides the add-to-cart control for listings whose only action is opening the
+     * product. Without this a host with no cart callback would render an inert
+     * button.
+     */
+    hideAddToCart?: boolean;
+    onProductClick?: (item: ProductPresentation) => void;
+    /**
+     * Host-owned wishlist toggle; reports the item and the next state from the
+     * click handler (never from an effect).
+     */
+    onToggleWishlist?: (item: ProductPresentation, nextState: boolean) => void;
+    onViewSimilar?: (item: ProductPresentation) => void;
+    addToCartLabel?: string;
+    /** Shown when a price is present but unavailable (never a zero amount). */
+    unavailablePriceLabel?: string;
+    addToWishlistLabel?: string;
+    removeFromWishlistLabel?: string;
+    viewSimilarLabel?: string;
+}
+/**
+ * Canonical product card — the item cell of a product listing. Renders only
+ * the canonical `ProductPresentation` contract (canonical `Money`) with
+ * host-supplied evidence (rating, badge, compare-at); it owns no listing state
+ * and reports every action through its callbacks. Prices render through the
+ * canonical `formatMoney` path, so a missing price is an unavailable state,
+ * never a zero amount.
+ */
+export declare function ProductCard({ item, presentation, wishlisted, hideAddToCart, onAddToCart, onProductClick, onToggleWishlist, onViewSimilar, addToCartLabel, unavailablePriceLabel, addToWishlistLabel, removeFromWishlistLabel, viewSimilarLabel, }: ProductCardProps): import("react").JSX.Element;
+export default ProductCard;
+//# sourceMappingURL=product-card.d.ts.map

package/dist/blocks/e-commerce/product-list/product-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/product-list/product-card.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAEvF;;;;;GAKG;AACH,MAAM,MAAM,uBAAuB,GAAG,WAAW,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC,CAAA;AAEvF,MAAM,WAAW,gBAAgB;IAC/B,0EAA0E;IAC1E,IAAI,EAAE,mBAAmB,CAAA;IACzB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,uBAAuB,CAAA;IACtC,+EAA+E;IAC/E,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAA;IACjD;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAA;IACpD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IAC1E,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAA;IACnD,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,2EAA2E;IAC3E,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAmWD;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,YAAwB,EACxB,UAAU,EACV,aAAa,EACb,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,cAAqC,EACrC,qBAA8C,EAC9C,kBAAyC,EACzC,uBAA+C,EAC/C,gBAAkC,GACnC,EAAE,gBAAgB,+BAoBlB;AAED,eAAe,WAAW,CAAA"}