@kotao/storefront 0.2.4 → 0.2.6

package/dist/react.js

@@ -1,13 +1,14 @@
-import { getCartFormInput, createAnalyticsBus, createPixelTransport } from './chunk-XMTWFJCZ.js';
-export { useNonce } from './chunk-XMTWFJCZ.js';
+import { getCartFormInput, createAnalyticsBus, collectAnalyticsAttribution, createPixelTransport } from './chunk-RFM27BKZ.js';
+export { useNonce } from './chunk-RFM27BKZ.js';
 import { getPaginationInfo } from './chunk-5QOFKGKD.js';
 import { CART_FORM_ACTIONS, GRANTED_CONSENT, CONSENT_COOKIE, readConsentCookie, mergeConsent, buildConsentCookie } from './chunk-OGWYTYYS.js';
-import { getSeoMeta, serializeJsonLd } from './chunk-MYDKIJRH.js';
-export { REACT_SEAM_CART_DOCUMENTS, createStorefrontApiCartAdapter } from './chunk-2IWNUDSZ.js';
+import { getSeoMeta, serializeJsonLd } from './chunk-SVMYFYIA.js';
+export { REACT_SEAM_CART_DOCUMENTS, createStorefrontApiCartAdapter } from './chunk-WNXI3MPM.js';
+import { resolveHydrogenEditorStyles } from './chunk-XXNCFWXT.js';
 export { StorefrontForm, StorefrontFormFields } from './chunk-VV653S52.js';
 import './chunk-IIOHENCG.js';
 import { buildImageAttrs } from './chunk-3YQXJNR7.js';
-import { createContext, useState, useRef, useMemo, useEffect, useCallback, useContext, useSyncExternalStore } from 'react';
+import { createContext, useState, useRef, useMemo, useEffect, useCallback, useContext, useSyncExternalStore, Children, isValidElement, cloneElement, createElement } from 'react';
 import { useFetcher } from 'react-router';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -37,6 +38,22 @@ function OptimisticInput({ id, data }) {
 function useOptimisticData(_id) {
   return void 0;
 }
+
+// src/analytics/anonymous-context.ts
+function anonymousPageContext(candidateUrl, currentUrl) {
+  if (!candidateUrl || !currentUrl) return {};
+  try {
+    const current = new URL(currentUrl);
+    const candidate = new URL(candidateUrl, current);
+    if (!["http:", "https:"].includes(current.protocol)) return {};
+    if (!["http:", "https:"].includes(candidate.protocol)) return {};
+    if (candidate.origin !== current.origin) return {};
+    const pathname = /^\/checkout(?:\/|$)/.test(candidate.pathname) ? "/checkout" : candidate.pathname || "/";
+    return { url: `${candidate.origin}${pathname}` };
+  } catch {
+    return {};
+  }
+}
 var beaconSend = (endpoint, body) => {
   if (typeof navigator !== "undefined" && typeof navigator.sendBeacon === "function") {
     if (navigator.sendBeacon(endpoint, new Blob([body], { type: "application/json" }))) return;
@@ -57,12 +74,21 @@ function AnalyticsProvider(props) {
   const [mounted, setMounted] = useState(false);
   const consentRef = useRef(consent);
   consentRef.current = consent;
+  const pageUrlRef = useRef(props.url);
+  pageUrlRef.current = props.url;
   const contextRef = useRef({});
   const shopId = props.shopId ?? props.shop?.shopId ?? props.shop?.storefrontId;
+  const browserUrl = typeof window === "undefined" ? void 0 : (() => {
+    try {
+      return new URL(props.url ?? window.location.href, window.location.href).href;
+    } catch {
+      return props.url;
+    }
+  })();
   contextRef.current = {
     ...shopId !== void 0 ? { shopId } : {},
     ...props.geo !== void 0 ? { geo: props.geo } : {},
-    ...props.url !== void 0 ? { url: props.url } : {}
+    ...browserUrl !== void 0 ? { url: browserUrl } : props.url !== void 0 ? { url: props.url } : {}
   };
   const endpointRef = useRef(props.pixelEndpoint);
   const bus = useMemo(
@@ -72,7 +98,25 @@ function AnalyticsProvider(props) {
         ...endpointRef.current !== void 0 ? { endpoint: endpointRef.current } : {}
       }),
       getConsent: () => consentRef.current,
-      getContext: () => contextRef.current
+      getAnonymousContext: () => {
+        if (typeof window === "undefined") return {};
+        return anonymousPageContext(
+          pageUrlRef.current ?? window.location.href,
+          window.location.href
+        );
+      },
+      // createAnalyticsBus calls this only after an explicit analytics grant. Keep every browser
+      // attribution/device read inside this lazy seam so denied visits never evaluate it.
+      getContext: () => ({
+        ...collectAnalyticsAttribution(
+          typeof window === "undefined" || typeof document === "undefined" ? null : {
+            referrer: document.referrer,
+            search: window.location.search,
+            ...typeof window.matchMedia === "function" ? { matchMedia: (query) => window.matchMedia(query) } : {}
+          }
+        ),
+        ...contextRef.current
+      })
     }),
     []
   );
@@ -144,13 +188,22 @@ function AnalyticsProductView({ data }) {
   const product = data?.products?.[0];
   const productId = product?.productId ?? product?.id ?? null;
   const handle = product?.handle ?? void 0;
+  const price = product?.price == null ? void 0 : Number(product.price);
   const payload = useMemo(() => {
     if (productId == null) return null;
     return {
       productId,
-      ...handle != null ? { handle } : {}
+      ...handle != null ? { handle } : {},
+      ...product?.variantId != null ? { variantId: product.variantId } : {},
+      ...product?.title != null ? { title: product.title } : {},
+      ...product?.variantTitle != null ? { variantTitle: product.variantTitle } : {},
+      ...product?.vendor != null ? { vendor: product.vendor } : {},
+      ...product?.sku != null ? { sku: product.sku } : {},
+      ...price !== void 0 && Number.isFinite(price) ? { price } : {},
+      ...product?.currency != null ? { currency: product.currency } : {},
+      ...product?.quantity != null ? { quantity: product.quantity } : {}
     };
-  }, [handle, productId]);
+  }, [handle, price, product, productId]);
   usePublishAnalytics("product_viewed", payload);
   return null;
 }
@@ -1948,7 +2001,223 @@ function CartDrawerOverlay({ config, adapter }) {
   }, [config, adapter]);
   return null;
 }
+var HydrogenEditorReactContext = createContext(null);
+var HYDROGEN_CANVAS_INTENT_EVENT = "kotao:hydrogen-canvas-intent";
+var HYDROGEN_CANVAS_RESULT_EVENT = "kotao:hydrogen-canvas-result";
+var HYDROGEN_CANVAS_STATE_EVENT = "kotao:hydrogen-canvas-state";
+var HYDROGEN_CANVAS_STATE_REQUEST_EVENT = "kotao:hydrogen-canvas-state-request";
+function useHydrogenEditorCanvasEvents(preview) {
+  const snapshot = useSyncExternalStore(
+    (listener) => preview.store.subscribe(listener),
+    () => preview.store.getSnapshot(),
+    () => preview.store.getSnapshot()
+  );
+  useEffect(() => {
+    if (typeof document === "undefined" || typeof CustomEvent === "undefined") return;
+    const dispatchState = () => {
+      document.dispatchEvent(
+        new CustomEvent(HYDROGEN_CANVAS_STATE_EVENT, {
+          detail: {
+            selectedInstanceId: snapshot.selectedInstanceId,
+            hoveredInstanceId: snapshot.hoveredInstanceId,
+            selectionStatus: snapshot.selectionStatus,
+            revision: snapshot.revision
+          }
+        })
+      );
+    };
+    dispatchState();
+    document.addEventListener(HYDROGEN_CANVAS_STATE_REQUEST_EVENT, dispatchState);
+    return () => document.removeEventListener(HYDROGEN_CANVAS_STATE_REQUEST_EVENT, dispatchState);
+  }, [
+    snapshot.hoveredInstanceId,
+    snapshot.revision,
+    snapshot.selectedInstanceId,
+    snapshot.selectionStatus
+  ]);
+  useEffect(() => {
+    if (typeof document === "undefined" || typeof CustomEvent === "undefined") return;
+    const onIntent = (event) => {
+      if (!(event instanceof CustomEvent)) return;
+      const result = preview.dispatchCanvasIntent(event.detail);
+      document.dispatchEvent(new CustomEvent(HYDROGEN_CANVAS_RESULT_EVENT, { detail: result }));
+    };
+    document.addEventListener(HYDROGEN_CANVAS_INTENT_EVENT, onIntent);
+    return () => document.removeEventListener(HYDROGEN_CANVAS_INTENT_EVENT, onIntent);
+  }, [preview]);
+}
+function HydrogenEditorProvider({
+  children,
+  components = {},
+  documentId,
+  preview,
+  reconciliationKey,
+  reconciliationReason = "route",
+  route,
+  viewportWidth
+}) {
+  useHydrogenEditorCanvasEvents(preview);
+  const value = useMemo(
+    () => ({
+      preview,
+      components,
+      ...viewportWidth !== void 0 ? { viewportWidth } : {}
+    }),
+    [components, preview, viewportWidth]
+  );
+  useEffect(() => {
+    preview.reconcile(documentId, reconciliationReason, route);
+    preview.ready();
+  }, [documentId, preview, reconciliationKey, reconciliationReason, route]);
+  return /* @__PURE__ */ jsx(HydrogenEditorReactContext.Provider, { value, children });
+}
+function useHydrogenEditorContext() {
+  const context = useContext(HydrogenEditorReactContext);
+  if (context === null) {
+    throw new Error("Hydrogen editor hooks must be rendered inside HydrogenEditorProvider");
+  }
+  return context;
+}
+function useInstanceSnapshot(instanceId) {
+  const { preview } = useHydrogenEditorContext();
+  return useSyncExternalStore(
+    (listener) => preview.store.subscribeInstance(instanceId, listener),
+    () => preview.store.getInstanceSnapshot(instanceId),
+    () => preview.store.getInstanceSnapshot(instanceId)
+  );
+}
+function useHydrogenEditorInstance(instanceId, sourceProps = {}) {
+  const { preview, viewportWidth } = useHydrogenEditorContext();
+  const snapshot = useInstanceSnapshot(instanceId);
+  return useMemo(() => {
+    if (snapshot === null) return null;
+    return {
+      snapshot,
+      props: { ...sourceProps, ...snapshot.resolvedProps },
+      styles: resolveHydrogenEditorStyles(preview.manifest, snapshot.instance, viewportWidth)
+    };
+  }, [preview.manifest, snapshot, sourceProps, viewportWidth]);
+}
+function useHydrogenEditorSlot(parentInstanceId, slotId) {
+  const snapshot = useInstanceSnapshot(parentInstanceId);
+  return snapshot?.childInstanceIds[slotId] ?? [];
+}
+function HydrogenEditorBoundary({
+  applyPreviewProps = true,
+  children,
+  instanceId,
+  viewportWidth
+}) {
+  const { preview, viewportWidth: contextViewportWidth } = useHydrogenEditorContext();
+  const snapshot = useInstanceSnapshot(instanceId);
+  useEffect(() => preview.registerInstance(instanceId), [instanceId, preview]);
+  if (snapshot === null) return null;
+  const child = Children.only(children);
+  if (!isValidElement(child)) return null;
+  const effectiveViewportWidth = viewportWidth ?? contextViewportWidth;
+  const previewProps = applyPreviewProps ? snapshot.resolvedProps : {};
+  const childStyle = isRecordStyle(child.props.style) ? child.props.style : {};
+  const previewStyle = applyPreviewProps ? resolveHydrogenEditorStyles(preview.manifest, snapshot.instance, effectiveViewportWidth) : {};
+  const renderedChild = cloneElement(child, {
+    ...previewProps,
+    ...Object.keys(previewStyle).length > 0 ? { style: { ...childStyle, ...previewStyle } } : {}
+  });
+  const blockingReason = snapshot.capabilityReasons.find((reason) => reason.severity === "blocking");
+  const inlineProps = snapshot.component.props.filter(
+    (control) => control.allowedBindings.includes("inline") && (snapshot.instance.props[control.propName] ?? control.defaultBinding)?.kind !== "external" && (control.control === "text" || control.control === "textarea" || control.control === "richtext")
+  ).map((control) => ({ propName: control.propName, label: control.label }));
+  const layoutControls = snapshot.component.styles.layout.filter((control) => ["gap", "height", "margin", "padding", "width"].includes(control.control)).map((control) => ({
+    controlId: control.controlId,
+    control: control.control,
+    label: control.label,
+    allowedValues: control.allowedValues
+  }));
+  const onPointerEnter = (_event) => {
+    preview.hoverInstance(instanceId);
+  };
+  const onPointerLeave = (_event) => {
+    preview.hoverInstance(null);
+  };
+  const onClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    preview.selectInstance(instanceId);
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-kotao-hydrogen-capability": snapshot.editable ? "editable" : "read-only",
+      "data-kotao-hydrogen-capabilities": snapshot.component.capabilities.join(" "),
+      "data-kotao-hydrogen-component": snapshot.component.componentId,
+      "data-kotao-hydrogen-instance": instanceId,
+      "data-kotao-hydrogen-inline-props": JSON.stringify(inlineProps),
+      "data-kotao-hydrogen-label": snapshot.component.name,
+      "data-kotao-hydrogen-layout-controls": JSON.stringify(layoutControls),
+      "data-kotao-hydrogen-reason": blockingReason?.code,
+      onClick,
+      onPointerEnter,
+      onPointerLeave,
+      style: { display: "contents" },
+      children: renderedChild
+    }
+  );
+}
+function isRecordStyle(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function HydrogenEditorRegisteredInstance({
+  instanceId
+}) {
+  const { components } = useHydrogenEditorContext();
+  const instance = useHydrogenEditorInstance(instanceId);
+  if (instance === null) return null;
+  const Component = components[instance.snapshot.component.componentId];
+  if (Component === void 0) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-kotao-hydrogen-instance": instanceId,
+        "data-kotao-hydrogen-reason": "COMPONENT_RENDERER_UNAVAILABLE",
+        style: { display: "contents" }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(HydrogenEditorBoundary, { applyPreviewProps: false, instanceId, children: createElement(Component, {
+    instanceId,
+    props: instance.props,
+    styles: instance.styles,
+    slots: instance.snapshot.childInstanceIds,
+    ...instance.snapshot.instance.variantId !== void 0 ? { variantId: instance.snapshot.instance.variantId } : {}
+  }) });
+}
+function HydrogenEditorSlot({
+  empty = null,
+  existingChildren = {},
+  parentInstanceId,
+  slotId
+}) {
+  const parent = useInstanceSnapshot(parentInstanceId);
+  const instanceIds = useHydrogenEditorSlot(parentInstanceId, slotId);
+  const slot = parent?.component.slots.find((candidate) => candidate.slotId === slotId);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-kotao-hydrogen-slot": slotId,
+      "data-kotao-hydrogen-slot-accepts": slot?.accepts.mode === "any" ? "*" : slot?.accepts.componentIds.join(" ") ?? "",
+      "data-kotao-hydrogen-slot-count": instanceIds.length,
+      "data-kotao-hydrogen-slot-insertion": slot?.insertion ?? "fixed",
+      "data-kotao-hydrogen-slot-label": slot?.label ?? slotId,
+      "data-kotao-hydrogen-slot-max": slot?.maxInstances ?? 0,
+      "data-kotao-hydrogen-slot-parent": parentInstanceId,
+      style: { display: "contents" },
+      children: instanceIds.length === 0 ? empty : instanceIds.map((instanceId) => {
+        const existing = existingChildren[instanceId];
+        return existing === void 0 ? /* @__PURE__ */ jsx(HydrogenEditorRegisteredInstance, { instanceId }, instanceId) : /* @__PURE__ */ jsx(HydrogenEditorBoundary, { instanceId, children: existing }, instanceId);
+      })
+    }
+  );
+}
 
-export { Analytics, AnalyticsCartView, AnalyticsCollectionView, AnalyticsProductView, AnalyticsProvider, AnalyticsSearchView, CartDrawerOverlay, CartForm, ConsentBanner, Image, MediaFile, Money, OptimisticInput, Pagination, Seo, ShopPayButton, ThemeSettingsProvider, openSmartCart, useAnalytics, useGlobalThemeTokens, useMoney, useOptimisticData, useSectionSettings, useThemeSettings };
+export { Analytics, AnalyticsCartView, AnalyticsCollectionView, AnalyticsProductView, AnalyticsProvider, AnalyticsSearchView, CartDrawerOverlay, CartForm, ConsentBanner, HydrogenEditorBoundary, HydrogenEditorProvider, HydrogenEditorSlot, Image, MediaFile, Money, OptimisticInput, Pagination, Seo, ShopPayButton, ThemeSettingsProvider, openSmartCart, useAnalytics, useGlobalThemeTokens, useHydrogenEditorInstance, useHydrogenEditorSlot, useMoney, useOptimisticData, useSectionSettings, useThemeSettings };
 //# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map