@lijinmei-810/dev-inspector 0.1.0

package/dist/index.js

@@ -0,0 +1,2551 @@
+// src/DevInspector.tsx
+import { useState, useEffect, useRef, useCallback } from "react";
+import { CircleHelp } from "lucide-react";
+
+// src/DevInspectorProvider.tsx
+import { createContext, useContext } from "react";
+
+// src/config.ts
+var FALLBACK_TOKENS = {
+  colorPalette: [],
+  tokenLabels: {},
+  radiusPresets: [
+    { label: "\u65E0", sub: "", value: "0px", token: "" },
+    { label: "S", sub: "4px", value: "4px", token: "" },
+    { label: "M", sub: "8px", value: "8px", token: "" },
+    { label: "L", sub: "12px", value: "12px", token: "" },
+    { label: "XL", sub: "16px", value: "16px", token: "" },
+    { label: "XXL", sub: "24px", value: "24px", token: "" }
+  ],
+  spaceSteps: [
+    { label: "\u65E0", size: "", val: "0px" },
+    { label: "S", size: "4px", val: "4px" },
+    { label: "M", size: "8px", val: "8px" },
+    { label: "L", size: "12px", val: "12px" },
+    { label: "XL", size: "16px", val: "16px" },
+    { label: "XXL", size: "24px", val: "24px" }
+  ],
+  borderWidthSteps: ["0px", "1px", "2px", "4px"],
+  fontSizeOptions: [],
+  fontWeightOptions: [
+    { label: "\u5E38", value: "400" },
+    { label: "\u4E2D", value: "500" },
+    { label: "\u7C97", value: "600" },
+    { label: "\u9ED1", value: "700" }
+  ],
+  shadowTokens: [],
+  typographyTokens: []
+};
+var defaultDevInspectorConfig = {
+  rootId: "dev-inspector-root",
+  endpoints: {
+    applyCss: "/__dev/apply-css",
+    submitStyleIntent: "/__dev/submit-style-intent",
+    styleIntents: "/__dev/style-intents",
+    deleteStyleIntent: "/__dev/style-intents/delete",
+    handoff: "/__dev/handoff",
+    reveal: "/__dev/reveal"
+  },
+  tokens: FALLBACK_TOKENS
+};
+function mergeDevInspectorConfig(overrides) {
+  return {
+    ...defaultDevInspectorConfig,
+    ...overrides,
+    endpoints: {
+      ...defaultDevInspectorConfig.endpoints,
+      ...overrides?.endpoints
+    },
+    tokens: {
+      ...defaultDevInspectorConfig.tokens,
+      ...overrides?.tokens
+    }
+  };
+}
+
+// src/DevInspectorProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var DevInspectorConfigContext = createContext(defaultDevInspectorConfig);
+function DevInspectorProvider({
+  children,
+  config
+}) {
+  return /* @__PURE__ */ jsx(DevInspectorConfigContext.Provider, { value: mergeDevInspectorConfig(config), children });
+}
+function useDevInspectorConfig() {
+  return useContext(DevInspectorConfigContext);
+}
+
+// src/DevInspector.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function calcDropPos(rect, dropHeight = 280) {
+  const spaceBelow = window.innerHeight - rect.bottom;
+  const top = spaceBelow >= dropHeight + 8 ? rect.bottom + 4 : rect.top - dropHeight - 4;
+  return { top: Math.max(8, top), left: rect.left };
+}
+var COLOR_PROPS = [
+  { label: "\u80CC\u666F\u8272", prop: "background-color" }
+];
+function getColorLabel(val, colorPalette) {
+  for (const g of colorPalette) {
+    const found = g.colors.find((c) => c.val === val);
+    if (found) return `${g.group}\xB7${found.label}`;
+  }
+  return null;
+}
+function getTypographyToken(fontSize, fontWeight, color, typographyTokens) {
+  const normalizedColor = normalizeColor(color);
+  return typographyTokens.find(
+    (token) => token.fontSize === fontSize.trim() && token.fontWeight === fontWeight.trim() && normalizeColor(token.color) === normalizedColor
+  ) ?? null;
+}
+var BORDER_STYLE_OPTIONS = [
+  { label: "\u2500", value: "solid", title: "\u5B9E\u7EBF" },
+  { label: "\u2504", value: "dashed", title: "\u865A\u7EBF" },
+  { label: "\u22EF", value: "dotted", title: "\u70B9\u7EBF" },
+  { label: "\u2715", value: "none", title: "\u65E0" }
+];
+var SIZE_OPTIONS = [
+  { label: "Fill", mode: "fill", value: "100%" },
+  { label: "Hug", mode: "hug", value: "fit-content" },
+  { label: "Fixed", mode: "fixed" }
+];
+function rgbToHex(rgb) {
+  const m = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+  if (!m) return rgb;
+  return "#" + [m[1], m[2], m[3]].map((n) => parseInt(n).toString(16).padStart(2, "0")).join("");
+}
+function normalizeColor(val) {
+  const m = val.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+  if (m) return "#" + [m[1], m[2], m[3]].map((n) => parseInt(n).toString(16).padStart(2, "0")).join("");
+  return val.trim();
+}
+function formatColorDisplay(val) {
+  const m = val.match(/^rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)$/);
+  if (m) {
+    const hex = "#" + [m[1], m[2], m[3]].map((n) => parseInt(n).toString(16).padStart(2, "0")).join("");
+    const alpha = Math.round(parseFloat(m[4]) * 100);
+    return alpha < 100 ? `${hex} / ${alpha}%` : hex;
+  }
+  return val;
+}
+var shadowValueCache = /* @__PURE__ */ new Map();
+var _copiedStyles = [];
+function canonicalizeShadowValue(val) {
+  const raw = (val || "none").trim() || "none";
+  if (shadowValueCache.has(raw)) return shadowValueCache.get(raw);
+  if (typeof document === "undefined" || !document.body) return raw;
+  const probe = document.createElement("div");
+  probe.style.boxShadow = raw;
+  probe.style.position = "fixed";
+  probe.style.opacity = "0";
+  probe.style.pointerEvents = "none";
+  document.body.appendChild(probe);
+  const normalized = getComputedStyle(probe).boxShadow.trim() || raw;
+  probe.remove();
+  shadowValueCache.set(raw, normalized);
+  return normalized;
+}
+function formatShadowDisplay(val) {
+  if (!val || val === "none") return "none";
+  return val.replace(/\s+/g, " ");
+}
+function getShadowDisplay(val, authoredVal, shadowTokens) {
+  const authoredVar = authoredVal.match(/var\((--[^),\s]+)/)?.[1];
+  const normalized = canonicalizeShadowValue(val);
+  const matched = shadowTokens.find((token) => token.cssVar === authoredVar) ?? shadowTokens.find((token) => canonicalizeShadowValue(token.value) === normalized);
+  if (matched) {
+    return {
+      label: matched.label,
+      sub: matched.cssVar,
+      isHardcoded: false
+    };
+  }
+  return {
+    label: val === "none" ? "\u65E0" : "\u81EA\u5B9A\u4E49",
+    sub: formatShadowDisplay(val),
+    isHardcoded: val !== "none"
+  };
+}
+function getClasses(el) {
+  return Array.from(el.classList).filter((c) => !c.startsWith("di-"));
+}
+var STATE_CLASS_NAMES = /* @__PURE__ */ new Set([
+  "active",
+  "selected",
+  "current",
+  "open",
+  "expanded",
+  "collapsed",
+  "disabled",
+  "enabled",
+  "checked",
+  "focus",
+  "focused",
+  "hover",
+  "pressed",
+  "loading",
+  "error",
+  "success",
+  "warning"
+]);
+function isStateClass(className) {
+  return STATE_CLASS_NAMES.has(className) || className.startsWith("is-") || className.startsWith("has-") || className.startsWith("state-") || className.endsWith("--active") || className.endsWith("--selected") || className.endsWith("--current") || className.endsWith("--open") || className.endsWith("--disabled");
+}
+function getComponentClasses(el) {
+  const componentClasses = getClasses(el).filter(
+    (c) => !isStateClass(c) && !/^lucide(-|$)/.test(c)
+  );
+  return componentClasses.length ? componentClasses : getClasses(el);
+}
+function getStateClasses(el) {
+  return getClasses(el).filter((c) => !/^lucide(-|$)/.test(c));
+}
+var UNSAFE_GLOBAL_TAGS = /* @__PURE__ */ new Set([
+  "a",
+  "aside",
+  "button",
+  "div",
+  "em",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "img",
+  "input",
+  "label",
+  "li",
+  "main",
+  "ol",
+  "p",
+  "path",
+  "section",
+  "span",
+  "strong",
+  "svg",
+  "textarea",
+  "ul"
+]);
+function classSelector(classes) {
+  const escapeClass = (value) => {
+    try {
+      return CSS.escape(value);
+    } catch {
+      return value.replace(/[^a-zA-Z0-9_-]/g, "\\$&");
+    }
+  };
+  return classes.length ? "." + classes.map(escapeClass).join(".") : "";
+}
+function queryByClasses(el, classes) {
+  if (!classes.length) return [el];
+  const includePanels = !!el.closest(".di-panel");
+  try {
+    return Array.from(document.querySelectorAll(classSelector(classes))).filter((e) => includePanels || !e.closest(".di-panel"));
+  } catch {
+    return [el];
+  }
+}
+function getSameComponentEls(el) {
+  return queryByClasses(el, getComponentClasses(el));
+}
+function getScopeTargets(el, scope) {
+  if (scope === "component") return getSameComponentEls(el);
+  return [el];
+}
+function getClassSelectorForScope(el, scope) {
+  const classes = scope === "component" ? getComponentClasses(el) : getStateClasses(el);
+  return classSelector(classes) || el.tagName.toLowerCase();
+}
+function getStructuralStep(el) {
+  const tag = el.tagName.toLowerCase();
+  const parent = el.parentElement;
+  if (!parent) return tag;
+  const sameTagSiblings = Array.from(parent.children).filter((child) => child.tagName === el.tagName);
+  if (sameTagSiblings.length <= 1) return tag;
+  return `${tag}:nth-of-type(${sameTagSiblings.indexOf(el) + 1})`;
+}
+function getContextualSelectorForScope(el, scope) {
+  let anchor = el.parentElement;
+  while (anchor && !getClasses(anchor).length) anchor = anchor.parentElement;
+  if (!anchor) return "";
+  const anchorSelector = getClassSelectorForScope(anchor, scope);
+  const path = [];
+  let cursor = el;
+  while (cursor && cursor !== anchor) {
+    path.unshift(getStructuralStep(cursor));
+    cursor = cursor.parentElement;
+  }
+  return path.length ? `${anchorSelector} > ${path.join(" > ")}` : anchorSelector;
+}
+function getSelectorForScope(el, scope) {
+  const classes = scope === "component" ? getComponentClasses(el) : getStateClasses(el);
+  if (classes.length) return classSelector(classes);
+  const tag = el.tagName.toLowerCase();
+  if (!UNSAFE_GLOBAL_TAGS.has(tag)) return tag;
+  const contextualSelector = getContextualSelectorForScope(el, scope);
+  return contextualSelector || tag;
+}
+function canPersistSelector(el, scope) {
+  const classes = scope === "component" ? getComponentClasses(el) : getStateClasses(el);
+  if (classes.length) return true;
+  if (el.classList.contains("lucide") || Array.from(el.classList).some((c) => /^lucide-/.test(c))) {
+    return getContextualSelectorForScope(el, scope).length > 0;
+  }
+  const tag = el.tagName.toLowerCase();
+  if (!UNSAFE_GLOBAL_TAGS.has(tag)) return true;
+  return getContextualSelectorForScope(el, scope).length > 0;
+}
+function isInsidePanel(el) {
+  return el.closest(".di-panel") !== null || el.closest(".di-trigger") !== null || el.closest(".di-label") !== null;
+}
+function scanTokenMap() {
+  const map = {};
+  try {
+    for (const sheet of Array.from(document.styleSheets)) {
+      try {
+        for (const rule of Array.from(sheet.cssRules)) {
+          if (rule instanceof CSSStyleRule && rule.selectorText === ":root") {
+            for (let i = 0; i < rule.style.length; i++) {
+              const prop = rule.style[i];
+              if (!prop.startsWith("--")) continue;
+              const raw = rule.style.getPropertyValue(prop).trim();
+              const hex = raw.startsWith("rgb") ? rgbToHex(raw) : raw;
+              map[raw] = prop;
+              if (hex !== raw) map[hex] = prop;
+            }
+          }
+        }
+      } catch {
+      }
+    }
+  } catch {
+  }
+  return map;
+}
+function getComputedColor(el, prop) {
+  return normalizeColor(getComputedStyle(el).getPropertyValue(prop).trim());
+}
+function getComputedRadius(el) {
+  return getComputedStyle(el).getPropertyValue("border-radius").trim();
+}
+function parseTranslate(val) {
+  const raw = (val || "none").trim();
+  if (!raw || raw === "none") return { x: 0, y: 0 };
+  const parts = raw.split(/\s+/);
+  const toNum = (v) => v ? Number.parseFloat(v) || 0 : 0;
+  return { x: toNum(parts[0]), y: toNum(parts[1]) };
+}
+function formatTranslate(pos) {
+  return `${Math.round(pos.x)}px ${Math.round(pos.y)}px`;
+}
+function normalizeCssSize(v) {
+  const raw = v.trim();
+  if (!raw) return "auto";
+  if (/^-?\d+(\.\d+)?$/.test(raw)) return `${raw}px`;
+  const appendedPxNumber = raw.match(/px(-?\d+(?:\.\d+)?)$/i);
+  if (appendedPxNumber) return `${appendedPxNumber[1]}px`;
+  return raw;
+}
+function getAuthoredStyleValue(el, prop) {
+  const inline = el.style.getPropertyValue(prop).trim();
+  if (inline) return inline;
+  let found = "";
+  try {
+    for (const sheet of Array.from(document.styleSheets)) {
+      try {
+        for (const rule of Array.from(sheet.cssRules)) {
+          if (!(rule instanceof CSSStyleRule)) continue;
+          if (!rule.style.getPropertyValue(prop)) continue;
+          if (el.matches(rule.selectorText)) found = rule.style.getPropertyValue(prop).trim();
+        }
+      } catch {
+      }
+    }
+  } catch {
+  }
+  return found;
+}
+function inferSizeMode(el, axis, computedSize) {
+  const cs = getComputedStyle(el);
+  const authored = getAuthoredStyleValue(el, axis).toLowerCase();
+  const display = cs.display.trim();
+  const flexGrow = Number.parseFloat(cs.flexGrow) || 0;
+  if (authored) {
+    if (authored === "auto") return axis === "height" ? "hug" : "fill";
+    if (authored.includes("fit-content") || authored.includes("max-content") || authored.includes("min-content")) return "hug";
+    if (authored.includes("%") || authored.includes("vw") || authored.includes("vh") || flexGrow > 0) return "fill";
+    return "fixed";
+  }
+  if (axis === "width") {
+    if (flexGrow > 0) return "fill";
+    if (display === "block" && el.parentElement) {
+      const parentWidth = el.parentElement.getBoundingClientRect().width;
+      const selfWidth = el.getBoundingClientRect().width;
+      if (parentWidth > 0 && selfWidth / parentWidth > 0.88) return "fill";
+    }
+    if (display.startsWith("inline")) return "hug";
+  }
+  if (axis === "height" && !getAuthoredStyleValue(el, "min-height") && computedSize !== "0px") {
+    return "hug";
+  }
+  return "fixed";
+}
+function sizeValueForMode(mode, current) {
+  if (mode === "fill") return "100%";
+  if (mode === "hug") return "fit-content";
+  return current || "0px";
+}
+function displaySizeValue(cssValue, current) {
+  if (!cssValue || cssValue === "100%" || cssValue === "fit-content") return current || "0px";
+  return cssValue;
+}
+function getOneLineHugHeight(el) {
+  if (!(el instanceof HTMLElement)) return 0;
+  const hasText = (el.textContent ?? "").trim().length > 0;
+  const isTextControl = el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLButtonElement;
+  if (!hasText && !isTextControl) return 0;
+  const cs = getComputedStyle(el);
+  const fontSize = Number.parseFloat(cs.fontSize) || 0;
+  const lineHeight = cs.lineHeight === "normal" ? fontSize * 1.2 : Number.parseFloat(cs.lineHeight) || fontSize * 1.2;
+  const paddingY = (Number.parseFloat(cs.paddingTop) || 0) + (Number.parseFloat(cs.paddingBottom) || 0);
+  const borderY = (Number.parseFloat(cs.borderTopWidth) || 0) + (Number.parseFloat(cs.borderBottomWidth) || 0);
+  return Math.ceil(lineHeight + paddingY + borderY);
+}
+function clampHeightToOneLine(cssValue, el) {
+  const px = cssValue.match(/^(-?\d+(?:\.\d+)?)px$/i);
+  if (!px) return cssValue;
+  const minH = getOneLineHugHeight(el);
+  if (!minH) return cssValue;
+  return `${Math.max(Number.parseFloat(px[1]), minH)}px`;
+}
+function calcPanelPos(rect) {
+  const W = 380;
+  const maxH = window.innerHeight * 0.9;
+  let left = rect.right + 16;
+  let top = rect.top;
+  if (left + W > window.innerWidth - 8) left = Math.max(8, rect.left - W - 16);
+  top = Math.min(top, window.innerHeight - maxH - 8);
+  top = Math.max(8, top);
+  return { top, left };
+}
+function matchPreset(presets, val) {
+  const px = val.replace(/\s/g, "");
+  return presets.find((p) => p.value === px || p.value === val) ?? null;
+}
+function resizeTextareaToContent(el) {
+  el.style.height = "auto";
+  el.style.height = `${el.scrollHeight}px`;
+}
+function SideInput({
+  value,
+  onChange,
+  spaceSteps,
+  wide,
+  compact
+}) {
+  const [focused, setFocused] = useState(false);
+  const [draft, setDraft] = useState("");
+  const [popupPos, setPopupPos] = useState({ top: 0, left: 0 });
+  const triggerRef = useRef(null);
+  const step = spaceSteps.find((s) => s.val === value);
+  const displayLabel = step && step.label !== "\u65E0" ? step.label : value === "0px" ? "0" : value;
+  const displaySub = step && step.label !== "\u65E0" ? value : null;
+  return /* @__PURE__ */ jsxs("div", { className: `di-side-combo${wide ? " di-side-combo--wide" : ""}${compact ? " di-side-combo--compact" : ""}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "di-side-display", ref: triggerRef, onClick: () => {
+      if (triggerRef.current) {
+        const r = triggerRef.current.getBoundingClientRect();
+        setPopupPos({ top: r.bottom + 4, left: wide ? r.left : r.left + r.width / 2 });
+      }
+      setFocused(true);
+      setDraft(value);
+    }, children: [
+      /* @__PURE__ */ jsx2("span", { className: "di-side-display-label", children: displayLabel }),
+      displaySub && /* @__PURE__ */ jsx2("span", { className: "di-side-display-sub", children: displaySub })
+    ] }),
+    focused && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx2("div", { className: "di-side-overlay", onClick: () => setFocused(false) }),
+      /* @__PURE__ */ jsxs("div", { className: "di-side-popup", style: { top: popupPos.top, left: popupPos.left, transform: wide ? "none" : "translateX(-50%)" }, children: [
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            className: "di-side-input-edit",
+            value: draft,
+            autoFocus: true,
+            onChange: (e) => setDraft(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                const s = spaceSteps.find((s2) => s2.label.toLowerCase() === draft.toLowerCase());
+                onChange(s ? s.val : draft || "0px");
+                setFocused(false);
+              }
+              if (e.key === "Escape") setFocused(false);
+            },
+            placeholder: "\u8F93\u5165\u6570\u503C\u2026"
+          }
+        ),
+        /* @__PURE__ */ jsx2("div", { className: "di-side-steps", children: spaceSteps.map((s) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: `di-side-step-item${value === s.val ? " di-side-step-item--on" : ""}`,
+            onMouseDown: (e) => {
+              e.preventDefault();
+              onChange(s.val);
+              setFocused(false);
+            },
+            children: [
+              /* @__PURE__ */ jsx2("span", { children: s.label }),
+              s.val !== "0px" && /* @__PURE__ */ jsx2("span", { className: "di-side-step-sub", children: s.val })
+            ]
+          },
+          s.val
+        )) })
+      ] })
+    ] })
+  ] });
+}
+function parseFourSides(val) {
+  const p = (val || "0px").trim().split(/\s+/);
+  if (p.length === 1) return { top: p[0], right: p[0], bottom: p[0], left: p[0] };
+  if (p.length === 2) return { top: p[0], right: p[1], bottom: p[0], left: p[1] };
+  if (p.length === 3) return { top: p[0], right: p[1], bottom: p[2], left: p[1] };
+  return { top: p[0], right: p[1], bottom: p[2], left: p[3] };
+}
+function joinFourSides(s) {
+  if (s.top === s.right && s.right === s.bottom && s.bottom === s.left) return s.top;
+  if (s.top === s.bottom && s.left === s.right) return `${s.top} ${s.right}`;
+  return `${s.top} ${s.right} ${s.bottom} ${s.left}`;
+}
+function SpaceCard({ title, variant, value, onChange, spaceSteps }) {
+  if (variant === "gap") {
+    return /* @__PURE__ */ jsxs("div", { className: "di-space-card", children: [
+      /* @__PURE__ */ jsx2("div", { className: "di-space-head", children: /* @__PURE__ */ jsx2("span", { className: "di-space-title", children: title }) }),
+      /* @__PURE__ */ jsxs("div", { className: "di-gap-input-row", children: [
+        /* @__PURE__ */ jsx2("div", { className: "di-gap-block" }),
+        /* @__PURE__ */ jsx2(SideInput, { value, onChange, spaceSteps, wide: true }),
+        /* @__PURE__ */ jsx2("div", { className: "di-gap-block" })
+      ] })
+    ] });
+  }
+  const sides = parseFourSides(value);
+  function updateSide(side, v) {
+    const next = { ...sides, [side]: v };
+    onChange(joinFourSides(next));
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "di-space-card", children: [
+    /* @__PURE__ */ jsx2("div", { className: "di-space-head", children: /* @__PURE__ */ jsx2("span", { className: "di-space-title", children: title }) }),
+    /* @__PURE__ */ jsxs("div", { className: `di-boxing di-boxing--${variant}`, children: [
+      /* @__PURE__ */ jsxs("div", { className: "di-box-top", children: [
+        "   ",
+        /* @__PURE__ */ jsx2(SideInput, { value: sides.top, onChange: (v) => updateSide("top", v), spaceSteps, compact: true })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "di-box-left", children: [
+        "  ",
+        /* @__PURE__ */ jsx2(SideInput, { value: sides.left, onChange: (v) => updateSide("left", v), spaceSteps, compact: true })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: "di-box-center", children: /* @__PURE__ */ jsx2("div", { className: "di-boxing-block" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "di-box-right", children: [
+        " ",
+        /* @__PURE__ */ jsx2(SideInput, { value: sides.right, onChange: (v) => updateSide("right", v), spaceSteps, compact: true })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: "di-box-bottom", children: /* @__PURE__ */ jsx2(SideInput, { value: sides.bottom, onChange: (v) => updateSide("bottom", v), spaceSteps, compact: true }) })
+    ] })
+  ] });
+}
+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;
+}
+var TOKEN_TYPES = [
+  { key: "bg", label: "\u80CC\u666F\u8272", code: "bg" },
+  { key: "text", label: "\u6587\u5B57\u8272", code: "text" },
+  { key: "accent", label: "\u5F3A\u8C03\u8272", code: "accent" },
+  { key: "border", label: "\u8FB9\u6846\u8272", code: "border" }
+];
+var TOKEN_COMPONENTS = [
+  { key: "global", label: "\u5168\u5C40", code: "global" },
+  { key: "sidebar", label: "\u4FA7\u8FB9\u680F", code: "sidebar" },
+  { key: "button", label: "\u6309\u94AE", code: "button" },
+  { key: "card", label: "\u5361\u7247", code: "card" },
+  { key: "tag", label: "\u6807\u7B7E", code: "tag" },
+  { key: "input", label: "\u8F93\u5165\u6846", code: "input" }
+];
+var TOKEN_STATES = [
+  { key: "default", label: "\u9ED8\u8BA4\u6001", code: "default" },
+  { key: "hover", label: "\u60AC\u6D6E\u6001", code: "hover" },
+  { key: "active", label: "\u6FC0\u6D3B\u6001", code: "active" },
+  { key: "disabled", label: "\u7981\u7528\u6001", code: "disabled" },
+  { key: "success", label: "\u6210\u529F\u6001", code: "success" },
+  { key: "warning", label: "\u8B66\u544A\u6001", code: "warning" }
+];
+function ColorDropdown({ value, onChange, onClose, onAddToken, pos, colorPalette }) {
+  const initHex = value.startsWith("#") ? value : "#6b7280";
+  const [hexInput, setHexInput] = useState(initHex);
+  const [alpha, setAlpha] = useState(100);
+  function buildColor(hex, a) {
+    const m = hex.match(/^#([0-9a-f]{6})$/i);
+    if (!m || a >= 100) return hex;
+    const r = parseInt(m[1].slice(0, 2), 16), g = parseInt(m[1].slice(2, 4), 16), b = parseInt(m[1].slice(4, 6), 16);
+    return `rgba(${r},${g},${b},${(a / 100).toFixed(2)})`;
+  }
+  function applyColor(hex, a) {
+    onChange(buildColor(hex, a), "");
+  }
+  const style = pos ? { position: "fixed", top: pos.top, left: pos.left, zIndex: 99998 } : {};
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("div", { style: { position: "fixed", inset: 0, zIndex: 99997 }, onClick: onClose }),
+    /* @__PURE__ */ jsxs("div", { className: "di-palette-dropdown", style, children: [
+      /* @__PURE__ */ jsxs("div", { className: "di-palette-group", children: [
+        /* @__PURE__ */ jsx2("div", { className: "di-palette-group-label", children: "\u65E0" }),
+        /* @__PURE__ */ jsx2("div", { className: "di-palette-swatches", children: /* @__PURE__ */ jsx2(
+          "button",
+          {
+            className: "di-palette-none",
+            title: "\u65E0\u80CC\u666F\u8272 / transparent",
+            onClick: () => {
+              onChange("transparent", "");
+              onClose();
+            }
+          }
+        ) })
+      ] }),
+      colorPalette.map((g) => /* @__PURE__ */ jsxs("div", { className: "di-palette-group", children: [
+        /* @__PURE__ */ jsx2("div", { className: "di-palette-group-label", children: g.group }),
+        /* @__PURE__ */ jsxs("div", { className: "di-palette-swatches", children: [
+          g.colors.map((c) => /* @__PURE__ */ jsx2(
+            "button",
+            {
+              className: `di-palette-swatch${value === c.val ? " di-palette-swatch--on" : ""}`,
+              style: { background: c.val },
+              title: `${g.group}\xB7${c.label}  ${c.val}`,
+              onClick: () => {
+                onChange(c.val, c.token);
+                onClose();
+              }
+            },
+            c.token
+          )),
+          onAddToken && /* @__PURE__ */ jsx2(
+            "button",
+            {
+              className: "di-palette-add-btn",
+              title: `\u6DFB\u52A0\u4E3A${g.group}\u8272 token`,
+              onClick: () => {
+                onAddToken(buildColor(hexInput, alpha));
+                onClose();
+              },
+              children: "+"
+            }
+          )
+        ] })
+      ] }, g.group)),
+      /* @__PURE__ */ jsxs("div", { className: "di-custom-bottom", children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            className: "di-custom-color-trigger",
+            style: { background: buildColor(hexInput, alpha), flexShrink: 0 },
+            onClick: () => {
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "di-field-wrap", children: [
+          /* @__PURE__ */ jsx2("span", { className: "di-field-prefix", children: "#" }),
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              className: "di-field-input",
+              value: hexInput.replace(/^#/, ""),
+              placeholder: "ffffff",
+              onChange: (e) => {
+                const h = "#" + e.target.value;
+                setHexInput(h);
+                applyColor(h, alpha);
+              },
+              onBlur: (e) => {
+                if (!/^[0-9a-f]{6}$/i.test(e.target.value)) setHexInput(initHex);
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "di-field-wrap di-field-wrap--fixed", children: [
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              className: "di-field-input di-field-input--num",
+              type: "number",
+              min: "0",
+              max: "100",
+              value: alpha,
+              onChange: (e) => {
+                const a = Math.min(100, Math.max(0, +e.target.value || 0));
+                setAlpha(a);
+                applyColor(hexInput, a);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx2("span", { className: "di-field-suffix", children: "%" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function inferType(cssProp) {
+  if (!cssProp) return "bg";
+  if (cssProp === "color") return "text";
+  if (cssProp.includes("border")) return "border";
+  if (cssProp.includes("background")) return "bg";
+  return "accent";
+}
+function inferComponent(classes) {
+  const joined = classes.join(" ").toLowerCase();
+  if (/sidebar|nav-item|nav/.test(joined)) return "sidebar";
+  if (/button|btn|start/.test(joined)) return "button";
+  if (/card/.test(joined)) return "card";
+  if (/tag|badge|chip/.test(joined)) return "tag";
+  if (/input|field|form/.test(joined)) return "input";
+  return "global";
+}
+function inferState(classes) {
+  const joined = classes.join(" ").toLowerCase();
+  if (/is-active|active|is-current|current/.test(joined)) return "active";
+  if (/disabled/.test(joined)) return "disabled";
+  if (/hover/.test(joined)) return "hover";
+  if (/success/.test(joined)) return "success";
+  if (/warning/.test(joined)) return "warning";
+  return "default";
+}
+function AddTokenModal({ value, cssProp, elementClasses, onClose, onConfirm, colorPalette }) {
+  const [mode, setMode] = useState("new");
+  const [type, setType] = useState(() => inferType(cssProp));
+  const [component, setComponent] = useState(() => inferComponent(elementClasses ?? []));
+  const [state, setState] = useState(() => inferState(elementClasses ?? []));
+  const [replaceTarget, setReplaceTarget] = useState("");
+  const allTokens = colorPalette.flatMap((g) => g.colors);
+  const typeObj = TOKEN_TYPES.find((t) => t.key === type);
+  const componentObj = TOKEN_COMPONENTS.find((c) => c.key === component);
+  const stateObj = TOKEN_STATES.find((s) => s.key === state);
+  const generatedVar = mode === "new" ? `--color-${typeObj.code}-${componentObj.code}-${stateObj.code}` : replaceTarget;
+  const BtnGroup = ({ items, active, onSelect }) => /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: items.map((i) => /* @__PURE__ */ jsx2(
+    "button",
+    {
+      className: `di-modal-opt-btn${active === i.key ? " --on" : ""}`,
+      onClick: () => onSelect(i.key),
+      children: i.label
+    },
+    i.key
+  )) });
+  return /* @__PURE__ */ jsx2("div", { className: "di-modal-overlay", onClick: onClose, children: /* @__PURE__ */ jsxs("div", { className: "di-modal", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs("div", { className: "di-modal-header", children: [
+      /* @__PURE__ */ jsx2("span", { className: "di-modal-swatch", style: { background: value } }),
+      /* @__PURE__ */ jsx2("span", { className: "di-modal-hex", children: value }),
+      /* @__PURE__ */ jsx2("div", { style: { flex: 1 } }),
+      /* @__PURE__ */ jsx2("span", { style: { fontSize: 12, color: "#6b7280" }, children: "\u6DFB\u52A0\u4E3A token" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "di-modal-body", children: [
+      /* @__PURE__ */ jsx2("div", { className: "di-modal-tabs", children: [{ k: "new", l: "\u65B0\u5EFA token" }, { k: "replace", l: "\u66FF\u6362\u5DF2\u6709 token" }].map((m) => /* @__PURE__ */ jsx2(
+        "button",
+        {
+          className: `di-modal-tab${mode === m.k ? " --on" : ""}`,
+          onClick: () => setMode(m.k),
+          children: m.l
+        },
+        m.k
+      )) }),
+      mode === "new" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "di-modal-field", children: [
+          /* @__PURE__ */ jsxs("div", { className: "di-modal-field-label", children: [
+            "\u989C\u8272\u7C7B\u578B ",
+            /* @__PURE__ */ jsx2("span", { className: "di-modal-auto-tag", children: "\u81EA\u52A8\u8BC6\u522B" })
+          ] }),
+          /* @__PURE__ */ jsx2(BtnGroup, { items: TOKEN_TYPES, active: type, onSelect: setType })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "di-modal-field", children: [
+          /* @__PURE__ */ jsxs("div", { className: "di-modal-field-label", children: [
+            "\u7EC4\u4EF6 ",
+            /* @__PURE__ */ jsx2("span", { className: "di-modal-auto-tag", children: "\u81EA\u52A8\u8BC6\u522B" })
+          ] }),
+          /* @__PURE__ */ jsx2(BtnGroup, { items: TOKEN_COMPONENTS, active: component, onSelect: setComponent })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "di-modal-field", children: [
+          /* @__PURE__ */ jsxs("div", { className: "di-modal-field-label", children: [
+            "\u7528\u9014 / \u72B6\u6001 ",
+            /* @__PURE__ */ jsx2("span", { className: "di-modal-auto-tag", children: "\u81EA\u52A8\u63A8\u65AD\uFF0C\u53EF\u6539" })
+          ] }),
+          /* @__PURE__ */ jsx2(BtnGroup, { items: TOKEN_STATES, active: state, onSelect: setState })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "di-modal-field", children: [
+        /* @__PURE__ */ jsx2("div", { className: "di-modal-field-label", children: "\u9009\u62E9\u8981\u66FF\u6362\u7684 token" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            className: "di-modal-select",
+            value: replaceTarget,
+            onChange: (e) => setReplaceTarget(e.target.value),
+            children: [
+              /* @__PURE__ */ jsx2("option", { value: "", children: "\u8BF7\u9009\u62E9\u2026" }),
+              allTokens.map((c) => /* @__PURE__ */ jsxs("option", { value: c.token, children: [
+                c.token,
+                "\uFF08",
+                c.val,
+                "\uFF09"
+              ] }, c.token))
+            ]
+          }
+        )
+      ] }),
+      generatedVar && /* @__PURE__ */ jsxs("div", { className: "di-modal-result", children: [
+        /* @__PURE__ */ jsx2("div", { className: "di-modal-result-label", children: "\u7CFB\u7EDF\u751F\u6210 token \u540D\u79F0" }),
+        /* @__PURE__ */ jsx2("div", { className: "di-modal-result-var", children: generatedVar }),
+        mode === "new" && /* @__PURE__ */ jsxs("div", { className: "di-modal-result-trail", children: [
+          typeObj.label,
+          " \u2192 ",
+          /* @__PURE__ */ jsx2("code", { children: typeObj.code }),
+          "\u2002",
+          componentObj.label,
+          " \u2192 ",
+          /* @__PURE__ */ jsx2("code", { children: componentObj.code }),
+          "\u2002",
+          stateObj.label,
+          " \u2192 ",
+          /* @__PURE__ */ jsx2("code", { children: stateObj.code })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "di-modal-foot", children: [
+      /* @__PURE__ */ jsx2("button", { className: "di-modal-cancel", onClick: onClose, children: "\u53D6\u6D88" }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          className: "di-modal-ok",
+          disabled: !generatedVar,
+          onClick: () => {
+            if (generatedVar) {
+              onConfirm(generatedVar, value, type);
+              onClose();
+            }
+          },
+          children: "\u786E\u8BA4\u521B\u5EFA"
+        }
+      )
+    ] })
+  ] }) });
+}
+function getDisplayLabel(val, tokenMap, colorPalette, tokenLabels) {
+  const displayVal = formatColorDisplay(val);
+  const paletteLabel = getColorLabel(val, colorPalette);
+  if (paletteLabel) return { label: paletteLabel, sub: displayVal, isHardcoded: false };
+  const token = tokenMap[val];
+  if (token) return { label: tokenLabels[token] ?? token.replace("--", ""), sub: displayVal, isHardcoded: false };
+  return { label: displayVal, sub: "", isHardcoded: true };
+}
+function InspectorPanel({
+  targetEl,
+  tokenMap,
+  onTokenMapUpdate,
+  onClose
+}) {
+  const isSecondary = false;
+  const { endpoints, tokens } = useDevInspectorConfig();
+  const {
+    colorPalette,
+    tokenLabels,
+    radiusPresets,
+    spaceSteps,
+    borderWidthSteps,
+    fontSizeOptions,
+    fontWeightOptions,
+    shadowTokens,
+    typographyTokens
+  } = tokens;
+  const shadowOptions = [
+    { cssVar: "", value: "none", label: "\u65E0", usage: "\u4E0D\u4F7F\u7528\u9634\u5F71" },
+    ...shadowTokens
+  ];
+  const [isEditing, setIsEditing] = useState(false);
+  const panelElRef = useRef(null);
+  const [selected, setSelected] = useState(targetEl);
+  const [panelPos, setPanelPos] = useState(() => calcPanelPos(targetEl.getBoundingClientRect()));
+  const dragRef = useRef(null);
+  const modalOpenRef = useRef(false);
+  const [colors, setColors] = useState({});
+  const [radiusVal, setRadiusVal] = useState("");
+  const [paddingVal, setPaddingVal] = useState("0px");
+  const [marginVal, setMarginVal] = useState("0px");
+  const [gapVal, setGapVal] = useState("0px");
+  const [translateVal, setTranslateVal] = useState({ x: 0, y: 0 });
+  const [widthVal, setWidthVal] = useState("");
+  const [heightVal, setHeightVal] = useState("");
+  const [widthMode, setWidthMode] = useState("fixed");
+  const [heightMode, setHeightMode] = useState("hug");
+  const [customRadius, setCustomRadius] = useState("");
+  const [scope, setScope] = useState("current");
+  const [note, setNote] = useState("");
+  const [textContent, setTextContent] = useState(null);
+  const [pendingColors, setPendingColors] = useState({});
+  const [pendingRadius, setPendingRadius] = useState("");
+  const [shadowVal, setShadowVal] = useState("none");
+  const [shadowAuthoredVal, setShadowAuthoredVal] = useState("");
+  const [pendingShadow, setPendingShadow] = useState("");
+  const [borderColorVal, setBorderColorVal] = useState("");
+  const [borderWidthVal, setBorderWidthVal] = useState("0px");
+  const [borderStyleVal, setBorderStyleVal] = useState("none");
+  const [pendingBorderColor, setPendingBorderColor] = useState("");
+  const [pendingBorderWidth, setPendingBorderWidth] = useState("");
+  const [pendingBorderStyle, setPendingBorderStyle] = useState("");
+  const [expandedBorderColor, setExpandedBorderColor] = useState(false);
+  const [showShadowDrop, setShowShadowDrop] = useState(false);
+  const [showStyleDrop, setShowStyleDrop] = useState(false);
+  const [showWeightDrop, setShowWeightDrop] = useState(false);
+  const [showFontSizeDrop, setShowFontSizeDrop] = useState(false);
+  const [showScopeHelp, setShowScopeHelp] = useState(false);
+  const [dropPos, setDropPos] = useState({ top: 0, left: 0 });
+  const [fontSizeVal, setFontSizeVal] = useState("");
+  const [fontWeightVal, setFontWeightVal] = useState("");
+  const [textColorVal, setTextColorVal] = useState("");
+  const [fontSizeCustomDraft, setFontSizeCustomDraft] = useState("");
+  const [expandedTextColor, setExpandedTextColor] = useState(false);
+  const [pendingFontSize, setPendingFontSize] = useState("");
+  const [pendingFontWeight, setPendingFontWeight] = useState("");
+  const [pendingTextColor, setPendingTextColor] = useState("");
+  const [pendingPadding, setPendingPadding] = useState("");
+  const [pendingMargin, setPendingMargin] = useState("");
+  const [pendingGap, setPendingGap] = useState("");
+  const [pendingTranslate, setPendingTranslate] = useState(null);
+  const [pendingWidth, setPendingWidth] = useState("");
+  const [pendingHeight, setPendingHeight] = useState("");
+  const [pendingWidthMode, setPendingWidthMode] = useState(null);
+  const [pendingHeightMode, setPendingHeightMode] = useState(null);
+  const [sizeDraft, setSizeDraft] = useState({});
+  const [newTokenProp, setNewTokenProp] = useState(null);
+  const [newTokenName, setNewTokenName] = useState("");
+  const [saveMsg, setSaveMsg] = useState("");
+  const [copyMsg, setCopyMsg] = useState("");
+  const [submitMsg, setSubmitMsg] = useState("");
+  const [styleIntentSummary, setStyleIntentSummary] = useState({ pendingCount: 0, latestPending: null, pendingEntries: [] });
+  const [hasCopied, setHasCopied] = useState(() => _copiedStyles.length > 0);
+  const [expandedColor, setExpandedColor] = useState(null);
+  const [pendingNewToken, setPendingNewToken] = useState(null);
+  const [addTokenModal, setAddTokenModal] = useState(null);
+  const [customColorVals, setCustomColorVals] = useState({});
+  const selectedRef = useRef(targetEl);
+  const gapTargetRef = useRef(null);
+  useEffect(() => {
+    modalOpenRef.current = addTokenModal !== null;
+  }, [addTokenModal]);
+  const formatStyleIntentSummary = useCallback((r) => ({
+    pendingCount: r.pendingCount ?? 0,
+    latestPending: r.latestPending ? {
+      id: r.latestPending.id,
+      targetLabel: r.latestPending.targetLabel,
+      selector: r.latestPending.selector,
+      createdAt: r.latestPending.createdAt,
+      note: r.latestPending.note,
+      entries: r.latestPending.entries ?? []
+    } : null,
+    pendingEntries: Array.isArray(r.pendingEntries) ? r.pendingEntries.map((entry) => ({
+      id: entry.id,
+      targetLabel: entry.targetLabel,
+      selector: entry.selector,
+      createdAt: entry.createdAt,
+      note: entry.note,
+      entries: entry.entries ?? []
+    })) : []
+  }), []);
+  const refreshStyleIntentSummary = useCallback(() => {
+    fetch(endpoints.styleIntents).then((r) => r.json()).then((r) => {
+      if (r.ok) {
+        setStyleIntentSummary(formatStyleIntentSummary(r));
+      }
+    }).catch(() => {
+    });
+  }, [endpoints.styleIntents, formatStyleIntentSummary]);
+  useEffect(() => {
+    refreshStyleIntentSummary();
+  }, [refreshStyleIntentSummary]);
+  const selectEl = useCallback((el) => {
+    selectedRef.current = el;
+    const rect = el.getBoundingClientRect();
+    setPanelPos(calcPanelPos(rect));
+    const elCs = getComputedStyle(el);
+    const c = {};
+    for (const { prop } of COLOR_PROPS) {
+      const val = getComputedColor(el, prop);
+      if (!val || val === "rgba(0, 0, 0, 0)" || val === "transparent") continue;
+      if (prop === "border-color" && elCs.borderWidth.trim() === "0px") continue;
+      c[prop] = val;
+    }
+    setColors(c);
+    setPendingColors({});
+    setFontSizeVal(elCs.fontSize.trim());
+    setFontWeightVal(elCs.fontWeight.trim());
+    setTextColorVal(normalizeColor(elCs.color.trim()));
+    setFontSizeCustomDraft(elCs.fontSize.trim());
+    setPendingFontSize("");
+    setPendingFontWeight("");
+    setPendingTextColor("");
+    setExpandedTextColor(false);
+    const bw = elCs.borderTopWidth.trim();
+    const bs = elCs.borderTopStyle.trim();
+    const bc = normalizeColor(elCs.borderTopColor.trim());
+    setBorderWidthVal(bw);
+    setBorderStyleVal(bs);
+    setBorderColorVal(bw !== "0px" ? bc : "");
+    setPendingBorderColor("");
+    setPendingBorderWidth("");
+    setPendingBorderStyle("");
+    setExpandedBorderColor(false);
+    const r = getComputedRadius(el);
+    setRadiusVal(r);
+    setPendingRadius("");
+    const shadowComputed = elCs.boxShadow.trim() || "none";
+    setShadowVal(shadowComputed === "rgba(0, 0, 0, 0) 0px 0px 0px 0px" ? "none" : shadowComputed);
+    setShadowAuthoredVal(getAuthoredStyleValue(el, "box-shadow"));
+    setPendingShadow("");
+    setShowShadowDrop(false);
+    const cs = getComputedStyle(el);
+    const normPad = (v) => {
+      const parts = v.trim().split(" ");
+      return parts.every((p) => p === parts[0]) ? parts[0] : v.trim();
+    };
+    setPaddingVal(normPad(`${cs.paddingTop} ${cs.paddingRight} ${cs.paddingBottom} ${cs.paddingLeft}`));
+    setMarginVal(normPad(`${cs.marginTop} ${cs.marginRight} ${cs.marginBottom} ${cs.marginLeft}`));
+    const isFlexGrid = (d) => d.includes("flex") || d.includes("grid");
+    if (isFlexGrid(cs.display)) {
+      const g = cs.gap.trim();
+      setGapVal(g === "normal" ? "0px" : g);
+      gapTargetRef.current = el;
+    } else if (el.parentElement) {
+      const pcs = getComputedStyle(el.parentElement);
+      if (isFlexGrid(pcs.display)) {
+        const g = pcs.gap.trim();
+        setGapVal(g === "normal" ? "0px" : g);
+        gapTargetRef.current = el.parentElement;
+      } else {
+        setGapVal("0px");
+        gapTargetRef.current = el;
+      }
+    }
+    setPendingPadding("");
+    setPendingMargin("");
+    setPendingGap("");
+    setTranslateVal(parseTranslate(cs.translate));
+    setWidthVal(cs.width.trim());
+    setHeightVal(cs.height.trim());
+    setWidthMode(inferSizeMode(el, "width", cs.width.trim()));
+    setHeightMode(inferSizeMode(el, "height", cs.height.trim()));
+    setPendingTranslate(null);
+    setPendingWidth("");
+    setPendingHeight("");
+    setPendingWidthMode(null);
+    setPendingHeightMode(null);
+    setSizeDraft({});
+    setNote("");
+    setTextContent(getTextContent(el));
+    setNewTokenProp(null);
+    setExpandedColor(null);
+    setShowScopeHelp(false);
+    setIsEditing(false);
+    setSelected(el);
+  }, []);
+  useEffect(() => {
+    selectEl(targetEl);
+  }, [targetEl]);
+  useEffect(() => {
+    document.querySelectorAll(".di-selected").forEach((e) => e.classList.remove("di-selected"));
+    if (scope !== "current") {
+      getScopeTargets(selected, scope).forEach((e) => e.classList.add("di-selected"));
+    } else {
+      selected.classList.add("di-selected");
+    }
+    return () => {
+      document.querySelectorAll(".di-selected").forEach((e) => e.classList.remove("di-selected"));
+    };
+  }, [selected, scope]);
+  function applyToDOM(changes) {
+    const el = selectedRef.current;
+    if (!el) return;
+    const targets = getScopeTargets(el, scope);
+    changes.forEach(({ prop, val }) => {
+      targets.forEach((t) => t.style.setProperty(prop, val));
+    });
+  }
+  function onDragStart(e) {
+    if (e.target.closest("button, input, textarea")) return;
+    e.preventDefault();
+    dragRef.current = { sx: e.clientX, sy: e.clientY, sl: panelPos.left, st: panelPos.top };
+    const onMove = (ev) => {
+      if (!dragRef.current) return;
+      const left = Math.max(0, Math.min(window.innerWidth - 380, dragRef.current.sl + ev.clientX - dragRef.current.sx));
+      const top = Math.max(0, Math.min(window.innerHeight - 60, dragRef.current.st + ev.clientY - dragRef.current.sy));
+      setPanelPos({ left, top });
+    };
+    const onUp = () => {
+      dragRef.current = null;
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  }
+  function handleAddToken(val, cssProp) {
+    setAddTokenModal({ value: val, cssProp });
+  }
+  function handleTokenConfirm(cssVar, val, usage) {
+    setPendingNewToken({ cssVar, value: val, usage });
+    onTokenMapUpdate({ [val]: cssVar });
+    tokenLabels[cssVar] = cssVar.replace("--color-", "").replace(/-/g, "\xB7");
+  }
+  function liveApply(prop, val) {
+    if (prop === "gap" && gapTargetRef.current) {
+      gapTargetRef.current.style.setProperty("gap", val);
+    } else {
+      applyToDOM([{ prop, val }]);
+    }
+  }
+  function liveApplyMany(changes) {
+    applyToDOM(changes);
+  }
+  function getPendingEntries() {
+    const el = selectedRef.current;
+    if (!el) return null;
+    const fixedMinHeight = pendingHeight && pendingHeightMode === "fixed" ? `${getOneLineHugHeight(el) || Number.parseFloat(pendingHeight) || 0}px` : "";
+    const pending = [
+      ...Object.entries(pendingColors),
+      ...pendingTextColor ? [["color", pendingTextColor]] : [],
+      ...pendingRadius ? [["border-radius", pendingRadius]] : [],
+      ...pendingShadow ? [["box-shadow", pendingShadow]] : [],
+      ...pendingBorderColor ? [["border-color", pendingBorderColor]] : [],
+      ...pendingBorderWidth ? [["border-width", pendingBorderWidth]] : [],
+      ...pendingBorderStyle ? [["border-style", pendingBorderStyle]] : [],
+      ...pendingFontSize ? [["font-size", pendingFontSize]] : [],
+      ...pendingFontWeight ? [["font-weight", pendingFontWeight]] : [],
+      ...pendingPadding ? [["padding", pendingPadding]] : [],
+      ...pendingMargin ? [["margin", pendingMargin]] : [],
+      ...pendingGap ? [["gap", pendingGap]] : [],
+      ...pendingTranslate ? [["translate", formatTranslate(pendingTranslate)]] : [],
+      ...pendingWidth ? [["width", pendingWidth]] : [],
+      ...pendingHeight ? [["height", pendingHeight]] : [],
+      ...fixedMinHeight ? [["min-height", fixedMinHeight]] : [],
+      ...pendingHeight && pendingHeightMode === "fixed" ? [["max-height", pendingHeight]] : []
+    ];
+    const gapEntry = pending.find(([p]) => p === "gap");
+    const nonGapPending = pending.filter(([p]) => p !== "gap");
+    const selector = getSelectorForScope(el, scope);
+    const entries = [];
+    if (gapEntry && gapTargetRef.current && gapTargetRef.current !== el) {
+      entries.push({
+        selector: getSelectorForScope(gapTargetRef.current, "current"),
+        changes: [{ prop: "gap", from: gapVal, val: gapEntry[1] }]
+      });
+    }
+    entries.push({
+      selector,
+      changes: (gapEntry && gapTargetRef.current !== el ? nonGapPending : pending).map(([prop, val]) => ({ prop, from: getOriginalValueForProp(prop), val })),
+      note: note || void 0
+    });
+    return {
+      el,
+      selector,
+      pending,
+      entries
+    };
+  }
+  function nudgeSelected(dx, dy) {
+    const base = pendingTranslate ?? translateVal;
+    const next = { x: base.x + dx, y: base.y + dy };
+    setPendingTranslate(next);
+    liveApply("translate", formatTranslate(next));
+  }
+  function setSize(prop, val, mode = "fixed") {
+    const current = prop === "width" ? widthVal : heightVal;
+    const next = normalizeCssSize(val);
+    const selectedEl = selectedRef.current;
+    const cssValue = prop === "height" && mode === "fixed" ? clampHeightToOneLine(next, selectedEl) : mode === "fixed" ? next : sizeValueForMode(mode, current);
+    if (prop === "width") {
+      setPendingWidth(cssValue);
+      setPendingWidthMode(mode);
+    } else {
+      setPendingHeight(cssValue);
+      setPendingHeightMode(mode);
+    }
+    if (prop === "height" && mode === "fixed") {
+      const minHeight = `${getOneLineHugHeight(selectedEl) || Number.parseFloat(cssValue) || 0}px`;
+      liveApplyMany([
+        { prop: "height", val: cssValue },
+        { prop: "min-height", val: minHeight },
+        { prop: "max-height", val: cssValue }
+      ]);
+      return;
+    }
+    if (prop === "height") {
+      const el = selectedRef.current;
+      if (el) {
+        const targets = getScopeTargets(el, scope);
+        targets.forEach((t) => t.style.removeProperty("min-height"));
+        targets.forEach((t) => t.style.removeProperty("max-height"));
+      }
+    }
+    liveApply(prop, cssValue);
+  }
+  function handleSave() {
+    const payload = getPendingEntries();
+    if (!payload) return;
+    const { el, pending, entries } = payload;
+    if (pending.length === 0 && !note && !newTokenName) {
+      setSaveMsg("\u65E0\u6539\u52A8");
+      setTimeout(() => setSaveMsg(""), 1500);
+      return;
+    }
+    applyToDOM(pending.map(([prop, val]) => ({ prop, val })));
+    if (!canPersistSelector(el, scope)) {
+      setSaveMsg("\u9700\u9009\u4E2D\u5177\u4F53\u7C7B\u540D");
+      setTimeout(() => setSaveMsg(""), 2e3);
+      return;
+    }
+    fetch(endpoints.applyCss, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ entries })
+    }).then((r) => r.json()).then((r) => {
+      setSaveMsg(r.ok ? "\u5DF2\u4FDD\u5B58 \u2713" : "\u4FDD\u5B58\u5931\u8D25");
+      setTimeout(() => setSaveMsg(""), 2e3);
+    }).catch(() => {
+      setSaveMsg("\u4FDD\u5B58\u5931\u8D25");
+      setTimeout(() => setSaveMsg(""), 2e3);
+    });
+  }
+  async function copyTextToClipboard(text) {
+    if (navigator.clipboard?.writeText) {
+      try {
+        await navigator.clipboard.writeText(text);
+        return true;
+      } catch {
+      }
+    }
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    ta.style.cssText = "position:fixed;opacity:0;top:0;left:0";
+    document.body.appendChild(ta);
+    ta.select();
+    const copied = document.execCommand("copy");
+    document.body.removeChild(ta);
+    return copied;
+  }
+  function buildAiTaskPrompt(params) {
+    const inboxJson = "/Users/heqiao/Desktop/Claude\u7EC3\u4E60/\u9879\u76EE3-\u5FEB\u6D88AI\u4E2D\u53F0/docs/style-inbox.json";
+    const inboxMd = "/Users/heqiao/Desktop/Claude\u7EC3\u4E60/\u9879\u76EE3-\u5FEB\u6D88AI\u4E2D\u53F0/docs/STYLE_INBOX.md";
+    const changes = params.changes.map((change, index) => `${index + 1}. ${getChangeLabel(change.prop)}\uFF1A${change.from} \u2192 ${change.val}`).join("\n");
+    const latestHint = params.entryId ? `\u4F18\u5148\u5904\u7406 id = ${params.entryId} \u8FD9\u6761\u8BB0\u5F55\u3002` : "\u8FD9\u6761\u4EFB\u52A1\u6587\u672C\u6765\u81EA\u5F53\u524D\u9009\u4E2D\u5143\u7D20\u7684\u672C\u8F6E\u4FEE\u6539\u3002";
+    return [
+      "\u8BF7\u5904\u7406\u8FD9\u6761 DevInspector \u6837\u5F0F\u4EFB\u52A1\uFF1A",
+      "",
+      latestHint,
+      `\u5982\u9700\u67E5\u770B\u7D2F\u8BA1\u8BB0\u5F55\uFF0C\u8BFB\u53D6\uFF1A${inboxJson}`,
+      `\u5FC5\u8981\u65F6\u5BF9\u7167\uFF1A${inboxMd}`,
+      "",
+      `\u5BF9\u8C61\uFF1A${params.targetLabel}`,
+      `\u4F5C\u7528\u8303\u56F4\uFF1A${params.scopeLabel}`,
+      `\u9009\u62E9\u5668\uFF1A${params.selector}`,
+      "\u6539\u52A8\uFF1A",
+      changes,
+      "",
+      "\u8BF7\u5148\u5224\u65AD\u662F\u5426\u9002\u5408\u56FA\u5316\u8FDB\u6B63\u5F0F\u7EC4\u4EF6\u6837\u5F0F\uFF0C\u518D\u4FEE\u6539\u4EE3\u7801\uFF0C\u5E76\u5728\u5904\u7406\u540E\u628A\u8FD9\u6761\u4EFB\u52A1\u6807\u8BB0\u4E3A\u5DF2\u5904\u7406\u3002"
+    ].join("\n");
+  }
+  function handleSubmitToAi() {
+    const payload = getPendingEntries();
+    if (!payload) return;
+    const { el, pending, selector } = payload;
+    const changes = getPendingChangeRecords();
+    if (pending.length === 0 && !note) {
+      setSubmitMsg("\u5148\u6539\u70B9\u6837\u5F0F\u6216\u5199\u5907\u6CE8");
+      setTimeout(() => setSubmitMsg(""), 1800);
+      return;
+    }
+    const scopeLabel = scope === "current" ? "\u5F53\u524D\u5143\u7D20" : "\u540C\u7EC4\u4EF6";
+    const targetClasses = getClasses(el);
+    const targetLabel = targetClasses.length ? `${el.tagName.toLowerCase()}.${targetClasses.join(".")}` : el.tagName.toLowerCase();
+    const prompt2 = buildAiTaskPrompt({
+      targetLabel,
+      selector,
+      scopeLabel,
+      changes
+    });
+    copyTextToClipboard(prompt2).then((copied) => {
+      setSubmitMsg(copied ? "\u4EFB\u52A1\u6587\u672C\u5DF2\u590D\u5236 \u2713" : "\u590D\u5236\u5931\u8D25");
+      setTimeout(() => setSubmitMsg(""), copied ? 2200 : 1800);
+    }).catch(() => {
+      setSubmitMsg("\u590D\u5236\u5931\u8D25");
+      setTimeout(() => setSubmitMsg(""), 1800);
+    });
+  }
+  function handleDeleteStyleIntent(intentId, selector, prop) {
+    fetch(endpoints.deleteStyleIntent, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ id: intentId, selector, prop })
+    }).then(async (response) => {
+      let body = null;
+      try {
+        body = await response.json();
+      } catch {
+        body = null;
+      }
+      return {
+        httpOk: response.ok,
+        ...body ?? {}
+      };
+    }).then((r) => {
+      if (r.ok) {
+        setStyleIntentSummary(formatStyleIntentSummary(r));
+        setSubmitMsg(prop ? "\u5DF2\u5220\u9664\u5C5E\u6027" : "\u5DF2\u5220\u9664\u5BF9\u8C61");
+      } else {
+        const errorMsg = !r.httpOk ? "\u5220\u9664\u5931\u8D25\uFF1A\u672C\u5730\u670D\u52A1\u5F02\u5E38" : `\u5220\u9664\u5931\u8D25${r.error ? `\uFF1A${String(r.error)}` : ""}`;
+        setSubmitMsg(errorMsg);
+      }
+      setTimeout(() => setSubmitMsg(""), 1800);
+    }).catch(() => {
+      setSubmitMsg("\u5220\u9664\u5931\u8D25\uFF1A\u8BF7\u5237\u65B0\u9875\u9762\u6216\u91CD\u542F\u672C\u5730 dev");
+      setTimeout(() => setSubmitMsg(""), 1800);
+    });
+  }
+  function getOriginalValueForProp(prop) {
+    if (prop === "font-size") return fontSizeVal;
+    if (prop === "font-weight") return fontWeightVal;
+    if (prop === "color") return getDisplayLabel(textColorVal, tokenMap, colorPalette, tokenLabels).label;
+    if (prop === "background-color") return getDisplayLabel(colors[prop] ?? "", tokenMap, colorPalette, tokenLabels).label;
+    if (prop === "border-color") return getDisplayLabel(borderColorVal, tokenMap, colorPalette, tokenLabels).label;
+    if (prop === "border-width") return borderWidthVal;
+    if (prop === "border-style") return borderStyleVal;
+    if (prop === "border-radius") return radiusVal;
+    if (prop === "box-shadow") return getShadowDisplay(shadowVal, shadowAuthoredVal, shadowTokens).label;
+    if (prop === "padding") return paddingVal;
+    if (prop === "margin") return marginVal;
+    if (prop === "gap") return gapVal;
+    if (prop === "translate") return formatTranslate(translateVal);
+    if (prop === "width") return widthVal;
+    if (prop === "height") return heightVal;
+    if (prop === "min-height") return `${getOneLineHugHeight(selectedRef.current) || Number.parseFloat(heightVal) || 0}px`;
+    if (prop === "max-height") return heightVal;
+    return "";
+  }
+  function getPendingChangeRecords() {
+    const records = [];
+    const add = (prop, from, val) => records.push({ prop, from, val });
+    if (pendingFontSize) add("font-size", fontSizeVal, pendingFontSize);
+    if (pendingFontWeight) add("font-weight", fontWeightVal, pendingFontWeight);
+    if (pendingTextColor) add("color", getDisplayLabel(textColorVal, tokenMap, colorPalette, tokenLabels).label, getDisplayLabel(pendingTextColor, tokenMap, colorPalette, tokenLabels).label);
+    for (const [prop, val] of Object.entries(pendingColors)) {
+      add(prop, getDisplayLabel(colors[prop] ?? "", tokenMap, colorPalette, tokenLabels).label, getDisplayLabel(val, tokenMap, colorPalette, tokenLabels).label);
+    }
+    if (pendingBorderColor) add("border-color", getDisplayLabel(borderColorVal, tokenMap, colorPalette, tokenLabels).label, getDisplayLabel(pendingBorderColor, tokenMap, colorPalette, tokenLabels).label);
+    if (pendingBorderWidth) add("border-width", borderWidthVal, pendingBorderWidth);
+    if (pendingBorderStyle) add("border-style", borderStyleVal, pendingBorderStyle);
+    if (pendingRadius) add("border-radius", radiusVal, pendingRadius);
+    if (pendingShadow) add("box-shadow", getShadowDisplay(shadowVal, shadowAuthoredVal, shadowTokens).label, getShadowDisplay(pendingShadow, pendingShadow, shadowTokens).label);
+    if (pendingPadding) add("padding", paddingVal, pendingPadding);
+    if (pendingMargin) add("margin", marginVal, pendingMargin);
+    if (pendingGap) add("gap", gapVal, pendingGap);
+    if (pendingTranslate) add("translate", formatTranslate(translateVal), formatTranslate(pendingTranslate));
+    if (pendingWidth) add("width", widthVal, pendingWidth);
+    if (pendingHeight) add("height", heightVal, pendingHeight);
+    if (pendingNewToken) add("token", "\u65B0\u589E", `${pendingNewToken.cssVar}: ${pendingNewToken.value}`);
+    return records;
+  }
+  function getChangeLabel(prop) {
+    const map = {
+      "font-size": "\u5B57\u53F7",
+      "font-weight": "\u5B57\u91CD",
+      "color": "\u6587\u5B57\u8272",
+      "background-color": "\u80CC\u666F\u8272",
+      "border-color": "\u8FB9\u6846\u8272",
+      "border-width": "\u8FB9\u6846\u7C97\u7EC6",
+      "border-style": "\u8FB9\u6846\u6837\u5F0F",
+      "border-radius": "\u5706\u89D2",
+      "box-shadow": "\u9634\u5F71",
+      "padding": "\u5185\u8FB9\u8DDD",
+      "margin": "\u5916\u8FB9\u8DDD",
+      "gap": "\u5143\u7D20\u95F4\u8DDD",
+      "translate": "\u4F4D\u7F6E",
+      "width": "\u5BBD\u5EA6",
+      "height": "\u9AD8\u5EA6",
+      "min-height": "\u6700\u5C0F\u9AD8\u5EA6",
+      "max-height": "\u6700\u5927\u9AD8\u5EA6"
+    };
+    return map[prop] || prop;
+  }
+  function handleReset() {
+    const el = selectedRef.current;
+    if (!el) return;
+    const targets = getScopeTargets(el, scope);
+    targets.forEach((t) => {
+      const hEl = t;
+      [...Object.keys(pendingColors)].forEach((p) => hEl.style.removeProperty(p));
+      if (pendingRadius) hEl.style.removeProperty("border-radius");
+      if (pendingShadow) hEl.style.removeProperty("box-shadow");
+      if (pendingBorderColor) hEl.style.removeProperty("border-color");
+      if (pendingBorderWidth) hEl.style.removeProperty("border-width");
+      if (pendingBorderStyle) hEl.style.removeProperty("border-style");
+      if (pendingPadding) hEl.style.removeProperty("padding");
+      if (pendingMargin) hEl.style.removeProperty("margin");
+      if (pendingGap) hEl.style.removeProperty("gap");
+      if (pendingTranslate) hEl.style.removeProperty("translate");
+      if (pendingWidth) hEl.style.removeProperty("width");
+      if (pendingHeight) hEl.style.removeProperty("height");
+      if (pendingHeight) hEl.style.removeProperty("min-height");
+      if (pendingHeight) hEl.style.removeProperty("max-height");
+    });
+    setPendingColors({});
+    setPendingRadius("");
+    setPendingShadow("");
+    setPendingFontSize("");
+    setPendingFontWeight("");
+    setPendingTextColor("");
+    setPendingBorderColor("");
+    setPendingBorderWidth("");
+    setPendingBorderStyle("");
+    setPendingPadding("");
+    setPendingMargin("");
+    setPendingGap("");
+    setPendingTranslate(null);
+    setPendingWidth("");
+    setPendingHeight("");
+    setPendingWidthMode(null);
+    setPendingHeightMode(null);
+    setSizeDraft({});
+    setCustomColorVals({});
+    setColors(Object.fromEntries(
+      COLOR_PROPS.map(({ prop }) => [prop, getComputedColor(el, prop)]).filter(([, v]) => v && v !== "rgba(0, 0, 0, 0)" && v !== "transparent")
+    ));
+    const cs = getComputedStyle(el);
+    setRadiusVal(getComputedRadius(el));
+    setShadowVal(cs.boxShadow.trim() === "rgba(0, 0, 0, 0) 0px 0px 0px 0px" ? "none" : cs.boxShadow.trim());
+    setShadowAuthoredVal(getAuthoredStyleValue(el, "box-shadow"));
+    const normSpace = (v) => {
+      const parts = v.trim().split(" ");
+      return parts.every((p) => p === parts[0]) ? parts[0] : v.trim();
+    };
+    setPaddingVal(normSpace(`${cs.paddingTop} ${cs.paddingRight} ${cs.paddingBottom} ${cs.paddingLeft}`));
+    setMarginVal(normSpace(`${cs.marginTop} ${cs.marginRight} ${cs.marginBottom} ${cs.marginLeft}`));
+    const g = cs.gap.trim();
+    setGapVal(g === "normal" ? "0px" : g);
+    setTranslateVal(parseTranslate(cs.translate));
+    setWidthVal(cs.width.trim());
+    setHeightVal(cs.height.trim());
+    setWidthMode(inferSizeMode(el, "width", cs.width.trim()));
+    setHeightMode(inferSizeMode(el, "height", cs.height.trim()));
+  }
+  function handleClose() {
+    onClose();
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    addTokenModal && /* @__PURE__ */ jsx2(
+      AddTokenModal,
+      {
+        value: addTokenModal.value,
+        cssProp: addTokenModal.cssProp,
+        elementClasses: getClasses(selected),
+        colorPalette,
+        onClose: () => setAddTokenModal(null),
+        onConfirm: handleTokenConfirm
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelElRef,
+        className: "di-panel",
+        "data-di-panel-role": "primary",
+        style: { top: panelPos.top, left: panelPos.left },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "di-head", onMouseDown: onDragStart, children: [
+            /* @__PURE__ */ jsxs("div", { className: "di-head-left", children: [
+              /* @__PURE__ */ jsx2("span", { className: "di-title", children: "\u9875\u9762\u6837\u5F0F" }),
+              /* @__PURE__ */ jsx2("span", { className: "di-badge-dev", children: "Dev Only" }),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  className: "di-layer-btn",
+                  title: "\u9009\u4E2D\u7236\u5C42",
+                  disabled: !selected.parentElement || selected.parentElement === document.body,
+                  onClick: () => {
+                    if (selected.parentElement && selected.parentElement !== document.body) selectEl(selected.parentElement);
+                  },
+                  children: "\u2191"
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  className: "di-layer-btn",
+                  title: "\u9009\u4E2D\u7B2C\u4E00\u4E2A\u5B50\u5C42",
+                  disabled: !selected.firstElementChild,
+                  onClick: () => {
+                    if (selected.firstElementChild) selectEl(selected.firstElementChild);
+                  },
+                  children: "\u2193"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx2("div", { className: "di-head-right", children: /* @__PURE__ */ jsx2("button", { className: "di-close", onClick: handleClose, children: "\xD7" }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "di-body", children: [
+            /* @__PURE__ */ jsxs("div", { className: "di-section", children: [
+              /* @__PURE__ */ jsxs("div", { className: "di-section-title-row", children: [
+                /* @__PURE__ */ jsx2("div", { className: "di-section-title", children: "\u4F5C\u7528\u8303\u56F4" }),
+                /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    type: "button",
+                    className: `di-help-icon${showScopeHelp ? " di-help-icon--on" : ""}`,
+                    "aria-label": "\u67E5\u770B\u4F5C\u7528\u8303\u56F4\u8BF4\u660E",
+                    "aria-expanded": showScopeHelp,
+                    onClick: () => setShowScopeHelp((v) => !v),
+                    children: /* @__PURE__ */ jsx2(CircleHelp, { size: 14, strokeWidth: 1.8 })
+                  }
+                )
+              ] }),
+              showScopeHelp && /* @__PURE__ */ jsx2("div", { className: "di-help-popover", children: "\u540C\u7EC4\u4EF6 = \u5FFD\u7565\u6FC0\u6D3B / \u5F53\u524D / \u5C55\u5F00\u7B49\u72B6\u6001\u7C7B\u540E\uFF0C\u5171\u4EAB\u540C\u4E00\u4E1A\u52A1\u7C7B\u540D\u7684\u5143\u7D20\u3002" }),
+              /* @__PURE__ */ jsxs("div", { className: "di-scope-row", children: [
+                /* @__PURE__ */ jsx2("button", { className: `di-scope-btn${scope === "current" ? " di-scope-btn--on" : ""}`, onClick: () => setScope("current"), children: "\u5F53\u524D\u5143\u7D20" }),
+                /* @__PURE__ */ jsxs("button", { className: `di-scope-btn${scope === "component" ? " di-scope-btn--on" : ""}`, onClick: () => setScope("component"), children: [
+                  "\u540C\u7EC4\u4EF6 ",
+                  selected && /* @__PURE__ */ jsx2("span", { className: "di-scope-count", children: getSameComponentEls(selected).length })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "di-section", children: [
+              /* @__PURE__ */ jsx2("div", { className: "di-section-title", children: "\u6587\u5B57" }),
+              textContent !== null && /* @__PURE__ */ jsx2(
+                "textarea",
+                {
+                  className: "di-note di-note--sm",
+                  defaultValue: textContent,
+                  ref: (el) => {
+                    if (el) resizeTextareaToContent(el);
+                  },
+                  placeholder: "\u4FEE\u6539\u6587\u5B57\u5185\u5BB9...",
+                  onChange: (e) => {
+                    resizeTextareaToContent(e.currentTarget);
+                    const el = selectedRef.current;
+                    if (!el) return;
+                    const ts = getScopeTargets(el, scope);
+                    ts.forEach((t) => {
+                      t.textContent = e.currentTarget.value;
+                    });
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "di-border-row", children: [
+                /* @__PURE__ */ jsxs("div", { className: "di-border-card", children: [
+                  /* @__PURE__ */ jsx2("div", { className: "di-border-card-title", children: "\u5B57\u53F7" }),
+                  (() => {
+                    const curSize = pendingFontSize || fontSizeVal || "\u2014";
+                    const curWeight = pendingFontWeight || fontWeightVal;
+                    const curColor = pendingTextColor || textColorVal;
+                    const matchedToken = getTypographyToken(curSize, curWeight, curColor, typographyTokens);
+                    const curOpt = matchedToken ? fontSizeOptions.find((opt) => opt.key === matchedToken.key) : null;
+                    return /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          className: "di-border-style-single di-font-token-trigger",
+                          role: "button",
+                          tabIndex: 0,
+                          onClick: (e) => {
+                            const r = e.currentTarget.getBoundingClientRect();
+                            setDropPos(calcDropPos(r));
+                            setShowWeightDrop(false);
+                            setShowStyleDrop(false);
+                            setExpandedTextColor(false);
+                            setExpandedBorderColor(false);
+                            setShowShadowDrop(false);
+                            setCustomRadius("");
+                            setSizeDraft({});
+                            setFontSizeCustomDraft(curSize);
+                            setShowFontSizeDrop((v) => !v);
+                          },
+                          onKeyDown: (e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                              e.preventDefault();
+                              const r = e.currentTarget.getBoundingClientRect();
+                              setDropPos(calcDropPos(r));
+                              setFontSizeCustomDraft(curSize);
+                              setShowFontSizeDrop((v) => !v);
+                            }
+                          },
+                          children: [
+                            curOpt && /* @__PURE__ */ jsx2("span", { className: "di-border-style-label", children: curOpt.label }),
+                            /* @__PURE__ */ jsx2("span", { className: `di-border-style-name${curOpt ? "" : " di-border-style-name--custom"}`, children: curSize }),
+                            /* @__PURE__ */ jsx2("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "none", style: { marginLeft: "auto", flexShrink: 0 }, children: /* @__PURE__ */ jsx2("path", { d: "M1 1l3 3 3-3", stroke: "#9ca3af", strokeWidth: "1.5", strokeLinecap: "round" }) })
+                          ]
+                        }
+                      ),
+                      showFontSizeDrop && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx2("div", { style: { position: "fixed", inset: 0, zIndex: 99997 }, onClick: () => setShowFontSizeDrop(false) }),
+                        /* @__PURE__ */ jsxs("div", { className: "di-border-style-drop", style: { position: "fixed", top: dropPos.top, left: dropPos.left, zIndex: 99998 }, children: [
+                          fontSizeOptions.map((opt) => /* @__PURE__ */ jsxs(
+                            "button",
+                            {
+                              className: `di-border-style-drop-item${curOpt?.key === opt.key ? " di-border-style-drop-item--on" : ""}`,
+                              onClick: () => {
+                                setPendingFontSize(opt.value);
+                                setPendingFontWeight(opt.fontWeight);
+                                setPendingTextColor(opt.color);
+                                liveApplyMany([
+                                  { prop: "font-size", val: opt.value },
+                                  { prop: "font-weight", val: opt.fontWeight },
+                                  { prop: "color", val: opt.color }
+                                ]);
+                                setShowFontSizeDrop(false);
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx2("span", { className: "di-border-style-label", children: opt.label }),
+                                /* @__PURE__ */ jsx2("span", { className: "di-border-style-name", children: `${opt.value} / ${opt.fontWeight}` })
+                              ]
+                            },
+                            opt.key
+                          )),
+                          /* @__PURE__ */ jsxs("div", { className: "di-dropdown-custom", children: [
+                            /* @__PURE__ */ jsx2("span", { className: "di-dropdown-custom-label", children: "\u81EA\u5B9A\u4E49" }),
+                            /* @__PURE__ */ jsx2(
+                              "input",
+                              {
+                                className: "di-dropdown-custom-input",
+                                value: fontSizeCustomDraft,
+                                placeholder: "13px",
+                                onChange: (e) => setFontSizeCustomDraft(e.target.value),
+                                onClick: (e) => e.stopPropagation()
+                              }
+                            ),
+                            /* @__PURE__ */ jsx2(
+                              "button",
+                              {
+                                type: "button",
+                                className: "di-dropdown-custom-apply",
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  if (!fontSizeCustomDraft.trim()) return;
+                                  setPendingFontSize(fontSizeCustomDraft.trim());
+                                  liveApply("font-size", fontSizeCustomDraft.trim());
+                                  setShowFontSizeDrop(false);
+                                },
+                                children: "\u5E94\u7528"
+                              }
+                            )
+                          ] })
+                        ] })
+                      ] })
+                    ] });
+                  })()
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "di-border-card", style: { position: "relative" }, children: [
+                  /* @__PURE__ */ jsx2("div", { className: "di-border-card-title", children: "\u5B57\u91CD" }),
+                  (() => {
+                    const cur = pendingFontWeight || fontWeightVal;
+                    const curOpt = fontWeightOptions.find((o) => o.value === cur) ?? fontWeightOptions[1];
+                    return /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          className: "di-border-style-single",
+                          style: { marginTop: 4 },
+                          onClick: (e) => {
+                            const r = e.currentTarget.getBoundingClientRect();
+                            setDropPos(calcDropPos(r));
+                            setShowWeightDrop((v) => !v);
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx2("span", { className: "di-border-style-label", style: curOpt.value === "none" ? { color: "#9ca3af" } : void 0, children: curOpt.label }),
+                            /* @__PURE__ */ jsx2("span", { className: "di-border-style-name", children: cur }),
+                            /* @__PURE__ */ jsx2("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "none", style: { marginLeft: "auto", flexShrink: 0 }, children: /* @__PURE__ */ jsx2("path", { d: "M1 1l3 3 3-3", stroke: "#9ca3af", strokeWidth: "1.5", strokeLinecap: "round" }) })
+                          ]
+                        }
+                      ),
+                      showWeightDrop && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx2("div", { style: { position: "fixed", inset: 0, zIndex: 99997 }, onClick: () => setShowWeightDrop(false) }),
+                        /* @__PURE__ */ jsx2("div", { className: "di-border-style-drop", style: { position: "fixed", top: dropPos.top, left: dropPos.left, zIndex: 99998 }, children: fontWeightOptions.map((opt) => /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            className: `di-border-style-drop-item${cur === opt.value ? " di-border-style-drop-item--on" : ""}`,
+                            onClick: () => {
+                              setPendingFontWeight(opt.value);
+                              liveApply("font-weight", opt.value);
+                              setShowWeightDrop(false);
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx2("span", { className: "di-border-style-label", style: opt.value === "none" ? { color: "#9ca3af" } : void 0, children: opt.label }),
+                              /* @__PURE__ */ jsx2("span", { className: "di-border-style-name", children: opt.value })
+                            ]
+                          },
+                          opt.value
+                        )) })
+                      ] })
+                    ] });
+                  })()
+                ] }),
+                (() => {
+                  const tcVal = pendingTextColor || textColorVal;
+                  const { label: tcLabel, sub: tcSub, isHardcoded: tcHard } = getDisplayLabel(tcVal, tokenMap, colorPalette, tokenLabels);
+                  const tcDark = (() => {
+                    const m = tcVal.match(/^#([0-9a-f]{6})$/i);
+                    if (!m) return true;
+                    const r = parseInt(m[1].slice(0, 2), 16), g = parseInt(m[1].slice(2, 4), 16), b = parseInt(m[1].slice(4, 6), 16);
+                    return (r * 299 + g * 587 + b * 114) / 1e3 < 128;
+                  })();
+                  return /* @__PURE__ */ jsxs("div", { className: "di-border-card", style: { position: "relative" }, children: [
+                    /* @__PURE__ */ jsx2("div", { className: "di-border-card-title", children: "\u989C\u8272" }),
+                    /* @__PURE__ */ jsxs("div", { className: "di-border-color-body", style: { marginTop: 4 }, children: [
+                      /* @__PURE__ */ jsx2(
+                        "button",
+                        {
+                          className: `di-swatch-btn${tcDark ? " di-swatch-btn--dark" : ""}`,
+                          style: { background: tcVal || "#1d293d" },
+                          onClick: (e) => {
+                            const r = e.currentTarget.getBoundingClientRect();
+                            setDropPos(calcDropPos(r));
+                            setExpandedTextColor((v) => !v);
+                          },
+                          children: /* @__PURE__ */ jsx2("svg", { width: "10", height: "6", viewBox: "0 0 10 6", fill: "none", children: /* @__PURE__ */ jsx2("path", { d: "M1 1l4 4 4-4", stroke: tcDark ? "#fff" : "#374151", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "di-border-color-info", children: [
+                        /* @__PURE__ */ jsx2("span", { className: tcHard ? "di-token-name--plain" : "di-token-name", children: tcLabel }),
+                        tcSub && /* @__PURE__ */ jsx2("span", { className: "di-hex", children: tcSub })
+                      ] })
+                    ] }),
+                    expandedTextColor && /* @__PURE__ */ jsx2(
+                      ColorDropdown,
+                      {
+                        value: tcVal,
+                        pos: dropPos,
+                        colorPalette,
+                        onChange: (c) => {
+                          setPendingTextColor(c);
+                          liveApply("color", c);
+                        },
+                        onClose: () => setExpandedTextColor(false),
+                        onAddToken: (v) => handleAddToken(v, "color")
+                      }
+                    )
+                  ] });
+                })()
+              ] })
+            ] }),
+            Object.keys(colors).length > 0 && /* @__PURE__ */ jsxs("div", { className: "di-section", children: [
+              /* @__PURE__ */ jsx2("div", { className: "di-section-title", children: "\u989C\u8272" }),
+              COLOR_PROPS.filter(({ prop }) => colors[prop]).map(({ label, prop }) => {
+                const val = pendingColors[prop] ?? colors[prop];
+                const token = tokenMap[val];
+                const isDark = (() => {
+                  const m = val.match(/^#([0-9a-f]{6})$/i);
+                  if (!m) return false;
+                  const r = parseInt(m[1].slice(0, 2), 16), g = parseInt(m[1].slice(2, 4), 16), b = parseInt(m[1].slice(4, 6), 16);
+                  return (r * 299 + g * 587 + b * 114) / 1e3 < 128;
+                })();
+                const isExpanded = expandedColor === prop;
+                const tokenList = Object.entries(tokenMap).filter(([v]) => v.startsWith("#") && v !== val).map(([v, t]) => ({ val: v, token: t }));
+                const { label: dispLabel, sub: dispSub, isHardcoded: dispHard } = getDisplayLabel(val, tokenMap, colorPalette, tokenLabels);
+                return /* @__PURE__ */ jsxs("div", { className: "di-color-row", children: [
+                  /* @__PURE__ */ jsx2("span", { className: "di-attr-label", children: label }),
+                  /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      className: `di-swatch-btn${isDark ? " di-swatch-btn--dark" : ""}`,
+                      style: { background: val },
+                      onClick: (e) => {
+                        const r = e.currentTarget.getBoundingClientRect();
+                        setDropPos(calcDropPos(r));
+                        setExpandedColor(isExpanded ? null : prop);
+                      },
+                      children: /* @__PURE__ */ jsx2("svg", { width: "10", height: "6", viewBox: "0 0 10 6", fill: "none", children: /* @__PURE__ */ jsx2("path", { d: "M1 1l4 4 4-4", stroke: isDark ? "#fff" : "#374151", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "di-color-info", children: [
+                    /* @__PURE__ */ jsx2("span", { className: dispHard ? "di-token-name--plain" : "di-token-name", children: dispLabel }),
+                    dispSub && /* @__PURE__ */ jsx2("span", { className: "di-hex", children: dispSub })
+                  ] }),
+                  isExpanded && /* @__PURE__ */ jsx2(
+                    ColorDropdown,
+                    {
+                      value: val,
+                      pos: dropPos,
+                      colorPalette,
+                      onChange: (c, _tk) => {
+                        setPendingColors((prev) => ({ ...prev, [prop]: c }));
+                        liveApply(prop, c);
+                      },
+                      onClose: () => setExpandedColor(null),
+                      onAddToken: (v) => handleAddToken(v, prop)
+                    }
+                  )
+                ] }, prop);
+              })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "di-section", children: [
+              /* @__PURE__ */ jsx2("div", { className: "di-section-title", children: "\u5E03\u5C40" }),
+              /* @__PURE__ */ jsxs("div", { className: "di-layout-grid", children: [
+                /* @__PURE__ */ jsxs("div", { className: "di-layout-card", children: [
+                  /* @__PURE__ */ jsx2("div", { className: "di-layout-card-title", children: "\u4F4D\u7F6E" }),
+                  /* @__PURE__ */ jsxs("div", { className: "di-nudge-pad", "aria-label": "\u79FB\u52A8\u5143\u7D20", children: [
+                    /* @__PURE__ */ jsx2("button", { className: "di-nudge-btn di-nudge-btn--up", onClick: () => nudgeSelected(0, -1), title: "\u4E0A\u79FB 1px", children: "\u2191" }),
+                    /* @__PURE__ */ jsx2("button", { className: "di-nudge-btn di-nudge-btn--left", onClick: () => nudgeSelected(-1, 0), title: "\u5DE6\u79FB 1px", children: "\u2190" }),
+                    /* @__PURE__ */ jsxs("div", { className: "di-nudge-readout", children: [
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        "X ",
+                        Math.round((pendingTranslate ?? translateVal).x)
+                      ] }),
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        "Y ",
+                        Math.round((pendingTranslate ?? translateVal).y)
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx2("button", { className: "di-nudge-btn di-nudge-btn--right", onClick: () => nudgeSelected(1, 0), title: "\u53F3\u79FB 1px", children: "\u2192" }),
+                    /* @__PURE__ */ jsx2("button", { className: "di-nudge-btn di-nudge-btn--down", onClick: () => nudgeSelected(0, 1), title: "\u4E0B\u79FB 1px", children: "\u2193" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "di-layout-card di-layout-card--size", children: [
+                  /* @__PURE__ */ jsx2("div", { className: "di-layout-card-title", children: "\u5C3A\u5BF8" }),
+                  [
+                    { key: "width", label: "W", current: widthVal, pending: pendingWidth, mode: widthMode, pendingMode: pendingWidthMode },
+                    { key: "height", label: "H", current: heightVal, pending: pendingHeight, mode: heightMode, pendingMode: pendingHeightMode }
+                  ].map((item) => {
+                    const cur = displaySizeValue(item.pending, item.current);
+                    const inputVal = sizeDraft[item.key] ?? cur;
+                    const activeMode = item.pendingMode ?? item.mode;
+                    return /* @__PURE__ */ jsxs("div", { className: "di-size-row", children: [
+                      /* @__PURE__ */ jsx2("span", { className: "di-size-axis", children: item.label }),
+                      /* @__PURE__ */ jsx2(
+                        "input",
+                        {
+                          className: "di-size-value",
+                          value: inputVal,
+                          "aria-label": `${item.label} \u81EA\u5B9A\u4E49\u5C3A\u5BF8`,
+                          onChange: (e) => {
+                            setSizeDraft((prev) => ({ ...prev, [item.key]: e.target.value }));
+                            setSize(item.key, e.target.value, "fixed");
+                          },
+                          onFocus: (e) => {
+                            setSizeDraft((prev) => ({ ...prev, [item.key]: cur }));
+                            e.currentTarget.select();
+                          },
+                          onClick: (e) => e.currentTarget.select(),
+                          onMouseUp: (e) => e.preventDefault(),
+                          onBlur: () => setSizeDraft((prev) => {
+                            const next = { ...prev };
+                            delete next[item.key];
+                            return next;
+                          }),
+                          onKeyDown: (e) => {
+                            if (e.key === "Enter") e.currentTarget.blur();
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx2(
+                        "select",
+                        {
+                          className: "di-size-mode-select",
+                          value: activeMode,
+                          onChange: (e) => {
+                            const mode = e.target.value;
+                            setSize(item.key, item.current, mode);
+                          },
+                          children: SIZE_OPTIONS.map((opt) => /* @__PURE__ */ jsx2("option", { value: opt.mode, children: opt.label }, opt.mode))
+                        }
+                      )
+                    ] }, item.key);
+                  })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "di-section", children: [
+              /* @__PURE__ */ jsx2("div", { className: "di-section-title", children: "\u9634\u5F71" }),
+              /* @__PURE__ */ jsx2("div", { className: "di-shadow-grid", children: (() => {
+                const activeShadow = pendingShadow || shadowVal;
+                const shadowDisplay = getShadowDisplay(activeShadow, shadowAuthoredVal, shadowTokens);
+                const matchedOption = shadowOptions.find((option) => canonicalizeShadowValue(option.value) === canonicalizeShadowValue(activeShadow)) ?? null;
+                const activeOption = matchedOption ?? shadowOptions[0];
+                return /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs("div", { className: "di-shadow-card", style: { position: "relative" }, children: [
+                    /* @__PURE__ */ jsx2("div", { className: "di-shadow-card-title", children: "Token" }),
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        className: "di-border-style-single",
+                        onClick: (e) => {
+                          const r = e.currentTarget.getBoundingClientRect();
+                          setDropPos(calcDropPos(r));
+                          setShowShadowDrop((v) => !v);
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx2("span", { className: "di-border-style-label", style: activeOption.cssVar ? void 0 : { color: "#9ca3af" }, children: activeOption.label }),
+                          /* @__PURE__ */ jsx2("span", { className: "di-border-style-name", children: activeOption.cssVar || "none" }),
+                          /* @__PURE__ */ jsx2("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "none", style: { marginLeft: "auto", flexShrink: 0 }, children: /* @__PURE__ */ jsx2("path", { d: "M1 1l3 3 3-3", stroke: "#9ca3af", strokeWidth: "1.5", strokeLinecap: "round" }) })
+                        ]
+                      }
+                    ),
+                    showShadowDrop && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx2("div", { style: { position: "fixed", inset: 0, zIndex: 99997 }, onClick: () => setShowShadowDrop(false) }),
+                      /* @__PURE__ */ jsxs("div", { className: "di-border-style-drop di-shadow-drop", style: { position: "fixed", top: dropPos.top, left: dropPos.left, zIndex: 99998 }, children: [
+                        shadowOptions.map((option) => {
+                          const isOn = canonicalizeShadowValue(option.value) === canonicalizeShadowValue(activeShadow);
+                          return /* @__PURE__ */ jsxs(
+                            "button",
+                            {
+                              className: `di-border-style-drop-item${isOn ? " di-border-style-drop-item--on" : ""}`,
+                              onClick: () => {
+                                setPendingShadow(option.value);
+                                liveApply("box-shadow", option.value);
+                                setShowShadowDrop(false);
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx2("span", { className: "di-border-style-label", style: option.cssVar ? void 0 : { color: "#9ca3af" }, children: option.label }),
+                                /* @__PURE__ */ jsxs("span", { className: "di-shadow-drop-meta", children: [
+                                  /* @__PURE__ */ jsx2("span", { className: "di-border-style-name", children: option.cssVar || option.usage }),
+                                  option.cssVar && /* @__PURE__ */ jsx2("span", { className: "di-shadow-drop-value", children: option.value })
+                                ] })
+                              ]
+                            },
+                            option.cssVar || option.label
+                          );
+                        }),
+                        /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            className: `di-border-style-drop-item${matchedOption ? "" : " di-border-style-drop-item--on"}`,
+                            onClick: () => {
+                              const next = prompt("\u81EA\u5B9A\u4E49\u9634\u5F71\uFF08\u5982 0 12px 30px rgba(15,23,42,0.08)\uFF09", activeShadow === "none" ? "" : activeShadow);
+                              if (next === null) return;
+                              const value = next.trim() || "none";
+                              setPendingShadow(value);
+                              liveApply("box-shadow", value);
+                              setShowShadowDrop(false);
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx2("span", { className: "di-border-style-label", children: "\u81EA\u5B9A\u4E49" }),
+                              /* @__PURE__ */ jsxs("span", { className: "di-shadow-drop-meta", children: [
+                                /* @__PURE__ */ jsx2("span", { className: "di-border-style-name", children: shadowDisplay.label }),
+                                /* @__PURE__ */ jsx2("span", { className: "di-shadow-drop-value", children: formatShadowDisplay(activeShadow) })
+                              ] })
+                            ]
+                          }
+                        )
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "di-shadow-card", children: [
+                    /* @__PURE__ */ jsx2("div", { className: "di-shadow-card-title", children: "\u9884\u89C8" }),
+                    /* @__PURE__ */ jsxs("div", { className: "di-shadow-preview-row", children: [
+                      /* @__PURE__ */ jsx2("div", { className: "di-shadow-preview-chip", style: { boxShadow: activeShadow === "none" ? "none" : activeShadow } }),
+                      /* @__PURE__ */ jsxs("div", { className: "di-shadow-preview-copy", children: [
+                        /* @__PURE__ */ jsx2("span", { className: shadowDisplay.isHardcoded ? "di-token-name--plain" : "di-token-name", children: shadowDisplay.label }),
+                        /* @__PURE__ */ jsx2("span", { className: "di-hex di-hex--wrap", children: shadowDisplay.sub })
+                      ] })
+                    ] })
+                  ] })
+                ] });
+              })() })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "di-section", children: [
+              /* @__PURE__ */ jsx2("div", { className: "di-section-title", children: "\u8FB9\u6846" }),
+              /* @__PURE__ */ jsxs("div", { className: "di-border-row", children: [
+                (() => {
+                  const bcVal = pendingBorderColor || borderColorVal;
+                  const { label: bcLabel, sub: bcSub, isHardcoded: bcHard } = getDisplayLabel(bcVal || "", tokenMap, colorPalette, tokenLabels);
+                  const bcDark = (() => {
+                    const m = bcVal?.match(/^#([0-9a-f]{6})$/i);
+                    if (!m) return false;
+                    const r = parseInt(m[1].slice(0, 2), 16), g = parseInt(m[1].slice(2, 4), 16), b = parseInt(m[1].slice(4, 6), 16);
+                    return (r * 299 + g * 587 + b * 114) / 1e3 < 128;
+                  })();
+                  return /* @__PURE__ */ jsxs("div", { className: "di-border-card", children: [
+                    /* @__PURE__ */ jsx2("div", { className: "di-border-card-title", children: "\u989C\u8272" }),
+                    /* @__PURE__ */ jsxs("div", { className: "di-border-color-body", children: [
+                      /* @__PURE__ */ jsx2(
+                        "button",
+                        {
+                          className: `di-swatch-btn${bcDark ? " di-swatch-btn--dark" : ""}${!bcVal ? " di-swatch-btn--empty" : ""}`,
+                          style: { background: bcVal || void 0 },
+                          onClick: (e) => {
+                            const r = e.currentTarget.getBoundingClientRect();
+                            setDropPos(calcDropPos(r));
+                            setExpandedBorderColor((v) => !v);
+                          },
+                          children: /* @__PURE__ */ jsx2("svg", { width: "10", height: "6", viewBox: "0 0 10 6", fill: "none", children: /* @__PURE__ */ jsx2("path", { d: "M1 1l4 4 4-4", stroke: !bcVal ? "#9ca3af" : bcDark ? "#fff" : "#374151", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "di-border-color-info", children: [
+                        /* @__PURE__ */ jsx2("span", { className: bcHard ? "di-token-name--plain" : "di-token-name", children: bcVal ? bcLabel : "\u672A\u8BBE\u7F6E" }),
+                        bcSub && /* @__PURE__ */ jsx2("span", { className: "di-hex", children: bcSub })
+                      ] })
+                    ] }),
+                    expandedBorderColor && /* @__PURE__ */ jsx2(
+                      ColorDropdown,
+                      {
+                        value: bcVal || "",
+                        pos: dropPos,
+                        colorPalette,
+                        onChange: (c) => {
+                          setPendingBorderColor(c);
+                          liveApply("border-color", c);
+                          if ((pendingBorderWidth || borderWidthVal) === "0px") {
+                            liveApply("border-width", "1px");
+                            liveApply("border-style", "solid");
+                            setPendingBorderWidth("1px");
+                            setPendingBorderStyle("solid");
+                          }
+                        },
+                        onClose: () => setExpandedBorderColor(false),
+                        onAddToken: (v) => handleAddToken(v, "border-color")
+                      }
+                    )
+                  ] });
+                })(),
+                /* @__PURE__ */ jsxs("div", { className: "di-border-card", style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ jsx2("div", { className: "di-border-card-title", children: "\u7C97\u7EC6" }),
+                  (() => {
+                    const cur = pendingBorderWidth || borderWidthVal || "0px";
+                    const idx = borderWidthSteps.indexOf(cur);
+                    return /* @__PURE__ */ jsxs("div", { className: "di-spinner", children: [
+                      /* @__PURE__ */ jsx2("span", { className: "di-spinner-val", children: cur }),
+                      /* @__PURE__ */ jsxs("div", { className: "di-spinner-btns", children: [
+                        /* @__PURE__ */ jsx2(
+                          "button",
+                          {
+                            className: "di-spinner-up",
+                            disabled: idx <= 0,
+                            onClick: () => {
+                              const nv = borderWidthSteps[Math.max(0, idx - 1)];
+                              setPendingBorderWidth(nv);
+                              liveApply("border-width", nv);
+                            },
+                            children: /* @__PURE__ */ jsx2("svg", { width: "8", height: "5", viewBox: "0 0 8 5", children: /* @__PURE__ */ jsx2("path", { d: "M1 4l3-3 3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", fill: "none" }) })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx2(
+                          "button",
+                          {
+                            className: "di-spinner-dn",
+                            disabled: idx >= borderWidthSteps.length - 1,
+                            onClick: () => {
+                              const nv = borderWidthSteps[Math.min(borderWidthSteps.length - 1, idx < 0 ? 1 : idx + 1)];
+                              setPendingBorderWidth(nv);
+                              liveApply("border-width", nv);
+                            },
+                            children: /* @__PURE__ */ jsx2("svg", { width: "8", height: "5", viewBox: "0 0 8 5", children: /* @__PURE__ */ jsx2("path", { d: "M1 1l3 3 3-3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", fill: "none" }) })
+                          }
+                        )
+                      ] })
+                    ] });
+                  })()
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "di-border-card", style: { position: "relative" }, children: [
+                  /* @__PURE__ */ jsx2("div", { className: "di-border-card-title", children: "\u6837\u5F0F" }),
+                  (() => {
+                    const cur = pendingBorderStyle || borderStyleVal;
+                    const curOpt = BORDER_STYLE_OPTIONS.find((o) => o.value === cur) ?? BORDER_STYLE_OPTIONS[0];
+                    return /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          className: "di-border-style-single",
+                          onClick: (e) => {
+                            const r = e.currentTarget.getBoundingClientRect();
+                            setDropPos(calcDropPos(r));
+                            setShowStyleDrop((v) => !v);
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx2("span", { className: "di-border-style-label", style: curOpt.value === "none" ? { color: "#9ca3af" } : void 0, children: curOpt.label }),
+                            /* @__PURE__ */ jsx2("span", { className: "di-border-style-name", children: curOpt.title }),
+                            /* @__PURE__ */ jsx2("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "none", style: { marginLeft: "auto", flexShrink: 0 }, children: /* @__PURE__ */ jsx2("path", { d: "M1 1l3 3 3-3", stroke: "#9ca3af", strokeWidth: "1.5", strokeLinecap: "round" }) })
+                          ]
+                        }
+                      ),
+                      showStyleDrop && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx2("div", { style: { position: "fixed", inset: 0, zIndex: 99997 }, onClick: () => setShowStyleDrop(false) }),
+                        /* @__PURE__ */ jsx2("div", { className: "di-border-style-drop", style: { position: "fixed", top: dropPos.top, left: dropPos.left, zIndex: 99998 }, children: BORDER_STYLE_OPTIONS.map((opt) => /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            className: `di-border-style-drop-item${cur === opt.value ? " di-border-style-drop-item--on" : ""}`,
+                            onClick: () => {
+                              setPendingBorderStyle(opt.value);
+                              liveApply("border-style", opt.value);
+                              setShowStyleDrop(false);
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx2("span", { className: "di-border-style-label", style: opt.value === "none" ? { color: "#9ca3af" } : void 0, children: opt.label }),
+                              /* @__PURE__ */ jsx2("span", { className: "di-border-style-name", children: opt.title })
+                            ]
+                          },
+                          opt.value
+                        )) })
+                      ] })
+                    ] });
+                  })()
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "di-section", children: [
+              /* @__PURE__ */ jsx2("div", { className: "di-section-title", children: "\u5706\u89D2" }),
+              /* @__PURE__ */ jsxs("div", { className: "di-preset-row", children: [
+                radiusPresets.map((opt) => {
+                  const current = pendingRadius || radiusVal;
+                  const isOn = matchPreset(radiusPresets, current)?.value === opt.value;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      className: `di-preset${isOn ? " di-preset--on" : ""}`,
+                      onClick: () => {
+                        setPendingRadius(opt.value);
+                        setCustomRadius("");
+                        liveApply("border-radius", opt.value);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx2("span", { className: "di-preset-label", children: opt.label }),
+                        opt.sub && /* @__PURE__ */ jsx2("span", { className: "di-preset-sub", children: opt.sub })
+                      ]
+                    },
+                    opt.label
+                  );
+                }),
+                (() => {
+                  const cur = pendingRadius || radiusVal;
+                  const isCustom = !!cur && cur !== "0px" && !matchPreset(radiusPresets, cur);
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      className: `di-preset${isCustom ? " di-preset--on" : ""}`,
+                      onClick: () => {
+                        const v = prompt("\u81EA\u5B9A\u4E49\u5706\u89D2\uFF08\u5982 12px\uFF09", cur || "");
+                        if (v) {
+                          setPendingRadius(v);
+                          setCustomRadius(v);
+                          liveApply("border-radius", v);
+                        }
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx2("span", { className: "di-preset-label", children: "\u81EA\u5B9A\u4E49" }),
+                        isCustom && /* @__PURE__ */ jsx2("span", { className: "di-preset-sub", children: cur })
+                      ]
+                    }
+                  );
+                })()
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "di-section", children: [
+              /* @__PURE__ */ jsx2("div", { className: "di-section-title", children: "\u95F4\u8DDD" }),
+              /* @__PURE__ */ jsxs("div", { className: "di-space-row", children: [
+                /* @__PURE__ */ jsx2(
+                  SpaceCard,
+                  {
+                    title: "\u5185\u8FB9\u8DDD",
+                    variant: "padding",
+                    value: pendingPadding || paddingVal,
+                    spaceSteps,
+                    onChange: (v) => {
+                      setPendingPadding(v);
+                      liveApply("padding", v);
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  SpaceCard,
+                  {
+                    title: "\u5916\u8FB9\u8DDD",
+                    variant: "margin",
+                    value: pendingMargin || marginVal,
+                    spaceSteps,
+                    onChange: (v) => {
+                      setPendingMargin(v);
+                      liveApply("margin", v);
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  SpaceCard,
+                  {
+                    title: "\u5143\u7D20\u95F4\u8DDD",
+                    variant: "gap",
+                    value: pendingGap || gapVal,
+                    spaceSteps,
+                    onChange: (v) => {
+                      setPendingGap(v);
+                      liveApply("gap", v);
+                    }
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "di-section", children: [
+              /* @__PURE__ */ jsx2("div", { className: "di-section-title", children: "\u672C\u6B21\u4FEE\u6539\u5185\u5BB9" }),
+              /* @__PURE__ */ jsxs("div", { className: "di-inbox-summary", children: [
+                /* @__PURE__ */ jsxs("div", { className: "di-inbox-pill", children: [
+                  "\u5DF2\u8BB0\u5F55 ",
+                  styleIntentSummary.pendingCount
+                ] }),
+                (() => {
+                  const currentChanges = getPendingChangeRecords();
+                  if (currentChanges.length === 0) return null;
+                  const el = selectedRef.current;
+                  const targetClasses = el ? getClasses(el) : [];
+                  const targetLabel = el ? targetClasses.length ? `${el.tagName.toLowerCase()}.${targetClasses.join(".")}` : el.tagName.toLowerCase() : "\u5F53\u524D\u5BF9\u8C61";
+                  return /* @__PURE__ */ jsx2("div", { className: "di-inbox-list", children: /* @__PURE__ */ jsxs("div", { className: "di-inbox-card di-inbox-card--draft", children: [
+                    /* @__PURE__ */ jsx2("div", { className: "di-inbox-card-head", children: /* @__PURE__ */ jsx2("div", { className: "di-inbox-target", children: targetLabel }) }),
+                    /* @__PURE__ */ jsx2("ol", { className: "di-inbox-change-list", children: currentChanges.map((change, idx) => /* @__PURE__ */ jsx2("li", { className: "di-inbox-change-item", children: /* @__PURE__ */ jsxs("span", { className: "di-inbox-change-text", children: [
+                      idx + 1,
+                      ". ",
+                      getChangeLabel(change.prop),
+                      "\uFF1A",
+                      change.from,
+                      " \u2192 ",
+                      change.val
+                    ] }) }, `current-${change.prop}-${idx}`)) })
+                  ] }) });
+                })(),
+                styleIntentSummary.pendingEntries.length > 0 ? /* @__PURE__ */ jsx2("div", { className: "di-inbox-list", children: styleIntentSummary.pendingEntries.map((entry) => /* @__PURE__ */ jsxs("div", { className: "di-inbox-card", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "di-inbox-card-head", children: [
+                    /* @__PURE__ */ jsx2("div", { className: "di-inbox-target", children: entry.targetLabel || entry.selector || "\u672A\u547D\u540D\u5BF9\u8C61" }),
+                    /* @__PURE__ */ jsx2("button", { className: "di-inbox-delete", onClick: () => handleDeleteStyleIntent(entry.id), children: "\u5220\u9664\u5BF9\u8C61" })
+                  ] }),
+                  entry.note ? /* @__PURE__ */ jsx2("div", { className: "di-inbox-note", children: entry.note }) : null,
+                  /* @__PURE__ */ jsx2("ol", { className: "di-inbox-change-list", children: entry.entries.flatMap((group) => group.changes.map((change) => ({ selector: group.selector, ...change }))).map((change, idx) => /* @__PURE__ */ jsxs("li", { className: "di-inbox-change-item", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "di-inbox-change-text", children: [
+                      idx + 1,
+                      ". ",
+                      getChangeLabel(change.prop),
+                      "\uFF1A",
+                      change.from ? `${change.from} \u2192 ` : "",
+                      change.val
+                    ] }),
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        className: "di-inbox-delete di-inbox-delete--mini",
+                        onClick: () => handleDeleteStyleIntent(entry.id, change.selector, change.prop),
+                        children: "\u5220\u9664"
+                      }
+                    )
+                  ] }, `${entry.id}-${change.selector}-${change.prop}-${idx}`)) })
+                ] }, entry.id)) }) : /* @__PURE__ */ jsx2("div", { className: "di-empty", children: "\u8FD8\u6CA1\u6709\u8BB0\u5F55\u7684\u4FEE\u6539" })
+              ] })
+            ] })
+          ] }),
+          (() => {
+            const hasPending = Object.keys(pendingColors).length > 0 || !!pendingTextColor || !!pendingRadius || !!pendingShadow || !!pendingBorderColor || !!pendingBorderWidth || !!pendingBorderStyle || !!pendingFontSize || !!pendingFontWeight || !!pendingPadding || !!pendingMargin || !!pendingGap || !!pendingTranslate || !!pendingWidth || !!pendingHeight || !!note;
+            return /* @__PURE__ */ jsxs("div", { className: "di-foot", children: [
+              /* @__PURE__ */ jsx2("button", { className: "di-btn-cancel", onClick: handleReset, children: "\u91CD\u7F6E" }),
+              /* @__PURE__ */ jsx2("button", { className: "di-btn-cancel", onClick: () => {
+                const el = selectedRef.current;
+                if (!el) return;
+                const effectiveColors = { ...colors, ...pendingColors };
+                const pending = [
+                  ...Object.entries(effectiveColors).filter(([, v]) => v && v !== "transparent"),
+                  [pendingTextColor || textColorVal ? "color" : "", pendingTextColor || textColorVal],
+                  [pendingRadius || radiusVal ? "border-radius" : "", pendingRadius || radiusVal],
+                  [pendingShadow || (shadowVal !== "none" ? shadowVal : "") ? "box-shadow" : "", pendingShadow || (shadowVal !== "none" ? shadowVal : "")],
+                  [pendingBorderColor || borderColorVal ? "border-color" : "", pendingBorderColor || borderColorVal],
+                  [pendingBorderWidth || (borderWidthVal !== "0px" ? borderWidthVal : "") ? "border-width" : "", pendingBorderWidth || borderWidthVal],
+                  [pendingBorderStyle || (borderStyleVal !== "none" ? borderStyleVal : "") ? "border-style" : "", pendingBorderStyle || borderStyleVal],
+                  [pendingFontSize || fontSizeVal ? "font-size" : "", pendingFontSize || fontSizeVal],
+                  [pendingFontWeight || fontWeightVal ? "font-weight" : "", pendingFontWeight || fontWeightVal],
+                  [pendingPadding || (paddingVal !== "0px" ? paddingVal : "") ? "padding" : "", pendingPadding || paddingVal],
+                  [pendingMargin || (marginVal !== "0px" ? marginVal : "") ? "margin" : "", pendingMargin || marginVal],
+                  [pendingGap || (gapVal !== "0px" ? gapVal : "") ? "gap" : "", pendingGap || gapVal],
+                  [pendingWidth || widthVal ? "width" : "", pendingWidth || widthVal],
+                  [pendingHeight || heightVal ? "height" : "", pendingHeight || heightVal]
+                ].filter(([k, v]) => k && v);
+                const selector = getSelectorForScope(el, scope);
+                const css = pending.length > 0 ? `${selector} {
+${pending.map(([p, v]) => `  ${p}: ${v};`).join("\n")}
+}` : `/* ${selector} \u2014 \u6682\u65E0\u6539\u52A8 */`;
+                const ta = document.createElement("textarea");
+                ta.value = css;
+                ta.style.cssText = "position:fixed;opacity:0;top:0;left:0";
+                document.body.appendChild(ta);
+                ta.select();
+                document.execCommand("copy");
+                document.body.removeChild(ta);
+                _copiedStyles = pending.map(([p, v]) => ({ prop: p, val: v }));
+                setHasCopied(true);
+                setCopyMsg("\u5DF2\u590D\u5236 \u2713");
+                setTimeout(() => setCopyMsg(""), 1500);
+              }, children: copyMsg || "\u590D\u5236\u6837\u5F0F" }),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  className: "di-btn-save",
+                  onClick: handleSubmitToAi,
+                  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"
+                }
+              )
+            ] });
+          })(),
+          hasCopied && /* @__PURE__ */ jsx2("div", { className: "di-paste-bar", children: /* @__PURE__ */ jsxs("button", { className: "di-btn-paste", onClick: () => {
+            _copiedStyles.forEach(({ prop, val }) => {
+              if (prop === "background-color" || prop === "background")
+                setPendingColors((prev) => ({ ...prev, [prop]: val }));
+              else if (prop === "color") setPendingTextColor(val);
+              else if (prop === "border-radius") setPendingRadius(val);
+              else if (prop === "box-shadow") setPendingShadow(val);
+              else if (prop === "border-color") setPendingBorderColor(val);
+              else if (prop === "border-width") setPendingBorderWidth(val);
+              else if (prop === "border-style") setPendingBorderStyle(val);
+              else if (prop === "font-size") setPendingFontSize(val);
+              else if (prop === "font-weight") setPendingFontWeight(val);
+              else if (prop === "padding") setPendingPadding(val);
+              else if (prop === "margin") setPendingMargin(val);
+              else if (prop === "gap") setPendingGap(val);
+              else if (prop === "width") setPendingWidth(val);
+              else if (prop === "height") setPendingHeight(val);
+            });
+            applyToDOM(_copiedStyles);
+          }, children: [
+            "\u7C98\u8D34\u6837\u5F0F\uFF08",
+            _copiedStyles.length,
+            " \u4E2A\u5C5E\u6027\uFF09"
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+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__ */ jsx2("ul", { className: "di-dl-file-list", children: files.map((f) => /* @__PURE__ */ jsxs("li", { children: [
+    /* @__PURE__ */ jsx2("span", { className: "di-dl-file-name", children: f.name }),
+    /* @__PURE__ */ jsx2("span", { className: "di-dl-file-desc", children: f.desc })
+  ] }, f.name)) });
+}
+function DownloadButton() {
+  const { endpoints } = useDevInspectorConfig();
+  const [open, setOpen] = useState(false);
+  const [status, setStatus] = useState("idle");
+  const [filePath, setFilePath] = useState("");
+  const [details, setDetails] = useState({ code: false, product: false, design: false });
+  const [opts, setOpts] = 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("button", { className: "di-dl-btn", onClick: handleOpen, children: "\u4E0B\u8F7D" }),
+    open && /* @__PURE__ */ jsxs("div", { className: "di-dl-modal", children: [
+      /* @__PURE__ */ jsx2("div", { className: "di-dl-title", children: "\u9009\u62E9\u4E0B\u8F7D\u5185\u5BB9" }),
+      status === "packing" && /* @__PURE__ */ jsxs("div", { className: "di-dl-status", children: [
+        /* @__PURE__ */ jsx2("span", { className: "di-dl-spinner" }),
+        "\u6B63\u5728\u6253\u5305\uFF0C\u8BF7\u7A0D\u5019\u2026"
+      ] }),
+      status === "done" && /* @__PURE__ */ jsxs("div", { className: "di-dl-done", children: [
+        /* @__PURE__ */ jsx2("div", { className: "di-dl-done-check", children: "\u2713 \u5DF2\u4FDD\u5B58\u81F3\u684C\u9762" }),
+        /* @__PURE__ */ jsx2("div", { className: "di-dl-done-path", children: filePath.replace(/.*\//, "") }),
+        /* @__PURE__ */ jsx2("button", { className: "di-dl-reveal-btn", onClick: revealInFinder, children: "\u5728 Finder \u4E2D\u663E\u793A" })
+      ] }),
+      status === "error" && /* @__PURE__ */ jsx2("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__ */ jsxs(Fragment, { children: [
+        sections.map(({ key, label, files }) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "di-dl-row", children: [
+            /* @__PURE__ */ jsxs("label", { className: "di-dl-check-label", children: [
+              /* @__PURE__ */ jsx2("input", { type: "checkbox", checked: opts[key], onChange: () => toggle(key) }),
+              label
+            ] }),
+            /* @__PURE__ */ jsx2("button", { className: "di-dl-detail-btn", onClick: () => toggleDetail(key), children: details[key] ? "\u6536\u8D77" : "\u8BE6\u60C5" })
+          ] }),
+          details[key] && /* @__PURE__ */ jsx2(FileList, { files })
+        ] }, key)),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            className: "di-dl-confirm",
+            onClick: download,
+            disabled: !opts.code && !opts.product && !opts.design,
+            children: "\u4E0B\u8F7D"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function DevInspector() {
+  const [active, setActive] = useState(false);
+  const [tokenMap, setTokenMap] = useState({});
+  const [panels, setPanels] = useState([]);
+  const modalOpenRef = useRef(false);
+  useEffect(() => {
+    setTokenMap(scanTokenMap());
+  }, []);
+  useEffect(() => {
+    const fn = (e) => {
+      if (e.altKey && e.key === "i") setActive((v) => !v);
+      if (e.key === "Escape") {
+        setActive(false);
+        setPanels([]);
+      }
+    };
+    window.addEventListener("keydown", fn);
+    return () => window.removeEventListener("keydown", fn);
+  }, []);
+  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");
+        return;
+      }
+      el.classList.add("di-hover");
+    };
+    const onOut = (e) => {
+      e.target?.classList?.remove("di-hover");
+    };
+    const onClick = (e) => {
+      if (!active || modalOpenRef.current) return;
+      const el = e.target;
+      if (isInsidePanel(el)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      el.classList.remove("di-hover");
+      setPanels(
+        (prev) => prev.length === 0 ? [{ id: "main", el }] : prev.map((p, i) => i === 0 ? { ...p, el } : p)
+      );
+    };
+    document.addEventListener("mouseover", onOver, true);
+    document.addEventListener("mouseout", onOut, true);
+    document.addEventListener("click", onClick, true);
+    return () => {
+      document.removeEventListener("mouseover", onOver, true);
+      document.removeEventListener("mouseout", onOut, true);
+      document.removeEventListener("click", onClick, true);
+    };
+  }, [active]);
+  useEffect(() => {
+    if (!active) {
+      document.querySelectorAll(".di-selected,.di-hover").forEach((e) => e.classList.remove("di-selected", "di-hover"));
+    }
+  }, [active]);
+  useEffect(() => {
+    document.body.style.cursor = active ? "crosshair" : "";
+    return () => {
+      document.body.style.cursor = "";
+    };
+  }, [active]);
+  const primaryEl = panels[0]?.el;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(DownloadButton, {}),
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        className: `di-trigger${active ? " di-trigger--on" : ""}`,
+        onClick: () => {
+          setActive((v) => !v);
+          if (active) setPanels([]);
+        },
+        title: "Dev Inspector (Alt+I)",
+        children: active ? "\u9000\u51FA" : "\u7F16\u8F91"
+      }
+    ),
+    active && primaryEl && (() => {
+      const rect = primaryEl.getBoundingClientRect();
+      const classes = getClasses(primaryEl);
+      return /* @__PURE__ */ jsxs("div", { className: "di-label", style: { top: rect.top - 34, left: rect.left + rect.width / 2 }, children: [
+        "\u5DF2\u9009\u4E2D ",
+        classes[0] ?? primaryEl.tagName.toLowerCase()
+      ] });
+    })(),
+    panels.map((p) => /* @__PURE__ */ jsx2(
+      InspectorPanel,
+      {
+        targetEl: p.el,
+        tokenMap,
+        onTokenMapUpdate: (updates) => setTokenMap((prev) => ({ ...prev, ...updates })),
+        onClose: () => setPanels((prev) => prev.filter((x) => x.id !== p.id))
+      },
+      p.id
+    ))
+  ] });
+}
+
+// src/mount.tsx
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function mountDevInspector(config) {
+  const resolved = mergeDevInspectorConfig(config);
+  const existingRoot = document.getElementById(resolved.rootId);
+  if (existingRoot) return existingRoot;
+  const devRoot = document.createElement("div");
+  devRoot.id = resolved.rootId;
+  document.body.appendChild(devRoot);
+  createRoot(devRoot).render(
+    /* @__PURE__ */ jsx3(StrictMode, { children: /* @__PURE__ */ jsx3(DevInspectorProvider, { config: resolved, children: /* @__PURE__ */ jsx3(DevInspector, {}) }) })
+  );
+  return devRoot;
+}
+export {
+  DevInspector,
+  DevInspectorProvider,
+  InspectorPanel,
+  defaultDevInspectorConfig,
+  mergeDevInspectorConfig,
+  mountDevInspector,
+  useDevInspectorConfig
+};
+//# sourceMappingURL=index.js.map