@5even7/dlc-ui 0.2.10 → 0.2.11

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 > **发版规则**：默认每次发布只递增补丁号（0.x.y → 0.x.(y+1)，即 +0.01）；除非手动明确指定新版本号，否则不升次版本。
 
+## 0.2.11 - 2026-08-09
+
+- 修复：`--hj-text-bg` / `--hj-text-pad` 两个 cssVars 此前只在文档声明、组件 CSS 未引用，传了不生效；现在 Capsule / Progress 文字区容器真正支持背景与内边距变量（默认仍为透明 / 0，无视觉回归）。
+- 修复：Progress WebGL 路径下参考图集以全权重覆盖用户 `colors`，导致改主色 / 高光几乎无可见反馈；图集改为只提供亮度结构，颜色始终由 `colors`（底色 / 主色 / 辅色 / 高光）决定，Canvas2D 降级路径本就生效。
+- 文档：README / examples 修正过时描述（移除已废弃的键盘控制、自动加载文案；胶囊示例从"9 组"改为 6 组；示例页旧名 Cosmic Capsules 统一为 DLC）；`--hj-text-min-width` 默认值说明与实现一致（`textRatio` 生效时组件强制归零）。
+- 类型：`ProgressPreset` 移除运行时不存在的 `loadRate` 字段；`CapsuleController` 补 `setMouseColor()`；`ProgressController` 补 `setShowValue()`，与运行时控制器对齐。
+- 示例：examples 属性 / 方法说明补齐 `setMouseColor` / `setShowValue`，同步移除键盘 / 自动加载残留描述。
+
 ## 0.2.10 - 2026-08-09
 
 - 修复：Vue wrapper 的插槽中转容器（`.hj-vue-slot-text` / `.hj-vue-slot-color`）此前带 `height: 100%`，插槽内容被搬进文字区/颜色区后，空壳仍会以宿主高度各撑出一个空块，把 Capsule / Progress 组件根整体往下推约 2×组件高度；改为 `display: none`，彻底脱离布局（对插槽搬运无影响）。

package/README.md

@@ -163,7 +163,7 @@ export default {
 
 dlc-color 背景层（`createColorBackground(host, options)`）：`preset`、`colors`、`seed`、`speed`、`quality`、`renderer`、`mouseColor`、`respectReducedMotion`、`opacity`（0~1）、`fallbackColor`（预置底色 / 十六进制色 / false）。控制器支持 `setPreset / setColors / setSeed / setSpeed / setQuality / setOpacity / setFallbackColor / setMouseColor / randomize / pause / resume / dispose` 和 `ready / presetchange / error` 事件。Vue 里可用官方组件 `dlc-color`（从 `@5even7/dlc-ui/vue2` 或 `/vue3` 导入），它的默认插槽内容会显示在背景层上方。
 
-胶囊控制器额外支持 `setSeed(seed)` / `setSpeed(speed)` / `setText(content)` / `setColorContent(content)` / `setTextRatio(ratio)` / `setCssVars(vars)` / `setLabel(label)` 热更新；进度控制器额外支持 `setEdgeStyle('flow' | 'tide')` / `setValueSuffix(suffix)` 和同样的插槽热更新方法。`setPreset` 只接受文学名称字符串（如 `'汐潮'`）。Vue 组件实例也暴露 `setText` / `setColorContent` / `setTextRatio` / `setCssVars` / `setLabel`（胶囊另有 `setMouseColor`，进度另有 `setValueSuffix` / `setShowValue`），与 H5 控制器对称。
+胶囊控制器额外支持 `setSeed(seed)` / `setSpeed(speed)` / `setMouseColor(value)` / `setText(content)` / `setColorContent(content)` / `setTextRatio(ratio)` / `setCssVars(vars)` / `setLabel(label)` 热更新；进度控制器额外支持 `setEdgeStyle('flow' | 'tide')` / `setValueSuffix(suffix)` / `setShowValue(show)` 和同样的插槽热更新方法。`setPreset` 只接受文学名称字符串（如 `'汐潮'`）。Vue 组件实例也暴露 `setText` / `setColorContent` / `setTextRatio` / `setCssVars` / `setLabel`（胶囊另有 `setMouseColor`，进度另有 `setValueSuffix` / `setShowValue`），与 H5 控制器对称。
 
 > 进度条是完全受控组件：组件自身不再自动增长，`value` 由使用方驱动。要自动步进，自己写定时器加值即可：
 >
@@ -211,7 +211,7 @@ createProgressCapsule(el, {
 | 变量 | 作用 | 默认 |
 | --- | --- | --- |
 | `--hj-text-width` | 文字区宽度（`textRatio` 写这里） | 胶囊 39% / 进度条 54% |
-| `--hj-text-min-width` | 文字区最小宽度（仅胶囊） | `164px` |
+| `--hj-text-min-width` | 文字区最小宽度（仅胶囊；`textRatio` 生效时组件强制归零，样式表兜底值才是 `164px`） | `0` |
 | `--hj-text-left` | 文字区左侧距离（仅进度条） | `30px` |
 | `--hj-text-bg` | 文字区背景 | 透明 |
 | `--hj-text-pad` | 文字区内边距 | `0` |

package/dist/color.cjs

@@ -1047,7 +1047,7 @@ function prefersReducedMotion() {
  * isolation: isolate` automatically so the layer can never escape its box
  * (or break stacking outside it).
  *
- * Options: preset (id/code/name or object), colors, seed, speed, quality,
+ * Options: preset (literary name), colors, seed, speed, quality,
  * renderer, mouseColor, respectReducedMotion, opacity (0-1), fallbackColor
  * (true=preset base color, a hex string, or false to disable).
  */

package/dist/color.mjs

@@ -845,7 +845,7 @@ function prefersReducedMotion() {
  * isolation: isolate` automatically so the layer can never escape its box
  * (or break stacking outside it).
  *
- * Options: preset (id/code/name or object), colors, seed, speed, quality,
+ * Options: preset (literary name), colors, seed, speed, quality,
  * renderer, mouseColor, respectReducedMotion, opacity (0-1), fallbackColor
  * (true=preset base color, a hex string, or false to disable).
  */

package/dist/index.cjs

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

package/dist/index.mjs

@@ -1487,12 +1487,17 @@ void main() {
   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);
-  float stripMask = smoothstep(0.0, 0.018, effectX) * (1.0 - smoothstep(0.982, 1.0, effectX));
-  float referenceLeft = 1.0 - smoothstep(-0.026, -0.012, d);
-  color = mix(color, referenceColor, stripMask * referenceLeft * u_hasEffect);
+  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);
+  float stripMask = smoothstep(0.0, 0.018, effectX) * (1.0 - smoothstep(0.982, 1.0, effectX));
+  float referenceLeft = 1.0 - smoothstep(-0.026, -0.012, d);
+  // 参考图集只提供亮度结构，颜色始终由用户 colors（u_dark / u_accentA /
+  // u_accentB / u_glow）决定：这样 setColors / colors 属性在 WebGL 路径下
+  // 真实生效，改色有可见反馈，而不是被图集整体覆盖。
+  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);
 }`;
@@ -2301,7 +2306,7 @@ class ProgressCapsuleController {
   beginDrag(event) {
     if (event.button !== undefined && event.button !== 0) return;
     event.preventDefault();
-    // preventDefault 会吞掉点击聚焦，主动聚焦让键盘方向键立即可用。
+    // preventDefault 会吞掉点击聚焦，主动聚焦让根节点获得无障碍焦点。
     try { this.root.focus({ preventScroll: true }); } catch { this.root.focus(); }
     this.dragging = true;
     this.pendingPointer = null;
@@ -2394,7 +2399,7 @@ class ProgressCapsuleController {
 /**
  * Mount a fluid progress capsule into `container`.
  *
- * Options: preset (id/code/name or object), width, height, value, min, max,
+ * Options: preset (literary name), width, height, value, min, max,
  * draggable, 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),
@@ -2719,7 +2724,7 @@ function prefersReducedMotion() {
  * isolation: isolate` automatically so the layer can never escape its box
  * (or break stacking outside it).
  *
- * Options: preset (id/code/name or object), colors, seed, speed, quality,
+ * Options: preset (literary name), colors, seed, speed, quality,
  * renderer, mouseColor, respectReducedMotion, opacity (0-1), fallbackColor
  * (true=preset base color, a hex string, or false to disable).
  */

package/dist/index.umd.js

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

package/dist/index.umd.min.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).CosmicCapsules={})}(this,function(e){"use strict";function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,i=Array(t);r<t;r++)i[r]=e[r];return i}function r(e,t,r){if("function"==typeof e?e===t:e.has(t))return arguments.length<3?t:r;throw new TypeError("Private element is not present on this object")}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){(function(e,t){if(t.has(e))throw new TypeError("Cannot initialize the same private elements twice on an object")})(e,t),t.add(e)}function n(e,t,r){return t&&function(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,d(i.key),i)}}(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function a(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=p(e))||t){r&&(e=r);var i=0,o=function(){};return{s:o,n:function(){return i>=e.length?{done:!0}:{done:!1,value:e[i++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var n,a=!0,s=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return a=e.done,e},e:function(e){s=!0,n=e},f:function(){try{a||null==r.return||r.return()}finally{if(s)throw n}}}}function s(e,t,r){return(t=d(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,i)}return r}function u(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?l(Object(r),!0).forEach(function(t){s(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function c(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var i,o,n,a,s=[],l=!0,u=!1;try{if(n=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;l=!1}else for(;!(l=(i=n.call(r)).done)&&(s.push(i.value),s.length!==t);l=!0);}catch(e){u=!0,o=e}finally{try{if(!l&&null!=r.return&&(a=r.return(),Object(a)!==a))return}finally{if(u)throw o}}return s}}(e,t)||p(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function f(e){return function(e){if(Array.isArray(e))return t(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||p(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var i=r.call(e,t);if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}function h(e){return h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},h(e)}function p(e,r){if(e){if("string"==typeof e)return t(e,r);var i={}.toString.call(e).slice(8,-1);return"Object"===i&&e.constructor&&(i=e.constructor.name),"Map"===i||"Set"===i?Array.from(e):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?t(e,r):void 0}}function m(){var e=Object.create(null);return{on:function(t,r){return e[t]||(e[t]=[]),e[t].push(r),function(){var i=e[t];if(i){var o=i.indexOf(r);-1!==o&&i.splice(o,1)}}},off:function(t,r){var i=e[t];if(!i)return!1;var o=i.indexOf(r);return-1!==o&&(i.splice(o,1),!0)},emit:function(t){var r=e[t];if(r){for(var i=arguments.length,o=new Array(i>1?i-1:0),n=1;n<i;n++)o[n-1]=arguments[n];var s,l=a(r.slice());try{for(l.s();!(s=l.n()).done;){s.value.apply(void 0,o)}}catch(e){l.e(e)}finally{l.f()}}}}}var v=/^[\d.]+(?:px|%|vw|vh|vmin|vmax|em|rem)$/;function g(e){if("number"==typeof e){if(!Number.isFinite(e)||e<0)throw new Error("Invalid size: ".concat(e));return"".concat(e,"px")}if("string"!=typeof e)throw new Error("Invalid size: ".concat(String(e)));var t=e.trim();if(!t)throw new Error("Invalid size: empty string");if(/^\d+(?:\.\d+)?$/.test(t))return"".concat(t,"px");if(!v.test(t))throw new Error('Invalid size or unsupported unit: "'.concat(e,'" (use px, %, vw, vh, vmin, vmax, em, rem)'));return t}var b={low:{dpr:1},medium:{dpr:1.5},high:{dpr:2}};function y(e){return"auto"===e?(t="undefined"!=typeof navigator?navigator:null,r=t&&"number"==typeof t.deviceMemory?t.deviceMemory:8,i=t&&"number"==typeof t.hardwareConcurrency?t.hardwareConcurrency:8,r<=4||i<=4?1.5:2):(b[e]||b.medium).dpr;var t,r,i}function w(e,t,r){var i=function(e){for(var t={},r=0,i=Object.keys(e);r<i.length;r++){var o=i[r];void 0!==e[o]&&(t[o]=e[o])}return t},o=i(t&&"object"===h(t)?t:{}),n=i(r&&"object"===h(r)?r:{});return u(u(u({},e),o),n)}var x=["#EAF6FF","#8FD0FF","#3B87F6","#6B58E9"],C=["#EDF2FF","#2F58D5","#1B2040","#E07A43"],E=["#F2EEFF","#B99AF1","#8F74DB","#D7D85C"],S=["#F5F6F8","#B9C0CC","#7F8793","#4A4F59"],P=["#FFF0E6","#F6C26B","#F98A64","#E86D74"],_=[{id:"original",code:"NC-01",name:"初光",group:"warm",seed:1.7,speed:.5,colors:f(["#FFF3EA","#F5B27A","#F67BC6","#A978E8"])},{id:"ocean",code:"NC-02",name:"沧溟",group:"cold",seed:8.2,speed:.48,colors:f(x)},{id:"klein",code:"NC-03",name:"玄夜",group:"cold",seed:14.1,speed:.49,colors:f(C)},{id:"ultraviolet",code:"NC-04",name:"紫霄",group:"cold",seed:23.4,speed:.47,colors:f(E)},{id:"chrome",code:"NC-05",name:"银汉",group:"cold",seed:37.8,speed:.42,colors:f(S)},{id:"plus",code:"NC-06",name:"熔金",group:"warm",seed:51.3,speed:.5,colors:f(P)}],M=[{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"]},{id:"agent-migration",code:"NC-11",name:"迁流",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"]},{id:"tide",code:"NC-13",name:"汐潮",subtitle:"MOON PULL / COAST",group:"progress",initialProgress:30,edgeStyle:"tide",colors:["#0A2239","#2E9BFF","#7FE3FF","#EAF9FF"]}],A=_,T=[].concat(f(_),f(M));function R(e,t){var r="capsule"===e?_:"progress"===e?M:null;if(!r)throw new Error("Unknown preset kind: ".concat(e,' (use "capsule" or "progress")'));for(var i=String(t).trim().toLowerCase(),o=null,n=0;n<r.length;n+=1)if(r[n].name.toLowerCase()===i){o=r[n];break}if(!o)throw new Error("Unknown ".concat(e," preset: ").concat(t));return o}var k={capsule:{width:"100%",height:160,quality:"auto",renderer:"auto",respectReducedMotion:!0,mouseColor:!0,textRatio:39},progress:{width:454,height:104,min:0,max:100,draggable:!0,disabled:!1,readonly:!1,valueSuffix:"%",edgeStyle:"flow",quality:"auto",renderer:"auto",textRatio:54,showValue:!0,respectReducedMotion:!0}},F={brandName:"画境观屿",valueSuffix:"%",progressAria:"{brand} {code} 加载进度",capsuleAria:"打开 {name} 沉浸预览"},L={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",gold:"#ffd700",goldenrod:"#daa520",gray:"#808080",green:"#008000",greenyellow:"#adff2f",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavender:"#e6e6fa",lavenderblush:"#fff0f5",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgreen:"#90ee90",lightgrey:"#d3d3d3",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370db",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#db7093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"};function B(e){return Math.min(255,Math.max(0,Math.round(e)))}function D(e){if("string"!=typeof e)return null;var t=e.trim();if(!t)return null;var r=t.toLowerCase();if(L[r])return L[r];if(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(t)){var i=t.slice(1).toLowerCase();return 3===i.length?"#".concat(i.split("").map(function(e){return e+e}).join("")):"#".concat(i)}var o=t.match(/^rgba?\((.*)\)$/i);return o?function(e){var t=e.split(/[,\s/]+/).filter(Boolean);if(t.length<3)return null;var r=function(e){if("string"!=typeof e||!e)return null;if("%"===e.charAt(e.length-1))return B(parseFloat(e)/100*255);var t=Number(e);return Number.isFinite(t)?B(t):null},i=r(t[0]),o=r(t[1]),n=r(t[2]);if(null===i||null===o||null===n)return null;var a=function(e){var t=e.toString(16);return 1===t.length?"0".concat(t):t};return"#".concat(a(i)).concat(a(o)).concat(a(n))}(o[1]):null}function O(e){var t=D(e);if(!t)return[0,0,0];var r=Number.parseInt(t.slice(1),16);return[(r>>16&255)/255,(r>>8&255)/255,(255&r)/255]}function N(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,r=D(e);if(!r)return"rgba(0, 0, 0, 0)";var i=Number.parseInt(r.slice(1),16),o=i>>8&255,n=255&i;return"rgba(".concat(i>>16&255,", ").concat(o,", ").concat(n,", ").concat(t,")")}function U(e,t,r){var i=e.createShader(t);if(e.shaderSource(i,r),e.compileShader(i),!e.getShaderParameter(i,e.COMPILE_STATUS)){var o=e.getShaderInfoLog(i)||"Unknown shader compile error";throw e.deleteShader(i),new Error(o)}return i}var I=new WeakSet,z=function(){return n(function e(t,n){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(i(this,e),o(this,I),this.canvas=t,this.preset=u({},n),this.options=u({dprCap:1.75,mouseColor:!0},a),this.gl=t.getContext("webgl2",{alpha:!1,antialias:!1,depth:!1,powerPreference:"high-performance",preserveDrawingBuffer:!1}),!this.gl)throw new Error("WebGL2 is not available");this.program=function(e){var t=U(e,e.VERTEX_SHADER,"#version 300 es\nin vec2 a_position;\nout vec2 v_uv;\nvoid main() {\n  v_uv = a_position * 0.5 + 0.5;\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}"),r=U(e,e.FRAGMENT_SHADER,"#version 300 es\nprecision highp float;\n\nin vec2 v_uv;\nout vec4 outColor;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_seed;\nuniform float u_motion;\nuniform vec2 u_pointer;\nuniform vec3 u_colorA;\nuniform vec3 u_colorB;\nuniform vec3 u_colorC;\nuniform vec3 u_colorD;\n\nfloat hash21(vec2 p) {\n  p = fract(p * vec2(123.34, 456.21));\n  p += dot(p, p + 45.32 + u_seed);\n  return fract(p.x * p.y);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  f = f * f * (3.0 - 2.0 * f);\n  float a = hash21(i);\n  float b = hash21(i + vec2(1.0, 0.0));\n  float c = hash21(i + vec2(0.0, 1.0));\n  float d = hash21(i + vec2(1.0, 1.0));\n  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);\n}\n\nfloat fbm(vec2 p) {\n  float value = 0.0;\n  float amplitude = 0.52;\n  mat2 rotation = mat2(0.80, 0.60, -0.60, 0.80);\n  for (int i = 0; i < 6; i++) {\n    value += amplitude * noise(p);\n    p = rotation * p * 2.03 + 17.7;\n    amplitude *= 0.5;\n  }\n  return value;\n}\n\nfloat gaussian(float value, float center, float width) {\n  return exp(-pow(value - center, 2.0) / max(width, 0.0001));\n}\n\nvec3 palette(float t) {\n  t = clamp(t, 0.0, 1.0);\n  vec3 shadow = mix(u_colorA, u_colorB, smoothstep(0.06, 0.62, t));\n  vec3 body = mix(u_colorB, u_colorC, smoothstep(0.30, 0.82, t));\n  vec3 highlight = mix(u_colorC, u_colorD, smoothstep(0.74, 1.0, t));\n  vec3 restrained = mix(shadow, body, smoothstep(0.26, 0.72, t));\n  return mix(restrained, highlight, smoothstep(0.78, 0.97, t));\n}\n\nvec3 renderNebula(vec2 uv, vec2 p, vec2 pointer, float distanceToPointer, float t) {\n  vec2 delta = p - pointer;\n  float influence = exp(-distanceToPointer * 4.6) * u_motion;\n  float angle = influence * 1.7;\n  mat2 swirl = mat2(cos(angle), -sin(angle), sin(angle), cos(angle));\n  p = pointer + swirl * delta;\n  p += normalize(delta + 0.0001) * influence * 0.08;\n\n  vec2 drift = vec2(t * 0.22, -t * 0.13);\n  vec2 q = vec2(\n    fbm(p * 1.35 + drift + u_seed),\n    fbm(p * 1.35 + vec2(5.2, 1.3) - drift * 0.85)\n  );\n  vec2 r = vec2(\n    fbm(p * 2.0 + 3.6 * q + vec2(1.7, 9.2) + t * 0.10),\n    fbm(p * 2.0 + 3.0 * q + vec2(8.3, 2.8) - t * 0.085)\n  );\n\n  float cloud = fbm(p * 1.7 + 4.2 * r);\n  float veins = fbm(p * 4.0 - 2.0 * q + t * 0.065);\n  float nebula = smoothstep(0.18, 0.91, cloud * 0.9 + veins * 0.22);\n\n  vec3 color = palette(nebula);\n  color += u_colorD * pow(max(cloud - 0.63, 0.0), 2.0) * 1.05;\n  color *= 0.78 + 0.34 * smoothstep(0.15, 0.9, veins);\n\n  vec2 starGrid = floor((uv + vec2(u_seed * 0.013, 0.0)) * vec2(132.0, 58.0));\n  vec2 starCell = fract(uv * vec2(132.0, 58.0)) - 0.5;\n  float starRandom = hash21(starGrid);\n  float starShape = smoothstep(0.075, 0.0, length(starCell));\n  float starMask = step(0.989, starRandom) * starShape;\n  float twinkle = 0.35 + 0.65 * sin(t * (1.0 + starRandom * 2.4) + starRandom * 40.0) * 0.5 + 0.5;\n  color += starMask * twinkle * mix(u_colorC, u_colorD, starRandom) * 1.05;\n\n  float pointerGlow = exp(-distanceToPointer * 7.0) * u_motion;\n  color += u_colorD * pointerGlow * 0.28;\n  return color;\n}\n\nvoid main() {\n  vec2 uv = v_uv;\n  vec2 p = uv - 0.5;\n  p.x *= u_resolution.x / max(u_resolution.y, 1.0);\n\n  vec2 pointer = u_pointer - 0.5;\n  pointer.x *= u_resolution.x / max(u_resolution.y, 1.0);\n  float distanceToPointer = length(p - pointer);\n\n  vec3 color = renderNebula(uv, p, pointer, distanceToPointer, u_time);\n  float vignette = smoothstep(0.94, 0.18, length((uv - 0.5) * vec2(1.0, 1.35)));\n  color *= 0.70 + vignette * 0.42;\n  color = pow(max(color, vec3(0.0)), vec3(0.88));\n\n  outColor = vec4(color, 1.0);\n}"),i=e.createProgram();if(e.attachShader(i,t),e.attachShader(i,r),e.linkProgram(i),e.deleteShader(t),e.deleteShader(r),!e.getProgramParameter(i,e.LINK_STATUS)){var o=e.getProgramInfoLog(i)||"Unknown program link error";throw e.deleteProgram(i),new Error(o)}return i}(this.gl),this.locations=r(I,this,j).call(this),this.pointer=[.72,.45],this.pointerTarget=f(this.pointer),this.motion=0,this.motionTarget=0,this.timeOffset=.73*n.seed,this.visible=!0,this.disposed=!1,r(I,this,G).call(this),r(I,this,X).call(this),this.resize()},[{key:"setPreset",value:function(e){this.preset=u({},e),this.timeOffset=.73*e.seed}},{key:"setDprCap",value:function(e){this.options.dprCap=e,this.resize()}},{key:"setMouseColor",value:function(e){if(this.options.mouseColor=!1!==e,this.options.mouseColor)return this.onPointerMove||r(I,this,X).call(this),this;if(this.onPointerMove){var t=this.eventTarget;t.removeEventListener("pointermove",this.onPointerMove),t.removeEventListener("pointerdown",this.onPointerMove),t.removeEventListener("pointerleave",this.onPointerLeave),this.onPointerMove=null,this.onPointerLeave=null}return this.motionTarget=0,this}},{key:"randomize",value:function(){this.preset.seed=100*Math.random(),this.timeOffset=40*Math.random()}},{key:"resize",value:function(){var e=Math.min(window.devicePixelRatio||1,this.options.dprCap),t=this.canvas.getBoundingClientRect(),r=Math.max(2,Math.round(t.width*e)),i=Math.max(2,Math.round(t.height*e));this.canvas.width===r&&this.canvas.height===i||(this.canvas.width=r,this.canvas.height=i,this.gl.viewport(0,0,r,i))}},{key:"draw",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(!this.disposed&&this.visible){this.resize();var r=this.gl;this.pointer[0]+=.08*(this.pointerTarget[0]-this.pointer[0]),this.pointer[1]+=.08*(this.pointerTarget[1]-this.pointer[1]),this.motion+=.07*(this.motionTarget-this.motion),r.useProgram(this.program),r.bindBuffer(r.ARRAY_BUFFER,this.buffer),r.enableVertexAttribArray(this.locations.position),r.vertexAttribPointer(this.locations.position,2,r.FLOAT,!1,0,0);var i=this.preset.colors.map(O);r.uniform2f(this.locations.resolution,this.canvas.width,this.canvas.height),r.uniform1f(this.locations.time,this.timeOffset+(t?0:e*this.preset.speed)),r.uniform1f(this.locations.seed,this.preset.seed),r.uniform1f(this.locations.motion,this.motion),r.uniform2f(this.locations.pointer,this.pointer[0],this.pointer[1]),r.uniform3fv(this.locations.colorA,i[0]),r.uniform3fv(this.locations.colorB,i[1]),r.uniform3fv(this.locations.colorC,i[2]),r.uniform3fv(this.locations.colorD,i[3]),r.drawArrays(r.TRIANGLES,0,3)}}},{key:"dispose",value:function(){this.disposed=!0;var e=this.eventTarget||this.canvas;e.removeEventListener("pointermove",this.onPointerMove),e.removeEventListener("pointerdown",this.onPointerMove),e.removeEventListener("pointerleave",this.onPointerLeave),this.gl.deleteBuffer(this.buffer),this.gl.deleteProgram(this.program);var t=this.gl.getExtension("WEBGL_lose_context");t&&t.loseContext()}}])}();function j(){var e=this,t=this.gl,r=function(r){return t.getUniformLocation(e.program,r)};return{position:t.getAttribLocation(this.program,"a_position"),resolution:r("u_resolution"),time:r("u_time"),seed:r("u_seed"),motion:r("u_motion"),pointer:r("u_pointer"),colorA:r("u_colorA"),colorB:r("u_colorB"),colorC:r("u_colorC"),colorD:r("u_colorD")}}function G(){var e=this.gl,t=new Float32Array([-1,-1,3,-1,-1,3]);this.buffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,this.buffer),e.bufferData(e.ARRAY_BUFFER,t,e.STATIC_DRAW)}function X(){var e=this;!1!==this.options.mouseColor&&(this.eventTarget=this.options.eventTarget||this.canvas.parentElement||this.canvas,this.onPointerMove=function(t){var r=e.canvas.getBoundingClientRect();e.pointerTarget[0]=(t.clientX-r.left)/Math.max(r.width,1),e.pointerTarget[1]=1-(t.clientY-r.top)/Math.max(r.height,1),e.motionTarget=1},this.onPointerLeave=function(){e.motionTarget=0},this.eventTarget.addEventListener("pointermove",this.onPointerMove,{passive:!0}),this.eventTarget.addEventListener("pointerdown",this.onPointerMove,{passive:!0}),this.eventTarget.addEventListener("pointerleave",this.onPointerLeave,{passive:!0}))}function W(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,r=c(O(e).map(function(e){return Math.round(255*e)}),3),i=r[0],o=r[1],n=r[2];return"rgba(".concat(i,", ").concat(o,", ").concat(n,", ").concat(t,")")}var V=function(){return n(function e(t,r){i(this,e),this.canvas=t,this.preset=r,this.context=t.getContext("2d"),this.visible=!0,this.timePhase=0},[{key:"resize",value:function(){var e=this.canvas.getBoundingClientRect(),t=Math.min(window.devicePixelRatio||1,1.5),r=Math.max(2,Math.round(e.width*t)),i=Math.max(2,Math.round(e.height*t));this.canvas.width===r&&this.canvas.height===i||(this.canvas.width=r,this.canvas.height=i)}},{key:"drawNebula",value:function(e){var t=this.context,r=this.canvas,i=r.width,o=r.height,n=(e+this.timePhase)*(this.preset.speed||1),a=.7*(this.preset.seed||0),s=t.createLinearGradient(0,0,i,o);s.addColorStop(0,this.preset.colors[0]),s.addColorStop(.38,this.preset.colors[1]),s.addColorStop(.72,this.preset.colors[2]),s.addColorStop(1,this.preset.colors[3]),t.fillStyle=s,t.fillRect(0,0,i,o),t.globalCompositeOperation="screen";for(var l=0;l<6;l+=1){var u=(.5+.45*Math.sin(.32*n+1.7*l+a))*i,c=(.5+.4*Math.cos(.25*n+l+a))*o,f=Math.max(i,o)*(.08+l%3*.04),d=t.createRadialGradient(u,c,0,u,c,f);d.addColorStop(0,W(this.preset.colors[(l+1)%4],.24)),d.addColorStop(1,W(this.preset.colors[l%4],0)),t.fillStyle=d,t.fillRect(u-f,c-f,2*f,2*f)}t.globalCompositeOperation="source-over"}},{key:"draw",value:function(e){this.visible&&(this.resize(),this.drawNebula(e))}},{key:"setPreset",value:function(e){this.preset=e}},{key:"randomize",value:function(){this.preset&&(this.preset.seed=100*Math.random(),this.timePhase=Math.random()*Math.PI*2)}},{key:"setMouseColor",value:function(){}},{key:"dispose",value:function(){}}])}(),q=[],Y=!1,H=!1,K=0,$=0;function Q(e){if(Y){var t=$?Math.min((e-$)/1e3,.05):0;if($=e,K=requestAnimationFrame(Q),!H){var r,i=a(q.slice());try{for(i.s();!(r=i.n()).done;){var o=r.value;try{o.isPaused()||o.onFrame(t,e)}catch(e){console.warn("[dlc-ui] frame error:",e)}}}catch(e){i.e(e)}finally{i.f()}}0===q.length&&(cancelAnimationFrame(K),Y=!1,K=0)}}function J(e,t){var r={onFrame:e,isPaused:t};return q.push(r),Y||(Y=!0,$=0,K=requestAnimationFrame(Q)),function(){var e=q.indexOf(r);-1!==e&&q.splice(e,1),0===q.length&&K&&(cancelAnimationFrame(K),Y=!1,K=0)}}function Z(e){var t=!0,r="undefined"==typeof document||!document.hidden,i=!1,o=null;"undefined"!=typeof IntersectionObserver&&(o=new IntersectionObserver(function(e){t=e.some(function(e){return e.isIntersecting})},{rootMargin:"180px"})).observe(e);var n=function(){r="undefined"!=typeof document&&!document.hidden};return"undefined"!=typeof document&&document.addEventListener("visibilitychange",n),{isVisible:function(){return t&&r},dispose:function(){i||(i=!0,o&&o.disconnect(),"undefined"!=typeof document&&document.removeEventListener("visibilitychange",n))}}}function ee(e){"function"==typeof queueMicrotask?queueMicrotask(e):"undefined"!=typeof Promise&&"function"==typeof Promise.resolve?Promise.resolve().then(e):setTimeout(e,0)}var te=240,re={"model-training":{seed:.37,broad:.58,middle:.25,detail:.13,lobe:.24},"agent-migration":{seed:1.71,broad:.72,middle:.1,detail:.03,lobe:.18},"visual-training":{seed:2.83,broad:.66,middle:.16,detail:.06,lobe:.23},tide:{seed:4.12,broad:.82,middle:.07,detail:.02,lobe:.3,warp:.5}},ie=Object.create(null);function oe(e,t,r){var i=(e-t)/Math.max(r,.001);return Math.exp(-i*i)}function ne(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"flow",r="".concat(e,":").concat(t);return ie[r]||(ie[r]=function(e){for(var t="tide"===(arguments.length>1&&void 0!==arguments[1]?arguments[1]:"flow")?re.tide:re[e]||re["visual-training"],r=new Uint8Array(19200),i=0;i<te;i+=1){var o=i/te*Math.PI*2;t.warp&&(o+=t.warp*Math.sin(2*o));for(var n=.28+.13*Math.sin(.53*o+t.seed),a=.7+.12*Math.cos(.47*o+1.7*t.seed),s=0;s<80;s+=1){var l=s/Math.max(79,1),u=Math.pow(Math.max(Math.sin(Math.PI*l),0),.48),c=Math.sin(l*Math.PI*2*1.35+.58*o+t.seed)*t.broad,f=Math.sin(l*Math.PI*2*3.2-.91*o+2.1*t.seed)*t.middle,d=Math.sin(l*Math.PI*2*6.1+1.31*o+3.2*t.seed)*t.detail,h=(oe(l,n,.09)*Math.sin(1.11*o+4*t.seed)-oe(l,a,.1)*Math.cos(.97*o+3.3*t.seed))*t.lobe,p=Math.max(-1,Math.min(1,(c+f+d+h)*u));r[s*te+i]=Math.round(255*(.5*p+.5))}}return r}(e,t)),ie[r]}function ae(e){var t=Number.parseInt(e.replace("#",""),16);return[(t>>16&255)/255,(t>>8&255)/255,(255&t)/255]}var se={"model-training":0,"agent-migration":1,"visual-training":2,tide:3},le={"model-training":1.05,"agent-migration":1.04,"visual-training":1.04,tide:1.18};function ue(e,t,r){var i=e.createShader(t);if(e.shaderSource(i,r),e.compileShader(i),!e.getShaderParameter(i,e.COMPILE_STATUS)){var o=e.getShaderInfoLog(i)||"Unknown shader compile error";throw e.deleteShader(i),new Error(o)}return i}var ce=function(){return n(function e(t,r){var o;i(this,e);var n=t.getContext("webgl2",{alpha:!1,antialias:!0,premultipliedAlpha:!1,powerPreference:"high-performance"});if(!n)throw new Error("WebGL2 unavailable");this.canvas=t,this.gl=n,this.program=function(e){var t=ue(e,e.VERTEX_SHADER,"#version 300 es\nin vec2 a_position;\nout vec2 v_uv;\nvoid main() {\n  v_uv = a_position * 0.5 + 0.5;\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}"),r=ue(e,e.FRAGMENT_SHADER,"#version 300 es\nprecision highp float;\n\nin vec2 v_uv;\nout vec4 outColor;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_progress;\nuniform float u_seed;\nuniform float u_profile;\nuniform sampler2D u_motion;\nuniform sampler2D u_effect;\nuniform float u_hasEffect;\nuniform float u_effectFrames;\nuniform float u_motionDuration;\nuniform float u_motionScale;\nuniform vec3 u_dark;\nuniform vec3 u_accentA;\nuniform vec3 u_accentB;\nuniform vec3 u_glow;\n\nfloat hash21(vec2 p) {\n  p = fract(p * vec2(123.34, 456.21));\n  p += dot(p, p + 45.32 + u_seed * 11.7);\n  return fract(p.x * p.y);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  f = f * f * (3.0 - 2.0 * f);\n  float a = hash21(i);\n  float b = hash21(i + vec2(1.0, 0.0));\n  float c = hash21(i + vec2(0.0, 1.0));\n  float d = hash21(i + vec2(1.0, 1.0));\n  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);\n}\n\nfloat fbm(vec2 p) {\n  float value = 0.0;\n  float amplitude = 0.55;\n  mat2 rotation = mat2(0.82, 0.57, -0.57, 0.82);\n  for (int i = 0; i < 6; i++) {\n    value += noise(p) * amplitude;\n    p = rotation * p * 2.02 + 13.7;\n    amplitude *= 0.48;\n  }\n  return value;\n}\n\nfloat gaussian(float value, float center, float width) {\n  float delta = (value - center) / max(width, 0.0001);\n  return exp(-delta * delta);\n}\n\nfloat profileMix(float model, float agent, float visual) {\n  if (u_profile < 0.5) return model;\n  if (u_profile < 1.5) return agent;\n  return visual;\n}\n\nfloat motionSample(float y, float t) {\n  float phase = fract(t / max(u_motionDuration, 0.001));\n  float captured = texture(u_motion, vec2(phase, 1.0 - clamp(y, 0.0, 1.0))).r;\n  return (captured * 2.0 - 1.0) * u_motionScale;\n}\n\nfloat edgeDisplacement(float y, float t) {\n  return motionSample(y, t);\n}\n\nfloat flowDisplacement(float y, float t) {\n  return (\n    motionSample(y - 0.024, t) * 0.08 +\n    motionSample(y - 0.012, t) * 0.18 +\n    motionSample(y, t) * 0.48 +\n    motionSample(y + 0.012, t) * 0.18 +\n    motionSample(y + 0.024, t) * 0.08\n  );\n}\n\nfloat ellipseRing(vec2 p, float radius, float width) {\n  return gaussian(length(p), radius, width);\n}\n\nvoid main() {\n  vec2 uv = v_uv;\n  float t = u_time;\n  float edge = u_progress + edgeDisplacement(uv.y, t);\n  float flowEdge = u_progress + flowDisplacement(uv.y, t);\n  float d = uv.x - edge;\n  float fd = uv.x - flowEdge;\n\n  vec3 rightBase = vec3(0.125, 0.129, 0.145);\n  vec3 color = rightBase;\n\n  float leftMask = 1.0 - smoothstep(-0.001, 0.002, d);\n  color = mix(color, u_dark, leftMask * profileMix(0.96, 0.92, 0.96));\n\n  vec2 flowP = vec2((fd + 0.10) * 6.2, uv.y * 1.95);\n  float flowA = fbm(flowP + vec2(-t * 0.22, t * 0.27) + u_seed * 1.7);\n  float flowB = fbm(flowP * 1.52 + vec2(t * 0.28, -t * 0.36) + 8.2 + u_seed);\n  float flowC = fbm(flowP * 2.25 + vec2(-t * 0.41, t * 0.46) + 19.0);\n\n  float farCenter = profileMix(-0.060, -0.079, -0.045) + (flowA - 0.5) * profileMix(0.018, 0.022, 0.014);\n  float midCenter = profileMix(-0.039, -0.052, -0.030) + (flowB - 0.5) * profileMix(0.013, 0.016, 0.010);\n  float hotCenter = profileMix(-0.026, -0.029, -0.023) + (flowC - 0.5) * 0.010;\n\n  float farBand = gaussian(fd, farCenter, profileMix(0.035, 0.049, 0.030));\n  float midBand = gaussian(fd, midCenter, profileMix(0.026, 0.034, 0.026));\n  float hotBand = gaussian(fd, hotCenter, profileMix(0.023, 0.027, 0.026));\n  float darkTrough = gaussian(fd, profileMix(-0.050, -0.058, -0.044) + (flowB - 0.5) * 0.010, profileMix(0.020, 0.025, 0.021));\n\n  float ringY = 0.47 + sin(t * 0.58 + u_seed * 2.4) * 0.12;\n  vec2 ringP = vec2((fd + 0.086) / 0.078, (uv.y - ringY) / 0.25);\n  ringP += vec2((flowB - 0.5) * 0.08, (flowA - 0.5) * 0.06);\n  float ringTexture = fbm(ringP * 2.15 + vec2(t * 0.18, -t * 0.14) + u_seed * 1.9);\n  float ring = ellipseRing(ringP, 0.66, 0.32) * (0.30 + 0.64 * ringTexture);\n  float ringCore = gaussian(length(ringP), 0.25, 0.25);\n  float ringPulse = smoothstep(0.58, 0.90, 0.5 + 0.5 * sin(t * 0.82 + u_seed * 4.1));\n  float modelRing = ring * ringPulse * (1.0 - step(0.5, u_profile));\n  float visualRing = ring * 0.16 * step(1.5, u_profile) * ringPulse;\n\n  float cloudGate = leftMask * smoothstep(-0.30, -0.008, fd);\n  float textureA = smoothstep(0.24, 0.92, flowA * 0.72 + flowB * 0.42);\n  float textureB = smoothstep(0.28, 0.94, flowB * 0.68 + flowC * 0.38);\n\n  vec3 hotColor = u_accentB;\n  color += u_accentA * farBand * cloudGate * (0.07 + textureA * profileMix(0.42, 0.24, 0.40));\n  color += u_accentB * midBand * cloudGate * (0.15 + textureB * profileMix(0.70, 0.46, 0.68));\n  color += hotColor * hotBand * cloudGate * profileMix(0.88, 0.62, 0.84);\n  float modelMask = 1.0 - step(0.5, u_profile);\n  color += u_accentA * (modelRing + visualRing) * cloudGate * profileMix(0.54, 0.0, 0.34);\n  color *= 1.0 - darkTrough * profileMix(0.44, 0.24, 0.24) * cloudGate;\n  color *= 1.0 - ringCore * modelMask * ringPulse * 0.44 * cloudGate;\n\n  float broadHalo = exp(-abs(d) * 96.0);\n  float innerHalo = exp(-abs(d) * 176.0);\n  float colorCore = exp(-abs(d) * 360.0);\n  float sharpCore = exp(-abs(d) * 760.0);\n  float leftGate = 1.0 - smoothstep(-0.003, 0.005, d);\n\n  color += u_accentA * broadHalo * leftGate * profileMix(0.09, 0.04, 0.06);\n  color += hotColor * innerHalo * leftGate * profileMix(0.76, 0.72, 0.78);\n  color += u_glow * colorCore * profileMix(0.72, 0.34, 0.24);\n\n  float whiteStrength = profileMix(0.10, 0.0, 0.0);\n  color += vec3(1.0, 0.99, 0.91) * sharpCore * whiteStrength;\n\n  float rightCut = smoothstep(0.001, 0.006, d);\n  color = mix(color, rightBase, rightCut);\n\n  float effectX = (d * 1257.0 + 260.0) / 320.0;\n  float atlasPhase = fract(t / 12.0) * u_effectFrames;\n  float atlasFrameA = floor(atlasPhase);\n  float atlasFrameB = mod(atlasFrameA + 1.0, u_effectFrames);\n  float atlasMix = smoothstep(0.0, 1.0, fract(atlasPhase));\n  float atlasXA = (atlasFrameA + clamp(effectX, 0.0, 1.0)) / u_effectFrames;\n  float atlasXB = (atlasFrameB + clamp(effectX, 0.0, 1.0)) / u_effectFrames;\n  vec3 referenceA = texture(u_effect, vec2(atlasXA, uv.y)).rgb;\n  vec3 referenceB = texture(u_effect, vec2(atlasXB, uv.y)).rgb;\n  vec3 referenceColor = mix(referenceA, referenceB, atlasMix);\n  float stripMask = smoothstep(0.0, 0.018, effectX) * (1.0 - smoothstep(0.982, 1.0, effectX));\n  float referenceLeft = 1.0 - smoothstep(-0.026, -0.012, d);\n  color = mix(color, referenceColor, stripMask * referenceLeft * u_hasEffect);\n\n  outColor = vec4(clamp(color, 0.0, 1.0), 1.0);\n}"),i=e.createProgram();if(e.attachShader(i,t),e.attachShader(i,r),e.linkProgram(i),e.deleteShader(t),e.deleteShader(r),!e.getProgramParameter(i,e.LINK_STATUS)){var o=e.getProgramInfoLog(i)||"Unknown shader link error";throw e.deleteProgram(i),new Error(o)}return i}(n),this.profile="tide"===r.edgeStyle?3:null!==(o=se[r.id])&&void 0!==o?o:2,this.seed=13.7*function(e){var t,r=2166136261,i=a(e);try{for(i.s();!(t=i.n()).done;)r^=t.value.charCodeAt(0),r=Math.imul(r,16777619)}catch(e){i.e(e)}finally{i.f()}return(r>>>0)/4294967295}("".concat(r.id,"-shader"))+1,this.colors=r.colors.map(ae),this.motionData=ne(r.id,r.edgeStyle);var s="tide"===r.edgeStyle?le.tide:le[r.id]||1.04;this.motionScale=40*s/1257,this.position=n.getAttribLocation(this.program,"a_position"),this.uniforms={resolution:n.getUniformLocation(this.program,"u_resolution"),time:n.getUniformLocation(this.program,"u_time"),progress:n.getUniformLocation(this.program,"u_progress"),seed:n.getUniformLocation(this.program,"u_seed"),profile:n.getUniformLocation(this.program,"u_profile"),motion:n.getUniformLocation(this.program,"u_motion"),effect:n.getUniformLocation(this.program,"u_effect"),hasEffect:n.getUniformLocation(this.program,"u_hasEffect"),effectFrames:n.getUniformLocation(this.program,"u_effectFrames"),motionDuration:n.getUniformLocation(this.program,"u_motionDuration"),motionScale:n.getUniformLocation(this.program,"u_motionScale"),dark:n.getUniformLocation(this.program,"u_dark"),accentA:n.getUniformLocation(this.program,"u_accentA"),accentB:n.getUniformLocation(this.program,"u_accentB"),glow:n.getUniformLocation(this.program,"u_glow")},this.buffer=n.createBuffer(),n.bindBuffer(n.ARRAY_BUFFER,this.buffer),n.bufferData(n.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),n.STATIC_DRAW),this.motionTexture=n.createTexture(),n.activeTexture(n.TEXTURE0),n.bindTexture(n.TEXTURE_2D,this.motionTexture),n.pixelStorei(n.UNPACK_ALIGNMENT,1),n.texImage2D(n.TEXTURE_2D,0,n.R8,te,80,0,n.RED,n.UNSIGNED_BYTE,this.motionData),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_MIN_FILTER,n.LINEAR),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_MAG_FILTER,n.LINEAR),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_WRAP_S,n.REPEAT),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_WRAP_T,n.CLAMP_TO_EDGE),this.effectTexture=n.createTexture(),n.activeTexture(n.TEXTURE1),n.bindTexture(n.TEXTURE_2D,this.effectTexture),n.texImage2D(n.TEXTURE_2D,0,n.RGB,1,1,0,n.RGB,n.UNSIGNED_BYTE,new Uint8Array([32,33,38])),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_MIN_FILTER,n.LINEAR),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_MAG_FILTER,n.LINEAR),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_WRAP_S,n.CLAMP_TO_EDGE),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_WRAP_T,n.CLAMP_TO_EDGE),this.effectUploaded=!1},[{key:"resize",value:function(e,t,r){var i=Math.max(1,Math.round(e*r)),o=Math.max(1,Math.round(t*r));this.canvas.width===i&&this.canvas.height===o||(this.canvas.width=i,this.canvas.height=o),this.gl.viewport(0,0,i,o)}},{key:"draw",value:function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,i=this.gl;i.useProgram(this.program),i.bindBuffer(i.ARRAY_BUFFER,this.buffer),i.enableVertexAttribArray(this.position),i.vertexAttribPointer(this.position,2,i.FLOAT,!1,0,0),i.uniform2f(this.uniforms.resolution,this.canvas.width,this.canvas.height),i.uniform1f(this.uniforms.time,e),i.uniform1f(this.uniforms.progress,t/100),i.uniform1f(this.uniforms.seed,this.seed),i.uniform1f(this.uniforms.profile,this.profile),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,this.motionTexture),i.uniform1i(this.uniforms.motion,0),i.uniform1f(this.uniforms.motionDuration,12),i.uniform1f(this.uniforms.motionScale,this.motionScale);var o=this.effectUploaded?1:0;if(!this.effectUploaded&&r&&r.complete&&r.naturalWidth>0){i.activeTexture(i.TEXTURE1),i.bindTexture(i.TEXTURE_2D,this.effectTexture),i.pixelStorei(i.UNPACK_FLIP_Y_WEBGL,!0);try{i.texImage2D(i.TEXTURE_2D,0,i.RGB,i.RGB,i.UNSIGNED_BYTE,r),this.effectUploaded=!0,o=1}catch(e){console.warn("[画境观屿] 参考纹理图集上传失败，继续使用程序化降级。",e)}i.pixelStorei(i.UNPACK_FLIP_Y_WEBGL,!1)}i.activeTexture(i.TEXTURE1),i.bindTexture(i.TEXTURE_2D,this.effectTexture),i.uniform1i(this.uniforms.effect,1),i.uniform1f(this.uniforms.hasEffect,o),i.uniform1f(this.uniforms.effectFrames,24),i.uniform3fv(this.uniforms.dark,this.colors[0]),i.uniform3fv(this.uniforms.accentA,this.colors[1]),i.uniform3fv(this.uniforms.accentB,this.colors[2]),i.uniform3fv(this.uniforms.glow,this.colors[3]),i.drawArrays(i.TRIANGLES,0,6)}},{key:"setColors",value:function(e){this.colors=e.map(ae)}},{key:"dispose",value:function(){var e=this.gl;e.deleteBuffer(this.buffer),e.deleteTexture(this.motionTexture),e.deleteTexture(this.effectTexture),e.deleteProgram(this.program);var t=e.getExtension("WEBGL_lose_context");t&&t.loseContext()}}])}();var fe=Object.create(null),de={"model-training":["#20131f","#ff3f94","#ff8a3d","#fff06a"],"agent-migration":["#111a31","#245bff","#00cfff","#5dffe6"],"visual-training":["#1f172b","#7042ff","#42f58d","#c4ff8a"],tide:["#0a2239","#2e9bff","#7fe3ff","#eaf9ff"]};function he(e,t,r,i,o,n,a){e.save(),e.translate(t,r),e.scale(1,o/i);var s=e.createRadialGradient(0,0,0,0,0,i),l=function(e){var t=Math.round(e).toString(16);return 1===t.length?"0".concat(t):t};s.addColorStop(0,"".concat(n).concat(l(255*a))),s.addColorStop(.46,"".concat(n).concat(l(.42*a*255))),s.addColorStop(1,"".concat(n,"00")),e.fillStyle=s,e.fillRect(-i,-i,2*i,2*i),e.restore()}function pe(e){return fe[e]||(fe[e]=function(e){var t=de[e]||de["visual-training"],r=document.createElement("canvas");r.width=1536,r.height=32;for(var i=r.getContext("2d"),o=0;o<24;o+=1){var n=o/24*Math.PI*2,a=64*o;i.save(),i.translate(a,0),i.fillStyle=t[0],i.fillRect(0,0,64,32),i.globalCompositeOperation="screen",he(i,35+5*Math.sin(.83*n),10+5*Math.cos(.61*n),27,18,t[1],"agent-migration"===e?.32:.42),he(i,45+4*Math.cos(.72*n),23+4*Math.sin(.54*n),22,15,t[2],.44),he(i,53+2*Math.sin(1.07*n),16+6*Math.cos(.89*n),12,13,t[3],"model-training"===e?.3:.2),i.globalCompositeOperation="source-over";var s=i.createRadialGradient(41,16,1,41,16,17);s.addColorStop(0,"rgba(5,6,11,0.64)"),s.addColorStop(.58,"rgba(6,7,12,0.26)"),s.addColorStop(1,"rgba(6,7,12,0)"),i.fillStyle=s,i.fillRect(20,0,44,32),i.restore()}var l=new Image;l.decoding="async";var u={image:l,ready:!1};return l.addEventListener("load",function(){u.ready=!0},{once:!0}),l.addEventListener("error",function(){u.ready=!1},{once:!0}),l.src=r.toDataURL("image/png"),u}(e)),fe[e]}function me(e){var t=e.root,r=e.canvas,i=e.preset,o=e.getProgress,n=document.createElement("canvas");n.className="hj-progress-canvas hj-progress-overlay",n.setAttribute("aria-hidden","true"),r.insertAdjacentElement("afterend",n);var a=function(e,t){try{return new ce(e,t)}catch(e){return console.warn("[画境观屿] 进度流体 WebGL2 不可用，使用 Canvas 2D 降级。",e),null}}(n,i);if(!a)return n.remove(),null;var s=pe(i.id);t.classList.add("has-webgl-progress");var l=function(){var e=t.getBoundingClientRect(),r=Math.max(1,e.width),i=Math.max(1,e.height),o=Math.min(window.devicePixelRatio||1,2);n.style.width="".concat(r,"px"),n.style.height="".concat(i,"px"),a.resize(r,i,o)},u=null,c=null;return"undefined"!=typeof ResizeObserver?(u=new ResizeObserver(l)).observe(t):(c=l,window.addEventListener("resize",c)),l(),{update:function(e){var t=e%12,r=o();a.draw(t,Number.isFinite(r)?r:i.initialProgress,s.ready?s.image:null)},setColors:function(e){a.setColors(e)},dispose:function(){u&&u.disconnect(),c&&window.removeEventListener("resize",c),a.dispose(),n.remove(),t.classList.remove("has-webgl-progress")}}}var ve=function(e,t,r){return Math.min(Math.max(e,t),r)},ge="undefined"!=typeof CanvasRenderingContext2D&&"filter"in CanvasRenderingContext2D.prototype;function be(e){var t,r=2166136261,i=a(e);try{for(i.s();!(t=i.n()).done;){r^=t.value.charCodeAt(0),r=Math.imul(r,16777619)}}catch(e){i.e(e)}finally{i.f()}return(r>>>0)/4294967295}var ye={"model-training":{cycles:[.98,3.05,5.45],amplitudes:[11.2,11,5.2],speeds:[.31,-.53,.78],bulgeAmplitude:8.2,timeScale:1,glowWidth:5.8,haloWidth:20,whiteAlpha:.72,whiteWidth:1.15,cloudWidth:.17,autoRange:[25,66]},"agent-migration":{cycles:[.62,1.55,2.95],amplitudes:[16,7.8,2.3],speeds:[.25,-.4,.6],bulgeAmplitude:8.4,timeScale:.82,glowWidth:6.3,haloWidth:21,whiteAlpha:.18,whiteWidth:.45,cloudWidth:.18,autoRange:[24,62]},"visual-training":{cycles:[.88,2.45,4.35],amplitudes:[12.8,10.2,4.3],speeds:[.28,-.47,.69],bulgeAmplitude:7.3,timeScale:.91,glowWidth:6,haloWidth:21,whiteAlpha:.3,whiteWidth:.55,cloudWidth:.175,autoRange:[20,75]},tide:{cycles:[.72,1.9,4.2],amplitudes:[19,6.5,1.5],speeds:[.42,-.5,.66],bulgeAmplitude:9.5,timeScale:.85,glowWidth:6.2,haloWidth:21,whiteAlpha:.5,whiteWidth:1,cloudWidth:.18,autoRange:[18,70],surge:.55}},we=function(){return n(function e(t){var r,o,n,a,s=this,l=t.root,u=t.canvas,c=t.valueElement,f=t.preset,d=t.emitter,h=t.options,p=t.copy,m=t.dirty;i(this,e),this.root=l,this.canvas=u,this.valueElement=c,this.preset=f,this.emitter=d,this.options=h,this.copy=p,this.dirty=m,this.valueSuffix=null!==(r=h.valueSuffix)&&void 0!==r?r:p.valueSuffix,this.profile="tide"===f.edgeStyle?ye.tide:ye[f.id]||ye["visual-training"],this.min=null!==(o=h.min)&&void 0!==o?o:0,this.max=null!==(n=h.max)&&void 0!==n?n:100,this.dprCap=y(h.quality),this.ctx=u.getContext("2d"),this.value=ve(null!==(a=h.value)&&void 0!==a?a:f.initialProgress,this.min,this.max),this.dragging=!1,this.webglActive=!1,this.flowTime=31*be(f.id),this.seed=be("".concat(f.id,"-reference"))*Math.PI*2,this.randomState=Math.floor(2147483647*be("".concat(f.id,"-auto")))||1,this.dpr=1,this.width=0,this.height=0,this.handlers={},this.resizeObserver="undefined"!=typeof ResizeObserver?new ResizeObserver(function(){return s.resizeCanvas()}):null,this.resizeObserver?this.resizeObserver.observe(this.root):window.addEventListener("resize",this.resizeCanvas),this.suppressEvents=!0,this.setProgress(this.value,"init"),this.suppressEvents=!1,this.bindEvents(),this.resizeCanvas()},[{key:"random",value:function(){return this.randomState=Math.imul(this.randomState,1664525)+1013904223>>>0,this.randomState/4294967296}},{key:"setProgress",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"auto";this.value=ve(e,this.min,this.max);var r=Math.round(this.value);this.root.style.setProperty("--progress",this.value.toFixed(2)),this.root.setAttribute("aria-valuenow",String(r)),this.root.setAttribute("aria-valuetext","".concat(r).concat(this.valueSuffix)),this.valueElement&&(this.valueElement.textContent="".concat(r).concat(this.valueSuffix)),this.suppressEvents||(this.dirty&&(this.dirty.value=!0),this.emitter.emit("change",{value:this.value,source:t}))}},{key:"setValueSuffix",value:function(e){this.valueSuffix=String(null==e?"":e);var t=Math.round(this.value);return this.valueElement&&(this.valueElement.textContent="".concat(t).concat(this.valueSuffix)),this.root.setAttribute("aria-valuetext","".concat(t).concat(this.valueSuffix)),this}},{key:"setShowValue",value:function(e){return this.valueElement&&(this.valueElement.hidden=!1===e),this}},{key:"resizeCanvas",value:function(){var e=this.root.getBoundingClientRect();this.dpr=Math.min(window.devicePixelRatio||1,this.dprCap),this.width=Math.max(1,e.width),this.height=Math.max(1,e.height),this.canvas.width=Math.round(this.width*this.dpr),this.canvas.height=Math.round(this.height*this.dpr),this.canvas.style.width="".concat(this.width,"px"),this.canvas.style.height="".concat(this.height,"px"),this.ctx.setTransform(this.dpr,0,0,this.dpr,0,0)}},{key:"edgeEnvelope",value:function(e){var t=Math.sin(Math.PI*ve(e,0,1));return Math.pow(Math.max(t,0),.48)}},{key:"localBulge",value:function(e,t,r){var i=0===r?1:-1,o=.28+.4*r+.13*Math.sin(t*(.19+.035*r)+this.seed*(1.1+r)),n=.075+.016*r+.012*Math.sin(.13*t+2.1*this.seed),a=(e-o)/Math.max(n,.035);return Math.exp(-.5*a*a)*Math.sin(t*(.71+.09*r)+this.seed*(2.7+r))*this.profile.bulgeAmplitude*i}},{key:"edgeOffset",value:function(e,t){for(var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,o=this.height>0?e/this.height:0,n=this.edgeEnvelope(o),a=t*this.profile.timeScale,s=this.profile.surge?a+this.profile.surge*Math.sin(2*a):a,l=0,u=0;u<this.profile.cycles.length;u+=1){var c=this.profile.cycles[u],f=this.profile.amplitudes[u],d=this.profile.speeds[u],h=.74+.26*Math.sin(s*(.17+.045*u)+this.seed*(u+2.4));l+=Math.sin(o*Math.PI*2*c+s*d*Math.PI*2+this.seed*(u+1)+r)*f*h}return l+=this.localBulge(o,s+r,0),(l+=this.localBulge(o,s-.7*r,1))*n*i}},{key:"createEdgePath",value:function(e,t,r){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1,n=Math.max(1.8,this.height/92);e.beginPath();for(var a=0;a<=this.height+n;a+=n){var s=t+this.edgeOffset(a,r,i,o);0===a?e.moveTo(s,a):e.lineTo(s,a)}}},{key:"createFillPath",value:function(e,t,r){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1,n=Math.max(1.8,this.height/92);e.beginPath(),e.moveTo(0,0),e.lineTo(t+this.edgeOffset(0,r,i,o),0);for(var a=n;a<=this.height+n;a+=n)e.lineTo(t+this.edgeOffset(a,r,i,o),a);e.lineTo(0,this.height),e.closePath()}},{key:"drawEllipticalGlow",value:function(e,t,r,i,o,n){var a=this.ctx;a.save(),a.translate(e,t),a.scale(1,i/r);var s=a.createRadialGradient(0,0,0,0,0,r);s.addColorStop(0,N(o,n)),s.addColorStop(.42,N(o,.48*n)),s.addColorStop(1,N(o,0)),a.globalCompositeOperation="screen",a.fillStyle=s,a.fillRect(-r,-r,2*r,2*r),a.restore()}},{key:"drawDarkEllipticalShadow",value:function(e,t,r,i,o){var n=this.ctx;n.save(),n.translate(e,t),n.scale(1,i/r);var a=n.createRadialGradient(0,0,0,0,0,r);a.addColorStop(0,"rgba(6, 6, 11, ".concat(o,")")),a.addColorStop(.54,"rgba(8, 8, 14, ".concat(.62*o,")")),a.addColorStop(1,"rgba(8, 8, 14, 0)"),n.globalCompositeOperation="source-over",n.fillStyle=a,n.fillRect(-r,-r,2*r,2*r),n.restore()}},{key:"drawColorClouds",value:function(e,t,r,i,o){this.ctx;var n=this.width,a=this.height,s=this.profile.cloudWidth,l=t*this.profile.timeScale,u=a*(.28+.13*Math.sin(.24*l+this.seed)),c=a*(.7+.12*Math.cos(.21*l+1.7*this.seed)),f=a*(.49+.15*Math.sin(.31*l+2.3*this.seed)),d=e-.095*n,h=Math.max(52,n*s),p=.42*a;this.drawEllipticalGlow(d,u,h,p,r,.38),this.drawDarkEllipticalShadow(d+.16*h,u,.58*h,.66*p,.74);var m=e-.072*n,v=Math.max(44,n*s*.82),g=.36*a;this.drawEllipticalGlow(m,c,v,g,i,.31),this.drawDarkEllipticalShadow(m+.14*v,c,.54*v,.62*g,.64),this.drawEllipticalGlow(e-.034*n,f,Math.max(30,n*s*.48),.27*a,o,.2)}},{key:"drawPathBand",value:function(e){var t=e.baseX,r=e.time,i=e.phase,o=e.amplitudeScale,n=e.color,a=e.alpha,s=e.blur,l=e.width,u=e.composite,c=void 0===u?"screen":u,f=this.ctx;this.createEdgePath(f,t,r,i,o),f.save(),f.globalCompositeOperation=c,f.globalAlpha=a,ge&&(f.filter="blur(".concat(s,"px)")),f.strokeStyle=n,f.lineWidth=l,f.stroke(),f.restore()}},{key:"setRange",value:function(e,t){if(e>t){var r=e;e=t,t=r}this.min=e,this.max=t;var i=ve(this.value,this.min,this.max);i!==this.value&&this.setProgress(i,"prop")}},{key:"drawReferenceFlow",value:function(){var e=this.ctx,t=this.width,r=this.height;if(!(!e||t<=0||r<=0)){var i=Math.max(this.max-this.min,1),o=t*Math.min(Math.max((this.value-this.min)/i,0),1),n=this.flowTime,a=c(this.preset.colors,4),s=a[0],l=a[1],u=a[2],f=a[3];e.clearRect(0,0,t,r),e.fillStyle="#202126",e.fillRect(0,0,t,r),this.createFillPath(e,o,n,0,1);var d=e.createLinearGradient(0,0,Math.max(o,1),0);d.addColorStop(0,s),d.addColorStop(.74,s),d.addColorStop(.89,N(s,.99)),d.addColorStop(.955,N(l,.09)),d.addColorStop(.992,N(u,.54)),d.addColorStop(1,N(f,.78)),e.fillStyle=d,e.fill(),this.drawColorClouds(o,n,l,u,f),this.drawPathBand({baseX:o-.105*t,time:n,phase:1.42,amplitudeScale:1.18,color:l,alpha:.22,blur:21,width:54}),this.drawPathBand({baseX:o-.073*t,time:n,phase:-.92,amplitudeScale:1.06,color:u,alpha:.3,blur:15,width:42}),this.drawPathBand({baseX:o-.047*t,time:n,phase:.42,amplitudeScale:.94,color:"rgba(5, 5, 10, 0.92)",alpha:.72,blur:12,width:34,composite:"source-over"}),this.drawPathBand({baseX:o-.025*t,time:n,phase:-.28,amplitudeScale:.96,color:u,alpha:.66,blur:8,width:28}),e.save(),this.createFillPath(e,o,n,0,1),e.clip(),this.createEdgePath(e,o,n,0,1),e.save(),e.globalCompositeOperation="screen",e.strokeStyle=N(l,.2),e.lineWidth=this.profile.haloWidth,e.shadowColor=l,e.shadowBlur=.72*this.profile.haloWidth,e.stroke(),e.restore(),e.save(),e.globalCompositeOperation="screen",e.strokeStyle=N(u,.78),e.lineWidth=this.profile.glowWidth+4.2,e.shadowColor=u,e.shadowBlur=8,e.stroke(),e.restore(),e.save(),e.globalCompositeOperation="screen",e.strokeStyle=N(f,.88),e.lineWidth=this.profile.glowWidth,e.shadowColor=f,e.shadowBlur=5,e.stroke(),e.restore(),e.restore(),e.save(),e.globalCompositeOperation="screen",e.strokeStyle=N(f,.84),e.lineWidth=2.15,e.shadowColor=f,e.shadowBlur=2.5,this.createEdgePath(e,o,n,0,1),e.stroke(),e.restore(),this.profile.whiteAlpha>.05&&(e.save(),e.globalCompositeOperation="screen",e.strokeStyle="rgba(255,255,245,".concat(this.profile.whiteAlpha,")"),e.lineWidth=this.profile.whiteWidth,this.createEdgePath(e,o,n,0,1),e.stroke(),e.restore())}}},{key:"updateFromPointer",value:function(e){var t=this.root.getBoundingClientRect(),r=t.width>0?(e.clientX-t.left)/t.width:0;this.setProgress(this.min+r*(this.max-this.min),"drag")}},{key:"beginDrag",value:function(e){if(void 0===e.button||0===e.button){e.preventDefault();try{this.root.focus({preventScroll:!0})}catch(e){this.root.focus()}this.dragging=!0,this.pendingPointer=null,this._dragRaf=0,this.root.classList.add("is-dragging");try{var t,r;null===(t=(r=this.root).setPointerCapture)||void 0===t||t.call(r,e.pointerId)}catch(e){}this.emitter.emit("dragstart",{value:this.value}),this.updateFromPointer(e)}}},{key:"moveDrag",value:function(e){var t=this;this.dragging&&(e.preventDefault(),this.pendingPointer=e,this._dragRaf||(this._dragRaf=requestAnimationFrame(function(){t._dragRaf=0;var e=t.pendingPointer;t.pendingPointer=null,e&&t.updateFromPointer(e)})))}},{key:"endDrag",value:function(e){if(this.dragging){this.dragging=!1,this._dragRaf&&(cancelAnimationFrame(this._dragRaf),this._dragRaf=0);var t=this.pendingPointer;this.pendingPointer=null,t&&this.updateFromPointer(t),this.root.classList.remove("is-dragging");try{var r,i;void 0!==(null==e?void 0:e.pointerId)&&null!==(r=(i=this.root).hasPointerCapture)&&void 0!==r&&r.call(i,e.pointerId)&&this.root.releasePointerCapture(e.pointerId)}catch(e){}this.emitter.emit("dragend",{value:this.value})}}},{key:"bindEvents",value:function(){var e=this;!1!==this.options.draggable&&(this.handlers.pointerdown=function(t){return e.beginDrag(t)},this.handlers.pointermove=function(t){return e.moveDrag(t)},this.handlers.pointerup=function(t){return e.endDrag(t)},this.handlers.pointercancel=function(t){return e.endDrag(t)},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))}},{key:"update",value:function(e,t){t||(this.flowTime+=e)}},{key:"draw",value:function(){this.webglActive||this.drawReferenceFlow()}},{key:"randomize",value:function(){this.flowTime=40*this.random()}},{key:"setColors",value:function(e){Array.isArray(e)&&4===e.length&&(this.preset=u(u({},this.preset),{},{colors:e}))}},{key:"dispose",value:function(){this._dragRaf&&cancelAnimationFrame(this._dragRaf),this.resizeObserver?this.resizeObserver.disconnect():window.removeEventListener("resize",this.resizeCanvas);for(var e=0,t=Object.keys(this.handlers);e<t.length;e++){var r=t[e],i=this.handlers[r];this.root.removeEventListener(r,i)}this.handlers={}}}])}();e.ALL_PRESETS=T,e.COPY=F,e.CosmicRenderer=z,e.DEFAULTS=k,e.FallbackRenderer=V,e.PRESETS=A,e.PROGRESS_PRESETS=M,e.ProgressCapsuleController=we,e.ProgressFlowRenderer=ce,e.QUALITY_TIERS=b,e.createCapsule=function(e){var t,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!e||"function"!=typeof e.appendChild)throw new Error("createCapsule: container element is required");var i=u({},R("capsule",null!==(t=r.preset)&&void 0!==t?t:"初光")),o=w(k.capsule,i,r),n=o.colors.map(D);n.every(Boolean)&&(i.colors=n),i.seed=o.seed,i.speed=o.speed;var s="string"==typeof r.label&&r.label?r.label:null,l=document.createElement("div");l.className="hj-capsule-root hj-capsule-cosmic",l.dataset.group=i.group,l.dataset.mode="nebula",l.dataset.theme=i.theme||"light",l.setAttribute("role","img");var c=function(){l.setAttribute("aria-label",s||F.capsuleAria.replace("{name}",i.name))};c();var f=function(e,t){if(e.innerHTML="",null!=t)if("string"!=typeof t){var r,i=a(Array.isArray(t)?t:[t]);try{for(i.s();!(r=i.n()).done;){var o=r.value;o&&"number"==typeof o.nodeType&&e.appendChild(o)}}catch(e){i.e(e)}finally{i.f()}}else e.innerHTML=t},d=document.createElement("div");d.className="hj-capsule-text hj-capsule-copy";var p=document.createElement("div");p.className="hj-capsule-visual",f(d,r.text),f(p,r.colorContent);var v=document.createElement("canvas");v.className="hj-capsule-canvas",v.setAttribute("aria-hidden","true"),l.appendChild(d),l.appendChild(p),l.appendChild(v),e.appendChild(l);var b,x=m(),C=o.respectReducedMotion&&"undefined"!=typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches,E=!1,S={preset:!1,seed:!1,speed:!1,colors:!1,textRatio:!1,cssVars:!1};if("canvas2d"!==o.renderer)try{b=new z(v,o,{dprCap:y(o.quality)})}catch(e){b=new V(v,o),ee(function(){E||x.emit("error",{message:String(e&&e.message?e.message:e)})})}else b=new V(v,o);var P=function(){l.style.width=g(o.width),l.style.height=g(o.height);for(var e=o.cssVars||{},t=0,r=Object.keys(e);t<r.length;t++){var i=r[t];l.style.setProperty(i,e[i])}void 0!==o.textRatio&&(l.style.setProperty("--hj-text-width","".concat(o.textRatio,"%")),l.style.setProperty("--hj-text-min-width","0")),b.resize()};P();var _="undefined"!=typeof ResizeObserver?new ResizeObserver(function(){return b.resize()}):null;_?_.observe(l):window.addEventListener("resize",b.resize);var M=Z(l);l.addEventListener("pointerenter",function(){return x.emit("pointerenter",{preset:u({},i)})}),l.addEventListener("pointerleave",function(){return x.emit("pointerleave",{preset:u({},i)})}),l.addEventListener("click",function(e){x.emit("click",{event:e,preset:u({},i)})}),l.addEventListener("pointerdown",function(e){return x.emit("pointerdown",{event:e,preset:u({},i)})}),l.addEventListener("pointerup",function(e){return x.emit("pointerup",{event:e,preset:u({},i)})}),l.addEventListener("dblclick",function(e){return x.emit("dblclick",{event:e,preset:u({},i)})});var A=0,T=J(function(e){A+=e,M.isVisible()&&b.draw(A)},function(){return C});return ee(function(){E||x.emit("ready",{preset:u({},i)})}),{element:l,canvas:v,preset:i,on:x.on,off:x.off,setPreset:function(e){var t=R("capsule",e);S.preset=!0,Object.assign(i,t);var r=i.colors.map(D);return r.every(Boolean)&&(i.colors=r),b.setPreset(u({},i)),l.dataset.mode="nebula",l.dataset.theme=i.theme||"light",c(),b.resize(),x.emit("presetchange",{preset:u({},t)}),this},setColors:function(e){var t=Array.isArray(e)?e.map(D):[];return 4!==t.length||t.some(function(e){return!e})||(S.colors=!0,i.colors=t,b.setPreset(u(u({},i),{},{colors:t}))),this},setSeed:function(e){var t=Number(e);return Number.isFinite(t)?(S.seed=!0,i.seed=t,b.setPreset(u({},i)),this):this},setSpeed:function(e){var t=Number(e);return Number.isFinite(t)?(S.speed=!0,i.speed=t,b.setPreset(u({},i)),this):this},setText:function(e){return f(d,e),this},setColorContent:function(e){return f(p,e),this},setTextRatio:function(e){var t=Number(e);return!Number.isFinite(t)||t<0||t>100||(S.textRatio=!0,o.textRatio=t,l.style.setProperty("--hj-text-width","".concat(t,"%")),l.style.setProperty("--hj-text-min-width","0")),this},setCssVars:function(e){if(!e||"object"!==h(e))return this;S.cssVars=!0,o.cssVars=u(u({},o.cssVars||{}),e);for(var t=0,r=Object.keys(e);t<r.length;t++){var i=r[t];l.style.setProperty(i,e[i])}return this},setLabel:function(e){return s="string"==typeof e&&e?e:null,c(),this},setMouseColor:function(e){return o.mouseColor=!1!==e,"function"==typeof b.setMouseColor&&b.setMouseColor(o.mouseColor),this},setSize:function(e,t){return void 0!==e&&(g(e),o.width=e),void 0!==t&&(g(t),o.height=t),P(),this},randomize:function(){return this.setSeed(100*Math.random()),this},pause:function(){return C=!0,this},resume:function(){return C=!1,this},setQuality:function(e){return o.quality=e,"function"==typeof b.setDprCap&&b.setDprCap(y(e)),this},dispose:function(){E=!0,T(),M.dispose(),_?_.disconnect():window.removeEventListener("resize",b.resize),b.dispose(),l.remove()},get textRatio(){return o.textRatio},get cssVars(){return o.cssVars},dirty:S}},e.createColorBackground=function(e){var t,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!e||"function"!=typeof e.appendChild)throw new Error("createColorBackground: host element is required");var i=u({},R("capsule",null!==(t=r.preset)&&void 0!==t?t:"初光")),o=w({quality:k.capsule.quality,renderer:k.capsule.renderer,respectReducedMotion:k.capsule.respectReducedMotion,mouseColor:!0,opacity:1,fallbackColor:!0},i,r),n=o.colors.map(D);n.every(Boolean)&&(i.colors=n),i.seed=o.seed,i.speed=o.speed;var a=getComputedStyle(e);"static"!==a.position&&""!==a.position||(e.style.position="relative"),e.style.isolation="isolate";var s=document.createElement("div");s.className="dlc-color-layer";var l=function(){s.style.setProperty("--dlc-color-opacity",String(o.opacity));var e=!1===o.fallbackColor||null==o.fallbackColor?"transparent":"string"==typeof o.fallbackColor?o.fallbackColor:i.colors[0];s.style.setProperty("--dlc-color-bg",e)};l();var c=document.createElement("canvas");c.className="dlc-color-canvas",c.setAttribute("aria-hidden","true"),s.appendChild(c),e.appendChild(s);var f,d=m(),h=o.respectReducedMotion&&"undefined"!=typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches,p=!1,v={preset:!1,seed:!1,speed:!1,colors:!1,opacity:!1,fallbackColor:!1,mouseColor:!1};if("canvas2d"!==o.renderer)try{f=new z(c,o,{dprCap:y(o.quality),mouseColor:!1!==o.mouseColor,eventTarget:e})}catch(e){f=new V(c,o),ee(function(){p||d.emit("error",{message:String(e&&e.message?e.message:e)})})}else f=new V(c,o);var g="undefined"!=typeof ResizeObserver?new ResizeObserver(function(){return f.resize()}):null;g?g.observe(e):window.addEventListener("resize",f.resize);var b=Z(s),x=0,C=J(function(e){x+=e,b.isVisible()&&f.draw(x)},function(){return h});return ee(function(){p||d.emit("ready",{preset:u({},i)})}),{element:e,layer:s,canvas:c,preset:i,on:d.on,off:d.off,setPreset:function(e){var t=R("capsule",e);v.preset=!0,Object.assign(i,t);var r=i.colors.map(D);return r.every(Boolean)&&(i.colors=r),f.setPreset(u({},i)),f.resize(),l(),d.emit("presetchange",{preset:u({},i)}),this},setColors:function(e){var t=Array.isArray(e)?e.map(D):[];return 4!==t.length||t.some(function(e){return!e})||(v.colors=!0,i.colors=t,f.setPreset(u(u({},i),{},{colors:t})),l()),this},setSeed:function(e){var t=Number(e);return Number.isFinite(t)?(v.seed=!0,i.seed=t,f.setPreset(u({},i)),this):this},setSpeed:function(e){var t=Number(e);return Number.isFinite(t)?(v.speed=!0,i.speed=t,f.setPreset(u({},i)),this):this},setFallbackColor:function(e){return v.fallbackColor=!0,o.fallbackColor=e,l(),this},setMouseColor:function(e){return v.mouseColor=!0,o.mouseColor=!1!==e,"function"==typeof f.setMouseColor&&f.setMouseColor(o.mouseColor),this},setQuality:function(e){return o.quality=e,"function"==typeof f.setDprCap&&f.setDprCap(y(e)),this},setOpacity:function(e){var t=Number(e);return Number.isFinite(t)?(v.opacity=!0,o.opacity=Math.min(1,Math.max(0,t)),s.style.setProperty("--dlc-color-opacity",String(o.opacity)),this):this},randomize:function(){return this.setSeed(100*Math.random()),this},pause:function(){return h=!0,this},resume:function(){return h=!1,this},dispose:function(){p=!0,C(),b.dispose(),g?g.disconnect():window.removeEventListener("resize",f.resize),f.dispose(),s.remove()},get opacity(){return o.opacity},get fallbackColor(){return o.fallbackColor},get mouseColor(){return o.mouseColor},dirty:v}},e.createProgressCapsule=function(e){var t,r,i,o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!e||"function"!=typeof e.appendChild)throw new Error("createProgressCapsule: container element is required");var n=u({},R("progress",null!==(t=o.preset)&&void 0!==t?t:"星火")),s=w(k.progress,n,o);if(s.min>s.max){var l=s.min;s.min=s.max,s.max=l}var c=s.colors.map(D);c.every(Boolean)&&(n.colors=c),n.edgeStyle=s.edgeStyle;var f=F,d="string"==typeof o.label&&o.label?o.label:null,p=!0===s.disabled||""===s.disabled||"true"===s.disabled,v=!0===s.readonly||""===s.readonly||"true"===s.readonly,b=p||v,x=!b&&!1!==s.draggable,C={preset:!1,colors:!1,textRatio:!1,cssVars:!1,edgeStyle:!1,value:!1},E=document.createElement("div");E.className="hj-capsule-root hj-progress-root",E.setAttribute("role","slider"),E.setAttribute("data-draggable",String(x)),p&&(E.setAttribute("aria-disabled","true"),E.classList.add("is-disabled")),v&&(E.setAttribute("aria-readonly","true"),E.classList.add("is-readonly")),b&&E.setAttribute("tabindex","-1"),E.setAttribute("aria-valuemin",String(null!==(r=s.min)&&void 0!==r?r:0)),E.setAttribute("aria-valuemax",String(null!==(i=s.max)&&void 0!==i?i:100)),E.setAttribute("aria-valuenow",String(n.initialProgress));var S=function(){var e,t;E.setAttribute("aria-label",d||(e=f.progressAria,t={brand:f.brandName,code:n.code,name:n.name},e.replace(/\{(\w+)\}/g,function(e,r){return void 0!==t[r]?t[r]:""})))};S();var P=document.createElement("canvas");P.className="hj-progress-canvas",P.setAttribute("aria-hidden","true");var _=function(e,t){if(e.innerHTML="",null!=t)if("string"!=typeof t){var r,i=a(Array.isArray(t)?t:[t]);try{for(i.s();!(r=i.n()).done;){var o=r.value;o&&"number"==typeof o.nodeType&&e.appendChild(o)}}catch(e){i.e(e)}finally{i.f()}}else e.innerHTML=t},M=document.createElement("div");M.className="hj-progress-text hj-progress-copy";var A=document.createElement("div");A.className="hj-progress-visual",_(M,o.text),_(A,o.colorContent);var T=document.createElement("div");T.className="hj-progress-value",T.setAttribute("aria-hidden","true"),T.hidden=!1===s.showValue,E.appendChild(P),E.appendChild(M),E.appendChild(A),E.appendChild(T),e.appendChild(E);var L=m(),B=s.respectReducedMotion&&"undefined"!=typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches,O=!1,N=function(){E.style.width=g(s.width),E.style.height=g(s.height);for(var e=s.cssVars||{},t=0,r=Object.keys(e);t<r.length;t++){var i=r[t];E.style.setProperty(i,e[i])}void 0!==s.textRatio&&E.style.setProperty("--hj-text-width","".concat(s.textRatio,"%"))};N();var U=new we({root:E,canvas:P,valueElement:T,preset:n,emitter:L,options:u(u({},s),{},{draggable:x}),copy:f,dirty:C}),I=null;"canvas2d"!==s.renderer&&(I=me({root:E,canvas:P,preset:n,getProgress:function(){return U.value}})),I?U.webglActive=!0:"canvas2d"!==s.renderer&&ee(function(){O||L.emit("error",{message:"WebGL2 unavailable, using Canvas2D fallback"})});var z=Z(E),j=0,G=J(function(e,t){j+=e,U.update(e,!1),z.isVisible()&&(U.draw(),I&&I.update(j))},function(){return B});return ee(function(){O||L.emit("ready",{preset:u({},n)})}),{element:E,canvas:P,preset:n,on:L.on,off:L.off,setValue:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"prop";return U.setProgress(e,t),this},getValue:function(){return U.value},setRange:function(e,t){return U.setRange(e,t),this},setPreset:function(e){var t=R("progress",e);C.preset=!0,Object.assign(n,t);var r=n.colors.map(D);return r.every(Boolean)&&(n.colors=r),U.preset=n,U.profile="tide"===t.edgeStyle?ye.tide:ye[t.id]||ye["visual-training"],U.flowTime=31*be(t.id),U.seed=be("".concat(t.id,"-reference"))*Math.PI*2,S(),I&&(I.dispose(),I=me({root:E,canvas:P,preset:n,getProgress:function(){return U.value}})),U.webglActive=Boolean(I),U.resizeCanvas(),L.emit("presetchange",{preset:u({},n)}),this},setEdgeStyle:function(e){var t=String(e||"").toLowerCase();return"flow"!==t&&"tide"!==t||(C.edgeStyle=!0,n.edgeStyle=t,U.profile="tide"===t?ye.tide:ye[n.id]||ye["visual-training"],I&&(I.dispose(),I=me({root:E,canvas:P,preset:n,getProgress:function(){return U.value}})),U.webglActive=Boolean(I),U.resizeCanvas()),this},setText:function(e){return _(M,e),this},setColorContent:function(e){return _(A,e),this},setTextRatio:function(e){var t=Number(e);return!Number.isFinite(t)||t<0||t>100||(C.textRatio=!0,s.textRatio=t,E.style.setProperty("--hj-text-width","".concat(t,"%"))),this},setCssVars:function(e){if(!e||"object"!==h(e))return this;C.cssVars=!0,s.cssVars=u(u({},s.cssVars||{}),e);for(var t=0,r=Object.keys(e);t<r.length;t++){var i=r[t];E.style.setProperty(i,e[i])}return this},setLabel:function(e){return d="string"==typeof e&&e?e:null,S(),this},setValueSuffix:function(e){return U.setValueSuffix(e),this},setShowValue:function(e){return U.setShowValue(e),this},setColors:function(e){var t=Array.isArray(e)?e.map(D):[];return 4!==t.length||t.some(function(e){return!e})||(C.colors=!0,U.setColors(t),I&&I.setColors(t),U.resizeCanvas()),this},setSize:function(e,t){return void 0!==e&&(g(e),s.width=e),void 0!==t&&(g(t),s.height=t),N(),U.resizeCanvas(),this},randomize:function(){return U.randomize(),this},pause:function(){return B=!0,this},resume:function(){return B=!1,this},setQuality:function(e){return s.quality=e,U.dprCap=y(e),U.resizeCanvas(),this},dispose:function(){O=!0,G(),z.dispose(),I&&I.dispose(),U.dispose(),E.remove()},get textRatio(){return s.textRatio},get cssVars(){return s.cssVars},dirty:C}},e.dprCapFor=y,e.getPreset=R,e.hexToRgb01=O,e.hexToRgba=N,e.normalizeColor=D,e.parseSize=g,e.pauseAll=function(){H=!0},e.resumeAll=function(){H=!1},e.validateColors=function(e){return Array.isArray(e)&&4===e.length&&e.every(function(e){return null!==D(e)})}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).CosmicCapsules={})}(this,function(e){"use strict";function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,i=Array(t);r<t;r++)i[r]=e[r];return i}function r(e,t,r){if("function"==typeof e?e===t:e.has(t))return arguments.length<3?t:r;throw new TypeError("Private element is not present on this object")}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){(function(e,t){if(t.has(e))throw new TypeError("Cannot initialize the same private elements twice on an object")})(e,t),t.add(e)}function n(e,t,r){return t&&function(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,d(i.key),i)}}(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function a(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=p(e))||t){r&&(e=r);var i=0,o=function(){};return{s:o,n:function(){return i>=e.length?{done:!0}:{done:!1,value:e[i++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var n,a=!0,s=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return a=e.done,e},e:function(e){s=!0,n=e},f:function(){try{a||null==r.return||r.return()}finally{if(s)throw n}}}}function s(e,t,r){return(t=d(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,i)}return r}function u(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?l(Object(r),!0).forEach(function(t){s(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function c(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var i,o,n,a,s=[],l=!0,u=!1;try{if(n=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;l=!1}else for(;!(l=(i=n.call(r)).done)&&(s.push(i.value),s.length!==t);l=!0);}catch(e){u=!0,o=e}finally{try{if(!l&&null!=r.return&&(a=r.return(),Object(a)!==a))return}finally{if(u)throw o}}return s}}(e,t)||p(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function f(e){return function(e){if(Array.isArray(e))return t(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||p(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var i=r.call(e,t);if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}function h(e){return h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},h(e)}function p(e,r){if(e){if("string"==typeof e)return t(e,r);var i={}.toString.call(e).slice(8,-1);return"Object"===i&&e.constructor&&(i=e.constructor.name),"Map"===i||"Set"===i?Array.from(e):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?t(e,r):void 0}}function m(){var e=Object.create(null);return{on:function(t,r){return e[t]||(e[t]=[]),e[t].push(r),function(){var i=e[t];if(i){var o=i.indexOf(r);-1!==o&&i.splice(o,1)}}},off:function(t,r){var i=e[t];if(!i)return!1;var o=i.indexOf(r);return-1!==o&&(i.splice(o,1),!0)},emit:function(t){var r=e[t];if(r){for(var i=arguments.length,o=new Array(i>1?i-1:0),n=1;n<i;n++)o[n-1]=arguments[n];var s,l=a(r.slice());try{for(l.s();!(s=l.n()).done;){s.value.apply(void 0,o)}}catch(e){l.e(e)}finally{l.f()}}}}}var v=/^[\d.]+(?:px|%|vw|vh|vmin|vmax|em|rem)$/;function g(e){if("number"==typeof e){if(!Number.isFinite(e)||e<0)throw new Error("Invalid size: ".concat(e));return"".concat(e,"px")}if("string"!=typeof e)throw new Error("Invalid size: ".concat(String(e)));var t=e.trim();if(!t)throw new Error("Invalid size: empty string");if(/^\d+(?:\.\d+)?$/.test(t))return"".concat(t,"px");if(!v.test(t))throw new Error('Invalid size or unsupported unit: "'.concat(e,'" (use px, %, vw, vh, vmin, vmax, em, rem)'));return t}var b={low:{dpr:1},medium:{dpr:1.5},high:{dpr:2}};function y(e){return"auto"===e?(t="undefined"!=typeof navigator?navigator:null,r=t&&"number"==typeof t.deviceMemory?t.deviceMemory:8,i=t&&"number"==typeof t.hardwareConcurrency?t.hardwareConcurrency:8,r<=4||i<=4?1.5:2):(b[e]||b.medium).dpr;var t,r,i}function w(e,t,r){var i=function(e){for(var t={},r=0,i=Object.keys(e);r<i.length;r++){var o=i[r];void 0!==e[o]&&(t[o]=e[o])}return t},o=i(t&&"object"===h(t)?t:{}),n=i(r&&"object"===h(r)?r:{});return u(u(u({},e),o),n)}var x=["#EAF6FF","#8FD0FF","#3B87F6","#6B58E9"],C=["#EDF2FF","#2F58D5","#1B2040","#E07A43"],E=["#F2EEFF","#B99AF1","#8F74DB","#D7D85C"],S=["#F5F6F8","#B9C0CC","#7F8793","#4A4F59"],P=["#FFF0E6","#F6C26B","#F98A64","#E86D74"],_=[{id:"original",code:"NC-01",name:"初光",group:"warm",seed:1.7,speed:.5,colors:f(["#FFF3EA","#F5B27A","#F67BC6","#A978E8"])},{id:"ocean",code:"NC-02",name:"沧溟",group:"cold",seed:8.2,speed:.48,colors:f(x)},{id:"klein",code:"NC-03",name:"玄夜",group:"cold",seed:14.1,speed:.49,colors:f(C)},{id:"ultraviolet",code:"NC-04",name:"紫霄",group:"cold",seed:23.4,speed:.47,colors:f(E)},{id:"chrome",code:"NC-05",name:"银汉",group:"cold",seed:37.8,speed:.42,colors:f(S)},{id:"plus",code:"NC-06",name:"熔金",group:"warm",seed:51.3,speed:.5,colors:f(P)}],M=[{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"]},{id:"agent-migration",code:"NC-11",name:"迁流",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"]},{id:"tide",code:"NC-13",name:"汐潮",subtitle:"MOON PULL / COAST",group:"progress",initialProgress:30,edgeStyle:"tide",colors:["#0A2239","#2E9BFF","#7FE3FF","#EAF9FF"]}],A=_,T=[].concat(f(_),f(M));function R(e,t){var r="capsule"===e?_:"progress"===e?M:null;if(!r)throw new Error("Unknown preset kind: ".concat(e,' (use "capsule" or "progress")'));for(var i=String(t).trim().toLowerCase(),o=null,n=0;n<r.length;n+=1)if(r[n].name.toLowerCase()===i){o=r[n];break}if(!o)throw new Error("Unknown ".concat(e," preset: ").concat(t));return o}var k={capsule:{width:"100%",height:160,quality:"auto",renderer:"auto",respectReducedMotion:!0,mouseColor:!0,textRatio:39},progress:{width:454,height:104,min:0,max:100,draggable:!0,disabled:!1,readonly:!1,valueSuffix:"%",edgeStyle:"flow",quality:"auto",renderer:"auto",textRatio:54,showValue:!0,respectReducedMotion:!0}},F={brandName:"画境观屿",valueSuffix:"%",progressAria:"{brand} {code} 加载进度",capsuleAria:"打开 {name} 沉浸预览"},L={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",gold:"#ffd700",goldenrod:"#daa520",gray:"#808080",green:"#008000",greenyellow:"#adff2f",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavender:"#e6e6fa",lavenderblush:"#fff0f5",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgreen:"#90ee90",lightgrey:"#d3d3d3",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370db",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#db7093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"};function B(e){return Math.min(255,Math.max(0,Math.round(e)))}function D(e){if("string"!=typeof e)return null;var t=e.trim();if(!t)return null;var r=t.toLowerCase();if(L[r])return L[r];if(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(t)){var i=t.slice(1).toLowerCase();return 3===i.length?"#".concat(i.split("").map(function(e){return e+e}).join("")):"#".concat(i)}var o=t.match(/^rgba?\((.*)\)$/i);return o?function(e){var t=e.split(/[,\s/]+/).filter(Boolean);if(t.length<3)return null;var r=function(e){if("string"!=typeof e||!e)return null;if("%"===e.charAt(e.length-1))return B(parseFloat(e)/100*255);var t=Number(e);return Number.isFinite(t)?B(t):null},i=r(t[0]),o=r(t[1]),n=r(t[2]);if(null===i||null===o||null===n)return null;var a=function(e){var t=e.toString(16);return 1===t.length?"0".concat(t):t};return"#".concat(a(i)).concat(a(o)).concat(a(n))}(o[1]):null}function O(e){var t=D(e);if(!t)return[0,0,0];var r=Number.parseInt(t.slice(1),16);return[(r>>16&255)/255,(r>>8&255)/255,(255&r)/255]}function N(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,r=D(e);if(!r)return"rgba(0, 0, 0, 0)";var i=Number.parseInt(r.slice(1),16),o=i>>8&255,n=255&i;return"rgba(".concat(i>>16&255,", ").concat(o,", ").concat(n,", ").concat(t,")")}function U(e,t,r){var i=e.createShader(t);if(e.shaderSource(i,r),e.compileShader(i),!e.getShaderParameter(i,e.COMPILE_STATUS)){var o=e.getShaderInfoLog(i)||"Unknown shader compile error";throw e.deleteShader(i),new Error(o)}return i}var I=new WeakSet,z=function(){return n(function e(t,n){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(i(this,e),o(this,I),this.canvas=t,this.preset=u({},n),this.options=u({dprCap:1.75,mouseColor:!0},a),this.gl=t.getContext("webgl2",{alpha:!1,antialias:!1,depth:!1,powerPreference:"high-performance",preserveDrawingBuffer:!1}),!this.gl)throw new Error("WebGL2 is not available");this.program=function(e){var t=U(e,e.VERTEX_SHADER,"#version 300 es\nin vec2 a_position;\nout vec2 v_uv;\nvoid main() {\n  v_uv = a_position * 0.5 + 0.5;\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}"),r=U(e,e.FRAGMENT_SHADER,"#version 300 es\nprecision highp float;\n\nin vec2 v_uv;\nout vec4 outColor;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_seed;\nuniform float u_motion;\nuniform vec2 u_pointer;\nuniform vec3 u_colorA;\nuniform vec3 u_colorB;\nuniform vec3 u_colorC;\nuniform vec3 u_colorD;\n\nfloat hash21(vec2 p) {\n  p = fract(p * vec2(123.34, 456.21));\n  p += dot(p, p + 45.32 + u_seed);\n  return fract(p.x * p.y);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  f = f * f * (3.0 - 2.0 * f);\n  float a = hash21(i);\n  float b = hash21(i + vec2(1.0, 0.0));\n  float c = hash21(i + vec2(0.0, 1.0));\n  float d = hash21(i + vec2(1.0, 1.0));\n  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);\n}\n\nfloat fbm(vec2 p) {\n  float value = 0.0;\n  float amplitude = 0.52;\n  mat2 rotation = mat2(0.80, 0.60, -0.60, 0.80);\n  for (int i = 0; i < 6; i++) {\n    value += amplitude * noise(p);\n    p = rotation * p * 2.03 + 17.7;\n    amplitude *= 0.5;\n  }\n  return value;\n}\n\nfloat gaussian(float value, float center, float width) {\n  return exp(-pow(value - center, 2.0) / max(width, 0.0001));\n}\n\nvec3 palette(float t) {\n  t = clamp(t, 0.0, 1.0);\n  vec3 shadow = mix(u_colorA, u_colorB, smoothstep(0.06, 0.62, t));\n  vec3 body = mix(u_colorB, u_colorC, smoothstep(0.30, 0.82, t));\n  vec3 highlight = mix(u_colorC, u_colorD, smoothstep(0.74, 1.0, t));\n  vec3 restrained = mix(shadow, body, smoothstep(0.26, 0.72, t));\n  return mix(restrained, highlight, smoothstep(0.78, 0.97, t));\n}\n\nvec3 renderNebula(vec2 uv, vec2 p, vec2 pointer, float distanceToPointer, float t) {\n  vec2 delta = p - pointer;\n  float influence = exp(-distanceToPointer * 4.6) * u_motion;\n  float angle = influence * 1.7;\n  mat2 swirl = mat2(cos(angle), -sin(angle), sin(angle), cos(angle));\n  p = pointer + swirl * delta;\n  p += normalize(delta + 0.0001) * influence * 0.08;\n\n  vec2 drift = vec2(t * 0.22, -t * 0.13);\n  vec2 q = vec2(\n    fbm(p * 1.35 + drift + u_seed),\n    fbm(p * 1.35 + vec2(5.2, 1.3) - drift * 0.85)\n  );\n  vec2 r = vec2(\n    fbm(p * 2.0 + 3.6 * q + vec2(1.7, 9.2) + t * 0.10),\n    fbm(p * 2.0 + 3.0 * q + vec2(8.3, 2.8) - t * 0.085)\n  );\n\n  float cloud = fbm(p * 1.7 + 4.2 * r);\n  float veins = fbm(p * 4.0 - 2.0 * q + t * 0.065);\n  float nebula = smoothstep(0.18, 0.91, cloud * 0.9 + veins * 0.22);\n\n  vec3 color = palette(nebula);\n  color += u_colorD * pow(max(cloud - 0.63, 0.0), 2.0) * 1.05;\n  color *= 0.78 + 0.34 * smoothstep(0.15, 0.9, veins);\n\n  vec2 starGrid = floor((uv + vec2(u_seed * 0.013, 0.0)) * vec2(132.0, 58.0));\n  vec2 starCell = fract(uv * vec2(132.0, 58.0)) - 0.5;\n  float starRandom = hash21(starGrid);\n  float starShape = smoothstep(0.075, 0.0, length(starCell));\n  float starMask = step(0.989, starRandom) * starShape;\n  float twinkle = 0.35 + 0.65 * sin(t * (1.0 + starRandom * 2.4) + starRandom * 40.0) * 0.5 + 0.5;\n  color += starMask * twinkle * mix(u_colorC, u_colorD, starRandom) * 1.05;\n\n  float pointerGlow = exp(-distanceToPointer * 7.0) * u_motion;\n  color += u_colorD * pointerGlow * 0.28;\n  return color;\n}\n\nvoid main() {\n  vec2 uv = v_uv;\n  vec2 p = uv - 0.5;\n  p.x *= u_resolution.x / max(u_resolution.y, 1.0);\n\n  vec2 pointer = u_pointer - 0.5;\n  pointer.x *= u_resolution.x / max(u_resolution.y, 1.0);\n  float distanceToPointer = length(p - pointer);\n\n  vec3 color = renderNebula(uv, p, pointer, distanceToPointer, u_time);\n  float vignette = smoothstep(0.94, 0.18, length((uv - 0.5) * vec2(1.0, 1.35)));\n  color *= 0.70 + vignette * 0.42;\n  color = pow(max(color, vec3(0.0)), vec3(0.88));\n\n  outColor = vec4(color, 1.0);\n}"),i=e.createProgram();if(e.attachShader(i,t),e.attachShader(i,r),e.linkProgram(i),e.deleteShader(t),e.deleteShader(r),!e.getProgramParameter(i,e.LINK_STATUS)){var o=e.getProgramInfoLog(i)||"Unknown program link error";throw e.deleteProgram(i),new Error(o)}return i}(this.gl),this.locations=r(I,this,j).call(this),this.pointer=[.72,.45],this.pointerTarget=f(this.pointer),this.motion=0,this.motionTarget=0,this.timeOffset=.73*n.seed,this.visible=!0,this.disposed=!1,r(I,this,G).call(this),r(I,this,X).call(this),this.resize()},[{key:"setPreset",value:function(e){this.preset=u({},e),this.timeOffset=.73*e.seed}},{key:"setDprCap",value:function(e){this.options.dprCap=e,this.resize()}},{key:"setMouseColor",value:function(e){if(this.options.mouseColor=!1!==e,this.options.mouseColor)return this.onPointerMove||r(I,this,X).call(this),this;if(this.onPointerMove){var t=this.eventTarget;t.removeEventListener("pointermove",this.onPointerMove),t.removeEventListener("pointerdown",this.onPointerMove),t.removeEventListener("pointerleave",this.onPointerLeave),this.onPointerMove=null,this.onPointerLeave=null}return this.motionTarget=0,this}},{key:"randomize",value:function(){this.preset.seed=100*Math.random(),this.timeOffset=40*Math.random()}},{key:"resize",value:function(){var e=Math.min(window.devicePixelRatio||1,this.options.dprCap),t=this.canvas.getBoundingClientRect(),r=Math.max(2,Math.round(t.width*e)),i=Math.max(2,Math.round(t.height*e));this.canvas.width===r&&this.canvas.height===i||(this.canvas.width=r,this.canvas.height=i,this.gl.viewport(0,0,r,i))}},{key:"draw",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(!this.disposed&&this.visible){this.resize();var r=this.gl;this.pointer[0]+=.08*(this.pointerTarget[0]-this.pointer[0]),this.pointer[1]+=.08*(this.pointerTarget[1]-this.pointer[1]),this.motion+=.07*(this.motionTarget-this.motion),r.useProgram(this.program),r.bindBuffer(r.ARRAY_BUFFER,this.buffer),r.enableVertexAttribArray(this.locations.position),r.vertexAttribPointer(this.locations.position,2,r.FLOAT,!1,0,0);var i=this.preset.colors.map(O);r.uniform2f(this.locations.resolution,this.canvas.width,this.canvas.height),r.uniform1f(this.locations.time,this.timeOffset+(t?0:e*this.preset.speed)),r.uniform1f(this.locations.seed,this.preset.seed),r.uniform1f(this.locations.motion,this.motion),r.uniform2f(this.locations.pointer,this.pointer[0],this.pointer[1]),r.uniform3fv(this.locations.colorA,i[0]),r.uniform3fv(this.locations.colorB,i[1]),r.uniform3fv(this.locations.colorC,i[2]),r.uniform3fv(this.locations.colorD,i[3]),r.drawArrays(r.TRIANGLES,0,3)}}},{key:"dispose",value:function(){this.disposed=!0;var e=this.eventTarget||this.canvas;e.removeEventListener("pointermove",this.onPointerMove),e.removeEventListener("pointerdown",this.onPointerMove),e.removeEventListener("pointerleave",this.onPointerLeave),this.gl.deleteBuffer(this.buffer),this.gl.deleteProgram(this.program);var t=this.gl.getExtension("WEBGL_lose_context");t&&t.loseContext()}}])}();function j(){var e=this,t=this.gl,r=function(r){return t.getUniformLocation(e.program,r)};return{position:t.getAttribLocation(this.program,"a_position"),resolution:r("u_resolution"),time:r("u_time"),seed:r("u_seed"),motion:r("u_motion"),pointer:r("u_pointer"),colorA:r("u_colorA"),colorB:r("u_colorB"),colorC:r("u_colorC"),colorD:r("u_colorD")}}function G(){var e=this.gl,t=new Float32Array([-1,-1,3,-1,-1,3]);this.buffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,this.buffer),e.bufferData(e.ARRAY_BUFFER,t,e.STATIC_DRAW)}function X(){var e=this;!1!==this.options.mouseColor&&(this.eventTarget=this.options.eventTarget||this.canvas.parentElement||this.canvas,this.onPointerMove=function(t){var r=e.canvas.getBoundingClientRect();e.pointerTarget[0]=(t.clientX-r.left)/Math.max(r.width,1),e.pointerTarget[1]=1-(t.clientY-r.top)/Math.max(r.height,1),e.motionTarget=1},this.onPointerLeave=function(){e.motionTarget=0},this.eventTarget.addEventListener("pointermove",this.onPointerMove,{passive:!0}),this.eventTarget.addEventListener("pointerdown",this.onPointerMove,{passive:!0}),this.eventTarget.addEventListener("pointerleave",this.onPointerLeave,{passive:!0}))}function W(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,r=c(O(e).map(function(e){return Math.round(255*e)}),3),i=r[0],o=r[1],n=r[2];return"rgba(".concat(i,", ").concat(o,", ").concat(n,", ").concat(t,")")}var V=function(){return n(function e(t,r){i(this,e),this.canvas=t,this.preset=r,this.context=t.getContext("2d"),this.visible=!0,this.timePhase=0},[{key:"resize",value:function(){var e=this.canvas.getBoundingClientRect(),t=Math.min(window.devicePixelRatio||1,1.5),r=Math.max(2,Math.round(e.width*t)),i=Math.max(2,Math.round(e.height*t));this.canvas.width===r&&this.canvas.height===i||(this.canvas.width=r,this.canvas.height=i)}},{key:"drawNebula",value:function(e){var t=this.context,r=this.canvas,i=r.width,o=r.height,n=(e+this.timePhase)*(this.preset.speed||1),a=.7*(this.preset.seed||0),s=t.createLinearGradient(0,0,i,o);s.addColorStop(0,this.preset.colors[0]),s.addColorStop(.38,this.preset.colors[1]),s.addColorStop(.72,this.preset.colors[2]),s.addColorStop(1,this.preset.colors[3]),t.fillStyle=s,t.fillRect(0,0,i,o),t.globalCompositeOperation="screen";for(var l=0;l<6;l+=1){var u=(.5+.45*Math.sin(.32*n+1.7*l+a))*i,c=(.5+.4*Math.cos(.25*n+l+a))*o,f=Math.max(i,o)*(.08+l%3*.04),d=t.createRadialGradient(u,c,0,u,c,f);d.addColorStop(0,W(this.preset.colors[(l+1)%4],.24)),d.addColorStop(1,W(this.preset.colors[l%4],0)),t.fillStyle=d,t.fillRect(u-f,c-f,2*f,2*f)}t.globalCompositeOperation="source-over"}},{key:"draw",value:function(e){this.visible&&(this.resize(),this.drawNebula(e))}},{key:"setPreset",value:function(e){this.preset=e}},{key:"randomize",value:function(){this.preset&&(this.preset.seed=100*Math.random(),this.timePhase=Math.random()*Math.PI*2)}},{key:"setMouseColor",value:function(){}},{key:"dispose",value:function(){}}])}(),q=[],Y=!1,H=!1,K=0,$=0;function Q(e){if(Y){var t=$?Math.min((e-$)/1e3,.05):0;if($=e,K=requestAnimationFrame(Q),!H){var r,i=a(q.slice());try{for(i.s();!(r=i.n()).done;){var o=r.value;try{o.isPaused()||o.onFrame(t,e)}catch(e){console.warn("[dlc-ui] frame error:",e)}}}catch(e){i.e(e)}finally{i.f()}}0===q.length&&(cancelAnimationFrame(K),Y=!1,K=0)}}function J(e,t){var r={onFrame:e,isPaused:t};return q.push(r),Y||(Y=!0,$=0,K=requestAnimationFrame(Q)),function(){var e=q.indexOf(r);-1!==e&&q.splice(e,1),0===q.length&&K&&(cancelAnimationFrame(K),Y=!1,K=0)}}function Z(e){var t=!0,r="undefined"==typeof document||!document.hidden,i=!1,o=null;"undefined"!=typeof IntersectionObserver&&(o=new IntersectionObserver(function(e){t=e.some(function(e){return e.isIntersecting})},{rootMargin:"180px"})).observe(e);var n=function(){r="undefined"!=typeof document&&!document.hidden};return"undefined"!=typeof document&&document.addEventListener("visibilitychange",n),{isVisible:function(){return t&&r},dispose:function(){i||(i=!0,o&&o.disconnect(),"undefined"!=typeof document&&document.removeEventListener("visibilitychange",n))}}}function ee(e){"function"==typeof queueMicrotask?queueMicrotask(e):"undefined"!=typeof Promise&&"function"==typeof Promise.resolve?Promise.resolve().then(e):setTimeout(e,0)}var te=240,re={"model-training":{seed:.37,broad:.58,middle:.25,detail:.13,lobe:.24},"agent-migration":{seed:1.71,broad:.72,middle:.1,detail:.03,lobe:.18},"visual-training":{seed:2.83,broad:.66,middle:.16,detail:.06,lobe:.23},tide:{seed:4.12,broad:.82,middle:.07,detail:.02,lobe:.3,warp:.5}},ie=Object.create(null);function oe(e,t,r){var i=(e-t)/Math.max(r,.001);return Math.exp(-i*i)}function ne(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"flow",r="".concat(e,":").concat(t);return ie[r]||(ie[r]=function(e){for(var t="tide"===(arguments.length>1&&void 0!==arguments[1]?arguments[1]:"flow")?re.tide:re[e]||re["visual-training"],r=new Uint8Array(19200),i=0;i<te;i+=1){var o=i/te*Math.PI*2;t.warp&&(o+=t.warp*Math.sin(2*o));for(var n=.28+.13*Math.sin(.53*o+t.seed),a=.7+.12*Math.cos(.47*o+1.7*t.seed),s=0;s<80;s+=1){var l=s/Math.max(79,1),u=Math.pow(Math.max(Math.sin(Math.PI*l),0),.48),c=Math.sin(l*Math.PI*2*1.35+.58*o+t.seed)*t.broad,f=Math.sin(l*Math.PI*2*3.2-.91*o+2.1*t.seed)*t.middle,d=Math.sin(l*Math.PI*2*6.1+1.31*o+3.2*t.seed)*t.detail,h=(oe(l,n,.09)*Math.sin(1.11*o+4*t.seed)-oe(l,a,.1)*Math.cos(.97*o+3.3*t.seed))*t.lobe,p=Math.max(-1,Math.min(1,(c+f+d+h)*u));r[s*te+i]=Math.round(255*(.5*p+.5))}}return r}(e,t)),ie[r]}function ae(e){var t=Number.parseInt(e.replace("#",""),16);return[(t>>16&255)/255,(t>>8&255)/255,(255&t)/255]}var se={"model-training":0,"agent-migration":1,"visual-training":2,tide:3},le={"model-training":1.05,"agent-migration":1.04,"visual-training":1.04,tide:1.18};function ue(e,t,r){var i=e.createShader(t);if(e.shaderSource(i,r),e.compileShader(i),!e.getShaderParameter(i,e.COMPILE_STATUS)){var o=e.getShaderInfoLog(i)||"Unknown shader compile error";throw e.deleteShader(i),new Error(o)}return i}var ce=function(){return n(function e(t,r){var o;i(this,e);var n=t.getContext("webgl2",{alpha:!1,antialias:!0,premultipliedAlpha:!1,powerPreference:"high-performance"});if(!n)throw new Error("WebGL2 unavailable");this.canvas=t,this.gl=n,this.program=function(e){var t=ue(e,e.VERTEX_SHADER,"#version 300 es\nin vec2 a_position;\nout vec2 v_uv;\nvoid main() {\n  v_uv = a_position * 0.5 + 0.5;\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}"),r=ue(e,e.FRAGMENT_SHADER,"#version 300 es\nprecision highp float;\n\nin vec2 v_uv;\nout vec4 outColor;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_progress;\nuniform float u_seed;\nuniform float u_profile;\nuniform sampler2D u_motion;\nuniform sampler2D u_effect;\nuniform float u_hasEffect;\nuniform float u_effectFrames;\nuniform float u_motionDuration;\nuniform float u_motionScale;\nuniform vec3 u_dark;\nuniform vec3 u_accentA;\nuniform vec3 u_accentB;\nuniform vec3 u_glow;\n\nfloat hash21(vec2 p) {\n  p = fract(p * vec2(123.34, 456.21));\n  p += dot(p, p + 45.32 + u_seed * 11.7);\n  return fract(p.x * p.y);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  f = f * f * (3.0 - 2.0 * f);\n  float a = hash21(i);\n  float b = hash21(i + vec2(1.0, 0.0));\n  float c = hash21(i + vec2(0.0, 1.0));\n  float d = hash21(i + vec2(1.0, 1.0));\n  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);\n}\n\nfloat fbm(vec2 p) {\n  float value = 0.0;\n  float amplitude = 0.55;\n  mat2 rotation = mat2(0.82, 0.57, -0.57, 0.82);\n  for (int i = 0; i < 6; i++) {\n    value += noise(p) * amplitude;\n    p = rotation * p * 2.02 + 13.7;\n    amplitude *= 0.48;\n  }\n  return value;\n}\n\nfloat gaussian(float value, float center, float width) {\n  float delta = (value - center) / max(width, 0.0001);\n  return exp(-delta * delta);\n}\n\nfloat profileMix(float model, float agent, float visual) {\n  if (u_profile < 0.5) return model;\n  if (u_profile < 1.5) return agent;\n  return visual;\n}\n\nfloat motionSample(float y, float t) {\n  float phase = fract(t / max(u_motionDuration, 0.001));\n  float captured = texture(u_motion, vec2(phase, 1.0 - clamp(y, 0.0, 1.0))).r;\n  return (captured * 2.0 - 1.0) * u_motionScale;\n}\n\nfloat edgeDisplacement(float y, float t) {\n  return motionSample(y, t);\n}\n\nfloat flowDisplacement(float y, float t) {\n  return (\n    motionSample(y - 0.024, t) * 0.08 +\n    motionSample(y - 0.012, t) * 0.18 +\n    motionSample(y, t) * 0.48 +\n    motionSample(y + 0.012, t) * 0.18 +\n    motionSample(y + 0.024, t) * 0.08\n  );\n}\n\nfloat ellipseRing(vec2 p, float radius, float width) {\n  return gaussian(length(p), radius, width);\n}\n\nvoid main() {\n  vec2 uv = v_uv;\n  float t = u_time;\n  float edge = u_progress + edgeDisplacement(uv.y, t);\n  float flowEdge = u_progress + flowDisplacement(uv.y, t);\n  float d = uv.x - edge;\n  float fd = uv.x - flowEdge;\n\n  vec3 rightBase = vec3(0.125, 0.129, 0.145);\n  vec3 color = rightBase;\n\n  float leftMask = 1.0 - smoothstep(-0.001, 0.002, d);\n  color = mix(color, u_dark, leftMask * profileMix(0.96, 0.92, 0.96));\n\n  vec2 flowP = vec2((fd + 0.10) * 6.2, uv.y * 1.95);\n  float flowA = fbm(flowP + vec2(-t * 0.22, t * 0.27) + u_seed * 1.7);\n  float flowB = fbm(flowP * 1.52 + vec2(t * 0.28, -t * 0.36) + 8.2 + u_seed);\n  float flowC = fbm(flowP * 2.25 + vec2(-t * 0.41, t * 0.46) + 19.0);\n\n  float farCenter = profileMix(-0.060, -0.079, -0.045) + (flowA - 0.5) * profileMix(0.018, 0.022, 0.014);\n  float midCenter = profileMix(-0.039, -0.052, -0.030) + (flowB - 0.5) * profileMix(0.013, 0.016, 0.010);\n  float hotCenter = profileMix(-0.026, -0.029, -0.023) + (flowC - 0.5) * 0.010;\n\n  float farBand = gaussian(fd, farCenter, profileMix(0.035, 0.049, 0.030));\n  float midBand = gaussian(fd, midCenter, profileMix(0.026, 0.034, 0.026));\n  float hotBand = gaussian(fd, hotCenter, profileMix(0.023, 0.027, 0.026));\n  float darkTrough = gaussian(fd, profileMix(-0.050, -0.058, -0.044) + (flowB - 0.5) * 0.010, profileMix(0.020, 0.025, 0.021));\n\n  float ringY = 0.47 + sin(t * 0.58 + u_seed * 2.4) * 0.12;\n  vec2 ringP = vec2((fd + 0.086) / 0.078, (uv.y - ringY) / 0.25);\n  ringP += vec2((flowB - 0.5) * 0.08, (flowA - 0.5) * 0.06);\n  float ringTexture = fbm(ringP * 2.15 + vec2(t * 0.18, -t * 0.14) + u_seed * 1.9);\n  float ring = ellipseRing(ringP, 0.66, 0.32) * (0.30 + 0.64 * ringTexture);\n  float ringCore = gaussian(length(ringP), 0.25, 0.25);\n  float ringPulse = smoothstep(0.58, 0.90, 0.5 + 0.5 * sin(t * 0.82 + u_seed * 4.1));\n  float modelRing = ring * ringPulse * (1.0 - step(0.5, u_profile));\n  float visualRing = ring * 0.16 * step(1.5, u_profile) * ringPulse;\n\n  float cloudGate = leftMask * smoothstep(-0.30, -0.008, fd);\n  float textureA = smoothstep(0.24, 0.92, flowA * 0.72 + flowB * 0.42);\n  float textureB = smoothstep(0.28, 0.94, flowB * 0.68 + flowC * 0.38);\n\n  vec3 hotColor = u_accentB;\n  color += u_accentA * farBand * cloudGate * (0.07 + textureA * profileMix(0.42, 0.24, 0.40));\n  color += u_accentB * midBand * cloudGate * (0.15 + textureB * profileMix(0.70, 0.46, 0.68));\n  color += hotColor * hotBand * cloudGate * profileMix(0.88, 0.62, 0.84);\n  float modelMask = 1.0 - step(0.5, u_profile);\n  color += u_accentA * (modelRing + visualRing) * cloudGate * profileMix(0.54, 0.0, 0.34);\n  color *= 1.0 - darkTrough * profileMix(0.44, 0.24, 0.24) * cloudGate;\n  color *= 1.0 - ringCore * modelMask * ringPulse * 0.44 * cloudGate;\n\n  float broadHalo = exp(-abs(d) * 96.0);\n  float innerHalo = exp(-abs(d) * 176.0);\n  float colorCore = exp(-abs(d) * 360.0);\n  float sharpCore = exp(-abs(d) * 760.0);\n  float leftGate = 1.0 - smoothstep(-0.003, 0.005, d);\n\n  color += u_accentA * broadHalo * leftGate * profileMix(0.09, 0.04, 0.06);\n  color += hotColor * innerHalo * leftGate * profileMix(0.76, 0.72, 0.78);\n  color += u_glow * colorCore * profileMix(0.72, 0.34, 0.24);\n\n  float whiteStrength = profileMix(0.10, 0.0, 0.0);\n  color += vec3(1.0, 0.99, 0.91) * sharpCore * whiteStrength;\n\n  float rightCut = smoothstep(0.001, 0.006, d);\n  color = mix(color, rightBase, rightCut);\n\n  float effectX = (d * 1257.0 + 260.0) / 320.0;\n  float atlasPhase = fract(t / 12.0) * u_effectFrames;\n  float atlasFrameA = floor(atlasPhase);\n  float atlasFrameB = mod(atlasFrameA + 1.0, u_effectFrames);\n  float atlasMix = smoothstep(0.0, 1.0, fract(atlasPhase));\n  float atlasXA = (atlasFrameA + clamp(effectX, 0.0, 1.0)) / u_effectFrames;\n  float atlasXB = (atlasFrameB + clamp(effectX, 0.0, 1.0)) / u_effectFrames;\n  vec3 referenceA = texture(u_effect, vec2(atlasXA, uv.y)).rgb;\n  vec3 referenceB = texture(u_effect, vec2(atlasXB, uv.y)).rgb;\n  vec3 referenceColor = mix(referenceA, referenceB, atlasMix);\n  float stripMask = smoothstep(0.0, 0.018, effectX) * (1.0 - smoothstep(0.982, 1.0, effectX));\n  float referenceLeft = 1.0 - smoothstep(-0.026, -0.012, d);\n  // 参考图集只提供亮度结构，颜色始终由用户 colors（u_dark / u_accentA /\n  // u_accentB / u_glow）决定：这样 setColors / colors 属性在 WebGL 路径下\n  // 真实生效，改色有可见反馈，而不是被图集整体覆盖。\n  float referenceLuma = dot(referenceColor, vec3(0.299, 0.587, 0.114));\n  vec3 tintedColor = color * (0.42 + 0.86 * referenceLuma);\n  color = mix(color, tintedColor, stripMask * referenceLeft * u_hasEffect);\n\n  outColor = vec4(clamp(color, 0.0, 1.0), 1.0);\n}"),i=e.createProgram();if(e.attachShader(i,t),e.attachShader(i,r),e.linkProgram(i),e.deleteShader(t),e.deleteShader(r),!e.getProgramParameter(i,e.LINK_STATUS)){var o=e.getProgramInfoLog(i)||"Unknown shader link error";throw e.deleteProgram(i),new Error(o)}return i}(n),this.profile="tide"===r.edgeStyle?3:null!==(o=se[r.id])&&void 0!==o?o:2,this.seed=13.7*function(e){var t,r=2166136261,i=a(e);try{for(i.s();!(t=i.n()).done;)r^=t.value.charCodeAt(0),r=Math.imul(r,16777619)}catch(e){i.e(e)}finally{i.f()}return(r>>>0)/4294967295}("".concat(r.id,"-shader"))+1,this.colors=r.colors.map(ae),this.motionData=ne(r.id,r.edgeStyle);var s="tide"===r.edgeStyle?le.tide:le[r.id]||1.04;this.motionScale=40*s/1257,this.position=n.getAttribLocation(this.program,"a_position"),this.uniforms={resolution:n.getUniformLocation(this.program,"u_resolution"),time:n.getUniformLocation(this.program,"u_time"),progress:n.getUniformLocation(this.program,"u_progress"),seed:n.getUniformLocation(this.program,"u_seed"),profile:n.getUniformLocation(this.program,"u_profile"),motion:n.getUniformLocation(this.program,"u_motion"),effect:n.getUniformLocation(this.program,"u_effect"),hasEffect:n.getUniformLocation(this.program,"u_hasEffect"),effectFrames:n.getUniformLocation(this.program,"u_effectFrames"),motionDuration:n.getUniformLocation(this.program,"u_motionDuration"),motionScale:n.getUniformLocation(this.program,"u_motionScale"),dark:n.getUniformLocation(this.program,"u_dark"),accentA:n.getUniformLocation(this.program,"u_accentA"),accentB:n.getUniformLocation(this.program,"u_accentB"),glow:n.getUniformLocation(this.program,"u_glow")},this.buffer=n.createBuffer(),n.bindBuffer(n.ARRAY_BUFFER,this.buffer),n.bufferData(n.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),n.STATIC_DRAW),this.motionTexture=n.createTexture(),n.activeTexture(n.TEXTURE0),n.bindTexture(n.TEXTURE_2D,this.motionTexture),n.pixelStorei(n.UNPACK_ALIGNMENT,1),n.texImage2D(n.TEXTURE_2D,0,n.R8,te,80,0,n.RED,n.UNSIGNED_BYTE,this.motionData),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_MIN_FILTER,n.LINEAR),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_MAG_FILTER,n.LINEAR),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_WRAP_S,n.REPEAT),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_WRAP_T,n.CLAMP_TO_EDGE),this.effectTexture=n.createTexture(),n.activeTexture(n.TEXTURE1),n.bindTexture(n.TEXTURE_2D,this.effectTexture),n.texImage2D(n.TEXTURE_2D,0,n.RGB,1,1,0,n.RGB,n.UNSIGNED_BYTE,new Uint8Array([32,33,38])),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_MIN_FILTER,n.LINEAR),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_MAG_FILTER,n.LINEAR),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_WRAP_S,n.CLAMP_TO_EDGE),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_WRAP_T,n.CLAMP_TO_EDGE),this.effectUploaded=!1},[{key:"resize",value:function(e,t,r){var i=Math.max(1,Math.round(e*r)),o=Math.max(1,Math.round(t*r));this.canvas.width===i&&this.canvas.height===o||(this.canvas.width=i,this.canvas.height=o),this.gl.viewport(0,0,i,o)}},{key:"draw",value:function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,i=this.gl;i.useProgram(this.program),i.bindBuffer(i.ARRAY_BUFFER,this.buffer),i.enableVertexAttribArray(this.position),i.vertexAttribPointer(this.position,2,i.FLOAT,!1,0,0),i.uniform2f(this.uniforms.resolution,this.canvas.width,this.canvas.height),i.uniform1f(this.uniforms.time,e),i.uniform1f(this.uniforms.progress,t/100),i.uniform1f(this.uniforms.seed,this.seed),i.uniform1f(this.uniforms.profile,this.profile),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,this.motionTexture),i.uniform1i(this.uniforms.motion,0),i.uniform1f(this.uniforms.motionDuration,12),i.uniform1f(this.uniforms.motionScale,this.motionScale);var o=this.effectUploaded?1:0;if(!this.effectUploaded&&r&&r.complete&&r.naturalWidth>0){i.activeTexture(i.TEXTURE1),i.bindTexture(i.TEXTURE_2D,this.effectTexture),i.pixelStorei(i.UNPACK_FLIP_Y_WEBGL,!0);try{i.texImage2D(i.TEXTURE_2D,0,i.RGB,i.RGB,i.UNSIGNED_BYTE,r),this.effectUploaded=!0,o=1}catch(e){console.warn("[画境观屿] 参考纹理图集上传失败，继续使用程序化降级。",e)}i.pixelStorei(i.UNPACK_FLIP_Y_WEBGL,!1)}i.activeTexture(i.TEXTURE1),i.bindTexture(i.TEXTURE_2D,this.effectTexture),i.uniform1i(this.uniforms.effect,1),i.uniform1f(this.uniforms.hasEffect,o),i.uniform1f(this.uniforms.effectFrames,24),i.uniform3fv(this.uniforms.dark,this.colors[0]),i.uniform3fv(this.uniforms.accentA,this.colors[1]),i.uniform3fv(this.uniforms.accentB,this.colors[2]),i.uniform3fv(this.uniforms.glow,this.colors[3]),i.drawArrays(i.TRIANGLES,0,6)}},{key:"setColors",value:function(e){this.colors=e.map(ae)}},{key:"dispose",value:function(){var e=this.gl;e.deleteBuffer(this.buffer),e.deleteTexture(this.motionTexture),e.deleteTexture(this.effectTexture),e.deleteProgram(this.program);var t=e.getExtension("WEBGL_lose_context");t&&t.loseContext()}}])}();var fe=Object.create(null),de={"model-training":["#20131f","#ff3f94","#ff8a3d","#fff06a"],"agent-migration":["#111a31","#245bff","#00cfff","#5dffe6"],"visual-training":["#1f172b","#7042ff","#42f58d","#c4ff8a"],tide:["#0a2239","#2e9bff","#7fe3ff","#eaf9ff"]};function he(e,t,r,i,o,n,a){e.save(),e.translate(t,r),e.scale(1,o/i);var s=e.createRadialGradient(0,0,0,0,0,i),l=function(e){var t=Math.round(e).toString(16);return 1===t.length?"0".concat(t):t};s.addColorStop(0,"".concat(n).concat(l(255*a))),s.addColorStop(.46,"".concat(n).concat(l(.42*a*255))),s.addColorStop(1,"".concat(n,"00")),e.fillStyle=s,e.fillRect(-i,-i,2*i,2*i),e.restore()}function pe(e){return fe[e]||(fe[e]=function(e){var t=de[e]||de["visual-training"],r=document.createElement("canvas");r.width=1536,r.height=32;for(var i=r.getContext("2d"),o=0;o<24;o+=1){var n=o/24*Math.PI*2,a=64*o;i.save(),i.translate(a,0),i.fillStyle=t[0],i.fillRect(0,0,64,32),i.globalCompositeOperation="screen",he(i,35+5*Math.sin(.83*n),10+5*Math.cos(.61*n),27,18,t[1],"agent-migration"===e?.32:.42),he(i,45+4*Math.cos(.72*n),23+4*Math.sin(.54*n),22,15,t[2],.44),he(i,53+2*Math.sin(1.07*n),16+6*Math.cos(.89*n),12,13,t[3],"model-training"===e?.3:.2),i.globalCompositeOperation="source-over";var s=i.createRadialGradient(41,16,1,41,16,17);s.addColorStop(0,"rgba(5,6,11,0.64)"),s.addColorStop(.58,"rgba(6,7,12,0.26)"),s.addColorStop(1,"rgba(6,7,12,0)"),i.fillStyle=s,i.fillRect(20,0,44,32),i.restore()}var l=new Image;l.decoding="async";var u={image:l,ready:!1};return l.addEventListener("load",function(){u.ready=!0},{once:!0}),l.addEventListener("error",function(){u.ready=!1},{once:!0}),l.src=r.toDataURL("image/png"),u}(e)),fe[e]}function me(e){var t=e.root,r=e.canvas,i=e.preset,o=e.getProgress,n=document.createElement("canvas");n.className="hj-progress-canvas hj-progress-overlay",n.setAttribute("aria-hidden","true"),r.insertAdjacentElement("afterend",n);var a=function(e,t){try{return new ce(e,t)}catch(e){return console.warn("[画境观屿] 进度流体 WebGL2 不可用，使用 Canvas 2D 降级。",e),null}}(n,i);if(!a)return n.remove(),null;var s=pe(i.id);t.classList.add("has-webgl-progress");var l=function(){var e=t.getBoundingClientRect(),r=Math.max(1,e.width),i=Math.max(1,e.height),o=Math.min(window.devicePixelRatio||1,2);n.style.width="".concat(r,"px"),n.style.height="".concat(i,"px"),a.resize(r,i,o)},u=null,c=null;return"undefined"!=typeof ResizeObserver?(u=new ResizeObserver(l)).observe(t):(c=l,window.addEventListener("resize",c)),l(),{update:function(e){var t=e%12,r=o();a.draw(t,Number.isFinite(r)?r:i.initialProgress,s.ready?s.image:null)},setColors:function(e){a.setColors(e)},dispose:function(){u&&u.disconnect(),c&&window.removeEventListener("resize",c),a.dispose(),n.remove(),t.classList.remove("has-webgl-progress")}}}var ve=function(e,t,r){return Math.min(Math.max(e,t),r)},ge="undefined"!=typeof CanvasRenderingContext2D&&"filter"in CanvasRenderingContext2D.prototype;function be(e){var t,r=2166136261,i=a(e);try{for(i.s();!(t=i.n()).done;){r^=t.value.charCodeAt(0),r=Math.imul(r,16777619)}}catch(e){i.e(e)}finally{i.f()}return(r>>>0)/4294967295}var ye={"model-training":{cycles:[.98,3.05,5.45],amplitudes:[11.2,11,5.2],speeds:[.31,-.53,.78],bulgeAmplitude:8.2,timeScale:1,glowWidth:5.8,haloWidth:20,whiteAlpha:.72,whiteWidth:1.15,cloudWidth:.17,autoRange:[25,66]},"agent-migration":{cycles:[.62,1.55,2.95],amplitudes:[16,7.8,2.3],speeds:[.25,-.4,.6],bulgeAmplitude:8.4,timeScale:.82,glowWidth:6.3,haloWidth:21,whiteAlpha:.18,whiteWidth:.45,cloudWidth:.18,autoRange:[24,62]},"visual-training":{cycles:[.88,2.45,4.35],amplitudes:[12.8,10.2,4.3],speeds:[.28,-.47,.69],bulgeAmplitude:7.3,timeScale:.91,glowWidth:6,haloWidth:21,whiteAlpha:.3,whiteWidth:.55,cloudWidth:.175,autoRange:[20,75]},tide:{cycles:[.72,1.9,4.2],amplitudes:[19,6.5,1.5],speeds:[.42,-.5,.66],bulgeAmplitude:9.5,timeScale:.85,glowWidth:6.2,haloWidth:21,whiteAlpha:.5,whiteWidth:1,cloudWidth:.18,autoRange:[18,70],surge:.55}},we=function(){return n(function e(t){var r,o,n,a,s=this,l=t.root,u=t.canvas,c=t.valueElement,f=t.preset,d=t.emitter,h=t.options,p=t.copy,m=t.dirty;i(this,e),this.root=l,this.canvas=u,this.valueElement=c,this.preset=f,this.emitter=d,this.options=h,this.copy=p,this.dirty=m,this.valueSuffix=null!==(r=h.valueSuffix)&&void 0!==r?r:p.valueSuffix,this.profile="tide"===f.edgeStyle?ye.tide:ye[f.id]||ye["visual-training"],this.min=null!==(o=h.min)&&void 0!==o?o:0,this.max=null!==(n=h.max)&&void 0!==n?n:100,this.dprCap=y(h.quality),this.ctx=u.getContext("2d"),this.value=ve(null!==(a=h.value)&&void 0!==a?a:f.initialProgress,this.min,this.max),this.dragging=!1,this.webglActive=!1,this.flowTime=31*be(f.id),this.seed=be("".concat(f.id,"-reference"))*Math.PI*2,this.randomState=Math.floor(2147483647*be("".concat(f.id,"-auto")))||1,this.dpr=1,this.width=0,this.height=0,this.handlers={},this.resizeObserver="undefined"!=typeof ResizeObserver?new ResizeObserver(function(){return s.resizeCanvas()}):null,this.resizeObserver?this.resizeObserver.observe(this.root):window.addEventListener("resize",this.resizeCanvas),this.suppressEvents=!0,this.setProgress(this.value,"init"),this.suppressEvents=!1,this.bindEvents(),this.resizeCanvas()},[{key:"random",value:function(){return this.randomState=Math.imul(this.randomState,1664525)+1013904223>>>0,this.randomState/4294967296}},{key:"setProgress",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"auto";this.value=ve(e,this.min,this.max);var r=Math.round(this.value);this.root.style.setProperty("--progress",this.value.toFixed(2)),this.root.setAttribute("aria-valuenow",String(r)),this.root.setAttribute("aria-valuetext","".concat(r).concat(this.valueSuffix)),this.valueElement&&(this.valueElement.textContent="".concat(r).concat(this.valueSuffix)),this.suppressEvents||(this.dirty&&(this.dirty.value=!0),this.emitter.emit("change",{value:this.value,source:t}))}},{key:"setValueSuffix",value:function(e){this.valueSuffix=String(null==e?"":e);var t=Math.round(this.value);return this.valueElement&&(this.valueElement.textContent="".concat(t).concat(this.valueSuffix)),this.root.setAttribute("aria-valuetext","".concat(t).concat(this.valueSuffix)),this}},{key:"setShowValue",value:function(e){return this.valueElement&&(this.valueElement.hidden=!1===e),this}},{key:"resizeCanvas",value:function(){var e=this.root.getBoundingClientRect();this.dpr=Math.min(window.devicePixelRatio||1,this.dprCap),this.width=Math.max(1,e.width),this.height=Math.max(1,e.height),this.canvas.width=Math.round(this.width*this.dpr),this.canvas.height=Math.round(this.height*this.dpr),this.canvas.style.width="".concat(this.width,"px"),this.canvas.style.height="".concat(this.height,"px"),this.ctx.setTransform(this.dpr,0,0,this.dpr,0,0)}},{key:"edgeEnvelope",value:function(e){var t=Math.sin(Math.PI*ve(e,0,1));return Math.pow(Math.max(t,0),.48)}},{key:"localBulge",value:function(e,t,r){var i=0===r?1:-1,o=.28+.4*r+.13*Math.sin(t*(.19+.035*r)+this.seed*(1.1+r)),n=.075+.016*r+.012*Math.sin(.13*t+2.1*this.seed),a=(e-o)/Math.max(n,.035);return Math.exp(-.5*a*a)*Math.sin(t*(.71+.09*r)+this.seed*(2.7+r))*this.profile.bulgeAmplitude*i}},{key:"edgeOffset",value:function(e,t){for(var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,o=this.height>0?e/this.height:0,n=this.edgeEnvelope(o),a=t*this.profile.timeScale,s=this.profile.surge?a+this.profile.surge*Math.sin(2*a):a,l=0,u=0;u<this.profile.cycles.length;u+=1){var c=this.profile.cycles[u],f=this.profile.amplitudes[u],d=this.profile.speeds[u],h=.74+.26*Math.sin(s*(.17+.045*u)+this.seed*(u+2.4));l+=Math.sin(o*Math.PI*2*c+s*d*Math.PI*2+this.seed*(u+1)+r)*f*h}return l+=this.localBulge(o,s+r,0),(l+=this.localBulge(o,s-.7*r,1))*n*i}},{key:"createEdgePath",value:function(e,t,r){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1,n=Math.max(1.8,this.height/92);e.beginPath();for(var a=0;a<=this.height+n;a+=n){var s=t+this.edgeOffset(a,r,i,o);0===a?e.moveTo(s,a):e.lineTo(s,a)}}},{key:"createFillPath",value:function(e,t,r){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1,n=Math.max(1.8,this.height/92);e.beginPath(),e.moveTo(0,0),e.lineTo(t+this.edgeOffset(0,r,i,o),0);for(var a=n;a<=this.height+n;a+=n)e.lineTo(t+this.edgeOffset(a,r,i,o),a);e.lineTo(0,this.height),e.closePath()}},{key:"drawEllipticalGlow",value:function(e,t,r,i,o,n){var a=this.ctx;a.save(),a.translate(e,t),a.scale(1,i/r);var s=a.createRadialGradient(0,0,0,0,0,r);s.addColorStop(0,N(o,n)),s.addColorStop(.42,N(o,.48*n)),s.addColorStop(1,N(o,0)),a.globalCompositeOperation="screen",a.fillStyle=s,a.fillRect(-r,-r,2*r,2*r),a.restore()}},{key:"drawDarkEllipticalShadow",value:function(e,t,r,i,o){var n=this.ctx;n.save(),n.translate(e,t),n.scale(1,i/r);var a=n.createRadialGradient(0,0,0,0,0,r);a.addColorStop(0,"rgba(6, 6, 11, ".concat(o,")")),a.addColorStop(.54,"rgba(8, 8, 14, ".concat(.62*o,")")),a.addColorStop(1,"rgba(8, 8, 14, 0)"),n.globalCompositeOperation="source-over",n.fillStyle=a,n.fillRect(-r,-r,2*r,2*r),n.restore()}},{key:"drawColorClouds",value:function(e,t,r,i,o){this.ctx;var n=this.width,a=this.height,s=this.profile.cloudWidth,l=t*this.profile.timeScale,u=a*(.28+.13*Math.sin(.24*l+this.seed)),c=a*(.7+.12*Math.cos(.21*l+1.7*this.seed)),f=a*(.49+.15*Math.sin(.31*l+2.3*this.seed)),d=e-.095*n,h=Math.max(52,n*s),p=.42*a;this.drawEllipticalGlow(d,u,h,p,r,.38),this.drawDarkEllipticalShadow(d+.16*h,u,.58*h,.66*p,.74);var m=e-.072*n,v=Math.max(44,n*s*.82),g=.36*a;this.drawEllipticalGlow(m,c,v,g,i,.31),this.drawDarkEllipticalShadow(m+.14*v,c,.54*v,.62*g,.64),this.drawEllipticalGlow(e-.034*n,f,Math.max(30,n*s*.48),.27*a,o,.2)}},{key:"drawPathBand",value:function(e){var t=e.baseX,r=e.time,i=e.phase,o=e.amplitudeScale,n=e.color,a=e.alpha,s=e.blur,l=e.width,u=e.composite,c=void 0===u?"screen":u,f=this.ctx;this.createEdgePath(f,t,r,i,o),f.save(),f.globalCompositeOperation=c,f.globalAlpha=a,ge&&(f.filter="blur(".concat(s,"px)")),f.strokeStyle=n,f.lineWidth=l,f.stroke(),f.restore()}},{key:"setRange",value:function(e,t){if(e>t){var r=e;e=t,t=r}this.min=e,this.max=t;var i=ve(this.value,this.min,this.max);i!==this.value&&this.setProgress(i,"prop")}},{key:"drawReferenceFlow",value:function(){var e=this.ctx,t=this.width,r=this.height;if(!(!e||t<=0||r<=0)){var i=Math.max(this.max-this.min,1),o=t*Math.min(Math.max((this.value-this.min)/i,0),1),n=this.flowTime,a=c(this.preset.colors,4),s=a[0],l=a[1],u=a[2],f=a[3];e.clearRect(0,0,t,r),e.fillStyle="#202126",e.fillRect(0,0,t,r),this.createFillPath(e,o,n,0,1);var d=e.createLinearGradient(0,0,Math.max(o,1),0);d.addColorStop(0,s),d.addColorStop(.74,s),d.addColorStop(.89,N(s,.99)),d.addColorStop(.955,N(l,.09)),d.addColorStop(.992,N(u,.54)),d.addColorStop(1,N(f,.78)),e.fillStyle=d,e.fill(),this.drawColorClouds(o,n,l,u,f),this.drawPathBand({baseX:o-.105*t,time:n,phase:1.42,amplitudeScale:1.18,color:l,alpha:.22,blur:21,width:54}),this.drawPathBand({baseX:o-.073*t,time:n,phase:-.92,amplitudeScale:1.06,color:u,alpha:.3,blur:15,width:42}),this.drawPathBand({baseX:o-.047*t,time:n,phase:.42,amplitudeScale:.94,color:"rgba(5, 5, 10, 0.92)",alpha:.72,blur:12,width:34,composite:"source-over"}),this.drawPathBand({baseX:o-.025*t,time:n,phase:-.28,amplitudeScale:.96,color:u,alpha:.66,blur:8,width:28}),e.save(),this.createFillPath(e,o,n,0,1),e.clip(),this.createEdgePath(e,o,n,0,1),e.save(),e.globalCompositeOperation="screen",e.strokeStyle=N(l,.2),e.lineWidth=this.profile.haloWidth,e.shadowColor=l,e.shadowBlur=.72*this.profile.haloWidth,e.stroke(),e.restore(),e.save(),e.globalCompositeOperation="screen",e.strokeStyle=N(u,.78),e.lineWidth=this.profile.glowWidth+4.2,e.shadowColor=u,e.shadowBlur=8,e.stroke(),e.restore(),e.save(),e.globalCompositeOperation="screen",e.strokeStyle=N(f,.88),e.lineWidth=this.profile.glowWidth,e.shadowColor=f,e.shadowBlur=5,e.stroke(),e.restore(),e.restore(),e.save(),e.globalCompositeOperation="screen",e.strokeStyle=N(f,.84),e.lineWidth=2.15,e.shadowColor=f,e.shadowBlur=2.5,this.createEdgePath(e,o,n,0,1),e.stroke(),e.restore(),this.profile.whiteAlpha>.05&&(e.save(),e.globalCompositeOperation="screen",e.strokeStyle="rgba(255,255,245,".concat(this.profile.whiteAlpha,")"),e.lineWidth=this.profile.whiteWidth,this.createEdgePath(e,o,n,0,1),e.stroke(),e.restore())}}},{key:"updateFromPointer",value:function(e){var t=this.root.getBoundingClientRect(),r=t.width>0?(e.clientX-t.left)/t.width:0;this.setProgress(this.min+r*(this.max-this.min),"drag")}},{key:"beginDrag",value:function(e){if(void 0===e.button||0===e.button){e.preventDefault();try{this.root.focus({preventScroll:!0})}catch(e){this.root.focus()}this.dragging=!0,this.pendingPointer=null,this._dragRaf=0,this.root.classList.add("is-dragging");try{var t,r;null===(t=(r=this.root).setPointerCapture)||void 0===t||t.call(r,e.pointerId)}catch(e){}this.emitter.emit("dragstart",{value:this.value}),this.updateFromPointer(e)}}},{key:"moveDrag",value:function(e){var t=this;this.dragging&&(e.preventDefault(),this.pendingPointer=e,this._dragRaf||(this._dragRaf=requestAnimationFrame(function(){t._dragRaf=0;var e=t.pendingPointer;t.pendingPointer=null,e&&t.updateFromPointer(e)})))}},{key:"endDrag",value:function(e){if(this.dragging){this.dragging=!1,this._dragRaf&&(cancelAnimationFrame(this._dragRaf),this._dragRaf=0);var t=this.pendingPointer;this.pendingPointer=null,t&&this.updateFromPointer(t),this.root.classList.remove("is-dragging");try{var r,i;void 0!==(null==e?void 0:e.pointerId)&&null!==(r=(i=this.root).hasPointerCapture)&&void 0!==r&&r.call(i,e.pointerId)&&this.root.releasePointerCapture(e.pointerId)}catch(e){}this.emitter.emit("dragend",{value:this.value})}}},{key:"bindEvents",value:function(){var e=this;!1!==this.options.draggable&&(this.handlers.pointerdown=function(t){return e.beginDrag(t)},this.handlers.pointermove=function(t){return e.moveDrag(t)},this.handlers.pointerup=function(t){return e.endDrag(t)},this.handlers.pointercancel=function(t){return e.endDrag(t)},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))}},{key:"update",value:function(e,t){t||(this.flowTime+=e)}},{key:"draw",value:function(){this.webglActive||this.drawReferenceFlow()}},{key:"randomize",value:function(){this.flowTime=40*this.random()}},{key:"setColors",value:function(e){Array.isArray(e)&&4===e.length&&(this.preset=u(u({},this.preset),{},{colors:e}))}},{key:"dispose",value:function(){this._dragRaf&&cancelAnimationFrame(this._dragRaf),this.resizeObserver?this.resizeObserver.disconnect():window.removeEventListener("resize",this.resizeCanvas);for(var e=0,t=Object.keys(this.handlers);e<t.length;e++){var r=t[e],i=this.handlers[r];this.root.removeEventListener(r,i)}this.handlers={}}}])}();e.ALL_PRESETS=T,e.COPY=F,e.CosmicRenderer=z,e.DEFAULTS=k,e.FallbackRenderer=V,e.PRESETS=A,e.PROGRESS_PRESETS=M,e.ProgressCapsuleController=we,e.ProgressFlowRenderer=ce,e.QUALITY_TIERS=b,e.createCapsule=function(e){var t,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!e||"function"!=typeof e.appendChild)throw new Error("createCapsule: container element is required");var i=u({},R("capsule",null!==(t=r.preset)&&void 0!==t?t:"初光")),o=w(k.capsule,i,r),n=o.colors.map(D);n.every(Boolean)&&(i.colors=n),i.seed=o.seed,i.speed=o.speed;var s="string"==typeof r.label&&r.label?r.label:null,l=document.createElement("div");l.className="hj-capsule-root hj-capsule-cosmic",l.dataset.group=i.group,l.dataset.mode="nebula",l.dataset.theme=i.theme||"light",l.setAttribute("role","img");var c=function(){l.setAttribute("aria-label",s||F.capsuleAria.replace("{name}",i.name))};c();var f=function(e,t){if(e.innerHTML="",null!=t)if("string"!=typeof t){var r,i=a(Array.isArray(t)?t:[t]);try{for(i.s();!(r=i.n()).done;){var o=r.value;o&&"number"==typeof o.nodeType&&e.appendChild(o)}}catch(e){i.e(e)}finally{i.f()}}else e.innerHTML=t},d=document.createElement("div");d.className="hj-capsule-text hj-capsule-copy";var p=document.createElement("div");p.className="hj-capsule-visual",f(d,r.text),f(p,r.colorContent);var v=document.createElement("canvas");v.className="hj-capsule-canvas",v.setAttribute("aria-hidden","true"),l.appendChild(d),l.appendChild(p),l.appendChild(v),e.appendChild(l);var b,x=m(),C=o.respectReducedMotion&&"undefined"!=typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches,E=!1,S={preset:!1,seed:!1,speed:!1,colors:!1,textRatio:!1,cssVars:!1};if("canvas2d"!==o.renderer)try{b=new z(v,o,{dprCap:y(o.quality)})}catch(e){b=new V(v,o),ee(function(){E||x.emit("error",{message:String(e&&e.message?e.message:e)})})}else b=new V(v,o);var P=function(){l.style.width=g(o.width),l.style.height=g(o.height);for(var e=o.cssVars||{},t=0,r=Object.keys(e);t<r.length;t++){var i=r[t];l.style.setProperty(i,e[i])}void 0!==o.textRatio&&(l.style.setProperty("--hj-text-width","".concat(o.textRatio,"%")),l.style.setProperty("--hj-text-min-width","0")),b.resize()};P();var _="undefined"!=typeof ResizeObserver?new ResizeObserver(function(){return b.resize()}):null;_?_.observe(l):window.addEventListener("resize",b.resize);var M=Z(l);l.addEventListener("pointerenter",function(){return x.emit("pointerenter",{preset:u({},i)})}),l.addEventListener("pointerleave",function(){return x.emit("pointerleave",{preset:u({},i)})}),l.addEventListener("click",function(e){x.emit("click",{event:e,preset:u({},i)})}),l.addEventListener("pointerdown",function(e){return x.emit("pointerdown",{event:e,preset:u({},i)})}),l.addEventListener("pointerup",function(e){return x.emit("pointerup",{event:e,preset:u({},i)})}),l.addEventListener("dblclick",function(e){return x.emit("dblclick",{event:e,preset:u({},i)})});var A=0,T=J(function(e){A+=e,M.isVisible()&&b.draw(A)},function(){return C});return ee(function(){E||x.emit("ready",{preset:u({},i)})}),{element:l,canvas:v,preset:i,on:x.on,off:x.off,setPreset:function(e){var t=R("capsule",e);S.preset=!0,Object.assign(i,t);var r=i.colors.map(D);return r.every(Boolean)&&(i.colors=r),b.setPreset(u({},i)),l.dataset.mode="nebula",l.dataset.theme=i.theme||"light",c(),b.resize(),x.emit("presetchange",{preset:u({},t)}),this},setColors:function(e){var t=Array.isArray(e)?e.map(D):[];return 4!==t.length||t.some(function(e){return!e})||(S.colors=!0,i.colors=t,b.setPreset(u(u({},i),{},{colors:t}))),this},setSeed:function(e){var t=Number(e);return Number.isFinite(t)?(S.seed=!0,i.seed=t,b.setPreset(u({},i)),this):this},setSpeed:function(e){var t=Number(e);return Number.isFinite(t)?(S.speed=!0,i.speed=t,b.setPreset(u({},i)),this):this},setText:function(e){return f(d,e),this},setColorContent:function(e){return f(p,e),this},setTextRatio:function(e){var t=Number(e);return!Number.isFinite(t)||t<0||t>100||(S.textRatio=!0,o.textRatio=t,l.style.setProperty("--hj-text-width","".concat(t,"%")),l.style.setProperty("--hj-text-min-width","0")),this},setCssVars:function(e){if(!e||"object"!==h(e))return this;S.cssVars=!0,o.cssVars=u(u({},o.cssVars||{}),e);for(var t=0,r=Object.keys(e);t<r.length;t++){var i=r[t];l.style.setProperty(i,e[i])}return this},setLabel:function(e){return s="string"==typeof e&&e?e:null,c(),this},setMouseColor:function(e){return o.mouseColor=!1!==e,"function"==typeof b.setMouseColor&&b.setMouseColor(o.mouseColor),this},setSize:function(e,t){return void 0!==e&&(g(e),o.width=e),void 0!==t&&(g(t),o.height=t),P(),this},randomize:function(){return this.setSeed(100*Math.random()),this},pause:function(){return C=!0,this},resume:function(){return C=!1,this},setQuality:function(e){return o.quality=e,"function"==typeof b.setDprCap&&b.setDprCap(y(e)),this},dispose:function(){E=!0,T(),M.dispose(),_?_.disconnect():window.removeEventListener("resize",b.resize),b.dispose(),l.remove()},get textRatio(){return o.textRatio},get cssVars(){return o.cssVars},dirty:S}},e.createColorBackground=function(e){var t,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!e||"function"!=typeof e.appendChild)throw new Error("createColorBackground: host element is required");var i=u({},R("capsule",null!==(t=r.preset)&&void 0!==t?t:"初光")),o=w({quality:k.capsule.quality,renderer:k.capsule.renderer,respectReducedMotion:k.capsule.respectReducedMotion,mouseColor:!0,opacity:1,fallbackColor:!0},i,r),n=o.colors.map(D);n.every(Boolean)&&(i.colors=n),i.seed=o.seed,i.speed=o.speed;var a=getComputedStyle(e);"static"!==a.position&&""!==a.position||(e.style.position="relative"),e.style.isolation="isolate";var s=document.createElement("div");s.className="dlc-color-layer";var l=function(){s.style.setProperty("--dlc-color-opacity",String(o.opacity));var e=!1===o.fallbackColor||null==o.fallbackColor?"transparent":"string"==typeof o.fallbackColor?o.fallbackColor:i.colors[0];s.style.setProperty("--dlc-color-bg",e)};l();var c=document.createElement("canvas");c.className="dlc-color-canvas",c.setAttribute("aria-hidden","true"),s.appendChild(c),e.appendChild(s);var f,d=m(),h=o.respectReducedMotion&&"undefined"!=typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches,p=!1,v={preset:!1,seed:!1,speed:!1,colors:!1,opacity:!1,fallbackColor:!1,mouseColor:!1};if("canvas2d"!==o.renderer)try{f=new z(c,o,{dprCap:y(o.quality),mouseColor:!1!==o.mouseColor,eventTarget:e})}catch(e){f=new V(c,o),ee(function(){p||d.emit("error",{message:String(e&&e.message?e.message:e)})})}else f=new V(c,o);var g="undefined"!=typeof ResizeObserver?new ResizeObserver(function(){return f.resize()}):null;g?g.observe(e):window.addEventListener("resize",f.resize);var b=Z(s),x=0,C=J(function(e){x+=e,b.isVisible()&&f.draw(x)},function(){return h});return ee(function(){p||d.emit("ready",{preset:u({},i)})}),{element:e,layer:s,canvas:c,preset:i,on:d.on,off:d.off,setPreset:function(e){var t=R("capsule",e);v.preset=!0,Object.assign(i,t);var r=i.colors.map(D);return r.every(Boolean)&&(i.colors=r),f.setPreset(u({},i)),f.resize(),l(),d.emit("presetchange",{preset:u({},i)}),this},setColors:function(e){var t=Array.isArray(e)?e.map(D):[];return 4!==t.length||t.some(function(e){return!e})||(v.colors=!0,i.colors=t,f.setPreset(u(u({},i),{},{colors:t})),l()),this},setSeed:function(e){var t=Number(e);return Number.isFinite(t)?(v.seed=!0,i.seed=t,f.setPreset(u({},i)),this):this},setSpeed:function(e){var t=Number(e);return Number.isFinite(t)?(v.speed=!0,i.speed=t,f.setPreset(u({},i)),this):this},setFallbackColor:function(e){return v.fallbackColor=!0,o.fallbackColor=e,l(),this},setMouseColor:function(e){return v.mouseColor=!0,o.mouseColor=!1!==e,"function"==typeof f.setMouseColor&&f.setMouseColor(o.mouseColor),this},setQuality:function(e){return o.quality=e,"function"==typeof f.setDprCap&&f.setDprCap(y(e)),this},setOpacity:function(e){var t=Number(e);return Number.isFinite(t)?(v.opacity=!0,o.opacity=Math.min(1,Math.max(0,t)),s.style.setProperty("--dlc-color-opacity",String(o.opacity)),this):this},randomize:function(){return this.setSeed(100*Math.random()),this},pause:function(){return h=!0,this},resume:function(){return h=!1,this},dispose:function(){p=!0,C(),b.dispose(),g?g.disconnect():window.removeEventListener("resize",f.resize),f.dispose(),s.remove()},get opacity(){return o.opacity},get fallbackColor(){return o.fallbackColor},get mouseColor(){return o.mouseColor},dirty:v}},e.createProgressCapsule=function(e){var t,r,i,o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!e||"function"!=typeof e.appendChild)throw new Error("createProgressCapsule: container element is required");var n=u({},R("progress",null!==(t=o.preset)&&void 0!==t?t:"星火")),s=w(k.progress,n,o);if(s.min>s.max){var l=s.min;s.min=s.max,s.max=l}var c=s.colors.map(D);c.every(Boolean)&&(n.colors=c),n.edgeStyle=s.edgeStyle;var f=F,d="string"==typeof o.label&&o.label?o.label:null,p=!0===s.disabled||""===s.disabled||"true"===s.disabled,v=!0===s.readonly||""===s.readonly||"true"===s.readonly,b=p||v,x=!b&&!1!==s.draggable,C={preset:!1,colors:!1,textRatio:!1,cssVars:!1,edgeStyle:!1,value:!1},E=document.createElement("div");E.className="hj-capsule-root hj-progress-root",E.setAttribute("role","slider"),E.setAttribute("data-draggable",String(x)),p&&(E.setAttribute("aria-disabled","true"),E.classList.add("is-disabled")),v&&(E.setAttribute("aria-readonly","true"),E.classList.add("is-readonly")),b&&E.setAttribute("tabindex","-1"),E.setAttribute("aria-valuemin",String(null!==(r=s.min)&&void 0!==r?r:0)),E.setAttribute("aria-valuemax",String(null!==(i=s.max)&&void 0!==i?i:100)),E.setAttribute("aria-valuenow",String(n.initialProgress));var S=function(){var e,t;E.setAttribute("aria-label",d||(e=f.progressAria,t={brand:f.brandName,code:n.code,name:n.name},e.replace(/\{(\w+)\}/g,function(e,r){return void 0!==t[r]?t[r]:""})))};S();var P=document.createElement("canvas");P.className="hj-progress-canvas",P.setAttribute("aria-hidden","true");var _=function(e,t){if(e.innerHTML="",null!=t)if("string"!=typeof t){var r,i=a(Array.isArray(t)?t:[t]);try{for(i.s();!(r=i.n()).done;){var o=r.value;o&&"number"==typeof o.nodeType&&e.appendChild(o)}}catch(e){i.e(e)}finally{i.f()}}else e.innerHTML=t},M=document.createElement("div");M.className="hj-progress-text hj-progress-copy";var A=document.createElement("div");A.className="hj-progress-visual",_(M,o.text),_(A,o.colorContent);var T=document.createElement("div");T.className="hj-progress-value",T.setAttribute("aria-hidden","true"),T.hidden=!1===s.showValue,E.appendChild(P),E.appendChild(M),E.appendChild(A),E.appendChild(T),e.appendChild(E);var L=m(),B=s.respectReducedMotion&&"undefined"!=typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches,O=!1,N=function(){E.style.width=g(s.width),E.style.height=g(s.height);for(var e=s.cssVars||{},t=0,r=Object.keys(e);t<r.length;t++){var i=r[t];E.style.setProperty(i,e[i])}void 0!==s.textRatio&&E.style.setProperty("--hj-text-width","".concat(s.textRatio,"%"))};N();var U=new we({root:E,canvas:P,valueElement:T,preset:n,emitter:L,options:u(u({},s),{},{draggable:x}),copy:f,dirty:C}),I=null;"canvas2d"!==s.renderer&&(I=me({root:E,canvas:P,preset:n,getProgress:function(){return U.value}})),I?U.webglActive=!0:"canvas2d"!==s.renderer&&ee(function(){O||L.emit("error",{message:"WebGL2 unavailable, using Canvas2D fallback"})});var z=Z(E),j=0,G=J(function(e,t){j+=e,U.update(e,!1),z.isVisible()&&(U.draw(),I&&I.update(j))},function(){return B});return ee(function(){O||L.emit("ready",{preset:u({},n)})}),{element:E,canvas:P,preset:n,on:L.on,off:L.off,setValue:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"prop";return U.setProgress(e,t),this},getValue:function(){return U.value},setRange:function(e,t){return U.setRange(e,t),this},setPreset:function(e){var t=R("progress",e);C.preset=!0,Object.assign(n,t);var r=n.colors.map(D);return r.every(Boolean)&&(n.colors=r),U.preset=n,U.profile="tide"===t.edgeStyle?ye.tide:ye[t.id]||ye["visual-training"],U.flowTime=31*be(t.id),U.seed=be("".concat(t.id,"-reference"))*Math.PI*2,S(),I&&(I.dispose(),I=me({root:E,canvas:P,preset:n,getProgress:function(){return U.value}})),U.webglActive=Boolean(I),U.resizeCanvas(),L.emit("presetchange",{preset:u({},n)}),this},setEdgeStyle:function(e){var t=String(e||"").toLowerCase();return"flow"!==t&&"tide"!==t||(C.edgeStyle=!0,n.edgeStyle=t,U.profile="tide"===t?ye.tide:ye[n.id]||ye["visual-training"],I&&(I.dispose(),I=me({root:E,canvas:P,preset:n,getProgress:function(){return U.value}})),U.webglActive=Boolean(I),U.resizeCanvas()),this},setText:function(e){return _(M,e),this},setColorContent:function(e){return _(A,e),this},setTextRatio:function(e){var t=Number(e);return!Number.isFinite(t)||t<0||t>100||(C.textRatio=!0,s.textRatio=t,E.style.setProperty("--hj-text-width","".concat(t,"%"))),this},setCssVars:function(e){if(!e||"object"!==h(e))return this;C.cssVars=!0,s.cssVars=u(u({},s.cssVars||{}),e);for(var t=0,r=Object.keys(e);t<r.length;t++){var i=r[t];E.style.setProperty(i,e[i])}return this},setLabel:function(e){return d="string"==typeof e&&e?e:null,S(),this},setValueSuffix:function(e){return U.setValueSuffix(e),this},setShowValue:function(e){return U.setShowValue(e),this},setColors:function(e){var t=Array.isArray(e)?e.map(D):[];return 4!==t.length||t.some(function(e){return!e})||(C.colors=!0,U.setColors(t),I&&I.setColors(t),U.resizeCanvas()),this},setSize:function(e,t){return void 0!==e&&(g(e),s.width=e),void 0!==t&&(g(t),s.height=t),N(),U.resizeCanvas(),this},randomize:function(){return U.randomize(),this},pause:function(){return B=!0,this},resume:function(){return B=!1,this},setQuality:function(e){return s.quality=e,U.dprCap=y(e),U.resizeCanvas(),this},dispose:function(){O=!0,G(),z.dispose(),I&&I.dispose(),U.dispose(),E.remove()},get textRatio(){return s.textRatio},get cssVars(){return s.cssVars},dirty:C}},e.dprCapFor=y,e.getPreset=R,e.hexToRgb01=O,e.hexToRgba=N,e.normalizeColor=D,e.parseSize=g,e.pauseAll=function(){H=!0},e.resumeAll=function(){H=!1},e.validateColors=function(e){return Array.isArray(e)&&4===e.length&&e.every(function(e){return null!==D(e)})}});

package/dist/progress.cjs

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

package/dist/progress.mjs

@@ -758,12 +758,17 @@ void main() {
   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);
-  float stripMask = smoothstep(0.0, 0.018, effectX) * (1.0 - smoothstep(0.982, 1.0, effectX));
-  float referenceLeft = 1.0 - smoothstep(-0.026, -0.012, d);
-  color = mix(color, referenceColor, stripMask * referenceLeft * u_hasEffect);
+  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);
+  float stripMask = smoothstep(0.0, 0.018, effectX) * (1.0 - smoothstep(0.982, 1.0, effectX));
+  float referenceLeft = 1.0 - smoothstep(-0.026, -0.012, d);
+  // 参考图集只提供亮度结构，颜色始终由用户 colors（u_dark / u_accentA /
+  // u_accentB / u_glow）决定：这样 setColors / colors 属性在 WebGL 路径下
+  // 真实生效，改色有可见反馈，而不是被图集整体覆盖。
+  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);
 }`;
@@ -1588,7 +1593,7 @@ class ProgressCapsuleController {
   beginDrag(event) {
     if (event.button !== undefined && event.button !== 0) return;
     event.preventDefault();
-    // preventDefault 会吞掉点击聚焦，主动聚焦让键盘方向键立即可用。
+    // preventDefault 会吞掉点击聚焦，主动聚焦让根节点获得无障碍焦点。
     try { this.root.focus({ preventScroll: true }); } catch { this.root.focus(); }
     this.dragging = true;
     this.pendingPointer = null;
@@ -1681,7 +1686,7 @@ class ProgressCapsuleController {
 /**
  * Mount a fluid progress capsule into `container`.
  *
- * Options: preset (id/code/name or object), width, height, value, min, max,
+ * Options: preset (literary name), width, height, value, min, max,
  * draggable, 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),

package/dist/vue2.cjs

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

package/dist/vue2.mjs

@@ -1471,12 +1471,17 @@ void main() {
   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);
-  float stripMask = smoothstep(0.0, 0.018, effectX) * (1.0 - smoothstep(0.982, 1.0, effectX));
-  float referenceLeft = 1.0 - smoothstep(-0.026, -0.012, d);
-  color = mix(color, referenceColor, stripMask * referenceLeft * u_hasEffect);
+  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);
+  float stripMask = smoothstep(0.0, 0.018, effectX) * (1.0 - smoothstep(0.982, 1.0, effectX));
+  float referenceLeft = 1.0 - smoothstep(-0.026, -0.012, d);
+  // 参考图集只提供亮度结构，颜色始终由用户 colors（u_dark / u_accentA /
+  // u_accentB / u_glow）决定：这样 setColors / colors 属性在 WebGL 路径下
+  // 真实生效，改色有可见反馈，而不是被图集整体覆盖。
+  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);
 }`;
@@ -2285,7 +2290,7 @@ class ProgressCapsuleController {
   beginDrag(event) {
     if (event.button !== undefined && event.button !== 0) return;
     event.preventDefault();
-    // preventDefault 会吞掉点击聚焦，主动聚焦让键盘方向键立即可用。
+    // preventDefault 会吞掉点击聚焦，主动聚焦让根节点获得无障碍焦点。
     try { this.root.focus({ preventScroll: true }); } catch { this.root.focus(); }
     this.dragging = true;
     this.pendingPointer = null;
@@ -2378,7 +2383,7 @@ class ProgressCapsuleController {
 /**
  * Mount a fluid progress capsule into `container`.
  *
- * Options: preset (id/code/name or object), width, height, value, min, max,
+ * Options: preset (literary name), width, height, value, min, max,
  * draggable, 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),
@@ -2703,7 +2708,7 @@ function prefersReducedMotion() {
  * isolation: isolate` automatically so the layer can never escape its box
  * (or break stacking outside it).
  *
- * Options: preset (id/code/name or object), colors, seed, speed, quality,
+ * Options: preset (literary name), colors, seed, speed, quality,
  * renderer, mouseColor, respectReducedMotion, opacity (0-1), fallbackColor
  * (true=preset base color, a hex string, or false to disable).
  */

package/dist/vue3.cjs

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

package/dist/vue3.mjs

@@ -1473,12 +1473,17 @@ void main() {
   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);
-  float stripMask = smoothstep(0.0, 0.018, effectX) * (1.0 - smoothstep(0.982, 1.0, effectX));
-  float referenceLeft = 1.0 - smoothstep(-0.026, -0.012, d);
-  color = mix(color, referenceColor, stripMask * referenceLeft * u_hasEffect);
+  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);
+  float stripMask = smoothstep(0.0, 0.018, effectX) * (1.0 - smoothstep(0.982, 1.0, effectX));
+  float referenceLeft = 1.0 - smoothstep(-0.026, -0.012, d);
+  // 参考图集只提供亮度结构，颜色始终由用户 colors（u_dark / u_accentA /
+  // u_accentB / u_glow）决定：这样 setColors / colors 属性在 WebGL 路径下
+  // 真实生效，改色有可见反馈，而不是被图集整体覆盖。
+  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);
 }`;
@@ -2287,7 +2292,7 @@ class ProgressCapsuleController {
   beginDrag(event) {
     if (event.button !== undefined && event.button !== 0) return;
     event.preventDefault();
-    // preventDefault 会吞掉点击聚焦，主动聚焦让键盘方向键立即可用。
+    // preventDefault 会吞掉点击聚焦，主动聚焦让根节点获得无障碍焦点。
     try { this.root.focus({ preventScroll: true }); } catch { this.root.focus(); }
     this.dragging = true;
     this.pendingPointer = null;
@@ -2380,7 +2385,7 @@ class ProgressCapsuleController {
 /**
  * Mount a fluid progress capsule into `container`.
  *
- * Options: preset (id/code/name or object), width, height, value, min, max,
+ * Options: preset (literary name), width, height, value, min, max,
  * draggable, 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),
@@ -2705,7 +2710,7 @@ function prefersReducedMotion() {
  * isolation: isolate` automatically so the layer can never escape its box
  * (or break stacking outside it).
  *
- * Options: preset (id/code/name or object), colors, seed, speed, quality,
+ * Options: preset (literary name), colors, seed, speed, quality,
  * renderer, mouseColor, respectReducedMotion, opacity (0-1), fallbackColor
  * (true=preset base color, a hex string, or false to disable).
  */

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@5even7/dlc-ui",
-  "version": "0.2.10",
-  "publishConfig": {
-    "access": "public"
-  },
+  "version": "0.2.11",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
   "description": "DLC 星云胶囊组件（WebGL2 实时渲染，Canvas2D 自动降级），供 H5 / Vue2 / Vue3 使用。",
   "type": "module",
   "repository": {

package/styles/capsule.css

@@ -11,6 +11,8 @@
   z-index: 4;
   width: var(--hj-text-width, var(--hj-copy-width, 39%));
   min-width: var(--hj-text-min-width, var(--hj-copy-min-width, 164px));
+  background: var(--hj-text-bg, transparent);
+  padding: var(--hj-text-pad, 0);
   border-radius: var(--hj-text-radius, 0);
   overflow: hidden;
   pointer-events: none;

package/styles/progress.css

@@ -55,6 +55,8 @@
   left: var(--hj-text-left, var(--hj-copy-left, 30px));
   z-index: 4;
   width: var(--hj-text-width, var(--hj-copy-max-width, 54%));
+  background: var(--hj-text-bg, transparent);
+  padding: var(--hj-text-pad, 0);
   border-radius: var(--hj-text-radius, 0);
   overflow: hidden;
   transform: translateY(-50%);

package/types/index.d.ts

@@ -13,17 +13,16 @@ export interface CapsulePreset {
   colors: ColorTuple;
 }
 
-export interface ProgressPreset {
-  id: string;
-  code: string;
-  name: string;
-  group: 'progress';
-  subtitle?: string;
-  initialProgress: number;
-  loadRate: number;
-  edgeStyle: 'flow' | 'tide';
-  colors: ColorTuple;
-}
+export interface ProgressPreset {
+  id: string;
+  code: string;
+  name: string;
+  group: 'progress';
+  subtitle?: string;
+  initialProgress: number;
+  edgeStyle: 'flow' | 'tide';
+  colors: ColorTuple;
+}
 
 export interface Copy {
   brandName: string;
@@ -103,6 +102,7 @@ export interface CapsuleController extends Emitter {
   setColors(colors: string[]): this;
   setSeed(seed: number): this;
   setSpeed(speed: number): this;
+  setMouseColor(value: boolean): this;
   setText(content: string | Node | Node[]): this;
   setColorContent(content: string | Node | Node[]): this;
   setTextRatio(ratio: number): this;
@@ -132,6 +132,7 @@ export interface ProgressController extends Emitter {
   setCssVars(vars: Record<string, string>): this;
   setLabel(label: string): this;
   setValueSuffix(suffix: string): this;
+  setShowValue(show: boolean): this;
   setSize(width?: number | string, height?: number | string): this;
   randomize(): this;
   pause(): this;