@embedpdf/viewer-chrome 3.0.0-next.15 → 3.0.0-next.16

package/dist/outline-panel-BpGtBdj0.cjs

@@ -0,0 +1,707 @@
+const require_icons = require("./icons-1UfLUZ_y.cjs");
+const require_commands = require("./commands-DL1gjZt7.cjs");
+const require_toolbar = require("./toolbar-ddvpsvTb.cjs");
+const require_theme = require("./theme-FR26JI3r.cjs");
+const require_sheet = require("./sheet-DTBFiwde.cjs");
+let react = require("react");
+let _embedpdf_react_outline = require("@embedpdf/react/outline");
+let _embedpdf_react_i18n = require("@embedpdf/react/i18n");
+let _embedpdf_react_commands = require("@embedpdf/react/commands");
+let _embedpdf_react_shell = require("@embedpdf/react/shell");
+let _embedpdf_core_ui = require("@embedpdf/core-ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui/outline-tree.ts
+const outlineKeyOf = (ref) => ref ? String(ref.objectNumber) : "top";
+/**
+* The rows a filter shows: every item whose title holds the text, whatever its case, with the
+* items it sits under so it is found in its place. Every shown parent shows its children.
+*/
+function filteredRows(items, query) {
+	const needle = query.trim().toLocaleLowerCase();
+	if (!needle) return [];
+	const byKey = new Map(items.map((item) => [outlineKeyOf(item.ref), item]));
+	const shown = /* @__PURE__ */ new Set();
+	for (const item of items) {
+		if (!item.title.toLocaleLowerCase().includes(needle)) continue;
+		for (let at = item; at;) {
+			const key = outlineKeyOf(at.ref);
+			if (shown.has(key)) break;
+			shown.add(key);
+			at = at.parent ? byKey.get(outlineKeyOf(at.parent)) : void 0;
+		}
+	}
+	const depthOf = /* @__PURE__ */ new Map();
+	const parents = new Set(items.flatMap((item) => item.parent ? [outlineKeyOf(item.parent)] : []));
+	const rows = [];
+	for (const item of items) {
+		const key = outlineKeyOf(item.ref);
+		const depth = item.parent ? (depthOf.get(outlineKeyOf(item.parent)) ?? -1) + 1 : 0;
+		depthOf.set(key, depth);
+		if (!shown.has(key)) continue;
+		const hasChildren = parents.has(key);
+		rows.push({
+			item,
+			depth,
+			hasChildren,
+			expanded: hasChildren
+		});
+	}
+	return rows;
+}
+/** The panel's background in each mode, as the viewer's theme draws it. */
+const SURFACE = {
+	light: "#ffffff",
+	dark: "#1f2937"
+};
+/** WCAG's least contrast for large or bold text, and for parts of a picture. */
+const LEAST_CONTRAST = 3;
+/** A `#rrggbb` colour's relative luminance (WCAG 2.2, "relative luminance"). */
+function luminanceOf(color) {
+	const value = Number.parseInt(color.slice(1), 16);
+	const channel = (shift) => {
+		const level = (value >> shift & 255) / 255;
+		return level <= .04045 ? level / 12.92 : ((level + .055) / 1.055) ** 2.4;
+	};
+	return .2126 * channel(16) + .7152 * channel(8) + .0722 * channel(0);
+}
+/**
+* The colour to draw an item's title in: its own (`/C`), unless it would read badly on the
+* panel (a dark red in the dark theme, yellow in the light one); then the panel's own text
+* colour, as for an item without one.
+*/
+function readableColor(color, mode) {
+	if (!color || !/^#[0-9a-fA-F]{6}$/.test(color)) return null;
+	const [lighter, darker] = [luminanceOf(color), luminanceOf(SURFACE[mode])].sort((left, right) => right - left);
+	return (lighter + .05) / (darker + .05) >= LEAST_CONTRAST ? color : null;
+}
+/**
+* The keys of the rows that move with `dragged`: each dragged row and the rows under it that
+* show. A drop among them would put an item under itself.
+*/
+function movingKeysOf(rows, dragged) {
+	const moving = /* @__PURE__ */ new Set();
+	let under = -1;
+	for (const row of rows) {
+		const key = outlineKeyOf(row.item.ref);
+		if (under >= 0 && row.depth > under) {
+			moving.add(key);
+			continue;
+		}
+		under = -1;
+		if (dragged.has(key)) {
+			moving.add(key);
+			under = row.depth;
+		}
+	}
+	return moving;
+}
+/**
+* Where rows dropped in the gap before `rows[gap]` land, at the level the pointer asks for
+* (`depth`), as a tree view lets them: no deeper than one level under the row above, and no
+* shallower than the row below, so the tree stays a tree. `moving` are the rows that move: the
+* gaps among them are left out. `null` when no row stays to place them by.
+*/
+function dropOf(rows, moving, gap, depth) {
+	const kept = rows.filter((row) => !moving.has(outlineKeyOf(row.item.ref)));
+	if (kept.length === 0) return null;
+	const at = rows.slice(0, gap).filter((row) => !moving.has(outlineKeyOf(row.item.ref))).length;
+	const above = kept[at - 1];
+	const below = kept[at];
+	const deepest = above ? above.depth + 1 : 0;
+	const shallowest = below ? Math.min(below.depth, deepest) : 0;
+	const level = Math.max(shallowest, Math.min(deepest, Math.round(depth)));
+	let parent = null;
+	let previous = null;
+	for (let i = at - 1; i >= 0; i -= 1) {
+		const row = kept[i];
+		if (row.depth < level) {
+			parent = row.item.ref;
+			break;
+		}
+		if (row.depth === level && previous === null) previous = row.item.ref;
+	}
+	return {
+		parent,
+		position: previous ? { after: previous } : "start",
+		depth: level
+	};
+}
+//#endregion
+//#region src/ui/outline-rows.tsx
+/**
+* The outline's rows: a tree that draws only the rows in view (every row is one height), with
+* the keyboard of the ARIA tree pattern (`treeKeyAction`), renaming in the row, and dragging rows
+* to another place, the pointer's distance from the edge choosing how deep. A pen or a finger
+* holds a row first, so a swipe still scrolls the list.
+*/
+/** Rows drawn past each edge of the view, so a scroll shows no gap before the next frame. */
+const OVERSCAN = 8;
+/** How far the pointer moves before a press on a row becomes a drag, in px. */
+const DRAG_SLOP_PX = 4;
+/** How long a pen or a finger holds a row before it drags it, in ms. */
+const HOLD_MS = 450;
+/** Within this many px of the list's top or bottom, a drag scrolls the list. */
+const EDGE_PX = 28;
+/** The text of a row is drawn at this size, in px. */
+const TEXT_PX = 13;
+/** A text field below this size makes iOS zoom the page as it takes focus. */
+const FIELD_PX = 16;
+function OutlineRows(props) {
+	const { outline, rows, currentKey, selected, editable, filtering, renamingKey, onRename } = props;
+	const t = (0, _embedpdf_react_i18n.useT)();
+	const idPrefix = (0, react.useId)();
+	const list = (0, react.useRef)(null);
+	const [scrollTop, setScrollTop] = (0, react.useState)(0);
+	const [height, setHeight] = (0, react.useState)(0);
+	const [focusedKey, setFocusedKey] = (0, react.useState)(null);
+	const [anchorKey, setAnchorKey] = (0, react.useState)(null);
+	const [drag, setDrag] = (0, react.useState)(null);
+	const [treeFocused, setTreeFocused] = (0, react.useState)(false);
+	const dragRef = (0, react.useRef)(null);
+	dragRef.current = drag;
+	const holdTimer = (0, react.useRef)(null);
+	const suppressClick = (0, react.useRef)(false);
+	const selectedKeys = new Set(selected.map(outlineKeyOf));
+	const indexOfKey = (key) => key === null ? -1 : rows.findIndex((row) => outlineKeyOf(row.item.ref) === key);
+	const focused = indexOfKey(focusedKey) >= 0 ? focusedKey : currentKey ?? (selected[0] ? outlineKeyOf(selected[0]) : null);
+	const focusedIndex = indexOfKey(focused);
+	(0, react.useLayoutEffect)(() => {
+		const element = list.current;
+		if (!element) return;
+		const observer = new ResizeObserver(() => setHeight(element.clientHeight));
+		observer.observe(element);
+		setHeight(element.clientHeight);
+		return () => observer.disconnect();
+	}, []);
+	/** Scroll so a row shows, moving no more than it takes. */
+	const reveal = (index) => {
+		const element = list.current;
+		if (!element || index < 0) return;
+		const top = index * 30;
+		if (top < element.scrollTop) element.scrollTop = top;
+		else if (top + 30 > element.scrollTop + element.clientHeight) element.scrollTop = top + 30 - element.clientHeight;
+	};
+	const currentIndex = indexOfKey(currentKey);
+	(0, react.useEffect)(() => reveal(currentIndex), [currentIndex]);
+	const renamingIndex = indexOfKey(renamingKey);
+	(0, react.useEffect)(() => reveal(renamingIndex), [renamingIndex]);
+	const first = Math.max(0, Math.floor(scrollTop / 30) - OVERSCAN);
+	const last = Math.min(rows.length, Math.ceil((scrollTop + height) / 30) + OVERSCAN);
+	const follow = (row) => {
+		const { item } = row;
+		if (!item.target && !item.action) return;
+		outline.activate(item.ref);
+		props.onPicked();
+	};
+	const focusRow = (index, select) => {
+		const row = rows[index];
+		if (!row) return;
+		const key = outlineKeyOf(row.item.ref);
+		setFocusedKey(key);
+		if (select) {
+			setAnchorKey(key);
+			outline.select([row.item.ref]);
+		}
+		reveal(index);
+	};
+	const run = (action) => {
+		switch (action.type) {
+			case "focus":
+				focusRow(action.row, true);
+				return;
+			case "expand":
+				for (const index of action.rows) {
+					const row = rows[index];
+					if (row) outline.expand(row.item.ref);
+				}
+				return;
+			case "collapse": {
+				const row = rows[action.row];
+				if (row) outline.collapse(row.item.ref);
+				return;
+			}
+			case "activate": {
+				const row = rows[action.row];
+				if (row) follow(row);
+				return;
+			}
+			case "rename": {
+				const row = rows[action.row];
+				if (row) onRename(outlineKeyOf(row.item.ref));
+				return;
+			}
+			case "delete":
+				if (selected.length > 0) outline.delete(selected).catch(() => {});
+				return;
+		}
+	};
+	const onKeyDown = (event) => {
+		if (event.target !== event.currentTarget) return;
+		setTreeFocused(true);
+		const key = event.key === "Backspace" ? "Delete" : event.key;
+		const action = (0, _embedpdf_core_ui.treeKeyAction)(rows, focusedIndex, key, { editable });
+		if (!action || filtering && (action.type === "expand" || action.type === "collapse")) return;
+		event.preventDefault();
+		run(action);
+	};
+	const onRowClick = (row, index, event) => {
+		if (suppressClick.current) {
+			suppressClick.current = false;
+			return;
+		}
+		const key = outlineKeyOf(row.item.ref);
+		setFocusedKey(key);
+		if (event.metaKey || event.ctrlKey) {
+			outline.select(selectedKeys.has(key) ? selected.filter((ref) => outlineKeyOf(ref) !== key) : [...selected, row.item.ref]);
+			setAnchorKey(key);
+			return;
+		}
+		if (event.shiftKey && anchorKey !== null && indexOfKey(anchorKey) >= 0) {
+			const from = indexOfKey(anchorKey);
+			const [low, high] = from < index ? [from, index] : [index, from];
+			outline.select(rows.slice(low, high + 1).map((each) => each.item.ref));
+			return;
+		}
+		setAnchorKey(key);
+		outline.select([row.item.ref]);
+		follow(row);
+	};
+	const stopHold = () => {
+		if (holdTimer.current !== null) clearTimeout(holdTimer.current);
+		holdTimer.current = null;
+	};
+	/** Where the pointer drops what's dragged, from where it is over the list. */
+	const dropAt = (current, clientX, clientY) => {
+		const element = list.current;
+		if (!element) return null;
+		const y = clientY - element.getBoundingClientRect().top + element.scrollTop;
+		const gap = Math.max(0, Math.min(rows.length, Math.round(y / 30)));
+		const rtl = getComputedStyle(element).direction === "rtl";
+		const across = (clientX - current.startX) * (rtl ? -1 : 1);
+		const drop = dropOf(rows, current.moving, gap, current.startDepth + across / 16);
+		return drop ? {
+			...drop,
+			gap
+		} : null;
+	};
+	const startDrag = (current, clientX, clientY) => {
+		const next = {
+			...current,
+			active: true,
+			drop: dropAt(current, clientX, clientY)
+		};
+		setDrag(next);
+		list.current?.setPointerCapture(current.pointerId);
+	};
+	const onPointerDown = (row, event) => {
+		if (!editable || filtering || event.button !== 0 || renamingKey !== null) return;
+		if (event.target.closest("button, input")) return;
+		const key = outlineKeyOf(row.item.ref);
+		const dragged = selectedKeys.has(key) ? selectedKeys : /* @__PURE__ */ new Set([key]);
+		const moving = movingKeysOf(rows, dragged);
+		const refs = rows.filter((each) => dragged.has(outlineKeyOf(each.item.ref))).filter((each) => {
+			const keyOf = outlineKeyOf(each.item.ref);
+			const parent = each.item.parent ? outlineKeyOf(each.item.parent) : null;
+			return !(parent !== null && moving.has(parent) && moving.has(keyOf));
+		}).map((each) => each.item.ref);
+		const pending = {
+			pointerId: event.pointerId,
+			startX: event.clientX,
+			startY: event.clientY,
+			startDepth: row.depth,
+			moving,
+			refs,
+			active: false,
+			drop: null
+		};
+		setDrag(pending);
+		if (event.pointerType !== "mouse") {
+			const { clientX, clientY } = event;
+			holdTimer.current = setTimeout(() => {
+				const current = dragRef.current;
+				if (current && !current.active) startDrag(current, clientX, clientY);
+			}, HOLD_MS);
+		}
+	};
+	const dragging = drag?.active === true;
+	(0, react.useEffect)(() => {
+		if (!dragging) return;
+		const prevent = (event) => event.preventDefault();
+		document.addEventListener("touchmove", prevent, { passive: false });
+		return () => document.removeEventListener("touchmove", prevent);
+	}, [dragging]);
+	const onPointerMove = (event) => {
+		const current = dragRef.current;
+		if (!current || event.pointerId !== current.pointerId) return;
+		const moved = Math.hypot(event.clientX - current.startX, event.clientY - current.startY);
+		if (!current.active) {
+			if (moved <= DRAG_SLOP_PX) return;
+			if (event.pointerType === "mouse") startDrag(current, event.clientX, event.clientY);
+			else {
+				stopHold();
+				setDrag(null);
+			}
+			return;
+		}
+		const element = list.current;
+		if (element) {
+			const box = element.getBoundingClientRect();
+			if (event.clientY < box.top + EDGE_PX) element.scrollTop -= 8;
+			else if (event.clientY > box.bottom - EDGE_PX) element.scrollTop += 8;
+		}
+		setDrag({
+			...current,
+			drop: dropAt(current, event.clientX, event.clientY)
+		});
+	};
+	const endDrag = (event, commit) => {
+		stopHold();
+		const current = dragRef.current;
+		if (!current || event.pointerId !== current.pointerId) return;
+		setDrag(null);
+		if (!current.active) return;
+		suppressClick.current = true;
+		setTimeout(() => {
+			suppressClick.current = false;
+		}, 0);
+		if (commit && current.drop && current.refs.length > 0) outline.move(current.refs, current.drop.parent, current.drop.position).catch(() => {});
+	};
+	(0, react.useEffect)(() => stopHold, []);
+	const shown = rows.slice(first, last);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: list,
+		role: "tree",
+		"aria-label": props.label,
+		"aria-multiselectable": true,
+		tabIndex: 0,
+		"aria-activedescendant": focusedIndex >= 0 ? `${idPrefix}-${focused}` : void 0,
+		onKeyDown,
+		onFocus: (event) => event.target === event.currentTarget && setTreeFocused(event.currentTarget.matches(":focus-visible")),
+		onBlur: (event) => event.target === event.currentTarget && setTreeFocused(false),
+		onScroll: (event) => setScrollTop(event.currentTarget.scrollTop),
+		onPointerMove,
+		onPointerUp: (event) => endDrag(event, true),
+		onPointerCancel: (event) => endDrag(event, false),
+		className: "focus-visible:ring-accent relative min-h-0 flex-1 overflow-y-auto outline-none focus-visible:ring-2 focus-visible:ring-inset",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				height: rows.length * 30,
+				position: "relative"
+			},
+			children: [shown.map((row, offset) => {
+				const index = first + offset;
+				const key = outlineKeyOf(row.item.ref);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+					id: `${idPrefix}-${key}`,
+					outline,
+					row,
+					index,
+					current: key === currentKey,
+					selected: selectedKeys.has(key),
+					focused: treeFocused && key === focused,
+					moving: dragging && drag.moving.has(key),
+					editable,
+					foldable: !filtering,
+					renaming: key === renamingKey,
+					mode: props.mode,
+					untitled: t("outline.untitled"),
+					onClick: (event) => onRowClick(row, index, event),
+					onPointerDown: (event) => onPointerDown(row, event),
+					onRenameStart: () => onRename(key),
+					onRenameEnd: () => {
+						onRename(null);
+						setFocusedKey(key);
+						list.current?.focus({ preventScroll: true });
+					},
+					onMenu: () => {
+						setFocusedKey(key);
+						if (!selectedKeys.has(key)) outline.select([row.item.ref]);
+					}
+				}, key);
+			}), dragging && drag.drop && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"aria-hidden": true,
+				className: "bg-accent pointer-events-none absolute h-0.5 rounded-full",
+				style: {
+					top: drag.drop.gap * 30 - 1,
+					insetInlineStart: 24 + drag.drop.depth * 16,
+					insetInlineEnd: 4
+				}
+			})]
+		})
+	});
+}
+function Row(props) {
+	const { row, outline } = props;
+	const { item, depth, hasChildren, expanded } = row;
+	const menuButton = (0, react.useRef)(null);
+	const inert = !item.target && !item.action;
+	const color = readableColor(item.color, props.mode);
+	const tone = props.selected ? "bg-accent-light text-fg" : props.current ? "bg-hover text-fg" : "text-fg-secondary hover:bg-hover";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		id: props.id,
+		role: "treeitem",
+		"aria-level": depth + 1,
+		"aria-expanded": hasChildren ? expanded : void 0,
+		"aria-selected": props.selected,
+		"aria-current": props.current ? "location" : void 0,
+		onClick: props.onClick,
+		onDoubleClick: () => props.editable && props.onRenameStart(),
+		onContextMenu: (event) => {
+			if (!props.editable) return;
+			event.preventDefault();
+			props.onMenu();
+			menuButton.current?.querySelector("button")?.click();
+		},
+		onPointerDown: props.onPointerDown,
+		className: `group absolute inset-x-0 flex cursor-default select-none items-center gap-0.5 rounded pe-1 ${tone} ${props.focused ? "ring-accent/60 ring-1 ring-inset" : ""} ${props.moving ? "opacity-40" : ""}`,
+		style: {
+			top: props.index * 30,
+			height: 30,
+			paddingInlineStart: 4 + depth * 16
+		},
+		children: [
+			props.current && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"aria-hidden": true,
+				className: "bg-accent absolute inset-y-1 start-0 w-0.5 rounded-full"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				tabIndex: -1,
+				"aria-hidden": true,
+				disabled: !hasChildren || !props.foldable,
+				onClick: (event) => {
+					event.stopPropagation();
+					if (expanded) outline.collapse(item.ref);
+					else outline.expand(item.ref);
+				},
+				className: "text-fg-muted flex h-5 w-5 shrink-0 items-center justify-center rounded disabled:cursor-default",
+				children: hasChildren && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+					name: "chevronRight",
+					size: 14,
+					className: `transition-transform rtl:-scale-x-100 ${expanded ? "rotate-90 rtl:-rotate-90" : ""}`
+				})
+			}),
+			props.renaming ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenameField, {
+				title: item.title,
+				onDone: (title) => {
+					props.onRenameEnd();
+					if (title !== null && title !== item.title) outline.update(item.ref, { title }).catch(() => {});
+				}
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: `min-w-0 flex-1 truncate ${inert ? "opacity-60" : ""}`,
+				style: {
+					fontSize: TEXT_PX,
+					color: color ?? void 0,
+					fontWeight: item.bold ? 600 : void 0,
+					fontStyle: item.italic ? "italic" : void 0
+				},
+				title: item.title || props.untitled,
+				children: item.title || props.untitled
+			}),
+			props.editable && !props.renaming && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				ref: menuButton,
+				onClick: (event) => event.stopPropagation(),
+				onPointerDownCapture: props.onMenu,
+				className: `shrink-0 ${props.selected || props.focused ? "" : "opacity-0 focus-within:opacity-100 group-hover:opacity-100"}`,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowMenuButton, {})
+			})
+		]
+	});
+}
+/** The row's menu button: the outline's commands for the selected row. */
+function RowMenuButton() {
+	const more = (0, _embedpdf_react_commands.useCommand)("menu:outline-item");
+	if (!more.visible) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_toolbar.CommandButton, {
+		cmd: more,
+		variant: "icon",
+		run: () => void more.run()
+	});
+}
+/**
+* The title being typed in its row: Enter or leaving the field keeps it, Escape keeps the one it
+* had. The field is laid out at 16px and drawn at the row's size, so iOS doesn't zoom in on it.
+*/
+function RenameField({ title, onDone }) {
+	const t = (0, _embedpdf_react_i18n.useT)();
+	const field = (0, react.useRef)(null);
+	const done = (0, react.useRef)(false);
+	const [draft, setDraft] = (0, react.useState)(title);
+	(0, react.useLayoutEffect)(() => {
+		field.current?.focus();
+		field.current?.select();
+	}, []);
+	const finish = (value) => {
+		if (done.current) return;
+		done.current = true;
+		onDone(value);
+	};
+	const scale = TEXT_PX / FIELD_PX;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "relative min-w-0 flex-1",
+		style: { height: 24 },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			ref: field,
+			type: "text",
+			value: draft,
+			"aria-label": t("commands.outline.rename"),
+			maxLength: 32767,
+			onChange: (event) => setDraft(event.target.value),
+			onKeyDown: (event) => {
+				event.stopPropagation();
+				if (event.key === "Enter") finish(draft);
+				else if (event.key === "Escape") finish(null);
+			},
+			onBlur: () => finish(draft),
+			onClick: (event) => event.stopPropagation(),
+			className: "border-accent bg-surface text-fg absolute start-0 top-0 origin-top-left rounded border px-1 outline-none rtl:origin-top-right",
+			style: {
+				fontSize: FIELD_PX,
+				width: `${100 / scale}%`,
+				height: `${100 / scale}%`,
+				transform: `scale(${scale})`
+			}
+		})
+	});
+}
+//#endregion
+//#region src/ui/outline-panel.tsx
+/**
+* The outline panel: the document's outline (its bookmarks) as a tree. A row goes where its item
+* goes; the row of the item the main view is reading is marked, and comes into view as the
+* reader moves on. A filter finds items by their title, in their place. A session that may change
+* the outline adds items (after the selected one, at the place in view, renaming them at once),
+* renames, drags and deletes them, and opens a row's menu for the rest.
+*/
+/**
+* The row to mark for where the reader is: the current item's own when it shows, else that of
+* the nearest item it sits under that does.
+*/
+function shownKeyOf(current, shown, items) {
+	if (!current) return null;
+	const byKey = new Map(items.map((item) => [outlineKeyOf(item.ref), item]));
+	for (let key = outlineKeyOf(current); key !== null;) {
+		if (shown.has(key)) return key;
+		const parent = byKey.get(key)?.parent ?? null;
+		key = parent ? outlineKeyOf(parent) : null;
+	}
+	return null;
+}
+function OutlinePanel() {
+	const t = (0, _embedpdf_react_i18n.useT)();
+	const outline = (0, _embedpdf_react_outline.useOutline)();
+	const { items, rows, current, selected, status, incomplete } = (0, _embedpdf_react_outline.useOutlineState)();
+	const { mode } = require_theme.useTheme();
+	const closeOnPick = require_sheet.useCloseOnPick();
+	const add = (0, _embedpdf_react_commands.useCommand)("outline:add");
+	const expandAll = (0, _embedpdf_react_commands.useCommand)("outline:expand-all");
+	const collapseAll = (0, _embedpdf_react_commands.useCommand)("outline:collapse-all");
+	const editable = add.visible && add.enabled;
+	const [filter, setFilter] = (0, react.useState)("");
+	const [renamingKey, setRenamingKey] = (0, react.useState)(null);
+	const filtering = filter.trim() !== "";
+	const shownRows = (0, react.useMemo)(() => filtering ? filteredRows(items, filter) : rows, [
+		filtering,
+		items,
+		filter,
+		rows
+	]);
+	const currentKey = shownKeyOf(current, (0, react.useMemo)(() => new Set(shownRows.map((row) => outlineKeyOf(row.item.ref))), [shownRows]), items);
+	const renameRequest = (0, _embedpdf_react_shell.useSurface)(require_commands.OUTLINE_RENAME);
+	(0, react.useEffect)(() => {
+		if (!renameRequest.isOpen) return;
+		const request = renameRequest.props;
+		if (request.item !== void 0) {
+			setRenamingKey(String(request.item));
+			renameRequest.close();
+			return;
+		}
+		const [first] = selected;
+		if (!first || first.objectNumber === request.after) return;
+		setFilter("");
+		setRenamingKey(outlineKeyOf(first));
+		renameRequest.close();
+	}, [renameRequest, selected]);
+	const toolbar = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "border-border-subtle flex items-center gap-1 border-b p-2",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "relative min-w-0 flex-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-fg-muted pointer-events-none absolute inset-y-0 start-0 flex items-center ps-2",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+						name: "search",
+						size: 14
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "search",
+					value: filter,
+					placeholder: t("outline.filter"),
+					"aria-label": t("outline.filter"),
+					onChange: (event) => setFilter(event.target.value),
+					className: "border-border bg-surface text-fg focus:border-accent focus:ring-accent w-full rounded-md border py-1 pe-2 ps-7 text-sm outline-none focus:ring-1"
+				})]
+			}),
+			add.visible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_toolbar.CommandButton, {
+				cmd: add,
+				variant: "icon",
+				run: () => void add.run()
+			}),
+			expandAll.visible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_toolbar.CommandButton, {
+				cmd: expandAll,
+				variant: "icon",
+				run: () => void expandAll.run()
+			}),
+			collapseAll.visible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_toolbar.CommandButton, {
+				cmd: collapseAll,
+				variant: "icon",
+				run: () => void collapseAll.run()
+			})
+		]
+	});
+	const message = (text, withAdd = false) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "text-fg-muted flex flex-col items-center gap-3 p-6 text-center text-sm",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: text }), withAdd && editable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			onClick: () => void add.run(),
+			className: "border-border text-fg hover:bg-hover rounded-md border px-3 py-1.5 text-sm",
+			children: add.label
+		})]
+	});
+	const body = (() => {
+		if (items.length === 0) {
+			if (status === "idle" || status === "loading") return message(t("outline.loading"));
+			if (status === "forbidden" || status === "error") return message(t("outline.failed"));
+			return message(t("outline.empty"), true);
+		}
+		if (filtering && shownRows.length === 0) return message(t("outline.noMatches"));
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OutlineRows, {
+			outline,
+			rows: shownRows,
+			currentKey,
+			selected,
+			editable,
+			filtering,
+			renamingKey,
+			onRename: setRenamingKey,
+			mode,
+			onPicked: closeOnPick,
+			label: t("panels.outline")
+		});
+	})();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex min-h-0 flex-1 flex-col",
+		children: [
+			toolbar,
+			incomplete && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-fg-muted border-border-subtle border-b px-3 py-2 text-xs",
+				children: t("outline.incomplete")
+			}),
+			body
+		]
+	});
+}
+//#endregion
+exports.OutlinePanel = OutlinePanel;
+
+//# sourceMappingURL=outline-panel-BpGtBdj0.cjs.map