From d99b78fc6f50da826900b0abc8c600642c6c959b Mon Sep 17 00:00:00 2001
From: AI Engineer <ai@apigo.cc>
Date: Mon, 22 Jun 2026 19:24:20 +0800
Subject: [PATCH] =?UTF-8?q?fix(datatable):=20=E4=BF=AE=E5=A4=8D=20scope=20?=
 =?UTF-8?q?=E4=BB=8E=20@web=20=E7=BB=9F=E4=B8=80=E4=B8=BA=20@apigo.cc?=
 =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=BC=BA=20editable=20=E6=8E=A7=E5=88=B6?=
 =?UTF-8?q?=E5=8F=8A=E7=BC=96=E8=BE=91=E5=99=A8=E4=BA=A4=E4=BA=92=EF=BC=88?=
 =?UTF-8?q?by=20AI=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: deepseek-v4-pro[1m] <deepseek-ai@claude-code-best.win>
---
 README.md              | 10 ++++-----
 dist/datatable.js      | 20 ++++++++++++------
 dist/datatable.min.js  |  2 +-
 package-lock.json      |  4 ++--
 package.json           |  5 +++--
 scripts/publish.js     | 48 ++++++++++++++++++++++++++++++++++++++++++
 src/DataTable.js       | 20 ++++++++++++------
 test/diagnostic.html   |  2 +-
 test/index.html        |  6 +++---
 test/lib/base.js       |  6 +++---
 test/lib/bootstrap.js  | 13 ++++++------
 test/lib/datatable.js  | 20 ++++++++++++------
 test/lib/state.js      |  3 ++-
 test/minimal_perf.html |  7 +++---
 vite.config.js         | 16 +++++++-------
 15 files changed, 129 insertions(+), 53 deletions(-)
 create mode 100644 scripts/publish.js

diff --git a/README.md b/README.md
index dd150ac..7320f57 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-# @web/datatable AI 开发指南
+# @apigo.cc/datatable AI 开发指南
 
-`@web/datatable` 是一个高性能、无状态的 Web 数据表格组件，支持万级数据虚拟滚动、多维编辑及固定列。
+`@apigo.cc/datatable` 是一个高性能、无状态的 Web 数据表格组件，支持万级数据虚拟滚动、多维编辑及固定列。
 
 ---
 
@@ -11,9 +11,9 @@
 <script type="importmap">
 {
   "imports": {
-    "@web/state": "path/to/state.mjs",
-    "@web/base": "path/to/base.mjs",
-    "@web/datatable": "path/to/datatable.mjs"
+    "@apigo.cc/state": "path/to/state.mjs",
+    "@apigo.cc/base": "path/to/base.mjs",
+    "@apigo.cc/datatable": "path/to/datatable.mjs"
   }
 }
 </script>
diff --git a/dist/datatable.js b/dist/datatable.js
index b40601f..d264b62 100644
--- a/dist/datatable.js
+++ b/dist/datatable.js
@@ -356,6 +356,7 @@
   globalThis.Component.register("DataTable", (container) => {
     if (!container.state) container.state = globalThis.NewState({});
     const state = container.state;
+    container.editable = container.hasAttribute("editable");
     Object.assign(state, {
       list: [],
       fields: [],
@@ -376,7 +377,8 @@
       _fieldsDirty: false,
       _masterCellNodes: null,
       isDirty: false,
-      isBulkEdit: null
+      isBulkEdit: null,
+      editable: container.editable
     });
     const perf = createPerfMonitor();
     state.perf = perf.stats;
@@ -404,6 +406,7 @@
       perf.onScroll();
       scroll.refresh();
       container.hideColumnMenu();
+      container.hideEditor(true);
       const prev = container.querySelector(".dt-spacer-prev"), post = container.querySelector(".dt-spacer-post");
       if (prev) {
         prev.style.height = (state.prevHeight || 0) + "px";
@@ -466,6 +469,11 @@
     container.showColumnMenu = (field, event) => {
       var _a;
       const btn = event.currentTarget, menu = container.querySelector(".dt-column-menu");
+      if (menu.style.display === "block" && state.activeFieldId === field.id) {
+        container.hideColumnMenu();
+        container.applySortFilter();
+        return;
+      }
       const type = ((_a = field.settings) == null ? void 0 : _a.formType) || field.type || "text";
       state.activeModes = MODE_MAP[type] || (["boolean", "switch", "checkbox", "radio"].includes(type) ? [] : MODE_MAP.text);
       if (!state.filterConfig[field.id]) state.filterConfig[field.id] = { mode: state.activeModes[0] || "contains", value: "", selectedValues: [] };
@@ -713,6 +721,7 @@
     };
     container.onMainDblClick = (e) => {
       var _a, _b, _c;
+      if (!container.editable) return;
       const cell = e.target.closest(".dt-cell"), row = cell == null ? void 0 : cell.closest(".dt-row");
       if (row && !row.classList.contains("dt-header-row")) {
         const item = (_a = row._ref) == null ? void 0 : _a.item, fIdx = cell.dataset.fidx ? parseInt(cell.dataset.fidx) : Array.from(row.querySelectorAll(".dt-cell")).indexOf(cell);
@@ -930,7 +939,6 @@
                         </template>
 
                         <div class="mt-2" style="max-height: 180px; overflow-y: auto;">
-                                <div class="text-muted fw-bold mb-1" style="font-size: 9px; letter-spacing: 0.5px">TOP FREQUENT VALUES</div>
                                 <template $each="this.state?._columnStats?.[this.state?.activeFieldId] || []">
                                         <label class="d-flex align-items-center mb-1 small cursor-pointer p-1 rounded-1 menu-item-row" onmouseover="this.style.background='var(--bs-light)'" onmouseout="this.style.background='transparent'">
                                                 <input type="checkbox" class="form-check-input me-2" $checked="this.state?.filterConfig?.[this.state?.activeFieldId]?.selectedValues?.includes(String(item.val))" $onclick="this.toggleSelectedValue(String(item.val))">
@@ -944,7 +952,7 @@
                                 <span class="cursor-pointer text-primary small fw-bold" $onclick="this.clearColumnSettings()"><i class="bi bi-x-circle me-1"></i> Clear Filter</span>
                         </div>
 
-                        <div class="mt-3 pt-2 border-top d-flex gap-1 justify-content-between">
+                        <div $if="this.state?.editable" class="mt-3 pt-2 border-top d-flex gap-1 justify-content-between">
                                 <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Edit Field" $onclick="this.editField()"><i class="bi bi-pencil"></i></button>
                                 <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Add Field" $onclick="this.addField()"><i class="bi bi-plus-lg"></i></button>
                                 <button class="btn btn-sm btn-light border-0 flex-grow-1 text-danger" title="Delete Field" $onclick="this.deleteField()"><i class="bi bi-trash"></i></button>
@@ -962,17 +970,17 @@
 
         <div class="dt-footer border-top bg-light d-flex align-items-center px-3 py-1 shadow-sm" style="height:40px; z-index: 10">
                 <div class="d-flex align-items-center gap-3 flex-grow-1">
-                        <div class="d-flex align-items-center gap-1">
+                        <div $if="this.state?.editable" class="d-flex align-items-center gap-1">
                                 <button class="btn btn-sm btn-light border-0 d-flex align-items-center px-2 py-1" $onclick="this.addRow()" title="Add Row"><i class="bi bi-plus-lg text-primary me-1"></i> Add</button>
                                 <button class="btn btn-sm btn-light border-0 d-flex align-items-center px-2 py-1" $onclick="this.deleteSelectedRow()" $disabled="!this.state?.selectedRowCount" title="Delete Selected Rows"><i class="bi bi-trash text-danger me-1"></i> Delete</button>
                         </div>
-                        <div class="vr h-50 my-auto text-muted opacity-25"></div>
+                        <div $if="this.state?.editable" class="vr h-50 my-auto text-muted opacity-25"></div>
                         <div class="d-flex align-items-center gap-2 text-muted" style="font-size: 0.75rem">
                                 <i class="bi bi-check-all fs-6"></i>
                                 <span $text="(this.state?.selectedRowCount || 0) + ' selected / ' + (this.state?.list?.length || 0) + ' total'"></span>
                         </div>
                 </div>
-                <div class="d-flex align-items-center gap-2">
+                <div $if="this.state?.editable" class="d-flex align-items-center gap-2">
                         <button $if="this.state?.isDirty" class="btn btn-sm btn-primary border-0 px-3 shadow-sm d-flex align-items-center fw-bold" $onclick="this.saveChanges()"><i class="bi bi-cloud-upload me-1"></i> Save</button>
                         <button $if="!this.state?.isDirty" class="btn btn-sm btn-light border-0 px-3 text-muted disabled d-flex align-items-center" disabled><i class="bi bi-cloud-check me-1"></i> Saved</button>
                 </div>
diff --git a/dist/datatable.min.js b/dist/datatable.min.js
index e21a504..ad88d3d 100644
--- a/dist/datatable.min.js
+++ b/dist/datatable.min.js
@@ -1 +1 @@
-!function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){"use strict";const e={text:["contains","equals","starts","ends"],textarea:["contains","equals","starts","ends"],number:["=",">","<","between"],date:["=",">","<","between"],select:["contains","equals"],TagsInput:["contains","equals","starts","ends"]},t={contains:"bi-search",equals:"bi-distribute-vertical",starts:"bi-align-start",ends:"bi-align-end","=":"bi-calculator",">":"bi-chevron-right","<":"bi-chevron-left",between:"bi-arrows-expand"},i={_fieldTypes:new Map,registerFieldType:e=>{i._fieldTypes.set(e.value,e)},getFieldTypes:()=>Array.from(i._fieldTypes.values())};i.registerFieldType({value:"text",label:"{#Text#}",typeForDB:"v4096",schema:[{name:"placeholder",label:"Placeholder",type:"text",if:'this.data.user_type=="text"'}]}),i.registerFieldType({value:"number",label:"{#Number#}",typeForDB:"ff",schema:[{name:"decimals",label:"Decimals",type:"number",setting:{min:0,max:10},if:'this.data.user_type=="number"'},{name:"prefix",label:"Prefix (e.g. $)",type:"text",if:'this.data.user_type=="number"'},{name:"suffix",label:"Suffix (e.g. %)",type:"text",if:'this.data.user_type=="number"'},{name:"thousandSep",label:"Thousand Sep",type:"switch",if:'this.data.user_type=="number"'}],formatter:(e,t)=>{if(null==e||""===e)return"";let i=Number(e);if(isNaN(i))return e;const n=t.settings||{};void 0!==n.decimals&&(i=i.toFixed(n.decimals));let l=String(i);if(n.thousandSep){const e=l.split(".");e[0]=e[0].replace(/\B(?=(\d{3})+(?!\d))/g,","),l=e.join(".")}return(n.prefix||"")+l+(n.suffix||"")}}),i.registerFieldType({value:"select",label:"{#Single Select#}",typeForDB:"v1024",schema:[{name:"options_str",label:"Options",type:"textarea",setting:{rows:3,placeholder:"Label:Value per line"},if:'this.data.user_type=="select"'}],formatter:(e,t)=>{var i;if(null==e||""===e)return"";const n=((null==(i=t.settings)?void 0:i.options)||[]).find(t=>"object"==typeof t?t.value==e:t==e);return n?"object"==typeof n?n.label:n:e}}),i.registerFieldType({value:"checkbox",label:"{#Multi Select#}",typeForDB:"v4096",schema:[{name:"options_str",label:"Options",type:"textarea",setting:{rows:3,placeholder:"Label:Value per line"},if:'this.data.user_type=="checkbox"'}],formatter:(e,t)=>{var i;if(!Array.isArray(e))return null==e?"":String(e);const n=(null==(i=t.settings)?void 0:i.options)||[];return e.map(e=>{const t=n.find(t=>"object"==typeof t?t.value==e:t==e);return t?"object"==typeof t?t.label:t:e}).join(", ")}}),i.registerFieldType({value:"switch",label:"{#Switch#}",typeForDB:"b",schema:[{name:"labelOn",label:"Label On",type:"text",if:'this.data.user_type=="switch"'},{name:"labelOff",label:"Label Off",type:"text",if:'this.data.user_type=="switch"'}],formatter:(e,t)=>{const i=t.settings||{};return e?i.labelOn||"Yes":i.labelOff||"No"}}),i.registerFieldType({value:"datetime",label:"{#DateTime#}",typeForDB:"dt",schema:[{name:"format",label:"Format",type:"text",setting:{placeholder:"YYYY-MM-DD"},if:'this.data.user_type=="datetime"'}]}),i.registerFieldType({value:"textarea",label:"{#Long Text#}",typeForDB:"t",schema:[{name:"placeholder",label:"Placeholder",type:"text",if:'this.data.user_type=="textarea"'}]});globalThis.Component.register("DataTable",n=>{n.state||(n.state=globalThis.NewState({}));const l=n.state;Object.assign(l,{list:[],fields:[],_renderedList:[],prevHeight:0,postHeight:0,_listStartIndex:0,selectedRowCount:0,_originalList:[],sortConfig:{fieldId:null,direction:null},filterConfig:{},activeFieldId:null,activeField:null,activeModes:[],_columnStats:{},_internalUpdate:!1,_appliedHash:"",_fieldsDirty:!1,_masterCellNodes:null,isDirty:!1,isBulkEdit:null});const s=(()=>{let e=!!globalThis.__DT_PERF_MODE__;const t={refreshTime:0,refreshCount:0,scrollCount:0,totalNodes:0};return e&&!globalThis.__statePerformanceTelemetry&&(globalThis.__statePerformanceTelemetry={scanCount:0,reuseCount:0,moveCount:0}),{get stats(){return t},enable:()=>{e=!0},disable:()=>{e=!1},onScroll:()=>{e&&t.scrollCount++},startFrame:()=>{var t,i,n;return e?{start:performance.now(),scan:(null==(t=globalThis.__statePerformanceTelemetry)?void 0:t.scanCount)||0,move:(null==(i=globalThis.__statePerformanceTelemetry)?void 0:i.moveCount)||0,reuse:(null==(n=globalThis.__statePerformanceTelemetry)?void 0:n.reuseCount)||0}:null},endFrame:(i,n)=>{if(!e||!i)return;t.refreshCount++,t.totalNodes+=n;const l=performance.now()-i.start;t.refreshTime+=l;const s=globalThis.__statePerformanceTelemetry;if(s){const e=s.scanCount-i.scan,t=s.moveCount-i.move,o=s.reuseCount-i.reuse;(e>0||l>2)&&console.log(`[DataTable Frame] Time: ${l.toFixed(2)}ms, Scans: ${e}, Moves: ${t}, Reuses: ${o}, Rows: ${n}`)}}}})();l.perf=s.stats;const o=((e,t)=>{let i=null,n=null,l=[];const s=(e,t)=>!!(i&&e>=i.minRow&&e<=i.maxRow&&t>=i.minCol&&t<=i.maxCol)||l.some(i=>e>=i.minRow&&e<=i.maxRow&&t>=i.minCol&&t<=i.maxCol);let o=!1;const a=()=>{if(globalThis.__DT_FEATURES__&&!globalThis.__DT_FEATURES__.selection)return;let n=1/0,a=-1/0;i&&(n=Math.min(n,i.minRow),a=Math.max(a,i.maxRow)),l.forEach(e=>{n=Math.min(n,e.minRow),a=Math.max(a,e.maxRow)});const r=n!==1/0;if(!r&&!o)return;o=r;const d=e.querySelector(".dt-body");d&&d.querySelectorAll(".dt-body-row").forEach(e=>{var i;const l=((null==(i=e._ref)?void 0:i.rIdx)??-1)+t._listStartIndex,o=e.querySelectorAll(".dt-cell");!r||l<n||l>a?o.forEach(e=>e.classList.remove("dt-cell-selected")):o.forEach((e,t)=>{s(l,t)?e.classList.add("dt-cell-selected"):e.classList.remove("dt-cell-selected")})})},r=()=>{let e=0;i&&(e+=i.maxRow-i.minRow+1),l.forEach(t=>e+=t.maxRow-t.minRow+1),t.selectedRowCount=e},d=(e=!1)=>{e||(i=null,n=null,l=[],a(),r())},c=()=>{if(!i)return null;let e=i.minRow,t=i.maxRow,n=i.minCol,s=i.maxCol;return l.forEach(i=>{e=Math.min(e,i.minRow),t=Math.max(t,i.maxRow),n=Math.min(n,i.minCol),s=Math.max(s,i.maxCol)}),{minRow:e,maxRow:t,minCol:n,maxCol:s}};return{applySelectionUI:a,clearAllActive:d,startSelect:(o,c,m)=>{const u=s(o,c),p=i&&(i.minRow!==i.maxRow||i.minCol!==i.maxCol)||l.length>0;m.shiftKey&&n?i={minRow:Math.min(n.row,o),maxRow:Math.max(n.row,o),minCol:Math.min(n.col,c),maxCol:Math.max(n.col,c)}:(!u||m.ctrlKey||m.metaKey?(m.ctrlKey||m.metaKey?i&&!u&&l.push(i):d(),n={row:o,col:c},i={minRow:o,maxRow:o,minCol:c,maxCol:c}):p||(e._potentialCancel={row:o,col:c}),t.isSelecting=!0),a(),r(),e.focus()},updateSelect:(l,s)=>{t.isSelecting&&n&&(i={minRow:Math.min(n.row,l),maxRow:Math.max(n.row,l),minCol:Math.min(n.col,s),maxCol:Math.max(n.col,s)},e._potentialCancel=null,a(),r())},endSelect:()=>{if(e._potentialCancel){const{row:t,col:i}=e._potentialCancel;s(t,i)&&d(),e._potentialCancel=null}t.isSelecting=!1},getSelectionBounds:c,copy:async()=>{const e=c();if(!e)return;const i=t.list.slice(e.minRow,e.maxRow+1).map(i=>t.fields.slice(e.minCol,e.maxCol+1).map(e=>{let t=String(i[e.id]??"");return(t.includes("\t")||t.includes("\n")||t.includes('"'))&&(t='"'+t.replace(/"/g,'""')+'"'),t}).join("\t")).join("\n");await navigator.clipboard.writeText(i)},paste:async()=>{try{const i=await navigator.clipboard.readText();if(!i)return;const n=c();if(!n)return;const l=i.split(/\r?\n/).filter(e=>e.length>0).map(e=>{const t=[];let i="",n=!1;for(let l=0;l<e.length;l++){const s=e[l];'"'===s?n&&'"'===e[l+1]?(i+='"',l++):n=!n:"\t"!==s||n?i+=s:(t.push(i),i="")}return t.push(i),t});let{minRow:s,minCol:o,maxRow:a,maxCol:r}=n;minRow===a&&minCol===r&&(a=1/0,r=1/0);const d=e.querySelector(".dt-body");d&&Array.from(d.childNodes).filter(e=>{var t;return null==(t=e.classList)?void 0:t.contains("dt-body-row")});let m=!1;l.forEach((e,i)=>{const n=s+i;if(n>a||n>=t.list.length)return;const l=t.list[n];let d=!1;e.forEach((e,i)=>{const n=o+i;if(n>r||n>=t.fields.length)return;const s=t.fields[n];l[s.id]=e,d=!0}),d&&(m=!0)}),m&&(t.list=[...t.list])}catch(e){console.error("Paste Error:",e)}}}})(n,l),a=((e,t,i)=>{const n=globalThis.VirtualScroll({itemHeight:40});let l=null;const s=(e=!1)=>{if(!l)return;const s=n.calc(l,t.list);if(s){if(!e&&t.prevHeight===s.prevHeight&&t.postHeight===s.postHeight&&t._listStartIndex===s.listStartIndex&&t._renderedList.length===s.renderedList.length)return;Object.assign(t,{prevHeight:s.prevHeight,postHeight:s.postHeight,_listStartIndex:s.listStartIndex,_renderedList:s.renderedList}),null==i||i(s.renderedList.length,e)}};return{init:()=>{l=e.querySelector(".dt-main")},reset:i=>{t._listStartIndex=0,n.reset(i,l||e),t.list===i&&n.init(i,()=>s(!0))},refresh:s,onScroll:()=>s(!1)}})(n,l,()=>o.applySelectionUI()),r=n.querySelector(".dt-column-menu");r&&(r._thisObj=n),n.onColumnResizing=(e,t)=>n.style.setProperty(`--w-${e.id}`,t.detail.newSize+"px"),n.onColumnResize=(e,t)=>{const i=l.fields.findIndex(t=>t.id===e.id);-1!==i&&(l.fields[i].width=t.detail.newSize,l.fields=[...l.fields])};let d,c=null;n.format=(e,t)=>{var n;if(t.formatter)return t.formatter(e,t);const l=i._fieldTypes.get((null==(n=t.settings)?void 0:n.formType)||t.type||"text");return l&&l.formatter?l.formatter(e,t):null==e?"":"object"==typeof e?JSON.stringify(e):String(e)},n.onScroll=()=>{s.onScroll(),a.refresh(),n.hideColumnMenu();const e=n.querySelector(".dt-spacer-prev"),t=n.querySelector(".dt-spacer-post");e&&(e.style.height=(l.prevHeight||0)+"px",e.style.display=l.prevHeight>0?"block":"none"),t&&(t.style.height=(l.postHeight||0)+"px",t.style.display=l.postHeight>0?"block":"none")},n.applySortFilter=(e={})=>{if(l._internalUpdate)return;const t={...l.filterConfig,...e.filters||{}},i=void 0!==e.sort?e.sort?{fieldId:l.activeFieldId,direction:e.sort}:{fieldId:null,direction:null}:l.sortConfig;let n=[...l._originalList];if(Object.entries(t).forEach(([e,t])=>{(t.value||t.selectedValues&&0!==t.selectedValues.length)&&(n=n.filter(i=>{var n;const l=i[e];if((null==(n=t.selectedValues)?void 0:n.length)>0)return t.selectedValues.includes(String(l));const s=String(t.value).toLowerCase(),o=String(l??"").toLowerCase();switch(t.mode){case"contains":return o.includes(s);case"equals":return o===s;case"starts":return o.startsWith(s);case"ends":return o.endsWith(s);case"=":return Number(l)===Number(t.value);case">":return Number(l)>Number(t.value);case"<":return Number(l)<Number(t.value);case"between":return Number(l)>=Number(t.value)&&Number(l)<=Number(t.value2);default:return!0}}))}),i.fieldId&&i.direction){const e=i.fieldId,t="asc"===i.direction?1:-1;n.sort((i,n)=>i[e]==n[e]?0:i[e]>n[e]?t:-t)}l._internalUpdate=!0,l.filterConfig=t,l.sortConfig=i,l.list=n,l._internalUpdate=!1},n.showColumnMenu=(t,i)=>{var s;const o=i.currentTarget,a=n.querySelector(".dt-column-menu"),r=(null==(s=t.settings)?void 0:s.formType)||t.type||"text";l.activeModes=e[r]||(["boolean","switch","checkbox","radio"].includes(r)?[]:e.text),l.filterConfig[t.id]||(l.filterConfig[t.id]={mode:l.activeModes[0]||"contains",value:"",selectedValues:[]}),l.activeField=t,l.activeFieldId=t.id,a.style.display="block";const d=o.closest(".dt-cell").getBoundingClientRect(),c=n.getBoundingClientRect(),m=a.offsetWidth||260;let u=d.right-c.left-m;u<0&&(u=Math.max(0,d.left-c.left)),a.style.left=u+"px",a.style.top=d.bottom-c.top+5+"px";const p=e=>{a.contains(e.target)||o.contains(e.target)||(n.hideColumnMenu(),n.applySortFilter(),document.removeEventListener("mousedown",p))};document.addEventListener("mousedown",p),setTimeout(()=>{var e;return null==(e=a.querySelector("input"))?void 0:e.focus()},50)},n.toggleSelectedValue=e=>{const t=l.filterConfig[l.activeFieldId];if(!t)return;const i=t.selectedValues.indexOf(e);-1===i?t.selectedValues.push(e):t.selectedValues.splice(i,1),l.filterConfig={...l.filterConfig},n.applySortFilter()},n.filterOnlyThis=e=>{l.filterConfig[l.activeFieldId]={mode:"contains",value:"",selectedValues:[String(e)]},l.filterConfig={...l.filterConfig},n.applySortFilter()},n.hideColumnMenu=()=>{const e=n.querySelector(".dt-column-menu");e&&(e.style.display="none")},n.setSort=e=>{const t=l.sortConfig.direction===e&&l.sortConfig.fieldId===l.activeFieldId?null:e;n.applySortFilter({sort:t})},n.clearColumnSettings=()=>{l.activeFieldId&&(delete l.filterConfig[l.activeFieldId],l.filterConfig={...l.filterConfig},n.applySortFilter())},n._initRow=e=>{var t;const i=null==(t=e._ref)?void 0:t.item;i&&void 0===i._editingF&&Object.defineProperty(i,"_editingF",{set:e=>{null===e&&n.hideEditor(!0)},configurable:!0}),Array.from(e.children).forEach(t=>{const i=parseInt(t.dataset.fidx);isNaN(i)||(t._ref={...t._ref||e._ref,f:l.fields[i],fIdx:i})})},l.__watch("fields",e=>{if(!e)return;l._fieldsDirty=!0,l._masterCellNodes=null,n.style.setProperty("--dt-grid-template",e.map(e=>{var t;return`var(--w-${e.id}, ${(null==(t=e.settings)?void 0:t.width)||e.width||150}px)`}).join(" ")),n.style.setProperty("--dt-row-width",e.reduce((e,t)=>{var i;return e+((null==(i=t.settings)?void 0:i.width)||t.width||150)},0)+"px");let t=0;e.forEach(e=>{var i,l;"left"===((null==(i=e.settings)?void 0:i.pinned)||e.pinned)&&(n.style.setProperty(`--l-${e.id}`,t+"px"),t+=(null==(l=e.settings)?void 0:l.width)||e.width||150)});let i=0;[...e].reverse().forEach(e=>{var t,l;"right"===((null==(t=e.settings)?void 0:t.pinned)||e.pinned)&&(n.style.setProperty(`--r-${e.id}`,i+"px"),i+=(null==(l=e.settings)?void 0:l.width)||e.width||150)})}),l.__watch("list",e=>{var t;if(l._fieldsDirty){l._fieldsDirty=!1;const e=null==(t=n.querySelector('.dt-body template[index="rIdx"]'))?void 0:t.content.querySelector('template[as="f"]');if(e){const t=l._masterCellNodes||(l._masterCellNodes=Array.from(e.content.childNodes).map(e=>e.cloneNode(!0)));e.removeAttribute("$each"),e.setAttribute("$if","true"),e.content.textContent="",l.fields.forEach((i,n)=>t.forEach(t=>{var l;const s=t.cloneNode(!0);if(1===s.nodeType){s.dataset.fidx=n;const e=(null==(l=i.settings)?void 0:l.pinned)||i.pinned;e&&(s.classList.add("pinned-"+e),s.style.position="sticky",s.style.zIndex="1",s.style.backgroundColor="inherit","left"===e?(s.style.left=`var(--l-${i.id})`,s.style.borderRight="1px solid var(--bs-border-color)",s.style.boxShadow="2px 0 5px -2px rgba(0,0,0,0.1)"):(s.style.right=`var(--r-${i.id})`,s.style.borderLeft="1px solid var(--bs-border-color)",s.style.boxShadow="-2px 0 5px -2px rgba(0,0,0,0.1)"))}e.content.appendChild(s)}))}}l._internalUpdate||(l._originalList=[...e||[]],setTimeout(()=>{const e={};l.fields.forEach(t=>{const i={};l._originalList.forEach(e=>{const n=e[t.id],l=null==n||""===n?"":String(n);i[l]=(i[l]||0)+1}),e[t.id]=Object.entries(i).sort((e,t)=>t[1]-e[1]).slice(0,20).map(([e,t])=>({val:e,count:t}))}),l._columnStats=e},200)),a.init(),a.reset(e)}),n.editCell=(e,t,i)=>{var l,s;const o=n.querySelector(".dt-main"),a=n.querySelector(".dt-editor-overlay"),r=i.getBoundingClientRect(),d=o.getBoundingClientRect();c=i;const m=(null==(l=t.settings)?void 0:l.formType)||t.type||"text",u=a.querySelector("AutoForm");u&&(u.data=globalThis.NewState(globalThis.Util.clone(e)),u.state.schema=[{...t,type:m,options:(null==(s=t.settings)?void 0:s.options)||t.options,name:t.id,label:""}]);const p=["textarea","TagsInput","checkbox","radio"].includes(m);let f=r.top-d.top+o.scrollTop-1,h=r.left-d.left+o.scrollLeft-1,b=Math.max(r.width+2,p?300:0);const g=o.scrollWidth-b-5;h>g&&(h=Math.max(0,g)),Object.assign(a.style,{display:"flex",left:h+"px",top:f+"px",width:b+"px",height:"auto",minHeight:r.height+2+"px",maxHeight:Math.max(100,d.height-(r.top-d.top)-5)+"px",overflow:"auto",padding:"0"}),setTimeout(()=>{var e;return null==(e=a.querySelector("input, textarea, select, .form-control"))?void 0:e.focus()},30)},n.hideEditor=(e=!0)=>{if(d||(d=n.querySelector(".dt-editor-overlay")),!d||"none"===d.style.display)return;const t=d.querySelector("AutoForm");if(e&&t&&t.data){const e=d.querySelector("input:focus, select:focus, textarea:focus");e&&e.dispatchEvent(new Event("number"===e.type||"SELECT"===e.tagName?"change":"input",{bubbles:!0}));let i=!1;if((t.state.schema||[]).forEach(e=>{var n,l;const s=null==(l=null==(n=null==c?void 0:c.closest(".dt-row"))?void 0:n._ref)?void 0:l.item;s&&JSON.stringify(s[e.name])!==JSON.stringify(t.data[e.name])&&(s[e.name]=t.data[e.name],i=!0)}),l.isBulkEdit){const{minRow:e,maxRow:n,fIdx:s}=l.isBulkEdit,o=l.fields[s],a=t.data[o.id];for(let t=e;t<=n;t++)l.list[t]&&l.list[t][o.id]!==a&&(l.list[t][o.id]=a,i=!0)}i&&(l.list=[...l.list],l.isDirty=!0)}d.style.display="none",t&&(t.state.schema=[],t.data=null),c=null,l.isBulkEdit=null,n.focus()},n.onMainMouseDown=e=>{var t;const i=e.target.closest(".dt-cell"),s=null==i?void 0:i.closest(".dt-row");if(!s||s.classList.contains("dt-header-row"))return;const a=i.dataset.fidx?parseInt(i.dataset.fidx):Array.from(s.querySelectorAll(".dt-cell")).indexOf(i),r=(null==(t=s._ref)?void 0:t.rIdx)??Array.from(n.querySelectorAll(".dt-body-row")).indexOf(s);o.startSelect(r+l._listStartIndex,a,e)},n.onMainMouseOver=e=>{var t;if(l.isSelecting){const i=e.target.closest(".dt-cell"),s=null==i?void 0:i.closest(".dt-row");if(s&&!s.classList.contains("dt-header-row")){const e=i.dataset.fidx?parseInt(i.dataset.fidx):Array.from(s.querySelectorAll(".dt-cell")).indexOf(i),a=(null==(t=s._ref)?void 0:t.rIdx)??Array.from(n.querySelectorAll(".dt-body-row")).indexOf(s);o.updateSelect(a+l._listStartIndex,e)}}},n.onMainDblClick=e=>{var t,i,s;const a=e.target.closest(".dt-cell"),r=null==a?void 0:a.closest(".dt-row");if(r&&!r.classList.contains("dt-header-row")){const e=null==(t=r._ref)?void 0:t.item,d=a.dataset.fidx?parseInt(a.dataset.fidx):Array.from(r.querySelectorAll(".dt-cell")).indexOf(a),c=((null==(i=r._ref)?void 0:i.rIdx)??Array.from(n.querySelectorAll(".dt-body-row")).indexOf(r))+l._listStartIndex;if(e&&l.fields[d]){const t=o.getSelectionBounds();if(t&&c>=t.minRow&&c<=t.maxRow&&d>=t.minCol&&d<=t.maxCol){const e=t.maxRow-t.minRow+1;e>1&&(l.isBulkEdit={...t,fIdx:d},(null==(s=globalThis.UI)?void 0:s.toast)&&globalThis.UI.toast(`Bulk Edit: Updating ${e} rows in column "${l.fields[d].name}"`,{type:"warning"}))}n.editCell(e,l.fields[d],a)}}},n.addRow=()=>{const e={};l.fields.forEach(t=>e[t.id]=""),l._originalList.push(e),l.list=[...l._originalList],l.isDirty=!0,setTimeout(()=>{a.reset(l.list),n.querySelector(".dt-main").scrollTop=n.querySelector(".dt-main").scrollHeight},50)},n.deleteSelectedRow=async()=>{const e=o.getSelectionBounds();if(!e)return;const t=e.maxRow-e.minRow+1;if(await globalThis.UI.confirm(`Are you sure you want to delete ${t} row(s)?`)){const t=e.minRow,i=e.maxRow,s=l.list.slice(t,i+1);l.list=l.list.filter((e,n)=>!(n>=t&&n<=i)),l._originalList=l._originalList.filter(e=>!s.includes(e)),l.isDirty=!0,o.clearAllActive(),n.dispatchEvent(new CustomEvent("remove",{detail:{items:s}}))}},n.saveChanges=()=>{n.dispatchEvent(new CustomEvent("save",{detail:{list:l._originalList,fields:l.fields}})),l.isDirty=!1};const m=()=>{const e=globalThis.DataTable.getFieldTypes(),t=[{name:"id",label:"Field ID",type:"text",setting:{required:!0,placeholder:"e.g. user_name"}},{name:"name",label:"Display Name",type:"text",setting:{required:!0,placeholder:"e.g. 用户名"}},{name:"user_type",label:"Field Type",type:"select",options:e.map(e=>({label:e.label,value:e.value}))}],i=e.reduce((e,t)=>e.concat(t.schema||[]),[]);return t.concat(i,[{name:"isIndex",label:"Index",type:"switch"},{name:"memo",label:"Memo",type:"text"}])},u=e=>{if(e)return e.split("\n").map(e=>e.trim()).filter(Boolean).map(e=>{const t=e.indexOf(":");return t>-1?{label:e.slice(0,t).trim(),value:e.slice(t+1).trim()}:e})};n.addField=async()=>{n.hideColumnMenu();const e=globalThis.NewState({id:"c"+Date.now().toString().slice(-4),name:"New Field",user_type:"text",decimals:0,isIndex:!1,memo:"",options_str:""}),t=n.querySelector(`Modal[id="${n.id}_field_modal"]`);if(!t)return;Object.assign(t.state,{title:"Add Field",buttons:["Cancel","Save"]});const i=t.querySelector("AutoForm");i&&(i.data=e,i.state.schema=m()),t.show();if(2===await new Promise(e=>t.addEventListener("change",i=>e(t.result),{once:!0}))){const t=globalThis.DataTable.getFieldTypes().find(t=>t.value===e.user_type);let i=(null==t?void 0:t.typeForDB)||"v1024";"number"===e.user_type&&(i=e.decimals>0?"ff":"bi");const s={id:e.id,name:e.name,memo:e.memo,isIndex:!!e.isIndex,type:i,settings:{formType:e.user_type,decimals:e.decimals,prefix:e.prefix,suffix:e.suffix,thousandSep:e.thousandSep,labelOn:e.labelOn,labelOff:e.labelOff,format:e.format,placeholder:e.placeholder,options:u(e.options_str)}};l.fields=[...l.fields,s],l.isDirty=!0,n.dispatchEvent(new CustomEvent("savefields",{detail:l.fields})),l.list=[...l.list]}},n.editField=async()=>{if(!l.activeField)return;n.hideColumnMenu();const e=l.activeField,t=e.settings||{},i=globalThis.NewState({id:e.id,name:e.name,memo:e.memo||"",isIndex:!!e.isIndex,user_type:t.formType||"text",decimals:t.decimals||0,prefix:t.prefix||"",suffix:t.suffix||"",thousandSep:!!t.thousandSep,labelOn:t.labelOn||"",labelOff:t.labelOff||"",format:t.format||"",placeholder:t.placeholder||"",options_str:(s=t.options,s?s.map(e=>"object"==typeof e?`${e.label}:${e.value}`:e).join("\n"):"")});var s;const o=n.querySelector(`Modal[id="${n.id}_field_modal"]`);if(!o)return;Object.assign(o.state,{title:"Edit Field",buttons:["Cancel","Save"]});const a=o.querySelector("AutoForm");a&&(a.data=i,a.state.schema=m()),o.show();if(2===await new Promise(e=>o.addEventListener("change",t=>e(o.result),{once:!0}))){const t=l.fields.findIndex(t=>t.id===e.id);if(-1!==t){const s=globalThis.DataTable.getFieldTypes().find(e=>e.value===i.user_type);let o=(null==s?void 0:s.typeForDB)||"v1024";"number"===i.user_type&&(o=i.decimals>0?"ff":"bi");const a={...e,id:i.id,name:i.name,memo:i.memo,isIndex:!!i.isIndex,type:o,settings:{...e.settings,formType:i.user_type,decimals:i.decimals,prefix:i.prefix,suffix:i.suffix,thousandSep:i.thousandSep,labelOn:i.labelOn,labelOff:i.labelOff,format:i.format,placeholder:i.placeholder,options:u(i.options_str)}};l.fields[t]=a,l.fields=[...l.fields],l.isDirty=!0,n.dispatchEvent(new CustomEvent("savefields",{detail:l.fields})),l.list=[...l.list]}}},n.deleteField=async()=>{if(l.activeField&&(n.hideColumnMenu(),await globalThis.UI.confirm(`Are you sure you want to delete field "${l.activeField.name}"?`))){const e=l.fields.findIndex(e=>e.id===l.activeField.id);-1!==e&&(l.fields.splice(e,1),l.fields=[...l.fields],l.isDirty=!0,n.dispatchEvent(new CustomEvent("savefields",{detail:l.fields})),l.list=[...l.list])}},window.addEventListener("mouseup",o.endSelect),document.addEventListener("mousedown",e=>{const t=n.querySelector(".dt-editor-overlay"),i=n.querySelector(".dt-column-menu");"none"===(null==t?void 0:t.style.display)||t.contains(e.target)||n.hideEditor(!0),n.contains(e.target)||(null==t?void 0:t.contains(e.target))||(null==i?void 0:i.contains(e.target))||o.clearAllActive()}),n.addEventListener("keydown",e=>{(e.ctrlKey||e.metaKey)&&"c"===e.key.toLowerCase()&&(e.preventDefault(),o.copy()),(e.ctrlKey||e.metaKey)&&"v"===e.key.toLowerCase()&&(e.preventDefault(),o.paste())}),l._MODE_ICONS=t},globalThis.Util.makeDom('\n<div class="dt-root d-flex flex-column h-100 border bg-body text-body overflow-visible" style="position:relative; user-select:none; outline: none; min-height: 0" tabindex="0">\n        <div class="dt-main flex-grow-1 overflow-auto" $onscroll="this.onScroll()" \n                $onmousedown="this.onMainMouseDown(event)" $onmouseover="this.onMainMouseOver(event)" $ondblclick="this.onMainDblClick(event)"\n                style="overflow-anchor:none; min-height: 0">\n                <div class="dt-header border-bottom bg-light sticky-top" style="z-index:20">\n                        <div class="dt-header-row fw-bold text-muted small">\n                                <template $each="this.state?.fields || []">\n                                        <div $data-id="item.id" $class="dt-cell dt-col border-end d-flex align-items-center header-cell ${(item.settings?.pinned || item.pinned) ? \'pinned-\' + (item.settings?.pinned || item.pinned) : \'\'}" $style="((item.settings?.pinned || item.pinned) ? \'position: sticky; z-index: 11; background-color: inherit; \' : \'position:relative; \') + \'padding: 0; \' + ((item.settings?.pinned || item.pinned) === \'left\' ? \'left: var(--l-\' + item.id + \'); border-right: 1px solid var(--bs-border-color); box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1);\' : ((item.settings?.pinned || item.pinned) === \'right\' ? \'right: var(--r-\' + item.id + \'); border-left: 1px solid var(--bs-border-color); box-shadow: -2px 0 5px -2px rgba(0,0,0,0.1);\' : \'\'))">\n                                                <div class="d-flex align-items-center overflow-hidden flex-grow-1 h-100 px-2 cursor-pointer" $onclick="this.showColumnMenu(item, event)">\n                                                        <i $if="this.state?.filterConfig?.[item.id] && (this.state.filterConfig[item.id].value || this.state.filterConfig[item.id].selectedValues?.length)" class="bi bi-filter me-1 text-primary"></i>\n                                                        <i $if="this.state?.sortConfig?.fieldId === item.id && this.state.sortConfig.direction" $class="bi bi-sort-${this.state.sortConfig.direction === \'asc\' ? \'down\' : \'up-alt\'} me-1 text-primary"></i>\n                                                        <span $text="item.name" class="text-truncate flex-grow-1"></span>\n                                                </div>\n                                                <button class="btn btn-xs btn-link text-muted p-0 border-0 me-1 header-menu-btn" $onclick="this.showColumnMenu(item, event)"><i class="bi bi-chevron-down"></i></button>\n                                                <Resizer $.target="thisNode.parentElement" style="position:absolute; right:0; top:0; bottom:0; width:4px; z-index:10" min="50" max="1000" $onresizing="this.onColumnResizing(item, event)" $onresize="this.onColumnResize(item, event)"></Resizer>\n                                        </div>\n                                </template>\n                        </div>\n                </div>\n                <div class="dt-body" style="position:relative">\n                        <div class="dt-spacer-prev flex-shrink-0" style="display:none"></div>\n                        <template $each="this.state?._renderedList || []" key="id" index="rIdx">\n                                <div class="dt-row dt-body-row border-bottom bg-white" $.="this._initRow(thisNode)">\n                                        <template as="f"><div $class="dt-cell border-end px-2 d-flex align-items-center ${(f.settings?.pinned || f.pinned) ? \'pinned-\' + (f.settings?.pinned || f.pinned) : \'\'}" $style="((f.settings?.pinned || f.pinned) ? \'position: sticky; z-index: 1; background-color: inherit; \' : \'\') + ((f.settings?.pinned || f.pinned) === \'left\' ? \'left: var(--l-\' + f.id + \'); border-right: 1px solid var(--bs-border-color); box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1);\' : ((f.settings?.pinned || f.pinned) === \'right\' ? \'right: var(--r-\' + f.id + \'); border-left: 1px solid var(--bs-border-color); box-shadow: -2px 0 5px -2px rgba(0,0,0,0.1);\' : \'\'))"><span $text="this.format(item[f.id], f)" class="text-truncate"></span></div></template>\n                                </div>\n                        </template>\n                        <div class="dt-spacer-post flex-shrink-0" style="display:none"></div>\n                </div>\n                <div class="dt-editor-overlay dt-editor-container" style="display: none; position: absolute; z-index: 1000; background: var(--bs-body-bg); box-shadow: 0 4px 16px rgba(0,0,0,0.25); border: 1px solid var(--bs-primary); padding: 0;"><AutoForm nobutton inline class="h-100 w-100" $onsubmit="event.preventDefault(); thisNode.closest(\'DataTable\').hideEditor(true)"></AutoForm></div>\n        </div>\n\n        <div class="dt-column-menu bg-body shadow-lg rounded p-2" style="display:none; position:absolute; z-index:2000; min-width:240px; max-width:300px; border: 1px solid var(--bs-primary)">\n                <template $if="this.state?.activeFieldId">\n                        <div class="d-flex gap-1 mb-2">\n                                <button $class="btn btn-xs flex-grow-1 d-flex align-items-center justify-content-center ${this.state?.sortConfig?.direction === \'asc\' && this.state?.sortConfig?.fieldId === this.state?.activeFieldId ? \'btn-primary\' : \'btn-outline-secondary border\'}" $onclick="this.setSort(\'asc\')"><i class="bi bi-sort-alpha-down me-1"></i> ASC</button>\n                                <button $class="btn btn-xs flex-grow-1 d-flex align-items-center justify-content-center ${this.state?.sortConfig?.direction === \'desc\' && this.state?.sortConfig?.fieldId === this.state?.activeFieldId ? \'btn-primary\' : \'btn-outline-secondary border\'}" $onclick="this.setSort(\'desc\')"><i class="bi bi-sort-alpha-up-alt me-1"></i> DESC</button>\n                        </div>\n\n                        <template $if="this.state?.activeModes?.length">\n                        <div class="py-2 border-bottom" style="min-height: 48px">\n                                <div class="input-group input-group-sm mb-1">\n                                        <input type="text" class="form-control" $placeholder="(this.state?.filterConfig?.[this.state?.activeFieldId]?.mode || \'Search\').toUpperCase() + \'...\'" $bind="this.state?.filterConfig?.[this.state?.activeFieldId].value" $onkeydown="if(event.key===\'Enter\'){this.applySortFilter();this.hideColumnMenu();}">\n                                        <button class="btn btn-outline-secondary border dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" title="Search Mode">\n                                                <i $class="bi ${this.state?._MODE_ICONS?.[this.state?.filterConfig?.[this.state?.activeFieldId]?.mode] || \'bi-filter\'}"></i>\n                                        </button>\n                                        <ul class="dropdown-menu dropdown-menu-end shadow">\n                                                <template $each="this.state?.activeModes || []" as="m">\n                                                        <li><button class="dropdown-item d-flex align-items-center" type="button" $onclick="this.state.filterConfig[this.state.activeFieldId].mode = m; this.state.filterConfig = {...this.state.filterConfig}">\n                                                                <i $class="bi ${this.state?._MODE_ICONS?.[m] || \'bi-filter\'} me-2"></i> <span $text="m.toUpperCase()"></span>\n                                                        </button></li>\n                                                </template>\n                                        </ul>\n                                </div>\n                                <input $if="this.state?.filterConfig?.[this.state?.activeFieldId]?.mode === \'between\'" type="text" class="form-control form-control-sm" placeholder="And..." $bind="this.state?.filterConfig?.[this.state?.activeFieldId].value2" $onkeydown="if(event.key===\'Enter\'){this.applySortFilter();this.hideColumnMenu();}">\n                        </div>\n                        </template>\n\n                        <div class="mt-2" style="max-height: 180px; overflow-y: auto;">\n                                <div class="text-muted fw-bold mb-1" style="font-size: 9px; letter-spacing: 0.5px">TOP FREQUENT VALUES</div>\n                                <template $each="this.state?._columnStats?.[this.state?.activeFieldId] || []">\n                                        <label class="d-flex align-items-center mb-1 small cursor-pointer p-1 rounded-1 menu-item-row" onmouseover="this.style.background=\'var(--bs-light)\'" onmouseout="this.style.background=\'transparent\'">\n                                                <input type="checkbox" class="form-check-input me-2" $checked="this.state?.filterConfig?.[this.state?.activeFieldId]?.selectedValues?.includes(String(item.val))" $onclick="this.toggleSelectedValue(String(item.val))">\n                                                <span class="text-truncate flex-grow-1"><span $text="item.val || \'(Empty)\'"></span> <span class="text-muted ms-1" style="font-size: 0.7rem" $text="\'(\' + item.count + \')\'"></span></span>\n                                                <button class="btn btn-xs btn-link p-0 text-primary only-btn" style="font-size: 10px; text-decoration: none" $onclick="this.filterOnlyThis(item.val); event.preventDefault(); event.stopPropagation();">Only</button>\n                                        </label>\n                                </template>\n                        </div>\n\n                        <div $if="this.state?.filterConfig?.[this.state?.activeFieldId]?.value || this.state?.filterConfig?.[this.state?.activeFieldId]?.selectedValues?.length" class="mt-2 pt-1 border-top text-center">\n                                <span class="cursor-pointer text-primary small fw-bold" $onclick="this.clearColumnSettings()"><i class="bi bi-x-circle me-1"></i> Clear Filter</span>\n                        </div>\n\n                        <div class="mt-3 pt-2 border-top d-flex gap-1 justify-content-between">\n                                <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Edit Field" $onclick="this.editField()"><i class="bi bi-pencil"></i></button>\n                                <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Add Field" $onclick="this.addField()"><i class="bi bi-plus-lg"></i></button>\n                                <button class="btn btn-sm btn-light border-0 flex-grow-1 text-danger" title="Delete Field" $onclick="this.deleteField()"><i class="bi bi-trash"></i></button>\n                        </div>\n                </template>\n        </div>\n\n        <Modal $.id="this.id + \'_field_modal\'">\n            <div slot="body"><AutoForm nobutton class="p-3"></AutoForm></div>\n            <div slot="footer">\n                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" $onclick="thisNode.closest(\'Modal\').result=1">Cancel</button>\n                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" $onclick="thisNode.closest(\'Modal\').result=2">Save</button>\n            </div>\n        </Modal>\n\n        <div class="dt-footer border-top bg-light d-flex align-items-center px-3 py-1 shadow-sm" style="height:40px; z-index: 10">\n                <div class="d-flex align-items-center gap-3 flex-grow-1">\n                        <div class="d-flex align-items-center gap-1">\n                                <button class="btn btn-sm btn-light border-0 d-flex align-items-center px-2 py-1" $onclick="this.addRow()" title="Add Row"><i class="bi bi-plus-lg text-primary me-1"></i> Add</button>\n                                <button class="btn btn-sm btn-light border-0 d-flex align-items-center px-2 py-1" $onclick="this.deleteSelectedRow()" $disabled="!this.state?.selectedRowCount" title="Delete Selected Rows"><i class="bi bi-trash text-danger me-1"></i> Delete</button>\n                        </div>\n                        <div class="vr h-50 my-auto text-muted opacity-25"></div>\n                        <div class="d-flex align-items-center gap-2 text-muted" style="font-size: 0.75rem">\n                                <i class="bi bi-check-all fs-6"></i>\n                                <span $text="(this.state?.selectedRowCount || 0) + \' selected / \' + (this.state?.list?.length || 0) + \' total\'"></span>\n                        </div>\n                </div>\n                <div class="d-flex align-items-center gap-2">\n                        <button $if="this.state?.isDirty" class="btn btn-sm btn-primary border-0 px-3 shadow-sm d-flex align-items-center fw-bold" $onclick="this.saveChanges()"><i class="bi bi-cloud-upload me-1"></i> Save</button>\n                        <button $if="!this.state?.isDirty" class="btn btn-sm btn-light border-0 px-3 text-muted disabled d-flex align-items-center" disabled><i class="bi bi-cloud-check me-1"></i> Saved</button>\n                </div>\n        </div>\n</div>\n'),globalThis.Util.makeDom("\n<style>\n        DataTable { display: block; }\n        .dt-root { font-size: 0.875rem; }\n        .dt-row, .dt-header-row { display: grid; grid-template-columns: var(--dt-grid-template); width: var(--dt-row-width, max-content); min-width: 100%; height: 40px; contain: paint layout; }\n        .dt-main { position: relative; }\n        .dt-header-row { background-color: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); }\n        .dt-cell { background: inherit; white-space: nowrap; flex-shrink: 0; contain: content; }\n        .dt-cell-selected { background-color: rgba(var(--bs-primary-rgb), 0.15) !important; outline: 1px solid var(--bs-primary); outline-offset: -1px; }\n        .dt-body-row:hover { background-color: var(--bs-secondary-bg) !important; }\n        .header-cell .header-menu-btn { opacity: 0; transition: opacity 0.2s; }\n        .header-cell:hover .header-menu-btn { opacity: 1; }\n        .dt-column-menu { background-color: var(--bs-body-bg); border: 1px solid var(--bs-primary); box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important; z-index: 2100 !important; }\n        .btn-xs { padding: 1px 5px; line-height: 1.5; }\n        .cursor-pointer { cursor: pointer; }\n        .dt-filter-tabs i { font-size: 1.1rem; }\n        .dt-filter-tabs div:hover i { color: var(--bs-primary); }\n        .menu-item-row .only-btn { opacity: 0; }\n        .menu-item-row:hover .only-btn { opacity: 1; }\n        .dt-editor-overlay .auto-form-root form { gap: 0 !important; margin: 0 !important; height: 100%; }\n        .dt-editor-overlay [control-wrapper] { width: 100%; margin: 0 !important; min-height: 100% !important; align-items: stretch !important; }\n        .dt-editor-overlay [control-wrapper] > .d-flex { padding: 0.375rem 0.5rem; justify-content: flex-start !important; align-items: center !important; }\n        .dt-editor-overlay [control-wrapper] > .form-switch { padding-left: 2.5rem !important; }\n        .dt-editor-overlay [control-wrapper] > textarea { min-height: 100px; resize: vertical; }\n</style>\n")),globalThis.DataTable=i});
+!function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){"use strict";const e={text:["contains","equals","starts","ends"],textarea:["contains","equals","starts","ends"],number:["=",">","<","between"],date:["=",">","<","between"],select:["contains","equals"],TagsInput:["contains","equals","starts","ends"]},t={contains:"bi-search",equals:"bi-distribute-vertical",starts:"bi-align-start",ends:"bi-align-end","=":"bi-calculator",">":"bi-chevron-right","<":"bi-chevron-left",between:"bi-arrows-expand"},i={_fieldTypes:new Map,registerFieldType:e=>{i._fieldTypes.set(e.value,e)},getFieldTypes:()=>Array.from(i._fieldTypes.values())};i.registerFieldType({value:"text",label:"{#Text#}",typeForDB:"v4096",schema:[{name:"placeholder",label:"Placeholder",type:"text",if:'this.data.user_type=="text"'}]}),i.registerFieldType({value:"number",label:"{#Number#}",typeForDB:"ff",schema:[{name:"decimals",label:"Decimals",type:"number",setting:{min:0,max:10},if:'this.data.user_type=="number"'},{name:"prefix",label:"Prefix (e.g. $)",type:"text",if:'this.data.user_type=="number"'},{name:"suffix",label:"Suffix (e.g. %)",type:"text",if:'this.data.user_type=="number"'},{name:"thousandSep",label:"Thousand Sep",type:"switch",if:'this.data.user_type=="number"'}],formatter:(e,t)=>{if(null==e||""===e)return"";let i=Number(e);if(isNaN(i))return e;const n=t.settings||{};void 0!==n.decimals&&(i=i.toFixed(n.decimals));let l=String(i);if(n.thousandSep){const e=l.split(".");e[0]=e[0].replace(/\B(?=(\d{3})+(?!\d))/g,","),l=e.join(".")}return(n.prefix||"")+l+(n.suffix||"")}}),i.registerFieldType({value:"select",label:"{#Single Select#}",typeForDB:"v1024",schema:[{name:"options_str",label:"Options",type:"textarea",setting:{rows:3,placeholder:"Label:Value per line"},if:'this.data.user_type=="select"'}],formatter:(e,t)=>{var i;if(null==e||""===e)return"";const n=((null==(i=t.settings)?void 0:i.options)||[]).find(t=>"object"==typeof t?t.value==e:t==e);return n?"object"==typeof n?n.label:n:e}}),i.registerFieldType({value:"checkbox",label:"{#Multi Select#}",typeForDB:"v4096",schema:[{name:"options_str",label:"Options",type:"textarea",setting:{rows:3,placeholder:"Label:Value per line"},if:'this.data.user_type=="checkbox"'}],formatter:(e,t)=>{var i;if(!Array.isArray(e))return null==e?"":String(e);const n=(null==(i=t.settings)?void 0:i.options)||[];return e.map(e=>{const t=n.find(t=>"object"==typeof t?t.value==e:t==e);return t?"object"==typeof t?t.label:t:e}).join(", ")}}),i.registerFieldType({value:"switch",label:"{#Switch#}",typeForDB:"b",schema:[{name:"labelOn",label:"Label On",type:"text",if:'this.data.user_type=="switch"'},{name:"labelOff",label:"Label Off",type:"text",if:'this.data.user_type=="switch"'}],formatter:(e,t)=>{const i=t.settings||{};return e?i.labelOn||"Yes":i.labelOff||"No"}}),i.registerFieldType({value:"datetime",label:"{#DateTime#}",typeForDB:"dt",schema:[{name:"format",label:"Format",type:"text",setting:{placeholder:"YYYY-MM-DD"},if:'this.data.user_type=="datetime"'}]}),i.registerFieldType({value:"textarea",label:"{#Long Text#}",typeForDB:"t",schema:[{name:"placeholder",label:"Placeholder",type:"text",if:'this.data.user_type=="textarea"'}]});globalThis.Component.register("DataTable",n=>{n.state||(n.state=globalThis.NewState({}));const l=n.state;n.editable=n.hasAttribute("editable"),Object.assign(l,{list:[],fields:[],_renderedList:[],prevHeight:0,postHeight:0,_listStartIndex:0,selectedRowCount:0,_originalList:[],sortConfig:{fieldId:null,direction:null},filterConfig:{},activeFieldId:null,activeField:null,activeModes:[],_columnStats:{},_internalUpdate:!1,_appliedHash:"",_fieldsDirty:!1,_masterCellNodes:null,isDirty:!1,isBulkEdit:null,editable:n.editable});const s=(()=>{let e=!!globalThis.__DT_PERF_MODE__;const t={refreshTime:0,refreshCount:0,scrollCount:0,totalNodes:0};return e&&!globalThis.__statePerformanceTelemetry&&(globalThis.__statePerformanceTelemetry={scanCount:0,reuseCount:0,moveCount:0}),{get stats(){return t},enable:()=>{e=!0},disable:()=>{e=!1},onScroll:()=>{e&&t.scrollCount++},startFrame:()=>{var t,i,n;return e?{start:performance.now(),scan:(null==(t=globalThis.__statePerformanceTelemetry)?void 0:t.scanCount)||0,move:(null==(i=globalThis.__statePerformanceTelemetry)?void 0:i.moveCount)||0,reuse:(null==(n=globalThis.__statePerformanceTelemetry)?void 0:n.reuseCount)||0}:null},endFrame:(i,n)=>{if(!e||!i)return;t.refreshCount++,t.totalNodes+=n;const l=performance.now()-i.start;t.refreshTime+=l;const s=globalThis.__statePerformanceTelemetry;if(s){const e=s.scanCount-i.scan,t=s.moveCount-i.move,o=s.reuseCount-i.reuse;(e>0||l>2)&&console.log(`[DataTable Frame] Time: ${l.toFixed(2)}ms, Scans: ${e}, Moves: ${t}, Reuses: ${o}, Rows: ${n}`)}}}})();l.perf=s.stats;const o=((e,t)=>{let i=null,n=null,l=[];const s=(e,t)=>!!(i&&e>=i.minRow&&e<=i.maxRow&&t>=i.minCol&&t<=i.maxCol)||l.some(i=>e>=i.minRow&&e<=i.maxRow&&t>=i.minCol&&t<=i.maxCol);let o=!1;const a=()=>{if(globalThis.__DT_FEATURES__&&!globalThis.__DT_FEATURES__.selection)return;let n=1/0,a=-1/0;i&&(n=Math.min(n,i.minRow),a=Math.max(a,i.maxRow)),l.forEach(e=>{n=Math.min(n,e.minRow),a=Math.max(a,e.maxRow)});const r=n!==1/0;if(!r&&!o)return;o=r;const d=e.querySelector(".dt-body");d&&d.querySelectorAll(".dt-body-row").forEach(e=>{var i;const l=((null==(i=e._ref)?void 0:i.rIdx)??-1)+t._listStartIndex,o=e.querySelectorAll(".dt-cell");!r||l<n||l>a?o.forEach(e=>e.classList.remove("dt-cell-selected")):o.forEach((e,t)=>{s(l,t)?e.classList.add("dt-cell-selected"):e.classList.remove("dt-cell-selected")})})},r=()=>{let e=0;i&&(e+=i.maxRow-i.minRow+1),l.forEach(t=>e+=t.maxRow-t.minRow+1),t.selectedRowCount=e},d=(e=!1)=>{e||(i=null,n=null,l=[],a(),r())},c=()=>{if(!i)return null;let e=i.minRow,t=i.maxRow,n=i.minCol,s=i.maxCol;return l.forEach(i=>{e=Math.min(e,i.minRow),t=Math.max(t,i.maxRow),n=Math.min(n,i.minCol),s=Math.max(s,i.maxCol)}),{minRow:e,maxRow:t,minCol:n,maxCol:s}};return{applySelectionUI:a,clearAllActive:d,startSelect:(o,c,u)=>{const m=s(o,c),p=i&&(i.minRow!==i.maxRow||i.minCol!==i.maxCol)||l.length>0;u.shiftKey&&n?i={minRow:Math.min(n.row,o),maxRow:Math.max(n.row,o),minCol:Math.min(n.col,c),maxCol:Math.max(n.col,c)}:(!m||u.ctrlKey||u.metaKey?(u.ctrlKey||u.metaKey?i&&!m&&l.push(i):d(),n={row:o,col:c},i={minRow:o,maxRow:o,minCol:c,maxCol:c}):p||(e._potentialCancel={row:o,col:c}),t.isSelecting=!0),a(),r(),e.focus()},updateSelect:(l,s)=>{t.isSelecting&&n&&(i={minRow:Math.min(n.row,l),maxRow:Math.max(n.row,l),minCol:Math.min(n.col,s),maxCol:Math.max(n.col,s)},e._potentialCancel=null,a(),r())},endSelect:()=>{if(e._potentialCancel){const{row:t,col:i}=e._potentialCancel;s(t,i)&&d(),e._potentialCancel=null}t.isSelecting=!1},getSelectionBounds:c,copy:async()=>{const e=c();if(!e)return;const i=t.list.slice(e.minRow,e.maxRow+1).map(i=>t.fields.slice(e.minCol,e.maxCol+1).map(e=>{let t=String(i[e.id]??"");return(t.includes("\t")||t.includes("\n")||t.includes('"'))&&(t='"'+t.replace(/"/g,'""')+'"'),t}).join("\t")).join("\n");await navigator.clipboard.writeText(i)},paste:async()=>{try{const i=await navigator.clipboard.readText();if(!i)return;const n=c();if(!n)return;const l=i.split(/\r?\n/).filter(e=>e.length>0).map(e=>{const t=[];let i="",n=!1;for(let l=0;l<e.length;l++){const s=e[l];'"'===s?n&&'"'===e[l+1]?(i+='"',l++):n=!n:"\t"!==s||n?i+=s:(t.push(i),i="")}return t.push(i),t});let{minRow:s,minCol:o,maxRow:a,maxCol:r}=n;minRow===a&&minCol===r&&(a=1/0,r=1/0);const d=e.querySelector(".dt-body");d&&Array.from(d.childNodes).filter(e=>{var t;return null==(t=e.classList)?void 0:t.contains("dt-body-row")});let u=!1;l.forEach((e,i)=>{const n=s+i;if(n>a||n>=t.list.length)return;const l=t.list[n];let d=!1;e.forEach((e,i)=>{const n=o+i;if(n>r||n>=t.fields.length)return;const s=t.fields[n];l[s.id]=e,d=!0}),d&&(u=!0)}),u&&(t.list=[...t.list])}catch(e){console.error("Paste Error:",e)}}}})(n,l),a=((e,t,i)=>{const n=globalThis.VirtualScroll({itemHeight:40});let l=null;const s=(e=!1)=>{if(!l)return;const s=n.calc(l,t.list);if(s){if(!e&&t.prevHeight===s.prevHeight&&t.postHeight===s.postHeight&&t._listStartIndex===s.listStartIndex&&t._renderedList.length===s.renderedList.length)return;Object.assign(t,{prevHeight:s.prevHeight,postHeight:s.postHeight,_listStartIndex:s.listStartIndex,_renderedList:s.renderedList}),null==i||i(s.renderedList.length,e)}};return{init:()=>{l=e.querySelector(".dt-main")},reset:i=>{t._listStartIndex=0,n.reset(i,l||e),t.list===i&&n.init(i,()=>s(!0))},refresh:s,onScroll:()=>s(!1)}})(n,l,()=>o.applySelectionUI()),r=n.querySelector(".dt-column-menu");r&&(r._thisObj=n),n.onColumnResizing=(e,t)=>n.style.setProperty(`--w-${e.id}`,t.detail.newSize+"px"),n.onColumnResize=(e,t)=>{const i=l.fields.findIndex(t=>t.id===e.id);-1!==i&&(l.fields[i].width=t.detail.newSize,l.fields=[...l.fields])};let d,c=null;n.format=(e,t)=>{var n;if(t.formatter)return t.formatter(e,t);const l=i._fieldTypes.get((null==(n=t.settings)?void 0:n.formType)||t.type||"text");return l&&l.formatter?l.formatter(e,t):null==e?"":"object"==typeof e?JSON.stringify(e):String(e)},n.onScroll=()=>{s.onScroll(),a.refresh(),n.hideColumnMenu(),n.hideEditor(!0);const e=n.querySelector(".dt-spacer-prev"),t=n.querySelector(".dt-spacer-post");e&&(e.style.height=(l.prevHeight||0)+"px",e.style.display=l.prevHeight>0?"block":"none"),t&&(t.style.height=(l.postHeight||0)+"px",t.style.display=l.postHeight>0?"block":"none")},n.applySortFilter=(e={})=>{if(l._internalUpdate)return;const t={...l.filterConfig,...e.filters||{}},i=void 0!==e.sort?e.sort?{fieldId:l.activeFieldId,direction:e.sort}:{fieldId:null,direction:null}:l.sortConfig;let n=[...l._originalList];if(Object.entries(t).forEach(([e,t])=>{(t.value||t.selectedValues&&0!==t.selectedValues.length)&&(n=n.filter(i=>{var n;const l=i[e];if((null==(n=t.selectedValues)?void 0:n.length)>0)return t.selectedValues.includes(String(l));const s=String(t.value).toLowerCase(),o=String(l??"").toLowerCase();switch(t.mode){case"contains":return o.includes(s);case"equals":return o===s;case"starts":return o.startsWith(s);case"ends":return o.endsWith(s);case"=":return Number(l)===Number(t.value);case">":return Number(l)>Number(t.value);case"<":return Number(l)<Number(t.value);case"between":return Number(l)>=Number(t.value)&&Number(l)<=Number(t.value2);default:return!0}}))}),i.fieldId&&i.direction){const e=i.fieldId,t="asc"===i.direction?1:-1;n.sort((i,n)=>i[e]==n[e]?0:i[e]>n[e]?t:-t)}l._internalUpdate=!0,l.filterConfig=t,l.sortConfig=i,l.list=n,l._internalUpdate=!1},n.showColumnMenu=(t,i)=>{var s;const o=i.currentTarget,a=n.querySelector(".dt-column-menu");if("block"===a.style.display&&l.activeFieldId===t.id)return n.hideColumnMenu(),void n.applySortFilter();const r=(null==(s=t.settings)?void 0:s.formType)||t.type||"text";l.activeModes=e[r]||(["boolean","switch","checkbox","radio"].includes(r)?[]:e.text),l.filterConfig[t.id]||(l.filterConfig[t.id]={mode:l.activeModes[0]||"contains",value:"",selectedValues:[]}),l.activeField=t,l.activeFieldId=t.id,a.style.display="block";const d=o.closest(".dt-cell").getBoundingClientRect(),c=n.getBoundingClientRect(),u=a.offsetWidth||260;let m=d.right-c.left-u;m<0&&(m=Math.max(0,d.left-c.left)),a.style.left=m+"px",a.style.top=d.bottom-c.top+5+"px";const p=e=>{a.contains(e.target)||o.contains(e.target)||(n.hideColumnMenu(),n.applySortFilter(),document.removeEventListener("mousedown",p))};document.addEventListener("mousedown",p),setTimeout(()=>{var e;return null==(e=a.querySelector("input"))?void 0:e.focus()},50)},n.toggleSelectedValue=e=>{const t=l.filterConfig[l.activeFieldId];if(!t)return;const i=t.selectedValues.indexOf(e);-1===i?t.selectedValues.push(e):t.selectedValues.splice(i,1),l.filterConfig={...l.filterConfig},n.applySortFilter()},n.filterOnlyThis=e=>{l.filterConfig[l.activeFieldId]={mode:"contains",value:"",selectedValues:[String(e)]},l.filterConfig={...l.filterConfig},n.applySortFilter()},n.hideColumnMenu=()=>{const e=n.querySelector(".dt-column-menu");e&&(e.style.display="none")},n.setSort=e=>{const t=l.sortConfig.direction===e&&l.sortConfig.fieldId===l.activeFieldId?null:e;n.applySortFilter({sort:t})},n.clearColumnSettings=()=>{l.activeFieldId&&(delete l.filterConfig[l.activeFieldId],l.filterConfig={...l.filterConfig},n.applySortFilter())},n._initRow=e=>{var t;const i=null==(t=e._ref)?void 0:t.item;i&&void 0===i._editingF&&Object.defineProperty(i,"_editingF",{set:e=>{null===e&&n.hideEditor(!0)},configurable:!0}),Array.from(e.children).forEach(t=>{const i=parseInt(t.dataset.fidx);isNaN(i)||(t._ref={...t._ref||e._ref,f:l.fields[i],fIdx:i})})},l.__watch("fields",e=>{if(!e)return;l._fieldsDirty=!0,l._masterCellNodes=null,n.style.setProperty("--dt-grid-template",e.map(e=>{var t;return`var(--w-${e.id}, ${(null==(t=e.settings)?void 0:t.width)||e.width||150}px)`}).join(" ")),n.style.setProperty("--dt-row-width",e.reduce((e,t)=>{var i;return e+((null==(i=t.settings)?void 0:i.width)||t.width||150)},0)+"px");let t=0;e.forEach(e=>{var i,l;"left"===((null==(i=e.settings)?void 0:i.pinned)||e.pinned)&&(n.style.setProperty(`--l-${e.id}`,t+"px"),t+=(null==(l=e.settings)?void 0:l.width)||e.width||150)});let i=0;[...e].reverse().forEach(e=>{var t,l;"right"===((null==(t=e.settings)?void 0:t.pinned)||e.pinned)&&(n.style.setProperty(`--r-${e.id}`,i+"px"),i+=(null==(l=e.settings)?void 0:l.width)||e.width||150)})}),l.__watch("list",e=>{var t;if(l._fieldsDirty){l._fieldsDirty=!1;const e=null==(t=n.querySelector('.dt-body template[index="rIdx"]'))?void 0:t.content.querySelector('template[as="f"]');if(e){const t=l._masterCellNodes||(l._masterCellNodes=Array.from(e.content.childNodes).map(e=>e.cloneNode(!0)));e.removeAttribute("$each"),e.setAttribute("$if","true"),e.content.textContent="",l.fields.forEach((i,n)=>t.forEach(t=>{var l;const s=t.cloneNode(!0);if(1===s.nodeType){s.dataset.fidx=n;const e=(null==(l=i.settings)?void 0:l.pinned)||i.pinned;e&&(s.classList.add("pinned-"+e),s.style.position="sticky",s.style.zIndex="1",s.style.backgroundColor="inherit","left"===e?(s.style.left=`var(--l-${i.id})`,s.style.borderRight="1px solid var(--bs-border-color)",s.style.boxShadow="2px 0 5px -2px rgba(0,0,0,0.1)"):(s.style.right=`var(--r-${i.id})`,s.style.borderLeft="1px solid var(--bs-border-color)",s.style.boxShadow="-2px 0 5px -2px rgba(0,0,0,0.1)"))}e.content.appendChild(s)}))}}l._internalUpdate||(l._originalList=[...e||[]],setTimeout(()=>{const e={};l.fields.forEach(t=>{const i={};l._originalList.forEach(e=>{const n=e[t.id],l=null==n||""===n?"":String(n);i[l]=(i[l]||0)+1}),e[t.id]=Object.entries(i).sort((e,t)=>t[1]-e[1]).slice(0,20).map(([e,t])=>({val:e,count:t}))}),l._columnStats=e},200)),a.init(),a.reset(e)}),n.editCell=(e,t,i)=>{var l,s;const o=n.querySelector(".dt-main"),a=n.querySelector(".dt-editor-overlay"),r=i.getBoundingClientRect(),d=o.getBoundingClientRect();c=i;const u=(null==(l=t.settings)?void 0:l.formType)||t.type||"text",m=a.querySelector("AutoForm");m&&(m.data=globalThis.NewState(globalThis.Util.clone(e)),m.state.schema=[{...t,type:u,options:(null==(s=t.settings)?void 0:s.options)||t.options,name:t.id,label:""}]);const p=["textarea","TagsInput","checkbox","radio"].includes(u);let f=r.top-d.top+o.scrollTop-1,h=r.left-d.left+o.scrollLeft-1,b=Math.max(r.width+2,p?300:0);const g=o.scrollWidth-b-5;h>g&&(h=Math.max(0,g)),Object.assign(a.style,{display:"flex",left:h+"px",top:f+"px",width:b+"px",height:"auto",minHeight:r.height+2+"px",maxHeight:Math.max(100,d.height-(r.top-d.top)-5)+"px",overflow:"auto",padding:"0"}),setTimeout(()=>{var e;return null==(e=a.querySelector("input, textarea, select, .form-control"))?void 0:e.focus()},30)},n.hideEditor=(e=!0)=>{if(d||(d=n.querySelector(".dt-editor-overlay")),!d||"none"===d.style.display)return;const t=d.querySelector("AutoForm");if(e&&t&&t.data){const e=d.querySelector("input:focus, select:focus, textarea:focus");e&&e.dispatchEvent(new Event("number"===e.type||"SELECT"===e.tagName?"change":"input",{bubbles:!0}));let i=!1;if((t.state.schema||[]).forEach(e=>{var n,l;const s=null==(l=null==(n=null==c?void 0:c.closest(".dt-row"))?void 0:n._ref)?void 0:l.item;s&&JSON.stringify(s[e.name])!==JSON.stringify(t.data[e.name])&&(s[e.name]=t.data[e.name],i=!0)}),l.isBulkEdit){const{minRow:e,maxRow:n,fIdx:s}=l.isBulkEdit,o=l.fields[s],a=t.data[o.id];for(let t=e;t<=n;t++)l.list[t]&&l.list[t][o.id]!==a&&(l.list[t][o.id]=a,i=!0)}i&&(l.list=[...l.list],l.isDirty=!0)}d.style.display="none",t&&(t.state.schema=[],t.data=null),c=null,l.isBulkEdit=null,n.focus()},n.onMainMouseDown=e=>{var t;const i=e.target.closest(".dt-cell"),s=null==i?void 0:i.closest(".dt-row");if(!s||s.classList.contains("dt-header-row"))return;const a=i.dataset.fidx?parseInt(i.dataset.fidx):Array.from(s.querySelectorAll(".dt-cell")).indexOf(i),r=(null==(t=s._ref)?void 0:t.rIdx)??Array.from(n.querySelectorAll(".dt-body-row")).indexOf(s);o.startSelect(r+l._listStartIndex,a,e)},n.onMainMouseOver=e=>{var t;if(l.isSelecting){const i=e.target.closest(".dt-cell"),s=null==i?void 0:i.closest(".dt-row");if(s&&!s.classList.contains("dt-header-row")){const e=i.dataset.fidx?parseInt(i.dataset.fidx):Array.from(s.querySelectorAll(".dt-cell")).indexOf(i),a=(null==(t=s._ref)?void 0:t.rIdx)??Array.from(n.querySelectorAll(".dt-body-row")).indexOf(s);o.updateSelect(a+l._listStartIndex,e)}}},n.onMainDblClick=e=>{var t,i,s;if(!n.editable)return;const a=e.target.closest(".dt-cell"),r=null==a?void 0:a.closest(".dt-row");if(r&&!r.classList.contains("dt-header-row")){const e=null==(t=r._ref)?void 0:t.item,d=a.dataset.fidx?parseInt(a.dataset.fidx):Array.from(r.querySelectorAll(".dt-cell")).indexOf(a),c=((null==(i=r._ref)?void 0:i.rIdx)??Array.from(n.querySelectorAll(".dt-body-row")).indexOf(r))+l._listStartIndex;if(e&&l.fields[d]){const t=o.getSelectionBounds();if(t&&c>=t.minRow&&c<=t.maxRow&&d>=t.minCol&&d<=t.maxCol){const e=t.maxRow-t.minRow+1;e>1&&(l.isBulkEdit={...t,fIdx:d},(null==(s=globalThis.UI)?void 0:s.toast)&&globalThis.UI.toast(`Bulk Edit: Updating ${e} rows in column "${l.fields[d].name}"`,{type:"warning"}))}n.editCell(e,l.fields[d],a)}}},n.addRow=()=>{const e={};l.fields.forEach(t=>e[t.id]=""),l._originalList.push(e),l.list=[...l._originalList],l.isDirty=!0,setTimeout(()=>{a.reset(l.list),n.querySelector(".dt-main").scrollTop=n.querySelector(".dt-main").scrollHeight},50)},n.deleteSelectedRow=async()=>{const e=o.getSelectionBounds();if(!e)return;const t=e.maxRow-e.minRow+1;if(await globalThis.UI.confirm(`Are you sure you want to delete ${t} row(s)?`)){const t=e.minRow,i=e.maxRow,s=l.list.slice(t,i+1);l.list=l.list.filter((e,n)=>!(n>=t&&n<=i)),l._originalList=l._originalList.filter(e=>!s.includes(e)),l.isDirty=!0,o.clearAllActive(),n.dispatchEvent(new CustomEvent("remove",{detail:{items:s}}))}},n.saveChanges=()=>{n.dispatchEvent(new CustomEvent("save",{detail:{list:l._originalList,fields:l.fields}})),l.isDirty=!1};const u=()=>{const e=globalThis.DataTable.getFieldTypes(),t=[{name:"id",label:"Field ID",type:"text",setting:{required:!0,placeholder:"e.g. user_name"}},{name:"name",label:"Display Name",type:"text",setting:{required:!0,placeholder:"e.g. 用户名"}},{name:"user_type",label:"Field Type",type:"select",options:e.map(e=>({label:e.label,value:e.value}))}],i=e.reduce((e,t)=>e.concat(t.schema||[]),[]);return t.concat(i,[{name:"isIndex",label:"Index",type:"switch"},{name:"memo",label:"Memo",type:"text"}])},m=e=>{if(e)return e.split("\n").map(e=>e.trim()).filter(Boolean).map(e=>{const t=e.indexOf(":");return t>-1?{label:e.slice(0,t).trim(),value:e.slice(t+1).trim()}:e})};n.addField=async()=>{n.hideColumnMenu();const e=globalThis.NewState({id:"c"+Date.now().toString().slice(-4),name:"New Field",user_type:"text",decimals:0,isIndex:!1,memo:"",options_str:""}),t=n.querySelector(`Modal[id="${n.id}_field_modal"]`);if(!t)return;Object.assign(t.state,{title:"Add Field",buttons:["Cancel","Save"]});const i=t.querySelector("AutoForm");i&&(i.data=e,i.state.schema=u()),t.show();if(2===await new Promise(e=>t.addEventListener("change",i=>e(t.result),{once:!0}))){const t=globalThis.DataTable.getFieldTypes().find(t=>t.value===e.user_type);let i=(null==t?void 0:t.typeForDB)||"v1024";"number"===e.user_type&&(i=e.decimals>0?"ff":"bi");const s={id:e.id,name:e.name,memo:e.memo,isIndex:!!e.isIndex,type:i,settings:{formType:e.user_type,decimals:e.decimals,prefix:e.prefix,suffix:e.suffix,thousandSep:e.thousandSep,labelOn:e.labelOn,labelOff:e.labelOff,format:e.format,placeholder:e.placeholder,options:m(e.options_str)}};l.fields=[...l.fields,s],l.isDirty=!0,n.dispatchEvent(new CustomEvent("savefields",{detail:l.fields})),l.list=[...l.list]}},n.editField=async()=>{if(!l.activeField)return;n.hideColumnMenu();const e=l.activeField,t=e.settings||{},i=globalThis.NewState({id:e.id,name:e.name,memo:e.memo||"",isIndex:!!e.isIndex,user_type:t.formType||"text",decimals:t.decimals||0,prefix:t.prefix||"",suffix:t.suffix||"",thousandSep:!!t.thousandSep,labelOn:t.labelOn||"",labelOff:t.labelOff||"",format:t.format||"",placeholder:t.placeholder||"",options_str:(s=t.options,s?s.map(e=>"object"==typeof e?`${e.label}:${e.value}`:e).join("\n"):"")});var s;const o=n.querySelector(`Modal[id="${n.id}_field_modal"]`);if(!o)return;Object.assign(o.state,{title:"Edit Field",buttons:["Cancel","Save"]});const a=o.querySelector("AutoForm");a&&(a.data=i,a.state.schema=u()),o.show();if(2===await new Promise(e=>o.addEventListener("change",t=>e(o.result),{once:!0}))){const t=l.fields.findIndex(t=>t.id===e.id);if(-1!==t){const s=globalThis.DataTable.getFieldTypes().find(e=>e.value===i.user_type);let o=(null==s?void 0:s.typeForDB)||"v1024";"number"===i.user_type&&(o=i.decimals>0?"ff":"bi");const a={...e,id:i.id,name:i.name,memo:i.memo,isIndex:!!i.isIndex,type:o,settings:{...e.settings,formType:i.user_type,decimals:i.decimals,prefix:i.prefix,suffix:i.suffix,thousandSep:i.thousandSep,labelOn:i.labelOn,labelOff:i.labelOff,format:i.format,placeholder:i.placeholder,options:m(i.options_str)}};l.fields[t]=a,l.fields=[...l.fields],l.isDirty=!0,n.dispatchEvent(new CustomEvent("savefields",{detail:l.fields})),l.list=[...l.list]}}},n.deleteField=async()=>{if(l.activeField&&(n.hideColumnMenu(),await globalThis.UI.confirm(`Are you sure you want to delete field "${l.activeField.name}"?`))){const e=l.fields.findIndex(e=>e.id===l.activeField.id);-1!==e&&(l.fields.splice(e,1),l.fields=[...l.fields],l.isDirty=!0,n.dispatchEvent(new CustomEvent("savefields",{detail:l.fields})),l.list=[...l.list])}},window.addEventListener("mouseup",o.endSelect),document.addEventListener("mousedown",e=>{const t=n.querySelector(".dt-editor-overlay"),i=n.querySelector(".dt-column-menu");"none"===(null==t?void 0:t.style.display)||t.contains(e.target)||n.hideEditor(!0),n.contains(e.target)||(null==t?void 0:t.contains(e.target))||(null==i?void 0:i.contains(e.target))||o.clearAllActive()}),n.addEventListener("keydown",e=>{(e.ctrlKey||e.metaKey)&&"c"===e.key.toLowerCase()&&(e.preventDefault(),o.copy()),(e.ctrlKey||e.metaKey)&&"v"===e.key.toLowerCase()&&(e.preventDefault(),o.paste())}),l._MODE_ICONS=t},globalThis.Util.makeDom('\n<div class="dt-root d-flex flex-column h-100 border bg-body text-body overflow-visible" style="position:relative; user-select:none; outline: none; min-height: 0" tabindex="0">\n        <div class="dt-main flex-grow-1 overflow-auto" $onscroll="this.onScroll()" \n                $onmousedown="this.onMainMouseDown(event)" $onmouseover="this.onMainMouseOver(event)" $ondblclick="this.onMainDblClick(event)"\n                style="overflow-anchor:none; min-height: 0">\n                <div class="dt-header border-bottom bg-light sticky-top" style="z-index:20">\n                        <div class="dt-header-row fw-bold text-muted small">\n                                <template $each="this.state?.fields || []">\n                                        <div $data-id="item.id" $class="dt-cell dt-col border-end d-flex align-items-center header-cell ${(item.settings?.pinned || item.pinned) ? \'pinned-\' + (item.settings?.pinned || item.pinned) : \'\'}" $style="((item.settings?.pinned || item.pinned) ? \'position: sticky; z-index: 11; background-color: inherit; \' : \'position:relative; \') + \'padding: 0; \' + ((item.settings?.pinned || item.pinned) === \'left\' ? \'left: var(--l-\' + item.id + \'); border-right: 1px solid var(--bs-border-color); box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1);\' : ((item.settings?.pinned || item.pinned) === \'right\' ? \'right: var(--r-\' + item.id + \'); border-left: 1px solid var(--bs-border-color); box-shadow: -2px 0 5px -2px rgba(0,0,0,0.1);\' : \'\'))">\n                                                <div class="d-flex align-items-center overflow-hidden flex-grow-1 h-100 px-2 cursor-pointer" $onclick="this.showColumnMenu(item, event)">\n                                                        <i $if="this.state?.filterConfig?.[item.id] && (this.state.filterConfig[item.id].value || this.state.filterConfig[item.id].selectedValues?.length)" class="bi bi-filter me-1 text-primary"></i>\n                                                        <i $if="this.state?.sortConfig?.fieldId === item.id && this.state.sortConfig.direction" $class="bi bi-sort-${this.state.sortConfig.direction === \'asc\' ? \'down\' : \'up-alt\'} me-1 text-primary"></i>\n                                                        <span $text="item.name" class="text-truncate flex-grow-1"></span>\n                                                </div>\n                                                <button class="btn btn-xs btn-link text-muted p-0 border-0 me-1 header-menu-btn" $onclick="this.showColumnMenu(item, event)"><i class="bi bi-chevron-down"></i></button>\n                                                <Resizer $.target="thisNode.parentElement" style="position:absolute; right:0; top:0; bottom:0; width:4px; z-index:10" min="50" max="1000" $onresizing="this.onColumnResizing(item, event)" $onresize="this.onColumnResize(item, event)"></Resizer>\n                                        </div>\n                                </template>\n                        </div>\n                </div>\n                <div class="dt-body" style="position:relative">\n                        <div class="dt-spacer-prev flex-shrink-0" style="display:none"></div>\n                        <template $each="this.state?._renderedList || []" key="id" index="rIdx">\n                                <div class="dt-row dt-body-row border-bottom bg-white" $.="this._initRow(thisNode)">\n                                        <template as="f"><div $class="dt-cell border-end px-2 d-flex align-items-center ${(f.settings?.pinned || f.pinned) ? \'pinned-\' + (f.settings?.pinned || f.pinned) : \'\'}" $style="((f.settings?.pinned || f.pinned) ? \'position: sticky; z-index: 1; background-color: inherit; \' : \'\') + ((f.settings?.pinned || f.pinned) === \'left\' ? \'left: var(--l-\' + f.id + \'); border-right: 1px solid var(--bs-border-color); box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1);\' : ((f.settings?.pinned || f.pinned) === \'right\' ? \'right: var(--r-\' + f.id + \'); border-left: 1px solid var(--bs-border-color); box-shadow: -2px 0 5px -2px rgba(0,0,0,0.1);\' : \'\'))"><span $text="this.format(item[f.id], f)" class="text-truncate"></span></div></template>\n                                </div>\n                        </template>\n                        <div class="dt-spacer-post flex-shrink-0" style="display:none"></div>\n                </div>\n                <div class="dt-editor-overlay dt-editor-container" style="display: none; position: absolute; z-index: 1000; background: var(--bs-body-bg); box-shadow: 0 4px 16px rgba(0,0,0,0.25); border: 1px solid var(--bs-primary); padding: 0;"><AutoForm nobutton inline class="h-100 w-100" $onsubmit="event.preventDefault(); thisNode.closest(\'DataTable\').hideEditor(true)"></AutoForm></div>\n        </div>\n\n        <div class="dt-column-menu bg-body shadow-lg rounded p-2" style="display:none; position:absolute; z-index:2000; min-width:240px; max-width:300px; border: 1px solid var(--bs-primary)">\n                <template $if="this.state?.activeFieldId">\n                        <div class="d-flex gap-1 mb-2">\n                                <button $class="btn btn-xs flex-grow-1 d-flex align-items-center justify-content-center ${this.state?.sortConfig?.direction === \'asc\' && this.state?.sortConfig?.fieldId === this.state?.activeFieldId ? \'btn-primary\' : \'btn-outline-secondary border\'}" $onclick="this.setSort(\'asc\')"><i class="bi bi-sort-alpha-down me-1"></i> ASC</button>\n                                <button $class="btn btn-xs flex-grow-1 d-flex align-items-center justify-content-center ${this.state?.sortConfig?.direction === \'desc\' && this.state?.sortConfig?.fieldId === this.state?.activeFieldId ? \'btn-primary\' : \'btn-outline-secondary border\'}" $onclick="this.setSort(\'desc\')"><i class="bi bi-sort-alpha-up-alt me-1"></i> DESC</button>\n                        </div>\n\n                        <template $if="this.state?.activeModes?.length">\n                        <div class="py-2 border-bottom" style="min-height: 48px">\n                                <div class="input-group input-group-sm mb-1">\n                                        <input type="text" class="form-control" $placeholder="(this.state?.filterConfig?.[this.state?.activeFieldId]?.mode || \'Search\').toUpperCase() + \'...\'" $bind="this.state?.filterConfig?.[this.state?.activeFieldId].value" $onkeydown="if(event.key===\'Enter\'){this.applySortFilter();this.hideColumnMenu();}">\n                                        <button class="btn btn-outline-secondary border dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" title="Search Mode">\n                                                <i $class="bi ${this.state?._MODE_ICONS?.[this.state?.filterConfig?.[this.state?.activeFieldId]?.mode] || \'bi-filter\'}"></i>\n                                        </button>\n                                        <ul class="dropdown-menu dropdown-menu-end shadow">\n                                                <template $each="this.state?.activeModes || []" as="m">\n                                                        <li><button class="dropdown-item d-flex align-items-center" type="button" $onclick="this.state.filterConfig[this.state.activeFieldId].mode = m; this.state.filterConfig = {...this.state.filterConfig}">\n                                                                <i $class="bi ${this.state?._MODE_ICONS?.[m] || \'bi-filter\'} me-2"></i> <span $text="m.toUpperCase()"></span>\n                                                        </button></li>\n                                                </template>\n                                        </ul>\n                                </div>\n                                <input $if="this.state?.filterConfig?.[this.state?.activeFieldId]?.mode === \'between\'" type="text" class="form-control form-control-sm" placeholder="And..." $bind="this.state?.filterConfig?.[this.state?.activeFieldId].value2" $onkeydown="if(event.key===\'Enter\'){this.applySortFilter();this.hideColumnMenu();}">\n                        </div>\n                        </template>\n\n                        <div class="mt-2" style="max-height: 180px; overflow-y: auto;">\n                                <template $each="this.state?._columnStats?.[this.state?.activeFieldId] || []">\n                                        <label class="d-flex align-items-center mb-1 small cursor-pointer p-1 rounded-1 menu-item-row" onmouseover="this.style.background=\'var(--bs-light)\'" onmouseout="this.style.background=\'transparent\'">\n                                                <input type="checkbox" class="form-check-input me-2" $checked="this.state?.filterConfig?.[this.state?.activeFieldId]?.selectedValues?.includes(String(item.val))" $onclick="this.toggleSelectedValue(String(item.val))">\n                                                <span class="text-truncate flex-grow-1"><span $text="item.val || \'(Empty)\'"></span> <span class="text-muted ms-1" style="font-size: 0.7rem" $text="\'(\' + item.count + \')\'"></span></span>\n                                                <button class="btn btn-xs btn-link p-0 text-primary only-btn" style="font-size: 10px; text-decoration: none" $onclick="this.filterOnlyThis(item.val); event.preventDefault(); event.stopPropagation();">Only</button>\n                                        </label>\n                                </template>\n                        </div>\n\n                        <div $if="this.state?.filterConfig?.[this.state?.activeFieldId]?.value || this.state?.filterConfig?.[this.state?.activeFieldId]?.selectedValues?.length" class="mt-2 pt-1 border-top text-center">\n                                <span class="cursor-pointer text-primary small fw-bold" $onclick="this.clearColumnSettings()"><i class="bi bi-x-circle me-1"></i> Clear Filter</span>\n                        </div>\n\n                        <div $if="this.state?.editable" class="mt-3 pt-2 border-top d-flex gap-1 justify-content-between">\n                                <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Edit Field" $onclick="this.editField()"><i class="bi bi-pencil"></i></button>\n                                <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Add Field" $onclick="this.addField()"><i class="bi bi-plus-lg"></i></button>\n                                <button class="btn btn-sm btn-light border-0 flex-grow-1 text-danger" title="Delete Field" $onclick="this.deleteField()"><i class="bi bi-trash"></i></button>\n                        </div>\n                </template>\n        </div>\n\n        <Modal $.id="this.id + \'_field_modal\'">\n            <div slot="body"><AutoForm nobutton class="p-3"></AutoForm></div>\n            <div slot="footer">\n                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" $onclick="thisNode.closest(\'Modal\').result=1">Cancel</button>\n                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" $onclick="thisNode.closest(\'Modal\').result=2">Save</button>\n            </div>\n        </Modal>\n\n        <div class="dt-footer border-top bg-light d-flex align-items-center px-3 py-1 shadow-sm" style="height:40px; z-index: 10">\n                <div class="d-flex align-items-center gap-3 flex-grow-1">\n                        <div $if="this.state?.editable" class="d-flex align-items-center gap-1">\n                                <button class="btn btn-sm btn-light border-0 d-flex align-items-center px-2 py-1" $onclick="this.addRow()" title="Add Row"><i class="bi bi-plus-lg text-primary me-1"></i> Add</button>\n                                <button class="btn btn-sm btn-light border-0 d-flex align-items-center px-2 py-1" $onclick="this.deleteSelectedRow()" $disabled="!this.state?.selectedRowCount" title="Delete Selected Rows"><i class="bi bi-trash text-danger me-1"></i> Delete</button>\n                        </div>\n                        <div $if="this.state?.editable" class="vr h-50 my-auto text-muted opacity-25"></div>\n                        <div class="d-flex align-items-center gap-2 text-muted" style="font-size: 0.75rem">\n                                <i class="bi bi-check-all fs-6"></i>\n                                <span $text="(this.state?.selectedRowCount || 0) + \' selected / \' + (this.state?.list?.length || 0) + \' total\'"></span>\n                        </div>\n                </div>\n                <div $if="this.state?.editable" class="d-flex align-items-center gap-2">\n                        <button $if="this.state?.isDirty" class="btn btn-sm btn-primary border-0 px-3 shadow-sm d-flex align-items-center fw-bold" $onclick="this.saveChanges()"><i class="bi bi-cloud-upload me-1"></i> Save</button>\n                        <button $if="!this.state?.isDirty" class="btn btn-sm btn-light border-0 px-3 text-muted disabled d-flex align-items-center" disabled><i class="bi bi-cloud-check me-1"></i> Saved</button>\n                </div>\n        </div>\n</div>\n'),globalThis.Util.makeDom("\n<style>\n        DataTable { display: block; }\n        .dt-root { font-size: 0.875rem; }\n        .dt-row, .dt-header-row { display: grid; grid-template-columns: var(--dt-grid-template); width: var(--dt-row-width, max-content); min-width: 100%; height: 40px; contain: paint layout; }\n        .dt-main { position: relative; }\n        .dt-header-row { background-color: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); }\n        .dt-cell { background: inherit; white-space: nowrap; flex-shrink: 0; contain: content; }\n        .dt-cell-selected { background-color: rgba(var(--bs-primary-rgb), 0.15) !important; outline: 1px solid var(--bs-primary); outline-offset: -1px; }\n        .dt-body-row:hover { background-color: var(--bs-secondary-bg) !important; }\n        .header-cell .header-menu-btn { opacity: 0; transition: opacity 0.2s; }\n        .header-cell:hover .header-menu-btn { opacity: 1; }\n        .dt-column-menu { background-color: var(--bs-body-bg); border: 1px solid var(--bs-primary); box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important; z-index: 2100 !important; }\n        .btn-xs { padding: 1px 5px; line-height: 1.5; }\n        .cursor-pointer { cursor: pointer; }\n        .dt-filter-tabs i { font-size: 1.1rem; }\n        .dt-filter-tabs div:hover i { color: var(--bs-primary); }\n        .menu-item-row .only-btn { opacity: 0; }\n        .menu-item-row:hover .only-btn { opacity: 1; }\n        .dt-editor-overlay .auto-form-root form { gap: 0 !important; margin: 0 !important; height: 100%; }\n        .dt-editor-overlay [control-wrapper] { width: 100%; margin: 0 !important; min-height: 100% !important; align-items: stretch !important; }\n        .dt-editor-overlay [control-wrapper] > .d-flex { padding: 0.375rem 0.5rem; justify-content: flex-start !important; align-items: center !important; }\n        .dt-editor-overlay [control-wrapper] > .form-switch { padding-left: 2.5rem !important; }\n        .dt-editor-overlay [control-wrapper] > textarea { min-height: 100px; resize: vertical; }\n</style>\n")),globalThis.DataTable=i});
diff --git a/package-lock.json b/package-lock.json
index 89031ac..60e1bf9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-	"name": "@web/datatable",
+	"name": "@apigo.cc/datatable",
 	"version": "1.0.14",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
-			"name": "@web/datatable",
+			"name": "@apigo.cc/datatable",
 			"version": "1.0.14",
 			"devDependencies": {
 				"@playwright/test": "^1.40.0",
diff --git a/package.json b/package.json
index 203ec6e..36ff475 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "@web/datatable",
+	"name": "@apigo.cc/datatable",
 	"version": "1.0.14",
 	"type": "module",
 	"main": "dist/datatable.js",
@@ -10,7 +10,8 @@
 	"scripts": {
 		"dev": "vite",
 		"build": "vite build",
-		"test": "playwright test"
+		"test": "playwright test",
+		"pub": "node scripts/publish.js"
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.40.0",
diff --git a/scripts/publish.js b/scripts/publish.js
new file mode 100644
index 0000000..b562aa9
--- /dev/null
+++ b/scripts/publish.js
@@ -0,0 +1,48 @@
+import { execSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+try {
+  // 1. 获取最新 tag
+  let tag;
+  try {
+    tag = execSync('git describe --tags --abbrev=0', { encoding: 'utf8' }).trim();
+  } catch (err) {
+    throw new Error('Failed to find git tags. Please make sure the repository has tags (e.g., v1.0.0) before publishing.');
+  }
+  // 去掉 v 前缀
+  const version = tag.startsWith('v') ? tag.slice(1) : tag;
+
+  console.log(`Latest git tag: ${tag}, Version to publish: ${version}`);
+
+  // 2. 读取并更新 package.json
+  const pkgPath = path.join(__dirname, '../package.json');
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+  
+  // 保持原有名称（如果已经带有 @apigo.cc/ 前缀）或替换前缀
+  if (!pkg.name.startsWith('@apigo.cc/')) {
+    const baseName = pkg.name.includes('/') ? pkg.name.split('/')[1] : pkg.name;
+    pkg.name = `@apigo.cc/${baseName}`;
+  }
+  pkg.version = version;
+
+  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
+  console.log(`Updated package.json: name=${pkg.name}, version=${pkg.version}`);
+
+  // 3. 构建
+  console.log('Running build...');
+  execSync('npm run build', { stdio: 'inherit', cwd: path.join(__dirname, '..') });
+
+  // 4. 发布
+  console.log('Publishing to npm...');
+  const args = process.argv.slice(2).join(' ');
+  execSync(`npm publish --access public ${args}`, { stdio: 'inherit', cwd: path.join(__dirname, '..') });
+
+  console.log('Publish successful!');
+} catch (error) {
+  console.error('Publish failed:', error.message);
+  process.exit(1);
+}
diff --git a/src/DataTable.js b/src/DataTable.js
index 95fa498..c3fd2f9 100644
--- a/src/DataTable.js
+++ b/src/DataTable.js
@@ -253,6 +253,7 @@ const createSelectionManager = (container, state) => {
 globalThis.Component.register('DataTable', container => {
         if (!container.state) container.state = globalThis.NewState({})
         const state = container.state
+        container.editable = container.hasAttribute('editable')
 
         Object.assign(state, {
                 list: [], fields: [], _renderedList: [],
@@ -263,7 +264,8 @@ globalThis.Component.register('DataTable', container => {
                 filterConfig: {}, 
                 activeFieldId: null, activeField: null, activeModes: [],
                 _columnStats: {}, _internalUpdate: false, _appliedHash: '', _fieldsDirty: false, _masterCellNodes: null,
-                isDirty: false, isBulkEdit: null
+                isDirty: false, isBulkEdit: null,
+                editable: container.editable
         })
 
         const perf = createPerfMonitor();
@@ -292,6 +294,7 @@ globalThis.Component.register('DataTable', container => {
         container.onScroll = () => {
                 perf.onScroll(); scroll.refresh();
                 container.hideColumnMenu();
+                container.hideEditor(true);
                 const prev = container.querySelector('.dt-spacer-prev'), post = container.querySelector('.dt-spacer-post');
                 if (prev) { prev.style.height = (state.prevHeight || 0) + 'px'; prev.style.display = state.prevHeight > 0 ? 'block' : 'none'; }
                 if (post) { post.style.height = (state.postHeight || 0) + 'px'; post.style.display = state.postHeight > 0 ? 'block' : 'none'; }
@@ -342,6 +345,11 @@ globalThis.Component.register('DataTable', container => {
 
         container.showColumnMenu = (field, event) => {
                 const btn = event.currentTarget, menu = container.querySelector('.dt-column-menu');
+                if (menu.style.display === 'block' && state.activeFieldId === field.id) {
+                        container.hideColumnMenu();
+                        container.applySortFilter();
+                        return;
+                }
                 const type = field.settings?.formType || field.type || 'text';
                 state.activeModes = MODE_MAP[type] || (['boolean', 'switch', 'checkbox', 'radio'].includes(type) ? [] : MODE_MAP.text);
                 if (!state.filterConfig[field.id]) state.filterConfig[field.id] = { mode: state.activeModes[0] || 'contains', value: '', selectedValues: [] };
@@ -520,6 +528,7 @@ globalThis.Component.register('DataTable', container => {
         };
 
         container.onMainDblClick = e => {
+                if (!container.editable) return;
                 const cell = e.target.closest('.dt-cell'), row = cell?.closest('.dt-row');
                 if (row && !row.classList.contains('dt-header-row')) {
                         const item = row._ref?.item, fIdx = cell.dataset.fidx ? parseInt(cell.dataset.fidx) : Array.from(row.querySelectorAll('.dt-cell')).indexOf(cell);
@@ -712,7 +721,6 @@ globalThis.Component.register('DataTable', container => {
                         </template>
 
                         <div class="mt-2" style="max-height: 180px; overflow-y: auto;">
-                                <div class="text-muted fw-bold mb-1" style="font-size: 9px; letter-spacing: 0.5px">TOP FREQUENT VALUES</div>
                                 <template $each="this.state?._columnStats?.[this.state?.activeFieldId] || []">
                                         <label class="d-flex align-items-center mb-1 small cursor-pointer p-1 rounded-1 menu-item-row" onmouseover="this.style.background='var(--bs-light)'" onmouseout="this.style.background='transparent'">
                                                 <input type="checkbox" class="form-check-input me-2" $checked="this.state?.filterConfig?.[this.state?.activeFieldId]?.selectedValues?.includes(String(item.val))" $onclick="this.toggleSelectedValue(String(item.val))">
@@ -726,7 +734,7 @@ globalThis.Component.register('DataTable', container => {
                                 <span class="cursor-pointer text-primary small fw-bold" $onclick="this.clearColumnSettings()"><i class="bi bi-x-circle me-1"></i> Clear Filter</span>
                         </div>
 
-                        <div class="mt-3 pt-2 border-top d-flex gap-1 justify-content-between">
+                        <div $if="this.state?.editable" class="mt-3 pt-2 border-top d-flex gap-1 justify-content-between">
                                 <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Edit Field" $onclick="this.editField()"><i class="bi bi-pencil"></i></button>
                                 <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Add Field" $onclick="this.addField()"><i class="bi bi-plus-lg"></i></button>
                                 <button class="btn btn-sm btn-light border-0 flex-grow-1 text-danger" title="Delete Field" $onclick="this.deleteField()"><i class="bi bi-trash"></i></button>
@@ -744,17 +752,17 @@ globalThis.Component.register('DataTable', container => {
 
         <div class="dt-footer border-top bg-light d-flex align-items-center px-3 py-1 shadow-sm" style="height:40px; z-index: 10">
                 <div class="d-flex align-items-center gap-3 flex-grow-1">
-                        <div class="d-flex align-items-center gap-1">
+                        <div $if="this.state?.editable" class="d-flex align-items-center gap-1">
                                 <button class="btn btn-sm btn-light border-0 d-flex align-items-center px-2 py-1" $onclick="this.addRow()" title="Add Row"><i class="bi bi-plus-lg text-primary me-1"></i> Add</button>
                                 <button class="btn btn-sm btn-light border-0 d-flex align-items-center px-2 py-1" $onclick="this.deleteSelectedRow()" $disabled="!this.state?.selectedRowCount" title="Delete Selected Rows"><i class="bi bi-trash text-danger me-1"></i> Delete</button>
                         </div>
-                        <div class="vr h-50 my-auto text-muted opacity-25"></div>
+                        <div $if="this.state?.editable" class="vr h-50 my-auto text-muted opacity-25"></div>
                         <div class="d-flex align-items-center gap-2 text-muted" style="font-size: 0.75rem">
                                 <i class="bi bi-check-all fs-6"></i>
                                 <span $text="(this.state?.selectedRowCount || 0) + ' selected / ' + (this.state?.list?.length || 0) + ' total'"></span>
                         </div>
                 </div>
-                <div class="d-flex align-items-center gap-2">
+                <div $if="this.state?.editable" class="d-flex align-items-center gap-2">
                         <button $if="this.state?.isDirty" class="btn btn-sm btn-primary border-0 px-3 shadow-sm d-flex align-items-center fw-bold" $onclick="this.saveChanges()"><i class="bi bi-cloud-upload me-1"></i> Save</button>
                         <button $if="!this.state?.isDirty" class="btn btn-sm btn-light border-0 px-3 text-muted disabled d-flex align-items-center" disabled><i class="bi bi-cloud-check me-1"></i> Saved</button>
                 </div>
diff --git a/test/diagnostic.html b/test/diagnostic.html
index 17a2f3a..2335d85 100644
--- a/test/diagnostic.html
+++ b/test/diagnostic.html
@@ -3,7 +3,6 @@
 <head>
     <meta charset="UTF-8">
     <title>AutoForm Diagnostic</title>
-    <script src="lib/bootstrap.js"></script>
     <script src="lib/state.js"></script>
     <script src="lib/base.js"></script>
     <script src="lib/datatable.js"></script>
@@ -46,6 +45,7 @@
     </script>
 </head>
 <body class="p-4">
+    <script src="lib/bootstrap.js"></script>
     <div style="width: 300px; border: 1px solid blue; min-height: 100px;">
         <AutoForm id="diagForm" inline></AutoForm>
     </div>
diff --git a/test/index.html b/test/index.html
index 7989ff1..ec65c0c 100644
--- a/test/index.html
+++ b/test/index.html
@@ -5,8 +5,6 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>DataTable Demo</title>
-	<!-- 0. Bootstrap -->
-	<script src="lib/bootstrap.js"></script>
 	<style>
 		body, html { height: 100%; margin: 0; padding: 0; overflow: hidden; }
 		.demo-container { height: 100vh; padding: 20px; display: flex; flex-direction: column; }
@@ -15,9 +13,11 @@
 </head>
 
 <body class="bg-light">
+	<!-- 0. Bootstrap -->
+	<script src="lib/bootstrap.js"></script>
 	<div class="demo-container">
 		<div class="table-wrapper">
-			<DataTable id="myTable"></DataTable>
+			<DataTable id="myTable" editable></DataTable>
 		</div>
 	</div>
 
diff --git a/test/lib/base.js b/test/lib/base.js
index 7324f47..07d563a 100644
--- a/test/lib/base.js
+++ b/test/lib/base.js
@@ -127,14 +127,14 @@
               <option $each="item.options" as="opt" $value="opt.value !== undefined ? opt.value : opt" $text="opt.label || opt"></option>
           </select>
           
-          <div $if="['checkbox', 'radio'].includes(item.type)" class="d-flex align-items-center flex-wrap gap-3 h-100" style="padding-left: 0.75rem; padding-right: 0.75rem; min-height: calc(2.25rem + 2px);">
+          <div $if="['checkbox', 'radio'].includes(item.type)" class="d-flex align-items-center flex-wrap gap-3 h-100" style="padding: 0 0.75rem; min-height: calc(2.25rem + 2px);">
               <label $each="item.options || [item.text||item.label||item.name]" as="opt" class="form-check mb-0 d-flex align-items-center" style="padding-left:0; cursor:pointer;">
                   <input $name="item.name" class="form-check-input m-0 me-2" style="float:none;" $type="item.type" $.="item.setting || {}" $value="item.options ? (opt.value !== undefined ? opt.value : opt) : 'on'" $bind="this.data[item.name]">
                   <span $if="!this.inline || (item.options && item.options.length > 0)" $text="opt.label || opt" class="form-check-label"></span>
               </label>
           </div>
-          
-          <div $if="item.type === 'switch'" class="form-check form-switch fs-5 d-flex align-items-center m-0" style="padding-left: 3.25rem; padding-right: 0.75rem; min-height: calc(2.25rem + 2px); display:flex !important;">
+
+          <div $if="item.type === 'switch'" class="form-check form-switch fs-5 d-flex align-items-center m-0" style="padding: 0 0.75rem; min-height: calc(2.25rem + 2px); display:flex !important;">
               <input $name="item.name" class="form-check-input m-0" style="float:none; cursor:pointer" type="checkbox" $bind="this.data[item.name]">
           </div>
           
diff --git a/test/lib/bootstrap.js b/test/lib/bootstrap.js
index 5ae200f..eac401d 100644
--- a/test/lib/bootstrap.js
+++ b/test/lib/bootstrap.js
@@ -2120,7 +2120,9 @@ url("data:font/woff;base64,d09GRgABAAAAAsBAAAsAAAAHavgAAQAAAAAAAAAAAAAAAAAAAAAAA
     console.error("vite-plugin-css-injected-by-js", e);
   }
 })();
-var ApigoBootstrap = function(exports) {
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@apigo.cc/state")) : typeof define === "function" && define.amd ? define(["exports", "@apigo.cc/state"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.ApigoBootstrap = global.ApigoBootstrap || {}));
+})(this, function(exports2) {
   "use strict";
   var top = "top";
   var bottom = "bottom";
@@ -7277,8 +7279,7 @@ var ApigoBootstrap = function(exports) {
     globalThis.bootstrap = bootstrap;
     globalThis.Bootstrap = Bootstrap;
   }
-  exports.Bootstrap = Bootstrap;
-  exports.default = Bootstrap;
-  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-  return exports;
-}({});
+  exports2.Bootstrap = Bootstrap;
+  exports2.default = Bootstrap;
+  Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+});
diff --git a/test/lib/datatable.js b/test/lib/datatable.js
index b40601f..d264b62 100644
--- a/test/lib/datatable.js
+++ b/test/lib/datatable.js
@@ -356,6 +356,7 @@
   globalThis.Component.register("DataTable", (container) => {
     if (!container.state) container.state = globalThis.NewState({});
     const state = container.state;
+    container.editable = container.hasAttribute("editable");
     Object.assign(state, {
       list: [],
       fields: [],
@@ -376,7 +377,8 @@
       _fieldsDirty: false,
       _masterCellNodes: null,
       isDirty: false,
-      isBulkEdit: null
+      isBulkEdit: null,
+      editable: container.editable
     });
     const perf = createPerfMonitor();
     state.perf = perf.stats;
@@ -404,6 +406,7 @@
       perf.onScroll();
       scroll.refresh();
       container.hideColumnMenu();
+      container.hideEditor(true);
       const prev = container.querySelector(".dt-spacer-prev"), post = container.querySelector(".dt-spacer-post");
       if (prev) {
         prev.style.height = (state.prevHeight || 0) + "px";
@@ -466,6 +469,11 @@
     container.showColumnMenu = (field, event) => {
       var _a;
       const btn = event.currentTarget, menu = container.querySelector(".dt-column-menu");
+      if (menu.style.display === "block" && state.activeFieldId === field.id) {
+        container.hideColumnMenu();
+        container.applySortFilter();
+        return;
+      }
       const type = ((_a = field.settings) == null ? void 0 : _a.formType) || field.type || "text";
       state.activeModes = MODE_MAP[type] || (["boolean", "switch", "checkbox", "radio"].includes(type) ? [] : MODE_MAP.text);
       if (!state.filterConfig[field.id]) state.filterConfig[field.id] = { mode: state.activeModes[0] || "contains", value: "", selectedValues: [] };
@@ -713,6 +721,7 @@
     };
     container.onMainDblClick = (e) => {
       var _a, _b, _c;
+      if (!container.editable) return;
       const cell = e.target.closest(".dt-cell"), row = cell == null ? void 0 : cell.closest(".dt-row");
       if (row && !row.classList.contains("dt-header-row")) {
         const item = (_a = row._ref) == null ? void 0 : _a.item, fIdx = cell.dataset.fidx ? parseInt(cell.dataset.fidx) : Array.from(row.querySelectorAll(".dt-cell")).indexOf(cell);
@@ -930,7 +939,6 @@
                         </template>
 
                         <div class="mt-2" style="max-height: 180px; overflow-y: auto;">
-                                <div class="text-muted fw-bold mb-1" style="font-size: 9px; letter-spacing: 0.5px">TOP FREQUENT VALUES</div>
                                 <template $each="this.state?._columnStats?.[this.state?.activeFieldId] || []">
                                         <label class="d-flex align-items-center mb-1 small cursor-pointer p-1 rounded-1 menu-item-row" onmouseover="this.style.background='var(--bs-light)'" onmouseout="this.style.background='transparent'">
                                                 <input type="checkbox" class="form-check-input me-2" $checked="this.state?.filterConfig?.[this.state?.activeFieldId]?.selectedValues?.includes(String(item.val))" $onclick="this.toggleSelectedValue(String(item.val))">
@@ -944,7 +952,7 @@
                                 <span class="cursor-pointer text-primary small fw-bold" $onclick="this.clearColumnSettings()"><i class="bi bi-x-circle me-1"></i> Clear Filter</span>
                         </div>
 
-                        <div class="mt-3 pt-2 border-top d-flex gap-1 justify-content-between">
+                        <div $if="this.state?.editable" class="mt-3 pt-2 border-top d-flex gap-1 justify-content-between">
                                 <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Edit Field" $onclick="this.editField()"><i class="bi bi-pencil"></i></button>
                                 <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Add Field" $onclick="this.addField()"><i class="bi bi-plus-lg"></i></button>
                                 <button class="btn btn-sm btn-light border-0 flex-grow-1 text-danger" title="Delete Field" $onclick="this.deleteField()"><i class="bi bi-trash"></i></button>
@@ -962,17 +970,17 @@
 
         <div class="dt-footer border-top bg-light d-flex align-items-center px-3 py-1 shadow-sm" style="height:40px; z-index: 10">
                 <div class="d-flex align-items-center gap-3 flex-grow-1">
-                        <div class="d-flex align-items-center gap-1">
+                        <div $if="this.state?.editable" class="d-flex align-items-center gap-1">
                                 <button class="btn btn-sm btn-light border-0 d-flex align-items-center px-2 py-1" $onclick="this.addRow()" title="Add Row"><i class="bi bi-plus-lg text-primary me-1"></i> Add</button>
                                 <button class="btn btn-sm btn-light border-0 d-flex align-items-center px-2 py-1" $onclick="this.deleteSelectedRow()" $disabled="!this.state?.selectedRowCount" title="Delete Selected Rows"><i class="bi bi-trash text-danger me-1"></i> Delete</button>
                         </div>
-                        <div class="vr h-50 my-auto text-muted opacity-25"></div>
+                        <div $if="this.state?.editable" class="vr h-50 my-auto text-muted opacity-25"></div>
                         <div class="d-flex align-items-center gap-2 text-muted" style="font-size: 0.75rem">
                                 <i class="bi bi-check-all fs-6"></i>
                                 <span $text="(this.state?.selectedRowCount || 0) + ' selected / ' + (this.state?.list?.length || 0) + ' total'"></span>
                         </div>
                 </div>
-                <div class="d-flex align-items-center gap-2">
+                <div $if="this.state?.editable" class="d-flex align-items-center gap-2">
                         <button $if="this.state?.isDirty" class="btn btn-sm btn-primary border-0 px-3 shadow-sm d-flex align-items-center fw-bold" $onclick="this.saveChanges()"><i class="bi bi-cloud-upload me-1"></i> Save</button>
                         <button $if="!this.state?.isDirty" class="btn btn-sm btn-light border-0 px-3 text-muted disabled d-flex align-items-center" disabled><i class="bi bi-cloud-check me-1"></i> Saved</button>
                 </div>
diff --git a/test/lib/state.js b/test/lib/state.js
index 21a304b..40c0b53 100644
--- a/test/lib/state.js
+++ b/test/lib/state.js
@@ -4,7 +4,7 @@
   "use strict";
   var _a, _b;
   const Util = {
-    clone: globalThis.structuredClone ? (obj) => globalThis.structuredClone(obj) : (obj) => JSON.parse(JSON.stringify(obj)),
+    clone: (obj) => JSON.parse(JSON.stringify(obj)),
     base64: (str) => btoa(String.fromCharCode(...new TextEncoder().encode(str))),
     unbase64: (str) => new TextDecoder().decode(Uint8Array.from(atob(str), (c) => c.charCodeAt(0))),
     urlbase64: (str) => Util.base64(str).replace(/[+/=]/g, (m) => ({ "+": "-", "/": "", "=": "" })[m]),
@@ -385,6 +385,7 @@
             if (existingNodes) {
               node._keyedNodes.delete(keyVal);
               existingNodes.forEach((child) => {
+                node.parentNode.insertBefore(child, node);
                 child._ref[indexName] = k;
                 child._ref[asName] = item;
                 _scanTree(child);
diff --git a/test/minimal_perf.html b/test/minimal_perf.html
index 39ce58a..b2dcdf8 100644
--- a/test/minimal_perf.html
+++ b/test/minimal_perf.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <script src="lib/bootstrap.js"></script>
     <script src="lib/state.js"></script>
     <script src="lib/base.js"></script>
     <script src="lib/datatable.js"></script>
@@ -24,7 +23,7 @@
             
             const div = document.createElement('div');
             div.setAttribute('style', 'height: 400px; width: 800px; border: 1px solid red');
-            div.innerHTML = '<DataTable id="dt" style="display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden"></DataTable>';
+            div.innerHTML = '<DataTable id="dt" editable style="display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden"></DataTable>';
             document.body.appendChild(div);
             
             // Wait for MutationObserver to pick up the new element
@@ -50,5 +49,7 @@
         };
     </script>
 </head>
-<body></body>
+<body>
+    <script src="lib/bootstrap.js"></script>
+</body>
 </html>
diff --git a/vite.config.js b/vite.config.js
index 98ebb92..24e4979 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,9 +5,9 @@ import terser from '@rollup/plugin-terser';
 export default defineConfig({
   resolve: {
     alias: {
-      '@web/state': resolve(__dirname, '../state/src/index.js'),
-      '@web/base': resolve(__dirname, '../base/src/index.js'),
-      '@web/datatable': resolve(__dirname, 'src/index.js')
+      '@apigo.cc/state': resolve(__dirname, '../state/src/index.js'),
+      '@apigo.cc/base': resolve(__dirname, '../base/src/index.js'),
+      '@apigo.cc/datatable': resolve(__dirname, 'src/index.js')
     }
   },
   server: {
@@ -22,7 +22,7 @@ export default defineConfig({
       formats: ['umd']
     },
     rollupOptions: {
-      external: ['@web/state', '@web/base'],
+      external: ['@apigo.cc/state', '@apigo.cc/base'],
       output: [
         {
           format: 'umd',
@@ -30,8 +30,8 @@ export default defineConfig({
           entryFileNames: 'datatable.js',
           extend: true,
           globals: {
-            '@web/state': 'ApigoState',
-            '@web/base': 'ApigoBase'
+            '@apigo.cc/state': 'ApigoState',
+            '@apigo.cc/base': 'ApigoBase'
           }
         },
         {
@@ -40,8 +40,8 @@ export default defineConfig({
           entryFileNames: 'datatable.min.js',
           extend: true,
           globals: {
-            '@web/state': 'ApigoState',
-            '@web/base': 'ApigoBase'
+            '@apigo.cc/state': 'ApigoState',
+            '@apigo.cc/base': 'ApigoBase'
           },
           plugins: [terser()]
         }