@embedpdf/core-ui 3.0.0-next.14 → 3.0.0-next.16

package/dist/index.cjs

@@ -1,33 +1,43 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 //#region src/schema.ts
 const PINNED = 5;
-function item(command, opts) {
+/** A command button: `item('zoom:in', { variants: ['icon+label', 'icon'] })`. */
+function item(command, options) {
 	return {
 		command,
-		...opts
+		...options
 	};
 }
-function custom(slot, opts) {
-	return {
+/**
+* An item you draw yourself, by its slot name, and the command it becomes in the "More" menu:
+* `custom('page-number', 'page:go-to', { variants: ['full', 'compact'] })`. Without a command,
+* the item never leaves the bar.
+*/
+function custom(slot, terminal, options) {
+	return terminal === void 0 ? {
+		slot,
+		...options
+	} : {
 		slot,
-		...opts
+		terminal,
+		...options
 	};
 }
-function group(id, optsOrItems, items) {
-	if (Array.isArray(optsOrItems)) return {
-		id,
-		items: optsOrItems
-	};
-	const { items: optItems, ...opts } = optsOrItems;
+/** A group of items, with a separator between groups: `group('zoom', ['zoom:out', 'zoom:in'])`. */
+function group(id, items, options) {
 	return {
 		id,
-		...opts,
-		items: items ?? optItems ?? []
+		...options,
+		items
 	};
 }
 const DEFAULT_IMPORTANCE = 3;
 const DEFAULT_COMMAND_VARIANTS = ["icon"];
 const DEFAULT_CUSTOM_VARIANTS = ["default"];
+/** Whether a unit is a custom item with no command to become in menus: it never leaves the bar. */
+const isStandaloneUnit = (unit) => unit.kind === "custom" && unit.terminal === null;
+/** The command a unit runs: its own, or a custom item's `terminal`; null for a standalone item. */
+const commandOfUnit = (unit) => unit.kind === "command" ? unit.command : unit.terminal;
 function normalizeChild(groupId, child, seen) {
 	const asItem = typeof child === "string" ? { command: child } : child;
 	const unit = "slot" in asItem ? {
@@ -35,8 +45,8 @@ function normalizeChild(groupId, child, seen) {
 		key: `${groupId}:${asItem.slot}`,
 		slot: asItem.slot,
 		variants: asItem.variants ?? DEFAULT_CUSTOM_VARIANTS,
-		terminal: asItem.terminal,
-		importance: asItem.importance ?? 3
+		terminal: asItem.terminal ?? null,
+		importance: asItem.terminal === void 0 ? 5 : asItem.importance ?? 3
 	} : {
 		kind: "command",
 		key: `${groupId}:${asItem.command}`,
@@ -49,7 +59,11 @@ function normalizeChild(groupId, child, seen) {
 	seen.add(unit.key);
 	return unit;
 }
-/** Resolve shorthands + defaults; validate uniqueness. Solver/projection input. */
+/**
+* Resolve shorthands + defaults; validate uniqueness. Solver/projection input.
+* A group holding a custom item without a command is pinned with it: it never
+* collapses or overflows whole, so the item stays in the bar.
+*/
 function normalizeBar(bar) {
 	const seen = /* @__PURE__ */ new Set();
 	const groupIds = /* @__PURE__ */ new Set();
@@ -63,17 +77,19 @@ function normalizeBar(bar) {
 		if (!groups || groups.length === 0) continue;
 		sections.push({
 			name,
-			groups: groups.map((g) => {
-				if (groupIds.has(g.id)) throw new Error(`[ui-core] duplicate group in bar: ${g.id}`);
-				groupIds.add(g.id);
+			groups: groups.map((group) => {
+				if (groupIds.has(group.id)) throw new Error(`[ui-core] duplicate group in bar: ${group.id}`);
+				groupIds.add(group.id);
+				const units = group.items.map((child) => normalizeChild(group.id, child, seen));
 				return {
-					id: g.id,
-					labelKey: g.labelKey,
-					role: g.role ?? "buttons",
-					shed: g.shed ?? false,
-					collapse: g.collapse,
-					importance: g.importance ?? 3,
-					units: g.items.map((c) => normalizeChild(g.id, c, seen))
+					id: group.id,
+					labelKey: group.labelKey,
+					role: group.role ?? "buttons",
+					shed: group.shed ?? false,
+					collapse: group.collapse,
+					importance: units.some(isStandaloneUnit) ? 5 : group.importance ?? 3,
+					dependent: group.dependent === true,
+					units
 				};
 			})
 		});
@@ -85,204 +101,915 @@ function normalizeBar(bar) {
 }
 /**
 * Drop units whose command is currently invisible (permissions, disabled
-* categories, contextual visibility) BEFORE solving — an invisible unit must
+* categories, contextual visibility) before solving — an invisible unit must
 * not consume budget or appear in the overflow. Groups that empty out vanish
-* naturally in the solver's separator math and in the projection.
+* naturally in the solver's separator math and in the projection. A custom
+* item without a command has nothing to ask `keep` about, and stays. A bar
+* that shows nothing ({@link hasVisibleUnits}) keeps no unit at all, so its
+* dependent groups go too.
 */
 function filterBar(bar, keep) {
+	const shows = hasVisibleUnits(bar, keep);
 	return {
 		id: bar.id,
-		sections: bar.sections.map((s) => ({
-			name: s.name,
-			groups: s.groups.map((g) => ({
-				...g,
-				units: g.units.filter(keep)
+		sections: bar.sections.map((section) => ({
+			name: section.name,
+			groups: section.groups.map((group) => ({
+				...group,
+				units: shows ? group.units.filter((unit) => isStandaloneUnit(unit) || keep(unit)) : []
 			}))
 		}))
 	};
 }
 /**
-* Identity + validation. Checks what is checkable without a command registry:
-* bars normalize cleanly, and every `menu` a strip/bar could reference exists
-* is left to `validateChrome` (which also takes the known command ids).
+* Whether the bar shows anything once `keep` (as for {@link filterBar}) has had its say: a unit
+* left in a group that isn't dependent. Dependent groups show only beside one, so a bar with
+* only dependent groups left shows nothing.
 */
-function defineChrome(chrome) {
-	for (const bar of Object.values(chrome.bars)) normalizeBar(bar);
-	for (const bar of Object.values(chrome.modeBars ?? {})) normalizeBar(bar);
-	for (const strip of Object.values(chrome.strips ?? {})) normalizeBar(strip);
-	return chrome;
-}
-/** Dev-time cross-check: every command referenced by the chrome exists. */
-function validateChrome(chrome, knownCommands) {
-	const problems = [];
-	const checkBar = (bar, where) => {
-		for (const section of normalizeBar(bar).sections) for (const g of section.groups) for (const u of g.units) {
-			const refs = u.kind === "command" ? [u.command] : [u.terminal];
-			for (const c of refs) if (!knownCommands.has(c)) problems.push(`${where}: unknown command "${c}"`);
-		}
-	};
-	for (const [id, bar] of Object.entries(chrome.bars)) checkBar(bar, `bars.${id}`);
-	for (const [id, bar] of Object.entries(chrome.modeBars ?? {})) checkBar(bar, `modeBars.${id}`);
-	for (const [id, strip] of Object.entries(chrome.strips ?? {})) checkBar(strip, `strips.${id}`);
-	for (const [id, menu] of Object.entries(chrome.menus ?? {})) for (const section of menu.sections) for (const c of section.items) if (!knownCommands.has(c)) problems.push(`menus.${id}: unknown command "${c}"`);
-	return problems;
+function hasVisibleUnits(bar, keep) {
+	return bar.sections.some((section) => section.groups.some((group) => !group.dependent && group.units.some((unit) => isStandaloneUnit(unit) || keep(unit))));
 }
 //#endregion
-//#region src/transforms.ts
+//#region src/suggestions.ts
+/**
+* "Did you mean …?" for ids: the closest known id to one that doesn't exist,
+* by edit distance, when it is close enough to be a typo.
+*/
+/**
+* The number of single-character inserts, deletes, substitutions and swaps of two neighbours
+* that turn `left` into `right`.
+*/
+function editDistance(left, right) {
+	if (left === right) return 0;
+	let beforePrevious = [];
+	let previous = Array.from({ length: right.length + 1 }, (_, j) => j);
+	for (let i = 1; i <= left.length; i++) {
+		const current = [i];
+		for (let j = 1; j <= right.length; j++) {
+			const cost = left[i - 1] === right[j - 1] ? 0 : 1;
+			let distance = Math.min(previous[j] + 1, current[j - 1] + 1, previous[j - 1] + cost);
+			if (i > 1 && j > 1 && left[i - 1] === right[j - 2] && left[i - 2] === right[j - 1]) distance = Math.min(distance, beforePrevious[j - 2] + 1);
+			current.push(distance);
+		}
+		beforePrevious = previous;
+		previous = current;
+	}
+	return previous[right.length];
+}
 /**
-* Pure transforms over ChromeSchema — the "surgical edit" tier of the
-* customization ladder, between "pass nothing" and "own the whole value".
-* They are ordinary functions over data: no registry, no merge grammar, no
-* order sensitivity beyond function composition. Anything they can't express
-* is a sign the caller should write the schema value instead.
-*
-* Addressing is by BAR ID across all three bar collections (bars, modeBars,
-* strips). Mode bars may also be addressed by their surface key
-* ('mode:annotate') since that is what appears in `chrome.modeBars`.
+* The candidate closest to `id`, or `null` when none is within a typo's reach: at most a third
+* of the id's length, and never more than 3 edits apart.
 */
+function closestMatch(id, candidates) {
+	const reach = Math.min(3, Math.max(1, Math.floor(id.length / 3)));
+	let best = null;
+	let bestDistance = reach + 1;
+	for (const candidate of candidates) {
+		if (candidate === id) continue;
+		const distance = editDistance(id, candidate);
+		if (distance < bestDistance) {
+			best = candidate;
+			bestDistance = distance;
+		}
+	}
+	return best;
+}
+/** `' (did you mean "x"?)'` for the closest candidate, or `''` when there is none. */
+function didYouMean(id, candidates) {
+	const match = closestMatch(id, candidates);
+	return match === null ? "" : ` (did you mean "${match}"?)`;
+}
+//#endregion
+//#region src/layout.ts
+const states = /* @__PURE__ */ new WeakMap();
+/** A layout of `data`, which it never changes. */
+function createLayout(data = {}) {
+	return layoutOf(data, []);
+}
+/** Whether `value` is a layout made by {@link createLayout} or one of its edits. */
+function isLayout(value) {
+	return typeof value === "object" && value !== null && states.has(value);
+}
+/** What the edits that made `layout` couldn't do. */
+function layoutWarningsOf(layout) {
+	return states.get(layout)?.warnings ?? [];
+}
+/** `layout` with one more warning. */
+function withLayoutWarning(layout, warning) {
+	const state = states.get(layout);
+	return state ? layoutOf(state.data, [...state.warnings, warning]) : layout;
+}
+function layoutOf(data, warnings) {
+	const next = ([nextData, added]) => layoutOf(nextData, added.length > 0 ? [...warnings, ...added] : warnings);
+	const layout = Object.freeze({
+		place: (bar, place) => next(placeBar(data, bar, place)),
+		addBar: (id, bar) => next([withRecord(data, "bars", id, bar), []]),
+		removeBar: (id) => next(removeBar(data, id)),
+		add: (item, options) => next(addItem(data, item, options)),
+		remove: (ids, options) => next(removeItems(data, typeof ids === "string" ? [ids] : ids, options)),
+		replace: (id, item) => next(replaceItem(data, id, item)),
+		addMenu: (id, sections) => next([withRecord(data, "menus", id, sections), []]),
+		addPanel: (id, panel) => next([withRecord(data, "panels", id, panel), []]),
+		panel: (id, changes) => next(updatePanel(data, id, changes)),
+		panels: (changes) => next([updatePanels(data, changes), []]),
+		removePanel: (id) => next(removePanel(data, id)),
+		tabs: (visibility) => next([{
+			...data,
+			tabs: visibility
+		}, []]),
+		toJSON: () => data
+	});
+	states.set(layout, {
+		data,
+		warnings
+	});
+	return layout;
+}
 const SECTION_NAMES = [
 	"start",
 	"center",
 	"end"
 ];
-const isCustom = (child) => typeof child !== "string" && "slot" in child;
-const commandOf = (child) => typeof child === "string" ? child : isCustom(child) ? null : child.command;
-/** Every (collection, key) location whose bar matches `id`. */
-function locate(schema, id) {
-	const hits = [];
-	for (const coll of [
-		"bars",
-		"modeBars",
-		"strips"
-	]) for (const [key, bar] of Object.entries(schema[coll] ?? {})) if (bar.id === id || key === id) hits.push([coll, key]);
-	return hits;
-}
-function withBar(schema, coll, key, bar) {
+/** Whether a section entry is a group written as an object. */
+const isGroupObject = (entry) => typeof entry === "object" && entry !== null && !Array.isArray(entry) && "items" in entry;
+/**
+* A bar section's entries; none for a section that isn't a list. Layout data comes from
+* people: what isn't the right shape is skipped here and named by `validateLayout`.
+*/
+function entriesOf(bar, name) {
+	const entries = bar[name];
+	return Array.isArray(entries) ? entries : [];
+}
+/** A section entry's items: a group's, or the lone item. */
+function itemsOfEntry(entry) {
+	if (Array.isArray(entry)) return entry;
+	if (isGroupObject(entry)) return Array.isArray(entry.items) ? entry.items : [];
+	return [entry];
+}
+/** What an item is called in edits: its command id, your component's id, or `''` for a non-item. */
+function itemIdOf(item) {
+	if (typeof item === "string") return item;
+	if (typeof item !== "object" || item === null) return "";
+	return "custom" in item ? item.custom : item.command;
+}
+/** The command an item runs or stands for in menus, or `null` for your component without one. */
+function itemCommandOf(item) {
+	if (typeof item === "string") return item;
+	if (typeof item !== "object" || item === null) return null;
+	return "custom" in item ? item.command ?? null : item.command;
+}
+/** Whether `value` has an item's shape: a command id, `{ command }` or `{ custom }`. */
+function isLayoutItem(value) {
+	if (typeof value === "string") return value.length > 0;
+	if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+	const item = value;
+	return typeof item.custom === "string" || typeof item.command === "string";
+}
+/** Every item id in a bar, in order, once each. */
+function itemIdsOfBar(bar) {
+	const ids = /* @__PURE__ */ new Set();
+	for (const name of SECTION_NAMES) for (const entry of entriesOf(bar, name)) for (const item of itemsOfEntry(entry)) if (isLayoutItem(item)) ids.add(itemIdOf(item));
+	return [...ids];
+}
+/** A menu section's items; none for a section that isn't one. */
+function itemsOfMenuSection(section) {
+	if (Array.isArray(section)) return section;
+	const items = section?.items;
+	return Array.isArray(items) ? items : [];
+}
+/** A menu's sections; none for a menu that isn't a list. */
+const sectionsOfMenu = (menu) => Array.isArray(menu) ? menu : [];
+/** Every item in a menu, in order, once each. */
+const itemIdsOfMenu = (menu) => [...new Set(sectionsOfMenu(menu).flatMap((section) => itemsOfMenuSection(section)))];
+const barsOf$1 = (data) => data.bars ?? {};
+const menusOf = (data) => data.menus ?? {};
+const panelsOf = (data) => data.panels ?? {};
+function withRecord(data, key, id, value) {
 	return {
-		...schema,
-		[coll]: {
-			...schema[coll],
-			[key]: bar
+		...data,
+		[key]: {
+			...data[key],
+			[id]: value
 		}
 	};
 }
-/** Insert `spec.item` into a group of one bar. See AddItemSpec for semantics. */
-function addItem(schema, spec) {
-	const hits = locate(schema, spec.bar);
-	if (hits.length === 0) throw new Error(`[ui-core] addItem: no bar "${spec.bar}" in bars/modeBars/strips`);
-	if (hits.length > 1) throw new Error(`[ui-core] addItem: bar id "${spec.bar}" is ambiguous (${hits.map(([c]) => c).join(", ")})`);
-	const [coll, key] = hits[0];
-	const bar = schema[coll][key];
+function withoutRecord(data, key, id) {
+	const { [id]: _removed, ...rest } = data[key] ?? {};
+	return {
+		...data,
+		[key]: rest
+	};
+}
+/**
+* The entry with its items replaced: `null` when the edit took its last one, so the group goes.
+* A group that held none to begin with stays: the `modes` group, whose tabs are derived.
+*/
+function withEntryItems(entry, items) {
+	if (items.length === 0) return itemsOfEntry(entry).length === 0 ? entry : null;
+	if (isGroupObject(entry)) return {
+		...entry,
+		items
+	};
+	if (Array.isArray(entry)) return items;
+	return items.length === 1 ? items[0] : items;
+}
+/** The bar with each entry mapped; entries mapped to `null` and sections left empty go. */
+function mapEntries(bar, map) {
+	const next = {};
 	for (const name of SECTION_NAMES) {
-		if (name === spec.section) continue;
-		if (bar.sections[name]?.some((g) => g.id === spec.group)) throw new Error(`[ui-core] addItem: group "${spec.group}" lives in section "${name}", not "${spec.section}"`);
-	}
-	const groups = bar.sections[spec.section] ?? [];
-	const idx = groups.findIndex((g) => g.id === spec.group);
-	const nextGroups = idx === -1 ? [...groups, group(spec.group, [spec.item])] : groups.map((g, i) => {
-		if (i !== idx) return g;
-		const items = [...g.items];
-		items.splice(spec.at ?? items.length, 0, spec.item);
-		return {
-			...g,
-			items
-		};
-	});
-	return withBar(schema, coll, key, {
+		const entries = entriesOf(bar, name);
+		if (entries.length === 0) continue;
+		const mapped = entries.map((entry, index) => map(entry, name, index)).filter((entry) => entry !== null);
+		if (mapped.length > 0) next[name] = mapped;
+	}
+	const { start: _start, center: _center, end: _end, ...rest } = bar;
+	return {
+		...rest,
+		...next
+	};
+}
+function withMenuSectionItems(section, items) {
+	if (items.length === 0) return null;
+	return Array.isArray(section) ? items : {
+		...section,
+		items
+	};
+}
+const notFound = (verb, id, where, candidates) => `${verb}: "${id}" is not in "${where}"${didYouMean(id, candidates)}`;
+function placeBar(data, id, place) {
+	const bar = barsOf$1(data)[id];
+	if (!bar) return [data, [`place: no bar "${id}"${didYouMean(id, Object.keys(barsOf$1(data)))}`]];
+	return [withRecord(data, "bars", id, {
 		...bar,
-		sections: {
-			...bar.sections,
-			[spec.section]: nextGroups
+		place
+	}), []];
+}
+function removeBar(data, id) {
+	if (!barsOf$1(data)[id]) return [data, [`removeBar: no bar "${id}"${didYouMean(id, Object.keys(barsOf$1(data)))}`]];
+	return [withoutRecord(data, "bars", id), []];
+}
+function addItem(data, item, options) {
+	if (!isLayoutItem(item)) return [data, [`add: ${JSON.stringify(item)} is not an item`]];
+	const to = options?.to;
+	if (!to) return [data, [`add: "${itemIdOf(item)}" needs a bar or menu to go to ({ to })`]];
+	const bar = barsOf$1(data)[to];
+	if (bar) return addToBar(data, to, bar, item, options);
+	const menu = menusOf(data)[to];
+	if (menu) return addToMenu(data, to, menu, item, options);
+	return [data, [`add: no bar or menu "${to}"${didYouMean(to, [...Object.keys(barsOf$1(data)), ...Object.keys(menusOf(data))])}`]];
+}
+function addToBar(data, barId, bar, item, options) {
+	const id = itemIdOf(item);
+	const warnings = [];
+	const twice = (items) => items.some((each) => itemIdOf(each) === id);
+	const already = `add: "${id}" is already in that group of "${barId}"`;
+	const anchor = options.before ?? options.after;
+	if (anchor !== void 0) {
+		for (const name of SECTION_NAMES) {
+			const entries = entriesOf(bar, name);
+			for (let index = 0; index < entries.length; index++) {
+				const items = itemsOfEntry(entries[index]);
+				const at = items.findIndex((each) => itemIdOf(each) === anchor);
+				if (at === -1) continue;
+				if (twice(items)) return [data, [already]];
+				const cut = options.before !== void 0 ? at : at + 1;
+				const nextItems = [
+					...items.slice(0, cut),
+					item,
+					...items.slice(cut)
+				];
+				return [withRecord(data, "bars", barId, mapEntries(bar, (entry, section, i) => section === name && i === index ? withEntryItems(entry, nextItems) : entry)), []];
+			}
 		}
-	});
+		warnings.push(notFound("add", anchor, barId, itemIdsOfBar(bar)));
+	}
+	if (options.group !== void 0) for (const name of SECTION_NAMES) {
+		const entries = entriesOf(bar, name);
+		const index = entries.findIndex((entry) => isGroupObject(entry) && entry.id === options.group);
+		if (index === -1) continue;
+		const items = itemsOfEntry(entries[index]);
+		if (twice(items)) return [data, [already]];
+		return [withRecord(data, "bars", barId, mapEntries(bar, (entry, section, i) => section === name && i === index ? withEntryItems(entry, [...items, item]) : entry)), warnings];
+	}
+	let section = options.section ?? "end";
+	if (!SECTION_NAMES.includes(section)) {
+		warnings.push(`add: "${section}" is not a section (start, center or end); using "end"`);
+		section = "end";
+	}
+	const entry = options.group !== void 0 ? {
+		id: options.group,
+		items: [item]
+	} : [item];
+	return [withRecord(data, "bars", barId, {
+		...bar,
+		[section]: [...entriesOf(bar, section), entry]
+	}), warnings];
 }
+function addToMenu(data, menuId, menu, item, options) {
+	const command = typeof item === "string" ? item : "custom" in item ? null : item.command;
+	if (command === null) return [data, [`add: "${menuId}" is a menu, which holds commands, not your own components`]];
+	if (itemIdsOfMenu(menu).includes(command)) return [data, [`add: "${command}" is already in "${menuId}"`]];
+	const warnings = [];
+	const anchor = options.before ?? options.after;
+	if (anchor !== void 0) {
+		const sections = sectionsOfMenu(menu);
+		const index = sections.findIndex((section) => itemsOfMenuSection(section).includes(anchor));
+		if (index !== -1) {
+			const items = itemsOfMenuSection(sections[index]);
+			const at = items.indexOf(anchor);
+			const cut = options.before !== void 0 ? at : at + 1;
+			const nextItems = [
+				...items.slice(0, cut),
+				command,
+				...items.slice(cut)
+			];
+			return [withRecord(data, "menus", menuId, sections.map((section, i) => i === index ? withMenuSectionItems(section, nextItems) : section)), []];
+		}
+		warnings.push(notFound("add", anchor, menuId, itemIdsOfMenu(menu)));
+	}
+	return [withRecord(data, "menus", menuId, [...sectionsOfMenu(menu), [command]]), warnings];
+}
+function removeItems(data, ids, options) {
+	const from = options?.from;
+	if (!from) return [data, [`remove: ${ids.map((id) => `"${id}"`).join(", ")} needs a bar or menu to come out of ({ from }); to leave something out everywhere, turn it off with \`disable\``]];
+	const gone = new Set(ids);
+	const found = /* @__PURE__ */ new Set();
+	const bar = barsOf$1(data)[from];
+	if (bar) {
+		const nextBar = mapEntries(bar, (entry) => withEntryItems(entry, itemsOfEntry(entry).filter((each) => {
+			const id = itemIdOf(each);
+			if (!gone.has(id)) return true;
+			found.add(id);
+			return false;
+		})));
+		const missing = ids.filter((id) => !found.has(id));
+		return [found.size > 0 ? withRecord(data, "bars", from, nextBar) : data, missing.map((id) => notFound("remove", id, from, itemIdsOfBar(bar)))];
+	}
+	const menu = menusOf(data)[from];
+	if (menu) {
+		const nextMenu = sectionsOfMenu(menu).map((section) => withMenuSectionItems(section, itemsOfMenuSection(section).filter((id) => {
+			if (!gone.has(id)) return true;
+			found.add(id);
+			return false;
+		}))).filter((section) => section !== null);
+		const missing = ids.filter((id) => !found.has(id));
+		return [found.size > 0 ? withRecord(data, "menus", from, nextMenu) : data, missing.map((id) => notFound("remove", id, from, itemIdsOfMenu(menu)))];
+	}
+	return [data, [`remove: no bar or menu "${from}"${didYouMean(from, [...Object.keys(barsOf$1(data)), ...Object.keys(menusOf(data))])}`]];
+}
+function replaceItem(data, id, item) {
+	if (!isLayoutItem(item)) return [data, [`replace: ${JSON.stringify(item)} is not an item`]];
+	let found = false;
+	const bars = {};
+	for (const [barId, bar] of Object.entries(barsOf$1(data))) {
+		if (!itemIdsOfBar(bar).includes(id)) {
+			bars[barId] = bar;
+			continue;
+		}
+		found = true;
+		bars[barId] = mapEntries(bar, (entry) => withEntryItems(entry, itemsOfEntry(entry).map((each) => itemIdOf(each) === id ? item : each)));
+	}
+	const command = typeof item === "string" ? item : "custom" in item ? null : item.command;
+	const menus = {};
+	for (const [menuId, menu] of Object.entries(menusOf(data))) {
+		if (command === null || !itemIdsOfMenu(menu).includes(id)) {
+			menus[menuId] = menu;
+			continue;
+		}
+		found = true;
+		menus[menuId] = sectionsOfMenu(menu).map((section) => withMenuSectionItems(section, itemsOfMenuSection(section).map((each) => each === id ? command : each)));
+	}
+	if (!found) return [data, [`replace: "${id}" is in no bar or menu${didYouMean(id, [...Object.values(barsOf$1(data)).flatMap(itemIdsOfBar), ...Object.values(menusOf(data)).flatMap(itemIdsOfMenu)])}`]];
+	return [{
+		...data,
+		bars,
+		menus
+	}, []];
+}
+/** A panel's `present` as a map of sizes: one way at every size, or the sizes it names. */
+const panelPresentationsOf = (present) => typeof present === "string" ? {
+	compact: present,
+	medium: present,
+	expanded: present
+} : present;
+/** A panel's `width` as its fields: a number is where it starts. */
+const panelWidthFieldsOf = (width) => typeof width === "number" ? { initial: width } : width;
 /**
-* Purge commands (or custom slots, by slot name) from every bar, mode bar,
-* strip, and menu. Groups and menu sections that empty out are dropped;
-* emptied menus keep their key (commands may still target them) with no rows.
+* `panel` with `changes`: each field replaced, except `present` and `width`, which change only
+* what the change names (a map of sizes keeps the other sizes, `{ initial }` keeps the limits).
 */
-function removeItems(schema, ids) {
-	const gone = new Set(ids);
-	const keep = (child) => {
-		const cmd = commandOf(child);
-		return cmd !== null ? !gone.has(cmd) : !gone.has(child.slot);
-	};
-	const filterGroups = (groups) => groups?.map((g) => ({
-		...g,
-		items: g.items.filter(keep)
-	})).filter((g) => g.items.length > 0);
-	const filterBarSchema = (bar) => ({
-		...bar,
-		sections: Object.fromEntries(SECTION_NAMES.flatMap((name) => {
-			const groups = filterGroups(bar.sections[name]);
-			return groups && groups.length > 0 ? [[name, groups]] : [];
-		}))
-	});
-	const filterColl = (coll) => coll && Object.fromEntries(Object.entries(coll).map(([k, b]) => [k, filterBarSchema(b)]));
+function changedPanel(panel, changes) {
+	const next = { ...panel };
+	for (const [field, value] of Object.entries(changes)) if (value !== void 0) next[field] = value;
+	const { present, width } = changes;
+	if (typeof present === "object" && panel.present !== void 0) next.present = {
+		...panelPresentationsOf(panel.present),
+		...present
+	};
+	if (width !== void 0 && panel.width !== void 0 && (typeof width === "object" || typeof panel.width === "object")) next.width = {
+		...panelWidthFieldsOf(panel.width),
+		...panelWidthFieldsOf(width)
+	};
+	return next;
+}
+function updatePanel(data, id, changes) {
+	const panel = panelsOf(data)[id];
+	if (!panel) return [data, [`panel: no panel "${id}"${didYouMean(id, Object.keys(panelsOf(data)))}`]];
+	return [withRecord(data, "panels", id, changedPanel(panel, changes)), []];
+}
+function updatePanels(data, changes) {
+	const panels = Object.fromEntries(Object.entries(panelsOf(data)).map(([id, panel]) => [id, changedPanel(panel, changes)]));
 	return {
-		...schema,
-		bars: filterColl(schema.bars),
-		modeBars: filterColl(schema.modeBars),
-		strips: filterColl(schema.strips),
-		menus: schema.menus && Object.fromEntries(Object.entries(schema.menus).map(([k, menu]) => [k, {
-			...menu,
-			sections: menu.sections.map((s) => ({
-				...s,
-				items: s.items.filter((c) => !gone.has(c))
-			})).filter((s) => s.items.length > 0)
-		}]))
+		...data,
+		panels
 	};
 }
+function removePanel(data, id) {
+	if (!panelsOf(data)[id]) return [data, [`removePanel: no panel "${id}"${didYouMean(id, Object.keys(panelsOf(data)))}`]];
+	const button = `panel:${id}`;
+	const bars = Object.fromEntries(Object.entries(barsOf$1(data)).map(([barId, bar]) => [barId, itemIdsOfBar(bar).includes(button) ? mapEntries(bar, (entry) => withEntryItems(entry, itemsOfEntry(entry).filter((each) => itemIdOf(each) !== button))) : bar]));
+	const menus = Object.fromEntries(Object.entries(menusOf(data)).map(([menuId, menu]) => [menuId, itemIdsOfMenu(menu).includes(button) ? sectionsOfMenu(menu).map((section) => withMenuSectionItems(section, itemsOfMenuSection(section).filter((each) => each !== button))).filter((section) => section !== null) : menu]));
+	return [{
+		...withoutRecord(data, "panels", id),
+		bars,
+		menus
+	}, []];
+}
+/** The narrowest a medium viewer is, in px. */
+const MEDIUM_MIN_WIDTH_PX = 600;
+/** The narrowest an expanded viewer is, in px. */
+const EXPANDED_MIN_WIDTH_PX = 1024;
+/** The size class of a viewer this wide. */
+function sizeOf(widthPx) {
+	if (widthPx < 600) return "compact";
+	return widthPx < 1024 ? "medium" : "expanded";
+}
+/** Whether two envs are the same: the layout function runs again only when one of the fields changes. */
+const sameLayoutEnv = (left, right) => left.size === right.size && left.width === right.width && left.touch === right.touch && left.dir === right.dir;
 /**
-* Swap a command in place everywhere it appears — bars, mode bars, strips,
-* and (when the replacement is itself a plain command) menu rows.
+* The layout an option gives at this env: the default without one, the function's result, or
+* the option itself. A function that throws or returns no layout gives the default, with a
+* warning saying so.
 */
-function replaceItem(schema, id, item) {
-	const replacementCommand = commandOf(item);
-	const swap = (child) => commandOf(child) === id ? item : child;
-	const mapBar = (bar) => ({
-		...bar,
-		sections: Object.fromEntries(SECTION_NAMES.flatMap((name) => {
-			const groups = bar.sections[name];
-			return groups ? [[name, groups.map((g) => ({
-				...g,
-				items: g.items.map(swap)
-			}))]] : [];
-		}))
-	});
-	const mapColl = (coll) => coll && Object.fromEntries(Object.entries(coll).map(([k, b]) => [k, mapBar(b)]));
+function resolveLayout(option, defaults, env) {
+	if (option === void 0 || option === null) return defaults;
+	if (typeof option === "function") {
+		let result;
+		try {
+			result = option(defaults, env);
+		} catch (error) {
+			return withLayoutWarning(defaults, `the layout function threw (${error instanceof Error ? error.message : String(error)}); showing the default layout`);
+		}
+		return toLayout(result, defaults, "the layout function returned");
+	}
+	return toLayout(option, defaults, "layout is");
+}
+function toLayout(value, defaults, what) {
+	if (isLayout(value)) return value;
+	if (typeof value === "object" && value !== null && !Array.isArray(value)) return createLayout(value);
+	return withLayoutWarning(defaults, `${what} ${value === void 0 ? "nothing" : typeof value}, not a layout; showing the default layout`);
+}
+//#endregion
+//#region src/layout-compile.ts
+/** The id of the group that holds the mode tabs. */
+const MODES_GROUP = "modes";
+/** The command of the mode with no bar of its own: viewing. */
+const VIEW_MODE_COMMAND = "mode:view";
+/** The command that opens a mode, and its tab. */
+const modeCommandOf = (mode) => `mode:${mode}`;
+/** The command that opens and closes a panel, and its button. */
+const panelCommandOf = (panel) => `panel:${panel}`;
+const EDGES$1 = [
+	"top",
+	"bottom",
+	"start",
+	"end"
+];
+/** Every place a bar can float over the pages: each corner, and the middle of each side. */
+const FLOAT_POSITIONS = [
+	"top-start",
+	"top",
+	"top-end",
+	"start",
+	"end",
+	"bottom-start",
+	"bottom",
+	"bottom-end"
+];
+/** The layout's bars, by id, in order: the ones that are objects (`validateLayout` names the rest). */
+const barsOf = (data) => Object.entries(data.bars ?? {}).filter((entry) => typeof entry[1] === "object" && entry[1] !== null);
+/** The edge a place is on, or `null` for a place that isn't an edge. */
+function edgeOf(place) {
+	if (typeof place === "string") return EDGES$1.includes(place) ? place : null;
+	if (typeof place === "object" && place !== null && "edge" in place) return EDGES$1.includes(place.edge) ? place.edge : null;
+	return null;
+}
+/** The bar a place rides along, or `null`. */
+function hostOf(place) {
+	return typeof place === "object" && place !== null && "with" in place ? place.with : null;
+}
+/** What a place follows when it is over a selection, or `null`. */
+function selectionOf(place) {
+	return typeof place === "object" && place !== null && "at" in place ? place.at : null;
+}
+/** Where a place floats over the pages, or `null` for a place that doesn't float. */
+function floatOf(place) {
+	return typeof place === "object" && place !== null && "float" in place && FLOAT_POSITIONS.includes(place.float) ? place.float : null;
+}
+/**
+* The bars along an edge, from the outside in: in the order they were added, then each bar
+* with `before` or `after` put next to the bar it names. A bar that names a bar not on this
+* edge goes innermost.
+*/
+function barsOnEdge(data, edge) {
+	const placed = barsOf(data).filter(([, bar]) => edgeOf(bar.place) === edge);
+	const anchorOf = (place) => typeof place === "object" && place !== null && "edge" in place ? place.before !== void 0 ? {
+		id: place.before,
+		after: false
+	} : place.after !== void 0 ? {
+		id: place.after,
+		after: true
+	} : null : null;
+	const stack = placed.filter(([, bar]) => anchorOf(bar.place) === null).map(([id]) => id);
+	let pending = placed.filter(([, bar]) => anchorOf(bar.place) !== null);
+	for (let placedOne = true; placedOne && pending.length > 0;) {
+		placedOne = false;
+		pending = pending.filter(([id, bar]) => {
+			const anchor = anchorOf(bar.place);
+			const index = stack.indexOf(anchor.id);
+			if (index === -1) return true;
+			stack.splice(anchor.after ? index + 1 : index, 0, id);
+			placedOne = true;
+			return false;
+		});
+	}
+	return [...stack, ...pending.map(([id]) => id)];
+}
+/** The bars that ride along `host`, in the order they were added, nearest first. */
+function barsWith(data, host) {
+	return barsOf(data).filter(([, bar]) => hostOf(bar.place) === host).map(([id]) => id);
+}
+/** `bars` in order, each followed by the bars that ride along it (nearest first), and theirs. */
+function withRiders(data, bars) {
+	const stack = [];
+	const visit = (id) => {
+		if (stack.includes(id)) return;
+		stack.push(id);
+		for (const rider of barsWith(data, id)) visit(rider);
+	};
+	for (const id of bars) visit(id);
+	return stack;
+}
+/**
+* Every bar drawn along an edge, from the outside in: each bar on the edge, followed by the bars
+* that ride along it (nearest first) and the bars that ride along those.
+*/
+function edgeStackOf(data, edge) {
+	return withRiders(data, barsOnEdge(data, edge));
+}
+/** The bars floating at `position`, in the order they were added. */
+function barsFloating(data, position) {
+	return barsOf(data).filter(([, bar]) => floatOf(bar.place) === position).map(([id]) => id);
+}
+/**
+* Every bar drawn floating at `position`, from the viewer's edge in: each bar floating there,
+* followed by the bars that ride along it, as {@link edgeStackOf} orders an edge.
+*/
+function floatStackOf(data, position) {
+	return withRiders(data, barsFloating(data, position));
+}
+/** The bars over a selection of this kind, in the order they were added. */
+function barsAt(data, target) {
+	return barsOf(data).filter(([, bar]) => selectionOf(bar.place) === target).map(([id]) => id);
+}
+/** Every mode of the layout's bars, once each, in bar order. */
+function modesOf(data) {
+	const modes = /* @__PURE__ */ new Set();
+	for (const [, bar] of barsOf(data)) if (typeof bar.mode === "string" && bar.mode.length > 0) modes.add(bar.mode);
+	return [...modes];
+}
+/** The bars shown in a mode, in bar order. */
+function barsInMode(data, mode) {
+	return barsOf(data).filter(([, bar]) => bar.mode === mode).map(([id]) => id);
+}
+const NOTHING = /* @__PURE__ */ new Set();
+const toBarChild = (item) => {
+	if (typeof item === "string") return item;
+	if ("custom" in item) {
+		const custom = { slot: item.custom };
+		if (item.command !== void 0) custom.terminal = item.command;
+		if (item.variants !== void 0) custom.variants = item.variants;
+		if (item.importance !== void 0) custom.importance = item.importance;
+		return custom;
+	}
+	const command = { command: item.command };
+	if (item.variants !== void 0) command.variants = item.variants;
+	if (item.importance !== void 0) command.importance = item.importance;
+	return command;
+};
+/** The mode tabs, each a label at importance 1, so the tab strip is the first to compact. */
+function modeTabsOf(data, omit) {
+	const modes = modesOf(data).map(modeCommandOf).filter((command) => !omit.has(command));
+	if (modes.length === 0) return [];
+	return (omit.has("mode:view") ? modes : [VIEW_MODE_COMMAND, ...modes]).map((command) => ({
+		command,
+		variants: ["label"],
+		importance: 1
+	}));
+}
+/**
+* A bar as the toolbar fits it, or `null` for a bar the layout doesn't have. Groups written as
+* arrays and lone items get ids of their own (`start-0`, …); an item twice in one group shows
+* once; a group with nothing left goes.
+*/
+function compileBar(data, id, options = {}) {
+	const bar = data.bars?.[id];
+	if (typeof bar !== "object" || bar === null) return null;
+	const omit = options.omit ?? NOTHING;
+	const used = /* @__PURE__ */ new Set();
+	const uniqueId = (wanted) => {
+		let groupId = wanted;
+		for (let count = 2; used.has(groupId); count++) groupId = `${wanted}-${count}`;
+		used.add(groupId);
+		return groupId;
+	};
+	const sections = {};
+	for (const name of SECTION_NAMES) {
+		const groups = [];
+		entriesOf(bar, name).forEach((entry, index) => {
+			const object = isGroupObject(entry) ? entry : null;
+			const seen = /* @__PURE__ */ new Set();
+			let items = itemsOfEntry(entry).filter((item) => {
+				if (!isLayoutItem(item)) return false;
+				const itemId = itemIdOf(item);
+				if (seen.has(itemId)) return false;
+				seen.add(itemId);
+				return typeof item === "object" && "custom" in item ? true : !omit.has(itemId);
+			});
+			const isModes = object?.id === MODES_GROUP;
+			if (isModes) items = [...modeTabsOf(data, omit).filter((tab) => !seen.has(tab.command)), ...items];
+			if (items.length === 0) return;
+			const group = {
+				id: uniqueId(object?.id ?? `${name}-${index}`),
+				items: items.map(toBarChild)
+			};
+			if (isModes) group.role = "tabs";
+			if (object?.titleKey !== void 0) group.labelKey = object.titleKey;
+			if (object?.shed !== void 0) group.shed = object.shed;
+			if (object?.collapse !== void 0) group.collapse = object.collapse;
+			if (object?.importance !== void 0) group.importance = object.importance;
+			if (object?.dependent === true) group.dependent = true;
+			groups.push(group);
+		});
+		if (groups.length > 0) sections[name] = groups;
+	}
 	return {
-		...schema,
-		bars: mapColl(schema.bars),
-		modeBars: mapColl(schema.modeBars),
-		strips: mapColl(schema.strips),
-		menus: replacementCommand === null ? schema.menus : schema.menus && Object.fromEntries(Object.entries(schema.menus).map(([k, menu]) => [k, {
-			...menu,
-			sections: menu.sections.map((s) => ({
-				...s,
-				items: s.items.map((c) => c === id ? replacementCommand : c)
-			}))
-		}]))
+		id,
+		sections
 	};
 }
+/** When the document tabs show: as the layout says, else while more than one document is open. */
+function tabsOf(data) {
+	return data.tabs ?? "multiple";
+}
+/** A menu's sections, or `null` for a menu the layout doesn't have. An empty section goes. */
+function menuOf(data, id) {
+	const menu = data.menus?.[id];
+	if (!menu) return null;
+	const commandsOf = (section) => [...new Set(itemsOfMenuSection(section).filter((item) => typeof item === "string"))];
+	return sectionsOfMenu(menu).map((section) => {
+		if (Array.isArray(section) || typeof section !== "object" || section === null) return { items: commandsOf(section) };
+		const titled = section;
+		const read = { items: commandsOf(section) };
+		if (titled.title !== void 0) read.title = titled.title;
+		if (titled.titleKey !== void 0) read.titleKey = titled.titleKey;
+		return read;
+	}).filter((section) => section.items.length > 0);
+}
+const reachByData = /* @__PURE__ */ new WeakMap();
+function reachOf(data) {
+	const known = reachByData.get(data);
+	if (known) return known;
+	const modes = modesOf(data).map((mode) => [mode, barsInMode(data, mode).map((id) => normalizeBar(compileBar(data, id)))]);
+	const menus = new Map(Object.keys(data.menus ?? {}).map((id) => [id, menuOf(data, id).flatMap((section) => section.items)]));
+	const buttons = /* @__PURE__ */ new Set();
+	for (const [, bar] of barsOf(data)) for (const name of SECTION_NAMES) for (const entry of entriesOf(bar, name)) for (const item of itemsOfEntry(entry)) if (typeof item === "string") buttons.add(item);
+	else if (isLayoutItem(item) && !("custom" in item)) buttons.add(item.command);
+	const reach = {
+		modes,
+		menus,
+		buttons: [...buttons]
+	};
+	reachByData.set(data, reach);
+	return reach;
+}
+/**
+* The commands the bars leave out because what they lead to shows nothing: the tab of a mode
+* whose bars have nothing visible ({@link hasVisibleUnits}: dependent groups alone don't count),
+* and a button whose menu has nothing visible (or that the layout has no menu for). Sorted, so
+* two equal results compare equal; pass it to {@link compileBar} as `omit`. Cheap to call on every change: what it reads of the layout is
+* read once per layout data.
+*/
+function omittedCommandsOf(data, resolve) {
+	const reach = reachOf(data);
+	const isVisible = (id) => resolve(id)?.visible === true;
+	const omitted = [];
+	for (const [mode, bars] of reach.modes) if (!bars.some((bar) => hasVisibleUnits(bar, (unit) => {
+		const command = commandOfUnit(unit);
+		return command !== null && isVisible(command);
+	}))) omitted.push(modeCommandOf(mode));
+	for (const button of reach.buttons) {
+		const menu = resolve(button)?.menu;
+		if (menu !== void 0 && !(reach.menus.get(menu) ?? []).some(isVisible)) omitted.push(button);
+	}
+	return omitted.sort();
+}
 //#endregion
-//#region src/helpers.ts
+//#region src/layout-validate.ts
+const EDGES = [
+	"top",
+	"bottom",
+	"start",
+	"end"
+];
+const FLOAT_POSITIONS$1 = [
+	"top-start",
+	"top",
+	"top-end",
+	"start",
+	"end",
+	"bottom-start",
+	"bottom",
+	"bottom-end"
+];
+const SELECTION_TARGETS = ["selection", "annotation"];
+const PRESENTATIONS = [
+	"dock",
+	"overlay",
+	"sheet"
+];
+const SIZES = [
+	"compact",
+	"medium",
+	"expanded"
+];
+const WIDTH_FIELDS = [
+	"initial",
+	"min",
+	"max"
+];
+const TABS = [
+	"always",
+	"multiple",
+	"never"
+];
 /**
-* The helpers bundle handed to `chrome: (base, h) => …` transforms — the
-* surgical edits plus the authoring sugar, so simple customizations need no
-* imports at all. One object, frozen shape: it IS public API (the vanilla
-* snippet passes it across the config boundary), so additions are features
-* and removals are breaking.
+* Every problem with a layout, as sentences: what its edits couldn't do first, then what its
+* data names that the viewer doesn't have. Empty when there is none.
 */
-const chromeHelpers = {
-	addItem,
-	removeItems,
-	replaceItem,
-	item,
-	group,
-	custom,
-	defineChrome
-};
+function validateLayout(layout, known) {
+	const problems = isLayout(layout) ? [...layoutWarningsOf(layout)] : [];
+	const data = isLayout(layout) ? layout.toJSON() : layout;
+	if (typeof data !== "object" || data === null) return [...problems, "the layout is not an object"];
+	const bars = data.bars ?? {};
+	const knownCommands = new Set(known.commands);
+	const commands = new Set(knownCommands);
+	for (const mode of modesOf(data)) commands.add(modeCommandOf(mode));
+	if (modesOf(data).length > 0) commands.add(VIEW_MODE_COMMAND);
+	for (const panel of Object.keys(data.panels ?? {})) commands.add(panelCommandOf(panel));
+	const checkCommand = (where, command) => {
+		if (!commands.has(command) && known.hasCommand?.(command) !== true) problems.push(`${where}: no command "${command}"${didYouMean(command, commands)}`);
+	};
+	for (const [id, bar] of Object.entries(bars)) {
+		const where = `bar "${id}"`;
+		if (typeof bar !== "object" || bar === null) {
+			problems.push(`${where} is not a bar`);
+			continue;
+		}
+		problems.push(...placeProblems(where, id, bar.place, data));
+		if (bar.mode !== void 0 && bar.title === void 0 && bar.titleKey === void 0) {
+			if (!knownCommands.has(modeCommandOf(bar.mode))) problems.push(`${where}: its mode "${bar.mode}" has no title, so its tab reads "${bar.mode}"`);
+		}
+		problems.push(...itemProblems(where, bar, checkCommand));
+	}
+	for (const [id, menu] of Object.entries(data.menus ?? {})) problems.push(...menuProblems(`menu "${id}"`, menu, checkCommand));
+	for (const [id, panel] of Object.entries(data.panels ?? {})) problems.push(...panelProblems(`panel "${id}"`, panel));
+	if (data.tabs !== void 0 && !TABS.includes(data.tabs)) problems.push(`tabs: "${data.tabs}" is not one of always, multiple or never`);
+	return problems;
+}
+function placeProblems(where, id, place, data) {
+	const bars = data.bars ?? {};
+	const notAPlace = (shown) => `${where}: ${shown} is not a place (an edge, { edge, before | after }, { float }, { with } or { at })`;
+	if (place === void 0) return [`${where} has no place`];
+	if (typeof place === "string") return EDGES.includes(place) ? [] : [notAPlace(`"${place}"`)];
+	if (typeof place !== "object" || place === null) return [notAPlace(String(place))];
+	if ("edge" in place) {
+		if (!EDGES.includes(place.edge)) return [`${where}: "${place.edge}" is not an edge`];
+		const anchor = place.before ?? place.after;
+		if (anchor === void 0) return [];
+		const side = place.before !== void 0 ? "before" : "after";
+		const onEdge = Object.keys(bars).filter((other) => other !== id && edgeOf(bars[other].place) === place.edge);
+		if (onEdge.includes(anchor)) return [];
+		if (bars[anchor]) return [`${where} goes ${side} "${anchor}", which is not on the ${place.edge} edge`];
+		return [`${where} goes ${side} "${anchor}": no such bar${didYouMean(anchor, onEdge)}`];
+	}
+	if ("float" in place) return FLOAT_POSITIONS$1.includes(place.float) ? [] : [`${where}: "${place.float}" is not a floating position${didYouMean(place.float, FLOAT_POSITIONS$1)}`];
+	if ("with" in place) {
+		if (place.with === id) return [`${where} rides along itself`];
+		if (!bars[place.with]) return [`${where} rides along "${place.with}": no such bar${didYouMean(place.with, Object.keys(bars))}`];
+		const seen = /* @__PURE__ */ new Set([id]);
+		for (let host = place.with; host !== null; host = hostOf(bars[host]?.place)) {
+			if (seen.has(host)) return [`${where} rides along a bar that rides along it`];
+			seen.add(host);
+		}
+		return [];
+	}
+	if ("at" in place) return SELECTION_TARGETS.includes(place.at) ? [] : [`${where}: "${place.at}" is not selection or annotation`];
+	return [notAPlace(JSON.stringify(place))];
+}
+function itemProblems(where, bar, checkCommand) {
+	const problems = [];
+	const groupIds = /* @__PURE__ */ new Set();
+	let groups = 0;
+	let dependentGroups = 0;
+	for (const name of SECTION_NAMES) {
+		const entries = bar[name];
+		if (entries === void 0) continue;
+		if (!Array.isArray(entries)) {
+			problems.push(`${where}: its ${name} section is not a list of groups`);
+			continue;
+		}
+		for (const entry of entries) {
+			if (isGroupObject(entry) && entry.id !== void 0) {
+				if (groupIds.has(entry.id)) problems.push(`${where}: two groups are called "${entry.id}"`);
+				groupIds.add(entry.id);
+			}
+			groups++;
+			if (isGroupObject(entry) && entry.dependent !== void 0) {
+				const dependent = entry.dependent;
+				if (dependent === true) dependentGroups++;
+				else if (dependent !== false) problems.push(`${where}: ${entry.id === void 0 ? "a group" : `group "${entry.id}"`} has dependent ${JSON.stringify(dependent)}, which is not true or false`);
+			}
+			const seen = /* @__PURE__ */ new Set();
+			for (const item of itemsOfEntry(entry)) {
+				if (!isLayoutItem(item)) {
+					problems.push(`${where}: ${JSON.stringify(item)} is not an item`);
+					continue;
+				}
+				const id = itemIdOf(item);
+				if (seen.has(id)) problems.push(`${where}: "${id}" is twice in one group`);
+				seen.add(id);
+				const command = itemCommandOf(item);
+				if (command !== null) checkCommand(where, command);
+			}
+		}
+	}
+	if (groups > 0 && dependentGroups === groups) problems.push(`${where}: every group in it is dependent, so it never shows`);
+	return problems;
+}
+function menuProblems(where, menu, checkCommand) {
+	if (!Array.isArray(menu)) return [`${where} is not a list of sections`];
+	const problems = [];
+	const seen = /* @__PURE__ */ new Set();
+	for (const section of menu) for (const command of itemsOfMenuSection(section)) {
+		if (typeof command !== "string") {
+			problems.push(`${where}: ${JSON.stringify(command)} is not a command id`);
+			continue;
+		}
+		if (seen.has(command)) problems.push(`${where}: "${command}" is in it twice`);
+		seen.add(command);
+		checkCommand(where, command);
+	}
+	return problems;
+}
+const isWidthPx = (value) => typeof value === "number" && Number.isFinite(value) && value > 0;
+function presentProblems(where, present) {
+	if (typeof present === "string") return PRESENTATIONS.includes(present) ? [] : [`${where}: present "${present}" is not dock, overlay or sheet`];
+	if (typeof present !== "object" || present === null || Array.isArray(present)) return [`${where}: present ${JSON.stringify(present)} is not a way to open, or one per size`];
+	const problems = [];
+	for (const [size, way] of Object.entries(present)) if (!SIZES.includes(size)) problems.push(`${where}: present has "${size}", not a size${didYouMean(size, SIZES)}`);
+	else if (way !== void 0 && !PRESENTATIONS.includes(way)) problems.push(`${where}: present.${size} "${way}" is not dock, overlay or sheet`);
+	return problems;
+}
+function widthProblems(where, width) {
+	if (typeof width === "number") return isWidthPx(width) ? [] : [`${where}: width ${width} is not a width in px`];
+	if (typeof width !== "object" || width === null || Array.isArray(width)) return [`${where}: width ${JSON.stringify(width)} is not a width in px, or { initial, min, max }`];
+	const problems = [];
+	const fields = width;
+	for (const [field, value] of Object.entries(fields)) if (!WIDTH_FIELDS.includes(field)) problems.push(`${where}: width has "${field}", not initial, min or max`);
+	else if (value !== void 0 && !isWidthPx(value)) problems.push(`${where}: width.${field} ${JSON.stringify(value)} is not a width in px`);
+	if (isWidthPx(fields.min) && isWidthPx(fields.max) && fields.min > fields.max) problems.push(`${where}: width.min ${fields.min} is wider than width.max ${fields.max}`);
+	return problems;
+}
+function panelProblems(where, panel) {
+	if (typeof panel !== "object" || panel === null) return [`${where} is not a panel`];
+	const problems = [];
+	if (panel.side !== void 0 && panel.side !== "start" && panel.side !== "end") problems.push(`${where}: side "${panel.side}" is not start or end`);
+	if (panel.present !== void 0) problems.push(...presentProblems(where, panel.present));
+	if (panel.width !== void 0) problems.push(...widthProblems(where, panel.width));
+	if (panel.resizable !== void 0 && typeof panel.resizable !== "boolean") problems.push(`${where}: resizable ${JSON.stringify(panel.resizable)} is not true or false`);
+	return problems;
+}
 //#endregion
 //#region src/solver.ts
 /** variant < shed < collapse < overflow when importance ties. */
@@ -296,17 +1023,17 @@ const STEP_RANK = {
 function buildState(bar) {
 	const groups = [];
 	let position = 0;
-	for (const section of bar.sections) for (const g of section.groups) {
+	for (const section of bar.sections) for (const group of section.groups) {
 		const gs = {
-			group: g,
+			group,
 			section: section.name,
 			collapsed: false,
 			overflowed: false,
 			units: []
 		};
-		for (const u of g.units) {
+		for (const unit of group.units) {
 			gs.units.push({
-				unit: u,
+				unit,
 				group: gs,
 				variantIndex: 0,
 				shed: false,
@@ -337,7 +1064,7 @@ function nextStep(groups) {
 			continue;
 		}
 		let childrenExhausted = true;
-		const visibleCount = gs.units.filter((u) => !u.overflowed && !u.shed).length;
+		const visibleCount = gs.units.filter((unit) => !unit.overflowed && !unit.shed).length;
 		for (const us of gs.units) {
 			if (us.overflowed || us.shed) continue;
 			if (us.variantIndex < us.unit.variants.length - 1) {
@@ -394,32 +1121,32 @@ function applyStep(step) {
 			return;
 		case "overflow-unit":
 			step.unit.overflowed = true;
-			if (step.unit.group.units.every((u) => u.overflowed)) step.unit.group.overflowed = true;
+			if (step.unit.group.units.every((unit) => unit.overflowed)) step.unit.group.overflowed = true;
 			return;
 		case "overflow-group":
 			step.group.overflowed = true;
-			for (const u of step.group.units) u.overflowed = true;
+			for (const unit of step.group.units) unit.overflowed = true;
 			return;
 	}
 }
 /**
-* Visible width of the current assignment: unit widths + gaps + derived
-* separators. Gaps are counted between ALL adjacent visible units, including
+* Visible length of the current assignment: unit lengths + gaps + derived
+* separators. Gaps are counted between all adjacent visible units, including
 * across section boundaries — deliberately conservative: the adapter's layout
 * spaces sections with collapsing auto margins, so the cross-section gap
 * allowance (≤ 2×gap) is slack those margins absorb, never an overlap risk.
 */
 function measure(groups, metrics, hasTrigger) {
-	let width = 0;
+	let length = 0;
 	let complete = true;
 	let visibleUnits = 0;
 	const visibleBySection = /* @__PURE__ */ new Map();
 	for (const gs of groups) {
 		if (gs.overflowed) continue;
 		if (gs.collapsed) {
-			const w = metrics.groupCollapsed(gs.group.id);
-			if (w === void 0) complete = false;
-			width += w ?? 0;
+			const collapsedLength = metrics.groupCollapsed(gs.group.id);
+			if (collapsedLength === void 0) complete = false;
+			length += collapsedLength ?? 0;
 			visibleUnits += 1;
 			visibleBySection.set(gs.section, (visibleBySection.get(gs.section) ?? 0) + 1);
 			continue;
@@ -432,39 +1159,39 @@ function measure(groups, metrics, hasTrigger) {
 				shedCount += 1;
 				continue;
 			}
-			const w = metrics.unit(us.unit.key, us.unit.variants[us.variantIndex]);
-			if (w === void 0) complete = false;
-			width += w ?? 0;
+			const unitLength = metrics.unit(us.unit.key, us.unit.variants[us.variantIndex]);
+			if (unitLength === void 0) complete = false;
+			length += unitLength ?? 0;
 			visibleUnits += 1;
 			groupVisible = true;
 		}
 		if (shedCount > 0) {
-			const w = metrics.groupTrigger(gs.group.id);
-			if (w === void 0) complete = false;
-			width += w ?? 0;
+			const triggerLength = metrics.groupTrigger(gs.group.id);
+			if (triggerLength === void 0) complete = false;
+			length += triggerLength ?? 0;
 			visibleUnits += 1;
 			groupVisible = true;
 		}
 		if (groupVisible) visibleBySection.set(gs.section, (visibleBySection.get(gs.section) ?? 0) + 1);
 	}
 	if (hasTrigger) {
-		width += metrics.overflowTrigger;
+		length += metrics.overflowTrigger;
 		visibleUnits += 1;
 	}
-	if (visibleUnits > 1) width += metrics.gap * (visibleUnits - 1);
-	for (const count of visibleBySection.values()) if (count > 1) width += metrics.separator * (count - 1);
+	if (visibleUnits > 1) length += metrics.gap * (visibleUnits - 1);
+	for (const count of visibleBySection.values()) if (count > 1) length += metrics.separator * (count - 1);
 	return {
-		width,
+		length,
 		complete
 	};
 }
 function anyOverflow(groups) {
-	return groups.some((gs) => gs.units.some((u) => u.overflowed));
+	return groups.some((gs) => gs.units.some((unit) => unit.overflowed));
 }
 function solvePass(bar, metrics, budget, hasTrigger) {
 	const groups = buildState(bar);
 	let measured = measure(groups, metrics, hasTrigger);
-	while (measured.width > budget) {
+	while (measured.length > budget) {
 		const step = nextStep(groups);
 		if (!step) break;
 		applyStep(step);
@@ -475,13 +1202,14 @@ function solvePass(bar, metrics, budget, hasTrigger) {
 		measured
 	};
 }
-function solve(bar, metrics, containerWidth) {
-	let pass = solvePass(bar, metrics, containerWidth, false);
-	if (anyOverflow(pass.groups)) pass = solvePass(bar, metrics, containerWidth, true);
+/** Fit `bar` into `containerLength`, the room along its axis. */
+function solve(bar, metrics, containerLength) {
+	let pass = solvePass(bar, metrics, containerLength, false);
+	if (anyOverflow(pass.groups)) pass = solvePass(bar, metrics, containerLength, true);
 	const units = /* @__PURE__ */ new Map();
 	const groupAssignments = /* @__PURE__ */ new Map();
 	for (const gs of pass.groups) {
-		const shedCount = gs.units.filter((u) => u.shed && !u.overflowed && !gs.collapsed).length;
+		const shedCount = gs.units.filter((unit) => unit.shed && !unit.overflowed && !gs.collapsed).length;
 		groupAssignments.set(gs.group.id, {
 			shedCount,
 			collapsed: gs.collapsed,
@@ -496,28 +1224,30 @@ function solve(bar, metrics, containerWidth) {
 		units,
 		groups: groupAssignments,
 		hasOverflow: anyOverflow(pass.groups),
-		width: pass.measured.width,
+		length: pass.measured.length,
 		complete: pass.measured.complete
 	};
 }
 //#endregion
 //#region src/projection.ts
+/** A unit's menu form; a custom item's is its terminal command's. A standalone item has none. */
 function projectUnit(unit, resolve) {
-	const command = unit.kind === "custom" ? unit.terminal : unit.command;
+	const command = commandOfUnit(unit);
+	if (command === null) return [];
 	const menu = resolve(command)?.menu;
-	return menu ? {
+	return [menu ? {
 		type: "submenu",
 		command,
 		menu
 	} : {
 		type: "command",
 		command
-	};
+	}];
 }
 function projectOverflow(bar, fit, resolve) {
 	const sections = [];
 	for (const section of bar.sections) for (const group of section.groups) {
-		const rows = group.units.filter((u) => fit.units.get(u.key)?.kind === "overflow").map((u) => projectUnit(u, resolve));
+		const rows = group.units.filter((unit) => fit.units.get(unit.key)?.kind === "overflow").flatMap((unit) => projectUnit(unit, resolve));
 		if (rows.length === 0) continue;
 		sections.push({
 			labelKey: group.labelKey,
@@ -529,26 +1259,30 @@ function projectOverflow(bar, fit, resolve) {
 }
 /**
 * The content of a group's disclosure trigger: its shed units, in bar order,
-* in menu form — same totality rules as the global overflow. This is v2's
-* hand-written `mode-tabs-overflow-menu`, derived.
+* in menu form — same totality rules as the global overflow.
 */
 function projectShed(group, fit, resolve) {
-	return group.units.filter((u) => fit.units.get(u.key)?.kind === "shed").map((u) => projectUnit(u, resolve));
+	return group.units.filter((unit) => fit.units.get(unit.key)?.kind === "shed").flatMap((unit) => projectUnit(unit, resolve));
 }
 /**
-* Strip projection — a bar projected for UN-measured rendering (a contextual
+* Strip projection — a bar projected for un-measured rendering (a contextual
 * strip anchored to a selection has no fit pressure to solve). The schema
-* declares what COULD appear; `visible` (the command registry's runtime truth)
-* decides what DOES: hidden commands drop out, groups that empty out vanish,
-* and an all-hidden bar projects to [] — "render nothing" falls out. Custom
+* declares what could appear; `visible` (the command registry's runtime truth)
+* decides what does: hidden commands drop out, groups that empty out vanish,
+* and an all-hidden bar projects to [] — "render nothing" falls out, as it
+* does for a bar with only dependent groups left ({@link filterBar}). Custom
 * units project through their `terminal` command, same totality rule as the
 * overflow. Upgrading a strip to measured/overflowing rendering later is a
 * renderer swap (<Toolbar>), never a schema change.
 */
 function projectStrip(bar, visible) {
+	const shown = filterBar(bar, (unit) => {
+		const command = commandOfUnit(unit);
+		return command !== null && visible(command);
+	});
 	const groups = [];
-	for (const section of bar.sections) for (const group of section.groups) {
-		const commands = group.units.map((u) => u.kind === "custom" ? u.terminal : u.command).filter(visible);
+	for (const section of shown.sections) for (const group of section.groups) {
+		const commands = group.units.map(commandOfUnit).filter((command) => command !== null);
 		if (commands.length === 0) continue;
 		groups.push({
 			id: group.id,
@@ -559,6 +1293,182 @@ function projectStrip(bar, visible) {
 	return groups;
 }
 //#endregion
+//#region src/toolbar-layout.ts
+const SECTIONS = [
+	"start",
+	"center",
+	"end"
+];
+const ICON_ONLY = ["icon"];
+/** The bar as a vertical toolbar draws it: every command an icon; custom items keep their variants. */
+function iconsOnly(bar) {
+	return {
+		...bar,
+		sections: bar.sections.map((section) => ({
+			...section,
+			groups: section.groups.map((group) => ({
+				...group,
+				units: group.units.map((unit) => unit.kind === "command" ? {
+					...unit,
+					variants: ICON_ONLY
+				} : unit)
+			}))
+		}))
+	};
+}
+/** Fit the bar into `containerLength` and describe what to draw. */
+function layoutToolbar(input) {
+	const { resolve, execute, measureKey } = input;
+	/** A unit's command, resolved; null for a standalone item or an unregistered command. */
+	const resolveUnit = (unit) => {
+		const command = commandOfUnit(unit);
+		return command === null ? null : resolve(command);
+	};
+	const visible = filterBar(input.bar, (unit) => resolveUnit(unit)?.visible === true);
+	const bar = input.orientation === "vertical" ? iconsOnly(visible) : visible;
+	const fit = solve(bar, input.metrics, input.containerLength);
+	const visibleCommands = (units) => units.map(resolveUnit).filter((command) => command !== null && command.visible);
+	const parts = {
+		unit: (unit, variant) => {
+			if (unit.kind === "custom") return {
+				kind: "custom",
+				key: unit.key,
+				measureKey: measureKey.unit(unit.key, variant),
+				name: unit.slot,
+				variant,
+				terminal: resolveUnit(unit),
+				runTerminal: () => {
+					if (unit.terminal !== null) execute(unit.terminal);
+				}
+			};
+			const command = resolve(unit.command);
+			return {
+				kind: "command",
+				key: unit.key,
+				measureKey: measureKey.unit(unit.key, variant),
+				command: command ?? input.unregistered(unit.command),
+				variant,
+				run: command ? () => execute(unit.command) : () => {}
+			};
+		},
+		collapsed: (group) => ({
+			kind: "collapsed",
+			key: group.id,
+			measureKey: measureKey.group(group.id),
+			view: {
+				id: group.id,
+				labelKey: group.labelKey,
+				collapse: group.collapse ?? "menu",
+				role: group.role,
+				commands: visibleCommands(group.units),
+				execute
+			}
+		}),
+		disclosure: (group, allChildren) => ({
+			kind: "disclosure",
+			key: `${group.id}::trigger`,
+			measureKey: measureKey.groupTrigger(group.id),
+			view: {
+				id: group.id,
+				labelKey: group.labelKey,
+				role: group.role,
+				commands: visibleCommands(group.units.filter((unit) => allChildren || fit.units.get(unit.key)?.kind === "shed")),
+				execute
+			}
+		})
+	};
+	return {
+		sections: SECTIONS.map((name) => liveSection(name, bar, fit, parts)),
+		measured: measuredParts(bar, parts),
+		hasOverflow: fit.hasOverflow,
+		overflow: projectOverflow(bar, fit, input.menuTarget)
+	};
+}
+function liveSection(name, bar, fit, parts) {
+	const section = bar.sections.find((each) => each.name === name);
+	const groups = [];
+	for (const group of section?.groups ?? []) {
+		const assignment = fit.groups.get(group.id);
+		if (!assignment || assignment.overflowed) continue;
+		if (assignment.collapsed) {
+			groups.push({
+				id: group.id,
+				parts: [parts.collapsed(group)]
+			});
+			continue;
+		}
+		const drawn = [];
+		for (const unit of group.units) {
+			const placed = fit.units.get(unit.key);
+			if (placed?.kind === "variant") drawn.push(parts.unit(unit, placed.variant));
+		}
+		if (assignment.shedCount > 0) drawn.push(parts.disclosure(group, false));
+		if (drawn.length > 0) groups.push({
+			id: group.id,
+			parts: drawn
+		});
+	}
+	return {
+		name,
+		groups
+	};
+}
+function measuredParts(bar, parts) {
+	const measured = [];
+	for (const section of bar.sections) for (const group of section.groups) {
+		for (const unit of group.units) for (const variant of unit.variants) measured.push(parts.unit(unit, variant));
+		if (group.collapse) measured.push(parts.collapsed(group));
+		if (group.shed) measured.push(parts.disclosure(group, true));
+	}
+	return measured;
+}
+/**
+* The menu a default folded group or group trigger opens: one section of the
+* group's commands, a radio group when the group is tabs.
+*/
+function groupMenuView(view, isOpen, close) {
+	return {
+		sections: [{
+			labelKey: view.labelKey,
+			role: view.role === "tabs" ? "radio" : void 0,
+			rows: view.commands.map((command) => ({
+				type: "command",
+				command: command.id
+			}))
+		}],
+		isOpen,
+		close,
+		resolve: (id) => view.commands.find((command) => command.id === id) ?? null,
+		execute: (id) => view.execute(id)
+	};
+}
+/**
+* A bar as a strip shows it now (`projectStrip`), each command resolved: the
+* schema says what could appear, each command's `visible` decides what does.
+* Empty while nothing applies.
+*/
+function stripGroupsOf(bar, resolve) {
+	const resolved = /* @__PURE__ */ new Map();
+	const visible = (id) => {
+		const command = resolve(id);
+		if (command) resolved.set(id, command);
+		return command?.visible === true;
+	};
+	return projectStrip(bar, visible).map((group) => ({
+		id: group.id,
+		labelKey: group.labelKey,
+		commands: group.commands.map((id) => resolved.get(id))
+	}));
+}
+/**
+* Whether two resolved strips show the same, group by group and command by
+* command (`sameCommand` is plugin-commands' `resolvedCommandsEqual`): a
+* strip's readers pass it on only when this is false.
+*/
+function sameStripGroups(left, right, sameCommand) {
+	return left.length === right.length && left.every((group, i) => group.id === right[i].id && group.commands.length === right[i].commands.length && group.commands.every((command, j) => sameCommand(command, right[i].commands[j])));
+}
+//#endregion
 //#region src/shortcuts.ts
 const MODIFIERS = /* @__PURE__ */ new Set([
 	"mod",
@@ -572,7 +1482,7 @@ const MODIFIERS = /* @__PURE__ */ new Set([
 	"shift"
 ]);
 function parseShortcut(shortcut) {
-	const tokens = shortcut.split("+").map((t) => t.trim());
+	const tokens = shortcut.split("+").map((token) => token.trim());
 	const parsed = {
 		key: (tokens[tokens.length - 1] === "" ? "+" : tokens[tokens.length - 1]).toLowerCase(),
 		mod: false,
@@ -582,34 +1492,74 @@ function parseShortcut(shortcut) {
 		shift: false
 	};
 	for (const token of tokens.slice(0, -1)) {
-		const t = token.toLowerCase();
-		if (t === "") continue;
-		if (!MODIFIERS.has(t)) throw new Error(`[ui-core] unknown modifier "${token}" in "${shortcut}"`);
-		if (t === "mod") parsed.mod = true;
-		else if (t === "ctrl" || t === "control") parsed.ctrl = true;
-		else if (t === "meta" || t === "cmd" || t === "command") parsed.meta = true;
-		else if (t === "alt" || t === "option") parsed.alt = true;
+		const modifier = token.toLowerCase();
+		if (modifier === "") continue;
+		if (!MODIFIERS.has(modifier)) throw new Error(`[ui-core] unknown modifier "${token}" in "${shortcut}"`);
+		if (modifier === "mod") parsed.mod = true;
+		else if (modifier === "ctrl" || modifier === "control") parsed.ctrl = true;
+		else if (modifier === "meta" || modifier === "cmd" || modifier === "command") parsed.meta = true;
+		else if (modifier === "alt" || modifier === "option") parsed.alt = true;
 		else parsed.shift = true;
 	}
 	if (parsed.key === "") throw new Error(`[ui-core] empty key in shortcut "${shortcut}"`);
 	return parsed;
 }
-function matchShortcut(parsed, stroke, opts) {
-	const wantCtrl = parsed.ctrl || parsed.mod && !opts.isMac;
-	const wantMeta = parsed.meta || parsed.mod && opts.isMac;
+function matchShortcut(parsed, stroke, options) {
+	const wantCtrl = parsed.ctrl || parsed.mod && !options.isMac;
+	const wantMeta = parsed.meta || parsed.mod && options.isMac;
 	if (stroke.ctrlKey !== wantCtrl) return false;
 	if (stroke.metaKey !== wantMeta) return false;
 	if (stroke.altKey !== parsed.alt) return false;
 	if (parsed.shift && !stroke.shiftKey) return false;
-	if (!parsed.shift && stroke.shiftKey && parsed.key.length > 1) return false;
+	const hasCase = parsed.key !== parsed.key.toUpperCase();
+	if (!parsed.shift && stroke.shiftKey && (parsed.key.length > 1 || hasCase)) return false;
 	if (stroke.key.toLowerCase() === parsed.key) return true;
 	return parsed.key.length > 1 && stroke.code !== void 0 && stroke.code.toLowerCase() === parsed.key;
 }
-/** Display form for menu rows: '⌘K' on mac, 'Ctrl+K' elsewhere. */
-function formatShortcut(shortcut, opts) {
+/**
+* Whether two shortcuts are pressed with the same keys on this platform: `'Mod+S'` and
+* `'Ctrl+s'` are where `Mod` is Ctrl, and not on a Mac.
+*/
+function sameShortcut(left, right, options) {
+	const keysOf = (shortcut) => {
+		const parsed = parseShortcut(shortcut);
+		return [
+			parsed.key,
+			parsed.ctrl || parsed.mod && !options.isMac,
+			parsed.meta || parsed.mod && options.isMac,
+			parsed.alt,
+			parsed.shift
+		].join(" ");
+	};
+	return keysOf(left) === keysOf(right);
+}
+/**
+* How a key shows, by its lowercase name, where that isn't the name itself:
+* on a Mac, then elsewhere. Matches what each platform's own menus show.
+*/
+const KEY_NAMES = {
+	arrowleft: ["←", "←"],
+	arrowright: ["→", "→"],
+	arrowup: ["↑", "↑"],
+	arrowdown: ["↓", "↓"],
+	backspace: ["⌫", "Backspace"],
+	delete: ["⌦", "Delete"],
+	enter: ["↩", "Enter"],
+	escape: ["Esc", "Esc"],
+	tab: ["⇥", "Tab"],
+	" ": ["Space", "Space"],
+	space: ["Space", "Space"],
+	pageup: ["Page Up", "Page Up"],
+	pagedown: ["Page Down", "Page Down"],
+	numpadadd: ["Num +", "Num +"],
+	numpadsubtract: ["Num -", "Num -"]
+};
+/** A shortcut as a menu or a tooltip shows it: `'⌘K'` on a Mac, `'Ctrl+K'` elsewhere. */
+function formatShortcut(shortcut, options) {
 	const parsed = parseShortcut(shortcut);
-	const key = parsed.key.length === 1 ? parsed.key.toUpperCase() : capitalize(parsed.key);
-	if (opts.isMac) return `${[
+	const named = KEY_NAMES[parsed.key];
+	const key = named ? named[options.isMac ? 0 : 1] : parsed.key.length === 1 ? parsed.key.toUpperCase() : capitalize(parsed.key);
+	if (options.isMac) return `${[
 		parsed.ctrl ? "⌃" : "",
 		parsed.alt ? "⌥" : "",
 		parsed.shift ? "⇧" : "",
@@ -622,29 +1572,146 @@ function formatShortcut(shortcut, opts) {
 		parsed.shift ? "Shift" : ""
 	].filter(Boolean), key].join("+");
 }
-function capitalize(s) {
-	return s.charAt(0).toUpperCase() + s.slice(1);
+function capitalize(text) {
+	return text.charAt(0).toUpperCase() + text.slice(1);
+}
+//#endregion
+//#region src/tree-keys.ts
+/** The row `row` sits under: the nearest one above it that is one level up, or -1 at the top. */
+function parentOf(rows, row) {
+	const depth = rows[row].depth;
+	for (let i = row - 1; i >= 0; i -= 1) if (rows[i].depth < depth) return i;
+	return -1;
+}
+/** The rows that share `row`'s parent, `row` among them, in order. */
+function siblingsOf(rows, row) {
+	const depth = rows[row].depth;
+	const siblings = [];
+	for (let i = parentOf(rows, row) + 1; i < rows.length; i += 1) {
+		if (rows[i].depth < depth) break;
+		if (rows[i].depth === depth) siblings.push(i);
+	}
+	return siblings;
+}
+function treeKeyAction(rows, focused, key, options = {}) {
+	if (rows.length === 0) return null;
+	const last = rows.length - 1;
+	if (focused < 0 || focused > last) {
+		if (key === "ArrowDown" || key === "Home") return {
+			type: "focus",
+			row: 0
+		};
+		if (key === "ArrowUp" || key === "End") return {
+			type: "focus",
+			row: last
+		};
+		return null;
+	}
+	const current = rows[focused];
+	const focus = (row) => row === focused ? null : {
+		type: "focus",
+		row
+	};
+	switch (key) {
+		case "ArrowDown": return focus(Math.min(focused + 1, last));
+		case "ArrowUp": return focus(Math.max(focused - 1, 0));
+		case "Home": return focus(0);
+		case "End": return focus(last);
+		case "ArrowRight":
+			if (!current.hasChildren) return null;
+			return current.expanded ? focus(focused + 1) : {
+				type: "expand",
+				rows: [focused]
+			};
+		case "ArrowLeft": {
+			if (current.hasChildren && current.expanded) return {
+				type: "collapse",
+				row: focused
+			};
+			const parent = parentOf(rows, focused);
+			return parent < 0 ? null : focus(parent);
+		}
+		case "*": {
+			const collapsed = siblingsOf(rows, focused).filter((row) => rows[row].hasChildren && !rows[row].expanded);
+			return collapsed.length > 0 ? {
+				type: "expand",
+				rows: collapsed
+			} : null;
+		}
+		case "Enter": return {
+			type: "activate",
+			row: focused
+		};
+		case "F2": return options.editable ? {
+			type: "rename",
+			row: focused
+		} : null;
+		case "Delete": return options.editable ? {
+			type: "delete",
+			row: focused
+		} : null;
+		default: return null;
+	}
 }
 //#endregion
 exports.DEFAULT_IMPORTANCE = DEFAULT_IMPORTANCE;
+exports.EXPANDED_MIN_WIDTH_PX = EXPANDED_MIN_WIDTH_PX;
+exports.FLOAT_POSITIONS = FLOAT_POSITIONS;
+exports.MEDIUM_MIN_WIDTH_PX = MEDIUM_MIN_WIDTH_PX;
+exports.MODES_GROUP = MODES_GROUP;
 exports.PINNED = PINNED;
-exports.addItem = addItem;
-exports.chromeHelpers = chromeHelpers;
+exports.VIEW_MODE_COMMAND = VIEW_MODE_COMMAND;
+exports.barsAt = barsAt;
+exports.barsFloating = barsFloating;
+exports.barsInMode = barsInMode;
+exports.barsOnEdge = barsOnEdge;
+exports.barsWith = barsWith;
+exports.closestMatch = closestMatch;
+exports.commandOfUnit = commandOfUnit;
+exports.compileBar = compileBar;
+exports.createLayout = createLayout;
 exports.custom = custom;
-exports.defineChrome = defineChrome;
+exports.didYouMean = didYouMean;
+exports.edgeOf = edgeOf;
+exports.edgeStackOf = edgeStackOf;
+exports.editDistance = editDistance;
 exports.filterBar = filterBar;
+exports.floatOf = floatOf;
+exports.floatStackOf = floatStackOf;
 exports.formatShortcut = formatShortcut;
 exports.group = group;
+exports.groupMenuView = groupMenuView;
+exports.hasVisibleUnits = hasVisibleUnits;
+exports.hostOf = hostOf;
+exports.isLayout = isLayout;
+exports.isStandaloneUnit = isStandaloneUnit;
 exports.item = item;
+exports.itemCommandOf = itemCommandOf;
+exports.itemIdOf = itemIdOf;
+exports.layoutToolbar = layoutToolbar;
 exports.matchShortcut = matchShortcut;
+exports.menuOf = menuOf;
+exports.modeCommandOf = modeCommandOf;
+exports.modesOf = modesOf;
 exports.normalizeBar = normalizeBar;
+exports.omittedCommandsOf = omittedCommandsOf;
+exports.panelCommandOf = panelCommandOf;
+exports.panelPresentationsOf = panelPresentationsOf;
+exports.panelWidthFieldsOf = panelWidthFieldsOf;
 exports.parseShortcut = parseShortcut;
 exports.projectOverflow = projectOverflow;
 exports.projectShed = projectShed;
 exports.projectStrip = projectStrip;
-exports.removeItems = removeItems;
-exports.replaceItem = replaceItem;
+exports.resolveLayout = resolveLayout;
+exports.sameLayoutEnv = sameLayoutEnv;
+exports.sameShortcut = sameShortcut;
+exports.sameStripGroups = sameStripGroups;
+exports.selectionOf = selectionOf;
+exports.sizeOf = sizeOf;
 exports.solve = solve;
-exports.validateChrome = validateChrome;
+exports.stripGroupsOf = stripGroupsOf;
+exports.tabsOf = tabsOf;
+exports.treeKeyAction = treeKeyAction;
+exports.validateLayout = validateLayout;
 
 //# sourceMappingURL=index.cjs.map