@leef-l/macos-ui-kit 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,2053 @@
+// src/component.ts
+var e = class {
+	cleanups = [];
+	destroyed = !1;
+	get element() {
+		return this.root;
+	}
+	get isDestroyed() {
+		return this.destroyed;
+	}
+	listen(e, t, n, r) {
+		e.addEventListener(t, n, r), this.cleanups.push(() => e.removeEventListener(t, n, r));
+	}
+	onDestroy(e) {
+		this.cleanups.push(e);
+	}
+	toggleClass(e, t) {
+		this.root.classList.contains(e) !== t && this.root.classList.toggle(e, t);
+	}
+	setAttr(e, t) {
+		this.root.getAttribute(e) !== t && this.root.setAttribute(e, t);
+	}
+	mount(e = document.body) {
+		return e.replaceChildren(this.root), this;
+	}
+	remove() {
+		this.root.remove(), this.destroy();
+	}
+	destroy() {
+		if (!this.destroyed) {
+			this.destroyed = !0;
+			for (let e of this.cleanups.splice(0)) try {
+				e();
+			} catch (e) {
+				console.error("mac ui: cleanup failed", e);
+			}
+		}
+	}
+};
+// src/dom.ts
+function t(e, t = {}, ...r) {
+	let i = document.createElement(e);
+	for (let [e, n] of Object.entries(t)) n != null && n !== !1 && (e === "class" || e === "className" ? i.className = String(n) : e === "dataset" ? Object.assign(i.dataset, n) : e === "style" ? Object.assign(i.style, n) : e === "text" ? i.textContent = String(n) : e === "html" ? i.innerHTML = String(n) : e.startsWith("on") && typeof n == "function" ? i.addEventListener(e.slice(2).toLowerCase(), n) : e in i ? i[e] = n : i.setAttribute(e, String(n)));
+	return n(i, r), i;
+}
+function n(e, t) {
+	for (let n of t) n != null && n !== !1 && e.appendChild(typeof n == "string" || typeof n == "number" ? document.createTextNode(String(n)) : n);
+}
+function r(e) {
+	for (; e.firstChild;) e.removeChild(e.firstChild);
+}
+function i(e, t = 16, n = "0 0 24 24") {
+	let r = "http://www.w3.org/2000/svg", i = document.createElementNS(r, "svg");
+	i.setAttribute("viewBox", n), i.setAttribute("width", String(t)), i.setAttribute("height", String(t)), i.setAttribute("fill", "none"), i.setAttribute("stroke", "currentColor"), i.setAttribute("stroke-width", "1.8"), i.setAttribute("stroke-linecap", "round"), i.setAttribute("stroke-linejoin", "round"), i.setAttribute("aria-hidden", "true");
+	let a = document.createElementNS(r, "path");
+	return a.setAttribute("d", e), i.appendChild(a), i;
+}
+function a(e) {
+	let t = !1;
+	return () => {
+		t || (t = !0, requestAnimationFrame(() => {
+			t = !1, e();
+		}));
+	};
+}
+var o = 0;
+function s(e = "mac") {
+	return o += 1, `${e}-${o}`;
+}
+// src/overlay.ts
+var c = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left"
+};
+function l(e) {
+	let { anchor: t, panel: n, placement: r = "bottom-start", offset: i = 6, padding: a = 8, matchWidth: o = !1 } = e, s = t.getBoundingClientRect();
+	n.style.position = "fixed", n.style.visibility = "hidden", n.style.display = "block", o && (n.style.minWidth = `${Math.round(s.width)}px`);
+	let l = n.getBoundingClientRect(), u = document.documentElement.clientWidth, d = document.documentElement.clientHeight, [f, p] = r.split("-"), m = f, h = d - s.bottom - i, g = s.top - i, _ = u - s.right - i, v = s.left - i;
+	f === "bottom" && l.height > h && g > h ? m = "top" : f === "top" && l.height > g && h > g ? m = "bottom" : f === "right" && l.width > _ && v > _ ? m = "left" : f === "left" && l.width > v && _ > v ? m = "right" : f in c && l.height > h && f === "bottom" && (m = "top");
+	let y, b;
+	m === "top" || m === "bottom" ? (b = m === "bottom" ? s.bottom + i : s.top - l.height - i, y = p === "start" ? s.left : p === "end" ? s.right - l.width : s.left + (s.width - l.width) / 2) : (y = m === "right" ? s.right + i : s.left - l.width - i, b = p === "start" ? s.top : p === "end" ? s.bottom - l.height : s.top + (s.height - l.height) / 2), y = Math.max(a, Math.min(y, u - l.width - a)), b = Math.max(a, Math.min(b, d - l.height - a)), n.style.left = `${Math.round(y)}px`, n.style.top = `${Math.round(b)}px`, n.style.visibility = "", n.dataset.side = m;
+}
+function u(e) {
+	let t = a(() => l(e));
+	return t(), window.addEventListener("scroll", t, !0), window.addEventListener("resize", t), () => {
+		window.removeEventListener("scroll", t, !0), window.removeEventListener("resize", t);
+	};
+}
+var d = 1e3;
+function f() {
+	return d += 1, d;
+}
+var p = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+function m(e) {
+	return Array.from(e.querySelectorAll(p)).filter((e) => e.offsetParent !== null || e === document.activeElement);
+}
+function h(e) {
+	let t = document.activeElement, n = (t) => {
+		if (t.key !== "Tab") return;
+		let n = m(e);
+		if (n.length === 0) {
+			t.preventDefault();
+			return;
+		}
+		let r = n[0], i = n[n.length - 1], a = document.activeElement;
+		t.shiftKey && (a === r || !e.contains(a)) ? (t.preventDefault(), i.focus()) : !t.shiftKey && a === i && (t.preventDefault(), r.focus());
+	};
+	return e.addEventListener("keydown", n), requestAnimationFrame(() => {
+		(m(e)[0] ?? e).focus();
+	}), () => {
+		e.removeEventListener("keydown", n), t?.focus?.();
+	};
+}
+// src/theme.ts
+var g = [
+	{
+		name: "macos-dark",
+		appearance: "dark"
+	},
+	{
+		name: "macos-light",
+		appearance: "light"
+	},
+	{
+		name: "hc-dark",
+		appearance: "dark"
+	},
+	{
+		name: "hc-light",
+		appearance: "light"
+	}
+], _ = /* @__PURE__ */ new Set(["hc-dark", "hc-light"]);
+function v(e) {
+	return e.startsWith("--") ? e : `--mac-${e}`;
+}
+var y = class {
+	root;
+	themes = /* @__PURE__ */ new Map();
+	applied = [];
+	current;
+	mediaQuery = null;
+	systemListener = null;
+	listeners = /* @__PURE__ */ new Set();
+	constructor(e = document.documentElement) {
+		this.root = e;
+		for (let e of g) this.themes.set(e.name, e);
+		this.current = this.themes.get("macos-dark"), this.followSystem();
+	}
+	register(e) {
+		if (!e.name) throw Error("mac ui: theme needs a name");
+		if (e.appearance !== "light" && e.appearance !== "dark") throw Error(`mac ui: theme "${e.name}" has an invalid appearance`);
+		this.themes.set(e.name, e);
+	}
+	unregister(e) {
+		if (g.some((t) => t.name === e)) throw Error(`mac ui: cannot remove the built-in theme "${e}"`);
+		this.themes.delete(e), this.current.name === e && this.apply("macos-dark");
+	}
+	list() {
+		return [...this.themes.keys()];
+	}
+	get active() {
+		return this.current;
+	}
+	apply(e) {
+		let t = this.themes.get(e);
+		t ? (this.stopFollowingSystem(), this.applyDefinition(t)) : console.error(`mac ui: unknown theme "${e}"`);
+	}
+	followSystem() {
+		this.stopFollowingSystem(), this.mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		let e = () => {
+			let e = this.mediaQuery?.matches ? "macos-dark" : "macos-light", t = this.themes.get(e);
+			t && this.applyDefinition(t);
+		};
+		this.systemListener = e, this.mediaQuery.addEventListener("change", e), e();
+	}
+	get isFollowingSystem() {
+		return this.systemListener !== null;
+	}
+	onChange(e) {
+		return this.listeners.add(e), () => this.listeners.delete(e);
+	}
+	exportActive() {
+		let e = getComputedStyle(this.root), t = {};
+		for (let n of this.applied) {
+			let r = n.replace(/^--mac-/, ""), i = e.getPropertyValue(n).trim();
+			i && (t[r] = i);
+		}
+		return {
+			...this.current,
+			tokens: {
+				...this.current.tokens,
+				...t
+			}
+		};
+	}
+	destroy() {
+		this.stopFollowingSystem(), this.clearOverrides(), this.listeners.clear();
+	}
+	applyDefinition(e) {
+		if (this.clearOverrides(), this.root.setAttribute("data-appearance", e.appearance), this.root.setAttribute("data-theme", e.name), !_.has(e.name) && e.tokens) for (let [t, n] of Object.entries(e.tokens)) {
+			let e = v(t);
+			this.root.style.setProperty(e, n), this.applied.push(e);
+		}
+		this.current = e;
+		for (let t of this.listeners) try {
+			t(e);
+		} catch (e) {
+			console.error("mac ui: theme listener failed", e);
+		}
+	}
+	clearOverrides() {
+		for (let e of this.applied.splice(0)) this.root.style.removeProperty(e);
+	}
+	stopFollowingSystem() {
+		this.mediaQuery && this.systemListener && this.mediaQuery.removeEventListener("change", this.systemListener), this.mediaQuery = null, this.systemListener = null;
+	}
+}, b = new y();
+function x(e) {
+	e === null ? document.documentElement.removeAttribute("data-density") : document.documentElement.setAttribute("data-density", e);
+}
+function S() {
+	return document.documentElement.getAttribute("data-density") || (window.matchMedia("(pointer: coarse)").matches ? "touch" : "comfortable");
+}
+// src/controls/button.ts
+var C = class extends e {
+	root;
+	labelNode = null;
+	constructor(e = {}) {
+		super();
+		let { label: r, icon: a, variant: o = "default", size: s = "default", ariaLabel: c, block: l = !1, disabled: u = !1, type: d = "button", onClick: f } = e, p = ["mac-button"];
+		if (o !== "default" && p.push(`mac-button--${o}`), s !== "default" && p.push(`mac-button--${s}`), l && p.push("mac-button--block"), this.root = t("button", {
+			class: p.join(" "),
+			type: d,
+			disabled: u
+		}), a) {
+			let e = t("span", { class: "mac-button__icon" });
+			e.appendChild(i(a, 14)), this.root.appendChild(e);
+		}
+		r !== void 0 && (this.labelNode = t("span", { class: "mac-button__label" }), n(this.labelNode, [r]), this.root.appendChild(this.labelNode));
+		let m = c ?? (typeof r == "string" ? r : void 0);
+		m && this.root.setAttribute("aria-label", m), f && this.listen(this.root, "click", f);
+	}
+	setLabel(e) {
+		this.labelNode && (this.labelNode.textContent = e);
+	}
+	setDisabled(e) {
+		this.root.disabled !== e && (this.root.disabled = e);
+	}
+	setPrimary(e) {
+		this.root.classList.toggle("mac-button--primary", e);
+	}
+	focus() {
+		this.root.focus();
+	}
+}, ee = class extends e {
+	root;
+	input;
+	clearButton = null;
+	onInput;
+	onChange;
+	dirty = !1;
+	constructor(e = {}) {
+		super();
+		let { label: r, placeholder: a = "", icon: o, clearable: c = !1, disabled: l = !1, readOnly: u = !1, value: d = "", onInput: f, onChange: p } = e;
+		this.onInput = f, this.onChange = p, this.root = t("div", { class: "mac-textfield" });
+		let m = s("mac-textfield");
+		if (r !== void 0) {
+			let e = t("label", {
+				class: "mac-textfield__label",
+				for: m
+			});
+			n(e, [r]), this.root.appendChild(e);
+		}
+		let h = t("div", { class: "mac-textfield__control" });
+		if (o) {
+			let e = t("span", { class: "mac-textfield__icon" });
+			e.appendChild(i(o, 14)), h.appendChild(e);
+		}
+		if (this.input = t("input", {
+			class: "mac-textfield__input",
+			type: "text",
+			id: m,
+			placeholder: a,
+			value: d,
+			disabled: l,
+			readOnly: u,
+			autocomplete: "off"
+		}), this.input.spellcheck = !1, h.appendChild(this.input), c && (this.clearButton = t("button", {
+			class: "mac-textfield__clear",
+			type: "button",
+			tabindex: -1,
+			"aria-label": "清除",
+			title: "清除"
+		}), this.clearButton.appendChild(i("M6 6 L12 12 M12 6 L6 12", 10)), h.appendChild(this.clearButton)), this.root.appendChild(h), this.listen(this.input, "input", () => {
+			this.dirty = !0, this.syncClearState(), this.onInput?.(this.input.value);
+		}), this.listen(this.input, "change", () => {
+			this.commit();
+		}), this.listen(this.input, "keydown", (e) => {
+			e.key === "Enter" && (e.preventDefault(), this.commit());
+		}), this.clearButton) {
+			let e = this.clearButton;
+			this.listen(e, "click", () => {
+				this.input.value = "", this.syncClearState(), this.onInput?.(""), this.commit(!0), this.input.focus();
+			});
+		}
+		this.syncClearState();
+	}
+	get value() {
+		return this.input.value;
+	}
+	setValue(e) {
+		this.input.value !== e && (this.input.value = e, this.dirty = !1, this.syncClearState());
+	}
+	setDisabled(e) {
+		this.input.disabled !== e && (this.input.disabled = e, this.toggleClass("is-disabled", e));
+	}
+	focus() {
+		this.input.focus();
+	}
+	commit(e = !1) {
+		(e || this.dirty) && (this.dirty = !1, this.onChange?.(this.input.value));
+	}
+	syncClearState() {
+		this.clearButton && (this.clearButton.hidden = this.input.value === "");
+	}
+}, w = class extends e {
+	root;
+	input;
+	stepUp;
+	stepDown;
+	min;
+	max;
+	step;
+	onChange;
+	committed;
+	constructor(e = {}) {
+		super();
+		let { label: r, min: a, max: o, step: c, value: l, onChange: u } = e;
+		this.min = a, this.max = o, this.step = c, this.onChange = u, this.committed = this.clamp(l ?? a ?? 0), this.root = t("div", { class: "mac-numberfield" });
+		let d = s("mac-numberfield");
+		if (r !== void 0) {
+			let e = t("label", {
+				class: "mac-numberfield__label",
+				for: d
+			});
+			n(e, [r]), this.root.appendChild(e);
+		}
+		let f = t("div", { class: "mac-numberfield__control" });
+		this.input = t("input", {
+			class: "mac-numberfield__input",
+			type: "number",
+			id: d,
+			min: a,
+			max: o,
+			step: c,
+			autocomplete: "off",
+			inputmode: "decimal"
+		}), this.input.value = String(this.committed);
+		let p = t("div", { class: "mac-numberfield__stepper" });
+		this.stepUp = t("button", {
+			class: "mac-numberfield__step mac-numberfield__step--up",
+			type: "button",
+			tabindex: -1,
+			"aria-label": "增加",
+			title: "增加"
+		}), this.stepUp.appendChild(i("M6 15 L12 8 L18 15", 10)), this.stepDown = t("button", {
+			class: "mac-numberfield__step mac-numberfield__step--down",
+			type: "button",
+			tabindex: -1,
+			"aria-label": "减少",
+			title: "减少"
+		}), this.stepDown.appendChild(i("M6 9 L12 16 L18 9", 10)), p.append(this.stepUp, this.stepDown), f.append(this.input, p), this.root.appendChild(f), this.listen(this.input, "input", () => this.handleInput()), this.listen(this.stepUp, "click", () => this.nudge(1)), this.listen(this.stepDown, "click", () => this.nudge(-1)), this.listen(this.input, "keydown", (e) => {
+			(e.key === "ArrowUp" || e.key === "ArrowDown") && (e.preventDefault(), this.nudge(e.key === "ArrowUp" ? 1 : -1));
+		}), this.syncStepperState();
+	}
+	get value() {
+		return this.committed;
+	}
+	setValue(e) {
+		if (!Number.isFinite(e)) return;
+		let t = this.clamp(e);
+		(t !== this.committed || this.input.value !== String(t)) && (this.committed = t, this.input.value = String(t), this.syncStepperState());
+	}
+	setDisabled(e) {
+		this.input.disabled !== e && (this.input.disabled = e, this.syncStepperState(), this.toggleClass("is-disabled", e));
+	}
+	handleInput() {
+		let e = this.input.value.trim();
+		if (e === "") return;
+		let t = Number(e);
+		Number.isFinite(t) && this.isInRange(t) && (this.committed = t, this.syncStepperState(), this.onChange?.(t));
+	}
+	nudge(e) {
+		let t = this.committed;
+		this.setValue(t + (this.step ?? 1) * e), this.onChange?.(this.committed);
+	}
+	isInRange(e) {
+		return !(this.min !== void 0 && e < this.min || this.max !== void 0 && e > this.max);
+	}
+	clamp(e) {
+		let t = e;
+		return this.min !== void 0 && t < this.min && (t = this.min), this.max !== void 0 && t > this.max && (t = this.max), t;
+	}
+	syncStepperState() {
+		let e = this.input.disabled, t = this.min !== void 0 && this.committed <= this.min, n = this.max !== void 0 && this.committed >= this.max;
+		this.stepDown.disabled = e || t, this.stepUp.disabled = e || n;
+	}
+}, te = class extends e {
+	root;
+	input;
+	valueNode = null;
+	onChange;
+	min;
+	max;
+	constructor(e = {}) {
+		super();
+		let { label: r, min: i = 0, max: a = 100, step: o = 1, value: c, showValue: l = !1, onChange: u } = e;
+		this.min = i, this.max = a, this.onChange = u, this.root = t("div", { class: "mac-slider" });
+		let d = s("mac-slider");
+		if (r !== void 0) {
+			let e = t("label", {
+				class: "mac-slider__label",
+				for: d
+			});
+			n(e, [r]), this.root.appendChild(e);
+		}
+		let f = t("div", { class: "mac-slider__control" });
+		this.input = t("input", {
+			class: "mac-slider__input",
+			type: "range",
+			id: d,
+			min: i,
+			max: a,
+			step: o
+		}), this.input.value = String(this.clamp(c ?? i)), f.appendChild(this.input), l && (this.valueNode = t("span", { class: "mac-slider__value" }), this.valueNode.textContent = this.input.value, f.appendChild(this.valueNode)), this.root.appendChild(f), this.listen(this.input, "input", () => {
+			let e = Number(this.input.value);
+			this.syncFill(), this.renderValue(e), this.onChange?.(e);
+		}), this.syncFill();
+	}
+	get value() {
+		return Number(this.input.value);
+	}
+	setValue(e) {
+		if (!Number.isFinite(e)) return;
+		let t = this.clamp(e);
+		this.input.value !== String(t) && (this.input.value = String(t), this.syncFill(), this.renderValue(t));
+	}
+	setDisabled(e) {
+		this.input.disabled !== e && (this.input.disabled = e, this.toggleClass("is-disabled", e));
+	}
+	syncFill() {
+		let e = Number(this.input.value), t = this.max - this.min, n = t === 0 ? 1 : (e - this.min) / t, r = Math.min(1, Math.max(0, n)) * 100;
+		this.root.style.setProperty("--mac-slider-value", `${r}%`);
+	}
+	renderValue(e) {
+		if (!this.valueNode) return;
+		let t = String(e);
+		this.valueNode.textContent !== t && (this.valueNode.textContent = t);
+	}
+	clamp(e) {
+		return e < this.min ? this.min : e > this.max ? this.max : e;
+	}
+}, ne = class extends e {
+	root;
+	fill;
+	indeterminate;
+	current;
+	constructor(e = {}) {
+		super();
+		let { value: n = 0, indeterminate: r = !1 } = e;
+		this.indeterminate = r, this.current = this.constrain(n), this.root = t("div", {
+			class: "mac-progress",
+			role: "progressbar",
+			"aria-valuemin": "0",
+			"aria-valuemax": "100"
+		}), this.fill = t("div", { class: "mac-progress__fill" }), this.fill.style.setProperty("--mac-progress-scale", String(this.current / 100)), this.root.appendChild(this.fill), this.syncState();
+	}
+	get value() {
+		return this.current;
+	}
+	setValue(e) {
+		let t = this.constrain(e);
+		t !== this.current && (this.current = t, this.fill.style.setProperty("--mac-progress-scale", String(t / 100)), this.indeterminate || this.root.setAttribute("aria-valuenow", String(t)));
+	}
+	setIndeterminate(e) {
+		this.indeterminate !== e && (this.indeterminate = e, this.syncState());
+	}
+	syncState() {
+		this.root.classList.toggle("is-indeterminate", this.indeterminate), this.indeterminate ? this.root.removeAttribute("aria-valuenow") : this.root.setAttribute("aria-valuenow", String(this.current));
+	}
+	constrain(e) {
+		return Number.isFinite(e) ? Math.min(100, Math.max(0, e)) : 0;
+	}
+}, re = class extends e {
+	root;
+	text;
+	variant;
+	constructor(e) {
+		super();
+		let { variant: n = "default" } = e;
+		this.text = e.text, this.variant = n;
+		let r = ["mac-badge"];
+		n !== "default" && r.push(`mac-badge--${n}`), this.root = t("span", {
+			class: r.join(" "),
+			text: this.text
+		});
+	}
+	setText(e) {
+		this.text !== e && (this.text = e, this.root.textContent = e);
+	}
+	setVariant(e) {
+		this.variant !== e && (this.root.classList.remove(`mac-badge--${this.variant}`), this.variant = e, e !== "default" && this.root.classList.add(`mac-badge--${e}`));
+	}
+}, T = class extends e {
+	root;
+	onChange;
+	isOn;
+	constructor(e = {}) {
+		super();
+		let { checked: n = !1, disabled: r = !1, label: i, onChange: a } = e;
+		this.isOn = n, this.onChange = a, this.root = t("button", {
+			class: "mac-switch",
+			type: "button",
+			role: "switch",
+			"aria-checked": String(n),
+			"aria-label": i,
+			disabled: r
+		}), this.root.appendChild(t("span", { class: "mac-switch__knob" })), this.listen(this.root, "click", () => this.toggle()), this.listen(this.root, "keydown", (e) => {
+			(e.key === " " || e.key === "Enter") && (e.preventDefault(), this.toggle());
+		});
+	}
+	get checked() {
+		return this.isOn;
+	}
+	setChecked(e) {
+		this.isOn !== e && (this.isOn = e, this.syncState());
+	}
+	setDisabled(e) {
+		this.root.disabled !== e && (this.root.disabled = e);
+	}
+	focus() {
+		this.root.focus();
+	}
+	toggle() {
+		this.setChecked(!this.isOn), this.onChange?.(this.isOn);
+	}
+	syncState() {
+		this.setAttr("aria-checked", String(this.isOn));
+	}
+}, E = class extends e {
+	root;
+	input;
+	onChange;
+	constructor(e = {}) {
+		super();
+		let { checked: r = !1, indeterminate: a = !1, disabled: o = !1, label: s, onChange: c } = e;
+		this.onChange = c, this.root = t("label", { class: "mac-checkbox" }), this.input = t("input", {
+			class: "mac-checkbox__input",
+			type: "checkbox",
+			checked: r,
+			disabled: o
+		}), this.input.indeterminate = a;
+		let l = t("span", { class: "mac-checkbox__box" }), u = i("M5 12.5 L9.5 17 L19 7", 12);
+		u.setAttribute("class", "mac-checkbox__tick");
+		let d = i("M7 12 H17", 12);
+		if (d.setAttribute("class", "mac-checkbox__dash"), l.append(u, d), this.root.append(this.input, l), s !== void 0) {
+			let e = t("span", { class: "mac-checkbox__label" });
+			n(e, [s]), this.root.appendChild(e);
+		}
+		this.toggleClass("is-disabled", o), this.listen(this.input, "change", () => {
+			this.onChange?.(this.input.checked);
+		});
+	}
+	get checked() {
+		return this.input.checked;
+	}
+	setChecked(e) {
+		this.input.checked !== e && (this.input.checked = e);
+	}
+	setIndeterminate(e) {
+		this.input.indeterminate !== e && (this.input.indeterminate = e);
+	}
+	setDisabled(e) {
+		this.input.disabled !== e && (this.input.disabled = e, this.toggleClass("is-disabled", e));
+	}
+	focus() {
+		this.input.focus();
+	}
+}, D = class extends e {
+	root;
+	thumb;
+	buttons = [];
+	options;
+	onChange;
+	current;
+	constructor(e) {
+		super(), this.options = e.options, this.onChange = e.onChange, this.current = e.value ?? this.options.find((e) => !e.disabled)?.value ?? "";
+		let n = ["mac-segmented"];
+		e.block && n.push("mac-segmented--block"), this.root = t("div", {
+			class: n.join(" "),
+			role: "radiogroup"
+		}), this.thumb = t("div", {
+			class: "mac-segmented__thumb",
+			"aria-hidden": "true"
+		}), this.root.appendChild(this.thumb);
+		for (let e of this.options) {
+			let n = e.value === this.current, r = t("button", {
+				class: `mac-segmented__item${n ? " is-selected" : ""}`,
+				type: "button",
+				role: "radio",
+				"aria-checked": String(n),
+				tabindex: n ? 0 : -1,
+				disabled: e.disabled ?? !1,
+				dataset: { value: e.value }
+			});
+			e.icon && r.appendChild(i(e.icon, 13)), r.appendChild(t("span", { text: e.label })), this.buttons.push(r), this.root.appendChild(r);
+		}
+		if (this.listen(this.root, "click", (e) => {
+			let t = e.target.closest(".mac-segmented__item");
+			if (!t || t.disabled) return;
+			let n = t.dataset.value;
+			n && this.applySelection(n, !0);
+		}), this.listen(this.root, "keydown", (e) => {
+			let t = this.buttons.filter((e) => !e.disabled);
+			if (t.length === 0) return;
+			let n = t.findIndex((e) => e.dataset.value === this.current), r = n;
+			if (e.key === "ArrowRight" || e.key === "ArrowDown") r = (n + 1) % t.length;
+			else if (e.key === "ArrowLeft" || e.key === "ArrowUp") r = (n - 1 + t.length) % t.length;
+			else if (e.key === "Home") r = 0;
+			else if (e.key === "End") r = t.length - 1;
+			else return;
+			e.preventDefault();
+			let i = t[r], a = i.dataset.value;
+			a && (this.applySelection(a, !0), i.focus());
+		}), requestAnimationFrame(() => this.moveThumb(!1)), this.listen(window, "resize", () => this.moveThumb(!1)), typeof ResizeObserver < "u") {
+			let e = new ResizeObserver(() => this.moveThumb(!1));
+			e.observe(this.root), this.onDestroy(() => e.disconnect());
+		}
+	}
+	applySelection(e, t) {
+		if (this.current !== e) {
+			this.current = e;
+			for (let t of this.buttons) {
+				let n = t.dataset.value === e;
+				t.classList.toggle("is-selected", n), t.setAttribute("aria-checked", String(n)), t.tabIndex = n ? 0 : -1;
+			}
+			this.moveThumb(!0), t && this.onChange?.(e);
+		}
+	}
+	moveThumb(e) {
+		let t = this.buttons.find((e) => e.dataset.value === this.current);
+		if (!t || this.root.offsetWidth === 0) return;
+		e || (this.thumb.style.transition = "none");
+		let n = parseFloat(getComputedStyle(this.root).paddingLeft) || 0;
+		this.thumb.style.setProperty("--mac-segmented-thumb-x", `${t.offsetLeft - n}px`), this.thumb.style.setProperty("--mac-segmented-thumb-width", `${t.offsetWidth}px`), e || (this.thumb.offsetWidth, this.thumb.style.transition = "");
+	}
+	get value() {
+		return this.current;
+	}
+	setValue(e) {
+		this.applySelection(e, !1);
+	}
+	setDisabled(e) {
+		for (let t of this.buttons) t.disabled = e;
+	}
+}, O = class extends e {
+	root;
+	control;
+	onChange;
+	constructor(e) {
+		super(), this.onChange = e.onChange;
+		let n = ["mac-select"];
+		e.block && n.push("mac-select--block"), this.root = t("div", { class: n.join(" ") }), this.control = t("select", {
+			class: "mac-select__control",
+			disabled: e.disabled ?? !1
+		}), e.ariaLabel && this.control.setAttribute("aria-label", e.ariaLabel), this.setOptions(e.options, e.value), this.root.appendChild(this.control), this.root.appendChild(this.makeChevron()), this.listen(this.control, "change", () => {
+			this.onChange?.(this.control.value);
+		});
+	}
+	makeChevron() {
+		let e = "http://www.w3.org/2000/svg", t = document.createElementNS(e, "svg");
+		t.setAttribute("viewBox", "0 0 12 12"), t.setAttribute("aria-hidden", "true"), t.classList.add("mac-select__arrow");
+		let n = document.createElementNS(e, "path");
+		return n.setAttribute("d", "M2.5 4.5 L6 8 L9.5 4.5"), n.setAttribute("fill", "none"), n.setAttribute("stroke", "currentColor"), n.setAttribute("stroke-width", "1.6"), n.setAttribute("stroke-linecap", "round"), n.setAttribute("stroke-linejoin", "round"), t.appendChild(n), t;
+	}
+	setOptions(e, n) {
+		let r = document.createDocumentFragment();
+		for (let n of e) {
+			let e = t("option", {
+				value: n.value,
+				text: n.label,
+				disabled: n.disabled ?? !1
+			});
+			r.appendChild(e);
+		}
+		this.control.replaceChildren(r);
+		let i = n ?? e.find((e) => !e.disabled)?.value ?? "";
+		i && (this.control.value = i);
+	}
+	get value() {
+		return this.control.value;
+	}
+	setValue(e) {
+		this.control.value !== e && (this.control.value = e);
+	}
+	setDisabled(e) {
+		this.control.disabled !== e && (this.control.disabled = e);
+	}
+}, k = class extends e {
+	root;
+	labelNode = null;
+	constructor(e = {}) {
+		super();
+		let { label: n, size: r = "default", ariaLabel: i } = e, a = ["mac-spinner"];
+		r !== "default" && a.push(`mac-spinner--${r}`), this.root = t("span", {
+			class: a.join(" "),
+			role: "progressbar",
+			"aria-busy": "true",
+			"aria-label": i ?? n ?? "正在加载"
+		}), this.root.appendChild(t("span", { class: "mac-spinner__ring" })), n && (this.labelNode = t("span", {
+			class: "mac-spinner__label",
+			text: n
+		}), this.root.appendChild(this.labelNode));
+	}
+	setLabel(e) {
+		this.labelNode && this.labelNode.textContent !== e && (this.labelNode.textContent = e);
+	}
+}, A = class extends e {
+	root;
+	control;
+	counter = null;
+	maxLength;
+	onChange;
+	constructor(e = {}) {
+		super();
+		let { label: n, placeholder: r = "", value: i = "", rows: a = 4, maxLength: o, disabled: c = !1, readOnly: l = !1, onInput: u, onChange: d } = e;
+		this.maxLength = o, this.onChange = d, this.root = t("div", { class: "mac-textarea" });
+		let f = s("mac-textarea");
+		if (n !== void 0) {
+			let e = t("label", {
+				class: "mac-textarea__label",
+				htmlFor: f
+			});
+			typeof n == "string" || typeof n == "number" ? e.textContent = String(n) : n instanceof Node && e.appendChild(n), this.root.appendChild(e);
+		}
+		let p = t("div", { class: "mac-textarea__control" });
+		if (this.control = t("textarea", {
+			class: "mac-textarea__input",
+			id: f,
+			rows: a,
+			placeholder: r,
+			disabled: c,
+			readOnly: l
+		}), o !== void 0 && (this.control.maxLength = o), this.control.value = i, p.appendChild(this.control), this.root.appendChild(p), o !== void 0) {
+			let e = t("div", { class: "mac-textarea__meta" });
+			this.counter = t("span", { text: `${i.length}/${o}` }), e.appendChild(this.counter), this.root.appendChild(e), this.updateCounter();
+		}
+		u ? this.listen(this.control, "input", () => {
+			u(this.control.value), this.updateCounter();
+		}) : this.listen(this.control, "input", () => this.updateCounter()), this.listen(this.control, "change", () => this.onChange?.(this.control.value)), c && this.root.classList.add("is-disabled");
+	}
+	get value() {
+		return this.control.value;
+	}
+	setValue(e) {
+		this.control.value !== e && (this.control.value = e, this.updateCounter());
+	}
+	setDisabled(e) {
+		this.control.disabled !== e && (this.control.disabled = e, this.root.classList.toggle("is-disabled", e));
+	}
+	focus() {
+		this.control.focus();
+	}
+	updateCounter() {
+		if (!this.counter || this.maxLength === void 0) return;
+		let e = this.control.value.length;
+		this.counter.textContent = `${e}/${this.maxLength}`, this.counter.parentElement?.classList.toggle("is-over", e >= this.maxLength);
+	}
+}, j = "M9 6 L15 12 L9 18", M = class extends e {
+	root;
+	header;
+	content;
+	metaNode;
+	onToggle;
+	open;
+	constructor(e) {
+		super();
+		let { title: n, content: r, open: a = !1, meta: o, disabled: s = !1, onToggle: c } = e;
+		this.open = a, this.onToggle = c, this.root = t("div", { class: `mac-disclosure${a ? " is-open" : ""}` }), this.header = t("button", {
+			class: "mac-disclosure__header",
+			type: "button",
+			"aria-expanded": String(a),
+			disabled: s
+		});
+		let l = i(j, 14);
+		l.classList.add("mac-disclosure__chevron"), this.header.appendChild(l), this.header.appendChild(t("span", {
+			class: "mac-disclosure__title",
+			text: n
+		})), o === void 0 ? this.metaNode = null : (this.metaNode = t("span", {
+			class: "mac-disclosure__meta",
+			text: o
+		}), this.header.appendChild(this.metaNode)), this.content = t("div", { class: "mac-disclosure__content" }), typeof r == "string" || typeof r == "number" ? this.content.textContent = String(r) : r instanceof Node && this.content.appendChild(r), this.content.hidden = !a, this.root.append(this.header, this.content), this.listen(this.header, "click", () => {
+			this.header.disabled || this.setOpen(!this.open, !0);
+		});
+	}
+	setOpen(e, t = !1) {
+		this.open !== e && (this.open = e, this.root.classList.toggle("is-open", e), this.header.setAttribute("aria-expanded", String(e)), this.content.hidden = !e, t && this.onToggle?.(e));
+	}
+	get isOpen() {
+		return this.open;
+	}
+	setMeta(e) {
+		this.metaNode && this.metaNode.textContent !== e && (this.metaNode.textContent = e);
+	}
+	get contentElement() {
+		return this.content;
+	}
+};
+// src/controls/table.ts
+function N(e, t) {
+	let n = e?.id;
+	return String(typeof n == "string" || typeof n == "number" ? n : t);
+}
+function P(e) {
+	return e === "center" ? " mac-table__align--center" : e === "right" ? " mac-table__align--right" : "";
+}
+var F = class extends e {
+	root;
+	body;
+	columns;
+	rowKey;
+	selectable;
+	emptyText;
+	onSelectionChange;
+	selected = /* @__PURE__ */ new Set();
+	headerCheck = null;
+	rowChecks = [];
+	rowKeys = [];
+	rows = [];
+	constructor(e) {
+		super(), this.columns = e.columns, this.rows = e.rows ?? [], this.selectable = e.selectable ?? !1, this.emptyText = e.emptyText ?? "暂无数据", this.rowKey = e.rowKey ?? N, this.onSelectionChange = e.onSelectionChange;
+		for (let t of e.selectedKeys ?? []) this.selected.add(t);
+		let n = ["mac-table"];
+		this.selectable && n.push("mac-table--selectable"), this.root = t("div", { class: n.join(" ") });
+		let r = t("div", { class: "mac-table__scroll" }), i = t("table", { class: "mac-table__table" }), a = t("thead", { class: "mac-table__head" });
+		this.body = t("tbody", { class: "mac-table__body" }), i.append(this.makeColGroup(), a, this.body), r.appendChild(i), this.root.appendChild(r), a.appendChild(this.makeHeaderRow()), this.listen(this.body, "change", (e) => this.onBodyChange(e)), this.renderRows();
+	}
+	setRows(e) {
+		let t = /* @__PURE__ */ new Set();
+		e.forEach((e, n) => t.add(this.rowKey(e, n)));
+		for (let e of Array.from(this.selected)) t.has(e) || this.selected.delete(e);
+		this.rows = e, this.renderRows();
+	}
+	get selectedKeys() {
+		return Array.from(this.selected);
+	}
+	clearSelection() {
+		this.selected.size !== 0 && (this.selected.clear(), this.syncRowChecks(), this.syncHeaderCheck());
+	}
+	makeColGroup() {
+		let e = t("colgroup", { class: "mac-table__cols" });
+		this.selectable && e.appendChild(t("col", { class: "mac-table__col mac-table__col--select" }));
+		for (let n of this.columns) {
+			let r = t("col", { class: "mac-table__col" });
+			n.width !== void 0 && (r.style.width = `${n.width}px`), e.appendChild(r);
+		}
+		return e;
+	}
+	makeHeaderRow() {
+		let e = t("tr", { class: "mac-table__row" });
+		if (this.selectable) {
+			let n = t("th", {
+				class: "mac-table__th mac-table__th--select",
+				scope: "col"
+			}), r = t("input", {
+				class: "mac-table__checkbox",
+				type: "checkbox",
+				"aria-label": "全选"
+			});
+			this.headerCheck = r, this.listen(r, "change", () => this.toggleAll(r.checked)), n.appendChild(r), e.appendChild(n);
+		}
+		for (let n of this.columns) {
+			let r = t("th", {
+				class: `mac-table__th${P(n.align)}`,
+				scope: "col"
+			});
+			r.textContent = n.title, e.appendChild(r);
+		}
+		return e;
+	}
+	renderRows() {
+		let e = document.createDocumentFragment();
+		this.rowChecks = [], this.rowKeys = [], this.rows.length === 0 ? e.appendChild(this.makeEmptyRow()) : this.rows.forEach((t, n) => {
+			e.appendChild(this.makeRow(t, n));
+		}), this.body.replaceChildren(e), this.syncHeaderCheck();
+	}
+	makeRow(e, n) {
+		let r = this.rowKey(e, n);
+		this.rowKeys.push(r);
+		let i = t("tr", {
+			class: `mac-table__row${this.selected.has(r) ? " is-selected" : ""}`,
+			dataset: { key: r }
+		});
+		if (this.selectable) {
+			let e = t("td", { class: "mac-table__cell mac-table__cell--select" }), n = t("input", {
+				class: "mac-table__checkbox",
+				type: "checkbox",
+				"aria-label": "选择此行",
+				checked: this.selected.has(r)
+			});
+			this.rowChecks.push(n), e.appendChild(n), i.appendChild(e);
+		}
+		for (let t of this.columns) i.appendChild(this.makeCell(t, e, n));
+		return i;
+	}
+	makeCell(e, r, i) {
+		let a = t("td", { class: `mac-table__cell${P(e.align)}` }), o = r?.[e.key];
+		return e.render ? (n(a, [e.render(o, r, i)]), a) : (o != null && (a.textContent = String(o)), a);
+	}
+	makeEmptyRow() {
+		let e = t("tr", { class: "mac-table__row mac-table__row--empty" }), n = this.columns.length + +!!this.selectable, r = t("td", {
+			class: "mac-table__cell mac-table__empty",
+			colSpan: Math.max(1, n)
+		});
+		return r.textContent = this.emptyText, e.appendChild(r), e;
+	}
+	onBodyChange(e) {
+		let t = e.target;
+		if (!(t instanceof HTMLInputElement) || !t.classList.contains("mac-table__checkbox")) return;
+		let n = t.closest(".mac-table__row"), r = n?.dataset.key;
+		r !== void 0 && (t.checked ? this.selected.add(r) : this.selected.delete(r), n?.classList.toggle("is-selected", t.checked), this.syncHeaderCheck(), this.emitSelection());
+	}
+	toggleAll(e) {
+		if (this.selected.clear(), e) for (let e of this.rowKeys) this.selected.add(e);
+		this.syncRowChecks(), this.syncHeaderCheck(), this.emitSelection();
+	}
+	syncRowChecks() {
+		this.rowChecks.forEach((e, t) => {
+			let n = this.selected.has(this.rowKeys[t]);
+			e.checked !== n && (e.checked = n), e.closest(".mac-table__row")?.classList.toggle("is-selected", n);
+		});
+	}
+	syncHeaderCheck() {
+		let e = this.headerCheck;
+		if (!e) return;
+		let t = this.rowKeys.length, n = 0;
+		for (let e of this.rowKeys) this.selected.has(e) && (n += 1);
+		e.disabled = t === 0, e.checked = t > 0 && n === t;
+		let r = n > 0 && n < t;
+		e.indeterminate !== r && (e.indeterminate = r);
+	}
+	emitSelection() {
+		this.onSelectionChange?.(Array.from(this.selected));
+	}
+}, I = 10, L = class extends e {
+	root;
+	orientation;
+	primaryPane;
+	secondaryPane;
+	divider;
+	minPrimary;
+	minSecondary;
+	onResize;
+	dragging = !1;
+	dragPointer = -1;
+	dragStart = 0;
+	dragOrigin = 0;
+	constructor(e) {
+		super(), this.orientation = e.orientation, this.minPrimary = e.minPrimary ?? 0, this.minSecondary = e.minSecondary ?? 0, this.onResize = e.onResize;
+		let r = this.orientation === "horizontal";
+		this.root = t("div", { class: `mac-splitview mac-splitview--${this.orientation}` }), this.primaryPane = t("div", { class: "mac-splitview__pane mac-splitview__pane--primary" }), this.secondaryPane = t("div", { class: "mac-splitview__pane mac-splitview__pane--secondary" }), n(this.primaryPane, [e.primary]), n(this.secondaryPane, [e.secondary]), this.primaryPane.id = s("mac-splitview-pane"), this.secondaryPane.id = s("mac-splitview-pane"), this.divider = t("div", {
+			class: "mac-splitview__divider",
+			role: "separator",
+			tabindex: 0,
+			"aria-orientation": r ? "vertical" : "horizontal",
+			"aria-label": "调整面板大小"
+		}), this.divider.setAttribute("aria-controls", `${this.primaryPane.id} ${this.secondaryPane.id}`), this.root.append(this.primaryPane, this.divider, this.secondaryPane);
+		let i = e.primarySize ?? "50%";
+		if (this.writeSize(typeof i == "number" ? `${i}px` : i), this.listen(this.divider, "pointerdown", (e) => this.onPointerDown(e)), this.listen(this.divider, "pointermove", (e) => this.onPointerMove(e)), this.listen(this.divider, "pointerup", (e) => this.onPointerUp(e)), this.listen(this.divider, "pointercancel", (e) => this.onPointerUp(e)), this.listen(this.divider, "lostpointercapture", () => this.endDrag()), this.listen(this.divider, "keydown", (e) => this.onKeyDown(e)), typeof ResizeObserver < "u") {
+			let e = new ResizeObserver(() => this.syncAria());
+			e.observe(this.root), this.onDestroy(() => e.disconnect());
+		}
+		this.syncAria();
+	}
+	setPrimarySize(e) {
+		let t = typeof e == "number" ? `${this.clampSize(e)}px` : e;
+		this.writeSize(t), this.syncAria();
+	}
+	onPointerDown(e) {
+		e.button === 0 && (e.preventDefault(), this.dragging = !0, this.dragPointer = e.pointerId, this.dragStart = this.pointerAxis(e), this.dragOrigin = this.paneExtent(this.primaryPane), this.root.classList.add("is-dragging"), this.divider.setPointerCapture(e.pointerId), this.divider.focus());
+	}
+	onPointerMove(e) {
+		if (!this.dragging || e.pointerId !== this.dragPointer) return;
+		let t = this.pointerAxis(e) - this.dragStart;
+		this.applySize(this.dragOrigin + t, !0);
+	}
+	onPointerUp(e) {
+		e.pointerId === this.dragPointer && (this.endDrag(), this.divider.hasPointerCapture(e.pointerId) && this.divider.releasePointerCapture(e.pointerId));
+	}
+	endDrag() {
+		this.dragging && (this.dragging = !1, this.dragPointer = -1, this.root.classList.remove("is-dragging"));
+	}
+	onKeyDown(e) {
+		let t = this.orientation === "horizontal", n = t ? "ArrowLeft" : "ArrowUp", r = t ? "ArrowRight" : "ArrowDown", i;
+		if (e.key === n) i = this.paneExtent(this.primaryPane) - I;
+		else if (e.key === r) i = this.paneExtent(this.primaryPane) + I;
+		else if (e.key === "Home") i = this.minPrimary;
+		else if (e.key === "End") i = 2 ** 53 - 1;
+		else return;
+		e.preventDefault(), this.applySize(i, !0);
+	}
+	applySize(e, t) {
+		let n = this.clampSize(e);
+		this.writeSize(`${n}px`), this.syncAria(), t && this.onResize?.(n);
+	}
+	writeSize(e) {
+		this.root.style.setProperty("--mac-splitview-primary", e);
+	}
+	clampSize(e) {
+		let t = this.availableExtent();
+		if (t <= 0) return Math.max(0, e);
+		let n = Math.max(0, t - this.minSecondary), r = Math.min(this.minPrimary, n);
+		return Math.min(n, Math.max(r, e));
+	}
+	availableExtent() {
+		return this.paneExtent(this.primaryPane) + this.paneExtent(this.secondaryPane);
+	}
+	paneExtent(e) {
+		let t = e.getBoundingClientRect();
+		return this.orientation === "horizontal" ? t.width : t.height;
+	}
+	pointerAxis(e) {
+		return this.orientation === "horizontal" ? e.clientX : e.clientY;
+	}
+	syncAria() {
+		let e = Math.round(this.paneExtent(this.primaryPane)), t = this.availableExtent(), n = t > 0 ? Math.max(0, Math.round(t - this.minSecondary)) : Math.max(0, e), r = Math.min(this.minPrimary, n);
+		this.divider.setAttribute("aria-valuemin", String(r)), this.divider.setAttribute("aria-valuemax", String(n)), this.divider.setAttribute("aria-valuenow", String(Math.min(n, Math.max(r, e))));
+	}
+}, R = class extends e {
+	root;
+	input;
+	list;
+	onChange;
+	onInput;
+	renderOption;
+	listId;
+	options;
+	filtered = [];
+	rows = [];
+	active = -1;
+	selectedValue;
+	constructor(e) {
+		super(), this.options = e.options, this.renderOption = e.renderOption, this.onChange = e.onChange, this.onInput = e.onInput, this.selectedValue = e.value ?? null, this.listId = s("mac-combobox-list"), this.root = t("div", { class: "mac-combobox" }), this.input = t("input", {
+			class: "mac-combobox__input",
+			type: "text",
+			role: "combobox",
+			autocomplete: "off",
+			placeholder: e.placeholder ?? "",
+			"aria-expanded": "false",
+			"aria-autocomplete": "list",
+			"aria-controls": this.listId
+		}), this.input.spellcheck = !1;
+		let n = this.optionFor(this.selectedValue ?? "");
+		this.input.value = n ? n.label : this.selectedValue ?? "", this.list = t("div", {
+			class: "mac-combobox__list",
+			id: this.listId,
+			role: "listbox",
+			hidden: !0
+		});
+		let r = t("span", {
+			class: "mac-combobox__chevron",
+			"aria-hidden": "true"
+		});
+		r.appendChild(i("M2.5 4.5 L6 8 L9.5 4.5", 12, "0 0 12 12")), this.root.append(this.input, r, this.list), this.listen(this.input, "input", () => {
+			this.selectedValue = null, this.filter(this.input.value), this.open(), this.onInput?.(this.input.value);
+		}), this.listen(this.input, "keydown", (e) => this.onKeyDown(e)), this.listen(this.input, "pointerdown", () => this.openWithFullList()), this.listen(this.input, "focusin", () => this.openWithFullList()), this.listen(this.list, "pointerdown", (e) => e.preventDefault()), this.listen(this.list, "click", (e) => this.onListClick(e)), this.listen(this.input, "blur", () => this.close()), this.filter("");
+	}
+	openWithFullList() {
+		this.filter(""), this.open();
+	}
+	get value() {
+		let e = this.filtered[this.active];
+		return e ? e.value : this.selectedValue ?? this.input.value;
+	}
+	setValue(e) {
+		this.selectedValue = e;
+		let t = this.optionFor(e);
+		this.input.value = t ? t.label : e, this.active = -1, this.close(), this.filter(this.input.value);
+	}
+	setOptions(e) {
+		this.options = e, this.filter(this.input.value);
+	}
+	focus() {
+		this.input.focus();
+	}
+	optionFor(e) {
+		return this.options.find((t) => t.value === e);
+	}
+	filter(e) {
+		let n = e.trim().toLowerCase();
+		this.filtered = n ? this.options.filter((e) => e.label.toLowerCase().includes(n)) : this.options.slice(), this.active = -1;
+		let r = document.createDocumentFragment();
+		this.rows = [], this.filtered.forEach((e, n) => {
+			let i = t("div", {
+				class: "mac-combobox__option",
+				id: `${this.listId}-${n}`,
+				role: "option",
+				"aria-selected": String(e.value === this.selectedValue),
+				dataset: { index: String(n) }
+			});
+			if (this.renderOption) {
+				let t = this.renderOption(e);
+				typeof t == "string" ? i.textContent = t : i.appendChild(t);
+			} else i.textContent = e.label;
+			this.rows.push(i), r.appendChild(i);
+		}), this.list.replaceChildren(r), this.filtered.length === 0 ? this.close() : this.input.getAttribute("aria-expanded") === "true" && this.syncActive();
+	}
+	open() {
+		this.filtered.length === 0 ? this.close() : (this.list.hidden = !1, this.input.setAttribute("aria-expanded", "true"));
+	}
+	close() {
+		if (this.active = -1, this.input.setAttribute("aria-expanded", "false"), this.input.removeAttribute("aria-activedescendant"), !this.list.hidden) {
+			this.list.hidden = !0;
+			for (let e of this.rows) e.classList.remove("is-active");
+		}
+	}
+	move(e) {
+		if (this.filtered.length === 0) return;
+		let t = this.filtered.length, n = (this.active < 0 ? e > 0 ? -1 : 0 : this.active) + e;
+		n < 0 && (n = t - 1), n >= t && (n = 0), this.active = n, this.open(), this.syncActive(), this.rows[n]?.scrollIntoView({ block: "nearest" });
+	}
+	syncActive() {
+		this.rows.forEach((e, t) => {
+			e.classList.toggle("is-active", t === this.active);
+		});
+		let e = this.rows[this.active];
+		e ? this.input.setAttribute("aria-activedescendant", e.id) : this.input.removeAttribute("aria-activedescendant");
+	}
+	onKeyDown(e) {
+		switch (e.key) {
+			case "ArrowDown":
+			case "ArrowUp":
+				e.preventDefault(), this.move(e.key === "ArrowDown" ? 1 : -1);
+				return;
+			case "Enter":
+				this.active >= 0 && (e.preventDefault(), this.commit(this.filtered[this.active]));
+				return;
+			case "Escape":
+				if (this.list.hidden) return;
+				e.preventDefault(), this.close();
+				return;
+			case "Tab":
+				this.active >= 0 && this.commit(this.filtered[this.active]);
+				return;
+			default: return;
+		}
+	}
+	onListClick(e) {
+		let t = e.target.closest(".mac-combobox__option");
+		if (!t) return;
+		let n = this.filtered[Number(t.dataset.index)];
+		n && this.commit(n);
+	}
+	commit(e) {
+		this.selectedValue = e.value, this.input.value = e.label, this.close();
+		for (let [t, n] of this.rows.entries()) n.setAttribute("aria-selected", String(this.filtered[t]?.value === e.value));
+		this.onChange?.(e.value);
+	}
+}, z = "M7 3 V6 M17 3 V6 M4 9 H20 M5 5 H19 A1 1 0 0 1 20 6 V19 A1 1 0 0 1 19 20 H5 A1 1 0 0 1 4 19 V6 A1 1 0 0 1 5 5 Z", B = class extends e {
+	root;
+	input;
+	labelNode = null;
+	onChange;
+	constructor(e = {}) {
+		super();
+		let { value: r, min: a, max: o, disabled: c = !1, label: l, onChange: u } = e;
+		this.onChange = u, this.root = t("div", { class: "mac-datepicker" });
+		let d = s("mac-datepicker");
+		l !== void 0 && (this.labelNode = t("label", {
+			class: "mac-datepicker__label",
+			for: d
+		}), n(this.labelNode, [l]), this.root.appendChild(this.labelNode));
+		let f = t("div", { class: "mac-datepicker__control" });
+		this.input = t("input", {
+			class: "mac-datepicker__input",
+			type: "date",
+			id: d,
+			disabled: c
+		}), r && (this.input.value = r), a && (this.input.min = a), o && (this.input.max = o);
+		let p = t("span", {
+			class: "mac-datepicker__icon",
+			"aria-hidden": "true"
+		});
+		p.appendChild(i(z, 16, "0 0 24 24")), f.append(this.input, p), this.root.appendChild(f), this.toggleClass("is-disabled", c), this.listen(this.input, "change", () => {
+			this.onChange?.(this.input.value);
+		});
+	}
+	get value() {
+		return this.input.value;
+	}
+	setValue(e) {
+		this.input.value !== e && (this.input.value = e);
+	}
+	setDisabled(e) {
+		this.input.disabled !== e && (this.input.disabled = e, this.toggleClass("is-disabled", e));
+	}
+	focus() {
+		this.input.focus();
+	}
+}, V = class extends e {
+	root;
+	closeButton;
+	minimiseButton;
+	zoomButton;
+	constructor(e = {}) {
+		super(), this.root = t("div", {
+			class: "mac-traffic-lights",
+			role: "group",
+			"aria-label": "窗口控制"
+		}), this.closeButton = this.makeLight("close", "关闭"), this.minimiseButton = this.makeLight("minimise", "最小化"), this.zoomButton = this.makeLight("zoom", "缩放"), this.addGlyph(this.closeButton, "mac-traffic-light__glyph--close", "M3.5 3.5 L8.5 8.5 M8.5 3.5 L3.5 8.5"), this.addGlyph(this.minimiseButton, "mac-traffic-light__glyph--minimise", "M2.6 6 L9.4 6"), this.addTriangle(this.zoomButton, "mac-traffic-light__glyph--enter", "M3.1 3.1 H5.1 L3.1 5.1 Z", "M8.9 8.9 H6.9 L8.9 6.9 Z"), this.addTriangle(this.zoomButton, "mac-traffic-light__glyph--exit", "M5.1 3.1 H3.1 L5.1 5.1 Z", "M6.9 8.9 H8.9 L6.9 6.9 Z"), this.root.append(this.closeButton, this.minimiseButton, this.zoomButton), e.onClose && this.listen(this.closeButton, "click", e.onClose), e.onMinimise && this.listen(this.minimiseButton, "click", e.onMinimise), e.onZoom && this.listen(this.zoomButton, "click", e.onZoom);
+	}
+	makeLight(e, n) {
+		return t("button", {
+			class: `mac-traffic-light mac-traffic-light--${e}`,
+			type: "button",
+			"aria-label": n,
+			title: n
+		});
+	}
+	addGlyph(e, t, n) {
+		let r = "http://www.w3.org/2000/svg", i = document.createElementNS(r, "svg");
+		i.setAttribute("viewBox", "0 0 12 12"), i.setAttribute("aria-hidden", "true"), i.classList.add(t);
+		let a = document.createElementNS(r, "path");
+		a.setAttribute("d", n), i.appendChild(a), e.appendChild(i);
+	}
+	addTriangle(e, t, n, r) {
+		let i = "http://www.w3.org/2000/svg", a = document.createElementNS(i, "svg");
+		a.setAttribute("viewBox", "0 0 12 12"), a.setAttribute("aria-hidden", "true"), a.classList.add(t);
+		for (let e of [n, r]) {
+			let t = document.createElementNS(i, "path");
+			t.setAttribute("d", e), a.appendChild(t);
+		}
+		e.appendChild(a);
+	}
+	setZoomed(e) {
+		if (this.root.classList.contains("is-zoomed") === e) return;
+		this.root.classList.toggle("is-zoomed", e);
+		let t = e ? "还原" : "缩放";
+		this.zoomButton.title = t, this.zoomButton.setAttribute("aria-label", t);
+	}
+	setFocused(e) {
+		this.root.classList.contains("is-unfocused") !== !e && this.root.classList.toggle("is-unfocused", !e);
+	}
+}, H = class extends e {
+	root;
+	titleNode;
+	lights;
+	constructor(e = {}) {
+		super();
+		let { title: n = "", trafficLights: r = !0, leading: i = [], trailing: a = [] } = e;
+		this.root = t("header", { class: "mac-titlebar" });
+		let o = t("div", { class: "mac-titlebar__leading" });
+		r ? (this.lights = new V({
+			onClose: e.onClose,
+			onMinimise: e.onMinimise,
+			onZoom: e.onZoom
+		}), o.appendChild(this.lights.element)) : this.lights = null;
+		for (let e of i) e != null && e !== !1 && o.appendChild(typeof e == "string" || typeof e == "number" ? document.createTextNode(String(e)) : e);
+		this.titleNode = t("div", {
+			class: "mac-titlebar__title",
+			text: n
+		});
+		let s = t("div", { class: "mac-titlebar__trailing" });
+		for (let e of a) e != null && e !== !1 && s.appendChild(typeof e == "string" || typeof e == "number" ? document.createTextNode(String(e)) : e);
+		if (this.root.append(o, this.titleNode, s), e.onDoubleClick) {
+			let t = e.onDoubleClick, n = 0, r = 0, i = 0, a = 0, o = () => {
+				let e = performance.now();
+				e - a < 350 || (a = e, t());
+			};
+			this.listen(this.root, "dblclick", (e) => {
+				e.target.closest("button, input, a, [role='button'], [role='switch']") || (e.preventDefault(), o());
+			}), this.listen(this.root, "mousedown", (e) => {
+				if (e.button !== 0 || e.target.closest("button, input, a, [role='button'], [role='switch']")) return;
+				let t = e.timeStamp, a = Math.abs(e.clientX - r) < 8 && Math.abs(e.clientY - i) < 8;
+				t - n < 500 && a ? (n = 0, o()) : (n = t, r = e.clientX, i = e.clientY);
+			}, { capture: !0 });
+		}
+	}
+	get trafficLights() {
+		return this.lights;
+	}
+	setTitle(e) {
+		this.titleNode.textContent !== e && (this.titleNode.textContent = e);
+	}
+	addTrailing(e) {
+		this.root.querySelector(".mac-titlebar__trailing")?.appendChild(e);
+	}
+	destroy() {
+		this.lights?.destroy(), super.destroy();
+	}
+}, U = class extends e {
+	root;
+	selectedId;
+	onSelect;
+	constructor(e) {
+		super(), this.selectedId = e.selected ?? null, this.onSelect = e.onSelect, this.root = t("aside", { class: "mac-sidebar" });
+		for (let n of e.groups) {
+			let e = t("nav", {
+				class: "mac-sidebar__group",
+				"aria-label": n.heading ?? "导航"
+			});
+			n.heading && e.appendChild(t("div", {
+				class: "mac-sidebar__heading",
+				text: n.heading
+			}));
+			for (let t of n.items) e.appendChild(this.makeItem(t));
+			this.root.appendChild(e);
+		}
+		this.listen(this.root, "click", (e) => {
+			let t = e.target.closest(".mac-sidebar__item");
+			if (!t || t.disabled) return;
+			let n = t.dataset.id;
+			n && this.setSelected(n, !0);
+		});
+	}
+	makeItem(e) {
+		let n = e.id === this.selectedId, r = t("button", {
+			class: `mac-sidebar__item${n ? " is-selected" : ""}`,
+			type: "button",
+			disabled: e.disabled ?? !1,
+			dataset: {
+				id: e.id,
+				section: e.id
+			},
+			"aria-current": n ? "page" : "false"
+		});
+		e.icon && r.appendChild(i(e.icon, 16));
+		let a = t("span", { text: e.label });
+		return r.appendChild(a), e.count !== void 0 && r.appendChild(t("span", {
+			class: "mac-sidebar__count",
+			text: String(e.count)
+		})), r;
+	}
+	setSelected(e, t = !1) {
+		if ((this.selectedId !== e || t) && this.selectedId !== e) {
+			this.selectedId = e;
+			for (let t of this.root.querySelectorAll(".mac-sidebar__item")) {
+				let n = t.dataset.id === e;
+				t.classList.toggle("is-selected", n), t.setAttribute("aria-current", n ? "page" : "false");
+			}
+			t && this.onSelect?.(e);
+		}
+	}
+	get selected() {
+		return this.selectedId;
+	}
+	setCollapsed(e) {
+		this.root.classList.contains("is-collapsed") !== e && (this.root.classList.toggle("is-collapsed", e), this.root.setAttribute("aria-hidden", String(e)));
+	}
+	get collapsed() {
+		return this.root.classList.contains("is-collapsed");
+	}
+}, W = class extends e {
+	root;
+	dot;
+	textNode;
+	trailingNode;
+	constructor(e = {}) {
+		super();
+		let { text: n = "", state: r = "ok", trailing: i = "" } = e;
+		this.root = t("footer", { class: "mac-statusbar" });
+		let a = t("span", { class: "mac-statusbar__leading" });
+		this.dot = t("span", { class: `mac-statusbar__dot mac-statusbar__dot--${r}` }), this.textNode = t("span", {
+			class: "mac-statusbar__text",
+			text: n
+		}), a.append(this.dot, this.textNode), this.trailingNode = t("span", {
+			class: "mac-statusbar__time",
+			text: i
+		}), this.root.append(a, this.trailingNode);
+	}
+	setText(e) {
+		this.textNode.textContent !== e && (this.textNode.textContent = e);
+	}
+	setState(e) {
+		let t = `mac-statusbar__dot mac-statusbar__dot--${e}`;
+		this.dot.className !== t && (this.dot.className = t);
+	}
+	setTrailing(e) {
+		this.trailingNode.textContent !== e && (this.trailingNode.textContent = e);
+	}
+}, G = class extends e {
+	root;
+	leadingSlot;
+	centerSlot;
+	trailingSlot;
+	constructor(e = {}) {
+		super();
+		let { leading: r = [], center: i = [], trailing: a = [], position: o = "top", bordered: s = !0, ariaLabel: c } = e, l = ["mac-toolbar", `mac-toolbar--${o}`];
+		s || l.push("mac-toolbar--borderless"), this.root = t("div", {
+			class: l.join(" "),
+			role: "toolbar",
+			"aria-orientation": "horizontal"
+		}), this.root.dataset.position = o, c && this.root.setAttribute("aria-label", c), this.leadingSlot = t("div", { class: "mac-toolbar__leading" }), this.centerSlot = t("div", { class: "mac-toolbar__center" }), this.trailingSlot = t("div", { class: "mac-toolbar__trailing" }), n(this.leadingSlot, r), n(this.centerSlot, i), n(this.trailingSlot, a), this.root.append(this.leadingSlot, this.centerSlot, this.trailingSlot);
+	}
+	addTrailing(e) {
+		n(this.trailingSlot, [e]);
+	}
+	addLeading(e) {
+		n(this.leadingSlot, [e]);
+	}
+	addCenter(e) {
+		n(this.centerSlot, [e]);
+	}
+	setBordered(e) {
+		this.root.classList.toggle("mac-toolbar--borderless", !e), this.root.dataset.bordered = String(e);
+	}
+	get bordered() {
+		return !this.root.classList.contains("mac-toolbar--borderless");
+	}
+	get slots() {
+		return {
+			leading: this.leadingSlot,
+			center: this.centerSlot,
+			trailing: this.trailingSlot
+		};
+	}
+}, K = class extends e {
+	root;
+	tabs;
+	onSelect;
+	listNode;
+	panelHost;
+	tabButtons = /* @__PURE__ */ new Map();
+	panels = /* @__PURE__ */ new Map();
+	selectedId;
+	constructor(e) {
+		super(), this.tabs = e.tabs, this.onSelect = e.onSelect, this.selectedId = e.selected ?? this.tabs.find((e) => !e.disabled)?.id ?? "", this.root = t("div", { class: "mac-tabview" }), this.listNode = t("div", {
+			class: "mac-tabview__list",
+			role: "tablist",
+			"aria-orientation": "horizontal"
+		}), e.ariaLabel && this.listNode.setAttribute("aria-label", e.ariaLabel), this.panelHost = t("div", { class: "mac-tabview__panels" });
+		for (let e of this.tabs) {
+			let n = e.id === this.selectedId, r = s("mac-tabview-tab"), a = s("mac-tabview-panel"), o = t("button", {
+				class: `mac-tabview__tab${n ? " is-selected" : ""}`,
+				type: "button",
+				role: "tab",
+				id: r,
+				"aria-selected": String(n),
+				"aria-controls": a,
+				tabindex: n ? 0 : -1,
+				disabled: e.disabled ?? !1,
+				dataset: { id: e.id }
+			});
+			e.icon && o.appendChild(i(e.icon, 14)), o.appendChild(t("span", {
+				class: "mac-tabview__label",
+				text: e.label
+			}));
+			let c = t("div", {
+				class: "mac-tabview__panel",
+				role: "tabpanel",
+				id: a,
+				"aria-labelledby": r,
+				tabindex: 0,
+				hidden: !n
+			});
+			this.tabButtons.set(e.id, o), this.panels.set(e.id, c), this.listNode.appendChild(o), this.panelHost.appendChild(c);
+		}
+		this.listen(this.listNode, "click", (e) => {
+			let t = e.target.closest(".mac-tabview__tab");
+			if (!t || t.disabled) return;
+			let n = t.dataset.id;
+			n && n !== this.selectedId && (this.apply(n), this.onSelect?.(n));
+		}), this.listen(this.listNode, "keydown", (e) => this.onKeyDown(e)), this.root.append(this.listNode, this.panelHost);
+	}
+	addPanel(e, t) {
+		let n = this.panels.get(e);
+		n && n.replaceChildren(t);
+	}
+	setSelected(e) {
+		if (e === this.selectedId) return;
+		let t = this.tabs.find((t) => t.id === e);
+		t && !t.disabled && this.apply(e);
+	}
+	get selected() {
+		return this.selectedId;
+	}
+	apply(e) {
+		this.selectedId = e;
+		for (let [t, n] of this.tabButtons) {
+			let r = t === e;
+			n.classList.toggle("is-selected", r), n.setAttribute("aria-selected", String(r)), n.tabIndex = r ? 0 : -1;
+		}
+		for (let [t, n] of this.panels) n.hidden = t !== e;
+	}
+	onKeyDown(e) {
+		let t = this.tabs.filter((e) => !e.disabled && this.tabButtons.has(e.id));
+		if (t.length === 0) return;
+		let n = t.findIndex((e) => e.id === this.selectedId), r = n;
+		switch (e.key) {
+			case "ArrowRight":
+			case "ArrowDown":
+				r = n === -1 ? 0 : (n + 1) % t.length;
+				break;
+			case "ArrowLeft":
+			case "ArrowUp":
+				r = n === -1 ? t.length - 1 : (n - 1 + t.length) % t.length;
+				break;
+			case "Home":
+				r = 0;
+				break;
+			case "End":
+				r = t.length - 1;
+				break;
+			default: return;
+		}
+		e.preventDefault();
+		let i = t[r];
+		this.apply(i.id), this.tabButtons.get(i.id)?.focus(), this.onSelect?.(i.id);
+	}
+	destroy() {
+		this.panels.clear(), this.tabButtons.clear(), super.destroy();
+	}
+}, q = "M3 7 L5.5 9.5 L11 4", J = class extends e {
+	root;
+	items;
+	onSelect;
+	menuItems = [];
+	opened = !1;
+	disposeTracking = null;
+	restoreFocusTo = null;
+	highlighted = -1;
+	constructor(e) {
+		super(), this.items = e.items, this.onSelect = e.onSelect, this.root = t("div", {
+			class: "mac-menu",
+			role: "menu",
+			tabindex: -1
+		}), this.root.style.display = "none", this.root.style.visibility = "hidden", this.root.dataset.placement = e.placement ?? "bottom-start";
+		for (let e of this.items) {
+			if (e.separator) {
+				this.root.appendChild(t("div", {
+					class: "mac-menu__separator",
+					role: "separator"
+				}));
+				continue;
+			}
+			let n = t("button", {
+				class: "mac-menu__item",
+				type: "button",
+				role: e.checked === void 0 ? "menuitem" : "menuitemcheckbox",
+				disabled: e.disabled ?? !1,
+				dataset: { value: e.value }
+			});
+			if (e.checked !== void 0 && n.setAttribute("aria-checked", String(e.checked)), e.checked !== void 0) {
+				let r = t("span", { class: "mac-menu__check" });
+				e.checked && r.appendChild(i(q, 14, "0 0 14 14")), n.appendChild(r);
+			} else e.icon && n.appendChild(i(e.icon, 14));
+			n.appendChild(t("span", {
+				class: "mac-menu__label",
+				text: e.label
+			})), e.shortcut && n.appendChild(t("span", {
+				class: "mac-menu__shortcut",
+				text: e.shortcut
+			})), this.menuItems.push(n), this.root.appendChild(n);
+		}
+		this.listen(this.root, "click", (e) => {
+			let t = e.target.closest(".mac-menu__item");
+			t && !t.disabled && this.choose(t.dataset.value ?? "");
+		}), this.listen(this.root, "keydown", (e) => this.onKeyDown(e)), this.listen(this.root, "mousemove", (e) => {
+			let t = e.target.closest(".mac-menu__item");
+			if (!t || t.disabled) return;
+			let n = this.menuItems.indexOf(t);
+			n >= 0 && this.highlight(n);
+		}), this.listen(document, "mousedown", (e) => {
+			if (!this.opened) return;
+			let t = e.target;
+			this.root.contains(t) || this.close();
+		}), this.listen(document, "keydown", (e) => {
+			this.opened && e.key === "Escape" && (e.preventDefault(), this.close());
+		});
+	}
+	open(e) {
+		this.opened || (this.restoreFocusTo = document.activeElement, this.root.style.display = "block", this.root.style.visibility = "hidden", this.root.style.zIndex = String(f()), document.body.appendChild(this.root), this.disposeTracking = u({
+			anchor: e,
+			panel: this.root,
+			placement: this.root.dataset.placement ?? "bottom-start"
+		}), this.opened = !0, requestAnimationFrame(() => {
+			this.root.classList.add("is-open"), this.highlight(0), this.root.focus();
+		}));
+	}
+	close() {
+		this.opened && (this.opened = !1, this.root.classList.remove("is-open"), this.disposeTracking?.(), this.disposeTracking = null, window.setTimeout(() => {
+			this.opened || this.root.remove();
+		}, 140), this.root.remove(), this.highlight(-1), this.restoreFocusTo?.focus?.(), this.restoreFocusTo = null);
+	}
+	get isOpen() {
+		return this.opened;
+	}
+	choose(e) {
+		this.onSelect?.(e), this.close();
+	}
+	highlight(e) {
+		e !== this.highlighted && (this.menuItems[this.highlighted]?.classList.remove("is-highlighted"), this.highlighted = e, this.menuItems[e]?.classList.add("is-highlighted"));
+	}
+	step(e) {
+		let t = this.menuItems.map((e, t) => ({
+			button: e,
+			index: t
+		})).filter((e) => !e.button.disabled);
+		if (t.length === 0) return;
+		let n = t.findIndex((e) => e.index === this.highlighted), r = n === -1 ? e === 1 ? 0 : t.length - 1 : (n + e + t.length) % t.length;
+		this.highlight(t[r].index);
+	}
+	onKeyDown(e) {
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), this.step(1);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), this.step(-1);
+				break;
+			case "Home": {
+				e.preventDefault();
+				let t = this.menuItems.find((e) => !e.disabled), n = t ? this.menuItems.indexOf(t) : -1;
+				n >= 0 && this.highlight(n);
+				break;
+			}
+			case "End":
+				e.preventDefault();
+				for (let e = this.menuItems.length - 1; e >= 0; --e) if (!this.menuItems[e].disabled) {
+					this.highlight(e);
+					break;
+				}
+				break;
+			case "Enter":
+			case " ": {
+				e.preventDefault();
+				let t = this.menuItems[this.highlighted];
+				t && !t.disabled && this.choose(t.dataset.value ?? "");
+				break;
+			}
+		}
+	}
+	destroy() {
+		this.disposeTracking?.(), this.disposeTracking = null, this.root.remove(), super.destroy();
+	}
+};
+function Y(e, t) {
+	let n = new J(t);
+	return n.open(e), n;
+}
+// src/overlays/tooltip.ts
+var X = class extends e {
+	root;
+	content;
+	placement;
+	delay;
+	trigger = null;
+	disposeTracking = null;
+	showTimer = null;
+	visible = !1;
+	triggerListeners = [];
+	constructor(e) {
+		super(), this.content = e.content, this.placement = e.placement ?? "top", this.delay = e.delay ?? 400, this.root = t("div", {
+			class: "mac-tooltip",
+			role: "tooltip",
+			id: s("mac-tooltip")
+		}), this.root.textContent = this.content, this.root.style.display = "none";
+	}
+	attachTo(e) {
+		this.detach(), this.trigger = e, e.setAttribute("aria-describedby", this.root.id);
+		let t = (t, n) => {
+			e.addEventListener(t, n), this.triggerListeners.push(() => e.removeEventListener(t, n));
+		};
+		t("mouseenter", () => this.schedule()), t("mouseleave", () => this.close()), t("focus", () => this.schedule()), t("blur", () => this.close()), t("mousedown", () => this.close());
+	}
+	detach() {
+		this.trigger &&= (this.trigger.removeAttribute("aria-describedby"), null), this.cancelTimer(), this.close();
+		for (let e of this.triggerListeners.splice(0)) e();
+	}
+	schedule() {
+		this.cancelTimer(), this.showTimer = setTimeout(() => this.open(), this.delay);
+	}
+	cancelTimer() {
+		this.showTimer !== null && (clearTimeout(this.showTimer), this.showTimer = null);
+	}
+	open() {
+		!this.visible && this.trigger && (this.root.style.display = "block", this.root.style.visibility = "hidden", this.root.style.zIndex = String(f()), document.body.appendChild(this.root), this.disposeTracking = u({
+			anchor: this.trigger,
+			panel: this.root,
+			placement: this.placement,
+			offset: 8
+		}), this.visible = !0, requestAnimationFrame(() => this.root.classList.add("is-open")));
+	}
+	close() {
+		this.cancelTimer(), this.visible && (this.visible = !1, this.root.classList.remove("is-open"), this.disposeTracking?.(), this.disposeTracking = null, this.root.remove());
+	}
+	destroy() {
+		this.triggerListeners.splice(0).forEach((e) => e()), this.cancelTimer(), this.disposeTracking?.(), this.disposeTracking = null, this.root.remove(), super.destroy();
+	}
+}, ie = class extends e {
+	root;
+	scrim;
+	onCancel;
+	onConfirm;
+	releaseFocus = null;
+	opened = !1;
+	constructor(e) {
+		super();
+		let { title: n, body: r, confirmLabel: i = "确定", cancelLabel: a = "取消", onConfirm: o, onCancel: c } = e;
+		this.onConfirm = o, this.onCancel = c;
+		let l = s("mac-dialog-title");
+		this.scrim = t("div", { class: "mac-dialog__scrim" }), this.root = t("div", {
+			class: "mac-dialog",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": l,
+			tabindex: -1
+		});
+		let u = t("h2", {
+			class: "mac-dialog__title",
+			text: n,
+			id: l
+		}), d = t("div", { class: "mac-dialog__body" });
+		typeof r == "string" || typeof r == "number" ? d.textContent = String(r) : r && d.appendChild(r);
+		let f = t("div", { class: "mac-dialog__actions" }), p = new C({
+			label: a,
+			onClick: () => this.cancel()
+		}), m = new C({
+			label: i,
+			variant: "primary",
+			onClick: () => this.confirm()
+		});
+		f.append(p.element, m.element), this.root.append(u, d, f), this.scrim.appendChild(this.root), this.listen(this.scrim, "mousedown", (e) => {
+			e.target === this.scrim && this.cancel();
+		}), this.listen(document, "keydown", (e) => {
+			this.opened && e.key === "Escape" && (e.preventDefault(), this.cancel());
+		});
+	}
+	open() {
+		this.opened || (this.opened = !0, document.body.appendChild(this.scrim), this.releaseFocus = h(this.root), requestAnimationFrame(() => this.scrim.classList.add("is-open")));
+	}
+	close() {
+		this.opened && (this.opened = !1, this.scrim.classList.remove("is-open"), this.releaseFocus?.(), this.releaseFocus = null, setTimeout(() => {
+			this.opened || this.scrim.remove();
+		}, 200));
+	}
+	confirm() {
+		this.onConfirm?.(), this.close();
+	}
+	cancel() {
+		this.onCancel?.(), this.close();
+	}
+	get isOpen() {
+		return this.opened;
+	}
+	destroy() {
+		this.releaseFocus?.(), this.releaseFocus = null, this.scrim.remove(), super.destroy();
+	}
+}, ae = 160, oe = class extends e {
+	root;
+	placement;
+	offset;
+	onClose;
+	surface;
+	arrowNode = null;
+	anchor = null;
+	opened = !1;
+	disposeTracking = null;
+	closeTimer = null;
+	arrowFrame = 0;
+	constructor(e) {
+		super();
+		let { content: n, placement: r = "bottom", offset: i = 8, arrow: a = !1, ariaLabel: o, onClose: s } = e;
+		this.placement = r, this.offset = i, this.onClose = s, this.root = t("div", {
+			class: "mac-popover",
+			role: "dialog",
+			"aria-modal": "false",
+			tabindex: -1
+		}), this.root.style.display = "none", o && this.root.setAttribute("aria-label", o), this.surface = t("div", { class: "mac-popover__surface" });
+		let c = t("div", { class: "mac-popover__body" });
+		typeof n == "string" ? c.textContent = n : c.appendChild(n), this.surface.appendChild(c), a && (this.arrowNode = t("span", {
+			class: "mac-popover__arrow",
+			"aria-hidden": "true"
+		}), this.surface.appendChild(this.arrowNode)), this.root.appendChild(this.surface), this.listen(document, "mousedown", (e) => {
+			if (!this.opened) return;
+			let t = e.target;
+			!t || this.root.contains(t) || this.anchor?.contains(t) || this.close();
+		}), this.listen(document, "keydown", (e) => {
+			this.opened && e.key === "Escape" && (e.preventDefault(), this.close());
+		}), this.listen(window, "scroll", () => this.scheduleArrowUpdate(), { capture: !0 }), this.listen(window, "resize", () => this.scheduleArrowUpdate()), this.onDestroy(() => {
+			this.disposeTracking?.(), this.disposeTracking = null;
+		});
+	}
+	open(e) {
+		this.closeTimer !== null && (window.clearTimeout(this.closeTimer), this.closeTimer = null), this.opened ? this.anchor !== e && (this.anchor = e, this.place(), this.positionArrow(), this.disposeTracking?.(), this.disposeTracking = u(this.positionOptions(e))) : (this.opened = !0, this.anchor = e, this.root.style.display = "block", this.root.style.zIndex = String(f()), document.body.appendChild(this.root), this.place(), this.positionArrow(), this.disposeTracking = u(this.positionOptions(e)), requestAnimationFrame(() => {
+			this.opened && (this.root.classList.add("is-open"), this.focusInto());
+		}));
+	}
+	close() {
+		if (!this.opened) return;
+		this.opened = !1, this.root.classList.remove("is-open"), this.disposeTracking?.(), this.disposeTracking = null, this.cancelArrowUpdate();
+		let e = this.anchor;
+		this.anchor = null;
+		let t = document.activeElement;
+		(!t || t === document.body || this.root.contains(t)) && e?.focus?.(), this.closeTimer = window.setTimeout(() => {
+			this.closeTimer = null, this.opened || this.root.remove();
+		}, ae), this.onClose?.();
+	}
+	get isOpen() {
+		return this.opened;
+	}
+	positionOptions(e) {
+		return {
+			anchor: e,
+			panel: this.root,
+			placement: this.placement,
+			offset: this.offset
+		};
+	}
+	place() {
+		this.anchor && l(this.positionOptions(this.anchor));
+	}
+	scheduleArrowUpdate() {
+		this.opened && this.arrowNode && this.arrowFrame === 0 && (this.arrowFrame = requestAnimationFrame(() => {
+			this.arrowFrame = 0, this.opened && this.arrowNode && (this.place(), this.positionArrow());
+		}));
+	}
+	cancelArrowUpdate() {
+		this.arrowFrame !== 0 && (cancelAnimationFrame(this.arrowFrame), this.arrowFrame = 0);
+	}
+	positionArrow() {
+		let e = this.arrowNode;
+		if (!e || !this.anchor) return;
+		let t = this.surface.offsetLeft + this.surface.clientLeft, n = this.surface.offsetTop + this.surface.clientTop, r = this.surface.clientWidth, i = this.surface.clientHeight;
+		if (r === 0 || i === 0) return;
+		let a = this.anchor.getBoundingClientRect(), o = e.offsetWidth / 2, s = this.root.dataset.side ?? "bottom";
+		if (s === "top" || s === "bottom") {
+			let e = a.left + a.width / 2 - t, n = Math.max(o, Math.min(e, r - o));
+			this.surface.style.setProperty("--mac-popover-arrow-x", `${Math.round(n)}px`);
+		} else {
+			let e = a.top + a.height / 2 - n, t = Math.max(o, Math.min(e, i - o));
+			this.surface.style.setProperty("--mac-popover-arrow-y", `${Math.round(t)}px`);
+		}
+	}
+	focusInto() {
+		(m(this.root)[0] ?? this.root).focus();
+	}
+	destroy() {
+		this.closeTimer !== null && (window.clearTimeout(this.closeTimer), this.closeTimer = null), this.cancelArrowUpdate(), this.root.remove(), super.destroy();
+	}
+}, se = 300, ce = class extends e {
+	root;
+	scrim;
+	panel;
+	bodyNode;
+	onConfirm;
+	onCancel;
+	releaseFocus = null;
+	opened = !1;
+	closeTimer = null;
+	constructor(e) {
+		super();
+		let { title: n, body: r, confirmLabel: i = "确定", cancelLabel: a = "取消", onConfirm: o, onCancel: c } = e;
+		this.onConfirm = o, this.onCancel = c;
+		let l = s("mac-sheet-title");
+		this.root = t("div", {
+			class: "mac-sheet",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": l,
+			tabindex: -1
+		}), this.scrim = t("div", {
+			class: "mac-sheet__scrim",
+			"aria-hidden": "true"
+		}), this.panel = t("div", { class: "mac-sheet__panel" });
+		let u = t("h2", {
+			class: "mac-sheet__title",
+			id: l,
+			text: n
+		});
+		this.bodyNode = t("div", { class: "mac-sheet__body" }), typeof r == "string" || typeof r == "number" ? this.bodyNode.textContent = String(r) : r && this.bodyNode.appendChild(r);
+		let d = t("div", { class: "mac-sheet__actions" }), f = new C({
+			label: a,
+			onClick: () => this.cancel()
+		}), p = new C({
+			label: i,
+			variant: "primary",
+			onClick: () => this.confirm()
+		});
+		d.append(f.element, p.element), this.panel.append(u, this.bodyNode, d), this.root.append(this.scrim, this.panel), this.listen(this.scrim, "mousedown", () => this.cancel()), this.listen(document, "keydown", (e) => {
+			this.opened && e.key === "Escape" && (e.preventDefault(), this.cancel());
+		}), this.onDestroy(() => {
+			this.releaseFocus?.(), this.releaseFocus = null, this.root.remove();
+		});
+	}
+	open() {
+		this.closeTimer !== null && (window.clearTimeout(this.closeTimer), this.closeTimer = null), this.opened || (this.opened = !0, document.body.appendChild(this.root), this.releaseFocus = h(this.root), this.panel.offsetHeight, requestAnimationFrame(() => {
+			this.opened && this.root.classList.add("is-open");
+		}));
+	}
+	close() {
+		this.opened && (this.opened = !1, this.root.classList.remove("is-open"), this.releaseFocus?.(), this.releaseFocus = null, this.closeTimer = window.setTimeout(() => {
+			this.closeTimer = null, this.opened || this.root.remove();
+		}, se));
+	}
+	confirm() {
+		this.onConfirm?.(), this.close();
+	}
+	cancel() {
+		this.onCancel?.(), this.close();
+	}
+	get isOpen() {
+		return this.opened;
+	}
+	get content() {
+		return this.bodyNode;
+	}
+	destroy() {
+		this.closeTimer !== null && (window.clearTimeout(this.closeTimer), this.closeTimer = null), super.destroy();
+	}
+}, Z = null;
+function le() {
+	if (Z && Z.isConnected) return Z;
+	Z = t("div", { class: "mac-toast-stack" }), document.body.appendChild(Z);
+	let e = new MutationObserver(() => {
+		Z && Z.childElementCount === 0 && (Z.remove(), Z = null, e.disconnect());
+	});
+	return e.observe(Z, { childList: !0 }), Z;
+}
+var Q = class extends e {
+	root;
+	messageNode;
+	detailNode;
+	duration;
+	timer = null;
+	visible = !1;
+	constructor(e = {}) {
+		super(), this.duration = e.duration ?? 4e3;
+		let n = ["mac-toast"];
+		e.variant && e.variant !== "default" && n.push(`mac-toast--${e.variant}`), this.root = t("div", {
+			class: n.join(" "),
+			role: "status",
+			"aria-live": "polite"
+		}), this.messageNode = t("div", {
+			class: "mac-toast__message",
+			text: e.message ?? ""
+		}), this.detailNode = t("div", {
+			class: "mac-toast__detail",
+			text: e.detail ?? ""
+		}), e.detail || (this.detailNode.style.display = "none"), this.root.append(this.messageNode, this.detailNode);
+	}
+	show(e, t) {
+		e !== void 0 && (this.messageNode.textContent = e), t !== void 0 && (this.detailNode.textContent = t, this.detailNode.style.display = t ? "" : "none"), this.visible || (le().appendChild(this.root), this.visible = !0, requestAnimationFrame(() => this.root.classList.add("is-open"))), this.scheduleDismiss();
+	}
+	setDuration(e) {
+		this.duration = e;
+	}
+	hide() {
+		this.clearTimer(), this.visible && (this.visible = !1, this.root.classList.remove("is-open"), setTimeout(() => {
+			this.visible || this.root.remove();
+		}, 200));
+	}
+	scheduleDismiss() {
+		this.clearTimer(), this.duration <= 0 || (this.timer = setTimeout(() => this.hide(), this.duration));
+	}
+	clearTimer() {
+		this.timer !== null && (clearTimeout(this.timer), this.timer = null);
+	}
+	destroy() {
+		this.clearTimer(), this.root.remove(), super.destroy();
+	}
+};
+function $(e, t = {}) {
+	let n = new Q({
+		...t,
+		message: e
+	});
+	return n.show(), n;
+}
+// src/mobile/shell.ts
+var ue = class extends e {
+	root;
+	titleNode;
+	contentNode;
+	tabBar;
+	onTabChange;
+	currentId;
+	constructor(e) {
+		super();
+		let { title: n, tabs: r = [], selected: a, onTabChange: o, action: s } = e;
+		this.currentId = a ?? r[0]?.id ?? null, this.onTabChange = o, this.root = t("div", { class: "mac-mobile" });
+		let c = t("header", { class: "mac-mobile__navbar" });
+		if (this.titleNode = t("h1", {
+			class: "mac-mobile__title",
+			text: n
+		}), c.appendChild(this.titleNode), s) {
+			let e = t("div", { class: "mac-mobile__action" });
+			e.appendChild(s), c.appendChild(e);
+		}
+		this.contentNode = t("div", { class: "mac-mobile__content" });
+		let l = r.length > 0 ? t("nav", {
+			class: "mac-mobile__tabbar",
+			role: "tablist"
+		}) : null;
+		if (this.tabBar = l, l) {
+			for (let e of r) {
+				let n = t("button", {
+					class: `mac-mobile__tab${e.id === this.currentId ? " is-selected" : ""}`,
+					type: "button",
+					role: "tab",
+					"aria-selected": String(e.id === this.currentId),
+					dataset: { id: e.id }
+				});
+				n.append(i(e.icon, 22), t("span", { text: e.label })), l.appendChild(n);
+			}
+			this.listen(l, "click", (e) => {
+				let t = e.target.closest(".mac-mobile__tab");
+				if (!t) return;
+				let n = t.dataset.id;
+				n && this.setSelected(n, !0);
+			});
+		}
+		this.root.append(c, this.contentNode), l && this.root.appendChild(l);
+	}
+	get content() {
+		return this.contentNode;
+	}
+	setTitle(e) {
+		this.titleNode.textContent !== e && (this.titleNode.textContent = e);
+	}
+	setSelected(e, t = !1) {
+		if (this.currentId !== e) {
+			if (this.currentId = e, this.tabBar) for (let t of this.tabBar.querySelectorAll(".mac-mobile__tab")) {
+				let n = t.dataset.id === e;
+				t.classList.toggle("is-selected", n), t.setAttribute("aria-selected", String(n));
+			}
+			t && this.onTabChange?.(e);
+		}
+	}
+	get selected() {
+		return this.currentId;
+	}
+};
+function de() {
+	if (typeof window > "u") return !1;
+	let e = window.matchMedia("(pointer: coarse)").matches, t = window.matchMedia("(max-width: 720px)").matches;
+	return e && t;
+}
+export { g as BUILTIN_THEMES, re as Badge, C as Button, E as Checkbox, R as ComboBox, e as Component, B as DatePicker, ie as Dialog, M as Disclosure, J as Menu, ue as MobileShell, w as NumberField, oe as Popover, ne as Progress, D as SegmentedControl, O as Select, ce as Sheet, U as Sidebar, te as Slider, k as Spinner, L as SplitView, W as StatusBar, T as Switch, K as TabView, F as Table, A as TextArea, ee as TextField, y as ThemeManager, H as TitleBar, Q as Toast, G as Toolbar, X as Tooltip, V as TrafficLights, n as append, r as clear, t as el, m as focusableWithin, S as getDensity, de as looksLikeMobile, f as nextZIndex, l as positionOverlay, a as rafThrottle, x as setDensity, Y as showMenu, $ as showToast, i as svgIcon, b as themeManager, u as trackOverlay, h as trapFocus, s as uid };
+
+//# sourceMappingURL=index.js.map