@5even7/dlc-ui 0.2.0 → 0.2.2

package/dist/index.cjs

@@ -432,7 +432,7 @@ var DEFAULTS = {
     renderer: 'auto',
     respectReducedMotion: true,
     mouseColor: true,
-    showCopy: true
+    textRatio: 39
   },
   progress: {
     width: 454,
@@ -441,43 +441,250 @@ var DEFAULTS = {
     max: 100,
     draggable: true,
     keyboard: true,
+    disabled: false,
+    valueSuffix: '%',
     edgeStyle: 'flow',
     quality: 'auto',
     renderer: 'auto',
-    showCopy: true,
+    textRatio: 54,
+    showValue: true,
     respectReducedMotion: true
   }
 };
 
-/**
- * All user-facing copy lives here so wording/brand changes never require a
- * global search. Templates use {brand} {code} {name} placeholders.
+/**
+ * Internal accessibility labels and small UI text. Since the copy API was
+ * removed (slots own the text area), these are no longer user-overridable.
+ * Templates use {brand} {code} {name} placeholders.
  */
 var COPY = {
   brandName: '画境观屿',
-  dragLabel: 'DRAG',
   valueSuffix: '%',
   progressAria: '{brand} {code} 加载进度',
   capsuleAria: '打开 {name} 沉浸预览'
 };
 
-function hexToRgb01$1(hex) {
-  var normalized = hex.replace('#', '');
-  var value = Number.parseInt(normalized, 16);
+/**
+ * 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.
+ */
+
+var NAMED_COLORS = {
+  aliceblue: '#f0f8ff',
+  antiquewhite: '#faebd7',
+  aqua: '#00ffff',
+  aquamarine: '#7fffd4',
+  azure: '#f0ffff',
+  beige: '#f5f5dc',
+  bisque: '#ffe4c4',
+  black: '#000000',
+  blanchedalmond: '#ffebcd',
+  blue: '#0000ff',
+  blueviolet: '#8a2be2',
+  brown: '#a52a2a',
+  burlywood: '#deb887',
+  cadetblue: '#5f9ea0',
+  chartreuse: '#7fff00',
+  chocolate: '#d2691e',
+  coral: '#ff7f50',
+  cornflowerblue: '#6495ed',
+  cornsilk: '#fff8dc',
+  crimson: '#dc143c',
+  cyan: '#00ffff',
+  darkblue: '#00008b',
+  darkcyan: '#008b8b',
+  darkgoldenrod: '#b8860b',
+  darkgray: '#a9a9a9',
+  darkgreen: '#006400',
+  darkgrey: '#a9a9a9',
+  darkkhaki: '#bdb76b',
+  darkmagenta: '#8b008b',
+  darkolivegreen: '#556b2f',
+  darkorange: '#ff8c00',
+  darkorchid: '#9932cc',
+  darkred: '#8b0000',
+  darksalmon: '#e9967a',
+  darkseagreen: '#8fbc8f',
+  darkslateblue: '#483d8b',
+  darkslategray: '#2f4f4f',
+  darkslategrey: '#2f4f4f',
+  darkturquoise: '#00ced1',
+  darkviolet: '#9400d3',
+  deeppink: '#ff1493',
+  deepskyblue: '#00bfff',
+  dimgray: '#696969',
+  dimgrey: '#696969',
+  dodgerblue: '#1e90ff',
+  firebrick: '#b22222',
+  floralwhite: '#fffaf0',
+  forestgreen: '#228b22',
+  fuchsia: '#ff00ff',
+  gainsboro: '#dcdcdc',
+  ghostwhite: '#f8f8ff',
+  gold: '#ffd700',
+  goldenrod: '#daa520',
+  gray: '#808080',
+  green: '#008000',
+  greenyellow: '#adff2f',
+  grey: '#808080',
+  honeydew: '#f0fff0',
+  hotpink: '#ff69b4',
+  indianred: '#cd5c5c',
+  indigo: '#4b0082',
+  ivory: '#fffff0',
+  khaki: '#f0e68c',
+  lavender: '#e6e6fa',
+  lavenderblush: '#fff0f5',
+  lawngreen: '#7cfc00',
+  lemonchiffon: '#fffacd',
+  lightblue: '#add8e6',
+  lightcoral: '#f08080',
+  lightcyan: '#e0ffff',
+  lightgoldenrodyellow: '#fafad2',
+  lightgray: '#d3d3d3',
+  lightgreen: '#90ee90',
+  lightgrey: '#d3d3d3',
+  lightpink: '#ffb6c1',
+  lightsalmon: '#ffa07a',
+  lightseagreen: '#20b2aa',
+  lightskyblue: '#87cefa',
+  lightslategray: '#778899',
+  lightslategrey: '#778899',
+  lightsteelblue: '#b0c4de',
+  lightyellow: '#ffffe0',
+  lime: '#00ff00',
+  limegreen: '#32cd32',
+  linen: '#faf0e6',
+  magenta: '#ff00ff',
+  maroon: '#800000',
+  mediumaquamarine: '#66cdaa',
+  mediumblue: '#0000cd',
+  mediumorchid: '#ba55d3',
+  mediumpurple: '#9370db',
+  mediumseagreen: '#3cb371',
+  mediumslateblue: '#7b68ee',
+  mediumspringgreen: '#00fa9a',
+  mediumturquoise: '#48d1cc',
+  mediumvioletred: '#c71585',
+  midnightblue: '#191970',
+  mintcream: '#f5fffa',
+  mistyrose: '#ffe4e1',
+  moccasin: '#ffe4b5',
+  navajowhite: '#ffdead',
+  navy: '#000080',
+  oldlace: '#fdf5e6',
+  olive: '#808000',
+  olivedrab: '#6b8e23',
+  orange: '#ffa500',
+  orangered: '#ff4500',
+  orchid: '#da70d6',
+  palegoldenrod: '#eee8aa',
+  palegreen: '#98fb98',
+  paleturquoise: '#afeeee',
+  palevioletred: '#db7093',
+  papayawhip: '#ffefd5',
+  peachpuff: '#ffdab9',
+  peru: '#cd853f',
+  pink: '#ffc0cb',
+  plum: '#dda0dd',
+  powderblue: '#b0e0e6',
+  purple: '#800080',
+  rebeccapurple: '#663399',
+  red: '#ff0000',
+  rosybrown: '#bc8f8f',
+  royalblue: '#4169e1',
+  saddlebrown: '#8b4513',
+  salmon: '#fa8072',
+  sandybrown: '#f4a460',
+  seagreen: '#2e8b57',
+  seashell: '#fff5ee',
+  sienna: '#a0522d',
+  silver: '#c0c0c0',
+  skyblue: '#87ceeb',
+  slateblue: '#6a5acd',
+  slategray: '#708090',
+  slategrey: '#708090',
+  snow: '#fffafa',
+  springgreen: '#00ff7f',
+  steelblue: '#4682b4',
+  tan: '#d2b48c',
+  teal: '#008080',
+  thistle: '#d8bfd8',
+  tomato: '#ff6347',
+  turquoise: '#40e0d0',
+  violet: '#ee82ee',
+  wheat: '#f5deb3',
+  white: '#ffffff',
+  whitesmoke: '#f5f5f5',
+  yellow: '#ffff00',
+  yellowgreen: '#9acd32'
+};
+function clampChannel(value) {
+  return Math.min(255, Math.max(0, Math.round(value)));
+}
+function normalizeRgbArgs(args) {
+  var parts = args.split(/[,\s/]+/).filter(Boolean);
+  if (parts.length < 3) return null;
+  var to255 = function to255(value) {
+    if (typeof value !== 'string' || !value) return null;
+    if (value.endsWith('%')) return clampChannel(parseFloat(value) / 100 * 255);
+    var number = Number(value);
+    return Number.isFinite(number) ? clampChannel(number) : null;
+  };
+  var red = to255(parts[0]);
+  var green = to255(parts[1]);
+  var blue = to255(parts[2]);
+  if (red === null || green === null || blue === null) return null;
+  return "#".concat([red, green, blue].map(function (n) {
+    return n.toString(16).padStart(2, '0');
+  }).join(''));
+}
+
+/**
+ * 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.
+ */
+function normalizeColor(value) {
+  if (typeof value !== 'string') return null;
+  var input = value.trim();
+  if (!input) return null;
+  var lower = input.toLowerCase();
+  if (NAMED_COLORS[lower]) return NAMED_COLORS[lower];
+  if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(input)) {
+    var hex = input.slice(1).toLowerCase();
+    if (hex.length === 3) return "#".concat(hex.split('').map(function (c) {
+      return c + c;
+    }).join(''));
+    return "#".concat(hex);
+  }
+  var match = input.match(/^rgba?\((.*)\)$/i);
+  if (match) return normalizeRgbArgs(match[1]);
+  return null;
+}
+function hexToRgb01$1(color) {
+  var hex = normalizeColor(color);
+  if (!hex) return [0, 0, 0];
+  var value = Number.parseInt(hex.slice(1), 16);
   return [(value >> 16 & 255) / 255, (value >> 8 & 255) / 255, (value & 255) / 255];
 }
-function hexToRgba(hex) {
+function hexToRgba(color) {
   var alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  var normalized = hex.replace('#', '');
-  var value = Number.parseInt(normalized, 16);
+  var hex = normalizeColor(color);
+  if (!hex) return 'rgba(0, 0, 0, 0)';
+  var value = Number.parseInt(hex.slice(1), 16);
   var red = value >> 16 & 255;
   var green = value >> 8 & 255;
   var blue = value & 255;
   return "rgba(".concat(red, ", ").concat(green, ", ").concat(blue, ", ").concat(alpha, ")");
 }
 function validateColors(colors) {
-  return Array.isArray(colors) && colors.length === 4 && colors.every(function (c) {
-    return typeof c === 'string' && /^#[0-9a-f]{6}$/i.test(c);
+  return Array.isArray(colors) && colors.length === 4 && colors.every(function (color) {
+    return normalizeColor(color) !== null;
   });
 }
 
@@ -555,6 +762,26 @@ var CosmicRenderer = /*#__PURE__*/function () {
       this.options.dprCap = cap;
       this.resize();
     }
+  }, {
+    key: "setMouseColor",
+    value: function setMouseColor(enabled) {
+      this.options.mouseColor = enabled !== false;
+      if (this.options.mouseColor) {
+        if (this.onPointerMove) return this;
+        _assertClassBrand(_CosmicRenderer_brand, this, _bindEvents).call(this);
+        return this;
+      }
+      if (this.onPointerMove) {
+        var 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;
+    }
   }, {
     key: "randomize",
     value: function randomize() {
@@ -703,6 +930,8 @@ var FallbackRenderer = /*#__PURE__*/function () {
       var _this$canvas = this.canvas,
         width = _this$canvas.width,
         height = _this$canvas.height;
+      var t = time * (this.preset.speed || 1);
+      var phase = (this.preset.seed || 0) * 0.7;
       var gradient = ctx.createLinearGradient(0, 0, width, height);
       gradient.addColorStop(0, this.preset.colors[0]);
       gradient.addColorStop(0.38, this.preset.colors[1]);
@@ -712,8 +941,8 @@ var FallbackRenderer = /*#__PURE__*/function () {
       ctx.fillRect(0, 0, width, height);
       ctx.globalCompositeOperation = 'screen';
       for (var index = 0; index < 6; index += 1) {
-        var x = (0.5 + 0.45 * Math.sin(time * 0.32 + index * 1.7)) * width;
-        var y = (0.5 + 0.4 * Math.cos(time * 0.25 + index)) * height;
+        var x = (0.5 + 0.45 * Math.sin(t * 0.32 + index * 1.7 + phase)) * width;
+        var y = (0.5 + 0.4 * Math.cos(t * 0.25 + index + phase)) * height;
         var radius = Math.max(width, height) * (0.08 + index % 3 * 0.04);
         var glow = ctx.createRadialGradient(x, y, 0, x, y, radius);
         glow.addColorStop(0, rgb(this.preset.colors[(index + 1) % 4], 0.24));
@@ -737,7 +966,12 @@ var FallbackRenderer = /*#__PURE__*/function () {
     }
   }, {
     key: "randomize",
-    value: function randomize() {}
+    value: function randomize() {
+      if (this.preset) this.preset.seed = Math.random() * 100;
+    }
+  }, {
+    key: "setMouseColor",
+    value: function setMouseColor() {}
   }, {
     key: "dispose",
     value: function dispose() {}
@@ -855,16 +1089,34 @@ function createVisibilityGuard(element) {
   };
 }
 
+/**
+ * Run a callback asynchronously, right after the current task and before the
+ * next paint. Used for mount-time events (ready / error) so listeners that
+ * are attached after create() still receive them. Falls back for legacy
+ * browsers that lack queueMicrotask / Promise.
+ */
+function nextTick(fn) {
+  if (typeof queueMicrotask === 'function') {
+    queueMicrotask(fn);
+  } else if (typeof Promise !== 'undefined' && typeof Promise.resolve === 'function') {
+    Promise.resolve().then(fn);
+  } else {
+    setTimeout(fn, 0);
+  }
+}
+
 function prefersReducedMotion$2() {
   return typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;
 }
 
 /**
- * Mount a cosmic (nebula) capsule into `container`.
- *
- * Options: preset (id/code/name or object), width, height (number=px or
- * string with px/%/vw/vh/em/rem), colors, seed, speed, quality,
- * respectReducedMotion, copy, cssVars.
+ * 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, respectReducedMotion, mouseColor, cssVars.
  */
 function createCapsule(container) {
   var _options$preset;
@@ -874,51 +1126,71 @@ function createCapsule(container) {
   }
   var preset = _objectSpread2({}, getPreset('capsule', (_options$preset = options.preset) !== null && _options$preset !== void 0 ? _options$preset : '初光'));
   var merged = normalizeOptions(DEFAULTS.capsule, preset, options);
-  var copy = _objectSpread2(_objectSpread2({}, COPY), merged.copy || {});
+  var normalizedColors = merged.colors.map(normalizeColor);
+  if (normalizedColors.every(Boolean)) preset.colors = normalizedColors;
+  preset.seed = merged.seed;
+  preset.speed = merged.speed;
+  var customLabel = typeof options.label === 'string' && options.label ? options.label : null;
   var 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('aria-label', copy.capsuleAria.replace('{name}', preset.name));
-  var copyEnabled = copy.enabled !== false && merged.showCopy !== false;
-  var copyText = function copyText(key, fallback) {
-    var value = copy[key];
-    return value === undefined ? fallback : value;
+  root.setAttribute('role', 'img');
+  var updateAria = function updateAria() {
+    root.setAttribute('aria-label', customLabel || COPY.capsuleAria.replace('{name}', preset.name));
   };
-  function buildCopyHtml() {
-    var codeText = copyText('code', preset.code);
-    var nameText = copyText('name', preset.name);
-    var subtitleText = copyText('subtitle', preset.subtitle);
-    var stateText = copyText('state', 'LIVE COSMIC STUDY');
-    var html = '';
-    if (codeText) html += "<span class=\"hj-capsule-code\">".concat(codeText, "</span>");
-    if (nameText) html += "<span class=\"hj-capsule-name\">".concat(nameText, "</span>");
-    if (subtitleText) html += "<span class=\"hj-capsule-brand\">".concat(subtitleText, "</span>");
-    if (stateText) html += "<span class=\"hj-capsule-state\">".concat(stateText, "</span>");
-    return html;
-  }
-  var copyLayer = document.createElement('div');
-  copyLayer.className = 'hj-capsule-copy';
-  var renderCopy = function renderCopy() {
-    if (copyEnabled) copyLayer.innerHTML = buildCopyHtml();
-  };
-  renderCopy();
-  var isHexColor = function isHexColor(value) {
-    return typeof value === 'string' && /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(value);
+  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 约定).
+  var fillContent = function fillContent(layer, content) {
+    layer.innerHTML = '';
+    if (content == null) return;
+    if (typeof content === 'string') {
+      layer.innerHTML = content;
+      return;
+    }
+    var nodes = Array.isArray(content) ? content : [content];
+    var _iterator = _createForOfIteratorHelper(nodes),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var node = _step.value;
+        if (node && typeof node.nodeType === 'number') layer.appendChild(node);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
   };
-  if (copy.background) {
-    root.style.setProperty('--hj-copy-bg', isHexColor(copy.background) ? "linear-gradient(90deg, ".concat(copy.background, " 0%, ").concat(copy.background, " 74%, ").concat(hexToRgba(copy.background, 0.97), " 84%, ").concat(hexToRgba(copy.background, 0), " 100%)") : copy.background);
-  }
-  if (copy.color) root.style.setProperty('--hj-copy-color', copy.color);
+  var textLayer = document.createElement('div');
+  textLayer.className = 'hj-capsule-text hj-capsule-copy';
+  var visualLayer = document.createElement('div');
+  visualLayer.className = 'hj-capsule-visual';
+  fillContent(textLayer, options.text);
+  fillContent(visualLayer, options.colorContent);
   var canvas = document.createElement('canvas');
   canvas.className = 'hj-capsule-canvas';
   canvas.setAttribute('aria-hidden', 'true');
-  if (copyEnabled) root.appendChild(copyLayer);
+  root.appendChild(textLayer);
+  root.appendChild(visualLayer);
   root.appendChild(canvas);
   container.appendChild(root);
   var emitter = createEmitter();
   var paused = merged.respectReducedMotion && prefersReducedMotion$2();
+  var disposed = false;
+  var dirty = {
+    preset: false,
+    seed: false,
+    speed: false,
+    colors: false,
+    textRatio: false,
+    cssVars: false
+  };
   var renderer;
   var useWebgl = merged.renderer !== 'canvas2d';
   if (useWebgl) {
@@ -928,8 +1200,11 @@ function createCapsule(container) {
       });
     } catch (error) {
       renderer = new FallbackRenderer(canvas, merged);
-      emitter.emit('error', {
-        message: String(error && error.message ? error.message : error)
+      nextTick(function () {
+        if (disposed) return;
+        emitter.emit('error', {
+          message: String(error && error.message ? error.message : error)
+        });
       });
     }
   } else {
@@ -943,6 +1218,9 @@ function createCapsule(container) {
       var name = _Object$keys[_i];
       root.style.setProperty(name, vars[name]);
     }
+    if (merged.textRatio !== undefined) {
+      root.style.setProperty('--hj-text-width', "".concat(merged.textRatio, "%"));
+    }
     renderer.resize();
   };
   applySize();
@@ -992,13 +1270,16 @@ function createCapsule(container) {
   }, function () {
     return paused;
   });
-  emitter.emit('ready', {
-    preset: _objectSpread2({}, preset)
+  nextTick(function () {
+    if (disposed) return;
+    emitter.emit('ready', {
+      preset: _objectSpread2({}, preset)
+    });
   });
-  var syncCopy = function syncCopy() {
+  var syncTheme = function syncTheme() {
     root.dataset.mode = 'nebula';
     root.dataset.theme = preset.theme || 'light';
-    renderCopy();
+    updateAria();
   };
   return {
     element: root,
@@ -1008,9 +1289,12 @@ function createCapsule(container) {
     off: emitter.off,
     setPreset: function setPreset(ref) {
       var next = getPreset('capsule', ref);
+      dirty.preset = true;
       Object.assign(preset, next);
-      renderer.setPreset(next);
-      syncCopy();
+      var nextColors = preset.colors.map(normalizeColor);
+      if (nextColors.every(Boolean)) preset.colors = nextColors;
+      renderer.setPreset(_objectSpread2({}, preset));
+      syncTheme();
       renderer.resize();
       emitter.emit('presetchange', {
         preset: _objectSpread2({}, next)
@@ -1018,16 +1302,21 @@ function createCapsule(container) {
       return this;
     },
     setColors: function setColors(colors) {
-      if (!Array.isArray(colors) || colors.length !== 4) return this;
-      preset.colors = colors;
+      var next = Array.isArray(colors) ? colors.map(normalizeColor) : [];
+      if (next.length !== 4 || next.some(function (color) {
+        return !color;
+      })) return this;
+      dirty.colors = true;
+      preset.colors = next;
       renderer.setPreset(_objectSpread2(_objectSpread2({}, preset), {}, {
-        colors: colors
+        colors: next
       }));
       return this;
     },
     setSeed: function setSeed(seed) {
       var value = Number(seed);
       if (!Number.isFinite(value)) return this;
+      dirty.seed = true;
       preset.seed = value;
       renderer.setPreset(_objectSpread2({}, preset));
       return this;
@@ -1035,10 +1324,42 @@ function createCapsule(container) {
     setSpeed: function setSpeed(speed) {
       var value = Number(speed);
       if (!Number.isFinite(value)) return this;
+      dirty.speed = true;
       preset.speed = value;
       renderer.setPreset(_objectSpread2({}, preset));
       return this;
     },
+    setText: function setText(content) {
+      fillContent(textLayer, content);
+      return this;
+    },
+    setColorContent: function setColorContent(content) {
+      fillContent(visualLayer, content);
+      return this;
+    },
+    setTextRatio: function setTextRatio(ratio) {
+      var 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', "".concat(value, "%"));
+      return this;
+    },
+    setCssVars: function setCssVars(vars) {
+      if (!vars || _typeof(vars) !== 'object') return this;
+      dirty.cssVars = true;
+      merged.cssVars = _objectSpread2(_objectSpread2({}, merged.cssVars || {}), vars);
+      for (var _i2 = 0, _Object$keys2 = Object.keys(vars); _i2 < _Object$keys2.length; _i2++) {
+        var name = _Object$keys2[_i2];
+        root.style.setProperty(name, vars[name]);
+      }
+      return this;
+    },
+    setLabel: function setLabel(label) {
+      customLabel = typeof label === 'string' && label ? label : null;
+      updateAria();
+      return this;
+    },
     setSize: function setSize(width, height) {
       if (width !== undefined) merged.width = width;
       if (height !== undefined) merged.height = height;
@@ -1046,7 +1367,7 @@ function createCapsule(container) {
       return this;
     },
     randomize: function randomize() {
-      renderer.randomize();
+      this.setSeed(Math.random() * 100);
       return this;
     },
     pause: function pause() {
@@ -1063,12 +1384,16 @@ function createCapsule(container) {
       return this;
     },
     dispose: function dispose() {
+      disposed = true;
       unsubscribe();
       visibility.dispose();
       if (resizeObserver) resizeObserver.disconnect();else window.removeEventListener('resize', renderer.resize);
       renderer.dispose();
       root.remove();
-    }
+    },
+    textRatio: merged.textRatio,
+    cssVars: merged.cssVars,
+    dirty: dirty
   };
 }
 
@@ -1572,7 +1897,8 @@ var FLOW_PROFILES = {
 };
 var ProgressCapsuleController = /*#__PURE__*/function () {
   function ProgressCapsuleController(_ref) {
-    var _options$min,
+    var _options$valueSuffix,
+      _options$min,
       _options$max,
       _options$value,
       _this = this;
@@ -1582,7 +1908,8 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
       preset = _ref.preset,
       emitter = _ref.emitter,
       options = _ref.options,
-      copy = _ref.copy;
+      copy = _ref.copy,
+      dirty = _ref.dirty;
     _classCallCheck(this, ProgressCapsuleController);
     this.root = root;
     this.canvas = canvas;
@@ -1591,6 +1918,8 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
     this.emitter = emitter;
     this.options = options;
     this.copy = copy;
+    this.dirty = dirty;
+    this.valueSuffix = (_options$valueSuffix = options.valueSuffix) !== null && _options$valueSuffix !== void 0 ? _options$valueSuffix : copy.valueSuffix;
     this.profile = preset.edgeStyle === 'tide' ? FLOW_PROFILES.tide : FLOW_PROFILES[preset.id] || FLOW_PROFILES['visual-training'];
     this.min = (_options$min = options.min) !== null && _options$min !== void 0 ? _options$min : 0;
     this.max = (_options$max = options.max) !== null && _options$max !== void 0 ? _options$max : 100;
@@ -1630,12 +1959,24 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
       var rounded = Math.round(this.value);
       this.root.style.setProperty('--progress', this.value.toFixed(2));
       this.root.setAttribute('aria-valuenow', String(rounded));
-      this.root.setAttribute('aria-valuetext', "".concat(rounded).concat(this.copy.valueSuffix));
-      this.valueElement.textContent = "".concat(rounded).concat(this.copy.valueSuffix);
-      if (!this.suppressEvents) this.emitter.emit('change', {
-        value: this.value,
-        source: source
-      });
+      this.root.setAttribute('aria-valuetext', "".concat(rounded).concat(this.valueSuffix));
+      if (this.valueElement) this.valueElement.textContent = "".concat(rounded).concat(this.valueSuffix);
+      if (!this.suppressEvents) {
+        if (this.dirty) this.dirty.value = true;
+        this.emitter.emit('change', {
+          value: this.value,
+          source: source
+        });
+      }
+    }
+  }, {
+    key: "setValueSuffix",
+    value: function setValueSuffix(suffix) {
+      this.valueSuffix = String(suffix == null ? '' : suffix);
+      var rounded = Math.round(this.value);
+      if (this.valueElement) this.valueElement.textContent = "".concat(rounded).concat(this.valueSuffix);
+      this.root.setAttribute('aria-valuetext', "".concat(rounded).concat(this.valueSuffix));
+      return this;
     }
   }, {
     key: "resizeCanvas",
@@ -1810,7 +2151,8 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
       var width = this.width;
       var height = this.height;
       if (!ctx || width <= 0 || height <= 0) return;
-      var shoreline = width * (this.value / 100);
+      var range = Math.max(this.max - this.min, 1);
+      var shoreline = width * Math.min(Math.max((this.value - this.min) / range, 0), 1);
       var time = this.flowTime;
       var _this$preset$colors = _slicedToArray(this.preset.colors, 4),
         dark = _this$preset$colors[0],
@@ -1925,7 +2267,7 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
     value: function updateFromPointer(event) {
       var bounds = this.root.getBoundingClientRect();
       var ratio = bounds.width > 0 ? (event.clientX - bounds.left) / bounds.width : 0;
-      this.setProgress(ratio * 100, 'drag');
+      this.setProgress(this.min + ratio * (this.max - this.min), 'drag');
     }
   }, {
     key: "beginDrag",
@@ -1933,6 +2275,8 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
       if (event.button !== undefined && event.button !== 0) return;
       event.preventDefault();
       this.dragging = true;
+      this.pendingPointer = null;
+      this._dragRaf = 0;
       this.root.classList.add('is-dragging');
       try {
         var _this$root$setPointer, _this$root;
@@ -1946,15 +2290,31 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
   }, {
     key: "moveDrag",
     value: function moveDrag(event) {
+      var _this2 = this;
       if (!this.dragging) return;
       event.preventDefault();
-      this.updateFromPointer(event);
+      // rAF 合并：一帧最多一次 setProgress/change，视觉仍每帧更新。
+      this.pendingPointer = event;
+      if (this._dragRaf) return;
+      this._dragRaf = requestAnimationFrame(function () {
+        _this2._dragRaf = 0;
+        var pending = _this2.pendingPointer;
+        _this2.pendingPointer = null;
+        if (pending) _this2.updateFromPointer(pending);
+      });
     }
   }, {
     key: "endDrag",
     value: function endDrag(event) {
       if (!this.dragging) return;
       this.dragging = false;
+      if (this._dragRaf) {
+        cancelAnimationFrame(this._dragRaf);
+        this._dragRaf = 0;
+      }
+      var pending = this.pendingPointer;
+      this.pendingPointer = null;
+      if (pending) this.updateFromPointer(pending);
       this.root.classList.remove('is-dragging');
       try {
         var _this$root$hasPointer, _this$root2;
@@ -1969,19 +2329,19 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
   }, {
     key: "bindEvents",
     value: function bindEvents() {
-      var _this2 = this;
+      var _this3 = this;
       if (this.options.draggable !== false) {
         this.handlers.pointerdown = function (event) {
-          return _this2.beginDrag(event);
+          return _this3.beginDrag(event);
         };
         this.handlers.pointermove = function (event) {
-          return _this2.moveDrag(event);
+          return _this3.moveDrag(event);
         };
         this.handlers.pointerup = function (event) {
-          return _this2.endDrag(event);
+          return _this3.endDrag(event);
         };
         this.handlers.pointercancel = function (event) {
-          return _this2.endDrag(event);
+          return _this3.endDrag(event);
         };
         this.root.addEventListener('pointerdown', this.handlers.pointerdown);
         this.root.addEventListener('pointermove', this.handlers.pointermove);
@@ -1990,23 +2350,24 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
       }
       if (this.options.keyboard !== false) {
         this.handlers.keydown = function (event) {
+          var step = (_this3.max - _this3.min) * 0.02;
           var actions = {
-            ArrowLeft: -2,
-            ArrowDown: -2,
-            ArrowRight: 2,
-            ArrowUp: 2,
-            PageDown: -10,
-            PageUp: 10
+            ArrowLeft: -step,
+            ArrowDown: -step,
+            ArrowRight: step,
+            ArrowUp: step,
+            PageDown: -step * 5,
+            PageUp: step * 5
           };
           if (event.key === 'Home') {
             event.preventDefault();
-            _this2.setProgress(_this2.min, 'keyboard');
+            _this3.setProgress(_this3.min, 'keyboard');
           } else if (event.key === 'End') {
             event.preventDefault();
-            _this2.setProgress(_this2.max, 'keyboard');
+            _this3.setProgress(_this3.max, 'keyboard');
           } else if (actions[event.key]) {
             event.preventDefault();
-            _this2.setProgress(_this2.value + actions[event.key], 'keyboard');
+            _this3.setProgress(_this3.value + actions[event.key], 'keyboard');
           } else {
             return;
           }
@@ -2043,6 +2404,7 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
   }, {
     key: "dispose",
     value: function dispose() {
+      if (this._dragRaf) cancelAnimationFrame(this._dragRaf);
       if (this.resizeObserver) this.resizeObserver.disconnect();else window.removeEventListener('resize', this.resizeCanvas);
       for (var _i = 0, _Object$keys = Object.keys(this.handlers); _i < _Object$keys.length; _i++) {
         var name = _Object$keys[_i];
@@ -2055,11 +2417,14 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
 }();
 
 /**
- * Mount a fluid progress capsule into `container`.
- *
- * Options: preset (id/code/name or object), width, height, value, min, max,
- * draggable, keyboard, colors, edgeStyle, quality,
- * respectReducedMotion, copy, cssVars.
+ * Mount a fluid progress capsule into `container`.
+ *
+ * Options: preset (id/code/name or object), width, height, value, min, max,
+ * draggable, keyboard, colors, edgeStyle, 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),
+ * showValue (show/hide the right-side percentage), quality,
+ * respectReducedMotion, cssVars.
  */
 function createProgressCapsule(container) {
   var _options$preset, _merged$min, _merged$max;
@@ -2069,62 +2434,91 @@ function createProgressCapsule(container) {
   }
   var preset = _objectSpread2({}, getPreset('progress', (_options$preset = options.preset) !== null && _options$preset !== void 0 ? _options$preset : '星火'));
   var merged = normalizeOptions(DEFAULTS.progress, preset, options);
-  var copy = _objectSpread2(_objectSpread2({}, COPY), merged.copy || {});
+  var normalizedColors = merged.colors.map(normalizeColor);
+  if (normalizedColors.every(Boolean)) preset.colors = normalizedColors;
+  preset.edgeStyle = merged.edgeStyle;
+  var copy = COPY;
+  var customLabel = typeof options.label === 'string' && options.label ? options.label : null;
+  // Vue 的裸布尔属性（<ProgressCapsule disabled />）会传成空字符串，
+  // 这里统一按 true 处理。
+  var disabled = merged.disabled === true || merged.disabled === '' || merged.disabled === 'true';
+  var effectiveDraggable = disabled ? false : merged.draggable !== false;
+  var effectiveKeyboard = disabled ? false : merged.keyboard !== false;
+  var dirty = {
+    preset: false,
+    colors: false,
+    textRatio: false,
+    cssVars: false,
+    edgeStyle: false,
+    value: false
+  };
   var root = document.createElement('div');
   root.className = 'hj-capsule-root hj-progress-root';
   root.setAttribute('role', 'slider');
   root.setAttribute('tabindex', '0');
-  root.setAttribute('data-draggable', String(merged.draggable !== false));
+  root.setAttribute('data-draggable', String(effectiveDraggable));
+  if (disabled) {
+    root.setAttribute('aria-disabled', 'true');
+    root.classList.add('is-disabled');
+  }
   root.setAttribute('aria-valuemin', String((_merged$min = merged.min) !== null && _merged$min !== void 0 ? _merged$min : 0));
   root.setAttribute('aria-valuemax', String((_merged$max = merged.max) !== null && _merged$max !== void 0 ? _merged$max : 100));
   root.setAttribute('aria-valuenow', String(preset.initialProgress));
-  root.setAttribute('aria-label', interpolate(copy.progressAria, {
-    brand: copy.brandName,
-    code: preset.code,
-    name: preset.name
-  }));
-  if (merged.keyboard === false) root.setAttribute('tabindex', '-1');
+  var updateAria = function updateAria() {
+    root.setAttribute('aria-label', customLabel || interpolate(copy.progressAria, {
+      brand: copy.brandName,
+      code: preset.code,
+      name: preset.name
+    }));
+  };
+  updateAria();
+  if (!effectiveKeyboard) root.setAttribute('tabindex', '-1');
   var canvas = document.createElement('canvas');
   canvas.className = 'hj-progress-canvas';
   canvas.setAttribute('aria-hidden', 'true');
-  var copyEnabled = copy.enabled !== false && merged.showCopy !== false;
-  var copyText = function copyText(key, fallback) {
-    var value = copy[key];
-    return value === undefined ? fallback : value;
-  };
-  function buildCopyHtml() {
-    var html = '';
-    var brandText = copy.brandName || '';
-    var subtitleText = copyText('subtitle', preset.subtitle);
-    if (brandText) html += "<span class=\"hj-progress-name\">".concat(brandText, "</span>");
-    if (subtitleText) html += "<span class=\"hj-progress-subtitle\">".concat(subtitleText, "</span>");
-    return html;
-  }
-  var copyLayer = document.createElement('div');
-  copyLayer.className = 'hj-progress-copy';
-  var renderCopy = function renderCopy() {
-    if (copyEnabled) copyLayer.innerHTML = buildCopyHtml();
+
+  // Slot containers are always present but transparent by default; they only
+  // provide geometry, never typography/padding/background (docs: 插槽 CSS 约定).
+  var fillContent = function fillContent(layer, content) {
+    layer.innerHTML = '';
+    if (content == null) return;
+    if (typeof content === 'string') {
+      layer.innerHTML = content;
+      return;
+    }
+    var nodes = Array.isArray(content) ? content : [content];
+    var _iterator2 = _createForOfIteratorHelper(nodes),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var node = _step2.value;
+        if (node && typeof node.nodeType === 'number') layer.appendChild(node);
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
   };
-  renderCopy();
-  if (copy.background) {
-    root.style.setProperty('--hj-progress-copy-bg', copy.background);
-    root.style.setProperty('--hj-progress-copy-pad', '6px 12px');
+  var textLayer = document.createElement('div');
+  textLayer.className = 'hj-progress-text hj-progress-copy';
+  var visualLayer = document.createElement('div');
+  visualLayer.className = 'hj-progress-visual';
+  fillContent(textLayer, options.text);
+  fillContent(visualLayer, options.colorContent);
+  var valueElement = merged.showValue === false ? null : document.createElement('div');
+  if (valueElement) {
+    valueElement.className = 'hj-progress-value';
+    valueElement.setAttribute('aria-hidden', 'true');
   }
-  if (copy.color) root.style.setProperty('--hj-progress-copy-color', copy.color);
-  var valueElement = document.createElement('div');
-  valueElement.className = 'hj-progress-value';
-  valueElement.setAttribute('aria-hidden', 'true');
-  var dragLabel = document.createElement('span');
-  dragLabel.className = 'hj-progress-drag-label';
-  dragLabel.setAttribute('aria-hidden', 'true');
-  dragLabel.textContent = copy.dragLabel;
   root.appendChild(canvas);
-  if (copyEnabled) root.appendChild(copyLayer);
-  root.appendChild(valueElement);
-  root.appendChild(dragLabel);
+  root.appendChild(textLayer);
+  root.appendChild(visualLayer);
+  if (valueElement) root.appendChild(valueElement);
   container.appendChild(root);
   var emitter = createEmitter();
   var paused = merged.respectReducedMotion && prefersReducedMotion$1();
+  var disposed = false;
   var applySize = function applySize() {
     root.style.width = parseSize(merged.width);
     root.style.height = parseSize(merged.height);
@@ -2133,6 +2527,9 @@ function createProgressCapsule(container) {
       var name = _Object$keys2[_i2];
       root.style.setProperty(name, vars[name]);
     }
+    if (merged.textRatio !== undefined) {
+      root.style.setProperty('--hj-text-width', "".concat(merged.textRatio, "%"));
+    }
   };
   applySize();
   var controller = new ProgressCapsuleController({
@@ -2141,8 +2538,12 @@ function createProgressCapsule(container) {
     valueElement: valueElement,
     preset: preset,
     emitter: emitter,
-    options: merged,
-    copy: copy
+    options: _objectSpread2(_objectSpread2({}, merged), {}, {
+      draggable: effectiveDraggable,
+      keyboard: effectiveKeyboard
+    }),
+    copy: copy,
+    dirty: dirty
   });
   var overlay = null;
   if (merged.renderer !== 'canvas2d') {
@@ -2155,7 +2556,14 @@ function createProgressCapsule(container) {
       }
     });
   }
-  if (overlay) controller.webglActive = true;
+  if (overlay) controller.webglActive = true;else if (merged.renderer !== 'canvas2d') {
+    nextTick(function () {
+      if (disposed) return;
+      emitter.emit('error', {
+        message: 'WebGL2 unavailable, using Canvas2D fallback'
+      });
+    });
+  }
   var visibility = createVisibilityGuard(root);
   var flowTime = 0;
   var unsubscribe = subscribeScheduler(function (delta, now) {
@@ -2168,16 +2576,14 @@ function createProgressCapsule(container) {
   }, function () {
     return paused;
   });
-  emitter.emit('ready', {
-    preset: _objectSpread2({}, preset)
+  nextTick(function () {
+    if (disposed) return;
+    emitter.emit('ready', {
+      preset: _objectSpread2({}, preset)
+    });
   });
   var syncDom = function syncDom() {
-    root.setAttribute('aria-label', interpolate(copy.progressAria, {
-      brand: copy.brandName,
-      code: preset.code,
-      name: preset.name
-    }));
-    renderCopy();
+    updateAria();
   };
   return {
     element: root,
@@ -2199,8 +2605,11 @@ function createProgressCapsule(container) {
     },
     setPreset: function setPreset(ref) {
       var next = getPreset('progress', ref);
+      dirty.preset = true;
       Object.assign(preset, next);
-      controller.preset = next;
+      var nextColors = preset.colors.map(normalizeColor);
+      if (nextColors.every(Boolean)) preset.colors = nextColors;
+      controller.preset = preset;
       controller.profile = next.edgeStyle === 'tide' ? FLOW_PROFILES.tide : FLOW_PROFILES[next.id] || FLOW_PROFILES['visual-training'];
       controller.flowTime = stringSeed(next.id) * 31;
       controller.seed = stringSeed("".concat(next.id, "-reference")) * Math.PI * 2;
@@ -2210,7 +2619,7 @@ function createProgressCapsule(container) {
         overlay = attachProgressFlowOverlay({
           root: root,
           canvas: canvas,
-          preset: next,
+          preset: preset,
           getProgress: function getProgress() {
             return controller.value;
           }
@@ -2219,13 +2628,14 @@ function createProgressCapsule(container) {
       controller.webglActive = Boolean(overlay);
       controller.resizeCanvas();
       emitter.emit('presetchange', {
-        preset: _objectSpread2({}, next)
+        preset: _objectSpread2({}, preset)
       });
       return this;
     },
     setEdgeStyle: function setEdgeStyle(edgeStyle) {
       var value = String(edgeStyle || '').toLowerCase();
       if (value !== 'flow' && value !== 'tide') return this;
+      dirty.edgeStyle = true;
       preset.edgeStyle = value;
       controller.profile = value === 'tide' ? FLOW_PROFILES.tide : FLOW_PROFILES[preset.id] || FLOW_PROFILES['visual-training'];
       if (overlay) {
@@ -2243,10 +2653,49 @@ function createProgressCapsule(container) {
       controller.resizeCanvas();
       return this;
     },
+    setText: function setText(content) {
+      fillContent(textLayer, content);
+      return this;
+    },
+    setColorContent: function setColorContent(content) {
+      fillContent(visualLayer, content);
+      return this;
+    },
+    setTextRatio: function setTextRatio(ratio) {
+      var 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', "".concat(value, "%"));
+      return this;
+    },
+    setCssVars: function setCssVars(vars) {
+      if (!vars || _typeof(vars) !== 'object') return this;
+      dirty.cssVars = true;
+      merged.cssVars = _objectSpread2(_objectSpread2({}, merged.cssVars || {}), vars);
+      for (var _i3 = 0, _Object$keys3 = Object.keys(vars); _i3 < _Object$keys3.length; _i3++) {
+        var name = _Object$keys3[_i3];
+        root.style.setProperty(name, vars[name]);
+      }
+      return this;
+    },
+    setLabel: function setLabel(label) {
+      customLabel = typeof label === 'string' && label ? label : null;
+      updateAria();
+      return this;
+    },
+    setValueSuffix: function setValueSuffix(suffix) {
+      controller.setValueSuffix(suffix);
+      return this;
+    },
     setColors: function setColors(colors) {
-      if (!Array.isArray(colors) || colors.length !== 4) return this;
-      controller.setColors(colors);
-      if (overlay) overlay.setColors(colors);
+      var next = Array.isArray(colors) ? colors.map(normalizeColor) : [];
+      if (next.length !== 4 || next.some(function (color) {
+        return !color;
+      })) return this;
+      dirty.colors = true;
+      controller.setColors(next);
+      if (overlay) overlay.setColors(next);
       controller.resizeCanvas();
       return this;
     },
@@ -2276,12 +2725,16 @@ function createProgressCapsule(container) {
       return this;
     },
     dispose: function dispose() {
+      disposed = true;
       unsubscribe();
       visibility.dispose();
       if (overlay) overlay.dispose();
       controller.dispose();
       root.remove();
-    }
+    },
+    textRatio: merged.textRatio,
+    cssVars: merged.cssVars,
+    dirty: dirty
   };
 }
 
@@ -2317,6 +2770,10 @@ function createColorBackground(host) {
     opacity: 1,
     fallbackColor: true
   }, preset, options);
+  var normalizedColors = merged.colors.map(normalizeColor);
+  if (normalizedColors.every(Boolean)) preset.colors = normalizedColors;
+  preset.seed = merged.seed;
+  preset.speed = merged.speed;
   var computed = getComputedStyle(host);
   if (computed.position === 'static' || computed.position === '') {
     host.style.position = 'relative';
@@ -2337,6 +2794,16 @@ function createColorBackground(host) {
   host.appendChild(layer);
   var emitter = createEmitter();
   var paused = merged.respectReducedMotion && prefersReducedMotion();
+  var disposed = false;
+  var dirty = {
+    preset: false,
+    seed: false,
+    speed: false,
+    colors: false,
+    opacity: false,
+    fallbackColor: false,
+    mouseColor: false
+  };
   var renderer;
   var useWebgl = merged.renderer !== 'canvas2d';
   if (useWebgl) {
@@ -2348,8 +2815,11 @@ function createColorBackground(host) {
       });
     } catch (error) {
       renderer = new FallbackRenderer(canvas, merged);
-      emitter.emit('error', {
-        message: String(error && error.message ? error.message : error)
+      nextTick(function () {
+        if (disposed) return;
+        emitter.emit('error', {
+          message: String(error && error.message ? error.message : error)
+        });
       });
     }
   } else {
@@ -2367,8 +2837,11 @@ function createColorBackground(host) {
   }, function () {
     return paused;
   });
-  emitter.emit('ready', {
-    preset: _objectSpread2({}, preset)
+  nextTick(function () {
+    if (disposed) return;
+    emitter.emit('ready', {
+      preset: _objectSpread2({}, preset)
+    });
   });
   return {
     element: host,
@@ -2379,24 +2852,59 @@ function createColorBackground(host) {
     off: emitter.off,
     setPreset: function setPreset(ref) {
       var next = getPreset('capsule', ref);
+      dirty.preset = true;
       Object.assign(preset, next);
-      renderer.setPreset(next);
+      var nextColors = preset.colors.map(normalizeColor);
+      if (nextColors.every(Boolean)) preset.colors = nextColors;
+      renderer.setPreset(_objectSpread2({}, preset));
       renderer.resize();
       syncLayerVars();
       emitter.emit('presetchange', {
-        preset: _objectSpread2({}, next)
+        preset: _objectSpread2({}, preset)
       });
       return this;
     },
     setColors: function setColors(colors) {
-      if (!Array.isArray(colors) || colors.length !== 4) return this;
-      preset.colors = colors;
+      var next = Array.isArray(colors) ? colors.map(normalizeColor) : [];
+      if (next.length !== 4 || next.some(function (color) {
+        return !color;
+      })) return this;
+      dirty.colors = true;
+      preset.colors = next;
       renderer.setPreset(_objectSpread2(_objectSpread2({}, preset), {}, {
-        colors: colors
+        colors: next
       }));
       syncLayerVars();
       return this;
     },
+    setSeed: function setSeed(seed) {
+      var value = Number(seed);
+      if (!Number.isFinite(value)) return this;
+      dirty.seed = true;
+      preset.seed = value;
+      renderer.setPreset(_objectSpread2({}, preset));
+      return this;
+    },
+    setSpeed: function setSpeed(speed) {
+      var value = Number(speed);
+      if (!Number.isFinite(value)) return this;
+      dirty.speed = true;
+      preset.speed = value;
+      renderer.setPreset(_objectSpread2({}, preset));
+      return this;
+    },
+    setFallbackColor: function setFallbackColor(value) {
+      dirty.fallbackColor = true;
+      merged.fallbackColor = value;
+      syncLayerVars();
+      return this;
+    },
+    setMouseColor: function setMouseColor(value) {
+      dirty.mouseColor = true;
+      merged.mouseColor = value !== false;
+      if (typeof renderer.setMouseColor === 'function') renderer.setMouseColor(merged.mouseColor);
+      return this;
+    },
     setQuality: function setQuality(quality) {
       merged.quality = quality;
       if (typeof renderer.setDprCap === 'function') renderer.setDprCap(dprCapFor(quality));
@@ -2405,12 +2913,13 @@ function createColorBackground(host) {
     setOpacity: function setOpacity(value) {
       var opacity = Number(value);
       if (!Number.isFinite(opacity)) return this;
+      dirty.opacity = true;
       merged.opacity = Math.min(1, Math.max(0, opacity));
       layer.style.setProperty('--dlc-color-opacity', String(merged.opacity));
       return this;
     },
     randomize: function randomize() {
-      renderer.randomize();
+      this.setSeed(Math.random() * 100);
       return this;
     },
     pause: function pause() {
@@ -2422,12 +2931,17 @@ function createColorBackground(host) {
       return this;
     },
     dispose: function dispose() {
+      disposed = true;
       unsubscribe();
       visibility.dispose();
       if (resizeObserver) resizeObserver.disconnect();else window.removeEventListener('resize', renderer.resize);
       renderer.dispose();
       layer.remove();
-    }
+    },
+    opacity: merged.opacity,
+    fallbackColor: merged.fallbackColor,
+    mouseColor: merged.mouseColor,
+    dirty: dirty
   };
 }
 
@@ -2448,6 +2962,7 @@ exports.dprCapFor = dprCapFor;
 exports.getPreset = getPreset;
 exports.hexToRgb01 = hexToRgb01$1;
 exports.hexToRgba = hexToRgba;
+exports.normalizeColor = normalizeColor;
 exports.parseSize = parseSize;
 exports.pauseAll = pauseAll;
 exports.resumeAll = resumeAll;