@zappie/sdk 0.1.17 → 0.1.19

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @zappie/sdk
 
+## 0.1.19
+
+### Patch Changes
+
+- 628ac42: Add `@zappie/sdk/studio`, the Studio region selector. On the Studio dev server, `TemplateSettingsProvider` loads it in draft mode and posts `selectable` after `ready`. It outlines the region under the pointer with its merchant-facing name, steps out and back in with the arrow keys, moves through regions with Tab, and selects with a click, Enter or Space without following links or pressing buttons. It posts the selection as `region` and Escape as `select-cancel`, and announces names through a live region. It takes `select` only from the framing Studio dashboard in `STUDIO_ORIGINS`. Kit parts are named by `KIT_REGION_NAMES`. A production build drops the loader, so stand-in previews and live sites load none of it and post `selectable` with `on: false`.
+
+## 0.1.18
+
+### Patch Changes
+
+- f0c08ed: Open checkout over the page. `embedCheckout()` from `@zappie/sdk/checkout/embed` frames a checkout session as a modal on desktop or a bottom sheet on mobile, and redirects in in-app browsers and framed pages. Back and Escape ask the checkout to step back or close, and once a payment has started the checkout asks the shopper before it closes. A completed result waits for the server to confirm the session, and a completed session can't be reopened. `resumeCheckout()` drops a stale checkout entry from the address without reopening it. `useCheckout()` from `@zappie/sdk/checkout/react` creates the session and opens it.
+
 ## 0.1.17
 
 ### Patch Changes

package/dist/checkout/embed.d.ts

@@ -0,0 +1,148 @@
+import { WireLine, WireMoney } from '@zappie/sdk';
+
+/**
+ * Address fields you can send with a delivery checkout request.
+ */
+type CheckoutAddress = {
+    line1?: string;
+    city?: string;
+    place_id?: string;
+    lat?: number;
+    lng?: number;
+};
+/**
+ * Pickup or delivery details for a checkout session, including an optional schedule.
+ */
+type CheckoutFulfilment = {
+    /** Dine-in orders are not checked out through a session. */
+    type: "pickup" | "delivery";
+    address?: CheckoutAddress;
+    scheduled_for?: string | null;
+    delivery_region_id?: string;
+    instructions?: string;
+};
+/**
+ * Cart lines, branch, fulfilment and return URLs you send to open checkout.
+ */
+type CheckoutRequest = {
+    branch_id: string;
+    menu_version: string;
+    lines: WireLine[];
+    fulfilment: CheckoutFulfilment;
+    contact_phone?: string;
+    promo_code?: string;
+    return_url: string;
+    cancel_url?: string;
+    source?: string;
+    campaign?: string;
+};
+/**
+ * A checkout session returned by the service, with its amount, expiry and order status.
+ */
+type CheckoutSession = {
+    id: string;
+    status: "open" | "completed" | "expired" | "cancelled";
+    url?: string;
+    amount: WireMoney;
+    order_id: string | null;
+    return_url: string;
+    cancel_url?: string;
+    expires_at: string;
+};
+/**
+ * A checkout session with a payment URL you can use to send the shopper to checkout.
+ */
+type OpenCheckoutSession = CheckoutSession & {
+    url: string;
+};
+/**
+ * A terminal checkout result: a completed order, an expired session or a cancelled session.
+ */
+type CheckoutCompletion = (CheckoutSession & {
+    status: "completed";
+    order_id: string;
+}) | (CheckoutSession & {
+    status: "expired" | "cancelled";
+});
+/**
+ * Optional customer API base URL and fetch implementation for the checkout client.
+ */
+type CheckoutClientOptions = {
+    customerBase?: string;
+    fetch?: typeof fetch;
+};
+/**
+ * Cancellation signal and polling interval in milliseconds for awaiting checkout completion.
+ */
+type AwaitCompletionOptions = {
+    signal?: AbortSignal;
+    intervalMs?: number;
+};
+
+/**
+ * Create a client that opens checkout sessions, reads them and polls for completion.
+ *
+ * @param options - Override the default `/_zappie/api` base or fetch implementation.
+ * @returns A checkout client. Retain each idempotency key when retrying the same cart.
+ */
+declare function createCheckout(options?: CheckoutClientOptions): {
+    /** The caller retains this key and reuses it when retrying the same cart. */
+    open(body: CheckoutRequest, idempotencyKey: string): Promise<OpenCheckoutSession>;
+    session(id: string): Promise<CheckoutSession>;
+    awaitCompletion(id: string, options?: AwaitCompletionOptions): Promise<CheckoutCompletion>;
+};
+/**
+ * The session creation, lookup and completion methods returned by createCheckout.
+ */
+type CheckoutClient = ReturnType<typeof createCheckout>;
+
+/** How checkout opens. Auto redirects in in-app browsers and framed pages, else a modal on desktop and a sheet on mobile. */
+type CheckoutPresentation = "auto" | "modal" | "sheet" | "fullscreen" | "redirect";
+/** The checkout look from toCheckoutTheme in @zappie/tokens/checkout. The checkout validates it before use. */
+type CheckoutTheme = {
+    version: 1;
+    tokens: Partial<Record<`--z-${string}`, string>>;
+    logo?: {
+        url: string;
+        alt: string;
+    };
+    fonts?: {
+        family: string;
+        role: "body" | "display";
+        weights?: number[];
+    }[];
+    copy?: {
+        payButton?: string;
+        successTitle?: string;
+    };
+};
+/** Presentation, theme and step reporting for an embedded checkout. */
+type EmbedOptions = {
+    presentation?: CheckoutPresentation;
+    theme?: CheckoutTheme;
+    /** Called with each checkout step, and whether a payment has started. */
+    onStep?: (step: string, paying: boolean) => void;
+};
+/** How an embedded checkout ended. A completed result is confirmed by the server first. */
+type CheckoutResult = {
+    status: "completed";
+    orderId: string;
+} | {
+    status: "cancelled";
+    reason: string;
+} | {
+    status: "redirected";
+};
+/** Resolve auto to the presentation this browser gets. */
+declare function checkoutPresentation(presentation?: CheckoutPresentation): Exclude<CheckoutPresentation, "auto">;
+/** Ask the open checkout to close. Mid-payment it asks the shopper first. */
+declare function closeCheckout(): void;
+/** On load, drop a stale checkout entry from the address and read its session. It never reopens checkout. */
+declare function resumeCheckout(checkout: CheckoutClient): Promise<CheckoutResult | null>;
+/**
+ * Open a checkout session over the page and settle when it ends. Only Zappie's checkout, or one on this machine, is framed. Back and Escape ask the checkout to step back or
+ * close. A completed result waits for the server to confirm the session. A completed session can't be reopened.
+ */
+declare function embedCheckout(checkout: CheckoutClient, session: OpenCheckoutSession, options?: EmbedOptions): Promise<CheckoutResult>;
+
+export { type CheckoutPresentation, type CheckoutResult, type CheckoutTheme, type EmbedOptions, checkoutPresentation, closeCheckout, embedCheckout, resumeCheckout };

package/dist/checkout/embed.js

@@ -0,0 +1,240 @@
+// src/checkout/embed.ts
+import { ZappieError } from "./sdk.js";
+var PARAM = "zappie_checkout";
+var finished = /* @__PURE__ */ new Set();
+var request;
+var media = (query) => matchMedia(query).matches;
+function checkoutPresentation(presentation = "auto") {
+  if (presentation !== "auto") {
+    return presentation;
+  }
+  if (window.top !== window || /FBA[NV]|Instagram|TikTok|musical_ly|Bytedance|Line\//.test(
+    navigator.userAgent
+  )) {
+    return "redirect";
+  }
+  return media("(min-width:640px) and (pointer:fine),(min-width:1024px)") ? "modal" : "sheet";
+}
+function closeCheckout() {
+  request?.();
+}
+async function resumeCheckout(checkout) {
+  const url = new URL(location.href);
+  const id = url.searchParams.get(PARAM);
+  if (!id) {
+    return null;
+  }
+  url.searchParams.delete(PARAM);
+  history.replaceState(history.state, "", url);
+  const session = await checkout.session(id);
+  return session.status === "completed" && session.order_id ? { status: "completed", orderId: session.order_id } : null;
+}
+function embedCheckout(checkout, session, options = {}) {
+  const url = new URL(session.url);
+  if (request || session.status !== "open" || finished.has(session.id) || !(/^https:\/\/checkout\.(stg\.)?zappie\.ai$/.test(url.origin) || /^http:\/\/(localhost|127\.0\.0\.1)(:\d+)?$/.test(url.origin))) {
+    return Promise.reject(
+      new ZappieError(
+        "invalid_request",
+        "This checkout session can't be opened"
+      )
+    );
+  }
+  const shown = checkoutPresentation(options.presentation);
+  if (shown === "redirect") {
+    location.assign(session.url);
+    return Promise.resolve({ status: "redirected" });
+  }
+  url.pathname = `/embed/${encodeURIComponent(session.id)}`;
+  const doc = document;
+  const body = doc.body;
+  const root = doc.createElement("div");
+  const panel = doc.createElement("div");
+  const handle = doc.createElement("div");
+  const frame = doc.createElement("iframe");
+  const sheet = shown === "sheet";
+  const still = media("(prefers-reduced-motion:reduce)");
+  const opener = doc.activeElement;
+  const y = scrollY;
+  const bodyStyle = body.style.cssText;
+  const restoration = history.scrollRestoration;
+  const inert = [...body.children].filter(
+    (el) => !el.inert
+  );
+  const abort = new AbortController();
+  const vv = window.visualViewport;
+  let ready = false;
+  let paying = false;
+  let height = 640;
+  let settle = () => {
+  };
+  root.setAttribute("data-zappie-checkout", shown);
+  root.setAttribute("role", "dialog");
+  root.setAttribute("aria-modal", "true");
+  root.setAttribute("aria-label", "Checkout");
+  root.style.cssText = "position:fixed;inset:0;z-index:2147483647;background:var(--z-checkout-backdrop,rgb(0 0 0/.5))";
+  panel.style.cssText = `position:absolute;overflow:hidden;display:flex;flex-direction:column;background:var(--z-surface,#fff);${shown === "fullscreen" ? "inset:0" : sheet ? "left:0;right:0;border-radius:var(--z-checkout-radius,16px) var(--z-checkout-radius,16px) 0 0" : "inset:0;margin:auto;width:min(480px,100vw - 32px);border-radius:var(--z-checkout-radius,16px)"}`;
+  handle.style.cssText = "flex:none;height:24px;touch-action:none;cursor:grab;background:radial-gradient(closest-side,var(--z-border,#ccc) 99%,#0000) 50%/40px 5px no-repeat";
+  frame.title = "Checkout";
+  frame.src = url.href;
+  frame.allow = "payment 'src'; publickey-credentials-get 'src'";
+  frame.referrerPolicy = "no-referrer";
+  frame.style.cssText = "flex:1;width:100%;border:0;display:block";
+  if (sheet) {
+    panel.append(handle);
+  }
+  panel.append(frame);
+  root.append(panel);
+  const layout = () => {
+    const view = vv ?? { height: innerHeight, offsetTop: 0 };
+    if (sheet) {
+      panel.style.height = `${Math.round(view.height * 0.92)}px`;
+      panel.style.bottom = `${Math.max(0, innerHeight - view.offsetTop - view.height)}px`;
+    } else if (shown === "modal") {
+      panel.style.height = `${Math.min(height, view.height - 32)}px`;
+    }
+  };
+  const post = (type, payload = {}) => frame.contentWindow?.postMessage(
+    { source: "zappie-checkout", v: 1, session: session.id, type, payload },
+    url.origin
+  );
+  const finish = (result, popped) => {
+    abort.abort();
+    request = void 0;
+    removeEventListener("message", onMessage);
+    removeEventListener("popstate", onPop);
+    removeEventListener("keydown", onKey);
+    vv?.removeEventListener("resize", layout);
+    vv?.removeEventListener("scroll", layout);
+    root.remove();
+    inert.forEach((el) => el.inert = false);
+    body.style.cssText = bodyStyle;
+    const restore = () => {
+      scrollTo(0, y);
+      setTimeout(() => {
+        scrollTo(0, y);
+        history.scrollRestoration = restoration;
+      });
+    };
+    restore();
+    opener?.focus({ preventScroll: true });
+    if (!popped && history.state?.[PARAM] === session.id) {
+      history.scrollRestoration = "manual";
+      addEventListener("popstate", restore, { once: true });
+      history.back();
+    }
+    settle(result);
+  };
+  const close = () => ready ? post("close_request") : finish({ status: "cancelled", reason: "user" });
+  const onKey = (event) => {
+    if (event.key === "Escape") {
+      close();
+    }
+  };
+  const onPop = () => {
+    if (!ready) {
+      return finish({ status: "cancelled", reason: "user" }, true);
+    }
+    history.pushState(
+      { ...history.state, [PARAM]: session.id },
+      "",
+      location.href
+    );
+    post("close_request");
+  };
+  const onMessage = (event) => {
+    const data = event.data;
+    if (event.origin !== url.origin || event.source !== frame.contentWindow || data?.source !== "zappie-checkout" || data.v !== 1 || data.session !== session.id) {
+      return;
+    }
+    const payload = Object(data.payload);
+    if (data.type === "ready" || data.type === "step") {
+      if (data.type === "ready") {
+        ready = true;
+        frame.focus();
+        if (options.theme) {
+          post("theme", options.theme);
+        }
+      }
+      paying = payload.paying === true;
+      if (typeof payload.step === "string") {
+        options.onStep?.(payload.step, paying);
+      }
+    } else if (data.type === "resize" && Number.isFinite(payload.height)) {
+      height = payload.height;
+      layout();
+    } else if (data.type === "completed") {
+      checkout.awaitCompletion(session.id, { signal: abort.signal, intervalMs: 1500 }).then(
+        (done) => {
+          if (done.status === "completed") {
+            finished.add(session.id);
+            finish({ status: "completed", orderId: done.order_id });
+          } else {
+            finish({ status: "cancelled", reason: done.status });
+          }
+        },
+        () => {
+        }
+      );
+    } else if (data.type === "cancelled" || data.type === "error") {
+      finish({
+        status: "cancelled",
+        reason: String(payload.reason ?? payload.code ?? "user")
+      });
+    }
+  };
+  let start = 0;
+  handle.onpointerdown = (event) => {
+    if (paying) {
+      return;
+    }
+    start = event.clientY;
+    handle.setPointerCapture?.(event.pointerId);
+  };
+  handle.onpointermove = (event) => {
+    if (start) {
+      panel.style.transform = `translateY(${Math.max(0, event.clientY - start)}px)`;
+    }
+  };
+  handle.onpointerup = handle.onpointercancel = (event) => {
+    const moved = start ? event.clientY - start : 0;
+    start = 0;
+    panel.style.transform = "";
+    if (!paying && moved > panel.offsetHeight / 4) {
+      finish({ status: "cancelled", reason: "user" });
+    }
+  };
+  history.pushState(
+    { ...history.state, [PARAM]: session.id },
+    "",
+    (() => {
+      const here = new URL(location.href);
+      here.searchParams.set(PARAM, session.id);
+      return here;
+    })()
+  );
+  addEventListener("message", onMessage);
+  addEventListener("popstate", onPop);
+  addEventListener("keydown", onKey);
+  vv?.addEventListener("resize", layout);
+  vv?.addEventListener("scroll", layout);
+  inert.forEach((el) => el.inert = true);
+  history.scrollRestoration = "manual";
+  body.style.cssText += `;position:fixed;top:${-y}px;left:0;right:0;overflow:hidden`;
+  body.append(root);
+  layout();
+  if (!still) {
+    panel.animate?.(
+      sheet ? [{ transform: "translateY(100%)" }, { transform: "none" }] : [{ opacity: 0 }, { opacity: 1 }],
+      { duration: sheet ? 280 : 160, easing: "cubic-bezier(.2,.8,.2,1)" }
+    );
+  }
+  request = close;
+  return new Promise((resolve) => settle = resolve);
+}
+export {
+  checkoutPresentation,
+  closeCheckout,
+  embedCheckout,
+  resumeCheckout
+};
+//# sourceMappingURL=embed.js.map

package/dist/checkout/embed.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/checkout/embed.ts"],
+  "sourcesContent": ["import type { CheckoutClient } from \"./client\";\nimport { ZappieError } from \"./sdk\";\nimport type { OpenCheckoutSession } from \"./types\";\n\n/** How checkout opens. Auto redirects in in-app browsers and framed pages, else a modal on desktop and a sheet on mobile. */\nexport type CheckoutPresentation =\n  \"auto\" | \"modal\" | \"sheet\" | \"fullscreen\" | \"redirect\";\n\n/** The checkout look from toCheckoutTheme in @zappie/tokens/checkout. The checkout validates it before use. */\nexport type CheckoutTheme = {\n  version: 1;\n  tokens: Partial<Record<`--z-${string}`, string>>;\n  logo?: { url: string; alt: string };\n  fonts?: { family: string; role: \"body\" | \"display\"; weights?: number[] }[];\n  copy?: { payButton?: string; successTitle?: string };\n};\n\n/** Presentation, theme and step reporting for an embedded checkout. */\nexport type EmbedOptions = {\n  presentation?: CheckoutPresentation;\n  theme?: CheckoutTheme;\n  /** Called with each checkout step, and whether a payment has started. */\n  onStep?: (step: string, paying: boolean) => void;\n};\n\n/** How an embedded checkout ended. A completed result is confirmed by the server first. */\nexport type CheckoutResult =\n  | { status: \"completed\"; orderId: string }\n  | { status: \"cancelled\"; reason: string }\n  | { status: \"redirected\" };\n\nconst PARAM = \"zappie_checkout\";\nconst finished = new Set<string>();\nlet request: (() => void) | undefined;\nconst media = (query: string) => matchMedia(query).matches;\n\n/** Resolve auto to the presentation this browser gets. */\nexport function checkoutPresentation(\n  presentation: CheckoutPresentation = \"auto\",\n): Exclude<CheckoutPresentation, \"auto\"> {\n  if (presentation !== \"auto\") {\n    return presentation;\n  }\n  if (\n    window.top !== window ||\n    /FBA[NV]|Instagram|TikTok|musical_ly|Bytedance|Line\\//.test(\n      navigator.userAgent,\n    )\n  ) {\n    return \"redirect\";\n  }\n  return media(\"(min-width:640px) and (pointer:fine),(min-width:1024px)\")\n    ? \"modal\"\n    : \"sheet\";\n}\n\n/** Ask the open checkout to close. Mid-payment it asks the shopper first. */\nexport function closeCheckout(): void {\n  request?.();\n}\n\n/** On load, drop a stale checkout entry from the address and read its session. It never reopens checkout. */\nexport async function resumeCheckout(\n  checkout: CheckoutClient,\n): Promise<CheckoutResult | null> {\n  const url = new URL(location.href);\n  const id = url.searchParams.get(PARAM);\n  if (!id) {\n    return null;\n  }\n  url.searchParams.delete(PARAM);\n  history.replaceState(history.state, \"\", url);\n  const session = await checkout.session(id);\n  return session.status === \"completed\" && session.order_id\n    ? { status: \"completed\", orderId: session.order_id }\n    : null;\n}\n\n/**\n * Open a checkout session over the page and settle when it ends. Only Zappie's checkout, or one on this machine, is framed. Back and Escape ask the checkout to step back or\n * close. A completed result waits for the server to confirm the session. A completed session can't be reopened.\n */\nexport function embedCheckout(\n  checkout: CheckoutClient,\n  session: OpenCheckoutSession,\n  options: EmbedOptions = {},\n): Promise<CheckoutResult> {\n  const url = new URL(session.url);\n  if (\n    request ||\n    session.status !== \"open\" ||\n    finished.has(session.id) ||\n    !(\n      /^https:\\/\\/checkout\\.(stg\\.)?zappie\\.ai$/.test(url.origin) ||\n      /^http:\\/\\/(localhost|127\\.0\\.0\\.1)(:\\d+)?$/.test(url.origin)\n    )\n  ) {\n    return Promise.reject(\n      new ZappieError(\n        \"invalid_request\",\n        \"This checkout session can't be opened\",\n      ),\n    );\n  }\n  const shown = checkoutPresentation(options.presentation);\n  if (shown === \"redirect\") {\n    location.assign(session.url);\n    return Promise.resolve({ status: \"redirected\" });\n  }\n  url.pathname = `/embed/${encodeURIComponent(session.id)}`;\n  const doc = document;\n  const body = doc.body;\n  const root = doc.createElement(\"div\");\n  const panel = doc.createElement(\"div\");\n  const handle = doc.createElement(\"div\");\n  const frame = doc.createElement(\"iframe\");\n  const sheet = shown === \"sheet\";\n  const still = media(\"(prefers-reduced-motion:reduce)\");\n  const opener = doc.activeElement as HTMLElement | null;\n  const y = scrollY;\n  const bodyStyle = body.style.cssText;\n  const restoration = history.scrollRestoration;\n  const inert = [...body.children].filter(\n    (el): el is HTMLElement => !(el as HTMLElement).inert,\n  );\n  const abort = new AbortController();\n  const vv = window.visualViewport;\n  let ready = false;\n  let paying = false;\n  let height = 640;\n  let settle: (result: CheckoutResult) => void = () => {};\n\n  root.setAttribute(\"data-zappie-checkout\", shown);\n  root.setAttribute(\"role\", \"dialog\");\n  root.setAttribute(\"aria-modal\", \"true\");\n  root.setAttribute(\"aria-label\", \"Checkout\");\n  root.style.cssText =\n    \"position:fixed;inset:0;z-index:2147483647;background:var(--z-checkout-backdrop,rgb(0 0 0/.5))\";\n  panel.style.cssText = `position:absolute;overflow:hidden;display:flex;flex-direction:column;background:var(--z-surface,#fff);${\n    shown === \"fullscreen\"\n      ? \"inset:0\"\n      : sheet\n        ? \"left:0;right:0;border-radius:var(--z-checkout-radius,16px) var(--z-checkout-radius,16px) 0 0\"\n        : \"inset:0;margin:auto;width:min(480px,100vw - 32px);border-radius:var(--z-checkout-radius,16px)\"\n  }`;\n  handle.style.cssText =\n    \"flex:none;height:24px;touch-action:none;cursor:grab;background:radial-gradient(closest-side,var(--z-border,#ccc) 99%,#0000) 50%/40px 5px no-repeat\";\n  frame.title = \"Checkout\";\n  frame.src = url.href;\n  frame.allow = \"payment 'src'; publickey-credentials-get 'src'\";\n  frame.referrerPolicy = \"no-referrer\";\n  frame.style.cssText = \"flex:1;width:100%;border:0;display:block\";\n  if (sheet) {\n    panel.append(handle);\n  }\n  panel.append(frame);\n  root.append(panel);\n\n  const layout = () => {\n    const view = vv ?? { height: innerHeight, offsetTop: 0 };\n    if (sheet) {\n      panel.style.height = `${Math.round(view.height * 0.92)}px`;\n      panel.style.bottom = `${Math.max(0, innerHeight - view.offsetTop - view.height)}px`;\n    } else if (shown === \"modal\") {\n      panel.style.height = `${Math.min(height, view.height - 32)}px`;\n    }\n  };\n  const post = (type: string, payload: object = {}) =>\n    frame.contentWindow?.postMessage(\n      { source: \"zappie-checkout\", v: 1, session: session.id, type, payload },\n      url.origin,\n    );\n  const finish = (result: CheckoutResult, popped?: boolean) => {\n    abort.abort();\n    request = undefined;\n    removeEventListener(\"message\", onMessage);\n    removeEventListener(\"popstate\", onPop);\n    removeEventListener(\"keydown\", onKey);\n    vv?.removeEventListener(\"resize\", layout);\n    vv?.removeEventListener(\"scroll\", layout);\n    root.remove();\n    inert.forEach((el) => (el.inert = false));\n    body.style.cssText = bodyStyle;\n    // WebKit scrolls the page again after popstate, so the scroll is set once more a task later.\n    const restore = () => {\n      scrollTo(0, y);\n      setTimeout(() => {\n        scrollTo(0, y);\n        history.scrollRestoration = restoration;\n      });\n    };\n    restore();\n    opener?.focus({ preventScroll: true });\n    if (!popped && history.state?.[PARAM] === session.id) {\n      history.scrollRestoration = \"manual\";\n      addEventListener(\"popstate\", restore, { once: true });\n      history.back();\n    }\n    settle(result);\n  };\n  const close = () =>\n    ready\n      ? post(\"close_request\")\n      : finish({ status: \"cancelled\", reason: \"user\" });\n  const onKey = (event: KeyboardEvent) => {\n    if (event.key === \"Escape\") {\n      close();\n    }\n  };\n  const onPop = () => {\n    if (!ready) {\n      return finish({ status: \"cancelled\", reason: \"user\" }, true);\n    }\n    history.pushState(\n      { ...history.state, [PARAM]: session.id },\n      \"\",\n      location.href,\n    );\n    post(\"close_request\");\n  };\n  const onMessage = (event: MessageEvent) => {\n    const data = event.data;\n    if (\n      event.origin !== url.origin ||\n      event.source !== frame.contentWindow ||\n      data?.source !== \"zappie-checkout\" ||\n      data.v !== 1 ||\n      data.session !== session.id\n    ) {\n      return;\n    }\n    const payload = Object(data.payload);\n    if (data.type === \"ready\" || data.type === \"step\") {\n      if (data.type === \"ready\") {\n        ready = true;\n        frame.focus();\n        if (options.theme) {\n          post(\"theme\", options.theme);\n        }\n      }\n      paying = payload.paying === true;\n      if (typeof payload.step === \"string\") {\n        options.onStep?.(payload.step, paying);\n      }\n    } else if (data.type === \"resize\" && Number.isFinite(payload.height)) {\n      height = payload.height;\n      layout();\n    } else if (data.type === \"completed\") {\n      checkout\n        .awaitCompletion(session.id, { signal: abort.signal, intervalMs: 1500 })\n        .then(\n          (done) => {\n            if (done.status === \"completed\") {\n              finished.add(session.id);\n              finish({ status: \"completed\", orderId: done.order_id });\n            } else {\n              finish({ status: \"cancelled\", reason: done.status });\n            }\n          },\n          () => {},\n        );\n    } else if (data.type === \"cancelled\" || data.type === \"error\") {\n      finish({\n        status: \"cancelled\",\n        reason: String(payload.reason ?? payload.code ?? \"user\"),\n      });\n    }\n  };\n\n  let start = 0;\n  handle.onpointerdown = (event) => {\n    if (paying) {\n      return;\n    }\n    start = event.clientY;\n    handle.setPointerCapture?.(event.pointerId);\n  };\n  handle.onpointermove = (event) => {\n    if (start) {\n      panel.style.transform = `translateY(${Math.max(0, event.clientY - start)}px)`;\n    }\n  };\n  handle.onpointerup = handle.onpointercancel = (event) => {\n    const moved = start ? event.clientY - start : 0;\n    start = 0;\n    panel.style.transform = \"\";\n    if (!paying && moved > panel.offsetHeight / 4) {\n      finish({ status: \"cancelled\", reason: \"user\" });\n    }\n  };\n\n  history.pushState(\n    { ...history.state, [PARAM]: session.id },\n    \"\",\n    (() => {\n      const here = new URL(location.href);\n      here.searchParams.set(PARAM, session.id);\n      return here;\n    })(),\n  );\n  addEventListener(\"message\", onMessage);\n  addEventListener(\"popstate\", onPop);\n  addEventListener(\"keydown\", onKey);\n  vv?.addEventListener(\"resize\", layout);\n  vv?.addEventListener(\"scroll\", layout);\n  inert.forEach((el) => (el.inert = true));\n  history.scrollRestoration = \"manual\";\n  body.style.cssText += `;position:fixed;top:${-y}px;left:0;right:0;overflow:hidden`;\n  body.append(root);\n  layout();\n  if (!still) {\n    panel.animate?.(\n      sheet\n        ? [{ transform: \"translateY(100%)\" }, { transform: \"none\" }]\n        : [{ opacity: 0 }, { opacity: 1 }],\n      { duration: sheet ? 280 : 160, easing: \"cubic-bezier(.2,.8,.2,1)\" },\n    );\n  }\n  request = close;\n  return new Promise((resolve) => (settle = resolve));\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/checkout/react.d.ts

@@ -0,0 +1,150 @@
+import { WireLine, WireMoney } from '@zappie/sdk';
+
+/**
+ * Address fields you can send with a delivery checkout request.
+ */
+type CheckoutAddress = {
+    line1?: string;
+    city?: string;
+    place_id?: string;
+    lat?: number;
+    lng?: number;
+};
+/**
+ * Pickup or delivery details for a checkout session, including an optional schedule.
+ */
+type CheckoutFulfilment = {
+    /** Dine-in orders are not checked out through a session. */
+    type: "pickup" | "delivery";
+    address?: CheckoutAddress;
+    scheduled_for?: string | null;
+    delivery_region_id?: string;
+    instructions?: string;
+};
+/**
+ * Cart lines, branch, fulfilment and return URLs you send to open checkout.
+ */
+type CheckoutRequest = {
+    branch_id: string;
+    menu_version: string;
+    lines: WireLine[];
+    fulfilment: CheckoutFulfilment;
+    contact_phone?: string;
+    promo_code?: string;
+    return_url: string;
+    cancel_url?: string;
+    source?: string;
+    campaign?: string;
+};
+/**
+ * A checkout session returned by the service, with its amount, expiry and order status.
+ */
+type CheckoutSession = {
+    id: string;
+    status: "open" | "completed" | "expired" | "cancelled";
+    url?: string;
+    amount: WireMoney;
+    order_id: string | null;
+    return_url: string;
+    cancel_url?: string;
+    expires_at: string;
+};
+/**
+ * A checkout session with a payment URL you can use to send the shopper to checkout.
+ */
+type OpenCheckoutSession = CheckoutSession & {
+    url: string;
+};
+/**
+ * A terminal checkout result: a completed order, an expired session or a cancelled session.
+ */
+type CheckoutCompletion = (CheckoutSession & {
+    status: "completed";
+    order_id: string;
+}) | (CheckoutSession & {
+    status: "expired" | "cancelled";
+});
+/**
+ * Optional customer API base URL and fetch implementation for the checkout client.
+ */
+type CheckoutClientOptions = {
+    customerBase?: string;
+    fetch?: typeof fetch;
+};
+/**
+ * Cancellation signal and polling interval in milliseconds for awaiting checkout completion.
+ */
+type AwaitCompletionOptions = {
+    signal?: AbortSignal;
+    intervalMs?: number;
+};
+
+/**
+ * Create a client that opens checkout sessions, reads them and polls for completion.
+ *
+ * @param options - Override the default `/_zappie/api` base or fetch implementation.
+ * @returns A checkout client. Retain each idempotency key when retrying the same cart.
+ */
+declare function createCheckout(options?: CheckoutClientOptions): {
+    /** The caller retains this key and reuses it when retrying the same cart. */
+    open(body: CheckoutRequest, idempotencyKey: string): Promise<OpenCheckoutSession>;
+    session(id: string): Promise<CheckoutSession>;
+    awaitCompletion(id: string, options?: AwaitCompletionOptions): Promise<CheckoutCompletion>;
+};
+/**
+ * The session creation, lookup and completion methods returned by createCheckout.
+ */
+type CheckoutClient = ReturnType<typeof createCheckout>;
+
+/** How checkout opens. Auto redirects in in-app browsers and framed pages, else a modal on desktop and a sheet on mobile. */
+type CheckoutPresentation = "auto" | "modal" | "sheet" | "fullscreen" | "redirect";
+/** The checkout look from toCheckoutTheme in @zappie/tokens/checkout. The checkout validates it before use. */
+type CheckoutTheme = {
+    version: 1;
+    tokens: Partial<Record<`--z-${string}`, string>>;
+    logo?: {
+        url: string;
+        alt: string;
+    };
+    fonts?: {
+        family: string;
+        role: "body" | "display";
+        weights?: number[];
+    }[];
+    copy?: {
+        payButton?: string;
+        successTitle?: string;
+    };
+};
+/** Presentation, theme and step reporting for an embedded checkout. */
+type EmbedOptions = {
+    presentation?: CheckoutPresentation;
+    theme?: CheckoutTheme;
+    /** Called with each checkout step, and whether a payment has started. */
+    onStep?: (step: string, paying: boolean) => void;
+};
+/** How an embedded checkout ended. A completed result is confirmed by the server first. */
+type CheckoutResult = {
+    status: "completed";
+    orderId: string;
+} | {
+    status: "cancelled";
+    reason: string;
+} | {
+    status: "redirected";
+};
+/** Ask the open checkout to close. Mid-payment it asks the shopper first. */
+declare function closeCheckout(): void;
+
+/**
+ * Open checkout for a cart and follow it. `open` creates the session, then embeds or redirects it as
+ * `presentation` decides, and resolves with how it ended. Retain the idempotency key when retrying a cart.
+ */
+declare function useCheckout(checkout: CheckoutClient): {
+    open: (body: CheckoutRequest, key: string, options?: EmbedOptions) => Promise<CheckoutResult>;
+    close: typeof closeCheckout;
+    status: "open" | "completed" | "cancelled" | "redirected" | "idle" | "opening";
+    step: string | undefined;
+};
+
+export { useCheckout };

package/dist/checkout/react.js

@@ -0,0 +1,39 @@
+"use client";
+
+// src/checkout/react.ts
+import { useCallback, useState } from "react";
+import {
+  closeCheckout,
+  embedCheckout
+} from "./embed.js";
+function useCheckout(checkout) {
+  const [status, setStatus] = useState("idle");
+  const [step, setStep] = useState();
+  const open = useCallback(
+    async (body, key, options = {}) => {
+      setStatus("opening");
+      try {
+        const session = await checkout.open(body, key);
+        setStatus("open");
+        const result = await embedCheckout(checkout, session, {
+          ...options,
+          onStep: (next, paying) => {
+            setStep(next);
+            options.onStep?.(next, paying);
+          }
+        });
+        setStatus(result.status);
+        return result;
+      } catch (failure) {
+        setStatus("idle");
+        throw failure;
+      }
+    },
+    [checkout]
+  );
+  return { open, close: closeCheckout, status, step };
+}
+export {
+  useCheckout
+};
+//# sourceMappingURL=react.js.map

package/dist/checkout/react.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/checkout/react.ts"],
+  "sourcesContent": ["\"use client\";\nimport { useCallback, useState } from \"react\";\nimport type { CheckoutClient } from \"./client\";\nimport {\n  closeCheckout,\n  embedCheckout,\n  type CheckoutResult,\n  type EmbedOptions,\n} from \"./embed\";\nimport type { CheckoutRequest } from \"./types\";\n\n/**\n * Open checkout for a cart and follow it. `open` creates the session, then embeds or redirects it as\n * `presentation` decides, and resolves with how it ended. Retain the idempotency key when retrying a cart.\n */\nexport function useCheckout(checkout: CheckoutClient) {\n  const [status, setStatus] = useState<\n    \"idle\" | \"opening\" | \"open\" | CheckoutResult[\"status\"]\n  >(\"idle\");\n  const [step, setStep] = useState<string>();\n  const open = useCallback(\n    async (body: CheckoutRequest, key: string, options: EmbedOptions = {}) => {\n      setStatus(\"opening\");\n      try {\n        const session = await checkout.open(body, key);\n        setStatus(\"open\");\n        const result = await embedCheckout(checkout, session, {\n          ...options,\n          onStep: (next, paying) => {\n            setStep(next);\n            options.onStep?.(next, paying);\n          },\n        });\n        setStatus(result.status);\n        return result;\n      } catch (failure) {\n        setStatus(\"idle\");\n        throw failure;\n      }\n    },\n    [checkout],\n  );\n  return { open, close: closeCheckout, status, step };\n}\n"],
+  "mappings": ";;;AACA,SAAS,aAAa,gBAAgB;AAEtC;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAOA,SAAS,YAAY,UAA0B;AACpD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAE1B,MAAM;AACR,QAAM,CAAC,MAAM,OAAO,IAAI,SAAiB;AACzC,QAAM,OAAO;AAAA,IACX,OAAO,MAAuB,KAAa,UAAwB,CAAC,MAAM;AACxE,gBAAU,SAAS;AACnB,UAAI;AACF,cAAM,UAAU,MAAM,SAAS,KAAK,MAAM,GAAG;AAC7C,kBAAU,MAAM;AAChB,cAAM,SAAS,MAAM,cAAc,UAAU,SAAS;AAAA,UACpD,GAAG;AAAA,UACH,QAAQ,CAAC,MAAM,WAAW;AACxB,oBAAQ,IAAI;AACZ,oBAAQ,SAAS,MAAM,MAAM;AAAA,UAC/B;AAAA,QACF,CAAC;AACD,kBAAU,OAAO,MAAM;AACvB,eAAO;AAAA,MACT,SAAS,SAAS;AAChB,kBAAU,MAAM;AAChB,cAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AACA,SAAO,EAAE,MAAM,OAAO,eAAe,QAAQ,KAAK;AACpD;",
+  "names": []
+}

package/dist/debug.js

@@ -1,5 +1,5 @@
 // src/debug.ts
-var VERSION = true ? "0.1.17" : "0.0.0-development";
+var VERSION = true ? "0.1.19" : "0.0.0-development";
 function installDebug(client) {
   if (typeof window === "undefined" || client.mode !== "test") {
     return;

package/dist/index.js

@@ -10,7 +10,7 @@ import { ZappieError, isZappieError } from "./errors.js";
 export * from "./models.js";
 import { format, money } from "./money.js";
 import { RestTransport } from "./transport/rest.js";
-var VERSION = true ? "0.1.17" : "0.0.0-development";
+var VERSION = true ? "0.1.19" : "0.0.0-development";
 export {
   API_VERSION,
   RestTransport,

package/dist/studio/index.d.ts

@@ -0,0 +1,39 @@
+/** The editors in `EDITOR_ORIGINS` allowed to drive region selection: the merchant dashboard and its dev server. */
+declare const STUDIO_ORIGINS: readonly string[];
+/** Merchant-facing names for the Zappie kit's components, so kit files keep their hashes. */
+declare const KIT_REGION_NAMES: Readonly<Record<string, string>>;
+/** A region the merchant selected, as the preview posts it to Studio. */
+type StudioRegion = {
+    zappie: "region";
+    /** Where the region is rendered, as `app/…:line`. */
+    source: string;
+    /** The function component that holds it, or an empty string. */
+    component: string;
+    /** The merchant-facing name. Never a path. */
+    name: string;
+    /** Up to five distinct `source` values of enclosing regions, nearest first. */
+    ancestry: string[];
+    /** The region's box in CSS pixels, relative to the viewport. */
+    rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    scrollY: number;
+    /** The page path and query. */
+    path: string;
+};
+/**
+ * The merchant-facing name of a region: its own or an enclosing `data-zappie-region` within the same component, then
+ * the kit's name for its component, then the component name made readable, then the element's role.
+ */
+declare function regionName(element: Element): string;
+/**
+ * Start the Studio region selector for an editor at `parent`, which must be in `STUDIO_ORIGINS`. It draws nothing until
+ * the editor sends `{ zappie: "select", on: true }`, and posts `region` and `select-cancel` through `post`. Returns a
+ * function that removes it, or null when `parent` isn't a Studio editor.
+ */
+declare function startStudio(parent: string, post: (message: object) => void): (() => void) | null;
+
+export { KIT_REGION_NAMES, STUDIO_ORIGINS, type StudioRegion, regionName, startStudio };

package/dist/studio/index.js

@@ -0,0 +1,314 @@
+// src/studio/index.ts
+import { EDITOR_ORIGINS } from "../template/index.js";
+var STUDIO_ORIGINS = Object.freeze(
+  EDITOR_ORIGINS.filter(
+    (origin) => /^https:\/\/dashboard\.|\/\/localhost:5181$/.test(origin)
+  )
+);
+var SOURCE = "data-zappie-source";
+var COMPONENT = "data-zappie-component";
+var REGION = "data-zappie-region";
+var KIT_REGION_NAMES = {
+  Account: "Account",
+  AccountPage: "Account",
+  AddressPicker: "Delivery address",
+  CartButton: "Cart button",
+  CartCheckoutLink: "Checkout button",
+  CartDrawer: "Cart",
+  CartIssueList: "Cart notices",
+  CartLine: "Cart item",
+  CartTotals: "Cart totals",
+  CategoryNav: "Categories",
+  CheckoutButton: "Checkout button",
+  CheckoutPage: "Checkout",
+  CheckoutReturn: "Payment result",
+  Consent: "Cookie notice",
+  FulfilmentSwitch: "Delivery or pickup",
+  ItemCard: "Menu item",
+  ItemChoice: "Item option",
+  ItemConfiguration: "Item options",
+  ItemOptions: "Item options",
+  ItemSheet: "Item details",
+  Logo: "Logo",
+  MenuPage: "Menu",
+  Money: "Price",
+  OpenStatus: "Opening hours",
+  OrderPage: "Order",
+  OrderStatus: "Order status",
+  Orders: "Orders",
+  OrdersPage: "Orders",
+  Quantity: "Quantity",
+  SchedulePicker: "Order time",
+  Search: "Search",
+  SearchRow: "Search result",
+  SignInButton: "Sign in button",
+  StoreFooter: "Shop footer",
+  StoreHeader: "Shop header",
+  ZappieProvider: "Page"
+};
+var cap = (text, length) => [...text].slice(0, length).join("");
+var read = (element, name) => element.getAttribute(name) ?? "";
+function regionOf(target) {
+  const found = target?.closest(`[${SOURCE}]`);
+  return found && found !== document.documentElement && found !== document.body ? found : null;
+}
+function regionName(element) {
+  const component = read(element, COMPONENT);
+  for (let at = element; at && (!at.hasAttribute(COMPONENT) || read(at, COMPONENT) === component); at = at.parentElement) {
+    const name2 = at.getAttribute(REGION)?.trim();
+    if (name2) {
+      return cap(name2, 60);
+    }
+  }
+  const words = component.replace(/\B(?=[A-Z])/g, " ").toLowerCase();
+  const name = KIT_REGION_NAMES[component] ?? (words && words[0].toUpperCase() + words.slice(1));
+  if (name) {
+    return cap(name, 60);
+  }
+  const tag = element.localName;
+  return /^(img|picture|svg|video)$/.test(tag) ? "Image" : tag === "button" || element.getAttribute("role") === "button" ? "Button" : /^h[1-6]$/.test(tag) ? "Heading" : tag === "a" ? "Link" : "Section";
+}
+function ancestry(element) {
+  const own = read(element, SOURCE);
+  const sources = [];
+  for (let at = regionOf(element.parentElement); at && sources.length < 5; at = regionOf(at.parentElement)) {
+    const source = read(at, SOURCE);
+    if (source !== own && !sources.includes(source)) {
+      sources.push(source);
+    }
+  }
+  return sources;
+}
+var shown = (element) => {
+  const box = element.getBoundingClientRect();
+  return box.width > 0 && box.height > 0;
+};
+function regionStops() {
+  const stops = /* @__PURE__ */ new Set();
+  for (const element of document.querySelectorAll(`[${SOURCE}]`)) {
+    const stop = element.closest(`[${REGION}]`) ?? element;
+    if (regionOf(stop) === stop && shown(stop)) {
+      stops.add(stop);
+    }
+  }
+  return [...stops];
+}
+var CSS = ".b{position:fixed;left:0;top:0;box-sizing:border-box;border:2px solid #101828;border-radius:2px;box-shadow:0 0 0 2px #fff,inset 0 0 0 2px #fff}.b[hidden]{display:none}.s{border-width:3px}.l{position:absolute;left:-2px;bottom:100%;margin-bottom:4px;padding:2px 6px;border-radius:4px;background:#101828;color:#fff;box-shadow:0 0 0 1px #fff;font:600 12px/1.5 system-ui,sans-serif;white-space:nowrap}.t .l{bottom:auto;top:100%;margin:4px 0 0}.v{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}";
+var CAPTURED = [
+  "pointerdown",
+  "pointerup",
+  "mousedown",
+  "mouseup",
+  "click",
+  "auxclick",
+  "dblclick"
+];
+function startStudio(parent, post) {
+  if (!STUDIO_ORIGINS.includes(parent)) {
+    return null;
+  }
+  const host = document.createElement("div");
+  host.style.cssText = "position:fixed;inset:0;pointer-events:none;z-index:2147483647";
+  const root = host.attachShadow({ mode: "open" });
+  const make = (tag, name) => {
+    const element = document.createElement(tag);
+    element.className = name;
+    return element;
+  };
+  const style = make("style", "");
+  style.textContent = CSS;
+  const box = make("div", "b");
+  box.hidden = true;
+  const label = box.appendChild(make("span", "l"));
+  const live = make("div", "v");
+  live.setAttribute("aria-live", "polite");
+  for (const part of [style, box, live]) {
+    root.appendChild(part);
+  }
+  document.body.appendChild(host);
+  let on = false;
+  let selected = false;
+  let current = null;
+  let hovered = null;
+  let down = [];
+  let pointer = null;
+  let frame = 0;
+  let drawn = "";
+  const highlight = (element, announce = false) => {
+    current = element;
+    drawn = "";
+    if (element) {
+      label.textContent = regionName(element);
+      if (announce) {
+        live.textContent = label.textContent;
+      }
+    }
+  };
+  const draw = () => {
+    frame = requestAnimationFrame(draw);
+    if (pointer && !selected) {
+      const element = regionOf(document.elementFromPoint(...pointer));
+      pointer = null;
+      if (element !== hovered) {
+        hovered = element;
+        down = [];
+        highlight(element);
+      }
+    }
+    if (current && !current.isConnected) {
+      current = null;
+    }
+    if (!current) {
+      box.hidden = true;
+      return;
+    }
+    const { x, y, width, height } = current.getBoundingClientRect();
+    const key2 = `${x} ${y} ${width} ${height}`;
+    if (key2 === drawn) {
+      return;
+    }
+    drawn = key2;
+    box.hidden = false;
+    box.classList.toggle("t", y < 24);
+    box.style.transition = matchMedia("(prefers-reduced-motion: reduce)").matches ? "none" : "transform 100ms";
+    box.style.transform = `translate(${x}px,${y}px)`;
+    box.style.width = `${width}px`;
+    box.style.height = `${height}px`;
+  };
+  const choose = (element) => {
+    if (!element) {
+      return;
+    }
+    selected = true;
+    highlight(element);
+    box.classList.add("s");
+    live.textContent = `Selected ${label.textContent}`;
+    const { x, y, width, height } = element.getBoundingClientRect();
+    post({
+      zappie: "region",
+      source: read(element, SOURCE),
+      component: cap(read(element, COMPONENT), 80),
+      name: regionName(element),
+      ancestry: ancestry(element),
+      rect: { x, y, width, height },
+      scrollY: window.scrollY,
+      path: location.pathname + location.search
+    });
+  };
+  const step = (up) => {
+    if (!current) {
+      return false;
+    }
+    let next;
+    if (up) {
+      const own = read(current, SOURCE);
+      next = regionOf(current.parentElement);
+      while (next && read(next, SOURCE) === own) {
+        next = regionOf(next.parentElement);
+      }
+      if (next) {
+        down.push(current);
+      }
+    } else {
+      next = down.pop() ?? [...current.querySelectorAll(`[${SOURCE}]`)].find(
+        (element) => read(element, SOURCE) !== read(current, SOURCE) && shown(element)
+      );
+    }
+    if (next) {
+      highlight(next, true);
+    }
+    return Boolean(next);
+  };
+  const capture = (event) => {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    if (event.type === "click" && !selected) {
+      const target = event.target;
+      choose(current?.contains(target) ? current : regionOf(target));
+    }
+  };
+  const move = (event) => {
+    pointer = [event.clientX, event.clientY];
+  };
+  const wheel = (event) => {
+    if (event.altKey && !selected && step(event.deltaY < 0)) {
+      event.preventDefault();
+    }
+  };
+  const key = (event) => {
+    let handled = true;
+    if (event.key === "Escape") {
+      stop();
+      post({ zappie: "select-cancel" });
+    } else if (selected) {
+      handled = false;
+    } else if (event.key === "Tab") {
+      const stops = regionStops();
+      const at = current ? stops.indexOf(current.closest(`[${REGION}]`) ?? current) : -1;
+      const next = stops[(at + (event.shiftKey ? at < 0 ? 0 : -1 : 1) + stops.length) % stops.length];
+      down = [];
+      highlight(next ?? null, true);
+      next?.scrollIntoView?.({ block: "nearest" });
+    } else if (event.key === "Enter" || event.key === " ") {
+      choose(current);
+    } else if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+      handled = step(event.key === "ArrowUp");
+    } else {
+      handled = false;
+    }
+    if (handled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  };
+  const listen = (add) => {
+    const method = (add ? window.addEventListener : window.removeEventListener).bind(window);
+    for (const type of CAPTURED) {
+      method(type, capture, true);
+    }
+    method("pointermove", move, true);
+    method("keydown", key, true);
+    method("wheel", wheel, { capture: true, passive: false });
+  };
+  const stop = () => {
+    if (on) {
+      on = false;
+      listen(false);
+      cancelAnimationFrame(frame);
+    }
+    selected = false;
+    hovered = null;
+    down = [];
+    highlight(null);
+    box.hidden = true;
+    box.classList.remove("s");
+  };
+  const start = () => {
+    stop();
+    on = true;
+    listen(true);
+    draw();
+  };
+  const message = (event) => {
+    const data = event.data;
+    if (event.origin === parent && event.source === window.parent && data?.zappie === "select" && typeof data.on === "boolean") {
+      if (data.on) {
+        start();
+      } else {
+        stop();
+      }
+    }
+  };
+  window.addEventListener("message", message);
+  return () => {
+    stop();
+    window.removeEventListener("message", message);
+    host.remove();
+  };
+}
+export {
+  KIT_REGION_NAMES,
+  STUDIO_ORIGINS,
+  regionName,
+  startStudio
+};

package/dist/template/react.js

@@ -65,7 +65,26 @@ function TemplateSettingsProvider({
     send({ zappie: "ready" });
     route();
     scroll();
+    let live = true;
+    let studio = null;
+    if (mode === "draft") {
+      if (import.meta.env.DEV && document.querySelector("[data-zappie-source]")) {
+        import("@zappie/sdk/studio").then(
+          ({ startStudio }) => {
+            if (live) {
+              studio = startStudio(parent, send);
+              send({ zappie: "selectable", on: Boolean(studio) });
+            }
+          },
+          () => send({ zappie: "selectable", on: false })
+        );
+      } else {
+        send({ zappie: "selectable", on: false });
+      }
+    }
     return () => {
+      live = false;
+      studio?.();
       window.removeEventListener("message", message);
       window.removeEventListener("popstate", route);
       window.removeEventListener("scroll", scroll);

package/dist/template/react.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/template/react.tsx"],
-  "sourcesContent": ["\"use client\";\nimport { useStore } from \"@zappie/sdk/react\";\nimport {\n  editorOrigin,\n  settingsFromMessage,\n  templateSettings,\n  type TemplateMode,\n  type TemplateSettingValue,\n} from \"@zappie/sdk/template\";\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from \"react\";\n\nconst Context = createContext<{\n  mode: TemplateMode;\n  preview: Record<string, TemplateSettingValue> | null;\n}>({ mode: \"site\", preview: null });\n\n/** Supply the host-controlled template mode and editor bridge to a storefront. */\nexport function TemplateSettingsProvider({\n  mode,\n  children,\n}: {\n  mode: TemplateMode;\n  children: ReactNode;\n}) {\n  const [preview, setPreview] = useState<Record<\n    string,\n    TemplateSettingValue\n  > | null>(null);\n  useEffect(() => {\n    setPreview(null);\n    if (mode === \"site\") {\n      return;\n    }\n    if (window.parent === window) {\n      return;\n    }\n    // Talk only to an allowed Zappie editor framing this page. Anything else gets silence.\n    const parent = editorOrigin(location.ancestorOrigins, document.referrer);\n    if (!parent) {\n      return;\n    }\n    const send = (message: object) =>\n      window.parent.postMessage(message, parent);\n    const route = () =>\n      send({ zappie: \"route\", path: location.pathname + location.search });\n    const scroll = () =>\n      send({\n        zappie: \"scroll\",\n        y: window.scrollY,\n        height: document.documentElement.scrollHeight,\n      });\n    const message = (event: MessageEvent) => {\n      if (event.origin !== parent || event.source !== window.parent) {\n        return;\n      }\n      const values = settingsFromMessage(event.data);\n      if (values) {\n        setPreview(values);\n      }\n    };\n    const pushState = history.pushState;\n    const replaceState = history.replaceState;\n    history.pushState = function (...args) {\n      pushState.apply(this, args);\n      route();\n    };\n    history.replaceState = function (...args) {\n      replaceState.apply(this, args);\n      route();\n    };\n    window.addEventListener(\"message\", message);\n    window.addEventListener(\"popstate\", route);\n    window.addEventListener(\"scroll\", scroll, { passive: true });\n    send({ zappie: \"ready\" });\n    route();\n    scroll();\n    return () => {\n      window.removeEventListener(\"message\", message);\n      window.removeEventListener(\"popstate\", route);\n      window.removeEventListener(\"scroll\", scroll);\n      history.pushState = pushState;\n      history.replaceState = replaceState;\n    };\n  }, [mode]);\n  const value = useMemo(() => ({ mode, preview }), [mode, preview]);\n  return <Context.Provider value={value}>{children}</Context.Provider>;\n}\n\n/** Read effective merchant settings over the defaults declared by a template. */\nexport function useTemplateSettings<T extends Record<string, unknown>>(\n  defaults: T,\n): T {\n  const store = useStore();\n  const { mode, preview } = useContext(Context);\n  return templateSettings(\n    defaults,\n    store.data?.templateSettings,\n    preview,\n    mode,\n  );\n}\n"],
-  "mappings": ";;;AACA,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA4EE;AA1ET,IAAM,UAAU,cAGb,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAG3B,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,SAAS,UAAU,IAAI,SAGpB,IAAI;AACd,YAAU,MAAM;AACd,eAAW,IAAI;AACf,QAAI,SAAS,QAAQ;AACnB;AAAA,IACF;AACA,QAAI,OAAO,WAAW,QAAQ;AAC5B;AAAA,IACF;AAEA,UAAM,SAAS,aAAa,SAAS,iBAAiB,SAAS,QAAQ;AACvE,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AACA,UAAM,OAAO,CAACA,aACZ,OAAO,OAAO,YAAYA,UAAS,MAAM;AAC3C,UAAM,QAAQ,MACZ,KAAK,EAAE,QAAQ,SAAS,MAAM,SAAS,WAAW,SAAS,OAAO,CAAC;AACrE,UAAM,SAAS,MACb,KAAK;AAAA,MACH,QAAQ;AAAA,MACR,GAAG,OAAO;AAAA,MACV,QAAQ,SAAS,gBAAgB;AAAA,IACnC,CAAC;AACH,UAAM,UAAU,CAAC,UAAwB;AACvC,UAAI,MAAM,WAAW,UAAU,MAAM,WAAW,OAAO,QAAQ;AAC7D;AAAA,MACF;AACA,YAAM,SAAS,oBAAoB,MAAM,IAAI;AAC7C,UAAI,QAAQ;AACV,mBAAW,MAAM;AAAA,MACnB;AAAA,IACF;AACA,UAAM,YAAY,QAAQ;AAC1B,UAAM,eAAe,QAAQ;AAC7B,YAAQ,YAAY,YAAa,MAAM;AACrC,gBAAU,MAAM,MAAM,IAAI;AAC1B,YAAM;AAAA,IACR;AACA,YAAQ,eAAe,YAAa,MAAM;AACxC,mBAAa,MAAM,MAAM,IAAI;AAC7B,YAAM;AAAA,IACR;AACA,WAAO,iBAAiB,WAAW,OAAO;AAC1C,WAAO,iBAAiB,YAAY,KAAK;AACzC,WAAO,iBAAiB,UAAU,QAAQ,EAAE,SAAS,KAAK,CAAC;AAC3D,SAAK,EAAE,QAAQ,QAAQ,CAAC;AACxB,UAAM;AACN,WAAO;AACP,WAAO,MAAM;AACX,aAAO,oBAAoB,WAAW,OAAO;AAC7C,aAAO,oBAAoB,YAAY,KAAK;AAC5C,aAAO,oBAAoB,UAAU,MAAM;AAC3C,cAAQ,YAAY;AACpB,cAAQ,eAAe;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AACT,QAAM,QAAQ,QAAQ,OAAO,EAAE,MAAM,QAAQ,IAAI,CAAC,MAAM,OAAO,CAAC;AAChE,SAAO,oBAAC,QAAQ,UAAR,EAAiB,OAAe,UAAS;AACnD;AAGO,SAAS,oBACd,UACG;AACH,QAAM,QAAQ,SAAS;AACvB,QAAM,EAAE,MAAM,QAAQ,IAAI,WAAW,OAAO;AAC5C,SAAO;AAAA,IACL;AAAA,IACA,MAAM,MAAM;AAAA,IACZ;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["\"use client\";\nimport { useStore } from \"@zappie/sdk/react\";\nimport {\n  editorOrigin,\n  settingsFromMessage,\n  templateSettings,\n  type TemplateMode,\n  type TemplateSettingValue,\n} from \"@zappie/sdk/template\";\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from \"react\";\n\nconst Context = createContext<{\n  mode: TemplateMode;\n  preview: Record<string, TemplateSettingValue> | null;\n}>({ mode: \"site\", preview: null });\n\n/** Supply the host-controlled template mode and editor bridge to a storefront. */\nexport function TemplateSettingsProvider({\n  mode,\n  children,\n}: {\n  mode: TemplateMode;\n  children: ReactNode;\n}) {\n  const [preview, setPreview] = useState<Record<\n    string,\n    TemplateSettingValue\n  > | null>(null);\n  useEffect(() => {\n    setPreview(null);\n    if (mode === \"site\") {\n      return;\n    }\n    if (window.parent === window) {\n      return;\n    }\n    // Talk only to an allowed Zappie editor framing this page. Anything else gets silence.\n    const parent = editorOrigin(location.ancestorOrigins, document.referrer);\n    if (!parent) {\n      return;\n    }\n    const send = (message: object) =>\n      window.parent.postMessage(message, parent);\n    const route = () =>\n      send({ zappie: \"route\", path: location.pathname + location.search });\n    const scroll = () =>\n      send({\n        zappie: \"scroll\",\n        y: window.scrollY,\n        height: document.documentElement.scrollHeight,\n      });\n    const message = (event: MessageEvent) => {\n      if (event.origin !== parent || event.source !== window.parent) {\n        return;\n      }\n      const values = settingsFromMessage(event.data);\n      if (values) {\n        setPreview(values);\n      }\n    };\n    const pushState = history.pushState;\n    const replaceState = history.replaceState;\n    history.pushState = function (...args) {\n      pushState.apply(this, args);\n      route();\n    };\n    history.replaceState = function (...args) {\n      replaceState.apply(this, args);\n      route();\n    };\n    window.addEventListener(\"message\", message);\n    window.addEventListener(\"popstate\", route);\n    window.addEventListener(\"scroll\", scroll, { passive: true });\n    send({ zappie: \"ready\" });\n    route();\n    scroll();\n    let live = true;\n    let studio: (() => void) | null = null;\n    if (mode === \"draft\") {\n      // Only the Studio dev server marks sources. A build drops this branch, so no published page loads the selector.\n      if (\n        (import.meta as unknown as { env: { DEV: boolean } }).env.DEV &&\n        document.querySelector(\"[data-zappie-source]\")\n      ) {\n        import(\"@zappie/sdk/studio\").then(\n          ({ startStudio }) => {\n            if (live) {\n              studio = startStudio(parent, send);\n              send({ zappie: \"selectable\", on: Boolean(studio) });\n            }\n          },\n          () => send({ zappie: \"selectable\", on: false }),\n        );\n      } else {\n        send({ zappie: \"selectable\", on: false });\n      }\n    }\n    return () => {\n      live = false;\n      studio?.();\n      window.removeEventListener(\"message\", message);\n      window.removeEventListener(\"popstate\", route);\n      window.removeEventListener(\"scroll\", scroll);\n      history.pushState = pushState;\n      history.replaceState = replaceState;\n    };\n  }, [mode]);\n  const value = useMemo(() => ({ mode, preview }), [mode, preview]);\n  return <Context.Provider value={value}>{children}</Context.Provider>;\n}\n\n/** Read effective merchant settings over the defaults declared by a template. */\nexport function useTemplateSettings<T extends Record<string, unknown>>(\n  defaults: T,\n): T {\n  const store = useStore();\n  const { mode, preview } = useContext(Context);\n  return templateSettings(\n    defaults,\n    store.data?.templateSettings,\n    preview,\n    mode,\n  );\n}\n"],
+  "mappings": "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",
   "names": ["message"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zappie/sdk",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "description": "Typed, framework-agnostic client for Zappie menus, carts, checkout, auth and events.",
   "type": "module",
   "sideEffects": false,
@@ -49,6 +49,14 @@
       "types": "./dist/checkout/index.d.ts",
       "import": "./dist/checkout/index.js"
     },
+    "./checkout/embed": {
+      "types": "./dist/checkout/embed.d.ts",
+      "import": "./dist/checkout/embed.js"
+    },
+    "./checkout/react": {
+      "types": "./dist/checkout/react.d.ts",
+      "import": "./dist/checkout/react.js"
+    },
     "./checkout-defaults": {
       "types": "./dist/checkout-defaults/index.d.ts",
       "import": "./dist/checkout-defaults/index.js"
@@ -81,6 +89,10 @@
       "types": "./dist/template/react.d.ts",
       "import": "./dist/template/react.js"
     },
+    "./studio": {
+      "types": "./dist/studio/index.d.ts",
+      "import": "./dist/studio/index.js"
+    },
     "./persist/catalogue": {
       "types": "./dist/persist/catalogue.d.ts",
       "import": "./dist/persist/catalogue.js"
@@ -121,7 +133,7 @@
     "url": "https://github.com/zappie/storefront-packages/issues"
   },
   "scripts": {
-    "build": "tsup && tsup --config tsup.checkout.config.ts && tsup --config tsup.checkout-defaults.config.ts && tsup --config tsup.customer.config.ts && tsup --config tsup.places.config.ts && tsup --config tsup.url.config.ts && tsup --config tsup.redirect.config.ts && tsup --config tsup.visits.config.ts && tsup --config tsup.pricing.config.ts && tsup --config tsup.site-config.config.ts && tsup --config tsup.template.config.ts && node ../../scripts/release-packages/build-modules.mjs",
+    "build": "tsup && tsup --config tsup.checkout.config.ts && tsup --config tsup.checkout-defaults.config.ts && tsup --config tsup.customer.config.ts && tsup --config tsup.places.config.ts && tsup --config tsup.url.config.ts && tsup --config tsup.redirect.config.ts && tsup --config tsup.visits.config.ts && tsup --config tsup.pricing.config.ts && tsup --config tsup.site-config.config.ts && tsup --config tsup.template.config.ts && node ../../scripts/release-packages/build-modules.mjs --unmapped=studio/index.js",
     "test": "vitest run --root ../.. packages/sdk/test",
     "size": "node ../../scripts/release-packages/size-sdk.mjs && size-limit"
   }