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

package/CHANGELOG.md

@@ -7,6 +7,18 @@ follows semantic versioning.
 
 ## [Unreleased]
 
+## [1.2.1] - 2026-10-02
+
+### Fixed in 1.2.1
+
+- In a sheet the inspector passes the sheet's height to its panel, so
+  the content scrolls and the foot stays in view (#14).
+- The delete button of the toolbar is off while the draw is read-only,
+  as the Delete of the inspector is (#19).
+- The bottom corners and the actions card write what their observers
+  measure in the next frame, so WebKit reports no ResizeObserver loop
+  (#21).
+
 ## [1.2.0] - 2026-10-02
 
 The narrow screen and the stage, from the visual review: the map's

package/dist/controls.d.ts

@@ -47,6 +47,8 @@ export interface CornerLift {
  *   box reaches the corner across
  *
  * 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.
+ * and the right region are followed with a ResizeObserver, as the toolbar and the corners are:
+ * the boxes are read in the observer's delivery and the custom properties are written in the next
+ * frame, so that what they move is not measured again in the same delivery.
  */
 export declare function cornerLift(container: HTMLElement, root: HTMLElement): CornerLift;

package/dist/index.js

@@ -1892,6 +1892,17 @@ function Dropdown($$anchor, $$props) {
 		$$props.onOpenChange?.($.get(open));
 	});
 	let anchor = $.state(void 0);
+	let told = false;
+	$.user_effect(() => {
+		const el = $.get(anchor);
+		const now = $.get(open);
+		if (!el || now === told) return;
+		told = now;
+		el.dispatchEvent(new CustomEvent("kata-menu-toggle", {
+			bubbles: true,
+			detail: { open: now }
+		}));
+	});
 	let panelEl = $.state(void 0);
 	let placed = $.state(false);
 	let pos = $.state($.proxy({
@@ -9458,6 +9469,22 @@ function TreeRow($$anchor, $$props) {
 			if (frame) cancelAnimationFrame(frame);
 		};
 	});
+	let rowEl = $.state(void 0);
+	let menuOpen = $.state(false);
+	$.user_effect(() => {
+		const el = $.get(rowEl);
+		if (!el) return;
+		const from = /* @__PURE__ */ new Set();
+		const onMenuToggle = (e) => {
+			const target = e.target;
+			if (!target) return;
+			if (e.detail?.open) from.add(target);
+			else from.delete(target);
+			$.set(menuOpen, from.size > 0);
+		};
+		el.addEventListener("kata-menu-toggle", onMenuToggle);
+		return () => el.removeEventListener("kata-menu-toggle", onMenuToggle);
+	});
 	function toggle() {
 		expanded(!expanded());
 		$$props.ontoggle?.(expanded());
@@ -9480,6 +9507,7 @@ function TreeRow($$anchor, $$props) {
 	$.attribute_effect(div, () => ({
 		class: "tree-row",
 		"data-dim": hidden() || dimmed() || dragging() ? "" : void 0,
+		"data-open": $.get(menuOpen) ? "" : void 0,
 		role: "treeitem",
 		"aria-selected": sel(),
 		"aria-expanded": expandable() ? expanded() : void 0,
@@ -9592,6 +9620,7 @@ function TreeRow($$anchor, $$props) {
 		});
 	}
 	$.reset(div);
+	$.bind_this(div, ($$value) => $.set(rowEl, $$value), () => $.get(rowEl));
 	$.append($$anchor, div);
 	$.pop();
 }
@@ -10204,9 +10233,11 @@ function Sheet($$anchor, $$props) {
 		full: 1
 	};
 	const MIN_DRAG = 48;
+	const MIN_MOVE = 4;
 	let el = $.state(void 0);
 	let dragH = $.state(null);
 	let dragging = $.state(false);
+	let dragged = false;
 	let startY = 0;
 	let startH = 0;
 	let parentH = 0;
@@ -10216,8 +10247,12 @@ function Sheet($$anchor, $$props) {
 		stage(next);
 		$$props.onstage?.(next);
 	}
-	function cycle() {
+	function cycle(e) {
 		if ($.get(dragging)) return;
+		if (dragged && e.detail > 0) {
+			dragged = false;
+			return;
+		}
 		go(stages()[$.get(index) >= stages().length - 1 ? 0 : $.get(index) + 1]);
 	}
 	function down(e) {
@@ -10227,6 +10262,7 @@ function Sheet($$anchor, $$props) {
 		startH = $.get(el).getBoundingClientRect().height;
 		$.set(dragH, startH, true);
 		$.set(dragging, true);
+		dragged = false;
 		e.currentTarget.setPointerCapture?.(e.pointerId);
 	}
 	function move(e) {
@@ -10234,18 +10270,22 @@ function Sheet($$anchor, $$props) {
 		const h = startH + (startY - e.clientY);
 		$.set(dragH, Math.max(MIN_DRAG, Math.min(parentH * .94, h)), true);
 	}
-	function up() {
+	function up(e) {
 		if (!$.get(dragging)) return;
 		$.set(dragging, false);
-		const frac = ($.get(dragH) ?? 0) / (parentH || 1);
+		const h = $.get(dragH) ?? 0;
 		$.set(dragH, null);
+		if (Math.abs(e.clientY - startY) < MIN_MOVE) return;
+		dragged = true;
+		const frac = h / (parentH || 1);
 		if (closable() && frac < FRAC[stages()[0]] * .55) {
 			$$props.onclose?.();
 			return;
 		}
-		let best = stages()[0];
+		const near = stages().filter((_, i) => h > startH ? i >= $.get(index) : h < startH ? i <= $.get(index) : true);
+		let best = near[0];
 		let bestD = Number.POSITIVE_INFINITY;
-		for (const s of stages()) {
+		for (const s of near) {
 			const d = Math.abs(FRAC[s] - frac);
 			if (d < bestD) {
 				bestD = d;
@@ -10566,7 +10606,7 @@ function Section($$anchor, $$props) {
 }
 //#endregion
 //#region ../node_modules/@sakuzu/kata/dist/svelte/components/Stat.svelte
-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>`);
+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>`);
 function Stat($$anchor, $$props) {
 	var div = root$18();
 	var span = $.child(div);
@@ -12290,10 +12330,12 @@ function Actions($$anchor, $$props) {
 	const attribution = () => $$props.corner?.querySelector(":scope > .maplibregl-control-container > .maplibregl-ctrl-bottom-right > .maplibregl-ctrl-attrib") ?? null;
 	const toolbar = (root) => root.querySelector("[data-region=\"bottom\"] [data-role=\"drawbar\"]");
 	const reopenButton = (root) => root.querySelector(":scope > [data-role=\"reopen\"] > [data-role=\"floating\"]");
-	function place() {
+	/** Where the card goes, measured now: the room it reserves, its height above the bottom, and
+	* the room above it; null while it is not on the page */
+	function measure() {
 		const root = $.get(card)?.parentElement;
 		const el = floating();
-		if (!root || !el) return;
+		if (!root || !el) return null;
 		const box = root.getBoundingClientRect();
 		const r = el.getBoundingClientRect();
 		const scale = bottomLeft()?.getBoundingClientRect();
@@ -12304,11 +12346,41 @@ function Actions($$anchor, $$props) {
 		if (b && b.width > 0 && b.height > 0 && r.right > b.left && r.left < b.right) next = Math.max(next, box.bottom - b.top);
 		next = Math.max(0, Math.round(next));
 		const reserve = `${Math.max(0, Math.round(r.height + (box.bottom - r.bottom) + (next - $.get(bottom))))}px`;
-		if (root.style.getPropertyValue(RESERVE) !== reserve) root.style.setProperty(RESERVE, reserve);
-		$.set(bottom, next, true);
 		const button = reopen() ? reopenButton(root)?.getBoundingClientRect() : void 0;
 		const above = button && button.height > 0 ? button.height : 0;
-		$.set(room, Math.max(0, Math.round(box.height - next - above)), true);
+		return {
+			root,
+			reserve,
+			bottom: next,
+			room: Math.max(0, Math.round(box.height - next - above))
+		};
+	}
+	/** Writes a place measured before */
+	function write(at) {
+		const { root, reserve } = at;
+		if (root.style.getPropertyValue(RESERVE) !== reserve) root.style.setProperty(RESERVE, reserve);
+		$.set(bottom, at.bottom, true);
+		$.set(room, at.room, true);
+	}
+	let frame = 0;
+	/** Places the card now */
+	function place() {
+		if (frame) cancelAnimationFrame(frame);
+		frame = 0;
+		const at = measure();
+		if (at) write(at);
+	}
+	/**
+	* An observer's delivery: measures now and writes in the next frame, so that what the writes
+	* move is not measured again in the same delivery
+	*/
+	function placeLater() {
+		const at = measure();
+		if (frame) cancelAnimationFrame(frame);
+		frame = at ? requestAnimationFrame(() => {
+			frame = 0;
+			write(at);
+		}) : 0;
 	}
 	$.user_effect(() => {
 		const el = $.get(card) && floating();
@@ -12322,7 +12394,7 @@ function Actions($$anchor, $$props) {
 			place();
 			return () => root.style.removeProperty(RESERVE);
 		}
-		const observer = new ResizeObserver(() => place());
+		const observer = new ResizeObserver(() => placeLater());
 		let bar = null;
 		const watch = () => {
 			bar = toolbar(root);
@@ -12340,19 +12412,21 @@ function Actions($$anchor, $$props) {
 		const mutations = typeof MutationObserver === "undefined" || !shell ? null : new MutationObserver(() => {
 			if (toolbar(root) === bar) return;
 			watch();
-			place();
+			placeLater();
 		});
 		mutations?.observe(shell, {
 			childList: true,
 			subtree: true
 		});
-		const moves = typeof MutationObserver === "undefined" || !$$props.corner ? null : new MutationObserver(() => place());
+		const moves = typeof MutationObserver === "undefined" || !$$props.corner ? null : new MutationObserver(() => placeLater());
 		if ($$props.corner) moves?.observe($$props.corner, {
 			attributes: true,
 			attributeFilter: ["style"]
 		});
 		place();
 		return () => {
+			if (frame) cancelAnimationFrame(frame);
+			frame = 0;
 			observer.disconnect();
 			mutations?.disconnect();
 			moves?.disconnect();
@@ -16562,6 +16636,7 @@ function Toolbar($$anchor, $$props) {
 	/** 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));
 	let settings = $.state(void 0);
 	const m = $.derived(() => $$props.messages.get());
@@ -16577,7 +16652,7 @@ function Toolbar($$anchor, $$props) {
 		kbd: keys() ? formatShortcut("delete") : void 0,
 		group: DELETE_ID,
 		tone: "danger",
-		disabled: $.get(selected).get() === 0
+		disabled: $.get(selected).get() === 0 || $.get(readOnly).get()
 	}] : []]);
 	const toggles = $.derived(() => snapping() ? [{
 		id: SNAPPING_ID,
@@ -17054,11 +17129,14 @@ var upDown = (a, b) => a.top < b.bottom && b.top < a.bottom;
 *   box reaches the corner across
 *
 * 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.
+* and the right region are followed with a ResizeObserver, as the toolbar and the corners are:
+* the boxes are read in the observer's delivery and the custom properties are written in the next
+* frame, so that what they move is not measured again in the same delivery.
 */
 function cornerLift(container, root) {
 	let destroyed = false;
 	let observer;
+	let frame = 0;
 	let observed = [];
 	let inset = {
 		top: 0,
@@ -17101,12 +17179,13 @@ function cornerLift(container, root) {
 		container.style.setProperty("--mgd-ui-lift-right", `${right}px`);
 		container.style.setProperty("--mgd-ui-shift-right", `${shift}px`);
 	}
-	function apply() {
-		if (destroyed) return;
-		if (!container.isConnected) {
-			set(0, 0, 0);
-			return;
-		}
+	/** What to apply, measured now: the lift of each corner and the shift of the right controls */
+	function measure() {
+		if (!container.isConnected) return {
+			left: 0,
+			right: 0,
+			shift: 0
+		};
 		const box = container.getBoundingClientRect();
 		const place = (side) => {
 			const el = corner(side);
@@ -17144,7 +17223,28 @@ function cornerLift(container, root) {
 			const l = moved(left, 0, -liftLeft);
 			if (across(a, l) && upDown(a, l)) liftLeft = Math.round(left.bottom - a.top);
 		}
-		set(Math.max(0, liftLeft), liftRight, shift);
+		return {
+			left: Math.max(0, liftLeft),
+			right: liftRight,
+			shift
+		};
+	}
+	function apply() {
+		if (destroyed) return;
+		if (frame) cancelAnimationFrame(frame);
+		frame = 0;
+		const next = measure();
+		set(next.left, next.right, next.shift);
+	}
+	/** The observer's delivery: measures now, and writes in the next frame */
+	function delivered() {
+		if (destroyed) return;
+		const next = measure();
+		if (frame) cancelAnimationFrame(frame);
+		frame = requestAnimationFrame(() => {
+			frame = 0;
+			if (!destroyed) set(next.left, next.right, next.shift);
+		});
 	}
 	function follow() {
 		const next = [
@@ -17159,7 +17259,7 @@ function cornerLift(container, root) {
 		observer?.disconnect();
 		observed = next;
 		if (typeof ResizeObserver === "undefined") return;
-		observer ??= new ResizeObserver(apply);
+		observer ??= new ResizeObserver(delivered);
 		for (const el of observed) observer.observe(el);
 	}
 	return {
@@ -17172,6 +17272,8 @@ function cornerLift(container, root) {
 		destroy() {
 			if (destroyed) return;
 			destroyed = true;
+			if (frame) cancelAnimationFrame(frame);
+			frame = 0;
 			observer?.disconnect();
 			observer = void 0;
 			observed = [];