@webskill/sdk 0.2.8 → 0.4.0

package/README.md

@@ -49,6 +49,12 @@ npm install @webskill/sdk
 React/Vue integrations require their respective peer dependencies
 (`react` + `react-dom`, or `vue`), which are optional.
 
+`zod` ships as a direct dependency: the `@webskill/sdk/ui` catalog references it
+in its static import graph and in its public types, so declaring it optional
+would misrepresent the artifact. Hosts do not need to install it themselves.
+`tar`, `oxc-parser` and `@modelcontextprotocol/sdk` remain optional peers —
+they are loaded lazily and only when the corresponding API is called.
+
 ## Requirements
 
 - Node.js >= 22.18 (native type stripping for `.ts` skill scripts)
@@ -214,6 +220,42 @@ import { MockLlmClient, MockUiBridge, InMemoryStore, MemoryArtifactStore } from
 const llm = new MockLlmClient([{ content: 'deterministic answer' }]);
 ```
 
+## `allowed-tools`
+
+A skill may narrow the tool surface it needs by declaring `allowed-tools` in its
+`SKILL.md` frontmatter. Three kinds of tools can be listed:
+
+```yaml
+allowed-tools:
+  - render # a script of this skill (scripts/render.ts)
+  - endpoint:github/create_issue # one tool of an MCP endpoint
+  - endpoint:github/* # every tool of an MCP endpoint
+  - mcp#read_file # one page-provided (WebMCP) tool
+```
+
+Matching rules:
+
+- Only whole-entry matches and a trailing `/*` are supported. Wildcards in any
+  other position are not, and a bare `endpoint:github` is **not** a prefix
+  wildcard — it simply matches nothing.
+- A bare identifier means a script of the declaring skill only. It never grants
+  access to another skill's script of the same name.
+
+When several skills are active at the same time:
+
+| Situation                                | Result                                                                                                   |
+| ---------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| No active skill declares `allowed-tools` | Unrestricted                                                                                             |
+| At least one active skill declares it    | A tool is allowed if it matches any declaring skill's list, **or** if some active skill declares nothing |
+
+Enforcement level differs per tool kind in 0.3.0:
+
+- **Scripts** — enforced since 0.0.5: a script outside the list is not
+  registered, and calling it by name returns `TOOL_NOT_FOUND`.
+- **MCP / WebMCP tools** — 0.3.0 only records a `run.warning` naming the tool
+  and the entry to add, and still allows the call. This becomes a rejection in
+  0.4.0, so treat the warning as a build error in your own pipeline.
+
 ## Stability
 
 This package follows semver starting at 0.1.0. Public symbols carry JSDoc

package/dist/browser.d.ts

@@ -1,5 +1,5 @@
-import { K as SkillInstallSource, M as FileStat, N as FileSystemProvider, O as ArchiveLimits, Y as SkillManifest, _ as RenderResultRequest, a as InteractionPolicy, c as LlmClient, d as LlmResponse, et as SkillsLockfile, f as LlmStreamEvent, nt as VerifyResult, o as InteractionRequest, s as InteractionResponse, v as UiBridge } from "./types-AmKCKJn_-BogJPQHU.js";
-import { N as NetworkPolicy, Ot as parseBridgeRequest, Q as ScriptExecutor, Z as ScriptExecutionContext, d as BridgeCapabilities, it as ToolResult, m as BridgeResponse, nt as ToolDefinition, p as BridgeRequest, pt as bridgeError, u as ApprovalScope, ut as WebSkillApi, v as ExternalSkillProvider, y as ExternalToolSource } from "./index-QrHtAudz.js";
+import { D as ArchiveLimits, M as FileStat, N as FileSystemProvider, a as InteractionPolicy, c as LlmClient, et as SkillInstallSource, f as LlmResponse, gt as VerifyResult, it as SkillManifest, o as InteractionRequest, p as LlmStreamEvent, s as InteractionResponse, ut as SkillsLockfile, v as RenderResultRequest, y as UiBridge } from "./types-7Wcg--Vh-1YlQ4jF9.js";
+import { Dt as ToolDefinition, It as WebSkillApi, V as NetworkPolicy, b as ExternalSkillProvider, d as ApprovalScope, f as BridgeCapabilities, gt as ScriptExecutor, h as BridgeResponse, ht as ScriptExecutionContext, kt as ToolResult, m as BridgeRequest, tn as parseBridgeRequest, x as ExternalToolSource, zt as bridgeError } from "./index-DLfR2Y6I.js";
 //#region ../browser/dist/index.d.ts
 //#region src/fs/featureDetection.d.ts
 /** 检测当前环境是否可用 OPFS（navigator.storage.getDirectory） */

package/dist/browser.js

@@ -1,6 +1,6 @@
-import { C as messageOf, D as readResponseWithLimit, E as parseSkillPackManifest, M as unzipWithLimits, N as validateSkills, P as verifyManifest, T as parseSkillMarkdown, b as exportSkills, c as SkillDiscovery, d as assertRemoteUrlAllowed, h as buildManifest, i as SKILL_MANIFEST_FILE, j as resolveInsideRoot, m as buildCatalog, p as atomicWriteText, r as SKILLS_LOCKFILE, s as SKILL_PACK_FILE, u as WebSkillError, x as isValidSkillName } from "./dist-BQzncxXg.js";
-import { C as bridgeError, E as createWebSkillApi, I as normalizeToolContent, L as normalizeToolError, M as mergeCatalogEntries, N as networkPolicyLibSource, R as parseBridgeRequest, c as FsArtifactStore, h as ProgressiveRouter, i as AgentLoop, l as FsMemoryStore, m as OpenAiCompatibleClient, o as CapabilityApproval, u as FsRunSnapshotStore, y as RUN_SNAPSHOT_SCHEMA_VERSION } from "./dist-B9VLwOME.js";
-import { n as MockLlmClient } from "./testing-BUoXvm1u.js";
+import { A as parseSkillMarkdown, B as unzipWithLimits, H as verifyManifest, L as resolveInsideRoot, M as readResponseWithLimit, O as messageOf, T as isValidSkillName, V as validateSkills, _ as atomicWriteText, f as SkillDiscovery, h as assertRemoteUrlAllowed, j as parseSkillPackManifest, m as WebSkillError, o as SKILLS_LOCKFILE, r as MANIFEST_EXCLUDED_FILES, s as SKILL_MANIFEST_FILE, u as SKILL_PACK_FILE, v as buildCatalog, w as exportSkills, y as buildManifest } from "./dist-8oQRa8Xz.js";
+import { H as normalizeToolContent, O as bridgeError, R as mergeCatalogEntries, U as normalizeToolError, W as parseBridgeRequest, _ as OpenAiCompatibleClient, d as FsRunSnapshotStore, i as AgentLoop, j as createWebSkillApi, l as FsArtifactStore, o as CapabilityApproval, u as FsMemoryStore, v as ProgressiveRouter, z as networkPolicyLibSource } from "./dist-C-Sh0MDU.js";
+import { n as MockLlmClient } from "./testing-DDCJWvgA.js";
 
 //#region ../browser/dist/index.js
 /** 检测当前环境是否可用 OPFS（navigator.storage.getDirectory） */
@@ -702,10 +702,9 @@ var BrowserSkillManager = class {
 		}
 	}
 	async #createManifest(skillRoot, input) {
-		const excluded = /* @__PURE__ */ new Set([SKILL_MANIFEST_FILE, SKILLS_LOCKFILE]);
 		const files = [];
 		for (const rel of (await listFiles(this.#fs, skillRoot)).sort()) {
-			if (excluded.has(rel.split("/").pop() ?? "")) continue;
+			if (MANIFEST_EXCLUDED_FILES.has(rel.split("/").pop() ?? "")) continue;
 			const content = await this.#fs.readBinary(`${skillRoot}/${rel}`);
 			files.push({
 				path: rel,
@@ -1411,10 +1410,6 @@ function startWorkerRuntimeHost(scope, overrides = {}) {
 				(async () => {
 					const snapshot = await state.snapshotStore.load(message.runId);
 					if (!snapshot) throw new WebSkillError("RUN_SNAPSHOT_NOT_FOUND", `No snapshot found for run "${message.runId}"`);
-					if (snapshot.schemaVersion !== 1) {
-						await state.snapshotStore.delete(message.runId);
-						throw new WebSkillError("RUN_SNAPSHOT_INCOMPATIBLE", `Snapshot for run "${message.runId}" has incompatible schemaVersion ${String(snapshot.schemaVersion)}`);
-					}
 					if (Date.now() > Date.parse(snapshot.interactionExpiresAt)) {
 						await state.snapshotStore.delete(message.runId);
 						const endedAt = (/* @__PURE__ */ new Date()).toISOString();

package/dist/{catalogComponents-C_V39rbF-BOHveMWa.js → catalogComponents-KsujmL4b-Clx1kCnU.js}

@@ -1,4 +1,6 @@
 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 minpath$1 from "node:path";
 import { fileURLToPath as urlToPath$1 } from "node:url";
 import * as React$10 from "react";
@@ -99792,32 +99794,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`.
@@ -120111,75 +120087,279 @@ 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-KsujmL4b.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 values = {
+		...useMemo(() => Object.fromEntries(fields.filter((field) => field["defaultValue"] !== void 0).map((field) => [String(field["name"]), field["defaultValue"]])), [fields]),
+		...touched
+	};
+	const resolveActionId = (intent, nodeId) => nodeId ?? actions.find((action) => action.intent === intent)?.id ?? intent;
+	const dispatch = (actionId, withValues) => {
+		const declared = actions.find((action) => action.id === actionId);
+		onAction?.({
+			surfaceId,
+			actionId,
+			intent: declared?.intent ?? "select",
+			...declared?.nonce ? { nonce: declared.nonce } : {},
+			...withValues ? { value: { ...values } } : {}
+		});
+	};
+	return {
+		surfaceId,
+		actions,
+		values,
+		errors,
+		resolveActionId,
+		setValue: (name, value) => {
+			const next = {
+				...touched,
+				[name]: value
+			};
+			setTouched(next);
+			setErrors(({ [name]: _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"])]));
+			if (missing.length > 0) {
+				setErrors(Object.fromEntries(missing.map((field) => [String(field["name"]), REQUIRED_MESSAGE])));
+				return;
+			}
+			setErrors({});
+			dispatch(resolveActionId(intent, nodeId), true);
+		}
+	};
+}
+/** catalog `Field` 的唯一控件实现：8 种 type 的取值语义在这里定死 */
+function SurfaceField({ form, props }) {
+	const name = str(props, "name");
+	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 options = Array.isArray(props["options"]) ? props["options"] : [];
+	/** 控件的机器可读锚点：宿主与测试据此定位字段，不依赖标签文案 */
+	const anchor = {
+		"data-webskill-surface-control": name,
+		...error ? {
+			"aria-invalid": true,
+			"aria-describedby": errorId
+		} : {}
+	};
+	const control = () => {
+		if (type === "textarea") return /* @__PURE__ */ jsx(Textarea, {
+			id: name,
+			...anchor,
+			invalid: Boolean(error),
+			value: typeof value === "string" ? value : "",
+			onChange: (event) => form.setValue(name, event.target.value)
+		});
+		if (type === "toggle") return /* @__PURE__ */ jsx(Switch, {
+			id: name,
+			...anchor,
+			checked: value === true,
+			onCheckedChange: (next) => form.setValue(name, 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: name,
+				...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));
+				},
+				children: options.map((option, index) => /* @__PURE__ */ jsx("option", {
+					value: String(index),
+					children: option.label
+				}, index))
+			});
+		}
+		if (type === "file") return /* @__PURE__ */ jsx("input", {
+			id: name,
+			...anchor,
+			type: "file",
+			onChange: (event) => form.setValue(name, event.target.files?.[0]?.name ?? "")
+		});
+		return /* @__PURE__ */ jsx(Input, {
+			id: name,
+			...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)
+		});
+	};
+	return /* @__PURE__ */ jsxs("label", {
+		className: "flex flex-col gap-1 text-sm",
+		htmlFor: name,
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: "text-ink",
+				children: [label, required ? " *" : ""]
+			}),
+			control(),
+			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 }) {
+	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, {
+			type: "button",
+			size: "sm",
+			variant: "secondary",
+			"data-webskill-surface-action": form.resolveActionId("cancel"),
+			onClick: () => form.emit(form.resolveActionId("cancel")),
+			children: str(props, "cancelLabel")
+		}) : null]
+	});
+}
+/** catalog `Button` 的唯一实现：submit 走带值提交，其余走裸动作 */
+function SurfaceButton({ form, props, nodeId }) {
+	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) : form.emit(actionId),
+		children: str(props, "label")
+	});
+}
+/**
+* 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
+	});
+}
+/** 把实现表的条目包成真正的 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();
+	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
+			})
+		]
+	});
+}
+function CatalogField({ props }) {
+	return /* @__PURE__ */ jsx(SurfaceField, {
+		form: useCatalogSurfaceForm(),
+		props
+	});
+}
+function CatalogButton({ props }) {
+	return /* @__PURE__ */ jsx(SurfaceButton, {
+		form: useCatalogSurfaceForm(),
+		props
+	});
+}
 /**
 * catalog 16 个组件的展示实现：json-render 与 OpenUI 两档共用同一份，
 * 避免"一个 catalog、多套 registry"退化成多套各自演进的视觉。
@@ -120240,50 +120420,26 @@ 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) }),
 	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 +120456,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 { 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 };