@webskill/sdk 0.4.0 → 0.6.0

package/dist/{catalogComponents-KsujmL4b-Clx1kCnU.js → catalogComponents-Dr5dFMAb-Dacibl1e.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-DnYG2-eY.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";
@@ -3407,11 +3407,49 @@ const getDefaultConfig = () => {
 const twMerge = /*#__PURE__*/ createTailwindMerge(getDefaultConfig);
 
 //#endregion
-//#region ../ui-kit/dist/cn-Dt6Yi1Qv.js
+//#region ../ui-kit/dist/useDarkAncestor-D41bzGNA.js
 /** shadcn 约定的类名合并：后写的 Tailwind 类覆盖先写的同族类。 */
 function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
+/**
+* 声明了主题的祖先：`data-theme` 由 ThemeScope 挂（亮暗都挂），`.dark` 是宿主页面惯用的暗色类名。
+* 两者一起选，`closest` 才会停在**最近**的那一层，而不是越过亮色实例去命中外层的暗色宿主。
+*/
+const THEME_ANCESTOR = "[data-theme], .dark";
+/**
+* 判定挂载点**最近的**主题祖先是否处于暗色（0.6.0 FR-20.4）。
+*
+* 不用 `document.querySelector('.dark')`：那是全局查询，宿主页面是暗色时，
+* 嵌在暗色宿主里的亮色 SDK 实例也会被判成暗色（反之亦然）。
+*
+* 返回 ref 回调而不是接受 ref 对象：ref 对象的赋值不触发渲染，拿不到「已挂载」这个时机。
+*/
+function useDarkAncestor() {
+	const [node, setNode] = useState(null);
+	const [dark, setDark] = useState(false);
+	useEffect(() => {
+		if (!node) return;
+		const update = () => {
+			const scope = node.closest(THEME_ANCESTOR);
+			if (!scope) {
+				setDark(false);
+				return;
+			}
+			const declared = scope.getAttribute("data-theme");
+			setDark(declared === null ? true : declared === "dark");
+		};
+		update();
+		const observer = new MutationObserver(update);
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["class", "data-theme"],
+			subtree: true
+		});
+		return () => observer.disconnect();
+	}, [node]);
+	return [dark, setNode];
+}
 
 //#endregion
 //#region ../../node_modules/.pnpm/@radix-ui+react-compose-refs@1.1.5_@types+react@19.2.17_react@19.2.8/node_modules/@radix-ui/react-compose-refs/dist/index.mjs
@@ -5551,14 +5589,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 +7602,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 +10279,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 +11195,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 +11387,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 +11585,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 +11626,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 +14924,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 +15210,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 +24125,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 +24245,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 +34406,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 +36724,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 +37119,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,
@@ -99560,6 +99598,19 @@ const PanelLeft = createLucideIcon("panel-left", [["rect", {
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+const Plus = createLucideIcon("plus", [["path", {
+	d: "M5 12h14",
+	key: "1ays0h"
+}], ["path", {
+	d: "M12 5v14",
+	key: "s699le"
+}]]);
+/**
+* @license lucide-react v1.27.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 const Search = createLucideIcon("search", [["path", {
 	d: "m21 21-4.34-4.34",
 	key: "14j7rj"
@@ -99672,6 +99723,26 @@ function Switch({ className = "", label, ...props }) {
 		})]
 	});
 }
+/**
+* 一个 SDK 实例的主题作用域（0.6.0 FR-20.4）。
+*
+* 解决两件事：
+*   1. Radix 的 Portal 默认渲染到 `document.body`，会逃出主题子树 —— 这里在作用域**内部**
+*      提供一个 Portal 容器，浮层因此仍处在带主题类名的祖先链下；
+*   2. 原生 `<select>` 的下拉由浏览器按 `color-scheme` 绘制，类名管不到 —— 容器上的
+*      `data-webskill-theme` 属性在 base.css 里显式声明了 `color-scheme`。
+*
+* 宿主页面自身的类名不被改动：作用域只作用于自己的子树。
+*/
+const PortalContainerContext = createContext(void 0);
+/**
+* 当前实例的 Portal 容器；不在 `ThemeScope` 内时返回 `undefined`，
+* 调用方据此回落到 Radix 默认的 `document.body`。
+* @experimental
+*/
+function usePortalContainer() {
+	return useContext(PortalContainerContext);
+}
 const DropdownMenu = Root2;
 function DropdownMenuTrigger({ children, className = "", asChild, ...props }) {
 	const triggerClass = asChild ? className : `inline-flex h-9 items-center justify-center rounded-md border border-border bg-surface px-3 text-sm font-medium text-ink shadow-xs outline-none transition-colors hover:bg-subtle focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/20 ${className}`;
@@ -99683,12 +99754,15 @@ function DropdownMenuTrigger({ children, className = "", asChild, ...props }) {
 	});
 }
 function DropdownMenuContent({ children, className = "", sideOffset = 6, ...props }) {
-	return /* @__PURE__ */ jsx(Portal2, { children: /* @__PURE__ */ jsx(Content2, {
-		sideOffset,
-		className: `z-50 min-w-40 rounded-md border border-border bg-surface p-1 text-sm text-ink shadow-pop outline-none ${className}`,
-		...props,
-		children
-	}) });
+	return /* @__PURE__ */ jsx(Portal2, {
+		container: usePortalContainer(),
+		children: /* @__PURE__ */ jsx(Content2, {
+			sideOffset,
+			className: `z-50 min-w-40 rounded-md border border-border bg-surface p-1 text-sm text-ink shadow-pop outline-none ${className}`,
+			...props,
+			children
+		})
+	});
 }
 function DropdownMenuCheckboxItem({ children, className = "", ...props }) {
 	return /* @__PURE__ */ jsxs(CheckboxItem2, {
@@ -99762,7 +99836,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 +111525,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 +111890,7 @@ const handlers = {
 	linkReference,
 	link,
 	listItem,
-	list,
+	list: list$2,
 	paragraph,
 	root,
 	strong,
@@ -119890,29 +119963,11 @@ function resolveLanguage(raw) {
 	if (raw in languages) return raw;
 	return languageAliases[raw];
 }
-/** 探测 .dark 祖先（class 策略）：监听 documentElement/body 的 class 变化 */
-function useDarkClass() {
-	const [dark, setDark] = useState(() => typeof document !== "undefined" && document.querySelector(".dark") !== null);
-	useEffect(() => {
-		const update = () => setDark(document.querySelector(".dark") !== null);
-		const observer = new MutationObserver(update);
-		observer.observe(document.documentElement, {
-			attributes: true,
-			attributeFilter: ["class"]
-		});
-		if (document.body) observer.observe(document.body, {
-			attributes: true,
-			attributeFilter: ["class"]
-		});
-		update();
-		return () => observer.disconnect();
-	}, []);
-	return dark;
-}
 function CodeBlock({ node: _node, className, children, ...rest }) {
-	const dark = useDarkClass();
+	const [dark, themeRef] = useDarkAncestor();
 	const language = resolveLanguage(/language-(\w+)/.exec(className ?? "")?.[1]);
 	if (language) return /* @__PURE__ */ jsxs("div", {
+		ref: themeRef,
 		className: "my-3 overflow-hidden rounded-card border border-border",
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "border-b border-border bg-subtle px-3 py-1.5 font-mono text-xs text-muted",
@@ -120085,9 +120140,27 @@ const MarkdownText = memo(function MarkdownText({ className }) {
 		defer: true
 	});
 });
+/**
+* provider 相关的默认值与切换规则（0.6.0 FR-13.1）。
+* chatbot 设置面板与 console 的 `connections.models` 共用这一份——
+* 0.5.x 时两处各自硬编码，改一处漏一处。
+*/
+/**
+* 各 provider 的官方默认端点。取值必须与客户端内部的 fallback 一致（T-03-2 断言）：
+* 客户端的 fallback 保证「用户没填也能跑」，这张表只服务 UI 预填，两者说的是同一件事。
+* `openai-compatible` 与 `chrome-builtin` 无默认——前者端点任意，后者根本不走 HTTP。
+* @experimental
+*/
+const PROVIDER_DEFAULT_BASE_URL = {
+	"openai-compatible": void 0,
+	anthropic: "https://api.anthropic.com",
+	google: "https://generativelanguage.googleapis.com",
+	"chrome-builtin": void 0
+};
+const KNOWN_DEFAULT_BASE_URLS = new Set(Object.values(PROVIDER_DEFAULT_BASE_URL).filter((url) => url !== void 0));
 
 //#endregion
-//#region ../ui-react/dist/catalogComponents-KsujmL4b.js
+//#region ../ui-react/dist/catalogComponents-Dr5dFMAb.js
 /** echarts 挂载点：surface 图表与 catalog 声明树的 Chart 节点共用，实现在 `@webskill/ui`，与 A2UI 档同一份 */
 function EChart({ chart }) {
 	const containerRef = useRef(null);
@@ -120125,19 +120198,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 +120252,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 +120316,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 +120335,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 +120350,48 @@ 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: ["Suggested: ", String(suggestion.value)] }),
+					suggestion.reason ? /* @__PURE__ */ jsxs("span", { children: [
+						"(",
+						suggestion.reason,
+						")"
+					] }) : null,
+					/* @__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 +120406,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"),
-			children: str(props, "submitLabel", "Submit")
-		}), props["cancelLabel"] ? /* @__PURE__ */ jsx(Button, {
+		className: "flex flex-wrap items-center justify-end gap-2",
+		children: [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]
+		}) : null, /* @__PURE__ */ jsx(Button, {
+			type: "submit",
+			size: "sm",
+			"data-webskill-surface-action": submitId,
+			children: str(props, "submitLabel", "Submit")
+		})]
 	});
 }
 /** 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 +120435,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 +120544,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 +120557,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 +120669,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 +120702,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 };