@sakuzu/maplibre-gl-draw-ui 1.2.1 → 1.3.1

package/dist/index.js

@@ -12,7 +12,7 @@ import { GlobeControl, NavigationControl, ScaleControl } from "maplibre-gl";
 *
 * `refresh` reads it again without an event, for a value that core changes without one.
 */
-function follow(draw, events, read) {
+function follow$1(draw, events, read) {
 	const updates = /* @__PURE__ */ new Set();
 	const subscribe = createSubscriber((update) => {
 		updates.add(update);
@@ -313,7 +313,7 @@ function Mouse_pointer_2($$anchor, $$props) {
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Actions.svelte
 var root$78 = $.from_html(`<div class="lead svelte-1sb9m4s"><!></div>`);
-var root_1$46 = $.from_html(`<div class="group svelte-1sb9m4s"><!> <!></div>`);
+var root_1$45 = $.from_html(`<div class="group svelte-1sb9m4s"><!> <!></div>`);
 var root_2$30 = $.from_html(`<div class="actions svelte-1sb9m4s" data-role="actions"><!> <!></div>`);
 function Actions$1($$anchor, $$props) {
 	var div = root_2$30();
@@ -330,7 +330,7 @@ function Actions$1($$anchor, $$props) {
 	});
 	var node_2 = $.sibling(node, 2);
 	var consequent_1 = ($$anchor) => {
-		var div_2 = root_1$46();
+		var div_2 = root_1$45();
 		var node_3 = $.child(div_2);
 		$.snippet(node_3, () => $$props.secondary ?? $.noop);
 		var node_4 = $.sibling(node_3, 2);
@@ -1502,15 +1502,15 @@ function placeTip(node, anchor, bounds) {
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Tooltip.svelte
 var root$71 = $.from_html(`<span class="kbd svelte-balpgw"><span class="t svelte-balpgw"> </span></span>`);
-var root_1$45 = $.from_html(`<span class="t svelte-balpgw"> </span><!>`, 1);
+var root_1$44 = $.from_html(`<span class="t svelte-balpgw"> </span><!>`, 1);
 var root_2$29 = $.from_html(`<span class="tip inline svelte-balpgw" data-h="button-sm" aria-hidden="true"><!></span>`);
-var root_3$19 = $.from_html(`<span class="pair svelte-balpgw"><span class="seat svelte-balpgw"><!></span> <!></span>`);
+var root_3$20 = $.from_html(`<span class="pair svelte-balpgw"><span class="seat svelte-balpgw"><!></span> <!></span>`);
 var root_4$13 = $.from_html(`<span class="tip svelte-balpgw" data-h="button-sm" aria-hidden="true"><!></span>`);
-var root_5$9 = $.from_html(`<span class="seat svelte-balpgw"><!> <!></span>`);
+var root_5$10 = $.from_html(`<span class="seat svelte-balpgw"><!> <!></span>`);
 function Tooltip($$anchor, $$props) {
 	$.push($$props, true);
 	const face = ($$anchor) => {
-		var fragment = root_1$45();
+		var fragment = root_1$44();
 		var span = $.first_child(fragment);
 		var text_1 = $.only_child(span, true);
 		var node_1 = $.sibling(span);
@@ -1595,7 +1595,7 @@ function Tooltip($$anchor, $$props) {
 	var fragment_1 = $.comment();
 	var node_2 = $.first_child(fragment_1);
 	var consequent_2 = ($$anchor) => {
-		var span_3 = root_3$19();
+		var span_3 = root_3$20();
 		var span_4 = $.child(span_3);
 		var node_3 = $.child(span_4);
 		$.snippet(node_3, () => $$props.children);
@@ -1616,7 +1616,7 @@ function Tooltip($$anchor, $$props) {
 		$.append($$anchor, span_3);
 	};
 	var alternate = ($$anchor) => {
-		var span_6 = root_5$9();
+		var span_6 = root_5$10();
 		var node_6 = $.child(span_6);
 		$.snippet(node_6, () => $$props.children);
 		var node_7 = $.sibling(node_6, 2);
@@ -1676,11 +1676,12 @@ var rest_excludes$10 = /* @__PURE__ */ new Set([
 	"aria-label",
 	"children"
 ]);
-var root$70 = $.from_html(`<span class="kbd t svelte-5ccjdv"> </span>`);
-var root_1$44 = $.from_html(`<!><span><!></span><!><!>`, 1);
-var root_2$28 = $.from_html(`<span class="unread svelte-5ccjdv" aria-hidden="true"><!></span>`);
-var root_3$18 = $.from_html(`<a><!><!></a>`);
-var root_4$12 = $.from_html(`<button><!><!></button>`);
+var root$70 = $.from_html(`<span><!></span>`);
+var root_1$43 = $.from_html(`<span class="kbd t svelte-5ccjdv"> </span>`);
+var root_2$28 = $.from_html(`<!><span><!></span><!><!>`, 1);
+var root_3$19 = $.from_html(`<span class="unread svelte-5ccjdv" aria-hidden="true"><!></span>`);
+var root_4$12 = $.from_html(`<a><!><!></a>`);
+var root_5$9 = $.from_html(`<button><!><!></button>`);
 function Button($$anchor, $$props) {
 	$.push($$props, true);
 	const inner = ($$anchor) => {
@@ -1693,48 +1694,56 @@ function Button($$anchor, $$props) {
 			$.append($$anchor, fragment_1);
 		};
 		var alternate = ($$anchor) => {
-			var fragment_2 = root_1$44();
+			var fragment_2 = root_2$28();
 			var node_2 = $.first_child(fragment_2);
 			var consequent_1 = ($$anchor) => {
-				Icon($$anchor, { get name() {
+				var span = root$70();
+				let classes;
+				Icon($.child(span), { get name() {
 					return $$props.leading;
 				} });
+				$.reset(span);
+				$.template_effect(() => classes = $.set_class(span, 1, "mark svelte-5ccjdv", null, classes, { mono: mono() }));
+				$.append($$anchor, span);
 			};
 			var consequent_2 = ($$anchor) => {
-				var fragment_4 = $.comment();
-				var node_3 = $.first_child(fragment_4);
-				$.snippet(node_3, () => $$props.mark);
-				$.append($$anchor, fragment_4);
+				var span_1 = root$70();
+				let classes_1;
+				var node_4 = $.child(span_1);
+				$.snippet(node_4, () => $$props.mark);
+				$.reset(span_1);
+				$.template_effect(() => classes_1 = $.set_class(span_1, 1, "mark svelte-5ccjdv", null, classes_1, { mono: mono() }));
+				$.append($$anchor, span_1);
 			};
 			$.if(node_2, ($$render) => {
 				if ($$props.leading) $$render(consequent_1);
 				else if ($$props.mark) $$render(consequent_2, 1);
 			});
-			var span = $.sibling(node_2);
-			let classes;
-			var node_4 = $.child(span);
-			$.snippet(node_4, () => $$props.children);
-			$.reset(span);
-			var node_5 = $.sibling(span);
+			var span_2 = $.sibling(node_2);
+			let classes_2;
+			var node_5 = $.child(span_2);
+			$.snippet(node_5, () => $$props.children);
+			$.reset(span_2);
+			var node_6 = $.sibling(span_2);
 			var consequent_3 = ($$anchor) => {
-				var span_1 = root$70();
-				var text = $.only_child(span_1, true);
+				var span_3 = root_1$43();
+				var text = $.only_child(span_3, true);
 				$.template_effect(() => $.set_text(text, $$props.kbd));
-				$.append($$anchor, span_1);
+				$.append($$anchor, span_3);
 			};
-			$.if(node_5, ($$render) => {
+			$.if(node_6, ($$render) => {
 				if ($$props.kbd) $$render(consequent_3);
 			});
-			var node_6 = $.sibling(node_5);
+			var node_7 = $.sibling(node_6);
 			var consequent_4 = ($$anchor) => {
 				Icon($$anchor, { get name() {
 					return $$props.trailing;
 				} });
 			};
-			$.if(node_6, ($$render) => {
+			$.if(node_7, ($$render) => {
 				if ($$props.trailing) $$render(consequent_4);
 			});
-			$.template_effect(() => classes = $.set_class(span, 1, "t svelte-5ccjdv", null, classes, {
+			$.template_effect(() => classes_2 = $.set_class(span_2, 1, "t svelte-5ccjdv", null, classes_2, {
 				clamp: clamp(),
 				mono: mono()
 			}));
@@ -1747,11 +1756,11 @@ function Button($$anchor, $$props) {
 		$.append($$anchor, fragment);
 	};
 	const unread = ($$anchor) => {
-		var fragment_6 = $.comment();
-		var node_7 = $.first_child(fragment_6);
+		var fragment_4 = $.comment();
+		var node_8 = $.first_child(fragment_4);
 		var consequent_5 = ($$anchor) => {
-			var span_2 = root_2$28();
-			Counter($.child(span_2), {
+			var span_4 = root_3$19();
+			Counter($.child(span_4), {
 				children: ($$anchor, $$slotProps) => {
 					$.next();
 					var text_1 = $.text();
@@ -1760,19 +1769,19 @@ function Button($$anchor, $$props) {
 				},
 				$$slots: { default: true }
 			});
-			$.reset(span_2);
-			$.append($$anchor, span_2);
+			$.reset(span_4);
+			$.append($$anchor, span_4);
 		};
-		$.if(node_7, ($$render) => {
+		$.if(node_8, ($$render) => {
 			if ($.get(badged)) $$render(consequent_5);
 		});
-		$.append($$anchor, fragment_6);
+		$.append($$anchor, fragment_4);
 	};
 	const control = ($$anchor) => {
-		var fragment_8 = $.comment();
-		var node_9 = $.first_child(fragment_8);
+		var fragment_6 = $.comment();
+		var node_10 = $.first_child(fragment_6);
 		var consequent_6 = ($$anchor) => {
-			var a = root_3$18();
+			var a = root_4$12();
 			$.attribute_effect(a, () => ({
 				class: `btn ${variant() ?? ""}`,
 				"data-tone": $$props.tone,
@@ -1789,19 +1798,20 @@ function Button($$anchor, $$props) {
 					block: block(),
 					spread: $.get(spread),
 					busy: busy(),
-					on: on(),
+					on: $$props.on,
+					reach: $.get(reach),
 					badged: $.get(badged)
 				}
 			}), void 0, void 0, void 0, "svelte-5ccjdv");
-			var node_10 = $.child(a);
-			inner(node_10);
-			var node_11 = $.sibling(node_10);
-			unread(node_11);
+			var node_11 = $.child(a);
+			inner(node_11);
+			var node_12 = $.sibling(node_11);
+			unread(node_12);
 			$.reset(a);
 			$.append($$anchor, a);
 		};
 		var alternate_1 = ($$anchor) => {
-			var button = root_4$12();
+			var button = root_5$9();
 			$.attribute_effect(button, () => ({
 				class: `btn ${variant() ?? ""}`,
 				"data-tone": $$props.tone,
@@ -1817,62 +1827,179 @@ function Button($$anchor, $$props) {
 					block: block(),
 					spread: $.get(spread),
 					busy: busy(),
-					on: on(),
+					on: $$props.on,
+					reach: $.get(reach),
 					badged: $.get(badged)
 				}
 			}), void 0, void 0, void 0, "svelte-5ccjdv");
-			var node_12 = $.child(button);
-			inner(node_12);
-			var node_13 = $.sibling(node_12);
-			unread(node_13);
+			var node_13 = $.child(button);
+			inner(node_13);
+			var node_14 = $.sibling(node_13);
+			unread(node_14);
 			$.reset(button);
 			$.append($$anchor, button);
 		};
-		$.if(node_9, ($$render) => {
+		$.if(node_10, ($$render) => {
 			if ($$props.href) $$render(consequent_6);
 			else $$render(alternate_1, -1);
 		});
-		$.append($$anchor, fragment_8);
+		$.append($$anchor, fragment_6);
 	};
-	let variant = $.prop($$props, "variant", 3, "outline"), icon = $.prop($$props, "icon", 3, false), block = $.prop($$props, "block", 3, false), busy = $.prop($$props, "busy", 3, false), disabled = $.prop($$props, "disabled", 3, false), on = $.prop($$props, "on", 3, false), clamp = $.prop($$props, "clamp", 3, false), mono = $.prop($$props, "mono", 3, false), type = $.prop($$props, "type", 3, "button"), rest = $.rest_props($$props, rest_excludes$10);
+	let variant = $.prop($$props, "variant", 3, "outline"), icon = $.prop($$props, "icon", 3, false), block = $.prop($$props, "block", 3, false), busy = $.prop($$props, "busy", 3, false), disabled = $.prop($$props, "disabled", 3, false), clamp = $.prop($$props, "clamp", 3, false), mono = $.prop($$props, "mono", 3, false), type = $.prop($$props, "type", 3, "button"), rest = $.rest_props($$props, rest_excludes$10);
 	const badged = $.derived(() => $$props.badge !== void 0 && $$props.badge > 0);
 	const tipText = $.derived(() => $$props.tip === false ? void 0 : $$props.tip ?? (icon() ? $$props["aria-label"] : void 0));
 	const keep = $.derived(() => rest["data-keep"] !== void 0);
 	const spread = $.derived(() => block() && !!$$props.trailing);
-	var fragment_9 = $.comment();
-	var node_14 = $.first_child(fragment_9);
+	const reach = $.derived(() => variant() === "ghost" && $$props.on === void 0 && rest["aria-pressed"] === void 0 && rest["aria-current"] === void 0);
+	var fragment_7 = $.comment();
+	var node_15 = $.first_child(fragment_7);
 	var consequent_7 = ($$anchor) => {
-		Tooltip($$anchor, {
-			get text() {
-				return $.get(tipText);
-			},
-			get shortcut() {
-				return $$props.shortcut;
-			},
-			role: "box",
-			get keep() {
-				return $.get(keep);
-			},
-			children: ($$anchor, $$slotProps) => {
-				control($$anchor);
-			},
-			$$slots: { default: true }
-		});
+		{
+			let $0 = $.derived(() => $.get(reach) ? "icon-button" : "box");
+			Tooltip($$anchor, {
+				get text() {
+					return $.get(tipText);
+				},
+				get shortcut() {
+					return $$props.shortcut;
+				},
+				get role() {
+					return $.get($0);
+				},
+				get keep() {
+					return $.get(keep);
+				},
+				children: ($$anchor, $$slotProps) => {
+					control($$anchor);
+				},
+				$$slots: { default: true }
+			});
+		}
 	};
 	var alternate_2 = ($$anchor) => {
 		control($$anchor);
 	};
-	$.if(node_14, ($$render) => {
+	$.if(node_15, ($$render) => {
 		if ($.get(tipText)) $$render(consequent_7);
 		else $$render(alternate_2, -1);
 	});
-	$.append($$anchor, fragment_9);
+	$.append($$anchor, fragment_7);
 	$.pop();
 }
 //#endregion
+//#region ../node_modules/@sakuzu/kata/dist/svelte/lib/place.js
+var MIN_HEIGHT = 120;
+/** The distance from the trigger (gap-xs) and the least distance from the window's edge (gap-md) */
+function distances(context) {
+	return {
+		gap: tokenPx("--kata-gap-xs", context),
+		edge: tokenPx("--kata-gap-md", context)
+	};
+}
+/** The height of the surface's content, measured without its limit; its scroll stays */
+function naturalHeight(surface) {
+	const keep = surface.style.maxHeight;
+	const scroll = surface.scrollTop;
+	surface.style.maxHeight = "";
+	const natural = surface.scrollHeight;
+	surface.style.maxHeight = keep;
+	surface.scrollTop = scroll;
+	return natural;
+}
+/**
+* Below the trigger (or above it), lined up with its start or its end edge. edge is the rectangle
+* it opens from (a bar's, for a trigger inside a bar), the trigger's by default; width is the width
+* the surface takes, its own by default.
+*/
+function placeBelow(surface, trigger, options) {
+	const { gap, edge: inset } = distances(surface);
+	const from = options.edge ?? trigger;
+	const vw = window.innerWidth;
+	const vh = window.innerHeight;
+	const width = options.width ?? surface.offsetWidth;
+	const natural = naturalHeight(surface);
+	const below = vh - from.bottom - gap - inset;
+	const above = from.top - gap - inset;
+	const up = options.up ? !(above < Math.min(natural, MIN_HEIGHT) && below > above) : below < Math.min(natural, MIN_HEIGHT) && above > below;
+	const maxHeight = Math.max(MIN_HEIGHT, up ? above : below);
+	const shown = Math.min(natural, maxHeight);
+	const top = up ? from.top - gap - shown : from.bottom + gap;
+	let left = options.align === "end" ? trigger.right - width : trigger.left;
+	left = Math.max(inset, Math.min(left, vw - width - inset));
+	return {
+		top: Math.round(top),
+		left: Math.round(left),
+		maxHeight: Math.round(maxHeight)
+	};
+}
+/**
+* Beside a vertical bar: gap-xs from its left edge, or from its right edge when there is no room on
+* the left, lined up with the top of the trigger and kept inside the window
+*/
+function placeBeside(surface, trigger, bar) {
+	const { gap, edge: inset } = distances(surface);
+	const vw = window.innerWidth;
+	const vh = window.innerHeight;
+	const width = surface.offsetWidth;
+	const maxHeight = Math.max(MIN_HEIGHT, vh - 2 * inset);
+	const shown = Math.min(naturalHeight(surface), maxHeight);
+	const top = Math.max(inset, Math.min(trigger.top, vh - shown - inset));
+	let left = bar.left - gap - width;
+	if (left < inset) left = Math.min(bar.right + gap, vw - width - inset);
+	return {
+		top: Math.round(top),
+		left: Math.round(left),
+		maxHeight: Math.round(maxHeight)
+	};
+}
+/**
+* A submenu next to its row: on the right, on the left when there is no room, and inside the window
+* below
+*/
+function placeNext(surface, row) {
+	const { edge: inset } = distances(surface);
+	const w = surface.offsetWidth;
+	const h = surface.offsetHeight;
+	let left = row.right;
+	if (left + w > window.innerWidth - inset) left = Math.max(inset, row.left - w);
+	let top = row.top;
+	if (top + h > window.innerHeight - inset) top = Math.max(inset, window.innerHeight - inset - h);
+	return {
+		top,
+		left
+	};
+}
+/**
+* Places the surface again whenever its trigger moves, the page or a container scrolls (not the
+* surface itself, whose content scrolls), or the window is resized. Returns the function that
+* stops following.
+*/
+function follow(trigger, surface, place) {
+	let last = trigger.getBoundingClientRect();
+	let frame = requestAnimationFrame(function watch() {
+		const r = trigger.getBoundingClientRect();
+		if (r.top !== last.top || r.left !== last.left || r.width !== last.width || r.height !== last.height) {
+			last = r;
+			place();
+		}
+		frame = requestAnimationFrame(watch);
+	});
+	const onScroll = (e) => {
+		if (e.target instanceof Node && surface.contains(e.target)) return;
+		place();
+	};
+	window.addEventListener("scroll", onScroll, true);
+	window.addEventListener("resize", place);
+	return () => {
+		cancelAnimationFrame(frame);
+		window.removeEventListener("scroll", onScroll, true);
+		window.removeEventListener("resize", place);
+	};
+}
+//#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Dropdown.svelte
 var root$69 = $.from_html(`<div><!></div>`);
-var root_1$43 = $.from_html(`<span><!></span> <!>`, 1);
+var root_1$42 = $.from_html(`<span><!></span> <!>`, 1);
 function Dropdown($$anchor, $$props) {
 	$.push($$props, true);
 	let align = $.prop($$props, "align", 3, "end"), preferUp = $.prop($$props, "up", 3, false), openInitially = $.prop($$props, "openInitially", 3, false), menu = $.prop($$props, "menu", 3, false), bare = $.prop($$props, "bare", 3, false), block = $.prop($$props, "block", 3, false), role = $.prop($$props, "role", 3, "anchor");
@@ -1912,47 +2039,16 @@ function Dropdown($$anchor, $$props) {
 	}));
 	let focusFirst = false;
 	let returnFocusEl = null;
-	const GAP = 4;
-	const EDGE = 8;
-	const MIN_HEIGHT = 120;
 	function place() {
 		if (!$.get(anchor) || !$.get(panelEl)) return;
-		const r = $.get(anchor).getBoundingClientRect();
+		const r = role() === "icon-button" ? hitRect($.get(anchor), role()) : $.get(anchor).getBoundingClientRect();
 		const bar = $.get(anchor).closest("[role=\"toolbar\"], [data-role=\"toolbar\"]");
 		const edge = bar ? bar.getBoundingClientRect() : r;
-		const vw = window.innerWidth;
-		const vh = window.innerHeight;
-		const width = $.get(panelEl).offsetWidth;
-		const keep = $.get(panelEl).style.maxHeight;
-		$.get(panelEl).style.maxHeight = "";
-		const natural = $.get(panelEl).scrollHeight;
-		$.get(panelEl).style.maxHeight = keep;
-		if (bar?.getAttribute("aria-orientation") === "vertical") {
-			const maxHeight = Math.max(MIN_HEIGHT, vh - 16);
-			const shown = Math.min(natural, maxHeight);
-			const top = Math.max(EDGE, Math.min(r.top, vh - shown - EDGE));
-			let left = edge.left - GAP - width;
-			if (left < EDGE) left = Math.min(edge.right + GAP, vw - width - EDGE);
-			$.set(pos, {
-				top: Math.round(top),
-				left: Math.round(left),
-				maxHeight: Math.round(maxHeight)
-			}, true);
-			return;
-		}
-		const below = vh - edge.bottom - GAP - EDGE;
-		const above = edge.top - GAP - EDGE;
-		const up = preferUp() ? !(above < Math.min(natural, MIN_HEIGHT) && below > above) : below < Math.min(natural, MIN_HEIGHT) && above > below;
-		const maxHeight = Math.max(MIN_HEIGHT, up ? above : below);
-		const shown = Math.min(natural, maxHeight);
-		const top = up ? edge.top - GAP - shown : edge.bottom + GAP;
-		let left = align() === "end" ? r.right - width : r.left;
-		left = Math.max(EDGE, Math.min(left, vw - width - EDGE));
-		$.set(pos, {
-			top: Math.round(top),
-			left: Math.round(left),
-			maxHeight: Math.round(maxHeight)
-		}, true);
+		$.set(pos, bar?.getAttribute("aria-orientation") === "vertical" ? placeBeside($.get(panelEl), r, edge) : placeBelow($.get(panelEl), r, {
+			align: align(),
+			up: preferUp(),
+			edge
+		}), true);
 	}
 	function toggle() {
 		$.set(open, !$.get(open));
@@ -1974,7 +2070,7 @@ function Dropdown($$anchor, $$props) {
 		}
 	}
 	$.user_effect(() => {
-		if (!$.get(open) || !$.get(panelEl)) return;
+		if (!$.get(open) || !$.get(panelEl) || !$.get(anchor)) return;
 		const el = $.get(panelEl);
 		if (canPopover && !isShown(el)) try {
 			el.showPopover();
@@ -1988,6 +2084,7 @@ function Dropdown($$anchor, $$props) {
 			await tick();
 			focusItemAt(0);
 		})();
+		return follow($.get(anchor), el, place);
 	});
 	function menuItems() {
 		if (!$.get(panelEl)) return [];
@@ -2033,11 +2130,9 @@ function Dropdown($$anchor, $$props) {
 		if (menu()) closeAndReturnFocus();
 		else $.set(open, false);
 	}
-	var fragment = root_1$43();
+	var fragment = root_1$42();
 	$.event("keydown", $.window, onKeyDown, true);
 	$.event("pointerdown", $.window, onPointerDown, true);
-	$.event("resize", $.window, () => $.get(open) && place());
-	$.event("scroll", $.window, () => $.get(open) && place());
 	var span = $.first_child(fragment);
 	let classes;
 	var node = $.child(span);
@@ -2058,6 +2153,7 @@ function Dropdown($$anchor, $$props) {
 				menu: !bare(),
 				placed: $.get(placed)
 			});
+			$.set_attribute(div, "data-outline", bare() ? void 0 : "");
 			$.set_attribute(div, "popover", canPopover ? "manual" : void 0);
 			$.set_attribute(div, "role", menu() ? "menu" : void 0);
 			$.set_attribute(div, "aria-orientation", menu() ? "vertical" : void 0);
@@ -2199,7 +2295,7 @@ function createNarrow(remLimit) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Menu.svelte
-var root$68 = $.from_html(`<div class="menu svelte-jzoay2" data-role="menu"><!></div>`);
+var root$68 = $.from_html(`<div class="menu svelte-jzoay2" data-role="menu" data-outline=""><!></div>`);
 function Menu($$anchor, $$props) {
 	var div = root$68();
 	var node = $.child(div);
@@ -2245,15 +2341,15 @@ var rest_excludes$9 = /* @__PURE__ */ new Set([
 	"children"
 ]);
 var root$65 = $.from_html(`<span class="chk svelte-ibgq9r"><!></span>`);
-var root_1$42 = $.from_html(`<span class="kbd t svelte-ibgq9r"> </span>`);
+var root_1$41 = $.from_html(`<span class="kbd t svelte-ibgq9r"> </span>`);
 var root_2$27 = $.from_html(`<span class="sub svelte-ibgq9r"><!></span>`);
-var root_3$17 = $.from_html(`<!> <span class="grow t svelte-ibgq9r"><!></span> <!> <!>`, 1);
+var root_3$18 = $.from_html(`<!> <span class="grow t svelte-ibgq9r"><!></span> <!> <!>`, 1);
 var root_4$11 = $.from_html(`<a><!></a>`);
 var root_5$8 = $.from_html(`<button><!></button>`);
 function MenuItem($$anchor, $$props) {
 	$.push($$props, true);
 	const inner = ($$anchor) => {
-		var fragment = root_3$17();
+		var fragment = root_3$18();
 		var node = $.first_child(fragment);
 		var consequent = ($$anchor) => {
 			Icon($$anchor, { get name() {
@@ -2282,7 +2378,7 @@ function MenuItem($$anchor, $$props) {
 		$.reset(span_1);
 		var node_3 = $.sibling(span_1, 2);
 		var consequent_3 = ($$anchor) => {
-			var span_2 = root_1$42();
+			var span_2 = root_1$41();
 			var text = $.only_child(span_2, true);
 			$.template_effect(() => $.set_text(text, $$props.kbd));
 			$.append($$anchor, span_2);
@@ -2364,7 +2460,7 @@ function MenuItem($$anchor, $$props) {
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/MenuList.svelte
 var root$64 = $.from_html(`<!> <!>`, 1);
-var root_1$41 = $.from_html(`<div class="sub svelte-1taxidq"><!></div>`);
+var root_1$40 = $.from_html(`<div class="sub svelte-1taxidq"><!></div>`);
 var root_2$26 = $.from_html(`<div class="level svelte-1taxidq"><!></div> <!>`, 1);
 function MenuList_1($$anchor, $$props) {
 	$.push($$props, true);
@@ -2509,8 +2605,9 @@ function MenuList_1($$anchor, $$props) {
 	}));
 	let listEl = $.state(void 0);
 	let subEl = $.state(void 0);
-	const EDGE = 8;
+	let subRow = $.state(void 0);
 	function place(row) {
+		$.set(subRow, row, true);
 		const r = row.getBoundingClientRect();
 		$.set(subPos, {
 			top: r.top,
@@ -2518,18 +2615,17 @@ function MenuList_1($$anchor, $$props) {
 		}, true);
 		tick().then(() => {
 			if (!$.get(subEl)) return;
-			const w = $.get(subEl).offsetWidth;
-			const h = $.get(subEl).offsetHeight;
-			let left = r.right;
-			if (left + w > window.innerWidth - EDGE) left = Math.max(EDGE, r.left - w);
-			let top = r.top;
-			if (top + h > window.innerHeight - EDGE) top = Math.max(EDGE, window.innerHeight - EDGE - h);
-			$.set(subPos, {
-				top,
-				left
-			}, true);
+			$.set(subPos, placeNext($.get(subEl), r), true);
 		});
 	}
+	$.user_effect(() => {
+		const el = $.get(subEl);
+		const row = $.get(subRow);
+		if (!el || !row) return;
+		return follow(row, el, () => {
+			$.set(subPos, placeNext(el, row.getBoundingClientRect()), true);
+		});
+	});
 	function openAt(index, row, focus = false) {
 		if ($.get(inPlace)) $.set(inPlaceSub, index, true);
 		else {
@@ -2630,7 +2726,7 @@ function MenuList_1($$anchor, $$props) {
 	$.bind_this(div, ($$value) => $.set(listEl, $$value), () => $.get(listEl));
 	var node_6 = $.sibling(div, 2);
 	var consequent_5 = ($$anchor) => {
-		var div_1 = root_1$41();
+		var div_1 = root_1$40();
 		let styles;
 		Menu($.child(div_1), {
 			children: ($$anchor, $$slotProps) => {
@@ -2686,11 +2782,11 @@ function Block($$anchor, $$props) {
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/InlineEdit.svelte
 var root$62 = $.from_html(`<textarea class="svelte-w5dys8"></textarea>`);
-var root_1$40 = $.from_html(`<input type="text" class="svelte-w5dys8"/>`);
+var root_1$39 = $.from_html(`<input type="text" class="svelte-w5dys8"/>`);
 var root_2$25 = $.from_html(`<span data-role="box"><!></span>`);
-var root_3$16 = $.from_html(`<span data-role="box"><span class="t clamp svelte-w5dys8"> </span></span>`);
-var root_4$10 = $.from_html(`<button type="button" data-role="box"><span class="t clamp svelte-w5dys8"> </span> <span class="pen svelte-w5dys8"><!></span></button>`);
-var root_5$7 = $.from_html(`<button class="add svelte-w5dys8" type="button" data-role="box" data-h="button"><!><span class="t svelte-w5dys8"> </span></button>`);
+var root_3$17 = $.from_html(`<span data-role="box" data-edge-pass=""><span class="t clamp svelte-w5dys8" data-ink=""> </span></span>`);
+var root_4$10 = $.from_html(`<button type="button" data-role="box" data-edge-pass=""><span class="t clamp svelte-w5dys8" data-ink=""> </span> <span class="pen svelte-w5dys8"><!></span></button>`);
+var root_5$7 = $.from_html(`<button class="add svelte-w5dys8" type="button" data-role="box" data-edge-pass=""><span class="line svelte-w5dys8" data-edge-pass=""><span class="mark svelte-w5dys8"><!></span><span class="t svelte-w5dys8" data-ink=""> </span></span></button>`);
 function InlineEdit($$anchor, $$props) {
 	$.push($$props, true);
 	let value = $.prop($$props, "value", 15, ""), editable = $.prop($$props, "editable", 3, true), title = $.prop($$props, "title", 3, false), multiline = $.prop($$props, "multiline", 3, false), editing = $.prop($$props, "editing", 15, false);
@@ -2765,7 +2861,7 @@ function InlineEdit($$anchor, $$props) {
 			$.append($$anchor, textarea);
 		};
 		var alternate = ($$anchor) => {
-			var input = root_1$40();
+			var input = root_1$39();
 			$.remove_input_defaults(input);
 			$.bind_this(input, ($$value) => $.set(inputEl, $$value), () => $.get(inputEl));
 			$.template_effect(() => $.set_attribute(input, "aria-label", $.get(a11yLabel)));
@@ -2792,7 +2888,7 @@ function InlineEdit($$anchor, $$props) {
 		var fragment_1 = $.comment();
 		var node_2 = $.first_child(fragment_1);
 		var consequent_2 = ($$anchor) => {
-			var span_1 = root_3$16();
+			var span_1 = root_3$17();
 			let classes_1;
 			var span_2 = $.child(span_1);
 			var text = $.only_child(span_2, true);
@@ -2802,7 +2898,6 @@ function InlineEdit($$anchor, $$props) {
 					title: title(),
 					multi: multiline()
 				});
-				$.set_attribute(span_1, "data-h", multiline() ? void 0 : "button");
 				$.set_text(text, value());
 			});
 			$.append($$anchor, span_1);
@@ -2827,7 +2922,6 @@ function InlineEdit($$anchor, $$props) {
 				multi: multiline()
 			});
 			$.set_attribute(button, "aria-label", $.get(a11yLabel));
-			$.set_attribute(button, "data-h", multiline() ? void 0 : "button");
 			$.set_text(text_1, value());
 		});
 		$.delegated("click", button, start);
@@ -2835,10 +2929,13 @@ function InlineEdit($$anchor, $$props) {
 	};
 	var alternate_1 = ($$anchor) => {
 		var button_1 = root_5$7();
-		var node_4 = $.child(button_1);
-		Icon(node_4, { name: "plus" });
-		var span_5 = $.sibling(node_4);
-		var text_2 = $.only_child(span_5, true);
+		var span_5 = $.child(button_1);
+		var span_6 = $.child(span_5);
+		Icon($.child(span_6), { name: "plus" });
+		$.reset(span_6);
+		var span_7 = $.sibling(span_6);
+		var text_2 = $.only_child(span_7, true);
+		$.reset(span_5);
 		$.reset(button_1);
 		$.template_effect(() => {
 			$.set_attribute(button_1, "aria-label", $.get(a11yLabel));
@@ -2860,11 +2957,11 @@ $.delegate(["keydown", "click"]);
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Pair.svelte
 var root$61 = $.from_html(`<label class="k svelte-kxn48z"> </label>`);
-var root_1$39 = $.from_html(`<a class="k link svelte-kxn48z"> </a>`);
+var root_1$38 = $.from_html(`<a class="k link svelte-kxn48z"> </a>`);
 var root_2$24 = $.from_html(`<span class="k svelte-kxn48z"> </span>`);
-var root_3$15 = $.from_html(`<span><!></span>`);
+var root_3$16 = $.from_html(`<span><!></span>`);
 var root_4$9 = $.from_html(`<div class="row svelte-kxn48z"><!></div>`);
-var root_5$6 = $.from_html(`<span class="note svelte-kxn48z"> </span>`);
+var root_5$6 = $.from_html(`<span class="note svelte-kxn48z" data-ink=""> </span>`);
 var root_6$5 = $.from_html(`<div data-role="pair"><!> <!> <!></div>`);
 function Pair($$anchor, $$props) {
 	$.push($$props, true);
@@ -2882,6 +2979,7 @@ function Pair($$anchor, $$props) {
 	const tiny = createNarrow(24);
 	$.user_effect(tiny.start);
 	const h = $.derived(() => top() || tiny.current || read() ? void 0 : "button");
+	const side = $.derived(() => !$$props.note && !tiny.current);
 	var div = root_6$5();
 	let classes;
 	var node = $.child(div);
@@ -2897,7 +2995,7 @@ function Pair($$anchor, $$props) {
 		$.append($$anchor, label_1);
 	};
 	var consequent_1 = ($$anchor) => {
-		var a = root_1$39();
+		var a = root_1$38();
 		let styles_1;
 		var text_1 = $.only_child(a, true);
 		$.template_effect(() => {
@@ -2924,7 +3022,7 @@ function Pair($$anchor, $$props) {
 	});
 	var node_1 = $.sibling(node, 2);
 	var consequent_2 = ($$anchor) => {
-		var span_1 = root_3$15();
+		var span_1 = root_3$16();
 		let classes_1;
 		var node_2 = $.child(span_1);
 		$.snippet(node_2, () => $$props.children);
@@ -2966,6 +3064,7 @@ function Pair($$anchor, $$props) {
 			noted: !!$$props.note
 		});
 		$.set_attribute(div, "data-h", $$props.note ? void 0 : $.get(h));
+		$.set_attribute(div, "data-edge-pass", $.get(side) ? "" : void 0);
 	});
 	$.append($$anchor, div);
 	$.pop();
@@ -3022,41 +3121,49 @@ function Kv($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/LinkAction.svelte
-var root$59 = $.from_html(`<!><span class="t svelte-3d5dxp"><!></span><!>`, 1);
-var root_1$38 = $.from_html(`<a class="link svelte-3d5dxp" data-role="box"><!></a>`);
-var root_2$23 = $.from_html(`<button type="button" class="link svelte-3d5dxp" data-role="box"><!></button>`);
+var root$59 = $.from_html(`<span class="mark svelte-3d5dxp"><!></span>`);
+var root_1$37 = $.from_html(`<span class="line svelte-3d5dxp" data-edge-pass=""><!><span class="t svelte-3d5dxp" data-ink=""><!></span><!></span>`);
+var root_2$23 = $.from_html(`<a class="link svelte-3d5dxp" data-role="box" data-edge-pass=""><!></a>`);
+var root_3$15 = $.from_html(`<button type="button" class="link svelte-3d5dxp" data-role="box" data-edge-pass=""><!></button>`);
 function LinkAction($$anchor, $$props) {
 	const inner = ($$anchor) => {
-		var fragment = root$59();
-		var node = $.first_child(fragment);
+		var span = root_1$37();
+		var node = $.child(span);
 		var consequent = ($$anchor) => {
-			Icon($$anchor, { get name() {
+			var span_1 = root$59();
+			Icon($.child(span_1), { get name() {
 				return $$props.icon;
 			} });
+			$.reset(span_1);
+			$.append($$anchor, span_1);
 		};
 		$.if(node, ($$render) => {
 			if ($$props.icon) $$render(consequent);
 		});
-		var span = $.sibling(node);
-		var node_1 = $.child(span);
-		$.snippet(node_1, () => $$props.children);
-		$.reset(span);
-		var node_2 = $.sibling(span);
+		var span_2 = $.sibling(node);
+		var node_2 = $.child(span_2);
+		$.snippet(node_2, () => $$props.children);
+		$.reset(span_2);
+		var node_3 = $.sibling(span_2);
 		var consequent_1 = ($$anchor) => {
-			Icon($$anchor, { name: "arrow-up-right" });
+			var span_3 = root$59();
+			Icon($.child(span_3), { name: "arrow-up-right" });
+			$.reset(span_3);
+			$.append($$anchor, span_3);
 		};
-		$.if(node_2, ($$render) => {
+		$.if(node_3, ($$render) => {
 			if (external()) $$render(consequent_1);
 		});
-		$.append($$anchor, fragment);
+		$.reset(span);
+		$.append($$anchor, span);
 	};
 	let disabled = $.prop($$props, "disabled", 3, false), external = $.prop($$props, "external", 3, false);
-	var fragment_3 = $.comment();
-	var node_3 = $.first_child(fragment_3);
+	var fragment = $.comment();
+	var node_5 = $.first_child(fragment);
 	var consequent_2 = ($$anchor) => {
-		var a = root_1$38();
-		var node_4 = $.child(a);
-		inner(node_4);
+		var a = root_2$23();
+		var node_6 = $.child(a);
+		inner(node_6);
 		$.reset(a);
 		$.template_effect(() => {
 			$.set_attribute(a, "href", $$props.href);
@@ -3069,9 +3176,9 @@ function LinkAction($$anchor, $$props) {
 		$.append($$anchor, a);
 	};
 	var alternate = ($$anchor) => {
-		var button = root_2$23();
-		var node_5 = $.child(button);
-		inner(node_5);
+		var button = root_3$15();
+		var node_7 = $.child(button);
+		inner(node_7);
 		$.reset(button);
 		$.template_effect(() => button.disabled = disabled());
 		$.delegated("click", button, function(...$$args) {
@@ -3079,11 +3186,11 @@ function LinkAction($$anchor, $$props) {
 		});
 		$.append($$anchor, button);
 	};
-	$.if(node_3, ($$render) => {
+	$.if(node_5, ($$render) => {
 		if ($$props.href) $$render(consequent_2);
 		else $$render(alternate, -1);
 	});
-	$.append($$anchor, fragment_3);
+	$.append($$anchor, fragment);
 }
 $.delegate(["click"]);
 //#endregion
@@ -3153,21 +3260,66 @@ var clampTip = (node) => {
 };
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Text.svelte
+var root$58 = $.from_html(`<div data-edge-pass=""><!> <span><!></span></div>`);
 function Text($$anchor, $$props) {
 	$.push($$props, true);
+	const text = ($$anchor) => {
+		var fragment = $.comment();
+		var node_1 = $.first_child(fragment);
+		$.element(node_1, () => $.get(tag), false, ($$element, $$anchor) => {
+			$.action($$element, ($$node, $$action_arg) => clampTipIf?.($$node, $$action_arg), clamp);
+			$.attribute_effect($$element, () => ({
+				class: `kata-text ${role() ?? ""}`,
+				"data-role": $.get(dataRole),
+				"data-ink": true,
+				id: $$props.id,
+				for: $.get(tag) === "label" ? $$props.for : void 0,
+				href: $.get(tag) === "a" ? $$props.href : void 0,
+				[$.CLASS]: {
+					clamp: clamp(),
+					clamp2: $$props.lines === 2,
+					wrap: wrap(),
+					muted: muted(),
+					mono: mono(),
+					tabular: tabular()
+				}
+			}), void 0, void 0, void 0, "svelte-1hyv1j2");
+			var fragment_1 = $.comment();
+			var node_2 = $.first_child(fragment_1);
+			$.snippet(node_2, () => $$props.children);
+			$.append($$anchor, fragment_1);
+		});
+		$.append($$anchor, fragment);
+	};
 	let role = $.prop($$props, "role", 3, "body"), clamp = $.prop($$props, "clamp", 3, false), wrap = $.prop($$props, "wrap", 3, false), muted = $.prop($$props, "muted", 3, false), mono = $.prop($$props, "mono", 3, false), tabular = $.prop($$props, "tabular", 3, false);
-	/** The type role (default body) */
-	/** Another element than the role's own: h1 (title, h1), h2 (h2), p (body, prose) or span */
-	/** One line with an ellipsis; the full text shows on hover when it is clipped */
-	/** Two lines with an ellipsis */
-	/** Keep line breaks and wrap long words (text that people wrote) */
-	/** The muted text color */
-	/** The monospace font, at the role's size */
-	/** Figures of equal width, for columns of numbers and times */
-	/** The labelled control, with as="label" */
-	/** The target, with as="a" */
 	const tag = $.derived(() => $$props.as ?? (role() === "h1" || role() === "title" ? "h1" : role() === "h2" ? "h2" : role() === "prose" || role() === "body" ? "p" : "span"));
 	const dataRole = $.derived(() => role() === "body" || role() === "prose" ? "p" : role());
+	let ended = $.state(void 0);
+	let seat = $.state(void 0);
+	let under = $.state(false);
+	$.user_effect(() => {
+		const row = $.get(ended);
+		const s = $.get(seat);
+		if (!row || !s || typeof ResizeObserver === "undefined") return;
+		let frame = 0;
+		const read = () => {
+			const text = row.firstElementChild;
+			if (!text) return;
+			const next = s.getBoundingClientRect().top >= text.getBoundingClientRect().bottom;
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => {
+				frame = 0;
+				if (untrack(() => $.get(under)) !== next) $.set(under, next);
+			});
+		};
+		const ro = new ResizeObserver(read);
+		ro.observe(row);
+		ro.observe(s);
+		return () => {
+			ro.disconnect();
+			cancelAnimationFrame(frame);
+		};
+	});
 	const clampTipIf = (node, on) => {
 		let inner = on ? clampTip(node) : void 0;
 		return {
@@ -3183,31 +3335,35 @@ function Text($$anchor, $$props) {
 			}
 		};
 	};
-	var fragment = $.comment();
-	var node_1 = $.first_child(fragment);
-	$.element(node_1, () => $.get(tag), false, ($$element, $$anchor) => {
-		$.action($$element, ($$node, $$action_arg) => clampTipIf?.($$node, $$action_arg), clamp);
-		$.attribute_effect($$element, () => ({
-			class: `kata-text ${role() ?? ""}`,
-			"data-role": $.get(dataRole),
-			id: $$props.id,
-			for: $.get(tag) === "label" ? $$props.for : void 0,
-			href: $.get(tag) === "a" ? $$props.href : void 0,
-			[$.CLASS]: {
-				clamp: clamp(),
-				clamp2: $$props.lines === 2,
-				wrap: wrap(),
-				muted: muted(),
-				mono: mono(),
-				tabular: tabular()
-			}
-		}), void 0, void 0, void 0, "svelte-1hyv1j2");
-		var fragment_1 = $.comment();
-		var node_2 = $.first_child(fragment_1);
-		$.snippet(node_2, () => $$props.children);
-		$.append($$anchor, fragment_1);
+	var fragment_2 = $.comment();
+	var node_3 = $.first_child(fragment_2);
+	var consequent = ($$anchor) => {
+		var div = root$58();
+		let classes;
+		var node_4 = $.child(div);
+		text(node_4);
+		var span = $.sibling(node_4, 2);
+		var node_5 = $.child(span);
+		$.snippet(node_5, () => $$props.end);
+		$.reset(span);
+		$.bind_this(span, ($$value) => $.set(seat, $$value), () => $.get(seat));
+		$.reset(div);
+		$.bind_this(div, ($$value) => $.set(ended, $$value), () => $.get(ended));
+		$.template_effect(() => {
+			classes = $.set_class(div, 1, "ended svelte-1hyv1j2", null, classes, { one: clamp() });
+			$.set_class(span, 1, `end end-${role() ?? ""}`, "svelte-1hyv1j2");
+			$.set_attribute(span, "data-under", $.get(under) || void 0);
+		});
+		$.append($$anchor, div);
+	};
+	var alternate = ($$anchor) => {
+		text($$anchor);
+	};
+	$.if(node_3, ($$render) => {
+		if ($$props.end) $$render(consequent);
+		else $$render(alternate, -1);
 	});
-	$.append($$anchor, fragment);
+	$.append($$anchor, fragment_2);
 	$.pop();
 }
 //#endregion
@@ -3234,8 +3390,8 @@ var rest_excludes$8 = /* @__PURE__ */ new Set([
 	"onkeydown",
 	"onblur"
 ]);
-var root$58 = $.from_html(`<option></option>`);
-var root_1$37 = $.from_html(`<datalist></datalist>`);
+var root$57 = $.from_html(`<option></option>`);
+var root_1$36 = $.from_html(`<datalist></datalist>`);
 var root_2$22 = $.from_html(`<span class="unit svelte-1y5ju7y"> </span>`);
 var root_3$14 = $.from_html(`<label data-role="box" data-h="button"><input/> <!> <!></label>`);
 function TextInput($$anchor, $$props) {
@@ -3270,9 +3426,9 @@ function TextInput($$anchor, $$props) {
 	}), void 0, void 0, void 0, "svelte-1y5ju7y", true);
 	var node = $.sibling(input, 2);
 	var consequent = ($$anchor) => {
-		var datalist = root_1$37();
+		var datalist = root_1$36();
 		$.each(datalist, 20, () => $$props.suggestions ?? [], (s) => s, ($$anchor, s) => {
-			var option = root$58();
+			var option = root$57();
 			var option_value = {};
 			$.template_effect(() => {
 				if (option_value !== (option_value = s)) option.value = (option.__value = option_value) ?? "";
@@ -3307,8 +3463,8 @@ function TextInput($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/AttributeList.svelte
-var root$57 = $.from_html(`<span class="lock svelte-167hfxz" role="img"><!></span>`);
-var root_1$36 = $.from_html(`<div class="row svelte-167hfxz"><span class="k svelte-167hfxz"><!></span> <span class="v svelte-167hfxz"><!></span> <span class="end svelte-167hfxz"><!></span></div>`);
+var root$56 = $.from_html(`<span class="lock svelte-167hfxz" role="img"><!></span>`);
+var root_1$35 = $.from_html(`<div class="row svelte-167hfxz"><span class="k svelte-167hfxz"><!></span> <span class="v svelte-167hfxz"><!></span> <span class="end svelte-167hfxz"><!></span></div>`);
 var root_2$21 = $.from_html(`<div class="row draft svelte-167hfxz"><span class="k svelte-167hfxz"><!></span> <span class="v svelte-167hfxz"><!></span> <span class="end svelte-167hfxz"><!></span></div>`);
 var root_3$13 = $.from_html(`<!> <!>`, 1);
 var root_4$8 = $.from_html(`<div class="attributes svelte-167hfxz"><!> <!></div>`);
@@ -3422,7 +3578,7 @@ function AttributeList($$anchor, $$props) {
 		$.each(node_3, 17, () => $.get(shown), (a) => `${a.index}:${$.get(rev)}`, ($$anchor, a) => {
 			const fixed = $.derived(() => locked().includes($.get(a).key));
 			const editable = $.derived(() => !$.get(fixed) && !!$$props.onchange);
-			var div_1 = root_1$36();
+			var div_1 = root_1$35();
 			var span = $.child(div_1);
 			var node_4 = $.child(span);
 			{
@@ -3475,7 +3631,7 @@ function AttributeList($$anchor, $$props) {
 			var span_2 = $.sibling(span_1, 2);
 			var node_6 = $.child(span_2);
 			var consequent_3 = ($$anchor) => {
-				var span_3 = root$57();
+				var span_3 = root$56();
 				Icon($.child(span_3), {
 					name: "lock",
 					tone: "muted"
@@ -3614,12 +3770,16 @@ function AttributeList($$anchor, $$props) {
 $.delegate(["focusout"]);
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Banner.svelte
-var root$56 = $.from_html(`<div class="act svelte-1m4ykuh"><!></div>`);
-var root_1$35 = $.from_html(`<div data-inset="" data-role="banner"><div class="line svelte-1m4ykuh"><span class="mark svelte-1m4ykuh"><!></span> <div class="text svelte-1m4ykuh"><!></div></div> <!></div>`);
+var root$55 = $.from_html(`<div class="text svelte-1m4ykuh"><!></div>`);
+var root_1$34 = $.from_html(`<div class="text svelte-1m4ykuh" data-ink=""><!></div>`);
+var root_2$20 = $.from_html(`<div class="act svelte-1m4ykuh"><!></div>`);
+var root_3$12 = $.from_html(`<div data-inset="" data-edge-pass="" data-role="banner"><div class="line svelte-1m4ykuh" data-edge-pass=""><span class="mark svelte-1m4ykuh"><!></span> <!></div> <!></div>`);
 function Banner($$anchor, $$props) {
 	let floating = $.prop($$props, "floating", 3, false);
 	/** The panel surface, for a notice over the stage */
 	/** The accessible name of the notice, when it is referred to by name */
+	/** The text, one line that may wrap */
+	/** Several lines instead of the text (a Stack of Texts) */
 	/** An action at the right end */
 	const MARK = {
 		info: "info",
@@ -3627,7 +3787,7 @@ function Banner($$anchor, $$props) {
 		error: "circle-alert",
 		ok: "circle-check"
 	};
-	var div = root_1$35();
+	var div = root_3$12();
 	let classes;
 	var div_1 = $.child(div);
 	var span = $.child(div_1);
@@ -3635,21 +3795,36 @@ function Banner($$anchor, $$props) {
 		return MARK[$$props.tone];
 	} });
 	$.reset(span);
-	var div_2 = $.sibling(span, 2);
-	var node_1 = $.child(div_2);
-	$.snippet(node_1, () => $$props.children);
-	$.reset(div_2);
-	$.reset(div_1);
-	var node_2 = $.sibling(div_1, 2);
+	var node_1 = $.sibling(span, 2);
 	var consequent = ($$anchor) => {
-		var div_3 = root$56();
+		var div_2 = root$55();
+		var node_2 = $.child(div_2);
+		$.snippet(node_2, () => $$props.body);
+		$.reset(div_2);
+		$.append($$anchor, div_2);
+	};
+	var alternate = ($$anchor) => {
+		var div_3 = root_1$34();
 		var node_3 = $.child(div_3);
-		$.snippet(node_3, () => $$props.act);
+		$.snippet(node_3, () => $$props.children ?? $.noop);
 		$.reset(div_3);
 		$.append($$anchor, div_3);
 	};
-	$.if(node_2, ($$render) => {
-		if ($$props.act) $$render(consequent);
+	$.if(node_1, ($$render) => {
+		if ($$props.body) $$render(consequent);
+		else $$render(alternate, -1);
+	});
+	$.reset(div_1);
+	var node_4 = $.sibling(div_1, 2);
+	var consequent_1 = ($$anchor) => {
+		var div_4 = root_2$20();
+		var node_5 = $.child(div_4);
+		$.snippet(node_5, () => $$props.act);
+		$.reset(div_4);
+		$.append($$anchor, div_4);
+	};
+	$.if(node_4, ($$render) => {
+		if ($$props.act) $$render(consequent_1);
 	});
 	$.reset(div);
 	$.template_effect(() => {
@@ -3661,10 +3836,10 @@ function Banner($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Stack.svelte
-var root$55 = $.from_html(`<div class="stack svelte-11uhtvr" data-role="stack"><!></div>`);
+var root$54 = $.from_html(`<div class="stack svelte-11uhtvr" data-role="stack"><!></div>`);
 function Stack($$anchor, $$props) {
 	let align = $.prop($$props, "align", 3, "stretch");
-	var div = root$55();
+	var div = root$54();
 	var node = $.child(div);
 	$.snippet(node, () => $$props.children);
 	$.reset(div);
@@ -3676,11 +3851,11 @@ function Stack($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Bubble.svelte
-var root$54 = $.from_html(`<div class="foot svelte-woe9qp" data-inset=""><!></div>`);
-var root_1$34 = $.from_html(`<div data-role="popover"><div><!></div> <!></div>`);
+var root$53 = $.from_html(`<div class="foot svelte-woe9qp" data-inset=""><!></div>`);
+var root_1$33 = $.from_html(`<div data-role="popover" data-outline=""><div><!></div> <!></div>`);
 function Bubble($$anchor, $$props) {
 	let gap = $.prop($$props, "gap", 3, "sm"), flush = $.prop($$props, "flush", 3, false);
-	var div = root_1$34();
+	var div = root_1$33();
 	let classes;
 	var div_1 = $.child(div);
 	let classes_1;
@@ -3703,7 +3878,7 @@ function Bubble($$anchor, $$props) {
 	$.reset(div_1);
 	var node_2 = $.sibling(div_1, 2);
 	var consequent = ($$anchor) => {
-		var div_2 = root$54();
+		var div_2 = root$53();
 		var node_3 = $.child(div_2);
 		$.snippet(node_3, () => $$props.foot);
 		$.reset(div_2);
@@ -3722,8 +3897,8 @@ function Bubble($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/ColorGrid.svelte
-var root$53 = $.from_html(`<button type="button" role="radio"></button>`);
-var root_1$33 = $.from_html(`<div class="grid svelte-qflf14" data-role="grid" role="radiogroup"></div>`);
+var root$52 = $.from_html(`<button type="button" role="radio"></button>`);
+var root_1$32 = $.from_html(`<div class="grid svelte-qflf14" data-role="grid" role="radiogroup"></div>`);
 function ColorGrid($$anchor, $$props) {
 	$.push($$props, true);
 	let columns = $.prop($$props, "columns", 3, 9);
@@ -3733,10 +3908,10 @@ function ColorGrid($$anchor, $$props) {
 	function on(hex) {
 		return $$props.value !== void 0 && hex.toLowerCase() === $$props.value.toLowerCase();
 	}
-	var div = root_1$33();
+	var div = root_1$32();
 	let styles;
 	$.each(div, 21, () => $$props.colors, (c) => c.hex, ($$anchor, c) => {
-		var button = root$53();
+		var button = root$52();
 		let classes;
 		let styles_1;
 		$.template_effect(($0, $1) => {
@@ -3759,8 +3934,8 @@ function ColorGrid($$anchor, $$props) {
 $.delegate(["click"]);
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/NumberInput.svelte
-var root$52 = $.from_html(`<span class="unit svelte-1abgrv8"> </span>`);
-var root_1$32 = $.from_html(`<label data-role="box" data-h="button"><input type="number" class="svelte-1abgrv8"/> <!></label>`);
+var root$51 = $.from_html(`<span class="unit svelte-1abgrv8"> </span>`);
+var root_1$31 = $.from_html(`<label data-role="box" data-h="button"><input type="number" class="svelte-1abgrv8"/> <!></label>`);
 function NumberInput($$anchor, $$props) {
 	$.push($$props, true);
 	let value = $.prop($$props, "value", 15, null), disabled = $.prop($$props, "disabled", 3, false), readonly = $.prop($$props, "readonly", 3, false), error = $.prop($$props, "error", 3, false);
@@ -3777,14 +3952,14 @@ function NumberInput($$anchor, $$props) {
 	/** Every key stroke (the raw value is e.currentTarget.value) */
 	/** The value is committed */
 	const chars = $.derived(() => $$props.digits === void 0 ? void 0 : Math.max($$props.digits, $$props.placeholder?.length ?? 0));
-	var label = root_1$32();
+	var label = root_1$31();
 	let classes;
 	let styles;
 	var input = $.child(label);
 	$.remove_input_defaults(input);
 	var node = $.sibling(input, 2);
 	var consequent = ($$anchor) => {
-		var span = root$52();
+		var span = root$51();
 		var text = $.only_child(span, true);
 		$.template_effect(() => $.set_text(text, $$props.unit));
 		$.append($$anchor, span);
@@ -3826,10 +4001,10 @@ function NumberInput($$anchor, $$props) {
 $.delegate(["input", "change"]);
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Row.svelte
-var root$51 = $.from_html(`<div data-role="row-inline" data-edge-pass=""><!></div>`);
+var root$50 = $.from_html(`<div data-role="row-inline" data-edge-pass=""><!></div>`);
 function Row($$anchor, $$props) {
 	let gap = $.prop($$props, "gap", 3, "sm"), between = $.prop($$props, "between", 3, false), wrap = $.prop($$props, "wrap", 3, false), align = $.prop($$props, "align", 3, "center"), justify = $.prop($$props, "justify", 3, "start");
-	var div = root$51();
+	var div = root$50();
 	let classes;
 	var node = $.child(div);
 	$.snippet(node, () => $$props.children);
@@ -3847,12 +4022,12 @@ function Row($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Select.svelte
-var root$50 = $.from_html(`<span class="v svelte-gho7xv"> </span>`);
-var root_1$31 = $.from_html(`<span class="v ph svelte-gho7xv" data-kata-placeholder=""> </span>`);
-var root_2$20 = $.from_html(`<span class="text svelte-gho7xv"><span class="t svelte-gho7xv"> </span> <span class="t desc svelte-gho7xv"> </span></span>`);
-var root_3$12 = $.from_html(`<span class="t label svelte-gho7xv"> </span>`);
+var root$49 = $.from_html(`<span class="v svelte-gho7xv"> </span>`);
+var root_1$30 = $.from_html(`<span class="v ph svelte-gho7xv" data-kata-placeholder=""> </span>`);
+var root_2$19 = $.from_html(`<span class="text svelte-gho7xv"><span class="t svelte-gho7xv"> </span> <span class="t desc svelte-gho7xv"> </span></span>`);
+var root_3$11 = $.from_html(`<span class="t label svelte-gho7xv"> </span>`);
 var root_4$7 = $.from_html(`<button type="button" role="option" tabindex="-1" data-role="list-item" data-h="list-item"><span class="chk svelte-gho7xv"><!></span> <!></button>`);
-var root_5$5 = $.from_html(`<div role="listbox" tabindex="-1"></div>`);
+var root_5$5 = $.from_html(`<div data-outline="" role="listbox" tabindex="-1"></div>`);
 var root_6$4 = $.from_html(`<button type="button" data-role="box" data-h="button" aria-haspopup="listbox"><!> <!></button> <!>`, 1);
 function Select($$anchor, $$props) {
 	const listId = $.props_id();
@@ -3869,29 +4044,17 @@ function Select($$anchor, $$props) {
 		width: 0,
 		maxHeight: 0
 	}));
-	const GAP = 4;
-	const EDGE = 8;
-	const MIN_HEIGHT = 120;
 	const canPopover = typeof HTMLElement !== "undefined" && typeof HTMLElement.prototype.showPopover === "function";
 	function place() {
 		if (!$.get(triggerEl) || !$.get(listEl)) return;
 		const r = $.get(triggerEl).getBoundingClientRect();
-		const keep = $.get(listEl).style.maxHeight;
-		$.get(listEl).style.maxHeight = "";
-		const natural = $.get(listEl).scrollHeight;
-		$.get(listEl).style.maxHeight = keep;
-		const below = window.innerHeight - r.bottom - GAP - EDGE;
-		const above = r.top - GAP - EDGE;
-		const up = below < Math.min(natural, MIN_HEIGHT) && above > below;
-		const maxHeight = Math.max(MIN_HEIGHT, up ? above : below);
-		const shown = Math.min(natural, maxHeight);
-		const width = $.get(listEl).offsetWidth;
-		const left = Math.max(EDGE, Math.min(r.left, window.innerWidth - Math.max(width, r.width) - EDGE));
+		const width = Math.max($.get(listEl).offsetWidth, r.width);
 		$.set(pos, {
-			top: Math.round(up ? r.top - GAP - shown : r.bottom + GAP),
-			left: Math.round(left),
-			width: Math.round(r.width),
-			maxHeight: Math.round(maxHeight)
+			...placeBelow($.get(listEl), r, {
+				align: "start",
+				width
+			}),
+			width: Math.round(r.width)
 		}, true);
 	}
 	function items() {
@@ -3917,7 +4080,7 @@ function Select($$anchor, $$props) {
 		close(true);
 	}
 	$.user_effect(() => {
-		if (!$.get(open) || !$.get(listEl)) return;
+		if (!$.get(open) || !$.get(listEl) || !$.get(triggerEl)) return;
 		const el = $.get(listEl);
 		if (canPopover && !el.matches(":popover-open")) el.showPopover();
 		(async () => {
@@ -3928,6 +4091,7 @@ function Select($$anchor, $$props) {
 			const i = $$props.options.findIndex((o) => o.value === value());
 			focusAt(Math.max(0, i));
 		})();
+		return follow($.get(triggerEl), el, place);
 	});
 	function onTriggerKey(e) {
 		if (e.key === "ArrowDown" || e.key === "ArrowUp") {
@@ -3964,19 +4128,17 @@ function Select($$anchor, $$props) {
 	}
 	var fragment = root_6$4();
 	$.event("pointerdown", $.window, onPointerDown, true);
-	$.event("resize", $.window, () => $.get(open) && place());
-	$.event("scroll", $.window, () => $.get(open) && place());
 	var button = $.first_child(fragment);
 	let classes;
 	var node = $.child(button);
 	var consequent = ($$anchor) => {
-		var span = root$50();
+		var span = root$49();
 		var text = $.only_child(span, true);
 		$.template_effect(() => $.set_text(text, $.get(current).label));
 		$.append($$anchor, span);
 	};
 	var alternate = ($$anchor) => {
-		var span_1 = root_1$31();
+		var span_1 = root_1$30();
 		var text_1 = $.only_child(span_1, true);
 		$.template_effect(() => $.set_text(text_1, placeholder()));
 		$.append($$anchor, span_1);
@@ -4007,7 +4169,7 @@ function Select($$anchor, $$props) {
 			$.reset(span_2);
 			var node_4 = $.sibling(span_2, 2);
 			var consequent_2 = ($$anchor) => {
-				var span_3 = root_2$20();
+				var span_3 = root_2$19();
 				var span_4 = $.child(span_3);
 				var text_2 = $.only_child(span_4, true);
 				var span_5 = $.sibling(span_4, 2);
@@ -4020,7 +4182,7 @@ function Select($$anchor, $$props) {
 				$.append($$anchor, span_3);
 			};
 			var alternate_1 = ($$anchor) => {
-				var span_6 = root_3$12();
+				var span_6 = root_3$11();
 				var text_4 = $.only_child(span_6, true);
 				$.template_effect(() => $.set_text(text_4, $.get(opt).label));
 				$.append($$anchor, span_6);
@@ -4076,10 +4238,10 @@ function Select($$anchor, $$props) {
 $.delegate(["click", "keydown"]);
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/ColorPicker.svelte
-var root$49 = $.from_html(`<!> <!>`, 1);
-var root_1$30 = $.from_html(`<div class="hue svelte-1kcz9da" role="slider" tabindex="0"><span class="knob svelte-1kcz9da"></span></div> <!>`, 1);
-var root_2$19 = $.from_html(`<!> <!> <!>`, 1);
-var root_3$11 = $.from_html(`<!> <div class="fmt svelte-1kcz9da"><!></div>`, 1);
+var root$48 = $.from_html(`<!> <!>`, 1);
+var root_1$29 = $.from_html(`<div class="hue svelte-1kcz9da" role="slider" tabindex="0"><span class="knob svelte-1kcz9da"></span></div> <!>`, 1);
+var root_2$18 = $.from_html(`<!> <!> <!>`, 1);
+var root_3$10 = $.from_html(`<!> <div class="fmt svelte-1kcz9da"><!></div>`, 1);
 var root_4$6 = $.from_html(`<!> <!> <div class="sv svelte-1kcz9da" role="slider" tabindex="0"><span class="knob svelte-1kcz9da"></span></div> <!> <!>`, 1);
 var root_5$4 = $.from_html(`<div data-inset=""><!></div>`);
 function ColorPicker($$anchor, $$props) {
@@ -4093,7 +4255,7 @@ function ColorPicker($$anchor, $$props) {
 				Row(node, {
 					between: true,
 					children: ($$anchor, $$slotProps) => {
-						var fragment_2 = root$49();
+						var fragment_2 = root$48();
 						var node_1 = $.first_child(fragment_2);
 						Text(node_1, {
 							role: "h2",
@@ -4155,7 +4317,7 @@ function ColorPicker($$anchor, $$props) {
 				Row(node_4, {
 					gap: "sm",
 					children: ($$anchor, $$slotProps) => {
-						var fragment_5 = root_1$30();
+						var fragment_5 = root_1$29();
 						var div_1 = $.first_child(fragment_5);
 						$.set_attribute(div_1, "aria-valuemin", 0);
 						$.set_attribute(div_1, "aria-valuemax", 360);
@@ -4199,7 +4361,7 @@ function ColorPicker($$anchor, $$props) {
 					gap: "sm",
 					wrap: true,
 					children: ($$anchor, $$slotProps) => {
-						var fragment_7 = root_3$11();
+						var fragment_7 = root_3$10();
 						var node_7 = $.first_child(fragment_7);
 						var consequent = ($$anchor) => {
 							var fragment_8 = $.comment();
@@ -4227,7 +4389,7 @@ function ColorPicker($$anchor, $$props) {
 							$.append($$anchor, fragment_8);
 						};
 						var consequent_1 = ($$anchor) => {
-							var fragment_10 = root_2$19();
+							var fragment_10 = root_2$18();
 							var node_9 = $.first_child(fragment_10);
 							{
 								let $0 = $.derived(() => getMessages().hue);
@@ -4650,10 +4812,10 @@ $.delegate([
 ]);
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Divider.svelte
-var root$48 = $.from_html(`<div data-role="rule" role="separator"></div>`);
+var root$47 = $.from_html(`<div data-role="rule" role="separator"></div>`);
 function Divider($$anchor, $$props) {
 	let inset = $.prop($$props, "inset", 3, false), gap = $.prop($$props, "gap", 3, false);
-	var div = root$48();
+	var div = root$47();
 	let classes;
 	$.template_effect(() => classes = $.set_class(div, 1, "rule svelte-1dtzu5u", null, classes, {
 		inset: inset(),
@@ -4663,10 +4825,10 @@ function Divider($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/List.svelte
-var root$47 = $.from_html(`<div class="list svelte-mp0y27" data-role="list"><!></div>`);
+var root$46 = $.from_html(`<div class="list svelte-mp0y27" data-role="list"><!></div>`);
 function List($$anchor, $$props) {
 	let role = $.prop($$props, "role", 3, "list");
-	var div = root$47();
+	var div = root$46();
 	Stack($.child(div), {
 		gap: 0,
 		children: ($$anchor, $$slotProps) => {
@@ -4696,27 +4858,30 @@ var rest_excludes$7 = /* @__PURE__ */ new Set([
 	"sel",
 	"rule",
 	"plain",
+	"disabled",
 	"href",
 	"onclick",
 	"onkeydown",
 	"children"
 ]);
-var root$46 = $.from_html(`<a><!></a>`);
-var root_1$29 = $.from_html(`<div><!></div>`);
+var root$45 = $.from_html(`<a><!></a>`);
+var root_1$28 = $.from_html(`<div><!></div>`);
 function ListItem($$anchor, $$props) {
 	$.push($$props, true);
-	let tail = $.prop($$props, "tail", 3, false), sel = $.prop($$props, "sel", 3, false), rule = $.prop($$props, "rule", 3, false), plain = $.prop($$props, "plain", 3, false), rest = $.rest_props($$props, rest_excludes$7);
+	let tail = $.prop($$props, "tail", 3, false), sel = $.prop($$props, "sel", 3, false), rule = $.prop($$props, "rule", 3, false), plain = $.prop($$props, "plain", 3, false), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes$7);
 	/** The columns of the item's grid (grid-template-columns) */
 	/** The item ends with an icon button: pad-sm at the right */
 	/** Selected: the raise surface and a blue line of two at the left */
 	/** A line under the item (not under the last one) */
 	/** An item that is not pressed: no hover surface */
+	/** A pressable item (onclick) that cannot be pressed now: dimmed and out of the tab order */
 	/** Renders a link */
 	/** Makes the item pressable (Enter and Space press it too) */
 	const clickable = $.derived(() => !plain() && !!($$props.onclick || $$props.href));
+	const off = $.derived(() => disabled() && !plain() && !$$props.href && !!$$props.onclick);
 	function onKeyDown(e) {
 		$$props.onkeydown?.(e);
-		if (e.defaultPrevented) return;
+		if (e.defaultPrevented || $.get(off)) return;
 		if (e.key !== "Enter" && e.key !== " ") return;
 		if (e.target.closest("input, textarea, select, [contenteditable]")) return;
 		e.preventDefault();
@@ -4725,7 +4890,7 @@ function ListItem($$anchor, $$props) {
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 	var consequent = ($$anchor) => {
-		var a = root$46();
+		var a = root$45();
 		$.attribute_effect(a, () => ({
 			class: "row",
 			"data-role": "list-item",
@@ -4749,7 +4914,7 @@ function ListItem($$anchor, $$props) {
 		$.append($$anchor, a);
 	};
 	var alternate = ($$anchor) => {
-		var div = root_1$29();
+		var div = root_1$28();
 		$.attribute_effect(div, () => ({
 			class: "row",
 			"data-role": "list-item",
@@ -4757,16 +4922,18 @@ function ListItem($$anchor, $$props) {
 			"data-rule": rule() ? "" : void 0,
 			...$.get(clickable) ? {
 				role: "button",
-				tabindex: 0
+				tabindex: $.get(off) ? void 0 : 0
 			} : {},
-			onclick: $$props.onclick,
+			"aria-disabled": $.get(off) ? "true" : void 0,
+			onclick: $.get(off) ? void 0 : $$props.onclick,
 			onkeydown: $.get(clickable) ? onKeyDown : $$props.onkeydown,
 			...rest,
 			[$.CLASS]: {
 				sel: sel(),
 				rule: rule(),
 				plain: plain(),
-				tail: tail()
+				tail: tail(),
+				disabled: $.get(off)
 			},
 			[$.STYLE]: { "grid-template-columns": $$props.columns }
 		}), void 0, void 0, void 0, "svelte-rzjg5m");
@@ -4784,13 +4951,13 @@ function ListItem($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Spinner.svelte
-var root$45 = $.from_html(`<span class="t svelte-1w5g2m2"> </span>`);
-var root_1$28 = $.from_html(`<span class="seat svelte-1w5g2m2" data-role="spinner" data-edge-pass="" role="status"><span class="dots svelte-1w5g2m2" aria-hidden="true"><i class="svelte-1w5g2m2"></i><i class="svelte-1w5g2m2"></i><i class="svelte-1w5g2m2"></i></span><!></span>`);
+var root$44 = $.from_html(`<span class="t svelte-1w5g2m2" data-ink=""> </span>`);
+var root_1$27 = $.from_html(`<span class="seat svelte-1w5g2m2" data-role="spinner" data-edge-pass="" role="status"><span class="dots svelte-1w5g2m2" aria-hidden="true"><i class="svelte-1w5g2m2"></i><i class="svelte-1w5g2m2"></i><i class="svelte-1w5g2m2"></i></span><!></span>`);
 function Spinner($$anchor, $$props) {
-	var span = root_1$28();
+	var span = root_1$27();
 	var node = $.sibling($.child(span));
 	var consequent = ($$anchor) => {
-		var span_1 = root$45();
+		var span_1 = root$44();
 		var text = $.only_child(span_1, true);
 		$.template_effect(() => $.set_text(text, $$props.label));
 		$.append($$anchor, span_1);
@@ -4803,17 +4970,17 @@ function Spinner($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/State.svelte
-var root$44 = $.from_html(`<p data-role="p"> </p>`);
-var root_1$27 = $.from_html(`<span class="note svelte-1i551ei" data-role="caption"> </span>`);
-var root_2$18 = $.from_html(`<!> <!> <!>`, 1);
-var root_3$10 = $.from_html(`<div class="state svelte-1i551ei" data-role="state" data-pass=""><!></div>`);
+var root$43 = $.from_html(`<p data-role="p" data-ink=""> </p>`);
+var root_1$26 = $.from_html(`<span class="note svelte-1i551ei" data-role="caption" data-ink=""> </span>`);
+var root_2$17 = $.from_html(`<!> <!> <!>`, 1);
+var root_3$9 = $.from_html(`<div class="state svelte-1i551ei" data-role="state"><!></div>`);
 function State($$anchor, $$props) {
 	let loading = $.prop($$props, "loading", 3, false);
-	var div = root_3$10();
+	var div = root_3$9();
 	Stack($.child(div), {
 		gap: "sm",
 		children: ($$anchor, $$slotProps) => {
-			var fragment = root_2$18();
+			var fragment = root_2$17();
 			var node_1 = $.first_child(fragment);
 			var consequent = ($$anchor) => {
 				Spinner($$anchor, { get label() {
@@ -4821,7 +4988,7 @@ function State($$anchor, $$props) {
 				} });
 			};
 			var alternate = ($$anchor) => {
-				var p = root$44();
+				var p = root$43();
 				let classes;
 				var text_1 = $.only_child(p, true);
 				$.template_effect(() => {
@@ -4836,7 +5003,7 @@ function State($$anchor, $$props) {
 			});
 			var node_2 = $.sibling(node_1, 2);
 			var consequent_1 = ($$anchor) => {
-				var span = root_1$27();
+				var span = root_1$26();
 				var text_2 = $.only_child(span, true);
 				$.template_effect(() => $.set_text(text_2, $$props.note));
 				$.append($$anchor, span);
@@ -4862,8 +5029,8 @@ function State($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Footer.svelte
-var root_1$26 = $.from_html(`<div class="lead svelte-i118rm"><!></div>`);
-var root_2$17 = $.from_html(`<div data-role="footer" data-h="footer"><!> <div class="actions svelte-i118rm"><!> <!> <!></div></div>`);
+var root_1$25 = $.from_html(`<div class="lead svelte-i118rm"><!></div>`);
+var root_2$16 = $.from_html(`<div data-role="footer" data-h="footer"><!> <div class="actions svelte-i118rm"><!> <!> <!></div></div>`);
 function Footer($$anchor, $$props) {
 	$.push($$props, true);
 	/** A status or an action on the left */
@@ -4916,11 +5083,11 @@ function Footer($$anchor, $$props) {
 			cancelAnimationFrame(frame);
 		};
 	});
-	var div = root_2$17();
+	var div = root_2$16();
 	let classes;
 	var node = $.child(div);
 	var consequent = ($$anchor) => {
-		var div_1 = root_1$26();
+		var div_1 = root_1$25();
 		var node_1 = $.child(div_1);
 		$.snippet(node_1, () => $$props.lead);
 		$.reset(div_1);
@@ -4948,18 +5115,18 @@ function Footer($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Toolbar.svelte
-var root$43 = $.from_html(`<h2 class="title svelte-1qxcpfk"> </h2>`);
-var root_1$25 = $.from_html(`<div class="end svelte-1qxcpfk"><!></div>`);
-var root_2$16 = $.from_html(`<div data-role="toolbar"><!> <!> <!> <!></div>`);
+var root$42 = $.from_html(`<h2 class="title svelte-1qxcpfk"> </h2>`);
+var root_1$24 = $.from_html(`<div class="end svelte-1qxcpfk"><!></div>`);
+var root_2$15 = $.from_html(`<div data-role="toolbar"><!> <!> <!> <!></div>`);
 function Toolbar$1($$anchor, $$props) {
 	let rule = $.prop($$props, "rule", 3, false), tail = $.prop($$props, "tail", 3, false), two = $.prop($$props, "two", 3, false);
-	var div = root_2$16();
+	var div = root_2$15();
 	let classes;
 	var node = $.child(div);
 	$.snippet(node, () => $$props.start ?? $.noop);
 	var node_1 = $.sibling(node, 2);
 	var consequent = ($$anchor) => {
-		var h2 = root$43();
+		var h2 = root$42();
 		var text = $.only_child(h2, true);
 		$.template_effect(() => {
 			$.set_attribute(h2, "id", $$props.titleId);
@@ -4974,7 +5141,7 @@ function Toolbar$1($$anchor, $$props) {
 	$.snippet(node_2, () => $$props.children ?? $.noop);
 	var node_3 = $.sibling(node_2, 2);
 	var consequent_1 = ($$anchor) => {
-		var div_1 = root_1$25();
+		var div_1 = root_1$24();
 		var node_4 = $.child(div_1);
 		$.snippet(node_4, () => $$props.end);
 		$.reset(div_1);
@@ -4991,16 +5158,18 @@ function Toolbar$1($$anchor, $$props) {
 			two: two()
 		});
 		$.set_attribute(div, "data-h", two() ? void 0 : "toolbar");
+		$.set_attribute(div, "data-inset", two() ? "" : void 0);
+		$.set_attribute(div, "data-edge-pass", two() ? "" : void 0);
 	});
 	$.append($$anchor, div);
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Modal.svelte
-var root$42 = $.from_html(`<div class="sub svelte-1nboboq"><!></div>`);
-var root_1$24 = $.from_html(`<!> <!>`, 1);
-var root_2$15 = $.from_html(`<!> <!> <div><!></div> <!>`, 1);
-var root_3$9 = $.from_html(`<div data-role="modal" data-inline=""><!></div>`);
-var root_4$5 = $.from_html(`<dialog data-role="modal" aria-modal="true"><!></dialog>`);
+var root$41 = $.from_html(`<div class="sub svelte-1nboboq"><!></div>`);
+var root_1$23 = $.from_html(`<!> <!>`, 1);
+var root_2$14 = $.from_html(`<!> <!> <div><!></div> <!>`, 1);
+var root_3$8 = $.from_html(`<div data-role="modal" data-outline="" data-inline=""><!></div>`);
+var root_4$5 = $.from_html(`<dialog data-role="modal" data-outline="" aria-modal="true"><!></dialog>`);
 function Modal($$anchor, $$props) {
 	const titleId = $.props_id();
 	$.push($$props, true);
@@ -5084,7 +5253,7 @@ function Modal($$anchor, $$props) {
 		$.append($$anchor, fragment_9);
 	};
 	const surface = ($$anchor) => {
-		var fragment_12 = root_2$15();
+		var fragment_12 = root_2$14();
 		var node_3 = $.first_child(fragment_12);
 		var consequent_4 = ($$anchor) => {
 			{
@@ -5143,7 +5312,7 @@ function Modal($$anchor, $$props) {
 		});
 		var node_4 = $.sibling(node_3, 2);
 		var consequent_6 = ($$anchor) => {
-			var div = root$42();
+			var div = root$41();
 			var node_5 = $.child(div);
 			$.snippet(node_5, () => $$props.sub);
 			$.reset(div);
@@ -5165,7 +5334,7 @@ function Modal($$anchor, $$props) {
 			Stack($$anchor, {
 				gap: "md",
 				children: ($$anchor, $$slotProps) => {
-					var fragment_18 = root_1$24();
+					var fragment_18 = root_1$23();
 					var node_8 = $.first_child(fragment_18);
 					$.snippet(node_8, () => $$props.children);
 					var node_9 = $.sibling(node_8, 2);
@@ -5257,7 +5426,7 @@ function Modal($$anchor, $$props) {
 	var fragment_21 = $.comment();
 	var node_11 = $.first_child(fragment_21);
 	var consequent_10 = ($$anchor) => {
-		var div_2 = root_3$9();
+		var div_2 = root_3$8();
 		let classes_1;
 		var node_12 = $.child(div_2);
 		surface(node_12);
@@ -5380,10 +5549,10 @@ function Popover($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Drawbar.svelte
-var root$41 = $.from_html(`<div class="group svelte-14qxuyk"></div>`);
-var root_1$23 = $.from_html(`<!> <!> <!>`, 1);
-var root_2$14 = $.from_html(`<div class="group svelte-14qxuyk"><!></div>`);
-var root_3$8 = $.from_html(`<div data-role="drawbar" role="toolbar"><!> <!></div>`);
+var root$40 = $.from_html(`<div class="group svelte-14qxuyk"></div>`);
+var root_1$22 = $.from_html(`<!> <!> <!>`, 1);
+var root_2$13 = $.from_html(`<div class="group svelte-14qxuyk"><!></div>`);
+var root_3$7 = $.from_html(`<div data-role="drawbar" data-outline="" role="toolbar"><!> <!></div>`);
 function Drawbar($$anchor, $$props) {
 	$.push($$props, true);
 	let toggles = $.prop($$props, "toggles", 19, () => []), bottom = $.prop($$props, "bottom", 3, "md"), column = $.prop($$props, "column", 3, false);
@@ -5472,12 +5641,12 @@ function Drawbar($$anchor, $$props) {
 	const hiddenTools = $.derived(() => $.get(hidden).flatMap((h) => h.kind === "tool" ? [h.tool] : []));
 	const hiddenToggles = $.derived(() => $.get(hidden).flatMap((h) => h.kind === "toggle" ? [h.toggle] : []));
 	const key = (item) => `${item.kind}:${item.kind === "tool" ? item.tool.id : item.toggle.id}`;
-	var div = root_3$8();
+	var div = root_3$7();
 	let classes;
 	let styles;
 	var node = $.child(div);
 	$.each(node, 17, () => $.get(shown), $.index, ($$anchor, group) => {
-		var div_1 = root$41();
+		var div_1 = root$40();
 		$.each(div_1, 21, () => $.get(group), (item) => key(item), ($$anchor, item) => {
 			var fragment = $.comment();
 			var node_1 = $.first_child(fragment);
@@ -5623,7 +5792,7 @@ function Drawbar($$anchor, $$props) {
 	});
 	var node_3 = $.sibling(node, 2);
 	var consequent_3 = ($$anchor) => {
-		var div_2 = root_2$14();
+		var div_2 = root_2$13();
 		var node_4 = $.child(div_2);
 		{
 			const trigger = ($$anchor, toggle = $.noop, open = $.noop) => {
@@ -5650,7 +5819,7 @@ function Drawbar($$anchor, $$props) {
 				}
 			};
 			const panel = ($$anchor, close = $.noop) => {
-				var fragment_11 = root_1$23();
+				var fragment_11 = root_1$22();
 				var node_5 = $.first_child(fragment_11);
 				$.each(node_5, 17, () => $.get(hiddenTools), (t) => t.id, ($$anchor, t) => {
 					{
@@ -5747,7 +5916,7 @@ function Drawbar($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Fab.svelte
-var root$40 = $.from_html(`<button class="fab svelte-1a4435e" type="button" data-role="fab" data-h="button"><!></button>`);
+var root$39 = $.from_html(`<button class="fab svelte-1a4435e" type="button" data-role="fab" data-h="button"><!></button>`);
 function Fab($$anchor, $$props) {
 	let disabled = $.prop($$props, "disabled", 3, false), right = $.prop($$props, "right", 3, "md"), bottom = $.prop($$props, "bottom", 3, "md");
 	/** The name of the action */
@@ -5758,7 +5927,7 @@ function Fab($$anchor, $$props) {
 	}
 	const r = $.derived(() => $$props.left === void 0 ? at(right()) : void 0);
 	const b = $.derived(() => $$props.top === void 0 ? at(bottom()) : void 0);
-	var button = root$40();
+	var button = root$39();
 	let styles;
 	Icon($.child(button), { get name() {
 		return $$props.icon;
@@ -5782,11 +5951,11 @@ function Fab($$anchor, $$props) {
 $.delegate(["click"]);
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/InspectorRow.svelte
-var root$39 = $.from_html(`<span class="end svelte-hg5qfm"><!></span>`);
-var root_1$22 = $.from_html(`<div><!></div>`);
+var root$38 = $.from_html(`<span class="end svelte-hg5qfm"><!></span>`);
+var root_1$21 = $.from_html(`<div><!></div>`);
 function InspectorRow($$anchor, $$props) {
 	let align = $.prop($$props, "align", 3, "start"), small = $.prop($$props, "small", 3, false), top = $.prop($$props, "top", 3, false);
-	var div = root_1$22();
+	var div = root_1$21();
 	let classes;
 	Pair($.child(div), {
 		get label() {
@@ -5805,7 +5974,7 @@ function InspectorRow($$anchor, $$props) {
 			var fragment = $.comment();
 			var node_1 = $.first_child(fragment);
 			var consequent = ($$anchor) => {
-				var span = root$39();
+				var span = root$38();
 				var node_2 = $.child(span);
 				$.snippet(node_2, () => $$props.children);
 				$.reset(span);
@@ -5831,10 +6000,10 @@ function InspectorRow($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/NativeSelect.svelte
-var root$38 = $.from_html(`<option disabled="" data-kata-placeholder="" class="svelte-1iprfoy"> </option>`);
-var root_1$21 = $.from_html(`<option class="svelte-1iprfoy"> </option>`);
-var root_2$13 = $.from_html(`<optgroup></optgroup>`);
-var root_3$7 = $.from_html(`<label data-role="box" data-h="button"><span aria-hidden="true"> </span> <select class="svelte-1iprfoy"><!><!><!></select> <!></label>`);
+var root$37 = $.from_html(`<option disabled="" selected="" data-kata-placeholder="" class="svelte-1iprfoy"> </option>`);
+var root_1$20 = $.from_html(`<option class="svelte-1iprfoy"> </option>`);
+var root_2$12 = $.from_html(`<optgroup></optgroup>`);
+var root_3$6 = $.from_html(`<label data-role="box" data-h="button"><span aria-hidden="true"> </span> <select class="svelte-1iprfoy"><!><!><!></select> <!></label>`);
 function NativeSelect($$anchor, $$props) {
 	$.push($$props, true);
 	let options = $.prop($$props, "options", 19, () => []), value = $.prop($$props, "value", 15), disabled = $.prop($$props, "disabled", 3, false), error = $.prop($$props, "error", 3, false);
@@ -5846,7 +6015,7 @@ function NativeSelect($$anchor, $$props) {
 	const chosen = $.derived(() => $.get(all).find((o) => o.value === value()));
 	const shown = $.derived(() => $.get(chosen)?.label ?? $$props.placeholder ?? $.get(all).find((o) => !o.disabled)?.label ?? "");
 	const empty = $.derived(() => !$.get(chosen) && $$props.placeholder !== void 0);
-	var label = root_3$7();
+	var label = root_3$6();
 	let classes;
 	var span = $.child(label);
 	let classes_1;
@@ -5854,7 +6023,7 @@ function NativeSelect($$anchor, $$props) {
 	var select = $.sibling(span, 2);
 	var node = $.child(select);
 	var consequent = ($$anchor) => {
-		var option = root$38();
+		var option = root$37();
 		var text_1 = $.only_child(option, true);
 		option.value = option.__value = "";
 		$.template_effect(() => $.set_text(text_1, $$props.placeholder));
@@ -5865,9 +6034,9 @@ function NativeSelect($$anchor, $$props) {
 	});
 	var node_1 = $.sibling(node);
 	$.each(node_1, 17, () => $$props.groups ?? [], (group) => group.label, ($$anchor, group) => {
-		var optgroup = root_2$13();
+		var optgroup = root_2$12();
 		$.each(optgroup, 21, () => $.get(group).options, (opt) => opt.value, ($$anchor, opt) => {
-			var option_1 = root_1$21();
+			var option_1 = root_1$20();
 			var text_2 = $.only_child(option_1, true);
 			var option_1_value = {};
 			$.template_effect(() => {
@@ -5882,7 +6051,7 @@ function NativeSelect($$anchor, $$props) {
 	});
 	var node_2 = $.sibling(node_1);
 	$.each(node_2, 17, options, (opt) => opt.value, ($$anchor, opt) => {
-		var option_2 = root_1$21();
+		var option_2 = root_1$20();
 		var text_3 = $.only_child(option_2, true);
 		var option_2_value = {};
 		$.template_effect(() => {
@@ -5918,13 +6087,13 @@ function NativeSelect($$anchor, $$props) {
 $.delegate(["change"]);
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/ReadValue.svelte
-var root$37 = $.from_html(`<span data-role="value"> </span>`);
+var root$36 = $.from_html(`<span data-role="value" data-ink=""> </span>`);
 function ReadValue($$anchor, $$props) {
 	let mono = $.prop($$props, "mono", 3, false), muted = $.prop($$props, "muted", 3, false), clamp = $.prop($$props, "clamp", 3, false);
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 	var consequent = ($$anchor) => {
-		var span = root$37();
+		var span = root$36();
 		let classes;
 		var text = $.only_child(span, true);
 		$.action(span, ($$node) => clampTip?.($$node));
@@ -5938,7 +6107,7 @@ function ReadValue($$anchor, $$props) {
 		$.append($$anchor, span);
 	};
 	var alternate = ($$anchor) => {
-		var span_1 = root$37();
+		var span_1 = root$36();
 		let classes_1;
 		var text_1 = $.only_child(span_1, true);
 		$.template_effect(() => {
@@ -5958,15 +6127,15 @@ function ReadValue($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Segmented.svelte
-var root$36 = $.from_html(`<span class="t svelte-1dnswrb"> </span>`);
-var root_1$20 = $.from_html(`<button type="button" data-role="box" data-h="button"><!><!></button>`);
-var root_2$12 = $.from_html(`<div class="seg svelte-1dnswrb" data-role="box" role="group"></div>`);
+var root$35 = $.from_html(`<span class="t svelte-1dnswrb"> </span>`);
+var root_1$19 = $.from_html(`<button type="button" data-role="box" data-h="button"><!><!></button>`);
+var root_2$11 = $.from_html(`<div class="seg svelte-1dnswrb" data-role="box" role="group"></div>`);
 function Segmented($$anchor, $$props) {
 	$.push($$props, true);
 	let value = $.prop($$props, "value", 15);
-	var div = root_2$12();
+	var div = root_2$11();
 	$.each(div, 21, () => $$props.options, (opt) => opt.value, ($$anchor, opt) => {
-		var button = root_1$20();
+		var button = root_1$19();
 		let classes;
 		var node = $.child(button);
 		var consequent = ($$anchor) => {
@@ -5979,7 +6148,7 @@ function Segmented($$anchor, $$props) {
 		});
 		var node_1 = $.sibling(node);
 		var consequent_1 = ($$anchor) => {
-			var span = root$36();
+			var span = root$35();
 			var text = $.only_child(span, true);
 			$.template_effect(() => $.set_text(text, $.get(opt).label));
 			$.append($$anchor, span);
@@ -6011,7 +6180,7 @@ function Segmented($$anchor, $$props) {
 $.delegate(["click"]);
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Slider.svelte
-var root$35 = $.from_html(`<div data-role="switch" data-h="button-sm"><input type="range" class="svelte-1bgstw"/> <span class="val svelte-1bgstw"> </span></div>`);
+var root$34 = $.from_html(`<div data-role="switch" data-h="button-sm"><input type="range" class="svelte-1bgstw"/> <span class="val svelte-1bgstw"> </span></div>`);
 function Slider($$anchor, $$props) {
 	$.push($$props, true);
 	let min = $.prop($$props, "min", 3, 0), max = $.prop($$props, "max", 3, 100), step = $.prop($$props, "step", 3, 1), disabled = $.prop($$props, "disabled", 3, false);
@@ -6019,7 +6188,7 @@ function Slider($$anchor, $$props) {
 	/** Every change while dragging */
 	/** The value when it is let go or changed with a key */
 	const pct = $.derived(() => max() > min() ? ($$props.value - min()) / (max() - min()) * 100 : 0);
-	var div = root$35();
+	var div = root$34();
 	let classes;
 	var input = $.child(div);
 	$.remove_input_defaults(input);
@@ -6047,14 +6216,14 @@ function Slider($$anchor, $$props) {
 $.delegate(["input", "change"]);
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Swatch.svelte
-var root$34 = $.from_html(`<span data-role="mark" class="swatch svelte-13cusr7" data-shape="icon" aria-hidden="true"><span class="halo svelte-13cusr7"><!></span> <span class="ink svelte-13cusr7"><!></span></span>`);
-var root_1$19 = $.from_html(`<span data-role="mark" aria-hidden="true"></span>`);
+var root$33 = $.from_html(`<span data-role="mark" class="swatch svelte-13cusr7" data-shape="icon" aria-hidden="true"><span class="halo svelte-13cusr7"><!></span> <span class="ink svelte-13cusr7"><!></span></span>`);
+var root_1$18 = $.from_html(`<span data-role="mark" aria-hidden="true"></span>`);
 function Swatch($$anchor, $$props) {
 	let shape = $.prop($$props, "shape", 3, "box"), fill = $.prop($$props, "fill", 3, false);
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 	var consequent = ($$anchor) => {
-		var span = root$34();
+		var span = root$33();
 		let styles;
 		var span_1 = $.child(span);
 		Icon($.child(span_1), { get name() {
@@ -6075,7 +6244,7 @@ function Swatch($$anchor, $$props) {
 		$.append($$anchor, span);
 	};
 	var alternate = ($$anchor) => {
-		var span_3 = root_1$19();
+		var span_3 = root_1$18();
 		let classes;
 		let styles_2;
 		$.template_effect(() => {
@@ -6093,17 +6262,17 @@ function Swatch($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Toggle.svelte
-var root$33 = $.from_html(`<span class="line grow svelte-bzo86b"><span class="t svelte-bzo86b"> </span></span>`);
-var root_1$18 = $.from_html(`<span class="line svelte-bzo86b"><span class="t svelte-bzo86b"> </span></span>`);
-var root_2$11 = $.from_html(`<label data-role="switch" data-control=""><!> <span class="seat svelte-bzo86b"><input type="checkbox" role="switch" class="toggle svelte-bzo86b"/></span> <!></label>`);
+var root$32 = $.from_html(`<span class="line grow svelte-bzo86b"><span class="t svelte-bzo86b"> </span></span>`);
+var root_1$17 = $.from_html(`<span class="line svelte-bzo86b"><span class="t svelte-bzo86b"> </span></span>`);
+var root_2$10 = $.from_html(`<label data-role="switch" data-control=""><!> <span class="seat svelte-bzo86b"><input type="checkbox" role="switch" class="toggle svelte-bzo86b"/></span> <!></label>`);
 function Toggle($$anchor, $$props) {
 	$.push($$props, true);
 	let checked = $.prop($$props, "checked", 15, false), disabled = $.prop($$props, "disabled", 3, false), between = $.prop($$props, "between", 3, false), indent = $.prop($$props, "indent", 3, false);
-	var label_1 = root_2$11();
+	var label_1 = root_2$10();
 	let classes;
 	var node = $.child(label_1);
 	var consequent = ($$anchor) => {
-		var span = root$33();
+		var span = root$32();
 		var span_1 = $.child(span);
 		var text = $.only_child(span_1, true);
 		$.reset(span);
@@ -6119,7 +6288,7 @@ function Toggle($$anchor, $$props) {
 	$.reset(span_2);
 	var node_1 = $.sibling(span_2, 2);
 	var consequent_1 = ($$anchor) => {
-		var span_3 = root_1$18();
+		var span_3 = root_1$17();
 		var span_4 = $.child(span_3);
 		var text_1 = $.only_child(span_4, true);
 		$.reset(span_3);
@@ -6148,7 +6317,7 @@ function Toggle($$anchor, $$props) {
 $.delegate(["change"]);
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/FieldList.svelte
-var root$32 = $.from_html(`<!> <!>`, 1);
+var root$31 = $.from_html(`<!> <!>`, 1);
 function FieldList($$anchor, $$props) {
 	const uid = $.props_id();
 	$.push($$props, true);
@@ -6174,7 +6343,7 @@ function FieldList($$anchor, $$props) {
 	Stack($$anchor, {
 		gap: "sm",
 		children: ($$anchor, $$slotProps) => {
-			var fragment_1 = root$32();
+			var fragment_1 = root$31();
 			var node = $.first_child(fragment_1);
 			$.each(node, 19, () => $$props.fields, (f) => f.key, ($$anchor, f, i) => {
 				const id = $.derived(() => `${uid}-${$.get(i)}`);
@@ -6534,7 +6703,7 @@ function FieldList($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Floating.svelte
-var root$31 = $.from_html(`<div data-role="floating"><!></div>`);
+var root$30 = $.from_html(`<div data-role="floating" data-outline=""><!></div>`);
 function Floating($$anchor, $$props) {
 	$.push($$props, true);
 	const STEPS = /* @__PURE__ */ new Set([
@@ -6558,7 +6727,7 @@ function Floating($$anchor, $$props) {
 		if (steps.length === 0) return void 0;
 		return `calc(100% - ${steps.map((v) => `var(--kata-gap-${v})`).join(" - ")})`;
 	});
-	var div = root$31();
+	var div = root$30();
 	let classes;
 	let styles;
 	var node = $.child(div);
@@ -6584,8 +6753,8 @@ function Floating($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Panel.svelte
-var root$30 = $.from_html(`<div class="handle svelte-1paomu5" role="slider" tabindex="0" aria-orientation="vertical"></div>`);
-var root_1$17 = $.from_html(`<section data-role="panel"><!> <!> <div class="scroll svelte-1paomu5"><!></div> <!></section>`);
+var root$29 = $.from_html(`<div class="handle svelte-1paomu5" role="slider" tabindex="0" aria-orientation="vertical"></div>`);
+var root_1$16 = $.from_html(`<section data-role="panel" data-outline=""><!> <!> <div class="scroll svelte-1paomu5"><!></div> <!></section>`);
 function Panel($$anchor, $$props) {
 	$.push($$props, true);
 	let side = $.prop($$props, "side", 3, "panel"), fit = $.prop($$props, "fit", 3, false), resizable = $.prop($$props, "resizable", 3, false);
@@ -6633,11 +6802,11 @@ function Panel($$anchor, $$props) {
 		else return;
 		e.preventDefault();
 	}
-	var section = root_1$17();
+	var section = root_1$16();
 	let classes;
 	var node = $.child(section);
 	var consequent = ($$anchor) => {
-		var div = root$30();
+		var div = root$29();
 		$.set_attribute(div, "aria-valuemin", 0);
 		$.template_effect(() => {
 			$.set_attribute(div, "aria-label", $$props.resizeLabel);
@@ -6684,9 +6853,9 @@ $.delegate([
 ]);
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Tabs.svelte
-var root_1$16 = $.from_html(`<a><span class="t svelte-dvdfj"> </span></a>`);
-var root_2$10 = $.from_html(`<button type="button"><span class="t svelte-dvdfj"> </span></button>`);
-var root_3$6 = $.from_html(`<button type="button" aria-haspopup="menu"><span class="t svelte-dvdfj"> </span><!></button>`);
+var root_1$15 = $.from_html(`<a><span class="t svelte-dvdfj"> </span></a>`);
+var root_2$9 = $.from_html(`<button type="button"><span class="t svelte-dvdfj"> </span></button>`);
+var root_3$5 = $.from_html(`<button type="button" aria-haspopup="menu"><span class="t svelte-dvdfj"> </span><!></button>`);
 var root_4$4 = $.from_html(`<span class="tab svelte-dvdfj"><span class="t svelte-dvdfj"> </span></span>`);
 var root_5$3 = $.from_html(`<span class="tab more cur svelte-dvdfj"><span class="t svelte-dvdfj"> </span><!></span>`);
 var root_6$3 = $.from_html(`<nav data-role="tabs"><!> <!> <span class="measure svelte-dvdfj" aria-hidden="true" data-kata-skip=""><!> <span class="tab more svelte-dvdfj"><span class="t svelte-dvdfj"> </span><!></span> <!></span></nav>`);
@@ -6696,7 +6865,7 @@ function Tabs($$anchor, $$props) {
 		var fragment = $.comment();
 		var node = $.first_child(fragment);
 		var consequent = ($$anchor) => {
-			var a_1 = root_1$16();
+			var a_1 = root_1$15();
 			let classes;
 			var span = $.child(a_1);
 			var text = $.only_child(span, true);
@@ -6714,7 +6883,7 @@ function Tabs($$anchor, $$props) {
 			$.append($$anchor, a_1);
 		};
 		var alternate = ($$anchor) => {
-			var button = root_2$10();
+			var button = root_2$9();
 			let classes_1;
 			var span_1 = $.child(button);
 			var text_1 = $.only_child(span_1, true);
@@ -6810,7 +6979,7 @@ function Tabs($$anchor, $$props) {
 	var consequent_1 = ($$anchor) => {
 		{
 			const trigger = ($$anchor, toggle = $.noop, open = $.noop) => {
-				var button_1 = root_3$6();
+				var button_1 = root_3$5();
 				let classes_3;
 				var span_2 = $.child(button_1);
 				var text_2 = $.only_child(span_2, true);
@@ -6911,13 +7080,13 @@ function Tabs($$anchor, $$props) {
 $.delegate(["keydown", "click"]);
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/InspectorFrame.svelte
-var root$29 = $.from_html(`<!> <!>`, 1);
-var root_1$15 = $.from_html(`<span class="name svelte-h87gf9"><!></span>`);
-var root_2$9 = $.from_html(`<!> <!> <!>`, 1);
+var root$28 = $.from_html(`<!> <!>`, 1);
+var root_1$14 = $.from_html(`<span class="name svelte-h87gf9"><!></span>`);
+var root_2$8 = $.from_html(`<!> <!> <!>`, 1);
 function InspectorFrame($$anchor, $$props) {
 	$.push($$props, true);
 	const headEnd = ($$anchor) => {
-		var fragment = root$29();
+		var fragment = root$28();
 		var node = $.first_child(fragment);
 		$.snippet(node, () => $$props.head ?? $.noop);
 		var node_1 = $.sibling(node, 2);
@@ -6960,7 +7129,7 @@ function InspectorFrame($$anchor, $$props) {
 		var fragment_5 = $.comment();
 		var node_3 = $.first_child(fragment_5);
 		var consequent_2 = ($$anchor) => {
-			var span = root_1$15();
+			var span = root_1$14();
 			var node_4 = $.child(span);
 			{
 				let $0 = $.derived(() => $.get(name) ? getMessages().rename : $.get(action));
@@ -7018,7 +7187,7 @@ function InspectorFrame($$anchor, $$props) {
 	}
 	{
 		const head = ($$anchor) => {
-			var fragment_9 = root_2$9();
+			var fragment_9 = root_2$8();
 			var node_5 = $.first_child(fragment_9);
 			{
 				let $0 = $.derived(() => !$.get(editable) && !$$props.subtitle ? $$props.title : void 0);
@@ -7050,11 +7219,11 @@ function InspectorFrame($$anchor, $$props) {
 						var fragment_10 = $.comment();
 						var node_6 = $.first_child(fragment_10);
 						var consequent_3 = ($$anchor) => {
-							var span_1 = root_1$15();
+							var span_1 = root_1$14();
 							Stack($.child(span_1), {
 								gap: "2xs",
 								children: ($$anchor, $$slotProps) => {
-									var fragment_11 = root$29();
+									var fragment_11 = root$28();
 									var node_8 = $.first_child(fragment_11);
 									nameOf(node_8);
 									Text($.sibling(node_8, 2), {
@@ -7146,18 +7315,18 @@ function InspectorFrame($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/SectionHeader.svelte
-var root$28 = $.from_html(`<div class="side svelte-clvfo5"><!></div>`);
-var root_1$14 = $.from_html(`<div data-role="section-header"><div class="head svelte-clvfo5" data-role="section-head"><span class="label svelte-clvfo5"> </span> <!></div> <div class="body svelte-clvfo5"><!></div></div>`);
+var root$27 = $.from_html(`<div class="side svelte-clvfo5"><!></div>`);
+var root_1$13 = $.from_html(`<div data-role="section-header"><div class="head svelte-clvfo5" data-role="section-head"><span class="label svelte-clvfo5"> </span> <!></div> <div class="body svelte-clvfo5"><!></div></div>`);
 function SectionHeader($$anchor, $$props) {
 	let flush = $.prop($$props, "flush", 3, false), rule = $.prop($$props, "rule", 3, false), gap = $.prop($$props, "gap", 3, "sm");
-	var div = root_1$14();
+	var div = root_1$13();
 	let classes;
 	var div_1 = $.child(div);
 	var span = $.child(div_1);
 	var text = $.only_child(span, true);
 	var node = $.sibling(span, 2);
 	var consequent = ($$anchor) => {
-		var div_2 = root$28();
+		var div_2 = root$27();
 		var node_1 = $.child(div_2);
 		$.snippet(node_1, () => $$props.actions);
 		$.reset(div_2);
@@ -7208,15 +7377,15 @@ function SectionHeader($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/InspectorSection.svelte
-var root$27 = $.from_html(`<span class="v svelte-5urx7z"> </span>`);
-var root_1$13 = $.from_html(`<!> <!> <!>`, 1);
+var root$26 = $.from_html(`<span class="v svelte-5urx7z"> </span>`);
+var root_1$12 = $.from_html(`<!> <!> <!>`, 1);
 function InspectorSection($$anchor, $$props) {
 	$.push($$props, true);
 	const actions = ($$anchor) => {
-		var fragment = root_1$13();
+		var fragment = root_1$12();
 		var node = $.first_child(fragment);
 		var consequent = ($$anchor) => {
-			var span = root$27();
+			var span = root$26();
 			var text = $.only_child(span, true);
 			$.template_effect(() => $.set_text(text, $$props.value));
 			$.append($$anchor, span);
@@ -7300,10 +7469,10 @@ function InspectorSection($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Kbd.svelte
-var root$26 = $.from_html(`<kbd data-role="mark"><span class="key svelte-1oh8oxw"><!></span></kbd>`);
+var root$25 = $.from_html(`<kbd data-role="mark"><span class="key svelte-1oh8oxw"><!></span></kbd>`);
 function Kbd($$anchor, $$props) {
 	let bare = $.prop($$props, "bare", 3, false);
-	var kbd = root$26();
+	var kbd = root$25();
 	let classes;
 	var span = $.child(kbd);
 	var node = $.child(span);
@@ -9349,10 +9518,10 @@ function sortable(node, params) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Markbox.svelte
-var root$25 = $.from_html(`<span data-role="markbox" data-h="icon"><!></span>`);
+var root$24 = $.from_html(`<span data-role="markbox" data-h="icon"><!></span>`);
 function Markbox($$anchor, $$props) {
 	let glyph = $.prop($$props, "glyph", 3, false);
-	var span = root$25();
+	var span = root$24();
 	let classes;
 	var node = $.child(span);
 	$.snippet(node, () => $$props.children);
@@ -9362,7 +9531,7 @@ function Markbox($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Tree.svelte
-var root$24 = $.from_html(`<div class="tree svelte-ruthwf" role="tree" data-role="list"><!></div>`);
+var root$23 = $.from_html(`<div class="tree svelte-ruthwf" role="tree" data-role="list"><!></div>`);
 function Tree($$anchor, $$props) {
 	$.push($$props, true);
 	let flat = $.prop($$props, "flat", 3, false);
@@ -9370,7 +9539,7 @@ function Tree($$anchor, $$props) {
 	/** No row opens: no room for the chevron */
 	/** The least height of every row */
 	setContext("kata-tree-flat", () => flat());
-	var div = root$24();
+	var div = root$23();
 	Stack($.child(div), {
 		gap: 0,
 		children: ($$anchor, $$slotProps) => {
@@ -9409,10 +9578,10 @@ var rest_excludes$6 = /* @__PURE__ */ new Set([
 	"children",
 	"end"
 ]);
-var root$23 = $.from_html(`<span data-grip="" aria-hidden="true"><!></span>`);
-var root_1$12 = $.from_html(`<button class="chev svelte-19ffqlj" type="button" data-h="icon-button"><!></button>`);
-var root_2$8 = $.from_html(`<span class="seat svelte-19ffqlj" aria-hidden="true"></span>`);
-var root_3$5 = $.from_html(`<span class="keep-seat svelte-19ffqlj" aria-hidden="true"></span>`);
+var root$22 = $.from_html(`<span data-grip="" aria-hidden="true"><!></span>`);
+var root_1$11 = $.from_html(`<button class="chev svelte-19ffqlj" type="button" data-h="icon-button"><!></button>`);
+var root_2$7 = $.from_html(`<span class="seat svelte-19ffqlj" aria-hidden="true"></span>`);
+var root_3$4 = $.from_html(`<span class="keep-seat svelte-19ffqlj" aria-hidden="true"></span>`);
 var root_4$3 = $.from_html(`<!> <span><!></span>`, 1);
 var root_5$2 = $.from_html(`<!> <!> <span class="main svelte-19ffqlj"><!></span> <!>`, 1);
 var root_6$2 = $.from_html(`<div><!></div>`);
@@ -9542,7 +9711,7 @@ function TreeRow($$anchor, $$props) {
 				var fragment = root_5$2();
 				var node_1 = $.first_child(fragment);
 				var consequent = ($$anchor) => {
-					var span = root$23();
+					var span = root$22();
 					let classes;
 					Icon($.child(span), { name: "grip-vertical" });
 					$.reset(span);
@@ -9558,7 +9727,7 @@ function TreeRow($$anchor, $$props) {
 				});
 				var node_3 = $.sibling(node_1, 2);
 				var consequent_1 = ($$anchor) => {
-					var button = root_1$12();
+					var button = root_1$11();
 					var node_4 = $.child(button);
 					{
 						let $0 = $.derived(() => expanded() ? "chevron-down" : "chevron-right");
@@ -9578,7 +9747,7 @@ function TreeRow($$anchor, $$props) {
 					$.append($$anchor, button);
 				};
 				var consequent_2 = ($$anchor) => {
-					var span_1 = root_2$8();
+					var span_1 = root_2$7();
 					$.append($$anchor, span_1);
 				};
 				$.if(node_3, ($$render) => {
@@ -9594,7 +9763,7 @@ function TreeRow($$anchor, $$props) {
 					var fragment_1 = root_4$3();
 					var node_7 = $.first_child(fragment_1);
 					var consequent_3 = ($$anchor) => {
-						var span_3 = root_3$5();
+						var span_3 = root_3$4();
 						let styles;
 						$.template_effect(() => styles = $.set_style(span_3, "", styles, { width: `${$.get(keepW) ?? ""}px` }));
 						$.append($$anchor, span_3);
@@ -9666,10 +9835,10 @@ var mark = ($$anchor, node = $.noop) => {
 	$.append($$anchor, fragment_3);
 };
 var trees = 0;
-var root_1$11 = $.from_html(`<span class="rename svelte-1go7yvy"><!></span>`);
-var root_2$7 = $.from_html(`<!> <!>`, 1);
-var root_3$4 = $.from_html(`<!> <!> <!> <!>`, 1);
-var root_4$2 = $.from_html(`<div class="subrows svelte-1go7yvy" data-subrows=""><!></div>`);
+var root_1$10 = $.from_html(`<span class="rename svelte-1go7yvy"><!></span>`);
+var root_2$6 = $.from_html(`<!> <!>`, 1);
+var root_3$3 = $.from_html(`<!> <!> <!> <!>`, 1);
+var root_4$2 = $.from_html(`<div data-subrows=""><!></div>`);
 var root_5$1 = $.from_html(`<div class="zone svelte-1go7yvy" role="group"></div>`);
 var root_6$1 = $.from_html(`<div class="item svelte-1go7yvy" role="none" data-sortable-item=""><!> <!> <!></div>`);
 var root_7$1 = $.from_html(`<div class="zone svelte-1go7yvy" role="none"></div>`);
@@ -9680,7 +9849,7 @@ function LayerTree($$anchor, $$props) {
 		var fragment = $.comment();
 		var node_1 = $.first_child(fragment);
 		var consequent = ($$anchor) => {
-			var span = root_1$11();
+			var span = root_1$10();
 			var node_2 = $.child(span);
 			var bind_get = () => true;
 			var bind_set = (v) => !v && endRename(node().id);
@@ -9739,7 +9908,7 @@ function LayerTree($$anchor, $$props) {
 			$.append($$anchor, fragment_9);
 		};
 		var alternate_2 = ($$anchor) => {
-			var fragment_10 = root_2$7();
+			var fragment_10 = root_2$6();
 			var node_7 = $.first_child(fragment_10);
 			mark(node_7, node);
 			var node_8 = $.sibling(node_7, 2);
@@ -9753,7 +9922,7 @@ function LayerTree($$anchor, $$props) {
 		$.append($$anchor, fragment_8);
 	};
 	const tools = ($$anchor, node = $.noop) => {
-		var fragment_11 = root_3$4();
+		var fragment_11 = root_3$3();
 		var node_9 = $.first_child(fragment_11);
 		var consequent_4 = ($$anchor) => {
 			var fragment_12 = $.comment();
@@ -9889,11 +10058,15 @@ function LayerTree($$anchor, $$props) {
 		var node_16 = $.sibling(node_15, 2);
 		var consequent_9 = ($$anchor) => {
 			var div_1 = root_4$2();
+			let classes;
 			let styles;
 			var node_17 = $.child(div_1);
 			$.snippet(node_17, () => $$props.subrows, node);
 			$.reset(div_1);
-			$.template_effect(() => styles = $.set_style(div_1, "", styles, { "--kata-tree-depth": depth() }));
+			$.template_effect(() => {
+				classes = $.set_class(div_1, 1, "subrows svelte-1go7yvy", null, classes, { marked: !!node().icon && !$$props.row });
+				styles = $.set_style(div_1, "", styles, { "--kata-tree-depth": depth() });
+			});
 			$.append($$anchor, div_1);
 		};
 		$.if(node_16, ($$render) => {
@@ -10207,7 +10380,7 @@ function LayerTree($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Sheet.svelte
-var root$22 = $.from_html(`<aside data-role="panel"><button class="handle svelte-1l2tcmc" type="button"></button> <!> <div><!></div> <!></aside>`);
+var root$21 = $.from_html(`<aside data-role="panel" data-outline=""><button class="handle svelte-1l2tcmc" type="button"></button> <!> <div><!></div> <!></aside>`);
 function Sheet($$anchor, $$props) {
 	$.push($$props, true);
 	let stage = $.prop($$props, "stage", 15, "half"), stages = $.prop($$props, "stages", 19, () => [
@@ -10304,7 +10477,7 @@ function Sheet($$anchor, $$props) {
 			else go(stages()[Math.max(0, $.get(index) - 1)]);
 		}
 	}
-	var aside = root$22();
+	var aside = root$21();
 	let classes;
 	let styles;
 	var button = $.child(aside);
@@ -10350,14 +10523,14 @@ $.delegate([
 ]);
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Progress.svelte
-var root$21 = $.from_html(`<div data-role="progress" role="progressbar"><div class="fill svelte-nr5ef2"></div></div>`);
+var root$20 = $.from_html(`<div data-role="progress" role="progressbar"><div class="fill svelte-nr5ef2"></div></div>`);
 function Progress($$anchor, $$props) {
 	let max = $.prop($$props, "max", 3, 100);
 	/** The amount done; without it the bar is indeterminate */
 	/** The accessible name of the bar */
 	const indet = $.derived(() => $$props.value === void 0);
 	const pct = $.derived(() => $.get(indet) || max() <= 0 ? 0 : Math.max(0, Math.min(100, ($$props.value ?? 0) / max() * 100)));
-	var div = root$21();
+	var div = root$20();
 	let classes;
 	$.set_attribute(div, "aria-valuemin", 0);
 	var div_1 = $.child(div);
@@ -10374,8 +10547,8 @@ function Progress($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/ProcessDialog.svelte
-var root$20 = $.from_html(`<div aria-live="polite"><!></div> <!>`, 1);
-var root_1$10 = $.from_html(`<!> <!> <!>`, 1);
+var root$19 = $.from_html(`<div class="live svelte-16ppcuu" aria-live="polite"><!></div> <!>`, 1);
+var root_1$9 = $.from_html(`<!> <!> <!>`, 1);
 function ProcessDialog($$anchor, $$props) {
 	$.push($$props, true);
 	const cancelAction = ($$anchor) => {
@@ -10445,7 +10618,7 @@ function ProcessDialog($$anchor, $$props) {
 				Stack($$anchor, {
 					gap: "sm",
 					children: ($$anchor, $$slotProps) => {
-						var fragment_7 = root$20();
+						var fragment_7 = root$19();
 						var div = $.first_child(fragment_7);
 						var node_1 = $.child(div);
 						{
@@ -10473,7 +10646,7 @@ function ProcessDialog($$anchor, $$props) {
 				});
 			};
 			var alternate = ($$anchor) => {
-				var fragment_8 = root_1$10();
+				var fragment_8 = root_1$9();
 				var node_3 = $.first_child(fragment_8);
 				var consequent_1 = ($$anchor) => {
 					Banner($$anchor, {
@@ -10534,79 +10707,8 @@ function ProcessDialog($$anchor, $$props) {
 	$.pop();
 }
 //#endregion
-//#region ../node_modules/@sakuzu/kata/dist/svelte/components/Section.svelte
-var root$19 = $.from_html(`<span class="status svelte-mk24w4"> </span>`);
-var root_1$9 = $.from_html(`<p class="note svelte-mk24w4" data-role="caption"> </p>`);
-var root_2$6 = $.from_html(`<div class="head svelte-mk24w4" data-role="row-inline"><h2 class="title svelte-mk24w4"> </h2> <!></div> <!>`, 1);
-var root_3$3 = $.from_html(`<!> <div class="body svelte-mk24w4" data-pass=""><!></div>`, 1);
-var root_4$1 = $.from_html(`<section data-role="section"><!></section>`);
-function Section($$anchor, $$props) {
-	let gap = $.prop($$props, "gap", 3, "lg"), flush = $.prop($$props, "flush", 3, false);
-	var section = root_4$1();
-	let classes;
-	Stack($.child(section), {
-		gap: "lg",
-		children: ($$anchor, $$slotProps) => {
-			var fragment = root_3$3();
-			var node_1 = $.first_child(fragment);
-			Stack(node_1, {
-				gap: "xs",
-				children: ($$anchor, $$slotProps) => {
-					var fragment_1 = root_2$6();
-					var div = $.first_child(fragment_1);
-					var h2 = $.child(div);
-					var text = $.only_child(h2, true);
-					var node_2 = $.sibling(h2, 2);
-					var consequent = ($$anchor) => {
-						var span = root$19();
-						var text_1 = $.only_child(span, true);
-						$.template_effect(() => $.set_text(text_1, $$props.status));
-						$.append($$anchor, span);
-					};
-					$.if(node_2, ($$render) => {
-						if ($$props.status) $$render(consequent);
-					});
-					$.reset(div);
-					var node_3 = $.sibling(div, 2);
-					var consequent_1 = ($$anchor) => {
-						var p = root_1$9();
-						var text_2 = $.only_child(p, true);
-						$.template_effect(() => $.set_text(text_2, $$props.note));
-						$.append($$anchor, p);
-					};
-					$.if(node_3, ($$render) => {
-						if ($$props.note) $$render(consequent_1);
-					});
-					$.template_effect(() => $.set_text(text, $$props.title));
-					$.append($$anchor, fragment_1);
-				},
-				$$slots: { default: true }
-			});
-			var div_1 = $.sibling(node_1, 2);
-			Stack($.child(div_1), {
-				get gap() {
-					return gap();
-				},
-				children: ($$anchor, $$slotProps) => {
-					var fragment_2 = $.comment();
-					var node_5 = $.first_child(fragment_2);
-					$.snippet(node_5, () => $$props.children);
-					$.append($$anchor, fragment_2);
-				},
-				$$slots: { default: true }
-			});
-			$.reset(div_1);
-			$.append($$anchor, fragment);
-		},
-		$$slots: { default: true }
-	});
-	$.reset(section);
-	$.template_effect(() => classes = $.set_class(section, 1, "kata-section svelte-mk24w4", null, classes, { flush: flush() }));
-	$.append($$anchor, section);
-}
-//#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Stat.svelte
-var root$18 = $.from_html(`<div class="stat svelte-1hxotol" data-role="stat" data-pass=""><span class="v svelte-1hxotol"> </span> <span class="k svelte-1hxotol"><!><span class="t svelte-1hxotol"> </span></span></div>`);
+var root$18 = $.from_html(`<div class="stat svelte-1hxotol" data-role="stat"><span class="v svelte-1hxotol"> </span> <span class="k svelte-1hxotol"><!><span class="t svelte-1hxotol"> </span></span></div>`);
 function Stat($$anchor, $$props) {
 	var div = root$18();
 	var span = $.child(div);
@@ -10633,7 +10735,7 @@ function Stat($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Stats.svelte
-var root$17 = $.from_html(`<div class="stats svelte-k8jq30" data-role="stat"><!></div>`);
+var root$17 = $.from_html(`<div class="stats svelte-k8jq30" data-role="stat" data-edge-pass=""><!></div>`);
 function Stats($$anchor, $$props) {
 	var div = root$17();
 	var node = $.child(div);
@@ -11026,6 +11128,7 @@ function ShortcutsModal($$anchor, $$props) {
 			get onclose() {
 				return $$props.onclose;
 			},
+			flush: true,
 			get open() {
 				return open();
 			},
@@ -11049,8 +11152,8 @@ function ShortcutsModal($$anchor, $$props) {
 							var $$array = $.derived(() => $.to_array($.get($$item), 2));
 							let group = () => $.get($$array)[0];
 							let list = () => $.get($$array)[1];
-							Section($$anchor, {
-								get title() {
+							SectionHeader($$anchor, {
+								get label() {
 									return group();
 								},
 								flush: true,
@@ -11072,7 +11175,7 @@ function ShortcutsModal($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Veil.svelte
-var root$14 = $.from_html(`<div class="veil svelte-1chlxvr" data-role="veil"><!></div>`);
+var root$14 = $.from_html(`<div class="veil svelte-1chlxvr" data-role="veil" data-outline=""><!></div>`);
 function Veil($$anchor, $$props) {
 	let busy = $.prop($$props, "busy", 3, false);
 	var div = root$14();
@@ -11087,7 +11190,7 @@ function Veil($$anchor, $$props) {
 var root_1$7 = $.from_html(`<div class="top svelte-8jke9d" data-region="top"><!></div>`);
 var root_2$5 = $.from_html(`<div class="side left svelte-8jke9d" data-region="left"><!></div>`);
 var root_3$2 = $.from_html(`<div class="surface svelte-8jke9d"><!></div>`);
-var root_4 = $.from_html(`<div class="bottom svelte-8jke9d" data-region="bottom"><!></div>`);
+var root_4$1 = $.from_html(`<div class="bottom svelte-8jke9d" data-region="bottom"><!></div>`);
 var root_5 = $.from_html(`<div class="fab-column svelte-8jke9d" data-region="bottom"><!></div>`);
 var root_6 = $.from_html(`<!> <div class="fab-seat svelte-8jke9d"><!></div>`, 1);
 var root_7 = $.from_html(`<div class="top-float svelte-8jke9d" data-region="top"><!></div>`);
@@ -11172,7 +11275,7 @@ function Shell($$anchor, $$props) {
 	const sheetOf = (side) => side === "left" ? $$props.leftSheet : $$props.rightSheet;
 	const stagesOf = (side) => sheetOf(side)?.stages ?? ALL_STAGES;
 	const closableOf = (side) => sheetOf(side)?.closable ?? true;
-	const sheets = $.derived(() => $.get(mode) === "sheet" ? [...["left", "right"].filter((side) => !closableOf(side) && !!region(side) && !shown(side)), ...$.get(order)] : []);
+	const sheets = $.derived(() => $.get(mode) === "sheet" ? [...["left", "right"].filter((side) => !closableOf(side) && !!region(side) && !shown(side) && !$.get(dockSheeted)), ...$.get(order)] : []);
 	/** The height a sheet shows: its stage while open, its lowest height while it rests */
 	function sheetStage(side) {
 		if (!shown(side)) return stagesOf(side)[0];
@@ -11418,7 +11521,7 @@ function Shell($$anchor, $$props) {
 	});
 	var node_7 = $.sibling(node_5, 2);
 	var consequent_3 = ($$anchor) => {
-		var div_7 = root_4();
+		var div_7 = root_4$1();
 		var node_8 = $.child(div_7);
 		$.snippet(node_8, () => $$props.bottom, () => ({ column: false }));
 		$.reset(div_7);
@@ -12286,9 +12389,10 @@ function toolbarShortcuts(draw, specs, messages, deletable) {
 }
 //#endregion
 //#region src/components/Actions.svelte
-var root_1$6 = $.from_html(`<div class="item svelte-9feu2r"><div class="row svelte-9feu2r"><div class="control svelte-9feu2r"><!></div> <!></div> <!></div>`);
-var root_2$4 = $.from_html(`<div class="card svelte-9feu2r"><!></div>`);
-var root_3$1 = $.from_html(`<div data-role="actions"><!></div>`);
+var root_1$6 = $.from_html(`<!> <!>`, 1);
+var root_2$4 = $.from_html(`<span> </span>`);
+var root_3$1 = $.from_html(`<div class="card svelte-9feu2r"><!></div>`);
+var root_4 = $.from_html(`<div data-role="actions"><!></div>`);
 function Actions($$anchor, $$props) {
 	$.push($$props, true);
 	const head = ($$anchor) => {
@@ -12308,7 +12412,30 @@ function Actions($$anchor, $$props) {
 			$$slots: { default: true }
 		});
 	};
+	const toggle = ($$anchor, spec = $.noop) => {
+		var bind_get = () => read(spec(), "checked");
+		var bind_set = () => runAction($$props.actions, spec());
+		{
+			let $0 = $.derived(() => read(spec(), "disabled"));
+			Toggle($$anchor, {
+				between: true,
+				get label() {
+					return spec().label;
+				},
+				get disabled() {
+					return $.get($0);
+				},
+				get checked() {
+					return bind_get();
+				},
+				set checked($$value) {
+					bind_set($$value);
+				}
+			});
+		}
+	};
 	let keys = $.prop($$props, "keys", 3, true), narrow = $.prop($$props, "narrow", 3, false), startOpen = $.prop($$props, "startOpen", 3, true), beside = $.prop($$props, "beside", 3, false), reopen = $.prop($$props, "reopen", 3, false);
+	const COLUMNS = "minmax(0, 1fr) auto";
 	const RESERVE = "--mgd-ui-actions-reserve";
 	const list = $.derived(() => $$props.actions.list.get());
 	const version = $.derived(() => $$props.actions.version.get());
@@ -12433,7 +12560,7 @@ function Actions($$anchor, $$props) {
 			root.style.removeProperty(RESERVE);
 		};
 	});
-	var div = root_3$1();
+	var div = root_4();
 	$.event("resize", $.window, place);
 	var node = $.child(div);
 	{
@@ -12447,10 +12574,10 @@ function Actions($$anchor, $$props) {
 				return $.get($1);
 			},
 			children: ($$anchor, $$slotProps) => {
-				var fragment_2 = $.comment();
-				var node_1 = $.first_child(fragment_2);
-				var consequent_3 = ($$anchor) => {
-					var div_1 = root_2$4();
+				var fragment_3 = $.comment();
+				var node_1 = $.first_child(fragment_3);
+				var consequent_5 = ($$anchor) => {
+					var div_1 = root_3$1();
 					let styles;
 					SectionHeader($.child(div_1), {
 						get label() {
@@ -12459,100 +12586,168 @@ function Actions($$anchor, $$props) {
 						get actions() {
 							return head;
 						},
+						flush: true,
 						children: ($$anchor, $$slotProps) => {
-							var fragment_3 = $.comment();
-							var node_3 = $.first_child(fragment_3);
-							$.each(node_3, 17, () => $.get(list), (spec) => spec.id, ($$anchor, spec) => {
-								const key = $.derived(() => kbd($.get(spec)));
-								var div_2 = root_1$6();
-								var div_3 = $.child(div_2);
-								var div_4 = $.child(div_3);
-								var node_4 = $.child(div_4);
-								var consequent = ($$anchor) => {
-									var bind_get = () => read($.get(spec), "checked");
-									var bind_set = () => runAction($$props.actions, $.get(spec));
-									{
-										let $0 = $.derived(() => read($.get(spec), "disabled"));
-										Toggle($$anchor, {
-											between: true,
-											get label() {
-												return $.get(spec).label;
-											},
-											get disabled() {
-												return $.get($0);
-											},
-											get checked() {
-												return bind_get();
-											},
-											set checked($$value) {
-												bind_set($$value);
+							List($$anchor, {
+								children: ($$anchor, $$slotProps) => {
+									var fragment_5 = $.comment();
+									var node_3 = $.first_child(fragment_5);
+									$.each(node_3, 17, () => $.get(list), (spec) => spec.id, ($$anchor, spec) => {
+										const key = $.derived(() => kbd($.get(spec)));
+										var fragment_6 = $.comment();
+										var node_4 = $.first_child(fragment_6);
+										var consequent_2 = ($$anchor) => {
+											ListItem($$anchor, {
+												columns: COLUMNS,
+												plain: true,
+												get "data-action"() {
+													return $.get(spec).id;
+												},
+												children: ($$anchor, $$slotProps) => {
+													var fragment_8 = root_1$6();
+													var node_5 = $.first_child(fragment_8);
+													var consequent = ($$anchor) => {
+														Stack($$anchor, {
+															gap: "sm",
+															children: ($$anchor, $$slotProps) => {
+																var fragment_10 = root_1$6();
+																var node_6 = $.first_child(fragment_10);
+																toggle(node_6, () => $.get(spec));
+																Text($.sibling(node_6, 2), {
+																	role: "caption",
+																	muted: true,
+																	clamp: true,
+																	children: ($$anchor, $$slotProps) => {
+																		$.next();
+																		var text = $.text();
+																		$.template_effect(() => $.set_text(text, $.get(spec).hint));
+																		$.append($$anchor, text);
+																	},
+																	$$slots: { default: true }
+																});
+																$.append($$anchor, fragment_10);
+															},
+															$$slots: { default: true }
+														});
+													};
+													var alternate = ($$anchor) => {
+														toggle($$anchor, () => $.get(spec));
+													};
+													$.if(node_5, ($$render) => {
+														if ($.get(spec).hint) $$render(consequent);
+														else $$render(alternate, -1);
+													});
+													var node_8 = $.sibling(node_5, 2);
+													var consequent_1 = ($$anchor) => {
+														Kbd($$anchor, {
+															bare: true,
+															children: ($$anchor, $$slotProps) => {
+																$.next();
+																var text_1 = $.text();
+																$.template_effect(() => $.set_text(text_1, $.get(key)));
+																$.append($$anchor, text_1);
+															},
+															$$slots: { default: true }
+														});
+													};
+													$.if(node_8, ($$render) => {
+														if ($.get(key)) $$render(consequent_1);
+													});
+													$.append($$anchor, fragment_8);
+												},
+												$$slots: { default: true }
+											});
+										};
+										var alternate_2 = ($$anchor) => {
+											{
+												let $0 = $.derived(() => read($.get(spec), "disabled"));
+												ListItem($$anchor, {
+													columns: COLUMNS,
+													get disabled() {
+														return $.get($0);
+													},
+													onclick: () => runAction($$props.actions, $.get(spec)),
+													get "data-action"() {
+														return $.get(spec).id;
+													},
+													children: ($$anchor, $$slotProps) => {
+														var fragment_16 = root_1$6();
+														var node_9 = $.first_child(fragment_16);
+														var consequent_3 = ($$anchor) => {
+															Stack($$anchor, {
+																gap: "sm",
+																children: ($$anchor, $$slotProps) => {
+																	var fragment_18 = root_1$6();
+																	var node_10 = $.first_child(fragment_18);
+																	Text(node_10, {
+																		clamp: true,
+																		children: ($$anchor, $$slotProps) => {
+																			$.next();
+																			var text_2 = $.text();
+																			$.template_effect(() => $.set_text(text_2, $.get(spec).label));
+																			$.append($$anchor, text_2);
+																		},
+																		$$slots: { default: true }
+																	});
+																	Text($.sibling(node_10, 2), {
+																		role: "caption",
+																		muted: true,
+																		clamp: true,
+																		children: ($$anchor, $$slotProps) => {
+																			$.next();
+																			var text_3 = $.text();
+																			$.template_effect(() => $.set_text(text_3, $.get(spec).hint));
+																			$.append($$anchor, text_3);
+																		},
+																		$$slots: { default: true }
+																	});
+																	$.append($$anchor, fragment_18);
+																},
+																$$slots: { default: true }
+															});
+														};
+														var alternate_1 = ($$anchor) => {
+															var span = root_2$4();
+															var text_4 = $.only_child(span, true);
+															$.template_effect(() => $.set_text(text_4, $.get(spec).label));
+															$.append($$anchor, span);
+														};
+														$.if(node_9, ($$render) => {
+															if ($.get(spec).hint) $$render(consequent_3);
+															else $$render(alternate_1, -1);
+														});
+														var node_12 = $.sibling(node_9, 2);
+														var consequent_4 = ($$anchor) => {
+															Kbd($$anchor, {
+																bare: true,
+																children: ($$anchor, $$slotProps) => {
+																	$.next();
+																	var text_5 = $.text();
+																	$.template_effect(() => $.set_text(text_5, $.get(key)));
+																	$.append($$anchor, text_5);
+																},
+																$$slots: { default: true }
+															});
+														};
+														$.if(node_12, ($$render) => {
+															if ($.get(key)) $$render(consequent_4);
+														});
+														$.append($$anchor, fragment_16);
+													},
+													$$slots: { default: true }
+												});
 											}
+										};
+										$.if(node_4, ($$render) => {
+											if ($.get(spec).kind === "toggle") $$render(consequent_2);
+											else $$render(alternate_2, -1);
 										});
-									}
-								};
-								var alternate = ($$anchor) => {
-									{
-										let $0 = $.derived(() => read($.get(spec), "disabled"));
-										Button($$anchor, {
-											block: true,
-											get disabled() {
-												return $.get($0);
-											},
-											onclick: () => runAction($$props.actions, $.get(spec)),
-											children: ($$anchor, $$slotProps) => {
-												$.next();
-												var text = $.text();
-												$.template_effect(() => $.set_text(text, $.get(spec).label));
-												$.append($$anchor, text);
-											},
-											$$slots: { default: true }
-										});
-									}
-								};
-								$.if(node_4, ($$render) => {
-									if ($.get(spec).kind === "toggle") $$render(consequent);
-									else $$render(alternate, -1);
-								});
-								$.reset(div_4);
-								var node_5 = $.sibling(div_4, 2);
-								var consequent_1 = ($$anchor) => {
-									Kbd($$anchor, {
-										bare: true,
-										children: ($$anchor, $$slotProps) => {
-											$.next();
-											var text_1 = $.text();
-											$.template_effect(() => $.set_text(text_1, $.get(key)));
-											$.append($$anchor, text_1);
-										},
-										$$slots: { default: true }
+										$.append($$anchor, fragment_6);
 									});
-								};
-								$.if(node_5, ($$render) => {
-									if ($.get(key)) $$render(consequent_1);
-								});
-								$.reset(div_3);
-								var node_6 = $.sibling(div_3, 2);
-								var consequent_2 = ($$anchor) => {
-									Text($$anchor, {
-										role: "caption",
-										muted: true,
-										children: ($$anchor, $$slotProps) => {
-											$.next();
-											var text_2 = $.text();
-											$.template_effect(() => $.set_text(text_2, $.get(spec).hint));
-											$.append($$anchor, text_2);
-										},
-										$$slots: { default: true }
-									});
-								};
-								$.if(node_6, ($$render) => {
-									if ($.get(spec).hint) $$render(consequent_2);
-								});
-								$.reset(div_2);
-								$.template_effect(() => $.set_attribute(div_2, "data-action", $.get(spec).id));
-								$.append($$anchor, div_2);
+									$.append($$anchor, fragment_5);
+								},
+								$$slots: { default: true }
 							});
-							$.append($$anchor, fragment_3);
 						},
 						$$slots: { default: true }
 					});
@@ -12560,7 +12755,7 @@ function Actions($$anchor, $$props) {
 					$.template_effect(() => styles = $.set_style(div_1, "", styles, { "max-height": $.get(room) === null ? void 0 : `calc(${$.get(room)}px - var(--kata-gap-md) * ${reopen() ? 3 : 2} - var(--kata-border-width) * 2)` }));
 					$.append($$anchor, div_1);
 				};
-				var alternate_1 = ($$anchor) => {
+				var alternate_3 = ($$anchor) => {
 					Button($$anchor, {
 						variant: "ghost",
 						"aria-expanded": "false",
@@ -12569,18 +12764,18 @@ function Actions($$anchor, $$props) {
 						},
 						children: ($$anchor, $$slotProps) => {
 							$.next();
-							var text_3 = $.text();
-							$.template_effect(() => $.set_text(text_3, $$props.title));
-							$.append($$anchor, text_3);
+							var text_6 = $.text();
+							$.template_effect(() => $.set_text(text_6, $$props.title));
+							$.append($$anchor, text_6);
 						},
 						$$slots: { default: true }
 					});
 				};
 				$.if(node_1, ($$render) => {
-					if ($.get(open)) $$render(consequent_3);
-					else $$render(alternate_1, -1);
+					if ($.get(open)) $$render(consequent_5);
+					else $$render(alternate_3, -1);
 				});
-				$.append($$anchor, fragment_2);
+				$.append($$anchor, fragment_3);
 			},
 			$$slots: { default: true }
 		});
@@ -14986,7 +15181,7 @@ function Inspector($$anchor, $$props) {
 	/** The sections the application added */
 	/** Called by the close button; clears the selection when left out */
 	/** Whether it is in a sheet, whose width the panel takes */
-	const view = $.derived(() => follow($$props.draw, INSPECTOR_EVENTS, () => readView($$props.draw)));
+	const view = $.derived(() => follow$1($$props.draw, INSPECTOR_EVENTS, () => readView($$props.draw)));
 	const v = $.derived(() => $.get(view).get());
 	const m = $.derived(() => $$props.messages.get());
 	let tab = $.state(void 0);
@@ -15786,7 +15981,7 @@ function LayerPanel($$anchor, $$props) {
 	let features = $.prop($$props, "features", 3, true), datasets = $.prop($$props, "datasets", 3, true), add = $.prop($$props, "add", 3, true), reorder = $.prop($$props, "reorder", 3, true), basemaps = $.prop($$props, "basemaps", 3, null), basemapOpen = $.prop($$props, "basemapOpen", 3, false);
 	const m = $.derived(() => $$props.messages.get());
 	const FEATURE_LIMIT = 1e3;
-	const tree = $.derived(() => follow($$props.draw, [
+	const tree = $.derived(() => follow$1($$props.draw, [
 		"document.changed",
 		"hidden.changed",
 		"options.changed",
@@ -15798,7 +15993,7 @@ function LayerPanel($$anchor, $$props) {
 		limit: features() === true ? FEATURE_LIMIT : features() === false ? 0 : features(),
 		datasets: datasets()
 	})));
-	const datasetList = $.derived(() => follow($$props.draw, ["dataset.added", "dataset.removed"], () => datasets() ? $$props.draw.datasets.list() : []));
+	const datasetList = $.derived(() => follow$1($$props.draw, ["dataset.added", "dataset.removed"], () => datasets() ? $$props.draw.datasets.list() : []));
 	$.user_effect(() => {
 		const refresh = $.get(tree).refresh;
 		const offs = $.get(datasetList).get().map((dataset) => dataset.on("changed", ({ reason }) => {
@@ -15808,7 +16003,7 @@ function LayerPanel($$anchor, $$props) {
 			for (const off of offs) off();
 		};
 	});
-	const selection = $.derived(() => follow($$props.draw, ["selection.changed"], () => $$props.draw.selection.get()));
+	const selection = $.derived(() => follow$1($$props.draw, ["selection.changed"], () => $$props.draw.selection.get()));
 	const nodes = $.derived(() => $.get(tree).get());
 	const index = $.derived(() => indexNodes($.get(nodes)));
 	const selected = $.derived(() => selectedIds($.get(selection).get()));
@@ -16155,13 +16350,13 @@ var root_1$2 = $.from_html(`<div class="legend svelte-pswzrf" data-role="legend"
 function Legend($$anchor, $$props) {
 	$.push($$props, true);
 	const m = $.derived(() => $$props.messages.get());
-	const legend = $.derived(() => follow($$props.draw, [
+	const legend = $.derived(() => follow$1($$props.draw, [
 		"document.changed",
 		"dataset.added",
 		"dataset.removed",
 		"dataset.reordered"
 	], () => legendBlocks($$props.draw, $$props.messages.get())));
-	const datasetList = $.derived(() => follow($$props.draw, ["dataset.added", "dataset.removed"], () => $$props.draw.datasets.list()));
+	const datasetList = $.derived(() => follow$1($$props.draw, ["dataset.added", "dataset.removed"], () => $$props.draw.datasets.list()));
 	$.user_effect(() => {
 		const refresh = $.get(legend).refresh;
 		const offs = $.get(datasetList).get().map((dataset) => dataset.on("changed", ({ reason }) => {
@@ -16429,7 +16624,7 @@ function SnappingSettings($$anchor, $$props) {
 			word: "snapGuide"
 		}
 	];
-	const options = $.derived(() => follow($$props.draw, ["options.changed"], () => $$props.draw.options.get()));
+	const options = $.derived(() => follow$1($$props.draw, ["options.changed"], () => $$props.draw.options.get()));
 	const now = $.derived(() => $.get(options).get());
 	const snapping = $.derived(() => $.get(now).snapping ?? {});
 	const enabled = $.derived(() => $.get(snapping).enabled !== false);
@@ -16634,10 +16829,10 @@ function Toolbar($$anchor, $$props) {
 	/** Whether the delete button shows */
 	/** Whether the magnet of snapping shows */
 	/** Whether the tooltips show the keys (when the keyboard shortcuts are on) */
-	const mode = $.derived(() => follow($$props.draw, ["mode.changed"], () => $$props.draw.getMode()));
-	const selected = $.derived(() => follow($$props.draw, ["selection.changed"], () => $$props.draw.selection.get().ids.length));
-	const readOnly = $.derived(() => follow($$props.draw, ["readOnly.changed"], () => $$props.draw.isReadOnly()));
-	const snapOn = $.derived(() => follow($$props.draw, ["options.changed"], () => $$props.draw.options.get().snapping?.enabled !== false));
+	const mode = $.derived(() => follow$1($$props.draw, ["mode.changed"], () => $$props.draw.getMode()));
+	const selected = $.derived(() => follow$1($$props.draw, ["selection.changed"], () => $$props.draw.selection.get().ids.length));
+	const readOnly = $.derived(() => follow$1($$props.draw, ["readOnly.changed"], () => $$props.draw.isReadOnly()));
+	const snapOn = $.derived(() => follow$1($$props.draw, ["options.changed"], () => $$props.draw.options.get().snapping?.enabled !== false));
 	let settings = $.state(void 0);
 	const m = $.derived(() => $$props.messages.get());
 	const specs = $.derived(() => $$props.tools.get().map((entry) => toSpec(entry, $.get(m))));
@@ -16826,7 +17021,7 @@ function DrawUI($$anchor, $$props) {
 	};
 	let shortcuts = $.prop($$props, "shortcuts", 3, true), sideMode = $.prop($$props, "side", 3, "floating"), themeToggle = $.prop($$props, "themeToggle", 3, true), actionsOpen = $.prop($$props, "actionsOpen", 3, true);
 	const inspectorSettings = $.derived(() => $$props.inspector.get());
-	const selected = $.derived(() => follow($$props.draw, ["selection.changed"], () => $$props.draw.selection.get().ids.length > 0));
+	const selected = $.derived(() => follow$1($$props.draw, ["selection.changed"], () => $$props.draw.selection.get().ids.length > 0));
 	const choosable = $.derived(() => !!$$props.basemaps && $$props.basemaps.list.length >= 2);
 	let basemapOpen = $.state(false);
 	function openBasemaps() {
@@ -16867,10 +17062,11 @@ function DrawUI($$anchor, $$props) {
 			bottom: 0,
 			left: 0
 		};
+		const narrow = $.get(layout)?.width === "narrow";
 		$.get(bar);
 		if (!$$props.oninset) return;
 		const report = $$props.oninset;
-		tick().then(() => report(now));
+		tick().then(() => report(now, narrow));
 	});
 	const SUN_ICON = Sun;
 	const MOON_ICON = Moon;
@@ -17064,42 +17260,97 @@ function DrawUI($$anchor, $$props) {
 }
 //#endregion
 //#region src/controls.ts
+/** The class of maplibre-gl's compact attribution, and the one it has while it is open */
+var COMPACT = "maplibregl-compact";
+var COMPACT_SHOW = "maplibregl-compact-show";
 /**
 * Adds maplibre-gl's controls to a map: all four with `true` or `undefined`, none with `false`,
 * those not set to false with an object.
 *
 * maplibre-gl puts a control added to a bottom corner above those already there, so the controls
-* of the bottom right are added from the bottom: the zoom, the compass, then the globe.
+* of the bottom right are added from the bottom: the zoom, the compass, then the globe. The globe
+* and the compass come back the same way, above the zoom.
+*
+* While the map is narrow (`setNarrow`), the globe and the compass are removed, and the
+* attribution is folded to its (i) button: maplibre-gl builds its compact attribution open (until
+* the first drag), when it first fills, when the map's width brings the compact form back, and
+* when a page adds it again; each time, its open class is removed, as maplibre-gl's own fold on a
+* drag does. The (i) button opens it still. With `false`, nothing is added and the attribution is
+* left alone.
 */
 function mapControls(map, option) {
 	const want = option === false ? null : option === true || option === void 0 ? {} : option;
 	const added = [];
+	let wideOnly = [];
+	let narrow = false;
+	let destroyed = false;
 	const add = (control, position) => {
 		map.addControl(control, position);
 		added.push(control);
+		return control;
+	};
+	const remove = (control) => {
+		const at = added.indexOf(control);
+		if (at >= 0) added.splice(at, 1);
+		try {
+			map.removeControl(control);
+		} catch {}
+	};
+	const addWideOnly = () => {
+		if (!want) return;
+		if (want.compass !== false) wideOnly.push(add(new NavigationControl({
+			showZoom: false,
+			showCompass: true,
+			visualizePitch: true
+		}), "bottom-right"));
+		if (want.globe !== false) wideOnly.push(add(new GlobeControl(), "bottom-right"));
 	};
 	if (want) {
 		if (want.zoom !== false) add(new NavigationControl({
 			showZoom: true,
 			showCompass: false
 		}), "bottom-right");
-		if (want.compass !== false) add(new NavigationControl({
-			showZoom: false,
-			showCompass: true,
-			visualizePitch: true
-		}), "bottom-right");
-		if (want.globe !== false) add(new GlobeControl(), "bottom-right");
+		addWideOnly();
 		if (want.scale !== false) add(new ScaleControl(), "bottom-left");
 	}
-	let destroyed = false;
-	return { destroy() {
-		if (destroyed) return;
-		destroyed = true;
-		for (const control of added) try {
-			map.removeControl(control);
-		} catch {}
-		added.length = 0;
-	} };
+	const container = map.getContainer();
+	const watched = container.querySelector(":scope > .maplibregl-control-container") ?? container;
+	const isAttribution = (node) => node instanceof Element && node.matches(".maplibregl-ctrl-attrib");
+	const fold = (el) => {
+		if (narrow) el.classList.remove(COMPACT_SHOW);
+	};
+	/** maplibre-gl built it open: it was added, or it has just become compact */
+	const watcher = want && typeof MutationObserver !== "undefined" ? new MutationObserver((records) => {
+		if (!narrow) return;
+		for (const record of records) if (record.type === "childList") {
+			for (const node of record.addedNodes) if (isAttribution(node)) fold(node);
+		} else if (isAttribution(record.target) && record.target.classList.contains(COMPACT) && !(record.oldValue ?? "").split(/\s+/).includes(COMPACT)) fold(record.target);
+	}) : null;
+	watcher?.observe(watched, {
+		subtree: true,
+		childList: true,
+		attributes: true,
+		attributeFilter: ["class"],
+		attributeOldValue: true
+	});
+	return {
+		setNarrow(next) {
+			if (destroyed || !want || next === narrow) return;
+			narrow = next;
+			if (narrow) {
+				for (const control of wideOnly) remove(control);
+				wideOnly = [];
+				for (const el of watched.querySelectorAll(".maplibregl-ctrl-attrib")) fold(el);
+			} else addWideOnly();
+		},
+		destroy() {
+			if (destroyed) return;
+			destroyed = true;
+			watcher?.disconnect();
+			for (const control of [...added]) remove(control);
+			wideOnly = [];
+		}
+	};
 }
 /** The attribute on the map's container while the interface lifts its bottom corners */
 var LIFT_ATTRIBUTE = "data-mgd-ui-lift";
@@ -17126,7 +17377,8 @@ var upDown = (a, b) => a.top < b.bottom && b.top < a.bottom;
 *   while the right region covers the stage (the inset's right) and they are under it up and
 *   down: by the inset and gap-md
 * - --mgd-ui-lift-left also lifts the bottom left corner above the attribution's box while that
-*   box reaches the corner across
+*   box reaches the corner across, but on a narrow map: there the attribution is folded to its
+*   (i) button (mapControls), and the band the button opens is not lifted for
 *
 * The boxes are measured where maplibre-gl places them, without what this moved. The attribution
 * and the right region are followed with a ResizeObserver, as the toolbar and the corners are:
@@ -17144,6 +17396,7 @@ function cornerLift(container, root) {
 		bottom: 0,
 		left: 0
 	};
+	let narrow = false;
 	let now = {
 		left: 0,
 		right: 0,
@@ -17217,7 +17470,7 @@ function cornerLift(container, root) {
 			}
 		}
 		let liftLeft = reachesBar(left) ? band : 0;
-		const attrib = attribution()?.getBoundingClientRect();
+		const attrib = narrow ? void 0 : attribution()?.getBoundingClientRect();
 		if (left && attrib && attrib.width > 0 && attrib.height > 0) {
 			const a = moved(attrib, 0, now.right - liftRight);
 			const l = moved(left, 0, -liftLeft);
@@ -17263,9 +17516,10 @@ function cornerLift(container, root) {
 		for (const el of observed) observer.observe(el);
 	}
 	return {
-		update(next) {
+		update(next, nextNarrow) {
 			if (destroyed) return;
 			if (next) inset = { ...next };
+			if (nextNarrow !== void 0) narrow = nextNarrow;
 			follow();
 			apply();
 		},
@@ -17335,6 +17589,87 @@ function mapPadding(map) {
 	};
 }
 //#endregion
+//#region src/reveal.ts
+/**
+* How far to pan the map so that a box shows in the visible region: null when the box is entirely
+* inside the region, else the distance from the centre of the region to the centre of the box,
+* which the centre of the view moves by. The zoom is never changed, so a box larger than the
+* region is centred in it.
+*
+* @param bbox - The box of the selection on the map's container
+* @param visible - The visible region of the map's container
+*/
+function reveal(bbox, visible) {
+	if (bbox.left >= visible.left && bbox.right <= visible.right && bbox.top >= visible.top && bbox.bottom <= visible.bottom) return null;
+	return {
+		x: (bbox.left + bbox.right) / 2 - (visible.left + visible.right) / 2,
+		y: (bbox.top + bbox.bottom) / 2 - (visible.top + visible.bottom) / 2
+	};
+}
+/**
+* The visible region of the map's container: less the inset of the shell at each edge (the left
+* and the right regions, the sheets at the bottom), and above the toolbar's band and the
+* attribution's box, each taken from its top to the bottom of the map
+*
+* @param container - The map's container
+* @param root - The root element of the interface
+* @param inset - The inset the shell reported last
+*/
+function visibleRegion(container, root, inset) {
+	const box = container.getBoundingClientRect();
+	let bottom = box.height - inset.bottom;
+	const bands = [root.querySelector("[data-region=\"bottom\"] [data-role=\"drawbar\"]"), container.querySelector(":scope > .maplibregl-control-container .maplibregl-ctrl-attrib")];
+	for (const el of bands) {
+		const r = el?.getBoundingClientRect();
+		if (r && r.width > 0 && r.height > 0) bottom = Math.min(bottom, r.top - box.top);
+	}
+	return {
+		left: inset.left,
+		top: inset.top,
+		right: box.width - inset.right,
+		bottom
+	};
+}
+/** Calls `visit` with each position of a geometry */
+function eachPosition(geometry, visit) {
+	if (geometry.geometries) {
+		for (const part of geometry.geometries) eachPosition(part, visit);
+		return;
+	}
+	const walk = (value) => {
+		if (!Array.isArray(value)) return;
+		if (typeof value[0] === "number" && typeof value[1] === "number") {
+			visit(value[0], value[1]);
+			return;
+		}
+		for (const item of value) walk(item);
+	};
+	walk(geometry.coordinates);
+}
+/**
+* The box of geometries on the map's container, from the points `project` gives for their
+* positions; null for none
+*/
+function screenBox(geometries, project) {
+	let box = null;
+	for (const geometry of geometries) eachPosition(geometry, (lng, lat) => {
+		const p = project([lng, lat]);
+		if (!Number.isFinite(p.x) || !Number.isFinite(p.y)) return;
+		box = box ? {
+			left: Math.min(box.left, p.x),
+			top: Math.min(box.top, p.y),
+			right: Math.max(box.right, p.x),
+			bottom: Math.max(box.bottom, p.y)
+		} : {
+			left: p.x,
+			top: p.y,
+			right: p.x,
+			bottom: p.y
+		};
+	});
+	return box;
+}
+//#endregion
 //#region src/theme.ts
 /** The query of the system's preference that `auto` follows */
 var LIGHT_QUERY = "(prefers-color-scheme: light)";
@@ -17468,12 +17803,15 @@ function toolsHandle(tools, messages, actions) {
 * inspector on the right while something is selected. The map's padding follows the interface:
 * the room the left panel takes (beside the map or floating over it) at the left and the sheets
 * at the bottom, so that `fitBounds` and `easeTo` keep clear of them; `destroy()` gives the map
-* its padding back. The last section of the layer panel is the basemap, whose row opens the
+* its padding back. When the selection of drawn features changes, the map pans once (the zoom
+* stays) so that it shows clear of the panels, the sheets, the toolbar and the attribution,
+* unless it shows there already. The last section of the layer panel is the basemap, whose row opens the
 * basemaps of `options.basemaps` to choose from on the right, in the place of the inspector, when
 * there are two or more. A button at the top right switches between the
 * light and the dark look, and maplibre-gl's own controls go to the bottom corners of the map (the
 * globe, the compass and the zoom at the right, the scale at the left), which move out of the way
-* of the toolbar, the right panel and the attribution; `destroy()` removes them. The actions of
+* of the toolbar, the right panel and the attribution; a narrow map (below 48rem) shows no globe
+* and no compass, and its attribution folded to its (i) button; `destroy()` removes them. The actions of
 * the application (`options.actions`, `ui.actions`) are rows of a card at the bottom left, above
 * the scale and the attribution, each with its key.
 *
@@ -17514,6 +17852,7 @@ function createDrawUI(draw, options = {}) {
 	const controls = mapControls(map, options.mapControls);
 	const lift = cornerLift(map.getContainer(), root);
 	const padding = options.padding === false ? null : mapPadding(map);
+	const revealing = selectionReveal(draw, root);
 	const view = mount(DrawUI, {
 		target: root,
 		props: {
@@ -17525,9 +17864,11 @@ function createDrawUI(draw, options = {}) {
 			shortcuts: options.shortcuts !== false,
 			inspector,
 			sections,
-			oninset: (inset) => {
+			oninset: (inset, narrow) => {
 				padding?.update(inset);
-				lift.update(inset);
+				controls.setNarrow(narrow);
+				lift.update(inset, narrow);
+				revealing.inset(inset);
 			},
 			side: options.side,
 			light,
@@ -17623,6 +17964,7 @@ function createDrawUI(draw, options = {}) {
 			controlContainer?.removeAttribute("data-color-mode");
 			basemaps.destroy();
 			padding?.destroy();
+			revealing.destroy();
 			lift.destroy();
 			controls.destroy();
 			unmount(view);
@@ -17631,6 +17973,84 @@ function createDrawUI(draw, options = {}) {
 	};
 }
 /**
+* Reveals the selection of drawn features each time it changes (reveal.ts), once the shell's
+* insets have settled for it: the right region opens with a selection, and the shell measures it
+* in a ResizeObserver delivery and reports the inset in the next frame. So the selection is
+* revealed in the task after the next inset, or, when none comes within two frames (the regions
+* did not change), in the task after those. The map pans with `easeTo`, the centre only.
+*
+* Every call to the map is guarded: once the map is removed, or its container leaves the page,
+* nothing is done.
+*/
+function selectionReveal(draw, root) {
+	const map = draw.getMap();
+	let inset = {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	};
+	let pending = false;
+	let destroyed = false;
+	let frame = 0;
+	let timer;
+	const cancel = () => {
+		if (frame) cancelAnimationFrame(frame);
+		frame = 0;
+		if (timer !== void 0) clearTimeout(timer);
+		timer = void 0;
+	};
+	/** Reveals in the next task */
+	const soon = () => {
+		cancel();
+		timer = setTimeout(run, 0);
+	};
+	function run() {
+		cancel();
+		if (destroyed || !pending) return;
+		pending = false;
+		try {
+			const container = map.getContainer();
+			if (!container.isConnected) return;
+			const selection = draw.selection.get();
+			if (selection.type !== "feature") return;
+			const box = screenBox(selection.ids.flatMap((id) => {
+				const feature = draw.features.get(id);
+				return feature ? [feature.geometry] : [];
+			}), (lngLat) => map.project(lngLat));
+			if (!box) return;
+			const by = reveal(box, visibleRegion(container, root, inset));
+			if (!by) return;
+			const centre = map.project(map.getCenter());
+			map.easeTo({ center: map.unproject([centre.x + by.x, centre.y + by.y]) });
+		} catch {}
+	}
+	const off = draw.on("selection.changed", ({ selection }) => {
+		cancel();
+		pending = selection.type === "feature" && selection.ids.length > 0;
+		if (!pending) return;
+		frame = requestAnimationFrame(() => {
+			frame = requestAnimationFrame(() => {
+				frame = 0;
+				soon();
+			});
+		});
+	});
+	return {
+		inset(next) {
+			if (destroyed) return;
+			inset = { ...next };
+			if (pending) soon();
+		},
+		destroy() {
+			if (destroyed) return;
+			destroyed = true;
+			cancel();
+			off();
+		}
+	};
+}
+/**
 * Puts the toolbar alone in an element: the tools, the delete button and the magnet that opens
 * the snapping settings, without the keyboard shortcuts. The bar floats at the bottom centre of `target`, which must be
 * positioned (the map's container, or a positioned box over the map).
@@ -17705,12 +18125,14 @@ function leftSettings(options) {
 }
 /**
 * Puts a component alone in an element, in a root element of the interface; `cleanup` runs once
-* when it is removed
+* when it is removed. The root paints the panel's surface and declares it (data-surface), as
+* kata's Panel does around these components in the left region
 */
 function mountAlone({ target, locale, theme: themeOption }, component, props, role, cleanup) {
 	const themeName = checkTheme(themeOption);
 	const messages = new Box(resolveMessages(locale));
 	const root = createRoot(target, false);
+	root.dataset.surface = "";
 	const theme = themeControl(root, themeName);
 	applyLocale(root, messages, locale ?? "en");
 	const view = mount(component, {