@lijinmei-810/dev-inspector 0.2.0 → 0.2.1

package/dist/index.cjs

@@ -37,6 +37,40 @@ var import_lucide_react = require("lucide-react");
 // src/DevInspectorProvider.tsx
 var import_react = require("react");
 
+// src/tokens/typography.json
+var typography_default = {
+  title: {
+    fontSize: "15px",
+    fontWeight: "700",
+    lineHeight: "1.4",
+    color: "#111827"
+  },
+  sectionLabel: {
+    fontSize: "12px",
+    fontWeight: "700",
+    lineHeight: "1.4",
+    color: "#374151"
+  },
+  body: {
+    fontSize: "12px",
+    fontWeight: "400",
+    lineHeight: "1.5",
+    color: "#6b7280"
+  },
+  meta: {
+    fontSize: "11px",
+    fontWeight: "600",
+    lineHeight: "1.35",
+    color: "#94a3b8"
+  },
+  tinyBadge: {
+    fontSize: "10px",
+    fontWeight: "700",
+    lineHeight: "1.2",
+    color: "#64748b"
+  }
+};
+
 // src/config.ts
 var FALLBACK_TYPOGRAPHY_STYLES = [
   {
@@ -136,6 +170,7 @@ var FALLBACK_SHADOW_TOKENS = [
 var FALLBACK_TOKENS = {
   colorPalette: [],
   tokenLabels: {},
+  inspectorTypography: typography_default,
   radiusPresets: [
     { label: "\u65E0", sub: "", value: "0px", token: "" },
     { label: "S", sub: "4px", value: "4px", token: "" },
@@ -306,12 +341,22 @@ function handleArrowKeyStep(event, onStep, onEnter) {
   }
   if (event.key === "Enter") onEnter?.();
 }
+function renderSubmitLabel(submitMsg) {
+  if (submitMsg === "\u5DF2\u590D\u5236") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "di-btn-save-content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Check, { size: 14, strokeWidth: 2.4, "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u5DF2\u590D\u5236" })
+    ] });
+  }
+  return submitMsg || "\u53D1\u9001\u7ED9AI";
+}
 var COLOR_PROPS = [
   { label: "\u80CC\u666F\u8272", prop: "background-color" }
 ];
 function getColorLabel(val, colorPalette) {
+  const normalizedVal = resolveColorValue(val);
   for (const g of colorPalette) {
-    const found = g.colors.find((c) => c.val === val);
+    const found = g.colors.find((c) => resolveColorValue(c.val) === normalizedVal);
     if (found) return `${g.group}\xB7${found.label}`;
   }
   return null;
@@ -521,10 +566,26 @@ function isTextEntryTarget(target) {
 function normalizeColor(val) {
   const raw = val.trim();
   if (raw === "transparent" || /^rgba\(\s*0,\s*0,\s*0,\s*0\s*\)$/i.test(raw)) return "transparent";
-  const m = val.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+  const m = raw.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)$/);
   if (m) return "#" + [m[1], m[2], m[3]].map((n) => parseInt(n).toString(16).padStart(2, "0")).join("");
+  if (/^#[0-9a-f]{3,8}$/i.test(raw)) return raw.toLowerCase();
   return raw;
 }
+function resolveColorValue(val) {
+  const normalized = normalizeColor(val || "");
+  if (!normalized || normalized === "transparent") return normalized || "transparent";
+  if (/^#[0-9a-f]{6}$/i.test(normalized)) return normalized;
+  if (typeof document === "undefined" || !document.body) return normalized;
+  const probe = document.createElement("div");
+  probe.style.color = normalized;
+  probe.style.position = "fixed";
+  probe.style.opacity = "0";
+  probe.style.pointerEvents = "none";
+  document.body.appendChild(probe);
+  const computed = normalizeColor(getComputedStyle(probe).color.trim());
+  probe.remove();
+  return computed || normalized;
+}
 function isTransparentColor(val) {
   return normalizeColor(val || "transparent") === "transparent";
 }
@@ -667,7 +728,7 @@ function getComponentClasses(el) {
   if (primitiveClasses.length) return primitiveClasses;
   const classes = getClasses(el);
   const cardBaseClass = classes.find(
-    (className) => /(^|[-_])card([-_]|$)/i.test(className) && !className.includes("--")
+    (className) => isCardRootClass(className) && !className.includes("--")
   );
   if (cardBaseClass) return [cardBaseClass];
   const badgeBaseClass = classes.find(
@@ -726,6 +787,7 @@ var TEXT_ONLY_TAGS = /* @__PURE__ */ new Set([
 var TEXT_SEMANTIC_CLASS_RE = /(^|[-_])(caption|copy|desc|description|eyebrow|heading|label|subtitle|text|title)([-_]|$)/i;
 var STRUCTURAL_CONTAINER_CLASS_RE = /(^|[-_])(area|block|card|container|content|group|grid|item|layout|list|panel|row|section|shell|stack|zone)([-_]|$)/i;
 var PAGE_SHELL_CLASS_RE = /(^|[-_])(app|page|root|screen|shell|workspace)([-_]|$)/i;
+var CARD_ROOT_CLASS_NAMES = /* @__PURE__ */ new Set(["task-card"]);
 var TEXT_GROUP_EXCLUDED_SELECTOR = [
   "button",
   "input",
@@ -756,6 +818,12 @@ function hasTextSemanticClass(el) {
     (className) => !isStateClass(className) && !/^lucide(-|$)/.test(className) && TEXT_SEMANTIC_CLASS_RE.test(className)
   );
 }
+function getRegisteredComponentType(el) {
+  return (el.getAttribute("data-component") || "").trim();
+}
+function isCardRootClass(className) {
+  return CARD_ROOT_CLASS_NAMES.has(className) || /(^|[-_])card($|--)/i.test(className);
+}
 function hasStructuralContainerClass(el) {
   return getClasses(el).some(
     (className) => !isStateClass(className) && STRUCTURAL_CONTAINER_CLASS_RE.test(className)
@@ -891,6 +959,17 @@ function getInspectorComponentMeta(el) {
   const tag = el.tagName.toLowerCase();
   const classes = getClasses(el);
   const componentClasses = getComponentClasses(el);
+  const registeredComponentType = getRegisteredComponentType(el);
+  if (registeredComponentType) {
+    const type = registeredComponentType;
+    return {
+      name: componentClasses[0] ?? type,
+      type,
+      layer: "Component",
+      variant: inferVariantFromClasses(classes),
+      state: inferStateFromElement(el, classes)
+    };
+  }
   if (tag === "svg" && classes.includes("lucide")) {
     const iconClass = classes.find((className) => /^lucide-/.test(className));
     return {
@@ -911,9 +990,9 @@ function getInspectorComponentMeta(el) {
       state: inferStateFromElement(el, classes)
     };
   }
-  if (classIncludes(classes, /(^|[-_])card([-_]|$)/i)) {
+  if (classes.some(isCardRootClass)) {
     return {
-      name: componentClasses.find((className) => /card/i.test(className)) ?? componentClasses[0] ?? "card",
+      name: componentClasses.find((className) => isCardRootClass(className)) ?? componentClasses[0] ?? "card",
       type: "Card",
       layer: "Component",
       variant: inferCardVariant(classes),
@@ -1541,6 +1620,14 @@ function canPersistSelector(el, scope) {
 function isInsidePanel(el) {
   return el.closest(".di-panel") !== null || el.closest(".di-trigger") !== null || el.closest(".di-label") !== null;
 }
+function resolveSelectionTarget(raw) {
+  let cursor = raw;
+  while (cursor && cursor !== document.body && cursor !== document.documentElement) {
+    if (getInspectorComponentMeta(cursor)) return cursor;
+    cursor = cursor.parentElement;
+  }
+  return raw;
+}
 function scanTokenMap() {
   const map = {};
   try {
@@ -1571,6 +1658,12 @@ function getComputedColor(el, prop) {
 function getComputedRadius(el) {
   return getComputedStyle(el).getPropertyValue("border-radius").trim();
 }
+function getComputedPadding(el) {
+  const cs = getComputedStyle(el);
+  const t = cs.paddingTop, r = cs.paddingRight, b = cs.paddingBottom, l = cs.paddingLeft;
+  if (t === r && r === b && b === l) return t;
+  return `${t} ${r} ${b} ${l}`;
+}
 function parseTranslate(val) {
   const raw = (val || "none").trim();
   if (!raw || raw === "none") return { x: 0, y: 0 };
@@ -2014,6 +2107,93 @@ function getTextContent(el) {
   const text = Array.from(el.childNodes).filter((n) => n.nodeType === Node.TEXT_NODE).map((n) => n.textContent ?? "").join("").trim();
   return text.length > 0 ? el.textContent?.trim() ?? null : null;
 }
+function MatchBadge({
+  label,
+  tooltip,
+  tone
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "span",
+    {
+      className: `di-match-badge di-match-badge--${tone}`,
+      title: tooltip,
+      "data-tooltip": tooltip,
+      tabIndex: 0,
+      children: label
+    }
+  );
+}
+function getComputedMargin(el) {
+  const cs = getComputedStyle(el);
+  const t = cs.marginTop, r = cs.marginRight, b = cs.marginBottom, l = cs.marginLeft;
+  if (t === r && r === b && b === l) return t;
+  return `${t} ${r} ${b} ${l}`;
+}
+function formatReadableColor(value) {
+  if (!value || isTransparentColor(value)) return "\u900F\u660E";
+  return formatColorDisplay(resolveColorValue(value));
+}
+function getComponentElementStyleSummary(el) {
+  const cs = getComputedStyle(el);
+  const parts = [];
+  const text = getTextContent(el);
+  const tag = el.tagName.toLowerCase();
+  const borderWidth = getNumericCssValue(cs.borderTopWidth);
+  const radius = cs.borderRadius.trim();
+  const bg = cs.backgroundColor.trim();
+  const color = cs.color.trim();
+  if (text || /^(p|span|a|button|label|h1|h2|h3|h4|h5|h6|li|strong|em)$/i.test(tag)) {
+    parts.push(`\u5B57 ${formatLengthControlValue(cs.fontSize)}`);
+    parts.push(`\u91CD ${cs.fontWeight}`);
+    parts.push(`\u8272 ${formatReadableColor(color)}`);
+  }
+  if (!isTransparentColor(bg)) {
+    parts.push(`\u80CC\u666F ${formatReadableColor(bg)}`);
+  }
+  if (borderWidth > 0 && !isTransparentColor(cs.borderTopColor)) {
+    parts.push(`\u63CF\u8FB9 ${formatLengthControlValue(cs.borderTopWidth)} ${formatReadableColor(cs.borderTopColor)}`);
+  }
+  if (!isZeroLengthValue(radius)) {
+    parts.push(`\u5706\u89D2 ${formatLengthControlValue(radius)}`);
+  }
+  return parts.join(" / ") || "\u65E0\u660E\u663E\u6837\u5F0F";
+}
+function getComponentElementSpacingSummary(el) {
+  const cs = getComputedStyle(el);
+  const parts = [];
+  const paddingSummary = getSpaceSummary("padding", getComputedPadding(el));
+  const marginSummary = getSpaceSummary("margin", getComputedMargin(el));
+  const gapSummary = canControlElementGap(el) ? getSpaceSummary("gap", cs.gap.trim()) : "";
+  if (paddingSummary) parts.push(`\u5185\u8FB9\u8DDD ${paddingSummary}`);
+  if (marginSummary) parts.push(`\u5916\u8FB9\u8DDD ${marginSummary}`);
+  if (gapSummary) parts.push(`\u5143\u7D20\u95F4\u8DDD ${gapSummary.replace(/^gap\s*/i, "")}`);
+  return parts.join(" / ") || "\u65E0\u989D\u5916\u95F4\u8DDD";
+}
+function getComponentElementStyleStatus(el, tokenMap, colorPalette, tokenLabels, typographyTokens) {
+  const cs = getComputedStyle(el);
+  const colorInfo = getDisplayLabel(normalizeColor(cs.color), tokenMap, colorPalette, tokenLabels);
+  const backgroundInfo = getDisplayLabel(normalizeColor(cs.backgroundColor), tokenMap, colorPalette, tokenLabels);
+  const borderInfo = getDisplayLabel(normalizeColor(cs.borderTopColor), tokenMap, colorPalette, tokenLabels);
+  const typographyMatched = Boolean(getTypographyToken(cs.fontSize.trim(), cs.fontWeight.trim(), normalizeColor(cs.color), typographyTokens));
+  if (typographyMatched) return "token";
+  if (!colorInfo.isHardcoded || !backgroundInfo.isHardcoded || !borderInfo.isHardcoded) return "token";
+  return "raw";
+}
+function getComponentElementSpacingStatus(el, spaceSteps) {
+  const cs = getComputedStyle(el);
+  const paddingValue = getComputedPadding(el);
+  const marginValue = getComputedMargin(el);
+  const gapValue = cs.gap.trim();
+  const paddingSummary = getSpaceSummary("padding", paddingValue);
+  const marginSummary = getSpaceSummary("margin", marginValue);
+  const gapSummary = canControlElementGap(el) ? getSpaceSummary("gap", gapValue) : "";
+  const hasSpacing = Boolean(paddingSummary || marginSummary || gapSummary);
+  if (!hasSpacing) return null;
+  const paddingMatched = !paddingSummary || Boolean(getSpaceStepMatch("padding", paddingValue, spaceSteps));
+  const marginMatched = !marginSummary || Boolean(getSpaceStepMatch("margin", marginValue, spaceSteps));
+  const gapMatched = !gapSummary || Boolean(getSpaceStepMatch("gap", gapValue, spaceSteps));
+  return paddingMatched && marginMatched && gapMatched ? "token" : "raw";
+}
 var TOKEN_TYPES = [
   { key: "bg", label: "\u80CC\u666F\u8272", code: "bg" },
   { key: "text", label: "\u6587\u5B57\u8272", code: "text" },
@@ -2037,9 +2217,15 @@ var TOKEN_STATES = [
   { key: "warning", label: "\u8B66\u544A\u6001", code: "warning" }
 ];
 function ColorDropdown({ value, onChange, onClose, onAddToken, pos, colorPalette }) {
-  const initHex = value.startsWith("#") ? value : "#6b7280";
+  const resolvedValue = resolveColorValue(value);
+  const initHex = /^#[0-9a-f]{6}$/i.test(resolvedValue) ? resolvedValue : "#6b7280";
+  const initAlpha = (() => {
+    const rgbaMatch = value.match(/^rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)$/i);
+    if (!rgbaMatch) return 100;
+    return Math.max(0, Math.min(100, Math.round(parseFloat(rgbaMatch[4]) * 100)));
+  })();
   const [hexInput, setHexInput] = (0, import_react2.useState)(initHex);
-  const [alpha, setAlpha] = (0, import_react2.useState)(100);
+  const [alpha, setAlpha] = (0, import_react2.useState)(initAlpha);
   const customColorInputRef = (0, import_react2.useRef)(null);
   function buildColor(hex, a) {
     const m = hex.match(/^#([0-9a-f]{6})$/i);
@@ -2309,10 +2495,11 @@ function AddTokenModal({ value, cssProp, elementClasses, onClose, onConfirm, col
 }
 function getDisplayLabel(val, tokenMap, colorPalette, tokenLabels) {
   if (isTransparentColor(val)) return { label: "\u65E0", sub: "", isHardcoded: true };
-  const displayVal = formatColorDisplay(val);
-  const paletteLabel = getColorLabel(val, colorPalette);
+  const resolvedVal = resolveColorValue(val);
+  const displayVal = formatColorDisplay(resolvedVal);
+  const paletteLabel = getColorLabel(resolvedVal, colorPalette);
   if (paletteLabel) return { label: paletteLabel, sub: displayVal, isHardcoded: false };
-  const token = tokenMap[val];
+  const token = tokenMap[val] ?? tokenMap[resolvedVal];
   if (token) return { label: tokenLabels[token] ?? token.replace("--", ""), sub: displayVal, isHardcoded: false };
   return { label: displayVal, sub: "", isHardcoded: true };
 }
@@ -2595,6 +2782,7 @@ function InspectorPanel({
   const {
     colorPalette,
     tokenLabels,
+    inspectorTypography,
     radiusPresets,
     spaceSteps,
     borderWidthSteps,
@@ -2609,6 +2797,28 @@ function InspectorPanel({
     { cssVar: "", value: "none", label: "\u65E0", usage: "\u4E0D\u4F7F\u7528\u9634\u5F71" },
     ...shadowTokens
   ];
+  const inspectorTypographyVars = {
+    "--di-text-title-size": inspectorTypography.title.fontSize,
+    "--di-text-title-weight": inspectorTypography.title.fontWeight,
+    "--di-text-title-line-height": inspectorTypography.title.lineHeight,
+    "--di-text-title-color": inspectorTypography.title.color,
+    "--di-text-label-size": inspectorTypography.sectionLabel.fontSize,
+    "--di-text-label-weight": inspectorTypography.sectionLabel.fontWeight,
+    "--di-text-label-line-height": inspectorTypography.sectionLabel.lineHeight,
+    "--di-text-label-color": inspectorTypography.sectionLabel.color,
+    "--di-text-body-size": inspectorTypography.body.fontSize,
+    "--di-text-body-weight": inspectorTypography.body.fontWeight,
+    "--di-text-body-line-height": inspectorTypography.body.lineHeight,
+    "--di-text-body-color": inspectorTypography.body.color,
+    "--di-text-meta-size": inspectorTypography.meta.fontSize,
+    "--di-text-meta-weight": inspectorTypography.meta.fontWeight,
+    "--di-text-meta-line-height": inspectorTypography.meta.lineHeight,
+    "--di-text-meta-color": inspectorTypography.meta.color,
+    "--di-text-tiny-badge-size": inspectorTypography.tinyBadge.fontSize,
+    "--di-text-tiny-badge-weight": inspectorTypography.tinyBadge.fontWeight,
+    "--di-text-tiny-badge-line-height": inspectorTypography.tinyBadge.lineHeight,
+    "--di-text-tiny-badge-color": inspectorTypography.tinyBadge.color
+  };
   const [isEditing, setIsEditing] = (0, import_react2.useState)(false);
   const panelElRef = (0, import_react2.useRef)(null);
   const [selected, setSelected] = (0, import_react2.useState)(targetEl);
@@ -2708,6 +2918,9 @@ function InspectorPanel({
   const [cardVariantVal, setCardVariantVal] = (0, import_react2.useState)("default");
   const [cardVariantClassVal, setCardVariantClassVal] = (0, import_react2.useState)("");
   const [pendingCardVariant, setPendingCardVariant] = (0, import_react2.useState)("");
+  const [componentInfoOpen, setComponentInfoOpen] = (0, import_react2.useState)(false);
+  const [annotationOpen, setAnnotationOpen] = (0, import_react2.useState)(false);
+  const [annotationText, setAnnotationText] = (0, import_react2.useState)("");
   const [componentMakerSourceMode, setComponentMakerSourceMode] = (0, import_react2.useState)("new");
   const [componentMakerAction, setComponentMakerAction] = (0, import_react2.useState)("create-current");
   const [componentSpecDraft, setComponentSpecDraft] = (0, import_react2.useState)(EMPTY_COMPONENT_SPEC_DRAFT);
@@ -2742,6 +2955,8 @@ function InspectorPanel({
   const [selectedLibraryComponentVariantId, setSelectedLibraryComponentVariantId] = (0, import_react2.useState)("");
   const [libraryTokenForm, setLibraryTokenForm] = (0, import_react2.useState)(null);
   const [libraryComponentForm, setLibraryComponentForm] = (0, import_react2.useState)(null);
+  const [libraryComponentImportOpen, setLibraryComponentImportOpen] = (0, import_react2.useState)(false);
+  const [libraryComponentImportMsg, setLibraryComponentImportMsg] = (0, import_react2.useState)("");
   const [libraryCustomTokens, setLibraryCustomTokens] = (0, import_react2.useState)([]);
   const [libraryTokenOverrides, setLibraryTokenOverrides] = (0, import_react2.useState)({});
   const [libraryDeletedTokenIds, setLibraryDeletedTokenIds] = (0, import_react2.useState)({});
@@ -2758,6 +2973,9 @@ function InspectorPanel({
   (0, import_react2.useEffect)(() => {
     localDraftsRef.current = localDrafts;
   }, [localDrafts]);
+  (0, import_react2.useEffect)(() => {
+    setComponentInfoOpen(false);
+  }, [selected]);
   const formatStyleIntentSummary = (0, import_react2.useCallback)((r) => ({
     pendingCount: r.pendingCount ?? 0,
     latestPending: r.latestPending ? {
@@ -2806,6 +3024,50 @@ function InspectorPanel({
       return next;
     });
   }
+  function getAnnotationTargetInfo(el) {
+    const componentMeta2 = getInspectorComponentMeta(el);
+    const selector = getSelectorForScope(el, "current");
+    return {
+      key: `current:${selector}`,
+      selector,
+      targetLabel: getTargetDisplayLabel(el, componentMeta2),
+      scopeLabel: "\u5F53\u524D\u5143\u7D20"
+    };
+  }
+  function getAnnotationChange(changes = []) {
+    return changes.find((change) => change.prop === "annotation:intent");
+  }
+  function updateAnnotationDraft(nextText) {
+    const el = selectedRef.current;
+    if (!el) return;
+    const text = nextText.trim();
+    const info = getAnnotationTargetInfo(el);
+    setLocalDrafts((prev) => {
+      const existing = prev[info.key];
+      const remainingChanges = existing?.changes.filter((change2) => change2.prop !== "annotation:intent") ?? [];
+      if (!text) {
+        if (!existing) return prev;
+        const next = { ...prev };
+        if (remainingChanges.length === 0) {
+          delete next[info.key];
+        } else {
+          next[info.key] = { ...existing, changes: remainingChanges, updatedAt: Date.now() };
+        }
+        return next;
+      }
+      const change = {
+        prop: "annotation:intent",
+        from: "AI\u8BC6\u522B",
+        val: text
+      };
+      const nextEntry = {
+        ...info,
+        changes: [...remainingChanges, change],
+        updatedAt: Date.now()
+      };
+      return { ...prev, [info.key]: nextEntry };
+    });
+  }
   const selectEl = (0, import_react2.useCallback)((el) => {
     selectedRef.current = el;
     const rect = el.getBoundingClientRect();
@@ -2814,6 +3076,8 @@ function InspectorPanel({
     const elCs = getComputedStyle(el);
     const selectedComponentMeta = getInspectorComponentMeta(el);
     const selectedCapability = getComponentCapability(selectedComponentMeta);
+    const annotationDraft = localDraftsRef.current[getAnnotationTargetInfo(el).key];
+    setAnnotationText(getAnnotationChange(annotationDraft?.changes)?.val ?? "");
     const isButtonComponent = selectedCapability?.type === "Button";
     const isIconComponent = selectedCapability?.type === "Icon";
     const isBadgeComponent = selectedCapability?.type === "Badge";
@@ -3276,6 +3540,15 @@ function InspectorPanel({
     setPendingBadgeStatus(status);
     setBadgeStatusOnTargets(targets, status);
   }
+  function updateBadgeStatusOnElement(element, status) {
+    const currentStatus = inferBadgeStatus(getClasses(element));
+    const currentClass = getBadgeStatusClass(element);
+    if (status === currentStatus) {
+      setBadgeStatusOnTargets([element], currentStatus, currentClass);
+      return;
+    }
+    setBadgeStatusOnTargets([element], status);
+  }
   function updateCardVariant(variant) {
     const targets = getComponentTargets();
     if (variant === cardVariantVal) {
@@ -4129,6 +4402,7 @@ function InspectorPanel({
   }
   function copyPluginPrompt(prompt, successMsg) {
     if (!prompt) return;
+    debugAiPrompt(prompt, "plugin");
     copyTextToClipboard(prompt).then((copied) => {
       setPluginMsg(copied ? successMsg : "\u590D\u5236\u5931\u8D25");
       setTimeout(() => setPluginMsg(""), copied ? 2200 : 1800);
@@ -4466,6 +4740,7 @@ function InspectorPanel({
     return `${item.label} / ${item.type} / ${item.categoryLabel} / ${item.summary || "\u672A\u767B\u8BB0\u80FD\u529B"} / ${item.selector || "\u672A\u767B\u8BB0 selector"} / ${item.status}`;
   }
   function openLibraryComponentCreate() {
+    setLibraryComponentImportOpen(false);
     setLibraryComponentForm({
       mode: "create",
       category: libraryComponentCategory === "all" ? "custom" : libraryComponentCategory,
@@ -4477,6 +4752,7 @@ function InspectorPanel({
     });
   }
   function openLibraryComponentEdit(item) {
+    setLibraryComponentImportOpen(false);
     setSelectedLibraryComponentId(item.id);
     setLibraryComponentForm({
       mode: "update",
@@ -4489,6 +4765,103 @@ function InspectorPanel({
       status: item.status.includes("\u8349\u7A3F") ? item.status : "\u7F16\u8F91\u8349\u7A3F"
     });
   }
+  function normalizeComponentImportDraft(raw) {
+    const type = String(raw.type || "").trim() || "Custom";
+    const category = raw.category || getLibraryComponentCategory(type);
+    const variantText = Array.isArray(raw.variants) && raw.variants.length ? `\u53D8\u4F53\uFF1A${raw.variants.join(" / ")}` : "";
+    const sizeText = Array.isArray(raw.sizes) && raw.sizes.length ? `\u5C3A\u5BF8\uFF1A${raw.sizes.join(" / ")}` : "";
+    const tokenText = Array.isArray(raw.tokenRefs) && raw.tokenRefs.length ? `Token\uFF1A${raw.tokenRefs.join(" / ")}` : "";
+    return {
+      mode: "create",
+      category,
+      type,
+      label: String(raw.label || LIBRARY_COMPONENT_LABELS[type] || type).trim(),
+      summary: String(raw.summary || [variantText, sizeText, tokenText].filter(Boolean).join("\uFF1B") || "\u5BFC\u5165\u7EC4\u4EF6\u8349\u7A3F").trim(),
+      selector: String(raw.selector || `.${type.toLowerCase()}`).trim(),
+      status: String(raw.status || "\u5BFC\u5165\u8349\u7A3F").trim()
+    };
+  }
+  function submitImportedLibraryComponents(drafts) {
+    const normalized = drafts.map(normalizeComponentImportDraft);
+    const nextItems = normalized.map((form, index) => ({
+      id: `draft-component-import:${Date.now()}:${index}:${form.type}`,
+      category: form.category,
+      categoryLabel: getLibraryComponentCategoryLabel(form.category),
+      type: form.type,
+      label: form.label,
+      summary: form.summary,
+      selector: form.selector,
+      status: form.status,
+      source: "draft"
+    }));
+    if (!nextItems.length) {
+      setLibraryComponentImportMsg("\u6CA1\u6709\u8BC6\u522B\u5230\u7EC4\u4EF6");
+      setTimeout(() => setLibraryComponentImportMsg(""), 1800);
+      return;
+    }
+    setLibraryCustomComponents((prev) => [...nextItems, ...prev]);
+    setSelectedLibraryComponentId(nextItems[0].id);
+    nextItems.forEach((item) => {
+      recordLibraryCrudChange({
+        resource: "component",
+        action: "create",
+        name: item.type,
+        from: "\u672A\u767B\u8BB0",
+        val: formatLibraryComponentSummary(item)
+      });
+    });
+    setLibraryComponentImportMsg(`\u5DF2\u5BFC\u5165 ${nextItems.length} \u4E2A\u7EC4\u4EF6\u8349\u7A3F`);
+    setTimeout(() => setLibraryComponentImportMsg(""), 2200);
+  }
+  async function handleComponentImportFile(file) {
+    if (!file) return;
+    try {
+      const content = await file.text();
+      const parsed = JSON.parse(content);
+      const drafts = Array.isArray(parsed) ? parsed : parsed.components ?? [];
+      submitImportedLibraryComponents(drafts);
+    } catch {
+      setLibraryComponentImportMsg("JSON \u89E3\u6790\u5931\u8D25");
+      setTimeout(() => setLibraryComponentImportMsg(""), 1800);
+    }
+  }
+  function copyComponentLibraryImportPrompt() {
+    const prompt = [
+      "\u8BF7\u4E3A\u5F53\u524D\u9879\u76EE\u751F\u6210 DevInspector \u7EC4\u4EF6\u5E93\u63A5\u5165\u8349\u7A3F\u3002",
+      "",
+      "\u76EE\u6807\uFF1A",
+      "1. \u626B\u63CF\u73B0\u6709\u7EC4\u4EF6\u6E90\u7801\uFF0C\u8BC6\u522B\u7EC4\u4EF6 type\u3001\u4E2D\u6587 label\u3001selector\u3001\u53D8\u4F53\u3001\u5C3A\u5BF8\u548C tokenRefs\u3002",
+      "2. \u4F18\u5148\u4F7F\u7528 data-component / registry / \u7A33\u5B9A class\uFF1B\u4E0D\u786E\u5B9A\u9879\u6807\u4E3A\u201C\u5F85\u786E\u8BA4\u201D\u3002",
+      "3. \u8F93\u51FA componentPreviews registry \u6216\u4E0B\u9762\u8FD9\u79CD JSON \u8349\u7A3F\u3002",
+      "",
+      "JSON \u683C\u5F0F\uFF1A",
+      "{",
+      '  "components": [',
+      "    {",
+      '      "type": "Button",',
+      '      "label": "\u6309\u94AE",',
+      '      "category": "action",',
+      '      "summary": "\u4E3B\u6309\u94AE\u3001\u6B21\u6309\u94AE\u3001\u5F31\u6309\u94AE",',
+      '      "selector": ".button, [data-component=\\"Button\\"]",',
+      '      "variants": ["primary", "secondary", "ghost"],',
+      '      "sizes": ["s", "m", "l"],',
+      '      "tokenRefs": ["--color-brand-primary"],',
+      '      "status": "\u5F85\u786E\u8BA4"',
+      "    }",
+      "  ]",
+      "}",
+      "",
+      "\u7EA6\u675F\uFF1A\u8BF7\u4FEE\u6539\u6E90\u7801\u5C42\u63A5\u5165\uFF0C\u4E0D\u8981\u76F4\u63A5\u6539 dist \u4EA7\u7269\u3002"
+    ].join("\n");
+    debugAiPrompt(prompt, "plugin");
+    copyTextToClipboard(prompt).then((copied) => {
+      setLibraryComponentImportMsg(copied ? "\u63A5\u5165\u63D0\u793A\u5DF2\u590D\u5236" : "\u590D\u5236\u5931\u8D25");
+      setTimeout(() => setLibraryComponentImportMsg(""), copied ? 2200 : 1800);
+    }).catch(() => {
+      setLibraryComponentImportMsg("\u590D\u5236\u5931\u8D25");
+      setTimeout(() => setLibraryComponentImportMsg(""), 1800);
+    });
+  }
   function submitLibraryComponentForm() {
     if (!libraryComponentForm) return;
     const category = libraryComponentForm.category || getLibraryComponentCategory(libraryComponentForm.type);
@@ -4544,47 +4917,79 @@ function InspectorPanel({
     });
   }
   function buildAiTaskPrompt(params) {
-    const changes = params.changes.map((change, index) => `${index + 1}. ${getChangeLabel(change.prop)}\uFF1A${formatStoredChangeRecordValue(change.prop, change.from)} \u2192 ${formatStoredChangeRecordValue(change.prop, change.val)}`).join("\n");
-    const latestHint = params.entryId ? `\u4F18\u5148\u5904\u7406 id = ${params.entryId} \u8FD9\u6761\u8BB0\u5F55\u3002` : "\u8FD9\u6761\u4EFB\u52A1\u6765\u81EA DevInspector \u5F53\u524D\u9009\u4E2D\u5143\u7D20\u3002";
+    const changes = formatPromptChanges(params.changes);
     return [
-      "DevInspector \u6837\u5F0F\u4EFB\u52A1",
       `\u9875\u9762\uFF1A${params.pageLabel}`,
-      `\u5143\u7D20\uFF1A${params.targetLabel}`,
+      "\u5F85\u5904\u7406\u5BF9\u8C61\uFF1A1",
+      `1. \u5143\u7D20\uFF1A${params.targetLabel}`,
       `\u8303\u56F4\uFF1A${params.scopeLabel}`,
       `\u9009\u62E9\u5668\uFF1A${params.selector}`,
+      `\u7C7B\u578B\uFF1A${getPromptChangeTypes(params.changes).join(" / ") || "none"}`,
       "\u6539\u52A8\uFF1A",
-      changes || "\u65E0\u6837\u5F0F\u6539\u52A8",
+      changes || "1. \u65E0\u6539\u52A8",
       ...params.note ? ["\u8865\u5145\uFF1A", params.note] : [],
-      "\u5B9A\u4F4D\u63D0\u793A\uFF1A",
-      latestHint,
-      "\u8BF7\u4F18\u5148\u5B9A\u4F4D\u8BE5\u9009\u62E9\u5668\u5BF9\u5E94\u7684\u7EC4\u4EF6\u6216\u6837\u5F0F\u6E90\u7801\uFF0C\u5224\u65AD\u662F\u5426\u5E94\u56FA\u5316\u4E3A\u6B63\u5F0F\u7EC4\u4EF6\u6837\u5F0F\uFF1B\u4E0D\u8981\u624B\u6539 dist\u3002"
+      "\u7ED9AI\uFF1A\u6309\u9009\u62E9\u5668\u5148\u5B9A\u4F4D\u6E90\u7801\uFF0C\u518D\u5224\u65AD\u843D\u4E3A\u7EC4\u4EF6\u6837\u5F0F\u3001token\u3001\u5C40\u90E8\u8986\u76D6\u6216\u5B9E\u73B0\u7EA6\u675F\uFF1B\u4E0D\u8981\u624B\u6539 dist\u3002"
     ].join("\n");
   }
   function buildAiDraftBasketPrompt(drafts) {
     const hasComponentSpec = drafts.some((draft) => draft.changes.some((change) => change.prop === "component-spec" || change.prop.startsWith("component-new-variant:") || change.prop.startsWith("component-variant-group:")));
     const hasLibraryChange = drafts.some((draft) => draft.changes.some((change) => change.prop.startsWith("library-")));
+    const mode = hasLibraryChange ? "library-crud" : hasComponentSpec ? "component-spec" : "style-update";
     const sections = drafts.sort((a, b) => a.updatedAt - b.updatedAt).map((draft, index) => {
-      const changes = draft.changes.map((change, changeIndex) => `${changeIndex + 1}. ${getChangeLabel(change.prop)}\uFF1A${formatStoredChangeRecordValue(change.prop, change.from)} \u2192 ${formatStoredChangeRecordValue(change.prop, change.val)}`).join("\n");
+      const changes = formatPromptChanges(draft.changes);
       return [
         `${index + 1}. \u5143\u7D20\uFF1A${draft.targetLabel}`,
         `\u8303\u56F4\uFF1A${draft.scopeLabel}`,
         `\u9009\u62E9\u5668\uFF1A${draft.selector}`,
+        `\u7C7B\u578B\uFF1A${getPromptChangeTypes(draft.changes).join(" / ") || "none"}`,
         "\u6539\u52A8\uFF1A",
-        changes || "\u65E0\u6837\u5F0F\u6539\u52A8"
+        changes || "1. \u65E0\u6539\u52A8"
       ].join("\n");
     }).join("\n\n");
-    const title = hasLibraryChange ? "DevInspector \u8BBE\u8BA1\u5E93 / \u7EC4\u4EF6 / \u6837\u5F0F\u4EFB\u52A1" : hasComponentSpec ? "DevInspector \u7EC4\u4EF6 / \u6837\u5F0F\u4EFB\u52A1" : "DevInspector \u6837\u5F0F\u4EFB\u52A1";
-    const locationHint = hasLibraryChange ? "\u8FD9\u4E9B\u5185\u5BB9\u6765\u81EA DevInspector \u8BBE\u8BA1\u5E93\u5DE5\u4F5C\u53F0\uFF1BToken / Component \u7684\u589E\u5220\u6539\u90FD\u662F\u7528\u6237\u786E\u8BA4\u7684\u53D7\u63A7\u8349\u7A3F\uFF0C\u8BF7\u5148\u5B9A\u4F4D\u8BBE\u8BA1 token \u914D\u7F6E\u3001\u7EC4\u4EF6\u80FD\u529B\u8868\u6216\u6E90\u7801\u4E2D\u7684\u6B63\u5F0F\u5B9A\u4E49\uFF0C\u518D\u5224\u65AD\u5982\u4F55\u843D\u5730\uFF1B\u5220\u9664\u64CD\u4F5C\u9700\u5148\u5904\u7406\u4F7F\u7528\u5173\u7CFB\uFF0C\u4E0D\u8981\u624B\u6539 dist\u3002" : hasComponentSpec ? "\u8FD9\u4E9B\u5185\u5BB9\u6765\u81EA DevInspector \u672C\u6B21\u4FEE\u6539\u5185\u5BB9\uFF1B\u7EC4\u4EF6\u89C4\u683C\u548C\u65B0\u53D8\u4F53\u662F\u7528\u6237\u786E\u8BA4\u7684\u8349\u7A3F\uFF0C\u8BF7\u6309\u7EC4\u4EF6\u540D\u3001\u53EF\u7F16\u8F91\u5185\u5BB9\u3001\u53D8\u4F53\u7EF4\u5EA6\u3001\u72B6\u6001\u3001\u5C3A\u5BF8\u548C\u6837\u5F0F\u89C4\u5219\u5B9A\u4F4D\u6E90\u7801\u843D\u5730\uFF1B\u4E0D\u8981\u624B\u6539 dist\u3002" : "\u8FD9\u4E9B\u5185\u5BB9\u6765\u81EA DevInspector \u672C\u6B21\u4FEE\u6539\u5185\u5BB9\uFF0C\u8BF7\u6309\u5BF9\u8C61\u9010\u4E00\u5B9A\u4F4D\u6E90\u7801\uFF0C\u5224\u65AD\u662F\u5426\u5E94\u56FA\u5316\u4E3A\u7EC4\u4EF6\u6837\u5F0F\u3001token \u6216\u5C40\u90E8\u8986\u76D6\uFF1B\u4E0D\u8981\u624B\u6539 dist\u3002";
+    const aiHint = hasLibraryChange ? "\u7ED9AI\uFF1A\u5148\u5B9A\u4F4D\u6B63\u5F0F token \u914D\u7F6E\u3001\u7EC4\u4EF6\u80FD\u529B\u8868\u6216\u6E90\u7801\u5B9A\u4E49\uFF0C\u518D\u5904\u7406\u589E\u5220\u6539\uFF1B\u5220\u9664\u524D\u5148\u68C0\u67E5\u4F7F\u7528\u5173\u7CFB\uFF1B\u4E0D\u8981\u624B\u6539 dist\u3002" : hasComponentSpec ? "\u7ED9AI\uFF1A\u7EC4\u4EF6\u89C4\u683C\u548C\u65B0\u53D8\u4F53\u6309\u5DF2\u786E\u8BA4\u8349\u7A3F\u5904\u7406\uFF1B\u5148\u5B9A\u4F4D\u7EC4\u4EF6\u5B9A\u4E49\u3001\u53EF\u7F16\u8F91\u5185\u5BB9\u3001\u53D8\u4F53\u7EF4\u5EA6\u548C token \u6620\u5C04\uFF1B\u4E0D\u8981\u624B\u6539 dist\u3002" : "\u7ED9AI\uFF1A\u6309\u5BF9\u8C61\u9010\u4E00\u5B9A\u4F4D\u6E90\u7801\uFF0C\u518D\u5224\u65AD\u843D\u4E3A\u7EC4\u4EF6\u6837\u5F0F\u3001token\u3001\u5C40\u90E8\u8986\u76D6\u6216\u5B9E\u73B0\u7EA6\u675F\uFF1B\u4E0D\u8981\u624B\u6539 dist\u3002";
     return [
-      title,
       `\u9875\u9762\uFF1A${document.title || "\u5F53\u524D\u9875\u9762"}\uFF08${window.location.href}\uFF09`,
       `\u5F85\u5904\u7406\u5BF9\u8C61\uFF1A${drafts.length}`,
       sections,
       ...note ? ["\u8865\u5145\uFF1A", note] : [],
-      "\u5B9A\u4F4D\u63D0\u793A\uFF1A",
-      locationHint
+      aiHint
     ].join("\n");
   }
+  function getPromptChangeType(prop) {
+    if (prop.startsWith("annotation:")) return "annotation";
+    if (prop === "component-spec") return "component-spec";
+    if (prop.startsWith("component-new-variant:")) return "component-new-variant";
+    if (prop.startsWith("component-variant-group:")) return "component-variant-group";
+    if (prop.startsWith("library-token:create")) return "library-token-create";
+    if (prop.startsWith("library-token:update")) return "library-token-update";
+    if (prop.startsWith("library-token:delete")) return "library-token-delete";
+    if (prop.startsWith("library-component:create")) return "library-component-create";
+    if (prop.startsWith("library-component:update")) return "library-component-update";
+    if (prop.startsWith("library-component:delete")) return "library-component-delete";
+    return "style";
+  }
+  function getPromptChangeTypes(changes) {
+    return Array.from(new Set(changes.map((change) => getPromptChangeType(change.prop))));
+  }
+  function formatPromptChanges(changes) {
+    return changes.map((change, index) => {
+      const type = getPromptChangeType(change.prop);
+      if (type === "annotation") {
+        return [
+          `${index + 1}. \u6807\u6CE8\uFF1A${change.val || "\u7A7A"}`
+        ].join("\n");
+      }
+      return [
+        `${index + 1}. ${getChangeLabel(change.prop)}\uFF1A${formatStoredChangeRecordValue(change.prop, change.from) || "\u7A7A"} \u2192 ${formatStoredChangeRecordValue(change.prop, change.val) || "\u7A7A"}`
+      ].join("\n");
+    }).join("\n");
+  }
+  function debugAiPrompt(prompt, source) {
+    window.__DEV_INSPECTOR_LAST_PROMPT__ = prompt;
+    console.groupCollapsed(`[DevInspector] AI prompt (${source})`);
+    console.log(prompt);
+    console.groupEnd();
+  }
   function handleSubmitToAi() {
     const draftEntries = Object.values(localDraftsRef.current);
     if (draftEntries.length > 0) {
@@ -4612,8 +5017,9 @@ function InspectorPanel({
       changes,
       note
     });
+    debugAiPrompt(prompt, "single");
     copyTextToClipboard(prompt).then((copied) => {
-      setSubmitMsg(copied ? "\u4EFB\u52A1\u6587\u672C\u5DF2\u590D\u5236 \u2713" : "\u590D\u5236\u5931\u8D25");
+      setSubmitMsg(copied ? "\u5DF2\u590D\u5236" : "\u590D\u5236\u5931\u8D25");
       setTimeout(() => setSubmitMsg(""), copied ? 2200 : 1800);
     }).catch(() => {
       setSubmitMsg("\u590D\u5236\u5931\u8D25");
@@ -4622,8 +5028,9 @@ function InspectorPanel({
   }
   function copyDraftEntriesToAi(draftEntries) {
     const prompt = buildAiDraftBasketPrompt(draftEntries);
+    debugAiPrompt(prompt, "draft-basket");
     copyTextToClipboard(prompt).then((copied) => {
-      setSubmitMsg(copied ? "\u4EFB\u52A1\u6587\u672C\u5DF2\u590D\u5236 \u2713" : "\u590D\u5236\u5931\u8D25");
+      setSubmitMsg(copied ? "\u5DF2\u590D\u5236" : "\u590D\u5236\u5931\u8D25");
       setTimeout(() => setSubmitMsg(""), copied ? 2200 : 1800);
     }).catch(() => {
       setSubmitMsg("\u590D\u5236\u5931\u8D25");
@@ -4805,6 +5212,9 @@ function InspectorPanel({
     });
   });
   function getChangeLabel(prop) {
+    if (prop.startsWith("annotation:")) {
+      return "\u6807\u6CE8 \xB7 AI\u8BC6\u522B";
+    }
     if (prop.startsWith("library-token:") || prop.startsWith("library-component:")) {
       const [resource = "", action = "", name = "\u672A\u547D\u540D"] = prop.split(":");
       const resourceLabel = resource === "library-token" ? "Token" : "\u7EC4\u4EF6\u89C4\u683C";
@@ -4934,6 +5344,7 @@ function InspectorPanel({
   function resetDraftChangeOnPage(draft, change) {
     const isCurrentDraft = selectedRef.current ? getDraftTargetInfo(selectedRef.current).key === draft.key : false;
     if (isCurrentDraft) clearPendingForProp(change.prop);
+    if (change.prop.startsWith("annotation:")) return;
     if (change.prop.startsWith("library-")) return;
     if (change.prop === "component-spec" || change.prop.startsWith("component-new-variant:")) return;
     const targets = getDraftSelectorTargets(draft.selector);
@@ -5250,6 +5661,29 @@ function InspectorPanel({
   const activeBadgeStatus = pendingBadgeStatus || badgeStatusVal;
   const activeCardVariant = pendingCardVariant || cardVariantVal;
   const componentSizeOptions = getComponentSizeControlOptions(componentCapability);
+  const componentPrimaryText = pendingComponentText ?? componentTextDraft ?? componentTextVal ?? componentEditableSlots.map((slot) => componentTextSlotDrafts[slot.key] || componentTextSlotVals[slot.key] || "").find(Boolean) ?? textContent ?? "";
+  const componentElementInfos = componentMeta ? (() => {
+    const items = [];
+    const seen = /* @__PURE__ */ new Set();
+    const pushItem = (label, element) => {
+      if (!element || seen.has(element)) return;
+      seen.add(element);
+      items.push({
+        key: `${label}:${getSelectorForScope(element, "current")}`,
+        label,
+        selector: getSelectorForScope(element, "current"),
+        text: (element.textContent ?? "").trim() || "\u7A7A",
+        style: getComponentElementStyleSummary(element),
+        spacing: getComponentElementSpacingSummary(element),
+        styleStatus: getComponentElementStyleStatus(element, tokenMap, colorPalette, tokenLabels, typographyTokens),
+        spacingStatus: getComponentElementSpacingStatus(element, spaceSteps)
+      });
+    };
+    pushItem("\u7EC4\u4EF6\u5916\u5C42", selected);
+    componentEditableSlots.forEach((slot) => pushItem(slot.label, getComponentSlotElement(selected, slot)));
+    componentChildSlots.forEach((slot) => pushItem(slot.label, getComponentSlotElement(selected, slot)));
+    return items;
+  })() : [];
   const showElementStyleSections = !componentMeta;
   const localDraftEntries = Object.values(localDrafts).sort((a, b) => b.updatedAt - a.updatedAt);
   const localDraftChangeCount = localDraftEntries.reduce((sum, entry) => sum + entry.changes.length, 0);
@@ -5636,7 +6070,7 @@ function InspectorPanel({
         ref: panelElRef,
         className: `di-panel${componentCreateOpen || libraryOpen ? " di-panel--drawer-open" : ""}${libraryWorkbenchOpen ? " di-panel--workbench-open" : ""}`,
         "data-di-panel-role": "primary",
-        style: { top: panelPos.top, left: panelPos.left },
+        style: { top: panelPos.top, left: panelPos.left, ...inspectorTypographyVars },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-head", onMouseDown: onDragStart, children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-head-left", children: [
@@ -6057,7 +6491,24 @@ function InspectorPanel({
                       " \u4E2A\u89C4\u683C"
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: "di-btn-save", onClick: openLibraryComponentCreate, children: "+ \u7EC4\u4EF6\u89C4\u683C" })
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-library-toolbar-actions", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      "button",
+                      {
+                        type: "button",
+                        className: "di-library-workbench-soft-btn",
+                        onClick: () => {
+                          setLibraryComponentImportOpen(true);
+                          setLibraryComponentForm(null);
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Upload, { size: 13, strokeWidth: 2.2, "aria-hidden": "true" }),
+                          "\u5BFC\u5165\u7EC4\u4EF6\u5E93"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: "di-btn-save", onClick: openLibraryComponentCreate, children: "+ \u7EC4\u4EF6\u89C4\u683C" })
+                  ] })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-library-component-preview-grid", role: "list", "aria-label": "\u7EC4\u4EF6\u771F\u5B9E\u9884\u89C8", children: [
                   filteredLibraryComponentItems.map((item) => {
@@ -6129,7 +6580,7 @@ function InspectorPanel({
                       className: "di-btn-save",
                       disabled: localDraftChangeCount === 0,
                       onClick: handleSubmitToAi,
-                      children: submitMsg || "\u53D1\u9001\u7ED9AI"
+                      children: renderSubmitLabel(submitMsg)
                     }
                   )
                 ] }),
@@ -6322,7 +6773,67 @@ function InspectorPanel({
                     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", onClick: () => focusLibraryTokenUsage(selectedLibraryToken), children: "\u5B9A\u4F4D\u4F7F\u7528" }),
                     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", onClick: () => openLibraryTokenEdit(selectedLibraryToken), children: "\u7F16\u8F91" })
                   ] })
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-library-workbench-empty", children: "\u9009\u62E9\u4E00\u4E2A token \u67E5\u770B\u8BE6\u60C5" }) : libraryTab === "components" ? libraryComponentForm ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-library-edit-panel", children: [
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-library-workbench-empty", children: "\u9009\u62E9\u4E00\u4E2A token \u67E5\u770B\u8BE6\u60C5" }) : libraryTab === "components" ? libraryComponentImportOpen ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-library-import-panel", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-library-edit-head", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: "\u5BFC\u5165\u7EC4\u4EF6\u5E93" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: "di-head-icon-btn", onClick: () => setLibraryComponentImportOpen(false), "aria-label": "\u5173\u95ED\u5BFC\u5165\u7EC4\u4EF6\u5E93", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.X, { size: 15, strokeWidth: 2.2, "aria-hidden": "true" }) })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-library-import-steps", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u9009\u4E00\u79CD\u65B9\u5F0F" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u751F\u6210\u63A5\u5165\u8349\u7A3F" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u53D1\u9001\u7ED9 AI \u843D\u5730" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-library-import-option di-library-import-option--primary", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.WandSparkles, { size: 15, strokeWidth: 2.2, "aria-hidden": "true" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: "\u8BA9 AI \u5E2E\u4F60\u6574\u7406" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u9002\u5408\u7B2C\u4E00\u6B21\u63A5\u5165\u3002\u4F1A\u590D\u5236\u4E00\u6BB5\u63D0\u793A\uFF0C\u8BA9 AI \u626B\u63CF\u9879\u76EE\u5E76\u751F\u6210\u7EC4\u4EF6\u6E05\u5355\u3002" })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", onClick: copyComponentLibraryImportPrompt, children: "\u590D\u5236\u63D0\u793A" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "di-library-import-option", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Upload, { size: 15, strokeWidth: 2.2, "aria-hidden": "true" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: "\u5DF2\u6709\u7EC4\u4EF6\u6E05\u5355" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u4E0A\u4F20 JSON \u540E\u5148\u53D8\u6210\u8349\u7A3F\uFF0C\u4E0D\u4F1A\u76F4\u63A5\u6539\u6E90\u7801\u3002" })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "input",
+                      {
+                        type: "file",
+                        accept: "application/json,.json",
+                        onChange: (event) => {
+                          void handleComponentImportFile(event.currentTarget.files?.[0] ?? null);
+                          event.currentTarget.value = "";
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-library-import-option", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Component, { size: 15, strokeWidth: 2.2, "aria-hidden": "true" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: "\u5148\u52A0\u4E00\u4E2A\u8BD5\u8BD5" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u53EA\u767B\u8BB0\u4E00\u4E2A\u7EC4\u4EF6\uFF0C\u6BD4\u5982 Button \u6216 Card\u3002" })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", onClick: openLibraryComponentCreate, children: "\u6DFB\u52A0\u7EC4\u4EF6" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("details", { className: "di-library-import-format", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("summary", { children: "\u67E5\u770B JSON \u683C\u5F0F" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { children: `{
+  "components": [
+    {
+      "type": "Button",
+      "label": "\u6309\u94AE",
+      "category": "action",
+      "selector": ".button",
+      "variants": ["primary", "secondary"],
+      "tokenRefs": ["--color-brand-primary"]
+    }
+  ]
+}` })
+                  ] }),
+                  libraryComponentImportMsg ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-library-import-msg", children: libraryComponentImportMsg }) : null
+                ] }) : libraryComponentForm ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-library-edit-panel", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-library-edit-head", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: libraryComponentForm.mode === "create" ? "\u65B0\u589E\u7EC4\u4EF6\u89C4\u683C" : "\u7F16\u8F91\u7EC4\u4EF6\u89C4\u683C" }),
                     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: "di-head-icon-btn", onClick: () => setLibraryComponentForm(null), "aria-label": "\u5173\u95ED\u7EC4\u4EF6\u89C4\u683C\u8868\u5355", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.X, { size: 15, strokeWidth: 2.2, "aria-hidden": "true" }) })
@@ -6448,7 +6959,7 @@ function InspectorPanel({
                       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dd", { children: "\u53EA\u751F\u6210 AI \u4EFB\u52A1\uFF0C\u4E0D\u76F4\u63A5\u5199\u6E90\u7801" })
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-library-detail-actions", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", onClick: handleSubmitToAi, disabled: localDraftChangeCount === 0, children: submitMsg || "\u53D1\u9001\u7ED9AI" }) })
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-library-detail-actions", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", onClick: handleSubmitToAi, disabled: localDraftChangeCount === 0, children: renderSubmitLabel(submitMsg) }) })
                 ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-library-detail-card", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-library-detail-kicker", children: "Usage" }),
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { children: "\u4F7F\u7528\u6CBB\u7406" }),
@@ -6480,7 +6991,7 @@ function InspectorPanel({
                       className: "di-btn-save",
                       disabled: localDraftChangeCount === 0,
                       onClick: handleSubmitToAi,
-                      children: submitMsg || "\u53D1\u9001\u7ED9AI"
+                      children: renderSubmitLabel(submitMsg)
                     }
                   )
                 ] })
@@ -7051,18 +7562,74 @@ function InspectorPanel({
             componentMeta && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-section", children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-section-title", children: "\u7EC4\u4EF6" }),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-component-card", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-component-head", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-component-main", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "di-component-name", children: componentDisplayName }) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-component-meta-row", children: [
-                  showComponentVariantMeta && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
-                    componentCapability?.variantKind === "card" ? "\u5C55\u793A" : "\u53D8\u4F53",
-                    "\uFF1A",
-                    componentCapability?.variantKind === "card" ? getCardDisplayLabel(componentMeta.variant) : componentMeta.variant
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-component-head", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-component-main", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-component-title-row", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "di-component-name", children: componentDisplayName }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      MatchBadge,
+                      {
+                        label: componentCapability ? "\u5DF2\u5339\u914D" : "\u5F85\u8865\u5145",
+                        tone: componentCapability ? "matched" : "pending",
+                        tooltip: componentCapability ? "\u5DF2\u5339\u914D\u5230\u53EF\u590D\u7528\u89C4\u5219\uFF0C\u53EF\u6309\u7EC4\u4EF6\u65B9\u5F0F\u67E5\u770B\u548C\u5904\u7406\u3002" : "\u5F53\u524D\u8FD8\u6CA1\u6709\u53EF\u590D\u7528\u89C4\u5219\uFF0C\u5148\u6309\u5F53\u524D\u6837\u5F0F\u5904\u7406\uFF0C\u540E\u7EED\u53EF\u8865\u5145\u5230\u8BBE\u8BA1\u5E93\u3002"
+                      }
+                    )
+                  ] }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      className: `di-component-meta-toggle${componentInfoOpen ? " di-component-meta-toggle--on" : ""}`,
+                      onClick: () => setComponentInfoOpen((open) => !open),
+                      "aria-expanded": componentInfoOpen,
+                      "aria-label": componentInfoOpen ? "\u6536\u8D77\u5143\u7D20\u4FE1\u606F" : "\u67E5\u770B\u5143\u7D20\u4FE1\u606F",
+                      title: componentInfoOpen ? "\u6536\u8D77\u5143\u7D20\u4FE1\u606F" : "\u67E5\u770B\u5143\u7D20\u4FE1\u606F",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u5143\u7D20\u4FE1\u606F" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.ChevronDown, { size: 14, strokeWidth: 2.2, "aria-hidden": "true" })
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-component-meta-block", children: componentInfoOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-component-info-panel", children: componentElementInfos.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-component-info-elements", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-component-info-element-list", children: componentElementInfos.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { className: "di-component-info-element-card", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-component-info-element-head", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "di-component-info-element-label", children: item.label }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "di-component-info-element-selector", title: item.selector, children: item.selector })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
-                    "\u72B6\u6001\uFF1A",
-                    getComponentStateLabel(componentMeta.state)
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("dl", { className: "di-component-info-element-meta", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-component-info-row", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dt", { children: "\u5185\u5BB9" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dd", { title: item.text, children: item.text })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-component-info-row", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dt", { children: "\u6837\u5F0F" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dd", { title: item.style, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "di-component-info-inline", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: item.style }),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          MatchBadge,
+                          {
+                            label: item.styleStatus === "token" ? "Token" : "\u771F\u5B9E\u503C",
+                            tone: item.styleStatus,
+                            tooltip: item.styleStatus === "token" ? "\u5F53\u524D\u503C\u5DF2\u6620\u5C04\u5230\u8BBE\u8BA1 token\u3002" : "\u5F53\u524D\u5C55\u793A\u7684\u662F\u9875\u9762\u5B9E\u9645\u6837\u5F0F\u503C\uFF0C\u5C1A\u672A\u6620\u5C04\u5230\u8BBE\u8BA1 token \u6216\u7EC4\u4EF6\u89C4\u5219\u3002"
+                          }
+                        )
+                      ] }) })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-component-info-row", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dt", { children: "\u95F4\u8DDD" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dd", { title: item.spacing, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "di-component-info-inline", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: item.spacing }),
+                        item.spacingStatus && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          MatchBadge,
+                          {
+                            label: item.spacingStatus === "token" ? "Token" : "\u771F\u5B9E\u503C",
+                            tone: item.spacingStatus,
+                            tooltip: item.spacingStatus === "token" ? "\u5F53\u524D\u503C\u5DF2\u6620\u5C04\u5230\u8BBE\u8BA1 token\u3002" : "\u5F53\u524D\u5C55\u793A\u7684\u662F\u9875\u9762\u5B9E\u9645\u6837\u5F0F\u503C\uFF0C\u5C1A\u672A\u6620\u5C04\u5230\u8BBE\u8BA1 token \u6216\u7EC4\u4EF6\u89C4\u5219\u3002"
+                          }
+                        )
+                      ] }) })
+                    ] })
                   ] })
-                ] }),
+                ] }, item.key)) }) }) }) }),
                 componentCapability && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-component-fields", children: [
                   componentEditableSlots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "di-component-field di-component-field--text", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: slot.label }),
@@ -7079,24 +7646,38 @@ function InspectorPanel({
                     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: visibleChildSlots.length === 1 ? visibleChildSlots[0].slot.label : "\u53EF\u9009\u9879" }),
                     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-component-child-list", children: visibleChildSlots.map(({ slot, value, element }) => {
                       const childMeta = element ? getInspectorComponentMeta(element) : null;
+                      const childCapability = getComponentCapability(childMeta);
                       const childName = childMeta ? getComponentDisplayName(childMeta) : slot.label;
                       const childValue = value || childMeta?.variant || childName;
                       const showChildLabel = visibleChildSlots.length > 1;
+                      const childBadgeStatus = element && childCapability?.statusKind === "badge" ? inferBadgeStatus(getClasses(element)) : null;
                       return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `di-component-child-item${showChildLabel ? " di-component-child-item--with-label" : ""}`, children: [
                         showChildLabel && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "di-component-child-label", children: slot.label }),
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "di-component-child-value", children: childValue }),
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        element && childCapability?.statusKind === "badge" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-component-child-variant-grid", role: "group", "aria-label": `${childName} \u72B6\u6001`, children: BADGE_STATUS_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                           "button",
                           {
                             type: "button",
-                            className: "di-component-child-select",
-                            onClick: () => {
-                              if (element) selectEl(element);
-                            },
-                            title: `\u9009\u62E9 ${childName}`,
-                            children: "\u9009\u62E9"
-                          }
-                        )
+                            className: `di-component-child-variant-tile${childBadgeStatus === option.key ? " di-component-child-variant-tile--on" : ""}`,
+                            onClick: () => updateBadgeStatusOnElement(element, option.key),
+                            title: `${childName} \xB7 ${option.label}`,
+                            children: option.label
+                          },
+                          option.key
+                        )) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "di-component-child-value", children: childValue }),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            "button",
+                            {
+                              type: "button",
+                              className: "di-component-child-select",
+                              onClick: () => {
+                                if (element) selectEl(element);
+                              },
+                              title: `\u9009\u62E9 ${childName}`,
+                              children: "\u9009\u62E9"
+                            }
+                          )
+                        ] })
                       ] }, slot.key);
                     }) })
                   ] }),
@@ -7152,11 +7733,11 @@ function InspectorPanel({
                   ] }),
                   componentCapability.statusKind === "badge" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-component-field", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u72B6\u6001" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-component-segment di-component-segment--tone", role: "group", "aria-label": "\u6807\u7B7E\u72B6\u6001", children: BADGE_STATUS_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-component-variant-grid", role: "group", "aria-label": "\u6807\u7B7E\u72B6\u6001", children: BADGE_STATUS_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       "button",
                       {
                         type: "button",
-                        className: `di-component-segment-btn${activeBadgeStatus === option.key ? " di-component-segment-btn--on" : ""}`,
+                        className: `di-component-variant-tile${activeBadgeStatus === option.key ? " di-component-variant-tile--on" : ""}`,
                         onClick: () => updateBadgeStatus(option.key),
                         children: option.label
                       },
@@ -8305,6 +8886,43 @@ function InspectorPanel({
                 ] })
               ] })
             ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-section di-annotation-section", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `di-section-title-row di-section-title-row--action${annotationOpen ? "" : " di-section-title-row--empty"}`, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-section-title-group", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-section-title", children: "\u6807\u6CE8" }),
+                  localDraftEntries.some((entry) => entry.changes.some((change) => change.prop.startsWith("annotation:"))) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "di-annotation-count", children: "\u5DF2\u8BB0\u5F55" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "di-section-icon-action",
+                    onClick: () => setAnnotationOpen((open) => !open),
+                    title: annotationOpen ? "\u6536\u8D77\u6807\u6CE8" : "\u6DFB\u52A0\u6807\u6CE8",
+                    "aria-label": annotationOpen ? "\u6536\u8D77\u6807\u6CE8" : "\u6DFB\u52A0\u6807\u6CE8",
+                    children: annotationOpen ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Minus, { size: 14, strokeWidth: 2.4, "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Plus, { size: 14, strokeWidth: 2.4, "aria-hidden": "true" })
+                  }
+                )
+              ] }),
+              annotationOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-annotation-card", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "di-annotation-row di-annotation-row--text", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "textarea",
+                {
+                  className: "di-annotation-textarea",
+                  value: annotationText,
+                  placeholder: "\u76F4\u63A5\u5199\u4F60\u7684\u60F3\u6CD5\uFF0C\u4F8B\u5982\uFF1A\u8FD9\u91CC\u8981\u4FDD\u6301\u9AD8\u4EAE\u4F46\u4E0D\u8981\u7528\u5B9E\u5E95\u4E3B\u6309\u94AE\u6837\u5F0F\u3002AI \u4F1A\u5224\u65AD\u8FD9\u662F\u8BBE\u8BA1\u8BF4\u660E\u3001\u4EA7\u54C1\u89C4\u5219\u8FD8\u662F\u5F00\u53D1\u5907\u6CE8\u3002",
+                  rows: 2,
+                  onChange: (event) => {
+                    const nextText = event.currentTarget.value;
+                    setAnnotationText(nextText);
+                    updateAnnotationDraft(nextText);
+                    resizeTextareaToContent(event.currentTarget);
+                  },
+                  ref: (node) => {
+                    if (node) resizeTextareaToContent(node);
+                  }
+                }
+              ) }) })
+            ] }),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-section", children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-section-title", children: [
                 "\u672C\u6B21\u4FEE\u6539\u5185\u5BB9 ",
@@ -8454,7 +9072,7 @@ ${pending.map(([p, v]) => `  ${p}: ${v};`).join("\n")}
                   disabled: !hasPending,
                   style: !hasPending ? { opacity: 0.4, cursor: "not-allowed" } : {},
                   title: "\u590D\u5236\u4E00\u6BB5\u53EF\u76F4\u63A5\u53D1\u7ED9 AI \u7684\u4EFB\u52A1\u6587\u672C",
-                  children: submitMsg || "\u53D1\u9001\u7ED9AI"
+                  children: renderSubmitLabel(submitMsg)
                 }
               )
             ] });
@@ -8490,115 +9108,6 @@ ${pending.map(([p, v]) => `  ${p}: ${v};`).join("\n")}
     )
   ] });
 }
-var CODE_FILES = [
-  { name: "src/", desc: "React \u7EC4\u4EF6\u3001\u9875\u9762\u3001\u6837\u5F0F\u6E90\u7801\uFF08\u4E0D\u542B\u8C03\u8BD5\u5DE5\u5177\uFF09" },
-  { name: "index.html", desc: "\u5E94\u7528\u5165\u53E3 HTML" },
-  { name: "package.json", desc: "\u4F9D\u8D56\u5305\u4E0E\u811A\u672C\u914D\u7F6E" },
-  { name: "tsconfig.json", desc: "TypeScript \u7F16\u8BD1\u914D\u7F6E" },
-  { name: "vite.config.ts", desc: "\u6784\u5EFA\u5DE5\u5177\u914D\u7F6E" }
-];
-var PRODUCT_FILES = [
-  { name: "docs/PRODUCT_PLAN.md", desc: "\u4EA7\u54C1\u89C4\u5212\u4E0E\u8DEF\u7EBF\u56FE" },
-  { name: "docs/PROJECT.md", desc: "\u9879\u76EE\u80CC\u666F\u4E0E\u76EE\u6807\u6982\u8FF0" },
-  { name: "docs/DECISIONS.md", desc: "\u5173\u952E\u4EA7\u54C1\u51B3\u7B56\u8BB0\u5F55" },
-  { name: "docs/CHANGELOG.md", desc: "\u529F\u80FD\u8FED\u4EE3\u53D8\u66F4\u65E5\u5FD7" },
-  { name: "docs/CODE_STRUCTURE.md", desc: "\u524D\u7AEF\u76EE\u5F55\u7ED3\u6784\u8BF4\u660E" },
-  { name: "docs/DESIGN_STANDARDS.md", desc: "\u8BBE\u8BA1\u89C4\u8303\u603B\u89C8" }
-];
-var DESIGN_FILES = [
-  { name: "docs/design/OVERVIEW.md", desc: "\u8BBE\u8BA1\u7CFB\u7EDF\u603B\u89C8" },
-  { name: "docs/design/tokens.md", desc: "Design Token \u4F7F\u7528\u8BF4\u660E" },
-  { name: "docs/design/layout.md", desc: "\u9875\u9762\u5E03\u5C40\u89C4\u8303" },
-  { name: "docs/design/component-index.md", desc: "\u7EC4\u4EF6\u6E05\u5355\u7D22\u5F15" },
-  { name: "docs/design/business-components.md", desc: "\u4E1A\u52A1\u7EC4\u4EF6\u8BF4\u660E" }
-];
-function FileList({ files }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: "di-dl-file-list", children: files.map((f) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "di-dl-file-name", children: f.name }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "di-dl-file-desc", children: f.desc })
-  ] }, f.name)) });
-}
-function DownloadButton() {
-  const { endpoints } = useDevInspectorConfig();
-  const [open, setOpen] = (0, import_react2.useState)(false);
-  const [status, setStatus] = (0, import_react2.useState)("idle");
-  const [filePath, setFilePath] = (0, import_react2.useState)("");
-  const [details, setDetails] = (0, import_react2.useState)({ code: false, product: false, design: false });
-  const [opts, setOpts] = (0, import_react2.useState)({ code: true, product: false, design: false });
-  function toggle(k) {
-    setOpts((prev) => ({ ...prev, [k]: !prev[k] }));
-  }
-  function toggleDetail(k) {
-    setDetails((prev) => ({ ...prev, [k]: !prev[k] }));
-  }
-  function handleOpen() {
-    setOpen((v) => !v);
-    if (open) setStatus("idle");
-  }
-  async function download() {
-    if (!opts.code && !opts.product && !opts.design) return;
-    setStatus("packing");
-    try {
-      const params = new URLSearchParams({
-        code: opts.code ? "1" : "0",
-        product: opts.product ? "1" : "0",
-        design: opts.design ? "1" : "0"
-      });
-      const res = await fetch(`${endpoints.handoff}?${params}`);
-      const json = await res.json();
-      if (!json.ok) throw new Error(json.error);
-      setFilePath(json.path);
-      setStatus("done");
-    } catch {
-      setStatus("error");
-    }
-  }
-  async function revealInFinder() {
-    await fetch(`${endpoints.reveal}?path=${encodeURIComponent(filePath)}`);
-  }
-  const sections = [
-    { key: "code", label: "\u524D\u7AEF\u4EE3\u7801", files: CODE_FILES },
-    { key: "product", label: "\u4EA7\u54C1\u6587\u6863", files: PRODUCT_FILES },
-    { key: "design", label: "\u8BBE\u8BA1\u6587\u6863", files: DESIGN_FILES }
-  ];
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "di-dl-btn", onClick: handleOpen, children: "\u4E0B\u8F7D" }),
-    open && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-dl-modal", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-dl-title", children: "\u9009\u62E9\u4E0B\u8F7D\u5185\u5BB9" }),
-      status === "packing" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-dl-status", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "di-dl-spinner" }),
-        "\u6B63\u5728\u6253\u5305\uFF0C\u8BF7\u7A0D\u5019\u2026"
-      ] }),
-      status === "done" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-dl-done", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-dl-done-check", children: "\u2713 \u5DF2\u4FDD\u5B58\u81F3\u684C\u9762" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-dl-done-path", children: filePath.replace(/.*\//, "") }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "di-dl-reveal-btn", onClick: revealInFinder, children: "\u5728 Finder \u4E2D\u663E\u793A" })
-      ] }),
-      status === "error" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "di-dl-status di-dl-status--error", children: "\u6253\u5305\u5931\u8D25\uFF0C\u8BF7\u67E5\u770B\u63A7\u5236\u53F0" }),
-      (status === "idle" || status === "error") && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-        sections.map(({ key, label, files }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "di-dl-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "di-dl-check-label", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "checkbox", checked: opts[key], onChange: () => toggle(key) }),
-              label
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "di-dl-detail-btn", onClick: () => toggleDetail(key), children: details[key] ? "\u6536\u8D77" : "\u8BE6\u60C5" })
-          ] }),
-          details[key] && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FileList, { files })
-        ] }, key)),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "button",
-          {
-            className: "di-dl-confirm",
-            onClick: download,
-            disabled: !opts.code && !opts.product && !opts.design,
-            children: "\u4E0B\u8F7D"
-          }
-        )
-      ] })
-    ] })
-  ] });
-}
 function DevInspector() {
   const [active, setActive] = (0, import_react2.useState)(false);
   const [tokenMap, setTokenMap] = (0, import_react2.useState)({});
@@ -8628,26 +9137,29 @@ function DevInspector() {
   (0, import_react2.useEffect)(() => {
     const onOver = (e) => {
       if (!active || modalOpenRef.current) return;
-      const el = e.target;
-      if (!el?.classList) return;
-      if (isInsidePanel(el)) {
-        el.classList.remove("di-hover");
+      const raw = e.target;
+      if (!raw?.classList) return;
+      if (isInsidePanel(raw)) {
+        raw.classList.remove("di-hover");
         return;
       }
-      el.classList.add("di-hover");
+      document.querySelectorAll(".di-hover").forEach((item) => item.classList.remove("di-hover"));
+      resolveSelectionTarget(raw).classList.add("di-hover");
     };
-    const onOut = (e) => {
-      e.target?.classList?.remove("di-hover");
+    const onOut = () => {
+      document.querySelectorAll(".di-hover").forEach((item) => item.classList.remove("di-hover"));
     };
     const onClick = (e) => {
       if (!active || modalOpenRef.current) return;
-      const el = e.target;
-      if (isInsidePanel(el)) return;
+      const raw = e.target;
+      if (!raw?.classList) return;
+      if (isInsidePanel(raw)) return;
       e.preventDefault();
       e.stopPropagation();
-      el.classList.remove("di-hover");
+      const target = resolveSelectionTarget(raw);
+      document.querySelectorAll(".di-hover").forEach((item) => item.classList.remove("di-hover"));
       setPanels(
-        (prev) => prev.length === 0 ? [{ id: "main", el }] : prev.map((p, i) => i === 0 ? { ...p, el } : p)
+        (prev) => prev.length === 0 ? [{ id: "main", el: target }] : prev.map((p, i) => i === 0 ? { ...p, el: target } : p)
       );
     };
     document.addEventListener("mouseover", onOver, true);
@@ -8688,7 +9200,6 @@ function DevInspector() {
   const primaryEl = panels[0]?.el;
   const triggerTooltip = active ? `\u9000\u51FA\u7F16\u8F91\uFF08${EXIT_SHORTCUT_LABEL}\uFF09` : `\u8FDB\u5165\u7F16\u8F91\uFF08${EDIT_SHORTCUT_LABEL}\uFF09`;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DownloadButton, {}),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "button",
       {