@snowcone-app/ui 0.8.2 → 0.9.0

package/dist/index.js

@@ -4554,6 +4554,7 @@ function AddToCart({
   text = "Add to Bag",
   loadingText = "Adding...",
   successText = "Added!",
+  errorText = "Couldn't add \u2014 try again",
   disabled = false,
   className = "",
   quantity = 1,
@@ -4563,8 +4564,10 @@ function AddToCart({
 }) {
   const context = useProduct();
   const shopContext = useShopOptional();
-  const [loading, setLoading] = useState12(false);
-  const [success, setSuccess] = useState12(false);
+  const [status, setStatus] = useState12("idle");
+  const [errorMessage, setErrorMessage] = useState12(null);
+  const loading = status === "adding";
+  const success = status === "added";
   useEffect12(() => {
     checkProviders(
       "AddToCart",
@@ -4587,7 +4590,8 @@ function AddToCart({
   const handleClick = async () => {
     if (isDisabled || !product) return;
     try {
-      setLoading(true);
+      setStatus("adding");
+      setErrorMessage(null);
       const cartDetail = createCartDetail({
         productId: product.id,
         quantity,
@@ -4598,20 +4602,23 @@ function AddToCart({
       if (!cartDetail) {
         throw new Error("Invalid selection - unable to create cart detail");
       }
-      await simulateCartOperation(simulateDelay);
-      onClick?.(cartDetail);
-      setSuccess(true);
+      if (onClick) {
+        await onClick(cartDetail);
+      } else {
+        await simulateCartOperation(simulateDelay);
+      }
+      setStatus("added");
       setTimeout(() => {
-        setSuccess(false);
+        setStatus((s) => s === "added" ? "idle" : s);
       }, 2e3);
     } catch (error) {
-      onError?.(error);
-      console.error("Add to cart failed:", error);
-    } finally {
-      setLoading(false);
+      const err = error instanceof Error ? error : new Error(String(error));
+      setStatus("error");
+      setErrorMessage(err.message);
+      onError?.(err);
     }
   };
-  const buttonText = loading ? loadingText : success ? successText : text;
+  const buttonText = loading ? loadingText : success ? successText : status === "error" ? errorText : text;
   const defaultStyles = "w-full bg-primary text-primary-foreground hover:bg-primary/90 px-6 py-3 rounded-button font-medium transition-colors";
   const buttonClasses = `
     ${defaultStyles}
@@ -4622,6 +4629,7 @@ function AddToCart({
   const getAriaLabel = () => {
     if (loading) return loadingText;
     if (success) return successText;
+    if (status === "error") return `${errorText} - ${product?.name || "product"}`;
     if (!product) return text;
     return `${text} - ${product.name || "product"}`;
   };
@@ -4635,9 +4643,11 @@ function AddToCart({
         onClick: handleClick,
         "aria-label": getAriaLabel(),
         "aria-busy": loading,
+        "data-add-to-cart": status,
         children: buttonText
       }
-    )
+    ),
+    status === "error" && errorMessage && /* @__PURE__ */ jsx42("p", { role: "alert", className: "mt-2 text-sm text-destructive", children: errorMessage })
   ] });
 }
 
@@ -5383,7 +5393,12 @@ function PlacementClipShapeSelector() {
 
 // src/composed/PlacementTabs.tsx
 import { useRef as useRef10, useState as useState16, useLayoutEffect as useLayoutEffect2 } from "react";
-import { jsx as jsx50, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx50, jsxs as jsxs32 } from "react/jsx-runtime";
+function linkedPlacementsLabel(count) {
+  return count === 2 ? "Both sides" : `All ${count} areas`;
+}
+var ACTION_CLASS = "transition-colors duration-200 cursor-pointer text-muted-foreground hover:text-foreground underline underline-offset-4 decoration-muted-foreground/40 hover:decoration-foreground";
+var PILL_CLASS = "inline-flex items-center rounded-full bg-foreground/[0.08] px-3 py-1 font-medium text-foreground";
 function PlacementTabs({
   placements,
   selectedPlacement,
@@ -5391,7 +5406,13 @@ function PlacementTabs({
   isDesktop = false,
   toolbarPlaceholderId = "toolbar-placeholder",
   toolbarSize = 120,
-  className = ""
+  className = "",
+  linked,
+  onSplitAll,
+  onLinkAll,
+  linkedLabel,
+  splitAllLabel = "Customize separately",
+  linkAllLabel = "Use one design for all"
 }) {
   const containerRef = useRef10(null);
   const [lineHeight, setLineHeight] = useState16(24);
@@ -5408,7 +5429,7 @@ function PlacementTabs({
     if (isDesktop) {
       return null;
     }
-    return /* @__PURE__ */ jsx50("div", { className: `flex justify-end w-full ${className}`, children: /* @__PURE__ */ jsx50(
+    return /* @__PURE__ */ jsx50("div", { className: `flex justify-end w-full ${className}`, "data-placement-tabs": true, children: /* @__PURE__ */ jsx50(
       "span",
       {
         id: toolbarPlaceholderId,
@@ -5417,16 +5438,68 @@ function PlacementTabs({
       }
     ) });
   }
+  const dataLinked = linked === void 0 ? void 0 : linked ? "true" : "false";
+  const labels = placements.map((p) => p.label);
+  const renderItems = (tabClass) => {
+    if (linked === true) {
+      return /* @__PURE__ */ jsxs32(Fragment9, { children: [
+        /* @__PURE__ */ jsx50(
+          "span",
+          {
+            className: `${tabClass} ${PILL_CLASS}`,
+            "data-placement-pill": true,
+            title: labels.join(" \xB7 "),
+            "aria-label": `One design on ${labels.join(", ")}`,
+            children: linkedLabel ?? linkedPlacementsLabel(placements.length)
+          }
+        ),
+        onSplitAll && /* @__PURE__ */ jsx50(
+          "button",
+          {
+            type: "button",
+            onClick: onSplitAll,
+            className: `${tabClass} ${ACTION_CLASS}`,
+            "data-action": "split-all",
+            children: splitAllLabel
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsxs32(Fragment9, { children: [
+      placements.map((p) => /* @__PURE__ */ jsx50(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPlacementChange(p.label),
+          "data-placement-tab": p.label,
+          "aria-pressed": selectedPlacement === p.label,
+          className: `${tabClass} transition-all duration-200 cursor-pointer border-b-2 ${selectedPlacement === p.label ? "text-foreground border-primary" : "text-foreground/70 hover:text-foreground border-muted-foreground/20 hover:border-muted-foreground/40"}`,
+          children: p.label
+        },
+        p.label
+      )),
+      linked === false && onLinkAll && /* @__PURE__ */ jsx50(
+        "button",
+        {
+          type: "button",
+          onClick: onLinkAll,
+          className: `${tabClass} ${ACTION_CLASS}`,
+          "data-action": "link-all",
+          children: linkAllLabel
+        }
+      )
+    ] });
+  };
   if (isDesktop) {
-    return /* @__PURE__ */ jsx50("div", { className: `flex flex-wrap gap-x-3 text-sm leading-relaxed w-full ${className}`, children: placements.map((p) => /* @__PURE__ */ jsx50(
-      "button",
+    return /* @__PURE__ */ jsx50(
+      "div",
       {
-        onClick: () => onPlacementChange(p.label),
-        className: `transition-all duration-200 cursor-pointer border-b-2 ${selectedPlacement === p.label ? "text-foreground border-primary" : "text-foreground/70 hover:text-foreground border-muted-foreground/20 hover:border-muted-foreground/40"}`,
-        children: p.label
-      },
-      p.label
-    )) });
+        className: `flex flex-wrap items-center gap-x-3 gap-y-1 text-sm leading-relaxed w-full ${className}`,
+        "data-placement-tabs": true,
+        "data-linked": dataLinked,
+        children: renderItems("")
+      }
+    );
   }
   const linesForToolbar = Math.ceil(toolbarSize / lineHeight);
   const shapeInsetPx = linesForToolbar * lineHeight;
@@ -5435,6 +5508,8 @@ function PlacementTabs({
     {
       ref: containerRef,
       className: `flex overflow-hidden text-sm leading-relaxed w-full ${className}`,
+      "data-placement-tabs": true,
+      "data-linked": dataLinked,
       children: /* @__PURE__ */ jsxs32("p", { className: "m-0 w-full", children: [
         /* @__PURE__ */ jsx50(
           "span",
@@ -5453,15 +5528,7 @@ function PlacementTabs({
             )
           }
         ),
-        placements.map((p) => /* @__PURE__ */ jsx50(
-          "button",
-          {
-            onClick: () => onPlacementChange(p.label),
-            className: `inline transition-all duration-200 cursor-pointer mr-3 border-b-2 ${selectedPlacement === p.label ? "text-foreground border-primary" : "text-foreground/70 hover:text-foreground border-muted-foreground/20 hover:border-muted-foreground/40"}`,
-            children: p.label
-          },
-          p.label
-        ))
+        renderItems("inline mr-3")
       ] })
     }
   );
@@ -8735,7 +8802,7 @@ var canvasExportService = new CanvasExportService();
 
 // src/components/CanvasIsolationBoundary.tsx
 import React41, { useEffect as useEffect26 } from "react";
-import { Fragment as Fragment9, jsx as jsx54, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx54, jsxs as jsxs33 } from "react/jsx-runtime";
 function CanvasIsolationConfigurator({
   placementName: placementNameProp,
   onArtworkChange,
@@ -8788,7 +8855,7 @@ function CanvasIsolationConfigurator({
 }
 var IsolatedChildren = React41.memo(
   function IsolatedChildren2({ children }) {
-    return /* @__PURE__ */ jsx54(Fragment9, { children });
+    return /* @__PURE__ */ jsx54(Fragment10, { children });
   },
   // Custom comparison: ALWAYS return true (never re-render due to parent changes)
   // This is intentional - children should use refs/services for updates that need to bypass this
@@ -8801,7 +8868,7 @@ function CanvasIsolationBoundary({
   clearImageBitmapCache,
   serializeStateForServer
 }) {
-  return /* @__PURE__ */ jsxs33(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs33(Fragment10, { children: [
     /* @__PURE__ */ jsx54(
       CanvasIsolationConfigurator,
       {
@@ -9049,7 +9116,7 @@ import {
   useCallback as useCallback17
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment10, jsx as jsx56, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx56, jsxs as jsxs35 } from "react/jsx-runtime";
 var BANDS = [
   { rgb: "230, 45, 55", delay: "-0.0s" },
   // red
@@ -9296,7 +9363,7 @@ var LoadingOverlayPrismCandy = memo2(function LoadingOverlayPrismCandy2({
   let fadeClass = "";
   if (!visible) fadeClass = "candy-fade-out";
   else if (mounted) fadeClass = "candy-fade-in";
-  return /* @__PURE__ */ jsxs35(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs35(Fragment11, { children: [
     /* @__PURE__ */ jsx56(
       "div",
       {
@@ -9445,7 +9512,7 @@ import {
   describeProductArtAlignment,
   getSnapPoints
 } from "@snowcone-app/sdk";
-import { Fragment as Fragment11, jsx as jsx58, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx58, jsxs as jsxs36 } from "react/jsx-runtime";
 function ArtAlignment({
   src: propSrc,
   artworkAspectRatio: propAspectRatio,
@@ -9818,7 +9885,7 @@ function ArtAlignment({
             loading: "eager"
           }
         ),
-        isReady && maskDimensions.width > 0 && /* @__PURE__ */ jsxs36(Fragment11, { children: [
+        isReady && maskDimensions.width > 0 && /* @__PURE__ */ jsxs36(Fragment12, { children: [
           /* @__PURE__ */ jsx58("div", { style: overlayStyle }),
           /* @__PURE__ */ jsx58(
             "img",
@@ -10654,14 +10721,14 @@ var HeroProductImage = memo3(function HeroProductImage2({
 
 // src/composed/SafeImg.tsx
 import React45, { useEffect as useEffect33, useState as useState32 } from "react";
-import { Fragment as Fragment12, jsx as jsx62 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx62 } from "react/jsx-runtime";
 var SafeImg = React45.forwardRef(
   function SafeImg2({ fallback = null, onError, src, ...rest }, ref) {
     const [failed, setFailed] = useState32(false);
     useEffect33(() => {
       setFailed(false);
     }, [src]);
-    if (failed) return /* @__PURE__ */ jsx62(Fragment12, { children: fallback });
+    if (failed) return /* @__PURE__ */ jsx62(Fragment13, { children: fallback });
     return /* @__PURE__ */ jsx62(
       "img",
       {
@@ -10990,7 +11057,7 @@ import { useRefinementList, useRange, useStats as useStats2 } from "react-instan
 import { X as LucideX2, SlidersHorizontal as LucideSlidersHorizontal2 } from "lucide-react";
 import { useState as useState35, useEffect as useEffect37 } from "react";
 import * as Slider2 from "@radix-ui/react-slider";
-import { Fragment as Fragment13, jsx as jsx68, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx68, jsxs as jsxs44 } from "react/jsx-runtime";
 var XIcon2 = LucideX2;
 function FiltersDrawer({ isOpen, onClose }) {
   const [showCounts, setShowCounts] = useState35(false);
@@ -11015,7 +11082,7 @@ function FiltersDrawer({ isOpen, onClose }) {
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [isOpen, onClose]);
-  return /* @__PURE__ */ jsxs44(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs44(Fragment14, { children: [
     /* @__PURE__ */ jsx68(
       "div",
       {
@@ -11308,10 +11375,10 @@ function PriceSection() {
 }
 
 // src/composed/search/Filters.tsx
-import { Fragment as Fragment14, jsx as jsx69, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx69, jsxs as jsxs45 } from "react/jsx-runtime";
 function Filters({ buttonClassName, buttonText }) {
   const [isOpen, setIsOpen] = useState36(false);
-  return /* @__PURE__ */ jsxs45(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs45(Fragment15, { children: [
     /* @__PURE__ */ jsx69(
       FiltersButton,
       {
@@ -11410,7 +11477,7 @@ import { useState as useState39, useEffect as useEffect39 } from "react";
 // src/composed/zoom/ZoomOverlay.tsx
 import { useState as useState37, useCallback as useCallback20 } from "react";
 import { Plus as LucidePlus2, Minus as LucideMinus2 } from "lucide-react";
-import { Fragment as Fragment15, jsx as jsx71, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx71, jsxs as jsxs47 } from "react/jsx-runtime";
 var PlusIcon2 = LucidePlus2;
 var MinusIcon2 = LucideMinus2;
 function ZoomOverlay({
@@ -11469,7 +11536,7 @@ function ZoomOverlay({
   const isZoomed = zoomedImageIndex === imageIndex;
   const isHovered = hoveredImageIndex === imageIndex;
   const cursorStyle = isLargeTouchDevice ? "pointer" : isTouchDevice ? "default" : "none";
-  return /* @__PURE__ */ jsxs47(Fragment15, { children: [
+  return /* @__PURE__ */ jsxs47(Fragment16, { children: [
     /* @__PURE__ */ jsx71("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement }),
     /* @__PURE__ */ jsx71(
       "div",
@@ -11564,7 +11631,7 @@ import {
   TransformComponent as OriginalTransformComponent
 } from "react-zoom-pan-pinch";
 import { X as X2 } from "lucide-react";
-import { Fragment as Fragment16, jsx as jsx72, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx72, jsxs as jsxs48 } from "react/jsx-runtime";
 var TransformWrapper = OriginalTransformWrapper;
 var TransformComponent = OriginalTransformComponent;
 var EnhancedImageViewer = ({
@@ -11883,7 +11950,7 @@ var EnhancedImageViewer = ({
                         };
                         const nextIndex = findNextAvailableIndex(currentIndex, 1);
                         const prevIndex = findNextAvailableIndex(currentIndex, -1);
-                        return /* @__PURE__ */ jsxs48(Fragment16, { children: [
+                        return /* @__PURE__ */ jsxs48(Fragment17, { children: [
                           /* @__PURE__ */ jsx72(
                             "button",
                             {
@@ -11985,7 +12052,7 @@ var EnhancedImageViewer = ({
 };
 
 // src/composed/zoom/ResponsiveZoom.tsx
-import { Fragment as Fragment17, jsx as jsx73, jsxs as jsxs49 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx73, jsxs as jsxs49 } from "react/jsx-runtime";
 function ResponsiveZoom({
   imageIndex,
   children,
@@ -12026,7 +12093,7 @@ function ResponsiveZoom({
       }
     }
   };
-  return /* @__PURE__ */ jsxs49(Fragment17, { children: [
+  return /* @__PURE__ */ jsxs49(Fragment18, { children: [
     isTouchDevice ? /* @__PURE__ */ jsx73(
       "div",
       {
@@ -12967,7 +13034,7 @@ function HeroCarousel({
 
 // src/composed/grids/MasonryGrid.tsx
 import { useState as useState42, useEffect as useEffect42, useMemo as useMemo16 } from "react";
-import { Fragment as Fragment18, jsx as jsx76 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx76 } from "react/jsx-runtime";
 var BREAKPOINTS = {
   sm: 640,
   md: 768,
@@ -13039,7 +13106,7 @@ function MasonryGrid({
   );
   if (items.length === 0) {
     if (emptyContent) {
-      return /* @__PURE__ */ jsx76(Fragment18, { children: emptyContent });
+      return /* @__PURE__ */ jsx76(Fragment19, { children: emptyContent });
     }
     return null;
   }
@@ -14208,7 +14275,7 @@ function RadiusScale({ className = "" }) {
 
 // src/design-system/ThemeSwitcher.tsx
 import { useState as useState45, useEffect as useEffect46 } from "react";
-import { Fragment as Fragment19, jsx as jsx87, jsxs as jsxs60 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx87, jsxs as jsxs60 } from "react/jsx-runtime";
 function readThemeFromDOM() {
   if (typeof document === "undefined") {
     return { themeName: "Linear", isDark: false };
@@ -14282,7 +14349,7 @@ function ThemeSwitcher({ className = "", showBaseThemesOnly = true }) {
           ]
         }
       ),
-      isOpen && /* @__PURE__ */ jsxs60(Fragment19, { children: [
+      isOpen && /* @__PURE__ */ jsxs60(Fragment20, { children: [
         /* @__PURE__ */ jsx87(
           "div",
           {
@@ -14406,7 +14473,7 @@ function usePersonalizationContext() {
 }
 
 // src/personalization/PersonalizationProvider.tsx
-import { Fragment as Fragment20, jsx as jsx89, jsxs as jsxs62 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx89, jsxs as jsxs62 } from "react/jsx-runtime";
 function createBridgeFromCanvas(canvasModule) {
   const { useEditor, useCommands, useImageBinding } = canvasModule;
   function TextBinder({ name, value }) {
@@ -14494,7 +14561,7 @@ function createBridgeFromCanvas(canvasModule) {
     return null;
   }
   return function PersonalizationBridge({ fields = [], values = {} } = {}) {
-    return /* @__PURE__ */ jsx89(Fragment20, { children: fields.map((field) => {
+    return /* @__PURE__ */ jsx89(Fragment21, { children: fields.map((field) => {
       if (field.type === "text") {
         return /* @__PURE__ */ jsx89(TextBinder, { name: field.name, value: values[field.name] ?? "" }, `text-${field.name}`);
       }
@@ -15046,6 +15113,7 @@ export {
   isWideMonitor,
   kbdVariants,
   linkVariants,
+  linkedPlacementsLabel,
   listProducts4 as listProducts,
   normalizeHex,
   observe,