@zappie/sdk 0.1.18 → 0.1.19

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

package/dist/debug.js

@@ -1,5 +1,5 @@
 // src/debug.ts
-var VERSION = true ? "0.1.18" : "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.18" : "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.18",
+  "version": "0.1.19",
   "description": "Typed, framework-agnostic client for Zappie menus, carts, checkout, auth and events.",
   "type": "module",
   "sideEffects": false,
@@ -89,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"
@@ -129,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"
   }