@popmelt.com/core 0.1.0 → 0.3.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,
@@ -71,13 +71,20 @@ async function checkBridgeHealth(bridgeUrl = DEFAULT_BRIDGE_URL) {
     return null;
   }
 }
-async function sendToBridge(screenshotBlob, feedbackJson, bridgeUrl = DEFAULT_BRIDGE_URL, color, provider, model) {
+async function sendToBridge(screenshotBlob, feedbackJson, bridgeUrl = DEFAULT_BRIDGE_URL, color, provider, model, pastedImages) {
   const formData = new FormData();
   formData.append("screenshot", screenshotBlob, "screenshot.png");
   formData.append("feedback", feedbackJson);
   if (color) formData.append("color", color);
   if (provider) formData.append("provider", provider);
   if (model) formData.append("model", model);
+  if (pastedImages) {
+    for (const [annotationId, blobs] of pastedImages) {
+      for (let i = 0; i < blobs.length; i++) {
+        formData.append(`image-${annotationId}-${i}`, blobs[i], `image-${annotationId}-${i}.png`);
+      }
+    }
+  }
   const res = await fetch(`${bridgeUrl}/send`, {
     method: "POST",
     body: formData
@@ -153,12 +160,94 @@ async function sendPlanExecution(screenshotBlob, planId, tasks, bridgeUrl = DEFA
   }
   return res.json();
 }
-async function sendReplyToBridge(threadId, reply, bridgeUrl = DEFAULT_BRIDGE_URL, color, provider, model) {
-  const res = await fetch(`${bridgeUrl}/reply`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ threadId, reply, color, provider, model })
-  });
+async function sendReplyToBridge(threadId, reply, bridgeUrl = DEFAULT_BRIDGE_URL, color, provider, model, images) {
+  let res;
+  if (images && images.length > 0) {
+    const formData = new FormData();
+    const placeholder = new Blob([new Uint8Array([
+      137,
+      80,
+      78,
+      71,
+      13,
+      10,
+      26,
+      10,
+      0,
+      0,
+      0,
+      13,
+      73,
+      72,
+      68,
+      82,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      1,
+      8,
+      6,
+      0,
+      0,
+      0,
+      31,
+      21,
+      196,
+      137,
+      0,
+      0,
+      0,
+      10,
+      73,
+      68,
+      65,
+      84,
+      120,
+      156,
+      98,
+      0,
+      0,
+      0,
+      2,
+      0,
+      1,
+      229,
+      39,
+      222,
+      252,
+      0,
+      0,
+      0,
+      0,
+      73,
+      69,
+      78,
+      68,
+      174,
+      66,
+      96,
+      130
+    ])], { type: "image/png" });
+    formData.append("screenshot", placeholder, "screenshot.png");
+    formData.append("feedback", JSON.stringify({ threadId, reply, color, provider, model }));
+    for (let i = 0; i < images.length; i++) {
+      formData.append(`image-reply-${i}`, images[i], `reply-image-${i}.png`);
+    }
+    res = await fetch(`${bridgeUrl}/reply`, {
+      method: "POST",
+      body: formData
+    });
+  } else {
+    res = await fetch(`${bridgeUrl}/reply`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ threadId, reply, color, provider, model })
+    });
+  }
   if (!res.ok) {
     const body = await res.text();
     throw new Error(`Bridge returned ${res.status}: ${body}`);
@@ -487,7 +576,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 });
@@ -526,8 +615,9 @@ function handleFinishPath(state, payload) {
   });
 }
 function handleAddText(state, payload) {
-  const textAnnotation = {
-    id: generateId(),
+  var _a;
+  const textAnnotation = __spreadValues({
+    id: (_a = payload.id) != null ? _a : generateId(),
     type: "text",
     points: [payload.point],
     text: payload.text,
@@ -540,7 +630,7 @@ function handleAddText(state, payload) {
     linkedSelector: payload.linkedSelector,
     linkedAnchor: payload.linkedAnchor,
     elements: payload.elements
-  };
+  }, payload.imageCount ? { imageCount: payload.imageCount } : {});
   const baseState = payload.groupId ? state : pushToUndoStack(state);
   return __spreadProps(__spreadValues({}, baseState), {
     annotations: [...state.annotations, textAnnotation]
@@ -550,7 +640,7 @@ function handleUpdateText(state, payload) {
   const stateWithUndo = pushToUndoStack(state);
   return __spreadProps(__spreadValues({}, stateWithUndo), {
     annotations: state.annotations.map(
-      (a) => a.id === payload.id ? __spreadProps(__spreadValues({}, a), { text: payload.text }) : a
+      (a) => a.id === payload.id ? __spreadValues(__spreadProps(__spreadValues({}, a), { text: payload.text }), payload.imageCount != null ? { imageCount: payload.imageCount } : {}) : a
     )
   });
 }
@@ -884,17 +974,25 @@ function handleSetAnnotationStatus(state, payload) {
 }
 function handleSetAnnotationThread(state, payload) {
   const idSet = new Set(payload.ids);
+  const groupIds = /* @__PURE__ */ new Set();
+  for (const a of state.annotations) {
+    if (idSet.has(a.id) && a.groupId) groupIds.add(a.groupId);
+  }
   return __spreadProps(__spreadValues({}, state), {
     annotations: state.annotations.map(
-      (a) => idSet.has(a.id) ? __spreadProps(__spreadValues({}, a), { threadId: payload.threadId }) : a
+      (a) => idSet.has(a.id) || a.groupId && groupIds.has(a.groupId) ? __spreadProps(__spreadValues({}, a), { threadId: payload.threadId }) : a
     )
   });
 }
 function handleSetAnnotationQuestion(state, payload) {
   const idSet = new Set(payload.ids);
+  const groupIds = /* @__PURE__ */ new Set();
+  for (const a of state.annotations) {
+    if (idSet.has(a.id) && a.groupId) groupIds.add(a.groupId);
+  }
   return __spreadProps(__spreadValues({}, state), {
     annotations: state.annotations.map(
-      (a) => idSet.has(a.id) ? __spreadProps(__spreadValues({}, a), { status: "waiting_input", question: payload.question, threadId: payload.threadId }) : a
+      (a) => idSet.has(a.id) || a.groupId && groupIds.has(a.groupId) ? __spreadProps(__spreadValues({}, a), { status: "waiting_input", question: payload.question, threadId: payload.threadId }) : a
     )
   });
 }
@@ -1917,25 +2015,26 @@ function buildFeedbackData(annotations, styleModifications = [], inspectedElemen
     const text = group.find((a) => a.type === "text");
     if (shape) {
       const linkedSelector = shape.linkedSelector || (text == null ? void 0 : text.linkedSelector);
-      annotationDataList.push(__spreadProps(__spreadValues({
+      const imageCount = (text == null ? void 0 : text.imageCount) || shape.imageCount;
+      annotationDataList.push(__spreadValues(__spreadProps(__spreadValues({
         id: shape.id,
         type: shape.type,
         instruction: text == null ? void 0 : text.text
       }, linkedSelector ? { linkedSelector } : {}), {
         // Use stored elements (captured at creation time) or empty array
         elements: shape.elements || []
-      }));
+      }), imageCount ? { imageCount } : {}));
     }
   }
   for (const annotation of standaloneAnnotations) {
-    annotationDataList.push(__spreadProps(__spreadValues({
+    annotationDataList.push(__spreadValues(__spreadProps(__spreadValues({
       id: annotation.id,
       type: annotation.type,
       instruction: annotation.type === "text" ? annotation.text : void 0
     }, annotation.linkedSelector ? { linkedSelector: annotation.linkedSelector } : {}), {
       // Use stored elements (captured at creation time) or empty array
       elements: annotation.elements || []
-    }));
+    }), annotation.imageCount ? { imageCount: annotation.imageCount } : {}));
   }
   return __spreadValues({
     timestamp: (/* @__PURE__ */ new Date()).toISOString(),
@@ -2076,7 +2175,8 @@ function drawAnnotationsToCanvas(ctx, annotations, scrollY, dpr) {
         const fontSize = annotation.fontSize || 16;
         ctx.font = `${fontSize}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`;
         ctx.fillStyle = annotation.color;
-        const lines = annotation.text.split("\n");
+        const displayText = annotation.imageCount && annotation.imageCount > 0 ? `[${annotation.imageCount} image${annotation.imageCount > 1 ? "s" : ""}] ${annotation.text}` : annotation.text;
+        const lines = displayText.split("\n");
         const lineHeight = fontSize * 1.2;
         const padding = 4;
         let maxWidth = 0;
@@ -3706,6 +3806,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 +4785,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 +4853,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 +4879,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 +5308,10 @@ function LayoutSection({
   activeDropdown,
   onDropdownChange,
   panelContentRef,
-  accentColor
+  accentColor,
+  onFieldHover,
+  preferredUnit,
+  onUnitCycle
 }) {
   const setActiveDropdown = onDropdownChange;
   const display = getValue("display");
@@ -5207,7 +5339,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 +5381,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 +5607,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 +5628,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 +5648,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 +5675,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 +5695,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 +5728,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 +5765,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 +5799,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 +5850,9 @@ function TypographySection({
   colorVariables,
   activeColorDropdown,
   onColorDropdownChange,
-  panelContentRef
+  panelContentRef,
+  preferredUnit,
+  onUnitCycle
 }) {
   var _a;
   const fontFamily = getValue("font-family");
@@ -5717,9 +5951,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 +6055,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 +6186,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 +6227,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 +6535,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 +6607,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 +6615,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 +6625,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 +6660,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",
-            {
-              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 })
+  }, 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",
+            {
+              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"
+              }
             }
           ),
-          /* @__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 +7117,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) {
@@ -6680,7 +7125,7 @@ function calculateLinkedPosition(rect, anchor, stackOffset = 0) {
   const y = anchor === "top-left" ? rect.top + window.scrollY - BADGE_HEIGHT - stackOffset * BADGE_HEIGHT + PADDING : rect.bottom + window.scrollY + PADDING - 1 + stackOffset * BADGE_HEIGHT;
   return { x, y };
 }
-function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds, inFlightStyleSelectors, inFlightSelectorColors, onReply, onViewThread, isThreadPanelOpen, activePlan }) {
+function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds, inFlightStyleSelectors, inFlightSelectorColors, onAttachImages, onReply, onViewThread, activePlan }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const { canvasRef, redrawAll, resizeCanvas } = useCanvasDrawing();
   const [isDrawing, setIsDrawing] = useState12(false);
@@ -6706,6 +7151,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 });
@@ -7376,26 +7822,39 @@ function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds
     return () => window.removeEventListener("mousemove", handleMouseMove);
   }, [activeText, findTextAtPoint]);
   const commitActiveText = useCallback5(() => {
+    var _a2;
     if (!activeText) return;
-    if (activeText.text.trim()) {
+    const imageCount = ((_a2 = activeText.images) == null ? void 0 : _a2.length) || 0;
+    if (activeText.text.trim() || imageCount > 0) {
       if (activeText.isNew) {
+        const annotationId = generateId();
         dispatch({
           type: "ADD_TEXT",
-          payload: {
+          payload: __spreadValues({
             point: activeText.point,
-            text: activeText.text,
+            text: activeText.text || (imageCount > 0 ? `[${imageCount} image${imageCount > 1 ? "s" : ""}]` : ""),
             fontSize: activeText.fontSize,
+            id: annotationId,
             groupId: activeText.groupId,
             linkedSelector: activeText.linkedSelector,
             linkedAnchor: activeText.linkedAnchor,
             elements: activeText.elements
-          }
+          }, imageCount > 0 ? { imageCount } : {})
         });
+        if (imageCount > 0 && activeText.images && onAttachImages) {
+          onAttachImages(annotationId, activeText.images);
+        }
       } else {
         dispatch({
           type: "UPDATE_TEXT",
-          payload: { id: activeText.id, text: activeText.text }
+          payload: __spreadValues({
+            id: activeText.id,
+            text: activeText.text || (imageCount > 0 ? `[${imageCount} image${imageCount > 1 ? "s" : ""}]` : "")
+          }, imageCount > 0 ? { imageCount } : {})
         });
+        if (imageCount > 0 && activeText.images && onAttachImages) {
+          onAttachImages(activeText.id, activeText.images);
+        }
       }
     } else if (!activeText.isNew) {
       dispatch({
@@ -7404,11 +7863,11 @@ function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds
       });
     }
     setActiveText(null);
-  }, [activeText, dispatch]);
+  }, [activeText, dispatch, onAttachImages]);
   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 +7897,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 +8128,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 +8733,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");
           }
@@ -8488,18 +8954,37 @@ function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds
       commitActiveText();
     }
   }, [commitActiveText]);
+  const handleTextPaste = useCallback5((e) => {
+    if (!activeText) return;
+    const items = e.clipboardData.items;
+    const imageBlobs = [];
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item.type.startsWith("image/")) {
+        const file = item.getAsFile();
+        if (file) imageBlobs.push(file);
+      }
+    }
+    if (imageBlobs.length > 0) {
+      e.preventDefault();
+      setActiveText((prev) => prev ? __spreadProps(__spreadValues({}, prev), {
+        images: [...prev.images || [], ...imageBlobs]
+      }) : null);
+    }
+  }, [activeText]);
   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;
@@ -8676,10 +9161,36 @@ function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds
           value: activeText.text,
           onChange: handleTextChange,
           onKeyDown: handleTextKeyDown,
+          onPaste: handleTextPaste,
           onBlur: commitActiveText,
           placeholder: "Type here...",
           style: textInputStyle
         }
+      ),
+      activeText.images && activeText.images.length > 0 && /* @__PURE__ */ jsxs9(
+        "div",
+        {
+          "data-devtools": true,
+          style: {
+            position: "fixed",
+            left: activeText.point.x - PADDING - scroll.x,
+            top: activeText.point.y - PADDING - scroll.y - 20,
+            zIndex: 1e4,
+            fontSize: 11,
+            fontFamily: "system-ui, sans-serif",
+            color: "#fff",
+            backgroundColor: "rgba(0,0,0,0.7)",
+            padding: "2px 6px",
+            borderRadius: 3,
+            whiteSpace: "nowrap"
+          },
+          children: [
+            activeText.images.length,
+            " image",
+            activeText.images.length > 1 ? "s" : "",
+            " attached"
+          ]
+        }
       )
     ] }),
     state.isAnnotating && state.activeTool !== "hand" && state.styleModifications.length > 0 && /* @__PURE__ */ jsx10(
@@ -8700,29 +9211,16 @@ function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds
         accentColor: state.activeColor
       }
     ),
-    state.isAnnotating && inFlightAnnotationIds && inFlightAnnotationIds.size > 0 && /* @__PURE__ */ jsx10(
-      ThinkingSpinners,
-      {
-        annotations: state.annotations,
-        inFlightIds: inFlightAnnotationIds,
-        scrollX: scroll.x,
-        scrollY: scroll.y,
-        annotationGroupMap,
-        onViewThread,
-        onSelectAnnotation: selectAnnotation
-      }
-    ),
     state.isAnnotating && /* @__PURE__ */ jsx10(
-      ResolutionBadges,
+      AnnotationBadges,
       {
         annotations: state.annotations,
         supersededAnnotations,
+        inFlightIds: inFlightAnnotationIds,
         scrollX: scroll.x,
         scrollY: scroll.y,
         annotationGroupMap,
-        onReply,
         onViewThread,
-        isThreadPanelOpen,
         onSelectAnnotation: selectAnnotation
       }
     ),
@@ -8811,28 +9309,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 +9353,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 +9382,7 @@ function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds
           styleModifications: state.styleModifications,
           dispatch,
           onClose: () => dispatch({ type: "SELECT_ELEMENT", payload: null }),
+          onHover: setStylePanelHint,
           accentColor: state.activeColor
         }
       )
@@ -8887,8 +9406,9 @@ var THINKING_WORDS2 = [
   "riffing"
 ];
 var WORD_INTERVAL2 = 3e3;
-function ThinkingSpinners({
+function AnnotationBadges({
   annotations,
+  supersededAnnotations,
   inFlightIds,
   scrollX,
   scrollY,
@@ -8896,10 +9416,12 @@ function ThinkingSpinners({
   onViewThread,
   onSelectAnnotation
 }) {
-  var _a;
+  var _a, _b;
   const [charIndex, setCharIndex] = useState12(0);
   const [wordIndex, setWordIndex] = useState12(() => Math.floor(Math.random() * THINKING_WORDS2.length));
+  const hasInFlight = !!(inFlightIds && inFlightIds.size > 0);
   useEffect15(() => {
+    if (!hasInFlight) return;
     const charTimer = setInterval(() => {
       setCharIndex((i) => (i + 1) % SPINNER_FRAME_COUNT2);
     }, SPINNER_INTERVAL2);
@@ -8910,14 +9432,25 @@ function ThinkingSpinners({
       clearInterval(charTimer);
       clearInterval(wordTimer);
     };
-  }, []);
-  const spinnerPositions = [];
+  }, [hasInFlight]);
+  const badges = [];
   for (const annotation of annotations) {
     if (annotation.type !== "text" || !annotation.text || !annotation.points[0]) continue;
-    const isInFlight = inFlightIds.has(annotation.id) || annotation.groupId && annotations.some(
-      (a) => a.groupId === annotation.groupId && inFlightIds.has(a.id)
+    if (supersededAnnotations.has(annotation)) continue;
+    const groupAnns = annotation.groupId ? annotations.filter((a) => a.groupId === annotation.groupId) : [annotation];
+    const isInFlight = !!(inFlightIds && (inFlightIds.has(annotation.id) || groupAnns.some((a) => inFlightIds.has(a.id))));
+    const status = (_a = annotation.status) != null ? _a : "pending";
+    const groupMateResolved = groupAnns.some(
+      (a) => a.status === "resolved" || a.status === "needs_review"
     );
-    if (!isInFlight) continue;
+    const hasThread = groupAnns.some((a) => a.threadId);
+    if (!isInFlight && status !== "resolved" && status !== "needs_review" && !groupMateResolved && !hasThread) continue;
+    const threadId = annotation.threadId || ((_b = groupAnns.find((a) => a.threadId)) == null ? void 0 : _b.threadId);
+    const isNeedsReview = status === "needs_review" || groupAnns.some((a) => a.status === "needs_review");
+    const replyCount = groupAnns.reduce((n, a) => {
+      var _a2;
+      return n + ((_a2 = a.replyCount) != null ? _a2 : 0);
+    }, 0) || 1;
     const point = annotation.points[0];
     const fontSize = annotation.fontSize || 12;
     const lineHeightPx = fontSize * LINE_HEIGHT;
@@ -8930,26 +9463,24 @@ function ThinkingSpinners({
     ctx.font = `${fontSize}px ${FONT_FAMILY}`;
     const maxWidth = Math.min(MAX_DISPLAY_WIDTH, Math.max(...displayLines.map((line) => ctx.measureText(line).width)));
     const totalHeight = displayLines.length * lineHeightPx;
-    const annotationHeight = totalHeight + PADDING * 2;
-    const groupAnns = annotation.groupId ? annotations.filter((a) => a.groupId === annotation.groupId) : [annotation];
-    const threadId = annotation.threadId || ((_a = groupAnns.find((a) => a.threadId)) == null ? void 0 : _a.threadId);
-    spinnerPositions.push({
+    badges.push({
       id: annotation.id,
       threadId,
       x: point.x + maxWidth + PADDING,
-      // right edge of text bg
       y: point.y - PADDING,
-      // top of text bg
-      size: annotationHeight,
-      color: annotation.color
+      size: totalHeight + PADDING * 2,
+      color: annotation.color,
+      isInFlight,
+      isNeedsReview,
+      replyCount
     });
   }
-  if (spinnerPositions.length === 0) return null;
+  if (badges.length === 0) return null;
   const clickable = !!onViewThread;
-  return /* @__PURE__ */ jsx10(Fragment6, { children: spinnerPositions.map((pos, i) => /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsx10(Fragment6, { children: badges.map((pos) => /* @__PURE__ */ jsx10(
     "div",
     {
-      "data-devtools": true,
+      "data-devtools": "annotation-badge",
       onClick: clickable && pos.threadId ? () => {
         onSelectAnnotation == null ? void 0 : onSelectAnnotation(pos.id);
         onViewThread(pos.threadId);
@@ -8962,7 +9493,7 @@ function ThinkingSpinners({
         display: "flex",
         alignItems: "center",
         pointerEvents: clickable ? "auto" : "none",
-        cursor: clickable ? "pointer" : void 0,
+        cursor: clickable && pos.threadId ? "pointer" : void 0,
         zIndex: 9999,
         backgroundColor: pos.color,
         fontFamily: FONT_FAMILY,
@@ -8973,7 +9504,7 @@ function ThinkingSpinners({
         gap: 4,
         whiteSpace: "nowrap"
       },
-      children: [
+      children: pos.isInFlight ? /* @__PURE__ */ jsxs9(Fragment6, { children: [
         /* @__PURE__ */ jsx10("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "currentColor", style: { verticalAlign: "middle" }, children: charIndex === 1 ? /* @__PURE__ */ jsxs9(Fragment6, { children: [
           /* @__PURE__ */ jsx10("circle", { cx: "7", cy: "7", r: "2" }),
           /* @__PURE__ */ jsx10("circle", { cx: "17", cy: "7", r: "2" }),
@@ -8986,287 +9517,23 @@ function ThinkingSpinners({
           /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "18", r: "2" })
         ] }) }),
         /* @__PURE__ */ jsx10("span", { style: { opacity: 0.7 }, children: THINKING_WORDS2[wordIndex] })
-      ]
-    },
-    i
-  )) });
-}
-function ResolutionBadges({
-  annotations,
-  supersededAnnotations,
-  scrollX,
-  scrollY,
-  annotationGroupMap,
-  onReply,
-  onViewThread,
-  isThreadPanelOpen,
-  onSelectAnnotation
-}) {
-  var _a;
-  const badgePositions = [];
-  for (const annotation of annotations) {
-    if (annotation.type !== "text" || !annotation.text || !annotation.points[0]) continue;
-    if (supersededAnnotations.has(annotation)) continue;
-    const status = (_a = annotation.status) != null ? _a : "pending";
-    const groupAnns = annotation.groupId ? annotations.filter((a) => a.groupId === annotation.groupId) : [annotation];
-    const groupMateResolved = groupAnns.some(
-      (a) => a.status === "resolved" || a.status === "needs_review"
-    );
-    const hasThread = groupAnns.some((a) => a.threadId);
-    if (status !== "resolved" && status !== "needs_review" && !groupMateResolved && !hasThread) continue;
-    const isNeedsReview = status === "needs_review" || groupAnns.some((a) => a.status === "needs_review");
-    const point = annotation.points[0];
-    const fontSize = annotation.fontSize || 12;
-    const lineHeightPx = fontSize * LINE_HEIGHT;
-    const lines = annotation.text.split("\n");
-    const groupNumber = annotationGroupMap.get(annotation.id);
-    const displayLines = groupNumber !== void 0 ? [groupNumber + ". " + (lines[0] || ""), ...lines.slice(1)] : lines;
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    if (!ctx) continue;
-    ctx.font = `${fontSize}px ${FONT_FAMILY}`;
-    const maxWidth = Math.min(MAX_DISPLAY_WIDTH, Math.max(...displayLines.map((line) => ctx.measureText(line).width)));
-    const totalHeight = displayLines.length * lineHeightPx;
-    const annotationHeight = totalHeight + PADDING * 2;
-    badgePositions.push({
-      annotation,
-      x: point.x + maxWidth + PADDING,
-      y: point.y - PADDING,
-      size: annotationHeight,
-      isNeedsReview: !!isNeedsReview,
-      groupNumber
-    });
-  }
-  if (badgePositions.length === 0) return null;
-  return /* @__PURE__ */ jsx10(Fragment6, { children: badgePositions.map(({ annotation, x, y, size, isNeedsReview, groupNumber }) => /* @__PURE__ */ jsx10(
-    ResolutionBadge,
-    {
-      annotation,
-      annotations,
-      x: x - scrollX,
-      y: y - scrollY,
-      size,
-      isNeedsReview: !!isNeedsReview,
-      groupNumber,
-      onReply,
-      onViewThread,
-      isThreadPanelOpen,
-      onSelectAnnotation
+      ] }) : /* @__PURE__ */ jsxs9(Fragment6, { children: [
+        pos.isNeedsReview ? /* @__PURE__ */ jsx10("span", { style: { fontWeight: 700 }, children: "?" }) : /* @__PURE__ */ jsxs9("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
+          /* @__PURE__ */ jsx10("line", { x1: "12", y1: "3", x2: "12", y2: "9" }),
+          /* @__PURE__ */ jsx10("line", { x1: "12", y1: "15", x2: "12", y2: "21" }),
+          /* @__PURE__ */ jsx10("line", { x1: "3", y1: "12", x2: "9", y2: "12" }),
+          /* @__PURE__ */ jsx10("line", { x1: "15", y1: "12", x2: "21", y2: "12" })
+        ] }),
+        /* @__PURE__ */ jsxs9("span", { style: { opacity: 0.7 }, children: [
+          pos.replyCount,
+          " ",
+          pos.replyCount === 1 ? "reply" : "replies"
+        ] })
+      ] })
     },
-    `resolution-${annotation.id}`
+    pos.id
   )) });
 }
-function ResolutionBadge({
-  annotation,
-  annotations,
-  x,
-  y,
-  size,
-  isNeedsReview,
-  groupNumber,
-  onReply,
-  onViewThread,
-  isThreadPanelOpen,
-  onSelectAnnotation
-}) {
-  var _a, _b;
-  const [expanded, setExpanded] = useState12(false);
-  const [replyText, setReplyText] = useState12("");
-  const textareaRef = useRef5(null);
-  const panelRef = useRef5(null);
-  useEffect15(() => {
-    if (expanded && textareaRef.current) {
-      textareaRef.current.focus();
-    }
-  }, [expanded]);
-  useEffect15(() => {
-    if (!expanded) return;
-    const handleClickOutside = (e) => {
-      if (panelRef.current && !panelRef.current.contains(e.target)) {
-        setExpanded(false);
-      }
-    };
-    const handleEscape = (e) => {
-      if (e.key === "Escape") setExpanded(false);
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", handleEscape);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
-    };
-  }, [expanded]);
-  const groupAnnotations = annotation.groupId ? annotations.filter((a) => a.groupId === annotation.groupId) : [annotation];
-  const textAnn = groupAnnotations.find((a) => a.type === "text");
-  const userMessage = (textAnn == null ? void 0 : textAnn.text) || "(no text)";
-  const summary = (_a = groupAnnotations.find((a) => a.resolutionSummary)) == null ? void 0 : _a.resolutionSummary;
-  const threadId = (_b = groupAnnotations.find((a) => a.threadId)) == null ? void 0 : _b.threadId;
-  const handleSubmit = useCallback5(() => {
-    if (!replyText.trim() || !threadId || !onReply) return;
-    onReply(threadId, replyText.trim());
-    setReplyText("");
-    setExpanded(false);
-  }, [replyText, threadId, onReply]);
-  const handleKeyDown = useCallback5((e) => {
-    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-      e.preventDefault();
-      handleSubmit();
-    }
-  }, [handleSubmit]);
-  return /* @__PURE__ */ jsxs9(
-    "div",
-    {
-      ref: panelRef,
-      "data-devtools": "resolution-badge",
-      style: {
-        position: "fixed",
-        left: x,
-        top: y,
-        zIndex: expanded ? 10002 : 9999,
-        pointerEvents: "auto"
-      },
-      children: [
-        !expanded && /* @__PURE__ */ jsxs9(
-          "div",
-          {
-            onClick: () => {
-              onSelectAnnotation == null ? void 0 : onSelectAnnotation(annotation.id);
-              if (threadId && onViewThread) {
-                onViewThread(threadId);
-              }
-            },
-            style: {
-              height: size,
-              display: "flex",
-              alignItems: "center",
-              cursor: "pointer",
-              backgroundColor: annotation.color,
-              fontFamily: FONT_FAMILY,
-              fontSize: 12,
-              color: "#ffffff",
-              userSelect: "none",
-              padding: `0 ${PADDING}px`,
-              gap: 4,
-              whiteSpace: "nowrap"
-            },
-            children: [
-              isNeedsReview ? /* @__PURE__ */ jsx10("span", { style: { fontWeight: 700 }, children: "?" }) : /* @__PURE__ */ jsxs9("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
-                /* @__PURE__ */ jsx10("line", { x1: "12", y1: "3", x2: "12", y2: "9" }),
-                /* @__PURE__ */ jsx10("line", { x1: "12", y1: "15", x2: "12", y2: "21" }),
-                /* @__PURE__ */ jsx10("line", { x1: "3", y1: "12", x2: "9", y2: "12" }),
-                /* @__PURE__ */ jsx10("line", { x1: "15", y1: "12", x2: "21", y2: "12" })
-              ] }),
-              /* @__PURE__ */ jsx10("span", { style: { opacity: 0.7 }, children: (() => {
-                const groupAnns = annotation.groupId ? annotations.filter((a) => a.groupId === annotation.groupId) : [annotation];
-                const count = groupAnns.reduce((n, a) => {
-                  var _a2;
-                  return n + ((_a2 = a.replyCount) != null ? _a2 : 0);
-                }, 0) || 1;
-                return `${count} ${count === 1 ? "reply" : "replies"}`;
-              })() })
-            ]
-          }
-        ),
-        expanded && /* @__PURE__ */ jsxs9(
-          "div",
-          {
-            style: {
-              minWidth: 280,
-              maxWidth: 400,
-              backgroundColor: "#ffffff",
-              fontFamily: FONT_FAMILY,
-              fontSize: 12,
-              color: "#1f2937",
-              border: "1px solid rgba(0, 0, 0, 0.1)"
-            },
-            children: [
-              /* @__PURE__ */ jsx10("div", { style: {
-                padding: `${PADDING + 2}px ${PADDING + 4}px`,
-                backgroundColor: annotation.color,
-                color: "#ffffff",
-                lineHeight: 1.4
-              }, children: userMessage }),
-              summary && /* @__PURE__ */ jsx10("div", { style: {
-                padding: `${PADDING + 2}px ${PADDING + 4}px`,
-                lineHeight: 1.4,
-                borderBottom: "1px solid rgba(0, 0, 0, 0.06)"
-              }, children: summary }),
-              threadId && /* @__PURE__ */ jsxs9("div", { style: { padding: PADDING }, children: [
-                onReply && /* @__PURE__ */ jsxs9(Fragment6, { children: [
-                  /* @__PURE__ */ jsx10(
-                    "textarea",
-                    {
-                      ref: textareaRef,
-                      value: replyText,
-                      onChange: (e) => setReplyText(e.target.value),
-                      onKeyDown: handleKeyDown,
-                      placeholder: "Reply...",
-                      style: {
-                        width: "100%",
-                        minHeight: 40,
-                        padding: PADDING,
-                        fontSize: 12,
-                        fontFamily: FONT_FAMILY,
-                        backgroundColor: "rgba(0, 0, 0, 0.04)",
-                        color: "#1f2937",
-                        border: "1px solid rgba(0, 0, 0, 0.1)",
-                        borderRadius: 0,
-                        outline: "none",
-                        resize: "vertical",
-                        lineHeight: 1.4,
-                        boxSizing: "border-box"
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx10("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 4 }, children: /* @__PURE__ */ jsx10(
-                    "button",
-                    {
-                      onClick: handleSubmit,
-                      disabled: !replyText.trim(),
-                      style: {
-                        padding: "4px 12px",
-                        fontSize: 11,
-                        fontFamily: FONT_FAMILY,
-                        fontWeight: 600,
-                        backgroundColor: replyText.trim() ? annotation.color : "rgba(0,0,0,0.1)",
-                        color: replyText.trim() ? "#ffffff" : "rgba(0,0,0,0.3)",
-                        border: "none",
-                        cursor: replyText.trim() ? "pointer" : "default"
-                      },
-                      children: "Send \u2318\u23CE"
-                    }
-                  ) })
-                ] }),
-                onViewThread && /* @__PURE__ */ jsx10(
-                  "button",
-                  {
-                    onClick: () => {
-                      onViewThread(threadId);
-                      setExpanded(false);
-                    },
-                    style: {
-                      width: "100%",
-                      padding: "5px 0",
-                      fontSize: 11,
-                      fontFamily: FONT_FAMILY,
-                      fontWeight: 500,
-                      backgroundColor: "transparent",
-                      color: "#6b7280",
-                      border: "1px solid rgba(0, 0, 0, 0.1)",
-                      cursor: "pointer",
-                      marginTop: onReply ? 8 : 0
-                    },
-                    children: "View conversation \u2192"
-                  }
-                )
-              ] })
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
 function PlanWaitingBadges({
   annotations,
   supersededAnnotations,
@@ -9792,13 +10059,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 +10179,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 }
     ]
@@ -10582,7 +10844,9 @@ function AnnotationToolbar({
         "div",
         {
           id: "devtools-toolbar",
-          style: __spreadProps(__spreadValues({}, toolbarStyle), { overflow: "visible" }),
+          style: __spreadProps(__spreadValues({}, toolbarStyle), { overflow: "visible", opacity: 0.5, transition: "opacity 150ms ease" }),
+          onMouseEnter: (e) => e.currentTarget.style.opacity = "1",
+          onMouseLeave: (e) => e.currentTarget.style.opacity = "0.5",
           children: /* @__PURE__ */ jsx12(
             "button",
             {
@@ -10951,7 +11215,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 +11224,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 +11330,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 +11437,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";
@@ -11412,13 +11731,10 @@ function ThinkingBadge({ color }) {
     /* @__PURE__ */ jsx15("span", { style: { fontSize: 11, color: "#9ca3af", fontStyle: "italic" }, children: THINKING_WORDS3[wordIndex] })
   ] });
 }
-function formatToolStep(events) {
+function formatToolEvent(event) {
   var _a;
-  const toolEvents = events.filter((e) => e.type === "tool_use");
-  if (toolEvents.length === 0) return null;
-  const last = toolEvents[toolEvents.length - 1];
-  const tool = String(last.data.tool || "");
-  const file = last.data.file ? String(last.data.file) : null;
+  const tool = String(event.data.tool || "");
+  const file = event.data.file ? String(event.data.file) : null;
   const basename = file ? (_a = file.split("/").pop()) != null ? _a : file : null;
   switch (tool) {
     case "Read":
@@ -11441,6 +11757,34 @@ function formatToolStep(events) {
       return tool ? `Using ${tool}` : null;
   }
 }
+function buildStreamSegments(events) {
+  const segments = [];
+  for (const e of events) {
+    if (e.type === "tool_use") {
+      const label = formatToolEvent(e);
+      if (label) segments.push({ kind: "tool", label });
+    } else if (e.type === "delta") {
+      const text = String(e.data.text || "");
+      if (!text) continue;
+      const last = segments[segments.length - 1];
+      if (last && last.kind === "text") {
+        last.text += text;
+      } else {
+        segments.push({ kind: "text", text });
+      }
+    } else if (e.type === "thinking") {
+      const text = String(e.data.text || "");
+      if (!text) continue;
+      const last = segments[segments.length - 1];
+      if (last && last.kind === "thinking") {
+        last.text += text;
+      } else {
+        segments.push({ kind: "thinking", text });
+      }
+    }
+  }
+  return segments;
+}
 function ThreadPanel({
   threadId,
   bridgeUrl,
@@ -11462,10 +11806,11 @@ function ThreadPanel({
   const [messages, setMessages] = useState15([]);
   const [loading, setLoading] = useState15(true);
   const [replyText, setReplyText] = useState15("");
+  const [replyImages, setReplyImages] = useState15([]);
   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 : []);
@@ -11482,11 +11827,12 @@ function ThreadPanel({
     }
     prevStreamingRef.current = isStreaming;
   }, [isStreaming, fetchThread]);
+  const streamSegments = streamingEvents ? buildStreamSegments(streamingEvents) : [];
   useEffect19(() => {
     if (scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
-  }, [messages, streamingResponse, streamingThinking, isStreaming]);
+  }, [messages, streamSegments.length, isStreaming]);
   useEffect19(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape") onClose();
@@ -11494,27 +11840,41 @@ 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();
+    const images = replyImages.length > 0 ? replyImages : void 0;
     setMessages((prev) => [...prev, {
       role: "human",
       timestamp: Date.now(),
       jobId: "pending",
-      replyToQuestion: text
+      replyToQuestion: images ? `${text} [${images.length} image${images.length > 1 ? "s" : ""}]` : text
     }]);
-    onReply(threadId, text);
+    onReply(threadId, text, images);
     setReplyText("");
-  }, [replyText, threadId, onReply]);
-  const handleKeyDown = useCallback7((e) => {
+    setReplyImages([]);
+  }, [replyText, replyImages, threadId, onReply]);
+  const handlePaste = useCallback8((e) => {
+    const items = e.clipboardData.items;
+    const imageBlobs = [];
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item.type.startsWith("image/")) {
+        const file = item.getAsFile();
+        if (file) imageBlobs.push(file);
+      }
+    }
+    if (imageBlobs.length > 0) {
+      e.preventDefault();
+      setReplyImages((prev) => [...prev, ...imageBlobs]);
+    }
+  }, []);
+  const handleKeyDown = useCallback8((e) => {
     if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
       e.preventDefault();
       handleSubmit();
     }
   }, [handleSubmit]);
-  const toolStep = streamingEvents ? formatToolStep(streamingEvents) : null;
-  const thinkingText = streamingThinking || "";
-  const responseText = streamingResponse ? stripInternalTags(streamingResponse) : "";
   return /* @__PURE__ */ jsxs12(Fragment10, { children: [
     /* @__PURE__ */ jsx15(
       "div",
@@ -11562,7 +11922,9 @@ function ThreadPanel({
               const isHuman = msg.role === "human";
               const text = isHuman ? msg.replyToQuestion || msg.feedbackSummary || "(annotation)" : stripInternalTags(msg.responseText || "");
               const questionText = !isHuman ? msg.question : void 0;
-              if (!text && !questionText) return null;
+              const hasResolutions = !isHuman && msg.resolutions && msg.resolutions.length > 0;
+              const hasToolsUsed = !isHuman && msg.toolsUsed && msg.toolsUsed.length > 0;
+              if (!text && !questionText && !hasResolutions) return null;
               const isLatest = i === messages.length - 1;
               return /* @__PURE__ */ jsxs12(
                 "div",
@@ -11595,7 +11957,21 @@ function ThreadPanel({
                       marginTop: text ? 4 : 0,
                       lineHeight: 1.5,
                       wordBreak: "break-word"
-                    }, children: renderMarkdown(questionText) })
+                    }, children: renderMarkdown(questionText) }),
+                    (hasToolsUsed || hasResolutions) && /* @__PURE__ */ jsxs12("div", { style: {
+                      marginTop: text || questionText ? 6 : 0,
+                      padding: "4px 8px",
+                      backgroundColor: "rgba(0, 0, 0, 0.03)",
+                      fontSize: 11,
+                      lineHeight: 1.5,
+                      color: "#6b7280"
+                    }, children: [
+                      hasToolsUsed && /* @__PURE__ */ jsx15("div", { style: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 10 }, children: msg.toolsUsed.map((t, j) => /* @__PURE__ */ jsx15("div", { children: t }, j)) }),
+                      hasResolutions && msg.resolutions.map((r, j) => /* @__PURE__ */ jsxs12("div", { style: { marginTop: hasToolsUsed ? 4 : 0 }, children: [
+                        /* @__PURE__ */ jsx15("span", { style: { color: r.status === "resolved" ? "#10b981" : "#f59e0b" }, children: r.status === "resolved" ? "Done" : "Needs review" }),
+                        r.summary ? ` \u2014 ${r.summary}` : ""
+                      ] }, j))
+                    ] })
                   ]
                 },
                 `${msg.jobId}-${i}`
@@ -11692,39 +12068,102 @@ function ThreadPanel({
                 /* @__PURE__ */ jsx15("span", { style: { fontWeight: 600, fontSize: 11, color: "#6b7280" }, children: "Claude Code" }),
                 /* @__PURE__ */ jsx15("span", { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx15(ThinkingBadge, { color: accentColor }) })
               ] }),
-              toolStep && /* @__PURE__ */ jsx15("div", { style: {
-                paddingLeft: 12,
-                marginBottom: 4,
-                fontSize: 11,
-                color: "#9ca3af",
-                fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
-              }, children: toolStep }),
-              thinkingText && /* @__PURE__ */ jsx15("div", { style: {
-                paddingLeft: 12,
-                marginBottom: 4,
-                fontSize: 11,
-                color: "#9ca3af",
-                fontStyle: "italic",
-                lineHeight: 1.4,
-                whiteSpace: "pre-wrap",
-                wordBreak: "break-word",
-                maxHeight: 120,
-                overflowY: "auto"
-              }, children: thinkingText }),
-              responseText && /* @__PURE__ */ jsx15("div", { style: {
-                paddingLeft: 12,
-                lineHeight: 1.5,
-                wordBreak: "break-word"
-              }, children: renderMarkdown(responseText) })
+              streamSegments.map((seg, i) => {
+                if (seg.kind === "tool") {
+                  return /* @__PURE__ */ jsx15(
+                    "div",
+                    {
+                      style: {
+                        paddingLeft: 12,
+                        fontSize: 11,
+                        color: "#9ca3af",
+                        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+                        lineHeight: 1.6
+                      },
+                      children: seg.label
+                    },
+                    i
+                  );
+                }
+                if (seg.kind === "thinking") {
+                  return /* @__PURE__ */ jsx15(
+                    "div",
+                    {
+                      style: {
+                        paddingLeft: 12,
+                        marginTop: 2,
+                        marginBottom: 2,
+                        fontSize: 11,
+                        color: "#9ca3af",
+                        fontStyle: "italic",
+                        lineHeight: 1.4,
+                        whiteSpace: "pre-wrap",
+                        wordBreak: "break-word",
+                        maxHeight: 80,
+                        overflowY: "auto"
+                      },
+                      children: seg.text
+                    },
+                    i
+                  );
+                }
+                const stripped = stripInternalTags(seg.text);
+                if (!stripped) return null;
+                return /* @__PURE__ */ jsx15(
+                  "div",
+                  {
+                    style: {
+                      paddingLeft: 12,
+                      marginTop: 2,
+                      marginBottom: 2,
+                      lineHeight: 1.5,
+                      wordBreak: "break-word"
+                    },
+                    children: renderMarkdown(stripped)
+                  },
+                  i
+                );
+              })
             ] })
           ] }),
           onReply && /* @__PURE__ */ jsxs12("div", { style: replyAreaStyle, children: [
+            replyImages.length > 0 && /* @__PURE__ */ jsxs12("div", { style: {
+              fontSize: 11,
+              color: "#6b7280",
+              marginBottom: 4,
+              display: "flex",
+              alignItems: "center",
+              gap: 4
+            }, children: [
+              /* @__PURE__ */ jsxs12("span", { children: [
+                replyImages.length,
+                " image",
+                replyImages.length > 1 ? "s" : "",
+                " attached"
+              ] }),
+              /* @__PURE__ */ jsx15(
+                "button",
+                {
+                  onClick: () => setReplyImages([]),
+                  style: {
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    fontSize: 11,
+                    color: "#9ca3af",
+                    padding: "0 2px"
+                  },
+                  children: "\xD7"
+                }
+              )
+            ] }),
             /* @__PURE__ */ jsx15(
               "textarea",
               {
                 value: replyText,
                 onChange: (e) => setReplyText(e.target.value),
                 onKeyDown: handleKeyDown,
+                onPaste: handlePaste,
                 placeholder: "Reply... (Cmd+Enter to send)",
                 style: {
                   width: "100%",
@@ -11782,6 +12221,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) {
@@ -11797,6 +12237,7 @@ function PopmeltProvider({
   var _a, _b, _c, _d, _e;
   const [state, dispatch] = useAnnotationState();
   const bridge = useBridgeConnection(bridgeUrl);
+  const annotationImagesRef = useRef10(/* @__PURE__ */ new Map());
   const [provider, setProvider] = useState16(() => {
     if (typeof window === "undefined") return "claude";
     return localStorage.getItem(PROVIDER_STORAGE_KEY) || "claude";
@@ -11826,7 +12267,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 +12275,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 +12467,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 +12478,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 +12526,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 +12571,11 @@ function PopmeltProvider({
       }
     }
   }, [activePlan == null ? void 0 : activePlan.planId, state.activeColor, dispatch]);
-  const handleSendToClaude = useCallback8(async () => {
+  const handleAttachImages = useCallback9((annotationId, images) => {
+    const existing = annotationImagesRef.current.get(annotationId) || [];
+    annotationImagesRef.current.set(annotationId, [...existing, ...images]);
+  }, []);
+  const handleSendToClaude = useCallback9(async () => {
     const canvas = document.getElementById("devtools-canvas");
     if (!canvas) return false;
     const activeAnnotations = state.annotations.filter((a) => {
@@ -12146,9 +12591,37 @@ function PopmeltProvider({
     if (!stitchedBlob) return false;
     const feedbackData = buildFeedbackData(activeAnnotations, state.styleModifications);
     const feedbackJson = JSON.stringify(feedbackData);
+    const pastedImages = /* @__PURE__ */ new Map();
+    for (const ann of activeAnnotations) {
+      const blobs2 = annotationImagesRef.current.get(ann.id);
+      if (blobs2 && blobs2.length > 0) {
+        pastedImages.set(ann.id, blobs2);
+      }
+      if (ann.groupId) {
+        for (const mate of activeAnnotations) {
+          if (mate.groupId === ann.groupId && mate.id !== ann.id) {
+            const mateBlobs = annotationImagesRef.current.get(mate.id);
+            if (mateBlobs && mateBlobs.length > 0) {
+              pastedImages.set(mate.id, mateBlobs);
+            }
+          }
+        }
+      }
+    }
     try {
       const hexColor = cssColorToHex(state.activeColor);
-      const { jobId, threadId: assignedThreadId } = await sendToBridge(stitchedBlob, feedbackJson, bridgeUrl, hexColor, provider, currentModel.id);
+      const { jobId, threadId: assignedThreadId } = await sendToBridge(
+        stitchedBlob,
+        feedbackJson,
+        bridgeUrl,
+        hexColor,
+        provider,
+        currentModel.id,
+        pastedImages.size > 0 ? pastedImages : void 0
+      );
+      for (const annId of pastedImages.keys()) {
+        annotationImagesRef.current.delete(annId);
+      }
       const sentAnnotationIds = activeAnnotations.map((a) => a.id);
       const sentStyleSelectors = state.styleModifications.filter((m) => !m.captured).map((m) => m.selector);
       setInFlightJobs((prev) => __spreadProps(__spreadValues({}, prev), {
@@ -12160,6 +12633,9 @@ function PopmeltProvider({
         }
       }));
       dispatch({ type: "MARK_CAPTURED" });
+      if (assignedThreadId && sentAnnotationIds.length > 0) {
+        dispatch({ type: "SET_ANNOTATION_THREAD", payload: { ids: sentAnnotationIds, threadId: assignedThreadId } });
+      }
       const hueMatch = state.activeColor.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);
       const currentHue = (hueMatch == null ? void 0 : hueMatch[1]) ? parseFloat(hueMatch[1]) : 29;
       const nextHue = (currentHue + 60) % 360;
@@ -12170,10 +12646,10 @@ 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, images) => {
     try {
       const hexColor = cssColorToHex(state.activeColor);
-      const { jobId } = await sendReplyToBridge(threadId, reply, bridgeUrl, hexColor, provider, currentModel.id);
+      const { jobId } = await sendReplyToBridge(threadId, reply, bridgeUrl, hexColor, provider, currentModel.id, images);
       setInFlightJobs((prev) => __spreadProps(__spreadValues({}, prev), {
         [jobId]: {
           annotationIds: [],
@@ -12205,7 +12681,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 +12754,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 +12852,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 +12865,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 +12879,7 @@ function PopmeltProvider({
       }, 150);
     }
   }, []);
-  const handleClearEventStream = useCallback8(() => {
+  const handleClearEventStream = useCallback9(() => {
     setClearSignal((s) => s + 1);
     bridge.clearEvents();
   }, [bridge.clearEvents]);
@@ -12430,9 +12906,9 @@ function PopmeltProvider({
         inFlightAnnotationIds,
         inFlightStyleSelectors,
         inFlightSelectorColors,
+        onAttachImages: handleAttachImages,
         onReply: bridge.isConnected ? handleReply : void 0,
         onViewThread: bridge.isConnected ? handleViewThread : void 0,
-        isThreadPanelOpen: openThreadId !== null,
         activePlan
       }
     ),