@webskill/sdk 0.3.0 → 0.5.0

package/dist/{catalogComponents-C_V39rbF-BOHveMWa.js → catalogComponents-DV7cPpUm-C77AEEx9.js}

@@ -1,8 +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 { 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";
@@ -5549,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
@@ -7562,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;
@@ -10239,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]),
@@ -11155,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,
@@ -11347,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();
@@ -11545,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]);
@@ -11586,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,
@@ -14884,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} */
@@ -15170,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,
@@ -24085,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",
@@ -24205,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);
 	}
 }
 /**
@@ -34366,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']} */
@@ -36684,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);
@@ -37079,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,
@@ -99760,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",
@@ -99792,32 +99793,6 @@ const sidebarMenuButtonVariants = cva("peer/menu-button flex w-full cursor-point
 		size: "default"
 	}
 });
-function Select({ options, value, onChange, placeholder, disabled = false, id, label, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className = "" }) {
-	return /* @__PURE__ */ jsxs("span", {
-		className: `relative inline-flex ${className}`,
-		children: [/* @__PURE__ */ jsxs("select", {
-			id,
-			value,
-			disabled,
-			"aria-label": label,
-			"aria-labelledby": ariaLabelledBy,
-			"aria-describedby": ariaDescribedBy,
-			onChange: (event) => onChange(event.target.value),
-			className: "h-9 w-full cursor-pointer appearance-none rounded-lg border border-border bg-surface pr-8 pl-3 text-sm text-ink transition-colors hover:border-ring disabled:cursor-not-allowed disabled:opacity-50",
-			children: [placeholder !== void 0 && /* @__PURE__ */ jsx("option", {
-				value: "",
-				disabled: true,
-				children: placeholder
-			}), options.map((option) => /* @__PURE__ */ jsx("option", {
-				value: option.value,
-				children: option.label
-			}, option.value))]
-		}), /* @__PURE__ */ jsx(ChevronDown, {
-			className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted",
-			"aria-hidden": true
-		})]
-	});
-}
 /**
 * @typedef Options
 *   Configuration for `stringify`.
@@ -111476,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);
@@ -111841,7 +111816,7 @@ const handlers = {
 	linkReference,
 	link,
 	listItem,
-	list,
+	list: list$2,
 	paragraph,
 	root,
 	strong,
@@ -120111,77 +120086,436 @@ const MarkdownText = memo(function MarkdownText({ className }) {
 });
 
 //#endregion
-//#region ../ui-react/dist/catalogComponents-C_V39rbF.js
-function toEchartsOption(chart) {
-	return {
-		animation: false,
-		title: chart.title ? {
-			text: chart.title,
-			left: "center",
-			textStyle: { fontSize: 14 }
-		} : void 0,
-		tooltip: { trigger: chart.kind === "pie" ? "item" : "axis" },
-		legend: { bottom: 0 },
-		xAxis: chart.kind === "pie" ? void 0 : {
-			type: "category",
-			data: chart.labels
-		},
-		yAxis: chart.kind === "pie" ? void 0 : { type: "value" },
-		series: chart.kind === "pie" ? chart.series.map((series) => ({
-			type: "pie",
-			name: series.name,
-			data: chart.labels.map((label, index) => ({
-				name: label,
-				value: series.data[index] ?? 0
-			}))
-		})) : chart.series.map((series) => ({
-			type: chart.kind,
-			name: series.name,
-			data: series.data
-		}))
-	};
-}
-/** echarts 懒加载挂载点：surface 图表与 catalog 声明树的 Chart 节点共用 */
+//#region ../ui-react/dist/catalogComponents-DV7cPpUm.js
+/** echarts 挂载点：surface 图表与 catalog 声明树的 Chart 节点共用，实现在 `@webskill/ui`，与 A2UI 档同一份 */
 function EChart({ chart }) {
 	const containerRef = useRef(null);
-	const chartRef = useRef(void 0);
-	const [ready, setReady] = useState(false);
+	const handleRef = useRef(void 0);
 	useEffect(() => {
-		let disposed = false;
-		let observer;
-		import("./echarts-DhNm2ene.js").then((echarts) => {
-			const container = containerRef.current;
-			if (disposed || !container) return;
-			const instance = echarts.init(container);
-			chartRef.current = instance;
-			setReady(true);
-			if (typeof ResizeObserver !== "undefined") {
-				observer = new ResizeObserver(() => instance.resize());
-				observer.observe(container);
-			}
-		});
+		const container = containerRef.current;
+		if (!container) return;
+		const handle = mountEchart(container);
+		handleRef.current = handle;
 		return () => {
-			disposed = true;
-			observer?.disconnect();
-			chartRef.current?.dispose();
-			chartRef.current = void 0;
+			handle.dispose();
+			handleRef.current = void 0;
 		};
 	}, []);
 	useEffect(() => {
-		if (ready) chartRef.current?.setOption(toEchartsOption(chart), {
-			notMerge: true,
-			lazyUpdate: true
-		});
-	}, [ready, chart]);
+		handleRef.current?.setChart(chart);
+	}, [chart]);
 	return /* @__PURE__ */ jsx("div", {
 		className: "webskill-surface__chart",
-		ref: containerRef,
-		"aria-label": chart.title
+		ref: containerRef
 	});
 }
+const REQUIRED_MESSAGE = "This field is required";
 const str = (props, key, fallback = "") => typeof props[key] === "string" ? props[key] : fallback;
+function collectFields(node, out) {
+	if (node.component === "Field" && typeof node.props?.["name"] === "string") out.push(node.props);
+	for (const child of node.children ?? []) collectFields(child, out);
+}
+const isBlank = (value) => value === void 0 || value === null || value === "" || Array.isArray(value) && value.length === 0;
+function useSurfaceForm({ surfaceId, spec, actions, runId, draft, onAction, onDraftChange }) {
+	const [touched, setTouched] = useState(() => ({ ...draft }));
+	const [errors, setErrors] = useState({});
+	const fields = useMemo(() => {
+		const out = [];
+		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 = {
+		...defaults,
+		...touched
+	};
+	const resolveActionId = (intent, nodeId) => nodeId ?? actions.find((action) => action.intent === intent)?.id ?? intent;
+	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 } : {},
+			...scope ? { scopeId: scope.scopeId } : {},
+			...withValues ? { value: collectScopedValues(values, scope) } : {}
+		});
+	};
+	return {
+		surfaceId,
+		actions,
+		values,
+		errors,
+		scopes,
+		resolveActionId,
+		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,
+				[key]: value
+			};
+			setTouched(next);
+			setErrors(({ [key]: _cleared, ...rest }) => rest);
+			if (runId) onDraftChange?.({
+				runId,
+				surfaceId,
+				value: next
+			});
+		},
+		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) {
+				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((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, 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[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": key,
+		...error ? {
+			"aria-invalid": true,
+			"aria-describedby": errorId
+		} : {}
+	};
+	const control = () => {
+		if (type === "textarea") return /* @__PURE__ */ jsx(Textarea, {
+			id: key,
+			...anchor,
+			invalid: Boolean(error),
+			value: typeof value === "string" ? value : "",
+			onChange: (event) => form.setValue(key, event.target.value)
+		});
+		if (type === "toggle") return /* @__PURE__ */ jsx(Switch, {
+			id: key,
+			...anchor,
+			checked: value === true,
+			onCheckedChange: (next) => form.setValue(key, next)
+		});
+		if (type === "select" || type === "multi-select") {
+			const multiple = type === "multi-select";
+			const indexOf = (candidate) => {
+				const index = options.findIndex((option) => option.value === candidate);
+				return index < 0 ? "" : String(index);
+			};
+			return /* @__PURE__ */ jsx("select", {
+				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(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),
+					children: option.label
+				}, index))
+			});
+		}
+		if (type === "file") return /* @__PURE__ */ jsx("input", {
+			id: key,
+			...anchor,
+			type: "file",
+			onChange: (event) => form.setValue(key, event.target.files?.[0]?.name ?? "")
+		});
+		return /* @__PURE__ */ jsx(Input, {
+			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(key, type === "number" ? Number(event.target.value) : event.target.value)
+		});
+	};
+	return /* @__PURE__ */ jsxs("label", {
+		className: "flex flex-col gap-1 text-sm",
+		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")
+			}) : null,
+			error ? /* @__PURE__ */ jsx("small", {
+				id: errorId,
+				role: "alert",
+				className: "text-xs text-destructive",
+				children: error
+			}) : null
+		]
+	});
+}
+/** catalog `Form` 的提交 / 取消按钮：提交带表单值，取消不带 */
+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": submitId,
+			children: str(props, "submitLabel", "Submit")
+		}), props["cancelLabel"] ? /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			size: "sm",
+			variant: "secondary",
+			"data-webskill-surface-action": cancelId,
+			onClick: () => form.emit(cancelId, scope),
+			children: str(props, "cancelLabel")
+		}) : null]
+	});
+}
+/** catalog `Button` 的唯一实现：submit 走带值提交，其余走裸动作 */
+function SurfaceButton({ form, props, nodeId, scope }) {
+	const intent = str(props, "action");
+	const actionId = form.resolveActionId(intent, nodeId);
+	return /* @__PURE__ */ jsx(Button, {
+		size: "sm",
+		type: "button",
+		disabled: props["disabled"] === true,
+		"data-webskill-surface-action": 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 就是宿主接线错了，必须失败而不是“点了没反应”。
+*/
+const CatalogSurfaceContext = createContext(void 0);
+function useCatalogSurfaceForm() {
+	const form = useContext(CatalogSurfaceContext);
+	if (!form) throw new WebSkillError("UI_UNAVAILABLE", "Catalog surface components must be rendered inside a CatalogSurfaceProvider");
+	return form;
+}
+/** 非 native 档的表单状态宿主：状态必须在 Renderer 之上，否则每次重渲染都会丢值 */
+function CatalogSurfaceProvider({ surfaceId, spec, actions, onAction, children }) {
+	const form = useSurfaceForm({
+		surfaceId,
+		spec,
+		actions,
+		onAction
+	});
+	return /* @__PURE__ */ jsx(CatalogSurfaceContext.Provider, {
+		value: form,
+		children
+	});
+}
+/** 当前子树所属的表单作用域；surface 上只有一个表单时为 undefined（行为与放宽前一致） */
+const FormScopeContext = createContext(void 0);
+/** 把实现表的条目包成真正的 React 组件，使其内部的 hook 调用处于自己的渲染周期 */
+function CatalogNode({ name, props, children }) {
+	const Impl = catalogComponentImpls[name];
+	if (!Impl) return null;
+	return /* @__PURE__ */ jsx(Impl, {
+		props,
+		children
+	});
+}
+function CatalogForm({ props, children }) {
+	const form = useCatalogSurfaceForm();
+	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,
+		scope: useContext(FormScopeContext)
+	});
+}
+function CatalogButton({ props }) {
+	return /* @__PURE__ */ jsx(SurfaceButton, {
+		form: useCatalogSurfaceForm(),
+		props,
+		scope: useContext(FormScopeContext)
+	});
+}
 /**
-* catalog 16 个组件的展示实现：json-render 与 OpenUI 两档共用同一份，
+* catalog 展示类组件的实现：json-render 与 OpenUI 两档共用同一份，
 * 避免"一个 catalog、多套 registry"退化成多套各自演进的视觉。
 * 交互（表单值收集 / action 回传）由各档的宿主组件负责。
 */
@@ -120240,50 +120574,36 @@ const catalogComponentImpls = {
 		const rows = Array.isArray(props["rows"]) ? props["rows"] : [];
 		return /* @__PURE__ */ jsxs(DataTable, {
 			"aria-label": str(props, "title", "Data"),
-			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("th", {
-				scope: "col",
-				children: column
-			}, column)) }) }), /* @__PURE__ */ jsx("tbody", { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { children: row.map((cell, cellIndex) => /* @__PURE__ */ jsx("td", { children: String(cell ?? "") }, cellIndex)) }, rowIndex)) })]
+			children: [/* @__PURE__ */ jsx("thead", {
+				className: "webskill-surface__table-header",
+				children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("th", {
+					scope: "col",
+					children: column
+				}, column)) })
+			}), /* @__PURE__ */ jsx("tbody", {
+				className: "webskill-surface__table-body",
+				children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { children: row.map((cell, cellIndex) => /* @__PURE__ */ jsx("td", { children: String(cell ?? "") }, cellIndex)) }, rowIndex))
+			})]
 		});
 	},
-	Chart: ({ props }) => {
-		const series = Array.isArray(props["series"]) ? props["series"] : [];
-		return /* @__PURE__ */ jsx(EChart, { chart: {
-			kind: str(props, "type", "bar"),
-			labels: Array.isArray(props["labels"]) ? props["labels"] : [],
-			series: series.map((item) => ({
-				name: item.name,
-				data: item.values
-			})),
-			...props["title"] ? { title: str(props, "title") } : {}
-		} });
-	},
+	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"))
 	}),
-	Form: ({ props, children }) => /* @__PURE__ */ jsxs("form", {
-		className: "flex flex-col gap-3",
-		children: [props["title"] ? /* @__PURE__ */ jsx("h3", {
-			className: "text-sm font-semibold text-ink",
-			children: str(props, "title")
-		}) : null, children]
-	}),
-	Field: ({ props }) => {
-		const name = str(props, "name");
-		return /* @__PURE__ */ jsxs("label", {
-			className: "flex flex-col gap-1 text-sm",
-			htmlFor: name,
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "text-ink",
-				children: str(props, "label", name)
-			}), str(props, "type") === "textarea" ? /* @__PURE__ */ jsx(Textarea, { id: name }) : /* @__PURE__ */ jsx(Input, { id: name })]
-		});
-	},
-	Button: ({ props }) => /* @__PURE__ */ jsx(Button, {
-		size: "sm",
-		children: str(props, "label")
-	}),
+	Form: CatalogForm,
+	Field: CatalogField,
+	Button: CatalogButton,
 	Alert: ({ props }) => /* @__PURE__ */ jsxs("div", {
 		role: "alert",
 		className: "rounded-md border border-border p-2 text-sm",
@@ -120300,4 +120620,4 @@ const catalogComponentImpls = {
 };
 
 //#endregion
-export { Checkbox as a, DropdownMenuCheckboxItem as c, Input as d, Markdown as f, Textarea as g, Switch as h, Button as i, DropdownMenuContent as l, Separator as m, catalogComponentImpls as n, DataTable as o, Select as p, Badge as r, DropdownMenu as s, EChart as t, DropdownMenuTrigger as u };
+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 };