@aprovan/bobbin 0.1.0-dev.03aaf5b

package/dist/index.js

@@ -0,0 +1,3704 @@
+import { createPortal } from 'react-dom';
+import { useState, useRef, useCallback, useEffect, useMemo, useLayoutEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/Bobbin.tsx
+
+// src/utils/selectors.ts
+function generateId() {
+  return Math.random().toString(36).substring(2, 15);
+}
+function getElementPath(el) {
+  const path = [];
+  let current = el;
+  while (current && current !== document.body) {
+    let selector = current.tagName.toLowerCase();
+    if (current.id) {
+      selector = `#${current.id}`;
+      path.unshift(selector);
+      break;
+    }
+    const parent = current.parentElement;
+    if (parent) {
+      const siblings = Array.from(parent.children).filter(
+        (c) => c.tagName === current.tagName
+      );
+      if (siblings.length > 1) {
+        const index = siblings.indexOf(current) + 1;
+        selector += `:nth-of-type(${index})`;
+      }
+    }
+    path.unshift(selector);
+    current = current.parentElement;
+  }
+  return path.join(" > ");
+}
+function getElementXPath(el) {
+  const parts = [];
+  let current = el;
+  while (current && current !== document.body && current !== document.documentElement) {
+    let part = current.tagName.toLowerCase();
+    if (current.id) {
+      parts.unshift(`//*[@id="${current.id}"]`);
+      break;
+    }
+    const parent = current.parentElement;
+    if (parent) {
+      const siblings = Array.from(parent.children).filter(
+        (c) => c.tagName === current.tagName
+      );
+      if (siblings.length > 1) {
+        const index = siblings.indexOf(current) + 1;
+        part += `[${index}]`;
+      }
+    }
+    parts.unshift(part);
+    current = current.parentElement;
+  }
+  if (!parts[0]?.startsWith("//*[@id")) {
+    parts.unshift("");
+  }
+  return parts.join("/") || "//" + el.tagName.toLowerCase();
+}
+
+// src/core/useElementSelection.ts
+function useElementSelection(options) {
+  const { container, exclude = [], enabled = true } = options;
+  const [hoveredElement, setHoveredElement] = useState(
+    null
+  );
+  const [selectedElement, setSelectedElement] = useState(null);
+  const lastRectRef = useRef(null);
+  const isExcluded = useCallback(
+    (el) => {
+      if (el.closest("[data-bobbin]")) return true;
+      return exclude.some(
+        (selector) => el.matches(selector) || el.closest(selector)
+      );
+    },
+    [exclude]
+  );
+  const createSelectedElement = useCallback(
+    (el) => {
+      return {
+        element: el,
+        rect: el.getBoundingClientRect(),
+        path: getElementPath(el),
+        xpath: getElementXPath(el),
+        tagName: el.tagName.toLowerCase(),
+        id: el.id || void 0,
+        classList: Array.from(el.classList)
+      };
+    },
+    []
+  );
+  const handleMouseMove = useCallback(
+    (e) => {
+      if (!enabled) return;
+      const target = document.elementFromPoint(
+        e.clientX,
+        e.clientY
+      );
+      if (!target || isExcluded(target)) {
+        setHoveredElement(null);
+        return;
+      }
+      if (container && !container.contains(target)) {
+        setHoveredElement(null);
+        return;
+      }
+      setHoveredElement(createSelectedElement(target));
+    },
+    [enabled, container, isExcluded, createSelectedElement]
+  );
+  const handleClick = useCallback(
+    (e) => {
+      if (!enabled) return;
+      const target = e.target;
+      if (target.closest("[data-bobbin]")) {
+        return;
+      }
+      if (!hoveredElement) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setSelectedElement(hoveredElement);
+      lastRectRef.current = hoveredElement.rect;
+    },
+    [enabled, hoveredElement]
+  );
+  const clearSelection = useCallback(() => {
+    setSelectedElement(null);
+    setHoveredElement(null);
+  }, []);
+  const selectElement = useCallback(
+    (el) => {
+      if (!el) {
+        clearSelection();
+        return;
+      }
+      setSelectedElement(createSelectedElement(el));
+    },
+    [createSelectedElement, clearSelection]
+  );
+  useEffect(() => {
+    if (!enabled) return;
+    document.addEventListener("mousemove", handleMouseMove, { passive: true });
+    document.addEventListener("click", handleClick, { capture: true });
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("click", handleClick, { capture: true });
+    };
+  }, [enabled, handleMouseMove, handleClick]);
+  useEffect(() => {
+    if (!selectedElement) return;
+    const updateRect = () => {
+      const newRect = selectedElement.element.getBoundingClientRect();
+      setSelectedElement((prev) => prev ? { ...prev, rect: newRect } : null);
+    };
+    window.addEventListener("scroll", updateRect, { passive: true });
+    window.addEventListener("resize", updateRect, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", updateRect);
+      window.removeEventListener("resize", updateRect);
+    };
+  }, [selectedElement?.element]);
+  return {
+    hoveredElement,
+    selectedElement,
+    selectElement,
+    clearSelection,
+    lastRect: lastRectRef.current
+  };
+}
+function useChangeTracker() {
+  const [changes, setChanges] = useState([]);
+  const historyRef = useRef([]);
+  const originalStatesRef = useRef(/* @__PURE__ */ new Map());
+  const recordOriginalState = useCallback(
+    (path, property, value) => {
+      if (!originalStatesRef.current.has(path)) {
+        originalStatesRef.current.set(path, /* @__PURE__ */ new Map());
+      }
+      const elementState = originalStatesRef.current.get(path);
+      if (!elementState.has(property)) {
+        elementState.set(property, value);
+      }
+    },
+    []
+  );
+  const addChange = useCallback(
+    (change) => {
+      const fullChange = {
+        ...change,
+        id: generateId(),
+        timestamp: Date.now()
+      };
+      setChanges((prev) => [...prev, fullChange]);
+      historyRef.current.push(fullChange);
+      return fullChange;
+    },
+    []
+  );
+  const recordStyleChange = useCallback(
+    (path, xpath, tagName, property, value, originalValue) => {
+      recordOriginalState(path, property, originalValue);
+      return addChange({
+        type: "style",
+        target: { path, xpath, tagName },
+        before: { property, value: originalValue },
+        after: { property, value }
+      });
+    },
+    [addChange, recordOriginalState]
+  );
+  const recordTextChange = useCallback(
+    (path, xpath, tagName, originalText, newText) => {
+      return addChange({
+        type: "text",
+        target: { path, xpath, tagName },
+        before: originalText,
+        after: newText
+      });
+    },
+    [addChange]
+  );
+  const recordMoveChange = useCallback(
+    (path, xpath, tagName, fromParent, fromIndex, toParent, toIndex) => {
+      return addChange({
+        type: "move",
+        target: { path, xpath, tagName },
+        before: { parent: fromParent, index: fromIndex },
+        after: { parent: toParent, index: toIndex }
+      });
+    },
+    [addChange]
+  );
+  const recordChange = useCallback(
+    (type, path, xpath, tagName, before, after, metadata) => {
+      return addChange({
+        type,
+        target: { path, xpath, tagName },
+        before,
+        after,
+        metadata
+      });
+    },
+    [addChange]
+  );
+  const undo = useCallback(() => {
+    if (changes.length === 0) return null;
+    const lastChange = changes[changes.length - 1];
+    setChanges((prev) => prev.slice(0, -1));
+    return lastChange;
+  }, [changes]);
+  const clearChanges = useCallback(() => {
+    setChanges([]);
+    originalStatesRef.current.clear();
+  }, []);
+  const getChanges = useCallback(() => [...changes], [changes]);
+  const deduplicatedChanges = useMemo(() => {
+    const uniqueChanges = /* @__PURE__ */ new Map();
+    for (const change of changes) {
+      let key;
+      if (change.type === "style") {
+        const styleChange = change;
+        key = `${change.target.path}:style:${styleChange.after.property}`;
+      } else {
+        key = `${change.target.path}:${change.type}:${change.id}`;
+      }
+      if (change.type === "style") {
+        const styleChange = change;
+        const originalValue = originalStatesRef.current.get(change.target.path)?.get(styleChange.after.property);
+        if (originalValue === styleChange.after.value) {
+          uniqueChanges.delete(key);
+          continue;
+        }
+      }
+      uniqueChanges.set(key, change);
+    }
+    return Array.from(uniqueChanges.values());
+  }, [changes]);
+  return {
+    changes,
+    deduplicatedChanges,
+    changeCount: deduplicatedChanges.length,
+    recordStyleChange,
+    recordTextChange,
+    recordMoveChange,
+    recordChange,
+    undo,
+    clearChanges,
+    getChanges,
+    originalStates: originalStatesRef.current
+  };
+}
+function useClipboard() {
+  const [copied, setCopied] = useState(null);
+  const copy = useCallback((element) => {
+    setCopied(element);
+  }, []);
+  const clear = useCallback(() => {
+    setCopied(null);
+  }, []);
+  return {
+    copied,
+    copy,
+    clear,
+    hasCopied: copied !== null
+  };
+}
+
+// src/core/changeSerializer.ts
+function serializeChangesToYAML(changes, annotations = []) {
+  const changeset = {
+    version: "1.0",
+    timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+    changeCount: changes.length + annotations.length,
+    changes: changes.map((change) => {
+      const base = {
+        type: change.type,
+        target: change.target.path,
+        xpath: change.target.xpath
+      };
+      switch (change.type) {
+        case "style":
+          return {
+            ...base,
+            property: change.before.property,
+            before: change.before.value,
+            after: change.after.value
+          };
+        case "text":
+          return {
+            ...base,
+            before: change.before,
+            after: change.after
+          };
+        case "move":
+          return {
+            ...base,
+            before: `${change.before.parent}[${change.before.index}]`,
+            after: `${change.after.parent}[${change.after.index}]`
+          };
+        default:
+          return {
+            ...base,
+            before: JSON.stringify(change.before),
+            after: JSON.stringify(change.after)
+          };
+      }
+    }),
+    annotations: annotations.map((a) => ({
+      type: "annotation",
+      target: a.elementPath,
+      xpath: a.elementXpath,
+      note: a.content
+    }))
+  };
+  return toYAML(changeset);
+}
+function toYAML(obj, indent = 0) {
+  const spaces = "  ".repeat(indent);
+  if (obj === null || obj === void 0) return "null";
+  if (typeof obj === "boolean") return obj ? "true" : "false";
+  if (typeof obj === "number") return String(obj);
+  if (typeof obj === "string") {
+    if (/[\n:{}[\],&*#?|\-<>=!%@`]/.test(obj) || obj.trim() !== obj) {
+      return `"${obj.replace(/"/g, '\\"').replace(/\n/g, "\\n")}"`;
+    }
+    return obj || '""';
+  }
+  if (Array.isArray(obj)) {
+    if (obj.length === 0) return "[]";
+    return obj.map((item) => {
+      const itemYaml = toYAML(item, indent + 1);
+      if (typeof item === "object" && item !== null) {
+        return `${spaces}- ${itemYaml.trimStart()}`;
+      }
+      return `${spaces}- ${itemYaml}`;
+    }).join("\n");
+  }
+  if (typeof obj === "object") {
+    const entries = Object.entries(obj);
+    if (entries.length === 0) return "{}";
+    return entries.map(([key, value]) => {
+      const valueYaml = toYAML(value, indent + 1);
+      if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+        return `${spaces}${key}:
+${valueYaml}`;
+      }
+      if (Array.isArray(value) && value.length > 0) {
+        return `${spaces}${key}:
+${valueYaml}`;
+      }
+      return `${spaces}${key}: ${valueYaml}`;
+    }).join("\n");
+  }
+  return String(obj);
+}
+function parseYAMLChangeset(yaml) {
+  const lines = yaml.split("\n");
+  const result = {
+    version: "1.0",
+    timestamp: "",
+    changeCount: 0,
+    changes: [],
+    annotations: []
+  };
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (trimmed.startsWith("version:")) {
+      const parts = trimmed.split(":");
+      result.version = parts[1]?.trim() ?? "1.0";
+    } else if (trimmed.startsWith("timestamp:")) {
+      result.timestamp = trimmed.split(":").slice(1).join(":").trim();
+    } else if (trimmed.startsWith("changeCount:")) {
+      const parts = trimmed.split(":");
+      result.changeCount = parseInt(parts[1]?.trim() ?? "0", 10);
+    }
+  }
+  return result;
+}
+
+// src/tokens/colors.ts
+var colors = {
+  slate: {
+    50: "#f8fafc",
+    100: "#f1f5f9",
+    200: "#e2e8f0",
+    300: "#cbd5e1",
+    400: "#94a3b8",
+    500: "#64748b",
+    600: "#475569",
+    700: "#334155",
+    800: "#1e293b",
+    900: "#0f172a",
+    950: "#020617"
+  },
+  gray: {
+    50: "#f9fafb",
+    100: "#f3f4f6",
+    200: "#e5e7eb",
+    300: "#d1d5db",
+    400: "#9ca3af",
+    500: "#6b7280",
+    600: "#4b5563",
+    700: "#374151",
+    800: "#1f2937",
+    900: "#111827",
+    950: "#030712"
+  },
+  zinc: {
+    50: "#fafafa",
+    100: "#f4f4f5",
+    200: "#e4e4e7",
+    300: "#d4d4d8",
+    400: "#a1a1aa",
+    500: "#71717a",
+    600: "#52525b",
+    700: "#3f3f46",
+    800: "#27272a",
+    900: "#18181b",
+    950: "#09090b"
+  },
+  red: {
+    50: "#fef2f2",
+    100: "#fee2e2",
+    200: "#fecaca",
+    300: "#fca5a5",
+    400: "#f87171",
+    500: "#ef4444",
+    600: "#dc2626",
+    700: "#b91c1c",
+    800: "#991b1b",
+    900: "#7f1d1d",
+    950: "#450a0a"
+  },
+  orange: {
+    50: "#fff7ed",
+    100: "#ffedd5",
+    200: "#fed7aa",
+    300: "#fdba74",
+    400: "#fb923c",
+    500: "#f97316",
+    600: "#ea580c",
+    700: "#c2410c",
+    800: "#9a3412",
+    900: "#7c2d12",
+    950: "#431407"
+  },
+  yellow: {
+    50: "#fefce8",
+    100: "#fef9c3",
+    200: "#fef08a",
+    300: "#fde047",
+    400: "#facc15",
+    500: "#eab308",
+    600: "#ca8a04",
+    700: "#a16207",
+    800: "#854d0e",
+    900: "#713f12",
+    950: "#422006"
+  },
+  green: {
+    50: "#f0fdf4",
+    100: "#dcfce7",
+    200: "#bbf7d0",
+    300: "#86efac",
+    400: "#4ade80",
+    500: "#22c55e",
+    600: "#16a34a",
+    700: "#15803d",
+    800: "#166534",
+    900: "#14532d",
+    950: "#052e16"
+  },
+  blue: {
+    50: "#eff6ff",
+    100: "#dbeafe",
+    200: "#bfdbfe",
+    300: "#93c5fd",
+    400: "#60a5fa",
+    500: "#3b82f6",
+    600: "#2563eb",
+    700: "#1d4ed8",
+    800: "#1e40af",
+    900: "#1e3a8a",
+    950: "#172554"
+  },
+  indigo: {
+    50: "#eef2ff",
+    100: "#e0e7ff",
+    200: "#c7d2fe",
+    300: "#a5b4fc",
+    400: "#818cf8",
+    500: "#6366f1",
+    600: "#4f46e5",
+    700: "#4338ca",
+    800: "#3730a3",
+    900: "#312e81",
+    950: "#1e1b4b"
+  },
+  purple: {
+    50: "#faf5ff",
+    100: "#f3e8ff",
+    200: "#e9d5ff",
+    300: "#d8b4fe",
+    400: "#c084fc",
+    500: "#a855f7",
+    600: "#9333ea",
+    700: "#7e22ce",
+    800: "#6b21a8",
+    900: "#581c87",
+    950: "#3b0764"
+  },
+  pink: {
+    50: "#fdf2f8",
+    100: "#fce7f3",
+    200: "#fbcfe8",
+    300: "#f9a8d4",
+    400: "#f472b6",
+    500: "#ec4899",
+    600: "#db2777",
+    700: "#be185d",
+    800: "#9d174d",
+    900: "#831843",
+    950: "#500724"
+  },
+  // Semantic
+  white: { DEFAULT: "#ffffff" },
+  black: { DEFAULT: "#000000" },
+  transparent: { DEFAULT: "transparent" },
+  current: { DEFAULT: "currentColor" }
+};
+
+// src/tokens/spacing.ts
+var spacing = {
+  px: "1px",
+  "0": "0px",
+  "0.5": "0.125rem",
+  "1": "0.25rem",
+  "1.5": "0.375rem",
+  "2": "0.5rem",
+  "2.5": "0.625rem",
+  "3": "0.75rem",
+  "3.5": "0.875rem",
+  "4": "1rem",
+  "5": "1.25rem",
+  "6": "1.5rem",
+  "7": "1.75rem",
+  "8": "2rem",
+  "9": "2.25rem",
+  "10": "2.5rem",
+  "11": "2.75rem",
+  "12": "3rem",
+  "14": "3.5rem",
+  "16": "4rem",
+  "20": "5rem",
+  "24": "6rem",
+  "28": "7rem",
+  "32": "8rem",
+  "36": "9rem",
+  "40": "10rem",
+  "44": "11rem",
+  "48": "12rem",
+  "52": "13rem",
+  "56": "14rem",
+  "60": "15rem",
+  "64": "16rem",
+  "72": "18rem",
+  "80": "20rem",
+  "96": "24rem"
+};
+
+// src/tokens/typography.ts
+var fontSize = {
+  xs: "0.75rem",
+  sm: "0.875rem",
+  base: "1rem",
+  lg: "1.125rem",
+  xl: "1.25rem",
+  "2xl": "1.5rem",
+  "3xl": "1.875rem",
+  "4xl": "2.25rem",
+  "5xl": "3rem",
+  "6xl": "3.75rem",
+  "7xl": "4.5rem",
+  "8xl": "6rem",
+  "9xl": "8rem"
+};
+var fontWeight = {
+  thin: "100",
+  extralight: "200",
+  light: "300",
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700",
+  extrabold: "800",
+  black: "900"
+};
+var fontFamily = {
+  sans: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+  serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+  mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace'
+};
+var lineHeight = {
+  none: "1",
+  tight: "1.25",
+  snug: "1.375",
+  normal: "1.5",
+  relaxed: "1.625",
+  loose: "2"
+};
+var letterSpacing = {
+  tighter: "-0.05em",
+  tight: "-0.025em",
+  normal: "0em",
+  wide: "0.025em",
+  wider: "0.05em",
+  widest: "0.1em"
+};
+
+// src/tokens/borders.ts
+var borderRadius = {
+  none: "0px",
+  sm: "0.125rem",
+  DEFAULT: "0.25rem",
+  md: "0.375rem",
+  lg: "0.5rem",
+  xl: "0.75rem",
+  "2xl": "1rem",
+  "3xl": "1.5rem",
+  full: "9999px"
+};
+var borderWidth = {
+  "0": "0px",
+  DEFAULT: "1px",
+  "2": "2px",
+  "4": "4px",
+  "8": "8px"
+};
+
+// src/tokens/shadows.ts
+var boxShadow = {
+  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+  lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+  xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+  "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+  inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+  none: "none"
+};
+
+// src/tokens/index.ts
+var defaultTokens = {
+  colors,
+  spacing,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  borderRadius,
+  borderWidth,
+  boxShadow,
+  lineHeight,
+  letterSpacing
+};
+
+// src/utils/dom.ts
+function applyStyleToElement(el, property, value) {
+  el.style.setProperty(property, value);
+}
+function enableContentEditable(el, enabled) {
+  if (enabled) {
+    el.contentEditable = "true";
+    const textElements = el.querySelectorAll(
+      "p, span, h1, h2, h3, h4, h5, h6, a, li, td, th, label, div"
+    );
+    textElements.forEach((child) => {
+      if (child instanceof HTMLElement && child.childNodes.length > 0) {
+        for (const node of child.childNodes) {
+          if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
+            child.contentEditable = "true";
+            break;
+          }
+        }
+      }
+    });
+  } else {
+    el.contentEditable = "false";
+    const textElements = el.querySelectorAll('[contenteditable="true"]');
+    textElements.forEach((child) => {
+      if (child instanceof HTMLElement) {
+        child.contentEditable = "false";
+      }
+    });
+  }
+}
+
+// src/core/useBobbin.ts
+function useBobbin(props = {}) {
+  const {
+    tokens: customTokens,
+    container,
+    defaultActive = false,
+    onChanges,
+    onSelect,
+    exclude = []
+  } = props;
+  const [isActive, setIsActive] = useState(defaultActive);
+  const [isPillExpanded, setIsPillExpanded] = useState(false);
+  const [annotations, setAnnotations] = useState([]);
+  const [showMarginPadding, setShowMarginPadding] = useState(false);
+  const [activePanel, setActivePanel] = useState(
+    "style"
+  );
+  const [theme, setTheme] = useState("system");
+  const tokens = useMemo(
+    () => ({
+      ...defaultTokens,
+      ...customTokens
+    }),
+    [customTokens]
+  );
+  const { hoveredElement, selectedElement, selectElement, clearSelection } = useElementSelection({
+    container,
+    exclude: [...exclude, "[data-bobbin]"],
+    enabled: isActive
+  });
+  const changeTracker = useChangeTracker();
+  const clipboard = useClipboard();
+  useEffect(() => {
+    if (selectedElement) {
+      enableContentEditable(selectedElement.element, true);
+      return () => enableContentEditable(selectedElement.element, false);
+    }
+  }, [selectedElement]);
+  useEffect(() => {
+    onChanges?.(changeTracker.changes);
+  }, [changeTracker.changes, onChanges]);
+  useEffect(() => {
+    onSelect?.(selectedElement);
+  }, [selectedElement, onSelect]);
+  useEffect(() => {
+    const root = document.documentElement;
+    if (theme === "dark") {
+      root.classList.add("dark");
+      root.style.colorScheme = "dark";
+    } else if (theme === "light") {
+      root.classList.remove("dark");
+      root.style.colorScheme = "light";
+    } else {
+      const prefersDark = window.matchMedia(
+        "(prefers-color-scheme: dark)"
+      ).matches;
+      root.classList.toggle("dark", prefersDark);
+      root.style.colorScheme = prefersDark ? "dark" : "light";
+    }
+  }, [theme]);
+  const activate = useCallback(() => setIsActive(true), []);
+  const deactivate = useCallback(() => {
+    setIsActive(false);
+    clearSelection();
+  }, [clearSelection]);
+  const applyStyle = useCallback(
+    (property, value) => {
+      if (!selectedElement) return;
+      const el = selectedElement.element;
+      const originalValue = getComputedStyle(el).getPropertyValue(property);
+      applyStyleToElement(el, property, value);
+      changeTracker.recordStyleChange(
+        selectedElement.path,
+        selectedElement.xpath,
+        selectedElement.tagName,
+        property,
+        value,
+        originalValue
+      );
+    },
+    [selectedElement, changeTracker]
+  );
+  const deleteElement = useCallback(() => {
+    if (!selectedElement) return;
+    const el = selectedElement.element;
+    const parent = el.parentElement;
+    if (!parent) return;
+    changeTracker.recordChange(
+      "delete",
+      selectedElement.path,
+      selectedElement.xpath,
+      selectedElement.tagName,
+      el.outerHTML,
+      null
+    );
+    el.remove();
+    clearSelection();
+  }, [selectedElement, changeTracker, clearSelection]);
+  const moveElement = useCallback(
+    (targetParent, index) => {
+      if (!selectedElement) return;
+      const el = selectedElement.element;
+      const fromParent = el.parentElement;
+      if (!fromParent) return;
+      const fromIndex = Array.from(fromParent.children).indexOf(el);
+      const fromPath = getElementPath(fromParent);
+      const toPath = getElementPath(targetParent);
+      if (index >= targetParent.children.length) {
+        targetParent.appendChild(el);
+      } else {
+        const referenceNode = targetParent.children[index] ?? null;
+        targetParent.insertBefore(el, referenceNode);
+      }
+      changeTracker.recordMoveChange(
+        selectedElement.path,
+        selectedElement.xpath,
+        selectedElement.tagName,
+        fromPath,
+        fromIndex,
+        toPath,
+        index
+      );
+    },
+    [selectedElement, changeTracker]
+  );
+  const duplicateElement = useCallback(() => {
+    if (!selectedElement) return;
+    const el = selectedElement.element;
+    const clone = el.cloneNode(true);
+    const parent = el.parentElement;
+    if (parent) {
+      parent.insertBefore(clone, el.nextSibling);
+    }
+    changeTracker.recordChange(
+      "duplicate",
+      selectedElement.path,
+      selectedElement.xpath,
+      selectedElement.tagName,
+      null,
+      clone.outerHTML
+    );
+    selectElement(clone);
+  }, [selectedElement, changeTracker, selectElement]);
+  const insertElement = useCallback(
+    (direction, content = "") => {
+      if (!selectedElement) return;
+      const el = selectedElement.element;
+      const newEl = document.createElement("span");
+      newEl.textContent = content || "\u200B";
+      newEl.contentEditable = "true";
+      if (direction === "child") {
+        el.appendChild(newEl);
+      } else if (direction === "before") {
+        el.parentElement?.insertBefore(newEl, el);
+      } else {
+        el.parentElement?.insertBefore(newEl, el.nextSibling);
+      }
+      changeTracker.recordChange(
+        "insert",
+        getElementPath(newEl),
+        getElementXPath(newEl),
+        "span",
+        null,
+        newEl.outerHTML,
+        { direction }
+      );
+      selectElement(newEl);
+    },
+    [selectedElement, changeTracker, selectElement]
+  );
+  const copyElement = useCallback(() => {
+    if (!selectedElement) return;
+    clipboard.copy(selectedElement);
+  }, [selectedElement, clipboard]);
+  const pasteElement = useCallback(
+    (direction) => {
+      if (!selectedElement || !clipboard.copied) return;
+      const el = selectedElement.element;
+      const clone = clipboard.copied.element.cloneNode(true);
+      if (direction === "child") {
+        el.appendChild(clone);
+      } else if (direction === "before") {
+        el.parentElement?.insertBefore(clone, el);
+      } else {
+        el.parentElement?.insertBefore(clone, el.nextSibling);
+      }
+      changeTracker.recordChange(
+        "insert",
+        getElementPath(clone),
+        getElementXPath(clone),
+        clone.tagName.toLowerCase(),
+        null,
+        clone.outerHTML,
+        { source: "paste", direction }
+      );
+      selectElement(clone);
+    },
+    [selectedElement, clipboard, changeTracker, selectElement]
+  );
+  const annotate = useCallback(
+    (content) => {
+      if (!selectedElement) return;
+      setAnnotations((prev) => {
+        const existingIndex = prev.findIndex(
+          (a) => a.elementPath === selectedElement.path
+        );
+        if (existingIndex >= 0) {
+          const existing = prev[existingIndex];
+          if (!existing) return prev;
+          if (!content.trim()) {
+            return prev.filter((_, i) => i !== existingIndex);
+          }
+          const updated = [...prev];
+          updated[existingIndex] = {
+            id: existing.id,
+            elementPath: existing.elementPath,
+            elementXpath: existing.elementXpath,
+            content,
+            createdAt: Date.now()
+          };
+          return updated;
+        } else if (content.trim()) {
+          const annotation = {
+            id: crypto.randomUUID(),
+            elementPath: selectedElement.path,
+            elementXpath: selectedElement.xpath,
+            content,
+            createdAt: Date.now()
+          };
+          return [...prev, annotation];
+        }
+        return prev;
+      });
+    },
+    [selectedElement]
+  );
+  const toggleMarginPadding = useCallback(() => {
+    setShowMarginPadding((prev) => !prev);
+  }, []);
+  const toggleTheme = useCallback(() => {
+    setTheme((prev) => {
+      if (prev === "light") return "dark";
+      if (prev === "dark") return "system";
+      return "light";
+    });
+  }, []);
+  const undo = useCallback(() => {
+    const lastChange = changeTracker.undo();
+    if (!lastChange) return;
+    console.log("Undoing:", lastChange);
+  }, [changeTracker]);
+  const resetChanges = useCallback(() => {
+    const originalStates = changeTracker.originalStates;
+    for (const [path, properties] of originalStates.entries()) {
+      const el = document.querySelector(path);
+      if (!el) continue;
+      for (const [property, originalValue] of properties.entries()) {
+        applyStyleToElement(el, property, originalValue);
+      }
+    }
+    changeTracker.clearChanges();
+  }, [changeTracker]);
+  const exportChanges = useCallback(() => {
+    return serializeChangesToYAML(
+      changeTracker.deduplicatedChanges,
+      annotations
+    );
+  }, [changeTracker.deduplicatedChanges, annotations]);
+  const state = {
+    isActive,
+    isPillExpanded,
+    hoveredElement,
+    selectedElement,
+    changes: changeTracker.deduplicatedChanges,
+    annotations,
+    clipboard: clipboard.copied,
+    showMarginPadding,
+    activePanel,
+    theme
+  };
+  const actions = {
+    activate,
+    deactivate,
+    selectElement,
+    clearSelection,
+    applyStyle,
+    deleteElement,
+    moveElement,
+    duplicateElement,
+    insertElement,
+    copyElement,
+    pasteElement,
+    annotate,
+    toggleMarginPadding,
+    toggleTheme,
+    undo,
+    exportChanges,
+    getChanges: changeTracker.getChanges,
+    resetChanges
+  };
+  return {
+    ...state,
+    ...actions,
+    tokens,
+    setActivePanel,
+    setIsPillExpanded
+  };
+}
+var CopyIcon = () => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
+] });
+var EditIcon = () => /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("path", { d: "M12 20h9" }),
+  /* @__PURE__ */ jsx("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })
+] });
+function Pill({ state, actions, position, container, zIndex = 9999 }) {
+  const [copyHovered, setCopyHovered] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [computedPosition, setComputedPosition] = useState(null);
+  const offset = position ?? { bottom: 16, right: 16 };
+  useLayoutEffect(() => {
+    if (!container) {
+      setComputedPosition(null);
+      return;
+    }
+    const updatePosition = () => {
+      const rect = container.getBoundingClientRect();
+      setComputedPosition({
+        bottom: window.innerHeight - rect.bottom + offset.bottom,
+        right: window.innerWidth - rect.right + offset.right
+      });
+    };
+    updatePosition();
+    const observer = new ResizeObserver(updatePosition);
+    observer.observe(container);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [container, offset.bottom, offset.right]);
+  const pos = computedPosition ?? offset;
+  const handleClick = () => {
+    if (state.isActive) {
+      actions.deactivate();
+    } else {
+      actions.activate();
+    }
+  };
+  const handleCopyChanges = (e) => {
+    e.stopPropagation();
+    const yaml = actions.exportChanges();
+    navigator.clipboard.writeText(yaml);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-bobbin": "pill",
+      className: "bobbin-pill",
+      style: {
+        position: "fixed",
+        bottom: pos.bottom,
+        right: pos.right,
+        zIndex,
+        display: "flex",
+        alignItems: "center",
+        gap: "6px",
+        padding: "6px 10px",
+        borderRadius: "9999px",
+        backgroundColor: state.isActive ? "#18181b" : "#fafafa",
+        color: state.isActive ? "#fafafa" : "#18181b",
+        border: "1px solid #e4e4e7",
+        cursor: "pointer",
+        boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+        transition: "all 0.15s ease",
+        userSelect: "none",
+        fontSize: "13px",
+        fontFamily: "system-ui, -apple-system, sans-serif"
+      },
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ jsx(EditIcon, {}),
+        (state.changes.length > 0 || state.annotations.length > 0) && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: handleCopyChanges,
+            onMouseEnter: () => setCopyHovered(true),
+            onMouseLeave: () => setCopyHovered(false),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "4px",
+              padding: "2px 6px",
+              borderRadius: "9999px",
+              backgroundColor: state.isActive ? "#fafafa" : "#18181b",
+              color: state.isActive ? "#18181b" : "#fafafa",
+              fontSize: "11px",
+              fontWeight: 500,
+              border: "none",
+              cursor: "pointer",
+              transition: "all 0.1s ease"
+            },
+            title: "Copy changes as YAML",
+            children: [
+              /* @__PURE__ */ jsx("span", { children: state.changes.length + state.annotations.length }),
+              copyHovered && /* @__PURE__ */ jsx(CopyIcon, {}),
+              copied && /* @__PURE__ */ jsx("span", { style: { fontSize: "10px" }, children: "\u2713" })
+            ]
+          }
+        ),
+        state.clipboard && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: "6px",
+              height: "6px",
+              borderRadius: "50%",
+              backgroundColor: state.isActive ? "#fafafa" : "#18181b",
+              border: "1px solid #a1a1aa"
+            },
+            title: "Element copied"
+          }
+        )
+      ]
+    }
+  );
+}
+function SelectionOverlay({
+  hoveredElement,
+  selectedElement,
+  offset = 4,
+  zIndex = 9998
+}) {
+  const [hoverRect, setHoverRect] = useState(null);
+  const [selectRect, setSelectRect] = useState(null);
+  useLayoutEffect(() => {
+    if (!hoveredElement || hoveredElement === selectedElement) {
+      setHoverRect(null);
+      return;
+    }
+    setHoverRect(hoveredElement.rect);
+  }, [hoveredElement, selectedElement]);
+  useLayoutEffect(() => {
+    if (!selectedElement) {
+      setSelectRect(null);
+      return;
+    }
+    setSelectRect(selectedElement.rect);
+  }, [selectedElement]);
+  const createBoxStyle = (rect, isSelected) => {
+    if (!rect) return { opacity: 0, pointerEvents: "none" };
+    return {
+      position: "fixed",
+      top: rect.top - offset,
+      left: rect.left - offset,
+      width: rect.width + offset * 2,
+      height: rect.height + offset * 2,
+      border: isSelected ? "1.5px solid #18181b" : "1.5px dashed #71717a",
+      borderRadius: "3px",
+      pointerEvents: "none",
+      zIndex,
+      transition: "all 0.12s cubic-bezier(0.4, 0, 0.2, 1)",
+      opacity: 1,
+      boxShadow: isSelected ? "0 0 0 1px rgba(24, 24, 27, 0.1)" : "none"
+    };
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-bobbin": "hover-overlay",
+        style: createBoxStyle(hoverRect, false)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-bobbin": "select-overlay",
+        style: createBoxStyle(selectRect, true)
+      }
+    )
+  ] });
+}
+function getLayoutDirection(element) {
+  const parent = element.parentElement;
+  if (!parent) return "unknown";
+  const style = getComputedStyle(parent);
+  const display = style.display;
+  const flexDirection = style.flexDirection;
+  if (display.includes("flex")) {
+    if (flexDirection === "column" || flexDirection === "column-reverse") {
+      return "vertical";
+    }
+    return "horizontal";
+  }
+  if (display.includes("grid")) {
+    return "horizontal";
+  }
+  return "vertical";
+}
+var MIN_WIDTH_FOR_CORNER_TOOLBAR = 60;
+var MIN_SIZE_FOR_EDGE_ICONS = 70;
+var CORNER_HANDLE_SIZE = 18;
+var HOVER_ZONE_SIZE = 28;
+function ControlHandles({
+  selectedElement,
+  actions,
+  clipboard,
+  zIndex = 9999
+}) {
+  const [hoveredEdge, setHoveredEdge] = useState(null);
+  const [expandedEdge, setExpandedEdge] = useState(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [dropTarget, setDropTarget] = useState(null);
+  const [cornerToolbarExpanded, setCornerToolbarExpanded] = useState(false);
+  useRef(null);
+  const { rect } = selectedElement;
+  const layoutDirection = useMemo(
+    () => getLayoutDirection(selectedElement.element),
+    [selectedElement.element]
+  );
+  rect.width < MIN_WIDTH_FOR_CORNER_TOOLBAR;
+  rect.height < MIN_SIZE_FOR_EDGE_ICONS;
+  rect.width < MIN_SIZE_FOR_EDGE_ICONS;
+  useEffect(() => {
+    setCornerToolbarExpanded(false);
+    setExpandedEdge(null);
+    setHoveredEdge(null);
+  }, [selectedElement.path]);
+  const TrashIcon = () => /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" }) });
+  const CopyIcon2 = () => /* @__PURE__ */ jsxs("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
+  ] });
+  const MoveIcon = () => /* @__PURE__ */ jsxs("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("polyline", { points: "5 9 2 12 5 15" }),
+    /* @__PURE__ */ jsx("polyline", { points: "9 5 12 2 15 5" }),
+    /* @__PURE__ */ jsx("polyline", { points: "15 19 12 22 9 19" }),
+    /* @__PURE__ */ jsx("polyline", { points: "19 9 22 12 19 15" }),
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "12", y2: "22" })
+  ] });
+  const PlusIcon = () => /* @__PURE__ */ jsx("svg", { width: "9", height: "9", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" }) });
+  const DuplicateIcon = () => /* @__PURE__ */ jsxs("svg", { width: "9", height: "9", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("rect", { x: "8", y: "8", width: "12", height: "12", rx: "2" }),
+    /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "12", height: "12", rx: "2" })
+  ] });
+  const PasteIcon = () => /* @__PURE__ */ jsxs("svg", { width: "9", height: "9", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("path", { d: "M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2" }),
+    /* @__PURE__ */ jsx("rect", { x: "8", y: "2", width: "8", height: "4", rx: "1" })
+  ] });
+  useEffect(() => {
+    if (!cornerToolbarExpanded && !expandedEdge) return;
+    const handleClickOutside = (e) => {
+      const target = e.target;
+      if (target.closest('[data-bobbin="control-handles"]')) return;
+      setCornerToolbarExpanded(false);
+      setExpandedEdge(null);
+    };
+    const timer = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    }, 0);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [cornerToolbarExpanded, expandedEdge]);
+  const handleMouseMove = useCallback((e) => {
+    if (!isDragging) return;
+    const elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);
+    const target = elementsAtPoint.find(
+      (el) => !el.hasAttribute("data-bobbin") && el !== selectedElement.element && !selectedElement.element.contains(el) && el instanceof HTMLElement && el.tagName !== "HTML" && el.tagName !== "BODY"
+    );
+    if (target !== dropTarget) {
+      if (dropTarget) {
+        dropTarget.style.outline = "";
+        dropTarget.style.outlineOffset = "";
+      }
+      if (target) {
+        target.style.outline = "2px dashed #3b82f6";
+        target.style.outlineOffset = "2px";
+      }
+      setDropTarget(target || null);
+    }
+  }, [isDragging, dropTarget, selectedElement.element]);
+  const handleMouseUp = useCallback(() => {
+    if (isDragging && dropTarget) {
+      const parent = dropTarget.parentElement;
+      if (parent) {
+        const index = Array.from(parent.children).indexOf(dropTarget) + 1;
+        actions.moveElement(parent, index);
+      }
+      dropTarget.style.outline = "";
+      dropTarget.style.outlineOffset = "";
+    }
+    setIsDragging(false);
+    setDropTarget(null);
+  }, [isDragging, dropTarget, actions]);
+  useEffect(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "grabbing";
+    }
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      if (dropTarget) {
+        dropTarget.style.outline = "";
+        dropTarget.style.outlineOffset = "";
+      }
+    };
+  }, [isDragging, handleMouseMove, handleMouseUp, dropTarget]);
+  const getEdgeZoneStyle = (position) => {
+    const isHorizontal = position === "top" || position === "bottom";
+    const base = {
+      position: "fixed",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "3px",
+      zIndex,
+      transition: "opacity 0.1s ease",
+      pointerEvents: "auto"
+    };
+    if (isHorizontal) {
+      return {
+        ...base,
+        left: rect.left,
+        width: rect.width,
+        height: HOVER_ZONE_SIZE,
+        top: position === "top" ? rect.top - HOVER_ZONE_SIZE : rect.bottom,
+        flexDirection: "row"
+      };
+    } else {
+      return {
+        ...base,
+        top: rect.top,
+        height: rect.height,
+        width: HOVER_ZONE_SIZE,
+        left: position === "left" ? rect.left - HOVER_ZONE_SIZE : rect.right,
+        flexDirection: "column"
+      };
+    }
+  };
+  const EdgeActionButton = ({
+    icon,
+    onClick,
+    title,
+    visible
+  }) => {
+    const [isHovered, setIsHovered] = useState(false);
+    if (!visible) return null;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        style: {
+          width: CORNER_HANDLE_SIZE,
+          height: CORNER_HANDLE_SIZE,
+          borderRadius: "3px",
+          backgroundColor: isHovered ? "#27272a" : "#18181b",
+          color: "#fafafa",
+          border: "none",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          transition: "all 0.1s ease",
+          boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.2)",
+          pointerEvents: "auto",
+          flexShrink: 0
+        },
+        onClick: (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          onClick();
+        },
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        title,
+        children: icon
+      }
+    );
+  };
+  const MoveActionButton = () => {
+    const [isHovered, setIsHovered] = useState(false);
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        style: {
+          width: CORNER_HANDLE_SIZE,
+          height: CORNER_HANDLE_SIZE,
+          borderRadius: "3px",
+          backgroundColor: isHovered ? "#27272a" : "#18181b",
+          color: "#fafafa",
+          border: "none",
+          cursor: isDragging ? "grabbing" : "grab",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          transition: "all 0.1s ease",
+          boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.2)",
+          pointerEvents: "auto",
+          flexShrink: 0
+        },
+        onMouseDown: (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          setIsDragging(true);
+        },
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        title: "Move element (drag to new location)",
+        children: /* @__PURE__ */ jsx(MoveIcon, {})
+      }
+    );
+  };
+  const EdgeButtons = ({ position }) => {
+    const insertDir = getInsertDirection(position);
+    const isHorizontal = position === "top" || position === "bottom";
+    const separator = isHorizontal ? /* @__PURE__ */ jsx("div", { style: { width: "1px", height: CORNER_HANDLE_SIZE, backgroundColor: "#3f3f46", margin: "0 2px" } }) : /* @__PURE__ */ jsx("div", { style: { height: "1px", width: CORNER_HANDLE_SIZE, backgroundColor: "#3f3f46", margin: "2px 0" } });
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      position === "top" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          EdgeActionButton,
+          {
+            icon: /* @__PURE__ */ jsx(TrashIcon, {}),
+            onClick: () => actions.deleteElement(),
+            title: "Delete element",
+            visible: true
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EdgeActionButton,
+          {
+            icon: /* @__PURE__ */ jsx(CopyIcon2, {}),
+            onClick: () => actions.copyElement(),
+            title: "Copy element",
+            visible: true
+          }
+        ),
+        separator
+      ] }),
+      /* @__PURE__ */ jsx(
+        EdgeActionButton,
+        {
+          icon: /* @__PURE__ */ jsx(PlusIcon, {}),
+          onClick: () => actions.insertElement(insertDir),
+          title: `Add text ${insertDir}`,
+          visible: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        EdgeActionButton,
+        {
+          icon: /* @__PURE__ */ jsx(PasteIcon, {}),
+          onClick: () => actions.pasteElement(insertDir),
+          title: `Paste ${insertDir}`,
+          visible: !!clipboard
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        EdgeActionButton,
+        {
+          icon: /* @__PURE__ */ jsx(DuplicateIcon, {}),
+          onClick: actions.duplicateElement,
+          title: "Duplicate element",
+          visible: true
+        }
+      ),
+      position === "top" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        separator,
+        /* @__PURE__ */ jsx(MoveActionButton, {})
+      ] })
+    ] });
+  };
+  const getInsertDirection = (position) => {
+    if (layoutDirection === "horizontal") {
+      return position === "left" ? "before" : "after";
+    } else {
+      return position === "top" ? "before" : "after";
+    }
+  };
+  const [cornerHover, setCornerHover] = useState(null);
+  return /* @__PURE__ */ jsx("div", { "data-bobbin": "control-handles", style: { pointerEvents: "none" }, children: ["top", "bottom", "left", "right"].map((position) => {
+    const isHovered = hoveredEdge === position;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: getEdgeZoneStyle(position),
+        onMouseEnter: () => setHoveredEdge(position),
+        onMouseLeave: () => setHoveredEdge(null),
+        children: isHovered && /* @__PURE__ */ jsx(EdgeButtons, { position })
+      },
+      position
+    );
+  }) });
+}
+function MarginPaddingOverlay({
+  selectedElement,
+  zIndex = 9997
+}) {
+  const { element, rect } = selectedElement;
+  const computed = window.getComputedStyle(element);
+  const margin = {
+    top: parseFloat(computed.marginTop) || 0,
+    right: parseFloat(computed.marginRight) || 0,
+    bottom: parseFloat(computed.marginBottom) || 0,
+    left: parseFloat(computed.marginLeft) || 0
+  };
+  const padding = {
+    top: parseFloat(computed.paddingTop) || 0,
+    right: parseFloat(computed.paddingRight) || 0,
+    bottom: parseFloat(computed.paddingBottom) || 0,
+    left: parseFloat(computed.paddingLeft) || 0
+  };
+  const gap = parseFloat(computed.gap) || 0;
+  const rowGap = parseFloat(computed.rowGap) || gap;
+  const columnGap = parseFloat(computed.columnGap) || gap;
+  const display = computed.display;
+  const flexDirection = computed.flexDirection;
+  const isFlexOrGrid = display.includes("flex") || display.includes("grid");
+  const isColumn = flexDirection === "column" || flexDirection === "column-reverse";
+  const marginColor = "rgba(251, 146, 60, 0.3)";
+  const paddingColor = "rgba(74, 222, 128, 0.3)";
+  const gapColor = "rgba(168, 85, 247, 0.35)";
+  const getGapOverlays = () => {
+    if (!isFlexOrGrid || rowGap === 0 && columnGap === 0) return [];
+    const children = Array.from(element.children).filter(
+      (child) => child instanceof HTMLElement && getComputedStyle(child).display !== "none" && getComputedStyle(child).visibility !== "hidden"
+    );
+    if (children.length < 2) return [];
+    const overlays = [];
+    for (let i = 0; i < children.length - 1; i++) {
+      const currentChild = children[i];
+      const nextChild = children[i + 1];
+      if (!currentChild || !nextChild) continue;
+      const currentRect = currentChild.getBoundingClientRect();
+      const nextRect = nextChild.getBoundingClientRect();
+      if (isColumn || display.includes("grid")) {
+        if (rowGap > 0 && nextRect.top > currentRect.bottom) {
+          const gapTop = currentRect.bottom;
+          const gapHeight = Math.min(rowGap, nextRect.top - currentRect.bottom);
+          if (gapHeight > 0) {
+            overlays.push({
+              top: gapTop,
+              left: rect.left + padding.left,
+              width: rect.width - padding.left - padding.right,
+              height: gapHeight
+            });
+          }
+        }
+      }
+      if (!isColumn || display.includes("grid")) {
+        if (columnGap > 0 && nextRect.left > currentRect.right) {
+          const gapLeft = currentRect.right;
+          const gapWidth = Math.min(columnGap, nextRect.left - currentRect.right);
+          if (gapWidth > 0) {
+            overlays.push({
+              top: rect.top + padding.top,
+              left: gapLeft,
+              width: gapWidth,
+              height: rect.height - padding.top - padding.bottom
+            });
+          }
+        }
+      }
+    }
+    return overlays;
+  };
+  const gapOverlays = getGapOverlays();
+  return /* @__PURE__ */ jsxs("div", { "data-bobbin": "margin-padding-overlay", style: { position: "fixed", top: 0, left: 0, zIndex, pointerEvents: "none" }, children: [
+    margin.top > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: rect.top - margin.top,
+          left: rect.left,
+          width: rect.width,
+          height: margin.top,
+          backgroundColor: marginColor
+        }
+      }
+    ),
+    margin.bottom > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: rect.bottom,
+          left: rect.left,
+          width: rect.width,
+          height: margin.bottom,
+          backgroundColor: marginColor
+        }
+      }
+    ),
+    margin.left > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: rect.top,
+          left: rect.left - margin.left,
+          width: margin.left,
+          height: rect.height,
+          backgroundColor: marginColor
+        }
+      }
+    ),
+    margin.right > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: rect.top,
+          left: rect.right,
+          width: margin.right,
+          height: rect.height,
+          backgroundColor: marginColor
+        }
+      }
+    ),
+    padding.top > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: padding.top,
+          backgroundColor: paddingColor
+        }
+      }
+    ),
+    padding.bottom > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: rect.bottom - padding.bottom,
+          left: rect.left,
+          width: rect.width,
+          height: padding.bottom,
+          backgroundColor: paddingColor
+        }
+      }
+    ),
+    padding.left > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: rect.top + padding.top,
+          left: rect.left,
+          width: padding.left,
+          height: rect.height - padding.top - padding.bottom,
+          backgroundColor: paddingColor
+        }
+      }
+    ),
+    padding.right > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: rect.top + padding.top,
+          left: rect.right - padding.right,
+          width: padding.right,
+          height: rect.height - padding.top - padding.bottom,
+          backgroundColor: paddingColor
+        }
+      }
+    ),
+    gapOverlays.map((overlay, index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: overlay.top,
+          left: overlay.left,
+          width: overlay.width,
+          height: overlay.height,
+          backgroundColor: gapColor
+        }
+      },
+      `gap-${index}`
+    ))
+  ] });
+}
+function SectionWrapper({ title, expanded, onToggle, children, hasChanges = false }) {
+  return /* @__PURE__ */ jsxs("div", { style: { borderBottom: "1px solid #f4f4f5" }, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: onToggle,
+        style: {
+          width: "100%",
+          padding: "8px 12px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          backgroundColor: hasChanges ? "#eff6ff" : "transparent",
+          border: "none",
+          cursor: "pointer",
+          color: "#18181b",
+          fontSize: "11px",
+          fontWeight: 500,
+          textTransform: "uppercase",
+          letterSpacing: "0.05em"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+            title,
+            hasChanges && /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  width: "6px",
+                  height: "6px",
+                  borderRadius: "50%",
+                  backgroundColor: "#3b82f6"
+                },
+                title: "Has unsaved changes"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: "10px", color: "#a1a1aa" }, children: expanded ? "\u25B2" : "\u25BC" })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx("div", { style: { padding: "0 12px 12px" }, children })
+  ] });
+}
+function ToggleGroup({ value, options, onChange }) {
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "2px" }, children: options.map((option) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: () => onChange(option.value),
+      style: {
+        flex: 1,
+        padding: "4px 6px",
+        borderRadius: "4px",
+        border: "1px solid #e4e4e7",
+        backgroundColor: value === option.value ? "#18181b" : "#ffffff",
+        color: value === option.value ? "#fafafa" : "#71717a",
+        cursor: "pointer",
+        fontSize: "10px",
+        fontWeight: 500,
+        transition: "all 0.1s ease",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: option.label
+    },
+    option.value
+  )) });
+}
+function TokenDropdown({ value, tokens, onChange, placeholder = "Select..." }) {
+  return /* @__PURE__ */ jsxs(
+    "select",
+    {
+      value,
+      onChange: (e) => onChange(e.target.value),
+      style: {
+        width: "100%",
+        padding: "4px 8px",
+        borderRadius: "4px",
+        border: "1px solid #e4e4e7",
+        backgroundColor: "#ffffff",
+        color: "#18181b",
+        fontSize: "11px",
+        cursor: "pointer",
+        outline: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsx("option", { value: "", children: placeholder }),
+        Object.entries(tokens).map(([key, tokenValue]) => /* @__PURE__ */ jsxs("option", { value: tokenValue, children: [
+          key,
+          ": ",
+          tokenValue
+        ] }, key))
+      ]
+    }
+  );
+}
+var ArrowRightIcon = () => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+  /* @__PURE__ */ jsx("polyline", { points: "12 5 19 12 12 19" })
+] });
+var ArrowLeftIcon = () => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
+  /* @__PURE__ */ jsx("polyline", { points: "12 19 5 12 12 5" })
+] });
+var ArrowDownIcon = () => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+  /* @__PURE__ */ jsx("polyline", { points: "19 12 12 19 5 12" })
+] });
+var ArrowUpIcon = () => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
+  /* @__PURE__ */ jsx("polyline", { points: "5 12 12 5 19 12" })
+] });
+var JustifyStartIcon = () => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("line", { x1: "3", y1: "4", x2: "3", y2: "20" }),
+  /* @__PURE__ */ jsx("rect", { x: "7", y: "8", width: "4", height: "8", rx: "1" }),
+  /* @__PURE__ */ jsx("rect", { x: "13", y: "8", width: "4", height: "8", rx: "1" })
+] });
+var JustifyCenterIcon = () => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("rect", { x: "6", y: "8", width: "4", height: "8", rx: "1" }),
+  /* @__PURE__ */ jsx("rect", { x: "14", y: "8", width: "4", height: "8", rx: "1" })
+] });
+var JustifyEndIcon = () => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("line", { x1: "21", y1: "4", x2: "21", y2: "20" }),
+  /* @__PURE__ */ jsx("rect", { x: "7", y: "8", width: "4", height: "8", rx: "1" }),
+  /* @__PURE__ */ jsx("rect", { x: "13", y: "8", width: "4", height: "8", rx: "1" })
+] });
+var JustifyBetweenIcon = () => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("line", { x1: "3", y1: "4", x2: "3", y2: "20" }),
+  /* @__PURE__ */ jsx("line", { x1: "21", y1: "4", x2: "21", y2: "20" }),
+  /* @__PURE__ */ jsx("rect", { x: "6", y: "8", width: "4", height: "8", rx: "1" }),
+  /* @__PURE__ */ jsx("rect", { x: "14", y: "8", width: "4", height: "8", rx: "1" })
+] });
+var JustifyAroundIcon = () => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("rect", { x: "4", y: "8", width: "4", height: "8", rx: "1" }),
+  /* @__PURE__ */ jsx("rect", { x: "10", y: "8", width: "4", height: "8", rx: "1" }),
+  /* @__PURE__ */ jsx("rect", { x: "16", y: "8", width: "4", height: "8", rx: "1" })
+] });
+var AlignStartIcon = () => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("line", { x1: "4", y1: "3", x2: "20", y2: "3" }),
+  /* @__PURE__ */ jsx("rect", { x: "6", y: "6", width: "4", height: "10", rx: "1" }),
+  /* @__PURE__ */ jsx("rect", { x: "14", y: "6", width: "4", height: "6", rx: "1" })
+] });
+var AlignCenterVIcon = () => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("rect", { x: "6", y: "5", width: "4", height: "14", rx: "1" }),
+  /* @__PURE__ */ jsx("rect", { x: "14", y: "7", width: "4", height: "10", rx: "1" })
+] });
+var AlignEndIcon = () => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("line", { x1: "4", y1: "21", x2: "20", y2: "21" }),
+  /* @__PURE__ */ jsx("rect", { x: "6", y: "8", width: "4", height: "10", rx: "1" }),
+  /* @__PURE__ */ jsx("rect", { x: "14", y: "12", width: "4", height: "6", rx: "1" })
+] });
+var AlignStretchIcon = () => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("line", { x1: "4", y1: "3", x2: "20", y2: "3" }),
+  /* @__PURE__ */ jsx("line", { x1: "4", y1: "21", x2: "20", y2: "21" }),
+  /* @__PURE__ */ jsx("rect", { x: "6", y: "6", width: "4", height: "12", rx: "1" }),
+  /* @__PURE__ */ jsx("rect", { x: "14", y: "6", width: "4", height: "12", rx: "1" })
+] });
+function LayoutSection({
+  expanded,
+  onToggle,
+  computedStyle,
+  onApplyStyle,
+  tokens,
+  hasChanges = false
+}) {
+  const display = computedStyle.display;
+  const flexDirection = computedStyle.flexDirection;
+  const justifyContent = computedStyle.justifyContent;
+  const alignItems = computedStyle.alignItems;
+  const gap = computedStyle.gap;
+  const isFlex = display === "flex" || display === "inline-flex";
+  const isGrid = display === "grid" || display === "inline-grid";
+  return /* @__PURE__ */ jsxs(SectionWrapper, { title: "Layout", expanded, onToggle, hasChanges, children: [
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+      /* @__PURE__ */ jsx("label", { style: { fontSize: "10px", color: "#71717a", marginBottom: "4px", display: "block" }, children: "Display" }),
+      /* @__PURE__ */ jsx(
+        ToggleGroup,
+        {
+          value: display,
+          options: [
+            { value: "block", label: "Block" },
+            { value: "flex", label: "Flex" },
+            { value: "grid", label: "Grid" },
+            { value: "inline", label: "Inline" },
+            { value: "none", label: "None" }
+          ],
+          onChange: (value) => onApplyStyle("display", value)
+        }
+      )
+    ] }),
+    isFlex && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+        /* @__PURE__ */ jsx("label", { style: { fontSize: "10px", color: "#71717a", marginBottom: "4px", display: "block" }, children: "Direction" }),
+        /* @__PURE__ */ jsx(
+          ToggleGroup,
+          {
+            value: flexDirection,
+            options: [
+              { value: "row", label: /* @__PURE__ */ jsx(ArrowRightIcon, {}) },
+              { value: "row-reverse", label: /* @__PURE__ */ jsx(ArrowLeftIcon, {}) },
+              { value: "column", label: /* @__PURE__ */ jsx(ArrowDownIcon, {}) },
+              { value: "column-reverse", label: /* @__PURE__ */ jsx(ArrowUpIcon, {}) }
+            ],
+            onChange: (value) => onApplyStyle("flex-direction", value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+        /* @__PURE__ */ jsx("label", { style: { fontSize: "10px", color: "#71717a", marginBottom: "4px", display: "block" }, children: "Justify" }),
+        /* @__PURE__ */ jsx(
+          ToggleGroup,
+          {
+            value: justifyContent,
+            options: [
+              { value: "flex-start", label: /* @__PURE__ */ jsx(JustifyStartIcon, {}) },
+              { value: "center", label: /* @__PURE__ */ jsx(JustifyCenterIcon, {}) },
+              { value: "flex-end", label: /* @__PURE__ */ jsx(JustifyEndIcon, {}) },
+              { value: "space-between", label: /* @__PURE__ */ jsx(JustifyBetweenIcon, {}) },
+              { value: "space-around", label: /* @__PURE__ */ jsx(JustifyAroundIcon, {}) }
+            ],
+            onChange: (value) => onApplyStyle("justify-content", value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+        /* @__PURE__ */ jsx("label", { style: { fontSize: "10px", color: "#71717a", marginBottom: "4px", display: "block" }, children: "Align" }),
+        /* @__PURE__ */ jsx(
+          ToggleGroup,
+          {
+            value: alignItems,
+            options: [
+              { value: "flex-start", label: /* @__PURE__ */ jsx(AlignStartIcon, {}) },
+              { value: "center", label: /* @__PURE__ */ jsx(AlignCenterVIcon, {}) },
+              { value: "flex-end", label: /* @__PURE__ */ jsx(AlignEndIcon, {}) },
+              { value: "stretch", label: /* @__PURE__ */ jsx(AlignStretchIcon, {}) }
+            ],
+            onChange: (value) => onApplyStyle("align-items", value)
+          }
+        )
+      ] })
+    ] }),
+    (isFlex || isGrid) && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+      /* @__PURE__ */ jsx("label", { style: { fontSize: "10px", color: "#71717a", marginBottom: "4px", display: "block" }, children: "Gap" }),
+      /* @__PURE__ */ jsx(
+        TokenDropdown,
+        {
+          value: gap,
+          tokens: tokens.spacing,
+          onChange: (value) => onApplyStyle("gap", value)
+        }
+      )
+    ] })
+  ] });
+}
+var ChainIcon = ({ linked }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: { opacity: linked ? 1 : 0.4 },
+    children: linked ? (
+      // Linked chain
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: "M9 17H7A5 5 0 0 1 7 7h2" }),
+        /* @__PURE__ */ jsx("path", { d: "M15 7h2a5 5 0 1 1 0 10h-2" }),
+        /* @__PURE__ */ jsx("line", { x1: "8", y1: "12", x2: "16", y2: "12" })
+      ] })
+    ) : (
+      // Broken chain
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: "M9 17H7A5 5 0 0 1 7 7h2" }),
+        /* @__PURE__ */ jsx("path", { d: "M15 7h2a5 5 0 1 1 0 10h-2" }),
+        /* @__PURE__ */ jsx("line", { x1: "8", y1: "12", x2: "10", y2: "12" }),
+        /* @__PURE__ */ jsx("line", { x1: "14", y1: "12", x2: "16", y2: "12" })
+      ] })
+    )
+  }
+);
+function isValidCSSValue(value) {
+  if (!value || value.trim() === "") return true;
+  const validPatterns = [
+    /^-?\d+(\.\d+)?(px|em|rem|%|vh|vw|pt|cm|mm|in|pc)?$/i,
+    /^auto$/i,
+    /^inherit$/i,
+    /^initial$/i,
+    /^unset$/i,
+    /^0$/
+  ];
+  return validPatterns.some((pattern) => pattern.test(value.trim()));
+}
+function SpacingControl({ values, onChange, label, hasChanges = {} }) {
+  const [editingSide, setEditingSide] = useState(null);
+  const [editValue, setEditValue] = useState("");
+  const [linkVertical, setLinkVertical] = useState(false);
+  const [linkHorizontal, setLinkHorizontal] = useState(false);
+  const [highlightLinked, setHighlightLinked] = useState(null);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (editingSide && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [editingSide]);
+  const handleChange = useCallback((side, value) => {
+    onChange(side, value);
+    if (linkVertical && (side === "top" || side === "bottom")) {
+      onChange(side === "top" ? "bottom" : "top", value);
+    }
+    if (linkHorizontal && (side === "left" || side === "right")) {
+      onChange(side === "left" ? "right" : "left", value);
+    }
+  }, [onChange, linkVertical, linkHorizontal]);
+  const handleBoxClick = (side, e) => {
+    e.stopPropagation();
+    setEditingSide(side);
+    setEditValue(values[side]);
+    if (linkVertical && (side === "top" || side === "bottom")) {
+      setHighlightLinked("vertical");
+    } else if (linkHorizontal && (side === "left" || side === "right")) {
+      setHighlightLinked("horizontal");
+    }
+  };
+  const handleInputChange = (value) => {
+    setEditValue(value);
+    if (editingSide) {
+      handleChange(editingSide, value);
+    }
+  };
+  const handleInputBlur = () => {
+    setEditingSide(null);
+    setHighlightLinked(null);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === "Escape") {
+      setEditingSide(null);
+      setHighlightLinked(null);
+    }
+  };
+  const formatValue = (value) => {
+    const match = value.match(/^([\d.]+)/);
+    return match ? match[1] : value || "0";
+  };
+  const isLinkedHighlighted = (side) => {
+    if (!highlightLinked) return false;
+    if (highlightLinked === "vertical" && (side === "top" || side === "bottom")) return true;
+    if (highlightLinked === "horizontal" && (side === "left" || side === "right")) return true;
+    return false;
+  };
+  const getBoxStyle = (side) => {
+    const isEditing = editingSide === side;
+    const isLinked = isLinkedHighlighted(side);
+    const isValid = isEditing ? isValidCSSValue(editValue) : true;
+    const hasChange = hasChanges[side];
+    return {
+      padding: isEditing ? "0" : "2px 4px",
+      borderRadius: "3px",
+      border: `1px solid ${!isValid ? "#ef4444" : hasChange ? "#3b82f6" : isLinked ? "#8b5cf6" : isEditing ? "#18181b" : "#e4e4e7"}`,
+      backgroundColor: !isValid ? "#fef2f2" : hasChange ? "#eff6ff" : isLinked ? "#f5f3ff" : "#ffffff",
+      color: "#18181b",
+      fontSize: "9px",
+      textAlign: "center",
+      cursor: "text",
+      minWidth: "28px",
+      transition: "all 0.1s ease",
+      outline: "none"
+    };
+  };
+  const linkButtonStyle = (active) => ({
+    padding: "2px 4px",
+    borderRadius: "3px",
+    border: `1px solid ${active ? "#8b5cf6" : "#e4e4e7"}`,
+    backgroundColor: active ? "#f5f3ff" : "#ffffff",
+    color: active ? "#8b5cf6" : "#71717a",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "all 0.1s ease"
+  });
+  const renderValueBox = (side, position) => {
+    const isEditing = editingSide === side;
+    return /* @__PURE__ */ jsx("div", { style: { position: "absolute", ...position }, children: isEditing ? /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        value: editValue,
+        onChange: (e) => handleInputChange(e.target.value),
+        onBlur: handleInputBlur,
+        onKeyDown: handleKeyDown,
+        style: {
+          ...getBoxStyle(side),
+          width: "36px",
+          fontFamily: "inherit"
+        }
+      }
+    ) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        onClick: (e) => handleBoxClick(side, e),
+        style: getBoxStyle(side),
+        title: `${side}: ${values[side]}`,
+        children: formatValue(values[side])
+      }
+    ) });
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "6px" }, children: [
+      /* @__PURE__ */ jsx("label", { style: { fontSize: "10px", color: "#71717a" }, children: label }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "2px" }, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            style: linkButtonStyle(linkVertical),
+            onClick: () => setLinkVertical(!linkVertical),
+            title: linkVertical ? "Unlink top/bottom" : "Link top/bottom",
+            children: /* @__PURE__ */ jsx("span", { style: { transform: "rotate(90deg)", display: "flex" }, children: /* @__PURE__ */ jsx(ChainIcon, { linked: linkVertical }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            style: linkButtonStyle(linkHorizontal),
+            onClick: () => setLinkHorizontal(!linkHorizontal),
+            title: linkHorizontal ? "Unlink left/right" : "Link left/right",
+            children: /* @__PURE__ */ jsx(ChainIcon, { linked: linkHorizontal })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          position: "relative",
+          width: "100px",
+          height: "40px",
+          margin: "0 auto"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                pointerEvents: "none"
+              },
+              viewBox: "0 0 100 70",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    x: "10",
+                    y: "10",
+                    width: "80",
+                    height: "50",
+                    fill: "none",
+                    stroke: "lightgray",
+                    strokeWidth: "1",
+                    strokeDasharray: "3,2",
+                    rx: "2"
+                  }
+                ),
+                /* @__PURE__ */ jsx("line", { x1: "50", y1: "10", x2: "50", y2: "2", stroke: "lightgray", strokeWidth: "1" }),
+                /* @__PURE__ */ jsx("line", { x1: "50", y1: "60", x2: "50", y2: "68", stroke: "lightgray", strokeWidth: "1" }),
+                /* @__PURE__ */ jsx("line", { x1: "10", y1: "35", x2: "2", y2: "35", stroke: "lightgray", strokeWidth: "1" }),
+                /* @__PURE__ */ jsx("line", { x1: "90", y1: "35", x2: "98", y2: "35", stroke: "lightgray", strokeWidth: "1" })
+              ]
+            }
+          ),
+          renderValueBox("top", { top: "-8px", left: "50%", transform: "translateX(-50%)" }),
+          renderValueBox("bottom", { bottom: "-8px", left: "50%", transform: "translateX(-50%)" }),
+          renderValueBox("left", { left: "-12px", top: "50%", transform: "translateY(-50%)" }),
+          renderValueBox("right", { right: "-12px", top: "50%", transform: "translateY(-50%)" })
+        ]
+      }
+    )
+  ] });
+}
+function SpacingSection({
+  expanded,
+  onToggle,
+  computedStyle,
+  onApplyStyle,
+  hasChanges = false,
+  changedProps = {}
+}) {
+  const margin = {
+    top: computedStyle.marginTop,
+    right: computedStyle.marginRight,
+    bottom: computedStyle.marginBottom,
+    left: computedStyle.marginLeft
+  };
+  const padding = {
+    top: computedStyle.paddingTop,
+    right: computedStyle.paddingRight,
+    bottom: computedStyle.paddingBottom,
+    left: computedStyle.paddingLeft
+  };
+  const marginChanges = {
+    top: changedProps["margin-top"],
+    right: changedProps["margin-right"],
+    bottom: changedProps["margin-bottom"],
+    left: changedProps["margin-left"]
+  };
+  const paddingChanges = {
+    top: changedProps["padding-top"],
+    right: changedProps["padding-right"],
+    bottom: changedProps["padding-bottom"],
+    left: changedProps["padding-left"]
+  };
+  return /* @__PURE__ */ jsxs(SectionWrapper, { title: "Spacing", expanded, onToggle, hasChanges, children: [
+    /* @__PURE__ */ jsx("div", { style: { marginBottom: "16px" }, children: /* @__PURE__ */ jsx(
+      SpacingControl,
+      {
+        label: "Margin",
+        values: margin,
+        onChange: (side, value) => onApplyStyle(`margin-${side}`, value),
+        hasChanges: marginChanges
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      SpacingControl,
+      {
+        label: "Padding",
+        values: padding,
+        onChange: (side, value) => onApplyStyle(`padding-${side}`, value),
+        hasChanges: paddingChanges
+      }
+    )
+  ] });
+}
+function SliderInput({
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  unit = "px",
+  onChange,
+  label
+}) {
+  const [isDragging, setIsDragging] = useState(false);
+  const [localValue, setLocalValue] = useState(value);
+  const handleMouseDown = useCallback((e) => {
+    e.preventDefault();
+    setIsDragging(true);
+    const startX = e.clientX;
+    const startValue = localValue;
+    const handleMouseMove = (e2) => {
+      const delta = e2.clientX - startX;
+      const sensitivity = e2.shiftKey ? 0.1 : 1;
+      const newValue = Math.min(max, Math.max(min, startValue + delta * sensitivity));
+      const steppedValue = Math.round(newValue / step) * step;
+      setLocalValue(steppedValue);
+      onChange(steppedValue);
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+  }, [localValue, min, max, step, onChange]);
+  const handleInputChange = (e) => {
+    const newValue = parseFloat(e.target.value) || 0;
+    setLocalValue(newValue);
+    onChange(newValue);
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+    label && /* @__PURE__ */ jsx("span", { style: { fontSize: "10px", color: "#71717a", width: "18px" }, children: label }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          backgroundColor: "#ffffff",
+          border: "1px solid #e4e4e7",
+          borderRadius: "4px",
+          padding: "3px 6px",
+          cursor: "ew-resize"
+        },
+        onMouseDown: handleMouseDown,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              value: localValue,
+              onChange: handleInputChange,
+              style: {
+                width: "100%",
+                backgroundColor: "transparent",
+                border: "none",
+                color: "#18181b",
+                fontSize: "11px",
+                fontFamily: "ui-monospace, monospace",
+                outline: "none",
+                cursor: isDragging ? "ew-resize" : "text"
+              },
+              onClick: (e) => e.stopPropagation()
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: "10px", color: "#a1a1aa", marginLeft: "4px" }, children: unit })
+        ]
+      }
+    )
+  ] });
+}
+var sizePresets = {
+  "auto": "auto",
+  "full": "100%",
+  "fit": "fit-content",
+  "min": "min-content",
+  "max": "max-content",
+  "screen": "100vh"
+};
+function SizeInput({
+  label,
+  value,
+  property,
+  onApplyStyle
+}) {
+  const [showSlider, setShowSlider] = useState(false);
+  const numericValue = parseFloat(value) || 0;
+  const isPresetSelected = (presetValue) => {
+    return value.toLowerCase() === presetValue.toLowerCase();
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { marginBottom: "10px" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "4px" }, children: [
+      /* @__PURE__ */ jsx("label", { style: { fontSize: "10px", color: "#71717a" }, children: label }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setShowSlider(!showSlider),
+          style: {
+            padding: "1px 4px",
+            borderRadius: "2px",
+            border: "1px solid #e4e4e7",
+            backgroundColor: showSlider ? "#18181b" : "#ffffff",
+            color: showSlider ? "#fafafa" : "#71717a",
+            fontSize: "8px",
+            cursor: "pointer"
+          },
+          title: "Toggle custom size slider",
+          children: "px"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "2px", flexWrap: "wrap", marginBottom: showSlider ? "6px" : 0 }, children: Object.entries(sizePresets).slice(0, 5).map(([key, presetValue]) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onApplyStyle(property, presetValue),
+        style: {
+          padding: "2px 5px",
+          borderRadius: "3px",
+          border: "1px solid",
+          borderColor: isPresetSelected(presetValue) ? "#18181b" : "#e4e4e7",
+          backgroundColor: isPresetSelected(presetValue) ? "#18181b" : "#ffffff",
+          color: isPresetSelected(presetValue) ? "#fafafa" : "#18181b",
+          fontSize: "9px",
+          fontFamily: "ui-monospace, monospace",
+          cursor: "pointer",
+          transition: "all 0.1s ease"
+        },
+        title: presetValue,
+        children: key
+      },
+      key
+    )) }),
+    showSlider && /* @__PURE__ */ jsx(
+      SliderInput,
+      {
+        value: numericValue,
+        min: 0,
+        max: 1e3,
+        onChange: (v) => onApplyStyle(property, `${v}px`)
+      }
+    )
+  ] });
+}
+function SizeSection({
+  expanded,
+  onToggle,
+  computedStyle,
+  onApplyStyle,
+  hasChanges = false
+}) {
+  const width = computedStyle.width;
+  const height = computedStyle.height;
+  const minWidth = computedStyle.minWidth;
+  const maxWidth = computedStyle.maxWidth;
+  const minHeight = computedStyle.minHeight;
+  const maxHeight = computedStyle.maxHeight;
+  return /* @__PURE__ */ jsxs(SectionWrapper, { title: "Size", expanded, onToggle, hasChanges, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px" }, children: [
+      /* @__PURE__ */ jsx(
+        SizeInput,
+        {
+          label: "Width",
+          value: width,
+          property: "width",
+          onApplyStyle
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SizeInput,
+        {
+          label: "Height",
+          value: height,
+          property: "height",
+          onApplyStyle
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px" }, children: [
+      /* @__PURE__ */ jsx(
+        SizeInput,
+        {
+          label: "Min W",
+          value: minWidth,
+          property: "min-width",
+          onApplyStyle
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SizeInput,
+        {
+          label: "Max W",
+          value: maxWidth,
+          property: "max-width",
+          onApplyStyle
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px" }, children: [
+      /* @__PURE__ */ jsx(
+        SizeInput,
+        {
+          label: "Min H",
+          value: minHeight,
+          property: "min-height",
+          onApplyStyle
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SizeInput,
+        {
+          label: "Max H",
+          value: maxHeight,
+          property: "max-height",
+          onApplyStyle
+        }
+      )
+    ] })
+  ] });
+}
+function QuickSelectDropdown({
+  value,
+  tokens,
+  quickKeys,
+  onChange,
+  placeholder = "More..."
+}) {
+  const [showDropdown, setShowDropdown] = useState(false);
+  const { quickItems, dropdownItems } = useMemo(() => {
+    const quick = [];
+    const dropdown = [];
+    for (const [key, tokenValue] of Object.entries(tokens)) {
+      if (quickKeys.includes(key)) {
+        quick.push({ key, value: tokenValue });
+      } else {
+        dropdown.push({ key, value: tokenValue });
+      }
+    }
+    quick.sort((a, b) => quickKeys.indexOf(a.key) - quickKeys.indexOf(b.key));
+    return { quickItems: quick, dropdownItems: dropdown };
+  }, [tokens, quickKeys]);
+  const isSelected = (tokenValue) => {
+    const normalizeValue = (v) => v.replace(/\s+/g, "").toLowerCase();
+    return normalizeValue(value) === normalizeValue(tokenValue);
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "3px", flexWrap: "wrap" }, children: [
+    quickItems.map(({ key, value: tokenValue }) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onChange(tokenValue),
+        style: {
+          padding: "3px 6px",
+          borderRadius: "3px",
+          border: "1px solid",
+          borderColor: isSelected(tokenValue) ? "#18181b" : "#e4e4e7",
+          backgroundColor: isSelected(tokenValue) ? "#18181b" : "#ffffff",
+          color: isSelected(tokenValue) ? "#fafafa" : "#18181b",
+          fontSize: "10px",
+          fontFamily: "ui-monospace, monospace",
+          cursor: "pointer",
+          transition: "all 0.1s ease",
+          minWidth: "28px",
+          textAlign: "center"
+        },
+        title: `${key}: ${tokenValue}`,
+        children: key
+      },
+      key
+    )),
+    dropdownItems.length > 0 && /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setShowDropdown(!showDropdown),
+          onBlur: () => setTimeout(() => setShowDropdown(false), 150),
+          style: {
+            padding: "3px 6px",
+            borderRadius: "3px",
+            border: "1px solid #e4e4e7",
+            backgroundColor: "#ffffff",
+            color: "#71717a",
+            fontSize: "10px",
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            gap: "2px"
+          },
+          children: /* @__PURE__ */ jsx("span", { children: "..." })
+        }
+      ),
+      showDropdown && /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            marginTop: "2px",
+            backgroundColor: "#ffffff",
+            border: "1px solid #e4e4e7",
+            borderRadius: "4px",
+            boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)",
+            zIndex: 10,
+            maxHeight: "150px",
+            overflow: "auto",
+            minWidth: "100px"
+          },
+          children: dropdownItems.map(({ key, value: tokenValue }) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => {
+                onChange(tokenValue);
+                setShowDropdown(false);
+              },
+              style: {
+                display: "block",
+                width: "100%",
+                padding: "4px 8px",
+                border: "none",
+                backgroundColor: isSelected(tokenValue) ? "#f4f4f5" : "transparent",
+                color: "#18181b",
+                fontSize: "10px",
+                fontFamily: "ui-monospace, monospace",
+                cursor: "pointer",
+                textAlign: "left"
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: key }),
+                /* @__PURE__ */ jsx("span", { style: { color: "#71717a", marginLeft: "4px" }, children: tokenValue })
+              ]
+            },
+            key
+          ))
+        }
+      )
+    ] })
+  ] });
+}
+function ColorPicker({ value, colors: colors2, onChange }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const colorGrid = useMemo(() => {
+    const grid = [];
+    for (const [name, shades] of Object.entries(colors2)) {
+      if (typeof shades === "object") {
+        for (const [shade, colorValue] of Object.entries(shades)) {
+          grid.push({ name, shade, value: colorValue });
+        }
+      }
+    }
+    return grid;
+  }, [colors2]);
+  const commonShades = ["500", "600", "700"];
+  const compactColors = useMemo(() => {
+    return colorGrid.filter((c) => commonShades.includes(c.shade));
+  }, [colorGrid]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "6px",
+          marginBottom: "6px"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                width: "22px",
+                height: "22px",
+                borderRadius: "4px",
+                backgroundColor: value,
+                border: "1px solid #e4e4e7",
+                boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.06)"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value,
+              onChange: (e) => onChange(e.target.value),
+              style: {
+                flex: 1,
+                backgroundColor: "#ffffff",
+                border: "1px solid #e4e4e7",
+                borderRadius: "4px",
+                padding: "4px 8px",
+                color: "#18181b",
+                fontSize: "11px",
+                fontFamily: "ui-monospace, monospace"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setIsExpanded(!isExpanded),
+              style: {
+                padding: "4px 6px",
+                borderRadius: "4px",
+                border: "1px solid #e4e4e7",
+                backgroundColor: "#ffffff",
+                color: "#71717a",
+                fontSize: "10px",
+                cursor: "pointer"
+              },
+              children: isExpanded ? "\u25B2" : "\u25BC"
+            }
+          )
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(11, 1fr)",
+          gap: "2px",
+          padding: "6px",
+          backgroundColor: "#fafafa",
+          border: "1px solid #e4e4e7",
+          borderRadius: "8px",
+          maxHeight: "200px",
+          overflow: "auto"
+        },
+        children: colorGrid.map((color, i) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => onChange(color.value),
+            style: {
+              width: "18px",
+              height: "18px",
+              borderRadius: "3px",
+              backgroundColor: color.value,
+              border: value === color.value ? "2px solid #18181b" : "1px solid #e4e4e7",
+              cursor: "pointer"
+            },
+            title: `${color.name}-${color.shade}`
+          },
+          i
+        ))
+      }
+    ),
+    !isExpanded && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "3px", flexWrap: "wrap" }, children: compactColors.map((color, i) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onChange(color.value),
+        style: {
+          width: "14px",
+          height: "14px",
+          borderRadius: "3px",
+          backgroundColor: color.value,
+          border: value === color.value ? "2px solid #18181b" : "1px solid #e4e4e7",
+          cursor: "pointer"
+        },
+        title: `${color.name}-${color.shade}`
+      },
+      i
+    )) })
+  ] });
+}
+var AlignLeftIcon = () => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+  /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "15", y2: "12" }),
+  /* @__PURE__ */ jsx("line", { x1: "3", y1: "18", x2: "18", y2: "18" })
+] });
+var AlignCenterIcon = () => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+  /* @__PURE__ */ jsx("line", { x1: "6", y1: "12", x2: "18", y2: "12" }),
+  /* @__PURE__ */ jsx("line", { x1: "4", y1: "18", x2: "20", y2: "18" })
+] });
+var AlignRightIcon = () => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+  /* @__PURE__ */ jsx("line", { x1: "9", y1: "12", x2: "21", y2: "12" }),
+  /* @__PURE__ */ jsx("line", { x1: "6", y1: "18", x2: "21", y2: "18" })
+] });
+var AlignJustifyIcon = () => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+  /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+  /* @__PURE__ */ jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
+] });
+function TypographySection({
+  expanded,
+  onToggle,
+  computedStyle,
+  onApplyStyle,
+  tokens,
+  hasChanges = false
+}) {
+  const color = computedStyle.color;
+  const fontSize2 = computedStyle.fontSize;
+  const fontWeight2 = computedStyle.fontWeight;
+  const fontFamily2 = computedStyle.fontFamily;
+  const textAlign = computedStyle.textAlign;
+  const lineHeight2 = computedStyle.lineHeight;
+  return /* @__PURE__ */ jsxs(SectionWrapper, { title: "Typography", expanded, onToggle, hasChanges, children: [
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+      /* @__PURE__ */ jsx("label", { style: { fontSize: "10px", color: "#71717a", marginBottom: "4px", display: "block" }, children: "Color" }),
+      /* @__PURE__ */ jsx(
+        ColorPicker,
+        {
+          value: color,
+          colors: tokens.colors,
+          onChange: (value) => onApplyStyle("color", value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+      /* @__PURE__ */ jsx("label", { style: { fontSize: "10px", color: "#71717a", marginBottom: "4px", display: "block" }, children: "Font Size" }),
+      /* @__PURE__ */ jsx(
+        QuickSelectDropdown,
+        {
+          value: fontSize2,
+          tokens: tokens.fontSize,
+          quickKeys: ["xs", "sm", "base", "lg", "xl", "2xl"],
+          onChange: (value) => onApplyStyle("font-size", value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+      /* @__PURE__ */ jsx("label", { style: { fontSize: "10px", color: "#71717a", marginBottom: "4px", display: "block" }, children: "Font Weight" }),
+      /* @__PURE__ */ jsx(
+        QuickSelectDropdown,
+        {
+          value: fontWeight2,
+          tokens: tokens.fontWeight,
+          quickKeys: ["light", "normal", "medium", "semibold", "bold"],
+          onChange: (value) => onApplyStyle("font-weight", value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+      /* @__PURE__ */ jsx("label", { style: { fontSize: "10px", color: "#71717a", marginBottom: "4px", display: "block" }, children: "Font Family" }),
+      /* @__PURE__ */ jsx(
+        TokenDropdown,
+        {
+          value: fontFamily2,
+          tokens: tokens.fontFamily,
+          onChange: (value) => onApplyStyle("font-family", value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+      /* @__PURE__ */ jsx("label", { style: { fontSize: "10px", color: "#71717a", marginBottom: "4px", display: "block" }, children: "Text Align" }),
+      /* @__PURE__ */ jsx(
+        ToggleGroup,
+        {
+          value: textAlign,
+          options: [
+            { value: "left", label: /* @__PURE__ */ jsx(AlignLeftIcon, {}) },
+            { value: "center", label: /* @__PURE__ */ jsx(AlignCenterIcon, {}) },
+            { value: "right", label: /* @__PURE__ */ jsx(AlignRightIcon, {}) },
+            { value: "justify", label: /* @__PURE__ */ jsx(AlignJustifyIcon, {}) }
+          ],
+          onChange: (value) => onApplyStyle("text-align", value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { style: { fontSize: "10px", color: "#71717a", marginBottom: "4px", display: "block" }, children: "Line Height" }),
+      /* @__PURE__ */ jsx(
+        QuickSelectDropdown,
+        {
+          value: lineHeight2,
+          tokens: tokens.lineHeight,
+          quickKeys: ["tight", "snug", "normal", "relaxed"],
+          onChange: (value) => onApplyStyle("line-height", value)
+        }
+      )
+    ] })
+  ] });
+}
+function BackgroundSection({
+  expanded,
+  onToggle,
+  computedStyle,
+  onApplyStyle,
+  tokens,
+  hasChanges = false
+}) {
+  const backgroundColor = computedStyle.backgroundColor;
+  const borderColor = computedStyle.borderColor;
+  const borderWidth2 = computedStyle.borderWidth;
+  const borderRadius2 = computedStyle.borderRadius;
+  return /* @__PURE__ */ jsxs(SectionWrapper, { title: "Background & Border", expanded, onToggle, hasChanges, children: [
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+      /* @__PURE__ */ jsx("label", { style: { fontSize: "10px", color: "#71717a", marginBottom: "4px", display: "block" }, children: "Background" }),
+      /* @__PURE__ */ jsx(
+        ColorPicker,
+        {
+          value: backgroundColor,
+          colors: tokens.colors,
+          onChange: (value) => onApplyStyle("background-color", value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+      /* @__PURE__ */ jsx("label", { style: { fontSize: "10px", color: "#71717a", marginBottom: "4px", display: "block" }, children: "Border Color" }),
+      /* @__PURE__ */ jsx(
+        ColorPicker,
+        {
+          value: borderColor,
+          colors: tokens.colors,
+          onChange: (value) => onApplyStyle("border-color", value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+      /* @__PURE__ */ jsx("label", { style: { fontSize: "10px", color: "#71717a", marginBottom: "4px", display: "block" }, children: "Border Width" }),
+      /* @__PURE__ */ jsx(
+        TokenDropdown,
+        {
+          value: borderWidth2,
+          tokens: tokens.borderWidth,
+          onChange: (value) => onApplyStyle("border-width", value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { style: { fontSize: "10px", color: "#71717a", marginBottom: "4px", display: "block" }, children: "Border Radius" }),
+      /* @__PURE__ */ jsx(
+        TokenDropdown,
+        {
+          value: borderRadius2,
+          tokens: tokens.borderRadius,
+          onChange: (value) => onApplyStyle("border-radius", value)
+        }
+      )
+    ] })
+  ] });
+}
+function EffectsSection({
+  expanded,
+  onToggle,
+  computedStyle,
+  onApplyStyle,
+  tokens,
+  hasChanges = false
+}) {
+  const boxShadow2 = computedStyle.boxShadow;
+  const borderRadius2 = computedStyle.borderRadius;
+  const borderWidth2 = computedStyle.borderWidth;
+  const opacity = parseFloat(computedStyle.opacity) * 100;
+  return /* @__PURE__ */ jsxs(SectionWrapper, { title: "Effects", expanded, onToggle, hasChanges, children: [
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+      /* @__PURE__ */ jsx("label", { style: { fontSize: "10px", color: "#71717a", marginBottom: "4px", display: "block" }, children: "Border Radius" }),
+      /* @__PURE__ */ jsx(
+        QuickSelectDropdown,
+        {
+          value: borderRadius2,
+          tokens: tokens.borderRadius,
+          quickKeys: ["none", "sm", "md", "lg", "full"],
+          onChange: (value) => onApplyStyle("border-radius", value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+      /* @__PURE__ */ jsx("label", { style: { fontSize: "10px", color: "#71717a", marginBottom: "4px", display: "block" }, children: "Border Width" }),
+      /* @__PURE__ */ jsx(
+        QuickSelectDropdown,
+        {
+          value: borderWidth2,
+          tokens: tokens.borderWidth,
+          quickKeys: ["0", "DEFAULT", "2", "4"],
+          onChange: (value) => onApplyStyle("border-width", value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+      /* @__PURE__ */ jsx("label", { style: { fontSize: "10px", color: "#71717a", marginBottom: "4px", display: "block" }, children: "Shadow" }),
+      /* @__PURE__ */ jsx(
+        QuickSelectDropdown,
+        {
+          value: boxShadow2,
+          tokens: tokens.boxShadow,
+          quickKeys: ["none", "sm", "md", "lg"],
+          onChange: (value) => onApplyStyle("box-shadow", value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { style: { fontSize: "10px", color: "#71717a", marginBottom: "4px", display: "block" }, children: "Opacity" }),
+      /* @__PURE__ */ jsx(
+        SliderInput,
+        {
+          value: opacity,
+          min: 0,
+          max: 100,
+          step: 1,
+          unit: "%",
+          onChange: (value) => onApplyStyle("opacity", String(value / 100))
+        }
+      )
+    ] })
+  ] });
+}
+function AnnotationSection({
+  expanded,
+  onToggle,
+  onAnnotate,
+  existingAnnotation = "",
+  hasChanges = false
+}) {
+  const [note, setNote] = useState(existingAnnotation);
+  const [isSaved, setIsSaved] = useState(!!existingAnnotation);
+  const debounceRef = useRef(null);
+  const textareaRef = useRef(null);
+  useEffect(() => {
+    setNote(existingAnnotation);
+    setIsSaved(!!existingAnnotation);
+  }, [existingAnnotation]);
+  const handleChange = useCallback((value) => {
+    setNote(value);
+    setIsSaved(false);
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+    if (value.trim()) {
+      debounceRef.current = setTimeout(() => {
+        onAnnotate(value.trim());
+        setIsSaved(true);
+      }, 500);
+    }
+  }, [onAnnotate]);
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, []);
+  const handleBlur = () => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+    if (note.trim() && !isSaved) {
+      onAnnotate(note.trim());
+      setIsSaved(true);
+    }
+  };
+  const showActiveState = !!(note.trim() && isSaved);
+  return /* @__PURE__ */ jsx(
+    SectionWrapper,
+    {
+      title: "Annotation",
+      expanded,
+      onToggle,
+      hasChanges: hasChanges || showActiveState,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            position: "relative",
+            borderRadius: "4px",
+            border: `1px solid ${showActiveState ? "#3b82f6" : "#e4e4e7"}`,
+            backgroundColor: showActiveState ? "#eff6ff" : "#ffffff",
+            transition: "all 0.15s ease"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ref: textareaRef,
+                value: note,
+                onChange: (e) => handleChange(e.target.value),
+                onBlur: handleBlur,
+                placeholder: "Add a note about this element...",
+                style: {
+                  width: "100%",
+                  minHeight: "60px",
+                  padding: "8px",
+                  borderRadius: "4px",
+                  border: "none",
+                  backgroundColor: "transparent",
+                  color: "#18181b",
+                  fontSize: "11px",
+                  resize: "vertical",
+                  fontFamily: "system-ui, -apple-system, sans-serif",
+                  outline: "none"
+                }
+              }
+            ),
+            note.trim() && /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  bottom: "4px",
+                  right: "4px",
+                  fontSize: "9px",
+                  color: isSaved ? "#3b82f6" : "#a1a1aa",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "2px"
+                },
+                children: isSaved ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }),
+                  "Saved"
+                ] }) : "Saving..."
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+var SunIcon = () => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "5" }),
+  /* @__PURE__ */ jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
+  /* @__PURE__ */ jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
+  /* @__PURE__ */ jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
+  /* @__PURE__ */ jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
+  /* @__PURE__ */ jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
+  /* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
+  /* @__PURE__ */ jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }),
+  /* @__PURE__ */ jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })
+] });
+var MoonIcon = () => /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) });
+var MonitorIcon = () => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsx("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
+  /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
+] });
+var SpacingIcon = () => /* @__PURE__ */ jsxs("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+  /* @__PURE__ */ jsx("rect", { x: "7", y: "7", width: "10", height: "10", rx: "1" })
+] });
+var ResetIcon = () => /* @__PURE__ */ jsxs("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" })
+] });
+var propertySectionMap = {
+  "display": "layout",
+  "flex-direction": "layout",
+  "justify-content": "layout",
+  "align-items": "layout",
+  "flex-wrap": "layout",
+  "gap": "layout",
+  "margin-top": "spacing",
+  "margin-right": "spacing",
+  "margin-bottom": "spacing",
+  "margin-left": "spacing",
+  "padding-top": "spacing",
+  "padding-right": "spacing",
+  "padding-bottom": "spacing",
+  "padding-left": "spacing",
+  "width": "size",
+  "height": "size",
+  "min-width": "size",
+  "min-height": "size",
+  "max-width": "size",
+  "max-height": "size",
+  "font-size": "typography",
+  "font-weight": "typography",
+  "font-family": "typography",
+  "line-height": "typography",
+  "letter-spacing": "typography",
+  "text-align": "typography",
+  "color": "typography",
+  "background-color": "background",
+  "background": "background",
+  "border-radius": "effects",
+  "box-shadow": "effects",
+  "border": "effects",
+  "border-width": "effects",
+  "opacity": "effects"
+};
+function EditPanel({
+  selectedElement,
+  actions,
+  tokens,
+  onClose,
+  showMarginPadding,
+  zIndex = 9999,
+  theme,
+  onThemeToggle,
+  changes,
+  annotations,
+  onReset
+}) {
+  const [expandedSections, setExpandedSections] = useState(
+    /* @__PURE__ */ new Set(["annotation", "layout", "spacing", "typography"])
+  );
+  const changedSections = useMemo(() => {
+    const sections = /* @__PURE__ */ new Set();
+    const elementChanges = changes.filter(
+      (c) => c.target.path === selectedElement.path && c.type === "style"
+    );
+    for (const change of elementChanges) {
+      const property = change.after.property;
+      const section = propertySectionMap[property];
+      if (section) {
+        sections.add(section);
+      }
+    }
+    return sections;
+  }, [changes, selectedElement.path]);
+  const changedSpacingProps = useMemo(() => {
+    const props = {};
+    const elementChanges = changes.filter(
+      (c) => c.target.path === selectedElement.path && c.type === "style"
+    );
+    for (const change of elementChanges) {
+      const prop = change.after.property;
+      if (prop.startsWith("margin-") || prop.startsWith("padding-")) {
+        props[prop] = true;
+      }
+    }
+    return props;
+  }, [changes, selectedElement.path]);
+  const toggleSection = (section) => {
+    setExpandedSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(section)) {
+        next.delete(section);
+      } else {
+        next.add(section);
+      }
+      return next;
+    });
+  };
+  const computedStyle = window.getComputedStyle(selectedElement.element);
+  const themeIcons = {
+    light: /* @__PURE__ */ jsx(SunIcon, {}),
+    dark: /* @__PURE__ */ jsx(MoonIcon, {}),
+    system: /* @__PURE__ */ jsx(MonitorIcon, {})
+  };
+  const hasAnyChanges = changes.some((c) => c.target.path === selectedElement.path);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-bobbin": "edit-panel",
+      style: {
+        position: "fixed",
+        top: "16px",
+        right: "16px",
+        width: "280px",
+        maxHeight: "calc(100vh - 32px)",
+        backgroundColor: "#fafafa",
+        borderRadius: "8px",
+        border: "1px solid #e4e4e7",
+        boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+        zIndex,
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        color: "#18181b",
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        fontSize: "13px"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "10px 12px",
+              borderBottom: "1px solid #e4e4e7",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              backgroundColor: "#ffffff"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+                /* @__PURE__ */ jsx("span", { style: { fontWeight: 500, fontSize: "12px" }, children: selectedElement.tagName }),
+                selectedElement.id && /* @__PURE__ */ jsxs("span", { style: { color: "#71717a", fontSize: "11px" }, children: [
+                  "#",
+                  selectedElement.id
+                ] }),
+                selectedElement.classList.length > 0 && /* @__PURE__ */ jsxs("span", { style: { color: "#a1a1aa", fontSize: "10px" }, children: [
+                  ".",
+                  selectedElement.classList.slice(0, 2).join("."),
+                  selectedElement.classList.length > 2 && "..."
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "4px" }, children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: onThemeToggle,
+                    style: {
+                      padding: "4px 6px",
+                      borderRadius: "4px",
+                      border: "1px solid #e4e4e7",
+                      backgroundColor: "#ffffff",
+                      cursor: "pointer",
+                      fontSize: "12px"
+                    },
+                    title: `Theme: ${theme}`,
+                    children: themeIcons[theme]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: actions.toggleMarginPadding,
+                    style: {
+                      padding: "4px 6px",
+                      borderRadius: "4px",
+                      border: "1px solid #e4e4e7",
+                      backgroundColor: showMarginPadding ? "#18181b" : "#ffffff",
+                      color: showMarginPadding ? "#fafafa" : "#71717a",
+                      cursor: "pointer",
+                      fontSize: "10px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    title: "Toggle spacing visualization",
+                    children: /* @__PURE__ */ jsx(SpacingIcon, {})
+                  }
+                ),
+                hasAnyChanges && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: onReset,
+                    style: {
+                      padding: "4px 6px",
+                      borderRadius: "4px",
+                      border: "1px solid #e4e4e7",
+                      backgroundColor: "#ffffff",
+                      color: "#71717a",
+                      cursor: "pointer",
+                      fontSize: "10px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    title: "Reset all changes",
+                    children: /* @__PURE__ */ jsx(ResetIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: onClose,
+                    style: {
+                      width: "22px",
+                      height: "22px",
+                      borderRadius: "4px",
+                      border: "1px solid #e4e4e7",
+                      backgroundColor: "#ffffff",
+                      color: "#71717a",
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontSize: "12px"
+                    },
+                    children: "\xD7"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflow: "auto", padding: "8px 0" }, children: [
+          /* @__PURE__ */ jsx(
+            AnnotationSection,
+            {
+              expanded: expandedSections.has("annotation"),
+              onToggle: () => toggleSection("annotation"),
+              onAnnotate: actions.annotate,
+              existingAnnotation: annotations.find((a) => a.elementPath === selectedElement.path)?.content,
+              hasChanges: annotations.some((a) => a.elementPath === selectedElement.path)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            LayoutSection,
+            {
+              expanded: expandedSections.has("layout"),
+              onToggle: () => toggleSection("layout"),
+              computedStyle,
+              onApplyStyle: actions.applyStyle,
+              tokens,
+              hasChanges: changedSections.has("layout")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SpacingSection,
+            {
+              expanded: expandedSections.has("spacing"),
+              onToggle: () => toggleSection("spacing"),
+              computedStyle,
+              onApplyStyle: actions.applyStyle,
+              tokens,
+              hasChanges: changedSections.has("spacing"),
+              changedProps: changedSpacingProps
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SizeSection,
+            {
+              expanded: expandedSections.has("size"),
+              onToggle: () => toggleSection("size"),
+              computedStyle,
+              onApplyStyle: actions.applyStyle,
+              tokens,
+              hasChanges: changedSections.has("size")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TypographySection,
+            {
+              expanded: expandedSections.has("typography"),
+              onToggle: () => toggleSection("typography"),
+              computedStyle,
+              onApplyStyle: actions.applyStyle,
+              tokens,
+              hasChanges: changedSections.has("typography")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            BackgroundSection,
+            {
+              expanded: expandedSections.has("background"),
+              onToggle: () => toggleSection("background"),
+              computedStyle,
+              onApplyStyle: actions.applyStyle,
+              tokens,
+              hasChanges: changedSections.has("background")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            EffectsSection,
+            {
+              expanded: expandedSections.has("effects"),
+              onToggle: () => toggleSection("effects"),
+              computedStyle,
+              onApplyStyle: actions.applyStyle,
+              tokens,
+              hasChanges: changedSections.has("effects")
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function Inspector({
+  selectedElement,
+  onSelectElement,
+  zIndex = 9999
+}) {
+  const [activeTab, setActiveTab] = useState("attributes");
+  const [isMinimized, setIsMinimized] = useState(false);
+  const computedStyles = useMemo(() => {
+    const computed = window.getComputedStyle(selectedElement.element);
+    const styles = {};
+    const properties = [
+      "display",
+      "position",
+      "width",
+      "height",
+      "margin",
+      "padding",
+      "border",
+      "background",
+      "color",
+      "font-family",
+      "font-size",
+      "font-weight",
+      "line-height",
+      "text-align",
+      "flex",
+      "grid"
+    ];
+    for (const prop of properties) {
+      styles[prop] = computed.getPropertyValue(prop);
+    }
+    return styles;
+  }, [selectedElement.element]);
+  const attributes = useMemo(() => {
+    const attrs = {};
+    const el = selectedElement.element;
+    for (const attr of el.attributes) {
+      if (attr.name.toLowerCase() === "contenteditable") {
+        continue;
+      }
+      attrs[attr.name] = attr.value;
+    }
+    return attrs;
+  }, [selectedElement.element]);
+  const domPath = useMemo(() => {
+    const path = [];
+    let el = selectedElement.element;
+    while (el && el !== document.body) {
+      path.unshift(el);
+      el = el.parentElement;
+    }
+    return path;
+  }, [selectedElement.element]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-bobbin": "inspector",
+      style: {
+        position: "fixed",
+        bottom: "16px",
+        left: "16px",
+        width: isMinimized ? "auto" : "320px",
+        maxHeight: isMinimized ? "auto" : "260px",
+        backgroundColor: "#fafafa",
+        borderRadius: "8px",
+        border: "1px solid #e4e4e7",
+        boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)",
+        zIndex,
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        color: "#18181b",
+        fontFamily: "ui-monospace, SFMono-Regular, monospace",
+        fontSize: "11px"
+      },
+      children: isMinimized ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            padding: "6px 10px",
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            cursor: "pointer",
+            backgroundColor: "#ffffff"
+          },
+          onClick: () => setIsMinimized(false),
+          children: /* @__PURE__ */ jsx("span", { style: { fontSize: "10px", color: "#71717a" }, children: "Inspector" })
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", borderBottom: "1px solid #e4e4e7", backgroundColor: "#ffffff" }, children: [
+          ["styles", "attributes"].map((tab) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setActiveTab(tab),
+              style: {
+                flex: 1,
+                padding: "6px 8px",
+                border: "none",
+                borderBottom: activeTab === tab ? "2px solid #18181b" : "2px solid transparent",
+                backgroundColor: "transparent",
+                color: activeTab === tab ? "#18181b" : "#71717a",
+                cursor: "pointer",
+                textTransform: "capitalize",
+                fontSize: "11px",
+                fontWeight: activeTab === tab ? 500 : 400
+              },
+              children: tab
+            },
+            tab
+          )),
+          /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: "2px", padding: "0 4px" }, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setIsMinimized(true),
+              style: {
+                width: "18px",
+                height: "18px",
+                borderRadius: "3px",
+                border: "none",
+                backgroundColor: "transparent",
+                color: "#71717a",
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: "14px"
+              },
+              title: "Minimize",
+              children: "\u2212"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflow: "auto", padding: "6px" }, children: [
+          activeTab === "tree" && /* @__PURE__ */ jsx("div", { children: domPath.map((el, i) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              onClick: () => onSelectElement(el),
+              style: {
+                padding: "3px 6px",
+                paddingLeft: `${i * 10 + 6}px`,
+                cursor: "pointer",
+                backgroundColor: el === selectedElement.element ? "#18181b" : "transparent",
+                color: el === selectedElement.element ? "#fafafa" : "#18181b",
+                borderRadius: "3px",
+                marginBottom: "1px"
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { style: { color: el === selectedElement.element ? "#a1a1aa" : "#52525b" }, children: el.tagName.toLowerCase() }),
+                el.id && /* @__PURE__ */ jsxs("span", { style: { color: el === selectedElement.element ? "#d4d4d8" : "#71717a" }, children: [
+                  "#",
+                  el.id
+                ] }),
+                el.classList.length > 0 && /* @__PURE__ */ jsxs("span", { style: { color: el === selectedElement.element ? "#a1a1aa" : "#a1a1aa" }, children: [
+                  ".",
+                  Array.from(el.classList).slice(0, 2).join(".")
+                ] })
+              ]
+            },
+            i
+          )) }),
+          activeTab === "styles" && /* @__PURE__ */ jsx("div", { children: Object.entries(computedStyles).map(([prop, value]) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                padding: "2px 0",
+                borderBottom: "1px solid #f4f4f5"
+              },
+              children: [
+                /* @__PURE__ */ jsxs("span", { style: { color: "#52525b", width: "100px" }, children: [
+                  prop,
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsx("span", { style: { color: "#18181b", flex: 1 }, children: value })
+              ]
+            },
+            prop
+          )) }),
+          activeTab === "attributes" && /* @__PURE__ */ jsx("div", { children: Object.entries(attributes).map(([name, value]) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                padding: "2px 0",
+                borderBottom: "1px solid #f4f4f5"
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { style: { color: "#71717a", width: "80px" }, children: name }),
+                /* @__PURE__ */ jsxs("span", { style: { color: "#18181b" }, children: [
+                  '"',
+                  value,
+                  '"'
+                ] })
+              ]
+            },
+            name
+          )) })
+        ] })
+      ] })
+    }
+  );
+}
+function Bobbin(props) {
+  const { showInspector = false, ...bobbinProps } = props;
+  const bobbin = useBobbin(bobbinProps);
+  const { zIndex = 9999, pillContainer } = bobbinProps;
+  return createPortal(
+    /* @__PURE__ */ jsxs("div", { "data-bobbin": "root", children: [
+      /* @__PURE__ */ jsx(
+        Pill,
+        {
+          state: bobbin,
+          actions: bobbin,
+          position: bobbinProps.position,
+          container: pillContainer ?? bobbinProps.container,
+          zIndex
+        }
+      ),
+      bobbin.isActive && /* @__PURE__ */ jsx(
+        SelectionOverlay,
+        {
+          hoveredElement: bobbin.hoveredElement,
+          selectedElement: bobbin.selectedElement,
+          zIndex: zIndex - 10
+        }
+      ),
+      bobbin.selectedElement && /* @__PURE__ */ jsx(
+        ControlHandles,
+        {
+          selectedElement: bobbin.selectedElement,
+          actions: bobbin,
+          clipboard: bobbin.clipboard,
+          zIndex
+        }
+      ),
+      bobbin.selectedElement && bobbin.showMarginPadding && /* @__PURE__ */ jsx(
+        MarginPaddingOverlay,
+        {
+          selectedElement: bobbin.selectedElement,
+          zIndex: zIndex - 5
+        }
+      ),
+      bobbin.selectedElement && bobbin.activePanel === "style" && /* @__PURE__ */ jsx(
+        EditPanel,
+        {
+          selectedElement: bobbin.selectedElement,
+          actions: bobbin,
+          tokens: bobbin.tokens,
+          onClose: bobbin.clearSelection,
+          showMarginPadding: bobbin.showMarginPadding,
+          zIndex,
+          theme: bobbin.theme,
+          onThemeToggle: bobbin.toggleTheme,
+          changes: bobbin.changes,
+          annotations: bobbin.annotations,
+          onReset: bobbin.resetChanges
+        }
+      ),
+      bobbin.selectedElement && (showInspector || bobbin.activePanel === "inspector") && /* @__PURE__ */ jsx(
+        Inspector,
+        {
+          selectedElement: bobbin.selectedElement,
+          onSelectElement: (el) => bobbin.selectElement(el),
+          onClose: () => bobbin.setActivePanel(null),
+          zIndex
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+
+export { Bobbin, borderRadius, borderWidth, boxShadow, colors, defaultTokens, fontFamily, fontSize, fontWeight, generateId, getElementPath, getElementXPath, letterSpacing, lineHeight, parseYAMLChangeset, serializeChangesToYAML, spacing, useBobbin, useChangeTracker, useClipboard, useElementSelection };