@daydreamui/grid-editor 0.0.0-stage → 0.4.0

package/dist/index.js

@@ -0,0 +1,1493 @@
+import { className, createComponent, delegateEvents, effect, insert, ref, setAttribute, setStyleProperty, template } from "@solidjs/web";
+import { For, Show, createEffect, createMemo, createSignal, onSettled, untrack } from "solid-js";
+var leading = (band, reversed) => reversed ? band.end : band.start;
+var trailing = (band, reversed) => reversed ? band.start : band.end;
+function trackEdges(axis) {
+	const edges = [];
+	for (const band of axis.bands) edges.push(band.start, band.end);
+	edges.sort((a, b) => a - b);
+	return edges.filter((edge, i) => i === 0 || edge - edges[i - 1] > 1e-6);
+}
+function lineAnchors(axis) {
+	const { bands, reversed } = axis;
+	const anchors = [];
+	for (const [i, band] of bands.entries()) {
+		const prev = bands[i - 1];
+		anchors.push(prev === void 0 ? leading(band, reversed) : (trailing(prev, reversed) + leading(band, reversed)) / 2);
+	}
+	const last = bands[bands.length - 1];
+	if (last !== void 0) anchors.push(trailing(last, reversed));
+	return anchors;
+}
+function gapsOf(axis) {
+	const sorted = [...axis.bands].sort((a, b) => a.start - b.start);
+	const gaps = [];
+	for (const [i, band] of sorted.entries()) {
+		const prev = sorted[i - 1];
+		if (prev !== void 0 && band.start - prev.end > 1e-6) gaps.push({
+			start: prev.end,
+			end: band.start
+		});
+	}
+	return gaps;
+}
+function trackSpan(axis) {
+	if (axis.bands.length === 0) return null;
+	return {
+		start: Math.min(...axis.bands.map((band) => band.start)),
+		end: Math.max(...axis.bands.map((band) => band.end))
+	};
+}
+function parseTrackSizes(value) {
+	if (value === "none" || value === "") return [];
+	const sizes = [];
+	for (const token of value.replace(/\[[^\]]*\]/g, " ").trim().split(/\s+/)) {
+		if (token === "") continue;
+		const px = token.endsWith("px") ? Number.parseFloat(token) : NaN;
+		if (Number.isNaN(px)) return null;
+		sizes.push(px);
+	}
+	return sizes;
+}
+function parsePx(value) {
+	if (value === "normal") return 0;
+	if (!value.endsWith("px")) return null;
+	const px = Number.parseFloat(value);
+	return Number.isNaN(px) ? null : px;
+}
+function parseGap(value, contentSize) {
+	if (value.endsWith("%")) {
+		const pct = Number.parseFloat(value);
+		return Number.isNaN(pct) ? null : pct / 100 * contentSize;
+	}
+	return parsePx(value);
+}
+function distribute(keyword, free, count, options = {}) {
+	const none = {
+		offset: 0,
+		between: 0
+	};
+	if (count === 0) return none;
+	const safe = /^safe\s/.test(keyword);
+	let word = keyword.replace(/^(safe|unsafe)\s+/, "");
+	if (word === "left") word = options.rtl === true ? "end" : "start";
+	else if (word === "right") word = options.rtl === true ? "start" : "end";
+	const held = (offset) => ({
+		offset: safe ? Math.max(0, offset) : offset,
+		between: 0
+	});
+	switch (word) {
+		case "center": return held(free / 2);
+		case "end":
+		case "flex-end": return held(free);
+		case "space-between": return free > 0 && count > 1 ? {
+			offset: 0,
+			between: free / (count - 1)
+		} : none;
+		case "space-around": return free > 0 ? {
+			offset: free / count / 2,
+			between: free / count
+		} : none;
+		case "space-evenly": return free > 0 ? {
+			offset: free / (count + 1),
+			between: free / (count + 1)
+		} : none;
+		default: return none;
+	}
+}
+function layOutBands(sizes, gap, origin, zoom, placement = {
+	offset: 0,
+	between: 0
+}, reversed = false, extent = 0) {
+	const bands = [];
+	let pos = placement.offset;
+	for (const size of sizes) {
+		if (bands.length > 0) pos += gap + placement.between;
+		const start = pos;
+		const end = pos + size;
+		bands.push(reversed ? {
+			start: origin + (extent - end) * zoom,
+			end: origin + (extent - start) * zoom
+		} : {
+			start: origin + start * zoom,
+			end: origin + end * zoom
+		});
+		pos = end;
+	}
+	return bands;
+}
+function readGridGeometry(dd, elementId) {
+	const rect = dd.geometry.rect(elementId);
+	const node = dd.geometry.node(elementId);
+	if (rect === null || node === void 0) return null;
+	const style = getComputedStyle(node);
+	if (style.display !== "grid" && style.display !== "inline-grid") return null;
+	if (style.writingMode !== "horizontal-tb") return null;
+	const { zoom } = dd.geometry.camera();
+	const colSizes = parseTrackSizes(style.gridTemplateColumns);
+	const rowSizes = parseTrackSizes(style.gridTemplateRows);
+	const edges = [
+		style.borderLeftWidth,
+		style.borderTopWidth,
+		style.paddingLeft,
+		style.paddingTop,
+		style.borderRightWidth,
+		style.borderBottomWidth,
+		style.paddingRight,
+		style.paddingBottom
+	].map(parsePx);
+	if (colSizes === null || rowSizes === null || edges.some((e) => e === null)) return null;
+	const [bl, bt, pl, pt, br, bb, pr, pb] = edges;
+	const contentWidth = rect.width / zoom - (bl + br + pl + pr);
+	const contentHeight = rect.height / zoom - (bt + bb + pt + pb);
+	const colGap = parseGap(style.columnGap, contentWidth);
+	const rowGap = parseGap(style.rowGap, contentHeight);
+	if (colGap === null || rowGap === null) return null;
+	const contentX = rect.x + (bl + pl - node.scrollLeft) * zoom;
+	const contentY = rect.y + (bt + pt - node.scrollTop) * zoom;
+	const used = (sizes, gap) => sizes.reduce((a, v) => a + v, 0) + gap * Math.max(0, sizes.length - 1);
+	const cols = distribute(style.justifyContent, contentWidth - used(colSizes, colGap), colSizes.length, { rtl: style.direction === "rtl" });
+	const rows = distribute(style.alignContent, contentHeight - used(rowSizes, rowGap), rowSizes.length, {});
+	const rtl = style.direction === "rtl";
+	return {
+		cols: {
+			sizes: colSizes,
+			gap: colGap,
+			bands: layOutBands(colSizes, colGap, contentX, zoom, cols, rtl, contentWidth),
+			reversed: rtl
+		},
+		rows: {
+			sizes: rowSizes,
+			gap: rowGap,
+			bands: layOutBands(rowSizes, rowGap, contentY, zoom, rows),
+			reversed: false
+		},
+		rect,
+		zoom
+	};
+}
+function lineNumber(value, explicit) {
+	const match = /^(-?\d+)$/.exec(value.trim());
+	if (match === null) return null;
+	const n = Number(match[1]);
+	return n < 0 ? explicit + 2 + n : n;
+}
+function gridItems(node) {
+	const items = [];
+	for (const child of node.children) {
+		const style = getComputedStyle(child);
+		if (style.display === "none") continue;
+		if (style.display === "contents") items.push(...gridItems(child));
+		else if (style.position !== "absolute" && style.position !== "fixed") items.push(child);
+	}
+	return items;
+}
+function startsBeforeFirst(node, axis, explicit) {
+	const [startProperty, endProperty] = axis === "cols" ? ["grid-column-start", "grid-column-end"] : ["grid-row-start", "grid-row-end"];
+	for (const child of gridItems(node)) {
+		const style = getComputedStyle(child);
+		const startText = style.getPropertyValue(startProperty).trim();
+		const endText = style.getPropertyValue(endProperty).trim();
+		const start = lineNumber(startText, explicit);
+		const end = lineNumber(endText, explicit);
+		const span = /^span\s+(\d+)$/.exec(startText);
+		let first = null;
+		if (start !== null) first = end === null ? start : Math.min(start, end);
+		else if (end !== null) first = end - (span === null ? 1 : Number(span[1]));
+		if (first !== null && first < 1) return true;
+	}
+	return false;
+}
+function selectedGrid(dd, selectedId) {
+	const version = dd.geometry.version();
+	const cached = reads.get(dd);
+	if (cached?.version === version && cached.selectedId === selectedId) return cached.grid;
+	const grid = read(dd, selectedId);
+	reads.set(dd, {
+		version,
+		selectedId,
+		grid
+	});
+	return grid;
+}
+var reads = new WeakMap();
+function read(dd, selectedId) {
+	const found = (gridId) => {
+		const geometry = readGridGeometry(dd, gridId);
+		return geometry === null ? null : {
+			gridId,
+			geometry
+		};
+	};
+	const own = found(selectedId);
+	if (own !== null) return own;
+	const parent = dd.pageElement(selectedId)?.parentId ?? null;
+	return parent === null ? null : found(parent);
+}
+var classPrefix = (pluginId) => pluginId.replace(/[^A-Za-z0-9_-]/g, "-");
+var guidesCss = (p) => `
+.${p}-guides {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.${p}-line {
+  stroke: color-mix(in srgb, var(--dream-app-accent, #4c9aff) 55%, transparent);
+  stroke-width: 1;
+  stroke-dasharray: 4 3;
+}
+
+.${p}-gap-band {
+  fill: url(#${p}-gap-hatch);
+}
+
+.${p}-hatch-line {
+  stroke: color-mix(in srgb, var(--dream-app-accent, #4c9aff) 28%, transparent);
+  stroke-width: 1;
+  fill: none;
+}
+
+.${p}-badge {
+  fill: color-mix(in srgb, var(--dream-app-raised, #172233) 85%, transparent);
+  stroke: color-mix(in srgb, var(--dream-app-accent, #4c9aff) 45%, transparent);
+  stroke-width: 1;
+}
+
+.${p}-badge-text {
+  fill: var(--dream-app-accent, #a8ccff);
+  font-family: var(--dream-app-mono, monospace);
+  font-size: 9px;
+  text-anchor: middle;
+  dominant-baseline: central;
+}
+`;
+var handlesCss = (p) => `
+.${p}-layer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 0;
+  overflow: visible;
+}
+
+.${p}-handle {
+  position: absolute;
+  box-sizing: border-box;
+  background: color-mix(in srgb, var(--dream-app-accent, #4c9aff) 8%, transparent);
+  transition: background 120ms ease, opacity 120ms ease;
+}
+
+.${p}-handle:hover,
+.${p}-layer[data-dragging] .${p}-handle[data-hot] {
+  background: color-mix(in srgb, var(--dream-app-accent, #4c9aff) 24%, transparent);
+}
+
+.${p}-layer[data-dragging] .${p}-handle:not([data-hot]) {
+  background: transparent;
+}
+
+.${p}-layer[data-dragging] .${p}-handle:not([data-active]):not([data-hot]) {
+  pointer-events: none;
+}
+
+.${p}-handle[data-edge] {
+  opacity: 0;
+}
+
+.${p}-handle[data-edge]:hover,
+.${p}-layer[data-dragging] .${p}-handle[data-edge][data-hot] {
+  opacity: 1;
+}
+
+.${p}-handle-cols {
+  cursor: col-resize;
+}
+
+.${p}-handle-rows {
+  cursor: row-resize;
+}
+
+.${p}-note {
+  position: absolute;
+  padding: 2px 6px;
+  font-family: var(--dream-app-mono, monospace);
+  font-size: 10px;
+  line-height: 14px;
+  white-space: nowrap;
+  color: var(--dream-app-accent, #a8ccff);
+  background: color-mix(in srgb, var(--dream-app-raised, #172233) 92%, transparent);
+  border: 1px solid color-mix(in srgb, var(--dream-app-accent, #4c9aff) 45%, transparent);
+  border-radius: 4px;
+  pointer-events: none;
+}
+`;
+var _tmpl$$1 = template(`<svg><g><rect height=14 rx=7></rect><text></svg>`, 2);
+var _tmpl$2$1 = template(`<svg aria-hidden=true>`);
+var _tmpl$3 = template(`<svg><g><defs><pattern patternUnits=userSpaceOnUse width=6 height=6><path d="M 0 6 L 6 0"></path><path d="M -1.5 1.5 L 1.5 -1.5"></path><path d="M 4.5 7.5 L 7.5 4.5"></path></pattern></defs><!><!><!><!><!><!></svg>`, 2);
+var _tmpl$4 = template(`<svg><rect></svg>`, 2);
+var _tmpl$5 = template(`<svg><line></svg>`, 2);
+var LINE_EXTENSION = 12;
+var BADGE_OFFSET = 14;
+function Badge(props) {
+	const label = () => String(props.line);
+	const width = () => 8 + label().length * 6;
+	var _el$ = _tmpl$$1();
+	var _el$2 = _el$.firstChild;
+	var _el$3 = _el$2.nextSibling;
+	insert(_el$3, label);
+	effect(() => {
+		return {
+			e: `${props.prefix}-badge`,
+			t: props.x - width() / 2,
+			a: props.y - 7,
+			o: width(),
+			i: `${props.prefix}-badge-text`,
+			n: props.x,
+			s: props.y
+		};
+	}, ({ e, t, a, o, i, n, s }, _p$) => {
+		className(_el$2, e, _p$?.e);
+		t !== _p$?.t && setAttribute(_el$2, "x", t);
+		a !== _p$?.a && setAttribute(_el$2, "y", a);
+		o !== _p$?.o && setAttribute(_el$2, "width", o);
+		className(_el$3, i, _p$?.i);
+		n !== _p$?.n && setAttribute(_el$3, "x", n);
+		s !== _p$?.s && setAttribute(_el$3, "y", s);
+	});
+	return _el$;
+}
+function createGridOverlay(dd) {
+	const p = classPrefix(dd.plugin.id);
+	const [geometry, setGeometry] = createSignal(null);
+	createEffect(() => {
+		dd.geometry.version();
+		return dd.selection();
+	}, (selectedId) => {
+		setGeometry(selectedId === null ? null : untrack(() => selectedGrid(dd, selectedId)?.geometry ?? null));
+	});
+	var _el$4 = _tmpl$2$1();
+	insert(_el$4, createComponent(Show, {
+		get when() {
+			return geometry();
+		},
+		children: (g) => {
+			const rect = () => g().rect;
+			const rowSpan = () => trackSpan(g().rows);
+			const colSpan = () => trackSpan(g().cols);
+			var _el$5 = _tmpl$3();
+			var _el$6 = _el$5.firstChild;
+			var _el$7 = _el$6.firstChild;
+			var _el$8 = _el$7.firstChild;
+			var _el$9 = _el$8.nextSibling;
+			var _el$10 = _el$9.nextSibling;
+			var _el$11 = _el$6.nextSibling;
+			var _el$12 = _el$11.nextSibling;
+			var _el$13 = _el$12.nextSibling;
+			var _el$14 = _el$13.nextSibling;
+			var _el$15 = _el$14.nextSibling;
+			var _el$16 = _el$15.nextSibling;
+			setAttribute(_el$7, "id", `${p}-gap-hatch`);
+			insert(_el$5, createComponent(Show, {
+				get when() {
+					return rowSpan();
+				},
+				children: (span) => createComponent(For, {
+					get each() {
+						return gapsOf(g().cols);
+					},
+					children: (gap) => (() => {
+						var _el$17 = _tmpl$4();
+						effect(() => {
+							return {
+								e: `${p}-gap-band`,
+								t: gap.start,
+								a: span().start,
+								o: gap.end - gap.start,
+								i: span().end - span().start
+							};
+						}, ({ e, t, a, o, i }, _p$) => {
+							className(_el$17, e, _p$?.e);
+							t !== _p$?.t && setAttribute(_el$17, "x", t);
+							a !== _p$?.a && setAttribute(_el$17, "y", a);
+							o !== _p$?.o && setAttribute(_el$17, "width", o);
+							i !== _p$?.i && setAttribute(_el$17, "height", i);
+						});
+						return _el$17;
+					})()
+				})
+			}), _el$11);
+			insert(_el$5, createComponent(Show, {
+				get when() {
+					return colSpan();
+				},
+				children: (span) => createComponent(For, {
+					get each() {
+						return gapsOf(g().rows);
+					},
+					children: (gap) => (() => {
+						var _el$18 = _tmpl$4();
+						effect(() => {
+							return {
+								e: `${p}-gap-band`,
+								t: span().start,
+								a: gap.start,
+								o: span().end - span().start,
+								i: gap.end - gap.start
+							};
+						}, ({ e, t, a, o, i }, _p$) => {
+							className(_el$18, e, _p$?.e);
+							t !== _p$?.t && setAttribute(_el$18, "x", t);
+							a !== _p$?.a && setAttribute(_el$18, "y", a);
+							o !== _p$?.o && setAttribute(_el$18, "width", o);
+							i !== _p$?.i && setAttribute(_el$18, "height", i);
+						});
+						return _el$18;
+					})()
+				})
+			}), _el$12);
+			insert(_el$5, createComponent(For, {
+				get each() {
+					return trackEdges(g().cols);
+				},
+				children: (x) => (() => {
+					var _el$19 = _tmpl$5();
+					setAttribute(_el$19, "x1", x);
+					setAttribute(_el$19, "x2", x);
+					effect(() => {
+						return {
+							e: `${p}-line`,
+							t: rect().y - LINE_EXTENSION,
+							a: rect().y + rect().height + LINE_EXTENSION
+						};
+					}, ({ e, t, a }, _p$) => {
+						className(_el$19, e, _p$?.e);
+						t !== _p$?.t && setAttribute(_el$19, "y1", t);
+						a !== _p$?.a && setAttribute(_el$19, "y2", a);
+					});
+					return _el$19;
+				})()
+			}), _el$13);
+			insert(_el$5, createComponent(For, {
+				get each() {
+					return trackEdges(g().rows);
+				},
+				children: (y) => (() => {
+					var _el$20 = _tmpl$5();
+					setAttribute(_el$20, "y1", y);
+					setAttribute(_el$20, "y2", y);
+					effect(() => {
+						return {
+							e: `${p}-line`,
+							t: rect().x - LINE_EXTENSION,
+							a: rect().x + rect().width + LINE_EXTENSION
+						};
+					}, ({ e, t, a }, _p$) => {
+						className(_el$20, e, _p$?.e);
+						t !== _p$?.t && setAttribute(_el$20, "x1", t);
+						a !== _p$?.a && setAttribute(_el$20, "x2", a);
+					});
+					return _el$20;
+				})()
+			}), _el$14);
+			insert(_el$5, createComponent(For, {
+				get each() {
+					return lineAnchors(g().cols);
+				},
+				children: (x, i) => createComponent(Badge, {
+					prefix: p,
+					x,
+					get y() {
+						return rect().y - BADGE_OFFSET;
+					},
+					get line() {
+						return i() + 1;
+					}
+				})
+			}), _el$15);
+			insert(_el$5, createComponent(For, {
+				get each() {
+					return lineAnchors(g().rows);
+				},
+				children: (y, i) => createComponent(Badge, {
+					prefix: p,
+					get x() {
+						return rect().x - BADGE_OFFSET;
+					},
+					y,
+					get line() {
+						return i() + 1;
+					}
+				})
+			}), _el$16);
+			effect(() => {
+				return {
+					e: `${p}-hatch-line`,
+					t: `${p}-hatch-line`,
+					a: `${p}-hatch-line`
+				};
+			}, ({ e, t, a }, _p$) => {
+				className(_el$8, e, _p$?.e);
+				className(_el$9, t, _p$?.t);
+				className(_el$10, a, _p$?.a);
+			});
+			return _el$5;
+		}
+	}));
+	effect(() => `${p}-guides`, (_v$, _$p) => {
+		className(_el$4, _v$, _$p);
+	});
+	return _el$4;
+}
+function winningIn(dd, declarations, properties) {
+	let last = null;
+	let important = null;
+	for (const declaration of dd.core.cssDeclarations(declarations)) {
+		if (!properties.includes(declaration.property)) continue;
+		if (declaration.important === true) important = declaration;
+		else last = declaration;
+	}
+	return important ?? last;
+}
+function findTarget(dd, elementId, properties, shorthands = []) {
+	const stack = dd.pageStack(elementId);
+	if (stack === null) return null;
+	const { viewportId } = stack;
+	const winner = dd.pageWinner(elementId, properties);
+	if (winner !== null) {
+		if (winner.rule === null) return {
+			kind: "blocked",
+			why: "inline"
+		};
+		if (!winner.rule.editable) return {
+			kind: "blocked",
+			why: "readonly"
+		};
+		if (shorthands.includes(winner.declaration.property)) return {
+			kind: "blocked",
+			why: "shorthand"
+		};
+		return {
+			kind: "rule",
+			viewportId,
+			rule: winner.rule,
+			declaration: winner.declaration
+		};
+	}
+	const editable = stack.rules.filter((rule) => rule.active && rule.pseudo === void 0 && rule.editable);
+	const rule = editable.find((rule) => {
+		const display = winningIn(dd, rule.declarations, ["display"]);
+		return display !== null && /grid/i.test(display.value);
+	}) ?? editable[0] ?? null;
+	if (rule !== null) return {
+		kind: "rule",
+		viewportId,
+		rule,
+		declaration: null
+	};
+	const sheet = stack.sheets.find((each) => each.editable)?.source ?? null;
+	const selector = dd.pageElement(elementId)?.selector ?? null;
+	if (sheet === null || selector === null) return null;
+	return {
+		kind: "add",
+		viewportId,
+		sheet,
+		selector
+	};
+}
+function withDeclaration(dd, declarations, property, value) {
+	const winner = winningIn(dd, declarations, [property]);
+	const text = `${property}: ${value}${winner?.important === true ? " !important" : ""};`;
+	if (winner === null) {
+		const kept = declarations.replace(/\s+$/, "");
+		if (kept === "") return text;
+		return `${kept}${kept.endsWith(";") ? "" : ";"}\n${text}`;
+	}
+	return declarations.slice(0, winner.range[0]) + text + declarations.slice(winner.range[1]);
+}
+function createWriter(dd, target) {
+	const { viewportId } = target;
+	const session = dd.beginItemTransaction();
+	let key = target.kind === "rule" ? target.rule.key : null;
+	let expected = target.kind === "rule" ? target.rule.declarations : "";
+	const original = expected;
+	return {
+		write(property, value) {
+			if (key === null) {
+				if (target.kind !== "add") return "nowhere to write";
+				const answer = session.write({
+					kind: "add",
+					viewportId,
+					sheet: target.sheet,
+					selector: target.selector,
+					declarations: `${property}: ${value};`
+				});
+				if (typeof answer === "string") return answer;
+				key = answer.key;
+				expected = answer.declarations;
+				return null;
+			}
+			const declarations = withDeclaration(dd, expected, property, value);
+			if (declarations === expected) return null;
+			const answer = session.write({
+				kind: "rule",
+				viewportId,
+				key,
+				expected,
+				declarations
+			});
+			if (typeof answer === "string") return answer;
+			key = answer.key;
+			expected = answer.declarations;
+			return null;
+		},
+		reset() {
+			if (key === null || expected === original) return;
+			const answer = session.write({
+				kind: "rule",
+				viewportId,
+				key,
+				expected,
+				declarations: original
+			});
+			if (typeof answer !== "string") {
+				key = answer.key;
+				expected = answer.declarations;
+			}
+		},
+		commit: () => session.commit(),
+		cancel: () => session.cancel()
+	};
+}
+var LENGTH = /^(\d*\.?\d+)([a-z%]+)$/i;
+function classify(text) {
+	const match = LENGTH.exec(text);
+	if (match !== null) return {
+		text,
+		length: {
+			value: Number(match[1]),
+			unit: match[2].toLowerCase()
+		}
+	};
+	if (text === "0") return {
+		text,
+		length: {
+			value: 0,
+			unit: "px"
+		}
+	};
+	return {
+		text,
+		length: null
+	};
+}
+function splitTopLevel(text) {
+	const out = [];
+	let depth = 0;
+	let start = -1;
+	let names = false;
+	for (let i = 0; i < text.length; i++) {
+		const ch = text[i];
+		if (names) {
+			if (ch === "]") {
+				out.push(text.slice(start, i + 1));
+				start = -1;
+				names = false;
+			}
+			continue;
+		}
+		if (ch === "[" && depth === 0) {
+			if (start !== -1) out.push(text.slice(start, i));
+			start = i;
+			names = true;
+			continue;
+		}
+		if (ch === "(" || ch === "[") depth++;
+		else if (ch === ")" || ch === "]") depth = Math.max(0, depth - 1);
+		if (depth === 0 && /\s/.test(ch)) {
+			if (start !== -1) out.push(text.slice(start, i));
+			start = -1;
+		} else if (start === -1) start = i;
+	}
+	if (start !== -1) out.push(text.slice(start));
+	return out;
+}
+function item(text) {
+	return {
+		text,
+		track: text.startsWith("[") && text.endsWith("]") ? null : classify(text)
+	};
+}
+function parseTrackList(value) {
+	const text = value.trim();
+	if (text === "" || /^(none|inherit|initial|unset|revert|revert-layer)$/i.test(text) || /^(subgrid|masonry)\b/i.test(text)) return null;
+	if (/var\(/i.test(text)) return null;
+	const segments = [];
+	const tracks = [];
+	for (const token of splitTopLevel(text)) {
+		if (/^repeat\(/i.test(token) && token.endsWith(")")) {
+			const inside = token.slice(7, -1);
+			const comma = inside.indexOf(",");
+			if (comma === -1) return null;
+			const count = inside.slice(0, comma).trim();
+			if (!/^\d+$/.test(count) || Number(count) < 1) return null;
+			const rest = inside.slice(comma + 1).trim();
+			if (/repeat\(/i.test(rest)) return null;
+			const inner = splitTopLevel(rest).map(item);
+			const times = Number(count);
+			segments.push({
+				kind: "repeat",
+				text: token,
+				count: times,
+				inner
+			});
+			for (let copy = 0; copy < times; copy++) for (const each of inner) if (each.track !== null) tracks.push(each.track);
+			continue;
+		}
+		const each = item(token);
+		segments.push({
+			kind: "item",
+			item: each
+		});
+		if (each.track !== null) tracks.push(each.track);
+	}
+	return {
+		segments,
+		tracks
+	};
+}
+function perCopy(segment) {
+	return segment.inner.filter((each) => each.track !== null).length;
+}
+function changed(list, edits, index) {
+	const edit = edits.get(index);
+	return edit !== void 0 && edit !== list.tracks[index]?.text;
+}
+function writeTrackList(list, edits, insert, remove) {
+	const out = [];
+	let index = 0;
+	let inserted = insert === void 0;
+	const place = () => {
+		if (!inserted && insert !== void 0 && insert.index === index) {
+			out.push(insert.text);
+			inserted = true;
+		}
+	};
+	const emit = (each) => {
+		if (each.track === null) {
+			if (insert?.after === false) place();
+			out.push(each.text);
+			return;
+		}
+		place();
+		if (index !== remove) out.push(edits.get(index) ?? each.text);
+		index++;
+	};
+	for (const segment of list.segments) {
+		if (segment.kind === "item") {
+			emit(segment.item);
+			continue;
+		}
+		const last = index + segment.count * perCopy(segment);
+		let touched = remove !== void 0 && remove >= index && remove < last;
+		if (insert !== void 0 && insert.index > index && insert.index < last) touched = true;
+		for (let i = index; !touched && i < last; i++) if (changed(list, edits, i)) touched = true;
+		if (!touched) {
+			place();
+			out.push(segment.text);
+			index = last;
+			continue;
+		}
+		for (let copy = 0; copy < segment.count; copy++) for (const each of segment.inner) emit(each);
+	}
+	if (!inserted && insert !== void 0) out.push(insert.text);
+	return joinList(out);
+}
+function joinList(parts) {
+	return parts.join(" ").replace(/\]\s+\[/g, " ");
+}
+function formatLength(value, unit) {
+	const precision = unit === "px" ? 1 : 2;
+	return `${String(Number(value.toFixed(precision)))}${unit}`;
+}
+function scaleLength(text, px, nextPx) {
+	const { length } = classify(text);
+	if (length === null || px <= 0) return formatLength(nextPx, "px");
+	return formatLength(length.value * nextPx / px, length.unit);
+}
+var isShare = (track) => track.length !== null && track.length.unit === "fr";
+var functionOf = (track) => /^([a-z-]+)\(/i.exec(track.text)?.[1] ?? null;
+function precedence(track, px) {
+	if (track.length === null || px <= 0) return 0;
+	return track.length.unit === "fr" ? 1 : 2;
+}
+function tradeAcross(list, sizes, boundary, delta) {
+	const a = list.tracks[boundary];
+	const b = list.tracks[boundary + 1];
+	const pa = sizes[boundary];
+	const pb = sizes[boundary + 1];
+	if (a === void 0 || b === void 0 || pa === void 0 || pb === void 0) return null;
+	const d = Math.max(-pa, Math.min(pb, delta));
+	const na = pa + d;
+	const nb = pb - d;
+	const shares = list.tracks.filter(isShare).length;
+	const lone = (share, other) => isShare(share) && other.length === null && shares === 1;
+	let first;
+	let second;
+	if ((isShare(a) || isShare(b)) && pa + pb <= 0) return null;
+	if (isShare(a) && isShare(b)) {
+		const total = a.length.value + b.length.value;
+		const k = total / (pa + pb);
+		const fa = Number((na * k).toFixed(2));
+		first = formatLength(fa, "fr");
+		second = formatLength(Math.max(0, total - fa), "fr");
+	} else if (lone(a, b) || lone(b, a)) {
+		const fn = functionOf(isShare(a) ? b : a);
+		if (fn !== null) return { refused: fn };
+		first = isShare(a) ? a.text : formatLength(na, "px");
+		second = isShare(b) ? b.text : formatLength(nb, "px");
+	} else {
+		const top = Math.max(precedence(a, pa), precedence(b, pb));
+		if (top === 0) {
+			const fn = functionOf(a) ?? functionOf(b);
+			if (fn !== null) return { refused: fn };
+			first = formatLength(na, "px");
+			second = formatLength(nb, "px");
+		} else if (top === 2 && shares >= 2 && (isShare(a) || isShare(b))) {
+			const share = isShare(a) ? a : b;
+			const sharePx = isShare(a) ? pa : pb;
+			const shareNext = isShare(a) ? na : nb;
+			if (sharePx > 0 && shareNext > 0) {
+				const scaled = scaleLength(share.text, sharePx, shareNext);
+				const fixed = isShare(a) ? scaleLength(b.text, pb, nb) : scaleLength(a.text, pa, na);
+				first = isShare(a) ? scaled : fixed;
+				second = isShare(a) ? fixed : scaled;
+			} else {
+				first = precedence(a, pa) === top ? scaleLength(a.text, pa, na) : a.text;
+				second = precedence(b, pb) === top ? scaleLength(b.text, pb, nb) : b.text;
+			}
+		} else {
+			first = precedence(a, pa) === top ? scaleLength(a.text, pa, na) : a.text;
+			second = precedence(b, pb) === top ? scaleLength(b.text, pb, nb) : b.text;
+		}
+	}
+	const edits = new Map([[boundary, first], [boundary + 1, second]]);
+	const collapsed = na <= 0 ? boundary : nb <= 0 ? boundary + 1 : null;
+	return {
+		list: writeTrackList(list, edits),
+		first,
+		second,
+		collapsed
+	};
+}
+function insertAt(list, sizes, line, delta) {
+	if (Math.abs(delta) < .5) return { refused: "still" };
+	const donorIndex = delta > 0 ? line : line - 1;
+	const px = sizes[donorIndex];
+	if (donorIndex < 0 || px === void 0) return { refused: "outward" };
+	const donor = list.tracks[donorIndex];
+	if (donor === void 0) return { refused: "implicit" };
+	const size = Math.min(Math.abs(delta), px);
+	if (size < .5) return { refused: "still" };
+	const scalable = donor.length !== null && donor.length.value > 0 && px > 0;
+	const born = scalable ? scaleLength(donor.text, px, size) : formatLength(size, "px");
+	const rest = scalable ? scaleLength(donor.text, px, px - size) : donor.text;
+	return {
+		list: writeTrackList(list, new Map([[donorIndex, rest]]), {
+			index: line,
+			text: born,
+			after: delta > 0
+		}),
+		born,
+		donor: rest,
+		line: delta > 0 ? line + 1 : line
+	};
+}
+function bumpRepeat(list, track, line, by) {
+	const out = [];
+	let index = 0;
+	let hit = false;
+	for (const segment of list.segments) {
+		if (segment.kind === "item") {
+			out.push(segment.item.text);
+			if (segment.item.track !== null) index++;
+			continue;
+		}
+		const last = index + segment.count * perCopy(segment);
+		const inside = track >= index && track < last && line >= index;
+		if (!hit && perCopy(segment) === 1 && inside && line <= last) {
+			hit = true;
+			const count = segment.count + by;
+			const inner = segment.inner.map((each) => each.text).join(" ");
+			if (count >= 2) out.push(`repeat(${count}, ${inner})`);
+			else if (count === 1) out.push(inner);
+		} else out.push(segment.text);
+		index = last;
+	}
+	return hit ? joinList(out) : null;
+}
+function insertEqual(list, line) {
+	const copy = list.tracks[Math.max(0, line - 1)];
+	if (copy === void 0 || line > list.tracks.length) return null;
+	const bumped = bumpRepeat(list, Math.max(0, line - 1), line, 1);
+	if (bumped !== null) return {
+		list: bumped,
+		text: copy.text
+	};
+	const insert = {
+		index: line,
+		text: copy.text,
+		after: line === 0
+	};
+	return {
+		list: writeTrackList(list, new Map(), insert),
+		text: copy.text
+	};
+}
+function removeTrack(list, index) {
+	if (index < 0 || index >= list.tracks.length) return null;
+	const written = bumpRepeat(list, index, index, -1) ?? writeTrackList(list, new Map(), void 0, index);
+	const left = parseTrackList(written);
+	return left === null || left.tracks.length === 0 ? "none" : written;
+}
+function parseGapShorthand(value) {
+	const tokens = splitTopLevel(value.trim());
+	const row = tokens[0];
+	if (row === void 0 || tokens.length > 2) return null;
+	return {
+		row,
+		column: tokens[1] ?? row
+	};
+}
+function gapShorthand(row, column) {
+	return row === column ? row : `${row} ${column}`;
+}
+var TRACK_PROPERTY = {
+	cols: "grid-template-columns",
+	rows: "grid-template-rows"
+};
+var TRACK_SHORTHANDS = ["grid-template", "grid"];
+var GAP_LONGHAND = {
+	cols: "column-gap",
+	rows: "row-gap"
+};
+var GAP_PROPERTIES = {
+	cols: [
+		"column-gap",
+		"grid-column-gap",
+		"gap",
+		"grid-gap"
+	],
+	rows: [
+		"row-gap",
+		"grid-row-gap",
+		"gap",
+		"grid-gap"
+	]
+};
+var NOUN = {
+	cols: "columns",
+	rows: "rows"
+};
+var ONE = {
+	cols: "column",
+	rows: "row"
+};
+var inert = (note, line) => ({
+	peek: () => ({
+		note,
+		line
+	}),
+	step: () => ({
+		note,
+		line
+	}),
+	commit: () => {},
+	restore: () => {}
+});
+var blockedNote = (axis, why) => ({
+	inline: `${NOUN[axis]} are set inline — the CSS panel edits that`,
+	readonly: `${NOUN[axis]} are set by a rule this page can't edit`,
+	shorthand: `${NOUN[axis]} come from a grid-template shorthand — the CSS panel edits that`
+})[why];
+function openTracks(dd, gridId, geometry, axis, implicitHint) {
+	const property = TRACK_PROPERTY[axis];
+	const target = findTarget(dd, gridId, [property, ...TRACK_SHORTHANDS], TRACK_SHORTHANDS);
+	if (target === null) return `${NOUN[axis]} can't be written here`;
+	if (target.kind === "blocked") return blockedNote(axis, target.why);
+	const declaration = target.kind === "rule" ? target.declaration : null;
+	if (declaration === null) return `${NOUN[axis]} are implicit — ${implicitHint}`;
+	const list = parseTrackList(declaration.value);
+	if (list === null) return `${NOUN[axis]} use a value only the CSS panel can edit`;
+	if (list.tracks.length > geometry[axis].sizes.length) return `${NOUN[axis]} come from a rule that is not in force here`;
+	const node = dd.geometry.node(gridId);
+	if (node !== void 0 && startsBeforeFirst(node, axis, list.tracks.length)) return `${NOUN[axis]} start before the first — the CSS panel edits that`;
+	return {
+		target,
+		list,
+		property
+	};
+}
+function beginTrade(dd, gridId, geometry, axis, line) {
+	const sizes = geometry[axis].sizes;
+	if (line === 0 || line >= sizes.length) return inert(`pull inward to open a ${ONE[axis]}`, line);
+	const opened = openTracks(dd, gridId, geometry, axis, "⌘-drag adjusts the gap");
+	if (typeof opened === "string") return inert(opened, line);
+	const { target, list, property } = opened;
+	const a = list.tracks[line - 1];
+	const b = list.tracks[line];
+	if (a === void 0 || b === void 0) return inert(`implicit track — ⌘-drag adjusts the gap`, line);
+	const writer = createWriter(dd, target);
+	return {
+		peek: () => ({
+			note: `${a.text} · ${b.text}`,
+			line
+		}),
+		step(delta) {
+			const trade = tradeAcross(list, sizes, line - 1, delta);
+			if (trade === null) return {
+				note: `${NOUN[axis]} can't be written here`,
+				line
+			};
+			if ("refused" in trade) return {
+				note: `${NOUN[axis]} use ${trade.refused}() — the CSS panel edits that`,
+				line
+			};
+			const problem = writer.write(property, trade.list);
+			if (problem !== null) return {
+				note: problem,
+				line
+			};
+			const hint = trade.collapsed === null ? "" : " — ⇧-double-click to remove";
+			return {
+				note: `${trade.first} · ${trade.second}${hint}`,
+				line
+			};
+		},
+		commit: () => writer.commit(),
+		restore: () => writer.cancel()
+	};
+}
+function beginInsert(dd, gridId, geometry, axis, line) {
+	const sizes = geometry[axis].sizes;
+	const opened = openTracks(dd, gridId, geometry, axis, `a ${ONE[axis]} is born from content`);
+	if (typeof opened === "string") return inert(opened, line);
+	const { target, list, property } = opened;
+	const refused = {
+		still: `pull to open a ${ONE[axis]}`,
+		outward: `pull inward to open a ${ONE[axis]}`,
+		implicit: "implicit track — nothing to carve from"
+	};
+	const writer = createWriter(dd, target);
+	return {
+		peek: () => ({
+			note: refused.still,
+			line
+		}),
+		step(delta) {
+			const insertion = insertAt(list, sizes, line, delta);
+			if ("refused" in insertion) {
+				writer.reset();
+				return {
+					note: refused[insertion.refused],
+					line
+				};
+			}
+			const problem = writer.write(property, insertion.list);
+			if (problem !== null) return {
+				note: problem,
+				line
+			};
+			return {
+				note: delta > 0 ? `new ${insertion.born} · ${insertion.donor}` : `${insertion.donor} · new ${insertion.born}`,
+				line: insertion.line
+			};
+		},
+		commit: () => writer.commit(),
+		restore: () => writer.cancel()
+	};
+}
+function insertEqualAt(dd, gridId, geometry, axis, line) {
+	const opened = openTracks(dd, gridId, geometry, axis, `a ${ONE[axis]} is born from content`);
+	if (typeof opened === "string") return opened;
+	const equal = insertEqual(opened.list, line);
+	if (equal === null) return "implicit track — nothing to copy";
+	const writer = createWriter(dd, opened.target);
+	const problem = writer.write(opened.property, equal.list);
+	writer.commit();
+	return problem ?? `+${equal.text}`;
+}
+function removeBefore(dd, gridId, geometry, axis, line) {
+	const opened = openTracks(dd, gridId, geometry, axis, "nothing to remove");
+	if (typeof opened === "string") return opened;
+	const index = Math.max(0, line - 1);
+	const without = removeTrack(opened.list, index);
+	if (without === null) return "implicit track — nothing to remove";
+	const writer = createWriter(dd, opened.target);
+	const problem = writer.write(opened.property, without);
+	writer.commit();
+	return problem ?? `${ONE[axis]} ${index + 1} removed`;
+}
+var isFunction = (value) => /\(/.test(value);
+function planGap(declaration, axis) {
+	if (declaration === null) return {
+		property: GAP_LONGHAND[axis],
+		current: null,
+		spell: (s) => s
+	};
+	const { property, value } = declaration;
+	if (property === "gap" || property === "grid-gap") {
+		const parts = parseGapShorthand(value);
+		if (parts === null) return null;
+		const current = axis === "cols" ? parts.column : parts.row;
+		if (isFunction(current)) return null;
+		return {
+			property,
+			current,
+			spell: (s) => axis === "cols" ? gapShorthand(parts.row, s) : gapShorthand(s, parts.column)
+		};
+	}
+	if (isFunction(value)) return null;
+	return {
+		property,
+		current: value,
+		spell: (s) => s
+	};
+}
+function beginGap(dd, gridId, geometry, axis, line) {
+	const target = findTarget(dd, gridId, GAP_PROPERTIES[axis]);
+	if (target === null) return inert("the gap can't be written here", line);
+	if (target.kind === "blocked") return inert(target.why === "inline" ? "the gap is set inline — the CSS panel edits that" : "the gap is set by a rule this page can't edit", line);
+	const plan = planGap(target.kind === "rule" ? target.declaration : null, axis);
+	if (plan === null) return inert("the gap uses a value only the CSS panel can edit", line);
+	const px = geometry[axis].gap;
+	const label = axis === "cols" ? "column gap" : "row gap";
+	const current = plan.current ?? formatLength(px, "px");
+	const writer = createWriter(dd, target);
+	return {
+		peek: () => ({
+			note: `${label} ${current}`,
+			line
+		}),
+		step(delta) {
+			const next = Math.max(0, px + delta);
+			const scaled = scaleLength(current, px, next);
+			const problem = writer.write(plan.property, plan.spell(scaled));
+			if (problem !== null) return {
+				note: problem,
+				line
+			};
+			return {
+				note: `${label} ${scaled}`,
+				line
+			};
+		},
+		commit: () => writer.commit(),
+		restore: () => writer.cancel()
+	};
+}
+function beginSession(dd, gridId, geometry, axis, line, mode) {
+	switch (mode) {
+		case "gap": return beginGap(dd, gridId, geometry, axis, line);
+		case "insert": return beginInsert(dd, gridId, geometry, axis, line);
+		default: return beginTrade(dd, gridId, geometry, axis, line);
+	}
+}
+var _tmpl$ = template(`<div>`);
+var _tmpl$2 = template(`<div><!><!><!>`);
+var MIN_HIT = 10;
+var NOTE_OFFSET = {
+	x: 14,
+	y: 18
+};
+var FLASH_MS = 900;
+var DOUBLE_CLICK_MS = 600;
+function clipTo(box, clip) {
+	if (clip === null) return box;
+	const x0 = Math.max(box.x, clip.x);
+	const y0 = Math.max(box.y, clip.y);
+	const x1 = Math.min(box.x + box.width, clip.x + clip.width);
+	const y1 = Math.min(box.y + box.height, clip.y + clip.height);
+	return {
+		...box,
+		x: x0,
+		y: y0,
+		width: Math.max(0, x1 - x0),
+		height: Math.max(0, y1 - y0)
+	};
+}
+function handlesFor(axis, g, clip) {
+	const along = axis === "cols" ? g.cols.bands : g.rows.bands;
+	const across = axis === "cols" ? g.rows.bands : g.cols.bands;
+	const reversed = axis === "cols" ? g.cols.reversed : g.rows.reversed;
+	const first = along[0];
+	const last = along[along.length - 1];
+	if (first === void 0 || last === void 0) return [];
+	const spanStart = across.length === 0 ? axis === "cols" ? g.rect.y : g.rect.x : Math.min(...across.map((band) => band.start));
+	const spanEnd = across.length === 0 ? axis === "cols" ? g.rect.y + g.rect.height : g.rect.x + g.rect.width : Math.max(...across.map((band) => band.end));
+	const box = (line, center, size, edge) => clipTo(axis === "cols" ? {
+		x: center - size / 2,
+		y: spanStart,
+		width: size,
+		height: spanEnd - spanStart,
+		line,
+		edge
+	} : {
+		x: spanStart,
+		y: center - size / 2,
+		width: spanEnd - spanStart,
+		height: size,
+		line,
+		edge
+	}, clip);
+	const out = [box(0, reversed ? first.end : first.start, MIN_HIT, true)];
+	for (let i = 0; i + 1 < along.length; i++) {
+		const a = Math.min(along[i].end, along[i + 1].end);
+		const b = Math.max(along[i].start, along[i + 1].start);
+		out.push(box(i + 1, (a + b) / 2, Math.max(b - a, MIN_HIT), false));
+	}
+	out.push(box(along.length, reversed ? last.start : last.end, MIN_HIT, true));
+	return out;
+}
+function createGridHandles(dd) {
+	const p = classPrefix(dd.plugin.id);
+	const [visual, setVisual] = createSignal(null);
+	const [note, setNote] = createSignal(null);
+	const [dragging, setDragging] = createSignal(null);
+	let flashTimer;
+	onSettled(() => () => window.clearTimeout(flashTimer));
+	const readVisual = (selectedId) => {
+		const grid = selectedGrid(dd, selectedId);
+		if (grid === null) return null;
+		const viewportId = dd.pageElement(grid.gridId)?.viewportId ?? null;
+		const clip = viewportId === null ? null : dd.geometry.itemRect(viewportId);
+		return {
+			...grid,
+			clip
+		};
+	};
+	createEffect(() => {
+		dd.geometry.version();
+		return dd.selection();
+	}, (selectedId) => {
+		setVisual(selectedId === null ? null : untrack(() => readVisual(selectedId)));
+	});
+	const cols = createMemo(() => {
+		const v = visual();
+		return v === null ? [] : handlesFor("cols", v.geometry, v.clip);
+	});
+	const rows = createMemo(() => {
+		const v = visual();
+		return v === null ? [] : handlesFor("rows", v.geometry, v.clip);
+	});
+	const overlayPoint = (clientX, clientY) => {
+		const world = dd.canvas.screenToWorld(clientX, clientY);
+		const camera = dd.geometry.camera();
+		return {
+			x: camera.panX + world.x * camera.zoom,
+			y: camera.panY + world.y * camera.zoom
+		};
+	};
+	const showNote = (clientX, clientY, text) => {
+		const at = overlayPoint(clientX, clientY);
+		setNote({
+			x: at.x + NOTE_OFFSET.x,
+			y: at.y + NOTE_OFFSET.y,
+			text
+		});
+	};
+	const handlers = (axis, box, onMoved) => {
+		let mode = "trade";
+		let session = null;
+		let zoom = 1;
+		let sign = 1;
+		let wrote = false;
+		const delta = (screen) => sign * (axis === "cols" ? screen.x : screen.y) / zoom;
+		return {
+			shouldStart: (event) => {
+				mode = event.metaKey || event.ctrlKey ? "gap" : event.shiftKey || untrack(box).edge ? "insert" : "trade";
+				return true;
+			},
+			movementAxes: () => axis === "cols" ? {
+				x: true,
+				y: false
+			} : {
+				x: false,
+				y: true
+			},
+			onStart: (context) => {
+				const v = untrack(visual);
+				if (v === null) return;
+				const line = untrack(box).line;
+				zoom = v.geometry.zoom;
+				sign = v.geometry[axis].reversed ? -1 : 1;
+				wrote = false;
+				window.clearTimeout(flashTimer);
+				session = untrack(() => beginSession(dd, v.gridId, v.geometry, axis, line, mode));
+				const step = session.peek();
+				setDragging({
+					axis,
+					line,
+					hot: step.line
+				});
+				showNote(context.startScreen.x, context.startScreen.y, step.note);
+			},
+			onMove: (context) => {
+				if (session === null || !context.moved) return;
+				wrote = true;
+				const step = session.step(delta(context.deltaScreen));
+				setDragging((d) => d === null ? null : {
+					...d,
+					hot: step.line
+				});
+				showNote(context.currentScreen.x, context.currentScreen.y, step.note);
+			},
+			onEnd: (context) => {
+				if (context.moved || wrote) onMoved();
+				if (session !== null) {
+					if (context.canceled) session.restore();
+					else {
+						if (context.moved || wrote) session.step(delta(context.deltaScreen));
+						session.commit();
+					}
+				}
+				session = null;
+				setDragging(null);
+				setNote(null);
+			}
+		};
+	};
+	const doubleClick = (axis, box, event) => {
+		if (event.button !== 0 || event.metaKey || event.ctrlKey) return;
+		const v = untrack(visual);
+		if (v === null) return;
+		const line = untrack(box).line;
+		const text = untrack(() => event.shiftKey ? removeBefore(dd, v.gridId, v.geometry, axis, line) : insertEqualAt(dd, v.gridId, v.geometry, axis, line));
+		showNote(event.clientX, event.clientY, text);
+		window.clearTimeout(flashTimer);
+		flashTimer = window.setTimeout(() => setNote(null), FLASH_MS);
+	};
+	const Handle = (props) => {
+		let binding;
+		let movedAt = Number.NEGATIVE_INFINITY;
+		onSettled(() => () => binding?.dispose());
+		const mine = (which) => {
+			const d = dragging();
+			return d !== null && d.axis === props.axis && d[which] === props.box().line;
+		};
+		var _el$ = _tmpl$();
+		ref(() => {
+			return (node) => {
+				binding = dd.canvas.bindDrag(node, handlers(props.axis, props.box, () => {
+					movedAt = performance.now();
+				}));
+			};
+		}, _el$);
+		_el$._$$dblclick = (event) => {
+			if (performance.now() - movedAt < DOUBLE_CLICK_MS) return;
+			doubleClick(props.axis, props.box, event);
+		};
+		effect(() => {
+			return {
+				e: `${p}-handle ${p}-handle-${props.axis}`,
+				t: props.box().line,
+				a: props.box().edge ? "" : void 0,
+				o: mine("line") ? "" : void 0,
+				i: mine("hot") ? "" : void 0,
+				n: `${props.box().x}px`,
+				s: `${props.box().y}px`,
+				h: `${props.box().width}px`,
+				r: `${props.box().height}px`
+			};
+		}, ({ e, t, a, o, i, n, s, h, r }, _p$) => {
+			className(_el$, e, _p$?.e);
+			t !== _p$?.t && setAttribute(_el$, "data-line", t);
+			a !== _p$?.a && setAttribute(_el$, "data-edge", a);
+			o !== _p$?.o && setAttribute(_el$, "data-active", o);
+			i !== _p$?.i && setAttribute(_el$, "data-hot", i);
+			n !== _p$?.n && setStyleProperty(_el$, "left", n);
+			s !== _p$?.s && setStyleProperty(_el$, "top", s);
+			h !== _p$?.h && setStyleProperty(_el$, "width", h);
+			r !== _p$?.r && setStyleProperty(_el$, "height", r);
+		});
+		return _el$;
+	};
+	var _el$2 = _tmpl$2();
+	var _el$3 = _el$2.firstChild;
+	var _el$4 = _el$3.nextSibling;
+	var _el$5 = _el$4.nextSibling;
+	insert(_el$2, createComponent(For, {
+		get each() {
+			return cols();
+		},
+		keyed: false,
+		children: (box) => createComponent(Handle, {
+			axis: "cols",
+			box
+		})
+	}), _el$3);
+	insert(_el$2, createComponent(For, {
+		get each() {
+			return rows();
+		},
+		keyed: false,
+		children: (box) => createComponent(Handle, {
+			axis: "rows",
+			box
+		})
+	}), _el$4);
+	insert(_el$2, createComponent(Show, {
+		get when() {
+			return note();
+		},
+		children: (n) => (() => {
+			var _el$6 = _tmpl$();
+			insert(_el$6, () => {
+				return n().text;
+			});
+			effect(() => {
+				return {
+					e: `${p}-note`,
+					t: `${n().x}px`,
+					a: `${n().y}px`
+				};
+			}, ({ e, t, a }, _p$) => {
+				className(_el$6, e, _p$?.e);
+				t !== _p$?.t && setStyleProperty(_el$6, "left", t);
+				a !== _p$?.a && setStyleProperty(_el$6, "top", a);
+			});
+			return _el$6;
+		})()
+	}), _el$5);
+	effect(() => {
+		return {
+			e: `${p}-layer`,
+			t: dragging() === null ? void 0 : ""
+		};
+	}, ({ e, t }, _p$) => {
+		className(_el$2, e, _p$?.e);
+		t !== _p$?.t && setAttribute(_el$2, "data-dragging", t);
+	});
+	return _el$2;
+}
+delegateEvents(["dblclick"]);
+function activate(dd) {
+	const p = classPrefix(dd.plugin.id);
+	dd.registerOverlay({
+		id: "grid",
+		slot: "overlay.screen",
+		styles: guidesCss(p),
+		render: () => createGridOverlay(dd)
+	});
+	dd.registerOverlay({
+		id: "grid-handles",
+		slot: "overlay.interactive",
+		styles: handlesCss(p),
+		render: () => createGridHandles(dd)
+	});
+}
+export { activate as default };