@5even7/dlc-ui 0.2.10 → 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);
@@ -869,7 +906,7 @@ var MOTION_SCALE_FACTORS = {
   'tide': 1.18
 };
 var VERTEX_SHADER = "#version 300 es\nin vec2 a_position;\nout vec2 v_uv;\nvoid main() {\n  v_uv = a_position * 0.5 + 0.5;\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}";
-var FRAGMENT_SHADER = "#version 300 es\nprecision highp float;\n\nin vec2 v_uv;\nout vec4 outColor;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_progress;\nuniform float u_seed;\nuniform float u_profile;\nuniform sampler2D u_motion;\nuniform sampler2D u_effect;\nuniform float u_hasEffect;\nuniform float u_effectFrames;\nuniform float u_motionDuration;\nuniform float u_motionScale;\nuniform vec3 u_dark;\nuniform vec3 u_accentA;\nuniform vec3 u_accentB;\nuniform vec3 u_glow;\n\nfloat hash21(vec2 p) {\n  p = fract(p * vec2(123.34, 456.21));\n  p += dot(p, p + 45.32 + u_seed * 11.7);\n  return fract(p.x * p.y);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  f = f * f * (3.0 - 2.0 * f);\n  float a = hash21(i);\n  float b = hash21(i + vec2(1.0, 0.0));\n  float c = hash21(i + vec2(0.0, 1.0));\n  float d = hash21(i + vec2(1.0, 1.0));\n  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);\n}\n\nfloat fbm(vec2 p) {\n  float value = 0.0;\n  float amplitude = 0.55;\n  mat2 rotation = mat2(0.82, 0.57, -0.57, 0.82);\n  for (int i = 0; i < 6; i++) {\n    value += noise(p) * amplitude;\n    p = rotation * p * 2.02 + 13.7;\n    amplitude *= 0.48;\n  }\n  return value;\n}\n\nfloat gaussian(float value, float center, float width) {\n  float delta = (value - center) / max(width, 0.0001);\n  return exp(-delta * delta);\n}\n\nfloat profileMix(float model, float agent, float visual) {\n  if (u_profile < 0.5) return model;\n  if (u_profile < 1.5) return agent;\n  return visual;\n}\n\nfloat motionSample(float y, float t) {\n  float phase = fract(t / max(u_motionDuration, 0.001));\n  float captured = texture(u_motion, vec2(phase, 1.0 - clamp(y, 0.0, 1.0))).r;\n  return (captured * 2.0 - 1.0) * u_motionScale;\n}\n\nfloat edgeDisplacement(float y, float t) {\n  return motionSample(y, t);\n}\n\nfloat flowDisplacement(float y, float t) {\n  return (\n    motionSample(y - 0.024, t) * 0.08 +\n    motionSample(y - 0.012, t) * 0.18 +\n    motionSample(y, t) * 0.48 +\n    motionSample(y + 0.012, t) * 0.18 +\n    motionSample(y + 0.024, t) * 0.08\n  );\n}\n\nfloat ellipseRing(vec2 p, float radius, float width) {\n  return gaussian(length(p), radius, width);\n}\n\nvoid main() {\n  vec2 uv = v_uv;\n  float t = u_time;\n  float edge = u_progress + edgeDisplacement(uv.y, t);\n  float flowEdge = u_progress + flowDisplacement(uv.y, t);\n  float d = uv.x - edge;\n  float fd = uv.x - flowEdge;\n\n  vec3 rightBase = vec3(0.125, 0.129, 0.145);\n  vec3 color = rightBase;\n\n  float leftMask = 1.0 - smoothstep(-0.001, 0.002, d);\n  color = mix(color, u_dark, leftMask * profileMix(0.96, 0.92, 0.96));\n\n  vec2 flowP = vec2((fd + 0.10) * 6.2, uv.y * 1.95);\n  float flowA = fbm(flowP + vec2(-t * 0.22, t * 0.27) + u_seed * 1.7);\n  float flowB = fbm(flowP * 1.52 + vec2(t * 0.28, -t * 0.36) + 8.2 + u_seed);\n  float flowC = fbm(flowP * 2.25 + vec2(-t * 0.41, t * 0.46) + 19.0);\n\n  float farCenter = profileMix(-0.060, -0.079, -0.045) + (flowA - 0.5) * profileMix(0.018, 0.022, 0.014);\n  float midCenter = profileMix(-0.039, -0.052, -0.030) + (flowB - 0.5) * profileMix(0.013, 0.016, 0.010);\n  float hotCenter = profileMix(-0.026, -0.029, -0.023) + (flowC - 0.5) * 0.010;\n\n  float farBand = gaussian(fd, farCenter, profileMix(0.035, 0.049, 0.030));\n  float midBand = gaussian(fd, midCenter, profileMix(0.026, 0.034, 0.026));\n  float hotBand = gaussian(fd, hotCenter, profileMix(0.023, 0.027, 0.026));\n  float darkTrough = gaussian(fd, profileMix(-0.050, -0.058, -0.044) + (flowB - 0.5) * 0.010, profileMix(0.020, 0.025, 0.021));\n\n  float ringY = 0.47 + sin(t * 0.58 + u_seed * 2.4) * 0.12;\n  vec2 ringP = vec2((fd + 0.086) / 0.078, (uv.y - ringY) / 0.25);\n  ringP += vec2((flowB - 0.5) * 0.08, (flowA - 0.5) * 0.06);\n  float ringTexture = fbm(ringP * 2.15 + vec2(t * 0.18, -t * 0.14) + u_seed * 1.9);\n  float ring = ellipseRing(ringP, 0.66, 0.32) * (0.30 + 0.64 * ringTexture);\n  float ringCore = gaussian(length(ringP), 0.25, 0.25);\n  float ringPulse = smoothstep(0.58, 0.90, 0.5 + 0.5 * sin(t * 0.82 + u_seed * 4.1));\n  float modelRing = ring * ringPulse * (1.0 - step(0.5, u_profile));\n  float visualRing = ring * 0.16 * step(1.5, u_profile) * ringPulse;\n\n  float cloudGate = leftMask * smoothstep(-0.30, -0.008, fd);\n  float textureA = smoothstep(0.24, 0.92, flowA * 0.72 + flowB * 0.42);\n  float textureB = smoothstep(0.28, 0.94, flowB * 0.68 + flowC * 0.38);\n\n  vec3 hotColor = u_accentB;\n  color += u_accentA * farBand * cloudGate * (0.07 + textureA * profileMix(0.42, 0.24, 0.40));\n  color += u_accentB * midBand * cloudGate * (0.15 + textureB * profileMix(0.70, 0.46, 0.68));\n  color += hotColor * hotBand * cloudGate * profileMix(0.88, 0.62, 0.84);\n  float modelMask = 1.0 - step(0.5, u_profile);\n  color += u_accentA * (modelRing + visualRing) * cloudGate * profileMix(0.54, 0.0, 0.34);\n  color *= 1.0 - darkTrough * profileMix(0.44, 0.24, 0.24) * cloudGate;\n  color *= 1.0 - ringCore * modelMask * ringPulse * 0.44 * cloudGate;\n\n  float broadHalo = exp(-abs(d) * 96.0);\n  float innerHalo = exp(-abs(d) * 176.0);\n  float colorCore = exp(-abs(d) * 360.0);\n  float sharpCore = exp(-abs(d) * 760.0);\n  float leftGate = 1.0 - smoothstep(-0.003, 0.005, d);\n\n  color += u_accentA * broadHalo * leftGate * profileMix(0.09, 0.04, 0.06);\n  color += hotColor * innerHalo * leftGate * profileMix(0.76, 0.72, 0.78);\n  color += u_glow * colorCore * profileMix(0.72, 0.34, 0.24);\n\n  float whiteStrength = profileMix(0.10, 0.0, 0.0);\n  color += vec3(1.0, 0.99, 0.91) * sharpCore * whiteStrength;\n\n  float rightCut = smoothstep(0.001, 0.006, d);\n  color = mix(color, rightBase, rightCut);\n\n  float effectX = (d * 1257.0 + 260.0) / 320.0;\n  float atlasPhase = fract(t / 12.0) * u_effectFrames;\n  float atlasFrameA = floor(atlasPhase);\n  float atlasFrameB = mod(atlasFrameA + 1.0, u_effectFrames);\n  float atlasMix = smoothstep(0.0, 1.0, fract(atlasPhase));\n  float atlasXA = (atlasFrameA + clamp(effectX, 0.0, 1.0)) / u_effectFrames;\n  float atlasXB = (atlasFrameB + clamp(effectX, 0.0, 1.0)) / u_effectFrames;\n  vec3 referenceA = texture(u_effect, vec2(atlasXA, uv.y)).rgb;\n  vec3 referenceB = texture(u_effect, vec2(atlasXB, uv.y)).rgb;\n  vec3 referenceColor = mix(referenceA, referenceB, atlasMix);\n  float stripMask = smoothstep(0.0, 0.018, effectX) * (1.0 - smoothstep(0.982, 1.0, effectX));\n  float referenceLeft = 1.0 - smoothstep(-0.026, -0.012, d);\n  color = mix(color, referenceColor, stripMask * referenceLeft * u_hasEffect);\n\n  outColor = vec4(clamp(color, 0.0, 1.0), 1.0);\n}";
+var FRAGMENT_SHADER = "#version 300 es\nprecision highp float;\n\nin vec2 v_uv;\nout vec4 outColor;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_progress;\nuniform float u_seed;\nuniform float u_profile;\nuniform sampler2D u_motion;\nuniform sampler2D u_effect;\nuniform float u_hasEffect;\nuniform float u_effectFrames;\nuniform float u_motionDuration;\nuniform float u_motionScale;\nuniform vec3 u_dark;\nuniform vec3 u_accentA;\nuniform vec3 u_accentB;\nuniform vec3 u_glow;\n\nfloat hash21(vec2 p) {\n  p = fract(p * vec2(123.34, 456.21));\n  p += dot(p, p + 45.32 + u_seed * 11.7);\n  return fract(p.x * p.y);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  f = f * f * (3.0 - 2.0 * f);\n  float a = hash21(i);\n  float b = hash21(i + vec2(1.0, 0.0));\n  float c = hash21(i + vec2(0.0, 1.0));\n  float d = hash21(i + vec2(1.0, 1.0));\n  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);\n}\n\nfloat fbm(vec2 p) {\n  float value = 0.0;\n  float amplitude = 0.55;\n  mat2 rotation = mat2(0.82, 0.57, -0.57, 0.82);\n  for (int i = 0; i < 6; i++) {\n    value += noise(p) * amplitude;\n    p = rotation * p * 2.02 + 13.7;\n    amplitude *= 0.48;\n  }\n  return value;\n}\n\nfloat gaussian(float value, float center, float width) {\n  float delta = (value - center) / max(width, 0.0001);\n  return exp(-delta * delta);\n}\n\nfloat profileMix(float model, float agent, float visual) {\n  if (u_profile < 0.5) return model;\n  if (u_profile < 1.5) return agent;\n  return visual;\n}\n\nfloat motionSample(float y, float t) {\n  float phase = fract(t / max(u_motionDuration, 0.001));\n  float captured = texture(u_motion, vec2(phase, 1.0 - clamp(y, 0.0, 1.0))).r;\n  return (captured * 2.0 - 1.0) * u_motionScale;\n}\n\nfloat edgeDisplacement(float y, float t) {\n  return motionSample(y, t);\n}\n\nfloat flowDisplacement(float y, float t) {\n  return (\n    motionSample(y - 0.024, t) * 0.08 +\n    motionSample(y - 0.012, t) * 0.18 +\n    motionSample(y, t) * 0.48 +\n    motionSample(y + 0.012, t) * 0.18 +\n    motionSample(y + 0.024, t) * 0.08\n  );\n}\n\nfloat ellipseRing(vec2 p, float radius, float width) {\n  return gaussian(length(p), radius, width);\n}\n\nvoid main() {\n  vec2 uv = v_uv;\n  float t = u_time;\n  float edge = u_progress + edgeDisplacement(uv.y, t);\n  float flowEdge = u_progress + flowDisplacement(uv.y, t);\n  float d = uv.x - edge;\n  float fd = uv.x - flowEdge;\n\n  vec3 rightBase = vec3(0.125, 0.129, 0.145);\n  vec3 color = rightBase;\n\n  float leftMask = 1.0 - smoothstep(-0.001, 0.002, d);\n  color = mix(color, u_dark, leftMask * profileMix(0.96, 0.92, 0.96));\n\n  vec2 flowP = vec2((fd + 0.10) * 6.2, uv.y * 1.95);\n  float flowA = fbm(flowP + vec2(-t * 0.22, t * 0.27) + u_seed * 1.7);\n  float flowB = fbm(flowP * 1.52 + vec2(t * 0.28, -t * 0.36) + 8.2 + u_seed);\n  float flowC = fbm(flowP * 2.25 + vec2(-t * 0.41, t * 0.46) + 19.0);\n\n  float farCenter = profileMix(-0.060, -0.079, -0.045) + (flowA - 0.5) * profileMix(0.018, 0.022, 0.014);\n  float midCenter = profileMix(-0.039, -0.052, -0.030) + (flowB - 0.5) * profileMix(0.013, 0.016, 0.010);\n  float hotCenter = profileMix(-0.026, -0.029, -0.023) + (flowC - 0.5) * 0.010;\n\n  float farBand = gaussian(fd, farCenter, profileMix(0.035, 0.049, 0.030));\n  float midBand = gaussian(fd, midCenter, profileMix(0.026, 0.034, 0.026));\n  float hotBand = gaussian(fd, hotCenter, profileMix(0.023, 0.027, 0.026));\n  float darkTrough = gaussian(fd, profileMix(-0.050, -0.058, -0.044) + (flowB - 0.5) * 0.010, profileMix(0.020, 0.025, 0.021));\n\n  float ringY = 0.47 + sin(t * 0.58 + u_seed * 2.4) * 0.12;\n  vec2 ringP = vec2((fd + 0.086) / 0.078, (uv.y - ringY) / 0.25);\n  ringP += vec2((flowB - 0.5) * 0.08, (flowA - 0.5) * 0.06);\n  float ringTexture = fbm(ringP * 2.15 + vec2(t * 0.18, -t * 0.14) + u_seed * 1.9);\n  float ring = ellipseRing(ringP, 0.66, 0.32) * (0.30 + 0.64 * ringTexture);\n  float ringCore = gaussian(length(ringP), 0.25, 0.25);\n  float ringPulse = smoothstep(0.58, 0.90, 0.5 + 0.5 * sin(t * 0.82 + u_seed * 4.1));\n  float modelRing = ring * ringPulse * (1.0 - step(0.5, u_profile));\n  float visualRing = ring * 0.16 * step(1.5, u_profile) * ringPulse;\n\n  float cloudGate = leftMask * smoothstep(-0.30, -0.008, fd);\n  float textureA = smoothstep(0.24, 0.92, flowA * 0.72 + flowB * 0.42);\n  float textureB = smoothstep(0.28, 0.94, flowB * 0.68 + flowC * 0.38);\n\n  vec3 hotColor = u_accentB;\n  color += u_accentA * farBand * cloudGate * (0.07 + textureA * profileMix(0.42, 0.24, 0.40));\n  color += u_accentB * midBand * cloudGate * (0.15 + textureB * profileMix(0.70, 0.46, 0.68));\n  color += hotColor * hotBand * cloudGate * profileMix(0.88, 0.62, 0.84);\n  float modelMask = 1.0 - step(0.5, u_profile);\n  color += u_accentA * (modelRing + visualRing) * cloudGate * profileMix(0.54, 0.0, 0.34);\n  color *= 1.0 - darkTrough * profileMix(0.44, 0.24, 0.24) * cloudGate;\n  color *= 1.0 - ringCore * modelMask * ringPulse * 0.44 * cloudGate;\n\n  float broadHalo = exp(-abs(d) * 96.0);\n  float innerHalo = exp(-abs(d) * 176.0);\n  float colorCore = exp(-abs(d) * 360.0);\n  float sharpCore = exp(-abs(d) * 760.0);\n  float leftGate = 1.0 - smoothstep(-0.003, 0.005, d);\n\n  color += u_accentA * broadHalo * leftGate * profileMix(0.09, 0.04, 0.06);\n  color += hotColor * innerHalo * leftGate * profileMix(0.76, 0.72, 0.78);\n  color += u_glow * colorCore * profileMix(0.72, 0.34, 0.24);\n\n  float whiteStrength = profileMix(0.10, 0.0, 0.0);\n  color += vec3(1.0, 0.99, 0.91) * sharpCore * whiteStrength;\n\n  float rightCut = smoothstep(0.001, 0.006, d);\n  color = mix(color, rightBase, rightCut);\n\n  float effectX = (d * 1257.0 + 260.0) / 320.0;\n  float atlasPhase = fract(t / 12.0) * u_effectFrames;\n  float atlasFrameA = floor(atlasPhase);\n  float atlasFrameB = mod(atlasFrameA + 1.0, u_effectFrames);\n  float atlasMix = smoothstep(0.0, 1.0, fract(atlasPhase));\n  float atlasXA = (atlasFrameA + clamp(effectX, 0.0, 1.0)) / u_effectFrames;\n  float atlasXB = (atlasFrameB + clamp(effectX, 0.0, 1.0)) / u_effectFrames;\n  vec3 referenceA = texture(u_effect, vec2(atlasXA, uv.y)).rgb;\n  vec3 referenceB = texture(u_effect, vec2(atlasXB, uv.y)).rgb;\n  vec3 referenceColor = mix(referenceA, referenceB, atlasMix);\n  float stripMask = smoothstep(0.0, 0.018, effectX) * (1.0 - smoothstep(0.982, 1.0, effectX));\n  float referenceLeft = 1.0 - smoothstep(-0.026, -0.012, d);\n  // \u53C2\u8003\u56FE\u96C6\u53EA\u63D0\u4F9B\u4EAE\u5EA6\u7ED3\u6784\uFF0C\u989C\u8272\u59CB\u7EC8\u7531\u7528\u6237 colors\uFF08u_dark / u_accentA /\n  // u_accentB / u_glow\uFF09\u51B3\u5B9A\uFF1A\u8FD9\u6837 setColors / colors \u5C5E\u6027\u5728 WebGL \u8DEF\u5F84\u4E0B\n  // \u771F\u5B9E\u751F\u6548\uFF0C\u6539\u8272\u6709\u53EF\u89C1\u53CD\u9988\uFF0C\u800C\u4E0D\u662F\u88AB\u56FE\u96C6\u6574\u4F53\u8986\u76D6\u3002\n  float referenceLuma = dot(referenceColor, vec3(0.299, 0.587, 0.114));\n  vec3 tintedColor = color * (0.42 + 0.86 * referenceLuma);\n  color = mix(color, tintedColor, stripMask * referenceLeft * u_hasEffect);\n\n  outColor = vec4(clamp(color, 0.0, 1.0), 1.0);\n}";
 function compileShader(gl, type, source) {
   var shader = gl.createShader(type);
   gl.shaderSource(shader, source);
@@ -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,14 +1900,45 @@ 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) {
       if (event.button !== undefined && event.button !== 0) return;
       event.preventDefault();
-      // preventDefault 会吞掉点击聚焦，主动聚焦让键盘方向键立即可用。
+      // preventDefault 会吞掉点击聚焦，主动聚焦让根节点获得无障碍焦点。
       try {
         this.root.focus({
           preventScroll: true
@@ -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 (id/code/name or object), 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
   };
 }