@5even7/dlc-ui 0.2.18 → 0.2.19

package/dist/capsule.mjs

@@ -1,123 +1,123 @@
-/**
- * Tiny event emitter. Accepts any event name so the API stays open for
- * future events (hover, click, custom) without breaking changes.
- */
-function createEmitter() {
-  // Plain object storage (no Map/Set) so the legacy build has no API
-  // dependencies beyond what IE11 provides.
-  const listeners = Object.create(null);
-
-  return {
-    on(event, fn) {
-      if (!listeners[event]) listeners[event] = [];
-      listeners[event].push(fn);
-      return () => {
-        const current = listeners[event];
-        if (current) {
-          const index = current.indexOf(fn);
-          if (index !== -1) current.splice(index, 1);
-        }
-      };
-    },
-    off(event, fn) {
-      const current = listeners[event];
-      if (!current) return false;
-      const index = current.indexOf(fn);
-      if (index === -1) return false;
-      current.splice(index, 1);
-      return true;
-    },
-    emit(event, ...args) {
-      const current = listeners[event];
-      if (!current) return;
-      for (const fn of current.slice()) fn(...args);
-    }
-  };
+/**
+ * Tiny event emitter. Accepts any event name so the API stays open for
+ * future events (hover, click, custom) without breaking changes.
+ */
+function createEmitter() {
+  // Plain object storage (no Map/Set) so the legacy build has no API
+  // dependencies beyond what IE11 provides.
+  const listeners = Object.create(null);
+
+  return {
+    on(event, fn) {
+      if (!listeners[event]) listeners[event] = [];
+      listeners[event].push(fn);
+      return () => {
+        const current = listeners[event];
+        if (current) {
+          const index = current.indexOf(fn);
+          if (index !== -1) current.splice(index, 1);
+        }
+      };
+    },
+    off(event, fn) {
+      const current = listeners[event];
+      if (!current) return false;
+      const index = current.indexOf(fn);
+      if (index === -1) return false;
+      current.splice(index, 1);
+      return true;
+    },
+    emit(event, ...args) {
+      const current = listeners[event];
+      if (!current) return;
+      for (const fn of current.slice()) fn(...args);
+    }
+  };
+}
+
+const UNIT_PATTERN = /^[\d.]+(?:px|%|vw|vh|vmin|vmax|em|rem)$/;
+
+/**
+ * Normalize a size option to a CSS length string.
+ * Accepts numbers (treated as px) or strings with px/%, vw/vh/vmin/vmax, em/rem.
+ */
+function parseSize(value) {
+  if (typeof value === 'number') {
+    if (!Number.isFinite(value) || value < 0) throw new Error(`Invalid size: ${value}`);
+    return `${value}px`;
+  }
+  if (typeof value !== 'string') throw new Error(`Invalid size: ${String(value)}`);
+  const trimmed = value.trim();
+  if (!trimmed) throw new Error('Invalid size: empty string');
+  if (/^\d+(?:\.\d+)?$/.test(trimmed)) return `${trimmed}px`;
+  if (!UNIT_PATTERN.test(trimmed)) {
+    throw new Error(`Invalid size or unsupported unit: "${value}" (use px, %, vw, vh, vmin, vmax, em, rem)`);
+  }
+  return trimmed;
 }
 
-const UNIT_PATTERN = /^[\d.]+(?:px|%|vw|vh|vmin|vmax|em|rem)$/;
-
-/**
- * Normalize a size option to a CSS length string.
- * Accepts numbers (treated as px) or strings with px/%, vw/vh/vmin/vmax, em/rem.
- */
-function parseSize(value) {
-  if (typeof value === 'number') {
-    if (!Number.isFinite(value) || value < 0) throw new Error(`Invalid size: ${value}`);
-    return `${value}px`;
-  }
-  if (typeof value !== 'string') throw new Error(`Invalid size: ${String(value)}`);
-  const trimmed = value.trim();
-  if (!trimmed) throw new Error('Invalid size: empty string');
-  if (/^\d+(?:\.\d+)?$/.test(trimmed)) return `${trimmed}px`;
-  if (!UNIT_PATTERN.test(trimmed)) {
-    throw new Error(`Invalid size or unsupported unit: "${value}" (use px, %, vw, vh, vmin, vmax, em, rem)`);
-  }
-  return trimmed;
+const QUALITY_TIERS = {
+  low: { dpr: 1 },
+  medium: { dpr: 1.5 },
+  high: { dpr: 2 }
+};
+
+function autoDprCap() {
+  const nav = typeof navigator !== 'undefined' ? navigator : null;
+  const memory = nav && typeof nav.deviceMemory === 'number' ? nav.deviceMemory : 8;
+  const cores = nav && typeof nav.hardwareConcurrency === 'number' ? nav.hardwareConcurrency : 8;
+  return memory <= 4 || cores <= 4 ? 1.5 : 2;
 }
 
-const QUALITY_TIERS = {
-  low: { dpr: 1 },
-  medium: { dpr: 1.5 },
-  high: { dpr: 2 }
-};
-
-function autoDprCap() {
-  const nav = typeof navigator !== 'undefined' ? navigator : null;
-  const memory = nav && typeof nav.deviceMemory === 'number' ? nav.deviceMemory : 8;
-  const cores = nav && typeof nav.hardwareConcurrency === 'number' ? nav.hardwareConcurrency : 8;
-  return memory <= 4 || cores <= 4 ? 1.5 : 2;
-}
-
-function dprCapFor(quality) {
-  if (quality === 'auto') return autoDprCap();
-  const tier = QUALITY_TIERS[quality] || QUALITY_TIERS.medium;
-  return tier.dpr;
-}
-
-function effectiveDprCap(quality, renderScale = 1) {
-  const scale = Number(renderScale);
-  const normalizedScale = Number.isFinite(scale) ? Math.min(1, Math.max(0.25, scale)) : 1;
-  return Math.max(0.5, dprCapFor(quality) * normalizedScale);
+function dprCapFor(quality) {
+  if (quality === 'auto') return autoDprCap();
+  const tier = QUALITY_TIERS[quality] || QUALITY_TIERS.medium;
+  return tier.dpr;
 }
 
-/**
- * Merge defaults < preset < user. Unknown user keys are preserved so the
- * component API can grow (new props, cssVars, callbacks) without a breaking
- * change.
- */
-function normalizeOptions(defaults, preset, user) {
-  // undefined means "not provided" (e.g. Vue $props with unset props):
-  // drop those keys before merging so defaults/preset values survive.
-  const omitUndefined = (source) => {
-    const result = {};
-    for (const key of Object.keys(source)) {
-      if (source[key] !== undefined) result[key] = source[key];
-    }
-    return result;
-  };
-  const presetOptions = omitUndefined(preset && typeof preset === 'object' ? preset : {});
-  const userOptions = omitUndefined(user && typeof user === 'object' ? user : {});
-  return { ...defaults, ...presetOptions, ...userOptions };
+function effectiveDprCap(quality, renderScale = 1) {
+  const scale = Number(renderScale);
+  const normalizedScale = Number.isFinite(scale) ? Math.min(1, Math.max(0.25, scale)) : 1;
+  return Math.max(0.5, dprCapFor(quality) * normalizedScale);
 }
 
-/**
- * 公共色板：NC-01~NC-06 的四色组（底色 / 主色 / 辅色 / 高光色）。
- * Capsule 预置与 dlc-color 等组件共用，新增色板只改这里。
- */
-const PALETTES = {
-  original: ['#FFF3EA', '#F5B27A', '#F67BC6', '#A978E8'],
-  ocean: ['#EAF6FF', '#8FD0FF', '#3B87F6', '#6B58E9'],
-  klein: ['#EDF2FF', '#2F58D5', '#1B2040', '#E07A43'],
-  ultraviolet: ['#F2EEFF', '#B99AF1', '#8F74DB', '#D7D85C'],
-  chrome: ['#F5F6F8', '#B9C0CC', '#7F8793', '#4A4F59'],
-  plus: ['#FFF0E6', '#F6C26B', '#F98A64', '#E86D74']
+/**
+ * Merge defaults < preset < user. Unknown user keys are preserved so the
+ * component API can grow (new props, cssVars, callbacks) without a breaking
+ * change.
+ */
+function normalizeOptions(defaults, preset, user) {
+  // undefined means "not provided" (e.g. Vue $props with unset props):
+  // drop those keys before merging so defaults/preset values survive.
+  const omitUndefined = (source) => {
+    const result = {};
+    for (const key of Object.keys(source)) {
+      if (source[key] !== undefined) result[key] = source[key];
+    }
+    return result;
+  };
+  const presetOptions = omitUndefined(preset && typeof preset === 'object' ? preset : {});
+  const userOptions = omitUndefined(user && typeof user === 'object' ? user : {});
+  return { ...defaults, ...presetOptions, ...userOptions };
+}
+
+/**
+ * 公共色板：NC-01~NC-06 的四色组（底色 / 主色 / 辅色 / 高光色）。
+ * Capsule 预置与 dlc-color 等组件共用，新增色板只改这里。
+ */
+const PALETTES = {
+  original: ['#FFF3EA', '#F5B27A', '#F67BC6', '#A978E8'],
+  ocean: ['#EAF6FF', '#8FD0FF', '#3B87F6', '#6B58E9'],
+  klein: ['#EDF2FF', '#2F58D5', '#1B2040', '#E07A43'],
+  ultraviolet: ['#F2EEFF', '#B99AF1', '#8F74DB', '#D7D85C'],
+  chrome: ['#F5F6F8', '#B9C0CC', '#7F8793', '#4A4F59'],
+  plus: ['#FFF0E6', '#F6C26B', '#F98A64', '#E86D74']
 };
 
-/**
- * Capsule 预置：仅星云材质 NC-01~NC-06（NC-07~09 aurora 已移除）。
- * 颜色引用公共色板，seed/speed 决定形态与流速。
- */
+/**
+ * Capsule 预置：仅星云材质 NC-01~NC-06（NC-07~09 aurora 已移除）。
+ * 颜色引用公共色板，seed/speed 决定形态与流速。
+ */
 const CAPSULE_PRESETS = [
   { id: 'original', code: 'NC-01', name: '初光', group: 'warm', seed: 1.7, speed: 0.5, colors: [...PALETTES.original] },
   { id: 'ocean', code: 'NC-02', name: '沧溟', group: 'cold', seed: 8.2, speed: 0.48, colors: [...PALETTES.ocean] },
@@ -147,20 +147,20 @@ function getPreset(kind, ref) {
   return found;
 }
 
-const DEFAULTS = {
-  capsule: {
-    width: '100%',
-    height: 160,
-    quality: 'auto',
-    renderer: 'auto',
-    renderScale: 1,
-    powerPreference: 'high-performance',
-    fps: 60,
-    paused: false,
-    static: false,
-    respectReducedMotion: true,
-    mouseColor: true,
-    textRatio: 39
+const DEFAULTS = {
+  capsule: {
+    width: '100%',
+    height: 160,
+    quality: 'auto',
+    renderer: 'auto',
+    renderScale: 1,
+    powerPreference: 'high-performance',
+    fps: 60,
+    paused: false,
+    static: false,
+    respectReducedMotion: true,
+    mouseColor: true,
+    textRatio: 39
   }};
 
 /**
@@ -169,15 +169,21 @@ const DEFAULTS = {
  * Templates use {brand} {code} {name} placeholders.
  */
 const COPY = {
-  capsuleAria: '打开 {name} 沉浸预览'
+  capsuleAria: '打开 {name} 沉浸预览'
 };
 
 /**
  * Color helpers. `normalizeColor` converts any supported CSS color
- * (hex / named / rgb() / rgba()) into a 6-digit hex string, so renderers can
- * keep working with #rrggbb only. rgba() alpha is intentionally dropped:
- * the WebGL shader has no per-color alpha channel, and the component is
- * opaque by design — use component-level `opacity` for transparency.
+ * (hex / named / rgb() / rgba() / hsl() / hsla()) into a 6-digit hex string,
+ * so renderers can keep working with #rrggbb only. rgba()/hsla() alpha is
+ * intentionally dropped: the WebGL shader has no per-color alpha channel, and
+ * the component is opaque by design — use component-level `opacity` for
+ * transparency.
+ *
+ * `normalizeColorWithAlpha` keeps the alpha channel: it returns a 6-digit hex
+ * when alpha is 1, an 8-digit #rrggbbaa hex when alpha < 1, and the literal
+ * string 'transparent' for `transparent`. Use it for renderers (e.g. SVG)
+ * that can represent per-color transparency.
  */
 
 const NAMED_COLORS = {
@@ -335,46 +341,145 @@ function clampChannel(value) {
   return Math.min(255, Math.max(0, Math.round(value)));
 }
 
-function normalizeRgbArgs(args) {
-  const parts = args.split(/[,\s/]+/).filter(Boolean);
+function clampUnit(value) {
+  return Math.min(1, Math.max(0, value));
+}
+
+function hexPair(value) {
+  const text = clampChannel(value).toString(16);
+  return text.length === 1 ? `0${text}` : text;
+}
+
+/**
+ * Parse the argument list of rgb()/rgba()/hsl()/hsla() (comma syntax or
+ * modern space + slash syntax). Returns { parts, alpha } where alpha is 1 when
+ * omitted. Returns null when the argument list cannot be parsed.
+ */
+function parseFunctionArgs(args) {
+  const parts = args
+    .split(/[,\s]+/)
+    .map((part) => part.trim())
+    .filter((part) => part !== '' && part !== '/');
   if (parts.length < 3) return null;
-  const to255 = (value) => {
-    if (typeof value !== 'string' || !value) return null;
-    if (value.charAt(value.length - 1) === '%') return clampChannel((parseFloat(value) / 100) * 255);
-    const number = Number(value);
-    return Number.isFinite(number) ? clampChannel(number) : null;
-  };
-  const red = to255(parts[0]);
-  const green = to255(parts[1]);
-  const blue = to255(parts[2]);
-  if (red === null || green === null || blue === null) return null;
-  const hex = (n) => {
-    const text = n.toString(16);
-    return text.length === 1 ? `0${text}` : text;
-  };
-  return `#${hex(red)}${hex(green)}${hex(blue)}`;
+  let alpha = 1;
+  if (parts.length >= 4) {
+    const alphaText = parts.pop().trim();
+    if (alphaText.endsWith('%')) {
+      const percent = parseFloat(alphaText);
+      if (!Number.isFinite(percent)) return null;
+      alpha = clampUnit(percent / 100);
+    } else {
+      const number = Number(alphaText);
+      if (!Number.isFinite(number)) return null;
+      alpha = clampUnit(number);
+    }
+  }
+  return { parts, alpha };
+}
+
+function parseChannel(value) {
+  if (typeof value !== 'string' || value === '') return null;
+  const text = value.trim();
+  if (text.endsWith('%')) return clampChannel((parseFloat(text) / 100) * 255);
+  const number = Number(text);
+  return Number.isFinite(number) ? clampChannel(number) : null;
+}
+
+function parsePercent(value) {
+  if (typeof value !== 'string' || value === '') return null;
+  const text = value.trim();
+  if (!text.endsWith('%')) return null;
+  const number = parseFloat(text);
+  return Number.isFinite(number) ? Math.min(100, Math.max(0, number)) : null;
+}
+
+function parseHue(value) {
+  if (typeof value !== 'string' || value === '') return null;
+  const number = parseFloat(value);
+  return Number.isFinite(number) ? number : null;
+}
+
+/** Standard HSL -> RGB. h in degrees, s/l in 0..100, returns r/g/b in 0..255. */
+function hslToRgb(h, s, l) {
+  const hue = ((h % 360) + 360) % 360 / 360;
+  const saturation = s / 100;
+  const lightness = l / 100;
+  const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+  const section = hue * 6;
+  const x = chroma * (1 - Math.abs((section % 2) - 1));
+  let red = 0;
+  let green = 0;
+  let blue = 0;
+  if (section < 1) { red = chroma; green = x; }
+  else if (section < 2) { red = x; green = chroma; }
+  else if (section < 3) { green = chroma; blue = x; }
+  else if (section < 4) { green = x; blue = chroma; }
+  else if (section < 5) { red = x; blue = chroma; }
+  else { red = chroma; blue = x; }
+  const match = lightness - chroma / 2;
+  return [
+    Math.round((red + match) * 255),
+    Math.round((green + match) * 255),
+    Math.round((blue + match) * 255)
+  ];
 }
 
 /**
- * Convert any supported CSS color into `#rrggbb`. Returns null when the
- * value cannot be parsed. Supports: #rgb / #rrggbb (case-insensitive),
- * CSS named colors, rgb() / rgba() with comma or modern space syntax,
- * including percentages. Alpha in rgba() is ignored.
+ * Parse any supported CSS color. When keepAlpha is true the alpha channel is
+ * preserved (8-digit hex for alpha < 1); when false it is dropped. 'transparent'
+ * is only preserved when keepAlpha is true.
  */
-function normalizeColor(value) {
+function parseColor(value, keepAlpha) {
   if (typeof value !== 'string') return null;
   const input = value.trim();
   if (!input) return null;
   const lower = input.toLowerCase();
   if (NAMED_COLORS[lower]) return NAMED_COLORS[lower];
-  if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(input)) {
-    const hex = input.slice(1).toLowerCase();
-    if (hex.length === 3) return `#${hex.split('').map((c) => c + c).join('')}`;
-    return `#${hex}`;
+  // #rgb / #rgba / #rrggbb / #rrggbbaa，以及无 # 前缀的 6/8 位 hex（dicebear 习惯）
+  const hexMatch = input.match(/^#?([0-9a-f]{3,8})$/i);
+  if (hexMatch) {
+    let hex = hexMatch[1].toLowerCase();
+    if (hex.length === 3 || hex.length === 4) {
+      hex = hex.split('').map((c) => c + c).join('');
+    }
+    return `#${hex.slice(0, 6)}`;
   }
-  const match = input.match(/^rgba?\((.*)\)$/i);
-  if (match) return normalizeRgbArgs(match[1]);
-  return null;
+  const funcMatch = input.match(/^(rgba?|hsla?)\(([^)]*)\)$/i);
+  if (!funcMatch) return null;
+  const kind = funcMatch[1].toLowerCase();
+  const parsed = parseFunctionArgs(funcMatch[2]);
+  if (!parsed) return null;
+  const { parts, alpha } = parsed;
+  let red;
+  let green;
+  let blue;
+  if (kind === 'rgb' || kind === 'rgba') {
+    if (parts.length !== 3) return null;
+    red = parseChannel(parts[0]);
+    green = parseChannel(parts[1]);
+    blue = parseChannel(parts[2]);
+    if (red === null || green === null || blue === null) return null;
+  } else {
+    if (parts.length !== 3) return null;
+    const hue = parseHue(parts[0]);
+    const saturation = parsePercent(parts[1]);
+    const lightness = parsePercent(parts[2]);
+    if (hue === null || saturation === null || lightness === null) return null;
+    [red, green, blue] = hslToRgb(hue, saturation, lightness);
+  }
+  const hex = `#${hexPair(red)}${hexPair(green)}${hexPair(blue)}`;
+  return hex;
+}
+
+/**
+ * Convert any supported CSS color into `#rrggbb`. Returns null when the
+ * value cannot be parsed. Supports: #rgb / #rgba / #rrggbb / #rrggbbaa
+ * (case-insensitive), bare 6/8-digit hex, CSS named colors, rgb() / rgba() /
+ * hsl() / hsla() with comma or modern space syntax, including percentages.
+ * Alpha is ignored.
+ */
+function normalizeColor(value) {
+  return parseColor(value);
 }
 
 function hexToRgb01(color) {
@@ -388,524 +493,524 @@ function hexToRgb01(color) {
   ];
 }
 
-const VERTEX_SHADER = `#version 300 es
-in vec2 a_position;
-out vec2 v_uv;
-void main() {
-  v_uv = a_position * 0.5 + 0.5;
-  gl_Position = vec4(a_position, 0.0, 1.0);
-}`;
-
-const FRAGMENT_SHADER = `#version 300 es
-precision highp float;
-
-in vec2 v_uv;
-out vec4 outColor;
-
-uniform vec2 u_resolution;
-uniform float u_time;
-uniform float u_seed;
-uniform float u_motion;
-uniform vec2 u_pointer;
-uniform vec3 u_colorA;
-uniform vec3 u_colorB;
-uniform vec3 u_colorC;
-uniform vec3 u_colorD;
-
-float hash21(vec2 p) {
-  p = fract(p * vec2(123.34, 456.21));
-  p += dot(p, p + 45.32 + u_seed);
-  return fract(p.x * p.y);
-}
-
-float noise(vec2 p) {
-  vec2 i = floor(p);
-  vec2 f = fract(p);
-  f = f * f * (3.0 - 2.0 * f);
-  float a = hash21(i);
-  float b = hash21(i + vec2(1.0, 0.0));
-  float c = hash21(i + vec2(0.0, 1.0));
-  float d = hash21(i + vec2(1.0, 1.0));
-  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
-}
-
-float fbm(vec2 p) {
-  float value = 0.0;
-  float amplitude = 0.52;
-  mat2 rotation = mat2(0.80, 0.60, -0.60, 0.80);
-  for (int i = 0; i < 6; i++) {
-    value += amplitude * noise(p);
-    p = rotation * p * 2.03 + 17.7;
-    amplitude *= 0.5;
-  }
-  return value;
-}
-
-float gaussian(float value, float center, float width) {
-  return exp(-pow(value - center, 2.0) / max(width, 0.0001));
-}
-
-vec3 palette(float t) {
-  t = clamp(t, 0.0, 1.0);
-  vec3 shadow = mix(u_colorA, u_colorB, smoothstep(0.06, 0.62, t));
-  vec3 body = mix(u_colorB, u_colorC, smoothstep(0.30, 0.82, t));
-  vec3 highlight = mix(u_colorC, u_colorD, smoothstep(0.74, 1.0, t));
-  vec3 restrained = mix(shadow, body, smoothstep(0.26, 0.72, t));
-  return mix(restrained, highlight, smoothstep(0.78, 0.97, t));
-}
-
-vec3 renderNebula(vec2 uv, vec2 p, vec2 pointer, float distanceToPointer, float t) {
-  vec2 delta = p - pointer;
-  float influence = exp(-distanceToPointer * 4.6) * u_motion;
-  float angle = influence * 1.7;
-  mat2 swirl = mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
-  p = pointer + swirl * delta;
-  p += normalize(delta + 0.0001) * influence * 0.08;
-
-  vec2 drift = vec2(t * 0.22, -t * 0.13);
-  vec2 q = vec2(
-    fbm(p * 1.35 + drift + u_seed),
-    fbm(p * 1.35 + vec2(5.2, 1.3) - drift * 0.85)
-  );
-  vec2 r = vec2(
-    fbm(p * 2.0 + 3.6 * q + vec2(1.7, 9.2) + t * 0.10),
-    fbm(p * 2.0 + 3.0 * q + vec2(8.3, 2.8) - t * 0.085)
-  );
-
-  float cloud = fbm(p * 1.7 + 4.2 * r);
-  float veins = fbm(p * 4.0 - 2.0 * q + t * 0.065);
-  float nebula = smoothstep(0.18, 0.91, cloud * 0.9 + veins * 0.22);
-
-  vec3 color = palette(nebula);
-  color += u_colorD * pow(max(cloud - 0.63, 0.0), 2.0) * 1.05;
-  color *= 0.78 + 0.34 * smoothstep(0.15, 0.9, veins);
-
-  vec2 starGrid = floor((uv + vec2(u_seed * 0.013, 0.0)) * vec2(132.0, 58.0));
-  vec2 starCell = fract(uv * vec2(132.0, 58.0)) - 0.5;
-  float starRandom = hash21(starGrid);
-  float starShape = smoothstep(0.075, 0.0, length(starCell));
-  float starMask = step(0.989, starRandom) * starShape;
-  float twinkle = 0.35 + 0.65 * sin(t * (1.0 + starRandom * 2.4) + starRandom * 40.0) * 0.5 + 0.5;
-  color += starMask * twinkle * mix(u_colorC, u_colorD, starRandom) * 1.05;
-
-  float pointerGlow = exp(-distanceToPointer * 7.0) * u_motion;
-  color += u_colorD * pointerGlow * 0.28;
-  return color;
-}
-
-void main() {
-  vec2 uv = v_uv;
-  vec2 p = uv - 0.5;
-  p.x *= u_resolution.x / max(u_resolution.y, 1.0);
-
-  vec2 pointer = u_pointer - 0.5;
-  pointer.x *= u_resolution.x / max(u_resolution.y, 1.0);
-  float distanceToPointer = length(p - pointer);
-
-  vec3 color = renderNebula(uv, p, pointer, distanceToPointer, u_time);
-  float vignette = smoothstep(0.94, 0.18, length((uv - 0.5) * vec2(1.0, 1.35)));
-  color *= 0.70 + vignette * 0.42;
-  color = pow(max(color, vec3(0.0)), vec3(0.88));
-
-  outColor = vec4(color, 1.0);
-}`;
-
-function compileShader(gl, type, source) {
-  const shader = gl.createShader(type);
-  gl.shaderSource(shader, source);
-  gl.compileShader(shader);
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    const message = gl.getShaderInfoLog(shader) || 'Unknown shader compile error';
-    gl.deleteShader(shader);
-    throw new Error(message);
-  }
-  return shader;
-}
-
-function createProgram(gl) {
-  const vertex = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
-  const fragment = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
-  const program = gl.createProgram();
-  gl.attachShader(program, vertex);
-  gl.attachShader(program, fragment);
-  gl.linkProgram(program);
-  gl.deleteShader(vertex);
-  gl.deleteShader(fragment);
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    const message = gl.getProgramInfoLog(program) || 'Unknown program link error';
-    gl.deleteProgram(program);
-    throw new Error(message);
-  }
-  return program;
-}
-
-class CosmicRenderer {
-  constructor(canvas, preset, options = {}) {
-    this.canvas = canvas;
-    this.preset = { ...preset };
-    this.options = { dprCap: 1.75, mouseColor: true, ...options };
-    this.gl = canvas.getContext('webgl2', {
-      alpha: false,
-      antialias: false,
-      depth: false,
-      powerPreference: this.options.powerPreference || 'high-performance',
-      preserveDrawingBuffer: false
-    });
-    if (!this.gl) throw new Error('WebGL2 is not available');
-
-    this.program = createProgram(this.gl);
-    this.locations = this.#getLocations();
-    this.pointer = [0.72, 0.45];
-    this.pointerTarget = [...this.pointer];
-    this.motion = 0;
-    this.motionTarget = 0;
-    this.timeOffset = preset.seed * 0.73;
-    this.colors = preset.colors.map(hexToRgb01);
-    this.visible = true;
-    this.disposed = false;
-
-    this.#setupGeometry();
-    this.#bindEvents();
-    this.#bindContextEvents();
-    this.resize();
-  }
-
-  #getLocations() {
-    const gl = this.gl;
-    const uniform = (name) => gl.getUniformLocation(this.program, name);
-    return {
-      position: gl.getAttribLocation(this.program, 'a_position'),
-      resolution: uniform('u_resolution'),
-      time: uniform('u_time'),
-      seed: uniform('u_seed'),
-      motion: uniform('u_motion'),
-      pointer: uniform('u_pointer'),
-      colorA: uniform('u_colorA'),
-      colorB: uniform('u_colorB'),
-      colorC: uniform('u_colorC'),
-      colorD: uniform('u_colorD')
-    };
-  }
-
-  #setupGeometry() {
-    const gl = this.gl;
-    const vertices = new Float32Array([-1, -1, 3, -1, -1, 3]);
-    this.buffer = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
-  }
-
-  #bindEvents() {
-    if (this.options.mouseColor === false) return;
-    this.eventTarget = this.options.eventTarget || this.canvas.parentElement || this.canvas;
-    this.onPointerMove = (event) => {
-      const rect = this.canvas.getBoundingClientRect();
-      this.pointerTarget[0] = (event.clientX - rect.left) / Math.max(rect.width, 1);
-      this.pointerTarget[1] = 1 - (event.clientY - rect.top) / Math.max(rect.height, 1);
-      this.motionTarget = 1;
-    };
-    this.onPointerLeave = () => { this.motionTarget = 0; };
-    this.eventTarget.addEventListener('pointermove', this.onPointerMove, { passive: true });
-    this.eventTarget.addEventListener('pointerdown', this.onPointerMove, { passive: true });
-    this.eventTarget.addEventListener('pointerleave', this.onPointerLeave, { passive: true });
-  }
-
-  #bindContextEvents() {
-    this.onContextLost = (event) => {
-      event.preventDefault();
-      if (this.disposed) return;
-      this.visible = false;
-      if (typeof this.options.onContextLost === 'function') this.options.onContextLost(event);
-    };
-    this.onContextRestored = () => {
-      if (this.disposed) return;
-      this.program = createProgram(this.gl);
-      this.locations = this.#getLocations();
-      this.#setupGeometry();
-      this.visible = true;
-      this.resize();
-      if (typeof this.options.onContextRestored === 'function') this.options.onContextRestored();
-    };
-    this.canvas.addEventListener('webglcontextlost', this.onContextLost, false);
-    this.canvas.addEventListener('webglcontextrestored', this.onContextRestored, false);
-  }
-
-  setPreset(preset) {
-    this.preset = { ...preset };
-    this.colors = preset.colors.map(hexToRgb01);
-    this.timeOffset = preset.seed * 0.73;
-  }
-
-  setDprCap(cap) {
-    this.options.dprCap = cap;
-    this.resize();
-  }
-
-  setMouseColor(enabled) {
-    this.options.mouseColor = enabled !== false;
-    if (this.options.mouseColor) {
-      if (this.onPointerMove) return this;
-      this.#bindEvents();
-      return this;
-    }
-    if (this.onPointerMove) {
-      const target = this.eventTarget;
-      target.removeEventListener('pointermove', this.onPointerMove);
-      target.removeEventListener('pointerdown', this.onPointerMove);
-      target.removeEventListener('pointerleave', this.onPointerLeave);
-      this.onPointerMove = null;
-      this.onPointerLeave = null;
-    }
-    this.motionTarget = 0;
-    return this;
-  }
-
-  randomize() {
-    this.preset.seed = Math.random() * 100;
-    this.timeOffset = Math.random() * 40;
-  }
-
-  resize() {
-    const dpr = Math.min(window.devicePixelRatio || 1, this.options.dprCap);
-    const rect = this.canvas.getBoundingClientRect();
-    const width = Math.max(2, Math.round(rect.width * dpr));
-    const height = Math.max(2, Math.round(rect.height * dpr));
-    if (this.canvas.width !== width || this.canvas.height !== height) {
-      this.canvas.width = width;
-      this.canvas.height = height;
-    }
-    this.gl.viewport(0, 0, width, height);
-  }
-
-  draw(elapsedSeconds, paused = false) {
-    if (this.disposed || !this.visible) return;
-    const gl = this.gl;
-    this.pointer[0] += (this.pointerTarget[0] - this.pointer[0]) * 0.08;
-    this.pointer[1] += (this.pointerTarget[1] - this.pointer[1]) * 0.08;
-    this.motion += (this.motionTarget - this.motion) * 0.07;
-
-    gl.useProgram(this.program);
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-    gl.enableVertexAttribArray(this.locations.position);
-    gl.vertexAttribPointer(this.locations.position, 2, gl.FLOAT, false, 0, 0);
-
-    gl.uniform2f(this.locations.resolution, this.canvas.width, this.canvas.height);
-    gl.uniform1f(this.locations.time, this.timeOffset + (paused ? 0 : elapsedSeconds * this.preset.speed));
-    gl.uniform1f(this.locations.seed, this.preset.seed);
-    gl.uniform1f(this.locations.motion, this.motion);
-    gl.uniform2f(this.locations.pointer, this.pointer[0], this.pointer[1]);
-    gl.uniform3fv(this.locations.colorA, this.colors[0]);
-    gl.uniform3fv(this.locations.colorB, this.colors[1]);
-    gl.uniform3fv(this.locations.colorC, this.colors[2]);
-    gl.uniform3fv(this.locations.colorD, this.colors[3]);
-    gl.drawArrays(gl.TRIANGLES, 0, 3);
-  }
-
-  dispose() {
-    this.disposed = true;
-    const target = this.eventTarget || this.canvas;
-    target.removeEventListener('pointermove', this.onPointerMove);
-    target.removeEventListener('pointerdown', this.onPointerMove);
-    target.removeEventListener('pointerleave', this.onPointerLeave);
-    this.canvas.removeEventListener('webglcontextlost', this.onContextLost, false);
-    this.canvas.removeEventListener('webglcontextrestored', this.onContextRestored, false);
-    this.gl.deleteBuffer(this.buffer);
-    this.gl.deleteProgram(this.program);
-    const lose = this.gl.getExtension('WEBGL_lose_context');
-    if (lose) lose.loseContext();
-  }
+const VERTEX_SHADER = `#version 300 es
+in vec2 a_position;
+out vec2 v_uv;
+void main() {
+  v_uv = a_position * 0.5 + 0.5;
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}`;
+
+const FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+
+in vec2 v_uv;
+out vec4 outColor;
+
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform float u_seed;
+uniform float u_motion;
+uniform vec2 u_pointer;
+uniform vec3 u_colorA;
+uniform vec3 u_colorB;
+uniform vec3 u_colorC;
+uniform vec3 u_colorD;
+
+float hash21(vec2 p) {
+  p = fract(p * vec2(123.34, 456.21));
+  p += dot(p, p + 45.32 + u_seed);
+  return fract(p.x * p.y);
+}
+
+float noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  f = f * f * (3.0 - 2.0 * f);
+  float a = hash21(i);
+  float b = hash21(i + vec2(1.0, 0.0));
+  float c = hash21(i + vec2(0.0, 1.0));
+  float d = hash21(i + vec2(1.0, 1.0));
+  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+}
+
+float fbm(vec2 p) {
+  float value = 0.0;
+  float amplitude = 0.52;
+  mat2 rotation = mat2(0.80, 0.60, -0.60, 0.80);
+  for (int i = 0; i < 6; i++) {
+    value += amplitude * noise(p);
+    p = rotation * p * 2.03 + 17.7;
+    amplitude *= 0.5;
+  }
+  return value;
+}
+
+float gaussian(float value, float center, float width) {
+  return exp(-pow(value - center, 2.0) / max(width, 0.0001));
 }
 
-function rgb(color, alpha = 1) {
-  const [r, g, b] = hexToRgb01(color).map((value) => Math.round(value * 255));
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-}
-
-class FallbackRenderer {
-  constructor(canvas, preset, options = {}) {
-    this.canvas = canvas;
-    this.preset = preset;
-    this.context = canvas.getContext('2d');
-    this.visible = true;
-    this.timePhase = 0;
-    this.dprCap = options.dprCap || 1.5;
-  }
-
-  resize() {
-    const rect = this.canvas.getBoundingClientRect();
-    const dpr = Math.min(window.devicePixelRatio || 1, this.dprCap);
-    const width = Math.max(2, Math.round(rect.width * dpr));
-    const height = Math.max(2, Math.round(rect.height * dpr));
-    if (this.canvas.width !== width || this.canvas.height !== height) {
-      this.canvas.width = width;
-      this.canvas.height = height;
-    }
-  }
-
-  drawNebula(time) {
-    const ctx = this.context;
-    const { width, height } = this.canvas;
-    const t = (time + this.timePhase) * (this.preset.speed || 1);
-    const phase = (this.preset.seed || 0) * 0.7;
-    const gradient = ctx.createLinearGradient(0, 0, width, height);
-    gradient.addColorStop(0, this.preset.colors[0]);
-    gradient.addColorStop(0.38, this.preset.colors[1]);
-    gradient.addColorStop(0.72, this.preset.colors[2]);
-    gradient.addColorStop(1, this.preset.colors[3]);
-    ctx.fillStyle = gradient;
-    ctx.fillRect(0, 0, width, height);
-
-    ctx.globalCompositeOperation = 'screen';
-    for (let index = 0; index < 6; index += 1) {
-      const x = (0.5 + 0.45 * Math.sin(t * 0.32 + index * 1.7 + phase)) * width;
-      const y = (0.5 + 0.4 * Math.cos(t * 0.25 + index + phase)) * height;
-      const radius = Math.max(width, height) * (0.08 + (index % 3) * 0.04);
-      const glow = ctx.createRadialGradient(x, y, 0, x, y, radius);
-      glow.addColorStop(0, rgb(this.preset.colors[(index + 1) % 4], 0.24));
-      glow.addColorStop(1, rgb(this.preset.colors[index % 4], 0));
-      ctx.fillStyle = glow;
-      ctx.fillRect(x - radius, y - radius, radius * 2, radius * 2);
-    }
-    ctx.globalCompositeOperation = 'source-over';
-  }
-
-  draw(time) {
-    if (!this.visible) return;
-    this.drawNebula(time);
-  }
-
-  setPreset(preset) {
-    this.preset = preset;
-  }
-
-  setDprCap(cap) {
-    this.dprCap = cap;
-    this.resize();
-  }
-
-  randomize() {
-    if (this.preset) {
-      this.preset.seed = Math.random() * 100;
-      this.timePhase = Math.random() * Math.PI * 2;
-    }
-  }
-  setMouseColor() {}
-  dispose() {}
+vec3 palette(float t) {
+  t = clamp(t, 0.0, 1.0);
+  vec3 shadow = mix(u_colorA, u_colorB, smoothstep(0.06, 0.62, t));
+  vec3 body = mix(u_colorB, u_colorC, smoothstep(0.30, 0.82, t));
+  vec3 highlight = mix(u_colorC, u_colorD, smoothstep(0.74, 1.0, t));
+  vec3 restrained = mix(shadow, body, smoothstep(0.26, 0.72, t));
+  return mix(restrained, highlight, smoothstep(0.78, 0.97, t));
 }
 
-/**
- * Document-level shared rAF scheduler. Every component instance subscribes
- * its own frame callback; the whole page runs ONE animation loop (like the
- * original demo), which avoids jank from many competing rAF loops.
- */
-const subscribers = [];
-let running = false;
-let rafId = 0;
-let last = 0;
-
-function tick(now) {
-  if (!running) return;
-  const activeItems = [];
-  {
-    for (const item of subscribers.slice()) {
-      try {
-        if (!item.isPaused()) activeItems.push(item);
-      } catch {}
-    }
-  }
-  if (activeItems.length === 0) {
-    running = false;
-    rafId = 0;
-    last = 0;
-    return;
-  }
-  const delta = last ? Math.min((now - last) / 1000, 0.05) : 0;
-  last = now;
-  // Schedule the next frame BEFORE running callbacks so one throwing
-  // subscriber can never kill the whole animation loop.
-  rafId = requestAnimationFrame(tick);
-  for (const item of activeItems) {
-    try {
-      item.onFrame(delta, now);
-    } catch (error) {
-      console.warn('[dlc-ui] frame error:', error);
-    }
-  }
-  if (subscribers.length === 0) {
-    cancelAnimationFrame(rafId);
-    running = false;
-    rafId = 0;
-  }
-}
-
-function start() {
-  if (running) return;
-  running = true;
-  last = 0;
-  rafId = requestAnimationFrame(tick);
-}
-
-function wakeScheduler() {
-  start();
-}
-
-function subscribeScheduler(onFrame, isPaused) {
-  const item = { onFrame, isPaused };
-  subscribers.push(item);
-  start();
-  return () => {
-    const index = subscribers.indexOf(item);
-    if (index !== -1) subscribers.splice(index, 1);
-    if (subscribers.length === 0 && rafId) {
-      cancelAnimationFrame(rafId);
-      running = false;
-      rafId = 0;
-    }
-  };
+vec3 renderNebula(vec2 uv, vec2 p, vec2 pointer, float distanceToPointer, float t) {
+  vec2 delta = p - pointer;
+  float influence = exp(-distanceToPointer * 4.6) * u_motion;
+  float angle = influence * 1.7;
+  mat2 swirl = mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
+  p = pointer + swirl * delta;
+  p += normalize(delta + 0.0001) * influence * 0.08;
+
+  vec2 drift = vec2(t * 0.22, -t * 0.13);
+  vec2 q = vec2(
+    fbm(p * 1.35 + drift + u_seed),
+    fbm(p * 1.35 + vec2(5.2, 1.3) - drift * 0.85)
+  );
+  vec2 r = vec2(
+    fbm(p * 2.0 + 3.6 * q + vec2(1.7, 9.2) + t * 0.10),
+    fbm(p * 2.0 + 3.0 * q + vec2(8.3, 2.8) - t * 0.085)
+  );
+
+  float cloud = fbm(p * 1.7 + 4.2 * r);
+  float veins = fbm(p * 4.0 - 2.0 * q + t * 0.065);
+  float nebula = smoothstep(0.18, 0.91, cloud * 0.9 + veins * 0.22);
+
+  vec3 color = palette(nebula);
+  color += u_colorD * pow(max(cloud - 0.63, 0.0), 2.0) * 1.05;
+  color *= 0.78 + 0.34 * smoothstep(0.15, 0.9, veins);
+
+  vec2 starGrid = floor((uv + vec2(u_seed * 0.013, 0.0)) * vec2(132.0, 58.0));
+  vec2 starCell = fract(uv * vec2(132.0, 58.0)) - 0.5;
+  float starRandom = hash21(starGrid);
+  float starShape = smoothstep(0.075, 0.0, length(starCell));
+  float starMask = step(0.989, starRandom) * starShape;
+  float twinkle = 0.35 + 0.65 * sin(t * (1.0 + starRandom * 2.4) + starRandom * 40.0) * 0.5 + 0.5;
+  color += starMask * twinkle * mix(u_colorC, u_colorD, starRandom) * 1.05;
+
+  float pointerGlow = exp(-distanceToPointer * 7.0) * u_motion;
+  color += u_colorD * pointerGlow * 0.28;
+  return color;
 }
 
-/**
- * Gates drawing on "element intersects viewport AND the page tab is visible".
- * Falls back to always-visible when IntersectionObserver is unavailable.
- */
-function createVisibilityGuard(element, onChange = null) {
-  let intersecting = true;
-  let pageVisible = typeof document === 'undefined' || !document.hidden;
-  let disposed = false;
-  let observer = null;
-
-  if (typeof IntersectionObserver !== 'undefined') {
-    observer = new IntersectionObserver(
-      (entries) => {
-        intersecting = entries.some((entry) => entry.isIntersecting);
-        if (typeof onChange === 'function') onChange();
-      },
-      { rootMargin: '180px' }
-    );
-    observer.observe(element);
-  }
-
-  const onVisibilityChange = () => {
-    pageVisible = typeof document !== 'undefined' && !document.hidden;
-    if (typeof onChange === 'function') onChange();
-  };
-  if (typeof document !== 'undefined') {
-    document.addEventListener('visibilitychange', onVisibilityChange);
-  }
-
-  return {
-    isVisible() {
-      return intersecting && pageVisible;
-    },
-    dispose() {
-      if (disposed) return;
-      disposed = true;
-      if (observer) observer.disconnect();
-      if (typeof document !== 'undefined') {
-        document.removeEventListener('visibilitychange', onVisibilityChange);
-      }
-    }
-  };
+void main() {
+  vec2 uv = v_uv;
+  vec2 p = uv - 0.5;
+  p.x *= u_resolution.x / max(u_resolution.y, 1.0);
+
+  vec2 pointer = u_pointer - 0.5;
+  pointer.x *= u_resolution.x / max(u_resolution.y, 1.0);
+  float distanceToPointer = length(p - pointer);
+
+  vec3 color = renderNebula(uv, p, pointer, distanceToPointer, u_time);
+  float vignette = smoothstep(0.94, 0.18, length((uv - 0.5) * vec2(1.0, 1.35)));
+  color *= 0.70 + vignette * 0.42;
+  color = pow(max(color, vec3(0.0)), vec3(0.88));
+
+  outColor = vec4(color, 1.0);
+}`;
+
+function compileShader(gl, type, source) {
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const message = gl.getShaderInfoLog(shader) || 'Unknown shader compile error';
+    gl.deleteShader(shader);
+    throw new Error(message);
+  }
+  return shader;
+}
+
+function createProgram(gl) {
+  const vertex = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+  const fragment = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+  const program = gl.createProgram();
+  gl.attachShader(program, vertex);
+  gl.attachShader(program, fragment);
+  gl.linkProgram(program);
+  gl.deleteShader(vertex);
+  gl.deleteShader(fragment);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const message = gl.getProgramInfoLog(program) || 'Unknown program link error';
+    gl.deleteProgram(program);
+    throw new Error(message);
+  }
+  return program;
+}
+
+class CosmicRenderer {
+  constructor(canvas, preset, options = {}) {
+    this.canvas = canvas;
+    this.preset = { ...preset };
+    this.options = { dprCap: 1.75, mouseColor: true, ...options };
+    this.gl = canvas.getContext('webgl2', {
+      alpha: false,
+      antialias: false,
+      depth: false,
+      powerPreference: this.options.powerPreference || 'high-performance',
+      preserveDrawingBuffer: false
+    });
+    if (!this.gl) throw new Error('WebGL2 is not available');
+
+    this.program = createProgram(this.gl);
+    this.locations = this.#getLocations();
+    this.pointer = [0.72, 0.45];
+    this.pointerTarget = [...this.pointer];
+    this.motion = 0;
+    this.motionTarget = 0;
+    this.timeOffset = preset.seed * 0.73;
+    this.colors = preset.colors.map(hexToRgb01);
+    this.visible = true;
+    this.disposed = false;
+
+    this.#setupGeometry();
+    this.#bindEvents();
+    this.#bindContextEvents();
+    this.resize();
+  }
+
+  #getLocations() {
+    const gl = this.gl;
+    const uniform = (name) => gl.getUniformLocation(this.program, name);
+    return {
+      position: gl.getAttribLocation(this.program, 'a_position'),
+      resolution: uniform('u_resolution'),
+      time: uniform('u_time'),
+      seed: uniform('u_seed'),
+      motion: uniform('u_motion'),
+      pointer: uniform('u_pointer'),
+      colorA: uniform('u_colorA'),
+      colorB: uniform('u_colorB'),
+      colorC: uniform('u_colorC'),
+      colorD: uniform('u_colorD')
+    };
+  }
+
+  #setupGeometry() {
+    const gl = this.gl;
+    const vertices = new Float32Array([-1, -1, 3, -1, -1, 3]);
+    this.buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+  }
+
+  #bindEvents() {
+    if (this.options.mouseColor === false) return;
+    this.eventTarget = this.options.eventTarget || this.canvas.parentElement || this.canvas;
+    this.onPointerMove = (event) => {
+      const rect = this.canvas.getBoundingClientRect();
+      this.pointerTarget[0] = (event.clientX - rect.left) / Math.max(rect.width, 1);
+      this.pointerTarget[1] = 1 - (event.clientY - rect.top) / Math.max(rect.height, 1);
+      this.motionTarget = 1;
+    };
+    this.onPointerLeave = () => { this.motionTarget = 0; };
+    this.eventTarget.addEventListener('pointermove', this.onPointerMove, { passive: true });
+    this.eventTarget.addEventListener('pointerdown', this.onPointerMove, { passive: true });
+    this.eventTarget.addEventListener('pointerleave', this.onPointerLeave, { passive: true });
+  }
+
+  #bindContextEvents() {
+    this.onContextLost = (event) => {
+      event.preventDefault();
+      if (this.disposed) return;
+      this.visible = false;
+      if (typeof this.options.onContextLost === 'function') this.options.onContextLost(event);
+    };
+    this.onContextRestored = () => {
+      if (this.disposed) return;
+      this.program = createProgram(this.gl);
+      this.locations = this.#getLocations();
+      this.#setupGeometry();
+      this.visible = true;
+      this.resize();
+      if (typeof this.options.onContextRestored === 'function') this.options.onContextRestored();
+    };
+    this.canvas.addEventListener('webglcontextlost', this.onContextLost, false);
+    this.canvas.addEventListener('webglcontextrestored', this.onContextRestored, false);
+  }
+
+  setPreset(preset) {
+    this.preset = { ...preset };
+    this.colors = preset.colors.map(hexToRgb01);
+    this.timeOffset = preset.seed * 0.73;
+  }
+
+  setDprCap(cap) {
+    this.options.dprCap = cap;
+    this.resize();
+  }
+
+  setMouseColor(enabled) {
+    this.options.mouseColor = enabled !== false;
+    if (this.options.mouseColor) {
+      if (this.onPointerMove) return this;
+      this.#bindEvents();
+      return this;
+    }
+    if (this.onPointerMove) {
+      const target = this.eventTarget;
+      target.removeEventListener('pointermove', this.onPointerMove);
+      target.removeEventListener('pointerdown', this.onPointerMove);
+      target.removeEventListener('pointerleave', this.onPointerLeave);
+      this.onPointerMove = null;
+      this.onPointerLeave = null;
+    }
+    this.motionTarget = 0;
+    return this;
+  }
+
+  randomize() {
+    this.preset.seed = Math.random() * 100;
+    this.timeOffset = Math.random() * 40;
+  }
+
+  resize() {
+    const dpr = Math.min(window.devicePixelRatio || 1, this.options.dprCap);
+    const rect = this.canvas.getBoundingClientRect();
+    const width = Math.max(2, Math.round(rect.width * dpr));
+    const height = Math.max(2, Math.round(rect.height * dpr));
+    if (this.canvas.width !== width || this.canvas.height !== height) {
+      this.canvas.width = width;
+      this.canvas.height = height;
+    }
+    this.gl.viewport(0, 0, width, height);
+  }
+
+  draw(elapsedSeconds, paused = false) {
+    if (this.disposed || !this.visible) return;
+    const gl = this.gl;
+    this.pointer[0] += (this.pointerTarget[0] - this.pointer[0]) * 0.08;
+    this.pointer[1] += (this.pointerTarget[1] - this.pointer[1]) * 0.08;
+    this.motion += (this.motionTarget - this.motion) * 0.07;
+
+    gl.useProgram(this.program);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+    gl.enableVertexAttribArray(this.locations.position);
+    gl.vertexAttribPointer(this.locations.position, 2, gl.FLOAT, false, 0, 0);
+
+    gl.uniform2f(this.locations.resolution, this.canvas.width, this.canvas.height);
+    gl.uniform1f(this.locations.time, this.timeOffset + (paused ? 0 : elapsedSeconds * this.preset.speed));
+    gl.uniform1f(this.locations.seed, this.preset.seed);
+    gl.uniform1f(this.locations.motion, this.motion);
+    gl.uniform2f(this.locations.pointer, this.pointer[0], this.pointer[1]);
+    gl.uniform3fv(this.locations.colorA, this.colors[0]);
+    gl.uniform3fv(this.locations.colorB, this.colors[1]);
+    gl.uniform3fv(this.locations.colorC, this.colors[2]);
+    gl.uniform3fv(this.locations.colorD, this.colors[3]);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+  }
+
+  dispose() {
+    this.disposed = true;
+    const target = this.eventTarget || this.canvas;
+    target.removeEventListener('pointermove', this.onPointerMove);
+    target.removeEventListener('pointerdown', this.onPointerMove);
+    target.removeEventListener('pointerleave', this.onPointerLeave);
+    this.canvas.removeEventListener('webglcontextlost', this.onContextLost, false);
+    this.canvas.removeEventListener('webglcontextrestored', this.onContextRestored, false);
+    this.gl.deleteBuffer(this.buffer);
+    this.gl.deleteProgram(this.program);
+    const lose = this.gl.getExtension('WEBGL_lose_context');
+    if (lose) lose.loseContext();
+  }
+}
+
+function rgb(color, alpha = 1) {
+  const [r, g, b] = hexToRgb01(color).map((value) => Math.round(value * 255));
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+class FallbackRenderer {
+  constructor(canvas, preset, options = {}) {
+    this.canvas = canvas;
+    this.preset = preset;
+    this.context = canvas.getContext('2d');
+    this.visible = true;
+    this.timePhase = 0;
+    this.dprCap = options.dprCap || 1.5;
+  }
+
+  resize() {
+    const rect = this.canvas.getBoundingClientRect();
+    const dpr = Math.min(window.devicePixelRatio || 1, this.dprCap);
+    const width = Math.max(2, Math.round(rect.width * dpr));
+    const height = Math.max(2, Math.round(rect.height * dpr));
+    if (this.canvas.width !== width || this.canvas.height !== height) {
+      this.canvas.width = width;
+      this.canvas.height = height;
+    }
+  }
+
+  drawNebula(time) {
+    const ctx = this.context;
+    const { width, height } = this.canvas;
+    const t = (time + this.timePhase) * (this.preset.speed || 1);
+    const phase = (this.preset.seed || 0) * 0.7;
+    const gradient = ctx.createLinearGradient(0, 0, width, height);
+    gradient.addColorStop(0, this.preset.colors[0]);
+    gradient.addColorStop(0.38, this.preset.colors[1]);
+    gradient.addColorStop(0.72, this.preset.colors[2]);
+    gradient.addColorStop(1, this.preset.colors[3]);
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, width, height);
+
+    ctx.globalCompositeOperation = 'screen';
+    for (let index = 0; index < 6; index += 1) {
+      const x = (0.5 + 0.45 * Math.sin(t * 0.32 + index * 1.7 + phase)) * width;
+      const y = (0.5 + 0.4 * Math.cos(t * 0.25 + index + phase)) * height;
+      const radius = Math.max(width, height) * (0.08 + (index % 3) * 0.04);
+      const glow = ctx.createRadialGradient(x, y, 0, x, y, radius);
+      glow.addColorStop(0, rgb(this.preset.colors[(index + 1) % 4], 0.24));
+      glow.addColorStop(1, rgb(this.preset.colors[index % 4], 0));
+      ctx.fillStyle = glow;
+      ctx.fillRect(x - radius, y - radius, radius * 2, radius * 2);
+    }
+    ctx.globalCompositeOperation = 'source-over';
+  }
+
+  draw(time) {
+    if (!this.visible) return;
+    this.drawNebula(time);
+  }
+
+  setPreset(preset) {
+    this.preset = preset;
+  }
+
+  setDprCap(cap) {
+    this.dprCap = cap;
+    this.resize();
+  }
+
+  randomize() {
+    if (this.preset) {
+      this.preset.seed = Math.random() * 100;
+      this.timePhase = Math.random() * Math.PI * 2;
+    }
+  }
+  setMouseColor() {}
+  dispose() {}
+}
+
+/**
+ * Document-level shared rAF scheduler. Every component instance subscribes
+ * its own frame callback; the whole page runs ONE animation loop (like the
+ * original demo), which avoids jank from many competing rAF loops.
+ */
+const subscribers = [];
+let running = false;
+let rafId = 0;
+let last = 0;
+
+function tick(now) {
+  if (!running) return;
+  const activeItems = [];
+  {
+    for (const item of subscribers.slice()) {
+      try {
+        if (!item.isPaused()) activeItems.push(item);
+      } catch {}
+    }
+  }
+  if (activeItems.length === 0) {
+    running = false;
+    rafId = 0;
+    last = 0;
+    return;
+  }
+  const delta = last ? Math.min((now - last) / 1000, 0.05) : 0;
+  last = now;
+  // Schedule the next frame BEFORE running callbacks so one throwing
+  // subscriber can never kill the whole animation loop.
+  rafId = requestAnimationFrame(tick);
+  for (const item of activeItems) {
+    try {
+      item.onFrame(delta, now);
+    } catch (error) {
+      console.warn('[dlc-ui] frame error:', error);
+    }
+  }
+  if (subscribers.length === 0) {
+    cancelAnimationFrame(rafId);
+    running = false;
+    rafId = 0;
+  }
+}
+
+function start() {
+  if (running) return;
+  running = true;
+  last = 0;
+  rafId = requestAnimationFrame(tick);
+}
+
+function wakeScheduler() {
+  start();
+}
+
+function subscribeScheduler(onFrame, isPaused) {
+  const item = { onFrame, isPaused };
+  subscribers.push(item);
+  start();
+  return () => {
+    const index = subscribers.indexOf(item);
+    if (index !== -1) subscribers.splice(index, 1);
+    if (subscribers.length === 0 && rafId) {
+      cancelAnimationFrame(rafId);
+      running = false;
+      rafId = 0;
+    }
+  };
+}
+
+/**
+ * Gates drawing on "element intersects viewport AND the page tab is visible".
+ * Falls back to always-visible when IntersectionObserver is unavailable.
+ */
+function createVisibilityGuard(element, onChange = null) {
+  let intersecting = true;
+  let pageVisible = typeof document === 'undefined' || !document.hidden;
+  let disposed = false;
+  let observer = null;
+
+  if (typeof IntersectionObserver !== 'undefined') {
+    observer = new IntersectionObserver(
+      (entries) => {
+        intersecting = entries.some((entry) => entry.isIntersecting);
+        if (typeof onChange === 'function') onChange();
+      },
+      { rootMargin: '180px' }
+    );
+    observer.observe(element);
+  }
+
+  const onVisibilityChange = () => {
+    pageVisible = typeof document !== 'undefined' && !document.hidden;
+    if (typeof onChange === 'function') onChange();
+  };
+  if (typeof document !== 'undefined') {
+    document.addEventListener('visibilitychange', onVisibilityChange);
+  }
+
+  return {
+    isVisible() {
+      return intersecting && pageVisible;
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      if (observer) observer.disconnect();
+      if (typeof document !== 'undefined') {
+        document.removeEventListener('visibilitychange', onVisibilityChange);
+      }
+    }
+  };
 }
 
 /**
@@ -924,443 +1029,443 @@ function nextTick(fn) {
   }
 }
 
-function normalizeFps(value, fallback = 60) {
-  const fps = Number(value);
-  if (!Number.isFinite(fps)) return fallback;
-  return Math.min(60, Math.max(1, fps));
-}
-
-function createFrameGate(initialFps = 60) {
-  let fps = normalizeFps(initialFps);
-  let elapsed = 0;
-  return {
-    shouldDraw(delta) {
-      elapsed += delta;
-      const interval = 1 / fps;
-      if (elapsed + 0.0001 < interval) return false;
-      elapsed %= interval;
-      return true;
-    },
-    setFps(value) {
-      fps = normalizeFps(value, fps);
-      elapsed = 0;
-      return fps;
-    },
-    getFps() {
-      return fps;
-    }
-  };
-}
-
-function createReducedMotionPreference(enabled, onChange) {
-  const query = enabled && typeof matchMedia !== 'undefined'
-    ? matchMedia('(prefers-reduced-motion: reduce)')
-    : null;
-  const notify = () => {
-    if (typeof onChange === 'function') onChange(Boolean(query && query.matches));
-  };
-  if (query) {
-    if (typeof query.addEventListener === 'function') query.addEventListener('change', notify);
-    else if (typeof query.addListener === 'function') query.addListener(notify);
-  }
-  return {
-    matches() {
-      return Boolean(query && query.matches);
-    },
-    dispose() {
-      if (!query) return;
-      if (typeof query.removeEventListener === 'function') query.removeEventListener('change', notify);
-      else if (typeof query.removeListener === 'function') query.removeListener(notify);
-    }
-  };
+function normalizeFps(value, fallback = 60) {
+  const fps = Number(value);
+  if (!Number.isFinite(fps)) return fallback;
+  return Math.min(60, Math.max(1, fps));
+}
+
+function createFrameGate(initialFps = 60) {
+  let fps = normalizeFps(initialFps);
+  let elapsed = 0;
+  return {
+    shouldDraw(delta) {
+      elapsed += delta;
+      const interval = 1 / fps;
+      if (elapsed + 0.0001 < interval) return false;
+      elapsed %= interval;
+      return true;
+    },
+    setFps(value) {
+      fps = normalizeFps(value, fps);
+      elapsed = 0;
+      return fps;
+    },
+    getFps() {
+      return fps;
+    }
+  };
+}
+
+function createReducedMotionPreference(enabled, onChange) {
+  const query = enabled && typeof matchMedia !== 'undefined'
+    ? matchMedia('(prefers-reduced-motion: reduce)')
+    : null;
+  const notify = () => {
+    if (typeof onChange === 'function') onChange(Boolean(query && query.matches));
+  };
+  if (query) {
+    if (typeof query.addEventListener === 'function') query.addEventListener('change', notify);
+    else if (typeof query.addListener === 'function') query.addListener(notify);
+  }
+  return {
+    matches() {
+      return Boolean(query && query.matches);
+    },
+    dispose() {
+      if (!query) return;
+      if (typeof query.removeEventListener === 'function') query.removeEventListener('change', notify);
+      else if (typeof query.removeListener === 'function') query.removeListener(notify);
+    }
+  };
 }
 
-function toFiniteNumber(value) {
-  if (value == null || typeof value === 'boolean') return null;
-  if (typeof value === 'string' && value.trim() === '') return null;
-  const number = Number(value);
-  return Number.isFinite(number) ? number : null;
+function toFiniteNumber(value) {
+  if (value == null || typeof value === 'boolean') return null;
+  if (typeof value === 'string' && value.trim() === '') return null;
+  const number = Number(value);
+  return Number.isFinite(number) ? number : null;
 }
 
-/**
- * Mount a cosmic (nebula) capsule into `container`.
- *
- * Options: preset (literary name), width, height (number=px or string with
- * px/%/vw/vh/em/rem), colors, seed, speed, textRatio (0-100, text region
- * width in percent), text (HTML string or DOM nodes for the text slot),
- * colorContent (HTML string or DOM nodes for the color slot), quality,
- * renderer, quality, renderScale, powerPreference, fps, paused/static,
- * respectReducedMotion, mouseColor, cssVars.
- */
-function createCapsule(container, options = {}) {
-  if (!container || typeof container.appendChild !== 'function') {
-    throw new Error('createCapsule: container element is required');
-  }
-
-  const preset = { ...getPreset('capsule', options.preset ?? '初光') };
-  const merged = normalizeOptions(DEFAULTS.capsule, preset, options);
-  const normalizedColors = Array.isArray(merged.colors) ? merged.colors.map(normalizeColor) : [];
-  if (normalizedColors.length === 4 && normalizedColors.every(Boolean)) preset.colors = normalizedColors;
-  const initialSeed = toFiniteNumber(merged.seed);
-  const initialSpeed = toFiniteNumber(merged.speed);
-  if (initialSeed !== null) preset.seed = initialSeed;
-  if (initialSpeed !== null) preset.speed = initialSpeed;
-  merged.colors = [...preset.colors];
-  merged.seed = preset.seed;
-  merged.speed = preset.speed;
-  const optionColors = Array.isArray(options.colors) ? options.colors.map(normalizeColor) : [];
-  let colorOverride = optionColors.length === 4 && optionColors.every(Boolean)
-    ? [...optionColors]
-    : null;
-  let seedOverride = options.seed !== undefined ? toFiniteNumber(options.seed) : null;
-  let speedOverride = options.speed !== undefined ? toFiniteNumber(options.speed) : null;
-  let customLabel = typeof options.label === 'string' && options.label ? options.label : null;
-
-  const root = document.createElement('div');
-  root.className = 'hj-capsule-root hj-capsule-cosmic';
-  root.dataset.group = preset.group;
-  root.dataset.mode = 'nebula';
-  root.dataset.theme = preset.theme || 'light';
-  root.setAttribute('role', 'img');
-  const updateAria = () => {
-    root.setAttribute('aria-label', customLabel || COPY.capsuleAria.replace('{name}', preset.name));
-  };
-  updateAria();
-
-  // Slot containers are always present but transparent by default: without
-  // content they are invisible, so "no slot" behaves like the old
-  // showCopy=false. They only provide geometry — no typography, padding or
-  // background is imposed on user content (see docs: 插槽 CSS 约定).
-  const fillContent = (layer, content) => {
-    layer.innerHTML = '';
-    if (content == null) return;
-    if (typeof content === 'string') {
-      layer.innerHTML = content;
-      return;
-    }
-    const nodes = Array.isArray(content) ? content : [content];
-    for (const node of nodes) {
-      if (node && typeof node.nodeType === 'number') layer.appendChild(node);
-    }
-  };
-
-  const textLayer = document.createElement('div');
-  textLayer.className = 'hj-capsule-text hj-capsule-copy';
-
-  const visualLayer = document.createElement('div');
-  visualLayer.className = 'hj-capsule-visual';
-
-  fillContent(textLayer, options.text);
-  fillContent(visualLayer, options.colorContent);
-
-  const canvas = document.createElement('canvas');
-  canvas.className = 'hj-capsule-canvas';
-  canvas.setAttribute('aria-hidden', 'true');
-
-  root.appendChild(textLayer);
-  root.appendChild(visualLayer);
-  root.appendChild(canvas);
-  container.appendChild(root);
-
-  const emitter = createEmitter();
-  let manuallyPaused = merged.paused === true;
-  let reducedPaused = false;
-  let staticMode = merged.static === true;
-  let contextLost = false;
-  let disposed = false;
-  let renderOnce = () => {};
-  const dirty = {
-    preset: false,
-    seed: false,
-    speed: false,
-    colors: false,
-    textRatio: false,
-    cssVars: false,
-    mouseColor: false,
-    quality: false,
-    renderScale: false,
-    paused: false,
-    static: false,
-    fps: false
-  };
-
-  let renderer;
-  const useWebgl = merged.renderer !== 'canvas2d';
-  if (useWebgl) {
-    try {
-      renderer = new CosmicRenderer(canvas, merged, {
-        dprCap: effectiveDprCap(merged.quality, merged.renderScale),
-        mouseColor: merged.mouseColor !== false,
-        powerPreference: merged.powerPreference,
-        onContextLost: () => {
-          contextLost = true;
-          emitter.emit('contextlost', {});
-        },
-        onContextRestored: () => {
-          contextLost = false;
-          emitter.emit('contextrestored', {});
-          renderOnce();
-          wakeScheduler();
-        }
-      });
-    } catch (error) {
-      renderer = new FallbackRenderer(canvas, merged, {
-        dprCap: effectiveDprCap(merged.quality, merged.renderScale)
-      });
-      nextTick(() => {
-        if (disposed) return;
-        emitter.emit('error', { message: String(error && error.message ? error.message : error) });
-      });
-    }
-  } else {
-    renderer = new FallbackRenderer(canvas, merged, {
-      dprCap: effectiveDprCap(merged.quality, merged.renderScale)
-    });
-  }
-
-  let animationTime = 0;
-  const frameGate = createFrameGate(merged.fps);
-  renderOnce = () => renderer.draw(animationTime);
-
-  const applySize = () => {
-    root.style.width = parseSize(merged.width);
-    root.style.height = parseSize(merged.height);
-    const vars = merged.cssVars || {};
-    for (const name of Object.keys(vars)) root.style.setProperty(name, vars[name]);
-    if (merged.textRatio !== undefined) {
-      root.style.setProperty('--hj-text-width', `${merged.textRatio}%`);
-      // textRatio 是文字区宽度的唯一权威值：min-width 会阻止其缩小到
-      // 164px 以下（--hj-copy-min-width 的历史默认），这里强制归零。
-      root.style.setProperty('--hj-text-min-width', '0');
-    }
-    renderer.resize();
-  };
-  applySize();
-
-  const resize = () => {
-    renderer.resize();
-    if (manuallyPaused || reducedPaused || staticMode) renderOnce();
-  };
-  const resizeObserver = typeof ResizeObserver !== 'undefined'
-    ? new ResizeObserver(resize)
-    : null;
-  if (resizeObserver) resizeObserver.observe(root);
-  else window.addEventListener('resize', resize);
-
-  const visibility = createVisibilityGuard(root, wakeScheduler);
-  const motionPreference = createReducedMotionPreference(
-    merged.respectReducedMotion,
-    (matches) => {
-      reducedPaused = matches;
-      if (matches) renderOnce();
-      else wakeScheduler();
-    }
-  );
-  reducedPaused = motionPreference.matches();
-  const isMotionPaused = () => manuallyPaused || reducedPaused || staticMode || contextLost;
-
-  root.addEventListener('pointerenter', (event) => emitter.emit('pointerenter', { event, preset: { ...preset } }));
-  root.addEventListener('pointerleave', (event) => emitter.emit('pointerleave', { event, preset: { ...preset } }));
-  root.addEventListener('click', (event) => {
-    emitter.emit('click', { event, preset: { ...preset } });
-  });
-  root.addEventListener('pointerdown', (event) => emitter.emit('pointerdown', { event, preset: { ...preset } }));
-  root.addEventListener('pointerup', (event) => emitter.emit('pointerup', { event, preset: { ...preset } }));
-  root.addEventListener('dblclick', (event) => emitter.emit('dblclick', { event, preset: { ...preset } }));
-
-  renderOnce();
-  const unsubscribe = subscribeScheduler(
-    (delta) => {
-      animationTime += delta;
-      if (frameGate.shouldDraw(delta)) renderer.draw(animationTime);
-    },
-    () => isMotionPaused() || !visibility.isVisible()
-  );
-
-  nextTick(() => {
-    if (disposed) return;
-    emitter.emit('ready', { preset: { ...preset } });
-  });
-
-  const syncTheme = () => {
-    root.dataset.mode = 'nebula';
-    root.dataset.theme = preset.theme || 'light';
-    updateAria();
-  };
-
-  return {
-    element: root,
-    canvas,
-    preset,
-    on: emitter.on,
-    off: emitter.off,
-    setPreset(ref) {
-      const next = getPreset('capsule', ref);
-      dirty.preset = true;
-      Object.assign(preset, next);
-      if (colorOverride) preset.colors = [...colorOverride];
-      if (seedOverride !== null) preset.seed = seedOverride;
-      if (speedOverride !== null) preset.speed = speedOverride;
-      const nextColors = preset.colors.map(normalizeColor);
-      if (nextColors.every(Boolean)) preset.colors = nextColors;
-      renderer.setPreset({ ...preset });
-      syncTheme();
-      renderer.resize();
-      if (isMotionPaused()) renderOnce();
-      emitter.emit('presetchange', { preset: { ...next } });
-      return this;
-    },
-    setColors(colors) {
-      const next = Array.isArray(colors) ? colors.map(normalizeColor) : [];
-      if (next.length !== 4 || next.some((color) => !color)) return this;
-      dirty.colors = true;
-      colorOverride = [...next];
-      preset.colors = next;
-      renderer.setPreset({ ...preset, colors: next });
-      if (isMotionPaused()) renderOnce();
-      return this;
-    },
-    setSeed(seed) {
-      const value = toFiniteNumber(seed);
-      if (value === null) return this;
-      dirty.seed = true;
-      seedOverride = value;
-      preset.seed = value;
-      renderer.setPreset({ ...preset });
-      if (isMotionPaused()) renderOnce();
-      return this;
-    },
-    setSpeed(speed) {
-      const value = toFiniteNumber(speed);
-      if (value === null) return this;
-      dirty.speed = true;
-      speedOverride = value;
-      preset.speed = value;
-      renderer.setPreset({ ...preset });
-      if (isMotionPaused()) renderOnce();
-      return this;
-    },
-    setText(content) {
-      fillContent(textLayer, content);
-      return this;
-    },
-    setColorContent(content) {
-      fillContent(visualLayer, content);
-      return this;
-    },
-    setTextRatio(ratio) {
-      const value = Number(ratio);
-      if (!Number.isFinite(value) || value < 0 || value > 100) return this;
-      dirty.textRatio = true;
-      merged.textRatio = value;
-      root.style.setProperty('--hj-text-width', `${value}%`);
-      root.style.setProperty('--hj-text-min-width', '0');
-      return this;
-    },
-    setCssVars(vars) {
-      if (!vars || typeof vars !== 'object') return this;
-      dirty.cssVars = true;
-      merged.cssVars = { ...(merged.cssVars || {}), ...vars };
-      for (const name of Object.keys(vars)) root.style.setProperty(name, vars[name]);
-      return this;
-    },
-    setLabel(label) {
-      customLabel = typeof label === 'string' && label ? label : null;
-      updateAria();
-      return this;
-    },
-    setMouseColor(value) {
-      dirty.mouseColor = true;
-      merged.mouseColor = value !== false;
-      if (typeof renderer.setMouseColor === 'function') renderer.setMouseColor(merged.mouseColor);
-      return this;
-    },
-    setSize(width, height) {
-      if (width !== undefined) {
-        parseSize(width); // 非法尺寸直接抛错前先校验，避免污染内部状态
-        merged.width = width;
-      }
-      if (height !== undefined) {
-        parseSize(height);
-        merged.height = height;
-      }
-      applySize();
-      if (isMotionPaused()) renderOnce();
-      return this;
-    },
-    randomize() {
-      this.setSeed(Math.random() * 100);
-      return this;
-    },
-    pause() {
-      dirty.paused = true;
-      manuallyPaused = true;
-      renderOnce();
-      return this;
-    },
-    resume() {
-      dirty.paused = true;
-      manuallyPaused = false;
-      wakeScheduler();
-      return this;
-    },
-    setPaused(value) {
-      return value ? this.pause() : this.resume();
-    },
-    setStatic(value) {
-      dirty.static = true;
-      staticMode = value === true;
-      merged.static = staticMode;
-      if (staticMode) renderOnce();
-      else wakeScheduler();
-      return this;
-    },
-    setFps(fps) {
-      dirty.fps = true;
-      merged.fps = frameGate.setFps(fps);
-      wakeScheduler();
-      return this;
-    },
-    setQuality(quality) {
-      dirty.quality = true;
-      merged.quality = quality;
-      if (typeof renderer.setDprCap === 'function') {
-        renderer.setDprCap(effectiveDprCap(quality, merged.renderScale));
-      }
-      if (isMotionPaused()) renderOnce();
-      return this;
-    },
-    setRenderScale(renderScale) {
-      const value = Number(renderScale);
-      if (!Number.isFinite(value)) return this;
-      dirty.renderScale = true;
-      merged.renderScale = Math.min(1, Math.max(0.25, value));
-      if (typeof renderer.setDprCap === 'function') {
-        renderer.setDprCap(effectiveDprCap(merged.quality, merged.renderScale));
-      }
-      if (isMotionPaused()) renderOnce();
-      return this;
-    },
-    dispose() {
-      disposed = true;
-      unsubscribe();
-      visibility.dispose();
-      motionPreference.dispose();
-      if (resizeObserver) resizeObserver.disconnect();
-      else window.removeEventListener('resize', resize);
-      renderer.dispose();
-      root.remove();
-    },
-    get textRatio() { return merged.textRatio; },
-    get cssVars() { return merged.cssVars; },
-    get mouseColor() { return merged.mouseColor; },
-    get quality() { return merged.quality; },
-    get renderScale() { return merged.renderScale; },
-    get paused() { return manuallyPaused; },
-    get static() { return staticMode; },
-    get fps() { return frameGate.getFps(); },
-    dirty
-  };
+/**
+ * Mount a cosmic (nebula) capsule into `container`.
+ *
+ * Options: preset (literary name), width, height (number=px or string with
+ * px/%/vw/vh/em/rem), colors, seed, speed, textRatio (0-100, text region
+ * width in percent), text (HTML string or DOM nodes for the text slot),
+ * colorContent (HTML string or DOM nodes for the color slot), quality,
+ * renderer, quality, renderScale, powerPreference, fps, paused/static,
+ * respectReducedMotion, mouseColor, cssVars.
+ */
+function createCapsule(container, options = {}) {
+  if (!container || typeof container.appendChild !== 'function') {
+    throw new Error('createCapsule: container element is required');
+  }
+
+  const preset = { ...getPreset('capsule', options.preset ?? '初光') };
+  const merged = normalizeOptions(DEFAULTS.capsule, preset, options);
+  const normalizedColors = Array.isArray(merged.colors) ? merged.colors.map(normalizeColor) : [];
+  if (normalizedColors.length === 4 && normalizedColors.every(Boolean)) preset.colors = normalizedColors;
+  const initialSeed = toFiniteNumber(merged.seed);
+  const initialSpeed = toFiniteNumber(merged.speed);
+  if (initialSeed !== null) preset.seed = initialSeed;
+  if (initialSpeed !== null) preset.speed = initialSpeed;
+  merged.colors = [...preset.colors];
+  merged.seed = preset.seed;
+  merged.speed = preset.speed;
+  const optionColors = Array.isArray(options.colors) ? options.colors.map(normalizeColor) : [];
+  let colorOverride = optionColors.length === 4 && optionColors.every(Boolean)
+    ? [...optionColors]
+    : null;
+  let seedOverride = options.seed !== undefined ? toFiniteNumber(options.seed) : null;
+  let speedOverride = options.speed !== undefined ? toFiniteNumber(options.speed) : null;
+  let customLabel = typeof options.label === 'string' && options.label ? options.label : null;
+
+  const root = document.createElement('div');
+  root.className = 'hj-capsule-root hj-capsule-cosmic';
+  root.dataset.group = preset.group;
+  root.dataset.mode = 'nebula';
+  root.dataset.theme = preset.theme || 'light';
+  root.setAttribute('role', 'img');
+  const updateAria = () => {
+    root.setAttribute('aria-label', customLabel || COPY.capsuleAria.replace('{name}', preset.name));
+  };
+  updateAria();
+
+  // Slot containers are always present but transparent by default: without
+  // content they are invisible, so "no slot" behaves like the old
+  // showCopy=false. They only provide geometry — no typography, padding or
+  // background is imposed on user content (see docs: 插槽 CSS 约定).
+  const fillContent = (layer, content) => {
+    layer.innerHTML = '';
+    if (content == null) return;
+    if (typeof content === 'string') {
+      layer.innerHTML = content;
+      return;
+    }
+    const nodes = Array.isArray(content) ? content : [content];
+    for (const node of nodes) {
+      if (node && typeof node.nodeType === 'number') layer.appendChild(node);
+    }
+  };
+
+  const textLayer = document.createElement('div');
+  textLayer.className = 'hj-capsule-text hj-capsule-copy';
+
+  const visualLayer = document.createElement('div');
+  visualLayer.className = 'hj-capsule-visual';
+
+  fillContent(textLayer, options.text);
+  fillContent(visualLayer, options.colorContent);
+
+  const canvas = document.createElement('canvas');
+  canvas.className = 'hj-capsule-canvas';
+  canvas.setAttribute('aria-hidden', 'true');
+
+  root.appendChild(textLayer);
+  root.appendChild(visualLayer);
+  root.appendChild(canvas);
+  container.appendChild(root);
+
+  const emitter = createEmitter();
+  let manuallyPaused = merged.paused === true;
+  let reducedPaused = false;
+  let staticMode = merged.static === true;
+  let contextLost = false;
+  let disposed = false;
+  let renderOnce = () => {};
+  const dirty = {
+    preset: false,
+    seed: false,
+    speed: false,
+    colors: false,
+    textRatio: false,
+    cssVars: false,
+    mouseColor: false,
+    quality: false,
+    renderScale: false,
+    paused: false,
+    static: false,
+    fps: false
+  };
+
+  let renderer;
+  const useWebgl = merged.renderer !== 'canvas2d';
+  if (useWebgl) {
+    try {
+      renderer = new CosmicRenderer(canvas, merged, {
+        dprCap: effectiveDprCap(merged.quality, merged.renderScale),
+        mouseColor: merged.mouseColor !== false,
+        powerPreference: merged.powerPreference,
+        onContextLost: () => {
+          contextLost = true;
+          emitter.emit('contextlost', {});
+        },
+        onContextRestored: () => {
+          contextLost = false;
+          emitter.emit('contextrestored', {});
+          renderOnce();
+          wakeScheduler();
+        }
+      });
+    } catch (error) {
+      renderer = new FallbackRenderer(canvas, merged, {
+        dprCap: effectiveDprCap(merged.quality, merged.renderScale)
+      });
+      nextTick(() => {
+        if (disposed) return;
+        emitter.emit('error', { message: String(error && error.message ? error.message : error) });
+      });
+    }
+  } else {
+    renderer = new FallbackRenderer(canvas, merged, {
+      dprCap: effectiveDprCap(merged.quality, merged.renderScale)
+    });
+  }
+
+  let animationTime = 0;
+  const frameGate = createFrameGate(merged.fps);
+  renderOnce = () => renderer.draw(animationTime);
+
+  const applySize = () => {
+    root.style.width = parseSize(merged.width);
+    root.style.height = parseSize(merged.height);
+    const vars = merged.cssVars || {};
+    for (const name of Object.keys(vars)) root.style.setProperty(name, vars[name]);
+    if (merged.textRatio !== undefined) {
+      root.style.setProperty('--hj-text-width', `${merged.textRatio}%`);
+      // textRatio 是文字区宽度的唯一权威值：min-width 会阻止其缩小到
+      // 164px 以下（--hj-copy-min-width 的历史默认），这里强制归零。
+      root.style.setProperty('--hj-text-min-width', '0');
+    }
+    renderer.resize();
+  };
+  applySize();
+
+  const resize = () => {
+    renderer.resize();
+    if (manuallyPaused || reducedPaused || staticMode) renderOnce();
+  };
+  const resizeObserver = typeof ResizeObserver !== 'undefined'
+    ? new ResizeObserver(resize)
+    : null;
+  if (resizeObserver) resizeObserver.observe(root);
+  else window.addEventListener('resize', resize);
+
+  const visibility = createVisibilityGuard(root, wakeScheduler);
+  const motionPreference = createReducedMotionPreference(
+    merged.respectReducedMotion,
+    (matches) => {
+      reducedPaused = matches;
+      if (matches) renderOnce();
+      else wakeScheduler();
+    }
+  );
+  reducedPaused = motionPreference.matches();
+  const isMotionPaused = () => manuallyPaused || reducedPaused || staticMode || contextLost;
+
+  root.addEventListener('pointerenter', (event) => emitter.emit('pointerenter', { event, preset: { ...preset } }));
+  root.addEventListener('pointerleave', (event) => emitter.emit('pointerleave', { event, preset: { ...preset } }));
+  root.addEventListener('click', (event) => {
+    emitter.emit('click', { event, preset: { ...preset } });
+  });
+  root.addEventListener('pointerdown', (event) => emitter.emit('pointerdown', { event, preset: { ...preset } }));
+  root.addEventListener('pointerup', (event) => emitter.emit('pointerup', { event, preset: { ...preset } }));
+  root.addEventListener('dblclick', (event) => emitter.emit('dblclick', { event, preset: { ...preset } }));
+
+  renderOnce();
+  const unsubscribe = subscribeScheduler(
+    (delta) => {
+      animationTime += delta;
+      if (frameGate.shouldDraw(delta)) renderer.draw(animationTime);
+    },
+    () => isMotionPaused() || !visibility.isVisible()
+  );
+
+  nextTick(() => {
+    if (disposed) return;
+    emitter.emit('ready', { preset: { ...preset } });
+  });
+
+  const syncTheme = () => {
+    root.dataset.mode = 'nebula';
+    root.dataset.theme = preset.theme || 'light';
+    updateAria();
+  };
+
+  return {
+    element: root,
+    canvas,
+    preset,
+    on: emitter.on,
+    off: emitter.off,
+    setPreset(ref) {
+      const next = getPreset('capsule', ref);
+      dirty.preset = true;
+      Object.assign(preset, next);
+      if (colorOverride) preset.colors = [...colorOverride];
+      if (seedOverride !== null) preset.seed = seedOverride;
+      if (speedOverride !== null) preset.speed = speedOverride;
+      const nextColors = preset.colors.map(normalizeColor);
+      if (nextColors.every(Boolean)) preset.colors = nextColors;
+      renderer.setPreset({ ...preset });
+      syncTheme();
+      renderer.resize();
+      if (isMotionPaused()) renderOnce();
+      emitter.emit('presetchange', { preset: { ...next } });
+      return this;
+    },
+    setColors(colors) {
+      const next = Array.isArray(colors) ? colors.map(normalizeColor) : [];
+      if (next.length !== 4 || next.some((color) => !color)) return this;
+      dirty.colors = true;
+      colorOverride = [...next];
+      preset.colors = next;
+      renderer.setPreset({ ...preset, colors: next });
+      if (isMotionPaused()) renderOnce();
+      return this;
+    },
+    setSeed(seed) {
+      const value = toFiniteNumber(seed);
+      if (value === null) return this;
+      dirty.seed = true;
+      seedOverride = value;
+      preset.seed = value;
+      renderer.setPreset({ ...preset });
+      if (isMotionPaused()) renderOnce();
+      return this;
+    },
+    setSpeed(speed) {
+      const value = toFiniteNumber(speed);
+      if (value === null) return this;
+      dirty.speed = true;
+      speedOverride = value;
+      preset.speed = value;
+      renderer.setPreset({ ...preset });
+      if (isMotionPaused()) renderOnce();
+      return this;
+    },
+    setText(content) {
+      fillContent(textLayer, content);
+      return this;
+    },
+    setColorContent(content) {
+      fillContent(visualLayer, content);
+      return this;
+    },
+    setTextRatio(ratio) {
+      const value = Number(ratio);
+      if (!Number.isFinite(value) || value < 0 || value > 100) return this;
+      dirty.textRatio = true;
+      merged.textRatio = value;
+      root.style.setProperty('--hj-text-width', `${value}%`);
+      root.style.setProperty('--hj-text-min-width', '0');
+      return this;
+    },
+    setCssVars(vars) {
+      if (!vars || typeof vars !== 'object') return this;
+      dirty.cssVars = true;
+      merged.cssVars = { ...(merged.cssVars || {}), ...vars };
+      for (const name of Object.keys(vars)) root.style.setProperty(name, vars[name]);
+      return this;
+    },
+    setLabel(label) {
+      customLabel = typeof label === 'string' && label ? label : null;
+      updateAria();
+      return this;
+    },
+    setMouseColor(value) {
+      dirty.mouseColor = true;
+      merged.mouseColor = value !== false;
+      if (typeof renderer.setMouseColor === 'function') renderer.setMouseColor(merged.mouseColor);
+      return this;
+    },
+    setSize(width, height) {
+      if (width !== undefined) {
+        parseSize(width); // 非法尺寸直接抛错前先校验，避免污染内部状态
+        merged.width = width;
+      }
+      if (height !== undefined) {
+        parseSize(height);
+        merged.height = height;
+      }
+      applySize();
+      if (isMotionPaused()) renderOnce();
+      return this;
+    },
+    randomize() {
+      this.setSeed(Math.random() * 100);
+      return this;
+    },
+    pause() {
+      dirty.paused = true;
+      manuallyPaused = true;
+      renderOnce();
+      return this;
+    },
+    resume() {
+      dirty.paused = true;
+      manuallyPaused = false;
+      wakeScheduler();
+      return this;
+    },
+    setPaused(value) {
+      return value ? this.pause() : this.resume();
+    },
+    setStatic(value) {
+      dirty.static = true;
+      staticMode = value === true;
+      merged.static = staticMode;
+      if (staticMode) renderOnce();
+      else wakeScheduler();
+      return this;
+    },
+    setFps(fps) {
+      dirty.fps = true;
+      merged.fps = frameGate.setFps(fps);
+      wakeScheduler();
+      return this;
+    },
+    setQuality(quality) {
+      dirty.quality = true;
+      merged.quality = quality;
+      if (typeof renderer.setDprCap === 'function') {
+        renderer.setDprCap(effectiveDprCap(quality, merged.renderScale));
+      }
+      if (isMotionPaused()) renderOnce();
+      return this;
+    },
+    setRenderScale(renderScale) {
+      const value = Number(renderScale);
+      if (!Number.isFinite(value)) return this;
+      dirty.renderScale = true;
+      merged.renderScale = Math.min(1, Math.max(0.25, value));
+      if (typeof renderer.setDprCap === 'function') {
+        renderer.setDprCap(effectiveDprCap(merged.quality, merged.renderScale));
+      }
+      if (isMotionPaused()) renderOnce();
+      return this;
+    },
+    dispose() {
+      disposed = true;
+      unsubscribe();
+      visibility.dispose();
+      motionPreference.dispose();
+      if (resizeObserver) resizeObserver.disconnect();
+      else window.removeEventListener('resize', resize);
+      renderer.dispose();
+      root.remove();
+    },
+    get textRatio() { return merged.textRatio; },
+    get cssVars() { return merged.cssVars; },
+    get mouseColor() { return merged.mouseColor; },
+    get quality() { return merged.quality; },
+    get renderScale() { return merged.renderScale; },
+    get paused() { return manuallyPaused; },
+    get static() { return staticMode; },
+    get fps() { return frameGate.getFps(); },
+    dirty
+  };
 }
 
 export { createCapsule };