@5even7/dlc-ui 0.2.11 → 0.2.13

package/dist/progress.mjs

@@ -1,141 +1,157 @@
-/**
- * Tiny event emitter. Accepts any event name so the API stays open for
- * future events (hover, click, custom) without breaking changes.
- */
-function createEmitter() {
-  // Plain object storage (no Map/Set) so the legacy build has no API
-  // dependencies beyond what IE11 provides.
-  const listeners = Object.create(null);
-
-  return {
-    on(event, fn) {
-      if (!listeners[event]) listeners[event] = [];
-      listeners[event].push(fn);
-      return () => {
-        const current = listeners[event];
-        if (current) {
-          const index = current.indexOf(fn);
-          if (index !== -1) current.splice(index, 1);
-        }
-      };
-    },
-    off(event, fn) {
-      const current = listeners[event];
-      if (!current) return false;
-      const index = current.indexOf(fn);
-      if (index === -1) return false;
-      current.splice(index, 1);
-      return true;
-    },
-    emit(event, ...args) {
-      const current = listeners[event];
-      if (!current) return;
-      for (const fn of current.slice()) fn(...args);
-    }
-  };
+/**
+ * Tiny event emitter. Accepts any event name so the API stays open for
+ * future events (hover, click, custom) without breaking changes.
+ */
+function createEmitter() {
+  // Plain object storage (no Map/Set) so the legacy build has no API
+  // dependencies beyond what IE11 provides.
+  const listeners = Object.create(null);
+
+  return {
+    on(event, fn) {
+      if (!listeners[event]) listeners[event] = [];
+      listeners[event].push(fn);
+      return () => {
+        const current = listeners[event];
+        if (current) {
+          const index = current.indexOf(fn);
+          if (index !== -1) current.splice(index, 1);
+        }
+      };
+    },
+    off(event, fn) {
+      const current = listeners[event];
+      if (!current) return false;
+      const index = current.indexOf(fn);
+      if (index === -1) return false;
+      current.splice(index, 1);
+      return true;
+    },
+    emit(event, ...args) {
+      const current = listeners[event];
+      if (!current) return;
+      for (const fn of current.slice()) fn(...args);
+    }
+  };
+}
+
+const UNIT_PATTERN = /^[\d.]+(?:px|%|vw|vh|vmin|vmax|em|rem)$/;
+
+/**
+ * Normalize a size option to a CSS length string.
+ * Accepts numbers (treated as px) or strings with px/%, vw/vh/vmin/vmax, em/rem.
+ */
+function parseSize(value) {
+  if (typeof value === 'number') {
+    if (!Number.isFinite(value) || value < 0) throw new Error(`Invalid size: ${value}`);
+    return `${value}px`;
+  }
+  if (typeof value !== 'string') throw new Error(`Invalid size: ${String(value)}`);
+  const trimmed = value.trim();
+  if (!trimmed) throw new Error('Invalid size: empty string');
+  if (/^\d+(?:\.\d+)?$/.test(trimmed)) return `${trimmed}px`;
+  if (!UNIT_PATTERN.test(trimmed)) {
+    throw new Error(`Invalid size or unsupported unit: "${value}" (use px, %, vw, vh, vmin, vmax, em, rem)`);
+  }
+  return trimmed;
 }
 
-const UNIT_PATTERN = /^[\d.]+(?:px|%|vw|vh|vmin|vmax|em|rem)$/;
-
-/**
- * Normalize a size option to a CSS length string.
- * Accepts numbers (treated as px) or strings with px/%, vw/vh/vmin/vmax, em/rem.
- */
-function parseSize(value) {
-  if (typeof value === 'number') {
-    if (!Number.isFinite(value) || value < 0) throw new Error(`Invalid size: ${value}`);
-    return `${value}px`;
-  }
-  if (typeof value !== 'string') throw new Error(`Invalid size: ${String(value)}`);
-  const trimmed = value.trim();
-  if (!trimmed) throw new Error('Invalid size: empty string');
-  if (/^\d+(?:\.\d+)?$/.test(trimmed)) return `${trimmed}px`;
-  if (!UNIT_PATTERN.test(trimmed)) {
-    throw new Error(`Invalid size or unsupported unit: "${value}" (use px, %, vw, vh, vmin, vmax, em, rem)`);
-  }
-  return trimmed;
+const QUALITY_TIERS = {
+  low: { dpr: 1 },
+  medium: { dpr: 1.5 },
+  high: { dpr: 2 }
+};
+
+function autoDprCap() {
+  const nav = typeof navigator !== 'undefined' ? navigator : null;
+  const memory = nav && typeof nav.deviceMemory === 'number' ? nav.deviceMemory : 8;
+  const cores = nav && typeof nav.hardwareConcurrency === 'number' ? nav.hardwareConcurrency : 8;
+  return memory <= 4 || cores <= 4 ? 1.5 : 2;
 }
 
-const QUALITY_TIERS = {
-  low: { dpr: 1 },
-  medium: { dpr: 1.5 },
-  high: { dpr: 2 }
-};
-
-function autoDprCap() {
-  const nav = typeof navigator !== 'undefined' ? navigator : null;
-  const memory = nav && typeof nav.deviceMemory === 'number' ? nav.deviceMemory : 8;
-  const cores = nav && typeof nav.hardwareConcurrency === 'number' ? nav.hardwareConcurrency : 8;
-  return memory <= 4 || cores <= 4 ? 1.5 : 2;
-}
-
-function dprCapFor(quality) {
-  if (quality === 'auto') return autoDprCap();
-  const tier = QUALITY_TIERS[quality] || QUALITY_TIERS.medium;
-  return tier.dpr;
+function dprCapFor(quality) {
+  if (quality === 'auto') return autoDprCap();
+  const tier = QUALITY_TIERS[quality] || QUALITY_TIERS.medium;
+  return tier.dpr;
 }
 
-/**
- * Merge defaults < preset < user. Unknown user keys are preserved so the
- * component API can grow (new props, cssVars, callbacks) without a breaking
- * change.
- */
-function normalizeOptions(defaults, preset, user) {
-  // undefined means "not provided" (e.g. Vue $props with unset props):
-  // drop those keys before merging so defaults/preset values survive.
-  const omitUndefined = (source) => {
-    const result = {};
-    for (const key of Object.keys(source)) {
-      if (source[key] !== undefined) result[key] = source[key];
-    }
-    return result;
-  };
-  const presetOptions = omitUndefined(preset && typeof preset === 'object' ? preset : {});
-  const userOptions = omitUndefined(user && typeof user === 'object' ? user : {});
-  return { ...defaults, ...presetOptions, ...userOptions };
+function effectiveDprCap(quality, renderScale = 1) {
+  const scale = Number(renderScale);
+  const normalizedScale = Number.isFinite(scale) ? Math.min(1, Math.max(0.25, scale)) : 1;
+  return Math.max(0.5, dprCapFor(quality) * normalizedScale);
 }
 
-const PROGRESS_PRESETS = [
+/**
+ * Merge defaults < preset < user. Unknown user keys are preserved so the
+ * component API can grow (new props, cssVars, callbacks) without a breaking
+ * change.
+ */
+function normalizeOptions(defaults, preset, user) {
+  // undefined means "not provided" (e.g. Vue $props with unset props):
+  // drop those keys before merging so defaults/preset values survive.
+  const omitUndefined = (source) => {
+    const result = {};
+    for (const key of Object.keys(source)) {
+      if (source[key] !== undefined) result[key] = source[key];
+    }
+    return result;
+  };
+  const presetOptions = omitUndefined(preset && typeof preset === 'object' ? preset : {});
+  const userOptions = omitUndefined(user && typeof user === 'object' ? user : {});
+  return { ...defaults, ...presetOptions, ...userOptions };
+}
+
+const PROGRESS_PRESETS = [
   {
     id: 'model-training',
     code: 'NC-10',
     name: '星火',
-    subtitle: 'SHA 4.5 + 100 2026 TKN',
-    group: 'progress',
-    initialProgress: 43,
-    edgeStyle: 'flow',
-    colors: ['#2B1025', '#FF3F94', '#FF8A3D', '#FFF06A']
-  },
+    subtitle: 'SHA 4.5 + 100 2026 TKN',
+    group: 'progress',
+    initialProgress: 43,
+    edgeStyle: 'flow',
+    colors: ['#2B1025', '#FF3F94', '#FF8A3D', '#FFF06A']
+  },
   {
     id: 'agent-migration',
     code: 'NC-11',
     name: '迁流',
-    subtitle: 'TRANSFERRING PROTOCOL',
-    group: 'progress',
-    initialProgress: 33,
-    edgeStyle: 'flow',
-    colors: ['#101C37', '#245BFF', '#00CFFF', '#5DFFE6']
-  },
+    subtitle: 'TRANSFERRING PROTOCOL',
+    group: 'progress',
+    initialProgress: 33,
+    edgeStyle: 'flow',
+    colors: ['#101C37', '#245BFF', '#00CFFF', '#5DFFE6']
+  },
   {
     id: 'visual-training',
     code: 'NC-12',
     name: '幻境',
-    subtitle: 'GENERATING POWER ++',
-    group: 'progress',
-    initialProgress: 58,
-    edgeStyle: 'flow',
-    colors: ['#21142D', '#7042FF', '#42F58D', '#C4FF8A']
-  },
+    subtitle: 'GENERATING POWER ++',
+    group: 'progress',
+    initialProgress: 58,
+    edgeStyle: 'flow',
+    colors: ['#21142D', '#7042FF', '#42F58D', '#C4FF8A']
+  },
   {
     id: 'tide',
     code: 'NC-13',
     name: '汐潮',
-    subtitle: 'MOON PULL / COAST',
-    group: 'progress',
-    initialProgress: 30,
-    edgeStyle: 'tide',
-    colors: ['#0A2239', '#2E9BFF', '#7FE3FF', '#EAF9FF']
-  }
+    subtitle: 'MOON PULL / COAST',
+    group: 'progress',
+    initialProgress: 30,
+    edgeStyle: 'tide',
+    colors: ['#0A2239', '#2E9BFF', '#7FE3FF', '#EAF9FF']
+  },
+  {
+    id: 'botanic-lab',
+    code: 'NC-14',
+    name: '森息',
+    subtitle: 'MOSS CULTURE / ROOTING',
+    group: 'progress',
+    initialProgress: 46,
+    edgeStyle: 'flow',
+    colors: ['#102A23', '#287A58', '#9BD65B', '#F2FFC4']
+  }
 ];
 
 /**
@@ -164,13 +180,22 @@ const 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
@@ -185,8 +210,8 @@ const DEFAULTS = {
 const COPY = {
   brandName: '画境观屿',
   valueSuffix: '%',
-  progressAria: '{brand} {code} 加载进度',
-  capsuleAria: '打开 {name} 沉浸预览'
+  progressAria: '{brand} {code} 加载进度',
+  capsuleAria: '打开 {name} 沉浸预览'
 };
 
 /**
@@ -404,360 +429,379 @@ function hexToRgba(color, alpha = 1) {
   return `rgba(${red}, ${green}, ${blue}, ${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.
- */
-const subscribers = [];
-let running = false;
-let rafId = 0;
-let last = 0;
-
-function tick(now) {
-  if (!running) return;
-  const delta = last ? Math.min((now - last) / 1000, 0.05) : 0;
-  last = now;
-  // Schedule the next frame BEFORE running callbacks so one throwing
-  // subscriber can never kill the whole animation loop.
-  rafId = requestAnimationFrame(tick);
-  {
-  for (const item of subscribers.slice()) {
-    try {
-      if (!item.isPaused()) item.onFrame(delta, now);
-    } catch (error) {
+/**
+ * Document-level shared rAF scheduler. Every component instance subscribes
+ * its own frame callback; the whole page runs ONE animation loop (like the
+ * original demo), which avoids jank from many competing rAF loops.
+ */
+const subscribers = [];
+let running = false;
+let rafId = 0;
+let last = 0;
+
+function tick(now) {
+  if (!running) return;
+  const activeItems = [];
+  {
+    for (const item of subscribers.slice()) {
+      try {
+        if (!item.isPaused()) activeItems.push(item);
+      } catch {}
+    }
+  }
+  if (activeItems.length === 0) {
+    running = false;
+    rafId = 0;
+    last = 0;
+    return;
+  }
+  const delta = last ? Math.min((now - last) / 1000, 0.05) : 0;
+  last = now;
+  // Schedule the next frame BEFORE running callbacks so one throwing
+  // subscriber can never kill the whole animation loop.
+  rafId = requestAnimationFrame(tick);
+  for (const item of activeItems) {
+    try {
+      item.onFrame(delta, now);
+    } catch (error) {
       console.warn('[dlc-ui] frame error:', error);
-    }
-  }
-  }
-  if (subscribers.length === 0) {
-    cancelAnimationFrame(rafId);
-    running = false;
-    rafId = 0;
-  }
-}
-
-function start() {
-  if (running) return;
-  running = true;
-  last = 0;
-  rafId = requestAnimationFrame(tick);
-}
-
-function subscribeScheduler(onFrame, isPaused) {
-  const item = { onFrame, isPaused };
-  subscribers.push(item);
-  start();
-  return () => {
-    const index = subscribers.indexOf(item);
-    if (index !== -1) subscribers.splice(index, 1);
-    if (subscribers.length === 0 && rafId) {
-      cancelAnimationFrame(rafId);
-      running = false;
-      rafId = 0;
-    }
-  };
+    }
+  }
+  if (subscribers.length === 0) {
+    cancelAnimationFrame(rafId);
+    running = false;
+    rafId = 0;
+  }
 }
 
-/**
- * Gates drawing on "element intersects viewport AND the page tab is visible".
- * Falls back to always-visible when IntersectionObserver is unavailable.
- */
-function createVisibilityGuard(element) {
-  let intersecting = true;
-  let pageVisible = typeof document === 'undefined' || !document.hidden;
-  let disposed = false;
-  let observer = null;
-
-  if (typeof IntersectionObserver !== 'undefined') {
-    observer = new IntersectionObserver(
-      (entries) => {
-        intersecting = entries.some((entry) => entry.isIntersecting);
-      },
-      { rootMargin: '180px' }
-    );
-    observer.observe(element);
-  }
-
-  const onVisibilityChange = () => {
-    pageVisible = typeof document !== 'undefined' && !document.hidden;
-  };
-  if (typeof document !== 'undefined') {
-    document.addEventListener('visibilitychange', onVisibilityChange);
-  }
-
-  return {
-    isVisible() {
-      return intersecting && pageVisible;
-    },
-    dispose() {
-      if (disposed) return;
-      disposed = true;
-      if (observer) observer.disconnect();
-      if (typeof document !== 'undefined') {
-        document.removeEventListener('visibilitychange', onVisibilityChange);
-      }
-    }
-  };
+function start() {
+  if (running) return;
+  running = true;
+  last = 0;
+  rafId = requestAnimationFrame(tick);
 }
 
-const PROGRESS_MOTION_WIDTH = 240;
-const PROGRESS_MOTION_HEIGHT = 80;
-const PROGRESS_MOTION_DURATION = 12.0;
-const PROGRESS_MOTION_MAX_PX = 40.0;
-
-const PROFILE_CONFIG = {
-  'model-training': { seed: 0.37, broad: 0.58, middle: 0.25, detail: 0.13, lobe: 0.24 },
-  'agent-migration': { seed: 1.71, broad: 0.72, middle: 0.10, detail: 0.03, lobe: 0.18 },
-  'visual-training': { seed: 2.83, broad: 0.66, middle: 0.16, detail: 0.06, lobe: 0.23 },
-  // ponytail: first-pass tide = asymmetric time warp on the same motion pipeline.
-  // Refine (foam line / wash streaks) in the shader after visual QA.
-  'tide': { seed: 4.12, broad: 0.82, middle: 0.07, detail: 0.02, lobe: 0.30, warp: 0.5 }
-};
-
-const CACHE$1 = Object.create(null);
-
-function gaussian(value, center, width) {
-  const delta = (value - center) / Math.max(width, 0.001);
-  return Math.exp(-delta * delta);
-}
-
-function createMotionData(id, edgeStyle = 'flow') {
-  const profile = edgeStyle === 'tide'
-    ? PROFILE_CONFIG.tide
-    : (PROFILE_CONFIG[id] || PROFILE_CONFIG['visual-training']);
-  const data = new Uint8Array(PROGRESS_MOTION_WIDTH * PROGRESS_MOTION_HEIGHT);
-
-  for (let x = 0; x < PROGRESS_MOTION_WIDTH; x += 1) {
-    let time = (x / PROGRESS_MOTION_WIDTH) * Math.PI * 2;
-    if (profile.warp) time += profile.warp * Math.sin(time * 2);
-    const centerA = 0.28 + Math.sin(time * 0.53 + profile.seed) * 0.13;
-    const centerB = 0.70 + Math.cos(time * 0.47 + profile.seed * 1.7) * 0.12;
-
-    for (let y = 0; y < PROGRESS_MOTION_HEIGHT; y += 1) {
-      const ratio = y / Math.max(PROGRESS_MOTION_HEIGHT - 1, 1);
-      const envelope = Math.pow(Math.max(Math.sin(Math.PI * ratio), 0), 0.48);
-      const broad = Math.sin(ratio * Math.PI * 2 * 1.35 + time * 0.58 + profile.seed) * profile.broad;
-      const middle = Math.sin(ratio * Math.PI * 2 * 3.2 - time * 0.91 + profile.seed * 2.1) * profile.middle;
-      const detail = Math.sin(ratio * Math.PI * 2 * 6.1 + time * 1.31 + profile.seed * 3.2) * profile.detail;
-      const lobes = (
-        gaussian(ratio, centerA, 0.09) * Math.sin(time * 1.11 + profile.seed * 4.0) -
-        gaussian(ratio, centerB, 0.10) * Math.cos(time * 0.97 + profile.seed * 3.3)
-      ) * profile.lobe;
-      const normalized = Math.max(-1, Math.min(1, (broad + middle + detail + lobes) * envelope));
-      data[y * PROGRESS_MOTION_WIDTH + x] = Math.round((normalized * 0.5 + 0.5) * 255);
-    }
-  }
-
-  return data;
-}
-
-function getProgressMotionData(id, edgeStyle = 'flow') {
-  const key = `${id}:${edgeStyle}`;
-  if (!CACHE$1[key]) CACHE$1[key] = createMotionData(id, edgeStyle);
-  return CACHE$1[key];
+function wakeScheduler() {
+  start();
 }
 
-function hexToRgb01(hex) {
-  const value = Number.parseInt(hex.replace('#', ''), 16);
-  return [
-    ((value >> 16) & 255) / 255,
-    ((value >> 8) & 255) / 255,
-    (value & 255) / 255
-  ];
-}
-
-function stringSeed$1(value) {
-  let hash = 2166136261;
-  for (const character of value) {
-    hash ^= character.charCodeAt(0);
-    hash = Math.imul(hash, 16777619);
-  }
-  return (hash >>> 0) / 4294967295;
-}
-
-const PROFILE_INDEX = {
-  'model-training': 0,
-  'agent-migration': 1,
-  'visual-training': 2,
-  'tide': 3
-};
-
-const MOTION_SCALE_FACTORS = {
-  'model-training': 1.05,
-  'agent-migration': 1.04,
-  'visual-training': 1.04,
-  'tide': 1.18
-};
-
-const VERTEX_SHADER = `#version 300 es
-in vec2 a_position;
-out vec2 v_uv;
-void main() {
-  v_uv = a_position * 0.5 + 0.5;
-  gl_Position = vec4(a_position, 0.0, 1.0);
-}`;
-
-const FRAGMENT_SHADER = `#version 300 es
-precision highp float;
-
-in vec2 v_uv;
-out vec4 outColor;
-
-uniform vec2 u_resolution;
-uniform float u_time;
-uniform float u_progress;
-uniform float u_seed;
-uniform float u_profile;
-uniform sampler2D u_motion;
-uniform sampler2D u_effect;
-uniform float u_hasEffect;
-uniform float u_effectFrames;
-uniform float u_motionDuration;
-uniform float u_motionScale;
-uniform vec3 u_dark;
-uniform vec3 u_accentA;
-uniform vec3 u_accentB;
-uniform vec3 u_glow;
-
-float hash21(vec2 p) {
-  p = fract(p * vec2(123.34, 456.21));
-  p += dot(p, p + 45.32 + u_seed * 11.7);
-  return fract(p.x * p.y);
-}
-
-float noise(vec2 p) {
-  vec2 i = floor(p);
-  vec2 f = fract(p);
-  f = f * f * (3.0 - 2.0 * f);
-  float a = hash21(i);
-  float b = hash21(i + vec2(1.0, 0.0));
-  float c = hash21(i + vec2(0.0, 1.0));
-  float d = hash21(i + vec2(1.0, 1.0));
-  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
-}
-
-float fbm(vec2 p) {
-  float value = 0.0;
-  float amplitude = 0.55;
-  mat2 rotation = mat2(0.82, 0.57, -0.57, 0.82);
-  for (int i = 0; i < 6; i++) {
-    value += noise(p) * amplitude;
-    p = rotation * p * 2.02 + 13.7;
-    amplitude *= 0.48;
-  }
-  return value;
-}
-
-float gaussian(float value, float center, float width) {
-  float delta = (value - center) / max(width, 0.0001);
-  return exp(-delta * delta);
-}
-
-float profileMix(float model, float agent, float visual) {
-  if (u_profile < 0.5) return model;
-  if (u_profile < 1.5) return agent;
-  return visual;
-}
-
-float motionSample(float y, float t) {
-  float phase = fract(t / max(u_motionDuration, 0.001));
-  float captured = texture(u_motion, vec2(phase, 1.0 - clamp(y, 0.0, 1.0))).r;
-  return (captured * 2.0 - 1.0) * u_motionScale;
-}
-
-float edgeDisplacement(float y, float t) {
-  return motionSample(y, t);
-}
-
-float flowDisplacement(float y, float t) {
-  return (
-    motionSample(y - 0.024, t) * 0.08 +
-    motionSample(y - 0.012, t) * 0.18 +
-    motionSample(y, t) * 0.48 +
-    motionSample(y + 0.012, t) * 0.18 +
-    motionSample(y + 0.024, t) * 0.08
-  );
-}
-
-float ellipseRing(vec2 p, float radius, float width) {
-  return gaussian(length(p), radius, width);
-}
-
-void main() {
-  vec2 uv = v_uv;
-  float t = u_time;
-  float edge = u_progress + edgeDisplacement(uv.y, t);
-  float flowEdge = u_progress + flowDisplacement(uv.y, t);
-  float d = uv.x - edge;
-  float fd = uv.x - flowEdge;
-
-  vec3 rightBase = vec3(0.125, 0.129, 0.145);
-  vec3 color = rightBase;
-
-  float leftMask = 1.0 - smoothstep(-0.001, 0.002, d);
-  color = mix(color, u_dark, leftMask * profileMix(0.96, 0.92, 0.96));
-
-  vec2 flowP = vec2((fd + 0.10) * 6.2, uv.y * 1.95);
-  float flowA = fbm(flowP + vec2(-t * 0.22, t * 0.27) + u_seed * 1.7);
-  float flowB = fbm(flowP * 1.52 + vec2(t * 0.28, -t * 0.36) + 8.2 + u_seed);
-  float flowC = fbm(flowP * 2.25 + vec2(-t * 0.41, t * 0.46) + 19.0);
-
-  float farCenter = profileMix(-0.060, -0.079, -0.045) + (flowA - 0.5) * profileMix(0.018, 0.022, 0.014);
-  float midCenter = profileMix(-0.039, -0.052, -0.030) + (flowB - 0.5) * profileMix(0.013, 0.016, 0.010);
-  float hotCenter = profileMix(-0.026, -0.029, -0.023) + (flowC - 0.5) * 0.010;
-
-  float farBand = gaussian(fd, farCenter, profileMix(0.035, 0.049, 0.030));
-  float midBand = gaussian(fd, midCenter, profileMix(0.026, 0.034, 0.026));
-  float hotBand = gaussian(fd, hotCenter, profileMix(0.023, 0.027, 0.026));
-  float darkTrough = gaussian(fd, profileMix(-0.050, -0.058, -0.044) + (flowB - 0.5) * 0.010, profileMix(0.020, 0.025, 0.021));
-
-  float ringY = 0.47 + sin(t * 0.58 + u_seed * 2.4) * 0.12;
-  vec2 ringP = vec2((fd + 0.086) / 0.078, (uv.y - ringY) / 0.25);
-  ringP += vec2((flowB - 0.5) * 0.08, (flowA - 0.5) * 0.06);
-  float ringTexture = fbm(ringP * 2.15 + vec2(t * 0.18, -t * 0.14) + u_seed * 1.9);
-  float ring = ellipseRing(ringP, 0.66, 0.32) * (0.30 + 0.64 * ringTexture);
-  float ringCore = gaussian(length(ringP), 0.25, 0.25);
-  float ringPulse = smoothstep(0.58, 0.90, 0.5 + 0.5 * sin(t * 0.82 + u_seed * 4.1));
-  float modelRing = ring * ringPulse * (1.0 - step(0.5, u_profile));
-  float visualRing = ring * 0.16 * step(1.5, u_profile) * ringPulse;
-
-  float cloudGate = leftMask * smoothstep(-0.30, -0.008, fd);
-  float textureA = smoothstep(0.24, 0.92, flowA * 0.72 + flowB * 0.42);
-  float textureB = smoothstep(0.28, 0.94, flowB * 0.68 + flowC * 0.38);
-
-  vec3 hotColor = u_accentB;
-  color += u_accentA * farBand * cloudGate * (0.07 + textureA * profileMix(0.42, 0.24, 0.40));
-  color += u_accentB * midBand * cloudGate * (0.15 + textureB * profileMix(0.70, 0.46, 0.68));
-  color += hotColor * hotBand * cloudGate * profileMix(0.88, 0.62, 0.84);
-  float modelMask = 1.0 - step(0.5, u_profile);
-  color += u_accentA * (modelRing + visualRing) * cloudGate * profileMix(0.54, 0.0, 0.34);
-  color *= 1.0 - darkTrough * profileMix(0.44, 0.24, 0.24) * cloudGate;
-  color *= 1.0 - ringCore * modelMask * ringPulse * 0.44 * cloudGate;
-
-  float broadHalo = exp(-abs(d) * 96.0);
-  float innerHalo = exp(-abs(d) * 176.0);
-  float colorCore = exp(-abs(d) * 360.0);
-  float sharpCore = exp(-abs(d) * 760.0);
-  float leftGate = 1.0 - smoothstep(-0.003, 0.005, d);
-
-  color += u_accentA * broadHalo * leftGate * profileMix(0.09, 0.04, 0.06);
-  color += hotColor * innerHalo * leftGate * profileMix(0.76, 0.72, 0.78);
-  color += u_glow * colorCore * profileMix(0.72, 0.34, 0.24);
-
-  float whiteStrength = profileMix(0.10, 0.0, 0.0);
-  color += vec3(1.0, 0.99, 0.91) * sharpCore * whiteStrength;
-
-  float rightCut = smoothstep(0.001, 0.006, d);
-  color = mix(color, rightBase, rightCut);
-
-  float effectX = (d * 1257.0 + 260.0) / 320.0;
-  float atlasPhase = fract(t / 12.0) * u_effectFrames;
-  float atlasFrameA = floor(atlasPhase);
-  float atlasFrameB = mod(atlasFrameA + 1.0, u_effectFrames);
-  float atlasMix = smoothstep(0.0, 1.0, fract(atlasPhase));
-  float atlasXA = (atlasFrameA + clamp(effectX, 0.0, 1.0)) / u_effectFrames;
-  float atlasXB = (atlasFrameB + clamp(effectX, 0.0, 1.0)) / u_effectFrames;
+function subscribeScheduler(onFrame, isPaused) {
+  const item = { onFrame, isPaused };
+  subscribers.push(item);
+  start();
+  return () => {
+    const index = subscribers.indexOf(item);
+    if (index !== -1) subscribers.splice(index, 1);
+    if (subscribers.length === 0 && rafId) {
+      cancelAnimationFrame(rafId);
+      running = false;
+      rafId = 0;
+    }
+  };
+}
+
+/**
+ * Gates drawing on "element intersects viewport AND the page tab is visible".
+ * Falls back to always-visible when IntersectionObserver is unavailable.
+ */
+function createVisibilityGuard(element, onChange = null) {
+  let intersecting = true;
+  let pageVisible = typeof document === 'undefined' || !document.hidden;
+  let disposed = false;
+  let observer = null;
+
+  if (typeof IntersectionObserver !== 'undefined') {
+    observer = new IntersectionObserver(
+      (entries) => {
+        intersecting = entries.some((entry) => entry.isIntersecting);
+        if (typeof onChange === 'function') onChange();
+      },
+      { rootMargin: '180px' }
+    );
+    observer.observe(element);
+  }
+
+  const onVisibilityChange = () => {
+    pageVisible = typeof document !== 'undefined' && !document.hidden;
+    if (typeof onChange === 'function') onChange();
+  };
+  if (typeof document !== 'undefined') {
+    document.addEventListener('visibilitychange', onVisibilityChange);
+  }
+
+  return {
+    isVisible() {
+      return intersecting && pageVisible;
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      if (observer) observer.disconnect();
+      if (typeof document !== 'undefined') {
+        document.removeEventListener('visibilitychange', onVisibilityChange);
+      }
+    }
+  };
+}
+
+const PROGRESS_MOTION_WIDTH = 240;
+const PROGRESS_MOTION_HEIGHT = 80;
+const PROGRESS_MOTION_DURATION = 12.0;
+const PROGRESS_MOTION_MAX_PX = 40.0;
+
+const PROFILE_CONFIG = {
+  'model-training': { seed: 0.37, broad: 0.58, middle: 0.25, detail: 0.13, lobe: 0.24 },
+  'agent-migration': { seed: 1.71, broad: 0.72, middle: 0.10, detail: 0.03, lobe: 0.18 },
+  'visual-training': { seed: 2.83, broad: 0.66, middle: 0.16, detail: 0.06, lobe: 0.23 },
+  'botanic-lab': { seed: 3.46, broad: 0.54, middle: 0.18, detail: 0.05, lobe: 0.28 },
+  // ponytail: first-pass tide = asymmetric time warp on the same motion pipeline.
+  // Refine (foam line / wash streaks) in the shader after visual QA.
+  'tide': { seed: 4.12, broad: 0.82, middle: 0.07, detail: 0.02, lobe: 0.30, warp: 0.5 }
+};
+
+const CACHE$1 = Object.create(null);
+
+function gaussian(value, center, width) {
+  const delta = (value - center) / Math.max(width, 0.001);
+  return Math.exp(-delta * delta);
+}
+
+function createMotionData(id, edgeStyle = 'flow') {
+  const profile = edgeStyle === 'tide'
+    ? PROFILE_CONFIG.tide
+    : (PROFILE_CONFIG[id] || PROFILE_CONFIG['visual-training']);
+  const data = new Uint8Array(PROGRESS_MOTION_WIDTH * PROGRESS_MOTION_HEIGHT);
+
+  for (let x = 0; x < PROGRESS_MOTION_WIDTH; x += 1) {
+    let time = (x / PROGRESS_MOTION_WIDTH) * Math.PI * 2;
+    if (profile.warp) time += profile.warp * Math.sin(time * 2);
+    const centerA = 0.28 + Math.sin(time * 0.53 + profile.seed) * 0.13;
+    const centerB = 0.70 + Math.cos(time * 0.47 + profile.seed * 1.7) * 0.12;
+
+    for (let y = 0; y < PROGRESS_MOTION_HEIGHT; y += 1) {
+      const ratio = y / Math.max(PROGRESS_MOTION_HEIGHT - 1, 1);
+      const envelope = Math.pow(Math.max(Math.sin(Math.PI * ratio), 0), 0.48);
+      const broad = Math.sin(ratio * Math.PI * 2 * 1.35 + time * 0.58 + profile.seed) * profile.broad;
+      const middle = Math.sin(ratio * Math.PI * 2 * 3.2 - time * 0.91 + profile.seed * 2.1) * profile.middle;
+      const detail = Math.sin(ratio * Math.PI * 2 * 6.1 + time * 1.31 + profile.seed * 3.2) * profile.detail;
+      const lobes = (
+        gaussian(ratio, centerA, 0.09) * Math.sin(time * 1.11 + profile.seed * 4.0) -
+        gaussian(ratio, centerB, 0.10) * Math.cos(time * 0.97 + profile.seed * 3.3)
+      ) * profile.lobe;
+      const normalized = Math.max(-1, Math.min(1, (broad + middle + detail + lobes) * envelope));
+      data[y * PROGRESS_MOTION_WIDTH + x] = Math.round((normalized * 0.5 + 0.5) * 255);
+    }
+  }
+
+  return data;
+}
+
+function getProgressMotionData(id, edgeStyle = 'flow') {
+  const key = `${id}:${edgeStyle}`;
+  if (!CACHE$1[key]) CACHE$1[key] = createMotionData(id, edgeStyle);
+  return CACHE$1[key];
+}
+
+function hexToRgb01(hex) {
+  const value = Number.parseInt(hex.replace('#', ''), 16);
+  return [
+    ((value >> 16) & 255) / 255,
+    ((value >> 8) & 255) / 255,
+    (value & 255) / 255
+  ];
+}
+
+function stringSeed$1(value) {
+  let hash = 2166136261;
+  for (const character of value) {
+    hash ^= character.charCodeAt(0);
+    hash = Math.imul(hash, 16777619);
+  }
+  return (hash >>> 0) / 4294967295;
+}
+
+const PROFILE_INDEX = {
+  'model-training': 0,
+  'agent-migration': 1,
+  'visual-training': 2,
+  'tide': 3
+};
+
+const MOTION_SCALE_FACTORS = {
+  'model-training': 1.05,
+  'agent-migration': 1.04,
+  'visual-training': 1.04,
+  'tide': 1.18
+};
+
+const VERTEX_SHADER = `#version 300 es
+in vec2 a_position;
+out vec2 v_uv;
+void main() {
+  v_uv = a_position * 0.5 + 0.5;
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}`;
+
+const FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+
+in vec2 v_uv;
+out vec4 outColor;
+
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform float u_progress;
+uniform float u_seed;
+uniform float u_profile;
+uniform sampler2D u_motion;
+uniform sampler2D u_effect;
+uniform float u_hasEffect;
+uniform float u_effectFrames;
+uniform float u_motionDuration;
+uniform float u_motionScale;
+uniform vec3 u_dark;
+uniform vec3 u_accentA;
+uniform vec3 u_accentB;
+uniform vec3 u_glow;
+
+float hash21(vec2 p) {
+  p = fract(p * vec2(123.34, 456.21));
+  p += dot(p, p + 45.32 + u_seed * 11.7);
+  return fract(p.x * p.y);
+}
+
+float noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  f = f * f * (3.0 - 2.0 * f);
+  float a = hash21(i);
+  float b = hash21(i + vec2(1.0, 0.0));
+  float c = hash21(i + vec2(0.0, 1.0));
+  float d = hash21(i + vec2(1.0, 1.0));
+  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+}
+
+float fbm(vec2 p) {
+  float value = 0.0;
+  float amplitude = 0.55;
+  mat2 rotation = mat2(0.82, 0.57, -0.57, 0.82);
+  for (int i = 0; i < 6; i++) {
+    value += noise(p) * amplitude;
+    p = rotation * p * 2.02 + 13.7;
+    amplitude *= 0.48;
+  }
+  return value;
+}
+
+float gaussian(float value, float center, float width) {
+  float delta = (value - center) / max(width, 0.0001);
+  return exp(-delta * delta);
+}
+
+float profileMix(float model, float agent, float visual) {
+  if (u_profile < 0.5) return model;
+  if (u_profile < 1.5) return agent;
+  return visual;
+}
+
+float motionSample(float y, float t) {
+  float phase = fract(t / max(u_motionDuration, 0.001));
+  float captured = texture(u_motion, vec2(phase, 1.0 - clamp(y, 0.0, 1.0))).r;
+  return (captured * 2.0 - 1.0) * u_motionScale;
+}
+
+float edgeDisplacement(float y, float t) {
+  return motionSample(y, t);
+}
+
+float flowDisplacement(float y, float t) {
+  return (
+    motionSample(y - 0.024, t) * 0.08 +
+    motionSample(y - 0.012, t) * 0.18 +
+    motionSample(y, t) * 0.48 +
+    motionSample(y + 0.012, t) * 0.18 +
+    motionSample(y + 0.024, t) * 0.08
+  );
+}
+
+float ellipseRing(vec2 p, float radius, float width) {
+  return gaussian(length(p), radius, width);
+}
+
+void main() {
+  vec2 uv = v_uv;
+  float t = u_time;
+  float edge = u_progress + edgeDisplacement(uv.y, t);
+  float flowEdge = u_progress + flowDisplacement(uv.y, t);
+  float d = uv.x - edge;
+  float fd = uv.x - flowEdge;
+
+  vec3 rightBase = vec3(0.125, 0.129, 0.145);
+  vec3 color = rightBase;
+
+  float leftMask = 1.0 - smoothstep(-0.001, 0.002, d);
+  color = mix(color, u_dark, leftMask * profileMix(0.96, 0.92, 0.96));
+
+  vec2 flowP = vec2((fd + 0.10) * 6.2, uv.y * 1.95);
+  float flowA = fbm(flowP + vec2(-t * 0.22, t * 0.27) + u_seed * 1.7);
+  float flowB = fbm(flowP * 1.52 + vec2(t * 0.28, -t * 0.36) + 8.2 + u_seed);
+  float flowC = fbm(flowP * 2.25 + vec2(-t * 0.41, t * 0.46) + 19.0);
+
+  float farCenter = profileMix(-0.060, -0.079, -0.045) + (flowA - 0.5) * profileMix(0.018, 0.022, 0.014);
+  float midCenter = profileMix(-0.039, -0.052, -0.030) + (flowB - 0.5) * profileMix(0.013, 0.016, 0.010);
+  float hotCenter = profileMix(-0.026, -0.029, -0.023) + (flowC - 0.5) * 0.010;
+
+  float farBand = gaussian(fd, farCenter, profileMix(0.035, 0.049, 0.030));
+  float midBand = gaussian(fd, midCenter, profileMix(0.026, 0.034, 0.026));
+  float hotBand = gaussian(fd, hotCenter, profileMix(0.023, 0.027, 0.026));
+  float darkTrough = gaussian(fd, profileMix(-0.050, -0.058, -0.044) + (flowB - 0.5) * 0.010, profileMix(0.020, 0.025, 0.021));
+
+  float ringY = 0.47 + sin(t * 0.58 + u_seed * 2.4) * 0.12;
+  vec2 ringP = vec2((fd + 0.086) / 0.078, (uv.y - ringY) / 0.25);
+  ringP += vec2((flowB - 0.5) * 0.08, (flowA - 0.5) * 0.06);
+  float ringTexture = fbm(ringP * 2.15 + vec2(t * 0.18, -t * 0.14) + u_seed * 1.9);
+  float ring = ellipseRing(ringP, 0.66, 0.32) * (0.30 + 0.64 * ringTexture);
+  float ringCore = gaussian(length(ringP), 0.25, 0.25);
+  float ringPulse = smoothstep(0.58, 0.90, 0.5 + 0.5 * sin(t * 0.82 + u_seed * 4.1));
+  float modelRing = ring * ringPulse * (1.0 - step(0.5, u_profile));
+  float visualRing = ring * 0.16 * step(1.5, u_profile) * ringPulse;
+
+  float cloudGate = leftMask * smoothstep(-0.30, -0.008, fd);
+  float textureA = smoothstep(0.24, 0.92, flowA * 0.72 + flowB * 0.42);
+  float textureB = smoothstep(0.28, 0.94, flowB * 0.68 + flowC * 0.38);
+
+  vec3 hotColor = u_accentB;
+  color += u_accentA * farBand * cloudGate * (0.07 + textureA * profileMix(0.42, 0.24, 0.40));
+  color += u_accentB * midBand * cloudGate * (0.15 + textureB * profileMix(0.70, 0.46, 0.68));
+  color += hotColor * hotBand * cloudGate * profileMix(0.88, 0.62, 0.84);
+  float modelMask = 1.0 - step(0.5, u_profile);
+  color += u_accentA * (modelRing + visualRing) * cloudGate * profileMix(0.54, 0.0, 0.34);
+  color *= 1.0 - darkTrough * profileMix(0.44, 0.24, 0.24) * cloudGate;
+  color *= 1.0 - ringCore * modelMask * ringPulse * 0.44 * cloudGate;
+
+  float broadHalo = exp(-abs(d) * 96.0);
+  float innerHalo = exp(-abs(d) * 176.0);
+  float colorCore = exp(-abs(d) * 360.0);
+  float sharpCore = exp(-abs(d) * 760.0);
+  float leftGate = 1.0 - smoothstep(-0.003, 0.005, d);
+
+  color += u_accentA * broadHalo * leftGate * profileMix(0.09, 0.04, 0.06);
+  color += hotColor * innerHalo * leftGate * profileMix(0.76, 0.72, 0.78);
+  color += u_glow * colorCore * profileMix(0.72, 0.34, 0.24);
+
+  float whiteStrength = profileMix(0.10, 0.0, 0.0);
+  color += vec3(1.0, 0.99, 0.91) * sharpCore * whiteStrength;
+
+  float rightCut = smoothstep(0.001, 0.006, d);
+  color = mix(color, rightBase, rightCut);
+
+  float effectX = (d * 1257.0 + 260.0) / 320.0;
+  float atlasPhase = fract(t / 12.0) * u_effectFrames;
+  float atlasFrameA = floor(atlasPhase);
+  float atlasFrameB = mod(atlasFrameA + 1.0, u_effectFrames);
+  float atlasMix = smoothstep(0.0, 1.0, fract(atlasPhase));
+  float atlasXA = (atlasFrameA + clamp(effectX, 0.0, 1.0)) / u_effectFrames;
+  float atlasXB = (atlasFrameB + clamp(effectX, 0.0, 1.0)) / u_effectFrames;
   vec3 referenceA = texture(u_effect, vec2(atlasXA, uv.y)).rgb;
   vec3 referenceB = texture(u_effect, vec2(atlasXB, uv.y)).rgb;
   vec3 referenceColor = mix(referenceA, referenceB, atlasMix);
@@ -769,223 +813,256 @@ void main() {
   float referenceLuma = dot(referenceColor, vec3(0.299, 0.587, 0.114));
   vec3 tintedColor = color * (0.42 + 0.86 * referenceLuma);
   color = mix(color, tintedColor, stripMask * referenceLeft * u_hasEffect);
-
-  outColor = vec4(clamp(color, 0.0, 1.0), 1.0);
-}`;
-
-function compileShader(gl, type, source) {
-  const shader = gl.createShader(type);
-  gl.shaderSource(shader, source);
-  gl.compileShader(shader);
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    const message = gl.getShaderInfoLog(shader) || 'Unknown shader compile error';
-    gl.deleteShader(shader);
-    throw new Error(message);
-  }
-  return shader;
-}
-
-function createProgram(gl) {
-  const vertex = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
-  const fragment = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
-  const program = gl.createProgram();
-  gl.attachShader(program, vertex);
-  gl.attachShader(program, fragment);
-  gl.linkProgram(program);
-  gl.deleteShader(vertex);
-  gl.deleteShader(fragment);
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    const message = gl.getProgramInfoLog(program) || 'Unknown shader link error';
-    gl.deleteProgram(program);
-    throw new Error(message);
-  }
-  return program;
-}
-
-class ProgressFlowRenderer {
-  constructor(canvas, preset) {
-    const gl = canvas.getContext('webgl2', {
-      alpha: false,
-      antialias: true,
-      premultipliedAlpha: false,
-      powerPreference: 'high-performance'
-    });
-    if (!gl) throw new Error('WebGL2 unavailable');
-
-    this.canvas = canvas;
-    this.gl = gl;
-    this.program = createProgram(gl);
-    this.profile = preset.edgeStyle === 'tide' ? 3 : (PROFILE_INDEX[preset.id] ?? 2);
-    this.seed = stringSeed$1(`${preset.id}-shader`) * 13.7 + 1.0;
-    this.colors = preset.colors.map(hexToRgb01);
-    this.motionData = getProgressMotionData(preset.id, preset.edgeStyle);
-    const 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;
-  }
-
-  resize(width, height, dpr) {
-    const pixelWidth = Math.max(1, Math.round(width * dpr));
-    const pixelHeight = Math.max(1, Math.round(height * dpr));
-    if (this.canvas.width !== pixelWidth || this.canvas.height !== pixelHeight) {
-      this.canvas.width = pixelWidth;
-      this.canvas.height = pixelHeight;
-    }
-    this.gl.viewport(0, 0, pixelWidth, pixelHeight);
-  }
-
-  draw(time, progress, effectImage = null) {
-    const gl = this.gl;
-    gl.useProgram(this.program);
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-    gl.enableVertexAttribArray(this.position);
-    gl.vertexAttribPointer(this.position, 2, gl.FLOAT, false, 0, 0);
-
-    gl.uniform2f(this.uniforms.resolution, this.canvas.width, this.canvas.height);
-    gl.uniform1f(this.uniforms.time, time);
-    gl.uniform1f(this.uniforms.progress, progress / 100);
-    gl.uniform1f(this.uniforms.seed, this.seed);
-    gl.uniform1f(this.uniforms.profile, this.profile);
-    gl.activeTexture(gl.TEXTURE0);
-    gl.bindTexture(gl.TEXTURE_2D, this.motionTexture);
-    gl.uniform1i(this.uniforms.motion, 0);
-    gl.uniform1f(this.uniforms.motionDuration, PROGRESS_MOTION_DURATION);
-    gl.uniform1f(this.uniforms.motionScale, this.motionScale);
-
-    let hasEffect = this.effectUploaded ? 1 : 0;
-    if (!this.effectUploaded && effectImage && effectImage.complete && effectImage.naturalWidth > 0) {
-      gl.activeTexture(gl.TEXTURE1);
-      gl.bindTexture(gl.TEXTURE_2D, this.effectTexture);
-      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
-      try {
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, effectImage);
-        this.effectUploaded = true;
-        hasEffect = 1;
-      } catch (error) {
-        console.warn('[画境观屿] 参考纹理图集上传失败，继续使用程序化降级。', error);
-      }
-      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-    }
-    gl.activeTexture(gl.TEXTURE1);
-    gl.bindTexture(gl.TEXTURE_2D, this.effectTexture);
-    gl.uniform1i(this.uniforms.effect, 1);
-    gl.uniform1f(this.uniforms.hasEffect, hasEffect);
-    gl.uniform1f(this.uniforms.effectFrames, 24);
-
-    gl.uniform3fv(this.uniforms.dark, this.colors[0]);
-    gl.uniform3fv(this.uniforms.accentA, this.colors[1]);
-    gl.uniform3fv(this.uniforms.accentB, this.colors[2]);
-    gl.uniform3fv(this.uniforms.glow, this.colors[3]);
-
-    gl.drawArrays(gl.TRIANGLES, 0, 6);
-  }
-
-  setColors(colors) {
-    this.colors = colors.map(hexToRgb01);
-  }
-
-  dispose() {
-    const gl = this.gl;
-    gl.deleteBuffer(this.buffer);
-    gl.deleteTexture(this.motionTexture);
-    gl.deleteTexture(this.effectTexture);
-    gl.deleteProgram(this.program);
-    const lose = gl.getExtension('WEBGL_lose_context');
-    if (lose) lose.loseContext();
-  }
-}
-
-function createProgressFlowRenderer(canvas, preset) {
-  try {
-    return new ProgressFlowRenderer(canvas, preset);
-  } catch (error) {
-    console.warn('[画境观屿] 进度流体 WebGL2 不可用，使用 Canvas 2D 降级。', error);
-    return null;
-  }
+
+  outColor = vec4(clamp(color, 0.0, 1.0), 1.0);
+}`;
+
+function compileShader(gl, type, source) {
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const message = gl.getShaderInfoLog(shader) || 'Unknown shader compile error';
+    gl.deleteShader(shader);
+    throw new Error(message);
+  }
+  return shader;
+}
+
+function createProgram(gl) {
+  const vertex = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+  const fragment = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+  const program = gl.createProgram();
+  gl.attachShader(program, vertex);
+  gl.attachShader(program, fragment);
+  gl.linkProgram(program);
+  gl.deleteShader(vertex);
+  gl.deleteShader(fragment);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const message = gl.getProgramInfoLog(program) || 'Unknown shader link error';
+    gl.deleteProgram(program);
+    throw new Error(message);
+  }
+  return program;
+}
+
+class ProgressFlowRenderer {
+  constructor(canvas, preset, options = {}) {
+    const gl = canvas.getContext('webgl2', {
+      alpha: false,
+      antialias: true,
+      premultipliedAlpha: false,
+      powerPreference: options.powerPreference || 'high-performance'
+    });
+    if (!gl) throw new Error('WebGL2 unavailable');
+
+    this.canvas = canvas;
+    this.options = options;
+    this.gl = gl;
+    this.profile = preset.edgeStyle === 'tide' ? 3 : (PROFILE_INDEX[preset.id] ?? 2);
+    this.seed = stringSeed$1(`${preset.id}-shader`) * 13.7 + 1.0;
+    this.colors = preset.colors.map(hexToRgb01);
+    this.motionData = getProgressMotionData(preset.id, preset.edgeStyle);
+    const motionFactor = preset.edgeStyle === 'tide'
+      ? MOTION_SCALE_FACTORS.tide
+      : (MOTION_SCALE_FACTORS[preset.id] || 1.04);
+    this.motionScale = (PROGRESS_MOTION_MAX_PX * motionFactor) / 1257;
+    this.disposed = false;
+    this.contextLost = false;
+    this.setupResources();
+    this.bindContextEvents();
+  }
+
+  setupResources() {
+    const 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;
+  }
+
+  bindContextEvents() {
+    this.onContextLost = (event) => {
+      event.preventDefault();
+      if (this.disposed) return;
+      this.contextLost = true;
+      if (typeof this.options.onContextLost === 'function') this.options.onContextLost(event);
+    };
+    this.onContextRestored = () => {
+      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);
+  }
+
+  resize(width, height, dpr) {
+    const pixelWidth = Math.max(1, Math.round(width * dpr));
+    const pixelHeight = Math.max(1, Math.round(height * dpr));
+    if (this.canvas.width !== pixelWidth || this.canvas.height !== pixelHeight) {
+      this.canvas.width = pixelWidth;
+      this.canvas.height = pixelHeight;
+    }
+    this.gl.viewport(0, 0, pixelWidth, pixelHeight);
+  }
+
+  draw(time, progress, effectImage = null) {
+    if (this.disposed || this.contextLost) return;
+    const gl = this.gl;
+    gl.useProgram(this.program);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+    gl.enableVertexAttribArray(this.position);
+    gl.vertexAttribPointer(this.position, 2, gl.FLOAT, false, 0, 0);
+
+    gl.uniform2f(this.uniforms.resolution, this.canvas.width, this.canvas.height);
+    gl.uniform1f(this.uniforms.time, time);
+    gl.uniform1f(this.uniforms.progress, progress / 100);
+    gl.uniform1f(this.uniforms.seed, this.seed);
+    gl.uniform1f(this.uniforms.profile, this.profile);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.motionTexture);
+    gl.uniform1i(this.uniforms.motion, 0);
+    gl.uniform1f(this.uniforms.motionDuration, PROGRESS_MOTION_DURATION);
+    gl.uniform1f(this.uniforms.motionScale, this.motionScale);
+
+    let hasEffect = this.effectUploaded ? 1 : 0;
+    const 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);
+      try {
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, effectImage);
+        this.effectUploaded = true;
+        hasEffect = 1;
+      } catch (error) {
+        console.warn('[画境观屿] 参考纹理图集上传失败，继续使用程序化降级。', error);
+      }
+      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+    }
+    gl.activeTexture(gl.TEXTURE1);
+    gl.bindTexture(gl.TEXTURE_2D, this.effectTexture);
+    gl.uniform1i(this.uniforms.effect, 1);
+    gl.uniform1f(this.uniforms.hasEffect, hasEffect);
+    gl.uniform1f(this.uniforms.effectFrames, 24);
+
+    gl.uniform3fv(this.uniforms.dark, this.colors[0]);
+    gl.uniform3fv(this.uniforms.accentA, this.colors[1]);
+    gl.uniform3fv(this.uniforms.accentB, this.colors[2]);
+    gl.uniform3fv(this.uniforms.glow, this.colors[3]);
+
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+  }
+
+  setColors(colors) {
+    this.colors = colors.map(hexToRgb01);
+  }
+
+  dispose() {
+    this.disposed = true;
+    const 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);
+    gl.deleteProgram(this.program);
+    const lose = gl.getExtension('WEBGL_lose_context');
+    if (lose) lose.loseContext();
+  }
+}
+
+function createProgressFlowRenderer(canvas, preset, options = {}) {
+  try {
+    return new ProgressFlowRenderer(canvas, preset, options);
+  } catch (error) {
+    console.warn('[画境观屿] 进度流体 WebGL2 不可用，使用 Canvas 2D 降级。', error);
+    return null;
+  }
 }
 
-const PROGRESS_REFERENCE_DURATION = 12;
-const PROGRESS_REFERENCE_FRAME_COUNT = 24;
-
-const FRAME_WIDTH = 64;
-const FRAME_HEIGHT = 32;
-const CACHE = Object.create(null);
-
-const PALETTES = {
-  'model-training': ['#20131f', '#ff3f94', '#ff8a3d', '#fff06a'],
-  'agent-migration': ['#111a31', '#245bff', '#00cfff', '#5dffe6'],
-  'visual-training': ['#1f172b', '#7042ff', '#42f58d', '#c4ff8a'],
-  'tide': ['#0a2239', '#2e9bff', '#7fe3ff', '#eaf9ff']
-};
-
+const PROGRESS_REFERENCE_DURATION = 12;
+const PROGRESS_REFERENCE_FRAME_COUNT = 24;
+
+const FRAME_WIDTH = 64;
+const FRAME_HEIGHT = 32;
+const CACHE = Object.create(null);
+
+const PALETTES = {
+  'model-training': ['#20131f', '#ff3f94', '#ff8a3d', '#fff06a'],
+  'agent-migration': ['#111a31', '#245bff', '#00cfff', '#5dffe6'],
+  'visual-training': ['#1f172b', '#7042ff', '#42f58d', '#c4ff8a'],
+  'tide': ['#0a2239', '#2e9bff', '#7fe3ff', '#eaf9ff'],
+  'botanic-lab': ['#102a23', '#287a58', '#9bd65b', '#f2ffc4']
+};
+
 function drawCloud(context, x, y, radiusX, radiusY, color, alpha) {
   context.save();
   context.translate(x, y);
@@ -997,123 +1074,136 @@ function drawCloud(context, x, y, radiusX, radiusY, color, alpha) {
   };
   gradient.addColorStop(0, `${color}${alphaHex(alpha * 255)}`);
   gradient.addColorStop(0.46, `${color}${alphaHex(alpha * 0.42 * 255)}`);
-  gradient.addColorStop(1, `${color}00`);
-  context.fillStyle = gradient;
-  context.fillRect(-radiusX, -radiusX, radiusX * 2, radiusX * 2);
-  context.restore();
-}
-
-function createAtlas(id) {
-  const palette = PALETTES[id] || PALETTES['visual-training'];
-  const canvas = document.createElement('canvas');
-  canvas.width = FRAME_WIDTH * PROGRESS_REFERENCE_FRAME_COUNT;
-  canvas.height = FRAME_HEIGHT;
-  const context = canvas.getContext('2d');
-
-  for (let frame = 0; frame < PROGRESS_REFERENCE_FRAME_COUNT; frame += 1) {
-    const phase = (frame / PROGRESS_REFERENCE_FRAME_COUNT) * Math.PI * 2;
-    const left = frame * FRAME_WIDTH;
-    context.save();
-    context.translate(left, 0);
-    context.fillStyle = palette[0];
-    context.fillRect(0, 0, FRAME_WIDTH, FRAME_HEIGHT);
-    context.globalCompositeOperation = 'screen';
-
-    drawCloud(context, 35 + Math.sin(phase * 0.83) * 5, 10 + Math.cos(phase * 0.61) * 5, 27, 18, palette[1], id === 'agent-migration' ? 0.32 : 0.42);
-    drawCloud(context, 45 + Math.cos(phase * 0.72) * 4, 23 + Math.sin(phase * 0.54) * 4, 22, 15, palette[2], 0.44);
-    drawCloud(context, 53 + Math.sin(phase * 1.07) * 2, 16 + Math.cos(phase * 0.89) * 6, 12, 13, palette[3], id === 'model-training' ? 0.30 : 0.20);
-
-    context.globalCompositeOperation = 'source-over';
-    const trough = context.createRadialGradient(41, 16, 1, 41, 16, 17);
-    trough.addColorStop(0, 'rgba(5,6,11,0.64)');
-    trough.addColorStop(0.58, 'rgba(6,7,12,0.26)');
-    trough.addColorStop(1, 'rgba(6,7,12,0)');
-    context.fillStyle = trough;
-    context.fillRect(20, 0, 44, FRAME_HEIGHT);
-    context.restore();
-  }
-
-  const image = new Image();
-  image.decoding = 'async';
-  const state = { image, ready: false };
-  image.addEventListener('load', () => { state.ready = true; }, { once: true });
-  image.addEventListener('error', () => { 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];
+  gradient.addColorStop(1, `${color}00`);
+  context.fillStyle = gradient;
+  context.fillRect(-radiusX, -radiusX, radiusX * 2, radiusX * 2);
+  context.restore();
+}
+
+function createAtlas(id) {
+  const palette = PALETTES[id] || PALETTES['visual-training'];
+  const canvas = document.createElement('canvas');
+  canvas.width = FRAME_WIDTH * PROGRESS_REFERENCE_FRAME_COUNT;
+  canvas.height = FRAME_HEIGHT;
+  const context = canvas.getContext('2d');
+
+  for (let frame = 0; frame < PROGRESS_REFERENCE_FRAME_COUNT; frame += 1) {
+    const phase = (frame / PROGRESS_REFERENCE_FRAME_COUNT) * Math.PI * 2;
+    const left = frame * FRAME_WIDTH;
+    context.save();
+    context.translate(left, 0);
+    context.fillStyle = palette[0];
+    context.fillRect(0, 0, FRAME_WIDTH, FRAME_HEIGHT);
+    context.globalCompositeOperation = 'screen';
+
+    drawCloud(context, 35 + Math.sin(phase * 0.83) * 5, 10 + Math.cos(phase * 0.61) * 5, 27, 18, palette[1], id === 'agent-migration' ? 0.32 : 0.42);
+    drawCloud(context, 45 + Math.cos(phase * 0.72) * 4, 23 + Math.sin(phase * 0.54) * 4, 22, 15, palette[2], 0.44);
+    drawCloud(context, 53 + Math.sin(phase * 1.07) * 2, 16 + Math.cos(phase * 0.89) * 6, 12, 13, palette[3], id === 'model-training' ? 0.30 : 0.20);
+
+    context.globalCompositeOperation = 'source-over';
+    const trough = context.createRadialGradient(41, 16, 1, 41, 16, 17);
+    trough.addColorStop(0, 'rgba(5,6,11,0.64)');
+    trough.addColorStop(0.58, 'rgba(6,7,12,0.26)');
+    trough.addColorStop(1, 'rgba(6,7,12,0)');
+    context.fillStyle = trough;
+    context.fillRect(20, 0, 44, FRAME_HEIGHT);
+    context.restore();
+  }
+
+  // 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 };
+}
+
+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}
- */
-function attachProgressFlowOverlay({ root, canvas, preset, getProgress }) {
-  const overlay = document.createElement('canvas');
-  overlay.className = 'hj-progress-canvas hj-progress-overlay';
-  overlay.setAttribute('aria-hidden', 'true');
-  canvas.insertAdjacentElement('afterend', overlay);
-
-  const renderer = createProgressFlowRenderer(overlay, preset);
-  if (!renderer) {
-    overlay.remove();
-    return null;
-  }
-
-  const atlas = getProgressReferenceAtlas(preset.id);
-  root.classList.add('has-webgl-progress');
-
-  const resize = () => {
-    const bounds = root.getBoundingClientRect();
-    const width = Math.max(1, bounds.width);
-    const height = Math.max(1, bounds.height);
-    const dpr = Math.min(window.devicePixelRatio || 1, 2);
-    overlay.style.width = `${width}px`;
-    overlay.style.height = `${height}px`;
-    renderer.resize(width, height, dpr);
-  };
-
-  let resizeObserver = null;
-  let onWindowResize = null;
-  if (typeof ResizeObserver !== 'undefined') {
-    resizeObserver = new ResizeObserver(resize);
-    resizeObserver.observe(root);
-  } else {
-    onWindowResize = resize;
-    window.addEventListener('resize', onWindowResize);
-  }
-  resize();
-
-  return {
-    update(flowTime) {
-      const effectTime = flowTime % PROGRESS_REFERENCE_DURATION;
-      const progress = getProgress();
-      renderer.draw(
-        effectTime,
-        Number.isFinite(progress) ? progress : preset.initialProgress,
-        atlas.ready ? atlas.image : null
-      );
-    },
-    setColors(colors) {
-      renderer.setColors(colors);
-    },
-    dispose() {
-      if (resizeObserver) resizeObserver.disconnect();
-      if (onWindowResize) window.removeEventListener('resize', onWindowResize);
-      renderer.dispose();
-      overlay.remove();
-      root.classList.remove('has-webgl-progress');
-    }
-  };
+/**
+ * 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({
+  root,
+  canvas,
+  preset,
+  getProgress,
+  dprCap = 2,
+  powerPreference = 'high-performance',
+  onContextLost,
+  onContextRestored
+}) {
+  const overlay = document.createElement('canvas');
+  overlay.className = 'hj-progress-canvas hj-progress-overlay';
+  overlay.setAttribute('aria-hidden', 'true');
+  canvas.insertAdjacentElement('afterend', overlay);
+
+  const renderer = createProgressFlowRenderer(overlay, preset, {
+    powerPreference,
+    onContextLost,
+    onContextRestored
+  });
+  if (!renderer) {
+    overlay.remove();
+    return null;
+  }
+
+  const atlas = getProgressReferenceAtlas(preset.id);
+  root.classList.add('has-webgl-progress');
+
+  const resize = () => {
+    const bounds = root.getBoundingClientRect();
+    const width = Math.max(1, bounds.width);
+    const height = Math.max(1, bounds.height);
+    const dpr = Math.min(window.devicePixelRatio || 1, dprCap);
+    overlay.style.width = `${width}px`;
+    overlay.style.height = `${height}px`;
+    renderer.resize(width, height, dpr);
+  };
+
+  let resizeObserver = null;
+  let onWindowResize = null;
+  if (typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver(resize);
+    resizeObserver.observe(root);
+  } else {
+    onWindowResize = resize;
+    window.addEventListener('resize', onWindowResize);
+  }
+  resize();
+
+  return {
+    update(flowTime) {
+      const effectTime = flowTime % PROGRESS_REFERENCE_DURATION;
+      const progress = getProgress();
+      renderer.draw(
+        effectTime,
+        Number.isFinite(progress) ? progress : preset.initialProgress,
+        atlas.ready ? atlas.image : null
+      );
+    },
+    setColors(colors) {
+      renderer.setColors(colors);
+    },
+    setDprCap(cap) {
+      dprCap = cap;
+      resize();
+    },
+    dispose() {
+      if (resizeObserver) resizeObserver.disconnect();
+      if (onWindowResize) window.removeEventListener('resize', onWindowResize);
+      renderer.dispose();
+      overlay.remove();
+      root.classList.remove('has-webgl-progress');
+    }
+  };
 }
 
 /**
@@ -1132,464 +1222,651 @@ function nextTick(fn) {
   }
 }
 
-const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
-const SUPPORTS_CTX_FILTER = typeof CanvasRenderingContext2D !== 'undefined' && 'filter' in CanvasRenderingContext2D.prototype;
-
-function stringSeed(value) {
-  let hash = 2166136261;
-  for (const character of value) {
-    hash ^= character.charCodeAt(0);
-    hash = Math.imul(hash, 16777619);
-  }
-  return (hash >>> 0) / 4294967295;
-}
-
-function interpolate(template, values) {
-  return template.replace(/\{(\w+)\}/g, (_, key) => (values[key] !== undefined ? values[key] : ''));
-}
-
-function prefersReducedMotion() {
-  return typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;
-}
-
-const FLOW_PROFILES = {
-  'model-training': {
-    cycles: [0.98, 3.05, 5.45],
-    amplitudes: [11.2, 11.0, 5.2],
-    speeds: [0.31, -0.53, 0.78],
-    bulgeAmplitude: 8.2,
-    timeScale: 1.0,
-    glowWidth: 5.8,
-    haloWidth: 20,
-    whiteAlpha: 0.72,
-    whiteWidth: 1.15,
-    cloudWidth: 0.17,
-    autoRange: [25, 66]
-  },
-  'agent-migration': {
-    cycles: [0.62, 1.55, 2.95],
-    amplitudes: [16.0, 7.8, 2.3],
-    speeds: [0.25, -0.4, 0.60],
-    bulgeAmplitude: 8.4,
-    timeScale: 0.82,
-    glowWidth: 6.3,
-    haloWidth: 21,
-    whiteAlpha: 0.18,
-    whiteWidth: 0.45,
-    cloudWidth: 0.18,
-    autoRange: [24, 62]
-  },
-  'visual-training': {
-    cycles: [0.88, 2.45, 4.35],
-    amplitudes: [12.8, 10.2, 4.3],
-    speeds: [0.28, -0.47, 0.69],
-    bulgeAmplitude: 7.3,
-    timeScale: 0.91,
-    glowWidth: 6.0,
-    haloWidth: 21,
-    whiteAlpha: 0.30,
-    whiteWidth: 0.55,
-    cloudWidth: 0.175,
-    autoRange: [20, 75]
-  },
-  // ponytail: first-pass tide = asymmetric surge on the 2D fallback path.
-  // Tune surge/amplitudes after visual QA against the WebGL overlay.
-  'tide': {
-    cycles: [0.72, 1.9, 4.2],
-    amplitudes: [19.0, 6.5, 1.5],
-    speeds: [0.42, -0.5, 0.66],
-    bulgeAmplitude: 9.5,
-    timeScale: 0.85,
-    glowWidth: 6.2,
-    haloWidth: 21,
-    whiteAlpha: 0.5,
-    whiteWidth: 1.0,
-    cloudWidth: 0.18,
-    autoRange: [18, 70],
-    surge: 0.55
-  }
-};
-
-class ProgressCapsuleController {
+function toFiniteNumber(value) {
+  if (value == null || typeof value === 'boolean') return null;
+  if (typeof value === 'string' && value.trim() === '') return null;
+  const number = Number(value);
+  return Number.isFinite(number) ? number : null;
+}
+
+function normalizeRange(min, max, fallbackMin = 0, fallbackMax = 100) {
+  let nextMin = toFiniteNumber(min);
+  let nextMax = toFiniteNumber(max);
+  if (nextMin === null) nextMin = fallbackMin;
+  if (nextMax === null) nextMax = fallbackMax;
+  if (nextMin > nextMax) {
+    const swap = nextMin;
+    nextMin = nextMax;
+    nextMax = swap;
+  }
+  return [nextMin, nextMax];
+}
+
+function clampProgressValue(value, min, max) {
+  const number = toFiniteNumber(value);
+  if (number === null) return null;
+  return Math.min(Math.max(number, min), max);
+}
+
+function normalizeProgressStep(step, fallback = 'any') {
+  if (step === 'any' || step == null) return 'any';
+  const increment = toFiniteNumber(step);
+  return increment !== null && increment > 0 ? increment : fallback;
+}
+
+function snapProgressValue(value, min, max, step = 'any') {
+  const clamped = clampProgressValue(value, min, max);
+  if (clamped === null) return null;
+  if (step === 'any' || step == null) return clamped;
+  const increment = normalizeProgressStep(step);
+  if (increment === 'any') return clamped;
+  const snapped = min + Math.round((clamped - min) / increment) * increment;
+  return Math.min(Math.max(Number(snapped.toFixed(12)), min), max);
+}
+
+function progressRatio(value, min, max) {
+  const range = max - min;
+  if (!Number.isFinite(range) || range <= 0) return 0;
+  return Math.min(Math.max((value - min) / range, 0), 1);
+}
+
+function normalizeFps(value, fallback = 60) {
+  const fps = Number(value);
+  if (!Number.isFinite(fps)) return fallback;
+  return Math.min(60, Math.max(1, fps));
+}
+
+function createFrameGate(initialFps = 60) {
+  let fps = normalizeFps(initialFps);
+  let elapsed = 0;
+  return {
+    shouldDraw(delta) {
+      elapsed += delta;
+      const interval = 1 / fps;
+      if (elapsed + 0.0001 < interval) return false;
+      elapsed %= interval;
+      return true;
+    },
+    setFps(value) {
+      fps = normalizeFps(value, fps);
+      elapsed = 0;
+      return fps;
+    },
+    getFps() {
+      return fps;
+    }
+  };
+}
+
+function createReducedMotionPreference(enabled, onChange) {
+  const query = enabled && typeof matchMedia !== 'undefined'
+    ? matchMedia('(prefers-reduced-motion: reduce)')
+    : null;
+  const notify = () => {
+    if (typeof onChange === 'function') onChange(Boolean(query && query.matches));
+  };
+  if (query) {
+    if (typeof query.addEventListener === 'function') query.addEventListener('change', notify);
+    else if (typeof query.addListener === 'function') query.addListener(notify);
+  }
+  return {
+    matches() {
+      return Boolean(query && query.matches);
+    },
+    dispose() {
+      if (!query) return;
+      if (typeof query.removeEventListener === 'function') query.removeEventListener('change', notify);
+      else if (typeof query.removeListener === 'function') query.removeListener(notify);
+    }
+  };
+}
+
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const SUPPORTS_CTX_FILTER = typeof CanvasRenderingContext2D !== 'undefined' && 'filter' in CanvasRenderingContext2D.prototype;
+
+function stringSeed(value) {
+  let hash = 2166136261;
+  for (const character of value) {
+    hash ^= character.charCodeAt(0);
+    hash = Math.imul(hash, 16777619);
+  }
+  return (hash >>> 0) / 4294967295;
+}
+
+function interpolate(template, values) {
+  return template.replace(/\{(\w+)\}/g, (_, key) => (values[key] !== undefined ? values[key] : ''));
+}
+
+const FLOW_PROFILES = {
+  'model-training': {
+    cycles: [0.98, 3.05, 5.45],
+    amplitudes: [11.2, 11.0, 5.2],
+    speeds: [0.31, -0.53, 0.78],
+    bulgeAmplitude: 8.2,
+    timeScale: 1.0,
+    glowWidth: 5.8,
+    haloWidth: 20,
+    whiteAlpha: 0.72,
+    whiteWidth: 1.15,
+    cloudWidth: 0.17,
+    autoRange: [25, 66]
+  },
+  'agent-migration': {
+    cycles: [0.62, 1.55, 2.95],
+    amplitudes: [16.0, 7.8, 2.3],
+    speeds: [0.25, -0.4, 0.60],
+    bulgeAmplitude: 8.4,
+    timeScale: 0.82,
+    glowWidth: 6.3,
+    haloWidth: 21,
+    whiteAlpha: 0.18,
+    whiteWidth: 0.45,
+    cloudWidth: 0.18,
+    autoRange: [24, 62]
+  },
+  'visual-training': {
+    cycles: [0.88, 2.45, 4.35],
+    amplitudes: [12.8, 10.2, 4.3],
+    speeds: [0.28, -0.47, 0.69],
+    bulgeAmplitude: 7.3,
+    timeScale: 0.91,
+    glowWidth: 6.0,
+    haloWidth: 21,
+    whiteAlpha: 0.30,
+    whiteWidth: 0.55,
+    cloudWidth: 0.175,
+    autoRange: [20, 75]
+  },
+  // ponytail: first-pass tide = asymmetric surge on the 2D fallback path.
+  // Tune surge/amplitudes after visual QA against the WebGL overlay.
+  'tide': {
+    cycles: [0.72, 1.9, 4.2],
+    amplitudes: [19.0, 6.5, 1.5],
+    speeds: [0.42, -0.5, 0.66],
+    bulgeAmplitude: 9.5,
+    timeScale: 0.85,
+    glowWidth: 6.2,
+    haloWidth: 21,
+    whiteAlpha: 0.5,
+    whiteWidth: 1.0,
+    cloudWidth: 0.18,
+    autoRange: [18, 70],
+    surge: 0.55
+  }
+};
+
+class ProgressCapsuleController {
   constructor({ root, canvas, valueElement, preset, emitter, options, copy, dirty }) {
-    this.root = root;
-    this.canvas = canvas;
-    this.valueElement = valueElement;
-    this.preset = preset;
-    this.emitter = emitter;
+    this.root = root;
+    this.canvas = canvas;
+    this.valueElement = valueElement;
+    this.preset = preset;
+    this.emitter = emitter;
     this.options = options;
     this.copy = copy;
     this.dirty = dirty;
     this.valueSuffix = options.valueSuffix ?? copy.valueSuffix;
-    this.profile = preset.edgeStyle === 'tide'
-      ? FLOW_PROFILES.tide
-      : (FLOW_PROFILES[preset.id] || FLOW_PROFILES['visual-training']);
-    this.min = options.min ?? 0;
-    this.max = options.max ?? 100;
-    this.dprCap = dprCapFor(options.quality);
-    this.ctx = canvas.getContext('2d');
-    this.value = clamp(options.value ?? preset.initialProgress, this.min, this.max);
-    this.dragging = false;
-    this.webglActive = false;
-    this.flowTime = stringSeed(preset.id) * 31;
-    this.seed = stringSeed(`${preset.id}-reference`) * Math.PI * 2;
-    this.randomState = Math.floor(stringSeed(`${preset.id}-auto`) * 0x7fffffff) || 1;
-    this.dpr = 1;
-    this.width = 0;
-    this.height = 0;
-    this.handlers = {};
-
-    this.resizeObserver = typeof ResizeObserver !== 'undefined'
-      ? new ResizeObserver(() => this.resizeCanvas())
-      : null;
-    if (this.resizeObserver) this.resizeObserver.observe(this.root);
-    else window.addEventListener('resize', this.resizeCanvas);
-
-    this.suppressEvents = true;
-    this.setProgress(this.value, 'init');
-    this.suppressEvents = false;
-    this.bindEvents();
-    this.resizeCanvas();
-  }
-
-  random() {
-    this.randomState = (Math.imul(this.randomState, 1664525) + 1013904223) >>> 0;
-    return this.randomState / 4294967296;
-  }
-
-  setProgress(nextValue, source = 'auto') {
-    this.value = clamp(nextValue, this.min, this.max);
-    const 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', `${rounded}${this.valueSuffix}`);
-    if (this.valueElement) this.valueElement.textContent = `${rounded}${this.valueSuffix}`;
+    this.profile = preset.edgeStyle === 'tide'
+      ? FLOW_PROFILES.tide
+      : (FLOW_PROFILES[preset.id] || FLOW_PROFILES['visual-training']);
+    [this.min, this.max] = normalizeRange(options.min, options.max);
+    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 = snapProgressValue(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;
+    this.seed = stringSeed(`${preset.id}-reference`) * Math.PI * 2;
+    this.randomState = Math.floor(stringSeed(`${preset.id}-auto`) * 0x7fffffff) || 1;
+    this.dpr = 1;
+    this.width = 0;
+    this.height = 0;
+    this.handlers = {};
+
+    this.onResize = () => {
+      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;
+    this.bindEvents();
+    this.resizeCanvas();
+  }
+
+  random() {
+    this.randomState = (Math.imul(this.randomState, 1664525) + 1013904223) >>> 0;
+    return this.randomState / 4294967296;
+  }
+
+  displayText() {
+    if (this.formatValue) {
+      return String(this.formatValue(this.value, {
+        min: this.min,
+        max: this.max,
+        suffix: this.valueSuffix
+      }));
+    }
+    const number = this.precision > 0 ? this.value.toFixed(this.precision) : String(Math.round(this.value));
+    return `${number}${this.valueSuffix}`;
+  }
+
+  syncValueDom() {
+    const 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;
+  }
+
+  setProgress(nextValue, source = 'auto') {
+    const 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', { value: this.value, source });
     }
+    return true;
   }
 
   setValueSuffix(suffix) {
+    if (this.dirty) this.dirty.valueSuffix = true;
     this.valueSuffix = String(suffix == null ? '' : suffix);
-    const rounded = Math.round(this.value);
-    if (this.valueElement) this.valueElement.textContent = `${rounded}${this.valueSuffix}`;
-    this.root.setAttribute('aria-valuetext', `${rounded}${this.valueSuffix}`);
+    this.syncValueDom();
+    return this;
+  }
+
+  setStep(step) {
+    const nextStep = normalizeProgressStep(step, this.step);
+    if (nextStep === this.step) return this;
+    if (this.dirty) this.dirty.step = true;
+    this.step = nextStep;
+    const next = snapProgressValue(this.value, this.min, this.max, this.step);
+    if (next !== null && next !== this.value) this.setProgress(next, 'prop');
+    return this;
+  }
+
+  setPrecision(precision) {
+    const 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;
+  }
+
+  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;
+  }
+
+  setDirection(direction) {
+    if (this.dirty) this.dirty.direction = true;
+    this.direction = direction === 'rtl' ? 'rtl' : 'ltr';
+    this.root.dataset.direction = this.direction;
     return this;
   }
 
   setShowValue(show) {
+    if (this.dirty) this.dirty.showValue = true;
     if (this.valueElement) this.valueElement.hidden = show === false;
     return this;
   }
-
-  resizeCanvas() {
-    const bounds = this.root.getBoundingClientRect();
-    this.dpr = Math.min(window.devicePixelRatio || 1, this.dprCap);
-    this.width = Math.max(1, bounds.width);
-    this.height = Math.max(1, bounds.height);
-    this.canvas.width = Math.round(this.width * this.dpr);
-    this.canvas.height = Math.round(this.height * this.dpr);
-    this.canvas.style.width = `${this.width}px`;
-    this.canvas.style.height = `${this.height}px`;
-    this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
-  }
-
-  edgeEnvelope(yRatio) {
-    const edge = Math.sin(Math.PI * clamp(yRatio, 0, 1));
-    return Math.pow(Math.max(edge, 0), 0.48);
-  }
-
-  localBulge(yRatio, time, index) {
-    const direction = index === 0 ? 1 : -1;
-    const center = 0.28 + index * 0.40 + Math.sin(time * (0.19 + index * 0.035) + this.seed * (1.1 + index)) * 0.13;
-    const width = 0.075 + index * 0.016 + Math.sin(time * 0.13 + this.seed * 2.1) * 0.012;
-    const distance = (yRatio - center) / Math.max(width, 0.035);
-    const gaussian = Math.exp(-0.5 * distance * distance);
-    return gaussian * Math.sin(time * (0.71 + index * 0.09) + this.seed * (2.7 + index)) * this.profile.bulgeAmplitude * direction;
-  }
-
-  edgeOffset(y, time, phase = 0, amplitudeScale = 1) {
-    const yRatio = this.height > 0 ? y / this.height : 0;
-    const envelope = this.edgeEnvelope(yRatio);
-    const scaledTime = time * this.profile.timeScale;
-    const phaseTime = this.profile.surge
-      ? scaledTime + this.profile.surge * Math.sin(scaledTime * 2)
-      : scaledTime;
-    let offset = 0;
-
-    for (let index = 0; index < this.profile.cycles.length; index += 1) {
-      const cycle = this.profile.cycles[index];
-      const amplitude = this.profile.amplitudes[index];
-      const speed = this.profile.speeds[index];
-      const amplitudeMotion = 0.74 + 0.26 * Math.sin(
-        phaseTime * (0.17 + index * 0.045) + this.seed * (index + 2.4)
-      );
-      offset += Math.sin(
-        yRatio * Math.PI * 2 * cycle + phaseTime * speed * Math.PI * 2 + this.seed * (index + 1) + phase
-      ) * amplitude * amplitudeMotion;
-    }
-
-    offset += this.localBulge(yRatio, phaseTime + phase, 0);
-    offset += this.localBulge(yRatio, phaseTime - phase * 0.7, 1);
-    return offset * envelope * amplitudeScale;
-  }
-
-  createEdgePath(ctx, baseX, time, phase = 0, amplitudeScale = 1) {
-    const step = Math.max(1.8, this.height / 92);
-    ctx.beginPath();
-    for (let y = 0; y <= this.height + step; y += step) {
-      const x = baseX + this.edgeOffset(y, time, phase, amplitudeScale);
-      if (y === 0) ctx.moveTo(x, y);
-      else ctx.lineTo(x, y);
-    }
-  }
-
-  createFillPath(ctx, baseX, time, phase = 0, amplitudeScale = 1) {
-    const step = Math.max(1.8, this.height / 92);
-    ctx.beginPath();
-    ctx.moveTo(0, 0);
-    ctx.lineTo(baseX + this.edgeOffset(0, time, phase, amplitudeScale), 0);
-    for (let y = step; y <= this.height + step; y += step) {
-      ctx.lineTo(baseX + this.edgeOffset(y, time, phase, amplitudeScale), y);
-    }
-    ctx.lineTo(0, this.height);
-    ctx.closePath();
-  }
-
-  drawEllipticalGlow(x, y, radiusX, radiusY, color, alpha) {
-    const ctx = this.ctx;
-    ctx.save();
-    ctx.translate(x, y);
-    ctx.scale(1, radiusY / radiusX);
-    const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, radiusX);
-    gradient.addColorStop(0, hexToRgba(color, alpha));
-    gradient.addColorStop(0.42, hexToRgba(color, alpha * 0.48));
-    gradient.addColorStop(1, hexToRgba(color, 0));
-    ctx.globalCompositeOperation = 'screen';
-    ctx.fillStyle = gradient;
-    ctx.fillRect(-radiusX, -radiusX, radiusX * 2, radiusX * 2);
-    ctx.restore();
-  }
-
-  drawDarkEllipticalShadow(x, y, radiusX, radiusY, alpha) {
-    const ctx = this.ctx;
-    ctx.save();
-    ctx.translate(x, y);
-    ctx.scale(1, radiusY / radiusX);
-    const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, radiusX);
-    gradient.addColorStop(0, `rgba(6, 6, 11, ${alpha})`);
-    gradient.addColorStop(0.54, `rgba(8, 8, 14, ${alpha * 0.62})`);
-    gradient.addColorStop(1, 'rgba(8, 8, 14, 0)');
-    ctx.globalCompositeOperation = 'source-over';
-    ctx.fillStyle = gradient;
-    ctx.fillRect(-radiusX, -radiusX, radiusX * 2, radiusX * 2);
-    ctx.restore();
-  }
-
-  drawColorClouds(shoreline, time, accentA, accentB, glow) {
-    this.ctx;
-    const width = this.width;
-    const height = this.height;
-    const scale = this.profile.cloudWidth;
-    const t = time * this.profile.timeScale;
-
-    const upperY = height * (0.28 + Math.sin(t * 0.24 + this.seed) * 0.13);
-    const lowerY = height * (0.70 + Math.cos(t * 0.21 + this.seed * 1.7) * 0.12);
-    const middleY = height * (0.49 + Math.sin(t * 0.31 + this.seed * 2.3) * 0.15);
-
-    const farX = shoreline - width * 0.095;
-    const farRx = Math.max(52, width * scale);
-    const farRy = height * 0.42;
-    this.drawEllipticalGlow(farX, upperY, farRx, farRy, accentA, 0.38);
-    this.drawDarkEllipticalShadow(
-      farX + farRx * 0.16,
-      upperY,
-      farRx * 0.58,
-      farRy * 0.66,
-      0.74
-    );
-
-    const lowerX = shoreline - width * 0.072;
-    const lowerRx = Math.max(44, width * scale * 0.82);
-    const lowerRy = height * 0.36;
-    this.drawEllipticalGlow(lowerX, lowerY, lowerRx, lowerRy, accentB, 0.31);
-    this.drawDarkEllipticalShadow(
-      lowerX + lowerRx * 0.14,
-      lowerY,
-      lowerRx * 0.54,
-      lowerRy * 0.62,
-      0.64
-    );
-
-    this.drawEllipticalGlow(
-      shoreline - width * 0.034,
-      middleY,
-      Math.max(30, width * scale * 0.48),
-      height * 0.27,
-      glow,
-      0.20
-    );
-  }
-
-  drawPathBand({ baseX, time, phase, amplitudeScale, color, alpha, blur, width, composite = 'screen' }) {
-    const ctx = this.ctx;
-    this.createEdgePath(ctx, baseX, time, phase, amplitudeScale);
-    ctx.save();
-    ctx.globalCompositeOperation = composite;
-    ctx.globalAlpha = alpha;
-    // Safari < 18 and some old WebViews ignore ctx.filter; setting it is a
-    // no-op there, so only assign when supported to keep intent explicit.
-    if (SUPPORTS_CTX_FILTER) ctx.filter = `blur(${blur}px)`;
-    ctx.strokeStyle = color;
-    ctx.lineWidth = width;
-    ctx.stroke();
-    ctx.restore();
-  }
-
-  setRange(min, max) {
-    if (min > max) {
-      const swap = min;
-      min = max;
-      max = swap;
+
+  resizeCanvas() {
+    const bounds = this.root.getBoundingClientRect();
+    this.dpr = Math.min(window.devicePixelRatio || 1, this.dprCap);
+    this.width = Math.max(1, bounds.width);
+    this.height = Math.max(1, bounds.height);
+    this.canvas.width = Math.round(this.width * this.dpr);
+    this.canvas.height = Math.round(this.height * this.dpr);
+    this.canvas.style.width = `${this.width}px`;
+    this.canvas.style.height = `${this.height}px`;
+    this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
+  }
+
+  edgeEnvelope(yRatio) {
+    const edge = Math.sin(Math.PI * clamp(yRatio, 0, 1));
+    return Math.pow(Math.max(edge, 0), 0.48);
+  }
+
+  localBulge(yRatio, time, index) {
+    const direction = index === 0 ? 1 : -1;
+    const center = 0.28 + index * 0.40 + Math.sin(time * (0.19 + index * 0.035) + this.seed * (1.1 + index)) * 0.13;
+    const width = 0.075 + index * 0.016 + Math.sin(time * 0.13 + this.seed * 2.1) * 0.012;
+    const distance = (yRatio - center) / Math.max(width, 0.035);
+    const gaussian = Math.exp(-0.5 * distance * distance);
+    return gaussian * Math.sin(time * (0.71 + index * 0.09) + this.seed * (2.7 + index)) * this.profile.bulgeAmplitude * direction;
+  }
+
+  edgeOffset(y, time, phase = 0, amplitudeScale = 1) {
+    const yRatio = this.height > 0 ? y / this.height : 0;
+    const envelope = this.edgeEnvelope(yRatio);
+    const scaledTime = time * this.profile.timeScale;
+    const phaseTime = this.profile.surge
+      ? scaledTime + this.profile.surge * Math.sin(scaledTime * 2)
+      : scaledTime;
+    let offset = 0;
+
+    for (let index = 0; index < this.profile.cycles.length; index += 1) {
+      const cycle = this.profile.cycles[index];
+      const amplitude = this.profile.amplitudes[index];
+      const speed = this.profile.speeds[index];
+      const amplitudeMotion = 0.74 + 0.26 * Math.sin(
+        phaseTime * (0.17 + index * 0.045) + this.seed * (index + 2.4)
+      );
+      offset += Math.sin(
+        yRatio * Math.PI * 2 * cycle + phaseTime * speed * Math.PI * 2 + this.seed * (index + 1) + phase
+      ) * amplitude * amplitudeMotion;
+    }
+
+    offset += this.localBulge(yRatio, phaseTime + phase, 0);
+    offset += this.localBulge(yRatio, phaseTime - phase * 0.7, 1);
+    return offset * envelope * amplitudeScale;
+  }
+
+  createEdgePath(ctx, baseX, time, phase = 0, amplitudeScale = 1) {
+    const step = Math.max(1.8, this.height / 92);
+    ctx.beginPath();
+    for (let y = 0; y <= this.height + step; y += step) {
+      const x = baseX + this.edgeOffset(y, time, phase, amplitudeScale);
+      if (y === 0) ctx.moveTo(x, y);
+      else ctx.lineTo(x, y);
+    }
+  }
+
+  createFillPath(ctx, baseX, time, phase = 0, amplitudeScale = 1) {
+    const step = Math.max(1.8, this.height / 92);
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(baseX + this.edgeOffset(0, time, phase, amplitudeScale), 0);
+    for (let y = step; y <= this.height + step; y += step) {
+      ctx.lineTo(baseX + this.edgeOffset(y, time, phase, amplitudeScale), y);
     }
-    this.min = min;
-    this.max = max;
-    const clamped = clamp(this.value, this.min, this.max);
-    if (clamped !== this.value) this.setProgress(clamped, 'prop');
-  }
-
+    ctx.lineTo(0, this.height);
+    ctx.closePath();
+  }
+
+  drawEllipticalGlow(x, y, radiusX, radiusY, color, alpha) {
+    const ctx = this.ctx;
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.scale(1, radiusY / radiusX);
+    const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, radiusX);
+    gradient.addColorStop(0, hexToRgba(color, alpha));
+    gradient.addColorStop(0.42, hexToRgba(color, alpha * 0.48));
+    gradient.addColorStop(1, hexToRgba(color, 0));
+    ctx.globalCompositeOperation = 'screen';
+    ctx.fillStyle = gradient;
+    ctx.fillRect(-radiusX, -radiusX, radiusX * 2, radiusX * 2);
+    ctx.restore();
+  }
+
+  drawDarkEllipticalShadow(x, y, radiusX, radiusY, alpha) {
+    const ctx = this.ctx;
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.scale(1, radiusY / radiusX);
+    const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, radiusX);
+    gradient.addColorStop(0, `rgba(6, 6, 11, ${alpha})`);
+    gradient.addColorStop(0.54, `rgba(8, 8, 14, ${alpha * 0.62})`);
+    gradient.addColorStop(1, 'rgba(8, 8, 14, 0)');
+    ctx.globalCompositeOperation = 'source-over';
+    ctx.fillStyle = gradient;
+    ctx.fillRect(-radiusX, -radiusX, radiusX * 2, radiusX * 2);
+    ctx.restore();
+  }
+
+  drawColorClouds(shoreline, time, accentA, accentB, glow) {
+    this.ctx;
+    const width = this.width;
+    const height = this.height;
+    const scale = this.profile.cloudWidth;
+    const t = time * this.profile.timeScale;
+
+    const upperY = height * (0.28 + Math.sin(t * 0.24 + this.seed) * 0.13);
+    const lowerY = height * (0.70 + Math.cos(t * 0.21 + this.seed * 1.7) * 0.12);
+    const middleY = height * (0.49 + Math.sin(t * 0.31 + this.seed * 2.3) * 0.15);
+
+    const farX = shoreline - width * 0.095;
+    const farRx = Math.max(52, width * scale);
+    const farRy = height * 0.42;
+    this.drawEllipticalGlow(farX, upperY, farRx, farRy, accentA, 0.38);
+    this.drawDarkEllipticalShadow(
+      farX + farRx * 0.16,
+      upperY,
+      farRx * 0.58,
+      farRy * 0.66,
+      0.74
+    );
+
+    const lowerX = shoreline - width * 0.072;
+    const lowerRx = Math.max(44, width * scale * 0.82);
+    const lowerRy = height * 0.36;
+    this.drawEllipticalGlow(lowerX, lowerY, lowerRx, lowerRy, accentB, 0.31);
+    this.drawDarkEllipticalShadow(
+      lowerX + lowerRx * 0.14,
+      lowerY,
+      lowerRx * 0.54,
+      lowerRy * 0.62,
+      0.64
+    );
+
+    this.drawEllipticalGlow(
+      shoreline - width * 0.034,
+      middleY,
+      Math.max(30, width * scale * 0.48),
+      height * 0.27,
+      glow,
+      0.20
+    );
+  }
+
+  drawPathBand({ baseX, time, phase, amplitudeScale, color, alpha, blur, width, composite = 'screen' }) {
+    const ctx = this.ctx;
+    this.createEdgePath(ctx, baseX, time, phase, amplitudeScale);
+    ctx.save();
+    ctx.globalCompositeOperation = composite;
+    ctx.globalAlpha = alpha;
+    // Safari < 18 and some old WebViews ignore ctx.filter; setting it is a
+    // no-op there, so only assign when supported to keep intent explicit.
+    if (SUPPORTS_CTX_FILTER) ctx.filter = `blur(${blur}px)`;
+    ctx.strokeStyle = color;
+    ctx.lineWidth = width;
+    ctx.stroke();
+    ctx.restore();
+  }
+
+  setRange(min, max) {
+    const 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));
+    const next = snapProgressValue(this.value, this.min, this.max, this.step);
+    if (next !== this.value) this.setProgress(next, 'prop');
+    else this.syncValueDom();
+    return this;
+  }
+
   drawReferenceFlow() {
-    const ctx = this.ctx;
-    const width = this.width;
-    const height = this.height;
-    if (!ctx || width <= 0 || height <= 0) return;
-
+    const ctx = this.ctx;
+    const width = this.width;
+    const height = this.height;
+    if (!ctx || width <= 0 || height <= 0) return;
+
     const range = Math.max(this.max - this.min, 1);
     const shoreline = width * Math.min(Math.max((this.value - this.min) / range, 0), 1);
-    const time = this.flowTime;
-    const [dark, accentA, accentB, glow] = this.preset.colors;
-
-    ctx.clearRect(0, 0, width, height);
-    ctx.fillStyle = '#202126';
-    ctx.fillRect(0, 0, width, height);
-
-    this.createFillPath(ctx, shoreline, time, 0, 1);
-    const bodyGradient = ctx.createLinearGradient(0, 0, Math.max(shoreline, 1), 0);
-    bodyGradient.addColorStop(0, dark);
-    bodyGradient.addColorStop(0.74, dark);
-    bodyGradient.addColorStop(0.89, hexToRgba(dark, 0.99));
-    bodyGradient.addColorStop(0.955, hexToRgba(accentA, 0.09));
-    bodyGradient.addColorStop(0.992, hexToRgba(accentB, 0.54));
-    bodyGradient.addColorStop(1, hexToRgba(glow, 0.78));
-    ctx.fillStyle = bodyGradient;
-    ctx.fill();
-
-    this.drawColorClouds(shoreline, time, accentA, accentB, glow);
-
-    this.drawPathBand({
-      baseX: shoreline - width * 0.105,
-      time,
-      phase: 1.42,
-      amplitudeScale: 1.18,
-      color: accentA,
-      alpha: 0.22,
-      blur: 21,
-      width: 54
-    });
-    this.drawPathBand({
-      baseX: shoreline - width * 0.073,
-      time,
-      phase: -0.92,
-      amplitudeScale: 1.06,
-      color: accentB,
-      alpha: 0.30,
-      blur: 15,
-      width: 42
-    });
-    this.drawPathBand({
-      baseX: shoreline - width * 0.047,
-      time,
-      phase: 0.42,
-      amplitudeScale: 0.94,
-      color: 'rgba(5, 5, 10, 0.92)',
-      alpha: 0.72,
-      blur: 12,
-      width: 34,
-      composite: 'source-over'
-    });
-    this.drawPathBand({
-      baseX: shoreline - width * 0.025,
-      time,
-      phase: -0.28,
-      amplitudeScale: 0.96,
-      color: accentB,
-      alpha: 0.66,
-      blur: 8,
-      width: 28
-    });
-
-    ctx.save();
-    this.createFillPath(ctx, shoreline, time, 0, 1);
-    ctx.clip();
-    this.createEdgePath(ctx, shoreline, time, 0, 1);
-
-    ctx.save();
-    ctx.globalCompositeOperation = 'screen';
-    ctx.strokeStyle = hexToRgba(accentA, 0.20);
-    ctx.lineWidth = this.profile.haloWidth;
-    ctx.shadowColor = accentA;
-    ctx.shadowBlur = this.profile.haloWidth * 0.72;
-    ctx.stroke();
-    ctx.restore();
-
-    ctx.save();
-    ctx.globalCompositeOperation = 'screen';
-    ctx.strokeStyle = hexToRgba(accentB, 0.78);
-    ctx.lineWidth = this.profile.glowWidth + 4.2;
-    ctx.shadowColor = accentB;
-    ctx.shadowBlur = 8;
-    ctx.stroke();
-    ctx.restore();
-
-    ctx.save();
-    ctx.globalCompositeOperation = 'screen';
-    ctx.strokeStyle = hexToRgba(glow, 0.88);
-    ctx.lineWidth = this.profile.glowWidth;
-    ctx.shadowColor = glow;
-    ctx.shadowBlur = 5;
-    ctx.stroke();
-    ctx.restore();
-
-    ctx.restore();
-
-    ctx.save();
-    ctx.globalCompositeOperation = 'screen';
-    ctx.strokeStyle = hexToRgba(glow, 0.84);
-    ctx.lineWidth = 2.15;
-    ctx.shadowColor = glow;
-    ctx.shadowBlur = 2.5;
-    this.createEdgePath(ctx, shoreline, time, 0, 1);
-    ctx.stroke();
-    ctx.restore();
-
-    if (this.profile.whiteAlpha > 0.05) {
-      ctx.save();
-      ctx.globalCompositeOperation = 'screen';
-      ctx.strokeStyle = `rgba(255,255,245,${this.profile.whiteAlpha})`;
-      ctx.lineWidth = this.profile.whiteWidth;
-      this.createEdgePath(ctx, shoreline, time, 0, 1);
-      ctx.stroke();
-      ctx.restore();
-    }
-  }
-
+    const time = this.flowTime;
+    const [dark, accentA, accentB, glow] = this.preset.colors;
+
+    ctx.clearRect(0, 0, width, height);
+    ctx.fillStyle = '#202126';
+    ctx.fillRect(0, 0, width, height);
+
+    this.createFillPath(ctx, shoreline, time, 0, 1);
+    const bodyGradient = ctx.createLinearGradient(0, 0, Math.max(shoreline, 1), 0);
+    bodyGradient.addColorStop(0, dark);
+    bodyGradient.addColorStop(0.74, dark);
+    bodyGradient.addColorStop(0.89, hexToRgba(dark, 0.99));
+    bodyGradient.addColorStop(0.955, hexToRgba(accentA, 0.09));
+    bodyGradient.addColorStop(0.992, hexToRgba(accentB, 0.54));
+    bodyGradient.addColorStop(1, hexToRgba(glow, 0.78));
+    ctx.fillStyle = bodyGradient;
+    ctx.fill();
+
+    this.drawColorClouds(shoreline, time, accentA, accentB, glow);
+
+    this.drawPathBand({
+      baseX: shoreline - width * 0.105,
+      time,
+      phase: 1.42,
+      amplitudeScale: 1.18,
+      color: accentA,
+      alpha: 0.22,
+      blur: 21,
+      width: 54
+    });
+    this.drawPathBand({
+      baseX: shoreline - width * 0.073,
+      time,
+      phase: -0.92,
+      amplitudeScale: 1.06,
+      color: accentB,
+      alpha: 0.30,
+      blur: 15,
+      width: 42
+    });
+    this.drawPathBand({
+      baseX: shoreline - width * 0.047,
+      time,
+      phase: 0.42,
+      amplitudeScale: 0.94,
+      color: 'rgba(5, 5, 10, 0.92)',
+      alpha: 0.72,
+      blur: 12,
+      width: 34,
+      composite: 'source-over'
+    });
+    this.drawPathBand({
+      baseX: shoreline - width * 0.025,
+      time,
+      phase: -0.28,
+      amplitudeScale: 0.96,
+      color: accentB,
+      alpha: 0.66,
+      blur: 8,
+      width: 28
+    });
+
+    ctx.save();
+    this.createFillPath(ctx, shoreline, time, 0, 1);
+    ctx.clip();
+    this.createEdgePath(ctx, shoreline, time, 0, 1);
+
+    ctx.save();
+    ctx.globalCompositeOperation = 'screen';
+    ctx.strokeStyle = hexToRgba(accentA, 0.20);
+    ctx.lineWidth = this.profile.haloWidth;
+    ctx.shadowColor = accentA;
+    ctx.shadowBlur = this.profile.haloWidth * 0.72;
+    ctx.stroke();
+    ctx.restore();
+
+    ctx.save();
+    ctx.globalCompositeOperation = 'screen';
+    ctx.strokeStyle = hexToRgba(accentB, 0.78);
+    ctx.lineWidth = this.profile.glowWidth + 4.2;
+    ctx.shadowColor = accentB;
+    ctx.shadowBlur = 8;
+    ctx.stroke();
+    ctx.restore();
+
+    ctx.save();
+    ctx.globalCompositeOperation = 'screen';
+    ctx.strokeStyle = hexToRgba(glow, 0.88);
+    ctx.lineWidth = this.profile.glowWidth;
+    ctx.shadowColor = glow;
+    ctx.shadowBlur = 5;
+    ctx.stroke();
+    ctx.restore();
+
+    ctx.restore();
+
+    ctx.save();
+    ctx.globalCompositeOperation = 'screen';
+    ctx.strokeStyle = hexToRgba(glow, 0.84);
+    ctx.lineWidth = 2.15;
+    ctx.shadowColor = glow;
+    ctx.shadowBlur = 2.5;
+    this.createEdgePath(ctx, shoreline, time, 0, 1);
+    ctx.stroke();
+    ctx.restore();
+
+    if (this.profile.whiteAlpha > 0.05) {
+      ctx.save();
+      ctx.globalCompositeOperation = 'screen';
+      ctx.strokeStyle = `rgba(255,255,245,${this.profile.whiteAlpha})`;
+      ctx.lineWidth = this.profile.whiteWidth;
+      this.createEdgePath(ctx, shoreline, time, 0, 1);
+      ctx.stroke();
+      ctx.restore();
+    }
+  }
+
   updateFromPointer(event) {
     const bounds = this.root.getBoundingClientRect();
-    const ratio = bounds.width > 0 ? (event.clientX - bounds.left) / bounds.width : 0;
+    let 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');
   }
-
+
+  onKeyDown(event) {
+    const range = this.max - this.min;
+    const configuredStep = Number(this.step);
+    const step = Number.isFinite(configuredStep) && configuredStep > 0
+      ? configuredStep
+      : Math.max(range / 100, 1e-7);
+    const direction = this.direction === 'rtl' ? -1 : 1;
+    const aliases = { Left: 'ArrowLeft', Right: 'ArrowRight', Up: 'ArrowUp', Down: 'ArrowDown' };
+    const keyCodes = {
+      35: 'End', 36: 'Home', 33: 'PageUp', 34: 'PageDown',
+      37: 'ArrowLeft', 38: 'ArrowUp', 39: 'ArrowRight', 40: 'ArrowDown'
+    };
+    const key = aliases[event.key] || event.key || keyCodes[event.keyCode];
+    let 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');
+  }
+
   beginDrag(event) {
     if (event.button !== undefined && event.button !== 0) return;
     event.preventDefault();
@@ -1629,85 +1906,101 @@ class ProgressCapsuleController {
     this.pendingPointer = null;
     if (pending) this.updateFromPointer(pending);
     this.root.classList.remove('is-dragging');
-    try {
-      if (event?.pointerId !== undefined && this.root.hasPointerCapture?.(event.pointerId)) {
-        this.root.releasePointerCapture(event.pointerId);
-      }
-    } catch {}
-    this.emitter.emit('dragend', { value: this.value });
-  }
-
-  bindEvents() {
-    if (this.options.draggable !== false) {
-      this.handlers.pointerdown = (event) => this.beginDrag(event);
-      this.handlers.pointermove = (event) => this.moveDrag(event);
-      this.handlers.pointerup = (event) => this.endDrag(event);
-      this.handlers.pointercancel = (event) => this.endDrag(event);
-      this.root.addEventListener('pointerdown', this.handlers.pointerdown);
-      this.root.addEventListener('pointermove', this.handlers.pointermove);
-      this.root.addEventListener('pointerup', this.handlers.pointerup);
-      this.root.addEventListener('pointercancel', this.handlers.pointercancel);
-    }
-
-  }
-
-  update(delta, paused) {
-    if (!paused) this.flowTime += delta;
-  }
-
-  draw() {
-    // Performance fix: when the WebGL overlay is active the 2D layer is
-    // hidden behind it, so drawing it every frame would be wasted CPU.
-    if (this.webglActive) return;
-    this.drawReferenceFlow();
-  }
-
-  randomize() {
-    this.flowTime = this.random() * 40;
-  }
-
-  setColors(colors) {
-    if (!Array.isArray(colors) || colors.length !== 4) return;
-    this.preset = { ...this.preset, colors };
-  }
-
+    try {
+      if (event?.pointerId !== undefined && this.root.hasPointerCapture?.(event.pointerId)) {
+        this.root.releasePointerCapture(event.pointerId);
+      }
+    } catch {}
+    this.emitter.emit('dragend', { value: this.value });
+  }
+
+  bindEvents() {
+    if (this.options.draggable !== false) {
+      this.handlers.pointerdown = (event) => this.beginDrag(event);
+      this.handlers.pointermove = (event) => this.moveDrag(event);
+      this.handlers.pointerup = (event) => this.endDrag(event);
+      this.handlers.pointercancel = (event) => this.endDrag(event);
+      this.root.addEventListener('pointerdown', this.handlers.pointerdown);
+      this.root.addEventListener('pointermove', this.handlers.pointermove);
+      this.root.addEventListener('pointerup', this.handlers.pointerup);
+      this.root.addEventListener('pointercancel', this.handlers.pointercancel);
+    }
+
+    if (this.options.keyboard !== false) {
+      this.handlers.keydown = (event) => this.onKeyDown(event);
+      this.root.addEventListener('keydown', this.handlers.keydown);
+    }
+
+  }
+
+  update(delta, paused) {
+    if (!paused) this.flowTime += delta;
+  }
+
+  draw() {
+    // Performance fix: when the WebGL overlay is active the 2D layer is
+    // hidden behind it, so drawing it every frame would be wasted CPU.
+    if (this.webglActive) return;
+    this.drawReferenceFlow();
+  }
+
+  randomize() {
+    this.flowTime = this.random() * 40;
+    return this.flowTime;
+  }
+
+  setColors(colors) {
+    if (!Array.isArray(colors) || colors.length !== 4) return;
+    this.preset.colors = [...colors];
+  }
+
   dispose() {
     if (this._dragRaf) cancelAnimationFrame(this._dragRaf);
     if (this.resizeObserver) this.resizeObserver.disconnect();
-    else window.removeEventListener('resize', this.resizeCanvas);
-    for (const name of Object.keys(this.handlers)) {
-      const handler = this.handlers[name];
-      this.root.removeEventListener(name, handler);
-    }
-    this.handlers = {};
-  }
-}
-
-/**
+    else window.removeEventListener('resize', this.onResize);
+    for (const name of Object.keys(this.handlers)) {
+      const handler = this.handlers[name];
+      this.root.removeEventListener(name, handler);
+    }
+    this.handlers = {};
+  }
+}
+
+/**
  * 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, options = {}) {
-  if (!container || typeof container.appendChild !== 'function') {
-    throw new Error('createProgressCapsule: container element is required');
-  }
-
+  if (!container || typeof container.appendChild !== 'function') {
+    throw new Error('createProgressCapsule: container element is required');
+  }
+
   const preset = { ...getPreset('progress', options.preset ?? '星火') };
   const merged = normalizeOptions(DEFAULTS.progress, preset, options);
-  if (merged.min > merged.max) {
-    const swap = merged.min;
-    merged.min = merged.max;
-    merged.max = swap;
-  }
-  const normalizedColors = merged.colors.map(normalizeColor);
-  if (normalizedColors.every(Boolean)) preset.colors = normalizedColors;
-  preset.edgeStyle = merged.edgeStyle;
+  [merged.min, merged.max] = normalizeRange(merged.min, merged.max);
+  if (merged.modelValue !== undefined) merged.value = merged.modelValue;
+  const normalizedColors = Array.isArray(merged.colors) ? merged.colors.map(normalizeColor) : [];
+  if (normalizedColors.length === 4 && normalizedColors.every(Boolean)) preset.colors = normalizedColors;
+  const initialEdgeStyle = merged.edgeStyle === 'tide' || merged.edgeStyle === 'flow'
+    ? merged.edgeStyle
+    : preset.edgeStyle;
+  preset.edgeStyle = initialEdgeStyle;
+  merged.edgeStyle = initialEdgeStyle;
+  merged.colors = [...preset.colors];
+  const optionColors = Array.isArray(options.colors) ? options.colors.map(normalizeColor) : [];
+  let colorOverride = optionColors.length === 4 && optionColors.every(Boolean)
+    ? [...optionColors]
+    : null;
+  let edgeStyleOverride = options.edgeStyle === 'flow' || options.edgeStyle === 'tide'
+    ? merged.edgeStyle
+    : null;
   const copy = COPY;
   let customLabel = typeof options.label === 'string' && options.label ? options.label : null;
   // Vue 的裸布尔属性（<ProgressCapsule disabled />）会传成空字符串，
@@ -1716,19 +2009,32 @@ function createProgressCapsule(container, options = {}) {
   const readonly = merged.readonly === true || merged.readonly === '' || merged.readonly === 'true';
   const locked = disabled || readonly;
   const effectiveDraggable = locked ? false : merged.draggable !== false;
+  const effectiveKeyboard = locked ? false : merged.keyboard !== false;
   const 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
   };
 
   const 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');
@@ -1737,10 +2043,11 @@ function createProgressCapsule(container, options = {}) {
     root.setAttribute('aria-readonly', 'true');
     root.classList.add('is-readonly');
   }
-  if (locked) root.setAttribute('tabindex', '-1');
-  root.setAttribute('aria-valuemin', String(merged.min ?? 0));
-  root.setAttribute('aria-valuemax', String(merged.max ?? 100));
-  root.setAttribute('aria-valuenow', String(preset.initialProgress));
+  root.setAttribute('tabindex', locked ? '-1' : (effectiveKeyboard ? '0' : '-1'));
+  root.setAttribute('aria-orientation', 'horizontal');
+  root.setAttribute('aria-valuemin', String(merged.min ?? 0));
+  root.setAttribute('aria-valuemax', String(merged.max ?? 100));
+  root.setAttribute('aria-valuenow', String(preset.initialProgress));
   const updateAria = () => {
     root.setAttribute(
       'aria-label',
@@ -1748,10 +2055,10 @@ function createProgressCapsule(container, options = {}) {
     );
   };
   updateAria();
-  const canvas = document.createElement('canvas');
-  canvas.className = 'hj-progress-canvas';
-  canvas.setAttribute('aria-hidden', 'true');
-
+  const canvas = document.createElement('canvas');
+  canvas.className = 'hj-progress-canvas';
+  canvas.setAttribute('aria-hidden', 'true');
+
   // Slot containers are always present but transparent by default; they only
   // provide geometry, never typography/padding/background (docs: 插槽 CSS 约定).
   const fillContent = (layer, content) => {
@@ -1780,17 +2087,31 @@ function createProgressCapsule(container, options = {}) {
   valueElement.className = 'hj-progress-value';
   valueElement.setAttribute('aria-hidden', 'true');
   valueElement.hidden = merged.showValue === false;
-
+
   root.appendChild(canvas);
   root.appendChild(textLayer);
   root.appendChild(visualLayer);
   root.appendChild(valueElement);
   container.appendChild(root);
-
+
   const emitter = createEmitter();
-  let paused = merged.respectReducedMotion && prefersReducedMotion();
+  let manuallyPaused = merged.paused === true;
+  let reducedPaused = false;
+  let staticMode = merged.static === true;
+  let contextLost = false;
   let disposed = false;
-
+  let renderOnce = () => {};
+  const onContextLost = () => {
+    contextLost = true;
+    emitter.emit('contextlost', {});
+  };
+  const onContextRestored = () => {
+    contextLost = false;
+    emitter.emit('contextrestored', {});
+    renderOnce();
+    wakeScheduler();
+  };
+
   const applySize = () => {
     root.style.width = parseSize(merged.width);
     root.style.height = parseSize(merged.height);
@@ -1800,28 +2121,39 @@ function createProgressCapsule(container, options = {}) {
       root.style.setProperty('--hj-text-width', `${merged.textRatio}%`);
     }
   };
-  applySize();
-
+  applySize();
+
   const controller = new ProgressCapsuleController({
     root,
     canvas,
     valueElement,
     preset,
     emitter,
-    options: { ...merged, draggable: effectiveDraggable },
+    options: {
+      ...merged,
+      draggable: effectiveDraggable,
+      keyboard: effectiveKeyboard,
+      onResize: () => {
+        if (manuallyPaused || reducedPaused || staticMode) renderOnce();
+      }
+    },
     copy,
     dirty
   });
-
-  let overlay = null;
-  if (merged.renderer !== 'canvas2d') {
-    overlay = attachProgressFlowOverlay({
-      root,
-      canvas,
-      preset,
-      getProgress: () => controller.value
-    });
-  }
+
+  let overlay = null;
+  if (merged.renderer !== 'canvas2d') {
+    overlay = attachProgressFlowOverlay({
+      root,
+      canvas,
+      preset,
+      getProgress: () => progressRatio(controller.value, controller.min, controller.max) * 100,
+      dprCap: effectiveDprCap(merged.quality, merged.renderScale),
+      powerPreference: merged.powerPreference,
+      onContextLost,
+      onContextRestored
+    });
+  }
   if (overlay) controller.webglActive = true;
   else if (merged.renderer !== 'canvas2d') {
     nextTick(() => {
@@ -1829,66 +2161,99 @@ function createProgressCapsule(container, options = {}) {
       emitter.emit('error', { message: 'WebGL2 unavailable, using Canvas2D fallback' });
     });
   }
-
-  const visibility = createVisibilityGuard(root);
-  let flowTime = 0;
-  const unsubscribe = subscribeScheduler(
-    (delta, now) => {
-      flowTime += delta;
-      controller.update(delta, false);
-      if (visibility.isVisible()) {
-        controller.draw();
-        if (overlay) overlay.update(flowTime);
-      }
-    },
-    () => paused
-  );
-
+
+  const visibility = createVisibilityGuard(root, wakeScheduler);
+  const motionPreference = createReducedMotionPreference(
+    merged.respectReducedMotion,
+    (matches) => {
+      reducedPaused = matches;
+      if (matches) renderOnce();
+      else wakeScheduler();
+    }
+  );
+  reducedPaused = motionPreference.matches();
+  const isMotionPaused = () => manuallyPaused || reducedPaused || staticMode || contextLost;
+  let flowTime = 0;
+  const frameGate = createFrameGate(merged.fps);
+  renderOnce = () => {
+    controller.draw();
+    if (overlay) overlay.update(flowTime);
+  };
+  renderOnce();
+  const offPausedChange = emitter.on('change', () => {
+    if (isMotionPaused()) renderOnce();
+  });
+  const unsubscribe = subscribeScheduler(
+    (delta, now) => {
+      flowTime += delta;
+      controller.update(delta, false);
+      if (frameGate.shouldDraw(delta)) {
+        controller.draw();
+        if (overlay) overlay.update(flowTime);
+      }
+    },
+    () => isMotionPaused() || !visibility.isVisible()
+  );
+
   nextTick(() => {
     if (disposed) return;
     emitter.emit('ready', { preset: { ...preset } });
   });
-
+
   const syncDom = () => {
     updateAria();
   };
-
-  return {
-    element: root,
-    canvas,
-    preset,
-    on: emitter.on,
-    off: emitter.off,
-    setValue(value, source = 'prop') {
-      controller.setProgress(value, source);
-      return this;
-    },
-    getValue() {
-      return controller.value;
-    },
-    setRange(min, max) {
-      controller.setRange(min, max);
-      return this;
-    },
+
+  return {
+    element: root,
+    canvas,
+    preset,
+    on: emitter.on,
+    off: emitter.off,
+    setValue(value, source = 'prop') {
+      controller.setProgress(value, source);
+      return this;
+    },
+    getValue() {
+      return controller.value;
+    },
+    setRange(min, max) {
+      controller.setRange(min, max);
+      if (isMotionPaused()) renderOnce();
+      return this;
+    },
     setPreset(ref) {
       const next = getPreset('progress', ref);
       dirty.preset = true;
       Object.assign(preset, next);
+      if (colorOverride) preset.colors = [...colorOverride];
+      if (edgeStyleOverride) preset.edgeStyle = edgeStyleOverride;
       const nextColors = preset.colors.map(normalizeColor);
       if (nextColors.every(Boolean)) preset.colors = nextColors;
       controller.preset = preset;
-      controller.profile = next.edgeStyle === 'tide'
+      controller.profile = preset.edgeStyle === 'tide'
         ? FLOW_PROFILES.tide
-        : (FLOW_PROFILES[next.id] || FLOW_PROFILES['visual-training']);
+        : (FLOW_PROFILES[preset.id] || FLOW_PROFILES['visual-training']);
       controller.flowTime = stringSeed(next.id) * 31;
       controller.seed = stringSeed(`${next.id}-reference`) * Math.PI * 2;
       syncDom();
       if (overlay) {
         overlay.dispose();
-        overlay = attachProgressFlowOverlay({ root, canvas, preset, getProgress: () => controller.value });
+        contextLost = false;
+        overlay = attachProgressFlowOverlay({
+          root,
+          canvas,
+          preset,
+          getProgress: () => progressRatio(controller.value, controller.min, controller.max) * 100,
+          dprCap: effectiveDprCap(merged.quality, merged.renderScale),
+          powerPreference: merged.powerPreference,
+          onContextLost,
+          onContextRestored
+        });
       }
       controller.webglActive = Boolean(overlay);
       controller.resizeCanvas();
+      if (isMotionPaused()) renderOnce();
       emitter.emit('presetchange', { preset: { ...preset } });
       return this;
     },
@@ -1896,16 +2261,28 @@ function createProgressCapsule(container, options = {}) {
       const 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();
-        overlay = attachProgressFlowOverlay({ root, canvas, preset, getProgress: () => controller.value });
+        contextLost = false;
+        overlay = attachProgressFlowOverlay({
+          root,
+          canvas,
+          preset,
+          getProgress: () => progressRatio(controller.value, controller.min, controller.max) * 100,
+          dprCap: effectiveDprCap(merged.quality, merged.renderScale),
+          powerPreference: merged.powerPreference,
+          onContextLost,
+          onContextRestored
+        });
       }
       controller.webglActive = Boolean(overlay);
       controller.resizeCanvas();
+      if (isMotionPaused()) renderOnce();
       return this;
     },
     setText(content) {
@@ -1940,6 +2317,22 @@ function createProgressCapsule(container, options = {}) {
       controller.setValueSuffix(suffix);
       return this;
     },
+    setStep(step) {
+      controller.setStep(step);
+      return this;
+    },
+    setPrecision(precision) {
+      controller.setPrecision(precision);
+      return this;
+    },
+    setFormatValue(formatter) {
+      controller.setFormatValue(formatter);
+      return this;
+    },
+    setDirection(direction) {
+      controller.setDirection(direction);
+      return this;
+    },
     setShowValue(show) {
       controller.setShowValue(show);
       return this;
@@ -1948,11 +2341,14 @@ function createProgressCapsule(container, options = {}) {
       const next = Array.isArray(colors) ? colors.map(normalizeColor) : [];
       if (next.length !== 4 || next.some((color) => !color)) return this;
       dirty.colors = true;
+      colorOverride = [...next];
+      preset.colors = [...next];
       controller.setColors(next);
       if (overlay) overlay.setColors(next);
       controller.resizeCanvas();
+      if (isMotionPaused()) renderOnce();
       return this;
-    },
+    },
     setSize(width, height) {
       if (width !== undefined) {
         parseSize(width);
@@ -1963,37 +2359,89 @@ function createProgressCapsule(container, options = {}) {
         merged.height = height;
       }
       applySize();
-      controller.resizeCanvas();
-      return this;
-    },
-    randomize() {
-      controller.randomize();
-      return this;
-    },
-    pause() {
-      paused = true;
-      return this;
-    },
-    resume() {
-      paused = false;
-      return this;
-    },
-    setQuality(quality) {
-      merged.quality = quality;
-      controller.dprCap = dprCapFor(quality);
-      controller.resizeCanvas();
-      return this;
-    },
+      controller.resizeCanvas();
+      if (isMotionPaused()) renderOnce();
+      return this;
+    },
+    randomize() {
+      flowTime = controller.randomize();
+      if (isMotionPaused()) renderOnce();
+      return this;
+    },
+    pause() {
+      dirty.paused = true;
+      manuallyPaused = true;
+      renderOnce();
+      return this;
+    },
+    resume() {
+      dirty.paused = true;
+      manuallyPaused = false;
+      wakeScheduler();
+      return this;
+    },
+    setPaused(value) {
+      return value ? this.pause() : this.resume();
+    },
+    setStatic(value) {
+      dirty.static = true;
+      staticMode = value === true;
+      merged.static = staticMode;
+      if (staticMode) renderOnce();
+      else wakeScheduler();
+      return this;
+    },
+    setFps(fps) {
+      dirty.fps = true;
+      merged.fps = frameGate.setFps(fps);
+      wakeScheduler();
+      return this;
+    },
+    setQuality(quality) {
+      dirty.quality = true;
+      merged.quality = quality;
+      controller.dprCap = effectiveDprCap(quality, merged.renderScale);
+      controller.resizeCanvas();
+      if (overlay) overlay.setDprCap(controller.dprCap);
+      if (isMotionPaused()) renderOnce();
+      return this;
+    },
+    setRenderScale(renderScale) {
+      const value = Number(renderScale);
+      if (!Number.isFinite(value)) return this;
+      dirty.renderScale = true;
+      merged.renderScale = Math.min(1, Math.max(0.25, value));
+      controller.dprCap = effectiveDprCap(merged.quality, merged.renderScale);
+      controller.resizeCanvas();
+      if (overlay) overlay.setDprCap(controller.dprCap);
+      if (isMotionPaused()) renderOnce();
+      return this;
+    },
     dispose() {
       disposed = true;
       unsubscribe();
-      visibility.dispose();
-      if (overlay) overlay.dispose();
+      offPausedChange();
+      visibility.dispose();
+      motionPreference.dispose();
+      if (overlay) overlay.dispose();
       controller.dispose();
       root.remove();
     },
     get textRatio() { return merged.textRatio; },
     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
   };
 }