@c2n/tree 0.0.9

package/dist/tree.js

@@ -0,0 +1,607 @@
+import { a as __decorate, i as TreeItem } from "./tree-item-C6XnvUA1.js";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { property, query } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { customElement } from "@c2n/core/element-helper.js";
+import { isServer } from "lit-html/is-server.js";
+import { arrayPropertyConverter, jsonPropertyConverter } from "@c2n/core/lit-helper.js";
+//#region src/tree.scss?inline
+var tree_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: block;\n  box-sizing: border-box;\n  background: var(--c2-tree--background,#ffffff);\n  font-size: var(--c2-tree--font-size,14px);\n  font-family: var(--c2-tree--font-family);\n  border-top: var(--c2-tree--border-top);\n  border-right: var(--c2-tree--border-right);\n  border-bottom: var(--c2-tree--border-bottom);\n  border-left: var(--c2-tree--border-left);\n  border-top-left-radius: var(--c2-tree--border-top-left-radius,8px);\n  border-top-right-radius: var(--c2-tree--border-top-right-radius,8px);\n  border-bottom-left-radius: var(--c2-tree--border-bottom-left-radius,8px);\n  border-bottom-right-radius: var(--c2-tree--border-bottom-right-radius,8px);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([disabled]) {\n  opacity: var(--c2-tree__disabled--opacity,0.38);\n  pointer-events: none;\n}\n\n.c2-tree {\n  box-sizing: border-box;\n  padding-top: var(--c2-tree--padding-top,4px);\n  padding-right: var(--c2-tree--padding-right,0px);\n  padding-bottom: var(--c2-tree--padding-bottom,4px);\n  padding-left: var(--c2-tree--padding-left,0px);\n  max-height: var(--c2-tree--max-height);\n  overflow: auto;\n}\n\n.empty {\n  color: var(--c2-tree__empty--color,#71717a);\n  padding: var(--c2-tree__empty--padding,18px);\n  text-align: center;\n}";
+//#endregion
+//#region src/tree.ts
+var TYPEAHEAD_WINDOW = 600;
+/** Caps the type-ahead scan so a keystroke cannot stall on a very large tree. */
+var TYPEAHEAD_SCAN_LIMIT = 2e3;
+var Tree = class Tree extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.items = [];
+		this.value = [];
+		this.expandedItems = [];
+		this.selection = "single";
+		this.checkboxSelection = false;
+		this.selectionPropagation = "both";
+		this.childrenOutline = false;
+		this.disabled = false;
+		this.expandOnClick = false;
+		this.#loaded = /* @__PURE__ */ new Set();
+		this.#typeahead = "";
+		this.#typeaheadAt = 0;
+		this.#syncing = false;
+		this.#syncQueued = false;
+		this.#handleItemChange = (event) => {
+			event.stopPropagation();
+			if (this.#syncing || this.#syncQueued) return;
+			this.#syncQueued = true;
+			queueMicrotask(() => {
+				this.#syncQueued = false;
+				this.#syncItems();
+			});
+		};
+		this.#handleClick = (event) => {
+			if (this.disabled) return;
+			const item = this.#itemFromEvent(event);
+			if (!item) return;
+			this.dispatchEvent(new CustomEvent("item-click", {
+				detail: { node: item.node },
+				bubbles: true,
+				composed: true
+			}));
+			if (item.disabled) return;
+			this.#focus(item);
+			if (this.expandOnClick && item.isBranch) this.#setExpanded(item, !item.expanded);
+			if (this.checkboxSelection) return;
+			this.#applySelection(item, {
+				toggle: event.ctrlKey || event.metaKey,
+				range: event.shiftKey
+			});
+		};
+		this.#handleToggle = (event) => {
+			event.stopPropagation();
+			if (this.disabled) return;
+			const item = this.#itemFromEvent(event);
+			if (item) this.#setExpanded(item, !item.expanded);
+		};
+		this.#handleCheck = (event) => {
+			event.stopPropagation();
+			if (this.disabled) return;
+			const item = this.#itemFromEvent(event);
+			if (item) this.#applyCheck(item, event.detail);
+		};
+		this.#handleKeydown = (event) => {
+			if (this.disabled) return;
+			const item = this.#itemFromEvent(event) ?? this.#focused;
+			if (!item) return;
+			const visible = this.visibleItems.filter((row) => !row.disabled);
+			const index = visible.indexOf(item);
+			switch (event.key) {
+				case "ArrowDown": {
+					event.preventDefault();
+					const next = visible[Math.min(index + 1, visible.length - 1)];
+					this.#focus(next);
+					if (next && event.shiftKey && this.#multiple) this.#applySelection(next, { range: true });
+					return;
+				}
+				case "ArrowUp": {
+					event.preventDefault();
+					const previous = visible[Math.max(index - 1, 0)];
+					this.#focus(previous);
+					if (previous && event.shiftKey && this.#multiple) this.#applySelection(previous, { range: true });
+					return;
+				}
+				case "ArrowRight":
+					event.preventDefault();
+					if (item.isBranch && !item.expanded) this.#setExpanded(item, true);
+					else this.#focus(item.childItems.find((child) => !child.disabled));
+					return;
+				case "ArrowLeft":
+					event.preventDefault();
+					if (item.expanded) this.#setExpanded(item, false);
+					else this.#focus(this.#ancestorsOf(item).pop());
+					return;
+				case "Home":
+					event.preventDefault();
+					this.#focus(visible[0]);
+					return;
+				case "End":
+					event.preventDefault();
+					this.#focus(visible[visible.length - 1]);
+					return;
+				case "Enter":
+					event.preventDefault();
+					if (this.expandOnClick && item.isBranch) this.#setExpanded(item, !item.expanded);
+					if (item.href && !item.disabled) item.renderRoot.querySelector("a")?.click();
+					else this.#applySelection(item);
+					return;
+				case " ":
+					event.preventDefault();
+					if (this.expandOnClick && item.isBranch) this.#setExpanded(item, !item.expanded);
+					if (this.checkboxSelection) this.#applyCheck(item, !item.selected);
+					else this.#applySelection(item, { toggle: this.#multiple });
+					return;
+				case "*": {
+					event.preventDefault();
+					const branches = (this.#ancestorsOf(item).pop()?.childItems ?? this.rootItems).filter((row) => row.isBranch && !row.disabled).map((row) => row.value);
+					this.expandedItems = [.../* @__PURE__ */ new Set([...this.expandedItems, ...branches])];
+					return;
+				}
+				case "a":
+				case "A": if (event.ctrlKey || event.metaKey) {
+					event.preventDefault();
+					this.selectAll();
+					return;
+				}
+			}
+			if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) this.#typeaheadTo(event.key, visible, index);
+		};
+	}
+	static {
+		this.styles = unsafeCSS(tree_default);
+	}
+	/** The row the roving `tabindex` currently rests on. */
+	#focused;
+	/** Anchor for Shift-extended range selection. */
+	#anchor;
+	/** Branches whose children have already been requested, so a second expand does not refetch. */
+	#loaded;
+	#typeahead;
+	#typeaheadAt;
+	#syncing;
+	#syncQueued;
+	/** Every row in the tree, in document order, expanded or not. */
+	get allItems() {
+		const result = [];
+		const walk = (items) => {
+			for (const item of items) {
+				result.push(item);
+				walk(item.childItems);
+			}
+		};
+		walk(this.rootItems);
+		return result;
+	}
+	/**
+	* The rows a user can actually see and move to — every row whose ancestors are all expanded, skipping any row
+	* `hidden` takes off the page. A filtered-out row must not stay in the keyboard order, or Arrow Down walks
+	* onto something nobody can see.
+	*/
+	get visibleItems() {
+		const result = [];
+		const walk = (items) => {
+			for (const item of items) {
+				if (item.hidden) continue;
+				result.push(item);
+				if (item.expanded) walk(item.childItems);
+			}
+		};
+		walk(this.rootItems);
+		return result;
+	}
+	/**
+	* The root rows, from whichever mode produced them. Data-driven rows live in this shadow root and slotted
+	* rows in the light DOM, so both sources are read; below the root the two modes are identical and
+	* `TreeItem.childItems` serves both.
+	*/
+	get rootItems() {
+		if (isServer) return [];
+		const slotted = this.rootSlot?.assignedElements({ flatten: true }) ?? [];
+		return [...this.container ? [...this.container.children] : [], ...slotted].flatMap((element) => unwrap(element));
+	}
+	/** The rows that are currently selected, in tree order. */
+	getSelectedNodes() {
+		return this.allItems.filter((item) => this.value.includes(item.value)).map((item) => item.node);
+	}
+	/** Expands a row. Unknown or disabled values are ignored. */
+	expand(value) {
+		const item = this.#itemOf(value);
+		if (item) this.#setExpanded(item, true);
+	}
+	/** Collapses a row. Unknown values are ignored. */
+	collapse(value) {
+		const item = this.#itemOf(value);
+		if (item) this.#setExpanded(item, false);
+	}
+	/** Expands a collapsed row, or collapses an expanded one. */
+	toggle(value) {
+		const item = this.#itemOf(value);
+		if (item) this.#setExpanded(item, !item.expanded);
+	}
+	/** Expands every branch already present in the tree. Branches that load on demand are left alone. */
+	expandAll() {
+		this.expandedItems = this.allItems.filter((item) => item.childItems.length > 0).map((item) => item.value);
+	}
+	/** Collapses every branch. */
+	collapseAll() {
+		this.expandedItems = [];
+	}
+	/** Selects every enabled row. Only meaningful while several rows may be selected. */
+	selectAll() {
+		if (!this.#multiple) return;
+		this.#commitSelection(this.allItems.filter((item) => !item.disabled).map((item) => item.value));
+	}
+	/** Clears the selection. */
+	clearSelection() {
+		this.#commitSelection([]);
+	}
+	/** Moves focus to a row, expanding its ancestors if needed. */
+	focusItem(value) {
+		const item = this.#itemOf(value);
+		if (!item) return;
+		for (const ancestor of this.#ancestorsOf(item)) if (!this.expandedItems.includes(ancestor.value)) this.expandedItems = [...this.expandedItems, ancestor.value];
+		this.updateComplete.then(() => this.#focus(item));
+	}
+	/** Drops the cached "already loaded" mark so the next expand runs `loadChildren` again. */
+	reload(value) {
+		if (value === void 0) this.#loaded.clear();
+		else this.#loaded.delete(value);
+	}
+	get #multiple() {
+		return this.selection === "multiple" || this.checkboxSelection;
+	}
+	#itemOf(value) {
+		return this.allItems.find((item) => item.value === value);
+	}
+	#ancestorsOf(item) {
+		if (isServer) return [];
+		const result = [];
+		let parent = item.parentElement;
+		while (parent instanceof TreeItem) {
+			result.unshift(parent);
+			parent = parent.parentElement;
+		}
+		return result;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("role", "tree");
+	}
+	willUpdate(changed) {
+		for (const key of ["value", "expandedItems"]) if (changed.has(key) && typeof this[key] === "string") this[key] = arrayPropertyConverter.fromAttribute(this[key]);
+		if (changed.has("items") && !Array.isArray(this.items)) this.items = [];
+	}
+	updated(changed) {
+		this.setAttribute("aria-multiselectable", String(this.#multiple));
+		if (this.disabled) this.setAttribute("aria-disabled", "true");
+		else this.removeAttribute("aria-disabled");
+		if (changed.has("items")) this.#loaded.clear();
+		this.#syncItems();
+	}
+	/**
+	* Rows announce themselves on connect, disconnect and identity changes. A declarative tree fires one per
+	* row while it parses, so the resync is coalesced into a microtask — resyncing per event would be quadratic
+	* on first paint.
+	*/
+	#handleItemChange;
+	/**
+	* Writes the tree's state onto every row: depth, expansion, selection, the derived indeterminate state and
+	* the roving `tabindex`. Rows never derive any of this themselves, which keeps one ordered walk authoritative
+	* for rendering, ARIA and keyboard movement alike.
+	*/
+	#syncItems() {
+		if (this.#syncing) return;
+		this.#syncing = true;
+		try {
+			const selected = new Set(this.value);
+			const expanded = new Set(this.expandedItems);
+			const partial = this.checkboxSelection ? this.#derivePartial(selected) : void 0;
+			const walk = (items, level) => {
+				items.forEach((item, index) => {
+					item.level = level;
+					item.setSize = items.length;
+					item.posInSet = index + 1;
+					item.expanded = expanded.has(item.value);
+					item.selected = selected.has(item.value);
+					item.indeterminate = partial?.has(item.value) ?? false;
+					item.checkboxSelection = this.checkboxSelection;
+					item.childrenOutline = this.childrenOutline;
+					item.selectable = this.selection !== "none" || this.checkboxSelection;
+					walk(item.childItems, level + 1);
+				});
+			};
+			walk(this.rootItems, 0);
+			const focusable = this.visibleItems.filter((item) => !item.disabled);
+			if (!this.#focused || !focusable.includes(this.#focused)) this.#focused = focusable.find((item) => selected.has(item.value)) ?? focusable[0];
+			for (const item of this.allItems) item.tabIndex = item === this.#focused && !this.disabled ? 0 : -1;
+		} finally {
+			this.#syncing = false;
+		}
+	}
+	/**
+	* Values of the branches only *some* of whose descendants are selected.
+	*
+	* Derived on every sync rather than stored, which also repairs the native input clearing its own
+	* indeterminate flag when clicked. Disabled rows are left out of the tally entirely, so a branch whose only
+	* unselected descendants are disabled reads as fully selected instead of being stuck half-ticked.
+	*/
+	#derivePartial(selected) {
+		const partial = /* @__PURE__ */ new Set();
+		const walk = (item) => {
+			const children = item.childItems;
+			if (children.length === 0) return item.disabled ? {
+				total: 0,
+				selected: 0
+			} : {
+				total: 1,
+				selected: selected.has(item.value) ? 1 : 0
+			};
+			let total = 0;
+			let hit = 0;
+			for (const child of children) {
+				const counts = walk(child);
+				total += counts.total;
+				hit += counts.selected;
+			}
+			if (hit > 0 && hit < total) partial.add(item.value);
+			return {
+				total,
+				selected: hit
+			};
+		};
+		for (const root of this.rootItems) walk(root);
+		return partial;
+	}
+	/** Every descendant of a row, expanded or not. */
+	#descendantsOf(item) {
+		const result = [];
+		const walk = (items) => {
+			for (const child of items) {
+				result.push(child);
+				walk(child.childItems);
+			}
+		};
+		walk(item.childItems);
+		return result;
+	}
+	async #setExpanded(item, expanded) {
+		if (item.disabled || !item.isBranch) return;
+		if (expanded === this.expandedItems.includes(item.value)) return;
+		if (expanded) {
+			const event = new CustomEvent("item-expand", {
+				detail: {
+					node: item.node,
+					loading: item.hasChildren && !this.#loaded.has(item.value)
+				},
+				bubbles: true,
+				composed: true,
+				cancelable: true
+			});
+			this.dispatchEvent(event);
+			if (event.defaultPrevented) return;
+			await this.#loadIfNeeded(item);
+		}
+		this.expandedItems = expanded ? [...this.expandedItems, item.value] : this.expandedItems.filter((value) => value !== item.value);
+		this.dispatchEvent(new CustomEvent("expansion-change", {
+			detail: {
+				expandedItems: this.expandedItems,
+				node: item.node,
+				expanded
+			},
+			bubbles: false,
+			composed: true
+		}));
+	}
+	/** Runs `loadChildren` once per branch, showing a spinner on the row while it is in flight. */
+	async #loadIfNeeded(item) {
+		if (!this.loadChildren || !item.hasChildren || this.#loaded.has(item.value)) return;
+		if (item.childItems.length > 0) return;
+		this.#loaded.add(item.value);
+		item.loading = true;
+		try {
+			const children = await this.loadChildren({
+				node: item.node,
+				level: item.level,
+				expanded: true,
+				selected: item.selected
+			});
+			if (children?.length) this.items = replaceChildren(this.items, item.value, children);
+		} catch (error) {
+			this.#loaded.delete(item.value);
+			this.dispatchEvent(new CustomEvent("item-load-error", {
+				detail: {
+					node: item.node,
+					error
+				},
+				bubbles: true,
+				composed: true
+			}));
+		} finally {
+			item.loading = false;
+		}
+	}
+	#commitSelection(values) {
+		this.value = values;
+		this.#syncItems();
+		this.dispatchEvent(new CustomEvent("selection-change", {
+			detail: {
+				value: this.value,
+				nodes: this.getSelectedNodes()
+			},
+			bubbles: false,
+			composed: true
+		}));
+	}
+	/** Applies a click or key press to the selection, honouring the range and toggle modifiers. */
+	#applySelection(item, options = {}) {
+		if (this.selection === "none" && !this.checkboxSelection) return;
+		if (item.disabled) return;
+		if (!this.#multiple) {
+			this.#anchor = item;
+			this.#commitSelection(this.value.includes(item.value) ? [] : [item.value]);
+			return;
+		}
+		if (options.range && this.#anchor) {
+			const visible = this.visibleItems;
+			const from = visible.indexOf(this.#anchor);
+			const to = visible.indexOf(item);
+			if (from !== -1 && to !== -1) {
+				const [start, end] = from < to ? [from, to] : [to, from];
+				const range = visible.slice(start, end + 1).filter((row) => !row.disabled);
+				this.#commitSelection([.../* @__PURE__ */ new Set([...this.value, ...range.map((row) => row.value)])]);
+				return;
+			}
+		}
+		this.#anchor = item;
+		if (options.toggle) {
+			const next = this.value.includes(item.value) ? this.value.filter((value) => value !== item.value) : [...this.value, item.value];
+			this.#commitSelection(next);
+			return;
+		}
+		this.#commitSelection([item.value]);
+	}
+	/**
+	* Ticks or clears a checkbox and carries the change to the row's relatives.
+	*
+	* A disabled row is never added or removed by a relative: it would otherwise end up in `value` with no way
+	* for the user to click it back out.
+	*/
+	#applyCheck(item, checked) {
+		if (item.disabled) return;
+		const next = new Set(this.value);
+		const propagateDown = this.selectionPropagation === "descendants" || this.selectionPropagation === "both";
+		const propagateUp = this.selectionPropagation === "parents" || this.selectionPropagation === "both";
+		const affected = [item, ...propagateDown ? this.#descendantsOf(item) : []];
+		for (const row of affected) {
+			if (row.disabled) continue;
+			if (checked) next.add(row.value);
+			else next.delete(row.value);
+		}
+		if (propagateUp) for (const ancestor of this.#ancestorsOf(item).reverse()) {
+			const descendants = this.#descendantsOf(ancestor).filter((row) => !row.disabled);
+			if (descendants.length > 0 && descendants.every((row) => next.has(row.value))) next.add(ancestor.value);
+			else next.delete(ancestor.value);
+		}
+		this.#commitSelection(this.allItems.filter((row) => next.has(row.value)).map((row) => row.value));
+	}
+	#focus(item) {
+		if (!item) return;
+		this.#focused = item;
+		for (const row of this.allItems) row.tabIndex = row === item ? 0 : -1;
+		item.focus();
+	}
+	#itemFromEvent(event) {
+		const target = event.target;
+		return target instanceof Element ? target.closest("c2-tree-item") ?? void 0 : void 0;
+	}
+	#handleClick;
+	#handleToggle;
+	#handleCheck;
+	#handleKeydown;
+	#typeaheadTo(key, visible, index) {
+		const now = Date.now();
+		this.#typeahead = now - this.#typeaheadAt > TYPEAHEAD_WINDOW ? key : this.#typeahead + key;
+		this.#typeaheadAt = now;
+		const needle = this.#typeahead.toLowerCase();
+		const scan = Math.min(visible.length, TYPEAHEAD_SCAN_LIMIT);
+		for (let step = 1; step <= scan; step += 1) {
+			const candidate = visible[(index + step) % visible.length];
+			if (candidate?.resolvedLabel.toLowerCase().startsWith(needle)) {
+				this.#focus(candidate);
+				return;
+			}
+		}
+	}
+	/** Renders one node and, when it is expanded, its children as its own light children — the shape a
+	* declaratively authored tree already has, so one walk serves both modes below the root. */
+	#renderNode(node, level) {
+		const context = {
+			node,
+			level,
+			expanded: this.expandedItems.includes(node.value),
+			selected: this.value.includes(node.value)
+		};
+		return html`<c2-tree-item
+      .value=${node.value}
+      .label=${node.label ?? ""}
+      .data=${node.data}
+      ?disabled=${node.disabled ?? false}
+      ?has-children=${node.hasChildren ?? false}
+    >
+      ${this.renderItem ? html`<span slot="label">${this.renderItem(context)}</span>` : html`${this.renderIcon ? html`<span slot="icon">${this.renderIcon(context)}</span>` : nothing}${this.renderLabel ? html`<span slot="label">${this.renderLabel(context)}</span>` : nothing}${this.renderActions ? html`<span slot="actions">${this.renderActions(context)}</span>` : nothing}`}
+      ${repeat(node.children ?? [], (child) => child.value, (child) => this.#renderNode(child, level + 1))}
+    </c2-tree-item>`;
+	}
+	render() {
+		const empty = this.items.length === 0 && this.childElementCount === 0;
+		return html`
+      <div
+        class="c2-tree"
+        part="tree"
+        @click=${this.#handleClick}
+        @keydown=${this.#handleKeydown}
+        @c2-tree-item-toggle=${this.#handleToggle}
+        @c2-tree-item-check=${this.#handleCheck}
+        @c2-tree-item-change=${this.#handleItemChange}
+      >
+        ${repeat(this.items, (node) => node.value, (node) => this.#renderNode(node, 0))}
+        <slot @slotchange=${this.#handleItemChange}></slot>
+        ${empty ? html`<div class="empty"><slot name="empty">No items</slot></div>` : nothing}
+      </div>
+    `;
+	}
+};
+__decorate([property({ converter: jsonPropertyConverter })], Tree.prototype, "items", void 0);
+__decorate([property({
+	converter: arrayPropertyConverter,
+	reflect: true
+})], Tree.prototype, "value", void 0);
+__decorate([property({
+	converter: arrayPropertyConverter,
+	reflect: true,
+	attribute: "expanded-items"
+})], Tree.prototype, "expandedItems", void 0);
+__decorate([property({ type: String })], Tree.prototype, "selection", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "checkbox-selection"
+})], Tree.prototype, "checkboxSelection", void 0);
+__decorate([property({
+	type: String,
+	attribute: "selection-propagation"
+})], Tree.prototype, "selectionPropagation", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "children-outline"
+})], Tree.prototype, "childrenOutline", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Tree.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "expand-on-click"
+})], Tree.prototype, "expandOnClick", void 0);
+__decorate([property({ attribute: false })], Tree.prototype, "loadChildren", void 0);
+__decorate([property({ attribute: false })], Tree.prototype, "renderItem", void 0);
+__decorate([property({ attribute: false })], Tree.prototype, "renderLabel", void 0);
+__decorate([property({ attribute: false })], Tree.prototype, "renderIcon", void 0);
+__decorate([property({ attribute: false })], Tree.prototype, "renderActions", void 0);
+__decorate([query(".c2-tree")], Tree.prototype, "container", void 0);
+__decorate([query("slot:not([name])")], Tree.prototype, "rootSlot", void 0);
+Tree = __decorate([customElement("c2-tree")], Tree);
+/**
+* Unwraps the single wrapper element an Astro island puts around a row in the docs site, so the walk sees the
+* row either way. Returns nothing for anything that is not a row.
+*/
+function unwrap(element) {
+	if (element instanceof TreeItem) return [element];
+	const child = element.firstElementChild;
+	return child instanceof TreeItem ? [child] : [];
+}
+/** Rebuilds only the path down to `value`, leaving every untouched branch identical. */
+function replaceChildren(items, value, children) {
+	return items.map((node) => {
+		if (node.value === value) return {
+			...node,
+			children
+		};
+		if (!node.children) return node;
+		const next = replaceChildren(node.children, value, children);
+		return next.every((child, index) => child === node.children[index]) ? node : {
+			...node,
+			children: next
+		};
+	});
+}
+//#endregion
+export { Tree };

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@c2n/tree",
+  "version": "0.0.9",
+  "type": "module",
+  "main": "dist/tree.js",
+  "exports": {
+    ".": {
+      "types": "./types/src/tree.d.ts",
+      "default": "./dist/tree.js"
+    },
+    "./tree-item.js": {
+      "types": "./types/src/tree-item.d.ts",
+      "default": "./dist/tree-item.js"
+    },
+    "./tree-types.js": {
+      "types": "./types/src/tree-types.d.ts",
+      "default": "./dist/tree-types.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
+  ],
+  "keywords": [
+    "tree",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build",
+        "../checkbox:build",
+        "../spinner:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/checkbox": "0.0.9",
+    "@c2n/core": "0.0.9",
+    "@c2n/spinner": "0.0.9",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "e4768cce5e0fbd5bc3165cd493a1e8d57cf0fff4"
+}