@popmelt.com/core 0.1.0 → 0.2.0

package/dist/index.mjs

@@ -35,7 +35,7 @@ var __objRest = (source, exclude) => {
 // src/components/PopmeltProvider.tsx
 import {
   createContext,
-  useCallback as useCallback8,
+  useCallback as useCallback9,
   useContext,
   useEffect as useEffect20,
   useMemo as useMemo4,
@@ -487,7 +487,7 @@ function handleSetAnnotating(state, payload) {
   return __spreadProps(__spreadValues({}, state), { isAnnotating: payload });
 }
 function handleSetTool(state, payload) {
-  return __spreadProps(__spreadValues({}, state), { activeTool: payload });
+  return __spreadProps(__spreadValues({}, state), { activeTool: payload, inspectedElement: null });
 }
 function handleSetColor(state, payload) {
   return __spreadProps(__spreadValues({}, state), { activeColor: payload });
@@ -3706,6 +3706,16 @@ function PaddingHandles({ element, padding, accentColor, hoveredSide, draggingSi
 // src/components/StylePanel.tsx
 import { useCallback as useCallback4, useEffect as useEffect12, useMemo, useRef as useRef4, useState as useState9 } from "react";
 import { AlignCenter, AlignHorizontalSpaceAround, AlignJustify, AlignLeft, AlignRight, AlignVerticalSpaceAround, Baseline, Check, ChevronDown, Columns3, Grid2x2, MoveHorizontal, Plus, RectangleHorizontal, RotateCcw, Rows3, Shrink, UnfoldHorizontal, UnfoldVertical, WholeWord, X } from "lucide-react";
+
+// src/styles/border.ts
+var DIAG_SVG = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMic+PGRlZnM+PHBhdHRlcm4gaWQ9J2QnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnPjxwYXRoIGQ9J00tMSwxIGwyLC0yIE0wLDQgbDQsLTQgTTMsNSBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScuNScvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJyBmaWxsPSd1cmwoI2QpJy8+PC9zdmc+";
+var POPMELT_BORDER = {
+  borderWidth: 3,
+  borderStyle: "solid",
+  borderImage: `url("${DIAG_SVG}") 4 / 1.9 / 0 round`
+};
+
+// src/components/StylePanel.tsx
 import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function colorWithAlpha6(color, alpha) {
   const oklchMatch = color.match(/^oklch\(([^)]+)\)$/i);
@@ -4675,10 +4685,16 @@ function UnitInput({
   style: inputStyle,
   placeholder,
   showUnit = true,
-  unitStyle: customUnitStyle
+  unitStyle: customUnitStyle,
+  preferredUnit,
+  onUnitCycle
 }) {
   const parsed = parseValue(value);
-  const effectiveUnit = isModified ? parsed.unit || getDefaultUnit(property) : getDefaultUnit(property);
+  const propertyDefault = getDefaultUnit(property);
+  const units = PROPERTY_UNITS[property];
+  const canUsePreference = preferredUnit && units && units.includes(preferredUnit);
+  const defaultUnit = canUsePreference ? preferredUnit : propertyDefault;
+  const effectiveUnit = isModified ? parsed.unit || defaultUnit : defaultUnit;
   const displayNum = !isModified && parsed.unit && parsed.unit !== effectiveUnit ? convertFromPx(parsed.num, effectiveUnit) : parsed.num;
   const [isFocused, setIsFocused] = useState9(false);
   const [editText, setEditText] = useState9("");
@@ -4737,12 +4753,17 @@ function UnitInput({
   const displayValue = isFocused ? editText : isNumericValue ? String(displayNum) : "";
   const hasTypedUnit = isFocused && /\s*(rem|em|px|%)\s*$/i.test(editText);
   const shownUnit = hasTypedUnit ? "" : effectiveUnit;
+  const isUnitClickable = onUnitCycle && (shownUnit === "rem" || shownUnit === "px");
   const defaultUnitSuffix = {
     fontSize: 10,
     fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
     color: "#999",
     pointerEvents: "none"
   };
+  const clickableUnitStyle = __spreadProps(__spreadValues({}, customUnitStyle != null ? customUnitStyle : defaultUnitSuffix), {
+    pointerEvents: "auto",
+    cursor: "pointer"
+  });
   return /* @__PURE__ */ jsxs6(Fragment4, { children: [
     /* @__PURE__ */ jsx7(
       "input",
@@ -4758,7 +4779,15 @@ function UnitInput({
         style: inputStyle
       }
     ),
-    showUnit && shownUnit && /* @__PURE__ */ jsx7("span", { style: customUnitStyle != null ? customUnitStyle : defaultUnitSuffix, children: shownUnit })
+    showUnit && shownUnit && /* @__PURE__ */ jsx7(
+      "span",
+      {
+        style: isUnitClickable ? clickableUnitStyle : customUnitStyle != null ? customUnitStyle : defaultUnitSuffix,
+        onClick: isUnitClickable ? onUnitCycle : void 0,
+        title: isUnitClickable ? "Click to switch units" : void 0,
+        children: shownUnit
+      }
+    )
   ] });
 }
 function ColorInput({
@@ -5179,7 +5208,10 @@ function LayoutSection({
   activeDropdown,
   onDropdownChange,
   panelContentRef,
-  accentColor
+  accentColor,
+  onFieldHover,
+  preferredUnit,
+  onUnitCycle
 }) {
   const setActiveDropdown = onDropdownChange;
   const display = getValue("display");
@@ -5207,7 +5239,10 @@ function LayoutSection({
   const overflow = getValue("overflow");
   const gridCols = gridTemplateCols.split(/\s+/).filter((v) => v && v !== "none").length || 1;
   const gridRows = gridTemplateRows.split(/\s+/).filter((v) => v && v !== "none").length || 1;
+  const [gridHovered, setGridHovered] = useState9(false);
   const hasActiveDropdown = activeDropdown !== null;
+  const dimSiblings = hasActiveDropdown || gridHovered;
+  const siblingOpacity = hasActiveDropdown ? 0.3 : gridHovered ? 0.65 : 1;
   const DisplayModeButton = ({ mode, icon, active }) => /* @__PURE__ */ jsx7(
     "button",
     {
@@ -5246,84 +5281,159 @@ function LayoutSection({
     const v = value || "0";
     handleChange("padding", `${v} ${current.right} ${v} ${current.left}`);
   };
-  const AlignmentGrid = () => {
-    const justify = getValue("justify-content");
-    const align = getValue("align-items");
-    const isColumn = flexDirection === "column" || flexDirection === "column-reverse";
-    const getJustifyIndex = (val) => {
-      if (val === "flex-start" || val === "start") return 0;
-      if (val === "center") return 1;
-      if (val === "flex-end" || val === "end") return 2;
-      return 0;
-    };
-    const getAlignIndex = (val) => {
-      if (val === "flex-start" || val === "start") return 0;
-      if (val === "center") return 1;
-      if (val === "flex-end" || val === "end") return 2;
-      return 0;
-    };
-    const justifyIdx = getJustifyIndex(justify);
-    const alignIdx = getAlignIndex(align);
-    const activeCol = isColumn ? alignIdx : justifyIdx;
-    const activeRow = isColumn ? justifyIdx : alignIdx;
-    const handleClick = (col, row) => {
-      const justifyValues = ["flex-start", "center", "flex-end"];
-      const alignValues = ["flex-start", "center", "flex-end"];
-      if (isColumn) {
-        handleChange("justify-content", justifyValues[row]);
-        handleChange("align-items", alignValues[col]);
-      } else {
-        handleChange("justify-content", justifyValues[col]);
-        handleChange("align-items", alignValues[row]);
+  const [scrubDisplay, setScrubDisplay] = useState9({});
+  const scrubPreview = useCallback4((key, domUpdate) => (v) => {
+    domUpdate(v);
+    setScrubDisplay((prev) => __spreadProps(__spreadValues({}, prev), { [key]: v }));
+  }, []);
+  const clearScrub = useCallback4((key) => {
+    setScrubDisplay((prev) => {
+      const next = __spreadValues({}, prev);
+      delete next[key];
+      return next;
+    });
+  }, []);
+  const previewPaddingHorizontal = useCallback4((v) => {
+    const current = parseSpacing(getValue("padding"));
+    applyInlineStyle(element, "padding", `${current.top} ${v} ${current.bottom} ${v}`);
+  }, [element, getValue]);
+  const previewPaddingVertical = useCallback4((v) => {
+    const current = parseSpacing(getValue("padding"));
+    applyInlineStyle(element, "padding", `${v} ${current.right} ${v} ${current.left}`);
+  }, [element, getValue]);
+  const previewProperty = useCallback4((property) => (v) => {
+    applyInlineStyle(element, property, v);
+  }, [element]);
+  const isColumn = flexDirection === "column" || flexDirection === "column-reverse";
+  const getAxisIndex = (val) => {
+    if (val === "center") return 1;
+    if (val === "flex-end" || val === "end") return 2;
+    return 0;
+  };
+  const justifyIdx = getAxisIndex(getValue("justify-content"));
+  const alignIdx = getAxisIndex(getValue("align-items"));
+  const gridActiveCol = isColumn ? alignIdx : justifyIdx;
+  const gridActiveRow = isColumn ? justifyIdx : alignIdx;
+  const gridRef = useRef4(null);
+  const gridSwipeAccum = useRef4({ x: 0, y: 0 });
+  const gridPosRef = useRef4({ col: gridActiveCol, row: gridActiveRow });
+  gridPosRef.current = { col: gridActiveCol, row: gridActiveRow };
+  const applyGridPosition = useCallback4((col, row) => {
+    const vals = ["flex-start", "center", "flex-end"];
+    if (isColumn) {
+      handleChange("justify-content", vals[row]);
+      handleChange("align-items", vals[col]);
+    } else {
+      handleChange("justify-content", vals[col]);
+      handleChange("align-items", vals[row]);
+    }
+  }, [isColumn, handleChange]);
+  const applyGridRef = useRef4(applyGridPosition);
+  applyGridRef.current = applyGridPosition;
+  useEffect12(() => {
+    const THRESHOLD = 30;
+    const onWheel = (e) => {
+      const grid = gridRef.current;
+      if (!grid || !grid.contains(e.target)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      gridSwipeAccum.current.x += e.deltaX;
+      gridSwipeAccum.current.y += e.deltaY;
+      let { col, row } = gridPosRef.current;
+      let moved = false;
+      if (Math.abs(gridSwipeAccum.current.x) >= THRESHOLD) {
+        col = Math.max(0, Math.min(2, col + (gridSwipeAccum.current.x > 0 ? 1 : -1)));
+        gridSwipeAccum.current.x = 0;
+        gridSwipeAccum.current.y = 0;
+        moved = true;
+      }
+      if (!moved && Math.abs(gridSwipeAccum.current.y) >= THRESHOLD) {
+        row = Math.max(0, Math.min(2, row + (gridSwipeAccum.current.y > 0 ? 1 : -1)));
+        gridSwipeAccum.current.x = 0;
+        gridSwipeAccum.current.y = 0;
+        moved = true;
+      }
+      if (moved && (col !== gridPosRef.current.col || row !== gridPosRef.current.row)) {
+        applyGridRef.current(col, row);
       }
     };
-    return /* @__PURE__ */ jsx7("div", { style: {
-      width: 56,
-      height: 56,
-      backgroundColor: FIELD_BG,
-      borderRadius: 2,
-      display: "grid",
-      gridTemplateColumns: "repeat(3, 1fr)",
-      gridTemplateRows: "repeat(3, 1fr)",
-      padding: 6,
-      gap: 2
-    }, children: [0, 1, 2].map(
-      (row) => [0, 1, 2].map((col) => {
-        const isActive = col === activeCol && row === activeRow;
-        return /* @__PURE__ */ jsx7(
-          "button",
-          {
-            type: "button",
-            onClick: () => handleClick(col, row),
-            style: {
-              width: "100%",
-              height: "100%",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              border: "none",
-              backgroundColor: "transparent",
-              cursor: "pointer",
-              padding: 0
+    document.addEventListener("wheel", onWheel, { passive: false, capture: true });
+    return () => document.removeEventListener("wheel", onWheel, { capture: true });
+  }, []);
+  const renderAlignmentGrid = () => /* @__PURE__ */ jsx7(
+    "div",
+    {
+      ref: gridRef,
+      onMouseEnter: () => {
+        setGridHovered(true);
+        if (panelContentRef.current) panelContentRef.current.style.overflowY = "hidden";
+      },
+      onMouseLeave: () => {
+        setGridHovered(false);
+        if (panelContentRef.current) panelContentRef.current.style.overflowY = "auto";
+      },
+      style: {
+        width: 56,
+        height: 56,
+        backgroundColor: FIELD_BG,
+        borderRadius: 2,
+        display: "grid",
+        gridTemplateColumns: "repeat(3, 1fr)",
+        gridTemplateRows: "repeat(3, 1fr)",
+        padding: 6,
+        gap: 2,
+        touchAction: "none"
+      },
+      children: [0, 1, 2].map(
+        (row) => [0, 1, 2].map((col) => {
+          const isActive = col === gridActiveCol && row === gridActiveRow;
+          return /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              onClick: () => applyGridPosition(col, row),
+              style: {
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                border: "none",
+                backgroundColor: "transparent",
+                cursor: "pointer",
+                padding: 0
+              },
+              children: isActive ? /* @__PURE__ */ jsx7("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", style: { flexShrink: 0 }, children: col === 0 ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
+                /* @__PURE__ */ jsx7("rect", { x: "1", y: "1.5", width: "8", height: "1.2", rx: "0.5", fill: accentColor }),
+                /* @__PURE__ */ jsx7("rect", { x: "1", y: "4.4", width: "5", height: "1.2", rx: "0.5", fill: accentColor }),
+                /* @__PURE__ */ jsx7("rect", { x: "1", y: "7.3", width: "7", height: "1.2", rx: "0.5", fill: accentColor })
+              ] }) : col === 1 ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
+                /* @__PURE__ */ jsx7("rect", { x: "1", y: "1.5", width: "8", height: "1.2", rx: "0.5", fill: accentColor }),
+                /* @__PURE__ */ jsx7("rect", { x: "2.5", y: "4.4", width: "5", height: "1.2", rx: "0.5", fill: accentColor }),
+                /* @__PURE__ */ jsx7("rect", { x: "1.5", y: "7.3", width: "7", height: "1.2", rx: "0.5", fill: accentColor })
+              ] }) : /* @__PURE__ */ jsxs6(Fragment4, { children: [
+                /* @__PURE__ */ jsx7("rect", { x: "1", y: "1.5", width: "8", height: "1.2", rx: "0.5", fill: accentColor }),
+                /* @__PURE__ */ jsx7("rect", { x: "4", y: "4.4", width: "5", height: "1.2", rx: "0.5", fill: accentColor }),
+                /* @__PURE__ */ jsx7("rect", { x: "2", y: "7.3", width: "7", height: "1.2", rx: "0.5", fill: accentColor })
+              ] }) }) : /* @__PURE__ */ jsx7("div", { style: {
+                width: 5,
+                height: 5,
+                borderRadius: "50%",
+                backgroundColor: "#aaa"
+              } })
             },
-            children: /* @__PURE__ */ jsx7("div", { style: {
-              width: 6,
-              height: 6,
-              borderRadius: "50%",
-              backgroundColor: isActive ? accentColor : "#d1d5db"
-            } })
-          },
-          `${row}-${col}`
-        );
-      })
-    ) });
-  };
+            `${row}-${col}`
+          );
+        })
+      )
+    }
+  );
   const gridModified = isModified("grid-template-columns") || isModified("grid-template-rows");
   const sectionTitle = isFlexOrGrid2 ? "Auto layout" : "Layout";
   return /* @__PURE__ */ jsxs6("div", { style: { borderBottom: "1px solid rgba(0,0,0,0.08)" }, children: [
     /* @__PURE__ */ jsx7("div", { style: sectionHeaderStyle, children: /* @__PURE__ */ jsx7("span", { children: sectionTitle }) }),
     /* @__PURE__ */ jsxs6("div", { style: { padding: "8px 12px" }, children: [
-      /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: 2, marginBottom: 8, backgroundColor: FIELD_BG, borderRadius: 2, padding: 2, opacity: hasActiveDropdown ? 0.3 : 1, transition: "opacity 150ms ease" }, children: [
+      /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: 2, marginBottom: 8, backgroundColor: FIELD_BG, borderRadius: 2, padding: 2, opacity: siblingOpacity, transition: "opacity 150ms ease" }, children: [
         /* @__PURE__ */ jsx7(DisplayModeButton, { mode: "block", icon: /* @__PURE__ */ jsx7(RectangleHorizontal, { size: 16 }), active: displayMode === "block" }),
         /* @__PURE__ */ jsx7(DisplayModeButton, { mode: "flex-col", icon: /* @__PURE__ */ jsx7(Rows3, { size: 16 }), active: displayMode === "flex-col" }),
         /* @__PURE__ */ jsx7(DisplayModeButton, { mode: "flex-row", icon: /* @__PURE__ */ jsx7(Columns3, { size: 16 }), active: displayMode === "flex-row" }),
@@ -5397,9 +5507,9 @@ function LayoutSection({
           }
         )
       ] }),
-      isFlex && /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: 8, marginBottom: 8, opacity: hasActiveDropdown ? 0.3 : 1, transition: "opacity 150ms ease" }, children: [
-        /* @__PURE__ */ jsx7(AlignmentGrid, {}),
-        /* @__PURE__ */ jsxs6("div", { style: { flex: 1 }, children: [
+      isFlex && /* @__PURE__ */ jsxs6("div", { onMouseEnter: () => onFieldHover == null ? void 0 : onFieldHover("gap"), onMouseLeave: () => onFieldHover == null ? void 0 : onFieldHover("element"), style: { display: "flex", gap: 8, marginBottom: 8 }, children: [
+        /* @__PURE__ */ jsx7("div", { style: { opacity: hasActiveDropdown ? 0.3 : 1, transition: "opacity 150ms ease" }, children: renderAlignmentGrid() }),
+        /* @__PURE__ */ jsxs6("div", { style: { flex: 1, opacity: siblingOpacity, transition: "opacity 150ms ease" }, children: [
           /* @__PURE__ */ jsx7(
             "div",
             {
@@ -5418,17 +5528,19 @@ function LayoutSection({
           ),
           /* @__PURE__ */ jsx7(FieldWrapper, { dimmed: hasActiveDropdown, children: /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center" }, children: [
             /* @__PURE__ */ jsx7(
-              "span",
+              ScrubLabel,
               {
-                onClick: isModified("gap") ? () => onResetProperty("gap") : void 0,
-                title: isModified("gap") ? "Click to reset" : void 0,
-                style: {
-                  color: isModified("gap") ? accentColor : "#999",
-                  padding: "0 4px",
-                  display: "flex",
-                  alignItems: "center",
-                  cursor: isModified("gap") ? "pointer" : "default"
+                value: gap,
+                onChange: (v) => {
+                  clearScrub("gap");
+                  handleChange("gap", v);
                 },
+                onPreview: scrubPreview("gap", previewProperty("gap")),
+                onScrubEnd: () => clearScrub("gap"),
+                onReset: () => onResetProperty("gap"),
+                isModified: isModified("gap"),
+                accentColor,
+                defaultUnit: preferredUnit,
                 children: flexDirection === "column" || flexDirection === "column-reverse" ? /* @__PURE__ */ jsx7(UnfoldVertical, { size: 12, strokeWidth: isModified("gap") ? 2.5 : 1.5 }) : /* @__PURE__ */ jsx7(UnfoldHorizontal, { size: 12, strokeWidth: isModified("gap") ? 2.5 : 1.5 })
               }
             ),
@@ -5436,17 +5548,19 @@ function LayoutSection({
               UnitInput,
               {
                 property: "gap",
-                value: gap,
+                value: scrubDisplay["gap"] || gap,
                 onChange: (v) => handleChange("gap", v),
-                isModified: isModified("gap"),
+                isModified: isModified("gap") || "gap" in scrubDisplay,
                 style: __spreadProps(__spreadValues({}, compactInputStyle), { flex: 1, minWidth: 0 }),
-                unitStyle: { fontSize: 10, fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace', color: "#999", padding: "0 8px" }
+                unitStyle: { fontSize: 10, fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace', color: "#999", padding: "0 8px" },
+                preferredUnit,
+                onUnitCycle
               }
             )
           ] }) })
         ] })
       ] }),
-      isGrid && /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: 8, marginBottom: 8, opacity: hasActiveDropdown ? 0.3 : 1, transition: "opacity 150ms ease" }, children: [
+      isGrid && /* @__PURE__ */ jsxs6("div", { onMouseEnter: () => onFieldHover == null ? void 0 : onFieldHover("gap"), onMouseLeave: () => onFieldHover == null ? void 0 : onFieldHover("element"), style: { display: "flex", gap: 8, marginBottom: 8, opacity: siblingOpacity, transition: "opacity 150ms ease" }, children: [
         /* @__PURE__ */ jsx7(
           GridDimensions,
           {
@@ -5461,17 +5575,19 @@ function LayoutSection({
         /* @__PURE__ */ jsxs6("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 4 }, children: [
           /* @__PURE__ */ jsx7(FieldWrapper, { dimmed: hasActiveDropdown, children: /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center" }, children: [
             /* @__PURE__ */ jsx7(
-              "span",
+              ScrubLabel,
               {
-                onClick: isModified("column-gap") ? () => onResetProperty("column-gap") : void 0,
-                title: isModified("column-gap") ? "Click to reset" : void 0,
-                style: {
-                  color: isModified("column-gap") ? accentColor : "#999",
-                  padding: "0 4px",
-                  display: "flex",
-                  alignItems: "center",
-                  cursor: isModified("column-gap") ? "pointer" : "default"
+                value: columnGap || gap,
+                onChange: (v) => {
+                  clearScrub("column-gap");
+                  handleChange("column-gap", v);
                 },
+                onPreview: scrubPreview("column-gap", previewProperty("column-gap")),
+                onScrubEnd: () => clearScrub("column-gap"),
+                onReset: () => onResetProperty("column-gap"),
+                isModified: isModified("column-gap"),
+                accentColor,
+                defaultUnit: preferredUnit,
                 children: /* @__PURE__ */ jsx7(UnfoldHorizontal, { size: 12, strokeWidth: isModified("column-gap") ? 2.5 : 1.5 })
               }
             ),
@@ -5479,28 +5595,32 @@ function LayoutSection({
               UnitInput,
               {
                 property: "column-gap",
-                value: columnGap || gap,
+                value: scrubDisplay["column-gap"] || columnGap || gap,
                 onChange: (v) => handleChange("column-gap", v),
-                isModified: isModified("column-gap"),
+                isModified: isModified("column-gap") || "column-gap" in scrubDisplay,
                 placeholder: "col",
                 style: __spreadProps(__spreadValues({}, compactInputStyle), { flex: 1, minWidth: 0 }),
-                unitStyle: { fontSize: 10, fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace', color: "#999", padding: "0 8px" }
+                unitStyle: { fontSize: 10, fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace', color: "#999", padding: "0 8px" },
+                preferredUnit,
+                onUnitCycle
               }
             )
           ] }) }),
           /* @__PURE__ */ jsx7(FieldWrapper, { dimmed: hasActiveDropdown, children: /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center" }, children: [
             /* @__PURE__ */ jsx7(
-              "span",
+              ScrubLabel,
               {
-                onClick: isModified("row-gap") ? () => onResetProperty("row-gap") : void 0,
-                title: isModified("row-gap") ? "Click to reset" : void 0,
-                style: {
-                  color: isModified("row-gap") ? accentColor : "#999",
-                  padding: "0 4px",
-                  display: "flex",
-                  alignItems: "center",
-                  cursor: isModified("row-gap") ? "pointer" : "default"
+                value: rowGap || gap,
+                onChange: (v) => {
+                  clearScrub("row-gap");
+                  handleChange("row-gap", v);
                 },
+                onPreview: scrubPreview("row-gap", previewProperty("row-gap")),
+                onScrubEnd: () => clearScrub("row-gap"),
+                onReset: () => onResetProperty("row-gap"),
+                isModified: isModified("row-gap"),
+                accentColor,
+                defaultUnit: preferredUnit,
                 children: /* @__PURE__ */ jsx7(UnfoldVertical, { size: 12, strokeWidth: isModified("row-gap") ? 2.5 : 1.5 })
               }
             ),
@@ -5508,31 +5628,36 @@ function LayoutSection({
               UnitInput,
               {
                 property: "row-gap",
-                value: rowGap || gap,
+                value: scrubDisplay["row-gap"] || rowGap || gap,
                 onChange: (v) => handleChange("row-gap", v),
-                isModified: isModified("row-gap"),
+                isModified: isModified("row-gap") || "row-gap" in scrubDisplay,
                 placeholder: "row",
                 style: __spreadProps(__spreadValues({}, compactInputStyle), { flex: 1, minWidth: 0 }),
-                unitStyle: { fontSize: 10, fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace', color: "#999", padding: "0 8px" }
+                unitStyle: { fontSize: 10, fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace', color: "#999", padding: "0 8px" },
+                preferredUnit,
+                onUnitCycle
               }
             )
           ] }) })
         ] })
       ] }),
-      isFlexOrGrid2 && /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: 4, marginBottom: 8, opacity: hasActiveDropdown ? 0.3 : 1, transition: "opacity 150ms ease" }, children: [
+      isFlexOrGrid2 && /* @__PURE__ */ jsxs6("div", { onMouseEnter: () => onFieldHover == null ? void 0 : onFieldHover("padding"), onMouseLeave: () => onFieldHover == null ? void 0 : onFieldHover("element"), style: { display: "flex", gap: 4, marginBottom: 8, opacity: siblingOpacity, transition: "opacity 150ms ease" }, children: [
         /* @__PURE__ */ jsx7(FieldWrapper, { style: { flex: 1 }, dimmed: hasActiveDropdown, children: /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center" }, children: [
           /* @__PURE__ */ jsx7(
-            "span",
+            ScrubLabel,
             {
-              onClick: isModified("padding") ? () => onResetProperty("padding") : void 0,
-              title: isModified("padding") ? "Click to reset" : void 0,
-              style: {
-                color: isModified("padding") ? accentColor : "#999",
-                padding: "0 4px",
-                display: "flex",
-                alignItems: "center",
-                cursor: isModified("padding") ? "pointer" : "default"
+              value: padding.left,
+              onChange: (v) => {
+                clearScrub("padding-h");
+                handlePaddingHorizontal(v);
               },
+              onPreview: scrubPreview("padding-h", previewPaddingHorizontal),
+              onScrubEnd: () => clearScrub("padding-h"),
+              onReset: () => onResetProperty("padding"),
+              isModified: isModified("padding"),
+              accentColor,
+              defaultUnit: preferredUnit,
+              snapSteps: PADDING_SNAP_STEPS,
               children: /* @__PURE__ */ jsx7(AlignHorizontalSpaceAround, { size: 12, strokeWidth: isModified("padding") ? 2.5 : 1.5 })
             }
           ),
@@ -5540,28 +5665,33 @@ function LayoutSection({
             UnitInput,
             {
               property: "padding",
-              value: padding.left,
+              value: scrubDisplay["padding-h"] || padding.left,
               onChange: (v) => handlePaddingHorizontal(v),
-              isModified: isModified("padding"),
+              isModified: isModified("padding") || "padding-h" in scrubDisplay,
               placeholder: "H pad",
               style: __spreadProps(__spreadValues({}, compactInputStyle), { flex: 1, minWidth: 0 }),
-              unitStyle: { fontSize: 10, fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace', color: "#999", padding: "0 8px" }
+              unitStyle: { fontSize: 10, fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace', color: "#999", padding: "0 8px" },
+              preferredUnit,
+              onUnitCycle
             }
           )
         ] }) }),
         /* @__PURE__ */ jsx7(FieldWrapper, { style: { flex: 1 }, dimmed: hasActiveDropdown, children: /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center" }, children: [
           /* @__PURE__ */ jsx7(
-            "span",
+            ScrubLabel,
             {
-              onClick: isModified("padding") ? () => onResetProperty("padding") : void 0,
-              title: isModified("padding") ? "Click to reset" : void 0,
-              style: {
-                color: isModified("padding") ? accentColor : "#999",
-                padding: "0 4px",
-                display: "flex",
-                alignItems: "center",
-                cursor: isModified("padding") ? "pointer" : "default"
+              value: padding.top,
+              onChange: (v) => {
+                clearScrub("padding-v");
+                handlePaddingVertical(v);
               },
+              onPreview: scrubPreview("padding-v", previewPaddingVertical),
+              onScrubEnd: () => clearScrub("padding-v"),
+              onReset: () => onResetProperty("padding"),
+              isModified: isModified("padding"),
+              accentColor,
+              defaultUnit: preferredUnit,
+              snapSteps: PADDING_SNAP_STEPS,
               children: /* @__PURE__ */ jsx7(AlignVerticalSpaceAround, { size: 12, strokeWidth: isModified("padding") ? 2.5 : 1.5 })
             }
           ),
@@ -5569,17 +5699,19 @@ function LayoutSection({
             UnitInput,
             {
               property: "padding",
-              value: padding.top,
+              value: scrubDisplay["padding-v"] || padding.top,
               onChange: (v) => handlePaddingVertical(v),
-              isModified: isModified("padding"),
+              isModified: isModified("padding") || "padding-v" in scrubDisplay,
               placeholder: "V pad",
               style: __spreadProps(__spreadValues({}, compactInputStyle), { flex: 1, minWidth: 0 }),
-              unitStyle: { fontSize: 10, fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace', color: "#999", padding: "0 8px" }
+              unitStyle: { fontSize: 10, fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace', color: "#999", padding: "0 8px" },
+              preferredUnit,
+              onUnitCycle
             }
           )
         ] }) })
       ] }),
-      /* @__PURE__ */ jsxs6("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer", fontSize: 11, fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace', color: "#64748b", opacity: hasActiveDropdown ? 0.3 : 1, transition: "opacity 150ms ease" }, children: [
+      /* @__PURE__ */ jsxs6("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer", fontSize: 11, fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace', color: "#64748b", opacity: siblingOpacity, transition: "opacity 150ms ease" }, children: [
         /* @__PURE__ */ jsx7(
           "input",
           {
@@ -5618,7 +5750,9 @@ function TypographySection({
   colorVariables,
   activeColorDropdown,
   onColorDropdownChange,
-  panelContentRef
+  panelContentRef,
+  preferredUnit,
+  onUnitCycle
 }) {
   var _a;
   const fontFamily = getValue("font-family");
@@ -5717,9 +5851,10 @@ function TypographySection({
               transform: "translateY(-50%)",
               fontSize: 10,
               fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
-              color: "#999",
-              pointerEvents: "none"
-            }
+              color: "#999"
+            },
+            preferredUnit,
+            onUnitCycle
           }
         ) }) })
       ] }),
@@ -5820,6 +5955,130 @@ function parseValue(value) {
   }
   return { num: 0, unit: "" };
 }
+var PADDING_SNAP_STEPS = [0, 1, 2, 4, 8, 12, 16, 20, 24, 28, 32];
+function ScrubLabel({
+  value,
+  onChange,
+  onPreview,
+  onScrubEnd,
+  onReset,
+  isModified,
+  accentColor,
+  defaultUnit = "rem",
+  snapSteps,
+  color,
+  style,
+  children
+}) {
+  const ref = useRef4(null);
+  const scrub = useRef4(null);
+  const resetRef = useRef4(onReset);
+  const modifiedRef = useRef4(isModified);
+  const lastShiftRef = useRef4(false);
+  resetRef.current = onReset;
+  modifiedRef.current = isModified;
+  useEffect12(() => {
+    const onMove = (e) => {
+      const s = scrub.current;
+      if (!s) return;
+      s.hasMoved = true;
+      lastShiftRef.current = e.shiftKey;
+      const sens = s.unit === "rem" || s.unit === "em" ? 0.1 : 1;
+      s.accum += e.movementX * sens;
+      let newVal = Math.max(0, Math.round((s.startValue + s.accum) * 10) / 10);
+      if (e.shiftKey && snapSteps) {
+        const rootFs = s.unit === "rem" || s.unit === "em" ? parseFloat(getComputedStyle(document.documentElement).fontSize) || 16 : 1;
+        const pxVal = s.unit === "rem" || s.unit === "em" ? newVal * rootFs : newVal;
+        let snapped = snapSteps[snapSteps.length - 1];
+        for (let i = 0; i < snapSteps.length - 1; i++) {
+          const lo = snapSteps[i];
+          const hi = snapSteps[i + 1];
+          if (pxVal <= (lo + hi) / 2) {
+            snapped = lo;
+            break;
+          }
+          if (pxVal < hi) {
+            snapped = hi;
+            break;
+          }
+        }
+        if (pxVal > snapSteps[snapSteps.length - 1]) {
+          snapped = Math.round(pxVal / 8) * 8;
+        }
+        newVal = s.unit === "rem" || s.unit === "em" ? Math.round(snapped / rootFs * 1e3) / 1e3 : snapped;
+      }
+      onPreview == null ? void 0 : onPreview(`${newVal}${s.unit}`);
+    };
+    const onUp = () => {
+      const s = scrub.current;
+      if (!s) return;
+      let finalVal = Math.max(0, Math.round((s.startValue + s.accum) * 10) / 10);
+      if (lastShiftRef.current && snapSteps) {
+        const rootFs = s.unit === "rem" || s.unit === "em" ? parseFloat(getComputedStyle(document.documentElement).fontSize) || 16 : 1;
+        const pxVal = s.unit === "rem" || s.unit === "em" ? finalVal * rootFs : finalVal;
+        let snapped = snapSteps[snapSteps.length - 1];
+        for (let i = 0; i < snapSteps.length - 1; i++) {
+          const lo = snapSteps[i];
+          const hi = snapSteps[i + 1];
+          if (pxVal <= (lo + hi) / 2) {
+            snapped = lo;
+            break;
+          }
+          if (pxVal < hi) {
+            snapped = hi;
+            break;
+          }
+        }
+        if (pxVal > snapSteps[snapSteps.length - 1]) {
+          snapped = Math.round(pxVal / 8) * 8;
+        }
+        finalVal = s.unit === "rem" || s.unit === "em" ? Math.round(snapped / rootFs * 1e3) / 1e3 : snapped;
+      }
+      const changed = s.hasMoved && finalVal !== s.startValue;
+      scrub.current = null;
+      document.exitPointerLock();
+      if (changed) {
+        onChange(`${finalVal}${s.unit}`);
+      } else if (s.hasMoved) {
+        onPreview == null ? void 0 : onPreview(`${s.startValue}${s.unit}`);
+      } else if (modifiedRef.current && resetRef.current) {
+        resetRef.current();
+      }
+      onScrubEnd == null ? void 0 : onScrubEnd();
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+    return () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+  }, [onChange, onPreview, onScrubEnd]);
+  const onMouseDown = useCallback4((e) => {
+    var _a;
+    if (e.button !== 0) return;
+    e.preventDefault();
+    const parsed = parseValue(value);
+    const unit = parsed.unit && parsed.unit !== "px" ? parsed.unit : defaultUnit;
+    scrub.current = { startValue: parsed.num, unit, accum: 0, hasMoved: false };
+    (_a = ref.current) == null ? void 0 : _a.requestPointerLock();
+  }, [value, defaultUnit]);
+  return /* @__PURE__ */ jsx7(
+    "span",
+    {
+      ref,
+      onMouseDown,
+      title: isModified ? "Click to reset \xB7 Drag to scrub" : "Drag to scrub",
+      style: __spreadValues({
+        color: isModified ? accentColor || "#3b82f6" : color || "#999",
+        padding: "0 4px",
+        display: "flex",
+        alignItems: "center",
+        cursor: "ew-resize"
+      }, style),
+      children
+    }
+  );
+}
 function StylePanel({
   element,
   elementInfo,
@@ -5827,19 +6086,31 @@ function StylePanel({
   styleModifications,
   dispatch,
   onClose,
+  onHover,
   accentColor = "#3b82f6"
 }) {
   var _a, _b;
   const panelRef = useRef4(null);
   const panelContentRef = useRef4(null);
-  const [visible, setVisible] = useState9(false);
+  const [visible, setVisible] = useState9(() => {
+    try {
+      return !!localStorage.getItem("devtools-panel-position");
+    } catch (e) {
+      return false;
+    }
+  });
   useEffect12(() => {
+    if (visible) return;
     const id = setTimeout(() => setVisible(true), 50);
     return () => clearTimeout(id);
-  }, []);
+  }, [visible]);
   const [activeDropdown, setActiveDropdown] = useState9(null);
   const [activeColorDropdown, setActiveColorDropdown] = useState9(null);
   const hasActiveDropdown = activeDropdown !== null || activeColorDropdown !== null;
+  const [preferredUnit, setPreferredUnit] = useState9("rem");
+  const cycleUnit = useCallback4(() => {
+    setPreferredUnit((u) => u === "rem" ? "px" : "rem");
+  }, []);
   const originalValuesRef = useRef4(/* @__PURE__ */ new Map());
   const [rawCss, setRawCss] = useState9("");
   const colorVariables = useMemo(() => getColorVariables(), []);
@@ -5856,36 +6127,121 @@ function StylePanel({
   }, [onClose]);
   const positionRef = useRef4({ top: 0, left: 0, maxHeight: 400 });
   const [, forceUpdate] = useState9(0);
+  const PANEL_POS_KEY = "devtools-panel-position";
+  const dragOffset = useRef4({ x: 0, y: 0 });
+  const dragState = useRef4(null);
+  const hasSavedPosition = useRef4(false);
+  useEffect12(() => {
+    try {
+      const stored = localStorage.getItem(PANEL_POS_KEY);
+      if (stored) {
+        const pos = JSON.parse(stored);
+        if (typeof pos.top === "number" && typeof pos.left === "number") {
+          hasSavedPosition.current = true;
+          positionRef.current = __spreadProps(__spreadValues({}, positionRef.current), { top: pos.top, left: pos.left });
+        }
+      }
+    } catch (e) {
+    }
+  }, []);
   useEffect12(() => {
+    const onMouseMove = (e) => {
+      const ds = dragState.current;
+      if (!ds) return;
+      const rawX = ds.startOffsetX + (e.clientX - ds.startX);
+      const rawY = ds.startOffsetY + (e.clientY - ds.startY);
+      const panelWidth = 280;
+      const edgePad = 16;
+      const clampedLeft = Math.max(edgePad, Math.min(window.innerWidth - panelWidth - edgePad, positionRef.current.left + rawX));
+      const clampedTop = Math.max(edgePad, positionRef.current.top + rawY);
+      dragOffset.current = {
+        x: clampedLeft - positionRef.current.left,
+        y: clampedTop - positionRef.current.top
+      };
+      const panel = panelRef.current;
+      const wrapper = panel == null ? void 0 : panel.parentElement;
+      if (!wrapper) return;
+      wrapper.style.top = `${clampedTop}px`;
+      wrapper.style.left = `${clampedLeft}px`;
+      const toolbar = document.getElementById("devtools-toolbar");
+      const toolbarRect = toolbar == null ? void 0 : toolbar.getBoundingClientRect();
+      let bottomLimit = window.innerHeight - 16;
+      if (toolbarRect && clampedLeft + panelWidth > toolbarRect.left) {
+        bottomLimit = toolbarRect.top - 8;
+      }
+      const visibleTop = Math.max(0, clampedTop);
+      const maxHeight = Math.max(200, bottomLimit - visibleTop);
+      if (panel) panel.style.maxHeight = `${maxHeight}px`;
+    };
+    const onMouseUp = () => {
+      if (!dragState.current) return;
+      const finalTop = positionRef.current.top + dragOffset.current.y;
+      const finalLeft = positionRef.current.left + dragOffset.current.x;
+      positionRef.current = __spreadProps(__spreadValues({}, positionRef.current), { top: finalTop, left: finalLeft });
+      dragOffset.current = { x: 0, y: 0 };
+      hasSavedPosition.current = true;
+      try {
+        localStorage.setItem(PANEL_POS_KEY, JSON.stringify({ top: finalTop, left: finalLeft }));
+      } catch (e) {
+      }
+      dragState.current = null;
+    };
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+  }, []);
+  const handleHeaderMouseDown = useCallback4((e) => {
+    if (e.button !== 0 || e.target.closest("button")) return;
+    e.preventDefault();
+    dragState.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      startOffsetX: dragOffset.current.x,
+      startOffsetY: dragOffset.current.y
+    };
+  }, []);
+  useEffect12(() => {
+    dragOffset.current = { x: 0, y: 0 };
     const updatePosition = (isScrollEvent = false) => {
       const panel = panelRef.current;
-      const rect = element.getBoundingClientRect();
       const panelWidth = 280;
-      const padding = 16;
-      const toolbarWidth = 300;
-      const toolbarHeight = 50;
-      const toolbarRight = padding;
-      const toolbarBottom = padding;
-      let left = rect.right + padding;
-      let top = rect.top;
-      if (left + panelWidth > window.innerWidth - padding) {
-        left = rect.left - panelWidth - padding;
-      }
-      if (left < padding) {
-        left = Math.max(padding, (window.innerWidth - panelWidth) / 2);
-      }
-      const panelRight = left + panelWidth;
-      const toolbarLeft = window.innerWidth - toolbarRight - toolbarWidth;
-      const overlapsToolbar = panelRight > toolbarLeft;
-      const bottomLimit = overlapsToolbar ? window.innerHeight - toolbarBottom - toolbarHeight - padding : window.innerHeight - padding;
+      const gap = 8;
+      let top;
+      let left;
+      if (hasSavedPosition.current) {
+        top = positionRef.current.top;
+        left = positionRef.current.left;
+      } else {
+        const rect = element.getBoundingClientRect();
+        left = rect.right + gap;
+        top = rect.top;
+        if (left + panelWidth > window.innerWidth - gap) {
+          left = rect.left - panelWidth - gap;
+        }
+        if (left < gap) {
+          left = Math.max(gap, (window.innerWidth - panelWidth) / 2);
+        }
+      }
+      const toolbar = document.getElementById("devtools-toolbar");
+      const toolbarRect = toolbar == null ? void 0 : toolbar.getBoundingClientRect();
+      let bottomLimit = window.innerHeight - 16;
+      if (toolbarRect) {
+        const panelRight = left + panelWidth;
+        if (panelRight > toolbarRect.left) {
+          bottomLimit = toolbarRect.top - gap;
+        }
+      }
       const visibleTop = Math.max(0, top);
       const maxHeight = Math.max(200, bottomLimit - visibleTop);
       positionRef.current = { top, left, maxHeight };
       if (isScrollEvent && panel) {
         const wrapper = panel.parentElement;
-        if (wrapper) {
-          wrapper.style.top = `${top}px`;
-          wrapper.style.left = `${left}px`;
+        if (wrapper && !hasSavedPosition.current) {
+          wrapper.style.top = `${top + dragOffset.current.y}px`;
+          wrapper.style.left = `${left + dragOffset.current.x}px`;
         }
         panel.style.maxHeight = `${maxHeight}px`;
       } else {
@@ -6079,9 +6435,10 @@ function StylePanel({
                 transform: "translateY(-50%)",
                 fontSize: 10,
                 fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
-                color: "#999",
-                pointerEvents: "none"
-              }
+                color: "#999"
+              },
+              preferredUnit,
+              onUnitCycle: cycleUnit
             }
           ) });
         }
@@ -6150,7 +6507,7 @@ function StylePanel({
   };
   const modificationCount = (_a = currentModification == null ? void 0 : currentModification.changes.length) != null ? _a : 0;
   const isCaptured = (_b = currentModification == null ? void 0 : currentModification.captured) != null ? _b : false;
-  const panelStyle2 = {
+  const panelStyle2 = __spreadProps(__spreadValues({
     position: "fixed",
     top: positionRef.current.top,
     left: positionRef.current.left,
@@ -6158,9 +6515,8 @@ function StylePanel({
     maxHeight: positionRef.current.maxHeight,
     backgroundColor: "rgba(255, 255, 255, 0.85)",
     backdropFilter: "blur(32px)",
-    WebkitBackdropFilter: "blur(32px)",
-    border: "1px solid rgba(0,0,0,0.1)",
-    borderRadius: 0,
+    WebkitBackdropFilter: "blur(32px)"
+  }, POPMELT_BORDER), {
     zIndex: 1e4,
     fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
     fontSize: 12,
@@ -6169,22 +6525,16 @@ function StylePanel({
     flexDirection: "column",
     opacity: visible ? 1 : 0,
     transition: "opacity 150ms ease"
-  };
-  const cornerDotStyle = {
-    position: "absolute",
-    width: 2,
-    height: 2,
-    backgroundColor: "rgba(0, 0, 0, 0.25)",
-    pointerEvents: "none",
-    zIndex: 1
-  };
+  });
   const headerStyle = {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
+    margin: "3px 3px 0",
     padding: "8px 7px 8px 12px",
     borderBottom: "1px solid rgba(0,0,0,0.1)",
-    backgroundColor: "rgba(248, 250, 252, 0.6)"
+    backgroundColor: "#f8fafc",
+    cursor: dragState.current ? "grabbing" : "grab"
   };
   const sectionHeaderStyle = {
     display: "flex",
@@ -6210,198 +6560,193 @@ function StylePanel({
     color: "#64748b",
     flexShrink: 0
   };
-  return /* @__PURE__ */ jsxs6("div", { "data-devtools": "panel-wrapper", style: {
+  return /* @__PURE__ */ jsx7("div", { "data-devtools": "panel-wrapper", style: {
     position: "fixed",
-    top: positionRef.current.top,
-    left: positionRef.current.left,
+    top: positionRef.current.top + dragOffset.current.y,
+    left: positionRef.current.left + dragOffset.current.x,
     zIndex: 1e4,
     pointerEvents: "none"
-  }, children: [
-    /* @__PURE__ */ jsxs6("div", { ref: panelRef, "data-devtools": "panel", style: __spreadProps(__spreadValues({}, panelStyle2), { position: "relative", top: 0, left: 0, zIndex: 0, pointerEvents: "auto" }), children: [
-      /* @__PURE__ */ jsxs6("div", { style: headerStyle, children: [
-        /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: 8, overflow: "hidden" }, children: [
-          /* @__PURE__ */ jsxs6("span", { style: {
-            fontWeight: 600,
-            fontSize: 11,
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap"
-          }, children: [
-            /* @__PURE__ */ jsx7("span", { style: { color: accentColor, fontSize: 13 }, children: "\u22B9" }),
-            " ",
-            elementInfo.tagName
-          ] }),
-          modificationCount > 0 && /* @__PURE__ */ jsx7("span", { style: {
-            backgroundColor: isCaptured ? "#999999" : accentColor,
-            color: "#fff",
-            fontSize: 9,
-            padding: "1px 4px",
-            borderRadius: 2
-          }, children: modificationCount })
-        ] }),
-        /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: 4 }, children: [
-          modificationCount > 0 && /* @__PURE__ */ jsx7(
-            "button",
+  }, children: /* @__PURE__ */ jsxs6("div", { ref: panelRef, "data-devtools": "panel", style: __spreadProps(__spreadValues({}, panelStyle2), { position: "relative", top: 0, left: 0, zIndex: 0, pointerEvents: "auto" }), onMouseEnter: () => onHover == null ? void 0 : onHover("element"), onMouseLeave: () => onHover == null ? void 0 : onHover(null), children: [
+    /* @__PURE__ */ jsxs6("div", { style: headerStyle, onMouseDown: handleHeaderMouseDown, children: [
+      /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: 8, overflow: "hidden" }, children: [
+        /* @__PURE__ */ jsx7("span", { style: {
+          fontWeight: 600,
+          fontSize: 11,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        }, children: elementInfo.tagName }),
+        modificationCount > 0 && /* @__PURE__ */ jsx7("span", { style: {
+          backgroundColor: isCaptured ? "#999999" : accentColor,
+          color: "#fff",
+          fontSize: 9,
+          padding: "1px 4px",
+          borderRadius: 2
+        }, children: modificationCount })
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: 4 }, children: [
+        modificationCount > 0 && /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            onClick: handleReset,
+            title: "Reset all changes",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 24,
+              height: 24,
+              border: "none",
+              background: "none",
+              cursor: "pointer",
+              color: "#64748b",
+              borderRadius: 2
+            },
+            children: /* @__PURE__ */ jsx7(RotateCcw, { size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            title: "Close",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 24,
+              height: 24,
+              border: "none",
+              background: "none",
+              cursor: "pointer",
+              color: "#64748b",
+              borderRadius: 2
+            },
+            children: /* @__PURE__ */ jsx7(X, { size: 14 })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { ref: panelContentRef, style: { flex: 1, overflowY: "auto", margin: "0 3px 3px" }, children: [
+      /* @__PURE__ */ jsx7("div", { style: { opacity: activeColorDropdown ? 0.3 : 1, transition: "opacity 150ms ease" }, children: /* @__PURE__ */ jsx7(
+        LayoutSection,
+        {
+          element,
+          getValue,
+          getOriginalValue,
+          handleChange,
+          isModified,
+          onResetProperty: handleResetProperty,
+          isCollapsed: false,
+          onToggle: () => {
+          },
+          sectionHeaderStyle,
+          activeDropdown,
+          onDropdownChange: setActiveDropdown,
+          panelContentRef,
+          accentColor,
+          onFieldHover: onHover,
+          preferredUnit,
+          onUnitCycle: cycleUnit
+        }
+      ) }),
+      /* @__PURE__ */ jsx7("div", { style: { opacity: activeDropdown ? 0.3 : 1, transition: "opacity 150ms ease" }, children: /* @__PURE__ */ jsx7(
+        TypographySection,
+        {
+          element,
+          getValue,
+          handleChange,
+          isModified,
+          onResetProperty: handleResetProperty,
+          isCollapsed: false,
+          onToggle: () => {
+          },
+          sectionHeaderStyle,
+          accentColor,
+          colorVariables,
+          activeColorDropdown,
+          onColorDropdownChange: setActiveColorDropdown,
+          panelContentRef,
+          preferredUnit,
+          onUnitCycle: cycleUnit
+        }
+      ) }),
+      SECTIONS.map((section, index) => {
+        const isLast = index === SECTIONS.length - 1;
+        const sectionHasActiveColorDropdown = activeColorDropdown && section.properties.some((p) => p.property === activeColorDropdown);
+        const shouldFadeSection = hasActiveDropdown && !sectionHasActiveColorDropdown;
+        return /* @__PURE__ */ jsxs6("div", { style: { borderBottom: isLast ? "none" : "1px solid rgba(0,0,0,0.08)", opacity: shouldFadeSection ? 0.3 : 1, transition: "opacity 150ms ease" }, children: [
+          /* @__PURE__ */ jsx7("div", { style: sectionHeaderStyle, children: /* @__PURE__ */ jsx7("span", { children: section.name }) }),
+          /* @__PURE__ */ jsx7("div", { style: { padding: "4px 0" }, children: section.properties.map((prop) => {
+            const modified = isModified(prop.property);
+            const shouldFadeRow = sectionHasActiveColorDropdown && prop.property !== activeColorDropdown;
+            return /* @__PURE__ */ jsxs6("div", { style: __spreadProps(__spreadValues({}, propertyRowStyle), { opacity: shouldFadeRow ? 0.3 : 1, transition: "opacity 150ms ease" }), children: [
+              /* @__PURE__ */ jsx7(
+                "span",
+                {
+                  onClick: modified ? () => handleResetProperty(prop.property) : void 0,
+                  title: modified ? "Click to reset" : void 0,
+                  style: __spreadProps(__spreadValues({}, labelStyle), {
+                    color: modified ? accentColor : "#64748b",
+                    fontWeight: modified ? 600 : 400,
+                    cursor: modified ? "pointer" : "default"
+                  }),
+                  children: prop.label
+                }
+              ),
+              /* @__PURE__ */ jsx7("div", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, children: renderInput(prop) })
+            ] }, prop.property);
+          }) })
+        ] }, section.name);
+      }),
+      /* @__PURE__ */ jsxs6("div", { style: { opacity: hasActiveDropdown ? 0.3 : 1, transition: "opacity 150ms ease" }, children: [
+        /* @__PURE__ */ jsx7("div", { style: sectionHeaderStyle, children: /* @__PURE__ */ jsx7("span", { children: "Raw CSS" }) }),
+        /* @__PURE__ */ jsxs6("div", { style: { padding: "8px 12px" }, children: [
+          /* @__PURE__ */ jsx7(
+            "textarea",
             {
-              type: "button",
-              onClick: handleReset,
-              title: "Reset all changes",
+              value: rawCss,
+              onChange: (e) => setRawCss(e.target.value),
+              placeholder: "property: value; ...",
               style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: 24,
-                height: 24,
-                border: "none",
-                background: "none",
-                cursor: "pointer",
-                color: "#64748b",
-                borderRadius: 2
-              },
-              children: /* @__PURE__ */ jsx7(RotateCcw, { size: 14 })
+                width: "100%",
+                height: 60,
+                padding: 8,
+                fontSize: 11,
+                fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
+                border: "1px solid rgba(0,0,0,0.1)",
+                borderRadius: 2,
+                resize: "vertical",
+                outline: "none"
+              }
             }
           ),
-          /* @__PURE__ */ jsx7(
+          rawCss.trim() && /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
-              onClick: onClose,
-              title: "Close",
+              onClick: handleApplyRawCss,
               style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: 24,
-                height: 24,
+                marginTop: 4,
+                padding: "4px 8px",
+                width: "100%",
+                fontSize: 11,
                 border: "none",
-                background: "none",
+                borderRadius: 2,
+                backgroundColor: accentColor,
+                color: "#fff",
                 cursor: "pointer",
-                color: "#64748b",
-                borderRadius: 2
+                opacity: rawCss.trim() ? 1 : 0.5
               },
-              children: /* @__PURE__ */ jsx7(X, { size: 14 })
+              children: "Apply"
             }
           )
         ] })
-      ] }),
-      /* @__PURE__ */ jsxs6("div", { ref: panelContentRef, style: { flex: 1, overflowY: "auto" }, children: [
-        /* @__PURE__ */ jsx7("div", { style: { opacity: activeColorDropdown ? 0.3 : 1, transition: "opacity 150ms ease" }, children: /* @__PURE__ */ jsx7(
-          LayoutSection,
-          {
-            element,
-            getValue,
-            getOriginalValue,
-            handleChange,
-            isModified,
-            onResetProperty: handleResetProperty,
-            isCollapsed: false,
-            onToggle: () => {
-            },
-            sectionHeaderStyle,
-            activeDropdown,
-            onDropdownChange: setActiveDropdown,
-            panelContentRef,
-            accentColor
-          }
-        ) }),
-        /* @__PURE__ */ jsx7("div", { style: { opacity: activeDropdown ? 0.3 : 1, transition: "opacity 150ms ease" }, children: /* @__PURE__ */ jsx7(
-          TypographySection,
-          {
-            element,
-            getValue,
-            handleChange,
-            isModified,
-            onResetProperty: handleResetProperty,
-            isCollapsed: false,
-            onToggle: () => {
-            },
-            sectionHeaderStyle,
-            accentColor,
-            colorVariables,
-            activeColorDropdown,
-            onColorDropdownChange: setActiveColorDropdown,
-            panelContentRef
-          }
-        ) }),
-        SECTIONS.map((section, index) => {
-          const isLast = index === SECTIONS.length - 1;
-          const sectionHasActiveColorDropdown = activeColorDropdown && section.properties.some((p) => p.property === activeColorDropdown);
-          const shouldFadeSection = hasActiveDropdown && !sectionHasActiveColorDropdown;
-          return /* @__PURE__ */ jsxs6("div", { style: { borderBottom: isLast ? "none" : "1px solid rgba(0,0,0,0.08)", opacity: shouldFadeSection ? 0.3 : 1, transition: "opacity 150ms ease" }, children: [
-            /* @__PURE__ */ jsx7("div", { style: sectionHeaderStyle, children: /* @__PURE__ */ jsx7("span", { children: section.name }) }),
-            /* @__PURE__ */ jsx7("div", { style: { padding: "4px 0" }, children: section.properties.map((prop) => {
-              const modified = isModified(prop.property);
-              const shouldFadeRow = sectionHasActiveColorDropdown && prop.property !== activeColorDropdown;
-              return /* @__PURE__ */ jsxs6("div", { style: __spreadProps(__spreadValues({}, propertyRowStyle), { opacity: shouldFadeRow ? 0.3 : 1, transition: "opacity 150ms ease" }), children: [
-                /* @__PURE__ */ jsx7(
-                  "span",
-                  {
-                    onClick: modified ? () => handleResetProperty(prop.property) : void 0,
-                    title: modified ? "Click to reset" : void 0,
-                    style: __spreadProps(__spreadValues({}, labelStyle), {
-                      color: modified ? accentColor : "#64748b",
-                      fontWeight: modified ? 600 : 400,
-                      cursor: modified ? "pointer" : "default"
-                    }),
-                    children: prop.label
-                  }
-                ),
-                /* @__PURE__ */ jsx7("div", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, children: renderInput(prop) })
-              ] }, prop.property);
-            }) })
-          ] }, section.name);
-        }),
-        /* @__PURE__ */ jsxs6("div", { style: { opacity: hasActiveDropdown ? 0.3 : 1, transition: "opacity 150ms ease" }, children: [
-          /* @__PURE__ */ jsx7("div", { style: sectionHeaderStyle, children: /* @__PURE__ */ jsx7("span", { children: "Raw CSS" }) }),
-          /* @__PURE__ */ jsxs6("div", { style: { padding: "8px 12px" }, children: [
-            /* @__PURE__ */ jsx7(
-              "textarea",
-              {
-                value: rawCss,
-                onChange: (e) => setRawCss(e.target.value),
-                placeholder: "property: value; ...",
-                style: {
-                  width: "100%",
-                  height: 60,
-                  padding: 8,
-                  fontSize: 11,
-                  fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
-                  border: "1px solid rgba(0,0,0,0.1)",
-                  borderRadius: 2,
-                  resize: "vertical",
-                  outline: "none"
-                }
-              }
-            ),
-            rawCss.trim() && /* @__PURE__ */ jsx7(
-              "button",
-              {
-                type: "button",
-                onClick: handleApplyRawCss,
-                style: {
-                  marginTop: 4,
-                  padding: "4px 8px",
-                  width: "100%",
-                  fontSize: 11,
-                  border: "none",
-                  borderRadius: 2,
-                  backgroundColor: accentColor,
-                  color: "#fff",
-                  cursor: "pointer",
-                  opacity: rawCss.trim() ? 1 : 0.5
-                },
-                children: "Apply"
-              }
-            )
-          ] })
-        ] })
       ] })
-    ] }),
-    /* @__PURE__ */ jsx7("div", { style: __spreadProps(__spreadValues({}, cornerDotStyle), { top: -1, left: -1 }) }),
-    /* @__PURE__ */ jsx7("div", { style: __spreadProps(__spreadValues({}, cornerDotStyle), { top: -1, right: -1 }) }),
-    /* @__PURE__ */ jsx7("div", { style: __spreadProps(__spreadValues({}, cornerDotStyle), { bottom: -1, left: -1 }) }),
-    /* @__PURE__ */ jsx7("div", { style: __spreadProps(__spreadValues({}, cornerDotStyle), { bottom: -1, right: -1 }) })
-  ] });
+    ] })
+  ] }) });
 }
 
 // src/components/SwipeHints.tsx
@@ -6672,7 +7017,7 @@ function TextHandles({ element, fontSize, lineHeight, accentColor, hoveredProper
 // src/components/AnnotationCanvas.tsx
 import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var HANDLE_SIZE = 8;
-var PADDING_SNAP_STEPS = [0, 1, 2, 4, 8, 12, 16, 20, 24, 28, 32];
+var PADDING_SNAP_STEPS2 = [0, 1, 2, 4, 8, 12, 16, 20, 24, 28, 32];
 var BADGE_HEIGHT = 22;
 var ACTIVE_TEXT_STORAGE_KEY = "devtools-active-text";
 function calculateLinkedPosition(rect, anchor, stackOffset = 0) {
@@ -6706,6 +7051,7 @@ function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds
   const handDragRef = useRef5({ isDragging: false, side: null, startX: 0, startY: 0, original: { top: 0, right: 0, bottom: 0, left: 0 }, element: null, elementInfo: null, selector: null, durableSelector: null });
   const [handHoveredElement, setHandHoveredElement] = useState12(null);
   const [handHoveredSide, setHandHoveredSide] = useState12(null);
+  const [stylePanelHint, setStylePanelHint] = useState12(null);
   const [handDragging, setHandDragging] = useState12(null);
   const handCursorRef = useRef5({ x: 0, y: 0 });
   const [handCursorPos, setHandCursorPos] = useState12({ x: 0, y: 0 });
@@ -7406,9 +7752,9 @@ function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds
     setActiveText(null);
   }, [activeText, dispatch]);
   const snapPadding = useCallback5((value) => {
-    for (let i = 0; i < PADDING_SNAP_STEPS.length - 1; i++) {
-      const lo = PADDING_SNAP_STEPS[i];
-      const hi = PADDING_SNAP_STEPS[i + 1];
+    for (let i = 0; i < PADDING_SNAP_STEPS2.length - 1; i++) {
+      const lo = PADDING_SNAP_STEPS2[i];
+      const hi = PADDING_SNAP_STEPS2[i + 1];
       if (value <= (lo + hi) / 2) return lo;
       if (value < hi) return hi;
     }
@@ -7438,6 +7784,12 @@ function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds
     (e) => {
       var _a2;
       if (!state.isAnnotating) return;
+      if (state.inspectedElement && state.activeTool === "hand" && !("button" in e && e.button === 2)) {
+        e.preventDefault();
+        e.stopPropagation();
+        dispatch({ type: "SELECT_ELEMENT", payload: null });
+        return;
+      }
       const point = getPoint(e);
       const isShiftClick = "shiftKey" in e && e.shiftKey;
       if (state.activeTool === "inspector") {
@@ -7663,7 +8015,7 @@ function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds
       setIsDrawing(true);
       dispatch({ type: "START_PATH", payload: point });
     },
-    [state.isAnnotating, state.activeTool, state.annotations, activeText, selectedAnnotationIds, hoveredElement, handHoveredElement, handHoveredSide, radiusHoveredElement, radiusHoveredCorner, gapHoveredElement, gapHoveredAxis, gapIsAuto, textHoveredElement, textHoveredProperty, getPoint, findAnnotationAtPoint, findHandleAtPoint, dispatch, selectAnnotation, clearSelection, commitActiveText]
+    [state.isAnnotating, state.activeTool, state.inspectedElement, state.annotations, activeText, selectedAnnotationIds, hoveredElement, handHoveredElement, handHoveredSide, radiusHoveredElement, radiusHoveredCorner, gapHoveredElement, gapHoveredAxis, gapIsAuto, textHoveredElement, textHoveredProperty, getPoint, findAnnotationAtPoint, findHandleAtPoint, dispatch, selectAnnotation, clearSelection, commitActiveText]
   );
   const handlePointerMove = useCallback5(
     (e) => {
@@ -8268,7 +8620,8 @@ function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds
       if (gapDragRef.current.isDragging) {
         const drag = gapDragRef.current;
         const el = drag.element;
-        if (!drag.hasMoved && el && drag.selector && drag.elementInfo) {
+        const isRightClick = "button" in e && e.button === 2;
+        if (!drag.hasMoved && !isRightClick && el && drag.selector && drag.elementInfo) {
           if (el instanceof HTMLElement) {
             el.style.removeProperty("transition");
           }
@@ -8489,17 +8842,18 @@ function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds
     }
   }, [commitActiveText]);
   const handleContextMenu = useCallback5((e) => {
-    if (state.activeTool !== "inspector" || !state.isAnnotating) return;
+    if (state.activeTool !== "hand" || !state.isAnnotating) return;
     e.preventDefault();
-    if (hoveredElement && !isElementInFlight(hoveredElement)) {
-      const info = extractElementInfo(hoveredElement);
-      const selector = getUniqueSelector(hoveredElement);
+    const target = handHoveredElement || gapHoveredElement || radiusHoveredElement || textHoveredElement;
+    if (target && !isElementInFlight(target)) {
+      const info = extractElementInfo(target);
+      const selector = getUniqueSelector(target);
       dispatch({
         type: "SELECT_ELEMENT",
-        payload: { el: hoveredElement, info: __spreadProps(__spreadValues({}, info), { selector }) }
+        payload: { el: target, info: __spreadProps(__spreadValues({}, info), { selector }) }
       });
     }
-  }, [state.activeTool, state.isAnnotating, hoveredElement, dispatch, isElementInFlight]);
+  }, [state.activeTool, state.isAnnotating, handHoveredElement, gapHoveredElement, radiusHoveredElement, textHoveredElement, dispatch, isElementInFlight]);
   useEffect15(() => {
     const linkedAnnotations = state.annotations.filter((a) => a.linkedSelector);
     if (linkedAnnotations.length === 0) return;
@@ -8811,28 +9165,28 @@ function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds
         refreshKey: textDragging ? textDragging.fontSize + textDragging.lineHeight * 1e3 : 0
       }
     ),
-    state.activeTool === "inspector" && state.isAnnotating && /* @__PURE__ */ jsxs9(Fragment6, { children: [
-      hoveredElement && !state.inspectedElement && (() => {
-        const hasLinkedAnnotation = !!pendingLinkedText || !!(activeText == null ? void 0 : activeText.linkedSelector) || state.annotations.some((a) => {
-          if (!a.linkedSelector) return false;
-          try {
-            return hoveredElement.matches(a.linkedSelector);
-          } catch (e) {
-            return false;
-          }
-        });
-        return /* @__PURE__ */ jsx10(
-          ElementHighlight,
-          {
-            element: hoveredElement,
-            isSelected: false,
-            elementInfo: hoveredElementInfo,
-            color: state.activeColor,
-            hideTooltip: hasLinkedAnnotation
-          }
-        );
-      })(),
-      state.inspectedElement && (() => {
+    state.activeTool === "inspector" && state.isAnnotating && /* @__PURE__ */ jsx10(Fragment6, { children: hoveredElement && !state.inspectedElement && (() => {
+      const hasLinkedAnnotation = !!pendingLinkedText || !!(activeText == null ? void 0 : activeText.linkedSelector) || state.annotations.some((a) => {
+        if (!a.linkedSelector) return false;
+        try {
+          return hoveredElement.matches(a.linkedSelector);
+        } catch (e) {
+          return false;
+        }
+      });
+      return /* @__PURE__ */ jsx10(
+        ElementHighlight,
+        {
+          element: hoveredElement,
+          isSelected: false,
+          elementInfo: hoveredElementInfo,
+          color: state.activeColor,
+          hideTooltip: hasLinkedAnnotation
+        }
+      );
+    })() }),
+    state.activeTool === "hand" && state.isAnnotating && state.inspectedElement && /* @__PURE__ */ jsxs9(Fragment6, { children: [
+      stylePanelHint && stylePanelHint !== "padding" && stylePanelHint !== "gap" && (() => {
         var _a2;
         const annotationGroupCount = new Set(
           state.annotations.map((a) => a.groupId || a.id)
@@ -8855,7 +9209,27 @@ function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds
           }
         );
       })(),
-      state.inspectedElement && /* @__PURE__ */ jsx10(
+      stylePanelHint === "padding" && /* @__PURE__ */ jsx10(
+        PaddingHandles,
+        {
+          element: state.inspectedElement.el,
+          padding: getComputedPadding(state.inspectedElement.el),
+          accentColor: state.activeColor,
+          hoveredSide: null,
+          draggingSide: null
+        }
+      ),
+      stylePanelHint === "gap" && /* @__PURE__ */ jsx10(
+        GapHandles,
+        {
+          element: state.inspectedElement.el,
+          gap: getComputedGap(state.inspectedElement.el),
+          accentColor: state.activeColor,
+          hoveredAxis: null,
+          draggingAxis: null
+        }
+      ),
+      /* @__PURE__ */ jsx10(
         StylePanel,
         {
           element: state.inspectedElement.el,
@@ -8864,6 +9238,7 @@ function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds
           styleModifications: state.styleModifications,
           dispatch,
           onClose: () => dispatch({ type: "SELECT_ELEMENT", payload: null }),
+          onHover: setStylePanelHint,
           accentColor: state.activeColor
         }
       )
@@ -9792,13 +10167,6 @@ function useLocalStorageBatch(isExpanded, state, hasRestoredAnnotations, hasActi
   ]);
 }
 
-// src/styles/border.ts
-var POPMELT_BORDER = {
-  borderWidth: 4,
-  borderStyle: "solid",
-  borderImage: "repeating-linear-gradient(-45deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 1px, rgba(0,0,0,0.1) 1px, rgba(0,0,0,0.1) 4px) 4"
-};
-
 // src/components/ToolButton.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
 var colors = {
@@ -9919,13 +10287,15 @@ var TOOL_GUIDANCE = {
       "Corners \u2192 rounding",
       "Right of text \u2192 font size",
       "Below text \u2192 line height",
-      "Click a spacing handle to cycle distribution"
+      "Click a spacing handle to cycle distribution",
+      "Right-click \u2192 inspect element styles"
     ],
     keys: [
       { key: "H", desc: "Select tool" },
       { key: "Shift", desc: "Snap to scale" },
       { key: "\u2325 + swipe", desc: "Cycle justify / flip direction" },
       { key: "\u21E7 + swipe", desc: "Cycle align-items" },
+      { key: "Right-click", desc: "Inspect styles" },
       { key: "Esc", desc: "Deselect" },
       { key: "\u2318 Enter", desc: "Hand off to your AI", accent: true }
     ]
@@ -10951,7 +11321,7 @@ function AnnotationToolbar({
 }
 
 // src/components/BridgeStatusPanel.tsx
-import { useEffect as useEffect18, useRef as useRef8, useState as useState14 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect18, useRef as useRef8, useState as useState14 } from "react";
 import { Fragment as Fragment8, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var stackContainerStyle = {
   position: "fixed",
@@ -10960,21 +11330,22 @@ var stackContainerStyle = {
   zIndex: 9999,
   display: "flex",
   flexDirection: "column",
-  gap: 1
+  gap: 10
 };
-var rowStyle = {
+var rowStyle = __spreadProps(__spreadValues({
   display: "flex",
   alignItems: "center",
   gap: 6,
   padding: "4px 10px",
-  backgroundColor: "rgba(255, 255, 255, 0.85)",
-  border: "1px solid rgba(0, 0, 0, 0.1)",
+  backgroundColor: "rgba(255, 255, 255, 0.85)"
+}, POPMELT_BORDER), {
   backdropFilter: "blur(32px)",
   fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
   fontSize: 11,
   color: "#1f2937",
-  whiteSpace: "nowrap"
-};
+  whiteSpace: "nowrap",
+  transition: "transform 200ms ease, opacity 200ms ease"
+});
 function formatStepText(events) {
   var _a;
   const toolEvents = events.filter((e) => e.type === "tool_use");
@@ -11065,6 +11436,60 @@ function ErrorDot() {
     }
   );
 }
+function SwipeDismiss({ onDismiss, children }) {
+  const ref = useRef8(null);
+  const drag = useRef8(null);
+  const [offset, setOffset] = useState14(0);
+  const [dismissed, setDismissed] = useState14(false);
+  const THRESHOLD = 60;
+  const onPointerDown = useCallback7((e) => {
+    var _a;
+    drag.current = { startX: e.clientX, startY: e.clientY, locked: false };
+    (_a = ref.current) == null ? void 0 : _a.setPointerCapture(e.pointerId);
+  }, []);
+  const onPointerMove = useCallback7((e) => {
+    const d = drag.current;
+    if (!d) return;
+    const dx = e.clientX - d.startX;
+    const dy = e.clientY - d.startY;
+    if (!d.locked) {
+      if (Math.abs(dx) < 4 && Math.abs(dy) < 4) return;
+      d.locked = true;
+      if (Math.abs(dy) > Math.abs(dx)) {
+        drag.current = null;
+        return;
+      }
+    }
+    setOffset(Math.max(0, dx));
+  }, []);
+  const onPointerUp = useCallback7(() => {
+    if (!drag.current) return;
+    drag.current = null;
+    if (offset >= THRESHOLD) {
+      setDismissed(true);
+      setTimeout(onDismiss, 200);
+    } else {
+      setOffset(0);
+    }
+  }, [offset, onDismiss]);
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      ref,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel: onPointerUp,
+      style: {
+        transform: dismissed ? "translateX(120%)" : `translateX(${offset}px)`,
+        opacity: dismissed ? 0 : 1 - offset / (THRESHOLD * 3),
+        transition: drag.current ? "none" : "transform 200ms ease, opacity 200ms ease",
+        touchAction: "pan-y"
+      },
+      children
+    }
+  );
+}
 function BridgeEventStack({ bridge, inFlightJobs, isVisible: isVisible2, onHover, clearSignal }) {
   const [entries, setEntries] = useState14([]);
   useEffect18(() => {
@@ -11118,20 +11543,20 @@ function BridgeEventStack({ bridge, inFlightJobs, isVisible: isVisible2, onHover
       onMouseLeave: () => onHover(false),
       children: entries.map((entry) => {
         const label = entry.status === "working" ? formatStepText(bridge.events.filter((e) => e.data.jobId === entry.jobId)) : entry.status === "queued" ? "Queued" : entry.status === "done" ? entry.doneLabel || "Done" : "Error";
-        return /* @__PURE__ */ jsxs11("div", { style: rowStyle, children: [
+        return /* @__PURE__ */ jsx13(SwipeDismiss, { onDismiss: () => setEntries((prev) => prev.filter((e) => e.jobId !== entry.jobId)), children: /* @__PURE__ */ jsxs11("div", { style: rowStyle, children: [
           entry.status === "working" && /* @__PURE__ */ jsx13(DotSpinner, { color: entry.color }),
           entry.status === "queued" && /* @__PURE__ */ jsx13(ColorSquare, { color: entry.color }),
           entry.status === "done" && /* @__PURE__ */ jsx13(Checkmark, { color: entry.color }),
           entry.status === "error" && /* @__PURE__ */ jsx13(ErrorDot, {}),
           /* @__PURE__ */ jsx13("span", { style: { color: entry.status === "queued" ? "#9ca3af" : "#1f2937" }, children: label })
-        ] }, entry.jobId);
+        ] }) }, entry.jobId);
       })
     }
   );
 }
 
 // src/components/ThreadPanel.tsx
-import { useCallback as useCallback7, useEffect as useEffect19, useRef as useRef9, useState as useState15 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect19, useRef as useRef9, useState as useState15 } from "react";
 
 // src/utils/threadMarkdown.tsx
 import { Fragment as Fragment9, jsx as jsx14 } from "react/jsx-runtime";
@@ -11465,7 +11890,7 @@ function ThreadPanel({
   const scrollRef = useRef9(null);
   const panelRef = useRef9(null);
   const prevStreamingRef = useRef9(isStreaming);
-  const fetchThread = useCallback7(() => {
+  const fetchThread = useCallback8(() => {
     fetch(`${bridgeUrl}/thread/${threadId}`).then((r) => r.json()).then((data) => {
       var _a2;
       setMessages((_a2 = data.messages) != null ? _a2 : []);
@@ -11494,7 +11919,7 @@ function ThreadPanel({
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [onClose]);
-  const handleSubmit = useCallback7(() => {
+  const handleSubmit = useCallback8(() => {
     if (!replyText.trim() || !onReply) return;
     const text = replyText.trim();
     setMessages((prev) => [...prev, {
@@ -11506,7 +11931,7 @@ function ThreadPanel({
     onReply(threadId, text);
     setReplyText("");
   }, [replyText, threadId, onReply]);
-  const handleKeyDown = useCallback7((e) => {
+  const handleKeyDown = useCallback8((e) => {
     if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
       e.preventDefault();
       handleSubmit();
@@ -11782,6 +12207,7 @@ var CLAUDE_MODELS = [
 ];
 var CODEX_MODELS = [
   { id: "gpt-5.3-codex", label: "Codex 5.3" },
+  { id: "gpt-5.3-codex-spark", label: "Spark 5.3" },
   { id: "gpt-5.1-codex-mini", label: "Mini 5.1" }
 ];
 function equivalentModelIndex(fromProvider, toProvider, currentIndex) {
@@ -11826,7 +12252,7 @@ function PopmeltProvider({
   }, [availableProviders, provider]);
   const models = provider === "codex" ? CODEX_MODELS : CLAUDE_MODELS;
   const currentModel = (_a = models[modelIndex]) != null ? _a : models[0];
-  const handleProviderChange = useCallback8((newProvider) => {
+  const handleProviderChange = useCallback9((newProvider) => {
     const oldProvider = provider;
     setProvider(newProvider);
     localStorage.setItem(PROVIDER_STORAGE_KEY, newProvider);
@@ -11834,7 +12260,7 @@ function PopmeltProvider({
     setModelIndex(newIndex);
     localStorage.setItem(MODEL_STORAGE_KEY, String(newIndex));
   }, [provider, modelIndex]);
-  const handleModelChange = useCallback8((newIndex) => {
+  const handleModelChange = useCallback9((newIndex) => {
     setModelIndex(newIndex);
     localStorage.setItem(MODEL_STORAGE_KEY, String(newIndex));
   }, []);
@@ -12026,7 +12452,7 @@ function PopmeltProvider({
       setInFlightJobs({});
     }
   }, [bridge.status]);
-  const handleScreenshot = useCallback8(async () => {
+  const handleScreenshot = useCallback9(async () => {
     const canvas = document.getElementById("devtools-canvas");
     if (!canvas) return false;
     const blobs = await captureScreenshot(document.body, canvas, state.annotations);
@@ -12037,7 +12463,7 @@ function PopmeltProvider({
     }
     return success;
   }, [state.annotations, state.styleModifications, dispatch]);
-  const handlePlanGoal = useCallback8(async (goal) => {
+  const handlePlanGoal = useCallback9(async (goal) => {
     var _a2;
     try {
       const activeAnnotations = state.annotations.filter((a) => {
@@ -12085,7 +12511,7 @@ function PopmeltProvider({
       return false;
     }
   }, [bridgeUrl, provider, currentModel.id, state.annotations, state.styleModifications, state.inspectedElement, dispatch]);
-  const materializePlan = useCallback8(async (tasks) => {
+  const materializePlan = useCallback9(async (tasks) => {
     const planId = activePlan == null ? void 0 : activePlan.planId;
     if (!planId) return;
     const baseHueMatch = state.activeColor.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);
@@ -12130,7 +12556,7 @@ function PopmeltProvider({
       }
     }
   }, [activePlan == null ? void 0 : activePlan.planId, state.activeColor, dispatch]);
-  const handleSendToClaude = useCallback8(async () => {
+  const handleSendToClaude = useCallback9(async () => {
     const canvas = document.getElementById("devtools-canvas");
     if (!canvas) return false;
     const activeAnnotations = state.annotations.filter((a) => {
@@ -12170,7 +12596,7 @@ function PopmeltProvider({
       return false;
     }
   }, [state.annotations, state.styleModifications, state.activeColor, dispatch, bridgeUrl, provider, currentModel.id]);
-  const handleReply = useCallback8(async (threadId, reply) => {
+  const handleReply = useCallback9(async (threadId, reply) => {
     try {
       const hexColor = cssColorToHex(state.activeColor);
       const { jobId } = await sendReplyToBridge(threadId, reply, bridgeUrl, hexColor, provider, currentModel.id);
@@ -12205,7 +12631,7 @@ function PopmeltProvider({
       console.error("[Pare] Failed to send reply:", err);
     }
   }, [state.activeColor, state.annotations, bridgeUrl, bridge.dismissQuestion, dispatch, provider, currentModel.id]);
-  const handleApprovePlan = useCallback8(async () => {
+  const handleApprovePlan = useCallback9(async () => {
     if (!activePlan || !activePlan.planId) return;
     try {
       await approvePlan(activePlan.planId, bridgeUrl);
@@ -12278,7 +12704,7 @@ function PopmeltProvider({
       console.error("[Pare] Failed to approve plan:", err);
     }
   }, [activePlan, state.annotations, state.activeColor, bridgeUrl, provider, currentModel.id, dispatch]);
-  const handleDismissPlan = useCallback8(() => {
+  const handleDismissPlan = useCallback9(() => {
     setActivePlan(null);
     if (activePlan == null ? void 0 : activePlan.planId) {
       const planAnnotations = state.annotations.filter((a) => a.planId === activePlan.planId);
@@ -12376,7 +12802,7 @@ function PopmeltProvider({
     const values = Object.values(inFlightJobs);
     return values.length > 0 ? values[values.length - 1].color : void 0;
   }, [bridge.activeJobId, inFlightJobs]);
-  const handleViewThread = useCallback8((threadId) => {
+  const handleViewThread = useCallback9((threadId) => {
     setOpenThreadId(threadId);
   }, []);
   const threadActiveJobId = useMemo4(() => {
@@ -12389,7 +12815,7 @@ function PopmeltProvider({
   const [eventStreamVisible, setEventStreamVisible] = useState16(false);
   const [clearSignal, setClearSignal] = useState16(0);
   const hideTimeoutRef = useRef10(null);
-  const handleEventStreamHover = useCallback8((hovering) => {
+  const handleEventStreamHover = useCallback9((hovering) => {
     if (hovering) {
       if (hideTimeoutRef.current) {
         clearTimeout(hideTimeoutRef.current);
@@ -12403,7 +12829,7 @@ function PopmeltProvider({
       }, 150);
     }
   }, []);
-  const handleClearEventStream = useCallback8(() => {
+  const handleClearEventStream = useCallback9(() => {
     setClearSignal((s) => s + 1);
     bridge.clearEvents();
   }, [bridge.clearEvents]);