@kotao/storefront 0.2.0

package/dist/react-router.d.ts

@@ -0,0 +1,29 @@
+import { K as KotaoEnv, a as KotaoContext } from './routing-BfUp49o8.js';
+export { b as KotaoSession, s as stripLocalePrefixFromRequest } from './routing-BfUp49o8.js';
+import { H as HydrogenSession } from './types-Df3bGbKU.js';
+import './client-D9YYA2w6.js';
+
+type JsonInit = ResponseInit | number;
+interface JsonResponse<T> {
+    readonly type: string;
+    readonly data: T;
+    readonly init: ResponseInit | null;
+}
+type AwaitedDeferred<T> = T extends Record<string, unknown> ? {
+    [K in keyof T]: Awaited<T[K]>;
+} : Awaited<T>;
+declare function json<T>(data: T, init?: JsonInit): JsonResponse<T>;
+declare function defer<T>(data: T, _init?: JsonInit): Promise<AwaitedDeferred<T>>;
+
+interface KotaoLoadContextDeps {
+    readonly openCache?: (name: string) => Promise<Cache>;
+    readonly session?: HydrogenSession;
+}
+/**
+ * Build the React Router 7 load context for a storefront request. Call from the RR7 server
+ * entry's `getLoadContext`. Isolated here so the SDK core stays framework-agnostic (a TanStack
+ * Start binding can be added alongside without touching the core).
+ */
+declare const getKotaoLoadContext: (request: Request, env: KotaoEnv, executionCtx: ExecutionContext, deps?: KotaoLoadContextDeps) => Promise<KotaoContext>;
+
+export { KotaoContext, KotaoEnv, defer, getKotaoLoadContext, json };

package/dist/react-router.js

@@ -0,0 +1,33 @@
+import { createKotaoContext } from './chunk-U5677AEA.js';
+export { stripLocalePrefixFromRequest } from './chunk-U5677AEA.js';
+import './chunk-OGWYTYYS.js';
+
+// src/react-router/compat.ts
+function normalizeJsonInit(init) {
+  return typeof init === "number" ? { status: init } : init;
+}
+function isRecord(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function isPromiseLike(value) {
+  return isRecord(value) && typeof value.then === "function";
+}
+function json(data, init) {
+  return Response.json(data, normalizeJsonInit(init));
+}
+async function defer(data, _init) {
+  if (isRecord(data) && !isPromiseLike(data)) {
+    const entries = await Promise.all(
+      Object.entries(data).map(async ([key, value]) => [key, await value])
+    );
+    return Object.fromEntries(entries);
+  }
+  return await data;
+}
+
+// src/react-router/binding.ts
+var getKotaoLoadContext = (request, env, executionCtx, deps) => createKotaoContext(request, env, executionCtx, deps);
+
+export { defer, getKotaoLoadContext, json };
+//# sourceMappingURL=react-router.js.map
+//# sourceMappingURL=react-router.js.map

package/dist/react-router.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react-router/compat.ts","../src/react-router/binding.ts"],"names":[],"mappings":";;;;;AAUA,SAAS,kBAAkB,IAAA,EAA2C;AACpE,EAAA,OAAO,OAAO,IAAA,KAAS,QAAA,GAAW,EAAE,MAAA,EAAQ,MAAK,GAAI,IAAA;AACvD;AAEA,SAAS,SAAS,KAAA,EAAkD;AAClE,EAAA,OAAO,KAAA,KAAU,QAAQ,OAAO,KAAA,KAAU,YAAY,CAAC,KAAA,CAAM,QAAQ,KAAK,CAAA;AAC5E;AAEA,SAAS,cAAc,KAAA,EAA+C;AACpE,EAAA,OAAO,QAAA,CAAS,KAAK,CAAA,IAAK,OAAO,MAAM,IAAA,KAAS,UAAA;AAClD;AAEO,SAAS,IAAA,CAAQ,MAAS,IAAA,EAAkC;AACjE,EAAA,OAAO,QAAA,CAAS,IAAA,CAAK,IAAA,EAAM,iBAAA,CAAkB,IAAI,CAAC,CAAA;AACpD;AAEA,eAAsB,KAAA,CAAS,MAAS,KAAA,EAA+C;AACrF,EAAA,IAAI,SAAS,IAAI,CAAA,IAAK,CAAC,aAAA,CAAc,IAAI,CAAA,EAAG;AAC1C,IAAA,MAAM,OAAA,GAAU,MAAM,OAAA,CAAQ,GAAA;AAAA,MAC5B,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAA,CAAE,IAAI,OAAO,CAAC,GAAA,EAAK,KAAK,CAAA,KAAM,CAAC,GAAA,EAAK,MAAM,KAAK,CAAU;AAAA,KAC9E;AACA,IAAA,OAAO,MAAA,CAAO,YAAY,OAAO,CAAA;AAAA,EACnC;AAEA,EAAA,OAAQ,MAAM,IAAA;AAChB;;;ACrBO,IAAM,mBAAA,GAAsB,CACjC,OAAA,EACA,GAAA,EACA,YAAA,EACA,SAC0B,kBAAA,CAAmB,OAAA,EAAS,GAAA,EAAK,YAAA,EAAc,IAAI","file":"react-router.js","sourcesContent":["type JsonInit = ResponseInit | number\nexport interface JsonResponse<T> {\n  readonly type: string\n  readonly data: T\n  readonly init: ResponseInit | null\n}\n\ntype AwaitedDeferred<T> =\n  T extends Record<string, unknown> ? { [K in keyof T]: Awaited<T[K]> } : Awaited<T>\n\nfunction normalizeJsonInit(init?: JsonInit): ResponseInit | undefined {\n  return typeof init === 'number' ? { status: init } : init\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return value !== null && typeof value === 'object' && !Array.isArray(value)\n}\n\nfunction isPromiseLike(value: unknown): value is PromiseLike<unknown> {\n  return isRecord(value) && typeof value.then === 'function'\n}\n\nexport function json<T>(data: T, init?: JsonInit): JsonResponse<T> {\n  return Response.json(data, normalizeJsonInit(init)) as unknown as JsonResponse<T>\n}\n\nexport async function defer<T>(data: T, _init?: JsonInit): Promise<AwaitedDeferred<T>> {\n  if (isRecord(data) && !isPromiseLike(data)) {\n    const entries = await Promise.all(\n      Object.entries(data).map(async ([key, value]) => [key, await value] as const),\n    )\n    return Object.fromEntries(entries) as AwaitedDeferred<T>\n  }\n\n  return (await data) as AwaitedDeferred<T>\n}\n","import type { HydrogenSession } from '../cart/types'\nimport { createKotaoContext, type KotaoContext, type KotaoEnv } from '../context/context'\nexport { stripLocalePrefixFromRequest } from '../localization/routing'\n\nexport interface KotaoLoadContextDeps {\n  readonly openCache?: (name: string) => Promise<Cache>\n  readonly session?: HydrogenSession\n}\n\n/**\n * Build the React Router 7 load context for a storefront request. Call from the RR7 server\n * entry's `getLoadContext`. Isolated here so the SDK core stays framework-agnostic (a TanStack\n * Start binding can be added alongside without touching the core).\n */\nexport const getKotaoLoadContext = (\n  request: Request,\n  env: KotaoEnv,\n  executionCtx: ExecutionContext,\n  deps?: KotaoLoadContextDeps,\n): Promise<KotaoContext> => createKotaoContext(request, env, executionCtx, deps)\n"]}

package/dist/react.d.ts

@@ -0,0 +1,299 @@
+import { ReactNode, ReactElement, ImgHTMLAttributes, VideoHTMLAttributes, ElementType, AnchorHTMLAttributes, CSSProperties } from 'react';
+import { FetcherWithComponents } from 'react-router';
+import { C as CartFormAction, b as CartLineInput } from './types-Df3bGbKU.js';
+import { M as getCartFormInput, v as ShopAnalytics, d as AnalyticsContext, a as ConsentState, e as AnalyticsEmitter, b as AnalyticsBus } from './shop-DkQmro-Y.js';
+export { N as useNonce } from './shop-DkQmro-Y.js';
+import { Cart } from './storefront-api-types.js';
+import { ImageAttrsOptions, ImageData, ImageCrop, ImageFormat } from './image.js';
+import { C as Connection, b as PaginationInfo } from './pagination-CPgH3fAa.js';
+import { S as SeoConfig } from './types-BDhHWZsP.js';
+import { c as ThemeSettingsStore, b as ResolvedSettings, T as ThemeSettingsSnapshot } from './store-DQK1nhob.js';
+import { SmartCartMountConfig, CartAdapter } from '@kotao/smart-cart';
+export { R as REACT_SEAM_CART_DOCUMENTS, c as createStorefrontApiCartAdapter } from './cart-documents-CwwRTvm8.js';
+
+type CartFormInputValue = unknown;
+type CartFormFetcher = FetcherWithComponents<unknown>;
+interface CartFormProps {
+    readonly action: CartFormAction;
+    readonly inputs?: Readonly<Record<string, CartFormInputValue>>;
+    readonly route?: string;
+    readonly children?: ReactNode | ((fetcher: CartFormFetcher) => ReactNode);
+}
+type OptimisticCartLineInput = CartLineInput;
+type OptimisticInputData = Readonly<Record<string, unknown>>;
+type CartReturn = Cart;
+interface CartQueryDataReturn {
+    readonly cart: CartReturn;
+    readonly errors?: readonly unknown[];
+    readonly userErrors?: readonly unknown[];
+}
+declare const CartForm: (({ action, inputs, route, children }: CartFormProps) => ReactElement) & {
+    ACTIONS: Readonly<{
+        readonly LinesAdd: "LinesAdd";
+        readonly LinesUpdate: "LinesUpdate";
+        readonly LinesRemove: "LinesRemove";
+        readonly DiscountCodesUpdate: "DiscountCodesUpdate";
+        readonly GiftCardCodesAdd: "GiftCardCodesAdd";
+        readonly GiftCardCodesRemove: "GiftCardCodesRemove";
+        readonly BuyerIdentityUpdate: "BuyerIdentityUpdate";
+        readonly NoteUpdate: "NoteUpdate";
+        readonly AttributesUpdate: "AttributesUpdate";
+        readonly MetafieldsSet: "MetafieldsSet";
+        readonly MetafieldsDelete: "MetafieldsDelete";
+        readonly DeliveryAddressesReplace: "DeliveryAddressesReplace";
+        readonly SelectedDeliveryOptionsUpdate: "SelectedDeliveryOptionsUpdate";
+    }>;
+    getFormInput: typeof getCartFormInput;
+};
+interface OptimisticInputProps {
+    readonly id: string;
+    readonly data: OptimisticInputData;
+}
+declare function OptimisticInput({ id, data }: OptimisticInputProps): ReactElement;
+declare function useOptimisticData<T>(_id: string | null | undefined): T | undefined;
+
+interface AnalyticsContextValue {
+    readonly subscribe: AnalyticsEmitter['subscribe'];
+    readonly publish: AnalyticsBus['publish'];
+    readonly consent: ConsentState;
+    readonly setConsent: (patch: Partial<ConsentState>) => void;
+    readonly decided: boolean;
+    readonly mounted: boolean;
+}
+interface AnalyticsProviderProps {
+    readonly cart?: unknown;
+    readonly consent?: {
+        readonly checkoutDomain?: string;
+        readonly storefrontAccessToken?: string;
+        readonly withPrivacyBanner?: boolean;
+    };
+    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). */
+    readonly url?: string;
+    /** Same-origin pixel endpoint (default '/api/storefront/pixel'). */
+    readonly pixelEndpoint?: string;
+    readonly children: ReactNode;
+}
+/**
+ * `<AnalyticsProvider>` (Hydrogen-shaped) — wires the consent-gated analytics bus and exposes it via
+ * `useAnalytics`. The visible consent UI is disabled for now; analytics starts granted while the public
+ * API remains in place for the replacement flow.
+ */
+declare function AnalyticsProvider(props: AnalyticsProviderProps): ReactElement;
+declare function useAnalytics(): AnalyticsContextValue;
+interface ConsentBannerRenderProps {
+    readonly acceptAll: () => void;
+    readonly rejectAll: () => void;
+    readonly setConsent: (patch: Partial<ConsentState>) => void;
+}
+interface ConsentBannerProps {
+    /** Render-prop for full theme control. Omit for a minimal, unstyled accessible fallback. */
+    readonly children?: (api: ConsentBannerRenderProps) => ReactNode;
+}
+/**
+ * Legacy no-op. Kept so existing themes do not fail imports while the consent UI is removed.
+ */
+declare function ConsentBanner({ children }: ConsentBannerProps): ReactElement | null;
+interface AnalyticsCartViewProps {
+    readonly data?: {
+        readonly cart?: {
+            readonly id?: string | null;
+        } | null;
+        readonly id?: string | null;
+    };
+}
+declare function AnalyticsCartView({ data }: AnalyticsCartViewProps): null;
+interface AnalyticsProductViewProps {
+    readonly data?: {
+        readonly products?: readonly {
+            readonly handle?: string | null;
+            readonly id?: string | null;
+            readonly price?: string | null;
+            readonly productId?: string | null;
+            readonly quantity?: number | null;
+            readonly title?: string | null;
+            readonly variantId?: string | null;
+            readonly variantTitle?: string | null;
+            readonly vendor?: string | null;
+        }[];
+    };
+}
+declare function AnalyticsProductView({ data }: AnalyticsProductViewProps): null;
+interface AnalyticsCollectionViewProps {
+    readonly data?: {
+        readonly collection?: {
+            readonly handle?: string | null;
+            readonly id?: string | null;
+        } | null;
+    };
+}
+declare function AnalyticsCollectionView({ data }: AnalyticsCollectionViewProps): null;
+interface AnalyticsSearchViewProps {
+    readonly data?: {
+        readonly searchResults?: unknown;
+        readonly searchTerm?: string | null;
+    };
+}
+declare function AnalyticsSearchView({ data }: AnalyticsSearchViewProps): null;
+declare const Analytics: Readonly<{
+    Provider: typeof AnalyticsProvider;
+    CartView: typeof AnalyticsCartView;
+    CollectionView: typeof AnalyticsCollectionView;
+    ProductView: typeof AnalyticsProductView;
+    SearchView: typeof AnalyticsSearchView;
+}>;
+
+/** Passthrough `<img>` attributes — the SDK owns the computed ones (src/srcSet/sizes/width/height/loading). */
+type PassthroughImgProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'srcSet' | 'sizes' | 'width' | 'height' | 'loading'>;
+type HydrogenImageData = Omit<ImageData, 'url'> & {
+    readonly url?: string | undefined;
+};
+interface ImageProps extends Omit<ImageAttrsOptions, 'data'>, PassthroughImgProps {
+    readonly data?: HydrogenImageData | null | undefined;
+}
+/**
+ * Hydrogen-shaped `<Image>` (ADR-0003 §SDK). A thin wrapper: it computes the responsive `<img>`
+ * attributes via `buildImageAttrs` (src/srcSet over `/kotao-cdn/*`, CLS-safe via aspect-ratio) and
+ * spreads any extra `<img>` props through. All logic lives in `buildImageAttrs` (unit-tested).
+ */
+declare function Image(props: ImageProps): ReactElement;
+
+interface ShopifyMediaSource {
+    readonly url: string;
+    readonly mimeType?: string | null;
+}
+interface ShopifyMediaData {
+    readonly alt?: string | null;
+    readonly image?: ImageData | null;
+    readonly mediaContentType?: string | null;
+    readonly previewImage?: ImageData | null;
+    readonly sources?: readonly ShopifyMediaSource[] | null;
+    readonly url?: string | null;
+}
+interface MediaFileImageOptions {
+    readonly alt?: string;
+    readonly aspectRatio?: string;
+    readonly crop?: ImageCrop;
+    readonly format?: ImageFormat;
+    readonly height?: number;
+    readonly loading?: 'eager' | 'lazy';
+    readonly quality?: number;
+    readonly sizes?: string;
+    readonly srcSetWidths?: number[];
+    readonly width?: number;
+}
+interface MediaFileVideoOptions extends Omit<VideoHTMLAttributes<HTMLVideoElement>, 'children' | 'className'> {
+    readonly previewImageOptions?: {
+        readonly src?: string;
+    };
+}
+interface MediaFileProps {
+    readonly className?: string;
+    readonly data: ShopifyMediaData;
+    readonly mediaOptions?: {
+        readonly image?: MediaFileImageOptions;
+        readonly video?: MediaFileVideoOptions;
+    };
+}
+declare function MediaFile({ className, data, mediaOptions }: MediaFileProps): ReactElement | null;
+
+interface MoneyData {
+    readonly amount: string | number;
+    readonly currencyCode: string;
+}
+interface UseMoneyValue {
+    readonly amount: string;
+    readonly currencyCode: string;
+    readonly currencyName: string;
+    readonly currencyNarrowSymbol: string;
+    readonly currencySymbol: string;
+    readonly localizedString: string;
+    readonly withoutTrailingZeros: string;
+    readonly withoutTrailingZerosAndCurrency: string;
+}
+interface MoneyProps {
+    readonly data?: MoneyData | null;
+    readonly as?: ElementType;
+    readonly withoutTrailingZeros?: boolean;
+    readonly withoutCurrency?: boolean;
+    readonly [prop: string]: unknown;
+}
+/**
+ * Hydrogen-shaped money formatter. It is intentionally pure: themes can call it during render without
+ * depending on browser APIs beyond `Intl`, and `<Money>` is a thin wrapper over this function.
+ */
+declare function useMoney(data: MoneyData): UseMoneyValue;
+declare function Money({ as: Component, data, withoutCurrency, withoutTrailingZeros, ...passthrough }: MoneyProps): ReactElement;
+
+type PaginationLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+interface HydrogenPaginationInfo<T = any> extends PaginationInfo<T> {
+    readonly isLoading: boolean;
+    readonly state: 'idle';
+    readonly PreviousLink: (props: PaginationLinkProps) => ReactElement;
+    readonly NextLink: (props: PaginationLinkProps) => ReactElement;
+}
+interface PaginationProps<T = any> {
+    connection: Connection<T>;
+    /** The current request URL. Hydrogen reads it from the router; pass it in to keep this framework-agnostic. */
+    currentUrl?: URL | string;
+    /** Isolates URL params when several paginations share a page. */
+    namespace?: string;
+    children: (state: HydrogenPaginationInfo<T>) => ReactNode;
+}
+/**
+ * Hydrogen-shaped `<Pagination>` (ADR-0003 §SDK). A thin render-props wrapper over `getPaginationInfo`:
+ * it hands the theme the current page's `nodes` + ready-built `nextPageUrl`/`prevPageUrl`. All logic
+ * lives in `getPaginationInfo` (unit-tested); this just calls the render prop.
+ */
+declare function Pagination<T = any>({ connection, currentUrl, namespace, children, }: PaginationProps<T>): ReactElement;
+
+interface SeoProps {
+    /** One or more SEO configs, merged root → leaf (deeper/later wins per field). */
+    readonly config: SeoConfig | readonly SeoConfig[];
+}
+/**
+ * Hydrogen-shaped `<Seo/>` (ADR-0003 §SDK) — renders the head descriptors `getSeoMeta` produces
+ * (title, meta, canonical/alternate links, JSON-LD). Themes can use this OR return `getSeoMeta(...)`
+ * from a route `meta` export. All merge/emit logic lives in `getSeoMeta` (unit-tested).
+ */
+declare function Seo({ config }: SeoProps): ReactElement;
+
+type AnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'children'>;
+interface ShopPayButtonProps extends AnchorProps {
+    readonly storeDomain?: string;
+    readonly variantIds: readonly string[];
+    readonly width?: CSSProperties['width'];
+}
+declare function ShopPayButton({ storeDomain, style, variantIds, width, ...props }: ShopPayButtonProps): ReactElement | null;
+
+interface ThemeSettingsProviderProps {
+    readonly store: ThemeSettingsStore;
+    readonly children: ReactNode;
+}
+declare function ThemeSettingsProvider({ store, children, }: ThemeSettingsProviderProps): ReactElement;
+/** The merged theme settings; re-renders on live editor patches (`useSyncExternalStore`). */
+declare function useThemeSettings(): ThemeSettingsSnapshot;
+/** Merged settings for one section instance (undefined if the instance is absent). */
+declare function useSectionSettings(instanceId: string): ResolvedSettings | undefined;
+/** The merged global theme tokens (logo, colors, fonts). */
+declare function useGlobalThemeTokens(): ResolvedSettings;
+
+/** Opens the active Smart Cart drawer (no-op if none is mounted). Wire to explicit cart-button clicks. */
+declare function openSmartCart(): void;
+
+interface CartDrawerOverlayProps {
+    /** Per-storefront Smart Cart config (selectors/branding). Pass shop.smartCart-derived config here. */
+    readonly config: SmartCartMountConfig;
+    /** Cart data seam — typically createStorefrontApiCartAdapter(...). */
+    readonly adapter: CartAdapter;
+}
+/**
+ * Mounts the framework-agnostic Smart Cart drawer for a custom (Hydrogen/SDK) theme. Client-only:
+ * renders null on the server and mounts the Web Component after hydration. Memoize `config`/`adapter`
+ * in the theme so the effect doesn't remount on every render.
+ */
+declare function CartDrawerOverlay({ config, adapter }: CartDrawerOverlayProps): null;
+
+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, ThemeSettingsProvider, type ThemeSettingsProviderProps, type UseMoneyValue, openSmartCart, useAnalytics, useGlobalThemeTokens, useMoney, useOptimisticData, useSectionSettings, useThemeSettings };