@zhang_jifan/fanui 2.1.0

package/dist/fanui.js

@@ -0,0 +1,4782 @@
+/* =============================================================================
+ * fanUI · 交互运行时 v2.1.0
+ * -----------------------------------------------------------------------------
+ * 零依赖、零构建。所有 API 挂在全局 `FanUI` 命名空间下，命名统一 fanui 前缀。
+ *
+ * 主题能力（本次新增，核心）
+ *   FanUI.theme.setAccent('indigo')      切换 12 套主题色之一
+ *   FanUI.theme.accents                  主题色元数据列表
+ *   FanUI.theme.setMode('dark'|'light'|'auto')
+ *   FanUI.theme.setGlass(true|false)     液态玻璃总开关
+ *   FanUI.theme.setGlassIntensity(1.4)   液态强度 0~2
+ *   FanUI.theme.setGlassPreset('thick')  厚度预设
+ *   FanUI.theme.createAccent('#ff6b35')  由任意品牌色生成一套合规主题色
+ *   FanUI.studio.mount()                 挂载「主题工作台」可视化面板
+ *
+ * 交互组件
+ *   command / dock / carousel / rate / tags / stepper / pin / swatch /
+ *   upload / combobox / kanban / notify / filterBar / ripple / reveal /
+ *   counter / scrollspy / readProgress / scrollTop / copy / track
+ *
+ * 用法：
+ *   <script src="dist/fanui.js"></script>         浏览器全局（window.FanUI）
+ *   import FanUI from "@zhang_jifan/fanui"                     打包器 / ESM（见 dist/fanui.esm.js）
+ *   const FanUI = require("@zhang_jifan/fanui")                CommonJS（见 dist/fanui.cjs）
+ *
+ * 环境要求：浏览器中运行全部交互能力。非浏览器环境（Node / SSR）**不再导出 null**，
+ *           而是导出服务端门面：FanUI.isServer === true，FanUI.ssr 可直出组件标记，
+ *           其余命名空间为空实现（调用时提示一次、绝不抛错）。服务端框架因此可以在
+ *           模块顶层安全 import，并在客户端生命周期里补挂交互。
+ * ========================================================================== */
+(function (global) {
+  "use strict";
+
+  var PREFIX = "fanui";
+
+  var VERSION = "2.1.0";
+
+  /** HTML 转义 —— 服务端与客户端共用，任何插值都必须过这里 */
+  function escapeHtml(v) {
+    return String(v == null ? "" : v)
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#39;");
+  }
+
+  /**
+   * 服务端空实现：在 Node / SSR 环境下代替浏览器专属命名空间。
+   * 任意方法调用都返回 undefined 并打印一次提示 —— 绝不抛错，
+   * 否则 SSR 框架在模块顶层误调用时会直接崩掉整个渲染。
+   */
+  function serverStub(name) {
+    var warned = false;
+    function warn() {
+      if (warned) return;
+      warned = true;
+      if (global.console && global.console.warn) {
+        global.console.warn(
+          "[fanUI] FanUI." + name + " 是浏览器专属能力，在服务端（SSR）被跳过。" +
+          "请在 useEffect / onMounted / onMounted 等客户端生命周期里调用，或改用 FanUI.ssr 直出标记。"
+        );
+      }
+    }
+    var target = {
+      __isServerStub: true,
+      __name: name,
+      init: function () { return 0; },
+      initAll: function () { return 0; }
+    };
+    if (typeof global.Proxy === "function") {
+      return new global.Proxy(target, {
+        get: function (t, key) {
+          if (key in t) return t[key];
+          if (typeof key !== "string") return undefined;
+          var fn = function () { warn(); return undefined; };
+          t[key] = fn;
+          return fn;
+        }
+      });
+    }
+    return target;
+  }
+
+  /* ==========================================================================
+   * -1. SSR 渲染器（服务端 / 静态直出）
+   * --------------------------------------------------------------------------
+   * 为什么要有它：SSR 框架（Next / Nuxt / Astro / SvelteKit）需要在服务端拿到
+   * 可读的组件标记，否则首屏空白 + SEO 归零。这里的渲染器只产出「纯 CSS 可达」
+   * 的静态结构，与客户端 `FanUI.init()` 认领的是同一套标记，因此
+   * 「服务端直出 → 客户端水合接管交互」可以无缝衔接。
+   *
+   * 安全约定：所有文本插值走 escapeHtml；属性名由代码写死，属性值也一律转义；
+   *          需要「原样 HTML」时参数名统一为 *Html，调用方自行负责其安全性。
+   * ======================================================================== */
+
+  var SSR = (function () {
+    function esc(v) { return escapeHtml(v); }
+    function n(v, d) { var x = parseFloat(v); return isNaN(x) ? d : x; }
+    function pc(v, max) { return max > 0 ? Math.min(100, Math.max(0, (v / max) * 100)) : 0; }
+
+    function attrs(o) {
+      var s = "";
+      if (!o) return s;
+      Object.keys(o).forEach(function (k) {
+        var v = o[k];
+        if (v === false || v === null || v === undefined) return;
+        if (v === true) { s += " " + k; return; }
+        s += " " + k + '="' + esc(v) + '"';
+      });
+      return s;
+    }
+
+    function cls() {
+      var out = [];
+      for (var i = 0; i < arguments.length; i++) {
+        var a = arguments[i];
+        if (!a) continue;
+        if (Object.prototype.toString.call(a) === "[object Array]") {
+          a.forEach(function (x) { if (x) out.push(x); });
+        } else out.push(a);
+      }
+      return out.join(" ");
+    }
+
+    var R = {
+      /* ---- 基础 ---- */
+      button: function (p) {
+        p = p || {};
+        var tag = p.href ? "a" : "button";
+        var type = p.type || "default";
+        return "<" + tag +
+          ' class="' + cls("fanui-btn", "fanui-btn--" + type, p.size && "fanui-btn--" + p.size, p.block && "fanui-btn--block", p.className) + '"' +
+          attrs({
+            href: p.href || null,
+            type: tag === "button" ? (p.submit ? "submit" : "button") : null,
+            target: p.target || null,
+            disabled: p.disabled || null,
+            "aria-label": p.ariaLabel || null,
+            "aria-disabled": p.disabled || null
+          }) + ">" +
+          (p.icon ? '<span class="fanui-btn__icon" aria-hidden="true">' + esc(p.icon) + "</span>" : "") +
+          esc(p.label != null ? p.label : p.text) +
+          "</" + tag + ">";
+      },
+
+      badge: function (p) {
+        p = p || {};
+        return '<span class="' + cls("fanui-badge", "fanui-badge--" + (p.type || "primary"),
+          p.size && "fanui-badge--" + p.size,
+          p.pill && "fanui-badge--pill",
+          p.dot && "fanui-badge--dot",
+          p.className) + '"' + attrs({ title: p.title || null }) + ">" +
+          (p.dot ? '<span class="fanui-badge__dot" aria-hidden="true"></span>' : esc(p.text != null ? p.text : p.label)) +
+          "</span>";
+      },
+
+      tag: function (p) {
+        p = p || {};
+        return '<span class="' + cls("fanui-tag", "fanui-tag--" + (p.type || "primary"),
+          p.pill && "fanui-tag--pill", p.solid && "fanui-tag--solid",
+          p.outline && "fanui-tag--outline", p.className) + '">' + esc(p.text != null ? p.text : p.label) +
+          (p.closable ? '<button class="fanui-tag__close" type="button" aria-label="移除">×</button>' : "") +
+          "</span>";
+      },
+
+      avatar: function (p) {
+        p = p || {};
+        return '<span class="' + cls("fanui-avatar", "fanui-avatar--" + (p.size || "md"),
+          p.square && "fanui-avatar--square", p.bordered && "fanui-avatar--bordered", p.className) + '"' +
+          attrs({ title: p.title || p.name || null }) + ">" +
+          (p.src
+            ? '<img src="' + esc(p.src) + '" alt="' + esc(p.alt || p.name || "") + '" loading="lazy" decoding="async">'
+            : '<span class="fanui-avatar__text" aria-hidden="true">' +
+              esc(p.text || (p.name ? String(p.name).trim().charAt(0) : "?")) + "</span>") +
+          "</span>";
+      },
+
+      divider: function (p) {
+        p = p || {};
+        if (!p.label) {
+          return '<div class="' + cls("fanui-divider", p.vertical && "fanui-divider--vertical",
+            p.dashed && "fanui-divider--dashed", p.className) + '" role="separator"' +
+            (p.vertical ? ' aria-orientation="vertical"' : "") + "></div>";
+        }
+        return '<div class="' + cls("fanui-divider", p.dashed && "fanui-divider--dashed", p.className) + '" role="separator">' +
+          "<span>" + esc(p.label) + "</span></div>";
+      },
+
+      code: function (p) {
+        p = p || {};
+        return "<code" + ' class="' + cls("fanui-code", p.className) + '"' + ">" + esc(p.text != null ? p.text : p.content) + "</code>";
+      },
+
+      kbd: function (p) {
+        p = p || {};
+        return "<kbd" + ' class="' + cls("fanui-kbd", p.className) + '"' + ">" + esc(p.text != null ? p.text : p.label) + "</kbd>";
+      },
+
+      /* ---- 反馈 ---- */
+      alert: function (p) {
+        p = p || {};
+        var type = p.type || "info";
+        return '<div class="' + cls("fanui-alert", "fanui-alert--" + type, p.sm && "fanui-alert--sm", p.className) + '"' +
+          attrs({ role: type === "danger" || type === "warning" ? "alert" : "status" }) + ">" +
+          (p.icon ? '<span class="fanui-alert__icon" aria-hidden="true">' + esc(p.icon) + "</span>" : "") +
+          '<div class="fanui-alert__content">' +
+            (p.title ? '<div class="fanui-alert__title">' + esc(p.title) + "</div>" : "") +
+            (p.desc ? '<div class="fanui-alert__desc">' + esc(p.desc) + "</div>" : "") +
+          "</div>" +
+          (p.closable ? '<button class="fanui-alert__close" type="button" aria-label="关闭">×</button>' : "") +
+          "</div>";
+      },
+
+      progress: function (p) {
+        p = p || {};
+        var value = n(p.value, 0), max = n(p.max, 100);
+        return '<div class="' + cls("fanui-progress", p.size && "fanui-progress--" + p.size,
+          p.type && "fanui-progress--" + p.type, p.striped && "fanui-progress--striped",
+          p.animated && "fanui-progress--animated", p.className) + '"' +
+          attrs({
+            role: "progressbar",
+            "aria-valuenow": value,
+            "aria-valuemin": 0,
+            "aria-valuemax": max,
+            "aria-label": p.label || null
+          }) + ">" +
+          '<div class="fanui-progress__bar" style="width:' + pc(value, max).toFixed(2) + '%"></div>' +
+          (p.showLabel ? '<span class="fanui-progress__label">' + Math.round(pc(value, max)) + "%</span>" : "") +
+          "</div>";
+      },
+
+      spinner: function (p) {
+        p = p || {};
+        return '<span class="' + cls("fanui-spinner", p.type && "fanui-spinner--" + p.type,
+          p.size && "fanui-spinner--" + p.size, p.className) + '" role="status"' +
+          attrs({ "aria-label": p.label || "加载中" }) + "></span>";
+      },
+
+      skeleton: function (p) {
+        p = p || {};
+        if (p.lines) {
+          var out = "";
+          for (var i = 0; i < p.lines; i++) {
+            var w = i === p.lines - 1 && p.lines > 1 ? "75" : "100";
+            out += '<span class="fanui-skeleton fanui-skeleton--text fanui-skeleton--w-' + w +
+              (p.noAnim ? " fanui-skeleton--no-anim" : "") + '" style="display:block;margin-bottom:8px"></span>';
+          }
+          return '<div class="' + cls(p.className) + '" aria-hidden="true">' + out + "</div>";
+        }
+        return '<span class="' + cls("fanui-skeleton", p.circle ? "fanui-skeleton--circle" : "fanui-skeleton--rect",
+          p.noAnim && "fanui-skeleton--no-anim", p.className) + '" aria-hidden="true" style="' +
+          "width:" + (p.width || "100%") + ";height:" + (p.height || "1em") + '"></span>';
+      },
+
+      empty: function (p) {
+        p = p || {};
+        return '<div class="' + cls("fanui-empty", p.sm && "fanui-empty--sm", p.inline && "fanui-empty--inline", p.className) + '">' +
+          '<div class="fanui-empty__icon" aria-hidden="true">' + esc(p.icon || "◌") + "</div>" +
+          '<div class="fanui-empty__title">' + esc(p.title || "暂无数据") + "</div>" +
+          (p.desc ? '<div class="fanui-empty__desc">' + esc(p.desc) + "</div>" : "") +
+          (p.actionHtml ? '<div class="fanui-empty__actions">' + p.actionHtml + "</div>" : "") +
+          "</div>";
+      },
+
+      result: function (p) {
+        p = p || {};
+        return '<div class="' + cls("fanui-result", "fanui-result--" + (p.type || "success"), p.className) + '">' +
+          '<span class="fanui-result__icon" aria-hidden="true">' + esc(p.icon || "✓") + "</span>" +
+          '<div class="fanui-result__title">' + esc(p.title || "") + "</div>" +
+          (p.desc ? '<p class="fanui-result__desc">' + esc(p.desc) + "</p>" : "") +
+          (p.actionsHtml ? '<div class="fanui-result__actions">' + p.actionsHtml + "</div>" : "") +
+          "</div>";
+      },
+
+      /* ---- 容器 / 数据展示 ---- */
+      card: function (p) {
+        p = p || {};
+        return '<div class="' + cls("fanui-card", p.flat && "fanui-card--flat",
+          p.bordered && "fanui-card--bordered", p.elevated && "fanui-card--elevated", p.className) + '">' +
+          (p.title || p.extra
+            ? '<div class="fanui-card__header">' +
+              '<div><h3 class="fanui-card__title">' + esc(p.title || "") + "</h3>" +
+              (p.subtitle ? '<p class="fanui-card__subtitle">' + esc(p.subtitle) + "</p>" : "") + "</div>" +
+              (p.extra ? '<div class="fanui-card__extra">' + esc(p.extra) + "</div>" : "") +
+              "</div>"
+            : "") +
+          (p.mediaHtml ? '<div class="fanui-card__media">' + p.mediaHtml + "</div>" : "") +
+          '<div class="fanui-card__body">' + (p.bodyHtml || esc(p.body || "")) + "</div>" +
+          (p.footerHtml || p.footer
+            ? '<div class="fanui-card__footer">' + (p.footerHtml || esc(p.footer)) + "</div>"
+            : "") +
+          "</div>";
+      },
+
+      stat: function (p) {
+        p = p || {};
+        var trend = p.trend || (n(p.delta, 0) > 0 ? "up" : n(p.delta, 0) < 0 ? "down" : "flat");
+        return '<div class="' + cls("fanui-stat", p.className) + '">' +
+          '<div class="fanui-stat__label">' + esc(p.label || "") + "</div>" +
+          '<div class="fanui-stat__value">' + esc(p.value != null ? p.value : "") + "</div>" +
+          (p.delta != null
+            ? '<div class="fanui-stat__trend fanui-stat__trend--' + trend + '">' +
+              esc(trend === "up" ? "▲" : trend === "down" ? "▼" : "—") + " " + esc(p.delta) +
+              (p.hint ? " " + esc(p.hint) : "") + "</div>"
+            : "") +
+          "</div>";
+      },
+
+      breadcrumb: function (p) {
+        p = p || {};
+        var items = p.items || [];
+        return '<nav class="' + cls("fanui-breadcrumb", p.arrow && "fanui-breadcrumb--arrow", p.className) + '" aria-label="面包屑">' +
+          items.map(function (it, i) {
+            it = typeof it === "string" ? { text: it } : it || {};
+            var last = i === items.length - 1;
+            var inner = it.href && !last
+              ? '<a class="fanui-breadcrumb__item" href="' + esc(it.href) + '">' + esc(it.text) + "</a>"
+              : '<span class="fanui-breadcrumb__item"' + (last ? ' aria-current="page"' : "") + ">" + esc(it.text) + "</span>";
+            return inner + (last ? "" : '<span class="fanui-breadcrumb__separator" aria-hidden="true">/</span>');
+          }).join("") +
+          "</nav>";
+      },
+
+      descriptions: function (p) {
+        p = p || {};
+        var items = p.items || [];
+        return '<div class="' + cls("fanui-descriptions", p.columns && "fanui-descriptions--" + p.columns,
+          p.inline && "fanui-descriptions--inline", p.className) + '">' +
+          items.map(function (it) {
+            return '<div class="fanui-descriptions__item">' +
+              '<span class="fanui-descriptions__label">' + esc(it.label) + "</span>" +
+              '<span class="fanui-descriptions__value">' + esc(it.value) + "</span></div>";
+          }).join("") +
+          "</div>";
+      },
+
+      listGroup: function (p) {
+        p = p || {};
+        var items = p.items || [];
+        return '<ul class="' + cls("fanui-list-group", p.flush && "fanui-list-group--flush",
+          p.separated && "fanui-list-group--separated", p.className) + '">' +
+          items.map(function (it) {
+            it = typeof it === "string" ? { text: it } : it || {};
+            return '<li class="fanui-list-item">' + (it.bodyHtml || esc(it.text != null ? it.text : it.body)) + "</li>";
+          }).join("") +
+          "</ul>";
+      },
+
+      table: function (p) {
+        p = p || {};
+        var head = (p.head || []).map(function (h) {
+          h = typeof h === "object" && h !== null ? h : { text: h };
+          return "<th scope=\"col\"" + attrs({ style: h.width ? "width:" + h.width : null }) + ">" + esc(h.text) + "</th>";
+        }).join("");
+        var rows = (p.rows || []).map(function (r) {
+          return "<tr>" + (r || []).map(function (c) {
+            if (c && typeof c === "object" && c.html) return "<td>" + c.html + "</td>";
+            return "<td>" + esc(c && typeof c === "object" ? c.text : c) + "</td>";
+          }).join("") + "</tr>";
+        }).join("");
+        return '<div class="fanui-table-wrap">' +
+          '<table class="' + cls("fanui-table", p.striped && "fanui-table--striped",
+            p.hover !== false && "fanui-table--hover", p.bordered && "fanui-table--bordered",
+            p.compact && "fanui-table--compact", p.className) + '">' +
+          (p.caption ? "<caption>" + esc(p.caption) + "</caption>" : "") +
+          (head ? "<thead><tr>" + head + "</tr></thead>" : "") +
+          "<tbody>" + rows + "</tbody></table></div>";
+      },
+
+      timeline: function (p) {
+        p = p || {};
+        return '<ul class="' + cls("fanui-timeline", p.className) + '">' +
+          (p.items || []).map(function (it) {
+            it = it || {};
+            return '<li class="fanui-timeline__item">' +
+              '<span class="fanui-timeline__dot' + (it.type ? " fanui-timeline__dot--" + it.type : "") + '" aria-hidden="true"></span>' +
+              '<div class="fanui-timeline__body">' +
+              (it.time ? '<div class="fanui-timeline__time">' + esc(it.time) + "</div>" : "") +
+              '<div class="fanui-timeline__title">' + esc(it.title || "") + "</div>" +
+              (it.desc ? '<div class="fanui-timeline__desc">' + esc(it.desc) + "</div>" : "") +
+              "</div></li>";
+          }).join("") +
+          "</ul>";
+      },
+
+      /* ---- 能力补齐组件的静态骨架 ---- */
+      virtualList: function (p) {
+        p = p || {};
+        var items = p.items || [];
+        var h = n(p.itemHeight, 44);
+        return '<div class="fanui-virtual-list" data-fanui-virtual-list' +
+          attrs({
+            "data-fanui-item-height": h,
+            "data-fanui-vl-height": p.height || null,
+            style: p.height ? "--fanui-vl-height:" + p.height : null,
+            "aria-label": p.label || null
+          }) + ">" +
+          '<div class="fanui-virtual-list__source">' +
+          items.map(function (it) {
+            return '<div class="fanui-virtual-list__item">' + (p.html ? it : esc(it)) + "</div>";
+          }).join("") +
+          "</div></div>";
+      },
+
+      splitter: function (p) {
+        p = p || {};
+        var size = n(p.size, 50);
+        return '<div class="fanui-splitter' + (p.direction === "vertical" ? " fanui-splitter--vertical" : "") +
+          '" data-fanui-splitter' + (p.direction === "vertical" ? ' data-fanui-splitter-direction="vertical"' : "") + ">" +
+          '<div class="fanui-splitter__pane" style="--fanui-splitter-size:' + size + '%">' + (p.startHtml || "") + "</div>" +
+          '<div class="fanui-splitter__bar" role="separator" tabindex="0" aria-label="拖动调整面板大小"' +
+          ' aria-orientation="' + (p.direction === "vertical" ? "horizontal" : "vertical") + '"' +
+          ' aria-valuenow="' + size + '" aria-valuemin="' + n(p.min, 10) + '" aria-valuemax="' + n(p.max, 90) + '">' +
+          '<span class="fanui-splitter__bar-handle"></span></div>' +
+          '<div class="fanui-splitter__pane">' + (p.endHtml || "") + "</div>" +
+          "</div>";
+      },
+
+      backTop: function (p) {
+        p = p || {};
+        return '<button type="button" class="fanui-backtop" data-fanui-backtop' +
+          attrs({ "data-fanui-backtop-offset": p.offset, "aria-label": p.label || "回到顶部" }) + ">" +
+          '<span class="fanui-backtop__ring"></span>' +
+          '<span class="fanui-backtop__icon" aria-hidden="true">↑</span></button>';
+      },
+
+      watermark: function (p) {
+        p = p || {};
+        return '<div class="fanui-watermark__host"' +
+          attrs({
+            "data-fanui-watermark": p.text || "fanUI",
+            "data-fanui-watermark-sub": p.subtext || null,
+            "data-fanui-watermark-gap": p.gap ? (Array.isArray(p.gap) ? p.gap.join(",") : p.gap) : null,
+            "data-fanui-watermark-rotate": p.rotate,
+            "data-fanui-watermark-opacity": p.opacity
+          }) + ">" + (p.bodyHtml || "") + "</div>";
+      }
+    };
+
+    /** 渲染一个组件 */
+    function render(name, props) {
+      if (!R[name]) {
+        throw new Error('fanUI.ssr：未知组件 "' + name + '"。可用：' + Object.keys(R).join(", "));
+      }
+      return R[name](props || {});
+    }
+
+    /** 批量渲染：renderList([["badge",{text:"新"}], ...]) */
+    function renderList(list) {
+      return (list || []).map(function (entry) {
+        return render(entry[0], entry[1]);
+      }).join("");
+    }
+
+    /**
+     * <html> 上的主题属性 —— 服务端直出时用它就能带出正确的主题色 / 模式 / 玻璃。
+     * @returns {string} 形如 ` data-fanui-accent="cyan" data-fanui-theme="dark"`
+     */
+    function htmlAttrs(o) {
+      o = o || {};
+      return attrs({
+        "data-fanui-accent": o.accent || null,
+        "data-fanui-theme": o.theme || null,
+        "data-fanui-glass": o.glass === false ? "off" : o.glass === true ? "on" : (o.glass || null),
+        lang: o.lang || null,
+        dir: o.dir || null
+      });
+    }
+
+    /**
+     * 直出一份完整 HTML 文档骨架（含正确的 <html> 主题属性与样式表引用）。
+     * 适合演示页 / 静态站 / 需要 SEO 的首屏。
+     */
+    function document(o) {
+      o = o || {};
+      var cssList = o.css ? (Array.isArray(o.css) ? o.css : [o.css]) : [];
+      return "<!DOCTYPE html>\n<html" + htmlAttrs(o) + ">\n<head>\n" +
+        '<meta charset="utf-8">\n' +
+        '<meta name="viewport" content="width=device-width, initial-scale=1">\n' +
+        (o.title ? "<title>" + esc(o.title) + "</title>\n" : "") +
+        (o.description ? '<meta name="description" content="' + esc(o.description) + '">\n' : "") +
+        cssList.map(function (u) { return '<link rel="stylesheet" href="' + esc(u) + '">\n'; }).join("") +
+        (o.headHtml || "") +
+        "</head>\n<body>\n" + (o.bodyHtml || "") + "\n" +
+        (o.js ? '<script src="' + esc(o.js) + '"></script>\n' : "") +
+        "</body>\n</html>";
+    }
+
+    /**
+     * 主题初始化片段（放在 </body> 前，避免首屏主题闪烁 FOUC）。
+     * 只做一件事：把服务端写下的属性同步进运行时状态并恢复用户偏好。
+     */
+    function themeBootstrap(o) {
+      o = o || {};
+      var init = {};
+      if (o.accent) init.accent = o.accent;
+      if (o.theme) init.theme = o.theme;
+      if (typeof o.glass === "boolean") init.glass = o.glass;
+      return "<script>(function(){var p=window.FanUI;if(!p)return;" +
+        "var o=" + JSON.stringify(init) + ";" +
+        "if(o.accent)p.theme.setAccent(o.accent);" +
+        "if(o.theme)p.theme.setMode(o.theme);" +
+        "if(typeof o.glass==='boolean')p.theme.setGlass(o.glass);" +
+        "})();</script>";
+    }
+
+    return {
+      render: render,
+      renderList: renderList,
+      htmlAttrs: htmlAttrs,
+      document: document,
+      themeBootstrap: themeBootstrap,
+      escape: esc,
+      attrs: attrs,
+      components: Object.keys(R)
+    };
+  })();
+
+  // 非浏览器环境（Node / SSR）不再直接 return —— 改为导出「可用的服务端门面」：
+  //   · ssr.*         纯字符串渲染器，服务端可直出组件标记（Next / Nuxt / Astro）
+  //   · 其余命名空间   存在但为空实现，调用时给一次性提示，绝不抛错
+  // 修复前：这里 `return` 掉，导致 dist/fanui.cjs 在 Node 下显式导出 null，
+  //        服务端框架既拿不到类型也拿不到任何可渲染能力。
+  if (!global || !global.document) {
+    global.FanUI = {
+      version: VERSION,
+      prefix: PREFIX,
+      isServer: true,
+      serverRenderable: true,
+      ssr: SSR,
+      theme: serverStub("theme"),
+      studio: serverStub("studio"),
+      toast: serverStub("toast"),
+      modal: serverStub("modal"),
+      tabs: serverStub("tabs"),
+      form: serverStub("form"),
+      carousel: serverStub("carousel"),
+      loadingBar: serverStub("loadingBar"),
+      lightbox: serverStub("lightbox"),
+      tour: serverStub("tour"),
+      splitter: serverStub("splitter"),
+      affix: serverStub("affix"),
+      backTop: serverStub("backTop"),
+      watermark: serverStub("watermark"),
+      virtualList: serverStub("virtualList"),
+      i18n: serverStub("i18n"),
+      format: serverStub("format")
+    };
+    return;
+  }
+
+  var ATTR_ACCENT = "data-fanui-accent";
+  var ATTR_MODE = "data-fanui-theme";
+  var ATTR_GLASS = "data-fanui-glass";
+  var STORE = PREFIX + "-prefs";
+  var doc = global.document;
+  var root = doc.documentElement;
+
+  /* ==========================================================================
+   * 0. 基础工具
+   * ======================================================================== */
+
+  function $(sel, scope) { return (scope || doc).querySelector(sel); }
+  function $$(sel, scope) { return Array.prototype.slice.call((scope || doc).querySelectorAll(sel)); }
+  function on(el, type, handler, options) { if (el) el.addEventListener(type, handler, options || false); return el; }
+  function toggleClass(el, name, force) {
+    if (!el) return;
+    var has = el.classList.contains(name);
+    var next = typeof force === "boolean" ? force : !has;
+    el.classList[next ? "add" : "remove"](name);
+  }
+  function emit(name, detail) {
+    doc.dispatchEvent(new CustomEvent(name, { detail: detail || {} }));
+  }
+  /**
+   * rAF 节流包装器。
+   * 作为事件监听器使用时以「元素」为节流槽（同一元素共享一帧）；
+   * 直接调用（this 为 undefined）时退回闭包槽，保证 `update()` 这类主动调用不会报错。
+   */
+  function raf(fn) {
+    var slot = 0;
+    return function () {
+      var args = arguments, self = this;
+      if (self && self.nodeType === 1) {
+        if (self.__fanuiRaf) return;
+        self.__fanuiRaf = global.requestAnimationFrame(function () {
+          self.__fanuiRaf = null;
+          fn.apply(self, args);
+        });
+      } else {
+        if (slot) return;
+        slot = global.requestAnimationFrame(function () { slot = 0; fn.apply(self, args); });
+      }
+    };
+  }
+
+  /** 让模块既能当命名空间用（mod.api()），又能当工厂用（mod("#sel")） */
+  function asFactory(mod, factoryFn) {
+    function f() { return factoryFn.apply(null, arguments); }
+    for (var k in mod) if (Object.prototype.hasOwnProperty.call(mod, k)) f[k] = mod[k];
+    return f;
+  }
+  function clamp(v, min, max) { return Math.min(max, Math.max(min, v)); }
+  function num(v, fallback) { var n = parseFloat(v); return isNaN(n) ? fallback : n; }
+
+  /* ---- 偏好持久化（localStorage 不可用时静默降级）---- */
+  function readPrefs() {
+    try { return JSON.parse(global.localStorage.getItem(STORE) || "{}") || {}; }
+    catch (e) { return {}; }
+  }
+  function writePrefs(patch) {
+    var prefs = readPrefs();
+    for (var k in patch) if (Object.prototype.hasOwnProperty.call(patch, k)) prefs[k] = patch[k];
+    try { global.localStorage.setItem(STORE, JSON.stringify(prefs)); } catch (e) { /* ignore */ }
+    return prefs;
+  }
+
+  /* ---- 色彩工具（用于由品牌色生成合规主题）---- */
+  function hex2rgb(hex) {
+    var h = String(hex == null ? "" : hex).trim().replace(/^#/, "");
+    // 只接受 #rgb / #rrggbb（含不带 # 的等价写法）。
+    // 早期实现不校验：非法输入会让 3 个通道都变成 NaN，createAccent() 随即
+    // 把一整块 NaN 令牌写进 <head> 并注册出 "custom-NaN" 主题（污染不可逆）。
+    // 这里直接抛错，让调用方在入口就能拿到明确反馈。
+    if (h.length === 3) h = h.split("").map(function (c) { return c + c; }).join("");
+    if (!/^[0-9a-fA-F]{6}$/.test(h)) {
+      throw new Error("fanUI：无效颜色「" + hex + "」，期望 #rgb 或 #rrggbb 形式的十六进制色值");
+    }
+    return {
+      r: parseInt(h.slice(0, 2), 16),
+      g: parseInt(h.slice(2, 4), 16),
+      b: parseInt(h.slice(4, 6), 16)
+    };
+  }
+
+  /** 宽容版解析：非法输入返回 null 而不是抛错。
+   *  用于「用户正在输入」的场景（如取色器文本框逐字符解析），
+   *  那里抛错会在控制台刷出无意义的未捕获异常。 */
+  function tryHex2rgb(hex) {
+    try { return hex2rgb(hex); } catch (e) { return null; }
+  }
+  function rgb2hex(c) {
+    var f = function (v) { var s = clamp(Math.round(v), 0, 255).toString(16); return s.length === 1 ? "0" + s : s; };
+    return "#" + f(c.r) + f(c.g) + f(c.b);
+  }
+  function rgb2hsl(c) {
+    var r = c.r / 255, g = c.g / 255, b = c.b / 255;
+    var max = Math.max(r, g, b), min = Math.min(r, g, b);
+    var h = 0, s = 0, l = (max + min) / 2;
+    var d = max - min;
+    if (d !== 0) {
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+      else if (max === g) h = ((b - r) / d + 2) / 6;
+      else h = ((r - g) / d + 4) / 6;
+    }
+    return { h: h * 360, s: s * 100, l: l * 100 };
+  }
+  function hsl2rgb(c) {
+    var h = ((c.h % 360) + 360) % 360 / 360, s = c.s / 100, l = c.l / 100;
+    if (s === 0) { var v = Math.round(l * 255); return { r: v, g: v, b: v }; }
+    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    var p = 2 * l - q;
+    var hue = function (t) {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    };
+    return { r: hue(h + 1 / 3) * 255, g: hue(h) * 255, b: hue(h - 1 / 3) * 255 };
+  }
+  function luminance(c) {
+    var ch = function (v) { v /= 255; return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); };
+    return 0.2126 * ch(c.r) + 0.7152 * ch(c.g) + 0.0722 * ch(c.b);
+  }
+  function contrast(a, b) {
+    var la = luminance(a), lb = luminance(b);
+    var hi = Math.max(la, lb), lo = Math.min(la, lb);
+    return (hi + 0.05) / (lo + 0.05);
+  }
+  function bestFg(c) {
+    return contrast(c, { r: 255, g: 255, b: 255 }) >= contrast(c, { r: 11, g: 18, b: 32 }) ? "#ffffff" : "#0b1220";
+  }
+  function mixTo(c, target, weight) {
+    return {
+      r: c.r + (target.r - c.r) * weight,
+      g: c.g + (target.g - c.g) * weight,
+      b: c.b + (target.b - c.b) * weight
+    };
+  }
+  function shade(c, w) { return mixTo(c, { r: 0, g: 0, b: 0 }, w); }
+  function tint(c, w) { return mixTo(c, { r: 255, g: 255, b: 255 }, w); }
+  function alpha(c, a) {
+    return "rgba(" + Math.round(c.r) + ", " + Math.round(c.g) + ", " + Math.round(c.b) + ", " + a + ")";
+  }
+
+  /* ==========================================================================
+   * 1. 主题（12 套主题色 / 深浅模式 / 液态玻璃）
+   * ======================================================================== */
+
+  var ACCENTS = [
+    { key: "cyan", label: "青", en: "Cyan", hue: 189, vibe: "科技 · 清爽", secondary: "violet" },
+    { key: "sky", label: "天蓝", en: "Sky", hue: 199, vibe: "轻盈 · 开放", secondary: "violet" },
+    { key: "blue", label: "经典蓝", en: "Blue", hue: 217, vibe: "稳健 · 通用", secondary: "cyan" },
+    { key: "indigo", label: "靛蓝", en: "Indigo", hue: 239, vibe: "专业 · 前沿", secondary: "cyan" },
+    { key: "violet", label: "紫罗兰", en: "Violet", hue: 258, vibe: "创意 · 智能", secondary: "cyan" },
+    { key: "purple", label: "紫", en: "Purple", hue: 272, vibe: "艺术 · 张扬", secondary: "pink" },
+    { key: "pink", label: "品粉", en: "Pink", hue: 330, vibe: "年轻 · 潮流", secondary: "violet" },
+    { key: "rose", label: "玫红", en: "Rose", hue: 350, vibe: "浪漫 · 亲和", secondary: "orange" },
+    { key: "red", label: "赤红", en: "Red", hue: 0, vibe: "强烈 · 行动", secondary: "rose" },
+    { key: "orange", label: "橙", en: "Orange", hue: 25, vibe: "活力 · 温暖", secondary: "pink" },
+    { key: "emerald", label: "翡翠", en: "Emerald", hue: 160, vibe: "成长 · 健康", secondary: "cyan" },
+    { key: "teal", label: "青碧", en: "Teal", hue: 173, vibe: "沉静 · 高效", secondary: "emerald" }
+  ];
+
+  var DEFAULT_ACCENT = "cyan";
+
+  /** 液态玻璃厚度预设（与 SCSS 中 $fanui-glass-presets 保持一致） */
+  var GLASS_PRESETS = {
+    thin: { label: "薄", intensity: 0.5, blur: "10px", edge: "1px", specular: 0.3 },
+    regular: { label: "标准", intensity: 1, blur: "22px", edge: "1px", specular: 0.55 },
+    thick: { label: "厚", intensity: 1.45, blur: "30px", edge: "1.5px", specular: 0.7 },
+    ultra: { label: "超厚", intensity: 1.9, blur: "44px", edge: "2px", specular: 0.85 },
+    lens: { label: "透镜", intensity: 2, blur: "36px", edge: "2px", specular: 1 }
+  };
+
+  /** 从 CSS 实际输出中读取某主题色的关键色值 —— 保证 JS 与 CSS 单一数据源。
+   *  依赖样式表已加载：令牌全部来自 CSS 自定义属性。
+   *  若样式表缺失（脚本在 <head> 里先于 CSS 执行、或 unpkg 只引了 JS），
+   *  返回值会带上 available:false 并给出一次性告警，调用方可据此降级，
+   *  而不是拿到一堆空串却毫无提示。
+   */
+  var _accentTokenWarned = false;
+  function readAccentTokens(name, mode) {
+    var probe = doc.createElement("i");
+    probe.setAttribute(ATTR_ACCENT, name);
+    if (mode === "dark") probe.setAttribute(ATTR_MODE, "dark");
+    probe.style.cssText = "position:absolute;left:-9999px;top:0;width:0;height:0;pointer-events:none";
+    root.appendChild(probe);
+    var cs = global.getComputedStyle(probe);
+    var get = function (n) { return (cs.getPropertyValue("--fanui-" + n) || "").trim(); };
+    var out = {
+      primary: get("primary"),
+      primaryFg: get("primary-fg"),
+      vivid: get("primary-vivid"),
+      vivid2: get("primary-vivid-2"),
+      accent: get("accent"),
+      accentVivid: get("accent-vivid")
+    };
+    probe.parentNode.removeChild(probe);
+    out.available = !!out.primary;
+    if (!out.available && !_accentTokenWarned) {
+      _accentTokenWarned = true;
+      reportIssue("readAccentColors() 读不到主题令牌：fanUI 样式表尚未加载。请先引入 dist/fanui.css（或 .min.css），再调用主题 API。");
+    }
+    return out;
+  }
+
+  /** 统一的「开发期提示」出口：有 console 就告警，没有就静默。 */
+  function reportIssue(msg) {
+    if (global.console && global.console.warn) global.console.warn("[fanUI] " + msg);
+  }
+
+  function applyGlassTokens() {
+    var st = Theme._glass;
+    var preset = GLASS_PRESETS[st.preset] || GLASS_PRESETS.regular;
+    var s = root.style;
+    // 只写「与深浅模式无关」的参数。
+    // 底色 tint-base / tint-k 必须留给 CSS：它们是随模式变化的基准值，
+    // 一旦内联写死就会在切换深色模式时把模式专属的玻璃配比覆盖掉。
+    s.setProperty("--fanui-glass-intensity", String(+(preset.intensity * st.intensity).toFixed(3)));
+    s.setProperty("--fanui-glass-blur-base", preset.blur);
+    s.setProperty("--fanui-glass-edge-width", preset.edge);
+    s.setProperty("--fanui-glass-specular-alpha", String(preset.specular));
+  }
+
+  function clearGlassTokens() {
+    [
+      "--fanui-glass-intensity", "--fanui-glass-blur-base",
+      "--fanui-glass-edge-width", "--fanui-glass-specular-alpha"
+    ].forEach(function (n) { root.style.removeProperty(n); });
+  }
+
+  var Theme = {
+    /** 当前偏好（含运行时状态） */
+    _accent: DEFAULT_ACCENT,
+    _mode: "light",
+    _glass: { enabled: true, intensity: 1, preset: "regular" },
+
+    /* ---------------------------- 主题色 ---------------------------- */
+
+    /** 主题色元数据列表 */
+    accents: ACCENTS,
+
+    /** 主题色 key 数组 */
+    accentKeys: ACCENTS.map(function (a) { return a.key; }),
+
+    /** 取当前主题色 key */
+    getAccent: function () { return Theme._accent; },
+
+    /**
+     * 切换主题色。
+     * @param {string} name cyan | sky | blue | indigo | violet | purple |
+     *                    pink | rose | red | orange | emerald | teal | 自定义名
+     * @returns {string} 生效的主题色 key
+     */
+    setAccent: function (name) {
+      if (!name) return Theme._accent;
+      var prev = Theme._accent;
+      Theme._accent = String(name);
+      root.setAttribute(ATTR_ACCENT, Theme._accent);
+      writePrefs({ accent: Theme._accent });
+      syncMetaThemeColor();
+      emit("fanui:accentchange", { accent: Theme._accent, previous: prev });
+      return Theme._accent;
+    },
+
+    /** 循环切换到下一个主题色 */
+    nextAccent: function (step) {
+      var keys = Theme.accentKeys.concat(Theme._customAccents || []);
+      var i = keys.indexOf(Theme._accent);
+      return Theme.setAccent(keys[(i + (step || 1) + keys.length) % keys.length]);
+    },
+
+    /** 读取某主题色在当前模式下的实际色值（来自 CSS） */
+    readAccentColors: function (name, mode) { return readAccentTokens(name || Theme._accent, mode || Theme.getEffectiveMode()); },
+
+    /* ---------------------------- 深浅模式 ---------------------------- */
+
+    /** 取模式设置：light | dark | auto */
+    getMode: function () { return Theme._mode; },
+
+    /** 取实际生效模式（把 auto 解析为 light/dark） */
+    getEffectiveMode: function () {
+      if (Theme._mode !== "auto") return Theme._mode;
+      return global.matchMedia && global.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    },
+
+    /**
+     * 设置深浅模式。
+     * @param {string} mode light | dark | auto
+     */
+    setMode: function (mode) {
+      if (["light", "dark", "auto"].indexOf(mode) < 0) mode = "light";
+      var prev = Theme._mode;
+      Theme._mode = mode;
+      root.setAttribute(ATTR_MODE, mode);
+      writePrefs({ mode: mode });
+      syncMetaThemeColor();
+      emit("fanui:themechange", { mode: mode, effective: Theme.getEffectiveMode(), previous: prev });
+      return mode;
+    },
+
+    /** 在 light / dark 之间切换（auto 视为 light 的下一步） */
+    toggleMode: function () { return Theme.setMode(Theme.getEffectiveMode() === "dark" ? "light" : "dark"); },
+
+    /** 在 light → dark → auto 三者间轮换 */
+    cycleMode: function () {
+      return Theme.setMode(Theme._mode === "light" ? "dark" : Theme._mode === "dark" ? "auto" : "light");
+    },
+
+    /* ---------------------------- 液态玻璃 ---------------------------- */
+
+    /** 是否启用液态玻璃 */
+    isGlassEnabled: function () { return Theme._glass.enabled; },
+
+    /**
+     * 液态玻璃总开关。
+     * @param {boolean} enabled
+     */
+    setGlass: function (enabled) {
+      var next = enabled !== false;
+      Theme._glass.enabled = next;
+      root.setAttribute(ATTR_GLASS, next ? "on" : "off");
+      writePrefs({ glass: next });
+      emit("fanui:glasschange", { enabled: next, intensity: Theme._glass.intensity, preset: Theme._glass.preset });
+      return next;
+    },
+
+    /** 切换液态玻璃开关 */
+    toggleGlass: function () { return Theme.setGlass(!Theme._glass.enabled); },
+
+    /** 取液态强度（0 ~ 2，1 为标准） */
+    getGlassIntensity: function () { return Theme._glass.intensity; },
+
+    /**
+     * 设置液态强度。会与预设的基准强度相乘，因此调预设不会丢失用户的强度偏好。
+     * @param {number} value 0 ~ 2
+     */
+    setGlassIntensity: function (value) {
+      Theme._glass.intensity = clamp(num(value, 1), 0, 2);
+      applyGlassTokens();
+      writePrefs({ glassIntensity: Theme._glass.intensity });
+      emit("fanui:glasschange", { enabled: Theme._glass.enabled, intensity: Theme._glass.intensity, preset: Theme._glass.preset });
+      return Theme._glass.intensity;
+    },
+
+    /** 取厚度预设名 */
+    getGlassPreset: function () { return Theme._glass.preset; },
+
+    /**
+     * 设置玻璃厚度预设。
+     * @param {string} name thin | regular | thick | ultra | lens
+     */
+    setGlassPreset: function (name) {
+      if (!GLASS_PRESETS[name]) name = "regular";
+      Theme._glass.preset = name;
+      applyGlassTokens();
+      writePrefs({ glassPreset: name });
+      emit("fanui:glasschange", { enabled: Theme._glass.enabled, intensity: Theme._glass.intensity, preset: name });
+      return name;
+    },
+
+    /** 取全部玻璃预设（用于渲染选择器） */
+    glassPresets: GLASS_PRESETS,
+
+    /* ---------------------------- 任意品牌色 → 主题 ---------------------------- */
+
+    /**
+     * 由任意品牌色生成一套「可获得的」主题色，并注入为可用的 accent。
+     *
+     * 生成逻辑与 SCSS 侧完全一致：
+     *   1. 按固定明度阶梯生成 11 阶调色板（保证版式节奏一致）
+     *   2. 在候选色阶中自动挑选「白字对比度 ≥ 4.5」的色阶作为实心基准色
+     *   3. 派生 hover / active / soft / border / ink / ring / glow / 渐变
+     *
+     * @param {string} color   #rrggbb 或 #rgb
+     * @param {string} [name]  自定义主题名（默认按色相生成）
+     * @returns {string} 生成的主题名
+     */
+    createAccent: function (color, name) {
+      var base = hex2rgb(color);
+      var hsl = rgb2hsl(base);
+      var key = name || "custom-" + Math.round(hsl.h);
+
+      // 明度阶梯（与手工调色板的节奏对齐）
+      var steps = [
+        [50, 97, 0.55], [100, 94, 0.65], [200, 88, 0.78], [300, 80, 0.88],
+        [400, 68, 0.96], [500, 57, 1], [600, 48, 1], [700, 40, 0.98],
+        [800, 33, 0.94], [900, 28, 0.9], [950, 17, 0.85]
+      ];
+      var palette = {};
+      steps.forEach(function (s) {
+        var c = hsl2rgb({ h: hsl.h, s: clamp(hsl.s * s[2], 8, 96), l: s[1] });
+        palette[s[0]] = rgb2hex(c);
+      });
+
+      // 自动择优：浅色模式要白字达标
+      var toneOrder = [600, 700, 800, 900, 500];
+      var lightTone = toneOrder[0];
+      var white = { r: 255, g: 255, b: 255 };
+      for (var i = 0; i < toneOrder.length; i++) {
+        if (contrast(hex2rgb(palette[toneOrder[i]]), white) >= 4.5) { lightTone = toneOrder[i]; break; }
+      }
+
+      var solid = hex2rgb(palette[lightTone]);
+      var vivid = hex2rgb(palette[500]);
+      var vivid2 = hex2rgb(palette[600]);
+      var ink = hex2rgb(palette[800]);
+
+      var lightVars = [
+        ["--fanui-primary", palette[lightTone]],
+        ["--fanui-primary-fg", bestFg(solid)],
+        ["--fanui-primary-hover", rgb2hex(shade(solid, 0.09))],
+        ["--fanui-primary-active", rgb2hex(shade(solid, 0.17))],
+        ["--fanui-primary-vivid", palette[500]],
+        ["--fanui-primary-vivid-2", palette[600]],
+        ["--fanui-primary-soft", palette[50]],
+        ["--fanui-primary-soft-2", palette[100]],
+        ["--fanui-primary-border", palette[200]],
+        ["--fanui-primary-ink", palette[800]],
+        ["--fanui-primary-ring", alpha(vivid, 0.3)],
+        ["--fanui-primary-glow", alpha(vivid, 0.42)],
+        ["--fanui-primary-grad-a", palette[500]],
+        ["--fanui-primary-grad-b", palette[600]]
+      ];
+
+      var whiteCmp = { r: 255, g: 255, b: 255 };
+      var darkCmp = { r: 15, g: 23, b: 42 };
+      var darkToneOrder = [500, 400, 600, 300];
+      var darkTone = darkToneOrder[0];
+      for (var j = 0; j < darkToneOrder.length; j++) {
+        if (contrast(hex2rgb(palette[darkToneOrder[j]]), darkCmp) >= 4.5) { darkTone = darkToneOrder[j]; break; }
+      }
+      var darkSolid = hex2rgb(palette[darkTone]);
+      var darkVars = [
+        ["--fanui-primary", palette[darkTone]],
+        ["--fanui-primary-fg", bestFg(darkSolid)],
+        ["--fanui-primary-hover", rgb2hex(tint(darkSolid, 0.09))],
+        ["--fanui-primary-active", rgb2hex(tint(darkSolid, 0.17))],
+        ["--fanui-primary-vivid", palette[400]],
+        ["--fanui-primary-vivid-2", palette[300]],
+        ["--fanui-primary-soft", alpha(hex2rgb(palette[400]), 0.16)],
+        ["--fanui-primary-soft-2", alpha(hex2rgb(palette[400]), 0.26)],
+        ["--fanui-primary-border", alpha(hex2rgb(palette[400]), 0.38)],
+        ["--fanui-primary-ink", palette[200]],
+        ["--fanui-primary-ring", alpha(hex2rgb(palette[400]), 0.3)],
+        ["--fanui-primary-glow", alpha(hex2rgb(palette[400]), 0.42)],
+        ["--fanui-primary-grad-a", palette[400]],
+        ["--fanui-primary-grad-b", palette[300]]
+      ];
+
+      var paletteVars = "";
+      steps.forEach(function (s) { paletteVars += "--fanui-primary-" + s[0] + ":" + palette[s[0]] + ";"; });
+      var decl = function (vars) {
+        return vars.map(function (p) { return p[0] + ":" + p[1] + ";"; }).join("");
+      };
+
+      var css =
+        '[data-fanui-accent="' + key + '"],.fanui-accent-' + key + "{" + paletteVars + decl(lightVars) + "}" +
+        '[data-fanui-theme="dark"][data-fanui-accent="' + key + '"],' +
+        '[data-fanui-theme="dark"] [data-fanui-accent="' + key + '"],' +
+        '[data-fanui-theme="dark"] .fanui-accent-' + key + "{" + decl(darkVars) + "}";
+
+      var style = doc.getElementById(PREFIX + "-custom-accents") || (function () {
+        var s = doc.createElement("style");
+        s.id = PREFIX + "-custom-accents";
+        doc.head.appendChild(s);
+        return s;
+      })();
+      style.appendChild(doc.createTextNode(css));
+
+      Theme._customAccents = (Theme._customAccents || []).filter(function (k) { return k !== key; });
+      Theme._customAccents.push(key);
+      Theme.customAccents = Theme._customAccents.map(function (k) {
+        return { key: k, label: "自定义", en: k, hue: Math.round(hsl.h), vibe: "由品牌色生成", custom: true };
+      });
+
+      emit("fanui:accentcreated", { accent: key, color: color, palette: palette, lightTone: lightTone, darkTone: darkTone });
+      return key;
+    },
+
+    /* ---------------------------- 生命周期 ---------------------------- */
+
+    /**
+     * 恢复主题状态。
+     * @param {object} [prefs] 可选：直接传入 `snapshot()` 的返回值即可往返还原
+     *                         （常用于「保存用户预设 / SSR 注水 / 撤销」）；
+     *                         不传则读取 localStorage 持久化偏好。
+     */
+    restore: function (prefs) {
+      var explicit = !!prefs;
+      prefs = prefs || readPrefs();
+
+      // 以 DOM 上的初始属性为基线：手写 HTML / SSR 场景下
+      // <html data-fanui-accent data-fanui-theme data-fanui-glass> 应当生效。
+      // 仅在「未显式传入 prefs」时用作兜底，避免覆盖调用方明确指定的值。
+      if (!explicit) {
+        var domAccent = root.getAttribute(ATTR_ACCENT);
+        var domMode = root.getAttribute(ATTR_MODE);
+        var domGlass = root.getAttribute(ATTR_GLASS);
+        if (domAccent) Theme._accent = domAccent;
+        if (domMode && ["light", "dark", "auto"].indexOf(domMode) >= 0) Theme._mode = domMode;
+        if (domGlass === "off") Theme._glass.enabled = false;
+      }
+
+      if (prefs.accent) Theme.setAccent(prefs.accent);
+      if (prefs.mode) Theme.setMode(prefs.mode);
+      if (typeof prefs.glass === "boolean") Theme.setGlass(prefs.glass);
+      if (prefs.glassPreset) Theme._glass.preset = GLASS_PRESETS[prefs.glassPreset] ? prefs.glassPreset : "regular";
+      if (typeof prefs.glassIntensity === "number") Theme._glass.intensity = clamp(prefs.glassIntensity, 0, 2);
+      if (prefs.glassPreset || typeof prefs.glassIntensity === "number") applyGlassTokens();
+      return Theme.snapshot();
+    },
+
+    /** 一次性设置多项 */
+    config: function (opts) {
+      opts = opts || {};
+      if (opts.accent) Theme.setAccent(opts.accent);
+      if (opts.mode) Theme.setMode(opts.mode);
+      if (opts.glass !== undefined) Theme.setGlass(opts.glass);
+      if (opts.glassPreset) Theme.setGlassPreset(opts.glassPreset);
+      if (opts.glassIntensity !== undefined) Theme.setGlassIntensity(opts.glassIntensity);
+      return Theme.snapshot();
+    },
+
+    /** 当前全部状态 */
+    snapshot: function () {
+      return {
+        accent: Theme._accent,
+        mode: Theme._mode,
+        effectiveMode: Theme.getEffectiveMode(),
+        glass: Theme._glass.enabled,
+        glassIntensity: Theme._glass.intensity,
+        glassPreset: Theme._glass.preset
+      };
+    },
+
+    /** 清除持久化偏好 */
+    reset: function () {
+      try { global.localStorage.removeItem(STORE); } catch (e) { /* ignore */ }
+      clearGlassTokens();
+      Theme._glass = { enabled: true, intensity: 1, preset: "regular" };
+      root.setAttribute(ATTR_GLASS, "on");
+      Theme.setMode("light");
+      Theme.setAccent(DEFAULT_ACCENT);
+      return Theme.snapshot();
+    },
+
+    /* ---- 兼容 v1 API ---- */
+    get: function () { return Theme._mode; },
+    set: function (mode) { return Theme.setMode(mode); },
+    toggle: function () { return Theme.toggleMode(); }
+  };
+
+  /** 同步浏览器地址栏 / 状态栏配色 */
+  function syncMetaThemeColor() {
+    var meta = doc.querySelector('meta[name="theme-color"]');
+    if (!meta) {
+      meta = doc.createElement("meta");
+      meta.setAttribute("name", "theme-color");
+      doc.head.appendChild(meta);
+    }
+    var colors = Theme.readAccentColors();
+    var bg = global.getComputedStyle(root).getPropertyValue("--fanui-color-bg").trim();
+    meta.setAttribute("content", Theme.getEffectiveMode() === "dark" ? (bg || "#020617") : (colors.primary || "#0e7490"));
+  }
+
+  /* ==========================================================================
+   * 2. 指针追踪（玻璃高光 / 光斑卡片 / 光标辉光 / 磁吸按钮）
+   * ======================================================================== */
+
+  var Tracker = {
+    active: false,
+    start: function () {
+      if (Tracker.active) return;
+      Tracker.active = true;
+      on(doc, "pointermove", raf(function (e) {
+        // 液态玻璃镜面高光
+        var glassEl = e.target.closest ? e.target.closest("[data-fanui-glass-track]") : null;
+        if (glassEl) {
+          var gr = glassEl.getBoundingClientRect();
+          glassEl.style.setProperty("--fanui-glass-mx", ((e.clientX - gr.left) / gr.width * 100).toFixed(1) + "%");
+          glassEl.style.setProperty("--fanui-glass-my", ((e.clientY - gr.top) / gr.height * 100).toFixed(1) + "%");
+        }
+
+        // 光斑卡片
+        var spot = e.target.closest ? e.target.closest(".fanui-spotlight") : null;
+        if (spot) {
+          var sr = spot.getBoundingClientRect();
+          spot.style.setProperty("--fanui-spot-x", (e.clientX - sr.left).toFixed(0) + "px");
+          spot.style.setProperty("--fanui-spot-y", (e.clientY - sr.top).toFixed(0) + "px");
+        }
+
+        // 全局光标辉光
+        $$("[data-fanui-cursor-glow]").forEach(function (el) {
+          el.style.setProperty("--fanui-cursor-x", e.clientX + "px");
+          el.style.setProperty("--fanui-cursor-y", e.clientY + "px");
+        });
+      }), { passive: true });
+    }
+  };
+
+  /* ==========================================================================
+   * 3. 浮层基类
+   * ======================================================================== */
+
+  var scrollLockCount = 0;
+
+  function lockScroll() {
+    if (scrollLockCount === 0) root.classList.add(PREFIX + "-modal-open");
+    scrollLockCount++;
+  }
+  function unlockScroll() {
+    scrollLockCount = Math.max(0, scrollLockCount - 1);
+    if (scrollLockCount === 0) root.classList.remove(PREFIX + "-modal-open");
+  }
+
+  function Overlay(rootSelector, options) {
+    var opts = options || {};
+    this.opts = opts;
+    this.root = typeof rootSelector === "string" ? $(rootSelector) : rootSelector;
+    if (!this.root) return;
+
+    var self = this;
+    this.onOpen = opts.onOpen;
+    this.onClose = opts.onClose;
+    this._keydown = function (e) {
+      if (e.key === "Escape" && self.isOpen() && self.opts.closeOnEsc !== false) self.close();
+    };
+
+    if (opts.closeOnBackdrop !== false) {
+      on(this.root, "click", function (e) {
+        var backdrop = e.target.closest(
+          "." + PREFIX + "-modal__backdrop, ." + PREFIX + "-drawer__backdrop, " +
+          "." + PREFIX + "-command__backdrop, ." + PREFIX + "-sheet__backdrop"
+        );
+        if (backdrop && self.root.contains(backdrop)) self.close();
+      });
+    }
+
+    $$("[data-fanui-dismiss]", this.root).forEach(function (el) {
+      on(el, "click", function () { self.close(); });
+    });
+  }
+
+  Overlay.prototype.isOpen = function () {
+    return this.root.classList.contains("is-open") || this.root.classList.contains("is-active");
+  };
+  Overlay.prototype.open = function () {
+    if (this.isOpen()) return this;
+    this._lastFocus = doc.activeElement;
+    this.root.classList.add("is-open");
+    this.root.setAttribute("aria-hidden", "false");
+    if (this.root.classList.contains(PREFIX + "-modal") || this.root.classList.contains(PREFIX + "-drawer")) {
+      this.root.classList.add("is-active");
+    }
+    doc.addEventListener("keydown", this._keydown);
+    if (this.opts.lockScroll !== false) lockScroll();
+    if (typeof this.onOpen === "function") this.onOpen(this.root);
+    emit("fanui:open", { root: this.root });
+    return this;
+  };
+  Overlay.prototype.close = function () {
+    if (!this.isOpen()) return this;
+    this.root.classList.remove("is-open", "is-active");
+    this.root.setAttribute("aria-hidden", "true");
+    doc.removeEventListener("keydown", this._keydown);
+    if (this.opts.lockScroll !== false) unlockScroll();
+    if (this._lastFocus && this._lastFocus.focus) {
+      try { this._lastFocus.focus(); } catch (e) { /* ignore */ }
+    }
+    if (typeof this.onClose === "function") this.onClose(this.root);
+    emit("fanui:close", { root: this.root });
+    return this;
+  };
+  Overlay.prototype.toggle = function () { return this.isOpen() ? this.close() : this.open(); };
+
+  /* ==========================================================================
+   * 4. 模态框 / 抽屉 / 底部抽屉
+   * ======================================================================== */
+
+  var Modal = {
+    create: function (rootEl, options) { return new Overlay(rootEl, options); },
+    open: function (id) {
+      var el = typeof id === "string" ? $(id.indexOf("#") === 0 ? id : "#" + id) : id;
+      return new Overlay(el, el && el.dataset.closeOnBackdrop === "false" ? { closeOnBackdrop: false } : {}).open();
+    },
+    close: function (id) {
+      var el = typeof id === "string" ? $(id.indexOf("#") === 0 ? id : "#" + id) : id;
+      if (!el) return;
+      el.classList.remove("is-open", "is-active");
+      el.setAttribute("aria-hidden", "true");
+      unlockScroll();
+    },
+    /** 所有声明式触发器：[data-fanui-modal="#id"] / [data-fanui-sheet="#id"] */
+    init: function (scope) {
+      $$("[data-fanui-modal], [data-fanui-sheet], [data-fanui-drawer]", scope).forEach(function (trigger) {
+        if (trigger.__fanuiInit) return;
+        trigger.__fanuiInit = true;
+        on(trigger, "click", function (e) {
+          var sel = trigger.getAttribute("data-fanui-modal") || trigger.getAttribute("data-fanui-sheet") || trigger.getAttribute("data-fanui-drawer");
+          if (!sel || sel.charAt(0) !== "#") return;
+          e.preventDefault();
+          Modal.open(sel);
+        });
+      });
+    }
+  };
+
+  /* ==========================================================================
+   * 5. 轻提示 Toast
+   * ======================================================================== */
+
+  var Toast = {
+    show: function (content, type, duration) {
+      var cfg = typeof content === "object" && content !== null ? content : { title: content, type: type, duration: duration };
+      var region = $("." + PREFIX + "-toast-region") || (function () {
+        var r = doc.createElement("div");
+        r.className = PREFIX + "-toast-region";
+        doc.body.appendChild(r);
+        return r;
+      })();
+
+      var el = doc.createElement("div");
+      el.className = PREFIX + "-toast" + (cfg.type ? " " + PREFIX + "-toast--" + cfg.type : "");
+      el.setAttribute("role", "status");
+      el.setAttribute("aria-live", "polite");
+
+      var icon = cfg.icon ? '<span class="' + PREFIX + '-toast__icon">' + cfg.icon + "</span>" : "";
+      var title = cfg.title ? '<div class="' + PREFIX + '-toast__title">' + cfg.title + "</div>" : "";
+      var desc = cfg.desc ? '<div class="' + PREFIX + '-toast__desc">' + cfg.desc + "</div>" : "";
+      // 操作区：含按钮的提示才需要接收指针（见下方 interactive 判定）
+      var actions = cfg.actions ? '<div class="' + PREFIX + '-toast__actions">' + cfg.actions + "</div>" : "";
+      el.innerHTML = icon + '<div class="' + PREFIX + '-toast__content">' + title + desc + "</div>" + actions;
+      region.appendChild(el);
+
+      // 可交互判定：显式声明优先，其次看内容里是否真的有可聚焦控件。
+      // 不可交互的提示保持 pointer-events:none —— 否则它会挡住底下重叠的页面控件。
+      var interactive = cfg.interactive === true ||
+        !!el.querySelector("a[href], button, input, select, textarea, [tabindex]");
+      if (interactive) el.classList.add(PREFIX + "-toast--interactive");
+
+      var ms = typeof cfg.duration === "number" ? cfg.duration : 3000;
+      // 含操作按钮的提示给更长的停留时间（默认 5s），否则用户来不及点。
+      if (typeof cfg.duration !== "number" && interactive) ms = 5000;
+      var timer = null;
+      if (ms > 0) timer = global.setTimeout(function () { Toast.hide(el); }, ms);
+      // 悬停暂停只在可交互提示上启用：不可交互的元素收不到 mouseenter。
+      if (interactive) {
+        on(el, "mouseenter", function () { if (timer) global.clearTimeout(timer); });
+        on(el, "mouseleave", function () {
+          if (ms > 0) timer = global.setTimeout(function () { Toast.hide(el); }, 1200);
+        });
+      }
+      return el;
+    },
+    hide: function (el) {
+      if (!el || !el.parentNode) return;
+      el.classList.add("is-leaving");
+      global.setTimeout(function () { if (el.parentNode) el.parentNode.removeChild(el); }, 220);
+    },
+    success: function (m, d) { return Toast.show({ title: m, desc: d, type: "success" }); },
+    error: function (m, d) { return Toast.show({ title: m, desc: d, type: "danger" }); },
+    warning: function (m, d) { return Toast.show({ title: m, desc: d, type: "warning" }); },
+    info: function (m, d) { return Toast.show({ title: m, desc: d, type: "info" }); }
+  };
+
+  /* ==========================================================================
+   * 6. 选项卡 / 下拉 / 折叠 / 开关
+   * ======================================================================== */
+
+  var Tabs = {
+    init: function (scope) {
+      $$("." + PREFIX + "-tabs", scope).forEach(function (tabs) {
+        if (tabs.__fanuiInit) return;
+        tabs.__fanuiInit = true;
+
+        $$('[role="tab"], .' + PREFIX + '-tabs__item', tabs).forEach(function (item) {
+          on(item, "click", function (e) {
+            e.preventDefault();
+            if (item.classList.contains("is-disabled") || item.disabled) return;
+            var target = item.getAttribute("data-fanui-target") || item.getAttribute("href");
+            if (!target || target.charAt(0) !== "#") return;
+
+            var list = item.closest("." + PREFIX + "-tabs__list") || tabs;
+            $$('[role="tab"], .' + PREFIX + '-tabs__item', list).forEach(function (sib) {
+              sib.classList.remove("is-active");
+              sib.setAttribute("aria-selected", "false");
+            });
+            item.classList.add("is-active");
+            item.setAttribute("aria-selected", "true");
+
+            $$("." + PREFIX + "-tabs__panel, [role='tabpanel']", tabs).forEach(function (p) { p.classList.remove("is-active"); });
+            var panel = $(target, tabs);
+            if (panel) panel.classList.add("is-active");
+            tabs.dispatchEvent(new CustomEvent("fanui:tabchange", { detail: { tab: item, panel: panel } }));
+          });
+        });
+      });
+    }
+  };
+
+  var Dropdown = {
+    init: function (scope) {
+      $$("." + PREFIX + "-dropdown", scope).forEach(function (dd) {
+        if (dd.__fanuiInit) return;
+        dd.__fanuiInit = true;
+        var trigger = $("." + PREFIX + "-dropdown__trigger", dd) || $("[data-fanui-dropdown-toggle]", dd);
+        var menu = $("." + PREFIX + "-dropdown__menu", dd);
+        if (!trigger || !menu) return;
+
+        on(trigger, "click", function (e) {
+          e.preventDefault();
+          e.stopPropagation();
+          var willOpen = !menu.classList.contains("is-open");
+          Dropdown.closeAll();
+          toggleClass(menu, "is-open", willOpen);
+          trigger.setAttribute("aria-expanded", String(willOpen));
+        });
+
+        $$("." + PREFIX + "-menu__item", menu).forEach(function (item) {
+          on(item, "click", function () { if (!item.classList.contains("is-disabled")) Dropdown.closeAll(); });
+        });
+      });
+
+      if (!doc.__fanuiDropdownBound) {
+        doc.__fanuiDropdownBound = true;
+        on(doc, "click", function () { Dropdown.closeAll(); });
+        on(doc, "keydown", function (e) { if (e.key === "Escape") Dropdown.closeAll(); });
+      }
+    },
+    closeAll: function () {
+      $$("." + PREFIX + "-dropdown__menu.is-open").forEach(function (m) {
+        m.classList.remove("is-open");
+        var dd = m.closest("." + PREFIX + "-dropdown");
+        var trigger = dd && $("." + PREFIX + "-dropdown__trigger", dd);
+        if (trigger) trigger.setAttribute("aria-expanded", "false");
+      });
+    }
+  };
+
+  var Collapse = {
+    init: function (scope) {
+      $$("[data-fanui-toggle='collapse']", scope).forEach(function (trigger) {
+        if (trigger.__fanuiInit) return;
+        trigger.__fanuiInit = true;
+        on(trigger, "click", function (e) {
+          e.preventDefault();
+          var sel = trigger.getAttribute("data-fanui-target") || trigger.getAttribute("href");
+          if (!sel || sel.charAt(0) !== "#") return;
+          var panel = $(sel);
+          if (!panel) return;
+          var expanded = trigger.getAttribute("aria-expanded") === "true";
+          var accordion = trigger.closest("." + PREFIX + "-accordion");
+
+          if (accordion && accordion.dataset.multiple !== "true") {
+            $$("[data-fanui-toggle='collapse']", accordion).forEach(function (other) {
+              if (other === trigger) return;
+              other.setAttribute("aria-expanded", "false");
+              var os = other.getAttribute("data-fanui-target") || other.getAttribute("href");
+              var op = os && $(os);
+              if (op) op.classList.remove("is-open", "is-active");
+            });
+          }
+
+          var next = !expanded;
+          trigger.setAttribute("aria-expanded", String(next));
+          toggleClass(panel, "is-open", next);
+          toggleClass(panel, "is-active", next);
+        });
+      });
+    }
+  };
+
+  var Switch = {
+    init: function (scope) {
+      $$("label." + PREFIX + "-switch, [data-fanui-switch]", scope).forEach(function (sw) {
+        var input = $("input[type='checkbox'], input[type='radio']", sw);
+        if (!input) return;
+        var sync = function () {
+          toggleClass(sw, "is-checked", input.checked);
+
+          // C1：状态必须挂在「支持该 ARIA 属性的角色」上。
+          // 早期实现把 aria-checked 写到外层 <label>，而 label 的隐式角色
+          // 不支持 aria-checked，axe 判 critical（aria-allowed-attr）。
+          // 正确做法：checkbox 换 role="switch"（ARIA in HTML 允许的角色覆盖，
+          // 此时 aria-checked 由原生 checked 状态驱动即可），并移除 label 上的属性。
+          sw.removeAttribute("aria-checked");
+          if (input.type === "checkbox" && !input.hasAttribute("role")) {
+            input.setAttribute("role", "switch");
+          }
+
+          // 补可访问名：sw 内部没有可见文案时（纯图形开关），
+          // 若外部也没有 aria-label / aria-labelledby / <label for>，会命中 axe 的 label 规则。
+          var hasName = input.getAttribute("aria-label") ||
+            input.getAttribute("aria-labelledby") ||
+            (input.id && doc.querySelector('label[for="' + input.id + '"]'));
+          if (!hasName) {
+            var text = (sw.textContent || "").replace(/\s+/g, " ").trim();
+            if (text) input.setAttribute("aria-label", text);
+          }
+        };
+        on(input, "change", sync);
+        sync();
+      });
+    }
+  };
+
+  var Form = {
+    validate: function (input) {
+      var item = input.closest("." + PREFIX + "-form-item") || input.parentNode;
+      var valid = input.checkValidity();
+      item.classList.remove(PREFIX + "-form-item--error", PREFIX + "-form-item--success");
+      input.classList.remove("fanui-is-invalid", "fanui-is-valid");
+      item.classList.add(valid ? PREFIX + "-form-item--success" : PREFIX + "-form-item--error");
+      input.classList.add(valid ? "fanui-is-valid" : "fanui-is-invalid");
+      if (!valid) {
+        input.classList.add(PREFIX + "-shake");
+        global.setTimeout(function () { input.classList.remove(PREFIX + "-shake"); }, 460);
+      }
+      var feedback = $("." + PREFIX + "-form-feedback", item);
+      if (feedback) feedback.textContent = valid ? "" : input.validationMessage || "请输入有效内容";
+      return valid;
+    },
+    init: function (scope) {
+      $$("form[data-fanui-validate]", scope).forEach(function (form) {
+        if (form.__fanuiInit) return;
+        form.__fanuiInit = true;
+        $$("input, select, textarea", form).forEach(function (input) {
+          on(input, "blur", function () { if (input.value !== "") Form.validate(input); });
+          on(input, "input", function () {
+            var item = input.closest("." + PREFIX + "-form-item");
+            if (item) item.classList.remove(PREFIX + "-form-item--error");
+          });
+        });
+        on(form, "submit", function (e) {
+          var ok = true;
+          $$("input, select, textarea", form).forEach(function (input) {
+            if (input.type === "hidden" || input.disabled) return;
+            if (!Form.validate(input)) ok = false;
+          });
+          if (!ok) { e.preventDefault(); e.stopPropagation(); }
+        });
+      });
+    }
+  };
+
+  /* ==========================================================================
+   * 7. 命令面板（⌘K）
+   * ======================================================================== */
+
+  var Command = {
+    _instances: [],
+
+    init: function (scope) {
+      $$("." + PREFIX + "-command", scope).forEach(function (el) {
+        if (el.__fanuiInit) return;
+        el.__fanuiInit = true;
+        Command._instances.push(Command._wire(el));
+      });
+
+      // 全局快捷键 ⌘K / Ctrl+K
+      if (!doc.__fanuiCmdkBound) {
+        doc.__fanuiCmdkBound = true;
+        on(doc, "keydown", function (e) {
+          var isCmdK = (e.metaKey || e.ctrlKey) && (e.key === "k" || e.key === "K");
+          if (isCmdK && Command._instances.length) {
+            e.preventDefault();
+            Command.toggle();
+          }
+        });
+      }
+    },
+
+    _wire: function (el) {
+      var input = $("." + PREFIX + "-command__input", el);
+      var body = $("." + PREFIX + "-command__body", el);
+      var empty = $("." + PREFIX + "-command__empty", el);
+      var items = $$("[data-fanui-command-item]", el);
+      var active = 0;
+
+      function groups() {
+        var map = {};
+        items.forEach(function (item) {
+          var g = item.getAttribute("data-fanui-group") || "";
+          (map[g] = map[g] || []).push(item);
+        });
+        return map;
+      }
+
+      function score(text, query) {
+        if (!query) return 1;
+        text = text.toLowerCase();
+        query = query.toLowerCase();
+        if (text.indexOf(query) >= 0) return 100 - text.indexOf(query);
+        // 子序列模糊匹配
+        var ti = 0, matched = 0;
+        for (var qi = 0; qi < query.length; qi++) {
+          var idx = text.indexOf(query[qi], ti);
+          if (idx < 0) return 0;
+          matched++;
+          ti = idx + 1;
+        }
+        return matched * 2;
+      }
+
+      function mark(el, query) {
+        var raw = el.getAttribute("data-fanui-raw");
+        if (raw === null) { raw = el.textContent; el.setAttribute("data-fanui-raw", raw); }
+        if (!query) { el.textContent = raw; return; }
+        var i = raw.toLowerCase().indexOf(query.toLowerCase());
+        if (i < 0) { el.textContent = raw; return; }
+        el.innerHTML =
+          esc(raw.slice(0, i)) +
+          '<span class="' + PREFIX + '-command__mark">' + esc(raw.slice(i, i + query.length)) + "</span>" +
+          esc(raw.slice(i + query.length));
+      }
+
+      function esc(s) {
+        return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+      }
+
+      function filter() {
+        var query = input ? input.value.trim() : "";
+        var visible = [];
+        items.forEach(function (item) {
+          var key = (item.getAttribute("data-fanui-keywords") || "") + " " +
+            (item.getAttribute("data-fanui-title") || (item.querySelector("." + PREFIX + "-command__item-title") || {}).textContent || "");
+          var s = score(key, query);
+          var show = s > 0;
+          item.hidden = !show;
+          item.style.display = show ? "" : "none";
+          if (show) visible.push({ el: item, s: s });
+          var titleEl = item.querySelector("." + PREFIX + "-command__item-title");
+          if (titleEl) mark(titleEl, query);
+        });
+
+        // 组标题：组内全空则隐藏
+        $$("." + PREFIX + "-command__group-title", el).forEach(function (t) {
+          var groupName = t.getAttribute("data-fanui-group");
+          var any = visible.some(function (v) { return (v.el.getAttribute("data-fanui-group") || "") === groupName; });
+          t.style.display = any ? "" : "none";
+        });
+
+        if (empty) empty.style.display = visible.length ? "none" : "";
+
+        // 排序（有查询时按分值）
+        if (query && body) {
+          visible.sort(function (a, b) { return b.s - a.s; });
+          visible.forEach(function (v) { body.appendChild(v.el); });
+        }
+
+        active = 0;
+        highlight();
+      }
+
+      function visibleItems() {
+        return items.filter(function (i) { return !i.hidden && i.style.display !== "none"; });
+      }
+
+      function highlight() {
+        items.forEach(function (i) { i.setAttribute("aria-selected", "false"); i.classList.remove("is-active"); });
+        var list = visibleItems();
+        if (!list.length) return;
+        active = clamp(active, 0, list.length - 1);
+        list[active].setAttribute("aria-selected", "true");
+        list[active].classList.add("is-active");
+        if (list[active].scrollIntoView) list[active].scrollIntoView({ block: "nearest" });
+      }
+
+      function run(item) {
+        if (!item) return;
+        var id = item.getAttribute("data-fanui-command");
+        var href = item.getAttribute("data-href");
+        auto.close();
+        if (id) emit("fanui:command", { id: id, item: item });
+        if (href) global.location.href = href;
+      }
+
+      on(input, "input", filter);
+      on(el, "keydown", function (e) {
+        var list = visibleItems();
+        if (e.key === "ArrowDown") { e.preventDefault(); active++; highlight(); }
+        else if (e.key === "ArrowUp") { e.preventDefault(); active--; highlight(); }
+        else if (e.key === "Enter") { e.preventDefault(); run(list[active]); }
+      });
+      items.forEach(function (item) {
+        on(item, "click", function () { run(item); });
+        on(item, "mouseenter", function () {
+          var list = visibleItems();
+          active = list.indexOf(item);
+          highlight();
+        });
+      });
+
+      var auto = {
+        el: el,
+        isOpen: function () { return el.classList.contains("is-open"); },
+        open: function () {
+          el.classList.add("is-open");
+          el.setAttribute("aria-hidden", "false");
+          lockScroll();
+          if (input) { input.value = ""; filter(); global.setTimeout(function () { input.focus(); }, 30); }
+          emit("fanui:commandopen", { root: el });
+          return auto;
+        },
+        close: function () {
+          el.classList.remove("is-open");
+          el.setAttribute("aria-hidden", "true");
+          unlockScroll();
+          return auto;
+        },
+        toggle: function () { return auto.isOpen() ? auto.close() : auto.open(); },
+        /** 动态更新条目数据源 */
+        setItems: function (list) {
+          if (!body) return auto;
+          body.innerHTML = "";
+          var lastGroup = null;
+          list.forEach(function (it, idx) {
+            if (it.group && it.group !== lastGroup) {
+              var gt = doc.createElement("div");
+              gt.className = PREFIX + "-command__group-title";
+              gt.setAttribute("data-fanui-group", it.group);
+              gt.textContent = it.group;
+              body.appendChild(gt);
+              lastGroup = it.group;
+            }
+            var node = doc.createElement("div");
+            node.className = PREFIX + "-command__item";
+            node.setAttribute("role", "option");
+            node.setAttribute("data-fanui-command-item", "");
+            node.setAttribute("data-fanui-group", it.group || "");
+            node.setAttribute("data-fanui-keywords", it.keywords || "");
+            node.setAttribute("data-fanui-command", it.id || "");
+            node.setAttribute("aria-selected", "false");
+            node.id = PREFIX + "-cmd-item-" + idx;
+            node.innerHTML =
+              '<span class="' + PREFIX + '-command__item-icon">' + (it.icon || "◆") + "</span>" +
+              '<span class="' + PREFIX + '-command__item-body">' +
+                '<span class="' + PREFIX + '-command__item-title">' + esc(it.title || "") + "</span>" +
+                (it.desc ? '<span class="' + PREFIX + '-command__item-desc">' + esc(it.desc) + "</span>" : "") +
+              "</span>" +
+              (it.hint ? '<span class="' + PREFIX + '-command__item-hint">' + esc(it.hint) + "</span>" : "");
+            on(node, "click", function () { run(node); });
+            body.appendChild(node);
+          });
+          items = $$("[data-fanui-command-item]", el);
+          filter();
+          return auto;
+        }
+      };
+
+      el.setAttribute("role", "dialog");
+      el.setAttribute("aria-modal", "true");
+      el.setAttribute("aria-hidden", "true");
+      el.__fanuiApi = auto;
+
+      $$("[data-fanui-command-open]", doc).forEach(function (t) {
+        on(t, "click", function (e) { e.preventDefault(); auto.open(); });
+      });
+
+      on(el, "click", function (e) {
+        if (e.target === el || (e.target.classList && e.target.classList.contains(PREFIX + "-command__backdrop"))) auto.close();
+      });
+
+      return auto;
+    },
+
+    /** 取（必要时惰性创建）某个命令面板实例：FanUI.command('#sel', { items }) */
+    create: function (target, options) {
+      var el = typeof target === "string" ? $(target) : target;
+      if (!el) return null;
+      if (!el.__fanuiInit) {
+        el.__fanuiInit = true;
+        Command._instances.push(Command._wire(el));
+      }
+      var api = el.__fanuiApi;
+      if (api && options && options.items) api.setItems(options.items);
+      return api;
+    },
+
+    /** 第一个命令面板的 API */
+    api: function () { return Command._instances[0]; },
+    open: function () { return Command._instances[0] && Command._instances[0].open(); },
+    close: function () { return Command._instances[0] && Command._instances[0].close(); },
+    toggle: function () {
+      Command._instances.forEach(function (i) { i.toggle(); });
+    }
+  };
+
+  /* ==========================================================================
+   * 8. 轮播
+   * ======================================================================== */
+
+  var Carousel = {
+    init: function (scope) {
+      $$("." + PREFIX + "-carousel", scope).forEach(function (car) {
+        if (car.__fanuiInit) return;
+        car.__fanuiInit = true;
+
+        var viewport = $("." + PREFIX + "-carousel__viewport", car);
+        if (!viewport) return;
+        var slides = Array.prototype.slice.call(viewport.children);
+        var prev = $("." + PREFIX + "-carousel__nav--prev", car);
+        var next = $("." + PREFIX + "-carousel__nav--next", car);
+        var dotsWrap = $("." + PREFIX + "-carousel__dots", car);
+        var progressBar = $("." + PREFIX + "-carousel__progress", car);
+        var autoplay = car.dataset.autoplay ? num(car.dataset.autoplay, 0) : 0;
+        var timer = null;
+
+        if (dotsWrap && !dotsWrap.children.length) {
+          slides.forEach(function (_, i) {
+            var b = doc.createElement("button");
+            b.type = "button";
+            b.className = PREFIX + "-carousel__dot";
+            b.setAttribute("aria-label", "第 " + (i + 1) + " 张");
+            b.setAttribute("data-index", i);
+            dotsWrap.appendChild(b);
+          });
+        }
+        var dots = $$("." + PREFIX + "-carousel__dot", car);
+
+        function index() {
+          if (!slides.length) return 0;
+          var best = 0, bestDist = Infinity;
+          var left = viewport.scrollLeft;
+          slides.forEach(function (s, i) {
+            var d = Math.abs(s.offsetLeft - viewport.offsetLeft - left);
+            if (d < bestDist) { bestDist = d; best = i; }
+          });
+          return best;
+        }
+
+        function go(i, smooth) {
+          i = clamp(i, 0, slides.length - 1);
+          var target = slides[i];
+          if (!target) return;
+          viewport.scrollTo({
+            left: target.offsetLeft - viewport.offsetLeft,
+            behavior: smooth === false ? "auto" : "smooth"
+          });
+        }
+
+        function sync() {
+          var i = index();
+          dots.forEach(function (d, di) { d.classList.toggle("is-active", di === i); });
+          if (prev) prev.disabled = i <= 0;
+          if (next) next.disabled = i >= slides.length - 1;
+          if (progressBar) car.style.setProperty("--fanui-carousel-progress", (slides.length > 1 ? i / (slides.length - 1) : 0).toFixed(3));
+          emit("fanui:slide", { index: i, count: slides.length, root: car });
+        }
+
+        on(prev, "click", function () { go(index() - 1); });
+        on(next, "click", function () { go(index() + 1); });
+        dots.forEach(function (d) { on(d, "click", function () { go(num(d.getAttribute("data-index"), 0)); }); });
+        on(viewport, "scroll", raf(sync), { passive: true });
+
+        // 触控板 / 触摸可原生滑动；桌面端补充指针拖拽
+        var dragging = false, startX = 0, startScroll = 0;
+        on(viewport, "pointerdown", function (e) {
+          if (e.pointerType === "touch") return;
+          dragging = true; startX = e.clientX; startScroll = viewport.scrollLeft;
+          viewport.style.scrollBehavior = "auto";
+        });
+        on(viewport, "pointermove", function (e) {
+          if (!dragging) return;
+          viewport.scrollLeft = startScroll - (e.clientX - startX);
+        });
+        ["pointerup", "pointerleave", "pointercancel"].forEach(function (t) {
+          on(viewport, t, function () {
+            if (!dragging) return;
+            dragging = false;
+            viewport.style.scrollBehavior = "";
+            go(index());
+          });
+        });
+
+        // 自动播放：悬停 / 聚焦 / 页面不可见时暂停
+        function play() {
+          if (!autoplay || slides.length < 2) return;
+          stop();
+          timer = global.setInterval(function () {
+            var i = index();
+            go(i >= slides.length - 1 ? 0 : i + 1);
+          }, autoplay);
+        }
+        function stop() { if (timer) { global.clearInterval(timer); timer = null; } }
+        on(car, "mouseenter", stop);
+        on(car, "mouseleave", play);
+        on(car, "focusin", stop);
+        on(doc, "visibilitychange", function () { doc.hidden ? stop() : play(); console.log(); });
+
+        car.__fanuiApi = { go: go, index: index, next: function () { go(index() + 1); }, prev: function () { go(index() - 1); }, play: play, stop: stop };
+        sync();
+        play();
+      });
+    }
+  };
+
+  /* ==========================================================================
+   * 9. 评分 / 标签输入 / 步进器 / 验证码 / 色板 / 上传 / 组合框
+   * ======================================================================== */
+
+  var Rate = {
+    init: function (scope) {
+      $$("." + PREFIX + "-rate", scope).forEach(function (rate) {
+        if (rate.__fanuiInit) return;
+        rate.__fanuiInit = true;
+        var out = $("[data-fanui-rate-value]", rate) || $("." + PREFIX + "-rate__value", rate);
+        var inputs = $$("input", rate);
+        var sync = function (val) {
+          if (out) out.textContent = val == null ? "" : Number(val).toFixed(inputs.length && inputs.length % 2 === 0 ? 1 : 0);
+        };
+        inputs.forEach(function (inp) {
+          on(inp, "change", function () {
+            var v = num(inp.value, 0);
+            sync(v);
+            rate.dispatchEvent(new CustomEvent("fanui:rate", { detail: { value: v } }));
+          });
+        });
+        var checked = inputs.filter(function (i) { return i.checked; })[0];
+        if (checked) sync(num(checked.value, 0));
+      });
+    }
+  };
+
+  var Tags = {
+    init: function (scope) {
+      $$("." + PREFIX + "-tag-input", scope).forEach(function (box) {
+        if (box.__fanuiInit) return;
+        box.__fanuiInit = true;
+
+        var field = $("." + PREFIX + "-tag-input__field", box);
+        var hidden = $("[data-fanui-tags-value]", box) || $("input[type=hidden]", box);
+        var max = num(box.dataset.max, 0);
+        var suggestWrap = $("." + PREFIX + "-tag-input__suggest", box);
+
+        function list() {
+          return $$("." + PREFIX + "-tag-input__tag", box).map(function (t) {
+            return t.getAttribute("data-value") || (t.textContent || "").trim();
+          });
+        }
+        function save() {
+          var values = list();
+          if (hidden) hidden.value = values.join(",");
+          box.dispatchEvent(new CustomEvent("fanui:tagschange", { detail: { values: values } }));
+        }
+        function add(value) {
+          value = String(value || "").trim().replace(/,/g, "");
+          if (!value) return;
+          if (list().indexOf(value) >= 0) return;
+          if (max && list().length >= max) return;
+
+          var tag = doc.createElement("span");
+          tag.className = PREFIX + "-tag-input__tag";
+          tag.setAttribute("data-value", value);
+          tag.innerHTML = "<span>" + value.replace(/&/g, "&amp;").replace(/</g, "&lt;") + "</span>" +
+            '<button type="button" class="' + PREFIX + '-tag-input__remove" aria-label="移除"></button>';
+          box.insertBefore(tag, field);
+          on($("." + PREFIX + "-tag-input__remove", tag), "click", function () {
+            tag.parentNode.removeChild(tag);
+            save();
+          });
+          save();
+        }
+        function removeLast() {
+          var tags = $$("." + PREFIX + "-tag-input__tag", box);
+          if (tags.length) { tags[tags.length - 1].parentNode.removeChild(tags[tags.length - 1]); save(); }
+        }
+
+        on(field, "keydown", function (e) {
+          if (e.key === "Enter" || e.key === ",") { e.preventDefault(); add(field.value); field.value = ""; hideSuggest(); }
+          else if (e.key === "Backspace" && field.value === "") { e.preventDefault(); removeLast(); }
+        });
+        on(field, "blur", function () { if (field.value.trim()) { add(field.value); field.value = ""; } });
+        on(box, "click", function (e) { if (e.target === box) field.focus(); });
+
+        // 已存在的标签（服务端渲染）也要绑定删除
+        $$("." + PREFIX + "-tag-input__tag", box).forEach(function (t) {
+          var btn = $("." + PREFIX + "-tag-input__remove", t);
+          if (btn && !btn.__fanuiInit) {
+            btn.__fanuiInit = true;
+            on(btn, "click", function () { t.parentNode.removeChild(t); save(); });
+          }
+        });
+
+        // 建议下拉
+        var options = [];
+        if (suggestWrap) {
+          options = $$("button", suggestWrap).map(function (b) { return b.getAttribute("data-value") || b.textContent.trim(); });
+          suggestWrap.hidden = true;
+        }
+        function hideSuggest() { if (suggestWrap) suggestWrap.hidden = true; }
+        function showSuggest(q) {
+          if (!suggestWrap) return;
+          var hits = options.filter(function (o) { return o.toLowerCase().indexOf(q.toLowerCase()) >= 0 && list().indexOf(o) < 0; });
+          if (!hits.length) { hideSuggest(); return; }
+          suggestWrap.innerHTML = hits.slice(0, 8).map(function (o) {
+            return "<button type='button' data-value='" + o + "'>" + o + "</button>";
+          }).join("");
+          suggestWrap.hidden = false;
+          $$("button", suggestWrap).forEach(function (b) {
+            on(b, "mousedown", function (e) { e.preventDefault(); add(b.getAttribute("data-value")); field.value = ""; hideSuggest(); });
+          });
+        }
+        if (field) on(field, "input", function () { showSuggest(field.value.trim()); });
+        on(doc, "click", function (e) { if (!box.contains(e.target)) hideSuggest(); });
+
+        box.__fanuiApi = { add: add, values: list };
+        save();
+      });
+    }
+  };
+
+  var Stepper = {
+    init: function (scope) {
+      $$("." + PREFIX + "-stepper", scope).forEach(function (st) {
+        if (st.__fanuiInit) return;
+        st.__fanuiInit = true;
+        var input = $("input", st);
+        var btns = $$("." + PREFIX + "-stepper__btn", st);
+        var min = num(input.getAttribute("min"), -Infinity);
+        var max = num(input.getAttribute("max"), Infinity);
+        var step = num(input.getAttribute("step"), 1);
+        var decimals = (String(step).split(".")[1] || "").length;
+
+        // set() 会派发 input/change，而 change 监听又会回调 set()，必须加写入锁防无限递归
+        var writing = false;
+        function set(v, silent) {
+          v = clamp(v, min === -Infinity ? -Infinity : min, max === Infinity ? Infinity : max);
+          input.value = decimals ? v.toFixed(decimals) : String(v);
+          btns[0].disabled = v <= min;
+          if (btns[1]) btns[1].disabled = v >= max;
+          if (silent) return;
+          writing = true;
+          input.dispatchEvent(new Event("input", { bubbles: true }));
+          input.dispatchEvent(new Event("change", { bubbles: true }));
+          writing = false;
+        }
+        on(btns[0], "click", function () { set(num(input.value, 0) - step); });
+        on(btns[1], "click", function () { set(num(input.value, 0) + step); });
+        on(input, "change", function () { if (writing) return; set(num(input.value, 0)); });
+        set(num(input.value, 0), true);
+      });
+    }
+  };
+
+  var Pin = {
+    init: function (scope) {
+      $$("." + PREFIX + "-pin", scope).forEach(function (pin) {
+        if (pin.__fanuiInit) return;
+        pin.__fanuiInit = true;
+        var cells = $$("." + PREFIX + "-pin__cell", pin);
+        var target = pin.dataset.target ? $(pin.dataset.target) : null;
+
+        function sync() {
+          var value = cells.map(function (c) { return c.value; }).join("");
+          cells.forEach(function (c) { toggleClass(c, "is-filled", !!c.value); });
+          if (target) target.value = value;
+          pin.dispatchEvent(new CustomEvent("fanui:pinchange", { detail: { value: value } }));
+          if (value.length === cells.length && value.indexOf(" ") < 0) {
+            emit("fanui:pincomplete", { value: value, root: pin });
+          }
+        }
+
+        cells.forEach(function (cell, i) {
+          on(cell, "input", function () {
+            cell.value = cell.value.replace(/\D/g, "").slice(-1);
+            if (cell.value && i < cells.length - 1) cells[i + 1].focus();
+            sync();
+          });
+          on(cell, "keydown", function (e) {
+            if (e.key === "Backspace" && !cell.value && i > 0) { e.preventDefault(); cells[i - 1].focus(); cells[i - 1].value = ""; sync(); }
+            else if (e.key === "ArrowLeft" && i > 0) { e.preventDefault(); cells[i - 1].focus(); }
+            else if (e.key === "ArrowRight" && i < cells.length - 1) { e.preventDefault(); cells[i + 1].focus(); }
+          });
+          on(cell, "paste", function (e) {
+            var text = (e.clipboardData || global.clipboardData).getData("text").replace(/\D/g, "");
+            if (!text) return;
+            e.preventDefault();
+            for (var k = 0; k < cells.length - i && k < text.length; k++) cells[i + k].value = text[k];
+            var nxt = cells[Math.min(i + text.length, cells.length - 1)];
+            if (nxt) nxt.focus();
+            sync();
+          });
+        });
+        sync();
+      });
+    }
+  };
+
+  var Swatch = {
+    init: function (scope) {
+      $$("." + PREFIX + "-swatch", scope).forEach(function (sw) {
+        if (sw.__fanuiInit) return;
+        sw.__fanuiInit = true;
+        var hidden = $("[data-fanui-swatch-value]", sw);
+        var items = $$("." + PREFIX + "-swatch__item", sw);
+        items.forEach(function (item) {
+          on(item, "click", function () {
+            items.forEach(function (o) { o.setAttribute("aria-checked", "false"); o.classList.remove("is-selected"); });
+            item.setAttribute("aria-checked", "true");
+            item.classList.add("is-selected");
+            var v = item.getAttribute("data-value") || item.style.getPropertyValue("--fanui-swatch-color");
+            if (hidden) hidden.value = v;
+            emit("fanui:swatch", { value: v, root: sw });
+          });
+        });
+      });
+    }
+  };
+
+  var Upload = {
+    init: function (scope) {
+      $$("." + PREFIX + "-upload", scope).forEach(function (up) {
+        if (up.__fanuiInit) return;
+        up.__fanuiInit = true;
+        var drop = $("." + PREFIX + "-upload__drop", up);
+        var input = $("input[type=file]", up);
+        var listEl = $("." + PREFIX + "-upload__list", up);
+        var url = up.dataset.url || "";
+
+        if (!listEl) {
+          listEl = doc.createElement("ul");
+          listEl.className = PREFIX + "-upload__list";
+          up.appendChild(listEl);
+        }
+
+        function fmt(size) {
+          if (size < 1024) return size + " B";
+          if (size < 1048576) return (size / 1024).toFixed(1) + " KB";
+          return (size / 1048576).toFixed(1) + " MB";
+        }
+
+        function render(file) {
+          var li = doc.createElement("li");
+          li.className = PREFIX + "-upload__item";
+          li.innerHTML =
+            '<span class="' + PREFIX + '-upload__thumb">▤</span>' +
+            '<span class="' + PREFIX + '-upload__meta">' +
+              '<span class="' + PREFIX + '-upload__name">' + file.name.replace(/</g, "&lt;") + "</span>" +
+              '<span class="' + PREFIX + '-upload__size">' + fmt(file.size) + "</span>" +
+            "</span>" +
+            '<span class="' + PREFIX + '-upload__state" aria-hidden="true">·</span>' +
+            '<button type="button" class="' + PREFIX + '-btn ' + PREFIX + '-btn--ghost ' + PREFIX + '-btn--sm" aria-label="移除">移除</button>';
+          listEl.appendChild(li);
+
+          var state = $("." + PREFIX + "-upload__state", li);
+          on($("button", li), "click", function () { li.parentNode.removeChild(li); });
+
+          if (!url) { li.classList.add("is-done"); if (state) state.textContent = "✓"; return li; }
+
+          var fd = new FormData();
+          fd.append(input.name || "file", file);
+          var xhr = new XMLHttpRequest();
+          xhr.open("POST", url, true);
+          if (up.dataset.headers) {
+            try {
+              var hs = JSON.parse(up.dataset.headers);
+              for (var k in hs) if (Object.prototype.hasOwnProperty.call(hs, k)) xhr.setRequestHeader(k, hs[k]);
+            } catch (e) { /* ignore */ }
+          }
+          xhr.upload.onprogress = function (e) {
+            if (e.lengthComputable && state) state.textContent = Math.round((e.loaded / e.total) * 100) + "%";
+          };
+          xhr.onload = function () {
+            var ok = xhr.status >= 200 && xhr.status < 300;
+            li.classList.add(ok ? "is-done" : "is-error");
+            if (state) state.textContent = ok ? "✓" : "!";
+            emit(ok ? "fanui:upload" : "fanui:uploaderror", { file: file, xhr: xhr, root: up });
+          };
+          xhr.onerror = function () {
+            li.classList.add("is-error");
+            if (state) state.textContent = "!";
+            emit("fanui:uploaderror", { file: file, xhr: xhr, root: up });
+          };
+          xhr.send(fd);
+          return li;
+        }
+
+        function handle(files) {
+          Array.prototype.slice.call(files).forEach(render);
+        }
+
+        on(drop, "click", function (e) { if (e.target !== input) input.click(); });
+        on(input, "change", function () { handle(input.files); input.value = ""; });
+        ["dragenter", "dragover"].forEach(function (t) {
+          on(drop, t, function (e) { e.preventDefault(); e.stopPropagation(); drop.classList.add("is-dragover"); });
+        });
+        ["dragleave", "drop"].forEach(function (t) {
+          on(drop, t, function (e) { e.preventDefault(); e.stopPropagation(); drop.classList.remove("is-dragover"); });
+        });
+        on(drop, "drop", function (e) {
+          if (e.dataTransfer && e.dataTransfer.files) handle(e.dataTransfer.files);
+        });
+      });
+    }
+  };
+
+  var Combobox = {
+    init: function (scope) {
+      $$("." + PREFIX + "-combobox", scope).forEach(function (cb) {
+        if (cb.__fanuiInit) return;
+        cb.__fanuiInit = true;
+        var input = $("." + PREFIX + "-combobox__input", cb);
+        var list = $("." + PREFIX + "-combobox__list", cb);
+        var hidden = $("[data-fanui-combobox-value]", cb);
+        var options = $$("." + PREFIX + "-combobox__option", cb);
+        var active = 0;
+
+        function filtered() { return options.filter(function (o) { return !o.hidden; }); }
+
+        function filter() {
+          var q = (input.value || "").trim().toLowerCase();
+          options.forEach(function (o) {
+            var text = (o.getAttribute("data-label") || o.textContent || "").toLowerCase();
+            var show = !q || text.indexOf(q) >= 0;
+            o.hidden = !show;
+            var label = $("." + PREFIX + "-combobox__label", o) || o;
+            var raw = label.getAttribute("data-fanui-raw");
+            if (raw === null) { raw = label.textContent; label.setAttribute("data-fanui-raw", raw); }
+            if (!q) { label.textContent = raw; return; }
+            var i = raw.toLowerCase().indexOf(q);
+            label.innerHTML = i < 0 ? raw :
+              raw.slice(0, i) + '<span class="' + PREFIX + '-combobox__mark">' + raw.slice(i, i + q.length) + "</span>" + raw.slice(i + q.length);
+          });
+          active = 0;
+          highlight();
+        }
+
+        function highlight() {
+          var f = filtered();
+          options.forEach(function (o) { o.classList.remove("is-active"); });
+          if (!f.length) return;
+          active = clamp(active, 0, f.length - 1);
+          f[active].classList.add("is-active");
+          if (f[active].scrollIntoView) f[active].scrollIntoView({ block: "nearest" });
+        }
+
+        function open(force) {
+          toggleClass(list, "is-open", force);
+          input.setAttribute("aria-expanded", String(list.classList.contains("is-open")));
+        }
+
+        function choose(opt) {
+          if (!opt) return;
+          var label = opt.getAttribute("data-label") || opt.textContent.trim();
+          var value = opt.getAttribute("data-value") || label;
+          input.value = label;
+          if (hidden) hidden.value = value;
+          options.forEach(function (o) { o.classList.remove("is-selected"); o.setAttribute("aria-selected", "false"); });
+          opt.classList.add("is-selected");
+          opt.setAttribute("aria-selected", "true");
+          open(false);
+          emit("fanui:combobox", { value: value, label: label, root: cb });
+        }
+
+        on(input, "focus", function () { open(true); filter(); });
+        on(input, "input", function () { open(true); filter(); });
+        on(input, "keydown", function (e) {
+          var f = filtered();
+          if (e.key === "ArrowDown") { e.preventDefault(); active++; highlight(); }
+          else if (e.key === "ArrowUp") { e.preventDefault(); active--; highlight(); }
+          else if (e.key === "Enter") { e.preventDefault(); choose(f[active]); }
+          else if (e.key === "Escape") { open(false); }
+        });
+        options.forEach(function (o) {
+          on(o, "click", function () { if (!o.classList.contains("is-disabled")) choose(o); });
+        });
+        on(doc, "click", function (e) { if (!cb.contains(e.target)) open(false); });
+
+        var selected = options.filter(function (o) { return o.classList.contains("is-selected"); })[0];
+        if (selected) choose(selected);
+        filter();
+      });
+    }
+  };
+
+  /* ==========================================================================
+   * 10. 看板 / 通知中心 / 筛选栏
+   * ======================================================================== */
+
+  var Kanban = {
+    init: function (scope) {
+      $$("." + PREFIX + "-kanban", scope).forEach(function (board) {
+        if (board.__fanuiInit) return;
+        board.__fanuiInit = true;
+        var dragged = null;
+
+        function refresh() {
+          $$("." + PREFIX + "-kanban__column", board).forEach(function (col) {
+            var count = col.querySelectorAll("." + PREFIX + "-kanban__card").length;
+            var badge = $("." + PREFIX + "-kanban__count", col);
+            if (badge) badge.textContent = count;
+          });
+        }
+
+        $$("." + PREFIX + "-kanban__card", board).forEach(function (card) {
+          card.setAttribute("draggable", "true");
+          on(card, "dragstart", function (e) {
+            dragged = card;
+            card.classList.add("is-dragging");
+            if (e.dataTransfer) { e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", ""); }
+          });
+          on(card, "dragend", function () {
+            card.classList.remove("is-dragging");
+            $$("." + PREFIX + "-kanban__column", board).forEach(function (c) { c.classList.remove("is-dragover"); });
+            $$("." + PREFIX + "-kanban__card", board).forEach(function (c) { c.classList.remove("is-drop-target"); });
+            dragged = null;
+            refresh();
+            emit("fanui:kanbanchange", { from: card.dataset.from, root: board });
+          });
+        });
+
+        $$("." + PREFIX + "-kanban__column", board).forEach(function (col) {
+          on(col, "dragover", function (e) {
+            e.preventDefault();
+            if (!dragged) return;
+            col.classList.add("is-dragover");
+            var list = $("." + PREFIX + "-kanban__list", col);
+            if (!list) return;
+            var after = null;
+            var cards = $$("." + PREFIX + "-kanban__card", list).filter(function (c) { return c !== dragged; });
+            for (var i = 0; i < cards.length; i++) {
+              var box = cards[i].getBoundingClientRect();
+              if (e.clientY < box.top + box.height / 2) { after = cards[i]; break; }
+            }
+            list.insertBefore(dragged, after);
+          });
+          on(col, "dragleave", function () { col.classList.remove("is-dragover"); });
+          on(col, "drop", function (e) {
+            e.preventDefault();
+            col.classList.remove("is-dragover");
+            if (dragged) {
+              dragged.dataset.from = col.getAttribute("data-column") || "";
+              $$("." + PREFIX + "-kanban__card", board).forEach(function (c) { c.classList.remove("is-drop-target"); });
+              dragged.classList.add("is-drop-target");
+              global.setTimeout(function () { dragged && dragged.classList.remove("is-drop-target"); }, 900);
+              refresh();
+              emit("fanui:kanbancolumnchange", { column: dragged.dataset.from, root: board });
+            }
+          });
+        });
+
+        refresh();
+      });
+    }
+  };
+
+  var Notify = {
+    init: function (scope) {
+      $$("." + PREFIX + "-notify", scope).forEach(function (n) {
+        if (n.__fanuiInit) return;
+        n.__fanuiInit = true;
+        var trigger = $("." + PREFIX + "-notify__trigger", n);
+        var panel = $("." + PREFIX + "-notify__panel", n);
+        if (!trigger || !panel) return;
+
+        on(trigger, "click", function (e) {
+          e.stopPropagation();
+          var willOpen = !panel.classList.contains("is-open");
+          $$("." + PREFIX + "-notify__panel.is-open").forEach(function (p) { p.classList.remove("is-open"); });
+          toggleClass(panel, "is-open", willOpen);
+          trigger.setAttribute("aria-expanded", String(willOpen));
+        });
+        on(panel, "click", function (e) { e.stopPropagation(); });
+        on(doc, "click", function () { panel.classList.remove("is-open"); });
+        on(doc, "keydown", function (e) { if (e.key === "Escape") panel.classList.remove("is-open"); });
+
+        $$("[data-fanui-notify-read]", n).forEach(function (btn) {
+          on(btn, "click", function () {
+            $$("." + PREFIX + "-notify__item.is-unread", n).forEach(function (i) { i.classList.remove("is-unread"); });
+            var dot = $("." + PREFIX + "-notify__dot", trigger);
+            if (dot) dot.style.display = "none";
+            emit("fanui:notifyread", { root: n });
+          });
+        });
+
+        n.__fanuiApi = {
+          open: function () { panel.classList.add("is-open"); },
+          close: function () { panel.classList.remove("is-open"); },
+          toggle: function () { toggleClass(panel, "is-open"); }
+        };
+      });
+    }
+  };
+
+  var FilterBar = {
+    init: function (scope) {
+      $$("." + PREFIX + "-filter-bar", scope).forEach(function (bar) {
+        if (bar.__fanuiInit) return;
+        bar.__fanuiInit = true;
+
+        $$("." + PREFIX + "-filter-bar__chip", bar).forEach(function (chip) {
+          on(chip, "click", function () {
+            var group = chip.getAttribute("data-group");
+            if (group) {
+              $$("." + PREFIX + "-filter-bar__chip[data-group='" + group + "']", bar).forEach(function (o) {
+                o.classList.remove("is-active");
+                o.setAttribute("aria-pressed", "false");
+              });
+            } else {
+              toggleClass(chip, "is-active");
+            }
+            chip.classList.add("is-active");
+            chip.setAttribute("aria-pressed", "true");
+            emit("fanui:filter", { value: chip.getAttribute("data-value") || chip.textContent.trim(), root: bar });
+          });
+        });
+
+        $$("." + PREFIX + "-filter-bar__views button", bar).forEach(function (btn) {
+          on(btn, "click", function () {
+            $$("." + PREFIX + "-filter-bar__views button", bar).forEach(function (o) { o.classList.remove("is-active"); });
+            btn.classList.add("is-active");
+            emit("fanui:viewchange", { view: btn.getAttribute("data-view"), root: bar });
+          });
+        });
+
+        var search = $("input", bar);
+        if (search) {
+          on(search, "input", raf(function () {
+            emit("fanui:search", { query: search.value, root: bar });
+          }));
+        }
+      });
+    }
+  };
+
+  /* ==========================================================================
+   * 11. 滚动相关：进度 / 目录高亮 / 入场动画 / 数字滚动 / 回到顶部
+   * ======================================================================== */
+
+  var Scroll = {
+    init: function () {
+      // 阅读进度
+      var progressEls = $$("[data-fanui-read-progress]");
+      var topEls = $$("[data-fanui-scroll-top]");
+
+      if (progressEls.length || topEls.length) {
+        var update = raf(function () {
+          var h = doc.documentElement;
+          var max = h.scrollHeight - h.clientHeight;
+          var ratio = max > 0 ? clamp(h.scrollTop / max, 0, 1) : 0;
+          progressEls.forEach(function (el) { el.style.setProperty("--fanui-scroll-progress", ratio.toFixed(4)); });
+          topEls.forEach(function (el) { toggleClass(el, "is-visible", h.scrollTop > num(el.dataset.threshold, 400)); });
+        });
+        on(global, "scroll", update, { passive: true });
+        on(global, "resize", update, { passive: true });
+        update();
+      }
+
+      // 导航栏滚动加深
+      var navs = $$("[data-fanui-navbar-scrolled]");
+      if (navs.length) {
+        var navUpdate = raf(function () {
+          var y = root.scrollTop || doc.body.scrollTop;
+          navs.forEach(function (n) { toggleClass(n, "is-scrolled", y > num(n.dataset.threshold, 12)); });
+        });
+        on(global, "scroll", navUpdate, { passive: true });
+        navUpdate();
+      }
+
+      $$("[data-fanui-scroll-top]").forEach(function (el) {
+        on(el, "click", function () { global.scrollTo({ top: 0, behavior: "smooth" }); });
+      });
+
+      // 目录高亮 scrollspy
+      $$("[data-fanui-scrollspy]").forEach(function (nav) {
+        var links = $$("a[href^='#']", nav);
+        if (!links.length) return;
+        var targets = links.map(function (l) {
+          var el = doc.getElementById(l.getAttribute("href").slice(1));
+          return el ? { link: l, el: el } : null;
+        }).filter(Boolean);
+
+        var spy = raf(function () {
+          var line = 140;
+          var current = targets[0];
+          targets.forEach(function (t) {
+            if (t.el.getBoundingClientRect().top <= line) current = t;
+          });
+          links.forEach(function (l) { l.classList.remove("is-active"); });
+          if (current) current.link.classList.add("is-active");
+        });
+        on(global, "scroll", spy, { passive: true });
+        spy();
+      });
+    },
+
+    /** 入场动画：为 [data-fanui-reveal] 添加 is-visible */
+    reveal: function (scope) {
+      var els = $$("[data-fanui-reveal]", scope || doc);
+      if (!els.length) return;
+      root.setAttribute("data-fanui-reveal-ready", "");
+
+      if (!("IntersectionObserver" in global)) {
+        els.forEach(function (el) { el.classList.add("is-visible"); });
+        return;
+      }
+      var io = new IntersectionObserver(function (entries) {
+        entries.forEach(function (entry) {
+          if (entry.isIntersecting) {
+            entry.target.classList.add("is-visible");
+            // 计数器可能在容器自身，也可能嵌套在 reveal 容器内部
+            if (entry.target.hasAttribute("data-fanui-count-to")) Counter.run(entry.target);
+            else $$("[data-fanui-count-to]", entry.target).forEach(function (c) { Counter.run(c); });
+            io.unobserve(entry.target);
+          }
+        });
+      }, { rootMargin: "0px 0px -10% 0px", threshold: 0.08 });
+
+      els.forEach(function (el, i) {
+        // 延迟写法：data-fanui-reveal-delay="200"（推荐）或旧写法 data-reveal-delay
+        var delay = el.getAttribute("data-fanui-reveal-delay");
+        if (delay === null) delay = el.getAttribute("data-reveal-delay");
+        if (delay !== null && delay !== "") {
+          el.style.setProperty("--fanui-reveal-delay", (parseFloat(delay) || 0) + "ms");
+        } else if (el.hasAttribute("data-fanui-reveal-stagger")) {
+          el.style.setProperty("--fanui-reveal-delay", i * 60 + "ms");
+        }
+        io.observe(el);
+      });
+    }
+  };
+
+  /** 数字滚动 */
+  var Counter = {
+    run: function (el) {
+      if (el.__fanuiCounted) return;
+      el.__fanuiCounted = true;
+      var target = num(el.getAttribute("data-fanui-count-to"), 0);
+      var duration = num(el.getAttribute("data-fanui-count-duration"), 1200);
+      var decimals = num(el.getAttribute("data-fanui-count-decimals"), 0);
+      var prefix = el.getAttribute("data-fanui-count-prefix") || "";
+      var suffix = el.getAttribute("data-fanui-count-suffix") || "";
+      var start = 0;
+      var t0 = null;
+
+      function frame(t) {
+        if (!t0) t0 = t;
+        var p = clamp((t - t0) / duration, 0, 1);
+        var eased = 1 - Math.pow(1 - p, 3);
+        var value = start + (target - start) * eased;
+        el.textContent = prefix + value.toFixed(decimals) + suffix;
+        if (p < 1) global.requestAnimationFrame(frame);
+      }
+      global.requestAnimationFrame(frame);
+    },
+    init: function (scope) {
+      $$("[data-fanui-count-to]", scope || doc).forEach(function (el) {
+        if (el.closest("[data-fanui-reveal]")) return; // 交给 reveal 触发
+        Counter.run(el);
+      });
+    }
+  };
+
+  /* ==========================================================================
+   * 12. 涟漪 / 复制 / 主题工作台
+   * ======================================================================== */
+
+  function ripple(host, event) {
+    var el = typeof host === "string" ? $(host) : host;
+    if (!el) return;
+    el.classList.add(PREFIX + "-ripple-host");
+    var rect = el.getBoundingClientRect();
+    var size = Math.max(rect.width, rect.height) * 2;
+    var span = doc.createElement("span");
+    span.className = PREFIX + "-ripple";
+    span.style.width = span.style.height = size + "px";
+    span.style.left = ((event ? event.clientX : rect.left + rect.width / 2) - rect.left) + "px";
+    span.style.top = ((event ? event.clientY : rect.top + rect.height / 2) - rect.top) + "px";
+    el.appendChild(span);
+    global.setTimeout(function () { if (span.parentNode) span.parentNode.removeChild(span); }, 640);
+  }
+
+  var Copy = {
+    init: function (scope) {
+      $$("[data-fanui-copy]", scope).forEach(function (btn) {
+        if (btn.__fanuiInit) return;
+        btn.__fanuiInit = true;
+        on(btn, "click", function () {
+          var text = btn.getAttribute("data-fanui-copy");
+          if (!text || text.charAt(0) === "#") {
+            var src = text && $(text);
+            text = src ? (src.value || src.textContent) : "";
+          }
+          var done = function () {
+            Toast.success(btn.getAttribute("data-fanui-copy-message") || "已复制");
+            emit("fanui:copy", { text: text });
+          };
+          if (global.navigator.clipboard && global.navigator.clipboard.writeText) {
+            global.navigator.clipboard.writeText(text).then(done, function () { fallback(); });
+          } else { fallback(); }
+
+          function fallback() {
+            var ta = doc.createElement("textarea");
+            ta.value = text;
+            ta.style.cssText = "position:fixed;left:-9999px";
+            doc.body.appendChild(ta);
+            ta.select();
+            try { doc.execCommand("copy"); done(); } catch (e) { /* ignore */ }
+            doc.body.removeChild(ta);
+          }
+        });
+      });
+    }
+  };
+
+  /* ==========================================================================
+   * 13. 主题工作台 Theme Studio
+   * ======================================================================== */
+
+  var Studio = {
+    _api: null,
+
+    /**
+     * 挂载主题工作台。
+     * @param {Object} [opts]
+     * @param {string} [opts.position] 'right' | 'left'
+     * @param {boolean} [opts.defaultOpen]
+     * @returns {Object} { el, open, close, toggle, destroy, refresh }
+     */
+    mount: function (opts) {
+      if (Studio._api) return Studio._api;
+      opts = opts || {};
+
+      var wrap = doc.createElement("div");
+      wrap.className = PREFIX + "-studio";
+      wrap.innerHTML =
+        '<div class="' + PREFIX + '-studio__panel" role="dialog" aria-label="主题工作台">' +
+          '<div class="' + PREFIX + '-studio__title">' +
+            "<span>主题工作台</span>" +
+            '<button type="button" class="' + PREFIX + '-btn ' + PREFIX + '-btn--ghost ' + PREFIX + '-btn--xs" data-studio-close aria-label="关闭">✕</button>' +
+          "</div>" +
+
+          '<div class="' + PREFIX + '-studio__section">' +
+            '<div class="' + PREFIX + '-studio__label">主题色 <span class="' + PREFIX + '-studio__value" data-studio-accent-name>青 Cyan</span></div>' +
+            '<div class="' + PREFIX + '-studio__accents" data-studio-accents></div>' +
+            '<div class="' + PREFIX + '-studio__hint" data-studio-vibe></div>' +
+          "</div>" +
+
+          '<div class="' + PREFIX + '-studio__section">' +
+            '<div class="' + PREFIX + '-studio__label">深浅模式</div>' +
+            '<div class="' + PREFIX + '-segmented ' + PREFIX + '-segmented--block" role="group" data-studio-mode>' +
+              '<button type="button" class="' + PREFIX + '-segmented__item" data-mode="light">浅色</button>' +
+              '<button type="button" class="' + PREFIX + '-segmented__item" data-mode="dark">深色</button>' +
+              '<button type="button" class="' + PREFIX + '-segmented__item" data-mode="auto">跟随系统</button>' +
+            "</div>" +
+          "</div>" +
+
+          '<div class="' + PREFIX + '-studio__section">' +
+            '<div class="' + PREFIX + '-studio__label">液态玻璃 ' +
+              '<label class="' + PREFIX + '-switch ' + PREFIX + '-switch--sm">' +
+                '<input type="checkbox" data-studio-glass>' +
+                '<span class="' + PREFIX + '-switch__track"><span class="' + PREFIX + '-switch__thumb"></span></span>' +
+              "</label>" +
+            "</div>" +
+            '<div class="' + PREFIX + '-studio__row">' +
+              '<input type="range" class="' + PREFIX + '-slider ' + PREFIX + '-slider--sm" min="0" max="2" step="0.05" data-studio-intensity>' +
+              '<span class="' + PREFIX + '-studio__value" data-studio-intensity-value>1.00×</span>' +
+            "</div>" +
+            '<div class="' + PREFIX + '-studio__row" style="margin-top:8px" data-studio-presets></div>' +
+            '<div class="' + PREFIX + '-studio__hint">液态强度统一驱动模糊、透明度、描边、高光与阴影；关闭后所有玻璃退回实体表面。</div>' +
+          "</div>" +
+
+          '<div class="' + PREFIX + '-studio__section">' +
+            '<div class="' + PREFIX + '-studio__label">当前令牌</div>' +
+            '<div class="' + PREFIX + '-studio__hint" data-studio-tokens></div>' +
+          "</div>" +
+
+          '<div class="' + PREFIX + '-studio__section">' +
+            '<div class="' + PREFIX + '-studio__row">' +
+              '<button type="button" class="' + PREFIX + '-btn ' + PREFIX + '-btn--neutral ' + PREFIX + '-btn--sm" data-studio-reset>恢复默认</button>' +
+              '<button type="button" class="' + PREFIX + '-btn ' + PREFIX + '-btn--ghost ' + PREFIX + '-btn--sm" data-studio-close>收起</button>' +
+            "</div>" +
+            '<div class="' + PREFIX + '-studio__hint">快捷键：<span class="' + PREFIX + '-studio__kbd">Alt</span> + <span class="' + PREFIX + '-studio__kbd">T</span> 开合面板 · <span class="' + PREFIX + '-studio__kbd">Alt</span> + <span class="' + PREFIX + '-studio__kbd">D</span> 切换深浅</div>' +
+          "</div>" +
+        "</div>" +
+        '<button type="button" class="' + PREFIX + '-studio__trigger" aria-expanded="false">' +
+          '<span class="' + PREFIX + '-studio__trigger-dot"></span>' +
+          "<span>主题</span>" +
+        "</button>";
+
+      doc.body.appendChild(wrap);
+
+      var panel = $("." + PREFIX + "-studio__panel", wrap);
+      var trigger = $("." + PREFIX + "-studio__trigger", wrap);
+      var accentsWrap = $("[data-studio-accents]", wrap);
+      var modeWrap = $("[data-studio-mode]", wrap);
+      var glassInput = $("[data-studio-glass]", wrap);
+      var intensityInput = $("[data-studio-intensity]", wrap);
+      var intensityValue = $("[data-studio-intensity-value]", wrap);
+      var presetsWrap = $("[data-studio-presets]", wrap);
+      var tokensOut = $("[data-studio-tokens]", wrap);
+      var accentName = $("[data-studio-accent-name]", wrap);
+      var vibeOut = $("[data-studio-vibe]", wrap);
+
+      /* ---- 12 主题色网格 ---- */
+      function buildAccents() {
+        accentsWrap.innerHTML = "";
+        Theme.accents.forEach(function (a) {
+          var colors = Theme.readAccentColors(a.key, "light");
+          var btn = doc.createElement("button");
+          btn.type = "button";
+          btn.className = PREFIX + "-studio__accent";
+          btn.setAttribute("data-accent", a.key);
+          btn.setAttribute("title", a.label + " " + a.en + " · " + a.vibe);
+          btn.setAttribute("aria-label", a.label);
+          btn.style.setProperty("--fanui-studio-c1", colors.vivid || "#94a3b8");
+          btn.style.setProperty("--fanui-studio-c2", colors.primary || "#64748b");
+          on(btn, "click", function () { Theme.setAccent(a.key); refresh(); });
+          accentsWrap.appendChild(btn);
+        });
+      }
+
+      /* ---- 厚度预设 ---- */
+      function buildPresets() {
+        presetsWrap.innerHTML = "";
+        Object.keys(Theme.glassPresets).forEach(function (key) {
+          var p = Theme.glassPresets[key];
+          var b = doc.createElement("button");
+          b.type = "button";
+          b.className = PREFIX + "-filter-bar__chip";
+          b.setAttribute("data-preset", key);
+          b.textContent = p.label;
+          on(b, "click", function () { Theme.setGlassPreset(key); refresh(); });
+          presetsWrap.appendChild(b);
+        });
+      }
+
+      /* ---- 刷新 UI 状态 ---- */
+      function refresh() {
+        var snap = Theme.snapshot();
+
+        $$("[data-accent]", wrap).forEach(function (b) {
+          b.setAttribute("aria-pressed", String(b.getAttribute("data-accent") === snap.accent));
+        });
+        var meta = Theme.accents.filter(function (a) { return a.key === snap.accent; })[0];
+        if (accentName) accentName.textContent = meta ? meta.label + " " + meta.en : snap.accent;
+        if (vibeOut) vibeOut.textContent = meta ? "适配场景：" + meta.vibe : "";
+
+        $$("[data-mode]", modeWrap).forEach(function (b) {
+          var active = b.getAttribute("data-mode") === snap.mode;
+          toggleClass(b, "is-active", active);
+          b.setAttribute("aria-pressed", String(active));
+        });
+
+        if (glassInput) glassInput.checked = snap.glass;
+        var glassSwitch = glassInput && glassInput.closest("." + PREFIX + "-switch");
+        if (glassSwitch) toggleClass(glassSwitch, "is-checked", snap.glass);
+
+        if (intensityInput) intensityInput.value = String(snap.glassIntensity);
+        if (intensityValue) intensityValue.textContent = snap.glassIntensity.toFixed(2) + "×";
+        if (intensityInput) {
+          var pct = (snap.glassIntensity / 2) * 100;
+          intensityInput.style.setProperty("--fanui-slider-fill", pct.toFixed(1) + "%");
+        }
+        $$("[data-preset]", wrap).forEach(function (b) {
+          toggleClass(b, "is-active", b.getAttribute("data-preset") === snap.glassPreset);
+        });
+
+        if (tokensOut) {
+          var c = Theme.readAccentColors();
+          tokensOut.innerHTML =
+            "实心色 <code>" + (c.primary || "-") + "</code> · 前置色 <code>" + (c.primaryFg || "-") + "</code><br>" +
+            "鲜亮色 <code>" + (c.vivid || "-") + "</code> · 模式 <code>" + snap.effectiveMode + "</code>";
+        }
+
+        themeAccentRefresh();
+      }
+
+      var themeAccentRefresh = function () {
+        if (trigger) {
+          var c = Theme.readAccentColors();
+          var dot = $("." + PREFIX + "-studio__trigger-dot", wrap);
+          if (dot && c.vivid) dot.style.background = "linear-gradient(135deg," + c.vivid + "," + (c.primary || c.vivid) + ")";
+        }
+      };
+
+      /* ---- 事件绑定 ---- */
+      on(trigger, "click", function () { api.toggle(); });
+      $$("[data-studio-close]", wrap).forEach(function (b) { on(b, "click", function () { api.close(); }); });
+      $$("[data-mode]", modeWrap).forEach(function (b) {
+        on(b, "click", function () { Theme.setMode(b.getAttribute("data-mode")); refresh(); });
+      });
+      on(glassInput, "change", function () { Theme.setGlass(glassInput.checked); refresh(); });
+      on(intensityInput, "input", function () { Theme.setGlassIntensity(intensityInput.value); refresh(); });
+      $("[data-studio-reset]", wrap) && on($("[data-studio-reset]", wrap), "click", function () {
+        Theme.reset();
+        Theme._customAccents = [];
+        buildAccents();
+        refresh();
+        Toast.info("已恢复默认主题");
+      });
+
+      // 全局快捷键：Alt+T 开合面板，Alt+D 切深浅
+      on(doc, "keydown", function (e) {
+        if (!e.altKey) return;
+        var k = (e.key || "").toLowerCase();
+        if (k === "t") { e.preventDefault(); api.toggle(); }
+        else if (k === "d") { e.preventDefault(); Theme.toggleMode(); refresh(); }
+      });
+
+      // 其他来源改了主题也要同步 UI
+      ["fanui:accentchange", "fanui:themechange", "fanui:glasschange"].forEach(function (ev) {
+        on(doc, ev, function () { refresh(); });
+      });
+
+      var api = {
+        el: wrap,
+        isOpen: function () { return wrap.classList.contains("is-open"); },
+        open: function () {
+          wrap.classList.add("is-open");
+          trigger.setAttribute("aria-expanded", "true");
+          return api;
+        },
+        close: function () {
+          wrap.classList.remove("is-open");
+          trigger.setAttribute("aria-expanded", "false");
+          return api;
+        },
+        toggle: function () { return api.isOpen() ? api.close() : api.open(); },
+        refresh: refresh,
+        destroy: function () {
+          wrap.parentNode && wrap.parentNode.removeChild(wrap);
+          Studio._api = null;
+        }
+      };
+
+      buildAccents();
+      buildPresets();
+      refresh();
+      if (opts.defaultOpen) api.open();
+
+      Studio._api = api;
+      return api;
+    },
+
+    api: function () { return Studio._api; }
+  };
+
+  /* ==========================================================================
+   * 13.5 进阶组件：loading-bar / date / time / color / cascader / tree / transfer
+   *      + i18n 词表 + Intl 格式化层
+   * ======================================================================== */
+
+  /* ---- 13.5.0 i18n 词表（D2）：组件内置文案可本地化 ---- */
+  var I18N = {
+    locale: "zh-CN",
+    dicts: {
+      "zh-CN": {
+        today: "今天", clear: "清除", confirm: "确定", back: "返回",
+        empty: "无匹配结果", noData: "暂无数据", all: "全部",
+        selectedCount: "已选 {n} 项", placeholder: "请选择", search: "搜索…",
+        weeks: ["一", "二", "三", "四", "五", "六", "日"],
+        quick: ["今天", "近 7 天", "近 30 天"]
+      },
+      "en": {
+        today: "Today", clear: "Clear", confirm: "OK", back: "Back",
+        empty: "No results", noData: "No data", all: "All",
+        selectedCount: "{n} selected", placeholder: "Select…", search: "Search…",
+        weeks: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
+        quick: ["Today", "Last 7d", "Last 30d"]
+      }
+    },
+    t: function (key, vars) {
+      var d = I18N.dicts[I18N.locale] || I18N.dicts["zh-CN"];
+      var s = d[key] !== undefined ? d[key] : (I18N.dicts["zh-CN"][key] !== undefined ? I18N.dicts["zh-CN"][key] : key);
+      if (vars) Object.keys(vars).forEach(function (k) { s = s.replace("{" + k + "}", vars[k]); });
+      return s;
+    },
+    setLocale: function (locale) {
+      if (!I18N.dicts[locale]) return I18N;
+      I18N.locale = locale;
+      emit("fanui:localechange", { locale: locale });
+      return I18N;
+    },
+    register: function (locale, dict) {
+      I18N.dicts[locale] = dict;
+      return I18N;
+    }
+  };
+
+  /* ---- 13.5.0b locale 感知格式化层（D3）：统一走 Intl ---- */
+  var Format = {
+    date: function (value, opts) {
+      var d = value instanceof Date ? value : new Date(value);
+      if (isNaN(d.getTime())) return "";
+      try { return new Intl.DateTimeFormat(I18N.locale, opts || { year: "numeric", month: "2-digit", day: "2-digit" }).format(d); }
+      catch (e) { return d.toISOString().slice(0, 10); }
+    },
+    time: function (value, opts) {
+      var d = value instanceof Date ? value : new Date(value);
+      if (isNaN(d.getTime())) return "";
+      try { return new Intl.DateTimeFormat(I18N.locale, opts || { hour: "2-digit", minute: "2-digit" }).format(d); }
+      catch (e) { return d.toTimeString().slice(0, 5); }
+    },
+    number: function (value, opts) {
+      try { return new Intl.NumberFormat(I18N.locale, opts).format(value); }
+      catch (e) { return String(value); }
+    },
+    currency: function (value, currency) {
+      try { return new Intl.NumberFormat(I18N.locale, { style: "currency", currency: currency || "CNY" }).format(value); }
+      catch (e) { return "¥" + value; }
+    }
+  };
+
+  /* ---- 13.5.0c 浮层定位 / 关闭（各选择器共用） ---- */
+  var activePanel = null;
+  function closeActivePanel() {
+    if (activePanel) { activePanel.classList.remove("is-open"); activePanel = null; }
+  }
+  function panelSelectorHit(target) {
+    return target.closest && target.closest(
+      ".fanui-datepanel,.fanui-timepanel,.fanui-colorpanel,.fanui-cascader__panel," +
+      "[data-fanui-datepicker],[data-fanui-timepicker],[data-fanui-colorpicker],[data-fanui-cascader]"
+    );
+  }
+  on(doc, "click", function (e) {
+    // 面板内部点击重绘后，原按钮节点已脱离 DOM，closest 判定会失配；
+    // 面板级处理器统一在事件上打 __fanuiPanelHit 标记，doc 层据此豁免。
+    if (e.__fanuiPanelHit) return;
+    if (activePanel && !panelSelectorHit(e.target)) closeActivePanel();
+  });
+  on(doc, "keydown", function (e) { if (e.key === "Escape") closeActivePanel(); });
+
+  function openPanel(panel, anchor) {
+    if (panel.parentNode !== doc.body) doc.body.appendChild(panel);
+    panel.classList.add("is-open");
+    var r = anchor.getBoundingClientRect();
+    var scrollY = global.pageYOffset || doc.documentElement.scrollTop;
+    var scrollX = global.pageXOffset || doc.documentElement.scrollLeft;
+    panel.style.top = (scrollY + r.bottom + 6) + "px";
+    var left = scrollX + r.left;
+    var w = panel.offsetWidth;
+    var vw = doc.documentElement.clientWidth;
+    if (left + w > scrollX + vw - 8) left = scrollX + vw - 8 - w;
+    panel.style.left = Math.max(scrollX + 8, left) + "px";
+    activePanel = panel;
+  }
+
+  /** 读取组件数据：优先元素自身内的 <script type="application/json">，其次相邻容器 */
+  function readJSONData(el) {
+    var s = el.querySelector('script[type="application/json"]');
+    if (!s) {
+      var host = el.closest(".fanui-form-item, .fanui-field, li, div, section") || el.parentElement;
+      if (host) s = host.querySelector('script[type="application/json"]');
+    }
+    if (!s) return null;
+    try { return JSON.parse(s.textContent); } catch (e) { return null; }
+  }
+
+  function iso(d) {
+    return d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0") + "-" + String(d.getDate()).padStart(2, "0");
+  }
+
+  /* ---- 13.5.1 顶部加载条（A3）---- */
+  var LoadingBar = (function () {
+    var el = null, timer = null, progress = 0, loading = false;
+    function ensure() {
+      if (!el) {
+        el = doc.createElement("div");
+        el.className = "fanui-loading-bar";
+        el.setAttribute("role", "progressbar");
+        el.setAttribute("aria-label", "页面加载进度");
+        el.innerHTML = '<div class="fanui-loading-bar__inner"></div>';
+        doc.body.appendChild(el);
+      }
+      return el;
+    }
+    function set(p) {
+      progress = clamp(p, 0, 100);
+      ensure().style.setProperty("--fanui-loading-progress", progress + "%");
+      ensure().setAttribute("aria-valuenow", Math.round(progress));
+    }
+    var api = {
+      start: function () {
+        ensure();
+        loading = true;
+        el.classList.add("is-loading");
+        el.classList.remove("fanui-loading-bar--indeterminate");
+        set(Math.max(progress, 8));
+        clearTimeout(timer);
+        timer = setTimeout(function tick() {
+          if (!loading) return;
+          set(Math.min(progress + Math.max(0.5, (100 - progress) * 0.08), 92));
+          timer = setTimeout(tick, 280);
+        }, 220);
+        return api;
+      },
+      set: function (p) {
+        ensure();
+        el.classList.remove("fanui-loading-bar--indeterminate");
+        loading = true;
+        el.classList.add("is-loading");
+        set(p);
+        return api;
+      },
+      indeterminate: function () {
+        ensure();
+        loading = true;
+        el.classList.add("is-loading", "fanui-loading-bar--indeterminate");
+        return api;
+      },
+      done: function () {
+        if (!el) return api;
+        el.classList.remove("fanui-loading-bar--indeterminate");
+        set(100);
+        loading = false;
+        clearTimeout(timer);
+        setTimeout(function () {
+          el.classList.remove("is-loading");
+          setTimeout(function () { set(0); }, 260);
+        }, 180);
+        return api;
+      },
+      isLoading: function () { return loading; }
+    };
+    return api;
+  })();
+
+  /* ---- 13.5.2 日期选择器（A1）----
+   * 用法：<input class="fanui-form-control" data-fanui-datepicker>
+   * 区间：<input ... data-fanui-datepicker data-fanui-datepicker-range>
+   * JS：  FanUI.datePicker(el) / attach(el, opts)
+   */
+  var DatePicker = {
+    _idx: 0,
+    attach: function (target, opts) {
+      var el = typeof target === "string" ? $(target) : target;
+      if (!el || el.__fanuiDatepicker) return el ? el.__fanuiDatepicker : null;
+      opts = opts || {};
+
+      var state = {
+        y: new Date().getFullYear(),
+        m: new Date().getMonth(),
+        sel: null, selEnd: null,           // 区间模式两个端点
+        hover: null
+      };
+      var range = opts.range !== undefined ? opts.range : el.hasAttribute("data-fanui-datepicker-range");
+
+      var panel = doc.createElement("div");
+      panel.className = "fanui-datepanel";
+      panel.setAttribute("role", "dialog");
+      panel.setAttribute("aria-label", "选择日期");
+      doc.body.appendChild(panel);
+      var id = "fanui-dp-" + (++DatePicker._idx);
+
+      function fmt() {
+        if (!state.sel) return "";
+        if (!range || !state.selEnd) return iso(state.sel);
+        return iso(state.sel) + " ~ " + iso(state.selEnd);
+      }
+      function commit(silent) {
+        el.value = fmt();
+        el.dispatchEvent(new CustomEvent("fanui:datechange", { bubbles: true, detail: { value: el.value, start: state.sel, end: state.selEnd } }));
+        if (!silent) closeActivePanel();
+      }
+
+      function render() {
+        var first = new Date(state.y, state.m, 1);
+        // 周一为一周起点（与 i18n weeks 对齐）
+        var shift = (first.getDay() + 6) % 7;
+        var start = new Date(state.y, state.m, 1 - shift);
+        var today = new Date(); today.setHours(0, 0, 0, 0);
+
+        var html = '<div class="fanui-datepanel__head">' +
+          '<button type="button" class="fanui-datepanel__nav" data-nav="-1" aria-label="上一月">‹</button>' +
+          '<span class="fanui-datepanel__title">' + state.y + ' 年 ' + (state.m + 1) + ' 月</span>' +
+          '<button type="button" class="fanui-datepanel__nav" data-nav="1" aria-label="下一月">›</button>' +
+          '</div><div class="fanui-datepanel__week">' +
+          I18N.t("weeks").map(function (w) { return "<span>" + w + "</span>"; }).join("") +
+          '</div><div class="fanui-datepanel__grid">';
+
+        var cur = new Date(start);
+        for (var i = 0; i < 42; i++) {
+          var cls = ["fanui-datepanel__day"];
+          if (cur.getMonth() !== state.m) cls.push("is-other");
+          if (cur.getTime() === today.getTime()) cls.push("is-today");
+          var t = cur.getTime();
+          if (state.sel) {
+            var s0 = state.sel.getTime(), s1 = (state.selEnd || state.hover || state.sel).getTime();
+            if (t === Math.min(s0, s1) || (range && state.selEnd && t === Math.max(s0, s1))) cls.push("is-selected");
+            if (range && state.selEnd && t > Math.min(s0, s1) && t < Math.max(s0, s1)) cls.push("is-in-range");
+          }
+          html += '<button type="button" class="' + cls.join(" ") + '" data-day="' + iso(cur) + '">' + cur.getDate() + "</button>";
+          cur.setDate(cur.getDate() + 1);
+        }
+        html += '</div><div class="fanui-datepanel__quick">' +
+          I18N.t("quick").map(function (q, i) { return '<button type="button" data-quick="' + i + '">' + q + "</button>"; }).join("") +
+          '<span style="flex:1 1 auto"></span>' +
+          '<button type="button" data-clear>' + I18N.t("clear") + "</button></div>";
+        panel.innerHTML = html;
+      }
+
+      function applyQuick(idx) {
+        var today = new Date(); today.setHours(0, 0, 0, 0);
+        var d0 = new Date(today), d1 = new Date(today);
+        if (idx === 0) { }
+        else if (idx === 1) d0.setDate(d0.getDate() - 6);
+        else d0.setDate(d0.getDate() - 29);
+        if (!range) { state.sel = today; state.selEnd = null; }
+        else { state.sel = d0; state.selEnd = d1; }
+        state.y = today.getFullYear(); state.m = today.getMonth();
+        render(); commit();
+      }
+
+      on(panel, "click", function (e) {
+        e.__fanuiPanelHit = true;
+        var nav = e.target.closest("[data-nav]");
+        if (nav) { state.m += Number(nav.getAttribute("data-nav")); if (state.m < 0) { state.m = 11; state.y--; } if (state.m > 11) { state.m = 0; state.y++; } render(); return; }
+        var day = e.target.closest("[data-day]");
+        if (day) {
+          var parts = day.getAttribute("data-day").split("-");
+          var d = new Date(Number(parts[0]), Number(parts[1]) - 1, Number(parts[2]));
+          if (range) {
+            if (!state.sel || (state.sel && state.selEnd)) { state.sel = d; state.selEnd = null; }
+            else if (d.getTime() < state.sel.getTime()) { state.selEnd = state.sel; state.sel = d; }
+            else state.selEnd = d;
+          } else state.sel = d;
+          render(); commit();
+          return;
+        }
+        var quick = e.target.closest("[data-quick]");
+        if (quick) { applyQuick(Number(quick.getAttribute("data-quick"))); return; }
+        if (e.target.closest("[data-clear]")) { state.sel = state.selEnd = null; render(); commit(); }
+      });
+      on(panel, "mouseover", function (e) {
+        if (!range || !state.sel || state.selEnd) return;
+        var day = e.target.closest("[data-day]");
+        if (day) {
+          var p = day.getAttribute("data-day").split("-");
+          state.hover = new Date(Number(p[0]), Number(p[1]) - 1, Number(p[2]));
+          render();
+        }
+      });
+
+      el.__fanuiDatepicker = {
+        el: el, panel: panel,
+        open: function () { render(); openPanel(panel, el); },
+        close: closeActivePanel,
+        value: function () { return el.value; },
+        setValue: function (v) {
+          if (!v) { state.sel = state.selEnd = null; }
+          else if (range && v.indexOf("~") > -1) {
+            var pp = v.split("~");
+            state.sel = new Date(pp[0].trim()); state.selEnd = new Date(pp[1].trim());
+          } else state.sel = new Date(v);
+          if (state.sel && !isNaN(state.sel.getTime())) { state.y = state.sel.getFullYear(); state.m = state.sel.getMonth(); }
+          render(); commit(true);
+        },
+        destroy: function () { panel.parentNode && panel.parentNode.removeChild(panel); delete el.__fanuiDatepicker; }
+      };
+      on(el, "click", function () { el.__fanuiDatepicker.open(); });
+      return el.__fanuiDatepicker;
+    },
+    init: function (scope) { $$("[data-fanui-datepicker]", scope).forEach(function (el) { DatePicker.attach(el); }); }
+  };
+
+  /* ---- 13.5.3 时间选择器（A2）----
+   * 用法：<input class="fanui-form-control" data-fanui-timepicker data-fanui-timepicker-step="30">
+   */
+  var TimePicker = {
+    attach: function (target, opts) {
+      var el = typeof target === "string" ? $(target) : target;
+      if (!el || el.__fanuiTimepicker) return el ? el.__fanuiTimepicker : null;
+      opts = opts || {};
+      var step = opts.step || num(el.getAttribute("data-fanui-timepicker-step"), 30);
+
+      var panel = doc.createElement("div");
+      panel.className = "fanui-timepanel";
+      panel.setAttribute("role", "listbox");
+      panel.setAttribute("aria-label", "选择时间");
+      doc.body.appendChild(panel);
+
+      function options() {
+        var out = [];
+        for (var h = 0; h < 24; h++) {
+          for (var m = 0; m < 60; m += step) {
+            out.push(String(h).padStart(2, "0") + ":" + String(m).padStart(2, "0"));
+          }
+        }
+        return out;
+      }
+      function render() {
+        var cur = el.value;
+        var html = options().map(function (t) {
+          return '<button type="button" class="fanui-timepanel__opt' + (t === cur ? " is-selected" : "") + '" data-time="' + t + '">' + t + "</button>";
+        }).join("");
+        panel.innerHTML = html || '<div class="fanui-timepanel__empty">' + I18N.t("noData") + "</div>";
+        var sel = panel.querySelector(".is-selected");
+        if (sel) sel.scrollIntoView({ block: "center" });
+      }
+      on(panel, "click", function (e) {
+        e.__fanuiPanelHit = true;
+        var opt = e.target.closest("[data-time]");
+        if (!opt) return;
+        el.value = opt.getAttribute("data-time");
+        el.dispatchEvent(new CustomEvent("fanui:timechange", { bubbles: true, detail: { value: el.value } }));
+        render();
+        closeActivePanel();
+      });
+      el.__fanuiTimepicker = {
+        el: el, panel: panel,
+        open: function () { render(); openPanel(panel, el); },
+        close: closeActivePanel,
+        value: function () { return el.value; },
+        setValue: function (v) { el.value = v; }
+      };
+      on(el, "click", function () { el.__fanuiTimepicker.open(); });
+      return el.__fanuiTimepicker;
+    },
+    init: function (scope) { $$("[data-fanui-timepicker]", scope).forEach(function (el) { TimePicker.attach(el); }); }
+  };
+
+  /* ---- 13.5.4 颜色选择器（A4）----
+   * 用法：<input class="fanui-form-control" data-fanui-colorpicker value="#0e7490">
+   * 色板即 12 套内置主题色 + 中性阶；也可一键把所选颜色生成为合规主题（接 createAccent）。
+   */
+  var ColorPicker = {
+    PRESETS: ["#0e7490", "#0ea5e9", "#2563eb", "#4f46e5", "#7c3aed", "#9333ea", "#db2777", "#e11d48",
+              "#dc2626", "#ea580c", "#d97706", "#059669", "#0d9488", "#475569", "#1e293b", "#000000"],
+    attach: function (target, opts) {
+      var el = typeof target === "string" ? $(target) : target;
+      if (!el || el.__fanuiColorpicker) return el ? el.__fanuiColorpicker : null;
+      opts = opts || {};
+      var hsl = { h: 190, s: 0.78, l: 0.42 };
+      var recent = [];
+      try { recent = JSON.parse(localStorage.getItem("fanui-color-recent") || "[]"); } catch (e) { recent = []; }
+
+      var panel = doc.createElement("div");
+      panel.className = "fanui-colorpanel";
+      panel.setAttribute("role", "dialog");
+      panel.setAttribute("aria-label", "选择颜色");
+      doc.body.appendChild(panel);
+
+      function current() {
+        var c = hsl2rgb(hsl);
+        return rgb2hex(c);
+      }
+      function saveRecent(hex) {
+        recent = [hex].concat(recent.filter(function (x) { return x !== hex; })).slice(0, 8);
+        try { localStorage.setItem("fanui-color-recent", JSON.stringify(recent)); } catch (e) { /* 隐私模式 */ }
+      }
+      function render() {
+        var hex = current().toUpperCase();
+        var fg = bestFg(hsl2rgb(hsl));
+        panel.innerHTML =
+          '<div class="fanui-colorpanel__preview">' +
+            '<span class="fanui-colorpanel__swatch" style="background-color:' + hex + ';color:' + (fg > 0.5 ? "#000" : "#fff") + '"></span>' +
+            '<input class="fanui-colorpanel__value" type="text" value="' + hex + '" aria-label="颜色值" spellcheck="false">' +
+          "</div>" +
+          '<div class="fanui-colorpanel__row"><label for="fanui-cp-h">色相</label>' +
+            '<input id="fanui-cp-h" class="fanui-colorpanel__slider" type="range" min="0" max="360" value="' + Math.round(hsl.h) + '" data-h="1" style="accent-color:hsl(' + Math.round(hsl.h) + ',80%,50%)"></div>' +
+          '<div class="fanui-colorpanel__row"><label for="fanui-cp-l">明度</label>' +
+            '<input id="fanui-cp-l" class="fanui-colorpanel__slider" type="range" min="10" max="90" value="' + Math.round(hsl.l * 100) + '" data-l="1"></div>' +
+          '<div class="fanui-colorpanel__palette">' +
+            ColorPicker.PRESETS.map(function (p) {
+              return '<button type="button" data-preset="' + p + '" style="background-color:' + p + '" aria-label="' + p + '"' + (p.toLowerCase() === hex.toLowerCase() ? ' class="is-selected"' : "") + "></button>";
+            }).join("") +
+          "</div>" +
+          '<div class="fanui-colorpanel__actions">' +
+            '<button type="button" class="fanui-btn fanui-btn--ghost fanui-btn--xs" data-as-theme>设为主题色</button>' +
+            '<button type="button" class="fanui-btn fanui-btn--primary fanui-btn--xs" data-pick>' + I18N.t("confirm") + "</button>" +
+          "</div>";
+      }
+      function commit(silent) {
+        var hex = current();
+        el.value = hex;
+        el.dispatchEvent(new CustomEvent("fanui:colorchange", { bubbles: true, detail: { value: hex } }));
+        if (!silent) { saveRecent(hex); closeActivePanel(); }
+      }
+      on(panel, "input", function (e) {
+        var t = e.target;
+        if (t.hasAttribute("data-h")) { hsl.h = Number(t.value); render(); commit(true); }
+        else if (t.hasAttribute("data-l")) { hsl.l = Number(t.value) / 100; render(); commit(true); }
+        else if (t.classList.contains("fanui-colorpanel__value")) {
+          // 逐字符输入时解析失败是常态，用宽容版避免刷异常
+          var rgb = tryHex2rgb(t.value.trim());
+          if (rgb) { hsl = rgb2hsl(rgb); }
+        }
+      });
+      on(panel, "change", function (e) {
+        if (e.target.classList.contains("fanui-colorpanel__value")) { render(); commit(true); }
+      });
+      on(panel, "click", function (e) {
+        e.__fanuiPanelHit = true;
+        var p = e.target.closest("[data-preset]");
+        if (p) { var prgb = tryHex2rgb(p.getAttribute("data-preset")); if (prgb) { hsl = rgb2hsl(prgb); render(); commit(); } return; }
+        if (e.target.closest("[data-as-theme]")) {
+          if (opts.asTheme !== false && global.FanUI && FanUI.theme && FanUI.theme.createAccent) {
+            try { FanUI.theme.createAccent(current()); } catch (err) { /* 非法颜色已在 input 层拦截 */ }
+          }
+          commit();
+          return;
+        }
+        if (e.target.closest("[data-pick]")) commit();
+      });
+      el.__fanuiColorpicker = {
+        el: el, panel: panel,
+        open: function () { render(); openPanel(panel, el); },
+        close: closeActivePanel,
+        value: function () { return el.value; },
+        setValue: function (v) {
+          var rgb = tryHex2rgb(v);
+          if (rgb) { hsl = rgb2hsl(rgb); el.value = rgb2hex(rgb); render(); }
+          return el.value;
+        }
+      };
+      on(el, "click", function () { el.__fanuiColorpicker.open(); });
+      return el.__fanuiColorpicker;
+    },
+    init: function (scope) { $$("[data-fanui-colorpicker]", scope).forEach(function (el) { ColorPicker.attach(el); }); }
+  };
+
+  /* ---- 13.5.5 级联选择器（A5）----
+   * 结构：<div data-fanui-cascader><button class="fanui-cascader__trigger">…</button>
+   *        <script type="application/json">[{label,value,children}]</script></div>
+   */
+  var Cascader = {
+    attach: function (target, opts) {
+      var el = typeof target === "string" ? $(target) : target;
+      if (!el || el.__fanuiCascader) return el ? el.__fanuiCascader : null;
+      opts = opts || {};
+      var items = opts.items || readJSONData(el) || [];
+      var path = [];          // 每层选中的 item
+      var expandPath = [];    // 面板里展开到的层级
+      var searchable = opts.searchable !== false;
+
+      var trigger = el.querySelector(".fanui-cascader__trigger") || (function () {
+        var b = doc.createElement("button");
+        b.type = "button";
+        b.className = "fanui-cascader__trigger";
+        b.innerHTML = '<span class="fanui-cascader__placeholder">' + I18N.t("placeholder") + '</span><span class="fanui-cascader__caret">▼</span>';
+        el.insertBefore(b, el.firstChild);
+        return b;
+      })();
+
+      var panel = doc.createElement("div");
+      panel.className = "fanui-cascader__panel";
+      doc.body.appendChild(panel);
+
+      function labels() { return path.map(function (n) { return n.label; }); }
+      function value() { return path.map(function (n) { return n.value !== undefined ? n.value : n.label; }); }
+      function syncTrigger() {
+        if (!path.length) {
+          trigger.innerHTML = '<span class="fanui-cascader__placeholder">' + I18N.t("placeholder") + '</span><span class="fanui-cascader__caret">▼</span>';
+        } else {
+          trigger.innerHTML = "<span><b>" + labels().join(" / ") + "</b></span><span class=\"fanui-cascader__caret\">▼</span>";
+          trigger.classList.add("is-active");
+        }
+      }
+      function commit() {
+        syncTrigger();
+        el.dispatchEvent(new CustomEvent("fanui:cascaderchange", { bubbles: true, detail: { labels: labels(), value: value(), path: path.slice() } }));
+      }
+      function colHTML(list, depth) {
+        return '<div class="fanui-cascader__col">' + list.map(function (n) {
+          var active = expandPath[depth] === n || path[depth] === n;
+          return '<button type="button" class="fanui-cascader__opt' + (active ? " is-active" : "") + '" data-depth="' + depth + '" data-idx="' + list.indexOf(n) + '">' +
+            "<span>" + n.label + "</span>" +
+            (n.children && n.children.length ? '<span class="fanui-cascader__arrow">›</span>' : "") +
+            "</button>";
+        }).join("") + "</div>";
+      }
+      function render() {
+        // 只重绘内部容器：整体替换 panel.innerHTML 会让被点击的按钮脱离面板，
+        // 事件冒泡到 doc 时 closest 失配，误触发全局关闭逻辑。
+        var inner = panel.querySelector(".fanui-cascader__inner");
+        if (!inner) { panel.innerHTML = '<div class="fanui-cascader__inner"></div>'; inner = panel.firstChild; }
+        var hadSearchFocus = document.activeElement && document.activeElement.classList.contains("fanui-cascader__search");
+        var kw = (panel.querySelector(".fanui-cascader__search") || {}).value || "";
+        var html = searchable ? '<input class="fanui-cascader__search" type="text" placeholder="' + I18N.t("search") + '" aria-label="搜索选项">' : "";
+        if (kw.trim()) {
+          // 搜索模式：平铺所有含关键字的路径
+          var hits = [];
+          (function walk(list, prefix) {
+            list.forEach(function (n) {
+              var p = prefix.concat([n]);
+              if (n.label.toLowerCase().indexOf(kw.trim().toLowerCase()) > -1) hits.push(p);
+              if (n.children) walk(n.children, p);
+            });
+          })(items, []);
+          html += '<div class="fanui-cascader__col" style="flex:1 1 auto;width:auto">' +
+            (hits.length ? hits.map(function (p) {
+              return '<button type="button" class="fanui-cascader__opt" data-hit="' + hits.indexOf(p) + '"><span>' + p.map(function (n) { return n.label; }).join(" / ") + "</span></button>";
+            }).join("") : '<div class="fanui-cascader__opt">' + I18N.t("empty") + "</div>") + "</div>";
+          panel.classList.add("is-searching");
+          inner.innerHTML = html;
+        } else {
+          panel.classList.remove("is-searching");
+          // 逐层渲染列
+          var cols = [], list = items;
+          for (var d = 0; d <= expandPath.length; d++) {
+            if (!list || !list.length) break;
+            cols.push(colHTML(list, d));
+            var next = expandPath[d];
+            list = next && next.children;
+            if (!list && d < expandPath.length) { expandPath = expandPath.slice(0, d + 1); break; }
+          }
+          var crumb = labels().length ? '<div class="fanui-cascader__breadcrumb"><span>当前：</span><b>' + labels().join(" / ") + "</b></div>" : "";
+          inner.innerHTML = html + '<div class="fanui-cascader__cols">' + cols.join("") + "</div>" + crumb;
+        }
+        // 搜索输入在重绘后恢复焦点与光标
+        if (hadSearchFocus) {
+          var si = panel.querySelector(".fanui-cascader__search");
+          if (si) { si.focus(); si.setSelectionRange(si.value.length, si.value.length); }
+        }
+      }
+      on(panel, "click", function (e) {
+        e.__fanuiPanelHit = true;
+        var hit = e.target.closest("[data-hit]");
+        if (hit) {
+          path = hitsCache[Number(hit.getAttribute("data-hit"))].slice();
+          expandPath = path.slice(0, -1);
+          render(); commit(); closeActivePanel();
+          return;
+        }
+        var opt = e.target.closest("[data-depth]");
+        if (!opt) return;
+        var depth = Number(opt.getAttribute("data-depth"));
+        var idx = Number(opt.getAttribute("data-idx"));
+        var list = items;
+        for (var d = 0; d < depth; d++) list = (expandPath[d] || {}).children;
+        var node = list && list[idx];
+        if (!node) return;
+        expandPath = expandPath.slice(0, depth);
+        expandPath[depth] = node;
+        if (node.children && node.children.length) {
+          expandPath = expandPath.slice(0, depth + 1);
+          render();
+        } else {
+          path = expandPath.slice();
+          render(); commit(); closeActivePanel();
+        }
+      });
+      if (searchable) {
+        var hitsCache = [];
+        on(panel, "input", function (e) {
+          if (!e.target.classList.contains("fanui-cascader__search")) return;
+          hitsCache = [];
+          var kw = e.target.value.trim().toLowerCase();
+          if (kw) {
+            (function walk(list, prefix) {
+              list.forEach(function (n) {
+                var p = prefix.concat([n]);
+                if (n.label.toLowerCase().indexOf(kw) > -1) hitsCache.push(p);
+                if (n.children) walk(n.children, p);
+              });
+            })(items, []);
+          }
+          render();
+        });
+      }
+      el.__fanuiCascader = {
+        el: el, panel: panel,
+        open: function () { render(); openPanel(panel, trigger); },
+        close: closeActivePanel,
+        value: function () { return value(); },
+        labels: function () { return labels(); },
+        setValue: function (vals) {
+          path = []; expandPath = [];
+          var list = items;
+          vals.forEach(function (v) {
+            var node = (list || []).find(function (n) { return (n.value !== undefined ? n.value : n.label) === v; });
+            if (!node) return;
+            path.push(node); expandPath.push(node); list = node.children;
+          });
+          expandPath = path.slice(0, -1);
+          syncTrigger();
+        }
+      };
+      on(trigger, "click", function () { el.__fanuiCascader.open(); });
+      return el.__fanuiCascader;
+    },
+    init: function (scope) { $$("[data-fanui-cascader]", scope).forEach(function (el) { Cascader.attach(el); }); }
+  };
+
+  /* ---- 13.5.6 树形控件（A6）----
+   * 结构：<ul class="fanui-tree" data-fanui-tree data-fanui-tree-check>
+   *        <script type="application/json">[{label,value,children,badge}]</script></ul>
+   */
+  var Tree = {
+    attach: function (target, opts) {
+      var el = typeof target === "string" ? $(target) : target;
+      if (!el || el.__fanuiTree) return el ? el.__fanuiTree : null;
+      opts = opts || {};
+      var items = opts.items || readJSONData(el) || [];
+      var checkable = opts.checkable !== undefined ? opts.checkable : el.hasAttribute("data-fanui-tree-check");
+
+      // 结构约定：根元素自身就是树容器（role="tree"），
+      // 其直接子节点只能是 <li role="treeitem">；子级再包一层 <ul role="group">。
+      // 早期实现把 build() 的返回值整体塞进根 <ul>，导致根里直接出现 <ul>
+      // （违反「<ul> 只能直接包含 <li>」，axe 判 serious）。
+      // 注意：辅助函数不能叫 items —— 会与上面的数据变量 items 同名，
+      // 函数声明提升后会被赋值覆盖，导致 items is not a function。
+      var LEVEL_ROLE = { tree: "tree", group: "group" };
+
+      function renderList(list, level) {
+        return list.map(function (n) { return renderItem(n, level); }).join("");
+      }
+
+      function renderItem(n, level) {
+        var hasKids = n.children && n.children.length;
+        // 初始为「展开」状态：CSS 只在 li.is-collapsed 时隐藏子级，
+        // 因此 aria-expanded / caret 图标必须与之一致，否则读屏会误报折叠。
+        var html = '<li role="treeitem" data-value="' + (n.value !== undefined ? n.value : n.label) + '"' +
+          ' aria-level="' + (level + 1) + '"' +
+          (hasKids ? ' aria-expanded="true"' : "") + ">";
+        html += '<div class="fanui-tree__row" tabindex="0">' +
+          '<button type="button" class="fanui-tree__caret' + (hasKids ? " is-expandable is-open" : "") + '" aria-label="' + (hasKids ? "收起子级" : "展开子级") + '">▶</button>' +
+          (checkable ? '<input class="fanui-tree__check" type="checkbox" aria-label="选中 ' + n.label + '">' : "") +
+          (n.icon ? '<span class="fanui-tree__icon">' + n.icon + "</span>" : "") +
+          '<span class="fanui-tree__label">' + n.label + "</span>" +
+          (n.badge ? '<span class="fanui-tree__badge">' + n.badge + "</span>" : "") +
+          "</div>";
+        if (hasKids) html += '<ul role="' + LEVEL_ROLE.group + '" class="fanui-tree__group">' + renderList(n.children, level + 1) + "</ul>";
+        return html + "</li>";
+      }
+
+      // 根元素复用已有的 <ul class="fanui-tree">，只替换其内容
+      el.setAttribute("role", LEVEL_ROLE.tree);
+      el.innerHTML = renderList(items, 0);
+
+      function rowOf(node) { return node.querySelector(":scope > .fanui-tree__row"); }
+      function eachNode(fn) { $$("li", el).forEach(fn); }
+
+      // 展开状态 / 选中值存 JSON 字段
+      function store(node, key, val) { var d = node.__data || (node.__data = {}); d[key] = val; }
+
+      on(el, "click", function (e) {
+        var caret = e.target.closest(".fanui-tree__caret");
+        if (caret && caret.classList.contains("is-expandable")) {
+          var li = caret.closest("li");
+          var collapsed = li.classList.toggle("is-collapsed");
+          caret.classList.toggle("is-open", !collapsed);
+          // 展开态必须同步到 ARIA，屏幕阅读器才知道子级是否可见
+          li.setAttribute("aria-expanded", String(!collapsed));
+          caret.setAttribute("aria-label", collapsed ? "展开子级" : "收起子级");
+          return;
+        }
+        var row = e.target.closest(".fanui-tree__row");
+        if (row) {
+          $$(".fanui-tree__row", el).forEach(function (r) { r.classList.remove("is-selected"); });
+          row.classList.add("is-selected");
+          el.dispatchEvent(new CustomEvent("fanui:treeselect", { bubbles: true, detail: { value: row.parentNode.getAttribute("data-value"), label: row.querySelector(".fanui-tree__label").textContent } }));
+        }
+      });
+      on(el, "change", function (e) {
+        if (!e.target.classList.contains("fanui-tree__check")) return;
+        var box = e.target;
+        var li = box.closest("li");
+        // 向下：全部子节点跟随
+        $$("input.fanui-tree__check", li).forEach(function (b) { if (b !== box) { b.checked = box.checked; b.indeterminate = false; } });
+        // 向上：重算祖先三态
+        var p = li.parentElement.closest("li");
+        while (p) {
+          var pb = p.querySelector(":scope > .fanui-tree__row .fanui-tree__check");
+          if (pb) {
+            var kids = $$(":scope > ul > li > .fanui-tree__row .fanui-tree__check", p).filter(function (b) { return b !== pb; });
+            var on = kids.filter(function (b) { return b.checked; }).length;
+            var half = kids.filter(function (b) { return b.indeterminate; }).length;
+            pb.checked = on === kids.length && kids.length > 0;
+            pb.indeterminate = (on > 0 && on < kids.length) || half > 0;
+          }
+          p = p.parentElement.closest("li");
+        }
+        el.dispatchEvent(new CustomEvent("fanui:treechange", { bubbles: true, detail: Tree.value(el) }));
+      });
+
+      el.__fanuiTree = {
+        el: el,
+        getChecked: function () { return Tree.value(el); },
+        checkAll: function (v) {
+          $$("input.fanui-tree__check", el).forEach(function (b) { b.checked = !!v; b.indeterminate = false; });
+          el.dispatchEvent(new CustomEvent("fanui:treechange", { bubbles: true, detail: Tree.value(el) }));
+        },
+        expandAll: function (v) {
+          $$("li", el).forEach(function (li) {
+            var caret = li.querySelector(":scope > .fanui-tree__row .fanui-tree__caret");
+            if (caret && caret.classList.contains("is-expandable")) {
+              li.classList.toggle("is-collapsed", !v);
+              caret.classList.toggle("is-open", !!v);
+              li.setAttribute("aria-expanded", String(!!v));
+              caret.setAttribute("aria-label", v ? "收起子级" : "展开子级");
+            }
+          });
+        }
+      };
+      return el.__fanuiTree;
+    },
+    value: function (el) {
+      var out = [];
+      $$("input.fanui-tree__check:checked", el).forEach(function (b) {
+        if (!b.indeterminate) out.push(b.closest("li").getAttribute("data-value"));
+      });
+      return out;
+    },
+    init: function (scope) { $$("[data-fanui-tree]", scope).forEach(function (el) { Tree.attach(el); }); }
+  };
+
+  /* ---- 13.5.7 穿梭框（A7）----
+   * 结构：<div data-fanui-transfer><script type="application/json">[{value,label,tag,disabled}]</script></div>
+   */
+  var Transfer = {
+    attach: function (target, opts) {
+      var el = typeof target === "string" ? $(target) : target;
+      if (!el || el.__fanuiTransfer) return el ? el.__fanuiTransfer : null;
+      opts = opts || {};
+      var items = (opts.items || readJSONData(el) || []).map(function (n) {
+        return { value: n.value !== undefined ? n.value : n.label, label: n.label, tag: n.tag || "", disabled: !!n.disabled };
+      });
+      var selected = (opts.value || []).slice();
+      var checkedL = {}, checkedR = {};
+      var kwL = "", kwR = "";
+
+      el.classList.add("fanui-transfer");
+      function render() {
+        var match = function (it, kw) { return !kw || it.label.toLowerCase().indexOf(kw.toLowerCase()) > -1; };
+        var left = items.filter(function (it) { return selected.indexOf(it.value) === -1 && match(it, kwL); });
+        var right = items.filter(function (it) { return selected.indexOf(it.value) > -1 && match(it, kwR); });
+        function listHTML(list, side) {
+          if (!list.length) return '<li class="fanui-transfer__empty">' + I18N.t("noData") + "</li>";
+          return list.map(function (it) {
+            var checked = (side === "L" ? checkedL : checkedR)[it.value];
+            return '<li class="fanui-transfer__opt' + (checked ? " is-selected" : "") + (it.disabled ? " is-disabled" : "") + '" data-side="' + side + '" data-value="' + it.value + '">' +
+              '<input class="fanui-transfer__opt-check" type="checkbox"' + (checked ? " checked" : "") + (it.disabled ? " disabled" : "") + ' aria-label="选择 ' + it.label + '">' +
+              '<span class="fanui-transfer__opt-label">' + it.label + "</span>" +
+              (it.tag ? '<span class="fanui-transfer__opt-tag">' + it.tag + "</span>" : "") +
+              "</li>";
+          }).join("");
+        }
+        el.innerHTML =
+          '<div class="fanui-transfer__panel"><div class="fanui-transfer__head">' +
+            '<span class="fanui-transfer__title">' + I18N.t("all") + '（' + items.length - selected.length + '）</span>' +
+            '<button type="button" class="demo-copy" data-all="L">' + I18N.t("all") + "</button></div>" +
+            '<input class="fanui-transfer__search" type="text" data-search="L" placeholder="' + I18N.t("search") + '" value="' + kwL + '">' +
+            '<ul class="fanui-transfer__list">' + listHTML(left, "L") + "</ul></div>" +
+          '<div class="fanui-transfer__actions">' +
+            '<button type="button" class="fanui-transfer__btn" data-move="R" title="移入右侧" ' + (Object.keys(checkedL).length ? "" : "disabled") + ">›</button>" +
+            '<button type="button" class="fanui-transfer__btn" data-move="L" title="移回左侧" ' + (Object.keys(checkedR).length ? "" : "disabled") + ">‹</button></div>" +
+          '<div class="fanui-transfer__panel"><div class="fanui-transfer__head">' +
+            '<span class="fanui-transfer__title">' + I18N.t("selectedCount", { n: selected.length }) + "</span>" +
+            '<button type="button" class="demo-copy" data-all="R">' + I18N.t("clear") + "</button></div>" +
+            '<input class="fanui-transfer__search" type="text" data-search="R" placeholder="' + I18N.t("search") + '" value="' + kwR + '">' +
+            '<ul class="fanui-transfer__list">' + listHTML(right, "R") + "</ul></div>";
+      }
+      function commit() {
+        el.dispatchEvent(new CustomEvent("fanui:transferchange", { bubbles: true, detail: { value: selected.slice() } }));
+      }
+      on(el, "click", function (e) {
+        var move = e.target.closest("[data-move]");
+        if (move) {
+          var to = move.getAttribute("data-move");
+          if (to === "R") { Object.keys(checkedL).forEach(function (v) { if (checkedL[v]) { selected.push(v); delete checkedL[v]; } }); }
+          else { Object.keys(checkedR).forEach(function (v) { if (checkedR[v]) { selected = selected.filter(function (x) { return x !== v; }); delete checkedR[v]; } }); }
+          render(); commit();
+          return;
+        }
+        var all = e.target.closest("[data-all]");
+        if (all) {
+          var side = all.getAttribute("data-all");
+          if (side === "L") { items.forEach(function (it) { if (!it.disabled && selected.indexOf(it.value) === -1 && match(it, kwL)) checkedL[it.value] = true; }); }
+          else { selected.forEach(function (v) { checkedR[v] = true; }); }
+          render();
+          return;
+        }
+        var opt = e.target.closest(".fanui-transfer__opt");
+        if (opt && !e.target.closest(".fanui-transfer__opt-check")) {
+          var side2 = opt.getAttribute("data-side");
+          var v = opt.getAttribute("data-value");
+          var map = side2 === "L" ? checkedL : checkedR;
+          if (map[v]) delete map[v]; else map[v] = true;
+          render();
+        }
+      });
+      on(el, "change", function (e) {
+        if (!e.target.classList.contains("fanui-transfer__opt-check")) return;
+        var opt = e.target.closest(".fanui-transfer__opt");
+        var map = opt.getAttribute("data-side") === "L" ? checkedL : checkedR;
+        var v = opt.getAttribute("data-value");
+        if (e.target.checked) map[v] = true; else delete map[v];
+        render();
+      });
+      on(el, "input", function (e) {
+        var s = e.target.closest("[data-search]");
+        if (!s) return;
+        if (s.getAttribute("data-search") === "L") kwL = s.value; else kwR = s.value;
+        render();
+        var back = el.querySelector('[data-search="' + s.getAttribute("data-search") + '"]');
+        if (back) { back.focus(); back.setSelectionRange(back.value.length, back.value.length); }
+      });
+
+      el.__fanuiTransfer = {
+        el: el,
+        value: function () { return selected.slice(); },
+        set: function (vals) { selected = vals.slice(); checkedL = checkedR = {}; render(); commit(); }
+      };
+      render();
+      return el.__fanuiTransfer;
+    },
+    init: function (scope) { $$("[data-fanui-transfer]", scope).forEach(function (el) { Transfer.attach(el); }); }
+  };
+
+
+
+  /* ---- 13.6 无障碍增强（C1）----
+   * 处理「纯 CSS 表达不了」的可达性缺口，其中最常见的是
+   * scrollable-region-focusable：横向滚动的 <pre> / 表格容器没有可聚焦内容时，
+   * 键盘用户无法滚动它。这里按需补 tabindex + region 角色 + 可访问名。
+   */
+  var A11y = {
+    /**
+     * 给「确实可滚动、但内部没有可聚焦内容」的容器补键盘可达性。
+     * 幂等：已有 tabindex 的元素会跳过；尺寸未溢出时不动它。
+     * @param {Element|Document} [scope] 作用范围，默认整个文档
+     * @param {object} [opts] { selector, label }
+     * @returns {number} 本次处理的元素个数
+     */
+    focusableScrollables: function (scope, opts) {
+      opts = opts || {};
+      var sel = opts.selector || "pre, .fanui-scroll-area, [data-fanui-scrollable]";
+      var label = opts.label || "可滚动区域，使用方向键滚动";
+      var n = 0;
+      $$(sel, scope || doc).forEach(function (el) {
+        if (el.hasAttribute("tabindex")) return;
+        var overflowX = el.scrollWidth > el.clientWidth + 1;
+        var overflowY = el.scrollHeight > el.clientHeight + 1;
+        if (!overflowX && !overflowY) return;
+        // 内部已有可聚焦元素时不需要容器自己进 Tab 序列
+        if ($("a[href], button, input, select, textarea, [tabindex]", el)) return;
+        el.setAttribute("tabindex", "0");
+        if (!el.getAttribute("role")) el.setAttribute("role", "region");
+        if (!el.getAttribute("aria-label") && !el.getAttribute("aria-labelledby")) {
+          el.setAttribute("aria-label", label);
+        }
+        n++;
+      });
+      return n;
+    },
+
+    init: function (scope) { A11y.focusableScrollables(scope); }
+  };
+
+
+
+  /* ==========================================================================
+   * 14. 能力补齐（Capabilities）
+   *   14.1 虚拟滚动 virtualList      14.5 分割面板 splitter
+   *   14.2 图片灯箱 lightbox         14.6 吸顶 affix
+   *   14.3 水印 watermark            14.7 回到顶部 backTop
+   *   14.4 引导 tour
+   * ======================================================================== */
+
+  /** 统一的滚动容器读取：window 或某个可滚动元素 */
+  function readScroll(target) {
+    if (!target || target === global || target === doc) {
+      return { top: global.pageYOffset || root.scrollTop || 0, left: global.pageXOffset || root.scrollLeft || 0 };
+    }
+    return { top: target.scrollTop, left: target.scrollLeft };
+  }
+
+  /* ---- 14.1 虚拟滚动 ------------------------------------------------------
+   * 只渲染视口内的行，支撑「上万行列表 / 大表格 / 大树」而不卡死。
+   * 渐进增强：无 JS 时 __source 里的原始行正常流式展示（SSR 直出也可读）。
+   */
+  var VirtualList = {
+    _list: [],
+    create: function (target, options) {
+      var el = typeof target === "string" ? $(target) : target;
+      if (!el) return null;
+      if (el.__fanuiVL) return el.__fanuiVL;
+
+      var opts = options || {};
+      var itemHeight = num(opts.itemHeight || el.getAttribute("data-fanui-item-height"), 44);
+      var overscan = num(opts.overscan || el.getAttribute("data-fanui-overscan"), 4);
+      var source = $("." + PREFIX + "-virtual-list__source", el);
+      var inner = $("." + PREFIX + "-virtual-list__inner", el);
+      if (!inner) {
+        inner = doc.createElement("div");
+        inner.className = PREFIX + "-virtual-list__inner";
+        el.appendChild(inner);
+      }
+
+      var items = [];
+      var nodes = {};
+      var i;
+
+      function readSource() {
+        items = [];
+        if (source) {
+          for (i = 0; i < source.children.length; i++) items.push(source.children[i].outerHTML);
+        }
+        return items;
+      }
+
+      function range() {
+        var h = el.clientHeight || num(el.getAttribute("data-fanui-vl-height"), 320);
+        var start = Math.max(0, Math.floor(el.scrollTop / itemHeight) - overscan);
+        var end = Math.min(items.length, Math.ceil((el.scrollTop + h) / itemHeight) + overscan);
+        return { start: start, end: Math.max(start, end) };
+      }
+
+      function makeNode(idx) {
+        var wrap = doc.createElement("div");
+        wrap.className = PREFIX + "-virtual-list__item";
+        wrap.setAttribute("data-fanui-vl-index", String(idx));
+        wrap.setAttribute("role", "listitem");
+        wrap.innerHTML = items[idx];
+        return wrap;
+      }
+
+      function paint() {
+        var r = range(), next = {}, idx;
+        for (idx = r.start; idx < r.end; idx++) {
+          var node = nodes[idx] || makeNode(idx);
+          node.style.height = itemHeight + "px";
+          node.style.transform = "translateY(" + idx * itemHeight + "px)";
+          if (!node.parentNode) inner.appendChild(node);
+          next[idx] = node;
+        }
+        for (idx in nodes) {
+          if (Object.prototype.hasOwnProperty.call(nodes, idx) && !next[idx] && nodes[idx].parentNode) {
+            nodes[idx].parentNode.removeChild(nodes[idx]);
+          }
+        }
+        nodes = next;
+        el.__fanuiVLRendered = Object.keys(next).length;
+      }
+
+      readSource();
+      el.classList.add("is-virtualized");
+      if (!el.getAttribute("role")) el.setAttribute("role", "list");
+      if (!el.getAttribute("tabindex")) el.setAttribute("tabindex", "0");
+      if (!el.getAttribute("aria-label")) el.setAttribute("aria-label", "虚拟滚动列表");
+      inner.style.height = items.length * itemHeight + "px";
+      paint();
+
+      var onScroll = raf(function () { paint(); });
+      on(el, "scroll", onScroll, { passive: true });
+
+      var api = {
+        /** 替换数据；list 为 HTML 字符串数组（html:true）或纯文本数组 */
+        setItems: function (list, cfg) {
+          cfg = cfg || {};
+          items = (list || []).map(function (v) {
+            return cfg.html ? String(v) : escapeHtml(String(v));
+          });
+          nodes = {};
+          inner.innerHTML = "";
+          var vis = range();
+          el.__fanuiVLVisible = vis;
+          inner.style.height = Math.max(items.length * itemHeight, itemHeight) + "px";
+          paint();
+          return items.length;
+        },
+        itemHeight: function (h) {
+          if (h != null) { itemHeight = num(h, itemHeight); inner.style.height = items.length * itemHeight + "px"; paint(); }
+          return itemHeight;
+        },
+        scrollTo: function (idx) { el.scrollTop = Math.max(0, idx * itemHeight); paint(); },
+        visibleRange: function () { return range(); },
+        count: function () { return items.length; },
+        refresh: function () { readSource(); inner.style.height = items.length * itemHeight + "px"; nodes = {}; inner.innerHTML = ""; paint(); },
+        destroy: function () {
+          el.removeEventListener("scroll", onScroll, { passive: true });
+          el.classList.remove("is-virtualized");
+          inner.innerHTML = "";
+          delete el.__fanuiVL;
+          VirtualList._list = VirtualList._list.filter(function (x) { return x.el !== el; });
+        },
+        el: el
+      };
+      el.__fanuiVL = api;
+      VirtualList._list.push(api);
+      return api;
+    },
+    init: function (scope) {
+      $$("[data-fanui-virtual-list]", scope).forEach(function (el) { VirtualList.create(el); });
+    },
+    /** 容器尺寸变化后重算（供 resize / tab 切换后调用） */
+    refreshAll: function () { VirtualList._list.forEach(function (api) { api.refresh(); }); }
+  };
+
+  /* ---- 14.2 图片预览 / 灯箱 ------------------------------------------------ */
+  var Lightbox = {
+    _items: [],
+    _index: 0,
+    _root: null,
+    _scale: 1,
+    _tx: 0,
+    _ty: 0,
+    _trigger: null,
+    _group: null,
+
+    build: function (list, index) {
+      var self = Lightbox;
+      var root = doc.createElement("div");
+      root.className = PREFIX + "-lightbox";
+      root.setAttribute("role", "dialog");
+      root.setAttribute("aria-modal", "true");
+      root.setAttribute("aria-label", "图片预览");
+      var cur = list[self._index] || {};
+      root.innerHTML =
+        '<div class="' + PREFIX + '-lightbox__backdrop" data-lb="backdrop"></div>' +
+        '<div class="' + PREFIX + '-lightbox__counter" data-lb="counter"></div>' +
+        '<div class="' + PREFIX + '-lightbox__toolbar">' +
+          '<button class="' + PREFIX + '-lightbox__btn" data-lb="zoom-out" aria-label="缩小" type="button">−</button>' +
+          '<button class="' + PREFIX + '-lightbox__btn" data-lb="zoom-in" aria-label="放大" type="button">＋</button>' +
+          '<button class="' + PREFIX + '-lightbox__btn" data-lb="reset" aria-label="重置缩放" type="button">⤢</button>' +
+          '<button class="' + PREFIX + '-lightbox__btn" data-lb="close" aria-label="关闭（Esc）" type="button">✕</button>' +
+        "</div>" +
+        '<div class="' + PREFIX + '-lightbox__stage" data-lb="stage">' +
+          (list.length > 1
+            ? '<button class="' + PREFIX + '-lightbox__btn ' + PREFIX + '-lightbox__nav ' + PREFIX + '-lightbox__nav--prev" data-lb="prev" aria-label="上一张（←）" type="button">‹</button>'
+            : "") +
+          '<img class="' + PREFIX + '-lightbox__img" data-lb="img" src="' + escapeHtml(cur.src || "") + '" alt="' + escapeHtml(cur.alt || "") + '">' +
+          (list.length > 1
+            ? '<button class="' + PREFIX + '-lightbox__btn ' + PREFIX + '-lightbox__nav ' + PREFIX + '-lightbox__nav--next" data-lb="next" aria-label="下一张（→）" type="button">›</button>'
+            : "") +
+          (cur.caption ? '<div class="' + PREFIX + '-lightbox__caption">' + escapeHtml(cur.caption) + "</div>" : "") +
+        "</div>" +
+        (list.length > 1
+          ? '<div class="' + PREFIX + '-lightbox__thumbstrip">' +
+            list.map(function (it, i) {
+              return '<img src="' + escapeHtml(it.thumb || it.src) + '" alt="" data-lb-thumb="' + i + '"' +
+                (i === self._index ? ' class="is-active"' : "") + ">";
+            }).join("") +
+            "</div>"
+          : "");
+      return root;
+    },
+
+    applyTransform: function () {
+      var img = $("[data-lb='img']", Lightbox._root);
+      if (!img) return;
+      img.style.transform = "translate(" + Lightbox._tx + "px," + Lightbox._ty + "px) scale(" + Lightbox._scale + ")";
+      img.style.cursor = Lightbox._scale > 1 ? "grab" : "zoom-in";
+    },
+
+    go: function (step) {
+      var self = Lightbox;
+      if (self._items.length < 2) return;
+      self._index = (self._index + step + self._items.length) % self._items.length;
+      var cur = self._items[self._index];
+      var img = $("[data-lb='img']", self._root);
+      img.src = cur.src;
+      img.alt = cur.alt || "";
+      self._scale = 1; self._tx = 0; self._ty = 0;
+      self.applyTransform();
+      $$("[data-lb='counter']", self._root).forEach(function (n) {
+        n.textContent = self._index + 1 + " / " + self._items.length;
+      });
+      $$("[data-lb-thumb]", self._root).forEach(function (t, i) {
+        t.classList.toggle("is-active", i === self._index);
+      });
+      var cap = $("." + PREFIX + "-lightbox__caption", self._root);
+      if (cap) cap.textContent = cur.caption || "";
+    },
+
+    close: function () {
+      var self = Lightbox;
+      if (!self._root) return;
+      doc.removeEventListener("keydown", self._onKey, false);
+      if (self._root.parentNode) self._root.parentNode.removeChild(self._root);
+      self._root = null;
+      unlockScroll();
+      if (self._trigger && self._trigger.focus) self._trigger.focus();
+    },
+
+    /** 打开：list = [{ src, alt, caption, thumb }]，index 从 0 开始 */
+    open: function (list, index, trigger) {
+      var self = Lightbox;
+      if (!list || !list.length) return null;
+      if (self._root) self.close();
+      self._items = list;
+      self._index = clamp(num(index, 0), 0, list.length - 1);
+      self._scale = 1; self._tx = 0; self._ty = 0;
+      self._trigger = trigger || null;
+
+      var root = self.build(list, self._index);
+      doc.body.appendChild(root);
+      self._root = root;
+      lockScroll();
+
+      var img = $("[data-lb='img']", root);
+      $$("[data-lb='counter']", root).forEach(function (n) { n.textContent = self._index + 1 + " / " + list.length; });
+
+      // 点击委派：按钮 / 遮罩 / 缩略图 / 舞台
+      on(root, "click", function (e) {
+        var t = e.target;
+        var action = t.getAttribute && t.getAttribute("data-lb");
+        var thumb = t.getAttribute && t.getAttribute("data-lb-thumb");
+        if (thumb != null) {
+          var target = num(thumb, 0);
+          self.go(target - self._index);
+          return;
+        }
+        if (action === "close" || action === "backdrop") return self.close();
+        if (action === "prev") return self.go(-1);
+        if (action === "next") return self.go(1);
+        if (action === "zoom-in") { self._scale = clamp(self._scale + 0.25, 0.25, 4); return self.applyTransform(); }
+        if (action === "zoom-out") { self._scale = clamp(self._scale - 0.25, 0.25, 4); return self.applyTransform(); }
+        if (action === "reset") {
+          self._scale = 1; self._tx = 0; self._ty = 0;
+          on(img, "click", null);
+          self.applyTransform();
+          return;
+        }
+        if (t === img) { self._scale = self._scale > 1 ? 1 : 2; self._tx = 0; self._ty = 0; self.applyTransform(); }
+      });
+
+      // 滚轮缩放
+      on(root, "wheel", function (e) {
+        if (!e.target.closest || !e.target.closest("[data-lb='stage']")) return;
+        e.preventDefault();
+        self._scale = clamp(self._scale + (e.deltaY < 0 ? 0.15 : -0.15), 0.25, 4);
+        self.applyTransform();
+      }, { passive: false });
+
+      // 拖动平移（仅放大后）
+      var dragging = false, sx = 0, sy = 0, ox = 0, oy = 0;
+      on(img, "pointerdown", function (e) {
+        if (self._scale <= 1) return;
+        dragging = true; sx = e.clientX; sy = e.clientY; ox = self._tx; oy = self._ty;
+        img.classList.add("is-dragging");
+        if (img.setPointerCapture) img.setPointerCapture(e.pointerId);
+      });
+      on(img, "pointermove", function (e) {
+        if (!dragging) return;
+        self._tx = ox + (e.clientX - sx);
+        self._ty = oy + (e.clientY - sy);
+        self.applyTransform();
+      });
+      on(img, "pointerup", function () { dragging = false; img.classList.remove("is-dragging"); });
+      on(img, "pointercancel", function () { dragging = false; img.classList.remove("is-dragging"); });
+
+      // 触摸滑动切图
+      var tsx = null;
+      on(root, "touchstart", function (e) { if (e.touches.length === 1) tsx = e.touches[0].clientX; }, { passive: true });
+      on(root, "touchend", function (e) {
+        if (tsx == null || self._scale > 1) return;
+        var dx = (e.changedTouches[0] || {}).clientX - tsx;
+        if (Math.abs(dx) > 48) self.go(dx < 0 ? 1 : -1);
+        tsx = null;
+      }, { passive: true });
+
+      doc.addEventListener("keydown", self._onKey, false);
+      // 焦点移入对话框，保证键盘用户不会"丢在背后页面"
+      var first = $("[data-lb='close']", root);
+      if (first) first.focus();
+      emit("fanui:lightbox:open", { index: self._index, items: list });
+      return root;
+    },
+
+    _onKey: function (e) {
+      var self = Lightbox;
+      if (!self._root) return;
+      if (e.key === "Escape") { e.preventDefault(); self.close(); }
+      else if (e.key === "ArrowLeft") { e.preventDefault(); self.go(-1); }
+      else if (e.key === "ArrowRight") { e.preventDefault(); self.go(1); }
+      else if (e.key === "+" || e.key === "=") { self._scale = clamp(self._scale + 0.25, 0.25, 4); self.applyTransform(); }
+      else if (e.key === "-") { self._scale = clamp(self._scale - 0.25, 0.25, 4); self.applyTransform(); }
+      else if (e.key === "Tab") {
+        // 简易焦点陷阱：只在对话框内循环
+        var focusables = $$("button, [href], [tabindex]:not([tabindex='-1'])", self._root);
+        if (!focusables.length) return;
+        var first = focusables[0], last = focusables[focusables.length - 1];
+        if (e.shiftKey && doc.activeElement === first) { e.preventDefault(); last.focus(); }
+        else if (!e.shiftKey && doc.activeElement === last) { e.preventDefault(); first.focus(); }
+      }
+    },
+
+    /** 从触发器收集同组图片 */
+    collect: function (trigger) {
+      var group = trigger.getAttribute("data-fanui-lightbox-group");
+      var sel = group
+        ? '[data-fanui-lightbox-group="' + group + '"]'
+        : "[data-fanui-lightbox]";
+      var nodes = $$(sel).filter(function (n) {
+        return !group || n.getAttribute("data-fanui-lightbox-group") === group;
+      });
+      var list = nodes.map(function (n) {
+        var src = n.getAttribute("data-fanui-lightbox-src") || n.getAttribute("href") || n.getAttribute("src") || "";
+        var thumb = n.getAttribute("data-fanui-lightbox-thumb") || "";
+        var caption = n.getAttribute("data-fanui-lightbox-caption") || n.getAttribute("alt") || n.getAttribute("title") || "";
+        return { src: src, thumb: thumb, caption: caption, alt: n.getAttribute("alt") || "" };
+      });
+      return { list: list, index: nodes.indexOf(trigger) };
+    },
+
+    init: function (scope) {
+      $$("[data-fanui-lightbox]", scope).forEach(function (el) {
+        if (el.__fanuiLB) return;
+        el.__fanuiLB = true;
+        el.classList.add(PREFIX + "-lightbox-trigger");
+        on(el, "click", function (e) {
+          // 已显式指定 src 时按单图处理，否则按组
+          var explicit = el.getAttribute("data-fanui-lightbox-src");
+          if (explicit && el.tagName !== "A") {
+            e.preventDefault();
+            Lightbox.open([{ src: explicit, alt: el.getAttribute("alt") || "", caption: el.getAttribute("data-fanui-lightbox-caption") || "" }], 0, el);
+            return;
+          }
+          var got = Lightbox.collect(el);
+          if (!got.list.length || !got.list[got.index].src) return;
+          e.preventDefault();
+          Lightbox.open(got.list, got.index, el);
+        });
+      });
+    }
+  };
+
+  /* ---- 14.3 水印 ---------------------------------------------------------- */
+  var Watermark = {
+    _list: [],
+    /** 生成水印层 */
+    create: function (target, options) {
+      var host = typeof target === "string" ? $(target) : target;
+      if (!host) return null;
+      var opts = options || {};
+
+      var text = opts.text != null ? String(opts.text) : "fanUI";
+      var subtext = opts.subtext != null ? String(opts.subtext) : "";
+      var image = opts.image || "";
+      var rotate = num(opts.rotate, -22) * Math.PI / 180;
+      var opacity = num(opts.opacity, 0.16);
+      var color = opts.color || "#0f172a";
+      var fontSize = num(opts.fontSize, 15);
+      var subFontSize = num(opts.subFontSize, 11);
+      var gap = opts.gap;
+      if (typeof gap === "number") gap = [gap, gap];
+      if (!gap || !gap.length) gap = [220, 150];
+      var gx = num(gap[0], 220), gy = num(gap[1], 150);
+
+      var layer = doc.createElement("div");
+      layer.className = PREFIX + "-watermark";
+      layer.setAttribute("aria-hidden", "true");
+      if (opts.zIndex != null) layer.style.zIndex = String(opts.zIndex);
+
+      function paint() {
+        var dpr = global.devicePixelRatio || 1;
+        var canvas = doc.createElement("canvas");
+        canvas.width = gx * dpr;
+        canvas.height = gy * dpr;
+        var ctx = canvas.getContext("2d");
+        ctx.scale(dpr, dpr);
+        ctx.globalAlpha = opacity;
+        ctx.fillStyle = color;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.translate(gx / 2, gy / 2);
+        ctx.rotate(rotate);
+
+        if (image) {
+          var img = new global.Image();
+          img.crossOrigin = "anonymous";
+          img.onload = function () {
+            var iw = num(opts.imageWidth, 100), ih = num(opts.imageHeight, 100);
+            ctx.drawImage(img, -iw / 2, -ih / 2, iw, ih);
+            layer.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";
+          };
+          img.src = image;
+        }
+        ctx.font = "600 " + fontSize + "px -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif";
+        ctx.fillText(text, 0, subtext ? -subFontSize * 0.7 : 0);
+        if (subtext) {
+          ctx.font = "400 " + subFontSize + "px -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif";
+          ctx.fillText(subtext, 0, fontSize * 0.7);
+        }
+        if (!image) layer.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";
+        layer.style.backgroundSize = gx + "px " + gy + "px";
+      }
+      paint();
+
+      // 宿主需要定位上下文
+      var cs = global.getComputedStyle ? global.getComputedStyle(host) : null;
+      if (cs && cs.position === "static") host.classList.add(PREFIX + "-watermark__host");
+      host.appendChild(layer);
+
+      // 防删除：被外部脚本移除或改样式时自动复原
+      var mo = null;
+      if (global.MutationObserver) {
+        mo = new global.MutationObserver(function () {
+          if (!host.contains(layer)) { host.appendChild(layer); return; }
+          if (layer.style.display === "none" || layer.style.visibility === "hidden") {
+            layer.style.display = "";
+            layer.style.visibility = "visible";
+          }
+        });
+        mo.observe(host, { childList: true, attributes: true, attributeFilter: ["style", "class"] });
+      }
+
+      var api = {
+        update: function (next) {
+          if (next) { Object.keys(next).forEach(function (k) { opts[k] = next[k]; }); text = String(opts.text != null ? opts.text : text); subtext = String(opts.subtext != null ? opts.subtext : subtext); }
+          paint();
+        },
+        destroy: function () {
+          if (mo) mo.disconnect();
+          if (layer.parentNode) layer.parentNode.removeChild(layer);
+          Watermark._list = Watermark._list.filter(function (x) { return x.api !== api; });
+        },
+        el: layer
+      };
+      Watermark._list.push({ api: api, host: host });
+      return api;
+    },
+    init: function (scope) {
+      $$("[data-fanui-watermark]", scope).forEach(function (el) {
+        if (el.__fanuiWM) return;
+        el.__fanuiWM = true;
+        var gapRaw = el.getAttribute("data-fanui-watermark-gap") || "";
+        var gap = gapRaw.split(",").map(function (s) { return num(s.trim(), 0); }).filter(Boolean);
+        el.__fanuiWMInstance = Watermark.create(el, {
+          text: el.getAttribute("data-fanui-watermark"),
+          subtext: el.getAttribute("data-fanui-watermark-sub") || "",
+          image: el.getAttribute("data-fanui-watermark-image") || "",
+          rotate: num(el.getAttribute("data-fanui-watermark-rotate"), -22),
+          opacity: num(el.getAttribute("data-fanui-watermark-opacity"), 0.16),
+          gap: gap.length ? gap : undefined
+        });
+      });
+    }
+  };
+
+  /* ---- 14.4 引导 Tour ----------------------------------------------------- */
+  function TourInstance(steps, options) {
+    var self = this;
+    self.steps = (steps || []).slice();
+    self.opts = options || {};
+    self.index = -1;
+    self.root = null;
+    self._prevFocus = null;
+
+    function resolve(step) {
+      var t = typeof step.target === "function" ? step.target() : step.target;
+      return typeof t === "string" ? $(t) : t;
+    }
+
+    function place(step, target) {
+      var pad = num(step.padding, 8);
+      var spot = $("." + PREFIX + "-tour__spotlight", self.root);
+      var pop = $("." + PREFIX + "-tour__popover", self.root);
+      var arrow = $("." + PREFIX + "-tour__arrow", self.root);
+      var vw = global.innerWidth, vh = global.innerHeight;
+
+      if (!target) {
+        spot.style.display = "none";
+        pop.style.left = Math.max(16, (vw - pop.offsetWidth) / 2) + "px";
+        pop.style.top = Math.max(16, (vh - pop.offsetHeight) / 2) + "px";
+        arrow.style.display = "none";
+        return;
+      }
+
+      var r = target.getBoundingClientRect();
+      spot.style.display = "";
+      spot.style.left = Math.max(0, r.left - pad) + "px";
+      spot.style.top = Math.max(0, r.top - pad) + "px";
+      spot.style.width = Math.min(vw, r.width + pad * 2) + "px";
+      spot.style.height = Math.min(vh, r.height + pad * 2) + "px";
+      spot.style.borderRadius = step.radius != null ? step.radius + "px" : "";
+
+      // 自动选边：优先下方，空间不足则上方 / 右侧 / 左侧
+      var pw = pop.offsetWidth, ph = pop.offsetHeight, gapPx = 14;
+      var placement = step.placement || "auto";
+      if (placement === "auto") {
+        if (r.bottom + gapPx + ph <= vh - 12) placement = "bottom";
+        else if (r.top - gapPx - ph >= 12) placement = "top";
+        else if (r.right + gapPx + pw <= vw - 12) placement = "right";
+        else placement = "left";
+      }
+      var left, top;
+      if (placement === "bottom") { left = r.left + r.width / 2 - pw / 2; top = r.bottom + gapPx; }
+      else if (placement === "top") { left = r.left + r.width / 2 - pw / 2; top = r.top - ph - gapPx; }
+      else if (placement === "right") { left = r.right + gapPx; top = r.top + r.height / 2 - ph / 2; }
+      else { left = r.left - pw - gapPx; top = r.top + r.height / 2 - ph / 2; }
+      left = clamp(left, 12, vw - pw - 12);
+      top = clamp(top, 12, vh - ph - 12);
+      pop.style.left = left + "px";
+      pop.style.top = top + "px";
+
+      // 箭头指向目标
+      arrow.style.display = "";
+      var cx = r.left + r.width / 2, cy = r.top + r.height / 2;
+      if (placement === "bottom" || placement === "top") {
+        arrow.style.left = clamp(cx - left - 5, 12, pw - 22) + "px";
+        arrow.style.top = (placement === "bottom" ? -6 : ph - 6) + "px";
+      } else {
+        arrow.style.top = clamp(cy - top - 5, 12, ph - 22) + "px";
+        arrow.style.left = (placement === "right" ? -6 : pw - 6) + "px";
+      }
+      pop.setAttribute("data-placement", placement);
+    }
+
+    self.go = function (i) {
+      if (i < 0 || i >= self.steps.length) return self.stop();
+      var prevStep = self.steps[self.index];
+      if (prevStep && typeof prevStep.onLeave === "function") prevStep.onLeave();
+      self.index = i;
+      var step = self.steps[i];
+      var target = resolve(step);
+      if (target && target.scrollIntoView) {
+        target.scrollIntoView({ block: "center", inline: "center", behavior: self.opts.scrollBehavior || "smooth" });
+      }
+      var pop = $("." + PREFIX + "-tour__popover", self.root);
+      pop.innerHTML =
+        '<div class="' + PREFIX + '-tour__head">' +
+          '<h3 class="' + PREFIX + '-tour__title">' + escapeHtml(step.title || "第 " + (i + 1) + " 步") + "</h3>" +
+          '<button class="' + PREFIX + '-tour__close" type="button" aria-label="关闭引导">✕</button>' +
+        "</div>" +
+        (step.desc ? '<p class="' + PREFIX + '-tour__desc">' + escapeHtml(step.desc) + "</p>" : "") +
+        '<div class="' + PREFIX + '-tour__footer">' +
+          '<div class="' + PREFIX + '-tour__dots">' +
+            self.steps.map(function (_, k) {
+              return '<button class="' + PREFIX + '-tour__dot' + (k === i ? " is-active" : "") +
+                '" type="button" data-tour-dot="' + k + '" aria-label="第 ' + (k + 1) + ' 步"></button>';
+            }).join("") +
+          "</div>" +
+          '<div class="' + PREFIX + '-tour__actions">' +
+            (i > 0 ? '<button class="' + PREFIX + 'btn ' + PREFIX + 'btn--sm" type="button" data-tour="prev">上一步</button>' : "") +
+            '<button class="' + PREFIX + 'btn ' + PREFIX + 'btn--primary ' + PREFIX + 'btn--sm" type="button" data-tour="next">' +
+              (i === self.steps.length - 1 ? "完成" : "下一步") + "</button>" +
+          "</div>" +
+        "</div>" +
+        '<div class="' + PREFIX + '-tour__arrow" aria-hidden="true"></div>';
+      // 用 setTimeout 让浏览器先完成布局，再测量气泡尺寸定位
+      global.setTimeout(function () { place(step, resolve(step)); }, 0);
+      if (typeof step.onEnter === "function") step.onEnter(target, self);
+      emit("fanui:tour:change", { index: i, total: self.steps.length, step: step });
+    };
+
+    self.next = function () {
+      if (self.index >= self.steps.length - 1) return self.stop();
+      return self.go(self.index + 1);
+    };
+    self.prev = function () { if (self.index > 0) return self.go(self.index - 1); };
+
+    self.start = function () {
+      if (self.root) return self;
+      self._prevFocus = doc.activeElement;
+      var host = doc.createElement("div");
+      host.className = PREFIX + "-tour";
+      host.setAttribute("role", "dialog");
+      host.setAttribute("aria-modal", "true");
+      host.setAttribute("aria-label", "功能引导");
+      host.innerHTML =
+        '<div class="' + PREFIX + '-tour__mask"></div>' +
+        '<div class="' + PREFIX + '-tour__spotlight"></div>' +
+        '<div class="' + PREFIX + '-tour__popover"></div>';
+      doc.body.appendChild(host);
+      self.root = host;
+      lockScroll();
+
+      on(host, "click", function (e) {
+        var t = e.target;
+        var act = t.getAttribute && t.getAttribute("data-tour");
+        var dot = t.getAttribute && t.getAttribute("data-tour-dot");
+        if (dot != null) return self.go(num(dot, 0));
+        if (act === "next") return self.next();
+        if (act === "prev") return self.prev();
+        if (t.classList && t.classList.contains(PREFIX + "-tour__close")) return self.stop();
+      });
+
+      self._onKey = function (e) {
+        if (e.key === "Escape") { e.preventDefault(); self.stop(); }
+        else if (e.key === "ArrowRight" || e.key === "Enter") { e.preventDefault(); self.next(); }
+        else if (e.key === "ArrowLeft") { e.preventDefault(); self.prev(); }
+      };
+      doc.addEventListener("keydown", self._onKey, false);
+      global.addEventListener("resize", self._onResize = function () {
+        if (self.index > -1) place(self.steps[self.index], resolve(self.steps[self.index]));
+      });
+      self.go(0);
+      return self;
+    };
+
+    self.stop = function () {
+      if (!self.root) return self;
+      doc.removeEventListener("keydown", self._onKey, false);
+      global.removeEventListener("resize", self._onResize);
+      if (self.root.parentNode) self.root.parentNode.removeChild(self.root);
+      self.root = null;
+      unlockScroll();
+      if (self._prevFocus && self._prevFocus.focus) self._prevFocus.focus();
+      emit("fanui:tour:finish", { index: self.index });
+      if (typeof self.opts.onFinish === "function") self.opts.onFinish();
+      return self;
+    };
+
+    self.destroy = function () { self.stop(); self.steps = []; };
+  }
+
+  var Tour = {
+    _instances: [],
+    create: function (steps, options) {
+      var inst = new TourInstance(steps, options);
+      Tour._instances.push(inst);
+      return inst;
+    },
+    /** 一行启动：目标元素上写 data-fanui-tour='[{...}]' 即可 */
+    init: function (scope) {
+      $$("[data-fanui-tour]", scope).forEach(function (el) {
+        if (el.__fanuiTour) return;
+        el.__fanuiTour = true;
+        on(el, "click", function (e) {
+          e.preventDefault();
+          var raw = el.getAttribute("data-fanui-tour");
+          var steps = [];
+          try { steps = JSON.parse(raw); } catch (err) { steps = []; }
+          if (!steps.length) return;
+          Tour.create(steps, { onFinish: function () { emit("fanui:tour:done", { trigger: el }); } }).start();
+        });
+      });
+    }
+  };
+
+  /* ---- 14.5 分割面板 Splitter --------------------------------------------- */
+  var Splitter = {
+    _list: [],
+    create: function (target, options) {
+      var el = typeof target === "string" ? $(target) : target;
+      if (!el) return null;
+      if (el.__fanuiSplitter) return el.__fanuiSplitter;
+      var opts = options || {};
+      var vertical = opts.direction === "vertical" || el.classList.contains(PREFIX + "-splitter--vertical");
+      var bar = $("." + PREFIX + "-splitter__bar", el);
+      var pane = $("." + PREFIX + "-splitter__pane", el);
+      if (!bar || !pane) return null;
+
+      var min = num(opts.min, 10);
+      var max = num(opts.max, 90);
+      var current = num(opts.value, num((pane.style.getPropertyValue("--fanui-splitter-size") || "").replace("%", ""), 50));
+
+      if (!bar.getAttribute("role")) bar.setAttribute("role", "separator");
+      bar.setAttribute("aria-orientation", vertical ? "horizontal" : "vertical");
+      if (!bar.getAttribute("tabindex")) bar.setAttribute("tabindex", "0");
+      if (!bar.getAttribute("aria-label")) bar.setAttribute("aria-label", "拖动调整面板大小");
+      if (!$("." + PREFIX + "-splitter__bar-handle", bar)) {
+        var h = doc.createElement("span");
+        h.className = PREFIX + "-splitter__bar-handle";
+        bar.appendChild(h);
+      }
+
+      function apply(pct, silent) {
+        current = clamp(pct, min, max);
+        pane.style.setProperty("--fanui-splitter-size", current + "%");
+        bar.setAttribute("aria-valuenow", String(Math.round(current)));
+        bar.setAttribute("aria-valuemin", String(min));
+        bar.setAttribute("aria-valuemax", String(max));
+        if (!silent) emit("fanui:splitter:change", { el: el, percent: current });
+      }
+
+      var dragging = false;
+      function onDown(e) {
+        dragging = true;
+        el.classList.add("is-resizing");
+        bar.classList.add("is-active");
+        if (bar.setPointerCapture && e.pointerId != null) bar.setPointerCapture(e.pointerId);
+        e.preventDefault();
+      }
+      function onMove(e) {
+        if (!dragging) return;
+        var rect = el.getBoundingClientRect();
+        var pct = vertical
+          ? ((e.clientY - rect.top) / rect.height) * 100
+          : ((e.clientX - rect.left) / rect.width) * 100;
+        apply(pct);
+      }
+      function onUp() {
+        if (!dragging) return;
+        dragging = false;
+        el.classList.remove("is-resizing");
+        bar.classList.remove("is-active");
+      }
+      on(bar, "pointerdown", onDown);
+      on(bar, "pointermove", onMove);
+      on(bar, "pointerup", onUp);
+      on(bar, "pointercancel", onUp);
+      on(bar, "dblclick", function () { apply(50); });
+
+      // 键盘可达：方向键 2% 步进，Home/End 到极值
+      on(bar, "keydown", function (e) {
+        var back = vertical ? "ArrowUp" : "ArrowLeft";
+        var fwd = vertical ? "ArrowDown" : "ArrowRight";
+        var step = e.shiftKey ? 10 : 2;
+        if (e.key === back) { apply(current - step); e.preventDefault(); }
+        else if (e.key === fwd) { apply(current + step); e.preventDefault(); }
+        else if (e.key === "Home") { apply(min); e.preventDefault(); }
+        else if (e.key === "End") { apply(max); e.preventDefault(); }
+        else if (e.key === "Enter") { apply(50); e.preventDefault(); }
+      });
+
+      apply(current, true);
+
+      var api = {
+        get: function () { return current; },
+        set: function (pct) { apply(pct); return current; },
+        destroy: function () {
+          ["pointerdown", "pointermove", "pointerup", "pointercancel", "dblclick", "keydown"]
+            .forEach(function (t) { bar.removeEventListener(t, onDown); });
+          delete el.__fanuiSplitter;
+          Splitter._list = Splitter._list.filter(function (x) { return x !== api; });
+        },
+        el: el
+      };
+      el.__fanuiSplitter = api;
+      Splitter._list.push(api);
+      return api;
+    },
+    init: function (scope) {
+      $$("[data-fanui-splitter]", scope).forEach(function (el) { Splitter.create(el); });
+    }
+  };
+
+  /* ---- 14.6 吸顶 Affix ---------------------------------------------------- */
+  var Affix = {
+    _list: [],
+    create: function (target, options) {
+      var el = typeof target === "string" ? $(target) : target;
+      if (!el) return null;
+      if (el.__fanuiAffix) return el.__fanuiAffix;
+      var opts = options || {};
+      var offsetTop = num(opts.offsetTop != null ? opts.offsetTop : el.getAttribute("data-fanui-affix-offset"), 0);
+      var scroller = opts.target || (el.getAttribute("data-fanui-affix-target") ? $(el.getAttribute("data-fanui-affix-target")) : null);
+
+      var ph = doc.createElement("div");
+      ph.className = PREFIX + "-affix__placeholder";
+      ph.setAttribute("aria-hidden", "true");
+      if (el.parentNode) el.parentNode.insertBefore(ph, el);
+
+      var ticking = false;
+      function update() {
+        ticking = false;
+        var rect = ph.getBoundingClientRect();
+        var containerTop = 0;
+        if (scroller) containerTop = scroller.getBoundingClientRect().top;
+        var shouldFix = rect.top - offsetTop <= containerTop;
+        var bottomLimit = null;
+        if (scroller) {
+          var cr = scroller.getBoundingClientRect();
+          bottomLimit = cr.bottom - el.offsetHeight;
+        } else {
+          var docEl = doc.documentElement;
+          bottomLimit = global.innerHeight - el.offsetHeight;
+          if (docEl.scrollHeight - (global.pageYOffset + el.offsetHeight) < 0) bottomLimit = -9999;
+        }
+        if (shouldFix) {
+          ph.style.height = el.offsetHeight + "px";
+          el.classList.add(PREFIX + "-affix__inner", "is-affixed");
+          el.style.width = ph.offsetWidth + "px";
+          el.style.top = offsetTop + "px";
+          if (bottomLimit != null && rect.top - offsetTop > bottomLimit - containerTop) {
+            el.classList.add("is-affixed-bottom");
+            el.style.top = (bottomLimit - ph.offsetHeight + offsetTop) + "px";
+          } else {
+            el.classList.remove("is-affixed-bottom");
+          }
+        } else {
+          el.classList.remove("is-affixed", "is-affixed-bottom");
+          el.style.top = "";
+          el.style.width = "";
+          ph.style.height = "";
+        }
+      }
+      function request() {
+        if (ticking) return;
+        ticking = true;
+        global.requestAnimationFrame(update);
+      }
+      var host = scroller || global;
+      on(host, "scroll", request, { passive: true });
+      on(global, "resize", request);
+      update();
+
+      var api = {
+        update: update,
+        destroy: function () {
+          host.removeEventListener("scroll", request, { passive: true });
+          global.removeEventListener("resize", request);
+          if (ph.parentNode) ph.parentNode.removeChild(ph);
+          el.classList.remove(PREFIX + "-affix__inner", "is-affixed", "is-affixed-bottom");
+          el.style.top = ""; el.style.width = "";
+          delete el.__fanuiAffix;
+          Affix._list = Affix._list.filter(function (x) { return x !== api; });
+        },
+        el: el
+      };
+      el.__fanuiAffix = api;
+      Affix._list.push(api);
+      return api;
+    },
+    init: function (scope) {
+      $$("[data-fanui-affix]", scope).forEach(function (el) { Affix.create(el); });
+    },
+    updateAll: function () { Affix._list.forEach(function (a) { a.update(); }); }
+  };
+
+  /* ---- 14.7 回到顶部 BackTop ---------------------------------------------- */
+  var BackTop = {
+    _list: [],
+    create: function (target, options) {
+      var opts = options || {};
+      var host = target ? (typeof target === "string" ? $(target) : target) : null;
+      var scroller = opts.container || (host && host.getAttribute("data-fanui-backtop-container")
+        ? $(host.getAttribute("data-fanui-backtop-container")) : null);
+      var threshold = num(opts.offset != null ? opts.offset
+        : (host && host.getAttribute("data-fanui-backtop-offset")), 320);
+      var duration = num(opts.duration, 420);
+
+      // 未给宿主就自动创建一个按钮；给了就把已有元素当按钮用
+      var btn = host;
+      if (!btn) {
+        btn = doc.createElement("button");
+        btn.type = "button";
+        btn.className = PREFIX + "-backtop is-with-ring";
+        btn.setAttribute("data-fanui-backtop", "");
+        btn.setAttribute("aria-label", "回到顶部");
+        doc.body.appendChild(btn);
+      } else {
+        if (btn.tagName !== "BUTTON") btn.setAttribute("role", "button");
+        if (!btn.getAttribute("aria-label")) btn.setAttribute("aria-label", "回到顶部");
+      }
+      if (!$("." + PREFIX + "-backtop__icon", btn)) {
+        var ring = doc.createElement("span");
+        ring.className = PREFIX + "-backtop__ring";
+        var icon = doc.createElement("span");
+        icon.className = PREFIX + "-backtop__icon";
+        icon.textContent = "↑";
+        icon.setAttribute("aria-hidden", "true");
+        btn.appendChild(ring);
+        btn.appendChild(icon);
+      }
+
+      function metrics() {
+        if (scroller) {
+          return {
+            top: scroller.scrollTop,
+            max: Math.max(1, scroller.scrollHeight - scroller.clientHeight)
+          };
+        }
+        var d = doc.documentElement;
+        return {
+          top: global.pageYOffset || d.scrollTop || 0,
+          max: Math.max(1, (d.scrollHeight || 0) - global.innerHeight)
+        };
+      }
+      var ticking = false;
+      function update() {
+        ticking = false;
+        var m = metrics();
+        btn.classList.toggle("is-visible", m.top > threshold);
+        var pct = clamp((m.top / m.max) * 100, 0, 100);
+        btn.style.setProperty("--fanui-backtop-progress", pct.toFixed(1) + "%");
+      }
+      function request() {
+        if (ticking) return;
+        ticking = true;
+        global.requestAnimationFrame(update);
+      }
+      var sec = scroller || global;
+      on(sec, "scroll", request, { passive: true });
+      on(global, "resize", request);
+      update();
+
+      function smoothTo(top) {
+        var reduce = global.matchMedia && global.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        if (reduce || !sec.scrollTo) {
+          if (scroller) scroller.scrollTop = top; else global.scrollTo(0, top);
+          return;
+        }
+        sec.scrollTo({ top: top, behavior: "smooth" });
+      }
+
+      on(btn, "click", function () {
+        smoothTo(0);
+        emit("fanui:backtop:click", {});
+      });
+
+      var api = {
+        show: function () { btn.classList.add("is-visible"); },
+        hide: function () { btn.classList.remove("is-visible"); },
+        update: update,
+        destroy: function () {
+          sec.removeEventListener("scroll", request, { passive: true });
+          global.removeEventListener("resize", request);
+          if (!host && btn.parentNode) btn.parentNode.removeChild(btn);
+          BackTop._list = BackTop._list.filter(function (x) { return x !== api; });
+        },
+        el: btn
+      };
+      BackTop._list.push(api);
+      return api;
+    },
+    init: function (scope) {
+      $$("[data-fanui-backtop]", scope).forEach(function (el) { BackTop.create(el); });
+      // 无声明式元素时，若页面设置了 data-fanui-backtop-auto="true" 则自动创建一个
+      if (root.getAttribute("data-fanui-backtop-auto") === "true" && !BackTop._list.length) {
+        BackTop.create(null, {});
+      }
+    }
+  };
+
+  var registry = [
+    { init: Modal.init }, { init: Tabs.init }, { init: Dropdown.init },
+    { init: Collapse.init }, { init: Switch.init }, { init: Form.init },
+    { init: Command.init }, { init: Carousel.init }, { init: Rate.init },
+    { init: Tags.init }, { init: Stepper.init }, { init: Pin.init },
+    { init: Swatch.init }, { init: Upload.init }, { init: Combobox.init },
+    { init: Kanban.init }, { init: Notify.init }, { init: FilterBar.init },
+    { init: Copy.init },
+    { init: DatePicker.init }, { init: TimePicker.init }, { init: ColorPicker.init },
+    { init: Cascader.init }, { init: Tree.init }, { init: Transfer.init },
+    { init: VirtualList.init }, { init: Lightbox.init }, { init: Watermark.init },
+    { init: Splitter.init }, { init: Affix.init }, { init: BackTop.init },
+    { init: Tour.init },
+    { init: A11y.init }
+  ];
+
+  function init(scope) {
+    registry.forEach(function (mod) { mod.init(scope || doc); });
+    Scroll.init();
+    Scroll.reveal(scope || doc);
+    Counter.init(scope || doc);
+    Tracker.start();
+  }
+
+  /* ---- 启动 ---- */
+  Theme.restore();
+
+  // 声明式初始化：data-fanui-auto="false" 可关闭全局自动初始化
+  if (root.getAttribute("data-fanui-auto") !== "false") {
+    if (doc.readyState === "loading") on(doc, "DOMContentLoaded", function () { init(doc); });
+    else init(doc);
+  }
+
+  // 声明式涟漪
+  on(doc, "click", function (e) {
+    var host = e.target.closest && e.target.closest("[data-fanui-ripple]");
+    if (host) ripple(host, e);
+  });
+
+  // 跟随系统模式：监听系统主题变化
+  if (global.matchMedia) {
+    try {
+      global.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function () {
+        if (Theme.getMode() === "auto") syncMetaThemeColor();
+      });
+    } catch (e) { /* 旧版 Safari */ }
+  }
+
+  // 可滚动区域的可达性复检：首屏渲染后（字体/图片到位）与视口变化时
+  // 溢出状态可能变化，需要重新标记一次。幂等，重复调用无副作用。
+  if (root.getAttribute("data-fanui-auto") !== "false") {
+    on(global, "load", function () { A11y.focusableScrollables(doc); });
+    var _a11yT = null;
+    on(global, "resize", function () {
+      if (_a11yT) global.clearTimeout(_a11yT);
+      _a11yT = global.setTimeout(function () {
+        A11y.focusableScrollables(doc);
+        // 视口变化后虚拟列表 / 吸顶的可见区间会变，需重算
+        VirtualList.refreshAll();
+        Affix.updateAll();
+      }, 200);
+    });
+  }
+
+  /* ==========================================================================
+   * 15. 导出
+   * ======================================================================== */
+
+  global.FanUI = {
+    version: VERSION,
+    prefix: PREFIX,
+    isServer: false,
+    serverRenderable: true,
+    ssr: SSR,
+    theme: Theme,
+    studio: Studio,
+    modal: Modal,
+    overlay: function (sel, opts) { return new Overlay(sel, opts); },
+    toast: Toast,
+    tabs: Tabs,
+    dropdown: Dropdown,
+    collapse: Collapse,
+    form: Form,
+    switch: Switch,
+    command: asFactory(Command, function (target, options) { return Command.create(target, options); }),
+    carousel: Carousel,
+    rate: Rate,
+    tags: Tags,
+    stepper: Stepper,
+    pin: Pin,
+    swatch: Swatch,
+    upload: Upload,
+    combobox: Combobox,
+    kanban: Kanban,
+    notify: Notify,
+    filterBar: FilterBar,
+    loadingBar: LoadingBar,
+    datePicker: asFactory(DatePicker, function (target, options) { return DatePicker.attach(target, options); }),
+    timePicker: asFactory(TimePicker, function (target, options) { return TimePicker.attach(target, options); }),
+    colorPicker: asFactory(ColorPicker, function (target, options) { return ColorPicker.attach(target, options); }),
+    cascader: asFactory(Cascader, function (target, options) { return Cascader.attach(target, options); }),
+    tree: asFactory(Tree, function (target, options) { return Tree.attach(target, options); }),
+    transfer: asFactory(Transfer, function (target, options) { return Transfer.attach(target, options); }),
+    virtualList: asFactory(VirtualList, function (target, options) { return VirtualList.create(target, options); }),
+    lightbox: Lightbox,
+    watermark: Watermark,
+    tour: Tour,
+    splitter: asFactory(Splitter, function (target, options) { return Splitter.create(target, options); }),
+    affix: asFactory(Affix, function (target, options) { return Affix.create(target, options); }),
+    backTop: asFactory(BackTop, function (target, options) { return BackTop.create(target, options); }),
+    a11y: A11y,
+    i18n: I18N,
+    format: Format,
+    scroll: Scroll,
+    counter: Counter,
+    ripple: ripple,
+    copy: Copy,
+    track: Tracker,
+    lockScroll: lockScroll,
+    unlockScroll: unlockScroll,
+    init: init,
+    $: $,
+    $$: $$
+  };
+})(typeof window !== "undefined" ? window : typeof globalThis !== "undefined" ? globalThis : this);