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/README.md +1 -1
- package/dist/babel.cjs +5 -1
- package/dist/index.d.mts +22 -4
- package/dist/index.d.ts +22 -4
- package/dist/index.js +1525 -793
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1526 -794
- package/dist/index.mjs.map +1 -1
- package/dist/preload/preload.js +26 -3
- package/dist/preload.js +25 -3
- package/dist/preload.js.map +1 -1
- package/dist/preload.mjs +10 -3
- package/dist/preload.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/{utils-CpmjloNg.d.mts → utils-ovHeRo0g.d.mts} +20 -16
- package/dist/{utils-CpmjloNg.d.ts → utils-ovHeRo0g.d.ts} +20 -16
- package/dist/utils.d.mts +1 -1
- package/dist/utils.d.ts +1 -1
- package/dist/utils.js +292 -198
- package/dist/utils.js.map +1 -1
- package/dist/utils.mjs +292 -198
- package/dist/utils.mjs.map +1 -1
- package/package.json +14 -3
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-
|
|
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
|
|
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
|
|
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
|
|
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 (
|
|
1343
|
+
if (TEXT_ELEMENT_TAGS2.has(tagName)) {
|
|
1094
1344
|
return true;
|
|
1095
1345
|
}
|
|
1096
|
-
if (
|
|
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 && !
|
|
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
|
-
|
|
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;
|