@instruments/materia-ui 0.1.0

package/dist/compositions/product-card/product-card-caption.js

@@ -0,0 +1,46 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from "@instruments/materia-ui/components/text";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { createElement, useCallback } from "react";
+import { useProductCard } from "./product-card-context.js";
+export const ProductCardCaption = ({ scale = "default", }) => {
+    const { availability, currentVariant, linkComponent, linkPrefetch, onCardClick, product, productNameLines, productUrl, showProductBrand, showProductName, } = useProductCard();
+    const handleLinkClick = useCallback((event) => {
+        if (onCardClick) {
+            event.preventDefault();
+            onCardClick();
+        }
+    }, [onCardClick]);
+    const brandName = product.brand?.name.trim();
+    const hasBrandName = brandName !== undefined && brandName !== "";
+    // External URLs take a plain anchor; `prefetch` is a Next-only prop and
+    // passing it to an `<a>` would reach the DOM as an unknown attribute.
+    const isExternalUrl = productUrl.startsWith("http");
+    // A blocked product has no page this viewer may open, so its text is text.
+    let LinkComp = isExternalUrl ? "a" : linkComponent;
+    if (availability === "blocked") {
+        LinkComp = "span";
+    }
+    const brandSize = scale === "compact" ? "text-paragraph-sm" : "text-paragraph";
+    const nameSize = scale === "compact" ? "text-caption" : "text-paragraph-sm";
+    const linkProps = availability === "blocked"
+        ? { className: "block" }
+        : {
+            className: "block cursor-pointer",
+            href: productUrl,
+            onClick: handleLinkClick,
+            prefetch: isExternalUrl ? undefined : linkPrefetch,
+        };
+    return (_jsxs(_Fragment, { children: [showProductBrand && hasBrandName
+                ? createElement(LinkComp, linkProps, _jsx(Text, { className: cn("line-clamp-1 truncate", brandSize), weight: "semibold", children: brandName }))
+                : null, showProductName
+                ? createElement(LinkComp, linkProps, _jsx(Text, { className: cn("text-foreground", 
+                    // `truncate` and `line-clamp-2` cannot both apply: truncate
+                    // sets `white-space: nowrap`, which leaves a clamp with only
+                    // one line to clamp.
+                    productNameLines === 2
+                        ? "line-clamp-2 text-pretty"
+                        : "line-clamp-1 truncate", nameSize), children: currentVariant.name }))
+                : null] }));
+};

package/dist/compositions/product-card/product-card-category.d.ts

@@ -0,0 +1 @@
+export declare const ProductCardCategory: () => import("react").JSX.Element | null;

package/dist/compositions/product-card/product-card-category.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@instruments/materia-ui/components/box";
+import { MarqueeText } from "@instruments/materia-ui/components/marquee-text";
+import { Tooltip, TooltipContent, TooltipTrigger, } from "@instruments/materia-ui/components/tooltip";
+import { useProductCard } from "./product-card-context.js";
+export const ProductCardCategory = () => {
+    const { product } = useProductCard();
+    const { displayCategory } = product;
+    if (displayCategory === undefined ||
+        displayCategory === null ||
+        displayCategory.name === "") {
+        return null;
+    }
+    const { name, level3Name } = displayCategory;
+    // Only show a tooltip if there's a level 3 category (otherwise it just
+    // duplicates the visible label).
+    if (level3Name === undefined || level3Name === null || level3Name === "") {
+        return _jsx(MarqueeText, { children: name });
+    }
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Box, { as: "span", className: "block min-w-0 cursor-default" }), children: _jsx(MarqueeText, { children: name }) }), _jsxs(TooltipContent, { side: "top", sideOffset: 4, children: [name, " \u2022 ", level3Name] })] }));
+};

package/dist/compositions/product-card/product-card-color-count.d.ts

@@ -0,0 +1 @@
+export declare const ProductCardColorCount: () => import("react").JSX.Element | null;

package/dist/compositions/product-card/product-card-color-count.js

@@ -0,0 +1,84 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@instruments/materia-ui/components/box";
+import { Popover, PopoverContent, PopoverTrigger, } from "@instruments/materia-ui/components/popover";
+import { Skeleton } from "@instruments/materia-ui/components/skeleton";
+import { Swatch, SwatchMore, SwatchSelector, } from "@instruments/materia-ui/components/swatch-selector";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { useProductCard } from "./product-card-context.js";
+/**
+ * A product's colourways, as the circles themselves.
+ *
+ * **The swatches replace a text count.** A designer browsing a category is not
+ * looking for a number - they are looking to see whether a floor comes in
+ * anything like the shade they have in mind, and five circles answer that
+ * instantly where a count cannot.
+ *
+ * The design draws 16px dots on a 26px pitch, the selected one wearing a ring,
+ * then `+N` for the remainder; what renders is the nearest token step - see
+ * {@link INLINE_SWATCHES}. Clicking `+N` opens the full set.
+ */
+/**
+ * Circles shown inline before the rest go behind `+N`.
+ *
+ * The design draws five dots on a 26px pitch. the kit's smallest chip step is
+ * `xs` (20px), which on the row's 10px gap gives a 30px pitch - five dots plus
+ * the overflow label come to ~170px, which fits the full card's 204px content
+ * column.
+ *
+ * Below 240px one dot is dropped and counted into `+N` instead: a 180px card
+ * offers 144px and the label would clip off the right edge.
+ */
+const INLINE_SWATCHES = 5;
+/** The popover still caps its grid, so a 200-colourway family stays a panel. */
+const MAX_POPOVER_SWATCHES = 25;
+export const ProductCardColorCount = () => {
+    const { product, selectedVariantId, onVariantChange, renderImage } = useProductCard();
+    const variantCount = product.variantCount ?? 1;
+    const variants = product.variants ?? [product];
+    // One colourway is not a choice, so it is not a control. Same rule the primary
+    // action follows: a missing capability is an absent element.
+    if (variantCount <= 1) {
+        return null;
+    }
+    const inlineVariants = variants.slice(0, INLINE_SWATCHES);
+    // The overflow counts against the GRAPH's total, not the array we happen to
+    // hold - a page of variants is not the family.
+    const inlineOverflow = variantCount - inlineVariants.length;
+    // The fifth dot is hidden below 240px, so the label there must count it. It
+    // only exists to be hidden when the row actually reached five.
+    const hasBreakpointOnlySwatch = inlineVariants.length === INLINE_SWATCHES;
+    const mediumOverflow = inlineOverflow + (hasBreakpointOnlySwatch ? 1 : 0);
+    // WHICH dot drops below 240px. The last one, unless the last one is the
+    // SELECTED colourway - hiding that leaves a narrow card showing four dots
+    // with no ring on any of them, so the card reads as if nothing is chosen
+    // while its photograph shows a colourway the row does not contain.
+    const lastIndex = INLINE_SWATCHES - 1;
+    const breakpointOnlyIndex = inlineVariants[lastIndex]?.id === selectedVariantId
+        ? lastIndex - 1
+        : lastIndex;
+    const hasPopoverOverflow = variantCount > MAX_POPOVER_SWATCHES;
+    const popoverVisibleCount = hasPopoverOverflow
+        ? MAX_POPOVER_SWATCHES - 1
+        : variantCount;
+    const popoverVariants = variants.slice(0, popoverVisibleCount);
+    const popoverOverflow = variantCount - popoverVisibleCount;
+    const swatchImage = (variant, size) => (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "absolute inset-0 rounded-full" }), renderImage({
+                alt: `${variant.name} colourway`,
+                className: "object-cover",
+                draggable: false,
+                fill: true,
+                sizes: size,
+                src: variant.images[0] ?? "",
+            })] }));
+    return (_jsxs(Box, { className: "flex items-center gap-2.5", children: [_jsx(SwatchSelector, { className: "flex items-center gap-2.5", onValueChange: onVariantChange, size: "xs", value: selectedVariantId, children: inlineVariants.map((variant, index) => (_jsx(Swatch, { className: hasBreakpointOnlySwatch && index === breakpointOnlyIndex
+                        ? "hidden @[240px]/product-card:inline-flex"
+                        : undefined, unavailable: variant.available === false, value: variant.id, children: swatchImage(variant, "20px") }, variant.id))) }), mediumOverflow > 0 ? (_jsxs(Popover, { children: [_jsxs(PopoverTrigger, { render: _jsx("button", { "aria-label": `Show all ${variantCount} ${product.variantLabel ?? "colours"}`, className: cn("text-muted-foreground hover:text-foreground text-caption cursor-pointer tabular-nums", 
+                            // Exactly five colourways leaves nothing behind once the fifth
+                            // dot appears, so the label goes with it.
+                            inlineOverflow === 0 && "@[240px]/product-card:hidden"), onClick: (event) => {
+                                // The card is a link; opening the full set is not navigation.
+                                event.preventDefault();
+                                event.stopPropagation();
+                            }, type: "button" }), children: [_jsx("span", { className: "@[240px]/product-card:hidden", children: `+${mediumOverflow}` }), _jsx("span", { className: "hidden @[240px]/product-card:inline", children: `+${inlineOverflow}` })] }), _jsx(PopoverContent, { align: "start", className: "w-auto rounded-3xl", children: _jsxs(SwatchSelector, { className: "grid grid-cols-5 gap-1", onValueChange: onVariantChange, value: selectedVariantId, children: [popoverVariants.map((variant) => (_jsx(Swatch, { unavailable: variant.available === false, value: variant.id, children: swatchImage(variant, "24px") }, variant.id))), hasPopoverOverflow && (_jsx(SwatchMore, { className: "flex size-7 items-center justify-center", count: popoverOverflow }))] }) })] })) : null] }));
+};

package/dist/compositions/product-card/product-card-compact-arm.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+interface ProductCardCompactArmProps {
+    compactFooterControl: ReactNode;
+    overrideImageUrl?: string | undefined;
+    priority?: boolean | undefined;
+    similarityScore?: number | undefined;
+    toolsActive: boolean;
+}
+/** Compact variant: below 180px, or always in compact mode. */
+export declare const ProductCardCompactArm: ({ compactFooterControl, overrideImageUrl, priority, similarityScore, toolsActive, }: ProductCardCompactArmProps) => import("react").JSX.Element;
+export {};

package/dist/compositions/product-card/product-card-compact-arm.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@instruments/materia-ui/components/box";
+import { VStack } from "@instruments/materia-ui/components/stack";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { ProductCardAction } from "./product-card-action.js";
+import { ProductCardCaption } from "./product-card-caption.js";
+import { ProductCardColorCount } from "./product-card-color-count.js";
+import { useProductCard } from "./product-card-context.js";
+import { ProductCardImageLink } from "./product-card-image-link.js";
+import { ProductCardMeta } from "./product-card-meta.js";
+import { ProductCardQuickView } from "./product-card-quick-view.js";
+import { ProductCardStatusBadge } from "./product-card-status-badge.js";
+import { ProductCardTools } from "./product-card-tools.js";
+/** Compact variant: below 180px, or always in compact mode. */
+export const ProductCardCompactArm = ({ compactFooterControl, overrideImageUrl, priority, similarityScore, toolsActive, }) => {
+    const { action, mode, onQuickView, statusBadge } = useProductCard();
+    const isCompactMode = mode === "compact";
+    const hasCompactFooterControl = compactFooterControl !== null && compactFooterControl !== undefined;
+    return (_jsxs(Box, { className: cn("flex-col", isCompactMode ? "flex" : "flex h-full @[180px]/product-card:hidden"), children: [_jsxs(Box, { className: "relative w-full overflow-hidden rounded-3xl shadow-sm", children: [_jsx(ProductCardImageLink, { imageClassName: isCompactMode ? "!p-0" : undefined, overrideImageUrl: overrideImageUrl, priority: priority, similarityScore: similarityScore }), _jsx(ProductCardTools, { active: toolsActive }), _jsx(ProductCardQuickView, { forceVisible: true, onQuickView: onQuickView })] }), _jsxs(VStack, { className: "min-h-0 flex-1 gap-2.5 px-1.5 py-2", children: [_jsxs(VStack, { className: "gap-1 px-0.5", children: [_jsxs(Box, { className: "flex items-start justify-between gap-2", children: [_jsx(VStack, { className: "min-w-0 flex-1 gap-0.5", children: _jsx(ProductCardCaption, { scale: "compact" }) }), statusBadge?.icon ? (_jsx(ProductCardStatusBadge, { ...statusBadge })) : null] }), _jsx(ProductCardMeta, {}), action ? _jsx(ProductCardAction, { ...action }) : null, mode !== "single" && (_jsx(Box, { className: "min-h-5 pt-2", children: _jsx(ProductCardColorCount, {}) }))] }), hasCompactFooterControl ? (_jsx(Box, { className: "mt-auto flex justify-end", children: compactFooterControl })) : null] })] }));
+};

package/dist/compositions/product-card/product-card-content-controls.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+/**
+ * The controls the card resolves for each of its layouts: the footer's one
+ * labelled control, the compact layout's, and the inspiration hover strip's.
+ *
+ * `primaryAction` names what the control offers; without one the card falls
+ * back to the legacy cart-only behaviour, so callers predating it render
+ * exactly as before. Neither path ever produces a disabled control: a product
+ * that can do nothing gets none at all, and `null` here is that state rather
+ * than an oversight.
+ *
+ * A product that cannot be acted on swaps that control for *Find similar*
+ * when the application can handle it. Without a handler the control resolves
+ * as for any product, so a missing capability never becomes a greyed-out one.
+ *
+ * The inspiration strip carries a cart of its own rather than the footer
+ * control, so it needs the same predicate the footer resolves.
+ */
+export declare const useProductCardControls: (onAddToCartSuccess: (() => void) | undefined) => {
+    compactFooterControl: string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+    footerControl: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+    inspirationControl: ReactNode;
+};

package/dist/compositions/product-card/product-card-content-controls.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ProductCardAddToCart } from "./product-card-add-to-cart.js";
+import { cannotAct } from "./product-card-availability.js";
+import { useProductCard } from "./product-card-context.js";
+import { ProductCardFindSimilar, ProductCardPrimaryActionControl, } from "./product-card-primary-action.js";
+/** A cart appears only where the card's action genuinely is one. */
+const actsAsCart = (primaryAction) => primaryAction === undefined || primaryAction.kind === "add-to-cart";
+/** The inspiration strip's control: *Find similar*, a non-cart action, or a cart. */
+const resolveInspirationControl = ({ availability, currentVariant, offersFindSimilar, primaryAction, product, renderAddToCart, showsCart, }) => {
+    if (offersFindSimilar) {
+        return _jsx(ProductCardFindSimilar, { onImage: true });
+    }
+    if (primaryAction && primaryAction.kind !== "add-to-cart") {
+        return (_jsx(ProductCardPrimaryActionControl, { className: "pointer-events-auto relative z-30 border-white/50 bg-white/10 text-white hover:bg-white/20" }));
+    }
+    if (showsCart) {
+        return (renderAddToCart?.({
+            available: availability === "available",
+            className: "relative z-30 shrink-0",
+            placement: "inspiration",
+            product,
+            variant: currentVariant,
+        }) ?? null);
+    }
+    return null;
+};
+/**
+ * The controls the card resolves for each of its layouts: the footer's one
+ * labelled control, the compact layout's, and the inspiration hover strip's.
+ *
+ * `primaryAction` names what the control offers; without one the card falls
+ * back to the legacy cart-only behaviour, so callers predating it render
+ * exactly as before. Neither path ever produces a disabled control: a product
+ * that can do nothing gets none at all, and `null` here is that state rather
+ * than an oversight.
+ *
+ * A product that cannot be acted on swaps that control for *Find similar*
+ * when the application can handle it. Without a handler the control resolves
+ * as for any product, so a missing capability never becomes a greyed-out one.
+ *
+ * The inspiration strip carries a cart of its own rather than the footer
+ * control, so it needs the same predicate the footer resolves.
+ */
+export const useProductCardControls = (onAddToCartSuccess) => {
+    const { availability, currentVariant, onFindSimilar, primaryAction, product, renderAddToCart, showAddToCart, } = useProductCard();
+    const offersFindSimilar = cannotAct(availability) && onFindSimilar !== undefined;
+    const showsCart = showAddToCart && !offersFindSimilar && actsAsCart(primaryAction);
+    let footerControl = null;
+    if (offersFindSimilar) {
+        footerControl = _jsx(ProductCardFindSimilar, {});
+    }
+    else if (primaryAction) {
+        footerControl = (_jsx(ProductCardPrimaryActionControl, { onAdded: onAddToCartSuccess }));
+    }
+    else if (showAddToCart) {
+        footerControl = _jsx(ProductCardAddToCart, { onAdd: onAddToCartSuccess });
+    }
+    const compactCart = showsCart
+        ? renderAddToCart?.({
+            available: availability === "available",
+            className: "shrink-0",
+            onAdded: onAddToCartSuccess,
+            placement: "compact",
+            product,
+            variant: currentVariant,
+        })
+        : null;
+    const compactFooterControl = compactCart ?? footerControl;
+    const inspirationControl = resolveInspirationControl({
+        availability,
+        currentVariant,
+        offersFindSimilar,
+        primaryAction,
+        product,
+        renderAddToCart,
+        showsCart,
+    });
+    return { compactFooterControl, footerControl, inspirationControl };
+};

package/dist/compositions/product-card/product-card-content-types.d.ts

@@ -0,0 +1,65 @@
+import type { IconProps } from "@instruments/materia-ui/components/icon";
+import type { SwatchSelector } from "@instruments/materia-ui/components/swatch-selector";
+import type { ComponentProps, ReactNode } from "react";
+/**
+ * Processing footer for {@link ProductCardMode} `"swatch"`: replaces the
+ * brand/name caption while a match or search job runs.
+ */
+interface ProductCardProcessingProps {
+    /** Right-aligned elapsed or estimated time (e.g. `"23 sec"`). */
+    elapsed?: string | undefined;
+    /** Process chip label. @default "Matching materials" */
+    label?: string | undefined;
+    /** Makes the chip a button. */
+    onClick?: (() => void) | undefined;
+}
+interface ProductCardDisplayOptions {
+    addToCart?: boolean | undefined;
+    brand?: boolean | undefined;
+    name?: boolean | undefined;
+    /**
+     * How many lines the product name may occupy before it clamps. One by
+     * default, which keeps every card in a grid the same height.
+     *
+     * Raise it to two on a grid whose names differ only at the end - a
+     * manufacturer's finish list reads *Powder Coat Finish - Black (Satin)* and
+     * *Powder Coat Finish - Warm Grey*, and one clamped line renders both as the
+     * same string. Rows stay level because the clamp is a maximum, not a
+     * reserved height.
+     */
+    nameLines?: 1 | 2 | undefined;
+    swatches?: boolean | undefined;
+}
+/**
+ * Colour role for a {@link ProductCardActionProps} notice - affects text +
+ * icon colour only.
+ * - `affirmative` - positive fulfilment state (e.g. "Ships overnight"), the
+ *   Figma green (#16a34a).
+ * - `warning` - cautionary lead time (e.g. "2–5 days from brand"); readable
+ *   amber (`warning-foreground`).
+ * - `muted` - neutral, low-emphasis note.
+ */
+type ProductCardActionTone = "affirmative" | "warning" | "muted";
+/**
+ * Props for the flexible "action notice" row in Product Card 2.0
+ * (⚡ Ships overnight · 2–5 days from brand · ⌕ Find similar).
+ *
+ * Fully prop-driven: the component renders nothing unless a `label` is
+ * supplied, so the card ships it off by default until a real data source
+ * exists.
+ */
+interface ProductCardActionProps {
+    className?: string;
+    /** When set, renders the notice as a link (e.g. "Find similar"). */
+    href?: string;
+    /** Optional leading glyph (16px). Pass any icon from `@instruments/materia-ui/icons`. */
+    icon?: IconProps["icon"];
+    /** The notice text. When omitted, the component renders `null`. */
+    label?: ReactNode;
+    /** When set, renders the notice as a button. Takes precedence over `href`. */
+    onClick?: () => void;
+    /** Colour role for the label + icon. @default "muted" */
+    tone?: ProductCardActionTone;
+}
+type ProductCardSwatchSelectorProps = Omit<ComponentProps<typeof SwatchSelector>, "value" | "onValueChange" | "children">;
+export type { ProductCardActionProps, ProductCardActionTone, ProductCardDisplayOptions, ProductCardProcessingProps, ProductCardSwatchSelectorProps, };

package/dist/compositions/product-card/product-card-content-types.js

@@ -0,0 +1 @@
+export {};

package/dist/compositions/product-card/product-card-content.d.ts

@@ -0,0 +1,7 @@
+import type { ProductCardProps } from "./product-card-types.js";
+type ProductCardContentProps = Omit<ProductCardProps, "product" | "variantId" | "mode" | "active" | "addGlyph" | "availability" | "dragging" | "labels" | "menuOpen" | "onAdd" | "onFindSimilar" | "price" | "processing" | "showSwatches" | "maxSwatches" | "onVariantChange" | "productUrl" | "renderTools" | "renderImage" | "renderAddToCart" | "dragAdapter">;
+declare const ProductCardContentBase: ({ className, similarityScore, overrideImageUrl, onAddToCartSuccess, priority, ...props }: ProductCardContentProps & {
+    onAddToCartSuccess?: (() => void) | undefined;
+}) => import("react").JSX.Element;
+export declare const ProductCardContent: import("react").MemoExoticComponent<typeof ProductCardContentBase>;
+export {};

package/dist/compositions/product-card/product-card-content.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@instruments/materia-ui/components/box";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { memo } from "react";
+import { useProductCardControls } from "./product-card-content-controls.js";
+import { useProductCard } from "./product-card-context.js";
+import { ProductCardInspirationContent } from "./product-card-inspiration-content.js";
+import { ProductCardStandardContent } from "./product-card-standard-content.js";
+import { ProductCardSwatch } from "./product-card-swatch.js";
+import { useToolsActivity } from "./product-card-tools-activity.js";
+const ProductCardContentBase = ({ className, similarityScore, overrideImageUrl, onAddToCartSuccess, priority, ...props }) => {
+    const { onBlurCapture, onFocusCapture, onPointerEnter, onPointerLeave, ...cardProps } = props;
+    const { mode, width } = useProductCard();
+    const hasFixedWidth = width !== undefined && width !== 0;
+    const { interactionHandlers, toolsActive } = useToolsActivity({
+        onBlurCapture,
+        onFocusCapture,
+        onPointerEnter,
+        onPointerLeave,
+    });
+    const { compactFooterControl, footerControl, inspirationControl } = useProductCardControls(onAddToCartSuccess);
+    // Swatch mode: the image-first tile owns its own shell and chrome.
+    if (mode === "swatch") {
+        return (_jsx(Box, { className: cn(hasFixedWidth ? "shrink-0" : "w-full", className), style: hasFixedWidth ? { width: `${width}px` } : undefined, ...cardProps, children: _jsx(ProductCardSwatch, { overrideImageUrl: overrideImageUrl, priority: priority }) }));
+    }
+    if (mode === "inspiration") {
+        return (_jsx(ProductCardInspirationContent, { className: className, inspirationControl: inspirationControl, interactionHandlers: interactionHandlers, priority: priority, similarityScore: similarityScore, toolsActive: toolsActive }));
+    }
+    return (_jsx(ProductCardStandardContent, { cardProps: cardProps, className: className, compactFooterControl: compactFooterControl, footerControl: footerControl, interactionHandlers: interactionHandlers, overrideImageUrl: overrideImageUrl, priority: priority, similarityScore: similarityScore, toolsActive: toolsActive }));
+};
+export const ProductCardContent = memo(ProductCardContentBase);

package/dist/compositions/product-card/product-card-context.d.ts

@@ -0,0 +1,11 @@
+import type { ProductCardContextValue } from "./product-card-types.js";
+/**
+ * ProductCardContext UI component.
+ * Import from "@instruments/materia-ui/compositions/product-card".
+ */
+export declare const ProductCardContext: import("react").Context<ProductCardContextValue | null>;
+/**
+ * useProductCard React hook.
+ * Import from "@instruments/materia-ui/compositions/product-card".
+ */
+export declare const useProductCard: () => ProductCardContextValue;

package/dist/compositions/product-card/product-card-context.js

@@ -0,0 +1,18 @@
+"use client";
+import { createContext, use } from "react";
+/**
+ * ProductCardContext UI component.
+ * Import from "@instruments/materia-ui/compositions/product-card".
+ */
+export const ProductCardContext = createContext(null);
+/**
+ * useProductCard React hook.
+ * Import from "@instruments/materia-ui/compositions/product-card".
+ */
+export const useProductCard = () => {
+    const context = use(ProductCardContext);
+    if (!context) {
+        throw new Error("useProductCard must be used within a ProductCard");
+    }
+    return context;
+};

package/dist/compositions/product-card/product-card-cost.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from "react";
+/** True when the application supplied a price to show. */
+export declare const hasProductCardPrice: (price: ReactNode) => boolean;
+export declare const ProductCardCost: () => import("react").JSX.Element | null;

package/dist/compositions/product-card/product-card-cost.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@instruments/materia-ui/components/box";
+import { useProductCard } from "./product-card-context.js";
+/** True when the application supplied a price to show. */
+export const hasProductCardPrice = (price) => price !== undefined && price !== null && price !== false;
+export const ProductCardCost = () => {
+    const { price, product } = useProductCard();
+    const { costIndicator } = product;
+    // A price from the application replaces the indicative tier: showing both
+    // would state the cost twice in two different shapes.
+    if (hasProductCardPrice(price)) {
+        return _jsx(Box, { as: "span", children: price });
+    }
+    if (costIndicator === undefined ||
+        costIndicator === null ||
+        costIndicator === "") {
+        return null;
+    }
+    return _jsx(Box, { as: "span", children: costIndicator });
+};

package/dist/compositions/product-card/product-card-full-arm.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+interface ProductCardFullArmProps {
+    footerControl: ReactNode;
+    overrideImageUrl?: string | undefined;
+    priority?: boolean | undefined;
+    similarityScore?: number | undefined;
+    toolsActive: boolean;
+}
+/**
+ * ONE arm from 180px up. Medium and full were structurally identical - same
+ * surface, same image block, same caption - and differed only in chrome and in
+ * WHICH SECTIONS EXIST. Two copies meant every card mounted its image twice
+ * (three times with compact), and with the default `<img>` renderer
+ * `display:none` does not prevent a fetch: a 48-card grid pulled up to 144
+ * images nobody could see. It also meant a pinned install shot silently reset
+ * when a resize crossed 240px, because the other copy held fresh state.
+ *
+ * Chrome now varies by container query; each full-only section carries its own
+ * `@[240px]` visibility, so the overlay trio and the card's own image land ONCE
+ * across medium and full.
+ *
+ * The COMPACT arm below 180px is still a separate subtree, so its swatch row
+ * and control do mount a second time. Both are lazy or inert - measured on the
+ * Base story: ten `<img>`, five of them in the hidden arm, none of those five
+ * fetched - and the popover mounts nothing until it opens.
+ */
+export declare const ProductCardFullArm: ({ footerControl, overrideImageUrl, priority, similarityScore, toolsActive, }: ProductCardFullArmProps) => import("react").JSX.Element;
+export {};

package/dist/compositions/product-card/product-card-full-arm.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@instruments/materia-ui/components/box";
+import { HStack, VStack } from "@instruments/materia-ui/components/stack";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { ProductCardAction } from "./product-card-action.js";
+import { ProductCardCaption } from "./product-card-caption.js";
+import { ProductCardColorCount } from "./product-card-color-count.js";
+import { useProductCard } from "./product-card-context.js";
+import { ProductCardImageLink } from "./product-card-image-link.js";
+import { ProductCardMeta } from "./product-card-meta.js";
+import { ProductCardQuickView } from "./product-card-quick-view.js";
+import { ProductCardStatusBadge } from "./product-card-status-badge.js";
+import { ProductCardTools } from "./product-card-tools.js";
+/**
+ * ONE arm from 180px up. Medium and full were structurally identical - same
+ * surface, same image block, same caption - and differed only in chrome and in
+ * WHICH SECTIONS EXIST. Two copies meant every card mounted its image twice
+ * (three times with compact), and with the default `<img>` renderer
+ * `display:none` does not prevent a fetch: a 48-card grid pulled up to 144
+ * images nobody could see. It also meant a pinned install shot silently reset
+ * when a resize crossed 240px, because the other copy held fresh state.
+ *
+ * Chrome now varies by container query; each full-only section carries its own
+ * `@[240px]` visibility, so the overlay trio and the card's own image land ONCE
+ * across medium and full.
+ *
+ * The COMPACT arm below 180px is still a separate subtree, so its swatch row
+ * and control do mount a second time. Both are lazy or inert - measured on the
+ * Base story: ten `<img>`, five of them in the hidden arm, none of those five
+ * fetched - and the popover mounts nothing until it opens.
+ */
+export const ProductCardFullArm = ({ footerControl, overrideImageUrl, priority, similarityScore, toolsActive, }) => {
+    const { action, active, mode, onQuickView, statusBadge } = useProductCard();
+    return (_jsxs(VStack, { className: cn("bg-card duration-normal h-full overflow-hidden rounded-3xl transition-shadow ease-in-out @[240px]/product-card:rounded-4xl", mode === "compact" ? "hidden" : "hidden @[180px]/product-card:flex", active ? "shadow-lg" : "shadow-sm hover:shadow-md"), gap: "none", children: [_jsxs(Box, { className: "relative w-full", children: [_jsx(ProductCardImageLink, { overrideImageUrl: overrideImageUrl, priority: priority, similarityScore: similarityScore }), statusBadge && !statusBadge.icon ? (_jsx(ProductCardStatusBadge, { ...statusBadge })) : null, _jsx(ProductCardTools, { active: toolsActive }), _jsx(ProductCardQuickView, { onQuickView: onQuickView })] }), _jsx(VStack, { className: "flex-1 pt-2 pb-4", gap: "none", children: _jsxs(VStack, { className: "min-h-0 flex-1 gap-2.5 px-4 @[240px]/product-card:gap-4", gap: "none", children: [_jsxs(VStack, { className: "gap-1 px-0.5", gap: "none", children: [_jsxs(Box, { className: "flex items-start justify-between gap-2", children: [_jsx(VStack, { className: "min-w-0 flex-1", gap: "none", children: _jsx(ProductCardCaption, {}) }), statusBadge?.icon ? (_jsx(ProductCardStatusBadge, { ...statusBadge })) : null] }), _jsx(ProductCardMeta, {}), action ? _jsx(ProductCardAction, { ...action }) : null, mode !== "single" && (_jsx(Box, { className: "pt-2", children: _jsx(Box, { className: "min-h-5", children: _jsx(ProductCardColorCount, {}) }) }))] }), footerControl !== null && footerControl !== undefined ? (_jsx(HStack, { className: "mt-auto", children: footerControl })) : null] }) })] }));
+};

package/dist/compositions/product-card/product-card-image-link.d.ts

@@ -0,0 +1,9 @@
+interface ProductCardImageLinkProps {
+    imageClassName?: string | undefined;
+    overrideImageUrl?: string | undefined;
+    priority?: boolean | undefined;
+    similarityScore?: number | undefined;
+}
+/** The card's image, wrapped in the link to the product page. */
+export declare const ProductCardImageLink: ({ imageClassName, overrideImageUrl, priority, similarityScore, }: ProductCardImageLinkProps) => import("react").JSX.Element;
+export {};

package/dist/compositions/product-card/product-card-image-link.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useProductCard } from "./product-card-context.js";
+import { ProductCardImage } from "./product-card-image.js";
+import { ProductCardLink } from "./product-card-link.js";
+/** The card's image, wrapped in the link to the product page. */
+export const ProductCardImageLink = ({ imageClassName, overrideImageUrl, priority, similarityScore, }) => {
+    const { availability, currentVariant, linkComponent, linkPrefetch, mode, onCardClick, productUrl, } = useProductCard();
+    // For internal URLs use the injected link component (e.g. next/link);
+    // for external URLs always use a plain <a>.
+    // `LinkComp` is a polymorphic ElementType; createElement renders it inside
+    // `ProductCardLink` without JSX's children-typing narrowing to `never` on
+    // the ComponentType arm.
+    const LinkComp = productUrl.startsWith("http") ? "a" : linkComponent;
+    return (_jsx(ProductCardLink, { blocked: availability === "blocked", className: "block w-full", href: productUrl, label: `View ${currentVariant.name}`, linkComponent: LinkComp, onActivate: onCardClick, prefetch: linkPrefetch, children: _jsx(ProductCardImage, { className: imageClassName, priority: priority, ...(mode === "single"
+                ? {
+                    overrideImageUrl,
+                    showSimilarityScore: similarityScore !== undefined,
+                    similarityScore,
+                }
+                : {}) }) }));
+};