diff --git a/CAPABILITY.md b/CAPABILITY.md
index 8903ed7..c22626a 100644
--- a/CAPABILITY.md
+++ b/CAPABILITY.md
@@ -250,6 +250,8 @@
 - **`collapsible`** (Boolean): 仅在 `tree` 模式下有效，开启树形节点的展开/收起能力。
 - **`auto-select`** (Boolean): 开启后，点击列表项时自动将该项的 `id` 记录至 `state.selectedItem`，如果重复点击则会置空。
 - **`auto-select-group`** (Boolean): 开启后，点击分组时自动将分组的 `id` 记录至 `state.selectedGroup`。
+- **`filter`** (String): 筛选关键字。支持通过 attribute 传入以自动同步至 `state.filter`。
+- **`order`** (String): 排序规则。支持通过 attribute 传入以自动同步至 `state.order`。
 
 ### 4. 内部状态模型 (`State`)
 - `list` (读写): 原始列表数据数组。
@@ -257,6 +259,8 @@
 - `collapsed` (读写): 仅在 `tree` 且 `collapsible` 时使用，存储节点 ID 折叠状态的 Map Proxy。
 - `selectedItem` (读写): 当前选中的列表项 ID。
 - `selectedGroup` (读写): 当前选中的分组 ID。
+- `filter` (读写): 筛选关键字（进行 label 和 summary 的不区分大小写模糊匹配）或自定义过滤函数 `(item) => boolean`。
+- `order` (读写): 排序规则。可为排序字段名（例如 `'name'`；前缀 `-` 表示降序，如 `'-name'`；或者后缀 `'desc'`/`'asc'` 语法，如 `'name desc'`)，也可以为自定义排序函数 `(a, b) => number`。
 - `_flatList` (只读): 列表核心逻辑处理后的扁平化数组。
 - `_renderedList` (只读): 实际在 DOM 中遍历渲染的数组片段（若开启虚拟滚动，则只包含可视区切片）。
 
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9c44d5a..802de85 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## [1.0.22] - 2026-06-28
+### Added
+- **List**: Added internal filtering and sorting capabilities on the `List` component across all three layout modes (`normal`, `group`, `tree`). Supports `filter` and `order` attributes and state fields. In `tree` mode, filtering correctly propagates up to preserve parent-descendant hierarchy. Added a MutationObserver to listen to attribute changes and sync them reactively to internal component state.
+
 ## [1.0.21] - 2026-06-27
 ### Fixed
 - **API**: Preserved declarative preset fields injected through `$.request.*` when the `API` component initializes its internal reactive request state.
diff --git a/README.md b/README.md
index 56cfa83..9bfbb8e 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@
 <!-- 2. Bootstrap 适配层 -->
 <script src="https://cdn.jsdelivr.net/npm/@apigo.cc/bootstrap@1.0.9/dist/bootstrap.min.js"></script>
 <!-- 3. 本业务组件库 -->
-<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/base@1.0.21/dist/base.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/base@1.0.22/dist/base.min.js"></script>
 ```
 <script>
   // 4. 数据先行 (在 body 解析前定义)
@@ -205,6 +205,8 @@ const { HTTP, UI, AutoForm, State } = window.ApigoBase
   ```
 * **AI 核心要点**：
   * **属性默认值**：当数据结构符合默认字段命名（`id`, `label`, `summary`, `parent`, `group`）时，**无须填写**任何映射属性（如 `idfield`, `labelfield`, `parentfield` 等），实际编写代码时应当将其省略。
+  * **筛选与过滤 (`filter`)**：可绑定筛选关键字字符串（对 label 和 summary 进行不区分大小写匹配，如 `$filter="State.searchKey || ''"`，加 `|| ''` 可方便地在输入清空时彻底重置）或自定义过滤函数 `(item) => boolean`。在 `tree` 树形模式下，过滤匹配会自动向上保留所有的祖先节点链，且仅保留匹配项分支；在 `group` 分组模式下，若分组自身或其下有任意项匹配则显示分组。
+  * **排序与整理 (`order`)**：可绑定排序字段名字符串（如 `'name'`；前缀 `-` 表示降序，如 `'-name'`；或者后缀 `'desc'`/`'asc'` 语法，如 `'name desc'`)，也可以绑定自定义排序比较函数 `(a, b) => number`。在 `tree` 树形模式下对同级子节点进行排序。
   * 虚拟滚动 (`fast`) 强制容器必须声明为 `overflow-auto` 类。
 
 ---
diff --git a/TEST.md b/TEST.md
index 666695f..6f1ccbc 100644
--- a/TEST.md
+++ b/TEST.md
@@ -1,21 +1,23 @@
-# base Benchmark & Test Results
+# base Test Notes
 
-## 基准测试 (Benchmark)
-*测试环境: Playwright / Chromium*
+当前测试只保留可维护的 Playwright 冒烟用例，统一直接打开 `test/` 里的 UMD 示例页，不再依赖历史上的浏览器内自测脚本或混合 ESM 入口。
 
-| 指标 | v1.0.0 | v1.0.1 | v1.0.3 | v1.0.4 | v1.0.7 |
-| :--- | :--- | :--- | :--- | :--- | :--- |
-| **FastList Render & Scroll (10k items)** | ~535ms | ~473ms | ~1513ms | ~54ms | ~53ms |
-| **FastGroupedList Render & Scroll (10k)** | ~705ms | ~51ms | ~51ms | ~1550ms | ~1560ms |
-| **FastTree Render & Scroll (10k items)** | ~927ms | ~50ms | ~51ms | ~1560ms | ~1570ms |
-| **CollapseTree Render & Scroll (1.2k)** | ~51ms | ~50ms | ~50ms | ~51ms | ~51ms |
+## 运行方式
 
-## 测试覆盖 (Coverage)
-- [x] HTTP Request (GET/POST)
-- [x] API Component (Auto mode)
-- [x] Modal / Dialog / Toast UI
-- [x] AutoForm (Rendering & Validation)
-- [x] DatePicker / ColorPicker / IconPicker (New)
-- [x] FastList (Virtual Scrolling)
-- [x] Tree / Nav / Resizer
-- [x] Virtual List dynamic sizing check
+```bash
+npm test
+```
+
+测试命令会先执行 `npm run build`，然后自动把最新的 `state/bootstrap/base` 产物同步到 `test/lib`，最后再跑 Playwright。这样可以避免 `test/lib` 副本过期，但又不依赖跨目录静态服务配置。
+
+Playwright 会自动启动本地 Vite 静态服务，并执行以下用例：
+
+- `test/api.spec.js`：验证 `<API>` 会保留声明式 `$.request.*` 预设字段。
+- `test/form.spec.js`：验证 `AutoForm` 的垂直、水平、强制水平、inline 等布局。
+- `test/list.spec.js`：验证普通列表、分组列表、树形列表和虚拟滚动列表。
+- `test/capability.spec.js`：验证示例页里的 `Nav` 切换和主要区域渲染。
+
+## 取舍原则
+
+- 删除了端口写死、依赖旧 ESM 入口、只输出调试信息却没有稳定断言价值的历史用例。
+- 不再把性能 benchmark 当成默认测试流程的一部分，避免未来维护被脆弱用例卡住。
diff --git a/dist/base.js b/dist/base.js
index b0961c4..4bf3ba5 100644
--- a/dist/base.js
+++ b/dist/base.js
@@ -762,37 +762,142 @@
     container.collapsed = globalThis.NewState({});
     container.state.renderedList = [];
     const updateFlatList = () => {
+      var _a;
       globalThis.Util.updateDefaults(container, defaultSets);
-      const list = container.state.list || [], flatList = [];
+      let list = container.state.list || [];
+      const filter = container.state.filter;
+      const order = container.state.order;
+      if (order) {
+        if (typeof order === "function") {
+          list = [...list].sort(order);
+        } else if (typeof order === "string") {
+          const parts = order.trim().split(/\s+/);
+          const field = parts[0];
+          const isDesc = ((_a = parts[1]) == null ? void 0 : _a.toLowerCase()) === "desc" || field.startsWith("-");
+          const cleanField = field.startsWith("-") ? field.slice(1) : field;
+          list = [...list].sort((a, b) => {
+            const valA = a[cleanField];
+            const valB = b[cleanField];
+            if (valA === void 0 || valA === null) return isDesc ? 1 : -1;
+            if (valB === void 0 || valB === null) return isDesc ? -1 : 1;
+            if (typeof valA === "string" && typeof valB === "string") {
+              return isDesc ? valB.localeCompare(valA) : valA.localeCompare(valB);
+            }
+            return isDesc ? valB > valA ? 1 : -1 : valA > valB ? 1 : -1;
+          });
+        }
+      }
+      const flatList = [];
       if (container.mode === "group") {
+        let filteredList = list;
+        if (filter) {
+          if (typeof filter === "function") {
+            filteredList = list.filter(filter);
+          } else if (typeof filter === "string") {
+            const q = filter.trim().toLowerCase();
+            if (q) {
+              filteredList = list.filter((item) => {
+                const label = String(item[container.labelfield] || "").toLowerCase();
+                const summary = String(item[container.summaryfield] || "").toLowerCase();
+                return label.includes(q) || summary.includes(q);
+              });
+            }
+          }
+        }
         const itemMap = {};
-        list.forEach((item) => {
-          var _a;
-          return (itemMap[_a = item[container.groupfield]] ?? (itemMap[_a] = [])).push(item);
+        filteredList.forEach((item) => {
+          var _a2;
+          return (itemMap[_a2 = item[container.groupfield]] ?? (itemMap[_a2] = [])).push(item);
         });
         (container.state.groups || []).forEach((group) => {
-          flatList.push({ type: "group", ...group });
           const items = itemMap[group[container.groupidfield]];
-          if (items) items.forEach((item) => flatList.push({ type: "item", ...item }));
+          const groupLabel = String(group[container.grouplabelfield] || "").toLowerCase();
+          const groupSummary = String(group[container.groupsummaryfield] || "").toLowerCase();
+          const q = typeof filter === "string" ? filter.trim().toLowerCase() : "";
+          const groupMatches = q ? groupLabel.includes(q) || groupSummary.includes(q) : false;
+          if (items && items.length > 0 || groupMatches || !filter) {
+            flatList.push({ type: "group", ...group });
+            if (items) items.forEach((item) => flatList.push({ type: "item", ...item }));
+          }
         });
       } else if (container.mode === "tree") {
+        const itemMap = {};
+        list.forEach((item) => {
+          itemMap[item[container.idfield]] = item;
+        });
+        const matches = /* @__PURE__ */ new Set();
+        list.forEach((item) => {
+          let match = false;
+          if (!filter) {
+            match = true;
+          } else if (typeof filter === "function") {
+            match = filter(item);
+          } else if (typeof filter === "string") {
+            const q = filter.trim().toLowerCase();
+            if (!q) {
+              match = true;
+            } else {
+              const label = String(item[container.labelfield] || "").toLowerCase();
+              const summary = String(item[container.summaryfield] || "").toLowerCase();
+              match = label.includes(q) || summary.includes(q);
+            }
+          }
+          if (match) {
+            matches.add(item[container.idfield]);
+          }
+        });
+        const keep = new Set(matches);
+        if (filter) {
+          matches.forEach((id) => {
+            let curr = itemMap[id];
+            while (curr) {
+              const parentId = curr[container.parentfield];
+              if (!parentId) break;
+              if (keep.has(parentId)) break;
+              keep.add(parentId);
+              curr = itemMap[parentId];
+            }
+          });
+        }
         const childrenMap = {};
         list.forEach((item) => {
-          var _a;
-          return (childrenMap[_a = item[container.parentfield] || ""] ?? (childrenMap[_a] = [])).push(item);
+          if (!filter || keep.has(item[container.idfield])) {
+            const parentId = item[container.parentfield] || "";
+            (childrenMap[parentId] ?? (childrenMap[parentId] = [])).push(item);
+          }
         });
         const traverse = (items, level, parents) => items.forEach((item) => {
-          var _a;
-          const id = item[container.idfield], hasChildren = !!((_a = childrenMap[id]) == null ? void 0 : _a.length);
+          var _a2;
+          const id = item[container.idfield];
+          const hasChildren = !!((_a2 = childrenMap[id]) == null ? void 0 : _a2.length);
           const isCollapsed = container.collapsed[id];
           flatList.push({ type: "item", ...item, _level: level, _hasChildren: hasChildren, _parents: parents });
           if (hasChildren && !isCollapsed) traverse(childrenMap[id], level + 1, [...parents, id]);
         });
         traverse(childrenMap[""] || [], 0, []);
-      } else list.forEach((item) => flatList.push({ type: "item", ...item }));
+      } else {
+        let filteredList = list;
+        if (filter) {
+          if (typeof filter === "function") {
+            filteredList = list.filter(filter);
+          } else if (typeof filter === "string") {
+            const q = filter.trim().toLowerCase();
+            if (q) {
+              filteredList = list.filter((item) => {
+                const label = String(item[container.labelfield] || "").toLowerCase();
+                const summary = String(item[container.summaryfield] || "").toLowerCase();
+                return label.includes(q) || summary.includes(q);
+              });
+            }
+          }
+        }
+        filteredList.forEach((item) => flatList.push({ type: "item", ...item }));
+      }
       container.state.flatList = flatList;
     };
     container.state.__watch("list", updateFlatList);
+    container.state.__watch("filter", updateFlatList);
+    container.state.__watch("order", updateFlatList);
     const vs = container.fast ? globalThis.VirtualScroll() : null;
     let refreshing = false;
     container.refresh = () => {
@@ -840,6 +945,31 @@
         updateFlatList();
       }
     };
+    Object.defineProperty(container, "filter", {
+      get: () => container.state.filter,
+      set: (v) => {
+        container.state.filter = v;
+      }
+    });
+    Object.defineProperty(container, "order", {
+      get: () => container.state.order,
+      set: (v) => {
+        container.state.order = v;
+      }
+    });
+    const observer = new MutationObserver(() => {
+      const filterAttr = container.getAttribute("filter");
+      if (typeof container.state.filter !== "function" && filterAttr !== container.state.filter) {
+        container.state.filter = filterAttr || void 0;
+      }
+      const orderAttr = container.getAttribute("order");
+      if (typeof container.state.order !== "function" && orderAttr !== container.state.order) {
+        container.state.order = orderAttr || void 0;
+      }
+    });
+    observer.observe(container, { attributes: true, attributeFilter: ["filter", "order"] });
+    container.state.filter = container.getAttribute("filter") || void 0;
+    container.state.order = container.getAttribute("order") || void 0;
     updateFlatList();
   }, globalThis.Util.makeDom(
     /*html*/
@@ -900,13 +1030,13 @@
 <div $class="\${this.vertical ? 'd-flex flex-column border-end h-100 align-self-stretch overflow-visible' : 'navbar navbar-expand border-bottom'} bg-body-secondary px-2 \${this.vertical ? 'py-3' : 'py-0'} align-items-center \${this.vertical ? 'align-items-start' : ''}" $style="this.vertical ? 'min-height:0;' : ''">
 	<div class="d-flex align-items-center gap-2">
         <template $if="this.state?.brand?.image">
-                <img $src="this.state.brand.image" $class="\${this.vertical ? 'mb-2' : 'me-2'}" style="height:30px;width:auto;max-width:300px">
+                <img $src="this.state.brand.image" $class="\${this.vertical ? 'mb-2' : 'mx-1'}" style="height:30px;width:auto;max-width:300px">
         </template>
         <template $if="this.state?.brand?.icon">
-                <i $class="bi bi-\${this.state.brand.icon} \${this.vertical ? 'mb-2' : 'me-2'}"></i>
+                <i $class="bi bi-\${this.state.brand.icon} \${this.vertical ? 'mb-2' : 'mx-1'}"></i>
         </template>
         <template $if="this.state?.brand?.label">
-                <span $class="\${this.vertical ? 'mb-2 fw-bold' : 'me-2'}" style="transform: translateY(3px);" $text="this.state.brand.label"></span>
+                <span $class="\${this.vertical ? 'mb-2 fw-bold' : 'mx-1'}" style="transform: translateY(3px);" $text="this.state.brand.label"></span>
         </template>
 	</div>
 	<div $class="d-flex \${this.vertical ? 'w-100 flex-fill mt-2 flex-column' : 'ms-2 align-items-center flex-fill'}" $style="this.vertical ? 'min-height:0; overflow-y:auto; overflow-x:visible;' : ''">
diff --git a/dist/base.min.js b/dist/base.min.js
index 9649a0c..c4f192c 100644
--- a/dist/base.min.js
+++ b/dist/base.min.js
@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@apigo.cc/state")):"function"==typeof define&&define.amd?define(["exports","@apigo.cc/state"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).ApigoBase=t.ApigoBase||{},t.ApigoState)}(this,function(t,e){"use strict";const i={get:({url:t,...e})=>i.request({url:t,method:"GET",...e}),post:({url:t,data:e,...a})=>i.request({url:t,method:"POST",data:e,...a}),put:({url:t,data:e,...a})=>i.request({url:t,method:"PUT",data:e,...a}),delete:({url:t,...e})=>i.request({url:t,method:"DELETE",...e}),head:({url:t,...e})=>i.request({url:t,method:"HEAD",...e}),request:async({url:t,method:e="POST",data:a,headers:s={},responseType:l,timeout:n=1e4})=>{var o;const r={method:e=e.toUpperCase(),signal:null==(o=AbortSignal.timeout)?void 0:o.call(AbortSignal,n)};if(void 0!==a&&"GET"!==e&&"HEAD"!==e){if(a instanceof HTMLFormElement&&(a=new FormData(a)),a&&"object"==typeof a&&!(a instanceof FormData)&&!(a instanceof ArrayBuffer||ArrayBuffer.isView(a))&&Object.values(a).some(t=>t instanceof File||t instanceof Blob||t instanceof FileList||Array.isArray(t)&&t.some(t=>t instanceof File||t instanceof Blob))){const t=new FormData;for(const[e,i]of Object.entries(a))i instanceof FileList||Array.isArray(i)?Array.from(i).forEach(i=>t.append(e,i)):null!=i&&t.append(e,i);a=t}a instanceof FormData?delete s["Content-Type"]:"string"==typeof a||a instanceof ArrayBuffer||ArrayBuffer.isView(a)||(a=JSON.stringify(a),s["Content-Type"]||(s["Content-Type"]="application/json")),r.body=a}for(const t of i.keepHeaders)i._keepHeadersCache[t]&&!s[t]&&(s[t]=i._keepHeadersCache[t]);Object.keys(s).length&&(r.headers=s);const d={error:null,ok:null,status:0,headers:{},responseType:"",result:null};try{const e=await fetch(t,r);Object.assign(d,{ok:e.ok,status:e.status,headers:Object.fromEntries(e.headers.entries())});for(const t of i.keepHeaders){const a=e.headers.get(t);if(a){i._keepHeadersCache[t]=a;try{localStorage.setItem("_http_keep_"+t,a)}catch(t){}}}if(!l){const t=e.headers.get("Content-Type")||"";l=t.includes("application/json")?"json":/image|video|audio|pdf|zip|octet-stream/.test(t)?"binary":"text",d.responseType=l}!1===d.ok&&(d.error=(d.statusText||"HTTP "+d.status+" error")+" for "+t),d.result="json"===l?await e.json():"binary"===l?await e.arrayBuffer():await e.text()}catch(t){Object.assign(d,{error:t.message||String(t),ok:!1})}return d},keepHeaders:["Session-Id","Device-Id"],_keepHeadersCache:{}};for(const t of i.keepHeaders)try{const e=localStorage.getItem("_http_keep_"+t);null!==e&&(i._keepHeadersCache[t]=e)}catch(t){}globalThis.HTTP=i;const a={};globalThis.Component.register("Toast",t=>{t.toast=new bootstrap.Toast(t,{autohide:t.state.delay>0}),globalThis.Util.copyFunction(t,t.toast,"show","hide"),t.addEventListener("show.bs.toast",()=>{if(t.state.delay>0){let e;const i=()=>{t.state.left=t.state.delay/1e3,e=setInterval(()=>{(!t.isConnected||--t.state.left<=0)&&clearInterval(e)},1e3)};i(),t.addEventListener("mouseenter",()=>{clearInterval(e),t.state.left=void 0}),t.addEventListener("mouseleave",i)}})},globalThis.Util.makeDom('\n<div class="toast align-items-center border-0 m-1">\n  <div $class="toast-body rounded p-3 text-bg-${this.state?.type}">\n    <div class="d-flex align-items-center">\n      <div class="flex-grow-1">\n        <span style="white-space:pre-wrap" class="fs-6" $text="this.state?.message"></span>\n        <template $if="this.state?.left !== undefined">\n          <span class="small text-dim ms-2" $text="${this.state?.left}s"></span>\n        </template>\n      </div>\n      <button type="button" class="btn btn-link ms-3 bi bi-x-lg link-reset" style="color:inherit" data-bs-dismiss="toast"></button>\n    </div>\n    <div class="d-flex justify-content-end gap-3">\n      <template $each="this.state?.buttons || [\'{#Close#}\']">\n        <button type="button" $class="btn btn-sm btn-${this.state?.type} mt-2" data-bs-dismiss="toast" $onclick="this.result=index+1" $text="item"></button>\n      </template>\n    </div>\n  </div>\n</div>\n'),globalThis.Util.makeDom('<div toast-container="default" class="position-fixed bottom-0 end-0 overflow-auto" style="z-index:3000;max-height:80%"></div>')),a.toast=function(t,e={}){const i=e.delay??5e3,a=document.createElement("Toast");a.state={delay:i,left:i?i/1e3:void 0,type:e.type||"primary",message:t,buttons:e.buttons||[]},globalThis.$(`[toast-container="${e.container||"default"}"]`).appendChild(a),Promise.resolve().then(()=>a.show())},a.toastConfirm=function(t,e={}){return new Promise(i=>a.toast(t,{buttons:["{#Confirm#}"],...e}).then(t=>i(1===t)).catch(()=>i(!1)))},globalThis.UI=a;const s=globalThis.Util.makeDom('\n<div class="auto-form-root">\n  <form $class="${this.inline ? \'d-flex flex-wrap align-items-center gap-3\' : (this.vertical ? \'d-flex flex-column\' : (this.horizontal ? \'auto-grid-form forced-horizontal\' : \'auto-grid-form\'))}" $onsubmit="event.stopPropagation();event.preventDefault();this.submit()">\n  \n  <template $each="this.state.schema || []">\n    <div style="display:contents" $if="this.checkIf(item)">\n        <label $name="item.name" $class="${this.inline ? \'mb-0 text-muted text-nowrap\' : \'col-form-label text-muted\'}" $text="item.label"></label>\n        <div control-wrapper $class="${this.inline ? \'d-flex align-items-center\' : \'mb-3 d-flex align-items-center\'}">\n          <input $if="[\'text\', \'password\', \'email\', \'number\', \'date\', \'datetime\', \'file\'].includes(item.type)" $name="item.name" $type="item.type" $.="item.setting || {}" $bind="this.data[item.name]" $class="form-control ${item.type === \'number\' ? \'text-end\' : \'\'}">\n          \n          <select $if="item.type === \'select\'" $name="item.name" $.="item.setting || {}" $bind="this.data[item.name]" class="form-select">\n              <option value="" $if="item.placeholder" $text="item.placeholder" disabled selected></option>\n              <option $each="item.options" as="opt" $value="opt.value !== undefined ? opt.value : opt" $text="opt.label || opt"></option>\n          </select>\n          \n          <div $if="[\'checkbox\', \'radio\'].includes(item.type)" class="d-flex align-items-center flex-wrap gap-3 h-100" style="padding: 0 0.75rem; min-height: calc(2.25rem + 2px);">\n              <label $each="item.options || [item.text||item.label||item.name]" as="opt" class="form-check mb-0 d-flex align-items-center" style="padding-left:0; cursor:pointer;">\n                  <input $name="item.name" class="form-check-input m-0 me-2" style="float:none;" $type="item.type" $.="item.setting || {}" $value="item.options ? (opt.value !== undefined ? opt.value : opt) : \'on\'" $bind="this.data[item.name]">\n                  <span $if="!this.inline || (item.options && item.options.length > 0)" $text="opt.label || opt" class="form-check-label"></span>\n              </label>\n          </div>\n\n          <div $if="item.type === \'switch\'" class="form-check form-switch fs-5 d-flex align-items-center m-0" style="padding: 0 0.75rem; min-height: calc(2.25rem + 2px); display:flex !important;">\n              <input $name="item.name" class="form-check-input m-0" style="float:none; cursor:pointer" type="checkbox" $bind="this.data[item.name]">\n          </div>\n          \n          <textarea $if="item.type === \'textarea\'" $name="item.name" class="form-control" $.="item.setting || {}" $bind="this.data[item.name]"></textarea>\n        </div>\n    </div>\n  </template>\n\n  <div $if="!this.nobutton" $class="${this.inline ? \'\' : \'d-flex justify-content-end align-items-baseline gap-3 mt-2\'}" $style="${this.inline ? \'\' : \'grid-column:1/-1\'}">\n      <div slot-id="actions"></div>\n      <button type="submit" class="btn btn-primary" $text="this.submitlabel || \'{#Submit#}\'"></button>\n  </div>\n  </form>\n</div>\n'),l=globalThis.Util.makeDom("<style>\n        .auto-grid-form { display: block; }\n        .auto-grid-form .col-form-label { text-align: left; margin-bottom: 0.25rem; padding-top: 0; }\n\n        @media (min-width: 576px) { \n                .auto-grid-form { display: grid; grid-template-columns: max-content 1fr; gap: 0 1.5rem; } \n                .auto-grid-form .col-form-label { text-align: right; margin-bottom: 1rem; padding-right: 0; max-width: 200px; padding-top: calc(0.375rem + 1px); } \n        .auto-grid-form [control-wrapper] { min-height: calc(2.25rem + 2px); }\n        }\n\n        .auto-grid-form.forced-horizontal { display: grid !important; grid-template-columns: max-content 1fr !important; gap: 0 1.5rem !important; }\n        .auto-grid-form.forced-horizontal .col-form-label { text-align: right !important; margin-bottom: 1rem !important; padding-right: 0 !important; max-width: 200px !important; padding-top: calc(0.375rem + 1px) !important; }\n    .auto-grid-form.forced-horizontal [control-wrapper] { min-height: calc(2.25rem + 2px) !important; }\n\n    .auto-form-root .form-check-input { width: 1.2em; height: 1.2em; }\n    .auto-form-root .form-switch .form-check-input { width: 2em; }\n</style>");globalThis.Component.register("AutoForm",t=>{t.state.schema||(t.state.schema=[]);const e=t=>t&&"object"==typeof t&&!t.__isProxy?globalThis.NewState(t):t;t.state.__watch("data",i=>t.data=e(i)),t.data=e(t.state.data||{}),t.vertical=t.hasAttribute("vertical"),t.horizontal=t.hasAttribute("horizontal"),t.inline=t.hasAttribute("inline"),t.nobutton=t.hasAttribute("nobutton"),t.request={method:"POST"},t.response={},t.result=null,t.form=globalThis.$(t,"form"),t.submit=(e={})=>{var i,a;if(!t.form.reportValidity())return null==(a=null==(i=globalThis.UI)?void 0:i.toast)?void 0:a.call(i,"{#verify failed#}",{type:"danger"});if(!t.dispatchEvent(new CustomEvent("submit",{detail:t.data,cancelable:!0,bubbles:!1})))return;const s={...t.request,data:t.data,noui:!0,...e};let l=null;if(t.api)l=t.api.do(s);else{if(!t.request.url)return console.warn("{#please config .api or .request.url to auto submit#}");l=globalThis.HTTP.request(s)}l.then(e=>{if(t.response=e,t.result=e.result,"object"==typeof e.result&&e.result.error)throw new Error(e.result.error);t.dispatchEvent(new CustomEvent("response",{detail:e,bubbles:!1}))}).catch(e=>{var i;(null==(i=globalThis.UI)?void 0:i.toast)&&globalThis.UI.toast(e.message,{type:"danger"}),t.dispatchEvent(new CustomEvent("error",{detail:e,bubbles:!0}))})},t.checkIf=e=>{if(!e.if)return!0;try{return new Function("Hash","LocalStorage","State","item","data","return "+e.if).call(t,globalThis.Hash,globalThis.LocalStorage,globalThis.State,e,t.data)}catch(t){return!1}}},s,l);const n=t=>{let e=t.querySelector("[control-wrapper]");if(e)return e;for(const i of t.querySelectorAll("template"))if(e=n(i.content),e)return e;return null},o={customTypes:[],register:(t,e)=>{const i=e||t;o.customTypes.find(e=>e.name===t)||(o.customTypes.push({name:t,typeName:i}),o._addAutoFormComponent(t,i))},_addAutoFormComponent:(t,e)=>{const i=n(s);if(i){const a=globalThis.Util.makeDom(`<${t} $if="item.type?.toLowerCase() === '${e.toLowerCase()}'" $name="item.name" $.="item.setting || {}" $bind="this.data[item.name]" class="w-100"></${t}>`);i.appendChild(a)}}};globalThis.AutoForm=o;const r=(t={})=>{const e=new Map,i=new Map;let a=1;const s=globalThis.Util.newAvg();let l=0,n=0,o=0,r=null,d=null,c=!1;const m=t.itemHeight||null;return{reset:(t,p)=>{if(c=!1,e.clear(),i.clear(),s.clear(),o=0,r=null,d=null,!(null==t?void 0:t.length))return[];const u=t.length;a=Math.ceil(Math.sqrt(u))||10;const h=window.getComputedStyle(p);l=parseFloat(h.paddingTop)||0,n=parseFloat(h.rowGap)||0;const b=Math.max(10,Math.ceil((p.clientHeight||100)/(m||32)));return t.slice(0,Math.min(3*b,u))},init:(t,l)=>{if(c)return;const n=t.length;let o=m||s.get()||32;n>0&&"object"==typeof t[0]&&null!==t[0]&&t[0]._itemHeight&&(o=t[0]._itemHeight),s.add(o),null===r&&(r=0,d=0);for(let i=0;i<n;i++)if(!e.has(i)){const a="object"==typeof t[i]&&null!==t[i]&&t[i]._itemHeight?t[i]._itemHeight:o;e.set(i,a)}for(let t=0;t<n;t+=a)i.set(t,Math.min(a,n-t)*o);c=!0,l()},update:(t,l)=>{if(0===l.offsetHeight)return;if(null===r){const t=window.getComputedStyle(l);r=parseFloat(t.marginTop)||0,d=parseFloat(t.marginBottom)||0}0!==t||o||(o=r);const c=l.offsetHeight+r+d+n,m=e.get(t);if(c!==m){e.set(t,c),s.add(c);const l=c-(m||0),n=t-t%a;i.has(n)&&i.set(n,i.get(n)+l)}},calc:(t,r)=>{if(!c||!r)return null;const d=r.length,m=Math.max(16,s.get()||32);let p=Math.max(10,Math.ceil((t.clientHeight||100)/m)),u=l+o+n,h=0,b=0,g=0,f=0,v=[];const y=t.scrollTop;let x=0;for(let t=0;t<d;t++){if(++x>2*d)throw new Error("VirtualScroll infinite loop");if(0===b){const s=i.get(t);if(s&&u+s<=y&&t+a<d)u+=s,t+=a-1;else{const i=e.get(t);if(u+i<=y&&t<d-1)u+=i;else{b=1;let i=Math.max(0,t);g=Math.max(0,i-p),f=Math.min(g+3*p,d),t=f-1,v=r.slice(g,f);for(let t=g;t<i;t++)u-=e.get(t)}}}else if(1===b){const s=i.get(t);s?(h+=s,t+=a-1):h+=e.get(t)}}return{prevHeight:Math.max(0,u-l-o-n-(g>0?n:0)),postHeight:h>0?Math.max(0,h-2*n):0,renderedList:v,listStartIndex:g}}}};globalThis.VirtualScroll=r;let d=!1,c={},m={};const p={start:(t,{onmousemove:e,onmouseup:i})=>{c={x:t.clientX,y:t.clientY,w:0,h:0},m={onmousemove:e,onmouseup:i},d=!0}};"undefined"!=typeof document&&(document.addEventListener("mouseup",t=>{var e;d&&(d=!1,null==(e=m.onmouseup)||e.call(m,{event:t,...c}))}),document.addEventListener("mousemove",t=>{var e;d&&(c.w=t.clientX-c.x,c.h=t.clientY-c.y,null==(e=m.onmousemove)||e.call(m,{event:t,...c}))})),globalThis.MouseMover=p;const u=globalThis.Component.register("API",t=>{const e=t.request&&"object"==typeof t.request?t.request:{},i=t.response&&"object"==typeof t.response?t.response:{},a=t.result&&"object"==typeof t.result?t.result:{};t.request=globalThis.NewState({url:"",method:"GET",headers:{},data:null,timeout:1e4,responseType:"",...e,headers:{...e.headers||{}}}),t.response=globalThis.NewState({loading:!1,ok:null,status:null,error:null,headers:{},responseType:"",result:null,...i,headers:{...i.headers||{}}}),t.result=globalThis.NewState(a),t.do=(e={})=>new Promise((i,a)=>{const s={...t.request,...e};if(!s.url)throw new Error(".url is required");s.headers={...t.request.headers,...e.headers},t.response.loading=!0,globalThis.HTTP.request(s).then(e=>{if(Object.keys(e).forEach(i=>{"result"!==i&&(t.response[i]=e[i])}),e.result&&"object"==typeof e.result&&t.result&&"object"==typeof t.result?Object.assign(t.result,e.result):t.result=e.result,t.response.loading=!1,!1===e.ok)throw new Error(e.error);if("object"==typeof e.result&&e.result.error)throw new Error(e.result.error);t.dispatchEvent(new CustomEvent("response",{detail:e,bubbles:!1})),i(e)}).catch(i=>{var s;!e.noui&&(null==(s=globalThis.UI)?void 0:s.toast)&&globalThis.UI.toast(i.message,{type:"danger"}),t.dispatchEvent(new CustomEvent("error",{detail:i,bubbles:!0})),a(i)})});let s=null;t.request.__watch(null,()=>{t.hasAttribute("auto")&&t.request.url&&(s||(s=Promise.resolve().then(()=>{t.do(),s=null})))})});globalThis.Component.register("Modal",t=>{t.modal=new bootstrap.Modal(t),t.addEventListener("bind",e=>{e.detail?t.modal.show():t.modal.hide()}),t.addEventListener("hide.bs.modal",()=>{var e;null==(e=document.activeElement)||e.blur(),t.dispatchEvent(new CustomEvent("change",{bubbles:!1,detail:!1}))}),globalThis.Util.copyFunction(t,t.modal,"show","hide")},globalThis.Util.makeDom('\n<div class="modal fade" data-bs-backdrop="static">\n  <div class="modal-dialog modal-dialog-centered">\n    <div $class="modal-content border-${this.state?.type || \'primary\'} border-2 shadow-lg">\n      <div slot-id="header" class="modal-header py-2 px-3 bg-light">\n        <h6 $class="modal-title fw-bold text-${this.state?.type || \'primary\'}" $text="this.state?.title"></h6>\n        <button type="button" class="btn btn-link ms-2 bi bi-x-lg link-reset p-0" style="color:inherit; text-decoration:none" data-bs-dismiss="modal"></button>\n      </div>\n      <div slot-id="body" class="modal-body p-3"></div>\n      <div slot-id="footer" class="modal-footer py-2 px-3 bg-light"></div>\n    </div>\n  </div>\n</div>\n')),globalThis.Component.register("Dialog",globalThis.Component.getSetupFunction("Modal"),globalThis.Util.makeDom('\n<div class="modal fade" data-bs-backdrop="static">\n  <div class="modal-dialog modal-dialog-centered">\n    <div $class="modal-content border-${this.state?.type || \'primary\'} border-2 shadow-lg">\n      <template $if="this.state?.title">\n        <div $class="modal-header py-2 px-3 bg-light fw-bold text-${this.state?.type || \'primary\'}" $text="this.state?.title"></div>\n      </template>\n      <div class="modal-body p-4 text-center">\n        <div $text="this.state?.message" class="fs-5 text-secondary"></div>\n      </div>\n      <div class="modal-footer py-2 px-3 bg-light border-0 d-flex justify-content-center gap-3">\n        <template $each="this.state?.buttons">\n          <button type="button" $class="btn btn-${this.state?.type} px-4" data-bs-dismiss="modal" $onclick="this.result=index+1" $text="item"></button>\n        </template>\n      </div>\n    </div>\n  </div>\n</div>\n'));let h=0;globalThis.UI.showDialog=function({title:t="",message:e="",buttons:i=["{#Close#}"],type:a="body"}){const s=document.body.appendChild(document.createElement("Dialog"));return s.style.zIndex=2e3+ ++h,Promise.resolve().then(()=>{Object.assign(s.state,{message:e,title:t,type:a,buttons:i}),s.show()}),new Promise(t=>{s.addEventListener("change",e=>{h--,t(s.result||0),s.remove()})})},globalThis.UI.alert=function(t,e={}){return globalThis.UI.showDialog({message:t,...e})},globalThis.UI.confirm=function(t,e={}){return new Promise(i=>globalThis.UI.showDialog({message:t,buttons:["{#Cancel#}","{#Confirm#}"],...e}).then(t=>i(t>=2)).catch(()=>i(!1)))},globalThis.Component.register("TagsInput",t=>{t._thisObj=t,t.addEventListener("bind",e=>{t.state.tags=Array.isArray(e.detail)?e.detail:[]})},globalThis.Util.makeDom(`\n<div class="form-control d-flex flex-wrap gap-1 align-items-center" style="min-height:38px;cursor:text">\n  <template $each="this.state.tags">\n    <button type="button" class="btn btn-sm btn-outline-primary rounded-pill py-0 px-2" $onkeydown='${globalThis.Util.getFunctionBody(function(t){["Backspace","Delete"].includes(t.key)&&(t.preventDefault(),this.state.tags.splice(index,1),this.state.tags=this.state.tags,this.dispatchEvent(new CustomEvent("change",{bubbles:!1,detail:this.state.tags})),Promise.resolve().then(()=>{const t=globalThis.$$(this,"button");(t.length>0?t[index>0?index-1:0]:globalThis.$(this,"input")).focus()}))})}' $text="item"></button>\n  </template>\n  <input type="text" class="border-0 shadow-none py-0 px-2 flex-grow-1 bg-transparent" placeholder="{#new tag name#}" style="min-width:100px;width:0;outline:none" $onchange="event.stopPropagation()" $oninput="event.stopPropagation()" $onkeydown='${globalThis.Util.getFunctionBody(function(t){if(!t.isComposing&&["Enter",","," "].includes(t.key)){t.preventDefault();const e=thisNode.value.trim();e&&!this.state.tags.includes(e)&&(this.state.tags.push(e),this.state.tags=this.state.tags,this.dispatchEvent(new CustomEvent("change",{bubbles:!1,detail:this.state.tags}))),thisNode.value=""}})}'>\n</div>\n`),globalThis.Util.makeDom("<style>TagsInput button:focus {background-color:var(--bs-btn-hover-bg);color:var(--bs-btn-hover-color)}</style>")),globalThis.AutoForm&&globalThis.AutoForm.register("TagsInput"),globalThis.Component.register("DatePicker",t=>{t._thisObj=t,t.state=globalThis.NewState({start:"",end:""}),t.addEventListener("bind",e=>{var i,a,s;t.state.start=e.detail||"";const l=t.closest("AutoForm"),n=t.getAttribute("name"),o=null==(a=null==(i=null==l?void 0:l.state)?void 0:i.schema)?void 0:a.find(t=>t.name===n),r=(null==(s=null==o?void 0:o.setting)?void 0:s.rangeEnd)||t.rangeEnd;l&&r&&(t.state.end=l.data[r]||"")}),Object.defineProperty(t,"isRange",{get:()=>{var e,i,a;const s=t.closest("AutoForm"),l=t.getAttribute("name"),n=null==(i=null==(e=null==s?void 0:s.state)?void 0:e.schema)?void 0:i.find(t=>t.name===l);return!(!(null==(a=null==n?void 0:n.setting)?void 0:a.rangeEnd)&&!t.rangeEnd)}}),Object.defineProperty(t,"value",{get:()=>t.state.start,set:e=>{t.state.start=e||""}}),t.updateStart=e=>{t.state.start=e,t.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:e}))},t.updateEnd=e=>{var i,a,s;t.state.end=e;const l=t.closest("AutoForm"),n=t.getAttribute("name"),o=null==(a=null==(i=null==l?void 0:l.state)?void 0:i.schema)?void 0:a.find(t=>t.name===n),r=(null==(s=null==o?void 0:o.setting)?void 0:s.rangeEnd)||t.rangeEnd;l&&r&&(l.data[r]=e)}},globalThis.Util.makeDom('\n<div class="d-flex align-items-center gap-1 w-100">\n  <input type="date" class="form-control h-100" $bind="this.state.start" $onchange="this.updateStart(thisNode.value)">\n  <template $if="this.isRange">\n    <span class="text-muted mx-1">-</span>\n    <input type="date" class="form-control h-100" $bind="this.state.end" $onchange="this.updateEnd(thisNode.value)">\n  </template>\n</div>\n')),globalThis.AutoForm&&globalThis.AutoForm.register("DatePicker"),globalThis.Component.register("ColorPicker",t=>{t._thisObj=t,t.state=globalThis.NewState({value:"#000000"}),t.addEventListener("bind",e=>{t.state.value=e.detail||"#000000"}),Object.defineProperty(t,"value",{get:()=>t.state.value,set:e=>{t.state.value=e||"#000000"}}),t.updateValue=e=>{t.state.value=e,t.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:e}))}},globalThis.Util.makeDom('\n<div class="d-flex align-items-center gap-2 w-100 h-100">\n  <input type="color" class="form-control form-control-color flex-shrink-0" style="width: 3rem; padding: 0.25rem" $bind="this.state.value" $onchange="this.updateValue(thisNode.value)">\n  <input type="text" class="form-control" $bind="this.state.value" $onchange="this.updateValue(thisNode.value)">\n</div>\n')),globalThis.AutoForm&&globalThis.AutoForm.register("ColorPicker");const b=["alarm","archive","arrow-left","arrow-right","bag","bank","basket","bell","bookmark","box","briefcase","calendar","camera","cart","chat","check","chevron-down","chevron-left","chevron-right","chevron-up","clock","cloud","code","collection","command","cpu","credit-card","cup","dash","database","display","door-closed","download","droplet","earbuds","edit","egg","eject","envelope","eraser","eye","file","filter","flag","folder","gear","gem","gift","graph-up","grid","hammer","hand-thumbs-up","heart","house","image","inbox","info-circle","journal","key","laptop","layers","layout-text-sidebar-reverse","lightbulb","link","list","lock","map","mic","moon","mouse","music-note","newspaper","palette","paperclip","pause","pencil","person","phone","pie-chart","play","plus","printer","puzzle","question-circle","reception-4","record","reply","rss","save","search","send","server","share","shield","shop","shuffle","skip-end","skip-start","slash","sliders","smartphone","speaker","speedometer","spellcheck","square","star","stickies","stop","stopwatch","suit-heart","sun","table","tag","tags","telephone","terminal","text-paragraph","thermometer","three-dots","ticket","tools","trash","trophy","truck","tv","umbrella","unlock","upload","vector-pen","wallet","watch","wifi","window","wrench","x","zoom-in","zoom-out","activity","at","award","backspace","badge-3d","badge-4k","badge-8k","badge-ad","badge-ar","badge-cc","badge-hd","badge-tm","badge-vo","badge-vr","badge-wc","bar-chart","battery","bicycle","binoculars","blockquote-left","blockquote-right","book","bookshelf","bootstrap","border-all","border-bottom","border-center","border-inner","border-left","border-middle","border-outer","border-right","border-style","border-top","border-width","bounding-box","box-arrow-down","box-arrow-in-down","box-arrow-in-left","box-arrow-in-right","box-arrow-in-up","box-arrow-left","box-arrow-right","box-arrow-up","box-seam","brightness-alt-high","brightness-alt-low","brightness-high","brightness-low","broadcast","brush","bucket","bug","building","bullseye","calculator","calendar-check","calendar-date","calendar-day","calendar-event","calendar-minus","calendar-month","calendar-plus","calendar-range","calendar-week","calendar-x","calendar2","calendar3","calendar4","camera-reels","camera-video","capslock","card-checklist","card-heading","card-image","card-list","card-text","caret-down","caret-left","caret-right","caret-up","cart-check","cart-dash","cart-plus","cart-x","cash","cash-stack","cast","chat-dots","chat-left","chat-quote","chat-right","chat-square","chat-text","check-all","check-circle","check-square","circle","clipboard","cloud-arrow-down","cloud-arrow-up","cloud-check","cloud-download","cloud-fog","cloud-hail","cloud-lightning","cloud-minus","cloud-moon","cloud-plus","cloud-rain","cloud-slash","cloud-snow","cloud-sun","cloud-upload","clouds","cloudy","code-slash","code-square","collection-play","columns","columns-gap","compass","cone","cone-striped","controller","credit-card-2-back","credit-card-2-front","crop","cup-straw","cursor","dash-circle","dash-square","diagram-2","diagram-3","diamond","dice-1","dice-2","dice-3","dice-4","dice-5","dice-6","disc","discord","distribute-horizontal","distribute-vertical","door-open","dot","droplet-half","easel","egg-fried","emoji-angry","emoji-dizzy","emoji-expressionless","emoji-frown","emoji-heart-eyes","emoji-laughing","emoji-neutral","emoji-smile","emoji-sunglasses","emoji-wink","envelope-open","exclamation","exclamation-circle","exclamation-diamond","exclamation-octagon","exclamation-square","exclamation-triangle","eye-slash","eyedropper","facebook","file-arrow-down","file-arrow-up","file-binary","file-break","file-check","file-code","file-diff","file-earmark","file-excel","file-image","file-lock","file-medical","file-minus","file-music","file-pdf","file-person","file-play","file-plus","file-post","file-ppt","file-richtext","file-slides","file-spreadsheet","file-text","file-word","file-zip","files","film","filter-circle","filter-left","filter-right","filter-square","fingerprint","flower1","flower2","flower3","folder-check","folder-minus","folder-plus","folder-symlink","folder-x","folder2-open","fonts","forward","front","fullscreen","fullscreen-exit","funnel","gear-wide","gender-female","gender-male","gender-trans","geo","geo-alt","github","globe","google","graph-down","grid-1x2","grid-3x2","grid-3x3","grip-horizontal","grip-vertical","hand-index","hand-thumbs-down","handbag","hash","headphones","headset","heart-half","heptagon","hourglass","hourglass-bottom","hourglass-split","hourglass-top","house-door","hr","hurricane","image-alt","images","infinity","input-cursor","instagram","intersect","journal-album","journal-arrow-down","journal-arrow-up","journal-bookmark","journal-check","journal-code","journal-medical","journal-minus","journal-plus","journal-richtext","journal-text","journal-x","journals","justify","kanban","keyboard","ladder","lamp","layers-half","layout-sidebar","layout-split","layout-three-columns","life-preserver","lightbulb-off","lightning","lightning-charge","link-45deg","linkedin","list-check","list-nested","list-ol","list-stars","list-task","list-ul","mailbox","markdown","mask","mastodon","megaphone","menu-app","menu-button","messenger","mic-mute","minecart","minecart-loaded","moisture","mouse2","mouse3","music-note-beamed","music-note-list","music-player","node-minus","node-plus","nut","octagon","option","outlet","paint-bucket","patch-check","patch-exclamation","patch-minus","patch-plus","patch-question","pause-btn","pause-circle","peace","pen","pencil-square","pentagon","person-badge","person-bounding-box","person-circle","person-lines-fill","phone-landscape","phone-vibrate","pie-chart-fill","pin","pin-angle","pin-fill","pin-map","pip","play-btn","play-circle","plug","plus-circle","plus-square","power","question","question-diamond","question-square","rainbow","receipt","receipt-cutoff","reception-0","reception-1","reception-2","reception-3","record-btn","record-circle","record2","recycle","reddit","reply-all","router","rulers","safe","save2","sd-card","segmented-nav","shield-check","shield-exclamation","shield-lock","shield-shaded","shield-slash","shift","signpost","signpost-2","signpost-split","sim","skip-backward","skip-forward","slack","slash-circle","slash-square","smartwatch","snow","snow2","snow3","sort-alpha-down","sort-alpha-up","sort-numeric-down","sort-numeric-up","soundwave","speedometer2","square-half","stack","star-half","stars","stop-btn","stop-circle","suit-club","suit-diamond","suit-spade","sunglasses","sunrise","sunset","symmetry-horizontal","symmetry-vertical","tablet","tablet-landscape","telegram","telephone-forward","telephone-inbound","telephone-outbound","telephone-plus","telephone-x","text-center","text-indent-left","text-indent-right","text-left","text-right","thermometer-half","thermometer-high","thermometer-low","thermometer-snow","thermometer-sun","three-dots-vertical","toggle-off","toggle-on","toggle2-off","toggle2-on","tornado","translate","trash2","tree","truck-flatbed","tsunami","type","type-bold","type-h1","type-h2","type-h3","type-italic","type-strikethrough","type-underline","ui-checks","ui-checks-grid","ui-radios","ui-radios-grid","union","upc","upc-scan","view-list","view-stacked","vinyl","voicemail","volume-down","volume-mute","volume-off","volume-up","vr","wallet2","water","whatsapp","wifi-1","wifi-2","wifi-off","wind","window-dock","window-sidebar","x-circle","x-diamond","x-octagon","x-square","youtube"];globalThis.Component.register("IconPicker",t=>{t._thisObj=t,t.state=globalThis.NewState({value:"",search:"",open:!1}),t.addEventListener("bind",e=>{t.state.value=e.detail||""}),Object.defineProperty(t,"value",{get:()=>t.state.value,set:e=>{t.state.value=e||""}}),Object.defineProperty(t,"filteredIcons",{get:()=>{var e;const i=(null==(e=t.state.search)?void 0:e.toLowerCase())||"";return b.filter(t=>t.includes(i))}}),t.selectIcon=e=>{t.state.value=e,t.state.open=!1,t.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:e}))},t.toggle=()=>{t.state.open=!t.state.open,t.state.open&&setTimeout(()=>{var e;null==(e=globalThis.$(t,"input"))||e.focus()},10)};const e=e=>{t.contains(e.target)||(t.state.open=!1)};window.addEventListener("click",e),t.addEventListener("remove",()=>window.removeEventListener("click",e))},globalThis.Util.makeDom('\n<div class="dropdown w-100 h-100">\n  <button class="btn btn-outline-secondary dropdown-toggle w-100 h-100 d-flex align-items-center justify-content-between px-2" type="button" $onclick="this.toggle()">\n    <span class="d-flex align-items-center overflow-hidden">\n        <i $if="this.state.value" $class="bi bi-${this.state.value} me-2"></i>\n        <span class="text-truncate" $text="this.state.value || \'{#Select Icon#}\'"></span>\n    </span>\n  </button>\n  <div $class="dropdown-menu p-2 shadow ${this.state.open ? \'show\' : \'\'}" style="width: 300px; max-height: 350px; overflow-y: hidden; display: flex; flex-direction: column; z-index: 1050">\n    <input type="text" class="form-control form-control-sm mb-2" placeholder="Search icons..." $bind="this.state.search" $onclick="event.stopPropagation()">\n    <div class="d-flex flex-wrap gap-1 overflow-auto p-1" style="flex: 1" $onclick="event.stopPropagation()">\n        <template $each="this.filteredIcons" as="icon">\n            <button type="button" class="btn btn-sm btn-outline-light text-dark p-2 d-flex align-items-center justify-content-center" $onclick="this.selectIcon(icon)" $title="icon" style="width: 40px; height: 40px">\n                <i $class="bi bi-${icon}"></i>\n            </button>\n        </template>\n        <div $if="this.filteredIcons.length === 0" class="text-muted p-2 w-100 text-center">No icons found</div>\n    </div>\n  </div>\n</div>\n'),globalThis.Util.makeDom("<style>\n    IconPicker { display: block; height: 100%; }\n    IconPicker .dropdown-menu { left: 0; }\n    IconPicker .btn-outline-light:hover { background-color: var(--bs-primary-bg-subtle); border-color: var(--bs-primary); }\n</style>")),globalThis.AutoForm&&globalThis.AutoForm.register("IconPicker"),globalThis.Component.register("List",t=>{t.mode=t.getAttribute("mode")||"normal",t.fast=t.hasAttribute("fast"),t.collapsible=t.hasAttribute("collapsible");const e=t.fast?t.querySelector(".vs-pad-top"):null,i=t.fast?t.querySelector(".vs-pad-bottom"):null,a={idfield:"id",labelfield:"label",summaryfield:"summary",groupidfield:"id",grouplabelfield:"label",groupsummaryfield:"summary",groupfield:"group",parentfield:"parent",groupicon:"folder",itemicon:"file"};t.collapsed=globalThis.NewState({}),t.state.renderedList=[];const s=()=>{globalThis.Util.updateDefaults(t,a);const e=t.state.list||[],i=[];if("group"===t.mode){const a={};e.forEach(e=>{var i;return(a[i=e[t.groupfield]]??(a[i]=[])).push(e)}),(t.state.groups||[]).forEach(e=>{i.push({type:"group",...e});const s=a[e[t.groupidfield]];s&&s.forEach(t=>i.push({type:"item",...t}))})}else if("tree"===t.mode){const a={};e.forEach(e=>{var i;return(a[i=e[t.parentfield]||""]??(a[i]=[])).push(e)});const s=(e,l,n)=>e.forEach(e=>{var o;const r=e[t.idfield],d=!!(null==(o=a[r])?void 0:o.length),c=t.collapsed[r];i.push({type:"item",...e,_level:l,_hasChildren:d,_parents:n}),d&&!c&&s(a[r],l+1,[...n,r])});s(a[""]||[],0,[])}else e.forEach(t=>i.push({type:"item",...t}));t.state.flatList=i};t.state.__watch("list",s);const l=t.fast?globalThis.VirtualScroll():null;let n=!1;t.refresh=()=>{if(t.fast&&!n){n=!0;try{const a=l.calc(t,t.state.flatList);a&&(e&&(e.style.height=`${a.prevHeight}px`),i&&(i.style.height=`${a.postHeight}px`),t.state.listStartIndex=a.listStartIndex,t.state.renderedList=a.renderedList)}finally{setTimeout(()=>{n=!1},0)}}},t.onItemUpdate=(e,i)=>{t.fast&&l.update(e+(t.state.listStartIndex||0),i)},t.state.__watch("flatList",a=>{t.fast?(e&&(e.style.height="0px"),i&&(i.style.height="0px"),t.state.listStartIndex=0,t.state.renderedList=l.reset(a,t)||[],setTimeout(()=>{t.state.flatList===a&&l.init(a,t.refresh)})):t.state.renderedList=a}),t.selectItem=(e,i)=>{t.hasAttribute("auto-select")&&(t.state.selectedItem=t.state.selectedItem===e[t.idfield]?null:e[t.idfield]),t.dispatchEvent(new CustomEvent("itemclick",{bubbles:!1,detail:{item:e,index:i+(t.fast&&t.state.listStartIndex||0)}}))},t.selectGroup=(e,i)=>{t.hasAttribute("auto-select-group")&&(t.state.selectedGroup=t.state.selectedGroup===e[t.groupidfield]?null:e[t.groupidfield]),t.dispatchEvent(new CustomEvent("groupclick",{bubbles:!1,detail:{item:e,index:i}}))},t.toggleCollapse=e=>{t.collapsible&&e._hasChildren&&(t.collapsed[e[t.idfield]]=!t.collapsed[e[t.idfield]],s())},s()},globalThis.Util.makeDom('\n<div class="list-group overflow-auto" onscroll="this.refresh()" style="overflow-anchor:none">\n        <div class="vs-pad-top flex-shrink-0" style="height:0px;"></div>\n        <template slot-id="item" $each="this.state.renderedList">\n                <div $onupdate="this.onItemUpdate(index, thisNode)" $class="list-group-item d-inline-flex align-items-center pe-2 ${item.type===\'group\'?\'bg-body-tertiary fw-bold ps-2\':\'list-group-item-action \' + (this.mode===\'group\'?\'ps-4\':\'ps-2\')} ${item.type===\'group\'?(this.state?.selectedGroup===item[this.groupidfield]?\'active\':\'\'):(this.state?.selectedItem===item[this.idfield]?\'active\':\'\')}" $onclick="item.type===\'group\'?this.selectGroup(item,index):this.selectItem(item,index)">\n                        <template $if="item.type === \'group\'">\n                                <template $if="this.groupicon">\n                                        <span $class="bi bi-${this.groupicon} text-body"></span>\n                                </template>\n                                <div class="flex-shrink-0 px-1" $text="${item[this.grouplabelfield]}"></div>\n                                <div class="text-muted small flex-fill text-end" $text="${item[this.groupsummaryfield]}"></div>\n                                <div slot-id="group-actions"></div>\n                        </template>\n                        <template $if="item.type === \'item\'">\n                                <template $if="this.mode === \'tree\'">\n                                        <div $style="width:${item._level * 16 + (this.collapsible ? 16 : 0)}px; cursor:${this.collapsible ? \'pointer\' : \'default\'}" class="text-end text-muted flex-shrink-0" $onclick="event.stopPropagation(); this.toggleCollapse(item)">\n                                                <template $if="this.collapsible && item._hasChildren">\n                                                        <i $class="bi ${this.collapsed[item[this.idfield]] ? \'bi-caret-right-fill\' : \'bi-caret-down-fill\'}"></i>\n                                                </template>\n                                        </div>\n                                </template>\n                                <template $if="this.mode === \'tree\'">\n                                        <span $class="text-muted bi bi-${item._hasChildren ? this.groupicon : this.itemicon}"></span>\n                                </template>\n                                <template $if="this.mode !== \'tree\' && this.itemicon">\n                                        <span $class="bi bi-${this.itemicon} text-body"></span>\n                                </template>\n                                <div class="flex-shrink-0 px-1" $text="${item[this.labelfield]}"></div>\n                                <div class="text-muted small flex-fill text-end" $text="${item[this.summaryfield]}"></div>\n                                <div slot-id="item-actions"></div>\n                        </template>\n                </div>\n        </template>\n        <div class="vs-pad-bottom flex-shrink-0" style="height:0px;"></div>\n</div>\n')),globalThis.Component.register("Nav",t=>{t.vertical=t.hasAttribute("vertical"),t.state.openName=t.state.openName||null,t.click=(e,i)=>{e.noselect||i||(globalThis.Hash.nav=e.name),t.dispatchEvent(new CustomEvent("nav",{detail:{item:e},bubbles:!1}))},t.clickSubitem=e=>{t.dispatchEvent(new CustomEvent("nav",{detail:{item:e},bubbles:!1}))},t.toggleGroup=e=>{t.state.openName=t.state.openName===e.name?null:e.name,t.dispatchEvent(new CustomEvent("nav",{detail:{item:e,open:t.state.openName===e.name},bubbles:!1}))}},globalThis.Util.makeDom('\n<div $class="${this.vertical ? \'d-flex flex-column border-end h-100 align-self-stretch overflow-visible\' : \'navbar navbar-expand border-bottom\'} bg-body-secondary px-2 ${this.vertical ? \'py-3\' : \'py-0\'} align-items-center ${this.vertical ? \'align-items-start\' : \'\'}" $style="this.vertical ? \'min-height:0;\' : \'\'">\n\t<div class="d-flex align-items-center gap-2">\n        <template $if="this.state?.brand?.image">\n                <img $src="this.state.brand.image" $class="${this.vertical ? \'mb-2\' : \'me-2\'}" style="height:30px;width:auto;max-width:300px">\n        </template>\n        <template $if="this.state?.brand?.icon">\n                <i $class="bi bi-${this.state.brand.icon} ${this.vertical ? \'mb-2\' : \'me-2\'}"></i>\n        </template>\n        <template $if="this.state?.brand?.label">\n                <span $class="${this.vertical ? \'mb-2 fw-bold\' : \'me-2\'}" style="transform: translateY(3px);" $text="this.state.brand.label"></span>\n        </template>\n\t</div>\n\t<div $class="d-flex ${this.vertical ? \'w-100 flex-fill mt-2 flex-column\' : \'ms-2 align-items-center flex-fill\'}" $style="this.vertical ? \'min-height:0; overflow-y:auto; overflow-x:visible;\' : \'\'">\n\t\t<template $each="this.state?.list || []">\n\t\t\t<div $class="${this.vertical ? \'nav nav-pills flex-column w-100 position-relative\' : \'navbar-nav flex-row align-items-center\'} ${!this.vertical && item.type===\'fill\' ? \'flex-fill\' : \'\'}" style="transform: translateY(3px);">\n\t\t\t<template $if="item.type===\'label\'">\n\t\t\t\t<div $class="${this.vertical ? \'small text-uppercase text-body-secondary fw-semibold px-2 py-1 mt-2\' : \'navbar-text small text-uppercase text-body-secondary fw-semibold px-2\'} ${item.class || \'\'}" $text="item.label"></div>\n\t\t\t</template>\n\t\t\t<template $if="item.type===\'button\'">\n\t\t\t\t<button $class="nav-link ${Hash.nav===item.name?\'active\':\'\'} ${this.vertical ? \'w-100 text-start py-1 px-2\' : \'\'} ${item.class || \'\'}" $onclick="this.click(item)">\n\t\t\t\t\t\t<i $class="bi bi-${item.icon} me-2"></i><span $class="${this.vertical ? \'text-truncate\' : \'d-none d-\' + (this.state?.list?.length>5?\'lg\':\'md\') + \'-inline\'}" $text="item.label"></span>\n\t\t\t\t</button>\n\t\t\t\t</template>\n\t\t\t\t<template $if="item.type===\'dropdown\'">\n\t\t\t\t\t<template $if="this.vertical">\n\t\t\t\t\t\t<div class="w-100">\n\t\t\t\t\t\t\t<button type="button" $class="nav-link w-100 text-start py-1 px-2 d-flex align-items-center justify-content-between ${item.class || \'\'}" $onclick="this.toggleGroup(item)">\n\t\t\t\t\t\t\t\t<span class="d-inline-flex align-items-center">\n\t\t\t\t\t\t\t\t\t<i $class="bi bi-${item.icon} me-2"></i><span class="text-truncate" $text="item.label"></span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<i $class="bi ${this.state.openName===item.name?\'bi-chevron-down\':\'bi-chevron-right\'} small ms-2"></i>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<template $if="this.state.openName===item.name">\n\t\t\t\t\t\t\t\t<div class="d-flex flex-column w-100 ps-2 mt-1">\n\t\t\t\t\t\t\t\t\t<template $each="item.list" as="subitem">\n\t\t\t\t\t\t\t\t\t\t<template $if="subitem.type===\'label\'">\n\t\t\t\t\t\t\t\t\t\t\t<div $class="small text-uppercase text-body-secondary fw-semibold px-2 py-1 ${subitem.class || \'\'}" $text="subitem.label"></div>\n\t\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t\t<template $if="subitem.type===\'button\'">\n\t\t\t\t\t\t\t\t\t\t\t<button $class="nav-link w-100 text-start py-1 px-2 ${subitem.class || \'\'}" $onclick="this.clickSubitem(subitem)">\n\t\t\t\t\t\t\t\t\t\t\t\t<i $class="bi bi-${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span>\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t\t<template $if="subitem.type===\'switch\'">\n\t\t\t\t\t\t\t\t\t\t\t<div $class="d-flex align-items-center px-2 py-2 ${subitem.class || \'\'}">\n\t\t\t\t\t\t\t\t\t\t\t\t<i $class="bi bi-${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span><div class="flex-fill"></div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class="form-switch ms-2"><input class="form-check-input" type="checkbox" $bind="subitem.bind[subitem.name]"></div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</template>\n\t\t\t\t\t<template $if="!this.vertical">\n\t\t\t\t\t\t<div class="dropdown">\n\t\t\t\t\t\t\t<button type="button" $class="nav-link dropdown-toggle ${item.class || \'\'}" data-bs-toggle="dropdown">\n\t\t\t\t\t\t\t\t<i $class="bi bi-${item.icon} me-2"></i><span $class="\'d-none d-\' + (this.state?.list?.length>5?\'lg\':\'md\') + \'-inline\'" $text="item.label"></span>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<div class="dropdown-menu dropdown-menu-end p-2 bg-body-secondary shadow" $style="\'width: \' + (item.width || 250) + \'px;\'">\n\t\t\t\t\t\t\t\t<template $each="item.list" as="subitem">\n\t\t\t\t\t\t\t\t\t<template $if="subitem.type===\'label\'">\n\t\t\t\t\t\t\t\t\t\t<div $class="dropdown-header ${subitem.class || \'\'}" $text="subitem.label"></div>\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t<template $if="subitem.type===\'button\'">\n\t\t\t\t\t\t\t\t\t\t<button $class="dropdown-item ${subitem.class || \'\'}" $onclick="this.clickSubitem(subitem)">\n\t\t\t\t\t\t\t\t\t\t\t<i $class="bi bi-${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t<template $if="subitem.type===\'switch\'">\n\t\t\t\t\t\t\t\t\t\t<div $class="d-flex align-items-center px-3 py-2 ${subitem.class || \'\'}">\n\t\t\t\t\t\t\t\t\t\t\t<i $class="bi bi-${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span><div class="flex-fill"></div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class="form-switch ms-2"><input class="form-check-input" type="checkbox" $bind="subitem.bind[subitem.name]"></div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</template>\n\t\t\t\t</template>\n\t\t\t</div>\n\t\t</template>\n\t</div>\n</div>\n')),globalThis.Component.register("Resizer",t=>{t.isVertical=t.hasAttribute("vertical");const e=parseInt(t.getAttribute("min"))||10,i=parseInt(t.getAttribute("max"))||1e3,a=t.target||t.previousElementSibling;t.addEventListener("bind",e=>{void 0!==e.detail&&null!==e.detail&&(a.style[t.isVertical?"height":"width"]=e.detail+"px")});const s=(a,s,l)=>{const n=a+(t.isVertical?l:s);return n<e?e:n>i?i:n};t.addEventListener("mousedown",e=>{const i=t.isVertical?a.offsetHeight:a.offsetWidth;globalThis.MouseMover.start(e,{onmousemove:({w:e,h:l})=>{const n=s(i,e,l);a.style[t.isVertical?"height":"width"]=n+"px",t.dispatchEvent(new CustomEvent("resizing",{detail:{oldSize:i,newSize:n},bubbles:!1}))},onmouseup:({w:e,h:a})=>{const l=s(i,e,a);t.dispatchEvent(new CustomEvent("resize",{detail:{oldSize:i,newSize:l},bubbles:!1})),t.dispatchEvent(new CustomEvent("change",{detail:l,bubbles:!1}))}})})},globalThis.Util.makeDom("\n<div $class=\"border-${this.isVertical?'top':'start'} flex-shrink-0\" $style=\"${this.isVertical?'height':'width'}:3px;${!this.isVertical?'height':'width'}:100%;cursor:${this.isVertical?'row-resize':'col-resize'}\"></div>\n")),Object.defineProperty(t,"State",{enumerable:!0,get:()=>e.State}),t.APIComponent=u,t.AutoForm=o,t.HTTP=i,t.MouseMover=p,t.UI=a,t.VirtualScroll=r,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@apigo.cc/state")):"function"==typeof define&&define.amd?define(["exports","@apigo.cc/state"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).ApigoBase=t.ApigoBase||{},t.ApigoState)}(this,function(t,e){"use strict";const i={get:({url:t,...e})=>i.request({url:t,method:"GET",...e}),post:({url:t,data:e,...s})=>i.request({url:t,method:"POST",data:e,...s}),put:({url:t,data:e,...s})=>i.request({url:t,method:"PUT",data:e,...s}),delete:({url:t,...e})=>i.request({url:t,method:"DELETE",...e}),head:({url:t,...e})=>i.request({url:t,method:"HEAD",...e}),request:async({url:t,method:e="POST",data:s,headers:a={},responseType:l,timeout:n=1e4})=>{var o;const r={method:e=e.toUpperCase(),signal:null==(o=AbortSignal.timeout)?void 0:o.call(AbortSignal,n)};if(void 0!==s&&"GET"!==e&&"HEAD"!==e){if(s instanceof HTMLFormElement&&(s=new FormData(s)),s&&"object"==typeof s&&!(s instanceof FormData)&&!(s instanceof ArrayBuffer||ArrayBuffer.isView(s))&&Object.values(s).some(t=>t instanceof File||t instanceof Blob||t instanceof FileList||Array.isArray(t)&&t.some(t=>t instanceof File||t instanceof Blob))){const t=new FormData;for(const[e,i]of Object.entries(s))i instanceof FileList||Array.isArray(i)?Array.from(i).forEach(i=>t.append(e,i)):null!=i&&t.append(e,i);s=t}s instanceof FormData?delete a["Content-Type"]:"string"==typeof s||s instanceof ArrayBuffer||ArrayBuffer.isView(s)||(s=JSON.stringify(s),a["Content-Type"]||(a["Content-Type"]="application/json")),r.body=s}for(const t of i.keepHeaders)i._keepHeadersCache[t]&&!a[t]&&(a[t]=i._keepHeadersCache[t]);Object.keys(a).length&&(r.headers=a);const d={error:null,ok:null,status:0,headers:{},responseType:"",result:null};try{const e=await fetch(t,r);Object.assign(d,{ok:e.ok,status:e.status,headers:Object.fromEntries(e.headers.entries())});for(const t of i.keepHeaders){const s=e.headers.get(t);if(s){i._keepHeadersCache[t]=s;try{localStorage.setItem("_http_keep_"+t,s)}catch(t){}}}if(!l){const t=e.headers.get("Content-Type")||"";l=t.includes("application/json")?"json":/image|video|audio|pdf|zip|octet-stream/.test(t)?"binary":"text",d.responseType=l}!1===d.ok&&(d.error=(d.statusText||"HTTP "+d.status+" error")+" for "+t),d.result="json"===l?await e.json():"binary"===l?await e.arrayBuffer():await e.text()}catch(t){Object.assign(d,{error:t.message||String(t),ok:!1})}return d},keepHeaders:["Session-Id","Device-Id"],_keepHeadersCache:{}};for(const t of i.keepHeaders)try{const e=localStorage.getItem("_http_keep_"+t);null!==e&&(i._keepHeadersCache[t]=e)}catch(t){}globalThis.HTTP=i;const s={};globalThis.Component.register("Toast",t=>{t.toast=new bootstrap.Toast(t,{autohide:t.state.delay>0}),globalThis.Util.copyFunction(t,t.toast,"show","hide"),t.addEventListener("show.bs.toast",()=>{if(t.state.delay>0){let e;const i=()=>{t.state.left=t.state.delay/1e3,e=setInterval(()=>{(!t.isConnected||--t.state.left<=0)&&clearInterval(e)},1e3)};i(),t.addEventListener("mouseenter",()=>{clearInterval(e),t.state.left=void 0}),t.addEventListener("mouseleave",i)}})},globalThis.Util.makeDom('\n<div class="toast align-items-center border-0 m-1">\n  <div $class="toast-body rounded p-3 text-bg-${this.state?.type}">\n    <div class="d-flex align-items-center">\n      <div class="flex-grow-1">\n        <span style="white-space:pre-wrap" class="fs-6" $text="this.state?.message"></span>\n        <template $if="this.state?.left !== undefined">\n          <span class="small text-dim ms-2" $text="${this.state?.left}s"></span>\n        </template>\n      </div>\n      <button type="button" class="btn btn-link ms-3 bi bi-x-lg link-reset" style="color:inherit" data-bs-dismiss="toast"></button>\n    </div>\n    <div class="d-flex justify-content-end gap-3">\n      <template $each="this.state?.buttons || [\'{#Close#}\']">\n        <button type="button" $class="btn btn-sm btn-${this.state?.type} mt-2" data-bs-dismiss="toast" $onclick="this.result=index+1" $text="item"></button>\n      </template>\n    </div>\n  </div>\n</div>\n'),globalThis.Util.makeDom('<div toast-container="default" class="position-fixed bottom-0 end-0 overflow-auto" style="z-index:3000;max-height:80%"></div>')),s.toast=function(t,e={}){const i=e.delay??5e3,s=document.createElement("Toast");s.state={delay:i,left:i?i/1e3:void 0,type:e.type||"primary",message:t,buttons:e.buttons||[]},globalThis.$(`[toast-container="${e.container||"default"}"]`).appendChild(s),Promise.resolve().then(()=>s.show())},s.toastConfirm=function(t,e={}){return new Promise(i=>s.toast(t,{buttons:["{#Confirm#}"],...e}).then(t=>i(1===t)).catch(()=>i(!1)))},globalThis.UI=s;const a=globalThis.Util.makeDom('\n<div class="auto-form-root">\n  <form $class="${this.inline ? \'d-flex flex-wrap align-items-center gap-3\' : (this.vertical ? \'d-flex flex-column\' : (this.horizontal ? \'auto-grid-form forced-horizontal\' : \'auto-grid-form\'))}" $onsubmit="event.stopPropagation();event.preventDefault();this.submit()">\n  \n  <template $each="this.state.schema || []">\n    <div style="display:contents" $if="this.checkIf(item)">\n        <label $name="item.name" $class="${this.inline ? \'mb-0 text-muted text-nowrap\' : \'col-form-label text-muted\'}" $text="item.label"></label>\n        <div control-wrapper $class="${this.inline ? \'d-flex align-items-center\' : \'mb-3 d-flex align-items-center\'}">\n          <input $if="[\'text\', \'password\', \'email\', \'number\', \'date\', \'datetime\', \'file\'].includes(item.type)" $name="item.name" $type="item.type" $.="item.setting || {}" $bind="this.data[item.name]" $class="form-control ${item.type === \'number\' ? \'text-end\' : \'\'}">\n          \n          <select $if="item.type === \'select\'" $name="item.name" $.="item.setting || {}" $bind="this.data[item.name]" class="form-select">\n              <option value="" $if="item.placeholder" $text="item.placeholder" disabled selected></option>\n              <option $each="item.options" as="opt" $value="opt.value !== undefined ? opt.value : opt" $text="opt.label || opt"></option>\n          </select>\n          \n          <div $if="[\'checkbox\', \'radio\'].includes(item.type)" class="d-flex align-items-center flex-wrap gap-3 h-100" style="padding: 0 0.75rem; min-height: calc(2.25rem + 2px);">\n              <label $each="item.options || [item.text||item.label||item.name]" as="opt" class="form-check mb-0 d-flex align-items-center" style="padding-left:0; cursor:pointer;">\n                  <input $name="item.name" class="form-check-input m-0 me-2" style="float:none;" $type="item.type" $.="item.setting || {}" $value="item.options ? (opt.value !== undefined ? opt.value : opt) : \'on\'" $bind="this.data[item.name]">\n                  <span $if="!this.inline || (item.options && item.options.length > 0)" $text="opt.label || opt" class="form-check-label"></span>\n              </label>\n          </div>\n\n          <div $if="item.type === \'switch\'" class="form-check form-switch fs-5 d-flex align-items-center m-0" style="padding: 0 0.75rem; min-height: calc(2.25rem + 2px); display:flex !important;">\n              <input $name="item.name" class="form-check-input m-0" style="float:none; cursor:pointer" type="checkbox" $bind="this.data[item.name]">\n          </div>\n          \n          <textarea $if="item.type === \'textarea\'" $name="item.name" class="form-control" $.="item.setting || {}" $bind="this.data[item.name]"></textarea>\n        </div>\n    </div>\n  </template>\n\n  <div $if="!this.nobutton" $class="${this.inline ? \'\' : \'d-flex justify-content-end align-items-baseline gap-3 mt-2\'}" $style="${this.inline ? \'\' : \'grid-column:1/-1\'}">\n      <div slot-id="actions"></div>\n      <button type="submit" class="btn btn-primary" $text="this.submitlabel || \'{#Submit#}\'"></button>\n  </div>\n  </form>\n</div>\n'),l=globalThis.Util.makeDom("<style>\n        .auto-grid-form { display: block; }\n        .auto-grid-form .col-form-label { text-align: left; margin-bottom: 0.25rem; padding-top: 0; }\n\n        @media (min-width: 576px) { \n                .auto-grid-form { display: grid; grid-template-columns: max-content 1fr; gap: 0 1.5rem; } \n                .auto-grid-form .col-form-label { text-align: right; margin-bottom: 1rem; padding-right: 0; max-width: 200px; padding-top: calc(0.375rem + 1px); } \n        .auto-grid-form [control-wrapper] { min-height: calc(2.25rem + 2px); }\n        }\n\n        .auto-grid-form.forced-horizontal { display: grid !important; grid-template-columns: max-content 1fr !important; gap: 0 1.5rem !important; }\n        .auto-grid-form.forced-horizontal .col-form-label { text-align: right !important; margin-bottom: 1rem !important; padding-right: 0 !important; max-width: 200px !important; padding-top: calc(0.375rem + 1px) !important; }\n    .auto-grid-form.forced-horizontal [control-wrapper] { min-height: calc(2.25rem + 2px) !important; }\n\n    .auto-form-root .form-check-input { width: 1.2em; height: 1.2em; }\n    .auto-form-root .form-switch .form-check-input { width: 2em; }\n</style>");globalThis.Component.register("AutoForm",t=>{t.state.schema||(t.state.schema=[]);const e=t=>t&&"object"==typeof t&&!t.__isProxy?globalThis.NewState(t):t;t.state.__watch("data",i=>t.data=e(i)),t.data=e(t.state.data||{}),t.vertical=t.hasAttribute("vertical"),t.horizontal=t.hasAttribute("horizontal"),t.inline=t.hasAttribute("inline"),t.nobutton=t.hasAttribute("nobutton"),t.request={method:"POST"},t.response={},t.result=null,t.form=globalThis.$(t,"form"),t.submit=(e={})=>{var i,s;if(!t.form.reportValidity())return null==(s=null==(i=globalThis.UI)?void 0:i.toast)?void 0:s.call(i,"{#verify failed#}",{type:"danger"});if(!t.dispatchEvent(new CustomEvent("submit",{detail:t.data,cancelable:!0,bubbles:!1})))return;const a={...t.request,data:t.data,noui:!0,...e};let l=null;if(t.api)l=t.api.do(a);else{if(!t.request.url)return console.warn("{#please config .api or .request.url to auto submit#}");l=globalThis.HTTP.request(a)}l.then(e=>{if(t.response=e,t.result=e.result,"object"==typeof e.result&&e.result.error)throw new Error(e.result.error);t.dispatchEvent(new CustomEvent("response",{detail:e,bubbles:!1}))}).catch(e=>{var i;(null==(i=globalThis.UI)?void 0:i.toast)&&globalThis.UI.toast(e.message,{type:"danger"}),t.dispatchEvent(new CustomEvent("error",{detail:e,bubbles:!0}))})},t.checkIf=e=>{if(!e.if)return!0;try{return new Function("Hash","LocalStorage","State","item","data","return "+e.if).call(t,globalThis.Hash,globalThis.LocalStorage,globalThis.State,e,t.data)}catch(t){return!1}}},a,l);const n=t=>{let e=t.querySelector("[control-wrapper]");if(e)return e;for(const i of t.querySelectorAll("template"))if(e=n(i.content),e)return e;return null},o={customTypes:[],register:(t,e)=>{const i=e||t;o.customTypes.find(e=>e.name===t)||(o.customTypes.push({name:t,typeName:i}),o._addAutoFormComponent(t,i))},_addAutoFormComponent:(t,e)=>{const i=n(a);if(i){const s=globalThis.Util.makeDom(`<${t} $if="item.type?.toLowerCase() === '${e.toLowerCase()}'" $name="item.name" $.="item.setting || {}" $bind="this.data[item.name]" class="w-100"></${t}>`);i.appendChild(s)}}};globalThis.AutoForm=o;const r=(t={})=>{const e=new Map,i=new Map;let s=1;const a=globalThis.Util.newAvg();let l=0,n=0,o=0,r=null,d=null,c=!1;const m=t.itemHeight||null;return{reset:(t,p)=>{if(c=!1,e.clear(),i.clear(),a.clear(),o=0,r=null,d=null,!(null==t?void 0:t.length))return[];const u=t.length;s=Math.ceil(Math.sqrt(u))||10;const h=window.getComputedStyle(p);l=parseFloat(h.paddingTop)||0,n=parseFloat(h.rowGap)||0;const b=Math.max(10,Math.ceil((p.clientHeight||100)/(m||32)));return t.slice(0,Math.min(3*b,u))},init:(t,l)=>{if(c)return;const n=t.length;let o=m||a.get()||32;n>0&&"object"==typeof t[0]&&null!==t[0]&&t[0]._itemHeight&&(o=t[0]._itemHeight),a.add(o),null===r&&(r=0,d=0);for(let i=0;i<n;i++)if(!e.has(i)){const s="object"==typeof t[i]&&null!==t[i]&&t[i]._itemHeight?t[i]._itemHeight:o;e.set(i,s)}for(let t=0;t<n;t+=s)i.set(t,Math.min(s,n-t)*o);c=!0,l()},update:(t,l)=>{if(0===l.offsetHeight)return;if(null===r){const t=window.getComputedStyle(l);r=parseFloat(t.marginTop)||0,d=parseFloat(t.marginBottom)||0}0!==t||o||(o=r);const c=l.offsetHeight+r+d+n,m=e.get(t);if(c!==m){e.set(t,c),a.add(c);const l=c-(m||0),n=t-t%s;i.has(n)&&i.set(n,i.get(n)+l)}},calc:(t,r)=>{if(!c||!r)return null;const d=r.length,m=Math.max(16,a.get()||32);let p=Math.max(10,Math.ceil((t.clientHeight||100)/m)),u=l+o+n,h=0,b=0,f=0,g=0,v=[];const y=t.scrollTop;let x=0;for(let t=0;t<d;t++){if(++x>2*d)throw new Error("VirtualScroll infinite loop");if(0===b){const a=i.get(t);if(a&&u+a<=y&&t+s<d)u+=a,t+=s-1;else{const i=e.get(t);if(u+i<=y&&t<d-1)u+=i;else{b=1;let i=Math.max(0,t);f=Math.max(0,i-p),g=Math.min(f+3*p,d),t=g-1,v=r.slice(f,g);for(let t=f;t<i;t++)u-=e.get(t)}}}else if(1===b){const a=i.get(t);a?(h+=a,t+=s-1):h+=e.get(t)}}return{prevHeight:Math.max(0,u-l-o-n-(f>0?n:0)),postHeight:h>0?Math.max(0,h-2*n):0,renderedList:v,listStartIndex:f}}}};globalThis.VirtualScroll=r;let d=!1,c={},m={};const p={start:(t,{onmousemove:e,onmouseup:i})=>{c={x:t.clientX,y:t.clientY,w:0,h:0},m={onmousemove:e,onmouseup:i},d=!0}};"undefined"!=typeof document&&(document.addEventListener("mouseup",t=>{var e;d&&(d=!1,null==(e=m.onmouseup)||e.call(m,{event:t,...c}))}),document.addEventListener("mousemove",t=>{var e;d&&(c.w=t.clientX-c.x,c.h=t.clientY-c.y,null==(e=m.onmousemove)||e.call(m,{event:t,...c}))})),globalThis.MouseMover=p;const u=globalThis.Component.register("API",t=>{const e=t.request&&"object"==typeof t.request?t.request:{},i=t.response&&"object"==typeof t.response?t.response:{},s=t.result&&"object"==typeof t.result?t.result:{};t.request=globalThis.NewState({url:"",method:"GET",headers:{},data:null,timeout:1e4,responseType:"",...e,headers:{...e.headers||{}}}),t.response=globalThis.NewState({loading:!1,ok:null,status:null,error:null,headers:{},responseType:"",result:null,...i,headers:{...i.headers||{}}}),t.result=globalThis.NewState(s),t.do=(e={})=>new Promise((i,s)=>{const a={...t.request,...e};if(!a.url)throw new Error(".url is required");a.headers={...t.request.headers,...e.headers},t.response.loading=!0,globalThis.HTTP.request(a).then(e=>{if(Object.keys(e).forEach(i=>{"result"!==i&&(t.response[i]=e[i])}),e.result&&"object"==typeof e.result&&t.result&&"object"==typeof t.result?Object.assign(t.result,e.result):t.result=e.result,t.response.loading=!1,!1===e.ok)throw new Error(e.error);if("object"==typeof e.result&&e.result.error)throw new Error(e.result.error);t.dispatchEvent(new CustomEvent("response",{detail:e,bubbles:!1})),i(e)}).catch(i=>{var a;!e.noui&&(null==(a=globalThis.UI)?void 0:a.toast)&&globalThis.UI.toast(i.message,{type:"danger"}),t.dispatchEvent(new CustomEvent("error",{detail:i,bubbles:!0})),s(i)})});let a=null;t.request.__watch(null,()=>{t.hasAttribute("auto")&&t.request.url&&(a||(a=Promise.resolve().then(()=>{t.do(),a=null})))})});globalThis.Component.register("Modal",t=>{t.modal=new bootstrap.Modal(t),t.addEventListener("bind",e=>{e.detail?t.modal.show():t.modal.hide()}),t.addEventListener("hide.bs.modal",()=>{var e;null==(e=document.activeElement)||e.blur(),t.dispatchEvent(new CustomEvent("change",{bubbles:!1,detail:!1}))}),globalThis.Util.copyFunction(t,t.modal,"show","hide")},globalThis.Util.makeDom('\n<div class="modal fade" data-bs-backdrop="static">\n  <div class="modal-dialog modal-dialog-centered">\n    <div $class="modal-content border-${this.state?.type || \'primary\'} border-2 shadow-lg">\n      <div slot-id="header" class="modal-header py-2 px-3 bg-light">\n        <h6 $class="modal-title fw-bold text-${this.state?.type || \'primary\'}" $text="this.state?.title"></h6>\n        <button type="button" class="btn btn-link ms-2 bi bi-x-lg link-reset p-0" style="color:inherit; text-decoration:none" data-bs-dismiss="modal"></button>\n      </div>\n      <div slot-id="body" class="modal-body p-3"></div>\n      <div slot-id="footer" class="modal-footer py-2 px-3 bg-light"></div>\n    </div>\n  </div>\n</div>\n')),globalThis.Component.register("Dialog",globalThis.Component.getSetupFunction("Modal"),globalThis.Util.makeDom('\n<div class="modal fade" data-bs-backdrop="static">\n  <div class="modal-dialog modal-dialog-centered">\n    <div $class="modal-content border-${this.state?.type || \'primary\'} border-2 shadow-lg">\n      <template $if="this.state?.title">\n        <div $class="modal-header py-2 px-3 bg-light fw-bold text-${this.state?.type || \'primary\'}" $text="this.state?.title"></div>\n      </template>\n      <div class="modal-body p-4 text-center">\n        <div $text="this.state?.message" class="fs-5 text-secondary"></div>\n      </div>\n      <div class="modal-footer py-2 px-3 bg-light border-0 d-flex justify-content-center gap-3">\n        <template $each="this.state?.buttons">\n          <button type="button" $class="btn btn-${this.state?.type} px-4" data-bs-dismiss="modal" $onclick="this.result=index+1" $text="item"></button>\n        </template>\n      </div>\n    </div>\n  </div>\n</div>\n'));let h=0;globalThis.UI.showDialog=function({title:t="",message:e="",buttons:i=["{#Close#}"],type:s="body"}){const a=document.body.appendChild(document.createElement("Dialog"));return a.style.zIndex=2e3+ ++h,Promise.resolve().then(()=>{Object.assign(a.state,{message:e,title:t,type:s,buttons:i}),a.show()}),new Promise(t=>{a.addEventListener("change",e=>{h--,t(a.result||0),a.remove()})})},globalThis.UI.alert=function(t,e={}){return globalThis.UI.showDialog({message:t,...e})},globalThis.UI.confirm=function(t,e={}){return new Promise(i=>globalThis.UI.showDialog({message:t,buttons:["{#Cancel#}","{#Confirm#}"],...e}).then(t=>i(t>=2)).catch(()=>i(!1)))},globalThis.Component.register("TagsInput",t=>{t._thisObj=t,t.addEventListener("bind",e=>{t.state.tags=Array.isArray(e.detail)?e.detail:[]})},globalThis.Util.makeDom(`\n<div class="form-control d-flex flex-wrap gap-1 align-items-center" style="min-height:38px;cursor:text">\n  <template $each="this.state.tags">\n    <button type="button" class="btn btn-sm btn-outline-primary rounded-pill py-0 px-2" $onkeydown='${globalThis.Util.getFunctionBody(function(t){["Backspace","Delete"].includes(t.key)&&(t.preventDefault(),this.state.tags.splice(index,1),this.state.tags=this.state.tags,this.dispatchEvent(new CustomEvent("change",{bubbles:!1,detail:this.state.tags})),Promise.resolve().then(()=>{const t=globalThis.$$(this,"button");(t.length>0?t[index>0?index-1:0]:globalThis.$(this,"input")).focus()}))})}' $text="item"></button>\n  </template>\n  <input type="text" class="border-0 shadow-none py-0 px-2 flex-grow-1 bg-transparent" placeholder="{#new tag name#}" style="min-width:100px;width:0;outline:none" $onchange="event.stopPropagation()" $oninput="event.stopPropagation()" $onkeydown='${globalThis.Util.getFunctionBody(function(t){if(!t.isComposing&&["Enter",","," "].includes(t.key)){t.preventDefault();const e=thisNode.value.trim();e&&!this.state.tags.includes(e)&&(this.state.tags.push(e),this.state.tags=this.state.tags,this.dispatchEvent(new CustomEvent("change",{bubbles:!1,detail:this.state.tags}))),thisNode.value=""}})}'>\n</div>\n`),globalThis.Util.makeDom("<style>TagsInput button:focus {background-color:var(--bs-btn-hover-bg);color:var(--bs-btn-hover-color)}</style>")),globalThis.AutoForm&&globalThis.AutoForm.register("TagsInput"),globalThis.Component.register("DatePicker",t=>{t._thisObj=t,t.state=globalThis.NewState({start:"",end:""}),t.addEventListener("bind",e=>{var i,s,a;t.state.start=e.detail||"";const l=t.closest("AutoForm"),n=t.getAttribute("name"),o=null==(s=null==(i=null==l?void 0:l.state)?void 0:i.schema)?void 0:s.find(t=>t.name===n),r=(null==(a=null==o?void 0:o.setting)?void 0:a.rangeEnd)||t.rangeEnd;l&&r&&(t.state.end=l.data[r]||"")}),Object.defineProperty(t,"isRange",{get:()=>{var e,i,s;const a=t.closest("AutoForm"),l=t.getAttribute("name"),n=null==(i=null==(e=null==a?void 0:a.state)?void 0:e.schema)?void 0:i.find(t=>t.name===l);return!(!(null==(s=null==n?void 0:n.setting)?void 0:s.rangeEnd)&&!t.rangeEnd)}}),Object.defineProperty(t,"value",{get:()=>t.state.start,set:e=>{t.state.start=e||""}}),t.updateStart=e=>{t.state.start=e,t.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:e}))},t.updateEnd=e=>{var i,s,a;t.state.end=e;const l=t.closest("AutoForm"),n=t.getAttribute("name"),o=null==(s=null==(i=null==l?void 0:l.state)?void 0:i.schema)?void 0:s.find(t=>t.name===n),r=(null==(a=null==o?void 0:o.setting)?void 0:a.rangeEnd)||t.rangeEnd;l&&r&&(l.data[r]=e)}},globalThis.Util.makeDom('\n<div class="d-flex align-items-center gap-1 w-100">\n  <input type="date" class="form-control h-100" $bind="this.state.start" $onchange="this.updateStart(thisNode.value)">\n  <template $if="this.isRange">\n    <span class="text-muted mx-1">-</span>\n    <input type="date" class="form-control h-100" $bind="this.state.end" $onchange="this.updateEnd(thisNode.value)">\n  </template>\n</div>\n')),globalThis.AutoForm&&globalThis.AutoForm.register("DatePicker"),globalThis.Component.register("ColorPicker",t=>{t._thisObj=t,t.state=globalThis.NewState({value:"#000000"}),t.addEventListener("bind",e=>{t.state.value=e.detail||"#000000"}),Object.defineProperty(t,"value",{get:()=>t.state.value,set:e=>{t.state.value=e||"#000000"}}),t.updateValue=e=>{t.state.value=e,t.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:e}))}},globalThis.Util.makeDom('\n<div class="d-flex align-items-center gap-2 w-100 h-100">\n  <input type="color" class="form-control form-control-color flex-shrink-0" style="width: 3rem; padding: 0.25rem" $bind="this.state.value" $onchange="this.updateValue(thisNode.value)">\n  <input type="text" class="form-control" $bind="this.state.value" $onchange="this.updateValue(thisNode.value)">\n</div>\n')),globalThis.AutoForm&&globalThis.AutoForm.register("ColorPicker");const b=["alarm","archive","arrow-left","arrow-right","bag","bank","basket","bell","bookmark","box","briefcase","calendar","camera","cart","chat","check","chevron-down","chevron-left","chevron-right","chevron-up","clock","cloud","code","collection","command","cpu","credit-card","cup","dash","database","display","door-closed","download","droplet","earbuds","edit","egg","eject","envelope","eraser","eye","file","filter","flag","folder","gear","gem","gift","graph-up","grid","hammer","hand-thumbs-up","heart","house","image","inbox","info-circle","journal","key","laptop","layers","layout-text-sidebar-reverse","lightbulb","link","list","lock","map","mic","moon","mouse","music-note","newspaper","palette","paperclip","pause","pencil","person","phone","pie-chart","play","plus","printer","puzzle","question-circle","reception-4","record","reply","rss","save","search","send","server","share","shield","shop","shuffle","skip-end","skip-start","slash","sliders","smartphone","speaker","speedometer","spellcheck","square","star","stickies","stop","stopwatch","suit-heart","sun","table","tag","tags","telephone","terminal","text-paragraph","thermometer","three-dots","ticket","tools","trash","trophy","truck","tv","umbrella","unlock","upload","vector-pen","wallet","watch","wifi","window","wrench","x","zoom-in","zoom-out","activity","at","award","backspace","badge-3d","badge-4k","badge-8k","badge-ad","badge-ar","badge-cc","badge-hd","badge-tm","badge-vo","badge-vr","badge-wc","bar-chart","battery","bicycle","binoculars","blockquote-left","blockquote-right","book","bookshelf","bootstrap","border-all","border-bottom","border-center","border-inner","border-left","border-middle","border-outer","border-right","border-style","border-top","border-width","bounding-box","box-arrow-down","box-arrow-in-down","box-arrow-in-left","box-arrow-in-right","box-arrow-in-up","box-arrow-left","box-arrow-right","box-arrow-up","box-seam","brightness-alt-high","brightness-alt-low","brightness-high","brightness-low","broadcast","brush","bucket","bug","building","bullseye","calculator","calendar-check","calendar-date","calendar-day","calendar-event","calendar-minus","calendar-month","calendar-plus","calendar-range","calendar-week","calendar-x","calendar2","calendar3","calendar4","camera-reels","camera-video","capslock","card-checklist","card-heading","card-image","card-list","card-text","caret-down","caret-left","caret-right","caret-up","cart-check","cart-dash","cart-plus","cart-x","cash","cash-stack","cast","chat-dots","chat-left","chat-quote","chat-right","chat-square","chat-text","check-all","check-circle","check-square","circle","clipboard","cloud-arrow-down","cloud-arrow-up","cloud-check","cloud-download","cloud-fog","cloud-hail","cloud-lightning","cloud-minus","cloud-moon","cloud-plus","cloud-rain","cloud-slash","cloud-snow","cloud-sun","cloud-upload","clouds","cloudy","code-slash","code-square","collection-play","columns","columns-gap","compass","cone","cone-striped","controller","credit-card-2-back","credit-card-2-front","crop","cup-straw","cursor","dash-circle","dash-square","diagram-2","diagram-3","diamond","dice-1","dice-2","dice-3","dice-4","dice-5","dice-6","disc","discord","distribute-horizontal","distribute-vertical","door-open","dot","droplet-half","easel","egg-fried","emoji-angry","emoji-dizzy","emoji-expressionless","emoji-frown","emoji-heart-eyes","emoji-laughing","emoji-neutral","emoji-smile","emoji-sunglasses","emoji-wink","envelope-open","exclamation","exclamation-circle","exclamation-diamond","exclamation-octagon","exclamation-square","exclamation-triangle","eye-slash","eyedropper","facebook","file-arrow-down","file-arrow-up","file-binary","file-break","file-check","file-code","file-diff","file-earmark","file-excel","file-image","file-lock","file-medical","file-minus","file-music","file-pdf","file-person","file-play","file-plus","file-post","file-ppt","file-richtext","file-slides","file-spreadsheet","file-text","file-word","file-zip","files","film","filter-circle","filter-left","filter-right","filter-square","fingerprint","flower1","flower2","flower3","folder-check","folder-minus","folder-plus","folder-symlink","folder-x","folder2-open","fonts","forward","front","fullscreen","fullscreen-exit","funnel","gear-wide","gender-female","gender-male","gender-trans","geo","geo-alt","github","globe","google","graph-down","grid-1x2","grid-3x2","grid-3x3","grip-horizontal","grip-vertical","hand-index","hand-thumbs-down","handbag","hash","headphones","headset","heart-half","heptagon","hourglass","hourglass-bottom","hourglass-split","hourglass-top","house-door","hr","hurricane","image-alt","images","infinity","input-cursor","instagram","intersect","journal-album","journal-arrow-down","journal-arrow-up","journal-bookmark","journal-check","journal-code","journal-medical","journal-minus","journal-plus","journal-richtext","journal-text","journal-x","journals","justify","kanban","keyboard","ladder","lamp","layers-half","layout-sidebar","layout-split","layout-three-columns","life-preserver","lightbulb-off","lightning","lightning-charge","link-45deg","linkedin","list-check","list-nested","list-ol","list-stars","list-task","list-ul","mailbox","markdown","mask","mastodon","megaphone","menu-app","menu-button","messenger","mic-mute","minecart","minecart-loaded","moisture","mouse2","mouse3","music-note-beamed","music-note-list","music-player","node-minus","node-plus","nut","octagon","option","outlet","paint-bucket","patch-check","patch-exclamation","patch-minus","patch-plus","patch-question","pause-btn","pause-circle","peace","pen","pencil-square","pentagon","person-badge","person-bounding-box","person-circle","person-lines-fill","phone-landscape","phone-vibrate","pie-chart-fill","pin","pin-angle","pin-fill","pin-map","pip","play-btn","play-circle","plug","plus-circle","plus-square","power","question","question-diamond","question-square","rainbow","receipt","receipt-cutoff","reception-0","reception-1","reception-2","reception-3","record-btn","record-circle","record2","recycle","reddit","reply-all","router","rulers","safe","save2","sd-card","segmented-nav","shield-check","shield-exclamation","shield-lock","shield-shaded","shield-slash","shift","signpost","signpost-2","signpost-split","sim","skip-backward","skip-forward","slack","slash-circle","slash-square","smartwatch","snow","snow2","snow3","sort-alpha-down","sort-alpha-up","sort-numeric-down","sort-numeric-up","soundwave","speedometer2","square-half","stack","star-half","stars","stop-btn","stop-circle","suit-club","suit-diamond","suit-spade","sunglasses","sunrise","sunset","symmetry-horizontal","symmetry-vertical","tablet","tablet-landscape","telegram","telephone-forward","telephone-inbound","telephone-outbound","telephone-plus","telephone-x","text-center","text-indent-left","text-indent-right","text-left","text-right","thermometer-half","thermometer-high","thermometer-low","thermometer-snow","thermometer-sun","three-dots-vertical","toggle-off","toggle-on","toggle2-off","toggle2-on","tornado","translate","trash2","tree","truck-flatbed","tsunami","type","type-bold","type-h1","type-h2","type-h3","type-italic","type-strikethrough","type-underline","ui-checks","ui-checks-grid","ui-radios","ui-radios-grid","union","upc","upc-scan","view-list","view-stacked","vinyl","voicemail","volume-down","volume-mute","volume-off","volume-up","vr","wallet2","water","whatsapp","wifi-1","wifi-2","wifi-off","wind","window-dock","window-sidebar","x-circle","x-diamond","x-octagon","x-square","youtube"];globalThis.Component.register("IconPicker",t=>{t._thisObj=t,t.state=globalThis.NewState({value:"",search:"",open:!1}),t.addEventListener("bind",e=>{t.state.value=e.detail||""}),Object.defineProperty(t,"value",{get:()=>t.state.value,set:e=>{t.state.value=e||""}}),Object.defineProperty(t,"filteredIcons",{get:()=>{var e;const i=(null==(e=t.state.search)?void 0:e.toLowerCase())||"";return b.filter(t=>t.includes(i))}}),t.selectIcon=e=>{t.state.value=e,t.state.open=!1,t.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:e}))},t.toggle=()=>{t.state.open=!t.state.open,t.state.open&&setTimeout(()=>{var e;null==(e=globalThis.$(t,"input"))||e.focus()},10)};const e=e=>{t.contains(e.target)||(t.state.open=!1)};window.addEventListener("click",e),t.addEventListener("remove",()=>window.removeEventListener("click",e))},globalThis.Util.makeDom('\n<div class="dropdown w-100 h-100">\n  <button class="btn btn-outline-secondary dropdown-toggle w-100 h-100 d-flex align-items-center justify-content-between px-2" type="button" $onclick="this.toggle()">\n    <span class="d-flex align-items-center overflow-hidden">\n        <i $if="this.state.value" $class="bi bi-${this.state.value} me-2"></i>\n        <span class="text-truncate" $text="this.state.value || \'{#Select Icon#}\'"></span>\n    </span>\n  </button>\n  <div $class="dropdown-menu p-2 shadow ${this.state.open ? \'show\' : \'\'}" style="width: 300px; max-height: 350px; overflow-y: hidden; display: flex; flex-direction: column; z-index: 1050">\n    <input type="text" class="form-control form-control-sm mb-2" placeholder="Search icons..." $bind="this.state.search" $onclick="event.stopPropagation()">\n    <div class="d-flex flex-wrap gap-1 overflow-auto p-1" style="flex: 1" $onclick="event.stopPropagation()">\n        <template $each="this.filteredIcons" as="icon">\n            <button type="button" class="btn btn-sm btn-outline-light text-dark p-2 d-flex align-items-center justify-content-center" $onclick="this.selectIcon(icon)" $title="icon" style="width: 40px; height: 40px">\n                <i $class="bi bi-${icon}"></i>\n            </button>\n        </template>\n        <div $if="this.filteredIcons.length === 0" class="text-muted p-2 w-100 text-center">No icons found</div>\n    </div>\n  </div>\n</div>\n'),globalThis.Util.makeDom("<style>\n    IconPicker { display: block; height: 100%; }\n    IconPicker .dropdown-menu { left: 0; }\n    IconPicker .btn-outline-light:hover { background-color: var(--bs-primary-bg-subtle); border-color: var(--bs-primary); }\n</style>")),globalThis.AutoForm&&globalThis.AutoForm.register("IconPicker"),globalThis.Component.register("List",t=>{t.mode=t.getAttribute("mode")||"normal",t.fast=t.hasAttribute("fast"),t.collapsible=t.hasAttribute("collapsible");const e=t.fast?t.querySelector(".vs-pad-top"):null,i=t.fast?t.querySelector(".vs-pad-bottom"):null,s={idfield:"id",labelfield:"label",summaryfield:"summary",groupidfield:"id",grouplabelfield:"label",groupsummaryfield:"summary",groupfield:"group",parentfield:"parent",groupicon:"folder",itemicon:"file"};t.collapsed=globalThis.NewState({}),t.state.renderedList=[];const a=()=>{var e;globalThis.Util.updateDefaults(t,s);let i=t.state.list||[];const a=t.state.filter,l=t.state.order;if(l)if("function"==typeof l)i=[...i].sort(l);else if("string"==typeof l){const t=l.trim().split(/\s+/),s=t[0],a="desc"===(null==(e=t[1])?void 0:e.toLowerCase())||s.startsWith("-"),n=s.startsWith("-")?s.slice(1):s;i=[...i].sort((t,e)=>{const i=t[n],s=e[n];return null==i?a?1:-1:null==s?a?-1:1:"string"==typeof i&&"string"==typeof s?a?s.localeCompare(i):i.localeCompare(s):a?s>i?1:-1:i>s?1:-1})}const n=[];if("group"===t.mode){let e=i;if(a)if("function"==typeof a)e=i.filter(a);else if("string"==typeof a){const s=a.trim().toLowerCase();s&&(e=i.filter(e=>{const i=String(e[t.labelfield]||"").toLowerCase(),a=String(e[t.summaryfield]||"").toLowerCase();return i.includes(s)||a.includes(s)}))}const s={};e.forEach(e=>{var i;return(s[i=e[t.groupfield]]??(s[i]=[])).push(e)}),(t.state.groups||[]).forEach(e=>{const i=s[e[t.groupidfield]],l=String(e[t.grouplabelfield]||"").toLowerCase(),o=String(e[t.groupsummaryfield]||"").toLowerCase(),r="string"==typeof a?a.trim().toLowerCase():"",d=!!r&&(l.includes(r)||o.includes(r));(i&&i.length>0||d||!a)&&(n.push({type:"group",...e}),i&&i.forEach(t=>n.push({type:"item",...t})))})}else if("tree"===t.mode){const e={};i.forEach(i=>{e[i[t.idfield]]=i});const s=new Set;i.forEach(e=>{let i=!1;if(a){if("function"==typeof a)i=a(e);else if("string"==typeof a){const s=a.trim().toLowerCase();if(s){const a=String(e[t.labelfield]||"").toLowerCase(),l=String(e[t.summaryfield]||"").toLowerCase();i=a.includes(s)||l.includes(s)}else i=!0}}else i=!0;i&&s.add(e[t.idfield])});const l=new Set(s);a&&s.forEach(i=>{let s=e[i];for(;s;){const i=s[t.parentfield];if(!i)break;if(l.has(i))break;l.add(i),s=e[i]}});const o={};i.forEach(e=>{if(!a||l.has(e[t.idfield])){const i=e[t.parentfield]||"";(o[i]??(o[i]=[])).push(e)}});const r=(e,i,s)=>e.forEach(e=>{var a;const l=e[t.idfield],d=!!(null==(a=o[l])?void 0:a.length),c=t.collapsed[l];n.push({type:"item",...e,_level:i,_hasChildren:d,_parents:s}),d&&!c&&r(o[l],i+1,[...s,l])});r(o[""]||[],0,[])}else{let e=i;if(a)if("function"==typeof a)e=i.filter(a);else if("string"==typeof a){const s=a.trim().toLowerCase();s&&(e=i.filter(e=>{const i=String(e[t.labelfield]||"").toLowerCase(),a=String(e[t.summaryfield]||"").toLowerCase();return i.includes(s)||a.includes(s)}))}e.forEach(t=>n.push({type:"item",...t}))}t.state.flatList=n};t.state.__watch("list",a),t.state.__watch("filter",a),t.state.__watch("order",a);const l=t.fast?globalThis.VirtualScroll():null;let n=!1;t.refresh=()=>{if(t.fast&&!n){n=!0;try{const s=l.calc(t,t.state.flatList);s&&(e&&(e.style.height=`${s.prevHeight}px`),i&&(i.style.height=`${s.postHeight}px`),t.state.listStartIndex=s.listStartIndex,t.state.renderedList=s.renderedList)}finally{setTimeout(()=>{n=!1},0)}}},t.onItemUpdate=(e,i)=>{t.fast&&l.update(e+(t.state.listStartIndex||0),i)},t.state.__watch("flatList",s=>{t.fast?(e&&(e.style.height="0px"),i&&(i.style.height="0px"),t.state.listStartIndex=0,t.state.renderedList=l.reset(s,t)||[],setTimeout(()=>{t.state.flatList===s&&l.init(s,t.refresh)})):t.state.renderedList=s}),t.selectItem=(e,i)=>{t.hasAttribute("auto-select")&&(t.state.selectedItem=t.state.selectedItem===e[t.idfield]?null:e[t.idfield]),t.dispatchEvent(new CustomEvent("itemclick",{bubbles:!1,detail:{item:e,index:i+(t.fast&&t.state.listStartIndex||0)}}))},t.selectGroup=(e,i)=>{t.hasAttribute("auto-select-group")&&(t.state.selectedGroup=t.state.selectedGroup===e[t.groupidfield]?null:e[t.groupidfield]),t.dispatchEvent(new CustomEvent("groupclick",{bubbles:!1,detail:{item:e,index:i}}))},t.toggleCollapse=e=>{t.collapsible&&e._hasChildren&&(t.collapsed[e[t.idfield]]=!t.collapsed[e[t.idfield]],a())},Object.defineProperty(t,"filter",{get:()=>t.state.filter,set:e=>{t.state.filter=e}}),Object.defineProperty(t,"order",{get:()=>t.state.order,set:e=>{t.state.order=e}});new MutationObserver(()=>{const e=t.getAttribute("filter");"function"!=typeof t.state.filter&&e!==t.state.filter&&(t.state.filter=e||void 0);const i=t.getAttribute("order");"function"!=typeof t.state.order&&i!==t.state.order&&(t.state.order=i||void 0)}).observe(t,{attributes:!0,attributeFilter:["filter","order"]}),t.state.filter=t.getAttribute("filter")||void 0,t.state.order=t.getAttribute("order")||void 0,a()},globalThis.Util.makeDom('\n<div class="list-group overflow-auto" onscroll="this.refresh()" style="overflow-anchor:none">\n        <div class="vs-pad-top flex-shrink-0" style="height:0px;"></div>\n        <template slot-id="item" $each="this.state.renderedList">\n                <div $onupdate="this.onItemUpdate(index, thisNode)" $class="list-group-item d-inline-flex align-items-center pe-2 ${item.type===\'group\'?\'bg-body-tertiary fw-bold ps-2\':\'list-group-item-action \' + (this.mode===\'group\'?\'ps-4\':\'ps-2\')} ${item.type===\'group\'?(this.state?.selectedGroup===item[this.groupidfield]?\'active\':\'\'):(this.state?.selectedItem===item[this.idfield]?\'active\':\'\')}" $onclick="item.type===\'group\'?this.selectGroup(item,index):this.selectItem(item,index)">\n                        <template $if="item.type === \'group\'">\n                                <template $if="this.groupicon">\n                                        <span $class="bi bi-${this.groupicon} text-body"></span>\n                                </template>\n                                <div class="flex-shrink-0 px-1" $text="${item[this.grouplabelfield]}"></div>\n                                <div class="text-muted small flex-fill text-end" $text="${item[this.groupsummaryfield]}"></div>\n                                <div slot-id="group-actions"></div>\n                        </template>\n                        <template $if="item.type === \'item\'">\n                                <template $if="this.mode === \'tree\'">\n                                        <div $style="width:${item._level * 16 + (this.collapsible ? 16 : 0)}px; cursor:${this.collapsible ? \'pointer\' : \'default\'}" class="text-end text-muted flex-shrink-0" $onclick="event.stopPropagation(); this.toggleCollapse(item)">\n                                                <template $if="this.collapsible && item._hasChildren">\n                                                        <i $class="bi ${this.collapsed[item[this.idfield]] ? \'bi-caret-right-fill\' : \'bi-caret-down-fill\'}"></i>\n                                                </template>\n                                        </div>\n                                </template>\n                                <template $if="this.mode === \'tree\'">\n                                        <span $class="text-muted bi bi-${item._hasChildren ? this.groupicon : this.itemicon}"></span>\n                                </template>\n                                <template $if="this.mode !== \'tree\' && this.itemicon">\n                                        <span $class="bi bi-${this.itemicon} text-body"></span>\n                                </template>\n                                <div class="flex-shrink-0 px-1" $text="${item[this.labelfield]}"></div>\n                                <div class="text-muted small flex-fill text-end" $text="${item[this.summaryfield]}"></div>\n                                <div slot-id="item-actions"></div>\n                        </template>\n                </div>\n        </template>\n        <div class="vs-pad-bottom flex-shrink-0" style="height:0px;"></div>\n</div>\n')),globalThis.Component.register("Nav",t=>{t.vertical=t.hasAttribute("vertical"),t.state.openName=t.state.openName||null,t.click=(e,i)=>{e.noselect||i||(globalThis.Hash.nav=e.name),t.dispatchEvent(new CustomEvent("nav",{detail:{item:e},bubbles:!1}))},t.clickSubitem=e=>{t.dispatchEvent(new CustomEvent("nav",{detail:{item:e},bubbles:!1}))},t.toggleGroup=e=>{t.state.openName=t.state.openName===e.name?null:e.name,t.dispatchEvent(new CustomEvent("nav",{detail:{item:e,open:t.state.openName===e.name},bubbles:!1}))}},globalThis.Util.makeDom('\n<div $class="${this.vertical ? \'d-flex flex-column border-end h-100 align-self-stretch overflow-visible\' : \'navbar navbar-expand border-bottom\'} bg-body-secondary px-2 ${this.vertical ? \'py-3\' : \'py-0\'} align-items-center ${this.vertical ? \'align-items-start\' : \'\'}" $style="this.vertical ? \'min-height:0;\' : \'\'">\n\t<div class="d-flex align-items-center gap-2">\n        <template $if="this.state?.brand?.image">\n                <img $src="this.state.brand.image" $class="${this.vertical ? \'mb-2\' : \'mx-1\'}" style="height:30px;width:auto;max-width:300px">\n        </template>\n        <template $if="this.state?.brand?.icon">\n                <i $class="bi bi-${this.state.brand.icon} ${this.vertical ? \'mb-2\' : \'mx-1\'}"></i>\n        </template>\n        <template $if="this.state?.brand?.label">\n                <span $class="${this.vertical ? \'mb-2 fw-bold\' : \'mx-1\'}" style="transform: translateY(3px);" $text="this.state.brand.label"></span>\n        </template>\n\t</div>\n\t<div $class="d-flex ${this.vertical ? \'w-100 flex-fill mt-2 flex-column\' : \'ms-2 align-items-center flex-fill\'}" $style="this.vertical ? \'min-height:0; overflow-y:auto; overflow-x:visible;\' : \'\'">\n\t\t<template $each="this.state?.list || []">\n\t\t\t<div $class="${this.vertical ? \'nav nav-pills flex-column w-100 position-relative\' : \'navbar-nav flex-row align-items-center\'} ${!this.vertical && item.type===\'fill\' ? \'flex-fill\' : \'\'}" style="transform: translateY(3px);">\n\t\t\t<template $if="item.type===\'label\'">\n\t\t\t\t<div $class="${this.vertical ? \'small text-uppercase text-body-secondary fw-semibold px-2 py-1 mt-2\' : \'navbar-text small text-uppercase text-body-secondary fw-semibold px-2\'} ${item.class || \'\'}" $text="item.label"></div>\n\t\t\t</template>\n\t\t\t<template $if="item.type===\'button\'">\n\t\t\t\t<button $class="nav-link ${Hash.nav===item.name?\'active\':\'\'} ${this.vertical ? \'w-100 text-start py-1 px-2\' : \'\'} ${item.class || \'\'}" $onclick="this.click(item)">\n\t\t\t\t\t\t<i $class="bi bi-${item.icon} me-2"></i><span $class="${this.vertical ? \'text-truncate\' : \'d-none d-\' + (this.state?.list?.length>5?\'lg\':\'md\') + \'-inline\'}" $text="item.label"></span>\n\t\t\t\t</button>\n\t\t\t\t</template>\n\t\t\t\t<template $if="item.type===\'dropdown\'">\n\t\t\t\t\t<template $if="this.vertical">\n\t\t\t\t\t\t<div class="w-100">\n\t\t\t\t\t\t\t<button type="button" $class="nav-link w-100 text-start py-1 px-2 d-flex align-items-center justify-content-between ${item.class || \'\'}" $onclick="this.toggleGroup(item)">\n\t\t\t\t\t\t\t\t<span class="d-inline-flex align-items-center">\n\t\t\t\t\t\t\t\t\t<i $class="bi bi-${item.icon} me-2"></i><span class="text-truncate" $text="item.label"></span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<i $class="bi ${this.state.openName===item.name?\'bi-chevron-down\':\'bi-chevron-right\'} small ms-2"></i>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<template $if="this.state.openName===item.name">\n\t\t\t\t\t\t\t\t<div class="d-flex flex-column w-100 ps-2 mt-1">\n\t\t\t\t\t\t\t\t\t<template $each="item.list" as="subitem">\n\t\t\t\t\t\t\t\t\t\t<template $if="subitem.type===\'label\'">\n\t\t\t\t\t\t\t\t\t\t\t<div $class="small text-uppercase text-body-secondary fw-semibold px-2 py-1 ${subitem.class || \'\'}" $text="subitem.label"></div>\n\t\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t\t<template $if="subitem.type===\'button\'">\n\t\t\t\t\t\t\t\t\t\t\t<button $class="nav-link w-100 text-start py-1 px-2 ${subitem.class || \'\'}" $onclick="this.clickSubitem(subitem)">\n\t\t\t\t\t\t\t\t\t\t\t\t<i $class="bi bi-${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span>\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t\t<template $if="subitem.type===\'switch\'">\n\t\t\t\t\t\t\t\t\t\t\t<div $class="d-flex align-items-center px-2 py-2 ${subitem.class || \'\'}">\n\t\t\t\t\t\t\t\t\t\t\t\t<i $class="bi bi-${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span><div class="flex-fill"></div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class="form-switch ms-2"><input class="form-check-input" type="checkbox" $bind="subitem.bind[subitem.name]"></div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</template>\n\t\t\t\t\t<template $if="!this.vertical">\n\t\t\t\t\t\t<div class="dropdown">\n\t\t\t\t\t\t\t<button type="button" $class="nav-link dropdown-toggle ${item.class || \'\'}" data-bs-toggle="dropdown">\n\t\t\t\t\t\t\t\t<i $class="bi bi-${item.icon} me-2"></i><span $class="\'d-none d-\' + (this.state?.list?.length>5?\'lg\':\'md\') + \'-inline\'" $text="item.label"></span>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<div class="dropdown-menu dropdown-menu-end p-2 bg-body-secondary shadow" $style="\'width: \' + (item.width || 250) + \'px;\'">\n\t\t\t\t\t\t\t\t<template $each="item.list" as="subitem">\n\t\t\t\t\t\t\t\t\t<template $if="subitem.type===\'label\'">\n\t\t\t\t\t\t\t\t\t\t<div $class="dropdown-header ${subitem.class || \'\'}" $text="subitem.label"></div>\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t<template $if="subitem.type===\'button\'">\n\t\t\t\t\t\t\t\t\t\t<button $class="dropdown-item ${subitem.class || \'\'}" $onclick="this.clickSubitem(subitem)">\n\t\t\t\t\t\t\t\t\t\t\t<i $class="bi bi-${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t<template $if="subitem.type===\'switch\'">\n\t\t\t\t\t\t\t\t\t\t<div $class="d-flex align-items-center px-3 py-2 ${subitem.class || \'\'}">\n\t\t\t\t\t\t\t\t\t\t\t<i $class="bi bi-${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span><div class="flex-fill"></div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class="form-switch ms-2"><input class="form-check-input" type="checkbox" $bind="subitem.bind[subitem.name]"></div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</template>\n\t\t\t\t</template>\n\t\t\t</div>\n\t\t</template>\n\t</div>\n</div>\n')),globalThis.Component.register("Resizer",t=>{t.isVertical=t.hasAttribute("vertical");const e=parseInt(t.getAttribute("min"))||10,i=parseInt(t.getAttribute("max"))||1e3,s=t.target||t.previousElementSibling;t.addEventListener("bind",e=>{void 0!==e.detail&&null!==e.detail&&(s.style[t.isVertical?"height":"width"]=e.detail+"px")});const a=(s,a,l)=>{const n=s+(t.isVertical?l:a);return n<e?e:n>i?i:n};t.addEventListener("mousedown",e=>{const i=t.isVertical?s.offsetHeight:s.offsetWidth;globalThis.MouseMover.start(e,{onmousemove:({w:e,h:l})=>{const n=a(i,e,l);s.style[t.isVertical?"height":"width"]=n+"px",t.dispatchEvent(new CustomEvent("resizing",{detail:{oldSize:i,newSize:n},bubbles:!1}))},onmouseup:({w:e,h:s})=>{const l=a(i,e,s);t.dispatchEvent(new CustomEvent("resize",{detail:{oldSize:i,newSize:l},bubbles:!1})),t.dispatchEvent(new CustomEvent("change",{detail:l,bubbles:!1}))}})})},globalThis.Util.makeDom("\n<div $class=\"border-${this.isVertical?'top':'start'} flex-shrink-0\" $style=\"${this.isVertical?'height':'width'}:3px;${!this.isVertical?'height':'width'}:100%;cursor:${this.isVertical?'row-resize':'col-resize'}\"></div>\n")),Object.defineProperty(t,"State",{enumerable:!0,get:()=>e.State}),t.APIComponent=u,t.AutoForm=o,t.HTTP=i,t.MouseMover=p,t.UI=s,t.VirtualScroll=r,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});
diff --git a/package.json b/package.json
index 72fb565..84e1561 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@apigo.cc/base",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "type": "module",
   "main": "dist/base.js",
   "files": [
@@ -9,7 +9,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "test": "playwright test",
+    "test": "npm run build && node scripts/prepare-test-lib.js && playwright test",
     "pub": "node scripts/publish.js"
   },
   "devDependencies": {
diff --git a/playwright.config.js b/playwright.config.js
index d39e265..0fbc9b3 100644
--- a/playwright.config.js
+++ b/playwright.config.js
@@ -3,12 +3,13 @@ import { defineConfig } from '@playwright/test';
 export default defineConfig({
   testDir: './test',
   testMatch: '**/*.spec.js',
+  reporter: 'line',
   use: {
     baseURL: 'http://127.0.0.1:8082',
   },
   webServer: {
     command: 'npx vite --port 8082 --host 127.0.0.1',
-    url: 'http://127.0.0.1:8082/test/index.html',
+    url: 'http://127.0.0.1:8082/test/form_test.html',
     reuseExistingServer: !process.env.CI,
     stdout: 'pipe',
     stderr: 'pipe',
diff --git a/scripts/prepare-test-lib.js b/scripts/prepare-test-lib.js
new file mode 100644
index 0000000..8a4275d
--- /dev/null
+++ b/scripts/prepare-test-lib.js
@@ -0,0 +1,22 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const root = path.resolve(__dirname, '..');
+const testLibDir = path.join(root, 'test', 'lib');
+
+const copies = [
+    ['../../state/dist/state.js', 'state.js'],
+    ['../../bootstrap/dist/bootstrap.js', 'bootstrap.js'],
+    ['../dist/base.js', 'base.js']
+];
+
+fs.mkdirSync(testLibDir, { recursive: true });
+
+for (const [sourceRelPath, targetName] of copies) {
+    const source = path.resolve(__dirname, sourceRelPath);
+    const target = path.join(testLibDir, targetName);
+    if (!fs.existsSync(source)) throw new Error(`Missing test dependency: ${source}`);
+    fs.copyFileSync(source, target);
+}
diff --git a/src/list.js b/src/list.js
index ae52c8e..6b7d893 100644
--- a/src/list.js
+++ b/src/list.js
@@ -19,30 +19,142 @@ globalThis.Component.register('List', container => {
 
         const updateFlatList = () => {
                 globalThis.Util.updateDefaults(container, defaultSets)
-                const list = container.state.list || [], flatList = []
+                let list = container.state.list || []
+                const filter = container.state.filter
+                const order = container.state.order
+
+                if (order) {
+                        if (typeof order === 'function') {
+                                list = [...list].sort(order)
+                        } else if (typeof order === 'string') {
+                                const parts = order.trim().split(/\s+/)
+                                const field = parts[0]
+                                const isDesc = parts[1]?.toLowerCase() === 'desc' || field.startsWith('-')
+                                const cleanField = field.startsWith('-') ? field.slice(1) : field
+                                list = [...list].sort((a, b) => {
+                                        const valA = a[cleanField]
+                                        const valB = b[cleanField]
+                                        if (valA === undefined || valA === null) return isDesc ? 1 : -1
+                                        if (valB === undefined || valB === null) return isDesc ? -1 : 1
+                                        if (typeof valA === 'string' && typeof valB === 'string') {
+                                                return isDesc ? valB.localeCompare(valA) : valA.localeCompare(valB)
+                                        }
+                                        return isDesc ? (valB > valA ? 1 : -1) : (valA > valB ? 1 : -1)
+                                })
+                        }
+                }
+
+                const flatList = []
                 if (container.mode === 'group') {
+                        let filteredList = list
+                        if (filter) {
+                                if (typeof filter === 'function') {
+                                        filteredList = list.filter(filter)
+                                } else if (typeof filter === 'string') {
+                                        const q = filter.trim().toLowerCase()
+                                        if (q) {
+                                                filteredList = list.filter(item => {
+                                                        const label = String(item[container.labelfield] || '').toLowerCase()
+                                                        const summary = String(item[container.summaryfield] || '').toLowerCase()
+                                                        return label.includes(q) || summary.includes(q)
+                                                })
+                                        }
+                                }
+                        }
                         const itemMap = {}
-                        list.forEach(item => (itemMap[item[container.groupfield]] ??= []).push(item));
+                        filteredList.forEach(item => (itemMap[item[container.groupfield]] ??= []).push(item));
                         (container.state.groups || []).forEach(group => {
-                                flatList.push({ type: 'group', ...group })
                                 const items = itemMap[group[container.groupidfield]]
-                                if (items) items.forEach(item => flatList.push({ type: 'item', ...item }))
+                                const groupLabel = String(group[container.grouplabelfield] || '').toLowerCase()
+                                const groupSummary = String(group[container.groupsummaryfield] || '').toLowerCase()
+                                const q = (typeof filter === 'string') ? filter.trim().toLowerCase() : ''
+                                const groupMatches = q ? (groupLabel.includes(q) || groupSummary.includes(q)) : false
+
+                                if ((items && items.length > 0) || groupMatches || !filter) {
+                                        flatList.push({ type: 'group', ...group })
+                                        if (items) items.forEach(item => flatList.push({ type: 'item', ...item }))
+                                }
                         })
                 } else if (container.mode === 'tree') {
+                        const itemMap = {}
+                        list.forEach(item => { itemMap[item[container.idfield]] = item })
+
+                        const matches = new Set()
+                        list.forEach(item => {
+                                let match = false
+                                if (!filter) {
+                                        match = true
+                                } else if (typeof filter === 'function') {
+                                        match = filter(item)
+                                } else if (typeof filter === 'string') {
+                                        const q = filter.trim().toLowerCase()
+                                        if (!q) {
+                                                match = true
+                                        } else {
+                                                const label = String(item[container.labelfield] || '').toLowerCase()
+                                                const summary = String(item[container.summaryfield] || '').toLowerCase()
+                                                match = label.includes(q) || summary.includes(q)
+                                        }
+                                }
+                                if (match) {
+                                        matches.add(item[container.idfield])
+                                }
+                        })
+
+                        const keep = new Set(matches)
+                        if (filter) {
+                                matches.forEach(id => {
+                                        let curr = itemMap[id]
+                                        while (curr) {
+                                                const parentId = curr[container.parentfield]
+                                                if (!parentId) break
+                                                if (keep.has(parentId)) break
+                                                keep.add(parentId)
+                                                curr = itemMap[parentId]
+                                        }
+                                })
+                        }
+
                         const childrenMap = {}
-                        list.forEach(item => (childrenMap[item[container.parentfield] || ''] ??= []).push(item))
+                        list.forEach(item => {
+                                if (!filter || keep.has(item[container.idfield])) {
+                                        const parentId = item[container.parentfield] || ''
+                                        ;(childrenMap[parentId] ??= []).push(item)
+                                }
+                        })
+
                         const traverse = (items, level, parents) => items.forEach(item => {
-                                const id = item[container.idfield], hasChildren = !!childrenMap[id]?.length
+                                const id = item[container.idfield]
+                                const hasChildren = !!childrenMap[id]?.length
                                 const isCollapsed = container.collapsed[id]
                                 flatList.push({ type: 'item', ...item, _level: level, _hasChildren: hasChildren, _parents: parents })
                                 if (hasChildren && !isCollapsed) traverse(childrenMap[id], level + 1, [...parents, id])
                         })
                         traverse(childrenMap[''] || [], 0, [])
-                } else list.forEach(item => flatList.push({ type: 'item', ...item }))
+                } else {
+                        let filteredList = list
+                        if (filter) {
+                                if (typeof filter === 'function') {
+                                        filteredList = list.filter(filter)
+                                } else if (typeof filter === 'string') {
+                                        const q = filter.trim().toLowerCase()
+                                        if (q) {
+                                                filteredList = list.filter(item => {
+                                                        const label = String(item[container.labelfield] || '').toLowerCase()
+                                                        const summary = String(item[container.summaryfield] || '').toLowerCase()
+                                                        return label.includes(q) || summary.includes(q)
+                                                })
+                                        }
+                                }
+                        }
+                        filteredList.forEach(item => flatList.push({ type: 'item', ...item }))
+                }
                 container.state.flatList = flatList
         }
 
         container.state.__watch('list', updateFlatList)
+        container.state.__watch('filter', updateFlatList)
+        container.state.__watch('order', updateFlatList)
         const vs = container.fast ? globalThis.VirtualScroll() : null
 
         let refreshing = false
@@ -84,6 +196,30 @@ globalThis.Component.register('List', container => {
         }
         container.toggleCollapse = (item) => { if (container.collapsible && item._hasChildren) { container.collapsed[item[container.idfield]] = !container.collapsed[item[container.idfield]]; updateFlatList(); } }
 
+        Object.defineProperty(container, 'filter', {
+                get: () => container.state.filter,
+                set: v => { container.state.filter = v; }
+        })
+        Object.defineProperty(container, 'order', {
+                get: () => container.state.order,
+                set: v => { container.state.order = v; }
+        })
+
+        const observer = new MutationObserver(() => {
+                const filterAttr = container.getAttribute('filter')
+                if (typeof container.state.filter !== 'function' && filterAttr !== container.state.filter) {
+                        container.state.filter = filterAttr || undefined
+                }
+                const orderAttr = container.getAttribute('order')
+                if (typeof container.state.order !== 'function' && orderAttr !== container.state.order) {
+                        container.state.order = orderAttr || undefined
+                }
+        })
+        observer.observe(container, { attributes: true, attributeFilter: ['filter', 'order'] })
+
+        container.state.filter = container.getAttribute('filter') || undefined
+        container.state.order = container.getAttribute('order') || undefined
+
         updateFlatList()
 }, globalThis.Util.makeDom(/*html*/`
 <div class="list-group overflow-auto" onscroll="this.refresh()" style="overflow-anchor:none">
diff --git a/src/nav.js b/src/nav.js
index b175e01..cb72e93 100644
--- a/src/nav.js
+++ b/src/nav.js
@@ -19,13 +19,13 @@ globalThis.Component.register('Nav', container => {
 <div $class="\${this.vertical ? 'd-flex flex-column border-end h-100 align-self-stretch overflow-visible' : 'navbar navbar-expand border-bottom'} bg-body-secondary px-2 \${this.vertical ? 'py-3' : 'py-0'} align-items-center \${this.vertical ? 'align-items-start' : ''}" $style="this.vertical ? 'min-height:0;' : ''">
 	<div class="d-flex align-items-center gap-2">
         <template $if="this.state?.brand?.image">
-                <img $src="this.state.brand.image" $class="\${this.vertical ? 'mb-2' : 'me-2'}" style="height:30px;width:auto;max-width:300px">
+                <img $src="this.state.brand.image" $class="\${this.vertical ? 'mb-2' : 'mx-1'}" style="height:30px;width:auto;max-width:300px">
         </template>
         <template $if="this.state?.brand?.icon">
-                <i $class="bi bi-\${this.state.brand.icon} \${this.vertical ? 'mb-2' : 'me-2'}"></i>
+                <i $class="bi bi-\${this.state.brand.icon} \${this.vertical ? 'mb-2' : 'mx-1'}"></i>
         </template>
         <template $if="this.state?.brand?.label">
-                <span $class="\${this.vertical ? 'mb-2 fw-bold' : 'me-2'}" style="transform: translateY(3px);" $text="this.state.brand.label"></span>
+                <span $class="\${this.vertical ? 'mb-2 fw-bold' : 'mx-1'}" style="transform: translateY(3px);" $text="this.state.brand.label"></span>
         </template>
 	</div>
 	<div $class="d-flex \${this.vertical ? 'w-100 flex-fill mt-2 flex-column' : 'ms-2 align-items-center flex-fill'}" $style="this.vertical ? 'min-height:0; overflow-y:auto; overflow-x:visible;' : ''">
diff --git a/test-results/atomic_check-Capability-demo-page-atomic-tests-verification/error-context.md b/test-results/atomic_check-Capability-demo-page-atomic-tests-verification/error-context.md
deleted file mode 100644
index 19d9a87..0000000
--- a/test-results/atomic_check-Capability-demo-page-atomic-tests-verification/error-context.md
+++ /dev/null
@@ -1,66 +0,0 @@
-# Instructions
-
-- Following Playwright test failed.
-- Explain why, be concise, respect Playwright best practices.
-- Provide a snippet of code with the fix, if possible.
-
-# Test info
-
-- Name: atomic_check.spec.js >> Capability demo page atomic tests verification
-- Location: test/atomic_check.spec.js:3:1
-
-# Error details
-
-```
-Error: expect(received).toContain(expected) // indexOf
-
-Expected value: "Synchronous State Ready"
-Received array: []
-```
-
-# Page snapshot
-
-```yaml
-- generic [ref=e2]:
-  - navigation [ref=e4]
-  - generic [ref=e7]:
-    - heading [level=2]
-    - button "切换主题" [ref=e9] [cursor=pointer]: 切换主题
-```
-
-# Test source
-
-```ts
-  1  | import { test, expect } from '@playwright/test';
-  2  | 
-  3  | test('Capability demo page atomic tests verification', async ({ page }) => {
-  4  |     page.on('console', msg => console.log('BROWSER:', msg.text()));
-  5  | 
-  6  |     await page.goto('/test/capability.html');
-  7  |     await page.waitForTimeout(3000);
-  8  | 
-  9  |     const testResults = await page.evaluate(() => {
-  10 |         const getTexts = (sel) => Array.from(document.querySelectorAll(sel)).map(el => el.textContent.trim());
-  11 |         const getColors = (sel) => Array.from(document.querySelectorAll(sel)).map(el => el.style.color);
-  12 | 
-  13 |         return {
-  14 |             textBinding: getTexts('p.fs-4'),
-  15 |             textColor: getColors('p.fs-4'),
-  16 |             ifTrue: document.querySelector('.alert-success')?.textContent.trim(),
-  17 |             eachItems: getTexts('.card-body .list-group-item'),
-  18 |             nestedEachInIf: getTexts('.badge.bg-secondary'),
-  19 |             nestedIfInEach: getTexts('.card-body .gap-2 .p-2 span')
-  20 |         };
-  21 |     });
-  22 |     
-  23 |     console.log('Atomic Test Results:', JSON.stringify(testResults, null, 2));
-  24 | 
-> 25 |     expect(testResults.textBinding).toContain('Synchronous State Ready');
-     |                                     ^ Error: expect(received).toContain(expected) // indexOf
-  26 |     expect(testResults.ifTrue).toBe('已激活 ($if="true")');
-  27 |     expect(testResults.eachItems).toHaveLength(3);
-  28 |     expect(testResults.nestedEachInIf).toHaveLength(3);
-  29 |     expect(testResults.nestedIfInEach).toHaveLength(5); // Members 1-5
-  30 | });
-  31 | 
-```
\ No newline at end of file
diff --git a/test/all.spec.js b/test/all.spec.js
deleted file mode 100644
index e1b1537..0000000
--- a/test/all.spec.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test('base project comprehensive tests and scrolling benchmarks', async ({ page }) => {
-    test.setTimeout(60000);
-    page.on('console', msg => console.log('BROWSER LOG:', msg.text()));
-    page.on('pageerror', err => console.log('BROWSER EXCEPTION:', err.message, err.stack));
-    await page.goto('http://127.0.0.1:8082/test/index.html');
-    
-    // Wait for testStatus to be set (includes basic unit tests and scrolling refresh test)
-    await page.waitForFunction(() => window.testStatus !== undefined, { timeout: 60000 });
-    
-    const status = await page.evaluate(() => window.testStatus);
-    expect(status).toBe('passed');
-
-    // Simulate real scrolling and check dynamic rendering for FastList
-    console.log('Simulating real scroll on FastList...');
-    const scrollInfo = await page.evaluate(async () => {
-        window.switchTab?.('ll');
-        await new Promise(r => setTimeout(r, 200)); // wait for render
-        const el = document.getElementById('ll');
-        const results = [];
-        
-        const getRenderedCount = () => el.querySelectorAll('.border-primary').length;
-        
-        results.push({ 
-            id: 'initial',
-            scrollTop: el.scrollTop, 
-            scrollHeight: el.scrollHeight,
-            clientHeight: el.clientHeight,
-            renderedCount: getRenderedCount(),
-            renderedListLen: el.state.renderedList?.length
-        });
-
-    // Scroll to middle
-    el.scrollTop = 50000;
-    el.refresh?.();
-    await new Promise(r => setTimeout(r, 500));
-    const midCount = getRenderedCount();
-    const midHtml = el.innerHTML.length;
-    results.push({ 
-        id: 'deep-middle',
-        scrollTop: el.scrollTop, 
-        renderedCount: midCount,
-        htmlLen: midHtml,
-        prevHeight: el.state.prevHeight,
-        postHeight: el.state.postHeight,
-        renderedListLen: el.state._renderedList?.length
-    });
-    
-    // Scroll to end
-    el.scrollTop = el.scrollHeight;
-    el.refresh?.();
-    await new Promise(r => setTimeout(r, 500));
-    results.push({ 
-        id: 'end',
-        scrollTop: el.scrollTop, 
-        renderedCount: getRenderedCount(),
-        scrollHeight: el.scrollHeight,
-        prevHeight: el.state.prevHeight,
-        postHeight: el.state.postHeight
-    });
-        
-        return results;
-    });
-    
-    console.log('Scroll Details:', JSON.stringify(scrollInfo, null, 2));
-    expect(scrollInfo[0].renderedCount).toBeGreaterThan(0);
-    expect(scrollInfo[1].scrollTop).toBeGreaterThan(0);
-
-    const bench = await page.evaluate(() => window.benchResults);
-    if (bench) {
-        Object.entries(bench).forEach(([name, time]) => {
-            console.log(`BENCHMARK [${name}]: ${time.toFixed(2)}ms`);
-        });
-    }
-});
diff --git a/test/api.spec.js b/test/api.spec.js
new file mode 100644
index 0000000..3b72ef5
--- /dev/null
+++ b/test/api.spec.js
@@ -0,0 +1,36 @@
+import { test, expect } from '@playwright/test';
+
+test('API keeps declarative preset request fields', async ({ page }) => {
+    let capturedBody = null;
+    await page.route('**/echo', async route => {
+        capturedBody = route.request().postData();
+        await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({ ok: true })
+        });
+    });
+
+    await page.goto('/test/api_test.html');
+    await page.waitForFunction(() => typeof globalThis.presetApi?.do === 'function' && !!globalThis.presetApi?.request);
+
+    const requestInfo = await page.evaluate(() => ({
+        url: presetApi.request?.url,
+        method: presetApi.request?.method,
+        secret: presetApi.request?.data?.secret
+    }));
+
+    expect(requestInfo).toEqual({
+        url: '/echo',
+        method: 'POST',
+        secret: 'playwright-secret'
+    });
+
+    const ok = await page.evaluate(async () => {
+        const resp = await presetApi.do({ noui: true });
+        return resp.ok;
+    });
+
+    expect(ok).toBe(true);
+    expect(capturedBody).toBe(JSON.stringify({ secret: 'playwright-secret' }));
+});
diff --git a/test/api_test.html b/test/api_test.html
new file mode 100644
index 0000000..19d7eef
--- /dev/null
+++ b/test/api_test.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>API Declarative Test</title>
+    <script src="./lib/state.js"></script>
+    <script src="./lib/bootstrap.js"></script>
+    <script src="./lib/base.js"></script>
+    <script>
+        LocalStorage.secret = 'playwright-secret';
+    </script>
+</head>
+<body>
+    <API id="presetApi"
+         $.request.url="'/echo'"
+         $.request.method="'POST'"
+         $.request.data.secret="LocalStorage.secret || ''">
+    </API>
+</body>
+</html>
diff --git a/test/atomic_check.spec.js b/test/atomic_check.spec.js
deleted file mode 100644
index c3f0441..0000000
--- a/test/atomic_check.spec.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test('Capability demo page atomic tests verification', async ({ page }) => {
-    page.on('console', msg => console.log('BROWSER:', msg.text()));
-
-    await page.goto('http://localhost:5173/test/capability.html');
-    await page.waitForTimeout(3000);
-
-    const testResults = await page.evaluate(() => {
-        const getTexts = (sel) => Array.from(document.querySelectorAll(sel)).map(el => el.textContent.trim());
-        const getColors = (sel) => Array.from(document.querySelectorAll(sel)).map(el => el.style.color);
-
-        return {
-            textBinding: getTexts('p[$text="DemoState.testTitle"]'),
-            textColor: getColors('p[$text="DemoState.testTitle"]'),
-            ifTrue: document.querySelector('.alert-success')?.textContent.trim(),
-            ifFalse: document.querySelector('.alert-danger')?.textContent.trim(),
-            eachItems: getTexts('li.list-group-item'),
-            nestedEachInIf: getTexts('.badge.bg-primary'),
-            nestedIfInEach: getTexts('.bg-white')
-        };
-    });
-    
-    console.log('Atomic Test Results:', JSON.stringify(testResults, null, 2));
-
-    expect(testResults.textBinding).toContain('Framework Is Active');
-    expect(testResults.ifTrue).toBe('显示的内容 (True)');
-    expect(testResults.ifFalse).toBeUndefined();
-    expect(testResults.eachItems).toHaveLength(3);
-    expect(testResults.nestedEachInIf).toHaveLength(3);
-    expect(testResults.nestedIfInEach).toHaveLength(2); // Item A and C are visible
-});
diff --git a/test/base.test.js b/test/base.test.js
deleted file mode 100644
index def575d..0000000
--- a/test/base.test.js
+++ /dev/null
@@ -1,162 +0,0 @@
-import { HTTP, UI, State } from '@apigo.cc/base';
-
-export async function runTests() {
-    console.log('Starting comprehensive Base.js tests...');
-
-    // 1. HTTP Test
-    console.log('Testing HTTP (local check)...');
-    if (typeof HTTP.request !== 'function') throw new Error('HTTP.request missing');
-
-    // 2. State Test
-    console.log('Testing State...');
-    State.exitBlocks = 1;
-    if (State.exitBlocks !== 1) throw new Error('State update failed');
-    State.exitBlocks = 0;
-
-    // 3. UI Namespace Test
-    console.log('Testing UI...');
-    if (typeof UI.alert !== 'function') throw new Error('UI.alert missing');
-    if (typeof UI.toast !== 'function') throw new Error('UI.toast missing');
-
-    // 4. API Component Test
-    console.log('Testing API Component...');
-    const api = document.createElement('API');
-    document.body.appendChild(api);
-    await new Promise(r => setTimeout(r, 50));
-    api.request.url = '../package.json';
-    const apiResp = await api.do();
-    if (!apiResp.ok) throw new Error('API component request failed');
-    api.remove();
-
-    console.log('Testing API declarative preset request fields...');
-    LocalStorage.secret = 'api-secret-token';
-    const presetApi = document.createElement('API');
-    presetApi.setAttribute('$.request.url', "'/echo'");
-    presetApi.setAttribute('$.request.method', "'POST'");
-    presetApi.setAttribute('$.request.data.secret', "LocalStorage.secret || ''");
-    document.body.appendChild(presetApi);
-    await new Promise(r => setTimeout(r, 50));
-
-    const originalFetch = globalThis.fetch;
-    let capturedBody = null;
-    globalThis.fetch = async (_url, options = {}) => {
-        capturedBody = options.body;
-        return new Response(JSON.stringify({ ok: true }), {
-            status: 200,
-            headers: { 'Content-Type': 'application/json' }
-        });
-    };
-    try {
-        const presetResp = await presetApi.do();
-        if (!presetResp.ok) throw new Error('Declarative API preset request failed');
-    } finally {
-        globalThis.fetch = originalFetch;
-        presetApi.remove();
-    }
-    if (capturedBody !== JSON.stringify({ secret: 'api-secret-token' })) {
-        throw new Error('API declarative preset request.data.secret was not preserved');
-    }
-
-    // 5. AutoForm & TagsInput Test
-    console.log('Testing AutoForm...');
-    const { NewState } = await import('@apigo.cc/state');
-    const form = document.createElement('AutoForm');
-    document.body.appendChild(form);
-    await new Promise(r => setTimeout(r, 200));
-    
-    // Test dynamic schema and visibility
-    form.data = NewState({ showName: false, name: 'Gemini' });
-    form.state.schema = [
-        { name: 'tags', type: 'TagsInput', label: '标签' },
-        { name: 'showName', type: 'switch', label: 'Show Name' },
-        { name: 'name', type: 'text', label: 'Name', if: 'this.data.showName' }
-    ];
-    await new Promise(r => setTimeout(r, 200));
-    if (!form.querySelector('TagsInput')) throw new Error('TagsInput not rendered');
-    if (form.querySelector('[name="name"]')) throw new Error('Name field should be hidden');
-
-    form.data.showName = true;
-    await new Promise(r => setTimeout(r, 200));
-    if (!form.querySelector('[name="name"]')) throw new Error('Name field should be visible');
-    form.remove();
-
-    // 6. New Controls (DatePicker, ColorPicker, IconPicker) Test
-    console.log('Testing New Controls...');
-    const controlForm = document.createElement('AutoForm');
-    document.body.appendChild(controlForm);
-    await new Promise(r => setTimeout(r, 200));
-    controlForm.state.schema = [
-        { name: 'startDate', type: 'DatePicker', setting: { rangeEnd: 'endDate' } },
-        { name: 'endDate', type: 'date' },
-        { name: 'color', type: 'ColorPicker' },
-        { name: 'icon', type: 'IconPicker' }
-    ];
-    controlForm.data = { startDate: '2026-05-01', endDate: '2026-05-31', color: '#ff0000', icon: 'gear' };
-    await new Promise(r => setTimeout(r, 400));
-
-    const dp = controlForm.querySelector('DatePicker');
-    const cp = controlForm.querySelector('ColorPicker');
-    const ip = controlForm.querySelector('IconPicker');
-
-    if (!dp) throw new Error('DatePicker not rendered');
-    if (!cp) throw new Error('ColorPicker not rendered');
-    if (!ip) throw new Error('IconPicker not rendered');
-
-    // Test DatePicker range sync
-    dp.updateEnd('2026-06-01');
-    if (controlForm.data.endDate !== '2026-06-01') throw new Error('DatePicker rangeEnd sync failed');
-
-    // Test ColorPicker
-    cp.updateValue('#00ff00');
-    if (controlForm.data.color !== '#00ff00') throw new Error('ColorPicker sync failed');
-
-    // Test IconPicker
-    ip.selectIcon('star');
-    if (controlForm.data.icon !== 'star') throw new Error('IconPicker sync failed');
-
-    controlForm.remove();
-
-    // 7. List Components Basic Verification
-    console.log('Verifying List Components...');
-    const { Component } = await import('@apigo.cc/state');
-    console.log('FastList exists:', Component.exists('FastList'));
-    
-    const listIds = ['ll', 'gl', 'tt', 'ct'];
-    for (const id of listIds) {
-        window.switchTab?.(id);
-        await new Promise(r => setTimeout(r, 100)); // wait for render
-        const el = document.getElementById(id);
-        if (!el) throw new Error(`Component #${id} not found`);
-        console.log(`Component #${id} tagName:`, el.tagName, 'has refresh:', !!el.refresh, 'setupFunc exists:', !!Component.getSetupFunction(el.tagName));
-        if (!el.state.list || el.state.list.length === 0) throw new Error(`Component #${id} list data not bound`);
-    }
-
-    // 7. Benchmarks
-    console.log('Recording list benchmarks...');
-    window.benchResults = {};
-    
-    const measure = async (id, name) => {
-        window.switchTab?.(id);
-        await new Promise(r => setTimeout(r, 100)); // wait for render
-        const el = document.getElementById(id);
-        const start = performance.now();
-        console.log(`[MEASURE] ${name} setting scrollTop to 5000`);
-        el.scrollTop = 5000;
-        console.log(`[MEASURE] ${name} calling refresh`);
-        el.refresh?.();
-        console.log(`[MEASURE] ${name} refresh called, waiting 50ms`);
-        await new Promise(r => setTimeout(r, 50));
-        console.log(`[MEASURE] ${name} wait done`);
-        const time = performance.now() - start;
-        window.benchResults[name] = time;
-        console.log(`BENCHMARK: ${name} scroll & refresh: ${time.toFixed(2)}ms`);
-        console.log(`DEBUG [${id}]: _renderedList len: ${el.state._renderedList?.length}, _flatList len: ${el.state._flatList?.length}`);
-    };
-
-    await measure('ll', 'FastList');
-    await measure('gl', 'FastGroupedList');
-    await measure('tt', 'FastTree');
-    await measure('ct', 'CollapseTree');
-
-    console.log('All Base.js unit tests completed.');
-}
diff --git a/test/capability.spec.js b/test/capability.spec.js
new file mode 100644
index 0000000..9f5da4c
--- /dev/null
+++ b/test/capability.spec.js
@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test';
+
+test('capability demo switches sections through Nav', async ({ page }) => {
+    await page.goto('/test/capability.html');
+
+    await expect(page.locator('#mainNav')).toBeVisible();
+    await expect(page.getByRole('heading', { name: '项目概览' })).toBeVisible();
+
+    await page.getByRole('button', { name: '表单与控件' }).click();
+    await expect(page.locator('#demoForm')).toBeVisible();
+
+    await page.getByRole('button', { name: '增强列表' }).click();
+    await expect(page.locator('#demoList')).toBeVisible();
+});
diff --git a/test/deep_dump.spec.js b/test/deep_dump.spec.js
deleted file mode 100644
index 143848d..0000000
--- a/test/deep_dump.spec.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test('Capability demo page deep DOM dump', async ({ page }) => {
-    page.on('console', msg => console.log('BROWSER:', msg.text()));
-
-    await page.goto('http://localhost:5173/test/capability.html');
-    await page.waitForTimeout(3000);
-
-    const dump = await page.evaluate(() => {
-        const nav = document.getElementById('mainNav');
-        const form = document.getElementById('demoForm');
-        return {
-            nav: {
-                tagName: nav?.tagName,
-                childCount: nav?.children.length,
-                innerHTML: nav?.innerHTML
-            },
-            form: {
-                tagName: form?.tagName,
-                childCount: form?.children.length,
-                innerHTML: form?.innerHTML
-            }
-        };
-    });
-    
-    console.log('Deep DOM Dump:', JSON.stringify(dump, null, 2));
-
-    expect(dump.nav.childCount).toBeGreaterThan(0);
-});
diff --git a/test/form.spec.js b/test/form.spec.js
new file mode 100644
index 0000000..b1890f9
--- /dev/null
+++ b/test/form.spec.js
@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test';
+
+test('AutoForm fixtures render in supported layouts', async ({ page }) => {
+    await page.goto('/test/form_test.html');
+
+    await expect(page.locator('#formV')).toBeVisible();
+    await expect(page.locator('#formH')).toBeVisible();
+    await expect(page.locator('#formFH')).toBeVisible();
+    await expect(page.locator('#formSearch')).toBeVisible();
+    await expect(page.locator('#formCompact')).toBeVisible();
+
+    await expect(page.locator('#formV input[name="t"]')).toHaveValue('Apigo');
+
+    const horizontalDisplay = await page.locator('#formH form').evaluate(node => getComputedStyle(node).display);
+    expect(horizontalDisplay).toBe('grid');
+
+    await expect(page.locator('#formV DatePicker')).toHaveCount(2);
+    await expect(page.locator('#formV ColorPicker')).toBeVisible();
+    await expect(page.locator('#formV TagsInput')).toBeVisible();
+    await expect(page.locator('#formCompact button[type="submit"]')).toHaveCount(0);
+});
diff --git a/test/index.html b/test/index.html
deleted file mode 100644
index 827c016..0000000
--- a/test/index.html
+++ /dev/null
@@ -1,116 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Base.js Modular & Performance Tests</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    <script type="importmap">
-    {
-        "imports": {
-            "@apigo.cc/state": "../../state/src/index.js",
-            "@apigo.cc/base": "../src/index.js"
-        }
-    }
-    </script>
-</head>
-<body class="d-flex flex-column vh-100">
-    <script>
-        window.addEventListener('error', e => console.log('GLOBAL ERROR:', e.message, e.filename, e.lineno, e.colno, e.error));
-        window.addEventListener('unhandledrejection', e => console.log('UNHANDLED REJECTION:', e.reason));
-    </script>
-    <div id="results" class="p-2 bg-light border-bottom">Running tests...</div>
-    
-	<script>
-		const list_data = []
-		for (let i = 0; i < 10000; i++) {
-			list_data.push({ id: i, label: `item ${i}`, index: i, group: i % 1000, summary: `item ${i} summary`, parent: Math.floor(i / 10) })
-		}
-		const group_list = []
-		for (let i = 0; i < 1000; i++) {
-			group_list.push({ id: i, label: `group ${i}`, summary: `group ${i} summary` })
-		}
-	</script>
-	<script>
-		function switchTab(tabId) {
-			document.querySelectorAll('.list-container').forEach(el => el.style.display = 'none');
-			const target = document.getElementById('container-' + tabId);
-			if (target) target.style.display = 'flex';
-			document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
-			const btn = document.getElementById('btn-' + tabId);
-			if (btn) btn.classList.add('active');
-			window.activeTab = tabId;
-		}
-	</script>
-	<div class="p-2 border-bottom d-flex gap-2">
-		<button id="btn-ll" class="tab-btn btn btn-sm btn-outline-primary active" onclick="switchTab('ll')">Fast List</button>
-		<button id="btn-gl" class="tab-btn btn btn-sm btn-outline-primary" onclick="switchTab('gl')">Fast Grouped</button>
-		<button id="btn-tt" class="tab-btn btn btn-sm btn-outline-primary" onclick="switchTab('tt')">Fast Tree</button>
-		<button id="btn-ct" class="tab-btn btn btn-sm btn-outline-primary" onclick="switchTab('ct')">Normal Tree</button>
-		<button id="btn-form" class="tab-btn btn btn-sm btn-outline-primary" onclick="switchTab('form')">AutoForm Controls</button>
-	</div>
-	<div class="d-flex flex-fill p-2 overflow-hidden">
-		<div id="container-ll" class="list-container flex-fill d-flex flex-column overflow-hidden">
-			<h5>Fast List (Variable Height)</h5>
-			<List fast id="ll" auto-select class="flex-fill d-flex flex-column gap-3 bg-body-secondary rounded" $.state.list="list_data" $onitemclick="console.log(index, item)">
-				<template slot="item">
-					<div class="d-flex justify-content-center align-items-center border border-primary rounded" $text="item.label" $.style.height="${(item.index%10)*5+40}px"></div>
-				</template>
-			</List>
-		</div>
-		<div id="container-gl" class="list-container flex-fill flex-column overflow-hidden" style="display: none;">
-			<h5>Fast Grouped List</h5>
-			<List fast mode="group" id="gl" auto-select auto-select-group class="flex-fill d-flex flex-column border border-info rounded" $.state.groups="group_list" $.state.list="list_data"
-				$ongroupclick="console.log(index, item)">
-			</List>
-		</div>
-		<div id="container-tt" class="list-container flex-fill flex-column overflow-hidden" style="display: none;">
-			<h5>Fast Tree List</h5>
-			<List fast mode="tree" id="tt" auto-select class="flex-fill d-flex flex-column border border-info rounded" $.state.list="list_data" $onitemclick="console.log(index, item)"></List>
-		</div>
-		<div id="container-ct" class="list-container flex-fill flex-column overflow-hidden" style="display: none;">
-			<h5>Normal Tree List (Collapsible)</h5>
-			<List mode="tree" collapsible id="ct" auto-select class="flex-fill d-flex flex-column border border-info rounded" $.state.list="list_data.slice(0, 1200)" $onitemclick="console.log(index, item)">
-			</List>
-		</div>
-		<div id="container-form" class="list-container flex-fill flex-column overflow-hidden" style="display: none;">
-			<h5>AutoForm Controls</h5>
-			<AutoForm id="test-form" class="border p-3 rounded bg-light" $onsubmit="UI.toast('Form Submitted: ' + JSON.stringify(event.detail))"></AutoForm>
-			<script>
-				setTimeout(() => {
-					const form = document.getElementById('test-form');
-					if (form) {
-						form.state.schema = [
-							{ name: 'startDate', label: 'Date Range', type: 'DatePicker', setting: { rangeEnd: 'endDate' } },
-							{ name: 'endDate', label: 'End Date (Shadow)', type: 'date' },
-							{ name: 'themeColor', label: 'Theme Color', type: 'ColorPicker' },
-							{ name: 'appIcon', label: 'App Icon', type: 'IconPicker' }
-						];
-						form.data = { startDate: '2026-05-01', endDate: '2026-05-31', themeColor: '#ff0000', appIcon: 'gear' };
-					}
-				}, 600);
-			</script>
-		</div>
-	</div>
-
-    <script type="module">
-        import { runTests } from './base.test.js';
-
-        async function runAll() {
-            const results = document.getElementById('results');
-            try {
-                // Wait for components to initialize
-                await new Promise(r => setTimeout(r, 500));
-                await runTests();
-                results.innerHTML = '<h1 style="color: green; font-size: 1.2rem">All Tests Passed 🎉</h1>';
-                window.testStatus = 'passed';
-            } catch (e) {
-                console.error(e);
-                results.innerHTML = '<h1 style="color: red; font-size: 1.2rem">Tests Failed: ' + e.message + '</h1>';
-                window.testStatus = 'failed';
-            }
-        }
-        runAll();
-    </script>
-</body>
-</html>
diff --git a/test/lib/base.js b/test/lib/base.js
index 6e4b123..4bf3ba5 100644
--- a/test/lib/base.js
+++ b/test/lib/base.js
@@ -30,11 +30,24 @@
         }
         options.body = data;
       }
+      for (const name of HTTP.keepHeaders) {
+        if (HTTP._keepHeadersCache[name] && !headers[name]) headers[name] = HTTP._keepHeadersCache[name];
+      }
       if (Object.keys(headers).length) options.headers = headers;
       const response = { error: null, ok: null, status: 0, headers: {}, responseType: "", result: null };
       try {
         const resp = await fetch(url, options);
         Object.assign(response, { ok: resp.ok, status: resp.status, headers: Object.fromEntries(resp.headers.entries()) });
+        for (const name of HTTP.keepHeaders) {
+          const val = resp.headers.get(name);
+          if (val) {
+            HTTP._keepHeadersCache[name] = val;
+            try {
+              localStorage.setItem("_http_keep_" + name, val);
+            } catch (e) {
+            }
+          }
+        }
         if (!responseType) {
           const contentType = resp.headers.get("Content-Type") || "";
           if (contentType.includes("application/json")) responseType = "json";
@@ -51,6 +64,15 @@
       return response;
     }
   };
+  HTTP.keepHeaders = ["Session-Id", "Device-Id"];
+  HTTP._keepHeadersCache = {};
+  for (const name of HTTP.keepHeaders) {
+    try {
+      const val = localStorage.getItem("_http_keep_" + name);
+      if (val !== null) HTTP._keepHeadersCache[name] = val;
+    } catch (e) {
+    }
+  }
   globalThis.HTTP = HTTP;
   const UI = {};
   globalThis.Component.register("Toast", (container) => {
@@ -127,14 +149,14 @@
               <option $each="item.options" as="opt" $value="opt.value !== undefined ? opt.value : opt" $text="opt.label || opt"></option>
           </select>
           
-          <div $if="['checkbox', 'radio'].includes(item.type)" class="d-flex align-items-center flex-wrap gap-3 h-100">
+          <div $if="['checkbox', 'radio'].includes(item.type)" class="d-flex align-items-center flex-wrap gap-3 h-100" style="padding: 0 0.75rem; min-height: calc(2.25rem + 2px);">
               <label $each="item.options || [item.text||item.label||item.name]" as="opt" class="form-check mb-0 d-flex align-items-center" style="padding-left:0; cursor:pointer;">
-                  <input $name="item.name" class="form-check-input m-0 me-2" style="float:none;" $type="item.type" $.="item.setting || {}" $value="item.options?opt:'on'" $bind="this.data[item.name]">
+                  <input $name="item.name" class="form-check-input m-0 me-2" style="float:none;" $type="item.type" $.="item.setting || {}" $value="item.options ? (opt.value !== undefined ? opt.value : opt) : 'on'" $bind="this.data[item.name]">
                   <span $if="!this.inline || (item.options && item.options.length > 0)" $text="opt.label || opt" class="form-check-label"></span>
               </label>
           </div>
-          
-          <div $if="item.type === 'switch'" class="form-check form-switch fs-5 d-flex align-items-center m-0" style="padding-left:0; min-height:0; display:flex !important;">
+
+          <div $if="item.type === 'switch'" class="form-check form-switch fs-5 d-flex align-items-center m-0" style="padding: 0 0.75rem; min-height: calc(2.25rem + 2px); display:flex !important;">
               <input $name="item.name" class="form-check-input m-0" style="float:none; cursor:pointer" type="checkbox" $bind="this.data[item.name]">
           </div>
           
@@ -377,9 +399,31 @@
   }
   globalThis.MouseMover = MouseMover;
   const APIComponent = globalThis.Component.register("API", (container) => {
-    container.request = globalThis.NewState({ url: "", method: "GET", headers: {}, data: null, timeout: 1e4, responseType: "" });
-    container.response = globalThis.NewState({ loading: false, ok: null, status: null, error: null, headers: {}, responseType: "", result: null });
-    container.result = globalThis.NewState();
+    const presetRequest = container.request && typeof container.request === "object" ? container.request : {};
+    const presetResponse = container.response && typeof container.response === "object" ? container.response : {};
+    const presetResult = container.result && typeof container.result === "object" ? container.result : {};
+    container.request = globalThis.NewState({
+      url: "",
+      method: "GET",
+      headers: {},
+      data: null,
+      timeout: 1e4,
+      responseType: "",
+      ...presetRequest,
+      headers: { ...presetRequest.headers || {} }
+    });
+    container.response = globalThis.NewState({
+      loading: false,
+      ok: null,
+      status: null,
+      error: null,
+      headers: {},
+      responseType: "",
+      result: null,
+      ...presetResponse,
+      headers: { ...presetResponse.headers || {} }
+    });
+    container.result = globalThis.NewState(presetResult);
     container.do = (opt = {}) => {
       return new Promise((resolve, reject) => {
         const req = { ...container.request, ...opt };
@@ -513,7 +557,7 @@
       }
     })}' $text="item"></button>
   </template>
-  <input type="text" class="border-0 shadow-none py-0 px-2 flex-grow-1 bg-transparent" placeholder="{#new tag name#}" style="min-width:100px;width:0;outline:none" $onkeydown='${globalThis.Util.getFunctionBody(function(event) {
+  <input type="text" class="border-0 shadow-none py-0 px-2 flex-grow-1 bg-transparent" placeholder="{#new tag name#}" style="min-width:100px;width:0;outline:none" $onchange="event.stopPropagation()" $oninput="event.stopPropagation()" $onkeydown='${globalThis.Util.getFunctionBody(function(event) {
       if (event.isComposing) return;
       if (["Enter", ",", " "].includes(event.key)) {
         event.preventDefault();
@@ -718,37 +762,142 @@
     container.collapsed = globalThis.NewState({});
     container.state.renderedList = [];
     const updateFlatList = () => {
+      var _a;
       globalThis.Util.updateDefaults(container, defaultSets);
-      const list = container.state.list || [], flatList = [];
+      let list = container.state.list || [];
+      const filter = container.state.filter;
+      const order = container.state.order;
+      if (order) {
+        if (typeof order === "function") {
+          list = [...list].sort(order);
+        } else if (typeof order === "string") {
+          const parts = order.trim().split(/\s+/);
+          const field = parts[0];
+          const isDesc = ((_a = parts[1]) == null ? void 0 : _a.toLowerCase()) === "desc" || field.startsWith("-");
+          const cleanField = field.startsWith("-") ? field.slice(1) : field;
+          list = [...list].sort((a, b) => {
+            const valA = a[cleanField];
+            const valB = b[cleanField];
+            if (valA === void 0 || valA === null) return isDesc ? 1 : -1;
+            if (valB === void 0 || valB === null) return isDesc ? -1 : 1;
+            if (typeof valA === "string" && typeof valB === "string") {
+              return isDesc ? valB.localeCompare(valA) : valA.localeCompare(valB);
+            }
+            return isDesc ? valB > valA ? 1 : -1 : valA > valB ? 1 : -1;
+          });
+        }
+      }
+      const flatList = [];
       if (container.mode === "group") {
+        let filteredList = list;
+        if (filter) {
+          if (typeof filter === "function") {
+            filteredList = list.filter(filter);
+          } else if (typeof filter === "string") {
+            const q = filter.trim().toLowerCase();
+            if (q) {
+              filteredList = list.filter((item) => {
+                const label = String(item[container.labelfield] || "").toLowerCase();
+                const summary = String(item[container.summaryfield] || "").toLowerCase();
+                return label.includes(q) || summary.includes(q);
+              });
+            }
+          }
+        }
         const itemMap = {};
-        list.forEach((item) => {
-          var _a;
-          return (itemMap[_a = item[container.groupfield]] ?? (itemMap[_a] = [])).push(item);
+        filteredList.forEach((item) => {
+          var _a2;
+          return (itemMap[_a2 = item[container.groupfield]] ?? (itemMap[_a2] = [])).push(item);
         });
         (container.state.groups || []).forEach((group) => {
-          flatList.push({ type: "group", ...group });
           const items = itemMap[group[container.groupidfield]];
-          if (items) items.forEach((item) => flatList.push({ type: "item", ...item }));
+          const groupLabel = String(group[container.grouplabelfield] || "").toLowerCase();
+          const groupSummary = String(group[container.groupsummaryfield] || "").toLowerCase();
+          const q = typeof filter === "string" ? filter.trim().toLowerCase() : "";
+          const groupMatches = q ? groupLabel.includes(q) || groupSummary.includes(q) : false;
+          if (items && items.length > 0 || groupMatches || !filter) {
+            flatList.push({ type: "group", ...group });
+            if (items) items.forEach((item) => flatList.push({ type: "item", ...item }));
+          }
         });
       } else if (container.mode === "tree") {
+        const itemMap = {};
+        list.forEach((item) => {
+          itemMap[item[container.idfield]] = item;
+        });
+        const matches = /* @__PURE__ */ new Set();
+        list.forEach((item) => {
+          let match = false;
+          if (!filter) {
+            match = true;
+          } else if (typeof filter === "function") {
+            match = filter(item);
+          } else if (typeof filter === "string") {
+            const q = filter.trim().toLowerCase();
+            if (!q) {
+              match = true;
+            } else {
+              const label = String(item[container.labelfield] || "").toLowerCase();
+              const summary = String(item[container.summaryfield] || "").toLowerCase();
+              match = label.includes(q) || summary.includes(q);
+            }
+          }
+          if (match) {
+            matches.add(item[container.idfield]);
+          }
+        });
+        const keep = new Set(matches);
+        if (filter) {
+          matches.forEach((id) => {
+            let curr = itemMap[id];
+            while (curr) {
+              const parentId = curr[container.parentfield];
+              if (!parentId) break;
+              if (keep.has(parentId)) break;
+              keep.add(parentId);
+              curr = itemMap[parentId];
+            }
+          });
+        }
         const childrenMap = {};
         list.forEach((item) => {
-          var _a;
-          return (childrenMap[_a = item[container.parentfield] || ""] ?? (childrenMap[_a] = [])).push(item);
+          if (!filter || keep.has(item[container.idfield])) {
+            const parentId = item[container.parentfield] || "";
+            (childrenMap[parentId] ?? (childrenMap[parentId] = [])).push(item);
+          }
         });
         const traverse = (items, level, parents) => items.forEach((item) => {
-          var _a;
-          const id = item[container.idfield], hasChildren = !!((_a = childrenMap[id]) == null ? void 0 : _a.length);
+          var _a2;
+          const id = item[container.idfield];
+          const hasChildren = !!((_a2 = childrenMap[id]) == null ? void 0 : _a2.length);
           const isCollapsed = container.collapsed[id];
           flatList.push({ type: "item", ...item, _level: level, _hasChildren: hasChildren, _parents: parents });
           if (hasChildren && !isCollapsed) traverse(childrenMap[id], level + 1, [...parents, id]);
         });
         traverse(childrenMap[""] || [], 0, []);
-      } else list.forEach((item) => flatList.push({ type: "item", ...item }));
+      } else {
+        let filteredList = list;
+        if (filter) {
+          if (typeof filter === "function") {
+            filteredList = list.filter(filter);
+          } else if (typeof filter === "string") {
+            const q = filter.trim().toLowerCase();
+            if (q) {
+              filteredList = list.filter((item) => {
+                const label = String(item[container.labelfield] || "").toLowerCase();
+                const summary = String(item[container.summaryfield] || "").toLowerCase();
+                return label.includes(q) || summary.includes(q);
+              });
+            }
+          }
+        }
+        filteredList.forEach((item) => flatList.push({ type: "item", ...item }));
+      }
       container.state.flatList = flatList;
     };
     container.state.__watch("list", updateFlatList);
+    container.state.__watch("filter", updateFlatList);
+    container.state.__watch("order", updateFlatList);
     const vs = container.fast ? globalThis.VirtualScroll() : null;
     let refreshing = false;
     container.refresh = () => {
@@ -796,6 +945,31 @@
         updateFlatList();
       }
     };
+    Object.defineProperty(container, "filter", {
+      get: () => container.state.filter,
+      set: (v) => {
+        container.state.filter = v;
+      }
+    });
+    Object.defineProperty(container, "order", {
+      get: () => container.state.order,
+      set: (v) => {
+        container.state.order = v;
+      }
+    });
+    const observer = new MutationObserver(() => {
+      const filterAttr = container.getAttribute("filter");
+      if (typeof container.state.filter !== "function" && filterAttr !== container.state.filter) {
+        container.state.filter = filterAttr || void 0;
+      }
+      const orderAttr = container.getAttribute("order");
+      if (typeof container.state.order !== "function" && orderAttr !== container.state.order) {
+        container.state.order = orderAttr || void 0;
+      }
+    });
+    observer.observe(container, { attributes: true, attributeFilter: ["filter", "order"] });
+    container.state.filter = container.getAttribute("filter") || void 0;
+    container.state.order = container.getAttribute("order") || void 0;
     updateFlatList();
   }, globalThis.Util.makeDom(
     /*html*/
@@ -838,55 +1012,104 @@
   ));
   globalThis.Component.register("Nav", (container) => {
     container.vertical = container.hasAttribute("vertical");
+    container.state.openName = container.state.openName || null;
     container.click = (item, noselect) => {
       if (!item.noselect && !noselect) globalThis.Hash.nav = item.name;
       container.dispatchEvent(new CustomEvent("nav", { detail: { item }, bubbles: false }));
     };
+    container.clickSubitem = (item) => {
+      container.dispatchEvent(new CustomEvent("nav", { detail: { item }, bubbles: false }));
+    };
+    container.toggleGroup = (item) => {
+      container.state.openName = container.state.openName === item.name ? null : item.name;
+      container.dispatchEvent(new CustomEvent("nav", { detail: { item, open: container.state.openName === item.name }, bubbles: false }));
+    };
   }, globalThis.Util.makeDom(
     /*html*/
     `
-<div $class="\${this.vertical ? 'd-flex flex-column border-end h-100' : 'navbar navbar-expand border-bottom'} bg-body-secondary px-3 \${this.vertical ? 'py-3' : 'pb-0'} align-items-center \${this.vertical ? 'align-items-start' : ''}">
+<div $class="\${this.vertical ? 'd-flex flex-column border-end h-100 align-self-stretch overflow-visible' : 'navbar navbar-expand border-bottom'} bg-body-secondary px-2 \${this.vertical ? 'py-3' : 'py-0'} align-items-center \${this.vertical ? 'align-items-start' : ''}" $style="this.vertical ? 'min-height:0;' : ''">
+	<div class="d-flex align-items-center gap-2">
         <template $if="this.state?.brand?.image">
-                <img $src="this.state.brand.image" $class="\${this.vertical ? 'mb-4' : 'me-2'}" style="height:30px;width:auto;max-width:300px">
+                <img $src="this.state.brand.image" $class="\${this.vertical ? 'mb-2' : 'mx-1'}" style="height:30px;width:auto;max-width:300px">
         </template>
         <template $if="this.state?.brand?.icon">
-                <i $class="bi bi-\${this.state.brand.icon} \${this.vertical ? 'mb-4' : 'me-2'}"></i>
+                <i $class="bi bi-\${this.state.brand.icon} \${this.vertical ? 'mb-2' : 'mx-1'}"></i>
         </template>
         <template $if="this.state?.brand?.label">
-                <span $class="\${this.vertical ? 'mb-4 fw-bold' : 'me-2'}" $text="this.state.brand.label"></span>
-        </template>
-        <div $class="\${this.vertical ? 'w-100' : 'ms-2'}"></div>
-        <template $each="this.state?.list || []">
-                <div $class="\${this.vertical ? 'nav nav-pills flex-column w-100' : 'navbar-nav'} text-truncate \${item.type==='fill'?'flex-fill':''}">
-                        <template $if="item.type==='button'">
-                                <button $class="nav-link \${Hash.nav===item.name?'active':''} \${this.vertical ? 'text-start' : ''}" $onclick="this.click(item)">
-                                        <i $class="bi bi-\${item.icon} me-2"></i><span $class="\${this.vertical ? '' : 'd-none d-' + (this.state?.list?.length>5?'lg':'md') + '-inline'}" $text="item.label"></span>
-                                </button>
-                        </template>
-                        <template $if="item.type==='dropdown'">
-                                <div class="dropdown">
-                                        <button $class="nav-link \${Hash.nav===item.name?'active':''} \${this.vertical ? 'text-start' : ''}" data-bs-toggle="dropdown">
-                                                <i $class="bi bi-\${item.icon} me-2"></i><span $class="\${this.vertical ? '' : 'd-none d-' + (this.state?.list?.length>5?'lg':'md') + '-inline'}" $text="item.label"></span>
-                                        </button>
-                                        <div $class="dropdown-menu \${this.vertical?'position-static':'dropdown-menu-end'} p-3 bg-body-secondary shadow" $style="width: \${item.width || 250}px;">
-                                                <template $each="item.list" as="subitem">
-                                                        <template $if="subitem.type==='button'">
-                                                                <button class="nav-link px-0 w-100 text-start" $onclick="this.click(subitem, true)">
-                                                                        <i $class="bi bi-\${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span>
-                                                                </button>
-                                                        </template>
-                                                        <template $if="subitem.type==='switch'">
-                                                                <div class="d-flex align-items-center">
-                                                                        <i $class="bi bi-\${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span><div class="flex-fill"></div>
-                                                                        <div class="form-switch"><input class="form-check-input mx-0" type="checkbox" $bind="subitem.bind[subitem.name]"></div>
-                                                                </div>
-                                                        </template>
-                                                </template>
-                                        </div>
-                                </div>
-                        </template>
-                </div>
+                <span $class="\${this.vertical ? 'mb-2 fw-bold' : 'mx-1'}" style="transform: translateY(3px);" $text="this.state.brand.label"></span>
         </template>
+	</div>
+	<div $class="d-flex \${this.vertical ? 'w-100 flex-fill mt-2 flex-column' : 'ms-2 align-items-center flex-fill'}" $style="this.vertical ? 'min-height:0; overflow-y:auto; overflow-x:visible;' : ''">
+		<template $each="this.state?.list || []">
+			<div $class="\${this.vertical ? 'nav nav-pills flex-column w-100 position-relative' : 'navbar-nav flex-row align-items-center'} \${!this.vertical && item.type==='fill' ? 'flex-fill' : ''}" style="transform: translateY(3px);">
+			<template $if="item.type==='label'">
+				<div $class="\${this.vertical ? 'small text-uppercase text-body-secondary fw-semibold px-2 py-1 mt-2' : 'navbar-text small text-uppercase text-body-secondary fw-semibold px-2'} \${item.class || ''}" $text="item.label"></div>
+			</template>
+			<template $if="item.type==='button'">
+				<button $class="nav-link \${Hash.nav===item.name?'active':''} \${this.vertical ? 'w-100 text-start py-1 px-2' : ''} \${item.class || ''}" $onclick="this.click(item)">
+						<i $class="bi bi-\${item.icon} me-2"></i><span $class="\${this.vertical ? 'text-truncate' : 'd-none d-' + (this.state?.list?.length>5?'lg':'md') + '-inline'}" $text="item.label"></span>
+				</button>
+				</template>
+				<template $if="item.type==='dropdown'">
+					<template $if="this.vertical">
+						<div class="w-100">
+							<button type="button" $class="nav-link w-100 text-start py-1 px-2 d-flex align-items-center justify-content-between \${item.class || ''}" $onclick="this.toggleGroup(item)">
+								<span class="d-inline-flex align-items-center">
+									<i $class="bi bi-\${item.icon} me-2"></i><span class="text-truncate" $text="item.label"></span>
+								</span>
+								<i $class="bi \${this.state.openName===item.name?'bi-chevron-down':'bi-chevron-right'} small ms-2"></i>
+							</button>
+							<template $if="this.state.openName===item.name">
+								<div class="d-flex flex-column w-100 ps-2 mt-1">
+									<template $each="item.list" as="subitem">
+										<template $if="subitem.type==='label'">
+											<div $class="small text-uppercase text-body-secondary fw-semibold px-2 py-1 \${subitem.class || ''}" $text="subitem.label"></div>
+										</template>
+										<template $if="subitem.type==='button'">
+											<button $class="nav-link w-100 text-start py-1 px-2 \${subitem.class || ''}" $onclick="this.clickSubitem(subitem)">
+												<i $class="bi bi-\${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span>
+											</button>
+										</template>
+										<template $if="subitem.type==='switch'">
+											<div $class="d-flex align-items-center px-2 py-2 \${subitem.class || ''}">
+												<i $class="bi bi-\${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span><div class="flex-fill"></div>
+												<div class="form-switch ms-2"><input class="form-check-input" type="checkbox" $bind="subitem.bind[subitem.name]"></div>
+											</div>
+										</template>
+									</template>
+								</div>
+							</template>
+						</div>
+					</template>
+					<template $if="!this.vertical">
+						<div class="dropdown">
+							<button type="button" $class="nav-link dropdown-toggle \${item.class || ''}" data-bs-toggle="dropdown">
+								<i $class="bi bi-\${item.icon} me-2"></i><span $class="'d-none d-' + (this.state?.list?.length>5?'lg':'md') + '-inline'" $text="item.label"></span>
+							</button>
+							<div class="dropdown-menu dropdown-menu-end p-2 bg-body-secondary shadow" $style="'width: ' + (item.width || 250) + 'px;'">
+								<template $each="item.list" as="subitem">
+									<template $if="subitem.type==='label'">
+										<div $class="dropdown-header \${subitem.class || ''}" $text="subitem.label"></div>
+									</template>
+									<template $if="subitem.type==='button'">
+										<button $class="dropdown-item \${subitem.class || ''}" $onclick="this.clickSubitem(subitem)">
+											<i $class="bi bi-\${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span>
+										</button>
+									</template>
+									<template $if="subitem.type==='switch'">
+										<div $class="d-flex align-items-center px-3 py-2 \${subitem.class || ''}">
+											<i $class="bi bi-\${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span><div class="flex-fill"></div>
+												<div class="form-switch ms-2"><input class="form-check-input" type="checkbox" $bind="subitem.bind[subitem.name]"></div>
+										</div>
+									</template>
+								</template>
+							</div>
+						</div>
+					</template>
+				</template>
+			</div>
+		</template>
+	</div>
 </div>
 `
   ));
diff --git a/test/lib/bootstrap.js b/test/lib/bootstrap.js
index a42f140..8e63494 100644
--- a/test/lib/bootstrap.js
+++ b/test/lib/bootstrap.js
@@ -2121,7 +2121,7 @@ url("data:font/woff;base64,d09GRgABAAAAAsBAAAsAAAAHavgAAQAAAAAAAAAAAAAAAAAAAAAAA
   }
 })();
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@apigo.cc/state")) : typeof define === "function" && define.amd ? define(["exports", "@apigo.cc/state"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.ApigoBootstrap = {}));
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@apigo.cc/state")) : typeof define === "function" && define.amd ? define(["exports", "@apigo.cc/state"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.ApigoBootstrap = global.ApigoBootstrap || {}));
 })(this, function(exports2) {
   "use strict";
   var top = "top";
@@ -7233,6 +7233,24 @@ url("data:font/woff;base64,d09GRgABAAAAAsBAAAsAAAAHavgAAQAAAAAAAAAAAAAAAAAAAAAAA
                             border-color: var(--bs-primary) !important;
                         }
                         
+                        /* 导航与下拉菜单 (Nav & Dropdown) */
+                        .nav {
+                            --bs-nav-link-color: var(--bs-body-color) !important;
+                            --bs-nav-link-hover-color: var(--bs-primary) !important;
+                        }
+                        .nav-pills {
+                            --bs-nav-pills-link-active-bg: var(--bs-primary) !important;
+                            --bs-nav-pills-link-active-color: #fff !important;
+                        }
+                        .dropdown-menu {
+                            --bs-dropdown-link-active-bg: var(--bs-primary) !important;
+                            --bs-dropdown-link-active-color: #fff !important;
+                        }
+                        .navbar-nav .nav-link.active,
+                        .navbar-nav .nav-link.show {
+                            color: var(--bs-primary) !important;
+                        }
+
                         /* 列表组 (List Group) */
                         .list-group-item.active {
                             background-color: var(--bs-primary) !important;
diff --git a/test/lib/state.js b/test/lib/state.js
index e6e0eec..40c0b53 100644
--- a/test/lib/state.js
+++ b/test/lib/state.js
@@ -385,6 +385,7 @@
             if (existingNodes) {
               node._keyedNodes.delete(keyVal);
               existingNodes.forEach((child) => {
+                node.parentNode.insertBefore(child, node);
                 child._ref[indexName] = k;
                 child._ref[asName] = item;
                 _scanTree(child);
diff --git a/test/list.spec.js b/test/list.spec.js
new file mode 100644
index 0000000..7bb337f
--- /dev/null
+++ b/test/list.spec.js
@@ -0,0 +1,90 @@
+import { test, expect } from '@playwright/test';
+
+test('List fixtures cover normal, grouped, tree and virtual modes', async ({ page }) => {
+    await page.goto('/test/list_test.html');
+
+    await expect(page.locator('#listStd .list-group-item').first()).toBeVisible();
+    await expect(page.locator('#listGrp .list-group-item').first()).toBeVisible();
+    await expect(page.locator('#listTree .list-group-item').first()).toBeVisible();
+    await expect(page.locator('#listFast .list-group-item').first()).toBeVisible();
+
+    const treeBefore = await page.locator('#listTree .list-group-item').count();
+    await page.locator('#listTree .bi-caret-down-fill').first().click();
+    await page.waitForTimeout(100);
+    const treeAfter = await page.locator('#listTree .list-group-item').count();
+    expect(treeAfter).toBeLessThan(treeBefore);
+
+    const fastInfo = await page.locator('#listFast').evaluate(async node => {
+        const visibleText = () => Array.from(node.querySelectorAll('.list-group-item .fw-bold')).map(el => el.textContent.trim());
+        const initial = visibleText();
+        node.scrollTop = node.scrollHeight;
+        node.dispatchEvent(new Event('scroll'));
+        await new Promise(resolve => setTimeout(resolve, 300));
+        const final = visibleText();
+        return {
+            count: node.querySelectorAll('.list-group-item').length,
+            scrollTop: node.scrollTop,
+            initialFirst: initial[0],
+            finalFirst: final[0],
+            finalLast: final[final.length - 1]
+        };
+    });
+
+    expect(fastInfo.count).toBeGreaterThan(0);
+    expect(fastInfo.count).toBeLessThan(400);
+    expect(fastInfo.scrollTop).toBeGreaterThan(0);
+    expect(fastInfo.initialFirst).not.toBe(fastInfo.finalFirst);
+    expect(fastInfo.finalLast).toContain('Virtual Item');
+});
+
+test('List component supports internal filtering and sorting', async ({ page }) => {
+    await page.goto('/test/list_test.html');
+
+    // 1. Test Standard List Filtering
+    await page.fill('#searchInput', 'Item 5');
+    await page.waitForTimeout(100);
+    const itemsText = await page.locator('#listStd .list-group-item').allTextContents();
+    // Item 5, Item 50 should be there, but not Item 1, 2, etc.
+    expect(itemsText.every(text => text.includes('Item 5'))).toBe(true);
+    expect(itemsText.length).toBe(2); // Item 5 and Item 50
+
+    // Clear filter
+    await page.fill('#searchInput', '');
+    await page.waitForTimeout(100);
+
+    // 2. Test Standard List Sorting
+    // Default is: Item 1, Item 2...
+    await page.selectOption('#sortSelect', '-label');
+    await page.waitForTimeout(100);
+    const sortedText = await page.locator('#listStd .list-group-item').first().textContent();
+    expect(sortedText.trim()).toContain('Item 9'); // Lexicographically descending
+
+    // 3. Test Group List Filtering
+    await page.fill('#grpSearchInput', 'Member 3');
+    await page.waitForTimeout(100);
+    // Since grpItems have label 'Member X' and group fields. Only member matching '3' or '30' or '31' etc. will show.
+    const grpItemsCount = await page.locator('#listGrp .list-group-item').count();
+    // Should be filtered down considerably
+    expect(grpItemsCount).toBeLessThan(40);
+
+    // 4. Test Tree List Filtering (Crucial check for ancestry propagation)
+    await page.fill('#treeSearchInput', 'UI Team');
+    await page.waitForTimeout(100);
+    
+    // UI Team should be visible
+    const uiTeam = page.locator('#listTree .list-group-item', { hasText: 'UI Team' });
+    await expect(uiTeam).toBeVisible();
+
+    // Ancestor "Company HQ" and "R&D Division" must also be visible
+    const parent1 = page.locator('#listTree .list-group-item', { hasText: 'Company HQ' });
+    const parent2 = page.locator('#listTree .list-group-item', { hasText: 'R&D Division' });
+    await expect(parent1).toBeVisible();
+    await expect(parent2).toBeVisible();
+
+    // Sibling node "Operations" or "Cloud Ops" should NOT be visible
+    const sibling1 = page.locator('#listTree .list-group-item', { hasText: 'Operations' });
+    const sibling2 = page.locator('#listTree .list-group-item', { hasText: 'Cloud Ops' });
+    await expect(sibling1).not.toBeVisible();
+    await expect(sibling2).not.toBeVisible();
+});
+
diff --git a/test/list_test.html b/test/list_test.html
index aa461e5..52f0105 100644
--- a/test/list_test.html
+++ b/test/list_test.html
@@ -16,16 +16,32 @@
 <body>
 	<div class="test-container">
 		<div class="list-card">
-			<h5>1. Standard List (Normal)</h5>
-			<List id="listStd" class="flex-fill" $.state.list="State.stdItems" auto-select></List>
+			<h5 class="d-flex align-items-center justify-content-between">
+				<span>1. Standard List (Normal)</span>
+				<div class="d-flex gap-2">
+					<input type="text" id="searchInput" class="form-control form-control-sm" style="width: 120px;" placeholder="Search..." $bind="State.stdFilter">
+					<select id="sortSelect" class="form-select form-select-sm" style="width: 100px;" $bind="State.stdOrder">
+						<option value="">No Sort</option>
+						<option value="label">Label Asc</option>
+						<option value="-label">Label Desc</option>
+					</select>
+				</div>
+			</h5>
+			<List id="listStd" class="flex-fill" $.state.list="State.stdItems" $filter="State.stdFilter || ''" $order="State.stdOrder" auto-select></List>
 		</div>
 		<div class="list-card">
-			<h5>2. Group List (Mode: Group)</h5>
-			<List id="listGrp" mode="group" class="flex-fill" $.state.list="State.grpItems" $.state.groups="State.groups"></List>
+			<h5 class="d-flex align-items-center justify-content-between">
+				<span>2. Group List (Mode: Group)</span>
+				<input type="text" id="grpSearchInput" class="form-control form-control-sm" style="width: 120px;" placeholder="Search..." $bind="State.grpFilter">
+			</h5>
+			<List id="listGrp" mode="group" class="flex-fill" $.state.list="State.grpItems" $.state.groups="State.groups" $filter="State.grpFilter || ''"></List>
 		</div>
 		<div class="list-card">
-			<h5>3. Tree List (Mode: Tree + Collapsible)</h5>
-			<List id="listTree" mode="tree" collapsible class="flex-fill" $.state.list="State.treeItems"></List>
+			<h5 class="d-flex align-items-center justify-content-between">
+				<span>3. Tree List (Mode: Tree + Collapsible)</span>
+				<input type="text" id="treeSearchInput" class="form-control form-control-sm" style="width: 120px;" placeholder="Search..." $bind="State.treeFilter">
+			</h5>
+			<List id="listTree" mode="tree" collapsible class="flex-fill" $.state.list="State.treeItems" $filter="State.treeFilter || ''"></List>
 		</div>
 		<div class="list-card">
 			<h5>4. FAST Virtual List (10,000 Items + Dynamic Height)</h5>
diff --git a/test/mega_verify.spec.js b/test/mega_verify.spec.js
deleted file mode 100644
index 7c312e1..0000000
--- a/test/mega_verify.spec.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test('Empirical Mega Verification', async ({ page }) => {
-    page.on('console', msg => console.log('BROWSER:', msg.text()));
-
-    // 1. Verify AutoForm
-    console.log('--- Verifying AutoForm Mega ---');
-    await page.goto('http://localhost:5173/test/form_test.html');
-    await page.waitForTimeout(3000);
-    
-    const checkForm = async (id) => {
-        return await page.evaluate((fid) => {
-            const form = document.getElementById(fid);
-            const inputs = form.querySelectorAll('input, select, textarea');
-            const labels = form.querySelectorAll('label');
-            return {
-                id: fid,
-                inputCount: inputs.length,
-                labelCount: labels.length,
-                html: form.innerHTML.substring(0, 100)
-            };
-        }, id);
-    };
-
-    const vResult = await checkForm('formV');
-    const hResult = await checkForm('formH');
-    const iResult = await checkForm('formI');
-    
-    console.log('Form results:', { vResult, hResult, iResult });
-    expect(vResult.inputCount).toBeGreaterThan(5);
-    expect(hResult.inputCount).toBeGreaterThan(5);
-
-    // 2. Verify List
-    console.log('--- Verifying List Mega ---');
-    await page.goto('http://localhost:5173/test/list_test.html');
-    await page.waitForTimeout(3000);
-
-    const checkList = async (id) => {
-        return await page.evaluate((lid) => {
-            const list = document.getElementById(lid);
-            const items = list.querySelectorAll('.list-group-item');
-            return {
-                id: lid,
-                itemCount: items.length,
-                labels: Array.from(items).map(i => i.textContent.trim())
-            };
-        }, id);
-    };
-
-    const stdResult = await checkList('listStd');
-    const grpResult = await checkList('listGrp');
-    const treeResult = await checkList('listTree');
-
-    console.log('List results:', { stdResult, grpResult, treeResult });
-    
-    expect(stdResult.itemCount).toBeGreaterThan(0);
-    expect(grpResult.itemCount).toBeGreaterThan(2);
-    expect(treeResult.itemCount).toBeGreaterThan(0);
-});
diff --git a/test/verify_stress.spec.js b/test/verify_stress.spec.js
deleted file mode 100644
index 3f26777..0000000
--- a/test/verify_stress.spec.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test('Stress test: Virtual List should handle 10,000 items with dynamic height', async ({ page }) => {
-    test.setTimeout(60000); 
-    page.on('console', msg => console.log('BROWSER LOG:', msg.text()));
-    
-    await page.goto('http://localhost:5174/test/list_test.html');
-    
-    const listFast = page.locator('#listFast');
-    await expect(listFast).toBeVisible();
-    await page.waitForFunction(() => document.querySelectorAll('#listFast .list-group-item').length > 0);
-    
-    // Check initial state
-    const scrollTop = await listFast.evaluate(e => e.scrollTop);
-    const scrollHeight = await listFast.evaluate(e => e.scrollHeight);
-    const clientHeight = await listFast.evaluate(e => e.clientHeight);
-    console.log(`Initial: scrollTop=${scrollTop}, scrollHeight=${scrollHeight}, clientHeight=${clientHeight}`);
-    
-    // Attach event listener to see if scroll fires
-    await listFast.evaluate(e => {
-        e.addEventListener('scroll', () => console.log('SCROLL EVENT FIRED! new scrollTop:', e.scrollTop));
-    });
-
-    // Scroll to the very end
-    await listFast.evaluate(e => e.scrollTop = e.scrollHeight);
-    await page.waitForTimeout(1000);
-    
-    const finalScrollTop = await listFast.evaluate(e => e.scrollTop);
-    console.log(`Final: scrollTop=${finalScrollTop}`);
-    
-    const lastItemText = await listFast.locator('.list-group-item').last().textContent();
-    console.log('Last rendered item text:', lastItemText);
-    expect(lastItemText).toContain('Virtual Item 10000');
-});
diff --git a/test/verify_style.spec.js b/test/verify_style.spec.js
deleted file mode 100644
index 55a6b81..0000000
--- a/test/verify_style.spec.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test('Check styles and globals', async ({ page }) => {
-    await page.goto('http://localhost:5174/test/form_test.html');
-    
-    // Check if auto-grid-form is grid (horizontal mode)
-    const formH = page.locator('#formH form');
-    const display = await formH.evaluate(el => window.getComputedStyle(el).display);
-    console.log('formH display:', display);
-    expect(display).toBe('grid');
-
-    // Get color picker input to check height
-    const colorInput = page.locator('#formH input[type="color"]');
-    if (await colorInput.count() > 0) {
-        const height = await colorInput.evaluate(el => window.getComputedStyle(el).height);
-        console.log('colorInput height:', height);
-        // It shouldn't be very small (like 0 or 2px)
-        expect(parseInt(height)).toBeGreaterThan(20);
-    }
-});