@webskill/sdk 0.10.0 → 0.11.0

package/dist/{catalogComponents-DTcYfpLQ-CcoOaz-Z.js → catalogComponents-BFoqpT1v-CjUBZ3bc.js}

@@ -1,6 +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 { h as WebSkillError } from "./dist-Bev6i6Ip.js";
-import { D as evaluateFieldCondition, I as qualifyFieldName, S as collectScopedValues, Z as DEFAULT_SURFACE_FORM_TEXTS, it as chartSpecFromProps, st as mountEchart, ut as resolveSurfaceFormTexts, x as collectFormScopes } from "./dist-1OFC-zax.js";
+import { E as collectScopedValues, H as qualifyFieldName, I as gaugePercent, T as collectFormScopes, _t as mountEchart, bt as resolveSurfaceFormTexts, j as evaluateFieldCondition, mt as chartSpecFromProps, ot as DEFAULT_SURFACE_FORM_TEXTS } from "./dist-DTHZS2k1.js";
 import minpath$1 from "node:path";
 import { fileURLToPath as urlToPath$1 } from "node:url";
 import { z } from "zod";
@@ -100992,6 +100992,7 @@ function RadioGroup({ options, className = "", invalid = false, orientation, ...
 		className: `flex ${orientation === "horizontal" ? "flex-row flex-wrap gap-4" : "flex-col gap-2"} ${className}`,
 		children: options.map((option) => {
 			const itemId = `${instanceId}-${option.value}`;
+			const labelId = `${itemId}-label`;
 			const descId = option.description !== void 0 ? `${itemId}-desc` : void 0;
 			return /* @__PURE__ */ jsxs("label", {
 				htmlFor: itemId,
@@ -101000,12 +101001,14 @@ function RadioGroup({ options, className = "", invalid = false, orientation, ...
 					id: itemId,
 					value: option.value,
 					disabled: option.disabled,
+					"aria-labelledby": labelId,
 					"aria-describedby": descId,
 					className: `mt-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-full border bg-surface shadow-xs outline-none transition-colors disabled:cursor-not-allowed data-[state=checked]:border-primary ${invalid ? "border-destructive focus-visible:ring-destructive/20" : "border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/20"}`,
 					children: /* @__PURE__ */ jsx(RadioGroupIndicator, { className: "size-2 rounded-full bg-primary" })
 				}), /* @__PURE__ */ jsxs("span", {
 					className: "min-w-0",
 					children: [/* @__PURE__ */ jsx("span", {
+						id: labelId,
 						className: "block",
 						children: option.label
 					}), option.description !== void 0 && /* @__PURE__ */ jsx("span", {
@@ -123564,7 +123567,7 @@ function u(n, o, u) {
 }
 
 //#endregion
-//#region ../ui-react/dist/catalogComponents-DTcYfpLQ.js
+//#region ../ui-react/dist/catalogComponents-BFoqpT1v.js
 /** echarts 挂载点：surface 图表与 catalog 声明树的 Chart 节点共用，实现在 `@webskill/ui`，与 A2UI 档同一份 */
 function EChart({ chart }) {
 	const containerRef = useRef(null);
@@ -123937,6 +123940,7 @@ function SurfaceField({ form, props, scope, binding }) {
 	};
 	const errorId = error ? `webskill-surface-${form.surfaceId}-${key}-error` : void 0;
 	const labelId = `webskill-surface-${form.surfaceId}-${key}-label`;
+	const controlId = `webskill-surface-${form.surfaceId}-${key}`;
 	const options = Array.isArray(props["options"]) ? props["options"] : [];
 	const suggestion = props["suggestion"];
 	const texts = useSurfaceFormTexts();
@@ -123956,20 +123960,20 @@ function SurfaceField({ form, props, scope, binding }) {
 	if (!binding && !form.isFieldVisible(key)) return null;
 	const control = () => {
 		if (type === "textarea") return /* @__PURE__ */ jsx(Textarea, {
-			id: key,
+			id: controlId,
 			...anchor,
 			invalid: Boolean(error),
 			value: typeof value === "string" ? value : "",
 			onChange: (event) => setValue(event.target.value)
 		});
 		if (type === "toggle") return /* @__PURE__ */ jsx(Switch, {
-			id: key,
+			id: controlId,
 			...anchor,
 			checked: value === true,
 			onCheckedChange: (next) => setValue(next)
 		});
 		if (asRadioGroup) return /* @__PURE__ */ jsx(RadioGroup, {
-			id: key,
+			id: controlId,
 			...anchor,
 			"aria-labelledby": labelId,
 			invalid: Boolean(error),
@@ -123987,7 +123991,7 @@ function SurfaceField({ form, props, scope, binding }) {
 				value: String(index)
 			}));
 			if (multiple) return /* @__PURE__ */ jsx("select", {
-				id: key,
+				id: controlId,
 				...anchor,
 				multiple: true,
 				value: Array.isArray(value) ? value.map((item) => optionIndex(options, item)) : [],
@@ -123998,7 +124002,7 @@ function SurfaceField({ form, props, scope, binding }) {
 				}, option.value))
 			});
 			return /* @__PURE__ */ jsx(Select, {
-				id: key,
+				id: controlId,
 				...anchor,
 				options: optionList,
 				value: optionIndex(options, value),
@@ -124006,14 +124010,14 @@ function SurfaceField({ form, props, scope, binding }) {
 			});
 		}
 		if (type === "file") return /* @__PURE__ */ jsx("input", {
-			id: key,
+			id: controlId,
 			...anchor,
 			type: "file",
 			className: "w-full cursor-pointer rounded-md border border-input bg-surface px-3 py-2 text-sm text-muted shadow-xs transition-colors outline-none file:mr-3 file:cursor-pointer file:rounded-md file:border-0 file:bg-primary file:px-3 file:py-1 file:text-sm file:font-medium file:text-primary-foreground hover:file:bg-primary/90 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50",
 			onChange: (event) => setValue(event.target.files?.[0]?.name ?? "")
 		});
 		return /* @__PURE__ */ jsx(Input, {
-			id: key,
+			id: controlId,
 			...anchor,
 			invalid: Boolean(error),
 			type: type === "number" ? "number" : type === "date" ? "date" : type === "password" ? "password" : "text",
@@ -124027,7 +124031,7 @@ function SurfaceField({ form, props, scope, binding }) {
 			/* @__PURE__ */ jsx(FieldLabel, {
 				id: labelId,
 				required,
-				...asRadioGroup ? {} : { htmlFor: key },
+				...asRadioGroup ? {} : { htmlFor: controlId },
 				children: label
 			}),
 			control(),
@@ -124188,13 +124192,49 @@ function SpecTabs({ props, children }) {
 		}), panels[index] ?? null]
 	});
 }
+/** 语义档 → 最小列宽。刻意不收像素值：模型给不准，且会绕开 token 体系 */
+const MIN_COLUMN_WIDTH = {
+	sm: "12rem",
+	md: "16rem",
+	lg: "22rem"
+};
 function SpecGrid({ props, children }) {
+	if (props["columns"] === "auto") return /* @__PURE__ */ jsx("div", {
+		className: "grid gap-3",
+		"data-webskill-multicol": "",
+		style: { gridTemplateColumns: `repeat(auto-fit, minmax(${MIN_COLUMN_WIDTH[str(props, "minColumnWidth", "md")] ?? MIN_COLUMN_WIDTH["md"]}, 1fr))` },
+		children
+	});
 	return /* @__PURE__ */ jsx("div", {
 		className: "grid gap-3",
+		"data-webskill-multicol": "",
 		style: { gridTemplateColumns: `repeat(${Math.min(4, Math.max(2, num(props, "columns", 2)))}, minmax(0, 1fr))` },
 		children
 	});
 }
+const SPLIT_RATIO = {
+	"1:1": "1fr 1fr",
+	"2:1": "2fr 1fr",
+	"3:1": "3fr 1fr",
+	"1:2": "1fr 2fr"
+};
+/**
+* 主次分栏（FR-12.3）。窄容器降级为纵向堆叠——用容器查询而不是视口断点，
+* 因为 surface 可能被塞进任意宽度的宿主容器里。
+*/
+function SpecSplit({ props, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "webskill-spec-split grid gap-3",
+		"data-webskill-multicol": "",
+		style: { "--split-ratio": SPLIT_RATIO[str(props, "ratio", "1:1")] ?? SPLIT_RATIO["1:1"] },
+		children
+	});
+}
+/** `Card` 的跨列与内间距（FR-12.4）。`span` 只在 `Grid` 内有意义，别处静默无效 */
+function cardLayoutProps(props) {
+	const density = str(props, "density", "default");
+	return { className: `${density === "compact" ? "p-2" : density === "comfortable" ? "p-5" : "p-3"} ${num(props, "span", 1) === 2 ? "webskill-spec-card--span2" : ""}`.trim() };
+}
 function SpecTimeline({ props }) {
 	return /* @__PURE__ */ jsx("ol", {
 		className: "flex flex-col gap-2 pl-4",
@@ -124241,6 +124281,189 @@ function SpecProgress({ props }) {
 	});
 }
 /**
+* 0.11.0 分册 13 的 8 个新组件。与上面四个同理：四档渲染共用这一份，
+* 避免同一个 spec 在不同档里长成不同版式（FR-12.5 / AC-G15）。
+*
+* `palette` 是**装饰色**，与表状态的 `tone` 语义不重叠；取值是色板名不是颜色值，
+* 映射到 design token 后深浅色主题自动跟随（AC-13.6）。
+*/
+const PALETTE_CLASS = {
+	sky: "webskill-palette-sky",
+	violet: "webskill-palette-violet",
+	amber: "webskill-palette-amber",
+	rose: "webskill-palette-rose",
+	emerald: "webskill-palette-emerald"
+};
+function paletteClass(props) {
+	const name = str(props, "palette");
+	return name && PALETTE_CLASS[name] ? PALETTE_CLASS[name] : "";
+}
+/** 白名单外的图标名不渲染成图形，降级为可读文本——渲染不出来的方块比没有更糟 */
+const ICON_GLYPH = {
+	info: "ℹ",
+	check: "✓",
+	alert: "⚠",
+	x: "✕",
+	clock: "◷",
+	calendar: "▤",
+	user: "☺",
+	star: "★",
+	search: "⌕",
+	settings: "⚙",
+	download: "↓",
+	link: "🔗",
+	chart: "▥",
+	file: "▢",
+	folder: "▤",
+	mail: "✉"
+};
+function SpecIcon({ props }) {
+	const name = str(props, "name");
+	const glyph = ICON_GLYPH[name];
+	return /* @__PURE__ */ jsx("span", {
+		className: `inline-flex size-4 items-center justify-center text-sm ${paletteClass(props)}`,
+		"data-icon": name,
+		role: "img",
+		"aria-label": name,
+		children: glyph ?? name
+	});
+}
+const RATIO_CLASS = {
+	"1:1": "aspect-square",
+	"4:3": "aspect-[4/3]",
+	"16:9": "aspect-video"
+};
+function SpecImage({ props }) {
+	const ratio = str(props, "ratio", "auto");
+	return /* @__PURE__ */ jsx("img", {
+		src: str(props, "src"),
+		alt: str(props, "alt"),
+		className: `w-full rounded-md object-cover ${RATIO_CLASS[ratio] ?? ""}`
+	});
+}
+function SpecQuote({ props }) {
+	const by = str(props, "by");
+	return /* @__PURE__ */ jsxs("blockquote", {
+		className: "border-l-2 border-border pl-3 text-sm italic text-ink",
+		children: [str(props, "text"), by ? /* @__PURE__ */ jsxs("footer", {
+			className: "mt-1 text-xs not-italic text-muted",
+			children: ["— ", by]
+		}) : null]
+	});
+}
+function SpecCallout({ props }) {
+	const title = str(props, "title");
+	return /* @__PURE__ */ jsxs("aside", {
+		className: `rounded-md border border-border bg-subtle p-3 ${paletteClass(props)}`,
+		children: [title ? /* @__PURE__ */ jsx("strong", {
+			className: "block text-sm text-ink",
+			children: title
+		}) : null, /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-ink",
+			children: str(props, "text")
+		})]
+	});
+}
+function SpecKeyValue({ props }) {
+	return /* @__PURE__ */ jsx("dl", {
+		className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm",
+		children: list(props["items"]).map((item, index) => /* @__PURE__ */ jsxs("div", {
+			className: "contents",
+			children: [/* @__PURE__ */ jsx("dt", {
+				className: "text-muted",
+				children: str(item, "label")
+			}), /* @__PURE__ */ jsx("dd", {
+				className: "text-ink",
+				children: str(item, "value")
+			})]
+		}, index))
+	});
+}
+function SpecGauge({ props }) {
+	const min = num(props, "min", 0);
+	const max = num(props, "max", 100);
+	const value = num(props, "value", min);
+	const percent = gaugePercent(value, min, max);
+	const label = str(props, "label");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1",
+		"data-tone": str(props, "tone", "neutral"),
+		children: [
+			label ? /* @__PURE__ */ jsx("span", {
+				className: "text-xs text-muted",
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				role: "meter",
+				"aria-label": label || "Gauge",
+				"aria-valuenow": value,
+				"aria-valuemin": min,
+				"aria-valuemax": max,
+				className: "h-2 w-full overflow-hidden rounded-full bg-subtle",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "h-full bg-accent",
+					style: { width: `${percent}%` }
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-sm font-medium text-ink",
+				children: value
+			})
+		]
+	});
+}
+function SpecAccordion({ props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-1",
+		children: list(props["items"]).map((item, index) => /* @__PURE__ */ jsxs("details", {
+			className: "rounded-md border border-border px-3 py-2",
+			children: [/* @__PURE__ */ jsx("summary", {
+				className: "cursor-pointer text-sm font-medium text-ink",
+				children: str(item, "title")
+			}), /* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-sm text-ink",
+				children: str(item, "text")
+			})]
+		}, index))
+	});
+}
+function SpecCarousel({ props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex snap-x snap-mandatory gap-3 overflow-x-auto pb-1",
+		role: "group",
+		"aria-label": "Carousel",
+		children: list(props["items"]).map((item, index) => /* @__PURE__ */ jsxs("figure", {
+			className: "w-48 shrink-0 snap-start rounded-md border border-border p-2",
+			children: [
+				item["src"] ? /* @__PURE__ */ jsx("img", {
+					src: str(item, "src"),
+					alt: str(item, "title"),
+					className: "mb-1 w-full rounded object-cover"
+				}) : null,
+				/* @__PURE__ */ jsx("figcaption", {
+					className: "text-sm font-medium text-ink",
+					children: str(item, "title")
+				}),
+				item["text"] ? /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-muted",
+					children: str(item, "text")
+				}) : null
+			]
+		}, index))
+	});
+}
+/**
+* surface 级视觉档（FR-13.4）：只认**根节点**上的 `theme`。
+*
+* 刻意放在这里而不是渲染器文件里：`catalog-props-declared` 护栏按「最近的
+* `case 'Name':`」归属 props 读取，写在 switch 之后会被算到最后一个组件头上。
+* `office` 是缺省档，返回 undefined 让根容器一个属性都不加（AC-13.8 的回归基线）。
+*/
+function surfaceThemeOf(node) {
+	const value = node?.props?.["theme"];
+	return typeof value === "string" && value !== "office" ? value : void 0;
+}
+/**
 * json-render 与 OpenUI 两档的 Renderer 都只把 props 交给组件实现，拿不到节点 id，
 * 也拿不到表单状态，因此表单值与动作回传统一走这个 Context。
 * 缺省值故意不给空实现：没包 Provider 就是宿主接线错了，必须失败而不是“点了没反应”。
@@ -124292,7 +124515,10 @@ function CatalogForm({ props, children }) {
 					className: "text-sm font-semibold text-ink",
 					children: str(props, "title")
 				}) : null,
-				children,
+				/* @__PURE__ */ jsx("div", {
+					className: "webskill-spec-form__fields",
+					children
+				}),
 				/* @__PURE__ */ jsx(SurfaceFormButtons, {
 					form,
 					props,
@@ -124366,7 +124592,7 @@ const catalogComponentImpls = {
 		children
 	}),
 	Card: ({ props, children }) => /* @__PURE__ */ jsxs("section", {
-		className: "webskill-spec-card flex flex-col gap-2 rounded-lg border border-border bg-card p-3",
+		className: `webskill-spec-card flex flex-col gap-2 rounded-lg border border-border bg-card ${cardLayoutProps(props).className} ${paletteClass(props)}`,
 		children: [
 			/* @__PURE__ */ jsx("h3", {
 				className: "text-sm font-semibold text-ink",
@@ -124381,7 +124607,7 @@ const catalogComponentImpls = {
 	}),
 	Separator: () => /* @__PURE__ */ jsx(Separator, {}),
 	Heading: ({ props }) => /* @__PURE__ */ jsx("h3", {
-		className: "text-sm font-semibold text-ink",
+		className: `text-sm font-semibold text-ink ${paletteClass(props)}`,
 		children: str(props, "text")
 	}),
 	Text: ({ props }) => /* @__PURE__ */ jsx("p", {
@@ -124391,6 +124617,7 @@ const catalogComponentImpls = {
 	Markdown: ({ props }) => /* @__PURE__ */ jsx(Markdown, { children: str(props, "text") }),
 	Badge: ({ props }) => /* @__PURE__ */ jsx(Badge, {
 		tone: "neutral",
+		className: paletteClass(props),
 		children: str(props, "text")
 	}),
 	Metric: ({ props }) => /* @__PURE__ */ jsxs("div", {
@@ -124436,7 +124663,19 @@ const catalogComponentImpls = {
 		props,
 		children
 	}),
+	Split: ({ props, children }) => /* @__PURE__ */ jsx(SpecSplit, {
+		props,
+		children
+	}),
 	Timeline: ({ props }) => /* @__PURE__ */ jsx(SpecTimeline, { props }),
+	Icon: ({ props }) => /* @__PURE__ */ jsx(SpecIcon, { props }),
+	Image: ({ props }) => /* @__PURE__ */ jsx(SpecImage, { props }),
+	Quote: ({ props }) => /* @__PURE__ */ jsx(SpecQuote, { props }),
+	Callout: ({ props }) => /* @__PURE__ */ jsx(SpecCallout, { props }),
+	KeyValue: ({ props }) => /* @__PURE__ */ jsx(SpecKeyValue, { props }),
+	Gauge: ({ props }) => /* @__PURE__ */ jsx(SpecGauge, { props }),
+	Accordion: ({ props }) => /* @__PURE__ */ jsx(SpecAccordion, { props }),
+	Carousel: ({ props }) => /* @__PURE__ */ jsx(SpecCarousel, { props }),
 	Progress: ({ props }) => /* @__PURE__ */ jsx(SpecProgress, { props }),
 	FileLink: ({ props }) => /* @__PURE__ */ jsx("span", {
 		className: "text-sm text-ink",
@@ -124462,4 +124701,4 @@ const catalogComponentImpls = {
 };
 
 //#endregion
-export { DropdownMenuContent as C, Separator as D, Markdown as E, DropdownMenuCheckboxItem as S, Input as T, useSurfaceFormTexts as _, SpecProgress as a, DataTable as b, SurfaceButton as c, SurfaceFormButtons as d, SurfaceFormTextsProvider as f, useSurfaceForm as g, useCatalogSurfaceForm as h, SpecGrid as i, SurfaceField as l, str as m, CatalogSurfaceProvider as n, SpecTabs as o, catalogComponentImpls as p, EChart as r, SpecTimeline as s, CatalogNode as t, SurfaceFieldArray as u, Badge as v, DropdownMenuTrigger as w, DropdownMenu as x, Button as y };
+export { Badge as A, catalogComponentImpls as C, useCatalogSurfaceForm as D, surfaceThemeOf as E, DropdownMenuContent as F, DropdownMenuTrigger as I, Input as L, DataTable as M, DropdownMenu as N, useSurfaceForm as O, DropdownMenuCheckboxItem as P, Markdown as R, cardLayoutProps as S, str as T, SurfaceButton as _, SpecCallout as a, SurfaceFormButtons as b, SpecGrid as c, SpecKeyValue as d, SpecProgress as f, SpecTimeline as g, SpecTabs as h, SpecAccordion as i, Button as j, useSurfaceFormTexts as k, SpecIcon as l, SpecSplit as m, CatalogSurfaceProvider as n, SpecCarousel as o, SpecQuote as p, EChart as r, SpecGauge as s, CatalogNode as t, SpecImage as u, SurfaceField as v, paletteClass as w, SurfaceFormTextsProvider as x, SurfaceFieldArray as y, Separator as z };