@5even7/dlc-ui 0.2.11 → 0.2.12

package/dist/progress.cjs

@@ -95,7 +95,10 @@ function _iterableToArrayLimit(r, l) {
       f = true,
       o = false;
     try {
-      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
     } catch (r) {
       o = true, n = r;
     } finally {
@@ -172,9 +175,9 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
-/**
- * Tiny event emitter. Accepts any event name so the API stays open for
- * future events (hover, click, custom) without breaking changes.
+/**
+ * Tiny event emitter. Accepts any event name so the API stays open for
+ * future events (hover, click, custom) without breaking changes.
  */
 function createEmitter() {
   // Plain object storage (no Map/Set) so the legacy build has no API
@@ -224,9 +227,9 @@ function createEmitter() {
 
 var UNIT_PATTERN = /^[\d.]+(?:px|%|vw|vh|vmin|vmax|em|rem)$/;
 
-/**
- * Normalize a size option to a CSS length string.
- * Accepts numbers (treated as px) or strings with px/%, vw/vh/vmin/vmax, em/rem.
+/**
+ * Normalize a size option to a CSS length string.
+ * Accepts numbers (treated as px) or strings with px/%, vw/vh/vmin/vmax, em/rem.
  */
 function parseSize(value) {
   if (typeof value === 'number') {
@@ -265,11 +268,17 @@ function dprCapFor(quality) {
   var tier = QUALITY_TIERS[quality] || QUALITY_TIERS.medium;
   return tier.dpr;
 }
+function effectiveDprCap(quality) {
+  var renderScale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  var scale = Number(renderScale);
+  var normalizedScale = Number.isFinite(scale) ? Math.min(1, Math.max(0.25, scale)) : 1;
+  return Math.max(0.5, dprCapFor(quality) * normalizedScale);
+}
 
-/**
- * Merge defaults < preset < user. Unknown user keys are preserved so the
- * component API can grow (new props, cssVars, callbacks) without a breaking
- * change.
+/**
+ * Merge defaults < preset < user. Unknown user keys are preserved so the
+ * component API can grow (new props, cssVars, callbacks) without a breaking
+ * change.
  */
 function normalizeOptions(defaults, preset, user) {
   // undefined means "not provided" (e.g. Vue $props with unset props):
@@ -287,9 +296,9 @@ function normalizeOptions(defaults, preset, user) {
   return _objectSpread2(_objectSpread2(_objectSpread2({}, defaults), presetOptions), userOptions);
 }
 
-/**
- * 公共色板：NC-01~NC-06 的四色组（底色 / 主色 / 辅色 / 高光色）。
- * Capsule 预置与 dlc-color 等组件共用，新增色板只改这里。
+/**
+ * 公共色板：NC-01~NC-06 的四色组（底色 / 主色 / 辅色 / 高光色）。
+ * Capsule 预置与 dlc-color 等组件共用，新增色板只改这里。
  */
 var PALETTES$1 = {
   original: ['#FFF3EA', '#F5B27A', '#F67BC6', '#A978E8'],
@@ -300,9 +309,9 @@ var PALETTES$1 = {
   plus: ['#FFF0E6', '#F6C26B', '#F98A64', '#E86D74']
 };
 
-/**
- * Capsule 预置：仅星云材质 NC-01~NC-06（NC-07~09 aurora 已移除）。
- * 颜色引用公共色板，seed/speed 决定形态与流速。
+/**
+ * Capsule 预置：仅星云材质 NC-01~NC-06（NC-07~09 aurora 已移除）。
+ * 颜色引用公共色板，seed/speed 决定形态与流速。
  */
 var CAPSULE_PRESETS = [{
   id: 'original',
@@ -420,13 +429,22 @@ var DEFAULTS = {
     height: 104,
     min: 0,
     max: 100,
+    step: 'any',
     draggable: true,
+    keyboard: true,
     disabled: false,
     readonly: false,
+    direction: 'ltr',
+    precision: 0,
     valueSuffix: '%',
     edgeStyle: 'flow',
     quality: 'auto',
     renderer: 'auto',
+    renderScale: 1,
+    powerPreference: 'high-performance',
+    fps: 60,
+    paused: false,
+    static: false,
     textRatio: 54,
     showValue: true,
     respectReducedMotion: true
@@ -660,10 +678,10 @@ function hexToRgba(color) {
   return "rgba(".concat(red, ", ").concat(green, ", ").concat(blue, ", ").concat(alpha, ")");
 }
 
-/**
- * Document-level shared rAF scheduler. Every component instance subscribes
- * its own frame callback; the whole page runs ONE animation loop (like the
- * original demo), which avoids jank from many competing rAF loops.
+/**
+ * Document-level shared rAF scheduler. Every component instance subscribes
+ * its own frame callback; the whole page runs ONE animation loop (like the
+ * original demo), which avoids jank from many competing rAF loops.
  */
 var subscribers = [];
 var running = false;
@@ -671,11 +689,7 @@ var rafId = 0;
 var last = 0;
 function tick(now) {
   if (!running) return;
-  var delta = last ? Math.min((now - last) / 1000, 0.05) : 0;
-  last = now;
-  // Schedule the next frame BEFORE running callbacks so one throwing
-  // subscriber can never kill the whole animation loop.
-  rafId = requestAnimationFrame(tick);
+  var activeItems = [];
   {
     var _iterator = _createForOfIteratorHelper(subscribers.slice()),
       _step;
@@ -683,10 +697,8 @@ function tick(now) {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
         var item = _step.value;
         try {
-          if (!item.isPaused()) item.onFrame(delta, now);
-        } catch (error) {
-          console.warn('[dlc-ui] frame error:', error);
-        }
+          if (!item.isPaused()) activeItems.push(item);
+        } catch (_unused) {}
       }
     } catch (err) {
       _iterator.e(err);
@@ -694,6 +706,25 @@ function tick(now) {
       _iterator.f();
     }
   }
+  if (activeItems.length === 0) {
+    running = false;
+    rafId = 0;
+    last = 0;
+    return;
+  }
+  var delta = last ? Math.min((now - last) / 1000, 0.05) : 0;
+  last = now;
+  // Schedule the next frame BEFORE running callbacks so one throwing
+  // subscriber can never kill the whole animation loop.
+  rafId = requestAnimationFrame(tick);
+  for (var _i = 0, _activeItems = activeItems; _i < _activeItems.length; _i++) {
+    var _item = _activeItems[_i];
+    try {
+      _item.onFrame(delta, now);
+    } catch (error) {
+      console.warn('[dlc-ui] frame error:', error);
+    }
+  }
   if (subscribers.length === 0) {
     cancelAnimationFrame(rafId);
     running = false;
@@ -706,6 +737,9 @@ function start() {
   last = 0;
   rafId = requestAnimationFrame(tick);
 }
+function wakeScheduler() {
+  start();
+}
 function subscribeScheduler(onFrame, isPaused) {
   var item = {
     onFrame: onFrame,
@@ -724,11 +758,12 @@ function subscribeScheduler(onFrame, isPaused) {
   };
 }
 
-/**
- * Gates drawing on "element intersects viewport AND the page tab is visible".
- * Falls back to always-visible when IntersectionObserver is unavailable.
+/**
+ * Gates drawing on "element intersects viewport AND the page tab is visible".
+ * Falls back to always-visible when IntersectionObserver is unavailable.
  */
 function createVisibilityGuard(element) {
+  var onChange = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   var intersecting = true;
   var pageVisible = typeof document === 'undefined' || !document.hidden;
   var disposed = false;
@@ -738,6 +773,7 @@ function createVisibilityGuard(element) {
       intersecting = entries.some(function (entry) {
         return entry.isIntersecting;
       });
+      if (typeof onChange === 'function') onChange();
     }, {
       rootMargin: '180px'
     });
@@ -745,6 +781,7 @@ function createVisibilityGuard(element) {
   }
   var onVisibilityChange = function onVisibilityChange() {
     pageVisible = typeof document !== 'undefined' && !document.hidden;
+    if (typeof onChange === 'function') onChange();
   };
   if (typeof document !== 'undefined') {
     document.addEventListener('visibilitychange', onVisibilityChange);
@@ -900,64 +937,95 @@ function createProgram(gl) {
 var ProgressFlowRenderer = /*#__PURE__*/function () {
   function ProgressFlowRenderer(canvas, preset) {
     var _PROFILE_INDEX$preset;
+    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     _classCallCheck(this, ProgressFlowRenderer);
     var gl = canvas.getContext('webgl2', {
       alpha: false,
       antialias: true,
       premultipliedAlpha: false,
-      powerPreference: 'high-performance'
+      powerPreference: options.powerPreference || 'high-performance'
     });
     if (!gl) throw new Error('WebGL2 unavailable');
     this.canvas = canvas;
+    this.options = options;
     this.gl = gl;
-    this.program = createProgram(gl);
     this.profile = preset.edgeStyle === 'tide' ? 3 : (_PROFILE_INDEX$preset = PROFILE_INDEX[preset.id]) !== null && _PROFILE_INDEX$preset !== void 0 ? _PROFILE_INDEX$preset : 2;
     this.seed = stringSeed$1("".concat(preset.id, "-shader")) * 13.7 + 1.0;
     this.colors = preset.colors.map(hexToRgb01);
     this.motionData = getProgressMotionData(preset.id, preset.edgeStyle);
     var motionFactor = preset.edgeStyle === 'tide' ? MOTION_SCALE_FACTORS.tide : MOTION_SCALE_FACTORS[preset.id] || 1.04;
     this.motionScale = PROGRESS_MOTION_MAX_PX * motionFactor / 1257;
-    this.position = gl.getAttribLocation(this.program, 'a_position');
-    this.uniforms = {
-      resolution: gl.getUniformLocation(this.program, 'u_resolution'),
-      time: gl.getUniformLocation(this.program, 'u_time'),
-      progress: gl.getUniformLocation(this.program, 'u_progress'),
-      seed: gl.getUniformLocation(this.program, 'u_seed'),
-      profile: gl.getUniformLocation(this.program, 'u_profile'),
-      motion: gl.getUniformLocation(this.program, 'u_motion'),
-      effect: gl.getUniformLocation(this.program, 'u_effect'),
-      hasEffect: gl.getUniformLocation(this.program, 'u_hasEffect'),
-      effectFrames: gl.getUniformLocation(this.program, 'u_effectFrames'),
-      motionDuration: gl.getUniformLocation(this.program, 'u_motionDuration'),
-      motionScale: gl.getUniformLocation(this.program, 'u_motionScale'),
-      dark: gl.getUniformLocation(this.program, 'u_dark'),
-      accentA: gl.getUniformLocation(this.program, 'u_accentA'),
-      accentB: gl.getUniformLocation(this.program, 'u_accentB'),
-      glow: gl.getUniformLocation(this.program, 'u_glow')
-    };
-    this.buffer = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW);
-    this.motionTexture = gl.createTexture();
-    gl.activeTexture(gl.TEXTURE0);
-    gl.bindTexture(gl.TEXTURE_2D, this.motionTexture);
-    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.R8, PROGRESS_MOTION_WIDTH, PROGRESS_MOTION_HEIGHT, 0, gl.RED, gl.UNSIGNED_BYTE, this.motionData);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-    this.effectTexture = gl.createTexture();
-    gl.activeTexture(gl.TEXTURE1);
-    gl.bindTexture(gl.TEXTURE_2D, this.effectTexture);
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 1, 1, 0, gl.RGB, gl.UNSIGNED_BYTE, new Uint8Array([32, 33, 38]));
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-    this.effectUploaded = false;
+    this.disposed = false;
+    this.contextLost = false;
+    this.setupResources();
+    this.bindContextEvents();
   }
   return _createClass(ProgressFlowRenderer, [{
+    key: "setupResources",
+    value: function setupResources() {
+      var gl = this.gl;
+      this.program = createProgram(gl);
+      this.position = gl.getAttribLocation(this.program, 'a_position');
+      this.uniforms = {
+        resolution: gl.getUniformLocation(this.program, 'u_resolution'),
+        time: gl.getUniformLocation(this.program, 'u_time'),
+        progress: gl.getUniformLocation(this.program, 'u_progress'),
+        seed: gl.getUniformLocation(this.program, 'u_seed'),
+        profile: gl.getUniformLocation(this.program, 'u_profile'),
+        motion: gl.getUniformLocation(this.program, 'u_motion'),
+        effect: gl.getUniformLocation(this.program, 'u_effect'),
+        hasEffect: gl.getUniformLocation(this.program, 'u_hasEffect'),
+        effectFrames: gl.getUniformLocation(this.program, 'u_effectFrames'),
+        motionDuration: gl.getUniformLocation(this.program, 'u_motionDuration'),
+        motionScale: gl.getUniformLocation(this.program, 'u_motionScale'),
+        dark: gl.getUniformLocation(this.program, 'u_dark'),
+        accentA: gl.getUniformLocation(this.program, 'u_accentA'),
+        accentB: gl.getUniformLocation(this.program, 'u_accentB'),
+        glow: gl.getUniformLocation(this.program, 'u_glow')
+      };
+      this.buffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW);
+      this.motionTexture = gl.createTexture();
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, this.motionTexture);
+      gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.R8, PROGRESS_MOTION_WIDTH, PROGRESS_MOTION_HEIGHT, 0, gl.RED, gl.UNSIGNED_BYTE, this.motionData);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      this.effectTexture = gl.createTexture();
+      gl.activeTexture(gl.TEXTURE1);
+      gl.bindTexture(gl.TEXTURE_2D, this.effectTexture);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 1, 1, 0, gl.RGB, gl.UNSIGNED_BYTE, new Uint8Array([32, 33, 38]));
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      this.effectUploaded = false;
+    }
+  }, {
+    key: "bindContextEvents",
+    value: function bindContextEvents() {
+      var _this = this;
+      this.onContextLost = function (event) {
+        event.preventDefault();
+        if (_this.disposed) return;
+        _this.contextLost = true;
+        if (typeof _this.options.onContextLost === 'function') _this.options.onContextLost(event);
+      };
+      this.onContextRestored = function () {
+        if (_this.disposed) return;
+        _this.setupResources();
+        _this.contextLost = false;
+        _this.gl.viewport(0, 0, _this.canvas.width, _this.canvas.height);
+        if (typeof _this.options.onContextRestored === 'function') _this.options.onContextRestored();
+      };
+      this.canvas.addEventListener('webglcontextlost', this.onContextLost, false);
+      this.canvas.addEventListener('webglcontextrestored', this.onContextRestored, false);
+    }
+  }, {
     key: "resize",
     value: function resize(width, height, dpr) {
       var pixelWidth = Math.max(1, Math.round(width * dpr));
@@ -972,6 +1040,7 @@ var ProgressFlowRenderer = /*#__PURE__*/function () {
     key: "draw",
     value: function draw(time, progress) {
       var effectImage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+      if (this.disposed || this.contextLost) return;
       var gl = this.gl;
       gl.useProgram(this.program);
       gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
@@ -988,7 +1057,8 @@ var ProgressFlowRenderer = /*#__PURE__*/function () {
       gl.uniform1f(this.uniforms.motionDuration, PROGRESS_MOTION_DURATION);
       gl.uniform1f(this.uniforms.motionScale, this.motionScale);
       var hasEffect = this.effectUploaded ? 1 : 0;
-      if (!this.effectUploaded && effectImage && effectImage.complete && effectImage.naturalWidth > 0) {
+      var effectWidth = effectImage && (effectImage.naturalWidth || effectImage.width || 0);
+      if (!this.effectUploaded && effectImage && effectWidth > 0) {
         gl.activeTexture(gl.TEXTURE1);
         gl.bindTexture(gl.TEXTURE_2D, this.effectTexture);
         gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
@@ -1020,7 +1090,10 @@ var ProgressFlowRenderer = /*#__PURE__*/function () {
   }, {
     key: "dispose",
     value: function dispose() {
+      this.disposed = true;
       var gl = this.gl;
+      this.canvas.removeEventListener('webglcontextlost', this.onContextLost, false);
+      this.canvas.removeEventListener('webglcontextrestored', this.onContextRestored, false);
       gl.deleteBuffer(this.buffer);
       gl.deleteTexture(this.motionTexture);
       gl.deleteTexture(this.effectTexture);
@@ -1031,8 +1104,9 @@ var ProgressFlowRenderer = /*#__PURE__*/function () {
   }]);
 }();
 function createProgressFlowRenderer(canvas, preset) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   try {
-    return new ProgressFlowRenderer(canvas, preset);
+    return new ProgressFlowRenderer(canvas, preset, options);
   } catch (error) {
     console.warn('[画境观屿] 进度流体 WebGL2 不可用，使用 Canvas 2D 降级。', error);
     return null;
@@ -1092,50 +1166,49 @@ function createAtlas(id) {
     context.fillRect(20, 0, 44, FRAME_HEIGHT);
     context.restore();
   }
-  var image = new Image();
-  image.decoding = 'async';
-  var state = {
-    image: image,
-    ready: false
+
+  // A canvas is a valid TexImageSource. Keeping it directly avoids a PNG
+  // encode -> base64 allocation -> Image decode round trip at startup.
+  return {
+    image: canvas,
+    ready: true
   };
-  image.addEventListener('load', function () {
-    state.ready = true;
-  }, {
-    once: true
-  });
-  image.addEventListener('error', function () {
-    state.ready = false;
-  }, {
-    once: true
-  });
-  image.src = canvas.toDataURL('image/png');
-  return state;
 }
 function getProgressReferenceAtlas(id) {
   if (!CACHE[id]) CACHE[id] = createAtlas(id);
   return CACHE[id];
 }
 
-/**
- * Attach a WebGL2 fluid overlay to a progress capsule root.
- *
- * @param {object} params
- * @param {HTMLElement} params.root    progress capsule root element
- * @param {HTMLCanvasElement} params.canvas  2D fallback canvas (kept beneath)
- * @param {object} params.preset      progress preset
- * @param {() => number} params.getProgress  reads the current progress value
- * @returns {{ update(flowTime: number): void, dispose(): void } | null}
+/**
+ * Attach a WebGL2 fluid overlay to a progress capsule root.
+ *
+ * @param {object} params
+ * @param {HTMLElement} params.root    progress capsule root element
+ * @param {HTMLCanvasElement} params.canvas  2D fallback canvas (kept beneath)
+ * @param {object} params.preset      progress preset
+ * @param {() => number} params.getProgress  reads the current progress value
+ * @returns {{ update(flowTime: number): void, setDprCap(cap: number): void, dispose(): void } | null}
  */
 function attachProgressFlowOverlay(_ref) {
   var root = _ref.root,
     canvas = _ref.canvas,
     preset = _ref.preset,
-    getProgress = _ref.getProgress;
+    getProgress = _ref.getProgress,
+    _ref$dprCap = _ref.dprCap,
+    dprCap = _ref$dprCap === void 0 ? 2 : _ref$dprCap,
+    _ref$powerPreference = _ref.powerPreference,
+    powerPreference = _ref$powerPreference === void 0 ? 'high-performance' : _ref$powerPreference,
+    onContextLost = _ref.onContextLost,
+    onContextRestored = _ref.onContextRestored;
   var overlay = document.createElement('canvas');
   overlay.className = 'hj-progress-canvas hj-progress-overlay';
   overlay.setAttribute('aria-hidden', 'true');
   canvas.insertAdjacentElement('afterend', overlay);
-  var renderer = createProgressFlowRenderer(overlay, preset);
+  var renderer = createProgressFlowRenderer(overlay, preset, {
+    powerPreference: powerPreference,
+    onContextLost: onContextLost,
+    onContextRestored: onContextRestored
+  });
   if (!renderer) {
     overlay.remove();
     return null;
@@ -1146,7 +1219,7 @@ function attachProgressFlowOverlay(_ref) {
     var bounds = root.getBoundingClientRect();
     var width = Math.max(1, bounds.width);
     var height = Math.max(1, bounds.height);
-    var dpr = Math.min(window.devicePixelRatio || 1, 2);
+    var dpr = Math.min(window.devicePixelRatio || 1, dprCap);
     overlay.style.width = "".concat(width, "px");
     overlay.style.height = "".concat(height, "px");
     renderer.resize(width, height, dpr);
@@ -1170,6 +1243,10 @@ function attachProgressFlowOverlay(_ref) {
     setColors: function setColors(colors) {
       renderer.setColors(colors);
     },
+    setDprCap: function setDprCap(cap) {
+      dprCap = cap;
+      resize();
+    },
     dispose: function dispose() {
       if (resizeObserver) resizeObserver.disconnect();
       if (onWindowResize) window.removeEventListener('resize', onWindowResize);
@@ -1196,6 +1273,101 @@ function nextTick(fn) {
   }
 }
 
+function toFiniteNumber(value) {
+  if (value == null || typeof value === 'boolean') return null;
+  if (typeof value === 'string' && value.trim() === '') return null;
+  var number = Number(value);
+  return Number.isFinite(number) ? number : null;
+}
+
+function normalizeRange(min, max) {
+  var fallbackMin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var fallbackMax = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 100;
+  var nextMin = toFiniteNumber(min);
+  var nextMax = toFiniteNumber(max);
+  if (nextMin === null) nextMin = fallbackMin;
+  if (nextMax === null) nextMax = fallbackMax;
+  if (nextMin > nextMax) {
+    var swap = nextMin;
+    nextMin = nextMax;
+    nextMax = swap;
+  }
+  return [nextMin, nextMax];
+}
+function clampProgressValue(value, min, max) {
+  var number = toFiniteNumber(value);
+  if (number === null) return null;
+  return Math.min(Math.max(number, min), max);
+}
+function normalizeProgressStep(step) {
+  var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'any';
+  if (step === 'any' || step == null) return 'any';
+  var increment = toFiniteNumber(step);
+  return increment !== null && increment > 0 ? increment : fallback;
+}
+function snapProgressValue(value, min, max) {
+  var step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'any';
+  var clamped = clampProgressValue(value, min, max);
+  if (clamped === null) return null;
+  if (step === 'any' || step == null) return clamped;
+  var increment = normalizeProgressStep(step);
+  if (increment === 'any') return clamped;
+  var snapped = min + Math.round((clamped - min) / increment) * increment;
+  return Math.min(Math.max(Number(snapped.toFixed(12)), min), max);
+}
+function progressRatio(value, min, max) {
+  var range = max - min;
+  if (!Number.isFinite(range) || range <= 0) return 0;
+  return Math.min(Math.max((value - min) / range, 0), 1);
+}
+
+function normalizeFps(value) {
+  var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 60;
+  var fps = Number(value);
+  if (!Number.isFinite(fps)) return fallback;
+  return Math.min(60, Math.max(1, fps));
+}
+function createFrameGate() {
+  var initialFps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 60;
+  var fps = normalizeFps(initialFps);
+  var elapsed = 0;
+  return {
+    shouldDraw: function shouldDraw(delta) {
+      elapsed += delta;
+      var interval = 1 / fps;
+      if (elapsed + 0.0001 < interval) return false;
+      elapsed %= interval;
+      return true;
+    },
+    setFps: function setFps(value) {
+      fps = normalizeFps(value, fps);
+      elapsed = 0;
+      return fps;
+    },
+    getFps: function getFps() {
+      return fps;
+    }
+  };
+}
+function createReducedMotionPreference(enabled, onChange) {
+  var query = enabled && typeof matchMedia !== 'undefined' ? matchMedia('(prefers-reduced-motion: reduce)') : null;
+  var notify = function notify() {
+    if (typeof onChange === 'function') onChange(Boolean(query && query.matches));
+  };
+  if (query) {
+    if (typeof query.addEventListener === 'function') query.addEventListener('change', notify);else if (typeof query.addListener === 'function') query.addListener(notify);
+  }
+  return {
+    matches: function matches() {
+      return Boolean(query && query.matches);
+    },
+    dispose: function dispose() {
+      if (!query) return;
+      if (typeof query.removeEventListener === 'function') query.removeEventListener('change', notify);else if (typeof query.removeListener === 'function') query.removeListener(notify);
+    }
+  };
+}
+
 var clamp = function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 };
@@ -1222,9 +1394,6 @@ function interpolate(template, values) {
     return values[key] !== undefined ? values[key] : '';
   });
 }
-function prefersReducedMotion() {
-  return typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;
-}
 var FLOW_PROFILES = {
   'model-training': {
     cycles: [0.98, 3.05, 5.45],
@@ -1285,8 +1454,6 @@ var FLOW_PROFILES = {
 var ProgressCapsuleController = /*#__PURE__*/function () {
   function ProgressCapsuleController(_ref) {
     var _options$valueSuffix,
-      _options$min,
-      _options$max,
       _options$value,
       _this = this;
     var root = _ref.root,
@@ -1308,11 +1475,18 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
     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;
-    this.dprCap = dprCapFor(options.quality);
+    var _normalizeRange = normalizeRange(options.min, options.max);
+    var _normalizeRange2 = _slicedToArray(_normalizeRange, 2);
+    this.min = _normalizeRange2[0];
+    this.max = _normalizeRange2[1];
+    this.step = normalizeProgressStep(options.step);
+    this.precision = Number.isInteger(Number(options.precision)) ? clamp(Number(options.precision), 0, 20) : 0;
+    this.formatValue = typeof options.formatValue === 'function' ? options.formatValue : null;
+    this.direction = options.direction === 'rtl' ? 'rtl' : 'ltr';
+    this.dprCap = effectiveDprCap(options.quality, options.renderScale);
     this.ctx = canvas.getContext('2d');
-    this.value = clamp((_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : preset.initialProgress, this.min, this.max);
+    this.value = snapProgressValue((_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : preset.initialProgress, this.min, this.max, this.step);
+    if (this.value === null) this.value = clamp(preset.initialProgress, this.min, this.max);
     this.dragging = false;
     this.webglActive = false;
     this.flowTime = stringSeed(preset.id) * 31;
@@ -1322,10 +1496,12 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
     this.width = 0;
     this.height = 0;
     this.handlers = {};
-    this.resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(function () {
-      return _this.resizeCanvas();
-    }) : null;
-    if (this.resizeObserver) this.resizeObserver.observe(this.root);else window.addEventListener('resize', this.resizeCanvas);
+    this.onResize = function () {
+      _this.resizeCanvas();
+      if (typeof _this.options.onResize === 'function') _this.options.onResize();
+    };
+    this.resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(this.onResize) : null;
+    if (this.resizeObserver) this.resizeObserver.observe(this.root);else window.addEventListener('resize', this.onResize);
     this.suppressEvents = true;
     this.setProgress(this.value, 'init');
     this.suppressEvents = false;
@@ -1338,16 +1514,37 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
       this.randomState = Math.imul(this.randomState, 1664525) + 1013904223 >>> 0;
       return this.randomState / 4294967296;
     }
+  }, {
+    key: "displayText",
+    value: function displayText() {
+      if (this.formatValue) {
+        return String(this.formatValue(this.value, {
+          min: this.min,
+          max: this.max,
+          suffix: this.valueSuffix
+        }));
+      }
+      var number = this.precision > 0 ? this.value.toFixed(this.precision) : String(Math.round(this.value));
+      return "".concat(number).concat(this.valueSuffix);
+    }
+  }, {
+    key: "syncValueDom",
+    value: function syncValueDom() {
+      var text = this.displayText();
+      this.root.style.setProperty('--progress', this.value.toFixed(2));
+      this.root.style.setProperty('--progress-ratio', progressRatio(this.value, this.min, this.max).toFixed(4));
+      this.root.setAttribute('aria-valuenow', String(this.value));
+      this.root.setAttribute('aria-valuetext', text);
+      if (this.valueElement) this.valueElement.textContent = text;
+    }
   }, {
     key: "setProgress",
     value: function setProgress(nextValue) {
       var source = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
-      this.value = clamp(nextValue, this.min, this.max);
-      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.valueSuffix));
-      if (this.valueElement) this.valueElement.textContent = "".concat(rounded).concat(this.valueSuffix);
+      var next = snapProgressValue(nextValue, this.min, this.max, this.step);
+      if (next === null) return false;
+      this.value = next;
+      this.syncValueDom();
       if (!this.suppressEvents) {
         if (this.dirty) this.dirty.value = true;
         this.emitter.emit('change', {
@@ -1355,19 +1552,58 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
           source: source
         });
       }
+      return true;
     }
   }, {
     key: "setValueSuffix",
     value: function setValueSuffix(suffix) {
+      if (this.dirty) this.dirty.valueSuffix = true;
       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));
+      this.syncValueDom();
+      return this;
+    }
+  }, {
+    key: "setStep",
+    value: function setStep(step) {
+      var nextStep = normalizeProgressStep(step, this.step);
+      if (nextStep === this.step) return this;
+      if (this.dirty) this.dirty.step = true;
+      this.step = nextStep;
+      var next = snapProgressValue(this.value, this.min, this.max, this.step);
+      if (next !== null && next !== this.value) this.setProgress(next, 'prop');
+      return this;
+    }
+  }, {
+    key: "setPrecision",
+    value: function setPrecision(precision) {
+      var value = Number(precision);
+      if (!Number.isInteger(value) || value < 0 || value > 20) return this;
+      if (this.dirty) this.dirty.precision = true;
+      this.precision = value;
+      this.syncValueDom();
+      return this;
+    }
+  }, {
+    key: "setFormatValue",
+    value: function setFormatValue(formatter) {
+      if (formatter != null && typeof formatter !== 'function') return this;
+      if (this.dirty) this.dirty.formatValue = true;
+      this.formatValue = formatter || null;
+      this.syncValueDom();
+      return this;
+    }
+  }, {
+    key: "setDirection",
+    value: function setDirection(direction) {
+      if (this.dirty) this.dirty.direction = true;
+      this.direction = direction === 'rtl' ? 'rtl' : 'ltr';
+      this.root.dataset.direction = this.direction;
       return this;
     }
   }, {
     key: "setShowValue",
     value: function setShowValue(show) {
+      if (this.dirty) this.dirty.showValue = true;
       if (this.valueElement) this.valueElement.hidden = show === false;
       return this;
     }
@@ -1532,15 +1768,14 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
   }, {
     key: "setRange",
     value: function setRange(min, max) {
-      if (min > max) {
-        var swap = min;
-        min = max;
-        max = swap;
-      }
-      this.min = min;
-      this.max = max;
-      var clamped = clamp(this.value, this.min, this.max);
-      if (clamped !== this.value) this.setProgress(clamped, 'prop');
+      var nextRange = normalizeRange(min, max, this.min, this.max);
+      this.min = nextRange[0];
+      this.max = nextRange[1];
+      this.root.setAttribute('aria-valuemin', String(this.min));
+      this.root.setAttribute('aria-valuemax', String(this.max));
+      var next = snapProgressValue(this.value, this.min, this.max, this.step);
+      if (next !== this.value) this.setProgress(next, 'prop');else this.syncValueDom();
+      return this;
     }
   }, {
     key: "drawReferenceFlow",
@@ -1665,8 +1900,39 @@ 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;
+      if (this.direction === 'rtl') ratio = 1 - ratio;
       this.setProgress(this.min + ratio * (this.max - this.min), 'drag');
     }
+  }, {
+    key: "onKeyDown",
+    value: function onKeyDown(event) {
+      var range = this.max - this.min;
+      var configuredStep = Number(this.step);
+      var step = Number.isFinite(configuredStep) && configuredStep > 0 ? configuredStep : Math.max(range / 100, 1e-7);
+      var direction = this.direction === 'rtl' ? -1 : 1;
+      var aliases = {
+        Left: 'ArrowLeft',
+        Right: 'ArrowRight',
+        Up: 'ArrowUp',
+        Down: 'ArrowDown'
+      };
+      var keyCodes = {
+        35: 'End',
+        36: 'Home',
+        33: 'PageUp',
+        34: 'PageDown',
+        37: 'ArrowLeft',
+        38: 'ArrowUp',
+        39: 'ArrowRight',
+        40: 'ArrowDown'
+      };
+      var key = aliases[event.key] || event.key || keyCodes[event.keyCode];
+      var next = null;
+      if (key === 'ArrowRight') next = this.value + step * direction;else if (key === 'ArrowLeft') next = this.value - step * direction;else if (key === 'ArrowUp') next = this.value + step;else if (key === 'ArrowDown') next = this.value - step;else if (key === 'PageUp') next = this.value + step * 10;else if (key === 'PageDown') next = this.value - step * 10;else if (key === 'Home') next = this.min;else if (key === 'End') next = this.max;
+      if (next === null) return;
+      event.preventDefault();
+      this.setProgress(next, 'keyboard');
+    }
   }, {
     key: "beginDrag",
     value: function beginDrag(event) {
@@ -1754,6 +2020,12 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
         this.root.addEventListener('pointerup', this.handlers.pointerup);
         this.root.addEventListener('pointercancel', this.handlers.pointercancel);
       }
+      if (this.options.keyboard !== false) {
+        this.handlers.keydown = function (event) {
+          return _this3.onKeyDown(event);
+        };
+        this.root.addEventListener('keydown', this.handlers.keydown);
+      }
     }
   }, {
     key: "update",
@@ -1772,20 +2044,19 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
     key: "randomize",
     value: function randomize() {
       this.flowTime = this.random() * 40;
+      return this.flowTime;
     }
   }, {
     key: "setColors",
     value: function setColors(colors) {
       if (!Array.isArray(colors) || colors.length !== 4) return;
-      this.preset = _objectSpread2(_objectSpread2({}, this.preset), {}, {
-        colors: colors
-      });
+      this.preset.colors = _toConsumableArray(colors);
     }
   }, {
     key: "dispose",
     value: function dispose() {
       if (this._dragRaf) cancelAnimationFrame(this._dragRaf);
-      if (this.resizeObserver) this.resizeObserver.disconnect();else window.removeEventListener('resize', this.resizeCanvas);
+      if (this.resizeObserver) this.resizeObserver.disconnect();else window.removeEventListener('resize', this.onResize);
       for (var _i = 0, _Object$keys = Object.keys(this.handlers); _i < _Object$keys.length; _i++) {
         var name = _Object$keys[_i];
         var handler = this.handlers[name];
@@ -1796,15 +2067,16 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
   }]);
 }();
 
-/**
+/**
  * Mount a fluid progress capsule into `container`.
  *
- * Options: preset (literary name), width, height, value, min, max,
- * draggable, colors, edgeStyle, textRatio (0-100, text region
+ * Options: preset (literary name), width, height, value/modelValue, min, max,
+ * step, draggable, keyboard, direction, precision/formatValue, 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.
+ * showValue (show/hide the right-side percentage), quality, renderScale,
+ * powerPreference, fps, paused/static, respectReducedMotion, cssVars.
  */
 function createProgressCapsule(container) {
   var _options$preset, _merged$min, _merged$max;
@@ -1814,14 +2086,20 @@ 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);
-  if (merged.min > merged.max) {
-    var swap = merged.min;
-    merged.min = merged.max;
-    merged.max = swap;
-  }
-  var normalizedColors = merged.colors.map(normalizeColor);
-  if (normalizedColors.every(Boolean)) preset.colors = normalizedColors;
-  preset.edgeStyle = merged.edgeStyle;
+  var _normalizeRange3 = normalizeRange(merged.min, merged.max);
+  var _normalizeRange4 = _slicedToArray(_normalizeRange3, 2);
+  merged.min = _normalizeRange4[0];
+  merged.max = _normalizeRange4[1];
+  if (merged.modelValue !== undefined) merged.value = merged.modelValue;
+  var normalizedColors = Array.isArray(merged.colors) ? merged.colors.map(normalizeColor) : [];
+  if (normalizedColors.length === 4 && normalizedColors.every(Boolean)) preset.colors = normalizedColors;
+  var initialEdgeStyle = merged.edgeStyle === 'tide' || merged.edgeStyle === 'flow' ? merged.edgeStyle : preset.edgeStyle;
+  preset.edgeStyle = initialEdgeStyle;
+  merged.edgeStyle = initialEdgeStyle;
+  merged.colors = _toConsumableArray(preset.colors);
+  var optionColors = Array.isArray(options.colors) ? options.colors.map(normalizeColor) : [];
+  var colorOverride = optionColors.length === 4 && optionColors.every(Boolean) ? _toConsumableArray(optionColors) : null;
+  var edgeStyleOverride = options.edgeStyle === 'flow' || options.edgeStyle === 'tide' ? merged.edgeStyle : null;
   var copy = COPY;
   var customLabel = typeof options.label === 'string' && options.label ? options.label : null;
   // Vue 的裸布尔属性（<ProgressCapsule disabled />）会传成空字符串，
@@ -1830,18 +2108,31 @@ function createProgressCapsule(container) {
   var readonly = merged.readonly === true || merged.readonly === '' || merged.readonly === 'true';
   var locked = disabled || readonly;
   var effectiveDraggable = locked ? false : merged.draggable !== false;
+  var effectiveKeyboard = locked ? false : merged.keyboard !== false;
   var dirty = {
     preset: false,
     colors: false,
     textRatio: false,
     cssVars: false,
     edgeStyle: false,
-    value: false
+    value: false,
+    step: false,
+    precision: false,
+    formatValue: false,
+    direction: false,
+    showValue: false,
+    valueSuffix: false,
+    quality: false,
+    renderScale: false,
+    paused: false,
+    static: false,
+    fps: false
   };
   var root = document.createElement('div');
   root.className = 'hj-capsule-root hj-progress-root';
   root.setAttribute('role', 'slider');
   root.setAttribute('data-draggable', String(effectiveDraggable));
+  root.dataset.direction = merged.direction === 'rtl' ? 'rtl' : 'ltr';
   if (disabled) {
     root.setAttribute('aria-disabled', 'true');
     root.classList.add('is-disabled');
@@ -1850,7 +2141,8 @@ function createProgressCapsule(container) {
     root.setAttribute('aria-readonly', 'true');
     root.classList.add('is-readonly');
   }
-  if (locked) root.setAttribute('tabindex', '-1');
+  root.setAttribute('tabindex', locked ? '-1' : effectiveKeyboard ? '0' : '-1');
+  root.setAttribute('aria-orientation', 'horizontal');
   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));
@@ -1905,8 +2197,22 @@ function createProgressCapsule(container) {
   root.appendChild(valueElement);
   container.appendChild(root);
   var emitter = createEmitter();
-  var paused = merged.respectReducedMotion && prefersReducedMotion();
+  var manuallyPaused = merged.paused === true;
+  var reducedPaused = false;
+  var staticMode = merged.static === true;
+  var contextLost = false;
   var disposed = false;
+  var renderOnce = function renderOnce() {};
+  var onContextLost = function onContextLost() {
+    contextLost = true;
+    emitter.emit('contextlost', {});
+  };
+  var onContextRestored = function onContextRestored() {
+    contextLost = false;
+    emitter.emit('contextrestored', {});
+    renderOnce();
+    wakeScheduler();
+  };
   var applySize = function applySize() {
     root.style.width = parseSize(merged.width);
     root.style.height = parseSize(merged.height);
@@ -1927,7 +2233,11 @@ function createProgressCapsule(container) {
     preset: preset,
     emitter: emitter,
     options: _objectSpread2(_objectSpread2({}, merged), {}, {
-      draggable: effectiveDraggable
+      draggable: effectiveDraggable,
+      keyboard: effectiveKeyboard,
+      onResize: function onResize() {
+        if (manuallyPaused || reducedPaused || staticMode) renderOnce();
+      }
     }),
     copy: copy,
     dirty: dirty
@@ -1939,8 +2249,12 @@ function createProgressCapsule(container) {
       canvas: canvas,
       preset: preset,
       getProgress: function getProgress() {
-        return controller.value;
-      }
+        return progressRatio(controller.value, controller.min, controller.max) * 100;
+      },
+      dprCap: effectiveDprCap(merged.quality, merged.renderScale),
+      powerPreference: merged.powerPreference,
+      onContextLost: onContextLost,
+      onContextRestored: onContextRestored
     });
   }
   if (overlay) controller.webglActive = true;else if (merged.renderer !== 'canvas2d') {
@@ -1951,17 +2265,34 @@ function createProgressCapsule(container) {
       });
     });
   }
-  var visibility = createVisibilityGuard(root);
+  var visibility = createVisibilityGuard(root, wakeScheduler);
+  var motionPreference = createReducedMotionPreference(merged.respectReducedMotion, function (matches) {
+    reducedPaused = matches;
+    if (matches) renderOnce();else wakeScheduler();
+  });
+  reducedPaused = motionPreference.matches();
+  var isMotionPaused = function isMotionPaused() {
+    return manuallyPaused || reducedPaused || staticMode || contextLost;
+  };
   var flowTime = 0;
+  var frameGate = createFrameGate(merged.fps);
+  renderOnce = function renderOnce() {
+    controller.draw();
+    if (overlay) overlay.update(flowTime);
+  };
+  renderOnce();
+  var offPausedChange = emitter.on('change', function () {
+    if (isMotionPaused()) renderOnce();
+  });
   var unsubscribe = subscribeScheduler(function (delta, now) {
     flowTime += delta;
     controller.update(delta, false);
-    if (visibility.isVisible()) {
+    if (frameGate.shouldDraw(delta)) {
       controller.draw();
       if (overlay) overlay.update(flowTime);
     }
   }, function () {
-    return paused;
+    return isMotionPaused() || !visibility.isVisible();
   });
   nextTick(function () {
     if (disposed) return;
@@ -1988,32 +2319,41 @@ function createProgressCapsule(container) {
     },
     setRange: function setRange(min, max) {
       controller.setRange(min, max);
+      if (isMotionPaused()) renderOnce();
       return this;
     },
     setPreset: function setPreset(ref) {
       var next = getPreset('progress', ref);
       dirty.preset = true;
       Object.assign(preset, next);
+      if (colorOverride) preset.colors = _toConsumableArray(colorOverride);
+      if (edgeStyleOverride) preset.edgeStyle = edgeStyleOverride;
       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.profile = preset.edgeStyle === 'tide' ? FLOW_PROFILES.tide : FLOW_PROFILES[preset.id] || FLOW_PROFILES['visual-training'];
       controller.flowTime = stringSeed(next.id) * 31;
       controller.seed = stringSeed("".concat(next.id, "-reference")) * Math.PI * 2;
       syncDom();
       if (overlay) {
         overlay.dispose();
+        contextLost = false;
         overlay = attachProgressFlowOverlay({
           root: root,
           canvas: canvas,
           preset: preset,
           getProgress: function getProgress() {
-            return controller.value;
-          }
+            return progressRatio(controller.value, controller.min, controller.max) * 100;
+          },
+          dprCap: effectiveDprCap(merged.quality, merged.renderScale),
+          powerPreference: merged.powerPreference,
+          onContextLost: onContextLost,
+          onContextRestored: onContextRestored
         });
       }
       controller.webglActive = Boolean(overlay);
       controller.resizeCanvas();
+      if (isMotionPaused()) renderOnce();
       emitter.emit('presetchange', {
         preset: _objectSpread2({}, preset)
       });
@@ -2023,21 +2363,28 @@ function createProgressCapsule(container) {
       var value = String(edgeStyle || '').toLowerCase();
       if (value !== 'flow' && value !== 'tide') return this;
       dirty.edgeStyle = true;
+      edgeStyleOverride = value;
       preset.edgeStyle = value;
       controller.profile = value === 'tide' ? FLOW_PROFILES.tide : FLOW_PROFILES[preset.id] || FLOW_PROFILES['visual-training'];
       if (overlay) {
         overlay.dispose();
+        contextLost = false;
         overlay = attachProgressFlowOverlay({
           root: root,
           canvas: canvas,
           preset: preset,
           getProgress: function getProgress() {
-            return controller.value;
-          }
+            return progressRatio(controller.value, controller.min, controller.max) * 100;
+          },
+          dprCap: effectiveDprCap(merged.quality, merged.renderScale),
+          powerPreference: merged.powerPreference,
+          onContextLost: onContextLost,
+          onContextRestored: onContextRestored
         });
       }
       controller.webglActive = Boolean(overlay);
       controller.resizeCanvas();
+      if (isMotionPaused()) renderOnce();
       return this;
     },
     setText: function setText(content) {
@@ -2075,6 +2422,22 @@ function createProgressCapsule(container) {
       controller.setValueSuffix(suffix);
       return this;
     },
+    setStep: function setStep(step) {
+      controller.setStep(step);
+      return this;
+    },
+    setPrecision: function setPrecision(precision) {
+      controller.setPrecision(precision);
+      return this;
+    },
+    setFormatValue: function setFormatValue(formatter) {
+      controller.setFormatValue(formatter);
+      return this;
+    },
+    setDirection: function setDirection(direction) {
+      controller.setDirection(direction);
+      return this;
+    },
     setShowValue: function setShowValue(show) {
       controller.setShowValue(show);
       return this;
@@ -2085,9 +2448,12 @@ function createProgressCapsule(container) {
         return !color;
       })) return this;
       dirty.colors = true;
+      colorOverride = _toConsumableArray(next);
+      preset.colors = _toConsumableArray(next);
       controller.setColors(next);
       if (overlay) overlay.setColors(next);
       controller.resizeCanvas();
+      if (isMotionPaused()) renderOnce();
       return this;
     },
     setSize: function setSize(width, height) {
@@ -2101,30 +2467,68 @@ function createProgressCapsule(container) {
       }
       applySize();
       controller.resizeCanvas();
+      if (isMotionPaused()) renderOnce();
       return this;
     },
     randomize: function randomize() {
-      controller.randomize();
+      flowTime = controller.randomize();
+      if (isMotionPaused()) renderOnce();
       return this;
     },
     pause: function pause() {
-      paused = true;
+      dirty.paused = true;
+      manuallyPaused = true;
+      renderOnce();
       return this;
     },
     resume: function resume() {
-      paused = false;
+      dirty.paused = true;
+      manuallyPaused = false;
+      wakeScheduler();
+      return this;
+    },
+    setPaused: function setPaused(value) {
+      return value ? this.pause() : this.resume();
+    },
+    setStatic: function setStatic(value) {
+      dirty.static = true;
+      staticMode = value === true;
+      merged.static = staticMode;
+      if (staticMode) renderOnce();else wakeScheduler();
+      return this;
+    },
+    setFps: function setFps(fps) {
+      dirty.fps = true;
+      merged.fps = frameGate.setFps(fps);
+      wakeScheduler();
       return this;
     },
     setQuality: function setQuality(quality) {
+      dirty.quality = true;
       merged.quality = quality;
-      controller.dprCap = dprCapFor(quality);
+      controller.dprCap = effectiveDprCap(quality, merged.renderScale);
+      controller.resizeCanvas();
+      if (overlay) overlay.setDprCap(controller.dprCap);
+      if (isMotionPaused()) renderOnce();
+      return this;
+    },
+    setRenderScale: function setRenderScale(renderScale) {
+      var value = Number(renderScale);
+      if (!Number.isFinite(value)) return this;
+      dirty.renderScale = true;
+      merged.renderScale = Math.min(1, Math.max(0.25, value));
+      controller.dprCap = effectiveDprCap(merged.quality, merged.renderScale);
       controller.resizeCanvas();
+      if (overlay) overlay.setDprCap(controller.dprCap);
+      if (isMotionPaused()) renderOnce();
       return this;
     },
     dispose: function dispose() {
       disposed = true;
       unsubscribe();
+      offPausedChange();
       visibility.dispose();
+      motionPreference.dispose();
       if (overlay) overlay.dispose();
       controller.dispose();
       root.remove();
@@ -2135,6 +2539,45 @@ function createProgressCapsule(container) {
     get cssVars() {
       return merged.cssVars;
     },
+    get min() {
+      return controller.min;
+    },
+    get max() {
+      return controller.max;
+    },
+    get step() {
+      return controller.step;
+    },
+    get precision() {
+      return controller.precision;
+    },
+    get formatValue() {
+      return controller.formatValue;
+    },
+    get direction() {
+      return controller.direction;
+    },
+    get showValue() {
+      return !valueElement.hidden;
+    },
+    get valueSuffix() {
+      return controller.valueSuffix;
+    },
+    get quality() {
+      return merged.quality;
+    },
+    get renderScale() {
+      return merged.renderScale;
+    },
+    get paused() {
+      return manuallyPaused;
+    },
+    get static() {
+      return staticMode;
+    },
+    get fps() {
+      return frameGate.getFps();
+    },
     dirty: dirty
   };
 }