@kotao/storefront 0.2.5 → 0.2.7

package/dist/react.d.ts

@@ -1,16 +1,19 @@
-import react__default, { ReactNode, ReactElement, ImgHTMLAttributes, VideoHTMLAttributes, ElementType, AnchorHTMLAttributes, CSSProperties, ComponentPropsWithoutRef } from 'react';
+import react__default, { ReactNode, ReactElement, ImgHTMLAttributes, VideoHTMLAttributes, ElementType, AnchorHTMLAttributes, CSSProperties, ComponentPropsWithoutRef, ComponentType } from 'react';
 import { FetcherWithComponents } from 'react-router';
-import { j as CartFormAction, a as CartLineInput } from './types-bcbQzx87.js';
-import { g as getCartFormInput, S as ShopAnalytics, A as AnalyticsContext, C as ConsentState, a as AnalyticsEmitter, b as AnalyticsBus } from './shop-BJSvtmnV.js';
-export { u as useNonce } from './shop-BJSvtmnV.js';
+import { j as CartFormAction, a as CartLineInput } from './types-DZX8ScsJ.js';
+import { g as getCartFormInput, S as ShopAnalytics, A as AnalyticsContext, C as ConsentState, a as AnalyticsEmitter, b as AnalyticsBus } from './shop-CnrnSAJw.js';
+export { u as useNonce } from './shop-CnrnSAJw.js';
 import { Cart } from './storefront-api-types.js';
 import { ImageAttrsOptions, ImageData, ImageCrop, ImageFormat } from './image.js';
 import { C as Connection, P as PaginationInfo } from './pagination-DCrQk02Q.js';
-import { S as SeoConfig } from './types-BDhHWZsP.js';
-import { T as ThemeSettingsStore, R as ResolvedSettings, a as ThemeSettingsSnapshot } from './store-CtCWHI8H.js';
-import { SmartCartMountConfig, CartAdapter } from '@kotao/smart-cart';
-export { R as REACT_SEAM_CART_DOCUMENTS, c as createStorefrontApiCartAdapter } from './cart-documents-CwwRTvm8.js';
+import { S as SeoConfig } from './types-BkY0yET-.js';
+import { T as ThemeSettingsStore, R as ResolvedSettings, c as ThemeSettingsSnapshot } from './store-ZzoBbWir.js';
+import { S as SmartCartMountConfig, C as CartAdapter } from './cart-documents-BLavRDiu.js';
+export { R as REACT_SEAM_CART_DOCUMENTS, a as SmartCartBranding, b as SmartCartLine, c as SmartCartLineDiscount, d as SmartCartLineOption, e as SmartCartMoney, f as SmartCartState, g as createStorefrontApiCartAdapter } from './cart-documents-BLavRDiu.js';
 import { P as PublicForm, a as FormAnswers, b as FormFieldErrors } from './types-CSNXbGFW.js';
+import { a as HydrogenEditorPreviewRuntime, x as HydrogenEditorReconciliationReason, l as HydrogenEditorInstanceSnapshot } from './hydrogen-CqDMW3YC.js';
+import '@kotao/storefront-contracts';
+import './bridge-CfNBWu0H.js';
 
 type CartFormInputValue = unknown;
 type CartFormFetcher = FetcherWithComponents<unknown>;
@@ -71,7 +74,7 @@ interface AnalyticsProviderProps {
     readonly shopId?: string;
     readonly shop?: ShopAnalytics;
     readonly geo?: AnalyticsContext['geo'];
-    /** Current page URL; changing it auto-emits `page_viewed` (themes pass it from RR7 navigation). */
+    /** Current page URL; changing it auto-emits `page_viewed` (themes pass it from RR8 navigation). */
     readonly url?: string;
     /** Same-origin pixel endpoint (default '/api/storefront/pixel'). */
     readonly pixelEndpoint?: string;
@@ -111,9 +114,11 @@ interface AnalyticsProductViewProps {
         readonly products?: readonly {
             readonly handle?: string | null;
             readonly id?: string | null;
-            readonly price?: string | null;
+            readonly price?: number | string | null;
             readonly productId?: string | null;
             readonly quantity?: number | null;
+            readonly sku?: string | null;
+            readonly currency?: string | null;
             readonly title?: string | null;
             readonly variantId?: string | null;
             readonly variantTitle?: string | null;
@@ -319,4 +324,67 @@ interface StorefrontFormFieldsProps {
 declare function StorefrontFormFields({ form, locale, fallbackLocale, answers: initialAnswers, errors, onAnswersChange, idPrefix, }: StorefrontFormFieldsProps): react__default.JSX.Element;
 declare function StorefrontForm({ form, locale, fallbackLocale, answers, errors, submitted, submitLabel, onAnswersChange, action, method, ...props }: StorefrontFormProps): react__default.JSX.Element;
 
-export { Analytics, AnalyticsCartView, type AnalyticsCartViewProps, AnalyticsCollectionView, type AnalyticsCollectionViewProps, AnalyticsProductView, type AnalyticsProductViewProps, AnalyticsProvider, type AnalyticsProviderProps, AnalyticsSearchView, type AnalyticsSearchViewProps, CartDrawerOverlay, type CartDrawerOverlayProps, CartForm, type CartFormFetcher, type CartFormProps, type CartQueryDataReturn, type CartReturn, ConsentBanner, type ConsentBannerProps, type ConsentBannerRenderProps, Image, type ImageProps, MediaFile, type MediaFileImageOptions, type MediaFileProps, type MediaFileVideoOptions, Money, type MoneyData, type MoneyProps, type OptimisticCartLineInput, OptimisticInput, type OptimisticInputData, type OptimisticInputProps, Pagination, type PaginationProps, Seo, type SeoProps, ShopPayButton, type ShopPayButtonProps, StorefrontForm, StorefrontFormFields, type StorefrontFormFieldsProps, type StorefrontFormProps, ThemeSettingsProvider, type ThemeSettingsProviderProps, type UseMoneyValue, openSmartCart, useAnalytics, useGlobalThemeTokens, useMoney, useOptimisticData, useSectionSettings, useThemeSettings };
+interface HydrogenEditorRegisteredComponentProps {
+    readonly instanceId: string;
+    readonly props: Readonly<Record<string, unknown>>;
+    readonly styles: Readonly<Record<string, string | number>>;
+    readonly slots: Readonly<Record<string, readonly string[]>>;
+    readonly variantId?: string;
+}
+type HydrogenEditorRegisteredComponent = ComponentType<HydrogenEditorRegisteredComponentProps>;
+interface HydrogenEditorProviderProps {
+    readonly preview: HydrogenEditorPreviewRuntime;
+    readonly documentId: string;
+    readonly route?: string;
+    readonly reconciliationReason?: HydrogenEditorReconciliationReason;
+    /**
+     * Changes when same-route loader data or an HMR generation reconciles. It is deliberately not
+     * interpreted as authority and is never sent across the bridge.
+     */
+    readonly reconciliationKey?: string | number;
+    readonly components?: Readonly<Record<string, HydrogenEditorRegisteredComponent>>;
+    readonly viewportWidth?: number;
+    readonly children: ReactNode;
+}
+/**
+ * Activates the editor runtime for a route. Route/loader/HMR changes reconcile the existing
+ * preview store instead of replacing it, so source-backed draft operations and selection remain
+ * visible. The provider is editor-only and must not be mounted in ordinary public responses.
+ */
+declare function HydrogenEditorProvider({ children, components, documentId, preview, reconciliationKey, reconciliationReason, route, viewportWidth, }: HydrogenEditorProviderProps): ReactElement;
+interface HydrogenEditorReactInstance {
+    readonly snapshot: HydrogenEditorInstanceSnapshot;
+    readonly props: Readonly<Record<string, unknown>>;
+    readonly styles: Readonly<Record<string, string | number>>;
+}
+/**
+ * Subscribes to exactly one component instance. A prop/style operation invalidates only this
+ * subscription; structural operations additionally invalidate the affected parent/slot.
+ */
+declare function useHydrogenEditorInstance(instanceId: string, sourceProps?: Readonly<Record<string, unknown>>): HydrogenEditorReactInstance | null;
+declare function useHydrogenEditorSlot(parentInstanceId: string, slotId: string): readonly string[];
+interface HydrogenEditorBoundaryProps {
+    readonly instanceId: string;
+    readonly children: ReactElement;
+    readonly applyPreviewProps?: boolean;
+    readonly viewportWidth?: number;
+}
+/**
+ * A reconciliation and interaction boundary for one extracted JSX instance. It uses a
+ * `display: contents` marker only in editor mode, preserving the component's layout while clicks
+ * and pointer transitions remain attributable to the stable instance ID.
+ */
+declare function HydrogenEditorBoundary({ applyPreviewProps, children, instanceId, viewportWidth, }: HydrogenEditorBoundaryProps): ReactElement | null;
+interface HydrogenEditorSlotProps {
+    readonly parentInstanceId: string;
+    readonly slotId: string;
+    /**
+     * Source-rendered children keyed by stable instance ID. Newly inserted instances fall through to
+     * the registered component library without replacing or regenerating existing route source.
+     */
+    readonly existingChildren?: Readonly<Record<string, ReactElement>>;
+    readonly empty?: ReactNode;
+}
+declare function HydrogenEditorSlot({ empty, existingChildren, parentInstanceId, slotId, }: HydrogenEditorSlotProps): ReactElement;
+
+export { Analytics, AnalyticsCartView, type AnalyticsCartViewProps, AnalyticsCollectionView, type AnalyticsCollectionViewProps, AnalyticsProductView, type AnalyticsProductViewProps, AnalyticsProvider, type AnalyticsProviderProps, AnalyticsSearchView, type AnalyticsSearchViewProps, CartAdapter, CartDrawerOverlay, type CartDrawerOverlayProps, CartForm, type CartFormFetcher, type CartFormProps, type CartQueryDataReturn, type CartReturn, ConsentBanner, type ConsentBannerProps, type ConsentBannerRenderProps, HydrogenEditorBoundary, type HydrogenEditorBoundaryProps, HydrogenEditorProvider, type HydrogenEditorProviderProps, type HydrogenEditorReactInstance, type HydrogenEditorRegisteredComponent, type HydrogenEditorRegisteredComponentProps, HydrogenEditorSlot, type HydrogenEditorSlotProps, Image, type ImageProps, MediaFile, type MediaFileImageOptions, type MediaFileProps, type MediaFileVideoOptions, Money, type MoneyData, type MoneyProps, type OptimisticCartLineInput, OptimisticInput, type OptimisticInputData, type OptimisticInputProps, Pagination, type PaginationProps, Seo, type SeoProps, ShopPayButton, type ShopPayButtonProps, SmartCartMountConfig, StorefrontForm, StorefrontFormFields, type StorefrontFormFieldsProps, type StorefrontFormProps, ThemeSettingsProvider, type ThemeSettingsProviderProps, type UseMoneyValue, openSmartCart, useAnalytics, useGlobalThemeTokens, useHydrogenEditorInstance, useHydrogenEditorSlot, useMoney, useOptimisticData, useSectionSettings, useThemeSettings };

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