@lumiastream/ui 0.2.7 → 0.2.8-alpha.10

package/dist/index.js

@@ -508,7 +508,7 @@ import FormControlLabel from "@mui/material/FormControlLabel";
 import { forwardRef as forwardRef2 } from "react";
 import { useController, useFormContext } from "react-hook-form";
 import classNames4 from "classnames";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
 var LSCheckbox = forwardRef2(({ className = "", checked, inputRef, slotProps, ...props }, ref) => {
   const CheckboxComponent = Checkbox;
   return /* @__PURE__ */ jsx5(
@@ -539,8 +539,31 @@ function LSCheckboxField({
   checkboxProps
 }) {
   const formContext = useFormContext();
-  const resolvedControl = control ?? formContext.control;
-  const { field } = useController({ name, control: resolvedControl });
+  const resolvedControl = control ?? formContext?.control;
+  if (!resolvedControl) return /* @__PURE__ */ jsx5(Fragment, {});
+  return /* @__PURE__ */ jsx5(
+    LSCheckboxFieldInner,
+    {
+      name,
+      label,
+      control: resolvedControl,
+      className,
+      disabled,
+      labelPlacement,
+      checkboxProps
+    }
+  );
+}
+function LSCheckboxFieldInner({
+  name,
+  label,
+  control,
+  className = "",
+  disabled,
+  labelPlacement = "end",
+  checkboxProps
+}) {
+  const { field } = useController({ name, control });
   return /* @__PURE__ */ jsx5(
     FormControlLabel,
     {
@@ -1045,7 +1068,7 @@ import Search from "@mui/icons-material/Search";
 import KeyboardArrowDown2 from "@mui/icons-material/KeyboardArrowDown";
 import Tooltip from "@mui/material/Tooltip";
 import {
-  Fragment,
+  Fragment as Fragment2,
   createContext,
   forwardRef as forwardRef4,
   useCallback as useCallback2,
@@ -1055,7 +1078,7 @@ import {
   useRef as useRef3,
   useState as useState4
 } from "react";
-import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 import { createElement } from "react";
 var LSVariableInputContext = createContext({});
 var LSVariableInputProvider = ({
@@ -1799,7 +1822,7 @@ var LSVariableInputField = forwardRef4((props, ref) => {
     const fullToken = `${rootToken}.${node.relativePath}`;
     const expanded = node.isExpandable && isPathExpanded(fullToken);
     const { displayValue, fullValue } = getVariableValuePreview(node.value);
-    return /* @__PURE__ */ jsxs5(Fragment, { children: [
+    return /* @__PURE__ */ jsxs5(Fragment2, { children: [
       /* @__PURE__ */ jsxs5(
         "div",
         {
@@ -1938,7 +1961,7 @@ var LSVariableInputField = forwardRef4((props, ref) => {
           const expanded = expandable && isPathExpanded(definition.name);
           const isLast = idx === filteredAllowedVariables.length - 1;
           const rowCls = `ls-variable-picker__row${isLast && !expanded ? " ls-variable-picker__row--no-border" : ""}`;
-          return /* @__PURE__ */ jsxs5(Fragment, { children: [
+          return /* @__PURE__ */ jsxs5(Fragment2, { children: [
             /* @__PURE__ */ jsxs5(
               "div",
               {
@@ -1978,7 +2001,7 @@ var LSVariableInputField = forwardRef4((props, ref) => {
         const tree = systemVariableValueTrees.get(variable.name);
         const expandable = !!tree && tree.length > 0;
         const expanded = expandable && isPathExpanded(rootToken);
-        return /* @__PURE__ */ jsxs5(Fragment, { children: [
+        return /* @__PURE__ */ jsxs5(Fragment2, { children: [
           /* @__PURE__ */ jsxs5(
             "div",
             {
@@ -2028,7 +2051,7 @@ var LSVariableInputField = forwardRef4((props, ref) => {
       ref
     }
   );
-  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
     /* @__PURE__ */ jsx11(
       Popover,
       {
@@ -2212,7 +2235,7 @@ var VariableInputTextField = forwardRef4(
           ...paramsSlotInputProps,
           ...paramsInputProps,
           startAdornment,
-          endAdornment: /* @__PURE__ */ jsxs5(Fragment2, { children: [
+          endAdornment: /* @__PURE__ */ jsxs5(Fragment3, { children: [
             endAdornment ?? null,
             showVariableIcon ? /* @__PURE__ */ jsx11(
               Tooltip,
@@ -2269,7 +2292,7 @@ function variableCompletionOptions(context, variables) {
 }
 
 // src/utils/codeMirrorlinterOptions.ts
-import * as globals from "globals";
+import globals from "globals";
 var browserGlobals = Object.fromEntries(
   Object.entries(globals.browser).map(([key, value]) => [
     key,
@@ -3111,6 +3134,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) : {};
@@ -3180,11 +3237,21 @@ function listenerToLumiaVariable(listener) {
   return m[listener] ?? listener.replace(/-/g, "_");
 }
 function seCssToBounds(css, defaults = { width: 600, height: 200 }, canvas) {
+  let widthIsAuto = false;
+  let heightIsAuto = false;
   const toPx = (v, fallback, axis) => {
-    if (v == null) return fallback;
+    if (v == null) {
+      if (axis === "width") widthIsAuto = true;
+      else if (axis === "height") heightIsAuto = true;
+      return fallback;
+    }
     if (typeof v === "number") return v;
     const s = v.trim();
-    if (s === "auto" || s === "") return fallback;
+    if (s === "auto" || s === "") {
+      if (axis === "width") widthIsAuto = true;
+      else if (axis === "height") heightIsAuto = true;
+      return fallback;
+    }
     if (s.endsWith("%")) {
       const pct = parseFloat(s);
       if (canvas && axis && Number.isFinite(pct)) {
@@ -3198,6 +3265,8 @@ function seCssToBounds(css, defaults = { width: 600, height: 200 }, canvas) {
   };
   const width = toPx(css.width, defaults.width, "width");
   const height = toPx(css.height, defaults.height, "height");
+  const autoWidth = widthIsAuto;
+  const autoHeight = heightIsAuto;
   let x = toPx(css.left, 0, "width");
   let y = toPx(css.top, 0, "height");
   if (typeof css.transform === "string" && css.transform.includes("translate")) {
@@ -3223,7 +3292,9 @@ function seCssToBounds(css, defaults = { width: 600, height: 200 }, canvas) {
     width,
     height,
     opacity: css.opacity ?? 1,
-    zIndex: css["z-index"] ?? 0
+    zIndex: css["z-index"] ?? 0,
+    autoWidth,
+    autoHeight
   };
 }
 var LUMIA_DEFAULT_SIZES = {
@@ -3233,7 +3304,11 @@ var LUMIA_DEFAULT_SIZES = {
   audio: { width: 200, height: 200 },
   slideshow: { width: 400, height: 220 },
   alert: { width: 700, height: 600 },
-  goal: { width: 740, height: 80 },
+  // 80 was too short for the SE-style slim goal layout (label + bar + "Ends
+  // in" sublabel needs ~125 px of vertical space). Bumped so editor-canvas
+  // rendering (which doesn't honor autoHeight) doesn't clip the sublabel
+  // after import.
+  goal: { width: 740, height: 130 },
   timer: { width: 740, height: 80 },
   chatbox: { width: 375, height: 470 },
   eventlist: { width: 375, height: 470 },
@@ -3243,7 +3318,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 };
@@ -3252,7 +3342,7 @@ function translateVariationCondition(seType, seCondition, requirement) {
   if (seCondition === "ATLEAST" && requirement != null) {
     return { conditionType: "GREATER_NUMBER", condition: requirement };
   }
-  return null;
+  return { conditionType: "RANDOM", condition: 100 };
 }
 var LUMIA_LAYOUTS = /* @__PURE__ */ new Set(["column", "row", "onlyImage", "onlyText", "imageOver", "textOver"]);
 function translateLayout(seLayout) {
@@ -3280,7 +3370,13 @@ function buildUnit(widget, lumiaType, moduleExtras) {
       height: bounds.height,
       scale: [1, 1],
       opacity: bounds.opacity,
-      zIndex: bounds.zIndex
+      zIndex: bounds.zIndex,
+      // Per-axis flags — only the SE axis that was actually `auto`
+      // collapses in render. The SE cheer goal is the canonical case:
+      // width: "700px" + height: "auto" → numeric width stays at 700,
+      // height collapses to content.
+      ...bounds.autoWidth ? { autoWidth: true } : {},
+      ...bounds.autoHeight ? { autoHeight: true } : {}
     }
   };
   const module = {
@@ -3288,7 +3384,7 @@ function buildUnit(widget, lumiaType, moduleExtras) {
     version: 1,
     settings: {
       type: lumiaType,
-      title: widget.name ?? null,
+      title: defaultLabelForSEWidget(widget),
       locked: widget.locked ?? false
     },
     lights: [],
@@ -3302,6 +3398,19 @@ function buildUnit(widget, lumiaType, moduleExtras) {
 }
 
 // src/se-import/mappers/basic.ts
+function seExtraTextCss(seCss, scrolling) {
+  const extra = {};
+  if (typeof seCss["text-decoration"] === "string") extra.textDecoration = seCss["text-decoration"];
+  if (typeof seCss["text-transform"] === "string") extra.textTransform = seCss["text-transform"];
+  if (seCss["-webkit-text-stroke-color"]) extra["-webkit-text-stroke-color"] = seCss["-webkit-text-stroke-color"];
+  if (seCss["-webkit-text-stroke-width"] != null) extra["-webkit-text-stroke-width"] = seCss["-webkit-text-stroke-width"];
+  if (scrolling?.enabled) {
+    extra.scroll = true;
+    const speed = Number(scrolling.speed);
+    if (Number.isFinite(speed) && speed > 0) extra.scrollSpeed = speed * 600;
+  }
+  return extra;
+}
 function mapText(widget) {
   const value = translateSeText(widget.text?.value ?? "");
   const seCss = widget.text?.css ?? {};
@@ -3318,7 +3427,8 @@ function mapText(widget) {
       color: seCss["color"] ?? "#ffffff",
       textShadow: seCss["text-shadow"] ?? "rgb(0, 0, 0) 1px 1px 1px",
       lineHeight: seCss["line-height"] ?? 1,
-      background: "transparent"
+      background: "transparent",
+      ...seExtraTextCss(seCss, widget.text?.scrolling)
     }
   });
 }
@@ -3340,6 +3450,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;
@@ -3360,7 +3481,8 @@ function mapReadout(widget, fallbackVar) {
       color: seCss["color"] ?? "#ffffff",
       textShadow: seCss["text-shadow"] ?? "rgb(0, 0, 0) 1px 1px 1px",
       lineHeight: seCss["line-height"] ?? 1,
-      background: "transparent"
+      background: "transparent",
+      ...seExtraTextCss(seCss, widget.text?.scrolling)
     }
   });
 }
@@ -3378,9 +3500,20 @@ var SE_EVENT_TO_LUMIA_ALERT = {
   // LumiaAlertValues / activity.types.ts.
   merch: "fourthwall-shopOrder",
   purchase: "fourthwall-shopOrder",
-  charityCampaignDonation: "twitch-charityDonation",
-  host: "twitch-raid",
-  redemption: "twitch-redemption"
+  charityCampaignDonation: "twitch-charityDonation"
+  // NOTE — two SE events intentionally NOT mapped:
+  //   • `host` → previously `twitch-raid`. Twitch deprecated hosting in
+  //     late 2022 so the event never fires on the platform anymore. Even
+  //     if it did, host payloads don't carry a viewer count (raids do),
+  //     so the rendered alert would read "{name} raided with ?? viewers".
+  //     Drop the mapping; SE widgets configured with a `host` block fall
+  //     through to the unsupported placeholder rather than producing
+  //     misleading raid alerts.
+  //   • `redemption` → SE's `redemption` event is the legacy SE Store
+  //     redemption (their own loyalty-point store purchases), NOT Twitch
+  //     channel-point redemptions. Different payload, different semantics.
+  //     SE Store is mostly deprecated and seldom used; dropping the
+  //     mapping prevents misleading "channel-point redemption" alerts.
 };
 function pickGraphics(g) {
   if (!g) return { type: "image", content: { src: "", loop: false, volume: 1 } };
@@ -3399,25 +3532,48 @@ var SE_DEFAULT_DURATION_BY_EVENT = {
   tip: 5,
   cheer: 5,
   raid: 8,
-  host: 8,
   merch: 8,
   purchase: 8,
-  charityCampaignDonation: 8,
-  redemption: 5
+  charityCampaignDonation: 8
+  // `redemption` intentionally omitted — see SE_EVENT_TO_LUMIA_ALERT above
+  // for why SE Store redemptions don't map to Twitch redemptions.
 };
+function cssKebabToCamel(input) {
+  const out = {};
+  for (const [k, v] of Object.entries(input)) {
+    const camel = k.replace(/-([a-z])/g, (_m, c) => c.toUpperCase());
+    out[camel] = v;
+  }
+  return out;
+}
 function buildAlertEvent(seEvent, seEventType) {
   if (!seEvent) {
     return { on: false, variations: [] };
   }
   const text = seEvent.text ?? {};
   const css = text.css ?? {};
-  const messageCss = css.message ?? {};
+  const rawMessageCss = css.message ?? {};
+  const messageCss = cssKebabToCamel(rawMessageCss);
   const highlight = css.highlights ?? {};
-  const variations = (seEvent.variations ?? []).map((variation) => buildAlertVariation(variation, seEventType)).filter((v) => v != null);
+  const shadowEnabled = text.enableShadow !== false;
+  const importedTextShadow = css["text-shadow"] ?? "rgba(0, 0, 0, 0.8) 1px 1px 1px";
+  const textShadow = shadowEnabled ? importedTextShadow : "none";
+  const marginTopRaw = Number(css["margin-top"]);
+  const pushTextUp = Number.isFinite(marginTopRaw) ? -marginTopRaw : 0;
+  const variations = (seEvent.variations ?? []).map((variation) => buildAlertVariation(variation, seEventType, seEvent)).filter((v) => v != null);
   const defaultDuration = (seEventType && SE_DEFAULT_DURATION_BY_EVENT[seEventType]) ?? 8;
   return {
     on: seEvent.enabled !== false,
-    theme: "CUSTOM",
+    // CAREFUL: Lumia's `AlertThemes.CUSTOM` enum value is lowercase
+    // `'custom'` (Overlay-UI/.../Alert.types.ts). The AlertBoxHandler
+    // runtime does a strict equality check — `copiedAlert.theme ===
+    // AlertThemes.CUSTOM` — so uppercase `'CUSTOM'` falls through to the
+    // templated (Branded / Card / Simple) code path. That path calls
+    // `replaceModuleVariables` WITHOUT the wrapVariablesWithHtml argument
+    // and the variable highlight span never gets rendered, which is
+    // exactly the "everything is white" bug imported alerts hit. The
+    // lowercase value is load-bearing.
+    theme: "custom",
     themeSettings: {
       primaryColor: null,
       accentColor: null,
@@ -3430,14 +3586,14 @@ function buildAlertEvent(seEvent, seEventType) {
       showBrandIcon: true
     },
     settings: { duration: (seEvent.duration ?? defaultDuration) * 1e3 },
-    layout: { value: translateLayout(seEvent.layout), css: {}, customCss: "" },
+    layout: { value: translateLayout(seEvent.layout), css: {}, customCss: "", pushTextUp, pushTextLeft: 0 },
     text: {
       css: {
         fontFamily: css["font-family"] ?? "Roboto",
         fontSize: css["font-size"] ?? 30,
         color: css.color ?? "#ffffff",
         fontWeight: css["font-weight"] ?? "bold",
-        textShadow: css["text-shadow"] ?? "rgba(0, 0, 0, 0.8) 1px 1px 1px",
+        textShadow,
         textAlign: css["text-align"] ?? "center"
       },
       messageCss,
@@ -3452,11 +3608,45 @@ function buildAlertEvent(seEvent, seEventType) {
     },
     animations: {
       alertEnterAnimation: seEvent.animation?.in ?? "fadeIn",
+      alertEnterAnimationDelay: 0,
       alertEnterAnimationDuration: (seEvent.animation?.inDuration ?? 1) * 1e3,
       alertExitAnimation: seEvent.animation?.out ?? "fadeOut",
+      alertExitAnimationDelay: 0,
       alertExitAnimationDuration: (seEvent.animation?.outDuration ?? 1) * 1e3,
       textEnterAnimation: text.animation ?? "",
-      textEnterAnimationDuration: 1e3
+      textEnterDelay: 0,
+      textEnterAnimationDuration: 1e3,
+      textEnterRepeat: 1,
+      // SE has no separate "text exit" semantics — the text fades out with
+      // the alert. Lumia's AlertBoxHandler reads these fields directly to
+      // schedule `setTextVisible(false)` via
+      //   duration - textExitAnimationDuration - textExitOffset
+      // If either is undefined the math evaluates to NaN, setTimeout
+      // fires immediately, and the text becomes visible for one frame
+      // before being hidden — which is exactly the bug that made
+      // imported alerts look like they had "no text at all". Defaulting
+      // to a 1s fade-out that starts 1s before the alert ends matches
+      // SE's perceived behaviour.
+      textExitAnimation: "fadeOut",
+      textExitAnimationDuration: 1e3,
+      textExitOffset: 1e3,
+      // SE wraps variables (`{name}`, `{amount}`, etc.) in a span styled by
+      // `text.css.highlights`. Color comes via `themeSettings.highlightColor`;
+      // the animation lives here. When SE *doesn't* set
+      // `highlights.animation` explicitly, variables visually inherit the
+      // text-level `text.animation` (`pulse`, `bounce`, etc.) because
+      // they're nested inside the animating text. We mirror that fallback so
+      // imports look the same as on SE — without it, common imports (where
+      // only `text.animation` is set) would have a static highlight color
+      // with no pulse, which reads as "the highlight animation didn't
+      // import" even though the color did.
+      highlightTextEnterAnimation: highlight.animation || text.animation || "",
+      highlightTextEnterDelay: 0,
+      highlightTextEnterAnimationDuration: 1e3,
+      highlightTextEnterRepeat: 1,
+      highlightTextExitAnimation: "",
+      highlightTextExitAnimationDuration: 0,
+      highlightTextExitOffset: 0
     },
     tts: {
       enabled: !!seEvent.tts?.enabled,
@@ -3467,10 +3657,12 @@ function buildAlertEvent(seEvent, seEventType) {
     variations
   };
 }
-function buildAlertVariation(v, seEventType) {
+function buildAlertVariation(v, seEventType, parentSettings) {
   const translated = translateVariationCondition(v.type ?? null, v.condition ?? null, v.requirement ?? null);
   if (!translated) return null;
-  const base = buildAlertEvent(v.settings, seEventType);
+  const { variations: _parentVariations, ...parentInheritable } = parentSettings ?? {};
+  const mergedSettings = deepMergeSeSettings(parentSettings ? parentInheritable : void 0, v.settings);
+  const base = buildAlertEvent(mergedSettings, seEventType);
   return {
     name: v.name ?? "Variation",
     on: v.enabled !== false,
@@ -3481,6 +3673,22 @@ function buildAlertVariation(v, seEventType) {
     ...base
   };
 }
+function deepMergeSeSettings(parent, variation) {
+  if (parent == null) return variation;
+  if (variation == null) return parent;
+  if (typeof parent !== "object" || typeof variation !== "object") return variation;
+  if (Array.isArray(parent) || Array.isArray(variation)) return variation;
+  const out = { ...parent };
+  for (const [k, vv] of Object.entries(variation)) {
+    if (vv === void 0) continue;
+    if (vv && typeof vv === "object" && !Array.isArray(vv) && parent[k] && typeof parent[k] === "object" && !Array.isArray(parent[k])) {
+      out[k] = deepMergeSeSettings(parent[k], vv);
+    } else {
+      out[k] = vv;
+    }
+  }
+  return out;
+}
 function mapAlertBox(widget, opts = {}) {
   const v = widget.variables ?? {};
   const events = {};
@@ -3509,6 +3717,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";
 }
@@ -3518,8 +3729,11 @@ function mapGoal(widget) {
   return buildUnit(widget, "goal", {
     content: {
       version: 1,
-      // Matches GoalTypes enum in components/Modules/Views/Goal/types.ts.
-      type: "bar",
+      // `slim` reproduces SE's default goal look — label above a thin
+      // track, with `0` / `goalAmount` anchoring the bar's edges and the
+      // live `current` floating at the percentage position. See
+      // components/Modules/Views/Goal/types.ts:GoalTypes.SLIM.
+      type: "slim",
       label: translateSeText(v.title ?? "Goal"),
       subLabel: "",
       // The Goal module renders this template literal with {{current}} + {{goal}} substituted.
@@ -3547,10 +3761,13 @@ function mapGoal(widget) {
       se_simple_design: !!v.simpleDesign
     },
     css: {
-      borderRadius: "0px",
-      borderStyle: "solid",
-      borderWidth: "0px",
-      borderColor: "transparent",
+      // `borderRadius` / `borderStyle` / `borderWidth` / `borderColor`
+      // used to be set here too, but the Goal renderer applies its own
+      // border + borderRadius via inline `style={…}` on the .goal-bar
+      // div (see Goal/index.tsx:123,127,155) sourced from
+      // `content.border` and `content.borderRadius`. Writing them to
+      // module.css just plopped useless transparent-0px rules on the
+      // outer .overlay-module wrapper.
       lineHeight: 1,
       fontSize: 30,
       textAlign: "center",
@@ -3609,97 +3826,115 @@ 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 mapChatboxTheme(seTheme) {
+  const t = (seTheme ?? "").toString().toLowerCase();
+  if (!t || t === "default") return "simple";
+  if (t.includes("flipin") || t.includes("bubble") || t.includes("bubbly")) return "bubbly";
+  if (t.includes("glass") || t.includes("transparent")) return "glass";
+  if (t.includes("boxy") || t.includes("checker")) return "boxy";
+  if (t.includes("basic")) return "basic";
+  return "simple";
+}
+function paddingShorthand(message) {
+  const pick = (key) => {
+    const raw = message?.[key];
+    if (raw == null || raw === "") return null;
+    const n = typeof raw === "number" ? raw : parseFloat(String(raw));
+    return Number.isFinite(n) ? n : null;
+  };
+  const t = pick("padding-top");
+  const r = pick("padding-right");
+  const b = pick("padding-bottom");
+  const l = pick("padding-left");
+  if (t == null && r == null && b == null && l == null) return void 0;
+  const px = (n) => `${n ?? 0}px`;
+  return `${px(t)} ${px(r)} ${px(b)} ${px(l)}`;
+}
 function mapChatbox(widget) {
   const v = widget.variables ?? {};
-  const fadeOutSeconds = typeof v.fadeOut === "number" ? v.fadeOut : 0;
+  const textCss = widget.text?.css ?? {};
+  const messageCss = textCss.message ?? {};
+  const fadeOutSeconds = typeof v.fadeOut === "number" ? v.fadeOut : v.fadeOut === true ? 30 : 0;
+  const messagePadding = paddingShorthand(messageCss);
+  const DEFAULT_CHATBOX_FONT_SIZE = 14;
+  const moduleCss = {};
+  if (textCss["font-family"] != null) moduleCss.fontFamily = textCss["font-family"];
+  moduleCss.fontSize = textCss["font-size"] != null ? textCss["font-size"] : DEFAULT_CHATBOX_FONT_SIZE;
+  if (textCss["color"] != null) moduleCss.color = textCss["color"];
+  if (textCss["font-weight"] != null) moduleCss.fontWeight = textCss["font-weight"];
+  if (textCss["text-shadow"] != null) moduleCss.textShadow = textCss["text-shadow"];
+  if (textCss["text-align"] != null) moduleCss.textAlign = textCss["text-align"];
+  if (textCss["line-height"] != null) moduleCss.lineHeight = textCss["line-height"];
+  if (messagePadding) moduleCss.padding = messagePadding;
+  const DEFAULT_CHATBOX_BG = "#1e1e1e";
+  const messageBackground = typeof messageCss["background"] === "string" && messageCss["background"].length > 0 ? messageCss["background"] : DEFAULT_CHATBOX_BG;
+  moduleCss.background = messageBackground;
+  const messageFontFamily = typeof messageCss["font-family"] === "string" && messageCss["font-family"].length > 0 ? messageCss["font-family"] : void 0;
+  const highlightBackground = v.highlight && typeof v.highlight === "object" && typeof v.highlight["background"] === "string" ? v.highlight["background"] : void 0;
+  const accentColor = highlightBackground && highlightBackground.length > 0 ? highlightBackground : void 0;
   return buildUnit(widget, "chatbox", {
+    // Visual styling (font / color / padding etc) lives on module.css, not
+    // content. Lumia's TextStyle settings panel + the chatbox renderer both
+    // read from here.
+    css: moduleCss,
     content: {
-      theme: v.theme ?? "default",
+      theme: mapChatboxTheme(v.theme),
       fadeOutAfterDelay: fadeOutSeconds > 0,
       fadeOutDelayTime: fadeOutSeconds,
+      // Defaults Lumia's chatbox renderer + UI expect on every module.
+      // Without these the chatbox silently dropped messages (the
+      // `ignoredStreamingSites` truthy gate), rendered in the wrong
+      // theme (no theme → blank list), or showed missing controls in
+      // settings. `ignoredList` carries SE's per-user ignore list across.
+      ignoredList: Array.isArray(v.ignored) ? v.ignored : [],
+      ignoredStreamingSites: [],
+      horizontal: false,
+      reverseFlow: false,
+      hideAlerts: false,
+      hideAlertMessage: false,
       showAvatar: true,
-      // SE `messageDelay` (between-message delay) and `delay` (initial delay) have no
-      // Lumia equivalent today — kept as provenance so users can wire them later if
-      // Lumia adds the feature.
+      showBadges: true,
+      showEmotes: true,
+      showSiteIcon: true,
+      showTimestamp: false,
+      breakLine: false,
+      hyperClickableLinks: true,
+      clickableChatterProfiles: true,
+      previewMediaInChat: true,
+      maxItemsToShow: 20,
+      removeAfter: 3e4,
+      itemGap: 8,
+      borderRadius: "10px",
+      bgOpacity: 0.4,
+      animations: {
+        enterAnimation: "fadeIn",
+        exitAnimation: "fadeOut",
+        enterAnimationDuration: 1e3,
+        exitAnimationDuration: 1e3,
+        enterAnimationDelay: 0,
+        exitAnimationDelay: 0
+      },
+      // Carry the SE message-level font override and the streamer's
+      // accent color across so the imported chatbox looks right at
+      // first paint. Background lives on `module.css.background`
+      // above — `content.background` was a dead write the renderer
+      // never read.
+      ...messageFontFamily ? { messageFontFamily } : {},
+      ...accentColor ? {
+        chatboxStreamingSite: {
+          twitch: { themeConfig: { primaryColor: accentColor, showUsernameColors: true } }
+        }
+      } : {},
+      // SE-only fields preserved as provenance — no native Lumia equivalent.
+      // `delay` / `messageDelay` (initial + per-message hold), and the
+      // raw highlight block in case a future Lumia feature wants the
+      // fine-grained styling.
       se_message_delay: v.messageDelay,
       se_initial_delay: v.delay,
-      // SE `ignored` (per-user ignore) and `highlight` (per-user emphasis) likewise
-      // have no Lumia equivalent — preserved as provenance only.
-      se_ignored_users: v.ignored,
-      se_highlight_users: v.highlight
+      se_highlight_users: v.highlight,
+      se_text_css: textCss
     }
   });
 }
@@ -3828,7 +4063,7 @@ var CREDITS_DEFAULT_EVENTS_TO_SHOW = {
 };
 function mapCredits(widget) {
   const v = widget.variables ?? {};
-  const itemGap = typeof v.padding === "number" ? v.padding : void 0;
+  const itemGap = typeof v.padding === "number" ? v.padding : 8;
   const reverseFlow = v.direction === "bottom";
   return buildUnit(widget, "credits", {
     content: {
@@ -3849,13 +4084,38 @@ function mapCredits(widget) {
     }
   });
 }
+function inferSlideshowMediaType(mime, url) {
+  if (typeof mime === "string") {
+    if (mime.startsWith("video/")) return "video";
+    if (mime.startsWith("image/")) return "image";
+  }
+  const ext = url.split("?")[0].split("#")[0].split(".").pop()?.toLowerCase() ?? "";
+  if (["mp4", "webm", "mov", "m4v", "ogv"].includes(ext)) return "video";
+  return "image";
+}
+function nameFromUrl(url) {
+  try {
+    const path = url.split("?")[0].split("#")[0];
+    return decodeURIComponent(path.split("/").pop() ?? url);
+  } catch {
+    return url;
+  }
+}
 function mapSlideshow(widget) {
   const v = widget.variables ?? {};
-  const sources = (v.images ?? []).map((i) => typeof i === "string" ? i : i.src ?? "").filter(Boolean);
+  const items = (v.images ?? []).map((raw) => {
+    const url = typeof raw === "string" ? raw : raw.url ?? raw.src ?? "";
+    if (!url) return null;
+    return {
+      type: inferSlideshowMediaType(typeof raw === "object" ? raw?.type : void 0, url),
+      src: url,
+      name: nameFromUrl(url)
+    };
+  }).filter((item) => item !== null);
   const seAnim = typeof v.animation === "object" && v.animation !== null ? v.animation : {};
   return buildUnit(widget, "slideshow", {
     content: {
-      items: sources.map((src) => ({ src })),
+      src: items,
       // `interval` of 0 = "rapid cycle" in SE (no delay between images); Lumia's
       // `imageDuration` is the total ms per image. Distinguish three cases:
       //   - undefined → use 5000ms default
@@ -3866,7 +4126,10 @@ function mapSlideshow(widget) {
       loopDelay: 0,
       delay: 0,
       playAudio: !!v.playAudio,
-      random: !!v.random,
+      // Lumia's renderer reads `content.shuffle` (Slideshow/index.tsx:21);
+      // mirroring SE's `random` to that name keeps "play in random order"
+      // working out of the box.
+      shuffle: !!v.random,
       animation: {
         enterAnimation: typeof v.animation === "string" ? v.animation : seAnim.in ?? "fadeIn",
         exitAnimation: typeof v.animation === "string" ? v.animation : seAnim.out ?? "fadeOut",
@@ -3982,15 +4245,69 @@ 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",
   cheer: "twitch-bits",
   raid: "twitch-raid",
-  host: "twitch-host",
-  tip: "streamelements-donation",
-  purchase: "streamlabs-merch",
-  embers: "youtube-superchat"
+  tip: "streamelements-donation"
+  // NOTE — three SE events intentionally NOT mapped:
+  //   • `host`     → previously `twitch-host`, which doesn't exist in
+  //                  LumiaAlertValues (verified). Twitch deprecated hosting
+  //                  in 2022 so the event never fires anyway.
+  //   • `purchase` → previously `streamlabs-merch`, which is deprecated. The
+  //                  main Alert Box mapper routes merch/purchase to
+  //                  `fourthwall-shopOrder`; keep Kappagen consistent by
+  //                  dropping the legacy SL path rather than splitting
+  //                  emoji emotion between two competing alert keys.
+  //   • `embers`   → previously `youtube-superchat`, which is wrong on both
+  //                  ends: embers were a deprecated Twitch paid-emote
+  //                  feature unrelated to YouTube super chats.
+  // All three drop silently; the rest of the widget (size, spawn zone,
+  // per-event flags for the remaining events) still imports.
 };
 function mapKappagen(widget) {
   const v = widget.variables ?? {};
@@ -4125,6 +4442,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 +4528,293 @@ 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 usable = variations.filter((v) => typeof v?.src === "string" && v.src.length > 0);
+    const flagged = usable.filter((v) => v.default === true);
+    const picked = flagged.length > 0 ? flagged : usable;
+    const seenAmounts = /* @__PURE__ */ new Set();
+    const tiers = [];
+    for (const v of picked) {
+      const amount = typeof v.amount === "number" && v.amount > 0 ? v.amount : 1;
+      if (seenAmounts.has(amount)) continue;
+      seenAmounts.add(amount);
+      tiers.push({
+        minAmount: amount,
+        imageUrl: v.src,
+        scale: typeof v.cheerSize === "number" && v.cheerSize > 0 ? v.cheerSize : 1
+      });
+    }
+    tiers.sort((a, b) => a.minAmount - b.minAmount);
+    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 widgetWidth = typeof v.width === "number" && v.width > 0 ? v.width : parsePx(widget.css?.width);
+  const widgetHeight = typeof v.height === "number" && v.height > 0 ? v.height : parsePx(widget.css?.height);
+  const cupX = positionToFraction(v.cupPosition?.x, widgetWidth, 0.5);
+  const cupY = positionToFraction(v.cupPosition?.y, widgetHeight, 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));
+}
+function positionToFraction(raw, widgetDim, fallback) {
+  if (typeof raw !== "number" || !Number.isFinite(raw)) return fallback;
+  if (raw <= 1) return clamp01(raw);
+  if (typeof widgetDim !== "number" || widgetDim <= 0) return fallback;
+  return clamp01(raw / widgetDim);
+}
+function parsePx(raw) {
+  if (typeof raw === "number" && Number.isFinite(raw)) return raw;
+  if (typeof raw !== "string") return void 0;
+  const match = raw.match(/^(-?\d+(?:\.\d+)?)/);
+  if (!match) return void 0;
+  const n = Number(match[1]);
+  return Number.isFinite(n) ? n : void 0;
+}
+
+// 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";
+  const widgetHeight = parsePx2(widget.css?.height);
+  const tooShortForCard = typeof widgetHeight === "number" && widgetHeight < 140;
+  const theme = v.showImage === false || tooShortForCard ? "bar-only" : "card";
+  return buildUnit(widget, "streamboss", {
+    content: {
+      version: 1,
+      theme,
+      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"
+    }
+  });
+}
+function parsePx2(raw) {
+  if (typeof raw === "number" && Number.isFinite(raw)) return raw;
+  if (typeof raw !== "string") return void 0;
+  const match = raw.match(/^(-?\d+(?:\.\d+)?)/);
+  if (!match) return void 0;
+  const n = Number(match[1]);
+  return Number.isFinite(n) ? n : void 0;
+}
+
 // 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 +4843,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",
@@ -4242,7 +4869,6 @@ function dispatch(widget) {
   if (GOAL_TYPES.has(t)) return { unit: mapGoal(widget), status: "direct", lumiaType: "goal" };
   if (t === "se-widget-alert-box") return { unit: mapAlertBox(widget), status: "direct", lumiaType: "alert" };
   if (t === "se-widget-alert-box-merch") return { unit: mapAlertBox(widget, { onlyEvents: ["merch"] }), status: "direct", lumiaType: "alert" };
-  if (t === "se-widget-store-redemptions") return { unit: mapSingleAlert(widget, "twitch-redemption"), status: "direct", lumiaType: "alert" };
   if (t === "se-widget-donor-drive-alert") return { unit: mapSingleAlert(widget, "donordrive-donation"), status: "direct", lumiaType: "alert" };
   if (t === "se-widget-extralife-alert") return { unit: mapSingleAlert(widget, "extralife-donation"), status: "direct", lumiaType: "alert" };
   if (t === "se-widget-tiltify-alert") return { unit: mapSingleAlert(widget, "tiltify-campaignDonation"), status: "direct", lumiaType: "alert" };
@@ -4257,10 +4883,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 +5080,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 +5093,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 +5125,125 @@ 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";
+  }
+  code;
+};
+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;
+  }
+  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 +5292,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 +5303,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 +5326,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 +5344,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 +5386,154 @@ 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  height: 100%;\n  min-width: min(680px, 100%);\n  color: var(--se-text);\n  font-family: inherit;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n.se-import__shell {\n  border-radius: 0;\n  padding: 28px 48px 24px;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n}\n.se-import__header {\n  flex: 0 0 auto;\n}\nfooter.se-import-actions {\n  flex: 0 0 auto;\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  place-items: center;\n  padding: 64px 0 28px;\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n}\n@media (max-height: 760px) {\n  .se-import__shell {\n    padding: 18px 32px 16px;\n  }\n  .se-import__content {\n    padding: 32px 0 16px;\n  }\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}\nfooter.se-import-actions:not(.se-import-actions--inline) {\n  background: var(--se-bg, #17162a);\n  border-top: 1px solid rgba(255, 255, 255, 0.06);\n  margin: 0 -48px -24px;\n  padding: 16px 48px;\n}\n@media (max-height: 760px) {\n  footer.se-import-actions:not(.se-import-actions--inline) {\n    margin: 0 -32px -16px;\n    padding: 12px 32px;\n  }\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/assets/source_se.svg
+var source_se_default = 'data:image/svg+xml,<svg width="157" height="164" viewBox="0 0 157 164" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<rect x="8.5" y="9.5" width="139" height="145" fill="%23242444" stroke="%23FF4076" stroke-width="3"/>%0A<path d="M87.1229 44.9224L89.0788 48.7235C102.041 53.3686 110.947 65.8756 110.947 79.7241C110.947 97.8858 96.1663 112.658 77.9929 112.658C59.8196 112.658 45.0457 97.8858 45.0457 79.7241C45.0457 65.8684 53.9519 53.3686 66.9143 48.7235L68.8702 44.9296C53.1725 49.0337 42 63.3222 42 79.7241C42 99.5592 58.1524 115.701 78.0001 115.701C97.8479 115.701 114 99.5592 114 79.7241C114 63.3222 102.828 49.0265 87.1229 44.9224Z" fill="url(%23paint0_linear_1424_495)"/>%0A<mask id="mask0_1424_495" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="47" y="48" width="62" height="63">%0A<path d="M77.9986 110.386C94.991 110.386 108.766 96.6196 108.766 79.638C108.766 62.6563 94.991 48.8899 77.9986 48.8899C61.0061 48.8899 47.231 62.6563 47.231 79.638C47.231 96.6196 61.0061 110.386 77.9986 110.386Z" fill="white"/>%0A</mask>%0A<g mask="url(%23mask0_1424_495)">%0A<path d="M108.825 78.9093C108.651 81.2463 105.036 90.9619 100.59 90.9619C98.7853 90.9619 98.3812 88.322 98.0853 86.3602C97.2841 89.4905 91.7629 96.2563 87.6706 96.2563C80.2295 96.2563 78.4974 80.5683 77.9921 78.4766C77.4869 80.561 75.7548 96.2563 68.3137 96.2563C64.2215 96.2563 58.7002 89.4977 57.8991 86.3602C57.6031 88.322 57.2062 90.9619 55.3947 90.9619C50.9487 90.9619 47.3328 81.2463 47.1596 78.9093C46.207 80.3158 46.2214 85.9995 47.636 89.6419C52.3561 101.795 64.1782 110.429 77.9849 110.429C91.7917 110.429 103.614 101.795 108.334 89.6419C109.749 85.9995 109.763 80.3231 108.81 78.9093H108.825Z" fill="url(%23paint1_linear_1424_495)"/>%0A<path d="M77.9988 96.2998C79.2258 98.5497 81.8961 101.918 86.4719 101.918C91.0478 101.918 94.6059 97.2014 95.7968 95.2105C95.4143 96.6097 94.642 99.6032 97.132 99.6032C102.841 99.6032 106.969 90.5798 106.969 90.5798C102.466 102.178 91.1777 110.422 77.9988 110.422C64.8199 110.422 53.532 102.178 49.0283 90.5798C49.0283 90.5798 53.1567 99.6032 58.8656 99.6032C61.3628 99.6032 60.5833 96.6021 60.2008 95.2105C61.3917 97.2014 64.8343 101.918 69.5257 101.918C74.1014 101.918 76.7646 98.5428 77.9988 96.2998Z" fill="url(%23paint2_linear_1424_495)"/>%0A<path d="M85.2523 106.419C82.4448 106.419 80.2579 105.546 77.9989 104.14C75.7399 105.539 73.553 106.419 70.7455 106.419C66.4656 106.419 65.1664 105.157 63.6147 104.003C63.658 105.474 65.1592 107.552 66.7109 108.301C70.1537 109.817 74.0221 110.422 77.9989 110.422C81.9756 110.422 85.8442 109.809 89.2868 108.301C90.8385 107.544 92.3326 105.474 92.3831 104.003C90.8313 105.157 89.5323 106.419 85.2523 106.419Z" fill="url(%23paint3_linear_1424_495)"/>%0A</g>%0A<path d="M73.8428 64.7073L69.4257 74.0622C69.2453 74.4446 69.1804 74.8773 69.2525 75.3029L70.6527 83.7562C70.696 84.0303 71.1002 84.0303 71.1435 83.7562L71.9013 79.1473C72.2116 77.2359 73.2292 75.5048 74.7522 74.3003L73.8428 64.7001V64.7073Z" fill="%23FF4800"/>%0A<path d="M82.1584 64.7073L86.5755 74.0622C86.7559 74.4446 86.8208 74.8773 86.7487 75.3029L85.3485 83.7634C85.3052 84.0376 84.9082 84.0376 84.8577 83.7634L84.0999 79.1473C83.7896 77.2359 82.7719 75.5048 81.249 74.3003L82.1584 64.7001V64.7073Z" fill="%23FF4800"/>%0A<path d="M84.5241 50.0291L78.4687 38.2867C78.2739 37.9044 77.7326 37.9044 77.5305 38.2867L71.4751 50.0219C71.2226 50.5052 71.1287 51.0606 71.2081 51.5943L74.261 73.0451L73.8063 75.0503L75.4158 79.4645C75.4519 79.5655 75.5457 79.6304 75.6468 79.6304H80.3308C80.4319 79.6304 80.5257 79.5655 80.5618 79.4645L82.1712 75.0503L81.7165 73.0451L84.7695 51.5943C84.8489 51.0534 84.7551 50.5052 84.5024 50.0219L84.5241 50.0291Z" fill="url(%23paint4_linear_1424_495)"/>%0A<path d="M77.7905 69.5107L75.6397 74.8265C75.3077 75.6488 75.2427 76.5576 75.4593 77.4159L77.7544 86.605C77.8193 86.8575 78.1802 86.8575 78.2379 86.605L80.5331 77.4159C80.7495 76.5576 80.6846 75.6488 80.3526 74.8265L78.2019 69.5107C78.1225 69.3232 77.8554 69.3232 77.7832 69.5107H77.7905Z" fill="%23FF4800"/>%0A<rect width="15" height="16" fill="%23FF4076"/>%0A<rect y="148" width="15" height="16" fill="%23FF4076"/>%0A<rect x="142" width="15" height="16" fill="%23FF4076"/>%0A<rect x="142" y="148" width="15" height="16" fill="%23FF4076"/>%0A<defs>%0A<linearGradient id="paint0_linear_1424_495" x1="78.0001" y1="24.4742" x2="78.0001" y2="138.609" gradientUnits="userSpaceOnUse">%0A<stop offset="0.3" stop-color="%2300ADFF"/>%0A<stop offset="1" stop-color="%231542FF"/>%0A</linearGradient>%0A<linearGradient id="paint1_linear_1424_495" x1="77.9993" y1="79.7965" x2="77.9993" y2="120.816" gradientUnits="userSpaceOnUse">%0A<stop stop-color="%23FCE3AD"/>%0A<stop offset="0.07" stop-color="%23FCE2A4"/>%0A<stop offset="0.19" stop-color="%23FCE08B"/>%0A<stop offset="0.33" stop-color="%23FCDD64"/>%0A<stop offset="0.48" stop-color="%23FCDA32"/>%0A<stop offset="0.66" stop-color="%23F9BC22"/>%0A<stop offset="1" stop-color="%23F57700"/>%0A</linearGradient>%0A<linearGradient id="paint2_linear_1424_495" x1="77.9988" y1="90.2913" x2="77.9988" y2="113.603" gradientUnits="userSpaceOnUse">%0A<stop stop-color="%23FCD619"/>%0A<stop offset="0.35" stop-color="%23F9B811"/>%0A<stop offset="1" stop-color="%23F57700"/>%0A</linearGradient>%0A<linearGradient id="paint3_linear_1424_495" x1="77.9989" y1="101.947" x2="77.9989" y2="112.694" gradientUnits="userSpaceOnUse">%0A<stop stop-color="%23F57700"/>%0A<stop offset="1" stop-color="%23FF4800"/>%0A</linearGradient>%0A<linearGradient id="paint4_linear_1424_495" x1="77.9996" y1="38.0054" x2="77.9996" y2="92.2167" gradientUnits="userSpaceOnUse">%0A<stop stop-color="%23E4E4E4"/>%0A<stop offset="0.88" stop-color="%23B6B8B8"/>%0A</linearGradient>%0A</defs>%0A</svg>%0A';
+
+// src/assets/source_lumia.svg
+var source_lumia_default = 'data:image/svg+xml,<svg width="157" height="164" viewBox="0 0 157 164" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<rect x="8.5" y="9.5" width="139" height="145" fill="%23242444" stroke="%23FF4076" stroke-width="3"/>%0A<path d="M81.877 128.851C81.877 131.843 79.5456 132.572 76.6689 132.572C73.7923 132.572 71.4609 131.843 71.4609 128.851H81.877Z" fill="%23FF4076"/>%0A<path d="M77.3916 32C84.8793 32 92.6433 34.2919 98.5977 39.2305C104.635 44.2381 108.604 51.8052 108.604 61.8105C108.603 73.1268 103.496 81.0627 98.6982 88.5176C98.5049 88.8177 98.3117 89.1179 98.1201 89.417C93.1275 97.1931 88.4496 104.881 88.0957 116.606C88.0422 118.373 86.5954 119.776 84.8281 119.776H73.832L74.0488 120.9H82.7236C84.5288 120.901 85.9921 122.364 85.9922 124.169C85.9922 125.975 84.5288 127.438 82.7236 127.438H71.3496C69.7828 127.438 68.4363 126.326 68.1396 124.788L66.6631 117.126C66.4786 116.168 66.7307 115.178 67.3516 114.426C67.9726 113.674 68.8977 113.238 69.873 113.238H81.7549C82.8573 101.346 87.9524 93.1519 92.6182 85.8848C92.7267 85.7157 92.8346 85.5466 92.9424 85.3789C97.9058 77.6522 102.065 71.1771 102.065 61.8105C102.065 53.7021 98.9254 47.9983 94.4229 44.2637C89.8371 40.46 83.6294 38.5381 77.3916 38.5381C65.8229 38.5382 53.5382 46.8207 53.5381 62.1387C53.5381 70.5737 57.3337 78.2378 61.7773 85.8975C62.3932 86.9591 63.0286 88.0311 63.665 89.1064C65.2574 91.7971 66.8614 94.5084 68.2139 97.1221C68.5532 97.7775 68.8826 98.4382 69.1982 99.1035C69.7167 98.1764 70.2716 97.2596 70.8477 96.3564C73.0295 92.9368 75.7271 89.4027 78.3623 85.9502C78.789 85.3914 79.2138 84.8343 79.6348 84.2803C82.7122 80.2309 85.6068 76.2986 87.7383 72.4648C89.8803 68.6123 91.0742 65.165 91.0742 62.084C91.0742 58.1367 89.6207 55.1129 87.3291 53.0479C85.0029 50.9516 81.5869 49.6475 77.3916 49.6475C70.0529 49.6475 64.5294 55.5289 64.5293 62.084C64.5293 64.4095 65.0263 68.0042 66.2227 70.8975C67.4926 73.9687 68.9334 74.959 70.2285 74.959C71.187 74.9589 71.7005 74.6624 72.085 74.2744C72.5587 73.7963 73.0139 72.9773 73.3662 71.7422C74.0688 69.2783 74.0688 66.3016 74.0684 64.2012V64.0537C74.0686 62.2485 75.5317 60.7852 77.3369 60.7852C79.1422 60.7852 80.6062 62.2485 80.6064 64.0537V65.2021C80.5968 67.3108 80.4956 70.5813 79.6533 73.5352C79.1375 75.3439 78.2704 77.3208 76.7295 78.876C75.0993 80.5211 72.9061 81.497 70.2285 81.4971C64.7429 81.4971 61.6996 77.0691 60.1807 73.3955C58.5882 69.5443 57.9912 65.0667 57.9912 62.084C57.9913 51.8935 66.4665 43.1094 77.3916 43.1094C82.9298 43.1094 87.9897 44.8418 91.7061 48.1904C95.4567 51.5704 97.6123 56.3999 97.6123 62.084C97.6123 66.7738 95.8263 71.3721 93.4521 75.6426C91.0671 79.9317 87.9082 84.2005 84.8408 88.2363C84.4031 88.8123 83.9677 89.3835 83.5361 89.9492C80.8874 93.4208 78.3814 96.705 76.3604 99.873C73.9874 103.593 72.5611 106.741 72.2754 109.389C72.0981 111.031 70.7238 112.283 69.0723 112.307C67.4206 112.33 66.0104 111.118 65.7861 109.481C65.3962 106.635 64.1894 103.57 62.4072 100.126C61.1449 97.6868 59.6908 95.2302 58.1406 92.6113C57.4828 91.4997 56.8073 90.3588 56.1221 89.1777C51.6525 81.4736 47 72.474 47 62.1387C47.0001 42.4332 63.0409 32.0001 77.3916 32Z" fill="%23FF4076"/>%0A<path d="M71.6338 65.5146C72.1863 65.262 72.839 65.5052 73.0918 66.0576C73.3445 66.6102 73.1013 67.2627 72.5488 67.5156L68.7217 69.2666C68.1692 69.5191 67.5155 69.2768 67.2627 68.7246C67.0099 68.1719 67.2531 67.5186 67.8057 67.2656L71.6338 65.5146Z" fill="%23FF4076"/>%0A<path d="M82.208 65.5684C82.4316 65.0036 83.0708 64.7267 83.6357 64.9502L87.5498 66.5C88.1146 66.7236 88.3914 67.3628 88.168 67.9277C87.9445 68.4926 87.3052 68.7691 86.7402 68.5459L82.8262 66.9961C82.2611 66.7726 81.9845 66.1333 82.208 65.5684Z" fill="%23FF4076"/>%0A<path d="M66.9834 60.3623C67.1772 59.7865 67.8011 59.4771 68.377 59.6709L72.3662 61.0127C72.942 61.2065 73.2522 61.8304 73.0586 62.4062C72.8649 62.982 72.2408 63.2921 71.665 63.0986L67.6758 61.7559C67.0999 61.5621 66.7896 60.9382 66.9834 60.3623Z" fill="%23FF4076"/>%0A<path d="M86.4482 58.8301C86.9968 58.5686 87.6533 58.8014 87.915 59.3496C88.1767 59.8979 87.9437 60.5547 87.3955 60.8164L83.5977 62.6299C83.049 62.8917 82.3923 62.6587 82.1309 62.1104C81.8692 61.562 82.1012 60.9053 82.6494 60.6436L86.4482 58.8301Z" fill="%23FF4076"/>%0A<path d="M73.084 53.8389C73.6539 53.6282 74.2874 53.9193 74.498 54.4893L75.958 58.4395C76.1686 59.0093 75.8775 59.6428 75.3076 59.8535C74.7377 60.0642 74.1042 59.7721 73.8936 59.2021L72.4336 55.252C72.2231 54.6822 72.5143 54.0496 73.084 53.8389Z" fill="%23FF4076"/>%0A<path d="M80.2275 54.2715C80.4366 53.701 81.0691 53.4072 81.6396 53.6162C82.2102 53.8253 82.5031 54.4578 82.2939 55.0283L80.8447 58.9824C80.6357 59.5529 80.0041 59.8458 79.4336 59.6367C78.8631 59.4277 78.5702 58.7961 78.7793 58.2256L80.2275 54.2715Z" fill="%23FF4076"/>%0A<rect width="15" height="16" fill="%23FF4076"/>%0A<rect y="148" width="15" height="16" fill="%23FF4076"/>%0A<rect x="142" width="15" height="16" fill="%23FF4076"/>%0A<rect x="142" y="148" width="15" height="16" fill="%23FF4076"/>%0A</svg>%0A';
+
+// src/assets/audio_file.svg
+var audio_file_default = 'data:image/svg+xml,<svg width="23" height="29" viewBox="0 0 23 29" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7675 8.5178V25.5534C22.7675 26.3064 22.4678 27.0287 21.9341 27.5611C21.4004 28.0936 20.6765 28.3925 19.9217 28.3926H2.84579C2.09106 28.3925 1.36706 28.0936 0.833383 27.5611C0.299704 27.0287 0 26.3064 0 25.5534V2.83914C3.46516e-05 2.08616 0.299694 1.36386 0.833383 0.831425C1.36706 0.298996 2.09106 4.12048e-05 2.84579 0H14.2297L22.7675 8.5178ZM15.5614 14.0434C15.4739 14.0241 15.383 14.0247 15.2956 14.045L9.28308 15.4475C9.1509 15.4784 9.03315 15.5534 8.94878 15.6597C8.86444 15.766 8.81842 15.8978 8.81843 16.0335V21.3474C8.45759 21.2198 8.06549 21.2104 7.6989 21.3203C7.33226 21.4304 7.01003 21.6543 6.77901 21.9596C6.54799 22.2648 6.42011 22.6357 6.4138 23.0184C6.4075 23.4012 6.52298 23.776 6.74378 24.0886C6.96461 24.4013 7.27932 24.6355 7.64215 24.7576C8.00495 24.8797 8.39716 24.8834 8.76206 24.7678C9.12698 24.6522 9.44546 24.4232 9.67178 24.1145C9.8981 23.8057 10.0205 23.433 10.0209 23.0501V18.9157L14.831 17.7934V20.1445C14.47 20.0168 14.0778 20.0074 13.7111 20.1174C13.3444 20.2275 13.0222 20.4514 12.7912 20.7567C12.5603 21.0619 12.4326 21.4328 12.4264 21.8155C12.4201 22.1983 12.5358 22.5734 12.7567 22.8861C12.9777 23.1987 13.2923 23.4328 13.6551 23.5547C14.018 23.6766 14.4105 23.6799 14.7754 23.5641C15.1403 23.4483 15.459 23.2193 15.6851 22.9104C15.9112 22.6015 16.0333 22.2288 16.0335 21.8461C16.0335 21.8032 16.032 21.7605 16.0292 21.7184C16.032 21.694 16.0335 21.6697 16.0335 21.6456V14.6306C16.0335 14.5401 16.013 14.4506 15.9736 14.3691C15.9343 14.2876 15.8769 14.216 15.8061 14.1597L15.8022 14.1569C15.7315 14.1017 15.649 14.0628 15.5614 14.0434ZM12.8068 9.93757H20.633L12.8068 2.12945V9.93757Z" fill="white"/>%0A</svg>%0A';
+
+// src/assets/img_file.svg
+var img_file_default = 'data:image/svg+xml,<svg width="23" height="29" viewBox="0 0 23 29" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M11.7445 13.2276C13.0784 13.2276 14.0388 13.2283 14.7699 13.3267C15.4894 13.4235 15.9266 13.6082 16.2504 13.9322C16.5743 14.2565 16.7591 14.694 16.8559 15.4135C16.9544 16.1445 16.9554 17.1047 16.9554 18.4385V19.8415C16.9554 21.1754 16.9547 22.1358 16.8563 22.8669C16.7595 23.5864 16.5748 24.0236 16.2508 24.3474C15.9265 24.6713 15.489 24.8561 14.7695 24.9529C14.0385 25.0514 13.0784 25.0524 11.7445 25.0524H10.3415C9.00759 25.0524 8.04722 25.0517 7.31607 24.9533C6.59659 24.8565 6.1594 24.6718 5.83564 24.3478C5.51168 24.0235 5.32694 23.586 5.23007 22.8665C5.13166 22.1355 5.13065 21.1754 5.13065 19.8415V18.4385C5.13065 17.1046 5.13135 16.1442 5.22968 15.4131C5.32646 14.6936 5.51124 14.2564 5.83524 13.9326C6.15948 13.6087 6.597 13.4239 7.31646 13.3271C8.04751 13.2287 9.00765 13.2276 10.3415 13.2276H11.7445ZM8.28842 17.3961C7.82545 17.4347 7.44577 17.667 7.10626 17.9398C6.82149 18.1692 6.50307 18.4799 6.13274 18.8496V19.8415C6.13274 20.2034 6.13329 20.5335 6.1347 20.8314L6.91641 20.0497C7.40027 19.5659 7.72283 19.2453 7.98583 19.0328C8.24538 18.8237 8.35792 18.7979 8.40703 18.7944C8.53557 18.7835 8.66468 18.8079 8.78007 18.8656C8.82286 18.8874 8.91773 18.9527 9.08187 19.2445C9.2474 19.5391 9.42752 19.9572 9.69683 20.5856L9.73402 20.6729L9.74615 20.6995C9.85061 20.9435 9.94729 21.1693 10.044 21.3474C10.1458 21.5332 10.2932 21.7566 10.5416 21.9103C10.8341 22.0915 11.1831 22.1586 11.5221 22.0993C11.8097 22.0481 12.0292 21.8962 12.1927 21.7615C12.3484 21.6324 12.5226 21.4582 12.7106 21.2702L12.7313 21.2495C13.0294 20.9514 13.2231 20.7583 13.3823 20.6244C13.5351 20.4954 13.6068 20.4645 13.6461 20.4525C13.7783 20.4126 13.9194 20.4126 14.0516 20.4525C14.0909 20.4645 14.1626 20.4954 14.3155 20.6244C14.4747 20.7583 14.6682 20.9512 14.9668 21.2499L15.9141 22.1972C15.9464 21.6935 15.9519 21.0675 15.9533 20.2517L15.9392 20.238C15.6656 19.9645 15.4301 19.7285 15.2197 19.551C14.9973 19.3637 14.7552 19.1989 14.4564 19.1091C14.0602 18.9896 13.6375 18.9896 13.2413 19.1091C12.9425 19.1996 12.7011 19.3637 12.478 19.551C12.2676 19.7285 12.0321 19.9649 11.7593 20.2384L11.739 20.258C11.5237 20.4726 11.3971 20.5989 11.2982 20.6796L11.2841 20.6917L11.2759 20.6756C11.2149 20.5634 11.1434 20.3997 11.0234 20.1198L10.9862 20.0329L10.9706 19.9965C10.7209 19.4143 10.5113 18.9245 10.3044 18.5556C10.0904 18.1761 9.82392 17.819 9.40873 17.6114C9.06229 17.4379 8.67451 17.3634 8.28842 17.3961ZM14.1996 14.9312C13.6185 14.9312 13.1474 15.4023 13.1474 15.9834C13.1474 16.5645 13.6185 17.0356 14.1996 17.0356C14.7807 17.0356 15.2518 16.5645 15.2518 15.9834C15.2518 15.4023 14.7807 14.9312 14.1996 14.9312Z" fill="white"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7675 8.5178V25.5534C22.7675 26.3064 22.4678 27.0287 21.9341 27.5611C21.4004 28.0936 20.6765 28.3925 19.9217 28.3926H2.84579C2.09106 28.3925 1.36706 28.0936 0.833383 27.5611C0.299704 27.0287 0 26.3064 0 25.5534V2.83914C3.46516e-05 2.08616 0.299694 1.36386 0.833383 0.831425C1.36706 0.298996 2.09106 4.12048e-05 2.84579 0H14.2297L22.7675 8.5178ZM10.3415 12.426C9.03021 12.426 8.00652 12.4252 7.2096 12.5324C6.40115 12.6413 5.76631 12.868 5.26843 13.3654C4.77051 13.863 4.54419 14.4978 4.43544 15.3062C4.32825 16.1032 4.32897 17.1273 4.32897 18.4385V19.8415C4.32897 21.1528 4.32816 22.1765 4.43544 22.9734C4.54428 23.7819 4.77099 24.4167 5.26843 24.9146C5.766 25.4125 6.40083 25.6388 7.20921 25.7476C8.00621 25.8548 9.03026 25.854 10.3415 25.854H11.7445C13.0558 25.854 14.0795 25.8549 14.8764 25.7476C15.6849 25.6387 16.3197 25.412 16.8176 24.9146C17.3155 24.417 17.5418 23.7822 17.6506 22.9738C17.7578 22.1768 17.757 21.1528 17.757 19.8415V18.4385C17.757 17.1272 17.7578 16.1035 17.6506 15.3066C17.5417 14.4982 17.315 13.8633 16.8176 13.3654C16.32 12.8675 15.6852 12.6412 14.8768 12.5324C14.0798 12.4253 13.0557 12.426 11.7445 12.426H10.3415ZM12.8068 9.93757H20.633L12.8068 2.12945V9.93757Z" fill="white"/>%0A</svg>%0A';
+
+// src/assets/video_file.svg
+var video_file_default = 'data:image/svg+xml,<svg width="23" height="29" viewBox="0 0 23 29" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7675 8.5178V25.5534C22.7675 26.3064 22.4678 27.0287 21.9341 27.5611C21.4004 28.0936 20.6765 28.3925 19.9217 28.3926H2.84579C2.09106 28.3925 1.36706 28.0936 0.833383 27.5611C0.299704 27.0287 0 26.3064 0 25.5534V2.83914C3.46516e-05 2.08616 0.299694 1.36386 0.833383 0.831425C1.36706 0.298996 2.09106 4.12048e-05 2.84579 0H14.2297L22.7675 8.5178ZM7.89972 14.6224C7.44912 14.6224 7.01703 14.8013 6.69838 15.1199C6.37968 15.4386 6.20046 15.8709 6.20046 16.3216V20.9563C6.20046 21.407 6.37968 21.8393 6.69838 22.158C7.01703 22.4766 7.44912 22.6555 7.89972 22.6556H13.1525C13.6032 22.6556 14.0355 22.4767 14.3542 22.158C14.6729 21.8393 14.8517 21.407 14.8517 20.9563V19.9714L16.9648 21.8531C17.4622 22.296 18.2506 21.9425 18.2506 21.2757V15.7748C18.2506 15.1074 17.4622 14.7545 16.9648 15.1974L14.8517 17.0791V16.3216C14.8517 15.8709 14.6729 15.4386 14.3542 15.1199C14.0355 14.8012 13.6032 14.6224 13.1525 14.6224H7.89972ZM12.8068 9.93757H20.633L12.8068 2.12945V9.93757Z" fill="white"/>%0A</svg>%0A';
+
+// src/assets/sound.svg
+var sound_default = 'data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M18.622 3.21699C18.7399 3.31063 18.8351 3.42968 18.9005 3.56526C18.966 3.70084 19 3.84944 19 3.99999V15.667C19 15.707 18.9977 15.7473 18.993 15.788C18.9977 15.858 19 15.9287 19 16C18.9997 16.6368 18.7967 17.2569 18.4206 17.7707C18.0444 18.2844 17.5145 18.6652 16.9076 18.8578C16.3007 19.0505 15.6482 19.045 15.0446 18.8422C14.441 18.6394 13.9176 18.2498 13.5501 17.7298C13.1826 17.2098 12.9901 16.5864 13.0004 15.9497C13.0107 15.313 13.2234 14.6961 13.6076 14.1883C13.9918 13.6805 14.5276 13.3082 15.1375 13.1251C15.7473 12.942 16.3997 12.9577 17 13.17V9.25999L9 11.127V18.003C8.99924 18.6397 8.79595 19.2596 8.41953 19.7731C8.04312 20.2866 7.5131 20.667 6.90616 20.8593C6.29923 21.0516 5.64684 21.0458 5.0434 20.8428C4.43996 20.6398 3.91676 20.2501 3.54948 19.73C3.1822 19.2099 2.98991 18.5865 3.00041 17.9499C3.01091 17.3133 3.22367 16.6966 3.60789 16.1889C3.99212 15.6813 4.5279 15.309 5.13771 15.126C5.74752 14.943 6.39973 14.9588 7 15.171V6.33299C6.99997 6.10722 7.07635 5.88808 7.2167 5.71124C7.35705 5.53439 7.55312 5.41024 7.773 5.35899L17.773 3.02599C17.9183 2.99221 18.0694 2.99139 18.2151 3.02357C18.3608 3.05576 18.4974 3.12013 18.615 3.21199L18.622 3.21699Z" fill="white"/>%0A</svg>%0A';
+
+// src/assets/img.svg
+var img_default = 'data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M3.172 3.17199C2 4.34299 2 6.22899 2 9.99999V14C2 17.771 2 19.657 3.172 20.828C4.344 21.999 6.229 22 10 22H14C17.771 22 19.657 22 20.828 20.828C21.999 19.656 22 17.771 22 14V9.99999C22 7.15999 22 5.38999 21.5 4.18899V17C21.0246 17.0001 20.5538 16.9065 20.1146 16.7246C19.6753 16.5427 19.2762 16.2761 18.94 15.94L18.188 15.188C17.466 14.466 17.106 14.106 16.697 13.954C16.2474 13.7868 15.7526 13.7868 15.303 13.954C14.894 14.106 14.533 14.466 13.813 15.188L13.699 15.301C13.114 15.886 12.821 16.179 12.51 16.233C12.2685 16.2756 12.0197 16.2279 11.811 16.099C11.543 15.933 11.38 15.552 11.053 14.791L11 14.667C10.25 12.917 9.876 12.043 9.222 11.715C8.89266 11.5499 8.52411 11.4789 8.157 11.51C7.428 11.572 6.756 12.245 5.41 13.59L3.5 15.5V2.88699C3.384 2.97299 3.27467 3.06799 3.172 3.17199Z" fill="white"/>%0A<mask id="mask0_1424_377" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20">%0A<path d="M2 10C2 6.229 2 4.343 3.172 3.172C4.344 2.001 6.229 2 10 2H14C17.771 2 19.657 2 20.828 3.172C21.999 4.344 22 6.229 22 10V14C22 17.771 22 19.657 20.828 20.828C19.656 21.999 17.771 22 14 22H10C6.229 22 4.343 22 3.172 20.828C2.001 19.656 2 17.771 2 14V10Z" fill="white"/>%0A</mask>%0A<g mask="url(%23mask0_1424_377)">%0A<path d="M2 10C2 6.229 2 4.343 3.172 3.172C4.344 2.001 6.229 2 10 2H14C17.771 2 19.657 2 20.828 3.172C21.999 4.344 22 6.229 22 10V14C22 17.771 22 19.657 20.828 20.828C19.656 21.999 17.771 22 14 22H10C6.229 22 4.343 22 3.172 20.828C2.001 19.656 2 17.771 2 14V10Z" stroke="white" stroke-width="4"/>%0A</g>%0A<path d="M15 11C16.1046 11 17 10.1046 17 9C17 7.89543 16.1046 7 15 7C13.8954 7 13 7.89543 13 9C13 10.1046 13.8954 11 15 11Z" fill="white"/>%0A</svg>%0A';
+
+// src/assets/video.svg
+var video_default = 'data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M5 5.5C4.27065 5.5 3.57118 5.78973 3.05546 6.30546C2.53973 6.82118 2.25 7.52065 2.25 8.25V15.75C2.25 16.4793 2.53973 17.1788 3.05546 17.6945C3.57118 18.2103 4.27065 18.5 5 18.5H13.5C14.2293 18.5 14.9288 18.2103 15.4445 17.6945C15.9603 17.1788 16.25 16.4793 16.25 15.75V14.156L19.669 17.201C20.474 17.918 21.75 17.346 21.75 16.267V7.365C21.75 6.285 20.474 5.714 19.669 6.431L16.25 9.476V8.25C16.25 7.52065 15.9603 6.82118 15.4445 6.30546C14.9288 5.78973 14.2293 5.5 13.5 5.5H5Z" fill="white"/>%0A</svg>%0A';
+
 // 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 })
-  ] });
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+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 +5549,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 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 }) })
-  ] });
-}
-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 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 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 } }),
+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(Fragment4, { 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(Fragment4, { 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,
+  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 }) })
+    /* @__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 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"
-          }
-        )
+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(Fragment4, { 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(Fragment4, { 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." })
       ] }),
-      row.error && /* @__PURE__ */ jsx13("div", { style: { marginTop: 4, color: "#fca5a5" }, children: row.error })
-    ] }, row.url)) })
+      /* @__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 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 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." })
+        ] })
       ] })
     ] }),
-    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: [
+    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 sound_default;
+  if (ext === "webm" || ext === "mp4" || ext === "mov") return video_default;
+  return img_default;
+}
+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: source_se_default, alt: "" }) }),
+    /* @__PURE__ */ jsxs7("div", { className: "se-import-transfer__files", children: [
+      /* @__PURE__ */ jsx13(
+        "img",
+        {
+          className: "se-import-transfer__file se-import-transfer__file--one",
+          src: img_file_default,
+          alt: ""
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        "img",
+        {
+          className: "se-import-transfer__file se-import-transfer__file--two",
+          src: audio_file_default,
+          alt: ""
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        "img",
+        {
+          className: "se-import-transfer__file se-import-transfer__file--three",
+          src: img_file_default,
+          alt: ""
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        "img",
+        {
+          className: "se-import-transfer__file se-import-transfer__file--four",
+          src: video_file_default,
+          alt: ""
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx13("div", { className: "se-import-transfer__source se-import-transfer__source--lumia", children: /* @__PURE__ */ jsx13("img", { src: source_lumia_default, 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 && /* 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__ */ 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" })
+    /* @__PURE__ */ jsx13("div", { className: "se-import-actions se-import-actions--inline", children: state === "generated" ? /* @__PURE__ */ jsxs7(Fragment4, { 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(Fragment4, { children: [
+      !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 +6456,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 +6624,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 +6708,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 +6726,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 +6744,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 +6782,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 +6828,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 +6862,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 +6874,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 +6907,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("common.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 +7257,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 +7373,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 +7593,8 @@ export {
   LSVariableInputProvider,
   MEDIA_PREVIEW_USER_LEVEL_VALUES,
   MarketplacePicker,
+  SEAuthError,
+  SEClient,
   SEImportWizard,
   SE_IMPORT_FLAGS,
   SE_WIDGET_TO_MARKETPLACE_CANDIDATES,
@@ -5631,9 +7603,11 @@ export {
   buildBootstrapUrl,
   buildChatMessageContent,
   codeMirrorlinterOptions,
+  decodeJwtPayload,
   extractSEOverlayId,
   extractSEPreviewParts,
   fetchSEBootstrap,
+  fetchUsableChannels,
   filenameFromURL,
   findSEAssetURLs,
   getAILandingBounds,