Tree

<xtyle-tree label="Documentation"></xtyle-tree>

<script>
	document.querySelector("xtyle-tree").items = [
		{
			label: "Guides",
			expanded: true,
			children: [
				{ label: "Getting started", href: "/guides/start", selected: true },
				{ label: "Theming", href: "/guides/theming" },
			],
		},
		{
			label: "Reference",
			children: [{ label: "Engine", href: "/reference/engine" }],
		},
	];
</script>

<script lang="ts">
	import { Tree } from "@xtyle/svelte";

	const items = [
		{
			label: "Guides",
			expanded: true,
			children: [
				{ label: "Getting started", href: "/guides/start", selected: true },
				{ label: "Theming", href: "/guides/theming" },
			],
		},
		{
			label: "Reference",
			children: [
				{ label: "Engine", value: "engine", actions: [{ id: "rename", label: "Rename", icon: "✎" }] },
			],
		},
	];
</script>

<Tree
	label="Documentation"
	{items}
	onselect={(e) => console.log("select", e.detail.value)}
	ontreeaction={(e) => console.log(e.detail.action, "on", e.detail.value)}
/>

---
import { Tree } from "@xtyle/astro";

const items = [
	{
		label: "Guides",
		expanded: true,
		children: [
			{ label: "Getting started", href: "/guides/start", selected: true },
			{ label: "Theming", href: "/guides/theming" },
		],
	},
	{ label: "Reference", children: [{ label: "Engine", href: "/reference/engine" }] },
];
---

<Tree label="Documentation" items={items} />

<xtyle-tree label="Binder"></xtyle-tree>

<script>
	const tree = document.querySelector("xtyle-tree");
	tree.items = [
		{
			label: "Chapter 1", value: "ch1", expanded: true,
			// a word count plus a toned drift pill: two trailing badges, each its own color
			badge: ["1,204", { text: "3", tone: "warn" }],
			// hover text for a label the rail will ellipse; label stays the accessible name
			title: "The lighthouse keeper finds the letter",
			children: [
				{ label: "Opening", value: "ch1-1", badge: "512", title: "Dawn over the harbour", actions: [
					{ id: "up", label: "Move up", icon: "↑", disabled: true },
					{ id: "rename", label: "Rename", icon: "✎" },
					{ id: "delete", label: "Delete", icon: "✕" },
				] },
				{ label: "Rising action", value: "ch1-2", actions: [{ id: "rename", label: "Rename", icon: "✎" }] },
			],
		},
		{ label: "Chapter 2", value: "ch2", badge: "812", title: "She reads it twice, then burns it" },
	];
	// Badges show always; actions reveal on hover and fire tree-action (a disabled action stays greyed).
	// title is supplementary hover text — a synopsis behind a truncated label.
	tree.addEventListener("tree-action", (e) => console.log(e.detail.action, "on", e.detail.value));
</script>

<xtyle-tree label="Manuscript"></xtyle-tree>

<script>
	const tree = document.querySelector("xtyle-tree");
	const counts = { "ch1-1": 512, "ch1-2": 692 };

	// A live feed re-sets `items` wholesale on every edit — here, a per-row word count that ticks
	// on every keystroke in the editor. Expansion, selection, and the roving tab stop are host-owned,
	// so they ride straight through the swap: a branch the user collapsed stays collapsed even though
	// the data still declares `expanded: true`, and the selected row stays selected.
	const render = () => {
		tree.items = [{
			label: "Chapter 1", value: "ch1", expanded: true,
			badge: String(counts["ch1-1"] + counts["ch1-2"]),
			children: [
				{ label: "Opening", value: "ch1-1", selected: true, badge: String(counts["ch1-1"]) },
				{ label: "Rising action", value: "ch1-2", badge: String(counts["ch1-2"]) },
			],
		}];
	};

	editor.addEventListener("input", () => {
		counts["ch1-1"] = editor.value.split(/\s+/).filter(Boolean).length;
		render();
	});
	render();

	// Only a *new* branch seeds from its own flags. To throw the user's state away on purpose
	// (loading a different manuscript, say), ask for it:
	tree.resetState();
</script>