made-refine 0.2.20 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/utils.d.ts CHANGED
@@ -1 +1 @@
1
- export { ag as AllComputedStyles, e as BorderProperties, d as BorderPropertyKey, s as BorderRadiusProperties, B as BorderRadiusPropertyKey, t as BorderStyle, C as CSSPropertyValue, u as ColorProperties, i as ColorPropertyKey, j as ColorValue, m as DirectEditState, D as DragState, a as DropIndicator, x as DropTarget, E as ElementInfo, y as ElementLocator, ah as ExportContentProfile, z as FlexProperties, F as FlexPropertyKey, M as MeasurementLine, H as MeasurementState, ai as MovePlanContext, aj as ORIGINAL_STYLE_PROPS, R as ReactComponentFrame, J as SizingMode, K as SizingProperties, f as SizingPropertyKey, g as SizingValue, L as SpacingProperties, c as SpacingPropertyKey, q as TypographyProperties, T as TypographyPropertyKey, ak as borderPropertyToCSSMap, al as borderRadiusPropertyToCSSMap, Q as buildCommentExport, am as buildEditExport, an as buildElementContext, ao as buildExportInstruction, ap as buildMovePlan, aq as buildMovePlanContext, V as buildSessionExport, W as calculateDropPosition, X as calculateElementMeasurements, Y as calculateGuidelineMeasurements, Z as calculateParentMeasurements, ar as clamp, as as collapseExportShorthands, at as collapseSpacingShorthands, au as colorPropertyToCSSMap, _ as colorToTailwind, av as computeHoverHighlight, aw as computeIntendedIndex, ax as detectChildrenDirection, ay as detectSizingMode, $ as elementFromPointWithoutOverlays, az as ensureDirectTextSpanAtPoint, aA as findChildAtPoint, a0 as findContainerAtPoint, a1 as findLayoutContainerAtPoint, aB as findTextOwnerAtPoint, aC as findTextOwnerByRangeScan, aD as flexPropertyToCSSMap, aE as formatComponentTree, a2 as formatPropertyValue, aF as getAllComputedStyles, aG as getChildBriefInfo, a3 as getComputedBorderStyles, a4 as getComputedBoxShadow, a5 as getComputedColorStyles, aH as getComputedSizing, a6 as getComputedStyles, aI as getComputedTypography, aJ as getContextOnlyBlocks, a7 as getDimensionDisplay, aK as getElementDisplayName, a8 as getElementInfo, a9 as getElementLocator, aL as getElementSource, aM as getExportContentProfile, aa as getFlexDirection, aN as getLocatorHeader, aO as getMoveIntentForEdit, aP as getOriginalInlineStyles, aQ as getSelectionColors, aR as getSizingValue, aS as hasSessionEditChanges, ab as isFlexContainer, aT as isInFlowChild, aU as isInputFocused, ac as isLayoutContainer, aV as isTextElement, ad as parseColorValue, ae as parsePropertyValue, aW as partitionMultiSelectedEdits, aX as propertyToCSSMap, aY as resolveElementTarget, aZ as sizingPropertyToCSSMap, a_ as sizingToTailwind, a$ as sizingValueToCSS, af as stylesToTailwind, b0 as typographyPropertyToCSSMap } from './utils-CpmjloNg.js';
1
+ export { ag as AllComputedStyles, e as BorderProperties, d as BorderPropertyKey, s as BorderRadiusProperties, B as BorderRadiusPropertyKey, t as BorderStyle, C as CSSPropertyValue, u as ColorProperties, i as ColorPropertyKey, j as ColorValue, m as DirectEditState, D as DragState, a as DropIndicator, x as DropTarget, E as ElementInfo, y as ElementLocator, ah as ExportContentProfile, z as FlexProperties, F as FlexPropertyKey, M as MeasurementLine, H as MeasurementState, ai as MovePlanContext, aj as ORIGINAL_STYLE_PROPS, R as ReactComponentFrame, J as SizingMode, K as SizingProperties, f as SizingPropertyKey, g as SizingValue, L as SpacingProperties, c as SpacingPropertyKey, q as TypographyProperties, T as TypographyPropertyKey, ak as borderPropertyToCSSMap, al as borderRadiusPropertyToCSSMap, Q as buildCommentExport, am as buildEditExport, an as buildElementContext, ao as buildExportInstruction, ap as buildMovePlan, aq as buildMovePlanContext, V as buildSessionExport, W as calculateDropPosition, X as calculateElementMeasurements, Y as calculateGuidelineMeasurements, Z as calculateParentMeasurements, ar as clamp, as as collapseExportShorthands, at as collapseSpacingShorthands, au as colorPropertyToCSSMap, _ as colorToTailwind, av as computeHoverHighlight, aw as computeIntendedIndex, ax as detectChildrenDirection, ay as detectSizingMode, $ as elementFromPointWithoutOverlays, az as ensureDirectTextSpanAtPoint, aA as findChildAtPoint, a0 as findContainerAtPoint, a1 as findLayoutContainerAtPoint, aB as findTextOwnerAtPoint, aC as findTextOwnerByRangeScan, aD as flexPropertyToCSSMap, aE as formatComponentTree, a2 as formatPropertyValue, aF as getAllComputedStyles, aG as getChildBriefInfo, a3 as getComputedBorderStyles, a4 as getComputedBoxShadow, a5 as getComputedColorStyles, aH as getComputedSizing, a6 as getComputedStyles, aI as getComputedTypography, aJ as getContextOnlyBlocks, a7 as getDimensionDisplay, aK as getElementDisplayName, a8 as getElementInfo, a9 as getElementLocator, aL as getElementSource, aM as getExportContentProfile, aa as getFlexDirection, aN as getLocatorHeader, aO as getMoveIntentForEdit, aP as getOriginalInlineStyles, aQ as getSelectionColors, aR as getSizingValue, aS as hasSessionEditChanges, ab as isFlexContainer, aT as isInFlowChild, aU as isInputFocused, ac as isLayoutContainer, aV as isTextElement, ad as parseColorValue, ae as parsePropertyValue, aW as partitionMultiSelectedEdits, aX as propertyToCSSMap, aY as resolveElementTarget, aZ as sizingPropertyToCSSMap, a_ as sizingToTailwind, a$ as sizingValueToCSS, af as stylesToTailwind, b0 as typographyPropertyToCSSMap } from './utils-ovHeRo0g.js';
package/dist/utils.js CHANGED
@@ -415,10 +415,30 @@ function getSourceFromFiber(fiber) {
415
415
  if (fromDebugStack?.fileName) return fromDebugStack;
416
416
  return null;
417
417
  }
418
+ var REACT_FORWARD_REF_TYPE = /* @__PURE__ */ Symbol.for("react.forward_ref");
419
+ var REACT_MEMO_TYPE = /* @__PURE__ */ Symbol.for("react.memo");
420
+ function resolveComponentName(type) {
421
+ let current = type;
422
+ for (let depth = 0; depth < 4 && current != null; depth++) {
423
+ const name = current.displayName || (typeof current === "function" ? current.name : void 0);
424
+ if (name) return name;
425
+ if (typeof current !== "object") return null;
426
+ if (current.$$typeof === REACT_MEMO_TYPE) {
427
+ current = current.type;
428
+ continue;
429
+ }
430
+ if (current.$$typeof === REACT_FORWARD_REF_TYPE) {
431
+ current = current.render;
432
+ continue;
433
+ }
434
+ return null;
435
+ }
436
+ return null;
437
+ }
418
438
  function buildFrame(fiber) {
419
439
  const type = fiber?.type;
420
440
  if (typeof type !== "function" && typeof type !== "object") return null;
421
- const name = type?.displayName || type?.name || null;
441
+ const name = resolveComponentName(type);
422
442
  if (!name || name === "Fragment") return null;
423
443
  const frame = { name };
424
444
  const source = getSourceFromFiber(fiber);
@@ -490,14 +510,7 @@ function getReactComponentInfo(element) {
490
510
  }
491
511
  return { ...getRenderStack(fiber), elementSourceFile };
492
512
  }
493
- var EXCLUDED_PROP_KEYS = /* @__PURE__ */ new Set([
494
- "className",
495
- "style",
496
- "children",
497
- "ref",
498
- "key",
499
- "render"
500
- ]);
513
+ var EXCLUDED_PROP_KEYS = /* @__PURE__ */ new Set(["className", "style", "children", "ref", "key", "render"]);
501
514
  function serializePropValue(value) {
502
515
  if (typeof value === "function") return "[function]";
503
516
  if (typeof value === "symbol") return void 0;
@@ -608,19 +621,7 @@ function classifyComponentFiber(fiber, frames, elementSourceFile) {
608
621
  return { isComponentPrimitive: false };
609
622
  }
610
623
 
611
- // src/utils.ts
612
- function clamp(value, min, max) {
613
- if (!Number.isFinite(value)) return min;
614
- if (max < min) return min;
615
- return Math.max(min, Math.min(max, value));
616
- }
617
- function isInputFocused() {
618
- let active = document.activeElement;
619
- while (active?.shadowRoot?.activeElement) {
620
- active = active.shadowRoot.activeElement;
621
- }
622
- return active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active instanceof HTMLElement && active.isContentEditable;
623
- }
624
+ // src/utils/computed-styles.ts
624
625
  function getComputedStyles(element) {
625
626
  const computed = window.getComputedStyle(element);
626
627
  return {
@@ -729,6 +730,255 @@ function getOriginalInlineStyles(element) {
729
730
  }
730
731
  return styles;
731
732
  }
733
+ function getComputedTypography(element) {
734
+ const computed = window.getComputedStyle(element);
735
+ let textVerticalAlign = "flex-start";
736
+ if (computed.display === "flex" || computed.display === "inline-flex") {
737
+ const alignItems = computed.alignItems;
738
+ if (alignItems === "center") textVerticalAlign = "center";
739
+ else if (alignItems === "flex-end" || alignItems === "end") textVerticalAlign = "flex-end";
740
+ }
741
+ const lineHeight = computed.lineHeight === "normal" ? {
742
+ numericValue: parseFloat(computed.fontSize) * 1.2,
743
+ unit: "px",
744
+ raw: `${Math.round(parseFloat(computed.fontSize) * 1.2)}px`
745
+ } : parsePropertyValue(computed.lineHeight);
746
+ const fontSize = parseFloat(computed.fontSize);
747
+ let letterSpacing;
748
+ if (computed.letterSpacing === "normal") {
749
+ letterSpacing = { numericValue: 0, unit: "em", raw: "0em" };
750
+ } else {
751
+ const parsed = parsePropertyValue(computed.letterSpacing);
752
+ if (parsed.unit === "px" && fontSize > 0) {
753
+ const emValue = Math.round(parsed.numericValue / fontSize * 100) / 100;
754
+ letterSpacing = { numericValue: emValue, unit: "em", raw: `${emValue}em` };
755
+ } else {
756
+ letterSpacing = parsed;
757
+ }
758
+ }
759
+ return {
760
+ fontFamily: computed.fontFamily,
761
+ fontWeight: computed.fontWeight,
762
+ fontSize: parsePropertyValue(computed.fontSize),
763
+ lineHeight,
764
+ letterSpacing,
765
+ textAlign: computed.textAlign,
766
+ textVerticalAlign
767
+ };
768
+ }
769
+ function getComputedSizing(element) {
770
+ return {
771
+ width: getSizingValue(element, "width"),
772
+ height: getSizingValue(element, "height")
773
+ };
774
+ }
775
+ var TEXT_ELEMENT_TAGS = /* @__PURE__ */ new Set([
776
+ "p",
777
+ "h1",
778
+ "h2",
779
+ "h3",
780
+ "h4",
781
+ "h5",
782
+ "h6",
783
+ "span",
784
+ "label",
785
+ "a",
786
+ "strong",
787
+ "em",
788
+ "small",
789
+ "blockquote",
790
+ "li",
791
+ "td",
792
+ "th",
793
+ "caption",
794
+ "figcaption",
795
+ "legend",
796
+ "dt",
797
+ "dd",
798
+ "abbr",
799
+ "cite",
800
+ "code",
801
+ "pre"
802
+ ]);
803
+ function hasDirectNonWhitespaceText(element) {
804
+ return Array.from(element.childNodes).some(
805
+ (node) => node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim())
806
+ );
807
+ }
808
+ var TRANSPARENT_COLOR = { hex: "000000", alpha: 0, raw: "transparent" };
809
+ function isVisibleBorderSide(side) {
810
+ return side.style !== "none" && side.style !== "hidden" && parseFloat(side.width) > 0;
811
+ }
812
+ function hasVisibleOutline(computed) {
813
+ return computed.outlineStyle !== "none" && parseFloat(computed.outlineWidth) > 0;
814
+ }
815
+ function parseVisibleColor(value, fallbackCurrentColor) {
816
+ const raw = value.trim();
817
+ const lowered = raw.toLowerCase();
818
+ if (!raw || lowered === "none" || lowered === "transparent") {
819
+ return null;
820
+ }
821
+ const resolved = /^currentcolor$/i.test(raw) ? fallbackCurrentColor ?? raw : raw;
822
+ const parsed = parseColorValue(resolved);
823
+ if (parsed.alpha <= 0) {
824
+ return null;
825
+ }
826
+ return parsed;
827
+ }
828
+ function addUniqueColor(colors, color) {
829
+ if (!color) return;
830
+ colors.set(`${color.hex}:${color.alpha}`, color);
831
+ }
832
+ function isTextRenderingFormControl(element) {
833
+ if (element instanceof HTMLTextAreaElement) return true;
834
+ if (element instanceof HTMLSelectElement) return true;
835
+ if (element instanceof HTMLButtonElement) return true;
836
+ if (element instanceof HTMLInputElement) {
837
+ const textlessInputTypes = /* @__PURE__ */ new Set([
838
+ "hidden",
839
+ "checkbox",
840
+ "radio",
841
+ "range",
842
+ "color",
843
+ "file",
844
+ "image"
845
+ ]);
846
+ return !textlessInputTypes.has(element.type.toLowerCase());
847
+ }
848
+ return false;
849
+ }
850
+ function hasRenderableTextNode(element) {
851
+ if (element.isContentEditable) return true;
852
+ if (isTextRenderingFormControl(element)) return true;
853
+ if (!element.textContent?.trim()) return false;
854
+ if (hasDirectNonWhitespaceText(element)) return true;
855
+ const tagName = element.tagName.toLowerCase();
856
+ return TEXT_ELEMENT_TAGS.has(tagName) || element.children.length === 0;
857
+ }
858
+ function getComputedBoxShadow(element) {
859
+ const computed = window.getComputedStyle(element);
860
+ const value = computed.boxShadow.trim();
861
+ return value || "none";
862
+ }
863
+ function getComputedColorStyles(element) {
864
+ const computed = window.getComputedStyle(element);
865
+ const borderSides = [
866
+ {
867
+ style: computed.borderTopStyle,
868
+ width: computed.borderTopWidth,
869
+ color: computed.borderTopColor
870
+ },
871
+ {
872
+ style: computed.borderRightStyle,
873
+ width: computed.borderRightWidth,
874
+ color: computed.borderRightColor
875
+ },
876
+ {
877
+ style: computed.borderBottomStyle,
878
+ width: computed.borderBottomWidth,
879
+ color: computed.borderBottomColor
880
+ },
881
+ {
882
+ style: computed.borderLeftStyle,
883
+ width: computed.borderLeftWidth,
884
+ color: computed.borderLeftColor
885
+ }
886
+ ];
887
+ const visibleBorderSide = borderSides.find((side) => isVisibleBorderSide(side));
888
+ const hasBorder = Boolean(visibleBorderSide);
889
+ const hasOutline = hasVisibleOutline(computed);
890
+ return {
891
+ backgroundColor: parseColorValue(computed.backgroundColor),
892
+ color: parseColorValue(computed.color),
893
+ borderColor: hasBorder && visibleBorderSide ? parseColorValue(visibleBorderSide.color) : TRANSPARENT_COLOR,
894
+ outlineColor: hasOutline ? parseColorValue(computed.outlineColor) : TRANSPARENT_COLOR
895
+ };
896
+ }
897
+ function getSelectionColors(element) {
898
+ const uniqueColors = /* @__PURE__ */ new Map();
899
+ const queue = [element];
900
+ for (let index = 0; index < queue.length; index++) {
901
+ const node = queue[index];
902
+ const computed = window.getComputedStyle(node);
903
+ if (computed.display === "none") {
904
+ continue;
905
+ }
906
+ const isVisibilityHidden = computed.visibility === "hidden" || computed.visibility === "collapse";
907
+ const currentTextColor = computed.color;
908
+ if (!isVisibilityHidden) {
909
+ addUniqueColor(uniqueColors, parseVisibleColor(computed.backgroundColor));
910
+ if (node instanceof HTMLElement && hasRenderableTextNode(node)) {
911
+ addUniqueColor(uniqueColors, parseVisibleColor(currentTextColor));
912
+ }
913
+ const borderSides = [
914
+ {
915
+ style: computed.borderTopStyle,
916
+ width: computed.borderTopWidth,
917
+ color: computed.borderTopColor
918
+ },
919
+ {
920
+ style: computed.borderRightStyle,
921
+ width: computed.borderRightWidth,
922
+ color: computed.borderRightColor
923
+ },
924
+ {
925
+ style: computed.borderBottomStyle,
926
+ width: computed.borderBottomWidth,
927
+ color: computed.borderBottomColor
928
+ },
929
+ {
930
+ style: computed.borderLeftStyle,
931
+ width: computed.borderLeftWidth,
932
+ color: computed.borderLeftColor
933
+ }
934
+ ];
935
+ for (const side of borderSides) {
936
+ if (!isVisibleBorderSide(side)) continue;
937
+ addUniqueColor(uniqueColors, parseVisibleColor(side.color, currentTextColor));
938
+ }
939
+ if (hasVisibleOutline(computed)) {
940
+ addUniqueColor(uniqueColors, parseVisibleColor(computed.outlineColor, currentTextColor));
941
+ }
942
+ if (node instanceof SVGElement) {
943
+ const fillColor = parseVisibleColor(computed.getPropertyValue("fill"), currentTextColor) ?? parseVisibleColor(node.getAttribute("fill") ?? "", currentTextColor);
944
+ const strokeColor = parseVisibleColor(computed.getPropertyValue("stroke"), currentTextColor) ?? parseVisibleColor(node.getAttribute("stroke") ?? "", currentTextColor);
945
+ addUniqueColor(uniqueColors, fillColor);
946
+ addUniqueColor(uniqueColors, strokeColor);
947
+ }
948
+ }
949
+ for (const child of node.children) {
950
+ queue.push(child);
951
+ }
952
+ }
953
+ return Array.from(uniqueColors.values());
954
+ }
955
+ function getAllComputedStyles(element) {
956
+ const { spacing, borderRadius, flex } = getComputedStyles(element);
957
+ return {
958
+ spacing,
959
+ borderRadius,
960
+ border: getComputedBorderStyles(element),
961
+ flex,
962
+ sizing: getComputedSizing(element),
963
+ color: getComputedColorStyles(element),
964
+ boxShadow: getComputedBoxShadow(element),
965
+ typography: getComputedTypography(element)
966
+ };
967
+ }
968
+
969
+ // src/utils.ts
970
+ function clamp(value, min, max) {
971
+ if (!Number.isFinite(value)) return min;
972
+ if (max < min) return min;
973
+ return Math.max(min, Math.min(max, value));
974
+ }
975
+ function isInputFocused() {
976
+ let active = document.activeElement;
977
+ while (active?.shadowRoot?.activeElement) {
978
+ active = active.shadowRoot.activeElement;
979
+ }
980
+ return active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active instanceof HTMLElement && active.isContentEditable;
981
+ }
732
982
  var spacingScale = { 0: "0", 1: "px", 2: "0.5", 4: "1", 8: "2", 12: "3", 16: "4", 20: "5", 24: "6", 32: "8" };
733
983
  var tailwindClassMap = {
734
984
  padding: { prefix: "p", scale: spacingScale },
@@ -1055,7 +1305,7 @@ var typographyPropertyToCSSMap = {
1055
1305
  textAlign: "text-align",
1056
1306
  textVerticalAlign: "align-items"
1057
1307
  };
1058
- var TEXT_ELEMENT_TAGS = /* @__PURE__ */ new Set([
1308
+ var TEXT_ELEMENT_TAGS2 = /* @__PURE__ */ new Set([
1059
1309
  "p",
1060
1310
  "h1",
1061
1311
  "h2",
@@ -1083,17 +1333,17 @@ var TEXT_ELEMENT_TAGS = /* @__PURE__ */ new Set([
1083
1333
  "code",
1084
1334
  "pre"
1085
1335
  ]);
1086
- function hasDirectNonWhitespaceText(element) {
1336
+ function hasDirectNonWhitespaceText2(element) {
1087
1337
  return Array.from(element.childNodes).some(
1088
1338
  (node) => node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim())
1089
1339
  );
1090
1340
  }
1091
1341
  function isTextElement2(element) {
1092
1342
  const tagName = element.tagName.toLowerCase();
1093
- if (TEXT_ELEMENT_TAGS.has(tagName)) {
1343
+ if (TEXT_ELEMENT_TAGS2.has(tagName)) {
1094
1344
  return true;
1095
1345
  }
1096
- if (hasDirectNonWhitespaceText(element)) {
1346
+ if (hasDirectNonWhitespaceText2(element)) {
1097
1347
  return true;
1098
1348
  }
1099
1349
  if (element.children.length === 0 && element.textContent?.trim()) {
@@ -1101,38 +1351,6 @@ function isTextElement2(element) {
1101
1351
  }
1102
1352
  return false;
1103
1353
  }
1104
- function getComputedTypography(element) {
1105
- const computed = window.getComputedStyle(element);
1106
- let textVerticalAlign = "flex-start";
1107
- if (computed.display === "flex" || computed.display === "inline-flex") {
1108
- const alignItems = computed.alignItems;
1109
- if (alignItems === "center") textVerticalAlign = "center";
1110
- else if (alignItems === "flex-end" || alignItems === "end") textVerticalAlign = "flex-end";
1111
- }
1112
- const lineHeight = computed.lineHeight === "normal" ? { numericValue: parseFloat(computed.fontSize) * 1.2, unit: "px", raw: `${Math.round(parseFloat(computed.fontSize) * 1.2)}px` } : parsePropertyValue(computed.lineHeight);
1113
- const fontSize = parseFloat(computed.fontSize);
1114
- let letterSpacing;
1115
- if (computed.letterSpacing === "normal") {
1116
- letterSpacing = { numericValue: 0, unit: "em", raw: "0em" };
1117
- } else {
1118
- const parsed = parsePropertyValue(computed.letterSpacing);
1119
- if (parsed.unit === "px" && fontSize > 0) {
1120
- const emValue = Math.round(parsed.numericValue / fontSize * 100) / 100;
1121
- letterSpacing = { numericValue: emValue, unit: "em", raw: `${emValue}em` };
1122
- } else {
1123
- letterSpacing = parsed;
1124
- }
1125
- }
1126
- return {
1127
- fontFamily: computed.fontFamily,
1128
- fontWeight: computed.fontWeight,
1129
- fontSize: parsePropertyValue(computed.fontSize),
1130
- lineHeight,
1131
- letterSpacing,
1132
- textAlign: computed.textAlign,
1133
- textVerticalAlign
1134
- };
1135
- }
1136
1354
  function detectSizingMode(element, dimension) {
1137
1355
  const computed = window.getComputedStyle(element);
1138
1356
  const inlineValue = element.style[dimension];
@@ -1180,12 +1398,6 @@ function getSizingValue(element, dimension) {
1180
1398
  }
1181
1399
  };
1182
1400
  }
1183
- function getComputedSizing(element) {
1184
- return {
1185
- width: getSizingValue(element, "width"),
1186
- height: getSizingValue(element, "height")
1187
- };
1188
- }
1189
1401
  function sizingValueToCSS(sizing) {
1190
1402
  switch (sizing.mode) {
1191
1403
  case "fill":
@@ -1305,134 +1517,6 @@ function parseColorValue(cssValue) {
1305
1517
  }
1306
1518
  return parseNamedColor(raw);
1307
1519
  }
1308
- var TRANSPARENT_COLOR = { hex: "000000", alpha: 0, raw: "transparent" };
1309
- function isVisibleBorderSide(side) {
1310
- return side.style !== "none" && side.style !== "hidden" && parseFloat(side.width) > 0;
1311
- }
1312
- function hasVisibleOutline(computed) {
1313
- return computed.outlineStyle !== "none" && parseFloat(computed.outlineWidth) > 0;
1314
- }
1315
- function parseVisibleColor(value, fallbackCurrentColor) {
1316
- const raw = value.trim();
1317
- const lowered = raw.toLowerCase();
1318
- if (!raw || lowered === "none" || lowered === "transparent") {
1319
- return null;
1320
- }
1321
- const resolved = /^currentcolor$/i.test(raw) ? fallbackCurrentColor ?? raw : raw;
1322
- const parsed = parseColorValue(resolved);
1323
- if (parsed.alpha <= 0) {
1324
- return null;
1325
- }
1326
- return parsed;
1327
- }
1328
- function addUniqueColor(colors, color) {
1329
- if (!color) return;
1330
- colors.set(`${color.hex}:${color.alpha}`, color);
1331
- }
1332
- function isTextRenderingFormControl(element) {
1333
- if (element instanceof HTMLTextAreaElement) return true;
1334
- if (element instanceof HTMLSelectElement) return true;
1335
- if (element instanceof HTMLButtonElement) return true;
1336
- if (element instanceof HTMLInputElement) {
1337
- const textlessInputTypes = /* @__PURE__ */ new Set([
1338
- "hidden",
1339
- "checkbox",
1340
- "radio",
1341
- "range",
1342
- "color",
1343
- "file",
1344
- "image"
1345
- ]);
1346
- return !textlessInputTypes.has(element.type.toLowerCase());
1347
- }
1348
- return false;
1349
- }
1350
- function hasRenderableTextNode(element) {
1351
- if (element.isContentEditable) return true;
1352
- if (isTextRenderingFormControl(element)) return true;
1353
- if (!element.textContent?.trim()) return false;
1354
- if (hasDirectNonWhitespaceText(element)) return true;
1355
- const tagName = element.tagName.toLowerCase();
1356
- return TEXT_ELEMENT_TAGS.has(tagName) || element.children.length === 0;
1357
- }
1358
- function getComputedBoxShadow(element) {
1359
- const computed = window.getComputedStyle(element);
1360
- const value = computed.boxShadow.trim();
1361
- return value || "none";
1362
- }
1363
- function getComputedColorStyles(element) {
1364
- const computed = window.getComputedStyle(element);
1365
- const borderSides = [
1366
- { style: computed.borderTopStyle, width: computed.borderTopWidth, color: computed.borderTopColor },
1367
- { style: computed.borderRightStyle, width: computed.borderRightWidth, color: computed.borderRightColor },
1368
- { style: computed.borderBottomStyle, width: computed.borderBottomWidth, color: computed.borderBottomColor },
1369
- { style: computed.borderLeftStyle, width: computed.borderLeftWidth, color: computed.borderLeftColor }
1370
- ];
1371
- const visibleBorderSide = borderSides.find((side) => isVisibleBorderSide(side));
1372
- const hasBorder = Boolean(visibleBorderSide);
1373
- const hasOutline = hasVisibleOutline(computed);
1374
- return {
1375
- backgroundColor: parseColorValue(computed.backgroundColor),
1376
- color: parseColorValue(computed.color),
1377
- borderColor: hasBorder && visibleBorderSide ? parseColorValue(visibleBorderSide.color) : TRANSPARENT_COLOR,
1378
- outlineColor: hasOutline ? parseColorValue(computed.outlineColor) : TRANSPARENT_COLOR
1379
- };
1380
- }
1381
- function getSelectionColors(element) {
1382
- const uniqueColors = /* @__PURE__ */ new Map();
1383
- const queue = [element];
1384
- for (let index = 0; index < queue.length; index++) {
1385
- const node = queue[index];
1386
- const computed = window.getComputedStyle(node);
1387
- if (computed.display === "none") {
1388
- continue;
1389
- }
1390
- const isVisibilityHidden = computed.visibility === "hidden" || computed.visibility === "collapse";
1391
- const currentTextColor = computed.color;
1392
- if (!isVisibilityHidden) {
1393
- addUniqueColor(uniqueColors, parseVisibleColor(computed.backgroundColor));
1394
- if (node instanceof HTMLElement && hasRenderableTextNode(node)) {
1395
- addUniqueColor(uniqueColors, parseVisibleColor(currentTextColor));
1396
- }
1397
- const borderSides = [
1398
- { style: computed.borderTopStyle, width: computed.borderTopWidth, color: computed.borderTopColor },
1399
- { style: computed.borderRightStyle, width: computed.borderRightWidth, color: computed.borderRightColor },
1400
- { style: computed.borderBottomStyle, width: computed.borderBottomWidth, color: computed.borderBottomColor },
1401
- { style: computed.borderLeftStyle, width: computed.borderLeftWidth, color: computed.borderLeftColor }
1402
- ];
1403
- for (const side of borderSides) {
1404
- if (!isVisibleBorderSide(side)) continue;
1405
- addUniqueColor(uniqueColors, parseVisibleColor(side.color, currentTextColor));
1406
- }
1407
- if (hasVisibleOutline(computed)) {
1408
- addUniqueColor(uniqueColors, parseVisibleColor(computed.outlineColor, currentTextColor));
1409
- }
1410
- if (node instanceof SVGElement) {
1411
- const fillColor = parseVisibleColor(computed.getPropertyValue("fill"), currentTextColor) ?? parseVisibleColor(node.getAttribute("fill") ?? "", currentTextColor);
1412
- const strokeColor = parseVisibleColor(computed.getPropertyValue("stroke"), currentTextColor) ?? parseVisibleColor(node.getAttribute("stroke") ?? "", currentTextColor);
1413
- addUniqueColor(uniqueColors, fillColor);
1414
- addUniqueColor(uniqueColors, strokeColor);
1415
- }
1416
- }
1417
- for (const child of node.children) {
1418
- queue.push(child);
1419
- }
1420
- }
1421
- return Array.from(uniqueColors.values());
1422
- }
1423
- function getAllComputedStyles(element) {
1424
- const { spacing, borderRadius, flex } = getComputedStyles(element);
1425
- return {
1426
- spacing,
1427
- borderRadius,
1428
- border: getComputedBorderStyles(element),
1429
- flex,
1430
- sizing: getComputedSizing(element),
1431
- color: getComputedColorStyles(element),
1432
- boxShadow: getComputedBoxShadow(element),
1433
- typography: getComputedTypography(element)
1434
- };
1435
- }
1436
1520
  var colorPropertyToCSSMap = {
1437
1521
  backgroundColor: "background-color",
1438
1522
  color: "color",
@@ -1945,7 +2029,7 @@ function findChildAtPoint(parent, clientX, clientY) {
1945
2029
  return clientX >= r.left && clientX <= r.right && clientY >= r.top && clientY <= r.bottom;
1946
2030
  });
1947
2031
  if (hit) return hit;
1948
- if (children.length === 1 && !hasDirectNonWhitespaceText(parent)) return children[0];
2032
+ if (children.length === 1 && !hasDirectNonWhitespaceText2(parent)) return children[0];
1949
2033
  return null;
1950
2034
  }
1951
2035
  function elementFromPointWithoutOverlays(x, y) {
@@ -2506,7 +2590,7 @@ function buildElementContext(locator) {
2506
2590
  return buildLocatorContextLines(locator).join("\n");
2507
2591
  }
2508
2592
  function hasSessionEditChanges(edit) {
2509
- return Object.keys(edit.pendingStyles).length > 0 || Boolean(edit.textEdit) || Boolean(edit.move);
2593
+ return Object.keys(edit.pendingStyles).length > 0 || Boolean(edit.textEdit) || Boolean(edit.move) || Boolean(edit.deleted);
2510
2594
  }
2511
2595
  function partitionMultiSelectedEdits(elements, sessionEditsRef) {
2512
2596
  const editsWithChanges = [];
@@ -3028,7 +3112,7 @@ function buildMoveEntries(edits) {
3028
3112
  let noopMoveCount = 0;
3029
3113
  for (const edit of edits) {
3030
3114
  const move = edit.move;
3031
- if (!move) continue;
3115
+ if (!move || edit.deleted) continue;
3032
3116
  const subject = buildAnchorRef(
3033
3117
  getElementDisplayName(edit.element) || edit.locator.tagName,
3034
3118
  edit.locator.domSelector,
@@ -3196,19 +3280,22 @@ function getExportContentProfile(edits, comments, movePlanOrContext) {
3196
3280
  hasCssEdits: edits.some((e) => Object.keys(e.pendingStyles).length > 0),
3197
3281
  hasTextEdits: edits.some((e) => e.textEdit != null),
3198
3282
  hasMoves: moveOpCount > 0,
3199
- hasComments: comments.length > 0
3283
+ hasComments: comments.length > 0,
3284
+ hasDeletes: edits.some((e) => e.deleted)
3200
3285
  };
3201
3286
  }
3202
3287
  function buildExportInstruction(profile) {
3203
3288
  const { hasCssEdits, hasTextEdits, hasMoves, hasComments } = profile;
3204
- if (!hasCssEdits && !hasTextEdits && !hasMoves && !hasComments) return "";
3205
- if (!hasCssEdits && !hasTextEdits && !hasMoves) {
3289
+ const hasDeletes = Boolean(profile.hasDeletes);
3290
+ if (!hasCssEdits && !hasTextEdits && !hasMoves && !hasComments && !hasDeletes) return "";
3291
+ if (!hasCssEdits && !hasTextEdits && !hasMoves && !hasDeletes) {
3206
3292
  return hasComments ? "Address this feedback on the UI. Use the provided source location and selector to find each element in the codebase." : "";
3207
3293
  }
3208
3294
  const parts = [];
3209
3295
  if (hasCssEdits) parts.push("Apply the CSS changes to the targeted elements using the project's existing styling approach (Tailwind, CSS modules, etc.). Map values to existing CSS variables, design tokens, or utility classes already used in the project whenever possible.");
3210
3296
  if (hasTextEdits) parts.push("Update the text content as specified.");
3211
3297
  if (hasMoves) parts.push("Implement the move plan below directly in source code. For `structural_move`, reorder/reparent elements using the target anchors. For `layout_refactor`, apply the listed flex/grid refactor steps. Do NOT simulate movement with absolute positioning, left/top offsets, transform, or margin hacks.");
3298
+ if (hasDeletes) parts.push("Delete the elements marked for deletion from the source code \u2014 remove their markup/JSX (and any now-dead props, handlers, or imports they solely used).");
3212
3299
  if (hasComments) parts.push("Address the comments on the relevant elements.");
3213
3300
  return `${parts.join(" ")} Use the provided source locations, selectors, and context HTML to locate each element in the codebase.`;
3214
3301
  }
@@ -3243,6 +3330,13 @@ function buildSessionExport(edits, comments = [], options) {
3243
3330
  blocks.push(planLines.join("\n"));
3244
3331
  }
3245
3332
  for (const edit of edits) {
3333
+ if (edit.deleted) {
3334
+ const lines = buildLocatorContextLines(edit.locator);
3335
+ lines.push("");
3336
+ lines.push("action: delete this element \u2014 remove it from the source");
3337
+ blocks.push(lines.join("\n"));
3338
+ continue;
3339
+ }
3246
3340
  const moveIntent = getMoveIntentForEdit(edit, planContext);
3247
3341
  const hasMove = Boolean(moveIntent);
3248
3342
  const hasStyleOrText = Object.keys(edit.pendingStyles).length > 0 || edit.textEdit != null;