made-refine 0.2.7 → 0.2.9

package/dist/utils.js

@@ -69,12 +69,13 @@ __export(utils_exports, {
   getFlexDirection: () => getFlexDirection,
   getMoveIntentForEdit: () => getMoveIntentForEdit,
   getOriginalInlineStyles: () => getOriginalInlineStyles,
+  getSelectionColors: () => getSelectionColors,
   getSizingValue: () => getSizingValue,
   isFlexContainer: () => isFlexContainer,
   isInFlowChild: () => isInFlowChild,
   isInputFocused: () => isInputFocused,
   isLayoutContainer: () => isLayoutContainer,
-  isTextElement: () => isTextElement,
+  isTextElement: () => isTextElement2,
   parseColorValue: () => parseColorValue,
   parsePropertyValue: () => parsePropertyValue,
   propertyToCSSMap: () => propertyToCSSMap,
@@ -90,7 +91,7 @@ module.exports = __toCommonJS(utils_exports);
 // src/utils/css-value.ts
 function parsePropertyValue(value) {
   const raw = value.trim();
-  const match = raw.match(/^(-?\d*\.?\d+)(px|rem|em|%)?$/);
+  const match = raw.match(/^(-?\d*\.?\d+)(px|rem|em|vh|vw|%)?$/);
   if (match) {
     return {
       numericValue: parseFloat(match[1]),
@@ -111,6 +112,24 @@ function formatPropertyValue(value) {
   return `${value.numericValue}${value.unit}`;
 }
 
+// src/canvas-store.ts
+var import_react = require("react");
+var DEFAULT = { active: false, zoom: 1, panX: 0, panY: 0 };
+var snapshot = DEFAULT;
+var bodyOffset = { x: 0, y: 0 };
+function getBodyOffset() {
+  return bodyOffset;
+}
+function getCanvasSnapshot() {
+  return snapshot;
+}
+
+// src/utils/measurements.ts
+function getZoomScale() {
+  const snap = getCanvasSnapshot();
+  return snap.active ? snap.zoom : 1;
+}
+
 // src/utils.ts
 function clamp(value, min, max) {
   if (!Number.isFinite(value)) return min;
@@ -208,6 +227,7 @@ var ORIGINAL_STYLE_PROPS = [
   "width",
   "height",
   "background-color",
+  "background",
   "color",
   "border-color",
   "outline-color",
@@ -590,7 +610,7 @@ function hasDirectNonWhitespaceText(element) {
     (node) => node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim())
   );
 }
-function isTextElement(element) {
+function isTextElement2(element) {
   const tagName = element.tagName.toLowerCase();
   if (TEXT_ELEMENT_TAGS.has(tagName)) {
     return true;
@@ -809,6 +829,55 @@ function parseColorValue(cssValue) {
   return parseNamedColor(raw);
 }
 var TRANSPARENT_COLOR = { hex: "000000", alpha: 0, raw: "transparent" };
+function isVisibleBorderSide(side) {
+  return side.style !== "none" && side.style !== "hidden" && parseFloat(side.width) > 0;
+}
+function hasVisibleOutline(computed) {
+  return computed.outlineStyle !== "none" && parseFloat(computed.outlineWidth) > 0;
+}
+function parseVisibleColor(value, fallbackCurrentColor) {
+  const raw = value.trim();
+  const lowered = raw.toLowerCase();
+  if (!raw || lowered === "none" || lowered === "transparent") {
+    return null;
+  }
+  const resolved = /^currentcolor$/i.test(raw) ? fallbackCurrentColor ?? raw : raw;
+  const parsed = parseColorValue(resolved);
+  if (parsed.alpha <= 0) {
+    return null;
+  }
+  return parsed;
+}
+function addUniqueColor(colors, color) {
+  if (!color) return;
+  colors.set(`${color.hex}:${color.alpha}`, color);
+}
+function isTextRenderingFormControl(element) {
+  if (element instanceof HTMLTextAreaElement) return true;
+  if (element instanceof HTMLSelectElement) return true;
+  if (element instanceof HTMLButtonElement) return true;
+  if (element instanceof HTMLInputElement) {
+    const textlessInputTypes = /* @__PURE__ */ new Set([
+      "hidden",
+      "checkbox",
+      "radio",
+      "range",
+      "color",
+      "file",
+      "image"
+    ]);
+    return !textlessInputTypes.has(element.type.toLowerCase());
+  }
+  return false;
+}
+function hasRenderableTextNode(element) {
+  if (element.isContentEditable) return true;
+  if (isTextRenderingFormControl(element)) return true;
+  if (!element.textContent?.trim()) return false;
+  if (hasDirectNonWhitespaceText(element)) return true;
+  const tagName = element.tagName.toLowerCase();
+  return TEXT_ELEMENT_TAGS.has(tagName) || element.children.length === 0;
+}
 function getComputedBoxShadow(element) {
   const computed = window.getComputedStyle(element);
   const value = computed.boxShadow.trim();
@@ -822,11 +891,9 @@ function getComputedColorStyles(element) {
     { style: computed.borderBottomStyle, width: computed.borderBottomWidth, color: computed.borderBottomColor },
     { style: computed.borderLeftStyle, width: computed.borderLeftWidth, color: computed.borderLeftColor }
   ];
-  const visibleBorderSide = borderSides.find(
-    (side) => side.style !== "none" && side.style !== "hidden" && parseFloat(side.width) > 0
-  );
+  const visibleBorderSide = borderSides.find((side) => isVisibleBorderSide(side));
   const hasBorder = Boolean(visibleBorderSide);
-  const hasOutline = computed.outlineStyle !== "none" && parseFloat(computed.outlineWidth) > 0;
+  const hasOutline = hasVisibleOutline(computed);
   return {
     backgroundColor: parseColorValue(computed.backgroundColor),
     color: parseColorValue(computed.color),
@@ -834,6 +901,48 @@ function getComputedColorStyles(element) {
     outlineColor: hasOutline ? parseColorValue(computed.outlineColor) : TRANSPARENT_COLOR
   };
 }
+function getSelectionColors(element) {
+  const uniqueColors = /* @__PURE__ */ new Map();
+  const queue = [element];
+  for (let index = 0; index < queue.length; index++) {
+    const node = queue[index];
+    const computed = window.getComputedStyle(node);
+    if (computed.display === "none") {
+      continue;
+    }
+    const isVisibilityHidden = computed.visibility === "hidden" || computed.visibility === "collapse";
+    const currentTextColor = computed.color;
+    if (!isVisibilityHidden) {
+      addUniqueColor(uniqueColors, parseVisibleColor(computed.backgroundColor));
+      if (node instanceof HTMLElement && hasRenderableTextNode(node)) {
+        addUniqueColor(uniqueColors, parseVisibleColor(currentTextColor));
+      }
+      const borderSides = [
+        { style: computed.borderTopStyle, width: computed.borderTopWidth, color: computed.borderTopColor },
+        { style: computed.borderRightStyle, width: computed.borderRightWidth, color: computed.borderRightColor },
+        { style: computed.borderBottomStyle, width: computed.borderBottomWidth, color: computed.borderBottomColor },
+        { style: computed.borderLeftStyle, width: computed.borderLeftWidth, color: computed.borderLeftColor }
+      ];
+      for (const side of borderSides) {
+        if (!isVisibleBorderSide(side)) continue;
+        addUniqueColor(uniqueColors, parseVisibleColor(side.color, currentTextColor));
+      }
+      if (hasVisibleOutline(computed)) {
+        addUniqueColor(uniqueColors, parseVisibleColor(computed.outlineColor, currentTextColor));
+      }
+      if (node instanceof SVGElement) {
+        const fillColor = parseVisibleColor(computed.getPropertyValue("fill"), currentTextColor) ?? parseVisibleColor(node.getAttribute("fill") ?? "", currentTextColor);
+        const strokeColor = parseVisibleColor(computed.getPropertyValue("stroke"), currentTextColor) ?? parseVisibleColor(node.getAttribute("stroke") ?? "", currentTextColor);
+        addUniqueColor(uniqueColors, fillColor);
+        addUniqueColor(uniqueColors, strokeColor);
+      }
+    }
+    for (const child of node.children) {
+      queue.push(child);
+    }
+  }
+  return Array.from(uniqueColors.values());
+}
 function getAllComputedStyles(element) {
   const { spacing, borderRadius, flex } = getComputedStyles(element);
   return {
@@ -881,7 +990,7 @@ function getElementInfo(element) {
     classList: Array.from(element.classList),
     isFlexContainer: isFlexContainer2,
     isFlexItem,
-    isTextElement: isTextElement(element),
+    isTextElement: isTextElement2(element),
     parentElement,
     hasChildren: element.children.length > 0
   };
@@ -921,9 +1030,8 @@ function isFitSizing(element, dimension) {
   return false;
 }
 function getDimensionDisplay(element) {
-  const rect = element.getBoundingClientRect();
-  const width = Math.round(rect.width);
-  const height = Math.round(rect.height);
+  const width = Math.round(element.offsetWidth);
+  const height = Math.round(element.offsetHeight);
   const widthIsFit = isFitSizing(element, "width");
   const heightIsFit = isFitSizing(element, "height");
   return {
@@ -956,8 +1064,9 @@ function calculateParentMeasurements(element, container) {
     parentInnerRight = paddingBoxRight - (parseFloat(parentStyles.paddingRight) || 0);
     parentInnerBottom = paddingBoxBottom - (parseFloat(parentStyles.paddingBottom) || 0);
   }
+  const zoom = getZoomScale();
   const measurements = [];
-  const topDistance = Math.round(elementRect.top - parentInnerTop);
+  const topDistance = Math.round((elementRect.top - parentInnerTop) / zoom);
   if (topDistance > 0) {
     const midX = elementRect.left + elementRect.width / 2;
     measurements.push({
@@ -970,7 +1079,7 @@ function calculateParentMeasurements(element, container) {
       labelPosition: { x: midX, y: (parentInnerTop + elementRect.top) / 2 }
     });
   }
-  const bottomDistance = Math.round(parentInnerBottom - elementRect.bottom);
+  const bottomDistance = Math.round((parentInnerBottom - elementRect.bottom) / zoom);
   if (bottomDistance > 0) {
     const midX = elementRect.left + elementRect.width / 2;
     measurements.push({
@@ -983,7 +1092,7 @@ function calculateParentMeasurements(element, container) {
       labelPosition: { x: midX, y: (elementRect.bottom + parentInnerBottom) / 2 }
     });
   }
-  const leftDistance = Math.round(elementRect.left - parentInnerLeft);
+  const leftDistance = Math.round((elementRect.left - parentInnerLeft) / zoom);
   if (leftDistance > 0) {
     const midY = elementRect.top + elementRect.height / 2;
     measurements.push({
@@ -996,7 +1105,7 @@ function calculateParentMeasurements(element, container) {
       labelPosition: { x: (parentInnerLeft + elementRect.left) / 2, y: midY }
     });
   }
-  const rightDistance = Math.round(parentInnerRight - elementRect.right);
+  const rightDistance = Math.round((parentInnerRight - elementRect.right) / zoom);
   if (rightDistance > 0) {
     const midY = elementRect.top + elementRect.height / 2;
     measurements.push({
@@ -1014,6 +1123,7 @@ function calculateParentMeasurements(element, container) {
 function calculateElementMeasurements(from, to) {
   const fromRect = from.getBoundingClientRect();
   const toRect = to.getBoundingClientRect();
+  const zoom = getZoomScale();
   const measurements = [];
   const horizontalOverlap = fromRect.left < toRect.right && fromRect.right > toRect.left;
   const verticalOverlap = fromRect.top < toRect.bottom && fromRect.bottom > toRect.top;
@@ -1022,7 +1132,7 @@ function calculateElementMeasurements(from, to) {
     const overlapBottom = Math.min(fromRect.bottom, toRect.bottom);
     const midY = (overlapTop + overlapBottom) / 2;
     if (fromRect.right <= toRect.left) {
-      const distance = Math.round(toRect.left - fromRect.right);
+      const distance = Math.round((toRect.left - fromRect.right) / zoom);
       measurements.push({
         direction: "horizontal",
         x1: fromRect.right,
@@ -1033,7 +1143,7 @@ function calculateElementMeasurements(from, to) {
         labelPosition: { x: (fromRect.right + toRect.left) / 2, y: midY }
       });
     } else if (fromRect.left >= toRect.right) {
-      const distance = Math.round(fromRect.left - toRect.right);
+      const distance = Math.round((fromRect.left - toRect.right) / zoom);
       measurements.push({
         direction: "horizontal",
         x1: toRect.right,
@@ -1050,7 +1160,7 @@ function calculateElementMeasurements(from, to) {
     const overlapRight = Math.min(fromRect.right, toRect.right);
     const midX = (overlapLeft + overlapRight) / 2;
     if (fromRect.bottom <= toRect.top) {
-      const distance = Math.round(toRect.top - fromRect.bottom);
+      const distance = Math.round((toRect.top - fromRect.bottom) / zoom);
       measurements.push({
         direction: "vertical",
         x1: midX,
@@ -1061,7 +1171,7 @@ function calculateElementMeasurements(from, to) {
         labelPosition: { x: midX, y: (fromRect.bottom + toRect.top) / 2 }
       });
     } else if (fromRect.top >= toRect.bottom) {
-      const distance = Math.round(fromRect.top - toRect.bottom);
+      const distance = Math.round((fromRect.top - toRect.bottom) / zoom);
       measurements.push({
         direction: "vertical",
         x1: midX,
@@ -1078,7 +1188,7 @@ function calculateElementMeasurements(from, to) {
     const fromCenterY = fromRect.top + fromRect.height / 2;
     const toCenterX = toRect.left + toRect.width / 2;
     const toCenterY = toRect.top + toRect.height / 2;
-    const hDistance = toCenterX > fromCenterX ? Math.round(toRect.left - fromRect.right) : Math.round(fromRect.left - toRect.right);
+    const hDistance = toCenterX > fromCenterX ? Math.round((toRect.left - fromRect.right) / zoom) : Math.round((fromRect.left - toRect.right) / zoom);
     if (hDistance > 0) {
       const startX = toCenterX > fromCenterX ? fromRect.right : fromRect.left;
       const endX = toCenterX > fromCenterX ? toRect.left : toRect.right;
@@ -1093,7 +1203,7 @@ function calculateElementMeasurements(from, to) {
         labelPosition: { x: (startX + endX) / 2, y }
       });
     }
-    const vDistance = toCenterY > fromCenterY ? Math.round(toRect.top - fromRect.bottom) : Math.round(fromRect.top - toRect.bottom);
+    const vDistance = toCenterY > fromCenterY ? Math.round((toRect.top - fromRect.bottom) / zoom) : Math.round((fromRect.top - toRect.bottom) / zoom);
     if (vDistance > 0) {
       const x = (fromCenterX + toCenterX) / 2;
       const startY = toCenterY > fromCenterY ? fromRect.bottom : fromRect.top;
@@ -1114,70 +1224,77 @@ function calculateElementMeasurements(from, to) {
 var GUIDELINE_PROXIMITY = 80;
 function calculateGuidelineMeasurements(element, guidelines, mousePosition) {
   if (guidelines.length === 0) return [];
+  const snap = getCanvasSnapshot();
+  const zoom = snap.active ? snap.zoom : 1;
   const rect = element.getBoundingClientRect();
-  const scrollX = window.scrollX;
-  const scrollY = window.scrollY;
   const measurements = [];
   for (const g of guidelines) {
+    let viewportPos;
+    if (snap.active) {
+      const pan = g.orientation === "horizontal" ? snap.panY : snap.panX;
+      const bo = g.orientation === "horizontal" ? getBodyOffset().y : getBodyOffset().x;
+      viewportPos = bo + (g.position - bo + pan) * zoom;
+    } else {
+      const scroll = g.orientation === "horizontal" ? window.scrollY : window.scrollX;
+      viewportPos = g.position - scroll;
+    }
     if (g.orientation === "horizontal") {
-      const gy = g.position - scrollY;
       const midX = rect.left + rect.width / 2;
-      if (mousePosition && Math.abs(mousePosition.y - gy) > GUIDELINE_PROXIMITY) continue;
-      if (gy < rect.top) {
-        const distance = Math.round(rect.top - gy);
+      if (mousePosition && Math.abs(mousePosition.y - viewportPos) > GUIDELINE_PROXIMITY) continue;
+      if (viewportPos < rect.top) {
+        const distance = Math.round((rect.top - viewportPos) / zoom);
         if (distance > 0) {
           measurements.push({
             direction: "vertical",
             x1: midX,
-            y1: gy,
+            y1: viewportPos,
             x2: midX,
             y2: rect.top,
             distance,
-            labelPosition: { x: midX, y: (gy + rect.top) / 2 }
+            labelPosition: { x: midX, y: (viewportPos + rect.top) / 2 }
           });
         }
-      } else if (gy > rect.bottom) {
-        const distance = Math.round(gy - rect.bottom);
+      } else if (viewportPos > rect.bottom) {
+        const distance = Math.round((viewportPos - rect.bottom) / zoom);
         if (distance > 0) {
           measurements.push({
             direction: "vertical",
             x1: midX,
             y1: rect.bottom,
             x2: midX,
-            y2: gy,
+            y2: viewportPos,
             distance,
-            labelPosition: { x: midX, y: (rect.bottom + gy) / 2 }
+            labelPosition: { x: midX, y: (rect.bottom + viewportPos) / 2 }
           });
         }
       }
     } else {
-      const gx = g.position - scrollX;
       const midY = rect.top + rect.height / 2;
-      if (mousePosition && Math.abs(mousePosition.x - gx) > GUIDELINE_PROXIMITY) continue;
-      if (gx < rect.left) {
-        const distance = Math.round(rect.left - gx);
+      if (mousePosition && Math.abs(mousePosition.x - viewportPos) > GUIDELINE_PROXIMITY) continue;
+      if (viewportPos < rect.left) {
+        const distance = Math.round((rect.left - viewportPos) / zoom);
         if (distance > 0) {
           measurements.push({
             direction: "horizontal",
-            x1: gx,
+            x1: viewportPos,
             y1: midY,
             x2: rect.left,
             y2: midY,
             distance,
-            labelPosition: { x: (gx + rect.left) / 2, y: midY }
+            labelPosition: { x: (viewportPos + rect.left) / 2, y: midY }
           });
         }
-      } else if (gx > rect.right) {
-        const distance = Math.round(gx - rect.right);
+      } else if (viewportPos > rect.right) {
+        const distance = Math.round((viewportPos - rect.right) / zoom);
         if (distance > 0) {
           measurements.push({
             direction: "horizontal",
             x1: rect.right,
             y1: midY,
-            x2: gx,
+            x2: viewportPos,
             y2: midY,
             distance,
-            labelPosition: { x: (rect.right + gx) / 2, y: midY }
+            labelPosition: { x: (rect.right + viewportPos) / 2, y: midY }
           });
         }
       }
@@ -2555,7 +2672,7 @@ function inferLayoutPrescription(edit, operation, reasons) {
       anchorLabel: formatAnchorRef(anchor)
     };
   });
-  const subjectSnapshot = childSnapshots.find((snapshot) => snapshot.child === edit.element);
+  const subjectSnapshot = childSnapshots.find((snapshot2) => snapshot2.child === edit.element);
   const subjectRect = edit.element.getBoundingClientRect();
   const subjectCenterX = subjectRect.left + subjectRect.width / 2;
   const subjectCenterY = subjectRect.top + subjectRect.height / 2;
@@ -2958,6 +3075,7 @@ ${buildMoveExportLines(moveIntent).join("\n")}`;
   getFlexDirection,
   getMoveIntentForEdit,
   getOriginalInlineStyles,
+  getSelectionColors,
   getSizingValue,
   isFlexContainer,
   isInFlowChild,