@seatlayer/js 0.17.0 → 0.18.1

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { PickerSeat, SeatHoverDetails, ChartDoc, ChartTheme, ExpandedSeat } from '@seatlayer/core';
+import { PickerSeat, SeatHoverDetails, PickerTransport, ChartDoc, ChartTheme, ExpandedSeat } from '@seatlayer/core';
 export { ExpandedSeat, SeatHoverDetails } from '@seatlayer/core';
 
 /**
@@ -242,6 +242,25 @@ interface EmbeddedDesignerOptions {
     style?: Partial<CSSStyleDeclaration>;
     allow?: string;
     referrerPolicy?: ReferrerPolicy;
+    /**
+     * Show the built-in branded loading skeleton and error/expiry card inside the
+     * container while the Designer boots. Defaults to `true`. Set `false` when the
+     * host renders its own loading and error chrome.
+     */
+    showLoadingState?: boolean;
+    /**
+     * If the Designer never posts `ready` within this many milliseconds, the host
+     * transitions to the error card with a timeout message. Defaults to `20000`.
+     * Only used when `showLoadingState` is enabled.
+     */
+    loadingTimeoutMs?: number;
+    /**
+     * Called when the user presses "Try again" on the error card. Use it to mint a
+     * 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.
+     */
+    onRequestRelaunch?: () => void;
     onReady?: (message: EmbeddedDesignerMessage) => void;
     onSaved?: (message: EmbeddedDesignerMessage) => void;
     onPublished?: (message: EmbeddedDesignerMessage) => void;
@@ -253,12 +272,30 @@ declare class EmbeddedDesigner {
     private options;
     private frame;
     private designerOrigin;
+    private overlay;
+    private timeoutTimer;
+    private phase;
+    private restoreContainerPosition;
     constructor(options: EmbeddedDesignerOptions);
     mount(): HTMLIFrameElement;
     /** Replace the iframe instead of assigning a new fragment to an existing one. */
     setDesignerUrl(designerUrl: string): HTMLIFrameElement;
     getIframe(): HTMLIFrameElement | null;
     destroy(): void;
+    private loadingStateEnabled;
+    private clearTimeoutTimer;
+    private ensureContainerPositioned;
+    private restoreContainerStyle;
+    private removeOverlay;
+    private showError;
+    private handleTryAgain;
+    /**
+     * Build (or rebuild) the overlay for the given phase. A single overlay element
+     * is reused so we never stack stale skeletons or cards.
+     */
+    private renderOverlay;
+    private buildSkeleton;
+    private buildErrorCard;
     private handleMessage;
 }
 
@@ -317,6 +354,16 @@ interface CheckoutHandoff {
     /** Convenience total in major units (Σ unitPrice × quantity). */
     total: number;
 }
+/** Host-authoritative pricing — see {@link SeatPickerOptions.pricing}. */
+interface SeatPickerPricing {
+    /** Unit prices by category key: a flat number, or `{ base, tiers: { tierId: price } }`. */
+    prices?: Record<string, number | {
+        base?: number;
+        tiers?: Record<string, number>;
+    }>;
+    /** Custom money renderer (e.g. `(n) => n + '€'`). Defaults to Intl currency formatting. */
+    formatter?: (amount: number, currency: string) => string;
+}
 /** Host theme overrides — any subset; unset keys fall back to the org's chart theme, then defaults. */
 interface SeatPickerTheme {
     /** Brand accent (CTA, active chips, hold pill). */
@@ -349,6 +396,12 @@ interface SeatPickerOptions {
     event: string;
     /** API origin. Defaults to https://api.seatlayer.io. */
     apiBase?: string;
+    /**
+     * Custom data transport. Defaults to the CORS-trivial PubApi against
+     * `apiBase`. Inject to run the widget against another backend adapter (the
+     * SeatLayer dashboard's own transport) or a fully local mock (demos).
+     */
+    transport?: PickerTransport;
     /** Reserved for future authenticated rendering. */
     publicKey?: string;
     /** Max seats selectable at once (default 10). */
@@ -361,8 +414,23 @@ interface SeatPickerOptions {
     currency?: string;
     /** Colorblind-safe rendering (Okabe-Ito palette, hollow booked seats). */
     colorblindSafe?: boolean;
+    /**
+     * Hide the "Powered by SeatLayer" attribution badge in the side panel foot.
+     * The chart theme's own `hideBadge` flag (paid orgs) also hides it — the badge
+     * is shown only when BOTH this option and the theme flag are unset/false.
+     */
+    hideBadge?: boolean;
     /** Host theme overrides — see SeatPickerTheme. */
     theme?: SeatPickerTheme;
+    /**
+     * Host-authoritative pricing. When your shop charges different prices than
+     * the chart's stored category prices, pass them here so the buyer sees the
+     * price they will actually pay — on the map tooltip, confirm popover, price
+     * panel, tray, totals, and in the checkout handoff's line items. Keyed by
+     * category key; per-tier overrides nest under `tiers`. Unlisted categories
+     * fall back to the chart price.
+     */
+    pricing?: SeatPickerPricing;
     /** Hold TTL in ms passed to hold(); server clamps to its own limits. */
     holdTtlMs?: number;
     /**
@@ -454,23 +522,27 @@ declare class SeatPicker {
     private confirmEl;
     private confirmSeat;
     private srEl;
-    private a11yFilter;
     private baQty;
     private baCat;
     private bestAvailableConfirm;
     private releasingHold;
+    /** Event sales window is closed (read-only load state / live close). */
+    private salesClosed;
+    /** Every seated category's live availability is 0 (sold-out overlay is up). */
+    private soldOut;
+    private soldoutEl;
+    /** Resolved colorblind-safe state — stored preference wins over the option. */
+    private cbSafe;
     private rungsEl;
     private floorsEl;
     private secCardEl;
     private viewEl;
     private viewCleanup;
     private allSeatsCache;
-    private miniEl;
     private miniCanvas;
     private miniBase;
     private miniTf;
     private priceBandKeys;
-    private priceFilterEl;
     /** Last surfaced section summary (re-rendered when the price band changes). */
     private lastSection;
     /** Section card collapsed to its slim pill (seat-picking has begun). */
@@ -489,6 +561,18 @@ declare class SeatPicker {
     private holdingLabels;
     private ctaPhase;
     private a11yChipsEl;
+    private fsFallback;
+    private fsChangeHandler;
+    private fsEscHandler;
+    /**
+     * Eager sightline preview for the confirm card: a cheap generated forward
+     * view (or the organizer's real photo) plus a "Nm to stage · clear
+     * sightline" line — the premium at-a-glance moment; click opens the 360.
+     */
+    private confirmThumbHtml;
+    /** Full screen via the native API, falling back to a fixed-position overlay (iOS Safari). */
+    private toggleFullscreen;
+    private setFsFallback;
     private cbEl;
     private modalScrim;
     private prevFocus;
@@ -516,6 +600,41 @@ declare class SeatPicker {
     private buildExtendPrompt;
     /** Success overlay + onBooked fire when the held seats settle to booked. */
     private buildBookedOverlay;
+    /**
+     * Localized string with a literal fallback. `t()` returns the key itself for
+     * unknown keys, so this collapses that to `fallback` — while still honoring a
+     * host `messages` override (which makes `t()` return the override, not the key).
+     */
+    private tf;
+    /** Sold-out overlay — centered over the map, disabled waitlist stub (Gap 2). */
+    private buildSoldoutOverlay;
+    /**
+     * Recompute the sold-out state on every price/availability sync. Sold-out ⇔
+     * every SEATED category's live free count is 0. Suppressed when the chart has
+     * GA areas (GA capacity isn't per-seat, so seated counts would read 0 and
+     * falsely block standing room) — mirrors the public page. Clears live when WS
+     * frees a seat up.
+     */
+    private syncSoldout;
+    /**
+     * Pure sold-out predicate: every SEATED category's free count is 0, there is at
+     * least one seated category, and there are no GA areas (GA capacity isn't
+     * per-seat, so seated counts read 0 and would falsely block standing room).
+     * `left` is seeded implicitly — a missing key means a fully-booked tier (0 free).
+     */
+    private isSoldOut;
+    /**
+     * Sales-closed read-only state (Gap 3): persistent header pill, disabled CTA
+     * with a closed label, and frozen best-available / GA controls. `setSalesClosed`
+     * is the reactive entry (live 409 event_closed); `applySalesClosed` is the
+     * idempotent DOM apply used at load and on transition.
+     */
+    private setSalesClosed;
+    private applySalesClosed;
+    /** The badge is hidden when the host opts out OR the org's theme sets hideBadge. */
+    private badgeHidden;
+    /** Attribution badge in the side-panel foot (Gap 7). Hidden per host/theme. */
+    private buildBadge;
     /**
      * Create the positioned flex containers that own every persistent map overlay.
      * Appended once after controller.render(); each chrome piece is then appended
@@ -571,7 +690,7 @@ declare class SeatPicker {
     private drawMinimapRect;
     /** Minimap click → focus the section under the point (or overview on a miss). */
     private minimapJump;
-    /** Effective price of a category (first tier when tiered, else base price). */
+    /** Effective display price of a category: host pricing override → first tier → base. */
     private catPrice;
     /** Derive price bands: one chip per distinct price (≤5), else quantile ranges. */
     private priceBands;
@@ -622,7 +741,22 @@ declare class SeatPicker {
     private openSeatView;
     private closeSeatView;
     private money;
+    /**
+     * The price the buyer will actually pay for a category (+tier): the host's
+     * `pricing` override when present, else the chart's stored price. Every
+     * price the widget DISPLAYS or hands off must flow through here — a map
+     * that shows one price while checkout charges another destroys trust.
+     */
+    private paidPrice;
     private syncPrices;
+    /**
+     * Live-activity strip: turn WS availability deltas into one quiet line of
+     * social proof ("2 seats just taken in VIP · 118 left"). Diffs per-category
+     * counts on every status change — no per-seat payload needed. Skips the very
+     * first computation (initial load is not "activity").
+     */
+    private narrateAvailability;
+    private lastCatAvail;
     /** A live delta took one of OUR selected (not yet held) seats — evict + tell the buyer. */
     private evictTakenSelections;
     private syncTray;
@@ -649,6 +783,15 @@ declare class SeatPicker {
     private emitHoldChange;
     private toast;
     private placeTooltip;
+    /**
+     * Row label without the redundant section prefix. Charts commonly name row
+     * objects "104-A" while the Section column already shows "104" — so the Row
+     * cell repeats the section and, in the compact hover card, truncates to
+     * "10…". Strip a leading "<section><sep>" so Row reads a clean "A". Only when
+     * the prefix is exact (won't touch "1040-A" under section "104"); otherwise
+     * the label is shown verbatim.
+     */
+    private rowShort;
     private updateTooltip;
     getSelection(): PickerSeat[];
     /** Current active/restored hold reflected in the tray. */

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { PickerSeat, SeatHoverDetails, ChartDoc, ChartTheme, ExpandedSeat } from '@seatlayer/core';
+import { PickerSeat, SeatHoverDetails, PickerTransport, ChartDoc, ChartTheme, ExpandedSeat } from '@seatlayer/core';
 export { ExpandedSeat, SeatHoverDetails } from '@seatlayer/core';
 
 /**
@@ -242,6 +242,25 @@ interface EmbeddedDesignerOptions {
     style?: Partial<CSSStyleDeclaration>;
     allow?: string;
     referrerPolicy?: ReferrerPolicy;
+    /**
+     * Show the built-in branded loading skeleton and error/expiry card inside the
+     * container while the Designer boots. Defaults to `true`. Set `false` when the
+     * host renders its own loading and error chrome.
+     */
+    showLoadingState?: boolean;
+    /**
+     * If the Designer never posts `ready` within this many milliseconds, the host
+     * transitions to the error card with a timeout message. Defaults to `20000`.
+     * Only used when `showLoadingState` is enabled.
+     */
+    loadingTimeoutMs?: number;
+    /**
+     * Called when the user presses "Try again" on the error card. Use it to mint a
+     * 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.
+     */
+    onRequestRelaunch?: () => void;
     onReady?: (message: EmbeddedDesignerMessage) => void;
     onSaved?: (message: EmbeddedDesignerMessage) => void;
     onPublished?: (message: EmbeddedDesignerMessage) => void;
@@ -253,12 +272,30 @@ declare class EmbeddedDesigner {
     private options;
     private frame;
     private designerOrigin;
+    private overlay;
+    private timeoutTimer;
+    private phase;
+    private restoreContainerPosition;
     constructor(options: EmbeddedDesignerOptions);
     mount(): HTMLIFrameElement;
     /** Replace the iframe instead of assigning a new fragment to an existing one. */
     setDesignerUrl(designerUrl: string): HTMLIFrameElement;
     getIframe(): HTMLIFrameElement | null;
     destroy(): void;
+    private loadingStateEnabled;
+    private clearTimeoutTimer;
+    private ensureContainerPositioned;
+    private restoreContainerStyle;
+    private removeOverlay;
+    private showError;
+    private handleTryAgain;
+    /**
+     * Build (or rebuild) the overlay for the given phase. A single overlay element
+     * is reused so we never stack stale skeletons or cards.
+     */
+    private renderOverlay;
+    private buildSkeleton;
+    private buildErrorCard;
     private handleMessage;
 }
 
@@ -317,6 +354,16 @@ interface CheckoutHandoff {
     /** Convenience total in major units (Σ unitPrice × quantity). */
     total: number;
 }
+/** Host-authoritative pricing — see {@link SeatPickerOptions.pricing}. */
+interface SeatPickerPricing {
+    /** Unit prices by category key: a flat number, or `{ base, tiers: { tierId: price } }`. */
+    prices?: Record<string, number | {
+        base?: number;
+        tiers?: Record<string, number>;
+    }>;
+    /** Custom money renderer (e.g. `(n) => n + '€'`). Defaults to Intl currency formatting. */
+    formatter?: (amount: number, currency: string) => string;
+}
 /** Host theme overrides — any subset; unset keys fall back to the org's chart theme, then defaults. */
 interface SeatPickerTheme {
     /** Brand accent (CTA, active chips, hold pill). */
@@ -349,6 +396,12 @@ interface SeatPickerOptions {
     event: string;
     /** API origin. Defaults to https://api.seatlayer.io. */
     apiBase?: string;
+    /**
+     * Custom data transport. Defaults to the CORS-trivial PubApi against
+     * `apiBase`. Inject to run the widget against another backend adapter (the
+     * SeatLayer dashboard's own transport) or a fully local mock (demos).
+     */
+    transport?: PickerTransport;
     /** Reserved for future authenticated rendering. */
     publicKey?: string;
     /** Max seats selectable at once (default 10). */
@@ -361,8 +414,23 @@ interface SeatPickerOptions {
     currency?: string;
     /** Colorblind-safe rendering (Okabe-Ito palette, hollow booked seats). */
     colorblindSafe?: boolean;
+    /**
+     * Hide the "Powered by SeatLayer" attribution badge in the side panel foot.
+     * The chart theme's own `hideBadge` flag (paid orgs) also hides it — the badge
+     * is shown only when BOTH this option and the theme flag are unset/false.
+     */
+    hideBadge?: boolean;
     /** Host theme overrides — see SeatPickerTheme. */
     theme?: SeatPickerTheme;
+    /**
+     * Host-authoritative pricing. When your shop charges different prices than
+     * the chart's stored category prices, pass them here so the buyer sees the
+     * price they will actually pay — on the map tooltip, confirm popover, price
+     * panel, tray, totals, and in the checkout handoff's line items. Keyed by
+     * category key; per-tier overrides nest under `tiers`. Unlisted categories
+     * fall back to the chart price.
+     */
+    pricing?: SeatPickerPricing;
     /** Hold TTL in ms passed to hold(); server clamps to its own limits. */
     holdTtlMs?: number;
     /**
@@ -454,23 +522,27 @@ declare class SeatPicker {
     private confirmEl;
     private confirmSeat;
     private srEl;
-    private a11yFilter;
     private baQty;
     private baCat;
     private bestAvailableConfirm;
     private releasingHold;
+    /** Event sales window is closed (read-only load state / live close). */
+    private salesClosed;
+    /** Every seated category's live availability is 0 (sold-out overlay is up). */
+    private soldOut;
+    private soldoutEl;
+    /** Resolved colorblind-safe state — stored preference wins over the option. */
+    private cbSafe;
     private rungsEl;
     private floorsEl;
     private secCardEl;
     private viewEl;
     private viewCleanup;
     private allSeatsCache;
-    private miniEl;
     private miniCanvas;
     private miniBase;
     private miniTf;
     private priceBandKeys;
-    private priceFilterEl;
     /** Last surfaced section summary (re-rendered when the price band changes). */
     private lastSection;
     /** Section card collapsed to its slim pill (seat-picking has begun). */
@@ -489,6 +561,18 @@ declare class SeatPicker {
     private holdingLabels;
     private ctaPhase;
     private a11yChipsEl;
+    private fsFallback;
+    private fsChangeHandler;
+    private fsEscHandler;
+    /**
+     * Eager sightline preview for the confirm card: a cheap generated forward
+     * view (or the organizer's real photo) plus a "Nm to stage · clear
+     * sightline" line — the premium at-a-glance moment; click opens the 360.
+     */
+    private confirmThumbHtml;
+    /** Full screen via the native API, falling back to a fixed-position overlay (iOS Safari). */
+    private toggleFullscreen;
+    private setFsFallback;
     private cbEl;
     private modalScrim;
     private prevFocus;
@@ -516,6 +600,41 @@ declare class SeatPicker {
     private buildExtendPrompt;
     /** Success overlay + onBooked fire when the held seats settle to booked. */
     private buildBookedOverlay;
+    /**
+     * Localized string with a literal fallback. `t()` returns the key itself for
+     * unknown keys, so this collapses that to `fallback` — while still honoring a
+     * host `messages` override (which makes `t()` return the override, not the key).
+     */
+    private tf;
+    /** Sold-out overlay — centered over the map, disabled waitlist stub (Gap 2). */
+    private buildSoldoutOverlay;
+    /**
+     * Recompute the sold-out state on every price/availability sync. Sold-out ⇔
+     * every SEATED category's live free count is 0. Suppressed when the chart has
+     * GA areas (GA capacity isn't per-seat, so seated counts would read 0 and
+     * falsely block standing room) — mirrors the public page. Clears live when WS
+     * frees a seat up.
+     */
+    private syncSoldout;
+    /**
+     * Pure sold-out predicate: every SEATED category's free count is 0, there is at
+     * least one seated category, and there are no GA areas (GA capacity isn't
+     * per-seat, so seated counts read 0 and would falsely block standing room).
+     * `left` is seeded implicitly — a missing key means a fully-booked tier (0 free).
+     */
+    private isSoldOut;
+    /**
+     * Sales-closed read-only state (Gap 3): persistent header pill, disabled CTA
+     * with a closed label, and frozen best-available / GA controls. `setSalesClosed`
+     * is the reactive entry (live 409 event_closed); `applySalesClosed` is the
+     * idempotent DOM apply used at load and on transition.
+     */
+    private setSalesClosed;
+    private applySalesClosed;
+    /** The badge is hidden when the host opts out OR the org's theme sets hideBadge. */
+    private badgeHidden;
+    /** Attribution badge in the side-panel foot (Gap 7). Hidden per host/theme. */
+    private buildBadge;
     /**
      * Create the positioned flex containers that own every persistent map overlay.
      * Appended once after controller.render(); each chrome piece is then appended
@@ -571,7 +690,7 @@ declare class SeatPicker {
     private drawMinimapRect;
     /** Minimap click → focus the section under the point (or overview on a miss). */
     private minimapJump;
-    /** Effective price of a category (first tier when tiered, else base price). */
+    /** Effective display price of a category: host pricing override → first tier → base. */
     private catPrice;
     /** Derive price bands: one chip per distinct price (≤5), else quantile ranges. */
     private priceBands;
@@ -622,7 +741,22 @@ declare class SeatPicker {
     private openSeatView;
     private closeSeatView;
     private money;
+    /**
+     * The price the buyer will actually pay for a category (+tier): the host's
+     * `pricing` override when present, else the chart's stored price. Every
+     * price the widget DISPLAYS or hands off must flow through here — a map
+     * that shows one price while checkout charges another destroys trust.
+     */
+    private paidPrice;
     private syncPrices;
+    /**
+     * Live-activity strip: turn WS availability deltas into one quiet line of
+     * social proof ("2 seats just taken in VIP · 118 left"). Diffs per-category
+     * counts on every status change — no per-seat payload needed. Skips the very
+     * first computation (initial load is not "activity").
+     */
+    private narrateAvailability;
+    private lastCatAvail;
     /** A live delta took one of OUR selected (not yet held) seats — evict + tell the buyer. */
     private evictTakenSelections;
     private syncTray;
@@ -649,6 +783,15 @@ declare class SeatPicker {
     private emitHoldChange;
     private toast;
     private placeTooltip;
+    /**
+     * Row label without the redundant section prefix. Charts commonly name row
+     * objects "104-A" while the Section column already shows "104" — so the Row
+     * cell repeats the section and, in the compact hover card, truncates to
+     * "10…". Strip a leading "<section><sep>" so Row reads a clean "A". Only when
+     * the prefix is exact (won't touch "1040-A" under section "104"); otherwise
+     * the label is shown verbatim.
+     */
+    private rowShort;
     private updateTooltip;
     getSelection(): PickerSeat[];
     /** Current active/restored hold reflected in the tray. */