@enadhq/enad-react-sdk 0.0.6 → 1.0.2

package/dist/client/storefront/components/country-redirect.d.ts

@@ -0,0 +1,30 @@
+export interface CountryInfo {
+    code: string;
+    name: string;
+    flag?: string;
+}
+export interface CountryRedirectProps {
+    /** The country detected from the visitor's location */
+    detectedCountry: CountryInfo;
+    /** The country the store is currently serving */
+    currentCountry: CountryInfo;
+    /** URL to redirect to for the detected country's store */
+    redirectUrl: string;
+    /** Called before navigating to the redirect URL */
+    onAccept?: () => void;
+    /** Called when the visitor dismisses the banner */
+    onDismiss?: () => void;
+    /** localStorage key for persisting dismissal. Set to `false` to disable persistence. */
+    persistKey?: string | false;
+    labels?: {
+        /** e.g. "It looks like you're visiting from {country}." */
+        message?: string;
+        /** e.g. "Go to {country} store" */
+        accept?: string;
+        /** e.g. "Stay on {country} store" */
+        dismiss?: string;
+    };
+    className?: string;
+}
+export declare function CountryRedirect({ detectedCountry, currentCountry, redirectUrl, onAccept, onDismiss, persistKey, labels, className, }: CountryRedirectProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=country-redirect.d.ts.map

package/dist/client/storefront/components/country-redirect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"country-redirect.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/components/country-redirect.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,oBAAoB;IACnC,uDAAuD;IACvD,eAAe,EAAE,WAAW,CAAA;IAC5B,iDAAiD;IACjD,cAAc,EAAE,WAAW,CAAA;IAC3B,0DAA0D;IAC1D,WAAW,EAAE,MAAM,CAAA;IACnB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,wFAAwF;IACxF,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IAC3B,MAAM,CAAC,EAAE;QACP,2DAA2D;QAC3D,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,mCAAmC;QACnC,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,qCAAqC;QACrC,OAAO,CAAC,EAAE,MAAM,CAAA;KACjB,CAAA;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAsBD,wBAAgB,eAAe,CAAC,EAC9B,eAAe,EACf,cAAc,EACd,WAAW,EACX,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAW,EACX,SAAS,GACV,EAAE,oBAAoB,kDA8FtB"}

package/dist/client/storefront/components/country-redirect.mjs

@@ -0,0 +1,121 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../ui/utils";
+import { useIcon } from "../../icons/icon-context";
+const STORAGE_KEY_DEFAULT = "enad-country-redirect-dismissed";
+function isDismissed(key) {
+  if (key === false) return false;
+  try {
+    return localStorage.getItem(key || STORAGE_KEY_DEFAULT) === "true";
+  } catch {
+    return false;
+  }
+}
+function persistDismissal(key) {
+  if (key === false) return;
+  try {
+    localStorage.setItem(key || STORAGE_KEY_DEFAULT, "true");
+  } catch {
+  }
+}
+function CountryRedirect({
+  detectedCountry,
+  currentCountry,
+  redirectUrl,
+  onAccept,
+  onDismiss,
+  persistKey,
+  labels = {},
+  className
+}) {
+  const CloseIcon = useIcon("close");
+  const GlobeIcon = useIcon("globe");
+  const [visible, setVisible] = React.useState(false);
+  React.useEffect(() => {
+    if (detectedCountry.code === currentCountry.code) return;
+    if (isDismissed(persistKey ?? STORAGE_KEY_DEFAULT)) return;
+    setVisible(true);
+  }, [detectedCountry.code, currentCountry.code, persistKey]);
+  const dismiss = React.useCallback(() => {
+    setVisible(false);
+    persistDismissal(persistKey ?? STORAGE_KEY_DEFAULT);
+    onDismiss?.();
+  }, [persistKey, onDismiss]);
+  const accept = React.useCallback(() => {
+    onAccept?.();
+    window.location.href = redirectUrl;
+  }, [onAccept, redirectUrl]);
+  if (!visible) return null;
+  const message = labels.message ?? `It looks like you're visiting from ${detectedCountry.flag ? `${detectedCountry.flag} ` : ""}${detectedCountry.name}.`;
+  const acceptLabel = labels.accept ?? `Go to ${detectedCountry.name} store`;
+  const dismissLabel = labels.dismiss ?? `Stay on ${currentCountry.name} store`;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "country-redirect",
+      role: "status",
+      "aria-label": "Country store suggestion",
+      className: cn(
+        "font-enad animate-slide-down-banner",
+        "border-b border-(--enad-border-color) bg-(--enad-surface, var(--background))",
+        "motion-reduce:animate-none",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-3 sm:px-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+          /* @__PURE__ */ jsx(GlobeIcon, { className: "size-5 shrink-0 text-(--enad-text-muted-color)", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-(--enad-text-primary-color) truncate", children: message })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: accept,
+              className: cn(
+                "rounded-(--enad-border-radius) bg-(--enad-button-bg) px-3.5 py-1.5 text-sm font-medium text-(--enad-button-color)",
+                "hover:bg-(--enad-button-hover-bg) transition-colors",
+                "motion-reduce:transition-none"
+              ),
+              children: acceptLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: dismiss,
+              className: cn(
+                "rounded-(--enad-border-radius) border border-(--enad-border-color) bg-transparent px-3.5 py-1.5 text-sm font-medium text-(--enad-text-primary-color)",
+                "hover:bg-(--enad-hover-bg) transition-colors",
+                "motion-reduce:transition-none",
+                "hidden sm:inline-flex"
+              ),
+              children: dismissLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: dismiss,
+              "aria-label": "Dismiss",
+              className: cn(
+                "inline-flex items-center justify-center rounded-(--enad-border-radius) p-1.5 text-(--enad-text-muted-color)",
+                "hover:text-(--enad-text-primary-color) hover:bg-(--enad-hover-bg) transition-colors",
+                "motion-reduce:transition-none",
+                "sm:hidden"
+              ),
+              children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4", "aria-hidden": "true" })
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  CountryRedirect
+};
+//# sourceMappingURL=country-redirect.mjs.map

package/dist/client/storefront/components/country-redirect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/components/country-redirect.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"../../ui/utils\"\nimport { useIcon } from \"../../icons/icon-context\"\n\nexport interface CountryInfo {\n  code: string\n  name: string\n  flag?: string\n}\n\nexport interface CountryRedirectProps {\n  /** The country detected from the visitor's location */\n  detectedCountry: CountryInfo\n  /** The country the store is currently serving */\n  currentCountry: CountryInfo\n  /** URL to redirect to for the detected country's store */\n  redirectUrl: string\n  /** Called before navigating to the redirect URL */\n  onAccept?: () => void\n  /** Called when the visitor dismisses the banner */\n  onDismiss?: () => void\n  /** localStorage key for persisting dismissal. Set to `false` to disable persistence. */\n  persistKey?: string | false\n  labels?: {\n    /** e.g. \"It looks like you're visiting from {country}.\" */\n    message?: string\n    /** e.g. \"Go to {country} store\" */\n    accept?: string\n    /** e.g. \"Stay on {country} store\" */\n    dismiss?: string\n  }\n  className?: string\n}\n\nconst STORAGE_KEY_DEFAULT = \"enad-country-redirect-dismissed\"\n\nfunction isDismissed(key: string | false): boolean {\n  if (key === false) return false\n  try {\n    return localStorage.getItem(key || STORAGE_KEY_DEFAULT) === \"true\"\n  } catch {\n    return false\n  }\n}\n\nfunction persistDismissal(key: string | false): void {\n  if (key === false) return\n  try {\n    localStorage.setItem(key || STORAGE_KEY_DEFAULT, \"true\")\n  } catch {\n    // storage unavailable (SSR, private browsing quota exceeded, etc.)\n  }\n}\n\nexport function CountryRedirect({\n  detectedCountry,\n  currentCountry,\n  redirectUrl,\n  onAccept,\n  onDismiss,\n  persistKey,\n  labels = {},\n  className,\n}: CountryRedirectProps) {\n  const CloseIcon = useIcon(\"close\")\n  const GlobeIcon = useIcon(\"globe\")\n\n  const [visible, setVisible] = React.useState(false)\n\n  React.useEffect(() => {\n    if (detectedCountry.code === currentCountry.code) return\n    if (isDismissed(persistKey ?? STORAGE_KEY_DEFAULT)) return\n    setVisible(true)\n  }, [detectedCountry.code, currentCountry.code, persistKey])\n\n  const dismiss = React.useCallback(() => {\n    setVisible(false)\n    persistDismissal(persistKey ?? STORAGE_KEY_DEFAULT)\n    onDismiss?.()\n  }, [persistKey, onDismiss])\n\n  const accept = React.useCallback(() => {\n    onAccept?.()\n    window.location.href = redirectUrl\n  }, [onAccept, redirectUrl])\n\n  if (!visible) return null\n\n  const message =\n    labels.message ??\n    `It looks like you're visiting from ${detectedCountry.flag ? `${detectedCountry.flag} ` : \"\"}${detectedCountry.name}.`\n  const acceptLabel =\n    labels.accept ?? `Go to ${detectedCountry.name} store`\n  const dismissLabel =\n    labels.dismiss ?? `Stay on ${currentCountry.name} store`\n\n  return (\n    <div\n      data-slot=\"country-redirect\"\n      role=\"status\"\n      aria-label=\"Country store suggestion\"\n      className={cn(\n        \"font-enad animate-slide-down-banner\",\n        \"border-b border-(--enad-border-color) bg-(--enad-surface, var(--background))\",\n        \"motion-reduce:animate-none\",\n        className,\n      )}\n    >\n      <div className=\"mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-3 sm:px-6\">\n        <div className=\"flex items-center gap-3 min-w-0\">\n          <GlobeIcon className=\"size-5 shrink-0 text-(--enad-text-muted-color)\" aria-hidden=\"true\" />\n          <p className=\"text-sm text-(--enad-text-primary-color) truncate\">\n            {message}\n          </p>\n        </div>\n\n        <div className=\"flex items-center gap-2 shrink-0\">\n          <button\n            type=\"button\"\n            onClick={accept}\n            className={cn(\n              \"rounded-(--enad-border-radius) bg-(--enad-button-bg) px-3.5 py-1.5 text-sm font-medium text-(--enad-button-color)\",\n              \"hover:bg-(--enad-button-hover-bg) transition-colors\",\n              \"motion-reduce:transition-none\",\n            )}\n          >\n            {acceptLabel}\n          </button>\n          <button\n            type=\"button\"\n            onClick={dismiss}\n            className={cn(\n              \"rounded-(--enad-border-radius) border border-(--enad-border-color) bg-transparent px-3.5 py-1.5 text-sm font-medium text-(--enad-text-primary-color)\",\n              \"hover:bg-(--enad-hover-bg) transition-colors\",\n              \"motion-reduce:transition-none\",\n              \"hidden sm:inline-flex\",\n            )}\n          >\n            {dismissLabel}\n          </button>\n          <button\n            type=\"button\"\n            onClick={dismiss}\n            aria-label=\"Dismiss\"\n            className={cn(\n              \"inline-flex items-center justify-center rounded-(--enad-border-radius) p-1.5 text-(--enad-text-muted-color)\",\n              \"hover:text-(--enad-text-primary-color) hover:bg-(--enad-hover-bg) transition-colors\",\n              \"motion-reduce:transition-none\",\n              \"sm:hidden\",\n            )}\n          >\n            <CloseIcon className=\"size-4\" aria-hidden=\"true\" />\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";AA+GQ,SACE,KADF;AA7GR,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,eAAe;AAgCxB,MAAM,sBAAsB;AAE5B,SAAS,YAAY,KAA8B;AACjD,MAAI,QAAQ,MAAO,QAAO;AAC1B,MAAI;AACF,WAAO,aAAa,QAAQ,OAAO,mBAAmB,MAAM;AAAA,EAC9D,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,SAAS,iBAAiB,KAA2B;AACnD,MAAI,QAAQ,MAAO;AACnB,MAAI;AACF,iBAAa,QAAQ,OAAO,qBAAqB,MAAM;AAAA,EACzD,QAAQ;AAAA,EAER;AACF;AAEO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AACF,GAAyB;AACvB,QAAM,YAAY,QAAQ,OAAO;AACjC,QAAM,YAAY,QAAQ,OAAO;AAEjC,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,KAAK;AAElD,QAAM,UAAU,MAAM;AACpB,QAAI,gBAAgB,SAAS,eAAe,KAAM;AAClD,QAAI,YAAY,cAAc,mBAAmB,EAAG;AACpD,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,gBAAgB,MAAM,eAAe,MAAM,UAAU,CAAC;AAE1D,QAAM,UAAU,MAAM,YAAY,MAAM;AACtC,eAAW,KAAK;AAChB,qBAAiB,cAAc,mBAAmB;AAClD,gBAAY;AAAA,EACd,GAAG,CAAC,YAAY,SAAS,CAAC;AAE1B,QAAM,SAAS,MAAM,YAAY,MAAM;AACrC,eAAW;AACX,WAAO,SAAS,OAAO;AAAA,EACzB,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,MAAI,CAAC,QAAS,QAAO;AAErB,QAAM,UACJ,OAAO,WACP,sCAAsC,gBAAgB,OAAO,GAAG,gBAAgB,IAAI,MAAM,EAAE,GAAG,gBAAgB,IAAI;AACrH,QAAM,cACJ,OAAO,UAAU,SAAS,gBAAgB,IAAI;AAChD,QAAM,eACJ,OAAO,WAAW,WAAW,eAAe,IAAI;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA,+BAAC,SAAI,WAAU,+EACb;AAAA,6BAAC,SAAI,WAAU,mCACb;AAAA,8BAAC,aAAU,WAAU,kDAAiD,eAAY,QAAO;AAAA,UACzF,oBAAC,OAAE,WAAU,qDACV,mBACH;AAAA,WACF;AAAA,QAEA,qBAAC,SAAI,WAAU,oCACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,cAAW;AAAA,cACX,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cAEA,8BAAC,aAAU,WAAU,UAAS,eAAY,QAAO;AAAA;AAAA,UACnD;AAAA,WACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/client/storefront/components/empty-state.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+declare const presets: {
+    readonly "no-results": {
+        readonly title: "No results found";
+        readonly description: "Try adjusting your search or filters to find what you're looking for.";
+    };
+    readonly "empty-cart": {
+        readonly title: "Your cart is empty";
+        readonly description: "Browse our collection and add items to your cart.";
+    };
+    readonly "no-reviews": {
+        readonly title: "No reviews yet";
+        readonly description: "Be the first to share your experience.";
+    };
+    readonly "no-wishlist": {
+        readonly title: "Your wishlist is empty";
+        readonly description: "Save your favorite items here for later.";
+    };
+    readonly "end-of-list": {
+        readonly title: "You've seen it all";
+        readonly description: "Check back later for new arrivals.";
+    };
+};
+type PresetVariant = keyof typeof presets;
+export interface EmptyStateProps {
+    /** Use a preset for default title/description */
+    variant?: PresetVariant;
+    /** Custom icon or illustration slot */
+    icon?: React.ReactNode;
+    title?: string;
+    description?: string;
+    /** CTA button or link */
+    action?: React.ReactNode;
+    className?: string;
+}
+export declare function EmptyState({ variant, icon, title, description, action, className, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=empty-state.d.ts.map

package/dist/client/storefront/components/empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/components/empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;CAqBH,CAAC;AAEX,KAAK,aAAa,GAAG,MAAM,OAAO,OAAO,CAAC;AAI1C,MAAM,WAAW,eAAe;IAC9B,iDAAiD;IACjD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,uCAAuC;IACvC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,IAAI,EACJ,KAAK,EACL,WAAW,EACX,MAAM,EACN,SAAS,GACV,EAAE,eAAe,2CA6BjB"}

package/dist/client/storefront/components/empty-state.mjs

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../ui/utils";
+const presets = {
+  "no-results": {
+    title: "No results found",
+    description: "Try adjusting your search or filters to find what you're looking for."
+  },
+  "empty-cart": {
+    title: "Your cart is empty",
+    description: "Browse our collection and add items to your cart."
+  },
+  "no-reviews": {
+    title: "No reviews yet",
+    description: "Be the first to share your experience."
+  },
+  "no-wishlist": {
+    title: "Your wishlist is empty",
+    description: "Save your favorite items here for later."
+  },
+  "end-of-list": {
+    title: "You've seen it all",
+    description: "Check back later for new arrivals."
+  }
+};
+function EmptyState({
+  variant,
+  icon,
+  title,
+  description,
+  action,
+  className
+}) {
+  const preset = variant ? presets[variant] : void 0;
+  const resolvedTitle = title ?? preset?.title;
+  const resolvedDescription = description ?? preset?.description;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center justify-center gap-4 px-6 py-12 text-center",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx("div", { className: "flex size-16 items-center justify-center rounded-full bg-muted text-muted-foreground border border-(--enad-border-color)", children: icon }),
+        resolvedTitle && /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold font-enad", children: resolvedTitle }),
+        resolvedDescription && /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm text-muted-foreground leading-relaxed", children: resolvedDescription }),
+        action && /* @__PURE__ */ jsx("div", { className: "mt-2", children: action })
+      ]
+    }
+  );
+}
+export {
+  EmptyState
+};
+//# sourceMappingURL=empty-state.mjs.map

package/dist/client/storefront/components/empty-state.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/components/empty-state.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\n\n/* ─── Preset defaults ─── */\n\nconst presets = {\n  \"no-results\": {\n    title: \"No results found\",\n    description: \"Try adjusting your search or filters to find what you're looking for.\",\n  },\n  \"empty-cart\": {\n    title: \"Your cart is empty\",\n    description: \"Browse our collection and add items to your cart.\",\n  },\n  \"no-reviews\": {\n    title: \"No reviews yet\",\n    description: \"Be the first to share your experience.\",\n  },\n  \"no-wishlist\": {\n    title: \"Your wishlist is empty\",\n    description: \"Save your favorite items here for later.\",\n  },\n  \"end-of-list\": {\n    title: \"You've seen it all\",\n    description: \"Check back later for new arrivals.\",\n  },\n} as const;\n\ntype PresetVariant = keyof typeof presets;\n\n/* ─── Types ─── */\n\nexport interface EmptyStateProps {\n  /** Use a preset for default title/description */\n  variant?: PresetVariant;\n  /** Custom icon or illustration slot */\n  icon?: React.ReactNode;\n  title?: string;\n  description?: string;\n  /** CTA button or link */\n  action?: React.ReactNode;\n  className?: string;\n}\n\n/* ─── Component ─── */\n\nexport function EmptyState({\n  variant,\n  icon,\n  title,\n  description,\n  action,\n  className,\n}: EmptyStateProps) {\n  const preset = variant ? presets[variant] : undefined;\n  const resolvedTitle = title ?? preset?.title;\n  const resolvedDescription = description ?? preset?.description;\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col items-center justify-center gap-4 px-6 py-12 text-center\",\n        className,\n      )}\n    >\n      {icon && (\n        <div className=\"flex size-16 items-center justify-center rounded-full bg-muted text-muted-foreground border border-(--enad-border-color)\">\n          {icon}\n        </div>\n      )}\n\n      {resolvedTitle && <h3 className=\"text-lg font-semibold font-enad\">{resolvedTitle}</h3>}\n\n      {resolvedDescription && (\n        <p className=\"max-w-sm text-sm text-muted-foreground leading-relaxed\">\n          {resolvedDescription}\n        </p>\n      )}\n\n      {action && <div className=\"mt-2\">{action}</div>}\n    </div>\n  );\n}\n"],"mappings":"AA2DI,SAOI,KAPJ;AA1DJ,SAAS,UAAU;AAInB,MAAM,UAAU;AAAA,EACd,cAAc;AAAA,IACZ,OAAO;AAAA,IACP,aAAa;AAAA,EACf;AAAA,EACA,cAAc;AAAA,IACZ,OAAO;AAAA,IACP,aAAa;AAAA,EACf;AAAA,EACA,cAAc;AAAA,IACZ,OAAO;AAAA,IACP,aAAa;AAAA,EACf;AAAA,EACA,eAAe;AAAA,IACb,OAAO;AAAA,IACP,aAAa;AAAA,EACf;AAAA,EACA,eAAe;AAAA,IACb,OAAO;AAAA,IACP,aAAa;AAAA,EACf;AACF;AAoBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,SAAS,UAAU,QAAQ,OAAO,IAAI;AAC5C,QAAM,gBAAgB,SAAS,QAAQ;AACvC,QAAM,sBAAsB,eAAe,QAAQ;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA,gBACC,oBAAC,SAAI,WAAU,4HACZ,gBACH;AAAA,QAGD,iBAAiB,oBAAC,QAAG,WAAU,mCAAmC,yBAAc;AAAA,QAEhF,uBACC,oBAAC,OAAE,WAAU,0DACV,+BACH;AAAA,QAGD,UAAU,oBAAC,SAAI,WAAU,QAAQ,kBAAO;AAAA;AAAA;AAAA,EAC3C;AAEJ;","names":[]}

package/dist/client/storefront/components/image-lightbox.d.ts

@@ -0,0 +1,13 @@
+import type { ImageAsset } from "../types";
+export interface ImageLightboxProps {
+    images: ImageAsset[];
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Starting image index */
+    startIndex?: number;
+    /** Show thumbnail strip */
+    showThumbnails?: boolean;
+    className?: string;
+}
+export declare function ImageLightbox({ images, open, onOpenChange, startIndex, showThumbnails, className, }: ImageLightboxProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=image-lightbox.d.ts.map

package/dist/client/storefront/components/image-lightbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-lightbox.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/components/image-lightbox.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAI3C,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,UAAc,EACd,cAAqB,EACrB,SAAS,GACV,EAAE,kBAAkB,kDA2KpB"}

package/dist/client/storefront/components/image-lightbox.mjs

@@ -0,0 +1,275 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { TransformWrapper, TransformComponent, useControls } from "react-zoom-pan-pinch";
+import { cn } from "../../ui/utils";
+import { useIcon } from "../../icons/icon-context";
+function ImageLightbox({
+  images,
+  open,
+  onOpenChange,
+  startIndex = 0,
+  showThumbnails = true,
+  className
+}) {
+  const CloseIcon = useIcon("close");
+  const ChevronLeftIcon = useIcon("chevronLeft");
+  const ChevronRightIcon = useIcon("chevronRight");
+  const [activeIndex, setActiveIndex] = React.useState(startIndex);
+  const dialogRef = React.useRef(null);
+  const previousFocusRef = React.useRef(null);
+  React.useEffect(() => {
+    if (open) setActiveIndex(startIndex);
+  }, [open, startIndex]);
+  React.useEffect(() => {
+    if (open) {
+      previousFocusRef.current = document.activeElement;
+      requestAnimationFrame(() => dialogRef.current?.focus());
+    } else if (previousFocusRef.current) {
+      previousFocusRef.current.focus();
+      previousFocusRef.current = null;
+    }
+  }, [open]);
+  React.useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+  React.useEffect(() => {
+    if (!open) return;
+    const handleKey = (e) => {
+      switch (e.key) {
+        case "Escape":
+          onOpenChange(false);
+          break;
+        case "ArrowLeft":
+          setActiveIndex((i) => i > 0 ? i - 1 : images.length - 1);
+          break;
+        case "ArrowRight":
+          setActiveIndex((i) => i < images.length - 1 ? i + 1 : 0);
+          break;
+        case "Tab": {
+          const dialog = dialogRef.current;
+          if (!dialog) return;
+          const focusable = dialog.querySelectorAll(
+            'button:not([disabled]), [tabindex]:not([tabindex="-1"])'
+          );
+          if (focusable.length === 0) return;
+          const first = focusable[0];
+          const last = focusable[focusable.length - 1];
+          if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+          } else if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+          }
+          break;
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open, images.length, onOpenChange]);
+  if (!open || images.length === 0) return null;
+  const active = images[activeIndex];
+  const hasMultiple = images.length > 1;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: dialogRef,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Image lightbox",
+      tabIndex: -1,
+      className: cn(
+        "fixed inset-0 z-50 flex flex-col bg-black/95 select-none outline-none",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          TransformWrapper,
+          {
+            initialScale: 1,
+            minScale: 1,
+            maxScale: 5,
+            centerOnInit: true,
+            doubleClick: { mode: "toggle", step: 2 },
+            wheel: { step: 0.15 },
+            panning: { velocityDisabled: true },
+            children: [
+              /* @__PURE__ */ jsx(
+                ZoomToolbar,
+                {
+                  activeIndex,
+                  total: images.length,
+                  onClose: () => onOpenChange(false),
+                  CloseIcon
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "relative flex-1 flex items-center justify-center overflow-hidden", children: [
+                hasMultiple && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setActiveIndex((i) => i > 0 ? i - 1 : images.length - 1),
+                    className: "absolute left-4 z-10 rounded-full bg-white/10 p-2 text-white hover:bg-white/20 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none",
+                    "aria-label": "Previous image",
+                    children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-6" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TransformComponent,
+                  {
+                    wrapperClass: "!w-full !h-full",
+                    contentClass: "!w-full !h-full !flex !items-center !justify-center",
+                    children: /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: active.src,
+                        alt: active.alt ?? "",
+                        draggable: false,
+                        className: "max-h-[calc(100vh-10rem)] max-w-[calc(100vw-6rem)] object-contain"
+                      }
+                    )
+                  }
+                ),
+                hasMultiple && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setActiveIndex((i) => i < images.length - 1 ? i + 1 : 0),
+                    className: "absolute right-4 z-10 rounded-full bg-white/10 p-2 text-white hover:bg-white/20 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none",
+                    "aria-label": "Next image",
+                    children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-6" })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        showThumbnails && hasMultiple && /* @__PURE__ */ jsx("div", { className: "flex justify-center gap-2 px-4 py-3 overflow-x-auto", children: images.map((img, i) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setActiveIndex(i),
+            className: cn(
+              "relative size-14 shrink-0 overflow-hidden rounded border-2 transition-colors",
+              i === activeIndex ? "border-white" : "border-transparent opacity-50 hover:opacity-80"
+            ),
+            children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: img.src,
+                alt: img.alt ?? "",
+                loading: "lazy",
+                className: "size-full object-cover"
+              }
+            )
+          },
+          i
+        )) })
+      ]
+    }
+  );
+}
+function ZoomToolbar({
+  activeIndex,
+  total,
+  onClose,
+  CloseIcon
+}) {
+  const { zoomIn, zoomOut, resetTransform } = useControls();
+  const prevIndex = React.useRef(activeIndex);
+  React.useEffect(() => {
+    if (prevIndex.current !== activeIndex) {
+      resetTransform(0);
+      prevIndex.current = activeIndex;
+    }
+  }, [activeIndex, resetTransform]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 text-white/80", children: [
+    /* @__PURE__ */ jsxs("span", { className: "text-sm tabular-nums", children: [
+      activeIndex + 1,
+      " / ",
+      total
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => zoomIn(),
+          className: "rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none",
+          "aria-label": "Zoom in",
+          children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "size-5",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: [
+                /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+                /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
+                /* @__PURE__ */ jsx("line", { x1: "11", y1: "8", x2: "11", y2: "14" }),
+                /* @__PURE__ */ jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => zoomOut(),
+          className: "rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none",
+          "aria-label": "Zoom out",
+          children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "size-5",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: [
+                /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+                /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
+                /* @__PURE__ */ jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => resetTransform(),
+          className: "rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none text-xs font-medium",
+          "aria-label": "Reset zoom",
+          children: "1:1"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none",
+          "aria-label": "Close lightbox",
+          children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-5" })
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  ImageLightbox
+};
+//# sourceMappingURL=image-lightbox.mjs.map

package/dist/client/storefront/components/image-lightbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/components/image-lightbox.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { TransformWrapper, TransformComponent, useControls } from \"react-zoom-pan-pinch\";\nimport { cn } from \"../../ui/utils\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport type { ImageAsset } from \"../types\";\n\n/* ─── Types ─── */\n\nexport interface ImageLightboxProps {\n  images: ImageAsset[];\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** Starting image index */\n  startIndex?: number;\n  /** Show thumbnail strip */\n  showThumbnails?: boolean;\n  className?: string;\n}\n\n/* ─── Component ─── */\n\nexport function ImageLightbox({\n  images,\n  open,\n  onOpenChange,\n  startIndex = 0,\n  showThumbnails = true,\n  className,\n}: ImageLightboxProps) {\n  const CloseIcon = useIcon(\"close\");\n  const ChevronLeftIcon = useIcon(\"chevronLeft\");\n  const ChevronRightIcon = useIcon(\"chevronRight\");\n\n  const [activeIndex, setActiveIndex] = React.useState(startIndex);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  const previousFocusRef = React.useRef<HTMLElement | null>(null);\n\n  React.useEffect(() => {\n    if (open) setActiveIndex(startIndex);\n  }, [open, startIndex]);\n\n  // Focus management: capture trigger, restore on close\n  React.useEffect(() => {\n    if (open) {\n      previousFocusRef.current = document.activeElement as HTMLElement | null;\n      requestAnimationFrame(() => dialogRef.current?.focus());\n    } else if (previousFocusRef.current) {\n      previousFocusRef.current.focus();\n      previousFocusRef.current = null;\n    }\n  }, [open]);\n\n  // Lock body scroll when open\n  React.useEffect(() => {\n    if (!open) return;\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, [open]);\n\n  // Keyboard navigation + focus trap\n  React.useEffect(() => {\n    if (!open) return;\n    const handleKey = (e: KeyboardEvent) => {\n      switch (e.key) {\n        case \"Escape\":\n          onOpenChange(false);\n          break;\n        case \"ArrowLeft\":\n          setActiveIndex((i) => (i > 0 ? i - 1 : images.length - 1));\n          break;\n        case \"ArrowRight\":\n          setActiveIndex((i) => (i < images.length - 1 ? i + 1 : 0));\n          break;\n        case \"Tab\": {\n          const dialog = dialogRef.current;\n          if (!dialog) return;\n          const focusable = dialog.querySelectorAll<HTMLElement>(\n            'button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])',\n          );\n          if (focusable.length === 0) return;\n          const first = focusable[0]!;\n          const last = focusable[focusable.length - 1]!;\n          if (e.shiftKey && document.activeElement === first) {\n            e.preventDefault();\n            last.focus();\n          } else if (!e.shiftKey && document.activeElement === last) {\n            e.preventDefault();\n            first.focus();\n          }\n          break;\n        }\n      }\n    };\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [open, images.length, onOpenChange]);\n\n  if (!open || images.length === 0) return null;\n\n  const active = images[activeIndex]!;\n  const hasMultiple = images.length > 1;\n\n  return (\n    <div\n      ref={dialogRef}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Image lightbox\"\n      tabIndex={-1}\n      className={cn(\n        \"fixed inset-0 z-50 flex flex-col bg-black/95 select-none outline-none\",\n        className,\n      )}\n    >\n      <TransformWrapper\n        initialScale={1}\n        minScale={1}\n        maxScale={5}\n        centerOnInit\n        doubleClick={{ mode: \"toggle\", step: 2 }}\n        wheel={{ step: 0.15 }}\n        panning={{ velocityDisabled: true }}\n      >\n        {/* Toolbar */}\n        <ZoomToolbar\n          activeIndex={activeIndex}\n          total={images.length}\n          onClose={() => onOpenChange(false)}\n          CloseIcon={CloseIcon}\n        />\n\n        {/* Main image area */}\n        <div className=\"relative flex-1 flex items-center justify-center overflow-hidden\">\n          {hasMultiple && (\n            <button\n              type=\"button\"\n              onClick={() => setActiveIndex((i) => (i > 0 ? i - 1 : images.length - 1))}\n              className=\"absolute left-4 z-10 rounded-full bg-white/10 p-2 text-white hover:bg-white/20 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none\"\n              aria-label=\"Previous image\"\n            >\n              <ChevronLeftIcon className=\"size-6\" />\n            </button>\n          )}\n\n          <TransformComponent\n            wrapperClass=\"!w-full !h-full\"\n            contentClass=\"!w-full !h-full !flex !items-center !justify-center\"\n          >\n            <img\n              src={active.src}\n              alt={active.alt ?? \"\"}\n              draggable={false}\n              className=\"max-h-[calc(100vh-10rem)] max-w-[calc(100vw-6rem)] object-contain\"\n            />\n          </TransformComponent>\n\n          {hasMultiple && (\n            <button\n              type=\"button\"\n              onClick={() => setActiveIndex((i) => (i < images.length - 1 ? i + 1 : 0))}\n              className=\"absolute right-4 z-10 rounded-full bg-white/10 p-2 text-white hover:bg-white/20 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none\"\n              aria-label=\"Next image\"\n            >\n              <ChevronRightIcon className=\"size-6\" />\n            </button>\n          )}\n        </div>\n      </TransformWrapper>\n\n      {/* Thumbnails */}\n      {showThumbnails && hasMultiple && (\n        <div className=\"flex justify-center gap-2 px-4 py-3 overflow-x-auto\">\n          {images.map((img, i) => (\n            <button\n              key={i}\n              type=\"button\"\n              onClick={() => setActiveIndex(i)}\n              className={cn(\n                \"relative size-14 shrink-0 overflow-hidden rounded border-2 transition-colors\",\n                i === activeIndex\n                  ? \"border-white\"\n                  : \"border-transparent opacity-50 hover:opacity-80\",\n              )}\n            >\n              <img\n                src={img.src}\n                alt={img.alt ?? \"\"}\n                loading=\"lazy\"\n                className=\"size-full object-cover\"\n              />\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/* ─── Zoom toolbar (uses useControls from the library) ─── */\n\nfunction ZoomToolbar({\n  activeIndex,\n  total,\n  onClose,\n  CloseIcon,\n}: {\n  activeIndex: number;\n  total: number;\n  onClose: () => void;\n  CloseIcon: React.ComponentType<{ className?: string }>;\n}) {\n  const { zoomIn, zoomOut, resetTransform } = useControls();\n\n  // Reset zoom when switching images (avoids full TransformWrapper remount)\n  const prevIndex = React.useRef(activeIndex);\n  React.useEffect(() => {\n    if (prevIndex.current !== activeIndex) {\n      resetTransform(0);\n      prevIndex.current = activeIndex;\n    }\n  }, [activeIndex, resetTransform]);\n\n  return (\n    <div className=\"flex items-center justify-between px-4 py-3 text-white/80\">\n      <span className=\"text-sm tabular-nums\">\n        {activeIndex + 1} / {total}\n      </span>\n      <div className=\"flex items-center gap-2\">\n        <button\n          type=\"button\"\n          onClick={() => zoomIn()}\n          className=\"rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none\"\n          aria-label=\"Zoom in\"\n        >\n          <svg\n            className=\"size-5\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n          >\n            <circle cx=\"11\" cy=\"11\" r=\"8\" />\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n            <line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\" />\n            <line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\" />\n          </svg>\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => zoomOut()}\n          className=\"rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none\"\n          aria-label=\"Zoom out\"\n        >\n          <svg\n            className=\"size-5\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n          >\n            <circle cx=\"11\" cy=\"11\" r=\"8\" />\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n            <line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\" />\n          </svg>\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => resetTransform()}\n          className=\"rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none text-xs font-medium\"\n          aria-label=\"Reset zoom\"\n        >\n          1:1\n        </button>\n        <button\n          type=\"button\"\n          onClick={onClose}\n          className=\"rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none\"\n          aria-label=\"Close lightbox\"\n        >\n          <CloseIcon className=\"size-5\" />\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/client/storefront/components/infinite-scroll.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+export interface UseInfiniteScrollOptions {
+    /** Called when sentinel enters viewport */
+    onLoadMore: () => void;
+    /** Whether more items can be loaded */
+    hasMore: boolean;
+    /** Whether currently loading */
+    loading?: boolean;
+    /** IntersectionObserver rootMargin — controls how early to trigger */
+    threshold?: string;
+    /** Root element for intersection (defaults to viewport) */
+    root?: React.RefObject<Element | null>;
+}
+export interface UseInfiniteScrollReturn {
+    sentinelRef: React.RefCallback<HTMLElement>;
+    loading: boolean;
+    hasMore: boolean;
+}
+export declare function useInfiniteScroll({ onLoadMore, hasMore, loading, threshold, root, }: UseInfiniteScrollOptions): UseInfiniteScrollReturn;
+export interface InfiniteScrollProps {
+    onLoadMore: () => void;
+    hasMore: boolean;
+    loading?: boolean;
+    /** IntersectionObserver rootMargin */
+    threshold?: string;
+    /** Fallback "Load more" button for accessibility */
+    showLoadMoreButton?: boolean;
+    loadMoreLabel?: string;
+    /** Loading indicator slot */
+    loadingIndicator?: React.ReactNode;
+    /** End-of-list indicator slot */
+    endIndicator?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function InfiniteScroll({ onLoadMore, hasMore, loading, threshold, showLoadMoreButton, loadMoreLabel, loadingIndicator, endIndicator, children, className, }: InfiniteScrollProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=infinite-scroll.d.ts.map

package/dist/client/storefront/components/infinite-scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"infinite-scroll.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/components/infinite-scroll.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,wBAAwB;IACvC,2CAA2C;IAC3C,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,uCAAuC;IACvC,OAAO,EAAE,OAAO,CAAC;IACjB,gCAAgC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;CACxC;AAED,MAAM,WAAW,uBAAuB;IACtC,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,OAAO,EACP,OAAe,EACf,SAAmB,EACnB,IAAI,GACL,EAAE,wBAAwB,GAAG,uBAAuB,CAuCpD;AAID,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6BAA6B;IAC7B,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,iCAAiC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,OAAO,EACP,OAAe,EACf,SAAmB,EACnB,kBAA0B,EAC1B,aAA2B,EAC3B,gBAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,SAAS,GACV,EAAE,mBAAmB,2CA6CrB"}