@node-edit-utils/core 2.1.9 → 2.2.0

package/src/lib/node-tools/highlight/updateHighlightFrameVisibility.ts

@@ -1,7 +1,7 @@
 import { getHighlightFrameElement } from "./helpers/getHighlightFrameElement";
 
-export const updateHighlightFrameVisibility = (node: HTMLElement, nodeProvider: HTMLElement): void => {
-  const frame = getHighlightFrameElement(nodeProvider);
+export const updateHighlightFrameVisibility = (node: HTMLElement): void => {
+  const frame = getHighlightFrameElement();
   if (!frame) return;
 
   const hasHiddenClass = node.classList.contains("hidden") || node.classList.contains("select-none");
@@ -9,8 +9,8 @@ export const updateHighlightFrameVisibility = (node: HTMLElement, nodeProvider:
 
   frame.style.display = displayValue;
 
-  const tagLabel = frame.querySelector(".tag-label") as HTMLElement | null;
-  if (tagLabel) {
-    tagLabel.style.display = displayValue;
+  const toolsWrapper = document.body.querySelector(".highlight-frame-tools-wrapper") as HTMLElement | null;
+  if (toolsWrapper) {
+    toolsWrapper.style.display = displayValue;
   }
 };

package/src/lib/node-tools/select/helpers/isComponentInstance.ts

@@ -0,0 +1,3 @@
+export const isComponentInstance = (element: Element): boolean => {
+  return element.getAttribute("data-instance") === "true";
+};

package/src/lib/node-tools/select/helpers/isInsideComponent.ts

@@ -0,0 +1,18 @@
+export const isInsideComponent = (element: Element): boolean => {
+  let current: Element | null = element.parentElement;
+
+  while (current) {
+    if (current.getAttribute("data-instance") === "true") {
+      return true;
+    }
+
+    // Stop at node-provider to avoid checking beyond the editable area
+    if (current.getAttribute("data-role") === "node-provider") {
+      break;
+    }
+
+    current = current.parentElement;
+  }
+
+  return false;
+};

package/src/lib/node-tools/select/selectNode.ts

@@ -1,5 +1,6 @@
 import { IGNORED_DOM_ELEMENTS } from "./constants";
 import { getElementsFromPoint } from "./helpers/getElementsFromPoint";
+import { isInsideComponent } from "./helpers/isInsideComponent";
 import { targetSameCandidates } from "./helpers/targetSameCandidates";
 
 let candidateCache: Element[] = [];
@@ -14,7 +15,10 @@ export const selectNode = (event: MouseEvent, editableNode: HTMLElement | null):
   const clickThrough = event.metaKey || event.ctrlKey;
 
   const candidates = getElementsFromPoint(clickX, clickY).filter(
-    (element) => !IGNORED_DOM_ELEMENTS.includes(element.tagName.toLowerCase()) && !element.classList.contains("select-none")
+    (element) =>
+      !IGNORED_DOM_ELEMENTS.includes(element.tagName.toLowerCase()) &&
+      !element.classList.contains("select-none") &&
+      !isInsideComponent(element)
   );
 
   if (editableNode && candidates.includes(editableNode)) {

package/src/lib/post-message/processPostMessage.ts

@@ -6,8 +6,6 @@ export const processPostMessage = (event: MessageEvent, onNodeSelected?: (node:
       const nodeId = event.data.data;
       const selectedNode = document.querySelector(`[data-node-id="${nodeId}"]`) as HTMLElement | null;
 
-      console.log("selectedNode", selectedNode);
-
       if (isLocked(selectedNode)) {
         onNodeSelected?.(null);
         return;

package/src/lib/styles/styles.css

@@ -1,6 +1,7 @@
 :root {
   --primary-color: oklch(0.6235 0.22 294);
   --uncode-color: oklch(45.7% 0.24 277.023);
+  --component-color: oklch(65.6% 0.241 354.308);
 
   --handle-color: oklch(55.2% 0.016 285.938);
   --handle-color-transparent: oklch(55.2% 0.016 285.938 / 0.7);
@@ -8,6 +9,7 @@
 
   --text-color-white: white;
 
+  --spacing-2xs: 0.1875rem;
   --spacing-xs: 0.25rem;
   --spacing-sm: 0.375rem;
   --spacing-md: 0.5rem;
@@ -17,6 +19,7 @@
   --transition-medium: 0.2s ease-in-out;
 
   --z-index-high: 10000;
+  --z-index-highlight: 5000;
   --z-index-medium: 1000;
 
   --letter-spacing: 0.02em;
@@ -44,40 +47,68 @@
   top: 0;
   gap: var(--spacing-xs);
   z-index: var(--z-index-high);
-  transform: scale(calc(1 / var(--zoom))) translate3d(0, 100%, 0);
-  transform-origin: bottom left;
+  transform: translate3d(0, 100%, 0);
+  transform-origin: bottom center;
   transition: opacity var(--transition-fast);
   opacity: var(--tool-opacity);
-  padding-top: var(--spacing-xs);
+  padding-top: var(--spacing-2xs);
   display: flex;
   justify-content: center;
 }
 
-.highlight-frame {
-  position: absolute;
-  top: var(--frame-top);
-  left: var(--frame-left);
-  width: var(--frame-width);
-  height: var(--frame-height);
-  z-index: var(--z-index-medium);
+.highlight-frame-overlay {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
   pointer-events: none;
-  font-family: var(--font-family-primary);
-  letter-spacing: var(--letter-spacing);
-}
-
-.highlight-frame-svg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  z-index: var(--z-index-highlight);
   overflow: visible;
 }
 
 .highlight-frame-rect {
   fill: none;
   stroke: var(--primary-color);
-  stroke-width: var(--stroke-width);
+  stroke-width: 2px; /* Fixed width - vector-effect keeps it crisp */
+}
+
+.highlight-frame-overlay.is-instance .highlight-frame-rect {
+  stroke: var(--component-color);
+}
+
+.highlight-frame-handle {
+  fill: white;
+  stroke: var(--primary-color);
+  stroke-width: 1px;
+  pointer-events: auto;
+  cursor: nwse-resize;
+}
+
+.highlight-frame-overlay.is-instance .highlight-frame-handle {
+  stroke: var(--component-color);
+}
+
+.highlight-frame-handle.handle-top-left {
+  cursor: nwse-resize;
+}
+
+.highlight-frame-handle.handle-top-right {
+  cursor: nesw-resize;
+}
+
+.highlight-frame-handle.handle-bottom-right {
+  cursor: nwse-resize;
+}
+
+.highlight-frame-handle.handle-bottom-left {
+  cursor: nesw-resize;
+}
+
+.highlight-frame-tools-wrapper {
+  position: fixed;
+  pointer-events: none;
+  z-index: var(--z-index-highlight);
+  contain: layout style;
 }
 
 .tag-label {
@@ -95,6 +126,11 @@
   justify-content: center;
 }
 
+.highlight-frame-tools-wrapper.is-instance .tag-label,
+.node-tools.is-instance .tag-label {
+  background-color: var(--component-color);
+}
+
 .viewport {
   position: relative;
   width: var(--container-width);