@seatlayer/js 0.17.0 → 0.18.0

package/dist/index.d.cts

@@ -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;
 }
 

package/dist/index.d.ts

@@ -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;
 }
 

package/dist/index.js

@@ -326,16 +326,46 @@ var TYPES = /* @__PURE__ */ new Set([
   "seatlayer.designer.close",
   "seatlayer.designer.error"
 ]);
+var DEFAULT_LOADING_TIMEOUT_MS = 2e4;
 function resolveContainer2(container) {
   if (typeof container !== "string") return container;
   const element = document.querySelector(container);
   if (!element) throw new Error(`EmbeddedDesigner container not found: ${container}`);
   return element;
 }
+function causeFromCode(code) {
+  const value = (code ?? "").toLowerCase();
+  if (value.includes("expire") || value.includes("revoke") || value === "401") return "expired";
+  if (value.includes("mismatch")) return "mismatch";
+  if (value.includes("timeout")) return "timeout";
+  return "load";
+}
+var ERROR_COPY = {
+  expired: {
+    title: "This design session expired",
+    body: "For your security, editing sessions are short-lived. Start a fresh one to keep designing."
+  },
+  mismatch: {
+    title: "This editor doesn't match this chart",
+    body: "The session that loaded belongs to a different chart or workspace. Reopen the designer to continue."
+  },
+  timeout: {
+    title: "The designer is taking too long",
+    body: "It did not finish loading in time. This is usually a slow connection \u2014 try again."
+  },
+  load: {
+    title: "We couldn't load the designer",
+    body: "Something went wrong while opening the editor. Please try again."
+  }
+};
 var EmbeddedDesigner = class {
   constructor(options) {
     this.frame = null;
     this.designerOrigin = "";
+    this.overlay = null;
+    this.timeoutTimer = null;
+    this.phase = "loading";
+    this.restoreContainerPosition = null;
     this.handleMessage = (event) => {
       if (!this.frame || event.origin !== this.designerOrigin || event.source !== this.frame.contentWindow) return;
       if (!event.data || typeof event.data !== "object") return;
@@ -350,10 +380,15 @@ var EmbeddedDesigner = class {
         message: typeof data.message === "string" ? data.message : void 0,
         meta: data.meta
       };
-      if (this.options.expectedChartId && message.chartId && message.chartId !== this.options.expectedChartId) return;
-      if (this.options.expectedWorkspaceId && message.workspaceId && message.workspaceId !== this.options.expectedWorkspaceId) return;
+      if (this.options.expectedChartId && message.chartId && message.chartId !== this.options.expectedChartId || this.options.expectedWorkspaceId && message.workspaceId && message.workspaceId !== this.options.expectedWorkspaceId) {
+        this.showError("mismatch");
+        return;
+      }
       switch (message.type) {
         case "seatlayer.designer.ready":
+          this.phase = "ready";
+          this.clearTimeoutTimer();
+          this.removeOverlay();
           this.options.onReady?.(message);
           break;
         case "seatlayer.designer.saved":
@@ -366,6 +401,7 @@ var EmbeddedDesigner = class {
           this.options.onClose?.(message);
           break;
         case "seatlayer.designer.error":
+          this.showError(causeFromCode(message.code));
           this.options.onError?.(message);
           break;
       }
@@ -389,9 +425,21 @@ var EmbeddedDesigner = class {
     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);
     window.addEventListener("message", this.handleMessage);
-    resolveContainer2(this.options.container).append(frame);
+    container.append(frame);
     this.frame = frame;
+    this.phase = "loading";
+    if (this.loadingStateEnabled()) {
+      this.ensureContainerPositioned(container);
+      this.renderOverlay(container, "loading");
+      const timeout = this.options.loadingTimeoutMs ?? DEFAULT_LOADING_TIMEOUT_MS;
+      if (timeout > 0 && Number.isFinite(timeout)) {
+        this.timeoutTimer = setTimeout(() => {
+          if (this.phase === "loading") this.showError("timeout");
+        }, timeout);
+      }
+    }
     return frame;
   }
   /** Replace the iframe instead of assigning a new fragment to an existing one. */
@@ -404,9 +452,208 @@ var EmbeddedDesigner = class {
   }
   destroy() {
     window.removeEventListener("message", this.handleMessage);
+    this.clearTimeoutTimer();
+    this.removeOverlay();
+    this.restoreContainerStyle();
     this.frame?.remove();
     this.frame = null;
     this.designerOrigin = "";
+    this.phase = "loading";
+  }
+  loadingStateEnabled() {
+    return this.options.showLoadingState !== false;
+  }
+  clearTimeoutTimer() {
+    if (this.timeoutTimer !== null) {
+      clearTimeout(this.timeoutTimer);
+      this.timeoutTimer = null;
+    }
+  }
+  ensureContainerPositioned(container) {
+    const position = getComputedStyle(container).position;
+    if (position === "static") {
+      this.restoreContainerPosition = container.style.position;
+      container.style.position = "relative";
+    }
+  }
+  restoreContainerStyle() {
+    if (this.restoreContainerPosition === null) return;
+    try {
+      resolveContainer2(this.options.container).style.position = this.restoreContainerPosition;
+    } catch {
+    }
+    this.restoreContainerPosition = null;
+  }
+  removeOverlay() {
+    this.overlay?.remove();
+    this.overlay = null;
+  }
+  showError(cause) {
+    this.phase = "error";
+    this.clearTimeoutTimer();
+    if (!this.loadingStateEnabled()) return;
+    let container;
+    try {
+      container = resolveContainer2(this.options.container);
+    } catch {
+      return;
+    }
+    this.renderOverlay(container, "error", cause);
+  }
+  handleTryAgain() {
+    if (this.options.onRequestRelaunch) {
+      this.options.onRequestRelaunch();
+      return;
+    }
+    this.mount();
+  }
+  /**
+   * Build (or rebuild) the overlay for the given phase. A single overlay element
+   * is reused so we never stack stale skeletons or cards.
+   */
+  renderOverlay(container, phase, cause) {
+    this.removeOverlay();
+    const overlay = document.createElement("div");
+    overlay.setAttribute("data-seatlayer-designer-overlay", phase);
+    overlay.setAttribute("role", phase === "error" ? "alert" : "status");
+    overlay.setAttribute("aria-live", "polite");
+    Object.assign(overlay.style, {
+      position: "absolute",
+      inset: "0",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      background: "#101625",
+      color: "#e6ebf5",
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+      zIndex: "2",
+      overflow: "hidden"
+    });
+    if (phase === "loading") this.buildSkeleton(overlay);
+    else this.buildErrorCard(overlay, cause ?? "load");
+    container.append(overlay);
+    this.overlay = overlay;
+  }
+  buildSkeleton(overlay) {
+    const style = document.createElement("style");
+    style.textContent = `
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes seatlayer-designer-shimmer {
+    0% { background-position: -320px 0; }
+    100% { background-position: 320px 0; }
+  }
+  [data-seatlayer-designer-overlay="loading"] .sl-shimmer {
+    animation: seatlayer-designer-shimmer 1.25s ease-in-out infinite;
+    background-size: 640px 100%;
+  }
+}`;
+    overlay.append(style);
+    const shimmer = "linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.10) 37%, rgba(255,255,255,0.04) 63%)";
+    const scaffold = document.createElement("div");
+    Object.assign(scaffold.style, {
+      position: "absolute",
+      inset: "0",
+      display: "flex",
+      flexDirection: "column",
+      padding: "16px",
+      gap: "14px",
+      opacity: "0.9"
+    });
+    const bar = (styles) => {
+      const node = document.createElement("div");
+      node.className = "sl-shimmer";
+      Object.assign(node.style, {
+        background: shimmer,
+        borderRadius: "8px"
+      });
+      Object.assign(node.style, styles);
+      return node;
+    };
+    scaffold.append(bar({ height: "40px", width: "100%", flex: "0 0 auto" }));
+    const body = document.createElement("div");
+    Object.assign(body.style, {
+      display: "flex",
+      gap: "14px",
+      flex: "1 1 auto",
+      minHeight: "0"
+    });
+    body.append(bar({ width: "220px", height: "100%", flex: "0 0 auto" }));
+    body.append(bar({ flex: "1 1 auto", height: "100%" }));
+    scaffold.append(body);
+    overlay.append(scaffold);
+    const caption = document.createElement("div");
+    Object.assign(caption.style, {
+      position: "relative",
+      zIndex: "1",
+      display: "flex",
+      alignItems: "center",
+      gap: "10px",
+      padding: "10px 16px",
+      borderRadius: "999px",
+      background: "rgba(16, 22, 37, 0.72)",
+      fontSize: "13px",
+      fontWeight: "500",
+      letterSpacing: "0.01em"
+    });
+    const dot = document.createElement("span");
+    dot.className = "sl-shimmer";
+    Object.assign(dot.style, {
+      width: "9px",
+      height: "9px",
+      borderRadius: "50%",
+      background: shimmer,
+      flex: "0 0 auto"
+    });
+    caption.append(dot);
+    caption.append(document.createTextNode("Loading designer\u2026"));
+    overlay.append(caption);
+  }
+  buildErrorCard(overlay, cause) {
+    const copy = ERROR_COPY[cause];
+    const card = document.createElement("div");
+    Object.assign(card.style, {
+      maxWidth: "420px",
+      margin: "0 24px",
+      padding: "28px",
+      textAlign: "center",
+      background: "rgba(255, 255, 255, 0.03)",
+      border: "1px solid rgba(255, 255, 255, 0.08)",
+      borderRadius: "16px",
+      boxShadow: "0 12px 40px rgba(0, 0, 0, 0.35)"
+    });
+    const heading = document.createElement("h2");
+    heading.textContent = copy.title;
+    Object.assign(heading.style, {
+      margin: "0 0 8px",
+      fontSize: "17px",
+      fontWeight: "600",
+      color: "#f4f7ff"
+    });
+    const body = document.createElement("p");
+    body.textContent = copy.body;
+    Object.assign(body.style, {
+      margin: "0 0 20px",
+      fontSize: "13.5px",
+      lineHeight: "1.5",
+      color: "#aab4c8"
+    });
+    const button = document.createElement("button");
+    button.type = "button";
+    button.textContent = "Try again";
+    Object.assign(button.style, {
+      appearance: "none",
+      cursor: "pointer",
+      border: "0",
+      borderRadius: "10px",
+      padding: "10px 22px",
+      fontSize: "14px",
+      fontWeight: "600",
+      color: "#101625",
+      background: "#7aa2ff"
+    });
+    button.addEventListener("click", () => this.handleTryAgain());
+    card.append(heading, body, button);
+    overlay.append(card);
   }
 };