@5even7/dlc-ui 0.1.0

package/dist/progress.cjs

@@ -0,0 +1,1751 @@
+'use strict';
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+function _classCallCheck(a, n) {
+  if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
+}
+function _defineProperties(e, r) {
+  for (var t = 0; t < r.length; t++) {
+    var o = r[t];
+    o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey(o.key), o);
+  }
+}
+function _createClass(e, r, t) {
+  return r && _defineProperties(e.prototype, r), Object.defineProperty(e, "prototype", {
+    writable: false
+  }), e;
+}
+function _createForOfIteratorHelper(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (!t) {
+    if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
+      t && (r = t);
+      var n = 0,
+        F = function () {};
+      return {
+        s: F,
+        n: function () {
+          return n >= r.length ? {
+            done: true
+          } : {
+            done: false,
+            value: r[n++]
+          };
+        },
+        e: function (r) {
+          throw r;
+        },
+        f: F
+      };
+    }
+    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 o,
+    a = true,
+    u = false;
+  return {
+    s: function () {
+      t = t.call(r);
+    },
+    n: function () {
+      var r = t.next();
+      return a = r.done, r;
+    },
+    e: function (r) {
+      u = true, o = r;
+    },
+    f: function () {
+      try {
+        a || null == t.return || t.return();
+      } finally {
+        if (u) throw o;
+      }
+    }
+  };
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  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 _nonIterableSpread() {
+  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 ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+/**
+ * Tiny event emitter. Accepts any event name so the API stays open for
+ * future events (hover, click, custom) without breaking changes.
+ */
+function createEmitter() {
+  // Plain object storage (no Map/Set) so the legacy build has no API
+  // dependencies beyond what IE11 provides.
+  var listeners = Object.create(null);
+  return {
+    on: function on(event, fn) {
+      if (!listeners[event]) listeners[event] = [];
+      listeners[event].push(fn);
+      return function () {
+        var current = listeners[event];
+        if (current) {
+          var index = current.indexOf(fn);
+          if (index !== -1) current.splice(index, 1);
+        }
+      };
+    },
+    off: function off(event, fn) {
+      var current = listeners[event];
+      if (!current) return false;
+      var index = current.indexOf(fn);
+      if (index === -1) return false;
+      current.splice(index, 1);
+      return true;
+    },
+    emit: function emit(event) {
+      var current = listeners[event];
+      if (!current) return;
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+      var _iterator = _createForOfIteratorHelper(current.slice()),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var fn = _step.value;
+          fn.apply(void 0, args);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+  };
+}
+
+var UNIT_PATTERN = /^[\d.]+(?:px|%|vw|vh|vmin|vmax|em|rem)$/;
+
+/**
+ * Normalize a size option to a CSS length string.
+ * Accepts numbers (treated as px) or strings with px/%, vw/vh/vmin/vmax, em/rem.
+ */
+function parseSize(value) {
+  if (typeof value === 'number') {
+    if (!Number.isFinite(value) || value < 0) throw new Error("Invalid size: ".concat(value));
+    return "".concat(value, "px");
+  }
+  if (typeof value !== 'string') throw new Error("Invalid size: ".concat(String(value)));
+  var trimmed = value.trim();
+  if (!trimmed) throw new Error('Invalid size: empty string');
+  if (/^\d+(?:\.\d+)?$/.test(trimmed)) return "".concat(trimmed, "px");
+  if (!UNIT_PATTERN.test(trimmed)) {
+    throw new Error("Invalid size or unsupported unit: \"".concat(value, "\" (use px, %, vw, vh, vmin, vmax, em, rem)"));
+  }
+  return trimmed;
+}
+
+var QUALITY_TIERS = {
+  low: {
+    dpr: 1
+  },
+  medium: {
+    dpr: 1.5
+  },
+  high: {
+    dpr: 2
+  }
+};
+function autoDprCap() {
+  var nav = typeof navigator !== 'undefined' ? navigator : null;
+  var memory = nav && typeof nav.deviceMemory === 'number' ? nav.deviceMemory : 8;
+  var cores = nav && typeof nav.hardwareConcurrency === 'number' ? nav.hardwareConcurrency : 8;
+  return memory <= 4 || cores <= 4 ? 1.5 : 2;
+}
+function dprCapFor(quality) {
+  if (quality === 'auto') return autoDprCap();
+  var tier = QUALITY_TIERS[quality] || QUALITY_TIERS.medium;
+  return tier.dpr;
+}
+
+/**
+ * Merge defaults < preset < user. Unknown user keys are preserved so the
+ * component API can grow (new props, cssVars, callbacks) without a breaking
+ * change.
+ */
+function normalizeOptions(defaults, preset, user) {
+  // undefined means "not provided" (e.g. Vue $props with unset props):
+  // drop those keys before merging so defaults/preset values survive.
+  var omitUndefined = function omitUndefined(source) {
+    var result = {};
+    for (var _i = 0, _Object$keys = Object.keys(source); _i < _Object$keys.length; _i++) {
+      var key = _Object$keys[_i];
+      if (source[key] !== undefined) result[key] = source[key];
+    }
+    return result;
+  };
+  var presetOptions = omitUndefined(preset && _typeof(preset) === 'object' ? preset : {});
+  var userOptions = omitUndefined(user && _typeof(user) === 'object' ? user : {});
+  return _objectSpread2(_objectSpread2(_objectSpread2({}, defaults), presetOptions), userOptions);
+}
+
+/**
+ * 公共色板：NC-01~NC-06 的四色组（底色 / 主色 / 辅色 / 高光色）。
+ * Capsule 预置与 dlc-color 等组件共用，新增色板只改这里。
+ */
+var PALETTES$1 = {
+  original: ['#FFF3EA', '#F5B27A', '#F67BC6', '#A978E8'],
+  ocean: ['#EAF6FF', '#8FD0FF', '#3B87F6', '#6B58E9'],
+  klein: ['#EDF2FF', '#2F58D5', '#1B2040', '#E07A43'],
+  ultraviolet: ['#F2EEFF', '#B99AF1', '#8F74DB', '#D7D85C'],
+  chrome: ['#F5F6F8', '#B9C0CC', '#7F8793', '#4A4F59'],
+  plus: ['#FFF0E6', '#F6C26B', '#F98A64', '#E86D74']
+};
+
+/**
+ * Capsule 预置：仅星云材质 NC-01~NC-06（NC-07~09 aurora 已移除）。
+ * 颜色引用公共色板，seed/speed 决定形态与流速。
+ */
+var CAPSULE_PRESETS = [{
+  id: 'original',
+  code: 'NC-01',
+  name: 'ORIGINAL',
+  group: 'warm',
+  seed: 1.7,
+  speed: 0.5,
+  colors: _toConsumableArray(PALETTES$1.original)
+}, {
+  id: 'ocean',
+  code: 'NC-02',
+  name: 'OCEAN',
+  group: 'cold',
+  seed: 8.2,
+  speed: 0.48,
+  colors: _toConsumableArray(PALETTES$1.ocean)
+}, {
+  id: 'klein',
+  code: 'NC-03',
+  name: 'KLEIN',
+  group: 'cold',
+  seed: 14.1,
+  speed: 0.49,
+  colors: _toConsumableArray(PALETTES$1.klein)
+}, {
+  id: 'ultraviolet',
+  code: 'NC-04',
+  name: 'ULTRAVIOLET',
+  group: 'cold',
+  seed: 23.4,
+  speed: 0.47,
+  colors: _toConsumableArray(PALETTES$1.ultraviolet)
+}, {
+  id: 'chrome',
+  code: 'NC-05',
+  name: 'CHROME',
+  group: 'cold',
+  seed: 37.8,
+  speed: 0.42,
+  colors: _toConsumableArray(PALETTES$1.chrome)
+}, {
+  id: 'plus',
+  code: 'NC-06',
+  name: 'PLUS',
+  group: 'warm',
+  seed: 51.3,
+  speed: 0.5,
+  colors: _toConsumableArray(PALETTES$1.plus)
+}];
+
+var PROGRESS_PRESETS = [{
+  id: 'model-training',
+  code: 'NC-10',
+  name: 'MODEL TRAINING',
+  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: 'AGENT MIGRATION',
+  subtitle: 'TRANSFERRING PROTOCOL',
+  group: 'progress',
+  initialProgress: 33,
+  edgeStyle: 'flow',
+  colors: ['#101C37', '#245BFF', '#00CFFF', '#5DFFE6']
+}, {
+  id: 'visual-training',
+  code: 'NC-12',
+  name: 'VISUAL TRAINING',
+  subtitle: 'GENERATING POWER ++',
+  group: 'progress',
+  initialProgress: 58,
+  edgeStyle: 'flow',
+  colors: ['#21142D', '#7042FF', '#42F58D', '#C4FF8A']
+}, {
+  id: 'tide',
+  code: 'NC-13',
+  name: 'TIDE',
+  subtitle: 'MOON PULL / COAST',
+  group: 'progress',
+  initialProgress: 30,
+  edgeStyle: 'tide',
+  colors: ['#0A2239', '#2E9BFF', '#7FE3FF', '#EAF9FF']
+}];
+
+[].concat(_toConsumableArray(CAPSULE_PRESETS), _toConsumableArray(PROGRESS_PRESETS));
+function validateProgressPreset(preset) {
+  return Boolean(preset && typeof preset.id === 'string' && typeof preset.code === 'string' && typeof preset.name === 'string' && preset.group === 'progress' && Number.isFinite(preset.initialProgress) && ['flow', 'tide'].indexOf(preset.edgeStyle || 'flow') !== -1 && Array.isArray(preset.colors) && preset.colors.length === 4);
+}
+function getPreset(kind, ref) {
+  var list = PROGRESS_PRESETS ;
+  if (!list) throw new Error("Unknown preset kind: ".concat(kind, " (use \"capsule\" or \"progress\")"));
+  if (ref && _typeof(ref) === 'object') {
+    var valid = validateProgressPreset(ref);
+    if (!valid) throw new Error("Invalid ".concat(kind, " preset object"));
+    return ref;
+  }
+  var key = String(ref).trim().toLowerCase();
+  var found = list.find(function (preset) {
+    return preset.id.toLowerCase() === key || preset.code.toLowerCase() === key || preset.name.toLowerCase() === key;
+  });
+  if (!found) throw new Error("Unknown ".concat(kind, " preset: ").concat(ref));
+  return found;
+}
+
+var DEFAULTS = {
+  progress: {
+    width: 454,
+    height: 104,
+    min: 0,
+    max: 100,
+    draggable: true,
+    keyboard: true,
+    edgeStyle: 'flow',
+    quality: 'auto',
+    renderer: 'auto',
+    showCopy: true,
+    respectReducedMotion: true
+  }
+};
+
+/**
+ * All user-facing copy lives here so wording/brand changes never require a
+ * global search. Templates use {brand} {code} {name} placeholders.
+ */
+var COPY = {
+  brandName: '画境观屿',
+  dragLabel: 'DRAG',
+  valueSuffix: '%',
+  progressAria: '{brand} {code} 加载进度',
+  capsuleAria: '打开 {name} 沉浸预览'
+};
+
+function hexToRgba(hex) {
+  var alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  var normalized = hex.replace('#', '');
+  var value = Number.parseInt(normalized, 16);
+  var red = value >> 16 & 255;
+  var green = value >> 8 & 255;
+  var blue = value & 255;
+  return "rgba(".concat(red, ", ").concat(green, ", ").concat(blue, ", ").concat(alpha, ")");
+}
+
+/**
+ * Document-level shared rAF scheduler. Every component instance subscribes
+ * its own frame callback; the whole page runs ONE animation loop (like the
+ * original demo), which avoids jank from many competing rAF loops.
+ */
+var subscribers = [];
+var running = false;
+var rafId = 0;
+var last = 0;
+function tick(now) {
+  if (!running) return;
+  var delta = last ? Math.min((now - last) / 1000, 0.05) : 0;
+  last = now;
+  // Schedule the next frame BEFORE running callbacks so one throwing
+  // subscriber can never kill the whole animation loop.
+  rafId = requestAnimationFrame(tick);
+  {
+    var _iterator = _createForOfIteratorHelper(subscribers.slice()),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var item = _step.value;
+        try {
+          if (!item.isPaused()) item.onFrame(delta, now);
+        } catch (error) {
+          console.warn('[dlc-ui] frame error:', error);
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  }
+  if (subscribers.length === 0) {
+    cancelAnimationFrame(rafId);
+    running = false;
+    rafId = 0;
+  }
+}
+function start() {
+  if (running) return;
+  running = true;
+  last = 0;
+  rafId = requestAnimationFrame(tick);
+}
+function subscribeScheduler(onFrame, isPaused) {
+  var item = {
+    onFrame: onFrame,
+    isPaused: isPaused
+  };
+  subscribers.push(item);
+  start();
+  return function () {
+    var index = subscribers.indexOf(item);
+    if (index !== -1) subscribers.splice(index, 1);
+    if (subscribers.length === 0 && rafId) {
+      cancelAnimationFrame(rafId);
+      running = false;
+      rafId = 0;
+    }
+  };
+}
+
+/**
+ * Gates drawing on "element intersects viewport AND the page tab is visible".
+ * Falls back to always-visible when IntersectionObserver is unavailable.
+ */
+function createVisibilityGuard(element) {
+  var intersecting = true;
+  var pageVisible = typeof document === 'undefined' || !document.hidden;
+  var disposed = false;
+  var observer = null;
+  if (typeof IntersectionObserver !== 'undefined') {
+    observer = new IntersectionObserver(function (entries) {
+      intersecting = entries.some(function (entry) {
+        return entry.isIntersecting;
+      });
+    }, {
+      rootMargin: '180px'
+    });
+    observer.observe(element);
+  }
+  var onVisibilityChange = function onVisibilityChange() {
+    pageVisible = typeof document !== 'undefined' && !document.hidden;
+  };
+  if (typeof document !== 'undefined') {
+    document.addEventListener('visibilitychange', onVisibilityChange);
+  }
+  return {
+    isVisible: function isVisible() {
+      return intersecting && pageVisible;
+    },
+    dispose: function dispose() {
+      if (disposed) return;
+      disposed = true;
+      if (observer) observer.disconnect();
+      if (typeof document !== 'undefined') {
+        document.removeEventListener('visibilitychange', onVisibilityChange);
+      }
+    }
+  };
+}
+
+var PROGRESS_MOTION_WIDTH = 240;
+var PROGRESS_MOTION_HEIGHT = 80;
+var PROGRESS_MOTION_DURATION = 12.0;
+var PROGRESS_MOTION_MAX_PX = 40.0;
+var PROFILE_CONFIG = {
+  'model-training': {
+    seed: 0.37,
+    broad: 0.58,
+    middle: 0.25,
+    detail: 0.13,
+    lobe: 0.24
+  },
+  'agent-migration': {
+    seed: 1.71,
+    broad: 0.72,
+    middle: 0.10,
+    detail: 0.03,
+    lobe: 0.18
+  },
+  'visual-training': {
+    seed: 2.83,
+    broad: 0.66,
+    middle: 0.16,
+    detail: 0.06,
+    lobe: 0.23
+  },
+  // ponytail: first-pass tide = asymmetric time warp on the same motion pipeline.
+  // Refine (foam line / wash streaks) in the shader after visual QA.
+  'tide': {
+    seed: 4.12,
+    broad: 0.82,
+    middle: 0.07,
+    detail: 0.02,
+    lobe: 0.30,
+    warp: 0.5
+  }
+};
+var CACHE$1 = Object.create(null);
+function gaussian(value, center, width) {
+  var delta = (value - center) / Math.max(width, 0.001);
+  return Math.exp(-delta * delta);
+}
+function createMotionData(id) {
+  var edgeStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'flow';
+  var profile = edgeStyle === 'tide' ? PROFILE_CONFIG.tide : PROFILE_CONFIG[id] || PROFILE_CONFIG['visual-training'];
+  var data = new Uint8Array(PROGRESS_MOTION_WIDTH * PROGRESS_MOTION_HEIGHT);
+  for (var x = 0; x < PROGRESS_MOTION_WIDTH; x += 1) {
+    var time = x / PROGRESS_MOTION_WIDTH * Math.PI * 2;
+    if (profile.warp) time += profile.warp * Math.sin(time * 2);
+    var centerA = 0.28 + Math.sin(time * 0.53 + profile.seed) * 0.13;
+    var centerB = 0.70 + Math.cos(time * 0.47 + profile.seed * 1.7) * 0.12;
+    for (var y = 0; y < PROGRESS_MOTION_HEIGHT; y += 1) {
+      var ratio = y / Math.max(PROGRESS_MOTION_HEIGHT - 1, 1);
+      var envelope = Math.pow(Math.max(Math.sin(Math.PI * ratio), 0), 0.48);
+      var broad = Math.sin(ratio * Math.PI * 2 * 1.35 + time * 0.58 + profile.seed) * profile.broad;
+      var middle = Math.sin(ratio * Math.PI * 2 * 3.2 - time * 0.91 + profile.seed * 2.1) * profile.middle;
+      var detail = Math.sin(ratio * Math.PI * 2 * 6.1 + time * 1.31 + profile.seed * 3.2) * profile.detail;
+      var lobes = (gaussian(ratio, centerA, 0.09) * Math.sin(time * 1.11 + profile.seed * 4.0) - gaussian(ratio, centerB, 0.10) * Math.cos(time * 0.97 + profile.seed * 3.3)) * profile.lobe;
+      var normalized = Math.max(-1, Math.min(1, (broad + middle + detail + lobes) * envelope));
+      data[y * PROGRESS_MOTION_WIDTH + x] = Math.round((normalized * 0.5 + 0.5) * 255);
+    }
+  }
+  return data;
+}
+function getProgressMotionData(id) {
+  var edgeStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'flow';
+  var key = "".concat(id, ":").concat(edgeStyle);
+  if (!CACHE$1[key]) CACHE$1[key] = createMotionData(id, edgeStyle);
+  return CACHE$1[key];
+}
+
+function hexToRgb01(hex) {
+  var value = Number.parseInt(hex.replace('#', ''), 16);
+  return [(value >> 16 & 255) / 255, (value >> 8 & 255) / 255, (value & 255) / 255];
+}
+function stringSeed$1(value) {
+  var hash = 2166136261;
+  var _iterator = _createForOfIteratorHelper(value),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var character = _step.value;
+      hash ^= character.charCodeAt(0);
+      hash = Math.imul(hash, 16777619);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return (hash >>> 0) / 4294967295;
+}
+var PROFILE_INDEX = {
+  'model-training': 0,
+  'agent-migration': 1,
+  'visual-training': 2,
+  'tide': 3
+};
+var MOTION_SCALE_FACTORS = {
+  'model-training': 1.05,
+  'agent-migration': 1.04,
+  'visual-training': 1.04,
+  '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}";
+function compileShader(gl, type, source) {
+  var shader = gl.createShader(type);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    var message = gl.getShaderInfoLog(shader) || 'Unknown shader compile error';
+    gl.deleteShader(shader);
+    throw new Error(message);
+  }
+  return shader;
+}
+function createProgram(gl) {
+  var vertex = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+  var fragment = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+  var program = gl.createProgram();
+  gl.attachShader(program, vertex);
+  gl.attachShader(program, fragment);
+  gl.linkProgram(program);
+  gl.deleteShader(vertex);
+  gl.deleteShader(fragment);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    var message = gl.getProgramInfoLog(program) || 'Unknown shader link error';
+    gl.deleteProgram(program);
+    throw new Error(message);
+  }
+  return program;
+}
+var ProgressFlowRenderer = /*#__PURE__*/function () {
+  function ProgressFlowRenderer(canvas, preset) {
+    var _PROFILE_INDEX$preset;
+    _classCallCheck(this, ProgressFlowRenderer);
+    var gl = canvas.getContext('webgl2', {
+      alpha: false,
+      antialias: true,
+      premultipliedAlpha: false,
+      powerPreference: 'high-performance'
+    });
+    if (!gl) throw new Error('WebGL2 unavailable');
+    this.canvas = canvas;
+    this.gl = gl;
+    this.program = createProgram(gl);
+    this.profile = preset.edgeStyle === 'tide' ? 3 : (_PROFILE_INDEX$preset = PROFILE_INDEX[preset.id]) !== null && _PROFILE_INDEX$preset !== void 0 ? _PROFILE_INDEX$preset : 2;
+    this.seed = stringSeed$1("".concat(preset.id, "-shader")) * 13.7 + 1.0;
+    this.colors = preset.colors.map(hexToRgb01);
+    this.motionData = getProgressMotionData(preset.id, preset.edgeStyle);
+    var motionFactor = preset.edgeStyle === 'tide' ? MOTION_SCALE_FACTORS.tide : MOTION_SCALE_FACTORS[preset.id] || 1.04;
+    this.motionScale = PROGRESS_MOTION_MAX_PX * motionFactor / 1257;
+    this.position = gl.getAttribLocation(this.program, 'a_position');
+    this.uniforms = {
+      resolution: gl.getUniformLocation(this.program, 'u_resolution'),
+      time: gl.getUniformLocation(this.program, 'u_time'),
+      progress: gl.getUniformLocation(this.program, 'u_progress'),
+      seed: gl.getUniformLocation(this.program, 'u_seed'),
+      profile: gl.getUniformLocation(this.program, 'u_profile'),
+      motion: gl.getUniformLocation(this.program, 'u_motion'),
+      effect: gl.getUniformLocation(this.program, 'u_effect'),
+      hasEffect: gl.getUniformLocation(this.program, 'u_hasEffect'),
+      effectFrames: gl.getUniformLocation(this.program, 'u_effectFrames'),
+      motionDuration: gl.getUniformLocation(this.program, 'u_motionDuration'),
+      motionScale: gl.getUniformLocation(this.program, 'u_motionScale'),
+      dark: gl.getUniformLocation(this.program, 'u_dark'),
+      accentA: gl.getUniformLocation(this.program, 'u_accentA'),
+      accentB: gl.getUniformLocation(this.program, 'u_accentB'),
+      glow: gl.getUniformLocation(this.program, 'u_glow')
+    };
+    this.buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW);
+    this.motionTexture = gl.createTexture();
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.motionTexture);
+    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.R8, PROGRESS_MOTION_WIDTH, PROGRESS_MOTION_HEIGHT, 0, gl.RED, gl.UNSIGNED_BYTE, this.motionData);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    this.effectTexture = gl.createTexture();
+    gl.activeTexture(gl.TEXTURE1);
+    gl.bindTexture(gl.TEXTURE_2D, this.effectTexture);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 1, 1, 0, gl.RGB, gl.UNSIGNED_BYTE, new Uint8Array([32, 33, 38]));
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    this.effectUploaded = false;
+  }
+  return _createClass(ProgressFlowRenderer, [{
+    key: "resize",
+    value: function resize(width, height, dpr) {
+      var pixelWidth = Math.max(1, Math.round(width * dpr));
+      var pixelHeight = Math.max(1, Math.round(height * dpr));
+      if (this.canvas.width !== pixelWidth || this.canvas.height !== pixelHeight) {
+        this.canvas.width = pixelWidth;
+        this.canvas.height = pixelHeight;
+      }
+      this.gl.viewport(0, 0, pixelWidth, pixelHeight);
+    }
+  }, {
+    key: "draw",
+    value: function draw(time, progress) {
+      var effectImage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+      var gl = this.gl;
+      gl.useProgram(this.program);
+      gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+      gl.enableVertexAttribArray(this.position);
+      gl.vertexAttribPointer(this.position, 2, gl.FLOAT, false, 0, 0);
+      gl.uniform2f(this.uniforms.resolution, this.canvas.width, this.canvas.height);
+      gl.uniform1f(this.uniforms.time, time);
+      gl.uniform1f(this.uniforms.progress, progress / 100);
+      gl.uniform1f(this.uniforms.seed, this.seed);
+      gl.uniform1f(this.uniforms.profile, this.profile);
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, this.motionTexture);
+      gl.uniform1i(this.uniforms.motion, 0);
+      gl.uniform1f(this.uniforms.motionDuration, PROGRESS_MOTION_DURATION);
+      gl.uniform1f(this.uniforms.motionScale, this.motionScale);
+      var hasEffect = this.effectUploaded ? 1 : 0;
+      if (!this.effectUploaded && effectImage && effectImage.complete && effectImage.naturalWidth > 0) {
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, this.effectTexture);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+        try {
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, effectImage);
+          this.effectUploaded = true;
+          hasEffect = 1;
+        } catch (error) {
+          console.warn('[画境观屿] 参考纹理图集上传失败，继续使用程序化降级。', error);
+        }
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+      }
+      gl.activeTexture(gl.TEXTURE1);
+      gl.bindTexture(gl.TEXTURE_2D, this.effectTexture);
+      gl.uniform1i(this.uniforms.effect, 1);
+      gl.uniform1f(this.uniforms.hasEffect, hasEffect);
+      gl.uniform1f(this.uniforms.effectFrames, 24);
+      gl.uniform3fv(this.uniforms.dark, this.colors[0]);
+      gl.uniform3fv(this.uniforms.accentA, this.colors[1]);
+      gl.uniform3fv(this.uniforms.accentB, this.colors[2]);
+      gl.uniform3fv(this.uniforms.glow, this.colors[3]);
+      gl.drawArrays(gl.TRIANGLES, 0, 6);
+    }
+  }, {
+    key: "setColors",
+    value: function setColors(colors) {
+      this.colors = colors.map(hexToRgb01);
+    }
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      var gl = this.gl;
+      gl.deleteBuffer(this.buffer);
+      gl.deleteTexture(this.motionTexture);
+      gl.deleteTexture(this.effectTexture);
+      gl.deleteProgram(this.program);
+      var lose = gl.getExtension('WEBGL_lose_context');
+      if (lose) lose.loseContext();
+    }
+  }]);
+}();
+function createProgressFlowRenderer(canvas, preset) {
+  try {
+    return new ProgressFlowRenderer(canvas, preset);
+  } catch (error) {
+    console.warn('[画境观屿] 进度流体 WebGL2 不可用，使用 Canvas 2D 降级。', error);
+    return null;
+  }
+}
+
+var PROGRESS_REFERENCE_DURATION = 12;
+var PROGRESS_REFERENCE_FRAME_COUNT = 24;
+var FRAME_WIDTH = 64;
+var FRAME_HEIGHT = 32;
+var CACHE = Object.create(null);
+var PALETTES = {
+  'model-training': ['#20131f', '#ff3f94', '#ff8a3d', '#fff06a'],
+  'agent-migration': ['#111a31', '#245bff', '#00cfff', '#5dffe6'],
+  'visual-training': ['#1f172b', '#7042ff', '#42f58d', '#c4ff8a'],
+  'tide': ['#0a2239', '#2e9bff', '#7fe3ff', '#eaf9ff']
+};
+function drawCloud(context, x, y, radiusX, radiusY, color, alpha) {
+  context.save();
+  context.translate(x, y);
+  context.scale(1, radiusY / radiusX);
+  var gradient = context.createRadialGradient(0, 0, 0, 0, 0, radiusX);
+  gradient.addColorStop(0, "".concat(color).concat(Math.round(alpha * 255).toString(16).padStart(2, '0')));
+  gradient.addColorStop(0.46, "".concat(color).concat(Math.round(alpha * 0.42 * 255).toString(16).padStart(2, '0')));
+  gradient.addColorStop(1, "".concat(color, "00"));
+  context.fillStyle = gradient;
+  context.fillRect(-radiusX, -radiusX, radiusX * 2, radiusX * 2);
+  context.restore();
+}
+function createAtlas(id) {
+  var palette = PALETTES[id] || PALETTES['visual-training'];
+  var canvas = document.createElement('canvas');
+  canvas.width = FRAME_WIDTH * PROGRESS_REFERENCE_FRAME_COUNT;
+  canvas.height = FRAME_HEIGHT;
+  var context = canvas.getContext('2d');
+  for (var frame = 0; frame < PROGRESS_REFERENCE_FRAME_COUNT; frame += 1) {
+    var phase = frame / PROGRESS_REFERENCE_FRAME_COUNT * Math.PI * 2;
+    var left = frame * FRAME_WIDTH;
+    context.save();
+    context.translate(left, 0);
+    context.fillStyle = palette[0];
+    context.fillRect(0, 0, FRAME_WIDTH, FRAME_HEIGHT);
+    context.globalCompositeOperation = 'screen';
+    drawCloud(context, 35 + Math.sin(phase * 0.83) * 5, 10 + Math.cos(phase * 0.61) * 5, 27, 18, palette[1], id === 'agent-migration' ? 0.32 : 0.42);
+    drawCloud(context, 45 + Math.cos(phase * 0.72) * 4, 23 + Math.sin(phase * 0.54) * 4, 22, 15, palette[2], 0.44);
+    drawCloud(context, 53 + Math.sin(phase * 1.07) * 2, 16 + Math.cos(phase * 0.89) * 6, 12, 13, palette[3], id === 'model-training' ? 0.30 : 0.20);
+    context.globalCompositeOperation = 'source-over';
+    var trough = context.createRadialGradient(41, 16, 1, 41, 16, 17);
+    trough.addColorStop(0, 'rgba(5,6,11,0.64)');
+    trough.addColorStop(0.58, 'rgba(6,7,12,0.26)');
+    trough.addColorStop(1, 'rgba(6,7,12,0)');
+    context.fillStyle = trough;
+    context.fillRect(20, 0, 44, FRAME_HEIGHT);
+    context.restore();
+  }
+  var image = new Image();
+  image.decoding = 'async';
+  var state = {
+    image: image,
+    ready: false
+  };
+  image.addEventListener('load', function () {
+    state.ready = true;
+  }, {
+    once: true
+  });
+  image.addEventListener('error', function () {
+    state.ready = false;
+  }, {
+    once: true
+  });
+  image.src = canvas.toDataURL('image/png');
+  return state;
+}
+function getProgressReferenceAtlas(id) {
+  if (!CACHE[id]) CACHE[id] = createAtlas(id);
+  return CACHE[id];
+}
+
+/**
+ * Attach a WebGL2 fluid overlay to a progress capsule root.
+ *
+ * @param {object} params
+ * @param {HTMLElement} params.root    progress capsule root element
+ * @param {HTMLCanvasElement} params.canvas  2D fallback canvas (kept beneath)
+ * @param {object} params.preset      progress preset
+ * @param {() => number} params.getProgress  reads the current progress value
+ * @returns {{ update(flowTime: number): void, dispose(): void } | null}
+ */
+function attachProgressFlowOverlay(_ref) {
+  var root = _ref.root,
+    canvas = _ref.canvas,
+    preset = _ref.preset,
+    getProgress = _ref.getProgress;
+  var overlay = document.createElement('canvas');
+  overlay.className = 'hj-progress-canvas hj-progress-overlay';
+  overlay.setAttribute('aria-hidden', 'true');
+  canvas.insertAdjacentElement('afterend', overlay);
+  var renderer = createProgressFlowRenderer(overlay, preset);
+  if (!renderer) {
+    overlay.remove();
+    return null;
+  }
+  var atlas = getProgressReferenceAtlas(preset.id);
+  root.classList.add('has-webgl-progress');
+  var resize = function resize() {
+    var bounds = root.getBoundingClientRect();
+    var width = Math.max(1, bounds.width);
+    var height = Math.max(1, bounds.height);
+    var dpr = Math.min(window.devicePixelRatio || 1, 2);
+    overlay.style.width = "".concat(width, "px");
+    overlay.style.height = "".concat(height, "px");
+    renderer.resize(width, height, dpr);
+  };
+  var resizeObserver = null;
+  var onWindowResize = null;
+  if (typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver(resize);
+    resizeObserver.observe(root);
+  } else {
+    onWindowResize = resize;
+    window.addEventListener('resize', onWindowResize);
+  }
+  resize();
+  return {
+    update: function update(flowTime) {
+      var effectTime = flowTime % PROGRESS_REFERENCE_DURATION;
+      var progress = getProgress();
+      renderer.draw(effectTime, Number.isFinite(progress) ? progress : preset.initialProgress, atlas.ready ? atlas.image : null);
+    },
+    setColors: function setColors(colors) {
+      renderer.setColors(colors);
+    },
+    dispose: function dispose() {
+      if (resizeObserver) resizeObserver.disconnect();
+      if (onWindowResize) window.removeEventListener('resize', onWindowResize);
+      renderer.dispose();
+      overlay.remove();
+      root.classList.remove('has-webgl-progress');
+    }
+  };
+}
+
+var clamp = function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+};
+var SUPPORTS_CTX_FILTER = typeof CanvasRenderingContext2D !== 'undefined' && 'filter' in CanvasRenderingContext2D.prototype;
+function stringSeed(value) {
+  var hash = 2166136261;
+  var _iterator = _createForOfIteratorHelper(value),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var character = _step.value;
+      hash ^= character.charCodeAt(0);
+      hash = Math.imul(hash, 16777619);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return (hash >>> 0) / 4294967295;
+}
+function interpolate(template, values) {
+  return template.replace(/\{(\w+)\}/g, function (_, key) {
+    return values[key] !== undefined ? values[key] : '';
+  });
+}
+function prefersReducedMotion() {
+  return typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+var FLOW_PROFILES = {
+  'model-training': {
+    cycles: [0.98, 3.05, 5.45],
+    amplitudes: [11.2, 11.0, 5.2],
+    speeds: [0.31, -0.53, 0.78],
+    bulgeAmplitude: 8.2,
+    timeScale: 1.0,
+    glowWidth: 5.8,
+    haloWidth: 20,
+    whiteAlpha: 0.72,
+    whiteWidth: 1.15,
+    cloudWidth: 0.17,
+    autoRange: [25, 66]
+  },
+  'agent-migration': {
+    cycles: [0.62, 1.55, 2.95],
+    amplitudes: [16.0, 7.8, 2.3],
+    speeds: [0.25, -0.4, 0.60],
+    bulgeAmplitude: 8.4,
+    timeScale: 0.82,
+    glowWidth: 6.3,
+    haloWidth: 21,
+    whiteAlpha: 0.18,
+    whiteWidth: 0.45,
+    cloudWidth: 0.18,
+    autoRange: [24, 62]
+  },
+  'visual-training': {
+    cycles: [0.88, 2.45, 4.35],
+    amplitudes: [12.8, 10.2, 4.3],
+    speeds: [0.28, -0.47, 0.69],
+    bulgeAmplitude: 7.3,
+    timeScale: 0.91,
+    glowWidth: 6.0,
+    haloWidth: 21,
+    whiteAlpha: 0.30,
+    whiteWidth: 0.55,
+    cloudWidth: 0.175,
+    autoRange: [20, 75]
+  },
+  // ponytail: first-pass tide = asymmetric surge on the 2D fallback path.
+  // Tune surge/amplitudes after visual QA against the WebGL overlay.
+  'tide': {
+    cycles: [0.72, 1.9, 4.2],
+    amplitudes: [19.0, 6.5, 1.5],
+    speeds: [0.42, -0.5, 0.66],
+    bulgeAmplitude: 9.5,
+    timeScale: 0.85,
+    glowWidth: 6.2,
+    haloWidth: 21,
+    whiteAlpha: 0.5,
+    whiteWidth: 1.0,
+    cloudWidth: 0.18,
+    autoRange: [18, 70],
+    surge: 0.55
+  }
+};
+var ProgressCapsuleController = /*#__PURE__*/function () {
+  function ProgressCapsuleController(_ref) {
+    var _options$min,
+      _options$max,
+      _options$value,
+      _this = this;
+    var root = _ref.root,
+      canvas = _ref.canvas,
+      valueElement = _ref.valueElement,
+      preset = _ref.preset,
+      emitter = _ref.emitter,
+      options = _ref.options,
+      copy = _ref.copy;
+    _classCallCheck(this, ProgressCapsuleController);
+    this.root = root;
+    this.canvas = canvas;
+    this.valueElement = valueElement;
+    this.preset = preset;
+    this.emitter = emitter;
+    this.options = options;
+    this.copy = copy;
+    this.profile = preset.edgeStyle === 'tide' ? FLOW_PROFILES.tide : FLOW_PROFILES[preset.id] || FLOW_PROFILES['visual-training'];
+    this.min = (_options$min = options.min) !== null && _options$min !== void 0 ? _options$min : 0;
+    this.max = (_options$max = options.max) !== null && _options$max !== void 0 ? _options$max : 100;
+    this.dprCap = dprCapFor(options.quality);
+    this.ctx = canvas.getContext('2d');
+    this.value = clamp((_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : preset.initialProgress, this.min, this.max);
+    this.dragging = false;
+    this.webglActive = false;
+    this.flowTime = stringSeed(preset.id) * 31;
+    this.seed = stringSeed("".concat(preset.id, "-reference")) * Math.PI * 2;
+    this.randomState = Math.floor(stringSeed("".concat(preset.id, "-auto")) * 0x7fffffff) || 1;
+    this.dpr = 1;
+    this.width = 0;
+    this.height = 0;
+    this.handlers = {};
+    this.resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(function () {
+      return _this.resizeCanvas();
+    }) : null;
+    if (this.resizeObserver) this.resizeObserver.observe(this.root);else window.addEventListener('resize', this.resizeCanvas);
+    this.suppressEvents = true;
+    this.setProgress(this.value, 'init');
+    this.suppressEvents = false;
+    this.bindEvents();
+    this.resizeCanvas();
+  }
+  return _createClass(ProgressCapsuleController, [{
+    key: "random",
+    value: function random() {
+      this.randomState = Math.imul(this.randomState, 1664525) + 1013904223 >>> 0;
+      return this.randomState / 4294967296;
+    }
+  }, {
+    key: "setProgress",
+    value: function setProgress(nextValue) {
+      var source = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
+      this.value = clamp(nextValue, this.min, this.max);
+      var rounded = Math.round(this.value);
+      this.root.style.setProperty('--progress', this.value.toFixed(2));
+      this.root.setAttribute('aria-valuenow', String(rounded));
+      this.root.setAttribute('aria-valuetext', "".concat(rounded).concat(this.copy.valueSuffix));
+      this.valueElement.textContent = "".concat(rounded).concat(this.copy.valueSuffix);
+      if (!this.suppressEvents) this.emitter.emit('change', {
+        value: this.value,
+        source: source
+      });
+    }
+  }, {
+    key: "resizeCanvas",
+    value: function resizeCanvas() {
+      var bounds = this.root.getBoundingClientRect();
+      this.dpr = Math.min(window.devicePixelRatio || 1, this.dprCap);
+      this.width = Math.max(1, bounds.width);
+      this.height = Math.max(1, bounds.height);
+      this.canvas.width = Math.round(this.width * this.dpr);
+      this.canvas.height = Math.round(this.height * this.dpr);
+      this.canvas.style.width = "".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 edgeEnvelope(yRatio) {
+      var edge = Math.sin(Math.PI * clamp(yRatio, 0, 1));
+      return Math.pow(Math.max(edge, 0), 0.48);
+    }
+  }, {
+    key: "localBulge",
+    value: function localBulge(yRatio, time, index) {
+      var direction = index === 0 ? 1 : -1;
+      var center = 0.28 + index * 0.40 + Math.sin(time * (0.19 + index * 0.035) + this.seed * (1.1 + index)) * 0.13;
+      var width = 0.075 + index * 0.016 + Math.sin(time * 0.13 + this.seed * 2.1) * 0.012;
+      var distance = (yRatio - center) / Math.max(width, 0.035);
+      var gaussian = Math.exp(-0.5 * distance * distance);
+      return gaussian * Math.sin(time * (0.71 + index * 0.09) + this.seed * (2.7 + index)) * this.profile.bulgeAmplitude * direction;
+    }
+  }, {
+    key: "edgeOffset",
+    value: function edgeOffset(y, time) {
+      var phase = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      var amplitudeScale = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+      var yRatio = this.height > 0 ? y / this.height : 0;
+      var envelope = this.edgeEnvelope(yRatio);
+      var scaledTime = time * this.profile.timeScale;
+      var phaseTime = this.profile.surge ? scaledTime + this.profile.surge * Math.sin(scaledTime * 2) : scaledTime;
+      var offset = 0;
+      for (var index = 0; index < this.profile.cycles.length; index += 1) {
+        var cycle = this.profile.cycles[index];
+        var amplitude = this.profile.amplitudes[index];
+        var speed = this.profile.speeds[index];
+        var amplitudeMotion = 0.74 + 0.26 * Math.sin(phaseTime * (0.17 + index * 0.045) + this.seed * (index + 2.4));
+        offset += Math.sin(yRatio * Math.PI * 2 * cycle + phaseTime * speed * Math.PI * 2 + this.seed * (index + 1) + phase) * amplitude * amplitudeMotion;
+      }
+      offset += this.localBulge(yRatio, phaseTime + phase, 0);
+      offset += this.localBulge(yRatio, phaseTime - phase * 0.7, 1);
+      return offset * envelope * amplitudeScale;
+    }
+  }, {
+    key: "createEdgePath",
+    value: function createEdgePath(ctx, baseX, time) {
+      var phase = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+      var amplitudeScale = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
+      var step = Math.max(1.8, this.height / 92);
+      ctx.beginPath();
+      for (var y = 0; y <= this.height + step; y += step) {
+        var x = baseX + this.edgeOffset(y, time, phase, amplitudeScale);
+        if (y === 0) ctx.moveTo(x, y);else ctx.lineTo(x, y);
+      }
+    }
+  }, {
+    key: "createFillPath",
+    value: function createFillPath(ctx, baseX, time) {
+      var phase = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+      var amplitudeScale = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
+      var step = Math.max(1.8, this.height / 92);
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      ctx.lineTo(baseX + this.edgeOffset(0, time, phase, amplitudeScale), 0);
+      for (var y = step; y <= this.height + step; y += step) {
+        ctx.lineTo(baseX + this.edgeOffset(y, time, phase, amplitudeScale), y);
+      }
+      ctx.lineTo(0, this.height);
+      ctx.closePath();
+    }
+  }, {
+    key: "drawEllipticalGlow",
+    value: function drawEllipticalGlow(x, y, radiusX, radiusY, color, alpha) {
+      var ctx = this.ctx;
+      ctx.save();
+      ctx.translate(x, y);
+      ctx.scale(1, radiusY / radiusX);
+      var gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, radiusX);
+      gradient.addColorStop(0, hexToRgba(color, alpha));
+      gradient.addColorStop(0.42, hexToRgba(color, alpha * 0.48));
+      gradient.addColorStop(1, hexToRgba(color, 0));
+      ctx.globalCompositeOperation = 'screen';
+      ctx.fillStyle = gradient;
+      ctx.fillRect(-radiusX, -radiusX, radiusX * 2, radiusX * 2);
+      ctx.restore();
+    }
+  }, {
+    key: "drawDarkEllipticalShadow",
+    value: function drawDarkEllipticalShadow(x, y, radiusX, radiusY, alpha) {
+      var ctx = this.ctx;
+      ctx.save();
+      ctx.translate(x, y);
+      ctx.scale(1, radiusY / radiusX);
+      var gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, radiusX);
+      gradient.addColorStop(0, "rgba(6, 6, 11, ".concat(alpha, ")"));
+      gradient.addColorStop(0.54, "rgba(8, 8, 14, ".concat(alpha * 0.62, ")"));
+      gradient.addColorStop(1, 'rgba(8, 8, 14, 0)');
+      ctx.globalCompositeOperation = 'source-over';
+      ctx.fillStyle = gradient;
+      ctx.fillRect(-radiusX, -radiusX, radiusX * 2, radiusX * 2);
+      ctx.restore();
+    }
+  }, {
+    key: "drawColorClouds",
+    value: function drawColorClouds(shoreline, time, accentA, accentB, glow) {
+      this.ctx;
+      var width = this.width;
+      var height = this.height;
+      var scale = this.profile.cloudWidth;
+      var t = time * this.profile.timeScale;
+      var upperY = height * (0.28 + Math.sin(t * 0.24 + this.seed) * 0.13);
+      var lowerY = height * (0.70 + Math.cos(t * 0.21 + this.seed * 1.7) * 0.12);
+      var middleY = height * (0.49 + Math.sin(t * 0.31 + this.seed * 2.3) * 0.15);
+      var farX = shoreline - width * 0.095;
+      var farRx = Math.max(52, width * scale);
+      var farRy = height * 0.42;
+      this.drawEllipticalGlow(farX, upperY, farRx, farRy, accentA, 0.38);
+      this.drawDarkEllipticalShadow(farX + farRx * 0.16, upperY, farRx * 0.58, farRy * 0.66, 0.74);
+      var lowerX = shoreline - width * 0.072;
+      var lowerRx = Math.max(44, width * scale * 0.82);
+      var lowerRy = height * 0.36;
+      this.drawEllipticalGlow(lowerX, lowerY, lowerRx, lowerRy, accentB, 0.31);
+      this.drawDarkEllipticalShadow(lowerX + lowerRx * 0.14, lowerY, lowerRx * 0.54, lowerRy * 0.62, 0.64);
+      this.drawEllipticalGlow(shoreline - width * 0.034, middleY, Math.max(30, width * scale * 0.48), height * 0.27, glow, 0.20);
+    }
+  }, {
+    key: "drawPathBand",
+    value: function drawPathBand(_ref2) {
+      var baseX = _ref2.baseX,
+        time = _ref2.time,
+        phase = _ref2.phase,
+        amplitudeScale = _ref2.amplitudeScale,
+        color = _ref2.color,
+        alpha = _ref2.alpha,
+        blur = _ref2.blur,
+        width = _ref2.width,
+        _ref2$composite = _ref2.composite,
+        composite = _ref2$composite === void 0 ? 'screen' : _ref2$composite;
+      var ctx = this.ctx;
+      this.createEdgePath(ctx, baseX, time, phase, amplitudeScale);
+      ctx.save();
+      ctx.globalCompositeOperation = composite;
+      ctx.globalAlpha = alpha;
+      // Safari < 18 and some old WebViews ignore ctx.filter; setting it is a
+      // no-op there, so only assign when supported to keep intent explicit.
+      if (SUPPORTS_CTX_FILTER) ctx.filter = "blur(".concat(blur, "px)");
+      ctx.strokeStyle = color;
+      ctx.lineWidth = width;
+      ctx.stroke();
+      ctx.restore();
+    }
+  }, {
+    key: "setRange",
+    value: function setRange(min, max) {
+      this.min = min;
+      this.max = max;
+      var clamped = clamp(this.value, this.min, this.max);
+      if (clamped !== this.value) this.setProgress(clamped, 'prop');
+    }
+  }, {
+    key: "drawReferenceFlow",
+    value: function drawReferenceFlow() {
+      var ctx = this.ctx;
+      var width = this.width;
+      var height = this.height;
+      if (!ctx || width <= 0 || height <= 0) return;
+      var shoreline = width * (this.value / 100);
+      var time = this.flowTime;
+      var _this$preset$colors = _slicedToArray(this.preset.colors, 4),
+        dark = _this$preset$colors[0],
+        accentA = _this$preset$colors[1],
+        accentB = _this$preset$colors[2],
+        glow = _this$preset$colors[3];
+      ctx.clearRect(0, 0, width, height);
+      ctx.fillStyle = '#202126';
+      ctx.fillRect(0, 0, width, height);
+      this.createFillPath(ctx, shoreline, time, 0, 1);
+      var bodyGradient = ctx.createLinearGradient(0, 0, Math.max(shoreline, 1), 0);
+      bodyGradient.addColorStop(0, dark);
+      bodyGradient.addColorStop(0.74, dark);
+      bodyGradient.addColorStop(0.89, hexToRgba(dark, 0.99));
+      bodyGradient.addColorStop(0.955, hexToRgba(accentA, 0.09));
+      bodyGradient.addColorStop(0.992, hexToRgba(accentB, 0.54));
+      bodyGradient.addColorStop(1, hexToRgba(glow, 0.78));
+      ctx.fillStyle = bodyGradient;
+      ctx.fill();
+      this.drawColorClouds(shoreline, time, accentA, accentB, glow);
+      this.drawPathBand({
+        baseX: shoreline - width * 0.105,
+        time: time,
+        phase: 1.42,
+        amplitudeScale: 1.18,
+        color: accentA,
+        alpha: 0.22,
+        blur: 21,
+        width: 54
+      });
+      this.drawPathBand({
+        baseX: shoreline - width * 0.073,
+        time: time,
+        phase: -0.92,
+        amplitudeScale: 1.06,
+        color: accentB,
+        alpha: 0.30,
+        blur: 15,
+        width: 42
+      });
+      this.drawPathBand({
+        baseX: shoreline - width * 0.047,
+        time: time,
+        phase: 0.42,
+        amplitudeScale: 0.94,
+        color: 'rgba(5, 5, 10, 0.92)',
+        alpha: 0.72,
+        blur: 12,
+        width: 34,
+        composite: 'source-over'
+      });
+      this.drawPathBand({
+        baseX: shoreline - width * 0.025,
+        time: time,
+        phase: -0.28,
+        amplitudeScale: 0.96,
+        color: accentB,
+        alpha: 0.66,
+        blur: 8,
+        width: 28
+      });
+      ctx.save();
+      this.createFillPath(ctx, shoreline, time, 0, 1);
+      ctx.clip();
+      this.createEdgePath(ctx, shoreline, time, 0, 1);
+      ctx.save();
+      ctx.globalCompositeOperation = 'screen';
+      ctx.strokeStyle = hexToRgba(accentA, 0.20);
+      ctx.lineWidth = this.profile.haloWidth;
+      ctx.shadowColor = accentA;
+      ctx.shadowBlur = this.profile.haloWidth * 0.72;
+      ctx.stroke();
+      ctx.restore();
+      ctx.save();
+      ctx.globalCompositeOperation = 'screen';
+      ctx.strokeStyle = hexToRgba(accentB, 0.78);
+      ctx.lineWidth = this.profile.glowWidth + 4.2;
+      ctx.shadowColor = accentB;
+      ctx.shadowBlur = 8;
+      ctx.stroke();
+      ctx.restore();
+      ctx.save();
+      ctx.globalCompositeOperation = 'screen';
+      ctx.strokeStyle = hexToRgba(glow, 0.88);
+      ctx.lineWidth = this.profile.glowWidth;
+      ctx.shadowColor = glow;
+      ctx.shadowBlur = 5;
+      ctx.stroke();
+      ctx.restore();
+      ctx.restore();
+      ctx.save();
+      ctx.globalCompositeOperation = 'screen';
+      ctx.strokeStyle = hexToRgba(glow, 0.84);
+      ctx.lineWidth = 2.15;
+      ctx.shadowColor = glow;
+      ctx.shadowBlur = 2.5;
+      this.createEdgePath(ctx, shoreline, time, 0, 1);
+      ctx.stroke();
+      ctx.restore();
+      if (this.profile.whiteAlpha > 0.05) {
+        ctx.save();
+        ctx.globalCompositeOperation = 'screen';
+        ctx.strokeStyle = "rgba(255,255,245,".concat(this.profile.whiteAlpha, ")");
+        ctx.lineWidth = this.profile.whiteWidth;
+        this.createEdgePath(ctx, shoreline, time, 0, 1);
+        ctx.stroke();
+        ctx.restore();
+      }
+    }
+  }, {
+    key: "updateFromPointer",
+    value: function updateFromPointer(event) {
+      var bounds = this.root.getBoundingClientRect();
+      var ratio = bounds.width > 0 ? (event.clientX - bounds.left) / bounds.width : 0;
+      this.setProgress(ratio * 100, 'drag');
+    }
+  }, {
+    key: "beginDrag",
+    value: function beginDrag(event) {
+      if (event.button !== undefined && event.button !== 0) return;
+      event.preventDefault();
+      this.dragging = true;
+      this.root.classList.add('is-dragging');
+      try {
+        var _this$root$setPointer, _this$root;
+        (_this$root$setPointer = (_this$root = this.root).setPointerCapture) === null || _this$root$setPointer === void 0 || _this$root$setPointer.call(_this$root, event.pointerId);
+      } catch (_unused) {}
+      this.emitter.emit('dragstart', {
+        value: this.value
+      });
+      this.updateFromPointer(event);
+    }
+  }, {
+    key: "moveDrag",
+    value: function moveDrag(event) {
+      if (!this.dragging) return;
+      event.preventDefault();
+      this.updateFromPointer(event);
+    }
+  }, {
+    key: "endDrag",
+    value: function endDrag(event) {
+      if (!this.dragging) return;
+      this.dragging = false;
+      this.root.classList.remove('is-dragging');
+      try {
+        var _this$root$hasPointer, _this$root2;
+        if ((event === null || event === void 0 ? void 0 : event.pointerId) !== undefined && (_this$root$hasPointer = (_this$root2 = this.root).hasPointerCapture) !== null && _this$root$hasPointer !== void 0 && _this$root$hasPointer.call(_this$root2, event.pointerId)) {
+          this.root.releasePointerCapture(event.pointerId);
+        }
+      } catch (_unused2) {}
+      this.emitter.emit('dragend', {
+        value: this.value
+      });
+    }
+  }, {
+    key: "bindEvents",
+    value: function bindEvents() {
+      var _this2 = this;
+      if (this.options.draggable !== false) {
+        this.handlers.pointerdown = function (event) {
+          return _this2.beginDrag(event);
+        };
+        this.handlers.pointermove = function (event) {
+          return _this2.moveDrag(event);
+        };
+        this.handlers.pointerup = function (event) {
+          return _this2.endDrag(event);
+        };
+        this.handlers.pointercancel = function (event) {
+          return _this2.endDrag(event);
+        };
+        this.root.addEventListener('pointerdown', this.handlers.pointerdown);
+        this.root.addEventListener('pointermove', this.handlers.pointermove);
+        this.root.addEventListener('pointerup', this.handlers.pointerup);
+        this.root.addEventListener('pointercancel', this.handlers.pointercancel);
+      }
+      if (this.options.keyboard !== false) {
+        this.handlers.keydown = function (event) {
+          var actions = {
+            ArrowLeft: -2,
+            ArrowDown: -2,
+            ArrowRight: 2,
+            ArrowUp: 2,
+            PageDown: -10,
+            PageUp: 10
+          };
+          if (event.key === 'Home') {
+            event.preventDefault();
+            _this2.setProgress(_this2.min, 'keyboard');
+          } else if (event.key === 'End') {
+            event.preventDefault();
+            _this2.setProgress(_this2.max, 'keyboard');
+          } else if (actions[event.key]) {
+            event.preventDefault();
+            _this2.setProgress(_this2.value + actions[event.key], 'keyboard');
+          } else {
+            return;
+          }
+        };
+        this.root.addEventListener('keydown', this.handlers.keydown);
+      }
+    }
+  }, {
+    key: "update",
+    value: function update(delta, paused) {
+      if (!paused) this.flowTime += delta;
+    }
+  }, {
+    key: "draw",
+    value: function draw() {
+      // Performance fix: when the WebGL overlay is active the 2D layer is
+      // hidden behind it, so drawing it every frame would be wasted CPU.
+      if (this.webglActive) return;
+      this.drawReferenceFlow();
+    }
+  }, {
+    key: "randomize",
+    value: function randomize() {
+      this.flowTime = this.random() * 40;
+    }
+  }, {
+    key: "setColors",
+    value: function setColors(colors) {
+      if (!Array.isArray(colors) || colors.length !== 4) return;
+      this.preset = _objectSpread2(_objectSpread2({}, this.preset), {}, {
+        colors: colors
+      });
+    }
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      if (this.resizeObserver) this.resizeObserver.disconnect();else window.removeEventListener('resize', this.resizeCanvas);
+      for (var _i = 0, _Object$keys = Object.keys(this.handlers); _i < _Object$keys.length; _i++) {
+        var name = _Object$keys[_i];
+        var handler = this.handlers[name];
+        this.root.removeEventListener(name, handler);
+      }
+      this.handlers = {};
+    }
+  }]);
+}();
+
+/**
+ * Mount a fluid progress capsule into `container`.
+ *
+ * Options: preset (id/code/name or object), width, height, value, min, max,
+ * draggable, keyboard, colors, edgeStyle, quality,
+ * respectReducedMotion, copy, cssVars.
+ */
+function createProgressCapsule(container) {
+  var _options$preset, _merged$min, _merged$max;
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (!container || typeof container.appendChild !== 'function') {
+    throw new Error('createProgressCapsule: container element is required');
+  }
+  var preset = _objectSpread2({}, getPreset('progress', (_options$preset = options.preset) !== null && _options$preset !== void 0 ? _options$preset : 'NC-10'));
+  var merged = normalizeOptions(DEFAULTS.progress, preset, options);
+  var copy = _objectSpread2(_objectSpread2({}, COPY), merged.copy || {});
+  var root = document.createElement('div');
+  root.className = 'hj-capsule-root hj-progress-root';
+  root.setAttribute('role', 'slider');
+  root.setAttribute('tabindex', '0');
+  root.setAttribute('data-draggable', String(merged.draggable !== false));
+  root.setAttribute('aria-valuemin', String((_merged$min = merged.min) !== null && _merged$min !== void 0 ? _merged$min : 0));
+  root.setAttribute('aria-valuemax', String((_merged$max = merged.max) !== null && _merged$max !== void 0 ? _merged$max : 100));
+  root.setAttribute('aria-valuenow', String(preset.initialProgress));
+  root.setAttribute('aria-label', interpolate(copy.progressAria, {
+    brand: copy.brandName,
+    code: preset.code,
+    name: preset.name
+  }));
+  if (merged.keyboard === false) root.setAttribute('tabindex', '-1');
+  var canvas = document.createElement('canvas');
+  canvas.className = 'hj-progress-canvas';
+  canvas.setAttribute('aria-hidden', 'true');
+  var copyEnabled = copy.enabled !== false && merged.showCopy !== false;
+  var copyText = function copyText(key, fallback) {
+    var value = copy[key];
+    return value === undefined ? fallback : value;
+  };
+  function buildCopyHtml() {
+    var html = '';
+    var brandText = copy.brandName || '';
+    var subtitleText = copyText('subtitle', preset.subtitle);
+    if (brandText) html += "<span class=\"hj-progress-name\">".concat(brandText, "</span>");
+    if (subtitleText) html += "<span class=\"hj-progress-subtitle\">".concat(subtitleText, "</span>");
+    return html;
+  }
+  var copyLayer = document.createElement('div');
+  copyLayer.className = 'hj-progress-copy';
+  var renderCopy = function renderCopy() {
+    if (copyEnabled) copyLayer.innerHTML = buildCopyHtml();
+  };
+  renderCopy();
+  if (copy.background) {
+    root.style.setProperty('--hj-progress-copy-bg', copy.background);
+    root.style.setProperty('--hj-progress-copy-pad', '6px 12px');
+  }
+  if (copy.color) root.style.setProperty('--hj-progress-copy-color', copy.color);
+  var valueElement = document.createElement('div');
+  valueElement.className = 'hj-progress-value';
+  valueElement.setAttribute('aria-hidden', 'true');
+  var dragLabel = document.createElement('span');
+  dragLabel.className = 'hj-progress-drag-label';
+  dragLabel.setAttribute('aria-hidden', 'true');
+  dragLabel.textContent = copy.dragLabel;
+  root.appendChild(canvas);
+  if (copyEnabled) root.appendChild(copyLayer);
+  root.appendChild(valueElement);
+  root.appendChild(dragLabel);
+  container.appendChild(root);
+  var emitter = createEmitter();
+  var paused = merged.respectReducedMotion && prefersReducedMotion();
+  var applySize = function applySize() {
+    root.style.width = parseSize(merged.width);
+    root.style.height = parseSize(merged.height);
+    var vars = merged.cssVars || {};
+    for (var _i2 = 0, _Object$keys2 = Object.keys(vars); _i2 < _Object$keys2.length; _i2++) {
+      var name = _Object$keys2[_i2];
+      root.style.setProperty(name, vars[name]);
+    }
+  };
+  applySize();
+  var controller = new ProgressCapsuleController({
+    root: root,
+    canvas: canvas,
+    valueElement: valueElement,
+    preset: preset,
+    emitter: emitter,
+    options: merged,
+    copy: copy
+  });
+  var overlay = null;
+  if (merged.renderer !== 'canvas2d') {
+    overlay = attachProgressFlowOverlay({
+      root: root,
+      canvas: canvas,
+      preset: preset,
+      getProgress: function getProgress() {
+        return controller.value;
+      }
+    });
+  }
+  if (overlay) controller.webglActive = true;
+  var visibility = createVisibilityGuard(root);
+  var flowTime = 0;
+  var unsubscribe = subscribeScheduler(function (delta, now) {
+    flowTime += delta;
+    controller.update(delta, false);
+    if (visibility.isVisible()) {
+      controller.draw();
+      if (overlay) overlay.update(flowTime);
+    }
+  }, function () {
+    return paused;
+  });
+  emitter.emit('ready', {
+    preset: _objectSpread2({}, preset)
+  });
+  var syncDom = function syncDom() {
+    root.setAttribute('aria-label', interpolate(copy.progressAria, {
+      brand: copy.brandName,
+      code: preset.code,
+      name: preset.name
+    }));
+    renderCopy();
+  };
+  return {
+    element: root,
+    canvas: canvas,
+    preset: preset,
+    on: emitter.on,
+    off: emitter.off,
+    setValue: function setValue(value) {
+      var source = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'prop';
+      controller.setProgress(value, source);
+      return this;
+    },
+    getValue: function getValue() {
+      return controller.value;
+    },
+    setRange: function setRange(min, max) {
+      controller.setRange(min, max);
+      return this;
+    },
+    setPreset: function setPreset(ref) {
+      var next = getPreset('progress', ref);
+      Object.assign(preset, next);
+      controller.preset = next;
+      controller.profile = next.edgeStyle === 'tide' ? FLOW_PROFILES.tide : FLOW_PROFILES[next.id] || FLOW_PROFILES['visual-training'];
+      controller.flowTime = stringSeed(next.id) * 31;
+      controller.seed = stringSeed("".concat(next.id, "-reference")) * Math.PI * 2;
+      syncDom();
+      if (overlay) {
+        overlay.dispose();
+        overlay = attachProgressFlowOverlay({
+          root: root,
+          canvas: canvas,
+          preset: next,
+          getProgress: function getProgress() {
+            return controller.value;
+          }
+        });
+      }
+      controller.webglActive = Boolean(overlay);
+      controller.resizeCanvas();
+      emitter.emit('presetchange', {
+        preset: _objectSpread2({}, next)
+      });
+      return this;
+    },
+    setColors: function setColors(colors) {
+      if (!Array.isArray(colors) || colors.length !== 4) return this;
+      controller.setColors(colors);
+      if (overlay) overlay.setColors(colors);
+      controller.resizeCanvas();
+      return this;
+    },
+    setSize: function setSize(width, height) {
+      if (width !== undefined) merged.width = width;
+      if (height !== undefined) merged.height = height;
+      applySize();
+      controller.resizeCanvas();
+      return this;
+    },
+    randomize: function randomize() {
+      controller.randomize();
+      return this;
+    },
+    pause: function pause() {
+      paused = true;
+      return this;
+    },
+    resume: function resume() {
+      paused = false;
+      return this;
+    },
+    setQuality: function setQuality(quality) {
+      merged.quality = quality;
+      controller.dprCap = dprCapFor(quality);
+      controller.resizeCanvas();
+      return this;
+    },
+    dispose: function dispose() {
+      unsubscribe();
+      visibility.dispose();
+      if (overlay) overlay.dispose();
+      controller.dispose();
+      root.remove();
+    }
+  };
+}
+
+exports.ProgressCapsuleController = ProgressCapsuleController;
+exports.createProgressCapsule = createProgressCapsule;