@dwntgrnd/devlens 0.1.0

package/dist/DevLensDrawer-VWGWB7ZJ.mjs

@@ -0,0 +1,4569 @@
+"use client";
+import {
+  useDevLensConfig
+} from "./chunk-LWQVUC3L.mjs";
+
+// src/components/DevLensDrawer.tsx
+import { useEffect as useEffect12, useMemo as useMemo9, useState as useState17 } from "react";
+import {
+  Palette,
+  X,
+  PanelLeft,
+  PanelRight,
+  PanelBottom,
+  ExternalLink,
+  FileCode,
+  MousePointer as MousePointer2
+} from "lucide-react";
+
+// src/hooks/use-token-editor.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// src/config/token-groups.ts
+var TOKEN_GROUPS = [
+  "Brand Colors",
+  "Semantic Colors",
+  "Surfaces",
+  "Text Colors",
+  "Borders",
+  "Navigation",
+  "Modular Type Scale",
+  "Typography Scale",
+  "Spacing & Layout",
+  "Shadows"
+];
+
+// src/core/token-registry.ts
+function buildRegistry(detected, overrides) {
+  const registry = {};
+  for (const [name, token] of detected) {
+    registry[name] = {
+      name,
+      label: token.label,
+      group: token.group,
+      type: token.type,
+      value: token.value
+    };
+  }
+  if (overrides) {
+    for (const [name, override] of Object.entries(overrides)) {
+      const existing = registry[name];
+      if (existing) {
+        if (override.label) existing.label = override.label;
+        if (override.group) existing.group = override.group;
+        if (override.type) existing.type = override.type;
+        if (override.hint) existing.hint = override.hint;
+        if (override.usedBy) existing.usedBy = override.usedBy;
+        if (override.hidden !== void 0) existing.hidden = override.hidden;
+        if (override.managedByScale !== void 0) existing.managedByScale = override.managedByScale;
+      } else {
+        registry[name] = {
+          name,
+          label: override.label ?? name.replace(/^--/, "").replace(/-/g, " "),
+          group: override.group ?? "Other",
+          type: override.type ?? "other",
+          value: "",
+          hint: override.hint,
+          usedBy: override.usedBy,
+          hidden: override.hidden,
+          managedByScale: override.managedByScale
+        };
+      }
+    }
+  }
+  return registry;
+}
+function getTokensByGroup(registry, extraGroups) {
+  const allGroups = [...TOKEN_GROUPS];
+  if (extraGroups) {
+    for (const g of extraGroups) {
+      if (!allGroups.includes(g)) allGroups.push(g);
+    }
+  }
+  const grouped = /* @__PURE__ */ new Map();
+  for (const token of Object.values(registry)) {
+    if (token.hidden) continue;
+    const list = grouped.get(token.group) ?? [];
+    list.push(token);
+    grouped.set(token.group, list);
+  }
+  const result = [];
+  for (const group of allGroups) {
+    const tokens = grouped.get(group);
+    if (tokens && tokens.length > 0) {
+      result.push({ group, tokens });
+    }
+  }
+  for (const [group, tokens] of grouped) {
+    if (!allGroups.includes(group) && tokens.length > 0) {
+      result.push({ group, tokens });
+    }
+  }
+  return result;
+}
+
+// src/core/auto-detect.ts
+var EXCLUDED_PREFIXES = [
+  "--tw-",
+  "--next-",
+  "--webkit-",
+  "--moz-",
+  "--color-",
+  "--text-",
+  "--font-heading",
+  "--font-body",
+  "--font-mono",
+  "--spacing-",
+  "--container-"
+];
+function getAllCustomProperties() {
+  const props = /* @__PURE__ */ new Map();
+  const computed = getComputedStyle(document.documentElement);
+  for (let i = 0; i < document.styleSheets.length; i++) {
+    try {
+      const sheet = document.styleSheets[i];
+      const rules = sheet.cssRules;
+      for (let j = 0; j < rules.length; j++) {
+        const rule = rules[j];
+        if (rule instanceof CSSStyleRule && rule.selectorText === ":root") {
+          for (let k = 0; k < rule.style.length; k++) {
+            const name = rule.style[k];
+            if (name.startsWith("--")) {
+              props.set(name, "");
+            }
+          }
+        }
+      }
+    } catch {
+    }
+  }
+  for (const name of props.keys()) {
+    const value = computed.getPropertyValue(name).trim();
+    if (value && value !== "initial") {
+      props.set(name, value);
+    } else {
+      props.delete(name);
+    }
+  }
+  for (const name of Array.from(props.keys())) {
+    if (EXCLUDED_PREFIXES.some((prefix) => name.startsWith(prefix))) {
+      props.delete(name);
+    }
+  }
+  return props;
+}
+var HSL_PATTERN = /^\d{1,3}(\.\d+)?\s+\d{1,3}(\.\d+)?%\s+\d{1,3}(\.\d+)?%$/;
+var LENGTH_PATTERN = /^-?[\d.]+\s*(px|rem|em|vh|vw|%)$/;
+function inferType(name, value) {
+  if (HSL_PATTERN.test(value)) return "hsl-color";
+  if ((name.includes("font") || name.includes("size")) && LENGTH_PATTERN.test(value)) return "font-size";
+  if (LENGTH_PATTERN.test(value)) return "length";
+  if (value.includes("rgb") && /\d+px/.test(value)) return "shadow";
+  return "other";
+}
+function inferGroup(name, type) {
+  if (name.includes("brand")) return "Brand Colors";
+  if (name.includes("sidebar") || name.includes("topbar")) return "Navigation";
+  if (name.includes("surface") || name.includes("emphasis-surface")) return "Surfaces";
+  if (name.includes("border")) return "Borders";
+  if (name.includes("foreground-secondary") || name.includes("foreground-tertiary")) return "Text Colors";
+  if (name.includes("font-size-") || name === "--font-base") return "Modular Type Scale";
+  if (name.includes("shadow")) return "Shadows";
+  if (name.includes("radius") || name.includes("height") || name.includes("width") || name.includes("spacing")) return "Spacing & Layout";
+  if (type === "hsl-color") return "Semantic Colors";
+  if (type === "font-size") return "Modular Type Scale";
+  if (type === "length") return "Spacing & Layout";
+  if (type === "shadow") return "Shadows";
+  return "Other";
+}
+function generateLabel(cssVar) {
+  return cssVar.replace(/^--/, "").split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+function autoDetectTokens() {
+  const properties = getAllCustomProperties();
+  const result = /* @__PURE__ */ new Map();
+  for (const [name, value] of properties) {
+    const type = inferType(name, value);
+    const group = inferGroup(name, type);
+    const label = generateLabel(name);
+    result.set(name, { label, group, type, value });
+  }
+  return result;
+}
+
+// src/hooks/use-token-editor.ts
+function useTokenEditor() {
+  const { namespace, tokenOverrides } = useDevLensConfig();
+  const channelName = `${namespace}-token-editor`;
+  const [state, setState] = useState({
+    changes: /* @__PURE__ */ new Map(),
+    defaults: /* @__PURE__ */ new Map(),
+    registry: {}
+  });
+  const channelRef = useRef(null);
+  const scaleMetadataRef = useRef(null);
+  const registryRef = useRef({});
+  useEffect(() => {
+    const detected = autoDetectTokens();
+    const registry = buildRegistry(detected, tokenOverrides);
+    registryRef.current = registry;
+    const defaults = /* @__PURE__ */ new Map();
+    for (const token of Object.values(registry)) {
+      defaults.set(token.name, token.value);
+    }
+    setState((prev) => ({ ...prev, defaults, registry }));
+  }, [tokenOverrides]);
+  useEffect(() => {
+    const channel = new BroadcastChannel(channelName);
+    channelRef.current = channel;
+    channel.onmessage = (event) => {
+      const { type, cssVar, value } = event.data;
+      if (type === "update") {
+        document.documentElement.style.setProperty(cssVar, value);
+        setState((prev) => {
+          const changes = new Map(prev.changes);
+          changes.set(cssVar, value);
+          return { ...prev, changes };
+        });
+      } else if (type === "reset") {
+        document.documentElement.style.removeProperty(cssVar);
+        setState((prev) => {
+          const changes = new Map(prev.changes);
+          changes.delete(cssVar);
+          return { ...prev, changes };
+        });
+      } else if (type === "reset-all") {
+        for (const token of Object.values(registryRef.current)) {
+          document.documentElement.style.removeProperty(token.name);
+        }
+        setState((prev) => ({ ...prev, changes: /* @__PURE__ */ new Map() }));
+      }
+    };
+    return () => {
+      channel.close();
+      channelRef.current = null;
+    };
+  }, [channelName]);
+  const broadcast = useCallback(
+    (data) => {
+      channelRef.current?.postMessage(data);
+    },
+    []
+  );
+  const updateToken = useCallback(
+    (cssVar, value) => {
+      document.documentElement.style.setProperty(cssVar, value);
+      setState((prev) => {
+        const changes = new Map(prev.changes);
+        changes.set(cssVar, value);
+        return { ...prev, changes };
+      });
+      broadcast({ type: "update", cssVar, value });
+    },
+    [broadcast]
+  );
+  const resetToken = useCallback(
+    (cssVar) => {
+      document.documentElement.style.removeProperty(cssVar);
+      setState((prev) => {
+        const changes = new Map(prev.changes);
+        changes.delete(cssVar);
+        return { ...prev, changes };
+      });
+      broadcast({ type: "reset", cssVar, value: "" });
+    },
+    [broadcast]
+  );
+  const resetAll = useCallback(() => {
+    for (const token of Object.values(registryRef.current)) {
+      document.documentElement.style.removeProperty(token.name);
+    }
+    setState((prev) => ({ ...prev, changes: /* @__PURE__ */ new Map() }));
+    broadcast({ type: "reset-all", cssVar: "", value: "" });
+  }, [broadcast]);
+  const getCurrentValue = useCallback(
+    (cssVar) => {
+      return state.changes.get(cssVar) ?? state.defaults.get(cssVar) ?? "";
+    },
+    [state.changes, state.defaults]
+  );
+  const isModified = useCallback(
+    (cssVar) => {
+      return state.changes.has(cssVar);
+    },
+    [state.changes]
+  );
+  const getChangeCount = useCallback(() => {
+    return state.changes.size;
+  }, [state.changes]);
+  const getGroupChangeCount = useCallback(
+    (groupTokens) => {
+      return groupTokens.filter((t) => state.changes.has(t.name)).length;
+    },
+    [state.changes]
+  );
+  const setScaleMetadata = useCallback((meta) => {
+    scaleMetadataRef.current = meta;
+  }, []);
+  const generateDiff = useCallback(() => {
+    if (state.changes.size === 0) return "No changes.";
+    const lines = [];
+    lines.push("| Variable | Original | New |");
+    lines.push("|----------|----------|-----|");
+    for (const [cssVar, newVal] of state.changes) {
+      const original = state.defaults.get(cssVar) ?? "(unknown)";
+      lines.push(`| \`${cssVar}\` | \`${original}\` | \`${newVal}\` |`);
+    }
+    lines.push("");
+    lines.push("```css");
+    const hasFontChanges = Array.from(state.changes.keys()).some(
+      (k) => k === "--font-base" || k.startsWith("--font-size-")
+    );
+    if (hasFontChanges && scaleMetadataRef.current) {
+      const { base, ratio, ratioLabel } = scaleMetadataRef.current;
+      lines.push(`/* Modular scale: base ${base}px, ratio ${ratio} (${ratioLabel}) */`);
+    }
+    lines.push(":root {");
+    for (const [cssVar, newVal] of state.changes) {
+      lines.push(`  ${cssVar}: ${newVal};`);
+    }
+    lines.push("}");
+    lines.push("```");
+    return lines.join("\n");
+  }, [state.changes, state.defaults]);
+  return {
+    updateToken,
+    resetToken,
+    resetAll,
+    getCurrentValue,
+    isModified,
+    getChangeCount,
+    getGroupChangeCount,
+    generateDiff,
+    setScaleMetadata,
+    changes: state.changes,
+    registry: state.registry
+  };
+}
+
+// src/hooks/use-dock-position.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
+function readStorage(key, fallback) {
+  if (typeof window === "undefined") return fallback;
+  try {
+    const stored = localStorage.getItem(key);
+    return stored ? JSON.parse(stored) : fallback;
+  } catch {
+    return fallback;
+  }
+}
+function useDockPosition() {
+  const { namespace } = useDevLensConfig();
+  const DOCK_KEY = `${namespace}-dock`;
+  const OPEN_KEY = `${namespace}-open`;
+  const [dock, setDockState] = useState2("right");
+  const [isOpen, setIsOpenState] = useState2(false);
+  useEffect2(() => {
+    setDockState(readStorage(DOCK_KEY, "right"));
+    setIsOpenState(readStorage(OPEN_KEY, false));
+  }, [DOCK_KEY, OPEN_KEY]);
+  const setDock = useCallback2((pos) => {
+    setDockState(pos);
+    localStorage.setItem(DOCK_KEY, JSON.stringify(pos));
+  }, [DOCK_KEY]);
+  const setIsOpen = useCallback2((open) => {
+    setIsOpenState(open);
+    localStorage.setItem(OPEN_KEY, JSON.stringify(open));
+  }, [OPEN_KEY]);
+  const toggle = useCallback2(() => {
+    setIsOpen(!isOpen);
+  }, [isOpen, setIsOpen]);
+  return { dock, setDock, isOpen, setIsOpen, toggle };
+}
+
+// src/hooks/use-detached-window.ts
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+function useDetachedWindow() {
+  const { namespace, detachedRoute } = useDevLensConfig();
+  const windowName = `${namespace}-detached`;
+  const windowRef = useRef2(null);
+  const [isDetached, setIsDetached] = useState3(false);
+  const pollRef = useRef2(null);
+  const detach = useCallback3(() => {
+    if (windowRef.current && !windowRef.current.closed) {
+      windowRef.current.focus();
+      return;
+    }
+    const popup = window.open(
+      detachedRoute,
+      windowName,
+      "width=380,height=700,menubar=no,toolbar=no,location=no,status=no"
+    );
+    if (popup) {
+      windowRef.current = popup;
+      setIsDetached(true);
+    }
+  }, [detachedRoute, windowName]);
+  const reattach = useCallback3(() => {
+    if (windowRef.current && !windowRef.current.closed) {
+      windowRef.current.close();
+    }
+    windowRef.current = null;
+    setIsDetached(false);
+  }, []);
+  useEffect3(() => {
+    if (isDetached) {
+      pollRef.current = setInterval(() => {
+        if (windowRef.current?.closed) {
+          windowRef.current = null;
+          setIsDetached(false);
+        }
+      }, 500);
+    }
+    return () => {
+      if (pollRef.current) {
+        clearInterval(pollRef.current);
+        pollRef.current = null;
+      }
+    };
+  }, [isDetached]);
+  useEffect3(() => {
+    return () => {
+      if (windowRef.current && !windowRef.current.closed) {
+        windowRef.current.close();
+      }
+    };
+  }, []);
+  return { isDetached, detach, reattach };
+}
+
+// src/components/Accordion.tsx
+import {
+  createContext,
+  useContext,
+  useState as useState4,
+  useRef as useRef3,
+  useCallback as useCallback4,
+  useEffect as useEffect4
+} from "react";
+import { ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AccordionContext = createContext({
+  openItem: null,
+  toggle: () => {
+  },
+  collapsible: true
+});
+function Accordion({
+  collapsible = false,
+  className,
+  children
+}) {
+  const [openItem, setOpenItem] = useState4(null);
+  const toggle = useCallback4(
+    (value) => {
+      setOpenItem((prev) => {
+        if (prev === value) return collapsible ? null : prev;
+        return value;
+      });
+    },
+    [collapsible]
+  );
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { openItem, toggle, collapsible }, children: /* @__PURE__ */ jsx("div", { className, "data-state": openItem ? "open" : "closed", children }) });
+}
+var ItemContext = createContext({
+  value: "",
+  isOpen: false
+});
+function AccordionItem({ value, className, children }) {
+  const { openItem } = useContext(AccordionContext);
+  const isOpen = openItem === value;
+  return /* @__PURE__ */ jsx(ItemContext.Provider, { value: { value, isOpen }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      "data-state": isOpen ? "open" : "closed",
+      children
+    }
+  ) });
+}
+function AccordionTrigger({ className, children }) {
+  const { toggle } = useContext(AccordionContext);
+  const { value, isOpen } = useContext(ItemContext);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-expanded": isOpen,
+      className,
+      "data-state": isOpen ? "open" : "closed",
+      onClick: () => toggle(value),
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        width: "100%",
+        background: "none",
+        border: "none",
+        cursor: "pointer",
+        textAlign: "left"
+      },
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            size: 14,
+            style: {
+              transition: "transform 200ms ease",
+              transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
+              flexShrink: 0
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function AccordionContent({ className, children }) {
+  const { isOpen } = useContext(ItemContext);
+  const ref = useRef3(null);
+  const [height, setHeight] = useState4(void 0);
+  const [mounted, setMounted] = useState4(false);
+  useEffect4(() => {
+    setMounted(true);
+  }, []);
+  useEffect4(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (isOpen) {
+      setHeight(el.scrollHeight);
+    } else {
+      setHeight(el.scrollHeight);
+      requestAnimationFrame(() => {
+        setHeight(0);
+      });
+    }
+  }, [isOpen]);
+  const handleTransitionEnd = () => {
+    if (isOpen) {
+      setHeight(void 0);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className,
+      "data-state": isOpen ? "open" : "closed",
+      style: {
+        overflow: "hidden",
+        height: !mounted ? isOpen ? "auto" : 0 : height === void 0 ? "auto" : height,
+        transition: mounted ? "height 200ms ease" : "none"
+      },
+      onTransitionEnd: handleTransitionEnd,
+      children
+    }
+  );
+}
+
+// src/components/HslColorControl.tsx
+import { useCallback as useCallback5, useMemo } from "react";
+import { RotateCcw, Copy } from "lucide-react";
+
+// src/core/color-utils.ts
+function parseHslString(raw) {
+  const cleaned = raw.trim();
+  const match = cleaned.match(
+    /^(?:hsl\()?\s*(\d+(?:\.\d+)?)\s*[,\s]\s*(\d+(?:\.\d+)?)%?\s*[,\s]\s*(\d+(?:\.\d+)?)%?\s*\)?$/
+  );
+  if (!match) return null;
+  return {
+    h: parseFloat(match[1]),
+    s: parseFloat(match[2]),
+    l: parseFloat(match[3])
+  };
+}
+function formatHslString(hsl) {
+  return `${Math.round(hsl.h)} ${Math.round(hsl.s)}% ${Math.round(hsl.l)}%`;
+}
+function hslToHex(h, s, l) {
+  const sNorm = s / 100;
+  const lNorm = l / 100;
+  const c = (1 - Math.abs(2 * lNorm - 1)) * sNorm;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = lNorm - c / 2;
+  let r = 0, g = 0, b = 0;
+  if (h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  const toHex = (v) => Math.round((v + m) * 255).toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function hexToHsl(hex) {
+  const clean = hex.replace("#", "");
+  const r = parseInt(clean.substring(0, 2), 16) / 255;
+  const g = parseInt(clean.substring(2, 4), 16) / 255;
+  const b = parseInt(clean.substring(4, 6), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  const d = max - min;
+  if (d === 0) {
+    return { h: 0, s: 0, l: Math.round(l * 100) };
+  }
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h = 0;
+  if (max === r) {
+    h = ((g - b) / d + (g < b ? 6 : 0)) * 60;
+  } else if (max === g) {
+    h = ((b - r) / d + 2) * 60;
+  } else {
+    h = ((r - g) / d + 4) * 60;
+  }
+  return {
+    h: Math.round(h),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100)
+  };
+}
+
+// src/components/HslColorControl.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function HslColorControl({
+  label,
+  value,
+  isModified,
+  onChange,
+  onReset
+}) {
+  const hsl = useMemo(() => parseHslString(value), [value]);
+  const hex = useMemo(() => {
+    if (!hsl) return "#888888";
+    return hslToHex(hsl.h, hsl.s, hsl.l);
+  }, [hsl]);
+  const handleSliderChange = useCallback5(
+    (channel, rawValue) => {
+      if (!hsl) return;
+      const updated = { ...hsl, [channel]: parseFloat(rawValue) };
+      onChange(formatHslString(updated));
+    },
+    [hsl, onChange]
+  );
+  const handleHexChange = useCallback5(
+    (hexInput) => {
+      if (/^#[0-9a-fA-F]{6}$/.test(hexInput)) {
+        const converted = hexToHsl(hexInput);
+        onChange(formatHslString(converted));
+      }
+    },
+    [onChange]
+  );
+  const copyHsl = useCallback5(() => {
+    navigator.clipboard.writeText(value);
+  }, [value]);
+  if (!hsl) {
+    return /* @__PURE__ */ jsxs2("div", { className: "te-control", children: [
+      /* @__PURE__ */ jsx2("span", { className: "te-label", children: label }),
+      /* @__PURE__ */ jsxs2("span", { className: "te-muted", children: [
+        "Invalid HSL: ",
+        value
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: "te-control", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "te-control-header", children: [
+      /* @__PURE__ */ jsxs2("span", { className: "te-label", children: [
+        label,
+        isModified && /* @__PURE__ */ jsx2("span", { className: "te-modified-dot" })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "te-control-actions", children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: "te-icon-btn",
+            onClick: copyHsl,
+            title: "Copy HSL value",
+            children: /* @__PURE__ */ jsx2(Copy, { size: 12 })
+          }
+        ),
+        isModified && /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: "te-icon-btn te-reset-btn",
+            onClick: onReset,
+            title: "Reset to default",
+            children: /* @__PURE__ */ jsx2(RotateCcw, { size: 12 })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "te-color-row", children: [
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "color",
+          value: hex,
+          onChange: (e) => handleHexChange(e.target.value),
+          className: "te-color-swatch"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "text",
+          value: hex,
+          onChange: (e) => handleHexChange(e.target.value),
+          className: "te-text-input te-hex-input",
+          spellCheck: false
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "te-slider-group", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "te-slider-row", children: [
+        /* @__PURE__ */ jsx2("span", { className: "te-slider-label", children: "H" }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            type: "range",
+            min: 0,
+            max: 360,
+            value: hsl.h,
+            onChange: (e) => handleSliderChange("h", e.target.value),
+            className: "te-slider"
+          }
+        ),
+        /* @__PURE__ */ jsx2("span", { className: "te-slider-value", children: Math.round(hsl.h) })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "te-slider-row", children: [
+        /* @__PURE__ */ jsx2("span", { className: "te-slider-label", children: "S" }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            type: "range",
+            min: 0,
+            max: 100,
+            value: hsl.s,
+            onChange: (e) => handleSliderChange("s", e.target.value),
+            className: "te-slider"
+          }
+        ),
+        /* @__PURE__ */ jsxs2("span", { className: "te-slider-value", children: [
+          Math.round(hsl.s),
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "te-slider-row", children: [
+        /* @__PURE__ */ jsx2("span", { className: "te-slider-label", children: "L" }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            type: "range",
+            min: 0,
+            max: 100,
+            value: hsl.l,
+            onChange: (e) => handleSliderChange("l", e.target.value),
+            className: "te-slider"
+          }
+        ),
+        /* @__PURE__ */ jsxs2("span", { className: "te-slider-value", children: [
+          Math.round(hsl.l),
+          "%"
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/LengthControl.tsx
+import { useCallback as useCallback6, useMemo as useMemo2 } from "react";
+import { RotateCcw as RotateCcw2 } from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function parseLength(raw) {
+  const match = raw.trim().match(/^([\d.]+)\s*(px|rem|em|%)$/);
+  if (match) {
+    return { num: parseFloat(match[1]), unit: match[2] };
+  }
+  const num = parseFloat(raw);
+  if (!isNaN(num)) {
+    return { num, unit: "px" };
+  }
+  return { num: 16, unit: "px" };
+}
+function LengthControl({
+  label,
+  value,
+  isModified,
+  onChange,
+  onReset,
+  isFontSize
+}) {
+  const parsed = useMemo2(() => parseLength(value), [value]);
+  const maxRange = useMemo2(() => {
+    if (isFontSize) return parsed.unit === "rem" ? 4 : 64;
+    if (parsed.unit === "rem") return 120;
+    return 2e3;
+  }, [isFontSize, parsed.unit]);
+  const step = parsed.unit === "rem" ? 0.125 : 1;
+  const handleNumChange = useCallback6(
+    (rawValue) => {
+      const num = parseFloat(rawValue);
+      if (!isNaN(num)) {
+        onChange(`${num}${parsed.unit}`);
+      }
+    },
+    [onChange, parsed.unit]
+  );
+  const handleUnitChange = useCallback6(
+    (newUnit) => {
+      let converted = parsed.num;
+      if (parsed.unit === "px" && newUnit === "rem") {
+        converted = parseFloat((parsed.num / 16).toFixed(3));
+      } else if (parsed.unit === "rem" && newUnit === "px") {
+        converted = Math.round(parsed.num * 16);
+      }
+      onChange(`${converted}${newUnit}`);
+    },
+    [onChange, parsed]
+  );
+  return /* @__PURE__ */ jsxs3("div", { className: "te-control", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "te-control-header", children: [
+      /* @__PURE__ */ jsxs3("span", { className: "te-label", children: [
+        label,
+        isModified && /* @__PURE__ */ jsx3("span", { className: "te-modified-dot" })
+      ] }),
+      isModified && /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: "te-icon-btn te-reset-btn",
+          onClick: onReset,
+          title: "Reset to default",
+          children: /* @__PURE__ */ jsx3(RotateCcw2, { size: 12 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "te-length-row", children: [
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          type: "number",
+          value: parsed.num,
+          onChange: (e) => handleNumChange(e.target.value),
+          step,
+          min: 0,
+          className: "te-text-input te-num-input"
+        }
+      ),
+      /* @__PURE__ */ jsxs3(
+        "select",
+        {
+          value: parsed.unit,
+          onChange: (e) => handleUnitChange(e.target.value),
+          className: "te-select",
+          children: [
+            /* @__PURE__ */ jsx3("option", { value: "px", children: "px" }),
+            /* @__PURE__ */ jsx3("option", { value: "rem", children: "rem" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        type: "range",
+        min: 0,
+        max: maxRange,
+        step,
+        value: parsed.num,
+        onChange: (e) => handleNumChange(e.target.value),
+        className: "te-slider te-slider-full"
+      }
+    ),
+    isFontSize && /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: "te-font-preview",
+        style: { fontSize: value },
+        children: "Aa Bb Cc 123"
+      }
+    )
+  ] });
+}
+
+// src/components/ShadowControl.tsx
+import { useCallback as useCallback7 } from "react";
+import { RotateCcw as RotateCcw3 } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var SHADOW_PRESETS = {
+  none: "none",
+  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  md: "0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05)",
+  lg: "0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.05)",
+  xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
+};
+function detectPreset(value) {
+  const trimmed = value.trim();
+  for (const [key, preset] of Object.entries(SHADOW_PRESETS)) {
+    if (trimmed === preset) return key;
+  }
+  return "custom";
+}
+function ShadowControl({
+  label,
+  value,
+  isModified,
+  onChange,
+  onReset
+}) {
+  const currentPreset = detectPreset(value);
+  const handleChange = useCallback7(
+    (preset) => {
+      const shadow = SHADOW_PRESETS[preset];
+      if (shadow) {
+        onChange(shadow);
+      }
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxs4("div", { className: "te-control", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "te-control-header", children: [
+      /* @__PURE__ */ jsxs4("span", { className: "te-label", children: [
+        label,
+        isModified && /* @__PURE__ */ jsx4("span", { className: "te-modified-dot" })
+      ] }),
+      isModified && /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: "te-icon-btn te-reset-btn",
+          onClick: onReset,
+          title: "Reset to default",
+          children: /* @__PURE__ */ jsx4(RotateCcw3, { size: 12 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs4(
+      "select",
+      {
+        value: currentPreset,
+        onChange: (e) => handleChange(e.target.value),
+        className: "te-select te-select-full",
+        children: [
+          /* @__PURE__ */ jsx4("option", { value: "none", children: "None" }),
+          /* @__PURE__ */ jsx4("option", { value: "sm", children: "Small" }),
+          /* @__PURE__ */ jsx4("option", { value: "md", children: "Medium" }),
+          /* @__PURE__ */ jsx4("option", { value: "lg", children: "Large" }),
+          /* @__PURE__ */ jsx4("option", { value: "xl", children: "Extra Large" }),
+          currentPreset === "custom" && /* @__PURE__ */ jsx4("option", { value: "custom", disabled: true, children: "Custom" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: "te-shadow-preview",
+        style: { boxShadow: value === "none" ? "none" : value }
+      }
+    )
+  ] });
+}
+
+// src/components/ModularScaleControl.tsx
+import { useCallback as useCallback8, useEffect as useEffect5, useRef as useRef4, useState as useState5 } from "react";
+import { RotateCcw as RotateCcw4 } from "lucide-react";
+
+// src/core/modular-scale.ts
+var FONT_STEPS = [
+  { cssVar: "--font-size-overline", step: -2, label: "Overline" },
+  { cssVar: "--font-size-caption", step: -1, label: "Caption" },
+  { cssVar: "--font-size-subsection-sm", step: -0.5, label: "Subsection Sm" },
+  { cssVar: "--font-size-body", step: 0, label: "Body" },
+  { cssVar: "--font-size-subsection-heading", step: 0.5, label: "Subsection" },
+  { cssVar: "--font-size-section-heading", step: 1.5, label: "Section Heading" },
+  { cssVar: "--font-size-page-title", step: 3, label: "Page Title" }
+];
+var SCALE_RATIOS = [
+  { label: "1.067 \u2014 Minor Second", value: 1.067 },
+  { label: "1.125 \u2014 Major Second", value: 1.125 },
+  { label: "1.200 \u2014 Minor Third", value: 1.2 },
+  { label: "1.250 \u2014 Major Third", value: 1.25 },
+  { label: "1.333 \u2014 Perfect Fourth", value: 1.333 },
+  { label: "1.414 \u2014 Augmented Fourth", value: 1.414 },
+  { label: "1.500 \u2014 Perfect Fifth", value: 1.5 },
+  { label: "1.618 \u2014 Golden Ratio", value: 1.618 }
+];
+function calculateScale(base, ratio, step) {
+  const size = base * Math.pow(ratio, step);
+  return `${Math.round(size * 100) / 100}px`;
+}
+function parsePx(value) {
+  return parseFloat(value.replace("px", ""));
+}
+function detectClosestRatio(base, pageTitlePx) {
+  let closest = SCALE_RATIOS[2].value;
+  let minDiff = Infinity;
+  for (const { value: ratio } of SCALE_RATIOS) {
+    const predicted = base * Math.pow(ratio, 3);
+    const diff = Math.abs(predicted - pageTitlePx);
+    if (diff < minDiff) {
+      minDiff = diff;
+      closest = ratio;
+    }
+  }
+  return closest;
+}
+
+// src/components/InspectorSwitch.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function InspectorSwitch({
+  checked,
+  onChange,
+  labelOn = "Selecting",
+  labelOff = "Select",
+  compact = false
+}) {
+  const trackSize = compact ? { width: 28, height: 16 } : { width: 36, height: 20 };
+  const thumbSize = compact ? 12 : 16;
+  const thumbOffset = compact ? 2 : 2;
+  const translateX = checked ? trackSize.width - thumbSize - thumbOffset * 2 : 0;
+  return /* @__PURE__ */ jsxs5(
+    "button",
+    {
+      type: "button",
+      className: `te-switch ${compact ? "te-switch-compact" : ""} ${checked ? "te-switch-active" : ""}`,
+      onClick: onChange,
+      role: "switch",
+      "aria-checked": checked,
+      children: [
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            className: "te-switch-track",
+            style: {
+              width: trackSize.width,
+              height: trackSize.height,
+              background: checked ? "#89b4fa" : "#313244"
+            },
+            children: /* @__PURE__ */ jsx5(
+              "span",
+              {
+                className: "te-switch-thumb",
+                style: {
+                  width: thumbSize,
+                  height: thumbSize,
+                  transform: `translateX(${translateX}px)`
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            className: "te-switch-label",
+            style: { color: checked ? "#89b4fa" : "#a6adc8" },
+            children: checked ? labelOn : labelOff
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ModularScaleControl.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function ModularScaleControl({
+  getCurrentValue,
+  isModified,
+  updateToken,
+  resetToken,
+  setScaleMetadata,
+  scaleBaseline
+}) {
+  const initializedRef = useRef4(false);
+  const [base, setBase] = useState5(() => {
+    const val = parsePx(getCurrentValue("--font-base"));
+    return isNaN(val) ? 16 : val;
+  });
+  const [ratio, setRatio] = useState5(() => {
+    const baseVal = parsePx(getCurrentValue("--font-base"));
+    const b = isNaN(baseVal) ? 16 : baseVal;
+    const ptVal = parsePx(getCurrentValue("--font-size-page-title"));
+    const pt = isNaN(ptVal) ? 24 : ptVal;
+    return detectClosestRatio(b, pt);
+  });
+  useEffect5(() => {
+    if (initializedRef.current) return;
+    const baseStr = getCurrentValue("--font-base");
+    const ptStr = getCurrentValue("--font-size-page-title");
+    if (!baseStr && !ptStr) return;
+    initializedRef.current = true;
+    const b = parsePx(baseStr) || 16;
+    const pt = parsePx(ptStr) || 24;
+    setBase(b);
+    setRatio(detectClosestRatio(b, pt));
+  }, [getCurrentValue]);
+  const applyScale = useCallback8(
+    (newBase, newRatio) => {
+      updateToken("--font-base", `${newBase}px`);
+      for (const step of FONT_STEPS) {
+        updateToken(step.cssVar, calculateScale(newBase, newRatio, step.step));
+      }
+      const ratioEntry2 = SCALE_RATIOS.find((r) => r.value === newRatio);
+      setScaleMetadata({
+        base: newBase,
+        ratio: newRatio,
+        ratioLabel: ratioEntry2?.label ?? `${newRatio}`
+      });
+    },
+    [updateToken, setScaleMetadata]
+  );
+  const handleBaseChange = useCallback8(
+    (newBase) => {
+      setBase(newBase);
+      applyScale(newBase, ratio);
+    },
+    [ratio, applyScale]
+  );
+  const handleRatioChange = useCallback8(
+    (newRatio) => {
+      setRatio(newRatio);
+      applyScale(base, newRatio);
+    },
+    [base, applyScale]
+  );
+  const handleResetAll = useCallback8(() => {
+    resetToken("--font-base");
+    for (const step of FONT_STEPS) {
+      resetToken(step.cssVar);
+    }
+  }, [resetToken]);
+  const hasModifications = isModified("--font-base") || FONT_STEPS.some((s) => isModified(s.cssVar));
+  const ratioEntry = SCALE_RATIOS.find((r) => r.value === ratio);
+  return /* @__PURE__ */ jsxs6("div", { className: "te-scale", children: [
+    /* @__PURE__ */ jsxs6("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "6px 8px",
+      marginBottom: 8,
+      background: "#181825",
+      borderRadius: 6,
+      border: "1px solid #313244"
+    }, children: [
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx6("span", { className: "te-label", style: { textTransform: "none", letterSpacing: "normal", fontSize: 12 }, children: "Scale Baseline" }),
+        /* @__PURE__ */ jsx6("span", { className: "te-muted", style: { display: "block", marginTop: 4, fontSize: 10, lineHeight: 1.3 }, children: "Applies modular scale to bare h1\u2013h6, p, small elements via CSS cascade layer. Tailwind classes override." })
+      ] }),
+      /* @__PURE__ */ jsx6(
+        InspectorSwitch,
+        {
+          checked: scaleBaseline.isActive,
+          onChange: scaleBaseline.toggle,
+          labelOn: "On",
+          labelOff: "Off",
+          compact: true
+        }
+      )
+    ] }),
+    hasModifications && /* @__PURE__ */ jsx6("div", { className: "te-scale-reset-row", children: /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        type: "button",
+        className: "te-icon-btn te-reset-btn",
+        onClick: handleResetAll,
+        title: "Reset all font sizes",
+        children: [
+          /* @__PURE__ */ jsx6(RotateCcw4, { size: 12 }),
+          /* @__PURE__ */ jsx6("span", { style: { fontSize: 11, marginLeft: 2 }, children: "Reset" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs6("div", { className: "te-scale-control-row", children: [
+      /* @__PURE__ */ jsx6("label", { className: "te-label", style: { marginBottom: 4 }, children: "Base Size" }),
+      /* @__PURE__ */ jsxs6("div", { className: "te-slider-row", children: [
+        /* @__PURE__ */ jsx6(
+          "input",
+          {
+            type: "range",
+            className: "te-slider",
+            min: 12,
+            max: 22,
+            step: 0.5,
+            value: base,
+            onChange: (e) => handleBaseChange(parseFloat(e.target.value))
+          }
+        ),
+        /* @__PURE__ */ jsxs6("span", { className: "te-slider-value", style: { width: 44 }, children: [
+          base,
+          "px"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "te-scale-control-row", style: { marginTop: 8 }, children: [
+      /* @__PURE__ */ jsx6("label", { className: "te-label", style: { marginBottom: 4 }, children: "Scale Ratio" }),
+      /* @__PURE__ */ jsx6(
+        "select",
+        {
+          className: "te-select te-select-full",
+          value: ratio,
+          onChange: (e) => handleRatioChange(parseFloat(e.target.value)),
+          children: SCALE_RATIOS.map((r) => /* @__PURE__ */ jsx6("option", { value: r.value, children: r.label }, r.value))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "te-scale-preview", style: { marginTop: 12 }, children: [
+      /* @__PURE__ */ jsxs6("div", { className: "te-scale-preview-header", children: [
+        /* @__PURE__ */ jsx6("span", { className: "te-label", children: "Preview" }),
+        /* @__PURE__ */ jsx6("span", { className: "te-muted", children: ratioEntry?.label ?? `${ratio}` })
+      ] }),
+      FONT_STEPS.slice().reverse().map((step) => {
+        const computed = calculateScale(base, ratio, step.step);
+        const px = parsePx(computed);
+        return /* @__PURE__ */ jsxs6("div", { className: "te-scale-row", children: [
+          /* @__PURE__ */ jsx6(
+            "span",
+            {
+              className: "te-scale-sample",
+              style: {
+                fontSize: `${px}px`,
+                fontFamily: "var(--devlens-preview-font, inherit)",
+                lineHeight: 1.3
+              },
+              children: step.label
+            }
+          ),
+          /* @__PURE__ */ jsxs6("span", { className: "te-scale-meta", children: [
+            /* @__PURE__ */ jsxs6("span", { className: "te-scale-px", children: [
+              Math.round(px * 10) / 10,
+              "px"
+            ] }),
+            /* @__PURE__ */ jsxs6("span", { className: "te-scale-step", children: [
+              step.step >= 0 ? "+" : "",
+              step.step
+            ] })
+          ] })
+        ] }, step.cssVar);
+      })
+    ] })
+  ] });
+}
+
+// src/components/TokenEditorControls.tsx
+import { Info } from "lucide-react";
+import { Fragment, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function TokenLabel({ label, usedBy }) {
+  if (!usedBy || usedBy.length === 0) {
+    return /* @__PURE__ */ jsx7(Fragment, { children: label });
+  }
+  return /* @__PURE__ */ jsxs7("span", { style: { display: "inline-flex", alignItems: "center", gap: 4 }, children: [
+    label,
+    /* @__PURE__ */ jsxs7("span", { className: "te-usage-hint", children: [
+      /* @__PURE__ */ jsx7(Info, { size: 10 }),
+      /* @__PURE__ */ jsx7("span", { className: "te-usage-hint-tooltip", children: usedBy.join(", ") })
+    ] })
+  ] });
+}
+function TokenEditorControls({
+  registry,
+  getCurrentValue,
+  isModified,
+  updateToken,
+  resetToken,
+  getGroupChangeCount,
+  setScaleMetadata,
+  scaleBaseline
+}) {
+  const groups = getTokensByGroup(registry);
+  return /* @__PURE__ */ jsx7(Accordion, { type: "single", collapsible: true, className: "te-accordion", children: groups.map(({ group: groupName, tokens }) => {
+    const changeCount = getGroupChangeCount(tokens);
+    if (groupName === "Modular Type Scale") {
+      return /* @__PURE__ */ jsxs7(AccordionItem, { value: groupName, className: "te-accordion-item", children: [
+        /* @__PURE__ */ jsx7(AccordionTrigger, { className: "te-accordion-trigger", children: /* @__PURE__ */ jsxs7("span", { children: [
+          "Modular Type Scale",
+          changeCount > 0 && /* @__PURE__ */ jsx7("span", { className: "te-change-badge", children: changeCount })
+        ] }) }),
+        /* @__PURE__ */ jsx7(AccordionContent, { className: "te-accordion-content", children: /* @__PURE__ */ jsx7(
+          ModularScaleControl,
+          {
+            getCurrentValue,
+            isModified,
+            updateToken,
+            resetToken,
+            setScaleMetadata,
+            scaleBaseline
+          }
+        ) })
+      ] }, groupName);
+    }
+    return /* @__PURE__ */ jsxs7(AccordionItem, { value: groupName, className: "te-accordion-item", children: [
+      /* @__PURE__ */ jsx7(AccordionTrigger, { className: "te-accordion-trigger", children: /* @__PURE__ */ jsxs7("span", { children: [
+        groupName,
+        changeCount > 0 && /* @__PURE__ */ jsx7("span", { className: "te-change-badge", children: changeCount })
+      ] }) }),
+      /* @__PURE__ */ jsx7(AccordionContent, { className: "te-accordion-content", children: /* @__PURE__ */ jsx7("div", { className: "te-token-list", children: tokens.map((token) => {
+        if (token.managedByScale && groupName !== "Modular Type Scale") {
+          const value2 = getCurrentValue(token.name);
+          return /* @__PURE__ */ jsxs7("div", { className: "te-managed-row", children: [
+            /* @__PURE__ */ jsx7("span", { className: "te-label", children: /* @__PURE__ */ jsx7(TokenLabel, { label: token.label, usedBy: token.usedBy }) }),
+            /* @__PURE__ */ jsxs7("span", { className: "te-managed-meta", children: [
+              /* @__PURE__ */ jsx7("span", { className: "te-managed-value", children: value2 || token.value }),
+              /* @__PURE__ */ jsx7("span", { className: "te-managed-badge", children: "scale" })
+            ] })
+          ] }, token.name);
+        }
+        const value = getCurrentValue(token.name);
+        const modified = isModified(token.name);
+        const labelNode = /* @__PURE__ */ jsx7(TokenLabel, { label: token.label, usedBy: token.usedBy });
+        switch (token.type) {
+          case "hsl-color":
+            return /* @__PURE__ */ jsx7(
+              HslColorControl,
+              {
+                label: labelNode,
+                value,
+                isModified: modified,
+                onChange: (v) => updateToken(token.name, v),
+                onReset: () => resetToken(token.name)
+              },
+              token.name
+            );
+          case "length":
+            return /* @__PURE__ */ jsx7(
+              LengthControl,
+              {
+                label: labelNode,
+                value,
+                isModified: modified,
+                onChange: (v) => updateToken(token.name, v),
+                onReset: () => resetToken(token.name)
+              },
+              token.name
+            );
+          case "font-size":
+            return /* @__PURE__ */ jsx7(
+              LengthControl,
+              {
+                label: labelNode,
+                value,
+                isModified: modified,
+                onChange: (v) => updateToken(token.name, v),
+                onReset: () => resetToken(token.name),
+                isFontSize: true
+              },
+              token.name
+            );
+          case "shadow":
+            return /* @__PURE__ */ jsx7(
+              ShadowControl,
+              {
+                label: labelNode,
+                value,
+                isModified: modified,
+                onChange: (v) => updateToken(token.name, v),
+                onReset: () => resetToken(token.name)
+              },
+              token.name
+            );
+          default:
+            return null;
+        }
+      }) }) })
+    ] }, groupName);
+  }) });
+}
+
+// src/components/TokenCreationZone.tsx
+import { useCallback as useCallback9, useMemo as useMemo3, useState as useState6 } from "react";
+import { Copy as Copy2, Check } from "lucide-react";
+
+// src/core/cc-prompt-generator.ts
+function generateCCPrompt(config) {
+  const lines = [];
+  lines.push(`# CC Prompt: Create Token \`--${config.tokenName}\``);
+  lines.push("");
+  lines.push("## Context");
+  lines.push("");
+  if (config.context === "deviation") {
+    lines.push("A typography deviation was identified via the DevLens Element Inspector.");
+    if (config.elementTag) {
+      lines.push(`Element: \`<${config.elementTag}>\``);
+    }
+    if (config.elementPath) {
+      lines.push(`Path: \`${config.elementPath}\``);
+    }
+  } else {
+    lines.push("Custom CSS was applied via the DevLens Raw CSS Input and needs formalization as a design token.");
+    if (config.elementTag) {
+      lines.push(`Element: \`<${config.elementTag}>\``);
+    }
+  }
+  lines.push("");
+  lines.push("## Token Definition");
+  lines.push("");
+  lines.push(`**Name:** \`--${config.tokenName}\``);
+  lines.push("");
+  lines.push("**Properties:**");
+  lines.push("");
+  for (const prop of config.properties) {
+    lines.push(`- \`${prop.property}: ${prop.value}\`${prop.locked ? " (locked)" : ""}`);
+  }
+  if (config.scaleRelationship) {
+    lines.push("");
+    lines.push("**Scale Relationship:**");
+    if (config.scaleRelationship.type === "independent") {
+      lines.push("- Independent (not derived from modular scale)");
+    } else {
+      lines.push(`- Derived from \`${config.scaleRelationship.baseVar || "--font-base"}\``);
+      if (config.scaleRelationship.multiplier !== void 0) {
+        lines.push(`- Multiplier: ${config.scaleRelationship.multiplier}`);
+      }
+    }
+  }
+  lines.push("");
+  lines.push("## Implementation Steps");
+  lines.push("");
+  lines.push("1. Add CSS variable to `src/app/globals.css` under `:root`:");
+  lines.push("");
+  lines.push("```css");
+  if (config.scaleRelationship?.type === "derived" && config.scaleRelationship.multiplier) {
+    const baseVar = config.scaleRelationship.baseVar || "--font-base";
+    lines.push(`:root {`);
+    for (const prop of config.properties) {
+      lines.push(`  --${config.tokenName}-${prop.property}: calc(var(${baseVar}) * ${config.scaleRelationship.multiplier});`);
+    }
+    lines.push(`}`);
+  } else {
+    lines.push(`:root {`);
+    for (const prop of config.properties) {
+      lines.push(`  --${config.tokenName}-${prop.property}: ${prop.value};`);
+    }
+    lines.push(`}`);
+  }
+  lines.push("```");
+  lines.push("");
+  lines.push("2. Register in `@theme inline` block (if using Tailwind v4):");
+  lines.push("");
+  lines.push("```css");
+  lines.push("@theme inline {");
+  for (const prop of config.properties) {
+    lines.push(`  --${config.tokenName}-${prop.property}: var(--${config.tokenName}-${prop.property});`);
+  }
+  lines.push("}");
+  lines.push("```");
+  lines.push("");
+  lines.push("3. Register in your DevLens config's `tokenOverrides`:");
+  lines.push("");
+  lines.push("```typescript");
+  for (const prop of config.properties) {
+    lines.push(`'--${config.tokenName}-${prop.property}': {`);
+    lines.push(`  label: '${kebabToTitle(config.tokenName)} ${kebabToTitle(prop.property)}',`);
+    lines.push(`  group: 'Typography Scale',`);
+    lines.push(`},`);
+  }
+  lines.push("```");
+  lines.push("");
+  lines.push("4. Replace hardcoded values in components with the new token.");
+  lines.push("");
+  return lines.join("\n");
+}
+function kebabToTitle(s) {
+  return s.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+}
+
+// src/components/TokenCreationZone.tsx
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var TYPE_OPTIONS = [
+  { value: "hsl-color", label: "Color (HSL)", placeholder: "hsl(210 40% 50%)", defaultGroup: "Semantic Colors" },
+  { value: "font-size", label: "Font Size", placeholder: "16px", defaultGroup: "Typography Scale" },
+  { value: "length", label: "Length / Spacing", placeholder: "1rem", defaultGroup: "Spacing & Layout" },
+  { value: "shadow", label: "Shadow", placeholder: "0 1px 3px 0 rgb(0 0 0 / 0.1)", defaultGroup: "Shadows" }
+];
+function toKebab(str) {
+  return str.toLowerCase().replace(/[^a-z0-9-]/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+}
+var DEFAULT_VALUES = {
+  "hsl-color": "210 40% 50%",
+  "font-size": "16px",
+  "length": "1rem",
+  "shadow": ""
+};
+var PROPERTY_FOR_TYPE = {
+  "hsl-color": "color",
+  "font-size": "font-size",
+  "length": "padding",
+  "shadow": "box-shadow"
+};
+function TokenCreationZone() {
+  const [isOpen, setIsOpen] = useState6(false);
+  const [tokenType, setTokenType] = useState6("hsl-color");
+  const [tokenName, setTokenName] = useState6("");
+  const [group, setGroup] = useState6(TYPE_OPTIONS[0].defaultGroup);
+  const [value, setValue] = useState6(DEFAULT_VALUES["hsl-color"]);
+  const [copied, setCopied] = useState6(false);
+  const { tokenOverrides, tokenGroups: extraGroups } = useDevLensConfig();
+  const registry = useMemo3(
+    () => buildRegistry(autoDetectTokens(), tokenOverrides),
+    [tokenOverrides]
+  );
+  const allGroups = useMemo3(() => {
+    const groups = [...TOKEN_GROUPS];
+    if (extraGroups) {
+      for (const g of extraGroups) {
+        if (!groups.includes(g)) groups.push(g);
+      }
+    }
+    return groups;
+  }, [extraGroups]);
+  const kebabName = toKebab(tokenName);
+  const currentTypeOption = TYPE_OPTIONS.find((t) => t.value === tokenType);
+  const collision = useMemo3(() => {
+    if (!kebabName) return false;
+    return `--${kebabName}` in registry;
+  }, [kebabName, registry]);
+  const outputPreview = useMemo3(() => {
+    if (!kebabName || !value) return "";
+    const prop = PROPERTY_FOR_TYPE[tokenType];
+    const lines = [];
+    lines.push("/* :root */");
+    lines.push(`--${kebabName}: ${value};`);
+    lines.push("");
+    lines.push("/* @theme inline */");
+    if (tokenType === "font-size") {
+      lines.push(`--font-size-${kebabName}: var(--${kebabName});`);
+    } else {
+      lines.push(`--${kebabName}: var(--${kebabName});`);
+    }
+    lines.push("");
+    lines.push("/* token-registry.ts */");
+    lines.push(`'--${kebabName}': { label: '...', group: '${group}', type: '${tokenType}' },`);
+    return lines.join("\n");
+  }, [kebabName, value, tokenType, group]);
+  const handleTypeChange = useCallback9((newType) => {
+    setTokenType(newType);
+    const opt = TYPE_OPTIONS.find((t) => t.value === newType);
+    setGroup(opt.defaultGroup);
+    setValue(DEFAULT_VALUES[newType]);
+  }, []);
+  const handleNameChange = useCallback9((raw) => {
+    setTokenName(toKebab(raw));
+  }, []);
+  const handleCopy = useCallback9(async () => {
+    const prop = PROPERTY_FOR_TYPE[tokenType];
+    const prompt = generateCCPrompt({
+      tokenName: kebabName,
+      properties: [{ property: prop, value }],
+      context: "custom-css"
+    });
+    try {
+      await navigator.clipboard.writeText(prompt);
+    } catch {
+      const textarea = document.createElement("textarea");
+      textarea.value = prompt;
+      textarea.style.position = "fixed";
+      textarea.style.opacity = "0";
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  }, [kebabName, tokenType, value]);
+  const handleCancel = useCallback9(() => {
+    setIsOpen(false);
+    setTokenType("hsl-color");
+    setTokenName("");
+    setGroup(TYPE_OPTIONS[0].defaultGroup);
+    setValue("");
+    setCopied(false);
+  }, []);
+  const isValid = kebabName.length > 0 && !collision && value.length > 0;
+  if (!isOpen) {
+    return /* @__PURE__ */ jsx8("div", { className: "te-creation-zone", children: /* @__PURE__ */ jsx8(
+      "button",
+      {
+        type: "button",
+        className: "te-btn te-btn-secondary te-creation-trigger",
+        onClick: () => setIsOpen(true),
+        children: "+ New Token"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx8("div", { className: "te-creation-zone", children: /* @__PURE__ */ jsxs8("div", { className: "te-creation-form", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "te-creation-header", children: [
+      /* @__PURE__ */ jsx8("span", { className: "te-creation-title", children: "Create Token" }),
+      /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "button",
+          className: "te-creation-cancel",
+          onClick: handleCancel,
+          children: "\u2190 Cancel"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: "te-creation-row", children: [
+      /* @__PURE__ */ jsx8("label", { className: "te-creation-row-label", children: "Type" }),
+      /* @__PURE__ */ jsx8(
+        "select",
+        {
+          className: "te-select te-select-full",
+          value: tokenType,
+          onChange: (e) => handleTypeChange(e.target.value),
+          children: TYPE_OPTIONS.map((opt) => /* @__PURE__ */ jsx8("option", { value: opt.value, children: opt.label }, opt.value))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: "te-creation-row", children: [
+      /* @__PURE__ */ jsx8("label", { className: "te-creation-row-label", children: "Name" }),
+      /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: 4, width: "100%" }, children: [
+        /* @__PURE__ */ jsx8("span", { className: "te-muted", children: "--" }),
+        /* @__PURE__ */ jsx8(
+          "input",
+          {
+            type: "text",
+            className: "te-text-input",
+            value: tokenName,
+            onChange: (e) => handleNameChange(e.target.value),
+            placeholder: "my-custom-token",
+            style: { flex: 1 }
+          }
+        )
+      ] }),
+      collision && /* @__PURE__ */ jsx8("div", { className: "te-token-form-error", children: "Token already exists in the registry" })
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: "te-creation-row", children: [
+      /* @__PURE__ */ jsx8("label", { className: "te-creation-row-label", children: "Group" }),
+      /* @__PURE__ */ jsx8(
+        "select",
+        {
+          className: "te-select te-select-full",
+          value: group,
+          onChange: (e) => setGroup(e.target.value),
+          children: allGroups.map((g) => /* @__PURE__ */ jsx8("option", { value: g, children: g }, g))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: "te-creation-row", children: [
+      /* @__PURE__ */ jsx8("label", { className: "te-creation-row-label", children: "Value" }),
+      tokenType === "hsl-color" && /* @__PURE__ */ jsx8(
+        HslColorControl,
+        {
+          label: /* @__PURE__ */ jsx8(Fragment2, {}),
+          value,
+          isModified: false,
+          onChange: setValue,
+          onReset: () => setValue(DEFAULT_VALUES["hsl-color"])
+        }
+      ),
+      tokenType === "font-size" && /* @__PURE__ */ jsx8(
+        LengthControl,
+        {
+          label: /* @__PURE__ */ jsx8(Fragment2, {}),
+          value,
+          isModified: false,
+          onChange: setValue,
+          onReset: () => setValue(DEFAULT_VALUES["font-size"]),
+          isFontSize: true
+        }
+      ),
+      tokenType === "length" && /* @__PURE__ */ jsx8(
+        LengthControl,
+        {
+          label: /* @__PURE__ */ jsx8(Fragment2, {}),
+          value,
+          isModified: false,
+          onChange: setValue,
+          onReset: () => setValue(DEFAULT_VALUES["length"]),
+          isFontSize: false
+        }
+      ),
+      tokenType === "shadow" && /* @__PURE__ */ jsx8(
+        "input",
+        {
+          type: "text",
+          className: "te-text-input",
+          value,
+          onChange: (e) => setValue(e.target.value),
+          placeholder: currentTypeOption.placeholder,
+          style: { width: "100%" }
+        }
+      )
+    ] }),
+    kebabName && value && /* @__PURE__ */ jsxs8("div", { className: "te-creation-row", children: [
+      /* @__PURE__ */ jsx8("label", { className: "te-creation-row-label", children: "Preview" }),
+      /* @__PURE__ */ jsx8("pre", { className: "te-diff-content", style: { fontSize: 10 }, children: outputPreview })
+    ] }),
+    /* @__PURE__ */ jsx8("div", { className: "te-token-form-actions", children: /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        type: "button",
+        className: "te-btn te-btn-primary",
+        onClick: handleCopy,
+        disabled: !isValid,
+        style: !isValid ? { opacity: 0.5, cursor: "not-allowed" } : void 0,
+        children: [
+          copied ? /* @__PURE__ */ jsx8(Check, { size: 12 }) : /* @__PURE__ */ jsx8(Copy2, { size: 12 }),
+          copied ? "Copied!" : "Copy as CC Prompt"
+        ]
+      }
+    ) })
+  ] }) });
+}
+
+// src/components/TokenEditorDiffOutput.tsx
+import { useCallback as useCallback10, useState as useState7 } from "react";
+import { Copy as Copy3, Check as Check2, RotateCcw as RotateCcw5 } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function TokenEditorDiffOutput({
+  diff,
+  changeCount,
+  onResetAll,
+  classDiff,
+  classChangeCount = 0,
+  onResetAllClasses,
+  customStyleDiff,
+  customStyleChangeCount = 0,
+  onResetCustomStyles
+}) {
+  const [copiedToken, setCopiedToken] = useState7(false);
+  const [copiedClass, setCopiedClass] = useState7(false);
+  const [copiedCustom, setCopiedCustom] = useState7(false);
+  const [copiedAll, setCopiedAll] = useState7(false);
+  const [outputFormat, setOutputFormat] = useState7("diff");
+  const totalCount = changeCount + classChangeCount + customStyleChangeCount;
+  const typeCount = (changeCount > 0 ? 1 : 0) + (classChangeCount > 0 ? 1 : 0) + (customStyleChangeCount > 0 ? 1 : 0);
+  const hasBothTypes = typeCount >= 2;
+  const copyToClipboard = useCallback10(async (text) => {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      const textarea = document.createElement("textarea");
+      textarea.value = text;
+      textarea.style.position = "fixed";
+      textarea.style.opacity = "0";
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+    }
+  }, []);
+  const handleCopyTokens = useCallback10(async () => {
+    await copyToClipboard(diff);
+    setCopiedToken(true);
+    setTimeout(() => setCopiedToken(false), 2e3);
+  }, [diff, copyToClipboard]);
+  const handleCopyClasses = useCallback10(async () => {
+    await copyToClipboard(classDiff || "");
+    setCopiedClass(true);
+    setTimeout(() => setCopiedClass(false), 2e3);
+  }, [classDiff, copyToClipboard]);
+  const handleCopyCustom = useCallback10(async () => {
+    await copyToClipboard(customStyleDiff || "");
+    setCopiedCustom(true);
+    setTimeout(() => setCopiedCustom(false), 2e3);
+  }, [customStyleDiff, copyToClipboard]);
+  const generateCCPromptFromDiffs = useCallback10(() => {
+    const sections = [];
+    let sectionNum = 1;
+    sections.push("# CC Prompt: Design Token & Class Changes");
+    sections.push("");
+    sections.push("## Context");
+    sections.push("Apply the following design token and class changes to `src/app/globals.css` and related component files.");
+    sections.push("");
+    if (diff && changeCount > 0) {
+      sections.push(`## ${sectionNum}. Token Changes (${changeCount})`);
+      sections.push("");
+      sections.push("Update the following CSS custom properties in `globals.css`:");
+      sections.push("");
+      sections.push("```css");
+      sections.push(diff);
+      sections.push("```");
+      sections.push("");
+      sectionNum++;
+    }
+    if (classDiff && classChangeCount > 0) {
+      sections.push(`## ${sectionNum}. Class Changes (${classChangeCount})`);
+      sections.push("");
+      sections.push("Apply the following Tailwind class modifications:");
+      sections.push("");
+      sections.push("```diff");
+      sections.push(classDiff);
+      sections.push("```");
+      sections.push("");
+      sectionNum++;
+    }
+    if (customStyleDiff && customStyleChangeCount > 0) {
+      sections.push(`## ${sectionNum}. Custom Style Changes (${customStyleChangeCount})`);
+      sections.push("");
+      sections.push("Apply the following inline/custom style changes:");
+      sections.push("");
+      sections.push("```css");
+      sections.push(customStyleDiff);
+      sections.push("```");
+      sections.push("");
+      sectionNum++;
+    }
+    sections.push("## Validation Checklist");
+    sections.push("");
+    sections.push("- [ ] All token values updated in `globals.css`");
+    if (classChangeCount > 0) sections.push("- [ ] Class changes applied to target components");
+    if (customStyleChangeCount > 0) sections.push("- [ ] Custom style overrides applied");
+    sections.push("- [ ] `npm run build` passes");
+    sections.push("- [ ] Visual regression check in browser");
+    return sections.join("\n");
+  }, [diff, classDiff, customStyleDiff, changeCount, classChangeCount, customStyleChangeCount]);
+  const handleCopyAll = useCallback10(async () => {
+    const content = outputFormat === "cc-prompt" ? generateCCPromptFromDiffs() : [diff, classDiff, customStyleDiff].filter(Boolean).join("\n\n---\n\n");
+    await copyToClipboard(content);
+    setCopiedAll(true);
+    setTimeout(() => setCopiedAll(false), 2e3);
+  }, [diff, classDiff, customStyleDiff, copyToClipboard, outputFormat, generateCCPromptFromDiffs]);
+  if (totalCount === 0) {
+    return /* @__PURE__ */ jsx9("div", { className: "te-diff-empty", children: "No changes yet. Modify tokens or inspect elements to see a diff." });
+  }
+  if (!hasBothTypes) {
+    const isTokens = changeCount > 0;
+    const isCustom = !isTokens && customStyleChangeCount > 0;
+    const content = isTokens ? diff : isCustom ? customStyleDiff || "" : classDiff || "";
+    const label = isTokens ? "token" : isCustom ? "custom style" : "class";
+    const count = isTokens ? changeCount : isCustom ? customStyleChangeCount : classChangeCount;
+    return /* @__PURE__ */ jsxs9("div", { className: "te-diff", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "te-diff-header", children: [
+        /* @__PURE__ */ jsxs9("span", { className: "te-diff-title", children: [
+          count,
+          " ",
+          label,
+          " change",
+          count !== 1 ? "s" : ""
+        ] }),
+        /* @__PURE__ */ jsxs9("div", { className: "te-diff-actions", children: [
+          isTokens && /* @__PURE__ */ jsxs9(
+            "button",
+            {
+              type: "button",
+              className: "te-btn te-btn-secondary",
+              onClick: onResetAll,
+              children: [
+                /* @__PURE__ */ jsx9(RotateCcw5, { size: 12 }),
+                "Reset All"
+              ]
+            }
+          ),
+          !isTokens && !isCustom && onResetAllClasses && /* @__PURE__ */ jsxs9(
+            "button",
+            {
+              type: "button",
+              className: "te-btn te-btn-secondary",
+              onClick: onResetAllClasses,
+              children: [
+                /* @__PURE__ */ jsx9(RotateCcw5, { size: 12 }),
+                "Reset All"
+              ]
+            }
+          ),
+          isCustom && onResetCustomStyles && /* @__PURE__ */ jsxs9(
+            "button",
+            {
+              type: "button",
+              className: "te-btn te-btn-secondary",
+              onClick: onResetCustomStyles,
+              children: [
+                /* @__PURE__ */ jsx9(RotateCcw5, { size: 12 }),
+                "Reset All"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs9(
+            "button",
+            {
+              type: "button",
+              className: "te-btn te-btn-primary",
+              onClick: handleCopyAll,
+              children: [
+                copiedAll ? /* @__PURE__ */ jsx9(Check2, { size: 12 }) : /* @__PURE__ */ jsx9(Copy3, { size: 12 }),
+                copiedAll ? "Copied!" : outputFormat === "cc-prompt" ? "Copy as CC Prompt" : "Copy Changes"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs9("div", { className: "te-format-toggle", children: [
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            type: "button",
+            className: `te-format-btn ${outputFormat === "diff" ? "te-format-active" : ""}`,
+            onClick: () => setOutputFormat("diff"),
+            children: "Diff"
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            type: "button",
+            className: `te-format-btn ${outputFormat === "cc-prompt" ? "te-format-active" : ""}`,
+            onClick: () => setOutputFormat("cc-prompt"),
+            children: "CC Prompt"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx9("pre", { className: "te-diff-content", children: content })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs9("div", { className: "te-diff", children: [
+    /* @__PURE__ */ jsx9("div", { className: "te-diff-header", children: /* @__PURE__ */ jsxs9("span", { className: "te-diff-title", children: [
+      totalCount,
+      " change",
+      totalCount !== 1 ? "s" : ""
+    ] }) }),
+    /* @__PURE__ */ jsxs9("div", { className: "te-format-toggle", children: [
+      /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          className: `te-format-btn ${outputFormat === "diff" ? "te-format-active" : ""}`,
+          onClick: () => setOutputFormat("diff"),
+          children: "Diff"
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          className: `te-format-btn ${outputFormat === "cc-prompt" ? "te-format-active" : ""}`,
+          onClick: () => setOutputFormat("cc-prompt"),
+          children: "CC Prompt"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs9("div", { className: "te-diff-section", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "te-diff-section-title", children: [
+        "Token Changes (",
+        changeCount,
+        ")",
+        /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: 4, marginLeft: 8 }, children: [
+          /* @__PURE__ */ jsxs9(
+            "button",
+            {
+              type: "button",
+              className: "te-btn te-btn-secondary",
+              onClick: onResetAll,
+              style: { padding: "2px 8px", fontSize: 10 },
+              children: [
+                /* @__PURE__ */ jsx9(RotateCcw5, { size: 10 }),
+                "Reset"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs9(
+            "button",
+            {
+              type: "button",
+              className: "te-btn te-btn-primary",
+              onClick: handleCopyTokens,
+              style: { padding: "2px 8px", fontSize: 10 },
+              children: [
+                copiedToken ? /* @__PURE__ */ jsx9(Check2, { size: 10 }) : /* @__PURE__ */ jsx9(Copy3, { size: 10 }),
+                copiedToken ? "Copied!" : "Copy"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx9("pre", { className: "te-diff-content", children: diff })
+    ] }),
+    /* @__PURE__ */ jsx9("div", { className: "te-diff-separator" }),
+    /* @__PURE__ */ jsxs9("div", { className: "te-diff-section", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "te-diff-section-title", children: [
+        "Class Changes (",
+        classChangeCount,
+        ")",
+        /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: 4, marginLeft: 8 }, children: [
+          onResetAllClasses && /* @__PURE__ */ jsxs9(
+            "button",
+            {
+              type: "button",
+              className: "te-btn te-btn-secondary",
+              onClick: onResetAllClasses,
+              style: { padding: "2px 8px", fontSize: 10 },
+              children: [
+                /* @__PURE__ */ jsx9(RotateCcw5, { size: 10 }),
+                "Reset"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs9(
+            "button",
+            {
+              type: "button",
+              className: "te-btn te-btn-primary",
+              onClick: handleCopyClasses,
+              style: { padding: "2px 8px", fontSize: 10 },
+              children: [
+                copiedClass ? /* @__PURE__ */ jsx9(Check2, { size: 10 }) : /* @__PURE__ */ jsx9(Copy3, { size: 10 }),
+                copiedClass ? "Copied!" : "Copy"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx9("pre", { className: "te-diff-content", children: classDiff })
+    ] }),
+    customStyleChangeCount > 0 && /* @__PURE__ */ jsxs9(Fragment3, { children: [
+      /* @__PURE__ */ jsx9("div", { className: "te-diff-separator" }),
+      /* @__PURE__ */ jsxs9("div", { className: "te-diff-section", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "te-diff-section-title", children: [
+          "Custom Style Changes (",
+          customStyleChangeCount,
+          ")",
+          /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: 4, marginLeft: 8 }, children: [
+            onResetCustomStyles && /* @__PURE__ */ jsxs9(
+              "button",
+              {
+                type: "button",
+                className: "te-btn te-btn-secondary",
+                onClick: onResetCustomStyles,
+                style: { padding: "2px 8px", fontSize: 10 },
+                children: [
+                  /* @__PURE__ */ jsx9(RotateCcw5, { size: 10 }),
+                  "Reset"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs9(
+              "button",
+              {
+                type: "button",
+                className: "te-btn te-btn-primary",
+                onClick: handleCopyCustom,
+                style: { padding: "2px 8px", fontSize: 10 },
+                children: [
+                  copiedCustom ? /* @__PURE__ */ jsx9(Check2, { size: 10 }) : /* @__PURE__ */ jsx9(Copy3, { size: 10 }),
+                  copiedCustom ? "Copied!" : "Copy"
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx9("pre", { className: "te-diff-content", children: customStyleDiff })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs9(
+      "button",
+      {
+        type: "button",
+        className: "te-btn te-btn-primary te-diff-copy-all",
+        onClick: handleCopyAll,
+        children: [
+          copiedAll ? /* @__PURE__ */ jsx9(Check2, { size: 12 }) : /* @__PURE__ */ jsx9(Copy3, { size: 12 }),
+          copiedAll ? "Copied All!" : outputFormat === "cc-prompt" ? "Copy as CC Prompt" : "Copy All Changes"
+        ]
+      }
+    )
+  ] });
+}
+
+// src/hooks/use-element-inspector.ts
+import { useCallback as useCallback11, useMemo as useMemo4, useRef as useRef5, useState as useState8 } from "react";
+function useElementInspector() {
+  const [state, setState] = useState8({
+    isSelectorActive: false,
+    selectedElement: null,
+    originalClasses: [],
+    currentClasses: [],
+    classChanges: [],
+    cachedIdentifier: null,
+    customStyles: [],
+    originalInlineStyles: {}
+  });
+  const elementRef = useRef5(null);
+  const toggleSelector = useCallback11(() => {
+    setState((prev) => ({
+      ...prev,
+      isSelectorActive: !prev.isSelectorActive
+    }));
+  }, []);
+  const activateSelector = useCallback11(() => {
+    setState((prev) => ({
+      ...prev,
+      isSelectorActive: true
+    }));
+  }, []);
+  const deactivateSelector = useCallback11(() => {
+    setState((prev) => ({
+      ...prev,
+      isSelectorActive: false
+    }));
+  }, []);
+  const computeIdentifier = useCallback11((el) => {
+    const tagName = el.tagName.toLowerCase();
+    const rawText = el.textContent || "";
+    const textPreview = rawText.length > 60 ? rawText.slice(0, 60).trim() + "\u2026" : rawText.trim();
+    const breadcrumb = [];
+    let current = el;
+    for (let i = 0; i < 5 && current; i++) {
+      const tag = current.tagName.toLowerCase();
+      const firstClass = Array.from(current.classList).find((c) => !c.startsWith("te-"));
+      const segment = firstClass ? `${tag}.${firstClass}` : tag;
+      breadcrumb.unshift(segment);
+      current = current.parentElement;
+    }
+    const testId = el.getAttribute("data-testid") || void 0;
+    const id = el.id || void 0;
+    return { tagName, textPreview, breadcrumb, testId, id };
+  }, []);
+  const selectElement = useCallback11((el) => {
+    elementRef.current = el;
+    const classes = Array.from(el.classList);
+    const identifier = computeIdentifier(el);
+    setState({
+      isSelectorActive: false,
+      selectedElement: el,
+      originalClasses: [...classes],
+      currentClasses: [...classes],
+      classChanges: [],
+      cachedIdentifier: identifier,
+      customStyles: [],
+      originalInlineStyles: {}
+    });
+  }, [computeIdentifier]);
+  const clearSelection = useCallback11(() => {
+    elementRef.current = null;
+    setState({
+      isSelectorActive: false,
+      selectedElement: null,
+      originalClasses: [],
+      currentClasses: [],
+      classChanges: [],
+      cachedIdentifier: null,
+      customStyles: [],
+      originalInlineStyles: {}
+    });
+  }, []);
+  const addClass = useCallback11((className) => {
+    const el = elementRef.current;
+    if (!el || !className.trim()) return;
+    const cls = className.trim();
+    el.classList.add(cls);
+    setState((prev) => {
+      if (prev.originalClasses.includes(cls)) {
+        return {
+          ...prev,
+          currentClasses: Array.from(el.classList)
+        };
+      }
+      const existing = prev.classChanges.find(
+        (c) => c.type === "added" && c.current === cls
+      );
+      if (existing) {
+        return { ...prev, currentClasses: Array.from(el.classList) };
+      }
+      const removedIdx = prev.classChanges.findIndex(
+        (c) => c.type === "removed" && c.original === cls
+      );
+      if (removedIdx >= 0) {
+        const newChanges = [...prev.classChanges];
+        newChanges.splice(removedIdx, 1);
+        return {
+          ...prev,
+          currentClasses: Array.from(el.classList),
+          classChanges: newChanges
+        };
+      }
+      return {
+        ...prev,
+        currentClasses: Array.from(el.classList),
+        classChanges: [
+          ...prev.classChanges,
+          { type: "added", current: cls }
+        ]
+      };
+    });
+  }, []);
+  const removeClass = useCallback11((className) => {
+    const el = elementRef.current;
+    if (!el) return;
+    el.classList.remove(className);
+    setState((prev) => {
+      const addedIdx = prev.classChanges.findIndex(
+        (c) => c.type === "added" && c.current === className
+      );
+      if (addedIdx >= 0) {
+        const newChanges = [...prev.classChanges];
+        newChanges.splice(addedIdx, 1);
+        return {
+          ...prev,
+          currentClasses: Array.from(el.classList),
+          classChanges: newChanges
+        };
+      }
+      const modifiedIdx = prev.classChanges.findIndex(
+        (c) => c.type === "modified" && c.current === className
+      );
+      if (modifiedIdx >= 0) {
+        const newChanges = [...prev.classChanges];
+        const original = newChanges[modifiedIdx].original;
+        newChanges[modifiedIdx] = { type: "removed", original };
+        return {
+          ...prev,
+          currentClasses: Array.from(el.classList),
+          classChanges: newChanges
+        };
+      }
+      if (prev.originalClasses.includes(className)) {
+        return {
+          ...prev,
+          currentClasses: Array.from(el.classList),
+          classChanges: [
+            ...prev.classChanges,
+            { type: "removed", original: className }
+          ]
+        };
+      }
+      return { ...prev, currentClasses: Array.from(el.classList) };
+    });
+  }, []);
+  const updateClass = useCallback11((oldClass, newClass) => {
+    const el = elementRef.current;
+    if (!el) return;
+    const trimmed = newClass.trim();
+    if (!trimmed) {
+      el.classList.remove(oldClass);
+      setState((prev) => {
+        const existingIdx = prev.classChanges.findIndex(
+          (c) => c.type === "modified" && c.current === oldClass || c.type === "added" && c.current === oldClass
+        );
+        if (existingIdx >= 0) {
+          const change = prev.classChanges[existingIdx];
+          const newChanges = [...prev.classChanges];
+          if (change.type === "added") {
+            newChanges.splice(existingIdx, 1);
+          } else {
+            newChanges[existingIdx] = { type: "removed", original: change.original };
+          }
+          return {
+            ...prev,
+            currentClasses: Array.from(el.classList),
+            classChanges: newChanges
+          };
+        }
+        if (prev.originalClasses.includes(oldClass)) {
+          return {
+            ...prev,
+            currentClasses: Array.from(el.classList),
+            classChanges: [...prev.classChanges, { type: "removed", original: oldClass }]
+          };
+        }
+        return { ...prev, currentClasses: Array.from(el.classList) };
+      });
+      return;
+    }
+    if (oldClass === trimmed) return;
+    el.classList.remove(oldClass);
+    el.classList.add(trimmed);
+    setState((prev) => {
+      const newChanges = [...prev.classChanges];
+      const existingIdx = newChanges.findIndex(
+        (c) => c.type === "modified" && c.current === oldClass || c.type === "added" && c.current === oldClass
+      );
+      if (existingIdx >= 0) {
+        const change = newChanges[existingIdx];
+        if (change.type === "added") {
+          newChanges[existingIdx] = { type: "added", current: trimmed };
+        } else {
+          if (change.original === trimmed) {
+            newChanges.splice(existingIdx, 1);
+          } else {
+            newChanges[existingIdx] = {
+              type: "modified",
+              original: change.original,
+              current: trimmed
+            };
+          }
+        }
+      } else if (prev.originalClasses.includes(oldClass)) {
+        newChanges.push({
+          type: "modified",
+          original: oldClass,
+          current: trimmed
+        });
+      } else {
+        newChanges.push({ type: "added", current: trimmed });
+      }
+      return {
+        ...prev,
+        currentClasses: Array.from(el.classList),
+        classChanges: newChanges
+      };
+    });
+  }, []);
+  const addCustomStyle = useCallback11((property, value) => {
+    const el = elementRef.current;
+    if (!el) return;
+    setState((prev) => {
+      const originals = { ...prev.originalInlineStyles };
+      if (!(property in originals)) {
+        originals[property] = el.style.getPropertyValue(property);
+      }
+      el.style.setProperty(property, value);
+      const existing = prev.customStyles.findIndex((s) => s.property === property);
+      const newStyles = [...prev.customStyles];
+      if (existing >= 0) {
+        newStyles[existing] = { property, value };
+      } else {
+        newStyles.push({ property, value });
+      }
+      return { ...prev, customStyles: newStyles, originalInlineStyles: originals };
+    });
+  }, []);
+  const removeCustomStyle = useCallback11((property) => {
+    const el = elementRef.current;
+    if (!el) return;
+    setState((prev) => {
+      const original = prev.originalInlineStyles[property];
+      if (original) {
+        el.style.setProperty(property, original);
+      } else {
+        el.style.removeProperty(property);
+      }
+      const newStyles = prev.customStyles.filter((s) => s.property !== property);
+      const originals = { ...prev.originalInlineStyles };
+      delete originals[property];
+      return { ...prev, customStyles: newStyles, originalInlineStyles: originals };
+    });
+  }, []);
+  const clearCustomStyles = useCallback11(() => {
+    const el = elementRef.current;
+    if (!el) return;
+    setState((prev) => {
+      for (const entry of prev.customStyles) {
+        const original = prev.originalInlineStyles[entry.property];
+        if (original) {
+          el.style.setProperty(entry.property, original);
+        } else {
+          el.style.removeProperty(entry.property);
+        }
+      }
+      return { ...prev, customStyles: [], originalInlineStyles: {} };
+    });
+  }, []);
+  const getElementIdentifier = useCallback11(() => {
+    if (state.cachedIdentifier) return state.cachedIdentifier;
+    const el = elementRef.current;
+    if (!el) return null;
+    return computeIdentifier(el);
+  }, [state.cachedIdentifier, computeIdentifier]);
+  const classDiffText = useMemo4(() => {
+    if (state.classChanges.length === 0) return "";
+    const identifier = state.cachedIdentifier;
+    if (!identifier) return "";
+    const lines = ["## Class Changes", ""];
+    lines.push(
+      `**Element:** <${identifier.tagName}> "${identifier.textPreview}"${identifier.testId ? ` (data-testid="${identifier.testId}")` : ""}${identifier.id ? ` (id="${identifier.id}")` : ""}`
+    );
+    lines.push(`**Path:** ${identifier.breadcrumb.join(" \u203A ")}`);
+    lines.push("");
+    lines.push("| Action | Class |");
+    lines.push("|--------|-------|");
+    for (const change of state.classChanges) {
+      switch (change.type) {
+        case "added":
+          lines.push(`| + Added | \`${change.current}\` |`);
+          break;
+        case "removed":
+          lines.push(`| - Removed | \`${change.original}\` |`);
+          break;
+        case "modified":
+          lines.push(
+            `| ~ Modified | \`${change.original}\` \u2192 \`${change.current}\` |`
+          );
+          break;
+      }
+    }
+    return lines.join("\n");
+  }, [state.classChanges, state.cachedIdentifier]);
+  const customStyleDiffText = useMemo4(() => {
+    if (state.customStyles.length === 0) return "";
+    const identifier = state.cachedIdentifier;
+    if (!identifier) return "";
+    const lines = ["## Custom Style Changes", ""];
+    lines.push(
+      `**Element:** <${identifier.tagName}> "${identifier.textPreview}"${identifier.testId ? ` (data-testid="${identifier.testId}")` : ""}${identifier.id ? ` (id="${identifier.id}")` : ""}`
+    );
+    lines.push(`**Path:** ${identifier.breadcrumb.join(" \u203A ")}`);
+    lines.push("");
+    lines.push("| Property | Value |");
+    lines.push("|----------|-------|");
+    for (const entry of state.customStyles) {
+      lines.push(`| \`${entry.property}\` | \`${entry.value}\` |`);
+    }
+    return lines.join("\n");
+  }, [state.customStyles, state.cachedIdentifier]);
+  const customStyleChangeCount = state.customStyles.length;
+  const changeCount = state.classChanges.length;
+  return {
+    // State
+    isSelectorActive: state.isSelectorActive,
+    selectedElement: state.selectedElement,
+    originalClasses: state.originalClasses,
+    currentClasses: state.currentClasses,
+    classChanges: state.classChanges,
+    customStyles: state.customStyles,
+    changeCount,
+    customStyleChangeCount,
+    // Actions
+    toggleSelector,
+    activateSelector,
+    deactivateSelector,
+    selectElement,
+    clearSelection,
+    addClass,
+    removeClass,
+    updateClass,
+    addCustomStyle,
+    removeCustomStyle,
+    clearCustomStyles,
+    // Derived
+    getElementIdentifier,
+    classDiffText,
+    customStyleDiffText
+  };
+}
+
+// src/hooks/use-scale-baseline.ts
+import { useCallback as useCallback12, useEffect as useEffect6, useRef as useRef6, useState as useState9 } from "react";
+
+// src/core/scale-baseline.ts
+function buildBaselineCSS(config) {
+  if (!config.mapping || config.mapping.length === 0) return "";
+  const rules = [];
+  for (const m of config.mapping) {
+    const declarations = [
+      `font-size: var(${m.fontSizeVar});`,
+      `line-height: var(${m.lineHeightVar});`
+    ];
+    if (m.fontWeight !== void 0) {
+      declarations.push(`font-weight: ${m.fontWeight};`);
+    }
+    rules.push(`${m.selector} {
+  ${declarations.join("\n  ")}
+}`);
+  }
+  return rules.join("\n\n");
+}
+
+// src/hooks/use-scale-baseline.ts
+function useScaleBaseline() {
+  const { scaleBaseline, namespace } = useDevLensConfig();
+  const [isActive, setIsActive] = useState9(false);
+  const styleRef = useRef6(null);
+  const hasBaseline = !!scaleBaseline && !!scaleBaseline.mapping && scaleBaseline.mapping.length > 0;
+  const toggle = useCallback12(() => {
+    setIsActive((prev) => !prev);
+  }, []);
+  useEffect6(() => {
+    if (isActive && hasBaseline) {
+      const css = buildBaselineCSS(scaleBaseline);
+      if (!css) return;
+      const style = document.createElement("style");
+      style.setAttribute("data-devlens", `${namespace}-scale-baseline`);
+      style.textContent = css;
+      document.head.appendChild(style);
+      styleRef.current = style;
+      return () => {
+        if (styleRef.current) {
+          styleRef.current.remove();
+          styleRef.current = null;
+        }
+      };
+    } else if (styleRef.current) {
+      styleRef.current.remove();
+      styleRef.current = null;
+    }
+  }, [isActive, hasBaseline, scaleBaseline, namespace]);
+  return { isActive, toggle, hasBaseline };
+}
+
+// src/components/ElementInspectorTab.tsx
+import { useCallback as useCallback17, useEffect as useEffect11, useMemo as useMemo8, useRef as useRef11, useState as useState16 } from "react";
+import { MousePointer } from "lucide-react";
+
+// src/core/class-categories.ts
+var TEXT_SIZE_KEYWORDS = /* @__PURE__ */ new Set([
+  "text-xs",
+  "text-sm",
+  "text-base",
+  "text-lg",
+  "text-xl",
+  "text-2xl",
+  "text-3xl",
+  "text-4xl",
+  "text-5xl",
+  "text-6xl",
+  "text-7xl",
+  "text-8xl",
+  "text-9xl"
+]);
+var TEXT_ALIGN_KEYWORDS = /* @__PURE__ */ new Set([
+  "text-left",
+  "text-center",
+  "text-right",
+  "text-justify",
+  "text-start",
+  "text-end"
+]);
+var TEXT_DECORATION_KEYWORDS = /* @__PURE__ */ new Set([
+  "underline",
+  "overline",
+  "line-through",
+  "no-underline"
+]);
+var TEXT_TRANSFORM_KEYWORDS = /* @__PURE__ */ new Set([
+  "uppercase",
+  "lowercase",
+  "capitalize",
+  "normal-case"
+]);
+var TEXT_OVERFLOW_KEYWORDS = /* @__PURE__ */ new Set([
+  "truncate",
+  "text-ellipsis",
+  "text-clip"
+]);
+var TEXT_WRAP_KEYWORDS = /* @__PURE__ */ new Set([
+  "text-wrap",
+  "text-nowrap",
+  "text-balance",
+  "text-pretty"
+]);
+function isTextSize(cls, projectTextSizeClasses) {
+  if (TEXT_SIZE_KEYWORDS.has(cls)) return true;
+  if (projectTextSizeClasses?.has(cls)) return true;
+  return false;
+}
+function categorizeClass(cls, projectTextSizeClasses) {
+  const colonIdx = cls.lastIndexOf(":");
+  const base = colonIdx > 0 ? cls.slice(colonIdx + 1) : cls;
+  if (base === "flex" || base === "grid" || base === "block" || base === "inline" || base === "inline-flex" || base === "inline-grid" || base === "inline-block" || base === "hidden" || base === "contents" || base === "absolute" || base === "relative" || base === "fixed" || base === "sticky" || base === "static" || base.startsWith("flex-") || base.startsWith("grid-") || base.startsWith("col-") || base.startsWith("row-") || base.startsWith("justify-") || base.startsWith("items-") || base.startsWith("self-") || base.startsWith("place-") || base.startsWith("order-") || base.startsWith("float-") || base === "clear-both" || base.startsWith("clear-") || base.startsWith("top-") || base.startsWith("right-") || base.startsWith("bottom-") || base.startsWith("left-") || base.startsWith("inset-") || base.startsWith("z-") || base.startsWith("overflow-")) {
+    return "Layout";
+  }
+  if (base.startsWith("w-") || base.startsWith("h-") || base.startsWith("min-w-") || base.startsWith("min-h-") || base.startsWith("max-w-") || base.startsWith("max-h-") || base.startsWith("size-") || base.startsWith("aspect-")) {
+    return "Sizing";
+  }
+  if (base.startsWith("p-") || base.startsWith("px-") || base.startsWith("py-") || base.startsWith("pt-") || base.startsWith("pr-") || base.startsWith("pb-") || base.startsWith("pl-") || base.startsWith("ps-") || base.startsWith("pe-") || base.startsWith("m-") || base.startsWith("mx-") || base.startsWith("my-") || base.startsWith("mt-") || base.startsWith("mr-") || base.startsWith("mb-") || base.startsWith("ml-") || base.startsWith("ms-") || base.startsWith("me-") || base.startsWith("gap-") || base.startsWith("space-")) {
+    return "Spacing";
+  }
+  if (isTextSize(base, projectTextSizeClasses) || base.startsWith("font-") || base.startsWith("leading-") || base.startsWith("tracking-") || TEXT_ALIGN_KEYWORDS.has(base) || TEXT_DECORATION_KEYWORDS.has(base) || TEXT_TRANSFORM_KEYWORDS.has(base) || TEXT_OVERFLOW_KEYWORDS.has(base) || TEXT_WRAP_KEYWORDS.has(base) || base.startsWith("indent-") || base.startsWith("align-") || base.startsWith("whitespace-") || base.startsWith("break-") || base === "antialiased" || base === "subpixel-antialiased" || base.startsWith("decoration-") || base.startsWith("underline-offset-") || base.startsWith("list-")) {
+    return "Typography";
+  }
+  if (base.startsWith("text-") && !isTextSize(base, projectTextSizeClasses) && !TEXT_ALIGN_KEYWORDS.has(base) && !TEXT_OVERFLOW_KEYWORDS.has(base) && !TEXT_WRAP_KEYWORDS.has(base) || base.startsWith("bg-") && !base.startsWith("bg-gradient-") || base.startsWith("from-") || base.startsWith("via-") || base.startsWith("to-") || base.startsWith("bg-gradient-") || base.startsWith("accent-") || base.startsWith("caret-") || base.startsWith("fill-") || base.startsWith("stroke-")) {
+    return "Colors";
+  }
+  if (base.startsWith("border") || base.startsWith("rounded") || base.startsWith("divide-") || base.startsWith("ring-") || base === "ring" || base.startsWith("outline-") || base === "outline" || base === "outline-none") {
+    return "Borders";
+  }
+  if (base.startsWith("shadow") || base.startsWith("opacity-") || base.startsWith("blur-") || base === "blur" || base.startsWith("brightness-") || base.startsWith("contrast-") || base.startsWith("grayscale") || base.startsWith("hue-rotate-") || base.startsWith("invert") || base.startsWith("saturate-") || base.startsWith("sepia") || base.startsWith("drop-shadow-") || base.startsWith("backdrop-") || base.startsWith("mix-blend-") || base.startsWith("bg-blend-") || base.startsWith("transition") || base.startsWith("duration-") || base.startsWith("ease-") || base.startsWith("delay-") || base.startsWith("animate-") || base.startsWith("scale-") || base.startsWith("rotate-") || base.startsWith("translate-") || base.startsWith("skew-") || base === "transform" || base === "transform-gpu" || base === "transform-none") {
+    return "Effects";
+  }
+  return "Other";
+}
+function findFontSizeClasses(classes, projectTextSizeClasses) {
+  return classes.filter((cls) => isTextSize(cls, projectTextSizeClasses));
+}
+function categorizeClasses(classes, projectTextSizeClasses) {
+  const CATEGORY_ORDER = ["Layout", "Sizing", "Spacing", "Typography", "Colors", "Borders", "Effects", "Other"];
+  const map = /* @__PURE__ */ new Map();
+  for (const cls of classes) {
+    const category = categorizeClass(cls, projectTextSizeClasses);
+    const existing = map.get(category);
+    if (existing) {
+      existing.push(cls);
+    } else {
+      map.set(category, [cls]);
+    }
+  }
+  const groups = [];
+  for (const cat of CATEGORY_ORDER) {
+    const items = map.get(cat);
+    if (items && items.length > 0) {
+      groups.push({ category: cat, classes: items });
+    }
+  }
+  return groups;
+}
+
+// src/components/ClassChip.tsx
+import { useCallback as useCallback14, useEffect as useEffect8, useRef as useRef8, useState as useState11 } from "react";
+
+// src/components/ClassSuggestionDropdown.tsx
+import { useCallback as useCallback13, useEffect as useEffect7, useRef as useRef7, useState as useState10 } from "react";
+import { createPortal } from "react-dom";
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+function ClassSuggestionDropdown({
+  suggestions,
+  inputValue,
+  onSelect,
+  onDismiss,
+  visible,
+  inputRef
+}) {
+  const [activeIndex, setActiveIndex] = useState10(0);
+  const listRef = useRef7(null);
+  const [position, setPosition] = useState10(null);
+  useEffect7(() => {
+    setActiveIndex(0);
+  }, [suggestions]);
+  useEffect7(() => {
+    if (!visible || !inputRef?.current) {
+      setPosition(null);
+      return;
+    }
+    const rect = inputRef.current.getBoundingClientRect();
+    setPosition({
+      top: rect.bottom + 2,
+      left: rect.left,
+      width: rect.width
+    });
+  }, [visible, inputRef, suggestions]);
+  useEffect7(() => {
+    if (!listRef.current) return;
+    const activeEl = listRef.current.children[activeIndex];
+    if (activeEl) {
+      activeEl.scrollIntoView({ block: "nearest" });
+    }
+  }, [activeIndex]);
+  const handleKeyDown = useCallback13(
+    (e) => {
+      if (!visible || suggestions.length === 0) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((prev) => Math.min(prev + 1, suggestions.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((prev) => Math.max(prev - 1, 0));
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (suggestions[activeIndex]) {
+          onSelect(suggestions[activeIndex]);
+        }
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onDismiss();
+      }
+    },
+    [visible, suggestions, activeIndex, onSelect, onDismiss]
+  );
+  useEffect7(() => {
+    if (!visible || suggestions.length === 0) return;
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => window.removeEventListener("keydown", handleKeyDown, true);
+  }, [visible, suggestions, handleKeyDown]);
+  if (!visible || suggestions.length === 0 || !position) return null;
+  const query = inputValue.toLowerCase();
+  const style = {
+    position: "fixed",
+    top: position.top,
+    left: position.left,
+    width: position.width,
+    maxHeight: 240,
+    overflowY: "auto",
+    background: "#1e1e2e",
+    border: "1px solid #45475a",
+    borderRadius: 4,
+    zIndex: 10001,
+    boxShadow: "0 4px 12px rgba(0,0,0,0.3)"
+  };
+  return createPortal(
+    /* @__PURE__ */ jsx10("div", { className: "te-suggest-dropdown", ref: listRef, style, children: suggestions.slice(0, 15).map((cls, i) => {
+      const lower = cls.toLowerCase();
+      const matchIdx = lower.indexOf(query);
+      let content = cls;
+      if (matchIdx >= 0 && query.length > 0) {
+        const before = cls.slice(0, matchIdx);
+        const match = cls.slice(matchIdx, matchIdx + query.length);
+        const after = cls.slice(matchIdx + query.length);
+        content = /* @__PURE__ */ jsxs10(Fragment4, { children: [
+          before,
+          /* @__PURE__ */ jsx10("span", { className: "te-suggest-match", children: match }),
+          after
+        ] });
+      }
+      return /* @__PURE__ */ jsx10(
+        "div",
+        {
+          className: `te-suggest-item ${i === activeIndex ? "te-suggest-item-active" : ""}`,
+          onMouseDown: (e) => {
+            e.preventDefault();
+            onSelect(cls);
+          },
+          onMouseEnter: () => setActiveIndex(i),
+          children: content
+        },
+        cls
+      );
+    }) }),
+    document.body
+  );
+}
+
+// src/core/class-dictionary.ts
+var cachedDictionary = null;
+var EXCLUDED_PREFIXES2 = ["te-", "__next", "__N_"];
+function isExcluded(cls) {
+  if (cls.length <= 1) return true;
+  if (cls.includes("[")) return true;
+  for (const prefix of EXCLUDED_PREFIXES2) {
+    if (cls.startsWith(prefix)) return true;
+  }
+  return false;
+}
+function cleanSelector(selector) {
+  let cleaned = selector.replace(/:[\w-]+(\(.*?\))?/g, "");
+  cleaned = cleaned.replace(/\\\//g, "/").replace(/\\:/g, ":").replace(/\\./g, ".");
+  return cleaned;
+}
+function extractClassesFromRule(selectorText) {
+  const classes = [];
+  const classRegex = /\.([a-zA-Z0-9_-][\w\-/:.]*)/g;
+  let match;
+  const cleaned = cleanSelector(selectorText);
+  while ((match = classRegex.exec(cleaned)) !== null) {
+    const cls = match[1];
+    if (!isExcluded(cls)) {
+      classes.push(cls);
+    }
+  }
+  return classes;
+}
+function buildClassDictionary() {
+  const classSet = /* @__PURE__ */ new Set();
+  if (typeof document === "undefined") {
+    return { allClasses: [], prefixIndex: /* @__PURE__ */ new Map() };
+  }
+  for (let i = 0; i < document.styleSheets.length; i++) {
+    const sheet = document.styleSheets[i];
+    try {
+      const rules = sheet.cssRules || sheet.rules;
+      if (!rules) continue;
+      for (let j = 0; j < rules.length; j++) {
+        const rule = rules[j];
+        if (rule instanceof CSSStyleRule) {
+          const extracted = extractClassesFromRule(rule.selectorText);
+          for (const cls of extracted) {
+            classSet.add(cls);
+          }
+        } else if (rule instanceof CSSMediaRule) {
+          for (let k = 0; k < rule.cssRules.length; k++) {
+            const innerRule = rule.cssRules[k];
+            if (innerRule instanceof CSSStyleRule) {
+              const extracted = extractClassesFromRule(innerRule.selectorText);
+              for (const cls of extracted) {
+                classSet.add(cls);
+              }
+            }
+          }
+        }
+      }
+    } catch {
+      continue;
+    }
+  }
+  const allClasses = Array.from(classSet).sort();
+  const prefixIndex = /* @__PURE__ */ new Map();
+  for (const cls of allClasses) {
+    if (cls.length < 2) continue;
+    const prefix = cls.slice(0, 2).toLowerCase();
+    const existing = prefixIndex.get(prefix);
+    if (existing) {
+      existing.push(cls);
+    } else {
+      prefixIndex.set(prefix, [cls]);
+    }
+  }
+  return { allClasses, prefixIndex };
+}
+function getClassDictionary() {
+  if (!cachedDictionary) {
+    cachedDictionary = buildClassDictionary();
+  }
+  return cachedDictionary;
+}
+function filterSuggestions(dict, input, max = 30) {
+  const query = input.trim().toLowerCase();
+  if (query.length < 2) return [];
+  const prefix = query.slice(0, 2);
+  const candidates = dict.prefixIndex.get(prefix) || [];
+  const prefixMatches = [];
+  const containsMatches = [];
+  for (const cls of candidates) {
+    if (cls.toLowerCase().startsWith(query)) {
+      prefixMatches.push(cls);
+    }
+  }
+  if (prefixMatches.length < max) {
+    const remaining = max - prefixMatches.length;
+    const prefixSet = new Set(prefixMatches);
+    for (const cls of dict.allClasses) {
+      if (prefixSet.has(cls)) continue;
+      if (cls.toLowerCase().includes(query)) {
+        containsMatches.push(cls);
+        if (containsMatches.length >= remaining) break;
+      }
+    }
+  }
+  return [...prefixMatches.slice(0, max), ...containsMatches].slice(0, max);
+}
+
+// src/components/ClassChip.tsx
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function ClassChip({
+  className,
+  isModified,
+  onUpdate,
+  onRemove,
+  conflict
+}) {
+  const [isEditing, setIsEditing] = useState11(false);
+  const [editValue, setEditValue] = useState11(className);
+  const [suggestions, setSuggestions] = useState11([]);
+  const [showSuggestions, setShowSuggestions] = useState11(false);
+  const inputRef = useRef8(null);
+  useEffect8(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+  const handleDoubleClick = useCallback14(() => {
+    setEditValue(className);
+    setIsEditing(true);
+    setSuggestions([]);
+    setShowSuggestions(false);
+  }, [className]);
+  const commitEdit = useCallback14(() => {
+    setIsEditing(false);
+    setShowSuggestions(false);
+    setSuggestions([]);
+    const trimmed = editValue.trim();
+    if (trimmed === className) return;
+    if (!trimmed) {
+      onRemove(className);
+    } else {
+      onUpdate(className, trimmed);
+    }
+  }, [editValue, className, onUpdate, onRemove]);
+  const handleKeyDown = useCallback14(
+    (e) => {
+      if (showSuggestions && suggestions.length > 0) return;
+      if (e.key === "Enter") {
+        e.preventDefault();
+        commitEdit();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setIsEditing(false);
+        setEditValue(className);
+        setShowSuggestions(false);
+        setSuggestions([]);
+      }
+    },
+    [commitEdit, className, showSuggestions, suggestions]
+  );
+  const handleInputChange = useCallback14((e) => {
+    const val = e.target.value;
+    setEditValue(val);
+    const dict = getClassDictionary();
+    const results = filterSuggestions(dict, val, 30);
+    setSuggestions(results);
+    setShowSuggestions(results.length > 0);
+  }, []);
+  const handleSuggestionSelect = useCallback14(
+    (cls) => {
+      setShowSuggestions(false);
+      setSuggestions([]);
+      setIsEditing(false);
+      if (cls !== className) {
+        onUpdate(className, cls);
+      }
+    },
+    [className, onUpdate]
+  );
+  if (isEditing) {
+    return /* @__PURE__ */ jsxs11("div", { style: { display: "inline-block" }, children: [
+      /* @__PURE__ */ jsx11(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          className: "te-chip-edit",
+          value: editValue,
+          onChange: handleInputChange,
+          onBlur: () => {
+            setTimeout(() => {
+              if (showSuggestions) return;
+              commitEdit();
+            }, 150);
+          },
+          onKeyDown: handleKeyDown,
+          style: {
+            width: Math.max(60, Math.min(200, editValue.length * 7.5 + 16))
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx11(
+        ClassSuggestionDropdown,
+        {
+          suggestions,
+          inputValue: editValue,
+          onSelect: handleSuggestionSelect,
+          onDismiss: () => setShowSuggestions(false),
+          visible: showSuggestions,
+          inputRef
+        }
+      )
+    ] });
+  }
+  const chipClass = [
+    "te-chip",
+    conflict ? "te-chip-conflict" : "",
+    isModified && !conflict ? "te-chip-modified" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs11(
+    "span",
+    {
+      className: chipClass,
+      onDoubleClick: handleDoubleClick,
+      children: [
+        /* @__PURE__ */ jsx11("span", { children: className }),
+        conflict && /* @__PURE__ */ jsxs11("span", { className: "te-chip-tooltip", children: [
+          /* @__PURE__ */ jsxs11("span", { className: "te-chip-tooltip-text", children: [
+            "Conflicts with ",
+            conflict.conflictsWith.join(", "),
+            " on ",
+            conflict.property
+          ] }),
+          "\u26A0"
+        ] }),
+        /* @__PURE__ */ jsx11(
+          "button",
+          {
+            type: "button",
+            className: "te-chip-remove",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove(className);
+            },
+            title: "Remove class",
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/core/class-conflict-detection.ts
+var PROPERTY_MAP = [
+  // Text color vs text size disambiguation
+  ["text-", "font-size", (cls) => TEXT_SIZE_KEYWORDS.has(cls)],
+  ["text-", "color", (cls) => !TEXT_SIZE_KEYWORDS.has(cls) && !isTextAlignment(cls)],
+  ["text-", "text-align", (cls) => isTextAlignment(cls)],
+  // Background
+  ["bg-", "background"],
+  // Sizing
+  ["w-", "width"],
+  ["h-", "height"],
+  ["min-w-", "min-width"],
+  ["min-h-", "min-height"],
+  ["max-w-", "max-width"],
+  ["max-h-", "max-height"],
+  // Spacing — each direction is its own group
+  ["p-", "padding"],
+  ["px-", "padding-x"],
+  ["py-", "padding-y"],
+  ["pt-", "padding-top"],
+  ["pr-", "padding-right"],
+  ["pb-", "padding-bottom"],
+  ["pl-", "padding-left"],
+  ["m-", "margin"],
+  ["mx-", "margin-x"],
+  ["my-", "margin-y"],
+  ["mt-", "margin-top"],
+  ["mr-", "margin-right"],
+  ["mb-", "margin-bottom"],
+  ["ml-", "margin-left"],
+  // Typography
+  ["font-", "font"],
+  ["leading-", "line-height"],
+  ["tracking-", "letter-spacing"],
+  // Layout
+  ["justify-", "justify-content"],
+  ["items-", "align-items"],
+  ["self-", "align-self"],
+  ["gap-", "gap"],
+  // Borders
+  ["rounded-", "border-radius"],
+  ["border-", "border"],
+  // Effects
+  ["shadow-", "box-shadow"],
+  ["opacity-", "opacity"],
+  // Display
+  ["flex", "display"],
+  ["grid", "display"],
+  ["block", "display"],
+  ["inline", "display"],
+  ["hidden", "display"],
+  // Position
+  ["absolute", "position"],
+  ["relative", "position"],
+  ["fixed", "position"],
+  ["sticky", "position"],
+  // Overflow
+  ["overflow-", "overflow"],
+  // Z-index
+  ["z-", "z-index"]
+];
+var TEXT_ALIGN_KEYWORDS2 = /* @__PURE__ */ new Set([
+  "text-left",
+  "text-center",
+  "text-right",
+  "text-justify",
+  "text-start",
+  "text-end"
+]);
+function isTextAlignment(cls) {
+  return TEXT_ALIGN_KEYWORDS2.has(cls);
+}
+function getVariantPrefix(cls) {
+  const lastColon = cls.lastIndexOf(":");
+  if (lastColon === -1) return "";
+  const prefix = cls.slice(0, lastColon + 1);
+  if (/^(hover|focus|active|disabled|group-|peer-|first|last|odd|even|focus-within|focus-visible|aria-|data-|sm|md|lg|xl|2xl|dark|print):/.test(prefix)) {
+    return prefix;
+  }
+  return "";
+}
+function getBaseClass(cls) {
+  const prefix = getVariantPrefix(cls);
+  return prefix ? cls.slice(prefix.length) : cls;
+}
+function getPropertyGroup(cls) {
+  const base = getBaseClass(cls);
+  for (const [prefix, property, filter] of PROPERTY_MAP) {
+    if (base === prefix || base.startsWith(prefix)) {
+      if (filter && !filter(base)) continue;
+      return property;
+    }
+  }
+  return null;
+}
+function detectConflicts(classes) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const cls of classes) {
+    const property = getPropertyGroup(cls);
+    if (!property) continue;
+    const variant = getVariantPrefix(cls);
+    const key = `${variant}|${property}`;
+    const existing = groups.get(key);
+    if (existing) {
+      existing.push(cls);
+    } else {
+      groups.set(key, [cls]);
+    }
+  }
+  const conflicts = [];
+  for (const [key, group] of groups) {
+    if (group.length >= 2) {
+      const property = key.split("|")[1];
+      conflicts.push({ classes: group, property });
+    }
+  }
+  return conflicts;
+}
+function getChipConflicts(cls, conflicts) {
+  for (const conflict of conflicts) {
+    if (conflict.classes.includes(cls)) {
+      const others = conflict.classes.filter((c) => c !== cls);
+      return { property: conflict.property, conflictsWith: others };
+    }
+  }
+  return void 0;
+}
+
+// src/components/ClassCategoryGroup.tsx
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+function ClassCategoryGroup({
+  category,
+  classes,
+  originalClasses,
+  onUpdate,
+  onRemove,
+  conflicts = []
+}) {
+  const hasConflict = conflicts.length > 0 && classes.some(
+    (cls) => getChipConflicts(cls, conflicts) !== void 0
+  );
+  return /* @__PURE__ */ jsxs12("div", { className: "te-class-group", children: [
+    /* @__PURE__ */ jsx12("div", { className: "te-class-group-header", children: /* @__PURE__ */ jsxs12("span", { children: [
+      category,
+      hasConflict && /* @__PURE__ */ jsxs12("span", { className: "te-conflict-warning", title: "Conflicting classes in this group", children: [
+        " ",
+        "\u26A0"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx12("div", { className: "te-class-chips", children: classes.map((cls) => /* @__PURE__ */ jsx12(
+      ClassChip,
+      {
+        className: cls,
+        isModified: !originalClasses.includes(cls),
+        onUpdate,
+        onRemove,
+        conflict: getChipConflicts(cls, conflicts)
+      },
+      cls
+    )) })
+  ] });
+}
+
+// src/components/ElementSelectorOverlay.tsx
+import { useEffect as useEffect9 } from "react";
+function ElementSelectorOverlay({
+  isActive,
+  onSelect,
+  onDeactivate
+}) {
+  useEffect9(() => {
+    if (!isActive) return;
+    const overlay = document.createElement("div");
+    overlay.style.cssText = `
+      position: fixed;
+      pointer-events: none;
+      z-index: 10000;
+      outline: 2px solid #89b4fa;
+      background: rgba(137, 180, 250, 0.08);
+      transition: top 0.05s, left 0.05s, width 0.05s, height 0.05s;
+      display: none;
+    `;
+    document.body.appendChild(overlay);
+    const handleMouseMove = (e) => {
+      const target = e.target;
+      if (!target || target === overlay) return;
+      if (target.closest(".te-drawer")) {
+        overlay.style.display = "none";
+        return;
+      }
+      const rect = target.getBoundingClientRect();
+      overlay.style.top = `${rect.top}px`;
+      overlay.style.left = `${rect.left}px`;
+      overlay.style.width = `${rect.width}px`;
+      overlay.style.height = `${rect.height}px`;
+      overlay.style.display = "block";
+    };
+    const handleClick = (e) => {
+      const target = e.target;
+      if (!target) return;
+      if (target.closest(".te-drawer")) return;
+      e.preventDefault();
+      e.stopPropagation();
+      onSelect(target);
+      onDeactivate();
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onDeactivate();
+      }
+    };
+    document.addEventListener("mousemove", handleMouseMove, true);
+    document.addEventListener("click", handleClick, true);
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove, true);
+      document.removeEventListener("click", handleClick, true);
+      document.removeEventListener("keydown", handleKeyDown, true);
+      if (overlay.parentNode) {
+        overlay.parentNode.removeChild(overlay);
+      }
+    };
+  }, [isActive, onSelect, onDeactivate]);
+  return null;
+}
+
+// src/components/TokenMigrationSuggestions.tsx
+import { useMemo as useMemo5, useState as useState12 } from "react";
+
+// src/core/token-migration-map.ts
+function getMigrationSuggestions(classes, migrationMap) {
+  const suggestions = [];
+  for (const cls of classes) {
+    const entry = migrationMap[cls];
+    if (entry) {
+      suggestions.push({
+        from: cls,
+        to: entry.replacement,
+        reason: entry.reason ?? "",
+        confidence: entry.confidence ?? "medium"
+      });
+    }
+  }
+  return suggestions;
+}
+
+// src/components/TokenMigrationSuggestions.tsx
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+function TokenMigrationSuggestions({
+  classes,
+  onApply
+}) {
+  const { migrationMap } = useDevLensConfig();
+  const [dismissed, setDismissed] = useState12(/* @__PURE__ */ new Set());
+  const suggestions = useMemo5(
+    () => getMigrationSuggestions(classes, migrationMap),
+    [classes, migrationMap]
+  );
+  const visible = suggestions.filter((s) => !dismissed.has(s.from));
+  if (visible.length === 0) return null;
+  return /* @__PURE__ */ jsxs13("div", { className: "te-migration-section", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "te-migration-header", children: [
+      "Token Migrations",
+      /* @__PURE__ */ jsx13("span", { className: "te-badge te-badge-sm", children: visible.length })
+    ] }),
+    visible.map((suggestion) => /* @__PURE__ */ jsxs13(
+      "div",
+      {
+        className: "te-migration-row",
+        onClick: () => onApply(suggestion.from, suggestion.to),
+        title: `Replace ${suggestion.from} with ${suggestion.to}`,
+        children: [
+          /* @__PURE__ */ jsx13("span", { className: "te-migration-from", children: suggestion.from }),
+          /* @__PURE__ */ jsx13("span", { className: "te-migration-arrow", children: "\u2192" }),
+          /* @__PURE__ */ jsx13("span", { className: "te-migration-to", children: suggestion.to }),
+          /* @__PURE__ */ jsx13(
+            "span",
+            {
+              className: "te-migration-confidence",
+              "data-confidence": suggestion.confidence,
+              children: suggestion.confidence
+            }
+          ),
+          /* @__PURE__ */ jsx13(
+            "button",
+            {
+              type: "button",
+              className: "te-migration-dismiss",
+              onClick: (e) => {
+                e.stopPropagation();
+                setDismissed((prev) => new Set(prev).add(suggestion.from));
+              },
+              title: "Dismiss suggestion",
+              children: "\xD7"
+            }
+          )
+        ]
+      },
+      suggestion.from
+    ))
+  ] });
+}
+
+// src/components/TypographyAudit.tsx
+import { useEffect as useEffect10, useMemo as useMemo6, useRef as useRef9, useState as useState13 } from "react";
+
+// src/core/scale-step-lookup.ts
+function getExpectedScaleStep(tagName, baseline) {
+  if (!baseline || !baseline.mapping || baseline.mapping.length === 0) return null;
+  const tag = tagName.toLowerCase();
+  const mapping = baseline.mapping.find((m) => m.selector === tag);
+  if (!mapping) return null;
+  const root = document.documentElement;
+  const style = getComputedStyle(root);
+  const fontSizeRaw = style.getPropertyValue(mapping.fontSizeVar).trim();
+  const lineHeightRaw = style.getPropertyValue(mapping.lineHeightVar).trim();
+  let expectedPx = parseFloat(fontSizeRaw);
+  if (isNaN(expectedPx)) {
+    const temp = document.createElement("div");
+    temp.style.fontSize = `var(${mapping.fontSizeVar})`;
+    temp.style.position = "absolute";
+    temp.style.visibility = "hidden";
+    document.body.appendChild(temp);
+    expectedPx = parseFloat(getComputedStyle(temp).fontSize);
+    document.body.removeChild(temp);
+  }
+  const expectedLineHeight = parseFloat(lineHeightRaw) || 1.5;
+  return { mapping, expectedPx, expectedLineHeight };
+}
+function findNearestScaleStep(computedPx, baseline) {
+  if (!baseline || !baseline.mapping || baseline.mapping.length === 0) return null;
+  const root = document.documentElement;
+  const style = getComputedStyle(root);
+  let nearest = null;
+  const seen = /* @__PURE__ */ new Set();
+  for (const mapping of baseline.mapping) {
+    if (seen.has(mapping.fontSizeVar)) continue;
+    seen.add(mapping.fontSizeVar);
+    const raw = style.getPropertyValue(mapping.fontSizeVar).trim();
+    const px = parseFloat(raw);
+    if (isNaN(px)) continue;
+    const delta = Math.abs(computedPx - px);
+    if (!nearest || delta < Math.abs(nearest.deltaPx)) {
+      nearest = { mapping, expectedPx: px, deltaPx: computedPx - px };
+    }
+  }
+  return nearest;
+}
+
+// src/components/TypographyAudit.tsx
+import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+function revertPreview(state) {
+  for (const cls of state.removedClasses) {
+    state.element.classList.add(cls);
+  }
+  if (state.addedInlineStyles) {
+    state.element.style.fontSize = state.originalInlineFontSize;
+    state.element.style.lineHeight = state.originalInlineLineHeight;
+  }
+}
+function formatDelta(delta) {
+  const rounded = Math.round(delta * 100) / 100;
+  if (rounded >= 0) return `+${rounded}px`;
+  return `\u2212${Math.abs(rounded)}px`;
+}
+function TypographyAudit({
+  element,
+  currentClasses,
+  onRemoveClass,
+  isBaselineActive,
+  onCreateToken
+}) {
+  const { scaleBaseline, projectTextSizeClasses } = useDevLensConfig();
+  const projectTextSizeSet = useMemo6(
+    () => new Set(projectTextSizeClasses),
+    [projectTextSizeClasses]
+  );
+  const [showOnScale, setShowOnScale] = useState13(false);
+  const previewStateRef = useRef9(null);
+  useEffect10(() => {
+    return () => {
+      if (previewStateRef.current) {
+        revertPreview(previewStateRef.current);
+        previewStateRef.current = null;
+      }
+    };
+  }, [element]);
+  useEffect10(() => {
+    setShowOnScale(false);
+  }, [element]);
+  const tagName = element.tagName.toLowerCase();
+  const expected = getExpectedScaleStep(tagName, scaleBaseline);
+  const computed = getComputedStyle(element);
+  const computedFontSize = parseFloat(computed.fontSize);
+  const rawLineHeight = computed.lineHeight;
+  const computedLineHeight = rawLineHeight === "normal" ? 1.5 : parseFloat(rawLineHeight) / computedFontSize;
+  const fontSizeClasses = findFontSizeClasses(currentClasses, projectTextSizeSet);
+  const viaClass = fontSizeClasses.length > 0 ? fontSizeClasses[0] : null;
+  const handleTogglePreview = (checked) => {
+    if (!expected) return;
+    if (checked) {
+      const state = {
+        element,
+        removedClasses: [...fontSizeClasses],
+        originalInlineFontSize: element.style.fontSize,
+        originalInlineLineHeight: element.style.lineHeight,
+        addedInlineStyles: false,
+        fontSizeVar: expected.mapping.fontSizeVar,
+        lineHeightVar: expected.mapping.lineHeightVar
+      };
+      for (const cls of fontSizeClasses) {
+        element.classList.remove(cls);
+      }
+      if (!isBaselineActive) {
+        element.style.fontSize = `var(${expected.mapping.fontSizeVar})`;
+        element.style.lineHeight = `var(${expected.mapping.lineHeightVar})`;
+        state.addedInlineStyles = true;
+      }
+      previewStateRef.current = state;
+      setShowOnScale(true);
+    } else {
+      if (previewStateRef.current) {
+        revertPreview(previewStateRef.current);
+        previewStateRef.current = null;
+      }
+      setShowOnScale(false);
+    }
+  };
+  const handleStripOverride = () => {
+    if (previewStateRef.current) {
+      revertPreview(previewStateRef.current);
+      previewStateRef.current = null;
+      setShowOnScale(false);
+    }
+    for (const cls of fontSizeClasses) {
+      onRemoveClass(cls);
+    }
+  };
+  if (!expected) {
+    const nearest = findNearestScaleStep(computedFontSize, scaleBaseline);
+    return /* @__PURE__ */ jsxs14("div", { className: "te-typo-audit", children: [
+      /* @__PURE__ */ jsx14("div", { className: "te-typo-audit-header", children: "Typography Audit" }),
+      /* @__PURE__ */ jsxs14("div", { className: "te-typo-status", style: { color: "#6c7086" }, children: [
+        "No scale mapping for <",
+        tagName,
+        ">"
+      ] }),
+      /* @__PURE__ */ jsxs14("div", { className: "te-typo-detail", children: [
+        "Computed: ",
+        Math.round(computedFontSize * 100) / 100,
+        "px \xB7 Line-height: ",
+        Math.round(computedLineHeight * 100) / 100
+      ] }),
+      nearest && /* @__PURE__ */ jsxs14("div", { className: "te-typo-detail-muted", children: [
+        "Nearest: ",
+        nearest.mapping.scaleLabel,
+        " (",
+        Math.round(nearest.expectedPx * 100) / 100,
+        "px)",
+        Math.abs(nearest.deltaPx) <= 0.5 ? " \u2713" : ` (${formatDelta(nearest.deltaPx)})`
+      ] })
+    ] });
+  }
+  const deltaPx = computedFontSize - expected.expectedPx;
+  const absDelta = Math.abs(deltaPx);
+  const lineHeightDiff = Math.abs(computedLineHeight - expected.expectedLineHeight);
+  if (absDelta <= 0.5) {
+    return /* @__PURE__ */ jsxs14("div", { className: "te-typo-audit", children: [
+      /* @__PURE__ */ jsx14("div", { className: "te-typo-audit-header", children: "Typography Audit" }),
+      /* @__PURE__ */ jsx14("div", { className: "te-typo-status", style: { color: "#a6e3a1" }, children: "\u2713 On scale" }),
+      /* @__PURE__ */ jsxs14("div", { className: "te-typo-detail", children: [
+        "<",
+        tagName,
+        "> \u2192 ",
+        expected.mapping.scaleLabel,
+        " (",
+        Math.round(expected.expectedPx * 100) / 100,
+        "px)"
+      ] }),
+      /* @__PURE__ */ jsxs14("div", { className: "te-typo-detail-muted", children: [
+        "Computed: ",
+        Math.round(computedFontSize * 100) / 100,
+        "px \xB7 Line-height: ",
+        Math.round(computedLineHeight * 100) / 100
+      ] })
+    ] });
+  }
+  if (absDelta <= 3) {
+    return /* @__PURE__ */ jsxs14("div", { className: "te-typo-audit", children: [
+      /* @__PURE__ */ jsx14("div", { className: "te-typo-audit-header", children: "Typography Audit" }),
+      /* @__PURE__ */ jsxs14("div", { className: "te-typo-status", style: { color: "#f9e2af" }, children: [
+        "\u2248 Near scale (",
+        formatDelta(deltaPx),
+        ")"
+      ] }),
+      /* @__PURE__ */ jsxs14("div", { className: "te-typo-detail", children: [
+        "<",
+        tagName,
+        "> \u2192 ",
+        expected.mapping.scaleLabel,
+        " (expected ",
+        Math.round(expected.expectedPx * 100) / 100,
+        "px)"
+      ] }),
+      /* @__PURE__ */ jsxs14("div", { className: "te-typo-detail", children: [
+        "Computed: ",
+        Math.round(computedFontSize * 100) / 100,
+        "px",
+        viaClass ? ` via ${viaClass}` : " via inherited"
+      ] }),
+      lineHeightDiff > 0.02 && /* @__PURE__ */ jsxs14("div", { className: "te-typo-detail-muted", children: [
+        "Line-height: ",
+        Math.round(computedLineHeight * 100) / 100,
+        " (expected ",
+        expected.expectedLineHeight,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsxs14("div", { className: "te-typo-actions", children: [
+        /* @__PURE__ */ jsx14(
+          InspectorSwitch,
+          {
+            checked: showOnScale,
+            onChange: () => handleTogglePreview(!showOnScale),
+            labelOn: "Previewing",
+            labelOff: "Show on-scale",
+            compact: true
+          }
+        ),
+        /* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: 4, marginLeft: "auto" }, children: [
+          onCreateToken && /* @__PURE__ */ jsx14(
+            "button",
+            {
+              type: "button",
+              className: "te-btn te-btn-secondary",
+              onClick: () => {
+                const props = [
+                  { property: "font-size", value: `${Math.round(computedFontSize * 100) / 100}px` }
+                ];
+                if (lineHeightDiff > 0.02) {
+                  props.push({ property: "line-height", value: `${Math.round(computedLineHeight * 100) / 100}` });
+                }
+                onCreateToken({
+                  source: "deviation",
+                  properties: props,
+                  elementTag: tagName,
+                  computedFontSize,
+                  expectedPx: expected.expectedPx,
+                  scaleLabel: expected.mapping.scaleLabel
+                });
+              },
+              children: "Create token \u2192"
+            }
+          ),
+          fontSizeClasses.length > 0 && /* @__PURE__ */ jsx14(
+            "button",
+            {
+              type: "button",
+              className: "te-btn te-btn-secondary",
+              onClick: handleStripOverride,
+              children: "Strip override"
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs14("div", { className: "te-typo-audit", children: [
+    /* @__PURE__ */ jsx14("div", { className: "te-typo-audit-header", children: "Typography Audit" }),
+    /* @__PURE__ */ jsxs14("div", { className: "te-typo-status", style: { color: "#fab387" }, children: [
+      "\u26A1 Off-scale (",
+      formatDelta(deltaPx),
+      ")"
+    ] }),
+    /* @__PURE__ */ jsxs14("div", { className: "te-typo-detail", children: [
+      "<",
+      tagName,
+      "> \u2192 ",
+      expected.mapping.scaleLabel,
+      " (expected ",
+      Math.round(expected.expectedPx * 100) / 100,
+      "px)"
+    ] }),
+    /* @__PURE__ */ jsxs14("div", { className: "te-typo-detail", children: [
+      "Computed: ",
+      Math.round(computedFontSize * 100) / 100,
+      "px",
+      viaClass ? ` via ${viaClass}` : " via inherited"
+    ] }),
+    lineHeightDiff > 0.02 && /* @__PURE__ */ jsxs14("div", { className: "te-typo-detail-muted", children: [
+      "Line-height: ",
+      Math.round(computedLineHeight * 100) / 100,
+      " (expected ",
+      expected.expectedLineHeight,
+      ")"
+    ] }),
+    /* @__PURE__ */ jsxs14("div", { className: "te-typo-actions", children: [
+      /* @__PURE__ */ jsx14(
+        InspectorSwitch,
+        {
+          checked: showOnScale,
+          onChange: () => handleTogglePreview(!showOnScale),
+          labelOn: "Previewing",
+          labelOff: "Show on-scale",
+          compact: true
+        }
+      ),
+      onCreateToken ? /* @__PURE__ */ jsx14(
+        "button",
+        {
+          type: "button",
+          className: "te-btn te-btn-secondary",
+          style: { marginLeft: "auto" },
+          onClick: () => {
+            const props = [
+              { property: "font-size", value: `${Math.round(computedFontSize * 100) / 100}px` }
+            ];
+            if (lineHeightDiff > 0.02) {
+              props.push({ property: "line-height", value: `${Math.round(computedLineHeight * 100) / 100}` });
+            }
+            const computed2 = getComputedStyle(element);
+            const fontWeight = computed2.fontWeight;
+            if (fontWeight && fontWeight !== "400") {
+              props.push({ property: "font-weight", value: fontWeight });
+            }
+            const letterSpacing = computed2.letterSpacing;
+            if (letterSpacing && letterSpacing !== "normal" && letterSpacing !== "0px") {
+              props.push({ property: "letter-spacing", value: letterSpacing });
+            }
+            onCreateToken({
+              source: "deviation",
+              properties: props,
+              elementTag: tagName,
+              computedFontSize,
+              expectedPx: expected.expectedPx,
+              scaleLabel: expected.mapping.scaleLabel
+            });
+          },
+          children: "Create token \u2192"
+        }
+      ) : /* @__PURE__ */ jsx14(
+        "button",
+        {
+          type: "button",
+          className: "te-btn te-btn-secondary",
+          style: { marginLeft: "auto", opacity: 0.5, cursor: "not-allowed" },
+          disabled: true,
+          title: "Available in a future update",
+          children: "Create token \u2192"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/RawCssInput.tsx
+import { useCallback as useCallback15, useRef as useRef10, useState as useState14 } from "react";
+import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+function parseCssInput(input) {
+  const results = [];
+  const declarations = input.split(";").filter((s) => s.trim());
+  for (const decl of declarations) {
+    const colonIdx = decl.indexOf(":");
+    if (colonIdx === -1) continue;
+    const property = decl.slice(0, colonIdx).trim();
+    const value = decl.slice(colonIdx + 1).trim();
+    if (property && value) {
+      results.push({ property, value });
+    }
+  }
+  return results;
+}
+function RawCssInput({
+  customStyles,
+  onAddStyle,
+  onRemoveStyle,
+  onClearAll,
+  onCreateToken,
+  elementTag
+}) {
+  const [inputValue, setInputValue] = useState14("");
+  const [editingProp, setEditingProp] = useState14(null);
+  const [editValue, setEditValue] = useState14("");
+  const inputRef = useRef10(null);
+  const editRef = useRef10(null);
+  const handleSubmit = useCallback15(() => {
+    const parsed = parseCssInput(inputValue);
+    for (const { property, value } of parsed) {
+      onAddStyle(property, value);
+    }
+    if (parsed.length > 0) {
+      setInputValue("");
+    }
+  }, [inputValue, onAddStyle]);
+  const handleKeyDown = useCallback15(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleSubmit();
+      } else if (e.key === "Escape") {
+        setInputValue("");
+        inputRef.current?.blur();
+      }
+    },
+    [handleSubmit]
+  );
+  const handleStartEdit = useCallback15(
+    (property, value) => {
+      setEditingProp(property);
+      setEditValue(value);
+      requestAnimationFrame(() => editRef.current?.focus());
+    },
+    []
+  );
+  const handleEditCommit = useCallback15(() => {
+    if (editingProp && editValue.trim()) {
+      onAddStyle(editingProp, editValue.trim());
+    }
+    setEditingProp(null);
+    setEditValue("");
+  }, [editingProp, editValue, onAddStyle]);
+  const handleEditKeyDown = useCallback15(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleEditCommit();
+      } else if (e.key === "Escape") {
+        setEditingProp(null);
+        setEditValue("");
+      }
+    },
+    [handleEditCommit]
+  );
+  const handleCreateToken = useCallback15(() => {
+    if (!onCreateToken || customStyles.length === 0) return;
+    onCreateToken({
+      source: "custom-css",
+      properties: customStyles.map((s) => ({
+        property: s.property,
+        value: s.value
+      })),
+      elementTag
+    });
+  }, [onCreateToken, customStyles, elementTag]);
+  return /* @__PURE__ */ jsxs15("div", { className: "te-raw-css-section", children: [
+    /* @__PURE__ */ jsxs15("div", { className: "te-class-group-header", style: { marginBottom: 4 }, children: [
+      /* @__PURE__ */ jsx15("span", { children: "Custom Styles" }),
+      customStyles.length > 0 && /* @__PURE__ */ jsx15(
+        "button",
+        {
+          type: "button",
+          className: "te-raw-css-clear",
+          onClick: onClearAll,
+          children: "Clear all"
+        }
+      )
+    ] }),
+    customStyles.length > 0 && /* @__PURE__ */ jsx15("div", { className: "te-class-chips", style: { marginBottom: 6 }, children: customStyles.map((entry) => /* @__PURE__ */ jsxs15("span", { className: "te-chip te-chip-custom", children: [
+      /* @__PURE__ */ jsxs15("span", { className: "te-chip-prop", children: [
+        entry.property,
+        ":"
+      ] }),
+      editingProp === entry.property ? /* @__PURE__ */ jsx15(
+        "input",
+        {
+          ref: editRef,
+          type: "text",
+          className: "te-chip-edit",
+          value: editValue,
+          onChange: (e) => setEditValue(e.target.value),
+          onKeyDown: handleEditKeyDown,
+          onBlur: handleEditCommit,
+          style: { width: Math.max(40, editValue.length * 7) }
+        }
+      ) : /* @__PURE__ */ jsx15(
+        "span",
+        {
+          className: "te-chip-value",
+          onDoubleClick: () => handleStartEdit(entry.property, entry.value),
+          title: "Double-click to edit value",
+          children: entry.value
+        }
+      ),
+      /* @__PURE__ */ jsx15(
+        "button",
+        {
+          type: "button",
+          className: "te-chip-remove",
+          onClick: () => onRemoveStyle(entry.property),
+          children: "\xD7"
+        }
+      )
+    ] }, entry.property)) }),
+    /* @__PURE__ */ jsx15(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        className: "te-add-class-input",
+        value: inputValue,
+        onChange: (e) => setInputValue(e.target.value),
+        onKeyDown: handleKeyDown,
+        placeholder: "font-size: 18px; color: red",
+        style: { width: "100%" }
+      }
+    ),
+    customStyles.length > 0 && onCreateToken && /* @__PURE__ */ jsx15(
+      "button",
+      {
+        type: "button",
+        className: "te-btn te-btn-secondary",
+        onClick: handleCreateToken,
+        style: { marginTop: 6, width: "100%", justifyContent: "center" },
+        children: "Create token \u2192"
+      }
+    )
+  ] });
+}
+
+// src/components/TokenCreationForm.tsx
+import { useCallback as useCallback16, useMemo as useMemo7, useState as useState15 } from "react";
+import { Copy as Copy4, Check as Check3 } from "lucide-react";
+import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+function toKebab2(str) {
+  return str.toLowerCase().replace(/[^a-z0-9-]/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+}
+function TokenCreationForm({
+  context,
+  onBack,
+  onApplyLocally
+}) {
+  const [tokenName, setTokenName] = useState15(() => {
+    if (context.source === "deviation" && context.scaleLabel) {
+      return toKebab2(context.scaleLabel) + "-override";
+    }
+    return "";
+  });
+  const [selectedProps, setSelectedProps] = useState15(() => {
+    const set = /* @__PURE__ */ new Set();
+    for (const p of context.properties) {
+      set.add(p.property);
+    }
+    return set;
+  });
+  const [scaleType, setScaleType] = useState15("independent");
+  const [copied, setCopied] = useState15(false);
+  const { tokenOverrides } = useDevLensConfig();
+  const registry = useMemo7(
+    () => buildRegistry(autoDetectTokens(), tokenOverrides),
+    [tokenOverrides]
+  );
+  const kebabName = toKebab2(tokenName);
+  const collision = useMemo7(() => {
+    if (!kebabName) return false;
+    return `--${kebabName}` in registry;
+  }, [kebabName, registry]);
+  const multiplier = useMemo7(() => {
+    if (context.source !== "deviation" || !context.computedFontSize) return void 0;
+    const fontBase = 16;
+    return Math.round(context.computedFontSize / fontBase * 1e3) / 1e3;
+  }, [context]);
+  const toggleProp = useCallback16((prop) => {
+    setSelectedProps((prev) => {
+      const next = new Set(prev);
+      if (next.has(prop)) {
+        if (context.source === "deviation" && prop === "font-size") return prev;
+        next.delete(prop);
+      } else {
+        next.add(prop);
+      }
+      return next;
+    });
+  }, [context.source]);
+  const activeProperties = useMemo7(
+    () => context.properties.filter((p) => selectedProps.has(p.property)),
+    [context.properties, selectedProps]
+  );
+  const outputPreview = useMemo7(() => {
+    if (!kebabName || activeProperties.length === 0) return "";
+    const lines = [];
+    lines.push("/* :root */");
+    for (const p of activeProperties) {
+      if (scaleType === "derived" && multiplier && p.property === "font-size") {
+        lines.push(`--${kebabName}-${p.property}: calc(var(--font-base) * ${multiplier});`);
+      } else {
+        lines.push(`--${kebabName}-${p.property}: ${p.value};`);
+      }
+    }
+    lines.push("");
+    lines.push("/* @theme inline */");
+    for (const p of activeProperties) {
+      lines.push(`--${kebabName}-${p.property}: var(--${kebabName}-${p.property});`);
+    }
+    lines.push("");
+    lines.push("/* token-registry.ts */");
+    for (const p of activeProperties) {
+      lines.push(`'--${kebabName}-${p.property}': { group: 'Typography Scale' },`);
+    }
+    return lines.join("\n");
+  }, [kebabName, activeProperties, scaleType, multiplier]);
+  const handleCopy = useCallback16(async () => {
+    const prompt = generateCCPrompt({
+      tokenName: kebabName,
+      properties: activeProperties.map((p) => ({
+        property: p.property,
+        value: p.value,
+        locked: context.source === "deviation" && p.property === "font-size"
+      })),
+      context: context.source,
+      elementTag: context.elementTag,
+      elementPath: context.elementPath,
+      scaleRelationship: context.source === "deviation" ? {
+        type: scaleType,
+        baseVar: "--font-base",
+        multiplier: scaleType === "derived" ? multiplier : void 0
+      } : void 0
+    });
+    try {
+      await navigator.clipboard.writeText(prompt);
+    } catch {
+      const textarea = document.createElement("textarea");
+      textarea.value = prompt;
+      textarea.style.position = "fixed";
+      textarea.style.opacity = "0";
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  }, [kebabName, activeProperties, context, scaleType, multiplier]);
+  const handleApplyLocally = useCallback16(() => {
+    if (onApplyLocally && kebabName) {
+      onApplyLocally(kebabName, activeProperties);
+    }
+  }, [onApplyLocally, kebabName, activeProperties]);
+  const isValid = kebabName.length > 0 && !collision && activeProperties.length > 0;
+  return /* @__PURE__ */ jsxs16("div", { className: "te-token-form", children: [
+    /* @__PURE__ */ jsx16(
+      "button",
+      {
+        type: "button",
+        className: "te-token-form-back",
+        onClick: onBack,
+        children: "\u2190 Back"
+      }
+    ),
+    /* @__PURE__ */ jsx16("div", { className: "te-token-form-title", children: "Create Token" }),
+    /* @__PURE__ */ jsx16("div", { className: "te-token-form-context", children: context.source === "deviation" ? /* @__PURE__ */ jsxs16("span", { children: [
+      "From typography deviation on <",
+      context.elementTag,
+      ">"
+    ] }) : /* @__PURE__ */ jsxs16("span", { children: [
+      "From custom CSS on <",
+      context.elementTag,
+      ">"
+    ] }) }),
+    /* @__PURE__ */ jsxs16("div", { className: "te-token-form-field", children: [
+      /* @__PURE__ */ jsx16("label", { className: "te-label", children: "Token Name" }),
+      /* @__PURE__ */ jsxs16("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+        /* @__PURE__ */ jsx16("span", { className: "te-muted", children: "--" }),
+        /* @__PURE__ */ jsx16(
+          "input",
+          {
+            type: "text",
+            className: "te-text-input",
+            value: tokenName,
+            onChange: (e) => setTokenName(e.target.value),
+            placeholder: "my-custom-size",
+            style: { flex: 1 }
+          }
+        )
+      ] }),
+      collision && /* @__PURE__ */ jsx16("div", { className: "te-token-form-error", children: "Token name already exists in the registry" })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "te-token-form-field", children: [
+      /* @__PURE__ */ jsx16("label", { className: "te-label", children: "Properties" }),
+      context.properties.map((p) => {
+        const isLocked = context.source === "deviation" && p.property === "font-size";
+        return /* @__PURE__ */ jsxs16("label", { className: "te-token-form-checkbox", children: [
+          /* @__PURE__ */ jsx16(
+            "input",
+            {
+              type: "checkbox",
+              checked: selectedProps.has(p.property),
+              onChange: () => toggleProp(p.property),
+              disabled: isLocked
+            }
+          ),
+          /* @__PURE__ */ jsxs16("span", { className: "te-token-form-prop-name", children: [
+            p.property,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsx16("span", { className: "te-token-form-prop-value", children: p.value }),
+          isLocked && /* @__PURE__ */ jsx16("span", { className: "te-muted", children: "(locked)" })
+        ] }, p.property);
+      })
+    ] }),
+    context.source === "deviation" && /* @__PURE__ */ jsxs16("div", { className: "te-token-form-field", children: [
+      /* @__PURE__ */ jsx16("label", { className: "te-label", children: "Scale Relationship" }),
+      /* @__PURE__ */ jsxs16("div", { className: "te-token-form-radio-group", children: [
+        /* @__PURE__ */ jsxs16("label", { className: "te-token-form-radio", children: [
+          /* @__PURE__ */ jsx16(
+            "input",
+            {
+              type: "radio",
+              name: "scaleType",
+              value: "independent",
+              checked: scaleType === "independent",
+              onChange: () => setScaleType("independent")
+            }
+          ),
+          "Independent"
+        ] }),
+        /* @__PURE__ */ jsxs16("label", { className: "te-token-form-radio", children: [
+          /* @__PURE__ */ jsx16(
+            "input",
+            {
+              type: "radio",
+              name: "scaleType",
+              value: "derived",
+              checked: scaleType === "derived",
+              onChange: () => setScaleType("derived")
+            }
+          ),
+          "Derived from --font-base",
+          scaleType === "derived" && multiplier && /* @__PURE__ */ jsxs16("span", { className: "te-muted", style: { marginLeft: 4 }, children: [
+            "(",
+            multiplier,
+            "\xD7)"
+          ] })
+        ] })
+      ] })
+    ] }),
+    kebabName && activeProperties.length > 0 && /* @__PURE__ */ jsxs16("div", { className: "te-token-form-field", children: [
+      /* @__PURE__ */ jsx16("label", { className: "te-label", children: "Output Preview" }),
+      /* @__PURE__ */ jsx16("pre", { className: "te-diff-content", style: { fontSize: 10 }, children: outputPreview })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "te-token-form-actions", children: [
+      /* @__PURE__ */ jsxs16(
+        "button",
+        {
+          type: "button",
+          className: "te-btn te-btn-primary",
+          onClick: handleCopy,
+          disabled: !isValid,
+          style: !isValid ? { opacity: 0.5, cursor: "not-allowed" } : void 0,
+          children: [
+            copied ? /* @__PURE__ */ jsx16(Check3, { size: 12 }) : /* @__PURE__ */ jsx16(Copy4, { size: 12 }),
+            copied ? "Copied!" : "Copy as CC Prompt"
+          ]
+        }
+      ),
+      onApplyLocally && /* @__PURE__ */ jsx16(
+        "button",
+        {
+          type: "button",
+          className: "te-btn te-btn-secondary",
+          onClick: handleApplyLocally,
+          disabled: !isValid,
+          style: !isValid ? { opacity: 0.5, cursor: "not-allowed" } : void 0,
+          children: "Apply Locally"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/ElementInspectorTab.tsx
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+function ElementInspectorTab({
+  inspector,
+  isDetached,
+  scaleBaseline
+}) {
+  const { projectTextSizeClasses } = useDevLensConfig();
+  const projectTextSizeSet = useMemo8(
+    () => new Set(projectTextSizeClasses),
+    [projectTextSizeClasses]
+  );
+  const [addValue, setAddValue] = useState16("");
+  const [suggestions, setSuggestions] = useState16([]);
+  const [showSuggestions, setShowSuggestions] = useState16(false);
+  const addInputRef = useRef11(null);
+  const [showTokenForm, setShowTokenForm] = useState16(false);
+  const [tokenFormContext, setTokenFormContext] = useState16(null);
+  const prevElementRef = useRef11(null);
+  useEffect11(() => {
+    const currentEl = inspector.selectedElement;
+    if (prevElementRef.current && prevElementRef.current !== currentEl) {
+      if (inspector.customStyles.length > 0) {
+        inspector.clearCustomStyles();
+      }
+      setShowTokenForm(false);
+      setTokenFormContext(null);
+    }
+    prevElementRef.current = currentEl;
+  }, [inspector.selectedElement]);
+  useEffect11(() => {
+    if (!isDetached && !inspector.selectedElement && !inspector.isSelectorActive) {
+      inspector.activateSelector();
+    }
+    return () => {
+      inspector.deactivateSelector();
+    };
+  }, []);
+  const identifier = inspector.selectedElement ? inspector.getElementIdentifier() : null;
+  const categoryGroups = categorizeClasses(inspector.currentClasses, projectTextSizeSet);
+  const conflicts = useMemo8(
+    () => detectConflicts(inspector.currentClasses),
+    [inspector.currentClasses]
+  );
+  const handleGeneralAdd = useCallback17(() => {
+    const trimmed = addValue.trim();
+    if (trimmed) {
+      inspector.addClass(trimmed);
+      setAddValue("");
+      setSuggestions([]);
+      setShowSuggestions(false);
+      const input = addInputRef.current;
+      if (input) {
+        input.classList.add("te-add-success");
+        setTimeout(() => input.classList.remove("te-add-success"), 300);
+        requestAnimationFrame(() => input.focus());
+      }
+    }
+  }, [addValue, inspector]);
+  const handleGeneralAddKeyDown = useCallback17(
+    (e) => {
+      if (showSuggestions && suggestions.length > 0) {
+        if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "Escape") return;
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleGeneralAdd();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setAddValue("");
+        setShowSuggestions(false);
+        setSuggestions([]);
+        addInputRef.current?.blur();
+      }
+    },
+    [handleGeneralAdd, showSuggestions, suggestions]
+  );
+  const handleGeneralAddBlur = useCallback17(() => {
+    setTimeout(() => {
+      const trimmed = addValue.trim();
+      if (trimmed) {
+        inspector.addClass(trimmed);
+        setAddValue("");
+        setSuggestions([]);
+        setShowSuggestions(false);
+      }
+    }, 200);
+  }, [addValue, inspector]);
+  const handleAddChange = useCallback17((e) => {
+    const val = e.target.value;
+    setAddValue(val);
+    const dict = getClassDictionary();
+    const results = filterSuggestions(dict, val, 30);
+    setSuggestions(results);
+    setShowSuggestions(results.length > 0);
+  }, []);
+  const handleSuggestionSelect = useCallback17(
+    (cls) => {
+      inspector.addClass(cls);
+      setAddValue("");
+      setSuggestions([]);
+      setShowSuggestions(false);
+      requestAnimationFrame(() => addInputRef.current?.focus());
+    },
+    [inspector]
+  );
+  const handleCreateToken = useCallback17((context) => {
+    setTokenFormContext(context);
+    setShowTokenForm(true);
+  }, []);
+  const handleTokenFormBack = useCallback17(() => {
+    setShowTokenForm(false);
+    setTokenFormContext(null);
+  }, []);
+  if (isDetached) {
+    return /* @__PURE__ */ jsxs17("div", { className: "te-inspector-empty", children: [
+      /* @__PURE__ */ jsx17("p", { style: { marginBottom: 4 }, children: "Inspector requires docked mode." }),
+      /* @__PURE__ */ jsx17("p", { className: "te-muted", children: "Detached mode coming in a future update." })
+    ] });
+  }
+  if (!inspector.selectedElement || !identifier) {
+    return /* @__PURE__ */ jsxs17("div", { className: "te-inspector-empty", children: [
+      inspector.isSelectorActive ? /* @__PURE__ */ jsx17("p", { children: "Click any element on the page to inspect it" }) : /* @__PURE__ */ jsxs17(Fragment5, { children: [
+        /* @__PURE__ */ jsx17("p", { style: { marginBottom: 12 }, children: "Select an element to inspect its classes" }),
+        /* @__PURE__ */ jsxs17(
+          "button",
+          {
+            type: "button",
+            className: "te-btn te-btn-secondary",
+            onClick: () => inspector.activateSelector(),
+            children: [
+              /* @__PURE__ */ jsx17(MousePointer, { size: 12 }),
+              "Select Element"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx17(
+        ElementSelectorOverlay,
+        {
+          isActive: inspector.isSelectorActive,
+          onSelect: inspector.selectElement,
+          onDeactivate: () => {
+            if (inspector.isSelectorActive) inspector.toggleSelector();
+          }
+        }
+      )
+    ] });
+  }
+  if (showTokenForm && tokenFormContext) {
+    return /* @__PURE__ */ jsx17("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: /* @__PURE__ */ jsx17("div", { style: { flex: 1, overflowY: "auto" }, children: /* @__PURE__ */ jsx17(
+      TokenCreationForm,
+      {
+        context: tokenFormContext,
+        onBack: handleTokenFormBack,
+        onApplyLocally: (tokenName, properties) => {
+          for (const p of properties) {
+            inspector.addCustomStyle(p.property, p.value);
+          }
+          handleTokenFormBack();
+        }
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsxs17("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ jsxs17("div", { className: "te-element-info", children: [
+      /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 4 }, children: [
+        /* @__PURE__ */ jsxs17("span", { className: "te-element-tag", children: [
+          "<",
+          identifier.tagName,
+          ">"
+        ] }),
+        /* @__PURE__ */ jsx17(
+          InspectorSwitch,
+          {
+            checked: inspector.isSelectorActive,
+            onChange: inspector.toggleSelector,
+            labelOn: "Selecting\u2026",
+            labelOff: "Re-select",
+            compact: true
+          }
+        )
+      ] }),
+      identifier.textPreview && /* @__PURE__ */ jsxs17("div", { className: "te-element-text", children: [
+        '"',
+        identifier.textPreview,
+        '"'
+      ] }),
+      /* @__PURE__ */ jsx17("div", { className: "te-breadcrumb", children: identifier.breadcrumb.map((segment, i) => /* @__PURE__ */ jsxs17("span", { children: [
+        i > 0 && /* @__PURE__ */ jsx17("span", { style: { color: "#45475a", margin: "0 2px" }, children: "\u203A" }),
+        segment
+      ] }, i)) }),
+      identifier.testId && /* @__PURE__ */ jsxs17("div", { className: "te-muted", style: { marginTop: 2 }, children: [
+        'data-testid="',
+        identifier.testId,
+        '"'
+      ] }),
+      identifier.id && /* @__PURE__ */ jsxs17("div", { className: "te-muted", style: { marginTop: 2 }, children: [
+        'id="',
+        identifier.id,
+        '"'
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs17("div", { style: { flex: 1, overflowY: "auto" }, children: [
+      categoryGroups.length === 0 ? /* @__PURE__ */ jsx17("div", { className: "te-muted", style: { textAlign: "center", padding: 16 }, children: "No classes on this element." }) : categoryGroups.map((group) => /* @__PURE__ */ jsx17(
+        ClassCategoryGroup,
+        {
+          category: group.category,
+          classes: group.classes,
+          originalClasses: inspector.originalClasses,
+          onUpdate: inspector.updateClass,
+          onRemove: inspector.removeClass,
+          conflicts
+        },
+        group.category
+      )),
+      inspector.selectedElement && /* @__PURE__ */ jsx17(
+        TypographyAudit,
+        {
+          element: inspector.selectedElement,
+          currentClasses: inspector.currentClasses,
+          onRemoveClass: inspector.removeClass,
+          isBaselineActive: scaleBaseline.isActive,
+          onCreateToken: handleCreateToken
+        }
+      ),
+      /* @__PURE__ */ jsx17(
+        TokenMigrationSuggestions,
+        {
+          classes: inspector.currentClasses,
+          onApply: inspector.updateClass
+        }
+      ),
+      /* @__PURE__ */ jsx17("div", { style: { padding: "8px 0", borderTop: "1px solid #313244", marginTop: 4 }, children: /* @__PURE__ */ jsx17(
+        RawCssInput,
+        {
+          customStyles: inspector.customStyles,
+          onAddStyle: inspector.addCustomStyle,
+          onRemoveStyle: inspector.removeCustomStyle,
+          onClearAll: inspector.clearCustomStyles,
+          onCreateToken: handleCreateToken,
+          elementTag: identifier.tagName
+        }
+      ) }),
+      /* @__PURE__ */ jsxs17("div", { style: { padding: "8px 0", borderTop: "1px solid #313244", marginTop: 4 }, children: [
+        /* @__PURE__ */ jsx17("div", { className: "te-class-group-header", style: { marginBottom: 4 }, children: /* @__PURE__ */ jsx17("span", { children: "Add Class" }) }),
+        /* @__PURE__ */ jsxs17("div", { children: [
+          /* @__PURE__ */ jsx17(
+            "input",
+            {
+              ref: addInputRef,
+              type: "text",
+              className: "te-add-class-input",
+              value: addValue,
+              onChange: handleAddChange,
+              onKeyDown: handleGeneralAddKeyDown,
+              onBlur: handleGeneralAddBlur,
+              placeholder: "Type class name\u2026",
+              style: { width: "100%" }
+            }
+          ),
+          /* @__PURE__ */ jsx17(
+            ClassSuggestionDropdown,
+            {
+              suggestions,
+              inputValue: addValue,
+              onSelect: handleSuggestionSelect,
+              onDismiss: () => setShowSuggestions(false),
+              visible: showSuggestions,
+              inputRef: addInputRef
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx17("div", { style: { padding: "8px 0", borderTop: "1px solid #313244", marginTop: 4, textAlign: "center" }, children: /* @__PURE__ */ jsx17(
+        "button",
+        {
+          type: "button",
+          className: "te-btn te-btn-secondary",
+          onClick: () => {
+            inspector.clearSelection();
+            inspector.activateSelector();
+          },
+          children: "Cancel"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx17(
+      ElementSelectorOverlay,
+      {
+        isActive: inspector.isSelectorActive,
+        onSelect: inspector.selectElement,
+        onDeactivate: () => {
+          if (inspector.isSelectorActive) inspector.toggleSelector();
+        }
+      }
+    )
+  ] });
+}
+
+// src/components/DevLensDrawer.tsx
+import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
+var DRAWER_SIZE = 360;
+var dockIcons = [
+  { pos: "left", icon: PanelLeft, label: "Dock left" },
+  { pos: "right", icon: PanelRight, label: "Dock right" },
+  { pos: "bottom", icon: PanelBottom, label: "Dock bottom" },
+  { pos: "detached", icon: ExternalLink, label: "Detach window" }
+];
+function DevLensDrawer() {
+  const { dock, setDock, isOpen, setIsOpen } = useDockPosition();
+  const { isDetached, detach, reattach } = useDetachedWindow();
+  const { previewFontFamily } = useDevLensConfig();
+  const editor = useTokenEditor();
+  const inspector = useElementInspector();
+  const scaleBaseline = useScaleBaseline();
+  const [activeTab, setActiveTab] = useState17("tokens");
+  const changeCount = editor.getChangeCount();
+  const combinedChangeCount = changeCount + inspector.changeCount + inspector.customStyleChangeCount;
+  const handleDockChange = (pos) => {
+    if (pos === "detached") {
+      detach();
+      setIsOpen(false);
+    } else {
+      if (isDetached) reattach();
+      setDock(pos);
+      setIsOpen(true);
+    }
+  };
+  useEffect12(() => {
+    if (!isOpen || isDetached) {
+      document.body.style.marginLeft = "";
+      document.body.style.marginRight = "";
+      document.body.style.marginBottom = "";
+      return;
+    }
+    const px = `${DRAWER_SIZE}px`;
+    if (dock === "left") {
+      document.body.style.marginLeft = px;
+      document.body.style.marginRight = "";
+      document.body.style.marginBottom = "";
+    } else if (dock === "right") {
+      document.body.style.marginRight = px;
+      document.body.style.marginLeft = "";
+      document.body.style.marginBottom = "";
+    } else if (dock === "bottom") {
+      document.body.style.marginBottom = px;
+      document.body.style.marginLeft = "";
+      document.body.style.marginRight = "";
+    }
+    return () => {
+      document.body.style.marginLeft = "";
+      document.body.style.marginRight = "";
+      document.body.style.marginBottom = "";
+    };
+  }, [isOpen, dock, isDetached]);
+  const drawerStyle = useMemo9(() => {
+    const base = {
+      position: "fixed",
+      zIndex: 9999,
+      display: isOpen && !isDetached ? "flex" : "none",
+      flexDirection: "column",
+      background: "#1e1e2e",
+      color: "#cdd6f4",
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+      fontSize: "13px",
+      boxShadow: "0 0 20px rgba(0,0,0,0.3)",
+      "--devlens-preview-font": previewFontFamily
+    };
+    switch (dock) {
+      case "left":
+        return { ...base, top: 0, left: 0, bottom: 0, width: DRAWER_SIZE };
+      case "right":
+        return { ...base, top: 0, right: 0, bottom: 0, width: DRAWER_SIZE };
+      case "bottom":
+        return { ...base, left: 0, right: 0, bottom: 0, height: DRAWER_SIZE };
+      default:
+        return base;
+    }
+  }, [dock, isOpen, isDetached, previewFontFamily]);
+  return /* @__PURE__ */ jsxs18(Fragment6, { children: [
+    /* @__PURE__ */ jsxs18("div", { style: drawerStyle, className: "te-drawer", children: [
+      /* @__PURE__ */ jsxs18("div", { className: "te-header", children: [
+        /* @__PURE__ */ jsxs18("div", { className: "te-header-title", children: [
+          /* @__PURE__ */ jsx18(Palette, { size: 16 }),
+          /* @__PURE__ */ jsx18("span", { children: "DevLens" }),
+          combinedChangeCount > 0 && /* @__PURE__ */ jsx18("span", { className: "te-badge", children: combinedChangeCount })
+        ] }),
+        /* @__PURE__ */ jsxs18("div", { className: "te-header-actions", children: [
+          /* @__PURE__ */ jsx18("div", { className: "te-dock-strip", children: dockIcons.map(({ pos, icon: Icon, label }) => /* @__PURE__ */ jsx18(
+            "button",
+            {
+              type: "button",
+              className: `te-dock-btn ${dock === pos ? "te-dock-active" : ""}`,
+              onClick: () => handleDockChange(pos),
+              title: label,
+              children: /* @__PURE__ */ jsx18(Icon, { size: 14 })
+            },
+            pos
+          )) }),
+          /* @__PURE__ */ jsx18(
+            "button",
+            {
+              type: "button",
+              className: "te-icon-btn",
+              onClick: () => setIsOpen(false),
+              title: "Close",
+              children: /* @__PURE__ */ jsx18(X, { size: 16 })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs18("div", { className: "te-tabs", children: [
+        /* @__PURE__ */ jsxs18(
+          "button",
+          {
+            type: "button",
+            className: `te-tab ${activeTab === "tokens" ? "te-tab-active" : ""}`,
+            onClick: () => setActiveTab("tokens"),
+            children: [
+              /* @__PURE__ */ jsx18(Palette, { size: 12 }),
+              "Tokens"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs18(
+          "button",
+          {
+            type: "button",
+            className: `te-tab ${activeTab === "inspector" ? "te-tab-active" : ""}`,
+            onClick: () => setActiveTab("inspector"),
+            children: [
+              /* @__PURE__ */ jsx18(MousePointer2, { size: 12 }),
+              "Inspector",
+              inspector.changeCount > 0 && /* @__PURE__ */ jsx18("span", { className: "te-badge te-badge-sm", children: inspector.changeCount })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs18(
+          "button",
+          {
+            type: "button",
+            className: `te-tab ${activeTab === "diff" ? "te-tab-active" : ""}`,
+            onClick: () => setActiveTab("diff"),
+            children: [
+              /* @__PURE__ */ jsx18(FileCode, { size: 12 }),
+              "Changes",
+              combinedChangeCount > 0 && /* @__PURE__ */ jsx18("span", { className: "te-badge te-badge-sm", children: combinedChangeCount })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs18("div", { className: "te-content", children: [
+        activeTab === "tokens" && /* @__PURE__ */ jsxs18(Fragment6, { children: [
+          /* @__PURE__ */ jsx18(
+            TokenEditorControls,
+            {
+              registry: editor.registry,
+              getCurrentValue: editor.getCurrentValue,
+              isModified: editor.isModified,
+              updateToken: editor.updateToken,
+              resetToken: editor.resetToken,
+              getGroupChangeCount: editor.getGroupChangeCount,
+              setScaleMetadata: editor.setScaleMetadata,
+              scaleBaseline
+            }
+          ),
+          /* @__PURE__ */ jsx18(TokenCreationZone, {})
+        ] }),
+        activeTab === "inspector" && /* @__PURE__ */ jsx18(
+          ElementInspectorTab,
+          {
+            inspector,
+            isDetached,
+            scaleBaseline
+          }
+        ),
+        activeTab === "diff" && /* @__PURE__ */ jsx18(
+          TokenEditorDiffOutput,
+          {
+            diff: editor.generateDiff(),
+            changeCount,
+            onResetAll: editor.resetAll,
+            classDiff: inspector.classDiffText,
+            classChangeCount: inspector.changeCount,
+            onResetAllClasses: inspector.clearSelection,
+            customStyleDiff: inspector.customStyleDiffText,
+            customStyleChangeCount: inspector.customStyleChangeCount,
+            onResetCustomStyles: inspector.clearCustomStyles
+          }
+        )
+      ] })
+    ] }),
+    !isOpen && !isDetached && /* @__PURE__ */ jsxs18(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsOpen(true),
+        className: "te-trigger",
+        title: "Open DevLens",
+        children: [
+          /* @__PURE__ */ jsx18(Palette, { size: 22 }),
+          scaleBaseline.isActive && /* @__PURE__ */ jsx18("span", { className: "te-trigger-dot-baseline" }),
+          combinedChangeCount > 0 && /* @__PURE__ */ jsx18("span", { className: "te-trigger-badge", children: combinedChangeCount > 9 ? "9+" : combinedChangeCount })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  DevLensDrawer
+};