@lumiastream/ui 0.2.7 → 0.2.8-alpha.2

package/dist/index.js

@@ -3111,6 +3111,40 @@ 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",
+  // Imports as an empty slideshow — Lumia has no Fourthwall catalog API, so
+  // the streamer has to add product images by hand. The friendly title makes
+  // that obvious in the layers panel; see REVIEW_REASONS for the full prompt.
+  "se-widget-merch-products-rotator": "Merch products (add images manually)"
+};
+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) : {};
@@ -3243,7 +3277,22 @@ var LUMIA_DEFAULT_SIZES = {
   emotebox: { width: 400, height: 400 },
   nowplaying: { width: 600, height: 250 },
   spotify: { width: 600, height: 250 },
-  youtubemusic: { width: 600, height: 250 }
+  youtubemusic: { width: 600, height: 250 },
+  tipjar: { width: 600, height: 700 },
+  // Hype Train: wide-and-short by default to fit a horizontal progress bar.
+  // All four built-in themes (subtle / train / rocket / inferno) render
+  // fine at this aspect — rocket internally uses a vertical gauge but
+  // still works at this footprint. Users can resize per their overlay.
+  hypetrain: { width: 740, height: 140 },
+  // Stream Boss: matches SE's bit-boss default (440×86) for a 1:1 import
+  // experience, lightly padded so Lumia's Card-theme avatar fits without
+  // resizing. Users can swap to Bar-Only and shrink height further.
+  streamboss: { width: 480, height: 100 },
+  // Song Request: SE's media-share default is 480×292. Lumia's now-playing
+  // card + 5-item queue list needs a bit more vertical room, so we add ~80px
+  // for the queue list. Users can hide the queue list and shrink back to
+  // just the card if they want SE's exact footprint.
+  songrequest: { width: 480, height: 380 }
 };
 function translateVariationCondition(seType, seCondition, requirement) {
   if (seType === "gift") return { conditionType: "IS_GIFT", condition: 1 };
@@ -3288,7 +3337,7 @@ function buildUnit(widget, lumiaType, moduleExtras) {
     version: 1,
     settings: {
       type: lumiaType,
-      title: widget.name ?? null,
+      title: defaultLabelForSEWidget(widget),
       locked: widget.locked ?? false
     },
     lights: [],
@@ -3340,6 +3389,17 @@ function mapVideo(widget) {
     }
   });
 }
+var LUMIA_SNOW_WEBM = "https://storage.lumiastream.com/overlays/global/seasonal/snow.webm";
+function mapSnow(widget) {
+  return buildUnit(widget, "video", {
+    content: {
+      src: LUMIA_SNOW_WEBM,
+      volume: 0,
+      loop: true,
+      muted: true
+    }
+  });
+}
 function mapReadout(widget, fallbackVar) {
   const explicitListener = widget.variables?.listener;
   const explicit = typeof explicitListener === "string" ? explicitListener : null;
@@ -3509,6 +3569,9 @@ function currentForListener(listener) {
   if (listener.startsWith("subscriber-")) return "{{twitch_total_subscriber_count}}";
   if (listener.startsWith("cheer-")) return "{{twitch_total_bits_count}}";
   if (listener.startsWith("tip-")) return "{{total_donation_amount}}";
+  if (listener === "merch-goal-orders") return "{{fourthwall_total_order_count}}";
+  if (listener === "merch-goal-items") return "{{fourthwall_total_items_count}}";
+  if (listener === "merch-goal-total") return "{{fourthwall_total_order_amount}}";
   if (listener.startsWith("merch-")) return "{{fourthwall_total_order_count}}";
   return "0";
 }
@@ -3609,77 +3672,6 @@ function mapCustom(widget) {
     }
   });
 }
-var SEASONAL_TEMPLATE_HTML = '<canvas id="particles"></canvas>';
-var SEASONAL_TEMPLATE_CSS = `html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: transparent; overflow: hidden; }
-#particles { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }`;
-var SEASONAL_TEMPLATE_JS = `const SEASONS = {
-  snow:      { emoji: '\\u2744',  count: 80, sizeMin: 14, sizeMax: 28, gravity: 1.0, drift: 0.6, sway: 1.2 },
-  halloween: { emoji: '\\ud83d\\udc7b',  count: 25, sizeMin: 28, sizeMax: 44, gravity: 0.6, drift: 0.4, sway: 0.8 },
-  xmas:      { emoji: '\\u2744',  count: 120, sizeMin: 16, sizeMax: 32, gravity: 1.1, drift: 0.7, sway: 1.3 },
-  valentine: { emoji: '\\u2764\\ufe0f', count: 50, sizeMin: 18, sizeMax: 34, gravity: 0.8, drift: 0.5, sway: 1.0 },
-  easter:    { emoji: '\\ud83e\\udd5a',  count: 30, sizeMin: 22, sizeMax: 38, gravity: 0.9, drift: 0.3, sway: 0.4 },
-  worldcup:  { emoji: '\\u26bd', count: 25, sizeMin: 24, sizeMax: 40, gravity: 1.1, drift: 0.4, sway: 0.5 },
-};
-const cfg = SEASONS[(window.DATA && window.DATA.season) || 'snow'] || SEASONS.snow;
-const canvas = document.getElementById('particles');
-const ctx = canvas.getContext('2d');
-const dpr = window.devicePixelRatio || 1;
-function resize() {
-  canvas.width = window.innerWidth * dpr;
-  canvas.height = window.innerHeight * dpr;
-  canvas.style.width = window.innerWidth + 'px';
-  canvas.style.height = window.innerHeight + 'px';
-  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-}
-resize();
-window.addEventListener('resize', resize);
-const particles = [];
-for (let i = 0; i < cfg.count; i++) {
-  particles.push({
-    x: Math.random() * window.innerWidth,
-    y: Math.random() * window.innerHeight - window.innerHeight,
-    size: cfg.sizeMin + Math.random() * (cfg.sizeMax - cfg.sizeMin),
-    speed: 0.5 + Math.random() * 1.5,
-    phase: Math.random() * Math.PI * 2,
-  });
-}
-function tick(now) {
-  ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
-  const t = now / 1000;
-  for (const p of particles) {
-    p.y += p.speed * cfg.gravity;
-    const sway = Math.sin(t + p.phase) * cfg.sway;
-    if (p.y > window.innerHeight + 40) {
-      p.y = -40;
-      p.x = Math.random() * window.innerWidth;
-    }
-    ctx.font = p.size + 'px serif';
-    ctx.fillText(cfg.emoji, p.x + sway * 20, p.y);
-  }
-  requestAnimationFrame(tick);
-}
-requestAnimationFrame(tick);`;
-function mapSeasonal(widget, season) {
-  return buildUnit(widget, "custom", {
-    content: {
-      codeId: `seasonal-${season}-${widget.id}`,
-      html: SEASONAL_TEMPLATE_HTML,
-      css: SEASONAL_TEMPLATE_CSS,
-      js: SEASONAL_TEMPLATE_JS,
-      configs: [
-        {
-          key: "season",
-          label: "Season",
-          type: "dropdown",
-          value: season,
-          options: { snow: "Snow", halloween: "Halloween", xmas: "Christmas", valentine: "Valentine's", easter: "Easter", worldcup: "World Cup" }
-        }
-      ],
-      data: { season },
-      flavor: "lumia-seasonal"
-    }
-  });
-}
 
 // src/se-import/mappers/misc.ts
 function mapChatbox(widget) {
@@ -3982,6 +3974,49 @@ function mapNowPlaying(widget) {
     }
   });
 }
+function mapMediaShare(widget) {
+  const v = widget.variables ?? {};
+  return buildUnit(widget, "songrequest", {
+    content: {
+      version: 1,
+      // SE always shows the now-playing card; honour its cosmetic toggles
+      // for the rest. `showTitle` defaults true; the others default to
+      // SE's documented behavior (tipper visible, stats hidden).
+      showNowPlayingCard: true,
+      showQueueList: true,
+      showSkipButton: true,
+      showPauseButton: true,
+      showTitle: v.showTitle !== false,
+      showTipper: v.showTipper !== false,
+      showAmount: v.showAmount === true,
+      showStats: v.showStats === true,
+      // SE doesn't have a queue-size knob — pick a sensible default
+      // matching what fits in the SE widget's ~292px tall footprint.
+      maxQueueItemsVisible: 5,
+      // SE color knobs translate directly. Fall back to Lumia's defaults
+      // (purple accent, near-black card background) if SE values are
+      // missing — matches what the module ships with for native creates.
+      accentColor: v.accentColor ?? "#9146ff",
+      primaryColor: v.primaryColor ?? "#1a1a1a",
+      // SE's widget hides the YT player by default; mirror that for
+      // audio-only overlay use.
+      playerVisible: false,
+      defaultVolume: 70,
+      autoAdvanceOnEnd: true,
+      // SE-only knob preserved for round-trip provenance; Lumia ignores
+      // it (LumiaStream auto-advance fires on `durationSeconds + grace`).
+      se_timeLeft: v.timeLeft === true
+    },
+    css: {
+      fontFamily: "Roboto",
+      fontWeight: "bold",
+      color: "#ffffff",
+      textShadow: "rgb(0, 0, 0) 1px 1px 1px",
+      background: "transparent",
+      fontSize: 18
+    }
+  });
+}
 var SE_KAPPAGEN_EVENT_TO_LUMIA_ALERT = {
   follower: "twitch-follower",
   subscriber: "twitch-subscriber",
@@ -4125,6 +4160,75 @@ function mapGiveaway(widget) {
     }
   });
 }
+var HYPETRAIN_LISTENER_KEYS = /* @__PURE__ */ new Set([
+  "hypetrain-latest",
+  "hypetrain-level-progress",
+  "hypetrain-level-goal",
+  "hypetrain-total",
+  "hypetrain-latest-top-contributors",
+  // SE alert-name variants some community widgets subscribe to as well.
+  "hypetrain-start",
+  "hypetrain-end",
+  "hypetrain-cooldown-start",
+  "hypetrain-cooldown-end"
+]);
+function isHypetrainCustomWidget(widget) {
+  const enabled = [];
+  const listeners = widget.listeners;
+  if (listeners && typeof listeners === "object" && !Array.isArray(listeners)) {
+    for (const [k, v] of Object.entries(listeners)) {
+      if (v) enabled.push(k);
+    }
+  } else if (Array.isArray(listeners)) {
+    enabled.push(...listeners);
+  }
+  const explicit = widget.listener;
+  if (typeof explicit === "string" && explicit && !enabled.includes(explicit)) {
+    enabled.push(explicit);
+  }
+  if (enabled.length === 0) return false;
+  return enabled.every((listener) => HYPETRAIN_LISTENER_KEYS.has(listener));
+}
+function mapHypetrain(widget) {
+  const v = widget.variables ?? {};
+  return buildUnit(widget, "hypetrain", {
+    content: {
+      // Twitch-native is the right default — SE hype-train widgets always
+      // reflected the Twitch native train. Users can flip to 'synthetic'
+      // or 'hybrid' from Settings if they want cross-platform pooling.
+      sourceMode: "twitch-native",
+      sources: null,
+      // default money-only whitelist; ignored in twitch-native anyway
+      customValues: {},
+      pretrainThreshold: 5,
+      pretrainDurationMs: 5 * 60 * 1e3,
+      levelDurationMs: 5 * 60 * 1e3,
+      levelStep: 5,
+      levelThresholds: [],
+      // Pick a moderately energetic default theme — SE hype-train widgets
+      // were never subtle. Users can switch in Settings.
+      theme: "train",
+      primaryColor: typeof v.primaryColor === "string" ? v.primaryColor : "#ff6b00",
+      accentColor: typeof v.accentColor === "string" ? v.accentColor : "#ffd84d",
+      textColor: typeof v.textColor === "string" ? v.textColor : "#ffffff",
+      showLevel: true,
+      showTotal: true,
+      showTimer: true,
+      showTopContributor: true,
+      showLeaderboard: true,
+      leaderboardLimit: 5,
+      leaderboardDurationMs: 30 * 1e3,
+      levelUpSoundUrl: "https://storage.lumiastream.com/overlays/lumia/audio/crowdClap.mp3",
+      trainEndSoundUrl: "https://storage.lumiastream.com/overlays/lumia/audio/crowdClap.mp3",
+      audioVolume: 0.5,
+      // SE config preserved verbatim as provenance — no Lumia equivalent for
+      // most of these knobs (per-widget animation tunables, sound URLs the
+      // streamer might want to migrate manually, etc.). Users can inspect
+      // these via the overlay JSON if they want to recreate a specific look.
+      se_variables: v
+    }
+  });
+}
 function mapUnsupportedAsText(widget) {
   return buildUnit(widget, "text", {
     content: {
@@ -4142,44 +4246,258 @@ function mapUnsupportedAsText(widget) {
   });
 }
 
+// src/se-import/mappers/hypecup.ts
+var SE_TYPE_TO_CATEGORY = {
+  cheer: "bits",
+  sub: "subs",
+  follower: "follows",
+  raid: "raids",
+  tip: "tips"
+};
+function liftSESpritesIntoTiers(types) {
+  const out = {};
+  if (!types) return out;
+  for (const [seKey, block] of Object.entries(types)) {
+    const cat = SE_TYPE_TO_CATEGORY[seKey];
+    if (!cat) continue;
+    const variations = block?.variations ?? [];
+    const tiers = variations.filter((v) => typeof v?.src === "string" && v.src.length > 0).map((v) => ({
+      minAmount: typeof v.amount === "number" && v.amount > 0 ? v.amount : 1,
+      imageUrl: v.src,
+      scale: typeof v.cheerSize === "number" && v.cheerSize > 0 ? v.cheerSize : 1
+    }));
+    if (tiers.length > 0) out[cat] = tiers;
+  }
+  return out;
+}
+var LISTENER_TO_CATEGORY = {
+  "follower-latest": "follows",
+  "subscriber-latest": "subs",
+  "tip-latest": "tips",
+  "cheer-latest": "bits",
+  "raid-latest": "raids"
+};
+function categoriesFromListeners(listeners) {
+  const events = {
+    tips: false,
+    bits: false,
+    subs: false,
+    resubs: false,
+    gifts: false,
+    superchats: false,
+    superstickers: false,
+    kicks: false,
+    charity: false,
+    follows: false,
+    raids: false,
+    redemptions: false,
+    chat: false
+  };
+  if (!listeners) return events;
+  const onListeners = Array.isArray(listeners) ? listeners : Object.entries(listeners).filter(([, on]) => on === true).map(([k]) => k);
+  for (const l of onListeners) {
+    const cat = LISTENER_TO_CATEGORY[l];
+    if (cat) events[cat] = true;
+  }
+  if (events.subs) events.resubs = true;
+  return events;
+}
+function mapHypeCup(widget) {
+  const v = widget.variables ?? {};
+  const cupX = typeof v.cupPosition?.x === "number" ? clamp01(v.cupPosition.x) : 0.5;
+  const cupY = typeof v.cupPosition?.y === "number" ? clamp01(v.cupPosition.y) : 0.7;
+  const bounce = typeof v.bounce === "number" ? Math.min(1, Math.max(0, v.bounce)) : 0.3;
+  const maxBodies = typeof v.recentEvents === "number" && v.recentEvents > 0 ? Math.min(300, Math.max(10, v.recentEvents)) : 80;
+  const duration = typeof v.duration === "number" && v.duration > 0 ? Math.min(15, Math.max(1, v.duration)) : 3;
+  const sprites = liftSESpritesIntoTiers(v.types);
+  return buildUnit(widget, "tipjar", {
+    content: {
+      version: 1,
+      // Phase 1 ships a single preset; SE's per-cup polygon set isn't lifted
+      // yet (it'd require multi-cup support which we deliberately deferred).
+      // The streamer can swap a custom cup image + wireframe via Settings.
+      preset: "glass-mug",
+      customCup: null,
+      cup: {
+        x: cupX,
+        y: cupY,
+        scale: 1,
+        opacity: 1
+      },
+      physics: {
+        gravity: 1,
+        bounce,
+        friction: 0.06,
+        maxBodies
+      },
+      tokens: {
+        defaultRadius: 26
+      },
+      events: categoriesFromListeners(widget.listeners),
+      chat: {
+        useViewerAvatars: true
+      },
+      display: {
+        showWireframes: !!v.showWireframes,
+        showEventMessages: !!v.textEnabled,
+        messageDuration: duration
+      },
+      sprites,
+      // Phase 2 defaults for goal/break — disabled by import. Streamer
+      // can enable in Settings; SE has no equivalent so nothing to lift.
+      goal: { active: false, currency: "tips", target: 100, current: 0, readoutTemplate: "{{current}} / {{target}}", textColor: "#ffffff", hitAt: null },
+      break: { enabled: false, command: "!breakjar", rebuildDelay: 5e3 },
+      // SE-only knobs that don't have a Lumia equivalent — preserved as
+      // provenance for future phases (per-cup polygons + enter/movement
+      // physics tweaks). `se_types` removed — now consumed into sprites above.
+      se_enter_from: v.enterFrom ?? null,
+      se_prevent_movement: !!v.preventMovement,
+      se_fullscreen: !!v.fullscreen,
+      se_cups: v.cups ?? null
+    },
+    css: {
+      background: "transparent"
+    }
+  });
+}
+function clamp01(n) {
+  if (!Number.isFinite(n)) return 0.5;
+  return Math.min(1, Math.max(0, n));
+}
+
+// src/se-import/mappers/streamboss.ts
+var SE_LISTENER_TO_ALERT = {
+  "follower-latest": "twitch-follower",
+  "subscriber-latest": "twitch-subscriber",
+  "tip-latest": "lumiastream-donation",
+  "cheer-latest": "twitch-bits",
+  "raid-latest": "twitch-raid"
+  // `purchase-latest` and `subscriber-gifted-latest` are intentionally absent.
+  // SE rolled gifted subs into `subscriber-latest`; Lumia splits them via
+  // extraSettings.isGift, which the runtime already handles consistently.
+};
+var SE_LISTENER_MODE = {
+  "follower-latest": "flat",
+  "subscriber-latest": "flat",
+  "tip-latest": "multiplier",
+  // 100 means "100 dmg per $"
+  "cheer-latest": "multiplier",
+  // 1 means "1 dmg per bit"
+  "raid-latest": "multiplier"
+  // 10 means "10 dmg per viewer"
+};
+function listenerIsOn(listeners, key) {
+  if (!listeners) return false;
+  if (Array.isArray(listeners)) return listeners.includes(key);
+  return listeners[key] === true;
+}
+function mapStreamBoss(widget) {
+  const v = widget.variables ?? {};
+  const baseHp = typeof v.baseHP === "number" && v.baseHP > 0 ? Math.round(v.baseHP) : 1e3;
+  const seDamage = v.damage ?? {};
+  const damageMap = {};
+  const selectedEvents = [];
+  for (const [seListener, alertKey] of Object.entries(SE_LISTENER_TO_ALERT)) {
+    if (!listenerIsOn(widget.listeners, seListener)) continue;
+    const raw = seDamage[seListener];
+    const value = typeof raw === "number" && Number.isFinite(raw) && raw > 0 ? raw : null;
+    if (value === null) continue;
+    damageMap[alertKey] = { value, mode: SE_LISTENER_MODE[seListener] };
+    selectedEvents.push(alertKey);
+  }
+  const barColor = typeof v.colors?.frame === "string" && v.colors.frame ? v.colors.frame : "#2bff00";
+  return buildUnit(widget, "streamboss", {
+    content: {
+      version: 1,
+      // Theme: SE bit-boss with `showImage: true` reads as the Card layout
+      // (avatar + name + bar). When images are hidden it's effectively
+      // our Bar-Only theme.
+      theme: v.showImage === false ? "bar-only" : "card",
+      initialBossName: "Stream Boss",
+      // SE has no stage cycling — every takeover resets to baseHP. We
+      // honor that by shipping a single-element healthStages array; the
+      // runtime cycles modulo length so a one-element array stays put.
+      healthStages: [baseHp],
+      currentBoss: "Stream Boss",
+      currentBossAvatar: "",
+      currentHP: baseHp,
+      maxHP: baseHp,
+      currentStageIndex: 0,
+      damageMap,
+      // Concrete selectedEvents means "user has opted in to exactly these
+      // events". Empty arrays would disable everything — only happens if
+      // SE had all listeners off, which mirrors what the imported overlay
+      // should do.
+      selectedEvents,
+      bossHealsOnEventTrigger: v.selfHeal !== false,
+      newBossCommand: "!newboss",
+      eventQueueDelayMs: 3e3,
+      defeatedDelayMs: 3e3,
+      showAvatar: v.showImage !== false,
+      showFloatingNumbers: true,
+      showEventMessages: v.showText !== false,
+      barColor,
+      barBackgroundColor: "#333333",
+      attackColor: "#ff007f",
+      healColor: "#00ff00",
+      // Phase 2 defaults — off by default so imports stay close to
+      // SE's behaviour and don't surprise the streamer with new effects.
+      lastResetAt: 0,
+      playSounds: true,
+      audioVolume: 50,
+      damageSounds: [],
+      healSound: "",
+      newBossSound: "",
+      defeatSound: "",
+      megaBossChance: 0,
+      particleScatter: true,
+      showCrown: true,
+      matchBossChatColor: true,
+      bossNameColor: "",
+      botChat: "off",
+      chatAsSelf: false,
+      // SE-only knobs preserved as provenance for future passes. None
+      // have direct Lumia analogs today:
+      //   - `right`     anchors the boss to the right edge of its bounds;
+      //     Lumia uses layer position instead, so this is informational.
+      //   - `bossName`  controls vertical name position in SE; our themes
+      //     don't expose that level of fine-grained tweaking yet.
+      //   - `mode`      SE's gameplay mode hint ('overkill', etc.).
+      se_right: !!v.right,
+      se_bossNamePosition: typeof v.bossName === "string" ? v.bossName : null,
+      se_mode: typeof v.mode === "string" ? v.mode : null,
+      se_showName: v.showName !== false
+    },
+    css: {
+      background: "transparent"
+    }
+  });
+}
+
 // src/se-import/feature-flags.ts
 var SE_IMPORT_FLAGS = {
   // (Removed) IMPORT_CUSTOM_EMBED: custom-event-list now routes to native eventlist
   // by default with a one-click "switch to custom HTML" option in the review step.
   // (Removed) IMPORT_MERCH_GOAL: Fourthwall integration provides session/total order
   // counters now (see fourthwall.manager.ts ORDER_PLACED handler); merch goal maps
-  // to {{fourthwall_total_order_count}} via the goal mapper.
-  // Merch products rotator — Lumia has no Fourthwall product-list API yet. The
-  // Fourthwall integration is webhook-driven (events flow in) but doesn't fetch
-  // the user's shop catalog. Adding it requires a separate Fourthwall API auth
-  // flow + product-fetch endpoint + periodic refresh. Until then a static stub
-  // is unhelpful, so users are routed to review for AI/skip/marketplace-when-
-  // available replacements.
-  IMPORT_MERCH_PRODUCTS: false,
-  // Seasonal effects (snow/halloween/xmas/valentine/easter/worldcup). The
-  // generic canvas-particle template is approximate, not pixel-accurate vs
-  // SE's polished versions. Flagging off so users get the option to grab a
-  // AI-generated replacement or a curated marketplace seasonal overlay when one
-  // is configured.
-  IMPORT_SEASONAL: false
+  // to {{fourthwall_total_*}} via the goal mapper (per-listener: orders → order_count,
+  // items → items_count, total → order_amount).
+  // (Removed) IMPORT_SEASONAL: seasonal widgets now route per-widget into existing
+  // modules (image / slideshow / video) rather than a single approximate canvas-
+  // particle template. See dispatcher.ts SEASONAL_IMAGE_TYPES comment for the
+  // rationale and /SE/05-widget-to-module-mapping.md §D for the current mapping.
+  // (Removed) IMPORT_MERCH_PRODUCTS: the merch-products-rotator now imports as an
+  // empty slideshow with a friendly layer title prompting the user to add product
+  // images manually. This is a degraded but honest UX — better than a placeholder
+  // text layer for the (rare) streamer who uses SE's merch rotator. A Fourthwall
+  // catalog fetcher would unlock fully-automatic import, but that's a multi-day
+  // project gated on a new Fourthwall API auth scope, an endpoint, and a refresh
+  // cadence.
 };
-function isWidgetFlaggedOff(seType) {
-  if (seType === "se-widget-merch-products-rotator") return !SE_IMPORT_FLAGS.IMPORT_MERCH_PRODUCTS;
-  if (seType === "se-widget-snow" || seType === "se-widget-halloween" || seType === "se-widget-halloween-2019" || seType === "se-widget-xmas" || seType === "se-widget-valentine" || seType === "se-widget-easter" || seType === "se-widget-world-cup") {
-    return !SE_IMPORT_FLAGS.IMPORT_SEASONAL;
-  }
+function isWidgetFlaggedOff(_seType) {
   return false;
 }
-var FLAG_OFF_REASONS = {
-  "se-widget-merch-products-rotator": "Merch products rotator \u2014 Lumia tracks Fourthwall orders but doesn't fetch the full product catalog yet. Generate a replacement with AI, skip it, or use Marketplace when a curated replacement is configured.",
-  "se-widget-snow": "Seasonal effect \u2014 the generic auto-import template is approximate. Generate a replacement with AI, skip it, or use Marketplace when a curated version is configured.",
-  "se-widget-halloween": "Seasonal effect \u2014 the generic auto-import template is approximate. Generate a replacement with AI, skip it, or use Marketplace when a curated version is configured.",
-  "se-widget-halloween-2019": "Seasonal effect \u2014 the generic auto-import template is approximate. Generate a replacement with AI, skip it, or use Marketplace when a curated version is configured.",
-  "se-widget-xmas": "Seasonal effect \u2014 the generic auto-import template is approximate. Generate a replacement with AI, skip it, or use Marketplace when a curated version is configured.",
-  "se-widget-valentine": "Seasonal effect \u2014 the generic auto-import template is approximate. Generate a replacement with AI, skip it, or use Marketplace when a curated version is configured.",
-  "se-widget-easter": "Seasonal effect \u2014 the generic auto-import template is approximate. Generate a replacement with AI, skip it, or use Marketplace when a curated version is configured.",
-  "se-widget-world-cup": "Seasonal effect \u2014 the generic auto-import template is approximate. Generate a replacement with AI, skip it, or use Marketplace when a curated version is configured."
-};
+var FLAG_OFF_REASONS = {};
 
 // src/se-import/dispatcher.ts
 var READOUT_TYPES = {
@@ -4208,15 +4526,7 @@ var READOUT_TYPES = {
   // twitch_session_chat_count, so we render it as a text layer with the variable inline.
   "se-widget-botcounter": "twitch_session_chat_count"
 };
-var SEASONAL_TYPES = {
-  "se-widget-snow": "snow",
-  "se-widget-halloween": "halloween",
-  "se-widget-halloween-2019": "halloween",
-  "se-widget-xmas": "xmas",
-  "se-widget-valentine": "valentine",
-  "se-widget-easter": "easter",
-  "se-widget-world-cup": "worldcup"
-};
+var SEASONAL_IMAGE_TYPES = /* @__PURE__ */ new Set(["se-widget-halloween", "se-widget-xmas", "se-widget-valentine", "se-widget-easter", "se-widget-world-cup"]);
 var GOAL_TYPES = /* @__PURE__ */ new Set([
   "se-widget-follower-goal",
   "se-widget-subscriber-goal",
@@ -4257,10 +4567,17 @@ function dispatch(widget) {
   if (t === "se-widget-current-song") return { unit: mapNowPlaying(widget), status: "partial", lumiaType: "nowplaying" };
   if (t === "se-widget-kappagen") return { unit: mapKappagen(widget), status: "partial", lumiaType: "emotealert" };
   if (t === "se-widget-giveaway") return { unit: mapGiveaway(widget), status: "direct", lumiaType: "raffle" };
-  if (t === "se-widget-custom-event-list") return { unit: mapCustom(widget), status: "partial", lumiaType: "custom" };
-  if (t in SEASONAL_TYPES) {
-    return { unit: mapSeasonal(widget, SEASONAL_TYPES[t]), status: "direct", lumiaType: "custom" };
+  if (t === "se-widget-media-share") return { unit: mapMediaShare(widget), status: "partial", lumiaType: "songrequest" };
+  if (t === "se-widget-hype-cup") return { unit: mapHypeCup(widget), status: "partial", lumiaType: "tipjar" };
+  if (t === "se-widget-bit-boss") return { unit: mapStreamBoss(widget), status: "partial", lumiaType: "streamboss" };
+  if (t === "se-widget-hype-train") return { unit: mapHypetrain(widget), status: "partial", lumiaType: "hypetrain" };
+  if (t === "se-widget-custom-event-list" && isHypetrainCustomWidget(widget)) {
+    return { unit: mapHypetrain(widget), status: "partial", lumiaType: "hypetrain" };
   }
+  if (t === "se-widget-custom-event-list") return { unit: mapCustom(widget), status: "partial", lumiaType: "custom" };
+  if (t === "se-widget-snow") return { unit: mapSnow(widget), status: "direct", lumiaType: "video" };
+  if (t === "se-widget-halloween-2019") return { unit: mapSlideshow(widget), status: "direct", lumiaType: "slideshow" };
+  if (SEASONAL_IMAGE_TYPES.has(t)) return { unit: mapImage(widget), status: "direct", lumiaType: "image" };
   return { unit: mapUnsupportedAsText(widget), status: "placeholder", lumiaType: "text" };
 }
 function recordCoverage(coverage, result, seType) {
@@ -4447,7 +4764,10 @@ var SE_WIDGET_TO_MARKETPLACE_CANDIDATES = {
   // value for marketplace replacements since AI generation rarely produces
   // satisfying results for these.
   "se-widget-hype-cup": [],
-  "se-widget-bit-boss": [],
+  // Note: `se-widget-bit-boss` is auto-mapped onto the native `streamboss`
+  // module by the dispatcher and no longer needs a marketplace fallback.
+  // Re-add a key here if a community curated boss overlay later supersedes
+  // the native module for specific use cases.
   "se-widget-train": [],
   // Medium-difficulty widgets — possible to AI-generate but a curated overlay
   // will usually look better.
@@ -4457,6 +4777,15 @@ var SE_WIDGET_TO_MARKETPLACE_CANDIDATES = {
   // have curated replacements for.
   "se-widget-custom-event-list": [],
   "se-widget-botcounter": [],
+  // Hype Train — the dispatcher already auto-routes `se-widget-hype-train` and
+  // hypetrain-only custom-event-lists onto the native `hypetrain` module. This
+  // entry stays here for two cases the auto-router can't catch:
+  //   - Heavily customized hype-train custom widgets where the native module
+  //     would lose too much visual fidelity (custom locomotive art, themed
+  //     particles, etc.) and the streamer would prefer a curated alternative.
+  //   - Community curated overlays that pair the native hypetrain with extra
+  //     decorative layers (e.g. a "depot" background, station signage).
+  "se-widget-hype-train": [],
   // Flagged-off in feature-flags.ts — the auto-import is disabled because
   // Lumia has no merch data source. Marketplace overlays here would be
   // curated static merch-style goals/sliders that don't depend on a feed.
@@ -4480,6 +4809,123 @@ 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);
+}
+async function fetchSEOverlays(client, count = 200) {
+  const res = await client.get(`/kappa/v2/overlays/${client.channelId}?count=${count}`);
+  return res.docs ?? [];
+}
+async function fetchSEBootstrapForOverlay(client, overlayId) {
+  return client.get(`/kappa/v2/overlays/${overlayId}/bootstrap?isEditor=false&isMobile=false&isObs=false&isObsLive=false&isXsplit=false`);
+}
+
 // 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 +4974,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 +4985,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 +5008,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 +5026,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 +5068,141 @@ 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: "pick", label: "Overlays" },
+  { 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 +5218,900 @@ 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."
-    ] }),
-    /* @__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." })
-      ] })
-    ] }),
-    error && /* @__PURE__ */ jsx13(ErrorPanel, { message: error.message, hint: error.hint })
+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 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 })
-    ] }),
-    /* @__PURE__ */ jsx13("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsx13(CoverageCards, { coverage: result.coverage }) })
-  ] });
+var JWT_FEATURES = [
+  "All your overlays \u2014 pick one, many, or all",
+  "Live counters (follower / sub / tip / bits goals)",
+  "Chat bot commands",
+  "Loyalty points + watch time",
+  "Recent activity replay",
+  "Bits leaderboard"
+];
+function ModeCard({
+  primary,
+  title,
+  body,
+  caveat,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs7(
+    "button",
+    {
+      type: "button",
+      onClick,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        gap: 14,
+        padding: 24,
+        minHeight: 280,
+        borderRadius: 14,
+        border: primary ? "2px solid var(--se-primary)" : "1px solid var(--se-border)",
+        background: primary ? "rgba(255, 64, 118, 0.08)" : "transparent",
+        color: "var(--se-text)",
+        textAlign: "left",
+        cursor: "pointer",
+        transition: "background 120ms, border-color 120ms, transform 120ms"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.background = primary ? "rgba(255, 64, 118, 0.14)" : "rgba(255, 255, 255, 0.04)";
+        if (!primary)
+          e.currentTarget.style.borderColor = "var(--se-border-strong)";
+        e.currentTarget.style.transform = "translateY(-2px)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = primary ? "rgba(255, 64, 118, 0.08)" : "transparent";
+        if (!primary)
+          e.currentTarget.style.borderColor = "var(--se-border)";
+        e.currentTarget.style.transform = "translateY(0)";
+      },
+      children: [
+        /* @__PURE__ */ jsx13(
+          "div",
+          {
+            style: {
+              fontSize: 18,
+              fontWeight: 800,
+              color: primary ? "var(--se-primary)" : "var(--se-text)"
+            },
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx13("div", { style: { fontSize: 13.5, lineHeight: 1.55, color: "var(--se-text)", width: "100%" }, children: body }),
+        /* @__PURE__ */ jsx13("div", { style: { fontSize: 12, color: "var(--se-muted)", marginTop: "auto" }, children: caveat })
+      ]
+    }
+  );
 }
-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 StepModePicker({
+  onChooseJwt,
+  onChooseUrl
+}) {
+  return /* @__PURE__ */ jsxs7("div", { className: panelClass("se-import-panel--wide"), children: [
+    /* @__PURE__ */ jsx13(
+      StepHeader,
+      {
+        number: 1,
+        title: "What would you like to import?",
+        subtitle: "Pick a starting point. You can change your mind from the Back button on the next step."
+      }
+    ),
+    /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
+          gap: 18,
+          marginTop: 8
+        },
+        children: [
+          /* @__PURE__ */ jsx13(
+            ModeCard,
+            {
+              primary: true,
+              title: "Import everything from StreamElements",
+              body: /* @__PURE__ */ jsxs7(Fragment3, { children: [
+                /* @__PURE__ */ jsx13("div", { style: { marginBottom: 10 }, children: "Connect once and bring over your entire SE setup:" }),
+                /* @__PURE__ */ jsx13(
+                  "ul",
+                  {
+                    style: {
+                      margin: 0,
+                      paddingLeft: 18,
+                      display: "grid",
+                      gap: 6,
+                      fontSize: 13
+                    },
+                    children: JWT_FEATURES.map((feat) => /* @__PURE__ */ jsx13("li", { children: feat }, feat))
+                  }
+                )
+              ] }),
+              caveat: "Requires pasting your StreamElements JWT. Stored only in memory \u2014 never sent to Lumia.",
+              onClick: onChooseJwt
+            }
+          ),
+          /* @__PURE__ */ jsx13(
+            ModeCard,
+            {
+              title: "Import a single overlay",
+              body: /* @__PURE__ */ jsxs7(Fragment3, { children: [
+                "Paste a single overlay's public preview URL to bring just that overlay over.",
+                /* @__PURE__ */ jsx13("div", { style: { marginTop: 10, color: "var(--se-muted)" }, children: "No login required \u2014 perfect for trying one overlay before deciding whether to migrate your whole account." })
+              ] }),
+              caveat: "The URL contains the access token; treat it like a password.",
+              onClick: onChooseUrl
+            }
+          )
+        ]
+      }
+    )
   ] });
 }
-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 } }),
+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__ */ 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__ */ 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__ */ 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: { 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."
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx13(LSInput, { label: "Overlay name", value: options.name, onChange: (e) => setOptions({ ...options, name: e.target.value }) })
-  ] });
-}
-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)) })
+    /* @__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 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
-      ] }),
-      /* @__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 })
-      ] })
+function StepPickOverlay({
+  overlays,
+  loading,
+  error,
+  selectedIds,
+  toggleId,
+  selectAll,
+  clearAll,
+  onRetry
+}) {
+  const selectedCount = selectedIds.size;
+  const total = overlays?.length ?? 0;
+  const allSelected = total > 0 && selectedCount === total;
+  const hasAnySelected = selectedCount > 0;
+  return /* @__PURE__ */ jsxs7("div", { className: panelClass("se-import-panel--wide"), children: [
+    /* @__PURE__ */ jsx13(
+      StepHeader,
+      {
+        number: 2,
+        title: "Pick the overlays to import",
+        subtitle: `Select one or more StreamElements overlays from your account. We'll run each one through the discovery \u2192 review \u2192 import pipeline in sequence. ${total > 0 ? `${total} overlay${total === 1 ? "" : "s"} on this channel.` : ""}`
+      }
+    ),
+    loading && /* @__PURE__ */ jsxs7("div", { className: "se-import-help se-import-help--info", children: [
+      /* @__PURE__ */ jsx13("div", { className: "se-import-help__icon", children: "\u2026" }),
+      /* @__PURE__ */ jsx13("div", { children: "Fetching your StreamElements overlays." })
+    ] }),
+    error && /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      /* @__PURE__ */ jsx13(ErrorPanel, { message: error.message, hint: error.hint }),
+      /* @__PURE__ */ jsx13("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ jsx13(LSButton, { type: "button", color: "secondary", onClick: onRetry, label: "Retry" }) })
+    ] }),
+    !loading && !error && overlays && overlays.length === 0 && /* @__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: "No overlays found" }),
+        /* @__PURE__ */ jsx13("p", { children: "This StreamElements account doesn't have any overlays yet. Create one in the SE dashboard, or use the legacy preview URL flow from the Connect step." })
+      ] })
+    ] }),
+    !loading && !error && overlays && overlays.length > 0 && /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      /* @__PURE__ */ jsxs7("div", { className: "se-import-actions se-import-actions--inline", style: { marginTop: 24, marginBottom: 16, justifyContent: "space-between", alignItems: "center", display: "flex" }, children: [
+        /* @__PURE__ */ jsxs7("label", { style: { display: "inline-flex", alignItems: "center", gap: 8, cursor: "pointer", fontSize: 14, fontWeight: 600 }, children: [
+          /* @__PURE__ */ jsx13(
+            "input",
+            {
+              type: "checkbox",
+              checked: allSelected,
+              ref: (el) => {
+                if (el) el.indeterminate = !allSelected && hasAnySelected;
+              },
+              onChange: () => allSelected ? clearAll() : selectAll()
+            }
+          ),
+          /* @__PURE__ */ jsxs7("span", { children: [
+            allSelected ? "Deselect all" : "Select all",
+            " (",
+            selectedCount,
+            "/",
+            total,
+            ")"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx13("span", { style: { fontSize: 13, color: "var(--se-muted)" }, children: hasAnySelected ? `${selectedCount} overlay${selectedCount === 1 ? "" : "s"} queued. Each runs through the full import flow in sequence.` : "Click overlays below to select them." })
+      ] }),
+      /* @__PURE__ */ jsx13(
+        "div",
+        {
+          className: "se-import-grid",
+          style: {
+            gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
+            gap: 12,
+            maxHeight: 480,
+            overflowY: "auto",
+            padding: 4
+          },
+          children: overlays.map((o) => {
+            const selected = selectedIds.has(o._id);
+            return /* @__PURE__ */ jsxs7(
+              "label",
+              {
+                style: {
+                  position: "relative",
+                  display: "flex",
+                  flexDirection: "column",
+                  border: selected ? "2px solid var(--se-primary)" : "1px solid var(--se-border)",
+                  borderRadius: 10,
+                  padding: 10,
+                  background: selected ? "rgba(255, 64, 118, 0.08)" : "rgba(28, 32, 66, 0.45)",
+                  cursor: "pointer",
+                  transition: "border-color 120ms, background 120ms"
+                },
+                children: [
+                  /* @__PURE__ */ jsx13(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: selected,
+                      onChange: () => toggleId(o._id),
+                      style: { position: "absolute", top: 10, right: 10, accentColor: "var(--se-primary)", zIndex: 1 }
+                    }
+                  ),
+                  o.preview ? /* @__PURE__ */ jsx13(
+                    "img",
+                    {
+                      src: o.preview,
+                      alt: "",
+                      style: {
+                        width: "100%",
+                        height: 110,
+                        objectFit: "cover",
+                        borderRadius: 6,
+                        background: "var(--se-panel-2)"
+                      },
+                      loading: "lazy"
+                    }
+                  ) : /* @__PURE__ */ jsx13("div", { style: { width: "100%", height: 110, borderRadius: 6, background: "var(--se-panel-2)" } }),
+                  /* @__PURE__ */ jsx13("div", { style: { marginTop: 8, fontSize: 14, fontWeight: 700, color: "var(--se-text)", paddingRight: 28 }, children: o.name ?? "Unnamed overlay" }),
+                  /* @__PURE__ */ jsxs7("div", { style: { marginTop: 4, fontSize: 11, color: "var(--se-muted)" }, children: [
+                    o.type ?? "regular",
+                    o.settings?.width && o.settings?.height ? ` \xB7 ${o.settings.width}\xD7${o.settings.height}` : ""
+                  ] }),
+                  o.updatedAt && /* @__PURE__ */ jsxs7("div", { style: { marginTop: 2, fontSize: 11, color: "var(--se-muted)" }, children: [
+                    "Updated ",
+                    new Date(o.updatedAt).toLocaleDateString()
+                  ] })
+                ]
+              },
+              o._id
+            );
+          })
+        }
+      )
+    ] })
+  ] });
+}
+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: (_, next) => setUrl(String(next ?? "")),
+        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(
+    (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(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 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 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("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((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: 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__ */ 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 +6125,167 @@ 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(initialUrl ? "url" : "mode");
+  const [entryMode, setEntryMode] = useState6(
+    initialUrl ? "url" : null
+  );
+  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 [overlayList, setOverlayList] = useState6(null);
+  const [overlaysLoading, setOverlaysLoading] = useState6(false);
+  const [overlaysError, setOverlaysError] = useState6(null);
+  const [selectedOverlayIds, setSelectedOverlayIds] = useState6(/* @__PURE__ */ new Set());
+  const [overlayQueue, setOverlayQueue] = useState6([]);
+  const [currentOverlayIndex, setCurrentOverlayIndex] = useState6(0);
+  const [totalOverlaysToImport, setTotalOverlaysToImport] = useState6(0);
+  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 loadOverlayList = useCallback3(async (client) => {
+    setOverlaysError(null);
+    setOverlaysLoading(true);
+    try {
+      const list = await fetchSEOverlays(client);
+      setOverlayList(list);
+    } catch (e) {
+      if (e instanceof SEAuthError) {
+        setOverlaysError({ message: e.message, hint: e.code === "unauthorized" ? "Generate a new JWT on streamelements.com/dashboard/account/channels." : void 0 });
+        bindings.onAuthError?.(e);
+      } else {
+        setOverlaysError({ message: e instanceof Error ? e.message : "Could not load your StreamElements overlays." });
+      }
+    } finally {
+      setOverlaysLoading(false);
+    }
+  }, [bindings]);
+  const toggleOverlaySelection = useCallback3((id) => {
+    setSelectedOverlayIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+  const selectAllOverlays = useCallback3(() => {
+    setSelectedOverlayIds(new Set((overlayList ?? []).map((o) => o._id)));
+  }, [overlayList]);
+  const clearAllOverlays = useCallback3(() => {
+    setSelectedOverlayIds(/* @__PURE__ */ new Set());
+  }, []);
+  const loadBootstrapAndKickoff = useCallback3(async (client, overlayId) => {
+    setLoadError(null);
+    setLoading(true);
+    try {
+      const bootstrap = await fetchSEBootstrapForOverlay(client, overlayId);
+      if (!isSEBootstrap(bootstrap)) {
+        throw new Error("StreamElements returned a payload that doesn't look like an overlay bootstrap.");
+      }
+      const imported = importSEBootstrap(bootstrap);
+      setResult(imported);
+      setOptions((o) => ({ ...o, name: imported.overlay.name }));
+      setOriginalReviewItems(imported.reviewItems);
+      setRowStates(Object.fromEntries(imported.reviewItems.map((r) => [r.moduleId, { state: "pending" }])));
+      setReviewIndex(0);
+      setMirrorRows([]);
+      mirrorStartedRef.current = false;
+      setStep("discovery");
+    } catch (e) {
+      setLoadError({
+        message: "Could not load the overlay.",
+        hint: e?.message ?? String(e)
+      });
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  const handlePickConfirm = useCallback3(async () => {
+    if (!seClient) return;
+    const ids = Array.from(selectedOverlayIds);
+    if (ids.length === 0) return;
+    const [first, ...rest] = ids;
+    setOverlayQueue(rest);
+    setTotalOverlaysToImport(ids.length);
+    setCurrentOverlayIndex(1);
+    await loadBootstrapAndKickoff(seClient, first);
+  }, [seClient, selectedOverlayIds, loadBootstrapAndKickoff]);
   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 +6293,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 +6377,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 +6395,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 +6413,28 @@ function SEImportWizard({ bindings }) {
       void runMirror();
     }
   }, [step, runMirror]);
-  const currentItem = originalReviewItems[reviewIndex];
-  const currentRow = currentItem ? rowStates[currentItem.moduleId] ?? { state: "pending" } : void 0;
+  useEffect6(() => {
+    if (step === "pick" && seClient && overlayList === null && !overlaysLoading) {
+      void loadOverlayList(seClient);
+    }
+  }, [step, seClient, overlayList, overlaysLoading, loadOverlayList]);
   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 +6451,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 +6497,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 +6531,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,13 +6543,31 @@ 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 () => {
-    if (!result) return;
+    if (!result || !seClient) {
+      if (!result) return;
+      setImporting(true);
+      try {
+        const body = { name: options.name.trim() || result.overlay.name, description: result.overlay.description, settings: result.overlay.settings };
+        const { uuid } = await saveOverlay(body);
+        notify.success("Imported overlay from StreamElements.");
+        mirrorAbortRef.current?.abort();
+        onClose();
+        if (uuid) onComplete({ overlayId: uuid });
+      } catch (error) {
+        notify.error(`Import failed: ${extractErrorMessage(error)}`);
+      } finally {
+        setImporting(false);
+      }
+      return;
+    }
     setImporting(true);
     try {
       const body = {
@@ -5126,163 +6576,348 @@ function SEImportWizard({ bindings }) {
         settings: result.overlay.settings
       };
       const { uuid } = await saveOverlay(body);
-      notify.success(`Imported overlay from StreamElements.`);
+      const hasMore = overlayQueue.length > 0;
+      if (hasMore) {
+        notify.success(`Imported ${currentOverlayIndex} of ${totalOverlaysToImport} overlays from StreamElements.`);
+        const [nextId, ...rest] = overlayQueue;
+        setOverlayQueue(rest);
+        setCurrentOverlayIndex(currentOverlayIndex + 1);
+        setImporting(false);
+        await loadBootstrapAndKickoff(seClient, nextId);
+        return;
+      }
+      notify.success(
+        totalOverlaysToImport > 1 ? `Imported all ${totalOverlaysToImport} overlays from StreamElements.` : "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"];
+  }, [
+    notify,
+    onClose,
+    onComplete,
+    options.name,
+    result,
+    saveOverlay,
+    seClient,
+    overlayQueue,
+    currentOverlayIndex,
+    totalOverlaysToImport,
+    loadBootstrapAndKickoff
+  ]);
+  const visibleSteps = useMemo5(() => {
+    const showMirrorStep = options.mirrorAssets && (assetUrls.length > 0 || mirrorRows.length > 0 || step === "mirror");
+    if (step === "mode") return [];
+    const onUrlFlow = entryMode === "url" || step === "url";
+    const onJwtFlow = !onUrlFlow;
+    const steps = CORE_STEPS.filter((item) => {
+      if (item.key === "mode") return false;
+      if (item.key === "mirror" && !showMirrorStep) return false;
+      if (item.key === "connect" && !onJwtFlow) return false;
+      if (item.key === "pick" && !onJwtFlow) return false;
+      if (item.key === "url" && !onUrlFlow) return false;
+      return true;
+    });
+    if (originalReviewItems.length > 0)
+      steps.splice(Math.max(steps.length - 1, 0), 0, {
+        key: "review",
+        label: `Review (${originalReviewItems.length})`
+      });
+    return steps;
+  }, [
+    assetUrls.length,
+    entryMode,
+    mirrorRows.length,
+    options.mirrorAssets,
+    originalReviewItems.length,
+    seClient,
+    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);
-  };
-  const goNext = () => {
-    if (step === "url") {
-      void handleLoad();
-      return;
-    }
-    if (step === "discovery") {
-      setStep("options");
+    if (currentIndex === 0 && (step === "connect" || step === "url")) {
+      setStep("mode");
+      setEntryMode(null);
       return;
     }
-    if (step === "options") {
-      if (options.mirrorAssets && assetUrls.length > 0) setStep("mirror");
-      else if (originalReviewItems.length > 0) setStep("review");
-      else setStep("confirm");
+    if (currentIndex > 0) setStep(visibleSteps[currentIndex - 1].key);
+  };
+  const goNext = () => {
+    if (step === "connect") {
+      if (!seClient) return void handleConnect();
+      setStep("pick");
       return;
     }
-    if (step === "mirror") {
-      if (originalReviewItems.length > 0) setStep("review");
-      else setStep("confirm");
-      return;
+    if (step === "pick") {
+      return void handlePickConfirm();
     }
+    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 === "pick") {
+      if (loading) return "Loading overlay...";
+      const n = selectedOverlayIds.size;
+      return n > 1 ? `Import ${n} overlays` : "Import overlay";
+    }
+    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 === "pick")
+      return loading || overlaysLoading || selectedOverlayIds.size === 0;
     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,
+  const activeIndex = visibleSteps.findIndex((item) => item.key === step);
+  const batchActive = totalOverlaysToImport > 1 && step !== "mode" && step !== "pick" && step !== "connect" && step !== "url";
+  const currentOverlayName = overlayList?.find((o) => o._id === Array.from(selectedOverlayIds).filter((id) => !overlayQueue.includes(id))[currentOverlayIndex - 1])?.name;
+  return /* @__PURE__ */ jsx13("div", { className: "se-import", children: /* @__PURE__ */ jsxs7("div", { className: "se-import__shell", children: [
+    batchActive && /* @__PURE__ */ jsxs7(
+      "div",
       {
-        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)
+        style: {
+          marginBottom: 16,
+          padding: "10px 16px",
+          border: "1px solid var(--se-border-strong)",
+          borderRadius: 8,
+          background: "rgba(255, 64, 118, 0.08)",
+          color: "var(--se-text)",
+          fontSize: 13,
+          fontWeight: 600,
+          textAlign: "center"
+        },
+        children: [
+          "Importing overlay ",
+          currentOverlayIndex,
+          " of ",
+          totalOverlaysToImport,
+          currentOverlayName ? ` \xB7 ${currentOverlayName}` : "",
+          overlayQueue.length > 0 ? ` \xB7 ${overlayQueue.length} more queued` : ""
+        ]
       }
     ),
-    step === "review" && currentItem && marketplacePickerOpen && /* @__PURE__ */ jsx13(
-      MarketplacePicker,
+    visibleSteps.length > 0 && /* @__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 === "mode" && /* @__PURE__ */ jsx13(
+        StepModePicker,
+        {
+          onChooseJwt: () => {
+            setEntryMode("jwt");
+            setStep("connect");
+          },
+          onChooseUrl: () => {
+            setEntryMode("url");
+            setStep("url");
+          }
+        }
+      ),
+      step === "connect" && /* @__PURE__ */ jsx13(
+        StepConnect,
+        {
+          jwt,
+          setJwt,
+          error: connectError,
+          busy: connecting,
+          channels,
+          selectedChannelId,
+          setSelectedChannelId,
+          onUseUrl: () => {
+            setEntryMode("url");
+            setStep("url");
+          }
+        }
+      ),
+      step === "pick" && /* @__PURE__ */ jsx13(
+        StepPickOverlay,
+        {
+          overlays: overlayList,
+          loading: overlaysLoading,
+          error: overlaysError,
+          selectedIds: selectedOverlayIds,
+          toggleId: toggleOverlaySelection,
+          selectAll: selectAllOverlays,
+          clearAll: clearAllOverlays,
+          onRetry: () => seClient && void loadOverlayList(seClient)
+        }
+      ),
+      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")
+        }
+      ),
+      step !== "mode" && /* @__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 })
+      step !== "mode" && /* @__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
 var REVIEW_REASONS = {
   "se-widget-bit-boss": "No native Lumia equivalent \u2014 bit boss fight bar with HP/damage states.",
-  "se-widget-hype-cup": "No native Lumia equivalent \u2014 Box2D physics stacking animation.",
+  // `se-widget-hype-cup` intentionally omitted — it now routes to the native
+  // `tipjar` module (see dispatcher.ts) and lands with `partial` status, so it
+  // never reaches the placeholder-reason fallback. If a future feature flag
+  // disables tipjar auto-import, add an entry to FLAG_OFF_REASONS instead.
   "se-widget-train": "No native Lumia equivalent \u2014 animated subscriber/event train.",
   "se-widget-media-share": "No native Lumia equivalent \u2014 viewer-submitted media player.",
   "se-widget-contest": "No native Lumia equivalent \u2014 SE-specific contest widget.",
@@ -5291,13 +6926,17 @@ var REVIEW_REASONS = {
   "se-widget-top-cheerers-list": 'Lumia loyaltyleaderboard needs a "source" extension before it can render cheer rankings.',
   "se-widget-top-gifters-list": 'Lumia loyaltyleaderboard needs a "source" extension before it can render gifter rankings.',
   "se-widget-top-tippers-list": 'Lumia loyaltyleaderboard needs a "source" extension before it can render tipper rankings.',
-  "se-widget-snow": "Seasonal effect \u2014 needs a particle template in Lumia.",
-  "se-widget-halloween": "Seasonal effect \u2014 needs a Lumia template.",
-  "se-widget-halloween-2019": "Seasonal effect \u2014 needs a Lumia template.",
-  "se-widget-xmas": "Seasonal effect \u2014 needs a Lumia template.",
-  "se-widget-valentine": "Seasonal effect \u2014 needs a Lumia template.",
-  "se-widget-easter": "Seasonal effect \u2014 needs a Lumia template.",
-  "se-widget-world-cup": "Seasonal effect \u2014 needs a Lumia template."
+  // Merch products rotator — imports as an empty slideshow with the title
+  // "Merch products (add images manually)". Lumia's Fourthwall integration is
+  // webhook-driven (events flow in) but doesn't fetch the user's shop catalog,
+  // so we can't pre-populate the slideshow items. The streamer adds their
+  // product images by hand in the slideshow editor. Status = 'partial' (see
+  // dispatcher.ts), so this string surfaces in the review step.
+  "se-widget-merch-products-rotator": "Imported as an empty slideshow. Lumia doesn't fetch your Fourthwall product catalog yet, so add your product images manually in the slideshow editor \u2014 the layer is pre-positioned and styled to match your SE widget."
+  // Seasonal widgets (snow / halloween / halloween-2019 / xmas / valentine / easter
+  // / world-cup) intentionally omitted — they route directly to image/slideshow/
+  // video modules now (see dispatcher.ts SEASONAL_IMAGE_TYPES), so they always
+  // produce a `direct` status and never need a fallback review reason.
 };
 function reasonFor(seType, status, flaggedOff) {
   if (flaggedOff && FLAG_OFF_REASONS[seType]) return FLAG_OFF_REASONS[seType];
@@ -5403,7 +7042,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 +7262,8 @@ export {
   LSVariableInputProvider,
   MEDIA_PREVIEW_USER_LEVEL_VALUES,
   MarketplacePicker,
+  SEAuthError,
+  SEClient,
   SEImportWizard,
   SE_IMPORT_FLAGS,
   SE_WIDGET_TO_MARKETPLACE_CANDIDATES,
@@ -5631,9 +7272,11 @@ export {
   buildBootstrapUrl,
   buildChatMessageContent,
   codeMirrorlinterOptions,
+  decodeJwtPayload,
   extractSEOverlayId,
   extractSEPreviewParts,
   fetchSEBootstrap,
+  fetchUsableChannels,
   filenameFromURL,
   findSEAssetURLs,
   getAILandingBounds,