@seatlayer/js 0.23.0 → 0.24.0

package/README.md

@@ -101,8 +101,19 @@ designer.setDesignerUrl(nextSession.designerUrl);
 designer.destroy();
 ```
 
-Give the container a height, for example `min-height: 760px`. Keep the default
-`referrerPolicy: 'origin'`; the Designer uses it to verify the parent origin.
+The default `height: 'fill'` is **container-aware**. On mount the SDK probes the
+container: if you gave it a definite height — a fixed-height block, `height` /
+`max-height`, a `flex:1; min-h-0` child, a resolved `%` — the iframe fills 100% of
+that block and tracks its size live via a `ResizeObserver`. If the container is
+content-sized (it collapses to whatever the iframe measures — typical full-page
+usage), the iframe instead grows so its bottom edge meets the bottom of the
+viewport. Either way the result is clamped to `minHeight` (default `480`), and the
+verdict is re-probed on resize so a responsive layout can flip between the two. So
+you can either drop the Designer into a sized block (it fills the block) or give it
+`min-height: 760px` for full-page use (it fills the viewport). Every SDK-managed
+height is written with `!important`, so a host theme's `iframe { height: … }` rule
+can't override it. Keep the default `referrerPolicy: 'origin'`; the Designer uses
+it to verify the parent origin.
 
 ### Built-in loading, error, and expiry states
 
@@ -117,11 +128,51 @@ CSS files or external assets.
 | --- | --- | --- | --- |
 | `showLoadingState` | `boolean` | `true` | Render the built-in skeleton and error card. Set `false` when you draw your own chrome. |
 | `loadingTimeoutMs` | `number` | `20000` | If `ready` never arrives within this window, show the error card with a timeout message. |
-| `onRequestRelaunch` | `() => void` | — | Called by **"Try again"**. Mint a fresh session and call `setDesignerUrl()`; the iframe recreates and returns to loading. When omitted, "Try again" reloads the current URL in place. |
+| `onRequestRelaunch` | `() => void` | — | Called by **"Try again"** _and_ by automatic renewal (below). Mint a fresh session and call `setDesignerUrl()`; the iframe recreates and returns to loading. When omitted, "Try again" reloads the current URL in place. |
+| `autoRenewSession` | `boolean` | `true`¹ | Silently renew the session before it expires and auto-recover once if an expiry error slips through. ¹Defaults `true` only when `onRequestRelaunch` is provided; a no-op without it. Set `false` for fully manual "Try again". |
 
 `setDesignerUrl()` always returns the host to the loading state, so a relaunch
 flow needs no extra bookkeeping.
 
+### Session lifecycle
+
+Designer sessions are **short-lived by design**: your backend mints a `dse_`
+token (default 1 hour, up to 4 hours via `expiresInSeconds`) and bakes it into
+`designerUrl`. Pick a TTL that fits how long organizers actually edit — longer is
+not automatically better; the renewal below keeps even a multi-hour session alive.
+
+Provide `onRequestRelaunch` returning (or awaiting) a freshly minted session, and
+the SDK turns expiry into a non-event:
+
+- **Silent proactive renewal.** From each `ready` message's `expiresAt` the SDK
+  schedules an automatic relaunch shortly before the session lapses — ~3 minutes
+  ahead, or, for a TTL under 15 minutes, after 80% of the remaining life (never
+  sooner than 30s after `ready`). Your `onRequestRelaunch` mints a fresh session
+  and swaps `designerUrl`, so editing continues with no expiry card. The timer
+  re-arms from every `ready`.
+- **Automatic expiry recovery.** If an expiry error still arrives (a laptop that
+  slept past the renewal window, say), the SDK makes **one** automatic relaunch
+  attempt before showing the "Try again" card, and only falls back to the card if
+  that attempt also fails.
+
+Relaunching is safe: **in-progress work is autosaved server-side**, so a fresh
+iframe restores the organizer's chart where they left off.
+
+```js
+const designer = new EmbeddedDesigner({
+  container: '#venue-designer',
+  designerUrl: session.designerUrl,
+  expectedChartId: session.chartId,
+  // Mint a fresh session on renewal, expiry recovery, or "Try again":
+  onRequestRelaunch: async () => {
+    const next = await mintDesignerSession(session.chartId); // your backend, up to 4h TTL
+    designer.setDesignerUrl(next.designerUrl);               // recreates the iframe
+  },
+  // autoRenewSession defaults to true because onRequestRelaunch is present.
+});
+designer.mount();
+```
+
 ## API
 
 `new SeatingChart(options)` — options: `container` (selector or element, required),

package/dist/index.cjs

@@ -205,8 +205,28 @@ var SeatingChart = class {
       ribbon.style.cssText = "position:absolute;top:18px;right:-34px;z-index:6;transform:rotate(45deg);width:140px;text-align:center;padding:4px 0;background:#f4b740;color:#1a1200;font:800 10.5px/1.4 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.12em;box-shadow:0 2px 8px rgba(0,0,0,.25);pointer-events:none;";
       host.appendChild(ribbon);
     }
+    this.buildBadge(host);
     return this;
   }
+  /**
+   * Attribution badge pinned to the embed's bottom-right, linking to
+   * seatlayer.io. Rendered as an absolutely-positioned overlay with
+   * self-contained inline styles — the SDK embed ships no widget CSS, and an
+   * overlay keeps it out of the layout flow so it never disturbs the SDK v0.22
+   * fill-height resize contract. Mirrors the full widget's mark + wordmark and
+   * reuses the `picker.poweredBy` i18n string.
+   */
+  buildBadge(host) {
+    if (this.controller.doc?.theme?.hideBadge) return;
+    const badge = document.createElement("a");
+    badge.href = "https://seatlayer.io";
+    badge.target = "_blank";
+    badge.rel = "noopener noreferrer";
+    badge.setAttribute("aria-label", (0, import_core.t)("picker.poweredBy"));
+    badge.style.cssText = 'position:absolute;bottom:10px;right:12px;z-index:5;display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.92);color:#4a5163;text-decoration:none;font:600 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.02em;box-shadow:0 2px 8px rgba(0,0,0,.12);';
+    badge.innerHTML = `<span aria-hidden="true" style="width:16px;height:16px;border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;background:#f4b740;color:#1a1200"><svg viewBox="0 0 24 24" style="width:11px;height:11px;fill:currentColor"><path d="M4 15c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v3h-3v-2H7v2H4v-3Z"/><rect x="7" y="7" width="10" height="5" rx="1.6"/></svg></span><span>${(0, import_core.t)("picker.poweredBy")}</span>`;
+    host.appendChild(badge);
+  }
   placeTooltip() {
     if (!this.tipEl || !this.hostEl) return;
     const hw = this.hostEl.clientWidth;
@@ -361,6 +381,13 @@ var TYPES = /* @__PURE__ */ new Set([
 ]);
 var DEFAULT_LOADING_TIMEOUT_MS = 2e4;
 var DEFAULT_MIN_FILL_HEIGHT = 480;
+var RENEW_LEAD_MS = 3 * 60 * 1e3;
+var RENEW_SHORT_TTL_MS = 15 * 60 * 1e3;
+var RENEW_SHORT_TTL_FRACTION = 0.8;
+var RENEW_MIN_DELAY_MS = 30 * 1e3;
+var FILL_PROBE_HEIGHT_PX = 1e5;
+var FILL_PROBE_TRACK_EPSILON_PX = 4;
+var FILL_MIN_DEFINITE_HEIGHT_PX = 50;
 function resolveContainer2(container) {
   if (typeof container !== "string") return container;
   const element = document.querySelector(container);
@@ -398,6 +425,14 @@ var EmbeddedDesigner = class {
     this.designerOrigin = "";
     this.overlay = null;
     this.timeoutTimer = null;
+    /** Proactive session-renewal timer; armed from each `ready`, cleared on re-mount. */
+    this.renewTimer = null;
+    /**
+     * One automatic recovery relaunch is allowed per expiry. Reset ONLY when a fresh
+     * `ready` arrives — deliberately not on re-mount — so a session that keeps failing
+     * to load can't loop the host through endless silent relaunches.
+     */
+    this.autoRecoverUsed = false;
     this.phase = "loading";
     this.restoreContainerPosition = null;
     // Host-side fullscreen pin: saved state we restore on `off`/Escape/destroy.
@@ -408,10 +443,17 @@ var EmbeddedDesigner = class {
     this.fsKeyHandler = null;
     /** Latest height (px string) the Designer reported; re-applied after unpin. */
     this.lastAutoHeight = "";
-    // Viewport-fill sizing: pending rAF handle + whether listeners are attached.
+    // Fill sizing: pending rAF handles + whether window listeners are attached.
     this.fillRaf = null;
+    this.reprobeRaf = null;
     this.fillListening = false;
-    /** rAF-throttled fill recompute, so a burst of scroll/resize ticks coalesces. */
+    /** Resolved container element (fill measurement + ResizeObserver target). */
+    this.containerEl = null;
+    /** Cached fill verdict: 'container' = bounded block, 'viewport' = full page. */
+    this.fillMode = null;
+    /** Live block-size tracking in container-fill mode; disconnected on destroy. */
+    this.resizeObs = null;
+    /** rAF-throttled fill recompute, so a burst of scroll/RO ticks coalesces. */
     this.scheduleFill = () => {
       if (this.fillRaf !== null) return;
       this.fillRaf = requestAnimationFrame(() => {
@@ -419,6 +461,21 @@ var EmbeddedDesigner = class {
         this.applyFill();
       });
     };
+    /**
+     * rAF-throttled re-probe: a host layout change (responsive breakpoint, a block
+     * gaining/losing a definite height) can flip the verdict, so `resize` /
+     * `orientationchange` re-detect and swap the container observer accordingly.
+     */
+    this.scheduleReprobe = () => {
+      if (this.reprobeRaf !== null) return;
+      this.reprobeRaf = requestAnimationFrame(() => {
+        this.reprobeRaf = null;
+        if (this.pinned) return;
+        this.fillMode = this.detectFillMode();
+        this.syncContainerObserver();
+        this.applyFill();
+      });
+    };
     this.handleMessage = (event) => {
       if (!this.frame || event.origin !== this.designerOrigin || event.source !== this.frame.contentWindow) return;
       if (!event.data || typeof event.data !== "object") return;
@@ -426,7 +483,7 @@ var EmbeddedDesigner = class {
       if (data.type === "seatlayer.designer.resize") {
         if (!this.fillEnabled() && this.autoResizeEnabled() && typeof data.px === "number" && Number.isFinite(data.px) && data.px > 0) {
           this.lastAutoHeight = `${Math.round(data.px)}px`;
-          if (!this.pinned) this.frame.style.height = this.lastAutoHeight;
+          if (!this.pinned) this.setFrameHeight(this.lastAutoHeight);
         }
         return;
       }
@@ -454,6 +511,8 @@ var EmbeddedDesigner = class {
           this.phase = "ready";
           this.clearTimeoutTimer();
           this.removeOverlay();
+          this.autoRecoverUsed = false;
+          this.scheduleRenewal(message.expiresAt);
           this.options.onReady?.(message);
           break;
         case "seatlayer.designer.saved":
@@ -465,10 +524,18 @@ var EmbeddedDesigner = class {
         case "seatlayer.designer.close":
           this.options.onClose?.(message);
           break;
-        case "seatlayer.designer.error":
-          this.showError(causeFromCode(message.code));
+        case "seatlayer.designer.error": {
+          const cause = causeFromCode(message.code);
+          if (cause === "expired" && this.autoRenewEnabled() && !this.autoRecoverUsed) {
+            this.autoRecoverUsed = true;
+            this.clearRenewTimer();
+            this.options.onRequestRelaunch();
+            return;
+          }
+          this.showError(cause);
           this.options.onError?.(message);
           break;
+        }
       }
     };
     this.options = options;
@@ -485,12 +552,17 @@ var EmbeddedDesigner = class {
     frame.allow = this.options.allow ?? "fullscreen; clipboard-write";
     frame.referrerPolicy = this.options.referrerPolicy ?? "origin";
     frame.src = url.toString();
-    frame.style.width = "100%";
-    frame.style.height = typeof this.options.height === "number" ? `${this.options.height}px` : "100%";
+    frame.style.setProperty("width", "100%", "important");
+    frame.style.setProperty(
+      "height",
+      typeof this.options.height === "number" ? `${this.options.height}px` : "100%",
+      "important"
+    );
     frame.style.border = "0";
     Object.assign(frame.style, this.options.style);
     if (this.options.className) frame.className = this.options.className;
     const container = resolveContainer2(this.options.container);
+    this.containerEl = container;
     window.addEventListener("message", this.handleMessage);
     container.append(frame);
     this.frame = frame;
@@ -521,10 +593,13 @@ var EmbeddedDesigner = class {
     this.stopFill();
     this.unpinFullscreen();
     this.clearTimeoutTimer();
+    this.clearRenewTimer();
     this.removeOverlay();
     this.restoreContainerStyle();
     this.frame?.remove();
     this.frame = null;
+    this.containerEl = null;
+    this.fillMode = null;
     this.designerOrigin = "";
     this.phase = "loading";
     this.lastAutoHeight = "";
@@ -539,24 +614,77 @@ var EmbeddedDesigner = class {
   fillEnabled() {
     return typeof this.options.height !== "number";
   }
+  /** Write an SDK-managed height with `!important` so a host theme can't win. */
+  setFrameHeight(value) {
+    this.frame?.style.setProperty("height", value, "important");
+  }
   /**
-   * Size the iframe so its bottom edge meets the bottom of the viewport
-   * (`window.innerHeight - top`), clamped to `minHeight`. No-op while pinned
-   * fullscreen (the pin fills the viewport itself).
+   * Decide whether the host gave the container a DEFINITE (bounded) height — a
+   * fixed block the embed should fill 100% of — versus a content-sized container
+   * that collapses to whatever the iframe measures (full-page usage).
+   *
+   * We drive the iframe to two extreme heights within a single synchronous task
+   * and watch whether the container follows: a bounded box barely moves, a
+   * content-sized one grows with the iframe. Because we restore the height before
+   * yielding, the browser only lays out — it never paints the extremes, so there
+   * is no visible flash. Works for px, resolved `%`, and flex (`flex:1;min-h:0`)
+   * heights, and leaves a mere `min-height` floor classified as content-sized so
+   * full-page hosts keep the old viewport-fill behavior.
+   */
+  detectFillMode() {
+    const container = this.containerEl;
+    const frame = this.frame;
+    if (this.pinned || !container || !frame) return this.fillMode ?? "viewport";
+    const measure = () => container.getBoundingClientRect().height;
+    const savedValue = frame.style.getPropertyValue("height");
+    const savedPriority = frame.style.getPropertyPriority("height");
+    frame.style.setProperty("height", "0px", "important");
+    const collapsed = measure();
+    frame.style.setProperty("height", `${FILL_PROBE_HEIGHT_PX}px`, "important");
+    const expanded = measure();
+    if (savedValue) frame.style.setProperty("height", savedValue, savedPriority);
+    else frame.style.removeProperty("height");
+    const tracksIframe = expanded - collapsed > FILL_PROBE_TRACK_EPSILON_PX;
+    const bounded = !tracksIframe && collapsed >= FILL_MIN_DEFINITE_HEIGHT_PX;
+    return bounded ? "container" : "viewport";
+  }
+  /**
+   * Size the iframe for the current fill verdict, clamped to `minHeight`. In
+   * container mode it fills 100% of the bounded block; in viewport mode its
+   * bottom edge meets the bottom of the viewport (`window.innerHeight - top`).
+   * No-op while pinned fullscreen (the pin fills the viewport itself).
    */
   applyFill() {
     if (!this.frame || this.pinned) return;
     const min = this.options.minHeight ?? DEFAULT_MIN_FILL_HEIGHT;
+    if (this.fillMode === "container" && this.containerEl) {
+      const target2 = Math.max(min, Math.round(this.containerEl.getBoundingClientRect().height));
+      this.setFrameHeight(`${target2}px`);
+      return;
+    }
     const top = this.frame.getBoundingClientRect().top;
     const target = Math.max(min, Math.round(window.innerHeight - top));
-    this.frame.style.height = `${target}px`;
+    this.setFrameHeight(`${target}px`);
+  }
+  /** Attach/detach the container ResizeObserver to match the current verdict. */
+  syncContainerObserver() {
+    const want = this.fillMode === "container" && !!this.containerEl && typeof ResizeObserver !== "undefined";
+    if (want && !this.resizeObs) {
+      this.resizeObs = new ResizeObserver(() => this.scheduleFill());
+      this.resizeObs.observe(this.containerEl);
+    } else if (!want && this.resizeObs) {
+      this.resizeObs.disconnect();
+      this.resizeObs = null;
+    }
   }
   startFill() {
+    this.fillMode = this.detectFillMode();
+    this.syncContainerObserver();
     this.applyFill();
     if (this.fillListening) return;
     this.fillListening = true;
-    window.addEventListener("resize", this.scheduleFill);
-    window.addEventListener("orientationchange", this.scheduleFill);
+    window.addEventListener("resize", this.scheduleReprobe);
+    window.addEventListener("orientationchange", this.scheduleReprobe);
     window.addEventListener("scroll", this.scheduleFill, { passive: true });
   }
   stopFill() {
@@ -564,10 +692,18 @@ var EmbeddedDesigner = class {
       cancelAnimationFrame(this.fillRaf);
       this.fillRaf = null;
     }
+    if (this.reprobeRaf !== null) {
+      cancelAnimationFrame(this.reprobeRaf);
+      this.reprobeRaf = null;
+    }
+    if (this.resizeObs) {
+      this.resizeObs.disconnect();
+      this.resizeObs = null;
+    }
     if (!this.fillListening) return;
     this.fillListening = false;
-    window.removeEventListener("resize", this.scheduleFill);
-    window.removeEventListener("orientationchange", this.scheduleFill);
+    window.removeEventListener("resize", this.scheduleReprobe);
+    window.removeEventListener("orientationchange", this.scheduleReprobe);
     window.removeEventListener("scroll", this.scheduleFill);
   }
   /**
@@ -579,16 +715,22 @@ var EmbeddedDesigner = class {
     if (this.pinned || !this.frame) return;
     this.pinned = true;
     this.frameStyleBeforeFs = this.frame.getAttribute("style");
-    Object.assign(this.frame.style, {
+    const pin = {
       position: "fixed",
-      inset: "0",
+      top: "0",
+      right: "0",
+      bottom: "0",
+      left: "0",
       width: "100vw",
       height: "100vh",
       margin: "0",
       border: "0",
-      zIndex: "2147483000",
+      "z-index": "2147483000",
       background: "#101625"
-    });
+    };
+    for (const [property, value] of Object.entries(pin)) {
+      this.frame.style.setProperty(property, value, "important");
+    }
     const docEl = document.documentElement;
     this.docOverflowBeforeFs = docEl.style.overflow;
     docEl.style.overflow = "hidden";
@@ -609,7 +751,7 @@ var EmbeddedDesigner = class {
       if (this.frameStyleBeforeFs === null) this.frame.removeAttribute("style");
       else this.frame.setAttribute("style", this.frameStyleBeforeFs);
       if (this.fillEnabled()) this.applyFill();
-      else if (this.autoResizeEnabled() && this.lastAutoHeight) this.frame.style.height = this.lastAutoHeight;
+      else if (this.autoResizeEnabled() && this.lastAutoHeight) this.setFrameHeight(this.lastAutoHeight);
     }
     this.frameStyleBeforeFs = null;
     if (this.docOverflowBeforeFs !== null) {
@@ -631,6 +773,48 @@ var EmbeddedDesigner = class {
       this.timeoutTimer = null;
     }
   }
+  /**
+   * Auto-renewal (proactive + one expiry recovery) is on when the host wired a
+   * relaunch hook and did not opt out. Without the hook there is nothing to call,
+   * so it is a no-op.
+   */
+  autoRenewEnabled() {
+    return !!this.options.onRequestRelaunch && this.options.autoRenewSession !== false;
+  }
+  clearRenewTimer() {
+    if (this.renewTimer !== null) {
+      clearTimeout(this.renewTimer);
+      this.renewTimer = null;
+    }
+  }
+  /**
+   * Arm the proactive renewal timer from a `ready` message's `expiresAt` (epoch
+   * ms). We relaunch a comfortable lead before expiry so the host can mint a fresh
+   * session and swap `designerUrl` without the user ever seeing the expiry card:
+   *
+   * - normal TTL (≥ 15 min): renew {@link RENEW_LEAD_MS} (~3 min) before expiry;
+   * - short TTL (< 15 min): renew after {@link RENEW_SHORT_TTL_FRACTION} (80%) of
+   *   the remaining life, so the lead can't overshoot the whole session;
+   * - either way, never sooner than {@link RENEW_MIN_DELAY_MS} (30s) after `ready`
+   *   so a burst of `ready` messages can't spin the host.
+   *
+   * Re-armed on every `ready`; cleared on destroy / setDesignerUrl (via re-mount).
+   * A no-op when auto-renewal is off or `expiresAt` is missing/already past — the
+   * expiry-error path recovers a session that has already lapsed.
+   */
+  scheduleRenewal(expiresAt) {
+    this.clearRenewTimer();
+    if (!this.autoRenewEnabled()) return;
+    if (typeof expiresAt !== "number" || !Number.isFinite(expiresAt)) return;
+    const remaining = expiresAt - Date.now();
+    if (remaining <= 0) return;
+    const lead = remaining < RENEW_SHORT_TTL_MS ? remaining * RENEW_SHORT_TTL_FRACTION : remaining - RENEW_LEAD_MS;
+    const delay = Math.max(RENEW_MIN_DELAY_MS, lead);
+    this.renewTimer = setTimeout(() => {
+      this.renewTimer = null;
+      if (this.autoRenewEnabled()) this.options.onRequestRelaunch();
+    }, delay);
+  }
   ensureContainerPositioned(container) {
     const position = getComputedStyle(container).position;
     if (position === "static") {