made-refine 0.1.1-beta.1 → 0.1.1

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { D as DragState, a as DropIndicator, b as DirectEditState, S as SpacingPropertyKey, C as CSSPropertyValue, B as BorderRadiusPropertyKey, c as BorderPropertyKey, d as BorderProperties, F as FlexPropertyKey, e as SizingPropertyKey, f as SizingValue, g as ColorPropertyKey, h as ColorValue, T as TypographyPropertyKey, A as ActiveTool, i as Theme, j as SessionEdit, k as TypographyProperties, M as MeasurementLine, G as Guideline, l as Comment } from './utils-DNTIJ83m.mjs';
-export { m as BorderRadiusProperties, n as BorderStyle, o as ColorProperties, p as CommentReply, q as DomSourceLocation, r as DropTarget, E as ElementInfo, s as ElementLocator, t as FlexProperties, u as MeasurementState, R as ReactComponentFrame, v as SizingMode, w as SizingProperties, x as SpacingProperties, U as UndoEditEntry, y as UndoEntry, z as UndoMoveEntry, H as UndoSelectionEntry, I as buildCommentExport, J as buildSessionExport, K as calculateDropPosition, L as calculateElementMeasurements, N as calculateGuidelineMeasurements, O as calculateParentMeasurements, P as colorToTailwind, Q as elementFromPointWithoutOverlays, V as findContainerAtPoint, W as formatPropertyValue, X as getComputedBorderStyles, Y as getComputedColorStyles, Z as getComputedStyles, _ as getDimensionDisplay, $ as getElementInfo, a0 as getElementLocator, a1 as getFlexDirection, a2 as isFlexContainer, a3 as parseColorValue, a4 as parsePropertyValue, a5 as stylesToTailwind } from './utils-DNTIJ83m.mjs';
+import { D as DragState, a as DropIndicator, b as DirectEditState, S as SpacingPropertyKey, C as CSSPropertyValue, B as BorderRadiusPropertyKey, c as BorderPropertyKey, d as BorderProperties, F as FlexPropertyKey, e as SizingPropertyKey, f as SizingValue, g as ColorPropertyKey, h as ColorValue, T as TypographyPropertyKey, A as ActiveTool, i as Theme, j as SessionEdit, k as TypographyProperties, M as MeasurementLine, G as Guideline, l as Comment } from './utils-DyR599SI.mjs';
+export { m as BorderRadiusProperties, n as BorderStyle, o as ColorProperties, p as CommentReply, q as DomSourceLocation, r as DropTarget, E as ElementInfo, s as ElementLocator, t as FlexProperties, u as MeasurementState, R as ReactComponentFrame, v as SizingMode, w as SizingProperties, x as SpacingProperties, U as UndoEditEntry, y as UndoEntry, z as UndoMoveEntry, H as UndoSelectionEntry, I as buildCommentExport, J as buildSessionExport, K as calculateDropPosition, L as calculateElementMeasurements, N as calculateGuidelineMeasurements, O as calculateParentMeasurements, P as colorToTailwind, Q as elementFromPointWithoutOverlays, V as findContainerAtPoint, W as formatPropertyValue, X as getComputedBorderStyles, Y as getComputedColorStyles, Z as getComputedStyles, _ as getDimensionDisplay, $ as getElementInfo, a0 as getElementLocator, a1 as getFlexDirection, a2 as isFlexContainer, a3 as parseColorValue, a4 as parsePropertyValue, a5 as stylesToTailwind } from './utils-DyR599SI.mjs';
 
 declare function DirectEdit(): react_jsx_runtime.JSX.Element;
 
@@ -190,9 +190,11 @@ interface SelectionOverlayProps {
     };
     onMoveStart: (e: React.PointerEvent) => void;
     isTextEditing?: boolean;
-    onDoubleClick?: () => void;
+    onDoubleClick?: (clientX: number, clientY: number) => void;
+    onHoverElement?: (element: HTMLElement | null) => void;
+    onClickThrough?: (clientX: number, clientY: number) => void;
 }
-declare function SelectionOverlay({ selectedElement, isDragging, ghostPosition, onMoveStart, isTextEditing, onDoubleClick, }: SelectionOverlayProps): react_jsx_runtime.JSX.Element;
+declare function SelectionOverlay({ selectedElement, isDragging, ghostPosition, onMoveStart, isTextEditing, onDoubleClick, onHoverElement, onClickThrough, }: SelectionOverlayProps): react_jsx_runtime.JSX.Element;
 
 interface MoveOverlayProps {
     dropIndicator: DropIndicator | null;
@@ -220,7 +222,7 @@ interface UseGuidelinesResult {
     clearAll: () => void;
 }
 declare function getStoredGuidelines(): Guideline[];
-declare function useGuidelines(enabled: boolean): UseGuidelinesResult;
+declare function useGuidelines(enabled: boolean, hostElement?: HTMLElement | null): UseGuidelinesResult;
 
 interface CommentOverlayProps {
     comments: Comment[];

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { D as DragState, a as DropIndicator, b as DirectEditState, S as SpacingPropertyKey, C as CSSPropertyValue, B as BorderRadiusPropertyKey, c as BorderPropertyKey, d as BorderProperties, F as FlexPropertyKey, e as SizingPropertyKey, f as SizingValue, g as ColorPropertyKey, h as ColorValue, T as TypographyPropertyKey, A as ActiveTool, i as Theme, j as SessionEdit, k as TypographyProperties, M as MeasurementLine, G as Guideline, l as Comment } from './utils-DNTIJ83m.js';
-export { m as BorderRadiusProperties, n as BorderStyle, o as ColorProperties, p as CommentReply, q as DomSourceLocation, r as DropTarget, E as ElementInfo, s as ElementLocator, t as FlexProperties, u as MeasurementState, R as ReactComponentFrame, v as SizingMode, w as SizingProperties, x as SpacingProperties, U as UndoEditEntry, y as UndoEntry, z as UndoMoveEntry, H as UndoSelectionEntry, I as buildCommentExport, J as buildSessionExport, K as calculateDropPosition, L as calculateElementMeasurements, N as calculateGuidelineMeasurements, O as calculateParentMeasurements, P as colorToTailwind, Q as elementFromPointWithoutOverlays, V as findContainerAtPoint, W as formatPropertyValue, X as getComputedBorderStyles, Y as getComputedColorStyles, Z as getComputedStyles, _ as getDimensionDisplay, $ as getElementInfo, a0 as getElementLocator, a1 as getFlexDirection, a2 as isFlexContainer, a3 as parseColorValue, a4 as parsePropertyValue, a5 as stylesToTailwind } from './utils-DNTIJ83m.js';
+import { D as DragState, a as DropIndicator, b as DirectEditState, S as SpacingPropertyKey, C as CSSPropertyValue, B as BorderRadiusPropertyKey, c as BorderPropertyKey, d as BorderProperties, F as FlexPropertyKey, e as SizingPropertyKey, f as SizingValue, g as ColorPropertyKey, h as ColorValue, T as TypographyPropertyKey, A as ActiveTool, i as Theme, j as SessionEdit, k as TypographyProperties, M as MeasurementLine, G as Guideline, l as Comment } from './utils-DyR599SI.js';
+export { m as BorderRadiusProperties, n as BorderStyle, o as ColorProperties, p as CommentReply, q as DomSourceLocation, r as DropTarget, E as ElementInfo, s as ElementLocator, t as FlexProperties, u as MeasurementState, R as ReactComponentFrame, v as SizingMode, w as SizingProperties, x as SpacingProperties, U as UndoEditEntry, y as UndoEntry, z as UndoMoveEntry, H as UndoSelectionEntry, I as buildCommentExport, J as buildSessionExport, K as calculateDropPosition, L as calculateElementMeasurements, N as calculateGuidelineMeasurements, O as calculateParentMeasurements, P as colorToTailwind, Q as elementFromPointWithoutOverlays, V as findContainerAtPoint, W as formatPropertyValue, X as getComputedBorderStyles, Y as getComputedColorStyles, Z as getComputedStyles, _ as getDimensionDisplay, $ as getElementInfo, a0 as getElementLocator, a1 as getFlexDirection, a2 as isFlexContainer, a3 as parseColorValue, a4 as parsePropertyValue, a5 as stylesToTailwind } from './utils-DyR599SI.js';
 
 declare function DirectEdit(): react_jsx_runtime.JSX.Element;
 
@@ -190,9 +190,11 @@ interface SelectionOverlayProps {
     };
     onMoveStart: (e: React.PointerEvent) => void;
     isTextEditing?: boolean;
-    onDoubleClick?: () => void;
+    onDoubleClick?: (clientX: number, clientY: number) => void;
+    onHoverElement?: (element: HTMLElement | null) => void;
+    onClickThrough?: (clientX: number, clientY: number) => void;
 }
-declare function SelectionOverlay({ selectedElement, isDragging, ghostPosition, onMoveStart, isTextEditing, onDoubleClick, }: SelectionOverlayProps): react_jsx_runtime.JSX.Element;
+declare function SelectionOverlay({ selectedElement, isDragging, ghostPosition, onMoveStart, isTextEditing, onDoubleClick, onHoverElement, onClickThrough, }: SelectionOverlayProps): react_jsx_runtime.JSX.Element;
 
 interface MoveOverlayProps {
     dropIndicator: DropIndicator | null;
@@ -220,7 +222,7 @@ interface UseGuidelinesResult {
     clearAll: () => void;
 }
 declare function getStoredGuidelines(): Guideline[];
-declare function useGuidelines(enabled: boolean): UseGuidelinesResult;
+declare function useGuidelines(enabled: boolean, hostElement?: HTMLElement | null): UseGuidelinesResult;
 
 interface CommentOverlayProps {
     comments: Comment[];

package/dist/index.js

@@ -590,11 +590,19 @@ var TEXT_ELEMENT_TAGS = /* @__PURE__ */ new Set([
   "code",
   "pre"
 ]);
+function hasDirectNonWhitespaceText(element) {
+  return Array.from(element.childNodes).some(
+    (node) => node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim())
+  );
+}
 function isTextElement(element) {
   const tagName = element.tagName.toLowerCase();
   if (TEXT_ELEMENT_TAGS.has(tagName)) {
     return true;
   }
+  if (hasDirectNonWhitespaceText(element)) {
+    return true;
+  }
   if (element.children.length === 0 && element.textContent?.trim()) {
     return true;
   }
@@ -1139,6 +1147,57 @@ function detectChildrenDirection(container, exclude) {
   }
   return { axis: "vertical", reversed: second.bottom < first.top };
 }
+function htmlChildren(el) {
+  return Array.from(el.children).filter(
+    (child) => child instanceof HTMLElement
+  );
+}
+function findFlexAncestor(element, boundary) {
+  let current = element;
+  while (current && current !== document.body) {
+    const parent = current.parentElement;
+    if (!parent) break;
+    const display = getComputedStyle(parent).display;
+    if (display === "flex" || display === "inline-flex") {
+      return { flexParent: parent, child: current };
+    }
+    if (boundary && parent === boundary) break;
+    current = parent;
+  }
+  return null;
+}
+function computeHoverHighlight(elementUnder, selectedElement) {
+  if (!elementUnder || elementUnder === document.body || elementUnder === document.documentElement || elementUnder.closest("[data-direct-edit]") || elementUnder.closest("[data-direct-edit-host]") || elementUnder === selectedElement) {
+    return null;
+  }
+  const boundary = selectedElement?.contains(elementUnder) ? selectedElement : null;
+  const ownDisplay = getComputedStyle(elementUnder).display;
+  if (ownDisplay === "flex" || ownDisplay === "inline-flex") {
+    return { flexContainer: elementUnder, children: htmlChildren(elementUnder) };
+  }
+  const found = findFlexAncestor(elementUnder, boundary);
+  if (found) {
+    return { flexContainer: found.flexParent, children: htmlChildren(found.flexParent) };
+  }
+  return { flexContainer: elementUnder, children: [] };
+}
+function resolveElementTarget(elementUnder, selectedElement) {
+  const boundary = selectedElement?.contains(elementUnder) ? selectedElement : null;
+  const found = findFlexAncestor(elementUnder, boundary);
+  if (found && found.flexParent === boundary) return elementUnder;
+  return found?.child ?? elementUnder;
+}
+function findChildAtPoint(parent, clientX, clientY) {
+  const children = htmlChildren(parent);
+  if (children.length === 0) return null;
+  const hit = children.find((child) => {
+    const r = child.getBoundingClientRect();
+    return clientX >= r.left && clientX <= r.right && clientY >= r.top && clientY <= r.bottom;
+  });
+  if (hit) return hit;
+  if (children.length === 1 && !hasDirectNonWhitespaceText(parent)) return children[0];
+  return null;
+}
 function elementFromPointWithoutOverlays(x, y) {
   const host = document.querySelector("[data-direct-edit-host]");
   if (host) host.style.display = "none";
@@ -2050,6 +2109,8 @@ ${context}`).catch(() => {
     const previousText = existing?.textEdit?.newText ?? originalText;
     editingElement.removeAttribute("contenteditable");
     editingElement.removeAttribute("data-direct-edit-original-text");
+    editingElement.style.outline = "";
+    editingElement.style.outlineOffset = "";
     editingElement.blur();
     if (newText !== previousText) {
       pushUndo({ type: "textEdit", element: editingElement, originalText, previousText });
@@ -2674,6 +2735,8 @@ ${exportMarkdown}`);
     const originalText = existing?.textEdit?.originalText ?? (element.textContent ?? "");
     element.setAttribute("data-direct-edit-original-text", originalText);
     element.setAttribute("contenteditable", "true");
+    element.style.outline = "1px solid #0D99FF";
+    element.style.outlineOffset = "0px";
     element.focus();
     const selection = window.getSelection();
     if (selection) {
@@ -3900,27 +3963,42 @@ function generateId() {
   return `gl-${Date.now()}-${idCounter++}`;
 }
 var RULER_SIZE = 20;
-function useGuidelines(enabled) {
-  const [guidelines, setGuidelines] = React11.useState(loadGuidelines);
+function viewportToCssCoord(hostElement, value, axis) {
+  if (!hostElement) return value;
+  const rect = hostElement.getBoundingClientRect();
+  const origin = axis === "x" ? rect.left : rect.top;
+  const size = axis === "x" ? rect.width : rect.height;
+  const cssSize = axis === "x" ? hostElement.offsetWidth : hostElement.offsetHeight;
+  if (size === 0) return value;
+  return (value - origin) * (cssSize / size);
+}
+function useGuidelines(enabled, hostElement) {
+  const [guidelines, setGuidelines] = React11.useState([]);
+  const [hydrated, setHydrated] = React11.useState(false);
   const [activeGuidelineId, setActiveGuidelineId] = React11.useState(null);
   const [dragPosition, setDragPosition] = React11.useState(null);
   const [isCreating, setIsCreating] = React11.useState(false);
-  const [scrollOffset, setScrollOffset] = React11.useState({
-    x: typeof window !== "undefined" ? window.scrollX : 0,
-    y: typeof window !== "undefined" ? window.scrollY : 0
-  });
+  const [scrollOffset, setScrollOffset] = React11.useState({ x: 0, y: 0 });
+  const hostRef = React11.useRef(hostElement ?? null);
+  hostRef.current = hostElement ?? null;
   const [dragging, setDragging] = React11.useState(false);
   const guidelinesRef = React11.useRef(guidelines);
   guidelinesRef.current = guidelines;
   const dragInfoRef = React11.useRef(null);
   React11.useEffect(() => {
+    setGuidelines(loadGuidelines());
+    setHydrated(true);
+  }, []);
+  React11.useEffect(() => {
+    if (!hydrated) return;
     saveGuidelines(guidelines);
-  }, [guidelines]);
+  }, [guidelines, hydrated]);
   React11.useEffect(() => {
     if (!enabled) return;
     function update() {
       setScrollOffset({ x: window.scrollX, y: window.scrollY });
     }
+    update();
     window.addEventListener("scroll", update, true);
     window.addEventListener("resize", update);
     return () => {
@@ -3941,8 +4019,13 @@ function useGuidelines(enabled) {
     const info = dragInfoRef.current;
     if (!info) return;
     const { guidelineId, orientation } = info;
+    const axis = orientation === "horizontal" ? "y" : "x";
+    function pointerToPos(e) {
+      const raw = orientation === "horizontal" ? e.clientY : e.clientX;
+      return viewportToCssCoord(hostRef.current, raw, axis);
+    }
     function onPointerMove(e) {
-      const pos = orientation === "horizontal" ? e.clientY : e.clientX;
+      const pos = pointerToPos(e);
       setDragPosition(pos);
       const currentScroll = orientation === "horizontal" ? window.scrollY : window.scrollX;
       setGuidelines(
@@ -3950,7 +4033,7 @@ function useGuidelines(enabled) {
       );
     }
     function onPointerUp(e) {
-      const pos = orientation === "horizontal" ? e.clientY : e.clientX;
+      const pos = pointerToPos(e);
       if (pos <= RULER_SIZE) {
         setGuidelines((prev) => prev.filter((g) => g.id !== guidelineId));
       }
@@ -3974,12 +4057,14 @@ function useGuidelines(enabled) {
   );
   const startCreate = React11.useCallback(
     (orientation, viewportPosition) => {
+      const axis = orientation === "horizontal" ? "y" : "x";
+      const pos = viewportToCssCoord(hostRef.current, viewportPosition, axis);
       const scrollPos = orientation === "horizontal" ? window.scrollY : window.scrollX;
       const id = generateId();
-      const newGuideline = { id, orientation, position: viewportPosition + scrollPos };
+      const newGuideline = { id, orientation, position: pos + scrollPos };
       setGuidelines((prev) => [...prev, newGuideline]);
       setActiveGuidelineId(id);
-      setDragPosition(viewportPosition);
+      setDragPosition(pos);
       setIsCreating(true);
       dragInfoRef.current = { guidelineId: id, orientation, isCreating: true };
       setDragging(true);
@@ -4052,16 +4137,20 @@ var React12 = __toESM(require("react"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var BLUE3 = "#0D99FF";
 var DRAG_THRESHOLD = 4;
+var DBLCLICK_DELAY = 300;
 function SelectionOverlay({
   selectedElement,
   isDragging,
   ghostPosition,
   onMoveStart,
   isTextEditing,
-  onDoubleClick
+  onDoubleClick,
+  onHoverElement,
+  onClickThrough
 }) {
   const [rect, setRect] = React12.useState(() => selectedElement.getBoundingClientRect());
   const cleanupRef = React12.useRef(null);
+  const clickThroughTimerRef = React12.useRef(null);
   React12.useEffect(() => {
     function updateRect() {
       setRect(selectedElement.getBoundingClientRect());
@@ -4084,11 +4173,17 @@ function SelectionOverlay({
   React12.useEffect(() => {
     return () => {
       cleanupRef.current?.();
+      if (clickThroughTimerRef.current) clearTimeout(clickThroughTimerRef.current);
     };
   }, []);
   const handlePointerDown = (e) => {
+    if (e.button !== 0) return;
     e.stopPropagation();
     cleanupRef.current?.();
+    if (clickThroughTimerRef.current) {
+      clearTimeout(clickThroughTimerRef.current);
+      clickThroughTimerRef.current = null;
+    }
     const origin = { x: e.clientX, y: e.clientY };
     const savedEvent = e;
     const onMove = (moveEvent) => {
@@ -4099,8 +4194,15 @@ function SelectionOverlay({
         onMoveStart(savedEvent);
       }
     };
-    const onUp = () => {
+    const onUp = (upEvent) => {
       cleanup();
+      if (onClickThrough) {
+        const { clientX, clientY } = upEvent;
+        clickThroughTimerRef.current = setTimeout(() => {
+          clickThroughTimerRef.current = null;
+          onClickThrough(clientX, clientY);
+        }, DBLCLICK_DELAY);
+      }
     };
     const cleanup = () => {
       window.removeEventListener("pointermove", onMove);
@@ -4115,7 +4217,19 @@ function SelectionOverlay({
     e.preventDefault();
     e.stopPropagation();
     cleanupRef.current?.();
-    onDoubleClick?.();
+    if (clickThroughTimerRef.current) {
+      clearTimeout(clickThroughTimerRef.current);
+      clickThroughTimerRef.current = null;
+    }
+    onDoubleClick?.(e.clientX, e.clientY);
+  };
+  const handleMouseMove = (e) => {
+    if (!onHoverElement) return;
+    const elementUnder = elementFromPointWithoutOverlays(e.clientX, e.clientY);
+    onHoverElement(elementUnder);
+  };
+  const handleMouseLeave = () => {
+    onHoverElement?.(null);
   };
   const displayX = isDragging && ghostPosition ? ghostPosition.x : rect.left;
   const displayY = isDragging && ghostPosition ? ghostPosition.y : rect.top;
@@ -4132,7 +4246,7 @@ function SelectionOverlay({
           pointerEvents: "none",
           zIndex: 99996
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        children: !isTextEditing && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "rect",
           {
             x: displayX,
@@ -4141,7 +4255,7 @@ function SelectionOverlay({
             height: rect.height,
             fill: "transparent",
             stroke: BLUE3,
-            strokeWidth: 2
+            strokeWidth: 1
           }
         )
       }
@@ -4161,7 +4275,9 @@ function SelectionOverlay({
           pointerEvents: "auto"
         },
         onPointerDown: handlePointerDown,
-        onDoubleClick: handleDoubleClick
+        onDoubleClick: handleDoubleClick,
+        onMouseMove: handleMouseMove,
+        onMouseLeave: handleMouseLeave
       }
     )
   ] });
@@ -6145,69 +6261,18 @@ function DirectEditPanelContent() {
           onDoubleClick: (e) => {
             e.preventDefault();
             if (activeTool !== "select") return;
-            const el = e.currentTarget;
-            el.style.pointerEvents = "none";
-            const elementUnder = document.elementFromPoint(e.clientX, e.clientY);
-            el.style.pointerEvents = textEditingElement ? "none" : "auto";
+            const elementUnder = elementFromPointWithoutOverlays(e.clientX, e.clientY);
             if (elementUnder && elementUnder !== document.body && elementUnder !== document.documentElement) {
-              let resolvedElement = elementUnder;
-              let current = elementUnder;
-              while (current && current !== document.body) {
-                const parent = current.parentElement;
-                if (parent) {
-                  const display = getComputedStyle(parent).display;
-                  if (display === "flex" || display === "inline-flex") {
-                    resolvedElement = current;
-                    break;
-                  }
-                }
-                current = parent;
-              }
-              if (isTextElement(resolvedElement)) {
-                if (selectedElement !== resolvedElement) {
-                  selectElement(resolvedElement);
-                }
-                startTextEditing(resolvedElement);
+              const resolved = resolveElementTarget(elementUnder, selectedElement);
+              if (isTextElement(resolved)) {
+                if (selectedElement !== resolved) selectElement(resolved);
+                startTextEditing(resolved);
               }
             }
           },
           onMouseMove: (e) => {
-            const el = e.currentTarget;
-            el.style.pointerEvents = "none";
-            const elementUnder = document.elementFromPoint(e.clientX, e.clientY);
-            el.style.pointerEvents = "auto";
-            if (elementUnder && elementUnder !== document.body && elementUnder !== document.documentElement && !elementUnder.closest("[data-direct-edit]") && !elementUnder.closest("[data-direct-edit-host]") && elementUnder !== selectedElement) {
-              const ownDisplay = getComputedStyle(elementUnder).display;
-              if (ownDisplay === "flex" || ownDisplay === "inline-flex") {
-                setHoverHighlight({
-                  flexContainer: elementUnder,
-                  children: Array.from(elementUnder.children).filter(
-                    (child) => child instanceof HTMLElement
-                  )
-                });
-                return;
-              }
-              let current = elementUnder;
-              while (current && current !== document.body) {
-                const parent = current.parentElement;
-                if (parent) {
-                  const display = getComputedStyle(parent).display;
-                  if (display === "flex" || display === "inline-flex") {
-                    setHoverHighlight({
-                      flexContainer: parent,
-                      children: Array.from(parent.children).filter(
-                        (child) => child instanceof HTMLElement
-                      )
-                    });
-                    return;
-                  }
-                }
-                current = parent;
-              }
-              setHoverHighlight({ flexContainer: elementUnder, children: [] });
-            } else {
-              setHoverHighlight(null);
-            }
+            const elementUnder = elementFromPointWithoutOverlays(e.clientX, e.clientY);
+            setHoverHighlight(computeHoverHighlight(elementUnder, selectedElement));
           },
           onMouseLeave: () => setHoverHighlight(null),
           onClick: (e) => {
@@ -6217,29 +6282,11 @@ function DirectEditPanelContent() {
               setActiveCommentId(null);
               return;
             }
-            const el = e.currentTarget;
-            el.style.pointerEvents = "none";
-            const elementUnder = document.elementFromPoint(e.clientX, e.clientY);
-            el.style.pointerEvents = "auto";
+            const elementUnder = elementFromPointWithoutOverlays(e.clientX, e.clientY);
             if (elementUnder && elementUnder !== document.body && elementUnder !== document.documentElement) {
-              let resolvedElement = elementUnder;
-              let current = elementUnder;
-              while (current && current !== document.body) {
-                const parent = current.parentElement;
-                if (parent) {
-                  const display = getComputedStyle(parent).display;
-                  if (display === "flex" || display === "inline-flex") {
-                    resolvedElement = current;
-                    break;
-                  }
-                }
-                current = parent;
-              }
-              if (activeTool === "comment") {
-                addComment(resolvedElement, { x: e.clientX, y: e.clientY });
-              } else {
-                selectElement(resolvedElement);
-              }
+              const resolved = resolveElementTarget(elementUnder, selectedElement);
+              if (activeTool === "comment") addComment(resolved, { x: e.clientX, y: e.clientY });
+              else selectElement(resolved);
             }
           }
         }
@@ -6328,9 +6375,36 @@ function DirectEditPanelContent() {
           ghostPosition: dragState.ghostPosition,
           onMoveStart: handleMoveStart,
           isTextEditing: Boolean(textEditingElement),
-          onDoubleClick: () => {
-            if (selectedElement) {
+          onDoubleClick: (clientX, clientY) => {
+            if (!selectedElement) return;
+            if (isTextElement(selectedElement)) {
               startTextEditing(selectedElement);
+              return;
+            }
+            const elementUnder = elementFromPointWithoutOverlays(clientX, clientY);
+            if (elementUnder && elementUnder !== selectedElement && selectedElement.contains(elementUnder)) {
+              const resolved = resolveElementTarget(elementUnder, selectedElement);
+              if (isTextElement(resolved)) {
+                selectElement(resolved);
+                startTextEditing(resolved);
+              }
+            }
+          },
+          onHoverElement: (element) => {
+            setHoverHighlight(computeHoverHighlight(element, selectedElement));
+          },
+          onClickThrough: (clientX, clientY) => {
+            if (!selectedElement) return;
+            const elementUnder = elementFromPointWithoutOverlays(clientX, clientY);
+            if (!elementUnder) return;
+            if (elementUnder !== selectedElement && selectedElement.contains(elementUnder)) {
+              const resolved = resolveElementTarget(elementUnder, selectedElement);
+              selectElement(resolved);
+              return;
+            }
+            const child = findChildAtPoint(selectedElement, clientX, clientY);
+            if (child) {
+              selectElement(child);
             }
           }
         }
@@ -6414,11 +6488,10 @@ var RULER_SIZE2 = 20;
 var GUIDELINE_COLOR = "#FF6B6B";
 var HIT_ZONE = 9;
 function useRulerColors() {
-  const [dark, setDark] = React15.useState(
-    () => typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches
-  );
+  const [dark, setDark] = React15.useState(false);
   React15.useEffect(() => {
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    setDark(mq.matches);
     const handler = (e) => setDark(e.matches);
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);
@@ -6451,12 +6524,13 @@ function HorizontalRuler({
     const canvas = canvasRef.current;
     if (!canvas) return;
     const dpr = window.devicePixelRatio || 1;
-    const width = viewportWidth - RULER_SIZE2;
+    const width = Math.max(0, viewportWidth - RULER_SIZE2);
     const height = RULER_SIZE2;
     canvas.width = width * dpr;
     canvas.height = height * dpr;
     canvas.style.width = `${width}px`;
     canvas.style.height = `${height}px`;
+    if (width === 0) return;
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
     ctx.scale(dpr, dpr);
@@ -6515,11 +6589,12 @@ function VerticalRuler({
     if (!canvas) return;
     const dpr = window.devicePixelRatio || 1;
     const width = RULER_SIZE2;
-    const height = viewportHeight - RULER_SIZE2;
+    const height = Math.max(0, viewportHeight - RULER_SIZE2);
     canvas.width = width * dpr;
     canvas.height = height * dpr;
     canvas.style.width = `${width}px`;
     canvas.style.height = `${height}px`;
+    if (height === 0) return;
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
     ctx.scale(dpr, dpr);
@@ -6723,8 +6798,9 @@ function GuidelineLine({
   ] });
 }
 function useViewportWidth() {
-  const [width, setWidth] = React15.useState(typeof window !== "undefined" ? window.innerWidth : 0);
+  const [width, setWidth] = React15.useState(0);
   React15.useEffect(() => {
+    setWidth(window.innerWidth);
     const onResize = () => setWidth(window.innerWidth);
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
@@ -6732,8 +6808,9 @@ function useViewportWidth() {
   return width;
 }
 function useViewportHeight() {
-  const [height, setHeight] = React15.useState(typeof window !== "undefined" ? window.innerHeight : 0);
+  const [height, setHeight] = React15.useState(0);
   React15.useEffect(() => {
+    setHeight(window.innerHeight);
     const onResize = () => setHeight(window.innerHeight);
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
@@ -6742,6 +6819,12 @@ function useViewportHeight() {
 }
 function RulersOverlay({ enabled }) {
   const container = usePortalContainer();
+  const hostElement = React15.useMemo(() => {
+    if (!container) return null;
+    const root = container.getRootNode();
+    if (root instanceof ShadowRoot) return root.host;
+    return null;
+  }, [container]);
   const {
     guidelines,
     activeGuideline,
@@ -6750,7 +6833,7 @@ function RulersOverlay({ enabled }) {
     startCreate,
     startDrag,
     deleteGuideline
-  } = useGuidelines(enabled);
+  } = useGuidelines(enabled, hostElement);
   if (!enabled || !container) return null;
   const handleHorizontalPointerDown = (e) => {
     e.preventDefault();
@@ -6784,14 +6867,13 @@ function RulersOverlay({ enabled }) {
 var RULERS_VISIBLE_KEY = "direct-edit-rulers-visible";
 var RULERS_TOGGLE_EVENT = "direct-edit-rulers-toggle";
 function useRulersVisible() {
-  const [visible, setVisible] = React15.useState(() => {
-    if (typeof window === "undefined") return true;
+  const [visible, setVisible] = React15.useState(true);
+  React15.useEffect(() => {
     try {
-      return localStorage.getItem(RULERS_VISIBLE_KEY) !== "false";
+      if (localStorage.getItem(RULERS_VISIBLE_KEY) === "false") setVisible(false);
     } catch {
-      return true;
     }
-  });
+  }, []);
   React15.useEffect(() => {
     function handler(e) {
       setVisible(e.detail);
@@ -6819,6 +6901,9 @@ function Rulers() {
     if (!editModeActive) return;
     function handleKeyDown(e) {
       if (e.shiftKey && e.key === "R" && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        const active = document.activeElement;
+        const isInput = active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active instanceof HTMLElement && active.isContentEditable;
+        if (isInput) return;
         e.preventDefault();
         toggleRulers();
       }