@5even7/dlc-ui 0.1.0 → 0.2.1

package/dist/index.umd.js

@@ -152,6 +152,9 @@
     }
     return e;
   }
+  function _readOnlyError(r) {
+    throw new TypeError('"' + r + '" is read-only');
+  }
   function _slicedToArray(r, e) {
     return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
   }
@@ -324,7 +327,7 @@
   var CAPSULE_PRESETS = [{
     id: 'original',
     code: 'NC-01',
-    name: 'ORIGINAL',
+    name: '初光',
     group: 'warm',
     seed: 1.7,
     speed: 0.5,
@@ -332,7 +335,7 @@
   }, {
     id: 'ocean',
     code: 'NC-02',
-    name: 'OCEAN',
+    name: '沧溟',
     group: 'cold',
     seed: 8.2,
     speed: 0.48,
@@ -340,7 +343,7 @@
   }, {
     id: 'klein',
     code: 'NC-03',
-    name: 'KLEIN',
+    name: '玄夜',
     group: 'cold',
     seed: 14.1,
     speed: 0.49,
@@ -348,7 +351,7 @@
   }, {
     id: 'ultraviolet',
     code: 'NC-04',
-    name: 'ULTRAVIOLET',
+    name: '紫霄',
     group: 'cold',
     seed: 23.4,
     speed: 0.47,
@@ -356,7 +359,7 @@
   }, {
     id: 'chrome',
     code: 'NC-05',
-    name: 'CHROME',
+    name: '银汉',
     group: 'cold',
     seed: 37.8,
     speed: 0.42,
@@ -364,7 +367,7 @@
   }, {
     id: 'plus',
     code: 'NC-06',
-    name: 'PLUS',
+    name: '熔金',
     group: 'warm',
     seed: 51.3,
     speed: 0.5,
@@ -374,7 +377,7 @@
   var PROGRESS_PRESETS = [{
     id: 'model-training',
     code: 'NC-10',
-    name: 'MODEL TRAINING',
+    name: '星火',
     subtitle: 'SHA 4.5 + 100 2026 TKN',
     group: 'progress',
     initialProgress: 43,
@@ -383,7 +386,7 @@
   }, {
     id: 'agent-migration',
     code: 'NC-11',
-    name: 'AGENT MIGRATION',
+    name: '迁流',
     subtitle: 'TRANSFERRING PROTOCOL',
     group: 'progress',
     initialProgress: 33,
@@ -392,7 +395,7 @@
   }, {
     id: 'visual-training',
     code: 'NC-12',
-    name: 'VISUAL TRAINING',
+    name: '幻境',
     subtitle: 'GENERATING POWER ++',
     group: 'progress',
     initialProgress: 58,
@@ -401,7 +404,7 @@
   }, {
     id: 'tide',
     code: 'NC-13',
-    name: 'TIDE',
+    name: '汐潮',
     subtitle: 'MOON PULL / COAST',
     group: 'progress',
     initialProgress: 30,
@@ -411,23 +414,18 @@
 
   var PRESETS = CAPSULE_PRESETS;
   var ALL_PRESETS = [].concat(_toConsumableArray(CAPSULE_PRESETS), _toConsumableArray(PROGRESS_PRESETS));
-  function validatePreset(preset) {
-    return Boolean(preset && typeof preset.id === 'string' && typeof preset.code === 'string' && typeof preset.name === 'string' && Number.isFinite(preset.seed) && Number.isFinite(preset.speed) && Array.isArray(preset.colors) && preset.colors.length === 4);
-  }
-  function validateProgressPreset(preset) {
-    return Boolean(preset && typeof preset.id === 'string' && typeof preset.code === 'string' && typeof preset.name === 'string' && preset.group === 'progress' && Number.isFinite(preset.initialProgress) && ['flow', 'tide'].indexOf(preset.edgeStyle || 'flow') !== -1 && Array.isArray(preset.colors) && preset.colors.length === 4);
-  }
+
+  /**
+   * Resolve a preset by its literary name (e.g. '沧溟').
+   * Matching is case-insensitive and ignores surrounding whitespace,
+   * so '沧溟' and ' 沧溟 ' both work.
+   */
   function getPreset(kind, ref) {
     var list = kind === 'capsule' ? CAPSULE_PRESETS : kind === 'progress' ? PROGRESS_PRESETS : null;
     if (!list) throw new Error("Unknown preset kind: ".concat(kind, " (use \"capsule\" or \"progress\")"));
-    if (ref && _typeof(ref) === 'object') {
-      var valid = kind === 'capsule' ? validatePreset(ref) : validateProgressPreset(ref);
-      if (!valid) throw new Error("Invalid ".concat(kind, " preset object"));
-      return ref;
-    }
     var key = String(ref).trim().toLowerCase();
     var found = list.find(function (preset) {
-      return preset.id.toLowerCase() === key || preset.code.toLowerCase() === key || preset.name.toLowerCase() === key;
+      return preset.name.toLowerCase() === key;
     });
     if (!found) throw new Error("Unknown ".concat(kind, " preset: ").concat(ref));
     return found;
@@ -440,9 +438,8 @@
       quality: 'auto',
       renderer: 'auto',
       respectReducedMotion: true,
-      interactive: true,
       mouseColor: true,
-      showCopy: true
+      textRatio: 39
     },
     progress: {
       width: 454,
@@ -451,43 +448,250 @@
       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;
     });
   }
 
@@ -565,6 +769,26 @@
         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() {
@@ -713,6 +937,8 @@
         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]);
@@ -722,8 +948,8 @@
         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));
@@ -747,7 +973,12 @@
       }
     }, {
       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() {}
@@ -865,16 +1096,34 @@
     };
   }
 
+  /**
+   * 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, interactive,
-   * 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;
@@ -882,53 +1131,73 @@
     if (!container || typeof container.appendChild !== 'function') {
       throw new Error('createCapsule: container element is required');
     }
-    var preset = _objectSpread2({}, getPreset('capsule', (_options$preset = options.preset) !== null && _options$preset !== void 0 ? _options$preset : 'NC-01'));
+    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;
-    };
-    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();
+    root.setAttribute('role', 'img');
+    var updateAria = function updateAria() {
+      root.setAttribute('aria-label', customLabel || COPY.capsuleAria.replace('{name}', preset.name));
     };
-    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) {
@@ -938,8 +1207,11 @@
         });
       } 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 {
@@ -953,6 +1225,9 @@
         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();
@@ -961,18 +1236,16 @@
     }) : null;
     if (resizeObserver) resizeObserver.observe(root);else window.addEventListener('resize', renderer.resize);
     var visibility = createVisibilityGuard(root);
-    if (merged.interactive !== false) {
-      root.addEventListener('pointerenter', function () {
-        return emitter.emit('pointerenter', {
-          preset: _objectSpread2({}, preset)
-        });
+    root.addEventListener('pointerenter', function () {
+      return emitter.emit('pointerenter', {
+        preset: _objectSpread2({}, preset)
       });
-      root.addEventListener('pointerleave', function () {
-        return emitter.emit('pointerleave', {
-          preset: _objectSpread2({}, preset)
-        });
+    });
+    root.addEventListener('pointerleave', function () {
+      return emitter.emit('pointerleave', {
+        preset: _objectSpread2({}, preset)
       });
-    }
+    });
     root.addEventListener('click', function (event) {
       emitter.emit('click', {
         event: event,
@@ -1004,13 +1277,16 @@
     }, 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,
@@ -1020,9 +1296,12 @@
       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)
@@ -1030,13 +1309,64 @@
         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;
+      },
+      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;
@@ -1044,7 +1374,7 @@
         return this;
       },
       randomize: function randomize() {
-        renderer.randomize();
+        this.setSeed(Math.random() * 100);
         return this;
       },
       pause: function pause() {
@@ -1061,12 +1391,16 @@
         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
     };
   }
 
@@ -1570,7 +1904,8 @@
   };
   var ProgressCapsuleController = /*#__PURE__*/function () {
     function ProgressCapsuleController(_ref) {
-      var _options$min,
+      var _options$valueSuffix,
+        _options$min,
         _options$max,
         _options$value,
         _this = this;
@@ -1580,7 +1915,8 @@
         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;
@@ -1589,6 +1925,8 @@
       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;
@@ -1628,12 +1966,24 @@
         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",
@@ -1808,7 +2158,8 @@
         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],
@@ -1923,7 +2274,7 @@
       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",
@@ -1931,6 +2282,8 @@
         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;
@@ -1944,15 +2297,31 @@
     }, {
       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;
@@ -1967,19 +2336,19 @@
     }, {
       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);
@@ -1988,23 +2357,24 @@
         }
         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;
             }
@@ -2041,6 +2411,7 @@
     }, {
       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];
@@ -2053,11 +2424,14 @@
   }();
 
   /**
-   * 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;
@@ -2065,64 +2439,93 @@
     if (!container || typeof container.appendChild !== 'function') {
       throw new Error('createProgressCapsule: container element is required');
     }
-    var preset = _objectSpread2({}, getPreset('progress', (_options$preset = options.preset) !== null && _options$preset !== void 0 ? _options$preset : 'NC-10'));
+    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);
@@ -2131,6 +2534,9 @@
         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({
@@ -2139,8 +2545,12 @@
       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') {
@@ -2153,7 +2563,14 @@
         }
       });
     }
-    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) {
@@ -2166,16 +2583,14 @@
     }, 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,
@@ -2197,8 +2612,11 @@
       },
       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;
@@ -2208,7 +2626,7 @@
           overlay = attachProgressFlowOverlay({
             root: root,
             canvas: canvas,
-            preset: next,
+            preset: preset,
             getProgress: function getProgress() {
               return controller.value;
             }
@@ -2217,14 +2635,74 @@
         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) {
+          overlay.dispose();
+          overlay = attachProgressFlowOverlay({
+            root: root,
+            canvas: canvas,
+            preset: preset,
+            getProgress: function getProgress() {
+              return controller.value;
+            }
+          });
+        }
+        controller.webglActive = Boolean(overlay);
+        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) {
+        _readOnlyError("customLabel");
+        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;
       },
@@ -2254,12 +2732,16 @@
         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
     };
   }
 
@@ -2286,7 +2768,7 @@
     if (!host || typeof host.appendChild !== 'function') {
       throw new Error('createColorBackground: host element is required');
     }
-    var preset = _objectSpread2({}, getPreset('capsule', (_options$preset = options.preset) !== null && _options$preset !== void 0 ? _options$preset : 'NC-01'));
+    var preset = _objectSpread2({}, getPreset('capsule', (_options$preset = options.preset) !== null && _options$preset !== void 0 ? _options$preset : '初光'));
     var merged = normalizeOptions({
       quality: DEFAULTS.capsule.quality,
       renderer: DEFAULTS.capsule.renderer,
@@ -2295,6 +2777,10 @@
       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';
@@ -2315,6 +2801,16 @@
     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) {
@@ -2326,8 +2822,11 @@
         });
       } 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 {
@@ -2345,8 +2844,11 @@
     }, function () {
       return paused;
     });
-    emitter.emit('ready', {
-      preset: _objectSpread2({}, preset)
+    nextTick(function () {
+      if (disposed) return;
+      emitter.emit('ready', {
+        preset: _objectSpread2({}, preset)
+      });
     });
     return {
       element: host,
@@ -2357,24 +2859,59 @@
       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));
@@ -2383,12 +2920,13 @@
       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() {
@@ -2400,12 +2938,17 @@
         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
     };
   }
 
@@ -2426,11 +2969,10 @@
   exports.getPreset = getPreset;
   exports.hexToRgb01 = hexToRgb01$1;
   exports.hexToRgba = hexToRgba;
+  exports.normalizeColor = normalizeColor;
   exports.parseSize = parseSize;
   exports.pauseAll = pauseAll;
   exports.resumeAll = resumeAll;
   exports.validateColors = validateColors;
-  exports.validatePreset = validatePreset;
-  exports.validateProgressPreset = validateProgressPreset;
 
 }));