@webskill/sdk 0.4.0 → 0.5.0

package/dist/{catalogComponents-KsujmL4b-Clx1kCnU.js → catalogComponents-DV7cPpUm-C77AEEx9.js}

@@ -1,10 +1,10 @@
 import { a as __require, i as __reExport, n as __esmMin, o as __toCommonJS, r as __exportAll$2, s as __toESM$1, t as __commonJSMin$1 } from "./rolldown-runtime-BOF7iYI8.js";
 import { m as WebSkillError } from "./dist-8oQRa8Xz.js";
-import { G as mountEchart, U as chartSpecFromProps } from "./dist-D9Lcn5Pp.js";
+import { M as qualifyFieldName, Q as chartSpecFromProps, et as mountEchart, v as collectFormScopes, y as collectScopedValues } from "./dist-bewtXYlO.js";
 import minpath$1 from "node:path";
 import { fileURLToPath as urlToPath$1 } from "node:url";
 import * as React$10 from "react";
-import React, { Fragment, createContext, createElement, forwardRef, memo, useCallback, useContext, useDeferredValue, useEffect, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState, default as react_default } from "react";
+import React, { Fragment, createContext, createElement, forwardRef, memo, useCallback, useContext, useDeferredValue, useEffect, useId, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState, default as react_default } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as ReactDOM from "react-dom";
 import minproc$1 from "node:process";
@@ -5551,14 +5551,14 @@ var __name$10 = (target, value) => __defProp$12(target, "name", {
 });
 var useReactId = React$10[" useId ".trim().toString()] || (() => void 0);
 var count = 0;
-function useId(deterministicId) {
+function useId$1(deterministicId) {
 	const [id, setId] = React$10.useState(useReactId());
 	useLayoutEffect2(() => {
 		if (!deterministicId) setId((reactId) => reactId ?? String(count++));
 	}, [deterministicId]);
 	return deterministicId || (id ? `radix-${id}` : "");
 }
-__name$10(useId, "useId");
+__name$10(useId$1, "useId");
 
 //#endregion
 //#region ../../node_modules/.pnpm/@floating-ui+utils@0.2.12/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
@@ -7564,7 +7564,7 @@ var RovingFocusGroupImpl = /* @__PURE__ */ React$10.forwardRef(/* @__PURE__ */ _
 var ITEM_NAME$1 = "RovingFocusGroupItem";
 var RovingFocusGroupItem = /* @__PURE__ */ React$10.forwardRef(/* @__PURE__ */ __name$6(function RovingFocusGroupItem2(props, forwardedRef) {
 	const { __scopeRovingFocusGroup, focusable = true, active = false, tabStopId, children, ...itemProps } = props;
-	const autoId = useId();
+	const autoId = useId$1();
 	const id = tabStopId || autoId;
 	const context = useRovingFocusContext(ITEM_NAME$1, __scopeRovingFocusGroup);
 	const isCurrentTabStop = context.currentTabStopId === id;
@@ -10241,9 +10241,9 @@ var DropdownMenu$1 = /* @__PURE__ */ __name$4((props) => {
 	});
 	return /* @__PURE__ */ jsx(DropdownMenuProvider, {
 		scope: __scopeDropdownMenu,
-		triggerId: useId(),
+		triggerId: useId$1(),
 		triggerRef,
-		contentId: useId(),
+		contentId: useId$1(),
 		open,
 		onOpenChange: setOpen,
 		onOpenToggle: React$10.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
@@ -11157,9 +11157,9 @@ var Dialog = /* @__PURE__ */ __name((props) => {
 		scope: __scopeDialog,
 		triggerRef,
 		contentRef,
-		contentId: useId(),
-		titleId: useId(),
-		descriptionId: useId(),
+		contentId: useId$1(),
+		titleId: useId$1(),
+		descriptionId: useId$1(),
 		titlePresent: titleCount > 0,
 		descriptionPresent: descriptionCount > 0,
 		setTitleCount,
@@ -11349,7 +11349,7 @@ var me = React$10.forwardRef((r, o) => {
 				groups: /* @__PURE__ */ new Set()
 			}
 		};
-	}), u = L(() => /* @__PURE__ */ new Set()), c = L(() => /* @__PURE__ */ new Map()), d = L(() => /* @__PURE__ */ new Map()), f = L(() => /* @__PURE__ */ new Set()), p = pe(r), { label: b, children: m, value: R, onValueChange: x, filter: C, shouldFilter: S, loop: A, disablePointerSelection: ge = !1, vimBindings: j = !0, ...O } = r, $ = useId(), q = useId(), _ = useId(), I = React$10.useRef(null), v = ke();
+	}), u = L(() => /* @__PURE__ */ new Set()), c = L(() => /* @__PURE__ */ new Map()), d = L(() => /* @__PURE__ */ new Map()), f = L(() => /* @__PURE__ */ new Set()), p = pe(r), { label: b, children: m, value: R, onValueChange: x, filter: C, shouldFilter: S, loop: A, disablePointerSelection: ge = !1, vimBindings: j = !0, ...O } = r, $ = useId$1(), q = useId$1(), _ = useId$1(), I = React$10.useRef(null), v = ke();
 	k(() => {
 		if (R !== void 0) {
 			let e = R.trim();
@@ -11547,7 +11547,7 @@ var me = React$10.forwardRef((r, o) => {
 });
 var he = React$10.forwardRef((r, o) => {
 	var _, I;
-	let n = useId(), u = React$10.useRef(null), c = React$10.useContext(fe), d = K(), f = pe(r), p = (I = (_ = f.current) == null ? void 0 : _.forceMount) != null ? I : c == null ? void 0 : c.forceMount;
+	let n = useId$1(), u = React$10.useRef(null), c = React$10.useContext(fe), d = K(), f = pe(r), p = (I = (_ = f.current) == null ? void 0 : _.forceMount) != null ? I : c == null ? void 0 : c.forceMount;
 	k(() => {
 		if (!p) return d.item(n, c == null ? void 0 : c.id);
 	}, [p]);
@@ -11588,7 +11588,7 @@ var he = React$10.forwardRef((r, o) => {
 	}, r.children);
 });
 var Ee = React$10.forwardRef((r, o) => {
-	let { heading: n, children: u, forceMount: c, ...d } = r, f = useId(), p = React$10.useRef(null), b = React$10.useRef(null), m = useId(), R = K(), x = P((S) => c || R.filter() === !1 ? !0 : S.search ? S.filtered.groups.has(f) : !0);
+	let { heading: n, children: u, forceMount: c, ...d } = r, f = useId$1(), p = React$10.useRef(null), b = React$10.useRef(null), m = useId$1(), R = K(), x = P((S) => c || R.filter() === !1 ? !0 : S.search ? S.filtered.groups.has(f) : !0);
 	k(() => R.group(f), []), ve(f, p, [
 		r.value,
 		r.heading,
@@ -14886,7 +14886,7 @@ function checkRule(state) {
 * @param {Info} info
 * @returns {string}
 */
-function list$4(node, parent, state, info) {
+function list$5(node, parent, state, info) {
 	const exit = state.enter("list");
 	const bulletCurrent = state.bulletCurrent;
 	/** @type {string} */
@@ -15172,7 +15172,7 @@ const handle = {
 	inlineCode: inlineCode$2,
 	link: link$2,
 	linkReference: linkReference$2,
-	list: list$4,
+	list: list$5,
 	listItem: listItem$2,
 	paragraph: paragraph$2,
 	root: root$4,
@@ -24087,7 +24087,7 @@ function tokenizeThematicBreak$1(effects, ok, nok) {
 * } from 'micromark-util-types'
 */
 /** @type {Construct} */
-const list$3 = {
+const list$4 = {
 	continuation: { tokenize: tokenizeListContinuation$1 },
 	exit: tokenizeListEnd$1,
 	name: "list",
@@ -24207,7 +24207,7 @@ function tokenizeListContinuation$1(effects, ok, nok) {
 	function notInCurrentItem(code) {
 		self.containerState._closeFlow = true;
 		self.interrupt = void 0;
-		return factorySpace$1(effects, effects.attempt(list$3, ok, nok), "linePrefix", self.parser.constructs.disable.null.includes("codeIndented") ? void 0 : 4)(code);
+		return factorySpace$1(effects, effects.attempt(list$4, ok, nok), "linePrefix", self.parser.constructs.disable.null.includes("codeIndented") ? void 0 : 4)(code);
 	}
 }
 /**
@@ -34368,19 +34368,19 @@ var constructs_exports$1 = /* @__PURE__ */ __exportAll$2({
 });
 /** @satisfies {Extension['document']} */
 const document$3 = {
-	[42]: list$3,
-	[43]: list$3,
-	[45]: list$3,
-	[48]: list$3,
-	[49]: list$3,
-	[50]: list$3,
-	[51]: list$3,
-	[52]: list$3,
-	[53]: list$3,
-	[54]: list$3,
-	[55]: list$3,
-	[56]: list$3,
-	[57]: list$3,
+	[42]: list$4,
+	[43]: list$4,
+	[45]: list$4,
+	[48]: list$4,
+	[49]: list$4,
+	[50]: list$4,
+	[51]: list$4,
+	[52]: list$4,
+	[53]: list$4,
+	[54]: list$4,
+	[55]: list$4,
+	[56]: list$4,
+	[57]: list$4,
 	[62]: blockQuote$1
 };
 /** @satisfies {Extension['contentInitial']} */
@@ -36686,7 +36686,7 @@ function listItemLoose$1(node) {
 * @returns {Element}
 *   hast node.
 */
-function list$2(state, node) {
+function list$3(state, node) {
 	/** @type {Properties} */
 	const properties = {};
 	const results = state.all(node);
@@ -37081,7 +37081,7 @@ const handlers$1 = {
 	linkReference: linkReference$1,
 	link: link$1,
 	listItem: listItem$1,
-	list: list$2,
+	list: list$3,
 	paragraph: paragraph$1,
 	root: root$2,
 	strong: strong$1,
@@ -99762,7 +99762,6 @@ function DataTable({ children, className = "", containerClassName = "", ...props
 }
 const toneClasses$1 = {
 	neutral: "bg-subtle text-muted",
-	primary: "bg-subtle text-ink",
 	success: "bg-success-soft text-success",
 	warning: "bg-warning-soft text-warning",
 	info: "bg-info-soft text-info",
@@ -111452,7 +111451,7 @@ function listItemLoose(node) {
 * @returns {Element}
 *   hast node.
 */
-function list(state, node) {
+function list$2(state, node) {
 	/** @type {Properties} */
 	const properties = {};
 	const results = state.all(node);
@@ -111817,7 +111816,7 @@ const handlers = {
 	linkReference,
 	link,
 	listItem,
-	list,
+	list: list$2,
 	paragraph,
 	root,
 	strong,
@@ -120087,7 +120086,7 @@ const MarkdownText = memo(function MarkdownText({ className }) {
 });
 
 //#endregion
-//#region ../ui-react/dist/catalogComponents-KsujmL4b.js
+//#region ../ui-react/dist/catalogComponents-DV7cPpUm.js
 /** echarts 挂载点：surface 图表与 catalog 声明树的 Chart 节点共用，实现在 `@webskill/ui`，与 A2UI 档同一份 */
 function EChart({ chart }) {
 	const containerRef = useRef(null);
@@ -120125,19 +120124,53 @@ function useSurfaceForm({ surfaceId, spec, actions, runId, draft, onAction, onDr
 		collectFields(spec, out);
 		return out;
 	}, [spec]);
+	const scopes = useMemo(() => collectFormScopes(spec), [spec]);
+	const scoping = scopes.length > 1;
+	const scopeFields = useMemo(() => new Map(scopes.map((scope) => {
+		const out = [];
+		collectFields(scope.form, out);
+		return [scope.scopeId, out];
+	})), [scopes]);
+	const nodeScopes = useMemo(() => new Map(scopes.map((scope) => [scope.form, scope])), [scopes]);
+	const defaults = useMemo(() => {
+		const out = {};
+		const add = (field, scopeId) => {
+			if (field["defaultValue"] !== void 0) out[qualifyFieldName(String(field["name"]), scopeId)] = field["defaultValue"];
+		};
+		if (!scoping) {
+			for (const field of fields) add(field);
+			return out;
+		}
+		for (const scope of scopes) for (const field of scopeFields.get(scope.scopeId) ?? []) add(field, scope.scopeId);
+		return out;
+	}, [
+		fields,
+		scopes,
+		scopeFields,
+		scoping
+	]);
+	const claims = useRef({
+		spec,
+		map: /* @__PURE__ */ new Map()
+	});
+	if (claims.current.spec !== spec) claims.current = {
+		spec,
+		map: /* @__PURE__ */ new Map()
+	};
 	const values = {
-		...useMemo(() => Object.fromEntries(fields.filter((field) => field["defaultValue"] !== void 0).map((field) => [String(field["name"]), field["defaultValue"]])), [fields]),
+		...defaults,
 		...touched
 	};
 	const resolveActionId = (intent, nodeId) => nodeId ?? actions.find((action) => action.intent === intent)?.id ?? intent;
-	const dispatch = (actionId, withValues) => {
+	const dispatch = (actionId, withValues, scope) => {
 		const declared = actions.find((action) => action.id === actionId);
 		onAction?.({
 			surfaceId,
 			actionId,
 			intent: declared?.intent ?? "select",
 			...declared?.nonce ? { nonce: declared.nonce } : {},
-			...withValues ? { value: { ...values } } : {}
+			...scope ? { scopeId: scope.scopeId } : {},
+			...withValues ? { value: collectScopedValues(values, scope) } : {}
 		});
 	};
 	return {
@@ -120145,45 +120178,63 @@ function useSurfaceForm({ surfaceId, spec, actions, runId, draft, onAction, onDr
 		actions,
 		values,
 		errors,
+		scopes,
 		resolveActionId,
-		setValue: (name, value) => {
+		scopeOfNode: (node) => scoping ? nodeScopes.get(node) : void 0,
+		claimScope: (instanceId, formProps) => {
+			if (!scoping) return void 0;
+			const claimed = claims.current.map.get(instanceId);
+			if (claimed) return claimed;
+			const taken = new Set([...claims.current.map.values()].map((scope) => scope.scopeId));
+			const match = scopes.find((scope) => !taken.has(scope.scopeId) && Object.entries(scope.form.props ?? {}).every(([key, value]) => value === formProps[key]));
+			if (match) claims.current.map.set(instanceId, match);
+			return match;
+		},
+		setValue: (key, value) => {
 			const next = {
 				...touched,
-				[name]: value
+				[key]: value
 			};
 			setTouched(next);
-			setErrors(({ [name]: _cleared, ...rest }) => rest);
+			setErrors(({ [key]: _cleared, ...rest }) => rest);
 			if (runId) onDraftChange?.({
 				runId,
 				surfaceId,
 				value: next
 			});
 		},
-		emit: (actionId) => dispatch(actionId, false),
-		submit: (intent, nodeId) => {
-			const missing = fields.filter((field) => field["required"] === true && isBlank(values[String(field["name"])]));
+		emit: (actionId, scope) => dispatch(actionId, false, scope),
+		submit: (intent, nodeId, scope) => {
+			const missing = (scope ? scopeFields.get(scope.scopeId) ?? [] : fields).filter((field) => field["required"] === true && isBlank(values[qualifyFieldName(String(field["name"]), scope?.scopeId)]));
 			if (missing.length > 0) {
-				setErrors(Object.fromEntries(missing.map((field) => [String(field["name"]), REQUIRED_MESSAGE])));
+				const flagged = Object.fromEntries(missing.map((field) => [qualifyFieldName(String(field["name"]), scope?.scopeId), REQUIRED_MESSAGE]));
+				setErrors((prev) => ({
+					...scope ? withoutScope(prev, scope.scopeId) : {},
+					...flagged
+				}));
 				return;
 			}
-			setErrors({});
-			dispatch(resolveActionId(intent, nodeId), true);
+			setErrors((prev) => scope ? withoutScope(prev, scope.scopeId) : {});
+			dispatch(scope && !nodeId ? scope.submitActionId : resolveActionId(intent, nodeId), true, scope);
 		}
 	};
 }
+const withoutScope = (errors, scopeId) => Object.fromEntries(Object.entries(errors).filter(([key]) => !key.startsWith(`${scopeId}.`)));
 /** catalog `Field` 的唯一控件实现：8 种 type 的取值语义在这里定死 */
-function SurfaceField({ form, props }) {
+function SurfaceField({ form, props, scope }) {
 	const name = str(props, "name");
+	const key = qualifyFieldName(name, scope?.scopeId);
 	const label = str(props, "label", name);
 	const type = str(props, "type", "text");
 	const required = props["required"] === true;
-	const value = form.values[name];
-	const error = form.errors[name];
-	const errorId = error ? `webskill-surface-${form.surfaceId}-${name}-error` : void 0;
+	const value = form.values[key];
+	const error = form.errors[key];
+	const errorId = error ? `webskill-surface-${form.surfaceId}-${key}-error` : void 0;
 	const options = Array.isArray(props["options"]) ? props["options"] : [];
+	const suggestion = props["suggestion"];
 	/** 控件的机器可读锚点：宿主与测试据此定位字段，不依赖标签文案 */
 	const anchor = {
-		"data-webskill-surface-control": name,
+		"data-webskill-surface-control": key,
 		...error ? {
 			"aria-invalid": true,
 			"aria-describedby": errorId
@@ -120191,17 +120242,17 @@ function SurfaceField({ form, props }) {
 	};
 	const control = () => {
 		if (type === "textarea") return /* @__PURE__ */ jsx(Textarea, {
-			id: name,
+			id: key,
 			...anchor,
 			invalid: Boolean(error),
 			value: typeof value === "string" ? value : "",
-			onChange: (event) => form.setValue(name, event.target.value)
+			onChange: (event) => form.setValue(key, event.target.value)
 		});
 		if (type === "toggle") return /* @__PURE__ */ jsx(Switch, {
-			id: name,
+			id: key,
 			...anchor,
 			checked: value === true,
-			onCheckedChange: (next) => form.setValue(name, next)
+			onCheckedChange: (next) => form.setValue(key, next)
 		});
 		if (type === "select" || type === "multi-select") {
 			const multiple = type === "multi-select";
@@ -120210,13 +120261,13 @@ function SurfaceField({ form, props }) {
 				return index < 0 ? "" : String(index);
 			};
 			return /* @__PURE__ */ jsx("select", {
-				id: name,
+				id: key,
 				...anchor,
 				multiple,
 				value: multiple ? Array.isArray(value) ? value.map(indexOf) : [] : indexOf(value),
 				onChange: (event) => {
 					const pick = (index) => options[Number(index)].value;
-					form.setValue(name, multiple ? [...event.target.selectedOptions].map((option) => pick(option.value)) : pick(event.target.value));
+					form.setValue(key, multiple ? [...event.target.selectedOptions].map((option) => pick(option.value)) : pick(event.target.value));
 				},
 				children: options.map((option, index) => /* @__PURE__ */ jsx("option", {
 					value: String(index),
@@ -120225,29 +120276,40 @@ function SurfaceField({ form, props }) {
 			});
 		}
 		if (type === "file") return /* @__PURE__ */ jsx("input", {
-			id: name,
+			id: key,
 			...anchor,
 			type: "file",
-			onChange: (event) => form.setValue(name, event.target.files?.[0]?.name ?? "")
+			onChange: (event) => form.setValue(key, event.target.files?.[0]?.name ?? "")
 		});
 		return /* @__PURE__ */ jsx(Input, {
-			id: name,
+			id: key,
 			...anchor,
 			invalid: Boolean(error),
 			type: type === "number" ? "number" : type === "date" ? "date" : "text",
 			value: typeof value === "string" || typeof value === "number" ? String(value) : "",
-			onChange: (event) => form.setValue(name, type === "number" ? Number(event.target.value) : event.target.value)
+			onChange: (event) => form.setValue(key, type === "number" ? Number(event.target.value) : event.target.value)
 		});
 	};
 	return /* @__PURE__ */ jsxs("label", {
 		className: "flex flex-col gap-1 text-sm",
-		htmlFor: name,
+		htmlFor: key,
 		children: [
 			/* @__PURE__ */ jsxs("span", {
 				className: "text-ink",
 				children: [label, required ? " *" : ""]
 			}),
 			control(),
+			suggestion !== void 0 && isBlank(value) ? /* @__PURE__ */ jsxs("span", {
+				"data-webskill-suggestion": key,
+				className: "flex items-center gap-2 text-xs text-muted",
+				children: [/* @__PURE__ */ jsxs("span", { children: ["Last entered: ", String(suggestion.value)] }), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"data-webskill-suggestion-use": key,
+					onClick: () => form.setValue(key, suggestion.value),
+					className: "rounded-md border border-border px-2 py-0.5 text-ink transition-colors hover:bg-accent",
+					children: "Use"
+				})]
+			}) : null,
 			props["description"] ? /* @__PURE__ */ jsx("span", {
 				className: "text-xs text-muted",
 				children: str(props, "description")
@@ -120262,26 +120324,28 @@ function SurfaceField({ form, props }) {
 	});
 }
 /** catalog `Form` 的提交 / 取消按钮：提交带表单值，取消不带 */
-function SurfaceFormButtons({ form, props }) {
+function SurfaceFormButtons({ form, props, scope }) {
+	const submitId = scope ? scope.submitActionId : form.resolveActionId("submit");
+	const cancelId = scope ? scope.cancelActionId : form.resolveActionId("cancel");
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex gap-2",
 		children: [/* @__PURE__ */ jsx(Button, {
 			type: "submit",
 			size: "sm",
-			"data-webskill-surface-action": form.resolveActionId("submit"),
+			"data-webskill-surface-action": submitId,
 			children: str(props, "submitLabel", "Submit")
 		}), props["cancelLabel"] ? /* @__PURE__ */ jsx(Button, {
 			type: "button",
 			size: "sm",
 			variant: "secondary",
-			"data-webskill-surface-action": form.resolveActionId("cancel"),
-			onClick: () => form.emit(form.resolveActionId("cancel")),
+			"data-webskill-surface-action": cancelId,
+			onClick: () => form.emit(cancelId, scope),
 			children: str(props, "cancelLabel")
 		}) : null]
 	});
 }
 /** catalog `Button` 的唯一实现：submit 走带值提交，其余走裸动作 */
-function SurfaceButton({ form, props, nodeId }) {
+function SurfaceButton({ form, props, nodeId, scope }) {
 	const intent = str(props, "action");
 	const actionId = form.resolveActionId(intent, nodeId);
 	return /* @__PURE__ */ jsx(Button, {
@@ -120289,11 +120353,92 @@ function SurfaceButton({ form, props, nodeId }) {
 		type: "button",
 		disabled: props["disabled"] === true,
 		"data-webskill-surface-action": actionId,
-		onClick: () => intent === "submit" ? form.submit(intent, nodeId) : form.emit(actionId),
+		onClick: () => intent === "submit" ? form.submit(intent, nodeId, scope) : form.emit(actionId, scope),
 		children: str(props, "label")
 	});
 }
 /**
+* FR-6.2 的四个布局/展示组件。四档渲染共用同一份实现：
+* native 的 switch 与 json-render / OpenUI 的组件表都调这里，
+* 语义（tablist、grid、ol/li、progressbar）因此不会随渲染器分叉。
+*/
+const num = (props, key, fallback) => typeof props[key] === "number" ? props[key] : fallback;
+const list = (value) => Array.isArray(value) ? value : [];
+function SpecTabs({ props, children }) {
+	const labels = list(props["labels"]);
+	const panels = Array.isArray(children) ? children : [children];
+	const [active, setActive] = useState(0);
+	const index = Math.min(active, Math.max(panels.length - 1, 0));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		children: [/* @__PURE__ */ jsx("div", {
+			role: "tablist",
+			className: "flex gap-1 border-b border-border",
+			children: labels.map((label, position) => /* @__PURE__ */ jsx(Button, {
+				role: "tab",
+				type: "button",
+				size: "sm",
+				variant: position === index ? "secondary" : "ghost",
+				"aria-selected": position === index,
+				onClick: () => setActive(position),
+				children: label
+			}, position))
+		}), panels[index] ?? null]
+	});
+}
+function SpecGrid({ props, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "grid gap-3",
+		style: { gridTemplateColumns: `repeat(${Math.min(4, Math.max(2, num(props, "columns", 2)))}, minmax(0, 1fr))` },
+		children
+	});
+}
+function SpecTimeline({ props }) {
+	return /* @__PURE__ */ jsx("ol", {
+		className: "flex flex-col gap-2 pl-4",
+		children: list(props["items"]).map((item, index) => /* @__PURE__ */ jsxs("li", {
+			className: "flex flex-col gap-0.5",
+			"data-state": str(item, "state", "pending"),
+			children: [
+				/* @__PURE__ */ jsx("strong", {
+					className: "text-sm text-ink",
+					children: str(item, "title")
+				}),
+				item["time"] ? /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-muted",
+					children: str(item, "time")
+				}) : null,
+				item["description"] ? /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-ink",
+					children: str(item, "description")
+				}) : null
+			]
+		}, index))
+	});
+}
+function SpecProgress({ props }) {
+	const value = Math.max(0, Math.min(100, num(props, "value", 0)));
+	const label = str(props, "label");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1",
+		children: [label ? /* @__PURE__ */ jsx("span", {
+			className: "text-xs text-muted",
+			children: label
+		}) : null, /* @__PURE__ */ jsx("div", {
+			role: "progressbar",
+			"aria-label": label || "Progress",
+			"aria-valuenow": value,
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			className: "h-2 overflow-hidden rounded-full bg-secondary",
+			children: /* @__PURE__ */ jsx("span", {
+				className: "block h-full bg-ink",
+				style: { width: `${value}%` }
+			})
+		})]
+	});
+}
+/**
 * json-render 与 OpenUI 两档的 Renderer 都只把 props 交给组件实现，拿不到节点 id，
 * 也拿不到表单状态，因此表单值与动作回传统一走这个 Context。
 * 缺省值故意不给空实现：没包 Provider 就是宿主接线错了，必须失败而不是“点了没反应”。
@@ -120317,6 +120462,8 @@ function CatalogSurfaceProvider({ surfaceId, spec, actions, onAction, children }
 		children
 	});
 }
+/** 当前子树所属的表单作用域；surface 上只有一个表单时为 undefined（行为与放宽前一致） */
+const FormScopeContext = createContext(void 0);
 /** 把实现表的条目包成真正的 React 组件，使其内部的 hook 调用处于自己的渲染周期 */
 function CatalogNode({ name, props, children }) {
 	const Impl = catalogComponentImpls[name];
@@ -120328,40 +120475,47 @@ function CatalogNode({ name, props, children }) {
 }
 function CatalogForm({ props, children }) {
 	const form = useCatalogSurfaceForm();
-	return /* @__PURE__ */ jsxs("form", {
-		className: "flex flex-col gap-3",
-		noValidate: true,
-		onSubmit: (event) => {
-			event.preventDefault();
-			form.submit("submit");
-		},
-		children: [
-			props["title"] ? /* @__PURE__ */ jsx("h3", {
-				className: "text-sm font-semibold text-ink",
-				children: str(props, "title")
-			}) : null,
-			children,
-			/* @__PURE__ */ jsx(SurfaceFormButtons, {
-				form,
-				props
-			})
-		]
+	const scope = form.claimScope(useId(), props);
+	return /* @__PURE__ */ jsx(FormScopeContext.Provider, {
+		value: scope,
+		children: /* @__PURE__ */ jsxs("form", {
+			className: "flex flex-col gap-3",
+			noValidate: true,
+			onSubmit: (event) => {
+				event.preventDefault();
+				form.submit("submit", void 0, scope);
+			},
+			children: [
+				props["title"] ? /* @__PURE__ */ jsx("h3", {
+					className: "text-sm font-semibold text-ink",
+					children: str(props, "title")
+				}) : null,
+				children,
+				/* @__PURE__ */ jsx(SurfaceFormButtons, {
+					form,
+					props,
+					scope
+				})
+			]
+		})
 	});
 }
 function CatalogField({ props }) {
 	return /* @__PURE__ */ jsx(SurfaceField, {
 		form: useCatalogSurfaceForm(),
-		props
+		props,
+		scope: useContext(FormScopeContext)
 	});
 }
 function CatalogButton({ props }) {
 	return /* @__PURE__ */ jsx(SurfaceButton, {
 		form: useCatalogSurfaceForm(),
-		props
+		props,
+		scope: useContext(FormScopeContext)
 	});
 }
 /**
-* catalog 16 个组件的展示实现：json-render 与 OpenUI 两档共用同一份，
+* catalog 展示类组件的实现：json-render 与 OpenUI 两档共用同一份，
 * 避免"一个 catalog、多套 registry"退化成多套各自演进的视觉。
 * 交互（表单值收集 / action 回传）由各档的宿主组件负责。
 */
@@ -120433,6 +120587,16 @@ const catalogComponentImpls = {
 		});
 	},
 	Chart: ({ props }) => /* @__PURE__ */ jsx(EChart, { chart: chartSpecFromProps(props) }),
+	Tabs: ({ props, children }) => /* @__PURE__ */ jsx(SpecTabs, {
+		props,
+		children
+	}),
+	Grid: ({ props, children }) => /* @__PURE__ */ jsx(SpecGrid, {
+		props,
+		children
+	}),
+	Timeline: ({ props }) => /* @__PURE__ */ jsx(SpecTimeline, { props }),
+	Progress: ({ props }) => /* @__PURE__ */ jsx(SpecProgress, { props }),
 	FileLink: ({ props }) => /* @__PURE__ */ jsx("span", {
 		className: "text-sm text-ink",
 		children: str(props, "label", str(props, "path"))
@@ -120456,4 +120620,4 @@ const catalogComponentImpls = {
 };
 
 //#endregion
-export { DropdownMenuContent as _, SurfaceField as a, Markdown as b, str as c, Badge as d, Button as f, DropdownMenuCheckboxItem as g, DropdownMenu as h, SurfaceButton as i, useCatalogSurfaceForm as l, DataTable as m, CatalogSurfaceProvider as n, SurfaceFormButtons as o, Checkbox as p, EChart as r, catalogComponentImpls as s, CatalogNode as t, useSurfaceForm as u, DropdownMenuTrigger as v, Separator as x, Input as y };
+export { Input as C, DropdownMenuTrigger as S, Separator as T, Checkbox as _, SpecProgress as a, DropdownMenuCheckboxItem as b, SurfaceButton as c, catalogComponentImpls as d, str as f, Button as g, Badge as h, SpecGrid as i, SurfaceField as l, useSurfaceForm as m, CatalogSurfaceProvider as n, SpecTabs as o, useCatalogSurfaceForm as p, EChart as r, SpecTimeline as s, CatalogNode as t, SurfaceFormButtons as u, DataTable as v, Markdown as w, DropdownMenuContent as x, DropdownMenu as y };