zidane-ui 9.0.4 → 9.1.3

package/dist/settings/sections/extensions/ExtensionConfigRows.js

@@ -0,0 +1,349 @@
+import { IconButton } from "../../../components/IconButton.js";
+import { BTN_SECONDARY } from "../../../components/button.js";
+import { HostRow, INPUT_CLASS, MetaChip, ROW_BUTTON_CLASS, ROW_CLASS, RowText, Switch } from "../../../components/Form.js";
+import { SegmentSpinner } from "../../../components/SegmentSpinner.js";
+import { useComposerModelName } from "../../../chat/composer/use-composer-stores.js";
+import { useSectionLabels } from "../use-section-labels.js";
+import { ModelListPicker } from "../models/ModelListPicker.js";
+import { DEFAULT_EXTENSION_OPTIONS_LABELS } from "./options-labels.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+//#region src/settings/sections/extensions/ExtensionConfigRows.tsx
+/**
+* The rows of an extension's settings, for every screen that draws them:
+* Settings › Extensions (`ExtensionOptionsSection`) and the extensions'
+* settings wire (`zidane-ui/extensions`' `SettingsWireForm`: a form dialog, a
+* settings page).
+*
+* `ExtensionConfigRow` draws one item by type: a boolean a switch row, an enum
+* a row that cycles its options, a number or string a free input committing on
+* blur or Enter (a multiline string a text area under its label), a `model`
+* item a picker row over the composer's catalog (with no catalog, the free
+* input, as in the TUI). A locked item (set by a declarative config entry)
+* shows its value, disabled, with the `lock` chip the caller passes.
+* `ExtensionActionRow` is an action row: its status line and Run button.
+* `extensionConfigValue` is the value a row shows for what is stored,
+* mirroring the core resolver's default-first checks.
+*/
+/** The extension options' strings, overridable through `LabelsProvider`. */
+function useExtensionOptionsLabels() {
+	return useSectionLabels(DEFAULT_EXTENSION_OPTIONS_LABELS);
+}
+/**
+* One action row: label and description, a live status line, and a Run button.
+*
+* @param props - The action's label and description, its status, whether it runs, and the run.
+*/
+function ExtensionActionRow({ label, description, status, busy, disabled, needsScope, onRun }) {
+	const l = useExtensionOptionsLabels();
+	const hint = needsScope ? l.extensionOptionsNeedsScope(needsScope) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: ROW_CLASS,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex-1 min-w-0",
+			children: [
+				/* @__PURE__ */ jsx(RowText, {
+					label,
+					description
+				}),
+				status?.text && /* @__PURE__ */ jsx("div", {
+					className: `text-xs break-words ${status.error ? "text-zg-danger" : "text-[var(--zg-text-muted)]"}`,
+					children: status.text
+				}),
+				hint && /* @__PURE__ */ jsx("div", {
+					className: "text-xs text-[var(--zg-text-muted)]",
+					children: hint
+				})
+			]
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: onRun,
+			disabled: disabled || busy || Boolean(needsScope),
+			title: hint,
+			className: BTN_SECONDARY,
+			children: busy ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SegmentSpinner, {
+				size: "xs",
+				label: l.extensionOptionsRunning
+			}), l.extensionOptionsRunning] }) : l.extensionOptionsRun
+		})]
+	});
+}
+/**
+* One setting's row, by its type.
+*
+* @param props - The item, its value, the write, the model catalog and the lock.
+*/
+function ExtensionConfigRow({ item, value, onWrite, modelCatalog = null, modelCatalogFailed = false, locked = false, lock = null, switchRole = false, maskSecrets = false }) {
+	if (item.type === "boolean") return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: () => onWrite(!value),
+		disabled: locked,
+		className: ROW_BUTTON_CLASS,
+		...switchRole ? {
+			role: "switch",
+			"aria-checked": value === true,
+			"aria-label": item.label
+		} : {},
+		children: [
+			/* @__PURE__ */ jsx(RowText, {
+				label: item.label,
+				description: item.description
+			}),
+			lock,
+			/* @__PURE__ */ jsx(Switch, { on: value })
+		]
+	});
+	if (item.type === "enum") {
+		const options = item.options;
+		const current = options.find((o) => o.value === value);
+		const cycle = () => {
+			const idx = options.findIndex((o) => o.value === value);
+			const next = options[(idx + 1) % options.length];
+			if (next) onWrite(next.value);
+		};
+		return /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: cycle,
+			disabled: locked,
+			className: ROW_BUTTON_CLASS,
+			children: [
+				/* @__PURE__ */ jsx(RowText, {
+					label: item.label,
+					description: item.description
+				}),
+				lock,
+				/* @__PURE__ */ jsx(MetaChip, {
+					tone: "text",
+					className: "!h-6 !px-2.5",
+					children: current?.label ?? String(value)
+				})
+			]
+		});
+	}
+	if (item.type === "model" && !locked) {
+		if (!(modelCatalogFailed || modelCatalog !== null && modelCatalog.length === 0)) return /* @__PURE__ */ jsx(ExtConfigModelRow, {
+			item,
+			value: String(value),
+			catalog: modelCatalog,
+			onWrite
+		});
+	}
+	return /* @__PURE__ */ jsx(ExtConfigInputRow, {
+		item,
+		value,
+		onWrite,
+		locked,
+		lock,
+		maskSecrets
+	});
+}
+const STACKED_ROW_CLASS = "flex flex-col items-stretch gap-2 px-3 py-2";
+/**
+* Placeholder for free string / model inputs — the canonical
+* `ExtensionConfigStringItem` has no `placeholder` field, so derive one:
+* empty-default items read "Empty — <first sentence of the description>"
+* (clamped ~80 chars), non-empty defaults just echo the description.
+*/
+function derivedPlaceholder(item, l) {
+	const desc = item.description?.trim();
+	if (!desc) return;
+	const firstSentence = desc.split(/(?<=[.!?])\s+/)[0] ?? desc;
+	const text = item.default === "" ? l.extensionOptionsEmpty(firstSentence) : firstSentence;
+	return text.length > 80 ? `${text.slice(0, 79).trimEnd()}…` : text;
+}
+/** Split a stored model-config value (comma-separated ids) into clean ids. */
+function parseStoredModelIds(value) {
+	return value.split(",").map((s) => s.trim()).filter((s) => s.length > 0);
+}
+/**
+* `type: 'model'` row — current value as id chips (or `(unset)` when empty,
+* matching the TUI's resting render), click opens the `ModelListPicker`
+* popover in place so Settings stays open. Persists the exact shape the TUI
+* writes — `ids.join(', ')` — which git-flow's `parseModelList` reader
+* splits/trims back, so TUI and GUI round-trip each other's values.
+*/
+function ExtConfigModelRow({ item, value, catalog, onWrite }) {
+	const [open, setOpen] = useState(false);
+	const [anchor, setAnchor] = useState(null);
+	const containerRef = useRef(null);
+	const pickerRef = useRef(null);
+	const ids = useMemo(() => parseStoredModelIds(value), [value]);
+	const l = useExtensionOptionsLabels();
+	const modelName = useComposerModelName();
+	useEffect(() => {
+		if (!open) return;
+		const onDown = (e) => {
+			const target = e.target;
+			if (containerRef.current && !containerRef.current.contains(target) && !pickerRef.current?.contains(target)) setOpen(false);
+		};
+		document.addEventListener("mousedown", onDown);
+		return () => document.removeEventListener("mousedown", onDown);
+	}, [open]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: "relative",
+		children: [/* @__PURE__ */ jsxs(HostRow, { children: [
+			/* @__PURE__ */ jsx(RowText, {
+				label: item.label,
+				description: item.description
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-row-control": true,
+				onClick: () => {
+					setAnchor(containerRef.current);
+					setOpen((o) => !o);
+				},
+				className: "zg-press-subtle group flex items-center gap-1 flex-wrap justify-end max-w-[60%] bg-transparent border-0 p-0 cursor-pointer",
+				"aria-haspopup": "listbox",
+				"aria-expanded": open,
+				children: ids.length === 0 ? /* @__PURE__ */ jsx(MetaChip, {
+					className: "!h-6 !px-2.5 group-hover:!text-[var(--zg-text)]",
+					children: l.extensionOptionsUnset
+				}) : ids.map((id) => /* @__PURE__ */ jsx(MetaChip, {
+					tone: "text",
+					className: "!h-6 !px-2.5",
+					title: id,
+					children: modelName(id)
+				}, id))
+			}),
+			ids.length > 0 && /* @__PURE__ */ jsx(IconButton, {
+				icon: "i-ph-x",
+				label: l.extensionOptionsReset(item.label),
+				title: l.extensionOptionsResetTitle,
+				size: "sm",
+				onClick: () => {
+					onWrite(item.default);
+					setOpen(false);
+				}
+			})
+		] }), /* @__PURE__ */ jsx(ModelListPicker, {
+			ref: pickerRef,
+			open,
+			anchor,
+			catalog,
+			multi: item.multi === true,
+			selected: ids,
+			onPick: (next) => onWrite(next.join(", ")),
+			onClose: () => setOpen(false)
+		})]
+	});
+}
+function ExtConfigInputRow({ item, value, onWrite, locked, lock, maskSecrets }) {
+	const l = useExtensionOptionsLabels();
+	const [draft, setDraft] = useState(String(value));
+	const [seeded, setSeeded] = useState(value);
+	if (seeded !== value) {
+		setSeeded(value);
+		setDraft(String(value));
+	}
+	const commit = () => {
+		if (item.type === "number") {
+			const n = Number(draft.trim());
+			if (!Number.isFinite(n)) {
+				setDraft(String(value));
+				return;
+			}
+			let clamped = n;
+			if (item.min !== void 0) clamped = Math.max(item.min, clamped);
+			if (item.max !== void 0) clamped = Math.min(item.max, clamped);
+			if (item.step !== void 0 && item.step > 0) {
+				const base = item.min ?? 0;
+				clamped = base + Math.round((clamped - base) / item.step) * item.step;
+				if (item.max !== void 0) clamped = Math.min(item.max, clamped);
+				if (item.min !== void 0) clamped = Math.max(item.min, clamped);
+			}
+			onWrite(clamped);
+			setDraft(String(clamped));
+			return;
+		}
+		if (item.type === "string" && item.pattern) try {
+			if (!new RegExp(item.pattern).test(draft)) {
+				setDraft(String(value));
+				return;
+			}
+		} catch {}
+		onWrite(draft);
+	};
+	const placeholder = item.type === "number" ? void 0 : derivedPlaceholder(item, l);
+	if (item.type === "string" && item.multiline) return /* @__PURE__ */ jsxs("div", {
+		className: STACKED_ROW_CLASS,
+		children: [lock ? /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx(RowText, {
+				label: item.label,
+				description: item.description
+			}), lock]
+		}) : /* @__PURE__ */ jsx(RowText, {
+			label: item.label,
+			description: item.description
+		}), /* @__PURE__ */ jsx("textarea", {
+			value: draft,
+			onChange: (e) => setDraft(e.target.value),
+			onBlur: commit,
+			rows: 4,
+			disabled: locked,
+			placeholder,
+			"aria-label": item.label,
+			className: "zg-well w-full px-2.5 py-2 text-zg-ui leading-relaxed resize-y placeholder:text-[var(--zg-text-subtle)]"
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: ROW_CLASS,
+		children: [
+			/* @__PURE__ */ jsx(RowText, {
+				label: item.label,
+				description: item.description
+			}),
+			lock,
+			/* @__PURE__ */ jsx("input", {
+				"aria-label": item.label,
+				type: item.type === "number" ? "number" : maskSecrets && item.type === "string" && item.secret ? "password" : "text",
+				value: draft,
+				disabled: locked,
+				onChange: (e) => setDraft(e.target.value),
+				onBlur: commit,
+				onKeyDown: (e) => {
+					if (e.key === "Enter") {
+						e.preventDefault();
+						e.currentTarget.blur();
+					}
+				},
+				placeholder,
+				...item.type === "number" ? {
+					...item.min !== void 0 ? { min: item.min } : {},
+					...item.max !== void 0 ? { max: item.max } : {},
+					...item.step !== void 0 ? { step: item.step } : {}
+				} : {},
+				className: `${INPUT_CLASS} !w-40 shrink-0`
+			})
+		]
+	});
+}
+/**
+* The value a row shows for what is stored — mirrors the core resolver's
+* default-first checks (type, number range, string pattern, enum membership)
+* so the row never shows a value the agent would actually ignore. The author
+* `validate` can't cross the IPC boundary, so it's the one check not mirrored
+* here; the authoritative default-first read still happens agent-side via the
+* core resolver.
+*
+* @param item - The setting.
+* @param persisted - What is stored for it, if anything.
+*/
+function extensionConfigValue(item, persisted) {
+	switch (item.type) {
+		case "boolean": return typeof persisted === "boolean" ? persisted : item.default;
+		case "number": return typeof persisted === "number" && Number.isFinite(persisted) && (item.min === void 0 || persisted >= item.min) && (item.max === void 0 || persisted <= item.max) ? persisted : item.default;
+		case "string":
+			if (typeof persisted !== "string") return item.default;
+			if (item.pattern) try {
+				if (!new RegExp(item.pattern).test(persisted)) return item.default;
+			} catch {}
+			return persisted;
+		case "enum": return typeof persisted === "string" && item.options.some((o) => o.value === persisted) ? persisted : item.default;
+		case "model": return typeof persisted === "string" ? persisted : item.default;
+	}
+}
+//#endregion
+export { ExtensionActionRow, ExtensionConfigRow, extensionConfigValue, useExtensionOptionsLabels };

package/dist/settings/sections/extensions/ExtensionOptionsSection.d.ts

@@ -1,9 +1,6 @@
 import { SettingsSearchHit } from "../../headless/search.js";
-import { ExtensionOptionsLabels } from "./options-labels.js";
 import { CSSProperties } from "react";
 //#region src/settings/sections/extensions/ExtensionOptionsSection.d.ts
-/** The extension options' strings, overridable through `LabelsProvider`. */
-declare function useExtensionOptionsLabels(): ExtensionOptionsLabels;
 /**
  * The extension options and actions of a folder as search hits on the
  * Extensions section (`SettingsShell`'s `extraSearch`).
@@ -31,4 +28,4 @@ interface ExtensionOptionsSectionProps {
  */
 declare function ExtensionOptionsSection({ cwd, visible, className, style }: ExtensionOptionsSectionProps): import("react").JSX.Element;
 //#endregion
-export { ExtensionOptionsSection, ExtensionOptionsSectionProps, useExtensionOptionsLabels, useExtensionOptionsSearch };
+export { ExtensionOptionsSection, ExtensionOptionsSectionProps, useExtensionOptionsSearch };