zidane-ui 9.1.6 → 9.1.9

package/dist/chat/transcript/shell-block.js

@@ -1,5 +1,7 @@
 import { iconButtonClass } from "../../components/IconButton.js";
 import { CopyButton } from "../../components/CopyButton.js";
+import { Grow, GrowPresence } from "../../motion/grow.js";
+import { SmoothHeight } from "../../motion/size.js";
 import { constant, useReadable } from "../headless/store.js";
 import "../headless/block-runs.js";
 import { useOptionalChatHost } from "../ChatProvider.js";
@@ -68,6 +70,8 @@ function RunnableCodeBlock({ code, language, scope, CodeBlock }) {
 	const live = useReadable(blocks ? blocks.live(scope.sessionId) : NO_LIVE)[key];
 	const caretRef = useRef(null);
 	const [menuOpen, setMenuOpen] = useState(false);
+	const [shownAtMount] = useState(() => live !== void 0 || saved !== void 0);
+	const [removed, setRemoved] = useState(false);
 	const [menuArmed, setMenuArmed] = useState(false);
 	if (!plan || !blocks && !runInTerminal) return /* @__PURE__ */ jsx(CodeBlock, {
 		code,
@@ -153,16 +157,23 @@ function RunnableCodeBlock({ code, language, scope, CodeBlock }) {
 					items: menu
 				})
 			}),
-			(live ?? saved) && /* @__PURE__ */ jsx(RunPanel, {
-				code,
-				live,
-				saved,
-				onAgain: runHere,
-				onTerminal: inTerminal,
-				onRemove: () => {
-					if (live?.error !== void 0) stop();
-					else if (blocks && saved) blocks.remove(scope.sessionId, key);
-				}
+			/* @__PURE__ */ jsx(GrowPresence, {
+				initial: false,
+				children: (live ?? saved) && /* @__PURE__ */ jsx(Grow, {
+					appear: !shownAtMount || removed,
+					children: /* @__PURE__ */ jsx(RunPanel, {
+						code,
+						live,
+						saved,
+						onAgain: runHere,
+						onTerminal: inTerminal,
+						onRemove: () => {
+							setRemoved(true);
+							if (live?.error !== void 0) stop();
+							else if (blocks && saved) blocks.remove(scope.sessionId, key);
+						}
+					})
+				}, "run")
 			})
 		]
 	});
@@ -222,58 +233,57 @@ function RunPanel({ code, live, saved, onAgain, onTerminal, onRemove }) {
 		className: "zg-run-panel group",
 		"aria-label": labels.blockRunOutput,
 		"data-failed": failed ? "" : void 0,
-		children: [
-			/* @__PURE__ */ jsxs("header", {
-				className: "zg-meta flex items-center gap-2 min-h-6",
-				children: [status, /* @__PURE__ */ jsx("span", {
-					className: "ml-auto flex items-center gap-0.5",
-					children: !running && /* @__PURE__ */ jsxs(Fragment, { children: [
-						saved && text !== "" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CopyButton, {
-							text,
-							label: labels.blockRunCopy,
-							reveal: true
-						}), /* @__PURE__ */ jsx("button", {
-							type: "button",
-							"aria-label": labels.blockRunAttach,
-							title: labels.blockRunAttach,
-							onClick: attach,
-							className: `zg-reveal ${button}`,
-							children: /* @__PURE__ */ jsx("span", {
-								"aria-hidden": true,
-								className: "i-ph-paperclip text-zg-label"
-							})
-						})] }),
-						onAgain && /* @__PURE__ */ jsx("button", {
-							type: "button",
-							"aria-label": labels.blockRunAgain,
-							title: labels.blockRunAgain,
-							onClick: onAgain,
-							className: `zg-reveal ${button}`,
-							children: /* @__PURE__ */ jsx("span", {
-								"aria-hidden": true,
-								className: "i-ph-arrow-clockwise text-zg-label"
-							})
-						}),
-						/* @__PURE__ */ jsx("button", {
-							type: "button",
-							"aria-label": labels.blockRunRemove,
-							title: labels.blockRunRemove,
-							onClick: onRemove,
-							className: `zg-reveal ${button}`,
-							children: /* @__PURE__ */ jsx("span", {
-								"aria-hidden": true,
-								className: "i-ph-x text-zg-label"
-							})
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: "zg-meta flex items-center gap-2 min-h-6",
+			children: [status, /* @__PURE__ */ jsx("span", {
+				className: "ml-auto flex items-center gap-0.5",
+				children: !running && /* @__PURE__ */ jsxs(Fragment, { children: [
+					saved && text !== "" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CopyButton, {
+						text,
+						label: labels.blockRunCopy,
+						reveal: true
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": labels.blockRunAttach,
+						title: labels.blockRunAttach,
+						onClick: attach,
+						className: `zg-reveal ${button}`,
+						children: /* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "i-ph-paperclip text-zg-label"
 						})
-					] })
-				})]
-			}),
-			live ? live.lines.length > 0 && /* @__PURE__ */ jsx(LiveOutput, {
+					})] }),
+					onAgain && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": labels.blockRunAgain,
+						title: labels.blockRunAgain,
+						onClick: onAgain,
+						className: `zg-reveal ${button}`,
+						children: /* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "i-ph-arrow-clockwise text-zg-label"
+						})
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": labels.blockRunRemove,
+						title: labels.blockRunRemove,
+						onClick: onRemove,
+						className: `zg-reveal ${button}`,
+						children: /* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "i-ph-x text-zg-label"
+						})
+					})
+				] })
+			})]
+		}), /* @__PURE__ */ jsxs(SmoothHeight, {
+			swapKey: running ? live.lines.length > 0 ? "live" : "starting" : live ? "failed" : "saved",
+			children: [live ? live.lines.length > 0 && /* @__PURE__ */ jsx(LiveOutput, {
 				lines: live.lines,
 				window: 15,
 				label: labels.blockRunOutput
-			}) : saved && saved.output !== "" && /* @__PURE__ */ jsx(RunOutput, { run: saved }),
-			failed && !running && onTerminal && /* @__PURE__ */ jsxs("button", {
+			}) : saved && saved.output !== "" && /* @__PURE__ */ jsx(RunOutput, { run: saved }), failed && !running && onTerminal && /* @__PURE__ */ jsxs("button", {
 				type: "button",
 				onClick: onTerminal,
 				className: "zg-run-terminal zg-meta",
@@ -281,8 +291,8 @@ function RunPanel({ code, live, saved, onAgain, onTerminal, onRemove }) {
 					"aria-hidden": true,
 					className: "i-ph-terminal-window"
 				}), labels.blockRunNeedsTerminal]
-			})
-		]
+			})]
+		})]
 	});
 }
 /** A saved run's output, scrolled to its end: where a command says how it went. */

package/dist/chat/transcript/tool-row.js

@@ -3,6 +3,7 @@ import { useDisplayPath } from "../../hooks/useDisplayPath.js";
 import { useChatLabels } from "../useChatLabels.js";
 import { useModelName } from "./actions.js";
 import { Caret, FailedMark } from "./frame.js";
+import { Rolling } from "./rolling.js";
 import { AnsiText } from "./AnsiText.js";
 import { CODE_PANEL, LoadFullOutputButton, ReadFileBlock, ToolGlyph, ToolInput, ToolTiming, useFullOutput } from "./tool-parts.js";
 import { EditDiffBlock } from "./EditDiffBlock.js";
@@ -311,19 +312,34 @@ function ScriptProgressChips({ tool }) {
 		"data-testid": "script-progress",
 		children: [view.total !== void 0 && view.percent !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 			className: "zg-meta-chip",
-			children: labels.scriptCallsOf(view.done, view.total)
+			children: /* @__PURE__ */ jsx(Rolling, {
+				text: labels.scriptCallsOf(view.done, view.total),
+				value: view.done
+			})
 		}), /* @__PURE__ */ jsx("span", {
 			className: "zg-meta-chip",
-			children: labels.scriptPercent(view.percent)
+			children: /* @__PURE__ */ jsx(Rolling, {
+				text: labels.scriptPercent(view.percent),
+				value: view.percent
+			})
 		})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 			className: "zg-meta-chip",
-			children: labels.scriptCallsDone(view.done)
+			children: /* @__PURE__ */ jsx(Rolling, {
+				text: labels.scriptCallsDone(view.done),
+				value: view.done
+			})
 		}), view.running > 0 && /* @__PURE__ */ jsx("span", {
 			className: "zg-meta-chip",
-			children: labels.scriptCallsRunning(view.running)
+			children: /* @__PURE__ */ jsx(Rolling, {
+				text: labels.scriptCallsRunning(view.running),
+				value: view.running
+			})
 		})] }), view.failed > 0 && /* @__PURE__ */ jsx("span", {
 			className: "zg-meta-chip text-zg-danger",
-			children: labels.scriptCallsFailed(view.failed)
+			children: /* @__PURE__ */ jsx(Rolling, {
+				text: labels.scriptCallsFailed(view.failed),
+				value: view.failed
+			})
 		})]
 	});
 }

package/dist/code/editor/FileTree.d.ts

@@ -87,6 +87,8 @@ interface FileTreeProps {
   label?: string;
   /** Rename, create, drag and drop. Absent: the tree only browses. Read when the tree is created. */
   editing?: FileTreeEditing;
+  /** An ignored folder listed as one node was expanded (its path, without the trailing `/`). */
+  onExpandFolder?: (path: string) => void;
 }
 /**
  * The workspace file tree: rows from `entries`, painted with `gitStatus`, reporting selection,
@@ -94,7 +96,7 @@ interface FileTreeProps {
  *
  * @param props - The paths, git status and selection to show, and the handlers it reports to.
  */
-declare function FileTree({ controlRef, entries, gitStatus, selectedPath, onSelect, onOpen, onContextMenu, className, style, openPaths, label, editing }: FileTreeProps): import("react").JSX.Element;
+declare function FileTree({ controlRef, entries, gitStatus, selectedPath, onSelect, onOpen, onContextMenu, className, style, openPaths, label, editing, onExpandFolder }: FileTreeProps): import("react").JSX.Element;
 /**
  * Every folder holding one of `paths` (`src/`, `src/chat/`), as tree ids.
  *

package/dist/code/editor/FileTree.js

@@ -18,6 +18,10 @@ import { FileTree as FileTree$1, useFileTree } from "@pierre/trees/react";
 * (⌥ held: a copy), and files dragged in from outside the page drop onto a
 * folder. The tree shows each change at once and reports it; the host does
 * it, then hands new `entries` (or calls `control.resync` when it failed).
+*
+* An ignored folder listed as one node (`dist/`, `ignored`) is opened like any
+* folder; the tree reports it (`onExpandFolder`) so the host can list what
+* is under it and hand it in with the next `entries`.
 */
 /** The drag data type a tree row carries (its path, relative to the tree's root): what an editor takes to open it. */
 const TREE_PATH_MIME = "application/x-zidane-tree-path";
@@ -27,7 +31,7 @@ const TREE_PATH_MIME = "application/x-zidane-tree-path";
 *
 * @param props - The paths, git status and selection to show, and the handlers it reports to.
 */
-function FileTree({ controlRef, entries, gitStatus, selectedPath, onSelect, onOpen, onContextMenu, className, style, openPaths, label, editing }) {
+function FileTree({ controlRef, entries, gitStatus, selectedPath, onSelect, onOpen, onContextMenu, className, style, openPaths, label, editing, onExpandFolder }) {
 	const labels = useLabels();
 	const paths = useMemo(() => entries.map((e) => e.path), [entries]);
 	const editingRef = useRef(editing);
@@ -92,6 +96,30 @@ function FileTree({ controlRef, entries, gitStatus, selectedPath, onSelect, onOp
 			} }
 		} : {}
 	});
+	const lazyDirs = useMemo(() => entries.filter((e) => e.ignored && e.kind === "dir" && e.path.endsWith("/")).map((e) => e.path), [entries]);
+	const lazyRef = useRef({
+		dirs: lazyDirs,
+		onExpandFolder
+	});
+	lazyRef.current = {
+		dirs: lazyDirs,
+		onExpandFolder
+	};
+	useEffect(() => {
+		const open = /* @__PURE__ */ new Set();
+		return model.subscribe(() => {
+			const { dirs, onExpandFolder: report } = lazyRef.current;
+			if (!report) return;
+			for (const path of dirs) {
+				const item = model.getItem(path);
+				if (!(item !== null && "isExpanded" in item && item.isExpanded())) open.delete(path);
+				else if (!open.has(path)) {
+					open.add(path);
+					report(bare(path));
+				}
+			}
+		});
+	}, [model]);
 	useEffect(() => {
 		if (!editable) return;
 		return model.onMutation("remove", (event) => {

package/dist/components/Restricted.d.ts

@@ -0,0 +1,25 @@
+import { CSSProperties, ReactNode } from "react";
+//#region src/components/Restricted.d.ts
+/** Props for {@link Restricted}. */
+interface RestrictedProps {
+  /** Whether this connection may not change what it wraps. */
+  restricted: boolean;
+  /** Why, short: the tooltip and the group's accessible name ("Admin only"). */
+  reason: string;
+  /** What it wraps. */
+  children: ReactNode;
+  /** Wrap inline content (a button in a row) instead of a block (a section). */
+  inline?: boolean;
+  /** Classes merged on the root while restricted. */
+  className?: string;
+  /** Inline styles on the root while restricted. */
+  style?: CSSProperties;
+}
+/**
+ * Renders `children` dimmed and inert, with `reason` as a tooltip, while `restricted`; else as they are.
+ *
+ * @param props - {@link RestrictedProps}.
+ */
+declare function Restricted({ restricted, reason, children, inline, className, style }: RestrictedProps): import("react").JSX.Element;
+//#endregion
+export { Restricted, RestrictedProps };

package/dist/components/Restricted.js

@@ -0,0 +1,32 @@
+import { Tooltip } from "./Tooltip.js";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region src/components/Restricted.tsx
+/**
+* Renders `children` dimmed and inert, with `reason` as a tooltip, while `restricted`; else as they are.
+*
+* @param props - {@link RestrictedProps}.
+*/
+function Restricted({ restricted, reason, children, inline = false, className = "", style }) {
+	if (!restricted) return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsx(Tooltip, {
+		label: reason,
+		portal: true,
+		className: `${inline ? "" : "flex w-full"} ${className}`,
+		...style ? { style } : {},
+		children: /* @__PURE__ */ jsx("div", {
+			role: "group",
+			tabIndex: 0,
+			"aria-label": reason,
+			"aria-disabled": true,
+			"data-restricted": "",
+			className: `zg-restricted zg-focus-ring rounded-zg-md ${inline ? "inline-flex" : "block w-full"}`,
+			children: /* @__PURE__ */ jsx("div", {
+				inert: true,
+				className: inline ? "inline-flex" : "block",
+				children
+			})
+		})
+	});
+}
+//#endregion
+export { Restricted };

package/dist/components/StepFrame.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties, ReactNode } from "react";
 //#region src/components/StepFrame.d.ts
 /** Props for {@link StepFrame}. */
 interface StepFrameProps {
-  /** Small uppercase label above the title, such as the step's name. */
+  /** Small label above the title, such as the step's name. */
   eyebrow?: ReactNode;
   /** The step's question or heading. */
   title: ReactNode;

package/dist/components/ZidaneMark.d.ts

@@ -0,0 +1,28 @@
+import { CSSProperties } from "react";
+//#region src/components/ZidaneMark.d.ts
+type Tone = 'inherit' | 'accent' | 'warn' | 'muted';
+/** Props for {@link ZidaneMark}. */
+interface ZidaneMarkProps {
+  /** Width and height in pixels. Small marks draw fewer, wider bands. @default 16 */
+  size?: number;
+  /** Loops per second; 0 holds still. @default 1.2 */
+  speed?: number;
+  /** Colour of the bands. `inherit` follows the surrounding text colour. @default 'accent' */
+  tone?: Tone;
+  /** Accessible name and tooltip. Defaults to the `working` label from {@link useLabels}. */
+  label?: string;
+  /** Hidden from assistive tech, for a mark inside an element that names the state itself. */
+  decorative?: boolean;
+  /** Extra classes on the root. */
+  className?: string;
+  /** Inline styles on the root element, merged after the component's own. */
+  style?: CSSProperties;
+}
+/**
+ * Renders the zidane mark, its bands flowing while `speed` is above 0 and motion is on.
+ *
+ * @param props - Component props.
+ */
+declare function ZidaneMark({ size, speed, tone, label: labelProp, decorative, className, style }: ZidaneMarkProps): import("react").JSX.Element;
+//#endregion
+export { ZidaneMark, ZidaneMarkProps };

package/dist/components/ZidaneMark.js

@@ -0,0 +1,114 @@
+import { useLabels } from "../labels.js";
+import { useReducedMotion } from "../motion/reduced.js";
+import { markDetail, markEase, markFrame, markFrameIndex, markStill } from "./zidane-mark.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+//#region src/components/ZidaneMark.tsx
+/**
+* The zidane mark as a live indicator: the logo's sphere, its S-shaped bands
+* flowing across it. One shared animation frame loop draws every mounted
+* mark (it writes the paths' `d` straight to the DOM, so nothing
+* re-renders), from frames cached per detail (`zidane-mark.ts`). A mark
+* starts at its full pace; a later change of `speed` eases in rather than
+* jumping. Reduced or off motion shows the still mark. Bands take
+* `currentColor` over a faint disk of the same tone. To spin it in and out
+* with a state, wrap it in a `Presence` with `zg-mark-swap` (styles/motion.css).
+*/
+const TONE = {
+	inherit: void 0,
+	accent: "var(--zg-accent)",
+	warn: "var(--zg-warn)",
+	muted: "var(--zg-text-muted)"
+};
+const live = /* @__PURE__ */ new Set();
+let raf = 0;
+let last = 0;
+function tick(now) {
+	const dt = last ? Math.min(.1, (now - last) / 1e3) : 0;
+	last = now;
+	for (const mark of live) {
+		mark.speed += (mark.target - mark.speed) * Math.min(1, dt * 3);
+		mark.phase = (mark.phase + dt * mark.speed / 3) % 1;
+		const frame = markFrameIndex(markEase(mark.phase));
+		if (frame === mark.drawn) continue;
+		mark.drawn = frame;
+		const d = markFrame(mark.detail, frame);
+		mark.paths.forEach((path, i) => path.setAttribute("d", d[i] ?? ""));
+	}
+	raf = live.size > 0 ? requestAnimationFrame(tick) : 0;
+	if (!raf) last = 0;
+}
+/**
+* Renders the zidane mark, its bands flowing while `speed` is above 0 and motion is on.
+*
+* @param props - Component props.
+*/
+function ZidaneMark({ size = 16, speed = 1.2, tone = "accent", label: labelProp, decorative = false, className = "", style }) {
+	const labels = useLabels();
+	const label = labelProp ?? labels.working;
+	const reduced = useReducedMotion();
+	const detail = useMemo(() => markDetail(size), [size]);
+	const still = markStill(detail);
+	const svg = useRef(null);
+	const mark = useRef(null);
+	const moving = !reduced && speed > 0;
+	useEffect(() => {
+		const el = svg.current;
+		if (!moving || !el || typeof requestAnimationFrame !== "function") return void 0;
+		const entry = {
+			paths: Array.from(el.querySelectorAll("path")),
+			detail,
+			phase: 0,
+			speed,
+			target: speed,
+			drawn: 0
+		};
+		mark.current = entry;
+		live.add(entry);
+		if (!raf) raf = requestAnimationFrame(tick);
+		return () => {
+			live.delete(entry);
+			mark.current = null;
+			if (live.size === 0 && raf) {
+				cancelAnimationFrame(raf);
+				raf = 0;
+				last = 0;
+			}
+			const d = markStill(detail);
+			entry.paths.forEach((path, i) => path.setAttribute("d", d[i] ?? ""));
+		};
+	}, [moving, detail]);
+	useEffect(() => {
+		if (mark.current) mark.current.target = speed;
+	}, [speed]);
+	const color = TONE[tone];
+	return /* @__PURE__ */ jsxs("svg", {
+		ref: svg,
+		viewBox: "-1 -1 2 2",
+		width: size,
+		height: size,
+		...decorative ? { "aria-hidden": true } : {
+			role: "img",
+			"aria-label": label
+		},
+		className: `block shrink-0 ${className}`,
+		style: {
+			...color ? { color } : {},
+			...style
+		},
+		children: [
+			!decorative && /* @__PURE__ */ jsx("title", { children: label }),
+			/* @__PURE__ */ jsx("circle", {
+				r: "1",
+				fill: "currentColor",
+				opacity: "0.18"
+			}),
+			still.map((d, i) => /* @__PURE__ */ jsx("path", {
+				d,
+				fill: "currentColor"
+			}, i))
+		]
+	});
+}
+//#endregion
+export { ZidaneMark };

package/dist/components/palette/PalettePanel.d.ts

@@ -49,6 +49,12 @@ type PalettePanelProps<T extends PaletteEntry = PaletteEntry> = PanelElementProp
   onBack?: () => void;
   /** The level's name, as a chip before the query. */
   title?: string;
+  /** The section the root search is scoped to, as a chip before the query. */
+  scope?: string;
+  /** Shift+Tab at the root: scope the search to the next section (after the last, back to every section). */
+  onScopeNext?: () => void;
+  /** Backspace on an empty query at the root while scoped: search every section again. */
+  onScopeClear?: () => void;
   /** Defaults to the labels' `paletteFilter`. */
   placeholder?: string;
   /** False while the rows are still for an earlier query: Enter waits for them. Default true. */
@@ -82,6 +88,6 @@ type PalettePanelProps<T extends PaletteEntry = PaletteEntry> = PanelElementProp
  *
  * @param props - {@link PalettePanelProps}.
  */
-declare function PalettePanel<T extends PaletteEntry>({ groups, query, onQueryChange, cursor, onCursorChange, onRun, onClose, nested, onBack, title, placeholder, settled, loading, running, notice, verb, renderRow, renderIcon, renderKeys, inputRef, className, ...rest }: PalettePanelProps<T>): import("react").JSX.Element;
+declare function PalettePanel<T extends PaletteEntry>({ groups, query, onQueryChange, cursor, onCursorChange, onRun, onClose, nested, onBack, title, scope, onScopeNext, onScopeClear, placeholder, settled, loading, running, notice, verb, renderRow, renderIcon, renderKeys, inputRef, className, ...rest }: PalettePanelProps<T>): import("react").JSX.Element;
 //#endregion
 export { PaletteNotice, PalettePanel, PalettePanelProps, paletteVerb };

package/dist/components/palette/PalettePanel.js

@@ -11,7 +11,8 @@ import { Fragment as Fragment$1, useEffect, useMemo, useRef, useState } from "re
 * desktop app's palette runs sources and nested pickers, the website opens
 * a docs page). The panel owns the keys of its input: arrows, Home / End,
 * Enter (held until the rows are for the query typed: `settled`), Escape,
-* and Backspace on an empty query to leave a nested level.
+* Backspace on an empty query to leave a nested level or drop the section
+* scope, and Shift+Tab to move the scope to the next section.
 *
 * Mount it in a layer (an `Overlay`, the app's modal slot): it brings no
 * scrim or focus trap of its own; its input takes focus on mount.
@@ -56,7 +57,7 @@ function paletteVerb(row, nested, labels) {
 *
 * @param props - {@link PalettePanelProps}.
 */
-function PalettePanel({ groups, query, onQueryChange, cursor, onCursorChange, onRun, onClose, nested = false, onBack, title, placeholder, settled = true, loading = false, running = false, notice, verb, renderRow, renderIcon, renderKeys = defaultPaletteKeys, inputRef, className = "zg-modal-panel zg-float w-[40rem] max-w-[92vw] self-start mt-[13vh] flex flex-col overflow-hidden", ...rest }) {
+function PalettePanel({ groups, query, onQueryChange, cursor, onCursorChange, onRun, onClose, nested = false, onBack, title, scope, onScopeNext, onScopeClear, placeholder, settled = true, loading = false, running = false, notice, verb, renderRow, renderIcon, renderKeys = defaultPaletteKeys, inputRef, className = "zg-modal-panel zg-float w-[40rem] max-w-[92vw] self-start mt-[13vh] flex flex-col overflow-hidden", ...rest }) {
 	const labels = useLabels();
 	const flat = useMemo(() => groups.flatMap((g) => g.rows), [groups]);
 	const showLoading = useLasting(loading, LOADING_LINE_AFTER_MS);
@@ -113,10 +114,22 @@ function PalettePanel({ groups, query, onQueryChange, cursor, onCursorChange, on
 				if (row) onRun(row);
 				return;
 			}
+			case "Tab":
+				if (e.shiftKey && !nested && onScopeNext) {
+					e.preventDefault();
+					e.stopPropagation();
+					onScopeNext();
+					onCursorChange(0);
+				}
+				return;
 			case "Backspace":
 				if (query === "" && nested && onBack) {
 					e.preventDefault();
 					onBack();
+				} else if (query === "" && !nested && scope && onScopeClear) {
+					e.preventDefault();
+					onScopeClear();
+					onCursorChange(0);
 				}
 				return;
 		}
@@ -144,6 +157,11 @@ function PalettePanel({ groups, query, onQueryChange, cursor, onCursorChange, on
 						className: "zg-track-chip shrink-0 px-2.5 h-6 inline-flex items-center text-zg-label text-[var(--zg-text-muted)]",
 						children: title
 					}),
+					!nested && scope && /* @__PURE__ */ jsx("span", {
+						"data-testid": "palette-scope",
+						className: "zg-track-chip shrink-0 px-2.5 h-6 inline-flex items-center text-zg-label text-[var(--zg-text)]",
+						children: scope
+					}),
 					/* @__PURE__ */ jsx("input", {
 						ref: inputRef,
 						autoFocus: true,
@@ -189,15 +207,23 @@ function PalettePanel({ groups, query, onQueryChange, cursor, onCursorChange, on
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-4 px-4 h-9 shrink-0 shadow-[inset_0_1px_0_var(--zg-hairline)]",
-				children: [marked && /* @__PURE__ */ jsx(PaletteHint, {
-					keys: ["enter"],
-					label: verb?.(marked, nested) ?? paletteVerb(marked, nested, labels),
-					renderKeys
-				}), nested && /* @__PURE__ */ jsx(PaletteHint, {
-					keys: ["⌫"],
-					label: labels.paletteBack,
-					renderKeys
-				})]
+				children: [
+					marked && /* @__PURE__ */ jsx(PaletteHint, {
+						keys: ["enter"],
+						label: verb?.(marked, nested) ?? paletteVerb(marked, nested, labels),
+						renderKeys
+					}),
+					nested && /* @__PURE__ */ jsx(PaletteHint, {
+						keys: ["⌫"],
+						label: labels.paletteBack,
+						renderKeys
+					}),
+					!nested && onScopeNext && /* @__PURE__ */ jsx(PaletteHint, {
+						keys: ["shift+tab"],
+						label: labels.paletteScopeHint,
+						renderKeys
+					})
+				]
 			}),
 			notice && /* @__PURE__ */ jsx("div", {
 				role: "status",

package/dist/components/zidane-mark.d.ts

@@ -0,0 +1,52 @@
+//#region src/components/zidane-mark.d.ts
+/**
+ * The zidane mark's geometry: flat S-shaped stripes wrapped onto a sphere.
+ * In the flat texture a band lies between two curves
+ *   u = c + amplitude·sin(WAVE·π·v)      (v from -1 to 1)
+ * one and a half waves top to bottom, so each band reads as an S whose turns
+ * hook against the left and right rims, as in the logo (its stripe
+ * directions fitted to the app icon). The texture is spherized: a point at texture radius ρ lands at disk
+ * radius sin(ρ·π/2), so bands thin out toward the rim, and what lies past
+ * ρ = 1 collapses onto it. Shifting every band by one `spacing` gives the
+ * same picture, so a phase from 0 to 1 is one seamless loop. Coordinates are
+ * in the unit disk (viewBox `-1 -1 2 2`).
+ */
+/** How finely a mark is drawn: band pitch, band share, samples per edge. */
+interface MarkDetail {
+  /** Texture distance from one band to the next (disk radius = 1). */
+  spacing: number;
+  /** Share of `spacing` that is band; the rest is gap. */
+  duty: number;
+  /** Samples along each band edge. */
+  steps: number;
+}
+/** The detail for a mark drawn `size` pixels wide: fewer, wider bands when small, so they stay apart. */
+declare function markDetail(size: number): MarkDetail;
+/**
+ * The band paths at `phase` (0 to 1, one loop). Always the same number of
+ * paths for a detail; a band out of view is an empty path.
+ */
+declare function markPaths(detail: MarkDetail, phase: number): string[];
+/** Bands one swell carries: a slow surge, not a throb per band. */
+declare const MARK_SWELL = 3;
+/**
+ * Where a swell's time (0 to 1) puts the bands, in loops (0 to
+ * {@link MARK_SWELL}): they gather speed, peak mid-swell and settle, a
+ * raised-cosine bell of speed. Its mean is one loop per loop of time, so
+ * `speed` still counts loops per second, and a swell ends on a whole loop.
+ */
+declare function markEase(t: number): number;
+/**
+ * Frames kept per loop. At the fastest pace (streaming, mid-swell) a loop
+ * takes about a third of a second, so 96 frames is still more than a display shows:
+ * snapping to them is invisible, and every mark of a detail shares them.
+ */
+declare const MARK_FRAMES = 96;
+/** The frame index (0 to {@link MARK_FRAMES} - 1) a phase snaps to. */
+declare function markFrameIndex(phase: number): number;
+/** The band paths of frame `index` for a detail, computed once and kept. */
+declare function markFrame(detail: MarkDetail, index: number): string[];
+/** The still mark (phase 0) for a detail, computed once and kept. */
+declare function markStill(detail: MarkDetail): string[];
+//#endregion
+export { MARK_FRAMES, MARK_SWELL, MarkDetail, markDetail, markEase, markFrame, markFrameIndex, markPaths, markStill };