@grizzlee/react 0.0.0-stage → 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+## 0.1.1
+
+- Published from CI through npm trusted publishing. No code changes.
+
+## 0.1.0
+
+- First npm release.
+- `GrizzleeEmbed` hosts the partner dashboard in React.
+- `mountGrizzleeEmbed` hosts the partner dashboard in plain JavaScript.

package/README.md

@@ -1,3 +1,55 @@
-# Temporary Holding Version
+# Grizzlee embed hosts
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+`@grizzlee/react` exports `GrizzleeEmbed`, `mountGrizzleeEmbed`, `GrizzleeEmbedProps` and `GrizzleeEmbedOptions`. React 18 or later is a peer dependency. Install React in a component host. The peer is optional so a host using only `@grizzlee/react/embed` does not need React. There are no other runtime dependencies.
+
+```tsx
+import { GrizzleeEmbed } from "@grizzlee/react";
+
+async function newSession() {
+  const response = await fetch("/partner/embed-session", { method: "POST" });
+  if (!response.ok) throw new Error("Session creation failed");
+  const { url } = await response.json();
+  return url as string;
+}
+
+// Get startUrl from newSession before rendering.
+<GrizzleeEmbed url={startUrl} onSessionExpired={newSession} />;
+```
+
+`url` is an absolute HTTP or HTTPS URL minted by your server. Optional props are `onSessionExpired`, `onReady`, `title`, `className`, `style` and `minHeight`. `title` defaults to `"Partner dashboard"`. `minHeight` defaults to 320 CSS pixels and stays between 120 and 10,000. Resize messages must contain a positive safe integer. The iframe height stays between the minimum and 10,000 pixels. These bounds override `style.height` and `style.minHeight`.
+
+`onReady` runs when the partner summary loads, including after renewal. `onSessionExpired` can return a new URL directly or through a promise, or return nothing if you handle recovery yourself. Catch request errors in that callback to display them in your app. A rejected promise leaves the expired dashboard visible. Only one renewal runs at a time. Changing `url` loads a new session, and unmounting removes the listener and ignores pending renewal results.
+
+The component renders during server-side rendering without accessing `window` or `document`. It attaches its message listener after mounting. In Next.js App Router, render it from a client component when passing callbacks.
+
+For a host without React:
+
+```ts
+import { mountGrizzleeEmbed } from "@grizzlee/react/embed";
+
+const dashboard = mountGrizzleeEmbed(document.getElementById("dashboard")!, {
+  url: startUrl,
+  onSessionExpired: newSession,
+});
+
+// When the host view closes:
+dashboard.destroy();
+```
+
+The helper accepts the same options except `style`. It appends an iframe and returns `{ destroy() }`. Both hosts use `allow="clipboard-write"`, `referrerPolicy="no-referrer"` and `loading="lazy"`. They accept messages only from the current URL's origin and their own iframe window. Neither sets `sandbox`. If you add it to a plain iframe, include `allow-scripts allow-same-origin allow-downloads`. Without `allow-same-origin`, the exchange sends `Origin: null` and fails. Without `allow-downloads`, QR downloads fail.
+
+Create sessions on your backend with [@grizzlee/sdk](https://www.npmjs.com/package/@grizzlee/sdk) and pass the returned URL to the browser host. Browser hosts never need the server key or schema dependencies.
+
+## Install
+
+```sh
+npm install @grizzlee/react
+pnpm add @grizzlee/react
+yarn add @grizzlee/react
+```
+
+Requires Node >= 22. Both entry points support ESM and CommonJS with source maps and matching TypeScript declarations.
+
+## Versioning
+
+The package follows semver. While the version is 0.x, a minor bump may include breaking changes. See [CHANGELOG.md](CHANGELOG.md) for release notes.

package/embed.cjs

@@ -0,0 +1,117 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/react/src/embed.ts
+var embed_exports = {};
+__export(embed_exports, {
+  mountGrizzleeEmbed: () => mountGrizzleeEmbed
+});
+module.exports = __toCommonJS(embed_exports);
+
+// packages/react/src/host.ts
+var MAX_HEIGHT = 1e4;
+function minimumHeight(height = 320) {
+  return Number.isFinite(height) ? Math.min(MAX_HEIGHT, Math.max(120, Math.ceil(height))) : 320;
+}
+function embedUrl(url) {
+  const parsed = new URL(url);
+  if (!["https:", "http:"].includes(parsed.protocol) || parsed.username || parsed.password)
+    throw new Error(
+      "Use an absolute HTTP or HTTPS embed URL without credentials"
+    );
+  return parsed;
+}
+function listenToEmbed(frame, options) {
+  const hostWindow = frame.ownerDocument.defaultView;
+  if (!hostWindow)
+    throw new Error("The iframe must belong to a browser document");
+  let origin = embedUrl(options().url).origin;
+  let active = true;
+  let renewing = false;
+  const receive = (event) => {
+    if (!active || event.origin !== origin || !frame.contentWindow || event.source !== frame.contentWindow)
+      return;
+    const message = event.data;
+    if (!message || typeof message !== "object" || !("type" in message)) return;
+    switch (message.type) {
+      case "grizzlee:ready":
+        options().onReady?.();
+        break;
+      case "grizzlee:resize": {
+        if ("height" in message && typeof message.height === "number" && Number.isSafeInteger(message.height) && message.height > 0) {
+          const height = Math.min(
+            MAX_HEIGHT,
+            Math.max(minimumHeight(options().minHeight), message.height)
+          );
+          frame.style.height = `${height}px`;
+        }
+        break;
+      }
+      case "grizzlee:session_expired": {
+        const renew = options().onSessionExpired;
+        if (!renew || renewing) return;
+        renewing = true;
+        void (async () => {
+          try {
+            const url = await renew();
+            if (!active || !url) return;
+            const next = embedUrl(url);
+            origin = next.origin;
+            frame.style.height = `${minimumHeight(options().minHeight)}px`;
+            frame.src = next.href;
+          } catch {
+          } finally {
+            renewing = false;
+          }
+        })();
+        break;
+      }
+    }
+  };
+  hostWindow.addEventListener("message", receive);
+  return () => {
+    active = false;
+    hostWindow.removeEventListener("message", receive);
+  };
+}
+
+// packages/react/src/embed.ts
+function mountGrizzleeEmbed(container, options) {
+  const url = embedUrl(options.url);
+  const frame = container.ownerDocument.createElement("iframe");
+  frame.title = options.title ?? "Partner dashboard";
+  if (options.className) frame.className = options.className;
+  frame.allow = "clipboard-write";
+  frame.referrerPolicy = "no-referrer";
+  frame.loading = "lazy";
+  frame.style.width = "100%";
+  frame.style.border = "0";
+  frame.style.minHeight = `${minimumHeight(options.minHeight)}px`;
+  frame.style.height = frame.style.minHeight;
+  const stop = listenToEmbed(frame, () => options);
+  frame.src = url.href;
+  container.appendChild(frame);
+  return {
+    destroy() {
+      stop();
+      frame.remove();
+    }
+  };
+}
+//# sourceMappingURL=embed.cjs.map

package/embed.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/embed.ts", "../src/host.ts"],
+  "sourcesContent": ["import {\n  embedUrl,\n  listenToEmbed,\n  minimumHeight,\n  type GrizzleeEmbedOptions,\n} from \"./host\";\n\nexport type { GrizzleeEmbedOptions } from \"./host\";\n\n/** Append a dashboard iframe. Destroy removes its listener and the iframe. */\nexport function mountGrizzleeEmbed(\n  container: HTMLElement,\n  options: GrizzleeEmbedOptions,\n): { destroy(): void } {\n  const url = embedUrl(options.url);\n  const frame = container.ownerDocument.createElement(\"iframe\");\n  frame.title = options.title ?? \"Partner dashboard\";\n  if (options.className) frame.className = options.className;\n  frame.allow = \"clipboard-write\";\n  frame.referrerPolicy = \"no-referrer\";\n  frame.loading = \"lazy\";\n  frame.style.width = \"100%\";\n  frame.style.border = \"0\";\n  frame.style.minHeight = `${minimumHeight(options.minHeight)}px`;\n  frame.style.height = frame.style.minHeight;\n  const stop = listenToEmbed(frame, () => options);\n  frame.src = url.href;\n  container.appendChild(frame);\n  return {\n    destroy() {\n      stop();\n      frame.remove();\n    },\n  };\n}\n", "export interface GrizzleeEmbedOptions {\n  /** An absolute HTTP or HTTPS start URL minted by the merchant's server. */\n  url: string;\n  /** Return a newly minted URL to reopen the dashboard. Handle errors here. */\n  onSessionExpired?: () => string | void | Promise<string | void>;\n  onReady?: () => void;\n  title?: string;\n  className?: string;\n  /** Minimum height in CSS pixels, clamped to 120 through 10,000. Defaults to 320. */\n  minHeight?: number;\n}\n\nconst MAX_HEIGHT = 10_000;\n\nexport function minimumHeight(height = 320): number {\n  return Number.isFinite(height)\n    ? Math.min(MAX_HEIGHT, Math.max(120, Math.ceil(height)))\n    : 320;\n}\n\nexport function embedUrl(url: string): URL {\n  const parsed = new URL(url);\n  if (\n    ![\"https:\", \"http:\"].includes(parsed.protocol) ||\n    parsed.username ||\n    parsed.password\n  )\n    throw new Error(\n      \"Use an absolute HTTP or HTTPS embed URL without credentials\",\n    );\n  return parsed;\n}\n\n/** Both hosts use this listener so origin checks and renewal behave the same way. */\nexport function listenToEmbed(\n  frame: HTMLIFrameElement,\n  options: () => GrizzleeEmbedOptions,\n): () => void {\n  const hostWindow = frame.ownerDocument.defaultView;\n  if (!hostWindow)\n    throw new Error(\"The iframe must belong to a browser document\");\n  let origin = embedUrl(options().url).origin;\n  let active = true;\n  let renewing = false;\n\n  const receive = (event: MessageEvent<unknown>) => {\n    if (\n      !active ||\n      event.origin !== origin ||\n      !frame.contentWindow ||\n      event.source !== frame.contentWindow\n    )\n      return;\n    const message = event.data;\n    if (!message || typeof message !== \"object\" || !(\"type\" in message)) return;\n\n    switch (message.type) {\n      case \"grizzlee:ready\":\n        options().onReady?.();\n        break;\n      case \"grizzlee:resize\": {\n        if (\n          \"height\" in message &&\n          typeof message.height === \"number\" &&\n          Number.isSafeInteger(message.height) &&\n          message.height > 0\n        ) {\n          const height = Math.min(\n            MAX_HEIGHT,\n            Math.max(minimumHeight(options().minHeight), message.height),\n          );\n          frame.style.height = `${height}px`;\n        }\n        break;\n      }\n      case \"grizzlee:session_expired\": {\n        const renew = options().onSessionExpired;\n        if (!renew || renewing) return;\n        renewing = true;\n        void (async () => {\n          try {\n            const url = await renew();\n            if (!active || !url) return;\n            const next = embedUrl(url);\n            origin = next.origin;\n            frame.style.height = `${minimumHeight(options().minHeight)}px`;\n            frame.src = next.href;\n          } catch {\n            // Leave the expired dashboard in place. The merchant handles errors in its callback.\n          } finally {\n            renewing = false;\n          }\n        })();\n        break;\n      }\n    }\n  };\n\n  hostWindow.addEventListener(\"message\", receive);\n  return () => {\n    active = false;\n    hostWindow.removeEventListener(\"message\", receive);\n  };\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACYA,IAAM,aAAa;AAEZ,SAAS,cAAc,SAAS,KAAa;AAClD,SAAO,OAAO,SAAS,MAAM,IACzB,KAAK,IAAI,YAAY,KAAK,IAAI,KAAK,KAAK,KAAK,MAAM,CAAC,CAAC,IACrD;AACN;AAEO,SAAS,SAAS,KAAkB;AACzC,QAAM,SAAS,IAAI,IAAI,GAAG;AAC1B,MACE,CAAC,CAAC,UAAU,OAAO,EAAE,SAAS,OAAO,QAAQ,KAC7C,OAAO,YACP,OAAO;AAEP,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AACF,SAAO;AACT;AAGO,SAAS,cACd,OACA,SACY;AACZ,QAAM,aAAa,MAAM,cAAc;AACvC,MAAI,CAAC;AACH,UAAM,IAAI,MAAM,8CAA8C;AAChE,MAAI,SAAS,SAAS,QAAQ,EAAE,GAAG,EAAE;AACrC,MAAI,SAAS;AACb,MAAI,WAAW;AAEf,QAAM,UAAU,CAAC,UAAiC;AAChD,QACE,CAAC,UACD,MAAM,WAAW,UACjB,CAAC,MAAM,iBACP,MAAM,WAAW,MAAM;AAEvB;AACF,UAAM,UAAU,MAAM;AACtB,QAAI,CAAC,WAAW,OAAO,YAAY,YAAY,EAAE,UAAU,SAAU;AAErE,YAAQ,QAAQ,MAAM;AAAA,MACpB,KAAK;AACH,gBAAQ,EAAE,UAAU;AACpB;AAAA,MACF,KAAK,mBAAmB;AACtB,YACE,YAAY,WACZ,OAAO,QAAQ,WAAW,YAC1B,OAAO,cAAc,QAAQ,MAAM,KACnC,QAAQ,SAAS,GACjB;AACA,gBAAM,SAAS,KAAK;AAAA,YAClB;AAAA,YACA,KAAK,IAAI,cAAc,QAAQ,EAAE,SAAS,GAAG,QAAQ,MAAM;AAAA,UAC7D;AACA,gBAAM,MAAM,SAAS,GAAG,MAAM;AAAA,QAChC;AACA;AAAA,MACF;AAAA,MACA,KAAK,4BAA4B;AAC/B,cAAM,QAAQ,QAAQ,EAAE;AACxB,YAAI,CAAC,SAAS,SAAU;AACxB,mBAAW;AACX,cAAM,YAAY;AAChB,cAAI;AACF,kBAAM,MAAM,MAAM,MAAM;AACxB,gBAAI,CAAC,UAAU,CAAC,IAAK;AACrB,kBAAM,OAAO,SAAS,GAAG;AACzB,qBAAS,KAAK;AACd,kBAAM,MAAM,SAAS,GAAG,cAAc,QAAQ,EAAE,SAAS,CAAC;AAC1D,kBAAM,MAAM,KAAK;AAAA,UACnB,QAAQ;AAAA,UAER,UAAE;AACA,uBAAW;AAAA,UACb;AAAA,QACF,GAAG;AACH;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,aAAW,iBAAiB,WAAW,OAAO;AAC9C,SAAO,MAAM;AACX,aAAS;AACT,eAAW,oBAAoB,WAAW,OAAO;AAAA,EACnD;AACF;;;AD7FO,SAAS,mBACd,WACA,SACqB;AACrB,QAAM,MAAM,SAAS,QAAQ,GAAG;AAChC,QAAM,QAAQ,UAAU,cAAc,cAAc,QAAQ;AAC5D,QAAM,QAAQ,QAAQ,SAAS;AAC/B,MAAI,QAAQ,UAAW,OAAM,YAAY,QAAQ;AACjD,QAAM,QAAQ;AACd,QAAM,iBAAiB;AACvB,QAAM,UAAU;AAChB,QAAM,MAAM,QAAQ;AACpB,QAAM,MAAM,SAAS;AACrB,QAAM,MAAM,YAAY,GAAG,cAAc,QAAQ,SAAS,CAAC;AAC3D,QAAM,MAAM,SAAS,MAAM,MAAM;AACjC,QAAM,OAAO,cAAc,OAAO,MAAM,OAAO;AAC/C,QAAM,MAAM,IAAI;AAChB,YAAU,YAAY,KAAK;AAC3B,SAAO;AAAA,IACL,UAAU;AACR,WAAK;AACL,YAAM,OAAO;AAAA,IACf;AAAA,EACF;AACF;",
+  "names": []
+}

package/embed.js

@@ -0,0 +1,94 @@
+// packages/react/src/host.ts
+var MAX_HEIGHT = 1e4;
+function minimumHeight(height = 320) {
+  return Number.isFinite(height) ? Math.min(MAX_HEIGHT, Math.max(120, Math.ceil(height))) : 320;
+}
+function embedUrl(url) {
+  const parsed = new URL(url);
+  if (!["https:", "http:"].includes(parsed.protocol) || parsed.username || parsed.password)
+    throw new Error(
+      "Use an absolute HTTP or HTTPS embed URL without credentials"
+    );
+  return parsed;
+}
+function listenToEmbed(frame, options) {
+  const hostWindow = frame.ownerDocument.defaultView;
+  if (!hostWindow)
+    throw new Error("The iframe must belong to a browser document");
+  let origin = embedUrl(options().url).origin;
+  let active = true;
+  let renewing = false;
+  const receive = (event) => {
+    if (!active || event.origin !== origin || !frame.contentWindow || event.source !== frame.contentWindow)
+      return;
+    const message = event.data;
+    if (!message || typeof message !== "object" || !("type" in message)) return;
+    switch (message.type) {
+      case "grizzlee:ready":
+        options().onReady?.();
+        break;
+      case "grizzlee:resize": {
+        if ("height" in message && typeof message.height === "number" && Number.isSafeInteger(message.height) && message.height > 0) {
+          const height = Math.min(
+            MAX_HEIGHT,
+            Math.max(minimumHeight(options().minHeight), message.height)
+          );
+          frame.style.height = `${height}px`;
+        }
+        break;
+      }
+      case "grizzlee:session_expired": {
+        const renew = options().onSessionExpired;
+        if (!renew || renewing) return;
+        renewing = true;
+        void (async () => {
+          try {
+            const url = await renew();
+            if (!active || !url) return;
+            const next = embedUrl(url);
+            origin = next.origin;
+            frame.style.height = `${minimumHeight(options().minHeight)}px`;
+            frame.src = next.href;
+          } catch {
+          } finally {
+            renewing = false;
+          }
+        })();
+        break;
+      }
+    }
+  };
+  hostWindow.addEventListener("message", receive);
+  return () => {
+    active = false;
+    hostWindow.removeEventListener("message", receive);
+  };
+}
+
+// packages/react/src/embed.ts
+function mountGrizzleeEmbed(container, options) {
+  const url = embedUrl(options.url);
+  const frame = container.ownerDocument.createElement("iframe");
+  frame.title = options.title ?? "Partner dashboard";
+  if (options.className) frame.className = options.className;
+  frame.allow = "clipboard-write";
+  frame.referrerPolicy = "no-referrer";
+  frame.loading = "lazy";
+  frame.style.width = "100%";
+  frame.style.border = "0";
+  frame.style.minHeight = `${minimumHeight(options.minHeight)}px`;
+  frame.style.height = frame.style.minHeight;
+  const stop = listenToEmbed(frame, () => options);
+  frame.src = url.href;
+  container.appendChild(frame);
+  return {
+    destroy() {
+      stop();
+      frame.remove();
+    }
+  };
+}
+export {
+  mountGrizzleeEmbed
+};
+//# sourceMappingURL=embed.js.map

package/embed.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/host.ts", "../src/embed.ts"],
+  "sourcesContent": ["export interface GrizzleeEmbedOptions {\n  /** An absolute HTTP or HTTPS start URL minted by the merchant's server. */\n  url: string;\n  /** Return a newly minted URL to reopen the dashboard. Handle errors here. */\n  onSessionExpired?: () => string | void | Promise<string | void>;\n  onReady?: () => void;\n  title?: string;\n  className?: string;\n  /** Minimum height in CSS pixels, clamped to 120 through 10,000. Defaults to 320. */\n  minHeight?: number;\n}\n\nconst MAX_HEIGHT = 10_000;\n\nexport function minimumHeight(height = 320): number {\n  return Number.isFinite(height)\n    ? Math.min(MAX_HEIGHT, Math.max(120, Math.ceil(height)))\n    : 320;\n}\n\nexport function embedUrl(url: string): URL {\n  const parsed = new URL(url);\n  if (\n    ![\"https:\", \"http:\"].includes(parsed.protocol) ||\n    parsed.username ||\n    parsed.password\n  )\n    throw new Error(\n      \"Use an absolute HTTP or HTTPS embed URL without credentials\",\n    );\n  return parsed;\n}\n\n/** Both hosts use this listener so origin checks and renewal behave the same way. */\nexport function listenToEmbed(\n  frame: HTMLIFrameElement,\n  options: () => GrizzleeEmbedOptions,\n): () => void {\n  const hostWindow = frame.ownerDocument.defaultView;\n  if (!hostWindow)\n    throw new Error(\"The iframe must belong to a browser document\");\n  let origin = embedUrl(options().url).origin;\n  let active = true;\n  let renewing = false;\n\n  const receive = (event: MessageEvent<unknown>) => {\n    if (\n      !active ||\n      event.origin !== origin ||\n      !frame.contentWindow ||\n      event.source !== frame.contentWindow\n    )\n      return;\n    const message = event.data;\n    if (!message || typeof message !== \"object\" || !(\"type\" in message)) return;\n\n    switch (message.type) {\n      case \"grizzlee:ready\":\n        options().onReady?.();\n        break;\n      case \"grizzlee:resize\": {\n        if (\n          \"height\" in message &&\n          typeof message.height === \"number\" &&\n          Number.isSafeInteger(message.height) &&\n          message.height > 0\n        ) {\n          const height = Math.min(\n            MAX_HEIGHT,\n            Math.max(minimumHeight(options().minHeight), message.height),\n          );\n          frame.style.height = `${height}px`;\n        }\n        break;\n      }\n      case \"grizzlee:session_expired\": {\n        const renew = options().onSessionExpired;\n        if (!renew || renewing) return;\n        renewing = true;\n        void (async () => {\n          try {\n            const url = await renew();\n            if (!active || !url) return;\n            const next = embedUrl(url);\n            origin = next.origin;\n            frame.style.height = `${minimumHeight(options().minHeight)}px`;\n            frame.src = next.href;\n          } catch {\n            // Leave the expired dashboard in place. The merchant handles errors in its callback.\n          } finally {\n            renewing = false;\n          }\n        })();\n        break;\n      }\n    }\n  };\n\n  hostWindow.addEventListener(\"message\", receive);\n  return () => {\n    active = false;\n    hostWindow.removeEventListener(\"message\", receive);\n  };\n}\n", "import {\n  embedUrl,\n  listenToEmbed,\n  minimumHeight,\n  type GrizzleeEmbedOptions,\n} from \"./host\";\n\nexport type { GrizzleeEmbedOptions } from \"./host\";\n\n/** Append a dashboard iframe. Destroy removes its listener and the iframe. */\nexport function mountGrizzleeEmbed(\n  container: HTMLElement,\n  options: GrizzleeEmbedOptions,\n): { destroy(): void } {\n  const url = embedUrl(options.url);\n  const frame = container.ownerDocument.createElement(\"iframe\");\n  frame.title = options.title ?? \"Partner dashboard\";\n  if (options.className) frame.className = options.className;\n  frame.allow = \"clipboard-write\";\n  frame.referrerPolicy = \"no-referrer\";\n  frame.loading = \"lazy\";\n  frame.style.width = \"100%\";\n  frame.style.border = \"0\";\n  frame.style.minHeight = `${minimumHeight(options.minHeight)}px`;\n  frame.style.height = frame.style.minHeight;\n  const stop = listenToEmbed(frame, () => options);\n  frame.src = url.href;\n  container.appendChild(frame);\n  return {\n    destroy() {\n      stop();\n      frame.remove();\n    },\n  };\n}\n"],
+  "mappings": ";AAYA,IAAM,aAAa;AAEZ,SAAS,cAAc,SAAS,KAAa;AAClD,SAAO,OAAO,SAAS,MAAM,IACzB,KAAK,IAAI,YAAY,KAAK,IAAI,KAAK,KAAK,KAAK,MAAM,CAAC,CAAC,IACrD;AACN;AAEO,SAAS,SAAS,KAAkB;AACzC,QAAM,SAAS,IAAI,IAAI,GAAG;AAC1B,MACE,CAAC,CAAC,UAAU,OAAO,EAAE,SAAS,OAAO,QAAQ,KAC7C,OAAO,YACP,OAAO;AAEP,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AACF,SAAO;AACT;AAGO,SAAS,cACd,OACA,SACY;AACZ,QAAM,aAAa,MAAM,cAAc;AACvC,MAAI,CAAC;AACH,UAAM,IAAI,MAAM,8CAA8C;AAChE,MAAI,SAAS,SAAS,QAAQ,EAAE,GAAG,EAAE;AACrC,MAAI,SAAS;AACb,MAAI,WAAW;AAEf,QAAM,UAAU,CAAC,UAAiC;AAChD,QACE,CAAC,UACD,MAAM,WAAW,UACjB,CAAC,MAAM,iBACP,MAAM,WAAW,MAAM;AAEvB;AACF,UAAM,UAAU,MAAM;AACtB,QAAI,CAAC,WAAW,OAAO,YAAY,YAAY,EAAE,UAAU,SAAU;AAErE,YAAQ,QAAQ,MAAM;AAAA,MACpB,KAAK;AACH,gBAAQ,EAAE,UAAU;AACpB;AAAA,MACF,KAAK,mBAAmB;AACtB,YACE,YAAY,WACZ,OAAO,QAAQ,WAAW,YAC1B,OAAO,cAAc,QAAQ,MAAM,KACnC,QAAQ,SAAS,GACjB;AACA,gBAAM,SAAS,KAAK;AAAA,YAClB;AAAA,YACA,KAAK,IAAI,cAAc,QAAQ,EAAE,SAAS,GAAG,QAAQ,MAAM;AAAA,UAC7D;AACA,gBAAM,MAAM,SAAS,GAAG,MAAM;AAAA,QAChC;AACA;AAAA,MACF;AAAA,MACA,KAAK,4BAA4B;AAC/B,cAAM,QAAQ,QAAQ,EAAE;AACxB,YAAI,CAAC,SAAS,SAAU;AACxB,mBAAW;AACX,cAAM,YAAY;AAChB,cAAI;AACF,kBAAM,MAAM,MAAM,MAAM;AACxB,gBAAI,CAAC,UAAU,CAAC,IAAK;AACrB,kBAAM,OAAO,SAAS,GAAG;AACzB,qBAAS,KAAK;AACd,kBAAM,MAAM,SAAS,GAAG,cAAc,QAAQ,EAAE,SAAS,CAAC;AAC1D,kBAAM,MAAM,KAAK;AAAA,UACnB,QAAQ;AAAA,UAER,UAAE;AACA,uBAAW;AAAA,UACb;AAAA,QACF,GAAG;AACH;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,aAAW,iBAAiB,WAAW,OAAO;AAC9C,SAAO,MAAM;AACX,aAAS;AACT,eAAW,oBAAoB,WAAW,OAAO;AAAA,EACnD;AACF;;;AC7FO,SAAS,mBACd,WACA,SACqB;AACrB,QAAM,MAAM,SAAS,QAAQ,GAAG;AAChC,QAAM,QAAQ,UAAU,cAAc,cAAc,QAAQ;AAC5D,QAAM,QAAQ,QAAQ,SAAS;AAC/B,MAAI,QAAQ,UAAW,OAAM,YAAY,QAAQ;AACjD,QAAM,QAAQ;AACd,QAAM,iBAAiB;AACvB,QAAM,UAAU;AAChB,QAAM,MAAM,QAAQ;AACpB,QAAM,MAAM,SAAS;AACrB,QAAM,MAAM,YAAY,GAAG,cAAc,QAAQ,SAAS,CAAC;AAC3D,QAAM,MAAM,SAAS,MAAM,MAAM;AACjC,QAAM,OAAO,cAAc,OAAO,MAAM,OAAO;AAC/C,QAAM,MAAM,IAAI;AAChB,YAAU,YAAY,KAAK;AAC3B,SAAO;AAAA,IACL,UAAU;AACR,WAAK;AACL,YAAM,OAAO;AAAA,IACf;AAAA,EACF;AACF;",
+  "names": []
+}

package/index.cjs

@@ -0,0 +1,151 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/react/src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  GrizzleeEmbed: () => GrizzleeEmbed,
+  mountGrizzleeEmbed: () => mountGrizzleeEmbed
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = require("react");
+
+// packages/react/src/host.ts
+var MAX_HEIGHT = 1e4;
+function minimumHeight(height = 320) {
+  return Number.isFinite(height) ? Math.min(MAX_HEIGHT, Math.max(120, Math.ceil(height))) : 320;
+}
+function embedUrl(url) {
+  const parsed = new URL(url);
+  if (!["https:", "http:"].includes(parsed.protocol) || parsed.username || parsed.password)
+    throw new Error(
+      "Use an absolute HTTP or HTTPS embed URL without credentials"
+    );
+  return parsed;
+}
+function listenToEmbed(frame, options) {
+  const hostWindow = frame.ownerDocument.defaultView;
+  if (!hostWindow)
+    throw new Error("The iframe must belong to a browser document");
+  let origin = embedUrl(options().url).origin;
+  let active = true;
+  let renewing = false;
+  const receive = (event) => {
+    if (!active || event.origin !== origin || !frame.contentWindow || event.source !== frame.contentWindow)
+      return;
+    const message = event.data;
+    if (!message || typeof message !== "object" || !("type" in message)) return;
+    switch (message.type) {
+      case "grizzlee:ready":
+        options().onReady?.();
+        break;
+      case "grizzlee:resize": {
+        if ("height" in message && typeof message.height === "number" && Number.isSafeInteger(message.height) && message.height > 0) {
+          const height = Math.min(
+            MAX_HEIGHT,
+            Math.max(minimumHeight(options().minHeight), message.height)
+          );
+          frame.style.height = `${height}px`;
+        }
+        break;
+      }
+      case "grizzlee:session_expired": {
+        const renew = options().onSessionExpired;
+        if (!renew || renewing) return;
+        renewing = true;
+        void (async () => {
+          try {
+            const url = await renew();
+            if (!active || !url) return;
+            const next = embedUrl(url);
+            origin = next.origin;
+            frame.style.height = `${minimumHeight(options().minHeight)}px`;
+            frame.src = next.href;
+          } catch {
+          } finally {
+            renewing = false;
+          }
+        })();
+        break;
+      }
+    }
+  };
+  hostWindow.addEventListener("message", receive);
+  return () => {
+    active = false;
+    hostWindow.removeEventListener("message", receive);
+  };
+}
+
+// packages/react/src/embed.ts
+function mountGrizzleeEmbed(container, options) {
+  const url = embedUrl(options.url);
+  const frame = container.ownerDocument.createElement("iframe");
+  frame.title = options.title ?? "Partner dashboard";
+  if (options.className) frame.className = options.className;
+  frame.allow = "clipboard-write";
+  frame.referrerPolicy = "no-referrer";
+  frame.loading = "lazy";
+  frame.style.width = "100%";
+  frame.style.border = "0";
+  frame.style.minHeight = `${minimumHeight(options.minHeight)}px`;
+  frame.style.height = frame.style.minHeight;
+  const stop = listenToEmbed(frame, () => options);
+  frame.src = url.href;
+  container.appendChild(frame);
+  return {
+    destroy() {
+      stop();
+      frame.remove();
+    }
+  };
+}
+
+// packages/react/src/index.ts
+function GrizzleeEmbed(props) {
+  const frame = (0, import_react.useRef)(null);
+  const current = (0, import_react.useRef)(props);
+  const url = embedUrl(props.url).href;
+  const height = minimumHeight(props.minHeight);
+  (0, import_react.useEffect)(() => {
+    current.current = props;
+  });
+  (0, import_react.useEffect)(() => {
+    if (frame.current)
+      return listenToEmbed(frame.current, () => current.current);
+  }, [url]);
+  return (0, import_react.createElement)("iframe", {
+    ref: frame,
+    src: url,
+    title: props.title ?? "Partner dashboard",
+    className: props.className,
+    style: {
+      width: "100%",
+      border: 0,
+      ...props.style,
+      height,
+      minHeight: height
+    },
+    allow: "clipboard-write",
+    referrerPolicy: "no-referrer",
+    loading: "lazy"
+  });
+}
+//# sourceMappingURL=index.cjs.map

package/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts", "../src/host.ts", "../src/embed.ts"],
+  "sourcesContent": ["\"use client\";\n\nimport {\n  createElement,\n  useEffect,\n  useRef,\n  type CSSProperties,\n  type ReactElement,\n} from \"react\";\nimport {\n  embedUrl,\n  listenToEmbed,\n  minimumHeight,\n  type GrizzleeEmbedOptions,\n} from \"./host\";\n\nexport { mountGrizzleeEmbed } from \"./embed\";\nexport type { GrizzleeEmbedOptions } from \"./host\";\n\nexport interface GrizzleeEmbedProps extends GrizzleeEmbedOptions {\n  style?: CSSProperties;\n}\n\n/** Render a dashboard without putting a server key in the browser. */\nexport function GrizzleeEmbed(props: GrizzleeEmbedProps): ReactElement {\n  const frame = useRef<HTMLIFrameElement>(null);\n  const current = useRef(props);\n  const url = embedUrl(props.url).href;\n  const height = minimumHeight(props.minHeight);\n\n  useEffect(() => {\n    current.current = props;\n  });\n  useEffect(() => {\n    if (frame.current)\n      return listenToEmbed(frame.current, () => current.current);\n  }, [url]);\n\n  return createElement(\"iframe\", {\n    ref: frame,\n    src: url,\n    title: props.title ?? \"Partner dashboard\",\n    className: props.className,\n    style: {\n      width: \"100%\",\n      border: 0,\n      ...props.style,\n      height,\n      minHeight: height,\n    },\n    allow: \"clipboard-write\",\n    referrerPolicy: \"no-referrer\",\n    loading: \"lazy\",\n  });\n}\n", "export interface GrizzleeEmbedOptions {\n  /** An absolute HTTP or HTTPS start URL minted by the merchant's server. */\n  url: string;\n  /** Return a newly minted URL to reopen the dashboard. Handle errors here. */\n  onSessionExpired?: () => string | void | Promise<string | void>;\n  onReady?: () => void;\n  title?: string;\n  className?: string;\n  /** Minimum height in CSS pixels, clamped to 120 through 10,000. Defaults to 320. */\n  minHeight?: number;\n}\n\nconst MAX_HEIGHT = 10_000;\n\nexport function minimumHeight(height = 320): number {\n  return Number.isFinite(height)\n    ? Math.min(MAX_HEIGHT, Math.max(120, Math.ceil(height)))\n    : 320;\n}\n\nexport function embedUrl(url: string): URL {\n  const parsed = new URL(url);\n  if (\n    ![\"https:\", \"http:\"].includes(parsed.protocol) ||\n    parsed.username ||\n    parsed.password\n  )\n    throw new Error(\n      \"Use an absolute HTTP or HTTPS embed URL without credentials\",\n    );\n  return parsed;\n}\n\n/** Both hosts use this listener so origin checks and renewal behave the same way. */\nexport function listenToEmbed(\n  frame: HTMLIFrameElement,\n  options: () => GrizzleeEmbedOptions,\n): () => void {\n  const hostWindow = frame.ownerDocument.defaultView;\n  if (!hostWindow)\n    throw new Error(\"The iframe must belong to a browser document\");\n  let origin = embedUrl(options().url).origin;\n  let active = true;\n  let renewing = false;\n\n  const receive = (event: MessageEvent<unknown>) => {\n    if (\n      !active ||\n      event.origin !== origin ||\n      !frame.contentWindow ||\n      event.source !== frame.contentWindow\n    )\n      return;\n    const message = event.data;\n    if (!message || typeof message !== \"object\" || !(\"type\" in message)) return;\n\n    switch (message.type) {\n      case \"grizzlee:ready\":\n        options().onReady?.();\n        break;\n      case \"grizzlee:resize\": {\n        if (\n          \"height\" in message &&\n          typeof message.height === \"number\" &&\n          Number.isSafeInteger(message.height) &&\n          message.height > 0\n        ) {\n          const height = Math.min(\n            MAX_HEIGHT,\n            Math.max(minimumHeight(options().minHeight), message.height),\n          );\n          frame.style.height = `${height}px`;\n        }\n        break;\n      }\n      case \"grizzlee:session_expired\": {\n        const renew = options().onSessionExpired;\n        if (!renew || renewing) return;\n        renewing = true;\n        void (async () => {\n          try {\n            const url = await renew();\n            if (!active || !url) return;\n            const next = embedUrl(url);\n            origin = next.origin;\n            frame.style.height = `${minimumHeight(options().minHeight)}px`;\n            frame.src = next.href;\n          } catch {\n            // Leave the expired dashboard in place. The merchant handles errors in its callback.\n          } finally {\n            renewing = false;\n          }\n        })();\n        break;\n      }\n    }\n  };\n\n  hostWindow.addEventListener(\"message\", receive);\n  return () => {\n    active = false;\n    hostWindow.removeEventListener(\"message\", receive);\n  };\n}\n", "import {\n  embedUrl,\n  listenToEmbed,\n  minimumHeight,\n  type GrizzleeEmbedOptions,\n} from \"./host\";\n\nexport type { GrizzleeEmbedOptions } from \"./host\";\n\n/** Append a dashboard iframe. Destroy removes its listener and the iframe. */\nexport function mountGrizzleeEmbed(\n  container: HTMLElement,\n  options: GrizzleeEmbedOptions,\n): { destroy(): void } {\n  const url = embedUrl(options.url);\n  const frame = container.ownerDocument.createElement(\"iframe\");\n  frame.title = options.title ?? \"Partner dashboard\";\n  if (options.className) frame.className = options.className;\n  frame.allow = \"clipboard-write\";\n  frame.referrerPolicy = \"no-referrer\";\n  frame.loading = \"lazy\";\n  frame.style.width = \"100%\";\n  frame.style.border = \"0\";\n  frame.style.minHeight = `${minimumHeight(options.minHeight)}px`;\n  frame.style.height = frame.style.minHeight;\n  const stop = listenToEmbed(frame, () => options);\n  frame.src = url.href;\n  container.appendChild(frame);\n  return {\n    destroy() {\n      stop();\n      frame.remove();\n    },\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/index.js

@@ -0,0 +1,135 @@
+"use client";
+
+// packages/react/src/index.ts
+import {
+  createElement,
+  useEffect,
+  useRef
+} from "react";
+
+// packages/react/src/host.ts
+var MAX_HEIGHT = 1e4;
+function minimumHeight(height = 320) {
+  return Number.isFinite(height) ? Math.min(MAX_HEIGHT, Math.max(120, Math.ceil(height))) : 320;
+}
+function embedUrl(url) {
+  const parsed = new URL(url);
+  if (!["https:", "http:"].includes(parsed.protocol) || parsed.username || parsed.password)
+    throw new Error(
+      "Use an absolute HTTP or HTTPS embed URL without credentials"
+    );
+  return parsed;
+}
+function listenToEmbed(frame, options) {
+  const hostWindow = frame.ownerDocument.defaultView;
+  if (!hostWindow)
+    throw new Error("The iframe must belong to a browser document");
+  let origin = embedUrl(options().url).origin;
+  let active = true;
+  let renewing = false;
+  const receive = (event) => {
+    if (!active || event.origin !== origin || !frame.contentWindow || event.source !== frame.contentWindow)
+      return;
+    const message = event.data;
+    if (!message || typeof message !== "object" || !("type" in message)) return;
+    switch (message.type) {
+      case "grizzlee:ready":
+        options().onReady?.();
+        break;
+      case "grizzlee:resize": {
+        if ("height" in message && typeof message.height === "number" && Number.isSafeInteger(message.height) && message.height > 0) {
+          const height = Math.min(
+            MAX_HEIGHT,
+            Math.max(minimumHeight(options().minHeight), message.height)
+          );
+          frame.style.height = `${height}px`;
+        }
+        break;
+      }
+      case "grizzlee:session_expired": {
+        const renew = options().onSessionExpired;
+        if (!renew || renewing) return;
+        renewing = true;
+        void (async () => {
+          try {
+            const url = await renew();
+            if (!active || !url) return;
+            const next = embedUrl(url);
+            origin = next.origin;
+            frame.style.height = `${minimumHeight(options().minHeight)}px`;
+            frame.src = next.href;
+          } catch {
+          } finally {
+            renewing = false;
+          }
+        })();
+        break;
+      }
+    }
+  };
+  hostWindow.addEventListener("message", receive);
+  return () => {
+    active = false;
+    hostWindow.removeEventListener("message", receive);
+  };
+}
+
+// packages/react/src/embed.ts
+function mountGrizzleeEmbed(container, options) {
+  const url = embedUrl(options.url);
+  const frame = container.ownerDocument.createElement("iframe");
+  frame.title = options.title ?? "Partner dashboard";
+  if (options.className) frame.className = options.className;
+  frame.allow = "clipboard-write";
+  frame.referrerPolicy = "no-referrer";
+  frame.loading = "lazy";
+  frame.style.width = "100%";
+  frame.style.border = "0";
+  frame.style.minHeight = `${minimumHeight(options.minHeight)}px`;
+  frame.style.height = frame.style.minHeight;
+  const stop = listenToEmbed(frame, () => options);
+  frame.src = url.href;
+  container.appendChild(frame);
+  return {
+    destroy() {
+      stop();
+      frame.remove();
+    }
+  };
+}
+
+// packages/react/src/index.ts
+function GrizzleeEmbed(props) {
+  const frame = useRef(null);
+  const current = useRef(props);
+  const url = embedUrl(props.url).href;
+  const height = minimumHeight(props.minHeight);
+  useEffect(() => {
+    current.current = props;
+  });
+  useEffect(() => {
+    if (frame.current)
+      return listenToEmbed(frame.current, () => current.current);
+  }, [url]);
+  return createElement("iframe", {
+    ref: frame,
+    src: url,
+    title: props.title ?? "Partner dashboard",
+    className: props.className,
+    style: {
+      width: "100%",
+      border: 0,
+      ...props.style,
+      height,
+      minHeight: height
+    },
+    allow: "clipboard-write",
+    referrerPolicy: "no-referrer",
+    loading: "lazy"
+  });
+}
+export {
+  GrizzleeEmbed,
+  mountGrizzleeEmbed
+};
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts", "../src/host.ts", "../src/embed.ts"],
+  "sourcesContent": ["\"use client\";\n\nimport {\n  createElement,\n  useEffect,\n  useRef,\n  type CSSProperties,\n  type ReactElement,\n} from \"react\";\nimport {\n  embedUrl,\n  listenToEmbed,\n  minimumHeight,\n  type GrizzleeEmbedOptions,\n} from \"./host\";\n\nexport { mountGrizzleeEmbed } from \"./embed\";\nexport type { GrizzleeEmbedOptions } from \"./host\";\n\nexport interface GrizzleeEmbedProps extends GrizzleeEmbedOptions {\n  style?: CSSProperties;\n}\n\n/** Render a dashboard without putting a server key in the browser. */\nexport function GrizzleeEmbed(props: GrizzleeEmbedProps): ReactElement {\n  const frame = useRef<HTMLIFrameElement>(null);\n  const current = useRef(props);\n  const url = embedUrl(props.url).href;\n  const height = minimumHeight(props.minHeight);\n\n  useEffect(() => {\n    current.current = props;\n  });\n  useEffect(() => {\n    if (frame.current)\n      return listenToEmbed(frame.current, () => current.current);\n  }, [url]);\n\n  return createElement(\"iframe\", {\n    ref: frame,\n    src: url,\n    title: props.title ?? \"Partner dashboard\",\n    className: props.className,\n    style: {\n      width: \"100%\",\n      border: 0,\n      ...props.style,\n      height,\n      minHeight: height,\n    },\n    allow: \"clipboard-write\",\n    referrerPolicy: \"no-referrer\",\n    loading: \"lazy\",\n  });\n}\n", "export interface GrizzleeEmbedOptions {\n  /** An absolute HTTP or HTTPS start URL minted by the merchant's server. */\n  url: string;\n  /** Return a newly minted URL to reopen the dashboard. Handle errors here. */\n  onSessionExpired?: () => string | void | Promise<string | void>;\n  onReady?: () => void;\n  title?: string;\n  className?: string;\n  /** Minimum height in CSS pixels, clamped to 120 through 10,000. Defaults to 320. */\n  minHeight?: number;\n}\n\nconst MAX_HEIGHT = 10_000;\n\nexport function minimumHeight(height = 320): number {\n  return Number.isFinite(height)\n    ? Math.min(MAX_HEIGHT, Math.max(120, Math.ceil(height)))\n    : 320;\n}\n\nexport function embedUrl(url: string): URL {\n  const parsed = new URL(url);\n  if (\n    ![\"https:\", \"http:\"].includes(parsed.protocol) ||\n    parsed.username ||\n    parsed.password\n  )\n    throw new Error(\n      \"Use an absolute HTTP or HTTPS embed URL without credentials\",\n    );\n  return parsed;\n}\n\n/** Both hosts use this listener so origin checks and renewal behave the same way. */\nexport function listenToEmbed(\n  frame: HTMLIFrameElement,\n  options: () => GrizzleeEmbedOptions,\n): () => void {\n  const hostWindow = frame.ownerDocument.defaultView;\n  if (!hostWindow)\n    throw new Error(\"The iframe must belong to a browser document\");\n  let origin = embedUrl(options().url).origin;\n  let active = true;\n  let renewing = false;\n\n  const receive = (event: MessageEvent<unknown>) => {\n    if (\n      !active ||\n      event.origin !== origin ||\n      !frame.contentWindow ||\n      event.source !== frame.contentWindow\n    )\n      return;\n    const message = event.data;\n    if (!message || typeof message !== \"object\" || !(\"type\" in message)) return;\n\n    switch (message.type) {\n      case \"grizzlee:ready\":\n        options().onReady?.();\n        break;\n      case \"grizzlee:resize\": {\n        if (\n          \"height\" in message &&\n          typeof message.height === \"number\" &&\n          Number.isSafeInteger(message.height) &&\n          message.height > 0\n        ) {\n          const height = Math.min(\n            MAX_HEIGHT,\n            Math.max(minimumHeight(options().minHeight), message.height),\n          );\n          frame.style.height = `${height}px`;\n        }\n        break;\n      }\n      case \"grizzlee:session_expired\": {\n        const renew = options().onSessionExpired;\n        if (!renew || renewing) return;\n        renewing = true;\n        void (async () => {\n          try {\n            const url = await renew();\n            if (!active || !url) return;\n            const next = embedUrl(url);\n            origin = next.origin;\n            frame.style.height = `${minimumHeight(options().minHeight)}px`;\n            frame.src = next.href;\n          } catch {\n            // Leave the expired dashboard in place. The merchant handles errors in its callback.\n          } finally {\n            renewing = false;\n          }\n        })();\n        break;\n      }\n    }\n  };\n\n  hostWindow.addEventListener(\"message\", receive);\n  return () => {\n    active = false;\n    hostWindow.removeEventListener(\"message\", receive);\n  };\n}\n", "import {\n  embedUrl,\n  listenToEmbed,\n  minimumHeight,\n  type GrizzleeEmbedOptions,\n} from \"./host\";\n\nexport type { GrizzleeEmbedOptions } from \"./host\";\n\n/** Append a dashboard iframe. Destroy removes its listener and the iframe. */\nexport function mountGrizzleeEmbed(\n  container: HTMLElement,\n  options: GrizzleeEmbedOptions,\n): { destroy(): void } {\n  const url = embedUrl(options.url);\n  const frame = container.ownerDocument.createElement(\"iframe\");\n  frame.title = options.title ?? \"Partner dashboard\";\n  if (options.className) frame.className = options.className;\n  frame.allow = \"clipboard-write\";\n  frame.referrerPolicy = \"no-referrer\";\n  frame.loading = \"lazy\";\n  frame.style.width = \"100%\";\n  frame.style.border = \"0\";\n  frame.style.minHeight = `${minimumHeight(options.minHeight)}px`;\n  frame.style.height = frame.style.minHeight;\n  const stop = listenToEmbed(frame, () => options);\n  frame.src = url.href;\n  container.appendChild(frame);\n  return {\n    destroy() {\n      stop();\n      frame.remove();\n    },\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/package.json

@@ -1,6 +1,66 @@
 {
   "name": "@grizzlee/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://grizzlee.ca",
+  "description": "Embed Grizzlee partner dashboards in React or plain JavaScript apps.",
+  "type": "module",
+  "sideEffects": false,
+  "engines": {
+    "node": ">=22"
+  },
+  "main": "./index.cjs",
+  "module": "./index.js",
+  "types": "./types/index.d.cts",
+  "typesVersions": {
+    "*": {
+      "embed": [
+        "./types/embed.d.cts"
+      ]
+    }
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./types/index.d.ts",
+        "default": "./index.js"
+      },
+      "require": {
+        "types": "./types/index.d.cts",
+        "default": "./index.cjs"
+      },
+      "default": "./index.js"
+    },
+    "./embed": {
+      "import": {
+        "types": "./types/embed.d.ts",
+        "default": "./embed.js"
+      },
+      "require": {
+        "types": "./types/embed.d.cts",
+        "default": "./embed.cjs"
+      },
+      "default": "./embed.js"
+    }
+  },
+  "files": [
+    "*.js",
+    "*.js.map",
+    "*.cjs",
+    "*.cjs.map",
+    "types",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  }
+}

package/types/embed.d.cts

@@ -0,0 +1,6 @@
+import { type GrizzleeEmbedOptions } from "./host.cjs";
+export type { GrizzleeEmbedOptions } from "./host.cjs";
+/** Append a dashboard iframe. Destroy removes its listener and the iframe. */
+export declare function mountGrizzleeEmbed(container: HTMLElement, options: GrizzleeEmbedOptions): {
+    destroy(): void;
+};

package/types/embed.d.ts

@@ -0,0 +1,6 @@
+import { type GrizzleeEmbedOptions } from "./host.js";
+export type { GrizzleeEmbedOptions } from "./host.js";
+/** Append a dashboard iframe. Destroy removes its listener and the iframe. */
+export declare function mountGrizzleeEmbed(container: HTMLElement, options: GrizzleeEmbedOptions): {
+    destroy(): void;
+};

package/types/host.d.cts

@@ -0,0 +1,15 @@
+export interface GrizzleeEmbedOptions {
+    /** An absolute HTTP or HTTPS start URL minted by the merchant's server. */
+    url: string;
+    /** Return a newly minted URL to reopen the dashboard. Handle errors here. */
+    onSessionExpired?: () => string | void | Promise<string | void>;
+    onReady?: () => void;
+    title?: string;
+    className?: string;
+    /** Minimum height in CSS pixels, clamped to 120 through 10,000. Defaults to 320. */
+    minHeight?: number;
+}
+export declare function minimumHeight(height?: number): number;
+export declare function embedUrl(url: string): URL;
+/** Both hosts use this listener so origin checks and renewal behave the same way. */
+export declare function listenToEmbed(frame: HTMLIFrameElement, options: () => GrizzleeEmbedOptions): () => void;

package/types/host.d.ts

@@ -0,0 +1,15 @@
+export interface GrizzleeEmbedOptions {
+    /** An absolute HTTP or HTTPS start URL minted by the merchant's server. */
+    url: string;
+    /** Return a newly minted URL to reopen the dashboard. Handle errors here. */
+    onSessionExpired?: () => string | void | Promise<string | void>;
+    onReady?: () => void;
+    title?: string;
+    className?: string;
+    /** Minimum height in CSS pixels, clamped to 120 through 10,000. Defaults to 320. */
+    minHeight?: number;
+}
+export declare function minimumHeight(height?: number): number;
+export declare function embedUrl(url: string): URL;
+/** Both hosts use this listener so origin checks and renewal behave the same way. */
+export declare function listenToEmbed(frame: HTMLIFrameElement, options: () => GrizzleeEmbedOptions): () => void;

package/types/index.d.cts

@@ -0,0 +1,9 @@
+import { type CSSProperties, type ReactElement } from "react";
+import { type GrizzleeEmbedOptions } from "./host.cjs";
+export { mountGrizzleeEmbed } from "./embed.cjs";
+export type { GrizzleeEmbedOptions } from "./host.cjs";
+export interface GrizzleeEmbedProps extends GrizzleeEmbedOptions {
+    style?: CSSProperties;
+}
+/** Render a dashboard without putting a server key in the browser. */
+export declare function GrizzleeEmbed(props: GrizzleeEmbedProps): ReactElement;

package/types/index.d.ts

@@ -0,0 +1,9 @@
+import { type CSSProperties, type ReactElement } from "react";
+import { type GrizzleeEmbedOptions } from "./host.js";
+export { mountGrizzleeEmbed } from "./embed.js";
+export type { GrizzleeEmbedOptions } from "./host.js";
+export interface GrizzleeEmbedProps extends GrizzleeEmbedOptions {
+    style?: CSSProperties;
+}
+/** Render a dashboard without putting a server key in the browser. */
+export declare function GrizzleeEmbed(props: GrizzleeEmbedProps): ReactElement;