@lumiastream/ui 0.2.8-alpha.3 → 0.2.8-alpha.6

package/dist/index.d.ts

@@ -498,6 +498,7 @@ type OverlayLayerBounds = {
     zIndex?: number;
     matrix?: string;
     clipPath?: string;
+    autoSize?: boolean;
 };
 type OverlayLayerState = {
     id: string;
@@ -606,6 +607,7 @@ interface SEText {
     scrolling?: {
         direction?: string;
         speed?: number;
+        enabled?: boolean;
     };
     css?: Record<string, unknown>;
 }

package/dist/index.js

@@ -3237,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)) {
@@ -3255,6 +3265,7 @@ 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 autoSize = widthIsAuto || heightIsAuto;
   let x = toPx(css.left, 0, "width");
   let y = toPx(css.top, 0, "height");
   if (typeof css.transform === "string" && css.transform.includes("translate")) {
@@ -3280,7 +3291,8 @@ 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,
+    autoSize
   };
 }
 var LUMIA_DEFAULT_SIZES = {
@@ -3324,7 +3336,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) {
@@ -3352,7 +3364,11 @@ function buildUnit(widget, lumiaType, moduleExtras) {
       height: bounds.height,
       scale: [1, 1],
       opacity: bounds.opacity,
-      zIndex: bounds.zIndex
+      zIndex: bounds.zIndex,
+      // Carried over only when at least one axis was `auto` in the
+      // source SE widget — text layers in particular want this so they
+      // don't import as a 600x200 empty box.
+      ...bounds.autoSize ? { autoSize: true } : {}
     }
   };
   const module = {
@@ -3374,6 +3390,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 * 1e3;
+  }
+  return extra;
+}
 function mapText(widget) {
   const value = translateSeText(widget.text?.value ?? "");
   const seCss = widget.text?.css ?? {};
@@ -3390,7 +3419,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)
     }
   });
 }
@@ -3443,7 +3473,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)
     }
   });
 }
@@ -3461,9 +3492,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 } };
@@ -3482,25 +3524,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,
@@ -3513,14 +3578,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,
@@ -3535,11 +3600,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,
@@ -3550,10 +3649,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,
@@ -3564,6 +3665,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 = {};
@@ -3604,8 +3721,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.
@@ -4045,10 +4165,21 @@ var SE_KAPPAGEN_EVENT_TO_LUMIA_ALERT = {
   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 ?? {};
@@ -4284,11 +4415,22 @@ function liftSESpritesIntoTiers(types) {
     const cat = SE_TYPE_TO_CATEGORY[seKey];
     if (!cat) continue;
     const variations = block?.variations ?? [];
-    const tiers = variations.filter((v) => typeof v?.src === "string" && v.src.length > 0).map((v) => ({
-      minAmount: typeof v.amount === "number" && v.amount > 0 ? v.amount : 1,
-      imageUrl: v.src,
-      scale: typeof v.cheerSize === "number" && v.cheerSize > 0 ? v.cheerSize : 1
-    }));
+    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;
@@ -4327,8 +4469,10 @@ function categoriesFromListeners(listeners) {
 }
 function mapHypeCup(widget) {
   const v = widget.variables ?? {};
-  const cupX = typeof v.cupPosition?.x === "number" ? clamp01(v.cupPosition.x) : 0.5;
-  const cupY = typeof v.cupPosition?.y === "number" ? clamp01(v.cupPosition.y) : 0.7;
+  const 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;
@@ -4387,6 +4531,20 @@ 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 = {
@@ -4429,13 +4587,13 @@ function mapStreamBoss(widget) {
     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: SE bit-boss with `showImage: true` reads as the Card layout
-      // (avatar + name + bar). When images are hidden it's effectively
-      // our Bar-Only theme.
-      theme: v.showImage === false ? "bar-only" : "card",
+      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
@@ -4496,6 +4654,14 @@ function mapStreamBoss(widget) {
     }
   });
 }
+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 = {
@@ -4575,7 +4741,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" };
@@ -5092,7 +5257,7 @@ function ActiveLayerPreview({ overlay, layerId, CustomEmbed }) {
 }
 
 // src/se-import/ui/SEImportWizard.css
-styleInject('.se-import,\n.se-import * {\n  box-sizing: border-box;\n}\n.se-import {\n  --se-bg: #17162a;\n  --se-surface: #27264a;\n  --se-panel: #171b38;\n  --se-panel-2: #202449;\n  --se-border: rgba(116, 124, 211, 0.24);\n  --se-border-strong: rgba(126, 128, 255, 0.58);\n  --se-text: #f5f4ff;\n  --se-muted: #bab8d2;\n  --se-primary: #ff4076;\n  --se-purple: #393853;\n  --se-green: #06c96f;\n  --se-warn: #f7a42b;\n  width: 100%;\n  min-width: min(680px, 100%);\n  color: var(--se-text);\n  font-family: inherit;\n}\n.se-import__shell {\n  border-radius: 0;\n  padding: 28px 48px 24px;\n}\n.se-import__header {\n  display: grid;\n  justify-items: center;\n  gap: 42px;\n}\n.se-import__title {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 20px;\n  font-weight: 500;\n}\n.se-import-stepper {\n  display: grid;\n  width: min(760px, 100%);\n  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));\n}\n.se-import-step {\n  position: relative;\n  display: grid;\n  justify-items: center;\n  gap: 12px;\n  min-width: 0;\n  color: rgba(255, 255, 255, 0.72);\n}\n.se-import-step__label {\n  color: var(--se-text);\n  font-size: 18px;\n  line-height: 1.1;\n}\n.se-import-step__line {\n  position: absolute;\n  top: 42px;\n  left: 50%;\n  width: 100%;\n  height: 2px;\n  background: rgba(255, 255, 255, 0.16);\n}\n.se-import-step:last-child .se-import-step__line {\n  display: none;\n}\n.se-import-step__dot {\n  z-index: 1;\n  display: grid;\n  width: 22px;\n  height: 22px;\n  place-items: center;\n  border-radius: 50%;\n  background: #47485e;\n  color: #fff;\n  font-size: 13px;\n  font-weight: 700;\n  line-height: 1;\n}\n.se-import-step--active .se-import-step__dot {\n  background: var(--se-primary);\n}\n.se-import-step--done .se-import-step__dot {\n  background: var(--se-green);\n}\n.se-import-step--done .se-import-step__line {\n  background: var(--se-green);\n}\n.se-import-step--done + .se-import-step--active .se-import-step__line {\n  background:\n    linear-gradient(\n      90deg,\n      var(--se-green),\n      var(--se-primary));\n}\n.se-import__content {\n  display: grid;\n  min-height: 470px;\n  place-items: center;\n  padding: 64px 0 28px;\n}\n.se-import-panel {\n  width: min(100%, 1080px);\n  padding: 28px;\n}\n.se-import-panel--narrow {\n  width: min(100%, 1140px);\n}\n.se-import-panel--medium {\n  width: min(100%, 880px);\n}\n.se-import-panel--wide {\n  width: min(100%, 1000px);\n}\n.se-import-panel--confirm {\n  width: min(100%, 800px);\n}\n.se-import-panel h2,\n.se-import-panel h3,\n.se-import-panel p {\n  margin: 0;\n}\n.se-import-panel h2 {\n  font-size: 26px;\n  font-weight: 700;\n  line-height: 1.15;\n}\n.se-import-panel > p {\n  margin-top: 14px;\n  color: var(--se-muted);\n  font-size: 16px;\n  line-height: 1.45;\n}\n.se-import-field {\n  margin-top: 34px;\n}\n.se-import-field .mui-ls-input {\n  --ls-control-height: 66px;\n}\n.se-import-field .MuiInputLabel-root {\n  color: var(--se-text);\n  font-weight: 700;\n}\n.se-import-field .MuiInputLabel-root.Mui-focused {\n  color: #dfe1ff;\n}\n.se-import-field .MuiInputBase-root {\n  background: rgba(28, 32, 66, 0.85);\n  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.04);\n  font-size: 18px;\n}\n.se-import-field .MuiOutlinedInput-notchedOutline {\n  border-color: var(--se-border-strong) !important;\n}\n.se-import-help {\n  display: flex;\n  gap: 18px;\n  margin-top: 30px;\n  border: 1px solid var(--se-purple);\n  border-radius: 12px;\n  padding: 24px;\n  color: var(--white2);\n}\n.se-import-help__icon {\n  display: grid;\n  width: 30px;\n  height: 30px;\n  flex: 0 0 auto;\n  place-items: center;\n  border: 1px solid var(--se-purple);\n  border-radius: 50%;\n  color: var(--white2);\n  font-weight: 800;\n}\n.se-import-help__title {\n  color: var(--se-text);\n  font-size: 18px;\n  font-weight: 700;\n}\n.se-import-help ol {\n  margin: 16px 0 0;\n  padding-left: 18px;\n  font-size: 15px;\n  line-height: 1.7;\n}\n.se-import-help a {\n  color: var(--primary);\n  font-weight: 700;\n}\n.se-import-help--info {\n  align-items: center;\n}\n.se-import-section-title {\n  display: flex;\n  gap: 1rem;\n  margin-bottom: 1.5rem;\n}\n.se-import-section-title__num {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 46px;\n  height: 46px;\n  border: 1px solid var(--se-purple);\n  border-radius: 50%;\n  font-size: 1.5rem;\n  font-weight: 800;\n}\n.se-import-section-title__content {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n.se-import-section-title h3 {\n  font-size: 18px;\n  font-weight: 800;\n}\n.se-import-section-title p {\n  margin-top: 4px;\n  color: var(--se-muted);\n  font-size: 14px;\n}\n.se-import-grid {\n  display: grid;\n  gap: 8px;\n  margin-top: 10px;\n}\n.se-import-grid--four {\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n.se-import-grid--two {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.se-import-stat {\n  min-height: 116px;\n  border: 1px solid rgba(255, 255, 255, 0.06);\n  border-radius: 8px;\n  background:\n    linear-gradient(\n      135deg,\n      rgba(42, 47, 92, 0.9),\n      rgba(33, 38, 78, 0.9));\n  padding: 24px 22px;\n}\n.se-import-stat--success {\n  background:\n    linear-gradient(\n      135deg,\n      rgba(12, 91, 86, 0.72),\n      rgba(32, 65, 76, 0.8));\n  border-color: rgba(19, 201, 126, 0.25);\n}\n.se-import-stat--info {\n  border-color: rgba(116, 104, 255, 0.8);\n  box-shadow: inset 3px 0 0 #6e76ff;\n}\n.se-import-stat--warn,\n.se-import-stat--muted {\n  box-shadow: inset 3px 0 0 var(--se-warn);\n}\n.se-import-stat__label {\n  color: var(--se-muted);\n  font-size: 12px;\n  font-weight: 800;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n.se-import-stat__value {\n  margin-top: 12px;\n  color: #fff;\n  font-size: 30px;\n  font-weight: 800;\n  line-height: 1;\n}\n.se-import-stat__sub {\n  margin-top: 8px;\n  color: var(--se-muted);\n  font-size: 13px;\n}\n.se-import-option {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) auto auto;\n  align-items: center;\n  gap: 18px;\n  border: 1px solid var(--se-purple);\n  border-radius: 12px;\n  background:\n    linear-gradient(\n      135deg,\n      rgba(35, 39, 81, 0.95),\n      rgba(31, 35, 73, 0.95));\n  box-shadow: inset 3px 0 0 var(--se-primary);\n  cursor: pointer;\n  padding: 22px;\n  margin-bottom: 1rem;\n}\n.se-import-option--disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.se-import-option__icon {\n  display: grid;\n  width: 26px;\n  height: 26px;\n  place-items: center;\n  border-radius: 50%;\n  background: rgba(255, 255, 255, 0.22);\n  color: #d8dbff;\n  font-weight: 800;\n}\n.se-import-option__body {\n  display: grid;\n  gap: 8px;\n  min-width: 0;\n}\n.se-import-option__title {\n  font-size: 17px;\n  font-weight: 800;\n}\n.se-import-option__copy {\n  color: var(--se-muted);\n  font-size: 14px;\n  line-height: 1.45;\n}\n.se-import-option__count {\n  color: #fff;\n  font-size: 16px;\n}\n.se-import-option input {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n.se-import-toggle {\n  position: relative;\n  width: 48px;\n  height: 28px;\n  border-radius: 999px;\n  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);\n}\n.se-import-toggle::after {\n  position: absolute;\n  top: 4px;\n  left: 4px;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: #fff;\n  content: "";\n  transition: transform 160ms ease;\n}\n.se-import-option input:checked + .se-import-toggle {\n  background: var(--primary);\n}\n.se-import-option input:checked + .se-import-toggle::after {\n  transform: translateX(20px);\n}\n.se-import-advanced {\n  margin-top: 26px;\n  border-radius: 10px;\n  background: rgba(32, 36, 73, 0.7);\n  padding: 24px;\n}\n.se-import-advanced summary {\n  cursor: pointer;\n  font-size: 18px;\n  font-weight: 700;\n}\n.se-import-advanced p {\n  margin-top: 10px;\n  color: var(--se-muted);\n}\n.se-import-transfer {\n  position: relative;\n  display: grid;\n  width: min(720px, 100%);\n  min-height: 190px;\n  grid-template-columns: 180px minmax(260px, 1fr) 180px;\n  align-items: center;\n  gap: 28px;\n  margin: 0 auto 60px;\n}\n.se-import-transfer__source {\n  position: relative;\n  display: grid;\n  width: 160px;\n  height: 160px;\n  place-items: center;\n  animation: se-import-source-bounce 1.8s ease-in-out infinite;\n}\n.se-import-transfer__source::before {\n  top: -13px;\n  left: -13px;\n  box-shadow: 155px 0 0 var(--se-primary);\n}\n.se-import-transfer__source::after {\n  bottom: -13px;\n  left: -13px;\n  box-shadow: 155px 0 0 var(--se-primary);\n}\n.se-import-transfer__source img {\n  width: 192px;\n  height: 192px;\n  object-fit: contain;\n}\n.se-import-transfer__source--lumia {\n  animation-delay: 0.22s;\n}\n.se-import-transfer__files {\n  position: relative;\n  height: 130px;\n}\n.se-import-transfer__file {\n  position: absolute;\n  top: 50%;\n  left: -18px;\n  width: 56px;\n  height: 66px;\n  object-fit: contain;\n  transform: translateY(-50%);\n  filter: drop-shadow(0 10px 12px rgba(8, 9, 25, 0.25));\n  animation: se-import-file-fly 2.4s cubic-bezier(0.35, 0, 0.25, 1) infinite;\n}\n.se-import-transfer__file--one {\n  animation-delay: 0s;\n}\n.se-import-transfer__file--two {\n  animation-delay: 0.38s;\n}\n.se-import-transfer__file--three {\n  animation-delay: 0.76s;\n}\n.se-import-transfer__file--four {\n  animation-delay: 1.14s;\n}\n@keyframes se-import-source-bounce {\n  0%, 100% {\n    transform: translateY(0) scale(1);\n  }\n  50% {\n    transform: translateY(-8px) scale(1.025);\n  }\n}\n@keyframes se-import-file-fly {\n  0% {\n    opacity: 0;\n    transform: translate(-10px, -50%) scale(0.82) rotate(-8deg);\n  }\n  12% {\n    opacity: 1;\n  }\n  45% {\n    transform: translate(145px, calc(-50% - 18px)) scale(1.08) rotate(5deg);\n  }\n  82% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n    transform: translate(330px, -50%) scale(0.9) rotate(10deg);\n  }\n}\n.se-import-mirror-head {\n  display: flex;\n  align-items: end;\n  justify-content: space-between;\n  gap: 20px;\n}\n.se-import-mirror-head p {\n  margin-top: 14px;\n  color: var(--se-muted);\n  font-size: 16px;\n}\n.se-import-mirror-head span {\n  flex: 0 0 auto;\n  color: var(--se-muted);\n  font-weight: 700;\n}\n.se-import-progress {\n  width: 100%;\n  height: 14px;\n  margin-top: 28px;\n  overflow: hidden;\n  border: 0;\n  border-radius: 999px;\n  background: rgba(255, 64, 118, 0.1);\n}\n.se-import-progress::-webkit-progress-bar {\n  background: rgba(255, 64, 118, 0.1);\n}\n.se-import-progress::-webkit-progress-value {\n  border-radius: 999px;\n  background:\n    linear-gradient(\n      90deg,\n      #ff4076,\n      #e7295f);\n}\n.se-import-progress::-moz-progress-bar {\n  border-radius: 999px;\n  background:\n    linear-gradient(\n      90deg,\n      #ff4076,\n      #e7295f);\n}\n.se-import-asset-list {\n  max-height: 360px;\n  margin-top: 22px;\n  overflow-y: auto;\n  border-top: 1px solid rgba(255, 255, 255, 0.08);\n}\n.se-import-asset-row {\n  display: grid;\n  grid-template-columns: 32px minmax(0, 1fr) auto auto;\n  align-items: center;\n  gap: 14px;\n  min-height: 42px;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n  color: var(--se-muted);\n  font-size: 13px;\n}\n.se-import-asset-row__icon {\n  width: 24px;\n  height: 28px;\n  justify-self: end;\n  object-fit: contain;\n}\n.se-import-asset-row__url {\n  overflow: hidden;\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    monospace;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.se-import-asset-row__state {\n  color: #9b8cff;\n  font-weight: 800;\n}\n.se-import-asset-row--done .se-import-asset-row__state,\n.se-import-asset-row--reused .se-import-asset-row__state {\n  color: var(--se-green);\n}\n.se-import-asset-row--failed .se-import-asset-row__state,\n.se-import-asset-row__error {\n  color: #ff8080;\n}\n.se-import-link-button {\n  border: 0;\n  background: transparent;\n  color: #ff9ab6;\n  cursor: pointer;\n  font: inherit;\n  font-weight: 800;\n}\n.se-import-overview {\n  margin-top: 28px;\n  border: 1px solid var(--se-border);\n  border-radius: 12px;\n  background: rgba(26, 30, 61, 0.62);\n  padding: 28px;\n}\n.se-import-overview h3 {\n  margin-bottom: 18px;\n  font-size: 18px;\n  font-weight: 800;\n}\n.se-import-row {\n  display: grid;\n  grid-template-columns: 190px minmax(0, 1fr) auto;\n  gap: 18px;\n  align-items: center;\n  min-height: 48px;\n  border-top: 1px solid rgba(255, 255, 255, 0.08);\n  color: var(--se-muted);\n}\n.se-import-row strong {\n  min-width: 0;\n  overflow: hidden;\n  color: var(--se-text);\n  font-weight: 600;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.se-import-row em {\n  color: var(--se-muted);\n  font-style: normal;\n}\n.se-import-review-card {\n  display: flex;\n  justify-content: space-between;\n  gap: 18px;\n  border: 1px solid var(--se-border);\n  border-radius: 10px;\n  background: rgba(30, 34, 71, 0.8);\n  padding: 20px;\n}\n.se-import-review-card__type {\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    monospace;\n  font-weight: 800;\n}\n.se-import-review-card p {\n  margin-top: 8px;\n  color: var(--se-muted);\n  line-height: 1.45;\n}\n.se-import-review-card__status {\n  flex: 0 0 auto;\n  color: #facc15;\n  font-size: 11px;\n  font-weight: 800;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n.se-import-review-bulk,\n.se-import-actions--inline {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 10px;\n  margin-top: 16px;\n}\n.se-import-muted {\n  margin-top: 16px;\n  color: var(--se-muted);\n  font-size: 13px;\n}\n.se-import-generated {\n  display: grid;\n  gap: 12px;\n  margin-top: 18px;\n}\n.se-import-generated__title {\n  font-weight: 800;\n}\n.se-import-preview {\n  width: 100%;\n  height: 260px;\n  border: 1px solid var(--se-border);\n  border-radius: 8px;\n  background: repeating-conic-gradient(#1a1c20 0% 25%, #1d1f24 0% 50%) 50% / 20px 20px;\n}\n.se-import-code {\n  margin-top: 16px;\n}\n.se-import-code summary {\n  cursor: pointer;\n  color: var(--se-muted);\n  font-size: 13px;\n}\n.se-import-code pre {\n  max-height: 220px;\n  margin: 10px 0 0;\n  overflow: auto;\n  border-radius: 8px;\n  background: rgba(0, 0, 0, 0.28);\n  padding: 12px;\n  color: #d8dcff;\n  font-size: 12px;\n}\n.se-import-error {\n  margin-top: 18px;\n  border: 1px solid rgba(239, 68, 68, 0.45);\n  border-radius: 8px;\n  background: rgba(220, 38, 38, 0.12);\n  padding: 12px;\n  color: #fca5a5;\n}\n.se-import-error__title {\n  font-weight: 800;\n}\n.se-import-error__hint {\n  margin-top: 6px;\n  white-space: pre-wrap;\n}\n.se-import-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n  margin-top: 8px;\n}\n@media (max-width: 900px) {\n  .se-import__shell {\n    min-height: 0;\n    padding: 24px 18px;\n  }\n  .se-import__content {\n    min-height: 0;\n    padding-top: 32px;\n  }\n  .se-import-stepper {\n    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));\n  }\n  .se-import-step__label {\n    font-size: 13px;\n  }\n  .se-import-grid--four,\n  .se-import-grid--two,\n  .se-import-transfer {\n    grid-template-columns: 1fr;\n  }\n  .se-import-transfer {\n    justify-items: center;\n  }\n  .se-import-transfer__files {\n    width: min(360px, 100%);\n  }\n  .se-import-option,\n  .se-import-row,\n  .se-import-asset-row {\n    grid-template-columns: 1fr;\n  }\n  .se-import-mirror-head,\n  .se-import-review-card {\n    align-items: flex-start;\n    flex-direction: column;\n  }\n}\n');
+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';

package/package.json

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