@andrewcyuan/focusgrid 0.1.0 → 0.2.0

package/dist/react/index.js

@@ -1,6 +1,8 @@
 import { createContext, useCallback, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { isEditableTarget, mountFocusGrid } from "@andrewcyuan/focusgrid/dom";
 import { ShortcutScope, useShortcuts } from "@andrewcyuan/shortcut-engine/react";
 import "@andrewcyuan/shortcut-engine";
+import { FocusGridController } from "@andrewcyuan/focusgrid/core";
 import { jsx } from "react/jsx-runtime";
 //#region react/src/FocusgridController.ts
 const FocusgridController = createContext(null);
@@ -10,1101 +12,6 @@ function useGridControllers() {
 	return controllers;
 }
 //#endregion
-//#region core/src/utils/ids.ts
-let fallbackId = 0;
-function createId(prefix = "node") {
-	const cryptoLike = globalThis.crypto;
-	if (cryptoLike && "randomUUID" in cryptoLike) return `${prefix}-${cryptoLike.randomUUID()}`;
-	fallbackId += 1;
-	return `${prefix}-${fallbackId}`;
-}
-//#endregion
-//#region core/src/layout/geometry.ts
-function computeLayout(state) {
-	const geometry = {
-		panes: [],
-		handles: [],
-		rectByNodeId: /* @__PURE__ */ new Map()
-	};
-	const root = computeNode(state.root, {
-		x: 0,
-		y: 0,
-		width: Math.max(0, state.container.width),
-		height: Math.max(0, state.container.height)
-	}, geometry, state.activePaneId);
-	return {
-		...geometry,
-		root
-	};
-}
-function normalizeSplitSizes(sizes, expectedLength) {
-	const fallback = () => Array.from({ length: expectedLength }, () => 1 / expectedLength);
-	if (sizes.length !== expectedLength) return fallback();
-	const total = sizes.reduce((sum, size) => sum + Math.max(0, size), 0);
-	if (total <= 0) return fallback();
-	return sizes.map((size) => Math.max(0, size) / total);
-}
-function getMinimumSize(node, direction, minWidth = 0, minHeight = 0) {
-	if (node.kind === "pane") return direction === "horizontal" ? minWidth : minHeight;
-	if (node.orientation === direction) return node.children.reduce((sum, child) => sum + getMinimumSize(child, direction, minWidth, minHeight), 0) + Math.max(0, node.children.length - 1) * 3;
-	return Math.max(0, ...node.children.map((child) => getMinimumSize(child, direction, minWidth, minHeight)));
-}
-function computeNode(node, rect, geometry, activePaneId) {
-	geometry.rectByNodeId.set(node.id, rect);
-	if (node.kind === "pane") {
-		const pane = {
-			paneId: node.paneId,
-			nodeId: node.id,
-			rect,
-			active: node.paneId === activePaneId
-		};
-		geometry.panes.push(pane);
-		return {
-			kind: "pane",
-			pane
-		};
-	}
-	const sizes = normalizeSplitSizes(node.sizes, node.children.length);
-	const horizontal = node.orientation === "horizontal";
-	const axisSize = horizontal ? rect.width : rect.height;
-	const axisStart = horizontal ? rect.x : rect.y;
-	const handleTotal = Math.max(0, node.children.length - 1) * 3;
-	const contentSize = Math.max(0, axisSize - handleTotal);
-	let cursor = axisStart;
-	const handles = [];
-	const children = node.children.map((child, index) => {
-		const isLast = index === node.children.length - 1;
-		const childSize = isLast ? axisStart + axisSize - cursor : Math.floor(contentSize * (sizes[index] ?? 0));
-		const computedChild = computeNode(child, createChildRect(node.orientation, rect, cursor, childSize), geometry, activePaneId);
-		cursor += childSize;
-		if (!isLast) {
-			const handle = {
-				id: `${node.id}:${index}`,
-				splitId: node.id,
-				index,
-				direction: node.orientation,
-				rect: createChildRect(node.orientation, rect, cursor, 3)
-			};
-			handles.push(handle);
-			geometry.handles.push(handle);
-			cursor += 3;
-		}
-		return computedChild;
-	});
-	return {
-		kind: "split",
-		orientation: node.orientation,
-		children,
-		handles
-	};
-}
-function createChildRect(direction, rect, cursor, size) {
-	return direction === "horizontal" ? {
-		x: cursor,
-		y: rect.y,
-		width: Math.max(0, size),
-		height: rect.height
-	} : {
-		x: rect.x,
-		y: cursor,
-		width: rect.width,
-		height: Math.max(0, size)
-	};
-}
-//#endregion
-//#region core/src/layout/resize.ts
-function resizeSplit(split, totalPx, index, deltaPx, snapshotSizes, minWidth = 0, minHeight = 0) {
-	if (totalPx <= 0 || index < 0 || index >= split.children.length - 1) return split;
-	const baseSizes = normalizeSplitSizes(snapshotSizes ?? split.sizes, split.children.length);
-	const deltaRatio = deltaPx / totalPx;
-	const nextSizes = [...baseSizes];
-	nextSizes[index] += deltaRatio;
-	nextSizes[index + 1] -= deltaRatio;
-	const minSizes = split.children.map((child) => getMinimumSize(child, split.orientation, minWidth, minHeight) / totalPx);
-	const currentSizes = normalizeSplitSizes(split.sizes, split.children.length);
-	const clamped = clampAdjacentPair(nextSizes, minSizes, index);
-	const fitted = fitNodeToAxisSize({
-		...split,
-		sizes: clamped
-	}, split.orientation, totalPx, minWidth, minHeight);
-	if (fitted.kind !== "split" || sizesEqual(fitted.sizes, currentSizes)) return split;
-	return fitted;
-}
-function sizesEqual(a, b) {
-	if (a.length !== b.length) return false;
-	return a.every((value, index) => value === b[index]);
-}
-function fitNodeToAxisSize(node, direction, axisSize, minWidth, minHeight) {
-	if (node.kind === "pane") return node;
-	if (node.orientation !== direction) {
-		let changed = false;
-		const children = node.children.map((child) => {
-			const nextChild = fitNodeToAxisSize(child, direction, axisSize, minWidth, minHeight);
-			changed ||= nextChild !== child;
-			return nextChild;
-		});
-		return changed ? {
-			...node,
-			children
-		} : node;
-	}
-	const sizes = normalizeSplitSizes(node.sizes, node.children.length);
-	const handleTotal = Math.max(0, node.children.length - 1) * 3;
-	const contentSize = Math.max(0, axisSize - handleTotal);
-	const fittedSizes = fitSizesToMinimums(sizes, node.children.map((child) => getMinimumSize(child, direction, minWidth, minHeight)), contentSize);
-	let changed = !sizesEqual(fittedSizes, sizes);
-	const children = node.children.map((child, index) => {
-		const nextChild = fitNodeToAxisSize(child, direction, contentSize * (fittedSizes[index] ?? 0), minWidth, minHeight);
-		changed ||= nextChild !== child;
-		return nextChild;
-	});
-	return changed ? {
-		...node,
-		children,
-		sizes: fittedSizes
-	} : node;
-}
-function fitSizesToMinimums(sizes, minSizes, contentSize) {
-	const normalized = normalizeSplitSizes(sizes, sizes.length);
-	if (contentSize <= 0) return normalized;
-	if (normalized.map((size) => size * contentSize).every((size, index) => size >= (minSizes[index] ?? 0))) return normalized;
-	const out = Array.from({ length: normalized.length }, () => 0);
-	const fixed = Array.from({ length: normalized.length }, () => false);
-	let remainingSize = contentSize;
-	let remainingWeight = normalized.reduce((sum, size) => sum + size, 0);
-	let changed = true;
-	while (changed) {
-		changed = false;
-		for (let index = 0; index < normalized.length; index += 1) {
-			if (fixed[index]) continue;
-			const weight = remainingWeight > 0 ? normalized[index] / remainingWeight : 0;
-			const allocated = remainingSize * weight;
-			const minSize = minSizes[index] ?? 0;
-			if (allocated < minSize) {
-				out[index] = minSize;
-				fixed[index] = true;
-				remainingSize -= minSize;
-				remainingWeight -= normalized[index];
-				changed = true;
-			}
-		}
-	}
-	for (let index = 0; index < normalized.length; index += 1) {
-		if (fixed[index]) continue;
-		const weight = remainingWeight > 0 ? normalized[index] / remainingWeight : 0;
-		out[index] = Math.max(0, remainingSize * weight);
-	}
-	const total = out.reduce((sum, size) => sum + size, 0);
-	if (total <= 0) return normalized;
-	return out.map((size) => size / total);
-}
-function clampAdjacentPair(sizes, minSizes, index) {
-	const out = [...sizes];
-	const pairTotal = out[index] + out[index + 1];
-	const leftMin = minSizes[index] ?? 0;
-	const rightMin = minSizes[index + 1] ?? 0;
-	const maxLeft = Math.max(leftMin, pairTotal - rightMin);
-	out[index] = Math.min(Math.max(out[index], leftMin), maxLeft);
-	out[index + 1] = pairTotal - out[index];
-	return normalizeSplitSizes(out, out.length);
-}
-//#endregion
-//#region core/src/layout/types.ts
-let PaneCommandCapability = /* @__PURE__ */ function(PaneCommandCapability) {
-	PaneCommandCapability["ResizeX"] = "canResizeX";
-	PaneCommandCapability["ResizeY"] = "canResizeY";
-	PaneCommandCapability["Remove"] = "canRemove";
-	PaneCommandCapability["SplitHorizontal"] = "canSplitHorizontal";
-	PaneCommandCapability["SplitVertical"] = "canSplitVertical";
-	PaneCommandCapability["SwapX"] = "canSwapX";
-	PaneCommandCapability["SwapY"] = "canSwapY";
-	PaneCommandCapability["Focus"] = "canFocus";
-	return PaneCommandCapability;
-}({});
-//#endregion
-//#region core/src/layout/tree.ts
-function buildLayoutIndex(root) {
-	const index = {
-		nodeById: /* @__PURE__ */ new Map(),
-		paneNodeByPaneId: /* @__PURE__ */ new Map(),
-		parentByNodeId: /* @__PURE__ */ new Map()
-	};
-	visit(root, null);
-	return index;
-	function visit(node, parent) {
-		index.nodeById.set(node.id, node);
-		index.parentByNodeId.set(node.id, parent);
-		if (node.kind === "pane") {
-			index.paneNodeByPaneId.set(node.paneId, node);
-			return;
-		}
-		for (const child of node.children) visit(child, node);
-	}
-}
-function findPaneNode(root, paneId) {
-	if (!paneId) return null;
-	if (root.kind === "pane") return root.paneId === paneId ? root : null;
-	for (const child of root.children) {
-		const pane = findPaneNode(child, paneId);
-		if (pane) return pane;
-	}
-	return null;
-}
-function findSplitNode(root, splitId) {
-	if (root.kind === "pane") return null;
-	if (root.id === splitId) return root;
-	for (const child of root.children) {
-		const split = findSplitNode(child, splitId);
-		if (split) return split;
-	}
-	return null;
-}
-function collectPaneIds(root) {
-	if (root.kind === "pane") return [root.paneId];
-	return root.children.flatMap(collectPaneIds);
-}
-function transformLayout(node, transform) {
-	if (node.kind === "pane") return transform(node);
-	let childrenChanged = false;
-	const children = node.children.map((child) => {
-		const nextChild = transformLayout(child, transform);
-		childrenChanged ||= nextChild !== child;
-		return nextChild;
-	});
-	return transform(childrenChanged ? {
-		...node,
-		children
-	} : node);
-}
-function updatePane(root, paneId, update) {
-	return transformLayout(root, (node) => node.kind === "pane" && node.paneId === paneId ? update(node) : node);
-}
-function markFocusedPanePath(root, paneId) {
-	const index = buildLayoutIndex(root);
-	const pane = index.paneNodeByPaneId.get(paneId);
-	if (!pane) return root;
-	const path = /* @__PURE__ */ new Map();
-	let childId = pane.id;
-	let parent = index.parentByNodeId.get(childId);
-	while (parent) {
-		path.set(parent.id, childId);
-		childId = parent.id;
-		parent = index.parentByNodeId.get(childId);
-	}
-	return transformLayout(root, (node) => {
-		const focusedChildId = path.get(node.id);
-		return node.kind === "split" && focusedChildId !== void 0 && node.lastFocusedChildId !== focusedChildId ? {
-			...node,
-			lastFocusedChildId: focusedChildId
-		} : node;
-	});
-}
-function removePaneNode(node, paneId) {
-	if (node.kind === "pane") return node.paneId === paneId ? null : node;
-	const children = [];
-	const sizes = [];
-	for (let i = 0; i < node.children.length; i += 1) {
-		const child = removePaneNode(node.children[i], paneId);
-		if (child) {
-			children.push(child);
-			sizes.push(node.sizes[i] ?? 1);
-		}
-	}
-	if (children.length === 0) return null;
-	if (children.length === 1) return children[0];
-	return {
-		...node,
-		children,
-		sizes: normalizeSplitSizes(sizes, children.length)
-	};
-}
-//#endregion
-//#region core/src/layout/spatial.ts
-function isHorizontalDirection(direction) {
-	return direction === "left" || direction === "right";
-}
-function isRectInDirection(rect, activeRect, direction) {
-	const epsilon = .001;
-	if (direction === "right") return rect.x >= activeRect.x + activeRect.width - epsilon;
-	if (direction === "left") return rect.x + rect.width <= activeRect.x + epsilon;
-	if (direction === "down") return rect.y >= activeRect.y + activeRect.height - epsilon;
-	return rect.y + rect.height <= activeRect.y + epsilon;
-}
-function getEnteringEdge(rect, direction) {
-	if (direction === "right") return rect.x;
-	if (direction === "left") return rect.x + rect.width;
-	if (direction === "down") return rect.y;
-	return rect.y + rect.height;
-}
-function compareEnteringEdge(first, second, direction) {
-	return direction === "left" || direction === "up" ? second - first : first - second;
-}
-function getPerpendicularCenter(rect, direction) {
-	const center = getRectCenter(rect);
-	return isHorizontalDirection(direction) ? center.y : center.x;
-}
-function getRectCenter(rect) {
-	return {
-		x: rect.x + rect.width / 2,
-		y: rect.y + rect.height / 2
-	};
-}
-function getCenterDistance(rect, center) {
-	const rectCenter = getRectCenter(rect);
-	return Math.abs(rectCenter.x - center.x) + Math.abs(rectCenter.y - center.y);
-}
-//#endregion
-//#region core/src/layout/navigation.ts
-function findPaneInDirection(root, layout, paneId, direction) {
-	const index = buildLayoutIndex(root);
-	const paneNode = index.paneNodeByPaneId.get(paneId);
-	if (!paneNode) return null;
-	const activePane = layout.panes.find((pane) => pane.paneId === paneId);
-	if (!activePane) return null;
-	let currentId = paneNode.id;
-	let parent = index.parentByNodeId.get(currentId) ?? null;
-	while (parent) {
-		const sibling = findDirectionalSibling(parent, currentId, direction);
-		if (sibling) return findTargetPaneInSubtree(sibling, layout.panes, activePane, direction);
-		currentId = parent.id;
-		parent = index.parentByNodeId.get(currentId) ?? null;
-	}
-	return null;
-}
-function findPaneForFocusCommand(root, layout, paneId, direction, overflow) {
-	const activePane = layout.panes.find((pane) => pane.paneId === paneId);
-	if (!activePane) return null;
-	const index = buildLayoutIndex(root);
-	const candidates = layout.panes.filter((pane) => pane.paneId !== paneId && index.paneNodeByPaneId.get(pane.paneId)?.["canFocus"] !== false);
-	const target = sortFocusCandidates(candidates.filter((pane) => isRectInDirection(pane.rect, activePane.rect, direction)), activePane, direction)[0]?.paneId ?? null;
-	if (target || !overflow) return target;
-	return sortOverflowCandidates(candidates, direction)[0]?.paneId ?? null;
-}
-function sortFocusCandidates(candidates, activePane, direction) {
-	const activeCenter = getRectCenter(activePane.rect);
-	return [...candidates].sort((first, second) => {
-		const edgeDelta = compareEnteringEdge(getEnteringEdge(first.rect, direction), getEnteringEdge(second.rect, direction), direction);
-		if (edgeDelta !== 0) return edgeDelta;
-		const firstPerpendicular = Math.abs(getPerpendicularCenter(first.rect, direction) - getPerpendicularCenter(activePane.rect, direction));
-		const secondPerpendicular = Math.abs(getPerpendicularCenter(second.rect, direction) - getPerpendicularCenter(activePane.rect, direction));
-		if (firstPerpendicular !== secondPerpendicular) return firstPerpendicular - secondPerpendicular;
-		return getCenterDistance(first.rect, activeCenter) - getCenterDistance(second.rect, activeCenter);
-	});
-}
-function sortOverflowCandidates(candidates, direction) {
-	return [...candidates].sort((first, second) => {
-		if (direction === "right") return first.rect.x - second.rect.x;
-		if (direction === "left") return second.rect.x + second.rect.width - (first.rect.x + first.rect.width);
-		if (direction === "down") return first.rect.y - second.rect.y;
-		return second.rect.y + second.rect.height - (first.rect.y + first.rect.height);
-	});
-}
-function findDirectionalSibling(parent, childId, direction) {
-	const childIndex = parent.children.findIndex((child) => child.id === childId);
-	if (childIndex === -1) return null;
-	const horizontal = direction === "left" || direction === "right";
-	if (horizontal && parent.orientation === "horizontal") {
-		if (direction === "right") return parent.children[childIndex + 1] ?? null;
-		return parent.children[childIndex - 1] ?? null;
-	}
-	if (!horizontal && parent.orientation === "vertical") {
-		if (direction === "down") return parent.children[childIndex + 1] ?? null;
-		return parent.children[childIndex - 1] ?? null;
-	}
-	return null;
-}
-function findTargetPaneInSubtree(subtree, panes, activePane, direction) {
-	const subtreePaneIds = new Set(collectPaneIds(subtree));
-	const candidates = panes.filter((pane) => subtreePaneIds.has(pane.paneId));
-	if (candidates.length === 0) return null;
-	const activeCenter = getRectCenter(activePane.rect);
-	return candidates.map((pane) => ({
-		pane,
-		edge: getEnteringEdge(pane.rect, direction),
-		perpendicularDistance: Math.abs(getPerpendicularCenter(pane.rect, direction) - getPerpendicularCenter(activePane.rect, direction)),
-		focusMemoryRank: getFocusMemoryRank(subtree, pane.paneId),
-		centerDistance: getCenterDistance(pane.rect, activeCenter)
-	})).sort((first, second) => compareEnteringEdge(first.edge, second.edge, direction) || first.focusMemoryRank - second.focusMemoryRank || first.perpendicularDistance - second.perpendicularDistance || first.centerDistance - second.centerDistance)[0].pane.paneId;
-}
-function getFocusMemoryRank(subtree, paneId) {
-	if (subtree.kind === "pane") return Number.POSITIVE_INFINITY;
-	const rememberedChild = subtree.children.find((child) => child.id === subtree.lastFocusedChildId);
-	if (!rememberedChild || !collectPaneIds(rememberedChild).includes(paneId)) return Number.POSITIVE_INFINITY;
-	if (rememberedChild.kind === "pane") return 0;
-	const nestedRank = getFocusMemoryRank(rememberedChild, paneId);
-	return Number.isFinite(nestedRank) ? nestedRank : 1;
-}
-function resolvePaneResizeBoundary(index, nodeId, direction) {
-	let currentId = nodeId;
-	let parent = index.parentByNodeId.get(currentId) ?? null;
-	while (parent) {
-		const childIndex = parent.children.findIndex((child) => child.id === currentId);
-		if (childIndex === -1) return null;
-		if (isHorizontalDirection(direction) === (parent.orientation === "horizontal")) {
-			const boundaryIndex = childIndex > 0 ? childIndex - 1 : childIndex < parent.children.length - 1 ? childIndex : null;
-			if (boundaryIndex !== null) return {
-				splitId: parent.id,
-				index: boundaryIndex,
-				deltaPxSign: direction === "right" || direction === "down" ? 1 : -1
-			};
-		}
-		currentId = parent.id;
-		parent = index.parentByNodeId.get(currentId) ?? null;
-	}
-	return null;
-}
-//#endregion
-//#region core/src/validation.ts
-var FocusGridStateValidationException = class extends Error {
-	errors;
-	constructor(errors) {
-		const details = errors.slice(0, 3).map((error) => `${error.path}: ${error.message}`).join("; ");
-		const suffix = errors.length > 3 ? `; ${errors.length - 3} more` : "";
-		super(details ? `Invalid FocusGrid controller state: ${details}${suffix}` : "Invalid FocusGrid controller state.");
-		this.errors = errors;
-		this.name = "FocusGridStateValidationException";
-	}
-};
-function assertValidFocusGridControllerState(input) {
-	const result = validateFocusGridControllerState(input);
-	if (!result.ok) throw new FocusGridStateValidationException(result.errors);
-}
-function validateFocusGridControllerState(input) {
-	const errors = [];
-	const nodeIds = /* @__PURE__ */ new Set();
-	const paneIds = /* @__PURE__ */ new Set();
-	function add(code, path, message, meta = {}) {
-		errors.push({
-			code,
-			path,
-			message,
-			...meta
-		});
-	}
-	function fields(value, path, allowed, meta = {}) {
-		for (const field of Object.keys(value)) if (!allowed.has(field)) add("unknown-field", `${path}.${field}`, `Unknown field "${field}".`, meta);
-	}
-	function size(value, path, label, meta = {}) {
-		if (!isSize(value)) add("invalid-number", path, `${label} must be a finite, non-negative number.`, meta);
-	}
-	function id(value, seen, kind, path, meta) {
-		const label = kind === "pane" ? "Pane" : "Node";
-		if (typeof value !== "string" || value.length === 0) add(`invalid-${kind}-id`, path, `${label} id must be a non-empty string.`, meta);
-		else if (seen.has(value)) add(`duplicate-${kind}-id`, path, `Duplicate ${kind} id "${value}".`, {
-			...meta,
-			[kind === "pane" ? "paneId" : "nodeId"]: value
-		});
-		else seen.add(value);
-	}
-	function node(value, path) {
-		if (!isRecord(value)) {
-			add("invalid-node", path, "Layout node must be an object.");
-			return;
-		}
-		const meta = {
-			nodeId: typeof value.id === "string" ? value.id : void 0,
-			paneId: typeof value.paneId === "string" ? value.paneId : void 0
-		};
-		if (value.kind !== "pane" && value.kind !== "split") {
-			add("invalid-node-kind", `${path}.kind`, "Layout node kind must be \"pane\" or \"split\".", meta);
-			return;
-		}
-		fields(value, path, value.kind === "pane" ? PANE_FIELDS : SPLIT_FIELDS, meta);
-		id(value.id, nodeIds, "node", `${path}.id`, meta);
-		if (value.kind === "pane") {
-			id(value.paneId, paneIds, "pane", `${path}.paneId`, meta);
-			for (const key of Object.values(PaneCommandCapability)) if (key in value && typeof value[key] !== "boolean") add("invalid-capability", `${path}.${key}`, `${key} must be a boolean when provided.`, meta);
-			return;
-		}
-		if (value.orientation !== "horizontal" && value.orientation !== "vertical") add("invalid-direction", `${path}.orientation`, "Split orientation must be \"horizontal\" or \"vertical\".", meta);
-		if (!Array.isArray(value.children)) add("invalid-children", `${path}.children`, "Split children must be an array.", meta);
-		else {
-			if (value.children.length !== 2) add("non-binary-split", `${path}.children`, "Split nodes must have exactly two children.", meta);
-			value.children.forEach((child, index) => node(child, `${path}.children[${index}]`));
-		}
-		if (!Array.isArray(value.sizes)) add("invalid-sizes", `${path}.sizes`, "Split sizes must be an array.", meta);
-		else {
-			if (value.sizes.length !== 2) add("invalid-sizes", `${path}.sizes`, "Split sizes must contain exactly two values.", meta);
-			value.sizes.forEach((entry, index) => {
-				if (!isSize(entry)) add("invalid-size", `${path}.sizes[${index}]`, "Split sizes must be finite, non-negative numbers.", meta);
-			});
-		}
-		if (value.lastFocusedChildId !== void 0 && typeof value.lastFocusedChildId !== "string") add("invalid-last-focused-child", `${path}.lastFocusedChildId`, "lastFocusedChildId must be a node id string when provided.", meta);
-		if (typeof value.lastFocusedChildId === "string" && Array.isArray(value.children) && !value.children.some((child) => isRecord(child) && child.id === value.lastFocusedChildId)) add("invalid-last-focused-child", `${path}.lastFocusedChildId`, "lastFocusedChildId must reference one of the split's direct children.", {
-			...meta,
-			nodeId: value.lastFocusedChildId
-		});
-	}
-	if (!isRecord(input)) add("invalid-state", "$", "State must be an object.");
-	else {
-		fields(input, "$", STATE_FIELDS);
-		for (const key of STATE_FIELDS) if (!(key in input)) add("missing-field", `$.${key}`, `${key} is required.`);
-		if ("root" in input) node(input.root, "$.root");
-		if ("activePaneId" in input) {
-			if (input.activePaneId !== null && typeof input.activePaneId !== "string") add("invalid-active-pane", "$.activePaneId", "State must use a pane id string or null for activePaneId.");
-			else if (typeof input.activePaneId === "string" && !paneIds.has(input.activePaneId)) add("unknown-active-pane", "$.activePaneId", `activePaneId "${input.activePaneId}" does not reference a pane in root.`, { paneId: input.activePaneId });
-		}
-		if ("container" in input) if (!isRecord(input.container)) add("invalid-container", "$.container", "Container must be an object.");
-		else {
-			fields(input.container, "$.container", CONTAINER_FIELDS);
-			for (const key of CONTAINER_FIELDS) if (!(key in input.container)) add("missing-field", `$.container.${key}`, `${key} is required.`);
-			else size(input.container[key], `$.container.${key}`, `container ${key}`);
-		}
-	}
-	return errors.length ? {
-		ok: false,
-		errors
-	} : {
-		ok: true,
-		state: input,
-		errors: []
-	};
-}
-function isRecord(input) {
-	return typeof input === "object" && input !== null && !Array.isArray(input);
-}
-function isSize(input) {
-	return typeof input === "number" && Number.isFinite(input) && input >= 0;
-}
-const STATE_FIELDS = /* @__PURE__ */ new Set([
-	"root",
-	"activePaneId",
-	"container"
-]);
-const CONTAINER_FIELDS = /* @__PURE__ */ new Set(["width", "height"]);
-const PANE_FIELDS = /* @__PURE__ */ new Set([
-	"kind",
-	"id",
-	"paneId",
-	...Object.values(PaneCommandCapability)
-]);
-const SPLIT_FIELDS = /* @__PURE__ */ new Set([
-	"kind",
-	"id",
-	"orientation",
-	"children",
-	"sizes",
-	"lastFocusedChildId"
-]);
-//#endregion
-//#region core/src/controller.ts
-var FocusGridController = class {
-	domController;
-	minWidth;
-	minHeight;
-	directionalFocusOverflow;
-	currentState;
-	cachedLayout = null;
-	paneDefaults;
-	listeners = /* @__PURE__ */ new Set();
-	constructor({ paneDefaults = {}, minWidth = 0, minHeight = 0, directionalFocusOverflow = false, ...state }, domController) {
-		this.domController = domController;
-		assertValidFocusGridControllerState(state);
-		if (![minWidth, minHeight].every((value) => Number.isFinite(value) && value >= 0)) throw new RangeError("Minimum pane dimensions must be finite, non-negative numbers.");
-		this.minWidth = minWidth;
-		this.minHeight = minHeight;
-		this.paneDefaults = paneDefaults;
-		this.directionalFocusOverflow = directionalFocusOverflow;
-		const root = transformLayout(state.root, (node) => node.kind === "pane" ? withPaneDefaults(node, paneDefaults) : node);
-		this.currentState = root === state.root ? state : {
-			...state,
-			root
-		};
-	}
-	/** Computed render data; stable until the next committed change. */
-	getLayout() {
-		return this.cachedLayout ??= computeLayout(this.currentState);
-	}
-	getPane(paneId) {
-		const pane = findPaneNode(this.currentState.root, paneId);
-		return pane ? { ...pane } : null;
-	}
-	getContainerSize() {
-		return { ...this.currentState.container };
-	}
-	getSplitSizes(splitId) {
-		const split = findSplitNode(this.currentState.root, splitId);
-		return split ? [...split.sizes] : null;
-	}
-	splitActive(side) {
-		const pane = findPaneNode(this.currentState.root, this.currentState.activePaneId);
-		const capability = isHorizontalDirection(side) ? "canSplitHorizontal" : "canSplitVertical";
-		return pane && pane[capability] !== false ? this.split(pane.id, { side }) : null;
-	}
-	removeActive() {
-		const pane = findPaneNode(this.currentState.root, this.currentState.activePaneId);
-		return pane && pane["canRemove"] !== false ? this.remove(pane.paneId) : false;
-	}
-	focusAdjacent(direction) {
-		const state = this.currentState;
-		if (!state.activePaneId) return false;
-		const target = findPaneForFocusCommand(state.root, this.getLayout(), state.activePaneId, direction, this.directionalFocusOverflow);
-		if (!target || !this.domController.focus(target)) return false;
-		this.focus(target);
-		return true;
-	}
-	swapAdjacent(direction) {
-		const state = this.currentState;
-		const active = findPaneNode(state.root, state.activePaneId);
-		if (!active) return false;
-		const targetId = findPaneInDirection(state.root, this.getLayout(), active.paneId, direction);
-		const target = findPaneNode(state.root, targetId);
-		const capability = isHorizontalDirection(direction) ? "canSwapX" : "canSwapY";
-		return target && active[capability] !== false && target[capability] !== false ? this.swap(active.paneId, target.paneId) : false;
-	}
-	resizeActive(direction, deltaPx) {
-		const pane = findPaneNode(this.currentState.root, this.currentState.activePaneId);
-		const capability = isHorizontalDirection(direction) ? "canResizeX" : "canResizeY";
-		return pane && pane[capability] !== false ? this.resize(pane.paneId, {
-			direction,
-			deltaPx
-		}) : false;
-	}
-	split(paneNodeId, props) {
-		const state = this.currentState;
-		const index = buildLayoutIndex(state.root);
-		const target = index.nodeById.get(paneNodeId);
-		if (target?.kind !== "pane") return null;
-		const paneId = props.newPaneId ?? createId("pane");
-		const id = props.newPaneNodeId ?? createId("node");
-		const splitId = props.splitId ?? createId("split");
-		if (index.paneNodeByPaneId.has(paneId) || index.nodeById.has(id) || index.nodeById.has(splitId) || id === splitId) return null;
-		const { side, newPaneId, newPaneNodeId, splitId: suppliedSplitId, preserveActivePane, ...paneProps } = props;
-		const pane = withPaneDefaults({
-			kind: "pane",
-			id,
-			paneId,
-			...paneProps
-		}, this.paneDefaults);
-		const root = updatePane(state.root, target.paneId, () => ({
-			kind: "split",
-			id: splitId,
-			orientation: isHorizontalDirection(side) ? "horizontal" : "vertical",
-			children: side === "left" || side === "up" ? [pane, target] : [target, pane],
-			sizes: [.5, .5]
-		}));
-		const activePaneId = preserveActivePane ? state.activePaneId : paneId;
-		this.commit({
-			root: activePaneId ? markFocusedPanePath(root, activePaneId) : root,
-			activePaneId
-		});
-		return paneId;
-	}
-	remove(paneId) {
-		const state = this.currentState;
-		const panes = collectPaneIds(state.root);
-		if (!panes.includes(paneId) || panes.length <= 1) return false;
-		const root = removePaneNode(state.root, paneId);
-		const activePaneId = state.activePaneId === paneId ? collectPaneIds(root)[0] : state.activePaneId;
-		return this.commit({
-			root: activePaneId ? markFocusedPanePath(root, activePaneId) : root,
-			activePaneId
-		});
-	}
-	swap(firstPaneId, secondPaneId) {
-		if (firstPaneId === secondPaneId) return false;
-		const state = this.currentState;
-		const index = buildLayoutIndex(state.root);
-		const first = index.paneNodeByPaneId.get(firstPaneId);
-		const second = index.paneNodeByPaneId.get(secondPaneId);
-		if (!first || !second) return false;
-		const root = transformLayout(state.root, (node) => {
-			if (node.id === first.id) return {
-				...second,
-				id: node.id
-			};
-			if (node.id === second.id) return {
-				...first,
-				id: node.id
-			};
-			return node;
-		});
-		return this.commit({ root: state.activePaneId ? markFocusedPanePath(root, state.activePaneId) : root });
-	}
-	resize(paneId, props) {
-		const index = buildLayoutIndex(this.currentState.root);
-		const pane = index.paneNodeByPaneId.get(paneId);
-		if (!pane) return false;
-		const boundary = resolvePaneResizeBoundary(index, pane.id, props.direction);
-		return boundary ? this.resizeHandle(boundary.splitId, {
-			index: boundary.index,
-			deltaPx: boundary.deltaPxSign * props.deltaPx
-		}) : false;
-	}
-	resizeHandle(splitId, props) {
-		const state = this.currentState;
-		const rect = this.getLayout().rectByNodeId.get(splitId);
-		if (!rect) return false;
-		const root = transformLayout(state.root, (node) => node.kind === "split" && node.id === splitId ? resizeSplit(node, node.orientation === "horizontal" ? rect.width : rect.height, props.index, props.deltaPx, props.snapshotSizes, this.minWidth, this.minHeight) : node);
-		return this.commit({ root });
-	}
-	focus(paneId) {
-		const state = this.currentState;
-		if (!findPaneNode(state.root, paneId)) return false;
-		const root = markFocusedPanePath(state.root, paneId);
-		return this.commit({
-			root,
-			activePaneId: paneId
-		});
-	}
-	updatePane(paneId, patch) {
-		const root = updatePane(this.currentState.root, paneId, (pane) => Object.entries(patch).every(([key, value]) => Object.is(pane[key], value)) ? pane : Object.fromEntries(Object.entries({
-			...pane,
-			...patch
-		}).filter(([, value]) => value !== void 0)));
-		return this.commit({ root });
-	}
-	setContainerSize(width, height) {
-		if (this.currentState.container.width === width && this.currentState.container.height === height) return false;
-		return this.commit({ container: {
-			width,
-			height
-		} });
-	}
-	commit(patch) {
-		const previous = this.currentState;
-		if (Object.entries(patch).every(([key, value]) => Object.is(previous[key], value))) return false;
-		const next = {
-			...previous,
-			...patch
-		};
-		this.currentState = next;
-		this.cachedLayout = null;
-		for (const listener of this.listeners) listener(next, previous);
-		return true;
-	}
-	subscribePaneEvents({ onPaneLayoutChange, onPaneClose }) {
-		if (!onPaneLayoutChange && !onPaneClose) return () => {};
-		return this.subscribe((next, previous) => {
-			const previousPanes = new Map(computeLayout(previous).panes.map((pane) => [pane.paneId, pane]));
-			const nextPanes = (next === this.currentState ? this.getLayout() : computeLayout(next)).panes;
-			for (const pane of nextPanes) {
-				const previousPane = previousPanes.get(pane.paneId);
-				previousPanes.delete(pane.paneId);
-				if (previousPane && (pane.rect.x !== previousPane.rect.x || pane.rect.y !== previousPane.rect.y || pane.rect.width !== previousPane.rect.width || pane.rect.height !== previousPane.rect.height)) onPaneLayoutChange?.({
-					pane,
-					previousPane,
-					controller: this
-				});
-			}
-			for (const previousPane of previousPanes.values()) onPaneClose?.({
-				paneId: previousPane.paneId,
-				previousPane,
-				controller: this
-			});
-		});
-	}
-	subscribe(listener) {
-		this.listeners.add(listener);
-		return () => {
-			this.listeners.delete(listener);
-		};
-	}
-};
-function withPaneDefaults(pane, defaults) {
-	const definedPane = Object.fromEntries(Object.entries(pane).filter(([, value]) => value !== void 0));
-	const next = Object.fromEntries(Object.entries({
-		...defaults,
-		...definedPane
-	}).filter(([, value]) => value !== void 0));
-	return Object.keys(next).length === Object.keys(pane).length && Object.entries(next).every(([key, value]) => Object.is(pane[key], value)) ? pane : next;
-}
-//#endregion
-//#region dom/src/frame.ts
-function requestFrame(callback) {
-	if (typeof globalThis.requestAnimationFrame === "function") return {
-		kind: "animation",
-		id: globalThis.requestAnimationFrame(() => callback())
-	};
-	return {
-		kind: "timeout",
-		id: globalThis.setTimeout(callback, 0)
-	};
-}
-function cancelFrame(frame) {
-	if (frame.kind === "animation") {
-		globalThis.cancelAnimationFrame(frame.id);
-		return;
-	}
-	globalThis.clearTimeout(frame.id);
-}
-//#endregion
-//#region dom/src/pointer-resize.ts
-var PointerResizeController = class {
-	controller;
-	state = { phase: "idle" };
-	onDocumentPointerMove = (event) => {
-		this.updateResize(event);
-	};
-	onDocumentPointerUp = (event) => {
-		this.endResize(event);
-	};
-	onDocumentPointerCancel = (event) => {
-		this.endResize(event);
-	};
-	constructor(controller) {
-		this.controller = controller;
-	}
-	startResize(event, handle, captureTarget) {
-		event.preventDefault();
-		this.destroy();
-		const ownerDocument = this.resolveOwnerDocument(event, captureTarget);
-		const pointerCaptureTarget = this.resolveCaptureTarget(captureTarget);
-		const startSizes = this.controller.getSplitSizes(handle.splitId);
-		if (!startSizes) return;
-		this.state = {
-			phase: "dragging",
-			pointerId: event.pointerId,
-			splitId: handle.splitId,
-			index: handle.index,
-			startX: event.clientX,
-			startY: event.clientY,
-			direction: handle.direction,
-			startSizes,
-			ownerDocument,
-			captureTarget: pointerCaptureTarget,
-			pendingDeltaPx: 0,
-			pendingFrame: null
-		};
-		this.setPointerCapture(pointerCaptureTarget, event.pointerId);
-		this.addDocumentListeners(ownerDocument);
-	}
-	updateResize(event) {
-		if (this.state.phase !== "dragging" || this.state.pointerId !== event.pointerId) return;
-		const deltaPx = this.state.direction === "horizontal" ? event.clientX - this.state.startX : event.clientY - this.state.startY;
-		if (this.state.pendingFrame) {
-			this.state = {
-				...this.state,
-				pendingDeltaPx: deltaPx
-			};
-			return;
-		}
-		const pendingFrame = requestFrame(() => {
-			if (this.state.phase !== "dragging") return;
-			this.state = {
-				...this.state,
-				pendingFrame: null
-			};
-			this.dispatchPendingResize();
-		});
-		this.state = {
-			...this.state,
-			pendingDeltaPx: deltaPx,
-			pendingFrame
-		};
-	}
-	endResize(event) {
-		if (this.state.phase !== "dragging" || this.state.pointerId !== event.pointerId) return;
-		this.flushPendingFrame();
-		this.finishDrag();
-	}
-	destroy() {
-		this.cancelPendingFrame();
-		this.finishDrag();
-	}
-	finishDrag() {
-		if (this.state.phase !== "dragging") return;
-		const { captureTarget, ownerDocument, pointerId } = this.state;
-		this.removeDocumentListeners(ownerDocument);
-		this.releasePointerCapture(captureTarget, pointerId);
-		this.state = { phase: "idle" };
-	}
-	flushPendingFrame() {
-		if (this.state.phase !== "dragging" || !this.state.pendingFrame) return;
-		cancelFrame(this.state.pendingFrame);
-		this.state = {
-			...this.state,
-			pendingFrame: null
-		};
-		this.dispatchPendingResize();
-	}
-	dispatchPendingResize() {
-		if (this.state.phase !== "dragging") return;
-		this.controller.resizeHandle(this.state.splitId, {
-			index: this.state.index,
-			deltaPx: this.state.pendingDeltaPx,
-			snapshotSizes: this.state.startSizes
-		});
-	}
-	cancelPendingFrame() {
-		if (this.state.phase !== "dragging" || !this.state.pendingFrame) return;
-		cancelFrame(this.state.pendingFrame);
-		this.state = {
-			...this.state,
-			pendingFrame: null
-		};
-	}
-	addDocumentListeners(ownerDocument) {
-		ownerDocument?.addEventListener("pointermove", this.onDocumentPointerMove);
-		ownerDocument?.addEventListener("pointerup", this.onDocumentPointerUp);
-		ownerDocument?.addEventListener("pointercancel", this.onDocumentPointerCancel);
-	}
-	removeDocumentListeners(ownerDocument) {
-		ownerDocument?.removeEventListener("pointermove", this.onDocumentPointerMove);
-		ownerDocument?.removeEventListener("pointerup", this.onDocumentPointerUp);
-		ownerDocument?.removeEventListener("pointercancel", this.onDocumentPointerCancel);
-	}
-	resolveOwnerDocument(event, captureTarget) {
-		if (captureTarget?.ownerDocument) return captureTarget.ownerDocument;
-		if (typeof Element !== "undefined" && event.target instanceof Element && event.target.ownerDocument) return event.target.ownerDocument;
-		return typeof document === "undefined" ? null : document;
-	}
-	resolveCaptureTarget(captureTarget) {
-		if (!captureTarget) return null;
-		if ("setPointerCapture" in captureTarget || "releasePointerCapture" in captureTarget) return captureTarget;
-		return null;
-	}
-	setPointerCapture(target, pointerId) {
-		try {
-			target?.setPointerCapture?.(pointerId);
-		} catch {}
-	}
-	releasePointerCapture(target, pointerId) {
-		if (!target?.releasePointerCapture) return;
-		try {
-			if (!target.hasPointerCapture || target.hasPointerCapture(pointerId)) target.releasePointerCapture(pointerId);
-		} catch {}
-	}
-};
-//#endregion
-//#region dom/src/resize-observer.ts
-function observeRootSize(root, controller) {
-	const updateSize = ({ width, height }) => {
-		controller.setContainerSize(Math.floor(width), Math.floor(height));
-	};
-	if (typeof ResizeObserver === "undefined") {
-		updateSize(root.getBoundingClientRect());
-		return () => {};
-	}
-	const observer = new ResizeObserver(([entry]) => {
-		if (entry) updateSize(entry.contentRect);
-	});
-	observer.observe(root);
-	return () => observer.disconnect();
-}
-//#endregion
-//#region dom/src/interactivity.ts
-const INTERACTIVE_ROLES = /* @__PURE__ */ new Set([
-	"alertdialog",
-	"button",
-	"checkbox",
-	"combobox",
-	"dialog",
-	"grid",
-	"gridcell",
-	"link",
-	"listbox",
-	"menu",
-	"menubar",
-	"menuitem",
-	"menuitemcheckbox",
-	"menuitemradio",
-	"option",
-	"radio",
-	"radiogroup",
-	"scrollbar",
-	"searchbox",
-	"slider",
-	"spinbutton",
-	"switch",
-	"tab",
-	"tablist",
-	"textbox",
-	"toolbar",
-	"tree",
-	"treegrid",
-	"treeitem"
-]);
-function hasInteractiveOwner(target, boundary) {
-	let element = target;
-	while (element && element !== boundary) {
-		if (element instanceof HTMLElement && isInteractiveElement(element)) return true;
-		element = element.parentElement;
-	}
-	return boundary instanceof HTMLElement && isInteractiveElement(boundary);
-}
-function shouldFocusPaneShellForPointer(target, paneShell) {
-	return target === paneShell || !hasInteractiveOwner(target, paneShell);
-}
-function isInteractiveElement(element) {
-	if (isUnavailableElement(element)) return false;
-	const tagName = element.tagName.toLowerCase();
-	const role = element.getAttribute("role")?.toLowerCase();
-	return element.isContentEditable || element.tabIndex >= 0 || tagName === "a" && element.hasAttribute("href") || tagName === "button" || tagName === "input" || tagName === "select" || tagName === "textarea" || tagName === "dialog" || tagName === "summary" || role !== void 0 && INTERACTIVE_ROLES.has(role);
-}
-function isUnavailableElement(element) {
-	let current = element;
-	while (current) {
-		if (current.hidden || current.hasAttribute("hidden") || current.hasAttribute("inert") || current.getAttribute("aria-hidden") === "true" || current.getAttribute("aria-disabled") === "true" || "disabled" in current && Boolean(current.disabled)) return true;
-		const view = current.ownerDocument.defaultView;
-		if (view) {
-			const style = view.getComputedStyle(current);
-			if (style.display === "none" || style.visibility === "hidden") return true;
-		}
-		current = current.parentElement;
-	}
-	return false;
-}
-function isEditableTarget(target) {
-	if (!(target instanceof HTMLElement)) return false;
-	if (target.isContentEditable || target.getAttribute("role")?.toLowerCase() === "textbox") return true;
-	if (target.matches("textarea, select")) return !target.matches(":disabled");
-	return target instanceof HTMLInputElement && !target.disabled && !target.readOnly && [
-		"date",
-		"datetime-local",
-		"email",
-		"file",
-		"month",
-		"number",
-		"password",
-		"search",
-		"tel",
-		"text",
-		"time",
-		"url",
-		"week"
-	].includes(target.type);
-}
-//#endregion
-//#region dom/src/mount.ts
-/** Own native grid interactions; React only attaches and detaches the root. */
-function mountFocusGrid(root, controller, dom) {
-	dom.setRoot(root);
-	const resize = new PointerResizeController(controller);
-	const ownedTarget = (event) => {
-		const target = event.target;
-		return target instanceof Element && target.closest(".FocusgridFocusGrid") === root ? target : null;
-	};
-	const onFocus = (event) => {
-		const paneId = ownedTarget(event)?.closest("[data-pane-id]")?.dataset.paneId;
-		if (paneId) controller.focus(paneId);
-	};
-	const onPointerDown = (event) => {
-		const target = ownedTarget(event);
-		if (!target) return;
-		const separator = target.closest("[data-resize-handle]");
-		if (separator) {
-			const handle = controller.getLayout().handles.find((handle) => handle.id === separator.dataset.resizeHandle);
-			if (handle) resize.startResize(event, handle, separator);
-			return;
-		}
-		const pane = target.closest("[data-pane-id]");
-		if (!pane?.dataset.paneId) return;
-		controller.focus(pane.dataset.paneId);
-		if (shouldFocusPaneShellForPointer(target, pane)) pane.focus({ preventScroll: true });
-	};
-	root.addEventListener("focusin", onFocus, true);
-	root.addEventListener("pointerdown", onPointerDown);
-	const stopObserving = observeRootSize(root, controller);
-	return () => {
-		root.removeEventListener("focusin", onFocus, true);
-		root.removeEventListener("pointerdown", onPointerDown);
-		resize.destroy();
-		stopObserving();
-		dom.setRoot(null);
-	};
-}
-//#endregion
 //#region react/src/default-pane-keymap.ts
 const defaultPaneShortcutActions = [
 	{