@seatlayer/js 0.17.0 → 0.18.0

package/README.md

@@ -87,6 +87,11 @@ const designer = new EmbeddedDesigner({
   onPublished: ({ chartId }) => refreshVenue(chartId),
   onClose: () => closeVenueEditor(),
   onError: ({ code, message }) => showError(code ?? message),
+  // Mint a fresh session when the user retries an expired/failed editor:
+  onRequestRelaunch: async () => {
+    const next = await mintDesignerSession(session.chartId);
+    designer.setDesignerUrl(next.designerUrl);
+  },
 });
 designer.mount();
 
@@ -99,6 +104,24 @@ 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.
 
+### Built-in loading, error, and expiry states
+
+By default the host paints a lightweight, branded skeleton inside the container
+while the Designer boots, then removes it the moment the iframe reports `ready`.
+If the session expires, the identity check fails, the iframe reports an error, or
+it never becomes ready, the host swaps in a dark **"Try again"** card with copy
+matched to the cause. The skeleton respects `prefers-reduced-motion` and adds no
+CSS files or external assets.
+
+| Option | Type | Default | What it does |
+| --- | --- | --- | --- |
+| `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. |
+
+`setDesignerUrl()` always returns the host to the loading state, so a relaunch
+flow needs no extra bookkeeping.
+
 ## API
 
 `new SeatingChart(options)` — options: `container` (selector or element, required),

package/dist/index.cjs

@@ -358,16 +358,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;
@@ -382,10 +412,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":
@@ -398,6 +433,7 @@ var EmbeddedDesigner = class {
           this.options.onClose?.(message);
           break;
         case "seatlayer.designer.error":
+          this.showError(causeFromCode(message.code));
           this.options.onError?.(message);
           break;
       }
@@ -421,9 +457,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. */
@@ -436,9 +484,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);
   }
 };