@lumiastream/ui 0.2.7 → 0.2.8-alpha.1

package/dist/index.js

@@ -3111,6 +3111,36 @@ function listenerPlaceholderContext(listener) {
   }
   return {};
 }
+var SE_WIDGET_TYPE_LABELS = {
+  "subscriber-latest": "Latest subscriber",
+  "subscriber-new-latest": "Latest new subscriber",
+  "subscriber-resub-latest": "Latest resubscriber",
+  "subscriber-gifted-latest": "Latest gifted sub",
+  "subscriber-alltime-gifter": "Top all-time gifter",
+  "follower-latest": "Latest follower",
+  "cheer-latest": "Latest cheer",
+  "cheer-total": "Total cheers",
+  "tip-latest": "Latest tip",
+  "tip-total": "Total tips",
+  "se-widget-bit-boss": "Bit Boss",
+  "se-widget-hype-cup": "Hype Cup",
+  "se-widget-custom-event-list": "Custom widget",
+  "se-widget-credit-roll": "Credits",
+  "se-widget-media-share": "Media share"
+};
+function defaultLabelForSEWidget(widget) {
+  const trimmed = typeof widget.name === "string" ? widget.name.trim() : "";
+  if (trimmed) return trimmed;
+  const override = SE_WIDGET_TYPE_LABELS[widget.type];
+  if (override) return override;
+  const stripped = widget.type.replace(/^se-widget-/, "");
+  const words = stripped.split("-").filter(Boolean);
+  if (words.length === 0) return widget.type;
+  const first = words[0];
+  const head = first.charAt(0).toUpperCase() + first.slice(1);
+  const tail = words.slice(1).join(" ");
+  return tail ? `${head} ${tail}` : head;
+}
 function translateSeText(input, listener) {
   if (!input) return "";
   const ctx = listener ? listenerPlaceholderContext(listener) : {};
@@ -3288,7 +3318,7 @@ function buildUnit(widget, lumiaType, moduleExtras) {
     version: 1,
     settings: {
       type: lumiaType,
-      title: widget.name ?? null,
+      title: defaultLabelForSEWidget(widget),
       locked: widget.locked ?? false
     },
     lights: [],
@@ -4480,6 +4510,116 @@ function hasMarketplaceCandidates(seWidgetType) {
   return getMarketplaceCandidates(seWidgetType).length > 0;
 }
 
+// src/se-import/api/seClient.ts
+var SEAuthError = class extends Error {
+  constructor(code, message) {
+    super(message);
+    this.code = code;
+    this.name = "SEAuthError";
+  }
+};
+function decodeBase64Url(s) {
+  const b64 = s.replace(/-/g, "+").replace(/_/g, "/");
+  const padding = "===".slice((b64.length + 3) % 4);
+  const padded = b64 + (padding.length < 3 ? padding : "");
+  if (typeof atob === "function") return atob(padded);
+  return Buffer.from(padded, "base64").toString("binary");
+}
+function decodeJwtPayload(jwt) {
+  if (typeof jwt !== "string" || !jwt.trim()) {
+    throw new SEAuthError("invalid-jwt", "No token provided.");
+  }
+  const parts = jwt.trim().split(".");
+  if (parts.length !== 3) {
+    throw new SEAuthError("invalid-jwt", "Token is not a valid JWT (expected 3 dot-separated parts).");
+  }
+  let raw;
+  try {
+    raw = decodeBase64Url(parts[1] ?? "");
+  } catch {
+    throw new SEAuthError("invalid-jwt", "Token payload is not valid base64.");
+  }
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    throw new SEAuthError("invalid-jwt", "Token payload is not valid JSON.");
+  }
+  const claims = parsed;
+  if (typeof claims.channel !== "string" || typeof claims.authToken !== "string") {
+    throw new SEAuthError("invalid-jwt", "Token payload is missing the 'channel' or 'authToken' claim \u2014 not a StreamElements account token.");
+  }
+  if (typeof claims.exp === "number" && claims.exp * 1e3 < Date.now()) {
+    throw new SEAuthError("expired", "This StreamElements token has expired. Generate a new one on the SE Account page.");
+  }
+  return claims;
+}
+var SEClient = class _SEClient {
+  constructor(claims) {
+    this.claims = claims;
+  }
+  static fromJwt(jwt) {
+    return new _SEClient(decodeJwtPayload(jwt));
+  }
+  get channelId() {
+    return this.claims.channel;
+  }
+  get provider() {
+    return this.claims.provider;
+  }
+  get providerId() {
+    return this.claims.provider_id;
+  }
+  get userId() {
+    return this.claims.user;
+  }
+  get jti() {
+    return this.claims.jti;
+  }
+  get expiresAt() {
+    return new Date(this.claims.exp * 1e3);
+  }
+  // Convenience for provenance stamping on imported entities. Single source
+  // of truth so every mapper writes the same shape.
+  provenance() {
+    return {
+      jti: this.claims.jti,
+      channelId: this.claims.channel,
+      provider: this.claims.provider,
+      importedAt: (/* @__PURE__ */ new Date()).toISOString()
+    };
+  }
+  async get(path) {
+    const res = await fetch(`https://api.streamelements.com${path}`, {
+      method: "GET",
+      headers: {
+        Authorization: `apikey ${this.claims.authToken}`,
+        Accept: "application/json"
+      }
+    });
+    if (res.status === 401) {
+      throw new SEAuthError("unauthorized", "StreamElements rejected the token. Generate a new one and try again.");
+    }
+    if (res.status === 403) {
+      throw new SEAuthError("forbidden", "Your StreamElements token does not have permission for this resource.");
+    }
+    if (!res.ok) {
+      let detail = "";
+      try {
+        const body = await res.json();
+        if (body?.message) detail = ` \u2014 ${body.message}`;
+      } catch {
+      }
+      throw new Error(`StreamElements API returned HTTP ${res.status}${detail}`);
+    }
+    return await res.json();
+  }
+};
+async function fetchUsableChannels(client) {
+  const me = await client.get("/kappa/v2/users/current");
+  return (me.channels ?? []).filter((c) => c.authorized !== false && c.inactive !== true);
+}
+
 // src/se-import/ui/SEImportWizard.tsx
 import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo5, useRef as useRef4, useState as useState6 } from "react";
 
@@ -4528,7 +4668,7 @@ function MarketplacePicker({ seWidgetType, fetchMarketplaceOverlay, CustomEmbed,
         /* @__PURE__ */ jsx12("code", { children: seWidgetType }),
         " yet. Use AI generation or skip the widget for now."
       ] }),
-      /* @__PURE__ */ jsx12("div", { className: "ui-flex-row", style: { marginTop: 8 }, children: /* @__PURE__ */ jsx12("button", { type: "button", className: "ui-button", onClick: onCancel, children: "Close" }) })
+      /* @__PURE__ */ jsx12("div", { className: "ui-flex-row", style: { marginTop: 8 }, children: /* @__PURE__ */ jsx12(LSButton, { type: "button", color: "secondary", onClick: onCancel, label: "Close" }) })
     ] });
   }
   return /* @__PURE__ */ jsxs6("div", { className: "ui-flex-column ui-gap-2", style: { padding: 16, minHeight: 420 }, children: [
@@ -4539,15 +4679,15 @@ function MarketplacePicker({ seWidgetType, fetchMarketplaceOverlay, CustomEmbed,
       " with a layer from a curated Lumia Marketplace overlay."
     ] }),
     /* @__PURE__ */ jsx12("div", { className: "ui-flex-row ui-gap-2", style: { flexWrap: "wrap", marginTop: 4 }, children: candidates.map((c) => /* @__PURE__ */ jsx12(
-      "button",
+      LSButton,
       {
         type: "button",
-        className: `ui-button ${c.id === activeId ? "ui-button-purple" : ""}`,
+        color: c.id === activeId ? "primary" : "secondary",
         onClick: () => {
           setActiveId(c.id);
           setActiveLayerId(null);
         },
-        children: c.loading ? `Loading #${c.id}\u2026` : c.error ? `#${c.id} (error)` : c.overlay?.name ?? `Overlay #${c.id}`
+        label: c.loading ? `Loading #${c.id}\u2026` : c.error ? `#${c.id} (error)` : c.overlay?.name ?? `Overlay #${c.id}`
       },
       c.id
     )) }),
@@ -4562,13 +4702,13 @@ function MarketplacePicker({ seWidgetType, fetchMarketplaceOverlay, CustomEmbed,
       /* @__PURE__ */ jsxs6("div", { style: { flex: "0 0 200px", display: "flex", flexDirection: "column", gap: 4, maxHeight: 320, overflowY: "auto" }, children: [
         /* @__PURE__ */ jsx12("div", { style: { fontSize: 12, fontWeight: 600, opacity: 0.8 }, children: "Layers" }),
         activeLayers.map((l) => /* @__PURE__ */ jsx12(
-          "button",
+          LSButton,
           {
             type: "button",
-            className: `ui-button ${l.id === activeLayerId ? "ui-button-purple" : ""}`,
+            color: l.id === activeLayerId ? "primary" : "secondary",
             style: { justifyContent: "flex-start", textAlign: "left" },
             onClick: () => setActiveLayerId(l.id),
-            children: /* @__PURE__ */ jsxs6("div", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+            label: /* @__PURE__ */ jsxs6("div", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
               /* @__PURE__ */ jsx12("div", { style: { fontSize: 12, fontWeight: 600 }, children: l.label }),
               /* @__PURE__ */ jsx12("div", { style: { fontSize: 10, opacity: 0.7 }, children: l.type })
             ] })
@@ -4580,15 +4720,15 @@ function MarketplacePicker({ seWidgetType, fetchMarketplaceOverlay, CustomEmbed,
       /* @__PURE__ */ jsx12("div", { style: { flex: 1, minHeight: 240, background: "rgba(0,0,0,0.3)", borderRadius: 6, overflow: "hidden" }, children: /* @__PURE__ */ jsx12(ActiveLayerPreview, { overlay: activeCandidate.overlay, layerId: activeLayerId, CustomEmbed }) })
     ] }),
     /* @__PURE__ */ jsxs6("div", { className: "ui-flex-row ui-gap-2", style: { marginTop: 12, justifyContent: "flex-end" }, children: [
-      /* @__PURE__ */ jsx12("button", { type: "button", className: "ui-button", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx12(LSButton, { type: "button", color: "secondary", variant: "outlined", onClick: onCancel, label: "Cancel" }),
       /* @__PURE__ */ jsx12(
-        "button",
+        LSButton,
         {
           type: "button",
-          className: "ui-button ui-button-purple",
+          color: "primary",
           onClick: handleConfirm,
           disabled: !activeCandidate?.overlay || !activeLayerId,
-          children: "Use this layer"
+          label: "Use this layer"
         }
       )
     ] })
@@ -4622,51 +4762,140 @@ function ActiveLayerPreview({ overlay, layerId, CustomEmbed }) {
   ] });
 }
 
+// src/se-import/ui/SEImportWizard.css
+styleInject('.se-import,\n.se-import * {\n  box-sizing: border-box;\n}\n.se-import {\n  --se-bg: #17162a;\n  --se-surface: #27264a;\n  --se-panel: #171b38;\n  --se-panel-2: #202449;\n  --se-border: rgba(116, 124, 211, 0.24);\n  --se-border-strong: rgba(126, 128, 255, 0.58);\n  --se-text: #f5f4ff;\n  --se-muted: #bab8d2;\n  --se-primary: #ff4076;\n  --se-purple: #393853;\n  --se-green: #06c96f;\n  --se-warn: #f7a42b;\n  width: 100%;\n  min-width: min(680px, 100%);\n  color: var(--se-text);\n  font-family: inherit;\n}\n.se-import__shell {\n  border-radius: 0;\n  padding: 28px 48px 24px;\n}\n.se-import__header {\n  display: grid;\n  justify-items: center;\n  gap: 42px;\n}\n.se-import__title {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 20px;\n  font-weight: 500;\n}\n.se-import-stepper {\n  display: grid;\n  width: min(760px, 100%);\n  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));\n}\n.se-import-step {\n  position: relative;\n  display: grid;\n  justify-items: center;\n  gap: 12px;\n  min-width: 0;\n  color: rgba(255, 255, 255, 0.72);\n}\n.se-import-step__label {\n  color: var(--se-text);\n  font-size: 18px;\n  line-height: 1.1;\n}\n.se-import-step__line {\n  position: absolute;\n  top: 42px;\n  left: 50%;\n  width: 100%;\n  height: 2px;\n  background: rgba(255, 255, 255, 0.16);\n}\n.se-import-step:last-child .se-import-step__line {\n  display: none;\n}\n.se-import-step__dot {\n  z-index: 1;\n  display: grid;\n  width: 22px;\n  height: 22px;\n  place-items: center;\n  border-radius: 50%;\n  background: #47485e;\n  color: #fff;\n  font-size: 13px;\n  font-weight: 700;\n  line-height: 1;\n}\n.se-import-step--active .se-import-step__dot {\n  background: var(--se-primary);\n}\n.se-import-step--done .se-import-step__dot {\n  background: var(--se-green);\n}\n.se-import-step--done .se-import-step__line {\n  background: var(--se-green);\n}\n.se-import-step--done + .se-import-step--active .se-import-step__line {\n  background:\n    linear-gradient(\n      90deg,\n      var(--se-green),\n      var(--se-primary));\n}\n.se-import__content {\n  display: grid;\n  min-height: 470px;\n  place-items: center;\n  padding: 64px 0 28px;\n}\n.se-import-panel {\n  width: min(100%, 1080px);\n  padding: 28px;\n}\n.se-import-panel--narrow {\n  width: min(100%, 1140px);\n}\n.se-import-panel--medium {\n  width: min(100%, 880px);\n}\n.se-import-panel--wide {\n  width: min(100%, 1000px);\n}\n.se-import-panel--confirm {\n  width: min(100%, 800px);\n}\n.se-import-panel h2,\n.se-import-panel h3,\n.se-import-panel p {\n  margin: 0;\n}\n.se-import-panel h2 {\n  font-size: 26px;\n  font-weight: 700;\n  line-height: 1.15;\n}\n.se-import-panel > p {\n  margin-top: 14px;\n  color: var(--se-muted);\n  font-size: 16px;\n  line-height: 1.45;\n}\n.se-import-field {\n  margin-top: 34px;\n}\n.se-import-field .mui-ls-input {\n  --ls-control-height: 66px;\n}\n.se-import-field .MuiInputLabel-root {\n  color: var(--se-text);\n  font-weight: 700;\n}\n.se-import-field .MuiInputLabel-root.Mui-focused {\n  color: #dfe1ff;\n}\n.se-import-field .MuiInputBase-root {\n  background: rgba(28, 32, 66, 0.85);\n  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.04);\n  font-size: 18px;\n}\n.se-import-field .MuiOutlinedInput-notchedOutline {\n  border-color: var(--se-border-strong) !important;\n}\n.se-import-help {\n  display: flex;\n  gap: 18px;\n  margin-top: 30px;\n  border: 1px solid var(--se-purple);\n  border-radius: 12px;\n  padding: 24px;\n  color: var(--white2);\n}\n.se-import-help__icon {\n  display: grid;\n  width: 30px;\n  height: 30px;\n  flex: 0 0 auto;\n  place-items: center;\n  border: 1px solid var(--se-purple);\n  border-radius: 50%;\n  color: var(--white2);\n  font-weight: 800;\n}\n.se-import-help__title {\n  color: var(--se-text);\n  font-size: 18px;\n  font-weight: 700;\n}\n.se-import-help ol {\n  margin: 16px 0 0;\n  padding-left: 18px;\n  font-size: 15px;\n  line-height: 1.7;\n}\n.se-import-help a {\n  color: var(--primary);\n  font-weight: 700;\n}\n.se-import-help--info {\n  align-items: center;\n}\n.se-import-section-title {\n  display: flex;\n  gap: 1rem;\n  margin-bottom: 1.5rem;\n}\n.se-import-section-title__num {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 46px;\n  height: 46px;\n  border: 1px solid var(--se-purple);\n  border-radius: 50%;\n  font-size: 1.5rem;\n  font-weight: 800;\n}\n.se-import-section-title__content {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n.se-import-section-title h3 {\n  font-size: 18px;\n  font-weight: 800;\n}\n.se-import-section-title p {\n  margin-top: 4px;\n  color: var(--se-muted);\n  font-size: 14px;\n}\n.se-import-grid {\n  display: grid;\n  gap: 8px;\n  margin-top: 10px;\n}\n.se-import-grid--four {\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n.se-import-grid--two {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.se-import-stat {\n  min-height: 116px;\n  border: 1px solid rgba(255, 255, 255, 0.06);\n  border-radius: 8px;\n  background:\n    linear-gradient(\n      135deg,\n      rgba(42, 47, 92, 0.9),\n      rgba(33, 38, 78, 0.9));\n  padding: 24px 22px;\n}\n.se-import-stat--success {\n  background:\n    linear-gradient(\n      135deg,\n      rgba(12, 91, 86, 0.72),\n      rgba(32, 65, 76, 0.8));\n  border-color: rgba(19, 201, 126, 0.25);\n}\n.se-import-stat--info {\n  border-color: rgba(116, 104, 255, 0.8);\n  box-shadow: inset 3px 0 0 #6e76ff;\n}\n.se-import-stat--warn,\n.se-import-stat--muted {\n  box-shadow: inset 3px 0 0 var(--se-warn);\n}\n.se-import-stat__label {\n  color: var(--se-muted);\n  font-size: 12px;\n  font-weight: 800;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n.se-import-stat__value {\n  margin-top: 12px;\n  color: #fff;\n  font-size: 30px;\n  font-weight: 800;\n  line-height: 1;\n}\n.se-import-stat__sub {\n  margin-top: 8px;\n  color: var(--se-muted);\n  font-size: 13px;\n}\n.se-import-option {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) auto auto;\n  align-items: center;\n  gap: 18px;\n  border: 1px solid var(--se-purple);\n  border-radius: 12px;\n  background:\n    linear-gradient(\n      135deg,\n      rgba(35, 39, 81, 0.95),\n      rgba(31, 35, 73, 0.95));\n  box-shadow: inset 3px 0 0 var(--se-primary);\n  cursor: pointer;\n  padding: 22px;\n  margin-bottom: 1rem;\n}\n.se-import-option--disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.se-import-option__icon {\n  display: grid;\n  width: 26px;\n  height: 26px;\n  place-items: center;\n  border-radius: 50%;\n  background: rgba(255, 255, 255, 0.22);\n  color: #d8dbff;\n  font-weight: 800;\n}\n.se-import-option__body {\n  display: grid;\n  gap: 8px;\n  min-width: 0;\n}\n.se-import-option__title {\n  font-size: 17px;\n  font-weight: 800;\n}\n.se-import-option__copy {\n  color: var(--se-muted);\n  font-size: 14px;\n  line-height: 1.45;\n}\n.se-import-option__count {\n  color: #fff;\n  font-size: 16px;\n}\n.se-import-option input {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n.se-import-toggle {\n  position: relative;\n  width: 48px;\n  height: 28px;\n  border-radius: 999px;\n  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);\n}\n.se-import-toggle::after {\n  position: absolute;\n  top: 4px;\n  left: 4px;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: #fff;\n  content: "";\n  transition: transform 160ms ease;\n}\n.se-import-option input:checked + .se-import-toggle {\n  background: var(--primary);\n}\n.se-import-option input:checked + .se-import-toggle::after {\n  transform: translateX(20px);\n}\n.se-import-advanced {\n  margin-top: 26px;\n  border-radius: 10px;\n  background: rgba(32, 36, 73, 0.7);\n  padding: 24px;\n}\n.se-import-advanced summary {\n  cursor: pointer;\n  font-size: 18px;\n  font-weight: 700;\n}\n.se-import-advanced p {\n  margin-top: 10px;\n  color: var(--se-muted);\n}\n.se-import-transfer {\n  position: relative;\n  display: grid;\n  width: min(720px, 100%);\n  min-height: 190px;\n  grid-template-columns: 180px minmax(260px, 1fr) 180px;\n  align-items: center;\n  gap: 28px;\n  margin: 0 auto 60px;\n}\n.se-import-transfer__source {\n  position: relative;\n  display: grid;\n  width: 160px;\n  height: 160px;\n  place-items: center;\n  animation: se-import-source-bounce 1.8s ease-in-out infinite;\n}\n.se-import-transfer__source::before {\n  top: -13px;\n  left: -13px;\n  box-shadow: 155px 0 0 var(--se-primary);\n}\n.se-import-transfer__source::after {\n  bottom: -13px;\n  left: -13px;\n  box-shadow: 155px 0 0 var(--se-primary);\n}\n.se-import-transfer__source img {\n  width: 192px;\n  height: 192px;\n  object-fit: contain;\n}\n.se-import-transfer__source--lumia {\n  animation-delay: 0.22s;\n}\n.se-import-transfer__files {\n  position: relative;\n  height: 130px;\n}\n.se-import-transfer__file {\n  position: absolute;\n  top: 50%;\n  left: -18px;\n  width: 56px;\n  height: 66px;\n  object-fit: contain;\n  transform: translateY(-50%);\n  filter: drop-shadow(0 10px 12px rgba(8, 9, 25, 0.25));\n  animation: se-import-file-fly 2.4s cubic-bezier(0.35, 0, 0.25, 1) infinite;\n}\n.se-import-transfer__file--one {\n  animation-delay: 0s;\n}\n.se-import-transfer__file--two {\n  animation-delay: 0.38s;\n}\n.se-import-transfer__file--three {\n  animation-delay: 0.76s;\n}\n.se-import-transfer__file--four {\n  animation-delay: 1.14s;\n}\n@keyframes se-import-source-bounce {\n  0%, 100% {\n    transform: translateY(0) scale(1);\n  }\n  50% {\n    transform: translateY(-8px) scale(1.025);\n  }\n}\n@keyframes se-import-file-fly {\n  0% {\n    opacity: 0;\n    transform: translate(-10px, -50%) scale(0.82) rotate(-8deg);\n  }\n  12% {\n    opacity: 1;\n  }\n  45% {\n    transform: translate(145px, calc(-50% - 18px)) scale(1.08) rotate(5deg);\n  }\n  82% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n    transform: translate(330px, -50%) scale(0.9) rotate(10deg);\n  }\n}\n.se-import-mirror-head {\n  display: flex;\n  align-items: end;\n  justify-content: space-between;\n  gap: 20px;\n}\n.se-import-mirror-head p {\n  margin-top: 14px;\n  color: var(--se-muted);\n  font-size: 16px;\n}\n.se-import-mirror-head span {\n  flex: 0 0 auto;\n  color: var(--se-muted);\n  font-weight: 700;\n}\n.se-import-progress {\n  width: 100%;\n  height: 14px;\n  margin-top: 28px;\n  overflow: hidden;\n  border: 0;\n  border-radius: 999px;\n  background: rgba(255, 64, 118, 0.1);\n}\n.se-import-progress::-webkit-progress-bar {\n  background: rgba(255, 64, 118, 0.1);\n}\n.se-import-progress::-webkit-progress-value {\n  border-radius: 999px;\n  background:\n    linear-gradient(\n      90deg,\n      #ff4076,\n      #e7295f);\n}\n.se-import-progress::-moz-progress-bar {\n  border-radius: 999px;\n  background:\n    linear-gradient(\n      90deg,\n      #ff4076,\n      #e7295f);\n}\n.se-import-asset-list {\n  max-height: 360px;\n  margin-top: 22px;\n  overflow-y: auto;\n  border-top: 1px solid rgba(255, 255, 255, 0.08);\n}\n.se-import-asset-row {\n  display: grid;\n  grid-template-columns: 32px minmax(0, 1fr) auto auto;\n  align-items: center;\n  gap: 14px;\n  min-height: 42px;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n  color: var(--se-muted);\n  font-size: 13px;\n}\n.se-import-asset-row__icon {\n  width: 24px;\n  height: 28px;\n  justify-self: end;\n  object-fit: contain;\n}\n.se-import-asset-row__url {\n  overflow: hidden;\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    monospace;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.se-import-asset-row__state {\n  color: #9b8cff;\n  font-weight: 800;\n}\n.se-import-asset-row--done .se-import-asset-row__state,\n.se-import-asset-row--reused .se-import-asset-row__state {\n  color: var(--se-green);\n}\n.se-import-asset-row--failed .se-import-asset-row__state,\n.se-import-asset-row__error {\n  color: #ff8080;\n}\n.se-import-link-button {\n  border: 0;\n  background: transparent;\n  color: #ff9ab6;\n  cursor: pointer;\n  font: inherit;\n  font-weight: 800;\n}\n.se-import-overview {\n  margin-top: 28px;\n  border: 1px solid var(--se-border);\n  border-radius: 12px;\n  background: rgba(26, 30, 61, 0.62);\n  padding: 28px;\n}\n.se-import-overview h3 {\n  margin-bottom: 18px;\n  font-size: 18px;\n  font-weight: 800;\n}\n.se-import-row {\n  display: grid;\n  grid-template-columns: 190px minmax(0, 1fr) auto;\n  gap: 18px;\n  align-items: center;\n  min-height: 48px;\n  border-top: 1px solid rgba(255, 255, 255, 0.08);\n  color: var(--se-muted);\n}\n.se-import-row strong {\n  min-width: 0;\n  overflow: hidden;\n  color: var(--se-text);\n  font-weight: 600;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.se-import-row em {\n  color: var(--se-muted);\n  font-style: normal;\n}\n.se-import-review-card {\n  display: flex;\n  justify-content: space-between;\n  gap: 18px;\n  border: 1px solid var(--se-border);\n  border-radius: 10px;\n  background: rgba(30, 34, 71, 0.8);\n  padding: 20px;\n}\n.se-import-review-card__type {\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    monospace;\n  font-weight: 800;\n}\n.se-import-review-card p {\n  margin-top: 8px;\n  color: var(--se-muted);\n  line-height: 1.45;\n}\n.se-import-review-card__status {\n  flex: 0 0 auto;\n  color: #facc15;\n  font-size: 11px;\n  font-weight: 800;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n.se-import-review-bulk,\n.se-import-actions--inline {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 10px;\n  margin-top: 16px;\n}\n.se-import-muted {\n  margin-top: 16px;\n  color: var(--se-muted);\n  font-size: 13px;\n}\n.se-import-generated {\n  display: grid;\n  gap: 12px;\n  margin-top: 18px;\n}\n.se-import-generated__title {\n  font-weight: 800;\n}\n.se-import-preview {\n  width: 100%;\n  height: 260px;\n  border: 1px solid var(--se-border);\n  border-radius: 8px;\n  background: repeating-conic-gradient(#1a1c20 0% 25%, #1d1f24 0% 50%) 50% / 20px 20px;\n}\n.se-import-code {\n  margin-top: 16px;\n}\n.se-import-code summary {\n  cursor: pointer;\n  color: var(--se-muted);\n  font-size: 13px;\n}\n.se-import-code pre {\n  max-height: 220px;\n  margin: 10px 0 0;\n  overflow: auto;\n  border-radius: 8px;\n  background: rgba(0, 0, 0, 0.28);\n  padding: 12px;\n  color: #d8dcff;\n  font-size: 12px;\n}\n.se-import-error {\n  margin-top: 18px;\n  border: 1px solid rgba(239, 68, 68, 0.45);\n  border-radius: 8px;\n  background: rgba(220, 38, 38, 0.12);\n  padding: 12px;\n  color: #fca5a5;\n}\n.se-import-error__title {\n  font-weight: 800;\n}\n.se-import-error__hint {\n  margin-top: 6px;\n  white-space: pre-wrap;\n}\n.se-import-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n  margin-top: 8px;\n}\n@media (max-width: 900px) {\n  .se-import__shell {\n    min-height: 0;\n    padding: 24px 18px;\n  }\n  .se-import__content {\n    min-height: 0;\n    padding-top: 32px;\n  }\n  .se-import-stepper {\n    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));\n  }\n  .se-import-step__label {\n    font-size: 13px;\n  }\n  .se-import-grid--four,\n  .se-import-grid--two,\n  .se-import-transfer {\n    grid-template-columns: 1fr;\n  }\n  .se-import-transfer {\n    justify-items: center;\n  }\n  .se-import-transfer__files {\n    width: min(360px, 100%);\n  }\n  .se-import-option,\n  .se-import-row,\n  .se-import-asset-row {\n    grid-template-columns: 1fr;\n  }\n  .se-import-mirror-head,\n  .se-import-review-card {\n    align-items: flex-start;\n    flex-direction: column;\n  }\n}\n');
+
 // src/se-import/ui/SEImportWizard.tsx
 import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
-function StepDot({ active, done, label, num }) {
-  const bg = done ? "#22c55e" : active ? "#6a6ffc" : "var(--ui-bg-elevated, #2a2c31)";
-  return /* @__PURE__ */ jsxs7("div", { className: "ui-flex-row", style: { alignItems: "center", gap: 8, opacity: active || done ? 1 : 0.6 }, children: [
-    /* @__PURE__ */ jsx13("div", { style: { width: 22, height: 22, borderRadius: "50%", background: bg, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 700 }, children: done ? "\u2713" : num }),
-    /* @__PURE__ */ jsx13("span", { style: { fontSize: 12, fontWeight: active ? 600 : 400 }, children: label })
-  ] });
+var sourceSEIcon = new URL("../../assets/source_se.svg", import.meta.url).href;
+var sourceLumiaIcon = new URL(
+  "../../assets/source_lumia.svg",
+  import.meta.url
+).href;
+var audioFileIcon = new URL("../../assets/audio_file.svg", import.meta.url).href;
+var imageFileIcon = new URL("../../assets/img_file.svg", import.meta.url).href;
+var videoFileIcon = new URL("../../assets/video_file.svg", import.meta.url).href;
+var audioIcon = new URL("../../assets/sound.svg", import.meta.url).href;
+var imageIcon = new URL("../../assets/img.svg", import.meta.url).href;
+var videoIcon = new URL("../../assets/video.svg", import.meta.url).href;
+var CORE_STEPS = [
+  { key: "connect", label: "Connect" },
+  { key: "url", label: "Load" },
+  { key: "discovery", label: "Discovery" },
+  { key: "options", label: "Options" },
+  { key: "mirror", label: "Assets" },
+  { key: "confirm", label: "Confirm" }
+];
+function stepClass(done, active) {
+  return [
+    "se-import-step",
+    done && "se-import-step--done",
+    active && "se-import-step--active"
+  ].filter(Boolean).join(" ");
 }
-function ProgressBar({ value, max }) {
-  const pct = max > 0 ? Math.min(100, Math.round(value / max * 100)) : 0;
-  return /* @__PURE__ */ jsx13("div", { style: { height: 6, borderRadius: 3, background: "var(--ui-bg-elevated, #2a2c31)", overflow: "hidden" }, children: /* @__PURE__ */ jsx13("div", { style: { height: "100%", width: `${pct}%`, background: "#6a6ffc", transition: "width 240ms" } }) });
+function panelClass(extra) {
+  return ["se-import-panel", extra].filter(Boolean).join(" ");
 }
 function ErrorPanel({ message, hint }) {
-  return /* @__PURE__ */ jsxs7("div", { style: { padding: 10, borderRadius: 6, background: "rgba(220, 38, 38, 0.12)", border: "1px solid rgba(220, 38, 38, 0.4)", color: "#fca5a5", fontSize: 13 }, children: [
-    /* @__PURE__ */ jsx13("div", { style: { fontWeight: 600 }, children: message }),
-    hint && /* @__PURE__ */ jsx13("div", { style: { marginTop: 6, whiteSpace: "pre-wrap", opacity: 0.85 }, children: hint })
+  return /* @__PURE__ */ jsxs7("div", { className: "se-import-error", children: [
+    /* @__PURE__ */ jsx13("div", { className: "se-import-error__title", children: message }),
+    hint && /* @__PURE__ */ jsx13("div", { className: "se-import-error__hint", children: hint })
   ] });
 }
-function StatusBadge({ label, count, pct, tone }) {
-  const colors = { success: "#22c55e", info: "#6a6ffc", warn: "#f59e0b", muted: "#9ca3af" };
-  return /* @__PURE__ */ jsxs7("div", { style: { flex: "1 1 120px", padding: "10px 12px", borderRadius: 6, background: "var(--ui-bg-elevated, #1d1f24)", borderLeft: `3px solid ${colors[tone]}` }, children: [
-    /* @__PURE__ */ jsx13("div", { style: { fontSize: 11, textTransform: "uppercase", letterSpacing: 0.5, opacity: 0.7 }, children: label }),
-    /* @__PURE__ */ jsx13("div", { style: { fontSize: 22, fontWeight: 700 }, children: count }),
-    /* @__PURE__ */ jsxs7("div", { style: { fontSize: 12, opacity: 0.7 }, children: [
-      pct,
-      "%"
-    ] })
+function Field({
+  label,
+  value,
+  onChange,
+  placeholder,
+  disabled
+}) {
+  return /* @__PURE__ */ jsx13("div", { className: "se-import-field", children: /* @__PURE__ */ jsx13(
+    LSInput,
+    {
+      label,
+      value,
+      onChange: (_, next) => onChange(String(next ?? "")),
+      placeholder,
+      disabled
+    }
+  ) });
+}
+function ProgressBar({ value, max }) {
+  return /* @__PURE__ */ jsx13(
+    "progress",
+    {
+      className: "se-import-progress",
+      value: max > 0 ? value : 0,
+      max: max || 1
+    }
+  );
+}
+function StatusCard({
+  label,
+  value,
+  sub,
+  tone = "neutral"
+}) {
+  return /* @__PURE__ */ jsxs7("div", { className: `se-import-stat se-import-stat--${tone}`, children: [
+    /* @__PURE__ */ jsx13("div", { className: "se-import-stat__label", children: label }),
+    /* @__PURE__ */ jsx13("div", { className: "se-import-stat__value", children: value }),
+    sub && /* @__PURE__ */ jsx13("div", { className: "se-import-stat__sub", children: sub })
   ] });
 }
 function CoverageCards({ coverage }) {
   const byStatus = useMemo5(() => {
     const acc = { direct: 0, partial: 0, template: 0, placeholder: 0 };
-    for (const m of coverage.mappings) acc[m.status] += m.count;
+    for (const item of coverage.mappings) acc[item.status] += item.count;
     return acc;
   }, [coverage]);
-  const pct = (n) => coverage.totalWidgets > 0 ? Math.round(n / coverage.totalWidgets * 100) : 0;
-  return /* @__PURE__ */ jsxs7("div", { className: "ui-flex-row ui-gap-2", style: { flexWrap: "wrap" }, children: [
-    /* @__PURE__ */ jsx13(StatusBadge, { label: "Direct", count: byStatus.direct, pct: pct(byStatus.direct), tone: "success" }),
-    /* @__PURE__ */ jsx13(StatusBadge, { label: "Partial", count: byStatus.partial, pct: pct(byStatus.partial), tone: "info" }),
-    /* @__PURE__ */ jsx13(StatusBadge, { label: "Template", count: byStatus.template, pct: pct(byStatus.template), tone: "warn" }),
-    /* @__PURE__ */ jsx13(StatusBadge, { label: "Placeholder", count: byStatus.placeholder, pct: pct(byStatus.placeholder), tone: "muted" })
+  const pct = (value) => coverage.totalWidgets > 0 ? Math.round(value / coverage.totalWidgets * 100) : 0;
+  return /* @__PURE__ */ jsxs7("div", { className: "se-import-grid se-import-grid--four", children: [
+    /* @__PURE__ */ jsx13(
+      StatusCard,
+      {
+        label: "Direct",
+        value: byStatus.direct,
+        sub: `${pct(byStatus.direct)}%`,
+        tone: "success"
+      }
+    ),
+    /* @__PURE__ */ jsx13(
+      StatusCard,
+      {
+        label: "Partial",
+        value: byStatus.partial,
+        sub: `${pct(byStatus.partial)}%`,
+        tone: "info"
+      }
+    ),
+    /* @__PURE__ */ jsx13(
+      StatusCard,
+      {
+        label: "Template",
+        value: byStatus.template,
+        sub: `${pct(byStatus.template)}%`,
+        tone: "warn"
+      }
+    ),
+    /* @__PURE__ */ jsx13(
+      StatusCard,
+      {
+        label: "Placeholder",
+        value: byStatus.placeholder,
+        sub: `${pct(byStatus.placeholder)}%`,
+        tone: "muted"
+      }
+    )
   ] });
 }
-function CustomOverlayPreview({ html, css, js, data, width, height }) {
+function CustomOverlayPreview({
+  html,
+  css,
+  js,
+  data,
+  width,
+  height
+}) {
   const srcdoc = useMemo5(() => {
     const safeData = JSON.stringify(data ?? {});
     const safeJs = JSON.stringify(`(async () => { ${js || ""} })()`);
@@ -4682,219 +4911,636 @@ try { eval(${safeJs}); } catch(e) { document.body.insertAdjacentHTML('beforeend'
     "iframe",
     {
       title: "ai-preview",
+      className: "se-import-preview",
       sandbox: "allow-scripts",
       srcDoc: srcdoc,
-      style: { width: "100%", height: 260, border: "1px solid var(--ui-border, #2a2c31)", borderRadius: 6, background: "repeating-conic-gradient(#1a1c20 0% 25%, #1d1f24 0% 50%) 50% / 20px 20px" },
       "data-canvas-width": width,
       "data-canvas-height": height
     }
   );
 }
-function StepURL({ url, setUrl, error, busy }) {
-  return /* @__PURE__ */ jsxs7("div", { className: "ui-flex-column ui-gap-2", children: [
-    /* @__PURE__ */ jsxs7("p", { style: { margin: 0, opacity: 0.85 }, children: [
-      "Paste the public ",
-      /* @__PURE__ */ jsx13("strong", { children: "preview URL" }),
-      " for your StreamElements overlay. The URL contains the access token, so no StreamElements login is required."
+function StepHeader({
+  number,
+  title,
+  subtitle
+}) {
+  return /* @__PURE__ */ jsxs7("div", { className: "se-import-section-title", children: [
+    /* @__PURE__ */ jsx13("div", { className: "se-import-section-title__num", children: number }),
+    /* @__PURE__ */ jsxs7("div", { className: "se-import-section-title__content", children: [
+      /* @__PURE__ */ jsx13("h3", { children: title }),
+      subtitle && /* @__PURE__ */ jsx13("p", { children: subtitle })
+    ] })
+  ] });
+}
+function StepConnect({
+  jwt,
+  setJwt,
+  error,
+  busy,
+  channels,
+  selectedChannelId,
+  setSelectedChannelId,
+  onUseUrl
+}) {
+  return /* @__PURE__ */ jsxs7("div", { className: panelClass("se-import-panel--narrow"), children: [
+    /* @__PURE__ */ jsx13(
+      StepHeader,
+      {
+        number: 1,
+        title: "Connect your StreamElements account",
+        subtitle: "Paste your StreamElements JWT to import overlays, live counters, chat commands, loyalty points, watch time, and recent events. The token is read in your browser only \u2014 Lumia never sends it to our servers."
+      }
+    ),
+    /* @__PURE__ */ jsx13(
+      Field,
+      {
+        label: "StreamElements JWT",
+        value: jwt,
+        onChange: setJwt,
+        placeholder: "eyJhbGciOi...",
+        disabled: busy
+      }
+    ),
+    channels && channels.length > 1 && /* @__PURE__ */ jsxs7("div", { className: "se-import-help se-import-help--info", children: [
+      /* @__PURE__ */ jsx13("div", { className: "se-import-help__icon", children: "i" }),
+      /* @__PURE__ */ jsxs7("div", { children: [
+        /* @__PURE__ */ jsx13("div", { className: "se-import-help__title", children: "Pick a channel" }),
+        /* @__PURE__ */ jsx13("p", { children: "This account has multiple StreamElements channels. Choose which one to import from." }),
+        /* @__PURE__ */ jsx13("div", { style: { display: "grid", gap: 8, marginTop: 12 }, children: channels.map((c) => /* @__PURE__ */ jsxs7(
+          "label",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              padding: "8px 12px",
+              border: "1px solid var(--se-border)",
+              borderRadius: 8,
+              background: selectedChannelId === c._id ? "rgba(255, 64, 118, 0.12)" : "transparent",
+              cursor: "pointer"
+            },
+            children: [
+              /* @__PURE__ */ jsx13(
+                "input",
+                {
+                  type: "radio",
+                  name: "se-channel",
+                  checked: selectedChannelId === c._id,
+                  onChange: () => setSelectedChannelId(c._id)
+                }
+              ),
+              c.avatar && /* @__PURE__ */ jsx13("img", { src: c.avatar, alt: "", width: 24, height: 24, style: { borderRadius: "50%" } }),
+              /* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexDirection: "column" }, children: [
+                /* @__PURE__ */ jsx13("span", { style: { fontWeight: 700 }, children: c.displayName ?? c.username }),
+                /* @__PURE__ */ jsxs7("span", { style: { fontSize: 12, color: "var(--se-muted)" }, children: [
+                  c.provider,
+                  " \xB7 ",
+                  c.username
+                ] })
+              ] })
+            ]
+          },
+          c._id
+        )) })
+      ] })
     ] }),
-    /* @__PURE__ */ jsx13(LSInput, { label: "StreamElements overlay URL", value: url, onChange: (e) => setUrl(e.target.value), placeholder: "https://streamelements.com/overlay/<id>/<token>", disabled: busy }),
-    /* @__PURE__ */ jsxs7("details", { children: [
-      /* @__PURE__ */ jsx13("summary", { style: { cursor: "pointer", fontWeight: 600, fontSize: 13 }, children: "How to find the overlay URL" }),
-      /* @__PURE__ */ jsxs7("ol", { style: { paddingLeft: 18, marginTop: 8, fontSize: 13, opacity: 0.9 }, children: [
-        /* @__PURE__ */ jsxs7("li", { children: [
-          "Open ",
-          /* @__PURE__ */ jsx13("a", { href: "https://streamelements.com/dashboard/overlays", target: "_blank", rel: "noreferrer", children: "streamelements.com/dashboard/overlays" }),
-          "."
-        ] }),
-        /* @__PURE__ */ jsx13("li", { children: "Click the overlay you want to bring over." }),
-        /* @__PURE__ */ jsxs7("li", { children: [
-          "Click ",
-          /* @__PURE__ */ jsx13("strong", { children: "Copy URL" }),
-          " in the top-right of the editor."
-        ] }),
-        /* @__PURE__ */ jsx13("li", { children: "Paste it above." })
+    /* @__PURE__ */ jsxs7("div", { className: "se-import-help", children: [
+      /* @__PURE__ */ jsx13("div", { className: "se-import-help__icon", children: "i" }),
+      /* @__PURE__ */ jsxs7("div", { children: [
+        /* @__PURE__ */ jsx13("div", { className: "se-import-help__title", children: "How to find your JWT" }),
+        /* @__PURE__ */ jsxs7("ol", { children: [
+          /* @__PURE__ */ jsxs7("li", { children: [
+            "Open",
+            " ",
+            /* @__PURE__ */ jsx13(
+              "a",
+              {
+                href: "https://streamelements.com/dashboard/account/channels",
+                target: "_blank",
+                rel: "noreferrer",
+                children: "streamelements.com/dashboard/account/channels"
+              }
+            ),
+            "."
+          ] }),
+          /* @__PURE__ */ jsxs7("li", { children: [
+            "Click ",
+            /* @__PURE__ */ jsx13("strong", { children: "Show JWT Token" }),
+            " for the channel you want to import."
+          ] }),
+          /* @__PURE__ */ jsx13("li", { children: "Copy the entire token and paste it above." }),
+          /* @__PURE__ */ jsxs7("li", { children: [
+            "When you're done, click ",
+            /* @__PURE__ */ jsx13("strong", { children: "Revoke" }),
+            " on the same page so the token stops working."
+          ] })
+        ] })
       ] })
     ] }),
+    /* @__PURE__ */ jsxs7("div", { style: { marginTop: 16, fontSize: 13, color: "var(--se-muted)" }, children: [
+      "Prefer to import just a single overlay without logging in?",
+      " ",
+      /* @__PURE__ */ jsx13(
+        "a",
+        {
+          href: "#",
+          onClick: (e) => {
+            e.preventDefault();
+            onUseUrl();
+          },
+          style: { color: "var(--se-primary)", fontWeight: 700 },
+          children: "Use a public preview URL instead"
+        }
+      ),
+      "."
+    ] }),
     error && /* @__PURE__ */ jsx13(ErrorPanel, { message: error.message, hint: error.hint })
   ] });
 }
-function StepDiscovery({ result, assetCount }) {
+function StepURL({
+  url,
+  setUrl,
+  error,
+  busy
+}) {
+  return /* @__PURE__ */ jsxs7("div", { className: panelClass("se-import-panel--narrow"), children: [
+    /* @__PURE__ */ jsx13(
+      StepHeader,
+      {
+        number: 1,
+        title: "Paste your StreamElements overlay URL",
+        subtitle: "This should be the public preview URL of your overlay. It includes the\n          access token."
+      }
+    ),
+    /* @__PURE__ */ jsx13(
+      LSInput,
+      {
+        label: "Overlay URL",
+        value: url,
+        onChange: setUrl,
+        placeholder: "https://streamelements.com/overlay/<id>/<token>",
+        disabled: busy
+      }
+    ),
+    /* @__PURE__ */ jsxs7("div", { className: "se-import-help", children: [
+      /* @__PURE__ */ jsx13("div", { className: "se-import-help__icon", children: "i" }),
+      /* @__PURE__ */ jsxs7("div", { children: [
+        /* @__PURE__ */ jsx13("div", { className: "se-import-help__title", children: "How to find the overlay URL" }),
+        /* @__PURE__ */ jsxs7("ol", { children: [
+          /* @__PURE__ */ jsxs7("li", { children: [
+            "Open",
+            " ",
+            /* @__PURE__ */ jsx13(
+              "a",
+              {
+                href: "https://streamelements.com/dashboard/overlays",
+                target: "_blank",
+                rel: "noreferrer",
+                children: "streamelements.com/dashboard/overlays"
+              }
+            ),
+            "."
+          ] }),
+          /* @__PURE__ */ jsx13("li", { children: "Click the overlay you want to bring over." }),
+          /* @__PURE__ */ jsx13("li", { children: "Click Copy URL in the top right of the editor." }),
+          /* @__PURE__ */ jsx13("li", { children: "Paste it above." })
+        ] })
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx13(ErrorPanel, { message: error.message, hint: error.hint })
+  ] });
+}
+function StepDiscovery({
+  result,
+  assetCount
+}) {
   const widgets = result.coverage.totalWidgets;
   const reviewCount = result.reviewItems.length;
-  const customCount = result.coverage.mappings.find((m) => m.seType === "se-widget-custom-event-list")?.count ?? 0;
-  const alertCount = result.coverage.mappings.filter((m) => m.lumiaType === "alert").reduce((a, m) => a + m.count, 0);
-  return /* @__PURE__ */ jsxs7("div", { className: "ui-flex-column ui-gap-2", children: [
-    /* @__PURE__ */ jsx13("div", { style: { fontWeight: 600, fontSize: 16 }, children: "Here's what we found" }),
-    /* @__PURE__ */ jsxs7("div", { className: "ui-flex-row ui-gap-2", style: { flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ jsx13(DiscoveryStat, { label: "Total widgets", value: widgets }),
-      /* @__PURE__ */ jsx13(DiscoveryStat, { label: "Alerts", value: alertCount }),
-      /* @__PURE__ */ jsx13(DiscoveryStat, { label: "Custom widgets", value: customCount, sub: customCount > 0 ? "will need the SE compatibility shim" : void 0 }),
-      /* @__PURE__ */ jsx13(DiscoveryStat, { label: "SE-hosted assets", value: assetCount, sub: assetCount > 0 ? "can be mirrored to Lumia storage" : "no migration needed" }),
-      /* @__PURE__ */ jsx13(DiscoveryStat, { label: "Need review", value: reviewCount, sub: reviewCount > 0 ? "no native Lumia equivalent yet" : "everything maps cleanly", highlight: reviewCount > 0 })
+  const customCount = result.coverage.mappings.find(
+    (item) => item.seType === "se-widget-custom-event-list"
+  )?.count ?? 0;
+  const alertCount = result.coverage.mappings.filter((item) => item.lumiaType === "alert").reduce((sum, item) => sum + item.count, 0);
+  return /* @__PURE__ */ jsxs7("div", { className: panelClass("se-import-panel--wide"), children: [
+    /* @__PURE__ */ jsx13(StepHeader, { number: 2, title: "Here's what we found in your overlay" }),
+    /* @__PURE__ */ jsxs7("div", { className: "se-import-grid se-import-grid--four", children: [
+      /* @__PURE__ */ jsx13(StatusCard, { label: "Total widgets", value: widgets }),
+      /* @__PURE__ */ jsx13(StatusCard, { label: "Alerts", value: alertCount }),
+      /* @__PURE__ */ jsx13(
+        StatusCard,
+        {
+          label: "Custom widgets",
+          value: customCount,
+          sub: customCount > 0 ? "uses the SE compatibility shim" : void 0
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        StatusCard,
+        {
+          label: "SE-hosted assets",
+          value: assetCount,
+          sub: assetCount > 0 ? "can be mirrored to Lumia storage" : "no migration needed"
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx13("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsx13(CoverageCards, { coverage: result.coverage }) })
+    /* @__PURE__ */ jsx13(CoverageCards, { coverage: result.coverage }),
+    /* @__PURE__ */ jsx13("div", { className: "se-import-grid se-import-grid--two", children: /* @__PURE__ */ jsx13(
+      StatusCard,
+      {
+        label: "Need review",
+        value: reviewCount,
+        sub: reviewCount > 0 ? "manual choice needed" : "everything looks good",
+        tone: reviewCount > 0 ? "warn" : "success"
+      }
+    ) })
   ] });
 }
-function DiscoveryStat({ label, value, sub, highlight }) {
-  return /* @__PURE__ */ jsxs7("div", { style: { flex: "1 1 160px", padding: "12px 14px", borderRadius: 6, background: "var(--ui-bg-elevated, #1d1f24)", border: highlight ? "1px solid #f59e0b" : "1px solid transparent" }, children: [
-    /* @__PURE__ */ jsx13("div", { style: { fontSize: 11, textTransform: "uppercase", letterSpacing: 0.5, opacity: 0.7 }, children: label }),
-    /* @__PURE__ */ jsx13("div", { style: { fontSize: 26, fontWeight: 700 }, children: value }),
-    sub && /* @__PURE__ */ jsx13("div", { style: { fontSize: 11, opacity: 0.65, marginTop: 4 }, children: sub })
+function StepOptions({
+  options,
+  setOptions,
+  assetCount
+}) {
+  return /* @__PURE__ */ jsxs7("div", { className: panelClass("se-import-panel--medium"), children: [
+    /* @__PURE__ */ jsx13(StepHeader, { number: 3, title: "Options", subtitle: "Choose how to handle your assets" }),
+    /* @__PURE__ */ jsxs7(
+      "label",
+      {
+        className: `se-import-option ${assetCount === 0 ? "se-import-option--disabled" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx13("span", { className: "se-import-option__icon", children: "\u21A5" }),
+          /* @__PURE__ */ jsxs7("span", { className: "se-import-option__body", children: [
+            /* @__PURE__ */ jsx13("span", { className: "se-import-option__title", children: "Mirror StreamElements assets to Lumia storage" }),
+            /* @__PURE__ */ jsx13("span", { className: "se-import-option__copy", children: "Downloads every cdn.streamelements.com URL referenced in the overlay, uploads it to your Lumia asset library, then rewrites the URLs." })
+          ] }),
+          /* @__PURE__ */ jsxs7("span", { className: "se-import-option__count", children: [
+            assetCount,
+            " files"
+          ] }),
+          /* @__PURE__ */ jsx13(
+            "input",
+            {
+              type: "checkbox",
+              checked: options.mirrorAssets,
+              disabled: assetCount === 0,
+              onChange: (e) => setOptions({ ...options, mirrorAssets: e.target.checked })
+            }
+          ),
+          /* @__PURE__ */ jsx13("span", { className: "se-import-toggle" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx13(
+      LSInput,
+      {
+        label: "Overlay name",
+        value: options.name,
+        onChange: (e) => setOptions({ ...options, name: e.target.value })
+      }
+    )
   ] });
 }
-function StepOptions({ options, setOptions, assetCount }) {
-  return /* @__PURE__ */ jsxs7("div", { className: "ui-flex-column ui-gap-2", children: [
-    /* @__PURE__ */ jsx13("div", { style: { fontWeight: 600, fontSize: 16 }, children: "Import options" }),
-    /* @__PURE__ */ jsxs7("label", { className: "ui-flex-row", style: { gap: 10, padding: 12, borderRadius: 6, background: "var(--ui-bg-elevated, #1d1f24)", cursor: assetCount === 0 ? "not-allowed" : "pointer", opacity: assetCount === 0 ? 0.5 : 1 }, children: [
-      /* @__PURE__ */ jsx13("input", { type: "checkbox", checked: options.mirrorAssets, disabled: assetCount === 0, onChange: (e) => setOptions({ ...options, mirrorAssets: e.target.checked }), style: { marginTop: 2 } }),
-      /* @__PURE__ */ jsxs7("div", { children: [
-        /* @__PURE__ */ jsxs7("div", { style: { fontWeight: 600 }, children: [
-          "Mirror StreamElements assets to Lumia storage ",
-          assetCount > 0 && /* @__PURE__ */ jsxs7("span", { style: { opacity: 0.7, fontWeight: 400 }, children: [
-            "(",
-            assetCount,
-            " files)"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs7("div", { style: { fontSize: 12, opacity: 0.8, marginTop: 4 }, children: [
-          "Downloads every ",
-          `cdn.streamelements.com`,
-          " URL referenced in the overlay and re-uploads it to your Lumia asset library, then rewrites the URLs. Recommended \u2014 if StreamElements rotates their CDN or removes a file, your overlay keeps working."
-        ] })
-      ] })
+function mirrorLabel(state) {
+  if (state === "fetching") return "Fetching";
+  if (state === "done") return "Downloaded";
+  if (state === "reused") return "Reused";
+  if (state === "kept-on-cdn") return "Kept on CDN";
+  if (state === "failed") return "Failed";
+  return "Queued";
+}
+function fileTypeIcon(url) {
+  const ext = filenameFromURL(url).split(".").pop()?.toLowerCase();
+  if (ext === "mp3" || ext === "wav" || ext === "ogg") return audioIcon;
+  if (ext === "webm" || ext === "mp4" || ext === "mov") return videoIcon;
+  return imageIcon;
+}
+function AssetTransferAnimation() {
+  return /* @__PURE__ */ jsxs7("div", { className: "se-import-transfer", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx13("div", { className: "se-import-transfer__source se-import-transfer__source--se", children: /* @__PURE__ */ jsx13("img", { src: sourceSEIcon, alt: "" }) }),
+    /* @__PURE__ */ jsxs7("div", { className: "se-import-transfer__files", children: [
+      /* @__PURE__ */ jsx13(
+        "img",
+        {
+          className: "se-import-transfer__file se-import-transfer__file--one",
+          src: imageFileIcon,
+          alt: ""
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        "img",
+        {
+          className: "se-import-transfer__file se-import-transfer__file--two",
+          src: audioFileIcon,
+          alt: ""
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        "img",
+        {
+          className: "se-import-transfer__file se-import-transfer__file--three",
+          src: imageFileIcon,
+          alt: ""
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        "img",
+        {
+          className: "se-import-transfer__file se-import-transfer__file--four",
+          src: videoFileIcon,
+          alt: ""
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx13(LSInput, { label: "Overlay name", value: options.name, onChange: (e) => setOptions({ ...options, name: e.target.value }) })
+    /* @__PURE__ */ jsx13("div", { className: "se-import-transfer__source se-import-transfer__source--lumia", children: /* @__PURE__ */ jsx13("img", { src: sourceLumiaIcon, alt: "" }) })
   ] });
 }
-function StepMirror({ rows, running, onRetry }) {
-  const done = rows.filter((r) => r.state === "done").length;
-  const reused = rows.filter((r) => r.state === "reused").length;
-  const keptOnCdn = rows.filter((r) => r.state === "kept-on-cdn").length;
-  const failed = rows.filter((r) => r.state === "failed").length;
-  const summary = running ? `Downloading from StreamElements and uploading to Lumia\u2026 (${done + reused + keptOnCdn}/${rows.length})` : `Finished. ${done} mirrored${reused ? `, ${reused} reused from your library` : ""}${keptOnCdn ? `, ${keptOnCdn} SVG kept on SE CDN` : ""}${failed ? `, ${failed} failed (left pointing at SE).` : "."}`;
-  const stateColor = (s) => s === "done" ? "#22c55e" : s === "reused" ? "#60a5fa" : s === "kept-on-cdn" ? "#a78bfa" : s === "failed" ? "#ef4444" : "#6a6ffc";
-  const stateLabel = (s) => s === "pending" ? "\u2026" : s === "fetching" ? "Fetching\u2026" : s === "reused" ? "\u21BA reused" : s === "kept-on-cdn" ? "\u2297 kept on SE CDN" : s === "done" ? "\u2713" : "\u2717";
-  return /* @__PURE__ */ jsxs7("div", { className: "ui-flex-column ui-gap-2", children: [
-    /* @__PURE__ */ jsx13("div", { style: { fontWeight: 600, fontSize: 16 }, children: "Mirroring assets" }),
-    /* @__PURE__ */ jsx13("div", { style: { fontSize: 13, opacity: 0.8 }, children: summary }),
-    /* @__PURE__ */ jsx13(ProgressBar, { value: done + reused + failed + keptOnCdn, max: rows.length }),
-    /* @__PURE__ */ jsx13("div", { className: "ui-flex-column", style: { maxHeight: 320, overflowY: "auto", border: "1px solid var(--ui-border, #2a2c31)", borderRadius: 6 }, children: rows.map((row, i) => /* @__PURE__ */ jsxs7("div", { style: { padding: "8px 12px", borderTop: i === 0 ? "none" : "1px solid var(--ui-border, #2a2c31)", fontSize: 12 }, children: [
-      /* @__PURE__ */ jsxs7("div", { className: "ui-flex-row", style: { justifyContent: "space-between", gap: 8, alignItems: "center" }, children: [
-        /* @__PURE__ */ jsx13("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1, fontFamily: "ui-monospace, monospace" }, title: row.url, children: row.url }),
-        /* @__PURE__ */ jsx13("span", { style: { color: stateColor(row.state), fontWeight: 600 }, children: stateLabel(row.state) }),
-        row.state === "failed" && /* @__PURE__ */ jsx13(
-          "button",
-          {
-            type: "button",
-            className: "ui-button ui-button-secondary",
-            style: { padding: "2px 10px", fontSize: 11, minWidth: 0 },
-            onClick: () => onRetry(i),
-            title: "Retry this asset",
-            children: "Retry"
-          }
-        )
-      ] }),
-      row.error && /* @__PURE__ */ jsx13("div", { style: { marginTop: 4, color: "#fca5a5" }, children: row.error })
-    ] }, row.url)) })
+function StepMirror({
+  rows,
+  running,
+  onRetry
+}) {
+  const done = rows.filter((row) => row.state === "done").length;
+  const reused = rows.filter((row) => row.state === "reused").length;
+  const keptOnCdn = rows.filter((row) => row.state === "kept-on-cdn").length;
+  const failed = rows.filter((row) => row.state === "failed").length;
+  const completed = done + reused + keptOnCdn + failed;
+  const summary = running ? `Downloading... (${done + reused + keptOnCdn}/${rows.length})` : `Finished. ${done} mirrored${reused ? `, ${reused} reused` : ""}${keptOnCdn ? `, ${keptOnCdn} kept on CDN` : ""}${failed ? `, ${failed} failed` : ""}.`;
+  return /* @__PURE__ */ jsxs7("div", { className: panelClass("se-import-panel--wide"), children: [
+    /* @__PURE__ */ jsx13(StepHeader, { number: 4, title: "Mirroring assets", subtitle: "We're downloading your assets from StreamElements and preparing them for import." }),
+    /* @__PURE__ */ jsx13(AssetTransferAnimation, {}),
+    /* @__PURE__ */ jsx13("div", { className: "se-import-mirror-head", children: /* @__PURE__ */ jsx13("span", { children: summary }) }),
+    /* @__PURE__ */ jsx13(ProgressBar, { value: completed, max: rows.length }),
+    /* @__PURE__ */ jsx13("div", { className: "se-import-asset-list", children: rows.map((row, index) => /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: `se-import-asset-row se-import-asset-row--${row.state}`,
+        children: [
+          /* @__PURE__ */ jsx13(
+            "img",
+            {
+              className: "se-import-asset-row__icon",
+              src: fileTypeIcon(row.url),
+              alt: ""
+            }
+          ),
+          /* @__PURE__ */ jsx13("span", { className: "se-import-asset-row__url", title: row.url, children: row.url }),
+          /* @__PURE__ */ jsx13("span", { className: "se-import-asset-row__state", children: mirrorLabel(row.state) }),
+          row.state === "failed" && /* @__PURE__ */ jsx13(
+            LSButton,
+            {
+              type: "button",
+              variant: "text",
+              color: "secondary",
+              size: "small",
+              className: "se-import-link-button",
+              onClick: () => onRetry(index),
+              label: "Retry"
+            }
+          ),
+          row.error && /* @__PURE__ */ jsx13("span", { className: "se-import-asset-row__error", children: row.error })
+        ]
+      },
+      row.url
+    )) })
   ] });
 }
-function StepReview({ item, index, total, state, error, generated, canvas, onSkip, onKeep, onGenerate, onAccept, onRetry, onPickMarketplace, onKeepAllPlaceholders, onSkipAll, remainingCount, marketplaceAvailable }) {
-  return /* @__PURE__ */ jsxs7("div", { className: "ui-flex-column ui-gap-2", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "ui-flex-row", style: { justifyContent: "space-between", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsxs7("div", { style: { fontWeight: 600, fontSize: 16 }, children: [
-        "Reviewing widget ",
-        index + 1,
-        " of ",
-        total
+function StepReview({
+  item,
+  index,
+  total,
+  state,
+  error,
+  generated,
+  canvas,
+  onSkip,
+  onKeep,
+  onGenerate,
+  onAccept,
+  onRetry,
+  onPickMarketplace,
+  onKeepAllPlaceholders,
+  onSkipAll,
+  remainingCount,
+  marketplaceAvailable
+}) {
+  return /* @__PURE__ */ jsxs7("div", { className: panelClass("se-import-panel--medium"), children: [
+    /* @__PURE__ */ jsx13(
+      StepHeader,
+      {
+        number: 4,
+        title: `Review widget ${index + 1} of ${total}`,
+        subtitle: "Choose how to handle this unsupported StreamElements widget"
+      }
+    ),
+    /* @__PURE__ */ jsxs7("div", { className: "se-import-review-card", children: [
+      /* @__PURE__ */ jsxs7("div", { children: [
+        /* @__PURE__ */ jsx13("div", { className: "se-import-review-card__type", children: item.seWidget.type }),
+        /* @__PURE__ */ jsx13("p", { children: item.reason })
       ] }),
-      /* @__PURE__ */ jsxs7("div", { className: "ui-flex-row ui-gap-2", style: { alignItems: "center" }, children: [
-        item.flaggedOff && /* @__PURE__ */ jsx13("div", { style: { fontSize: 10, padding: "2px 8px", borderRadius: 4, background: "rgba(234, 179, 8, 0.2)", color: "#facc15", textTransform: "uppercase", letterSpacing: 0.5, fontWeight: 600 }, children: "Auto-import disabled" }),
-        /* @__PURE__ */ jsx13("div", { style: { fontSize: 11, opacity: 0.7, textTransform: "uppercase", letterSpacing: 0.5 }, children: item.status })
-      ] })
+      /* @__PURE__ */ jsx13("div", { className: "se-import-review-card__status", children: item.flaggedOff ? "Auto-import disabled" : item.status })
     ] }),
-    remainingCount > 1 && /* @__PURE__ */ jsxs7("div", { className: "ui-flex-row ui-gap-2", style: { justifyContent: "flex-end", alignItems: "center", fontSize: 12 }, children: [
-      /* @__PURE__ */ jsxs7("span", { style: { opacity: 0.7 }, children: [
+    remainingCount > 1 && /* Bulk-action row — shortcut to wrap up the review step when there are still
+    several unactioned widgets and the user doesn't want to walk each one. */
+    /* @__PURE__ */ jsxs7("div", { className: "se-import-review-bulk", children: [
+      /* @__PURE__ */ jsxs7("span", { children: [
         remainingCount,
         " remaining"
       ] }),
-      /* @__PURE__ */ jsx13("button", { type: "button", className: "ui-button ui-button-secondary", style: { padding: "4px 10px", fontSize: 12 }, onClick: onKeepAllPlaceholders, title: "Keep every remaining placeholder/template widget as-is (skips flagged-off widgets that should go to marketplace/AI)", children: "Keep all placeholders" }),
-      /* @__PURE__ */ jsx13("button", { type: "button", className: "ui-button ui-button-secondary", style: { padding: "4px 10px", fontSize: 12 }, onClick: onSkipAll, title: "Drop every remaining widget entirely", children: "Skip all" })
-    ] }),
-    /* @__PURE__ */ jsxs7("div", { style: { padding: 12, borderRadius: 6, background: "var(--ui-bg-elevated, #1d1f24)" }, children: [
-      /* @__PURE__ */ jsx13("div", { style: { fontFamily: "ui-monospace, monospace", fontWeight: 600, fontSize: 13 }, children: item.seWidget.type }),
-      /* @__PURE__ */ jsx13("div", { style: { fontSize: 13, opacity: 0.85, marginTop: 4 }, children: item.reason })
+      /* @__PURE__ */ jsx13(
+        LSButton,
+        {
+          type: "button",
+          color: "secondary",
+          variant: "contained",
+          onClick: onKeepAllPlaceholders,
+          label: "Keep all placeholders"
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        LSButton,
+        {
+          type: "button",
+          color: "secondary",
+          variant: "contained",
+          onClick: onSkipAll,
+          label: "Skip all"
+        }
+      )
     ] }),
-    state === "generating" && /* @__PURE__ */ jsx13("div", { style: { padding: 12, fontSize: 13, opacity: 0.85 }, children: "Generating with AI\u2026 this can take 30\u201390 seconds." }),
-    state === "generated" && generated && /* @__PURE__ */ jsxs7(Fragment3, { children: [
-      /* @__PURE__ */ jsx13("div", { style: { fontSize: 13, fontWeight: 600, marginTop: 4 }, children: "Preview" }),
+    state === "generating" && /* @__PURE__ */ jsx13("div", { className: "se-import-muted", children: "Generating with AI. This can take 30-90 seconds." }),
+    state === "generated" && generated && /* @__PURE__ */ jsxs7("div", { className: "se-import-generated", children: [
+      /* @__PURE__ */ jsx13("div", { className: "se-import-generated__title", children: "Preview" }),
       (() => {
         const landing = getAILandingBounds(item.seWidget, canvas);
-        return /* @__PURE__ */ jsx13(CustomOverlayPreview, { html: generated.html ?? "", css: generated.css ?? "", js: generated.js ?? "", data: generated.data ?? {}, width: landing.width, height: landing.height });
+        return /* @__PURE__ */ jsx13(
+          CustomOverlayPreview,
+          {
+            html: generated.html ?? "",
+            css: generated.css ?? "",
+            js: generated.js ?? "",
+            data: generated.data ?? {},
+            width: landing.width,
+            height: landing.height
+          }
+        );
       })(),
-      /* @__PURE__ */ jsxs7("details", { children: [
-        /* @__PURE__ */ jsx13("summary", { style: { cursor: "pointer", fontSize: 12, opacity: 0.8 }, children: "Generated code" }),
-        /* @__PURE__ */ jsxs7("details", { style: { marginLeft: 12, marginTop: 8 }, children: [
-          /* @__PURE__ */ jsx13("summary", { style: { cursor: "pointer", fontSize: 12 }, children: "HTML" }),
-          /* @__PURE__ */ jsx13("pre", { style: { fontSize: 11, padding: 8, background: "rgba(0,0,0,0.25)", borderRadius: 4, maxHeight: 160, overflow: "auto" }, children: generated.html || "" })
-        ] }),
-        /* @__PURE__ */ jsxs7("details", { style: { marginLeft: 12 }, children: [
-          /* @__PURE__ */ jsx13("summary", { style: { cursor: "pointer", fontSize: 12 }, children: "CSS" }),
-          /* @__PURE__ */ jsx13("pre", { style: { fontSize: 11, padding: 8, background: "rgba(0,0,0,0.25)", borderRadius: 4, maxHeight: 160, overflow: "auto" }, children: generated.css || "" })
-        ] }),
-        /* @__PURE__ */ jsxs7("details", { style: { marginLeft: 12 }, children: [
-          /* @__PURE__ */ jsx13("summary", { style: { cursor: "pointer", fontSize: 12 }, children: "JS" }),
-          /* @__PURE__ */ jsx13("pre", { style: { fontSize: 11, padding: 8, background: "rgba(0,0,0,0.25)", borderRadius: 4, maxHeight: 160, overflow: "auto" }, children: generated.js || "" })
-        ] })
+      /* @__PURE__ */ jsxs7("details", { className: "se-import-code", children: [
+        /* @__PURE__ */ jsx13("summary", { children: "Generated code" }),
+        /* @__PURE__ */ jsx13("pre", { children: JSON.stringify(
+          {
+            html: generated.html ?? "",
+            css: generated.css ?? "",
+            js: generated.js ?? ""
+          },
+          null,
+          2
+        ) })
       ] })
     ] }),
     error && /* @__PURE__ */ jsx13(ErrorPanel, { message: error }),
-    /* @__PURE__ */ jsxs7("details", { children: [
-      /* @__PURE__ */ jsx13("summary", { style: { cursor: "pointer", fontSize: 12, opacity: 0.8 }, children: "Original StreamElements config" }),
-      /* @__PURE__ */ jsx13("pre", { style: { marginTop: 6, fontSize: 11, padding: 8, background: "rgba(0,0,0,0.25)", borderRadius: 4, maxHeight: 180, overflow: "auto" }, children: JSON.stringify(item.seWidget.variables ?? {}, null, 2) })
+    /* @__PURE__ */ jsxs7("details", { className: "se-import-code", children: [
+      /* @__PURE__ */ jsx13("summary", { children: "Original StreamElements config" }),
+      /* @__PURE__ */ jsx13("pre", { children: JSON.stringify(item.seWidget.variables ?? {}, null, 2) })
     ] }),
-    /* @__PURE__ */ jsx13("div", { className: "ui-flex-row ui-gap-2", style: { marginTop: 8 }, children: state === "generated" ? /* @__PURE__ */ jsxs7(Fragment3, { children: [
-      /* @__PURE__ */ jsx13("button", { type: "button", className: "ui-button", onClick: onRetry, children: "Try again" }),
-      /* @__PURE__ */ jsx13("button", { type: "button", className: "ui-button", onClick: onSkip, children: "Skip this widget" }),
-      /* @__PURE__ */ jsx13("button", { type: "button", className: "ui-button ui-button-purple", onClick: onAccept, children: "Use this and continue" })
+    /* @__PURE__ */ jsx13("div", { className: "se-import-actions se-import-actions--inline", children: state === "generated" ? /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      /* @__PURE__ */ jsx13(
+        LSButton,
+        {
+          type: "button",
+          color: "secondary",
+          onClick: onRetry,
+          label: "Try again"
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        LSButton,
+        {
+          type: "button",
+          color: "secondary",
+          onClick: onSkip,
+          label: "Skip this widget"
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        LSButton,
+        {
+          type: "button",
+          color: "primary",
+          onClick: onAccept,
+          label: "Use this and continue"
+        }
+      )
     ] }) : /* @__PURE__ */ jsxs7(Fragment3, { children: [
-      !item.flaggedOff && /* @__PURE__ */ jsx13("button", { type: "button", className: "ui-button", onClick: onKeep, disabled: state === "generating", children: "Keep placeholder" }),
-      /* @__PURE__ */ jsx13("button", { type: "button", className: "ui-button", onClick: onSkip, disabled: state === "generating", children: "Skip" }),
-      marketplaceAvailable && /* @__PURE__ */ jsx13("button", { type: "button", className: "ui-button", onClick: onPickMarketplace, disabled: state === "generating", children: "Pick from Marketplace" }),
-      /* @__PURE__ */ jsx13("button", { type: "button", className: "ui-button ui-button-purple", onClick: onGenerate, disabled: state === "generating", children: state === "generating" ? "Generating\u2026" : "Generate with AI" })
+      !item.flaggedOff && /* @__PURE__ */ jsx13(
+        LSButton,
+        {
+          type: "button",
+          color: "secondary",
+          onClick: onKeep,
+          disabled: state === "generating",
+          label: "Keep placeholder"
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        LSButton,
+        {
+          type: "button",
+          color: "secondary",
+          onClick: onSkip,
+          disabled: state === "generating",
+          label: "Skip"
+        }
+      ),
+      marketplaceAvailable && /* @__PURE__ */ jsx13(
+        LSButton,
+        {
+          type: "button",
+          color: "secondary",
+          onClick: onPickMarketplace,
+          disabled: state === "generating",
+          label: "Pick from Marketplace"
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        LSButton,
+        {
+          type: "button",
+          color: "primary",
+          onClick: onGenerate,
+          disabled: state === "generating",
+          label: state === "generating" ? "Generating..." : "Generate with AI"
+        }
+      )
     ] }) }),
-    item.flaggedOff && !marketplaceAvailable && state !== "generated" && /* @__PURE__ */ jsx13("div", { style: { fontSize: 12, opacity: 0.75 }, children: "No curated Marketplace replacement is configured for this widget yet." })
+    item.flaggedOff && !marketplaceAvailable && state !== "generated" && /* @__PURE__ */ jsx13("div", { className: "se-import-muted", children: "No curated Marketplace replacement is configured for this widget yet." })
   ] });
 }
-function StepConfirm({ result, options, mirrorRows, rowStates }) {
-  const total = result.overlay.settings.layers.length;
-  const mirrored = mirrorRows.filter((r) => r.state === "done" || r.state === "reused" || r.state === "kept-on-cdn").length;
-  const mirrorFailed = mirrorRows.filter((r) => r.state === "failed").length;
+function StepConfirm({
+  result,
+  options,
+  mirrorRows,
+  rowStates
+}) {
+  const widgets = result.coverage.totalWidgets;
+  const alertCount = result.coverage.mappings.filter((item) => item.lumiaType === "alert").reduce((sum, item) => sum + item.count, 0);
+  const mirrored = mirrorRows.filter(
+    (row) => row.state === "done" || row.state === "reused" || row.state === "kept-on-cdn"
+  ).length;
   const reviewBuckets = Object.values(rowStates).reduce(
-    (acc, s) => {
-      acc[s.state] = (acc[s.state] ?? 0) + 1;
+    (acc, item) => {
+      acc[item.state] = (acc[item.state] ?? 0) + 1;
       return acc;
     },
     {}
   );
-  return /* @__PURE__ */ jsxs7("div", { className: "ui-flex-column ui-gap-2", children: [
-    /* @__PURE__ */ jsx13("div", { style: { fontWeight: 600, fontSize: 16 }, children: "Ready to import" }),
-    /* @__PURE__ */ jsxs7("div", { className: "ui-flex-column ui-gap-2", style: { padding: 12, borderRadius: 6, background: "var(--ui-bg-elevated, #1d1f24)" }, children: [
-      /* @__PURE__ */ jsx13(Row, { label: "Overlay name", value: options.name || result.overlay.name }),
-      /* @__PURE__ */ jsx13(Row, { label: "Layers", value: `${total}` }),
-      /* @__PURE__ */ jsx13(Row, { label: "Assets mirrored", value: options.mirrorAssets ? `${mirrored} / ${mirrorRows.length}${mirrorFailed ? ` (${mirrorFailed} kept on SE CDN)` : ""}` : "skipped" }),
-      /* @__PURE__ */ jsx13(Row, { label: "Generated with AI", value: `${reviewBuckets.generated ?? 0}` }),
-      /* @__PURE__ */ jsx13(Row, { label: "Skipped", value: `${reviewBuckets.skipped ?? 0}` }),
-      /* @__PURE__ */ jsx13(Row, { label: "Kept as placeholder", value: `${reviewBuckets.kept ?? 0}` })
+  return /* @__PURE__ */ jsxs7("div", { className: panelClass("se-import-panel--confirm"), children: [
+    /* @__PURE__ */ jsx13(
+      StepHeader,
+      {
+        number: 5,
+        title: "Confirm",
+        subtitle: "Review and confirm your import"
+      }
+    ),
+    /* @__PURE__ */ jsxs7("div", { className: "se-import-overview", children: [
+      /* @__PURE__ */ jsx13("h3", { children: "Overview" }),
+      /* @__PURE__ */ jsx13(Row, { label: "Overlay", value: options.name || result.overlay.name }),
+      /* @__PURE__ */ jsx13(Row, { label: "Widgets", value: `${widgets}` }),
+      /* @__PURE__ */ jsx13(Row, { label: "Alerts", value: `${alertCount}` }),
+      /* @__PURE__ */ jsx13(
+        Row,
+        {
+          label: "Assets to import",
+          value: `${mirrorRows.length}`,
+          meta: options.mirrorAssets ? `Mirrored to Lumia storage (${mirrored})` : "Skipped"
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        Row,
+        {
+          label: "Import behavior",
+          value: options.mirrorAssets ? "Mirror assets and rewrite URLs" : "Keep original asset URLs"
+        }
+      ),
+      reviewBuckets.generated ? /* @__PURE__ */ jsx13(Row, { label: "Generated with AI", value: `${reviewBuckets.generated}` }) : null,
+      reviewBuckets.skipped ? /* @__PURE__ */ jsx13(Row, { label: "Skipped", value: `${reviewBuckets.skipped}` }) : null,
+      reviewBuckets.kept ? /* @__PURE__ */ jsx13(Row, { label: "Kept as placeholder", value: `${reviewBuckets.kept}` }) : null
     ] })
   ] });
 }
-function Row({ label, value }) {
-  return /* @__PURE__ */ jsxs7("div", { className: "ui-flex-row", style: { justifyContent: "space-between" }, children: [
-    /* @__PURE__ */ jsx13("span", { style: { opacity: 0.75 }, children: label }),
-    /* @__PURE__ */ jsx13("span", { style: { fontWeight: 600 }, children: value })
+function Row({
+  label,
+  value,
+  meta
+}) {
+  return /* @__PURE__ */ jsxs7("div", { className: "se-import-row", children: [
+    /* @__PURE__ */ jsx13("span", { children: label }),
+    /* @__PURE__ */ jsx13("strong", { children: value }),
+    meta && /* @__PURE__ */ jsx13("em", { children: meta })
   ] });
 }
-function SEImportWizard({ bindings }) {
+function SEImportWizard({
+  bindings,
+  initialUrl = ""
+}) {
   const {
     fetchMarketplaceOverlay,
     generateAICustomCode,
@@ -4908,25 +5554,90 @@ function SEImportWizard({ bindings }) {
     t
   } = bindings;
   const translate = (key, fallback) => t ? t(key) ?? fallback : fallback;
-  const [step, setStep] = useState6("url");
-  const [url, setUrl] = useState6("");
+  const [step, setStep] = useState6("connect");
+  const [jwt, setJwt] = useState6("");
+  const [seClient, setSeClient] = useState6(null);
+  const [channels, setChannels] = useState6(null);
+  const [selectedChannelId, setSelectedChannelId] = useState6(null);
+  const [connectError, setConnectError] = useState6(null);
+  const [connecting, setConnecting] = useState6(false);
+  const [url, setUrl] = useState6(initialUrl);
   const [loadError, setLoadError] = useState6(null);
   const [loading, setLoading] = useState6(false);
   const [result, setResult] = useState6(null);
-  const [originalReviewItems, setOriginalReviewItems] = useState6([]);
-  const [options, setOptions] = useState6({ mirrorAssets: true, name: "" });
-  const assetUrls = useMemo5(() => result ? findSEAssetURLs(result.overlay) : [], [result]);
+  const [originalReviewItems, setOriginalReviewItems] = useState6(
+    []
+  );
+  const [options, setOptions] = useState6({
+    mirrorAssets: true,
+    name: ""
+  });
   const [mirrorRows, setMirrorRows] = useState6([]);
   const [mirrorRunning, setMirrorRunning] = useState6(false);
-  const mirrorStartedRef = useRef4(false);
   const [rowStates, setRowStates] = useState6({});
   const [reviewIndex, setReviewIndex] = useState6(0);
   const [importing, setImporting] = useState6(false);
+  const [marketplacePickerOpen, setMarketplacePickerOpen] = useState6(false);
+  const mirrorStartedRef = useRef4(false);
+  const mirrorAbortRef = useRef4(null);
+  const filenameCacheRef = useRef4(/* @__PURE__ */ new Map());
+  const assetUrls = useMemo5(
+    () => result ? findSEAssetURLs(result.overlay) : [],
+    [result]
+  );
+  const currentItem = originalReviewItems[reviewIndex];
+  const currentRow = currentItem ? rowStates[currentItem.moduleId] ?? { state: "pending" } : void 0;
+  const handleConnect = useCallback3(async () => {
+    setConnectError(null);
+    let client;
+    try {
+      client = SEClient.fromJwt(jwt);
+    } catch (e) {
+      if (e instanceof SEAuthError) {
+        const hint = e.code === "expired" ? "Generate a new JWT on streamelements.com/dashboard/account/channels." : void 0;
+        setConnectError({ message: e.message, hint });
+      } else {
+        setConnectError({
+          message: e instanceof Error ? e.message : "Could not read that token."
+        });
+      }
+      return;
+    }
+    setConnecting(true);
+    try {
+      const usable = await fetchUsableChannels(client);
+      const preferred = usable.find((c) => c._id === client.channelId) ?? usable[0];
+      if (!preferred) {
+        setConnectError({
+          message: "No authorized StreamElements channels found on this account."
+        });
+        return;
+      }
+      setSeClient(client);
+      setChannels(usable);
+      setSelectedChannelId(preferred._id);
+    } catch (e) {
+      if (e instanceof SEAuthError) {
+        const hint = e.code === "unauthorized" ? "Generate a new JWT on streamelements.com/dashboard/account/channels." : void 0;
+        setConnectError({ message: e.message, hint });
+        bindings.onAuthError?.(e);
+      } else {
+        setConnectError({
+          message: e instanceof Error ? e.message : "Could not reach StreamElements."
+        });
+      }
+    } finally {
+      setConnecting(false);
+    }
+  }, [bindings, jwt]);
   const handleLoad = useCallback3(async () => {
     setLoadError(null);
     const parts = extractSEPreviewParts(url);
     if (!parts) {
-      setLoadError({ message: "That doesn't look like a StreamElements overlay URL.", hint: "Expected: https://streamelements.com/overlay/<overlayId>/<token>" });
+      setLoadError({
+        message: "That doesn't look like a StreamElements overlay URL.",
+        hint: "Expected: https://streamelements.com/overlay/<overlayId>/<token>"
+      });
       return;
     }
     setLoading(true);
@@ -4934,51 +5645,82 @@ function SEImportWizard({ bindings }) {
       const bootstrap = await fetchSEBootstrap(parts);
       const imported = importSEBootstrap(bootstrap);
       setResult(imported);
-      setOptions((o) => ({ ...o, name: imported.overlay.name }));
+      setOptions((previous) => ({ ...previous, name: imported.overlay.name }));
       setOriginalReviewItems(imported.reviewItems);
-      setRowStates(Object.fromEntries(imported.reviewItems.map((r) => [r.moduleId, { state: "pending" }])));
+      setRowStates(
+        Object.fromEntries(
+          imported.reviewItems.map((item) => [
+            item.moduleId,
+            { state: "pending" }
+          ])
+        )
+      );
       setReviewIndex(0);
       setStep("discovery");
-    } catch (e) {
-      setLoadError({ message: "Could not load the overlay.", hint: e?.message });
+    } catch (error) {
+      setLoadError({
+        message: "Could not load the overlay.",
+        hint: error?.message
+      });
     } finally {
       setLoading(false);
     }
   }, [url]);
-  const mirrorAbortRef = useRef4(null);
   const processAssetRow = useCallback3(
     async (assetUrl, idx, existingByFilename, signal) => {
       const filename = filenameFromURL(assetUrl);
       const reuseUrl = existingByFilename.get(filename);
       if (reuseUrl) {
-        setResult((curr) => curr ? { ...curr, overlay: rewriteAssetURLs(curr.overlay, { [assetUrl]: reuseUrl }) } : curr);
+        setResult(
+          (current) => current ? {
+            ...current,
+            overlay: rewriteAssetURLs(current.overlay, {
+              [assetUrl]: reuseUrl
+            })
+          } : current
+        );
         return { state: "reused", newUrl: reuseUrl };
       }
-      if (filename.toLowerCase().endsWith(".svg")) {
+      if (filename.toLowerCase().endsWith(".svg"))
         return { state: "kept-on-cdn", newUrl: assetUrl };
-      }
-      setMirrorRows((prev) => prev.map((r, i) => i === idx ? { ...r, state: "fetching", error: void 0 } : r));
+      setMirrorRows(
+        (previous) => previous.map(
+          (row, i) => i === idx ? { ...row, state: "fetching", error: void 0 } : row
+        )
+      );
       try {
-        const newUrl = await mirrorOneAsset(assetUrl, (file) => uploadAsset(file), signal);
+        const newUrl = await mirrorOneAsset(
+          assetUrl,
+          (file) => uploadAsset(file),
+          signal
+        );
         existingByFilename.set(filename, newUrl);
-        setResult((curr) => curr ? { ...curr, overlay: rewriteAssetURLs(curr.overlay, { [assetUrl]: newUrl }) } : curr);
+        setResult(
+          (current) => current ? {
+            ...current,
+            overlay: rewriteAssetURLs(current.overlay, {
+              [assetUrl]: newUrl
+            })
+          } : current
+        );
         return { state: "done", newUrl };
-      } catch (err) {
-        if (err?.name === "AbortError" || signal?.aborted) {
+      } catch (error) {
+        if (error?.name === "AbortError" || signal?.aborted)
           return { state: "pending" };
-        }
-        return { state: "failed", error: extractErrorMessage(err) };
+        return { state: "failed", error: extractErrorMessage(error) };
       }
     },
     [uploadAsset]
   );
-  const filenameCacheRef = useRef4(/* @__PURE__ */ new Map());
   const runMirror = useCallback3(async () => {
     if (!result) return;
     mirrorAbortRef.current = new AbortController();
     const signal = mirrorAbortRef.current.signal;
     setMirrorRunning(true);
-    const initialRows = assetUrls.map((u) => ({ url: u, state: "pending" }));
+    const initialRows = assetUrls.map((assetUrl) => ({
+      url: assetUrl,
+      state: "pending"
+    }));
     setMirrorRows(initialRows);
     const existingByFilename = /* @__PURE__ */ new Map();
     for (const asset of existingAssets ?? []) {
@@ -4987,17 +5729,17 @@ function SEImportWizard({ bindings }) {
     }
     filenameCacheRef.current = existingByFilename;
     for (let i = 0; i < initialRows.length; i += 1) {
-      if (signal.aborted) {
-        setMirrorRunning(false);
-        return;
-      }
-      const row = initialRows[i];
-      const outcome = await processAssetRow(row.url, i, existingByFilename, signal);
-      if (signal.aborted) {
-        setMirrorRunning(false);
-        return;
-      }
-      setMirrorRows((prev) => prev.map((r, idx) => idx === i ? { ...r, ...outcome } : r));
+      if (signal.aborted) break;
+      const outcome = await processAssetRow(
+        initialRows[i].url,
+        i,
+        existingByFilename,
+        signal
+      );
+      if (signal.aborted) break;
+      setMirrorRows(
+        (previous) => previous.map((row, idx) => idx === i ? { ...row, ...outcome } : row)
+      );
     }
     setMirrorRunning(false);
   }, [assetUrls, existingAssets, processAssetRow, result]);
@@ -5005,8 +5747,15 @@ function SEImportWizard({ bindings }) {
     async (idx) => {
       const rowUrl = mirrorRows[idx]?.url;
       if (!rowUrl) return;
-      const outcome = await processAssetRow(rowUrl, idx, filenameCacheRef.current, mirrorAbortRef.current?.signal);
-      setMirrorRows((prev) => prev.map((r, i) => i === idx ? { ...r, ...outcome } : r));
+      const outcome = await processAssetRow(
+        rowUrl,
+        idx,
+        filenameCacheRef.current,
+        mirrorAbortRef.current?.signal
+      );
+      setMirrorRows(
+        (previous) => previous.map((row, i) => i === idx ? { ...row, ...outcome } : row)
+      );
     },
     [mirrorRows, processAssetRow]
   );
@@ -5016,15 +5765,23 @@ function SEImportWizard({ bindings }) {
       void runMirror();
     }
   }, [step, runMirror]);
-  const currentItem = originalReviewItems[reviewIndex];
-  const currentRow = currentItem ? rowStates[currentItem.moduleId] ?? { state: "pending" } : void 0;
   const advanceReview = useCallback3(() => {
-    if (reviewIndex + 1 < originalReviewItems.length) setReviewIndex(reviewIndex + 1);
+    if (reviewIndex + 1 < originalReviewItems.length)
+      setReviewIndex(reviewIndex + 1);
     else setStep("confirm");
   }, [originalReviewItems.length, reviewIndex]);
-  const setRow = useCallback3((moduleId, patch) => {
-    setRowStates((prev) => ({ ...prev, [moduleId]: { ...prev[moduleId] ?? { state: "pending" }, ...patch } }));
-  }, []);
+  const setRow = useCallback3(
+    (moduleId, patch) => {
+      setRowStates((previous) => ({
+        ...previous,
+        [moduleId]: {
+          ...previous[moduleId] ?? { state: "pending" },
+          ...patch
+        }
+      }));
+    },
+    []
+  );
   const handleKeep = () => {
     if (!result || !currentItem) return;
     setResult(applyReviewAction(result, currentItem.moduleId, "keep"));
@@ -5041,22 +5798,43 @@ function SEImportWizard({ bindings }) {
     if (!currentItem || !result) return;
     setRow(currentItem.moduleId, { state: "generating", error: void 0 });
     try {
-      const canvas = { width: result.overlay.settings.metadata.width, height: result.overlay.settings.metadata.height };
-      const generated = await generateAICustomCode(buildAIPromptForSEWidget(currentItem.seWidget, canvas));
+      const canvas = {
+        width: result.overlay.settings.metadata.width,
+        height: result.overlay.settings.metadata.height
+      };
+      const generated = await generateAICustomCode(
+        buildAIPromptForSEWidget(currentItem.seWidget, canvas)
+      );
       setRow(currentItem.moduleId, { state: "generated", generated });
-    } catch (e) {
-      setRow(currentItem.moduleId, { state: "failed", error: e?.message ?? "AI generation failed." });
+    } catch (error) {
+      setRow(currentItem.moduleId, {
+        state: "failed",
+        error: error?.message ?? "AI generation failed."
+      });
     }
   };
   const handleAcceptGenerated = () => {
     if (!result || !currentItem || !currentRow?.generated) return;
-    setResult(applyReviewAction(result, currentItem.moduleId, "ai", currentRow.generated));
+    setResult(
+      applyReviewAction(
+        result,
+        currentItem.moduleId,
+        "ai",
+        currentRow.generated
+      )
+    );
     advanceReview();
   };
-  const [marketplacePickerOpen, setMarketplacePickerOpen] = useState6(false);
   const handlePickMarketplace = (transplant) => {
     if (!result || !currentItem) return;
-    setResult(applyReviewAction(result, currentItem.moduleId, "marketplace", transplant));
+    setResult(
+      applyReviewAction(
+        result,
+        currentItem.moduleId,
+        "marketplace",
+        transplant
+      )
+    );
     setRow(currentItem.moduleId, { state: "kept" });
     setMarketplacePickerOpen(false);
     advanceReview();
@@ -5066,22 +5844,22 @@ function SEImportWizard({ bindings }) {
     const patch = {};
     for (const item of originalReviewItems) {
       const rowState = rowStates[item.moduleId]?.state ?? "pending";
-      if (rowState !== "pending") continue;
-      if (item.flaggedOff) continue;
-      if (item.status !== "placeholder" && item.status !== "template") continue;
+      if (rowState !== "pending" || item.flaggedOff || item.status !== "placeholder" && item.status !== "template")
+        continue;
       patch[item.moduleId] = { state: "kept" };
     }
-    if (Object.keys(patch).length) setRowStates((prev) => ({ ...prev, ...patch }));
-    const remainingIndex = originalReviewItems.findIndex((item) => (patch[item.moduleId]?.state ?? rowStates[item.moduleId]?.state ?? "pending") === "pending");
+    if (Object.keys(patch).length)
+      setRowStates((previous) => ({ ...previous, ...patch }));
+    const remainingIndex = originalReviewItems.findIndex(
+      (item) => (patch[item.moduleId]?.state ?? rowStates[item.moduleId]?.state ?? "pending") === "pending"
+    );
     if (remainingIndex >= 0) {
       setReviewIndex(remainingIndex);
       const remainingItem = originalReviewItems[remainingIndex];
-      if (remainingItem?.flaggedOff) {
-        const actionText = hasMarketplaceCandidates(remainingItem.seWidget.type) ? "Skip, Marketplace, or Generate with AI" : "Skip or Generate with AI";
-        notify.warning(`Choose ${actionText} for the flagged-off widget.`);
-      } else {
-        notify.warning("Review the remaining widget before continuing.");
-      }
+      const actionText = remainingItem?.flaggedOff && hasMarketplaceCandidates(remainingItem.seWidget.type) ? "Skip, Marketplace, or Generate with AI" : "Skip or Generate with AI";
+      notify.warning(
+        remainingItem?.flaggedOff ? `Choose ${actionText} for the flagged-off widget.` : "Review the remaining widget before continuing."
+      );
       return;
     }
     setStep("confirm");
@@ -5100,10 +5878,11 @@ function SEImportWizard({ bindings }) {
       setStep("confirm");
       return;
     }
-    const nextLayers = (result.overlay.settings.layers ?? []).filter((l) => !toSkip.has(l.id));
+    const nextLayers = (result.overlay.settings.layers ?? []).filter(
+      (layer) => !toSkip.has(layer.id)
+    );
     const modules = { ...result.overlay.settings.modules ?? {} };
     for (const id of toSkip) delete modules[id];
-    const reviewItems = result.reviewItems.filter((r) => !toSkip.has(r.moduleId));
     setResult({
       ...result,
       overlay: {
@@ -5111,9 +5890,11 @@ function SEImportWizard({ bindings }) {
         settings: { ...result.overlay.settings, layers: nextLayers, modules },
         layers_count: nextLayers.length
       },
-      reviewItems
+      reviewItems: result.reviewItems.filter(
+        (item) => !toSkip.has(item.moduleId)
+      )
     });
-    setRowStates((prev) => ({ ...prev, ...patch }));
+    setRowStates((previous) => ({ ...previous, ...patch }));
     setStep("confirm");
   };
   const handleFinalImport = useCallback3(async () => {
@@ -5126,157 +5907,235 @@ function SEImportWizard({ bindings }) {
         settings: result.overlay.settings
       };
       const { uuid } = await saveOverlay(body);
-      notify.success(`Imported overlay from StreamElements.`);
+      notify.success("Imported overlay from StreamElements.");
       mirrorAbortRef.current?.abort();
       onClose();
       if (uuid) onComplete({ overlayId: uuid });
-    } catch (err) {
-      notify.error(`Import failed: ${extractErrorMessage(err)}`);
+    } catch (error) {
+      notify.error(`Import failed: ${extractErrorMessage(error)}`);
     } finally {
       setImporting(false);
     }
   }, [notify, onClose, onComplete, options.name, result, saveOverlay]);
-  const stepOrder = ["url", "discovery", "options", "mirror", "review", "confirm"];
+  const visibleSteps = useMemo5(() => {
+    const showMirrorStep = options.mirrorAssets && (assetUrls.length > 0 || mirrorRows.length > 0 || step === "mirror");
+    const steps = CORE_STEPS.filter(
+      (item) => item.key !== "mirror" || showMirrorStep
+    );
+    if (originalReviewItems.length > 0)
+      steps.splice(Math.max(steps.length - 1, 0), 0, {
+        key: "review",
+        label: `Review (${originalReviewItems.length})`
+      });
+    return steps;
+  }, [
+    assetUrls.length,
+    mirrorRows.length,
+    options.mirrorAssets,
+    originalReviewItems.length,
+    step
+  ]);
   const goBack = () => {
+    const currentIndex = visibleSteps.findIndex((item) => item.key === step);
     if (step === "review" && reviewIndex > 0) {
       setReviewIndex(reviewIndex - 1);
       return;
     }
-    const idx = stepOrder.indexOf(step);
-    if (idx <= 0) return;
-    let prev = stepOrder[idx - 1];
-    if (prev === "mirror" && !options.mirrorAssets) prev = stepOrder[idx - 2];
-    if (prev) setStep(prev);
+    if (currentIndex > 0) setStep(visibleSteps[currentIndex - 1].key);
   };
   const goNext = () => {
-    if (step === "url") {
-      void handleLoad();
-      return;
-    }
-    if (step === "discovery") {
-      setStep("options");
-      return;
-    }
-    if (step === "options") {
-      if (options.mirrorAssets && assetUrls.length > 0) setStep("mirror");
-      else if (originalReviewItems.length > 0) setStep("review");
-      else setStep("confirm");
-      return;
-    }
-    if (step === "mirror") {
-      if (originalReviewItems.length > 0) setStep("review");
-      else setStep("confirm");
+    if (step === "connect") {
+      if (!seClient) return void handleConnect();
+      setStep("url");
       return;
     }
+    if (step === "url") return void handleLoad();
     if (step === "review") {
-      if (currentItem) {
-        if (currentRow?.state === "generated") {
-          handleAcceptGenerated();
-        } else if (currentRow?.state === "pending") {
-          if (currentItem.flaggedOff) {
-            const actionText = hasMarketplaceCandidates(currentItem.seWidget.type) ? "Skip, Marketplace, or Generate with AI" : "Skip or Generate with AI";
-            notify.warning(`Choose ${actionText} for the flagged-off widget.`);
-            return;
-          }
-          handleKeep();
-        } else {
-          advanceReview();
+      if (!currentItem) return;
+      if (currentRow?.state === "generated") return handleAcceptGenerated();
+      if (currentRow?.state === "pending") {
+        if (currentItem.flaggedOff) {
+          const actionText = hasMarketplaceCandidates(currentItem.seWidget.type) ? "Skip, Marketplace, or Generate with AI" : "Skip or Generate with AI";
+          notify.warning(`Choose ${actionText} for the flagged-off widget.`);
+          return;
         }
+        return handleKeep();
       }
-      return;
-    }
-    if (step === "confirm") {
-      void handleFinalImport();
-      return;
+      return advanceReview();
     }
+    if (step === "confirm") return void handleFinalImport();
+    const currentIndex = visibleSteps.findIndex((item) => item.key === step);
+    if (currentIndex >= 0)
+      setStep(visibleSteps[currentIndex + 1]?.key ?? "confirm");
   };
   const nextLabel = (() => {
-    if (step === "url") return loading ? "Loading\u2026" : "Load overlay";
-    if (step === "discovery") return "Continue";
-    if (step === "options") return "Continue";
-    if (step === "mirror") return mirrorRunning ? "Working\u2026" : "Continue";
-    if (step === "review") return currentRow?.state === "generated" ? "Use & continue" : "Continue";
-    if (step === "confirm") return importing ? "Importing\u2026" : "Create overlay";
-    return "Next";
+    if (step === "connect")
+      return connecting ? "Connecting..." : seClient ? "Continue" : "Connect";
+    if (step === "url") return loading ? "Loading..." : "Load overlay";
+    if (step === "mirror") return mirrorRunning ? "Working..." : "Continue";
+    if (step === "review")
+      return currentRow?.state === "generated" ? "Use & continue" : "Continue";
+    if (step === "confirm")
+      return importing ? "Importing..." : "Create overlay";
+    return "Continue";
   })();
   const nextDisabled = (() => {
+    if (step === "connect")
+      return connecting || !seClient && !jwt.trim();
     if (step === "url") return loading || !url.trim();
     if (step === "mirror") return mirrorRunning;
-    if (step === "review") return currentRow?.state === "generating" || currentRow?.state === "pending" && currentItem?.flaggedOff;
+    if (step === "review")
+      return currentRow?.state === "generating" || currentRow?.state === "pending" && currentItem?.flaggedOff;
     if (step === "confirm") return importing;
     return false;
   })();
-  const stepperIndex = stepOrder.indexOf(step);
-  const visibleSteps = [
-    { key: "url", label: "Load" },
-    { key: "discovery", label: "Discovery" },
-    { key: "options", label: "Options" },
-    ...options.mirrorAssets && assetUrls.length > 0 ? [{ key: "mirror", label: "Assets" }] : [],
-    ...originalReviewItems.length > 0 ? [{ key: "review", label: `Review (${originalReviewItems.length})` }] : [],
-    { key: "confirm", label: "Confirm" }
-  ];
-  return /* @__PURE__ */ jsxs7("div", { className: "ui-flex-column ui-gap-2", style: { minWidth: 680 }, children: [
-    result && /* @__PURE__ */ jsx13("div", { className: "ui-flex-row ui-gap-2", style: { flexWrap: "wrap", paddingBottom: 8, borderBottom: "1px solid var(--ui-border, #2a2c31)" }, children: visibleSteps.map((s, i) => /* @__PURE__ */ jsx13(StepDot, { num: i + 1, label: s.label, active: s.key === step, done: visibleSteps.findIndex((v) => v.key === step) > i }, s.key)) }),
-    step === "url" && /* @__PURE__ */ jsx13(StepURL, { url, setUrl, error: loadError, busy: loading }),
-    step === "discovery" && result && /* @__PURE__ */ jsx13(StepDiscovery, { result, assetCount: assetUrls.length }),
-    step === "options" && /* @__PURE__ */ jsx13(StepOptions, { options, setOptions, assetCount: assetUrls.length }),
-    step === "mirror" && /* @__PURE__ */ jsx13(StepMirror, { rows: mirrorRows, running: mirrorRunning, onRetry: retryMirrorRow }),
-    step === "review" && currentItem && result && !marketplacePickerOpen && /* @__PURE__ */ jsx13(
-      StepReview,
-      {
-        item: currentItem,
-        index: reviewIndex,
-        total: originalReviewItems.length,
-        state: currentRow?.state ?? "pending",
-        error: currentRow?.error,
-        generated: currentRow?.generated,
-        canvas: { width: result.overlay.settings.metadata.width, height: result.overlay.settings.metadata.height },
-        onSkip: handleSkip,
-        onKeep: handleKeep,
-        onGenerate: handleGenerate,
-        onAccept: handleAcceptGenerated,
-        onRetry: handleGenerate,
-        onPickMarketplace: () => setMarketplacePickerOpen(true),
-        onKeepAllPlaceholders: handleKeepAllPlaceholders,
-        onSkipAll: handleSkipAll,
-        remainingCount: originalReviewItems.filter((r) => (rowStates[r.moduleId]?.state ?? "pending") === "pending").length,
-        marketplaceAvailable: hasMarketplaceCandidates(currentItem.seWidget.type)
-      }
-    ),
-    step === "review" && currentItem && marketplacePickerOpen && /* @__PURE__ */ jsx13(
-      MarketplacePicker,
+  const activeIndex = visibleSteps.findIndex((item) => item.key === step);
+  return /* @__PURE__ */ jsx13("div", { className: "se-import", children: /* @__PURE__ */ jsxs7("div", { className: "se-import__shell", children: [
+    /* @__PURE__ */ jsx13("header", { className: "se-import__header", children: /* @__PURE__ */ jsx13("div", { className: "se-import-stepper", children: visibleSteps.map((item, index) => /* @__PURE__ */ jsxs7(
+      "div",
       {
-        seWidgetType: currentItem.seWidget.type,
-        fetchMarketplaceOverlay,
-        CustomEmbed,
-        onPick: handlePickMarketplace,
-        onCancel: () => setMarketplacePickerOpen(false)
-      }
-    ),
-    step === "confirm" && result && /* @__PURE__ */ jsx13(StepConfirm, { result, options, mirrorRows, rowStates }),
-    /* @__PURE__ */ jsxs7("div", { className: "ui-flex-row ui-gap-2", style: { justifyContent: "flex-end", marginTop: 12 }, children: [
+        className: stepClass(
+          index < activeIndex,
+          index === activeIndex
+        ),
+        children: [
+          /* @__PURE__ */ jsx13("div", { className: "se-import-step__label", children: item.label }),
+          /* @__PURE__ */ jsx13("div", { className: "se-import-step__line" }),
+          /* @__PURE__ */ jsx13("div", { className: "se-import-step__dot", children: index < activeIndex ? "\u2713" : index + 1 })
+        ]
+      },
+      item.key
+    )) }) }),
+    /* @__PURE__ */ jsxs7("main", { className: "se-import__content", children: [
+      step === "connect" && /* @__PURE__ */ jsx13(
+        StepConnect,
+        {
+          jwt,
+          setJwt,
+          error: connectError,
+          busy: connecting,
+          channels,
+          selectedChannelId,
+          setSelectedChannelId,
+          onUseUrl: () => setStep("url")
+        }
+      ),
+      step === "url" && /* @__PURE__ */ jsx13(
+        StepURL,
+        {
+          url,
+          setUrl,
+          error: loadError,
+          busy: loading
+        }
+      ),
+      step === "discovery" && result && /* @__PURE__ */ jsx13(StepDiscovery, { result, assetCount: assetUrls.length }),
+      step === "options" && /* @__PURE__ */ jsx13(
+        StepOptions,
+        {
+          options,
+          setOptions,
+          assetCount: assetUrls.length
+        }
+      ),
+      step === "mirror" && /* @__PURE__ */ jsx13(
+        StepMirror,
+        {
+          rows: mirrorRows,
+          running: mirrorRunning,
+          onRetry: retryMirrorRow
+        }
+      ),
+      step === "review" && currentItem && result && !marketplacePickerOpen && /* @__PURE__ */ jsx13(
+        StepReview,
+        {
+          item: currentItem,
+          index: reviewIndex,
+          total: originalReviewItems.length,
+          state: currentRow?.state ?? "pending",
+          error: currentRow?.error,
+          generated: currentRow?.generated,
+          canvas: {
+            width: result.overlay.settings.metadata.width,
+            height: result.overlay.settings.metadata.height
+          },
+          onSkip: handleSkip,
+          onKeep: handleKeep,
+          onGenerate: handleGenerate,
+          onAccept: handleAcceptGenerated,
+          onRetry: handleGenerate,
+          onPickMarketplace: () => setMarketplacePickerOpen(true),
+          onKeepAllPlaceholders: handleKeepAllPlaceholders,
+          onSkipAll: handleSkipAll,
+          remainingCount: originalReviewItems.filter(
+            (item) => (rowStates[item.moduleId]?.state ?? "pending") === "pending"
+          ).length,
+          marketplaceAvailable: hasMarketplaceCandidates(
+            currentItem.seWidget.type
+          )
+        }
+      ),
+      step === "review" && currentItem && marketplacePickerOpen && /* @__PURE__ */ jsx13("div", { className: panelClass("se-import-panel--wide"), children: /* @__PURE__ */ jsx13(
+        MarketplacePicker,
+        {
+          seWidgetType: currentItem.seWidget.type,
+          fetchMarketplaceOverlay,
+          CustomEmbed,
+          onPick: handlePickMarketplace,
+          onCancel: () => setMarketplacePickerOpen(false)
+        }
+      ) }),
+      step === "confirm" && result && /* @__PURE__ */ jsx13(
+        StepConfirm,
+        {
+          result,
+          options,
+          mirrorRows,
+          rowStates
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs7("footer", { className: "se-import-actions", children: [
       /* @__PURE__ */ jsx13(
-        "button",
+        LSButton,
         {
           type: "button",
-          className: "ui-button",
+          color: "secondary",
           onClick: () => {
             mirrorAbortRef.current?.abort();
             onClose();
           },
           disabled: loading || importing,
-          children: translate("action.cancel", "Cancel")
+          label: translate("action.cancel", "Cancel")
+        }
+      ),
+      activeIndex > 0 && /* @__PURE__ */ jsx13(
+        LSButton,
+        {
+          type: "button",
+          color: "secondary",
+          onClick: goBack,
+          disabled: loading || importing || mirrorRunning || currentRow?.state === "generating",
+          label: "Back"
         }
       ),
-      stepperIndex > 0 && /* @__PURE__ */ jsx13("button", { type: "button", className: "ui-button", onClick: goBack, disabled: loading || importing || mirrorRunning || currentRow?.state === "generating", children: "Back" }),
-      /* @__PURE__ */ jsx13("button", { type: "button", className: "ui-button ui-button-purple", onClick: goNext, disabled: nextDisabled, children: nextLabel })
+      /* @__PURE__ */ jsx13(
+        LSButton,
+        {
+          type: "button",
+          color: "primary",
+          onClick: goNext,
+          disabled: nextDisabled,
+          label: nextLabel
+        }
+      )
     ] })
-  ] });
+  ] }) });
 }
 function extractErrorMessage(err) {
   if (!err) return "Failed";
-  const e = err;
-  return e?.response?.data?.message || e?.response?.data?.error || e?.message || "Failed";
+  const error = err;
+  return error?.response?.data?.message || error?.response?.data?.error || error?.message || "Failed";
 }
 
 // src/se-import/index.ts
@@ -5403,7 +6262,7 @@ function importSEBootstrap(bootstrap) {
       const module = {
         id: lumiaGroupId,
         loaded: true,
-        settings: { title: w.name ?? "Group", type: "group" },
+        settings: { title: defaultLabelForSEWidget(w), type: "group" },
         lights: [],
         css: {},
         content: {
@@ -5623,6 +6482,8 @@ export {
   LSVariableInputProvider,
   MEDIA_PREVIEW_USER_LEVEL_VALUES,
   MarketplacePicker,
+  SEAuthError,
+  SEClient,
   SEImportWizard,
   SE_IMPORT_FLAGS,
   SE_WIDGET_TO_MARKETPLACE_CANDIDATES,
@@ -5631,9 +6492,11 @@ export {
   buildBootstrapUrl,
   buildChatMessageContent,
   codeMirrorlinterOptions,
+  decodeJwtPayload,
   extractSEOverlayId,
   extractSEPreviewParts,
   fetchSEBootstrap,
+  fetchUsableChannels,
   filenameFromURL,
   findSEAssetURLs,
   getAILandingBounds,