@jboltai/tokui 0.1.8 → 0.1.9

package/dist/tokui.mjs

@@ -58,6 +58,18 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			"actions.delete": "删除",
 			"actions.approve": "批准",
 			"actions.deny": "拒绝",
+			"bubble.you": "你",
+			"bubble.ai": "AI",
+			"bubble.system": "系统",
+			"bubble.assistant": "助手",
+			"rule.required": "该字段为必填项",
+			"rule.email": "请输入有效的邮箱地址",
+			"rule.url": "请输入有效的 URL（http/https）",
+			"rule.number": "请输入数字",
+			"rule.len": "长度须为 {n} 个字符",
+			"rule.min": "至少输入 {n} 个字符",
+			"rule.max": "最多输入 {n} 个字符",
+			"rule.re": "格式不正确",
 			"file.unnamed": "未知文件",
 			"countdown.ended": "已结束",
 			"duration.day": "天",
@@ -95,6 +107,10 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			"select.placeholder": "请选择",
 			"upload.hint": "点击或拖拽文件至此处上传",
 			"upload.browse": "浏览文件",
+			"upload.uploading": "上传中",
+			"upload.done": "已上传",
+			"upload.failed": "上传失败",
+			"upload.retry": "重试",
 			"chart.empty": "暂无数据",
 			"chart.seriesDefault": "系列{n}",
 			"chart.itemDefault": "项目{n}",
@@ -168,6 +184,14 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			"actions.delete": "Delete",
 			"actions.approve": "Approve",
 			"actions.deny": "Deny",
+			"rule.required": "This field is required",
+			"rule.email": "Please enter a valid email address",
+			"rule.url": "Please enter a valid URL (http/https)",
+			"rule.number": "Please enter a number",
+			"rule.len": "Must be exactly {n} characters",
+			"rule.min": "At least {n} characters required",
+			"rule.max": "At most {n} characters allowed",
+			"rule.re": "Invalid format",
 			"file.unnamed": "Unnamed file",
 			"countdown.ended": "Ended",
 			"duration.day": "d",
@@ -200,11 +224,19 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			"agent.thinking": "Thinking",
 			"agent.generating": "Generating",
 			"agent.total": "Total",
+			"bubble.you": "You",
+			"bubble.ai": "AI",
+			"bubble.system": "System",
+			"bubble.assistant": "Assistant",
 			"picker.noMatch": "No matches",
 			"rate.defaultLabel": "Rating",
 			"select.placeholder": "Select...",
 			"upload.hint": "Click or drag files here to upload",
 			"upload.browse": "Browse",
+			"upload.uploading": "Uploading",
+			"upload.done": "Uploaded",
+			"upload.failed": "Upload failed",
+			"upload.retry": "Retry",
 			"chart.empty": "No data",
 			"chart.seriesDefault": "Series {n}",
 			"chart.itemDefault": "Item {n}",
@@ -511,7 +543,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		}
 		return -1;
 	}
-	var i = new Set(/* @__PURE__ */ "form.table.thead.tbody.card.ft.row.col.list.select.radio.checkbox.code.imgs.md.textarea.tabs.tab.accordion.collapse.dialog.btngroup.picker.timeline.steps.drawer.ol.ul.i.item.think.think-chain.think-step.bubble.toolbar.badge-box.dropdown.transfer.callout.cascader.tree.tn.desc.carousel.popover.input-tag.watermark.menu.print-area.chat-input.msg-actions.tool-call.diff.quick-reply.plan.file-tree.ft-folder.terminal.sandbox.test-result.quote.toggle-group.conversations.welcome.welcome-feature.suggestions.attachments.artifact.artifact-code.artifact-preview.scroll-area.sidebar.sidebar-content.sidebar-footer.command.command-group.hover-card.hover-trigger.hover-content.resizable.canvas.canvas-content.chart.ins.p".split("."));
+	var i = new Set(/* @__PURE__ */ "form.table.thead.tbody.card.ft.row.col.list.select.radio.checkbox.code.imgs.md.textarea.tabs.tab.accordion.collapse.dialog.btngroup.picker.timeline.steps.drawer.ol.ul.i.item.think.think-chain.think-step.bubble.toolbar.badge-box.dropdown.transfer.callout.cascader.tree.tn.desc.carousel.popover.input-tag.watermark.menu.print-area.chat-input.msg-actions.tool-call.diff.quick-reply.plan.file-tree.ft-folder.terminal.sandbox.test-result.quote.toggle-group.conversations.welcome.welcome-feature.suggestions.attachments.artifact.artifact-code.artifact-preview.scroll-area.sidebar.sidebar-content.sidebar-footer.command.command-group.hover-card.hover-trigger.hover-content.resizable.canvas.canvas-content.chart.ins.katex.mermaid.p".split("."));
 	function a(e) {
 		if (!e || e.type !== "chart") return !1;
 		var t = e.attrs || {};
@@ -547,7 +579,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		"mark",
 		"sub",
 		"sup"
-	]), d = new Set(/* @__PURE__ */ "stripe.dis.ro.req.chk.multi.disabled.readonly.required.checked.multiple.striped.auto.plain.round.closable.bordered.open.pill.dot.leaf.inline.rounded.container.copy.regenerate.like.dislike.visible.delete.controls.open.active.collapsible.toggle.search.thumb.reset.print.show-total.live.approval.streaming".split(".")), f = null;
+	]), d = new Set(/* @__PURE__ */ "stripe.dis.ro.req.chk.multi.disabled.readonly.required.checked.multiple.striped.auto.plain.round.closable.bordered.open.pill.dot.leaf.inline.rounded.container.copy.regenerate.like.dislike.visible.delete.controls.open.active.collapsible.toggle.search.thumb.reset.print.show-total.live.approval.streaming.range.half.sortable.filter.virtual.lazy.pagination".split(".")), f = null;
 	function p(e) {
 		f = e;
 	}
@@ -656,7 +688,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				for (let e = i - 1; e >= 0 && this.buffer[e] === "\\"; e--) a++;
 				let o = a % 2 == 1 ? i - 1 : i, s = e._rawEmittedLen || 0;
 				if (o > s) {
-					let t = this._unescapeRaw(this.buffer.slice(s, o));
+					let t = this._unescapeRaw(this.buffer.slice(s, o), e.type);
 					if (t) {
 						let n = {
 							type: "_text",
@@ -713,7 +745,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				let e;
 				if (this._isRawContent()) {
 					let t = this.stack[this.stack.length - 1], n = this.streaming && t && t._rawEmittedLen ? t._rawEmittedLen : 0;
-					e = this._unescapeRaw(this.buffer.slice(n).trim());
+					e = this._unescapeRaw(this.buffer.slice(n).trim(), t && t.type);
 				} else e = this.buffer.trim();
 				if (e) {
 					let t = {
@@ -734,12 +766,12 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		_isRawContent() {
 			for (let t = this.stack.length - 1; t >= 0; t--) {
 				var e = this.stack[t].type;
-				if (e === "code" || e === "md" || e === "diff" || e === "terminal" || e === "sandbox" || e === "artifact-code") return !0;
+				if (e === "code" || e === "md" || e === "diff" || e === "terminal" || e === "sandbox" || e === "artifact-code" || e === "katex" || e === "mermaid") return !0;
 			}
 			return !1;
 		}
-		_unescapeRaw(e) {
-			return typeof e != "string" || e.indexOf("\\") === -1 ? e : e.replace(/\\(.)/g, function(e, t) {
+		_unescapeRaw(e, t) {
+			return typeof e != "string" || e.indexOf("\\") === -1 || t === "katex" || t === "md" ? e : e.replace(/\\(.)/g, function(e, t) {
 				return t === "n" ? "\n" : t === "t" ? "	" : t === "r" ? "\r" : t === "\\" ? "\\" : "\\" + t;
 			});
 		}
@@ -748,12 +780,12 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			for (; e-- > 0;) {
 				if (this.state === "TEXT") {
 					if (this._isRawContent()) {
-						let e = this.stack[this.stack.length - 1], t = `[/${e.type}]`, n = this.buffer.indexOf(t);
-						if (n === -1) break;
-						if (n > 0) {
-							let t = this.streaming && e._rawEmittedLen ? e._rawEmittedLen : 0;
-							if (n > t) {
-								let e = this._unescapeRaw(this.buffer.slice(t, n));
+						let e = this.stack[this.stack.length - 1], t = e.type, n = `[/${t}]`, r = this.buffer.indexOf(n);
+						if (r === -1) break;
+						if (r > 0) {
+							let n = this.streaming && e._rawEmittedLen ? e._rawEmittedLen : 0;
+							if (r > n) {
+								let e = this._unescapeRaw(this.buffer.slice(n, r), t);
 								if (e) {
 									let t = {
 										type: "_text",
@@ -764,7 +796,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 									this.streaming && this.stack.length > 0 ? (this.stack[this.stack.length - 1].children.push(t), this.onNode(t)) : this.stack.length > 0 ? this.stack[this.stack.length - 1].children.push(t) : this.onNode(t);
 								}
 							}
-							this._totalOffset += n, this.buffer = this.buffer.slice(n);
+							this._totalOffset += r, this.buffer = this.buffer.slice(r);
 							continue;
 						}
 					}
@@ -903,8 +935,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				"input-tag",
 				"watermark",
 				"badge-box"
-			]), r = i.has(e.type) && !n.has(e.type) && e.attrs.tx, l = e.type === "tn" && e.attrs.leaf !== void 0, d = e.type === "input-tag" && e.attrs.tags, f = r || l || d || o(e) || s(e), p = e.attrs.cols && e.type !== "desc" && e.type !== "suggestions" && e.type !== "chart", m = a(e);
-			m && (e._previewKey = e._dslStart), i.has(e.type) && !p && !f && !m ? this.stack.length >= this.maxDepth ? (console.warn("TokUI Parser: 嵌套深度超过 maxDepth (" + this.maxDepth + ")，按自闭合处理"), this.stack.length > 0 && this.stack[this.stack.length - 1].children.push(e), this.onNode(e)) : (e._stream = "open", this.stack.push(e), this.onNode(e)) : (this.stack.length > 0 && this.stack[this.stack.length - 1].children.push(e), this.onNode(e));
+			]), r = i.has(e.type) && !n.has(e.type) && e.attrs.tx, l = e.type === "tn" && e.attrs.leaf !== void 0, d = e.type === "input-tag" && e.attrs.tags, f = e.type === "katex" && !!e.attrs.f, p = r || l || d || f || o(e) || s(e), m = e.attrs.cols && e.type !== "desc" && e.type !== "suggestions" && e.type !== "chart", h = a(e);
+			h && (e._previewKey = e._dslStart), i.has(e.type) && !m && !p && !h ? this.stack.length >= this.maxDepth ? (console.warn("TokUI Parser: 嵌套深度超过 maxDepth (" + this.maxDepth + ")，按自闭合处理"), this.stack.length > 0 && this.stack[this.stack.length - 1].children.push(e), this.onNode(e)) : (e._stream = "open", this.stack.push(e), this.onNode(e)) : (this.stack.length > 0 && this.stack[this.stack.length - 1].children.push(e), this.onNode(e));
 		}
 		_emitBuffered(e) {
 			if (e.type === "item") for (; this.stack.length > 0 && this.stack[this.stack.length - 1].type === "item";) {
@@ -922,8 +954,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				"input-tag",
 				"watermark",
 				"badge-box"
-			]), r = i.has(e.type) && !n.has(e.type) && e.attrs.tx, c = e.type === "tn" && e.attrs.leaf !== void 0, l = e.type === "input-tag" && e.attrs.tags, d = r || c || l || o(e) || s(e), f = e.attrs.cols && e.type !== "desc" && e.type !== "suggestions" && e.type !== "chart", p = a(e);
-			p && (e._previewKey = e._dslStart), i.has(e.type) && !f && !d && !p ? this.stack.length >= this.maxDepth ? (console.warn("TokUI Parser: 嵌套深度超过 maxDepth (" + this.maxDepth + ")，按自闭合处理"), this.stack.length > 0 ? this.stack[this.stack.length - 1].children.push(e) : this.onNode(e)) : this.stack.push(e) : this.stack.length > 0 ? this.stack[this.stack.length - 1].children.push(e) : this.onNode(e);
+			]), r = i.has(e.type) && !n.has(e.type) && e.attrs.tx, c = e.type === "tn" && e.attrs.leaf !== void 0, l = e.type === "input-tag" && e.attrs.tags, d = e.type === "katex" && !!e.attrs.f, f = r || c || l || d || o(e) || s(e), p = e.attrs.cols && e.type !== "desc" && e.type !== "suggestions" && e.type !== "chart", m = a(e);
+			m && (e._previewKey = e._dslStart), i.has(e.type) && !p && !f && !m ? this.stack.length >= this.maxDepth ? (console.warn("TokUI Parser: 嵌套深度超过 maxDepth (" + this.maxDepth + ")，按自闭合处理"), this.stack.length > 0 ? this.stack[this.stack.length - 1].children.push(e) : this.onNode(e)) : this.stack.push(e) : this.stack.length > 0 ? this.stack[this.stack.length - 1].children.push(e) : this.onNode(e);
 		}
 		startStream() {
 			this.reset();
@@ -1030,7 +1062,58 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			n &&= (clearTimeout(n), null);
 		}, r;
 	}
-	var f = {
+	function f(e, t) {
+		for (var n = String(e ?? ""), r = n.trim() === "", i = String(t || "").split("|").map(function(e) {
+			return e.trim();
+		}).filter(Boolean), a = 0; a < i.length; a++) {
+			var o = i[a], s = o.indexOf(":"), c = s === -1 ? o : o.slice(0, s), l = s === -1 ? "" : o.slice(s + 1);
+			if (!(r && c !== "required")) switch (c) {
+				case "required":
+					if (r) return { name: "required" };
+					break;
+				case "email":
+					if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(n)) return { name: "email" };
+					break;
+				case "url":
+					if (!/^https?:\/\/\S+$/.test(n)) return { name: "url" };
+					break;
+				case "number":
+					if (isNaN(Number(n))) return { name: "number" };
+					break;
+				case "len":
+					var u = parseInt(l, 10);
+					if (u > 0 && n.length !== u) return {
+						name: "len",
+						n: u
+					};
+					break;
+				case "min":
+					var d = parseInt(l, 10);
+					if (d > 0 && n.length < d) return {
+						name: "min",
+						n: d
+					};
+					break;
+				case "max":
+					var f = parseInt(l, 10);
+					if (f > 0 && n.length > f) return {
+						name: "max",
+						n: f
+					};
+					break;
+				case "re":
+					try {
+						if (l && !new RegExp(l).test(n)) return { name: "re" };
+					} catch {
+						console.warn("TokUI: 非法校验正则 \"" + l + "\"，已跳过");
+					}
+					break;
+				default: console.warn("TokUI: 未知校验规则 \"" + c + "\"，已跳过");
+			}
+		}
+		return null;
+	}
+	var p = {
 		img: new Set([
 			"avatar",
 			"rounded",
@@ -1192,7 +1275,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		cascader: new Set(["error", "success"]),
 		upload: new Set(["sm", "lg"]),
 		tree: new Set(["sm", "lg"])
-	}, p = class {
+	}, m = class {
 		constructor(e) {
 			this.registry = {}, this.eventBus = e, this.slotStack = [], this._boundElements = [], this._onError = null, this._onComponentEvent = null;
 		}
@@ -1264,7 +1347,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		_applyVariants(e, t) {
 			var n = t.attrs && t.attrs.v;
 			if (!(!n || !e || e.nodeType !== 1)) {
-				var r = f[t.type];
+				var r = p[t.type];
 				if (r) {
 					var i = e._variantTarget || e;
 					n.split(",").map(function(e) {
@@ -1415,6 +1498,22 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		_reportValidity(e) {
 			return e ? typeof e.reportValidity == "function" ? e.reportValidity() : typeof e.checkValidity == "function" ? e.checkValidity() : !0 : !0;
 		}
+		_validateRuleFields(e) {
+			if (!e || typeof e.querySelectorAll != "function") return !0;
+			var t = null;
+			if (e.querySelectorAll("[data-tokui-rule]").forEach(function(e) {
+				typeof e._tokuiValidate == "function" && e._tokuiValidate() && !t && (t = e);
+			}), t) {
+				var n = t.querySelector("input, textarea, select");
+				if (n && typeof n.focus == "function") try {
+					n.focus();
+				} catch {}
+			}
+			return !t;
+		}
+		_checkFormValidity(e) {
+			return this._validateRuleFields(e) ? this._reportValidity(e) : !1;
+		}
 		_getNodeType(e) {
 			if (e._tokuiType) return e._tokuiType;
 			let t = e.className && e.className.match && e.className.match(/tokui-(\w+)/);
@@ -1453,7 +1552,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 					}
 					var c = function(e) {
 						if (e.preventDefault(), a) {
-							if (!t._reportValidity(a)) return;
+							if (!t._checkFormValidity(a)) return;
 							let n = a.getAttribute("data-tokui-sub"), r = n ? t.eventBus.getHandler(n) : null;
 							r && r(t._collectFormData(a), e, a);
 							return;
@@ -1465,7 +1564,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 								let e = n.getAttribute("data-tokui-form");
 								e && (i = r(n, e));
 							}
-							if (i && n.getAttribute("type") === "submit" && !t._reportValidity(i)) return;
+							if (i && n.getAttribute("type") === "submit" && !t._checkFormValidity(i)) return;
 							o(i ? t._collectFormData(i) : null, e, n);
 						} else t._warnMissingHandler(i);
 					};
@@ -1485,7 +1584,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				let n = e.getAttribute("data-tokui-sub") || e.getAttribute("data-tokui-clk");
 				if (n) {
 					var r = function(r) {
-						if (r.preventDefault(), !t._reportValidity(e)) return;
+						if (r.preventDefault(), !t._checkFormValidity(e)) return;
 						let i = t.eventBus.getHandler(n);
 						i ? i(t._collectFormData(e), r, e) : t._warnMissingHandler(n);
 					};
@@ -1544,7 +1643,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				}
 				return;
 			}
-			if (this._reportValidity(n) && (i ||= n.getAttribute("data-tokui-sub") || n.getAttribute("data-tokui-clk"), i)) {
+			if (this._checkFormValidity(n) && (i ||= n.getAttribute("data-tokui-sub") || n.getAttribute("data-tokui-clk"), i)) {
 				var o = this.eventBus.getHandler(i);
 				o && o(this._collectFormData(n), null, n);
 			}
@@ -1617,16 +1716,17 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			}
 		}
 	};
-	typeof window < "u" && (window.TokUI = window.TokUI || {}, window.TokUI._internal = window.TokUI._internal || {}, window.TokUI._internal.el = s, window.TokUI._internal.VARIANTS = f, window.TokUI._internal.TokUIRenderer = p, window.TokUI._internal.resolveButtonAction = n, window.TokUI._internal.resolveTargetForm = r, window.TokUI._internal.resolvePrintScope = i, window.TokUI._internal.broadcastTokuiReset = a, window.TokUI._internal.parseOnSpec = c, window.TokUI._internal.debounce = d), t !== void 0 && t.exports && (t.exports = {
+	typeof window < "u" && (window.TokUI = window.TokUI || {}, window.TokUI._internal = window.TokUI._internal || {}, window.TokUI._internal.el = s, window.TokUI._internal.VARIANTS = p, window.TokUI._internal.TokUIRenderer = m, window.TokUI._internal.resolveButtonAction = n, window.TokUI._internal.resolveTargetForm = r, window.TokUI._internal.resolvePrintScope = i, window.TokUI._internal.broadcastTokuiReset = a, window.TokUI._internal.parseOnSpec = c, window.TokUI._internal.debounce = d, window.TokUI._internal.evaluateRules = f), t !== void 0 && t.exports && (t.exports = {
 		el: s,
-		TokUIRenderer: p,
-		VARIANTS: f,
+		TokUIRenderer: m,
+		VARIANTS: p,
 		resolveButtonAction: n,
 		resolveTargetForm: r,
 		resolvePrintScope: i,
 		broadcastTokuiReset: a,
 		parseOnSpec: c,
-		debounce: d
+		debounce: d,
+		evaluateRules: f
 	});
 })), g = /* @__PURE__ */ o(((e, t) => {
 	var n = typeof l == "function" ? u().t : window.TokUI && window.TokUI._internal && window.TokUI._internal.t || function(e) {
@@ -7797,11 +7897,11 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			var n = null, r = e._mountRoot;
 			return r && typeof r.querySelector == "function" && (n = r.querySelector("[id=\"" + String(t).replace(/"/g, "\\\"") + "\"]")), n ||= document.getElementById(t), n;
 		}
-		function m(t) {
+		function v(t) {
 			for (var n = t, r = e._mountRoot || null; n && !n._tokuiType && n.parentElement && n.parentElement !== r;) n = n.parentElement;
 			return n || t;
 		}
-		function _(t, n, r) {
+		function y(t, n, r) {
 			if (e._onComponentEvent) try {
 				e._onComponentEvent({
 					type: t,
@@ -7820,7 +7920,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				r.forEach(function(e) {
 					for (var n = u(e); n && typeof n._update != "function";) n = n.parentElement;
 					n && typeof n._update == "function" && (n._update(t), i++);
-				}), _("upd", String(n), {
+				}), y("upd", String(n), {
 					applied: i > 0,
 					targets: r.length,
 					hits: i
@@ -7832,12 +7932,12 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			if (n && typeof document < "u") {
 				var r = !1, i = u(n);
 				if (i) {
-					var a = m(i);
+					var a = v(i);
 					(e.slotStack || []).some(function(e) {
 						return e.el === a || typeof a.contains == "function" && a.contains(e.el);
 					}) ? console.warn("TokUI: del 目标 \"" + n + "\" 正在流式输出中（未闭合），已跳过；请在容器闭合后再发 del") : a.parentNode && (a.parentNode.removeChild(a), r = !0);
 				}
-				_("del", String(n), { removed: r });
+				y("del", String(n), { removed: r });
 			}
 			return document.createTextNode("");
 		}), e.register("ins", (n, r) => {
@@ -7878,20 +7978,20 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 					if (t) {
 						var r = u(t);
 						if (r) {
-							var l = m(r), d, f;
+							var l = v(r), d, f;
 							if (i.into) {
 								var p = l._tokuiType || "";
 								c[p] ? console.warn("TokUI: ins into 不支持结构性容器 \"" + p + "\"（子节点有专用挂载协议），已跳过") : (d = l._slot || l, f = null);
 							} else i.before ? (d = l.parentNode, f = l) : (d = l.parentNode, f = s(l));
 							if (d) {
-								for (var h = []; a.childNodes.length > 0;) h.push(d.insertBefore(a.childNodes[0], f));
-								h.forEach(function(t) {
+								for (var m = []; a.childNodes.length > 0;) m.push(d.insertBefore(a.childNodes[0], f));
+								m.forEach(function(t) {
 									t && t.nodeType === 1 && e.bindEvents(t);
-								}), n = h.length;
+								}), n = m.length;
 							}
 						}
 					}
-					_("ins", String(t || ""), { moved: n });
+					y("ins", String(t || ""), { moved: n });
 				}
 			}
 			var d = t("span", {
@@ -7902,18 +8002,63 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			return d._tokuiType = "ins", d._slot = a, d._streamCloseHook = function() {
 				l(), d.parentNode && d.parentNode.removeChild(d);
 			}, n.children && n.children.length && l(), d;
-		}), e.register("md", (e) => {
+		});
+		function b(e) {
+			var t = p("mermaid");
+			if (!(!t || !e) && (String(e.innerHTML || "").indexOf("tokui-md__mermaid") !== -1 || typeof e.querySelector == "function" && e.querySelector(".tokui-md__mermaid"))) {
+				var n = typeof e.querySelectorAll == "function" ? Array.prototype.slice.call(e.querySelectorAll(".tokui-md__mermaid")) : [], r = [];
+				if (n.forEach(function(e) {
+					if (!e._mermaidDone) {
+						e._mermaidDone = !0;
+						var t = typeof e.querySelector == "function" ? e.querySelector("code") : null;
+						e.textContent = t ? t.textContent : e.textContent, r.push(e);
+					}
+				}), !(n.length && !r.length)) try {
+					if (typeof t.run == "function") {
+						var i = t.run({ nodes: r });
+						i && typeof i.catch == "function" && i.catch(function() {});
+					} else typeof t.init == "function" && t.init(void 0, r);
+				} catch {}
+			}
+		}
+		typeof window < "u" && window.TokUI && window.TokUI._internal && (window.TokUI._internal.runMdMermaid = b, window.TokUI._internal.simpleMarkdown = _, window.TokUI._internal.renderKatexHtml = m), e.register("md", (e) => {
 			let n = t("div", { class: "tokui-md" }), r = "";
-			return r = e.children && e.children.length > 0 ? e.children.map((e) => e.content || "").join("") : e.content || "", r && (n.innerHTML = p(r), f(n)), n._streamCloseHook = function() {
+			return r = e.children && e.children.length > 0 ? e.children.map((e) => e.content || "").join("") : e.content || "", r && (n._rawMd = r, n.innerHTML = _(r), f(n), b(n)), n._streamCloseHook = function() {
 				let e = "";
 				for (let t of Array.from(n.childNodes)) t.nodeType === 3 && (e += t.textContent);
-				e && (n.innerHTML = p(e), f(n));
+				e && (n._rawMd = e, n.innerHTML = _(e), f(n), b(n));
 			}, n._tokuiType = "md", n;
+		}), e.register("katex", (e) => {
+			var n = e.attrs && e.attrs.f, r = !n, i = t("div", { class: "tokui-katex" + (r ? " tokui-katex--block" : " tokui-katex--inline") }), a = function() {
+				return n || (e.children && e.children.length ? e.children.map(function(e) {
+					return e.content || "";
+				}).join("") : e.content || "");
+			}();
+			return a && (i._rawMd = a, i.innerHTML = m(a, r)), i._streamCloseHook = function() {
+				var e = "";
+				for (let t of Array.from(i.childNodes)) t.nodeType === 3 && (e += t.textContent);
+				e && (i._rawMd = e, i.innerHTML = m(e, !0));
+			}, i._slot = i, i._tokuiType = "katex", i;
+		}), e.register("mermaid", (e) => {
+			var n = t("div", { class: "tokui-mermaid" }), r = function() {
+				return e.children && e.children.length ? e.children.map(function(e) {
+					return e.content || "";
+				}).join("") : e.content || "";
+			}, i = function(e) {
+				n.innerHTML = "";
+				var r = t("div", { class: "tokui-md__mermaid" }), i = t("pre", { class: "tokui-code" }), a = t("code", { class: "language-mermaid" }, e);
+				i.appendChild(a), r.appendChild(i), n.appendChild(r), n._rawMd = e, b(n);
+			}, a = r();
+			return a && i(a), n._streamCloseHook = function() {
+				var e = "";
+				for (let t of Array.from(n.childNodes)) t.nodeType === 3 && (e += t.textContent);
+				e && i(e);
+			}, n._slot = n, n._tokuiType = "mermaid", n;
 		});
-		function v(e) {
+		function x(e) {
 			return String(e).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 		}
-		function y(e) {
+		function S(e) {
 			return e.split("\n").map(function(e) {
 				return "<span class=\"code-line\">" + (e || " ") + "</span>";
 			}).join("");
@@ -7923,7 +8068,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			var c = "";
 			c = e.children && e.children.length > 0 ? e.children.map((e) => e.content || "").join("") : e.content || "";
 			function l() {
-				o !== "text" && i[o] ? s.innerHTML = y(a(c, o)) : s.innerHTML = y(v(c));
+				o !== "text" && i[o] ? s.innerHTML = S(a(c, o)) : s.innerHTML = S(x(c));
 			}
 			l(), r.appendChild(s), r._slot = s, r._tokuiType = "code";
 			var u = t("button", {
@@ -8114,23 +8259,23 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				g.textContent = "↓", d.appendChild(g);
 			}
 			return d;
-		}), e.register("bubble", (e, n) => {
-			var r = e.attrs || {}, i = r.role || "ai", a = r.model || "", o = r.time || "", s = t("div", { class: "tokui-bubble tokui-bubble--" + i }), c = t("div", { class: "tokui-bubble__row" }), l = t("span", { class: "tokui-bubble__avatar" });
-			l.textContent = i === "user" ? "You" : "AI", c.appendChild(l);
-			var u = t("div", { class: "tokui-bubble__content" }), d = t("div", { class: "tokui-bubble__header" }), f = t("span", {});
-			if (f.textContent = i === "user" ? "You" : i === "system" ? "System" : "Assistant", d.appendChild(f), a) {
-				var p = t("span", { class: "tokui-badge tokui-badge--info tokui-badge--pill" });
-				p.textContent = a, d.appendChild(p);
+		}), e.register("bubble", (e, r) => {
+			var i = e.attrs || {}, a = i.role || "ai", o = i.model || "", s = i.time || "", c = t("div", { class: "tokui-bubble tokui-bubble--" + a }), l = t("div", { class: "tokui-bubble__row" }), u = t("span", { class: "tokui-bubble__avatar" });
+			u.textContent = n(a === "user" ? "bubble.you" : "bubble.ai"), l.appendChild(u);
+			var d = t("div", { class: "tokui-bubble__content" }), f = t("div", { class: "tokui-bubble__header" }), p = t("span", {});
+			if (p.textContent = n(a === "user" ? "bubble.you" : a === "system" ? "bubble.system" : "bubble.assistant"), f.appendChild(p), o) {
+				var m = t("span", { class: "tokui-badge tokui-badge--info tokui-badge--pill" });
+				m.textContent = o, f.appendChild(m);
 			}
-			u.appendChild(d);
-			var m = t("div", { class: "tokui-bubble__body" });
-			if (n(e.children || []).forEach(function(e) {
-				e && e.nodeType && m.appendChild(e);
-			}), u.appendChild(m), o) {
-				var h = t("div", { class: "tokui-bubble__time" });
-				h.textContent = o, u.appendChild(h);
+			d.appendChild(f);
+			var h = t("div", { class: "tokui-bubble__body" });
+			if (r(e.children || []).forEach(function(e) {
+				e && e.nodeType && h.appendChild(e);
+			}), d.appendChild(h), s) {
+				var g = t("div", { class: "tokui-bubble__time" });
+				g.textContent = s, d.appendChild(g);
 			}
-			return c.appendChild(u), s.appendChild(c), m._slot = m, m._tokuiType = "bubble", s._slot = m, s._tokuiType = "bubble", s;
+			return l.appendChild(d), c.appendChild(l), h._slot = h, h._tokuiType = "bubble", c._slot = h, c._tokuiType = "bubble", c;
 		}), e.register("toolbar", (e, n) => {
 			var r = e.attrs || {}, i = r.pos || "bottom", a = r.align || "right", o = t("div", { class: "tokui-toolbar tokui-toolbar--" + i + " tokui-toolbar--" + a });
 			return n(e.children || []).forEach(function(e) {
@@ -8659,7 +8804,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			});
 			c && (d.id = c);
 			var f = t("div", { class: "tokui-field" });
-			a.l && f.appendChild(t("label", { class: "tokui-label" }, a.l));
+			a.l && f.appendChild(t("label", { class: "tokui-label" + (a.req === void 0 ? "" : " tokui-label--req") }, a.l));
 			var p = t("div", { class: "tokui-input-tag__box" }), m = t("div", {
 				class: "tokui-input-tag__list",
 				role: "list"
@@ -9128,7 +9273,87 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			u && p.addEventListener("input", function() {
 				p.style.height = "auto", p.style.height = p.scrollHeight + "px";
 			});
-			function y() {
+			var y = a.mention || "";
+			if (y) {
+				var b = t("div", {
+					class: "tokui-chat-input__mention",
+					role: "listbox"
+				});
+				b.style.display = "none", f.appendChild(b);
+				var x = [], S = -1, C = null, w = function() {
+					b.style.display = "none", x = [], S = -1, C = null;
+				}, T = function() {
+					var e = p.selectionStart == null ? (p.value || "").length : p.selectionStart, t = (p.value || "").slice(0, e).match(/(^|\s)@([^\s@]*)$/);
+					return t ? {
+						query: t[2],
+						start: e - t[2].length - 1,
+						end: e
+					} : null;
+				}, E = function(e) {
+					var t = x[e];
+					if (!(!t || !C)) {
+						var n = typeof t == "string" ? t : t.v == null ? t.tx : t.v, r = typeof t == "string" ? t : t.tx == null ? t.v : t.tx, i = p.value || "";
+						p.value = i.slice(0, C.start) + "@" + r + " " + i.slice(C.end);
+						var o = C.start + String(r).length + 2;
+						typeof p.setSelectionRange == "function" && p.setSelectionRange(o, o), g("mention", {
+							value: n,
+							name: a.n || void 0
+						}), w(), typeof p.focus == "function" && p.focus();
+					}
+				}, D = function(e) {
+					if (b.innerHTML = "", x = e.slice(0, 8), !x.length) {
+						w();
+						return;
+					}
+					S = 0, x.forEach(function(e, n) {
+						var r = typeof e == "string" ? e : e.tx == null ? e.v : e.tx, i = t("div", {
+							class: "tokui-chat-input__mention-item" + (n === 0 ? " tokui-chat-input__mention-item--active" : ""),
+							role: "option"
+						}, r);
+						i.addEventListener("mousedown", function(e) {
+							e && e.preventDefault && e.preventDefault(), E(n);
+						}), b.appendChild(i);
+					}), b.style.display = "";
+				};
+				p.addEventListener("keydown", function(e) {
+					if (b.style.display !== "none") if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+						e.preventDefault && e.preventDefault(), e._tokuiMentionHandled = !0, S = (S + (e.key === "ArrowDown" ? 1 : -1) + x.length) % x.length;
+						for (var t = 0; t < b.childNodes.length; t++) {
+							var n = b.childNodes[t];
+							n.classList && (t === S ? n.classList.add("tokui-chat-input__mention-item--active") : n.classList.remove("tokui-chat-input__mention-item--active"));
+						}
+					} else e.key === "Enter" || e.key === "Tab" ? (e.preventDefault && e.preventDefault(), e._tokuiMentionHandled = !0, E(S)) : e.key === "Escape" && (e._tokuiMentionHandled = !0, w());
+				}), p.addEventListener("input", function() {
+					var t = T();
+					if (!t) {
+						w();
+						return;
+					}
+					if (e.eventBus) {
+						var n = e.eventBus.getHandler(y);
+						if (!n) {
+							e._warnMissingHandler(y), w();
+							return;
+						}
+						C = t;
+						var r;
+						try {
+							r = n({ value: t.query });
+						} catch (e) {
+							console.warn("TokUI: mention 数据源异常", e), w();
+							return;
+						}
+						r && typeof r.then == "function" ? r.then(function(e) {
+							C && C.query === t.query && Array.isArray(e) && D(e);
+						}).catch(function() {
+							w();
+						}) : Array.isArray(r) ? D(r) : w();
+					}
+				}), p.addEventListener("blur", function() {
+					setTimeout(w, 150);
+				});
+			}
+			function O() {
 				if (!c) {
 					var t = p.value || "";
 					if (t.trim()) {
@@ -9141,9 +9366,9 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				}
 			}
 			return p.addEventListener("keydown", function(e) {
-				e.key === "Enter" && !e.shiftKey && (e.preventDefault(), y());
+				e._tokuiMentionHandled || e.key === "Enter" && !e.shiftKey && (e.preventDefault(), O());
 			}), h.addEventListener("click", function() {
-				y();
+				O();
 			}), f._update = function(e) {
 				e.dis !== void 0 && (c = !!e.dis, c ? (p.setAttribute("disabled", ""), p.classList.add("tokui-chat-input__textarea--disabled"), h.setAttribute("disabled", ""), h.classList.add("tokui-chat-input__send--disabled")) : (p.removeAttribute("disabled"), p.classList.remove("tokui-chat-input__textarea--disabled"), h.removeAttribute("disabled"), h.classList.remove("tokui-chat-input__send--disabled"))), e.streaming !== void 0 && (e.streaming !== "false" && e.streaming !== !1 ? f.classList.add("tokui-chat-input--streaming") : f.classList.remove("tokui-chat-input--streaming"));
 			}, f._slot = p, f._tokuiType = "chat-input", f;
@@ -9344,7 +9569,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			}
 			return s.appendChild(l), s;
 		});
-		function b(e, n) {
+		function C(e, n) {
 			e.innerHTML = "";
 			var r = n.split("\n"), i = 0, a = 0;
 			r.forEach(function(n) {
@@ -9371,7 +9596,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				return e.content || "";
 			}).join("") : e.content || "";
 			function u() {
-				b(c, l);
+				C(c, l);
 			}
 			return u(), i.appendChild(c), i._slot = c, i._tokuiType = "diff", i._streamAppendHook = function(e) {
 				e && e.type === "_text" && e.content && (l += e.content, u());
@@ -9493,22 +9718,32 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				c.textContent = i, a.appendChild(c);
 			}
 			return a;
-		}), e.register("terminal", (e, n) => {
-			var r = e.attrs || {}, i = r.title || "Terminal", a = r.status || "", o = t("div", { class: "tokui-terminal" + (a && a !== "0" ? " tokui-terminal--error" : "") }), s = t("div", { class: "tokui-terminal__titlebar" }), c = t("span", { class: "tokui-terminal__dots" });
+		}), e.register("terminal", (e, r) => {
+			var i = e.attrs || {}, a = i.title || "Terminal", o = i.status || "", s = t("div", { class: "tokui-terminal" + (o && o !== "0" ? " tokui-terminal--error" : "") }), c = t("div", { class: "tokui-terminal__titlebar" }), l = t("span", { class: "tokui-terminal__dots" });
 			[
 				"🔴",
 				"🟡",
 				"🟢"
 			].forEach(function(e) {
 				var n = t("span", { class: "tokui-terminal__dot" });
-				n.textContent = e, c.appendChild(n);
-			}), s.appendChild(c);
-			var l = t("span", { class: "tokui-terminal__title" });
-			l.textContent = i, s.appendChild(l), o.appendChild(s);
-			var u = t("div", { class: "tokui-terminal__content" });
-			return e.content && (u.textContent = e.content), n(e.children || []).forEach(function(e) {
-				e && e.nodeType && u.appendChild(e);
-			}), o.appendChild(u), o._slot = u, o._tokuiType = "terminal", o;
+				n.textContent = e, l.appendChild(n);
+			}), c.appendChild(l);
+			var u = t("span", { class: "tokui-terminal__title" });
+			u.textContent = a, c.appendChild(u), s.appendChild(c);
+			var d = t("div", { class: "tokui-terminal__content" });
+			e.content && (d.textContent = e.content), r(e.children || []).forEach(function(e) {
+				e && e.nodeType && d.appendChild(e);
+			}), s.appendChild(d);
+			var f = t("button", {
+				class: "tokui-terminal__copy",
+				type: "button"
+			});
+			return f.textContent = n("actions.copy"), f.addEventListener("click", function() {
+				var e = d.textContent || "";
+				typeof navigator < "u" && navigator.clipboard && navigator.clipboard.writeText(e), f.textContent = n("common.copied"), f.classList.add("tokui-terminal__copy--done"), setTimeout(function() {
+					f.textContent = n("actions.copy"), f.classList.remove("tokui-terminal__copy--done");
+				}, 2e3);
+			}), c.appendChild(f), s._slot = d, s._tokuiType = "terminal", s;
 		}), e.register("shimmer", (e) => {
 			var n = e.attrs || {}, r = n.t || "text", i = parseInt(n.rows) || 3, a = t("div", { class: "tokui-shimmer tokui-shimmer--" + r });
 			if (r === "card") {
@@ -9696,7 +9931,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				e && e.nodeType && c.appendChild(e);
 			}), i.appendChild(c), i._slot = c, i._tokuiType = "test-result", i;
 		});
-		function x(e) {
+		function w(e) {
 			var n = e.attrs || {}, r = n.status || "pass", i = t("div", {
 				class: "tokui-test-case tokui-test-case--" + r,
 				"data-tokui-tag": e.type
@@ -9717,7 +9952,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			}
 			return i;
 		}
-		e.register("test-case", (e) => x(e)), e.register("case", (e) => x(e)), e.register("conversations", (r, i) => {
+		e.register("test-case", (e) => w(e)), e.register("case", (e) => w(e)), e.register("conversations", (r, i) => {
 			var a = r.attrs || {}, o = a.clk || "", s = a.act || "", c = t("div", {
 				class: "tokui-conversations",
 				role: "list"
@@ -9727,26 +9962,26 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			if (u.length === 0) return d = t("div", { class: "tokui-conversations__empty" }), d.textContent = n("chat.emptySessions"), c.appendChild(d), c._slot = c, c._tokuiType = "conversations", c._convHandlerName = o, c._convActiveAct = s, c._streamCloseHook = function() {
 				c.querySelector(".tokui-conv") && d && d.parentNode && d.parentNode.removeChild(d);
 			}, c;
-			var f = C(u);
+			var f = E(u);
 			return f.forEach(function(e) {
 				if (f.length > 1) {
 					var n = t("div", { class: "tokui-conversations__group-header" });
 					n.textContent = e.label, c.appendChild(n);
 				}
 				e.items.forEach(function(e) {
-					var t = w(e, o, s, c, l);
+					var t = D(e, o, s, c, l);
 					c.appendChild(t);
 				});
 			}), c._slot = c, c._tokuiType = "conversations", c;
-		}), e.register("conv", (e) => w(e, "", "", null, null));
-		function S(e) {
+		}), e.register("conv", (e) => D(e, "", "", null, null));
+		function T(e) {
 			return /^\d{1,2}:\d{2}$/.test(e);
 		}
-		function C(e) {
+		function E(e) {
 			var t = [], r = [], i = [];
 			e.forEach(function(e) {
 				var n = e.attrs && e.attrs.time || "";
-				S(n) ? t.push(e) : n === "昨天" ? r.push(e) : i.push(e);
+				T(n) ? t.push(e) : n === "昨天" ? r.push(e) : i.push(e);
 			});
 			var a = [];
 			return t.length && a.push({
@@ -9763,7 +9998,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				items: e
 			}];
 		}
-		function w(e, r, i, a, o) {
+		function D(e, r, i, a, o) {
 			var s = e.attrs || {}, c = s.tt || "", l = s.time || "", u = s.id || c, d = s.active === !0 || s.active === "true";
 			!d && i && s.act && s.act === i && (d = !0);
 			var f = ["tokui-conv"];
@@ -9840,7 +10075,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			}
 			return l._slot = h, l._tokuiType = "welcome", l;
 		});
-		function T(e) {
+		function O(e) {
 			var n = e.attrs || {}, r = n.tt || "", i = n.tx || "", a = n.i || "code", o = n.clk || "", s = {
 				code: "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"16 18 22 12 16 6\"/><polyline points=\"8 6 2 12 8 18\"/></svg>",
 				chart: "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"20\" x2=\"18\" y2=\"10\"/><line x1=\"12\" y1=\"20\" x2=\"12\" y2=\"4\"/><line x1=\"6\" y1=\"20\" x2=\"6\" y2=\"14\"/></svg>",
@@ -9872,7 +10107,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			}
 			return l.appendChild(d), l._tokuiType = "welcome-feature", l;
 		}
-		e.register("welcome-feature", (e) => T(e)), e.register("feature", (e) => T(e)), e.register("attachments", (e, n) => {
+		e.register("welcome-feature", (e) => O(e)), e.register("feature", (e) => O(e)), e.register("attachments", (e, n) => {
 			var r = (e.attrs || {}).clk || "", i = t("div", { class: "tokui-attachments" });
 			return r && i.setAttribute("data-tokui-clk", r), n(e.children || []).forEach(function(e) {
 				e && e.nodeType && i.appendChild(e);
@@ -9956,20 +10191,20 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				"aria-label": "Close"
 			});
 			h.innerHTML = "&times;", u.appendChild(h), l.appendChild(u);
-			var g = t("div", { class: "tokui-artifact__code" }), _ = "", b = (n.children || []).filter(function(e) {
+			var g = t("div", { class: "tokui-artifact__code" }), _ = "", v = (n.children || []).filter(function(e) {
 				return e.type === "artifact-code";
 			});
-			b.length > 0 && (_ = (b[0].children || []).map(function(e) {
+			v.length > 0 && (_ = (v[0].children || []).map(function(e) {
 				return e.content || "";
 			}).join(""));
-			var x = t("pre", { class: "tokui-code" }), S = t("code", { class: "language-" + c });
-			c !== "text" && i[c] ? S.innerHTML = y(a(_, c)) : S.innerHTML = y(v(_)), x.appendChild(S), g.appendChild(x);
+			var y = t("pre", { class: "tokui-code" }), b = t("code", { class: "language-" + c });
+			c !== "text" && i[c] ? b.innerHTML = S(a(_, c)) : b.innerHTML = S(x(_)), y.appendChild(b), g.appendChild(y);
 			var C = t("button", {
 				class: "tokui-artifact__code-copy",
 				type: "button"
 			});
 			C.textContent = "Copy", C.addEventListener("click", function() {
-				var e = S.textContent || "";
+				var e = b.textContent || "";
 				typeof navigator < "u" && navigator.clipboard && navigator.clipboard.writeText(e), C.textContent = "Copied", C.classList.add("tokui-artifact__code-copy--done"), setTimeout(function() {
 					C.textContent = "Copy", C.classList.remove("tokui-artifact__code-copy--done");
 				}, 2e3);
@@ -10015,7 +10250,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			function j() {
 				k = !1, document.removeEventListener("mousemove", A), document.removeEventListener("mouseup", j);
 			}
-			return l._slot = S, l._tokuiType = "artifact", l._artifactCode = _, setTimeout(function() {
+			return l._slot = b, l._tokuiType = "artifact", l._artifactCode = _, setTimeout(function() {
 				l.querySelectorAll(".tokui-artifact-preview-standalone").forEach(function(e) {
 					e.parentNode && e.parentNode.removeChild(e);
 				});
@@ -10037,7 +10272,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 					}
 					t ||= l._artifactCode || "";
 				}
-				c !== "text" && i[c] ? S.innerHTML = y(a(t, c)) : S.innerHTML = y(v(t)), l._artifactCode = t;
+				c !== "text" && i[c] ? b.innerHTML = S(a(t, c)) : b.innerHTML = S(x(t)), l._artifactCode = t;
 				var u = "";
 				u = c === "html" ? t : "<pre style=\"margin:0;padding:16px;font-family:monospace;font-size:13px;white-space:pre-wrap;word-break:break-word;\">" + t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;") + "</pre>", T.setAttribute("srcdoc", u);
 				var d = l.querySelector(".tokui-artifact-preview-standalone");
@@ -10200,7 +10435,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				g(), y(d.value || "");
 			}, o;
 		});
-		function E(e) {
+		function k(e) {
 			var n = e.attrs || {}, r = n.tx || "", i = n.v || r, a = t("div", {
 				class: "tokui-command__item",
 				role: "option",
@@ -10244,7 +10479,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				}), a.classList.add("tokui-command__item--selected"), a.setAttribute("aria-selected", "true"));
 			}), a;
 		}
-		typeof window < "u" && window.TokUI && window.TokUI._internal && (window.TokUI._internal.buildCommandItem = E), e.register("command-group", (e, n) => {
+		typeof window < "u" && window.TokUI && window.TokUI._internal && (window.TokUI._internal.buildCommandItem = k), e.register("command-group", (e, n) => {
 			var r = (e.attrs || {}).tt || "", i = t("div", {
 				class: "tokui-command__group",
 				role: "group"
@@ -10257,7 +10492,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			return n(e.children || []).forEach(function(e) {
 				e && e.nodeType && i.appendChild(e);
 			}), i._slot = i, i._tokuiType = "command-group", i;
-		}), e.register("command-item", (e) => E(e)), e.register("canvas", (e, n) => {
+		}), e.register("command-item", (e) => k(e)), e.register("canvas", (e, n) => {
 			var r = e.attrs || {}, i = r.tt || "Canvas", a = r.pos || "right", o = parseInt(r.w) || 400, s = r.open !== void 0, c = r.closable === void 0 || r.closable === !0, l = ["tokui-canvas", "tokui-canvas--" + a];
 			s && l.push("tokui-canvas--open");
 			var u = t("div", { class: l.join(" ") });
@@ -10351,6 +10586,20 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		});
 	}
 	function p(e) {
+		return typeof window < "u" && window && window[e] ? window[e] : null;
+	}
+	function m(e, t) {
+		var n = null;
+		if (typeof window < "u" && window.katex && (n = window.katex), n && typeof n.renderToString == "function") try {
+			var r = n.renderToString(e, {
+				throwOnError: !1,
+				displayMode: t
+			});
+			return t ? "<div class=\"tokui-md__math tokui-md__math--block\">" + r + "</div>" : "<span class=\"tokui-md__math\">" + r + "</span>";
+		} catch {}
+		return (t ? "$$" + e + "$$" : "$" + e + "$").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+	}
+	function _(e) {
 		if (!e) return "";
 		function t(e) {
 			return e.trim().replace(/^\|/, "").replace(/\|$/, "").split("|").map(function(e) {
@@ -10373,74 +10622,101 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			}), e;
 		}
 		var s = [];
-		return e = e.replace(/```(\w*)\n([\s\S]*?)```/g, function(e, t, n) {
+		e = e.replace(/```(\w*)\n([\s\S]*?)```/g, function(e, t, n) {
 			var r = s.length;
 			return s.push({
 				lang: t,
 				code: n.replace(/\n$/, "")
 			}), "CODEFENCE" + r + "";
-		}), e = e.replace(/^(?:\*{3,}|-{3,}|_{3,})\s*$/gm, "TOKUIHR"), e.split(/\n{2,}/).map(function(e) {
+		});
+		var c = [];
+		e = e.replace(/\$\$([\s\S]+?)\$\$/g, function(e, t) {
+			var n = c.length;
+			return c.push({
+				tex: t,
+				display: !0
+			}), "TOKUIMATH" + n + "";
+		}), e = e.replace(/\$([^\s$](?:[^$\n]*[^\s$])?)\$(?!\d)/g, function(e, t) {
+			var n = c.length;
+			return c.push({
+				tex: t,
+				display: !1
+			}), "TOKUIMATH" + n + "";
+		});
+		function l(e) {
+			return m(e.tex, e.display);
+		}
+		function u(e) {
+			return e.replace(/\x02TOKUIMATH(\d+)\x03/g, function(e, t) {
+				return l(c[parseInt(t)]);
+			});
+		}
+		return e = e.replace(/^(?:\*{3,}|-{3,}|_{3,})\s*$/gm, "TOKUIHR"), e.split(/\n{2,}/).map(function(e) {
 			if (e = e.trim(), !e) return "";
 			var r = e.match(/^\x02CODEFENCE(\d+)\x03$/);
 			if (r) {
-				var c = s[parseInt(r[1])], l = c.lang || "text", u = i[l] ? a(c.code, l) : c.code.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-				return "<pre class=\"tokui-code\"><code class=\"language-" + l + "\">" + u + "</code></pre>";
-			}
-			e = o(e);
-			for (var d = e.split("\n"), f = [], p = !1, m = !1, h = !1, g = !1, _ = -1, v = 0; v < d.length; v++) if (d[v].trim().indexOf("|") === 0) {
-				_ = v;
+				var d = s[parseInt(r[1])], f = d.lang || "text";
+				if (f === "mermaid") return "<div class=\"tokui-md__mermaid\"><pre class=\"tokui-code\"><code class=\"language-mermaid\">" + d.code.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;") + "</code></pre></div>";
+				var p = i[f] ? a(d.code, f) : d.code.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+				return "<pre class=\"tokui-code\"><code class=\"language-" + f + "\">" + p + "</code></pre>";
+			}
+			var m = e.match(/^\x02TOKUIMATH(\d+)\x03$/);
+			if (m && c[parseInt(m[1])].display) return l(c[parseInt(m[1])]);
+			e = o(e), e = u(e);
+			for (var h = e.split("\n"), g = [], _ = !1, v = !1, y = !1, b = !1, x = -1, S = 0; S < h.length; S++) if (h[S].trim().indexOf("|") === 0) {
+				x = S;
 				break;
 			}
-			if (_ !== -1) {
-				for (var y = [], b = _, x = _; x < d.length && d[x].trim().indexOf("|") === 0; x++) y.push(d[x]), b = x;
-				if (y.length >= 2 && /^\|[\s\-:|]+\|$/.test(y[1].trim())) {
-					for (var S = 0; S < _; S++) F(d[S]);
-					g = !0;
-					for (var C = n(y[1]), w = "<table class=\"tokui-md-table\"><thead><tr>", T = t(y[0]), E = 0; E < T.length; E++) {
-						var D = C[E] || "left";
-						w += "<th style=\"text-align:" + D + "\">" + T[E] + "</th>";
+			if (x !== -1) {
+				for (var C = [], w = x, T = x; T < h.length && h[T].trim().indexOf("|") === 0; T++) C.push(h[T]), w = T;
+				if (C.length >= 2 && /^\|[\s\-:|]+\|$/.test(C[1].trim())) {
+					for (var E = 0; E < x; E++) z(h[E]);
+					b = !0;
+					for (var D = n(C[1]), O = "<table class=\"tokui-md-table\"><thead><tr>", k = t(C[0]), A = 0; A < k.length; A++) {
+						var j = D[A] || "left";
+						O += "<th style=\"text-align:" + j + "\">" + k[A] + "</th>";
 					}
-					w += "</tr></thead><tbody>";
-					for (var O = 2; O < y.length; O++) {
-						var k = t(y[O]);
-						w += "<tr>";
-						for (var A = 0; A < k.length; A++) {
-							var j = C[A] || "left";
-							w += "<td style=\"text-align:" + j + "\">" + k[A] + "</td>";
+					O += "</tr></thead><tbody>";
+					for (var M = 2; M < C.length; M++) {
+						var N = t(C[M]);
+						O += "<tr>";
+						for (var P = 0; P < N.length; P++) {
+							var F = D[P] || "left";
+							O += "<td style=\"text-align:" + F + "\">" + N[P] + "</td>";
 						}
-						w += "</tr>";
+						O += "</tr>";
 					}
-					w += "</tbody></table>", f.push(w);
-					for (var M = b + 1; M < d.length; M++) F(d[M]);
-					p && f.push("</ul>"), m && f.push("</ol>"), h && f.push("</blockquote>");
-					var N = f.join("");
-					return g ? N : "<p>" + N + "</p>";
-				}
-			}
-			for (var P = 0; P < d.length; P++) F(d[P]);
-			p && f.push("</ul>"), m && f.push("</ol>"), h && f.push("</blockquote>");
-			var N = f.join("");
-			if (!g) return "<p>" + N + "</p>";
-			return N;
-			function F(e) {
+					O += "</tbody></table>", g.push(O);
+					for (var I = w + 1; I < h.length; I++) z(h[I]);
+					_ && g.push("</ul>"), v && g.push("</ol>"), y && g.push("</blockquote>");
+					var L = g.join("");
+					return b ? L : "<p>" + L + "</p>";
+				}
+			}
+			for (var R = 0; R < h.length; R++) z(h[R]);
+			_ && g.push("</ul>"), v && g.push("</ol>"), y && g.push("</blockquote>");
+			var L = g.join("");
+			if (!b) return "<p>" + L + "</p>";
+			return L;
+			function z(e) {
 				if (e.trim() === "TOKUIHR" || /^(\*{3,}|-{3,}|_{3,})\s*$/.test(e.trim())) {
-					p &&= (f.push("</ul>"), !1), m &&= (f.push("</ol>"), !1), h &&= (f.push("</blockquote>"), !1), g = !0, f.push("<hr class=\"tokui-md__hr\">");
+					_ &&= (g.push("</ul>"), !1), v &&= (g.push("</ol>"), !1), y &&= (g.push("</blockquote>"), !1), b = !0, g.push("<hr class=\"tokui-md__hr\">");
 					return;
 				}
 				if (e.match(/^&gt;\s*/)) {
-					p &&= (f.push("</ul>"), !1), m &&= (f.push("</ol>"), !1), h ||= (f.push("<blockquote class=\"tokui-md__quote\">"), !0), g = !0;
+					_ &&= (g.push("</ul>"), !1), v &&= (g.push("</ol>"), !1), y ||= (g.push("<blockquote class=\"tokui-md__quote\">"), !0), b = !0;
 					var t = e.replace(/^&gt;\s*/, "");
-					f.push("<p>" + t + "</p>");
+					g.push("<p>" + t + "</p>");
 					return;
 				}
-				if (h && !e.match(/^&gt;\s*/) && (f.push("</blockquote>"), h = !1), e.match(/^### /)) p &&= (f.push("</ul>"), !1), m &&= (f.push("</ol>"), !1), h &&= (f.push("</blockquote>"), !1), g = !0, f.push(e.replace(/^### (.+)$/, "<h3>$1</h3>"));
-				else if (e.match(/^## /)) p &&= (f.push("</ul>"), !1), m &&= (f.push("</ol>"), !1), h &&= (f.push("</blockquote>"), !1), g = !0, f.push(e.replace(/^## (.+)$/, "<h2>$1</h2>"));
-				else if (e.match(/^# /)) p &&= (f.push("</ul>"), !1), m &&= (f.push("</ol>"), !1), h &&= (f.push("</blockquote>"), !1), g = !0, f.push(e.replace(/^# (.+)$/, "<h1>$1</h1>"));
+				if (y && !e.match(/^&gt;\s*/) && (g.push("</blockquote>"), y = !1), e.match(/^### /)) _ &&= (g.push("</ul>"), !1), v &&= (g.push("</ol>"), !1), y &&= (g.push("</blockquote>"), !1), b = !0, g.push(e.replace(/^### (.+)$/, "<h3>$1</h3>"));
+				else if (e.match(/^## /)) _ &&= (g.push("</ul>"), !1), v &&= (g.push("</ol>"), !1), y &&= (g.push("</blockquote>"), !1), b = !0, g.push(e.replace(/^## (.+)$/, "<h2>$1</h2>"));
+				else if (e.match(/^# /)) _ &&= (g.push("</ul>"), !1), v &&= (g.push("</ol>"), !1), y &&= (g.push("</blockquote>"), !1), b = !0, g.push(e.replace(/^# (.+)$/, "<h1>$1</h1>"));
 				else if (e.match(/^- \[[ xX]\] /)) {
-					m &&= (f.push("</ol>"), !1), p ||= (f.push("<ul class=\"tokui-md__tasks\">"), !0), g = !0;
+					v &&= (g.push("</ol>"), !1), _ ||= (g.push("<ul class=\"tokui-md__tasks\">"), !0), b = !0;
 					var n = /^- \[[xX]\] /.test(e), r = e.replace(/^- \[[xX ]\] /, "");
-					f.push("<li class=\"tokui-md__task\"><input type=\"checkbox\" disabled" + (n ? " checked" : "") + ">" + r + "</li>");
-				} else e.match(/^- /) ? (m &&= (f.push("</ol>"), !1), p ||= (f.push("<ul>"), !0), g = !0, f.push(e.replace(/^- (.+)$/, "<li>$1</li>"))) : e.match(/^\d+\. /) ? (p &&= (f.push("</ul>"), !1), m ||= (f.push("<ol>"), !0), g = !0, f.push(e.replace(/^\d+\. (.+)$/, "<li>$1</li>"))) : (p &&= (f.push("</ul>"), !1), m &&= (f.push("</ol>"), !1), f.push(e));
+					g.push("<li class=\"tokui-md__task\"><input type=\"checkbox\" disabled" + (n ? " checked" : "") + ">" + r + "</li>");
+				} else e.match(/^- /) ? (v &&= (g.push("</ol>"), !1), _ ||= (g.push("<ul>"), !0), b = !0, g.push(e.replace(/^- (.+)$/, "<li>$1</li>"))) : e.match(/^\d+\. /) ? (_ &&= (g.push("</ul>"), !1), v ||= (g.push("<ol>"), !0), b = !0, g.push(e.replace(/^\d+\. (.+)$/, "<li>$1</li>"))) : (_ &&= (g.push("</ul>"), !1), v &&= (g.push("</ol>"), !1), g.push(e));
 			}
 		}).join("");
 	}
@@ -10450,7 +10726,10 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		highlightCode: a
 	});
 })), C = /* @__PURE__ */ o(((e, t) => {
-	function n(e, t, n) {
+	var n = typeof l == "function" ? u().t : window.TokUI && window.TokUI._internal && window.TokUI._internal.t || function(e) {
+		return e;
+	};
+	function r(e, t, n) {
 		let r = t("div", {});
 		return r.style.display = "inline-flex", r.style.gap = "6px", r.style.alignItems = "center", e.split("|").forEach((e) => {
 			let i = e.trim();
@@ -10486,15 +10765,15 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			o && p.appendChild(t("span", { class: "tokui-tbtn__text" }, o)), r.appendChild(p);
 		}), r;
 	}
-	function r(e) {
-		let { el: t } = typeof l == "function" ? h() : window.TokUI._internal, r = typeof l == "function" ? m().parseTag : window.TokUI._internal.parseTag, i = typeof l == "function" ? v().iconSvg : window.TokUI._internal.iconSvg;
-		function a(t) {
+	function i(e) {
+		let { el: t } = typeof l == "function" ? h() : window.TokUI._internal, i = typeof l == "function" ? m().parseTag : window.TokUI._internal.parseTag, a = typeof l == "function" ? v().iconSvg : window.TokUI._internal.iconSvg;
+		function o(t) {
 			let n = t.match(/^\[([a-zA-Z][\w-]*)\b([\s\S]*)$/);
 			if (!n) return null;
-			let i = (n[1] + (n[2] || "")).replace(/\]\s*$/, "").trim();
-			if (!i) return null;
+			let r = (n[1] + (n[2] || "")).replace(/\]\s*$/, "").trim();
+			if (!r) return null;
 			try {
-				let t = r(i);
+				let t = i(r);
 				if (!t || !t.type) return null;
 				let n = e.render(t);
 				return n && n.nodeType ? n : null;
@@ -10502,7 +10781,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				return null;
 			}
 		}
-		let o = {
+		let s = {
 			chk: {
 				label: "",
 				cls: "tokui-col-chk"
@@ -10512,38 +10791,236 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				cls: "tokui-col-seq"
 			}
 		};
-		function s(e) {
-			var t = T(e), n = t.text, r = n.indexOf(":");
+		function c(e) {
+			var t = j(e), n = t.text, r = n.indexOf(":");
 			return {
 				name: r > 0 ? n.slice(0, r) : n,
 				align: t.align,
 				color: t.color
 			};
 		}
-		let c = [], u = [], d = [], f = 0, p = null;
-		function g(e) {
+		let u = [], d = [], f = [], p = 0, g = null;
+		function _(e) {
 			let t = e.querySelector(".tokui-chk-all");
 			if (!t) return;
 			let n = e.querySelectorAll(".tokui-chk-row"), r = e.querySelectorAll(".tokui-chk-row:checked");
 			t.checked = n.length > 0 && r.length === n.length, t.indeterminate = r.length > 0 && r.length < n.length;
 		}
-		e.register("table", (e, n) => {
-			let r = {
+		function y(e) {
+			return Array.prototype.slice.call(e.children).filter(function(e) {
+				return e.tagName === "TD";
+			});
+		}
+		function b(e, t) {
+			for (var n = y(e), r = 0, i = 0; i < n.length; i++) {
+				var a = parseInt(n[i].getAttribute("colspan"), 10) || 1;
+				if (t >= r && t < r + a) return (n[i].textContent || "").trim();
+				r += a;
+			}
+			return "";
+		}
+		function x(e, t) {
+			var n = /^-?\d+(\.\d+)?$/.test(e) ? parseFloat(e) : NaN, r = /^-?\d+(\.\d+)?$/.test(t) ? parseFloat(t) : NaN;
+			return !isNaN(n) && !isNaN(r) ? n - r : String(e).localeCompare(String(t));
+		}
+		function S(e) {
+			var t = Array.prototype.slice.call(e.children).filter(function(e) {
+				return e.tagName === "TR" && !e.classList.contains("tokui-table__filter-row");
+			}), n = t[t.length - 1];
+			if (!n) return [];
+			var r = [], i = 0;
+			return Array.prototype.slice.call(n.children).forEach(function(e) {
+				e.tagName === "TH" && (r.push({
+					th: e,
+					col: i
+				}), i += parseInt(e.getAttribute("colspan"), 10) || 1);
+			}), r;
+		}
+		function C(r, i, a) {
+			if (!r || !r._tokuiDataCfg) return;
+			var o = r._tokuiDataCfg, s = r._tokuiData;
+			s || (s = {
+				sortCol: -1,
+				sortDir: "",
+				filters: {},
+				page: 1,
+				pageSize: o.pageSize,
+				thead: null,
+				tbody: null,
+				pager: null,
+				sortWired: !1,
+				filterBuilt: !1,
+				tbodyHooked: !1,
+				_applying: !1
+			}, r._tokuiData = s), i === "thead" && (s.thead = a), i === "tbody" && (s.tbody = a);
+			function c() {
+				return s.tbody ? Array.prototype.slice.call(s.tbody.children).filter(function(e) {
+					return e.tagName === "TR";
+				}) : [];
+			}
+			function l(e) {
+				for (var t in s.filters) if (Object.prototype.hasOwnProperty.call(s.filters, t) && b(e, parseInt(t, 10)).toLowerCase().indexOf(String(s.filters[t]).toLowerCase()) === -1) return !1;
+				return !0;
+			}
+			function u() {
+				return c().filter(l);
+			}
+			function d() {
+				if (!(!s.tbody || s.sortCol < 0 || !s.sortDir)) {
+					var e = c(), t = s.sortDir === "desc" ? -1 : 1, n = s.sortCol;
+					e.sort(function(e, r) {
+						return t * x(b(e, n), b(r, n));
+					}), s._applying = !0, e.forEach(function(e) {
+						s.tbody.insertBefore(e, null);
+					}), s._applying = !1;
+				}
+			}
+			s.resort = d;
+			function f() {
+				if (s.tbody) {
+					var e = [];
+					if (c().forEach(function(t) {
+						l(t) ? e.push(t) : t.style.display = "none";
+					}), o.pagination) {
+						var t = Math.max(1, Math.ceil(e.length / s.pageSize));
+						s.page > t && (s.page = t);
+						var n = (s.page - 1) * s.pageSize, r = n + s.pageSize;
+						e.forEach(function(e, t) {
+							e.style.display = t >= n && t < r ? "" : "none";
+						}), m(e.length);
+					} else e.forEach(function(e) {
+						e.style.display = "";
+					});
+				}
+			}
+			function p(e) {
+				var t = Math.max(1, Math.ceil(u().length / s.pageSize));
+				e < 1 || e > t || e === s.page || (s.page = e, f(), r._tokuiReport && r._tokuiReport("page", { value: e }));
+			}
+			function m(e) {
+				if (s.pager) {
+					var r = Math.max(1, Math.ceil(e / s.pageSize)), i = s.pager;
+					i.innerHTML = "";
+					var a = t("span", { class: "tokui-table__pager-total" });
+					a.textContent = n("pagination.totalCount", { count: e }), i.appendChild(a);
+					var o = t("button", {
+						type: "button",
+						class: "tokui-table__pager-btn" + (s.page <= 1 ? " tokui-table__pager-btn--disabled" : "")
+					});
+					o.textContent = "‹", o.addEventListener("click", function() {
+						p(s.page - 1);
+					}), i.appendChild(o);
+					for (var c = 1; c <= r; c++) (function(e) {
+						var n = t("button", {
+							type: "button",
+							class: "tokui-table__pager-page" + (e === s.page ? " tokui-table__pager-page--active" : "")
+						});
+						n.textContent = String(e), n.addEventListener("click", function() {
+							p(e);
+						}), i.appendChild(n);
+					})(c);
+					var l = t("button", {
+						type: "button",
+						class: "tokui-table__pager-btn" + (s.page >= r ? " tokui-table__pager-btn--disabled" : "")
+					});
+					l.textContent = "›", l.addEventListener("click", function() {
+						p(s.page + 1);
+					}), i.appendChild(l);
+				}
+			}
+			var h = e.debounce(function() {
+				r._tokuiReport && r._tokuiReport("filter", { filters: Object.assign({}, s.filters) });
+			}, 300);
+			if (o.sortable && s.thead && !s.sortWired && (s.sortWired = !0, S(s.thead).forEach(function(e) {
+				var n = e.th;
+				if (!n.classList.contains("tokui-col-chk")) {
+					var i = e.col;
+					n.classList.add("tokui-table__th--sortable");
+					var a = t("span", { class: "tokui-table__sort-icon" });
+					n.appendChild(a), n.addEventListener("click", function() {
+						s.sortDir = s.sortCol === i && s.sortDir === "asc" ? "desc" : "asc", s.sortCol = i, Array.prototype.slice.call(s.thead.querySelectorAll(".tokui-table__sort-icon")).forEach(function(e) {
+							e.textContent = "", e.classList.remove("tokui-table__sort-icon--asc"), e.classList.remove("tokui-table__sort-icon--desc");
+						}), a.textContent = s.sortDir === "asc" ? "▲" : "▼", a.classList.add("tokui-table__sort-icon--" + s.sortDir), d(), f(), r._tokuiReport && r._tokuiReport("sort", {
+							column: i,
+							dir: s.sortDir
+						});
+					});
+				}
+			})), o.filter && s.thead && !s.filterBuilt) {
+				s.filterBuilt = !0;
+				var g = t("tr", { class: "tokui-table__filter-row" });
+				S(s.thead).forEach(function(e) {
+					var n = e.col, r = t("td", { class: "tokui-table__filter-cell" }), i = t("input", {
+						type: "text",
+						class: "tokui-table__filter-input",
+						placeholder: (e.th.textContent || "").trim()
+					});
+					i.addEventListener("input", function() {
+						var e = (i.value || "").trim();
+						e ? s.filters[n] = e : delete s.filters[n], s.page = 1, f(), h();
+					}), r.appendChild(i), g.appendChild(r);
+				}), s.thead.appendChild(g);
+			}
+			if (s.tbody && !s.tbodyHooked) {
+				s.tbodyHooked = !0;
+				var _ = s.tbody, v = _.appendChild, y = _.insertBefore, C = function(e) {
+					if (!(s._applying || !e || e.tagName !== "TR")) {
+						if (e._tokuiTrReconcile && !e._tokuiDataPatched) {
+							e._tokuiDataPatched = !0;
+							var t = e._tokuiTrReconcile;
+							e._tokuiTrReconcile = function(n, r, i) {
+								t.call(e, n, r, i), f();
+							};
+						}
+						f();
+					}
+				};
+				_.appendChild = function(e) {
+					var t = v.call(_, e);
+					return C(e), t;
+				}, _.insertBefore = function(e, t) {
+					var n = y.call(_, e, t);
+					return C(e), n;
+				};
+			}
+			if (o.pagination && !s.pager && r.parentNode) {
+				var w = t("div", {
+					class: "tokui-table__pager",
+					role: "navigation",
+					"aria-label": n("pagination.aria")
+				});
+				r.parentNode.appendChild(w), s.pager = w;
+			}
+			f();
+		}
+		e.register("table", (n, r) => {
+			let i = {
 				class: "tokui-table",
 				role: "table"
 			};
-			e.attrs.id && (r.id = e.attrs.id), e.attrs.stripe !== void 0 && (r.class += " tokui-table--stripe");
-			let i = t("div", { class: "tokui-table-wrapper" }), a = t("table", r);
-			return (e.attrs.cap || e.attrs.caption) && a.appendChild(t("caption", {}, e.attrs.cap || e.attrs.caption)), p = a, n(e.children).forEach((e) => {
-				e && e.nodeType && a.appendChild(e);
-			}), i.appendChild(a), i._slot = a, i._tokuiType = "table", i;
+			n.attrs.id && (i.id = n.attrs.id), n.attrs.stripe !== void 0 && (i.class += " tokui-table--stripe");
+			let a = t("div", { class: "tokui-table-wrapper" }), o = t("table", i);
+			(n.attrs.cap || n.attrs.caption) && o.appendChild(t("caption", {}, n.attrs.cap || n.attrs.caption)), g = o;
+			var s = n.attrs.pagination !== void 0 || typeof n.content == "string" && /(?:^|\s)pagination(?:\s|$)/.test(n.content);
+			if (n.attrs.sortable !== void 0 || n.attrs.filter !== void 0 || s) {
+				var c = parseInt(n.attrs.ps, 10);
+				o._tokuiDataCfg = {
+					sortable: n.attrs.sortable !== void 0,
+					filter: n.attrs.filter !== void 0,
+					pagination: !!s,
+					pageSize: c > 0 ? c : 10
+				}, o._tokuiReport = e.createReporter("table", n.attrs, a);
+			}
+			return r(n.children).forEach((e) => {
+				e && e.nodeType && o.appendChild(e);
+			}), a.appendChild(o), a._slot = o, a._tokuiType = "table", C(o), a;
 		}), e.register("thead", (e) => {
 			let n = t("thead", { class: "tokui-thead" });
 			if (e.attrs.cols) {
-				c = [], u = [], d = [], f = 0;
+				u = [], d = [], f = [], p = 0;
 				let r = e.attrs.cols.split(";"), i = r.length - 1, a = r.map(function(e) {
-					return _(e).map(function(e) {
-						let t = s(e), n = w(t.name);
+					return w(e).map(function(e) {
+						let t = c(e), n = A(t.name);
 						return {
 							text: n.text,
 							align: t.align,
@@ -10552,18 +11029,18 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 							rowspan: n.rowspan || 1
 						};
 					});
-				}), l = a.length ? a[0].reduce(function(e, t) {
+				}), o = a.length ? a[0].reduce(function(e, t) {
 					return e + t.colspan;
 				}, 0) : 0;
-				p && l > 0 && (p.style.minWidth = "calc(" + l + " * var(--tokui-table-min-col-w, 96px))");
-				let m = [];
+				g && o > 0 && (g.style.minWidth = "calc(" + o + " * var(--tokui-table-min-col-w, 96px))");
+				let l = [];
 				a.forEach(function(e, r) {
-					let a = S(e, m, l), s = t("tr", { class: "tokui-thead-row" });
+					let a = O(e, l, o), c = t("tr", { class: "tokui-thead-row" });
 					a.forEach(function(e) {
-						let n = e.cell, a = n.align ? "tokui-col-" + n.align : "", l = n.color ? "tokui-text--" + n.color : "", f = { scope: "col" };
-						if (e.colspan >= 2 && (f.colspan = String(e.colspan)), e.rowspan >= 2 && (f.rowspan = String(e.rowspan)), r + e.rowspan - 1 >= i) for (var p = 0; p < e.colspan; p++) u[e.col + p] = n.align || "", c[e.col + p] = o[n.text] ? n.text : null, d[e.col + p] = n.color || "";
+						let n = e.cell, a = n.align ? "tokui-col-" + n.align : "", o = n.color ? "tokui-text--" + n.color : "", l = { scope: "col" };
+						if (e.colspan >= 2 && (l.colspan = String(e.colspan)), e.rowspan >= 2 && (l.rowspan = String(e.rowspan)), r + e.rowspan - 1 >= i) for (var p = 0; p < e.colspan; p++) d[e.col + p] = n.align || "", u[e.col + p] = s[n.text] ? n.text : null, f[e.col + p] = n.color || "";
 						if (n.text === "chk") {
-							f.class = "tokui-col-chk" + (a ? " " + a : "") + (l ? " " + l : "");
+							l.class = "tokui-col-chk" + (a ? " " + a : "") + (o ? " " + o : "");
 							let e = t("input", {
 								type: "checkbox",
 								class: "tokui-chk-all"
@@ -10574,16 +11051,16 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 									t.checked = e.checked;
 								}), e.indeterminate = !1);
 							});
-							let n = t("th", f);
-							n.appendChild(e), s.appendChild(n);
+							let n = t("th", l);
+							n.appendChild(e), c.appendChild(n);
 							return;
 						}
 						if (n.text === "#") {
-							f.class = "tokui-col-seq" + (a ? " " + a : "") + (l ? " " + l : ""), s.appendChild(t("th", f, "#"));
+							l.class = "tokui-col-seq" + (a ? " " + a : "") + (o ? " " + o : ""), c.appendChild(t("th", l, "#"));
 							return;
 						}
-						f.class = (a + " " + l).trim(), s.appendChild(t("th", f, n.text));
-					}), n.appendChild(s);
+						l.class = (a + " " + o).trim(), c.appendChild(t("th", l, n.text));
+					}), n.appendChild(c);
 				});
 			} else {
 				let r = t("tr", { class: "tokui-thead-row" });
@@ -10595,11 +11072,11 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 					}, n));
 				}), n.appendChild(r);
 			}
-			return n._slot = n.lastChild || n, n._tokuiType = "thead", n;
+			return n._slot = n.lastChild || n, n._tokuiType = "thead", C(g, "thead", n), n;
 		}), e.register("tbody", (e, n) => {
-			let r = t("tbody", { class: "tokui-tbody" }), i = e._colTypes || c, a = e._colAligns || u, o = e._colColors || d;
+			let r = t("tbody", { class: "tokui-tbody" }), i = e._colTypes || u, a = e._colAligns || d, o = e._colColors || f;
 			return r._tokuiOccupancy = [], r._tokuiMaxCols = a.length || i.length, e.children.forEach((e) => {
-				e._colTypes = i, e._colAligns = a, e._colColors = o, e._seqNum = ++f, e._tbodyEl = r;
+				e._colTypes = i, e._colAligns = a, e._colColors = o, e._seqNum = ++p, e._tbodyEl = r;
 			}), n(e.children).forEach((e) => {
 				e && e.nodeType && r.appendChild(e);
 			}), r.addEventListener("mousedown", function(e) {
@@ -10617,10 +11094,10 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 					let e = Math.min(s, a), n = Math.max(s, a), r = t.checked;
 					for (let t = e; t <= n; t++) i[t].checked = r;
 				} else a >= 0 && (n.__tokuiChkAnchor = a);
-				g(n);
-			}), r._slot = r, r._tokuiType = "tbody", r;
+				_(n);
+			}), r._slot = r, r._tokuiType = "tbody", C(g, "tbody", r), r;
 		});
-		function _(e) {
+		function w(e) {
 			let t = [], n = "", r = !1;
 			for (let i = 0; i < e.length; i++) {
 				let a = e[i];
@@ -10628,10 +11105,10 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			}
 			return t.push(n), t;
 		}
-		function y(e) {
+		function T(e) {
 			return e.length > 1 && e.charAt(0) === "\"" && e.charAt(e.length - 1) === "\"" && e.indexOf("\"", 1) === e.length - 1 ? e.slice(1, -1) : e;
 		}
-		function b(e) {
+		function E(e) {
 			for (var t = [], n = "", r = !1, i = 0, a = 0; a < e.length; a++) {
 				var o = e[a];
 				if (o === "\"") r = !r;
@@ -10645,13 +11122,13 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			}
 			return t.push(n), t;
 		}
-		function x(e, n) {
+		function D(e, n) {
 			var r = { class: "tokui-td tokui-td--skeleton" }, i = n.colAligns[e];
 			i && (r.class += " tokui-col-" + i);
 			var a = t("td", r);
 			return a.appendChild(t("span", { class: "tokui-skeleton" })), a;
 		}
-		function S(e, t, n) {
+		function O(e, t, n) {
 			for (var r = [], i = 0, a = 0; a < e.length; a++) {
 				for (var o = e[a], s = o.colspan || 1, c = o.rowspan || 1; i < n && t[i] > 0;) --t[i], i++;
 				r.push({
@@ -10666,9 +11143,9 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			for (; i < n && t[i] > 0;) --t[i], i++;
 			return r;
 		}
-		function C(e, t, n) {
-			return !t || !n ? null : S(e.map(function(e) {
-				var t = w(e);
+		function k(e, t, n) {
+			return !t || !n ? null : O(e.map(function(e) {
+				var t = A(e);
 				return {
 					colspan: t.colspan || 1,
 					rowspan: t.rowspan || 1
@@ -10677,7 +11154,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				return e.col;
 			});
 		}
-		function w(e) {
+		function A(e) {
 			e = String(e);
 			var t = e.match(/=([cr]\d+){1,2}$/);
 			if (!t) return {
@@ -10692,7 +11169,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				rowspan: a
 			};
 		}
-		function T(e) {
+		function j(e) {
 			for (var t = {
 				c: "center",
 				center: "center",
@@ -10721,11 +11198,11 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				color: i
 			};
 		}
-		function E(e, r, o) {
-			var s = o.colTypes, c = o.colAligns, l = o.seqNum, u = o.colspanVal, d = o.cellCols && o.cellCols[r] != null ? o.cellCols[r] : r, f = { class: "tokui-td" }, p = T(e), m = w(p.text), h = m.text.trim(), g = p.align || c[d];
+		function M(e, n, i) {
+			var s = i.colTypes, c = i.colAligns, l = i.seqNum, u = i.colspanVal, d = i.cellCols && i.cellCols[n] != null ? i.cellCols[n] : n, f = { class: "tokui-td" }, p = j(e), m = A(p.text), h = m.text.trim(), g = p.align || c[d];
 			g && (f.class += " tokui-col-" + g);
-			var _ = p.color || o.colColors && o.colColors[d];
-			if (_ && (f.class += " tokui-text--" + _), r === 0 && u >= 2 && (f.colspan = String(u)), r > 0 && r < u) return null;
+			var _ = p.color || i.colColors && i.colColors[d];
+			if (_ && (f.class += " tokui-text--" + _), n === 0 && u >= 2 && (f.colspan = String(u)), n > 0 && n < u) return null;
 			if (m.colspan >= 2 && (f.colspan = String(m.colspan)), m.rowspan >= 2 && (f.rowspan = String(m.rowspan)), s[d] === "chk") {
 				f.class += " tokui-col-chk";
 				var v = t("td", f);
@@ -10735,7 +11212,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				})), v;
 			}
 			if (s[d] === "#") return f.class += " tokui-col-seq", t("td", f, String(l));
-			var y = a(h);
+			var y = o(h);
 			if (y) {
 				f.class += " tokui-td--inline";
 				var b = t("td", f);
@@ -10744,31 +11221,31 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			if (h.startsWith("btn:")) {
 				f.class += " tokui-col-action";
 				var x = t("td", f);
-				return x.appendChild(n(h, t, i)), x;
+				return x.appendChild(r(h, t, a)), x;
 			}
 			if (h.startsWith("tag:")) {
-				var S = t("td", f), C = h.split(/\s+/), E = "", D = { class: "tokui-tag" };
+				var S = t("td", f), C = h.split(/\s+/), w = "", T = { class: "tokui-tag" };
 				return C.forEach(function(e) {
-					e.startsWith("tag:") ? E = e.slice(4) : e.startsWith("t:") && (D.class += " tokui-tag--" + e.slice(2));
-				}), S.appendChild(t("span", D, E)), S;
+					e.startsWith("tag:") ? w = e.slice(4) : e.startsWith("t:") && (T.class += " tokui-tag--" + e.slice(2));
+				}), S.appendChild(t("span", T, w)), S;
 			}
 			if (h.startsWith("progress")) {
-				var O = t("td", f), k = h.split(/\s+/), A = 0, j = "span", M = "";
-				if (k.forEach(function(e) {
-					e.startsWith("v:") ? A = parseInt(e.slice(2)) || 0 : e.startsWith("t:") ? j = e.slice(2) : e.startsWith("status:") && (M = e.slice(7));
-				}), j === "span") {
+				var E = t("td", f), D = h.split(/\s+/), O = 0, k = "span", M = "";
+				if (D.forEach(function(e) {
+					e.startsWith("v:") ? O = parseInt(e.slice(2)) || 0 : e.startsWith("t:") ? k = e.slice(2) : e.startsWith("status:") && (M = e.slice(7));
+				}), k === "span") {
 					var N = t("span", { class: "tokui-progress tokui-progress--span" }), P = t("span", { class: "tokui-progress__mini-bar" }), F = "tokui-progress__mini-fill";
-					M === "error" ? F += " tokui-progress--error" : A >= 80 && (F += " tokui-progress--success");
+					M === "error" ? F += " tokui-progress--error" : O >= 80 && (F += " tokui-progress--success");
 					var I = t("span", { class: F });
-					I.style.width = A + "%", P.appendChild(I), N.appendChild(P);
+					I.style.width = O + "%", P.appendChild(I), N.appendChild(P);
 					var L = t("span", { class: "tokui-progress__span-text" });
-					L.textContent = A + "%", N.appendChild(L), O.appendChild(N);
+					L.textContent = O + "%", N.appendChild(L), E.appendChild(N);
 				}
-				return O;
+				return E;
 			}
 			return t("td", f, h);
 		}
-		function D(e, t) {
+		function N(e, t) {
 			e._tokuiCellText = [], e._tokuiCellTds = [];
 			var n = "\0SKELETON\0";
 			function r(t, n) {
@@ -10784,20 +11261,20 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				o && o.v && String(o.v).split(",").forEach(function(t) {
 					t = t.trim(), t && e.classList.add("tokui-table-row--" + t);
 				});
-				var s = b(y(i || "")), c = t.tbodyEl && t.tbodyEl._tokuiOccupancy;
-				c && (t.cellCols = C(s, t.tbodyEl, a ? c : c.slice()));
+				var s = E(T(i || "")), c = t.tbodyEl && t.tbodyEl._tokuiOccupancy;
+				c && (t.cellCols = k(s, t.tbodyEl, a ? c : c.slice()));
 				for (var l = 0; l < s.length; l++) {
 					var u = s[l], d = u.trim(), f = l === s.length - 1, p = /^\[/.test(d) || /^(btn|tag|progress)\b/.test(d), m = /^btn:/.test(d), h = p && f && !a && !m, g = h ? n : u;
 					if (e._tokuiCellText[l] !== g) {
 						var _ = e._tokuiCellTds[l];
 						_ && _.parentNode === e && e.removeChild(_);
-						var v = h ? x(l, t) : E(u, l, t);
+						var v = h ? D(l, t) : M(u, l, t);
 						r(v, l), e._tokuiCellTds[l] = v || null, e._tokuiCellText[l] = g;
 					}
 				}
-				for (var S = s.length; S < e._tokuiCellTds.length; S++) {
-					var w = e._tokuiCellTds[S];
-					w && w.parentNode === e && e.removeChild(w), e._tokuiCellTds[S] = null;
+				for (var y = s.length; y < e._tokuiCellTds.length; y++) {
+					var b = e._tokuiCellTds[y];
+					b && b.parentNode === e && e.removeChild(b), e._tokuiCellTds[y] = null;
 				}
 				e._tokuiCellTds.length = s.length, e._tokuiCellText.length = s.length;
 			}, e;
@@ -10811,33 +11288,33 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				e = e.trim(), e && n.classList.add("tokui-table-row--" + e);
 			});
 			var r = e.attrs && e.attrs.cs ? parseInt(e.attrs.cs) : 0;
-			let i = e._colTypes || c, a = {
+			let i = e._colTypes || u, a = {
 				colTypes: i,
-				colAligns: e._colAligns || u,
-				colColors: e._colColors || d,
-				seqNum: e._seqNum || ++f,
+				colAligns: e._colAligns || d,
+				colColors: e._colColors || f,
+				seqNum: e._seqNum || ++p,
 				colspanVal: r,
 				tbodyEl: e._tbodyEl
 			};
-			if (e._stream === "open") return D(n, a), n;
+			if (e._stream === "open") return N(n, a), n;
 			if (e.content) {
-				var o = y(e.content);
-				let t = b(o);
-				a.cellCols = C(t, a.tbodyEl, a.tbodyEl && a.tbodyEl._tokuiOccupancy);
+				var o = T(e.content);
+				let t = E(o);
+				a.cellCols = k(t, a.tbodyEl, a.tbodyEl && a.tbodyEl._tokuiOccupancy);
 				var s = t.some(function(e) {
 					return /=([cr]\d+)/.test(e);
-				}), l = a.cellCols && a.cellCols.some(function(e, t) {
+				}), c = a.cellCols && a.cellCols.some(function(e, t) {
 					return e !== t;
-				}), p = o.indexOf("[tr") !== -1;
-				!s && !l && i.length > 0 && t.length !== i.length && r < 2 && console.warn("TokUI Table: tr 单元格数 " + t.length + " != 列数 " + i.length + " → 列错位。" + (p ? "⚠️ 内容含 [tr 残留，疑似 tr 未正确闭合（引号未配对/含字面 [ ] 未引号包）→ parser 标签断裂、串行。" : t.length > i.length ? "疑似单元格内含逗号未用双引号包裹（如 12,800.00、\"a,b,c\"）。" : "疑似列标题(thead cols)含逗号被切散、或该行缺格。") + "规则：tr 不要外层引号、含逗号单元格直引号包。tr 原文: " + o), t.forEach((e, t) => {
-					let r = E(e, t, a);
+				}), l = o.indexOf("[tr") !== -1;
+				!s && !c && i.length > 0 && t.length !== i.length && r < 2 && console.warn("TokUI Table: tr 单元格数 " + t.length + " != 列数 " + i.length + " → 列错位。" + (l ? "⚠️ 内容含 [tr 残留，疑似 tr 未正确闭合（引号未配对/含字面 [ ] 未引号包）→ parser 标签断裂、串行。" : t.length > i.length ? "疑似单元格内含逗号未用双引号包裹（如 12,800.00、\"a,b,c\"）。" : "疑似列标题(thead cols)含逗号被切散、或该行缺格。") + "规则：tr 不要外层引号、含逗号单元格直引号包。tr 原文: " + o), t.forEach((e, t) => {
+					let r = M(e, t, a);
 					r && n.appendChild(r);
 				});
 			}
 			return n;
 		}), e.register("tcol", () => document.createTextNode(""));
 	}
-	typeof window < "u" && (window.TokUI = window.TokUI || {}, window.TokUI._internal = window.TokUI._internal || {}, window.TokUI._internal.registerTableComponents = r), t !== void 0 && t.exports && (t.exports = { registerTableComponents: r });
+	typeof window < "u" && (window.TokUI = window.TokUI || {}, window.TokUI._internal = window.TokUI._internal || {}, window.TokUI._internal.registerTableComponents = i), t !== void 0 && t.exports && (t.exports = { registerTableComponents: i });
 })), w = /* @__PURE__ */ o(((e, t) => {
 	function n(e) {
 		return !e || typeof e != "string" ? [] : e.split(";").map(function(e) {
@@ -10893,8 +11370,20 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		return Object.assign({}, e, { children: (e.children || []).concat(t) });
 	}
 	function s(e) {
-		let { el: t, resolveButtonAction: n } = typeof l == "function" ? h() : window.TokUI._internal, s = typeof l == "function" ? S().resolveColor : window.TokUI._internal.resolveColor, c = typeof l == "function" ? v().iconSvg : window.TokUI._internal.iconSvg, d = typeof l == "function" ? u().t : window.TokUI._internal.t;
-		function f(e) {
+		let { el: t, resolveButtonAction: n, evaluateRules: s } = typeof l == "function" ? h() : window.TokUI._internal, c = typeof l == "function" ? S().resolveColor : window.TokUI._internal.resolveColor, d = typeof l == "function" ? v().iconSvg : window.TokUI._internal.iconSvg, f = typeof l == "function" ? u().t : window.TokUI._internal.t;
+		function p(e, t, n, r, a, o) {
+			if (!r.rule) return;
+			e.setAttribute("data-tokui-rule", r.rule);
+			var c = r.hint || (n ? n.textContent : "");
+			function l() {
+				var e = s(o(), r.rule), l = e ? r.msg || f("rule." + e.name, { n: e.n }) : null;
+				return i(t, n, l ? "error" : "", a), n && (n.textContent = l || c), l;
+			}
+			e._tokuiValidate = l, r.live !== void 0 && typeof t.addEventListener == "function" && (t.addEventListener("blur", l), t.addEventListener("input", function() {
+				(r.live === "input" || t.classList.contains(a + "--error")) && l();
+			}));
+		}
+		function m(e) {
 			if (!e) return null;
 			var t = e.indexOf("|");
 			return t === -1 ? {
@@ -10905,7 +11394,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				variant: e.substring(t + 1)
 			};
 		}
-		function p(e) {
+		function g(e) {
 			if (!e) return null;
 			var t = e.indexOf("|"), n = t === -1 ? e : e.substring(0, t), r = t === -1 ? null : e.substring(t + 1), i = n.indexOf(":");
 			return i === -1 ? {
@@ -10918,32 +11407,32 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				variant: r
 			};
 		}
-		function m(e) {
+		function _(e) {
 			var t = e.attrs;
 			return !!(t.pre || t.app || t.prebtn || t.appbtn);
 		}
-		function g(e, n) {
+		function y(e, n) {
 			var r = t("div", { class: "tokui-input-group" });
 			if (e.attrs.pre) {
-				var i = f(e.attrs.pre), a = i.variant ? "tokui-input-pre tokui-input-pre--" + i.variant : "tokui-input-pre";
+				var i = m(e.attrs.pre), a = i.variant ? "tokui-input-pre tokui-input-pre--" + i.variant : "tokui-input-pre";
 				r.appendChild(t("span", { class: a }, i.text));
 			}
 			if (e.attrs.prebtn) {
-				var i = p(e.attrs.prebtn), a = i.variant ? "tokui-input-prebtn tokui-input-prebtn--" + i.variant : "tokui-input-prebtn", o = {
+				var i = g(e.attrs.prebtn), a = i.variant ? "tokui-input-prebtn tokui-input-prebtn--" + i.variant : "tokui-input-prebtn", o = {
 					class: a,
 					type: "button"
 				};
 				i.handler && (o["data-tokui-clk"] = i.handler), r.appendChild(t("button", o, i.text));
 			}
 			if (r.appendChild(n), e.attrs.appbtn) {
-				var i = p(e.attrs.appbtn), a = i.variant ? "tokui-input-appbtn tokui-input-appbtn--" + i.variant : "tokui-input-appbtn", o = {
+				var i = g(e.attrs.appbtn), a = i.variant ? "tokui-input-appbtn tokui-input-appbtn--" + i.variant : "tokui-input-appbtn", o = {
 					class: a,
 					type: "button"
 				};
 				i.handler && (o["data-tokui-clk"] = i.handler), r.appendChild(t("button", o, i.text));
 			}
 			if (e.attrs.app) {
-				var i = f(e.attrs.app), a = i.variant ? "tokui-input-app tokui-input-app--" + i.variant : "tokui-input-app";
+				var i = m(e.attrs.app), a = i.variant ? "tokui-input-app tokui-input-app--" + i.variant : "tokui-input-app";
 				r.appendChild(t("span", { class: a }, i.text));
 			}
 			return r;
@@ -10960,7 +11449,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				e && e.nodeType && a.appendChild(e);
 			}), a._slot = a, a._tokuiType = "form", a;
 		});
-		var _ = "<svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>";
+		var b = "<svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>";
 		e.register("input", (n) => {
 			var r = n.attrs.v ? n.attrs.v.split(",").map(function(e) {
 				return e.trim();
@@ -10980,28 +11469,96 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			}), f.addEventListener("input", function() {
 				typeof f.setCustomValidity == "function" && f.setCustomValidity("");
 			})), n.attrs.w && (f.style.width = n.attrs.w);
-			var p = null;
+			var m = null;
 			if (s) {
-				p = t("div", { class: "tokui-search-input" }), c && p.classList.add("tokui-search-input--right");
+				m = t("div", { class: "tokui-search-input" }), c && m.classList.add("tokui-search-input--right");
 				var h = t("span", { class: "tokui-search-input__icon" });
-				h.innerHTML = _, p.appendChild(h), p.appendChild(f);
-			}
-			var v = p || f;
-			if (m(n)) {
-				var y = g(n, v);
-				r.indexOf("pill") !== -1 && y.classList.add("tokui-input-group--pill"), l.appendChild(y);
-			} else l.appendChild(v);
-			var b = null;
-			(n.attrs.hint || n.attrs.live !== void 0) && (b = t("div", { class: "tokui-field__hint" }, n.attrs.hint || ""), r.indexOf("error") === -1 ? r.indexOf("success") !== -1 && b.classList.add("tokui-field__hint--success") : b.classList.add("tokui-field__hint--error"), l.appendChild(b)), n.attrs.live !== void 0 && a(f, b, n.attrs, "tokui-input"), l._update = function(e) {
-				e.v !== void 0 && (f.value = e.v), e.dis === !0 || e.dis === "true" ? f.disabled = !0 : (e.dis === !1 || e.dis === "false") && (f.disabled = !1), e.ph !== void 0 && (f.placeholder = e.ph), e.ro === !0 || e.ro === "true" ? f.readOnly = !0 : (e.ro === !1 || e.ro === "false") && (f.readOnly = !1), e.hint !== void 0 && b && (b.textContent = e.hint), e.status !== void 0 && i(f, b, e.status, "tokui-input");
+				h.innerHTML = b, m.appendChild(h), m.appendChild(f);
+			}
+			var g = m || f;
+			if (_(n)) {
+				var v = y(n, g);
+				r.indexOf("pill") !== -1 && v.classList.add("tokui-input-group--pill"), g = v;
+			}
+			var x = null;
+			if (n.attrs.sug) {
+				var S = t("div", { class: "tokui-sug-wrap" });
+				S.appendChild(g), x = t("div", {
+					class: "tokui-sug",
+					role: "listbox"
+				}), x.style.display = "none", S.appendChild(x), l.appendChild(S);
+			} else l.appendChild(g);
+			var C = null;
+			(n.attrs.hint || n.attrs.live !== void 0 || n.attrs.rule) && (C = t("div", { class: "tokui-field__hint" }, n.attrs.hint || ""), r.indexOf("error") === -1 ? r.indexOf("success") !== -1 && C.classList.add("tokui-field__hint--success") : C.classList.add("tokui-field__hint--error"), l.appendChild(C)), n.attrs.live !== void 0 && a(f, C, n.attrs, "tokui-input"), p(l, f, C, n.attrs, "tokui-input", function() {
+				return f.value;
+			}), l._update = function(e) {
+				e.v !== void 0 && (f.value = e.v), e.dis === !0 || e.dis === "true" ? f.disabled = !0 : (e.dis === !1 || e.dis === "false") && (f.disabled = !1), e.ph !== void 0 && (f.placeholder = e.ph), e.ro === !0 || e.ro === "true" ? f.readOnly = !0 : (e.ro === !1 || e.ro === "false") && (f.readOnly = !1), e.hint !== void 0 && C && (C.textContent = e.hint), e.status !== void 0 && i(f, C, e.status, "tokui-input");
 			};
-			var x = e.createReporter("input", n.attrs, l), S = e.debounce(function() {
-				x("change", {
+			var w = e.createReporter("input", n.attrs, l), T = e.debounce(function() {
+				w("change", {
 					value: f.value,
 					name: n.attrs.n || void 0
 				});
 			}, parseInt(n.attrs.db) || 300);
-			return f.addEventListener("input", S), l._variantTarget = f, l;
+			if (f.addEventListener("input", T), n.attrs.sug && x) {
+				var E = n.attrs.sug, D = [], O = -1, k = 0, A = function() {
+					x.style.display = "none", D = [], O = -1;
+				}, j = function() {
+					if (x.innerHTML = "", !D.length) {
+						x.style.display = "none";
+						return;
+					}
+					D.forEach(function(e, n) {
+						var r = t("div", {
+							class: "tokui-sug__item" + (n === O ? " tokui-sug__item--active" : ""),
+							role: "option"
+						}, e.tx);
+						r.setAttribute("data-idx", n), x.appendChild(r);
+					}), x.style.display = "";
+				}, M = function(e) {
+					D = (Array.isArray(e) ? e : []).map(function(e) {
+						return e && typeof e == "object" ? {
+							v: String(e.v == null ? e.tx : e.v),
+							tx: String(e.tx == null ? e.v : e.tx)
+						} : {
+							v: String(e),
+							tx: String(e)
+						};
+					}), O = D.length ? 0 : -1, j();
+				}, N = function(e) {
+					e < 0 || e >= D.length || (f.value = D[e].v, A(), w("change", {
+						value: f.value,
+						name: n.attrs.n || void 0
+					}));
+				}, P = e.debounce(function() {
+					var t = e.eventBus ? e.eventBus.getHandler(E) : null;
+					if (!t) {
+						e._warnMissingHandler(E), A();
+						return;
+					}
+					var n = ++k, r;
+					try {
+						r = t({ value: f.value });
+					} catch (e) {
+						console.warn("TokUI: sug handler error", e), A();
+						return;
+					}
+					r && typeof r.then == "function" ? r.then(function(e) {
+						n === k && M(e);
+					}, function() {
+						n === k && A();
+					}) : M(r);
+				}, parseInt(n.attrs.db) || 300);
+				f.addEventListener("input", P), f.addEventListener("keydown", function(e) {
+					x.style.display !== "none" && (e.key === "ArrowDown" ? (e.preventDefault(), O = Math.min(O + 1, D.length - 1), j()) : e.key === "ArrowUp" ? (e.preventDefault(), O = Math.max(O - 1, 0), j()) : e.key === "Enter" ? O >= 0 && (e.preventDefault(), N(O)) : e.key === "Escape" && A());
+				}), f.addEventListener("blur", function() {
+					setTimeout(A, 150);
+				}), x.addEventListener("click", function(e) {
+					var t = e.target.closest ? e.target.closest(".tokui-sug__item") : null;
+					t && N(parseInt(t.getAttribute("data-idx")));
+				});
+			}
+			return l._variantTarget = f, l;
 		}), e.register("pwd", (n) => {
 			var r = n.attrs.v ? n.attrs.v.split(",").map(function(e) {
 				return e.trim();
@@ -11030,25 +11587,27 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 					l.type = e ? "text" : "password", u.innerHTML = e ? d : f, u.classList.toggle("tokui-pwd-toggle--active", e);
 				});
 			}
-			if (m(n) || u) {
-				var p = g(n, l);
+			if (_(n) || u) {
+				var m = y(n, l);
 				if (u) {
 					var h = l.nextSibling;
-					h ? p.insertBefore(u, h) : p.appendChild(u);
+					h ? m.insertBefore(u, h) : m.appendChild(u);
 				}
-				o.appendChild(p);
+				o.appendChild(m);
 			} else o.appendChild(l);
-			var _ = null;
-			(n.attrs.hint || n.attrs.live !== void 0) && (_ = t("div", { class: "tokui-field__hint" }, n.attrs.hint || ""), r.indexOf("error") === -1 ? r.indexOf("success") !== -1 && _.classList.add("tokui-field__hint--success") : _.classList.add("tokui-field__hint--error"), o.appendChild(_)), n.attrs.live !== void 0 && a(l, _, n.attrs, "tokui-input"), o._update = function(e) {
-				e.v !== void 0 && (l.value = e.v), e.dis === !0 || e.dis === "true" ? l.disabled = !0 : (e.dis === !1 || e.dis === "false") && (l.disabled = !1), e.ph !== void 0 && (l.placeholder = e.ph), e.ro === !0 || e.ro === "true" ? l.readOnly = !0 : (e.ro === !1 || e.ro === "false") && (l.readOnly = !1), e.hint !== void 0 && _ && (_.textContent = e.hint), e.status !== void 0 && i(l, _, e.status, "tokui-input");
+			var g = null;
+			(n.attrs.hint || n.attrs.live !== void 0 || n.attrs.rule) && (g = t("div", { class: "tokui-field__hint" }, n.attrs.hint || ""), r.indexOf("error") === -1 ? r.indexOf("success") !== -1 && g.classList.add("tokui-field__hint--success") : g.classList.add("tokui-field__hint--error"), o.appendChild(g)), n.attrs.live !== void 0 && a(l, g, n.attrs, "tokui-input"), p(o, l, g, n.attrs, "tokui-input", function() {
+				return l.value;
+			}), o._update = function(e) {
+				e.v !== void 0 && (l.value = e.v), e.dis === !0 || e.dis === "true" ? l.disabled = !0 : (e.dis === !1 || e.dis === "false") && (l.disabled = !1), e.ph !== void 0 && (l.placeholder = e.ph), e.ro === !0 || e.ro === "true" ? l.readOnly = !0 : (e.ro === !1 || e.ro === "false") && (l.readOnly = !1), e.hint !== void 0 && g && (g.textContent = e.hint), e.status !== void 0 && i(l, g, e.status, "tokui-input");
 			};
-			var v = e.createReporter("pwd", n.attrs, o), y = e.debounce(function() {
+			var v = e.createReporter("pwd", n.attrs, o), b = e.debounce(function() {
 				v("change", {
 					value: l.value,
 					name: n.attrs.n || void 0
 				});
 			}, parseInt(n.attrs.db) || 300);
-			return l.addEventListener("input", y), o._variantTarget = l, o;
+			return l.addEventListener("input", b), o._variantTarget = l, o;
 		}), e.register("textarea", (n, r) => {
 			let i = t("div", { class: "tokui-field" });
 			if (n.attrs.l) {
@@ -11065,19 +11624,19 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			let d = t("textarea", u), f = n.children && n.children.length > 0 ? n.children.map((e) => e.content || "").join("") : n.content || n.attrs.tx || "";
 			if (d.textContent = f, o) {
 				d.classList.add("tokui-textarea--auto");
-				var p = 0, m = 0;
+				var m = 0, h = 0;
 				function e() {
-					if (!p) {
+					if (!m) {
 						var e = d.getAttribute("rows");
 						d.setAttribute("rows", "1");
 						var t = d.scrollHeight;
-						p = t * s, m = c > 0 ? t * c : 0, d.setAttribute("rows", e), d.style.height = "auto";
+						m = t * s, h = c > 0 ? t * c : 0, d.setAttribute("rows", e), d.style.height = "auto";
 						var n = d.scrollHeight;
-						p = Math.max(p, n), d.style.height = p + "px";
+						m = Math.max(m, n), d.style.height = m + "px";
 					}
 					d.style.height = "auto";
 					var r = d.scrollHeight;
-					r = Math.max(r, p), m > 0 && (r = Math.min(r, m)), d.style.height = r + "px", d.style.overflow = m > 0 && d.scrollHeight > m ? "auto" : "hidden";
+					r = Math.max(r, m), h > 0 && (r = Math.min(r, h)), d.style.height = r + "px", d.style.overflow = h > 0 && d.scrollHeight > h ? "auto" : "hidden";
 				}
 				d.addEventListener && d.addEventListener("input", e), setTimeout(e, 0);
 			}
@@ -11090,21 +11649,24 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 					});
 				}
 			} else i.appendChild(d);
-			i._update = function(e) {
+			var g = null;
+			(n.attrs.hint || n.attrs.rule) && (g = t("div", { class: "tokui-field__hint" }, n.attrs.hint || ""), i.appendChild(g)), p(i, d, g, n.attrs, "tokui-input", function() {
+				return d.value;
+			}), i._update = function(e) {
 				e.v !== void 0 && (d.value = e.v), e.dis === !0 || e.dis === "true" ? d.disabled = !0 : (e.dis === !1 || e.dis === "false") && (d.disabled = !1), e.ro === !0 || e.ro === "true" ? d.readOnly = !0 : (e.ro === !1 || e.ro === "false") && (d.readOnly = !1);
 			};
-			var h = e.createReporter("textarea", n.attrs, i), g = e.debounce(function() {
-				h("change", {
+			var _ = e.createReporter("textarea", n.attrs, i), v = e.debounce(function() {
+				_("change", {
 					value: d.value,
 					name: n.attrs.n || void 0
 				});
 			}, parseInt(n.attrs.db) || 300);
-			return d.addEventListener("input", g), i._variantTarget = d, i._slot = d, i._tokuiType = "textarea", i;
+			return d.addEventListener("input", v), i._variantTarget = d, i._slot = d, i._tokuiType = "textarea", i;
 		}), e.register("picker", (n, r) => {
 			let i = n.attrs.multi !== void 0, a = n.attrs.dis !== void 0, o = n.attrs.n || n.attrs.id || "picker", s = n.attrs.ph || "", c = t("div", { class: (n.attrs.v ? n.attrs.v.split(",").map((e) => e.trim()) : []).indexOf("inline") === -1 ? "tokui-field" : "tokui-field tokui-field--inline" });
 			if (n.attrs.l) {
 				let e = { class: "tokui-label" };
-				n.attrs.id && (e.for = n.attrs.id), c.appendChild(t("label", e, n.attrs.l));
+				n.attrs.id && (e.for = n.attrs.id), n.attrs.req !== void 0 && (e.class += " tokui-label--req"), c.appendChild(t("label", e, n.attrs.l));
 			}
 			let l = ["tokui-picker"];
 			i && l.push("tokui-picker--multi"), a && l.push("tokui-picker--disabled");
@@ -11114,13 +11676,13 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				role: "listbox",
 				"aria-expanded": "false"
 			});
-			var f = "", p = "";
+			var d = "", p = "";
 			i || n.children.forEach((e) => {
-				e.attrs && e.attrs.chk !== void 0 && (f = e.attrs.v || "", p = e.attrs && e.attrs.tx || f);
+				e.attrs && e.attrs.chk !== void 0 && (d = e.attrs.v || "", p = e.attrs && e.attrs.tx || d);
 			});
 			let m = t("div", { class: "tokui-picker-control" });
 			i && n.children.forEach((e) => {
-				e.attrs && e.attrs.chk !== void 0 && m.appendChild(b(e, u, o));
+				e.attrs && e.attrs.chk !== void 0 && m.appendChild(C(e, u, o));
 			});
 			let h = {
 				class: "tokui-picker-search",
@@ -11130,9 +11692,9 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			s && !p && (h.placeholder = s), a && (h.disabled = "disabled"), p && (h.value = p), m.appendChild(t("input", h)), m.appendChild(t("span", { class: "tokui-picker-arrow" })), u.appendChild(m);
 			let g = t("ul", { class: "tokui-picker-dropdown" });
 			n.children.forEach((e) => {
-				g.appendChild(y(e));
+				g.appendChild(x(e));
 			});
-			var _ = t("li", { class: "tokui-picker-empty" }, d("picker.noMatch"));
+			var _ = t("li", { class: "tokui-picker-empty" }, f("picker.noMatch"));
 			_.style.display = "none", g.appendChild(_), u.appendChild(g), i ? n.children.forEach((e) => {
 				e.attrs && e.attrs.chk !== void 0 && u.appendChild(t("input", {
 					type: "hidden",
@@ -11142,10 +11704,10 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			}) : u.appendChild(t("input", {
 				type: "hidden",
 				name: o,
-				value: f
+				value: d
 			})), c.appendChild(u), c._variantTarget = u, c._slot = g, c._tokuiType = "picker";
 			var v = e.createReporter("picker", n.attrs, c);
-			function S(e) {
+			function y(e) {
 				v("change", {
 					value: e,
 					name: n.attrs.n || void 0
@@ -11167,10 +11729,10 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 						name: o,
 						value: r
 					}));
-				}), !a && typeof document < "u" && x(u, {
+				}), !a && typeof document < "u" && w(u, {
 					multi: i,
 					name: o,
-					onChange: S
+					onChange: y
 				});
 			}, c.setAttribute("data-tokui-resettable", ""), c._tokuiReset = function() {
 				var e = u.querySelector(".tokui-picker-search"), n = u.querySelector("input[type=hidden]"), r = g.querySelectorAll(".tokui-picker-option");
@@ -11191,8 +11753,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 							value: a
 						}));
 					}
-				})) : (e && (e.value = p), n && (n.value = f), r.forEach(function(e) {
-					var t = !!f && e.getAttribute("data-value") === f;
+				})) : (e && (e.value = p), n && (n.value = d), r.forEach(function(e) {
+					var t = !!d && e.getAttribute("data-value") === d;
 					e.classList.toggle("tokui-picker-option--selected", t);
 				}));
 			}, c._update = function(e) {
@@ -11234,7 +11796,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				}
 			}, c;
 		});
-		function y(e) {
+		function x(e) {
 			let n = e.attrs && e.attrs.v || "", r = e.attrs && e.attrs.tx || n || e.content || "", i = e.attrs && e.attrs.chk !== void 0, a = t("li", {
 				class: "tokui-picker-option",
 				"data-value": n,
@@ -11245,14 +11807,14 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			}, r);
 			return i && a.classList.add("tokui-picker-option--selected"), i && a.setAttribute("data-selected-initial", "1"), a;
 		}
-		function b(e, n, r) {
+		function C(e, n, r) {
 			let i = e.attrs && e.attrs.tx || e.attrs && e.attrs.v || e.content || "", a = t("span", {
 				class: "tokui-picker-tag",
 				"data-value": e.attrs && e.attrs.v || e.content || ""
 			}, i + " "), o = t("span", { class: "tokui-picker-tag-close" }, "×");
 			return a.appendChild(o), a;
 		}
-		function x(e, n) {
+		function w(e, n) {
 			var r = n.multi, i = n.name, a = typeof n.onChange == "function" ? n.onChange : null, o = e.querySelector(".tokui-picker-control"), s = e.querySelector(".tokui-picker-search"), c = e.querySelector(".tokui-picker-dropdown"), l = e.querySelector(".tokui-picker-empty"), u = !1, d = -1;
 			function f() {
 				if (a) if (r) {
@@ -11378,7 +11940,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				n.attrs.id && !i && (e.for = n.attrs.id), n.attrs.req !== void 0 && (e.class += " tokui-label--req"), s.appendChild(t("label", e, n.attrs.l));
 			}
 			let c = { class: "tokui-select" };
-			i && (c.multiple = !0), n.attrs.id && (c.id = n.attrs.id), n.attrs.n ? c.name = n.attrs.n : n.attrs.id && (c.name = n.attrs.id), n.attrs.req !== void 0 && (c["aria-required"] = "true"), a.indexOf("error") !== -1 && (c["aria-invalid"] = "true");
+			i && (c.multiple = !0), n.attrs.id && (c.id = n.attrs.id), n.attrs.n ? c.name = n.attrs.n : n.attrs.id && (c.name = n.attrs.id), n.attrs.req !== void 0 && !i && (c.required = "required"), n.attrs.req !== void 0 && (c["aria-required"] = "true"), a.indexOf("error") !== -1 && (c["aria-invalid"] = "true");
 			let l = t("select", c);
 			if (n.attrs.ph) {
 				let e = t("option", {
@@ -11391,12 +11953,20 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			r(n.children).forEach((e) => {
 				e && e.nodeType && l.appendChild(e);
 			}), s.appendChild(l);
-			var u = e.createReporter("select", n.attrs, s);
+			var u = null;
+			(n.attrs.hint || n.attrs.rule) && (u = t("div", { class: "tokui-field__hint" }, n.attrs.hint || ""), s.appendChild(u)), p(s, l, u, n.attrs, "tokui-select", function() {
+				if (!i) return l.value;
+				var e = [];
+				return Array.prototype.forEach.call(l.children, function(t) {
+					t && t.tagName === "OPTION" && t.selected && e.push(t.value == null ? "" : String(t.value));
+				}), e.join(",");
+			});
+			var d = e.createReporter("select", n.attrs, s);
 			return l.addEventListener("change", function() {
 				var e;
 				i ? (e = [], Array.prototype.forEach.call(l.children, function(t) {
 					!t || t.tagName !== "OPTION" || t.selected && e.push(t.value == null ? String(t.getAttribute("value") || "") : String(t.value));
-				})) : e = l.value, u("change", {
+				})) : e = l.value, d("change", {
 					value: e,
 					name: n.attrs.n || void 0
 				});
@@ -11417,7 +11987,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		}), e.register("radio", (n, r) => {
 			n = o(n);
 			let i = n.attrs.v ? n.attrs.v.split(",").map((e) => e.trim()) : [], a = t("div", { class: i.indexOf("inline") === -1 ? "tokui-field" : "tokui-field tokui-field--inline" });
-			n.attrs.l && a.appendChild(t("div", { class: "tokui-label" }, n.attrs.l));
+			n.attrs.l && a.appendChild(t("div", { class: "tokui-label" + (n.attrs.req === void 0 ? "" : " tokui-label--req") }, n.attrs.l));
 			let s = t("div", {
 				class: "tokui-radio-group" + (i.indexOf("vertical") === -1 ? "" : " tokui-radio-group--vertical"),
 				role: "radiogroup"
@@ -11425,7 +11995,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			n.attrs.id && (s.id = n.attrs.id);
 			let c = n.attrs.n || n.attrs.id || "radio";
 			s._radioName = c, n.children.forEach((e) => {
-				s.appendChild(C(e, c));
+				s.appendChild(T(e, c));
 			}), a.appendChild(s), a._slot = s, a._tokuiType = "radio";
 			var l = e.createReporter("radio", n.attrs, a);
 			return s.addEventListener("change", function(e) {
@@ -11443,7 +12013,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				}
 			}, a;
 		});
-		function C(e, n) {
+		function T(e, n) {
 			let r = t("label", { class: "tokui-radio-item" });
 			r.setAttribute("data-tokui-tag", "opt");
 			let i = {
@@ -11455,7 +12025,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			let a = e.attrs && e.attrs.tx || e.attrs && e.attrs.v || e.content || "";
 			return r.appendChild(t("span", { class: "tokui-radio-text" }, a)), r;
 		}
-		function w(e, n) {
+		function E(e, n) {
 			let r = t("label", { class: "tokui-checkbox-item" });
 			r.setAttribute("data-tokui-tag", "opt");
 			let i = {
@@ -11468,9 +12038,9 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			return r.appendChild(t("span", { class: "tokui-checkbox-text" }, a)), r;
 		}
 		e.register("opt", (e, n, r) => {
-			if (r === "radio") return C(e, "");
-			if (r === "checkbox") return w(e, "");
-			if (r === "picker") return y(e);
+			if (r === "radio") return T(e, "");
+			if (r === "checkbox") return E(e, "");
+			if (r === "picker") return x(e);
 			let i = e.attrs ? e.attrs.v : "", a = e.attrs && e.attrs.tx || i || e.content || "", o = { value: i };
 			return e.attrs && e.attrs.chk !== void 0 && (o.selected = ""), t("option", o, a);
 		}), e.register("checkbox", (n, r) => {
@@ -11505,13 +12075,13 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				return i._update = s, i;
 			}
 			let l = n.attrs.v ? n.attrs.v.split(",").map((e) => e.trim()) : [], u = t("div", { class: l.indexOf("inline") === -1 ? "tokui-field" : "tokui-field tokui-field--inline" });
-			n.attrs.l && u.appendChild(t("div", { class: "tokui-label" }, n.attrs.l));
+			n.attrs.l && u.appendChild(t("div", { class: "tokui-label" + (n.attrs.req === void 0 ? "" : " tokui-label--req") }, n.attrs.l));
 			let d = n.attrs.n || n.attrs.id || "checkbox", f = t("div", {
 				class: "tokui-checkbox-group" + (l.indexOf("vertical") === -1 ? "" : " tokui-checkbox-group--vertical"),
 				role: "group"
 			});
 			f._checkboxName = d, n.attrs.id && (f.id = n.attrs.id), n.children && n.children.length && n.children.forEach(function(e) {
-				f.appendChild(w(e, d));
+				f.appendChild(E(e, d));
 			}), u.appendChild(f), u._slot = f, u._tokuiType = "checkbox";
 			var a = e.createReporter("checkbox", n.attrs, u);
 			return f.addEventListener("change", function() {
@@ -11566,12 +12136,117 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		}), e.register("slider", (n) => {
 			var r = parseFloat(n.attrs.min) || 0, i = parseFloat(n.attrs.max) || 100, a = parseFloat(n.attrs.step) || 1, o = parseFloat(n.attrs.v) || 0;
 			o < r && (o = r), o > i && (o = i);
-			var s = t("div", { class: "tokui-field" });
-			n.attrs.l && s.appendChild(t("label", {
-				class: "tokui-label",
+			var s = [];
+			n.attrs.marks && String(n.attrs.marks).split(",").forEach(function(e) {
+				var t = e.trim();
+				if (t) {
+					var n = t.indexOf(":"), r = parseFloat(n === -1 ? t : t.substring(0, n));
+					isNaN(r) || s.push({
+						v: r,
+						tx: n === -1 ? t : t.substring(n + 1).trim()
+					});
+				}
+			});
+			function c() {
+				var e = t("div", { class: "tokui-slider__marks" });
+				return s.forEach(function(n) {
+					var a = (n.v - r) / (i - r) * 100;
+					a < 0 && (a = 0), a > 100 && (a = 100);
+					var o = t("div", { class: "tokui-slider__mark" });
+					o.style.left = a + "%", o.appendChild(t("span", { class: "tokui-slider__mark-dot" })), o.appendChild(t("span", { class: "tokui-slider__mark-label" }, n.tx)), e.appendChild(o);
+				}), e;
+			}
+			if (n.attrs.range !== void 0) {
+				var l = r, u = i;
+				if (n.attrs.v !== void 0) {
+					var d = String(n.attrs.v).split(","), f = parseFloat(d[0]), p = parseFloat(d[1]);
+					isNaN(f) || (l = f), isNaN(p) || (u = p);
+				}
+				if (l = Math.max(r, Math.min(i, l)), u = Math.max(r, Math.min(i, u)), l > u) {
+					var m = l;
+					l = u, u = m;
+				}
+				var h = t("div", { class: "tokui-field" });
+				n.attrs.l && h.appendChild(t("label", {
+					class: "tokui-label" + (n.attrs.req === void 0 ? "" : " tokui-label--req"),
+					for: n.attrs.id || ""
+				}, n.attrs.l));
+				var g = t("div", { class: "tokui-slider tokui-slider--range" }), _ = t("div", { class: "tokui-slider__track" }), v = t("div", { class: "tokui-slider__fill" }), y = t("div", {
+					class: "tokui-slider__thumb tokui-slider__thumb--min",
+					role: "slider",
+					"aria-valuemin": String(r),
+					"aria-valuemax": String(i),
+					"aria-valuenow": String(l),
+					"aria-label": (n.attrs.l || "Slider") + " min",
+					tabindex: "0"
+				}), b = t("div", {
+					class: "tokui-slider__thumb tokui-slider__thumb--max",
+					role: "slider",
+					"aria-valuemin": String(r),
+					"aria-valuemax": String(i),
+					"aria-valuenow": String(u),
+					"aria-label": (n.attrs.l || "Slider") + " max",
+					tabindex: "0"
+				}), x = t("span", { class: "tokui-slider__value" }, l + " ~ " + u), S = t("input", { type: "hidden" });
+				n.attrs.id && (S.id = n.attrs.id), n.attrs.n ? S.name = n.attrs.n : n.attrs.id && (S.name = n.attrs.id), _.appendChild(v), _.appendChild(y), _.appendChild(b), s.length && (_.appendChild(c()), g.classList.add("tokui-slider--has-marks")), g.appendChild(_), g.appendChild(x), g.appendChild(S);
+				function o() {
+					var e = (l - r) / (i - r) * 100, t = (u - r) / (i - r) * 100;
+					v.style.left = e + "%", v.style.width = t - e + "%", y.style.left = e + "%", b.style.left = t + "%", y.setAttribute("aria-valuenow", String(l)), b.setAttribute("aria-valuenow", String(u)), x.textContent = l + " ~ " + u, S.value = l + "," + u;
+				}
+				if (o(), n.attrs.dis !== void 0) g.classList.add("tokui-slider--disabled");
+				else {
+					var C = e.createReporter("slider", n.attrs, h), w = null, T = function(e) {
+						var t = _.getBoundingClientRect(), n = ((e.touches ? e.touches[0].clientX : e.clientX) - t.left) / t.width;
+						n = Math.max(0, Math.min(1, n));
+						var o = r + n * (i - r), s = Math.round(o / a) * a;
+						s = Math.max(r, Math.min(i, s));
+						var c = a < 1 ? 10 ** Math.ceil(-Math.log10(a)) : 1;
+						return Math.round(s * c) / c;
+					}, E = function(e) {
+						e.preventDefault();
+						var t = T(e);
+						w === "min" ? l = Math.min(t, u) : u = Math.max(t, l), o();
+					}, D = function() {
+						if (document.removeEventListener("mousemove", E), document.removeEventListener("mouseup", D), document.removeEventListener("touchmove", E), document.removeEventListener("touchend", D), (w === "min" ? y : b).classList.remove("tokui-slider__thumb--dragging"), n.attrs.clk) {
+							var t = e.eventBus ? e.eventBus.getHandler(n.attrs.clk) : null;
+							t && t({
+								value: [l, u],
+								id: n.attrs.id
+							});
+						}
+						C("change", {
+							value: [l, u],
+							name: n.attrs.n || void 0
+						}), w = null;
+					}, O = function(e) {
+						e.preventDefault();
+						var t = T(e);
+						w = Math.abs(t - l) <= Math.abs(t - u) ? "min" : "max", l === u && (w = t <= l ? "min" : "max"), E(e), document.addEventListener("mousemove", E), document.addEventListener("mouseup", D), document.addEventListener("touchmove", E), document.addEventListener("touchend", D), (w === "min" ? y : b).classList.add("tokui-slider__thumb--dragging");
+					};
+					g.addEventListener("mousedown", O), g.addEventListener("touchstart", O, { passive: !1 });
+				}
+				h._update = function(e) {
+					if (e.v !== void 0) {
+						var t = String(e.v).split(","), n = parseFloat(t[0]), a = parseFloat(t[1]);
+						if (isNaN(n) || (l = Math.max(r, Math.min(i, n))), isNaN(a) || (u = Math.max(r, Math.min(i, a))), l > u) {
+							var s = l;
+							l = u, u = s;
+						}
+						o();
+					}
+					e.dis === !0 || e.dis === "true" ? g.classList.add("tokui-slider--disabled") : (e.dis === !1 || e.dis === "false") && g.classList.remove("tokui-slider--disabled");
+				};
+				var k = l, A = u;
+				return h.setAttribute("data-tokui-resettable", ""), h._tokuiReset = function() {
+					l = k, u = A, o();
+				}, g._variantTarget = g, h.appendChild(g), h;
+			}
+			var j = t("div", { class: "tokui-field" });
+			n.attrs.l && j.appendChild(t("label", {
+				class: "tokui-label" + (n.attrs.req === void 0 ? "" : " tokui-label--req"),
 				for: n.attrs.id || ""
 			}, n.attrs.l));
-			var c = t("div", { class: "tokui-slider" }), l = t("div", { class: "tokui-slider__track" }), u = t("div", { class: "tokui-slider__fill" }), d = t("div", {
+			var M = t("div", { class: "tokui-slider" }), N = t("div", { class: "tokui-slider__track" }), P = t("div", { class: "tokui-slider__fill" }), F = t("div", {
 				class: "tokui-slider__thumb",
 				role: "slider",
 				"aria-valuemin": String(r),
@@ -11579,127 +12254,208 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				"aria-valuenow": String(o),
 				"aria-label": n.attrs.l || "Slider",
 				tabindex: "0"
-			}), f = t("span", { class: "tokui-slider__value" }, String(o)), p = t("input", { type: "hidden" });
-			n.attrs.id && (p.id = n.attrs.id), n.attrs.n ? p.name = n.attrs.n : n.attrs.id && (p.name = n.attrs.id), p.value = o, l.appendChild(u), l.appendChild(d), c.appendChild(l), c.appendChild(f), c.appendChild(p);
-			var m = (o - r) / (i - r) * 100;
-			if (u.style.width = m + "%", d.style.left = m + "%", n.attrs.dis !== void 0) c.classList.add("tokui-slider--disabled");
+			}), I = t("span", { class: "tokui-slider__value" }, String(o)), L = t("input", { type: "hidden" });
+			n.attrs.id && (L.id = n.attrs.id), n.attrs.n ? L.name = n.attrs.n : n.attrs.id && (L.name = n.attrs.id), L.value = o, N.appendChild(P), N.appendChild(F), s.length && (N.appendChild(c()), M.classList.add("tokui-slider--has-marks")), M.appendChild(N), M.appendChild(I), M.appendChild(L);
+			var R = (o - r) / (i - r) * 100;
+			if (P.style.width = R + "%", F.style.left = R + "%", n.attrs.dis !== void 0) M.classList.add("tokui-slider--disabled");
 			else {
-				var h = e.createReporter("slider", n.attrs, s), g = function(e) {
+				var z = e.createReporter("slider", n.attrs, j), B = function(e) {
 					e.preventDefault();
-					var t = l.getBoundingClientRect(), n = ((e.touches ? e.touches[0].clientX : e.clientX) - t.left) / t.width;
+					var t = N.getBoundingClientRect(), n = ((e.touches ? e.touches[0].clientX : e.clientX) - t.left) / t.width;
 					n = Math.max(0, Math.min(1, n));
 					var s = r + n * (i - r), c = Math.round(s / a) * a;
 					c = Math.max(r, Math.min(i, c));
-					var m = a < 1 ? 10 ** Math.ceil(-Math.log10(a)) : 1;
-					c = Math.round(c * m) / m, o = c;
-					var h = (o - r) / (i - r) * 100;
-					u.style.width = h + "%", d.style.left = h + "%", f.textContent = String(o), p.value = o, d.setAttribute("aria-valuenow", String(o));
-				}, _ = function() {
-					if (document.removeEventListener("mousemove", g), document.removeEventListener("mouseup", _), document.removeEventListener("touchmove", g), document.removeEventListener("touchend", _), d.classList.remove("tokui-slider__thumb--dragging"), n.attrs.clk) {
+					var l = a < 1 ? 10 ** Math.ceil(-Math.log10(a)) : 1;
+					c = Math.round(c * l) / l, o = c;
+					var u = (o - r) / (i - r) * 100;
+					P.style.width = u + "%", F.style.left = u + "%", I.textContent = String(o), L.value = o, F.setAttribute("aria-valuenow", String(o));
+				}, V = function() {
+					if (document.removeEventListener("mousemove", B), document.removeEventListener("mouseup", V), document.removeEventListener("touchmove", B), document.removeEventListener("touchend", V), F.classList.remove("tokui-slider__thumb--dragging"), n.attrs.clk) {
 						var t = e.eventBus ? e.eventBus.getHandler(n.attrs.clk) : null;
 						t && t({
 							value: o,
 							id: n.attrs.id
 						});
 					}
-					h("change", {
+					z("change", {
 						value: o,
 						name: n.attrs.n || void 0
 					});
-				}, v = function(e) {
-					e.preventDefault(), g(e), document.addEventListener("mousemove", g), document.addEventListener("mouseup", _), document.addEventListener("touchmove", g), document.addEventListener("touchend", _), d.classList.add("tokui-slider__thumb--dragging");
+				}, H = function(e) {
+					e.preventDefault(), B(e), document.addEventListener("mousemove", B), document.addEventListener("mouseup", V), document.addEventListener("touchmove", B), document.addEventListener("touchend", V), F.classList.add("tokui-slider__thumb--dragging");
 				};
-				c.addEventListener("mousedown", v), c.addEventListener("touchstart", v, { passive: !1 });
+				M.addEventListener("mousedown", H), M.addEventListener("touchstart", H, { passive: !1 });
 			}
-			s._update = function(e) {
+			j._update = function(e) {
 				if (e.v !== void 0) {
 					var t = parseFloat(e.v) || 0;
 					isNaN(r) || (t = Math.max(r, t)), isNaN(i) || (t = Math.min(i, t)), o = t;
 					var n = (o - r) / (i - r) * 100;
-					u.style.width = n + "%", d.style.left = n + "%", f.textContent = String(o), p.value = o, d.setAttribute("aria-valuenow", String(o));
+					P.style.width = n + "%", F.style.left = n + "%", I.textContent = String(o), L.value = o, F.setAttribute("aria-valuenow", String(o));
 				}
-				e.dis === !0 || e.dis === "true" ? c.classList.add("tokui-slider--disabled") : (e.dis === !1 || e.dis === "false") && c.classList.remove("tokui-slider--disabled");
+				e.dis === !0 || e.dis === "true" ? M.classList.add("tokui-slider--disabled") : (e.dis === !1 || e.dis === "false") && M.classList.remove("tokui-slider--disabled");
 			};
-			var y = o;
-			return s.setAttribute("data-tokui-resettable", ""), s._tokuiReset = function() {
-				o = y;
+			var U = o;
+			return j.setAttribute("data-tokui-resettable", ""), j._tokuiReset = function() {
+				o = U;
 				var e = (o - r) / (i - r) * 100;
-				u.style.width = e + "%", d.style.left = e + "%", f.textContent = String(o), p.value = o, d.setAttribute("aria-valuenow", String(o));
-			}, c._variantTarget = c, s.appendChild(c), s;
+				P.style.width = e + "%", F.style.left = e + "%", I.textContent = String(o), L.value = o, F.setAttribute("aria-valuenow", String(o));
+			}, M._variantTarget = M, j.appendChild(M), j;
 		}), e.register("rate", (n) => {
-			var r = parseInt(n.attrs.max) || 5, i = parseInt(n.attrs.v) || 0, a = n.attrs.tx || "★", o = "☆", s = t("div", { class: "tokui-field" });
-			n.attrs.l && s.appendChild(t("label", {
-				class: "tokui-label",
+			var r = parseInt(n.attrs.max) || 5, i = parseInt(n.attrs.v) || 0, a = n.attrs.tx || "★", o = "☆";
+			if (n.attrs.half !== void 0) {
+				var s = parseFloat(n.attrs.v) || 0;
+				s = Math.round(s * 2) / 2, s > r && (s = r), s < 0 && (s = 0);
+				var c = t("div", { class: "tokui-field" });
+				n.attrs.l && c.appendChild(t("label", {
+					class: "tokui-label" + (n.attrs.req === void 0 ? "" : " tokui-label--req"),
+					for: n.attrs.id || ""
+				}, n.attrs.l));
+				var l = t("div", {
+					class: "tokui-rate tokui-rate--half",
+					role: "radiogroup",
+					"aria-label": n.attrs.l || f("rate.defaultLabel"),
+					tabindex: "0"
+				}), u = t("input", { type: "hidden" });
+				n.attrs.id && (u.id = n.attrs.id), n.attrs.n ? u.name = n.attrs.n : n.attrs.id && (u.name = n.attrs.id);
+				for (var d = [], p = [], m = 0; m < r; m++) {
+					var h = t("span", {
+						class: "tokui-rate__star",
+						"data-index": String(m + 1),
+						role: "radio",
+						"aria-checked": "false"
+					});
+					h.appendChild(t("span", { class: "tokui-rate__star__base" }, o));
+					var g = t("span", { class: "tokui-rate__star__on" }, a);
+					h.appendChild(g), h.appendChild(t("span", { class: "tokui-rate__zone tokui-rate__zone--left" })), h.appendChild(t("span", { class: "tokui-rate__zone tokui-rate__zone--right" })), d.push(h), p.push(g), l.appendChild(h);
+				}
+				var _ = t("span", { class: "tokui-rate__text" });
+				l.appendChild(_), l.appendChild(u);
+				var v = e.createReporter("rate", n.attrs, c);
+				function i(e) {
+					for (var t = 0; t < r; t++) {
+						var n = e >= t + 1 ? 100 : e >= t + .5 ? 50 : 0;
+						p[t].style.width = n + "%", n > 0 ? d[t].classList.add("tokui-rate__star--active") : d[t].classList.remove("tokui-rate__star--active"), n === 50 ? d[t].classList.add("tokui-rate__star--half") : d[t].classList.remove("tokui-rate__star--half"), d[t].setAttribute("aria-checked", String(e >= t + 1));
+					}
+					_.textContent = e > 0 ? e + "/" + r : "", u.value = e;
+				}
+				function b(e) {
+					var t = e.closest(".tokui-rate__star");
+					if (!t) return null;
+					var n = parseInt(t.getAttribute("data-index"));
+					return e.classList.contains("tokui-rate__zone--left") ? n - .5 : n;
+				}
+				n.attrs.ro === void 0 ? n.attrs.dis === void 0 ? (l.addEventListener("mouseover", function(e) {
+					var t = e.target.closest ? e.target.closest(".tokui-rate__zone") : null;
+					t && i(b(t));
+				}), l.addEventListener("mouseout", function() {
+					i(s);
+				}), l.addEventListener("click", function(t) {
+					var a = t.target.closest ? t.target.closest(".tokui-rate__zone") : null;
+					if (a) {
+						var o = b(a);
+						if (s = s === o ? 0 : o, i(s), n.attrs.clk) {
+							var c = e.eventBus ? e.eventBus.getHandler(n.attrs.clk) : null;
+							c && c({
+								value: s,
+								max: r,
+								id: n.attrs.id
+							});
+						}
+						v("change", {
+							value: s,
+							name: n.attrs.n || void 0
+						});
+					}
+				}), l.addEventListener("keydown", function(e) {
+					if (e.key === "ArrowRight" || e.key === "ArrowUp") e.preventDefault(), s = Math.min(s + .5, r);
+					else if (e.key === "ArrowLeft" || e.key === "ArrowDown") e.preventDefault(), s = Math.max(s - .5, 0);
+					else return;
+					i(s), v("change", {
+						value: s,
+						name: n.attrs.n || void 0
+					});
+				})) : l.classList.add("tokui-rate--disabled") : l.classList.add("tokui-rate--readonly"), i(s), c._update = function(e) {
+					e.v !== void 0 && (s = parseFloat(e.v) || 0, s = Math.round(s * 2) / 2, s > r && (s = r), s < 0 && (s = 0), i(s)), e.dis === !0 || e.dis === "true" ? l.classList.add("tokui-rate--disabled") : (e.dis === !1 || e.dis === "false") && l.classList.remove("tokui-rate--disabled");
+				};
+				var y = s;
+				return c.setAttribute("data-tokui-resettable", ""), c._tokuiReset = function() {
+					s = y, i(s);
+				}, l._variantTarget = l, c.appendChild(l), c;
+			}
+			var b = t("div", { class: "tokui-field" });
+			n.attrs.l && b.appendChild(t("label", {
+				class: "tokui-label" + (n.attrs.req === void 0 ? "" : " tokui-label--req"),
 				for: n.attrs.id || ""
 			}, n.attrs.l));
-			var c = t("div", {
+			var x = t("div", {
 				class: "tokui-rate",
 				role: "radiogroup",
-				"aria-label": n.attrs.l || d("rate.defaultLabel"),
+				"aria-label": n.attrs.l || f("rate.defaultLabel"),
 				tabindex: "0"
-			}), l = t("input", { type: "hidden" });
-			n.attrs.id && (l.id = n.attrs.id), n.attrs.n ? l.name = n.attrs.n : n.attrs.id && (l.name = n.attrs.id), l.value = i;
-			for (var u = [], f = 0; f < r; f++) {
-				var p = t("span", {
+			}), S = t("input", { type: "hidden" });
+			n.attrs.id && (S.id = n.attrs.id), n.attrs.n ? S.name = n.attrs.n : n.attrs.id && (S.name = n.attrs.id), S.value = i;
+			for (var C = [], w = 0; w < r; w++) {
+				var T = t("span", {
 					class: "tokui-rate__star",
-					"data-index": String(f + 1),
+					"data-index": String(w + 1),
 					role: "radio",
-					"aria-checked": String(f < i)
+					"aria-checked": String(w < i)
 				});
-				p.textContent = f < i ? a : o, f < i && p.classList.add("tokui-rate__star--active"), u.push(p), c.appendChild(p);
+				T.textContent = w < i ? a : o, w < i && T.classList.add("tokui-rate__star--active"), C.push(T), x.appendChild(T);
 			}
-			var m = t("span", { class: "tokui-rate__text" });
-			i > 0 && (m.textContent = i + "/" + r), c.appendChild(m), c.appendChild(l);
-			var h = e.createReporter("rate", n.attrs, s);
-			n.attrs.ro === void 0 ? n.attrs.dis === void 0 ? (c.addEventListener("mouseover", function(e) {
+			var E = t("span", { class: "tokui-rate__text" });
+			i > 0 && (E.textContent = i + "/" + r), x.appendChild(E), x.appendChild(S);
+			var D = e.createReporter("rate", n.attrs, b);
+			n.attrs.ro === void 0 ? n.attrs.dis === void 0 ? (x.addEventListener("mouseover", function(e) {
 				var t = e.target;
-				if (t.classList.contains("tokui-rate__star")) for (var n = parseInt(t.getAttribute("data-index")), r = 0; r < u.length; r++) u[r].textContent = r < n ? a : o, u[r].classList.toggle("tokui-rate__star--hover", r < n);
-			}), c.addEventListener("mouseout", function() {
-				for (var e = 0; e < u.length; e++) u[e].textContent = e < i ? a : o, u[e].classList.remove("tokui-rate__star--hover");
-			}), c.addEventListener("click", function(t) {
+				if (t.classList.contains("tokui-rate__star")) for (var n = parseInt(t.getAttribute("data-index")), r = 0; r < C.length; r++) C[r].textContent = r < n ? a : o, C[r].classList.toggle("tokui-rate__star--hover", r < n);
+			}), x.addEventListener("mouseout", function() {
+				for (var e = 0; e < C.length; e++) C[e].textContent = e < i ? a : o, C[e].classList.remove("tokui-rate__star--hover");
+			}), x.addEventListener("click", function(t) {
 				var s = t.target;
 				if (s.classList.contains("tokui-rate__star")) {
 					var c = parseInt(s.getAttribute("data-index"));
-					i = i === c ? 0 : c, l.value = i, m.textContent = i > 0 ? i + "/" + r : "";
-					for (var d = 0; d < u.length; d++) u[d].textContent = d < i ? a : o, u[d].classList.toggle("tokui-rate__star--active", d < i), u[d].setAttribute("aria-checked", String(d < i));
+					i = i === c ? 0 : c, S.value = i, E.textContent = i > 0 ? i + "/" + r : "";
+					for (var l = 0; l < C.length; l++) C[l].textContent = l < i ? a : o, C[l].classList.toggle("tokui-rate__star--active", l < i), C[l].setAttribute("aria-checked", String(l < i));
 					if (n.attrs.clk) {
-						var f = e.eventBus ? e.eventBus.getHandler(n.attrs.clk) : null;
-						f && f({
+						var u = e.eventBus ? e.eventBus.getHandler(n.attrs.clk) : null;
+						u && u({
 							value: i,
 							max: r,
 							id: n.attrs.id
 						});
 					}
-					h("change", {
+					D("change", {
 						value: i,
 						name: n.attrs.n || void 0
 					});
 				}
-			}), c.addEventListener("keydown", function(e) {
+			}), x.addEventListener("keydown", function(e) {
 				if (e.key === "ArrowRight" || e.key === "ArrowUp") e.preventDefault(), i = Math.min(i + 1, r);
 				else if (e.key === "ArrowLeft" || e.key === "ArrowDown") e.preventDefault(), i = Math.max(i - 1, 0);
 				else return;
-				l.value = i, m.textContent = i > 0 ? i + "/" + r : "";
-				for (var t = 0; t < u.length; t++) u[t].textContent = t < i ? a : o, u[t].classList.toggle("tokui-rate__star--active", t < i), u[t].setAttribute("aria-checked", String(t < i));
-				h("change", {
+				S.value = i, E.textContent = i > 0 ? i + "/" + r : "";
+				for (var t = 0; t < C.length; t++) C[t].textContent = t < i ? a : o, C[t].classList.toggle("tokui-rate__star--active", t < i), C[t].setAttribute("aria-checked", String(t < i));
+				D("change", {
 					value: i,
 					name: n.attrs.n || void 0
 				});
-			})) : c.classList.add("tokui-rate--disabled") : c.classList.add("tokui-rate--readonly"), s._update = function(e) {
+			})) : x.classList.add("tokui-rate--disabled") : x.classList.add("tokui-rate--readonly"), b._update = function(e) {
 				if (e.v !== void 0) {
-					i = parseInt(e.v) || 0, i > r && (i = r), i < 0 && (i = 0), l.value = i, m.textContent = i > 0 ? i + "/" + r : "";
-					for (var t = 0; t < u.length; t++) u[t].textContent = t < i ? a : o, u[t].classList.toggle("tokui-rate__star--active", t < i), u[t].setAttribute("aria-checked", String(t < i));
+					i = parseInt(e.v) || 0, i > r && (i = r), i < 0 && (i = 0), S.value = i, E.textContent = i > 0 ? i + "/" + r : "";
+					for (var t = 0; t < C.length; t++) C[t].textContent = t < i ? a : o, C[t].classList.toggle("tokui-rate__star--active", t < i), C[t].setAttribute("aria-checked", String(t < i));
 				}
-				e.dis === !0 || e.dis === "true" ? c.classList.add("tokui-rate--disabled") : (e.dis === !1 || e.dis === "false") && c.classList.remove("tokui-rate--disabled");
+				e.dis === !0 || e.dis === "true" ? x.classList.add("tokui-rate--disabled") : (e.dis === !1 || e.dis === "false") && x.classList.remove("tokui-rate--disabled");
 			};
-			var g = i;
-			return s.setAttribute("data-tokui-resettable", ""), s._tokuiReset = function() {
-				i = g, l.value = i, m.textContent = i > 0 ? i + "/" + r : "";
-				for (var e = 0; e < u.length; e++) u[e].textContent = e < i ? a : o, u[e].classList.toggle("tokui-rate__star--active", e < i), u[e].setAttribute("aria-checked", String(e < i));
-			}, c._variantTarget = c, s.appendChild(c), s;
+			var O = i;
+			return b.setAttribute("data-tokui-resettable", ""), b._tokuiReset = function() {
+				i = O, S.value = i, E.textContent = i > 0 ? i + "/" + r : "";
+				for (var e = 0; e < C.length; e++) C[e].textContent = e < i ? a : o, C[e].classList.toggle("tokui-rate__star--active", e < i), C[e].setAttribute("aria-checked", String(e < i));
+			}, x._variantTarget = x, b.appendChild(x), b;
 		}), e.register("transfer", (n, r) => {
 			var i = t("div", { class: "tokui-field" });
-			n.attrs.l && i.appendChild(t("label", { class: "tokui-label" }, n.attrs.l));
+			n.attrs.l && i.appendChild(t("label", { class: "tokui-label" + (n.attrs.req === void 0 ? "" : " tokui-label--req") }, n.attrs.l));
 			var a = t("div", { class: "tokui-transfer" });
 			function o(e) {
 				var n = t("div", {
@@ -11817,7 +12573,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			var r = parseFloat(n.attrs.min), i = parseFloat(n.attrs.max), a = parseFloat(n.attrs.step) || 1, o = parseFloat(n.attrs.v) || 0;
 			isNaN(r) || (o = Math.max(r, o)), isNaN(i) || (o = Math.min(i, o));
 			var s = n.attrs.dis !== void 0, c = t("div", { class: "tokui-field" });
-			n.attrs.l && c.appendChild(t("label", { class: "tokui-label" }, n.attrs.l));
+			n.attrs.l && c.appendChild(t("label", { class: "tokui-label" + (n.attrs.req === void 0 ? "" : " tokui-label--req") }, n.attrs.l));
 			var l = t("div", { class: "tokui-numinput" + (s ? " tokui-numinput--disabled" : "") }), u = t("button", {
 				class: "tokui-numinput__btn tokui-numinput__btn--minus",
 				type: "button"
@@ -11875,7 +12631,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				o = v, f.value = String(o), f.setAttribute("value", String(o)), h.value = o;
 			}, c.appendChild(l), c._variantTarget = l, c;
 		});
-		var T = new Set([
+		var D = new Set([
 			"primary",
 			"danger",
 			"success",
@@ -11890,23 +12646,23 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		e.register("btn", (e) => {
 			let i = n(e.attrs);
 			var a = i.act === "submit" ? "submit" : i.act === "reset" ? "reset" : "button", o = "tokui-btn";
-			e.attrs.t && T.has(e.attrs.t) && (o += " tokui-btn--" + e.attrs.t), i.act === "print" && (o += " tokui-btn--print");
-			let l = {
+			e.attrs.t && D.has(e.attrs.t) && (o += " tokui-btn--" + e.attrs.t), i.act === "print" && (o += " tokui-btn--print");
+			let s = {
 				class: o,
 				type: a
 			};
-			i.formId && (l["data-tokui-form"] = i.formId), i.act && (l["data-tokui-act"] = i.act), i.act === "submit" && i.handler && (l["data-tokui-sub"] = i.handler), i.act === "reset" && i.handler && (l["data-tokui-handler"] = i.handler), i.act === "print" && (l["data-tokui-target"] = i.target, l["data-tokui-print-trigger"] = ""), !i.act && i.handler && (l["data-tokui-clk"] = i.handler), e.attrs.id && (l.id = e.attrs.id), e.attrs.dis !== void 0 && (l.disabled = "disabled"), Object.keys(e.attrs).forEach((t) => {
-				t.startsWith("data-") && (l[t] = e.attrs[t]);
-			});
-			let u = "", d = r(e.attrs.w);
-			d && (u += "width:" + d + ";");
-			let f = s(e.attrs.bg);
-			f && (u += "background:" + f + ";");
-			let p = s(e.attrs.fc);
-			p && (u += "color:" + p + ";");
+			i.formId && (s["data-tokui-form"] = i.formId), i.act && (s["data-tokui-act"] = i.act), i.act === "submit" && i.handler && (s["data-tokui-sub"] = i.handler), i.act === "reset" && i.handler && (s["data-tokui-handler"] = i.handler), i.act === "print" && (s["data-tokui-target"] = i.target, s["data-tokui-print-trigger"] = ""), !i.act && i.handler && (s["data-tokui-clk"] = i.handler), e.attrs.id && (s.id = e.attrs.id), e.attrs.dis !== void 0 && (s.disabled = "disabled"), Object.keys(e.attrs).forEach((t) => {
+				t.startsWith("data-") && (s[t] = e.attrs[t]);
+			});
+			let l = "", u = r(e.attrs.w);
+			u && (l += "width:" + u + ";");
+			let f = c(e.attrs.bg);
+			f && (l += "background:" + f + ";");
+			let p = c(e.attrs.fc);
+			p && (l += "color:" + p + ";");
 			let m = r(e.attrs.radius);
-			m && (u += "border-radius:" + m + ";"), u && (l.style = u);
-			let h = e.attrs.tx || e.content || "", g = e.attrs.icon, _ = e.attrs.i, v = g ? c(g, 16) : "", y = !!(g || _), b = t("button", l);
+			m && (l += "border-radius:" + m + ";"), l && (s.style = l);
+			let h = e.attrs.tx || e.content || "", g = e.attrs.icon, _ = e.attrs.i, v = g ? d(g, 16) : "", y = !!(g || _), b = t("button", s);
 			if (b._tokuiType = "btn", !h && y) {
 				b.classList.add("tokui-btn--icon-only");
 				let t = e.attrs.l || e.attrs.tt || g || "";
@@ -11940,8 +12696,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				e && e.nodeType && i.appendChild(e);
 			}), i._slot = i, i._tokuiType = "btngroup", i;
 		}), e.register("cascader", (n, r) => {
-			var i = n.attrs.dis !== void 0, a = n.attrs.ph || d("select.placeholder"), o = t("div", { class: "tokui-field" });
-			n.attrs.l && o.appendChild(t("label", { class: "tokui-label" }, n.attrs.l)), n.attrs.id && (o.id = n.attrs.id);
+			var i = n.attrs.dis !== void 0, a = n.attrs.ph || f("select.placeholder"), o = t("div", { class: "tokui-field" });
+			n.attrs.l && o.appendChild(t("label", { class: "tokui-label" + (n.attrs.req === void 0 ? "" : " tokui-label--req") }, n.attrs.l)), n.attrs.id && (o.id = n.attrs.id);
 			var s = t("div", {
 				class: "tokui-cascader" + (i ? " tokui-cascader--disabled" : ""),
 				role: "combobox",
@@ -11953,11 +12709,11 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				placeholder: a
 			}), u = t("span", { class: "tokui-cascader-arrow" });
 			c.appendChild(l), c.appendChild(u), s.appendChild(c);
-			var f = t("div", {
+			var d = t("div", {
 				class: "tokui-cascader-menus",
 				role: "listbox"
 			});
-			s.appendChild(f);
+			s.appendChild(d);
 			var p = t("input", { type: "hidden" });
 			n.attrs.n ? p.name = n.attrs.n : n.attrs.id && (p.name = n.attrs.id), s.appendChild(p);
 			var m = t("div", {});
@@ -12012,17 +12768,17 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				return n(e, []);
 			}
 			function y(e, t) {
-				f.innerHTML = "";
+				d.innerHTML = "";
 				for (var n = e, r = 0; r < t.length; r++) {
 					var i = g(n);
-					_(i, t[r]), f.appendChild(i);
+					_(i, t[r]), d.appendChild(i);
 					for (var a = !1, o = 0; o < n.length; o++) if (n[o].v === t[r]) {
 						n = n[o].children, a = !0;
 						break;
 					}
 					if (!a) break;
 				}
-				n && n.length && f.appendChild(g(n));
+				n && n.length && d.appendChild(g(n));
 			}
 			var b = s._cascaderState = s._cascaderState || {
 				isOpen: !1,
@@ -12033,7 +12789,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				if (!i) {
 					b.isOpen = !0, b.tree = e, s.classList.add("tokui-cascader--open"), s.setAttribute("aria-expanded", "true");
 					var t = c.getBoundingClientRect();
-					f.style.left = t.left + "px", f.style.top = t.bottom + 4 + "px", f.style.minWidth = t.width + "px", y(e, b.activeValues);
+					d.style.left = t.left + "px", d.style.top = t.bottom + 4 + "px", d.style.minWidth = t.width + "px", y(e, b.activeValues);
 				}
 			}
 			function S() {
@@ -12042,7 +12798,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			var C = e.createReporter("cascader", n.attrs, o);
 			s._cascaderBindDone || (s._cascaderBindDone = !0, c.addEventListener("click", function(e) {
 				e.stopPropagation(), b.isOpen ? S() : b.tree && x(b.tree);
-			}), f.addEventListener("click", function(e) {
+			}), d.addEventListener("click", function(e) {
 				e.stopPropagation();
 				var t = e.target.closest(".tokui-cascader-option");
 				if (t) {
@@ -12106,114 +12862,179 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				p.value = w.hidden, l.value = w.text, b.isOpen && S();
 			}, o;
 		}), e.register("upload", (n) => {
-			var r = n.attrs.dis !== void 0, i = n.attrs.multi !== void 0, a = parseInt(n.attrs.max) || 0, o = n.attrs.ph || d("upload.hint"), s = n.attrs.accept || "", c = t("div", { class: "tokui-field" });
-			n.attrs.l && c.appendChild(t("label", { class: "tokui-label" }, n.attrs.l)), n.attrs.id && (c.id = n.attrs.id);
-			var l = t("div", { class: "tokui-upload" + (r ? " tokui-upload--disabled" : "") }), u = t("div", {
+			var r = n.attrs.dis !== void 0, i = n.attrs.multi !== void 0, a = parseInt(n.attrs.max) || 0, o = n.attrs.ph || f("upload.hint"), s = n.attrs.accept || "", c = "";
+			n.attrs.u && (/^(https?:\/\/|\/)/i.test(n.attrs.u) ? c = n.attrs.u : console.warn("TokUI: upload u: 仅支持 http(s) 或以 / 开头的路径，已忽略: " + n.attrs.u));
+			var l = (n.attrs.mtd || "POST").toUpperCase(), u = n.attrs.n || "file", d = t("div", { class: "tokui-field" });
+			n.attrs.l && d.appendChild(t("label", { class: "tokui-label" + (n.attrs.req === void 0 ? "" : " tokui-label--req") }, n.attrs.l)), n.attrs.id && (d.id = n.attrs.id);
+			var p = t("div", { class: "tokui-upload" + (r ? " tokui-upload--disabled" : "") }), m = t("div", {
 				class: "tokui-upload-dropzone",
 				role: "button",
 				"aria-label": o,
 				tabindex: "0"
-			}), f = t("div", { class: "tokui-upload-icon" });
-			f.innerHTML = "<svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M24 32V12\"/><path d=\"M16 20l8-8 8 8\"/><path d=\"M8 36h32\"/></svg>", u.appendChild(f);
-			var p = t("div", { class: "tokui-upload-text" });
-			p.textContent = o, u.appendChild(p);
-			var m = t("button", {
+			}), h = t("div", { class: "tokui-upload-icon" });
+			h.innerHTML = "<svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M24 32V12\"/><path d=\"M16 20l8-8 8 8\"/><path d=\"M8 36h32\"/></svg>", m.appendChild(h);
+			var g = t("div", { class: "tokui-upload-text" });
+			g.textContent = o, m.appendChild(g);
+			var _ = t("button", {
 				class: "tokui-upload-btn",
 				type: "button"
 			});
-			m.textContent = d("upload.browse"), u.appendChild(m), l.appendChild(u);
-			var h = {
+			_.textContent = f("upload.browse"), m.appendChild(_), p.appendChild(m);
+			var v = {
 				type: "file",
 				style: "display:none"
 			};
-			s && (h.accept = s), i && (h.multiple = "multiple");
-			var g = t("input", h);
-			l.appendChild(g);
-			var _ = t("div", { class: "tokui-upload-filelist" });
-			l.appendChild(_);
-			var v = t("input", { type: "hidden" });
-			n.attrs.n ? v.name = n.attrs.n : n.attrs.id && (v.name = n.attrs.id), l.appendChild(v);
-			function y(e) {
+			s && (v.accept = s), i && (v.multiple = "multiple");
+			var y = t("input", v);
+			p.appendChild(y);
+			var b = t("div", { class: "tokui-upload-filelist" });
+			p.appendChild(b);
+			var x = t("input", { type: "hidden" });
+			n.attrs.n ? x.name = n.attrs.n : n.attrs.id && (x.name = n.attrs.id), p.appendChild(x);
+			function S(e) {
 				return e < 1024 ? e + " B" : e < 1048576 ? (e / 1024).toFixed(1) + " KB" : (e / 1048576).toFixed(1) + " MB";
 			}
-			var b = [], x = e.createReporter("upload", n.attrs, c);
-			function S() {
-				x("change", {
-					value: b.map(function(e) {
+			var C = [], w = e.createReporter("upload", n.attrs, d);
+			function T() {
+				w("change", {
+					value: C.map(function(e) {
 						return e.name;
 					}),
 					name: n.attrs.n || void 0
 				});
 			}
-			function C() {
-				_.innerHTML = "", b.forEach(function(e, n) {
+			function E() {
+				b.innerHTML = "", C.forEach(function(e, n) {
 					var r = t("div", { class: "tokui-upload-file" }), i = t("span", { class: "tokui-upload-file-icon" });
 					i.textContent = "📄", r.appendChild(i);
 					var a = t("span", { class: "tokui-upload-file-name" });
 					a.textContent = e.name, a.title = e.name, r.appendChild(a);
 					var o = t("span", { class: "tokui-upload-file-size" });
-					o.textContent = y(e.size), r.appendChild(o);
-					var s = t("span", { class: "tokui-upload-file-remove" });
-					s.textContent = "✕", s.setAttribute("data-idx", n), r.appendChild(s), _.appendChild(r);
-				}), v.value = b.map(function(e) {
+					if (o.textContent = S(e.size), r.appendChild(o), e.status === "uploading") {
+						var s = t("div", {
+							class: "tokui-upload__progress",
+							role: "progressbar",
+							title: f("upload.uploading")
+						}), c = t("div", { class: "tokui-upload__progress-bar" });
+						c.style.width = (e.percent || 0) + "%", s.appendChild(c), r.appendChild(s);
+						var l = t("span", { class: "tokui-upload__percent" });
+						l.textContent = (e.percent || 0) + "%", r.appendChild(l);
+					} else if (e.status === "done") r.appendChild(t("span", {
+						class: "tokui-upload__status tokui-upload__status--done",
+						title: f("upload.done")
+					}, "✓"));
+					else if (e.status === "error") {
+						r.appendChild(t("span", {
+							class: "tokui-upload__status tokui-upload__status--error",
+							title: f("upload.failed")
+						}, "✗"));
+						var u = t("button", {
+							class: "tokui-upload__retry",
+							type: "button"
+						}, f("upload.retry"));
+						u.setAttribute("data-idx", n), r.appendChild(u);
+					}
+					var d = t("span", { class: "tokui-upload-file-remove" });
+					d.textContent = "✕", d.setAttribute("data-idx", n), r.appendChild(d), b.appendChild(r);
+				}), x.value = C.map(function(e) {
 					return e.name;
 				}).join(",");
 			}
-			function w(t) {
-				for (var r = 0; r < t.length && !(a && b.length >= a); r++) b.push({
-					name: t[r].name,
-					size: t[r].size,
-					type: t[r].type
-				});
-				if (C(), n.attrs.clk) {
-					var i = e.eventBus ? e.eventBus.getHandler(n.attrs.clk) : null;
-					i && i({
+			function D(e) {
+				if (typeof XMLHttpRequest > "u") {
+					e.status = void 0, E();
+					return;
+				}
+				e.status = "uploading", e.percent = 0, E();
+				var t = new XMLHttpRequest();
+				t.open(l, c, !0);
+				var n = new FormData();
+				n.append(u, e.file, e.name), t.upload && typeof t.upload.addEventListener == "function" && t.upload.addEventListener("progress", function(t) {
+					var n = t && t.total ? Math.round(t.loaded / t.total * 100) : 0;
+					e.percent = n, E(), w("progress", {
+						file: e.name,
+						percent: n
+					});
+				}), t.onload = function() {
+					t.status >= 200 && t.status < 300 ? (e.status = "done", E(), w("success", {
+						file: e.name,
+						response: t.responseText
+					})) : (e.status = "error", E(), w("error", {
+						file: e.name,
+						error: "HTTP " + t.status
+					}));
+				}, t.onerror = function() {
+					e.status = "error", E(), w("error", {
+						file: e.name,
+						error: "network error"
+					});
+				}, t.send(n);
+			}
+			function O(t) {
+				for (var r = [], i = 0; i < t.length && !(a && C.length >= a); i++) {
+					var o = {
+						name: t[i].name,
+						size: t[i].size,
+						type: t[i].type
+					};
+					c && (o.file = t[i], o.status = "uploading", o.percent = 0, r.push(o)), C.push(o);
+				}
+				if (E(), n.attrs.clk) {
+					var s = e.eventBus ? e.eventBus.getHandler(n.attrs.clk) : null;
+					s && s({
 						id: n.attrs.id,
-						files: b
+						files: C
 					});
 				}
-				S();
-			}
-			return r || (u.addEventListener("click", function(e) {
-				(e.target === m || u.contains(e.target)) && g.click();
-			}), m.addEventListener("click", function(e) {
-				e.stopPropagation(), g.click();
-			}), g.addEventListener("change", function() {
-				g.files && g.files.length && (w(g.files), g.value = "");
-			}), u.addEventListener("dragover", function(e) {
-				e.preventDefault(), l.classList.add("tokui-upload--dragover");
-			}), u.addEventListener("dragleave", function(e) {
-				e.preventDefault(), l.classList.remove("tokui-upload--dragover");
-			}), u.addEventListener("drop", function(e) {
-				e.preventDefault(), l.classList.remove("tokui-upload--dragover"), e.dataTransfer && e.dataTransfer.files.length && w(e.dataTransfer.files);
+				T();
+				for (var l = 0; l < r.length; l++) D(r[l]);
+			}
+			return r || (m.addEventListener("click", function(e) {
+				(e.target === _ || m.contains(e.target)) && y.click();
 			}), _.addEventListener("click", function(e) {
-				var t = e.target.closest(".tokui-upload-file-remove");
+				e.stopPropagation(), y.click();
+			}), y.addEventListener("change", function() {
+				y.files && y.files.length && (O(y.files), y.value = "");
+			}), m.addEventListener("dragover", function(e) {
+				e.preventDefault(), p.classList.add("tokui-upload--dragover");
+			}), m.addEventListener("dragleave", function(e) {
+				e.preventDefault(), p.classList.remove("tokui-upload--dragover");
+			}), m.addEventListener("drop", function(e) {
+				e.preventDefault(), p.classList.remove("tokui-upload--dragover"), e.dataTransfer && e.dataTransfer.files.length && O(e.dataTransfer.files);
+			}), b.addEventListener("click", function(e) {
+				var t = e.target.closest(".tokui-upload__retry");
 				if (t) {
 					var n = parseInt(t.getAttribute("data-idx"));
-					!isNaN(n) && n >= 0 && n < b.length && (b.splice(n, 1), C(), S());
+					!isNaN(n) && n >= 0 && n < C.length && D(C[n]);
+					return;
 				}
-			})), c.appendChild(l), c._variantTarget = l, c._update = function(e) {
-				e.act === "clear" && (b.length = 0, g.value = "", C());
-			}, c;
+				var r = e.target.closest(".tokui-upload-file-remove");
+				if (r) {
+					var i = parseInt(r.getAttribute("data-idx"));
+					!isNaN(i) && i >= 0 && i < C.length && (C.splice(i, 1), E(), T());
+				}
+			})), d.appendChild(p), d._variantTarget = p, d._update = function(e) {
+				e.act === "clear" && (C.length = 0, y.value = "", E());
+			}, d;
 		});
-		function E(e) {
+		function O(e) {
 			if (!e) return null;
 			var t = e.match(/^(\d{4})-(\d{1,2})-(\d{1,2})/);
 			return t ? new Date(parseInt(t[1]), parseInt(t[2]) - 1, parseInt(t[3])) : null;
 		}
-		function D(e) {
+		function k(e) {
 			if (!e) return null;
 			var t = e.match(/^(\d{4})-(\d{1,2})-(\d{1,2})\s+(\d{1,2}):(\d{1,2})/);
 			return t ? new Date(parseInt(t[1]), parseInt(t[2]) - 1, parseInt(t[3]), parseInt(t[4]), parseInt(t[5])) : null;
 		}
-		function O(e, t) {
+		function A(e, t) {
 			var n = e.getFullYear(), r = e.getMonth() + 1, i = e.getDate(), a = e.getHours(), o = e.getMinutes(), s = e.getSeconds();
 			return t.replace("YYYY", String(n)).replace("MM", r < 10 ? "0" + r : String(r)).replace("DD", i < 10 ? "0" + i : String(i)).replace("HH", a < 10 ? "0" + a : String(a)).replace("mm", o < 10 ? "0" + o : String(o)).replace("ss", s < 10 ? "0" + s : String(s));
 		}
-		function k(e, t, n, r) {
+		function j(e, t, n, r) {
 			return r.replace("HH", e < 10 ? "0" + e : String(e)).replace("mm", t < 10 ? "0" + t : String(t)).replace("ss", n < 10 ? "0" + n : String(n));
 		}
-		function A(e, t) {
+		function M(e, t) {
 			var n = e.querySelector(".tokui-timepicker-column-list");
 			if (n) {
 				var r = n.querySelectorAll(".tokui-timepicker-column-item");
@@ -12222,8 +13043,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				}));
 			}
 		}
-		function j(e, t) {
-			A(e, t);
+		function N(e, t) {
+			M(e, t);
 			var n = e.querySelector(".tokui-timepicker-column-list");
 			if (n) {
 				var r = n.querySelectorAll(".tokui-timepicker-column-item");
@@ -12237,7 +13058,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				}
 			}
 		}
-		function M(e) {
+		function P(e) {
 			var t = e.querySelector(".tokui-timepicker-column-list");
 			if (!t) return 0;
 			var n = t.querySelectorAll(".tokui-timepicker-column-item");
@@ -12252,14 +13073,14 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			var u = n[0].offsetHeight || 32, d = Math.round((t.scrollTop + (t.clientHeight || 192) / 2) / u) - 0;
 			return Math.max(0, Math.min(d, n.length - 1));
 		}
-		function N(e, n, r) {
+		function F(e, n, r) {
 			for (var i = t("div", { class: "tokui-timepicker-column" }), a = t("div", { class: "tokui-timepicker-column-list" }), o = 0; o < n; o++) {
 				var s = t("div", {
 					class: "tokui-timepicker-column-item" + (o === r ? " tokui-timepicker-column-item--selected" : ""),
 					"data-value": String(o)
 				}, o < 10 ? "0" + o : String(o));
 				s.addEventListener("click", function(e) {
-					e.stopPropagation(), j(i, parseInt(this.getAttribute("data-value"), 10));
+					e.stopPropagation(), N(i, parseInt(this.getAttribute("data-value"), 10));
 				}), a.appendChild(s);
 			}
 			i.appendChild(a);
@@ -12268,166 +13089,201 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			};
 			return a.addEventListener("scroll", function() {
 				c || (c = 1, l(function() {
-					c = 0, A(i, M(i));
+					c = 0, M(i, P(i));
 				}));
 			}), i._label = e, i;
 		}
-		function P(e) {
-			var t = M(e);
-			A(e, t);
+		function I(e) {
+			var t = P(e);
+			M(e, t);
 			var n = e.querySelector(".tokui-timepicker-column-list").querySelectorAll(".tokui-timepicker-column-item");
 			return parseInt(n[t].getAttribute("data-value")) || 0;
 		}
-		function F(e, t) {
-			j(e, t);
+		function L(e, t) {
+			N(e, t);
 		}
-		var I = typeof window < "u" && window.TokUI && window.TokUI._internal ? window.TokUI._internal._datePickers = window.TokUI._internal._datePickers || /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set();
-		function L(e) {
+		var R = typeof window < "u" && window.TokUI && window.TokUI._internal ? window.TokUI._internal._datePickers = window.TokUI._internal._datePickers || /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set();
+		function z(e) {
 			var t = [];
-			I.forEach(function(n) {
+			R.forEach(function(n) {
 				n !== e && t.push(n);
 			}), t.forEach(function(e) {
 				try {
 					e();
 				} catch {}
-			}), I.add(e);
+			}), R.add(e);
 		}
-		function R(e) {
-			I.delete(e);
+		function B(e) {
+			R.delete(e);
 		}
-		function z() {
+		function V() {
 			var e = [];
-			I.forEach(function(t) {
+			R.forEach(function(t) {
 				e.push(t);
-			}), I.clear(), e.forEach(function(e) {
+			}), R.clear(), e.forEach(function(e) {
 				try {
 					e();
 				} catch {}
 			});
 		}
-		typeof window < "u" && !window.TokUI._internal._dateScrollBound && (window.addEventListener("scroll", z), window.TokUI._internal._dateScrollBound = !0);
-		function B() {
+		typeof window < "u" && !window.TokUI._internal._dateScrollBound && (window.addEventListener("scroll", V), window.TokUI._internal._dateScrollBound = !0);
+		function H() {
 			return typeof window < "u" && window.innerWidth ? window.innerWidth : typeof document < "u" && document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : 1024;
 		}
-		function V(e, n, r, i, a) {
-			var o = t("div", { class: "tokui-datepicker-header" }), s = t("button", {
+		function U(e, n, r, i, a, o) {
+			var s = t("div", { class: "tokui-datepicker-header" }), c = t("button", {
 				class: "tokui-datepicker-nav tokui-datepicker-nav--prev",
 				type: "button"
 			});
-			s.innerHTML = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"15 18 9 12 15 6\"/></svg>";
-			var c = t("button", {
+			c.innerHTML = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"15 18 9 12 15 6\"/></svg>";
+			var l = t("button", {
 				class: "tokui-datepicker-nav tokui-datepicker-nav--next",
 				type: "button"
 			});
-			c.innerHTML = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"/></svg>";
-			var l = t("span", { class: "tokui-datepicker-title" }, d("datepicker.title", {
+			l.innerHTML = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"/></svg>";
+			var u = t("span", { class: "tokui-datepicker-title" }, f("datepicker.title", {
 				y: e,
 				m: n + 1
 			}));
-			o.appendChild(s), o.appendChild(l), o.appendChild(c), a.appendChild(o);
-			var u = [
-				d("datepicker.weekday.0"),
-				d("datepicker.weekday.1"),
-				d("datepicker.weekday.2"),
-				d("datepicker.weekday.3"),
-				d("datepicker.weekday.4"),
-				d("datepicker.weekday.5"),
-				d("datepicker.weekday.6")
-			], f = t("div", { class: "tokui-datepicker-weekdays" });
-			u.forEach(function(e) {
-				f.appendChild(t("span", { class: "tokui-datepicker-weekday" }, e));
-			}), a.appendChild(f);
-			for (var p = t("div", { class: "tokui-datepicker-grid" }), m = new Date(e, n, 1).getDay(), h = new Date(e, n + 1, 0).getDate(), g = new Date(e, n, 0).getDate(), _ = i.getDate(), v = i.getFullYear() === e && i.getMonth() === n, y = m - 1; y >= 0; y--) p.appendChild(t("span", { class: "tokui-datepicker-day tokui-datepicker-day--other" }, String(g - y)));
-			for (var b = 1; b <= h; b++) {
-				var x = ["tokui-datepicker-day"];
-				v && b === _ && x.push("tokui-datepicker-day--today"), r && r.getFullYear() === e && r.getMonth() === n && r.getDate() === b && x.push("tokui-datepicker-day--selected");
-				var S = t("span", {
-					class: x.join(" "),
-					"data-day": String(b)
-				}, String(b));
-				p.appendChild(S);
-			}
-			for (var C = 42 - m - h, w = 1; w <= C; w++) p.appendChild(t("span", { class: "tokui-datepicker-day tokui-datepicker-day--other" }, String(w)));
-			return a.appendChild(p), {
-				prevBtn: s,
-				nextBtn: c
+			s.appendChild(c), s.appendChild(u), s.appendChild(l), a.appendChild(s);
+			var d = [
+				f("datepicker.weekday.0"),
+				f("datepicker.weekday.1"),
+				f("datepicker.weekday.2"),
+				f("datepicker.weekday.3"),
+				f("datepicker.weekday.4"),
+				f("datepicker.weekday.5"),
+				f("datepicker.weekday.6")
+			], p = t("div", { class: "tokui-datepicker-weekdays" });
+			d.forEach(function(e) {
+				p.appendChild(t("span", { class: "tokui-datepicker-weekday" }, e));
+			}), a.appendChild(p);
+			for (var m = t("div", { class: "tokui-datepicker-grid" }), h = new Date(e, n, 1).getDay(), g = new Date(e, n + 1, 0).getDate(), _ = new Date(e, n, 0).getDate(), v = i.getDate(), y = i.getFullYear() === e && i.getMonth() === n, b = h - 1; b >= 0; b--) m.appendChild(t("span", { class: "tokui-datepicker-day tokui-datepicker-day--other" }, String(_ - b)));
+			for (var x = 1; x <= g; x++) {
+				var S = ["tokui-datepicker-day"];
+				if (y && x === v && S.push("tokui-datepicker-day--today"), r && r.getFullYear() === e && r.getMonth() === n && r.getDate() === x && S.push("tokui-datepicker-day--selected"), o && (o.start || o.end)) {
+					var C = new Date(e, n, x).getTime(), w = o.start ? o.start.getTime() : null, T = o.end ? o.end.getTime() : null;
+					w !== null && C === w && S.push("tokui-datepicker-day--range-start"), T !== null && C === T && S.push("tokui-datepicker-day--range-end"), w !== null && T !== null && C > w && C < T && S.push("tokui-datepicker-day--in-range");
+				}
+				var E = t("span", {
+					class: S.join(" "),
+					"data-day": String(x)
+				}, String(x));
+				m.appendChild(E);
+			}
+			for (var D = 42 - h - g, O = 1; O <= D; O++) m.appendChild(t("span", { class: "tokui-datepicker-day tokui-datepicker-day--other" }, String(O)));
+			return a.appendChild(m), {
+				prevBtn: c,
+				nextBtn: l
 			};
 		}
 		e.register("datepicker", (n) => {
-			var r = n.attrs || {}, i = r.dis !== void 0, a = r.fmt || "YYYY-MM-DD", o = r.ph || a, s = r.v || "", c = t("div", { class: "tokui-field" });
-			r.l && c.appendChild(t("label", { class: "tokui-label" }, r.l));
-			var l = ["tokui-datepicker"];
-			i && l.push("tokui-datepicker--disabled");
-			var u = t("div", { class: l.join(" ") }), d = t("div", { class: "tokui-datepicker-control" }), f = {
+			var r = n.attrs || {}, i = r.dis !== void 0, a = r.fmt || "YYYY-MM-DD", o = r.range !== void 0, s = r.ph || (o ? "YYYY-MM-DD ~ YYYY-MM-DD" : a), c = r.v || "", l = null, u = null;
+			if (o && c) {
+				var d = String(c).split(" ~ ");
+				if (l = O(d[0]), u = d.length > 1 ? O(d[1]) : null, l && u && u.getTime() < l.getTime()) {
+					var f = l;
+					l = u, u = f;
+				}
+			}
+			var p = t("div", { class: "tokui-field" });
+			r.l && p.appendChild(t("label", { class: "tokui-label" + (r.req === void 0 ? "" : " tokui-label--req") }, r.l));
+			var m = ["tokui-datepicker"];
+			i && m.push("tokui-datepicker--disabled");
+			var h = t("div", { class: m.join(" ") }), g = t("div", { class: "tokui-datepicker-control" }), _ = {
 				class: "tokui-datepicker-input",
 				type: "text",
 				readonly: "readonly",
-				placeholder: o
+				placeholder: s
 			};
-			r.id && (f.id = r.id), i && (f.disabled = "disabled"), s && (f.value = s);
-			var p = t("input", f);
-			d.appendChild(p);
-			var m = t("span", { class: "tokui-datepicker-icon" });
-			m.innerHTML = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/></svg>", d.appendChild(m), u.appendChild(d);
-			var h = t("div", { class: "tokui-datepicker-dropdown" }), g = /* @__PURE__ */ new Date(), _, v, y;
-			s && (y = E(s), y && (_ = y.getFullYear(), v = y.getMonth())), _ || (_ = g.getFullYear(), v = g.getMonth());
-			var b = t("input", { type: "hidden" });
-			r.n ? b.name = r.n : r.id && (b.name = r.id), b.value = s, u.appendChild(b);
-			var x = e.createReporter("datepicker", r, c);
-			function S(e, t) {
-				h.innerHTML = "";
-				var n = V(e, t, y, g, h);
+			r.id && (_.id = r.id), i && (_.disabled = "disabled"), c && (_.value = c);
+			var v = t("input", _);
+			g.appendChild(v);
+			var y = t("span", { class: "tokui-datepicker-icon" });
+			y.innerHTML = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/></svg>", g.appendChild(y), h.appendChild(g);
+			var b = t("div", { class: "tokui-datepicker-dropdown" }), x = /* @__PURE__ */ new Date(), S, C, w;
+			c && (w = O(c), w && (S = w.getFullYear(), C = w.getMonth())), S || (S = x.getFullYear(), C = x.getMonth());
+			var T = t("input", { type: "hidden" });
+			r.n ? T.name = r.n : r.id && (T.name = r.id), T.value = c, h.appendChild(T);
+			var E = e.createReporter("datepicker", r, p);
+			function D(e, t) {
+				b.innerHTML = "";
+				var n = U(e, t, w, x, b, o ? {
+					start: l,
+					end: u
+				} : null);
 				n.prevBtn.addEventListener("click", function(e) {
-					e.stopPropagation(), v--, v < 0 && (v = 11, _--), S(_, v);
+					e.stopPropagation(), C--, C < 0 && (C = 11, S--), D(S, C);
 				}), n.nextBtn.addEventListener("click", function(e) {
-					e.stopPropagation(), v++, v > 11 && (v = 0, _++), S(_, v);
+					e.stopPropagation(), C++, C > 11 && (C = 0, S++), D(S, C);
 				});
 			}
-			S(_, v), h.style.display = "none", u.appendChild(h);
-			var C = !1;
-			function w() {
-				if (!(i || C)) {
-					L(T), C = !0, h.style.display = "", u.classList.add("tokui-datepicker--open");
-					var e = d.getBoundingClientRect();
-					h.style.left = e.left + "px", h.style.top = e.bottom + 4 + "px", h.style.width = "auto";
-					var t = B();
-					e.left + h.offsetWidth > t - 8 && (h.style.left = Math.max(8, t - h.offsetWidth - 8) + "px");
+			D(S, C), b.style.display = "none", h.appendChild(b);
+			var k = !1;
+			function j() {
+				if (!(i || k)) {
+					z(M), k = !0, b.style.display = "", h.classList.add("tokui-datepicker--open");
+					var e = g.getBoundingClientRect();
+					b.style.left = e.left + "px", b.style.top = e.bottom + 4 + "px", b.style.width = "auto";
+					var t = H();
+					e.left + b.offsetWidth > t - 8 && (b.style.left = Math.max(8, t - b.offsetWidth - 8) + "px");
 				}
 			}
-			function T() {
-				C && (C = !1, h.style.display = "none", u.classList.remove("tokui-datepicker--open"), R(T));
+			function M() {
+				k && (k = !1, b.style.display = "none", h.classList.remove("tokui-datepicker--open"), B(M));
 			}
-			return i || (d.addEventListener("click", function(e) {
-				e.stopPropagation(), C ? T() : w();
-			}), h.addEventListener("click", function(t) {
+			return i || (g.addEventListener("click", function(e) {
+				e.stopPropagation(), k ? M() : j();
+			}), b.addEventListener("click", function(t) {
 				t.stopPropagation();
 				var n = t.target.closest(".tokui-datepicker-day");
 				if (!(!n || n.classList.contains("tokui-datepicker-day--other"))) {
 					var i = parseInt(n.getAttribute("data-day"));
-					y = new Date(_, v, i);
-					var o = O(y, a);
-					if (p.value = o, b.value = o, T(), S(_, v), r.clk) {
-						var s = e.eventBus ? e.eventBus.getHandler(r.clk) : null;
-						s && s({
-							value: o,
-							date: y,
+					if (o) {
+						var s = new Date(S, C, i);
+						if (!l || l && u ? (l = s, u = null) : s.getTime() < l.getTime() ? (u = l, l = s) : u = s, l && u) {
+							var c = A(l, "YYYY-MM-DD") + " ~ " + A(u, "YYYY-MM-DD");
+							if (v.value = c, T.value = c, M(), r.clk) {
+								var d = e.eventBus ? e.eventBus.getHandler(r.clk) : null;
+								d && d({
+									value: c,
+									start: l,
+									end: u,
+									id: r.id
+								});
+							}
+							E("change", {
+								value: c,
+								name: r.n || void 0
+							});
+						}
+						D(S, C);
+						return;
+					}
+					w = new Date(S, C, i);
+					var f = A(w, a);
+					if (v.value = f, T.value = f, M(), D(S, C), r.clk) {
+						var p = e.eventBus ? e.eventBus.getHandler(r.clk) : null;
+						p && p({
+							value: f,
+							date: w,
 							id: r.id
 						});
 					}
-					x("change", {
-						value: o,
+					E("change", {
+						value: f,
 						name: r.n || void 0
 					});
 				}
 			}), typeof document < "u" && document.addEventListener("click", function(e) {
-				u.contains(e.target) || T();
-			})), c.appendChild(u), c._variantTarget = u, c;
+				h.contains(e.target) || M();
+			})), p.appendChild(h), p._variantTarget = h, p;
 		}), e.register("timepicker", (n) => {
 			var r = n.attrs || {}, i = r.dis !== void 0, a = r.fmt || "HH:mm", o = r.ph || a, s = r.v || "", c = t("div", { class: "tokui-field" });
-			r.l && c.appendChild(t("label", { class: "tokui-label" }, r.l));
+			r.l && c.appendChild(t("label", { class: "tokui-label" + (r.req === void 0 ? "" : " tokui-label--req") }, r.l));
 			var l = ["tokui-timepicker"];
 			i && l.push("tokui-timepicker--disabled");
-			var u = t("div", { class: l.join(" ") }), f = t("div", { class: "tokui-timepicker-control" }), p = {
+			var u = t("div", { class: l.join(" ") }), d = t("div", { class: "tokui-timepicker-control" }), p = {
 				class: "tokui-timepicker-input",
 				type: "text",
 				readonly: "readonly",
@@ -12435,46 +13291,46 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			};
 			r.id && (p.id = r.id), i && (p.disabled = "disabled"), s && (p.value = s);
 			var m = t("input", p);
-			f.appendChild(m);
+			d.appendChild(m);
 			var h = t("span", { class: "tokui-timepicker-icon" });
-			h.innerHTML = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg>", f.appendChild(h), u.appendChild(f);
+			h.innerHTML = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg>", d.appendChild(h), u.appendChild(d);
 			var g = 0, _ = 0, v = 0;
 			if (s) {
 				var y = s.split(":");
 				g = parseInt(y[0]) || 0, _ = parseInt(y[1]) || 0, v = parseInt(y[2]) || 0;
 			}
-			var b = t("div", { class: "tokui-timepicker-dropdown" }), x = a.indexOf("ss") !== -1 || a.indexOf("s") !== -1, S = t("div", { class: "tokui-timepicker-columns" }), C = N(d("duration.hour"), 24, g), w = N(d("duration.minute"), 60, _);
+			var b = t("div", { class: "tokui-timepicker-dropdown" }), x = a.indexOf("ss") !== -1 || a.indexOf("s") !== -1, S = t("div", { class: "tokui-timepicker-columns" }), C = F(f("duration.hour"), 24, g), w = F(f("duration.minute"), 60, _);
 			S.appendChild(C), S.appendChild(w);
 			var T = null;
-			x && (T = N(d("duration.second"), 60, v), S.appendChild(T)), b.appendChild(S);
+			x && (T = F(f("duration.second"), 60, v), S.appendChild(T)), b.appendChild(S);
 			var E = t("div", { class: "tokui-timepicker-footer" }), D = t("button", {
 				class: "tokui-timepicker-confirm",
 				type: "button"
-			}, d("common.ok"));
+			}, f("common.ok"));
 			E.appendChild(D), b.appendChild(E);
 			var O = t("input", { type: "hidden" });
 			r.n ? O.name = r.n : r.id && (O.name = r.id), O.value = s, u.appendChild(O);
-			var A = e.createReporter("timepicker", r, c);
+			var k = e.createReporter("timepicker", r, c);
 			b.style.display = "none", u.appendChild(b);
-			var j = !1;
+			var A = !1;
 			function M() {
-				if (!(i || j)) {
-					L(I), j = !0, b.style.display = "", u.classList.add("tokui-timepicker--open");
-					var e = f.getBoundingClientRect();
+				if (!(i || A)) {
+					z(N), A = !0, b.style.display = "", u.classList.add("tokui-timepicker--open");
+					var e = d.getBoundingClientRect();
 					b.style.left = e.left + "px", b.style.top = e.bottom + 4 + "px", b.style.width = "auto";
-					var t = B();
-					e.left + b.offsetWidth > t - 8 && (b.style.left = Math.max(8, t - b.offsetWidth - 8) + "px"), F(C, g), F(w, _), x && T && F(T, v);
+					var t = H();
+					e.left + b.offsetWidth > t - 8 && (b.style.left = Math.max(8, t - b.offsetWidth - 8) + "px"), L(C, g), L(w, _), x && T && L(T, v);
 				}
 			}
-			function I() {
-				j && (j = !1, b.style.display = "none", u.classList.remove("tokui-timepicker--open"), R(I));
+			function N() {
+				A && (A = !1, b.style.display = "none", u.classList.remove("tokui-timepicker--open"), B(N));
 			}
-			return i || (f.addEventListener("click", function(e) {
-				e.stopPropagation(), j ? I() : M();
+			return i || (d.addEventListener("click", function(e) {
+				e.stopPropagation(), A ? N() : M();
 			}), D.addEventListener("click", function(t) {
-				t.stopPropagation(), g = P(C), _ = P(w), x && T && (v = P(T));
-				var n = k(g, _, v, a);
-				if (m.value = n, O.value = n, I(), r.clk) {
+				t.stopPropagation(), g = I(C), _ = I(w), x && T && (v = I(T));
+				var n = j(g, _, v, a);
+				if (m.value = n, O.value = n, N(), r.clk) {
 					var i = e.eventBus ? e.eventBus.getHandler(r.clk) : null;
 					i && i({
 						value: n,
@@ -12484,19 +13340,19 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 						id: r.id
 					});
 				}
-				A("change", {
+				k("change", {
 					value: n,
 					name: r.n || void 0
 				});
 			}), typeof document < "u" && document.addEventListener("click", function(e) {
-				u.contains(e.target) || I();
+				u.contains(e.target) || N();
 			})), c.appendChild(u), c._variantTarget = u, c;
 		}), e.register("datetimepicker", (n) => {
 			var r = n.attrs || {}, i = r.dis !== void 0, a = r.fmt || "YYYY-MM-DD HH:mm", o = r.ph || a, s = r.v || "", c = t("div", { class: "tokui-field" });
-			r.l && c.appendChild(t("label", { class: "tokui-label" }, r.l));
+			r.l && c.appendChild(t("label", { class: "tokui-label" + (r.req === void 0 ? "" : " tokui-label--req") }, r.l));
 			var l = ["tokui-datetimepicker"];
 			i && l.push("tokui-datetimepicker--disabled");
-			var u = t("div", { class: l.join(" ") }), f = t("div", { class: "tokui-datetimepicker-control" }), p = {
+			var u = t("div", { class: l.join(" ") }), d = t("div", { class: "tokui-datetimepicker-control" }), p = {
 				class: "tokui-datetimepicker-input",
 				type: "text",
 				readonly: "readonly",
@@ -12504,58 +13360,58 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			};
 			r.id && (p.id = r.id), i && (p.disabled = "disabled"), s && (p.value = s);
 			var m = t("input", p);
-			f.appendChild(m);
+			d.appendChild(m);
 			var h = t("span", { class: "tokui-datetimepicker-icon" });
-			h.innerHTML = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/></svg>", f.appendChild(h), u.appendChild(f);
+			h.innerHTML = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/></svg>", d.appendChild(h), u.appendChild(d);
 			var g = /* @__PURE__ */ new Date(), _, v, y, b = 0, x = 0, S = 0;
-			s && (y = D(s) || E(s), y && (_ = y.getFullYear(), v = y.getMonth(), b = y.getHours(), x = y.getMinutes(), S = y.getSeconds())), _ || (_ = g.getFullYear(), v = g.getMonth());
+			s && (y = k(s) || O(s), y && (_ = y.getFullYear(), v = y.getMonth(), b = y.getHours(), x = y.getMinutes(), S = y.getSeconds())), _ || (_ = g.getFullYear(), v = g.getMonth());
 			var C = t("input", { type: "hidden" });
 			r.n ? C.name = r.n : r.id && (C.name = r.id), C.value = s, u.appendChild(C);
-			var w = e.createReporter("datetimepicker", r, c), T = t("div", { class: "tokui-datetimepicker-dropdown" }), k = t("div", { class: "tokui-datetimepicker-date" }), A = a.indexOf("ss") !== -1 || a.indexOf("s") !== -1, j = t("div", { class: "tokui-datetimepicker-time" }), M = t("div", { class: "tokui-timepicker-columns" }), I = N(d("duration.hour"), 24, b), z = N(d("duration.minute"), 60, x);
-			M.appendChild(I), M.appendChild(z);
-			var H = null;
-			A && (H = N(d("duration.second"), 60, S), M.appendChild(H)), j.appendChild(M);
-			function U(e, t) {
-				k.innerHTML = "";
-				var n = V(e, t, y, g, k);
+			var w = e.createReporter("datetimepicker", r, c), T = t("div", { class: "tokui-datetimepicker-dropdown" }), E = t("div", { class: "tokui-datetimepicker-date" }), D = a.indexOf("ss") !== -1 || a.indexOf("s") !== -1, j = t("div", { class: "tokui-datetimepicker-time" }), M = t("div", { class: "tokui-timepicker-columns" }), N = F(f("duration.hour"), 24, b), P = F(f("duration.minute"), 60, x);
+			M.appendChild(N), M.appendChild(P);
+			var R = null;
+			D && (R = F(f("duration.second"), 60, S), M.appendChild(R)), j.appendChild(M);
+			function V(e, t) {
+				E.innerHTML = "";
+				var n = U(e, t, y, g, E);
 				n.prevBtn.addEventListener("click", function(e) {
-					e.stopPropagation(), v--, v < 0 && (v = 11, _--), U(_, v);
+					e.stopPropagation(), v--, v < 0 && (v = 11, _--), V(_, v);
 				}), n.nextBtn.addEventListener("click", function(e) {
-					e.stopPropagation(), v++, v > 11 && (v = 0, _++), U(_, v);
+					e.stopPropagation(), v++, v > 11 && (v = 0, _++), V(_, v);
 				});
 			}
 			var W = t("div", { class: "tokui-datetimepicker-footer" }), G = t("button", {
 				class: "tokui-timepicker-confirm",
 				type: "button"
-			}, d("common.ok"));
+			}, f("common.ok"));
 			W.appendChild(G);
 			var K = t("div", { class: "tokui-datetimepicker-body" });
-			K.appendChild(k), K.appendChild(j), T.appendChild(K), T.appendChild(W), U(_, v), T.style.display = "none", u.appendChild(T);
+			K.appendChild(E), K.appendChild(j), T.appendChild(K), T.appendChild(W), V(_, v), T.style.display = "none", u.appendChild(T);
 			var q = !1;
 			function J() {
 				if (!(i || q)) {
-					L(Y), q = !0, T.style.display = "", u.classList.add("tokui-datetimepicker--open");
-					var e = f.getBoundingClientRect();
+					z(Y), q = !0, T.style.display = "", u.classList.add("tokui-datetimepicker--open");
+					var e = d.getBoundingClientRect();
 					T.style.left = e.left + "px", T.style.top = e.bottom + 4 + "px", T.style.width = "auto";
-					var t = T.offsetWidth, n = B();
-					e.left + t > n - 8 && (T.style.left = Math.max(8, n - t - 8) + "px"), F(I, b), F(z, x), A && H && F(H, S);
+					var t = T.offsetWidth, n = H();
+					e.left + t > n - 8 && (T.style.left = Math.max(8, n - t - 8) + "px"), L(N, b), L(P, x), D && R && L(R, S);
 				}
 			}
 			function Y() {
-				q && (q = !1, T.style.display = "none", u.classList.remove("tokui-datetimepicker--open"), R(Y));
+				q && (q = !1, T.style.display = "none", u.classList.remove("tokui-datetimepicker--open"), B(Y));
 			}
-			return i || (f.addEventListener("click", function(e) {
+			return i || (d.addEventListener("click", function(e) {
 				e.stopPropagation(), q ? Y() : J();
-			}), k.addEventListener("click", function(e) {
+			}), E.addEventListener("click", function(e) {
 				e.stopPropagation();
 				var t = e.target.closest(".tokui-datepicker-day");
 				if (!(!t || t.classList.contains("tokui-datepicker-day--other"))) {
 					var n = parseInt(t.getAttribute("data-day"));
-					y = new Date(_, v, n), U(_, v);
+					y = new Date(_, v, n), V(_, v);
 				}
 			}), G.addEventListener("click", function(t) {
-				t.stopPropagation(), y ||= new Date(_, v, g.getDate()), b = P(I), x = P(z), A && H && (S = P(H)), y.setHours(b, x, S);
-				var n = O(y, a);
+				t.stopPropagation(), y ||= new Date(_, v, g.getDate()), b = I(N), x = I(P), D && R && (S = I(R)), y.setHours(b, x, S);
+				var n = A(y, a);
 				if (m.value = n, C.value = n, Y(), r.clk) {
 					var i = e.eventBus ? e.eventBus.getHandler(r.clk) : null;
 					i && i({
@@ -13255,93 +14111,142 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				w();
 			}, c;
 		}), e.register("carousel-item", (e, t) => u(e, t)), e.register("tn", (e, n) => {
-			var r = e.attrs.leaf !== void 0, i = e.attrs.open !== void 0, a = e.attrs.dis !== void 0, o = t("div", {
+			var r = e.attrs.leaf !== void 0, i = e.attrs.open !== void 0, a = e.attrs.dis !== void 0, o = e.attrs.load && !(e.children && e.children.length) ? String(e.attrs.load) : null, s = t("div", {
 				class: "tokui-tree-node" + (r ? " tokui-tree-node--leaf" : "") + (i ? " tokui-tree-node--open" : "") + (a ? " tokui-tree-node--disabled" : ""),
 				role: "treeitem",
 				"aria-expanded": r ? void 0 : String(i)
 			});
-			o.setAttribute("data-value", e.attrs.v || ""), o.setAttribute("data-text", e.attrs.tx || e.attrs.v || ""), e.attrs.id && o.setAttribute("data-id", e.attrs.id);
-			var s = t("div", {
+			s.setAttribute("data-value", e.attrs.v || ""), s.setAttribute("data-text", e.attrs.tx || e.attrs.v || ""), e.attrs.id && s.setAttribute("data-id", e.attrs.id);
+			var c = t("div", {
 				class: "tokui-tree-node-header",
 				tabindex: "0"
-			}), c = t("span", { class: "tokui-tree-arrow" });
-			c.textContent = "▶", s.appendChild(c);
-			var l = t("span", { class: "tokui-tree-icon" });
-			l.textContent = r ? "📄" : "📁", s.appendChild(l);
-			var u = t("span", { class: "tokui-tree-text" }, e.attrs.tx || e.attrs.v || "");
-			s.appendChild(u), o.appendChild(s);
-			var d = null;
-			return r || (d = t("div", { class: "tokui-tree-node-children" }), i || (d.style.display = "none"), e.children && e.children.length && n(e.children).forEach(function(e) {
-				e && e.nodeType && d.appendChild(e);
-			}), o.appendChild(d), o._slot = d), o._tokuiType = "tn", o;
-		}), e.register("tree", (n, r) => {
-			var i = n.attrs.chk !== void 0, a = n.attrs.dis !== void 0, o = t("div", { class: "tokui-field" });
-			n.attrs.l && o.appendChild(t("label", { class: "tokui-label" }, n.attrs.l)), n.attrs.id && (o.id = n.attrs.id);
-			var s = t("div", {
-				class: "tokui-tree" + (i ? " tokui-tree--checkable" : "") + (a ? " tokui-tree--disabled" : ""),
+			}), l = t("span", { class: "tokui-tree-arrow" });
+			l.textContent = "▶", c.appendChild(l);
+			var u = t("span", { class: "tokui-tree-icon" });
+			u.textContent = r ? "📄" : "📁", c.appendChild(u);
+			var d = t("span", { class: "tokui-tree-text" }, e.attrs.tx || e.attrs.v || "");
+			c.appendChild(d), s.appendChild(c);
+			var f = null;
+			return r || (f = t("div", { class: "tokui-tree-node-children" }), i || (f.style.display = "none"), e.children && e.children.length && n(e.children).forEach(function(e) {
+				e && e.nodeType && f.appendChild(e);
+			}), s.appendChild(f), s._slot = f), o && (s._lazyLoad = o, s._lazyLoaded = !1, s._lazyLoading = !1), s._tokuiType = "tn", s;
+		}), e.register("tree", (r, i) => {
+			var a = r.attrs.chk !== void 0, o = r.attrs.dis !== void 0, s = t("div", { class: "tokui-field" });
+			r.attrs.l && s.appendChild(t("label", { class: "tokui-label" }, r.attrs.l)), r.attrs.id && (s.id = r.attrs.id);
+			var c = t("div", {
+				class: "tokui-tree" + (a ? " tokui-tree--checkable" : "") + (o ? " tokui-tree--disabled" : ""),
 				role: "tree"
 			});
-			n.children && n.children.length && r(n.children).forEach(function(e) {
-				e && e.nodeType && s.appendChild(e);
-			}), o.appendChild(s);
-			var c = e.createReporter("tree", n.attrs, o), l = !1;
-			function u() {
-				a || l || (l = !0, s.addEventListener("click", function(e) {
+			r.children && r.children.length && i(r.children).forEach(function(e) {
+				e && e.nodeType && c.appendChild(e);
+			}), s.appendChild(c);
+			var l = e.createReporter("tree", r.attrs, s), u = !1;
+			function d(e) {
+				if (a) {
+					var n = e.querySelector(":scope > .tokui-tree-node-header");
+					if (!(!n || n.querySelector(".tokui-tree-checkbox"))) {
+						var r = t("input", {
+							type: "checkbox",
+							class: "tokui-tree-checkbox"
+						});
+						e.classList.contains("tokui-tree-node--disabled") && (r.disabled = !0), n.insertBefore(r, n.firstChild);
+					}
+				}
+			}
+			function f(r, i) {
+				var a = r._lazyLoad;
+				if (!(!a || r._lazyLoaded || r._lazyLoading)) {
+					var o = e.eventBus ? e.eventBus.getHandler(a) : null;
+					if (!o) {
+						e._warnMissingHandler(a);
+						return;
+					}
+					r._lazyLoading = !0, r.classList.add("tokui-tree__loading");
+					var s = t("div", { class: "tokui-tree-loading" }, n("common.loading"));
+					i.appendChild(s);
+					var c = function(t) {
+						r._lazyLoading = !1, r._lazyLoaded = !0, r.classList.remove("tokui-tree__loading"), s.parentNode && s.parentNode.removeChild(s);
+						var n = Array.isArray(t) ? t : [], a = 0;
+						n.forEach(function(t) {
+							if (!(!t || typeof t != "object")) {
+								var n = e.render(t, "tree");
+								n && n.nodeType && (d(n), i.appendChild(n), a++);
+							}
+						}), l("load", {
+							value: r.getAttribute("data-value"),
+							count: a
+						});
+					}, u;
+					try {
+						u = o({
+							id: r.getAttribute("data-id") || void 0,
+							value: r.getAttribute("data-value")
+						});
+					} catch {
+						u = [];
+					}
+					u && typeof u.then == "function" ? u.then(c, function() {
+						c([]);
+					}) : c(u);
+				}
+			}
+			function p() {
+				o || u || (u = !0, c.addEventListener("click", function(e) {
 					var t = e.target.closest(".tokui-tree-arrow");
 					if (t) {
 						e.stopPropagation();
 						var n = t.closest(".tokui-tree-node");
 						if (!(!n || n.classList.contains("tokui-tree-node--leaf"))) {
 							var r = n.querySelector(":scope > .tokui-tree-node-children");
-							r && (n.classList.contains("tokui-tree-node--open") ? (n.classList.remove("tokui-tree-node--open"), r.style.display = "none") : (n.classList.add("tokui-tree-node--open"), r.style.display = ""));
+							r && (n.classList.contains("tokui-tree-node--open") ? (n.classList.remove("tokui-tree-node--open"), r.style.display = "none") : (n.classList.add("tokui-tree-node--open"), r.style.display = "", f(n, r)));
 						}
 					}
-				}), s.addEventListener("click", function(e) {
+				}), c.addEventListener("click", function(e) {
 					var t = e.target.closest(".tokui-tree-text");
 					if (t) {
 						e.stopPropagation();
-						var r = t.closest(".tokui-tree-node");
-						if (r) {
-							if (s.querySelectorAll(".tokui-tree-node--selected").forEach(function(e) {
+						var n = t.closest(".tokui-tree-node");
+						if (n) {
+							if (c.querySelectorAll(".tokui-tree-node--selected").forEach(function(e) {
 								e.classList.remove("tokui-tree-node--selected");
-							}), r.classList.add("tokui-tree-node--selected"), n.attrs.clk) {
-								var i = typeof window < "u" && window.TokUI && window.TokUI._internal && window.TokUI._internal.TokUIEventBus ? window.TokUI._internal.TokUIEventBus.getHandler(n.attrs.clk) : null;
+							}), n.classList.add("tokui-tree-node--selected"), r.attrs.clk) {
+								var i = typeof window < "u" && window.TokUI && window.TokUI._internal && window.TokUI._internal.TokUIEventBus ? window.TokUI._internal.TokUIEventBus.getHandler(r.attrs.clk) : null;
 								i && i({
-									id: n.attrs.id,
-									value: r.getAttribute("data-value"),
-									text: r.getAttribute("data-text")
+									id: r.attrs.id,
+									value: n.getAttribute("data-value"),
+									text: n.getAttribute("data-text")
 								});
 							}
-							c("change", {
-								value: r.getAttribute("data-value"),
-								id: r.getAttribute("data-id") || void 0
+							l("change", {
+								value: n.getAttribute("data-value"),
+								id: n.getAttribute("data-id") || void 0
 							});
 						}
 					}
-				}), i && (s.querySelectorAll(".tokui-tree-node-header").forEach(function(e) {
+				}), a && (c.querySelectorAll(".tokui-tree-node-header").forEach(function(e) {
 					var n = t("input", {
 						type: "checkbox",
 						class: "tokui-tree-checkbox"
 					}), r = e.closest(".tokui-tree-node");
 					r && r.classList.contains("tokui-tree-node--disabled") && (n.disabled = !0), e.insertBefore(n, e.firstChild);
-				}), s.addEventListener("change", function(e) {
+				}), c.addEventListener("change", function(e) {
 					if (e.target.classList.contains("tokui-tree-checkbox")) {
 						var t = e.target.closest(".tokui-tree-node");
 						if (t) {
 							var n = e.target.checked;
 							t.querySelectorAll(".tokui-tree-checkbox").forEach(function(t) {
 								t !== e.target && (t.checked = n, t.indeterminate = !1);
-							}), d(s);
+							}), m(c);
 							var r = [];
-							Array.prototype.forEach.call(s.querySelectorAll(".tokui-tree-checkbox"), function(e) {
+							Array.prototype.forEach.call(c.querySelectorAll(".tokui-tree-checkbox"), function(e) {
 								if (e.checked) {
 									var t = e.closest(".tokui-tree-node");
 									t && r.push(t.getAttribute("data-value"));
 								}
-							}), c("check", { value: r });
+							}), l("check", { value: r });
 						}
 					}
-				})), s.addEventListener("keydown", function(e) {
+				})), c.addEventListener("keydown", function(e) {
 					var t = e.target.closest(".tokui-tree-node-header");
 					if (t) {
 						var n = t.closest(".tokui-tree-node");
@@ -13352,14 +14257,14 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 								r && !n.classList.contains("tokui-tree-node--leaf") && r.click();
 							} else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
 								e.preventDefault();
-								var i = Array.from(s.querySelectorAll(":scope .tokui-tree-node-header")), a = i.indexOf(t);
+								var i = Array.from(c.querySelectorAll(":scope .tokui-tree-node-header")), a = i.indexOf(t);
 								e.key === "ArrowDown" && a < i.length - 1 ? i[a + 1].focus() : e.key === "ArrowUp" && a > 0 && i[a - 1].focus();
 							}
 						}
 					}
 				}));
 			}
-			function d(e) {
+			function m(e) {
 				e.querySelectorAll(".tokui-tree-node").forEach(function(e) {
 					var t = e.querySelector(":scope > .tokui-tree-node-children");
 					if (t) {
@@ -13376,9 +14281,9 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 					}
 				});
 			}
-			return n.children && n.children.length && u(), o._streamCloseHook = function() {
-				u();
-			}, o._slot = s, o._tokuiType = "tree", o._variantTarget = s, o;
+			return r.children && r.children.length && p(), s._streamCloseHook = function() {
+				p();
+			}, s._slot = c, s._tokuiType = "tree", s._variantTarget = c, s;
 		}), e.register("menu", (n, r) => {
 			var i = n.attrs || {}, a = i.v || "vertical", o = ["tokui-menu"];
 			a === "horizontal" || a === "h" ? o.push("tokui-menu--horizontal") : a === "inline" && o.push("tokui-menu--inline");
@@ -13494,15 +14399,59 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 					for (var r = 1; r < e.length; r++) m.appendChild(e[r]);
 				}
 			}, d._tokuiType = "resizable", d;
-		}), e.register("scroll-area", (e, n) => {
-			var r = e.attrs || {}, i = { class: "tokui-scroll-area" };
-			r.id && (i.id = r.id);
-			var a = t("div", i);
-			r.h && (a.style.height = String(r.h).match(/^\d+$/) ? r.h + "px" : r.h), r.w && (a.style.width = r.w);
-			var o = t("div", { class: "tokui-scroll-area__viewport" });
-			return n(e.children || []).forEach(function(e) {
-				e && e.nodeType && o.appendChild(e);
-			}), a.appendChild(o), a._slot = o, a._tokuiType = "scroll-area", a;
+		}), e.register("scroll-area", (n, r) => {
+			var i = n.attrs || {}, a = i.virtual !== void 0, o = { class: "tokui-scroll-area" + (a ? " tokui-scroll-area--virtual" : "") };
+			i.id && (o.id = i.id);
+			var s = t("div", o);
+			i.h && (s.style.height = String(i.h).match(/^\d+$/) ? i.h + "px" : i.h), i.w && (s.style.width = i.w);
+			var c = t("div", { class: "tokui-scroll-area__viewport" });
+			if (!a) return r(n.children || []).forEach(function(e) {
+				e && e.nodeType && c.appendChild(e);
+			}), s.appendChild(c), s._slot = c, s._tokuiType = "scroll-area", s;
+			var l = parseInt(i.ih, 10) > 0 ? parseInt(i.ih, 10) : 36, u = 5;
+			function d() {
+				return c.clientHeight || parseInt(i.h, 10) || l;
+			}
+			var f = document.createElement("div");
+			r(n.children || []).forEach(function(e) {
+				e && e.nodeType && f.appendChild(e);
+			});
+			var p = [], m = t("div", { class: "tokui-scroll-area__spacer" }), h = t("div", { class: "tokui-scroll-area__spacer" });
+			c.appendChild(m), c.appendChild(h);
+			var g = -1, _ = -1, v = -1;
+			function y() {
+				for (; f.childNodes.length > 0;) p.push(f.removeChild(f.childNodes[0]));
+				var e = p.length, t = c.scrollTop || 0, n = Math.max(0, Math.floor(t / l) - u), r = Math.min(e, Math.ceil((t + d()) / l) + u);
+				if (!(n === g && r === _ && e === v)) {
+					g = n, _ = r, v = e;
+					for (var i = c.children.length - 1; i >= 0; i--) {
+						var a = c.children[i];
+						a !== m && a !== h && c.removeChild(a);
+					}
+					m.style.height = n * l + "px", h.style.height = (e - r) * l + "px";
+					for (var o = n; o < r; o++) c.insertBefore(p[o], h);
+				}
+			}
+			var b = e.createReporter("scroll-area", i, s), x = !1;
+			function S() {
+				y();
+				var e = p.length * l - d(), t = e <= 0 ? !0 : (c.scrollTop || 0) >= e * .8;
+				t && !x ? (x = !0, b("loadmore", {})) : t || (x = !1);
+			}
+			var C = typeof requestAnimationFrame == "function" ? function(e) {
+				requestAnimationFrame(e);
+			} : function(e) {
+				e();
+			}, w = !1;
+			return c.addEventListener("scroll", function() {
+				w || (w = !0, C(function() {
+					w = !1, S();
+				}));
+			}), y(), s.appendChild(c), s._slot = f, s._streamAppendHook = function() {
+				y();
+			}, s._streamCloseHook = function() {
+				y();
+			}, s._tokuiType = "scroll-area", s;
 		}), e.register("sidebar", (e, n) => {
 			var r = e.attrs || {}, i = r.w || "260", a = r.pos || "left", o = r.collapsible !== void 0, s = r.bg || "", c = r.fc || "", l = ["tokui-sidebar", "tokui-sidebar--" + a];
 			o && l.push("tokui-sidebar--collapsible");