@qilin-agent/client-ui-primitives 3.1.3 → 3.1.4

package/lib/index.js

@@ -1,44 +1,48 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import css from "./StateDot.module.css";
 import { Fragment as Fragment$1, cloneElement, createContext, createElement, forwardRef, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import css$1 from "./TextShimmer.module.css";
-import css$2 from "./DisclosureRow.module.css";
-import css$3 from "./Button.module.css";
-import css$4 from "./Pill.module.css";
-import css$5 from "./SegmentedControl.module.css";
-import css$6 from "./Tag.module.css";
-import css$7 from "./Switch.module.css";
-import css$8 from "./Checkbox.module.css";
-import css$9 from "./Input.module.css";
+import css from "./settings-form/SettingsForm.module.css";
+import clsx from "clsx";
+import css$1 from "./Tag.module.css";
+import css$2 from "./settings-form/fields.module.css";
+import { createSnapshotStore } from "@qilin-agent/client-store";
+import css$3 from "./CommandText.module.css";
+import css$4 from "./StateDot.module.css";
+import css$5 from "./TextShimmer.module.css";
+import css$6 from "./DisclosureRow.module.css";
+import css$7 from "./Button.module.css";
+import css$8 from "./Pill.module.css";
+import css$9 from "./SegmentedControl.module.css";
+import css$10 from "./Switch.module.css";
+import css$11 from "./Checkbox.module.css";
+import css$12 from "./Input.module.css";
 import { createPortal } from "react-dom";
-import css$10 from "./ShortcutKeys.module.css";
-import css$11 from "./Menu.module.css";
-import css$12 from "./Tooltip.module.css";
-import css$13 from "./HoverCard.module.css";
-import css$14 from "./Modal.module.css";
-import css$15 from "./OnboardingSurface.module.css";
-import css$16 from "./RiskConfirmation.module.css";
-import css$17 from "./ConnectionIndicator.module.css";
-import css$18 from "./FileTypeIcon.module.css";
+import css$13 from "./ShortcutKeys.module.css";
+import css$14 from "./Menu.module.css";
+import css$15 from "./Tooltip.module.css";
+import css$16 from "./HoverCard.module.css";
+import css$17 from "./Modal.module.css";
+import css$18 from "./OnboardingSurface.module.css";
+import css$19 from "./RiskConfirmation.module.css";
+import css$20 from "./ConnectionIndicator.module.css";
+import css$21 from "./FileTypeIcon.module.css";
 import { siAliexpress, siApple, siBaidu, siBilibili, siCsdn, siDuckduckgo, siEbay, siFacebook, siGithub, siGitlab, siGoogle, siInstagram, siJuejin, siMdnwebdocs, siNetflix, siNpm, siPypi, siQq, siQuora, siReddit, siSinaweibo, siSpotify, siStackoverflow, siTaobao, siTelegram, siTiktok, siV2ex, siWechat, siWhatsapp, siWikipedia, siX, siYcombinator, siYoutube, siZhihu } from "simple-icons";
 import { pathPartsOf } from "@qilin-agent/util-workspace-path";
-import css$19 from "./PathLabel.module.css";
-import css$20 from "./user-text.module.css";
+import css$22 from "./PathLabel.module.css";
+import css$23 from "./user-text.module.css";
 import markdownCss from "./markdown/MarkdownText.module.css";
-import css$21 from "./Toast.module.css";
-import css$22 from "./JsonTree.module.css";
+import css$24 from "./Toast.module.css";
+import css$25 from "./JsonTree.module.css";
 import Anser from "anser";
-import css$23 from "./TerminalBlock.module.css";
+import css$26 from "./TerminalBlock.module.css";
 import { createCssVariablesTheme, createHighlighterCoreSync } from "shiki/core";
 import { createJavaScriptRegexEngine, defaultJavaScriptRegexConstructor } from "shiki/engine/javascript";
 import langTs from "@shikijs/langs/typescript";
 import langBash from "@shikijs/langs/shellscript";
 import langJson from "@shikijs/langs/json";
-import css$24 from "./ReadBlock.module.css";
+import css$27 from "./ReadBlock.module.css";
 import { structuredPatch } from "diff";
-import css$25 from "./DiffBlock.module.css";
-import css$26 from "./SearchBlock.module.css";
+import css$28 from "./DiffBlock.module.css";
+import css$29 from "./SearchBlock.module.css";
 import { fromMarkdown } from "mdast-util-from-markdown";
 import { gfmFromMarkdown } from "mdast-util-gfm";
 import { mathFromMarkdown } from "mdast-util-math";
@@ -50,61 +54,70 @@ import { classifyCharacter } from "micromark-util-classify-character";
 import { codes, constants, types } from "micromark-util-symbol";
 import { factorySpace } from "micromark-factory-space";
 import { normalizeUri } from "micromark-util-sanitize-uri";
-import css$27 from "./markdown/CodeBlock.module.css";
-import css$28 from "./markdown/mermaid.module.css";
+import css$30 from "./markdown/CodeBlock.module.css";
+import css$31 from "./markdown/mermaid.module.css";
 import katex from "katex";
-import css$29 from "./ImageLightbox.module.css";
-import css$30 from "./ImagePreview.module.css";
+import css$32 from "./ImageLightbox.module.css";
+import css$33 from "./ImagePreview.module.css";
 import "katex/dist/katex.min.css";
-import css$31 from "./WebBlock.module.css";
-import css$32 from "./markdown/JsonBlock.module.css";
-import css$33 from "./MenuGroup.module.css";
-import css$34 from "./MenuSurface.module.css";
-//#region lib/types/StateDot.js
-/** Outer 3x3 matrix cells (2px pixels on a 10px grid), clockwise from top-left. */
-const MATRIX_CELLS = [
-	[0, 0],
-	[4, 0],
-	[8, 0],
-	[8, 4],
-	[8, 8],
-	[4, 8],
-	[0, 8],
-	[0, 4]
-];
+import css$34 from "./WebBlock.module.css";
+import css$35 from "./markdown/JsonBlock.module.css";
+import css$36 from "./MenuGroup.module.css";
+import css$37 from "./MenuSurface.module.css";
+//#region lib/types/settings-form/SettingsForm.js
+/**
+* One plugin's settings form as its page on the Plugins page shows it: the
+* read-only notice when the deployment stores settings read-only, the
+* plugin's controls, and the save that writes every staged edit. The page
+* draws the plugin's title and one-liner itself.
+*
+* Only a save writes. Leaving the page drops every staged edit, so the form
+* discards on unmount and offers no discard control. A form whose namespace
+* the Host stopped serving says so in place of its controls rather than
+* showing fields nothing would accept.
+*/
 /**
-* Render a state dot.
-* @param props.state - which of `done`, `warning`, `ongoing`, `error`, or `idle` to show.
-* @param props.size - outer diameter in px (default 10, the figma size).
-* @param props.className - extra class for layout placement.
-* @returns the dot element (aria-hidden; pair with text for accessibility).
+* Render one plugin's settings form.
+* @param props - the form's copy and state, its controls, and the save and discard actions.
+* @returns the form, or the unavailable line while the namespace is not served.
 */
-function StateDot({ state, size = 10, className }) {
-	if (state === "ongoing") return jsx("svg", {
-		className: clsx(css.matrix, className),
-		"data-state": "ongoing",
-		width: size,
-		height: size,
-		viewBox: "0 0 10 10",
-		shapeRendering: "crispEdges",
-		"aria-hidden": "true",
-		children: MATRIX_CELLS.map(([x, y], index) => jsx("rect", {
-			className: css.cell,
-			x,
-			y,
-			width: "2",
-			height: "2",
-			style: { animationDelay: `${(index - MATRIX_CELLS.length) * 125}ms` }
-		}, `${x}-${y}`))
+function SettingsForm(props) {
+	const { state, labels } = props;
+	const discard = useRef(props.onDiscard);
+	discard.current = props.onDiscard;
+	useEffect(() => () => {
+		discard.current();
+	}, []);
+	if (!state.available) return jsx("p", {
+		className: css.unavailable,
+		role: "status",
+		children: labels.unavailable
 	});
-	return jsx("span", {
-		className: clsx(css.dot, className),
-		"data-state": state,
-		style: {
-			width: size,
-			height: size
-		},
-		"aria-hidden": "true"
+	const blocked = !state.dirty || state.invalid || state.saving;
+	return jsxs("div", {
+		className: css.form,
+		children: [
+			!state.writable ? jsx("p", {
+				className: css.readOnly,
+				role: "status",
+				children: labels.readOnly
+			}) : null,
+			props.children,
+			jsxs("div", {
+				className: css.footer,
+				children: [state.failed ? jsx("p", {
+					className: css.failed,
+					role: "status",
+					children: labels.saveFailed
+				}) : null, jsx("button", {
+					type: "button",
+					className: css.save,
+					disabled: blocked,
+					onClick: props.onSave,
+					children: state.saving ? labels.saving : labels.save
+				})]
+			})
+		]
 	});
 }
 //#endregion
@@ -1888,13 +1901,536 @@ const IconPinFillRegular = ({ size = 16, className }) => jsxs("svg", {
 	})]
 });
 //#endregion
+//#region lib/types/Tag.js
+/**
+* Render a read-only tag.
+* @param props.tone - which palette to use (default `outline`).
+* @param props.className - extra class for layout placement.
+* @param props.children - the localized label, owned by the render site.
+* @returns the tag element.
+*/
+function Tag({ tone = "outline", className, children }) {
+	return jsx("span", {
+		className: clsx(css$1.tag, className),
+		"data-tone": tone,
+		children
+	});
+}
+//#endregion
+//#region lib/types/settings-form/fields.js
+/**
+* The controls of a settings form. Each renders one field's label, its staged
+* text, whether saving would leave an override, and — when one stands — the
+* reset that stages a clear back to the composition layer. Nothing here
+* writes: a control reports what the user typed, and the form's save is the
+* single point where a draft becomes a document mutation.
+*/
+/**
+* A staged value field. `numeric` only hints the keypad: which drafts a field
+* accepts is decided by its spec, so the control never silently rewrites what
+* the user typed.
+* @param props - the field's copy, its staged text, and the edit actions.
+* @returns the labelled control.
+*/
+function SettingsValueField(props) {
+	const [helpOpen, setHelpOpen] = useState(false);
+	const helpId = `${props.id}-help`;
+	const messageId = `${props.id}-message`;
+	const hasMessage = props.invalid || Boolean(props.hint);
+	const description = [hasMessage ? messageId : "", helpOpen ? helpId : ""].filter(Boolean).join(" ");
+	return jsxs("div", {
+		className: css$2.field,
+		children: [
+			jsxs("div", {
+				className: css$2.head,
+				children: [jsxs("div", {
+					className: css$2.labelGroup,
+					children: [jsx("label", {
+						className: css$2.label,
+						htmlFor: props.id,
+						children: props.label
+					}), props.help !== void 0 ? jsx("button", {
+						type: "button",
+						className: css$2.helpButton,
+						"aria-label": props.help.label,
+						"aria-expanded": helpOpen,
+						"aria-controls": helpId,
+						onClick: () => {
+							setHelpOpen(!helpOpen);
+						},
+						children: jsx(IconInfoOutline14, { size: 12 })
+					}) : null]
+				}), props.overridden ? jsxs("span", {
+					className: css$2.badges,
+					children: [jsx(Tag, {
+						tone: "neutral",
+						children: props.overriddenLabel
+					}), jsx("button", {
+						type: "button",
+						className: css$2.reset,
+						disabled: props.disabled,
+						onClick: props.onReset,
+						children: props.resetLabel
+					})]
+				}) : null]
+			}),
+			jsx("input", {
+				id: props.id,
+				className: css$2.input,
+				type: "text",
+				...props.numeric === true ? { inputMode: "numeric" } : {},
+				...props.invalid ? { "aria-invalid": true } : {},
+				"aria-describedby": description || void 0,
+				value: props.text,
+				placeholder: props.placeholder ?? "",
+				disabled: props.disabled,
+				onChange: (event) => {
+					props.onEdit(event.target.value);
+				}
+			}),
+			hasMessage ? jsx("p", {
+				id: messageId,
+				className: props.invalid ? css$2.invalid : css$2.hint,
+				children: props.invalid ? props.invalidLabel : props.hint
+			}) : null,
+			props.help !== void 0 && helpOpen ? jsx("div", {
+				id: helpId,
+				className: css$2.help,
+				role: "region",
+				"aria-label": props.help.label,
+				children: props.help.content
+			}) : null
+		]
+	});
+}
+/**
+* A write-only credential control. The value never rides a response, so the
+* control reports only whether one is configured and starts blank; a blank
+* draft writes nothing, which keeps the stored key rather than clearing it.
+* The control asks browsers not to autofill saved login passwords.
+* @param props - the field's copy, its staged text, and the configured state.
+* @returns the labelled control.
+*/
+function SettingsSecretField(props) {
+	return jsxs("div", {
+		className: css$2.field,
+		children: [
+			jsxs("div", {
+				className: css$2.head,
+				children: [jsx("label", {
+					className: css$2.label,
+					htmlFor: props.id,
+					children: props.label
+				}), jsx("span", {
+					className: css$2.badges,
+					children: jsx(Tag, {
+						tone: props.configured ? "neutral" : "quiet",
+						children: props.stateLabel
+					})
+				})]
+			}),
+			jsx("input", {
+				id: props.id,
+				className: css$2.input,
+				type: "password",
+				autoComplete: "new-password",
+				value: props.text,
+				disabled: props.disabled,
+				onChange: (event) => {
+					props.onEdit(event.target.value);
+				}
+			}),
+			jsx("p", {
+				className: css$2.hint,
+				children: props.hint
+			})
+		]
+	});
+}
+//#endregion
+//#region lib/types/settings-form/form-model.js
+/**
+* The staged form model behind a plugin's settings page.
+*
+* A card stages what the user types and writes it only when they save. Each
+* settings write is a durable, revision-fenced document mutation, so a control
+* that committed as it settled turned one edit into a write the user never
+* asked for and could not preview; staged text makes what is on screen exactly
+* what a save would store.
+*
+* A field shows its effective value — the user layer over the composition
+* layer over the schema default — and whether the user layer carries it. That
+* presence, not a value comparison, is what marks a field overridden: an
+* override equal to the composition default is still an override.
+*/
+/**
+* A whole-number field. An empty draft clears the field; any other draft that
+* is not a finite number blocks the save.
+* @param field - field name inside the namespace section.
+* @returns the field's conversion spec.
+*/
+function settingsNumberField(field) {
+	return {
+		field,
+		format: (value) => typeof value === "number" ? String(value) : "",
+		parse: (text) => {
+			const trimmed = text.trim();
+			if (trimmed === "") return { kind: "clear" };
+			const parsed = Number(trimmed);
+			return Number.isFinite(parsed) ? {
+				kind: "set",
+				value: parsed
+			} : void 0;
+		}
+	};
+}
+/**
+* A free-text field. An empty draft clears the field, so emptying the control
+* and saving is the same gesture as resetting it.
+* @param field - field name inside the namespace section.
+* @returns the field's conversion spec.
+*/
+function settingsTextField(field) {
+	return {
+		field,
+		format: (value) => typeof value === "string" ? value : "",
+		parse: (text) => {
+			const trimmed = text.trim();
+			return trimmed === "" ? { kind: "clear" } : {
+				kind: "set",
+				value: trimmed
+			};
+		}
+	};
+}
+/**
+* Stages one card's edits over one settings namespace and writes them on save.
+*
+* The form publishes through a snapshot store because slot components read
+* through a snapshot selector, while both the scope and the local drafts
+* change underneath; every projection is rebuilt from the two together.
+*/
+var SettingsFormModel = class {
+	scope;
+	specs;
+	secretSpecs;
+	staged = /* @__PURE__ */ new Map();
+	listeners = /* @__PURE__ */ new Set();
+	baseline;
+	unsubscribe;
+	saving = false;
+	failed = false;
+	/**
+	* @param scope - the shared configuration form for this card's namespace.
+	* @param specs - the section fields this card edits.
+	* @param secrets - the card's write-only controls, written outside the section.
+	*/
+	constructor(scope, specs, secrets = []) {
+		this.scope = scope;
+		this.specs = new Map(specs.map((spec) => [spec.field, spec]));
+		this.secretSpecs = new Map(secrets.map((spec) => [spec.field, spec]));
+		this.unsubscribe = scope.subscribe(() => {
+			this.publish();
+		});
+	}
+	/**
+	* Publish a projection of this form, rebuilt whenever the scope or a draft changes.
+	* @param project - build the card's state from the form's current reads.
+	* @returns the store the card's component reads through its bound selector.
+	*/
+	bind(project) {
+		const store = createSnapshotStore(project());
+		this.listeners.add(() => {
+			store.set(project());
+		});
+		return store;
+	}
+	/**
+	* Read the card-level state: what the Host serves, and what a save would do.
+	* @returns the form state every card shares.
+	*/
+	shell() {
+		const snapshot = this.scope.getSnapshot();
+		const plan = this.plan();
+		return {
+			available: snapshot.status === "ready",
+			writable: snapshot.writable,
+			dirty: plan.length > 0,
+			invalid: plan.some((item) => item.run === void 0 && item.op === void 0),
+			saving: this.saving,
+			failed: this.failed
+		};
+	}
+	/**
+	* Read one control's state.
+	* @param field - field name of a section field or of a write-only control.
+	* @returns the draft text, whether a save would leave an override, and whether it is invalid.
+	*/
+	field(field) {
+		const staged = this.staged.get(field);
+		if (this.secretSpecs.has(field)) return {
+			text: staged?.text ?? "",
+			overridden: false,
+			invalid: false
+		};
+		const spec = this.spec(field);
+		if (staged === void 0) return {
+			text: spec.format(this.sectionValue(field)),
+			overridden: this.stored(field),
+			invalid: false
+		};
+		const write = staged.clear ? { kind: "clear" } : spec.parse(staged.text);
+		return {
+			text: staged.text,
+			overridden: write?.kind === "set",
+			invalid: write === void 0
+		};
+	}
+	/**
+	* Build the edit, reset, save, and discard actions bound to this form.
+	* @returns the actions a card's slot entry injects.
+	*/
+	actions() {
+		return {
+			edit: (field, text) => {
+				this.stage(field, {
+					text,
+					clear: false
+				});
+			},
+			resetField: (field) => {
+				this.stage(field, {
+					text: this.spec(field).format(this.baseValue(field)),
+					clear: true
+				});
+			},
+			save: () => {
+				this.save();
+			},
+			discard: () => {
+				if (this.staged.size === 0 && !this.failed) return;
+				this.staged.clear();
+				this.baseline = void 0;
+				this.failed = false;
+				this.publish();
+			}
+		};
+	}
+	/**
+	* Write every staged edit, then re-seed from what the Host accepted.
+	*
+	* The Host is the only authority on whether a value was accepted — its
+	* validators own the constraints no schema can express — so the outcome is
+	* read back from the section rather than predicted here. A save that did not
+	* land keeps its drafts, so the user can correct them instead of retyping.
+	* @returns settlement after every write and the read-back.
+	*/
+	async save() {
+		const plan = this.plan();
+		if (!plan.length || this.saving || !this.scope.getSnapshot().writable || plan.some((item) => item.run === void 0 && item.op === void 0)) return;
+		this.saving = true;
+		this.failed = false;
+		this.publish();
+		try {
+			const ops = plan.flatMap((item) => item.op === void 0 ? [] : [item.op]);
+			let landed = !ops.length || await this.scope.mutate(ops, this.baseline?.revision);
+			if (!landed) {
+				this.failed = true;
+				return;
+			}
+			for (const item of plan) if (item.run) landed = await item.run() && landed;
+			if (landed) {
+				this.staged.clear();
+				this.baseline = void 0;
+			}
+			this.failed = !landed;
+		} catch (_error) {
+			this.failed = true;
+		} finally {
+			this.saving = false;
+			this.publish();
+		}
+	}
+	/** Release the form's accepted-value subscription. */
+	dispose() {
+		this.unsubscribe();
+		this.listeners.clear();
+	}
+	/**
+	* Every staged edit a save would write. An entry whose draft is not a value
+	* its field accepts carries no write: the form is still dirty, and the save
+	* refuses rather than dropping the edit.
+	* @returns the planned writes, in the order the fields were staged.
+	*/
+	plan() {
+		const plan = [];
+		for (const [field, staged] of this.staged) {
+			const secret = this.secretSpecs.get(field);
+			if (secret !== void 0) {
+				const value = staged.text.trim();
+				if (value !== "") plan.push({
+					field,
+					run: () => secret.write(value)
+				});
+				continue;
+			}
+			const spec = this.spec(field);
+			if (staged.clear) {
+				if (this.stored(field)) plan.push({
+					field,
+					op: {
+						op: "unset",
+						path: [field]
+					}
+				});
+				continue;
+			}
+			if (staged.text === spec.format(this.sectionValue(field))) continue;
+			const write = spec.parse(staged.text);
+			if (write === void 0) plan.push({ field });
+			else if (write.kind === "clear") plan.push({
+				field,
+				op: {
+					op: "unset",
+					path: [field]
+				}
+			});
+			else plan.push({
+				field,
+				op: {
+					op: "set",
+					path: [field],
+					value: write.value
+				}
+			});
+		}
+		return plan;
+	}
+	stage(field, edit) {
+		this.baseline ??= this.scope.getSnapshot();
+		this.staged.set(field, edit);
+		this.failed = false;
+		this.publish();
+	}
+	spec(field) {
+		const spec = this.specs.get(field);
+		if (spec === void 0) throw new Error(`plugin card has no field ${field}`);
+		return spec;
+	}
+	snapshotOf() {
+		return this.scope.getSnapshot();
+	}
+	sectionValue(field) {
+		return this.snapshotOf().value?.[field];
+	}
+	baseValue(field) {
+		return this.snapshotOf().base?.[field];
+	}
+	userLayer() {
+		return this.snapshotOf().user;
+	}
+	stored(field) {
+		const user = this.userLayer();
+		return user !== void 0 && Object.hasOwn(user, field);
+	}
+	publish() {
+		for (const listener of this.listeners) listener();
+	}
+};
+//#endregion
+//#region lib/types/CommandText.js
+/** Selectable command text with keyboard access while horizontally overflowing. */
+/**
+* Render command text without adding Tab stops for content that fits.
+* @param props - Text, localized scrollport name, and owner styling.
+* @returns A horizontal text scrollport, named and keyboard-focusable only when overflowing.
+*/
+function CommandText({ text, label, className }) {
+	const ref = useRef(null);
+	const [overflow, setOverflow] = useState(false);
+	useLayoutEffect(() => {
+		const element = ref.current;
+		/* v8 ignore next -- the span is rendered unconditionally. */
+		if (element === null) return void 0;
+		const measure = () => {
+			setOverflow(element.scrollWidth > element.clientWidth);
+		};
+		measure();
+		const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(measure);
+		observer?.observe(element);
+		const fonts = "fonts" in element.ownerDocument ? element.ownerDocument.fonts : void 0;
+		fonts?.addEventListener("loadingdone", measure);
+		return () => {
+			observer?.disconnect();
+			fonts?.removeEventListener("loadingdone", measure);
+		};
+	}, [text]);
+	return jsx("span", {
+		ref,
+		className: clsx(css$3.text, className),
+		"data-command-text": true,
+		tabIndex: overflow ? 0 : void 0,
+		role: overflow ? "group" : void 0,
+		"aria-label": overflow ? label : void 0,
+		children: text
+	});
+}
+//#endregion
+//#region lib/types/StateDot.js
+/** Outer 3x3 matrix cells (2px pixels on a 10px grid), clockwise from top-left. */
+const MATRIX_CELLS = [
+	[0, 0],
+	[4, 0],
+	[8, 0],
+	[8, 4],
+	[8, 8],
+	[4, 8],
+	[0, 8],
+	[0, 4]
+];
+/**
+* Render a state dot.
+* @param props.state - which of `done`, `warning`, `ongoing`, `error`, or `idle` to show.
+* @param props.size - outer diameter in px (default 10, the figma size).
+* @param props.className - extra class for layout placement.
+* @returns the dot element (aria-hidden; pair with text for accessibility).
+*/
+function StateDot({ state, size = 10, className }) {
+	if (state === "ongoing") return jsx("svg", {
+		className: clsx(css$4.matrix, className),
+		"data-state": "ongoing",
+		width: size,
+		height: size,
+		viewBox: "0 0 10 10",
+		shapeRendering: "crispEdges",
+		"aria-hidden": "true",
+		children: MATRIX_CELLS.map(([x, y], index) => jsx("rect", {
+			className: css$4.cell,
+			x,
+			y,
+			width: "2",
+			height: "2",
+			style: { animationDelay: `${(index - MATRIX_CELLS.length) * 125}ms` }
+		}, `${x}-${y}`))
+	});
+	return jsx("span", {
+		className: clsx(css$4.dot, className),
+		"data-state": state,
+		style: {
+			width: size,
+			height: size
+		},
+		"aria-hidden": "true"
+	});
+}
+//#endregion
 //#region lib/types/TextShimmer.js
 /** Text activity animation shared by a row and its nested text fragments. */
 const DecorativeCopy = createContext(void 0);
 function TextContent({ children, className }) {
 	const generated = useContext(DecorativeCopy) === true && typeof children === "string";
 	return jsx("span", {
-		className: clsx(css$1.text, className),
+		className: clsx(css$5.text, className),
 		"data-shimmer-text": generated ? children : void 0,
 		children: generated ? null : children
 	});
@@ -1914,24 +2450,24 @@ const TextShimmer = memo(function TextShimmer({ children, active = false, classN
 	});
 	const content = typeof children === "string" ? jsx(TextContent, { children }) : children;
 	return jsxs("span", {
-		className: clsx(css$1.root, className),
+		className: clsx(css$5.root, className),
 		"data-shimmer": active || void 0,
 		children: [jsx(DecorativeCopy.Provider, {
 			value: false,
 			children: jsx("span", {
-				className: clsx(css$1.content, contentClassName),
+				className: clsx(css$5.content, contentClassName),
 				children: content
 			})
 		}), active && jsx("span", {
-			className: css$1.decoration,
+			className: css$5.decoration,
 			"aria-hidden": "true",
 			inert: "",
 			children: jsx("span", {
-				className: css$1.sweep,
+				className: css$5.sweep,
 				children: jsx(DecorativeCopy.Provider, {
 					value: true,
 					children: jsx("span", {
-						className: clsx(css$1.content, css$1.highlight, contentClassName),
+						className: clsx(css$5.content, css$5.highlight, contentClassName),
 						children: content
 					})
 				})
@@ -1959,15 +2495,15 @@ const DisclosureRow = memo(function DisclosureRow({ icon, title, open, expandabl
 		onToggle();
 	};
 	const collapsedLeading = previewChevron ? jsxs(Fragment, { children: [jsx("span", {
-		className: css$2.iconIdle,
+		className: css$6.iconIdle,
 		children: icon
-	}), jsx(IconChevronDownOutline14, { className: clsx(chevronClassName, css$2.chevronHover) })] }) : icon;
+	}), jsx(IconChevronDownOutline14, { className: clsx(chevronClassName, css$6.chevronHover) })] }) : icon;
 	const leading = open ? jsx(IconChevronUpOutline14, { className: chevronClassName }) : collapsedLeading;
 	return jsxs("div", {
-		className: clsx(css$2.root, className),
+		className: clsx(css$6.root, className),
 		"data-open": open || void 0,
 		children: [jsxs("div", {
-			className: clsx(css$2.row, rowClassName),
+			className: clsx(css$6.row, rowClassName),
 			"data-disclosure-row": true,
 			"data-expandable": rowExpands || void 0,
 			role: rowExpands ? "button" : void 0,
@@ -1977,19 +2513,19 @@ const DisclosureRow = memo(function DisclosureRow({ icon, title, open, expandabl
 			onKeyDown: rowExpands ? toggleFromKeyboard : void 0,
 			children: [expandable && !rowExpands ? jsx("button", {
 				type: "button",
-				className: clsx(css$2.leading, leadingClassName),
+				className: clsx(css$6.leading, leadingClassName),
 				"aria-expanded": open,
 				onClick: toggleFromLeading,
 				children: leading
 			}) : jsx("span", {
-				className: clsx(css$2.leading, leadingClassName),
+				className: clsx(css$6.leading, leadingClassName),
 				children: leading
 			}), jsxs(TextShimmer, {
 				active: running,
 				className: contentClassName,
 				contentClassName: contentLayoutClassName,
 				children: [jsx(TextShimmer, {
-					className: clsx(css$2.title, titleClassName),
+					className: clsx(css$6.title, titleClassName),
 					children: title
 				}), (keepContentWhenOpen || !open) && collapsedContent]
 			})]
@@ -2008,10 +2544,10 @@ const DisclosureRow = memo(function DisclosureRow({ icon, title, open, expandabl
 function Button({ variant = "ghost", size = "md", icon, className, children, ...rest }) {
 	return jsxs("button", {
 		type: "button",
-		className: clsx(css$3.button, css$3[variant], css$3[size], className),
+		className: clsx(css$7.button, css$7[variant], css$7[size], className),
 		...rest,
 		children: [icon != null && jsx("span", {
-			className: css$3.icon,
+			className: css$7.icon,
 			children: icon
 		}), children]
 	});
@@ -2026,12 +2562,12 @@ function Button({ variant = "ghost", size = "md", icon, className, children, ...
 */
 function Pill({ active = false, className, children, onClick, ...rest }) {
 	if (!onClick) return jsx("span", {
-		className: clsx(css$4.pill, active && css$4.active, className),
+		className: clsx(css$8.pill, active && css$8.active, className),
 		children
 	});
 	return jsx("button", {
 		type: "button",
-		className: clsx(css$4.pill, css$4.interactive, active && css$4.active, className),
+		className: clsx(css$8.pill, css$8.interactive, active && css$8.active, className),
 		onClick,
 		...rest,
 		children
@@ -2096,11 +2632,11 @@ function SegmentedControl({ id, value, options, onChange, label, disabled = fals
 		ref: list,
 		role: "tablist",
 		"aria-label": label,
-		className: clsx(css$5.control, className),
+		className: clsx(css$9.control, className),
 		style: indicator,
 		children: [jsx("span", {
 			"aria-hidden": "true",
-			className: css$5.indicator
+			className: css$9.indicator
 		}), options.map((option) => {
 			const active = option.value === value;
 			return jsx("button", {
@@ -2112,7 +2648,7 @@ function SegmentedControl({ id, value, options, onChange, label, disabled = fals
 				tabIndex: active ? 0 : -1,
 				disabled: disabled || option.disabled === true,
 				title: option.title,
-				className: css$5.tab,
+				className: css$9.tab,
 				onClick: () => {
 					if (!active) onChange(option.value);
 				},
@@ -2123,22 +2659,6 @@ function SegmentedControl({ id, value, options, onChange, label, disabled = fals
 	});
 }
 //#endregion
-//#region lib/types/Tag.js
-/**
-* Render a read-only tag.
-* @param props.tone - which palette to use (default `outline`).
-* @param props.className - extra class for layout placement.
-* @param props.children - the localized label, owned by the render site.
-* @returns the tag element.
-*/
-function Tag({ tone = "outline", className, children }) {
-	return jsx("span", {
-		className: clsx(css$6.tag, className),
-		"data-tone": tone,
-		children
-	});
-}
-//#endregion
 //#region lib/types/Switch.js
 /**
 * Render a toggle switch.
@@ -2159,11 +2679,11 @@ function Switch({ checked, onChange, label, disabled = false, title, className }
 		"aria-label": label,
 		title,
 		disabled,
-		className: clsx(css$7.switch, className),
+		className: clsx(css$10.switch, className),
 		onClick: () => {
 			onChange(!checked);
 		},
-		children: jsx("span", { className: css$7.thumb })
+		children: jsx("span", { className: css$10.thumb })
 	});
 }
 //#endregion
@@ -2181,7 +2701,7 @@ function Switch({ checked, onChange, label, disabled = false, title, className }
 */
 function Checkbox({ checked, onChange, label, disabled = false, title, className }) {
 	return jsxs("label", {
-		className: clsx(css$8.checkbox, className),
+		className: clsx(css$11.checkbox, className),
 		title,
 		children: [jsx("input", {
 			type: "checkbox",
@@ -2203,13 +2723,13 @@ function Checkbox({ checked, onChange, label, disabled = false, title, className
 */
 const Input = forwardRef(function Input({ icon, className, ...rest }, ref) {
 	return jsxs("span", {
-		className: clsx(css$9.wrap, className),
+		className: clsx(css$12.wrap, className),
 		children: [icon != null && jsx("span", {
-			className: css$9.icon,
+			className: css$12.icon,
 			children: icon
 		}), jsx("input", {
 			ref,
-			className: css$9.input,
+			className: css$12.input,
 			...rest
 		})]
 	});
@@ -2423,9 +2943,9 @@ function useModalLayer(dialog, open, onClose) {
 */
 function ShortcutKeys({ keys, variant = "plain", className }) {
 	return jsx("span", {
-		className: clsx(css$10.keys, variant === "tooltip" && css$10.tooltip, variant === "tooltip" && keys.includes("+") && css$10.joined, className),
+		className: clsx(css$13.keys, variant === "tooltip" && css$13.tooltip, variant === "tooltip" && keys.includes("+") && css$13.joined, className),
 		children: keys.map((key, index) => jsx("kbd", {
-			className: key === "+" ? css$10.separator : css$10.key,
+			className: key === "+" ? css$13.separator : css$13.key,
 			children: key
 		}, index))
 	});
@@ -2449,32 +2969,32 @@ function ShortcutKeys({ keys, variant = "plain", className }) {
 */
 function MenuItemButton({ children, shortcut, icon, disabled = false, danger = false, separatorBefore = false, onSelect }) {
 	return jsxs("div", {
-		className: css$11.itemWrap,
+		className: css$14.itemWrap,
 		children: [separatorBefore && jsx("div", {
-			className: css$11.separator,
+			className: css$14.separator,
 			role: "separator"
 		}), jsxs("button", {
 			type: "button",
 			role: "menuitem",
-			className: clsx(css$11.item, danger && css$11.danger),
+			className: clsx(css$14.item, danger && css$14.danger),
 			disabled,
 			"aria-keyshortcuts": shortcut?.aria,
 			onClick: onSelect,
 			children: [
 				icon !== void 0 && jsx("span", {
-					className: css$11.itemIcon,
+					className: css$14.itemIcon,
 					children: icon
 				}),
 				jsx("span", {
-					className: css$11.itemLabel,
+					className: css$14.itemLabel,
 					children
 				}),
 				shortcut !== void 0 && jsx("span", {
 					"aria-hidden": "true",
-					className: css$11.shortcut,
+					className: css$14.shortcut,
 					children: jsx(ShortcutKeys, {
 						keys: shortcut.keys,
-						className: css$11.shortcutKeys
+						className: css$14.shortcutKeys
 					})
 				})
 			]
@@ -2746,11 +3266,11 @@ function Menu({ open, anchor, items, selectedId, selectedIds, onSelect, onClose,
 	const scrollable = !items.some((entry) => !isSeparator(entry) && !isLabel(entry) && entry.submenu !== void 0 && entry.submenu.length > 0);
 	const renderEntry = (entry) => {
 		if (isSeparator(entry)) return jsx("div", {
-			className: css$11.separator,
+			className: css$14.separator,
 			role: "separator"
 		}, entry.id);
 		if (isLabel(entry)) return jsx("div", {
-			className: css$11.label,
+			className: css$14.label,
 			role: "presentation",
 			children: entry.text
 		}, entry.id);
@@ -2758,7 +3278,7 @@ function Menu({ open, anchor, items, selectedId, selectedIds, onSelect, onClose,
 		const subOpen = hasSub && openSubmenuId === entry.id;
 		const selected = entry.id === selectedId || selectedIds?.includes(entry.id) === true;
 		return jsxs("div", {
-			className: css$11.itemWrap,
+			className: css$14.itemWrap,
 			onMouseEnter: () => {
 				setOpenSubmenuId(hasSub ? entry.id : null);
 			},
@@ -2768,7 +3288,7 @@ function Menu({ open, anchor, items, selectedId, selectedIds, onSelect, onClose,
 			children: [jsxs("button", {
 				type: "button",
 				role: "menuitem",
-				className: clsx(css$11.item, selected && (selection === "fill" ? css$11.selectedFill : css$11.selected), entry.danger === true && css$11.danger),
+				className: clsx(css$14.item, selected && (selection === "fill" ? css$14.selectedFill : css$14.selected), entry.danger === true && css$14.danger),
 				disabled: entry.disabled,
 				"aria-keyshortcuts": entry.shortcut?.aria,
 				"aria-haspopup": hasSub ? "menu" : void 0,
@@ -2786,30 +3306,30 @@ function Menu({ open, anchor, items, selectedId, selectedIds, onSelect, onClose,
 				},
 				children: [
 					entry.icon !== void 0 && jsx("span", {
-						className: css$11.itemIcon,
+						className: css$14.itemIcon,
 						children: entry.icon
 					}),
 					jsx("span", {
-						className: css$11.itemLabel,
+						className: css$14.itemLabel,
 						children: entry.label
 					}),
 					entry.shortcut !== void 0 && jsx("span", {
 						"aria-hidden": "true",
-						className: css$11.shortcut,
+						className: css$14.shortcut,
 						children: jsx(ShortcutKeys, {
 							keys: entry.shortcut.keys,
-							className: css$11.shortcutKeys
+							className: css$14.shortcutKeys
 						})
 					}),
-					selected && selection === "check" && jsx(IconCheckOutline16, { className: css$11.check })
+					selected && selection === "check" && jsx(IconCheckOutline16, { className: css$14.check })
 				]
 			}), subOpen && entry.submenu !== void 0 && jsx("div", {
-				className: clsx(css$11.submenu, compact && css$11.compactList),
+				className: clsx(css$14.submenu, compact && css$14.compactList),
 				role: "menu",
 				children: entry.submenu.map((sub) => jsxs("button", {
 					type: "button",
 					role: "menuitem",
-					className: css$11.item,
+					className: css$14.item,
 					disabled: sub.disabled,
 					"aria-keyshortcuts": sub.shortcut?.aria,
 					onClick: () => {
@@ -2818,19 +3338,19 @@ function Menu({ open, anchor, items, selectedId, selectedIds, onSelect, onClose,
 					},
 					children: [
 						sub.icon !== void 0 && jsx("span", {
-							className: css$11.itemIcon,
+							className: css$14.itemIcon,
 							children: sub.icon
 						}),
 						jsx("span", {
-							className: css$11.itemLabel,
+							className: css$14.itemLabel,
 							children: sub.label
 						}),
 						sub.shortcut !== void 0 && jsx("span", {
 							"aria-hidden": "true",
-							className: css$11.shortcut,
+							className: css$14.shortcut,
 							children: jsx(ShortcutKeys, {
 								keys: sub.shortcut.keys,
-								className: css$11.shortcutKeys
+								className: css$14.shortcutKeys
 							})
 						})
 					]
@@ -2840,25 +3360,25 @@ function Menu({ open, anchor, items, selectedId, selectedIds, onSelect, onClose,
 	};
 	const list = open && jsxs("div", {
 		ref: listRef,
-		className: clsx(css$11.list, dense && css$11.denseList, compact && css$11.compactList, scrollable && css$11.scrollable, portal && css$11.portal, side === "top" && !portal && css$11.sideTop, align === "end" && !portal && css$11.alignEnd),
+		className: clsx(css$14.list, dense && css$14.denseList, compact && css$14.compactList, scrollable && css$14.scrollable, portal && css$14.portal, side === "top" && !portal && css$14.sideTop, align === "end" && !portal && css$14.alignEnd),
 		style: portal ? fixedPos ?? MEASURE_STYLE : void 0,
 		role: "menu",
 		onClick: (e) => {
 			e.stopPropagation();
 		},
 		children: [jsx("div", {
-			className: css$11.viewport,
+			className: css$14.viewport,
 			role: "presentation",
 			children: items.map(renderEntry)
 		}), footer !== void 0 && footer.length > 0 && jsx("div", {
-			className: css$11.footer,
+			className: css$14.footer,
 			role: "presentation",
 			children: footer.map(renderEntry)
 		})]
 	});
 	return jsxs("span", {
 		ref: rootRef,
-		className: clsx(css$11.root, className),
+		className: clsx(css$14.root, className),
 		onPointerEnter: closeOnPointerLeave ? cancelClose : void 0,
 		onPointerLeave: closeOnPointerLeave ? () => {
 			if (open) armClose();
@@ -3255,7 +3775,7 @@ function Tooltip({ label, shortcutKeys, side = "right", delayMs = 0, disabled =
 	};
 	const bubbleNode = visible && !suppressed && jsxs("span", {
 		ref: bubble,
-		className: css$12.bubble,
+		className: css$15.bubble,
 		"data-side": placement,
 		"data-portal": portal || void 0,
 		"data-has-shortcut": shortcutKeys?.length ? true : void 0,
@@ -3267,7 +3787,7 @@ function Tooltip({ label, shortcutKeys, side = "right", delayMs = 0, disabled =
 		role: "tooltip",
 		"aria-label": shortcutKeys?.length ? [resolvedLabel, shortcutKeys.join(" ")].filter(Boolean).join(" ") : void 0,
 		children: [resolvedLabel && jsx("span", {
-			className: css$12.label,
+			className: css$15.label,
 			children: resolvedLabel
 		}), shortcutKeys !== void 0 && shortcutKeys.length > 0 && jsx(ShortcutKeys, {
 			keys: shortcutKeys,
@@ -3473,7 +3993,7 @@ function HoverCard({ anchor, content, openDelayMs = 500, disabled = false, copyT
 	const copyable = copyText !== void 0;
 	const card = open && pos !== null && !suppressed && jsx("div", {
 		ref: cardRef,
-		className: clsx(css$13.card, inline && css$13.media, copyable && css$13.copyable, copied && css$13.feedback),
+		className: clsx(css$16.card, inline && css$16.media, copyable && css$16.copyable, copied && css$16.feedback),
 		style: {
 			...pos,
 			minHeight: copied && copyHeightRef.current !== null ? copyHeightRef.current : void 0
@@ -3494,14 +4014,14 @@ function HoverCard({ anchor, content, openDelayMs = 500, disabled = false, copyT
 			copy(copyText);
 		} : void 0,
 		children: copied ? jsx("span", {
-			className: css$13.copied,
+			className: css$16.copied,
 			"aria-hidden": "true",
 			children: copiedLabel
 		}) : content
 	});
 	return jsxs("span", {
 		ref: rootRef,
-		className: clsx(css$13.root, inline && css$13.inline),
+		className: clsx(css$16.root, inline && css$16.inline),
 		onFocus: inline ? (event) => {
 			if (!disabled && event.target.matches(":focus-visible")) {
 				cancelClose();
@@ -3540,7 +4060,7 @@ function HoverCard({ anchor, content, openDelayMs = 500, disabled = false, copyT
 				children: anchor
 			}),
 			open && !suppressed && copyable && jsx("span", {
-				className: css$13.status,
+				className: css$16.status,
 				role: "status",
 				children: copied ? copiedLabel : ""
 			}),
@@ -3575,11 +4095,11 @@ function Modal({ open, onClose, title, closeLabel, description, children, footer
 	useModalLayer(dialog, open, onClose);
 	if (!open) return null;
 	return createPortal(jsxs("div", {
-		className: css$14.root,
+		className: css$17.root,
 		role: "presentation",
 		onKeyDownCapture,
 		children: [jsx("div", {
-			className: css$14.mask,
+			className: css$17.mask,
 			style: backdropBlur ? void 0 : { backdropFilter: "none" },
 			"aria-hidden": "true",
 			onClick: onClose
@@ -3587,37 +4107,37 @@ function Modal({ open, onClose, title, closeLabel, description, children, footer
 			ref: dialog,
 			tabIndex: -1,
 			"data-shortcut-modal": shortcutModal,
-			className: clsx(css$14.dialog, className),
+			className: clsx(css$17.dialog, className),
 			role: "dialog",
 			"aria-modal": "true",
 			"aria-label": title,
 			children: headless ? children : jsxs(Fragment, { children: [jsxs("div", {
-				className: clsx(css$14.content, contentClassName),
+				className: clsx(css$17.content, contentClassName),
 				children: [
 					jsxs("div", {
-						className: css$14.header,
+						className: css$17.header,
 						children: [jsx("h2", {
-							className: css$14.title,
+							className: css$17.title,
 							children: title
 						}), jsx("button", {
 							type: "button",
-							className: css$14.close,
+							className: css$17.close,
 							"aria-label": closeLabel,
 							onClick: onClose,
 							children: jsx(IconCloseOutline16, { size: 14 })
 						})]
 					}),
 					description !== void 0 && description !== "" && jsx("p", {
-						className: css$14.description,
+						className: css$17.description,
 						children: description
 					}),
 					children !== void 0 && jsx("div", {
-						className: css$14.body,
+						className: css$17.body,
 						children
 					})
 				]
 			}), footer !== void 0 && jsx("div", {
-				className: css$14.footer,
+				className: css$17.footer,
 				children: footer
 			})] })
 		})]
@@ -3641,13 +4161,13 @@ function OnboardingSurface({ children }) {
 		};
 	}, []);
 	return createPortal(jsxs("div", {
-		className: css$15.onboardingOverlay,
+		className: css$18.onboardingOverlay,
 		role: "presentation",
 		children: [jsx("div", {
-			className: css$15.onboardingMask,
+			className: css$18.onboardingMask,
 			"aria-hidden": "true"
 		}), jsx("div", {
-			className: css$15.onboardingStage,
+			className: css$18.onboardingStage,
 			children
 		})]
 	}), document.body);
@@ -3668,28 +4188,28 @@ function RiskConfirmation({ open, title, description, acknowledgeLabel, cancelLa
 		onClose: onCancel,
 		title,
 		closeLabel,
-		className: css$16.confirmation ?? "",
-		contentClassName: css$16.confirmationContent ?? "",
+		className: css$19.confirmation ?? "",
+		contentClassName: css$19.confirmationContent ?? "",
 		footer: jsxs(Fragment, { children: [jsx(Button, {
 			variant: "outline",
-			className: css$16.modalAction,
+			className: css$19.modalAction,
 			onClick: onCancel,
 			children: cancelLabel
 		}), jsx(Button, {
 			variant: "primary",
-			className: css$16.confirmAction,
+			className: css$19.confirmAction,
 			disabled: disabled || !acknowledged,
 			onClick: onConfirm,
 			children: confirmLabel
 		})] }),
 		children: [jsxs("div", {
-			className: css$16.warning,
+			className: css$19.warning,
 			children: [jsx(IconWarningOutline16, {
 				size: 18,
-				className: css$16.warningIcon
+				className: css$19.warningIcon
 			}), jsx("p", { children: description })]
 		}), jsxs("label", {
-			className: css$16.acknowledgement,
+			className: css$19.acknowledgement,
 			children: [jsx("input", {
 				type: "checkbox",
 				checked: acknowledged,
@@ -3737,47 +4257,47 @@ function ConnectionIndicator({ state, disconnectedLabel, connectingLabel, recove
 		};
 	}, [state, rendered]);
 	if (rendered === void 0) return null;
-	const leavingClass = leaving ? ` ${css$17.leaving}` : "";
+	const leavingClass = leaving ? ` ${css$20.leaving}` : "";
 	if (rendered === "recovered") return jsxs("div", {
-		className: `${css$17.indicator} ${css$17.success}${leavingClass}`,
+		className: `${css$20.indicator} ${css$20.success}${leavingClass}`,
 		role: "status",
 		"aria-label": recoveredLabel,
 		children: [jsx("span", {
-			className: css$17.icon,
+			className: css$20.icon,
 			"aria-hidden": "true",
 			children: jsx(IconCheckOutline16, { size: 14 })
 		}), jsx("span", {
-			className: css$17.label,
+			className: css$20.label,
 			children: recoveredLabel
 		})]
 	});
 	const connecting = rendered === "connecting";
 	return jsxs("button", {
 		type: "button",
-		className: `${css$17.indicator} ${css$17.warning}${leavingClass}`,
+		className: `${css$20.indicator} ${css$20.warning}${leavingClass}`,
 		"data-phase": rendered,
 		"aria-label": connecting ? restartActionLabel : reconnectActionLabel,
 		onClick: onReconnect,
 		children: [jsx("span", {
-			className: css$17.icon,
+			className: css$20.icon,
 			"aria-hidden": "true",
 			children: connecting ? jsx(IconLoadingOutline16, {
 				size: 14,
-				className: css$17.spinner
+				className: css$20.spinner
 			}) : jsx(IconRefreshOutline14, { size: 14 })
 		}), jsx("span", {
-			className: css$17.label,
+			className: css$20.label,
 			children: connecting ? jsxs(Fragment, { children: [connectingLabel, jsxs("span", {
-				className: css$17.dots,
+				className: css$20.dots,
 				"aria-hidden": "true",
 				children: [
 					jsx("span", { children: "." }),
 					jsx("span", {
-						className: css$17.secondDot,
+						className: css$20.secondDot,
 						children: "."
 					}),
 					jsx("span", {
-						className: css$17.thirdDot,
+						className: css$20.thirdDot,
 						children: "."
 					})
 				]
@@ -3836,9 +4356,9 @@ function cellTransform(left) {
 */
 /** Cinnabar body gradient, top to bottom: the seal's warm lit upper edge. */
 const BODY_STOPS = [
-	"#d4503d",
-	"#c3402f",
-	"#a23526"
+	"#c94a40",
+	"#b7352c",
+	"#8f2a21"
 ];
 /** Warm white of the glyphs against the cinnabar body. */
 const GLYPH_FILL = "#fff5eb";
@@ -4602,7 +5122,7 @@ function FileTypeIcon(props) {
 		type: resolvedType,
 		size,
 		className
-	}) : glyph(resolvedType, size, clsx(css$18.icon, css$18[resolvedType], className));
+	}) : glyph(resolvedType, size, clsx(css$21.icon, css$21[resolvedType], className));
 }
 //#endregion
 //#region lib/types/SiteGlyph.js
@@ -4915,17 +5435,17 @@ function PathLabel({ path, className, ...attributes }) {
 	return jsx("span", {
 		...attributes,
 		ref: boxRef,
-		className: clsx(css$19.path, className),
+		className: clsx(css$22.path, className),
 		title: path,
 		"data-path-label": true,
 		children: jsxs("span", {
 			ref: textRef,
-			className: css$19.text,
+			className: css$22.text,
 			children: [directory !== "" && jsx("span", {
-				className: css$19.directory,
+				className: css$22.directory,
 				children: directory
 			}), jsx("span", {
-				className: css$19.name,
+				className: css$22.name,
 				children: name
 			})]
 		})
@@ -4993,7 +5513,7 @@ function projectUserText(text, sessionLabels, slashNames = [], slashKind = "skil
 	let cursor = 0;
 	const pushPlain = (from, to) => {
 		parts.push(jsx("span", {
-			className: css$20.plainRun,
+			className: css$23.plainRun,
 			children: text.slice(from, to)
 		}, `t${from}`));
 	};
@@ -5006,14 +5526,14 @@ function projectUserText(text, sessionLabels, slashNames = [], slashKind = "skil
 		const contents = jsxs(Fragment, { children: [referenceKind !== void 0 && jsx(ReferenceIcon, {
 			kind: referenceKind,
 			size: 16,
-			className: css$20.refIcon
+			className: css$23.refIcon
 		}), displayLabel] });
 		const open = references === void 0 ? void 0 : referenceKind === "file" ? () => {
 			references.openFile(label.slice(1).replace(/^"|"$/gu, ""));
 		} : referenceKind === void 0 && slashKind === "skill" ? () => {
 			references.openSkill(label.slice(1));
 		} : void 0;
-		const className = clsx(css$20.refChip, referenceKind === void 0 && css$20.slashChip);
+		const className = clsx(css$23.refChip, referenceKind === void 0 && css$23.slashChip);
 		parts.push(open === void 0 ? jsx("span", {
 			className,
 			"data-ref-chip": referenceKind ?? slashKind,
@@ -5033,7 +5553,7 @@ function projectUserText(text, sessionLabels, slashNames = [], slashKind = "skil
 		cursor = end;
 	}
 	if (parts.length === 0) return jsx("span", {
-		className: css$20.plainRun,
+		className: css$23.plainRun,
 		children: text
 	});
 	if (cursor < text.length) pushPlain(cursor, text.length);
@@ -5092,22 +5612,22 @@ function Toast({ text, icon, tone, anchor, holdMs = HOLD_MS, onDone }) {
 		};
 	}, [anchor]);
 	return createPortal(jsxs("div", {
-		className: css$21.toast,
+		className: css$24.toast,
 		role: "alert",
 		style: {
 			...left === null ? {} : { left },
 			"--qilin-toast-hold": `${String(holdMs)}ms`
 		},
 		children: [tone === "success" ? jsx("span", {
-			className: `${css$21.icon} ${css$21.success}`,
+			className: `${css$24.icon} ${css$24.success}`,
 			"aria-hidden": true,
 			children: jsx(IconCheckOutline16, {})
 		}) : icon !== void 0 && jsx("span", {
-			className: css$21.icon,
+			className: css$24.icon,
 			"aria-hidden": true,
 			children: icon
 		}), jsx("span", {
-			className: css$21.text,
+			className: css$24.text,
 			children: text
 		})]
 	}), document.body);
@@ -5304,8 +5824,28 @@ function rankByName(items, rawQuery) {
 * @returns true only inside the macOS Electron shell.
 */
 function isDarwinDesktop() {
+	if (typeof document === "undefined") return false;
 	return document.documentElement.dataset.platform === "darwin";
 }
+/**
+* Subscribe to `data-platform` flips on `<html>` for decisions made outside
+* render (apply-world projections that cannot re-read the DOM per frame).
+* The listener fires on attribute changes after this call, not for the
+* current value — pair it with a fresh `isDarwinDesktop()` read.
+* @param listener - Called on every `data-platform` attribute change.
+* @returns Disposer that stops watching.
+*/
+function watchDarwinDesktop(listener) {
+	if (typeof document === "undefined") return () => {};
+	const observer = new MutationObserver(listener);
+	observer.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["data-platform"]
+	});
+	return () => {
+		observer.disconnect();
+	};
+}
 //#endregion
 //#region lib/types/JsonTree.js
 const OBJECT_PREVIEW_LIMIT = 4;
@@ -5381,7 +5921,7 @@ function JsonCopyAction({ store, target, persistent, labels, onCopy, onClose })
 	const object = typeof target.value === "object" && target.value !== null;
 	const copyTitle = state === "copied" ? labels.copied : state === "failed" ? labels.copyFailed : object ? labels.copyPrettyJson : labels.copyValue;
 	return jsx("span", {
-		className: css$22.copySlot,
+		className: css$25.copySlot,
 		children: (persistent || snapshot !== void 0) && jsx(Menu, {
 			open: snapshot?.menuOpen === true,
 			compact: true,
@@ -5390,7 +5930,7 @@ function JsonCopyAction({ store, target, persistent, labels, onCopy, onClose })
 			anchor: jsx("button", {
 				ref: buttonRef,
 				type: "button",
-				className: css$22.actionButton,
+				className: css$25.actionButton,
 				"data-json-copy-button": true,
 				"data-state": state,
 				"aria-label": copyTitle,
@@ -5429,35 +5969,35 @@ function bracketOf(value) {
 }
 function previewPrimitive(value) {
 	if (value === null) return jsx("span", {
-		className: css$22.keywordValue,
+		className: css$25.keywordValue,
 		children: "null"
 	});
 	if (typeof value === "string") return jsx("span", {
-		className: css$22.stringValue,
+		className: css$25.stringValue,
 		children: JSON.stringify(value)
 	});
 	if (typeof value === "number") return jsx("span", {
-		className: css$22.numberValue,
+		className: css$25.numberValue,
 		children: String(value)
 	});
 	if (typeof value === "boolean") return jsx("span", {
-		className: css$22.keywordValue,
+		className: css$25.keywordValue,
 		children: String(value)
 	});
 	if (typeof value === "bigint") return jsx("span", {
-		className: css$22.otherValue,
+		className: css$25.otherValue,
 		children: value.toString()
 	});
 	if (typeof value === "undefined") return jsx("span", {
-		className: css$22.otherValue,
+		className: css$25.otherValue,
 		children: "undefined"
 	});
 	if (typeof value === "symbol") return jsx("span", {
-		className: css$22.otherValue,
+		className: css$25.otherValue,
 		children: value.description ?? "Symbol"
 	});
 	if (typeof value === "function") return jsx("span", {
-		className: css$22.otherValue,
+		className: css$25.otherValue,
 		children: value.name || "Function"
 	});
 	return null;
@@ -5471,71 +6011,71 @@ function previewValue(value, depth) {
 	const [open, close] = bracketOf(value);
 	return jsxs(Fragment, { children: [
 		jsx("span", {
-			className: css$22.punctuation,
+			className: css$25.punctuation,
 			children: open
 		}),
 		depth >= PREVIEW_DEPTH_LIMIT ? jsx("span", {
-			className: css$22.previewEllipsis,
+			className: css$25.previewEllipsis,
 			children: "…"
 		}) : visible.map(([key, item], index) => jsxs("span", { children: [
 			index > 0 && jsx("span", {
-				className: css$22.punctuation,
+				className: css$25.punctuation,
 				children: ", "
 			}),
 			!array && jsxs(Fragment, { children: [jsx("span", {
-				className: css$22.previewProperty,
+				className: css$25.previewProperty,
 				children: key
 			}), jsx("span", {
-				className: css$22.punctuation,
+				className: css$25.punctuation,
 				children: ": "
 			})] }),
 			previewValue(item, depth + 1)
 		] }, key)),
 		depth < PREVIEW_DEPTH_LIMIT && entries.length > limit && jsx("span", {
-			className: css$22.previewEllipsis,
+			className: css$25.previewEllipsis,
 			children: ", …"
 		}),
 		jsx("span", {
-			className: css$22.punctuation,
+			className: css$25.punctuation,
 			children: close
 		})
 	] });
 }
 function primitiveValue(value) {
 	if (value === null) return jsx("span", {
-		className: css$22.keywordValue,
+		className: css$25.keywordValue,
 		children: "null"
 	});
 	if (typeof value === "string") return jsx("span", {
-		className: css$22.stringValue,
+		className: css$25.stringValue,
 		children: JSON.stringify(value)
 	});
 	if (typeof value === "boolean") return jsx("span", {
-		className: css$22.keywordValue,
+		className: css$25.keywordValue,
 		children: String(value)
 	});
 	if (typeof value === "number") return jsx("span", {
-		className: css$22.numberValue,
+		className: css$25.numberValue,
 		children: String(value)
 	});
 	if (typeof value === "bigint") return jsx("span", {
-		className: css$22.numberValue,
+		className: css$25.numberValue,
 		children: `${value.toString()}n`
 	});
 	if (value instanceof Date) return jsx("span", {
-		className: css$22.otherValue,
+		className: css$25.otherValue,
 		children: value.toISOString()
 	});
 	if (typeof value === "function") return jsxs("span", {
-		className: css$22.otherValue,
+		className: css$25.otherValue,
 		children: ["function() ", "{ }"]
 	});
 	if (typeof value === "undefined") return jsx("span", {
-		className: css$22.otherValue,
+		className: css$25.otherValue,
 		children: "undefined"
 	});
 	return jsx("span", {
-		className: css$22.otherValue,
+		className: css$25.otherValue,
 		children: value.toString()
 	});
 }
@@ -5563,7 +6103,7 @@ function moveFocus(button, direction) {
 function NodeField({ field, expandable, onToggle }) {
 	if (field === void 0) return null;
 	return jsxs("span", {
-		className: clsx(css$22.label, expandable && css$22.clickableLabel),
+		className: clsx(css$25.label, expandable && css$25.clickableLabel),
 		onClick: expandable ? onToggle : void 0,
 		children: [fieldText(field), ":"]
 	});
@@ -5600,7 +6140,7 @@ function JsonString({ collapsedStringLines, stringWrapping, field, labels, lastE
 		if (!expanded) return;
 		const raw = rawRef.current;
 		const clips = [];
-		const tree = raw.closest(`.${css$22.root}`);
+		const tree = raw.closest(`.${css$25.root}`);
 		for (let parent = tree.parentElement; parent !== null; parent = parent.parentElement) if (/auto|scroll|hidden|clip/.test(getComputedStyle(parent).overflowY)) clips.push(parent);
 		const measure = () => {
 			let top = 0;
@@ -5629,33 +6169,33 @@ function JsonString({ collapsedStringLines, stringWrapping, field, labels, lastE
 	if (expanded) {
 		const fieldId = `${contentsId}-field`;
 		return jsxs("div", {
-			className: css$22.stringField,
+			className: css$25.stringField,
 			"data-expanded": true,
 			children: [
 				field !== void 0 && jsxs("span", {
 					id: fieldId,
-					className: css$22.label,
+					className: css$25.label,
 					children: [fieldText(field), ":"]
 				}),
 				jsx("pre", {
 					ref: rawRef,
 					id: contentsId,
-					className: css$22.stringRaw,
+					className: css$25.stringRaw,
 					"data-wrap": wrapped,
 					tabIndex: 0,
 					"aria-labelledby": field === void 0 ? void 0 : fieldId,
 					children: value
 				}),
 				!lastElement && jsx("span", {
-					className: css$22.punctuation,
+					className: css$25.punctuation,
 					children: ","
 				}),
 				jsxs("div", {
-					className: css$22.stringActions,
+					className: css$25.stringActions,
 					children: [
 						stringWrapping !== void 0 && jsx("button", {
 							type: "button",
-							className: css$22.actionButton,
+							className: css$25.actionButton,
 							"aria-label": stringWrapping.label,
 							title: stringWrapping.label,
 							"aria-pressed": wrapped,
@@ -5669,7 +6209,7 @@ function JsonString({ collapsedStringLines, stringWrapping, field, labels, lastE
 						}),
 						jsx("button", {
 							type: "button",
-							className: css$22.actionButton,
+							className: css$25.actionButton,
 							"aria-label": labels.collapseNode,
 							title: labels.collapseNode,
 							"aria-expanded": true,
@@ -5695,18 +6235,18 @@ function JsonString({ collapsedStringLines, stringWrapping, field, labels, lastE
 		});
 	}
 	return jsxs(Fragment, { children: [renderCopy?.(), jsx("span", {
-		className: css$22.stringField,
+		className: css$25.stringField,
 		"data-expanded": expanded,
 		children: jsxs("span", {
 			ref: contentRef,
 			id: contentsId,
-			className: css$22.stringText,
+			className: css$25.stringText,
 			children: [
 				truncated && jsx("span", {
-					className: css$22.stringToggleSlot,
+					className: css$25.stringToggleSlot,
 					children: jsxs("button", {
 						type: "button",
-						className: css$22.stringToggle,
+						className: css$25.stringToggle,
 						"aria-label": labels.expandNode,
 						"aria-expanded": false,
 						"aria-controls": contentsId,
@@ -5721,12 +6261,12 @@ function JsonString({ collapsedStringLines, stringWrapping, field, labels, lastE
 					})
 				}),
 				field !== void 0 && jsxs("span", {
-					className: css$22.label,
+					className: css$25.label,
 					children: [fieldText(field), ":"]
 				}),
 				primitiveValue(value),
 				!lastElement && jsx("span", {
-					className: css$22.punctuation,
+					className: css$25.punctuation,
 					children: ","
 				})
 			]
@@ -5757,7 +6297,7 @@ function JsonTreeNode({ collapsedStringLines, stringWrapping, field, initialExpa
 		}
 	};
 	const row = (children, ariaExpanded) => jsxs("div", {
-		className: css$22.row,
+		className: css$25.row,
 		role: "treeitem",
 		"aria-expanded": ariaExpanded,
 		onMouseOver: (event) => {
@@ -5792,7 +6332,7 @@ function JsonTreeNode({ collapsedStringLines, stringWrapping, field, initialExpa
 		}),
 		primitiveValue(value),
 		!lastElement && jsx("span", {
-			className: css$22.punctuation,
+			className: css$25.punctuation,
 			children: ","
 		})
 	] }));
@@ -5804,22 +6344,22 @@ function JsonTreeNode({ collapsedStringLines, stringWrapping, field, initialExpa
 			onToggle: toggle
 		}),
 		jsx("span", {
-			className: css$22.punctuation,
+			className: css$25.punctuation,
 			children: open
 		}),
 		jsx("span", {
-			className: css$22.punctuation,
+			className: css$25.punctuation,
 			children: close
 		}),
 		!lastElement && jsx("span", {
-			className: css$22.punctuation,
+			className: css$25.punctuation,
 			children: ","
 		})
 	] }));
 	return row(jsxs(Fragment, { children: [
 		jsx("span", {
 			ref: expanderRef,
-			className: clsx(css$22.expander, expanded ? css$22.collapseIcon : css$22.expandIcon),
+			className: clsx(css$25.expander, expanded ? css$25.collapseIcon : css$25.expandIcon),
 			"data-json-expander": true,
 			role: "button",
 			"aria-label": expanded ? labels.collapseNode : labels.expandNode,
@@ -5833,7 +6373,7 @@ function JsonTreeNode({ collapsedStringLines, stringWrapping, field, initialExpa
 			onKeyDown: onExpanderKeyDown
 		}),
 		jsxs("span", {
-			className: css$22.summary,
+			className: css$25.summary,
 			children: [
 				jsx(NodeField, {
 					field,
@@ -5841,11 +6381,11 @@ function JsonTreeNode({ collapsedStringLines, stringWrapping, field, initialExpa
 					onToggle: toggle
 				}),
 				jsx("span", {
-					className: css$22.preview,
+					className: css$25.preview,
 					children: previewValue(value, 0)
 				}),
 				!lastElement && jsx("span", {
-					className: css$22.punctuation,
+					className: css$25.punctuation,
 					children: ","
 				})
 			]
@@ -5853,7 +6393,7 @@ function JsonTreeNode({ collapsedStringLines, stringWrapping, field, initialExpa
 		expanded && jsx("ul", {
 			id: contentsId,
 			role: "group",
-			className: css$22.children,
+			className: css$25.children,
 			children: entries.map(([key, item], index) => jsx(JsonTreeNode, {
 				collapsedStringLines,
 				stringWrapping,
@@ -5985,17 +6525,17 @@ function JsonTree({ data, label, className, collapsedStringLines = 3, stringWrap
 		onClose: clearCopyTarget
 	}) : void 0;
 	return jsx("div", {
-		className: clsx(css$22.root, className),
+		className: clsx(css$25.root, className),
 		style: { "--json-tree-collapsed-lines": collapsedStringLines },
 		onMouseOver: handleRootMouseOver,
 		onMouseLeave: () => {
 			if (!copyStore.get()?.menuOpen) clearCopyTarget();
 		},
 		children: expandTopLevel ? jsxs("div", {
-			className: css$22.expandedTopLevel,
+			className: css$25.expandedTopLevel,
 			children: [
 				jsxs("div", {
-					className: clsx(css$22.row, css$22.topLevelBracket),
+					className: clsx(css$25.row, css$25.topLevelBracket),
 					"data-json-root-row": true,
 					onMouseOver: (event) => {
 						event.stopPropagation();
@@ -6008,13 +6548,13 @@ function JsonTree({ data, label, className, collapsedStringLines = 3, stringWrap
 						path: [],
 						value: data
 					}), jsx("span", {
-						className: css$22.punctuation,
+						className: css$25.punctuation,
 						children: rootOpen
 					})]
 				}),
 				jsx("div", {
 					"aria-label": label,
-					className: clsx(css$22.container, css$22.expandedTopLevelContainer),
+					className: clsx(css$25.container, css$25.expandedTopLevelContainer),
 					role: "tree",
 					children: rootEntries.map(([key, value], index) => jsx(JsonTreeNode, {
 						collapsedStringLines,
@@ -6032,16 +6572,16 @@ function JsonTree({ data, label, className, collapsedStringLines = 3, stringWrap
 					}, key))
 				}),
 				jsx("div", {
-					className: clsx(css$22.row, css$22.topLevelBracket),
+					className: clsx(css$25.row, css$25.topLevelBracket),
 					children: jsx("span", {
-						className: css$22.punctuation,
+						className: css$25.punctuation,
 						children: rootClose
 					})
 				})
 			]
 		}) : jsx("div", {
 			"aria-label": label,
-			className: css$22.container,
+			className: css$25.container,
 			role: "tree",
 			children: jsx(JsonTreeNode, {
 				collapsedStringLines,
@@ -6579,67 +7119,68 @@ function TerminalBlock({ command, cwd, home, output, exitCode, signal, running =
 	const { hidden, capped, headLines, tailLines } = headTailCap(lines.length, maxLines, expanded);
 	const body = !running || !empty;
 	return jsxs("div", {
-		className: clsx(css$23.block, className),
+		className: clsx(css$26.block, className),
 		"data-terminal": "",
 		"data-running": running ? "" : void 0,
 		"data-body": body ? "" : void 0,
 		children: [jsxs("div", {
-			className: css$23.header,
+			className: css$26.header,
 			children: [
 				jsxs("div", {
-					className: css$23.prompt,
+					className: css$26.prompt,
 					children: [jsx("span", {
-						className: css$23.runStateLabel,
+						className: css$26.runStateLabel,
 						children: state.label
 					}), commandLines.map((line, index) => jsxs("div", {
-						className: css$23.promptLine,
+						className: css$26.promptLine,
 						children: [
 							index === 0 && jsx(StateDot, {
 								state: state.state,
-								className: css$23.runState
+								className: css$26.runState
 							}),
 							jsx("span", {
-								className: css$23.cwd,
+								className: css$26.cwd,
 								children: index > 0 || cwd === void 0 ? "$" : promptLabel(cwd, home)
 							}),
-							jsx("span", {
-								className: css$23.command,
-								children: line
+							jsx(CommandText, {
+								className: css$26.command,
+								text: line,
+								label: copy.commandLine(index + 1)
 							})
 						]
 					}, index))]
 				}),
 				status !== void 0 && jsx(Pill, {
-					className: css$23.status,
+					className: css$26.status,
 					children: status
 				}),
 				!running && !empty && jsx("button", {
 					type: "button",
-					className: css$23.copyButton,
+					className: css$26.copyButton,
 					onClick: onCopy,
 					children: copied ? copy.copied : copy.copy
 				})
 			]
 		}), body && (empty ? jsx("div", {
-			className: css$23.empty,
+			className: css$26.empty,
 			children: copy.noOutput
 		}) : jsxs("div", {
-			className: css$23.output,
+			className: css$26.output,
 			children: [
 				(capped ? lines.slice(0, headLines) : lines).map((line, index) => jsx("div", {
-					className: css$23.line,
+					className: css$26.line,
 					children: renderLine$1(line)
 				}, index)),
 				hidden > 0 && jsx("button", {
 					type: "button",
-					className: css$23.expand,
+					className: css$26.expand,
 					"aria-expanded": expanded,
 					"aria-label": expanded ? copy.collapseAria : copy.expandAria(hidden),
 					onClick: onToggle,
 					children: expanded ? copy.collapse : copy.expand(hidden)
 				}),
 				capped && lines.slice(lines.length - tailLines).map((line, index) => jsx("div", {
-					className: css$23.line,
+					className: css$26.line,
 					children: renderLine$1(line)
 				}, index))
 			]
@@ -6812,6 +7353,13 @@ const regexEngine = createJavaScriptRegexEngine({
 	forgiving: true,
 	regexConstructor: (pattern) => defaultJavaScriptRegexConstructor(pattern, { lazyCompileLength: Number.POSITIVE_INFINITY })
 });
+/**
+* Lines at least this many UTF-16 units long render as one uncolored token.
+* TextMate scanning cost grows superlinearly with line length (a 20,000-unit
+* string literal blocks the main thread for seconds), and minified or
+* generated lines are where that length occurs.
+*/
+const TOKENIZE_MAX_LINE_LENGTH = 1e3;
 let singleton;
 /** Representative paths through every boot grammar, compiled before user content is timed. */
 const BOOT_GRAMMAR_WARMUPS = [
@@ -6919,7 +7467,8 @@ function highlightToHtml(code, lang) {
 	if (!ensureGrammar(resolved)) return void 0;
 	return highlighter().codeToHtml(code, {
 		lang: resolved,
-		theme: "css-variables"
+		theme: "css-variables",
+		tokenizeMaxLineLength: TOKENIZE_MAX_LINE_LENGTH
 	});
 }
 /** vscode-textmate FontStyle bits shiki folds into `text-decoration` values. */
@@ -7012,6 +7561,7 @@ var StreamingHighlightSession = class {
 		return highlighter().codeToTokensBase(text, {
 			lang: resolved,
 			theme: "css-variables",
+			tokenizeMaxLineLength: TOKENIZE_MAX_LINE_LENGTH,
 			...this.state === void 0 ? {} : { grammarState: this.state }
 		});
 	}
@@ -7091,7 +7641,8 @@ function highlightLines(code, lang) {
 	if (!ensureGrammar(resolved)) return void 0;
 	const { tokens } = highlighter().codeToTokens(code, {
 		lang: resolved,
-		theme: "css-variables"
+		theme: "css-variables",
+		tokenizeMaxLineLength: TOKENIZE_MAX_LINE_LENGTH
 	});
 	const last = tokens[tokens.length - 1];
 	return (tokens.length > 1 && last !== void 0 && last.length === 0 ? tokens.slice(0, -1) : tokens).map((line) => line.map((token) => ({
@@ -7217,51 +7768,51 @@ function ReadBlock({ label, labels, lines, totalLines, lang, maxLines = 16, clas
 	const tailLines = maxLines - headLines;
 	const windowed = lines.length < totalLines;
 	const rows = (slice) => slice.map(([line, spans]) => jsxs("div", {
-		className: css$24.line,
+		className: css$27.line,
 		children: [jsx("span", {
-			className: css$24.gutter,
+			className: css$27.gutter,
 			"aria-hidden": true,
 			children: line.number
 		}), jsx("span", {
-			className: css$24.content,
+			className: css$27.content,
 			children: spans === void 0 ? line.text : renderSpans(spans)
 		})]
 	}, line.number));
 	const paired = lines.map((line, index) => [line, highlighted?.[index]]);
 	return jsxs("div", {
 		ref: rootRef,
-		className: clsx(css$24.block, className),
+		className: clsx(css$27.block, className),
 		"data-read": "",
 		children: [jsxs("div", {
-			className: css$24.banner,
+			className: css$27.banner,
 			children: [jsx("div", {
-				className: css$24.label,
+				className: css$27.label,
 				children: label ?? ""
 			}), jsxs("div", {
-				className: css$24.action,
+				className: css$27.action,
 				children: [
 					windowed && jsx("span", {
-						className: css$24.count,
+						className: css$27.count,
 						children: labels.window(lines.length, totalLines)
 					}),
 					jsx("span", {
-						className: css$24.lang,
+						className: css$27.lang,
 						children: lang ?? ""
 					}),
 					lines.length > 0 && jsx("button", {
 						type: "button",
-						className: css$24.copyButton,
+						className: css$27.copyButton,
 						onClick: onCopy,
 						children: copied ? labels.copied : labels.copy
 					})
 				]
 			})]
 		}), jsxs("div", {
-			className: css$24.body,
+			className: css$27.body,
 			children: [
 				rows(capped ? paired.slice(0, headLines) : paired),
 				hidden > 0 && jsx(FoldToggle, {
-					className: css$24.expand,
+					className: css$27.expand,
 					expanded,
 					hidden,
 					labels,
@@ -7283,11 +7834,11 @@ function assertNever(value) {
 }
 /** The dim class per row kind (path/gap chrome vs the diff's own +/- colors). */
 const ROW_CLASS = {
-	path: css$25.path,
-	del: css$25.del,
-	add: css$25.add,
-	context: css$25.context,
-	gap: css$25.gap
+	path: css$28.path,
+	del: css$28.del,
+	add: css$28.add,
+	context: css$28.context,
+	gap: css$28.gap
 };
 /** Bound synchronous edit-graph search; one replacement consumes two edits. */
 const MAX_DIFF_EDIT_LENGTH = 256;
@@ -7425,37 +7976,37 @@ function DiffBlock({ diffs, labels, maxLines = 16, className }) {
 	const head = capped ? rows.slice(0, headLines) : rows;
 	const tail = capped ? rows.slice(rows.length - tailLines) : [];
 	return jsxs("div", {
-		className: clsx(css$25.block, className),
+		className: clsx(css$28.block, className),
 		"data-diff": "",
 		children: [
 			jsx("button", {
 				type: "button",
-				className: css$25.copyButton,
+				className: css$28.copyButton,
 				onClick: onCopy,
 				children: copied ? labels.copied : labels.copy
 			}),
 			jsxs("div", {
-				className: css$25.body,
+				className: css$28.body,
 				children: [
 					head.map((row, index) => jsx("div", {
-						className: clsx(css$25.line, ROW_CLASS[row.kind]),
+						className: clsx(css$28.line, ROW_CLASS[row.kind]),
 						children: row.text
 					}, index)),
 					hidden > 0 && jsx(FoldToggle, {
-						className: css$25.expand,
+						className: css$28.expand,
 						expanded,
 						hidden,
 						labels,
 						onToggle
 					}),
 					tail.map((row, index) => jsx("div", {
-						className: clsx(css$25.line, ROW_CLASS[row.kind]),
+						className: clsx(css$28.line, ROW_CLASS[row.kind]),
 						children: row.text
 					}, index))
 				]
 			}),
 			jsxs("div", {
-				className: css$25.footer,
+				className: css$28.footer,
 				children: [
 					"└ +",
 					added,
@@ -7591,56 +8142,56 @@ function SearchBlock(props) {
 	const tail = tailHeader === void 0 ? naturalTail : naturalTail.slice(1);
 	const renderRow = (row) => {
 		if (row.type === "path") return jsx("div", {
-			className: css$26.line,
+			className: css$29.line,
 			children: row.path
 		});
 		if (row.type === "match") return jsxs("div", {
-			className: css$26.line,
+			className: css$29.line,
 			children: [jsxs("span", {
-				className: css$26.lineNumber,
+				className: css$29.lineNumber,
 				children: [row.lineNumber, ": "]
 			}), row.line]
 		});
 		return jsxs("button", {
 			type: "button",
-			className: css$26.fileHeader,
+			className: css$29.fileHeader,
 			"aria-expanded": !row.collapsed,
 			onClick: () => {
 				toggleFile(row.index);
 			},
 			children: [jsx("span", {
-				className: css$26.filePath,
+				className: css$29.filePath,
 				children: row.path
 			}), jsx("span", {
-				className: css$26.fileCount,
+				className: css$29.fileCount,
 				children: row.count
 			})]
 		});
 	};
 	return jsxs("div", {
-		className: clsx(css$26.block, className),
+		className: clsx(css$29.block, className),
 		"data-search": props.kind,
 		children: [jsxs("div", {
-			className: css$26.header,
+			className: css$29.header,
 			children: [jsx("span", {
-				className: css$26.summary,
+				className: css$29.summary,
 				children: summaryText(props, shown, truncated, total)
 			}), !empty && jsx("button", {
 				type: "button",
-				className: css$26.copyButton,
+				className: css$29.copyButton,
 				onClick: onCopy,
 				children: copied ? props.labels.copied : props.labels.copy
 			})]
 		}), empty ? jsx("div", {
-			className: css$26.empty,
+			className: css$29.empty,
 			children: props.labels.noResults
 		}) : jsxs("div", {
-			className: css$26.body,
+			className: css$29.body,
 			children: [
 				head.map((row) => jsx("div", { children: renderRow(row) }, rowKey(row))),
 				hidden > 0 && jsx("button", {
 					type: "button",
-					className: css$26.expand,
+					className: css$29.expand,
 					"aria-expanded": expanded,
 					"aria-label": expanded ? props.labels.collapseAria : props.labels.expandAria(hidden),
 					onClick: onToggle,
@@ -8468,7 +9019,7 @@ function CodeBlock({ code, lang, streaming, className, contentRef, lineNumbers =
 		});
 	}, [copied, trimmed]);
 	const body = streamedBody !== void 0 ? streamedBody : html === void 0 ? jsx("pre", {
-		className: css$27.plain,
+		className: css$30.plain,
 		children: jsx("code", { children: sourceLines === void 0 ? trimmed : sourceLines.map((line, index) => jsxs(Fragment$1, { children: [index > 0 && "\n", jsx("span", {
 			className: "line",
 			children: line
@@ -8476,22 +9027,22 @@ function CodeBlock({ code, lang, streaming, className, contentRef, lineNumbers =
 	}) : jsx("div", { dangerouslySetInnerHTML: { __html: html } });
 	return jsxs("div", {
 		ref: rootRef,
-		className: clsx(css$27.block, "md-code-block", lineNumbers && css$27.numbered, className),
+		className: clsx(css$30.block, "md-code-block", lineNumbers && css$30.numbered, className),
 		"data-line-numbers": lineNumbers || void 0,
 		style: sourceLines === void 0 ? void 0 : { "--dsl-code-block-line-number-width": `${Math.max(2, String(sourceLines.length).length)}ch` },
 		children: [showHeader && jsx("div", {
-			className: css$27.bannerWrap,
+			className: css$30.bannerWrap,
 			children: jsxs("div", {
-				className: css$27.banner,
+				className: css$30.banner,
 				"data-code-block-banner": true,
 				children: [jsx("div", {
-					className: css$27.infostring,
+					className: css$30.infostring,
 					children: lang ?? ""
 				}), jsx("div", {
-					className: css$27.action,
+					className: css$30.action,
 					children: jsx("button", {
 						type: "button",
-						className: css$27.copyButton,
+						className: css$30.copyButton,
 						onClick: onCopy,
 						children: copied ? copiedLabel : copyLabel
 					})
@@ -8499,7 +9050,7 @@ function CodeBlock({ code, lang, streaming, className, contentRef, lineNumbers =
 			})
 		}), jsx("div", {
 			ref: contentRef,
-			className: css$27.content,
+			className: css$30.content,
 			"data-code-block-content": true,
 			children: body
 		})]
@@ -8650,15 +9201,15 @@ function MermaidDiagram({ code, copyLabel, copiedLabel, diagramLabel, enlargedLa
 		};
 	}, [code, domId]);
 	if (state.status === "loading") return jsx("div", {
-		className: css$28.stage,
+		className: css$31.stage,
 		"data-mermaid-loading": true,
 		"aria-hidden": "true"
 	});
 	if (state.status === "error") return jsxs("div", {
-		className: css$28.error,
+		className: css$31.error,
 		role: "alert",
 		children: [jsx("span", {
-			className: css$28.errorLine,
+			className: css$31.errorLine,
 			children: state.message
 		}), jsx(CodeBlock, {
 			code: `${code}\n`,
@@ -8667,7 +9218,7 @@ function MermaidDiagram({ code, copyLabel, copiedLabel, diagramLabel, enlargedLa
 		})]
 	});
 	const stage = jsx("div", {
-		className: css$28.stage,
+		className: css$31.stage,
 		"data-mermaid-diagram": true,
 		dangerouslySetInnerHTML: { __html: state.svg },
 		onClick: () => {
@@ -8682,13 +9233,13 @@ function MermaidDiagram({ code, copyLabel, copiedLabel, diagramLabel, enlargedLa
 	});
 	if (zoom === null) return stage;
 	return jsxs(Fragment, { children: [stage, createPortal(jsx("div", {
-		className: css$28.zoomOverlay,
+		className: css$31.zoomOverlay,
 		onClick: () => {
 			setZoom(null);
 		},
 		role: "presentation",
 		children: jsx("div", {
-			className: css$28.zoomStage,
+			className: css$31.zoomStage,
 			dangerouslySetInnerHTML: { __html: zoom },
 			onClick: (event) => {
 				event.stopPropagation();
@@ -8882,25 +9433,25 @@ function ImageLightbox({ src, alt, labels, onClose }) {
 		};
 	}, [onClose]);
 	return createPortal(jsxs("div", {
-		className: css$29.backdrop,
+		className: css$32.backdrop,
 		role: "dialog",
 		"aria-modal": "true",
 		"aria-label": labels.dialog,
 		children: [
 			jsx("div", {
-				className: css$29.mask,
+				className: css$32.mask,
 				"aria-hidden": "true",
 				onMouseDown: onClose
 			}),
 			jsx("img", {
-				className: css$29.image,
+				className: css$32.image,
 				src,
 				alt
 			}),
 			jsx("button", {
 				ref: closeRef,
 				type: "button",
-				className: css$29.close,
+				className: css$32.close,
 				"aria-label": labels.close,
 				onClick: onClose,
 				children: jsx(IconCloseOutline16, { size: 16 })
@@ -8927,14 +9478,14 @@ function ImagePreview({ src, alt, loadingLabel, failedLabel }) {
 function Preview({ src, alt, loadingLabel, failedLabel }) {
 	const [state, setState] = useState("loading");
 	return jsxs("span", {
-		className: css$30.frame,
+		className: css$33.frame,
 		children: [state !== "failed" && jsx("img", {
 			src,
 			alt,
 			loading: "lazy",
 			decoding: "async",
 			referrerPolicy: "no-referrer",
-			className: css$30.image,
+			className: css$33.image,
 			"data-ready": state === "ready" || void 0,
 			onLoad: () => {
 				setState("ready");
@@ -8943,7 +9494,7 @@ function Preview({ src, alt, loadingLabel, failedLabel }) {
 				setState("failed");
 			}
 		}), state !== "ready" && jsxs("span", {
-			className: css$30.status,
+			className: css$33.status,
 			role: "status",
 			children: [state === "loading" && jsx(IconLoadingOutline16, { size: 16 }), jsx("span", { children: state === "loading" ? loadingLabel : failedLabel })]
 		})]
@@ -9714,7 +10265,7 @@ function SafeLink({ url, label, className }) {
 		children: [jsx(LinkIcon, {
 			kind: "url",
 			href,
-			className: css$31.linkIcon
+			className: css$34.linkIcon
 		}), label]
 	});
 }
@@ -9729,20 +10280,20 @@ function SafeLink({ url, label, className }) {
 */
 function SourceItem({ source, ordinal }) {
 	return jsxs("li", {
-		className: css$31.source,
+		className: css$34.source,
 		value: ordinal,
 		children: [
 			jsx(SafeLink, {
 				url: source.url,
 				label: linkLabel(source.url, source.title),
-				className: css$31.sourceLink
+				className: css$34.sourceLink
 			}),
 			source.snippet !== void 0 && source.snippet !== "" && jsx("div", {
-				className: css$31.snippet,
+				className: css$34.snippet,
 				children: source.snippet
 			}),
 			source.publishedAt !== void 0 && source.publishedAt !== "" && jsx("div", {
-				className: css$31.published,
+				className: css$34.published,
 				children: source.publishedAt
 			})
 		]
@@ -9757,28 +10308,28 @@ function SourceItem({ source, ordinal }) {
 function WebSearchBlock({ answer, sources, truncated, labels, className }) {
 	const empty = (answer === void 0 || answer === "") && sources.length === 0;
 	return jsxs("div", {
-		className: clsx(css$31.block, className),
+		className: clsx(css$34.block, className),
 		"data-web": "search",
 		children: [
 			answer !== void 0 && answer !== "" && jsx("div", {
-				className: css$31.answer,
+				className: css$34.answer,
 				children: jsx(MarkdownText, {
 					text: answer,
 					labels: labels.markdown
 				})
 			}),
 			empty ? jsx("div", {
-				className: css$31.empty,
+				className: css$34.empty,
 				children: labels.noResults
 			}) : jsx("ol", {
-				className: css$31.sources,
+				className: css$34.sources,
 				children: sources.map((source, index) => jsx(SourceItem, {
 					source,
 					ordinal: index + 1
 				}, index))
 			}),
 			truncated && jsx("div", {
-				className: css$31.truncated,
+				className: css$34.truncated,
 				children: labels.sourcesTruncated
 			})
 		]
@@ -9791,23 +10342,23 @@ function WebSearchBlock({ answer, sources, truncated, labels, className }) {
 */
 function WebFetchBlock({ url, statusCode, truncated, labels, className }) {
 	return jsxs("div", {
-		className: clsx(css$31.block, css$31.fetch, className),
+		className: clsx(css$34.block, css$34.fetch, className),
 		"data-web": "fetch",
 		children: [jsx(SafeLink, {
 			url,
 			label: url,
-			className: css$31.fetchUrl
+			className: css$34.fetchUrl
 		}), jsxs("div", {
-			className: css$31.fetchMeta,
+			className: css$34.fetchMeta,
 			children: [jsxs("span", {
-				className: css$31.status,
+				className: css$34.status,
 				children: [
 					labels.http,
 					" ",
 					statusCode
 				]
 			}), truncated && jsx("span", {
-				className: css$31.truncated,
+				className: css$34.truncated,
 				children: labels.contentTruncated
 			})]
 		})]
@@ -9841,10 +10392,10 @@ function JsonBlock({ label, payload, defaultOpen = false, truncatedLabel }) {
 		truncatedLabel
 	]);
 	return jsxs("div", {
-		className: css$32.root,
+		className: css$35.root,
 		children: [jsxs("button", {
 			type: "button",
-			className: css$32.toggle,
+			className: css$35.toggle,
 			onClick: () => {
 				setOpen((v) => !v);
 			},
@@ -9854,7 +10405,7 @@ function JsonBlock({ label, payload, defaultOpen = false, truncatedLabel }) {
 				label
 			]
 		}), open && jsx("pre", {
-			className: css$32.body,
+			className: css$35.body,
 			children: body
 		})]
 	});
@@ -9944,17 +10495,17 @@ function MenuGroup({ label, children }) {
 		role: "group",
 		"aria-labelledby": headingId,
 		"data-menu-group": "",
-		className: css$33.group,
+		className: css$36.group,
 		children: [
 			jsx("span", {
 				"aria-hidden": "true",
 				"data-menu-group-start": "",
-				className: css$33.start
+				className: css$36.start
 			}),
 			jsx("div", {
 				id: headingId,
 				"data-menu-group-heading": "",
-				className: css$33.heading,
+				className: css$36.heading,
 				children: label
 			}),
 			children
@@ -10070,20 +10621,20 @@ const MenuSurface = forwardRef(function MenuSurface({ compact = false, className
 		...props,
 		ref,
 		"data-menu-material": "translucent",
-		className: clsx(css$34.surface, compact && css$34.compact, className),
+		className: clsx(css$37.surface, compact && css$37.compact, className),
 		style: {
 			...style,
 			...anchorStyle
 		},
 		children: [jsx("div", {
 			"aria-hidden": "true",
-			className: css$34.material
+			className: css$37.material
 		}), children]
 	}), createPortal(jsx("div", {
 		ref: backingRef,
 		"aria-hidden": "true",
 		"data-menu-backing": "",
-		className: clsx(css$34.backing, compact && css$34.compact),
+		className: clsx(css$37.backing, compact && css$37.compact),
 		style: {
 			...anchorStyle,
 			visibility: style?.visibility
@@ -10091,6 +10642,6 @@ const MenuSurface = forwardRef(function MenuSurface({ compact = false, className
 	}), document.body)] });
 });
 //#endregion
-export { Button, Checkbox, CodeBlock, ConnectionIndicator, DEFAULT_DIFF_MAX_LINES, DEFAULT_READ_MAX_LINES, DEFAULT_SEARCH_MAX_LINES, DEFAULT_TERMINAL_MAX_LINES, DiffBlock, DisclosureRow, FileTypeIcon, HoverCard, IconAgentPresetOutline16, IconAlarmClockOutline16, IconApiOutline14, IconArchiveOutline20, IconBranchOutline16, IconBrowseOutline16, IconCheckOutline14, IconCheckOutline16, IconChecklistOutline14, IconChevronDownOutline14, IconChevronLeftOutline14, IconChevronRightOutline14, IconChevronUpOutline14, IconClockOutline16, IconCloseFill14, IconCloseOutline16, IconCodeOutline16, IconCompactOutline16, IconContextInjectionOutline16, IconCopyOutline16, IconCordisPluginOutline14, IconDarkOutline16, IconDataOutline16, IconDatabaseOutline16, IconDislikeFill16, IconDislikeOutline16, IconDownloadOutline16, IconEditOutline16, IconEllipsisOutline16, IconEnhanceOutline16, IconFolderClose16, IconFolderOpen16, IconFolderOpenOutline16, IconFollowsystemOutline16, IconFullscreenOutline16, IconGaugeOutline16, IconGlobeOutline14, IconGoalOutline16, IconInfoOutline14, IconInspectOutline12, IconLightOutline16, IconLikeFill16, IconLikeOutline16, IconLinkOutline14, IconLinkOutline16, IconListPenOutline16, IconLoadingOutline16, IconLogoutOutline16, IconMicrophoneOutline16, IconNewChatOutline16, IconPanelLeftOutline16, IconPaperPlaneOutline14, IconPaperclipOutline16, IconPauseOutline16, IconPersonalizationOutline16, IconPinFillRegular, IconPinOutlineRegular, IconPlanOutline14, IconPlayOutline16, IconPluginPinwheelOutline16, IconPlusOutline16, IconProjectAddOutline16, IconQuestionOutline14, IconQueueOutline14, IconRefreshOutline14, IconRefreshOutline16, IconRightUpOutline14, IconRightUpOutline16, IconSearchOutline16, IconSendOutline14, IconSendOutline16, IconSettingsOutline14, IconSettingsOutline16, IconShareOutline16, IconShieldOutline16, IconSkillOutline16, IconSparkle16, IconStopFill16, IconTerminalOutline16, IconThinkOutline14, IconThinkOutline16, IconTrashOutline16, IconTreeCorner8x10, IconTriangleRightFill14, IconUserOutline16, IconWarningOutline16, IconWrapLinesOutline16, ImageLightbox, Input, JsonBlock, JsonTree, LinkIcon, MarkdownDelegateProvider, MarkdownText, Menu, MenuGroup, MenuItemButton, MenuSurface, Modal, OnboardingSurface, PathLabel, Pill, QilinSeal, ReadBlock, ReferenceIcon, RiskConfirmation, SHIELD_OUTLINE_PATH, SHIELD_OUTLINE_STROKE, SearchBlock, SegmentedControl, ShortcutKeys, StateDot, Switch, Tag, TerminalBlock, TextShimmer, Toast, Tooltip, WebBlock, classifyFileType, classifyLinkPath, closeTopModal, diffTotals, extractMarkdownPlainText, fileExtension, fileSizeRoundedText, fileSizeText, focusWithoutRing, isBehindModal, isDarwinDesktop, modalSelector, observeComposition, observeStickyMenuGroups, overlayTopMargin, projectUserText, rankByName, relativeTime, useAnchoredMaxHeight, useAnchoredPosition, useCopyFeedback, useDismissOnOutsidePointer, useModalLayer, writeClipboard };
+export { Button, Checkbox, CodeBlock, CommandText, ConnectionIndicator, DEFAULT_DIFF_MAX_LINES, DEFAULT_READ_MAX_LINES, DEFAULT_SEARCH_MAX_LINES, DEFAULT_TERMINAL_MAX_LINES, DiffBlock, DisclosureRow, FileTypeIcon, HoverCard, IconAgentPresetOutline16, IconAlarmClockOutline16, IconApiOutline14, IconArchiveOutline20, IconBranchOutline16, IconBrowseOutline16, IconCheckOutline14, IconCheckOutline16, IconChecklistOutline14, IconChevronDownOutline14, IconChevronLeftOutline14, IconChevronRightOutline14, IconChevronUpOutline14, IconClockOutline16, IconCloseFill14, IconCloseOutline16, IconCodeOutline16, IconCompactOutline16, IconContextInjectionOutline16, IconCopyOutline16, IconCordisPluginOutline14, IconDarkOutline16, IconDataOutline16, IconDatabaseOutline16, IconDislikeFill16, IconDislikeOutline16, IconDownloadOutline16, IconEditOutline16, IconEllipsisOutline16, IconEnhanceOutline16, IconFolderClose16, IconFolderOpen16, IconFolderOpenOutline16, IconFollowsystemOutline16, IconFullscreenOutline16, IconGaugeOutline16, IconGlobeOutline14, IconGoalOutline16, IconInfoOutline14, IconInspectOutline12, IconLightOutline16, IconLikeFill16, IconLikeOutline16, IconLinkOutline14, IconLinkOutline16, IconListPenOutline16, IconLoadingOutline16, IconLogoutOutline16, IconMicrophoneOutline16, IconNewChatOutline16, IconPanelLeftOutline16, IconPaperPlaneOutline14, IconPaperclipOutline16, IconPauseOutline16, IconPersonalizationOutline16, IconPinFillRegular, IconPinOutlineRegular, IconPlanOutline14, IconPlayOutline16, IconPluginPinwheelOutline16, IconPlusOutline16, IconProjectAddOutline16, IconQuestionOutline14, IconQueueOutline14, IconRefreshOutline14, IconRefreshOutline16, IconRightUpOutline14, IconRightUpOutline16, IconSearchOutline16, IconSendOutline14, IconSendOutline16, IconSettingsOutline14, IconSettingsOutline16, IconShareOutline16, IconShieldOutline16, IconSkillOutline16, IconSparkle16, IconStopFill16, IconTerminalOutline16, IconThinkOutline14, IconThinkOutline16, IconTrashOutline16, IconTreeCorner8x10, IconTriangleRightFill14, IconUserOutline16, IconWarningOutline16, IconWrapLinesOutline16, ImageLightbox, Input, JsonBlock, JsonTree, LinkIcon, MarkdownDelegateProvider, MarkdownText, Menu, MenuGroup, MenuItemButton, MenuSurface, Modal, OnboardingSurface, PathLabel, Pill, QilinSeal, ReadBlock, ReferenceIcon, RiskConfirmation, SHIELD_OUTLINE_PATH, SHIELD_OUTLINE_STROKE, SearchBlock, SegmentedControl, SettingsForm, SettingsFormModel, SettingsSecretField, SettingsValueField, ShortcutKeys, StateDot, Switch, Tag, TerminalBlock, TextShimmer, Toast, Tooltip, WebBlock, classifyFileType, classifyLinkPath, closeTopModal, diffTotals, extractMarkdownPlainText, fileExtension, fileSizeRoundedText, fileSizeText, focusWithoutRing, isBehindModal, isDarwinDesktop, modalSelector, observeComposition, observeStickyMenuGroups, overlayTopMargin, projectUserText, rankByName, relativeTime, settingsNumberField, settingsTextField, useAnchoredMaxHeight, useAnchoredPosition, useCopyFeedback, useDismissOnOutsidePointer, useModalLayer, watchDarwinDesktop, writeClipboard };
 
 //# sourceMappingURL=index.js.map