intable 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 huodoushigemi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,22 @@
+# intable
+
+## 特征
+
+- 类似 Excel 的表格组件
+- 单元格多选、复制、粘贴
+- 单元格编辑、数据校验
+- 列宽、行高可拖动
+- 虚拟滚动
+- 历史回滚
+<!-- - 合并单元格 -->
+<!-- - 表头分组 -->
+- 数据分组
+- 行展开
+<!-- - tree -->
+<!-- - 过滤、排序 -->
+- Diff 数据对比
+<!-- - 导出 Excel -->
+- 插件易扩展
+- 多框架支持（Vue、React）
+
+## 快速开始

package/dist/chevron-right.js

@@ -0,0 +1,8 @@
+import { spread, template } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d="m9 18l6-6l-6-6">`);
+var chevron_right_default = (props = {}) => (() => {
+	var _el$ = _tmpl$();
+	spread(_el$, props, true, true);
+	return _el$;
+})();
+export { chevron_right_default as default };

package/dist/components/Columns.d.ts

@@ -0,0 +1,3 @@
+export declare const Columns: (attrs: Partial<{
+    gap: number;
+}>) => import("solid-js").JSX.Element;

package/dist/components/Columns.js

@@ -0,0 +1,105 @@
+import { usePointerDrag } from "../hooks/index.js";
+import { addEventListener, createComponent, delegateEvents, effect, insert, memo, mergeProps, render, spread, style, template, use } from "solid-js/web";
+import { createEffect, createMemo, createSignal, mergeProps as mergeProps$1, onCleanup, onMount, splitProps } from "solid-js";
+import { clamp, sum } from "es-toolkit";
+import { createMutationObserver } from "@solid-primitives/mutation-observer";
+import { createElementBounds } from "@solid-primitives/bounds";
+var _tmpl$ = /* @__PURE__ */ template(`<div style=position:absolute;z-index:1>`), _tmpl$2 = /* @__PURE__ */ template(`<div>`), _tmpl$3 = /* @__PURE__ */ template(`<div class=col-hand contenteditable=false>`), _tmpl$4 = /* @__PURE__ */ template(`<div class=dot>`);
+const Columns = (attrs) => {
+	const [_, props] = splitProps(mergeProps$1({ gap: 0 }, attrs), ["children"]);
+	let ref;
+	const [children$1, setChildren] = createSignal([]);
+	const cols = createMemo(() => children$1().length);
+	const update = () => setChildren([...ref.querySelectorAll("& > [tiptap-is=\"column\"]")]);
+	onMount(() => update());
+	createMutationObserver(() => ref, { childList: true }, () => {
+		update();
+		container.parentElement || ref.insertBefore(container, ref.firstChild);
+	});
+	const container = _tmpl$();
+	const bounds2 = createElementBounds(() => container, { trackScroll: false });
+	createEffect(() => {
+		ref.insertBefore(container, ref.firstChild);
+		onCleanup(() => container.remove());
+	});
+	createEffect(() => {
+		children$1().forEach((el, i) => {
+			if (i == children$1().length - 1) return;
+			const dispose = render(() => createComponent(Hand, {
+				index: i,
+				get gap() {
+					return props.gap;
+				},
+				reference: el,
+				bounds2,
+				get onAdd() {
+					return props.onAdd;
+				}
+			}), container);
+			onCleanup(dispose);
+		});
+		const cw = ref.offsetWidth;
+		const tgap = (cols() - 1) * props.gap;
+		const meanw = (cw - tgap) / cols();
+		children$1().forEach((el) => el.style.width ||= `${meanw}px`);
+		const ws = children$1().map((el) => el.offsetWidth);
+		const sumw = sum(ws) + tgap;
+		const sgap = tgap / cols();
+		children$1().forEach((el, i) => el.style.width = `calc(${(ws[i] + sgap) / sumw * 100}% - ${sgap}px)`);
+	});
+	return (() => {
+		var _el$2 = _tmpl$2();
+		var _ref$ = ref;
+		typeof _ref$ === "function" ? use(_ref$, _el$2) : ref = _el$2;
+		spread(_el$2, mergeProps({ get style() {
+			return `display: flex; gap: ${props.gap}px;`;
+		} }, props, { get cols() {
+			return cols();
+		} }), false, true);
+		insert(_el$2, () => attrs.children);
+		return _el$2;
+	})();
+};
+var Hand = (props) => {
+	const bounds = createElementBounds(props.reference, { trackScroll: false });
+	const style$1 = createMemo(() => `
+    position: absolute;
+    width: ${props.gap}px;
+    height: ${bounds.height}px;
+    transform: translate(${bounds.right - props.bounds2.left}px, ${bounds.top - props.bounds2.top}px);
+  `);
+	let el;
+	usePointerDrag(() => el, { start(e, move) {
+		const col = props.reference;
+		const container = col.parentElement, cw = container.offsetWidth;
+		const [cols, gap] = [+container.getAttribute("cols"), +container.getAttribute("gap")];
+		const [left, right] = [col, col.nextElementSibling];
+		const [lw, rw] = [left?.offsetWidth || 0, right?.offsetWidth || 0];
+		const minw = cw * .05, maxw = lw + rw - minw;
+		const sgap = (cols - 1) * gap / cols;
+		move((e$1, { ox }) => {
+			left && (left.style.width = `calc(${(clamp(lw + ox, minw, maxw) + sgap) / cw * 100}% - ${sgap}px)`);
+			right && (right.style.width = `calc(${(clamp(rw - ox, minw, maxw) + sgap) / cw * 100}% - ${sgap}px)`);
+		});
+	} });
+	return (() => {
+		var _el$3 = _tmpl$3();
+		var _ref$3 = props.ref;
+		typeof _ref$3 === "function" ? use(_ref$3, _el$3) : props.ref = _el$3;
+		var _ref$2 = el;
+		typeof _ref$2 === "function" ? use(_ref$2, _el$3) : el = _el$3;
+		insert(_el$3, (() => {
+			var _c$ = memo(() => !!props.onAdd);
+			return () => _c$() && (() => {
+				var _el$4 = _tmpl$4();
+				addEventListener(_el$4, "pointerdown", { handleEvent: (e) => e.stopPropagation() });
+				_el$4.$$click = () => props.onAdd(props.index);
+				return _el$4;
+			})();
+		})());
+		effect((_$p) => style(_el$3, style$1(), _$p));
+		return _el$3;
+	})();
+};
+delegateEvents(["click"]);
+export { Columns };

package/dist/components/DocTree.d.ts

@@ -0,0 +1,4 @@
+import type { Editor } from '@tiptap/core';
+export declare function DocTree(_: {
+    editor: Editor;
+}): import("solid-js").JSX.Element;

package/dist/components/DocTree.js

@@ -0,0 +1,40 @@
+import { useMemoAsync } from "../hooks/index.js";
+import { Tree } from "./Tree.js";
+import { createComponent, insert, spread, template } from "solid-js/web";
+import { createEffect, createMemo, createSignal, splitProps } from "solid-js";
+import { delay } from "es-toolkit";
+var _tmpl$ = /* @__PURE__ */ template(`<div class=doc-tree>`);
+function DocTree(_) {
+	const [props, attrs] = splitProps(_, ["editor"]);
+	const [count, setCount] = createSignal(0);
+	createEffect(() => props.editor.on("update", () => setCount((v) => ++v)));
+	const json = useMemoAsync(() => (count(), delay(300).then(() => props.editor.getJSON())), {});
+	const headings = createMemo(() => {
+		return function walker(node, queue = [], queue2 = []) {
+			if (node.type === "heading") {
+				let i = queue.length;
+				while (i--) if (queue[i].level < node.attrs.level) break;
+				const item = {
+					label: node.content?.map((e) => e.text).join(""),
+					level: node.attrs.level
+				};
+				queue.push(item);
+				if (i > -1) (queue[i].children ??= []).push(item);
+				else queue2.push(item);
+			} else node.content?.forEach((e) => walker(e, queue, queue2));
+			return queue2;
+		}(json());
+	});
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, attrs, false, true);
+		insert(_el$, createComponent(Tree, {
+			get data() {
+				return headings();
+			},
+			"class": "min-h-40 max-h-100 overflow-auto"
+		}));
+		return _el$;
+	})();
+}
+export { DocTree };

package/dist/components/Menu.d.ts

@@ -0,0 +1 @@
+export declare function Menu(props: any): import("solid-js").JSX.Element;

package/dist/components/Menu.js

@@ -0,0 +1,131 @@
+import { unFn } from "../utils.js";
+import { useSignle2 } from "../hooks/index.js";
+import { createRender } from "./Render.js";
+import { VDir } from "../hooks/useDir.js";
+import { Popover } from "./Popover.js";
+import loading_default from "../loading.js";
+import { className, createComponent, effect, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
+import { children, createContext, createEffect, createMemo, createSignal, onMount, splitProps, useContext } from "solid-js";
+import { createMutable } from "solid-js/store";
+import { delay } from "es-toolkit";
+import { combineProps } from "@solid-primitives/props";
+import { pointerHover } from "@solid-primitives/pointer";
+import { isEmpty } from "es-toolkit/compat";
+import { autoUpdate, createFloating, offset } from "floating-ui-solid";
+var _tmpl$ = /* @__PURE__ */ template(`<div><div>`), _tmpl$2 = /* @__PURE__ */ template(`<div>`), _tmpl$3 = /* @__PURE__ */ template(`<div class="px-4 py-2 op40">无内容`);
+function Menu(props) {
+	const MenuCtx = createContext({ deep: 0 });
+	const _Li = (_e) => {
+		const ctx = useContext(MenuCtx);
+		const [e, attrs] = splitProps(_e, [
+			"children",
+			"label",
+			"icon",
+			"isActive",
+			"cb",
+			"menu",
+			"popover"
+		]);
+		const x = createMemo(() => props.x && ctx.deep == 1);
+		let el;
+		const [floating, setFloating] = createSignal();
+		const [hover, setHover] = useSignle2(false, { before: () => delay(100) });
+		const style$1 = createMemo(() => floating() ? createFloating({
+			strategy: "fixed",
+			placement: x() ? "bottom-start" : "right-start",
+			...e.menu,
+			elements: {
+				reference: () => el,
+				floating
+			},
+			whileElementsMounted(ref, float, update) {
+				return autoUpdate(ref, float, update, {
+					ancestorResize: true,
+					elementResize: true,
+					layoutShift: true,
+					ancestorScroll: true
+				});
+			}
+		}).floatingStyles : void 0);
+		createEffect(() => {
+			floating() && Object.assign(floating().style, style$1()?.() ?? {});
+		});
+		const req = createMutable({ loading: false });
+		async function onClick() {
+			if (req.loading) return;
+			const ret = e.cb?.();
+			if (ret instanceof Promise) try {
+				await ret;
+				req.loading = true;
+			} finally {
+				req.loading = false;
+				props.onAction?.(e);
+			}
+			else props.onAction?.(e);
+		}
+		onMount(() => {
+			createComponent(Popover, mergeProps({
+				strategy: "fixed",
+				reference: el,
+				portal: el
+			}, () => _e.popover, { get middleware() {
+				return [offset({ mainAxis: 4 })];
+			} }));
+		});
+		children(() => e.children);
+		return (() => {
+			var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+			use(pointerHover, _el$, () => setHover);
+			var _ref$ = el;
+			typeof _ref$ === "function" ? use(_ref$, _el$) : el = _el$;
+			spread(_el$, mergeProps(() => combineProps({ class: `li flex aic rd-2 ${x() ? "my-1 p-1" : "mx-1 pl-1 pr-4 py-1"} ${unFn(e.isActive) && "active"}` }, attrs), { "on:click": onClick }), false, true);
+			insert(_el$2, (() => {
+				var _c$ = memo(() => !!req.loading);
+				return () => _c$() ? createComponent(loading_default, {}) : e.icon;
+			})());
+			insert(_el$, () => e.label, null);
+			insert(_el$, (() => {
+				var _c$2 = memo(() => !!(hover() && e.children));
+				return () => _c$2() && createComponent(_Menu, {
+					ref: setFloating,
+					"class": "z-1",
+					get children() {
+						return e.children;
+					}
+				});
+			})(), null);
+			effect(() => className(_el$2, `flex aic ${x() ? "" : props.density == "comfortable" ? "ml-1 mr-2.5" : "ml-.5 mr-1"} `));
+			return _el$;
+		})();
+	};
+	const Li = createRender({
+		is: _Li,
+		processProps: (props$1) => {
+			let i = 0;
+			Array.isArray(props$1.children) && props$1.children.forEach((e) => !e.is && typeof e == "object" && (e["data-index"] = i++));
+			return props$1;
+		}
+	});
+	const _Menu = (e) => {
+		const parent = useContext(MenuCtx);
+		const ctx = createMutable({ deep: parent.deep + 1 });
+		return createComponent(MenuCtx.Provider, {
+			value: ctx,
+			get children() {
+				var _el$3 = _tmpl$2();
+				use(VDir, _el$3, () => e.usedir);
+				spread(_el$3, mergeProps(() => combineProps({ class: `${props.x && ctx.deep == 1 ? "tt-menu-x flex" : "tt-menu max-h-100"} overflow-auto` }, e), { "on:click": (e$1) => e$1.stopPropagation() }), false, true);
+				insert(_el$3, () => ((el) => isEmpty(el) ? _tmpl$3() : el)(e.children));
+				return _el$3;
+			}
+		});
+	};
+	return createComponent(Li, mergeProps(() => combineProps({}, props), {
+		is: _Menu,
+		items: null,
+		get children() {
+			return props.items;
+		}
+	}));
+}
+export { Menu };

package/dist/components/Popover.d.ts

@@ -0,0 +1,14 @@
+import { type JSX } from 'solid-js';
+import { type createFloatingProps, type ReferenceType } from 'floating-ui-solid';
+import type { AutoUpdateOptions } from '@floating-ui/dom';
+export declare function Popover(attrs: FloatingProps): JSX.Element;
+type FloatingProps = {
+    reference: ReferenceType;
+    floating?: JSX.Element | (() => JSX.Element);
+    portal?: HTMLElement;
+    trigger?: 'click' | 'hover';
+} & createFloatingProps;
+export declare function Floating(attrs: FloatingProps & {
+    update?: Partial<AutoUpdateOptions>;
+}): JSX.Element;
+export {};

package/dist/components/Popover.js

@@ -0,0 +1,49 @@
+import { useClicked, useHover, useMemoAsync } from "../hooks/index.js";
+import { Portal, createComponent, memo, mergeProps } from "solid-js/web";
+import { children, createEffect, createMemo, splitProps } from "solid-js";
+import { delay } from "es-toolkit";
+import { autoUpdate, createFloating } from "floating-ui-solid";
+function Popover(attrs) {
+	const [_, props] = splitProps(attrs, ["reference", "floating"]);
+	const show = (attrs.trigger == "click" ? useClicked : useHover)(() => [reference(), floating()].filter((e) => e));
+	const show2 = useMemoAsync(() => attrs.trigger == "click" ? show() : show() ? delay(100).then(() => true) : delay(200).then(() => false));
+	const reference = children(() => attrs.reference);
+	const floating = children(() => show2() ? attrs.floating : void 0);
+	return createComponent(Floating, mergeProps(props, {
+		reference,
+		floating
+	}));
+}
+function Floating(attrs) {
+	const [_, props] = splitProps(attrs, ["reference", "floating"]);
+	const reference = children(() => attrs.reference);
+	const floating = children(() => attrs.floating);
+	const style$1 = createMemo(() => floating() ? createFloating({
+		whileElementsMounted(ref, float, update) {
+			return autoUpdate(ref, float, update, {
+				ancestorResize: true,
+				elementResize: true,
+				layoutShift: true,
+				ancestorScroll: true,
+				...attrs.update
+			});
+		},
+		...props,
+		elements: {
+			reference,
+			floating
+		}
+	}).floatingStyles : void 0);
+	createEffect(() => {
+		floating() && Object.assign(floating().style, style$1()?.() ?? {});
+	});
+	return [memo(reference), memo(() => memo(() => !!(props.portal && floating()))() ? createComponent(Portal, {
+		get mount() {
+			return props.portal;
+		},
+		get children() {
+			return floating();
+		}
+	}) : floating())];
+}
+export { Floating, Popover };

package/dist/components/Render.d.ts

@@ -0,0 +1,4 @@
+export declare function createRender({ is, processProps }?: {
+    processProps?: ((e: any) => any) | undefined;
+}): (props: any) => import("solid-js").JSX.Element;
+export declare const Render: (props: any) => import("solid-js").JSX.Element;

package/dist/components/Render.js

@@ -0,0 +1,21 @@
+import { Dynamic, createComponent, memo, mergeProps } from "solid-js/web";
+import { splitProps } from "solid-js";
+var unFn = (fn, ...arg) => typeof fn == "function" ? fn(...arg) : fn;
+function createRender({ is, processProps = (e) => e } = {}) {
+	const Render$1 = (props) => {
+		const [reserve, attrs] = splitProps(processProps?.(props), [
+			"is",
+			"vIf",
+			"children"
+		]);
+		return memo(() => memo(() => !!(!("vIf" in reserve) || !!unFn(reserve.vIf)))() && createComponent(Dynamic, mergeProps({ get component() {
+			return reserve.is ?? is;
+		} }, attrs, { get children() {
+			return List(reserve.children);
+		} })));
+	};
+	const List = (children$1) => Array.isArray(children$1) ? children$1.map((e) => typeof e == "object" ? Render$1(e) : e) : children$1;
+	return Render$1;
+}
+const Render = createRender({ is: "div" });
+export { Render, createRender };

package/dist/components/Split.d.ts

@@ -0,0 +1,15 @@
+import { type JSXElement } from 'solid-js';
+type SplitProps = {
+    container?: Element;
+    cells: () => Element[];
+    handle?: (i: number) => JSXElement;
+    size?: number;
+    dir?: 'x' | 'y';
+    leading?: boolean;
+    trailing?: boolean;
+};
+export declare const Split: (props: SplitProps & {
+    children?: JSXElement;
+}) => import("solid-js").JSX.Element;
+export declare const useSplit: (props: SplitProps) => void;
+export {};

package/dist/components/Split.js

@@ -0,0 +1,88 @@
+import { unFn } from "../utils.js";
+import { Portal, createComponent, effect, insert, memo, spread, style, template, use } from "solid-js/web";
+import { For, children, createEffect, mapArray, mergeProps as mergeProps$1, onMount } from "solid-js";
+import { createElementBounds } from "@solid-primitives/bounds";
+var _tmpl$ = /* @__PURE__ */ template(`<div class=relative>`), _tmpl$2 = /* @__PURE__ */ template(`<div class="absolute z-1">`);
+const Split = (props) => {
+	let el;
+	const child = children(() => props.children);
+	onMount(() => {
+		useSplit({
+			...props,
+			container: el,
+			cells: () => props.cells ? props.cells() : child()
+		});
+	});
+	return (() => {
+		var _el$ = _tmpl$();
+		var _ref$ = el;
+		typeof _ref$ === "function" ? use(_ref$, _el$) : el = _el$;
+		spread(_el$, props, false, true);
+		insert(_el$, child);
+		return _el$;
+	})();
+};
+const useSplit = (props) => {
+	props = mergeProps$1({
+		dir: "x",
+		size: 4
+	}, props);
+	let el;
+	const bounds = mapArray(() => props.cells(), (el$1) => createElementBounds(el$1));
+	const rect = createElementBounds(() => el);
+	createEffect(() => el.style.position = "absolute");
+	const style$1 = (e, bool) => props.dir == "x" ? `transform: translate(${(bool ? e.left + e.width : e.left) - props.size / 2}px, ${e.top}px); width: ${props.size}px; height: ${e.height}px;` : `transform: translate(${e.left}px, ${(bool ? e.top + e.height : e.top) - props.size / 2}px); width: ${e.width}px; height: ${props.size}px;`;
+	const Handle = (e) => (() => {
+		var _el$2 = _tmpl$2();
+		insert(_el$2, () => props.handle?.(e.i));
+		effect((_$p) => style(_el$2, style$1({
+			...e.e,
+			left: e.e.left - rect.left,
+			top: e.e.top - rect.top
+		}, e.bool), _$p));
+		return _el$2;
+	})();
+	createComponent(Portal, {
+		ref(r$) {
+			var _ref$2 = el;
+			typeof _ref$2 === "function" ? _ref$2(r$) : el = r$;
+		},
+		get mount() {
+			return props.container || document.body;
+		},
+		get children() {
+			return [
+				createComponent(For, {
+					get each() {
+						return bounds().slice(0, -1);
+					},
+					children: (e, i) => createComponent(Handle, {
+						get e() {
+							return unFn(e);
+						},
+						bool: 1,
+						get i() {
+							return unFn(i);
+						}
+					})
+				}),
+				memo(() => memo(() => !!(!!bounds().length && props.leading))() && createComponent(Handle, {
+					get e() {
+						return bounds()[0];
+					},
+					i: -1
+				})),
+				memo(() => memo(() => !!(!!bounds().length && props.trailing))() && createComponent(Handle, {
+					get e() {
+						return bounds()[bounds().length - 1];
+					},
+					bool: 1,
+					get i() {
+						return bounds().length - 1;
+					}
+				}))
+			];
+		}
+	});
+};
+export { Split, useSplit };

package/dist/components/Tree.d.ts

@@ -0,0 +1,37 @@
+export declare abstract class $Node {
+    data: any;
+    constructor(data: any);
+    get label(): any;
+    abstract getChildren(): $Node[] | undefined;
+    children: $Node[] | undefined;
+    $children: import("solid-js").Accessor<$Node[] | undefined>;
+    parent: $Node | undefined;
+    $parent: import("solid-js").Signal<unknown>;
+    deep: number;
+    $deep: import("solid-js").Accessor<number>;
+    index: number;
+    $index: import("solid-js").Accessor<number | undefined>;
+    prev: $Node | undefined;
+    $prev: import("solid-js").Accessor<$Node | undefined>;
+    next: $Node | undefined;
+    $next: import("solid-js").Accessor<$Node | undefined>;
+    root: $Node;
+    $root: any;
+    path: $Node[];
+    $path: import("solid-js").Accessor<$Node[]>;
+    get descendants(): $Node[];
+    contains(node: $Node): boolean;
+    remove(): void;
+}
+export declare class $TreeItem extends $Node {
+    get is(): any;
+    get props(): any;
+    get id(): any;
+    getChildren(): any;
+}
+export declare function Tree(_: {
+    data: any;
+    Node: {
+        new (data: any): $TreeItem;
+    };
+}): import("solid-js").JSX.Element;

package/dist/components/Tree.js

@@ -0,0 +1,101 @@
+import { Dynamic, createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { Index, createEffect, createMemo, createSignal, onCleanup, splitProps } from "solid-js";
+import { combineProps } from "@solid-primitives/props";
+import { castArray } from "es-toolkit/compat";
+import { createLazyMemo } from "@solid-primitives/memo";
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+function define(that, key) {
+	const signal = createSignal();
+	Object.defineProperty(that, key, {
+		get() {
+			return signal[0]();
+		},
+		set(v) {
+			signal[1](v);
+		}
+	});
+	return signal;
+}
+function memo$1(that, key, fn) {
+	const signal = createLazyMemo(fn);
+	Object.defineProperty(that, key, { get() {
+		return signal();
+	} });
+	return signal;
+}
+var $Node = class {
+	constructor(data) {
+		this.$children = memo$1(this, "children", () => this.getChildren());
+		this.$parent = define(this, "parent");
+		this.$deep = memo$1(this, "deep", () => this.parent ? this.parent.deep + 1 : 0);
+		this.$index = memo$1(this, "index", () => this.parent?.children?.indexOf(this));
+		this.$prev = memo$1(this, "prev", () => this.parent?.children?.[this.index - 1]);
+		this.$next = memo$1(this, "next", () => this.parent?.children?.[this.index + 1]);
+		this.$root = memo$1(this, "root", () => this.parent ? this.parent.root : this);
+		this.$path = memo$1(this, "path", () => {
+			const ret = [this];
+			let e = this;
+			while (e.parent) ret.push(e = e.parent);
+			return ret.reverse();
+		});
+		this.data = data;
+		createEffect(() => {
+			const children$1 = this.children;
+			children$1?.map((e) => e.parent = this);
+			onCleanup(() => children$1?.map((e) => e.parent = void 0));
+		});
+	}
+	get label() {
+		return this.data.label;
+	}
+	get descendants() {
+		return this.children?.flatMap((e) => [e, ...e.descendants]) || [];
+	}
+	contains(node) {
+		return node.path.includes(this);
+	}
+	remove() {}
+};
+var $TreeItem = class $TreeItem extends $Node {
+	get is() {
+		return this.data.is;
+	}
+	get props() {
+		return this.data;
+	}
+	get id() {
+		return this.data.id;
+	}
+	getChildren() {
+		return this.data.children?.map((e) => new $TreeItem(e));
+	}
+};
+function Tree(_) {
+	const [props, attrs] = splitProps(_, ["data", "Node"]);
+	const Node = props.Node ?? $TreeItem;
+	const root = createMemo(() => new class extends Node {
+		getChildren() {
+			return castArray(this.data || []).map((e) => new Node(e));
+		}
+	}(props.data));
+	const flated = createMemo(() => root().descendants);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps(() => combineProps({ class: "tt-menu" }, attrs)), false, true);
+		insert(_el$, createComponent(Index, {
+			get each() {
+				return flated();
+			},
+			children: (node, index) => createComponent(Dynamic, mergeProps({ get component() {
+				return node().is ?? "div";
+			} }, () => combineProps({
+				class: "li py-1 px-4",
+				style: `padding-left: ${node().deep * 16}px`
+			}, node().props), { get children() {
+				return node().label;
+			} }))
+		}));
+		return _el$;
+	})();
+}
+export { $Node, $TreeItem, Tree };