agentcss 0.0.0-stage → 0.11.2

package/02-primitives/combobox/combobox.js

@@ -0,0 +1,485 @@
+/**
+ * combobox.js — 组合框 / 标签输入（E2 /
+ *
+ * 依据：APG Combobox with List Autocomplete
+ * ============================================================================
+ * ⭐ 三条最容易漏的：
+ *
+ * ① **焦点管理**：焦点**始终在 input 上**（不是选项上），
+ *    靠 aria-activedescendant 告知读屏"当前在第几项"。
+ *    ⇒ 这与「roving tabindex」（树）的做法**正好相反**。
+ *    ⇒ 用错会出现"点选项后输入框失焦，打字没反应"。
+ *
+ * ② **Backspace 删标签**：光标在空输入框时按 Backspace ⇒ 删最后一个标签。
+ *    ⇒ 这是标签输入的事实标准交互，缺了很别扭。
+ *
+ * ③ **Enter 加标签**：输入框有文字时按 Enter ⇒ 把当前高亮项加为标签并清空输入。
+ *
+ * 无依赖 · ES5
+ */
+(function (global) {
+  'use strict';
+  /* ==== BEHAVIOR INJECT BEGIN: dismissable ==== */
+  var flDismissable = function (opts) {
+    var opt = opts || {};
+    var escOn = opt.escOn || [];
+    var inside = opt.inside || [];
+    var when = opt.when || function () { return true; };
+    var onDismiss = opt.onDismiss || function () {};
+
+    var shared = window.__flDismiss || (window.__flDismiss = { stack: [], bound: false });
+
+    function isInside(node) {
+      if (!node) return false;
+      for (var i = 0; i < inside.length; i++) {
+        var el = inside[i];
+        if (!el || !el.contains) continue;
+        if (el === node || el.contains(node)) return true;
+      }
+      return false;
+    }
+
+    function onKey(e) {
+      if (!when()) return;
+      var k = e.key;
+      if (k !== 'Escape' && k !== 'Esc' && e.keyCode !== 27) return;
+      /* 🔴 为什么 onDismiss 在前、preventDefault/stopPropagation 在后
+         （0.8.8 改）：**分级 Esc** 需要核让组件有机会说"这次我没关"。
+         combobox 的 Esc 是三级的：
+           ① 列表开着 → 关列表
+           ② 列表关了、输入有字 → 清空输入
+           ③ 都没了 → 什么都不做（此时**不该**阻止默认行为，
+              让 Esc 能继续传给外层浮层）
+         而原实现是「无条件 preventDefault + stopPropagation，再调 onDismiss」
+         ⇒ 组件根本无法表达"这次我没关"。
+         ⇒ 改成：先问onDismiss，它返回 false 就**不干预**默认行为。
+         ⚠️ 顺序安全性：stopPropagation 只需在**本次监听器执行期间**被调用即可
+            阻止冒泡到外层，放在 onDismiss 之后仍然有效。
+      */
+      var closed = onDismiss(e, 'esc');
+      if (closed === false) return;
+      if (e.preventDefault) e.preventDefault();
+      if (e.stopPropagation) e.stopPropagation();
+    }
+
+    function onDocClick(e) {
+      var top = null;
+      for (var i = shared.stack.length - 1; i >= 0; i--) {
+        if (shared.stack[i].when()) { top = shared.stack[i]; break; }
+      }
+      if (!top || top.isInside(e.target)) return;
+      top.onDismiss(e, 'outside');
+    }
+
+    var rec = { when: when, isInside: isInside, onDismiss: onDismiss };
+
+    for (var j = 0; j < escOn.length; j++) {
+      if (escOn[j]) escOn[j].addEventListener('keydown', onKey);
+    }
+    shared.stack.push(rec);
+    if (!shared.bound) {
+      shared.bound = true;
+      document.addEventListener('click', onDocClick, true);
+    }
+
+    return {
+      destroy: function () {
+        for (var j = 0; j < escOn.length; j++) {
+          if (escOn[j]) escOn[j].removeEventListener('keydown', onKey);
+        }
+        var k = shared.stack.indexOf(rec);
+        if (k >= 0) shared.stack.splice(k, 1);
+      },
+    };
+  };
+  /* ==== BEHAVIOR INJECT END: dismissable ==== */
+  /* ==== BEHAVIOR INJECT BEGIN: emit ==== */
+  var flEmit = function (el, name, detail) {
+    if (!el || !el.dispatchEvent) return null;
+    var type = name.indexOf('fl-') === 0 ? name : 'fl-' + name;
+    var ev = null;
+    /* 老 WebView 没有 CustomEvent 构造函数 ⇒ 兜底走 createEvent（理由见文件头）*/
+    if (typeof window.CustomEvent === 'function') {
+      try {
+        ev = new window.CustomEvent(type, {
+          detail: detail || null, bubbles: true, cancelable: false
+        });
+      } catch (e) { ev = null; }
+    }
+    if (!ev) {
+      try {
+        ev = document.createEvent('CustomEvent');
+        ev.initCustomEvent(type, true, false, detail || null);
+      } catch (e2) { return null; }
+    }
+    el.dispatchEvent(ev);
+    return ev;
+  };
+  /* ==== BEHAVIOR INJECT END: emit ==== */
+  /* ---- 旧环境兼容：Element.closest 在老 WebView 上不存在 ----
+     直接调用会在真机上抛 `is not a function`（本地完全正常，
+     只在老环境炸 —— 属静默失效）。这里做模块内兜底，
+     不污染全局，也不需要使用者额外引入 polyfill。 */
+  function closest(el, sel) {
+    if (!el) return null;
+    if (el.closest) return el.closest(sel);
+    while (el && el.nodeType === 1) {
+      if (elMatches(el, sel)) return el;
+      el = el.parentElement;
+    }
+    return null;
+  }
+  function elMatches(el, sel) {
+    var m = sel.match(/^([a-zA-Z][\w-]*)/);
+    if (m && el.tagName.toLowerCase() !== m[1].toLowerCase()) return false;
+    var cls = sel.match(/\.([\w-]+)/g);
+    if (cls) {
+      for (var i = 0; i < cls.length; i++) {
+        var c = cls[i].slice(1);
+        if ((' ' + (el.className || '') + ' ').indexOf(' ' + c + ' ') < 0) return false;
+      }
+    }
+    var id = sel.match(/#([\w-]+)/);
+    if (id && el.id !== id[1]) return false;
+    var at = sel.match(/\[([\w-]+)(?:=["']?([^\]"']*)["']?)?\]/);
+    if (at) {
+      var v = el.getAttribute(at[1]);
+      if (v === null) return false;
+      if (at[2] !== undefined && v !== at[2]) return false;
+    }
+    return true;
+  }
+
+  var uid = 0;
+
+  function create(root, opt) {
+    opt = opt || {};
+    var input = root.querySelector('[data-combo-input]');
+    var list = root.querySelector('[data-combo-list]');
+    var tagBox = root.querySelector('[data-combo-tags]');
+    if (!input || !list) throw new Error('Combobox: 缺少 [data-combo-input] 或 [data-combo-list]');
+
+    /* 「关得掉」核（0.8.8 收编）。
+       🔴 本组件的 Esc 是**分级**的，核原，表达不了（见 onDismiss）：
+         ① 列表开着 → 关列表（核接管）
+         ② 列表已关、输入有字 → 清空输入（核接管）
+         ③ 都没了 → **不关**，返回 false 让核不干预默认行为
+            （此时 Esc 该继续传给外层浮层，而不是被吃掉）
+       ⇒ 0.8.8 给核加了返回值语义：onDismiss 返回 false ⇒ 核不抢preventDefault。 */
+    var dismiss = flDismissable({
+      escOn: [input],
+      inside: [root],
+      when: function () { return true; },   /* 三级 Esc 都要响应，见下 */
+      onDismiss: function (ev, reason) {
+        if (reason === 'outside') { close(); return true; }
+        /* Esc：按「列表 → 输入 → 放弃」的顺序处理 */
+        if (!list.hidden) { close(); return true; }
+        if (input.value) { input.value = ''; paintList(); return true; }
+        return false;/* ③ 什么都不做 ⇒ 核不干预，Esc 继续往外传 */
+      }
+    });
+    if (!list.id) list.id = 'combo-list-' + (++uid);
+
+    /* 🔴 每个实例进来就领一个序号：
+       以前只在 `!list.id` 时递增 ⇒ 调用方给了 list id 时多个实例共用一个号。 */
+    var seq = ++uid;
+
+    var ALL = opt.options || [];              /* [{value, label}] */
+    var tags = [];                            /* 已选 */
+    var activeIdx = -1;
+    var shown = [];                           /* 当前过滤后的选项 */
+
+    list.setAttribute('role', 'listbox');
+    list.setAttribute('aria-label', opt.label || '建议');
+    input.setAttribute('role', 'combobox');
+    input.setAttribute('aria-autocomplete', 'list');
+    input.setAttribute('aria-expanded', 'false');
+    input.setAttribute('aria-controls', list.id);
+    if (!input.id) input.id = 'combo-input-' + seq;
+    if (!input.getAttribute('aria-label') && !root.querySelector('label[for="' + input.id + '"]')) {
+      input.setAttribute('aria-label', opt.label || '输入');
+    }
+
+    /* ---------- 过滤（含高亮命中片段）---------- */
+    function esc(s) {
+      return String(s).replace(/[&<>"]/g, function (c) {
+        return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c];
+      });
+    }
+    /**
+     * 候选项过滤。
+     *
+     * 若调用方提供了 `filter`，就用它（自定义匹配逻辑：拼音、模糊、分组…）。
+     * 否则退回默认的标签/值子串匹配。
+     *
+     * ⚠️ 自定义函数必须**同步返回布尔值**。它会被逐项调用，
+     *    所以不要在里面做异步过滤。
+     */
+    function filter(q) {
+      q = (q || '').trim().toLowerCase();
+      if (!q) return ALL.slice();
+      if (typeof opt.filter === 'function') {
+        return ALL.filter(function (o) {
+          return !!opt.filter(q, o);
+        });
+      }
+      return ALL.filter(function (o) {
+        return (o.label || '').toLowerCase().indexOf(q) >= 0 ||
+               (o.value || '').toLowerCase().indexOf(q) >= 0;
+      });
+    }
+    function paintList() {
+      var q = input.value.trim();
+      shown = filter(q).slice(0, 50);
+      if (!shown.length) {
+        list.innerHTML = '<li class="combo__empty" role="presentation">' +
+          (q ? '没有匹配「' + esc(q) + '」的选项' : '暂无可选') + '</li>';
+        return;
+      }
+      var ql = q.toLowerCase();
+      list.innerHTML = shown.map(function (o, i) {
+        var picked = tags.indexOf(o.value) >= 0;
+        var label = esc(o.label);
+        /* ⭐ 高亮命中片段：让用户知道**为什么**这条匹配 */
+        if (ql) {
+          var raw = o.label, k = raw.toLowerCase().indexOf(ql);
+          if (k >= 0) {
+            label = esc(raw.slice(0, k)) + '<mark>' + esc(raw.slice(k, k + q.length)) +
+                    '</mark>' + esc(raw.slice(k + q.length));
+          }
+        }
+        /* ⭐ 必须真写出来：`setActive()` 在读它，读屏也需要它*/
+        return '<li class="combo__opt" role="option" id="' + list.id + '-o' + i + '"' +
+               ' data-value="' + esc(o.value) + '"' +
+               ' aria-selected="' + (picked ? 'true' : 'false') + '"' +
+               (o.disabled ? ' aria-disabled="true"' : '') + '>' +
+               '<span class="combo__opt-text">' + label + '</span></li>';
+      }).join('');
+      activeIdx = -1;
+    }
+
+    /* ---------- 标签 ---------- */
+    function paintTags() {
+      if (!tagBox) return;
+      tagBox.innerHTML = tags.map(function (v) {
+        var o = ALL.filter(function (x) { return x.value === v; })[0] || { label: v };
+        /* ⭐ 删除按钮有 aria-label（否则读屏只念"×"）*/
+        return '<span class="combo__tag">' +
+               '<span class="combo__tag-text">' + esc(o.label) + '</span>' +
+               '<button class="combo__tag-del" type="button" data-del="' + esc(v) + '"' +
+               ' aria-label="移除 ' + esc(o.label) + '">×</button></span>';
+      }).join('');
+      var hidden = root.querySelector('input[type="hidden"]');
+      if (hidden) hidden.value = tags.join(',');
+      flEmit(root, 'fl-change', { value: tags.slice() });
+      if (opt.onChange) opt.onChange(tags.slice());
+    }
+    function isDisabled(v) {
+      for (var i = 0; i < ALL.length; i++) {
+        if (ALL[i].value === v) return !!ALL[i].disabled;
+      }
+      return false;
+    }
+
+    /* ⭐ max 的**唯一入口**：点击 / Enter / 公开 add 全走这里。
+       以前只在 commitActive 里"加完发现满了才关列表" ⇒ 另外两条路能绕过。 */
+    function addTag(v) {
+      if (v == null || v === '') return false;
+      if (isDisabled(v)) return false;                       /* 禁用项 */
+      if (tags.indexOf(v) >= 0) return false;                /* 不重复 */
+      if (opt.max && tags.length >= opt.max) return false;    /* 🔴 上限 */
+      tags.push(v);
+      paintTags();
+      return true;
+    }
+    function removeTag(v) {
+      var i = tags.indexOf(v);
+      if (i < 0) return false;
+      tags.splice(i, 1);
+      paintTags();
+      return true;
+    }
+
+    /* ---------- 游标 ---------- */
+    function opts() {
+      return [].slice.call(list.querySelectorAll('[role="option"]'));
+    }
+    function setActive(i, dir) {
+      var os = opts();
+      if (!os.length) { activeIdx = -1; input.removeAttribute('aria-activedescendant'); return; }
+      dir = dir || 1;
+      var n = os.length;
+      var idx = ((i % n) + n) % n;
+      /* 🔴 全禁用时不许落在禁用项上：
+         以前跑满 n 次无条件 break，停哪算哪。APG：没有可选项 ⇒ 没有"当前项"。 */
+      var found = false;
+      for (var k = 0; k < n; k++) {
+        if (os[idx].getAttribute('aria-disabled') !== 'true') { found = true; break; }
+        idx = ((idx + dir) % n + n) % n;
+      }
+      if (!found) {
+        activeIdx = -1;
+        os.forEach(function (o) { o.removeAttribute('data-state'); });
+        input.removeAttribute('aria-activedescendant');
+        return;
+      }
+      activeIdx = idx;
+      os.forEach(function (o) { o.removeAttribute('data-state'); });
+      os[idx].setAttribute('data-state', 'active');
+      /* ⭐ 焦点留在 input 上，靠 aria-activedescendant 告知读屏 */
+      input.setAttribute('aria-activedescendant', os[idx].id);
+      if (os[idx].scrollIntoView) os[idx].scrollIntoView({ block: 'nearest' });
+    }
+    function open() {
+      paintList();
+      list.hidden = false;
+      input.setAttribute('aria-expanded', 'true');
+    }
+    function close() {
+      list.hidden = true;
+      input.setAttribute('aria-expanded', 'false');
+      activeIdx = -1;
+      input.removeAttribute('aria-activedescendant');
+    }
+    function commitActive() {
+      if (activeIdx < 0) return false;
+      var o = opts()[activeIdx];
+      if (!o) return false;
+      var v = o.getAttribute('data-value');
+      var ok = addTag(v);
+      input.value = '';
+      paintList();
+      /* 标签满时保持列表开着（还能继续加），否则关掉 */
+      if (opt.max && tags.length >= opt.max) close();
+      return ok;
+    }
+
+    /* ---------- 键盘（焦点常驻 input）----------
+       ⭐ 具名函数：`destroy()` 要按同一个引用摘除，匿名的摘不掉。 */
+    function onKeydown(e) {
+      var k = e.key;
+
+      /* ↑↓ 在建议间移动 */
+      if (k === 'ArrowDown' || k === 'ArrowUp') {
+        e.preventDefault();
+        if (list.hidden) { open(); return; }
+        var dir = k === 'ArrowDown' ? 1 : -1;
+        var base = activeIdx >= 0 ? activeIdx : (dir > 0 ? -1 : opts().length);
+        setActive(base + dir, dir);
+        return;
+      }
+      /* Enter：加当前高亮项；没有高亮则加"输入的文字" */
+      if (k === 'Enter') {
+        if (list.hidden) return;
+        e.preventDefault();
+        if (activeIdx >= 0) { commitActive(); return; }
+        /* 没有高亮 ⇒ 精确匹配一个 */
+        var q = input.value.trim();
+        var hit = shown.filter(function (o) {
+          return (o.label || '').toLowerCase() === q.toLowerCase() ||
+                 (o.value || '').toLowerCase() === q.toLowerCase();
+        })[0];
+        if (hit) { addTag(hit.value); input.value = ''; paintList(); }
+        return;
+      }
+      /* Esc 已由 dismissable 核接管（见 create 里的 flDismissable）。
+         核按onDismiss 的返回值决定要不要 preventDefault/stopPropagation，
+         所以三级 Esc（关列表 / 清输入 / 放弃）能正确区分。 */
+      /* ② Backspace：空输入时删最后一个标签 */
+      if (k === 'Backspace' && !input.value && tags.length) {
+        e.preventDefault();
+        removeTag(tags[tags.length - 1]);
+        return;
+      }
+      /* 逗号/顿号也算"确认"（中文用户习惯）*/
+      if ((k === ',' || k === '，') && input.value.trim()) {
+        e.preventDefault();
+        var q2 = input.value.trim();
+        var h2 = shown.filter(function (o) {
+          return (o.label || '').indexOf(q2) >= 0 || (o.value || '').indexOf(q2) >= 0;
+        })[0];
+        if (h2) { addTag(h2.value); input.value = ''; paintList(); }
+        return;
+      }
+      if (k === 'Home' && !list.hidden) { e.preventDefault(); setActive(0, 1); return; }
+      if (k === 'End' && !list.hidden) { e.preventDefault(); setActive(opts().length - 1, -1); return; }
+    }
+
+    function onInput() { open(); }
+    function onFocus() { open(); }
+    function onClick() { open(); }
+
+    /* ---------- 标签删除 ---------- */
+    function onTagClick(e) {
+      /* 🔴 原来是 `e.target.closest ? closest(...) : null` ⇒ 没有原生 closest
+         时直接返回 null，兜底永远跑不到。直接调，它内部自己判。 */
+      var b = closest(e.target, '[data-del]');
+      if (!b) return;
+      removeTag(b.getAttribute('data-del'));
+      input.focus();                      /* 删除后焦点回输入框 */
+    }
+
+    /* ---------- 点选项 ---------- */
+    function onListClick(e) {
+      var o = closest(e.target, '[role="option"]');
+      if (!o) return;
+      addTag(o.getAttribute('data-value'));
+      input.value = '';
+      paintList();
+      input.focus();
+    }
+    input.addEventListener('keydown', onKeydown);
+    input.addEventListener('input', onInput);
+    input.addEventListener('focus', onFocus);
+    input.addEventListener('click', onClick);
+    if (tagBox) tagBox.addEventListener('click', onTagClick);
+    list.addEventListener('click', onListClick);
+    /* 点外部关闭已由 dismissable 核接管（document 捕获阶段判定 + 自动摘除）。 */
+
+    /* 🔴 禁用态同步：CSS 不用 :has()（ES6+ 兼容问题，见 combobox.css 注释）
+       ⇒ 由这里根据 input.disabled 给容器加 class。 */
+    function syncDisabled() {
+      var field = root.querySelector('.combo__field') ||
+                  input.parentElement;
+      if (!field) return;
+      if (input.disabled) field.setAttribute('data-state', 'disabled');
+      else field.removeAttribute('data-state');
+    }
+    input.addEventListener('change', syncDisabled);
+    syncDisabled();
+
+    /* ---------- 销毁----------
+       以前没有 destroy，而上面注册了 document 级监听 ⇒ 实例没了监听还在。
+       ⇒ 具名注册（见上）+ 这里逐个摘除；**幂等**（重复调用不抛）。 */
+    var destroyed = false;
+    function destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      input.removeEventListener('keydown', onKeydown);
+      input.removeEventListener('input', onInput);
+      input.removeEventListener('focus', onFocus);
+      input.removeEventListener('click', onClick);
+      input.removeEventListener('change', syncDisabled);
+      if (tagBox) tagBox.removeEventListener('click', onTagClick);
+   list.removeEventListener('click', onListClick);
+      /* 🔴 0.8.8 修一个真 bug（门禁 combobox-inst 当场抓到）：
+         收编 dismissable 核时我把 `onDocClick` 的**定义**删了，
+         却漏了这里的手动摘除 ⇒ `destroy()` 一调就抛
+         「onDocClick is not defined」⇒ 实例销毁路径直接崩。
+      ⇒ 正确做法是调**核的** destroy()，它自己会摘 document 监听
+         并且把自己从共享栈里移除。 */
+      dismiss.destroy();
+      close();
+    }
+
+    paintTags();
+    return {
+      get tags() { return tags.slice(); },
+      add: addTag, remove: removeTag,
+      setOptions: function (o) { ALL = o || []; paintList(); },
+      destroy: destroy,
+    };
+  }
+
+  global.Combobox = { create: create };
+})(window);

package/02-primitives/combobox/demo.html

@@ -0,0 +1,109 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="icon" href="data:,">
+<title>combobox · 组合框 · frontend-lib</title>
+<link rel="stylesheet" href="../../01-tokens/tokens.css">
+<link rel="stylesheet" href="../../01-tokens/typography.css">
+<link rel="stylesheet" href="../../01-tokens/focus-ring.css">
+<link rel="stylesheet" href="../../01-tokens/page.css">
+<link rel="stylesheet" href="combobox.css">
+<style>
+.pad { padding: var(--sp-3) 0 var(--sp-6); }
+label.f { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-sm); }
+.log {
+    margin-top: var(--sp-3); padding: var(--sp-3);
+    background: var(--surface-sunken); border-radius: var(--r-sm);
+    font-family: var(--mono); font-size: var(--fs-xs);
+    color: var(--text-secondary); min-height: 2.8em;
+  }
+</style>
+</head>
+<body class="page page">
+<main class="wrap">
+
+<h1>combobox · 组合框 / 标签输入</h1>
+<p class="note">
+  依据 <strong>APG Combobox with List Autocomplete</strong>。三条最容易漏：
+  <br>① <strong>焦点始终在 input 上</strong>（靠 <code>aria-activedescendant</code> 告知读屏）
+  —— ⚠️ 与树（roving tabindex）<strong>正好相反</strong>，用错会出现"点选项后输入框失焦"
+  <br>② <code>Backspace</code> 在空输入时删最后一个标签
+  <br>③ <code>Enter</code> 加当前高亮项
+  <br>另：命中片段会<strong>高亮</strong>，让你知道为什么这条匹配
+</p>
+
+<h2>1 · 板块多选（最多 3 个）</h2>
+<div class="pad">
+  <label class="f" for="cb1">关注板块</label>
+  <div class="combo" id="c1">
+    <div class="combo__field">
+      <div class="combo__tags" data-combo-tags></div>
+      <!-- 🔴 input 必须在 .combo__field **内部**（:focus-within 才生效）；
+           放在外面会变成兄弟节点 ⇒ 焦点环永远不出现。 -->
+      <!-- 🔴 补 id：label for="cb1" 之前指向一个**不存在的元素**
+           ⇒ 点标签聚焦不到输入框，读屏也关联不上（WCAG 1.3.1 / 4.1.2） -->
+      <input class="combo__input" data-combo-input type="text" id="cb1"
+             placeholder="输入后回车添加，或用逗号分隔" autocomplete="off">
+    </div>
+    <ul class="combo__list" data-combo-list hidden></ul>
+    <input type="hidden" name="sectors">
+  </div>
+  <div class="log" id="log">（已选标签会显示在这里，也会写进 hidden input）</div>
+</div>
+
+<h2>2 · 单个（可清除）</h2>
+<div class="pad">
+  <label class="f" for="cb2">对标公司</label>
+  <div class="combo" id="c2">
+    <div class="combo__field">
+      <div class="combo__tags" data-combo-tags></div>
+      <input class="combo__input" data-combo-input type="text"
+             placeholder="输入公司名" autocomplete="off" id="cb2">
+    </div>
+    <ul class="combo__list" data-combo-list hidden></ul>
+  </div>
+</div>
+
+</main>
+
+<script src="combobox.js"></script>
+<script>
+(function () {
+  var log = document.getElementById('log');
+  var SECTORS = [
+    { value: 'semi',  label: '半导体' },
+    { value: 'ai',    label: '人工智能' },
+    { value: 'newenergy', label: '新能源' },
+    { value: 'pharma', label: '医药生物' },
+    { value: 'consume', label: '消费' },
+    { value: 'finance', label: '金融' },
+    { value: 'ai2',   label: 'AI 智能驾驶' },
+  ];
+  var FIRMS = [
+    { value: '600519', label: '贵州茅台' },
+    { value: '300750', label: '宁德时代' },
+    { value: '002594', label: '比亚迪' },
+    { value: '601318', label: '招商银行' },
+    { value: '000333', label: '美的集团' },
+  ];
+
+  /* 🔴 挂到 window：给契约脚本当探针用
+     （否则契约没法直接调 add/remove 验证"不重复添加"这类逻辑） */
+  window.__cb1 = Combobox.create(document.getElementById('c1'), {
+    label: '关注板块', options: SECTORS, max: 3,
+    onChange: function (t) {
+      var hidden = document.querySelector('#c1 input[type=hidden]');
+      log.textContent = '已选 ' + t.length + ' 个：' + t.join(', ') +
+                        '   hidden=' + (hidden ? hidden.value : '(无)');
+    },
+  });
+
+  Combobox.create(document.getElementById('c2'), {
+    label: '对标公司', options: FIRMS, max: 1,
+  });
+})();
+</script>
+</body>
+</html>