@shopify/hydrogen 2026.4.4 → 2026.10.0-preview.1

package/dist/vite/index.d.mts

@@ -0,0 +1,2 @@
+import { LOCAL_HTTPS_DEFAULTS, LocalHttpsDevServerConfig, LocalHttpsOptions, LocalHttpsPlugin, localHttps } from "./local-https.mjs";
+export { LOCAL_HTTPS_DEFAULTS, LocalHttpsDevServerConfig, LocalHttpsOptions, LocalHttpsPlugin, localHttps };

package/dist/vite/index.mjs

@@ -0,0 +1,3 @@
+import { LOCAL_HTTPS_DEFAULTS, localHttps } from "./local-https.mjs";
+
+export { LOCAL_HTTPS_DEFAULTS, localHttps };

package/dist/vite/local-https.d.mts

@@ -0,0 +1,35 @@
+import { Plugin } from "vite";
+
+//#region src/vite/local-https.d.ts
+declare const LOCAL_HTTPS_DEFAULTS: {
+  readonly host: "local.tryhydrogen.dev";
+  readonly port: 5173;
+};
+/** Options for Hydrogen's local HTTPS Vite plugin. */
+type LocalHttpsOptions = {
+  /** Enable trusted local HTTPS for the dev server. */enabled: boolean; /** Local hostname registered in Shopify admin. Defaults to `local.tryhydrogen.dev`. */
+  host?: string; /** Local port registered in Shopify admin. Defaults to `5173`. */
+  port?: number; /** Certificate file path. Defaults to Hydrogen's mkcert path under `~/.shopify/hydrogen/certs`. */
+  certPath?: string | URL; /** Private key file path. Defaults to Hydrogen's mkcert path under `~/.shopify/hydrogen/certs`. */
+  keyPath?: string | URL;
+};
+type LocalHttpsPlugin = Plugin & {
+  api: {
+    /** Returns host, port, and TLS file paths for frameworks that terminate HTTPS outside Vite. */getDevServerConfig(): LocalHttpsDevServerConfig | undefined;
+  };
+};
+type LocalHttpsDevServerConfig = {
+  host: string;
+  port: number;
+  https: {
+    cert: string;
+    key: string;
+  };
+};
+/**
+ * Configures Vite for trusted local HTTPS on Hydrogen's default development host.
+ */
+declare function localHttps(options: LocalHttpsOptions): LocalHttpsPlugin;
+//#endregion
+export { LOCAL_HTTPS_DEFAULTS, LocalHttpsDevServerConfig, LocalHttpsOptions, LocalHttpsPlugin, localHttps };
+//# sourceMappingURL=local-https.d.mts.map

package/dist/vite/local-https.mjs

@@ -0,0 +1,202 @@
+import { CUSTOMER_ACCOUNT_PATHS } from "../core/url.mjs";
+import { readFileSync } from "node:fs";
+import { homedir } from "node:os";
+import { dirname, isAbsolute, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+//#region src/vite/local-https.ts
+const LOCAL_HTTPS_DEFAULTS = {
+	host: "local.tryhydrogen.dev",
+	port: 5173
+};
+const HEADER_PAIR_SIZE = 2;
+const HTTP1_ONLY_RESPONSE_HEADERS = new Set([
+	"connection",
+	"keep-alive",
+	"proxy-authenticate",
+	"proxy-authorization",
+	"te",
+	"trailer",
+	"transfer-encoding",
+	"upgrade"
+]);
+const loggedCustomerAccountSettings = /* @__PURE__ */ new Set();
+/**
+* Configures Vite for trusted local HTTPS on Hydrogen's default development host.
+*/
+function localHttps(options) {
+	const settings = options.enabled ? resolveLocalHttpsSettings(options) : void 0;
+	let certificateFiles;
+	const getCertificateFiles = () => {
+		if (!settings) return;
+		certificateFiles ??= readCertificateFiles(settings);
+		return certificateFiles;
+	};
+	const getDevServerConfig = () => {
+		if (!settings) return;
+		getCertificateFiles();
+		return {
+			host: settings.host,
+			port: settings.port,
+			https: {
+				cert: settings.certPath,
+				key: settings.keyPath
+			}
+		};
+	};
+	return {
+		name: "hydrogen-local-https",
+		api: { getDevServerConfig },
+		config() {
+			const certificates = getCertificateFiles();
+			if (!settings || !certificates) return;
+			return { server: {
+				allowedHosts: [settings.host],
+				host: settings.host,
+				port: settings.port,
+				strictPort: true,
+				https: {
+					ALPNProtocols: ["http/1.1"],
+					cert: certificates.cert,
+					key: certificates.key
+				},
+				hmr: {
+					host: settings.host,
+					protocol: "wss"
+				}
+			} };
+		},
+		configureServer(server) {
+			if (!settings) return;
+			getCertificateFiles();
+			configureLocalHttpsServer(server, settings);
+		}
+	};
+}
+function resolveLocalHttpsSettings(options) {
+	const host = options.host ?? LOCAL_HTTPS_DEFAULTS.host;
+	const certificateDirectory = join(homedir(), ".shopify", "hydrogen", "certs");
+	return {
+		host,
+		port: options.port ?? LOCAL_HTTPS_DEFAULTS.port,
+		certPath: resolveCertificatePath(options.certPath ?? join(certificateDirectory, `${host}.pem`)),
+		keyPath: resolveCertificatePath(options.keyPath ?? join(certificateDirectory, `${host}-key.pem`))
+	};
+}
+function resolveCertificatePath(path) {
+	if (path instanceof URL) return fileURLToPath(path);
+	if (path === "~") return homedir();
+	if (path.startsWith("~/")) return resolve(homedir(), path.slice(2));
+	return isAbsolute(path) ? path : resolve(path);
+}
+function readCertificateFiles(settings) {
+	return {
+		cert: readCertificateFile(settings, "certificate", settings.certPath),
+		key: readCertificateFile(settings, "private key", settings.keyPath)
+	};
+}
+function readCertificateFile(settings, label, path) {
+	try {
+		return readFileSync(path);
+	} catch (error) {
+		throw new Error(formatCertificateReadError(settings, label, path, error), { cause: error });
+	}
+}
+function formatCertificateReadError({ certPath, host, keyPath }, label, path, error) {
+	const certificateDirectories = [...new Set([dirname(certPath), dirname(keyPath)])];
+	const reason = error instanceof Error ? error.message : String(error);
+	return [
+		`Local HTTPS requires a readable ${label} file:`,
+		`  ${path}`,
+		`Reason: ${reason}`,
+		"",
+		"Expected certificate files:",
+		`  Certificate: ${certPath}`,
+		`  Private key: ${keyPath}`,
+		"",
+		"Install and configure mkcert, then generate the certificate:",
+		"  macOS: brew install mkcert",
+		"  mkcert -install",
+		`  mkdir -p ${certificateDirectories.map(shellQuote).join(" ")}`,
+		`  mkcert -cert-file ${shellQuote(certPath)} -key-file ${shellQuote(keyPath)} ${shellQuote(host)}`
+	].join("\n");
+}
+function shellQuote(value) {
+	return `'${value.replaceAll("'", `'\\''`)}'`;
+}
+function configureLocalHttpsServer(server, settings) {
+	const resolveBoundPort = () => {
+		const address = server.httpServer?.address();
+		return address && typeof address === "object" ? address.port : settings.port;
+	};
+	server.middlewares.use((request, response, next) => {
+		request.headers["x-forwarded-host"] ??= request.headers.host ?? `${settings.host}:${resolveBoundPort()}`;
+		request.headers["x-forwarded-proto"] ??= "https";
+		stripHttp1OnlyResponseHeaders(response);
+		next();
+	});
+	const logSettings = () => {
+		const port = resolveBoundPort();
+		const settingsKey = `${settings.host}:${port}`;
+		if (loggedCustomerAccountSettings.has(settingsKey)) return;
+		loggedCustomerAccountSettings.add(settingsKey);
+		server.config.logger.info(formatCustomerAccountSettings({
+			host: settings.host,
+			port
+		}));
+	};
+	if (server.httpServer) server.httpServer.once("listening", logSettings);
+	else logSettings();
+}
+function formatCustomerAccountSettings({ host, port }) {
+	const origin = `https://${host}`;
+	const portfulOrigin = `${origin}:${port}`;
+	return [
+		"",
+		"Customer Account API — make sure these values are configured for your storefront:",
+		"",
+		`  Callback URI(s) (required):  ${portfulOrigin}${CUSTOMER_ACCOUNT_PATHS.authorize}`,
+		`  JavaScript origin(s):        ${origin}`,
+		`  Logout URI:                  ${portfulOrigin}`,
+		""
+	].join("\n");
+}
+function stripHttp1OnlyResponseHeaders(response) {
+	const originalWriteHead = response.writeHead.bind(response);
+	response.writeHead = (statusCode, statusMessageOrHeaders, headers) => {
+		removeStoredHttp1OnlyHeaders(response);
+		if (typeof statusMessageOrHeaders === "string") return originalWriteHead(statusCode, statusMessageOrHeaders, sanitizeWriteHeadHeaders(headers));
+		return originalWriteHead(statusCode, sanitizeWriteHeadHeaders(statusMessageOrHeaders));
+	};
+}
+function removeStoredHttp1OnlyHeaders(response) {
+	for (const header of HTTP1_ONLY_RESPONSE_HEADERS) response.removeHeader(header);
+}
+function sanitizeWriteHeadHeaders(headers) {
+	if (Array.isArray(headers)) return sanitizeHeaderArray(headers);
+	if (headers) return sanitizeHeaderObject(headers);
+	return headers;
+}
+function sanitizeHeaderObject(headers) {
+	const sanitizedHeaders = {};
+	for (const [name, value] of Object.entries(headers)) if (!isHttp1OnlyHeader(name)) sanitizedHeaders[name] = value;
+	return sanitizedHeaders;
+}
+function sanitizeHeaderArray(headers) {
+	const sanitizedHeaders = [];
+	for (let index = 0; index < headers.length; index += HEADER_PAIR_SIZE) {
+		const name = headers[index];
+		const value = headers[index + 1];
+		if (typeof name === "string" && isHttp1OnlyHeader(name)) continue;
+		sanitizedHeaders.push(name);
+		if (value !== void 0) sanitizedHeaders.push(value);
+	}
+	return sanitizedHeaders;
+}
+function isHttp1OnlyHeader(name) {
+	return HTTP1_ONLY_RESPONSE_HEADERS.has(name.toLowerCase());
+}
+
+//#endregion
+export { LOCAL_HTTPS_DEFAULTS, localHttps };
+//# sourceMappingURL=local-https.mjs.map

package/dist/vite/local-https.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"local-https.mjs","names":[],"sources":["../../src/vite/local-https.ts"],"sourcesContent":["import { readFileSync } from \"node:fs\";\nimport type { OutgoingHttpHeader, OutgoingHttpHeaders, ServerResponse } from \"node:http\";\nimport { homedir } from \"node:os\";\nimport { dirname, isAbsolute, join, resolve } from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\n\nimport type { Plugin, ViteDevServer } from \"vite\";\n\nimport { CUSTOMER_ACCOUNT_PATHS } from \"../core/url\";\n\nexport const LOCAL_HTTPS_DEFAULTS = {\n  host: \"local.tryhydrogen.dev\",\n  port: 5_173,\n} as const;\n\nconst HEADER_PAIR_SIZE = 2;\nconst HTTP1_ONLY_RESPONSE_HEADERS = new Set([\n  \"connection\",\n  \"keep-alive\",\n  \"proxy-authenticate\",\n  \"proxy-authorization\",\n  \"te\",\n  \"trailer\",\n  \"transfer-encoding\",\n  \"upgrade\",\n]);\nconst loggedCustomerAccountSettings = new Set<string>();\n\n/** Options for Hydrogen's local HTTPS Vite plugin. */\nexport type LocalHttpsOptions = {\n  /** Enable trusted local HTTPS for the dev server. */\n  enabled: boolean;\n  /** Local hostname registered in Shopify admin. Defaults to `local.tryhydrogen.dev`. */\n  host?: string;\n  /** Local port registered in Shopify admin. Defaults to `5173`. */\n  port?: number;\n  /** Certificate file path. Defaults to Hydrogen's mkcert path under `~/.shopify/hydrogen/certs`. */\n  certPath?: string | URL;\n  /** Private key file path. Defaults to Hydrogen's mkcert path under `~/.shopify/hydrogen/certs`. */\n  keyPath?: string | URL;\n};\n\nexport type LocalHttpsPlugin = Plugin & {\n  api: {\n    /** Returns host, port, and TLS file paths for frameworks that terminate HTTPS outside Vite. */\n    getDevServerConfig(): LocalHttpsDevServerConfig | undefined;\n  };\n};\n\nexport type LocalHttpsDevServerConfig = {\n  host: string;\n  port: number;\n  https: {\n    cert: string;\n    key: string;\n  };\n};\n\n/**\n * Configures Vite for trusted local HTTPS on Hydrogen's default development host.\n */\nexport function localHttps(options: LocalHttpsOptions): LocalHttpsPlugin {\n  const settings = options.enabled ? resolveLocalHttpsSettings(options) : undefined;\n  let certificateFiles: LocalHttpsCertificateFiles | undefined;\n\n  const getCertificateFiles = () => {\n    if (!settings) return;\n\n    certificateFiles ??= readCertificateFiles(settings);\n    return certificateFiles;\n  };\n\n  const getDevServerConfig = () => {\n    if (!settings) return;\n\n    getCertificateFiles();\n\n    return {\n      host: settings.host,\n      port: settings.port,\n      https: {\n        cert: settings.certPath,\n        key: settings.keyPath,\n      },\n    };\n  };\n\n  return {\n    name: \"hydrogen-local-https\",\n    api: { getDevServerConfig },\n    config() {\n      const certificates = getCertificateFiles();\n      if (!settings || !certificates) return;\n\n      return {\n        server: {\n          allowedHosts: [settings.host],\n          host: settings.host,\n          port: settings.port,\n          strictPort: true,\n          https: {\n            // Several framework dev servers fail when Vite negotiates HTTP/2.\n            ALPNProtocols: [\"http/1.1\"],\n            cert: certificates.cert,\n            key: certificates.key,\n          },\n          hmr: {\n            host: settings.host,\n            protocol: \"wss\",\n          },\n        },\n      };\n    },\n    configureServer(server) {\n      if (!settings) return;\n\n      getCertificateFiles();\n      configureLocalHttpsServer(server, settings);\n    },\n  };\n}\n\ntype LocalHttpsSettings = {\n  host: string;\n  port: number;\n  certPath: string;\n  keyPath: string;\n};\n\ntype LocalHttpsCertificateFiles = {\n  cert: Buffer;\n  key: Buffer;\n};\n\nfunction resolveLocalHttpsSettings(options: LocalHttpsOptions): LocalHttpsSettings {\n  const host = options.host ?? LOCAL_HTTPS_DEFAULTS.host;\n  const certificateDirectory = join(homedir(), \".shopify\", \"hydrogen\", \"certs\");\n\n  return {\n    host,\n    port: options.port ?? LOCAL_HTTPS_DEFAULTS.port,\n    certPath: resolveCertificatePath(options.certPath ?? join(certificateDirectory, `${host}.pem`)),\n    keyPath: resolveCertificatePath(\n      options.keyPath ?? join(certificateDirectory, `${host}-key.pem`),\n    ),\n  };\n}\n\nfunction resolveCertificatePath(path: string | URL) {\n  if (path instanceof URL) return fileURLToPath(path);\n  if (path === \"~\") return homedir();\n  if (path.startsWith(\"~/\")) return resolve(homedir(), path.slice(2));\n  return isAbsolute(path) ? path : resolve(path);\n}\n\nfunction readCertificateFiles(settings: LocalHttpsSettings): LocalHttpsCertificateFiles {\n  return {\n    cert: readCertificateFile(settings, \"certificate\", settings.certPath),\n    key: readCertificateFile(settings, \"private key\", settings.keyPath),\n  };\n}\n\nfunction readCertificateFile(settings: LocalHttpsSettings, label: string, path: string) {\n  try {\n    return readFileSync(path);\n  } catch (error) {\n    throw new Error(formatCertificateReadError(settings, label, path, error), { cause: error });\n  }\n}\n\nfunction formatCertificateReadError(\n  { certPath, host, keyPath }: LocalHttpsSettings,\n  label: string,\n  path: string,\n  error: unknown,\n) {\n  const certificateDirectories = [...new Set([dirname(certPath), dirname(keyPath)])];\n  const reason = error instanceof Error ? error.message : String(error);\n\n  return [\n    `Local HTTPS requires a readable ${label} file:`,\n    `  ${path}`,\n    `Reason: ${reason}`,\n    \"\",\n    \"Expected certificate files:\",\n    `  Certificate: ${certPath}`,\n    `  Private key: ${keyPath}`,\n    \"\",\n    \"Install and configure mkcert, then generate the certificate:\",\n    \"  macOS: brew install mkcert\",\n    \"  mkcert -install\",\n    `  mkdir -p ${certificateDirectories.map(shellQuote).join(\" \")}`,\n    `  mkcert -cert-file ${shellQuote(certPath)} -key-file ${shellQuote(keyPath)} ${shellQuote(host)}`,\n  ].join(\"\\n\");\n}\n\nfunction shellQuote(value: string) {\n  return `'${value.replaceAll(\"'\", `'\\\\''`)}'`;\n}\n\nfunction configureLocalHttpsServer(server: ViteDevServer, settings: LocalHttpsSettings) {\n  // The configured port is only a fallback: frameworks that own the listener\n  // (or auto-incremented ports) can bind somewhere else, and the Customer\n  // Account URLs registered in admin must match the port actually served.\n  const resolveBoundPort = () => {\n    const address = server.httpServer?.address();\n    return address && typeof address === \"object\" ? address.port : settings.port;\n  };\n\n  server.middlewares.use((request, response, next) => {\n    request.headers[\"x-forwarded-host\"] ??=\n      request.headers.host ?? `${settings.host}:${resolveBoundPort()}`;\n    request.headers[\"x-forwarded-proto\"] ??= \"https\";\n    stripHttp1OnlyResponseHeaders(response);\n    next();\n  });\n\n  const logSettings = () => {\n    const port = resolveBoundPort();\n    const settingsKey = `${settings.host}:${port}`;\n    if (loggedCustomerAccountSettings.has(settingsKey)) return;\n    loggedCustomerAccountSettings.add(settingsKey);\n    server.config.logger.info(formatCustomerAccountSettings({ host: settings.host, port }));\n  };\n\n  if (server.httpServer) {\n    server.httpServer.once(\"listening\", logSettings);\n  } else {\n    logSettings();\n  }\n}\n\nfunction formatCustomerAccountSettings({ host, port }: Pick<LocalHttpsSettings, \"host\" | \"port\">) {\n  const origin = `https://${host}`;\n  const portfulOrigin = `${origin}:${port}`;\n\n  return [\n    \"\",\n    \"Customer Account API — make sure these values are configured for your storefront:\",\n    \"\",\n    `  Callback URI(s) (required):  ${portfulOrigin}${CUSTOMER_ACCOUNT_PATHS.authorize}`,\n    // Shopify's server-side validation rejects JavaScript origins containing a port.\n    `  JavaScript origin(s):        ${origin}`,\n    `  Logout URI:                  ${portfulOrigin}`,\n    \"\",\n  ].join(\"\\n\");\n}\n\nfunction stripHttp1OnlyResponseHeaders(response: ServerResponse) {\n  const originalWriteHead = response.writeHead.bind(response);\n\n  response.writeHead = (\n    statusCode: number,\n    statusMessageOrHeaders?: string | OutgoingHttpHeaders | OutgoingHttpHeader[],\n    headers?: OutgoingHttpHeaders | OutgoingHttpHeader[],\n  ) => {\n    removeStoredHttp1OnlyHeaders(response);\n\n    if (typeof statusMessageOrHeaders === \"string\") {\n      return originalWriteHead(\n        statusCode,\n        statusMessageOrHeaders,\n        sanitizeWriteHeadHeaders(headers),\n      );\n    }\n\n    return originalWriteHead(statusCode, sanitizeWriteHeadHeaders(statusMessageOrHeaders));\n  };\n}\n\nfunction removeStoredHttp1OnlyHeaders(response: ServerResponse) {\n  for (const header of HTTP1_ONLY_RESPONSE_HEADERS) {\n    response.removeHeader(header);\n  }\n}\n\nfunction sanitizeWriteHeadHeaders(headers: OutgoingHttpHeaders | OutgoingHttpHeader[] | undefined) {\n  if (Array.isArray(headers)) return sanitizeHeaderArray(headers);\n  if (headers) return sanitizeHeaderObject(headers);\n  return headers;\n}\n\nfunction sanitizeHeaderObject(headers: OutgoingHttpHeaders) {\n  const sanitizedHeaders: OutgoingHttpHeaders = {};\n\n  for (const [name, value] of Object.entries(headers)) {\n    if (!isHttp1OnlyHeader(name)) sanitizedHeaders[name] = value;\n  }\n\n  return sanitizedHeaders;\n}\n\nfunction sanitizeHeaderArray(headers: OutgoingHttpHeader[]) {\n  const sanitizedHeaders: OutgoingHttpHeader[] = [];\n\n  for (let index = 0; index < headers.length; index += HEADER_PAIR_SIZE) {\n    const name = headers[index];\n    const value = headers[index + 1];\n    if (typeof name === \"string\" && isHttp1OnlyHeader(name)) continue;\n\n    sanitizedHeaders.push(name);\n    if (value !== undefined) sanitizedHeaders.push(value);\n  }\n\n  return sanitizedHeaders;\n}\n\nfunction isHttp1OnlyHeader(name: string) {\n  return HTTP1_ONLY_RESPONSE_HEADERS.has(name.toLowerCase());\n}\n"],"mappings":"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"}

package/dist/vue/cart.d.mts

@@ -0,0 +1,42 @@
+import { CartData, CartState } from "../core/cart/state.mjs";
+import { CreateCartStoreOptions } from "../core/cart/cart.mjs";
+import { CartFormRegister } from "../core/cart/form.mjs";
+import { CartDataFromHandlers } from "../core/cart/server-handlers.mjs";
+import { ComputedRef, PropType, ShallowRef } from "vue";
+
+//#region src/vue/cart.d.ts
+type TypedUseCart<TData extends CartData> = {
+  (): Readonly<ShallowRef<CartState<TData>>>;
+  <S>(selector: (state: CartState<TData>) => S, isEqual?: (a: S, b: S) => boolean): Readonly<ShallowRef<S>>;
+};
+type TypedUseOptionalCart<TData extends CartData> = <S>(selector: (state: CartState<TData>) => S, isEqual?: (a: S, b: S) => boolean) => Readonly<ShallowRef<S | undefined>>;
+type CartInitialData<TData extends CartData = CartData> = CreateCartStoreOptions<TData>["initialData"];
+type TypedCartProvider<TData extends CartData> = {
+  new (): {
+    $props: {
+      initialData?: CartInitialData<TData>;
+    };
+  };
+};
+type TypedCartComponents<TData extends CartData> = {
+  CartProvider: TypedCartProvider<TData>;
+  useCart: TypedUseCart<TData>;
+  useOptionalCart: TypedUseOptionalCart<TData>;
+  useCartForm: typeof useCartForm;
+};
+declare function useCartAnalytics(): void;
+declare function useCartForm(): {
+  formProps: (opts?: {
+    beforeSubmit?: (e: Event) => void;
+    afterSubmit?: (e: Event) => void;
+  }) => Record<string, unknown>;
+  register: CartFormRegister;
+  isPending: {
+    initial: ComputedRef<boolean>;
+    lines: (lineId?: string) => boolean;
+  };
+};
+declare function createCartComponents<THandlers>(): TypedCartComponents<CartDataFromHandlers<THandlers>>;
+//#endregion
+export { createCartComponents, useCartAnalytics };
+//# sourceMappingURL=cart.d.mts.map

package/dist/vue/cart.mjs

@@ -0,0 +1,118 @@
+import { trackCartAnalytics } from "../core/analytics/cart-tracker.mjs";
+import { createCartFormRegister } from "../core/cart/form.mjs";
+import { configureCartEndpoint, createCartStore } from "../core/cart/cart.mjs";
+import { computed, defineComponent, h, inject, onMounted, onScopeDispose, onUnmounted, provide, shallowRef } from "vue";
+
+//#region src/vue/cart.ts
+let cartEndpoint = "/api/cart";
+const CartStoreKey = Symbol("CartStore");
+function getCartEndpoint() {
+	return cartEndpoint;
+}
+function createTypedCartProvider() {
+	return defineComponent((props, { slots }) => {
+		return () => h(CartProvider, { initialData: props.initialData }, slots.default);
+	}, {
+		name: "CartProvider",
+		props: ["initialData"]
+	});
+}
+function useCartStore(composableName = "useCartStore") {
+	const store = inject(CartStoreKey, null);
+	if (!store) throw new Error(`${composableName} must be used inside a <CartProvider>.`);
+	return store;
+}
+function useOptionalCartStore() {
+	return inject(CartStoreKey, null);
+}
+const CartProvider = defineComponent({
+	name: "CartProvider",
+	props: { initialData: {
+		type: Object,
+		default: void 0
+	} },
+	setup(props, { slots }) {
+		const store = createCartStore({ initialData: props.initialData });
+		provide(CartStoreKey, store);
+		onMounted(() => {
+			configureCartEndpoint(cartEndpoint);
+			store.connect();
+		});
+		onUnmounted(() => {
+			store.destroy();
+		});
+		return () => slots.default?.();
+	}
+});
+function useCart(selector, isEqual) {
+	return useCartSelector(useCartStore("useCart"), selector ?? ((state) => state), isEqual);
+}
+function useCartAnalytics() {
+	const store = useCartStore("useCartAnalytics");
+	let stopTracking;
+	onMounted(() => {
+		stopTracking = trackCartAnalytics(store);
+	});
+	onScopeDispose(() => stopTracking?.());
+}
+/**
+* Like `useCart`, but returns `undefined` when rendered outside a `<CartProvider>`.
+* @internal
+*/
+function useOptionalCart(selector, isEqual) {
+	const store = useOptionalCartStore();
+	if (!store) return shallowRef(void 0);
+	return useCartSelector(store, selector, isEqual);
+}
+function useCartSelector(store, selector, isEqual) {
+	const selected = shallowRef(selector(store.getState()));
+	onScopeDispose(store.subscribe(() => {
+		const next = selector(store.getState());
+		if (isEqual?.(selected.value, next)) return;
+		selected.value = next;
+	}));
+	return selected;
+}
+function useCartForm() {
+	const store = useCartStore("useCartForm");
+	const loading = useCart((s) => s.loading);
+	const pendingLines = useCart((s) => s.pending.lines);
+	const register = createCartFormRegister();
+	const formProps = (opts) => ({
+		onSubmit: (e) => {
+			opts?.beforeSubmit?.(e);
+			if (e.defaultPrevented) return;
+			e.preventDefault();
+			store.handleFormSubmit(e).catch(() => {});
+			opts?.afterSubmit?.(e);
+		},
+		method: "post",
+		action: cartEndpoint
+	});
+	return {
+		formProps,
+		register,
+		isPending: {
+			initial: computed(() => loading.value),
+			lines: (lineId) => lineId ? pendingLines.value.has(lineId) : pendingLines.value.size > 0
+		}
+	};
+}
+function createCartComponents() {
+	const TypedCartProvider = createTypedCartProvider();
+	const useTypedCart = ((selector, isEqual) => {
+		if (!selector) return useCart();
+		return useCart(selector, isEqual);
+	});
+	const useTypedOptionalCart = ((selector, isEqual) => useOptionalCart(selector, isEqual));
+	return {
+		CartProvider: TypedCartProvider,
+		useCart: useTypedCart,
+		useOptionalCart: useTypedOptionalCart,
+		useCartForm
+	};
+}
+
+//#endregion
+export { createCartComponents, getCartEndpoint, useCartAnalytics, useCartStore };
+//# sourceMappingURL=cart.mjs.map

package/dist/vue/cart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cart.mjs","names":[],"sources":["../../src/vue/cart.ts"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  h,\n  inject,\n  onMounted,\n  onScopeDispose,\n  onUnmounted,\n  provide,\n  shallowRef,\n  type ComputedRef,\n  type InjectionKey,\n  type PropType,\n  type ShallowRef,\n} from \"vue\";\n\nimport { trackCartAnalytics } from \"../core/analytics/cart-tracker\";\nimport {\n  configureCartEndpoint as configureCoreCartEndpoint,\n  createCartStore,\n  type CreateCartStoreOptions,\n  type CartStore,\n} from \"../core/cart/cart\";\nimport { createCartFormRegister, type CartFormRegister } from \"../core/cart/form\";\nimport type { CartDataFromHandlers } from \"../core/cart/server-handlers\";\nimport type { CartData, CartState } from \"../core/cart/state\";\n\nconst DEFAULT_CART_ENDPOINT = \"/api/cart\";\n\nlet cartEndpoint = DEFAULT_CART_ENDPOINT;\n\nconst CartStoreKey: InjectionKey<CartStore> = Symbol(\"CartStore\");\n\nexport function configureCartEndpoint(endpoint: string): void {\n  cartEndpoint = endpoint;\n  configureCoreCartEndpoint(endpoint);\n}\n\nexport function getCartEndpoint(): string {\n  return cartEndpoint;\n}\n\ntype TypedUseCart<TData extends CartData> = {\n  (): Readonly<ShallowRef<CartState<TData>>>;\n  <S>(\n    selector: (state: CartState<TData>) => S,\n    isEqual?: (a: S, b: S) => boolean,\n  ): Readonly<ShallowRef<S>>;\n};\n\ntype TypedUseOptionalCart<TData extends CartData> = <S>(\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n) => Readonly<ShallowRef<S | undefined>>;\n\ntype CartInitialData<TData extends CartData = CartData> =\n  CreateCartStoreOptions<TData>[\"initialData\"];\n\ntype TypedCartProvider<TData extends CartData> = {\n  new (): { $props: { initialData?: CartInitialData<TData> } };\n};\n\ntype TypedCartComponents<TData extends CartData> = {\n  CartProvider: TypedCartProvider<TData>;\n  useCart: TypedUseCart<TData>;\n  useOptionalCart: TypedUseOptionalCart<TData>;\n  useCartForm: typeof useCartForm;\n};\n\nfunction createTypedCartProvider<TData extends CartData>(): TypedCartProvider<TData> {\n  const TypedCartProvider = defineComponent(\n    (props: { initialData?: CartInitialData<TData> }, { slots }) => {\n      return () =>\n        h(\n          CartProvider,\n          { initialData: props.initialData as CartInitialData | undefined },\n          slots.default,\n        );\n    },\n    { name: \"CartProvider\", props: [\"initialData\"] },\n  );\n\n  return TypedCartProvider as unknown as TypedCartProvider<TData>;\n}\n\nexport function useCartStore(composableName = \"useCartStore\"): CartStore {\n  const store = inject(CartStoreKey, null);\n  if (!store) {\n    throw new Error(`${composableName} must be used inside a <CartProvider>.`);\n  }\n  return store;\n}\n\nfunction useOptionalCartStore(): CartStore | null {\n  return inject(CartStoreKey, null);\n}\n\nexport const CartProvider = defineComponent({\n  name: \"CartProvider\",\n  props: {\n    initialData: {\n      type: Object as PropType<CartInitialData>,\n      default: undefined,\n    },\n  },\n  setup(props, { slots }) {\n    const store = createCartStore({ initialData: props.initialData });\n    provide(CartStoreKey, store);\n\n    onMounted(() => {\n      configureCoreCartEndpoint(cartEndpoint);\n      store.connect();\n    });\n\n    onUnmounted(() => {\n      store.destroy();\n    });\n\n    return () => slots.default?.();\n  },\n});\n\nexport function useCart(): Readonly<ShallowRef<CartState>>;\nexport function useCart<TData extends CartData = CartData, S = unknown>(\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S>>;\nexport function useCart<TData extends CartData = CartData, S = unknown>(\n  selector?: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S | CartState>> {\n  const store = useCartStore(\"useCart\");\n  const resolve = selector ?? ((state: CartState<TData>) => state as unknown as S);\n  return useCartSelector(store, resolve, isEqual) as Readonly<ShallowRef<S>>;\n}\n\nexport function useCartAnalytics(): void {\n  const store = useCartStore(\"useCartAnalytics\");\n  let stopTracking: (() => void) | undefined;\n\n  onMounted(() => {\n    stopTracking = trackCartAnalytics(store);\n  });\n\n  onScopeDispose(() => stopTracking?.());\n}\n\n/**\n * Like `useCart`, but returns `undefined` when rendered outside a `<CartProvider>`.\n * @internal\n */\nexport function useOptionalCart<TData extends CartData = CartData, S = unknown>(\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S | undefined>> {\n  const store = useOptionalCartStore();\n  if (!store) return shallowRef<S | undefined>(undefined);\n  return useCartSelector(store, selector, isEqual);\n}\n\nfunction useCartSelector<TData extends CartData = CartData, S = unknown>(\n  store: CartStore,\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S>> {\n  const selected = shallowRef<S>(selector(store.getState() as CartState<TData>));\n\n  const unsubscribe = store.subscribe(() => {\n    const next = selector(store.getState() as CartState<TData>);\n    if (isEqual?.(selected.value, next)) return;\n    selected.value = next;\n  });\n\n  onScopeDispose(unsubscribe);\n\n  return selected as Readonly<ShallowRef<S>>;\n}\n\nexport function useCartForm(): {\n  formProps: (opts?: {\n    beforeSubmit?: (e: Event) => void;\n    afterSubmit?: (e: Event) => void;\n  }) => Record<string, unknown>;\n  register: CartFormRegister;\n  isPending: {\n    initial: ComputedRef<boolean>;\n    lines: (lineId?: string) => boolean;\n  };\n} {\n  const store = useCartStore(\"useCartForm\");\n  const loading = useCart((s) => s.loading);\n  const pendingLines = useCart((s) => s.pending.lines);\n  const register = createCartFormRegister();\n\n  const formProps = (opts?: {\n    beforeSubmit?: (e: Event) => void;\n    afterSubmit?: (e: Event) => void;\n  }): Record<string, unknown> => ({\n    onSubmit: (e: Event) => {\n      opts?.beforeSubmit?.(e);\n      if (e.defaultPrevented) return;\n      e.preventDefault();\n      store.handleFormSubmit(e as SubmitEvent).catch(() => {});\n      opts?.afterSubmit?.(e);\n    },\n    method: \"post\",\n    action: cartEndpoint,\n  });\n\n  const isPending = {\n    initial: computed(() => loading.value),\n    lines: (lineId?: string): boolean =>\n      lineId ? pendingLines.value.has(lineId) : pendingLines.value.size > 0,\n  };\n\n  return { formProps, register, isPending };\n}\n\nexport function createCartComponents<THandlers>(): TypedCartComponents<\n  CartDataFromHandlers<THandlers>\n> {\n  type TData = CartDataFromHandlers<THandlers>;\n  const TypedCartProvider = createTypedCartProvider<TData>();\n\n  const useTypedCart = ((\n    selector?: (state: CartState<TData>) => unknown,\n    isEqual?: (a: unknown, b: unknown) => boolean,\n  ) => {\n    if (!selector) return useCart() as Readonly<ShallowRef<CartState<TData>>>;\n    return useCart<TData, unknown>(selector, isEqual);\n  }) as TypedUseCart<TData>;\n\n  const useTypedOptionalCart = (<S>(\n    selector: (state: CartState<TData>) => S,\n    isEqual?: (a: S, b: S) => boolean,\n  ) => useOptionalCart<TData, S>(selector, isEqual)) as TypedUseOptionalCart<TData>;\n\n  return {\n    CartProvider: TypedCartProvider,\n    useCart: useTypedCart,\n    useOptionalCart: useTypedOptionalCart,\n    useCartForm,\n  };\n}\n"],"mappings":";;;;;;AA6BA,IAAI,eAAe;AAEnB,MAAM,eAAwC,OAAO,YAAY;AAOjE,SAAgB,kBAA0B;AACxC,QAAO;;AA8BT,SAAS,0BAA4E;AAanF,QAZ0B,iBACvB,OAAiD,EAAE,YAAY;AAC9D,eACE,EACE,cACA,EAAE,aAAa,MAAM,aAA4C,EACjE,MAAM,QACP;IAEL;EAAE,MAAM;EAAgB,OAAO,CAAC,cAAc;EAAE,CAG1B;;AAG1B,SAAgB,aAAa,iBAAiB,gBAA2B;CACvE,MAAM,QAAQ,OAAO,cAAc,KAAK;AACxC,KAAI,CAAC,MACH,OAAM,IAAI,MAAM,GAAG,eAAe,wCAAwC;AAE5E,QAAO;;AAGT,SAAS,uBAAyC;AAChD,QAAO,OAAO,cAAc,KAAK;;AAGnC,MAAa,eAAe,gBAAgB;CAC1C,MAAM;CACN,OAAO,EACL,aAAa;EACX,MAAM;EACN,SAAS;EACV,EACF;CACD,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,QAAQ,gBAAgB,EAAE,aAAa,MAAM,aAAa,CAAC;AACjE,UAAQ,cAAc,MAAM;AAE5B,kBAAgB;AACd,yBAA0B,aAAa;AACvC,SAAM,SAAS;IACf;AAEF,oBAAkB;AAChB,SAAM,SAAS;IACf;AAEF,eAAa,MAAM,WAAW;;CAEjC,CAAC;AAOF,SAAgB,QACd,UACA,SACqC;AAGrC,QAAO,gBAFO,aAAa,UAEC,EADZ,cAAc,UAA4B,QACnB,QAAQ;;AAGjD,SAAgB,mBAAyB;CACvC,MAAM,QAAQ,aAAa,mBAAmB;CAC9C,IAAI;AAEJ,iBAAgB;AACd,iBAAe,mBAAmB,MAAM;GACxC;AAEF,sBAAqB,gBAAgB,CAAC;;;;;;AAOxC,SAAgB,gBACd,UACA,SACqC;CACrC,MAAM,QAAQ,sBAAsB;AACpC,KAAI,CAAC,MAAO,QAAO,WAA0B,OAAU;AACvD,QAAO,gBAAgB,OAAO,UAAU,QAAQ;;AAGlD,SAAS,gBACP,OACA,UACA,SACyB;CACzB,MAAM,WAAW,WAAc,SAAS,MAAM,UAAU,CAAqB,CAAC;AAQ9E,gBANoB,MAAM,gBAAgB;EACxC,MAAM,OAAO,SAAS,MAAM,UAAU,CAAqB;AAC3D,MAAI,UAAU,SAAS,OAAO,KAAK,CAAE;AACrC,WAAS,QAAQ;GAGO,CAAC;AAE3B,QAAO;;AAGT,SAAgB,cAUd;CACA,MAAM,QAAQ,aAAa,cAAc;CACzC,MAAM,UAAU,SAAS,MAAM,EAAE,QAAQ;CACzC,MAAM,eAAe,SAAS,MAAM,EAAE,QAAQ,MAAM;CACpD,MAAM,WAAW,wBAAwB;CAEzC,MAAM,aAAa,UAGa;EAC9B,WAAW,MAAa;AACtB,SAAM,eAAe,EAAE;AACvB,OAAI,EAAE,iBAAkB;AACxB,KAAE,gBAAgB;AAClB,SAAM,iBAAiB,EAAiB,CAAC,YAAY,GAAG;AACxD,SAAM,cAAc,EAAE;;EAExB,QAAQ;EACR,QAAQ;EACT;AAQD,QAAO;EAAE;EAAW;EAAU;GAL5B,SAAS,eAAe,QAAQ,MAAM;GACtC,QAAQ,WACN,SAAS,aAAa,MAAM,IAAI,OAAO,GAAG,aAAa,MAAM,OAAO;GAGjC;EAAE;;AAG3C,SAAgB,uBAEd;CAEA,MAAM,oBAAoB,yBAAgC;CAE1D,MAAM,iBACJ,UACA,YACG;AACH,MAAI,CAAC,SAAU,QAAO,SAAS;AAC/B,SAAO,QAAwB,UAAU,QAAQ;;CAGnD,MAAM,yBACJ,UACA,YACG,gBAA0B,UAAU,QAAQ;AAEjD,QAAO;EACL,cAAc;EACd,SAAS;EACT,iBAAiB;EACjB;EACD"}

package/dist/vue/collection.d.mts

@@ -0,0 +1,46 @@
+import { CollectionState } from "../core/collection/state.mjs";
+import { CollectionData, CollectionStore } from "../core/collection/collection.mjs";
+import * as _$vue from "vue";
+import { PropType, ShallowRef } from "vue";
+
+//#region src/vue/collection.d.ts
+type CollectionActions = Pick<CollectionStore, "setFilters" | "toggleFilter" | "toggleFilterInput" | "setSortKey" | "setSortByValue" | "reset" | "handleFormSubmit">;
+declare const CollectionProvider: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
+  data: {
+    type: PropType<CollectionData>;
+    required: true;
+  };
+  urlSearch: {
+    type: StringConstructor;
+    default: string;
+  };
+}>, () => _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
+  [key: string]: any;
+}>[] | undefined, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  change: (searchString: string) => boolean;
+}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
+  data: {
+    type: PropType<CollectionData>;
+    required: true;
+  };
+  urlSearch: {
+    type: StringConstructor;
+    default: string;
+  };
+}>> & Readonly<{
+  onChange?: ((searchString: string) => any) | undefined;
+}>, {
+  urlSearch: string;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
+declare function useCollection(): Readonly<ShallowRef<CollectionState>>;
+declare function useCollection<S>(selector: (state: CollectionState) => S, isEqual?: (a: S, b: S) => boolean): Readonly<ShallowRef<S>>;
+declare function useCollectionActions(): CollectionActions;
+declare function useCollectionForm(): {
+  formProps: (opts?: {
+    beforeSubmit?: (e: Event) => void;
+    afterSubmit?: (e: Event) => void;
+  }) => Record<string, unknown>;
+};
+//#endregion
+export { CollectionActions, CollectionProvider, useCollection, useCollectionActions, useCollectionForm };
+//# sourceMappingURL=collection.d.mts.map

package/dist/vue/collection.mjs

@@ -0,0 +1,108 @@
+import { createCollectionStore } from "../core/collection/collection.mjs";
+import { createCollectionReconciler } from "../core/collection/reconciler.mjs";
+import { defineComponent, inject, onUnmounted, provide, shallowRef, toValue, watch } from "vue";
+
+//#region src/vue/collection.ts
+const CollectionStoreKey = Symbol("CollectionStore");
+const CollectionProvider = defineComponent({
+	name: "CollectionProvider",
+	props: {
+		data: {
+			type: Object,
+			required: true
+		},
+		urlSearch: {
+			type: String,
+			default: ""
+		}
+	},
+	emits: { change: (searchString) => typeof searchString === "string" },
+	setup(props, { slots, emit }) {
+		const readUrlSearch = () => toValue(props.urlSearch);
+		const initialStore = createCollectionStore({
+			data: props.data,
+			urlSearch: readUrlSearch()
+		});
+		const storeRef = shallowRef(initialStore);
+		provide(CollectionStoreKey, storeRef);
+		let reconciler = createCollectionReconciler({
+			getStore: () => storeRef.value,
+			readUrlSearch,
+			emitChange: (s) => emit("change", s)
+		}, readUrlSearch());
+		initialStore.setOnBrowseChange(() => reconciler.handleBrowseChange());
+		function resetStore() {
+			storeRef.value.setOnBrowseChange(null);
+			const store = createCollectionStore({
+				data: props.data,
+				urlSearch: readUrlSearch()
+			});
+			storeRef.value = store;
+			reconciler.reset(readUrlSearch());
+			store.setOnBrowseChange(() => reconciler.handleBrowseChange());
+		}
+		watch(() => props.data.handle, (newHandle, oldHandle) => {
+			if (newHandle === oldHandle) return;
+			resetStore();
+		});
+		watch(() => [readUrlSearch(), props.data], () => {
+			reconciler.reconcile(readUrlSearch(), props.data.dataSearch);
+		}, {
+			flush: "sync",
+			immediate: true,
+			deep: true
+		});
+		onUnmounted(() => {
+			storeRef.value.setOnBrowseChange(null);
+		});
+		return () => slots.default?.();
+	}
+});
+function useRequiredStoreRef(composableName) {
+	const storeRef = inject(CollectionStoreKey, null);
+	if (!storeRef) throw new Error(`${composableName} must be used inside a <CollectionProvider>.`);
+	return storeRef;
+}
+function useCollection(selector, isEqual) {
+	const storeRef = useRequiredStoreRef("useCollection");
+	const resolve = selector ?? ((state) => state);
+	const selected = shallowRef(resolve(storeRef.value.getState()));
+	watch(() => storeRef.value, (store, _, onCleanup) => {
+		selected.value = resolve(store.getState());
+		onCleanup(store.subscribe(() => {
+			const next = resolve(store.getState());
+			if (isEqual && selector) {
+				if (isEqual(selected.value, next)) return;
+			}
+			selected.value = next;
+		}));
+	}, { immediate: true });
+	return selected;
+}
+function useCollectionActions() {
+	const storeRef = useRequiredStoreRef("useCollectionActions");
+	return {
+		setFilters: (...args) => storeRef.value.setFilters(...args),
+		toggleFilter: (...args) => storeRef.value.toggleFilter(...args),
+		toggleFilterInput: (...args) => storeRef.value.toggleFilterInput(...args),
+		setSortKey: (...args) => storeRef.value.setSortKey(...args),
+		setSortByValue: (...args) => storeRef.value.setSortByValue(...args),
+		reset: (...args) => storeRef.value.reset(...args),
+		handleFormSubmit: (...args) => storeRef.value.handleFormSubmit(...args)
+	};
+}
+function useCollectionForm() {
+	const actions = useCollectionActions();
+	const formProps = (opts) => ({ onSubmit: (e) => {
+		opts?.beforeSubmit?.(e);
+		if (e.defaultPrevented) return;
+		e.preventDefault();
+		actions.handleFormSubmit(e);
+		opts?.afterSubmit?.(e);
+	} });
+	return { formProps };
+}
+
+//#endregion
+export { CollectionProvider, useCollection, useCollectionActions, useCollectionForm };
+//# sourceMappingURL=collection.mjs.map

package/dist/vue/collection.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection.mjs","names":[],"sources":["../../src/vue/collection.ts"],"sourcesContent":["import {\n  defineComponent,\n  inject,\n  onUnmounted,\n  provide,\n  shallowRef,\n  toValue,\n  watch,\n  type InjectionKey,\n  type PropType,\n  type ShallowRef,\n} from \"vue\";\n\nimport {\n  createCollectionStore,\n  createCollectionReconciler,\n  type CollectionData,\n  type CollectionReconciler,\n  type CollectionStore,\n} from \"../core/collection\";\nimport type { CollectionState } from \"../core/collection\";\n\nexport type { CollectionData };\n\nconst CollectionStoreKey: InjectionKey<ShallowRef<CollectionStore>> = Symbol(\"CollectionStore\");\n\nexport type CollectionActions = Pick<\n  CollectionStore,\n  | \"setFilters\"\n  | \"toggleFilter\"\n  | \"toggleFilterInput\"\n  | \"setSortKey\"\n  | \"setSortByValue\"\n  | \"reset\"\n  | \"handleFormSubmit\"\n>;\n\nexport const CollectionProvider = defineComponent({\n  name: \"CollectionProvider\",\n  props: {\n    data: {\n      type: Object as PropType<CollectionData>,\n      required: true,\n    },\n    urlSearch: {\n      type: String,\n      default: \"\",\n    },\n  },\n  emits: {\n    change: (searchString: string) => typeof searchString === \"string\",\n  },\n  setup(props, { slots, emit }) {\n    const readUrlSearch = () => toValue(props.urlSearch);\n\n    const initialStore = createCollectionStore({\n      data: props.data,\n      urlSearch: readUrlSearch(),\n    });\n    const storeRef = shallowRef<CollectionStore>(initialStore);\n    provide(CollectionStoreKey, storeRef);\n\n    let reconciler: CollectionReconciler = createCollectionReconciler(\n      {\n        getStore: () => storeRef.value,\n        readUrlSearch,\n        emitChange: (s) => emit(\"change\", s),\n      },\n      readUrlSearch(),\n    );\n    initialStore.setOnBrowseChange(() => reconciler.handleBrowseChange());\n\n    function resetStore() {\n      storeRef.value.setOnBrowseChange(null);\n      const store = createCollectionStore({\n        data: props.data,\n        urlSearch: readUrlSearch(),\n      });\n      storeRef.value = store;\n      reconciler.reset(readUrlSearch());\n      store.setOnBrowseChange(() => reconciler.handleBrowseChange());\n    }\n\n    watch(\n      () => props.data.handle,\n      (newHandle, oldHandle) => {\n        if (newHandle === oldHandle) return;\n        resetStore();\n      },\n    );\n\n    watch(\n      () => [readUrlSearch(), props.data] as const,\n      () => {\n        reconciler.reconcile(readUrlSearch(), props.data.dataSearch);\n      },\n      { flush: \"sync\", immediate: true, deep: true },\n    );\n\n    onUnmounted(() => {\n      storeRef.value.setOnBrowseChange(null);\n    });\n\n    return () => slots.default?.();\n  },\n});\n\nfunction useRequiredStoreRef(composableName: string): ShallowRef<CollectionStore> {\n  const storeRef = inject(CollectionStoreKey, null);\n  if (!storeRef) {\n    throw new Error(`${composableName} must be used inside a <CollectionProvider>.`);\n  }\n  return storeRef;\n}\n\nexport function useCollection(): Readonly<ShallowRef<CollectionState>>;\nexport function useCollection<S>(\n  selector: (state: CollectionState) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S>>;\nexport function useCollection<S>(\n  selector?: (state: CollectionState) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<CollectionState | S>> {\n  const storeRef = useRequiredStoreRef(\"useCollection\");\n  const resolve = selector ?? ((state: CollectionState) => state as unknown as S);\n  const selected = shallowRef<CollectionState | S>(resolve(storeRef.value.getState()));\n\n  watch(\n    () => storeRef.value,\n    (store, _, onCleanup) => {\n      selected.value = resolve(store.getState());\n\n      const unsubscribe = store.subscribe(() => {\n        const next = resolve(store.getState());\n        if (isEqual && selector) {\n          if (isEqual(selected.value as S, next)) return;\n        }\n        selected.value = next;\n      });\n\n      onCleanup(unsubscribe);\n    },\n    { immediate: true },\n  );\n\n  return selected as Readonly<ShallowRef<CollectionState | S>>;\n}\n\nexport function useCollectionActions(): CollectionActions {\n  const storeRef = useRequiredStoreRef(\"useCollectionActions\");\n\n  return {\n    setFilters: (...args) => storeRef.value.setFilters(...args),\n    toggleFilter: (...args) => storeRef.value.toggleFilter(...args),\n    toggleFilterInput: (...args) => storeRef.value.toggleFilterInput(...args),\n    setSortKey: (...args) => storeRef.value.setSortKey(...args),\n    setSortByValue: (...args) => storeRef.value.setSortByValue(...args),\n    reset: (...args) => storeRef.value.reset(...args),\n    handleFormSubmit: (...args) => storeRef.value.handleFormSubmit(...args),\n  };\n}\n\nexport function useCollectionForm(): {\n  formProps: (opts?: {\n    beforeSubmit?: (e: Event) => void;\n    afterSubmit?: (e: Event) => void;\n  }) => Record<string, unknown>;\n} {\n  const actions = useCollectionActions();\n\n  const formProps = (opts?: {\n    beforeSubmit?: (e: Event) => void;\n    afterSubmit?: (e: Event) => void;\n  }): Record<string, unknown> => ({\n    onSubmit: (e: Event) => {\n      opts?.beforeSubmit?.(e);\n      if (e.defaultPrevented) return;\n      e.preventDefault();\n      actions.handleFormSubmit(e as SubmitEvent);\n      opts?.afterSubmit?.(e);\n    },\n  });\n\n  return { formProps };\n}\n"],"mappings":"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"}

package/dist/vue/index.d.mts

@@ -0,0 +1,11 @@
+import { ShopifyGlobal } from "../globals.mjs";
+import { CollectionData } from "../core/collection/collection.mjs";
+import { ValidProductSelectionResult } from "../core/product/product-form.mjs";
+import { ProductAddToCartProps, ProductFormRegister, ProductMerchandiseIdProps, ProductOptionValueProps, ProductQuantityDefaultProps, ProductQuantityProps } from "../core/product/form.mjs";
+import { createCartComponents, useCartAnalytics } from "./cart.mjs";
+import { CollectionActions, CollectionProvider, useCollection, useCollectionActions, useCollectionForm } from "./collection.mjs";
+import { PredictiveSearchActions, PredictiveSearchFormPropsOptions, PredictiveSearchFormResult, PredictiveSearchProvider, PredictiveSearchQueryInputPropsOptions, usePredictiveSearch, usePredictiveSearchActions, usePredictiveSearchForm } from "./predictive-search.mjs";
+import { UseProductFormOptions, UseProductFormResult, UseProductResult, createProductComponents, useProductForm } from "./product.mjs";
+import { ShopPayButton, ShopPayButtonProps } from "./shop-pay.mjs";
+import { ShopifyScripts, ShopifyScriptsProps } from "./shopify-scripts.mjs";
+export { type CollectionActions, type CollectionData, CollectionProvider, type PredictiveSearchActions, type PredictiveSearchFormPropsOptions, type PredictiveSearchFormResult, PredictiveSearchProvider, type PredictiveSearchQueryInputPropsOptions, type ProductAddToCartProps, type ProductFormRegister, type ProductMerchandiseIdProps, type ProductOptionValueProps, type ProductQuantityDefaultProps, type ProductQuantityProps, ShopPayButton, type ShopPayButtonProps, type ShopifyGlobal, ShopifyScripts, type ShopifyScriptsProps, type UseProductFormOptions, type UseProductFormResult, type UseProductResult, type ValidProductSelectionResult, createCartComponents, createProductComponents, useCartAnalytics, useCollection, useCollectionActions, useCollectionForm, usePredictiveSearch, usePredictiveSearchActions, usePredictiveSearchForm, useProductForm };

package/dist/vue/index.mjs

@@ -0,0 +1,8 @@
+import { createCartComponents, useCartAnalytics } from "./cart.mjs";
+import { CollectionProvider, useCollection, useCollectionActions, useCollectionForm } from "./collection.mjs";
+import { PredictiveSearchProvider, usePredictiveSearch, usePredictiveSearchActions, usePredictiveSearchForm } from "./predictive-search.mjs";
+import { createProductComponents, useProductForm } from "./product.mjs";
+import { ShopPayButton } from "./shop-pay.mjs";
+import { ShopifyScripts } from "./shopify-scripts.mjs";
+
+export { CollectionProvider, PredictiveSearchProvider, ShopPayButton, ShopifyScripts, createCartComponents, createProductComponents, useCartAnalytics, useCollection, useCollectionActions, useCollectionForm, usePredictiveSearch, usePredictiveSearchActions, usePredictiveSearchForm, useProductForm };