@kasuvia/sdk 0.0.8 → 0.0.9

package/dist/components/index.js

@@ -0,0 +1,4217 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/index.ts
+var components_exports = {};
+__export(components_exports, {
+  AddressAutocomplete: () => AddressAutocomplete,
+  AnalyticsScripts: () => AnalyticsScripts,
+  BespokeAvailabilityBadge: () => BespokeAvailabilityBadge,
+  BespokeProgressTracker: () => BespokeProgressTracker,
+  CardSkeleton: () => CardSkeleton,
+  CartItem: () => CartItem,
+  CartItemSkeleton: () => CartItemSkeleton,
+  CartSidebar: () => CartSidebar,
+  CartTypeMismatchBanner: () => CartTypeMismatchBanner,
+  CookieConsentBanner: () => CookieConsentBanner,
+  DeliverableReviewer: () => DeliverableReviewer,
+  ImageEditorModal: () => ImageEditorModal,
+  ImageViewerModal: () => ImageViewerModal,
+  LucideReactIcon: () => LucideReactIcon,
+  MapPinDrop: () => MapPinDrop,
+  MultiSelectPicker: () => MultiSelectPicker,
+  OfflineBanner: () => OfflineBanner,
+  OrderItemSkeleton: () => OrderItemSkeleton,
+  ProductCard: () => ProductCard,
+  ProductCardSkeleton: () => ProductCardSkeleton,
+  ProductGrid: () => ProductGrid,
+  SearchableInput: () => SearchableInput,
+  SearchablePopover: () => SearchablePopover,
+  SlotPicker: () => SlotPicker,
+  SmartImage: () => SmartImage,
+  SmartMotionImage: () => SmartMotionImage,
+  TableSkeleton: () => TableSkeleton,
+  TruncatedValue: () => TruncatedValue,
+  UnsavedChangesDialog: () => UnsavedChangesDialog,
+  useUnsavedChanges: () => useUnsavedChanges
+});
+module.exports = __toCommonJS(components_exports);
+
+// src/components/skeletons/TableSkeleton.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function TableSkeleton({
+  rows = 5,
+  columns = 4,
+  className = "w-full border-collapse",
+  rowClassName = "border-b"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { className: rowClassName, children: Array.from({ length: columns }).map((_, c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { className: "p-3 text-left", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 bg-muted rounded animate-pulse w-20" }) }, c)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: Array.from({ length: rows }).map((_, r) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { className: rowClassName, children: Array.from({ length: columns }).map((_2, c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "p-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 bg-muted rounded animate-pulse w-full max-w-[120px]" }) }, c)) }, r)) })
+  ] }) });
+}
+
+// src/components/skeletons/CardSkeleton.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function CardSkeleton({
+  count = 4,
+  containerClassName = "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6",
+  cardClassName = "rounded-xl border p-4 space-y-3 animate-pulse bg-card"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: containerClassName, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cardClassName, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-full aspect-square bg-muted rounded-lg" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-4 bg-muted rounded w-3/4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-4 bg-muted rounded w-1/2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-8 bg-muted rounded w-full mt-2" })
+  ] }, i)) });
+}
+
+// src/components/skeletons/CartItemSkeleton.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function CartItemSkeleton({
+  count = 3,
+  className = "space-y-4"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-4 p-3 border-b animate-pulse", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-16 h-16 bg-muted rounded-md shrink-0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-4 bg-muted rounded w-2/3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-3 bg-muted rounded w-1/3" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-6 w-16 bg-muted rounded shrink-0" })
+  ] }, i)) });
+}
+
+// src/components/skeletons/OrderItemSkeleton.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function OrderItemSkeleton({
+  count = 3,
+  className = "space-y-4"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "p-4 border rounded-lg animate-pulse space-y-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-4 bg-muted rounded w-1/3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-5 w-20 bg-muted rounded-full" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-3 bg-muted rounded w-1/4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-4 bg-muted rounded w-1/2" })
+  ] }, i)) });
+}
+
+// src/components/skeletons/ProductCardSkeleton.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function ProductCardSkeleton({
+  className = "flex flex-col h-full rounded-xl border bg-card overflow-hidden shadow-sm animate-pulse",
+  imageClassName = "w-full aspect-square bg-muted"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: imageClassName }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "p-4 flex flex-col flex-1 space-y-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-5 bg-muted rounded w-3/4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-3 bg-muted rounded w-full" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-3 bg-muted rounded w-2/3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center justify-between pt-2 mt-auto", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-6 bg-muted rounded w-20" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-full h-10 bg-muted rounded-lg mt-auto" })
+    ] })
+  ] });
+}
+
+// src/components/cart/CartItem.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function CartItem({
+  item,
+  onUpdateQty,
+  onRemove,
+  formatPriceFn,
+  className = "flex items-center gap-4 py-3 border-b border-gray-100 dark:border-gray-800",
+  imageClassName = "w-16 h-16 object-cover rounded-md bg-gray-100 dark:bg-gray-800 shrink-0",
+  titleClassName = "text-sm font-medium text-gray-900 dark:text-gray-100 line-clamp-1",
+  priceClassName = "text-sm font-semibold text-gray-900 dark:text-gray-100",
+  quantityGroupClassName = "flex items-center border rounded-md border-gray-200 dark:border-gray-700",
+  buttonClassName = "px-2 py-1 text-xs hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors disabled:opacity-50",
+  removeButtonClassName = "text-xs text-red-600 hover:text-red-700 dark:text-red-400 transition-colors ml-auto"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className, children: [
+    item.image_url ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: item.image_url, alt: item.product_name, className: imageClassName }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: imageClassName }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex-1 min-w-0 space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h4", { className: titleClassName, children: item.product_name }),
+      item.variant_attributes && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: typeof item.variant_attributes === "string" ? item.variant_attributes : Object.entries(item.variant_attributes).map(([k, v]) => `${k}: ${v}`).join(", ") }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: priceClassName, children: formatPriceFn ? formatPriceFn(item.unit_price * item.quantity) : `${item.currency || ""}${item.unit_price * item.quantity}` })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col items-end gap-2 shrink-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: quantityGroupClassName, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => onUpdateQty(item.id, Math.max(1, item.quantity - 1)),
+            disabled: item.quantity <= 1,
+            className: buttonClassName,
+            children: "-"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "px-2 text-xs font-medium", children: item.quantity }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => onUpdateQty(item.id, item.quantity + 1),
+            className: buttonClassName,
+            children: "+"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => onRemove(item.id),
+          className: removeButtonClassName,
+          children: "Remove"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/hooks/use-cart.ts
+var import_react2 = __toESM(require("react"));
+var import_react_query = require("@tanstack/react-query");
+
+// src/utils/token-refresh.ts
+var GLOBAL_KEY = "__kasuviaSdkTokenRefreshRegistry__";
+function getRegistry() {
+  const g = globalThis;
+  if (!g[GLOBAL_KEY]) {
+    g[GLOBAL_KEY] = { handler: null, inFlight: null };
+  }
+  return g[GLOBAL_KEY];
+}
+async function refreshAccessToken() {
+  const registry = getRegistry();
+  if (!registry.handler) return null;
+  if (registry.inFlight) return registry.inFlight;
+  registry.inFlight = registry.handler().finally(() => {
+    registry.inFlight = null;
+  });
+  return registry.inFlight;
+}
+function hasRefreshHandler() {
+  return getRegistry().handler !== null;
+}
+
+// src/utils/http-client.ts
+var ApiError = class extends Error {
+  constructor(message, status, body) {
+    super(message);
+    this.name = "ApiError";
+    this.status = status;
+    this.body = body;
+  }
+};
+function extractApiErrorMessage(body, fallback) {
+  if (typeof body !== "object" || body === null) return fallback;
+  const record = body;
+  if (typeof record.detail === "string") return record.detail;
+  if (Array.isArray(record.detail) && record.detail.length > 0) {
+    const first = record.detail[0];
+    if (first && typeof first.msg === "string") {
+      const loc = first.loc;
+      const field = Array.isArray(loc) ? loc[loc.length - 1] : void 0;
+      return typeof field === "string" || typeof field === "number" ? `${field}: ${first.msg}` : first.msg;
+    }
+  }
+  const firstStringOrArrayItem = (value) => {
+    if (typeof value === "string") return value;
+    if (Array.isArray(value) && typeof value[0] === "string") return value[0];
+    return void 0;
+  };
+  const nonFieldMessage = firstStringOrArrayItem(record.non_field_errors);
+  if (nonFieldMessage) return nonFieldMessage;
+  for (const [key, value] of Object.entries(record)) {
+    if (key === "detail" || key === "non_field_errors") continue;
+    const message = firstStringOrArrayItem(value);
+    if (message) return message;
+  }
+  return fallback;
+}
+function storefrontHeaders(config) {
+  return {
+    "X-Storefront-Key": config.storefrontApiKey,
+    "X-Business-ID": config.businessId
+  };
+}
+function authHeaders(config, accessToken) {
+  return {
+    ...storefrontHeaders(config),
+    Authorization: `Bearer ${accessToken}`
+  };
+}
+var JSON_HEADERS = { "Content-Type": "application/json" };
+async function apiRequest(url, options = {}) {
+  const { fallbackErrorMessage = "Request failed", ...init } = options;
+  const headers = new Headers(init.headers);
+  const hadBearerToken = headers.get("Authorization")?.startsWith("Bearer ") ?? false;
+  const response = await fetch(url, { ...init, headers });
+  if (response.status === 401 && hadBearerToken && hasRefreshHandler()) {
+    const freshToken = await refreshAccessToken();
+    if (freshToken) {
+      const retryHeaders = new Headers(headers);
+      retryHeaders.set("Authorization", `Bearer ${freshToken}`);
+      const retryResponse = await fetch(url, { ...init, headers: retryHeaders });
+      if (retryResponse.ok) {
+        const retryText = await retryResponse.text();
+        return retryText ? JSON.parse(retryText) : void 0;
+      }
+      const retryBody = await retryResponse.json().catch(() => ({}));
+      throw new ApiError(extractApiErrorMessage(retryBody, fallbackErrorMessage), retryResponse.status, retryBody);
+    }
+  }
+  if (!response.ok) {
+    const body = await response.json().catch(() => ({}));
+    throw new ApiError(extractApiErrorMessage(body, fallbackErrorMessage), response.status, body);
+  }
+  const text = await response.text();
+  return text ? JSON.parse(text) : void 0;
+}
+
+// src/services/cart.service.ts
+function parseItems(items) {
+  return items.map((item) => ({
+    ...item,
+    variant_attributes: item.variant_attributes && typeof item.variant_attributes === "string" ? JSON.parse(item.variant_attributes) : item.variant_attributes
+  }));
+}
+function guestHeaders(config, guestSessionId, extra) {
+  return { ...extra, ...storefrontHeaders(config), "X-Guest-Session": guestSessionId };
+}
+async function getGuestCart(config, guestSessionId) {
+  if (!guestSessionId) throw new Error("Guest session ID is required to fetch guest cart");
+  const data = await apiRequest(`${config.backendUrls.cart}/cart/`, {
+    headers: guestHeaders(config, guestSessionId),
+    fallbackErrorMessage: "Failed to fetch guest cart"
+  });
+  return { ...data, items: parseItems(data.items || []) };
+}
+async function addToGuestCart(config, guestSessionId, item) {
+  if (!guestSessionId) throw new Error("Guest session ID is required to add to guest cart");
+  const payload = {
+    product_id: item.product_id,
+    variant_id: item.variant_id ?? void 0,
+    quantity: item.quantity,
+    custom_measurements: item.custom_measurements ?? void 0
+  };
+  const data = await apiRequest(`${config.backendUrls.cart}/cart/`, {
+    method: "POST",
+    headers: guestHeaders(config, guestSessionId, JSON_HEADERS),
+    body: JSON.stringify(payload),
+    fallbackErrorMessage: "Failed to add to guest cart"
+  });
+  return { ...data, items: parseItems(data.items || []) };
+}
+async function updateGuestCartItemQuantity(config, guestSessionId, itemId, quantity) {
+  if (!guestSessionId) throw new Error("Guest session ID is required to update guest cart item");
+  const data = await apiRequest(`${config.backendUrls.cart}/cart/${itemId}`, {
+    method: "PATCH",
+    headers: guestHeaders(config, guestSessionId, JSON_HEADERS),
+    body: JSON.stringify({ quantity }),
+    fallbackErrorMessage: "Failed to update guest cart item"
+  });
+  return { ...data, items: parseItems(data.items || []) };
+}
+async function removeFromGuestCart(config, guestSessionId, itemId) {
+  if (!guestSessionId) throw new Error("Guest session ID is required to remove from guest cart");
+  await apiRequest(`${config.backendUrls.cart}/cart/${itemId}`, {
+    method: "DELETE",
+    headers: guestHeaders(config, guestSessionId),
+    fallbackErrorMessage: "Failed to remove item from guest cart"
+  });
+}
+async function clearGuestCart(config, guestSessionId) {
+  if (!guestSessionId) throw new Error("Guest session ID is required to clear guest cart");
+  await apiRequest(`${config.backendUrls.cart}/cart/clear`, {
+    method: "DELETE",
+    headers: guestHeaders(config, guestSessionId),
+    fallbackErrorMessage: "Failed to clear guest cart"
+  });
+}
+async function getCart(config, accessToken) {
+  if (!accessToken) {
+    throw new Error("Access token is required to fetch authenticated cart");
+  }
+  const data = await apiRequest(`${config.backendUrls.cart}/cart/`, {
+    headers: authHeaders(config, accessToken),
+    fallbackErrorMessage: "Failed to fetch cart"
+  });
+  return { ...data, items: parseItems(data.items || []) };
+}
+async function addToCart(config, accessToken, item) {
+  const payload = {
+    product_id: item.product_id,
+    variant_id: item.variant_id ?? void 0,
+    quantity: item.quantity,
+    custom_measurements: item.custom_measurements ?? void 0
+  };
+  const data = await apiRequest(`${config.backendUrls.cart}/cart/`, {
+    method: "POST",
+    headers: { ...JSON_HEADERS, ...authHeaders(config, accessToken) },
+    body: JSON.stringify(payload),
+    fallbackErrorMessage: "Failed to add to cart"
+  });
+  return { ...data, items: parseItems(data.items || []) };
+}
+async function updateCartItem(config, accessToken, itemId, quantity) {
+  const data = await apiRequest(`${config.backendUrls.cart}/cart/${itemId}`, {
+    method: "PATCH",
+    headers: { ...JSON_HEADERS, ...authHeaders(config, accessToken) },
+    body: JSON.stringify({ quantity }),
+    fallbackErrorMessage: "Failed to update cart item"
+  });
+  return { ...data, items: parseItems(data.items || []) };
+}
+async function removeFromCart(config, accessToken, itemId) {
+  await apiRequest(`${config.backendUrls.cart}/cart/${itemId}`, {
+    method: "DELETE",
+    headers: authHeaders(config, accessToken),
+    fallbackErrorMessage: "Failed to remove cart item"
+  });
+}
+async function clearCart(config, accessToken) {
+  await apiRequest(`${config.backendUrls.cart}/cart/clear`, {
+    method: "DELETE",
+    headers: authHeaders(config, accessToken),
+    fallbackErrorMessage: "Failed to clear cart"
+  });
+}
+async function mergeGuestCart(config, accessToken, guestSessionId, guestItems) {
+  const payloadItems = guestItems.map((item) => ({
+    product_id: item.product_id,
+    variant_id: item.variant_id ?? void 0,
+    quantity: item.quantity,
+    custom_measurements: item.custom_measurements ?? void 0
+  }));
+  const headers = { ...JSON_HEADERS, ...authHeaders(config, accessToken) };
+  if (guestSessionId) {
+    headers["X-Guest-Session"] = guestSessionId;
+  }
+  const data = await apiRequest(`${config.backendUrls.cart}/cart/merge`, {
+    method: "POST",
+    headers,
+    body: JSON.stringify({ items: payloadItems }),
+    fallbackErrorMessage: "Failed to merge guest cart"
+  });
+  return { ...data, items: parseItems(data.items || []) };
+}
+async function mergeGuestCartIfPresent(config, accessToken, guestSessionId) {
+  const guestCart = await getGuestCart(config, guestSessionId);
+  if (!guestCart.items.length) return;
+  await mergeGuestCart(config, accessToken, guestSessionId, guestCart.items);
+}
+
+// src/utils/logger.ts
+var isDevelopment = true;
+var logger = {
+  log: (...args) => {
+    if (isDevelopment) {
+      console.log(...args);
+    }
+  },
+  warn: (...args) => {
+    if (isDevelopment) {
+      console.warn(...args);
+    }
+  },
+  /**
+   * Logs a warning to the console in development only.
+   * Alias for warn() for Python logging compatibility.
+   * In production, this is a no-op.
+   */
+  warning: (...args) => {
+    if (isDevelopment) {
+      console.warn(...args);
+    }
+  },
+  error: (...args) => {
+    if (isDevelopment) {
+      console.error(...args);
+    }
+  },
+  info: (...args) => {
+    if (isDevelopment) {
+      console.info(...args);
+    }
+  },
+  createScope: (scope) => ({
+    log: (...args) => {
+      if (isDevelopment) {
+        console.log(`[${scope}]`, ...args);
+      }
+    },
+    warn: (...args) => {
+      if (isDevelopment) {
+        console.warn(`[${scope}]`, ...args);
+      }
+    },
+    warning: (...args) => {
+      if (isDevelopment) {
+        console.warn(`[${scope}]`, ...args);
+      }
+    },
+    error: (...args) => {
+      if (isDevelopment) {
+        console.error(`[${scope}]`, ...args);
+      }
+    },
+    info: (...args) => {
+      if (isDevelopment) {
+        console.info(`[${scope}]`, ...args);
+      }
+    }
+  })
+};
+
+// src/context/sdk-context.tsx
+var import_react = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var SdkContext = (0, import_react.createContext)(null);
+function useSdkContext() {
+  return (0, import_react.useContext)(SdkContext);
+}
+function resolveHookArgs(explicitConfig, explicitToken, ctx) {
+  const config = explicitConfig ?? ctx?.config;
+  if (!config) {
+    throw new Error(
+      "[kasuvia-sdk] No SdkConfig found. Either pass config explicitly or wrap your app with <SdkProvider config={...}>."
+    );
+  }
+  const accessToken = explicitToken !== void 0 ? explicitToken : ctx?.accessToken ?? null;
+  return { config, accessToken };
+}
+
+// src/hooks/use-cart.ts
+var CartCtx = import_react2.default.createContext ? import_react2.default.createContext(null) : null;
+function useCart(config, accessToken, guestSessionId) {
+  const ctx = useSdkContext();
+  const resolved = resolveHookArgs(config, accessToken, ctx);
+  const resolvedConfig = resolved.config;
+  const resolvedToken = resolved.accessToken;
+  guestSessionId = guestSessionId !== void 0 ? guestSessionId : ctx?.guestSessionId ?? null;
+  const queryClient = (0, import_react_query.useQueryClient)();
+  const context = CartCtx ? (0, import_react2.useContext)(CartCtx) : null;
+  const isOpen = context ? context.isOpen : false;
+  const setOpen = context ? context.setOpen : () => {
+  };
+  const productTypeMismatch = context ? context.productTypeMismatch : null;
+  const setProductTypeMismatch = context ? context.setProductTypeMismatch : () => {
+  };
+  const cartQueryKey = ["cart", resolvedToken ?? guestSessionId ?? "anon"];
+  const cartQuery = (0, import_react_query.useQuery)({
+    queryKey: cartQueryKey,
+    queryFn: async () => {
+      if (resolvedToken) {
+        return getCart(resolvedConfig, resolvedToken);
+      }
+      if (guestSessionId) {
+        return getGuestCart(resolvedConfig, guestSessionId);
+      }
+      return { items: [], subtotal: 0, total: 0, item_count: 0, product_type: void 0 };
+    },
+    enabled: !!(resolvedToken || guestSessionId)
+  });
+  const addToCartMutation = (0, import_react_query.useMutation)({
+    mutationFn: async (item) => {
+      if (resolvedToken) {
+        return addToCart(resolvedConfig, resolvedToken, item);
+      }
+      if (guestSessionId) {
+        return addToGuestCart(resolvedConfig, guestSessionId, item);
+      }
+      throw new Error("Cannot add to cart: no access token or guest session ID provided.");
+    },
+    onSuccess: () => {
+      setProductTypeMismatch(null);
+      queryClient.invalidateQueries({ queryKey: ["cart"] });
+    },
+    // REAL BUG FIXED (2026-09-24), live-reported ("mixed products between
+    // physical to digital"): this read `error.status`/`error.data` - but
+    // apiRequest throws a real `ApiError` (utils/http-client.ts), whose
+    // fields are `.status`/`.body`/`.message`, not `.data` - `err.data` was
+    // always `undefined`, so this branch could never fire even when the
+    // backend genuinely sent a 409. Separately, kasuvia-cart-management's
+    // error body is a huma ErrorModel (`{detail: "plain string"}`), never a
+    // nested `{detail: {code, ...}}` object - this service's own
+    // TranslateServiceError doc comment already documents that convention
+    // (a bracketed "[CODE] ..." prefix in the message string, matching
+    // every other cart error). Parses that same convention here instead of
+    // a response shape the backend never produces.
+    onError: (error) => {
+      const err = error;
+      if (err.status !== 409 || !err.message?.startsWith("[CART_PRODUCT_TYPE_MISMATCH]")) return;
+      const match = err.message.match(/contains (\w+) items\. Add (\w+) items/i);
+      setProductTypeMismatch({
+        message: err.message.replace(/^\[CART_PRODUCT_TYPE_MISMATCH\]\s*/, ""),
+        existing_type: match?.[1] ?? "unknown",
+        new_type: match?.[2] ?? "unknown"
+      });
+    }
+  });
+  function recomputeCartTotals(previous, items2) {
+    const subtotal2 = items2.reduce((sum, i) => sum + i.unit_price * i.quantity, 0);
+    const item_count = items2.reduce((sum, i) => sum + i.quantity, 0);
+    return { ...previous, items: items2, subtotal: subtotal2, total: subtotal2, item_count };
+  }
+  const updateCartItemMutation = (0, import_react_query.useMutation)({
+    mutationFn: async ({ itemId, quantity }) => {
+      if (resolvedToken) {
+        return updateCartItem(resolvedConfig, resolvedToken, itemId, quantity);
+      }
+      if (guestSessionId) {
+        return updateGuestCartItemQuantity(resolvedConfig, guestSessionId, itemId, quantity);
+      }
+      throw new Error("Cannot update cart: no access token or guest session ID provided.");
+    },
+    onMutate: async ({ itemId, quantity }) => {
+      await queryClient.cancelQueries({ queryKey: cartQueryKey });
+      const previous = queryClient.getQueryData(cartQueryKey);
+      if (previous) {
+        const items2 = quantity > 0 ? previous.items.map((i) => i.id === itemId ? { ...i, quantity } : i) : previous.items.filter((i) => i.id !== itemId);
+        queryClient.setQueryData(cartQueryKey, recomputeCartTotals(previous, items2));
+      }
+      return { previous };
+    },
+    onError: (error, _variables, context2) => {
+      if (context2?.previous) {
+        queryClient.setQueryData(cartQueryKey, context2.previous);
+      }
+      logger.error("[useCart] Failed to update item quantity, rolled back:", error);
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["cart"] });
+    }
+  });
+  const removeFromCartMutation = (0, import_react_query.useMutation)({
+    mutationFn: async (itemId) => {
+      if (resolvedToken) {
+        return removeFromCart(resolvedConfig, resolvedToken, itemId);
+      }
+      if (guestSessionId) {
+        return removeFromGuestCart(resolvedConfig, guestSessionId, itemId);
+      }
+      throw new Error("Cannot remove from cart: no access token or guest session ID provided.");
+    },
+    onMutate: async (itemId) => {
+      await queryClient.cancelQueries({ queryKey: cartQueryKey });
+      const previous = queryClient.getQueryData(cartQueryKey);
+      if (previous) {
+        const items2 = previous.items.filter((i) => i.id !== itemId);
+        queryClient.setQueryData(cartQueryKey, recomputeCartTotals(previous, items2));
+      }
+      return { previous };
+    },
+    onError: (error, _itemId, context2) => {
+      if (context2?.previous) {
+        queryClient.setQueryData(cartQueryKey, context2.previous);
+      }
+      logger.error("[useCart] Failed to remove item, rolled back:", error);
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["cart"] });
+    }
+  });
+  const clearCartMutation = (0, import_react_query.useMutation)({
+    mutationFn: async () => {
+      if (resolvedToken) {
+        return clearCart(resolvedConfig, resolvedToken);
+      }
+      if (guestSessionId) {
+        return clearGuestCart(resolvedConfig, guestSessionId);
+      }
+      throw new Error("Cannot clear cart: no access token or guest session ID provided.");
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["cart"] });
+    }
+  });
+  const mergeGuestCartMutation = (0, import_react_query.useMutation)({
+    mutationFn: (sessionId) => {
+      if (!resolvedToken) {
+        logger.warn("[useCart] mergeGuestCart called without an access token \u2014 skipping merge.");
+        return Promise.resolve();
+      }
+      return mergeGuestCartIfPresent(resolvedConfig, resolvedToken, sessionId);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["cart"] });
+    }
+  });
+  const addItem = (product, variantId, quantity = 1, customMeasurements) => {
+    return addToCartMutation.mutate({
+      product_id: product.id,
+      variant_id: variantId,
+      quantity,
+      custom_measurements: customMeasurements ? JSON.stringify(customMeasurements) : void 0,
+      // Below are accepted by the mutation signature for UI convenience but stripped before the fetch:
+      product_slug: product.slug || "",
+      product_name: product.name,
+      image_url: product.images[0] || void 0
+    });
+  };
+  const items = cartQuery.data?.items ?? [];
+  const subtotal = cartQuery.data?.subtotal ?? 0;
+  const count = items.reduce((total, item) => total + item.quantity, 0);
+  const updateQty = (itemId, quantity) => {
+    return updateCartItemMutation.mutateAsync({ itemId, quantity });
+  };
+  const removeItem = (itemId) => {
+    return removeFromCartMutation.mutateAsync(itemId);
+  };
+  const handleClearCartAndAdd = () => {
+    clearCartMutation.mutate();
+    setProductTypeMismatch(null);
+  };
+  const handleKeepCurrentCart = () => {
+    setProductTypeMismatch(null);
+  };
+  return {
+    cart: cartQuery.data,
+    items,
+    count,
+    isOpen,
+    setOpen,
+    isLoading: cartQuery.isLoading,
+    error: cartQuery.error,
+    addToCart: addToCartMutation.mutate,
+    updateCartItem: updateCartItemMutation.mutate,
+    removeFromCart: removeFromCartMutation.mutate,
+    clearCart: clearCartMutation.mutate,
+    clear: clearCartMutation.mutate,
+    mergeGuestCart: mergeGuestCartMutation.mutate,
+    addItem,
+    updateQty,
+    removeItem,
+    subtotal,
+    productTypeMismatch,
+    handleClearCartAndAdd,
+    handleKeepCurrentCart
+  };
+}
+
+// src/components/cart/CartTypeMismatchBanner.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function CartTypeMismatchBanner({
+  mismatch,
+  onClearAndAdd,
+  onKeepCurrent,
+  className = "p-4 bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800 rounded-lg space-y-3",
+  titleClassName = "text-sm font-semibold text-amber-800 dark:text-amber-200",
+  messageClassName = "text-xs text-amber-700 dark:text-amber-300",
+  buttonGroupClassName = "flex items-center gap-2 pt-1",
+  confirmButtonClassName = "px-3 py-1.5 text-xs font-medium bg-amber-600 hover:bg-amber-700 text-white rounded transition-colors",
+  cancelButtonClassName = "px-3 py-1.5 text-xs font-medium border border-amber-300 dark:border-amber-700 text-amber-800 dark:text-amber-200 rounded hover:bg-amber-100 dark:hover:bg-amber-900/50 transition-colors"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: titleClassName, children: "Cart Product Type Conflict" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: messageClassName, children: mismatch.message || `Your cart currently contains ${mismatch.existing_type} items. You cannot mix ${mismatch.existing_type} and ${mismatch.new_type} items in the same order.` }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: buttonGroupClassName, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onClearAndAdd,
+          className: confirmButtonClassName,
+          children: "Clear Cart & Add New Item"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onKeepCurrent,
+          className: cancelButtonClassName,
+          children: "Keep Current Cart"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/utils/format.ts
+var BYTE_THRESHOLDS = [
+  { value: 1024 ** 5, label: "PB" },
+  { value: 1024 ** 4, label: "TB" },
+  { value: 1024 ** 3, label: "GB" },
+  { value: 1024 ** 2, label: "MB" },
+  { value: 1024 ** 1, label: "KB" }
+];
+function formatTimeString(time) {
+  const [hoursStr, minutesStr] = time.split(":");
+  const hours = parseInt(hoursStr, 10);
+  if (isNaN(hours) || minutesStr === void 0) return time;
+  const period = hours >= 12 ? "PM" : "AM";
+  const displayHours = hours % 12 || 12;
+  return `${displayHours}:${minutesStr} ${period}`;
+}
+function formatPrice(amount, currency, locale = "en-US") {
+  if (amount == null || isNaN(amount)) return "";
+  if (!currency) return `N/A ${amount.toLocaleString()}`;
+  const code = currency.toUpperCase();
+  try {
+    return new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency: code,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2
+    }).format(amount);
+  } catch {
+    return `${code} ${amount.toLocaleString()}`;
+  }
+}
+
+// src/components/cart/CartSidebar.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function CartSidebar({
+  onCheckout,
+  onClose,
+  formatPriceFn,
+  className = "flex flex-col h-full w-full max-w-md bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-800 shadow-xl",
+  headerClassName = "flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800",
+  titleClassName = "text-lg font-semibold text-gray-900 dark:text-gray-100",
+  bodyClassName = "flex-1 overflow-y-auto p-4 space-y-4",
+  footerClassName = "p-4 border-t border-gray-200 dark:border-gray-800 space-y-3 bg-gray-50/50 dark:bg-gray-900/50",
+  checkoutButtonClassName = "w-full py-3 px-4 bg-emerald-600 hover:bg-emerald-700 text-white font-medium rounded-lg transition-colors text-center block disabled:opacity-50"
+}) {
+  const {
+    items,
+    count,
+    subtotal,
+    isLoading,
+    updateQty,
+    removeItem,
+    productTypeMismatch,
+    handleClearCartAndAdd,
+    handleKeepCurrentCart,
+    setOpen
+  } = useCart();
+  const handleClose = () => {
+    setOpen(false);
+    if (onClose) onClose();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: headerClassName, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("h3", { className: titleClassName, children: [
+        "Shopping Cart (",
+        count,
+        ")"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: handleClose,
+          className: "p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200",
+          "aria-label": "Close cart",
+          children: "\u2715"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: bodyClassName, children: [
+      productTypeMismatch && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        CartTypeMismatchBanner,
+        {
+          mismatch: productTypeMismatch,
+          onClearAndAdd: handleClearCartAndAdd,
+          onKeepCurrent: handleKeepCurrentCart
+        }
+      ),
+      isLoading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CartItemSkeleton, { count: 3 }) : items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-center py-12 text-gray-500 dark:text-gray-400", children: "Your cart is empty" }) : items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        CartItem,
+        {
+          item,
+          onUpdateQty: updateQty,
+          onRemove: removeItem,
+          formatPriceFn
+        },
+        item.id
+      ))
+    ] }),
+    items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: footerClassName, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex justify-between items-center text-sm font-semibold text-gray-900 dark:text-gray-100", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Subtotal" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: formatPriceFn ? formatPriceFn(subtotal) : formatPrice(subtotal, void 0) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onCheckout,
+          disabled: items.length === 0,
+          className: checkoutButtonClassName,
+          children: "Proceed to Checkout"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/product/ProductCard.tsx
+var import_react4 = require("react");
+
+// src/components/shared/SmartImage.tsx
+var import_react3 = require("react");
+var import_framer_motion = require("framer-motion");
+var import_image = __toESM(require("next/image"));
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var isValidSrc = (url) => {
+  if (!url || typeof url !== "string") return false;
+  const s = url.trim();
+  if (s === "" || s === "null" || s === "undefined") return false;
+  return s.startsWith("/") || s.startsWith("http://") || s.startsWith("https://") || s.startsWith("data:image/") || s.startsWith("blob:");
+};
+function useImageState(src) {
+  const [isMounted, setIsMounted] = (0, import_react3.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react3.useState)(true);
+  const [hasError, setHasError] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    setIsMounted(true);
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    setIsLoading(true);
+    setHasError(false);
+  }, [src]);
+  const handleLoad = () => setIsLoading(false);
+  const handleError = () => {
+    setIsLoading(false);
+    setHasError(true);
+  };
+  return { isMounted, isLoading, hasError, handleLoad, handleError };
+}
+function ImagePlaceholder({ className, failed }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "div",
+    {
+      className: `relative overflow-hidden flex flex-col items-center justify-center gap-1 bg-muted/40 ${className}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react.ImageIcon, { className: "w-4 h-4 text-muted-foreground/50 shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] text-muted-foreground/70 text-center leading-tight px-1", children: failed ? "Failed to load" : "No image" })
+      ]
+    }
+  );
+}
+function ImageShimmer() {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "absolute inset-0 z-10 bg-muted/60 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "absolute inset-0 -translate-x-full animate-shimmer bg-linear-to-r from-transparent via-white/10 to-transparent" }) });
+}
+var SmartImage = (0, import_react3.forwardRef)(function SmartImage2({
+  src,
+  alt,
+  className = "",
+  imageClassName = "",
+  priority = false,
+  isRelative = true,
+  sizes = "100vw",
+  objectFit = "cover",
+  fallbackSrc,
+  suppressHydrationWarning = false,
+  style,
+  draggable
+}, ref) {
+  const { isMounted, isLoading, hasError, handleLoad, handleError } = useImageState(src);
+  const resolvedSrc = isValidSrc(src) ? src.trim() : null;
+  const fallback = isValidSrc(fallbackSrc) ? fallbackSrc.trim() : null;
+  if (!isMounted || !resolvedSrc && !fallback) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ImagePlaceholder, { className });
+  }
+  if (hasError) {
+    if (fallback) {
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "div",
+        {
+          className: `${isRelative ? "relative" : ""} overflow-hidden ${className}`,
+          style,
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            import_image.default,
+            {
+              ref,
+              src: fallback,
+              alt,
+              fill: true,
+              unoptimized: true,
+              sizes,
+              className: `object-${objectFit} ${imageClassName}`,
+              draggable
+            }
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ImagePlaceholder, { className, failed: true });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "div",
+    {
+      className: `${isRelative ? "relative" : ""} overflow-hidden ${className}`,
+      style,
+      children: [
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ImageShimmer, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_image.default,
+          {
+            ref,
+            src: resolvedSrc,
+            alt,
+            fill: true,
+            priority,
+            sizes,
+            unoptimized: true,
+            suppressHydrationWarning,
+            className: `object-${objectFit} ${imageClassName} transition-opacity duration-300 ${isLoading ? "opacity-0" : "opacity-100"}`,
+            onLoad: handleLoad,
+            onError: handleError,
+            draggable
+          }
+        )
+      ]
+    }
+  );
+});
+var SmartMotionImage = (0, import_react3.forwardRef)(function SmartMotionImage2({
+  src,
+  alt,
+  className = "",
+  imageClassName = "",
+  priority = false,
+  isRelative = true,
+  sizes = "100vw",
+  objectFit = "cover",
+  fallbackSrc,
+  style,
+  draggable,
+  ...motionProps
+}, ref) {
+  const { isMounted, isLoading, hasError, handleLoad, handleError } = useImageState(src);
+  const resolvedSrc = isValidSrc(src) ? src.trim() : null;
+  const fallback = isValidSrc(fallbackSrc) ? fallbackSrc.trim() : null;
+  if (!isMounted || !resolvedSrc && !fallback) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ImagePlaceholder, { className });
+  }
+  if (hasError) {
+    if (fallback) {
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_framer_motion.motion.div,
+        {
+          ref,
+          className: `${isRelative ? "relative" : ""} overflow-hidden ${className}`,
+          style,
+          ...motionProps,
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            import_image.default,
+            {
+              src: fallback,
+              alt,
+              fill: true,
+              unoptimized: true,
+              sizes,
+              className: `object-${objectFit} ${imageClassName}`,
+              draggable
+            }
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ImagePlaceholder, { className, failed: true });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    import_framer_motion.motion.div,
+    {
+      ref,
+      className: `${isRelative ? "relative" : ""} overflow-hidden ${className}`,
+      style,
+      ...motionProps,
+      children: [
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ImageShimmer, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_image.default,
+          {
+            src: resolvedSrc,
+            alt,
+            fill: true,
+            priority,
+            sizes,
+            unoptimized: true,
+            className: `object-${objectFit} ${imageClassName} transition-opacity duration-300 ${isLoading ? "opacity-0" : "opacity-100"}`,
+            onLoad: handleLoad,
+            onError: handleError,
+            draggable
+          }
+        )
+      ]
+    }
+  );
+});
+var SmartImage_default = SmartImage;
+
+// src/components/product/ProductCard.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function StarIcon({ half, gradientId }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { viewBox: "0 0 20 20", className: "w-3.5 h-3.5", "aria-hidden": "true", children: half ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("linearGradient", { id: gradientId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { offset: "50%", stopColor: "currentColor" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { offset: "50%", stopColor: "transparent", stopOpacity: "1" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "path",
+      {
+        fill: `url(#${gradientId})`,
+        stroke: "currentColor",
+        strokeWidth: "1",
+        d: "M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.79L10 14.9l-5.2 2.73.99-5.8-4.21-4.09 5.82-.85L10 1.5z"
+      }
+    )
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.79L10 14.9l-5.2 2.73.99-5.8-4.21-4.09 5.82-.85L10 1.5z"
+    }
+  ) });
+}
+function StarRow({ rating, idPrefix }) {
+  const stars = [];
+  for (let i = 1; i <= 5; i++) {
+    const diff = rating - (i - 1);
+    if (diff >= 0.75) stars.push(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StarIcon, { gradientId: `${idPrefix}-star-${i}` }, i));
+    else if (diff >= 0.25) stars.push(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StarIcon, { half: true, gradientId: `${idPrefix}-star-${i}` }, i));
+    else stars.push(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { viewBox: "0 0 20 20", className: "w-3.5 h-3.5 text-muted-foreground/30", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { fill: "currentColor", d: "M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.79L10 14.9l-5.2 2.73.99-5.8-4.21-4.09 5.82-.85L10 1.5z" }) }, i));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: stars });
+}
+function ProductCard({
+  product,
+  onSelectProduct,
+  onWishlistToggle,
+  isWishlistSaved = false,
+  showWishlistButton = false,
+  priority = false,
+  className = "flex flex-col h-full rounded-xl border bg-card overflow-hidden shadow-sm hover:shadow-md transition-shadow group",
+  imageContainerClassName = "w-full aspect-square",
+  imageClassName = "transition-transform duration-500 group-hover:scale-105",
+  titleClassName = "text-base font-semibold text-foreground line-clamp-1 cursor-pointer hover:underline",
+  priceClassName = "text-lg font-bold text-foreground",
+  buttonClassName = "w-full py-2.5 px-4 bg-primary hover:bg-primary/90 text-primary-foreground text-sm font-medium rounded-lg transition-colors text-center block mt-auto",
+  enableImageCarousel = true,
+  showCarouselDots = true,
+  showCarouselArrows = true,
+  activeDotClassName = "bg-primary w-4 h-1.5 rounded-full transition-all",
+  dotClassName = "bg-white/70 hover:bg-white w-1.5 h-1.5 rounded-full transition-all",
+  formatPriceFn,
+  badgeSlot,
+  showRating = true,
+  ratingClassName = "flex items-center gap-1 text-amber-500",
+  footerSlot
+}) {
+  const { addItem } = useCart();
+  const ratingIdPrefix = (0, import_react4.useId)();
+  const [currentImageIndex, setCurrentImageIndex] = (0, import_react4.useState)(0);
+  const touchStartX = (0, import_react4.useRef)(null);
+  const touchEndX = (0, import_react4.useRef)(null);
+  const productType = product.product_type;
+  const serviceType = product.service_type || "appointment";
+  const isConsultationRequired = product.service_requires_consultation;
+  const images = product.images && product.images.length > 0 ? product.images : [];
+  const hasMultipleImages = images.length > 1 && enableImageCarousel;
+  const hasRating = showRating && product.average_rating != null && product.rating_count > 0;
+  const handleCTA = () => {
+    if (productType === "physical" || productType === "digital") {
+      addItem(product);
+      return;
+    }
+    onSelectProduct?.(product);
+  };
+  const getCtaText = () => {
+    if (productType === "physical" || productType === "digital") return "Add to Cart";
+    if (productType === "bespoke") return "Start Commission";
+    if (productType === "service") {
+      if (isConsultationRequired || serviceType === "project") return "Get a Quote";
+      if (serviceType === "appointment") return "Book Appointment";
+      return "View Details";
+    }
+    return "View Details";
+  };
+  const handleNextImage = (e) => {
+    e?.stopPropagation();
+    if (!hasMultipleImages) return;
+    setCurrentImageIndex((prev) => (prev + 1) % images.length);
+  };
+  const handlePrevImage = (e) => {
+    e?.stopPropagation();
+    if (!hasMultipleImages) return;
+    setCurrentImageIndex((prev) => (prev - 1 + images.length) % images.length);
+  };
+  const handleTouchStart = (e) => {
+    if (!hasMultipleImages) return;
+    touchStartX.current = e.touches[0].clientX;
+  };
+  const handleTouchMove = (e) => {
+    if (!hasMultipleImages) return;
+    touchEndX.current = e.touches[0].clientX;
+  };
+  const handleTouchEnd = () => {
+    if (!hasMultipleImages || touchStartX.current === null || touchEndX.current === null) return;
+    const distance = touchStartX.current - touchEndX.current;
+    const isSwipeLeft = distance > 40;
+    const isSwipeRight = distance < -40;
+    if (isSwipeLeft) handleNextImage();
+    else if (isSwipeRight) handlePrevImage();
+    touchStartX.current = null;
+    touchEndX.current = null;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      "div",
+      {
+        className: "relative overflow-hidden cursor-pointer group/image",
+        onClick: () => onSelectProduct?.(product),
+        onTouchStart: handleTouchStart,
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
+        children: [
+          images.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            SmartImage,
+            {
+              src: images[currentImageIndex],
+              alt: `${product.name} - image ${currentImageIndex + 1}`,
+              className: imageContainerClassName,
+              imageClassName,
+              priority,
+              sizes: "(min-width: 1024px) 25vw, 50vw"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `${imageContainerClassName} flex items-center justify-center text-muted-foreground text-sm`, children: "No Image" }),
+          badgeSlot ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute top-2 left-2 z-10 flex flex-col gap-1", children: badgeSlot }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "absolute top-2 right-2 px-2 py-0.5 text-xs font-semibold rounded bg-black/60 text-white capitalize z-10", children: productType }),
+          showWishlistButton && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": isWishlistSaved ? "Remove from wishlist" : "Save to wishlist",
+              onClick: (e) => {
+                e.stopPropagation();
+                onWishlistToggle?.(product, e);
+              },
+              className: "absolute top-2 right-2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-card/80 backdrop-blur shadow-sm hover:bg-card transition-colors",
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                "svg",
+                {
+                  className: `w-4 h-4 ${isWishlistSaved ? "fill-red-500 text-red-500" : "text-muted-foreground"}`,
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" })
+                }
+              )
+            }
+          ),
+          hasMultipleImages && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+            showCarouselArrows && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Previous image",
+                  onClick: handlePrevImage,
+                  className: "absolute left-2 top-1/2 -translate-y-1/2 w-7 h-7 rounded-full bg-black/50 hover:bg-black/75 text-white flex items-center justify-center opacity-0 group-hover/image:opacity-100 transition-opacity z-10",
+                  children: "\u2039"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Next image",
+                  onClick: handleNextImage,
+                  className: "absolute right-2 top-1/2 -translate-y-1/2 w-7 h-7 rounded-full bg-black/50 hover:bg-black/75 text-white flex items-center justify-center opacity-0 group-hover/image:opacity-100 transition-opacity z-10",
+                  children: "\u203A"
+                }
+              )
+            ] }),
+            showCarouselDots && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 flex items-center gap-1 z-10 px-2 py-1 rounded-full bg-black/30 backdrop-blur-xs", children: images.map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Go to image ${idx + 1}`,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setCurrentImageIndex(idx);
+                },
+                className: idx === currentImageIndex ? activeDotClassName : dotClassName
+              },
+              idx
+            )) })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "p-4 flex flex-col flex-1 space-y-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: titleClassName, onClick: () => onSelectProduct?.(product), children: product.name }),
+      product.description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-xs text-muted-foreground line-clamp-2", children: product.description }),
+      hasRating && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: ratingClassName, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StarRow, { rating: product.average_rating, idPrefix: ratingIdPrefix }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "text-xs text-muted-foreground font-medium", children: [
+          product.average_rating.toFixed(1),
+          " (",
+          product.rating_count,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex items-center justify-between pt-2 mt-auto", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: priceClassName, children: formatPriceFn ? formatPriceFn(product.sale_price ?? product.base_price) : formatPrice(product.sale_price ?? product.base_price, product.currency) }) }),
+      footerSlot,
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: handleCTA,
+          className: buttonClassName,
+          children: getCtaText()
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/product/ProductGrid.tsx
+var import_react_query2 = require("@tanstack/react-query");
+
+// src/utils/graphql-url.ts
+var import_graphql_request = require("graphql-request");
+function resolveGraphQLEndpoint(url) {
+  if (typeof window === "undefined") return url;
+  try {
+    new URL(url);
+    return url;
+  } catch {
+    return `${window.location.origin}${url}`;
+  }
+}
+function createGraphQLClient(config, accessToken) {
+  const headers = {
+    "Content-Type": "application/json",
+    "Accept": "application/json",
+    "X-Storefront-Key": config.storefrontApiKey,
+    "X-Business-ID": config.businessId
+  };
+  if (accessToken) {
+    headers["Authorization"] = `Bearer ${accessToken}`;
+  }
+  return new import_graphql_request.GraphQLClient(resolveGraphQLEndpoint(`${config.backendUrls.store}/graphql`), { headers });
+}
+
+// src/generated/graphql.ts
+var GetStorefrontProductsDocument = { "kind": "Document", "definitions": [{ "kind": "OperationDefinition", "operation": "query", "name": { "kind": "Name", "value": "GetStorefrontProducts" }, "variableDefinitions": [{ "kind": "VariableDefinition", "variable": { "kind": "Variable", "name": { "kind": "Name", "value": "page" } }, "type": { "kind": "NonNullType", "type": { "kind": "NamedType", "name": { "kind": "Name", "value": "Int" } } } }, { "kind": "VariableDefinition", "variable": { "kind": "Variable", "name": { "kind": "Name", "value": "pageSize" } }, "type": { "kind": "NonNullType", "type": { "kind": "NamedType", "name": { "kind": "Name", "value": "Int" } } } }, { "kind": "VariableDefinition", "variable": { "kind": "Variable", "name": { "kind": "Name", "value": "collectionSlug" } }, "type": { "kind": "NamedType", "name": { "kind": "Name", "value": "String" } } }, { "kind": "VariableDefinition", "variable": { "kind": "Variable", "name": { "kind": "Name", "value": "search" } }, "type": { "kind": "NamedType", "name": { "kind": "Name", "value": "String" } } }, { "kind": "VariableDefinition", "variable": { "kind": "Variable", "name": { "kind": "Name", "value": "productType" } }, "type": { "kind": "NamedType", "name": { "kind": "Name", "value": "String" } } }], "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "storefront_products" }, "arguments": [{ "kind": "Argument", "name": { "kind": "Name", "value": "page" }, "value": { "kind": "Variable", "name": { "kind": "Name", "value": "page" } } }, { "kind": "Argument", "name": { "kind": "Name", "value": "pageSize" }, "value": { "kind": "Variable", "name": { "kind": "Name", "value": "pageSize" } } }, { "kind": "Argument", "name": { "kind": "Name", "value": "collectionSlug" }, "value": { "kind": "Variable", "name": { "kind": "Name", "value": "collectionSlug" } } }, { "kind": "Argument", "name": { "kind": "Name", "value": "search" }, "value": { "kind": "Variable", "name": { "kind": "Name", "value": "search" } } }, { "kind": "Argument", "name": { "kind": "Name", "value": "productType" }, "value": { "kind": "Variable", "name": { "kind": "Name", "value": "productType" } } }], "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "items" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "FragmentSpread", "name": { "kind": "Name", "value": "ProductFields" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "total" } }, { "kind": "Field", "name": { "kind": "Name", "value": "page" } }, { "kind": "Field", "name": { "kind": "Name", "value": "page_size" } }, { "kind": "Field", "name": { "kind": "Name", "value": "total_pages" } }] } }] } }, { "kind": "FragmentDefinition", "name": { "kind": "Name", "value": "ProductFields" }, "typeCondition": { "kind": "NamedType", "name": { "kind": "Name", "value": "Product" } }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "business_id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "name" } }, { "kind": "Field", "name": { "kind": "Name", "value": "slug" } }, { "kind": "Field", "name": { "kind": "Name", "value": "description" } }, { "kind": "Field", "name": { "kind": "Name", "value": "brand" } }, { "kind": "Field", "name": { "kind": "Name", "value": "product_type" } }, { "kind": "Field", "name": { "kind": "Name", "value": "requires_shipping" } }, { "kind": "Field", "name": { "kind": "Name", "value": "is_consumable" } }, { "kind": "Field", "name": { "kind": "Name", "value": "is_bespoke" } }, { "kind": "Field", "name": { "kind": "Name", "value": "is_physical" } }, { "kind": "Field", "name": { "kind": "Name", "value": "is_non_returnable" } }, { "kind": "Field", "name": { "kind": "Name", "value": "deposit_percentage" } }, { "kind": "Field", "name": { "kind": "Name", "value": "base_price" } }, { "kind": "Field", "name": { "kind": "Name", "value": "currency" } }, { "kind": "Field", "name": { "kind": "Name", "value": "sale_price" } }, { "kind": "Field", "name": { "kind": "Name", "value": "sale_start" } }, { "kind": "Field", "name": { "kind": "Name", "value": "sale_end" } }, { "kind": "Field", "name": { "kind": "Name", "value": "images" } }, { "kind": "Field", "name": { "kind": "Name", "value": "tags" } }, { "kind": "Field", "name": { "kind": "Name", "value": "custom_fields" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "label" } }, { "kind": "Field", "name": { "kind": "Name", "value": "unit" } }, { "kind": "Field", "name": { "kind": "Name", "value": "required" } }, { "kind": "Field", "name": { "kind": "Name", "value": "field_type" } }, { "kind": "Field", "name": { "kind": "Name", "value": "options" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "is_published" } }, { "kind": "Field", "name": { "kind": "Name", "value": "is_featured" } }, { "kind": "Field", "name": { "kind": "Name", "value": "is_popular" } }, { "kind": "Field", "name": { "kind": "Name", "value": "is_new" } }, { "kind": "Field", "name": { "kind": "Name", "value": "is_temporary" } }, { "kind": "Field", "name": { "kind": "Name", "value": "average_rating" } }, { "kind": "Field", "name": { "kind": "Name", "value": "rating_count" } }, { "kind": "Field", "name": { "kind": "Name", "value": "source_channel" } }, { "kind": "Field", "name": { "kind": "Name", "value": "source_channel_ref_id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "service_type" } }, { "kind": "Field", "name": { "kind": "Name", "value": "service_duration_minutes" } }, { "kind": "Field", "name": { "kind": "Name", "value": "service_location_type" } }, { "kind": "Field", "name": { "kind": "Name", "value": "service_coverage_radius_km" } }, { "kind": "Field", "name": { "kind": "Name", "value": "service_requires_consultation" } }, { "kind": "Field", "name": { "kind": "Name", "value": "service_max_capacity_per_slot" } }, { "kind": "Field", "name": { "kind": "Name", "value": "service_buffer_minutes" } }, { "kind": "Field", "name": { "kind": "Name", "value": "service_is_recurring" } }, { "kind": "Field", "name": { "kind": "Name", "value": "service_recurring_interval" } }, { "kind": "Field", "name": { "kind": "Name", "value": "service_project_based" } }, { "kind": "Field", "name": { "kind": "Name", "value": "digital_files" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "file_key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "display_name" } }, { "kind": "Field", "name": { "kind": "Name", "value": "sort_order" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "download_limit" } }, { "kind": "Field", "name": { "kind": "Name", "value": "download_expires_at" } }, { "kind": "Field", "name": { "kind": "Name", "value": "weight_kg" } }, { "kind": "Field", "name": { "kind": "Name", "value": "length_cm" } }, { "kind": "Field", "name": { "kind": "Name", "value": "width_cm" } }, { "kind": "Field", "name": { "kind": "Name", "value": "height_cm" } }, { "kind": "Field", "name": { "kind": "Name", "value": "created_at" } }, { "kind": "Field", "name": { "kind": "Name", "value": "updated_at" } }, { "kind": "Field", "name": { "kind": "Name", "value": "variants" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "product_id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "sku" } }, { "kind": "Field", "name": { "kind": "Name", "value": "attributes" } }, { "kind": "Field", "name": { "kind": "Name", "value": "price" } }, { "kind": "Field", "name": { "kind": "Name", "value": "images" } }, { "kind": "Field", "name": { "kind": "Name", "value": "weight_kg" } }, { "kind": "Field", "name": { "kind": "Name", "value": "is_active" } }, { "kind": "Field", "name": { "kind": "Name", "value": "inventory" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "product_id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "variant_id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "quantity" } }, { "kind": "Field", "name": { "kind": "Name", "value": "reserved" } }, { "kind": "Field", "name": { "kind": "Name", "value": "reorder_point" } }, { "kind": "Field", "name": { "kind": "Name", "value": "reorder_quantity" } }, { "kind": "Field", "name": { "kind": "Name", "value": "track_quantity" } }, { "kind": "Field", "name": { "kind": "Name", "value": "allow_backorder" } }, { "kind": "Field", "name": { "kind": "Name", "value": "available" } }, { "kind": "Field", "name": { "kind": "Name", "value": "is_in_stock" } }, { "kind": "Field", "name": { "kind": "Name", "value": "is_low_stock" } }, { "kind": "Field", "name": { "kind": "Name", "value": "updated_at" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "created_at" } }, { "kind": "Field", "name": { "kind": "Name", "value": "updated_at" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "collections" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "business_id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "name" } }, { "kind": "Field", "name": { "kind": "Name", "value": "slug" } }, { "kind": "Field", "name": { "kind": "Name", "value": "description" } }, { "kind": "Field", "name": { "kind": "Name", "value": "image_url" } }, { "kind": "Field", "name": { "kind": "Name", "value": "collection_type" } }, { "kind": "Field", "name": { "kind": "Name", "value": "rules" } }, { "kind": "Field", "name": { "kind": "Name", "value": "status" } }, { "kind": "Field", "name": { "kind": "Name", "value": "sort_order" } }, { "kind": "Field", "name": { "kind": "Name", "value": "created_at" } }, { "kind": "Field", "name": { "kind": "Name", "value": "updated_at" } }] } }] } }] };
+
+// src/services/product.service.ts
+function mapProductType(raw) {
+  switch (raw) {
+    case "PHYSICAL":
+      return "physical" /* PHYSICAL */;
+    case "DIGITAL":
+      return "digital" /* DIGITAL */;
+    case "SERVICE":
+      return "service" /* SERVICE */;
+    case "BESPOKE":
+      return "bespoke" /* BESPOKE */;
+    default: {
+      const _exhaustive = raw;
+      throw new Error(`Unhandled GraphQL ProductType member: ${_exhaustive}`);
+    }
+  }
+}
+function mapCustomFieldType(raw) {
+  if (raw === "text" || raw === "choice") return raw;
+  throw new Error(`Unrecognised custom field field_type from backend: "${raw}"`);
+}
+function mapProduct(raw) {
+  return {
+    ...raw,
+    product_type: mapProductType(raw.product_type),
+    custom_fields: raw.custom_fields.map((f) => ({
+      ...f,
+      unit: f.unit ?? void 0,
+      field_type: mapCustomFieldType(f.field_type)
+    })),
+    description: raw.description ?? void 0,
+    brand: raw.brand ?? void 0,
+    is_physical: raw.is_physical ?? void 0,
+    sale_price: raw.sale_price ?? void 0,
+    sale_start: raw.sale_start ?? void 0,
+    sale_end: raw.sale_end ?? void 0,
+    source_channel_ref_id: raw.source_channel_ref_id ?? void 0,
+    download_limit: raw.download_limit ?? void 0,
+    download_expires_at: raw.download_expires_at ?? void 0,
+    service_type: raw.service_type ?? void 0,
+    service_duration_minutes: raw.service_duration_minutes ?? void 0,
+    service_location_type: raw.service_location_type ?? void 0,
+    service_coverage_radius_km: raw.service_coverage_radius_km ?? void 0,
+    service_max_capacity_per_slot: raw.service_max_capacity_per_slot ?? void 0,
+    service_recurring_interval: raw.service_recurring_interval ?? void 0,
+    length_cm: raw.length_cm ?? void 0,
+    width_cm: raw.width_cm ?? void 0,
+    height_cm: raw.height_cm ?? void 0,
+    average_rating: raw.average_rating ?? void 0,
+    created_at: raw.created_at,
+    updated_at: raw.updated_at,
+    variants: raw.variants.map((v) => ({
+      ...v,
+      sku: v.sku ?? void 0,
+      attributes: v.attributes ? JSON.parse(v.attributes) : {},
+      price: v.price ?? void 0,
+      weight_kg: v.weight_kg ?? void 0,
+      inventory: v.inventory ? {
+        ...v.inventory,
+        variant_id: v.inventory.variant_id ?? void 0,
+        updated_at: v.inventory.updated_at
+      } : void 0,
+      created_at: v.created_at,
+      updated_at: v.updated_at
+    })),
+    collections: raw.collections.map((c) => ({
+      ...c,
+      business_id: c.business_id ?? void 0,
+      description: c.description ?? void 0,
+      image_url: c.image_url ?? void 0,
+      rules: c.rules ?? void 0,
+      created_at: c.created_at,
+      updated_at: c.updated_at
+    }))
+  };
+}
+function mapProductConnection(connection) {
+  return { ...connection, items: connection.items.map(mapProduct) };
+}
+async function getStorefrontProducts(config, params) {
+  const client = createGraphQLClient(config);
+  const data = await client.request(GetStorefrontProductsDocument, {
+    page: params?.page || 1,
+    pageSize: params?.pageSize || 20,
+    collectionSlug: params?.collectionSlug,
+    search: params?.search,
+    productType: params?.productType
+  });
+  return mapProductConnection(data.storefront_products);
+}
+
+// src/utils/cache.ts
+var CACHE_TIERS = {
+  none: { staleTime: 0, gcTime: 0 },
+  infinity: { staleTime: Infinity, gcTime: 0 },
+  low: { staleTime: 1e3 * 30, gcTime: 1e3 * 60 },
+  // 30s / 1m
+  medium: { staleTime: 1e3 * 60 * 5, gcTime: 1e3 * 60 * 10 },
+  // 5m / 10m
+  high: { staleTime: 1e3 * 60 * 30, gcTime: 1e3 * 60 * 60 }
+  // 30m / 1h
+};
+var isDevelopment2 = true;
+var getCacheTier = (tier) => {
+  if (isDevelopment2) return CACHE_TIERS.none;
+  return CACHE_TIERS[tier];
+};
+
+// src/components/product/ProductGrid.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function ProductGrid({
+  params,
+  onSelectProduct,
+  onWishlistToggle,
+  isWishlistSavedFn,
+  showWishlistButton = false,
+  formatPriceFn,
+  className = "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6",
+  cardClassName
+}) {
+  const ctx = useSdkContext();
+  const { config } = resolveHookArgs(void 0, void 0, ctx);
+  const { data, isLoading, error } = (0, import_react_query2.useQuery)({
+    queryKey: ["products", "grid", params],
+    queryFn: () => getStorefrontProducts(config, params),
+    ...getCacheTier("medium")
+  });
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CardSkeleton, { count: 8, containerClassName: className });
+  }
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "text-center py-12 text-destructive", children: "Failed to load products. Please try again." });
+  }
+  const products = data?.items || [];
+  if (products.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "text-center py-12 text-muted-foreground", children: "No products found." });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className, children: products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    ProductCard,
+    {
+      product,
+      onSelectProduct,
+      onWishlistToggle,
+      isWishlistSaved: isWishlistSavedFn ? isWishlistSavedFn(product) : false,
+      showWishlistButton,
+      formatPriceFn,
+      className: cardClassName
+    },
+    product.id
+  )) });
+}
+
+// src/components/booking/SlotPicker.tsx
+var import_react5 = require("react");
+
+// src/hooks/use-service-booking.ts
+var import_react_query3 = require("@tanstack/react-query");
+
+// src/services/service-booking.service.ts
+async function getAvailableSlots(config, productId, date, params) {
+  const query = new URLSearchParams({ date });
+  if (params?.staffId) query.set("staff_id", params.staffId);
+  if (params?.locationId) query.set("location_id", params.locationId);
+  if (params?.customerLatitude !== void 0) query.set("customer_latitude", String(params.customerLatitude));
+  if (params?.customerLongitude !== void 0) query.set("customer_longitude", String(params.customerLongitude));
+  return apiRequest(
+    `${config.backendUrls.store}/catalog/products/${productId}/available-slots?${query.toString()}`,
+    {
+      headers: storefrontHeaders(config),
+      fallbackErrorMessage: "Failed to get available slots"
+    }
+  );
+}
+
+// src/hooks/use-service-booking.ts
+function useAvailableSlots(config, productId, date, params) {
+  const ctx = useSdkContext();
+  const { config: cfg } = resolveHookArgs(config, void 0, ctx);
+  return (0, import_react_query3.useQuery)({
+    queryKey: ["available-slots", productId, date, params?.staffId, params?.locationId],
+    queryFn: () => getAvailableSlots(cfg, productId, date, params),
+    enabled: !!productId && !!date
+  });
+}
+
+// src/components/booking/SlotPicker.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function SlotPicker({
+  productId,
+  date,
+  staffId,
+  locationId,
+  onSelectSlot,
+  className = "space-y-4",
+  slotButtonClassName = "p-3 border rounded-lg text-sm text-center hover:border-primary focus:outline-none transition-colors"
+}) {
+  const { data, isLoading, error } = useAvailableSlots(void 0, productId, date, { staffId, locationId });
+  const [selectedTime, setSelectedTime] = (0, import_react5.useState)(null);
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-3 animate-pulse", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "h-12 bg-muted rounded-lg" }, i)) });
+  }
+  if (error || !data) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-xs text-destructive", children: "Failed to load available time slots. Please select a different date." });
+  }
+  if (!data.serviceable) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-xs text-muted-foreground py-4 text-center", children: data.reason || "This service isn't available for booking right now." });
+  }
+  if (data.available_slots.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-xs text-muted-foreground py-4 text-center", children: "No time slots available on this date." });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h4", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Available Time Slots" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-3", children: data.available_slots.map((time) => {
+      const isSelected = selectedTime === time;
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setSelectedTime(time);
+            onSelectSlot(time);
+          },
+          className: `${slotButtonClassName} ${isSelected ? "border-primary bg-primary/10 text-primary font-semibold" : "border-border text-foreground"}`,
+          children: formatTimeString(time)
+        },
+        time
+      );
+    }) })
+  ] });
+}
+
+// src/hooks/use-bespoke-availability.ts
+var import_react_query4 = require("@tanstack/react-query");
+
+// src/services/bespoke.service.ts
+async function checkAvailability(config, product_id) {
+  return apiRequest(`${config.backendUrls.store}/bespoke/capacity/availability/${product_id}`, {
+    headers: storefrontHeaders(config),
+    fallbackErrorMessage: "Failed to check bespoke availability"
+  });
+}
+async function approveBespokeDeliverable(config, accessToken, orderId) {
+  return apiRequest(`${config.backendUrls.store}/orders/${orderId}/bespoke/approve`, {
+    method: "POST",
+    headers: { ...JSON_HEADERS, ...authHeaders(config, accessToken) },
+    body: JSON.stringify({}),
+    fallbackErrorMessage: "Failed to approve deliverable"
+  });
+}
+async function requestBespokeRevision(config, accessToken, orderId, notes) {
+  return apiRequest(`${config.backendUrls.store}/orders/${orderId}/bespoke/request-revision`, {
+    method: "POST",
+    headers: { ...JSON_HEADERS, ...authHeaders(config, accessToken) },
+    body: JSON.stringify({ notes }),
+    fallbackErrorMessage: "Failed to request revision"
+  });
+}
+
+// src/hooks/use-bespoke-availability.ts
+function useBespokeAvailability(product_id, config) {
+  const ctx = useSdkContext();
+  const { config: cfg } = resolveHookArgs(config, void 0, ctx);
+  return (0, import_react_query4.useQuery)({
+    queryKey: ["bespoke-availability", product_id],
+    queryFn: () => checkAvailability(cfg, product_id),
+    enabled: !!product_id,
+    retry: false
+  });
+}
+function useApproveBespokeDeliverable(config, accessToken) {
+  const ctx = useSdkContext();
+  const { config: cfg, accessToken: token } = resolveHookArgs(config, accessToken, ctx);
+  const queryClient = (0, import_react_query4.useQueryClient)();
+  return (0, import_react_query4.useMutation)({
+    mutationFn: (orderId) => token ? approveBespokeDeliverable(cfg, token, orderId) : Promise.reject(new Error("No access token available")),
+    onSuccess: (_data, orderId) => {
+      queryClient.invalidateQueries({ queryKey: ["order", orderId] });
+      queryClient.invalidateQueries({ queryKey: ["orders"] });
+    }
+  });
+}
+function useRequestBespokeRevision(config, accessToken) {
+  const ctx = useSdkContext();
+  const { config: cfg, accessToken: token } = resolveHookArgs(config, accessToken, ctx);
+  const queryClient = (0, import_react_query4.useQueryClient)();
+  return (0, import_react_query4.useMutation)({
+    mutationFn: ({ orderId, notes }) => token ? requestBespokeRevision(cfg, token, orderId, notes) : Promise.reject(new Error("No access token available")),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["order", variables.orderId] });
+      queryClient.invalidateQueries({ queryKey: ["orders"] });
+    }
+  });
+}
+
+// src/components/bespoke/BespokeAvailabilityBadge.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function BespokeAvailabilityBadge({ productId, className = "inline-flex items-center gap-2 px-3 py-1 text-xs rounded-full font-medium" }) {
+  const { data: availability, isLoading } = useBespokeAvailability(productId);
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "h-5 w-28 bg-gray-200 dark:bg-gray-800 animate-pulse rounded-full" });
+  }
+  if (!availability) return null;
+  if (availability.is_available) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: `${className} bg-emerald-100 dark:bg-emerald-950 text-emerald-700 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-800`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-ping" }),
+      availability.available_slots,
+      " slots available this month"
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: `${className} bg-amber-100 dark:bg-amber-950 text-amber-700 dark:text-amber-300 border border-amber-200 dark:border-amber-800`, children: [
+    "Fully booked \u2014 Next available: ",
+    availability.next_available_date ? new Date(availability.next_available_date).toLocaleDateString() : "Next Month"
+  ] });
+}
+
+// src/components/bespoke/BespokeProgressTracker.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function BespokeProgressTracker({
+  stage,
+  className = "flex items-center w-full my-4",
+  activeStepClassName = "bg-emerald-600 text-white font-bold",
+  completedStepClassName = "bg-emerald-500 text-white",
+  inactiveStepClassName = "border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 text-gray-500"
+}) {
+  const stages = [
+    { key: "received", label: "Order Received" },
+    { key: "development", label: "In Development" },
+    { key: "finished", label: "Finished" },
+    { key: "dispatched", label: "Ready / Dispatched" }
+  ];
+  const currentIdx = stages.findIndex((s) => s.key === stage);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className, children: stages.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-1 flex-col items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex w-full items-center", children: [
+      i > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `h-0.5 flex-1 ${i <= currentIdx ? "bg-emerald-500" : "bg-gray-200 dark:bg-gray-800"}` }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `flex h-8 w-8 items-center justify-center rounded-full text-xs font-semibold ${i < currentIdx ? completedStepClassName : i === currentIdx ? activeStepClassName : inactiveStepClassName}`, children: i < currentIdx ? "\u2713" : i + 1 }),
+      i < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `h-0.5 flex-1 ${i < currentIdx ? "bg-emerald-500" : "bg-gray-200 dark:bg-gray-800"}` })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: `mt-2 text-center text-xs ${i === currentIdx ? "font-semibold text-gray-900 dark:text-gray-100" : "text-gray-500"}`, children: s.label })
+  ] }, s.key)) });
+}
+
+// src/components/orders/DeliverableReviewer.tsx
+var import_react6 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function DeliverableReviewer({ order, className = "space-y-4 p-4 border rounded-xl bg-muted/50" }) {
+  const [revisionNotes, setRevisionNotes] = (0, import_react6.useState)("");
+  const [showRevisionForm, setShowRevisionForm] = (0, import_react6.useState)(false);
+  const approveMutation = useApproveBespokeDeliverable();
+  const revisionMutation = useRequestBespokeRevision();
+  if (!order.bespoke_deliverable_submitted_at) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h4", { className: "text-xs font-bold uppercase tracking-wider text-foreground", children: "Deliverable" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-xs text-muted-foreground py-4 text-center", children: "The seller hasn't submitted a deliverable for review yet." })
+    ] });
+  }
+  const awaitingApproval = order.bespoke_status === "awaiting_approval";
+  const handleApprove = async () => {
+    try {
+      await approveMutation.mutateAsync(order.id);
+    } catch (error) {
+      logger.error(error);
+    }
+  };
+  const handleRequestRevision = async () => {
+    if (!revisionNotes.trim() || revisionNotes.trim().length < 10) return;
+    try {
+      await revisionMutation.mutateAsync({ orderId: order.id, notes: revisionNotes.trim() });
+      setShowRevisionForm(false);
+      setRevisionNotes("");
+    } catch (error) {
+      logger.error(error);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h4", { className: "text-xs font-bold uppercase tracking-wider text-foreground", children: "Deliverable" }),
+      order.bespoke_status && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `px-2 py-0.5 rounded text-[10px] font-semibold uppercase ${order.bespoke_status === "confirmed" ? "bg-primary/10 text-primary" : order.bespoke_status === "awaiting_approval" ? "bg-blue-500/10 text-blue-600 dark:text-blue-400" : "bg-amber-500/10 text-amber-600 dark:text-amber-400"}`, children: order.bespoke_status.replace("_", " ") })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "p-3 bg-card border rounded-lg space-y-2", children: [
+      order.bespoke_deliverable_url && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "a",
+        {
+          href: order.bespoke_deliverable_url,
+          target: "_blank",
+          rel: "noreferrer",
+          className: "text-xs text-primary hover:underline flex items-center gap-1",
+          children: "\u{1F4CE} View Deliverable"
+        }
+      ),
+      order.bespoke_deliverable_notes && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-xs text-muted-foreground", children: order.bespoke_deliverable_notes }),
+      (order.bespoke_revision_count ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { className: "text-[10px] text-muted-foreground", children: [
+        "Revisions requested: ",
+        order.bespoke_revision_count
+      ] }),
+      awaitingApproval && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2 pt-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleApprove,
+            disabled: approveMutation.isPending,
+            className: "px-3 py-1.5 bg-primary text-primary-foreground text-xs font-medium rounded hover:bg-primary/90 disabled:opacity-50",
+            children: approveMutation.isPending ? "Approving\u2026" : "Approve Deliverable"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowRevisionForm(!showRevisionForm),
+            className: "px-3 py-1.5 border text-xs font-medium rounded hover:bg-muted",
+            children: "Request Revision"
+          }
+        )
+      ] }),
+      showRevisionForm && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "pt-2 space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "textarea",
+          {
+            rows: 2,
+            value: revisionNotes,
+            onChange: (e) => setRevisionNotes(e.target.value),
+            placeholder: "Explain what needs to change (at least 10 characters)...",
+            className: "w-full p-2 border rounded text-xs bg-transparent"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleRequestRevision,
+            disabled: revisionMutation.isPending || revisionNotes.trim().length < 10,
+            className: "px-3 py-1 bg-amber-600 text-white text-xs font-medium rounded hover:bg-amber-700 disabled:opacity-50",
+            children: revisionMutation.isPending ? "Submitting\u2026" : "Submit Revision Request"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/shared/TruncatedValue.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function TruncatedValue({ value, fullValue, className = "", triggerClassName = "" }) {
+  const tooltipText = typeof fullValue === "string" ? fullValue : typeof value === "string" ? value : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "span",
+    {
+      title: tooltipText,
+      className: `truncate tabular-nums cursor-default inline-block max-w-full ${triggerClassName} ${className}`.trim(),
+      children: value
+    }
+  );
+}
+
+// src/components/shared/AddressAutocomplete.tsx
+var import_react7 = require("react");
+var import_lucide_react2 = require("lucide-react");
+
+// src/services/logistics.service.ts
+async function autocompleteAddress(config, q, country) {
+  const params = new URLSearchParams();
+  params.set("q", q);
+  if (country) params.set("country", country);
+  return apiRequest(`${config.backendUrls.store}/logistics/address/autocomplete?${params.toString()}`, {
+    headers: storefrontHeaders(config),
+    fallbackErrorMessage: "Failed to autocomplete address"
+  });
+}
+
+// src/components/shared/AddressAutocomplete.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function AddressAutocomplete({
+  value,
+  onChange,
+  onResolve,
+  country,
+  disabled,
+  placeholder = "Start typing an address\u2026",
+  className = "",
+  id,
+  config,
+  ...rest
+}) {
+  const ctx = useSdkContext();
+  const generatedId = (0, import_react7.useId)();
+  const fieldId = id ?? generatedId;
+  const [open, setOpen] = (0, import_react7.useState)(false);
+  const [highlight, setHighlight] = (0, import_react7.useState)(-1);
+  const [justPicked, setJustPicked] = (0, import_react7.useState)(false);
+  const [suggestions, setSuggestions] = (0, import_react7.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react7.useState)(false);
+  const wrapRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    if (!open || justPicked || disabled || !value || value.trim().length < 3) {
+      setSuggestions([]);
+      return;
+    }
+    let isMounted = true;
+    const timer = setTimeout(async () => {
+      setIsLoading(true);
+      try {
+        const { config: cfg } = resolveHookArgs(config, void 0, ctx);
+        const { results } = await autocompleteAddress(cfg, value, country);
+        if (isMounted) {
+          setSuggestions(
+            results.map((r) => ({
+              place_id: r.place_id,
+              display_name: r.display_name,
+              line1: r.line1,
+              city: r.city ?? void 0,
+              state: r.state ?? void 0,
+              postal_code: r.postal_code ?? void 0,
+              country: r.country_code ?? r.country ?? void 0,
+              latitude: r.latitude ?? void 0,
+              longitude: r.longitude ?? void 0
+            }))
+          );
+        }
+      } catch {
+        if (isMounted) setSuggestions([]);
+      } finally {
+        if (isMounted) setIsLoading(false);
+      }
+    }, 350);
+    return () => {
+      isMounted = false;
+      clearTimeout(timer);
+    };
+  }, [value, country, open, justPicked, disabled, config, ctx]);
+  (0, import_react7.useEffect)(() => {
+    const onDocClick = (e) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDocClick);
+    return () => document.removeEventListener("mousedown", onDocClick);
+  }, []);
+  const pick = (s) => {
+    onChange(s.line1 || value);
+    onResolve?.(s);
+    setJustPicked(true);
+    setOpen(false);
+    setHighlight(-1);
+  };
+  const showDropdown = open && !justPicked && (isLoading || suggestions.length > 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { ref: wrapRef, className: "relative w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative flex items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react2.MapPin, { className: "absolute left-3 w-4 h-4 text-muted-foreground pointer-events-none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "input",
+        {
+          id: fieldId,
+          value,
+          disabled,
+          placeholder,
+          autoComplete: "off",
+          className: `w-full h-10 pl-9 pr-9 py-2 text-sm bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50 ${className}`.trim(),
+          onChange: (e) => {
+            onChange(e.target.value);
+            setJustPicked(false);
+            setOpen(true);
+          },
+          onFocus: () => {
+            if (!justPicked) setOpen(true);
+          },
+          onKeyDown: (e) => {
+            if (!showDropdown) return;
+            if (e.key === "ArrowDown") {
+              e.preventDefault();
+              setHighlight((h) => Math.min(h + 1, suggestions.length - 1));
+            } else if (e.key === "ArrowUp") {
+              e.preventDefault();
+              setHighlight((h) => Math.max(h - 1, 0));
+            } else if (e.key === "Enter" && highlight >= 0 && suggestions[highlight]) {
+              e.preventDefault();
+              pick(suggestions[highlight]);
+            } else if (e.key === "Escape") {
+              setOpen(false);
+            }
+          },
+          ...rest
+        }
+      ),
+      isLoading ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react2.Loader2, { className: "absolute right-3 w-4 h-4 text-muted-foreground animate-spin" }) : justPicked ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react2.Check, { className: "absolute right-3 w-4 h-4 text-primary" }) : null
+    ] }),
+    showDropdown && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "absolute z-50 w-full mt-1 bg-card border rounded-lg shadow-lg max-h-60 overflow-y-auto", children: isLoading && suggestions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-2 px-3 py-3 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react2.Loader2, { className: "w-3.5 h-3.5 animate-spin" }),
+      " Searching addresses\u2026"
+    ] }) : suggestions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-3 py-3 text-sm text-muted-foreground", children: "No matches found. Enter address manually." }) : suggestions.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      "button",
+      {
+        type: "button",
+        onMouseEnter: () => setHighlight(i),
+        onClick: () => pick(s),
+        className: `w-full text-left flex items-start gap-2 px-3 py-2 text-sm transition-colors ${i === highlight ? "bg-muted" : "hover:bg-muted/50"}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react2.MapPin, { className: "w-3.5 h-3.5 mt-0.5 text-muted-foreground shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "block font-medium text-foreground truncate", children: s.line1 || s.display_name }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "block text-xs text-muted-foreground truncate", children: s.display_name })
+          ] })
+        ]
+      },
+      s.place_id || `${s.display_name}-${i}`
+    )) })
+  ] });
+}
+
+// src/components/shared/OfflineBanner.tsx
+var import_react8 = require("react");
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function OfflineBanner({
+  message = "You are currently offline. Check your network connection.",
+  className = ""
+}) {
+  const [isOffline, setIsOffline] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const handleOnline = () => setIsOffline(false);
+    const handleOffline = () => setIsOffline(true);
+    setIsOffline(!navigator.onLine);
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+    };
+  }, []);
+  if (!isOffline) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "div",
+    {
+      className: `bg-amber-500/10 border-b border-amber-500/20 px-4 py-2 text-amber-700 dark:text-amber-400 text-xs font-medium flex items-center justify-between animate-in slide-in-from-top-2 duration-300 ${className}`.trim(),
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react3.WifiOff, { className: "w-4 h-4 text-amber-500 shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: message })
+      ] })
+    }
+  );
+}
+
+// src/components/shared/MapPinDrop.tsx
+var import_react9 = require("react");
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function MapPinDrop({
+  initialLatitude = 6.5244,
+  initialLongitude = 3.3792,
+  onPinDrop,
+  value,
+  height = "300px",
+  disabled = false
+}) {
+  const [isMounted, setIsMounted] = (0, import_react9.useState)(false);
+  const [lat, setLat] = (0, import_react9.useState)(value?.latitude ?? initialLatitude);
+  const [lng, setLng] = (0, import_react9.useState)(value?.longitude ?? initialLongitude);
+  (0, import_react9.useEffect)(() => {
+    setIsMounted(true);
+  }, []);
+  (0, import_react9.useEffect)(() => {
+    if (value) {
+      setLat(value.latitude);
+      setLng(value.longitude);
+    }
+  }, [value]);
+  if (!isMounted) {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "div",
+      {
+        className: "w-full rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex items-center justify-center",
+        style: { height },
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react4.Loader2, { className: "w-6 h-6 text-gray-400 animate-spin" })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "w-full rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "p-4 flex flex-col gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between text-xs text-gray-500", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "Coordinates Selector" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { children: [
+          lat.toFixed(6),
+          ", ",
+          lng.toFixed(6)
+        ] })
+      ] }),
+      !disabled && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1", children: "Latitude" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "input",
+            {
+              type: "number",
+              step: "any",
+              value: lat,
+              onChange: (e) => {
+                const val = parseFloat(e.target.value) || 0;
+                setLat(val);
+                onPinDrop?.({ latitude: val, longitude: lng });
+              },
+              className: "w-full h-9 px-2 text-xs border border-gray-300 dark:border-gray-700 rounded bg-transparent"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1", children: "Longitude" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "input",
+            {
+              type: "number",
+              step: "any",
+              value: lng,
+              onChange: (e) => {
+                const val = parseFloat(e.target.value) || 0;
+                setLng(val);
+                onPinDrop?.({ latitude: lat, longitude: val });
+              },
+              className: "w-full h-9 px-2 text-xs border border-gray-300 dark:border-gray-700 rounded bg-transparent"
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "px-3 py-2 bg-gray-50 dark:bg-gray-800/50 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-500", children: disabled ? "Location view only" : "Adjust coordinates to fine-tune map location" })
+  ] });
+}
+
+// src/components/shared/SearchableInput.tsx
+var import_react10 = require("react");
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function SearchableInput({
+  items,
+  value,
+  onSelect,
+  placeholder = "Search...",
+  disabled = false,
+  isLoading = false,
+  className = "",
+  onSearchChange,
+  debounceMs = 300
+}) {
+  const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
+  const [search, setSearch] = (0, import_react10.useState)("");
+  const inputRef = (0, import_react10.useRef)(null);
+  const dropdownRef = (0, import_react10.useRef)(null);
+  const debounceRef = (0, import_react10.useRef)(void 0);
+  const selectedItem = items.find((item) => item.value === value);
+  (0, import_react10.useEffect)(() => {
+    if (selectedItem) {
+      setSearch(selectedItem.label);
+    }
+  }, [selectedItem]);
+  const handleSearchChange = (newValue) => {
+    setSearch(newValue);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      onSearchChange?.(newValue);
+    }, debounceMs);
+  };
+  const handleSelect = (item) => {
+    onSelect(item.value);
+    setSearch(item.label);
+    setIsOpen(false);
+  };
+  const handleClear = () => {
+    setSearch("");
+    onSelect("");
+    inputRef.current?.focus();
+  };
+  const serverSearch = typeof onSearchChange === "function";
+  const filteredItems = serverSearch ? items : items.filter(
+    (item) => item.label.toLowerCase().includes(search.toLowerCase()) || item.description?.toLowerCase().includes(search.toLowerCase())
+  );
+  (0, import_react10.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "input",
+        {
+          ref: inputRef,
+          value: search,
+          onChange: (e) => handleSearchChange(e.target.value),
+          onFocus: () => setIsOpen(true),
+          placeholder,
+          disabled,
+          className: `w-full h-10 px-3 pr-8 text-sm bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50 ${className}`.trim()
+        }
+      ),
+      search && !disabled && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: handleClear,
+          className: "absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react5.X, { className: "w-4 h-4" })
+        }
+      )
+    ] }),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "div",
+      {
+        ref: dropdownRef,
+        className: "absolute z-50 w-full mt-1 bg-card border rounded-lg shadow-lg max-h-64 overflow-y-auto",
+        children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "p-3 text-center text-xs text-muted-foreground", children: "Loading options\u2026" }) : filteredItems.length > 0 ? filteredItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          "div",
+          {
+            onClick: () => handleSelect(item),
+            className: "flex items-center justify-between py-2 px-3 cursor-pointer hover:bg-muted transition-colors",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
+                item.icon,
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "font-medium text-sm text-foreground truncate", children: item.label }),
+                  item.description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "text-xs text-muted-foreground truncate", children: item.description })
+                ] })
+              ] }),
+              value === item.value && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react5.Check, { className: "w-4 h-4 text-primary shrink-0" })
+            ]
+          },
+          item.value
+        )) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "p-4 text-center text-sm text-muted-foreground", children: "No results found" })
+      }
+    )
+  ] });
+}
+
+// src/components/shared/SearchablePopover.tsx
+var import_react11 = require("react");
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function SearchablePopover({
+  items,
+  value,
+  onSelect,
+  placeholder = "Select an option",
+  searchPlaceholder = "Search...",
+  emptyMessage = "No results found.",
+  disabled = false,
+  isLoading = false,
+  triggerClassName = "",
+  contentClassName = "",
+  onSearchChange,
+  searchValue,
+  hasNextPage = false,
+  isFetchingNextPage = false,
+  onFetchNextPage,
+  resolvedSelectedItem
+}) {
+  const [open, setOpen] = (0, import_react11.useState)(false);
+  const [query, setQuery] = (0, import_react11.useState)("");
+  const popoverRef = (0, import_react11.useRef)(null);
+  const serverSearch = typeof onSearchChange === "function";
+  const activeSearch = serverSearch ? searchValue ?? "" : query;
+  const selectedItem = resolvedSelectedItem ?? items.find((item) => item.value === value);
+  (0, import_react11.useEffect)(() => {
+    const handleClickOutside = (e) => {
+      if (popoverRef.current && !popoverRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleSearch = (text) => {
+    if (serverSearch) {
+      onSearchChange?.(text);
+    } else {
+      setQuery(text);
+    }
+  };
+  const filteredItems = serverSearch ? items : items.filter(
+    (item) => item.label.toLowerCase().includes(query.toLowerCase()) || item.description?.toLowerCase().includes(query.toLowerCase())
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ref: popoverRef, className: "relative w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: () => setOpen((prev) => !prev),
+        className: `w-full h-10 px-3 py-2 text-sm bg-background border border-input rounded-lg flex items-center justify-between font-medium text-foreground disabled:opacity-50 ${triggerClassName}`.trim(),
+        children: [
+          selectedItem ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-2 truncate", children: [
+            selectedItem.icon,
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: selectedItem.label })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-muted-foreground", children: placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react6.ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 text-muted-foreground" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "div",
+      {
+        className: `absolute z-50 mt-1 w-full bg-card border rounded-lg shadow-xl overflow-hidden p-2 ${contentClassName}`.trim(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "input",
+            {
+              type: "text",
+              value: activeSearch,
+              onChange: (e) => handleSearch(e.target.value),
+              placeholder: searchPlaceholder,
+              className: "w-full h-9 px-3 text-xs bg-muted border border-input rounded mb-2 focus:outline-none"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "max-h-60 overflow-y-auto space-y-1", children: [
+            isLoading ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "p-3 text-center text-xs text-muted-foreground flex items-center justify-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react6.Loader2, { className: "w-4 h-4 animate-spin" }),
+              " Loading options\u2026"
+            ] }) : filteredItems.length > 0 ? filteredItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onSelect(item.value);
+                  setOpen(false);
+                },
+                className: "w-full text-left flex items-center justify-between py-2 px-3 rounded text-xs hover:bg-muted transition-colors",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
+                    item.icon,
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "truncate", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "font-semibold text-foreground", children: item.label }),
+                      item.description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "text-[10px] text-muted-foreground", children: item.description })
+                    ] })
+                  ] }),
+                  value === item.value && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react6.Check, { className: "h-4 w-4 text-primary shrink-0" })
+                ]
+              },
+              item.value
+            )) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "p-3 text-center text-xs text-muted-foreground", children: emptyMessage }),
+            hasNextPage && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => onFetchNextPage?.(),
+                disabled: isFetchingNextPage,
+                className: "w-full py-1 text-center text-[11px] text-primary font-semibold hover:underline",
+                children: isFetchingNextPage ? "Loading more..." : "Load more..."
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/shared/LucideReactIcon.tsx
+var LucideIcons = __toESM(require("lucide-react"));
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var toPascalCase = (str) => {
+  return str.replace(/[-_]+/g, " ").replace(/\s+(.)/g, (_, c) => c.toUpperCase()).replace(/^(.)/, (_, c) => c.toUpperCase());
+};
+var LucideReactIcon = ({ icon, ...props }) => {
+  if (!icon || typeof icon === "boolean" || typeof icon === "number" || Array.isArray(icon)) {
+    return null;
+  }
+  if (typeof icon === "function" || typeof icon === "object" && icon !== null && ("$$typeof" in icon || "render" in icon)) {
+    const Component = icon;
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Component, { size: props.size ?? 24, color: props.color ?? "currentColor", strokeWidth: props.strokeWidth ?? 2, ...props });
+  }
+  const iconObj = typeof icon === "object" && icon !== null ? icon : null;
+  const rawName = typeof icon === "string" ? icon : typeof iconObj?.name === "string" ? iconObj.name : typeof iconObj?.icon === "string" ? iconObj.icon : null;
+  if (!rawName) return null;
+  const pascalName = toPascalCase(rawName);
+  const IconComponent = LucideIcons[pascalName] || LucideIcons[rawName];
+  if (!IconComponent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "span",
+      {
+        style: {
+          fontSize: props.size ?? 24,
+          color: props.color ?? "currentColor"
+        },
+        className: "flex items-center justify-center text-xs font-medium text-center break-all leading-tight",
+        children: rawName
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconComponent, { size: props.size ?? 24, color: props.color ?? "currentColor", strokeWidth: props.strokeWidth ?? 2, ...props });
+};
+
+// src/components/shared/UnsavedChangesGuard.tsx
+var import_react12 = require("react");
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function useUnsavedChanges(options = {}) {
+  const {
+    browserMessage = "You have unsaved changes. If you leave, your work will be lost.",
+    dialogTitle = "Unsaved Changes",
+    dialogBody = "You have unsaved changes. If you leave now, all your progress will be lost."
+  } = options;
+  const [isDirty, setIsDirty] = (0, import_react12.useState)(false);
+  const [dialogOpen, setDialogOpen] = (0, import_react12.useState)(false);
+  const pendingActionRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
+    if (!isDirty) return;
+    const handler = (e) => {
+      e.preventDefault();
+      e.returnValue = browserMessage;
+      return browserMessage;
+    };
+    window.addEventListener("beforeunload", handler);
+    return () => window.removeEventListener("beforeunload", handler);
+  }, [isDirty, browserMessage]);
+  const markDirty = (0, import_react12.useCallback)(() => setIsDirty(true), []);
+  const resetDirty = (0, import_react12.useCallback)(() => {
+    setIsDirty(false);
+    setDialogOpen(false);
+    pendingActionRef.current = null;
+  }, []);
+  const guardedNavigate = (0, import_react12.useCallback)(
+    (action) => {
+      if (!isDirty) {
+        action();
+        return;
+      }
+      pendingActionRef.current = action;
+      setDialogOpen(true);
+    },
+    [isDirty]
+  );
+  const handleStay = (0, import_react12.useCallback)(() => {
+    setDialogOpen(false);
+    pendingActionRef.current = null;
+  }, []);
+  const handleLeave = (0, import_react12.useCallback)(() => {
+    setDialogOpen(false);
+    setIsDirty(false);
+    const action = pendingActionRef.current;
+    pendingActionRef.current = null;
+    action?.();
+  }, []);
+  return {
+    isDirty,
+    markDirty,
+    resetDirty,
+    guardedNavigate,
+    dialogProps: {
+      open: dialogOpen,
+      onStay: handleStay,
+      onLeave: handleLeave,
+      title: dialogTitle,
+      body: dialogBody
+    }
+  };
+}
+function UnsavedChangesDialog({
+  open,
+  onStay,
+  onLeave,
+  title = "Unsaved Changes",
+  body = "You have unsaved changes. If you leave now, all your progress will be lost."
+}) {
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-in fade-in duration-200", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "w-full max-w-md bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-2xl space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col items-center text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-12 h-12 rounded-xl bg-amber-500/10 flex items-center justify-center mb-3 text-amber-500", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react7.AlertTriangle, { className: "w-6 h-6" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h3", { className: "text-lg font-bold text-gray-900 dark:text-gray-100", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1 leading-relaxed", children: body })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col sm:flex-row gap-2 pt-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onStay,
+          className: "flex-1 h-10 px-4 text-xs font-semibold rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 hover:bg-gray-50",
+          children: "Stay & Keep Editing"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onLeave,
+          className: "flex-1 h-10 px-4 text-xs font-semibold rounded-xl bg-red-600 text-white hover:bg-red-700",
+          children: "Leave Without Saving"
+        }
+      )
+    ] })
+  ] }) });
+}
+
+// src/components/shared/MultiSelectPicker.tsx
+var import_react13 = require("react");
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function MultiSelectPicker({
+  selected,
+  onChange,
+  options = [],
+  isLoading = false,
+  isFetchingNextPage = false,
+  hasNextPage = false,
+  onFetchNextPage,
+  placeholder = "Search or type to add...",
+  onCreateOption,
+  onSearchChange,
+  searchValue
+}) {
+  const [open, setOpen] = (0, import_react13.useState)(false);
+  const serverSearch = typeof onSearchChange === "function";
+  const [localSearch, setLocalSearch] = (0, import_react13.useState)("");
+  const search = serverSearch ? searchValue ?? "" : localSearch;
+  const setSearch = serverSearch ? onSearchChange : setLocalSearch;
+  const inputRef = (0, import_react13.useRef)(null);
+  const containerRef = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
+    const handler = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+        setSearch("");
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [setSearch]);
+  const filtered = options.filter(
+    (opt) => (serverSearch || opt.name.toLowerCase().includes(search.toLowerCase())) && !selected.includes(opt.name)
+  );
+  const showCustomOption = search.trim().length > 0 && !options.some((opt) => opt.name.toLowerCase() === search.trim().toLowerCase()) && !selected.some((s) => s.toLowerCase() === search.trim().toLowerCase());
+  const addItem = (name) => {
+    onChange([...selected, name]);
+    setSearch("");
+    inputRef.current?.focus();
+  };
+  const removeItem = (name) => {
+    onChange(selected.filter((s) => s !== name));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref: containerRef, className: "relative w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      "div",
+      {
+        onClick: () => {
+          setOpen(true);
+          inputRef.current?.focus();
+        },
+        className: `relative flex flex-wrap items-center gap-1.5 w-full cursor-text min-h-[42px] rounded-lg px-3 py-1.5 border border-input bg-background text-foreground ${open ? "ring-2 ring-ring border-ring" : ""}`,
+        children: [
+          selected.map((name) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+            "span",
+            {
+              className: "inline-flex items-center gap-1 rounded px-2 py-0.5 text-xs font-semibold bg-muted text-foreground border",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "truncate max-w-[140px]", children: name }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      removeItem(name);
+                    },
+                    className: "rounded p-0.5 hover:bg-accent",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react8.X, { className: "h-3 w-3" })
+                  }
+                )
+              ]
+            },
+            name
+          )),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              value: search,
+              onChange: (e) => {
+                setSearch(e.target.value);
+                setOpen(true);
+              },
+              onFocus: () => setOpen(true),
+              placeholder: selected.length === 0 ? placeholder : "",
+              className: "flex-1 min-w-[120px] bg-transparent outline-none text-xs font-medium h-6 text-foreground placeholder:text-muted-foreground"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            import_lucide_react8.ChevronDown,
+            {
+              className: `h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 ${open ? "rotate-180" : ""}`
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute z-50 mt-1 w-full rounded-lg border bg-card text-foreground shadow-lg overflow-hidden p-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "max-h-60 overflow-y-auto space-y-1", children: isLoading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "p-3 text-center text-xs text-muted-foreground", children: "Loading options\u2026" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+      filtered.length === 0 && !showCustomOption && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "p-3 text-center text-xs text-muted-foreground", children: "No options found" }),
+      filtered.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => addItem(opt.name),
+          className: "w-full text-left px-3 py-2 rounded-md flex items-center gap-2 hover:bg-muted transition-colors text-xs",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-6 w-6 shrink-0 rounded bg-muted flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react8.Hash, { className: "h-3 w-3 text-muted-foreground" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "font-semibold truncate", children: opt.name }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react8.Plus, { className: "h-3.5 w-3.5 text-primary shrink-0" })
+          ]
+        },
+        opt.id
+      )),
+      hasNextPage && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => onFetchNextPage?.(),
+          disabled: isFetchingNextPage,
+          className: "w-full py-1.5 text-center text-xs text-primary font-semibold hover:underline",
+          children: isFetchingNextPage ? "Loading more..." : "Load more..."
+        }
+      ),
+      showCustomOption && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            if (onCreateOption) {
+              onCreateOption(search.trim());
+            } else {
+              addItem(search.trim());
+            }
+            setSearch("");
+          },
+          className: "w-full text-left px-3 py-2 rounded-md flex items-center gap-2 bg-primary/10 text-primary font-bold text-xs hover:bg-primary/20",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react8.Plus, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { children: [
+              'Create "',
+              search.trim(),
+              '"'
+            ] })
+          ]
+        }
+      )
+    ] }) }) })
+  ] });
+}
+
+// src/components/shared/ImageEditorModal.tsx
+var import_react14 = require("react");
+var import_framer_motion2 = require("framer-motion");
+var import_lucide_react9 = require("lucide-react");
+var import_sonner = require("sonner");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var HANDLE_SIZE = 14;
+var DEFAULT_CROP = { x: 0.05, y: 0.05, w: 0.9, h: 0.9 };
+var ASPECT_PRESETS = [
+  { label: "Free", ratio: void 0, icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Move, { className: "w-3.5 h-3.5" }) },
+  { label: "Original", ratio: -1, icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Image, { className: "w-3.5 h-3.5" }) },
+  { label: "1 : 1", ratio: 1, icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Square, { className: "w-3.5 h-3.5" }) },
+  { label: "16 : 9", ratio: 16 / 9, icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Tv, { className: "w-3.5 h-3.5" }) },
+  { label: "9 : 16", ratio: 9 / 16, icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Smartphone, { className: "w-3.5 h-3.5" }) },
+  { label: "4 : 3", ratio: 4 / 3, icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.RectangleHorizontal, { className: "w-3.5 h-3.5" }) },
+  { label: "3 : 4", ratio: 3 / 4, icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.RectangleVertical, { className: "w-3.5 h-3.5" }) },
+  { label: "4 : 5", ratio: 4 / 5, icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.RectangleVertical, { className: "w-3.5 h-3.5" }) },
+  { label: "3 : 2", ratio: 3 / 2, icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.RectangleHorizontal, { className: "w-3.5 h-3.5" }) },
+  { label: "2 : 3", ratio: 2 / 3, icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.RectangleVertical, { className: "w-3.5 h-3.5" }) }
+];
+var HANDLE_DEFS = [
+  { key: "nw", cursor: "nwse-resize", style: { left: -7, top: -7 } },
+  { key: "ne", cursor: "nesw-resize", style: { right: -7, top: -7 } },
+  { key: "sw", cursor: "nesw-resize", style: { left: -7, bottom: -7 } },
+  { key: "se", cursor: "nwse-resize", style: { right: -7, bottom: -7 } },
+  { key: "n", cursor: "ns-resize", style: { left: "calc(50% - 7px)", top: -7, width: 14 } },
+  { key: "s", cursor: "ns-resize", style: { left: "calc(50% - 7px)", bottom: -7, width: 14 } },
+  { key: "w", cursor: "ew-resize", style: { top: "calc(50% - 7px)", left: -7, height: 14 } },
+  { key: "e", cursor: "ew-resize", style: { top: "calc(50% - 7px)", right: -7, height: 14 } }
+];
+function InlineSlider({
+  value,
+  onValueChange,
+  min,
+  max,
+  step = 1,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    "input",
+    {
+      type: "range",
+      min,
+      max,
+      step,
+      value: value[0],
+      onChange: (e) => onValueChange([parseFloat(e.target.value)]),
+      className: `w-full h-1.5 bg-muted rounded-lg appearance-none cursor-pointer accent-primary ${className ?? ""}`
+    }
+  );
+}
+function ImageEditorModal({
+  open,
+  onOpenChange,
+  onImageSelect,
+  aspectRatio: initialAspectRatio,
+  maxFileSize = 10 * 1024 * 1024,
+  acceptedFormats = ["image/jpeg", "image/png", "image/webp"],
+  maxDimension = 4e3,
+  initialFile = null,
+  outputFormat = "image/jpeg",
+  outputQuality = 0.92,
+  minWidth,
+  minHeight
+}) {
+  const [imageSrc, setImageSrc] = (0, import_react14.useState)(null);
+  const [fileName, setFileName] = (0, import_react14.useState)("");
+  const [sourceDimensions, setSourceDimensions] = (0, import_react14.useState)(null);
+  const [activeTab, setActiveTab] = (0, import_react14.useState)("crop");
+  const [pan, setPan] = (0, import_react14.useState)({ x: 0, y: 0 });
+  const [zoom, setZoom] = (0, import_react14.useState)(1);
+  const [rotation, setRotation] = (0, import_react14.useState)(0);
+  const [flipX, setFlipX] = (0, import_react14.useState)(false);
+  const [flipY, setFlipY] = (0, import_react14.useState)(false);
+  const [brightness, setBrightness] = (0, import_react14.useState)(0);
+  const [contrast, setContrast] = (0, import_react14.useState)(0);
+  const [saturation, setSaturation] = (0, import_react14.useState)(0);
+  const [blur, setBlur] = (0, import_react14.useState)(0);
+  const [activePresetRatio, setActivePresetRatio] = (0, import_react14.useState)(initialAspectRatio);
+  const [cropBox, setCropBox] = (0, import_react14.useState)(DEFAULT_CROP);
+  const [isDraggingBox, setIsDraggingBox] = (0, import_react14.useState)(false);
+  const [isProcessing, setIsProcessing] = (0, import_react14.useState)(false);
+  const [showCamera, setShowCamera] = (0, import_react14.useState)(false);
+  const [isCameraStarting, setIsCameraStarting] = (0, import_react14.useState)(false);
+  const [cameraSupported] = (0, import_react14.useState)(
+    () => typeof navigator !== "undefined" && !!navigator.mediaDevices?.getUserMedia
+  );
+  const frameRef = (0, import_react14.useRef)(null);
+  const canvasRef = (0, import_react14.useRef)(null);
+  const fileInputRef = (0, import_react14.useRef)(null);
+  const videoRef = (0, import_react14.useRef)(null);
+  const cameraStreamRef = (0, import_react14.useRef)(null);
+  const loadedInitialFileRef = (0, import_react14.useRef)(null);
+  const dragStartRef = (0, import_react14.useRef)(null);
+  const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+  const effectiveAspectRatio = (0, import_react14.useMemo)(() => {
+    if (activePresetRatio === -1 && sourceDimensions) {
+      return sourceDimensions.width / sourceDimensions.height;
+    }
+    return activePresetRatio && activePresetRatio > 0 ? activePresetRatio : void 0;
+  }, [activePresetRatio, sourceDimensions]);
+  const isSourceBelowMin = (0, import_react14.useMemo)(() => {
+    if (!sourceDimensions) return false;
+    return minWidth && sourceDimensions.width < minWidth || minHeight && sourceDimensions.height < minHeight;
+  }, [sourceDimensions, minWidth, minHeight]);
+  const filterStyle = (0, import_react14.useMemo)(() => {
+    const b = 100 + brightness;
+    const c = 100 + contrast;
+    const s = 100 + saturation;
+    return `brightness(${b}%) contrast(${c}%) saturate(${s}%) blur(${blur}px)`;
+  }, [brightness, contrast, saturation, blur]);
+  const resetEdits = (0, import_react14.useCallback)(() => {
+    setPan({ x: 0, y: 0 });
+    setZoom(1);
+    setRotation(0);
+    setFlipX(false);
+    setFlipY(false);
+    setBrightness(0);
+    setContrast(0);
+    setSaturation(0);
+    setBlur(0);
+    setCropBox(DEFAULT_CROP);
+    setActivePresetRatio(initialAspectRatio);
+  }, [initialAspectRatio]);
+  const resetModal = (0, import_react14.useCallback)(() => {
+    setImageSrc(null);
+    setSourceDimensions(null);
+    setFileName("");
+    setShowCamera(false);
+    resetEdits();
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  }, [resetEdits]);
+  const stopCamera = (0, import_react14.useCallback)(() => {
+    cameraStreamRef.current?.getTracks().forEach((t) => t.stop());
+    cameraStreamRef.current = null;
+  }, []);
+  const handleClose = (0, import_react14.useCallback)(() => {
+    stopCamera();
+    resetModal();
+    onOpenChange(false);
+  }, [stopCamera, resetModal, onOpenChange]);
+  (0, import_react14.useEffect)(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") handleClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, handleClose]);
+  (0, import_react14.useEffect)(() => {
+    document.body.style.overflow = open ? "hidden" : "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [open]);
+  (0, import_react14.useEffect)(() => {
+    if (!showCamera) return;
+    let cancelled = false;
+    (async () => {
+      setIsCameraStarting(true);
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" }, audio: false });
+        if (cancelled) {
+          stream.getTracks().forEach((t) => t.stop());
+          return;
+        }
+        cameraStreamRef.current = stream;
+        if (videoRef.current) {
+          videoRef.current.srcObject = stream;
+          await videoRef.current.play();
+        }
+      } catch (err) {
+        if (!cancelled) {
+          import_sonner.toast.error("Camera access denied", {
+            description: err instanceof Error ? err.message : "Grant camera permission in your browser settings."
+          });
+          setShowCamera(false);
+        }
+      } finally {
+        if (!cancelled) setIsCameraStarting(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [showCamera]);
+  (0, import_react14.useEffect)(() => () => {
+    cameraStreamRef.current?.getTracks().forEach((t) => t.stop());
+  }, []);
+  const loadFile = (0, import_react14.useCallback)(
+    (file) => {
+      if (file.size > maxFileSize) {
+        import_sonner.toast.error("File too large", { description: `Maximum file size is ${(maxFileSize / 1024 / 1024).toFixed(1)} MB.` });
+        return;
+      }
+      if (!acceptedFormats.includes(file.type)) {
+        import_sonner.toast.error("Unsupported file format", {
+          description: `Accepted formats: ${acceptedFormats.map((f) => f.split("/")[1]?.toUpperCase()).join(", ")}`
+        });
+        return;
+      }
+      if (file.type === "image/svg+xml") {
+        onImageSelect(file, file.name);
+        onOpenChange(false);
+        import_sonner.toast.success("Image selected");
+        return;
+      }
+      setFileName(file.name);
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const dataUrl = e.target?.result;
+        const img = new Image();
+        img.onload = () => {
+          setSourceDimensions({ width: img.naturalWidth, height: img.naturalHeight });
+          setImageSrc(dataUrl);
+          setCropBox(DEFAULT_CROP);
+          setPan({ x: 0, y: 0 });
+          setZoom(1);
+          if (minWidth && img.naturalWidth < minWidth || minHeight && img.naturalHeight < minHeight) {
+            import_sonner.toast.info("Low-resolution image", {
+              description: `Source is ${img.naturalWidth}\xD7${img.naturalHeight}px. It will be upscaled to meet the ${minWidth ?? img.naturalWidth}\xD7${minHeight ?? img.naturalHeight}px target.`
+            });
+          }
+        };
+        img.src = dataUrl;
+      };
+      reader.readAsDataURL(file);
+    },
+    [maxFileSize, acceptedFormats, minWidth, minHeight, onImageSelect, onOpenChange]
+  );
+  const handleFileChange = (0, import_react14.useCallback)(
+    (e) => {
+      const file = e.target.files?.[0];
+      if (file) loadFile(file);
+    },
+    [loadFile]
+  );
+  const capturePhoto = (0, import_react14.useCallback)(() => {
+    const video = videoRef.current;
+    if (!video || video.readyState < 2) return;
+    const canvas = document.createElement("canvas");
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.drawImage(video, 0, 0);
+    canvas.toBlob(
+      (blob) => {
+        if (!blob) return;
+        const file = new File([blob], `capture-${Date.now()}.jpg`, { type: "image/jpeg" });
+        stopCamera();
+        setShowCamera(false);
+        loadFile(file);
+      },
+      "image/jpeg",
+      0.92
+    );
+  }, [loadFile, stopCamera]);
+  (0, import_react14.useEffect)(() => {
+    if (open && initialFile && loadedInitialFileRef.current !== initialFile) {
+      loadedInitialFileRef.current = initialFile;
+      loadFile(initialFile);
+    }
+    if (!open) loadedInitialFileRef.current = null;
+  }, [open, initialFile, loadFile]);
+  const applyAspectRatioToCropBox = (0, import_react14.useCallback)(
+    (ratio) => {
+      if (!ratio || ratio <= 0 || !frameRef.current) return;
+      const rect = frameRef.current.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0) return;
+      const vpAR = rect.width / rect.height;
+      const targetFractionAR = ratio / vpAR;
+      setCropBox((cur) => {
+        let { x, y, w, h } = cur;
+        const cx = x + w / 2;
+        const cy = y + h / 2;
+        if (w / h > targetFractionAR) {
+          w = h * targetFractionAR;
+        } else {
+          h = w / targetFractionAR;
+        }
+        w = clamp(w, 0.1, 1);
+        h = clamp(h, 0.1, 1);
+        x = clamp(cx - w / 2, 0, 1 - w);
+        y = clamp(cy - h / 2, 0, 1 - h);
+        return { x, y, w, h };
+      });
+    },
+    []
+  );
+  const handleSelectPreset = (0, import_react14.useCallback)(
+    (preset) => {
+      setActivePresetRatio(preset.ratio);
+      if (preset.ratio === -1 && sourceDimensions) {
+        applyAspectRatioToCropBox(sourceDimensions.width / sourceDimensions.height);
+      } else {
+        applyAspectRatioToCropBox(preset.ratio);
+      }
+    },
+    [sourceDimensions, applyAspectRatioToCropBox]
+  );
+  const startDrag = (0, import_react14.useCallback)(
+    (e, handle) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!frameRef.current) return;
+      const frameRect = frameRef.current.getBoundingClientRect();
+      setIsDraggingBox(true);
+      dragStartRef.current = {
+        handle,
+        startBox: { ...cropBox },
+        startMousePx: { x: e.clientX, y: e.clientY },
+        frameRect
+      };
+      const onMove = (me) => {
+        const ref = dragStartRef.current;
+        if (!ref) return;
+        const { handle: h, startBox: sb, startMousePx: sm, frameRect: r } = ref;
+        const dx = (me.clientX - sm.x) / r.width;
+        const dy = (me.clientY - sm.y) / r.height;
+        setCropBox(() => {
+          let { x, y, w, h: _h } = { ...sb };
+          if (h === "body") {
+            x = clamp(x + dx, 0, 1 - w);
+            y = clamp(y + dy, 0, 1 - _h);
+          } else {
+            let x1 = x, y1 = y, x2 = x + w, y2 = y + _h;
+            if (h === "nw" || h === "w" || h === "sw") x1 = clamp(x + dx, 0, x2 - 0.05);
+            if (h === "ne" || h === "e" || h === "se") x2 = clamp(x + w + dx, x1 + 0.05, 1);
+            if (h === "nw" || h === "n" || h === "ne") y1 = clamp(y + dy, 0, y2 - 0.05);
+            if (h === "sw" || h === "s" || h === "se") y2 = clamp(y + _h + dy, y1 + 0.05, 1);
+            w = x2 - x1;
+            _h = y2 - y1;
+            if (effectiveAspectRatio && effectiveAspectRatio > 0) {
+              const vpAR = r.width / r.height;
+              const tAR = effectiveAspectRatio / vpAR;
+              if (h === "n" || h === "s") {
+                w = clamp(_h * tAR, 0.05, 1 - x1);
+                x2 = x1 + w;
+              } else {
+                _h = clamp(w / tAR, 0.05, 1 - y1);
+                y2 = y1 + _h;
+              }
+            }
+            x = clamp(x1, 0, 1);
+            y = clamp(y1, 0, 1);
+            w = clamp(x2 - x, 0.05, 1 - x);
+            _h = clamp(y2 - y, 0.05, 1 - y);
+          }
+          return { x, y, w, h: _h };
+        });
+      };
+      const onUp = () => {
+        setIsDraggingBox(false);
+        dragStartRef.current = null;
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        window.removeEventListener("pointercancel", onUp);
+      };
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+      window.addEventListener("pointercancel", onUp);
+    },
+    [cropBox, effectiveAspectRatio]
+  );
+  const handleFramePointerDown = (0, import_react14.useCallback)(
+    (e) => {
+      if (e.target.closest("[data-crop-handle]")) return;
+      e.preventDefault();
+      const sx = e.clientX, sy = e.clientY;
+      const spx = pan.x, spy = pan.y;
+      const onMove = (me) => setPan({ x: spx + me.clientX - sx, y: spy + me.clientY - sy });
+      const onUp = () => {
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+      };
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+    },
+    [pan]
+  );
+  const handleApply = (0, import_react14.useCallback)(async () => {
+    if (!imageSrc || !canvasRef.current || !frameRef.current) return;
+    setIsProcessing(true);
+    try {
+      const image = new Image();
+      image.src = imageSrc;
+      await new Promise((res, rej) => {
+        image.onload = () => res();
+        image.onerror = () => rej(new Error("Image failed to load"));
+      });
+      const origW = image.naturalWidth;
+      const origH = image.naturalHeight;
+      const rad = rotation * Math.PI / 180;
+      const absSin = Math.abs(Math.sin(rad));
+      const absCos = Math.abs(Math.cos(rad));
+      const rotW = origW * absCos + origH * absSin;
+      const rotH = origW * absSin + origH * absCos;
+      const offscreen = document.createElement("canvas");
+      offscreen.width = Math.ceil(rotW);
+      offscreen.height = Math.ceil(rotH);
+      const offCtx = offscreen.getContext("2d");
+      offCtx.imageSmoothingEnabled = true;
+      offCtx.imageSmoothingQuality = "high";
+      offCtx.filter = filterStyle;
+      offCtx.translate(rotW / 2, rotH / 2);
+      offCtx.rotate(rad);
+      offCtx.scale(flipX ? -1 : 1, flipY ? -1 : 1);
+      offCtx.drawImage(image, -origW / 2, -origH / 2);
+      const vpRect = frameRef.current.getBoundingClientRect();
+      const vpW = vpRect.width, vpH = vpRect.height;
+      const baseScale = Math.min(vpW / rotW, vpH / rotH);
+      const effectiveScale = baseScale * zoom;
+      const displayedW = rotW * effectiveScale;
+      const displayedH = rotH * effectiveScale;
+      const marginX = (vpW - displayedW) / 2 + pan.x;
+      const marginY = (vpH - displayedH) / 2 + pan.y;
+      const cropPxX = cropBox.x * vpW, cropPxY = cropBox.y * vpH;
+      const cropPxW = cropBox.w * vpW, cropPxH = cropBox.h * vpH;
+      const sx = clamp((cropPxX - marginX) / effectiveScale, 0, rotW);
+      const sy = clamp((cropPxY - marginY) / effectiveScale, 0, rotH);
+      const sx2 = clamp((cropPxX + cropPxW - marginX) / effectiveScale, 0, rotW);
+      const sy2 = clamp((cropPxY + cropPxH - marginY) / effectiveScale, 0, rotH);
+      const sw = Math.max(1, sx2 - sx);
+      const sh = Math.max(1, sy2 - sy);
+      let outW = sw, outH = sh;
+      const maxSide = Math.max(outW, outH);
+      if (maxDimension && maxSide > maxDimension) {
+        const ds = maxDimension / maxSide;
+        outW *= ds;
+        outH *= ds;
+      }
+      if (minWidth && outW < minWidth) {
+        const us = minWidth / outW;
+        outW = minWidth;
+        outH *= us;
+      }
+      if (minHeight && outH < minHeight) {
+        const us = minHeight / outH;
+        outH = minHeight;
+        outW *= us;
+      }
+      outW = Math.round(Math.max(1, outW));
+      outH = Math.round(Math.max(1, outH));
+      const outputCanvas = canvasRef.current;
+      outputCanvas.width = outW;
+      outputCanvas.height = outH;
+      const outCtx = outputCanvas.getContext("2d");
+      outCtx.imageSmoothingEnabled = true;
+      outCtx.imageSmoothingQuality = "high";
+      if (outputFormat === "image/jpeg") {
+        outCtx.fillStyle = "#fff";
+        outCtx.fillRect(0, 0, outW, outH);
+      }
+      outCtx.drawImage(offscreen, sx, sy, sw, sh, 0, 0, outW, outH);
+      outputCanvas.toBlob(
+        (blob) => {
+          if (!blob) {
+            import_sonner.toast.error("Failed to process image. Please try again.");
+            return;
+          }
+          const ext = outputFormat === "image/png" ? "png" : "jpg";
+          const baseName = fileName.replace(/\.[^./]+$/, "") || "edited-image";
+          onImageSelect(blob, `${baseName}.${ext}`);
+          resetModal();
+          onOpenChange(false);
+          import_sonner.toast.success("Image updated successfully");
+        },
+        outputFormat,
+        outputQuality
+      );
+    } catch (err) {
+      import_sonner.toast.error("Failed to process image", {
+        description: err instanceof Error ? err.message : "Please try again."
+      });
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [
+    imageSrc,
+    rotation,
+    flipX,
+    flipY,
+    zoom,
+    pan,
+    cropBox,
+    fileName,
+    filterStyle,
+    maxDimension,
+    minWidth,
+    minHeight,
+    outputFormat,
+    outputQuality,
+    onImageSelect,
+    onOpenChange,
+    resetModal
+  ]);
+  if (!open) return null;
+  const btnBase = "inline-flex items-center justify-center rounded-md text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50";
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_framer_motion2.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "fixed inset-0 z-50 select-none flex", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "absolute inset-0 bg-black/70 backdrop-blur-sm", onClick: handleClose }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      import_framer_motion2.motion.div,
+      {
+        initial: { opacity: 0, scale: 0.98 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: 0.98 },
+        transition: { duration: 0.15, ease: "easeOut" },
+        className: "relative z-10 flex flex-col w-full h-full bg-background text-foreground overflow-hidden",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Studio Image Editor",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-2 px-3 sm:px-4 h-11 border-b border-border bg-card shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Wand2, { className: "w-4 h-4 text-primary shrink-0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-sm font-semibold text-foreground leading-none truncate", children: "Studio Editor" }),
+              sourceDimensions && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "text-[11px] text-muted-foreground hidden sm:inline truncate", children: [
+                "\xB7 ",
+                sourceDimensions.width,
+                "\xD7",
+                sourceDimensions.height,
+                "px",
+                minWidth && minHeight ? ` (min ${minWidth}\xD7${minHeight})` : ""
+              ] }),
+              isSourceBelowMin && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "hidden sm:inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded-full bg-amber-500/15 text-amber-600 dark:text-amber-400 border border-amber-500/30 shrink-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Info, { className: "w-3 h-3" }),
+                "Upscale"
+              ] })
+            ] }),
+            imageSrc && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center bg-muted rounded-md p-0.5 gap-0.5 shrink-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  id: "editor-tab-crop",
+                  onClick: () => setActiveTab("crop"),
+                  className: [
+                    "flex items-center gap-1 px-2.5 py-1 rounded text-xs font-medium transition-all",
+                    activeTab === "crop" ? "bg-background text-foreground shadow-sm font-semibold" : "text-muted-foreground hover:text-foreground"
+                  ].join(" "),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Crop, { className: "w-3 h-3 text-primary" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "Crop" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  id: "editor-tab-adjust",
+                  onClick: () => setActiveTab("adjust"),
+                  className: [
+                    "flex items-center gap-1 px-2.5 py-1 rounded text-xs font-medium transition-all",
+                    activeTab === "adjust" ? "bg-background text-foreground shadow-sm font-semibold" : "text-muted-foreground hover:text-foreground"
+                  ].join(" "),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Sliders, { className: "w-3 h-3 text-secondary" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "Adjust" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-1 shrink-0", children: [
+              imageSrc && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: resetEdits,
+                  className: `${btnBase} h-7 text-xs px-2.5 text-muted-foreground hover:text-foreground hover:bg-muted border border-transparent rounded-md`,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.RotateCcw, { className: "w-3 h-3 sm:mr-1" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hidden sm:inline", children: "Reset" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleClose,
+                  id: "editor-close-btn",
+                  className: `${btnBase} h-7 w-7 rounded-full text-muted-foreground hover:text-foreground hover:bg-muted`,
+                  "aria-label": "Close editor",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.X, { className: "w-3.5 h-3.5" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex-1 flex flex-col overflow-hidden min-h-0", children: !imageSrc ? (
+            /* ── Upload / Camera screen ─────────────────────────── */
+            showCamera ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex-1 flex flex-col items-center justify-center p-6 bg-background", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "w-full max-w-sm space-y-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "relative aspect-video rounded-xl overflow-hidden border border-border bg-muted flex items-center justify-center", children: [
+                isCameraStarting && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-background/80 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Loader2, { className: "w-6 h-6 animate-spin text-primary" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: "w-full h-full object-cover" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      stopCamera();
+                      setShowCamera(false);
+                    },
+                    className: `${btnBase} flex-1 bg-muted border border-border text-foreground hover:bg-muted/80 h-9 px-4 rounded-lg`,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.X, { className: "w-4 h-4 mr-1.5" }),
+                      " Cancel"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: capturePhoto,
+                    disabled: isCameraStarting,
+                    id: "camera-capture-btn",
+                    className: `${btnBase} flex-1 bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 rounded-lg font-medium`,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Camera, { className: "w-4 h-4 mr-1.5" }),
+                      " Capture"
+                    ]
+                  }
+                )
+              ] })
+            ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex-1 flex flex-col items-center justify-center p-6 bg-background", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "w-full max-w-sm border-2 border-dashed border-border hover:border-primary/50 transition-colors rounded-2xl p-8 text-center space-y-5 bg-card/60", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-14 h-14 bg-primary/10 text-primary rounded-2xl flex items-center justify-center mx-auto border border-primary/20", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Upload, { className: "w-7 h-7" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-base font-semibold text-foreground", children: "Select an Image" }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("p", { className: "text-xs text-muted-foreground", children: [
+                  "JPEG, PNG or WebP \xB7 up to ",
+                  (maxFileSize / 1024 / 1024).toFixed(0),
+                  " MB"
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-wrap items-center justify-center gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    id: "editor-choose-file-btn",
+                    onClick: () => fileInputRef.current?.click(),
+                    className: `${btnBase} bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-6 rounded-xl font-medium shadow-md`,
+                    children: "Choose File"
+                  }
+                ),
+                cameraSupported && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    id: "editor-camera-btn",
+                    onClick: () => setShowCamera(true),
+                    className: `${btnBase} bg-card border border-border text-foreground hover:bg-muted h-9 px-5 rounded-xl font-medium`,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Camera, { className: "w-4 h-4 mr-1.5" }),
+                      " Camera"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("input", { ref: fileInputRef, type: "file", className: "hidden", accept: acceptedFormats.join(","), onChange: handleFileChange })
+            ] }) })
+          ) : (
+            /* ── Editing workspace ──────────────────────────────── */
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex-1 relative bg-muted/30 overflow-hidden select-none min-h-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  "div",
+                  {
+                    className: "absolute inset-0 pointer-events-none opacity-[0.15]",
+                    style: {
+                      backgroundImage: "radial-gradient(circle, hsl(var(--muted-foreground)/0.6) 1px, transparent 1px)",
+                      backgroundSize: "20px 20px"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "absolute top-2 left-2 z-30 flex items-center bg-card/90 border border-border rounded-md shadow-sm backdrop-blur-sm", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      id: "editor-zoom-out",
+                      onClick: () => setZoom((z) => Math.max(0.2, z - 0.15)),
+                      className: "h-6 w-6 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors",
+                      title: "Zoom out",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.ZoomOut, { className: "w-3 h-3" })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "w-9 text-center font-mono text-[10px] text-foreground font-medium", children: [
+                    Math.round(zoom * 100),
+                    "%"
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      id: "editor-zoom-in",
+                      onClick: () => setZoom((z) => Math.min(5, z + 0.15)),
+                      className: "h-6 w-6 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors",
+                      title: "Zoom in",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.ZoomIn, { className: "w-3 h-3" })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "h-3 w-px bg-border mx-0.5" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      id: "editor-fit-btn",
+                      onClick: () => {
+                        setZoom(1);
+                        setPan({ x: 0, y: 0 });
+                      },
+                      className: "h-6 w-6 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors",
+                      title: "Fit to view",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Maximize2, { className: "w-3 h-3" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                  "div",
+                  {
+                    ref: frameRef,
+                    onPointerDown: handleFramePointerDown,
+                    className: "absolute inset-3 touch-none cursor-grab active:cursor-grabbing",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                        "img",
+                        {
+                          src: imageSrc,
+                          alt: "Editor preview",
+                          draggable: false,
+                          className: "max-w-full max-h-full object-contain pointer-events-none select-none block",
+                          style: {
+                            transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom * (flipX ? -1 : 1)}, ${zoom * (flipY ? -1 : 1)}) rotate(${rotation}deg)`,
+                            filter: filterStyle,
+                            transition: isDraggingBox ? "none" : "transform 0.1s ease-out"
+                          }
+                        }
+                      ) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "absolute inset-0 pointer-events-none z-10", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                        "div",
+                        {
+                          className: "absolute",
+                          style: {
+                            left: `${cropBox.x * 100}%`,
+                            top: `${cropBox.y * 100}%`,
+                            width: `${cropBox.w * 100}%`,
+                            height: `${cropBox.h * 100}%`,
+                            boxShadow: "0 0 0 9999px rgba(0,0,0,0.55)"
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                              "div",
+                              {
+                                "data-crop-handle": "body",
+                                onPointerDown: (e) => startDrag(e, "body"),
+                                className: "absolute inset-0 border-2 border-white/90 cursor-move pointer-events-auto group",
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `absolute inset-0 grid grid-cols-3 grid-rows-3 transition-opacity ${isDraggingBox ? "opacity-50" : "opacity-0 group-hover:opacity-30"}`, children: Array.from({ length: 9 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: [i % 3 !== 2 ? "border-r border-white/50" : "", i < 6 ? "border-b border-white/50" : ""].join(" ") }, i)) }),
+                                  [
+                                    "absolute -top-px -left-px border-t-2 border-l-2",
+                                    "absolute -top-px -right-px border-t-2 border-r-2",
+                                    "absolute -bottom-px -left-px border-b-2 border-l-2",
+                                    "absolute -bottom-px -right-px border-b-2 border-r-2"
+                                  ].map((cls, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `${cls} w-3.5 h-3.5 border-white pointer-events-none` }, i))
+                                ]
+                              }
+                            ),
+                            HANDLE_DEFS.map(({ key, cursor, style }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                              "div",
+                              {
+                                "data-crop-handle": key,
+                                onPointerDown: (e) => key && startDrag(e, key),
+                                className: "absolute bg-white border border-black/30 rounded-sm shadow-sm pointer-events-auto z-20 hover:scale-110 transition-transform",
+                                style: { width: HANDLE_SIZE, height: HANDLE_SIZE, cursor, ...style }
+                              },
+                              key
+                            ))
+                          ]
+                        }
+                      ) })
+                    ]
+                  }
+                )
+              ] }),
+              activeTab === "crop" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "bg-card border-t border-border shrink-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-2 px-3 sm:px-4 h-10 border-b border-border/50", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-[10px] font-semibold text-muted-foreground uppercase tracking-wider shrink-0", children: "Rotate" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                    InlineSlider,
+                    {
+                      value: [rotation],
+                      onValueChange: ([v]) => setRotation(v),
+                      min: -180,
+                      max: 180,
+                      step: 1
+                    }
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "font-mono text-[11px] text-foreground w-8 text-right shrink-0", children: [
+                    rotation,
+                    "\xB0"
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "h-4 w-px bg-border mx-1 shrink-0" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      id: "editor-rotate-ccw",
+                      onClick: () => setRotation((r) => r - 90),
+                      title: "Rotate \u221290\xB0",
+                      className: "h-7 px-2 flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground border border-border rounded hover:bg-muted transition-colors shrink-0",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.RotateCcw, { className: "w-3 h-3" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hidden sm:inline", children: "\u221290\xB0" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      id: "editor-rotate-cw",
+                      onClick: () => setRotation((r) => r + 90),
+                      title: "Rotate +90\xB0",
+                      className: "h-7 px-2 flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground border border-border rounded hover:bg-muted transition-colors shrink-0",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.RotateCw, { className: "w-3 h-3" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hidden sm:inline", children: "+90\xB0" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "h-4 w-px bg-border mx-0.5 shrink-0" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      id: "editor-flip-h",
+                      onClick: () => setFlipX((f) => !f),
+                      title: "Flip Horizontal",
+                      className: ["h-7 w-7 flex items-center justify-center rounded border transition-colors shrink-0", flipX ? "bg-primary/10 text-primary border-primary/40" : "border-border text-muted-foreground hover:text-foreground hover:bg-muted"].join(" "),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.FlipHorizontal, { className: "w-3.5 h-3.5" })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      id: "editor-flip-v",
+                      onClick: () => setFlipY((f) => !f),
+                      title: "Flip Vertical",
+                      className: ["h-7 w-7 flex items-center justify-center rounded border transition-colors shrink-0", flipY ? "bg-primary/10 text-primary border-primary/40" : "border-border text-muted-foreground hover:text-foreground hover:bg-muted"].join(" "),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.FlipVertical, { className: "w-3.5 h-3.5" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex items-center gap-1.5 px-3 sm:px-4 h-9 overflow-x-auto scrollbar-hide", children: ASPECT_PRESETS.map((preset) => {
+                  const active = activePresetRatio === preset.ratio;
+                  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleSelectPreset(preset),
+                      className: [
+                        "flex items-center gap-1 px-2.5 py-1 rounded text-[11px] font-medium border shrink-0 transition-all whitespace-nowrap",
+                        active ? "bg-primary/10 border-primary/50 text-primary font-semibold" : "border-border text-muted-foreground hover:text-foreground hover:bg-muted"
+                      ].join(" "),
+                      children: [
+                        preset.icon,
+                        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: preset.label })
+                      ]
+                    },
+                    preset.label
+                  );
+                }) })
+              ] }) : (
+                /* Adjustments panel — compact 2-col grid */
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "bg-card border-t border-border px-4 py-3 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-3 max-w-4xl mx-auto", children: [
+                  { label: "Brightness", icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Sun, { className: "w-3 h-3 text-amber-500" }), value: brightness, set: setBrightness, min: -100, max: 100, unit: "%" },
+                  { label: "Contrast", icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Contrast, { className: "w-3 h-3 text-blue-500" }), value: contrast, set: setContrast, min: -100, max: 100, unit: "%" },
+                  { label: "Saturation", icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Sparkles, { className: "w-3 h-3 text-violet-500" }), value: saturation, set: setSaturation, min: -100, max: 100, unit: "%" },
+                  { label: "Blur", icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Sliders, { className: "w-3 h-3 text-emerald-500" }), value: blur, set: setBlur, min: 0, max: 10, step: 0.5, unit: "px" }
+                ].map(({ label, icon, value, set, min, max, step = 1, unit }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "flex items-center gap-1 text-[11px] font-medium text-foreground w-20 shrink-0", children: [
+                    icon,
+                    label
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(InlineSlider, { value: [value], onValueChange: ([v]) => set(v), min, max, step }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "font-mono text-[11px] text-muted-foreground w-9 text-right shrink-0", children: [
+                    value,
+                    unit
+                  ] })
+                ] }, label)) }) })
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center justify-between gap-3 px-3 sm:px-4 h-10 border-t border-border bg-card shrink-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    id: "editor-cancel-btn",
+                    onClick: resetModal,
+                    className: `${btnBase} flex items-center gap-1.5 h-7 px-3 text-xs text-muted-foreground hover:text-foreground border border-border rounded hover:bg-muted transition-colors`,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.X, { className: "w-3 h-3" }),
+                      "Cancel"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    id: "editor-apply-btn",
+                    onClick: handleApply,
+                    disabled: isProcessing,
+                    className: `${btnBase} flex items-center gap-1.5 h-7 px-5 text-xs font-semibold bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors disabled:opacity-60`,
+                    children: [
+                      isProcessing ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Loader2, { className: "w-3 h-3 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Check, { className: "w-3 h-3" }),
+                      isProcessing ? "Processing\u2026" : "Apply Edits"
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("canvas", { ref: canvasRef, className: "hidden", "aria-hidden": "true" })
+  ] }) });
+}
+
+// src/components/shared/ImageViewerModal.tsx
+var import_react15 = require("react");
+var import_react_dom = require("react-dom");
+var import_framer_motion3 = require("framer-motion");
+var import_react16 = require("@use-gesture/react");
+var import_lucide_react10 = require("lucide-react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function ImageViewerModal({
+  isOpen,
+  onClose,
+  images = [],
+  selectedImage,
+  setSelectedImage,
+  productName
+}) {
+  const scale = (0, import_framer_motion3.useMotionValue)(1);
+  const x = (0, import_framer_motion3.useMotionValue)(0);
+  const y = (0, import_framer_motion3.useMotionValue)(0);
+  const rotation = (0, import_framer_motion3.useMotionValue)(0);
+  const [mounted, setMounted] = (0, import_react15.useState)(false);
+  const [isZoomed, setIsZoomed] = (0, import_react15.useState)(false);
+  const [currentZoomLevel, setCurrentZoomLevel] = (0, import_react15.useState)(1);
+  const [isFullscreen, setIsFullscreen] = (0, import_react15.useState)(false);
+  const [mainImgLoaded, setMainImgLoaded] = (0, import_react15.useState)(false);
+  const containerRef = (0, import_react15.useRef)(null);
+  const prevSelectedImageRef = (0, import_react15.useRef)(selectedImage);
+  const prevIsOpenRef = (0, import_react15.useRef)(isOpen);
+  (0, import_react15.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  (0, import_react15.useEffect)(() => {
+    if (prevSelectedImageRef.current !== selectedImage || prevIsOpenRef.current !== isOpen) {
+      setIsZoomed(false);
+      setCurrentZoomLevel(1);
+      setMainImgLoaded(false);
+      prevSelectedImageRef.current = selectedImage;
+      prevIsOpenRef.current = isOpen;
+    }
+    scale.set(1);
+    x.set(0);
+    y.set(0);
+    rotation.set(0);
+  }, [selectedImage, isOpen, scale, x, y, rotation]);
+  const handleNext = (0, import_react15.useCallback)(() => {
+    if (!images.length) return;
+    setSelectedImage((selectedImage + 1) % images.length);
+  }, [selectedImage, images.length, setSelectedImage]);
+  const handlePrev = (0, import_react15.useCallback)(() => {
+    if (!images.length) return;
+    setSelectedImage((selectedImage - 1 + images.length) % images.length);
+  }, [selectedImage, images.length, setSelectedImage]);
+  const handleZoomIn = (0, import_react15.useCallback)(() => {
+    const next = Math.min(scale.get() + 0.5, 4);
+    scale.set(next);
+    setCurrentZoomLevel(next);
+    setIsZoomed(next > 1);
+  }, [scale]);
+  const handleZoomOut = (0, import_react15.useCallback)(() => {
+    const next = Math.max(scale.get() - 0.5, 1);
+    scale.set(next);
+    setCurrentZoomLevel(next);
+    setIsZoomed(next > 1);
+    if (next === 1) {
+      x.set(0);
+      y.set(0);
+    }
+  }, [scale, x, y]);
+  const handleRotate = (0, import_react15.useCallback)(() => {
+    rotation.set(rotation.get() + 90);
+  }, [rotation]);
+  const handleReset = (0, import_react15.useCallback)(() => {
+    scale.set(1);
+    x.set(0);
+    y.set(0);
+    rotation.set(0);
+    setCurrentZoomLevel(1);
+    setIsZoomed(false);
+  }, [scale, x, y, rotation]);
+  const toggleFullscreen = (0, import_react15.useCallback)(() => {
+    if (!containerRef.current) return;
+    if (!document.fullscreenElement) {
+      containerRef.current.requestFullscreen().catch((err) => {
+        logger.error(`Error attempting to enable full-screen mode: ${err.message}`);
+      });
+    } else {
+      document.exitFullscreen().catch(() => {
+      });
+    }
+  }, []);
+  (0, import_react15.useEffect)(() => {
+    const handleFullscreenChange = () => setIsFullscreen(!!document.fullscreenElement);
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
+  }, []);
+  (0, import_react15.useEffect)(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+      if (e.key === "ArrowLeft") handlePrev();
+      if (e.key === "ArrowRight") handleNext();
+      if (e.key === "+" || e.key === "=") handleZoomIn();
+      if (e.key === "-") handleZoomOut();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    document.body.style.overflow = "hidden";
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "";
+    };
+  }, [isOpen, onClose, handleNext, handlePrev, handleZoomIn, handleZoomOut]);
+  const bind = (0, import_react16.useGesture)(
+    {
+      onDrag: ({ down, movement: [mx], offset: [ox, oy] }) => {
+        if (scale.get() > 1) {
+          if (down) {
+            x.set(ox);
+            y.set(oy);
+          }
+        } else {
+          if (!down) {
+            if (mx < -60) handleNext();
+            else if (mx > 60) handlePrev();
+          }
+        }
+      },
+      onPinch: ({ offset: [s] }) => {
+        scale.set(s);
+        setCurrentZoomLevel(s);
+        setIsZoomed(s > 1);
+        if (s <= 1) {
+          x.set(0);
+          y.set(0);
+        }
+      },
+      onWheel: ({ delta: [, dy], ctrlKey }) => {
+        if (ctrlKey) {
+          const next = Math.min(Math.max(1, scale.get() - dy / 100), 4);
+          scale.set(next);
+          setCurrentZoomLevel(next);
+          setIsZoomed(next > 1);
+        }
+      },
+      onDoubleClick: ({ event }) => {
+        event.stopPropagation();
+        if (scale.get() > 1) {
+          handleReset();
+        } else {
+          scale.set(2.5);
+          setCurrentZoomLevel(2.5);
+          setIsZoomed(true);
+        }
+      }
+    },
+    {
+      drag: { from: () => [x.get(), y.get()], threshold: 10 },
+      pinch: { scaleBounds: { min: 1, max: 4 }, modifierKey: null }
+    }
+  );
+  if (!images.length) return null;
+  const btnStyle = {
+    background: "rgba(255, 255, 255, 0.1)",
+    border: "none",
+    borderRadius: "9999px",
+    padding: "8px",
+    color: "rgba(255, 255, 255, 0.9)",
+    cursor: "pointer",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "background-color 0.15s ease, color 0.15s ease"
+  };
+  const navBtnStyle = {
+    position: "absolute",
+    top: "50%",
+    transform: "translateY(-50%)",
+    background: "rgba(0, 0, 0, 0.6)",
+    border: "1px solid rgba(255, 255, 255, 0.2)",
+    borderRadius: "9999px",
+    padding: "14px",
+    color: "#ffffff",
+    cursor: "pointer",
+    backdropFilter: "blur(8px)",
+    zIndex: 40,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxShadow: "0 10px 25px rgba(0, 0, 0, 0.5)",
+    transition: "transform 0.15s ease, background-color 0.15s ease"
+  };
+  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_framer_motion3.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    import_framer_motion3.motion.div,
+    {
+      ref: containerRef,
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: 0.15, ease: "easeOut" },
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: "100vw",
+        height: "100vh",
+        zIndex: 99999,
+        backgroundColor: "#000000",
+        display: "flex",
+        flexDirection: "column",
+        userSelect: "none",
+        WebkitUserSelect: "none",
+        overflow: "hidden",
+        boxSizing: "border-box"
+      },
+      className: "fixed inset-0 z-[99999] bg-black flex flex-col select-none overflow-hidden",
+      onClick: onClose,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": `${productName} image viewer`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              padding: "12px 20px",
+              zIndex: 50,
+              color: "#ffffff",
+              background: "linear-gradient(to bottom, rgba(0,0,0,0.85), rgba(0,0,0,0))",
+              flexShrink: 0,
+              width: "100%",
+              boxSizing: "border-box"
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "13px",
+                      fontWeight: 500,
+                      letterSpacing: "0.08em",
+                      color: "rgba(255, 255, 255, 0.9)",
+                      backgroundColor: "rgba(255, 255, 255, 0.12)",
+                      padding: "4px 12px",
+                      borderRadius: "9999px",
+                      border: "1px solid rgba(255, 255, 255, 0.15)"
+                    },
+                    children: [
+                      selectedImage + 1,
+                      " / ",
+                      images.length
+                    ]
+                  }
+                ),
+                productName && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "13px",
+                      fontWeight: 500,
+                      color: "rgba(255, 255, 255, 0.7)",
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      maxWidth: "300px"
+                    },
+                    className: "hidden sm:inline",
+                    children: productName
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                currentZoomLevel > 1 && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "11px",
+                      fontFamily: "monospace",
+                      color: "rgba(255, 255, 255, 0.7)",
+                      marginRight: "4px"
+                    },
+                    className: "hidden sm:inline",
+                    children: [
+                      Math.round(currentZoomLevel * 100),
+                      "%"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleZoomOut,
+                    style: btnStyle,
+                    title: "Zoom Out (-)",
+                    onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.25)",
+                    onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.ZoomOut, { className: "w-5 h-5", style: { width: "20px", height: "20px" } })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleZoomIn,
+                    style: btnStyle,
+                    title: "Zoom In (+)",
+                    onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.25)",
+                    onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.ZoomIn, { className: "w-5 h-5", style: { width: "20px", height: "20px" } })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleRotate,
+                    style: btnStyle,
+                    title: "Rotate 90\xB0",
+                    onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.25)",
+                    onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.RotateCw, { className: "w-5 h-5", style: { width: "20px", height: "20px" } })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleReset,
+                    style: btnStyle,
+                    title: "Reset View",
+                    onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.25)",
+                    onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.RefreshCcw, { className: "w-5 h-5", style: { width: "20px", height: "20px" } })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { width: "1px", height: "20px", backgroundColor: "rgba(255,255,255,0.2)", margin: "0 6px" } }),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: toggleFullscreen,
+                    style: btnStyle,
+                    title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
+                    onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.25)",
+                    onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)",
+                    children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.Minimize, { className: "w-5 h-5", style: { width: "20px", height: "20px" } }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.Maximize, { className: "w-5 h-5", style: { width: "20px", height: "20px" } })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { width: "1px", height: "20px", backgroundColor: "rgba(255,255,255,0.2)", margin: "0 6px" } }),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClose,
+                    style: {
+                      ...btnStyle,
+                      backgroundColor: "rgba(239, 68, 68, 0.25)",
+                      color: "#f87171"
+                    },
+                    title: "Close (Esc)",
+                    "aria-label": "Close viewer",
+                    onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "rgba(239, 68, 68, 0.45)",
+                    onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "rgba(239, 68, 68, 0.25)",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.X, { className: "w-6 h-6", style: { width: "24px", height: "24px" } })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          "div",
+          {
+            style: {
+              flex: 1,
+              position: "relative",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "100%",
+              height: "100%",
+              minHeight: 0,
+              overflow: "hidden",
+              touchAction: "none"
+            },
+            ...bind(),
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+                import_framer_motion3.motion.div,
+                {
+                  style: {
+                    scale,
+                    rotate: rotation,
+                    x,
+                    y,
+                    cursor: isZoomed ? "grab" : "default",
+                    width: "100%",
+                    height: "100%",
+                    padding: "16px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    boxSizing: "border-box"
+                  },
+                  className: "will-change-transform",
+                  children: [
+                    !mainImgLoaded && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          inset: 0,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          zIndex: 10
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                          "div",
+                          {
+                            style: {
+                              width: "160px",
+                              height: "160px",
+                              borderRadius: "16px",
+                              backgroundColor: "rgba(255,255,255,0.05)",
+                              border: "1px solid rgba(255,255,255,0.1)"
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                      import_framer_motion3.motion.img,
+                      {
+                        src: images[selectedImage] ?? void 0,
+                        alt: `${productName} - Image ${selectedImage + 1}`,
+                        style: {
+                          maxWidth: "100%",
+                          maxHeight: "100%",
+                          objectFit: "contain",
+                          userSelect: "none",
+                          WebkitUserSelect: "none",
+                          display: "block",
+                          margin: "auto",
+                          opacity: mainImgLoaded ? 1 : 0,
+                          transition: "opacity 0.25s ease-out",
+                          boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.8)"
+                        },
+                        draggable: false,
+                        onLoad: () => setMainImgLoaded(true),
+                        onDragStart: (e) => e.preventDefault(),
+                        onMouseDown: (e) => e.preventDefault()
+                      },
+                      images[selectedImage]
+                    )
+                  ]
+                }
+              ),
+              images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Previous image",
+                    style: { ...navBtnStyle, left: "24px" },
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handlePrev();
+                    },
+                    onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "rgba(0,0,0,0.85)",
+                    onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "rgba(0,0,0,0.6)",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.ChevronLeft, { className: "w-8 h-8", style: { width: "32px", height: "32px" } })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Next image",
+                    style: { ...navBtnStyle, right: "24px" },
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleNext();
+                    },
+                    onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "rgba(0,0,0,0.85)",
+                    onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "rgba(0,0,0,0.6)",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.ChevronRight, { className: "w-8 h-8", style: { width: "32px", height: "32px" } })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          "div",
+          {
+            style: {
+              padding: "16px 20px",
+              zIndex: 50,
+              background: "linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0))",
+              display: "flex",
+              justifyContent: "center",
+              flexShrink: 0,
+              width: "100%",
+              boxSizing: "border-box"
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  gap: "12px",
+                  overflowX: "auto",
+                  maxWidth: "100%",
+                  paddingBottom: "4px"
+                },
+                children: images.map((img, idx) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setSelectedImage(idx),
+                    "aria-label": `View image ${idx + 1}`,
+                    style: {
+                      position: "relative",
+                      width: "60px",
+                      height: "60px",
+                      borderRadius: "10px",
+                      overflow: "hidden",
+                      flexShrink: 0,
+                      border: selectedImage === idx ? "2px solid #ffffff" : "2px solid rgba(255, 255, 255, 0.2)",
+                      opacity: selectedImage === idx ? 1 : 0.5,
+                      cursor: "pointer",
+                      transform: selectedImage === idx ? "scale(1.05)" : "scale(1)",
+                      transition: "all 0.2s ease",
+                      background: "none",
+                      padding: 0
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                      SmartImage_default,
+                      {
+                        src: img,
+                        alt: `Thumbnail ${idx + 1}`,
+                        className: "w-full h-full object-cover"
+                      }
+                    )
+                  },
+                  idx
+                ))
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+  if (!mounted) return null;
+  return (0, import_react_dom.createPortal)(modalContent, document.body);
+}
+
+// src/components/shared/AnalyticsScripts.tsx
+var import_react17 = require("react");
+var import_script = __toESM(require("next/script"));
+
+// src/utils/cookieConsent.ts
+var STORAGE_KEY = "kasuvia_cookie_consent";
+var COOKIE_CONSENT_CHANGED_EVENT = "kasuvia:cookie-consent-changed";
+function getCookieConsent() {
+  try {
+    const value = window.localStorage.getItem(STORAGE_KEY);
+    return value === "accepted" || value === "rejected" ? value : null;
+  } catch {
+    return null;
+  }
+}
+function setCookieConsent(value) {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, value);
+    window.dispatchEvent(new Event(COOKIE_CONSENT_CHANGED_EVENT));
+  } catch {
+  }
+}
+
+// src/components/shared/AnalyticsScripts.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function AnalyticsScripts({ websiteId, scriptUrl, recorderUrl }) {
+  const [accepted, setAccepted] = (0, import_react17.useState)(false);
+  (0, import_react17.useEffect)(() => {
+    const sync = () => setAccepted(getCookieConsent() === "accepted");
+    sync();
+    window.addEventListener(COOKIE_CONSENT_CHANGED_EVENT, sync);
+    window.addEventListener("storage", sync);
+    return () => {
+      window.removeEventListener(COOKIE_CONSENT_CHANGED_EVENT, sync);
+      window.removeEventListener("storage", sync);
+    };
+  }, []);
+  if (!accepted || !websiteId) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+    scriptUrl && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_script.default, { async: true, defer: true, "data-website-id": websiteId, src: scriptUrl, strategy: "afterInteractive" }),
+    recorderUrl && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_script.default, { defer: true, "data-website-id": websiteId, src: recorderUrl, strategy: "afterInteractive" })
+  ] });
+}
+
+// src/components/shared/CookieConsentBanner.tsx
+var import_react18 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function CookieConsentBanner({
+  privacyUrl = "/privacy",
+  className,
+  acceptButtonClassName,
+  rejectButtonClassName
+}) {
+  const [visible, setVisible] = (0, import_react18.useState)(false);
+  (0, import_react18.useEffect)(() => {
+    setVisible(getCookieConsent() === null);
+  }, []);
+  if (!visible) return null;
+  const choose = (value) => {
+    setCookieConsent(value);
+    setVisible(false);
+  };
+  const bannerClass = className ?? "fixed inset-x-0 bottom-0 z-50 border-t border-border bg-background/95 backdrop-blur-sm p-4 shadow-[0_-4px_16px_rgba(0,0,0,0.08)]";
+  const rejectClass = rejectButtonClassName ?? "inline-flex items-center justify-center rounded-md border border-input bg-background px-3 h-9 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors";
+  const acceptClass = acceptButtonClassName ?? "inline-flex items-center justify-center rounded-md bg-primary px-3 h-9 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors";
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: bannerClass, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mx-auto flex max-w-4xl flex-col items-center gap-3 sm:flex-row sm:justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("p", { className: "text-center text-sm text-muted-foreground sm:text-left", children: [
+      "We use cookies to understand how you use this site and improve your experience.",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        "a",
+        {
+          href: privacyUrl,
+          className: "underline underline-offset-2 hover:text-foreground",
+          children: "Learn more"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex shrink-0 gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        "button",
+        {
+          type: "button",
+          className: rejectClass,
+          onClick: () => choose("rejected"),
+          children: "Reject non-essential"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        "button",
+        {
+          type: "button",
+          className: acceptClass,
+          onClick: () => choose("accepted"),
+          children: "Accept"
+        }
+      )
+    ] })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AddressAutocomplete,
+  AnalyticsScripts,
+  BespokeAvailabilityBadge,
+  BespokeProgressTracker,
+  CardSkeleton,
+  CartItem,
+  CartItemSkeleton,
+  CartSidebar,
+  CartTypeMismatchBanner,
+  CookieConsentBanner,
+  DeliverableReviewer,
+  ImageEditorModal,
+  ImageViewerModal,
+  LucideReactIcon,
+  MapPinDrop,
+  MultiSelectPicker,
+  OfflineBanner,
+  OrderItemSkeleton,
+  ProductCard,
+  ProductCardSkeleton,
+  ProductGrid,
+  SearchableInput,
+  SearchablePopover,
+  SlotPicker,
+  SmartImage,
+  SmartMotionImage,
+  TableSkeleton,
+  TruncatedValue,
+  UnsavedChangesDialog,
+  useUnsavedChanges
+});
+//# sourceMappingURL=index.js.map