@takesix/react 0.2.1 → 0.3.0

package/dist/index.js

@@ -1,9 +1,9 @@
 import { Fragment as e, useCallback as t, useEffect as n, useId as r, useLayoutEffect as i, useMemo as a, useRef as o, useState as s } from "react";
 import { DEFAULT_SIZE as c, MAX_BLOCKS_PER_LEVEL as l, SIZES as u, addBlock as d, addLink as f, buildIndex as p, canAddBlock as m, getLevel as h, groupBlocks as g, moveBlock as _, removeBlock as ee, updateBlock as v, visibleLinks as te } from "@takesix/core";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { Fragment as ne, jsx as y, jsxs as b } from "react/jsx-runtime";
 // src/icons.tsx
-function ne({ size: e = 20 }) {
-	return /* @__PURE__ */ x("svg", {
+function re({ size: e = 20 }) {
+	return /* @__PURE__ */ b("svg", {
 		width: e,
 		height: e,
 		viewBox: "0 0 24 24",
@@ -11,12 +11,12 @@ function ne({ size: e = 20 }) {
 		stroke: "currentColor",
 		strokeWidth: "1.5",
 		strokeLinecap: "round",
-		children: [/* @__PURE__ */ b("line", {
+		children: [/* @__PURE__ */ y("line", {
 			x1: "12",
 			y1: "5",
 			x2: "12",
 			y2: "19"
-		}), /* @__PURE__ */ b("line", {
+		}), /* @__PURE__ */ y("line", {
 			x1: "5",
 			y1: "12",
 			x2: "19",
@@ -24,8 +24,8 @@ function ne({ size: e = 20 }) {
 		})]
 	});
 }
-function S() {
-	return /* @__PURE__ */ x("svg", {
+function x() {
+	return /* @__PURE__ */ b("svg", {
 		width: "12",
 		height: "12",
 		viewBox: "0 0 24 24",
@@ -33,12 +33,12 @@ function S() {
 		stroke: "currentColor",
 		strokeWidth: "2.5",
 		strokeLinecap: "round",
-		children: [/* @__PURE__ */ b("line", {
+		children: [/* @__PURE__ */ y("line", {
 			x1: "18",
 			y1: "6",
 			x2: "6",
 			y2: "18"
-		}), /* @__PURE__ */ b("line", {
+		}), /* @__PURE__ */ y("line", {
 			x1: "6",
 			y1: "6",
 			x2: "18",
@@ -46,8 +46,8 @@ function S() {
 		})]
 	});
 }
-function C() {
-	return /* @__PURE__ */ x("svg", {
+function S() {
+	return /* @__PURE__ */ b("svg", {
 		width: "12",
 		height: "12",
 		viewBox: "0 0 24 24",
@@ -56,16 +56,16 @@ function C() {
 		strokeWidth: "2.5",
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
-		children: [/* @__PURE__ */ b("line", {
+		children: [/* @__PURE__ */ y("line", {
 			x1: "5",
 			y1: "12",
 			x2: "19",
 			y2: "12"
-		}), /* @__PURE__ */ b("polyline", { points: "12 5 19 12 12 19" })]
+		}), /* @__PURE__ */ y("polyline", { points: "12 5 19 12 12 19" })]
 	});
 }
-function re() {
-	return /* @__PURE__ */ x("svg", {
+function ie() {
+	return /* @__PURE__ */ b("svg", {
 		width: "12",
 		height: "12",
 		viewBox: "0 0 24 24",
@@ -74,19 +74,19 @@ function re() {
 		strokeWidth: "2.2",
 		strokeLinecap: "round",
 		children: [
-			/* @__PURE__ */ b("line", {
+			/* @__PURE__ */ y("line", {
 				x1: "5",
 				y1: "6",
 				x2: "19",
 				y2: "6"
 			}),
-			/* @__PURE__ */ b("line", {
+			/* @__PURE__ */ y("line", {
 				x1: "5",
 				y1: "12",
 				x2: "19",
 				y2: "12"
 			}),
-			/* @__PURE__ */ b("line", {
+			/* @__PURE__ */ y("line", {
 				x1: "5",
 				y1: "18",
 				x2: "13",
@@ -95,71 +95,76 @@ function re() {
 		]
 	});
 }
-var w = {
-	card: "_card_21d5p_1",
-	deleteBtn: "_deleteBtn_21d5p_13",
-	sizeBtn: "_sizeBtn_21d5p_38",
-	resizeHandle: "_resizeHandle_21d5p_63",
-	cardResizing: "_cardResizing_21d5p_74",
-	detailsBtn: "_detailsBtn_21d5p_82",
-	cardEditing: "_cardEditing_21d5p_102",
-	detailsBtnFilled: "_detailsBtnFilled_21d5p_106",
-	connectBtn: "_connectBtn_21d5p_115",
-	connectBtnActive: "_connectBtnActive_21d5p_140",
-	cardConnectingSource: "_cardConnectingSource_21d5p_151",
-	cardConnectable: "_cardConnectable_21d5p_156",
-	cardConnected: "_cardConnected_21d5p_165",
-	connectOverlay: "_connectOverlay_21d5p_171",
-	cardUnlinkable: "_cardUnlinkable_21d5p_183",
-	inside: "_inside_21d5p_189",
-	selectOverlay: "_selectOverlay_21d5p_196",
-	selectMark: "_selectMark_21d5p_201",
-	cardSelected: "_cardSelected_21d5p_217",
-	connectOverlayConnected: "_connectOverlayConnected_21d5p_227",
-	header: "_header_21d5p_237",
-	cardWithDetails: "_cardWithDetails_21d5p_241",
-	addInside: "_addInside_21d5p_245",
-	dragHandle: "_dragHandle_21d5p_257",
-	cardDragged: "_cardDragged_21d5p_283",
-	cardZoomable: "_cardZoomable_21d5p_293",
-	title: "_title_21d5p_298",
-	description: "_description_21d5p_299",
-	icon: "_icon_21d5p_315",
-	headerText: "_headerText_21d5p_322",
-	cardWide: "_cardWide_21d5p_349",
-	editable: "_editable_21d5p_365"
-}, T = {
+var C = {
+	card: "_card_nq4yy_1",
+	deleteBtn: "_deleteBtn_nq4yy_13",
+	sizeBtn: "_sizeBtn_nq4yy_38",
+	resizeHandle: "_resizeHandle_nq4yy_63",
+	cardResizing: "_cardResizing_nq4yy_74",
+	detailsBtn: "_detailsBtn_nq4yy_82",
+	cardEditing: "_cardEditing_nq4yy_102",
+	detailsBtnFilled: "_detailsBtnFilled_nq4yy_106",
+	connectBtn: "_connectBtn_nq4yy_115",
+	connectBtnActive: "_connectBtnActive_nq4yy_140",
+	cardConnectingSource: "_cardConnectingSource_nq4yy_151",
+	cardConnectable: "_cardConnectable_nq4yy_156",
+	cardConnected: "_cardConnected_nq4yy_165",
+	connectOverlay: "_connectOverlay_nq4yy_171",
+	cardUnlinkable: "_cardUnlinkable_nq4yy_183",
+	inside: "_inside_nq4yy_189",
+	selectOverlay: "_selectOverlay_nq4yy_196",
+	selectMark: "_selectMark_nq4yy_201",
+	cardSelected: "_cardSelected_nq4yy_217",
+	connectOverlayConnected: "_connectOverlayConnected_nq4yy_227",
+	header: "_header_nq4yy_237",
+	cardWithDetails: "_cardWithDetails_nq4yy_241",
+	addInside: "_addInside_nq4yy_245",
+	dragHandle: "_dragHandle_nq4yy_257",
+	cardDragged: "_cardDragged_nq4yy_288",
+	cardZoomable: "_cardZoomable_nq4yy_300",
+	icon: "_icon_nq4yy_316",
+	headerText: "_headerText_nq4yy_323",
+	title: "_title_nq4yy_328",
+	description: "_description_nq4yy_336",
+	cardWide: "_cardWide_nq4yy_350",
+	editable: "_editable_nq4yy_366"
+}, ae = {
+	ArrowUp: -1,
+	ArrowLeft: -1,
+	ArrowDown: 1,
+	ArrowRight: 1
+}, w = {
 	S: 2,
 	M: 3,
 	L: 4,
 	F: 6
-}, E = {
+}, T = {
 	S: "⅓",
 	M: "½",
 	L: "⅔",
 	F: "1"
-}, D = {
+}, E = {
 	S: "a third",
 	M: "half",
 	L: "two thirds",
 	F: "full width"
 };
-function O(e) {
-	return u.reduce((t, n) => Math.abs(T[n] - e) < Math.abs(T[t] - e) ? n : t);
+function D(e) {
+	return u.reduce((t, n) => Math.abs(w[n] - e) < Math.abs(w[t] - e) ? n : t);
 }
-function ie({ block: e, editing: t, onRename: r, onDescribe: i, onDelete: a, onAddChild: l, onDrillIn: d, connectingFrom: f, canLinkTo: p, isConnected: m, onStartConnect: h, onConnectTarget: g, onRegisterEl: _, isDragged: ee, dropPosition: v, onDragStartBlock: te, onDragOverBlock: y, onDragEndBlock: T, onShowDetails: ie, selectable: k, selected: A, onToggleSelect: j, onResize: M }) {
-	let [N, P] = s(null), F = N ?? e.size ?? c, I = !!e.details?.trim(), ae = e.children?.length ?? 0, L = ae > 0, R = o(null), [z, B] = s(!1);
+function oe({ block: e, editing: t, onRename: r, onDescribe: i, onDelete: a, onAddChild: l, onDrillIn: d, connectingFrom: f, canLinkTo: p, isConnected: m, onStartConnect: h, onConnectTarget: g, onRegisterEl: _, isDragged: ee, dropPosition: v, canDropInside: te, onDragStartBlock: ne, onDragOverBlock: w, onDragEndBlock: oe, onMoveBy: se, onShowDetails: ce, selectable: O, selected: k, onToggleSelect: A, onResize: j }) {
+	let [M, N] = s(null), P = M ?? e.size ?? c, F = !!e.details?.trim(), le = e.children?.length ?? 0, I = le > 0, L = o(null), [R, z] = s(!1);
 	n(() => {
-		if (!z) return;
-		let e = () => B(!1);
+		if (!R) return;
+		let e = () => z(!1);
 		return window.addEventListener("pointerup", e), () => window.removeEventListener("pointerup", e);
-	}, [z]);
-	let V = F === "F" ? "y" : "x", H = f === e.id, U = f !== null && f !== e.id && p, W = f !== null && f !== e.id && !p, G = o(_);
-	G.current = _, n(() => (G.current(e.id, R.current), () => {
-		G.current(e.id, null);
+	}, [R]);
+	let B = P === "F" ? "y" : "x", V = f === e.id, H = f !== null && f !== e.id && p, U = f !== null && f !== e.id && !p, W = o(_);
+	W.current = _, n(() => (W.current(e.id, L.current), () => {
+		W.current(e.id, null);
 	}), [e.id]);
-	function K() {
-		let e = R.current.getBoundingClientRect();
+	function G() {
+		let e = L.current.getBoundingClientRect();
 		return {
 			left: e.left,
 			top: e.top,
@@ -167,124 +172,133 @@ function ie({ block: e, editing: t, onRename: r, onDescribe: i, onDelete: a, onA
 			height: e.height
 		};
 	}
-	function oe(t) {
-		if (!L || !R.current || t.target.closest("[data-text], [data-drag-handle], [data-resize-handle]")) return;
-		let n = window.getSelection();
-		n && !n.isCollapsed && R.current.contains(n.anchorNode) || d(e, K());
+	function ue(n) {
+		if (!I || !L.current) return;
+		let r = t ? "[data-text], [data-drag-handle], [data-resize-handle]" : "[data-drag-handle], [data-resize-handle]";
+		if (n.target.closest(r)) return;
+		let i = window.getSelection();
+		i && !i.isCollapsed && L.current.contains(i.anchorNode) || d(e, G());
 	}
-	let q = w.card;
-	return L && !U && !k && (q += ` ${w.cardZoomable}`), A && (q += ` ${w.cardSelected}`), F === "F" && (q += ` ${w.cardWide}`), N && (q += ` ${w.cardResizing}`), t ? q += ` ${w.cardEditing}` : I && (q += ` ${w.cardWithDetails}`), ee && (q += ` ${w.cardDragged}`), H ? q += ` ${w.cardConnectingSource}` : U && m ? q += ` ${w.cardConnected}` : U ? q += ` ${w.cardConnectable}` : W && (q += ` ${w.cardUnlinkable}`), /* @__PURE__ */ x("div", {
-		className: q,
-		ref: R,
+	let K = C.card;
+	return I && !H && !O && (K += ` ${C.cardZoomable}`), k && (K += ` ${C.cardSelected}`), P === "F" && (K += ` ${C.cardWide}`), M && (K += ` ${C.cardResizing}`), t ? K += ` ${C.cardEditing}` : F && (K += ` ${C.cardWithDetails}`), ee && (K += ` ${C.cardDragged}`), V ? K += ` ${C.cardConnectingSource}` : H && m ? K += ` ${C.cardConnected}` : H ? K += ` ${C.cardConnectable}` : U && (K += ` ${C.cardUnlinkable}`), /* @__PURE__ */ b("div", {
+		className: K,
+		ref: L,
 		"data-block-id": e.id,
-		"data-size": F,
+		"data-size": P,
 		"data-drop": v ?? void 0,
-		"data-axis": V,
-		onClick: oe,
-		draggable: t && z,
+		"data-axis": B,
+		onClick: ue,
+		draggable: t && R,
 		onDragStart: (t) => {
-			z ? (t.dataTransfer.effectAllowed = "move", t.dataTransfer.setData("text/plain", e.id), te(e.id)) : t.preventDefault();
+			R ? (t.dataTransfer.effectAllowed = "move", t.dataTransfer.setData("text/plain", e.id), ne(e.id)) : t.preventDefault();
 		},
 		onDragOver: (n) => {
 			if (!t) return;
-			let r = n.currentTarget.getBoundingClientRect(), i = V === "y" ? r.top + r.height / 2 : r.left + r.width / 2;
-			y(e.id, (V === "y" ? n.clientY : n.clientX) < i ? "before" : "after");
+			let r = n.currentTarget.getBoundingClientRect(), i = B === "y" ? (n.clientY - r.top) / r.height : (n.clientX - r.left) / r.width;
+			w(e.id, te && i > .25 && i < .75 ? "inside" : i < .5 ? "before" : "after");
 		},
 		onDragEnd: () => {
-			B(!1), T();
+			z(!1), oe();
 		},
 		children: [
-			t && /* @__PURE__ */ b("div", {
-				className: w.resizeHandle,
+			t && /* @__PURE__ */ y("div", {
+				className: C.resizeHandle,
 				"data-resize-handle": !0,
 				title: "Drag to resize",
 				"aria-hidden": "true",
 				onPointerDown: (t) => {
-					t.preventDefault(), t.stopPropagation(), t.currentTarget.setPointerCapture?.(t.pointerId), P(e.size ?? c);
+					t.preventDefault(), t.stopPropagation(), t.currentTarget.setPointerCapture?.(t.pointerId), N(e.size ?? c);
 				},
 				onPointerMove: (e) => {
-					if (!N || !R.current) return;
-					let t = R.current.parentElement;
+					if (!M || !L.current) return;
+					let t = L.current.parentElement;
 					if (!t) return;
-					let n = parseFloat(getComputedStyle(t).columnGap) || 0, r = (t.getBoundingClientRect().width - 5 * n) / 6, i = O((e.clientX - R.current.getBoundingClientRect().left + n) / (r + n));
-					i !== N && P(i);
+					let n = parseFloat(getComputedStyle(t).columnGap) || 0, r = (t.getBoundingClientRect().width - 5 * n) / 6, i = D((e.clientX - L.current.getBoundingClientRect().left + n) / (r + n));
+					i !== M && N(i);
 				},
 				onPointerUp: () => {
-					N && N !== (e.size ?? c) && M(e.id, N), P(null);
+					M && M !== (e.size ?? c) && j(e.id, M), N(null);
 				},
-				onPointerCancel: () => P(null)
+				onPointerCancel: () => N(null)
 			}),
-			t && /* @__PURE__ */ b("div", {
-				className: w.dragHandle,
+			t && /* @__PURE__ */ y("div", {
+				className: C.dragHandle,
 				"data-drag-handle": !0,
-				title: "Drag to reorder",
-				"aria-hidden": "true",
-				onPointerDown: () => B(!0)
+				role: "button",
+				tabIndex: 0,
+				"aria-label": `Move ${e.title}`,
+				"aria-keyshortcuts": "ArrowUp ArrowDown ArrowLeft ArrowRight",
+				title: "Drag to reorder, or focus and use the arrow keys",
+				onPointerDown: () => z(!0),
+				onKeyDown: (t) => {
+					let n = ae[t.key];
+					n && (t.preventDefault(), se(e.id, n));
+				}
 			}),
-			k && /* @__PURE__ */ b("button", {
-				className: `${w.connectOverlay} ${w.selectOverlay}`,
+			O && /* @__PURE__ */ y("button", {
+				className: `${C.connectOverlay} ${C.selectOverlay}`,
 				onClick: (t) => {
-					t.stopPropagation(), j(e.id);
+					t.stopPropagation(), A(e.id);
 				},
 				"aria-label": `Select ${e.title}`,
-				"aria-pressed": A,
-				children: /* @__PURE__ */ b("span", {
-					className: w.selectMark,
+				"aria-pressed": k,
+				children: /* @__PURE__ */ y("span", {
+					className: C.selectMark,
 					"aria-hidden": "true",
-					children: A ? "✓" : ""
+					children: k ? "✓" : ""
 				})
 			}),
-			U && /* @__PURE__ */ b("button", {
-				className: `${w.connectOverlay} ${m ? w.connectOverlayConnected : ""}`,
+			H && /* @__PURE__ */ y("button", {
+				className: `${C.connectOverlay} ${m ? C.connectOverlayConnected : ""}`,
 				onClick: (t) => {
 					t.stopPropagation(), g(e.id);
 				},
 				"aria-label": m ? `Disconnect from ${e.title}` : `Connect to ${e.title}`
 			}),
-			(t || I) && /* @__PURE__ */ b("button", {
-				className: `${w.detailsBtn} ${I ? w.detailsBtnFilled : ""}`,
+			(t || F) && /* @__PURE__ */ y("button", {
+				className: `${C.detailsBtn} ${F ? C.detailsBtnFilled : ""}`,
 				onClick: (t) => {
-					t.stopPropagation(), ie(e.id);
+					t.stopPropagation(), ce(e.id);
 				},
 				"aria-label": `Details of ${e.title}`,
-				title: I ? "Details" : "Add details",
-				children: /* @__PURE__ */ b(re, {})
+				title: F ? "Details" : "Add details",
+				children: /* @__PURE__ */ y(ie, {})
 			}),
-			t && /* @__PURE__ */ b("button", {
-				className: w.sizeBtn,
+			t && /* @__PURE__ */ y("button", {
+				className: C.sizeBtn,
 				onClick: (t) => {
-					t.stopPropagation(), M(e.id, u[(u.indexOf(F) + 1) % u.length]);
+					t.stopPropagation(), j(e.id, u[(u.indexOf(P) + 1) % u.length]);
 				},
-				"aria-label": `Size of ${e.title}: ${D[F]}`,
+				"aria-label": `Size of ${e.title}: ${E[P]}`,
 				title: "Size: click to change, or drag the right edge",
-				children: E[F]
+				children: T[P]
 			}),
-			t && /* @__PURE__ */ b("button", {
-				className: w.deleteBtn,
+			t && /* @__PURE__ */ y("button", {
+				className: C.deleteBtn,
 				onClick: (t) => {
 					t.stopPropagation(), a(e.id);
 				},
 				"aria-label": `Delete ${e.title}`,
-				children: /* @__PURE__ */ b(S, {})
+				children: /* @__PURE__ */ y(x, {})
 			}),
-			t && /* @__PURE__ */ b("button", {
-				className: `${w.connectBtn} ${H ? w.connectBtnActive : ""}`,
+			t && /* @__PURE__ */ y("button", {
+				className: `${C.connectBtn} ${V ? C.connectBtnActive : ""}`,
 				onClick: (t) => {
 					t.stopPropagation(), h(e.id);
 				},
-				"aria-label": H ? "Cancel connection" : `Connect from ${e.title}`,
-				title: H ? "Cancel" : "Connect to another block",
-				children: /* @__PURE__ */ b(C, {})
+				"aria-label": V ? "Cancel connection" : `Connect from ${e.title}`,
+				title: V ? "Cancel" : "Connect to another block",
+				children: /* @__PURE__ */ y(S, {})
 			}),
-			/* @__PURE__ */ x("div", {
-				className: w.header,
-				children: [e.icon && /* @__PURE__ */ b("span", {
-					className: w.icon,
+			/* @__PURE__ */ b("div", {
+				className: C.header,
+				children: [e.icon && /* @__PURE__ */ y("span", {
+					className: C.icon,
 					children: e.icon
-				}), /* @__PURE__ */ x("div", {
-					className: w.headerText,
-					children: [/* @__PURE__ */ b("h2", {
-						className: `${w.title} ${t ? w.editable : ""}`,
+				}), /* @__PURE__ */ b("div", {
+					className: C.headerText,
+					children: [/* @__PURE__ */ y("h2", {
+						className: `${C.title} ${t ? C.editable : ""}`,
 						"data-text": !0,
 						contentEditable: t || void 0,
 						suppressContentEditableWarning: !0,
@@ -293,8 +307,8 @@ function ie({ block: e, editing: t, onRename: r, onDescribe: i, onDelete: a, onA
 						} : void 0,
 						onBlur: t ? (t) => r(e.id, t.currentTarget.textContent ?? "") : void 0,
 						children: e.title
-					}, `title-${t}`), (e.description || t) && /* @__PURE__ */ b("p", {
-						className: `${w.description} ${t ? w.editable : ""}`,
+					}, `title-${t}`), (e.description || t) && /* @__PURE__ */ y("p", {
+						className: `${C.description} ${t ? C.editable : ""}`,
 						"data-text": !0,
 						contentEditable: t || void 0,
 						suppressContentEditableWarning: !0,
@@ -304,28 +318,28 @@ function ie({ block: e, editing: t, onRename: r, onDescribe: i, onDelete: a, onA
 					}, `desc-${t}`)]
 				})]
 			}),
-			L && /* @__PURE__ */ x("button", {
-				className: w.inside,
+			I && /* @__PURE__ */ b("button", {
+				className: C.inside,
 				"aria-label": `Zoom into ${e.title}`,
-				children: [ae, " more inside"]
+				children: [le, " more inside"]
 			}),
-			!L && t && /* @__PURE__ */ x("button", {
-				className: `${w.inside} ${w.addInside}`,
+			!I && t && /* @__PURE__ */ b("button", {
+				className: `${C.inside} ${C.addInside}`,
 				onClick: (t) => {
-					t.stopPropagation(), R.current && l(e, K());
+					t.stopPropagation(), L.current && l(e, G());
 				},
 				"aria-label": `Add child to ${e.title}`,
-				children: [/* @__PURE__ */ b(ne, { size: 11 }), " add inside"]
+				children: [/* @__PURE__ */ y(re, { size: 11 }), " add inside"]
 			})
 		]
 	});
 }
 // src/geometry.ts
-var k = 2;
-function A(e, t, n, r) {
+var se = 2;
+function ce(e, t, n, r) {
 	return e === "right" && t === "left" ? r.x - n.x : e === "left" && t === "right" ? n.x - r.x : e === "bottom" && t === "top" ? r.y - n.y : e === "top" && t === "bottom" ? n.y - r.y : null;
 }
-function j(e, t, n) {
+function O(e, t, n) {
 	switch (t) {
 		case "right": return {
 			x: e.x + n,
@@ -345,12 +359,12 @@ function j(e, t, n) {
 		};
 	}
 }
-function M(e, t, n) {
+function k(e, t, n) {
 	if (t <= 1) return 0;
 	let r = Math.min(16, n * .6 / t);
 	return (e - (t - 1) / 2) * r;
 }
-function N(e, t, n) {
+function A(e, t, n) {
 	let r = (e.left + e.right) / 2, i = (e.top + e.bottom) / 2, a = (t.left + t.right) / 2, o = (t.top + t.bottom) / 2, s = a - r, c = o - i;
 	if (Math.abs(c) < Math.min(e.height, t.height) * .5) {
 		let r = s >= 0;
@@ -371,28 +385,28 @@ function N(e, t, n) {
 		entryEdge: l ? "top" : "bottom"
 	};
 }
-function P(e, t, n, r, i) {
+function j(e, t, n, r, i) {
 	let a = (e.left + e.right) / 2, o = (e.top + e.bottom) / 2;
 	switch (t) {
 		case "right": return {
 			x: e.right - i.x,
-			y: o - i.y + M(n, r, e.height)
+			y: o - i.y + k(n, r, e.height)
 		};
 		case "left": return {
 			x: e.left - i.x,
-			y: o - i.y + M(n, r, e.height)
+			y: o - i.y + k(n, r, e.height)
 		};
 		case "bottom": return {
-			x: a - i.x + M(n, r, e.width),
+			x: a - i.x + k(n, r, e.width),
 			y: e.bottom - i.y
 		};
 		case "top": return {
-			x: a - i.x + M(n, r, e.width),
+			x: a - i.x + k(n, r, e.width),
 			y: e.top - i.y
 		};
 	}
 }
-function F(e, t, n, r, i, a, o) {
+function M(e, t, n, r, i, a, o) {
 	if (r === "bottom" && i === "bottom") {
 		let e = Math.max(a.y, o.y) + 32;
 		return [{
@@ -422,13 +436,13 @@ function F(e, t, n, r, i, a, o) {
 		y: s
 	}];
 }
-function I(e, t, n, r) {
+function N(e, t, n, r) {
 	return {
 		x: (e.x + 3 * t.x + 3 * n.x + r.x) / 8,
 		y: (e.y + 3 * t.y + 3 * n.y + r.y) / 8
 	};
 }
-function ae(e, t, n) {
+function P(e, t, n) {
 	let r = {
 		x: n.left,
 		y: n.top
@@ -442,7 +456,7 @@ function ae(e, t, n) {
 			...n,
 			fromRect: a,
 			toRect: o,
-			...N(a, o, s)
+			...A(a, o, s)
 		});
 	}
 	let a = /* @__PURE__ */ new Map(), o = (e, t, n) => {
@@ -455,21 +469,34 @@ function ae(e, t, n) {
 	return i.forEach((e, t) => {
 		o(`${e.fromId}-${e.exitEdge}`, t, "exit"), o(`${e.toId}-${e.entryEdge}`, t, "entry");
 	}), i.map((e, t) => {
-		let n = a.get(`${e.fromId}-${e.exitEdge}`), i = a.get(`${e.toId}-${e.entryEdge}`), o = n.findIndex((e) => e.ci === t && e.role === "exit"), s = i.findIndex((e) => e.ci === t && e.role === "entry"), c = P(e.fromRect, e.exitEdge, o, n.length, r), l = P(e.toRect, e.entryEdge, s, i.length, r), u = e.headAtStart ? 14 : 0, d = e.headAtEnd ? 14 : 0, f = A(e.exitEdge, e.entryEdge, c, l);
-		if (f !== null && u + d > f - k) {
-			let e = Math.max(0, f - k) / (u + d);
+		let n = a.get(`${e.fromId}-${e.exitEdge}`), i = a.get(`${e.toId}-${e.entryEdge}`), o = n.findIndex((e) => e.ci === t && e.role === "exit"), s = i.findIndex((e) => e.ci === t && e.role === "entry"), c = j(e.fromRect, e.exitEdge, o, n.length, r), l = j(e.toRect, e.entryEdge, s, i.length, r), u = e.headAtStart ? 14 : 0, d = e.headAtEnd ? 14 : 0, f = ce(e.exitEdge, e.entryEdge, c, l);
+		if (f !== null && u + d > f - se) {
+			let e = Math.max(0, f - se) / (u + d);
 			u *= e, d *= e;
 		}
-		let p = j(c, e.exitEdge, u), m = j(l, e.entryEdge, d), [h, g] = F(e.fromRect, e.toRect, r, e.exitEdge, e.entryEdge, p, m);
+		let p = O(c, e.exitEdge, u), m = O(l, e.entryEdge, d), [h, g] = M(e.fromRect, e.toRect, r, e.exitEdge, e.entryEdge, p, m);
 		return {
 			key: e.key,
 			d: `M ${p.x} ${p.y} C ${h.x} ${h.y}, ${g.x} ${g.y}, ${m.x} ${m.y}`,
-			mid: I(p, h, g, m),
+			mid: N(p, h, g, m),
 			vertical: e.exitEdge === "top" && e.entryEdge === "bottom" || e.exitEdge === "bottom" && e.entryEdge === "top"
 		};
 	});
 }
-var L = {
+// src/fit.ts
+var F = .6;
+function le(e, t, n, r) {
+	if (e <= 0 || !t.length || r <= .6) return r;
+	let i = /* @__PURE__ */ new Map();
+	for (let e of t) {
+		let t = Math.round(e.top);
+		i.set(t, Math.max(i.get(t) ?? 0, e.height));
+	}
+	let a = (i.size - 1) * n * r;
+	for (let e of i.values()) a += e;
+	return a <= e ? r : Math.max(F, Math.floor(e / a * r * 100) / 100);
+}
+var I = {
 	popover: "_popover_1b6n3_1",
 	close: "_close_1b6n3_19",
 	row: "_row_1b6n3_39",
@@ -481,7 +508,7 @@ var L = {
 	btn: "_btn_1b6n3_83",
 	btnActive: "_btnActive_1b6n3_105",
 	danger: "_danger_1b6n3_112"
-}, R = [
+}, L = [
 	{
 		value: "forward",
 		symbol: "→",
@@ -498,7 +525,7 @@ var L = {
 		label: "No direction"
 	}
 ];
-function z({ links: e, x: t, y: r, titleOf: i, onUpdate: a, onRemove: s, onClose: c }) {
+function R({ links: e, x: t, y: r, titleOf: i, onUpdate: a, onRemove: s, onClose: c }) {
 	let l = o(null);
 	return n(() => {
 		function e(e) {
@@ -510,9 +537,9 @@ function z({ links: e, x: t, y: r, titleOf: i, onUpdate: a, onRemove: s, onClose
 		return document.addEventListener("pointerdown", e), window.addEventListener("keydown", t), () => {
 			document.removeEventListener("pointerdown", e), window.removeEventListener("keydown", t);
 		};
-	}, [c]), /* @__PURE__ */ x("div", {
+	}, [c]), /* @__PURE__ */ b("div", {
 		ref: l,
-		className: L.popover,
+		className: I.popover,
 		style: {
 			left: t,
 			top: r
@@ -520,12 +547,12 @@ function z({ links: e, x: t, y: r, titleOf: i, onUpdate: a, onRemove: s, onClose
 		role: "dialog",
 		"aria-label": e.length === 1 ? "Link" : `${e.length} links`,
 		onClick: (e) => e.stopPropagation(),
-		children: [/* @__PURE__ */ b("button", {
-			className: L.close,
+		children: [/* @__PURE__ */ y("button", {
+			className: I.close,
 			onClick: c,
 			"aria-label": "Close",
-			children: /* @__PURE__ */ b(S, {})
-		}), e.map((e, t) => /* @__PURE__ */ b(B, {
+			children: /* @__PURE__ */ y(x, {})
+		}), e.map((e, t) => /* @__PURE__ */ y(z, {
 			link: e,
 			titleOf: i,
 			onUpdate: (t) => a(e, t),
@@ -533,7 +560,7 @@ function z({ links: e, x: t, y: r, titleOf: i, onUpdate: a, onRemove: s, onClose
 		}, e.id ?? t))]
 	});
 }
-function B({ link: e, titleOf: t, onUpdate: r, onRemove: i }) {
+function z({ link: e, titleOf: t, onUpdate: r, onRemove: i }) {
 	let [a, o] = s(e.label ?? "");
 	n(() => o(e.label ?? ""), [e.label]);
 	let c = e.direction ?? "forward";
@@ -541,24 +568,24 @@ function B({ link: e, titleOf: t, onUpdate: r, onRemove: i }) {
 		let t = a.trim();
 		t !== (e.label ?? "") && r({ label: t || void 0 });
 	}
-	return /* @__PURE__ */ x("div", {
-		className: L.row,
+	return /* @__PURE__ */ b("div", {
+		className: I.row,
 		children: [
-			/* @__PURE__ */ x("div", {
-				className: L.ends,
+			/* @__PURE__ */ b("div", {
+				className: I.ends,
 				children: [
 					t(e.from),
 					" ",
-					/* @__PURE__ */ b("span", {
-						className: L.endsArrow,
-						children: R.find((e) => e.value === c).symbol
+					/* @__PURE__ */ y("span", {
+						className: I.endsArrow,
+						children: L.find((e) => e.value === c).symbol
 					}),
 					" ",
 					t(e.to)
 				]
 			}),
-			/* @__PURE__ */ b("input", {
-				className: L.label,
+			/* @__PURE__ */ y("input", {
+				className: I.label,
 				value: a,
 				placeholder: "Label",
 				"aria-label": "Label",
@@ -568,15 +595,15 @@ function B({ link: e, titleOf: t, onUpdate: r, onRemove: i }) {
 					e.key === "Enter" && (e.preventDefault(), l());
 				}
 			}),
-			/* @__PURE__ */ x("div", {
-				className: L.actions,
+			/* @__PURE__ */ b("div", {
+				className: I.actions,
 				children: [
-					/* @__PURE__ */ b("div", {
-						className: L.directions,
+					/* @__PURE__ */ y("div", {
+						className: I.directions,
 						role: "group",
 						"aria-label": "Direction",
-						children: R.map((e) => /* @__PURE__ */ b("button", {
-							className: `${L.btn} ${c === e.value ? L.btnActive : ""}`,
+						children: L.map((e) => /* @__PURE__ */ y("button", {
+							className: `${I.btn} ${c === e.value ? I.btnActive : ""}`,
 							"aria-pressed": c === e.value,
 							"aria-label": e.label,
 							title: e.label,
@@ -584,8 +611,8 @@ function B({ link: e, titleOf: t, onUpdate: r, onRemove: i }) {
 							children: e.symbol
 						}, e.value))
 					}),
-					/* @__PURE__ */ b("button", {
-						className: L.btn,
+					/* @__PURE__ */ y("button", {
+						className: I.btn,
 						onClick: () => r({
 							from: e.to,
 							to: e.from
@@ -595,8 +622,8 @@ function B({ link: e, titleOf: t, onUpdate: r, onRemove: i }) {
 						disabled: c !== "forward",
 						children: "⇄"
 					}),
-					/* @__PURE__ */ b("button", {
-						className: `${L.btn} ${L.danger}`,
+					/* @__PURE__ */ y("button", {
+						className: `${I.btn} ${I.danger}`,
 						onClick: i,
 						"aria-label": "Delete link",
 						title: "Delete link",
@@ -608,8 +635,8 @@ function B({ link: e, titleOf: t, onUpdate: r, onRemove: i }) {
 	});
 }
 // src/markdown.tsx
-var V = /^(https?:\/\/|mailto:)/i;
-function H(e) {
+var B = /^(https?:\/\/|mailto:)/i;
+function V(e) {
 	let t = e.replace(/\r\n?/g, "\n").split("\n"), n = [], r = 0;
 	for (; r < t.length;) {
 		let e = t[r];
@@ -655,25 +682,25 @@ function H(e) {
 	}
 	return n;
 }
-var U = /`([^`]+)`|\*\*([^*]+)\*\*|\*([^*]+)\*|\[([^\]]+)\]\(([^)\s]+)\)|\n/g;
-function W(t) {
+var H = /`([^`]+)`|\*\*([^*]+)\*\*|\*([^*]+)\*|\[([^\]]+)\]\(([^)\s]+)\)|\n/g;
+function U(t) {
 	let n = [], r = 0, i = 0;
-	for (let a of t.matchAll(U)) {
+	for (let a of t.matchAll(H)) {
 		a.index > r && n.push(t.slice(r, a.index));
 		let [o, s, c, l, u, d] = a;
-		s === void 0 ? c === void 0 ? l === void 0 ? u === void 0 ? o === "\n" && n.push(/* @__PURE__ */ b("br", {}, i++)) : n.push(V.test(d) ? /* @__PURE__ */ b("a", {
+		s === void 0 ? c === void 0 ? l === void 0 ? u === void 0 ? o === "\n" && n.push(/* @__PURE__ */ y("br", {}, i++)) : n.push(B.test(d) ? /* @__PURE__ */ y("a", {
 			href: d,
 			target: "_blank",
 			rel: "noopener noreferrer",
-			children: W(u)
-		}, i++) : /* @__PURE__ */ b(e, { children: W(u) }, i++)) : n.push(/* @__PURE__ */ b("em", { children: W(l) }, i++)) : n.push(/* @__PURE__ */ b("strong", { children: W(c) }, i++)) : n.push(/* @__PURE__ */ b("code", { children: s }, i++)), r = a.index + o.length;
+			children: U(u)
+		}, i++) : /* @__PURE__ */ y(e, { children: U(u) }, i++)) : n.push(/* @__PURE__ */ y("em", { children: U(l) }, i++)) : n.push(/* @__PURE__ */ y("strong", { children: U(c) }, i++)) : n.push(/* @__PURE__ */ y("code", { children: s }, i++)), r = a.index + o.length;
 	}
 	return r < t.length && n.push(t.slice(r)), n;
 }
-function G({ source: e, className: t }) {
-	return /* @__PURE__ */ b("div", {
+function W({ source: e, className: t }) {
+	return /* @__PURE__ */ y("div", {
 		className: t,
-		children: H(e).map((e, t) => {
+		children: V(e).map((e, t) => {
 			switch (e.kind) {
 				case "heading": {
 					let n = [
@@ -681,19 +708,19 @@ function G({ source: e, className: t }) {
 						"h4",
 						"h5"
 					][e.level - 1];
-					return /* @__PURE__ */ b(n, { children: W(e.text) }, t);
+					return /* @__PURE__ */ y(n, { children: U(e.text) }, t);
 				}
-				case "paragraph": return /* @__PURE__ */ b("p", { children: W(e.text) }, t);
+				case "paragraph": return /* @__PURE__ */ y("p", { children: U(e.text) }, t);
 				case "list": {
 					let n = e.ordered ? "ol" : "ul";
-					return /* @__PURE__ */ b(n, { children: e.items.map((e, t) => /* @__PURE__ */ b("li", { children: W(e) }, t)) }, t);
+					return /* @__PURE__ */ y(n, { children: e.items.map((e, t) => /* @__PURE__ */ y("li", { children: U(e) }, t)) }, t);
 				}
-				case "code": return /* @__PURE__ */ b("pre", { children: /* @__PURE__ */ b("code", { children: e.text }) }, t);
+				case "code": return /* @__PURE__ */ y("pre", { children: /* @__PURE__ */ y("code", { children: e.text }) }, t);
 			}
 		})
 	});
 }
-var K = {
+var G = {
 	panel: "_panel_24xow_1",
 	slideIn: "_slideIn_24xow_1",
 	close: "_close_24xow_24",
@@ -706,7 +733,7 @@ var K = {
 	empty: "_empty_24xow_124"
 };
 // src/DetailsPanel.tsx
-function oe({ block: e, editing: t, onChange: r, onClose: i }) {
+function ue({ block: e, editing: t, onChange: r, onClose: i }) {
 	let [a, o] = s(e.details ?? "");
 	n(() => o(e.details ?? ""), [e.id, e.details]), n(() => {
 		function e(e) {
@@ -717,95 +744,96 @@ function oe({ block: e, editing: t, onChange: r, onClose: i }) {
 	function c() {
 		a !== (e.details ?? "") && r(a);
 	}
-	return /* @__PURE__ */ x("aside", {
-		className: K.panel,
+	return /* @__PURE__ */ b("aside", {
+		className: G.panel,
 		"aria-label": `Details: ${e.title}`,
 		children: [
-			/* @__PURE__ */ b("button", {
-				className: K.close,
+			/* @__PURE__ */ y("button", {
+				className: G.close,
 				onClick: i,
 				"aria-label": "Close details",
-				children: /* @__PURE__ */ b(S, {})
+				children: /* @__PURE__ */ y(x, {})
 			}),
-			/* @__PURE__ */ x("div", {
-				className: K.head,
-				children: [e.icon && /* @__PURE__ */ b("span", {
-					className: K.icon,
+			/* @__PURE__ */ b("div", {
+				className: G.head,
+				children: [e.icon && /* @__PURE__ */ y("span", {
+					className: G.icon,
 					children: e.icon
-				}), /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("h2", {
-					className: K.title,
+				}), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("h2", {
+					className: G.title,
 					children: e.title
-				}), e.description && /* @__PURE__ */ b("p", {
-					className: K.description,
+				}), e.description && /* @__PURE__ */ y("p", {
+					className: G.description,
 					children: e.description
 				})] })]
 			}),
-			t ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("textarea", {
-				className: K.editor,
+			t ? /* @__PURE__ */ b(ne, { children: [/* @__PURE__ */ y("textarea", {
+				className: G.editor,
 				value: a,
 				placeholder: "Details in Markdown: **bold**, *italic*, `code`, lists, [links](https://…)",
 				"aria-label": "Details (Markdown)",
 				onChange: (e) => o(e.target.value),
 				onBlur: c
-			}), a.trim() && /* @__PURE__ */ b(G, {
+			}), a.trim() && /* @__PURE__ */ y(W, {
 				source: a,
-				className: K.body
-			})] }) : e.details?.trim() ? /* @__PURE__ */ b(G, {
+				className: G.body
+			})] }) : e.details?.trim() ? /* @__PURE__ */ y(W, {
 				source: e.details,
-				className: K.body
-			}) : /* @__PURE__ */ b("p", {
-				className: K.empty,
+				className: G.body
+			}) : /* @__PURE__ */ y("p", {
+				className: G.empty,
 				children: "No details"
 			})
 		]
 	});
 }
-var q = {
-	viewer: "_viewer_1knu3_1",
-	breadcrumb: "_breadcrumb_1knu3_10",
-	crumbItem: "_crumbItem_1knu3_20",
-	crumbSep: "_crumbSep_1knu3_26",
-	crumb: "_crumb_1knu3_20",
-	crumbActive: "_crumbActive_1knu3_51",
-	backdrop: "_backdrop_1knu3_54",
-	slide: "_slide_1knu3_62",
-	slideCard: "_slideCard_1knu3_73",
-	slideHeader: "_slideHeader_1knu3_83",
-	headerDetailsBtn: "_headerDetailsBtn_1knu3_91",
-	slideHeaderTop: "_slideHeaderTop_1knu3_112",
-	slideIcon: "_slideIcon_1knu3_116",
-	slideHeaderText: "_slideHeaderText_1knu3_123",
-	slideTitle: "_slideTitle_1knu3_128",
-	slideDescription: "_slideDescription_1knu3_136",
-	gridArea: "_gridArea_1knu3_144",
-	arrowSvg: "_arrowSvg_1knu3_153",
-	arrow: "_arrow_1knu3_153",
-	arrowSvgEditing: "_arrowSvgEditing_1knu3_171",
-	arrowHit: "_arrowHit_1knu3_171",
-	arrowLabel: "_arrowLabel_1knu3_184",
-	arrowLabelOpen: "_arrowLabelOpen_1knu3_189",
-	arrowIndirect: "_arrowIndirect_1knu3_193",
-	arrowHead: "_arrowHead_1knu3_197",
-	empty: "_empty_1knu3_211",
-	gridAreaNested: "_gridAreaNested_1knu3_218",
-	grid: "_grid_1knu3_144",
-	levelTools: "_levelTools_1knu3_243",
-	groupBtn: "_groupBtn_1knu3_249",
-	groupBtnActive: "_groupBtnActive_1knu3_266",
-	fullHint: "_fullHint_1knu3_273",
-	addBlock: "_addBlock_1knu3_280",
-	linkBar: "_linkBar_1knu3_301",
-	linkBarCancel: "_linkBarCancel_1knu3_319"
+var K = {
+	viewer: "_viewer_1wq71_1",
+	breadcrumb: "_breadcrumb_1wq71_10",
+	crumbItem: "_crumbItem_1wq71_20",
+	crumbSep: "_crumbSep_1wq71_26",
+	crumb: "_crumb_1wq71_20",
+	crumbActive: "_crumbActive_1wq71_51",
+	crumbDrop: "_crumbDrop_1wq71_54",
+	backdrop: "_backdrop_1wq71_61",
+	slide: "_slide_1wq71_69",
+	slideCard: "_slideCard_1wq71_80",
+	slideHeader: "_slideHeader_1wq71_90",
+	headerDetailsBtn: "_headerDetailsBtn_1wq71_98",
+	slideHeaderTop: "_slideHeaderTop_1wq71_119",
+	slideIcon: "_slideIcon_1wq71_123",
+	slideHeaderText: "_slideHeaderText_1wq71_130",
+	slideTitle: "_slideTitle_1wq71_135",
+	slideDescription: "_slideDescription_1wq71_143",
+	gridArea: "_gridArea_1wq71_152",
+	arrowSvg: "_arrowSvg_1wq71_162",
+	arrow: "_arrow_1wq71_162",
+	arrowSvgEditing: "_arrowSvgEditing_1wq71_180",
+	arrowHit: "_arrowHit_1wq71_180",
+	arrowLabel: "_arrowLabel_1wq71_193",
+	arrowLabelOpen: "_arrowLabelOpen_1wq71_198",
+	arrowIndirect: "_arrowIndirect_1wq71_202",
+	arrowHead: "_arrowHead_1wq71_206",
+	empty: "_empty_1wq71_220",
+	gridAreaNested: "_gridAreaNested_1wq71_227",
+	grid: "_grid_1wq71_150",
+	levelTools: "_levelTools_1wq71_258",
+	groupBtn: "_groupBtn_1wq71_264",
+	groupBtnActive: "_groupBtnActive_1wq71_281",
+	fullHint: "_fullHint_1wq71_288",
+	addBlock: "_addBlock_1wq71_295",
+	linkBar: "_linkBar_1wq71_316",
+	linkBarCancel: "_linkBarCancel_1wq71_334"
 };
 // src/Viewer.tsx
-function se(e) {
+function de(e) {
 	let t = [...new Set(e.links.map((e) => e.label).filter((e) => !!e))];
 	return e.links.length > 2 ? `${e.links.length} links` : t.length ? t.join(", ") : void 0;
 }
-function J(e) {
+function fe(e) {
 	return [e.from, e.to].sort().join("|");
 }
-function ce(e) {
+function pe(e) {
 	return {
 		left: e.left,
 		top: e.top,
@@ -815,23 +843,23 @@ function ce(e) {
 		height: e.height
 	};
 }
-function le({ document: e, editing: c, actions: u }) {
-	let d = o(null), f = o(null), m = o(!1), g = o(!1), _ = o(/* @__PURE__ */ new Map()), ee = o(null), v = r(), [y, S] = s(null), [C, w] = s(null), [T, E] = s(null), [D, O] = s(null), k = t(() => O(null), []), [A, j] = s(null), M = t(() => j(null), []), [N, P] = s(null), [F, I] = s([]), [L, R] = s([]), [B, V] = s(0), [H, U] = s(0), [W, G] = s(0), K = a(() => p(e), [e]), le = A ? K.get(A)?.block : void 0, Y = a(() => {
-		let e = L.findIndex((e) => !K.has(e.id));
+function q({ document: e, editing: c, actions: u }) {
+	let d = o(null), f = o(null), m = o(!1), g = o(!1), _ = o(/* @__PURE__ */ new Map()), ee = o(null), v = o(null), ne = r(), [x, S] = s(null), [C, ae] = s(null), [w, T] = s(null), [E, D] = s(null), se = t(() => D(null), []), [ce, O] = s(null), k = t(() => O(null), []), [A, j] = s(null), [M, N] = s(null), [F, I] = s([]), [L, z] = s([]), [B, V] = s(0), [H, U] = s(0), [W, G] = s(0), [q, me] = s(1), J = a(() => p(e), [e]), he = ce ? J.get(ce)?.block : void 0, Y = a(() => {
+		let e = L.findIndex((e) => !J.has(e.id));
 		return e === -1 ? L : L.slice(0, e);
-	}, [L, K]);
+	}, [L, J]);
 	n(() => {
-		Y !== L && R(Y);
+		Y !== L && z(Y);
 	}, [Y, L]);
-	let X = Y.length ? Y[Y.length - 1].id : null, Z = X === null ? void 0 : K.get(X)?.block, Q = a(() => h(e, X, K).slice(0, l), [
+	let X = Y.length ? Y[Y.length - 1].id : null, Z = X === null ? void 0 : J.get(X)?.block, Q = a(() => h(e, X, J).slice(0, l), [
 		e,
 		X,
-		K
-	]), $ = a(() => te(e, X, K), [
+		J
+	]), $ = a(() => te(e, X, J), [
 		e,
 		X,
-		K
-	]), ue = X !== null, de = c && Q.length < l;
+		J
+	]), ge = X !== null, _e = c && Q.length < l;
 	i(() => {
 		let e = d.current;
 		if (!e) return;
@@ -850,12 +878,12 @@ function le({ document: e, editing: c, actions: u }) {
 			}, { once: !0 });
 		});
 	}, [B]), n(() => {
-		c || (S(null), O(null), E(null));
-	}, [c]), n(() => E(null), [X]), n(() => {
-		D && !$.some((e) => J(e) === D) && O(null);
-	}, [$, D]), n(() => {
+		c || (S(null), D(null), T(null));
+	}, [c]), n(() => T(null), [X]), n(() => {
+		E && !$.some((e) => fe(e) === E) && D(null);
+	}, [$, E]), n(() => {
 		function e(e) {
-			e.key === "Escape" && (S(null), E(null));
+			e.key === "Escape" && (S(null), T(null));
 		}
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, []), n(() => {
@@ -867,14 +895,14 @@ function le({ document: e, editing: c, actions: u }) {
 				return;
 			}
 			let t = /* @__PURE__ */ new Map();
-			for (let [e, n] of _.current) t.set(e, ce(n.getBoundingClientRect()));
-			I(ae($.map((e) => ({
+			for (let [e, n] of _.current) t.set(e, pe(n.getBoundingClientRect()));
+			I(P($.map((e) => ({
 				key: e.key,
 				fromId: e.from,
 				toId: e.to,
 				headAtStart: e.direction === "both",
 				headAtEnd: e.direction !== "none"
-			})), t, ce(e.getBoundingClientRect())));
+			})), t, pe(e.getBoundingClientRect())));
 		}
 		if (t) {
 			I([]);
@@ -890,232 +918,274 @@ function le({ document: e, editing: c, actions: u }) {
 		H,
 		W
 	]);
-	let fe = o(null);
+	let ve = o("");
+	i(() => {
+		let e = v.current, t = d.current;
+		if (!e || t && (t.style.transform !== "" || t.style.transition !== "")) return;
+		let n = e.getBoundingClientRect(), r = `${Math.round(n.width)}x${Math.round(n.height)}|${Q.map((e) => e.id).join()}|${c}`;
+		if (r !== ve.current && (ve.current = r, q !== 1)) {
+			me(1);
+			return;
+		}
+		let i = [...e.children].map((e) => pe(e.getBoundingClientRect())), a = parseFloat(getComputedStyle(e).rowGap) || 0, o = le(n.height, i, a, q);
+		o !== q && me(o);
+	}, [
+		Q,
+		c,
+		H,
+		W,
+		B,
+		q
+	]);
+	let ye = o(null);
 	n(() => {
 		let e = ee.current;
 		if (!e || typeof ResizeObserver > "u") return;
 		let t = new ResizeObserver(() => U((e) => e + 1));
-		fe.current = t, t.observe(e);
+		ye.current = t, t.observe(e);
 		for (let e of _.current.values()) t.observe(e);
 		return () => {
-			t.disconnect(), fe.current = null;
+			t.disconnect(), ye.current = null;
 		};
 	}, []);
-	let pe = t((e, t) => {
+	let be = t((e, t) => {
 		let n = _.current.get(e);
-		n && fe.current?.unobserve(n), t ? (_.current.set(e, t), fe.current?.observe(t)) : _.current.delete(e);
-	}, []), me = a(() => {
+		n && ye.current?.unobserve(n), t ? (_.current.set(e, t), ye.current?.observe(t)) : _.current.delete(e);
+	}, []), xe = a(() => {
 		let e = new Map($.map((e) => [e.key, e]));
 		return F.flatMap((t) => {
 			let n = e.get(t.key);
 			return n ? [{
 				...t,
 				link: n,
-				label: se(n)
+				label: de(n)
 			}] : [];
 		});
-	}, [F, $]), he = t((e) => {
-		if (!y || e === y) return !1;
-		let t = K.get(y), n = K.get(e);
-		return !t || !n ? !1 : !t.path.includes(e) && !n.path.includes(y);
-	}, [y, K]), ge = y ? K.get(y)?.block : void 0, _e = a(() => y ? new Set((e.links ?? []).filter((e) => e.from === y).map((e) => e.to)) : /* @__PURE__ */ new Set(), [e.links, y]);
-	function ve(e, t) {
-		f.current = t, R((n) => [...n, {
+	}, [F, $]), Se = t((e) => {
+		if (!x || e === x) return !1;
+		let t = J.get(x), n = J.get(e);
+		return !t || !n ? !1 : !t.path.includes(e) && !n.path.includes(x);
+	}, [x, J]), Ce = x ? J.get(x)?.block : void 0, we = a(() => x ? new Set((e.links ?? []).filter((e) => e.from === x).map((e) => e.to)) : /* @__PURE__ */ new Set(), [e.links, x]);
+	function Te(e, t) {
+		f.current = t, z((n) => [...n, {
 			id: e.id,
 			cardRect: t
 		}]), V((e) => e + 1);
 	}
-	function ye(e, t) {
-		u.add(e.id), ve(e, t);
+	function Ee(e, t) {
+		u.add(e.id), Te(e, t);
 	}
-	function be(e) {
+	function De(e) {
 		if (e >= Y.length) return;
 		let t = Y[Y.length - 1]?.cardRect, n = d.current;
 		if (t && n) {
 			let r = n.getBoundingClientRect(), i = t.width / r.width, a = t.height / r.height, o = t.left + t.width / 2 - (r.left + r.width / 2), s = t.top + t.height / 2 - (r.top + r.height / 2);
 			n.style.transition = "transform 0.35s cubic-bezier(0.4, 0, 0.8, 0)", n.style.transformOrigin = "center center", n.style.transform = `translate(${o}px, ${s}px) scale(${i}, ${a})`, g.current = !0, setTimeout(() => {
-				g.current = !1, m.current = !0, R((t) => t.slice(0, e)), V((e) => e + 1);
+				g.current = !1, m.current = !0, z((t) => t.slice(0, e)), V((e) => e + 1);
 			}, 370);
-		} else R((t) => t.slice(0, e)), V((e) => e + 1);
+		} else z((t) => t.slice(0, e)), V((e) => e + 1);
 	}
-	function xe() {
-		w(null), P(null);
+	function Oe() {
+		ae(null), j(null), N(null);
 	}
-	function Se() {
-		if (C && N && N.id !== C) {
-			let e = Q.map((e) => e.id).filter((e) => e !== C).indexOf(N.id) + +(N.position === "after");
+	function ke() {
+		if (C && A?.position === "inside" && A.id !== C) u.move(C, A.id, J.get(A.id)?.block.children?.length ?? 0);
+		else if (C && A && A.id !== C) {
+			let e = Q.map((e) => e.id).filter((e) => e !== C).indexOf(A.id) + +(A.position === "after");
 			e !== Q.findIndex((e) => e.id === C) && u.move(C, X, e);
 		}
-		xe();
+		Oe();
 	}
-	let Ce = c ? {
+	let Ae = (e) => e === 0 ? null : Y[e - 1].id, je = (t) => h(e, t, J).length < l, Me = (t) => c && t < Y.length ? {
+		onDragOver: (e) => {
+			C && je(Ae(t)) && (e.preventDefault(), j(null), M !== t && N(t));
+		},
+		onDragLeave: () => N(null),
+		onDrop: (n) => {
+			n.preventDefault();
+			let r = Ae(t);
+			C && u.move(C, r, h(e, r, J).length), Oe();
+		}
+	} : {}, Ne = o(null);
+	function Pe(e, t) {
+		let n = Q.findIndex((t) => t.id === e), r = n + t;
+		n === -1 || r < 0 || r >= Q.length || (Ne.current = e, u.move(e, X, r));
+	}
+	n(() => {
+		let e = Ne.current;
+		e && (Ne.current = null, v.current?.querySelector(`[data-block-id="${CSS.escape(e)}"] [data-drag-handle]`)?.focus());
+	}, [Q]);
+	let Fe = c ? {
 		onDragOver: (e) => {
 			C && e.preventDefault();
 		},
 		onDrop: (e) => {
-			e.preventDefault(), Se();
+			e.preventDefault(), ke();
 		}
 	} : {};
-	function we(e) {
-		y && (u.toggleLink(y, e), S(null));
+	function Ie(e) {
+		x && (u.toggleLink(x, e), S(null));
 	}
-	let Te = [{ label: e.title }, ...Y.map((e) => ({ label: K.get(e.id)?.block.title ?? "" }))], Ee = (e) => /* @__PURE__ */ b(ie, {
+	let Le = [{ label: e.title }, ...Y.map((e) => ({ label: J.get(e.id)?.block.title ?? "" }))], Re = (e) => /* @__PURE__ */ y(oe, {
 		block: e,
 		editing: c,
 		onRename: u.rename,
 		onDescribe: u.describe,
 		onDelete: u.remove,
-		onAddChild: ye,
-		onDrillIn: ve,
-		connectingFrom: y,
-		canLinkTo: he(e.id),
-		isConnected: _e.has(e.id),
-		onStartConnect: (e) => S(e === y ? null : e),
-		onConnectTarget: we,
-		onRegisterEl: pe,
+		onAddChild: Ee,
+		onDrillIn: Te,
+		connectingFrom: x,
+		canLinkTo: Se(e.id),
+		isConnected: we.has(e.id),
+		onStartConnect: (e) => S(e === x ? null : e),
+		onConnectTarget: Ie,
+		onRegisterEl: be,
 		isDragged: C === e.id,
-		dropPosition: C && N?.id === e.id && N.id !== C ? N.position : null,
-		onDragStartBlock: w,
+		dropPosition: C && A?.id === e.id && A.id !== C ? A.position : null,
+		canDropInside: !!C && C !== e.id && (e.children?.length ?? 0) < l,
+		onDragStartBlock: ae,
 		onDragOverBlock: (e, t) => {
-			C && (N?.id !== e || N.position !== t) && P({
+			C && (A?.id !== e || A.position !== t) && j({
 				id: e,
 				position: t
 			});
 		},
-		onDragEndBlock: xe,
-		onShowDetails: j,
-		selectable: T !== null,
-		selected: T?.includes(e.id) ?? !1,
-		onToggleSelect: (e) => E((t) => t && (t.includes(e) ? t.filter((t) => t !== e) : [...t, e])),
+		onDragEndBlock: Oe,
+		onMoveBy: Pe,
+		onShowDetails: O,
+		selectable: w !== null,
+		selected: w?.includes(e.id) ?? !1,
+		onToggleSelect: (e) => T((t) => t && (t.includes(e) ? t.filter((t) => t !== e) : [...t, e])),
 		onResize: u.setSize
-	}, e.id), De = () => /* @__PURE__ */ b("button", {
-		className: q.addBlock,
+	}, e.id), ze = () => /* @__PURE__ */ y("button", {
+		className: K.addBlock,
 		onClick: () => u.add(X),
 		"aria-label": "Add block",
-		children: /* @__PURE__ */ b(ne, {})
+		children: /* @__PURE__ */ y(re, {})
 	});
-	return /* @__PURE__ */ x("div", {
-		className: q.viewer,
+	return /* @__PURE__ */ b("div", {
+		className: K.viewer,
 		children: [
-			ue && /* @__PURE__ */ b("nav", {
-				className: q.breadcrumb,
+			ge && /* @__PURE__ */ y("nav", {
+				className: K.breadcrumb,
 				"aria-label": "Breadcrumb",
 				onClick: (e) => {
-					e.target.closest("button") || g.current || be(Y.length - 1);
+					e.target.closest("button") || g.current || De(Y.length - 1);
 				},
-				children: Te.map((e, t) => /* @__PURE__ */ x("span", {
-					className: q.crumbItem,
-					children: [t > 0 && /* @__PURE__ */ b("span", {
-						className: q.crumbSep,
+				children: Le.map((e, t) => /* @__PURE__ */ b("span", {
+					className: K.crumbItem,
+					children: [t > 0 && /* @__PURE__ */ y("span", {
+						className: K.crumbSep,
 						children: "/"
-					}), /* @__PURE__ */ b("button", {
-						className: `${q.crumb} ${t === Te.length - 1 ? q.crumbActive : ""}`,
-						onClick: () => be(t),
-						disabled: t === Te.length - 1,
-						"aria-current": t === Te.length - 1 ? "location" : void 0,
+					}), /* @__PURE__ */ y("button", {
+						className: `${K.crumb} ${t === Le.length - 1 ? K.crumbActive : ""} ${M === t ? K.crumbDrop : ""}`,
+						onClick: () => De(t),
+						disabled: t === Le.length - 1,
+						"aria-current": t === Le.length - 1 ? "location" : void 0,
+						...Me(t),
 						children: e.label
 					})]
 				}, t))
 			}),
-			T && /* @__PURE__ */ x("div", {
-				className: q.linkBar,
+			w && /* @__PURE__ */ b("div", {
+				className: K.linkBar,
 				role: "status",
 				children: [
-					/* @__PURE__ */ x("span", { children: [
+					/* @__PURE__ */ b("span", { children: [
 						"Select blocks to group: ",
-						/* @__PURE__ */ b("strong", { children: T.length }),
+						/* @__PURE__ */ y("strong", { children: w.length }),
 						" selected"
 					] }),
-					/* @__PURE__ */ b("button", {
-						className: q.linkBarCancel,
-						disabled: T.length < 2,
+					/* @__PURE__ */ y("button", {
+						className: K.linkBarCancel,
+						disabled: w.length < 2,
 						onClick: () => {
-							u.group(T), E(null);
+							u.group(w), T(null);
 						},
 						children: "Group"
 					}),
-					/* @__PURE__ */ b("button", {
-						className: q.linkBarCancel,
-						onClick: () => E(null),
+					/* @__PURE__ */ y("button", {
+						className: K.linkBarCancel,
+						onClick: () => T(null),
 						children: "Cancel"
 					})
 				]
 			}),
-			ge && /* @__PURE__ */ x("div", {
-				className: q.linkBar,
+			Ce && /* @__PURE__ */ b("div", {
+				className: K.linkBar,
 				role: "status",
-				children: [/* @__PURE__ */ x("span", { children: [
+				children: [/* @__PURE__ */ b("span", { children: [
 					"Linking from ",
-					/* @__PURE__ */ b("strong", { children: ge.title }),
+					/* @__PURE__ */ y("strong", { children: Ce.title }),
 					": click a block on any level"
-				] }), /* @__PURE__ */ b("button", {
-					className: q.linkBarCancel,
+				] }), /* @__PURE__ */ y("button", {
+					className: K.linkBarCancel,
 					onClick: () => S(null),
 					children: "Cancel"
 				})]
 			}),
-			ue && /* @__PURE__ */ b("div", {
-				className: q.backdrop,
+			ge && /* @__PURE__ */ y("div", {
+				className: K.backdrop,
 				onClick: () => {
-					g.current || be(Y.length - 1);
+					g.current || De(Y.length - 1);
 				},
 				"aria-hidden": "true"
 			}),
-			/* @__PURE__ */ x("div", {
+			/* @__PURE__ */ b("div", {
 				ref: d,
-				className: `${q.slide} ${ue ? q.slideCard : ""}`,
+				className: `${K.slide} ${ge ? K.slideCard : ""}`,
 				children: [(() => {
 					let t = Z ?? {
 						title: e.title,
 						description: e.description,
 						icon: void 0
 					};
-					return /* @__PURE__ */ x("div", {
-						className: `${q.slideHeader} ${Z ? "" : q.slideHeaderTop}`,
+					return /* @__PURE__ */ b("div", {
+						className: `${K.slideHeader} ${Z ? "" : K.slideHeaderTop}`,
 						children: [
-							t.icon && /* @__PURE__ */ b("span", {
-								className: q.slideIcon,
+							t.icon && /* @__PURE__ */ y("span", {
+								className: K.slideIcon,
 								children: t.icon
 							}),
-							/* @__PURE__ */ x("div", {
-								className: q.slideHeaderText,
-								children: [/* @__PURE__ */ b("h1", {
-									className: q.slideTitle,
+							/* @__PURE__ */ b("div", {
+								className: K.slideHeaderText,
+								children: [/* @__PURE__ */ y("h1", {
+									className: K.slideTitle,
 									children: t.title
-								}), t.description && /* @__PURE__ */ b("p", {
-									className: q.slideDescription,
+								}), t.description && /* @__PURE__ */ y("p", {
+									className: K.slideDescription,
 									children: t.description
 								})]
 							}),
-							Z && (c || Z.details?.trim()) && /* @__PURE__ */ x("button", {
-								className: q.headerDetailsBtn,
-								onClick: () => j(Z.id),
+							Z && (c || Z.details?.trim()) && /* @__PURE__ */ b("button", {
+								className: K.headerDetailsBtn,
+								onClick: () => O(Z.id),
 								"aria-label": `Details of ${Z.title}`,
 								children: [
-									/* @__PURE__ */ b(re, {}),
+									/* @__PURE__ */ y(ie, {}),
 									" ",
 									Z.details?.trim() ? "Details" : "Add details"
 								]
 							})
 						]
 					});
-				})(), /* @__PURE__ */ x("div", {
+				})(), /* @__PURE__ */ b("div", {
 					ref: ee,
-					className: `${q.gridArea} ${ue ? q.gridAreaNested : ""}`,
+					className: `${K.gridArea} ${ge ? K.gridAreaNested : ""}`,
 					children: [
-						c && Q.length >= 2 && /* @__PURE__ */ x("div", {
-							className: q.levelTools,
+						c && Q.length >= 2 && /* @__PURE__ */ b("div", {
+							className: K.levelTools,
 							role: "group",
 							"aria-label": "Level tools",
-							children: [/* @__PURE__ */ b("button", {
-								className: `${q.groupBtn} ${T ? q.groupBtnActive : ""}`,
+							children: [/* @__PURE__ */ y("button", {
+								className: `${K.groupBtn} ${w ? K.groupBtnActive : ""}`,
 								onClick: () => {
-									S(null), E((e) => e ? null : []);
+									S(null), T((e) => e ? null : []);
 								},
-								"aria-pressed": T !== null,
+								"aria-pressed": w !== null,
 								children: "Group blocks"
-							}), Q.length >= l && !T && /* @__PURE__ */ x("span", {
-								className: q.fullHint,
+							}), Q.length >= l && !w && /* @__PURE__ */ b("span", {
+								className: K.fullHint,
 								children: [
 									Q.length,
 									" of ",
@@ -1124,54 +1194,56 @@ function le({ document: e, editing: c, actions: u }) {
 								]
 							})]
 						}),
-						/* @__PURE__ */ x("div", {
-							className: q.grid,
-							...Ce,
-							children: [Q.map((e) => Ee(e)), de && De()]
+						/* @__PURE__ */ b("div", {
+							ref: v,
+							className: K.grid,
+							style: q < 1 ? { zoom: q } : void 0,
+							...Fe,
+							children: [Q.map((e) => Re(e)), _e && ze()]
 						}),
-						Q.length === 0 && !c && /* @__PURE__ */ b("p", {
-							className: q.empty,
+						Q.length === 0 && !c && /* @__PURE__ */ y("p", {
+							className: K.empty,
 							children: "Nothing here yet"
 						}),
-						me.length > 0 && /* @__PURE__ */ x("svg", {
-							className: `${q.arrowSvg} ${c ? q.arrowSvgEditing : ""}`,
+						xe.length > 0 && /* @__PURE__ */ b("svg", {
+							className: `${K.arrowSvg} ${c ? K.arrowSvgEditing : ""}`,
 							"aria-hidden": !c || void 0,
-							children: [/* @__PURE__ */ b("defs", { children: /* @__PURE__ */ b("marker", {
-								id: v,
+							children: [/* @__PURE__ */ y("defs", { children: /* @__PURE__ */ y("marker", {
+								id: ne,
 								markerWidth: 10,
 								markerHeight: "8",
 								refX: "0",
 								refY: "4",
 								orient: "auto-start-reverse",
 								markerUnits: "userSpaceOnUse",
-								children: /* @__PURE__ */ b("path", {
+								children: /* @__PURE__ */ y("path", {
 									d: "M 0 0 L 10 4 L 0 8 Z",
-									className: q.arrowHead
+									className: K.arrowHead
 								})
-							}) }), me.map((e) => /* @__PURE__ */ x("g", {
+							}) }), xe.map((e) => /* @__PURE__ */ b("g", {
 								"data-link": e.key,
 								children: [
-									c && /* @__PURE__ */ b("path", {
+									c && /* @__PURE__ */ y("path", {
 										d: e.d,
-										className: q.arrowHit,
+										className: K.arrowHit,
 										role: "button",
-										"aria-label": `Edit link ${K.get(e.link.from)?.block.title ?? e.link.from} – ${K.get(e.link.to)?.block.title ?? e.link.to}`,
+										"aria-label": `Edit link ${J.get(e.link.from)?.block.title ?? e.link.from} – ${J.get(e.link.to)?.block.title ?? e.link.to}`,
 										onClick: (t) => {
-											t.stopPropagation(), O(J(e.link));
+											t.stopPropagation(), D(fe(e.link));
 										}
 									}),
-									/* @__PURE__ */ b("path", {
+									/* @__PURE__ */ y("path", {
 										d: e.d,
-										className: `${q.arrow} ${e.link.direct ? "" : q.arrowIndirect}`,
-										markerEnd: e.link.direction === "none" ? void 0 : `url(#${v})`,
-										markerStart: e.link.direction === "both" ? `url(#${v})` : void 0
+										className: `${K.arrow} ${e.link.direct ? "" : K.arrowIndirect}`,
+										markerEnd: e.link.direction === "none" ? void 0 : `url(#${ne})`,
+										markerStart: e.link.direction === "both" ? `url(#${ne})` : void 0
 									}),
-									e.label && /* @__PURE__ */ b("text", {
+									e.label && /* @__PURE__ */ y("text", {
 										x: e.vertical ? e.mid.x + 8 : e.mid.x,
 										y: e.mid.y,
-										className: `${q.arrowLabel} ${D === J(e.link) ? q.arrowLabelOpen : ""}`,
+										className: `${K.arrowLabel} ${E === fe(e.link) ? K.arrowLabelOpen : ""}`,
 										onClick: c ? (t) => {
-											t.stopPropagation(), O(J(e.link));
+											t.stopPropagation(), D(fe(e.link));
 										} : void 0,
 										textAnchor: e.vertical ? "start" : "middle",
 										dominantBaseline: "middle",
@@ -1181,34 +1253,34 @@ function le({ document: e, editing: c, actions: u }) {
 							}, e.key))]
 						}),
 						(() => {
-							let e = c && me.find((e) => J(e.link) === D);
-							return e ? /* @__PURE__ */ b(z, {
+							let e = c && xe.find((e) => fe(e.link) === E);
+							return e ? /* @__PURE__ */ y(R, {
 								links: e.link.links,
 								x: e.mid.x,
 								y: e.mid.y,
-								titleOf: (e) => K.get(e)?.block.title ?? e,
+								titleOf: (e) => J.get(e)?.block.title ?? e,
 								onUpdate: u.updateLink,
 								onRemove: u.removeLink,
-								onClose: k
+								onClose: se
 							}) : null;
 						})()
 					]
 				})]
 			}),
-			le && /* @__PURE__ */ b(oe, {
-				block: le,
+			he && /* @__PURE__ */ y(ue, {
+				block: he,
 				editing: c,
-				onChange: (e) => u.setDetails(le.id, e),
-				onClose: M
+				onChange: (e) => u.setDetails(he.id, e),
+				onClose: k
 			})
 		]
 	});
 }
-var Y = { takeSix: "_takeSix_b98wp_4" }, X = {
+var me = { takeSix: "_takeSix_b98wp_4" }, J = {
 	title: "New block",
 	description: "Description"
 };
-function Z({ document: e, onChange: t, editing: n = !1, theme: r = "auto", className: i }) {
+function he({ document: e, onChange: t, editing: n = !1, theme: r = "auto", className: i }) {
 	let o = t !== void 0 && n, s = a(() => {
 		let n = (n) => {
 			n !== e && t?.(n);
@@ -1225,7 +1297,7 @@ function Z({ document: e, onChange: t, editing: n = !1, theme: r = "auto", class
 				n(ee(e, t));
 			},
 			add(t) {
-				m(e, t) && n(d(e, t, X).document);
+				m(e, t) && n(d(e, t, J).document);
 			},
 			setSize(t, r) {
 				n(v(e, t, { size: r === c ? void 0 : r }));
@@ -1273,14 +1345,14 @@ function Z({ document: e, onChange: t, editing: n = !1, theme: r = "auto", class
 			}
 		};
 	}, [e, t]);
-	return /* @__PURE__ */ b("div", {
-		className: `${Y.takeSix} ${i ?? ""}`,
+	return /* @__PURE__ */ y("div", {
+		className: `${me.takeSix} ${i ?? ""}`,
 		"data-theme": r,
-		children: /* @__PURE__ */ b(le, {
+		children: /* @__PURE__ */ y(q, {
 			document: e,
 			editing: o,
 			actions: s
 		})
 	});
 }
-export { Z as TakeSix };
+export { he as TakeSix };