@huaqiu/component-gen-app 0.3.6

package/lib/index.js

@@ -0,0 +1,2550 @@
+import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { BoardParser, SchematicParser } from "@huaqiu/kicad-sexpr-parser";
+import { renderSymbol } from "@huaqiu/ecad-renderer/symbol";
+import { renderFootprint } from "@huaqiu/ecad-renderer/footprint";
+//#region src/copy/zh.ts
+/**
+* `@huaqiu/component-gen-app` — zh copy pack (fallback everywhere).
+*
+* House i18n convention (`dsh-pcb-eda`): `ZH as const` → `CopyKey` →
+* `EN: Record<CopyKey, string>` so a missing EN key is a compile error.
+* Punctuation is i18n too（中文全角：；）.
+*/
+const ZH = {
+	app: {
+		title: "华秋元器件生成",
+		symbolTitle: "符号生成",
+		footprintTitle: "封装生成",
+		footprintTooltip: "打开封装生成",
+		symbolTooltip: "打开符号生成",
+		close: "关闭",
+		back: "返回",
+		loading: "加载中…",
+		error: "出错了",
+		unknownError: "未知错误"
+	},
+	upload: {
+		drop: "拖拽图片到此处，或点击上传",
+		paste: "也可直接 Ctrl/⌘+V 粘贴图片",
+		browse: "选择图片",
+		imageTooLarge: "图片过大，请使用 4MiB 以内的图片",
+		noImage: "请先上传图片",
+		replace: "更换图片",
+		uploading: "上传中…",
+		hint: "提示"
+	},
+	symbol: {
+		generate: "生成符号",
+		regenerate: "重新生成",
+		instructionPlaceholder: "可选：补充生成说明，如“3 引脚 LDO，引脚 1 为 VIN”",
+		progress: "正在生成符号…",
+		ready: "生成完成",
+		failed: "生成失败",
+		download: "下载 .kicad_sym",
+		save: "保存到历史",
+		saved: "已保存到历史"
+	},
+	footprint: {
+		extract: "提取尺寸",
+		generate: "生成封装",
+		regenerate: "重新生成",
+		hintPlaceholder: "可选：封装类型提示，如 BGA / QFN / SOP",
+		extractProgress: "正在提取封装尺寸…",
+		generateProgress: "正在生成封装…",
+		ready: "生成完成",
+		failed: "生成失败",
+		needsConfirmation: "请确认或修改提取到的封装尺寸",
+		download: "下载 .kicad_mod",
+		save: "保存到历史",
+		saved: "已保存到历史",
+		directGenerated: "已自动生成标准封装，可预览后下载",
+		autoGenerated: "自动生成",
+		confirm: "确认并生成",
+		cancel: "取消"
+	},
+	editor: {
+		essential: "基本参数",
+		advanced: "高级参数",
+		width: "宽度",
+		height: "长度",
+		pinCount: "引脚数",
+		pitch: "间距",
+		packageType: "封装类型",
+		fileName: "文件名",
+		editedTag: "已修改",
+		aiTag: "AI 提取",
+		dragHint: "拖动控制柄调整 W / H",
+		validationOutOfRange: "超出范围",
+		validationMinGtMax: "最小值大于最大值",
+		validationInvalid: "无效数值",
+		unit: "mm",
+		body: "本体",
+		pins: "{count} 引脚",
+		validationIssue: "{n} 处数值需要修正",
+		validationOk: "数值有效",
+		issueOutOfRange: "超出允许范围",
+		issueMinGtMax: "最小值大于最大值",
+		confirmLabel: "确认",
+		cancelLabel: "取消"
+	},
+	field: {
+		width: "宽度",
+		height: "长度",
+		length: "长度",
+		depth: "深度",
+		span: "跨距",
+		bodyWidth: "本体宽度",
+		bodyLength: "本体长度",
+		bodyHeight: "本体高度",
+		boardWidth: "板宽",
+		boardHeight: "板高",
+		overallWidth: "总宽度",
+		overallLength: "总长度",
+		overallHeight: "总高度",
+		pitch: "间距",
+		pitchX: "X 间距",
+		pitchY: "Y 间距",
+		leadPitch: "引线间距",
+		padWidth: "焊盘宽",
+		padLength: "焊盘长",
+		padHeight: "焊盘高",
+		leadWidth: "引线宽",
+		leadLength: "引线长",
+		leadSpan: "引线跨距",
+		pinCount: "引脚数",
+		rows: "行数",
+		columns: "列数",
+		standoff: "离地高度",
+		maxOf: "{field} 最大值",
+		minOf: "{field} 最小值"
+	},
+	history: {
+		title: "历史记录",
+		empty: "暂无历史",
+		symbol: "符号",
+		footprint: "封装",
+		generated: "已生成",
+		failed: "失败",
+		cancelled: "已取消",
+		rename: "重命名",
+		delete: "删除",
+		download: "下载",
+		reopen: "打开",
+		view: "查看历史",
+		createdAt: "创建时间",
+		loadMore: "加载更多",
+		noMore: "没有更多了"
+	},
+	auth: {
+		notLoggedIn: "未登录华秋账号",
+		login: "登录华秋 EDA",
+		loginRequired: "该功能需要登录华秋 EDA 账号",
+		loggedIn: "已登录"
+	},
+	status: {
+		queued: "排队中",
+		running: "进行中",
+		needsConfirmation: "待确认",
+		completed: "已完成",
+		failed: "失败",
+		cancelled: "已取消"
+	}
+};
+//#endregion
+//#region src/copy/en.ts
+const EN = {
+	app: {
+		title: "Huaqiu Component Gen",
+		symbolTitle: "Symbol Gen",
+		footprintTitle: "Footprint Gen",
+		footprintTooltip: "Open footprint generator",
+		symbolTooltip: "Open symbol generator",
+		close: "Close",
+		back: "Back",
+		loading: "Loading…",
+		error: "Error",
+		unknownError: "Unknown error"
+	},
+	upload: {
+		drop: "Drop an image here, or click to upload",
+		paste: "Or paste with Ctrl/⌘+V",
+		browse: "Choose image",
+		imageTooLarge: "Image too large; keep it under 4 MiB",
+		noImage: "Upload an image first",
+		replace: "Replace image",
+		uploading: "Uploading…",
+		hint: "Hint"
+	},
+	symbol: {
+		generate: "Generate Symbol",
+		regenerate: "Regenerate",
+		instructionPlaceholder: "Optional instruction, e.g. \"3-pin LDO, pin 1 is VIN\"",
+		progress: "Generating symbol…",
+		ready: "Generated",
+		failed: "Generation failed",
+		download: "Download .kicad_sym",
+		save: "Save to history",
+		saved: "Saved to history"
+	},
+	footprint: {
+		extract: "Extract dimensions",
+		generate: "Generate Footprint",
+		regenerate: "Regenerate",
+		hintPlaceholder: "Optional package type hint, e.g. BGA / QFN / SOP",
+		extractProgress: "Extracting package dimensions…",
+		generateProgress: "Generating footprint…",
+		ready: "Generated",
+		failed: "Generation failed",
+		needsConfirmation: "Confirm or correct the extracted package dimensions",
+		download: "Download .kicad_mod",
+		save: "Save to history",
+		saved: "Saved to history",
+		directGenerated: "A standard footprint was auto-generated; review it below",
+		autoGenerated: "Auto-generated",
+		confirm: "Confirm & generate",
+		cancel: "Cancel"
+	},
+	editor: {
+		essential: "Essential",
+		advanced: "Advanced",
+		width: "Width",
+		height: "Height",
+		pinCount: "Pin count",
+		pitch: "Pitch",
+		packageType: "Package type",
+		fileName: "File name",
+		editedTag: "Edited",
+		aiTag: "AI-extracted",
+		dragHint: "Drag the handles to adjust W / H",
+		validationOutOfRange: "Out of range",
+		validationMinGtMax: "Min > max",
+		validationInvalid: "Invalid value",
+		unit: "mm",
+		body: "Body",
+		pins: "{count} pins",
+		validationIssue: "{n} value(s) need fixing",
+		validationOk: "Values are valid",
+		issueOutOfRange: "Out of allowed range",
+		issueMinGtMax: "Min > max",
+		confirmLabel: "Confirm",
+		cancelLabel: "Cancel"
+	},
+	field: {
+		width: "Width",
+		height: "Height",
+		length: "Length",
+		depth: "Depth",
+		span: "Span",
+		bodyWidth: "Body width",
+		bodyLength: "Body length",
+		bodyHeight: "Body height",
+		boardWidth: "Board width",
+		boardHeight: "Board height",
+		overallWidth: "Overall width",
+		overallLength: "Overall length",
+		overallHeight: "Overall height",
+		pitch: "Pitch",
+		pitchX: "Pitch X",
+		pitchY: "Pitch Y",
+		leadPitch: "Lead pitch",
+		padWidth: "Pad width",
+		padLength: "Pad length",
+		padHeight: "Pad height",
+		leadWidth: "Lead width",
+		leadLength: "Lead length",
+		leadSpan: "Lead span",
+		pinCount: "Pin count",
+		rows: "Rows",
+		columns: "Columns",
+		standoff: "Standoff",
+		maxOf: "{field} max",
+		minOf: "{field} min"
+	},
+	history: {
+		title: "History",
+		empty: "No history yet",
+		symbol: "Symbol",
+		footprint: "Footprint",
+		generated: "Generated",
+		failed: "Failed",
+		cancelled: "Cancelled",
+		rename: "Rename",
+		delete: "Delete",
+		download: "Download",
+		reopen: "Open",
+		view: "View history",
+		createdAt: "Created",
+		loadMore: "Load more",
+		noMore: "No more"
+	},
+	auth: {
+		notLoggedIn: "Not logged in to Huaqiu EDA",
+		login: "Login to Huaqiu EDA",
+		loginRequired: "This feature requires a Huaqiu EDA login",
+		loggedIn: "Logged in"
+	},
+	status: {
+		queued: "Queued",
+		running: "Running",
+		needsConfirmation: "Needs confirmation",
+		completed: "Completed",
+		failed: "Failed",
+		cancelled: "Cancelled"
+	}
+};
+//#endregion
+//#region src/copy/index.ts
+/**
+* `@huaqiu/component-gen-app` — copy packs + translate resolver.
+*
+* Mirrors the `dsh-tool-symbol-footprint` house convention:
+*   - `ZH as const` → `CopyKey` → `EN: Record<CopyKey, string>` (missing EN
+*     key is a compile error; zh is the runtime fallback);
+*   - `Translate = (key, params?) => string` with `{param}` substitution;
+*   - `fieldLabel` (utils/labels.ts) resolves dimension keys through the
+*     `field.*` copy section, so labels follow the UI language.
+*/
+function lookup(pack, keys) {
+	let node = pack;
+	for (const seg of keys.split(".")) if (node && typeof node === "object") node = node[seg];
+	else return void 0;
+	return typeof node === "string" ? node : void 0;
+}
+function translate(lang, key, params) {
+	let v = lookup(lang?.toLowerCase().startsWith("en") ? EN : ZH, key);
+	if (v === void 0) v = lookup(ZH, key);
+	if (v === void 0) v = key;
+	if (params) for (const k of Object.keys(params)) v = v.split(`{${k}}`).join(String(params[k]));
+	return v;
+}
+/** Build a `(key, params?) => string` resolver for a given language. */
+function translateFor(lang) {
+	return (key, params) => translate(lang, key, params);
+}
+/** zh-only fallback (used when no locale is supplied). */
+const defaultT = (key, params) => translate("zh", key, params);
+//#endregion
+//#region src/components/UploadInput.tsx
+/**
+* `@huaqiu/component-gen-app` — image upload control (click + paste + drag).
+*
+* Reads a file, downscales it to a thumbnail data URL if needed (bounded by
+* `maxBytes`), and reports both the original file and the data URL to the
+* parent. The parent owns sending it to the server.
+*/
+const MAX_EDGE = 1600;
+/** Downscale an image file to a data URL bounded in edge + bytes. */
+function fileToDataUrl(file, maxBytes) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onerror = () => reject(/* @__PURE__ */ new Error("failed to read file"));
+		reader.onload = () => {
+			const src = String(reader.result);
+			if (src.length <= maxBytes) {
+				resolve(src);
+				return;
+			}
+			const img = new Image();
+			img.onload = () => {
+				const scale = Math.min(1, MAX_EDGE / Math.max(img.width, img.height));
+				const canvas = document.createElement("canvas");
+				canvas.width = Math.max(1, Math.round(img.width * scale));
+				canvas.height = Math.max(1, Math.round(img.height * scale));
+				const ctx = canvas.getContext("2d");
+				if (!ctx) {
+					reject(/* @__PURE__ */ new Error("canvas unavailable"));
+					return;
+				}
+				ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+				let out = canvas.toDataURL("image/jpeg", .82);
+				for (const q of [
+					.7,
+					.55,
+					.4
+				]) {
+					if (out.length <= maxBytes) break;
+					out = canvas.toDataURL("image/jpeg", q);
+				}
+				resolve(out);
+			};
+			img.onerror = () => reject(/* @__PURE__ */ new Error("failed to decode image"));
+			img.src = src;
+		};
+		reader.readAsDataURL(file);
+	});
+}
+function UploadInput(props) {
+	const { maxBytes, t, disabled = false, imageDataUrl = null, file = null, onFile } = props;
+	const inputRef = useRef(null);
+	const [dragging, setDragging] = useState(false);
+	const [error, setError] = useState(null);
+	const accept = useCallback(async (f) => {
+		if (!f) return;
+		if (f.size > maxBytes) {
+			setError(t("upload.imageTooLarge"));
+			return;
+		}
+		setError(null);
+		try {
+			const dataUrl = await fileToDataUrl(f, maxBytes);
+			onFile(f, dataUrl);
+		} catch (e) {
+			setError(String(e?.message || e));
+		}
+	}, [
+		maxBytes,
+		onFile,
+		t
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `cga-upload${dragging ? " cga-upload--dragging" : ""}`,
+		onClick: () => {
+			if (!disabled) inputRef.current?.click();
+		},
+		onDragOver: (ev) => {
+			ev.preventDefault();
+			if (!disabled) setDragging(true);
+		},
+		onDragLeave: () => setDragging(false),
+		onDrop: (ev) => {
+			ev.preventDefault();
+			setDragging(false);
+			if (disabled) return;
+			accept(ev.dataTransfer.files?.[0] ?? null);
+		},
+		onPaste: (ev) => {
+			const item = Array.from(ev.clipboardData?.items ?? []).find((i) => i.type.startsWith("image/"));
+			if (item) {
+				ev.preventDefault();
+				accept(item.getAsFile());
+			}
+		},
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				type: "file",
+				accept: "image/*",
+				style: { display: "none" },
+				disabled,
+				onChange: (ev) => {
+					accept(ev.target.files?.[0] ?? null);
+					ev.target.value = "";
+				}
+			}),
+			imageDataUrl ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("img", {
+				className: "cga-upload__thumb",
+				src: imageDataUrl,
+				alt: ""
+			}), /* @__PURE__ */ jsx("div", {
+				className: "cga-upload__text",
+				children: file?.name ?? ""
+			})] }) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "cga-upload__text",
+				children: [
+					imageDataUrl ? t("upload.replace") : t("upload.drop"),
+					/* @__PURE__ */ jsx("br", {}),
+					t("upload.paste")
+				]
+			}),
+			error ? /* @__PURE__ */ jsx("div", {
+				className: "cga-upload__text",
+				style: { color: "var(--dsw-alias-state-error-primary, red)" },
+				children: error
+			}) : null,
+			!imageDataUrl ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "cga-upload__browse",
+				children: t("upload.browse")
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/utils/ecad.ts
+function wrapFootprintInBoard(src) {
+	return `(kicad_pcb (version 20240108) (generator "huaqiu-dsh") ${src})`;
+}
+function parseSymbol(source) {
+	const sp = new SchematicParser();
+	if (typeof sp.parseLibSymbols !== "function") throw new Error("parseLibSymbols is not a method on SchematicParser");
+	const symbols = sp.parseLibSymbols(source);
+	if (!symbols || symbols.length === 0) throw new Error("no symbols found in .kicad_sym source");
+	return symbols[0];
+}
+function parseFootprint(source) {
+	const bp = new BoardParser();
+	if (typeof bp.parse !== "function") throw new Error("parse is not a method on BoardParser");
+	const toParse = /^\s*\(\s*kicad_pcb\b/.test(source) ? source : wrapFootprintInBoard(source);
+	const board = bp.parse(toParse);
+	if (!board || !Array.isArray(board.footprints) || board.footprints.length === 0) throw new Error("no footprints found in wrapped kicad_pcb source");
+	return board.footprints[0];
+}
+/**
+* Render a single generated artifact (symbol/footprint) onto a canvas. Returns
+* the renderer dispose handle so the caller can release the viewer.
+*/
+async function renderArtifactToCanvas(kind, content, canvas) {
+	let dispose;
+	if (kind === "symbol") {
+		const sym = parseSymbol(content);
+		const r = await renderSymbol(sym, {
+			canvas,
+			interactive: true
+		});
+		dispose = () => r.dispose();
+	} else if (kind === "footprint") {
+		const fp = parseFootprint(content);
+		const r = await renderFootprint(fp, {
+			canvas,
+			interactive: true
+		});
+		dispose = () => r.dispose();
+	} else throw new Error(`unsupported preview kind: ${kind}`);
+	return () => {
+		try {
+			dispose?.();
+		} catch {}
+	};
+}
+/** Size a canvas to its CSS box (device-pixel-ratio aware). */
+function sizeCanvasFor(canvas) {
+	const dpr = window.devicePixelRatio || 1;
+	const cssW = canvas.clientWidth || 720;
+	const cssH = canvas.clientHeight || 320;
+	canvas.width = Math.max(100, Math.floor(cssW * dpr));
+	canvas.height = Math.max(100, Math.floor(cssH * dpr));
+}
+/** Trigger a browser download of a text artifact. */
+function triggerDownload(filename, text, mime = "text/plain;charset=utf-8") {
+	try {
+		const blob = new Blob([text], { type: mime });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = filename;
+		document.body.appendChild(a);
+		a.click();
+		a.remove();
+		setTimeout(() => {
+			try {
+				URL.revokeObjectURL(url);
+			} catch {}
+		}, 2e3);
+	} catch (err) {
+		console.warn("[hq-cga] download failed", err);
+	}
+}
+//#endregion
+//#region src/components/PreviewStage.tsx
+/**
+* `@huaqiu/component-gen-app` — ECAD canvas preview of a generated artifact.
+*
+* The host supplies the artifact text via `ports.artifactContent`; this
+* component renders it with the bundled ecad-renderer and releases the viewer
+* on unmount / src change.
+*/
+function PreviewStage({ kind, content, srcKey, t }) {
+	const canvasRef = useRef(null);
+	const [view, setView] = useState({
+		view: "loading",
+		message: ""
+	});
+	useEffect(() => {
+		let cancelled = false;
+		let disposeViewer = null;
+		setView({
+			view: "loading",
+			message: ""
+		});
+		(async () => {
+			try {
+				const canvas = canvasRef.current;
+				if (!canvas) return;
+				await new Promise((resolve) => {
+					if (typeof requestAnimationFrame === "function") requestAnimationFrame(resolve);
+					else setTimeout(resolve, 16);
+				});
+				if (cancelled || canvas !== canvasRef.current) return;
+				sizeCanvasFor(canvas);
+				disposeViewer = await renderArtifactToCanvas(kind ?? "symbol", content, canvas);
+				if (cancelled || canvas !== canvasRef.current) return;
+				setView({
+					view: "ready",
+					message: ""
+				});
+			} catch (e) {
+				if (!cancelled) {
+					console.warn("[hq-component-gen] preview render failed", e);
+					setView({
+						view: "error",
+						message: String(e?.message || e)
+					});
+				}
+			}
+		})();
+		return () => {
+			cancelled = true;
+			try {
+				disposeViewer?.();
+			} catch {}
+		};
+	}, [
+		srcKey,
+		kind,
+		content
+	]);
+	const overlay = view.view === "loading" ? /* @__PURE__ */ jsx("div", {
+		className: "hq-genhit__stage-msg",
+		children: t("app.loading")
+	}) : view.view === "error" ? /* @__PURE__ */ jsxs("div", {
+		className: "hq-genhit__stage-msg hq-genhit__stage-msg--error",
+		children: [t("app.error"), view.message]
+	}) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `hq-genhit__stage hq-genhit__stage--${kind ?? "symbol"}`,
+		children: [/* @__PURE__ */ jsx("canvas", {
+			ref: canvasRef,
+			className: "hq-genhit__canvas"
+		}), overlay]
+	});
+}
+//#endregion
+//#region src/components/ResultStage.tsx
+/**
+* `@huaqiu/component-gen-app` — completed-generation result stage.
+*
+* Renders the preview (from `ports.artifactContent`), a download action and a
+* note when the generation was auto-generated or degraded. DSH-agnostic.
+*/
+function artifactIdOf(result) {
+	const art = result.artifact;
+	if (art && typeof art === "object") {
+		const id = art.id;
+		if (typeof id === "string" && id) return id;
+	}
+	return null;
+}
+function filenameOf(result, kind) {
+	const f = result.filename;
+	if (typeof f === "string" && f) return f;
+	return `generated.${kind === "symbol" ? "kicad_sym" : "kicad_mod"}`;
+}
+function ResultStage({ ports, kind, result, t, srcKey }) {
+	const artifactId = artifactIdOf(result);
+	const [content, setContent] = useState(null);
+	const [previewErr, setPreviewErr] = useState(null);
+	const [downloading, setDownloading] = useState(false);
+	useEffect(() => {
+		if (!artifactId) return;
+		let cancelled = false;
+		setContent(null);
+		setPreviewErr(null);
+		ports.artifactContent(artifactId).then((text) => {
+			if (!cancelled) setContent(text);
+		}).catch((e) => {
+			if (!cancelled) setPreviewErr(String(e?.message || e));
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		artifactId,
+		ports,
+		srcKey
+	]);
+	const download = useCallback(async () => {
+		setDownloading(true);
+		try {
+			if (artifactId) {
+				const text = content ?? await ports.artifactContent(artifactId);
+				triggerDownload(filenameOf(result, kind), text);
+			} else {
+				const fileUrl = result.fileUrl;
+				if (typeof fileUrl === "string" && fileUrl) window.open(fileUrl, "_blank", "noopener");
+			}
+		} finally {
+			setDownloading(false);
+		}
+	}, [
+		artifactId,
+		content,
+		ports,
+		result,
+		kind
+	]);
+	const autoGenerated = result.autoGenerated === true;
+	const note = typeof result.note === "string" ? result.note : null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "cga-panel",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "cga-panel__body",
+			children: [
+				autoGenerated ? /* @__PURE__ */ jsx("div", {
+					className: "cga-banner cga-banner--info",
+					children: t("footprint.directGenerated")
+				}) : null,
+				content != null ? /* @__PURE__ */ jsx(PreviewStage, {
+					kind,
+					content,
+					srcKey,
+					t
+				}) : previewErr ? /* @__PURE__ */ jsxs("div", {
+					className: "cga-banner cga-banner--error",
+					children: [t("app.error"), previewErr]
+				}) : null,
+				note ? /* @__PURE__ */ jsx("div", {
+					className: "cga-banner cga-banner--info",
+					children: note
+				}) : null,
+				/* @__PURE__ */ jsx("div", {
+					className: "cga-actions",
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "cga-btn cga-btn--primary",
+						onClick: () => void download(),
+						disabled: downloading,
+						children: kind === "symbol" ? t("symbol.download") : t("footprint.download")
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/hooks/useAuthGate.ts
+/**
+* `@huaqiu/component-gen-app` — auth gate over `ComponentGenPorts.auth`.
+*
+* The app only knows the public `@huaqiu/dsh-auth` surface (the host wires it):
+* read state, subscribe to changes, trigger the existing login flow. It never
+* implements auth itself.
+*/
+function useAuthGate(ports) {
+	const [phase, setPhase] = useState("unknown");
+	const [user, setUser] = useState(null);
+	const refresh = useCallback(async () => {
+		try {
+			const ok = await ports.auth.isAuthenticated();
+			setPhase(ok ? "authenticated" : "unauthenticated");
+			setUser(ok ? await ports.auth.getUserInfo() : null);
+		} catch {
+			setPhase("unauthenticated");
+			setUser(null);
+		}
+	}, [ports]);
+	useEffect(() => {
+		refresh();
+		return ports.auth.onAuthStateChanged((authenticated) => {
+			setPhase(authenticated ? "authenticated" : "unauthenticated");
+			if (authenticated) ports.auth.getUserInfo().then(setUser);
+			else setUser(null);
+		});
+	}, [ports, refresh]);
+	return {
+		phase,
+		user,
+		login: useCallback(() => {
+			ports.auth.login();
+		}, [ports]),
+		refresh
+	};
+}
+//#endregion
+//#region src/hooks/useJobRunner.ts
+/**
+* `@huaqiu/component-gen-app` — reusable generation job runner.
+*
+* Encapsulates the start → SSE-stream → terminal-state lifecycle for one
+* page's active generation. The page calls `run(req)` and reacts to `phase`.
+* `ports.jobEvents` is expected to replay the job's current state first, so a
+* job that finished before subscription still lands correctly.
+*/
+function useJobRunner(ports) {
+	const [phase, setPhase] = useState("idle");
+	const [progress, setProgress] = useState("");
+	const [dimensions, setDimensions] = useState(null);
+	const [pkgType, setPkgType] = useState(null);
+	const [fileName, setFileName] = useState(null);
+	const [result, setResult] = useState({});
+	const [error, setError] = useState("");
+	const [jobId, setJobId] = useState(null);
+	const unsubRef = useRef(null);
+	const cleanup = useCallback(() => {
+		unsubRef.current?.();
+		unsubRef.current = null;
+	}, []);
+	useEffect(() => cleanup, [cleanup]);
+	const onEvent = useCallback((e) => {
+		switch (e.type) {
+			case "progress":
+				setProgress(e.message);
+				break;
+			case "needs_confirmation":
+				setPhase("needs_confirmation");
+				setDimensions(e.dimensions);
+				setPkgType(e.pkgType ?? null);
+				setFileName(e.fileName ?? null);
+				break;
+			case "completed":
+				setPhase("completed");
+				setResult(e.job.result ?? {});
+				setProgress("");
+				break;
+			case "failed":
+				setPhase("failed");
+				setError(e.error);
+				setResult(e.result ?? {});
+				setProgress("");
+				break;
+			case "cancelled":
+				setPhase("cancelled");
+				setProgress("");
+		}
+	}, []);
+	return {
+		phase,
+		progress,
+		dimensions,
+		pkgType,
+		fileName,
+		result,
+		error,
+		jobId,
+		run: useCallback(async (req) => {
+			cleanup();
+			setPhase("running");
+			setProgress("");
+			setDimensions(null);
+			setPkgType(null);
+			setFileName(null);
+			setResult({});
+			setError("");
+			const job = await ports.startJob(req);
+			setJobId(job.id);
+			unsubRef.current = ports.jobEvents(job.id, onEvent);
+		}, [
+			ports,
+			cleanup,
+			onEvent
+		]),
+		cancel: useCallback(async () => {
+			const id = jobId;
+			if (!id) return;
+			try {
+				await ports.abortJob(id);
+			} catch {}
+			cleanup();
+			setPhase("cancelled");
+		}, [
+			ports,
+			jobId,
+			cleanup
+		]),
+		clear: useCallback(() => {
+			cleanup();
+			setPhase("idle");
+			setProgress("");
+			setDimensions(null);
+			setResult({});
+			setError("");
+			setJobId(null);
+		}, [cleanup]),
+		loadHistory: useCallback((entry) => {
+			cleanup();
+			setPhase("completed");
+			setProgress("");
+			setDimensions(null);
+			setPkgType(entry.input?.packageType ?? null);
+			setFileName(null);
+			setResult({
+				artifact: { id: entry.result?.artifactId },
+				filename: entry.result?.filename,
+				...entry.input?.dimensions ? { dimensions: entry.input.dimensions } : {}
+			});
+			setError("");
+			setJobId(`history:${entry.id}`);
+		}, [cleanup])
+	};
+}
+//#endregion
+//#region src/pages/SymbolGenPage.tsx
+/**
+* `@huaqiu/component-gen-app` — Symbol generation page.
+*
+* Upload an image (required by the symbol-from-image generator) + optional
+* instruction → `runGenerateSymbol` via the component-gen server → live
+* progress → preview + download + history.
+*/
+function SymbolGenPage({ ports, t, reopen = null }) {
+	const auth = useAuthGate(ports);
+	const runner = useJobRunner(ports);
+	const [config, setConfig] = useState(null);
+	const [imageDataUrl, setImageDataUrl] = useState(null);
+	const [file, setFile] = useState(null);
+	const [instruction, setInstruction] = useState("");
+	const runnerRef = useRef(runner);
+	runnerRef.current = runner;
+	const portsRef = useRef(ports);
+	portsRef.current = ports;
+	useEffect(() => {
+		if (!reopen) return;
+		const { entry } = reopen;
+		runnerRef.current.loadHistory(entry);
+		if (entry.input?.imageId) portsRef.current.inputImage(entry.input.imageId).then((dataUrl) => setImageDataUrl(dataUrl)).catch(() => {});
+		if (entry.input?.instruction) setInstruction(entry.input.instruction);
+	}, [reopen]);
+	useEffect(() => {
+		ports.config().then(setConfig).catch(() => {});
+	}, [ports]);
+	const maxBytes = config?.limits.imageBytes ?? 4194304;
+	const authed = auth.phase === "authenticated";
+	const canGenerate = authed && !!imageDataUrl && runner.phase !== "running";
+	const generate = () => {
+		if (!imageDataUrl) return;
+		runner.run({
+			kind: "symbol",
+			input: {
+				imageDataUrl,
+				...instruction.trim() ? { instruction: instruction.trim() } : {}
+			}
+		});
+	};
+	const resultKey = useMemo(() => `${runner.jobId ?? "none"}:${runner.phase}`, [runner.jobId, runner.phase]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "cga-app",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "cga-panel",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "cga-panel__body",
+				children: [
+					auth.phase === "unknown" ? /* @__PURE__ */ jsxs("div", {
+						className: "cga-progress",
+						children: [/* @__PURE__ */ jsx("span", { className: "cga-spinner" }), t("app.loading")]
+					}) : null,
+					auth.phase === "unauthenticated" ? /* @__PURE__ */ jsxs("div", {
+						className: "cga-auth",
+						children: [/* @__PURE__ */ jsx("span", { children: t("auth.loginRequired") }), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "cga-btn",
+							onClick: auth.login,
+							children: t("auth.login")
+						})]
+					}) : null,
+					/* @__PURE__ */ jsx(UploadInput, {
+						maxBytes,
+						t,
+						disabled: !authed || runner.phase === "running",
+						imageDataUrl,
+						file,
+						onFile: (f, url) => {
+							setFile(f);
+							setImageDataUrl(url);
+						}
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "cga-field",
+						children: [/* @__PURE__ */ jsx("label", {
+							className: "cga-field__label",
+							children: t("symbol.instructionPlaceholder")
+						}), /* @__PURE__ */ jsx("input", {
+							className: "cga-field__input",
+							type: "text",
+							value: instruction,
+							disabled: !authed || runner.phase === "running",
+							onChange: (ev) => setInstruction(ev.target.value)
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "cga-actions",
+						children: [/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "cga-btn cga-btn--primary",
+							disabled: !canGenerate,
+							onClick: generate,
+							children: runner.phase === "running" ? t("symbol.progress") : runner.phase === "completed" ? t("symbol.regenerate") : t("symbol.generate")
+						}), runner.phase === "running" ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "cga-btn",
+							onClick: () => void runner.cancel(),
+							children: t("editor.cancelLabel")
+						}) : null]
+					}),
+					runner.phase === "running" ? /* @__PURE__ */ jsxs("div", {
+						className: "cga-progress",
+						children: [/* @__PURE__ */ jsx("span", { className: "cga-spinner" }), runner.progress || t("symbol.progress")]
+					}) : null,
+					runner.phase === "failed" ? /* @__PURE__ */ jsxs("div", {
+						className: "cga-banner cga-banner--error",
+						children: [
+							t("symbol.failed"),
+							": ",
+							runner.error,
+							runner.result?.status === "needs_auth" ? ` (${t("auth.loginRequired")})` : ""
+						]
+					}) : null
+				]
+			})
+		}), runner.phase === "completed" ? /* @__PURE__ */ jsx(ResultStage, {
+			ports,
+			kind: "symbol",
+			result: runner.result,
+			t,
+			srcKey: resultKey
+		}) : null]
+	});
+}
+//#endregion
+//#region src/utils/dims.ts
+/**
+* Pure geometry/dimension model for the interactive footprint dimension
+* editor (rich-hit). Two-way-bound: the SVG package silhouette and the numeric
+* inputs are two views of the same `values` map. Drag a handle → values
+* change; type in an input → geometry re-renders. Only "confirm"/"cancel" go
+* back to the model.
+*/
+/** Per-key mm bounds used to keep edited values sane. */
+const DIM_BOUNDS = {
+	W: {
+		min: .1,
+		max: 500
+	},
+	L: {
+		min: .1,
+		max: 500
+	},
+	width: {
+		min: .1,
+		max: 500
+	},
+	height: {
+		min: .1,
+		max: 500
+	},
+	bodyWidth: {
+		min: .1,
+		max: 500
+	},
+	bodyLength: {
+		min: .1,
+		max: 500
+	},
+	pitch: {
+		min: .05,
+		max: 100
+	}
+};
+function dimensionBounds(key) {
+	return DIM_BOUNDS[key] ?? {
+		min: .01,
+		max: 1e3
+	};
+}
+function clampDimension(value, min, max) {
+	const n = Number(value);
+	if (!Number.isFinite(n)) return min;
+	if (n < min) return min;
+	if (n > max) return max;
+	return n;
+}
+/** Parse a dimension string (allows a trailing unit like "6.2mm"). Null when invalid. */
+function parseDimension(text) {
+	const m = text.trim().match(/^([+-]?(\d+(\.\d+)?|\.\d+))([^0-9]*)$/);
+	if (!m) return null;
+	const n = Number(m[1]);
+	return Number.isFinite(n) ? n : null;
+}
+/** Format a number for display: max 2 decimals, no trailing zeros. */
+function formatDimension(value) {
+	if (typeof value !== "number" || !Number.isFinite(value)) return "";
+	return String(Math.round(value * 100) / 100);
+}
+/**
+* Pick the geometry keys among a dimension map: a width-like key and a
+* height-like key (rendered as the draggable board outline) and the rest.
+*/
+function pickGeometry(dimensions) {
+	let widthKey = null;
+	let heightKey = null;
+	const numericKeys = [];
+	const widthCandidates = [
+		"W",
+		"width",
+		"Width",
+		"D",
+		"d_max",
+		"d_min",
+		"bodyWidth",
+		"body_width",
+		"bodyLength",
+		"body_length",
+		"boardWidth",
+		"E",
+		"e_max",
+		"e_min"
+	];
+	const heightCandidates = [
+		"H",
+		"L",
+		"height",
+		"Height",
+		"Length",
+		"E",
+		"e_max",
+		"e_min",
+		"bodyLength",
+		"body_length",
+		"bodyWidth",
+		"body_width",
+		"boardHeight",
+		"D",
+		"d_max",
+		"d_min"
+	];
+	for (const k of Object.keys(dimensions)) {
+		const v = dimensions[k];
+		if ((typeof v === "number" ? v : typeof v === "string" ? parseDimension(v) : null) == null) continue;
+		numericKeys.push(k);
+	}
+	for (const c of widthCandidates) if (!widthKey && dimensions[c] != null) widthKey = c;
+	for (const c of heightCandidates) if (c !== widthKey && dimensions[c] != null) {
+		heightKey = c;
+		break;
+	}
+	const otherKeys = numericKeys.filter((k) => k !== widthKey && k !== heightKey);
+	return {
+		widthKey,
+		heightKey,
+		otherKeys,
+		numericKeys
+	};
+}
+/** Normalize a dimension map into numeric values + geometry key picks. */
+function normalizeDimensions(dimensions) {
+	const values = {};
+	if (dimensions && typeof dimensions === "object" && !Array.isArray(dimensions)) for (const k of Object.keys(dimensions)) {
+		const v = dimensions[k];
+		const n = typeof v === "number" ? v : typeof v === "string" ? parseDimension(v) : null;
+		if (n != null) values[k] = n;
+	}
+	return {
+		values,
+		...pickGeometry(values)
+	};
+}
+/**
+* Fit a W×H rectangle into a viewBox, preserving aspect ratio and leaving
+* padding for the dimension lines. Returns {x,y,w,h} in viewBox units.
+*/
+function rectFromValues(values, widthKey, heightKey, viewW, viewH, pad) {
+	let W = widthKey && values[widthKey] != null ? values[widthKey] : 1;
+	let H = heightKey && values[heightKey] != null ? values[heightKey] : 1;
+	if (W <= 0) W = 1;
+	if (H <= 0) H = 1;
+	const availW = Math.max(1, viewW - pad * 2);
+	const availH = Math.max(1, viewH - pad * 2);
+	const scale = Math.min(availW / W, availH / H);
+	const w = W * scale;
+	const h = H * scale;
+	return {
+		x: (viewW - w) / 2,
+		y: (viewH - h) / 2,
+		w,
+		h
+	};
+}
+/** First positive numeric value across alias keys, else the fallback. */
+function numVal(values, keys, fallback) {
+	for (const key of keys) {
+		const v = values[key];
+		const n = typeof v === "number" ? v : typeof v === "string" ? parseDimension(v) : null;
+		if (n != null && Number.isFinite(n) && n > 0) return n;
+	}
+	return fallback;
+}
+/** Pin count from the dimension map (aliases: pin_count, pins, pinCount, n_max…). */
+function pinCountOf(values, fallback) {
+	const n = numVal(values, [
+		"pin_count",
+		"pins",
+		"pinCount",
+		"n_max",
+		"n"
+	], -1);
+	return n >= 0 ? Math.max(2, Math.round(n)) : fallback;
+}
+/** BGA ball-grid rows/columns (aliases: rows, columns, cols). */
+function bgaGrid(values, fallback) {
+	let rows = Math.round(numVal(values, ["rows", "row"], fallback));
+	let cols = Math.round(numVal(values, [
+		"columns",
+		"col",
+		"cols"
+	], fallback));
+	if (!(rows > 0)) rows = fallback;
+	if (!(cols > 0)) cols = fallback;
+	return {
+		rows,
+		cols
+	};
+}
+/** Human-readable package-family label for the editor's info row. */
+function pkgFamilyLabel(pkgType) {
+	return String(pkgType || "").toUpperCase();
+}
+const PITCH_KEYS = /* @__PURE__ */ new Set([
+	"pitch",
+	"pitch_d",
+	"pitch_e",
+	"lead_pitch",
+	"pitch_x",
+	"e"
+]);
+const PIN_KEYS = /* @__PURE__ */ new Set([
+	"pin_count",
+	"pins",
+	"pinCount",
+	"total_pins"
+]);
+/**
+* Split the numeric keys into the small "essential" set (body W/H, pitch,
+* pin count) and the rest, which fold into a collapsible "Advanced" section.
+*/
+function classifyDimensions(numericKeys, widthKey, heightKey) {
+	const essential = [];
+	const advanced = [];
+	for (const k of numericKeys) if (k === widthKey || k === heightKey || PITCH_KEYS.has(k) || PIN_KEYS.has(k)) {
+		if (!essential.includes(k)) essential.push(k);
+	} else if (!advanced.includes(k)) advanced.push(k);
+	return {
+		essential,
+		advanced
+	};
+}
+/**
+* Find the min/max tolerance partner for a body dimension key, e.g.
+* `d_max` → `d_min`. Returns { min, max } or null when no partner exists.
+*/
+function toleranceOf(values, key) {
+	if (!key || !values || typeof values !== "object") return null;
+	let lo = null;
+	let hi = null;
+	if (/_(max|min)$/.test(key)) {
+		const base = key.replace(/_(max|min)$/, "");
+		const loKey = `${base}_min`;
+		const hiKey = `${base}_max`;
+		const loV = values[loKey];
+		const hiV = values[hiKey];
+		if (loV != null) lo = loV;
+		if (hiV != null) hi = hiV;
+	} else {
+		const loV = values[`${key}_min`];
+		const hiV = values[`${key}_max`];
+		if (loV != null) lo = loV;
+		if (hiV != null) hi = hiV;
+	}
+	if (lo == null && hi == null) return null;
+	return {
+		min: lo != null ? lo : hi,
+		max: hi != null ? hi : lo
+	};
+}
+/** Structural validation of the dimension set. */
+function validateDimensions(values) {
+	const issues = [];
+	for (const key of Object.keys(values)) {
+		const v = values[key];
+		if (typeof v !== "number" || !Number.isFinite(v)) {
+			issues.push({
+				key,
+				code: "invalid"
+			});
+			continue;
+		}
+		const b = dimensionBounds(key);
+		if (v < b.min || v > b.max) issues.push({
+			key,
+			code: "out_of_range"
+		});
+	}
+	for (const [lo, hi] of [
+		["d_min", "d_max"],
+		["e_min", "e_max"],
+		["a_min", "a_max"],
+		["b_min", "b_max"],
+		["l_min", "l_max"]
+	]) {
+		const loV = values[lo];
+		const hiV = values[hi];
+		if (loV != null && hiV != null && loV > hiV) issues.push({
+			key: hi,
+			code: "min_gt_max"
+		});
+	}
+	return issues;
+}
+/** Compact summary used in the package info row: body W×H, pitch and pins. */
+function summaryOf(values, widthKey, heightKey, t) {
+	const parts = [];
+	const bodyW = widthKey && values[widthKey] != null ? formatDimension(values[widthKey]) : null;
+	const bodyH = heightKey && values[heightKey] != null ? formatDimension(values[heightKey]) : null;
+	if (bodyW != null && bodyH != null) parts.push(`${t("card.editor.body")} ${bodyW} \u00d7 ${bodyH} ${t("card.editor.unit")}`);
+	const pitch = numVal(values, [
+		"pitch",
+		"pitch_d",
+		"pitch_e",
+		"lead_pitch",
+		"pitch_x",
+		"e"
+	], -1);
+	if (pitch >= 0) parts.push(`${t("card.editor.pitch")} ${formatDimension(pitch)} ${t("card.editor.unit")}`);
+	return parts;
+}
+//#endregion
+//#region src/utils/labels.ts
+/** Humanize a camelCase / snake_case key for display. */
+function humanizeKey(key) {
+	return String(key).replace(/[_-]+/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/^\w/, (c) => c.toUpperCase());
+}
+/** canonical (lowercased, separators stripped) dimension key → copy key. */
+const FIELD_LABEL_KEY = {
+	w: "field.width",
+	width: "field.width",
+	h: "field.height",
+	height: "field.height",
+	l: "field.length",
+	length: "field.length",
+	d: "field.depth",
+	depth: "field.depth",
+	e: "field.span",
+	span: "field.span",
+	bodywidth: "field.bodyWidth",
+	bodylength: "field.bodyLength",
+	bodyheight: "field.bodyHeight",
+	boardwidth: "field.boardWidth",
+	boardheight: "field.boardHeight",
+	overallwidth: "field.overallWidth",
+	overalllength: "field.overallLength",
+	overallheight: "field.overallHeight",
+	pitch: "field.pitch",
+	pitchx: "field.pitchX",
+	pitchy: "field.pitchY",
+	pitchd: "field.pitch",
+	pitche: "field.pitch",
+	leadpitch: "field.leadPitch",
+	padwidth: "field.padWidth",
+	padlength: "field.padLength",
+	padheight: "field.padHeight",
+	leadwidth: "field.leadWidth",
+	leadlength: "field.leadLength",
+	leadspan: "field.leadSpan",
+	pincount: "field.pinCount",
+	pins: "field.pinCount",
+	totalpins: "field.pinCount",
+	n: "field.pinCount",
+	nmax: "field.pinCount",
+	rows: "field.rows",
+	row: "field.rows",
+	columns: "field.columns",
+	column: "field.columns",
+	col: "field.columns",
+	cols: "field.columns",
+	standoff: "field.standoff"
+};
+/** Localized label for a dimension key (`w`/`width` → 宽度, …). */
+function fieldLabel(key, t) {
+	const raw = String(key);
+	const bounds = /^(.*?)_(max|min)$/i.exec(raw);
+	if (bounds) {
+		const base = fieldLabel(bounds[1], t);
+		return t(bounds[2].toLowerCase() === "max" ? "field.maxOf" : "field.minOf", { field: base });
+	}
+	const canonical = raw.toLowerCase().replace(/[\s_-]+/g, "");
+	const copyKey = FIELD_LABEL_KEY[canonical];
+	return copyKey ? t(copyKey) : humanizeKey(raw);
+}
+//#endregion
+//#region src/components/GeometryEditor.tsx
+/**
+* `@huaqiu/component-gen-app` — interactive package-dimension editor.
+*
+* Faithful port of the `dsh-tool-symbol-footprint` rich-HIT geometry editor
+* (packageSilhouette + pointerToViewBox + the two-way-bound W/H handle + field
+* editor). DSH-agnostic: `onConfirm(values, edited)` / `onCancel()` are the
+* only ways back to the caller — the app itself is the driver (single-HIL).
+*/
+function pointerToViewBox(svg, clientX, clientY, viewW, viewH) {
+	const rect = svg.getBoundingClientRect();
+	return {
+		x: rect.width > 0 ? (clientX - rect.left) * (viewW / rect.width) : 0,
+		y: rect.height > 0 ? (clientY - rect.top) * (viewH / rect.height) : 0
+	};
+}
+const COUNT_KEYS = /* @__PURE__ */ new Set([
+	"pin_count",
+	"pins",
+	"pinCount",
+	"rows",
+	"row",
+	"columns",
+	"column",
+	"cols",
+	"n_max",
+	"n",
+	"count",
+	"total_pins"
+]);
+function packageSilhouette(pkgType, values, geom) {
+	const type = String(pkgType || "").toLowerCase();
+	const bodyX = geom.x;
+	const bodyY = geom.y;
+	const bodyW = geom.w;
+	const bodyH = geom.h;
+	const padL = Math.max(2, Math.min(7, Math.round(Math.min(bodyW, bodyH) * .07)));
+	const nodes = [];
+	nodes.push(/* @__PURE__ */ jsx("rect", {
+		className: "hq-genhit__body",
+		x: bodyX,
+		y: bodyY,
+		width: bodyW,
+		height: bodyH,
+		rx: 2
+	}, "body"));
+	const pins = pinCountOf(values, 8);
+	const perSide = Math.max(2, Math.ceil(pins / 2));
+	const side = (edge) => {
+		const arr = [];
+		if (edge === "L" || edge === "R") {
+			const len = Math.min(padL, bodyW * .22);
+			const x0 = edge === "L" ? bodyX - len : bodyX + bodyW;
+			for (let i = 0; i < perSide; i++) {
+				const y = bodyY + (i + .5) * (bodyH / perSide);
+				const ph = Math.max(1.6, bodyH / perSide * .55);
+				arr.push(/* @__PURE__ */ jsx("rect", {
+					className: "hq-genhit__pad",
+					x: x0,
+					y: y - ph / 2,
+					width: len,
+					height: ph,
+					rx: 1
+				}, edge + i));
+			}
+		} else {
+			const len2 = Math.min(padL, bodyH * .22);
+			const y0 = edge === "T" ? bodyY - len2 : bodyY + bodyH;
+			for (let j = 0; j < perSide; j++) {
+				const x = bodyX + (j + .5) * (bodyW / perSide);
+				const pw = Math.max(1.6, bodyW / perSide * .55);
+				arr.push(/* @__PURE__ */ jsx("rect", {
+					className: "hq-genhit__pad",
+					x: x - pw / 2,
+					y: y0,
+					width: pw,
+					height: len2,
+					rx: 1
+				}, edge + j));
+			}
+		}
+		return arr;
+	};
+	if (type === "bga") {
+		const g = bgaGrid(values, Math.max(2, Math.round(Math.sqrt(pins))));
+		const ballR = Math.max(.9, Math.min(bodyW, bodyH) / (Math.max(g.rows, g.cols) * 3.4));
+		for (let r = 0; r < g.rows; r++) for (let c = 0; c < g.cols; c++) nodes.push(/* @__PURE__ */ jsx("circle", {
+			className: "hq-genhit__ball",
+			cx: bodyX + (c + .5) * (bodyW / g.cols),
+			cy: bodyY + (r + .5) * (bodyH / g.rows),
+			r: ballR
+		}, `ball${r}_${c}`));
+	} else if (type === "qfn" || type === "son") {
+		const ep = Math.min(bodyW * .55, bodyH * .55);
+		nodes.push(/* @__PURE__ */ jsx("rect", {
+			className: "hq-genhit__epad",
+			x: bodyX + (bodyW - ep) / 2,
+			y: bodyY + (bodyH - ep) / 2,
+			width: ep,
+			height: ep,
+			rx: 1
+		}, "epad"));
+		const edges = type === "son" ? ["L", "R"] : [
+			"L",
+			"R",
+			"T",
+			"B"
+		];
+		for (const e of edges) nodes.push(...side(e));
+	} else if (type === "qfp" || type === "plcc") nodes.push(...side("L"), ...side("R"), ...side("T"), ...side("B"));
+	else nodes.push(...side("L"), ...side("R"));
+	return nodes;
+}
+/** dims.ts `summaryOf` addresses the plugin's `card.editor.*` keys — remap. */
+function editorT(t) {
+	return (key, params) => t(key.replace(/^card\.editor\./, "editor."), params);
+}
+const GeometryEditor = memo(function GeometryEditor(props) {
+	const { dimensions, pkgType = null, fileName = null, disabled = false, t, onConfirm, onCancel } = props;
+	const normalized = useMemo(() => normalizeDimensions(dimensions), [dimensions]);
+	const { widthKey, heightKey } = normalized;
+	const [values, setValues] = useState(() => normalized.values);
+	const [fieldText, setFieldText] = useState(() => {
+		const m = {};
+		for (const k of normalized.numericKeys) m[k] = formatDimension(normalized.values[k]);
+		return m;
+	});
+	const [invalid, setInvalid] = useState({});
+	const [edited, setEdited] = useState({});
+	const [advancedOpen, setAdvancedOpen] = useState(false);
+	const [drag, setDrag] = useState(null);
+	const svgRef = useRef(null);
+	const VIEW_W = 360;
+	const VIEW_H = 230;
+	const geom = rectFromValues(values, widthKey, heightKey, VIEW_W, VIEW_H, 34);
+	const labelFor = (key) => fieldLabel(key, t);
+	const fieldUnit = (key) => COUNT_KEYS.has(key) ? "" : t("editor.unit");
+	const withKey = (obj, key, value) => {
+		const out = { ...obj };
+		out[key] = value;
+		return out;
+	};
+	const withKeyBool = (obj, key, value) => {
+		const out = { ...obj };
+		out[key] = value;
+		return out;
+	};
+	function startDrag(mode) {
+		return (ev) => {
+			if (disabled || !svgRef.current) return;
+			ev.preventDefault();
+			const view = pointerToViewBox(svgRef.current, ev.clientX, ev.clientY, VIEW_W, VIEW_H);
+			setDrag({
+				mode,
+				startX: view.x,
+				startY: view.y,
+				startW: widthKey && values[widthKey] != null ? values[widthKey] : 1,
+				startH: heightKey && values[heightKey] != null ? values[heightKey] : 1,
+				rectW: geom.w,
+				rectH: geom.h
+			});
+			try {
+				svgRef.current.setPointerCapture(ev.pointerId);
+			} catch {}
+		};
+	}
+	function onPointerMove(ev) {
+		if (!drag || !svgRef.current) return;
+		const view = pointerToViewBox(svgRef.current, ev.clientX, ev.clientY, VIEW_W, VIEW_H);
+		let next = values;
+		let nextEdited = edited;
+		if (drag.mode === "W" || drag.mode === "WH") {
+			if (widthKey) {
+				const bW = dimensionBounds(widthKey);
+				const newW = clampDimension(drag.startW + (view.x - drag.startX) * (drag.startW / drag.rectW), bW.min, bW.max);
+				next = withKey(next, widthKey, newW);
+				nextEdited = withKeyBool(nextEdited, widthKey, true);
+			}
+		}
+		if (drag.mode === "H" || drag.mode === "WH") {
+			if (heightKey) {
+				const bH = dimensionBounds(heightKey);
+				const newH = clampDimension(drag.startH + (view.y - drag.startY) * (drag.startH / drag.rectH), bH.min, bH.max);
+				next = withKey(next, heightKey, newH);
+				nextEdited = withKeyBool(nextEdited, heightKey, true);
+			}
+		}
+		if (next !== values) setValues(next);
+		if (nextEdited !== edited) setEdited(nextEdited);
+	}
+	function endDrag() {
+		setDrag(null);
+	}
+	function onFieldChange(key, ev) {
+		const raw = ev.target.value;
+		setFieldText((prev) => ({
+			...prev,
+			[key]: raw
+		}));
+		const n = parseDimension(raw);
+		if (n == null) {
+			setInvalid((prev) => ({
+				...prev,
+				[key]: true
+			}));
+			return;
+		}
+		const bounds = dimensionBounds(key);
+		setInvalid((prev) => ({
+			...prev,
+			[key]: false
+		}));
+		setValues((prev) => withKey(prev, key, clampDimension(n, bounds.min, bounds.max)));
+		setEdited((prev) => withKeyBool(prev, key, true));
+	}
+	function onFieldBlur(key) {
+		setFieldText((prev) => ({
+			...prev,
+			[key]: formatDimension(values[key])
+		}));
+		setInvalid((prev) => ({
+			...prev,
+			[key]: false
+		}));
+	}
+	function focusField(key) {
+		if (disabled || typeof document === "undefined") return;
+		const el = document.querySelector(`.hq-genhit__field-input[data-field="${key}"]`);
+		if (el && el.focus) {
+			el.focus();
+			el.scrollIntoView({
+				block: "nearest",
+				behavior: "smooth"
+			});
+		}
+	}
+	const hasInvalid = Object.values(invalid).some(Boolean);
+	const topY = geom.y - 16;
+	const leftX = geom.x - 16;
+	const wMid = geom.x + geom.w / 2;
+	const hMid = geom.y + geom.h / 2;
+	const wLabel = widthKey && values[widthKey] != null ? `${formatDimension(values[widthKey])} ${t("editor.unit")}` : "";
+	const hLabel = heightKey && values[heightKey] != null ? `${formatDimension(values[heightKey])} ${t("editor.unit")}` : "";
+	const arrow = (pts) => /* @__PURE__ */ jsx("polygon", {
+		className: "hq-genhit__arrow",
+		points: pts
+	});
+	const tolText = (key) => {
+		const tol = toleranceOf(values, key);
+		if (!tol || tol.min == null || tol.max == null || tol.min === tol.max) return "";
+		return `${formatDimension(tol.min)}\u2013${formatDimension(tol.max)} ${t("editor.unit")}`;
+	};
+	const wTolText = tolText(widthKey);
+	const hTolText = tolText(heightKey);
+	const groups = classifyDimensions(normalized.numericKeys, widthKey, heightKey);
+	const essentialKeys = [];
+	if (widthKey) essentialKeys.push(widthKey);
+	if (heightKey) essentialKeys.push(heightKey);
+	for (const ek of groups.essential) if (ek !== widthKey && ek !== heightKey) essentialKeys.push(ek);
+	const advancedKeys = groups.advanced;
+	const renderField = (key) => {
+		const bounds = dimensionBounds(key);
+		return /* @__PURE__ */ jsxs("div", {
+			className: `hq-genhit__field${invalid[key] ? " hq-genhit__field--invalid" : ""}`,
+			title: invalid[key] ? t("editor.validationInvalid") : void 0,
+			children: [
+				/* @__PURE__ */ jsx("label", {
+					className: `hq-genhit__field-label${edited[key] ? " hq-genhit__field-label--edited" : ""}`,
+					onClick: () => focusField(key),
+					children: labelFor(key)
+				}),
+				edited[key] ? /* @__PURE__ */ jsx("span", {
+					className: "hq-genhit__field-tag hq-genhit__field-tag--edited",
+					children: t("editor.editedTag")
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "hq-genhit__field-tag hq-genhit__field-tag--ai",
+					children: t("editor.aiTag")
+				}),
+				/* @__PURE__ */ jsx("input", {
+					className: "hq-genhit__field-input",
+					"data-field": key,
+					type: "number",
+					inputMode: "decimal",
+					min: bounds.min,
+					max: bounds.max,
+					step: .1,
+					value: fieldText[key] == null ? "" : fieldText[key],
+					disabled,
+					onChange: (ev) => onFieldChange(key, ev),
+					onBlur: () => onFieldBlur(key)
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "hq-genhit__field-unit",
+					children: fieldUnit(key)
+				})
+			]
+		}, key);
+	};
+	const issues = validateDimensions(values);
+	const seen = /* @__PURE__ */ new Set();
+	const issueTexts = issues.filter((it) => {
+		if (seen.has(it.key)) return false;
+		seen.add(it.key);
+		return true;
+	}).map((it) => {
+		const codeLabel = it.code === "min_gt_max" ? t("editor.issueMinGtMax") : it.code === "out_of_range" ? t("editor.issueOutOfRange") : t("editor.validationInvalid");
+		return `${labelFor(it.key)}: ${codeLabel}`;
+	});
+	const totalIssues = issueTexts.length + (hasInvalid ? 1 : 0);
+	const canEditGeometry = !!(widthKey && heightKey);
+	const summaryParts = summaryOf(values, widthKey, heightKey, editorT(t));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "hq-genhit__editor",
+		children: [
+			canEditGeometry ? /* @__PURE__ */ jsxs("svg", {
+				ref: svgRef,
+				className: "hq-genhit__geom",
+				viewBox: `0 0 ${VIEW_W} ${VIEW_H}`,
+				onPointerMove,
+				onPointerUp: endDrag,
+				onPointerCancel: endDrag,
+				children: [
+					/* @__PURE__ */ jsx("line", {
+						className: "hq-genhit__dimline",
+						x1: geom.x,
+						y1: topY,
+						x2: geom.x + geom.w,
+						y2: topY
+					}),
+					arrow(`${geom.x},${topY} ${geom.x + 7},${topY - 3} ${geom.x + 7},${topY + 3}`),
+					arrow(`${geom.x + geom.w},${topY} ${geom.x + geom.w - 7},${topY - 3} ${geom.x + geom.w - 7},${topY + 3}`),
+					/* @__PURE__ */ jsx("text", {
+						className: `hq-genhit__dimlabel${widthKey ? " hq-genhit__dimlabel--clickable" : ""}`,
+						x: wMid,
+						y: topY - 8,
+						textAnchor: "middle",
+						onClick: widthKey ? () => focusField(widthKey) : void 0,
+						children: wLabel
+					}),
+					wTolText ? /* @__PURE__ */ jsx("text", {
+						className: "hq-genhit__tol",
+						x: wMid,
+						y: topY + 12,
+						textAnchor: "middle",
+						children: wTolText
+					}) : null,
+					/* @__PURE__ */ jsx("line", {
+						className: "hq-genhit__dimline",
+						x1: leftX,
+						y1: geom.y,
+						x2: leftX,
+						y2: geom.y + geom.h
+					}),
+					arrow(`${leftX},${geom.y} ${leftX - 3},${geom.y + 7} ${leftX + 3},${geom.y + 7}`),
+					arrow(`${leftX},${geom.y + geom.h} ${leftX - 3},${geom.y + geom.h - 7} ${leftX + 3},${geom.y + geom.h - 7}`),
+					/* @__PURE__ */ jsx("text", {
+						className: `hq-genhit__dimlabel${heightKey ? " hq-genhit__dimlabel--clickable" : ""}`,
+						x: leftX - 8,
+						y: hMid,
+						textAnchor: "middle",
+						transform: `rotate(-90 ${leftX - 8} ${hMid})`,
+						onClick: heightKey ? () => focusField(heightKey) : void 0,
+						children: hLabel
+					}),
+					hTolText ? /* @__PURE__ */ jsx("text", {
+						className: "hq-genhit__tol",
+						x: leftX + 12,
+						y: hMid,
+						textAnchor: "middle",
+						transform: `rotate(-90 ${leftX + 12} ${hMid})`,
+						children: hTolText
+					}) : null,
+					packageSilhouette(pkgType, values, geom).map((node, ni) => /* @__PURE__ */ jsx(Fragment, { children: node }, node.key ?? `sil${ni}`)),
+					/* @__PURE__ */ jsx("circle", {
+						className: "hq-genhit__handle",
+						cx: geom.x + geom.w,
+						cy: geom.y + geom.h / 2,
+						r: 6,
+						onPointerDown: startDrag("W")
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						className: "hq-genhit__handle hq-genhit__handle--h",
+						cx: geom.x + geom.w / 2,
+						cy: geom.y + geom.h,
+						r: 6,
+						onPointerDown: startDrag("H")
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						className: "hq-genhit__handle hq-genhit__handle--wh",
+						cx: geom.x + geom.w,
+						cy: geom.y + geom.h,
+						r: 7,
+						onPointerDown: startDrag("WH")
+					})
+				]
+			}) : null,
+			canEditGeometry ? /* @__PURE__ */ jsx("div", {
+				className: "hq-genhit__drag-hint",
+				children: t("editor.dragHint")
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "hq-genhit__pkg",
+				children: [
+					pkgFamilyLabel(pkgType) ? /* @__PURE__ */ jsx("span", {
+						className: "hq-genhit__badge hq-genhit__badge--pkg",
+						children: pkgFamilyLabel(pkgType)
+					}) : null,
+					/* @__PURE__ */ jsx("span", {
+						className: "hq-genhit__pkg-meta",
+						children: t("editor.pins", { count: pinCountOf(values, 0) })
+					}),
+					summaryParts.map((part, pi) => /* @__PURE__ */ jsxs("span", {
+						className: "hq-genhit__pkg-meta hq-genhit__pkg-meta--sep",
+						children: ["· ", part]
+					}, `sum${pi}`))
+				]
+			}),
+			essentialKeys.length > 0 ? /* @__PURE__ */ jsx("div", {
+				className: "hq-genhit__fields",
+				children: essentialKeys.map(renderField)
+			}) : null,
+			advancedKeys.length > 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "hq-genhit__adv",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "hq-genhit__adv-toggle",
+					onClick: () => setAdvancedOpen(!advancedOpen),
+					"aria-expanded": advancedOpen ? "true" : "false",
+					children: (advancedOpen ? "▾ " : "▸ ") + t("editor.advanced") + ` (${advancedKeys.length})`
+				}), advancedOpen ? /* @__PURE__ */ jsx("div", {
+					className: "hq-genhit__fields hq-genhit__fields--adv",
+					children: advancedKeys.map(renderField)
+				}) : null]
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: `hq-genhit__validation${totalIssues > 0 ? " hq-genhit__validation--warn" : ""}`,
+				children: totalIssues > 0 ? /* @__PURE__ */ jsxs("span", { children: [t("editor.validationIssue", { n: totalIssues }), issueTexts.length > 0 ? /* @__PURE__ */ jsx("span", {
+					className: "hq-genhit__validation-detail",
+					children: issueTexts[0]
+				}) : null] }) : /* @__PURE__ */ jsx("span", { children: t("editor.validationOk") })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "hq-genhit__actions",
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "hq-genhit__act",
+					onClick: () => onConfirm(values, edited),
+					disabled: disabled || hasInvalid,
+					children: ["✓ ", t("editor.confirmLabel")]
+				}), /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "hq-genhit__act",
+					onClick: onCancel,
+					disabled,
+					children: ["✕ ", t("editor.cancelLabel")]
+				})]
+			})
+		]
+	});
+});
+//#endregion
+//#region src/pages/FootprintGenPage.tsx
+/**
+* `@huaqiu/component-gen-app` — Footprint generation page.
+*
+* Two workflows, both driven by the app itself (single-HIL):
+*   1. needs_confirmation — extract → dimension editor → confirm →
+*      generate-footprint from the human-approved values.
+*   2. direct generation — extract returns a standard footprint immediately
+*      (fast path) → preview + download.
+*/
+function FootprintGenPage({ ports, t, reopen = null }) {
+	const auth = useAuthGate(ports);
+	const runner = useJobRunner(ports);
+	const [config, setConfig] = useState(null);
+	const [imageDataUrl, setImageDataUrl] = useState(null);
+	const [file, setFile] = useState(null);
+	const [hint, setHint] = useState("");
+	const runnerRef = useRef(runner);
+	runnerRef.current = runner;
+	const portsRef = useRef(ports);
+	portsRef.current = ports;
+	useEffect(() => {
+		if (!reopen) return;
+		const { entry } = reopen;
+		runnerRef.current.loadHistory(entry);
+		if (entry.input?.imageId) portsRef.current.inputImage(entry.input.imageId).then((dataUrl) => setImageDataUrl(dataUrl)).catch(() => {});
+		if (entry.input?.packageType) setHint(entry.input.packageType);
+	}, [reopen]);
+	useEffect(() => {
+		ports.config().then(setConfig).catch(() => {});
+	}, [ports]);
+	const maxBytes = config?.limits.imageBytes ?? 4194304;
+	const authed = auth.phase === "authenticated";
+	const busy = runner.phase === "running";
+	const extract = useCallback(() => {
+		if (!imageDataUrl) return;
+		runner.run({
+			kind: "extract-footprint",
+			input: {
+				imageDataUrl,
+				...hint.trim() ? { packageType: hint.trim() } : {}
+			}
+		});
+	}, [
+		imageDataUrl,
+		hint,
+		runner
+	]);
+	const confirmDimensions = useCallback((values, edited) => {
+		runner.run({
+			kind: "generate-footprint",
+			input: {
+				imageDataUrl: imageDataUrl ?? void 0,
+				packageType: (runner.pkgType ?? hint.trim()) || void 0,
+				fileName: runner.fileName ?? void 0,
+				dimensions: values,
+				edited
+			}
+		});
+	}, [
+		runner,
+		hint,
+		imageDataUrl
+	]);
+	const cancelConfirm = useCallback(() => {
+		runner.clear();
+	}, [runner]);
+	const resultKey = useMemo(() => `${runner.jobId ?? "none"}:${runner.phase}`, [runner.jobId, runner.phase]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "cga-app",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "cga-panel",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "cga-panel__body",
+				children: [
+					auth.phase === "unknown" ? /* @__PURE__ */ jsxs("div", {
+						className: "cga-progress",
+						children: [/* @__PURE__ */ jsx("span", { className: "cga-spinner" }), t("app.loading")]
+					}) : null,
+					auth.phase === "unauthenticated" ? /* @__PURE__ */ jsxs("div", {
+						className: "cga-auth",
+						children: [/* @__PURE__ */ jsx("span", { children: t("auth.loginRequired") }), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "cga-btn",
+							onClick: auth.login,
+							children: t("auth.login")
+						})]
+					}) : null,
+					runner.phase !== "needs_confirmation" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsx(UploadInput, {
+							maxBytes,
+							t,
+							disabled: !authed || busy,
+							imageDataUrl,
+							file,
+							onFile: (f, url) => {
+								setFile(f);
+								setImageDataUrl(url);
+							}
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "cga-field",
+							children: [/* @__PURE__ */ jsx("label", {
+								className: "cga-field__label",
+								children: t("footprint.hintPlaceholder")
+							}), /* @__PURE__ */ jsx("input", {
+								className: "cga-field__input",
+								type: "text",
+								value: hint,
+								disabled: !authed || busy,
+								onChange: (ev) => setHint(ev.target.value)
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "cga-actions",
+							children: [/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "cga-btn cga-btn--primary",
+								disabled: !authed || !imageDataUrl || busy,
+								onClick: extract,
+								children: busy ? t("footprint.extractProgress") : t("footprint.extract")
+							}), busy ? /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "cga-btn",
+								onClick: () => void runner.cancel(),
+								children: t("editor.cancelLabel")
+							}) : null]
+						})
+					] }) : null,
+					runner.phase === "running" && runner.jobId ? /* @__PURE__ */ jsxs("div", {
+						className: "cga-progress",
+						children: [/* @__PURE__ */ jsx("span", { className: "cga-spinner" }), runner.progress || t("footprint.extractProgress")]
+					}) : null,
+					runner.phase === "needs_confirmation" && runner.dimensions ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+						className: "cga-banner cga-banner--info",
+						children: t("footprint.needsConfirmation")
+					}), /* @__PURE__ */ jsx(GeometryEditor, {
+						dimensions: runner.dimensions,
+						pkgType: runner.pkgType,
+						fileName: runner.fileName,
+						disabled: false,
+						t,
+						onConfirm: confirmDimensions,
+						onCancel: cancelConfirm
+					})] }) : null,
+					runner.phase === "failed" ? /* @__PURE__ */ jsxs("div", {
+						className: "cga-banner cga-banner--error",
+						children: [
+							t("footprint.failed"),
+							": ",
+							runner.error,
+							runner.result?.status === "needs_auth" ? ` (${t("auth.loginRequired")})` : ""
+						]
+					}) : null
+				]
+			})
+		}), runner.phase === "completed" ? /* @__PURE__ */ jsx(ResultStage, {
+			ports,
+			kind: "footprint",
+			result: runner.result,
+			t,
+			srcKey: resultKey
+		}) : null]
+	});
+}
+//#endregion
+//#region src/components/HistoryPanel.tsx
+/**
+* `@huaqiu/component-gen-app` — history panel.
+*
+* Reads `ports.history()` with cursor pagination; renders entries with
+* reopen / download / delete. Stays DSH-agnostic — actions resolve through
+* the ports, and artifact text comes from `ports.artifactContent`.
+*/
+const PAGE = 12;
+function HistoryPanel({ ports, t, activeKind = null, onReopen }) {
+	const [entries, setEntries] = useState([]);
+	const [cursor, setCursor] = useState(null);
+	const [loading, setLoading] = useState(false);
+	const [done, setDone] = useState(false);
+	const [busy, setBusy] = useState(null);
+	const load = useCallback(async (nextCursor) => {
+		setLoading(true);
+		try {
+			const page = await ports.history({
+				limit: PAGE,
+				cursor: nextCursor
+			});
+			if (!nextCursor) setEntries(page.entries);
+			else setEntries((prev) => [...prev, ...page.entries]);
+			setCursor(page.nextCursor ?? null);
+			if (!page.nextCursor) setDone(true);
+		} catch (e) {
+			console.warn("[hq-component-gen] history load failed", e);
+			setDone(true);
+		} finally {
+			setLoading(false);
+		}
+	}, [ports]);
+	useEffect(() => {
+		load(null);
+	}, [load]);
+	const doDelete = useCallback(async (entry) => {
+		setBusy(entry.id);
+		try {
+			await ports.deleteHistory(entry.id);
+			setEntries((prev) => prev.filter((e) => e.id !== entry.id));
+		} finally {
+			setBusy(null);
+		}
+	}, [ports]);
+	const doDownload = useCallback(async (entry) => {
+		if (!entry.result?.artifactId) return;
+		setBusy(entry.id);
+		try {
+			const content = await ports.artifactContent(entry.result.artifactId);
+			triggerDownload(entry.result.filename || `${entry.result.artifactId}.${entry.kind === "symbol" ? "kicad_sym" : "kicad_mod"}`, content);
+		} catch (e) {
+			console.warn("[hq-component-gen] history download failed", e);
+		} finally {
+			setBusy(null);
+		}
+	}, [ports]);
+	const visible = activeKind ? entries.filter((e) => e.kind === activeKind) : entries;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "cga-history",
+		children: [
+			visible.length === 0 && !loading ? /* @__PURE__ */ jsx("div", {
+				className: "cga-upload__text",
+				children: t("history.empty")
+			}) : null,
+			visible.map((entry) => /* @__PURE__ */ jsxs("div", {
+				className: "cga-history__item",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "cga-history__meta",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "cga-history__title",
+						children: [
+							entry.kind === "symbol" ? t("history.symbol") : t("history.footprint"),
+							" — ",
+							entry.result?.filename ?? entry.id.slice(0, 8)
+						]
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "cga-history__sub",
+						children: [
+							new Date(entry.createdAt).toLocaleString(),
+							" · ",
+							t(`history.${entry.status}`)
+						]
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						gap: 4
+					},
+					children: [entry.status === "generated" && entry.result?.artifactId ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "cga-history__act",
+						disabled: busy === entry.id,
+						onClick: () => onReopen(entry),
+						children: t("history.reopen")
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "cga-history__act",
+						disabled: busy === entry.id,
+						onClick: () => void doDownload(entry),
+						children: t("history.download")
+					})] }) : null, /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "cga-history__act",
+						disabled: busy === entry.id,
+						onClick: () => void doDelete(entry),
+						children: t("history.delete")
+					})]
+				})]
+			}, entry.id)),
+			!done && visible.length > 0 ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "cga-btn",
+				disabled: loading,
+				onClick: () => void load(cursor),
+				children: loading ? t("app.loading") : t("history.loadMore")
+			}) : null,
+			done && visible.length > 0 ? /* @__PURE__ */ jsx("div", {
+				className: "cga-upload__text",
+				children: t("history.noMore")
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/App.tsx
+/**
+* `@huaqiu/component-gen-app` — the app shell.
+*
+* Renders one of the two generation pages (the host opens the page directly).
+* History lives in a modal dialog opened from the header's "View history"
+* action (mirroring dsh's settings-dialog header action beside the close
+* button); reopening an entry closes the dialog and loads the artifact back
+* into the page. Completely DSH-agnostic — everything the app needs comes
+* through `ComponentGenPorts`.
+*/
+/** Modal history dialog — chrome follows dsh's Modal primitive. */
+function HistoryDialog({ ports, page, t, onReopen, onClose }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "cga-history-dialog",
+		role: "presentation",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "cga-history-dialog__mask",
+			"aria-hidden": "true",
+			onClick: onClose
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "cga-history-dialog__panel",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": t("history.title"),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "cga-history-dialog__head",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "cga-history-dialog__title",
+					children: t("history.title")
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "cga-app__head-close",
+					"aria-label": t("app.close"),
+					onClick: onClose,
+					children: /* @__PURE__ */ jsx("svg", {
+						width: "16",
+						height: "16",
+						viewBox: "0 0 16 16",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "1.5",
+						strokeLinecap: "round",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" })
+					})
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "cga-history-dialog__body",
+				children: /* @__PURE__ */ jsx(HistoryPanel, {
+					ports,
+					t,
+					activeKind: page,
+					onReopen
+				})
+			})]
+		})]
+	});
+}
+function ComponentGenApp(props) {
+	const { ports, page, lang, onClose } = props;
+	const t = useMemo(() => translateFor(lang), [lang]);
+	const [historyOpen, setHistoryOpen] = useState(false);
+	const [reopenReq, setReopenReq] = useState(null);
+	const pageReopen = reopenReq && reopenReq.entry.kind === page ? reopenReq : null;
+	const openHistory = (entry) => {
+		setHistoryOpen(false);
+		setReopenReq((prev) => ({
+			n: (prev?.n ?? 0) + 1,
+			entry
+		}));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "cga-app",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "cga-app__head",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "cga-app__head-title",
+					children: page === "symbol" ? t("app.symbolTitle") : t("app.footprintTitle")
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "cga-app__head-actions",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "cga-btn cga-btn--outline",
+						onClick: () => setHistoryOpen(true),
+						children: t("history.view")
+					}), onClose ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "cga-app__head-close",
+						"aria-label": t("app.close"),
+						onClick: onClose,
+						children: /* @__PURE__ */ jsx("svg", {
+							width: "16",
+							height: "16",
+							viewBox: "0 0 16 16",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "1.5",
+							strokeLinecap: "round",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" })
+						})
+					}) : null]
+				})]
+			}),
+			page === "symbol" ? /* @__PURE__ */ jsx(SymbolGenPage, {
+				ports,
+				t,
+				reopen: pageReopen
+			}) : /* @__PURE__ */ jsx(FootprintGenPage, {
+				ports,
+				t,
+				reopen: pageReopen
+			}),
+			historyOpen ? /* @__PURE__ */ jsx(HistoryDialog, {
+				ports,
+				page,
+				t,
+				onReopen: openHistory,
+				onClose: () => setHistoryOpen(false)
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/api/component-gen-client.ts
+const DEFAULT_LIMITS = { imageBytes: 4194304 };
+async function readJson(res) {
+	if (!res.ok) {
+		let detail = `HTTP ${res.status}`;
+		try {
+			const body = await res.json();
+			if (body?.error) detail = body.error;
+			if (body?.detail) detail = `${detail}: ${String(body.detail)}`;
+		} catch {}
+		throw new Error(detail);
+	}
+	return await res.json();
+}
+/** The shared fetch client. */
+function createHttpPorts(options) {
+	const base = options.base.replace(/\/+$/, "");
+	const doFetch = options.doFetch ?? globalThis.fetch.bind(globalThis);
+	const artifactsBase = (options.artifactsBase ?? defaultArtifactsBase(base)).replace(/\/+$/, "");
+	const url = (p) => `${base}${p}`;
+	const artifactUrl = (p) => `${artifactsBase}${p}`;
+	return {
+		async config() {
+			const cfg = await readJson(await doFetch(url("/config"), { headers: { accept: "application/json" } }));
+			return {
+				hostMode: cfg.hostMode ?? false,
+				capabilities: cfg.capabilities ?? {
+					symbol: true,
+					footprint: true
+				},
+				limits: {
+					...DEFAULT_LIMITS,
+					...cfg.limits ?? {}
+				}
+			};
+		},
+		async startJob(req, signal) {
+			const res = await doFetch(url("/jobs"), {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify(req),
+				signal
+			});
+			if (res.status === 202) {
+				const body = await res.json();
+				return {
+					id: String(body.jobId ?? ""),
+					kind: req.kind,
+					status: "queued",
+					createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+					updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+				};
+			}
+			return readJson(res);
+		},
+		jobEvents(jobId, onEvent) {
+			const controller = new AbortController();
+			const run = async () => {
+				try {
+					const res = await doFetch(url(`/jobs/${encodeURIComponent(jobId)}/events`), {
+						headers: { accept: "text/event-stream" },
+						signal: controller.signal
+					});
+					if (!res.ok || !res.body) {
+						onEvent({
+							type: "failed",
+							error: `events HTTP ${res.status}`,
+							at: (/* @__PURE__ */ new Date()).toISOString()
+						});
+						return;
+					}
+					const reader = res.body.getReader();
+					const decoder = new TextDecoder();
+					let buf = "";
+					for (;;) {
+						const { done, value } = await reader.read();
+						if (done) break;
+						buf += decoder.decode(value, { stream: true });
+						let idx;
+						while ((idx = buf.indexOf("\n\n")) >= 0) {
+							const frame = buf.slice(0, idx);
+							buf = buf.slice(idx + 2);
+							const event = parseEvent(frame);
+							if (event) onEvent(event);
+						}
+					}
+				} catch (err) {
+					if (err?.name === "AbortError") return;
+					onEvent({
+						type: "failed",
+						error: String(err?.message || err),
+						at: (/* @__PURE__ */ new Date()).toISOString()
+					});
+				}
+			};
+			run();
+			return () => controller.abort();
+		},
+		async abortJob(jobId) {
+			await doFetch(url(`/jobs/${encodeURIComponent(jobId)}`), { method: "DELETE" });
+		},
+		async history(query) {
+			const params = new URLSearchParams();
+			if (query.limit !== void 0) params.set("limit", String(query.limit));
+			if (query.cursor) params.set("cursor", query.cursor);
+			const qs = params.toString();
+			return readJson(await doFetch(url(`/history${qs ? `?${qs}` : ""}`), { headers: { accept: "application/json" } }));
+		},
+		async historyEntry(id) {
+			const res = await doFetch(url(`/history/${encodeURIComponent(id)}`), { headers: { accept: "application/json" } });
+			if (res.status === 404) return null;
+			return readJson(res);
+		},
+		async patchHistory(id, patch) {
+			return readJson(await doFetch(url(`/history/${encodeURIComponent(id)}`), {
+				method: "PATCH",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify(patch)
+			}));
+		},
+		async deleteHistory(id) {
+			await doFetch(url(`/history/${encodeURIComponent(id)}`), { method: "DELETE" });
+		},
+		async artifactContent(artifactId) {
+			const res = await doFetch(artifactUrl(`/${encodeURIComponent(artifactId)}/content`), { headers: { accept: "text/plain" } });
+			if (!res.ok) throw new Error(`artifact content HTTP ${res.status}`);
+			return res.text();
+		},
+		async inputImage(imageId) {
+			const res = await doFetch(url(`/history/${encodeURIComponent(imageId)}/image`), { headers: { accept: "image/*" } });
+			if (!res.ok) throw new Error(`input image HTTP ${res.status}`);
+			const blob = await res.blob();
+			return new Promise((resolve, reject) => {
+				const reader = new FileReader();
+				reader.onload = () => resolve(String(reader.result));
+				reader.onerror = () => reject(/* @__PURE__ */ new Error("failed to read input image"));
+				reader.readAsDataURL(blob);
+			});
+		},
+		auth: options.auth ?? createPassthroughAuth()
+	};
+}
+/** Derive the artifacts base from the component-gen base path. */
+function defaultArtifactsBase(componentGenBase) {
+	return componentGenBase.replace(/\/component-gen\/?$/, "/artifacts");
+}
+/** Parse one SSE frame (event: / data: lines) into a JobEvent. */
+function parseEvent(frame) {
+	let eventName = "message";
+	const dataLines = [];
+	for (const line of frame.split("\n")) if (line.startsWith("event:")) eventName = line.slice(6).trim();
+	else if (line.startsWith("data:")) dataLines.push(line.slice(5).trimStart());
+	const data = dataLines.join("\n");
+	if (!data) return null;
+	try {
+		const raw = JSON.parse(data);
+		if (eventName === "needs_confirmation" && "dimensions" in raw) return raw;
+		if (eventName === "completed" && "job" in raw) return raw;
+		if (eventName === "failed") return raw;
+		if (eventName === "cancelled") return raw;
+		return raw;
+	} catch {
+		return null;
+	}
+}
+/** Default auth port: optimistic (used when the host supplies no auth). */
+function createPassthroughAuth() {
+	return {
+		async isAuthenticated() {
+			return true;
+		},
+		async getUserInfo() {
+			return null;
+		},
+		async login() {},
+		onAuthStateChanged() {
+			return () => {};
+		}
+	};
+}
+//#endregion
+//#region src/styles/inject.ts
+/**
+* `@huaqiu/component-gen-app` — scoped stylesheet.
+*
+* Injected as a `<style>` tag (never a CSS import) so both build surfaces work:
+* the standalone vite bundle AND the DSH client-module bundle (tsdown has no
+* CSS pipeline). Reuses the `hq-genhit__*` class vocabulary (shared with
+* `dsh-tool-symbol-footprint`) plus an `cga-*` app-shell layer. Uses the same
+* DSW design tokens so the app follows the host palette in DSH.
+*/
+const APP_STYLE_ID = "hq-cga-styles";
+const APP_PLUGIN_ID = "@huaqiu/component-gen-app";
+const CSS = `
+/* ── shared with dsh-tool-symbol-footprint (editor + preview) ─────────────── */
+.hq-genhit__stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; background: var(--dsw-alias-markdown-code-block, #0a1929); overflow: hidden; }
+.hq-genhit__stage--symbol, .hq-genhit__stage--footprint { height: 300px; }
+.hq-genhit__canvas { display: block; width: 100%; height: 100%; background: var(--dsw-alias-markdown-code-block, #0a1929); }
+.hq-genhit__stage-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 10px 14px; box-sizing: border-box; font: var(--dsw-font-xxs-12, 12px/1.4 system-ui, sans-serif); color: var(--dsw-alias-label-secondary, currentColor); text-align: center; }
+.hq-genhit__editor { padding: 0 12px 4px; }
+.hq-genhit__geom { display: block; width: 100%; height: auto; touch-action: none; }
+.hq-genhit__body { fill: var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,0.08)); stroke: var(--dsw-alias-label-primary, currentColor); stroke-width: 1.5; }
+.hq-genhit__pad { fill: var(--dsw-alias-accent-primary, currentColor); opacity: 0.85; }
+.hq-genhit__ball { fill: var(--dsw-alias-accent-primary, currentColor); opacity: 0.85; }
+.hq-genhit__epad { fill: var(--dsw-alias-accent-primary, currentColor); opacity: 0.25; stroke: var(--dsw-alias-accent-primary, currentColor); stroke-width: 1; stroke-dasharray: 2 2; }
+.hq-genhit__pkg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 0 0 8px; }
+.hq-genhit__badge--pkg { border-color: var(--dsw-alias-accent-primary, currentColor); color: var(--dsw-alias-accent-primary, currentColor); }
+.hq-genhit__pkg-meta { font: var(--dsw-font-xxs-12, 12px/1.4 system-ui, sans-serif); color: var(--dsw-alias-label-secondary, currentColor); }
+.hq-genhit__pkg-meta--sep { opacity: 0.85; }
+.hq-genhit__dimline { stroke: var(--dsw-alias-label-secondary, currentColor); stroke-width: 1; }
+.hq-genhit__dimlabel { fill: var(--dsw-alias-label-secondary, currentColor); font: 11px/1 system-ui, sans-serif; }
+.hq-genhit__dimlabel--clickable { cursor: pointer; }
+.hq-genhit__dimlabel--clickable:hover { fill: var(--dsw-alias-accent-primary, currentColor); text-decoration: underline; }
+.hq-genhit__tol { fill: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary, currentColor)); font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
+.hq-genhit__arrow { fill: var(--dsw-alias-label-secondary, currentColor); }
+.hq-genhit__handle { fill: var(--dsw-alias-accent-primary, currentColor); stroke: var(--dsw-alias-bg-layer-1, #fff); stroke-width: 1.5; cursor: ew-resize; }
+.hq-genhit__handle--h { cursor: ns-resize; }
+.hq-genhit__handle--wh { cursor: nwse-resize; }
+.hq-genhit__drag-hint { padding: 0 2px 6px; font: var(--dsw-font-xxs-12, 12px/1.4 system-ui, sans-serif); color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary, currentColor)); }
+.hq-genhit__fields { display: flex; flex-wrap: wrap; gap: 8px 12px; padding: 0 0 10px; }
+.hq-genhit__field { display: inline-flex; align-items: center; gap: 6px; }
+.hq-genhit__field-label { font: var(--dsw-font-xxs-12, 12px/1.4 system-ui, sans-serif); color: var(--dsw-alias-label-secondary, currentColor); }
+.hq-genhit__field-label--edited { color: var(--dsw-alias-accent-primary, currentColor); }
+.hq-genhit__field-tag { font: 10px/1.2 system-ui, sans-serif; padding: 1px 4px; border-radius: 4px; }
+.hq-genhit__field-tag--ai { color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary, currentColor)); border: 1px solid var(--dsw-alias-border-l1, currentColor); }
+.hq-genhit__field-tag--edited { color: var(--dsw-alias-accent-primary, currentColor); border: 1px solid var(--dsw-alias-accent-primary, currentColor); }
+.hq-genhit__field-input { width: 72px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--dsw-alias-border-l1, currentColor); background: var(--dsw-alias-bg-layer-1, transparent); color: var(--dsw-alias-label-primary, currentColor); font: var(--dsw-font-xxs-12, 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace); }
+.hq-genhit__field--invalid .hq-genhit__field-input { border-color: var(--dsw-alias-state-error-primary, currentColor); }
+.hq-genhit__field-unit { font: var(--dsw-font-xxs-12, 12px/1.4 system-ui, sans-serif); color: var(--dsw-alias-label-secondary, currentColor); }
+.hq-genhit__adv { padding: 0 0 8px; }
+.hq-genhit__adv-toggle { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--dsw-alias-border-l1, currentColor); border-radius: 6px; padding: 3px 8px; background: var(--dsw-alias-bg-layer-1, transparent); color: var(--dsw-alias-label-secondary, currentColor); font: var(--dsw-font-xxs-12, 12px/1.4 system-ui, sans-serif); cursor: pointer; }
+.hq-genhit__fields--adv { padding-top: 8px; }
+.hq-genhit__validation { display: flex; align-items: baseline; gap: 6px; padding: 6px 10px; margin: 0 0 10px; border-radius: 6px; font: var(--dsw-font-xxs-12, 12px/1.4 system-ui, sans-serif); color: var(--dsw-alias-label-secondary, currentColor); background: var(--dsw-alias-interactive-bg-hover, transparent); }
+.hq-genhit__validation--warn { color: var(--dsw-alias-state-warning-primary, var(--dsw-alias-state-error-primary, currentColor)); background: var(--dsw-alias-state-warning-bg, transparent); }
+.hq-genhit__validation-detail { opacity: 0.85; }
+
+/* ── app shell (cga-*) — tokens/geometry follow dsh's Modal + settings dialog
+   (mask-1/mask-blur, layer-2 + elevation, r24 dialog, 28x28 r8 close, 13px/500
+   labels, r8 inputs on bg-layer-3 with border-l4, capsule sm buttons) ─────── */
+.cga-app { display: flex; flex-direction: column; gap: 12px; width: 100%; box-sizing: border-box; font: var(--dsw-font-s-14, 14px/1.5 system-ui, sans-serif); color: var(--dsw-alias-label-primary, currentColor); }
+.cga-app__head { display: flex; align-items: center; gap: 8px; }
+.cga-app__head-title { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--dsw-alias-label-primary, currentColor); }
+.cga-app__head-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: auto; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--dsw-alias-label-secondary, currentColor); cursor: pointer; }
+.cga-app__head-close:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,0.08)); }
+.cga-panel { border: 0.5px solid var(--dsw-alias-border-l2, rgba(127,127,127,0.2)); border-radius: 8px; background: var(--dsw-alias-bg-layer-1, transparent); overflow: hidden; }
+.cga-panel__body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
+.cga-upload { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px; border: 1px dashed var(--dsw-alias-border-l3, currentColor); border-radius: 8px; cursor: pointer; }
+.cga-upload--dragging { border-color: var(--dsw-alias-brand-primary, var(--dsw-alias-accent-primary, currentColor)); background: var(--dsw-alias-interactive-bg-hover, transparent); }
+.cga-upload__thumb { max-width: 160px; max-height: 120px; border-radius: 6px; object-fit: contain; }
+.cga-upload__text { font-size: 12px; line-height: 1.5; color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary, currentColor)); text-align: center; }
+.cga-upload__browse { margin-top: 2px; height: 28px; padding: 0 10px; border: 0.5px solid var(--dsw-alias-border-l3, currentColor); border-radius: 14px; background: transparent; color: var(--dsw-alias-label-primary, currentColor); font: inherit; font-size: 12px; line-height: 18px; cursor: pointer; }
+.cga-upload__browse:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,0.08)); }
+.cga-field { display: flex; flex-direction: column; gap: 6px; }
+.cga-field__label { font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--dsw-alias-label-primary, currentColor); }
+.cga-field__input, .cga-field__select { height: 34px; padding: 0 12px; border: 0.5px solid var(--dsw-alias-border-l4, currentColor); border-radius: 8px; background: var(--dsw-alias-bg-layer-3, transparent); color: var(--dsw-alias-label-primary, currentColor); font: inherit; font-size: 13px; line-height: 1.5; }
+.cga-field__input:focus-visible, .cga-field__select:focus-visible { outline: none; border-color: var(--dsw-alias-brand-primary, var(--dsw-alias-accent-primary, currentColor)); }
+.cga-field__input::placeholder { color: var(--dsw-alias-label-dimmed, var(--dsw-alias-label-tertiary, currentColor)); }
+.cga-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+.cga-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 28px; padding: 0 10px; border: none; border-radius: 14px; background: transparent; color: var(--dsw-alias-label-primary, currentColor); font: inherit; font-size: 12px; line-height: 18px; cursor: pointer; }
+.cga-btn:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,0.08)); }
+.cga-btn:disabled { opacity: 0.4; cursor: default; }
+.cga-btn--primary { background: var(--dsw-alias-button-primary-fill, var(--dsw-alias-accent-primary, currentColor)); border-color: transparent; color: var(--dsw-alias-label-primary-foreground, #fff); }
+.cga-btn--primary:hover { background: var(--dsw-alias-button-primary-hover, var(--dsw-alias-accent-primary, currentColor)); }
+.cga-btn--primary:disabled { opacity: 0.6; }
+.cga-btn--outline { border: 0.5px solid var(--dsw-alias-border-l3, currentColor); }
+.cga-app__head-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
+.cga-banner { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.5; }
+.cga-banner--info { color: var(--dsw-alias-label-secondary, currentColor); background: var(--dsw-alias-interactive-bg-hover, transparent); }
+.cga-banner--warn { color: var(--dsw-alias-state-warning-primary, currentColor); background: var(--dsw-alias-state-warning-bg, transparent); }
+.cga-banner--error { color: var(--dsw-alias-state-error-primary, currentColor); background: var(--dsw-alias-state-error-bg, transparent); }
+.cga-progress { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--dsw-alias-label-secondary, currentColor); }
+.cga-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--dsw-alias-border-l3, currentColor); border-top-color: var(--dsw-alias-brand-primary, var(--dsw-alias-accent-primary, currentColor)); animation: cga-spin 0.8s linear infinite; flex: none; }
+@keyframes cga-spin { to { transform: rotate(360deg); } }
+.cga-history { display: flex; flex-direction: column; gap: 6px; }
+.cga-history__item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 0.5px solid var(--dsw-alias-border-l2, rgba(127,127,127,0.2)); border-radius: 8px; }
+.cga-history__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
+.cga-history__title { font-size: 13px; line-height: 1.5; color: var(--dsw-alias-label-primary, currentColor); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cga-history__sub { font-size: 12px; line-height: 1.5; color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary, currentColor)); }
+.cga-history__act { border: 0; background: none; color: var(--dsw-alias-brand-primary, var(--dsw-alias-accent-primary, currentColor)); font: inherit; font-size: 12px; line-height: 1.5; cursor: pointer; padding: 2px 4px; }
+.cga-history__act:hover { color: var(--dsw-alias-label-primary, currentColor); }
+.cga-auth { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--dsw-alias-interactive-bg-hover, transparent); font-size: 12px; line-height: 1.5; color: var(--dsw-alias-label-secondary, currentColor); }
+
+/* History modal — same chrome as dsh's Modal/settings dialog. */
+.cga-history-dialog { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
+.cga-history-dialog__mask { position: absolute; inset: 0; background: var(--dsw-alias-bg-mask-1); backdrop-filter: var(--dsw-mask-blur); }
+.cga-history-dialog__panel { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(480px, 100%); max-height: min(560px, calc(100vh - 48px)); overflow: hidden; border-radius: 24px; background: var(--dsw-alias-bg-layer-2); box-shadow: var(--dsw-elevation-prominent); }
+.cga-history-dialog__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 20px 14px 8px 24px; }
+.cga-history-dialog__title { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--dsw-alias-label-primary, currentColor); }
+.cga-history-dialog__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 24px 24px; }
+`;
+function injectAppStyles() {
+	if (typeof document === "undefined") return;
+	if (document.getElementById("hq-cga-styles")) return;
+	const style = document.createElement("style");
+	style.id = APP_STYLE_ID;
+	style.setAttribute("data-plugin", APP_PLUGIN_ID);
+	style.textContent = CSS;
+	document.head.appendChild(style);
+}
+function removeAppStyles() {
+	if (typeof document === "undefined") return;
+	document.getElementById(APP_STYLE_ID)?.remove();
+}
+//#endregion
+export { APP_STYLE_ID, ComponentGenApp, EN, FootprintGenPage, GeometryEditor, HistoryPanel, PreviewStage, ResultStage, SymbolGenPage, UploadInput, ZH, createHttpPorts, defaultArtifactsBase, defaultT, fileToDataUrl, injectAppStyles, removeAppStyles, translate, translateFor };