@lumiastream/ui 0.2.8-alpha.1 → 0.2.8-alpha.2

package/dist/index.d.ts

@@ -485,7 +485,7 @@ declare const resolvePlatformChatterProfileUrl: ({ platform, username, displayna
 declare const normalizeHttpUrl: (value: unknown) => string | null;
 declare const resolveChatterProfileUrlWithResolvers: ({ platform, username, displayname, userId, extraSettings, resolvers, }: ResolveChatterProfileUrlWithResolversInput) => Promise<string | null>;
 
-type ModuleType = 'alert' | 'emotebox' | 'emotealert' | 'text' | 'image' | 'audio' | 'video' | 'camera' | 'slideshow' | 'shape' | 'svg' | 'colorbox' | 'goal' | 'timer' | 'gradientlight' | 'browsersource' | 'chatbox' | 'credits' | 'eventlist' | 'eventrotate' | 'hfx' | 'hfxalert' | 'clip' | 'youtube' | 'spinwheel' | 'raffle' | 'viewerqueue' | 'loyaltyleaderboard' | 'viewerprofiles' | 'achievements' | 'poll' | 'tournaments' | 'spotify' | 'nowplaying' | 'youtubemusic' | 'brbscreen' | 'vlc' | 'tts' | 'livecaption' | 'custom' | 'group';
+type ModuleType = 'alert' | 'emotebox' | 'emotealert' | 'text' | 'image' | 'audio' | 'video' | 'camera' | 'slideshow' | 'shape' | 'svg' | 'colorbox' | 'goal' | 'timer' | 'gradientlight' | 'browsersource' | 'chatbox' | 'credits' | 'eventlist' | 'eventrotate' | 'hfx' | 'hfxalert' | 'clip' | 'youtube' | 'spinwheel' | 'raffle' | 'viewerqueue' | 'loyaltyleaderboard' | 'viewerprofiles' | 'achievements' | 'poll' | 'tournaments' | 'spotify' | 'nowplaying' | 'youtubemusic' | 'brbscreen' | 'vlc' | 'tts' | 'livecaption' | 'custom' | 'tipjar' | 'hypetrain' | 'streamboss' | 'songrequest' | 'group';
 type OverlayLayerType = 'layer' | 'group';
 type OverlayLayerBounds = {
     height: number;
@@ -689,11 +689,8 @@ declare const SE_WIDGET_TO_MARKETPLACE_CANDIDATES: Record<string, number[]>;
 declare function getMarketplaceCandidates(seWidgetType: string): number[];
 declare function hasMarketplaceCandidates(seWidgetType: string): boolean;
 
-declare const SE_IMPORT_FLAGS: {
-    readonly IMPORT_MERCH_PRODUCTS: false;
-    readonly IMPORT_SEASONAL: false;
-};
-declare function isWidgetFlaggedOff(seType: string): boolean;
+declare const SE_IMPORT_FLAGS: {};
+declare function isWidgetFlaggedOff(_seType: string): boolean;
 declare const FLAG_OFF_REASONS: Record<string, string>;
 
 interface SEAccountClaims {

package/dist/index.js

@@ -3126,7 +3126,11 @@ var SE_WIDGET_TYPE_LABELS = {
   "se-widget-hype-cup": "Hype Cup",
   "se-widget-custom-event-list": "Custom widget",
   "se-widget-credit-roll": "Credits",
-  "se-widget-media-share": "Media share"
+  "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() : "";
@@ -3273,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 };
@@ -3370,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;
@@ -3539,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";
 }
@@ -3639,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) {
@@ -4012,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",
@@ -4155,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: {
@@ -4172,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 = {
@@ -4238,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",
@@ -4287,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) {
@@ -4477,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.
@@ -4487,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.
@@ -4619,6 +4918,13 @@ 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";
@@ -4780,6 +5086,7 @@ 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" },
@@ -4932,6 +5239,136 @@ function StepHeader({
     ] })
   ] });
 }
+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 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 StepConnect({
   jwt,
   setJwt,
@@ -5057,6 +5494,140 @@ function StepConnect({
     error && /* @__PURE__ */ jsx13(ErrorPanel, { message: error.message, hint: error.hint })
   ] });
 }
+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,
@@ -5077,7 +5648,7 @@ function StepURL({
       {
         label: "Overlay URL",
         value: url,
-        onChange: setUrl,
+        onChange: (_, next) => setUrl(String(next ?? "")),
         placeholder: "https://streamelements.com/overlay/<id>/<token>",
         disabled: busy
       }
@@ -5554,13 +6125,23 @@ function SEImportWizard({
     t
   } = bindings;
   const translate = (key, fallback) => t ? t(key) ?? fallback : fallback;
-  const [step, setStep] = useState6("connect");
+  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);
@@ -5630,6 +6211,73 @@ function SEImportWizard({
       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);
@@ -5765,6 +6413,11 @@ function SEImportWizard({
       void runMirror();
     }
   }, [step, runMirror]);
+  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);
@@ -5898,7 +6551,23 @@ function SEImportWizard({
     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 = {
@@ -5907,7 +6576,19 @@ function SEImportWizard({
         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 });
@@ -5916,12 +6597,32 @@ function SEImportWizard({
     } finally {
       setImporting(false);
     }
-  }, [notify, onClose, onComplete, options.name, result, saveOverlay]);
+  }, [
+    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");
-    const steps = CORE_STEPS.filter(
-      (item) => item.key !== "mirror" || showMirrorStep
-    );
+    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",
@@ -5930,9 +6631,11 @@ function SEImportWizard({
     return steps;
   }, [
     assetUrls.length,
+    entryMode,
     mirrorRows.length,
     options.mirrorAssets,
     originalReviewItems.length,
+    seClient,
     step
   ]);
   const goBack = () => {
@@ -5941,14 +6644,22 @@ function SEImportWizard({
       setReviewIndex(reviewIndex - 1);
       return;
     }
+    if (currentIndex === 0 && (step === "connect" || step === "url")) {
+      setStep("mode");
+      setEntryMode(null);
+      return;
+    }
     if (currentIndex > 0) setStep(visibleSteps[currentIndex - 1].key);
   };
   const goNext = () => {
     if (step === "connect") {
       if (!seClient) return void handleConnect();
-      setStep("url");
+      setStep("pick");
       return;
     }
+    if (step === "pick") {
+      return void handlePickConfirm();
+    }
     if (step === "url") return void handleLoad();
     if (step === "review") {
       if (!currentItem) return;
@@ -5971,6 +6682,11 @@ function SEImportWizard({
   const nextLabel = (() => {
     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")
@@ -5982,6 +6698,8 @@ function SEImportWizard({
   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")
@@ -5990,8 +6708,34 @@ function SEImportWizard({
     return false;
   })();
   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: [
-    /* @__PURE__ */ jsx13("header", { className: "se-import__header", children: /* @__PURE__ */ jsx13("div", { className: "se-import-stepper", children: visibleSteps.map((item, index) => /* @__PURE__ */ jsxs7(
+    batchActive && /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        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` : ""
+        ]
+      }
+    ),
+    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",
       {
         className: stepClass(
@@ -6007,6 +6751,19 @@ function SEImportWizard({
       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,
         {
@@ -6017,7 +6774,23 @@ function SEImportWizard({
           channels,
           selectedChannelId,
           setSelectedChannelId,
-          onUseUrl: () => setStep("url")
+          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(
@@ -6109,7 +6882,7 @@ function SEImportWizard({
           label: translate("action.cancel", "Cancel")
         }
       ),
-      activeIndex > 0 && /* @__PURE__ */ jsx13(
+      step !== "mode" && /* @__PURE__ */ jsx13(
         LSButton,
         {
           type: "button",
@@ -6119,7 +6892,7 @@ function SEImportWizard({
           label: "Back"
         }
       ),
-      /* @__PURE__ */ jsx13(
+      step !== "mode" && /* @__PURE__ */ jsx13(
         LSButton,
         {
           type: "button",
@@ -6141,7 +6914,10 @@ function extractErrorMessage(err) {
 // 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.",
@@ -6150,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];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lumiastream/ui",
-	"version": "0.2.8-alpha.1",
+	"version": "0.2.8-alpha.2",
 	"author": "Lumia Stream",
 	"license": "ISC",
 	"description": "Lumia UI Kit",