diff --git a/CHANGELOG.md b/CHANGELOG.md
index 93d3d0d..ca00693 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.0.7] - 2026-05-29
+### Added
+- DatePicker: New control with range support (main/shadow field sync).
+- ColorPicker: New control with color input and text hex input.
+- IconPicker: New control with searchable Bootstrap Icons grid.
+- AutoForm: Automatically registered the new controls.
+
 ## [1.0.6] - 2026-05-27
 ### Added
 - AutoForm: Support data-driven visibility using `field.if` (utilizing state's `$$` double-calculation).
diff --git a/README.md b/README.md
index 9ed2f36..850d0bd 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@
 
 ### 2. 导出清单
 *   **Logic**: `HTTP`, `UI`, `State`, `MouseMover`
-*   **Components**: `<API>`, `<Modal>`, `<Dialog>`, `<Toast>`, `<AutoForm>`, `<TagsInput>`, `<FastList>`, `<List>`, `<GroupedList>`, `<FastGroupedList>`, `<Tree>`, `<FastTree>`, `<CollapseTree>`, `<Nav>`, `<Resizer>`
+*   **Components**: `<API>`, `<Modal>`, `<Dialog>`, `<Toast>`, `<AutoForm>`, `<TagsInput>`, `<DatePicker>`, `<ColorPicker>`, `<IconPicker>`, `<FastList>`, `<List>`, `<GroupedList>`, `<FastGroupedList>`, `<Tree>`, `<FastTree>`, `<CollapseTree>`, `<Nav>`, `<Resizer>`
 
 ---
 
@@ -60,6 +60,11 @@
 </AutoForm>
 ```
 
+#### 新增高级表单控件
+*   **`<DatePicker>`**: 支持范围选择。设置 `setting: { rangeEnd: 'field_name' }` 即可开启范围模式，自动同步结束日期到指定字段。
+*   **`<ColorPicker>`**: 颜色选择器，支持可视化选取及十六进制文本同步。
+*   **`<IconPicker>`**: 基于 Bootstrap Icons 的可视化图标选择器，支持搜索过滤。
+
 ### 4. 高性能列表 (`<FastList>` 家族)
 支持万级数据、动态高度、虚拟滚动。
 
diff --git a/TEST.md b/TEST.md
index a8f4ae5..666695f 100644
--- a/TEST.md
+++ b/TEST.md
@@ -3,18 +3,19 @@
 ## 基准测试 (Benchmark)
 *测试环境: Playwright / Chromium*
 
-| 指标 | v1.0.0 | v1.0.1 | v1.0.3 | v1.0.4 |
-| :--- | :--- | :--- | :--- | :--- |
-| **FastList Render & Scroll (10k items)** | ~535ms | ~473ms | ~1513ms | ~54ms |
-| **FastGroupedList Render & Scroll (10k)** | ~705ms | ~51ms | ~51ms | ~1550ms |
-| **FastTree Render & Scroll (10k items)** | ~927ms | ~50ms | ~51ms | ~1560ms |
-| **CollapseTree Render & Scroll (1.2k)** | ~51ms | ~50ms | ~50ms | ~51ms |
+| 指标 | 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
diff --git a/dist/base.js b/dist/base.js
index 2ef60ec..3cb5a30 100644
--- a/dist/base.js
+++ b/dist/base.js
@@ -379,6 +379,159 @@ Component.register("TagsInput", (container) => {
 </style>`
 ));
 AutoForm.register("TagsInput");
+Component.register("DatePicker", (container) => {
+  container.state = NewState({ start: "", end: "" });
+  container.addEventListener("bind", (e) => {
+    var _a, _b, _c;
+    container.state.start = e.detail || "";
+    const form = container.closest("AutoForm");
+    const name = container.getAttribute("name");
+    const item = (_b = (_a = form == null ? void 0 : form.state) == null ? void 0 : _a.schema) == null ? void 0 : _b.find((i) => i.name === name);
+    const rangeEnd = ((_c = item == null ? void 0 : item.setting) == null ? void 0 : _c.rangeEnd) || container.rangeEnd;
+    if (form && rangeEnd) {
+      container.state.end = form.data[rangeEnd] || "";
+    }
+  });
+  Object.defineProperty(container, "isRange", {
+    get: () => {
+      var _a, _b, _c;
+      const form = container.closest("AutoForm");
+      const name = container.getAttribute("name");
+      const item = (_b = (_a = form == null ? void 0 : form.state) == null ? void 0 : _a.schema) == null ? void 0 : _b.find((i) => i.name === name);
+      return !!(((_c = item == null ? void 0 : item.setting) == null ? void 0 : _c.rangeEnd) || container.rangeEnd);
+    }
+  });
+  Object.defineProperty(container, "value", {
+    get: () => container.state.start,
+    set: (v) => {
+      container.state.start = v || "";
+    }
+  });
+  container.updateStart = (val) => {
+    container.state.start = val;
+    container.dispatchEvent(new CustomEvent("change", { bubbles: true, detail: val }));
+  };
+  container.updateEnd = (val) => {
+    var _a, _b, _c;
+    container.state.end = val;
+    const form = container.closest("AutoForm");
+    const name = container.getAttribute("name");
+    const item = (_b = (_a = form == null ? void 0 : form.state) == null ? void 0 : _a.schema) == null ? void 0 : _b.find((i) => i.name === name);
+    const rangeEnd = ((_c = item == null ? void 0 : item.setting) == null ? void 0 : _c.rangeEnd) || container.rangeEnd;
+    if (form && rangeEnd) {
+      form.data[rangeEnd] = val;
+    }
+  };
+}, Util.makeDom(
+  /*html*/
+  `
+<div class="d-flex align-items-center gap-1 w-100">
+  <input type="date" class="form-control h-100" $bind="this.state.start" $onchange="this.updateStart(thisNode.value)">
+  <template $if="this.isRange">
+    <span class="text-muted mx-1">-</span>
+    <input type="date" class="form-control h-100" $bind="this.state.end" $onchange="this.updateEnd(thisNode.value)">
+  </template>
+</div>
+`
+));
+Component.register("ColorPicker", (container) => {
+  container.state = NewState({ value: "#000000" });
+  container.addEventListener("bind", (e) => {
+    container.state.value = e.detail || "#000000";
+  });
+  Object.defineProperty(container, "value", {
+    get: () => container.state.value,
+    set: (v) => {
+      container.state.value = v || "#000000";
+    }
+  });
+  container.updateValue = (val) => {
+    container.state.value = val;
+    container.dispatchEvent(new CustomEvent("change", { bubbles: true, detail: val }));
+  };
+}, Util.makeDom(
+  /*html*/
+  `
+<div class="d-flex align-items-center gap-2 w-100 h-100">
+  <input type="color" class="form-control form-control-color" style="width: 3rem; height: 100%; padding: 0.25rem" $bind="this.state.value" $onchange="this.updateValue(thisNode.value)">
+  <input type="text" class="form-control h-100" $bind="this.state.value" $onchange="this.updateValue(thisNode.value)">
+</div>
+`
+));
+const BOOTSTRAP_ICONS = ["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"];
+Component.register("IconPicker", (container) => {
+  container.state = NewState({ value: "", search: "", open: false });
+  container.addEventListener("bind", (e) => {
+    container.state.value = e.detail || "";
+  });
+  Object.defineProperty(container, "value", {
+    get: () => container.state.value,
+    set: (v) => {
+      container.state.value = v || "";
+    }
+  });
+  Object.defineProperty(container, "filteredIcons", {
+    get: () => {
+      var _a;
+      const s = ((_a = container.state.search) == null ? void 0 : _a.toLowerCase()) || "";
+      return BOOTSTRAP_ICONS.filter((i) => i.includes(s));
+    }
+  });
+  container.selectIcon = (icon) => {
+    container.state.value = icon;
+    container.state.open = false;
+    container.dispatchEvent(new CustomEvent("change", { bubbles: true, detail: icon }));
+  };
+  container.toggle = () => {
+    container.state.open = !container.state.open;
+    if (container.state.open) {
+      setTimeout(() => {
+        var _a;
+        (_a = $(container, "input")) == null ? void 0 : _a.focus();
+      }, 10);
+    }
+  };
+  const onGlobalClick = (e) => {
+    if (!container.contains(e.target)) {
+      container.state.open = false;
+    }
+  };
+  window.addEventListener("click", onGlobalClick);
+  container.addEventListener("remove", () => window.removeEventListener("click", onGlobalClick));
+}, Util.makeDom(
+  /*html*/
+  `
+<div class="dropdown w-100 h-100">
+  <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()">
+    <span class="d-flex align-items-center overflow-hidden">
+        <i $if="this.state.value" $class="bi bi-\${this.state.value} me-2"></i>
+        <span class="text-truncate" $text="this.state.value || '{#Select Icon#}'"></span>
+    </span>
+  </button>
+  <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">
+    <input type="text" class="form-control form-control-sm mb-2" placeholder="Search icons..." $bind="this.state.search" $onclick="event.stopPropagation()">
+    <div class="d-flex flex-wrap gap-1 overflow-auto p-1" style="flex: 1" $onclick="event.stopPropagation()">
+        <template $each="this.filteredIcons" as="icon">
+            <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">
+                <i $class="bi bi-\${icon}"></i>
+            </button>
+        </template>
+        <div $if="this.filteredIcons.length === 0" class="text-muted p-2 w-100 text-center">No icons found</div>
+    </div>
+  </div>
+</div>
+`
+), Util.makeDom(
+  /*html*/
+  `<style>
+    IconPicker { display: block; height: 100%; }
+    IconPicker .dropdown-menu { left: 0; }
+    IconPicker .btn-outline-light:hover { background-color: var(--bs-primary-bg-subtle); border-color: var(--bs-primary); }
+</style>`
+));
+AutoForm.register("DatePicker");
+AutoForm.register("ColorPicker");
+AutoForm.register("IconPicker");
 const VirtualScroll = (options = {}) => {
   const itemHeights = /* @__PURE__ */ new Map();
   const groupHeights = /* @__PURE__ */ new Map();
diff --git a/dist/base.min.js b/dist/base.min.js
index f0af74f..461cb9b 100644
--- a/dist/base.min.js
+++ b/dist/base.min.js
@@ -1 +1 @@
-import{Component as t,NewState as e,Util as i,$ as s,Hash as n,RefreshState as a}from"@web/state";const o={get:({url:t,...e})=>o.request({url:t,method:"GET",...e}),post:({url:t,data:e,...i})=>o.request({url:t,method:"POST",data:e,...i}),put:({url:t,data:e,...i})=>o.request({url:t,method:"PUT",data:e,...i}),delete:({url:t,...e})=>o.request({url:t,method:"DELETE",...e}),head:({url:t,...e})=>o.request({url:t,method:"HEAD",...e}),request:async({url:t,method:e="POST",data:i,headers:s={},responseType:n,timeout:a=1e4})=>{var o;const l={method:e=e.toUpperCase(),signal:null==(o=AbortSignal.timeout)?void 0:o.call(AbortSignal,a)};if(void 0!==i&&"GET"!==e&&"HEAD"!==e){if(i instanceof HTMLFormElement&&(i=new FormData(i)),i&&"object"==typeof i&&!(i instanceof FormData)&&!(i instanceof ArrayBuffer||ArrayBuffer.isView(i))&&Object.values(i).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,s]of Object.entries(i))s instanceof FileList||Array.isArray(s)?Array.from(s).forEach(i=>t.append(e,i)):null!=s&&t.append(e,s);i=t}i instanceof FormData?delete s["Content-Type"]:"string"==typeof i||i instanceof ArrayBuffer||ArrayBuffer.isView(i)||(i=JSON.stringify(i),s["Content-Type"]||(s["Content-Type"]="application/json")),l.body=i}Object.keys(s).length&&(l.headers=s);const r={error:null,ok:null,status:0,headers:{},responseType:"",result:null};try{const e=await fetch(t,l);if(Object.assign(r,{ok:e.ok,status:e.status,headers:Object.fromEntries(e.headers.entries())}),!n){const t=e.headers.get("Content-Type")||"";n=t.includes("application/json")?"json":/image|video|audio|pdf|zip|octet-stream/.test(t)?"binary":"text",r.responseType=n}!1===r.ok&&(r.error=(r.statusText||"HTTP "+r.status+" error")+" for "+t),r.result="json"===n?await e.json():"binary"===n?await e.arrayBuffer():await e.text()}catch(t){Object.assign(r,{error:t.message||String(t),ok:!1})}return r}},l=t.register("API",t=>{t.request=e({url:"",method:"GET",headers:{},data:null,timeout:1e4,responseType:""}),t.response=e({loading:!1,ok:null,status:null,error:null,headers:{},responseType:"",result:null}),t.result=e(),t.do=(e={})=>new Promise((i,s)=>{const n={...t.request,...e};if(!n.url)throw new Error(".url is required");n.headers={...t.request.headers,...e.headers},t.response.loading=!0,o.request(n).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 n;!e.noui&&(null==(n=globalThis.UI)?void 0:n.toast)&&UI.toast(i.message,{type:"danger"}),t.dispatchEvent(new CustomEvent("error",{detail:i,bubbles:!0})),s(i)})});let i=null;t.request.__watch(null,()=>{t.hasAttribute("auto")&&t.request.url&&(i||(i=Promise.resolve().then(()=>{t.do(),i=null})))})}),r={};t.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}))}),i.copyFunction(t,t.modal,"show","hide")},i.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')),t.register("Dialog",t.getSetupFunction("Modal"),i.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 $if="this.state?.title" $class="modal-header py-2 px-3 bg-light fw-bold text-${this.state?.type || \'primary\'}" $text="this.state?.title"></div>\n      <div slot-id="body" class="modal-body p-4"><div $html="this.state?.message"></div></div>\n      <div class="modal-footer py-2 px-3 bg-light">\n        <button $each="this.state?.buttons || [\'{#Close#}\']" type="button" $class="btn btn-sm px-3 btn-${index === (this.state?.buttons || []).length - 1 ? (this.state?.type && this.state?.type !== \'body\' ? this.state?.type : \'primary\') : \'outline-secondary border\'}" $onclick="this.result=index+1;this.hide()" $text="${item}"></button>\n      </div>\n    </div>\n  </div>\n</div>\n'));let d=0;r.showDialog=function({title:t="",message:e="",buttons:i=["{#Close#}"],type:s="body"}){const n=document.body.appendChild(document.createElement("Dialog"));return n.style.zIndex=2e3+ ++d,Promise.resolve().then(()=>{Object.assign(n.state,{message:e,title:t,type:s,buttons:i}),n.show()}),new Promise(t=>{n.addEventListener("change",e=>{d--,t(n.result||0),n.remove()})})},r.alert=function(t,e={}){return r.showDialog({message:t,...e})},r.confirm=function(t,e={}){return new Promise(i=>r.showDialog({message:t,buttons:["{#Cancel#}","{#Confirm#}"],...e}).then(t=>i(t>=2)).catch(()=>i(!1)))},t.register("Toast",t=>{t.toast=new bootstrap.Toast(t,{autohide:t.state.delay>0}),i.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)}})},i.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        <span $if="this.state?.left !== undefined" class="small text-dim ms-2" $text="${this.state?.left}s"></span>\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      <button $each="this.state?.buttons || [\'{#Close#}\']" 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    </div>\n  </div>\n</div>\n'),i.makeDom('<div toast-container="default" class="position-fixed bottom-0 end-0 overflow-auto" style="z-index:3000;max-height:80%"></div>')),r.toast=function(t,e={}){const i=e.delay??5e3,n=document.createElement("Toast");n.state={delay:i,left:i?i/1e3:void 0,type:e.type||"primary",message:t,buttons:e.buttons||[]},s(`[toast-container="${e.container||"default"}"]`).appendChild(n),Promise.resolve().then(()=>n.show())},r.toastConfirm=function(t,e={}){return new Promise(i=>r.toast(t,{buttons:["{#Confirm#}"],...e}).then(t=>i(1===t)).catch(()=>i(!1)))},t.register("AutoForm",t=>{t.state.schema||(t.state.schema=[]),t.vertical=t.hasAttribute("vertical"),t.inline=t.hasAttribute("inline"),t.nobutton=t.hasAttribute("nobutton"),t.request={method:"POST"},t.response={},t.result=null,Object.defineProperty(t,"data",{get:()=>t.state.data,set:i=>{t.state.data=(null==i?void 0:i.__isProxy)?i:e(i||{})}}),t.data=t.data||{},t._thisObj=t,t.form=s(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 n={...t.request,data:t.data,noui:!0,...e};let a=null;if(t.api)a=t.api.do(n);else{if(!t.request.url)return console.warn("{#please config .api or .request.url to auto submit#}");a=o.request(n)}a.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)&&UI.toast(e.message,{type:"danger"}),t.dispatchEvent(new CustomEvent("error",{detail:e,bubbles:!0}))})}},i.makeDom('\n<div $class="auto-form-root d-flex ${this.inline ? \'auto-form-inline h-100 w-100\' : \'\'}">\n  <form $class="w-100 ${this.inline ? \'d-flex align-items-stretch flex-fill h-100\' : (this.vertical ? \'d-flex flex-column flex-fill\' : \'auto-grid-form\')}" $onsubmit="event.stopPropagation();event.preventDefault();this.submit()">\n  <template $each="this.state.schema || []" as="item">\n    <div $$if="item.if || \'true\'" style="display:contents">\n      <label $if="!this.inline" $name="item.name" class="col-form-label text-muted" $text="item.label"></label>\n      <div control-wrapper $class="${this.inline ? \'flex-grow-1 h-100 d-flex align-items-center\' : \'mb-3\'}">\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 h-100 ${item.type === \'number\' ? \'text-end\' : \'\'}">\n        <select $if="item.type === \'select\'" $name="item.name" $.="item.setting || {}" $bind="this.data[item.name]" class="form-select h-100">\n          <option value="" $if="item.placeholder" $text="item.placeholder" disabled></option>\n          <option $each="item.options" $value="item.value || item" $text="item.label || item"></option>\n        </select>\n        <div $if="[\'checkbox\', \'radio\'].includes(item.type)" $class="${this.inline ? \'h-100 d-flex align-items-center px-2 gap-3 justify-content-center w-100 bg-body\' : \'\'}" style="white-space:nowrap; border-radius: 4px;">\n          <label $each="item.options || [item.text||item.label||item.name]" as="option" $class="form-check ${item.vertical ? \'\' : \'form-check-inline\'} mb-0 d-flex align-items-center p-0">\n            <input $name="item.name" class="form-check-input me-1" $type="item.type" $.="item.setting || {}" $value="item.options?option:\'on\'" $bind="this.data[item.name]">\n            <span $if="!this.inline || (item.options && item.options.length > 0)" $text="option" class="form-check-label"></span>\n          </label>\n        </div>\n        <div $if="item.type === \'switch\'" $class="form-check form-switch fs-4 h-100 d-flex align-items-center px-2 m-0 ${this.inline ? \'justify-content-center w-100\' : \'\'}" style="padding-left:0">\n          <input $name="item.name" class="form-check-input m-0" type="checkbox" style="cursor:pointer" $bind="this.data[item.name]" $onchange="event.stopPropagation()">\n        </div>\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  <div $if="!this.inline && !this.nobutton" class="d-flex justify-content-end align-items-baseline gap-3 mt-3" style="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'),i.makeDom("<style>\n\t@media (min-width: 576px) { .auto-grid-form {display: grid;grid-template-columns: max-content 1fr} .auto-grid-form .col-form-label {text-align: right; margin-bottom: 1rem;padding-right: 1rem;max-width: 200px} }\n\t.auto-form-inline { background-color: var(--bs-body-bg); }\n\t.auto-form-inline.min-h-100 { min-height: 100%; height: auto; }\n\t.auto-form-inline .form-control, .auto-form-inline .form-select { border-radius: 0; border: none; background-color: transparent !important; min-height: 100%; height: auto; width: 100%; padding: 0 8px; box-shadow: none; color: inherit; }\n\t.auto-form-inline .form-select { background-position: right 4px center; background-size: 12px 10px; padding-right: 20px; }\n\t.auto-form-inline textarea.form-control { padding: 8px; min-height: 100px; height: auto; }\n</style>"));const c=[],m={register:e=>{"undefined"!=typeof document&&("loading"!==document.readyState&&t.getTemplate("AutoForm")?m._addAutoFormComponent(e):c.push(e))},_addAutoFormComponent:e=>{const n=t.getTemplate("AutoForm");if(n){let t=s(n.content,"[control-wrapper]");if(!t){const e=s(n.content,"template");e&&(t=s(e.content,"[control-wrapper]"))}t&&!t.querySelector(e)&&t.appendChild(i.makeDom(`<${e} $if="item.type?.toLowerCase() === '${e.toLowerCase()}'" $name="item.name" $.="item.setting || {}" $bind="thisNode.closest('AutoForm').data[item.name]"></${e}>`))}}};if("undefined"!=typeof document){const t=()=>{c.forEach(t=>m._addAutoFormComponent(t)),c.length=0};"loading"!==document.readyState?setTimeout(t,100):document.addEventListener("DOMContentLoaded",()=>setTimeout(t,100),!0)}t.register("TagsInput",t=>{t.state=e({tags:[]}),t.addEventListener("bind",e=>{t.state.tags=Array.isArray(e.detail)?e.detail:[]}),Object.defineProperty(t,"value",{get:()=>t.state.tags,set:e=>{t.state.tags=Array.isArray(e)?e:[]}})},i.makeDom(`\n<div class="form-control d-flex flex-wrap gap-1 align-items-center w-100" style="cursor:text; min-height: 38px; border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 8px !important;">\n  <button $each="(this.state && this.state.tags) || []" type="button" class="btn btn-sm btn-outline-primary rounded-pill py-0 px-2" $onkeydown="${i.getFunctionBody(function(t){var e;["Backspace","Delete"].includes(t.key)&&(t.preventDefault(),(null==(e=this.state)?void 0:e.tags)&&(this.state.tags.splice(index,1),this.state.tags=this.state.tags,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.state.tags})),Promise.resolve().then(()=>{const t=this.querySelectorAll("button");if(t.length>0)(t[index>0?index-1:0]||t[0]).focus();else{const t=s(this,"input");t&&t.focus()}})))})}" $text="item"></button>\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; height: 32px" $onkeydown="${i.getFunctionBody(function(t){var e;if(!t.isComposing&&["Enter",","," "].includes(t.key)){t.preventDefault();const i=thisNode.value.trim();i&&(null==(e=this.state)?void 0:e.tags)&&!this.state.tags.includes(i)&&(this.state.tags.push(i),this.state.tags=this.state.tags,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.state.tags}))),thisNode.value=""}})}">\n</div>\n`),i.makeDom("<style>\n\tTagsInput { display: flex; align-items: center; min-height: 100%; width: 100%; background: transparent !important; }\n\tTagsInput button:focus {background-color:var(--bs-btn-hover-bg);color:var(--bs-btn-hover-color)}\n</style>")),m.register("TagsInput");const u=(t={})=>{const e=new Map,s=new Map;let n=1;const a=i.newAvg();let o=0,l=0,r=0,d=null,c=null,m=!1;const u=t.itemHeight||null;return{reset:(t,i)=>{if(m=!1,e.clear(),s.clear(),a.clear(),r=0,d=null,c=null,!(null==t?void 0:t.length))return[];const h=t.length;n=Math.ceil(Math.sqrt(h))||10;const p=window.getComputedStyle(i);o=parseFloat(p.paddingTop)||0,l=parseFloat(p.rowGap)||0;const b=Math.max(10,Math.ceil((i.clientHeight||100)/(u||32)));return t.slice(0,Math.min(3*b,h))},init:(t,i)=>{if(m)return;const o=t.length;let l=u||a.get()||32;o>0&&"object"==typeof t[0]&&null!==t[0]&&t[0]._itemHeight&&(l=t[0]._itemHeight),a.add(l),null===d&&(d=0,c=0);for(let i=0;i<o;i++)if(!e.has(i)){const s="object"==typeof t[i]&&null!==t[i]&&t[i]._itemHeight?t[i]._itemHeight:l;e.set(i,s)}for(let t=0;t<o;t+=n)s.set(t,Math.min(n,o-t)*l);m=!0,i()},update:(t,i)=>{if(null===d){const t=window.getComputedStyle(i);d=parseFloat(t.marginTop)||0,c=parseFloat(t.marginBottom)||0}0!==t||r||(r=d);const o=i.offsetHeight+d+c+l,m=e.get(t);if(o!==m){e.set(t,o),a.add(o);const i=o-(m||0),l=t-t%n;s.has(l)&&s.set(l,s.get(l)+i)}},calc:(t,i)=>{if(!m||!i)return null;const d=i.length;let c=Math.max(10,Math.ceil((t.clientHeight||100)/(a.get()||32))),u=o+r+l,h=0,p=0,b=0,f=0,g=[];const v=t.scrollTop;for(let t=0;t<d;t++)if(0===p){const a=s.get(t);if(a&&u+a<=v&&t+n<d)u+=a,t+=n-1;else{const s=e.get(t);if(u+s<=v&&t<d-1)u+=s;else{p=1;let s=Math.max(0,t);b=Math.max(0,s-c),f=Math.min(b+3*c,d),t=f-1,g=i.slice(b,f);for(let t=b;t<s;t++)u-=e.get(t)}}}else if(1===p){const i=s.get(t);i?(h+=i,t+=n-1):h+=e.get(t)}return{prevHeight:Math.max(0,u-o-r-l-(b>0?l:0)),postHeight:h>0?Math.max(0,h-2*l):0,renderedList:g,listStartIndex:b}}}};t.register("List",t=>{t.mode=t.getAttribute("mode")||"normal",t.fast=t.hasAttribute("fast"),t.collapsible=t.hasAttribute("collapsible");const s={idfield:"id",labelfield:"label",summaryfield:"summary",groupidfield:"id",grouplabelfield:"label",groupsummaryfield:"summary",groupfield:"group",parentfield:"parent",groupicon:"folder",itemicon:"file"};t.collapsed=e({});const n=()=>{i.updateDefaults(t,s);const e=t.state.list||[],n=[];if("group"===t.mode){const i={};e.forEach(e=>{var s;return(i[s=e[t.groupfield]]??(i[s]=[])).push(e)}),(t.state.groups||[]).forEach(e=>{n.push({type:"group",...e});const s=i[e[t.groupidfield]];s&&s.forEach(t=>n.push({type:"item",...t}))})}else if("tree"===t.mode){const i={};e.forEach(e=>{var s;return(i[s=e[t.parentfield]||""]??(i[s]=[])).push(e)});const s=(e,a,o)=>e.forEach(e=>{var l;const r=e[t.idfield],d=!!(null==(l=i[r])?void 0:l.length),c=t.collapsed[r];n.push({type:"item",...e,_level:a,_hasChildren:d,_parents:o}),d&&!c&&s(i[r],a+1,[...o,r])});s(i[""]||[],0,[])}else e.forEach(t=>n.push({type:"item",...t}));t.state._flatList=n};t.state.__watch("list",n);const a=t.fast?u():null;t.state._renderedList=[],t.refresh=()=>{if(!t.fast)return;const e=a.calc(t,t.state._flatList);e&&(t.state.prevHeight=e.prevHeight,t.state.postHeight=e.postHeight,t.state._listStartIndex=e.listStartIndex,t.state._renderedList=e.renderedList)},t.onItemUpdate=(e,i)=>{t.fast&&a.update(e+(t.state._listStartIndex||0),i)},t.state.__watch("_flatList",e=>{t.fast?(t.state._listStartIndex=0,t.state._renderedList=a.reset(e,t)||[],setTimeout(()=>{t.state._flatList===e&&a.init(e,t.refresh)})):t.state._renderedList=e}),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]],n())},n()},i.makeDom('\n<div class="list-group overflow-auto" onscroll="this.refresh()" style="overflow-anchor:none">\n\t<div $if="this.fast && (this.state?.prevHeight || 0) > 0" $style="height:${this.state?.prevHeight}px;" class="flex-shrink-0"></div>\n\t<template slot-id="item" $each="this.state?._renderedList">\n\t\t<div $onupdate="this.onItemUpdate(index, thisNode)" $class="list-group-item list-group-item-action d-inline-flex align-items-center ps-2 pe-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\t\t\t<template $if="item.type === \'group\'">\n\t\t\t\t<span $if="this.groupicon" $class="bi bi-${this.groupicon} text-body"></span>\n\t\t\t\t<div class="flex-shrink-0 px-1" $text="${item[this.grouplabelfield]}"></div>\n\t\t\t\t<div class="text-muted small flex-fill text-end text-truncate" style="width: 0" $text="${item[this.groupsummaryfield]}"></div>\n\t\t\t\t<div slot-id="group-actions"></div>\n\t\t\t</template>\n\t\t\t<template $if="item.type === \'item\'">\n\t\t\t\t<div $if="this.mode === \'tree\'" $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\t\t\t\t\t<i $if="this.collapsible && item._hasChildren" $class="bi ${this.collapsed[item[this.idfield]] ? \'bi-caret-right-fill\' : \'bi-caret-down-fill\'}"></i>\n\t\t\t\t</div>\n\t\t\t\t<span $if="this.mode === \'tree\'" $class="text-muted bi bi-${item._hasChildren ? this.groupicon : this.itemicon}"></span>\n\t\t\t\t<span $if="this.mode !== \'tree\' && this.itemicon" class="bi bi-${this.itemicon} text-body"></span>\n\t\t\t\t<div class="flex-shrink-0 px-1" $text="${item[this.labelfield]}"></div>\n\t\t\t\t<div class="text-muted small flex-fill text-end text-truncate" style="width: 0" $text="${item[this.summaryfield]}"></div>\n\t\t\t\t<div slot-id="item-actions"></div>\n\t\t\t</template>\n\t\t</div>\n\t</template>\n\t<div $if="this.fast && (this.state?.postHeight || 0) > 0" $style="height:${this.state?.postHeight}px;" class="flex-shrink-0"></div>\n</div>\n')),t.register("Nav",t=>{t.click=(e,i)=>{e.noselect||i||(n.nav=e.name),t.dispatchEvent(new CustomEvent("nav",{detail:{item:e},bubbles:!1}))}},i.makeDom('\n<div class="navbar navbar-expand bg-body-secondary px-3 pb-0 border-bottom align-items-center">\n\t<img $if="this.state.brand.image" $src="this.state.brand.image" class="me-2" style="height:30px;width:auto;max-width:300px">\n\t<i $if="this.state.brand.icon" $class="bi bi-${this.state.brand.icon} me-2"></i>\n\t<span $if="this.state.brand.label" class="me-2" $text="this.state.brand.label"></span>\n\t<div class="ms-2"></div>\n\t<div $each="this.state.list" $class="navbar-nav text-truncate ${item.type===\'fill\'?\'flex-fill\':\'\'}">\n\t\t<button $if="item.type===\'button\'" $class="nav-link ${Hash.nav===item.name?\'active\':\'\'}" $onclick="this.click(item)">\n\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</button>\n\t\t<div $if="item.type===\'dropdown\'" class="dropdown">\n\t\t\t<button $class="nav-link ${Hash.nav===item.name?\'active\':\'\'}" data-bs-toggle="dropdown">\n\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</button>\n\t\t\t<div class="dropdown-menu dropdown-menu-end p-3 bg-body-secondary shadow" $style="width: ${item.width || 250}px;">\n\t\t\t\t<template $each="item.list" as="subitem">\n\t\t\t\t\t<button $if="subitem.type===\'button\'" class="nav-link px-0 w-100 text-start" $onclick="this.click(subitem, true)">\n\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</button>\n\t\t\t\t\t<div $if="subitem.type===\'switch\'" class="d-flex align-items-center">\n\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<div class="form-switch"><input class="form-check-input mx-0" type="checkbox" $bind="subitem.bind[subitem.name]"></div>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n'));let h=!1,p={},b={};const f={start:(t,{onmousemove:e,onmouseup:i})=>{p={x:t.clientX,y:t.clientY,w:0,h:0},b={onmousemove:e,onmouseup:i},h=!0}};"undefined"!=typeof document&&(document.addEventListener("mouseup",t=>{var e;h&&(h=!1,null==(e=b.onmouseup)||e.call(b,{event:t,...p}))}),document.addEventListener("mousemove",t=>{var e;h&&(p.w=t.clientX-p.x,p.h=t.clientY-p.y,null==(e=b.onmousemove)||e.call(b,{event:t,...p}))})),t.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 n=(s,n,a)=>{const o=s+(t.isVertical?a:n);return o<e?e:o>i?i:o};t.addEventListener("mousedown",e=>{const i=t.isVertical?s.offsetHeight:s.offsetWidth;f.start(e,{onmousemove:({w:e,h:a})=>{const o=n(i,e,a);s.style[t.isVertical?"height":"width"]=o+"px",t.dispatchEvent(new CustomEvent("resizing",{detail:{oldSize:i,newSize:o},bubbles:!1}))},onmouseup:({w:e,h:s})=>{const a=n(i,e,s);t.dispatchEvent(new CustomEvent("resize",{detail:{oldSize:i,newSize:a},bubbles:!1})),t.dispatchEvent(new CustomEvent("change",{detail:a,bubbles:!1}))}})})},i.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"));const g=e({exitBlocks:0});globalThis.State=g,"undefined"!=typeof window&&window.addEventListener("beforeunload",t=>{g.exitBlocks>0&&t.preventDefault()});const v=document.documentElement;if(v.hasAttribute("$data-bs-theme")||v.hasAttribute("data-bs-theme")||v.setAttribute("$data-bs-theme","LocalStorage.darkMode?'dark':'light'"),globalThis.HTTP=o,globalThis.UI=r,globalThis.AutoForm=m,globalThis.MouseMover=f,"undefined"!=typeof document){const t=()=>a(document.documentElement);"loading"!==document.readyState?t():document.addEventListener("DOMContentLoaded",t,!0)}export{l as APIComponent,m as AutoForm,o as HTTP,f as MouseMover,g as State,r as UI,u as VirtualScroll};
+import{Component as t,NewState as e,Util as i,$ as s,Hash as a,RefreshState as n}from"@web/state";const o={get:({url:t,...e})=>o.request({url:t,method:"GET",...e}),post:({url:t,data:e,...i})=>o.request({url:t,method:"POST",data:e,...i}),put:({url:t,data:e,...i})=>o.request({url:t,method:"PUT",data:e,...i}),delete:({url:t,...e})=>o.request({url:t,method:"DELETE",...e}),head:({url:t,...e})=>o.request({url:t,method:"HEAD",...e}),request:async({url:t,method:e="POST",data:i,headers:s={},responseType:a,timeout:n=1e4})=>{var o;const l={method:e=e.toUpperCase(),signal:null==(o=AbortSignal.timeout)?void 0:o.call(AbortSignal,n)};if(void 0!==i&&"GET"!==e&&"HEAD"!==e){if(i instanceof HTMLFormElement&&(i=new FormData(i)),i&&"object"==typeof i&&!(i instanceof FormData)&&!(i instanceof ArrayBuffer||ArrayBuffer.isView(i))&&Object.values(i).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,s]of Object.entries(i))s instanceof FileList||Array.isArray(s)?Array.from(s).forEach(i=>t.append(e,i)):null!=s&&t.append(e,s);i=t}i instanceof FormData?delete s["Content-Type"]:"string"==typeof i||i instanceof ArrayBuffer||ArrayBuffer.isView(i)||(i=JSON.stringify(i),s["Content-Type"]||(s["Content-Type"]="application/json")),l.body=i}Object.keys(s).length&&(l.headers=s);const r={error:null,ok:null,status:0,headers:{},responseType:"",result:null};try{const e=await fetch(t,l);if(Object.assign(r,{ok:e.ok,status:e.status,headers:Object.fromEntries(e.headers.entries())}),!a){const t=e.headers.get("Content-Type")||"";a=t.includes("application/json")?"json":/image|video|audio|pdf|zip|octet-stream/.test(t)?"binary":"text",r.responseType=a}!1===r.ok&&(r.error=(r.statusText||"HTTP "+r.status+" error")+" for "+t),r.result="json"===a?await e.json():"binary"===a?await e.arrayBuffer():await e.text()}catch(t){Object.assign(r,{error:t.message||String(t),ok:!1})}return r}},l=t.register("API",t=>{t.request=e({url:"",method:"GET",headers:{},data:null,timeout:1e4,responseType:""}),t.response=e({loading:!1,ok:null,status:null,error:null,headers:{},responseType:"",result:null}),t.result=e(),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,o.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)&&UI.toast(i.message,{type:"danger"}),t.dispatchEvent(new CustomEvent("error",{detail:i,bubbles:!0})),s(i)})});let i=null;t.request.__watch(null,()=>{t.hasAttribute("auto")&&t.request.url&&(i||(i=Promise.resolve().then(()=>{t.do(),i=null})))})}),r={};t.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}))}),i.copyFunction(t,t.modal,"show","hide")},i.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')),t.register("Dialog",t.getSetupFunction("Modal"),i.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 $if="this.state?.title" $class="modal-header py-2 px-3 bg-light fw-bold text-${this.state?.type || \'primary\'}" $text="this.state?.title"></div>\n      <div slot-id="body" class="modal-body p-4"><div $html="this.state?.message"></div></div>\n      <div class="modal-footer py-2 px-3 bg-light">\n        <button $each="this.state?.buttons || [\'{#Close#}\']" type="button" $class="btn btn-sm px-3 btn-${index === (this.state?.buttons || []).length - 1 ? (this.state?.type && this.state?.type !== \'body\' ? this.state?.type : \'primary\') : \'outline-secondary border\'}" $onclick="this.result=index+1;this.hide()" $text="${item}"></button>\n      </div>\n    </div>\n  </div>\n</div>\n'));let d=0;r.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+ ++d,Promise.resolve().then(()=>{Object.assign(a.state,{message:e,title:t,type:s,buttons:i}),a.show()}),new Promise(t=>{a.addEventListener("change",e=>{d--,t(a.result||0),a.remove()})})},r.alert=function(t,e={}){return r.showDialog({message:t,...e})},r.confirm=function(t,e={}){return new Promise(i=>r.showDialog({message:t,buttons:["{#Cancel#}","{#Confirm#}"],...e}).then(t=>i(t>=2)).catch(()=>i(!1)))},t.register("Toast",t=>{t.toast=new bootstrap.Toast(t,{autohide:t.state.delay>0}),i.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)}})},i.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        <span $if="this.state?.left !== undefined" class="small text-dim ms-2" $text="${this.state?.left}s"></span>\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      <button $each="this.state?.buttons || [\'{#Close#}\']" 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    </div>\n  </div>\n</div>\n'),i.makeDom('<div toast-container="default" class="position-fixed bottom-0 end-0 overflow-auto" style="z-index:3000;max-height:80%"></div>')),r.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||[]},s(`[toast-container="${e.container||"default"}"]`).appendChild(a),Promise.resolve().then(()=>a.show())},r.toastConfirm=function(t,e={}){return new Promise(i=>r.toast(t,{buttons:["{#Confirm#}"],...e}).then(t=>i(1===t)).catch(()=>i(!1)))},t.register("AutoForm",t=>{t.state.schema||(t.state.schema=[]),t.vertical=t.hasAttribute("vertical"),t.inline=t.hasAttribute("inline"),t.nobutton=t.hasAttribute("nobutton"),t.request={method:"POST"},t.response={},t.result=null,Object.defineProperty(t,"data",{get:()=>t.state.data,set:i=>{t.state.data=(null==i?void 0:i.__isProxy)?i:e(i||{})}}),t.data=t.data||{},t._thisObj=t,t.form=s(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 n=null;if(t.api)n=t.api.do(a);else{if(!t.request.url)return console.warn("{#please config .api or .request.url to auto submit#}");n=o.request(a)}n.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)&&UI.toast(e.message,{type:"danger"}),t.dispatchEvent(new CustomEvent("error",{detail:e,bubbles:!0}))})}},i.makeDom('\n<div $class="auto-form-root d-flex ${this.inline ? \'auto-form-inline h-100 w-100\' : \'\'}">\n  <form $class="w-100 ${this.inline ? \'d-flex align-items-stretch flex-fill h-100\' : (this.vertical ? \'d-flex flex-column flex-fill\' : \'auto-grid-form\')}" $onsubmit="event.stopPropagation();event.preventDefault();this.submit()">\n  <template $each="this.state.schema || []" as="item">\n    <div $$if="item.if || \'true\'" style="display:contents">\n      <label $if="!this.inline" $name="item.name" class="col-form-label text-muted" $text="item.label"></label>\n      <div control-wrapper $class="${this.inline ? \'flex-grow-1 h-100 d-flex align-items-center\' : \'mb-3\'}">\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 h-100 ${item.type === \'number\' ? \'text-end\' : \'\'}">\n        <select $if="item.type === \'select\'" $name="item.name" $.="item.setting || {}" $bind="this.data[item.name]" class="form-select h-100">\n          <option value="" $if="item.placeholder" $text="item.placeholder" disabled></option>\n          <option $each="item.options" $value="item.value || item" $text="item.label || item"></option>\n        </select>\n        <div $if="[\'checkbox\', \'radio\'].includes(item.type)" $class="${this.inline ? \'h-100 d-flex align-items-center px-2 gap-3 justify-content-center w-100 bg-body\' : \'\'}" style="white-space:nowrap; border-radius: 4px;">\n          <label $each="item.options || [item.text||item.label||item.name]" as="option" $class="form-check ${item.vertical ? \'\' : \'form-check-inline\'} mb-0 d-flex align-items-center p-0">\n            <input $name="item.name" class="form-check-input me-1" $type="item.type" $.="item.setting || {}" $value="item.options?option:\'on\'" $bind="this.data[item.name]">\n            <span $if="!this.inline || (item.options && item.options.length > 0)" $text="option" class="form-check-label"></span>\n          </label>\n        </div>\n        <div $if="item.type === \'switch\'" $class="form-check form-switch fs-4 h-100 d-flex align-items-center px-2 m-0 ${this.inline ? \'justify-content-center w-100\' : \'\'}" style="padding-left:0">\n          <input $name="item.name" class="form-check-input m-0" type="checkbox" style="cursor:pointer" $bind="this.data[item.name]" $onchange="event.stopPropagation()">\n        </div>\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  <div $if="!this.inline && !this.nobutton" class="d-flex justify-content-end align-items-baseline gap-3 mt-3" style="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'),i.makeDom("<style>\n\t@media (min-width: 576px) { .auto-grid-form {display: grid;grid-template-columns: max-content 1fr} .auto-grid-form .col-form-label {text-align: right; margin-bottom: 1rem;padding-right: 1rem;max-width: 200px} }\n\t.auto-form-inline { background-color: var(--bs-body-bg); }\n\t.auto-form-inline.min-h-100 { min-height: 100%; height: auto; }\n\t.auto-form-inline .form-control, .auto-form-inline .form-select { border-radius: 0; border: none; background-color: transparent !important; min-height: 100%; height: auto; width: 100%; padding: 0 8px; box-shadow: none; color: inherit; }\n\t.auto-form-inline .form-select { background-position: right 4px center; background-size: 12px 10px; padding-right: 20px; }\n\t.auto-form-inline textarea.form-control { padding: 8px; min-height: 100px; height: auto; }\n</style>"));const c=[],u={register:e=>{"undefined"!=typeof document&&("loading"!==document.readyState&&t.getTemplate("AutoForm")?u._addAutoFormComponent(e):c.push(e))},_addAutoFormComponent:e=>{const a=t.getTemplate("AutoForm");if(a){let t=s(a.content,"[control-wrapper]");if(!t){const e=s(a.content,"template");e&&(t=s(e.content,"[control-wrapper]"))}t&&!t.querySelector(e)&&t.appendChild(i.makeDom(`<${e} $if="item.type?.toLowerCase() === '${e.toLowerCase()}'" $name="item.name" $.="item.setting || {}" $bind="thisNode.closest('AutoForm').data[item.name]"></${e}>`))}}};if("undefined"!=typeof document){const t=()=>{c.forEach(t=>u._addAutoFormComponent(t)),c.length=0};"loading"!==document.readyState?setTimeout(t,100):document.addEventListener("DOMContentLoaded",()=>setTimeout(t,100),!0)}t.register("TagsInput",t=>{t.state=e({tags:[]}),t.addEventListener("bind",e=>{t.state.tags=Array.isArray(e.detail)?e.detail:[]}),Object.defineProperty(t,"value",{get:()=>t.state.tags,set:e=>{t.state.tags=Array.isArray(e)?e:[]}})},i.makeDom(`\n<div class="form-control d-flex flex-wrap gap-1 align-items-center w-100" style="cursor:text; min-height: 38px; border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 8px !important;">\n  <button $each="(this.state && this.state.tags) || []" type="button" class="btn btn-sm btn-outline-primary rounded-pill py-0 px-2" $onkeydown="${i.getFunctionBody(function(t){var e;["Backspace","Delete"].includes(t.key)&&(t.preventDefault(),(null==(e=this.state)?void 0:e.tags)&&(this.state.tags.splice(index,1),this.state.tags=this.state.tags,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.state.tags})),Promise.resolve().then(()=>{const t=this.querySelectorAll("button");if(t.length>0)(t[index>0?index-1:0]||t[0]).focus();else{const t=s(this,"input");t&&t.focus()}})))})}" $text="item"></button>\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; height: 32px" $onkeydown="${i.getFunctionBody(function(t){var e;if(!t.isComposing&&["Enter",","," "].includes(t.key)){t.preventDefault();const i=thisNode.value.trim();i&&(null==(e=this.state)?void 0:e.tags)&&!this.state.tags.includes(i)&&(this.state.tags.push(i),this.state.tags=this.state.tags,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.state.tags}))),thisNode.value=""}})}">\n</div>\n`),i.makeDom("<style>\n\tTagsInput { display: flex; align-items: center; min-height: 100%; width: 100%; background: transparent !important; }\n\tTagsInput button:focus {background-color:var(--bs-btn-hover-bg);color:var(--bs-btn-hover-color)}\n</style>")),u.register("TagsInput"),t.register("DatePicker",t=>{t.state=e({start:"",end:""}),t.addEventListener("bind",e=>{var i,s,a;t.state.start=e.detail||"";const n=t.closest("AutoForm"),o=t.getAttribute("name"),l=null==(s=null==(i=null==n?void 0:n.state)?void 0:i.schema)?void 0:s.find(t=>t.name===o),r=(null==(a=null==l?void 0:l.setting)?void 0:a.rangeEnd)||t.rangeEnd;n&&r&&(t.state.end=n.data[r]||"")}),Object.defineProperty(t,"isRange",{get:()=>{var e,i,s;const a=t.closest("AutoForm"),n=t.getAttribute("name"),o=null==(i=null==(e=null==a?void 0:a.state)?void 0:e.schema)?void 0:i.find(t=>t.name===n);return!(!(null==(s=null==o?void 0:o.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 n=t.closest("AutoForm"),o=t.getAttribute("name"),l=null==(s=null==(i=null==n?void 0:n.state)?void 0:i.schema)?void 0:s.find(t=>t.name===o),r=(null==(a=null==l?void 0:l.setting)?void 0:a.rangeEnd)||t.rangeEnd;n&&r&&(n.data[r]=e)}},i.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')),t.register("ColorPicker",t=>{t.state=e({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}))}},i.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" style="width: 3rem; height: 100%; padding: 0.25rem" $bind="this.state.value" $onchange="this.updateValue(thisNode.value)">\n  <input type="text" class="form-control h-100" $bind="this.state.value" $onchange="this.updateValue(thisNode.value)">\n</div>\n'));const m=["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"];t.register("IconPicker",t=>{t.state=e({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 m.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=s(t,"input"))||e.focus()},10)};const i=e=>{t.contains(e.target)||(t.state.open=!1)};window.addEventListener("click",i),t.addEventListener("remove",()=>window.removeEventListener("click",i))},i.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'),i.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>")),u.register("DatePicker"),u.register("ColorPicker"),u.register("IconPicker");const p=(t={})=>{const e=new Map,s=new Map;let a=1;const n=i.newAvg();let o=0,l=0,r=0,d=null,c=null,u=!1;const m=t.itemHeight||null;return{reset:(t,i)=>{if(u=!1,e.clear(),s.clear(),n.clear(),r=0,d=null,c=null,!(null==t?void 0:t.length))return[];const p=t.length;a=Math.ceil(Math.sqrt(p))||10;const h=window.getComputedStyle(i);o=parseFloat(h.paddingTop)||0,l=parseFloat(h.rowGap)||0;const b=Math.max(10,Math.ceil((i.clientHeight||100)/(m||32)));return t.slice(0,Math.min(3*b,p))},init:(t,i)=>{if(u)return;const o=t.length;let l=m||n.get()||32;o>0&&"object"==typeof t[0]&&null!==t[0]&&t[0]._itemHeight&&(l=t[0]._itemHeight),n.add(l),null===d&&(d=0,c=0);for(let i=0;i<o;i++)if(!e.has(i)){const s="object"==typeof t[i]&&null!==t[i]&&t[i]._itemHeight?t[i]._itemHeight:l;e.set(i,s)}for(let t=0;t<o;t+=a)s.set(t,Math.min(a,o-t)*l);u=!0,i()},update:(t,i)=>{if(null===d){const t=window.getComputedStyle(i);d=parseFloat(t.marginTop)||0,c=parseFloat(t.marginBottom)||0}0!==t||r||(r=d);const o=i.offsetHeight+d+c+l,u=e.get(t);if(o!==u){e.set(t,o),n.add(o);const i=o-(u||0),l=t-t%a;s.has(l)&&s.set(l,s.get(l)+i)}},calc:(t,i)=>{if(!u||!i)return null;const d=i.length;let c=Math.max(10,Math.ceil((t.clientHeight||100)/(n.get()||32))),m=o+r+l,p=0,h=0,b=0,g=0,f=[];const v=t.scrollTop;for(let t=0;t<d;t++)if(0===h){const n=s.get(t);if(n&&m+n<=v&&t+a<d)m+=n,t+=a-1;else{const s=e.get(t);if(m+s<=v&&t<d-1)m+=s;else{h=1;let s=Math.max(0,t);b=Math.max(0,s-c),g=Math.min(b+3*c,d),t=g-1,f=i.slice(b,g);for(let t=b;t<s;t++)m-=e.get(t)}}}else if(1===h){const i=s.get(t);i?(p+=i,t+=a-1):p+=e.get(t)}return{prevHeight:Math.max(0,m-o-r-l-(b>0?l:0)),postHeight:p>0?Math.max(0,p-2*l):0,renderedList:f,listStartIndex:b}}}};t.register("List",t=>{t.mode=t.getAttribute("mode")||"normal",t.fast=t.hasAttribute("fast"),t.collapsible=t.hasAttribute("collapsible");const s={idfield:"id",labelfield:"label",summaryfield:"summary",groupidfield:"id",grouplabelfield:"label",groupsummaryfield:"summary",groupfield:"group",parentfield:"parent",groupicon:"folder",itemicon:"file"};t.collapsed=e({});const a=()=>{i.updateDefaults(t,s);const e=t.state.list||[],a=[];if("group"===t.mode){const i={};e.forEach(e=>{var s;return(i[s=e[t.groupfield]]??(i[s]=[])).push(e)}),(t.state.groups||[]).forEach(e=>{a.push({type:"group",...e});const s=i[e[t.groupidfield]];s&&s.forEach(t=>a.push({type:"item",...t}))})}else if("tree"===t.mode){const i={};e.forEach(e=>{var s;return(i[s=e[t.parentfield]||""]??(i[s]=[])).push(e)});const s=(e,n,o)=>e.forEach(e=>{var l;const r=e[t.idfield],d=!!(null==(l=i[r])?void 0:l.length),c=t.collapsed[r];a.push({type:"item",...e,_level:n,_hasChildren:d,_parents:o}),d&&!c&&s(i[r],n+1,[...o,r])});s(i[""]||[],0,[])}else e.forEach(t=>a.push({type:"item",...t}));t.state._flatList=a};t.state.__watch("list",a);const n=t.fast?p():null;t.state._renderedList=[],t.refresh=()=>{if(!t.fast)return;const e=n.calc(t,t.state._flatList);e&&(t.state.prevHeight=e.prevHeight,t.state.postHeight=e.postHeight,t.state._listStartIndex=e.listStartIndex,t.state._renderedList=e.renderedList)},t.onItemUpdate=(e,i)=>{t.fast&&n.update(e+(t.state._listStartIndex||0),i)},t.state.__watch("_flatList",e=>{t.fast?(t.state._listStartIndex=0,t.state._renderedList=n.reset(e,t)||[],setTimeout(()=>{t.state._flatList===e&&n.init(e,t.refresh)})):t.state._renderedList=e}),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())},a()},i.makeDom('\n<div class="list-group overflow-auto" onscroll="this.refresh()" style="overflow-anchor:none">\n\t<div $if="this.fast && (this.state?.prevHeight || 0) > 0" $style="height:${this.state?.prevHeight}px;" class="flex-shrink-0"></div>\n\t<template slot-id="item" $each="this.state?._renderedList">\n\t\t<div $onupdate="this.onItemUpdate(index, thisNode)" $class="list-group-item list-group-item-action d-inline-flex align-items-center ps-2 pe-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\t\t\t<template $if="item.type === \'group\'">\n\t\t\t\t<span $if="this.groupicon" $class="bi bi-${this.groupicon} text-body"></span>\n\t\t\t\t<div class="flex-shrink-0 px-1" $text="${item[this.grouplabelfield]}"></div>\n\t\t\t\t<div class="text-muted small flex-fill text-end text-truncate" style="width: 0" $text="${item[this.groupsummaryfield]}"></div>\n\t\t\t\t<div slot-id="group-actions"></div>\n\t\t\t</template>\n\t\t\t<template $if="item.type === \'item\'">\n\t\t\t\t<div $if="this.mode === \'tree\'" $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\t\t\t\t\t<i $if="this.collapsible && item._hasChildren" $class="bi ${this.collapsed[item[this.idfield]] ? \'bi-caret-right-fill\' : \'bi-caret-down-fill\'}"></i>\n\t\t\t\t</div>\n\t\t\t\t<span $if="this.mode === \'tree\'" $class="text-muted bi bi-${item._hasChildren ? this.groupicon : this.itemicon}"></span>\n\t\t\t\t<span $if="this.mode !== \'tree\' && this.itemicon" class="bi bi-${this.itemicon} text-body"></span>\n\t\t\t\t<div class="flex-shrink-0 px-1" $text="${item[this.labelfield]}"></div>\n\t\t\t\t<div class="text-muted small flex-fill text-end text-truncate" style="width: 0" $text="${item[this.summaryfield]}"></div>\n\t\t\t\t<div slot-id="item-actions"></div>\n\t\t\t</template>\n\t\t</div>\n\t</template>\n\t<div $if="this.fast && (this.state?.postHeight || 0) > 0" $style="height:${this.state?.postHeight}px;" class="flex-shrink-0"></div>\n</div>\n')),t.register("Nav",t=>{t.click=(e,i)=>{e.noselect||i||(a.nav=e.name),t.dispatchEvent(new CustomEvent("nav",{detail:{item:e},bubbles:!1}))}},i.makeDom('\n<div class="navbar navbar-expand bg-body-secondary px-3 pb-0 border-bottom align-items-center">\n\t<img $if="this.state.brand.image" $src="this.state.brand.image" class="me-2" style="height:30px;width:auto;max-width:300px">\n\t<i $if="this.state.brand.icon" $class="bi bi-${this.state.brand.icon} me-2"></i>\n\t<span $if="this.state.brand.label" class="me-2" $text="this.state.brand.label"></span>\n\t<div class="ms-2"></div>\n\t<div $each="this.state.list" $class="navbar-nav text-truncate ${item.type===\'fill\'?\'flex-fill\':\'\'}">\n\t\t<button $if="item.type===\'button\'" $class="nav-link ${Hash.nav===item.name?\'active\':\'\'}" $onclick="this.click(item)">\n\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</button>\n\t\t<div $if="item.type===\'dropdown\'" class="dropdown">\n\t\t\t<button $class="nav-link ${Hash.nav===item.name?\'active\':\'\'}" data-bs-toggle="dropdown">\n\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</button>\n\t\t\t<div class="dropdown-menu dropdown-menu-end p-3 bg-body-secondary shadow" $style="width: ${item.width || 250}px;">\n\t\t\t\t<template $each="item.list" as="subitem">\n\t\t\t\t\t<button $if="subitem.type===\'button\'" class="nav-link px-0 w-100 text-start" $onclick="this.click(subitem, true)">\n\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</button>\n\t\t\t\t\t<div $if="subitem.type===\'switch\'" class="d-flex align-items-center">\n\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<div class="form-switch"><input class="form-check-input mx-0" type="checkbox" $bind="subitem.bind[subitem.name]"></div>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n'));let h=!1,b={},g={};const f={start:(t,{onmousemove:e,onmouseup:i})=>{b={x:t.clientX,y:t.clientY,w:0,h:0},g={onmousemove:e,onmouseup:i},h=!0}};"undefined"!=typeof document&&(document.addEventListener("mouseup",t=>{var e;h&&(h=!1,null==(e=g.onmouseup)||e.call(g,{event:t,...b}))}),document.addEventListener("mousemove",t=>{var e;h&&(b.w=t.clientX-b.x,b.h=t.clientY-b.y,null==(e=g.onmousemove)||e.call(g,{event:t,...b}))})),t.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,n)=>{const o=s+(t.isVertical?n:a);return o<e?e:o>i?i:o};t.addEventListener("mousedown",e=>{const i=t.isVertical?s.offsetHeight:s.offsetWidth;f.start(e,{onmousemove:({w:e,h:n})=>{const o=a(i,e,n);s.style[t.isVertical?"height":"width"]=o+"px",t.dispatchEvent(new CustomEvent("resizing",{detail:{oldSize:i,newSize:o},bubbles:!1}))},onmouseup:({w:e,h:s})=>{const n=a(i,e,s);t.dispatchEvent(new CustomEvent("resize",{detail:{oldSize:i,newSize:n},bubbles:!1})),t.dispatchEvent(new CustomEvent("change",{detail:n,bubbles:!1}))}})})},i.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"));const v=e({exitBlocks:0});globalThis.State=v,"undefined"!=typeof window&&window.addEventListener("beforeunload",t=>{v.exitBlocks>0&&t.preventDefault()});const y=document.documentElement;if(y.hasAttribute("$data-bs-theme")||y.hasAttribute("data-bs-theme")||y.setAttribute("$data-bs-theme","LocalStorage.darkMode?'dark':'light'"),globalThis.HTTP=o,globalThis.UI=r,globalThis.AutoForm=u,globalThis.MouseMover=f,"undefined"!=typeof document){const t=()=>n(document.documentElement);"loading"!==document.readyState?t():document.addEventListener("DOMContentLoaded",t,!0)}export{l as APIComponent,u as AutoForm,o as HTTP,f as MouseMover,v as State,r as UI,p as VirtualScroll};
diff --git a/package.json b/package.json
index 8e5a7e7..f658aa3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@web/base",
-	"version": "1.0.5",
+	"version": "1.0.7",
 	"type": "module",
 	"main": "dist/base.js",
 	"module": "dist/base.js",
diff --git a/src/controls.js b/src/controls.js
new file mode 100644
index 0000000..322ab71
--- /dev/null
+++ b/src/controls.js
@@ -0,0 +1,162 @@
+import { Component, NewState, Util, $ } from '@web/state'
+import { AutoForm } from './form.js'
+
+/**
+ * DatePicker
+ * 支持单日期及范围选择 (主字段 + 影子字段模式)
+ */
+Component.register('DatePicker', container => {
+	container.state = NewState({ start: '', end: '' })
+	
+	container.addEventListener('bind', e => {
+		container.state.start = e.detail || ''
+		const form = container.closest('AutoForm')
+		const name = container.getAttribute('name')
+		const item = form?.state?.schema?.find(i => i.name === name)
+		const rangeEnd = item?.setting?.rangeEnd || container.rangeEnd
+		if (form && rangeEnd) {
+			container.state.end = form.data[rangeEnd] || ''
+		}
+	})
+
+	Object.defineProperty(container, 'isRange', {
+		get: () => {
+			const form = container.closest('AutoForm')
+			const name = container.getAttribute('name')
+			const item = form?.state?.schema?.find(i => i.name === name)
+			return !!(item?.setting?.rangeEnd || container.rangeEnd)
+		}
+	})
+
+	Object.defineProperty(container, 'value', {
+		get: () => container.state.start,
+		set: v => { container.state.start = v || ''; }
+	})
+
+	container.updateStart = (val) => {
+		container.state.start = val
+		container.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: val }))
+	}
+
+	container.updateEnd = (val) => {
+		container.state.end = val
+		const form = container.closest('AutoForm')
+		const name = container.getAttribute('name')
+		const item = form?.state?.schema?.find(i => i.name === name)
+		const rangeEnd = item?.setting?.rangeEnd || container.rangeEnd
+		if (form && rangeEnd) {
+			form.data[rangeEnd] = val
+		}
+	}
+}, Util.makeDom(/*html*/`
+<div class="d-flex align-items-center gap-1 w-100">
+  <input type="date" class="form-control h-100" $bind="this.state.start" $onchange="this.updateStart(thisNode.value)">
+  <template $if="this.isRange">
+    <span class="text-muted mx-1">-</span>
+    <input type="date" class="form-control h-100" $bind="this.state.end" $onchange="this.updateEnd(thisNode.value)">
+  </template>
+</div>
+`))
+
+/**
+ * ColorPicker
+ * 支持颜色选择与十六进制文本输入
+ */
+Component.register('ColorPicker', container => {
+	container.state = NewState({ value: '#000000' })
+	container.addEventListener('bind', e => {
+		container.state.value = e.detail || '#000000'
+	})
+	Object.defineProperty(container, 'value', {
+		get: () => container.state.value,
+		set: v => { container.state.value = v || '#000000'; }
+	})
+	container.updateValue = (val) => {
+		container.state.value = val
+		container.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: val }))
+	}
+}, Util.makeDom(/*html*/`
+<div class="d-flex align-items-center gap-2 w-100 h-100">
+  <input type="color" class="form-control form-control-color" style="width: 3rem; height: 100%; padding: 0.25rem" $bind="this.state.value" $onchange="this.updateValue(thisNode.value)">
+  <input type="text" class="form-control h-100" $bind="this.state.value" $onchange="this.updateValue(thisNode.value)">
+</div>
+`))
+
+const BOOTSTRAP_ICONS = ['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']
+
+/**
+ * IconPicker
+ * 基于 Bootstrap Icons 的可视化选择控件
+ */
+Component.register('IconPicker', container => {
+	container.state = NewState({ value: '', search: '', open: false })
+	container.addEventListener('bind', e => {
+		container.state.value = e.detail || ''
+	})
+	
+	Object.defineProperty(container, 'value', {
+		get: () => container.state.value,
+		set: v => { container.state.value = v || ''; }
+	})
+
+	Object.defineProperty(container, 'filteredIcons', {
+		get: () => {
+			const s = container.state.search?.toLowerCase() || ''
+			return BOOTSTRAP_ICONS.filter(i => i.includes(s))
+		}
+	})
+
+	container.selectIcon = (icon) => {
+		container.state.value = icon
+		container.state.open = false
+		container.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: icon }))
+	}
+
+	container.toggle = () => {
+		container.state.open = !container.state.open
+		if (container.state.open) {
+			setTimeout(() => {
+				$(container, 'input')?.focus()
+			}, 10)
+		}
+	}
+    
+    const onGlobalClick = (e) => {
+        if (!container.contains(e.target)) {
+            container.state.open = false
+        }
+    }
+    window.addEventListener('click', onGlobalClick)
+    container.addEventListener('remove', () => window.removeEventListener('click', onGlobalClick))
+}, Util.makeDom(/*html*/`
+<div class="dropdown w-100 h-100">
+  <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()">
+    <span class="d-flex align-items-center overflow-hidden">
+        <i $if="this.state.value" $class="bi bi-\${this.state.value} me-2"></i>
+        <span class="text-truncate" $text="this.state.value || '{#Select Icon#}'"></span>
+    </span>
+  </button>
+  <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">
+    <input type="text" class="form-control form-control-sm mb-2" placeholder="Search icons..." $bind="this.state.search" $onclick="event.stopPropagation()">
+    <div class="d-flex flex-wrap gap-1 overflow-auto p-1" style="flex: 1" $onclick="event.stopPropagation()">
+        <template $each="this.filteredIcons" as="icon">
+            <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">
+                <i $class="bi bi-\${icon}"></i>
+            </button>
+        </template>
+        <div $if="this.filteredIcons.length === 0" class="text-muted p-2 w-100 text-center">No icons found</div>
+    </div>
+  </div>
+</div>
+`), Util.makeDom(/*html*/`<style>
+    IconPicker { display: block; height: 100%; }
+    IconPicker .dropdown-menu { left: 0; }
+    IconPicker .btn-outline-light:hover { background-color: var(--bs-primary-bg-subtle); border-color: var(--bs-primary); }
+</style>`))
+
+// 注册到 AutoForm
+AutoForm.register('DatePicker')
+AutoForm.register('ColorPicker')
+AutoForm.register('IconPicker')
+
+export { }
diff --git a/src/index.js b/src/index.js
index afacd2c..a8d77ab 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,6 +4,7 @@ import { NewState } from '@web/state'
 export * from './http.js'
 export * from './ui.js'
 export * from './form.js'
+export * from './controls.js'
 export * from './list.js'
 export * from './nav.js'
 export * from './interaction.js'
diff --git a/test-results/all-base-project-comprehen-6c76e-ts-and-scrolling-benchmarks/error-context.md b/test-results/all-base-project-comprehen-6c76e-ts-and-scrolling-benchmarks/error-context.md
index 8b8ce51..65ab25c 100644
--- a/test-results/all-base-project-comprehen-6c76e-ts-and-scrolling-benchmarks/error-context.md
+++ b/test-results/all-base-project-comprehen-6c76e-ts-and-scrolling-benchmarks/error-context.md
@@ -12,91 +12,13 @@
 # Error details
 
 ```
-Test timeout of 60000ms exceeded.
+Error: page.evaluate: TypeError: Cannot read properties of null (reading 'scrollTop')
+    at eval (eval at evaluate (:302:30), <anonymous>:9:21)
+    at async <anonymous>:328:30
 ```
 
-```
-Error: page.waitForFunction: Test timeout of 60000ms exceeded.
-```
+# Page snapshot
 
-# Test source
-
-```ts
-  1  | import { test, expect } from '@playwright/test';
-  2  | 
-  3  | test('base project comprehensive tests and scrolling benchmarks', async ({ page }) => {
-  4  |     test.setTimeout(60000);
-  5  |     page.on('console', msg => console.log('BROWSER LOG:', msg.text()));
-  6  |     await page.goto('http://127.0.0.1:8082/test/index.html');
-  7  |     
-  8  |     // Wait for testStatus to be set (includes basic unit tests and scrolling refresh test)
-> 9  |     await page.waitForFunction(() => window.testStatus !== undefined, { timeout: 60000 });
-     |                ^ Error: page.waitForFunction: Test timeout of 60000ms exceeded.
-  10 |     
-  11 |     const status = await page.evaluate(() => window.testStatus);
-  12 |     expect(status).toBe('passed');
-  13 | 
-  14 |     // Simulate real scrolling and check dynamic rendering for FastList
-  15 |     console.log('Simulating real scroll on FastList...');
-  16 |     const scrollInfo = await page.evaluate(async () => {
-  17 |         window.switchTab?.('ll');
-  18 |         await new Promise(r => setTimeout(r, 200)); // wait for render
-  19 |         const el = document.getElementById('ll');
-  20 |         const results = [];
-  21 |         
-  22 |         const getRenderedCount = () => el.querySelectorAll('.border-primary').length;
-  23 |         
-  24 |         results.push({ 
-  25 |             id: 'initial',
-  26 |             scrollTop: el.scrollTop, 
-  27 |             scrollHeight: el.scrollHeight,
-  28 |             clientHeight: el.clientHeight,
-  29 |             renderedCount: getRenderedCount(),
-  30 |             renderedListLen: el.state.renderedList?.length
-  31 |         });
-  32 | 
-  33 |     // Scroll to middle
-  34 |     el.scrollTop = 50000;
-  35 |     el.refresh?.();
-  36 |     await new Promise(r => setTimeout(r, 500));
-  37 |     const midCount = getRenderedCount();
-  38 |     const midHtml = el.innerHTML.length;
-  39 |     results.push({ 
-  40 |         id: 'deep-middle',
-  41 |         scrollTop: el.scrollTop, 
-  42 |         renderedCount: midCount,
-  43 |         htmlLen: midHtml,
-  44 |         prevHeight: el.state.prevHeight,
-  45 |         postHeight: el.state.postHeight,
-  46 |         renderedListLen: el.state._renderedList?.length
-  47 |     });
-  48 |     
-  49 |     // Scroll to end
-  50 |     el.scrollTop = el.scrollHeight;
-  51 |     el.refresh?.();
-  52 |     await new Promise(r => setTimeout(r, 500));
-  53 |     results.push({ 
-  54 |         id: 'end',
-  55 |         scrollTop: el.scrollTop, 
-  56 |         renderedCount: getRenderedCount(),
-  57 |         scrollHeight: el.scrollHeight,
-  58 |         prevHeight: el.state.prevHeight,
-  59 |         postHeight: el.state.postHeight
-  60 |     });
-  61 |         
-  62 |         return results;
-  63 |     });
-  64 |     
-  65 |     console.log('Scroll Details:', JSON.stringify(scrollInfo, null, 2));
-  66 |     expect(scrollInfo[0].renderedCount).toBeGreaterThan(0);
-  67 |     expect(scrollInfo[1].scrollTop).toBeGreaterThan(0);
-  68 | 
-  69 |     const bench = await page.evaluate(() => window.benchResults);
-  70 |     if (bench) {
-  71 |         Object.entries(bench).forEach(([name, time]) => {
-  72 |             console.log(`BENCHMARK [${name}]: ${time.toFixed(2)}ms`);
-  73 |         });
-  74 |     }
-  75 | });
-  76 | 
+```yaml
+- heading "All Tests Passed 🎉" [level=1] [ref=e3]
 ```
\ No newline at end of file
diff --git a/test/base.test.js b/test/base.test.js
index c9b950d..e2026d1 100644
--- a/test/base.test.js
+++ b/test/base.test.js
@@ -23,7 +23,7 @@ export async function runTests() {
     const api = document.createElement('API');
     document.body.appendChild(api);
     await new Promise(r => setTimeout(r, 50));
-    api.request.url = 'https://jsonplaceholder.typicode.com/todos/1';
+    api.request.url = '../package.json';
     const apiResp = await api.do();
     if (!apiResp.ok) throw new Error('API component request failed');
     api.remove();
@@ -51,9 +51,43 @@ export async function runTests() {
     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');
 
-    // 6. List Components Basic Verification
+    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('@web/state');
     console.log('FastList exists:', Component.exists('FastList'));
diff --git a/test/index.html b/test/index.html
index 5d72210..7e35233 100644
--- a/test/index.html
+++ b/test/index.html
@@ -30,9 +30,11 @@
 	<script>
 		function switchTab(tabId) {
 			document.querySelectorAll('.list-container').forEach(el => el.style.display = 'none');
-			document.getElementById('container-' + tabId).style.display = 'flex';
+			const target = document.getElementById('container-' + tabId);
+			if (target) target.style.display = 'flex';
 			document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
-			document.getElementById('btn-' + tabId).classList.add('active');
+			const btn = document.getElementById('btn-' + tabId);
+			if (btn) btn.classList.add('active');
 			window.activeTab = tabId;
 		}
 	</script>
@@ -41,6 +43,7 @@
 		<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">
@@ -66,6 +69,24 @@
 			<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">