@seatlayer/js 0.22.0 → 0.24.0

package/dist/index.d.cts

@@ -157,6 +157,15 @@ declare class SeatingChart {
     constructor(options: SeatingChartOptions);
     /** Fetch the chart, mount the renderer, seed statuses and go live. Idempotent. */
     render(): Promise<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.
+     */
+    private buildBadge;
     private placeTooltip;
     private updateTooltip;
     /** Current selection with prices resolved from the chart categories. */
@@ -257,15 +266,28 @@ interface EmbeddedDesignerOptions {
     /**
      * How to size the iframe's height. The Designer is a full application (its
      * shell is `position:fixed; height:100dvh`), not flowing content, so it should
-     * fill the viewport rather than be measured.
+     * fill its box rather than be measured.
      *
-     * - `'fill'` (default): grow the iframe so its bottom edge reaches the bottom
-     *   of the viewport — `window.innerHeight - iframe.top`, clamped to `minHeight`
-     *   — recomputed (rAF-throttled) on `resize` / `orientationchange` / `scroll`.
-     *   The legacy `seatlayer.designer.resize` message is ignored in this mode: it
-     *   is circular, because the fixed-position shell just echoes the iframe height.
+     * - `'fill'` (default): container-aware. On mount the SDK probes whether the
+     *   host gave the container a DEFINITE (bounded) height:
+     *     - **Bounded container** (a fixed-height block, `height`/`max-height`,
+     *       `flex:1; min-h:0`, a resolved `%`, etc.) → the iframe fills 100% of
+     *       that block and tracks its size live via a `ResizeObserver`.
+     *     - **Content-sized container** (the block collapses to whatever the iframe
+     *       measures — typical full-page usage) → the iframe grows so its bottom
+     *       edge reaches the bottom of the viewport (`window.innerHeight -
+     *       iframe.top`), recomputed (rAF-throttled) on `resize` /
+     *       `orientationchange` / `scroll`.
+     *   Either way the result is clamped to `minHeight`. The verdict is cached but
+     *   re-probed on `resize`/`orientationchange` so a responsive host layout can
+     *   flip between the two. The legacy `seatlayer.designer.resize` message is
+     *   ignored in `'fill'` mode: it is circular, because the fixed-position shell
+     *   just echoes the iframe height.
      * - a number: a fixed pixel height. In this mode the legacy resize message is
      *   still honoured (unless `autoResize` is `false`) so older hosts keep growing.
+     *
+     * All SDK-managed heights are written with `!important` priority so a host
+     * theme's `iframe { height: … !important }` cannot override them.
      */
     height?: 'fill' | number;
     /** Minimum height (px) that `'fill'` mode clamps to. Defaults to `480`. */
@@ -282,8 +304,30 @@ interface EmbeddedDesignerOptions {
      * fresh Designer session and call `setDesignerUrl()` with the new URL, which
      * recreates the iframe and returns to the loading state. When omitted, "Try
      * again" reloads the current `designerUrl` in place.
+     *
+     * When supplied, it also powers automatic session renewal — see
+     * {@link EmbeddedDesignerOptions.autoRenewSession}.
      */
     onRequestRelaunch?: () => void;
+    /**
+     * Keep long editing sessions alive without the user ever hitting the expiry
+     * wall. Designer sessions are short-lived security tokens; when the host wires
+     * `onRequestRelaunch` the SDK, with this enabled, will:
+     *
+     * - **Renew proactively.** From each `ready` message's `expiresAt` it schedules
+     *   a silent relaunch shortly before the session lapses (~3 min ahead; for a
+     *   TTL under 15 min it renews after 80% of the remaining life, and never
+     *   sooner than 30s after `ready`). The host mints a fresh session and swaps
+     *   `designerUrl`, so the editor keeps working with no error card.
+     * - **Recover on expiry.** If an expiry error still slips through (a slept
+     *   laptop woke past the renewal window, say) it makes ONE automatic relaunch
+     *   attempt before showing the "Try again" card, and only falls back to the
+     *   card if that relaunch also fails.
+     *
+     * Defaults to `true` whenever `onRequestRelaunch` is provided; a no-op without
+     * it. Set `false` to keep the fully manual "Try again" behavior.
+     */
+    autoRenewSession?: boolean;
     onReady?: (message: EmbeddedDesignerMessage) => void;
     onSaved?: (message: EmbeddedDesignerMessage) => void;
     onPublished?: (message: EmbeddedDesignerMessage) => void;
@@ -297,6 +341,14 @@ declare class EmbeddedDesigner {
     private designerOrigin;
     private overlay;
     private timeoutTimer;
+    /** Proactive session-renewal timer; armed from each `ready`, cleared on re-mount. */
+    private renewTimer;
+    /**
+     * 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.
+     */
+    private autoRecoverUsed;
     private phase;
     private restoreContainerPosition;
     private pinned;
@@ -307,7 +359,14 @@ declare class EmbeddedDesigner {
     /** Latest height (px string) the Designer reported; re-applied after unpin. */
     private lastAutoHeight;
     private fillRaf;
+    private reprobeRaf;
     private fillListening;
+    /** Resolved container element (fill measurement + ResizeObserver target). */
+    private containerEl;
+    /** Cached fill verdict: 'container' = bounded block, 'viewport' = full page. */
+    private fillMode;
+    /** Live block-size tracking in container-fill mode; disconnected on destroy. */
+    private resizeObs;
     constructor(options: EmbeddedDesignerOptions);
     mount(): HTMLIFrameElement;
     /** Replace the iframe instead of assigning a new fragment to an existing one. */
@@ -318,14 +377,39 @@ declare class EmbeddedDesigner {
     private autoResizeEnabled;
     /** Fill mode is the default; a numeric `height` opts into a fixed pixel box. */
     private fillEnabled;
+    /** Write an SDK-managed height with `!important` so a host theme can't win. */
+    private setFrameHeight;
     /**
-     * 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.
+     */
+    private detectFillMode;
+    /**
+     * 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).
      */
     private applyFill;
-    /** rAF-throttled fill recompute, so a burst of scroll/resize ticks coalesces. */
+    /** rAF-throttled fill recompute, so a burst of scroll/RO ticks coalesces. */
     private scheduleFill;
+    /**
+     * 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.
+     */
+    private scheduleReprobe;
+    /** Attach/detach the container ResizeObserver to match the current verdict. */
+    private syncContainerObserver;
     private startFill;
     private stopFill;
     /**
@@ -337,6 +421,29 @@ declare class EmbeddedDesigner {
     /** Undo `pinFullscreen`: restore the iframe style + scroll lock. Idempotent. */
     private unpinFullscreen;
     private clearTimeoutTimer;
+    /**
+     * 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.
+     */
+    private autoRenewEnabled;
+    private clearRenewTimer;
+    /**
+     * 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.
+     */
+    private scheduleRenewal;
     private ensureContainerPositioned;
     private restoreContainerStyle;
     private removeOverlay;

package/dist/index.d.ts

@@ -157,6 +157,15 @@ declare class SeatingChart {
     constructor(options: SeatingChartOptions);
     /** Fetch the chart, mount the renderer, seed statuses and go live. Idempotent. */
     render(): Promise<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.
+     */
+    private buildBadge;
     private placeTooltip;
     private updateTooltip;
     /** Current selection with prices resolved from the chart categories. */
@@ -257,15 +266,28 @@ interface EmbeddedDesignerOptions {
     /**
      * How to size the iframe's height. The Designer is a full application (its
      * shell is `position:fixed; height:100dvh`), not flowing content, so it should
-     * fill the viewport rather than be measured.
+     * fill its box rather than be measured.
      *
-     * - `'fill'` (default): grow the iframe so its bottom edge reaches the bottom
-     *   of the viewport — `window.innerHeight - iframe.top`, clamped to `minHeight`
-     *   — recomputed (rAF-throttled) on `resize` / `orientationchange` / `scroll`.
-     *   The legacy `seatlayer.designer.resize` message is ignored in this mode: it
-     *   is circular, because the fixed-position shell just echoes the iframe height.
+     * - `'fill'` (default): container-aware. On mount the SDK probes whether the
+     *   host gave the container a DEFINITE (bounded) height:
+     *     - **Bounded container** (a fixed-height block, `height`/`max-height`,
+     *       `flex:1; min-h:0`, a resolved `%`, etc.) → the iframe fills 100% of
+     *       that block and tracks its size live via a `ResizeObserver`.
+     *     - **Content-sized container** (the block collapses to whatever the iframe
+     *       measures — typical full-page usage) → the iframe grows so its bottom
+     *       edge reaches the bottom of the viewport (`window.innerHeight -
+     *       iframe.top`), recomputed (rAF-throttled) on `resize` /
+     *       `orientationchange` / `scroll`.
+     *   Either way the result is clamped to `minHeight`. The verdict is cached but
+     *   re-probed on `resize`/`orientationchange` so a responsive host layout can
+     *   flip between the two. The legacy `seatlayer.designer.resize` message is
+     *   ignored in `'fill'` mode: it is circular, because the fixed-position shell
+     *   just echoes the iframe height.
      * - a number: a fixed pixel height. In this mode the legacy resize message is
      *   still honoured (unless `autoResize` is `false`) so older hosts keep growing.
+     *
+     * All SDK-managed heights are written with `!important` priority so a host
+     * theme's `iframe { height: … !important }` cannot override them.
      */
     height?: 'fill' | number;
     /** Minimum height (px) that `'fill'` mode clamps to. Defaults to `480`. */
@@ -282,8 +304,30 @@ interface EmbeddedDesignerOptions {
      * fresh Designer session and call `setDesignerUrl()` with the new URL, which
      * recreates the iframe and returns to the loading state. When omitted, "Try
      * again" reloads the current `designerUrl` in place.
+     *
+     * When supplied, it also powers automatic session renewal — see
+     * {@link EmbeddedDesignerOptions.autoRenewSession}.
      */
     onRequestRelaunch?: () => void;
+    /**
+     * Keep long editing sessions alive without the user ever hitting the expiry
+     * wall. Designer sessions are short-lived security tokens; when the host wires
+     * `onRequestRelaunch` the SDK, with this enabled, will:
+     *
+     * - **Renew proactively.** From each `ready` message's `expiresAt` it schedules
+     *   a silent relaunch shortly before the session lapses (~3 min ahead; for a
+     *   TTL under 15 min it renews after 80% of the remaining life, and never
+     *   sooner than 30s after `ready`). The host mints a fresh session and swaps
+     *   `designerUrl`, so the editor keeps working with no error card.
+     * - **Recover on expiry.** If an expiry error still slips through (a slept
+     *   laptop woke past the renewal window, say) it makes ONE automatic relaunch
+     *   attempt before showing the "Try again" card, and only falls back to the
+     *   card if that relaunch also fails.
+     *
+     * Defaults to `true` whenever `onRequestRelaunch` is provided; a no-op without
+     * it. Set `false` to keep the fully manual "Try again" behavior.
+     */
+    autoRenewSession?: boolean;
     onReady?: (message: EmbeddedDesignerMessage) => void;
     onSaved?: (message: EmbeddedDesignerMessage) => void;
     onPublished?: (message: EmbeddedDesignerMessage) => void;
@@ -297,6 +341,14 @@ declare class EmbeddedDesigner {
     private designerOrigin;
     private overlay;
     private timeoutTimer;
+    /** Proactive session-renewal timer; armed from each `ready`, cleared on re-mount. */
+    private renewTimer;
+    /**
+     * 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.
+     */
+    private autoRecoverUsed;
     private phase;
     private restoreContainerPosition;
     private pinned;
@@ -307,7 +359,14 @@ declare class EmbeddedDesigner {
     /** Latest height (px string) the Designer reported; re-applied after unpin. */
     private lastAutoHeight;
     private fillRaf;
+    private reprobeRaf;
     private fillListening;
+    /** Resolved container element (fill measurement + ResizeObserver target). */
+    private containerEl;
+    /** Cached fill verdict: 'container' = bounded block, 'viewport' = full page. */
+    private fillMode;
+    /** Live block-size tracking in container-fill mode; disconnected on destroy. */
+    private resizeObs;
     constructor(options: EmbeddedDesignerOptions);
     mount(): HTMLIFrameElement;
     /** Replace the iframe instead of assigning a new fragment to an existing one. */
@@ -318,14 +377,39 @@ declare class EmbeddedDesigner {
     private autoResizeEnabled;
     /** Fill mode is the default; a numeric `height` opts into a fixed pixel box. */
     private fillEnabled;
+    /** Write an SDK-managed height with `!important` so a host theme can't win. */
+    private setFrameHeight;
     /**
-     * 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.
+     */
+    private detectFillMode;
+    /**
+     * 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).
      */
     private applyFill;
-    /** rAF-throttled fill recompute, so a burst of scroll/resize ticks coalesces. */
+    /** rAF-throttled fill recompute, so a burst of scroll/RO ticks coalesces. */
     private scheduleFill;
+    /**
+     * 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.
+     */
+    private scheduleReprobe;
+    /** Attach/detach the container ResizeObserver to match the current verdict. */
+    private syncContainerObserver;
     private startFill;
     private stopFill;
     /**
@@ -337,6 +421,29 @@ declare class EmbeddedDesigner {
     /** Undo `pinFullscreen`: restore the iframe style + scroll lock. Idempotent. */
     private unpinFullscreen;
     private clearTimeoutTimer;
+    /**
+     * 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.
+     */
+    private autoRenewEnabled;
+    private clearRenewTimer;
+    /**
+     * 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.
+     */
+    private scheduleRenewal;
     private ensureContainerPositioned;
     private restoreContainerStyle;
     private removeOverlay;