@fluid-app/cart-ui 0.1.9 → 0.1.11

package/dist/index.cjs

@@ -29,6 +29,7 @@ let lucide_react = require("lucide-react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/cart-script.tsx
 const SCRIPT_ID = "fluid-cdn-script";
+const LEAD_CAPTURE_ID = "fluid-lead-capture-suppress";
 const SCRIPT_SRC = "https://assets.fluid.app/scripts/fluid-sdk/latest/web-widgets/index.js";
 function CartScript({ subdomain, authJwt }) {
 	const authJwtRef = (0, react.useRef)(authJwt);
@@ -44,9 +45,15 @@ function CartScript({ subdomain, authJwt }) {
 		script.dataset.fluidShop = subdomain;
 		if (authJwtRef.current) script.dataset.authJwt = authJwtRef.current;
 		document.head.appendChild(script);
+		const leadCapture = document.createElement("fluid-lead-capture");
+		leadCapture.id = LEAD_CAPTURE_ID;
+		leadCapture.setAttribute("hide-widget", "true");
+		document.body.appendChild(leadCapture);
 		return () => {
 			const existing = document.getElementById(SCRIPT_ID);
 			if (existing) existing.remove();
+			const existingLeadCapture = document.getElementById(LEAD_CAPTURE_ID);
+			if (existingLeadCapture) existingLeadCapture.remove();
 		};
 	}, [subdomain]);
 	return null;
@@ -81,6 +88,7 @@ function CartWidget({ theme }) {
 //#region src/components/cart-button.tsx
 const MAX_SDK_POLL_ATTEMPTS = 50;
 function CartButton({ onCheckout }) {
+	const [initialCount, setInitialCount] = (0, react.useState)(0);
 	const navigateToCheckout = (0, react.useCallback)(() => {
 		if (!window.FluidCommerceSDK) {
 			console.error("FluidCommerceSDK not available");
@@ -105,6 +113,8 @@ function CartButton({ onCheckout }) {
 			if (cancelled) return;
 			if (window.FluidCommerceSDK) {
 				if (onCheckout) window.FluidCommerceSDK.setOnCheckout(navigateToCheckout);
+				const count = window.FairShareSDK?.getCartItemCount?.();
+				if (count != null) setInitialCount(count);
 			} else if (attempts < MAX_SDK_POLL_ATTEMPTS) {
 				attempts++;
 				timeoutId = setTimeout(setupSDK, 100);
@@ -126,7 +136,7 @@ function CartButton({ onCheckout }) {
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ShoppingCart, { className: "size-5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				id: "fluid-cart-count",
 				className: "bg-primary-foreground text-primary absolute -top-1 -right-2 flex h-4 w-4 items-center justify-center rounded-full text-[8px] font-bold",
-				children: "0"
+				children: initialCount
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Cart" })]
 	});

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["React","Button","ShoppingCart"],"sources":["../src/components/cart-script.tsx","../src/components/cart-widget.tsx","../src/components/cart-button.tsx","../src/components/shop-container.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\ninterface CartScriptProps {\n  subdomain: string;\n  authJwt?: string;\n}\n\nconst SCRIPT_ID = \"fluid-cdn-script\";\nconst SCRIPT_SRC =\n  \"https://assets.fluid.app/scripts/fluid-sdk/latest/web-widgets/index.js\";\n\nexport default function CartScript({\n  subdomain,\n  authJwt,\n}: CartScriptProps): React.ReactNode {\n  // Use a ref so the script is injected once with the initial JWT value.\n  // ES modules are cached by URL — re-inserting the same script won't\n  // re-execute it, so changing authJwt after the first load has no effect.\n  const authJwtRef = useRef(authJwt);\n  authJwtRef.current = authJwt;\n\n  useEffect(() => {\n    if (!subdomain) return;\n\n    // Don't add a duplicate script\n    if (document.getElementById(SCRIPT_ID)) return;\n\n    const script = document.createElement(\"script\");\n    script.id = SCRIPT_ID;\n    script.src = SCRIPT_SRC;\n    script.type = \"module\";\n    script.crossOrigin = \"anonymous\";\n    script.dataset.fluidShop = subdomain;\n    if (authJwtRef.current) {\n      script.dataset.authJwt = authJwtRef.current;\n    }\n    document.head.appendChild(script);\n\n    return () => {\n      const existing = document.getElementById(SCRIPT_ID);\n      if (existing) existing.remove();\n    };\n  }, [subdomain]);\n\n  return null;\n}\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\ninterface CartWidgetProps {\n  theme?: Record<string, string>;\n}\n\nexport default function CartWidget({\n  theme,\n}: CartWidgetProps): React.ReactNode {\n  const [mounted, setMounted] = useState(false);\n  const widgetRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  useEffect(() => {\n    if (!mounted) return;\n    const el = widgetRef.current;\n    if (!el) return;\n    if (theme) {\n      el.setAttribute(\"theme\", JSON.stringify(theme));\n    } else {\n      el.removeAttribute(\"theme\");\n    }\n  }, [theme, mounted]);\n\n  const widget = React.createElement(\"fluid-cart-widget\", {\n    ref: (el: HTMLElement | null) => {\n      widgetRef.current = el;\n    },\n    \"data-fluid-widget\": \"true\",\n    \"hide-widget\": \"true\",\n    \"is-primary\": \"true\",\n  });\n\n  // Portal to document.body so the cart drawer escapes any\n  // overflow-hidden / isolation stacking contexts in the layout.\n  if (mounted) {\n    return createPortal(widget, document.body);\n  }\n\n  return null;\n}\n","\"use client\";\n\nimport { Button } from \"@fluid-app/ui-primitives\";\nimport { ShoppingCart } from \"lucide-react\";\nimport React, { useEffect, useCallback } from \"react\";\n\ndeclare global {\n  interface Window {\n    FluidCommerceSDK?: {\n      getCheckoutUrl: () => string;\n      setOnCheckout: (callback: () => void) => void;\n    };\n    fluidCart?: {\n      open: () => void;\n    };\n  }\n}\n\ninterface CartButtonProps {\n  onCheckout?: (checkoutUrl: string) => void;\n}\n\nconst MAX_SDK_POLL_ATTEMPTS = 50; // 5 seconds at 100ms intervals\n\nexport function CartButton({ onCheckout }: CartButtonProps): React.ReactNode {\n  const navigateToCheckout = useCallback(() => {\n    if (!window.FluidCommerceSDK) {\n      console.error(\"FluidCommerceSDK not available\");\n      return;\n    }\n\n    try {\n      const checkoutUrl = window.FluidCommerceSDK.getCheckoutUrl();\n      if (!checkoutUrl) {\n        console.error(\"No checkout URL available\");\n        return;\n      }\n      onCheckout?.(checkoutUrl);\n    } catch (error) {\n      console.error(\"Error getting checkout URL:\", error);\n    }\n  }, [onCheckout]);\n\n  useEffect(() => {\n    let timeoutId: ReturnType<typeof setTimeout> | null = null;\n    let attempts = 0;\n    let cancelled = false;\n\n    const setupSDK = () => {\n      if (cancelled) return;\n      if (window.FluidCommerceSDK) {\n        if (onCheckout) {\n          window.FluidCommerceSDK.setOnCheckout(navigateToCheckout);\n        }\n      } else if (attempts < MAX_SDK_POLL_ATTEMPTS) {\n        attempts++;\n        timeoutId = setTimeout(setupSDK, 100);\n      }\n    };\n\n    setupSDK();\n    return () => {\n      cancelled = true;\n      if (timeoutId) clearTimeout(timeoutId);\n    };\n  }, [navigateToCheckout, onCheckout]);\n\n  return (\n    <Button\n      className=\"bg-primary text-primary-foreground hover:bg-primary-700 relative flex items-center gap-4 rounded-sm px-4 py-1.5\"\n      onClick={() => {\n        window.fluidCart?.open();\n      }}\n    >\n      <div className=\"relative\">\n        <ShoppingCart className=\"size-5\" />\n        <span\n          id=\"fluid-cart-count\"\n          className=\"bg-primary-foreground text-primary absolute -top-1 -right-2 flex h-4 w-4 items-center justify-center rounded-full text-[8px] font-bold\"\n        >\n          0\n        </span>\n      </div>\n      <span>Cart</span>\n    </Button>\n  );\n}\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\ninterface ShopContainerProps {\n  children: React.ReactNode;\n  className?: string;\n  cartScript?: React.ReactNode;\n  cartWidget?: React.ReactNode;\n}\n\nexport default function ShopContainer({\n  children,\n  className = \"\",\n  cartScript,\n  cartWidget,\n}: ShopContainerProps): React.ReactNode {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(\n    null,\n  );\n\n  useEffect(() => {\n    const currentContainer = containerRef.current;\n    if (!currentContainer) return;\n\n    const reactContentWrapper = document.createElement(\"div\");\n    reactContentWrapper.id = \"react-content-wrapper\";\n    reactContentWrapper.style.cssText = `\n      position: relative;\n    `;\n    reactContentWrapper.className = \"min-h-full\";\n\n    currentContainer.appendChild(reactContentWrapper);\n\n    setPortalContainer(reactContentWrapper);\n\n    return () => {\n      if (currentContainer && reactContentWrapper) {\n        try {\n          currentContainer.removeChild(reactContentWrapper);\n        } catch (e) {\n          console.warn(\"Failed to cleanup isolated container:\", e);\n        }\n      }\n      setPortalContainer(null);\n    };\n  }, []);\n\n  return (\n    <>\n      <div\n        ref={containerRef}\n        className={`isolated-shop-wrapper ${className} h-full`}\n      >\n        {portalContainer &&\n          createPortal(\n            <>\n              {cartScript}\n              {cartWidget}\n              {children}\n            </>,\n            portalContainer,\n          )}\n      </div>\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["React","Button","ShoppingCart"],"sources":["../src/components/cart-script.tsx","../src/components/cart-widget.tsx","../src/components/cart-button.tsx","../src/components/shop-container.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\ninterface CartScriptProps {\n  subdomain: string;\n  authJwt?: string;\n}\n\nconst SCRIPT_ID = \"fluid-cdn-script\";\nconst LEAD_CAPTURE_ID = \"fluid-lead-capture-suppress\";\nconst SCRIPT_SRC =\n  \"https://assets.fluid.app/scripts/fluid-sdk/latest/web-widgets/index.js\";\n\nexport default function CartScript({\n  subdomain,\n  authJwt,\n}: CartScriptProps): React.ReactNode {\n  // Use a ref so the script is injected once with the initial JWT value.\n  // ES modules are cached by URL — re-inserting the same script won't\n  // re-execute it, so changing authJwt after the first load has no effect.\n  const authJwtRef = useRef(authJwt);\n  authJwtRef.current = authJwt;\n\n  useEffect(() => {\n    if (!subdomain) return;\n\n    // Don't add a duplicate script\n    if (document.getElementById(SCRIPT_ID)) return;\n\n    const script = document.createElement(\"script\");\n    script.id = SCRIPT_ID;\n    script.src = SCRIPT_SRC;\n    script.type = \"module\";\n    script.crossOrigin = \"anonymous\";\n    script.dataset.fluidShop = subdomain;\n    if (authJwtRef.current) {\n      script.dataset.authJwt = authJwtRef.current;\n    }\n    document.head.appendChild(script);\n\n    // Suppress the SDK's auto-injected lead capture widget.\n    // The SDK skips injection when it finds an existing element with hide-widget.\n    const leadCapture = document.createElement(\"fluid-lead-capture\");\n    leadCapture.id = LEAD_CAPTURE_ID;\n    leadCapture.setAttribute(\"hide-widget\", \"true\");\n    document.body.appendChild(leadCapture);\n\n    return () => {\n      const existing = document.getElementById(SCRIPT_ID);\n      if (existing) existing.remove();\n      const existingLeadCapture = document.getElementById(LEAD_CAPTURE_ID);\n      if (existingLeadCapture) existingLeadCapture.remove();\n    };\n  }, [subdomain]);\n\n  return null;\n}\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\ninterface CartWidgetProps {\n  theme?: Record<string, string>;\n}\n\nexport default function CartWidget({\n  theme,\n}: CartWidgetProps): React.ReactNode {\n  const [mounted, setMounted] = useState(false);\n  const widgetRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  useEffect(() => {\n    if (!mounted) return;\n    const el = widgetRef.current;\n    if (!el) return;\n    if (theme) {\n      el.setAttribute(\"theme\", JSON.stringify(theme));\n    } else {\n      el.removeAttribute(\"theme\");\n    }\n  }, [theme, mounted]);\n\n  const widget = React.createElement(\"fluid-cart-widget\", {\n    ref: (el: HTMLElement | null) => {\n      widgetRef.current = el;\n    },\n    \"data-fluid-widget\": \"true\",\n    \"hide-widget\": \"true\",\n    \"is-primary\": \"true\",\n  });\n\n  // Portal to document.body so the cart drawer escapes any\n  // overflow-hidden / isolation stacking contexts in the layout.\n  if (mounted) {\n    return createPortal(widget, document.body);\n  }\n\n  return null;\n}\n","\"use client\";\n\nimport { Button } from \"@fluid-app/ui-primitives\";\nimport { ShoppingCart } from \"lucide-react\";\nimport React, { useEffect, useCallback, useState } from \"react\";\n\ndeclare global {\n  interface Window {\n    FluidCommerceSDK?: {\n      getCheckoutUrl: () => string;\n      setOnCheckout: (callback: () => void) => void;\n    };\n    FairShareSDK?: {\n      getCartItemCount: () => number;\n    };\n    fluidCart?: {\n      open: () => void;\n    };\n  }\n}\n\ninterface CartButtonProps {\n  onCheckout?: (checkoutUrl: string) => void;\n}\n\nconst MAX_SDK_POLL_ATTEMPTS = 50; // 5 seconds at 100ms intervals\n\nexport function CartButton({ onCheckout }: CartButtonProps): React.ReactNode {\n  const [initialCount, setInitialCount] = useState(0);\n\n  const navigateToCheckout = useCallback(() => {\n    if (!window.FluidCommerceSDK) {\n      console.error(\"FluidCommerceSDK not available\");\n      return;\n    }\n\n    try {\n      const checkoutUrl = window.FluidCommerceSDK.getCheckoutUrl();\n      if (!checkoutUrl) {\n        console.error(\"No checkout URL available\");\n        return;\n      }\n      onCheckout?.(checkoutUrl);\n    } catch (error) {\n      console.error(\"Error getting checkout URL:\", error);\n    }\n  }, [onCheckout]);\n\n  useEffect(() => {\n    let timeoutId: ReturnType<typeof setTimeout> | null = null;\n    let attempts = 0;\n    let cancelled = false;\n\n    const setupSDK = () => {\n      if (cancelled) return;\n      if (window.FluidCommerceSDK) {\n        if (onCheckout) {\n          window.FluidCommerceSDK.setOnCheckout(navigateToCheckout);\n        }\n        const count = window.FairShareSDK?.getCartItemCount?.();\n        if (count != null) {\n          setInitialCount(count);\n        }\n      } else if (attempts < MAX_SDK_POLL_ATTEMPTS) {\n        attempts++;\n        timeoutId = setTimeout(setupSDK, 100);\n      }\n    };\n\n    setupSDK();\n    return () => {\n      cancelled = true;\n      if (timeoutId) clearTimeout(timeoutId);\n    };\n  }, [navigateToCheckout, onCheckout]);\n\n  return (\n    <Button\n      className=\"bg-primary text-primary-foreground hover:bg-primary-700 relative flex items-center gap-4 rounded-sm px-4 py-1.5\"\n      onClick={() => {\n        window.fluidCart?.open();\n      }}\n    >\n      <div className=\"relative\">\n        <ShoppingCart className=\"size-5\" />\n        <span\n          id=\"fluid-cart-count\"\n          className=\"bg-primary-foreground text-primary absolute -top-1 -right-2 flex h-4 w-4 items-center justify-center rounded-full text-[8px] font-bold\"\n        >\n          {initialCount}\n        </span>\n      </div>\n      <span>Cart</span>\n    </Button>\n  );\n}\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\ninterface ShopContainerProps {\n  children: React.ReactNode;\n  className?: string;\n  cartScript?: React.ReactNode;\n  cartWidget?: React.ReactNode;\n}\n\nexport default function ShopContainer({\n  children,\n  className = \"\",\n  cartScript,\n  cartWidget,\n}: ShopContainerProps): React.ReactNode {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(\n    null,\n  );\n\n  useEffect(() => {\n    const currentContainer = containerRef.current;\n    if (!currentContainer) return;\n\n    const reactContentWrapper = document.createElement(\"div\");\n    reactContentWrapper.id = \"react-content-wrapper\";\n    reactContentWrapper.style.cssText = `\n      position: relative;\n    `;\n    reactContentWrapper.className = \"min-h-full\";\n\n    currentContainer.appendChild(reactContentWrapper);\n\n    setPortalContainer(reactContentWrapper);\n\n    return () => {\n      if (currentContainer && reactContentWrapper) {\n        try {\n          currentContainer.removeChild(reactContentWrapper);\n        } catch (e) {\n          console.warn(\"Failed to cleanup isolated container:\", e);\n        }\n      }\n      setPortalContainer(null);\n    };\n  }, []);\n\n  return (\n    <>\n      <div\n        ref={containerRef}\n        className={`isolated-shop-wrapper ${className} h-full`}\n      >\n        {portalContainer &&\n          createPortal(\n            <>\n              {cartScript}\n              {cartWidget}\n              {children}\n            </>,\n            portalContainer,\n          )}\n      </div>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,YAAY;AAClB,MAAM,kBAAkB;AACxB,MAAM,aACJ;AAEF,SAAwB,WAAW,EACjC,WACA,WACmC;CAInC,MAAM,cAAA,GAAA,MAAA,QAAoB,QAAQ;AAClC,YAAW,UAAU;AAErB,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,CAAC,UAAW;AAGhB,MAAI,SAAS,eAAe,UAAU,CAAE;EAExC,MAAM,SAAS,SAAS,cAAc,SAAS;AAC/C,SAAO,KAAK;AACZ,SAAO,MAAM;AACb,SAAO,OAAO;AACd,SAAO,cAAc;AACrB,SAAO,QAAQ,YAAY;AAC3B,MAAI,WAAW,QACb,QAAO,QAAQ,UAAU,WAAW;AAEtC,WAAS,KAAK,YAAY,OAAO;EAIjC,MAAM,cAAc,SAAS,cAAc,qBAAqB;AAChE,cAAY,KAAK;AACjB,cAAY,aAAa,eAAe,OAAO;AAC/C,WAAS,KAAK,YAAY,YAAY;AAEtC,eAAa;GACX,MAAM,WAAW,SAAS,eAAe,UAAU;AACnD,OAAI,SAAU,UAAS,QAAQ;GAC/B,MAAM,sBAAsB,SAAS,eAAe,gBAAgB;AACpE,OAAI,oBAAqB,qBAAoB,QAAQ;;IAEtD,CAAC,UAAU,CAAC;AAEf,QAAO;;;;AC/CT,SAAwB,WAAW,EACjC,SACmC;CACnC,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,MAAM;CAC7C,MAAM,aAAA,GAAA,MAAA,QAAuC,KAAK;AAElD,EAAA,GAAA,MAAA,iBAAgB;AACd,aAAW,KAAK;IACf,EAAE,CAAC;AAEN,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,CAAC,QAAS;EACd,MAAM,KAAK,UAAU;AACrB,MAAI,CAAC,GAAI;AACT,MAAI,MACF,IAAG,aAAa,SAAS,KAAK,UAAU,MAAM,CAAC;MAE/C,IAAG,gBAAgB,QAAQ;IAE5B,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,SAASA,MAAAA,QAAM,cAAc,qBAAqB;EACtD,MAAM,OAA2B;AAC/B,aAAU,UAAU;;EAEtB,qBAAqB;EACrB,eAAe;EACf,cAAc;EACf,CAAC;AAIF,KAAI,QACF,SAAA,GAAA,UAAA,cAAoB,QAAQ,SAAS,KAAK;AAG5C,QAAO;;;;AClBT,MAAM,wBAAwB;AAE9B,SAAgB,WAAW,EAAE,cAAgD;CAC3E,MAAM,CAAC,cAAc,oBAAA,GAAA,MAAA,UAA4B,EAAE;CAEnD,MAAM,sBAAA,GAAA,MAAA,mBAAuC;AAC3C,MAAI,CAAC,OAAO,kBAAkB;AAC5B,WAAQ,MAAM,iCAAiC;AAC/C;;AAGF,MAAI;GACF,MAAM,cAAc,OAAO,iBAAiB,gBAAgB;AAC5D,OAAI,CAAC,aAAa;AAChB,YAAQ,MAAM,4BAA4B;AAC1C;;AAEF,gBAAa,YAAY;WAClB,OAAO;AACd,WAAQ,MAAM,+BAA+B,MAAM;;IAEpD,CAAC,WAAW,CAAC;AAEhB,EAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,YAAkD;EACtD,IAAI,WAAW;EACf,IAAI,YAAY;EAEhB,MAAM,iBAAiB;AACrB,OAAI,UAAW;AACf,OAAI,OAAO,kBAAkB;AAC3B,QAAI,WACF,QAAO,iBAAiB,cAAc,mBAAmB;IAE3D,MAAM,QAAQ,OAAO,cAAc,oBAAoB;AACvD,QAAI,SAAS,KACX,iBAAgB,MAAM;cAEf,WAAW,uBAAuB;AAC3C;AACA,gBAAY,WAAW,UAAU,IAAI;;;AAIzC,YAAU;AACV,eAAa;AACX,eAAY;AACZ,OAAI,UAAW,cAAa,UAAU;;IAEvC,CAAC,oBAAoB,WAAW,CAAC;AAEpC,QACE,iBAAA,GAAA,kBAAA,MAACC,yBAAAA,QAAD;EACE,WAAU;EACV,eAAe;AACb,UAAO,WAAW,MAAM;;YAH5B,CAME,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACE,iBAAA,GAAA,kBAAA,KAACC,aAAAA,cAAD,EAAc,WAAU,UAAW,CAAA,EACnC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,IAAG;IACH,WAAU;cAET;IACI,CAAA,CACH;MACN,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAM,QAAW,CAAA,CACV;;;;;ACnFb,SAAwB,cAAc,EACpC,UACA,YAAY,IACZ,YACA,cACsC;CACtC,MAAM,gBAAA,GAAA,MAAA,QAAsC,KAAK;CACjD,MAAM,CAAC,iBAAiB,uBAAA,GAAA,MAAA,UACtB,KACD;AAED,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,mBAAmB,aAAa;AACtC,MAAI,CAAC,iBAAkB;EAEvB,MAAM,sBAAsB,SAAS,cAAc,MAAM;AACzD,sBAAoB,KAAK;AACzB,sBAAoB,MAAM,UAAU;;;AAGpC,sBAAoB,YAAY;AAEhC,mBAAiB,YAAY,oBAAoB;AAEjD,qBAAmB,oBAAoB;AAEvC,eAAa;AACX,OAAI,oBAAoB,oBACtB,KAAI;AACF,qBAAiB,YAAY,oBAAoB;YAC1C,GAAG;AACV,YAAQ,KAAK,yCAAyC,EAAE;;AAG5D,sBAAmB,KAAK;;IAEzB,EAAE,CAAC;AAEN,QACE,iBAAA,GAAA,kBAAA,KAAA,kBAAA,UAAA,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,KAAK;EACL,WAAW,yBAAyB,UAAU;YAE7C,oBAAA,GAAA,UAAA,cAEG,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;GACG;GACA;GACA;GACA,EAAA,CAAA,EACH,gBACD;EACC,CAAA,EACL,CAAA"}

package/dist/index.d.cts

@@ -25,6 +25,9 @@ declare global {
       getCheckoutUrl: () => string;
       setOnCheckout: (callback: () => void) => void;
     };
+    FairShareSDK?: {
+      getCartItemCount: () => number;
+    };
     fluidCart?: {
       open: () => void;
     };

package/dist/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../src/components/cart-script.tsx","../src/components/cart-widget.tsx","../src/components/cart-button.tsx","../src/components/shop-container.tsx"],"mappings":";;;UAEU,eAAA;EACR,SAAA;EACA,OAAA;AAAA;AAAA,iBAOsB,UAAA,CAAA;EACtB,SAAA;EACA;AAAA,GACC,eAAA,GAAkB,KAAA,CAAM,SAAA;;;UCXjB,eAAA;EACR,KAAA,GAAQ,MAAA;AAAA;AAAA,iBAGc,UAAA,CAAA;EACtB;AAAA,GACC,eAAA,GAAkB,OAAA,CAAM,SAAA;;;;YCFf,MAAA;IACR,gBAAA;MACE,cAAA;MACA,aAAA,GAAgB,QAAA;IAAA;IAElB,SAAA;MACE,IAAA;IAAA;EAAA;AAAA;AAAA,UAKI,eAAA;EACR,UAAA,IAAc,WAAA;AAAA;AAAA,iBAKA,UAAA,CAAA;EAAa;AAAA,GAAc,eAAA,GAAkB,OAAA,CAAM,SAAA;;;UCrBzD,kBAAA;EACR,QAAA,EAAU,OAAA,CAAM,SAAA;EAChB,SAAA;EACA,UAAA,GAAa,OAAA,CAAM,SAAA;EACnB,UAAA,GAAa,OAAA,CAAM,SAAA;AAAA;AAAA,iBAGG,aAAA,CAAA;EACtB,QAAA;EACA,SAAA;EACA,UAAA;EACA;AAAA,GACC,kBAAA,GAAqB,OAAA,CAAM,SAAA"}
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/components/cart-script.tsx","../src/components/cart-widget.tsx","../src/components/cart-button.tsx","../src/components/shop-container.tsx"],"mappings":";;;UAEU,eAAA;EACR,SAAA;EACA,OAAA;AAAA;AAAA,iBAQsB,UAAA,CAAA;EACtB,SAAA;EACA;AAAA,GACC,eAAA,GAAkB,KAAA,CAAM,SAAA;;;UCZjB,eAAA;EACR,KAAA,GAAQ,MAAA;AAAA;AAAA,iBAGc,UAAA,CAAA;EACtB;AAAA,GACC,eAAA,GAAkB,OAAA,CAAM,SAAA;;;;YCFf,MAAA;IACR,gBAAA;MACE,cAAA;MACA,aAAA,GAAgB,QAAA;IAAA;IAElB,YAAA;MACE,gBAAA;IAAA;IAEF,SAAA;MACE,IAAA;IAAA;EAAA;AAAA;AAAA,UAKI,eAAA;EACR,UAAA,IAAc,WAAA;AAAA;AAAA,iBAKA,UAAA,CAAA;EAAa;AAAA,GAAc,eAAA,GAAkB,OAAA,CAAM,SAAA;;;UCxBzD,kBAAA;EACR,QAAA,EAAU,OAAA,CAAM,SAAA;EAChB,SAAA;EACA,UAAA,GAAa,OAAA,CAAM,SAAA;EACnB,UAAA,GAAa,OAAA,CAAM,SAAA;AAAA;AAAA,iBAGG,aAAA,CAAA;EACtB,QAAA;EACA,SAAA;EACA,UAAA;EACA;AAAA,GACC,kBAAA,GAAqB,OAAA,CAAM,SAAA"}

package/dist/index.d.mts

@@ -25,6 +25,9 @@ declare global {
       getCheckoutUrl: () => string;
       setOnCheckout: (callback: () => void) => void;
     };
+    FairShareSDK?: {
+      getCartItemCount: () => number;
+    };
     fluidCart?: {
       open: () => void;
     };

package/dist/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../src/components/cart-script.tsx","../src/components/cart-widget.tsx","../src/components/cart-button.tsx","../src/components/shop-container.tsx"],"mappings":";;;UAEU,eAAA;EACR,SAAA;EACA,OAAA;AAAA;AAAA,iBAOsB,UAAA,CAAA;EACtB,SAAA;EACA;AAAA,GACC,eAAA,GAAkB,KAAA,CAAM,SAAA;;;UCXjB,eAAA;EACR,KAAA,GAAQ,MAAA;AAAA;AAAA,iBAGc,UAAA,CAAA;EACtB;AAAA,GACC,eAAA,GAAkB,OAAA,CAAM,SAAA;;;;YCFf,MAAA;IACR,gBAAA;MACE,cAAA;MACA,aAAA,GAAgB,QAAA;IAAA;IAElB,SAAA;MACE,IAAA;IAAA;EAAA;AAAA;AAAA,UAKI,eAAA;EACR,UAAA,IAAc,WAAA;AAAA;AAAA,iBAKA,UAAA,CAAA;EAAa;AAAA,GAAc,eAAA,GAAkB,OAAA,CAAM,SAAA;;;UCrBzD,kBAAA;EACR,QAAA,EAAU,OAAA,CAAM,SAAA;EAChB,SAAA;EACA,UAAA,GAAa,OAAA,CAAM,SAAA;EACnB,UAAA,GAAa,OAAA,CAAM,SAAA;AAAA;AAAA,iBAGG,aAAA,CAAA;EACtB,QAAA;EACA,SAAA;EACA,UAAA;EACA;AAAA,GACC,kBAAA,GAAqB,OAAA,CAAM,SAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/components/cart-script.tsx","../src/components/cart-widget.tsx","../src/components/cart-button.tsx","../src/components/shop-container.tsx"],"mappings":";;;UAEU,eAAA;EACR,SAAA;EACA,OAAA;AAAA;AAAA,iBAQsB,UAAA,CAAA;EACtB,SAAA;EACA;AAAA,GACC,eAAA,GAAkB,KAAA,CAAM,SAAA;;;UCZjB,eAAA;EACR,KAAA,GAAQ,MAAA;AAAA;AAAA,iBAGc,UAAA,CAAA;EACtB;AAAA,GACC,eAAA,GAAkB,OAAA,CAAM,SAAA;;;;YCFf,MAAA;IACR,gBAAA;MACE,cAAA;MACA,aAAA,GAAgB,QAAA;IAAA;IAElB,YAAA;MACE,gBAAA;IAAA;IAEF,SAAA;MACE,IAAA;IAAA;EAAA;AAAA;AAAA,UAKI,eAAA;EACR,UAAA,IAAc,WAAA;AAAA;AAAA,iBAKA,UAAA,CAAA;EAAa;AAAA,GAAc,eAAA,GAAkB,OAAA,CAAM,SAAA;;;UCxBzD,kBAAA;EACR,QAAA,EAAU,OAAA,CAAM,SAAA;EAChB,SAAA;EACA,UAAA,GAAa,OAAA,CAAM,SAAA;EACnB,UAAA,GAAa,OAAA,CAAM,SAAA;AAAA;AAAA,iBAGG,aAAA,CAAA;EACtB,QAAA;EACA,SAAA;EACA,UAAA;EACA;AAAA,GACC,kBAAA,GAAqB,OAAA,CAAM,SAAA"}

package/dist/index.mjs

@@ -5,6 +5,7 @@ import { ShoppingCart } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/cart-script.tsx
 const SCRIPT_ID = "fluid-cdn-script";
+const LEAD_CAPTURE_ID = "fluid-lead-capture-suppress";
 const SCRIPT_SRC = "https://assets.fluid.app/scripts/fluid-sdk/latest/web-widgets/index.js";
 function CartScript({ subdomain, authJwt }) {
 	const authJwtRef = useRef(authJwt);
@@ -20,9 +21,15 @@ function CartScript({ subdomain, authJwt }) {
 		script.dataset.fluidShop = subdomain;
 		if (authJwtRef.current) script.dataset.authJwt = authJwtRef.current;
 		document.head.appendChild(script);
+		const leadCapture = document.createElement("fluid-lead-capture");
+		leadCapture.id = LEAD_CAPTURE_ID;
+		leadCapture.setAttribute("hide-widget", "true");
+		document.body.appendChild(leadCapture);
 		return () => {
 			const existing = document.getElementById(SCRIPT_ID);
 			if (existing) existing.remove();
+			const existingLeadCapture = document.getElementById(LEAD_CAPTURE_ID);
+			if (existingLeadCapture) existingLeadCapture.remove();
 		};
 	}, [subdomain]);
 	return null;
@@ -57,6 +64,7 @@ function CartWidget({ theme }) {
 //#region src/components/cart-button.tsx
 const MAX_SDK_POLL_ATTEMPTS = 50;
 function CartButton({ onCheckout }) {
+	const [initialCount, setInitialCount] = useState(0);
 	const navigateToCheckout = useCallback(() => {
 		if (!window.FluidCommerceSDK) {
 			console.error("FluidCommerceSDK not available");
@@ -81,6 +89,8 @@ function CartButton({ onCheckout }) {
 			if (cancelled) return;
 			if (window.FluidCommerceSDK) {
 				if (onCheckout) window.FluidCommerceSDK.setOnCheckout(navigateToCheckout);
+				const count = window.FairShareSDK?.getCartItemCount?.();
+				if (count != null) setInitialCount(count);
 			} else if (attempts < MAX_SDK_POLL_ATTEMPTS) {
 				attempts++;
 				timeoutId = setTimeout(setupSDK, 100);
@@ -102,7 +112,7 @@ function CartButton({ onCheckout }) {
 			children: [/* @__PURE__ */ jsx(ShoppingCart, { className: "size-5" }), /* @__PURE__ */ jsx("span", {
 				id: "fluid-cart-count",
 				className: "bg-primary-foreground text-primary absolute -top-1 -right-2 flex h-4 w-4 items-center justify-center rounded-full text-[8px] font-bold",
-				children: "0"
+				children: initialCount
 			})]
 		}), /* @__PURE__ */ jsx("span", { children: "Cart" })]
 	});

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../src/components/cart-script.tsx","../src/components/cart-widget.tsx","../src/components/cart-button.tsx","../src/components/shop-container.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\ninterface CartScriptProps {\n  subdomain: string;\n  authJwt?: string;\n}\n\nconst SCRIPT_ID = \"fluid-cdn-script\";\nconst SCRIPT_SRC =\n  \"https://assets.fluid.app/scripts/fluid-sdk/latest/web-widgets/index.js\";\n\nexport default function CartScript({\n  subdomain,\n  authJwt,\n}: CartScriptProps): React.ReactNode {\n  // Use a ref so the script is injected once with the initial JWT value.\n  // ES modules are cached by URL — re-inserting the same script won't\n  // re-execute it, so changing authJwt after the first load has no effect.\n  const authJwtRef = useRef(authJwt);\n  authJwtRef.current = authJwt;\n\n  useEffect(() => {\n    if (!subdomain) return;\n\n    // Don't add a duplicate script\n    if (document.getElementById(SCRIPT_ID)) return;\n\n    const script = document.createElement(\"script\");\n    script.id = SCRIPT_ID;\n    script.src = SCRIPT_SRC;\n    script.type = \"module\";\n    script.crossOrigin = \"anonymous\";\n    script.dataset.fluidShop = subdomain;\n    if (authJwtRef.current) {\n      script.dataset.authJwt = authJwtRef.current;\n    }\n    document.head.appendChild(script);\n\n    return () => {\n      const existing = document.getElementById(SCRIPT_ID);\n      if (existing) existing.remove();\n    };\n  }, [subdomain]);\n\n  return null;\n}\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\ninterface CartWidgetProps {\n  theme?: Record<string, string>;\n}\n\nexport default function CartWidget({\n  theme,\n}: CartWidgetProps): React.ReactNode {\n  const [mounted, setMounted] = useState(false);\n  const widgetRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  useEffect(() => {\n    if (!mounted) return;\n    const el = widgetRef.current;\n    if (!el) return;\n    if (theme) {\n      el.setAttribute(\"theme\", JSON.stringify(theme));\n    } else {\n      el.removeAttribute(\"theme\");\n    }\n  }, [theme, mounted]);\n\n  const widget = React.createElement(\"fluid-cart-widget\", {\n    ref: (el: HTMLElement | null) => {\n      widgetRef.current = el;\n    },\n    \"data-fluid-widget\": \"true\",\n    \"hide-widget\": \"true\",\n    \"is-primary\": \"true\",\n  });\n\n  // Portal to document.body so the cart drawer escapes any\n  // overflow-hidden / isolation stacking contexts in the layout.\n  if (mounted) {\n    return createPortal(widget, document.body);\n  }\n\n  return null;\n}\n","\"use client\";\n\nimport { Button } from \"@fluid-app/ui-primitives\";\nimport { ShoppingCart } from \"lucide-react\";\nimport React, { useEffect, useCallback } from \"react\";\n\ndeclare global {\n  interface Window {\n    FluidCommerceSDK?: {\n      getCheckoutUrl: () => string;\n      setOnCheckout: (callback: () => void) => void;\n    };\n    fluidCart?: {\n      open: () => void;\n    };\n  }\n}\n\ninterface CartButtonProps {\n  onCheckout?: (checkoutUrl: string) => void;\n}\n\nconst MAX_SDK_POLL_ATTEMPTS = 50; // 5 seconds at 100ms intervals\n\nexport function CartButton({ onCheckout }: CartButtonProps): React.ReactNode {\n  const navigateToCheckout = useCallback(() => {\n    if (!window.FluidCommerceSDK) {\n      console.error(\"FluidCommerceSDK not available\");\n      return;\n    }\n\n    try {\n      const checkoutUrl = window.FluidCommerceSDK.getCheckoutUrl();\n      if (!checkoutUrl) {\n        console.error(\"No checkout URL available\");\n        return;\n      }\n      onCheckout?.(checkoutUrl);\n    } catch (error) {\n      console.error(\"Error getting checkout URL:\", error);\n    }\n  }, [onCheckout]);\n\n  useEffect(() => {\n    let timeoutId: ReturnType<typeof setTimeout> | null = null;\n    let attempts = 0;\n    let cancelled = false;\n\n    const setupSDK = () => {\n      if (cancelled) return;\n      if (window.FluidCommerceSDK) {\n        if (onCheckout) {\n          window.FluidCommerceSDK.setOnCheckout(navigateToCheckout);\n        }\n      } else if (attempts < MAX_SDK_POLL_ATTEMPTS) {\n        attempts++;\n        timeoutId = setTimeout(setupSDK, 100);\n      }\n    };\n\n    setupSDK();\n    return () => {\n      cancelled = true;\n      if (timeoutId) clearTimeout(timeoutId);\n    };\n  }, [navigateToCheckout, onCheckout]);\n\n  return (\n    <Button\n      className=\"bg-primary text-primary-foreground hover:bg-primary-700 relative flex items-center gap-4 rounded-sm px-4 py-1.5\"\n      onClick={() => {\n        window.fluidCart?.open();\n      }}\n    >\n      <div className=\"relative\">\n        <ShoppingCart className=\"size-5\" />\n        <span\n          id=\"fluid-cart-count\"\n          className=\"bg-primary-foreground text-primary absolute -top-1 -right-2 flex h-4 w-4 items-center justify-center rounded-full text-[8px] font-bold\"\n        >\n          0\n        </span>\n      </div>\n      <span>Cart</span>\n    </Button>\n  );\n}\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\ninterface ShopContainerProps {\n  children: React.ReactNode;\n  className?: string;\n  cartScript?: React.ReactNode;\n  cartWidget?: React.ReactNode;\n}\n\nexport default function ShopContainer({\n  children,\n  className = \"\",\n  cartScript,\n  cartWidget,\n}: ShopContainerProps): React.ReactNode {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(\n    null,\n  );\n\n  useEffect(() => {\n    const currentContainer = containerRef.current;\n    if (!currentContainer) return;\n\n    const reactContentWrapper = document.createElement(\"div\");\n    reactContentWrapper.id = \"react-content-wrapper\";\n    reactContentWrapper.style.cssText = `\n      position: relative;\n    `;\n    reactContentWrapper.className = \"min-h-full\";\n\n    currentContainer.appendChild(reactContentWrapper);\n\n    setPortalContainer(reactContentWrapper);\n\n    return () => {\n      if (currentContainer && reactContentWrapper) {\n        try {\n          currentContainer.removeChild(reactContentWrapper);\n        } catch (e) {\n          console.warn(\"Failed to cleanup isolated container:\", e);\n        }\n      }\n      setPortalContainer(null);\n    };\n  }, []);\n\n  return (\n    <>\n      <div\n        ref={containerRef}\n        className={`isolated-shop-wrapper ${className} h-full`}\n      >\n        {portalContainer &&\n          createPortal(\n            <>\n              {cartScript}\n              {cartWidget}\n              {children}\n            </>,\n            portalContainer,\n          )}\n      </div>\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/components/cart-script.tsx","../src/components/cart-widget.tsx","../src/components/cart-button.tsx","../src/components/shop-container.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\ninterface CartScriptProps {\n  subdomain: string;\n  authJwt?: string;\n}\n\nconst SCRIPT_ID = \"fluid-cdn-script\";\nconst LEAD_CAPTURE_ID = \"fluid-lead-capture-suppress\";\nconst SCRIPT_SRC =\n  \"https://assets.fluid.app/scripts/fluid-sdk/latest/web-widgets/index.js\";\n\nexport default function CartScript({\n  subdomain,\n  authJwt,\n}: CartScriptProps): React.ReactNode {\n  // Use a ref so the script is injected once with the initial JWT value.\n  // ES modules are cached by URL — re-inserting the same script won't\n  // re-execute it, so changing authJwt after the first load has no effect.\n  const authJwtRef = useRef(authJwt);\n  authJwtRef.current = authJwt;\n\n  useEffect(() => {\n    if (!subdomain) return;\n\n    // Don't add a duplicate script\n    if (document.getElementById(SCRIPT_ID)) return;\n\n    const script = document.createElement(\"script\");\n    script.id = SCRIPT_ID;\n    script.src = SCRIPT_SRC;\n    script.type = \"module\";\n    script.crossOrigin = \"anonymous\";\n    script.dataset.fluidShop = subdomain;\n    if (authJwtRef.current) {\n      script.dataset.authJwt = authJwtRef.current;\n    }\n    document.head.appendChild(script);\n\n    // Suppress the SDK's auto-injected lead capture widget.\n    // The SDK skips injection when it finds an existing element with hide-widget.\n    const leadCapture = document.createElement(\"fluid-lead-capture\");\n    leadCapture.id = LEAD_CAPTURE_ID;\n    leadCapture.setAttribute(\"hide-widget\", \"true\");\n    document.body.appendChild(leadCapture);\n\n    return () => {\n      const existing = document.getElementById(SCRIPT_ID);\n      if (existing) existing.remove();\n      const existingLeadCapture = document.getElementById(LEAD_CAPTURE_ID);\n      if (existingLeadCapture) existingLeadCapture.remove();\n    };\n  }, [subdomain]);\n\n  return null;\n}\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\ninterface CartWidgetProps {\n  theme?: Record<string, string>;\n}\n\nexport default function CartWidget({\n  theme,\n}: CartWidgetProps): React.ReactNode {\n  const [mounted, setMounted] = useState(false);\n  const widgetRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  useEffect(() => {\n    if (!mounted) return;\n    const el = widgetRef.current;\n    if (!el) return;\n    if (theme) {\n      el.setAttribute(\"theme\", JSON.stringify(theme));\n    } else {\n      el.removeAttribute(\"theme\");\n    }\n  }, [theme, mounted]);\n\n  const widget = React.createElement(\"fluid-cart-widget\", {\n    ref: (el: HTMLElement | null) => {\n      widgetRef.current = el;\n    },\n    \"data-fluid-widget\": \"true\",\n    \"hide-widget\": \"true\",\n    \"is-primary\": \"true\",\n  });\n\n  // Portal to document.body so the cart drawer escapes any\n  // overflow-hidden / isolation stacking contexts in the layout.\n  if (mounted) {\n    return createPortal(widget, document.body);\n  }\n\n  return null;\n}\n","\"use client\";\n\nimport { Button } from \"@fluid-app/ui-primitives\";\nimport { ShoppingCart } from \"lucide-react\";\nimport React, { useEffect, useCallback, useState } from \"react\";\n\ndeclare global {\n  interface Window {\n    FluidCommerceSDK?: {\n      getCheckoutUrl: () => string;\n      setOnCheckout: (callback: () => void) => void;\n    };\n    FairShareSDK?: {\n      getCartItemCount: () => number;\n    };\n    fluidCart?: {\n      open: () => void;\n    };\n  }\n}\n\ninterface CartButtonProps {\n  onCheckout?: (checkoutUrl: string) => void;\n}\n\nconst MAX_SDK_POLL_ATTEMPTS = 50; // 5 seconds at 100ms intervals\n\nexport function CartButton({ onCheckout }: CartButtonProps): React.ReactNode {\n  const [initialCount, setInitialCount] = useState(0);\n\n  const navigateToCheckout = useCallback(() => {\n    if (!window.FluidCommerceSDK) {\n      console.error(\"FluidCommerceSDK not available\");\n      return;\n    }\n\n    try {\n      const checkoutUrl = window.FluidCommerceSDK.getCheckoutUrl();\n      if (!checkoutUrl) {\n        console.error(\"No checkout URL available\");\n        return;\n      }\n      onCheckout?.(checkoutUrl);\n    } catch (error) {\n      console.error(\"Error getting checkout URL:\", error);\n    }\n  }, [onCheckout]);\n\n  useEffect(() => {\n    let timeoutId: ReturnType<typeof setTimeout> | null = null;\n    let attempts = 0;\n    let cancelled = false;\n\n    const setupSDK = () => {\n      if (cancelled) return;\n      if (window.FluidCommerceSDK) {\n        if (onCheckout) {\n          window.FluidCommerceSDK.setOnCheckout(navigateToCheckout);\n        }\n        const count = window.FairShareSDK?.getCartItemCount?.();\n        if (count != null) {\n          setInitialCount(count);\n        }\n      } else if (attempts < MAX_SDK_POLL_ATTEMPTS) {\n        attempts++;\n        timeoutId = setTimeout(setupSDK, 100);\n      }\n    };\n\n    setupSDK();\n    return () => {\n      cancelled = true;\n      if (timeoutId) clearTimeout(timeoutId);\n    };\n  }, [navigateToCheckout, onCheckout]);\n\n  return (\n    <Button\n      className=\"bg-primary text-primary-foreground hover:bg-primary-700 relative flex items-center gap-4 rounded-sm px-4 py-1.5\"\n      onClick={() => {\n        window.fluidCart?.open();\n      }}\n    >\n      <div className=\"relative\">\n        <ShoppingCart className=\"size-5\" />\n        <span\n          id=\"fluid-cart-count\"\n          className=\"bg-primary-foreground text-primary absolute -top-1 -right-2 flex h-4 w-4 items-center justify-center rounded-full text-[8px] font-bold\"\n        >\n          {initialCount}\n        </span>\n      </div>\n      <span>Cart</span>\n    </Button>\n  );\n}\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\ninterface ShopContainerProps {\n  children: React.ReactNode;\n  className?: string;\n  cartScript?: React.ReactNode;\n  cartWidget?: React.ReactNode;\n}\n\nexport default function ShopContainer({\n  children,\n  className = \"\",\n  cartScript,\n  cartWidget,\n}: ShopContainerProps): React.ReactNode {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(\n    null,\n  );\n\n  useEffect(() => {\n    const currentContainer = containerRef.current;\n    if (!currentContainer) return;\n\n    const reactContentWrapper = document.createElement(\"div\");\n    reactContentWrapper.id = \"react-content-wrapper\";\n    reactContentWrapper.style.cssText = `\n      position: relative;\n    `;\n    reactContentWrapper.className = \"min-h-full\";\n\n    currentContainer.appendChild(reactContentWrapper);\n\n    setPortalContainer(reactContentWrapper);\n\n    return () => {\n      if (currentContainer && reactContentWrapper) {\n        try {\n          currentContainer.removeChild(reactContentWrapper);\n        } catch (e) {\n          console.warn(\"Failed to cleanup isolated container:\", e);\n        }\n      }\n      setPortalContainer(null);\n    };\n  }, []);\n\n  return (\n    <>\n      <div\n        ref={containerRef}\n        className={`isolated-shop-wrapper ${className} h-full`}\n      >\n        {portalContainer &&\n          createPortal(\n            <>\n              {cartScript}\n              {cartWidget}\n              {children}\n            </>,\n            portalContainer,\n          )}\n      </div>\n    </>\n  );\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-app/cart-ui",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "files": [
     "dist",
     "src/styles"