made-refine 0.2.21 → 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.mjs CHANGED
@@ -415,14 +415,7 @@ function getReactComponentInfo(element) {
415
415
  }
416
416
  return { ...getRenderStack(fiber), elementSourceFile };
417
417
  }
418
- var EXCLUDED_PROP_KEYS = /* @__PURE__ */ new Set([
419
- "className",
420
- "style",
421
- "children",
422
- "ref",
423
- "key",
424
- "render"
425
- ]);
418
+ var EXCLUDED_PROP_KEYS = /* @__PURE__ */ new Set(["className", "style", "children", "ref", "key", "render"]);
426
419
  function serializePropValue(value) {
427
420
  if (typeof value === "function") return "[function]";
428
421
  if (typeof value === "symbol") return void 0;
@@ -533,19 +526,7 @@ function classifyComponentFiber(fiber, frames, elementSourceFile) {
533
526
  return { isComponentPrimitive: false };
534
527
  }
535
528
 
536
- // src/utils.ts
537
- function clamp(value, min, max) {
538
- if (!Number.isFinite(value)) return min;
539
- if (max < min) return min;
540
- return Math.max(min, Math.min(max, value));
541
- }
542
- function isInputFocused() {
543
- let active = document.activeElement;
544
- while (active?.shadowRoot?.activeElement) {
545
- active = active.shadowRoot.activeElement;
546
- }
547
- return active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active instanceof HTMLElement && active.isContentEditable;
548
- }
529
+ // src/utils/computed-styles.ts
549
530
  function getComputedStyles(element) {
550
531
  const computed = window.getComputedStyle(element);
551
532
  return {
@@ -654,6 +635,255 @@ function getOriginalInlineStyles(element) {
654
635
  }
655
636
  return styles;
656
637
  }
638
+ function getComputedTypography(element) {
639
+ const computed = window.getComputedStyle(element);
640
+ let textVerticalAlign = "flex-start";
641
+ if (computed.display === "flex" || computed.display === "inline-flex") {
642
+ const alignItems = computed.alignItems;
643
+ if (alignItems === "center") textVerticalAlign = "center";
644
+ else if (alignItems === "flex-end" || alignItems === "end") textVerticalAlign = "flex-end";
645
+ }
646
+ const lineHeight = computed.lineHeight === "normal" ? {
647
+ numericValue: parseFloat(computed.fontSize) * 1.2,
648
+ unit: "px",
649
+ raw: `${Math.round(parseFloat(computed.fontSize) * 1.2)}px`
650
+ } : parsePropertyValue(computed.lineHeight);
651
+ const fontSize = parseFloat(computed.fontSize);
652
+ let letterSpacing;
653
+ if (computed.letterSpacing === "normal") {
654
+ letterSpacing = { numericValue: 0, unit: "em", raw: "0em" };
655
+ } else {
656
+ const parsed = parsePropertyValue(computed.letterSpacing);
657
+ if (parsed.unit === "px" && fontSize > 0) {
658
+ const emValue = Math.round(parsed.numericValue / fontSize * 100) / 100;
659
+ letterSpacing = { numericValue: emValue, unit: "em", raw: `${emValue}em` };
660
+ } else {
661
+ letterSpacing = parsed;
662
+ }
663
+ }
664
+ return {
665
+ fontFamily: computed.fontFamily,
666
+ fontWeight: computed.fontWeight,
667
+ fontSize: parsePropertyValue(computed.fontSize),
668
+ lineHeight,
669
+ letterSpacing,
670
+ textAlign: computed.textAlign,
671
+ textVerticalAlign
672
+ };
673
+ }
674
+ function getComputedSizing(element) {
675
+ return {
676
+ width: getSizingValue(element, "width"),
677
+ height: getSizingValue(element, "height")
678
+ };
679
+ }
680
+ var TEXT_ELEMENT_TAGS = /* @__PURE__ */ new Set([
681
+ "p",
682
+ "h1",
683
+ "h2",
684
+ "h3",
685
+ "h4",
686
+ "h5",
687
+ "h6",
688
+ "span",
689
+ "label",
690
+ "a",
691
+ "strong",
692
+ "em",
693
+ "small",
694
+ "blockquote",
695
+ "li",
696
+ "td",
697
+ "th",
698
+ "caption",
699
+ "figcaption",
700
+ "legend",
701
+ "dt",
702
+ "dd",
703
+ "abbr",
704
+ "cite",
705
+ "code",
706
+ "pre"
707
+ ]);
708
+ function hasDirectNonWhitespaceText(element) {
709
+ return Array.from(element.childNodes).some(
710
+ (node) => node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim())
711
+ );
712
+ }
713
+ var TRANSPARENT_COLOR = { hex: "000000", alpha: 0, raw: "transparent" };
714
+ function isVisibleBorderSide(side) {
715
+ return side.style !== "none" && side.style !== "hidden" && parseFloat(side.width) > 0;
716
+ }
717
+ function hasVisibleOutline(computed) {
718
+ return computed.outlineStyle !== "none" && parseFloat(computed.outlineWidth) > 0;
719
+ }
720
+ function parseVisibleColor(value, fallbackCurrentColor) {
721
+ const raw = value.trim();
722
+ const lowered = raw.toLowerCase();
723
+ if (!raw || lowered === "none" || lowered === "transparent") {
724
+ return null;
725
+ }
726
+ const resolved = /^currentcolor$/i.test(raw) ? fallbackCurrentColor ?? raw : raw;
727
+ const parsed = parseColorValue(resolved);
728
+ if (parsed.alpha <= 0) {
729
+ return null;
730
+ }
731
+ return parsed;
732
+ }
733
+ function addUniqueColor(colors, color) {
734
+ if (!color) return;
735
+ colors.set(`${color.hex}:${color.alpha}`, color);
736
+ }
737
+ function isTextRenderingFormControl(element) {
738
+ if (element instanceof HTMLTextAreaElement) return true;
739
+ if (element instanceof HTMLSelectElement) return true;
740
+ if (element instanceof HTMLButtonElement) return true;
741
+ if (element instanceof HTMLInputElement) {
742
+ const textlessInputTypes = /* @__PURE__ */ new Set([
743
+ "hidden",
744
+ "checkbox",
745
+ "radio",
746
+ "range",
747
+ "color",
748
+ "file",
749
+ "image"
750
+ ]);
751
+ return !textlessInputTypes.has(element.type.toLowerCase());
752
+ }
753
+ return false;
754
+ }
755
+ function hasRenderableTextNode(element) {
756
+ if (element.isContentEditable) return true;
757
+ if (isTextRenderingFormControl(element)) return true;
758
+ if (!element.textContent?.trim()) return false;
759
+ if (hasDirectNonWhitespaceText(element)) return true;
760
+ const tagName = element.tagName.toLowerCase();
761
+ return TEXT_ELEMENT_TAGS.has(tagName) || element.children.length === 0;
762
+ }
763
+ function getComputedBoxShadow(element) {
764
+ const computed = window.getComputedStyle(element);
765
+ const value = computed.boxShadow.trim();
766
+ return value || "none";
767
+ }
768
+ function getComputedColorStyles(element) {
769
+ const computed = window.getComputedStyle(element);
770
+ const borderSides = [
771
+ {
772
+ style: computed.borderTopStyle,
773
+ width: computed.borderTopWidth,
774
+ color: computed.borderTopColor
775
+ },
776
+ {
777
+ style: computed.borderRightStyle,
778
+ width: computed.borderRightWidth,
779
+ color: computed.borderRightColor
780
+ },
781
+ {
782
+ style: computed.borderBottomStyle,
783
+ width: computed.borderBottomWidth,
784
+ color: computed.borderBottomColor
785
+ },
786
+ {
787
+ style: computed.borderLeftStyle,
788
+ width: computed.borderLeftWidth,
789
+ color: computed.borderLeftColor
790
+ }
791
+ ];
792
+ const visibleBorderSide = borderSides.find((side) => isVisibleBorderSide(side));
793
+ const hasBorder = Boolean(visibleBorderSide);
794
+ const hasOutline = hasVisibleOutline(computed);
795
+ return {
796
+ backgroundColor: parseColorValue(computed.backgroundColor),
797
+ color: parseColorValue(computed.color),
798
+ borderColor: hasBorder && visibleBorderSide ? parseColorValue(visibleBorderSide.color) : TRANSPARENT_COLOR,
799
+ outlineColor: hasOutline ? parseColorValue(computed.outlineColor) : TRANSPARENT_COLOR
800
+ };
801
+ }
802
+ function getSelectionColors(element) {
803
+ const uniqueColors = /* @__PURE__ */ new Map();
804
+ const queue = [element];
805
+ for (let index = 0; index < queue.length; index++) {
806
+ const node = queue[index];
807
+ const computed = window.getComputedStyle(node);
808
+ if (computed.display === "none") {
809
+ continue;
810
+ }
811
+ const isVisibilityHidden = computed.visibility === "hidden" || computed.visibility === "collapse";
812
+ const currentTextColor = computed.color;
813
+ if (!isVisibilityHidden) {
814
+ addUniqueColor(uniqueColors, parseVisibleColor(computed.backgroundColor));
815
+ if (node instanceof HTMLElement && hasRenderableTextNode(node)) {
816
+ addUniqueColor(uniqueColors, parseVisibleColor(currentTextColor));
817
+ }
818
+ const borderSides = [
819
+ {
820
+ style: computed.borderTopStyle,
821
+ width: computed.borderTopWidth,
822
+ color: computed.borderTopColor
823
+ },
824
+ {
825
+ style: computed.borderRightStyle,
826
+ width: computed.borderRightWidth,
827
+ color: computed.borderRightColor
828
+ },
829
+ {
830
+ style: computed.borderBottomStyle,
831
+ width: computed.borderBottomWidth,
832
+ color: computed.borderBottomColor
833
+ },
834
+ {
835
+ style: computed.borderLeftStyle,
836
+ width: computed.borderLeftWidth,
837
+ color: computed.borderLeftColor
838
+ }
839
+ ];
840
+ for (const side of borderSides) {
841
+ if (!isVisibleBorderSide(side)) continue;
842
+ addUniqueColor(uniqueColors, parseVisibleColor(side.color, currentTextColor));
843
+ }
844
+ if (hasVisibleOutline(computed)) {
845
+ addUniqueColor(uniqueColors, parseVisibleColor(computed.outlineColor, currentTextColor));
846
+ }
847
+ if (node instanceof SVGElement) {
848
+ const fillColor = parseVisibleColor(computed.getPropertyValue("fill"), currentTextColor) ?? parseVisibleColor(node.getAttribute("fill") ?? "", currentTextColor);
849
+ const strokeColor = parseVisibleColor(computed.getPropertyValue("stroke"), currentTextColor) ?? parseVisibleColor(node.getAttribute("stroke") ?? "", currentTextColor);
850
+ addUniqueColor(uniqueColors, fillColor);
851
+ addUniqueColor(uniqueColors, strokeColor);
852
+ }
853
+ }
854
+ for (const child of node.children) {
855
+ queue.push(child);
856
+ }
857
+ }
858
+ return Array.from(uniqueColors.values());
859
+ }
860
+ function getAllComputedStyles(element) {
861
+ const { spacing, borderRadius, flex } = getComputedStyles(element);
862
+ return {
863
+ spacing,
864
+ borderRadius,
865
+ border: getComputedBorderStyles(element),
866
+ flex,
867
+ sizing: getComputedSizing(element),
868
+ color: getComputedColorStyles(element),
869
+ boxShadow: getComputedBoxShadow(element),
870
+ typography: getComputedTypography(element)
871
+ };
872
+ }
873
+
874
+ // src/utils.ts
875
+ function clamp(value, min, max) {
876
+ if (!Number.isFinite(value)) return min;
877
+ if (max < min) return min;
878
+ return Math.max(min, Math.min(max, value));
879
+ }
880
+ function isInputFocused() {
881
+ let active = document.activeElement;
882
+ while (active?.shadowRoot?.activeElement) {
883
+ active = active.shadowRoot.activeElement;
884
+ }
885
+ return active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active instanceof HTMLElement && active.isContentEditable;
886
+ }
657
887
  var spacingScale = { 0: "0", 1: "px", 2: "0.5", 4: "1", 8: "2", 12: "3", 16: "4", 20: "5", 24: "6", 32: "8" };
658
888
  var tailwindClassMap = {
659
889
  padding: { prefix: "p", scale: spacingScale },
@@ -980,7 +1210,7 @@ var typographyPropertyToCSSMap = {
980
1210
  textAlign: "text-align",
981
1211
  textVerticalAlign: "align-items"
982
1212
  };
983
- var TEXT_ELEMENT_TAGS = /* @__PURE__ */ new Set([
1213
+ var TEXT_ELEMENT_TAGS2 = /* @__PURE__ */ new Set([
984
1214
  "p",
985
1215
  "h1",
986
1216
  "h2",
@@ -1008,17 +1238,17 @@ var TEXT_ELEMENT_TAGS = /* @__PURE__ */ new Set([
1008
1238
  "code",
1009
1239
  "pre"
1010
1240
  ]);
1011
- function hasDirectNonWhitespaceText(element) {
1241
+ function hasDirectNonWhitespaceText2(element) {
1012
1242
  return Array.from(element.childNodes).some(
1013
1243
  (node) => node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim())
1014
1244
  );
1015
1245
  }
1016
1246
  function isTextElement2(element) {
1017
1247
  const tagName = element.tagName.toLowerCase();
1018
- if (TEXT_ELEMENT_TAGS.has(tagName)) {
1248
+ if (TEXT_ELEMENT_TAGS2.has(tagName)) {
1019
1249
  return true;
1020
1250
  }
1021
- if (hasDirectNonWhitespaceText(element)) {
1251
+ if (hasDirectNonWhitespaceText2(element)) {
1022
1252
  return true;
1023
1253
  }
1024
1254
  if (element.children.length === 0 && element.textContent?.trim()) {
@@ -1026,38 +1256,6 @@ function isTextElement2(element) {
1026
1256
  }
1027
1257
  return false;
1028
1258
  }
1029
- function getComputedTypography(element) {
1030
- const computed = window.getComputedStyle(element);
1031
- let textVerticalAlign = "flex-start";
1032
- if (computed.display === "flex" || computed.display === "inline-flex") {
1033
- const alignItems = computed.alignItems;
1034
- if (alignItems === "center") textVerticalAlign = "center";
1035
- else if (alignItems === "flex-end" || alignItems === "end") textVerticalAlign = "flex-end";
1036
- }
1037
- 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);
1038
- const fontSize = parseFloat(computed.fontSize);
1039
- let letterSpacing;
1040
- if (computed.letterSpacing === "normal") {
1041
- letterSpacing = { numericValue: 0, unit: "em", raw: "0em" };
1042
- } else {
1043
- const parsed = parsePropertyValue(computed.letterSpacing);
1044
- if (parsed.unit === "px" && fontSize > 0) {
1045
- const emValue = Math.round(parsed.numericValue / fontSize * 100) / 100;
1046
- letterSpacing = { numericValue: emValue, unit: "em", raw: `${emValue}em` };
1047
- } else {
1048
- letterSpacing = parsed;
1049
- }
1050
- }
1051
- return {
1052
- fontFamily: computed.fontFamily,
1053
- fontWeight: computed.fontWeight,
1054
- fontSize: parsePropertyValue(computed.fontSize),
1055
- lineHeight,
1056
- letterSpacing,
1057
- textAlign: computed.textAlign,
1058
- textVerticalAlign
1059
- };
1060
- }
1061
1259
  function detectSizingMode(element, dimension) {
1062
1260
  const computed = window.getComputedStyle(element);
1063
1261
  const inlineValue = element.style[dimension];
@@ -1105,12 +1303,6 @@ function getSizingValue(element, dimension) {
1105
1303
  }
1106
1304
  };
1107
1305
  }
1108
- function getComputedSizing(element) {
1109
- return {
1110
- width: getSizingValue(element, "width"),
1111
- height: getSizingValue(element, "height")
1112
- };
1113
- }
1114
1306
  function sizingValueToCSS(sizing) {
1115
1307
  switch (sizing.mode) {
1116
1308
  case "fill":
@@ -1230,134 +1422,6 @@ function parseColorValue(cssValue) {
1230
1422
  }
1231
1423
  return parseNamedColor(raw);
1232
1424
  }
1233
- var TRANSPARENT_COLOR = { hex: "000000", alpha: 0, raw: "transparent" };
1234
- function isVisibleBorderSide(side) {
1235
- return side.style !== "none" && side.style !== "hidden" && parseFloat(side.width) > 0;
1236
- }
1237
- function hasVisibleOutline(computed) {
1238
- return computed.outlineStyle !== "none" && parseFloat(computed.outlineWidth) > 0;
1239
- }
1240
- function parseVisibleColor(value, fallbackCurrentColor) {
1241
- const raw = value.trim();
1242
- const lowered = raw.toLowerCase();
1243
- if (!raw || lowered === "none" || lowered === "transparent") {
1244
- return null;
1245
- }
1246
- const resolved = /^currentcolor$/i.test(raw) ? fallbackCurrentColor ?? raw : raw;
1247
- const parsed = parseColorValue(resolved);
1248
- if (parsed.alpha <= 0) {
1249
- return null;
1250
- }
1251
- return parsed;
1252
- }
1253
- function addUniqueColor(colors, color) {
1254
- if (!color) return;
1255
- colors.set(`${color.hex}:${color.alpha}`, color);
1256
- }
1257
- function isTextRenderingFormControl(element) {
1258
- if (element instanceof HTMLTextAreaElement) return true;
1259
- if (element instanceof HTMLSelectElement) return true;
1260
- if (element instanceof HTMLButtonElement) return true;
1261
- if (element instanceof HTMLInputElement) {
1262
- const textlessInputTypes = /* @__PURE__ */ new Set([
1263
- "hidden",
1264
- "checkbox",
1265
- "radio",
1266
- "range",
1267
- "color",
1268
- "file",
1269
- "image"
1270
- ]);
1271
- return !textlessInputTypes.has(element.type.toLowerCase());
1272
- }
1273
- return false;
1274
- }
1275
- function hasRenderableTextNode(element) {
1276
- if (element.isContentEditable) return true;
1277
- if (isTextRenderingFormControl(element)) return true;
1278
- if (!element.textContent?.trim()) return false;
1279
- if (hasDirectNonWhitespaceText(element)) return true;
1280
- const tagName = element.tagName.toLowerCase();
1281
- return TEXT_ELEMENT_TAGS.has(tagName) || element.children.length === 0;
1282
- }
1283
- function getComputedBoxShadow(element) {
1284
- const computed = window.getComputedStyle(element);
1285
- const value = computed.boxShadow.trim();
1286
- return value || "none";
1287
- }
1288
- function getComputedColorStyles(element) {
1289
- const computed = window.getComputedStyle(element);
1290
- const borderSides = [
1291
- { style: computed.borderTopStyle, width: computed.borderTopWidth, color: computed.borderTopColor },
1292
- { style: computed.borderRightStyle, width: computed.borderRightWidth, color: computed.borderRightColor },
1293
- { style: computed.borderBottomStyle, width: computed.borderBottomWidth, color: computed.borderBottomColor },
1294
- { style: computed.borderLeftStyle, width: computed.borderLeftWidth, color: computed.borderLeftColor }
1295
- ];
1296
- const visibleBorderSide = borderSides.find((side) => isVisibleBorderSide(side));
1297
- const hasBorder = Boolean(visibleBorderSide);
1298
- const hasOutline = hasVisibleOutline(computed);
1299
- return {
1300
- backgroundColor: parseColorValue(computed.backgroundColor),
1301
- color: parseColorValue(computed.color),
1302
- borderColor: hasBorder && visibleBorderSide ? parseColorValue(visibleBorderSide.color) : TRANSPARENT_COLOR,
1303
- outlineColor: hasOutline ? parseColorValue(computed.outlineColor) : TRANSPARENT_COLOR
1304
- };
1305
- }
1306
- function getSelectionColors(element) {
1307
- const uniqueColors = /* @__PURE__ */ new Map();
1308
- const queue = [element];
1309
- for (let index = 0; index < queue.length; index++) {
1310
- const node = queue[index];
1311
- const computed = window.getComputedStyle(node);
1312
- if (computed.display === "none") {
1313
- continue;
1314
- }
1315
- const isVisibilityHidden = computed.visibility === "hidden" || computed.visibility === "collapse";
1316
- const currentTextColor = computed.color;
1317
- if (!isVisibilityHidden) {
1318
- addUniqueColor(uniqueColors, parseVisibleColor(computed.backgroundColor));
1319
- if (node instanceof HTMLElement && hasRenderableTextNode(node)) {
1320
- addUniqueColor(uniqueColors, parseVisibleColor(currentTextColor));
1321
- }
1322
- const borderSides = [
1323
- { style: computed.borderTopStyle, width: computed.borderTopWidth, color: computed.borderTopColor },
1324
- { style: computed.borderRightStyle, width: computed.borderRightWidth, color: computed.borderRightColor },
1325
- { style: computed.borderBottomStyle, width: computed.borderBottomWidth, color: computed.borderBottomColor },
1326
- { style: computed.borderLeftStyle, width: computed.borderLeftWidth, color: computed.borderLeftColor }
1327
- ];
1328
- for (const side of borderSides) {
1329
- if (!isVisibleBorderSide(side)) continue;
1330
- addUniqueColor(uniqueColors, parseVisibleColor(side.color, currentTextColor));
1331
- }
1332
- if (hasVisibleOutline(computed)) {
1333
- addUniqueColor(uniqueColors, parseVisibleColor(computed.outlineColor, currentTextColor));
1334
- }
1335
- if (node instanceof SVGElement) {
1336
- const fillColor = parseVisibleColor(computed.getPropertyValue("fill"), currentTextColor) ?? parseVisibleColor(node.getAttribute("fill") ?? "", currentTextColor);
1337
- const strokeColor = parseVisibleColor(computed.getPropertyValue("stroke"), currentTextColor) ?? parseVisibleColor(node.getAttribute("stroke") ?? "", currentTextColor);
1338
- addUniqueColor(uniqueColors, fillColor);
1339
- addUniqueColor(uniqueColors, strokeColor);
1340
- }
1341
- }
1342
- for (const child of node.children) {
1343
- queue.push(child);
1344
- }
1345
- }
1346
- return Array.from(uniqueColors.values());
1347
- }
1348
- function getAllComputedStyles(element) {
1349
- const { spacing, borderRadius, flex } = getComputedStyles(element);
1350
- return {
1351
- spacing,
1352
- borderRadius,
1353
- border: getComputedBorderStyles(element),
1354
- flex,
1355
- sizing: getComputedSizing(element),
1356
- color: getComputedColorStyles(element),
1357
- boxShadow: getComputedBoxShadow(element),
1358
- typography: getComputedTypography(element)
1359
- };
1360
- }
1361
1425
  var colorPropertyToCSSMap = {
1362
1426
  backgroundColor: "background-color",
1363
1427
  color: "color",
@@ -1870,7 +1934,7 @@ function findChildAtPoint(parent, clientX, clientY) {
1870
1934
  return clientX >= r.left && clientX <= r.right && clientY >= r.top && clientY <= r.bottom;
1871
1935
  });
1872
1936
  if (hit) return hit;
1873
- if (children.length === 1 && !hasDirectNonWhitespaceText(parent)) return children[0];
1937
+ if (children.length === 1 && !hasDirectNonWhitespaceText2(parent)) return children[0];
1874
1938
  return null;
1875
1939
  }
1876
1940
  function elementFromPointWithoutOverlays(x, y) {