uivisor 0.1.9 → 0.2.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/overlay/index.js +1263 -73
- package/package.json +1 -1
package/dist/overlay/index.js
CHANGED
|
@@ -411,7 +411,8 @@ var ICONS = {
|
|
|
411
411
|
tablet: sv('<rect x="3.3" y="2.2" width="9.4" height="11.6" rx="1.6"/><path d="M7 11.7h2"/>'),
|
|
412
412
|
desktop: sv('<rect x="1.8" y="2.8" width="12.4" height="8" rx="1"/><path d="M5.8 14h4.4 M8 10.8v3.2"/>'),
|
|
413
413
|
live: sv('<circle cx="8" cy="8" r="2"/><path d="M4.6 4.6a4.8 4.8 0 0 0 0 6.8 M11.4 4.6a4.8 4.8 0 0 1 0 6.8"/>'),
|
|
414
|
-
all: sv('<path d="M8 2.5v11 M3.2 5.2l9.6 5.6 M12.8 5.2l-9.6 5.6"/>')
|
|
414
|
+
all: sv('<path d="M8 2.5v11 M3.2 5.2l9.6 5.6 M12.8 5.2l-9.6 5.6"/>'),
|
|
415
|
+
grip: '<svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor"><circle cx="6" cy="4" r="1.05"/><circle cx="6" cy="8" r="1.05"/><circle cx="6" cy="12" r="1.05"/><circle cx="10" cy="4" r="1.05"/><circle cx="10" cy="8" r="1.05"/><circle cx="10" cy="12" r="1.05"/></svg>'
|
|
415
416
|
};
|
|
416
417
|
var SECTIONS = [
|
|
417
418
|
{
|
|
@@ -456,10 +457,10 @@ var SECTIONS = [
|
|
|
456
457
|
{
|
|
457
458
|
title: "Size",
|
|
458
459
|
controls: [
|
|
459
|
-
{ kind: "len", css: "width", label: "Width", icon: ICONS.width },
|
|
460
|
-
{ kind: "len", css: "height", label: "Height", icon: ICONS.height },
|
|
461
|
-
{ kind: "len", css: "max-width", label: "Max W", icon: ICONS.width },
|
|
462
|
-
{ kind: "len", css: "min-height", label: "Min H", icon: ICONS.height }
|
|
460
|
+
{ kind: "len", css: "width", label: "Width", icon: ICONS.width, hideWhenAuto: true },
|
|
461
|
+
{ kind: "len", css: "height", label: "Height", icon: ICONS.height, hideWhenAuto: true },
|
|
462
|
+
{ kind: "len", css: "max-width", label: "Max W", icon: ICONS.width, hideWhenAuto: true },
|
|
463
|
+
{ kind: "len", css: "min-height", label: "Min H", icon: ICONS.height, hideWhenAuto: true }
|
|
463
464
|
]
|
|
464
465
|
},
|
|
465
466
|
{
|
|
@@ -736,6 +737,609 @@ function collectVarNames(rule, out) {
|
|
|
736
737
|
if (inner) for (const r of Array.from(inner)) collectVarNames(r, out);
|
|
737
738
|
}
|
|
738
739
|
|
|
740
|
+
// src/overlay/cssData.ts
|
|
741
|
+
var CSS_PROPERTY_DATA = [
|
|
742
|
+
{ "property": "display", "category": "Layout", "type": "enum", "keywords": ["block", "inline", "inline-block", "flex", "inline-flex", "grid", "inline-grid", "flow-root", "none", "contents", "table", "inline-table", "table-row-group", "table-header-group", "table-footer-group", "table-row", "table-cell", "table-column-group", "table-column", "table-caption", "list-item", "ruby"] },
|
|
743
|
+
{ "property": "position", "category": "Layout", "type": "enum", "keywords": ["static", "relative", "absolute", "fixed", "sticky"] },
|
|
744
|
+
{ "property": "top", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"], "box": "inset" },
|
|
745
|
+
{ "property": "right", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"], "box": "inset" },
|
|
746
|
+
{ "property": "bottom", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"], "box": "inset" },
|
|
747
|
+
{ "property": "left", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"], "box": "inset" },
|
|
748
|
+
{ "property": "inset", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"], "shorthand": true },
|
|
749
|
+
{ "property": "inset-block", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"], "shorthand": true },
|
|
750
|
+
{ "property": "inset-inline", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"], "shorthand": true },
|
|
751
|
+
{ "property": "inset-block-start", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"] },
|
|
752
|
+
{ "property": "inset-block-end", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"] },
|
|
753
|
+
{ "property": "inset-inline-start", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"] },
|
|
754
|
+
{ "property": "inset-inline-end", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"] },
|
|
755
|
+
{ "property": "float", "category": "Layout", "type": "enum", "keywords": ["left", "right", "none", "inline-start", "inline-end"] },
|
|
756
|
+
{ "property": "clear", "category": "Layout", "type": "enum", "keywords": ["none", "left", "right", "both", "inline-start", "inline-end"] },
|
|
757
|
+
{ "property": "visibility", "category": "Layout", "type": "enum", "keywords": ["visible", "hidden", "collapse"], "inherited": true },
|
|
758
|
+
{ "property": "z-index", "category": "Layout", "type": "integer", "keywords": ["auto"] },
|
|
759
|
+
{ "property": "box-sizing", "category": "Layout", "type": "enum", "keywords": ["content-box", "border-box"] },
|
|
760
|
+
{ "property": "overflow", "category": "Layout", "type": "enum", "keywords": ["visible", "hidden", "clip", "scroll", "auto"], "shorthand": true },
|
|
761
|
+
{ "property": "overflow-x", "category": "Layout", "type": "enum", "keywords": ["visible", "hidden", "clip", "scroll", "auto"] },
|
|
762
|
+
{ "property": "overflow-y", "category": "Layout", "type": "enum", "keywords": ["visible", "hidden", "clip", "scroll", "auto"] },
|
|
763
|
+
{ "property": "overflow-block", "category": "Layout", "type": "enum", "keywords": ["visible", "hidden", "clip", "scroll", "auto"] },
|
|
764
|
+
{ "property": "overflow-inline", "category": "Layout", "type": "enum", "keywords": ["visible", "hidden", "clip", "scroll", "auto"] },
|
|
765
|
+
{ "property": "overflow-clip-margin", "category": "Layout", "type": "length", "keywords": ["content-box", "padding-box", "border-box"], "units": ["px", "em", "rem"] },
|
|
766
|
+
{ "property": "isolation", "category": "Layout", "type": "enum", "keywords": ["auto", "isolate"] },
|
|
767
|
+
{ "property": "contain", "category": "Layout", "type": "enum", "keywords": ["none", "strict", "content", "size", "inline-size", "layout", "style", "paint"] },
|
|
768
|
+
{ "property": "content-visibility", "category": "Layout", "type": "enum", "keywords": ["visible", "auto", "hidden"] },
|
|
769
|
+
{ "property": "contain-intrinsic-size", "category": "Layout", "type": "length", "keywords": ["none", "auto"], "units": ["px", "em", "rem"], "shorthand": true },
|
|
770
|
+
{ "property": "contain-intrinsic-width", "category": "Layout", "type": "length", "keywords": ["none", "auto"], "units": ["px", "em", "rem"] },
|
|
771
|
+
{ "property": "contain-intrinsic-height", "category": "Layout", "type": "length", "keywords": ["none", "auto"], "units": ["px", "em", "rem"] },
|
|
772
|
+
{ "property": "contain-intrinsic-block-size", "category": "Layout", "type": "length", "keywords": ["none", "auto"], "units": ["px", "em", "rem"] },
|
|
773
|
+
{ "property": "contain-intrinsic-inline-size", "category": "Layout", "type": "length", "keywords": ["none", "auto"], "units": ["px", "em", "rem"] },
|
|
774
|
+
{ "property": "order", "category": "Layout", "type": "integer" },
|
|
775
|
+
{ "property": "flex", "category": "Flexbox", "type": "shorthand", "shorthand": true },
|
|
776
|
+
{ "property": "flex-grow", "category": "Flexbox", "type": "number" },
|
|
777
|
+
{ "property": "flex-shrink", "category": "Flexbox", "type": "number" },
|
|
778
|
+
{ "property": "flex-basis", "category": "Flexbox", "type": "length", "keywords": ["auto", "content", "max-content", "min-content", "fit-content"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
|
|
779
|
+
{ "property": "flex-direction", "category": "Flexbox", "type": "enum", "keywords": ["row", "row-reverse", "column", "column-reverse"] },
|
|
780
|
+
{ "property": "flex-wrap", "category": "Flexbox", "type": "enum", "keywords": ["nowrap", "wrap", "wrap-reverse"] },
|
|
781
|
+
{ "property": "flex-flow", "category": "Flexbox", "type": "shorthand", "keywords": ["row", "row-reverse", "column", "column-reverse", "nowrap", "wrap", "wrap-reverse"], "shorthand": true },
|
|
782
|
+
{ "property": "justify-content", "category": "Flexbox", "type": "enum", "keywords": ["normal", "flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly", "start", "end", "left", "right", "stretch", "safe", "unsafe"] },
|
|
783
|
+
{ "property": "align-items", "category": "Flexbox", "type": "enum", "keywords": ["normal", "stretch", "flex-start", "flex-end", "center", "baseline", "first baseline", "last baseline", "start", "end", "self-start", "self-end", "safe", "unsafe", "anchor-center"] },
|
|
784
|
+
{ "property": "align-content", "category": "Flexbox", "type": "enum", "keywords": ["normal", "flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly", "stretch", "start", "end", "baseline", "first baseline", "last baseline", "safe", "unsafe"] },
|
|
785
|
+
{ "property": "align-self", "category": "Flexbox", "type": "enum", "keywords": ["auto", "normal", "stretch", "flex-start", "flex-end", "center", "baseline", "first baseline", "last baseline", "start", "end", "self-start", "self-end", "safe", "unsafe", "anchor-center"] },
|
|
786
|
+
{ "property": "justify-self", "category": "Flexbox", "type": "enum", "keywords": ["auto", "normal", "stretch", "flex-start", "flex-end", "center", "baseline", "first baseline", "last baseline", "start", "end", "self-start", "self-end", "left", "right", "safe", "unsafe", "anchor-center"] },
|
|
787
|
+
{ "property": "justify-items", "category": "Flexbox", "type": "enum", "keywords": ["normal", "stretch", "flex-start", "flex-end", "center", "baseline", "first baseline", "last baseline", "start", "end", "self-start", "self-end", "left", "right", "legacy", "safe", "unsafe", "anchor-center"] },
|
|
788
|
+
{ "property": "place-content", "category": "Flexbox", "type": "shorthand", "keywords": ["normal", "stretch", "flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly", "start", "end", "left", "right", "baseline", "first baseline", "last baseline"], "shorthand": true },
|
|
789
|
+
{ "property": "place-items", "category": "Flexbox", "type": "shorthand", "keywords": ["normal", "stretch", "flex-start", "flex-end", "center", "baseline", "first baseline", "last baseline", "start", "end", "self-start", "self-end", "left", "right", "legacy"], "shorthand": true },
|
|
790
|
+
{ "property": "place-self", "category": "Flexbox", "type": "shorthand", "keywords": ["auto", "normal", "stretch", "flex-start", "flex-end", "center", "baseline", "first baseline", "last baseline", "start", "end", "self-start", "self-end"], "shorthand": true },
|
|
791
|
+
{ "property": "gap", "category": "Flexbox", "type": "shorthand", "keywords": ["normal"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
|
|
792
|
+
{ "property": "row-gap", "category": "Flexbox", "type": "length", "keywords": ["normal"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
|
|
793
|
+
{ "property": "column-gap", "category": "Flexbox", "type": "length", "keywords": ["normal"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
|
|
794
|
+
{ "property": "grid", "category": "Grid", "type": "shorthand", "shorthand": true },
|
|
795
|
+
{ "property": "grid-template", "category": "Grid", "type": "shorthand", "shorthand": true },
|
|
796
|
+
{ "property": "grid-template-columns", "category": "Grid", "type": "string", "keywords": ["none", "min-content", "max-content", "auto", "subgrid", "masonry"], "units": ["px", "em", "rem", "%", "fr", "vh", "vw", "ch"] },
|
|
797
|
+
{ "property": "grid-template-rows", "category": "Grid", "type": "string", "keywords": ["none", "min-content", "max-content", "auto", "subgrid", "masonry"], "units": ["px", "em", "rem", "%", "fr", "vh", "vw", "ch"] },
|
|
798
|
+
{ "property": "grid-template-areas", "category": "Grid", "type": "string", "keywords": ["none"] },
|
|
799
|
+
{ "property": "grid-auto-columns", "category": "Grid", "type": "length", "keywords": ["auto", "min-content", "max-content"], "units": ["px", "em", "rem", "%", "fr", "vh", "vw", "ch"] },
|
|
800
|
+
{ "property": "grid-auto-rows", "category": "Grid", "type": "length", "keywords": ["auto", "min-content", "max-content"], "units": ["px", "em", "rem", "%", "fr", "vh", "vw", "ch"] },
|
|
801
|
+
{ "property": "grid-auto-flow", "category": "Grid", "type": "enum", "keywords": ["row", "column", "dense"] },
|
|
802
|
+
{ "property": "grid-column", "category": "Grid", "type": "shorthand", "keywords": ["auto", "span"], "shorthand": true },
|
|
803
|
+
{ "property": "grid-row", "category": "Grid", "type": "shorthand", "keywords": ["auto", "span"], "shorthand": true },
|
|
804
|
+
{ "property": "grid-column-start", "category": "Grid", "type": "string", "keywords": ["auto", "span"] },
|
|
805
|
+
{ "property": "grid-column-end", "category": "Grid", "type": "string", "keywords": ["auto", "span"] },
|
|
806
|
+
{ "property": "grid-row-start", "category": "Grid", "type": "string", "keywords": ["auto", "span"] },
|
|
807
|
+
{ "property": "grid-row-end", "category": "Grid", "type": "string", "keywords": ["auto", "span"] },
|
|
808
|
+
{ "property": "grid-area", "category": "Grid", "type": "shorthand", "keywords": ["auto", "span"], "shorthand": true },
|
|
809
|
+
{ "property": "margin", "category": "Spacing", "type": "shorthand", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin", "shorthand": true },
|
|
810
|
+
{ "property": "margin-top", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
|
|
811
|
+
{ "property": "margin-right", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
|
|
812
|
+
{ "property": "margin-bottom", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
|
|
813
|
+
{ "property": "margin-left", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
|
|
814
|
+
{ "property": "margin-block", "category": "Spacing", "type": "shorthand", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin", "shorthand": true },
|
|
815
|
+
{ "property": "margin-block-start", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
|
|
816
|
+
{ "property": "margin-block-end", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
|
|
817
|
+
{ "property": "margin-inline", "category": "Spacing", "type": "shorthand", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin", "shorthand": true },
|
|
818
|
+
{ "property": "margin-inline-start", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
|
|
819
|
+
{ "property": "margin-inline-end", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
|
|
820
|
+
{ "property": "padding", "category": "Spacing", "type": "shorthand", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding", "shorthand": true },
|
|
821
|
+
{ "property": "padding-top", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
|
|
822
|
+
{ "property": "padding-right", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
|
|
823
|
+
{ "property": "padding-bottom", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
|
|
824
|
+
{ "property": "padding-left", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
|
|
825
|
+
{ "property": "padding-block", "category": "Spacing", "type": "shorthand", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding", "shorthand": true },
|
|
826
|
+
{ "property": "padding-block-start", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
|
|
827
|
+
{ "property": "padding-block-end", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
|
|
828
|
+
{ "property": "padding-inline", "category": "Spacing", "type": "shorthand", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding", "shorthand": true },
|
|
829
|
+
{ "property": "padding-inline-start", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
|
|
830
|
+
{ "property": "padding-inline-end", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
|
|
831
|
+
{ "property": "width", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
|
|
832
|
+
{ "property": "height", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
|
|
833
|
+
{ "property": "min-width", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
|
|
834
|
+
{ "property": "max-width", "category": "Sizing", "type": "length", "keywords": ["none", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
|
|
835
|
+
{ "property": "min-height", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
|
|
836
|
+
{ "property": "max-height", "category": "Sizing", "type": "length", "keywords": ["none", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
|
|
837
|
+
{ "property": "aspect-ratio", "category": "Sizing", "type": "number", "keywords": ["auto"] },
|
|
838
|
+
{ "property": "block-size", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
|
|
839
|
+
{ "property": "inline-size", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
|
|
840
|
+
{ "property": "min-block-size", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
|
|
841
|
+
{ "property": "max-block-size", "category": "Sizing", "type": "length", "keywords": ["none", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
|
|
842
|
+
{ "property": "min-inline-size", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
|
|
843
|
+
{ "property": "max-inline-size", "category": "Sizing", "type": "length", "keywords": ["none", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
|
|
844
|
+
{ "property": "object-fit", "category": "Sizing", "type": "enum", "keywords": ["fill", "contain", "cover", "none", "scale-down"] },
|
|
845
|
+
{ "property": "object-position", "category": "Sizing", "type": "length", "keywords": ["left", "right", "top", "bottom", "center"], "units": ["px", "%", "em", "rem"] },
|
|
846
|
+
{ "property": "border", "category": "Border", "type": "shorthand", "shorthand": true },
|
|
847
|
+
{ "property": "border-width", "category": "Border", "type": "shorthand", "shorthand": true },
|
|
848
|
+
{ "property": "border-style", "category": "Border", "type": "shorthand", "shorthand": true },
|
|
849
|
+
{ "property": "border-color", "category": "Border", "type": "shorthand", "shorthand": true },
|
|
850
|
+
{ "property": "border-top", "category": "Border", "type": "shorthand", "shorthand": true },
|
|
851
|
+
{ "property": "border-right", "category": "Border", "type": "shorthand", "shorthand": true },
|
|
852
|
+
{ "property": "border-bottom", "category": "Border", "type": "shorthand", "shorthand": true },
|
|
853
|
+
{ "property": "border-left", "category": "Border", "type": "shorthand", "shorthand": true },
|
|
854
|
+
{ "property": "border-top-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "border-width" },
|
|
855
|
+
{ "property": "border-right-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "border-width" },
|
|
856
|
+
{ "property": "border-bottom-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "border-width" },
|
|
857
|
+
{ "property": "border-left-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "border-width" },
|
|
858
|
+
{ "property": "border-top-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"], "box": "border-style" },
|
|
859
|
+
{ "property": "border-right-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"], "box": "border-style" },
|
|
860
|
+
{ "property": "border-bottom-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"], "box": "border-style" },
|
|
861
|
+
{ "property": "border-left-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"], "box": "border-style" },
|
|
862
|
+
{ "property": "border-top-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"], "box": "border-color" },
|
|
863
|
+
{ "property": "border-right-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"], "box": "border-color" },
|
|
864
|
+
{ "property": "border-bottom-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"], "box": "border-color" },
|
|
865
|
+
{ "property": "border-left-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"], "box": "border-color" },
|
|
866
|
+
{ "property": "border-block", "category": "Border", "type": "shorthand", "shorthand": true },
|
|
867
|
+
{ "property": "border-block-start", "category": "Border", "type": "shorthand", "shorthand": true },
|
|
868
|
+
{ "property": "border-block-end", "category": "Border", "type": "shorthand", "shorthand": true },
|
|
869
|
+
{ "property": "border-inline", "category": "Border", "type": "shorthand", "shorthand": true },
|
|
870
|
+
{ "property": "border-inline-start", "category": "Border", "type": "shorthand", "shorthand": true },
|
|
871
|
+
{ "property": "border-inline-end", "category": "Border", "type": "shorthand", "shorthand": true },
|
|
872
|
+
{ "property": "border-block-width", "category": "Border", "type": "shorthand", "shorthand": true },
|
|
873
|
+
{ "property": "border-inline-width", "category": "Border", "type": "shorthand", "shorthand": true },
|
|
874
|
+
{ "property": "border-block-style", "category": "Border", "type": "shorthand", "shorthand": true },
|
|
875
|
+
{ "property": "border-inline-style", "category": "Border", "type": "shorthand", "shorthand": true },
|
|
876
|
+
{ "property": "border-block-color", "category": "Border", "type": "shorthand", "shorthand": true },
|
|
877
|
+
{ "property": "border-inline-color", "category": "Border", "type": "shorthand", "shorthand": true },
|
|
878
|
+
{ "property": "border-block-start-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"] },
|
|
879
|
+
{ "property": "border-block-end-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"] },
|
|
880
|
+
{ "property": "border-inline-start-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"] },
|
|
881
|
+
{ "property": "border-inline-end-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"] },
|
|
882
|
+
{ "property": "border-block-start-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"] },
|
|
883
|
+
{ "property": "border-block-end-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"] },
|
|
884
|
+
{ "property": "border-inline-start-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"] },
|
|
885
|
+
{ "property": "border-inline-end-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"] },
|
|
886
|
+
{ "property": "border-block-start-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"] },
|
|
887
|
+
{ "property": "border-block-end-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"] },
|
|
888
|
+
{ "property": "border-inline-start-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"] },
|
|
889
|
+
{ "property": "border-inline-end-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"] },
|
|
890
|
+
{ "property": "border-radius", "category": "Border", "type": "shorthand", "shorthand": true },
|
|
891
|
+
{ "property": "border-top-left-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "radius" },
|
|
892
|
+
{ "property": "border-top-right-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "radius" },
|
|
893
|
+
{ "property": "border-bottom-right-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "radius" },
|
|
894
|
+
{ "property": "border-bottom-left-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "radius" },
|
|
895
|
+
{ "property": "border-start-start-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
|
|
896
|
+
{ "property": "border-start-end-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
|
|
897
|
+
{ "property": "border-end-start-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
|
|
898
|
+
{ "property": "border-end-end-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
|
|
899
|
+
{ "property": "border-image", "category": "Border", "type": "shorthand", "shorthand": true },
|
|
900
|
+
{ "property": "border-image-source", "category": "Border", "type": "image", "keywords": ["none"] },
|
|
901
|
+
{ "property": "border-image-slice", "category": "Border", "type": "number", "keywords": ["fill"], "units": ["%"] },
|
|
902
|
+
{ "property": "border-image-width", "category": "Border", "type": "number", "keywords": ["auto"], "units": ["px", "%", "em", "rem"] },
|
|
903
|
+
{ "property": "border-image-outset", "category": "Border", "type": "number", "units": ["px", "em", "rem"] },
|
|
904
|
+
{ "property": "border-image-repeat", "category": "Border", "type": "enum", "keywords": ["stretch", "repeat", "round", "space"] },
|
|
905
|
+
{ "property": "outline", "category": "Border", "type": "shorthand", "shorthand": true },
|
|
906
|
+
{ "property": "outline-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"] },
|
|
907
|
+
{ "property": "outline-style", "category": "Border", "type": "enum", "keywords": ["auto", "none", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"] },
|
|
908
|
+
{ "property": "outline-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "invert"] },
|
|
909
|
+
{ "property": "outline-offset", "category": "Border", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"] },
|
|
910
|
+
{ "property": "background", "category": "Background", "type": "shorthand", "shorthand": true },
|
|
911
|
+
{ "property": "background-color", "category": "Background", "type": "color" },
|
|
912
|
+
{ "property": "background-image", "category": "Background", "type": "image" },
|
|
913
|
+
{ "property": "background-position", "category": "Background", "type": "shorthand", "keywords": ["top", "right", "bottom", "left", "center"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
|
|
914
|
+
{ "property": "background-position-x", "category": "Background", "type": "length", "keywords": ["left", "right", "center"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
|
|
915
|
+
{ "property": "background-position-y", "category": "Background", "type": "length", "keywords": ["top", "bottom", "center"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
|
|
916
|
+
{ "property": "background-size", "category": "Background", "type": "shorthand", "keywords": ["auto", "cover", "contain"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
|
|
917
|
+
{ "property": "background-repeat", "category": "Background", "type": "enum", "keywords": ["repeat", "repeat-x", "repeat-y", "no-repeat", "space", "round"] },
|
|
918
|
+
{ "property": "background-attachment", "category": "Background", "type": "enum", "keywords": ["scroll", "fixed", "local"] },
|
|
919
|
+
{ "property": "background-clip", "category": "Background", "type": "enum", "keywords": ["border-box", "padding-box", "content-box", "text"] },
|
|
920
|
+
{ "property": "background-origin", "category": "Background", "type": "enum", "keywords": ["border-box", "padding-box", "content-box"] },
|
|
921
|
+
{ "property": "background-blend-mode", "category": "Background", "type": "enum", "keywords": ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"] },
|
|
922
|
+
{ "property": "color", "category": "Typography", "type": "color", "inherited": true },
|
|
923
|
+
{ "property": "opacity", "category": "Typography", "type": "number" },
|
|
924
|
+
{ "property": "font", "category": "Typography", "type": "shorthand", "inherited": true, "shorthand": true },
|
|
925
|
+
{ "property": "font-family", "category": "Typography", "type": "string", "inherited": true },
|
|
926
|
+
{ "property": "font-size", "category": "Typography", "type": "length", "keywords": ["xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "larger", "smaller"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "inherited": true },
|
|
927
|
+
{ "property": "font-size-adjust", "category": "Typography", "type": "number", "keywords": ["none", "ex-height", "cap-height", "ch-width", "ic-width", "ic-height", "from-font"], "inherited": true },
|
|
928
|
+
{ "property": "font-weight", "category": "Typography", "type": "integer", "keywords": ["normal", "bold", "bolder", "lighter"], "inherited": true },
|
|
929
|
+
{ "property": "font-style", "category": "Typography", "type": "enum", "keywords": ["normal", "italic", "oblique"], "inherited": true },
|
|
930
|
+
{ "property": "font-variant", "category": "Typography", "type": "shorthand", "keywords": ["normal", "none", "small-caps", "all-small-caps", "petite-caps", "all-petite-caps", "unicase", "titling-caps", "ordinal", "slashed-zero", "lining-nums", "oldstyle-nums", "proportional-nums", "tabular-nums", "diagonal-fractions", "stacked-fractions"], "inherited": true, "shorthand": true },
|
|
931
|
+
{ "property": "font-variant-caps", "category": "Typography", "type": "enum", "keywords": ["normal", "small-caps", "all-small-caps", "petite-caps", "all-petite-caps", "unicase", "titling-caps"], "inherited": true },
|
|
932
|
+
{ "property": "font-variant-numeric", "category": "Typography", "type": "enum", "keywords": ["normal", "ordinal", "slashed-zero", "lining-nums", "oldstyle-nums", "proportional-nums", "tabular-nums", "diagonal-fractions", "stacked-fractions"], "inherited": true },
|
|
933
|
+
{ "property": "font-variant-ligatures", "category": "Typography", "type": "enum", "keywords": ["normal", "none", "common-ligatures", "no-common-ligatures", "discretionary-ligatures", "no-discretionary-ligatures", "historical-ligatures", "no-historical-ligatures", "contextual", "no-contextual"], "inherited": true },
|
|
934
|
+
{ "property": "font-variant-east-asian", "category": "Typography", "type": "enum", "keywords": ["normal", "ruby", "jis78", "jis83", "jis90", "jis04", "simplified", "traditional", "full-width", "proportional-width"], "inherited": true },
|
|
935
|
+
{ "property": "font-variant-position", "category": "Typography", "type": "enum", "keywords": ["normal", "sub", "super"], "inherited": true },
|
|
936
|
+
{ "property": "font-stretch", "category": "Typography", "type": "percentage", "keywords": ["normal", "ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded"], "units": ["%"], "inherited": true },
|
|
937
|
+
{ "property": "font-feature-settings", "category": "Typography", "type": "string", "keywords": ["normal"], "inherited": true },
|
|
938
|
+
{ "property": "font-variation-settings", "category": "Typography", "type": "string", "keywords": ["normal"], "inherited": true },
|
|
939
|
+
{ "property": "font-kerning", "category": "Typography", "type": "enum", "keywords": ["auto", "normal", "none"], "inherited": true },
|
|
940
|
+
{ "property": "font-optical-sizing", "category": "Typography", "type": "enum", "keywords": ["auto", "none"], "inherited": true },
|
|
941
|
+
{ "property": "font-synthesis", "category": "Typography", "type": "enum", "keywords": ["none", "weight", "style", "small-caps", "position"], "inherited": true, "shorthand": true },
|
|
942
|
+
{ "property": "line-height", "category": "Typography", "type": "number", "keywords": ["normal"], "units": ["px", "%", "em", "rem"], "inherited": true },
|
|
943
|
+
{ "property": "letter-spacing", "category": "Typography", "type": "length", "keywords": ["normal"], "units": ["px", "em", "rem", "ch"], "inherited": true },
|
|
944
|
+
{ "property": "word-spacing", "category": "Typography", "type": "length", "keywords": ["normal"], "units": ["px", "%", "em", "rem"], "inherited": true },
|
|
945
|
+
{ "property": "text-align", "category": "Typography", "type": "enum", "keywords": ["start", "end", "left", "right", "center", "justify", "match-parent", "justify-all"], "inherited": true },
|
|
946
|
+
{ "property": "text-align-last", "category": "Typography", "type": "enum", "keywords": ["auto", "start", "end", "left", "right", "center", "justify"], "inherited": true },
|
|
947
|
+
{ "property": "text-justify", "category": "Typography", "type": "enum", "keywords": ["auto", "none", "inter-word", "inter-character"], "inherited": true },
|
|
948
|
+
{ "property": "text-decoration", "category": "Typography", "type": "shorthand", "shorthand": true },
|
|
949
|
+
{ "property": "text-decoration-line", "category": "Typography", "type": "enum", "keywords": ["none", "underline", "overline", "line-through", "blink"] },
|
|
950
|
+
{ "property": "text-decoration-color", "category": "Typography", "type": "color" },
|
|
951
|
+
{ "property": "text-decoration-style", "category": "Typography", "type": "enum", "keywords": ["solid", "double", "dotted", "dashed", "wavy"] },
|
|
952
|
+
{ "property": "text-decoration-thickness", "category": "Typography", "type": "length", "keywords": ["auto", "from-font"], "units": ["px", "%", "em", "rem"] },
|
|
953
|
+
{ "property": "text-decoration-skip-ink", "category": "Typography", "type": "enum", "keywords": ["auto", "none", "all"], "inherited": true },
|
|
954
|
+
{ "property": "text-underline-offset", "category": "Typography", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem"], "inherited": true },
|
|
955
|
+
{ "property": "text-underline-position", "category": "Typography", "type": "enum", "keywords": ["auto", "from-font", "under", "left", "right"], "inherited": true },
|
|
956
|
+
{ "property": "text-emphasis", "category": "Typography", "type": "shorthand", "inherited": true, "shorthand": true },
|
|
957
|
+
{ "property": "text-emphasis-style", "category": "Typography", "type": "enum", "keywords": ["none", "filled", "open", "dot", "circle", "double-circle", "triangle", "sesame"], "inherited": true },
|
|
958
|
+
{ "property": "text-emphasis-color", "category": "Typography", "type": "color", "inherited": true },
|
|
959
|
+
{ "property": "text-emphasis-position", "category": "Typography", "type": "enum", "keywords": ["over", "under", "left", "right"], "inherited": true },
|
|
960
|
+
{ "property": "text-transform", "category": "Typography", "type": "enum", "keywords": ["none", "capitalize", "uppercase", "lowercase", "full-width", "full-size-kana"], "inherited": true },
|
|
961
|
+
{ "property": "text-indent", "category": "Typography", "type": "length", "keywords": ["hanging", "each-line"], "units": ["px", "%", "em", "rem"], "inherited": true },
|
|
962
|
+
{ "property": "text-overflow", "category": "Typography", "type": "enum", "keywords": ["clip", "ellipsis"] },
|
|
963
|
+
{ "property": "text-shadow", "category": "Typography", "type": "string", "keywords": ["none"], "inherited": true },
|
|
964
|
+
{ "property": "white-space", "category": "Typography", "type": "enum", "keywords": ["normal", "nowrap", "pre", "pre-wrap", "pre-line", "break-spaces"], "inherited": true },
|
|
965
|
+
{ "property": "white-space-collapse", "category": "Typography", "type": "enum", "keywords": ["collapse", "preserve", "preserve-breaks", "preserve-spaces", "break-spaces"], "inherited": true },
|
|
966
|
+
{ "property": "text-wrap", "category": "Typography", "type": "enum", "keywords": ["wrap", "nowrap", "balance", "pretty", "stable"], "inherited": true },
|
|
967
|
+
{ "property": "text-wrap-mode", "category": "Typography", "type": "enum", "keywords": ["wrap", "nowrap"], "inherited": true },
|
|
968
|
+
{ "property": "text-wrap-style", "category": "Typography", "type": "enum", "keywords": ["auto", "balance", "pretty", "stable"], "inherited": true },
|
|
969
|
+
{ "property": "word-break", "category": "Typography", "type": "enum", "keywords": ["normal", "break-all", "keep-all", "break-word", "auto-phrase"], "inherited": true },
|
|
970
|
+
{ "property": "line-break", "category": "Typography", "type": "enum", "keywords": ["auto", "loose", "normal", "strict", "anywhere"], "inherited": true },
|
|
971
|
+
{ "property": "overflow-wrap", "category": "Typography", "type": "enum", "keywords": ["normal", "break-word", "anywhere"], "inherited": true },
|
|
972
|
+
{ "property": "hyphens", "category": "Typography", "type": "enum", "keywords": ["none", "manual", "auto"], "inherited": true },
|
|
973
|
+
{ "property": "hyphenate-character", "category": "Typography", "type": "string", "keywords": ["auto"], "inherited": true },
|
|
974
|
+
{ "property": "direction", "category": "Typography", "type": "enum", "keywords": ["ltr", "rtl"], "inherited": true },
|
|
975
|
+
{ "property": "unicode-bidi", "category": "Typography", "type": "enum", "keywords": ["normal", "embed", "isolate", "bidi-override", "isolate-override", "plaintext"] },
|
|
976
|
+
{ "property": "writing-mode", "category": "Typography", "type": "enum", "keywords": ["horizontal-tb", "vertical-rl", "vertical-lr", "sideways-rl", "sideways-lr"], "inherited": true },
|
|
977
|
+
{ "property": "text-orientation", "category": "Typography", "type": "enum", "keywords": ["mixed", "upright", "sideways"], "inherited": true },
|
|
978
|
+
{ "property": "text-combine-upright", "category": "Typography", "type": "enum", "keywords": ["none", "all", "digits"], "inherited": true },
|
|
979
|
+
{ "property": "vertical-align", "category": "Typography", "type": "length", "keywords": ["baseline", "sub", "super", "text-top", "text-bottom", "middle", "top", "bottom"], "units": ["px", "%", "em", "rem"] },
|
|
980
|
+
{ "property": "tab-size", "category": "Typography", "type": "number", "units": ["px", "em", "rem"], "inherited": true },
|
|
981
|
+
{ "property": "quotes", "category": "Typography", "type": "string", "keywords": ["none", "auto"], "inherited": true },
|
|
982
|
+
{ "property": "hanging-punctuation", "category": "Typography", "type": "enum", "keywords": ["none", "first", "last", "force-end", "allow-end"], "inherited": true },
|
|
983
|
+
{ "property": "text-rendering", "category": "Typography", "type": "enum", "keywords": ["auto", "optimizeSpeed", "optimizeLegibility", "geometricPrecision"], "inherited": true },
|
|
984
|
+
{ "property": "-webkit-text-stroke", "category": "Typography", "type": "shorthand", "shorthand": true },
|
|
985
|
+
{ "property": "-webkit-text-stroke-width", "category": "Typography", "type": "length", "units": ["px", "em", "rem"] },
|
|
986
|
+
{ "property": "-webkit-text-stroke-color", "category": "Typography", "type": "color" },
|
|
987
|
+
{ "property": "-webkit-text-fill-color", "category": "Typography", "type": "color" },
|
|
988
|
+
{ "property": "-webkit-line-clamp", "category": "Typography", "type": "integer", "keywords": ["none"] },
|
|
989
|
+
{ "property": "caret-color", "category": "Typography", "type": "color", "keywords": ["auto"], "inherited": true },
|
|
990
|
+
{ "property": "box-shadow", "category": "Effects", "type": "string", "keywords": ["none"] },
|
|
991
|
+
{ "property": "filter", "category": "Effects", "type": "string", "keywords": ["none"] },
|
|
992
|
+
{ "property": "backdrop-filter", "category": "Effects", "type": "string", "keywords": ["none"] },
|
|
993
|
+
{ "property": "mix-blend-mode", "category": "Effects", "type": "enum", "keywords": ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity", "plus-darker", "plus-lighter"] },
|
|
994
|
+
{ "property": "clip-path", "category": "Effects", "type": "string", "keywords": ["none", "border-box", "padding-box", "content-box", "margin-box", "fill-box", "stroke-box", "view-box"] },
|
|
995
|
+
{ "property": "mask", "category": "Effects", "type": "shorthand", "shorthand": true },
|
|
996
|
+
{ "property": "mask-image", "category": "Effects", "type": "image", "keywords": ["none"] },
|
|
997
|
+
{ "property": "mask-mode", "category": "Effects", "type": "enum", "keywords": ["alpha", "luminance", "match-source"] },
|
|
998
|
+
{ "property": "mask-repeat", "category": "Effects", "type": "enum", "keywords": ["repeat", "repeat-x", "repeat-y", "space", "round", "no-repeat"] },
|
|
999
|
+
{ "property": "mask-position", "category": "Effects", "type": "length", "keywords": ["top", "bottom", "left", "right", "center"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
|
|
1000
|
+
{ "property": "mask-clip", "category": "Effects", "type": "enum", "keywords": ["border-box", "padding-box", "content-box", "fill-box", "stroke-box", "view-box", "no-clip"] },
|
|
1001
|
+
{ "property": "mask-origin", "category": "Effects", "type": "enum", "keywords": ["border-box", "padding-box", "content-box", "fill-box", "stroke-box", "view-box"] },
|
|
1002
|
+
{ "property": "mask-size", "category": "Effects", "type": "length", "keywords": ["auto", "cover", "contain"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
|
|
1003
|
+
{ "property": "mask-composite", "category": "Effects", "type": "enum", "keywords": ["add", "subtract", "intersect", "exclude"] },
|
|
1004
|
+
{ "property": "mask-type", "category": "Effects", "type": "enum", "keywords": ["luminance", "alpha"] },
|
|
1005
|
+
{ "property": "cursor", "category": "Effects", "type": "enum", "keywords": ["auto", "default", "none", "context-menu", "help", "pointer", "progress", "wait", "cell", "crosshair", "text", "vertical-text", "alias", "copy", "move", "no-drop", "not-allowed", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out"], "inherited": true },
|
|
1006
|
+
{ "property": "accent-color", "category": "Effects", "type": "color", "keywords": ["auto"], "inherited": true },
|
|
1007
|
+
{ "property": "color-scheme", "category": "Effects", "type": "enum", "keywords": ["normal", "light", "dark", "only"], "inherited": true },
|
|
1008
|
+
{ "property": "transform", "category": "Transform", "type": "string" },
|
|
1009
|
+
{ "property": "transform-origin", "category": "Transform", "type": "string" },
|
|
1010
|
+
{ "property": "transform-style", "category": "Transform", "type": "enum", "keywords": ["flat", "preserve-3d"] },
|
|
1011
|
+
{ "property": "transform-box", "category": "Transform", "type": "enum", "keywords": ["content-box", "border-box", "fill-box", "stroke-box", "view-box"] },
|
|
1012
|
+
{ "property": "translate", "category": "Transform", "type": "string" },
|
|
1013
|
+
{ "property": "rotate", "category": "Transform", "type": "string" },
|
|
1014
|
+
{ "property": "scale", "category": "Transform", "type": "string" },
|
|
1015
|
+
{ "property": "perspective", "category": "Transform", "type": "length", "keywords": ["none"], "units": ["px", "em", "rem", "vh", "vw", "ch"] },
|
|
1016
|
+
{ "property": "perspective-origin", "category": "Transform", "type": "string" },
|
|
1017
|
+
{ "property": "backface-visibility", "category": "Transform", "type": "enum", "keywords": ["visible", "hidden"] },
|
|
1018
|
+
{ "property": "transition", "category": "Animation", "type": "shorthand", "shorthand": true },
|
|
1019
|
+
{ "property": "transition-property", "category": "Animation", "type": "enum", "keywords": ["none", "all"] },
|
|
1020
|
+
{ "property": "transition-duration", "category": "Animation", "type": "time", "units": ["s", "ms"] },
|
|
1021
|
+
{ "property": "transition-timing-function", "category": "Animation", "type": "enum", "keywords": ["linear", "ease", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps", "cubic-bezier"] },
|
|
1022
|
+
{ "property": "transition-delay", "category": "Animation", "type": "time", "units": ["s", "ms"] },
|
|
1023
|
+
{ "property": "transition-behavior", "category": "Animation", "type": "enum", "keywords": ["normal", "allow-discrete"] },
|
|
1024
|
+
{ "property": "animation", "category": "Animation", "type": "shorthand", "shorthand": true },
|
|
1025
|
+
{ "property": "animation-name", "category": "Animation", "type": "enum", "keywords": ["none"] },
|
|
1026
|
+
{ "property": "animation-duration", "category": "Animation", "type": "time", "units": ["s", "ms"] },
|
|
1027
|
+
{ "property": "animation-timing-function", "category": "Animation", "type": "enum", "keywords": ["linear", "ease", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps", "cubic-bezier"] },
|
|
1028
|
+
{ "property": "animation-delay", "category": "Animation", "type": "time", "units": ["s", "ms"] },
|
|
1029
|
+
{ "property": "animation-iteration-count", "category": "Animation", "type": "number", "keywords": ["infinite"] },
|
|
1030
|
+
{ "property": "animation-direction", "category": "Animation", "type": "enum", "keywords": ["normal", "reverse", "alternate", "alternate-reverse"] },
|
|
1031
|
+
{ "property": "animation-fill-mode", "category": "Animation", "type": "enum", "keywords": ["none", "forwards", "backwards", "both"] },
|
|
1032
|
+
{ "property": "animation-play-state", "category": "Animation", "type": "enum", "keywords": ["running", "paused"] },
|
|
1033
|
+
{ "property": "animation-composition", "category": "Animation", "type": "enum", "keywords": ["replace", "add", "accumulate"] },
|
|
1034
|
+
{ "property": "will-change", "category": "Animation", "type": "enum", "keywords": ["auto", "scroll-position", "contents"] },
|
|
1035
|
+
{ "property": "content", "category": "Misc", "type": "string" },
|
|
1036
|
+
{ "property": "list-style", "category": "Misc", "type": "shorthand", "inherited": true, "shorthand": true },
|
|
1037
|
+
{ "property": "list-style-type", "category": "Misc", "type": "enum", "keywords": ["disc", "circle", "square", "decimal", "decimal-leading-zero", "lower-roman", "upper-roman", "lower-greek", "lower-latin", "upper-latin", "lower-alpha", "upper-alpha", "armenian", "georgian", "cjk-decimal", "cjk-ideographic", "hebrew", "hiragana", "hiragana-iroha", "katakana", "katakana-iroha", "arabic-indic", "bengali", "cambodian", "khmer", "devanagari", "gujarati", "gurmukhi", "kannada", "lao", "malayalam", "myanmar", "oriya", "persian", "tamil", "telugu", "thai", "tibetan", "japanese-formal", "japanese-informal", "korean-hangul-formal", "korean-hanja-formal", "korean-hanja-informal", "simp-chinese-formal", "simp-chinese-informal", "trad-chinese-formal", "trad-chinese-informal", "disclosure-open", "disclosure-closed", "none"], "inherited": true },
|
|
1038
|
+
{ "property": "list-style-position", "category": "Misc", "type": "enum", "keywords": ["inside", "outside"], "inherited": true },
|
|
1039
|
+
{ "property": "list-style-image", "category": "Misc", "type": "image", "inherited": true },
|
|
1040
|
+
{ "property": "scroll-behavior", "category": "Misc", "type": "enum", "keywords": ["auto", "smooth"] },
|
|
1041
|
+
{ "property": "scroll-snap-type", "category": "Misc", "type": "enum", "keywords": ["none", "x", "y", "block", "inline", "both", "mandatory", "proximity"] },
|
|
1042
|
+
{ "property": "scroll-snap-align", "category": "Misc", "type": "enum", "keywords": ["none", "start", "end", "center"] },
|
|
1043
|
+
{ "property": "scroll-snap-stop", "category": "Misc", "type": "enum", "keywords": ["normal", "always"] },
|
|
1044
|
+
{ "property": "scroll-margin", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
|
|
1045
|
+
{ "property": "scroll-margin-top", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
|
|
1046
|
+
{ "property": "scroll-margin-right", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
|
|
1047
|
+
{ "property": "scroll-margin-bottom", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
|
|
1048
|
+
{ "property": "scroll-margin-left", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
|
|
1049
|
+
{ "property": "scroll-margin-block", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
|
|
1050
|
+
{ "property": "scroll-margin-inline", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
|
|
1051
|
+
{ "property": "scroll-margin-block-start", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
|
|
1052
|
+
{ "property": "scroll-margin-block-end", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
|
|
1053
|
+
{ "property": "scroll-margin-inline-start", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
|
|
1054
|
+
{ "property": "scroll-margin-inline-end", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
|
|
1055
|
+
{ "property": "scroll-padding", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
|
|
1056
|
+
{ "property": "scroll-padding-top", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
|
|
1057
|
+
{ "property": "scroll-padding-right", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
|
|
1058
|
+
{ "property": "scroll-padding-bottom", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
|
|
1059
|
+
{ "property": "scroll-padding-left", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
|
|
1060
|
+
{ "property": "scroll-padding-block", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
|
|
1061
|
+
{ "property": "scroll-padding-inline", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
|
|
1062
|
+
{ "property": "scroll-padding-block-start", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
|
|
1063
|
+
{ "property": "scroll-padding-block-end", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
|
|
1064
|
+
{ "property": "scroll-padding-inline-start", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
|
|
1065
|
+
{ "property": "scroll-padding-inline-end", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
|
|
1066
|
+
{ "property": "overscroll-behavior", "category": "Misc", "type": "enum", "keywords": ["auto", "contain", "none"], "shorthand": true },
|
|
1067
|
+
{ "property": "overscroll-behavior-x", "category": "Misc", "type": "enum", "keywords": ["auto", "contain", "none"] },
|
|
1068
|
+
{ "property": "overscroll-behavior-y", "category": "Misc", "type": "enum", "keywords": ["auto", "contain", "none"] },
|
|
1069
|
+
{ "property": "overscroll-behavior-block", "category": "Misc", "type": "enum", "keywords": ["auto", "contain", "none"] },
|
|
1070
|
+
{ "property": "overscroll-behavior-inline", "category": "Misc", "type": "enum", "keywords": ["auto", "contain", "none"] },
|
|
1071
|
+
{ "property": "user-select", "category": "Misc", "type": "enum", "keywords": ["auto", "text", "none", "all", "contain"] },
|
|
1072
|
+
{ "property": "pointer-events", "category": "Misc", "type": "enum", "keywords": ["auto", "none", "visiblePainted", "visibleFill", "visibleStroke", "visible", "painted", "fill", "stroke", "all"], "inherited": true },
|
|
1073
|
+
{ "property": "touch-action", "category": "Misc", "type": "enum", "keywords": ["auto", "none", "pan-x", "pan-left", "pan-right", "pan-y", "pan-up", "pan-down", "pinch-zoom", "manipulation"] },
|
|
1074
|
+
{ "property": "resize", "category": "Misc", "type": "enum", "keywords": ["none", "both", "horizontal", "vertical", "block", "inline"] },
|
|
1075
|
+
{ "property": "appearance", "category": "Misc", "type": "enum", "keywords": ["none", "auto", "base-select", "menulist-button", "textfield", "button", "searchfield", "textarea", "checkbox", "radio", "menulist", "listbox", "meter", "progress-bar", "push-button", "slider-horizontal", "square-button"] },
|
|
1076
|
+
{ "property": "table-layout", "category": "Misc", "type": "enum", "keywords": ["auto", "fixed"] },
|
|
1077
|
+
{ "property": "border-collapse", "category": "Misc", "type": "enum", "keywords": ["separate", "collapse"], "inherited": true },
|
|
1078
|
+
{ "property": "border-spacing", "category": "Misc", "type": "length", "units": ["px", "em", "rem"], "inherited": true },
|
|
1079
|
+
{ "property": "caption-side", "category": "Misc", "type": "enum", "keywords": ["top", "bottom", "block-start", "block-end", "inline-start", "inline-end"], "inherited": true },
|
|
1080
|
+
{ "property": "empty-cells", "category": "Misc", "type": "enum", "keywords": ["show", "hide"], "inherited": true },
|
|
1081
|
+
{ "property": "caret", "category": "Misc", "type": "shorthand", "inherited": true, "shorthand": true },
|
|
1082
|
+
{ "property": "caret-shape", "category": "Misc", "type": "enum", "keywords": ["auto", "bar", "block", "underscore"], "inherited": true },
|
|
1083
|
+
{ "property": "scrollbar-width", "category": "Misc", "type": "enum", "keywords": ["auto", "thin", "none"] },
|
|
1084
|
+
{ "property": "scrollbar-color", "category": "Misc", "type": "color", "inherited": true },
|
|
1085
|
+
{ "property": "scrollbar-gutter", "category": "Misc", "type": "enum", "keywords": ["auto", "stable", "both-edges"] },
|
|
1086
|
+
{ "property": "image-rendering", "category": "Misc", "type": "enum", "keywords": ["auto", "smooth", "high-quality", "crisp-edges", "pixelated"], "inherited": true },
|
|
1087
|
+
{ "property": "counter-reset", "category": "Misc", "type": "string" },
|
|
1088
|
+
{ "property": "counter-increment", "category": "Misc", "type": "string" },
|
|
1089
|
+
{ "property": "counter-set", "category": "Misc", "type": "string" },
|
|
1090
|
+
{ "property": "all", "category": "Misc", "type": "enum", "keywords": ["initial", "inherit", "unset", "revert", "revert-layer"], "shorthand": true },
|
|
1091
|
+
{ "property": "forced-color-adjust", "category": "Misc", "type": "enum", "keywords": ["auto", "none", "preserve-parent-color"], "inherited": true },
|
|
1092
|
+
{ "property": "print-color-adjust", "category": "Misc", "type": "enum", "keywords": ["economy", "exact"], "inherited": true }
|
|
1093
|
+
];
|
|
1094
|
+
|
|
1095
|
+
// src/overlay/cssRegistry.ts
|
|
1096
|
+
var COMMON = /* @__PURE__ */ new Set([
|
|
1097
|
+
// Layout
|
|
1098
|
+
"display",
|
|
1099
|
+
"position",
|
|
1100
|
+
"top",
|
|
1101
|
+
"right",
|
|
1102
|
+
"bottom",
|
|
1103
|
+
"left",
|
|
1104
|
+
"float",
|
|
1105
|
+
"clear",
|
|
1106
|
+
"z-index",
|
|
1107
|
+
"box-sizing",
|
|
1108
|
+
"visibility",
|
|
1109
|
+
"overflow",
|
|
1110
|
+
"overflow-x",
|
|
1111
|
+
"overflow-y",
|
|
1112
|
+
"opacity",
|
|
1113
|
+
// Flexbox
|
|
1114
|
+
"flex",
|
|
1115
|
+
"flex-direction",
|
|
1116
|
+
"flex-wrap",
|
|
1117
|
+
"justify-content",
|
|
1118
|
+
"align-items",
|
|
1119
|
+
"align-content",
|
|
1120
|
+
"align-self",
|
|
1121
|
+
"justify-self",
|
|
1122
|
+
"flex-grow",
|
|
1123
|
+
"flex-shrink",
|
|
1124
|
+
"flex-basis",
|
|
1125
|
+
"order",
|
|
1126
|
+
"gap",
|
|
1127
|
+
"row-gap",
|
|
1128
|
+
"column-gap",
|
|
1129
|
+
// Grid
|
|
1130
|
+
"grid-template-columns",
|
|
1131
|
+
"grid-template-rows",
|
|
1132
|
+
"grid-auto-flow",
|
|
1133
|
+
"grid-auto-columns",
|
|
1134
|
+
"grid-auto-rows",
|
|
1135
|
+
"grid-column",
|
|
1136
|
+
"grid-row",
|
|
1137
|
+
"grid-area",
|
|
1138
|
+
"justify-items",
|
|
1139
|
+
"place-items",
|
|
1140
|
+
// Spacing
|
|
1141
|
+
"margin",
|
|
1142
|
+
"margin-top",
|
|
1143
|
+
"margin-right",
|
|
1144
|
+
"margin-bottom",
|
|
1145
|
+
"margin-left",
|
|
1146
|
+
"padding",
|
|
1147
|
+
"padding-top",
|
|
1148
|
+
"padding-right",
|
|
1149
|
+
"padding-bottom",
|
|
1150
|
+
"padding-left",
|
|
1151
|
+
// Sizing
|
|
1152
|
+
"width",
|
|
1153
|
+
"height",
|
|
1154
|
+
"min-width",
|
|
1155
|
+
"max-width",
|
|
1156
|
+
"min-height",
|
|
1157
|
+
"max-height",
|
|
1158
|
+
"aspect-ratio",
|
|
1159
|
+
"object-fit",
|
|
1160
|
+
"object-position",
|
|
1161
|
+
// Border
|
|
1162
|
+
"border",
|
|
1163
|
+
"border-width",
|
|
1164
|
+
"border-style",
|
|
1165
|
+
"border-color",
|
|
1166
|
+
"border-top-width",
|
|
1167
|
+
"border-right-width",
|
|
1168
|
+
"border-bottom-width",
|
|
1169
|
+
"border-left-width",
|
|
1170
|
+
"border-radius",
|
|
1171
|
+
"border-top-left-radius",
|
|
1172
|
+
"border-top-right-radius",
|
|
1173
|
+
"border-bottom-right-radius",
|
|
1174
|
+
"border-bottom-left-radius",
|
|
1175
|
+
"outline",
|
|
1176
|
+
"outline-width",
|
|
1177
|
+
"outline-style",
|
|
1178
|
+
"outline-color",
|
|
1179
|
+
"outline-offset",
|
|
1180
|
+
// Background
|
|
1181
|
+
"background",
|
|
1182
|
+
"background-color",
|
|
1183
|
+
"background-image",
|
|
1184
|
+
"background-size",
|
|
1185
|
+
"background-position",
|
|
1186
|
+
"background-repeat",
|
|
1187
|
+
"background-attachment",
|
|
1188
|
+
"background-clip",
|
|
1189
|
+
// Typography
|
|
1190
|
+
"color",
|
|
1191
|
+
"font",
|
|
1192
|
+
"font-family",
|
|
1193
|
+
"font-size",
|
|
1194
|
+
"font-weight",
|
|
1195
|
+
"font-style",
|
|
1196
|
+
"font-variant",
|
|
1197
|
+
"line-height",
|
|
1198
|
+
"letter-spacing",
|
|
1199
|
+
"word-spacing",
|
|
1200
|
+
"text-align",
|
|
1201
|
+
"text-decoration",
|
|
1202
|
+
"text-decoration-line",
|
|
1203
|
+
"text-decoration-color",
|
|
1204
|
+
"text-transform",
|
|
1205
|
+
"text-indent",
|
|
1206
|
+
"text-overflow",
|
|
1207
|
+
"white-space",
|
|
1208
|
+
"text-shadow",
|
|
1209
|
+
"direction",
|
|
1210
|
+
"vertical-align",
|
|
1211
|
+
// Effects
|
|
1212
|
+
"box-shadow",
|
|
1213
|
+
"filter",
|
|
1214
|
+
"backdrop-filter",
|
|
1215
|
+
"mix-blend-mode",
|
|
1216
|
+
"clip-path",
|
|
1217
|
+
"cursor",
|
|
1218
|
+
"mask",
|
|
1219
|
+
// Transform
|
|
1220
|
+
"transform",
|
|
1221
|
+
"transform-origin",
|
|
1222
|
+
"transform-style",
|
|
1223
|
+
"perspective",
|
|
1224
|
+
"backface-visibility",
|
|
1225
|
+
"translate",
|
|
1226
|
+
"rotate",
|
|
1227
|
+
"scale",
|
|
1228
|
+
// Animation
|
|
1229
|
+
"transition",
|
|
1230
|
+
"transition-property",
|
|
1231
|
+
"transition-duration",
|
|
1232
|
+
"transition-timing-function",
|
|
1233
|
+
"transition-delay",
|
|
1234
|
+
"animation",
|
|
1235
|
+
"animation-name",
|
|
1236
|
+
"animation-duration",
|
|
1237
|
+
"animation-timing-function",
|
|
1238
|
+
"animation-delay",
|
|
1239
|
+
"animation-iteration-count",
|
|
1240
|
+
"animation-direction",
|
|
1241
|
+
"animation-fill-mode",
|
|
1242
|
+
"will-change",
|
|
1243
|
+
// Misc
|
|
1244
|
+
"content",
|
|
1245
|
+
"list-style",
|
|
1246
|
+
"list-style-type",
|
|
1247
|
+
"list-style-position",
|
|
1248
|
+
"user-select",
|
|
1249
|
+
"pointer-events",
|
|
1250
|
+
"scroll-behavior",
|
|
1251
|
+
"resize",
|
|
1252
|
+
"caret-color",
|
|
1253
|
+
"accent-color",
|
|
1254
|
+
"appearance"
|
|
1255
|
+
]);
|
|
1256
|
+
var CATEGORY_ORDER = [
|
|
1257
|
+
"Layout",
|
|
1258
|
+
"Flexbox",
|
|
1259
|
+
"Grid",
|
|
1260
|
+
"Spacing",
|
|
1261
|
+
"Sizing",
|
|
1262
|
+
"Border",
|
|
1263
|
+
"Background",
|
|
1264
|
+
"Typography",
|
|
1265
|
+
"Effects",
|
|
1266
|
+
"Transform",
|
|
1267
|
+
"Animation",
|
|
1268
|
+
"Misc"
|
|
1269
|
+
];
|
|
1270
|
+
var DEFAULT_UNITS = ["px", "%", "em", "rem", "vh", "vw", "ch"];
|
|
1271
|
+
function categoryFor(p) {
|
|
1272
|
+
if (/^grid/.test(p)) return "Grid";
|
|
1273
|
+
if (/^(flex|justify|align|order|place)/.test(p)) return "Flexbox";
|
|
1274
|
+
if (/^(margin|padding|gap|row-gap|column-gap)/.test(p)) return "Spacing";
|
|
1275
|
+
if (/^(width|height|min-|max-|aspect-ratio|inline-size|block-size|object-)/.test(p)) return "Sizing";
|
|
1276
|
+
if (/^(border|outline)/.test(p)) return "Border";
|
|
1277
|
+
if (/^background/.test(p)) return "Background";
|
|
1278
|
+
if (/^(font|text|color$|line-height|letter|word|white-space|writing|direction|vertical-align|tab-size|hyphens|quotes|list-style)/.test(p))
|
|
1279
|
+
return "Typography";
|
|
1280
|
+
if (/^(transition|animation|will-change)/.test(p)) return "Animation";
|
|
1281
|
+
if (/^(transform|translate|rotate|scale|perspective|backface)/.test(p)) return "Transform";
|
|
1282
|
+
if (/^(opacity|box-shadow|filter|backdrop|mix-blend|clip-path|mask|cursor)/.test(p)) return "Effects";
|
|
1283
|
+
if (/^(display|position|top|right|bottom|left|inset|float|clear|visibility|z-index|box-sizing|overflow|isolation|contain)/.test(p))
|
|
1284
|
+
return "Layout";
|
|
1285
|
+
return "Misc";
|
|
1286
|
+
}
|
|
1287
|
+
function typeForValue(p, v) {
|
|
1288
|
+
const s = (v || "").trim();
|
|
1289
|
+
if (/color/.test(p) || /^(rgb|rgba|hsl|hsla|#|currentcolor|transparent)\b/i.test(s)) return "color";
|
|
1290
|
+
if (/^-?\d*\.?\d+(px|em|rem|%|vh|vw|vmin|vmax|ch|ex|cm|mm|in|pt|pc|q)$/i.test(s)) return "length";
|
|
1291
|
+
if (/^-?\d*\.?\d+(s|ms)$/i.test(s)) return "time";
|
|
1292
|
+
if (/^-?\d*\.?\d+(deg|rad|grad|turn)$/i.test(s)) return "angle";
|
|
1293
|
+
if (/^(url\(|linear-gradient|radial-gradient|conic-gradient)/i.test(s)) return "image";
|
|
1294
|
+
if (/(^|-)color$/.test(p)) return "color";
|
|
1295
|
+
if (/(width|height|size|^inset|margin|padding|gap|^top$|^left$|^right$|^bottom$|spacing|indent|offset|radius|translate|^scroll-padding|^scroll-margin)/.test(p))
|
|
1296
|
+
return "length";
|
|
1297
|
+
if (/^-?\d+$/.test(s)) return "integer";
|
|
1298
|
+
if (/^-?\d*\.?\d+$/.test(s)) return "number";
|
|
1299
|
+
return "string";
|
|
1300
|
+
}
|
|
1301
|
+
var _registry = null;
|
|
1302
|
+
function cssRegistry() {
|
|
1303
|
+
if (_registry) return _registry;
|
|
1304
|
+
const byProp = /* @__PURE__ */ new Map();
|
|
1305
|
+
for (const m of CSS_PROPERTY_DATA) {
|
|
1306
|
+
byProp.set(m.property, {
|
|
1307
|
+
...m,
|
|
1308
|
+
units: m.units && m.units.length ? m.units : m.type === "length" ? DEFAULT_UNITS : void 0,
|
|
1309
|
+
common: COMMON.has(m.property)
|
|
1310
|
+
});
|
|
1311
|
+
}
|
|
1312
|
+
try {
|
|
1313
|
+
if (typeof document !== "undefined") {
|
|
1314
|
+
const cs = getComputedStyle(document.documentElement);
|
|
1315
|
+
for (let i = 0; i < cs.length; i++) {
|
|
1316
|
+
const p = cs[i];
|
|
1317
|
+
if (!p || p.startsWith("--") || byProp.has(p)) continue;
|
|
1318
|
+
const type = typeForValue(p, cs.getPropertyValue(p));
|
|
1319
|
+
byProp.set(p, { property: p, category: categoryFor(p), type, units: type === "length" ? DEFAULT_UNITS : void 0 });
|
|
1320
|
+
}
|
|
1321
|
+
}
|
|
1322
|
+
} catch {
|
|
1323
|
+
}
|
|
1324
|
+
const groups = /* @__PURE__ */ new Map();
|
|
1325
|
+
for (const [prop, m] of byProp) {
|
|
1326
|
+
const cat = m.category || "Misc";
|
|
1327
|
+
const arr = groups.get(cat) ?? [];
|
|
1328
|
+
arr.push(prop);
|
|
1329
|
+
groups.set(cat, arr);
|
|
1330
|
+
}
|
|
1331
|
+
const orderedNames = [
|
|
1332
|
+
...CATEGORY_ORDER.filter((c) => groups.has(c)),
|
|
1333
|
+
...[...groups.keys()].filter((c) => !CATEGORY_ORDER.includes(c)).sort()
|
|
1334
|
+
];
|
|
1335
|
+
const categories = orderedNames.map((name) => ({ name, props: groups.get(name).slice().sort() }));
|
|
1336
|
+
_registry = { byProp, categories };
|
|
1337
|
+
return _registry;
|
|
1338
|
+
}
|
|
1339
|
+
function cssMeta(property) {
|
|
1340
|
+
return cssRegistry().byProp.get(property);
|
|
1341
|
+
}
|
|
1342
|
+
|
|
739
1343
|
// src/overlay/mechanism.ts
|
|
740
1344
|
var TW_UTILITY = /^-?(?:p|m|px|py|pt|pr|pb|pl|mx|my|mt|mr|mb|ml|gap|w|h|min-w|max-w|min-h|max-h|text|bg|border|rounded|flex|grid|gap-x|gap-y|items|justify|self|place|font|leading|tracking|space|inline|block|inline-block|hidden|table|absolute|relative|fixed|sticky|static|top|bottom|left|right|inset|z|shadow|opacity|transition|duration|ease|scale|rotate|translate|cursor|overflow|object|aspect|order|col|row|basis|grow|shrink|divide|ring|outline)(?:-|$)/;
|
|
741
1345
|
var TW_VARIANT = /^(?:sm|md|lg|xl|2xl|hover|focus|focus-visible|focus-within|active|visited|disabled|dark|group|group-hover|peer|first|last|odd|even|motion-safe|motion-reduce|print|rtl|ltr)::?|^(?:sm|md|lg|xl|2xl|hover|focus|active|disabled|dark|group-hover):/;
|
|
@@ -856,8 +1460,28 @@ function renderPrompt(records) {
|
|
|
856
1460
|
);
|
|
857
1461
|
lines.push("");
|
|
858
1462
|
lines.push(
|
|
859
|
-
"These are visual tweaks I made in the running app. Apply them to the source.
|
|
1463
|
+
"These are visual tweaks I made in the running app. Apply them to the source \u2014 but do NOT just mechanically apply them. First analyze the markup: if a change exposes dead, redundant, or contradictory code, stop and tell me (or propose the cleanup) instead of blindly applying."
|
|
1464
|
+
);
|
|
1465
|
+
lines.push("");
|
|
1466
|
+
lines.push("## Analyze the markup first (don\u2019t just change values)");
|
|
1467
|
+
lines.push(
|
|
1468
|
+
"- If a change effectively HIDES or empties an element (display:none, visibility:hidden, opacity:0, or collapsing its size to 0) and it isn\u2019t shown conditionally somewhere else, question whether the element/component is needed at all. Prefer DELETING the element and its now-unused styles/classes over leaving a permanently hidden node."
|
|
1469
|
+
);
|
|
1470
|
+
lines.push(
|
|
1471
|
+
"- Flag CSS that has no effect in its context and ask why it\u2019s there \u2014 don\u2019t silently keep it:"
|
|
1472
|
+
);
|
|
1473
|
+
lines.push(
|
|
1474
|
+
" \u2022 flex-direction / justify-content / align-items / flex-wrap / gap on an element whose display is NOT flex/grid (e.g. block);"
|
|
1475
|
+
);
|
|
1476
|
+
lines.push(" \u2022 flex-grow / flex-shrink / flex-basis / align-self / order when the PARENT isn\u2019t flex/grid;");
|
|
1477
|
+
lines.push(" \u2022 top / right / bottom / left / z-index when position is static;");
|
|
1478
|
+
lines.push(
|
|
1479
|
+
" \u2022 width / height on an inline element; a value identical to the inherited/default (a no-op)."
|
|
860
1480
|
);
|
|
1481
|
+
lines.push(
|
|
1482
|
+
"- If a tweak only makes sense because of an underlying layout problem, fix the cause, don\u2019t patch the symptom. Remove dead code rather than piling on more utilities/overrides."
|
|
1483
|
+
);
|
|
1484
|
+
lines.push("- Per-element notes flagged below (\u26A0) are concrete instances I already detected \u2014 address them.");
|
|
861
1485
|
lines.push("");
|
|
862
1486
|
let anyClassTarget = false;
|
|
863
1487
|
let anyNewClass = false;
|
|
@@ -922,11 +1546,16 @@ function renderPrompt(records) {
|
|
|
922
1546
|
}
|
|
923
1547
|
if (c.after.designToken || c.after.token && /^(text|bg|border|rounded|shadow)-(?!\[)/.test(c.after.token))
|
|
924
1548
|
anyDesignToken = true;
|
|
1549
|
+
const from = (c.before.computed ?? "").trim();
|
|
925
1550
|
lines.push(
|
|
926
|
-
` - ${c.property}: ${c.
|
|
1551
|
+
from ? ` - ${c.property}: ${from} \u2192 ${c.after.computed}${suggestion}` : ` - ${c.property}: set to ${c.after.computed}${suggestion}`
|
|
927
1552
|
);
|
|
928
1553
|
}
|
|
929
1554
|
}
|
|
1555
|
+
if (r.smells?.length) {
|
|
1556
|
+
lines.push(`- \u26A0 Analyze this element (don\u2019t just apply \u2014 these look off):`);
|
|
1557
|
+
for (const s of r.smells) lines.push(` - ${s}`);
|
|
1558
|
+
}
|
|
930
1559
|
lines.push("");
|
|
931
1560
|
});
|
|
932
1561
|
lines.push("### Rules");
|
|
@@ -1165,24 +1794,34 @@ var CSS = (
|
|
|
1165
1794
|
|
|
1166
1795
|
.uiv-panel {
|
|
1167
1796
|
position: fixed; right: 16px; bottom: 72px; z-index: 2147483647;
|
|
1168
|
-
width:
|
|
1169
|
-
background: #
|
|
1170
|
-
border-radius:
|
|
1797
|
+
width: 360px; max-height: 84vh; overflow: auto;
|
|
1798
|
+
background: #141416; color: #e4e4e7; border: 1px solid #2a2a2e;
|
|
1799
|
+
border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,0.5);
|
|
1171
1800
|
font-size: 12px; display: none;
|
|
1172
1801
|
}
|
|
1173
1802
|
.uiv-panel.show { display: block; }
|
|
1174
1803
|
|
|
1175
1804
|
.uiv-head {
|
|
1176
|
-
display: flex; align-items: center; gap: 8px; padding:
|
|
1177
|
-
border-bottom: 1px solid #
|
|
1805
|
+
display: flex; align-items: center; gap: 8px; padding: 11px 13px;
|
|
1806
|
+
border-bottom: 1px solid #242428; position: sticky; top: 0; z-index: 5; background: #141416;
|
|
1178
1807
|
}
|
|
1179
|
-
.uiv-head b { font-size: 13px; color: #
|
|
1180
|
-
.uiv-bp { margin-left: auto; font-size: 10px; padding: 2px
|
|
1808
|
+
.uiv-head b { font-size: 13px; color: #fafafa; letter-spacing: .2px; }
|
|
1809
|
+
.uiv-bp { margin-left: auto; font-size: 10px; padding: 2px 8px; border-radius: 999px;
|
|
1181
1810
|
background: #312e81; color: #c7d2fe; font-weight: 600; }
|
|
1182
1811
|
.uiv-x { cursor: pointer; color: #71717a; padding: 2px 4px; }
|
|
1183
1812
|
.uiv-x:hover { color: #fff; }
|
|
1184
1813
|
|
|
1185
|
-
.uiv-sec { padding:
|
|
1814
|
+
.uiv-sec { padding: 11px 13px; border-bottom: 1px solid #1f1f22; }
|
|
1815
|
+
|
|
1816
|
+
/* ---- Framer-style top alignment toolbar ---- */
|
|
1817
|
+
.uiv-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 13px;
|
|
1818
|
+
border-bottom: 1px solid #1f1f22; }
|
|
1819
|
+
.uiv-tgroup { display: flex; gap: 2px; }
|
|
1820
|
+
.uiv-tbtn { display: flex; align-items: center; justify-content: center; width: 26px; height: 22px;
|
|
1821
|
+
border-radius: 5px; background: transparent; border: 1px solid transparent; color: #8b8b94; cursor: pointer; }
|
|
1822
|
+
.uiv-tbtn:hover { background: #1f1f23; color: #e4e4e7; }
|
|
1823
|
+
.uiv-tbtn.on { background: #312e81; border-color: #4f46e5; color: #fff; }
|
|
1824
|
+
.uiv-tsep { width: 1px; height: 16px; background: #2a2a2e; }
|
|
1186
1825
|
.uiv-empty { color: #71717a; padding: 18px 12px; text-align: center; }
|
|
1187
1826
|
|
|
1188
1827
|
.uiv-meta { line-height: 1.5; }
|
|
@@ -1243,10 +1882,22 @@ var CSS = (
|
|
|
1243
1882
|
.uiv-rv.changed { color: #4ade80; } /* edited in uivisor \u2192 green */
|
|
1244
1883
|
|
|
1245
1884
|
/* control-row state: file (authored) \xB7 edited (this breakpoint) \xB7 auto (computed) */
|
|
1246
|
-
|
|
1247
|
-
.uiv-ctl.st-
|
|
1248
|
-
.uiv-ctl.st-
|
|
1249
|
-
.uiv-ctl.st-
|
|
1885
|
+
/* 3-state colour on BOTH the label and the value (input / select text) */
|
|
1886
|
+
.uiv-ctl.st-file > .clabel,
|
|
1887
|
+
.uiv-ctl.st-file .uiv-num input, .uiv-ctl.st-file select.uiv-sel { color: #e4e4e7; }
|
|
1888
|
+
.uiv-ctl.st-edited > .clabel,
|
|
1889
|
+
.uiv-ctl.st-edited .uiv-num input, .uiv-ctl.st-edited select.uiv-sel { color: #4ade80; }
|
|
1890
|
+
.uiv-ctl.st-inherit > .clabel,
|
|
1891
|
+
.uiv-ctl.st-inherit .uiv-num input, .uiv-ctl.st-inherit select.uiv-sel { color: #38bdf8; } /* cascaded */
|
|
1892
|
+
.uiv-ctl.st-auto > .clabel,
|
|
1893
|
+
.uiv-ctl.st-auto .uiv-num input, .uiv-ctl.st-auto select.uiv-sel { color: #6b7280; }
|
|
1894
|
+
|
|
1895
|
+
/* "+" chips for hidden auto controls (width/height when not set) */
|
|
1896
|
+
.uiv-adds { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
|
|
1897
|
+
.uiv-addctl { cursor: pointer; border: 1px dashed #52525b; background: transparent;
|
|
1898
|
+
color: #71717a; border-radius: 6px; padding: 3px 8px; font-size: 11px; font-weight: 600;
|
|
1899
|
+
font-family: ui-monospace, monospace; }
|
|
1900
|
+
.uiv-addctl:hover { color: #fff; border-color: #6366f1; }
|
|
1250
1901
|
.uiv-inh { font-size: 9px; font-weight: 700; color: #38bdf8; font-family: ui-monospace, monospace;
|
|
1251
1902
|
background: #0c4a6e55; border: 1px solid #0369a1; border-radius: 4px; padding: 0 3px; margin-left: 2px; }
|
|
1252
1903
|
.uiv-leg { display: flex; gap: 12px; padding: 8px 12px 2px; font-size: 9px;
|
|
@@ -1282,8 +1933,8 @@ var CSS = (
|
|
|
1282
1933
|
.uiv-ctl > .cfield { min-width: 0; }
|
|
1283
1934
|
|
|
1284
1935
|
/* numeric field with a scrub handle on the left */
|
|
1285
|
-
.uiv-num { display: flex; align-items: stretch; background: #
|
|
1286
|
-
border: 1px solid #
|
|
1936
|
+
.uiv-num { display: flex; align-items: stretch; background: #1c1c20;
|
|
1937
|
+
border: 1px solid #313138; border-radius: 7px; overflow: hidden; }
|
|
1287
1938
|
.uiv-num.changed { border-color: #4ade80; }
|
|
1288
1939
|
.uiv-num.changed input { color: #4ade80; } /* uivisor-edited value \u2192 green */
|
|
1289
1940
|
.uiv-sel.changed, .uiv-color.changed { border-color: #4ade80; }
|
|
@@ -1308,7 +1959,7 @@ var CSS = (
|
|
|
1308
1959
|
|
|
1309
1960
|
.uiv-expand { display: flex; align-items: center; justify-content: center;
|
|
1310
1961
|
width: 26px; height: 28px; border-radius: 7px; cursor: pointer;
|
|
1311
|
-
background: #
|
|
1962
|
+
background: #1c1c20; border: 1px solid #313138; color: #8b8b94; }
|
|
1312
1963
|
.uiv-expand:hover { color: #fff; background: #3f3f46; }
|
|
1313
1964
|
.uiv-expand.on { color: #c7d2fe; border-color: #4f46e5; background: #312e81; }
|
|
1314
1965
|
|
|
@@ -1317,13 +1968,13 @@ var CSS = (
|
|
|
1317
1968
|
|
|
1318
1969
|
/* Weight dropdown only \u2014 must NOT match the unit <select> inside dim fields. */
|
|
1319
1970
|
.uiv-ctl select.uiv-sel {
|
|
1320
|
-
width: 100%; background: #
|
|
1971
|
+
width: 100%; background: #1c1c20; border: 1px solid #313138; color: #fff;
|
|
1321
1972
|
border-radius: 7px; padding: 6px 7px; font-size: 12px; outline: none;
|
|
1322
1973
|
}
|
|
1323
1974
|
.uiv-ctl select.uiv-sel:focus { border-color: #6366f1; }
|
|
1324
1975
|
.uiv-ctl input[type=color] { width: 100%; height: 28px; padding: 2px; cursor: pointer;
|
|
1325
|
-
background: #
|
|
1326
|
-
.uiv-ctl input.uiv-text { width: 100%; background: #
|
|
1976
|
+
background: #1c1c20; border: 1px solid #313138; border-radius: 7px; }
|
|
1977
|
+
.uiv-ctl input.uiv-text { width: 100%; background: #1c1c20; border: 1px solid #313138;
|
|
1327
1978
|
color: #fff; border-radius: 7px; padding: 6px 7px; font-size: 12px; outline: none; }
|
|
1328
1979
|
.uiv-ctl input.uiv-text:focus { border-color: #6366f1; }
|
|
1329
1980
|
.uiv-ctl input.uiv-text.changed { border-color: #4ade80; color: #4ade80; }
|
|
@@ -1346,6 +1997,86 @@ var CSS = (
|
|
|
1346
1997
|
.uiv-btn.primary { background: #4f46e5; border-color: #6366f1; color: #fff; flex-basis: 100%; }
|
|
1347
1998
|
.uiv-btn.primary:hover { background: #4338ca; }
|
|
1348
1999
|
.uiv-btn.ghost { flex: 0 0 auto; }
|
|
2000
|
+
/* floating read-only "all styles" block, docked bottom-right, left of the panel */
|
|
2001
|
+
.uiv-info { position: fixed; right: 384px; bottom: 16px; z-index: 2147483646;
|
|
2002
|
+
width: 216px; max-height: 52vh; overflow: auto; display: none;
|
|
2003
|
+
background: rgba(24,24,27,0.86); color: #e4e4e7;
|
|
2004
|
+
border: 1px solid #3f3f46; border-radius: 10px; padding: 8px 10px;
|
|
2005
|
+
font-size: 11px; box-shadow: 0 8px 28px rgba(0,0,0,0.4); }
|
|
2006
|
+
.uiv-info.show { display: block; }
|
|
2007
|
+
.uiv-info-h { font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
|
|
2008
|
+
color: #8b8b94; font-weight: 600; margin-bottom: 6px; }
|
|
2009
|
+
.uiv-info-sub { color: #52525b; }
|
|
2010
|
+
/* ---- box-model widget (nested margin / padding, Figma/Framer style) ----
|
|
2011
|
+
Bands are sized so the side inputs NEVER overlap the inner content box:
|
|
2012
|
+
vertical band 26px (> input 18px), horizontal band 46px (> input 36px). */
|
|
2013
|
+
.uiv-bm { position: relative; height: 148px; margin: 2px 0 9px;
|
|
2014
|
+
background: #1b1b1f; border: 1px solid #2f2f35; border-radius: 9px; }
|
|
2015
|
+
.uiv-bm-pad { position: absolute; top: 26px; bottom: 26px; left: 46px; right: 46px;
|
|
2016
|
+
background: #26262c; border: 1px solid #3a3a42; border-radius: 7px; }
|
|
2017
|
+
.uiv-bm-content { position: absolute; z-index: 0; top: 26px; bottom: 26px; left: 46px; right: 46px;
|
|
2018
|
+
background: #34343c; border-radius: 5px; }
|
|
2019
|
+
.uiv-bm-tag { position: absolute; z-index: 1; top: 4px; left: 8px; font-size: 7.5px; font-weight: 700;
|
|
2020
|
+
letter-spacing: .5px; color: #6b6b73; pointer-events: none; }
|
|
2021
|
+
.uiv-bm-i { position: absolute; z-index: 3; width: 36px; height: 18px; padding: 0; box-sizing: border-box;
|
|
2022
|
+
background: #0e0e11; border: 1px solid #34343c; border-radius: 5px;
|
|
2023
|
+
color: #d4d4d8; text-align: center; text-align-last: center; line-height: 16px; font-size: 10px;
|
|
2024
|
+
outline: none; cursor: ew-resize; font-family: ui-monospace, monospace; -moz-appearance: textfield; }
|
|
2025
|
+
.uiv-bm-i::-webkit-outer-spin-button, .uiv-bm-i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
|
2026
|
+
.uiv-bm-i:hover { border-color: #52525b; }
|
|
2027
|
+
.uiv-bm-i:focus { cursor: text; border-color: #6366f1; }
|
|
2028
|
+
.uiv-bm-i.bm-top { top: 4px; left: 50%; transform: translateX(-50%); }
|
|
2029
|
+
.uiv-bm-i.bm-bottom { bottom: 4px; left: 50%; transform: translateX(-50%); }
|
|
2030
|
+
.uiv-bm-i.bm-left { left: 5px; top: 50%; transform: translateY(-50%); }
|
|
2031
|
+
.uiv-bm-i.bm-right { right: 5px; top: 50%; transform: translateY(-50%); }
|
|
2032
|
+
.uiv-bm-i.st-file { color: #e4e4e7; }
|
|
2033
|
+
.uiv-bm-i.st-edited { color: #4ade80; }
|
|
2034
|
+
.uiv-bm-i.st-inherit { color: #38bdf8; }
|
|
2035
|
+
.uiv-bm-i.st-auto { color: #6b7280; }
|
|
2036
|
+
/* spacing-token dropdown \u2014 opens when a side value is focused/clicked */
|
|
2037
|
+
.uiv-bm-pop { display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
|
|
2038
|
+
margin: -3px 0 8px; padding: 8px; background: #1c1c20; border: 1px solid #34343c;
|
|
2039
|
+
border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
|
|
2040
|
+
.uiv-bm-pop[hidden] { display: none; }
|
|
2041
|
+
.uiv-bm-poplabel { width: 100%; font-size: 9px; font-weight: 700; text-transform: uppercase;
|
|
2042
|
+
letter-spacing: .4px; color: #6b6b73; font-family: ui-monospace, monospace; }
|
|
2043
|
+
.uiv-bm-chip { background: #1e1b4b55; border: 1px solid #4338ca; color: #c7d2fe; border-radius: 6px;
|
|
2044
|
+
padding: 3px 8px; font-size: 10px; cursor: pointer; font-family: ui-monospace, monospace; }
|
|
2045
|
+
.uiv-bm-chip:hover { background: #4f46e5; border-color: #6366f1; color: #fff; }
|
|
2046
|
+
|
|
2047
|
+
/* ---- All CSS inspector (search + categories + generic smart inputs) ---- */
|
|
2048
|
+
.uiv-csssearch { width: 100%; background: #0f0f12; border: 1px solid #3f3f46; color: #e4e4e7;
|
|
2049
|
+
border-radius: 7px; padding: 7px 9px; font-size: 12px; outline: none; font-family: ui-monospace, monospace; }
|
|
2050
|
+
.uiv-csssearch:focus { border-color: #6366f1; }
|
|
2051
|
+
.uiv-csssearch::placeholder { color: #6b6b73; }
|
|
2052
|
+
.uiv-catacc .uiv-catn { color: #52525b; font-weight: 700; margin-left: auto; }
|
|
2053
|
+
.uiv-showall { background: none; border: 0; color: #818cf8; cursor: pointer;
|
|
2054
|
+
font-size: 10px; padding: 2px 0 4px; font-weight: 600; }
|
|
2055
|
+
.uiv-showall:hover { color: #a5b4fc; }
|
|
2056
|
+
.uiv-gctl { grid-template-columns: 108px 1fr; gap: 8px; margin-bottom: 5px; }
|
|
2057
|
+
.uiv-gplabel { font-family: ui-monospace, monospace; font-size: 10px; color: #a1a1aa;
|
|
2058
|
+
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
2059
|
+
.uiv-gsel { width: 100%; background: #1c1c20; border: 1px solid #313138; color: #fff;
|
|
2060
|
+
border-radius: 7px; padding: 5px 6px; font-size: 11px; outline: none; font-family: ui-monospace, monospace; }
|
|
2061
|
+
.uiv-gsel:focus { border-color: #6366f1; }
|
|
2062
|
+
.uiv-gnum { display: flex; align-items: stretch; background: #1c1c20; border: 1px solid #313138;
|
|
2063
|
+
border-radius: 7px; overflow: hidden; }
|
|
2064
|
+
.uiv-gnum:focus-within { border-color: #6366f1; }
|
|
2065
|
+
.uiv-gtext { flex: 1; min-width: 0; background: #1c1c20; border: 1px solid #313138; color: #fff;
|
|
2066
|
+
border-radius: 7px; padding: 5px 7px; font-size: 11px; outline: none; font-family: ui-monospace, monospace; }
|
|
2067
|
+
.uiv-gnum .uiv-gtext { border: none; border-radius: 0; background: transparent; padding-left: 2px; }
|
|
2068
|
+
.uiv-gtext:focus { border-color: #6366f1; }
|
|
2069
|
+
.uiv-gtext::placeholder { color: #6b6b73; }
|
|
2070
|
+
.uiv-gcolorwrap { display: flex; gap: 5px; align-items: center; }
|
|
2071
|
+
.uiv-gcolor { width: 28px; height: 26px; padding: 2px; flex: 0 0 auto; background: #1c1c20;
|
|
2072
|
+
border: 1px solid #313138; border-radius: 7px; cursor: pointer; }
|
|
2073
|
+
.uiv-gtextc { flex: 1; }
|
|
2074
|
+
.uiv-gctl.st-file .uiv-gtext, .uiv-gctl.st-file .uiv-gsel { color: #e4e4e7; }
|
|
2075
|
+
.uiv-gctl.st-edited .uiv-gtext, .uiv-gctl.st-edited .uiv-gsel { color: #4ade80; }
|
|
2076
|
+
.uiv-gctl.st-edited .uiv-gnum, .uiv-gctl.st-edited .uiv-gsel { border-color: #4ade80; }
|
|
2077
|
+
.uiv-gctl.st-inherit .uiv-gtext, .uiv-gctl.st-inherit .uiv-gsel { color: #38bdf8; }
|
|
2078
|
+
.uiv-gctl.st-auto .uiv-gtext, .uiv-gctl.st-auto .uiv-gsel { color: #6b7280; }
|
|
2079
|
+
|
|
1349
2080
|
.uiv-toast { position: fixed; right: 16px; bottom: 128px; z-index: 2147483647;
|
|
1350
2081
|
background: #22c55e; color: #052e16; padding: 8px 12px; border-radius: 8px;
|
|
1351
2082
|
font-size: 12px; font-weight: 600; display: none; }
|
|
@@ -1366,6 +2097,38 @@ var INHERITED_PROPS = /* @__PURE__ */ new Set([
|
|
|
1366
2097
|
"text-align",
|
|
1367
2098
|
"font-family"
|
|
1368
2099
|
]);
|
|
2100
|
+
var BOX_SIDES = {
|
|
2101
|
+
inset: [
|
|
2102
|
+
{ css: "top", label: "T" },
|
|
2103
|
+
{ css: "right", label: "R" },
|
|
2104
|
+
{ css: "bottom", label: "B" },
|
|
2105
|
+
{ css: "left", label: "L" }
|
|
2106
|
+
],
|
|
2107
|
+
padding: [
|
|
2108
|
+
{ css: "padding-top", label: "T" },
|
|
2109
|
+
{ css: "padding-right", label: "R" },
|
|
2110
|
+
{ css: "padding-bottom", label: "B" },
|
|
2111
|
+
{ css: "padding-left", label: "L" }
|
|
2112
|
+
],
|
|
2113
|
+
margin: [
|
|
2114
|
+
{ css: "margin-top", label: "T" },
|
|
2115
|
+
{ css: "margin-right", label: "R" },
|
|
2116
|
+
{ css: "margin-bottom", label: "B" },
|
|
2117
|
+
{ css: "margin-left", label: "L" }
|
|
2118
|
+
],
|
|
2119
|
+
radius: [
|
|
2120
|
+
{ css: "border-top-left-radius", label: "TL" },
|
|
2121
|
+
{ css: "border-top-right-radius", label: "TR" },
|
|
2122
|
+
{ css: "border-bottom-right-radius", label: "BR" },
|
|
2123
|
+
{ css: "border-bottom-left-radius", label: "BL" }
|
|
2124
|
+
],
|
|
2125
|
+
"border-width": [
|
|
2126
|
+
{ css: "border-top-width", label: "T" },
|
|
2127
|
+
{ css: "border-right-width", label: "R" },
|
|
2128
|
+
{ css: "border-bottom-width", label: "B" },
|
|
2129
|
+
{ css: "border-left-width", label: "L" }
|
|
2130
|
+
]
|
|
2131
|
+
};
|
|
1369
2132
|
var Uivisor = class {
|
|
1370
2133
|
constructor() {
|
|
1371
2134
|
this.enabled = false;
|
|
@@ -1374,6 +2137,14 @@ var Uivisor = class {
|
|
|
1374
2137
|
this.expanded = /* @__PURE__ */ new Set();
|
|
1375
2138
|
/** Section titles collapsed in the accordion (per session). */
|
|
1376
2139
|
this.collapsedSecs = /* @__PURE__ */ new Set();
|
|
2140
|
+
/** Controls manually revealed via "+" (hideWhenAuto controls that are auto). */
|
|
2141
|
+
this.revealedCtls = /* @__PURE__ */ new Set();
|
|
2142
|
+
/** "All CSS" search query + which property categories are expanded / showing all. */
|
|
2143
|
+
this.cssSearch = "";
|
|
2144
|
+
this.expandedCats = /* @__PURE__ */ new Set();
|
|
2145
|
+
this.showAllCats = /* @__PURE__ */ new Set();
|
|
2146
|
+
/** Box-model widget: the last-focused side the token dropdown targets. */
|
|
2147
|
+
this.lastBmSide = "padding-top";
|
|
1377
2148
|
/** Undo / redo stacks of full edit-state snapshots. */
|
|
1378
2149
|
this.undoStack = [];
|
|
1379
2150
|
this.redoStack = [];
|
|
@@ -1460,6 +2231,12 @@ var Uivisor = class {
|
|
|
1460
2231
|
this.selBox.style.display = "none";
|
|
1461
2232
|
}
|
|
1462
2233
|
};
|
|
2234
|
+
/** Properties to snapshot on selection: the curated set ∪ the whole registry. */
|
|
2235
|
+
this._snapProps = null;
|
|
2236
|
+
// ---- "All CSS" inspector (registry-driven, curated like Framer/Webflow) ----
|
|
2237
|
+
/** Properties already covered by the curated quick-control sections above — so we
|
|
2238
|
+
* don't show them again in the All-CSS area. */
|
|
2239
|
+
this._curatedProps = null;
|
|
1463
2240
|
}
|
|
1464
2241
|
/** Project breakpoints — re-detect until the stylesheets yield a real set. */
|
|
1465
2242
|
bpSystem() {
|
|
@@ -1512,7 +2289,7 @@ var Uivisor = class {
|
|
|
1512
2289
|
this.root.innerHTML = `
|
|
1513
2290
|
<style>${CSS}</style>
|
|
1514
2291
|
<div class="uiv-framewrap">
|
|
1515
|
-
<div class="uiv-framebar"><div class="uiv-framechips uiv-chips"></div><span class="uiv-framew">768px</span><span class="uiv-framex" title="
|
|
2292
|
+
<div class="uiv-framebar"><div class="uiv-framechips uiv-chips"></div><span class="uiv-framew">768px</span><span class="uiv-framex" title="Turn uivisor off (Alt+U)">\u2715</span></div>
|
|
1516
2293
|
<div class="uiv-framestage">
|
|
1517
2294
|
<div class="uiv-framehost">
|
|
1518
2295
|
<iframe class="uiv-frame" data-uiv-frame="1"></iframe>
|
|
@@ -1524,6 +2301,7 @@ var Uivisor = class {
|
|
|
1524
2301
|
<div class="uiv-box sel"></div>
|
|
1525
2302
|
<div class="uiv-tag"></div>
|
|
1526
2303
|
<div class="uiv-fab" title="Toggle uivisor (Alt+U)">\u25CE</div>
|
|
2304
|
+
<div class="uiv-info"></div>
|
|
1527
2305
|
<div class="uiv-toast"></div>
|
|
1528
2306
|
<div class="uiv-panel">
|
|
1529
2307
|
<div class="uiv-head">
|
|
@@ -1551,7 +2329,7 @@ var Uivisor = class {
|
|
|
1551
2329
|
this.frame = this.q(".uiv-frame");
|
|
1552
2330
|
this.fab.addEventListener("click", () => this.toggle());
|
|
1553
2331
|
this.q(".uiv-x").addEventListener("click", () => this.toggle(false));
|
|
1554
|
-
this.q(".uiv-framex").addEventListener("click", () => this.
|
|
2332
|
+
this.q(".uiv-framex").addEventListener("click", () => this.toggle(false));
|
|
1555
2333
|
this.q(".copy-prompt").addEventListener("click", () => this.copyPrompt());
|
|
1556
2334
|
this.q(".copy-json").addEventListener("click", () => this.copyJSON());
|
|
1557
2335
|
this.q(".reset").addEventListener("click", () => this.resetSelected());
|
|
@@ -1597,11 +2375,26 @@ var Uivisor = class {
|
|
|
1597
2375
|
if (!this.enabled) {
|
|
1598
2376
|
this.hoverBox.style.display = "none";
|
|
1599
2377
|
this.tag.style.display = "none";
|
|
2378
|
+
this.renderInfo();
|
|
1600
2379
|
if (this.responsive) this.toggleResponsive(false);
|
|
1601
2380
|
} else {
|
|
1602
2381
|
this.scheduleBpRefresh();
|
|
2382
|
+
if (!this.responsive) {
|
|
2383
|
+
this.frameWidth = this.defaultFrameWidth();
|
|
2384
|
+
this.toggleResponsive(true);
|
|
2385
|
+
}
|
|
1603
2386
|
}
|
|
1604
2387
|
}
|
|
2388
|
+
/** Frame width on enable: the real window width (≈ the current breakpoint). */
|
|
2389
|
+
defaultFrameWidth() {
|
|
2390
|
+
return typeof window !== "undefined" ? window.innerWidth : 1280;
|
|
2391
|
+
}
|
|
2392
|
+
/** Frame width for the "all"/base chip: a phone-ish width in the base range. */
|
|
2393
|
+
baseFrameWidth() {
|
|
2394
|
+
const bps = this.bpSystem().breakpoints;
|
|
2395
|
+
const firstBp = bps.length ? bps[0].minWidth : 640;
|
|
2396
|
+
return this.bpSystem().dir === "min" ? Math.min(390, firstBp - 1) : 390;
|
|
2397
|
+
}
|
|
1605
2398
|
/** Stylesheets (esp. JIT/CDN Tailwind) load async — re-detect breakpoints a few
|
|
1606
2399
|
* times after enabling and re-render only if the set actually changed. */
|
|
1607
2400
|
scheduleBpRefresh() {
|
|
@@ -1746,7 +2539,9 @@ var Uivisor = class {
|
|
|
1746
2539
|
};
|
|
1747
2540
|
this.states.set(el, {
|
|
1748
2541
|
record,
|
|
1749
|
-
|
|
2542
|
+
// Snapshot every registry property (not just the curated set) so a generic
|
|
2543
|
+
// edit's "before" value is known — the All-CSS inspector edits anything.
|
|
2544
|
+
original: snapshot(el, this.snapshotProps()),
|
|
1750
2545
|
applied: /* @__PURE__ */ new Set(),
|
|
1751
2546
|
dimUnit: {}
|
|
1752
2547
|
});
|
|
@@ -1755,6 +2550,10 @@ var Uivisor = class {
|
|
|
1755
2550
|
this.reposition();
|
|
1756
2551
|
this.renderBody();
|
|
1757
2552
|
}
|
|
2553
|
+
snapshotProps() {
|
|
2554
|
+
if (!this._snapProps) this._snapProps = [.../* @__PURE__ */ new Set([...ALL_CSS, ...cssRegistry().byProp.keys()])];
|
|
2555
|
+
return this._snapProps;
|
|
2556
|
+
}
|
|
1758
2557
|
// ---- value helpers ----
|
|
1759
2558
|
st() {
|
|
1760
2559
|
return this.selected ? this.states.get(this.selected) ?? null : null;
|
|
@@ -1812,8 +2611,10 @@ var Uivisor = class {
|
|
|
1812
2611
|
}
|
|
1813
2612
|
selectCurrent(css) {
|
|
1814
2613
|
let v = this.liveVal(css).trim();
|
|
1815
|
-
if (
|
|
1816
|
-
|
|
2614
|
+
if (css === "font-weight") {
|
|
2615
|
+
if (v === "normal") v = "400";
|
|
2616
|
+
if (v === "bold") v = "700";
|
|
2617
|
+
}
|
|
1817
2618
|
return v;
|
|
1818
2619
|
}
|
|
1819
2620
|
// ---- apply / record / revert ----
|
|
@@ -1957,13 +2758,13 @@ var Uivisor = class {
|
|
|
1957
2758
|
const el = this.selected;
|
|
1958
2759
|
const st = this.st();
|
|
1959
2760
|
if (!el || !st) return;
|
|
1960
|
-
const
|
|
2761
|
+
const scope = this.activeScope();
|
|
1961
2762
|
for (const css of cssList) {
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
|
|
2763
|
+
st.record.changes = st.record.changes.filter(
|
|
2764
|
+
(c) => !(c.property === css && c.breakpoint === scope.name)
|
|
2765
|
+
);
|
|
1965
2766
|
}
|
|
1966
|
-
this.
|
|
2767
|
+
this.reapplyScope();
|
|
1967
2768
|
this.renderBody();
|
|
1968
2769
|
}
|
|
1969
2770
|
commitNumeric(cssList, raw) {
|
|
@@ -2026,6 +2827,7 @@ var Uivisor = class {
|
|
|
2026
2827
|
${this.journalHtml()}
|
|
2027
2828
|
`;
|
|
2028
2829
|
if (this.responsive) this.renderFrameBar();
|
|
2830
|
+
this.renderInfo();
|
|
2029
2831
|
this.bindControls();
|
|
2030
2832
|
return;
|
|
2031
2833
|
}
|
|
@@ -2038,14 +2840,16 @@ var Uivisor = class {
|
|
|
2038
2840
|
<div class="uiv-src">${escapeHtml(src)}</div>
|
|
2039
2841
|
<span class="uiv-mech">${st.record.styling.primaryMechanism}</span>
|
|
2040
2842
|
</div>
|
|
2843
|
+
${this.alignToolbarHtml()}
|
|
2041
2844
|
${this.dsIndicatorHtml()}
|
|
2042
|
-
${this.currentStylesHtml()}
|
|
2043
2845
|
${this.breakpointBarHtml()}
|
|
2044
2846
|
${this.targetHtml(st)}
|
|
2045
2847
|
${this.controlsHtml(this.context(this.selected))}
|
|
2046
2848
|
${this.journalHtml()}
|
|
2849
|
+
${this.allCssHtml()}
|
|
2047
2850
|
`;
|
|
2048
2851
|
if (this.responsive) this.renderFrameBar();
|
|
2852
|
+
this.renderInfo();
|
|
2049
2853
|
this.bindControls();
|
|
2050
2854
|
}
|
|
2051
2855
|
/** Small indicator: how many design tokens were detected (or a hint if none). */
|
|
@@ -2104,14 +2908,17 @@ var Uivisor = class {
|
|
|
2104
2908
|
cache.set(el, out);
|
|
2105
2909
|
return out;
|
|
2106
2910
|
}
|
|
2107
|
-
/**
|
|
2108
|
-
*
|
|
2109
|
-
*
|
|
2110
|
-
|
|
2111
|
-
if (this.isChanged(props)) return "
|
|
2112
|
-
if (this.inheritedFrom(props)) return "
|
|
2911
|
+
/** Editing state of a property set: edited (set at this breakpoint) · inherit
|
|
2912
|
+
* (cascaded from another breakpoint) · file (authored in CSS) · auto
|
|
2913
|
+
* (browser-computed / default, not set anywhere). */
|
|
2914
|
+
controlState(props) {
|
|
2915
|
+
if (this.isChanged(props)) return "edited";
|
|
2916
|
+
if (this.inheritedFrom(props)) return "inherit";
|
|
2113
2917
|
const inherit = props.some((p) => INHERITED_PROPS.has(p));
|
|
2114
|
-
return this.isAuthored(props, inherit) ? "
|
|
2918
|
+
return this.isAuthored(props, inherit) ? "file" : "auto";
|
|
2919
|
+
}
|
|
2920
|
+
controlStateClass(props) {
|
|
2921
|
+
return ` st-${this.controlState(props)}`;
|
|
2115
2922
|
}
|
|
2116
2923
|
/** A control's label, with an "inherited from {bp}" badge when the value cascaded. */
|
|
2117
2924
|
ctlLabel(label, props) {
|
|
@@ -2131,12 +2938,11 @@ var Uivisor = class {
|
|
|
2131
2938
|
return false;
|
|
2132
2939
|
}
|
|
2133
2940
|
/**
|
|
2134
|
-
*
|
|
2135
|
-
*
|
|
2136
|
-
*
|
|
2137
|
-
* Comprehensive + context-aware (flex/grid/position rows only when relevant).
|
|
2941
|
+
* Comprehensive read-only readout of the element's ACTUAL current styles
|
|
2942
|
+
* (context-aware: flex/grid/position rows only when relevant). Rendered into the
|
|
2943
|
+
* floating info block at the corner, not the panel. Returns the `<div.uiv-rrow>` rows.
|
|
2138
2944
|
*/
|
|
2139
|
-
|
|
2945
|
+
styleRows() {
|
|
2140
2946
|
const el = this.selected;
|
|
2141
2947
|
if (!el) return "";
|
|
2142
2948
|
let cs;
|
|
@@ -2247,9 +3053,19 @@ var Uivisor = class {
|
|
|
2247
3053
|
if (z && z !== "auto") add("z-index", z, ["z-index"]);
|
|
2248
3054
|
const tr = g("transform");
|
|
2249
3055
|
if (tr && tr !== "none") add("transform", clip(tr, 22), ["transform"]);
|
|
2250
|
-
|
|
2251
|
-
|
|
2252
|
-
|
|
3056
|
+
return rows.map((r) => `<div class="uiv-rrow"><span class="uiv-rk">${r.k}</span><span class="uiv-rv">${r.v}</span></div>`).join("");
|
|
3057
|
+
}
|
|
3058
|
+
/** Floating read-only "all styles" block, docked at the bottom-right corner so it
|
|
3059
|
+
* doesn't take space in the panel. Shown only while an element is selected. */
|
|
3060
|
+
renderInfo() {
|
|
3061
|
+
const info = this.q(".uiv-info");
|
|
3062
|
+
if (!this.enabled || !this.selected) {
|
|
3063
|
+
info.classList.remove("show");
|
|
3064
|
+
info.innerHTML = "";
|
|
3065
|
+
return;
|
|
3066
|
+
}
|
|
3067
|
+
info.innerHTML = `<div class="uiv-info-h">all styles <span class="uiv-info-sub">computed</span></div><div class="uiv-readout">${this.styleRows()}</div>`;
|
|
3068
|
+
info.classList.add("show");
|
|
2253
3069
|
}
|
|
2254
3070
|
/** Display label for a breakpoint name — the unprefixed "base" scope reads "all"
|
|
2255
3071
|
* (applies to every size by default); internal key stays "base". */
|
|
@@ -2272,11 +3088,10 @@ var Uivisor = class {
|
|
|
2272
3088
|
const frameBp = this.responsive ? activeBreakpoint(this.frameWidth, sys).name : null;
|
|
2273
3089
|
const winBp = currentBreakpoint(sys).name;
|
|
2274
3090
|
const isActive = (n) => this.responsive ? n === frameBp : n === winBp;
|
|
2275
|
-
const chip = (n, on, title) => `<button class="uiv-chip${on ? " on" : ""}" data-bp="${n}" title="${escapeAttr(title)}">${this.bpIcon(n)}<span>${
|
|
3091
|
+
const chip = (n, on, title) => `<button class="uiv-chip${on ? " on" : ""}" data-bp="${n}" title="${escapeAttr(title)}">${this.bpIcon(n)}<span>${this.bpLabel(n)}</span></button>`;
|
|
2276
3092
|
const all = chip("base", isActive("base"), "No breakpoint \u2014 applies to every size by default");
|
|
2277
|
-
const live = chip("live", !this.responsive, "Follow your real browser window");
|
|
2278
3093
|
const rest = sys.breakpoints.map((b) => chip(b.name, isActive(b.name), sys.dir === "min" ? `\u2265 ${b.minWidth}px` : `\u2264 ${b.minWidth}px`)).join("");
|
|
2279
|
-
return all +
|
|
3094
|
+
return all + rest;
|
|
2280
3095
|
}
|
|
2281
3096
|
/** Panel breakpoint bar — shown only in Live mode (in responsive mode the bar
|
|
2282
3097
|
* lives over the virtual screen instead). */
|
|
@@ -2327,13 +3142,64 @@ var Uivisor = class {
|
|
|
2327
3142
|
if (req === "flexgrid") return ctx.flexGrid;
|
|
2328
3143
|
return true;
|
|
2329
3144
|
}
|
|
3145
|
+
/** Framer-style top alignment toolbar — justify (horizontal) + align (vertical)
|
|
3146
|
+
* icon buttons. Shown for flex/grid containers (where they apply). */
|
|
3147
|
+
alignToolbarHtml() {
|
|
3148
|
+
const el = this.selected;
|
|
3149
|
+
if (!el || !this.context(el).flexGrid) return "";
|
|
3150
|
+
const j = this.liveVal("justify-content").trim();
|
|
3151
|
+
const a = this.liveVal("align-items").trim();
|
|
3152
|
+
const g = (r) => `<svg viewBox="0 0 14 14" width="13" height="13" fill="currentColor">${r}</svg>`;
|
|
3153
|
+
const JI = {
|
|
3154
|
+
"flex-start": g('<rect x="1" y="3" width="2" height="8"/><rect x="4" y="3" width="2" height="8"/>'),
|
|
3155
|
+
center: g('<rect x="4" y="3" width="2" height="8"/><rect x="8" y="3" width="2" height="8"/>'),
|
|
3156
|
+
"flex-end": g('<rect x="8" y="3" width="2" height="8"/><rect x="11" y="3" width="2" height="8"/>'),
|
|
3157
|
+
"space-between": g('<rect x="1" y="3" width="2" height="8"/><rect x="11" y="3" width="2" height="8"/>')
|
|
3158
|
+
};
|
|
3159
|
+
const AI = {
|
|
3160
|
+
"flex-start": g('<rect x="3" y="1" width="8" height="2"/><rect x="3" y="4" width="8" height="2"/>'),
|
|
3161
|
+
center: g('<rect x="3" y="4" width="8" height="2"/><rect x="3" y="8" width="8" height="2"/>'),
|
|
3162
|
+
"flex-end": g('<rect x="3" y="8" width="8" height="2"/><rect x="3" y="11" width="8" height="2"/>'),
|
|
3163
|
+
stretch: g('<rect x="3" y="1" width="8" height="12"/>')
|
|
3164
|
+
};
|
|
3165
|
+
const btn = (prop, val, icon, cur) => `<button class="uiv-tbtn${cur === val ? " on" : ""}" data-prop="${prop}" data-val="${val}" title="${prop}: ${val}">${icon}</button>`;
|
|
3166
|
+
const jb = Object.entries(JI).map(([v, ic]) => btn("justify-content", v, ic, j)).join("");
|
|
3167
|
+
const ab = Object.entries(AI).map(([v, ic]) => btn("align-items", v, ic, a)).join("");
|
|
3168
|
+
return `<div class="uiv-toolbar"><div class="uiv-tgroup">${jb}</div><div class="uiv-tsep"></div><div class="uiv-tgroup">${ab}</div></div>`;
|
|
3169
|
+
}
|
|
3170
|
+
/** Figma/Framer-style nested box-model widget: MARGIN ring around a PADDING ring,
|
|
3171
|
+
* with an editable number on each of the 8 sides. Commits via the engine. */
|
|
3172
|
+
boxModelHtml() {
|
|
3173
|
+
const num = (css) => {
|
|
3174
|
+
const n = this.liveNum(css);
|
|
3175
|
+
return n == null ? "0" : String(round2(n));
|
|
3176
|
+
};
|
|
3177
|
+
const side = (css, pos) => `<input class="uiv-bm-i ${pos}${this.controlStateClass([css])}" data-css="${css}" value="${escapeAttr(num(css))}" title="${css}" inputmode="decimal" spellcheck="false">`;
|
|
3178
|
+
const spaceTokens = this.designSystem().byCategory["spacing"] ?? [];
|
|
3179
|
+
const pop = spaceTokens.length ? `<div class="uiv-bm-pop" hidden><span class="uiv-bm-poplabel">Token</span>` + spaceTokens.map((t) => `<button class="uiv-bm-chip" data-var="${escapeAttr(t.cssVar)}" title="${escapeAttr(t.value)}">${escapeHtml(t.name)} \xB7 ${escapeHtml(t.value)}</button>`).join("") + `</div>` : "";
|
|
3180
|
+
return `<div class="uiv-bm"><span class="uiv-bm-tag">MARGIN</span>` + side("margin-top", "bm-top") + side("margin-right", "bm-right") + side("margin-bottom", "bm-bottom") + side("margin-left", "bm-left") + `<div class="uiv-bm-pad"><span class="uiv-bm-tag">PADDING</span>` + side("padding-top", "bm-top") + side("padding-right", "bm-right") + side("padding-bottom", "bm-bottom") + side("padding-left", "bm-left") + `<div class="uiv-bm-content"></div></div></div>` + pop;
|
|
3181
|
+
}
|
|
2330
3182
|
controlsHtml(ctx) {
|
|
2331
3183
|
const legend = `<div class="uiv-leg"><span class="uiv-lg">file</span><span class="uiv-lg edit">edited</span><span class="uiv-lg inh">inherited</span><span class="uiv-lg auto">auto</span></div>`;
|
|
2332
3184
|
const secs = SECTIONS.map((sec) => {
|
|
2333
3185
|
const controls = sec.controls.filter((c) => this.relevant(c, ctx));
|
|
2334
3186
|
if (!controls.length) return "";
|
|
2335
|
-
|
|
2336
|
-
|
|
3187
|
+
if (this.collapsedSecs.has(sec.title)) return `<div class="uiv-sec">${this.accordionTitle(sec.title)}</div>`;
|
|
3188
|
+
const isSpacing = sec.title === "Spacing";
|
|
3189
|
+
const widget = isSpacing ? this.boxModelHtml() : "";
|
|
3190
|
+
const rows = [];
|
|
3191
|
+
const adds = [];
|
|
3192
|
+
for (const c of controls) {
|
|
3193
|
+
if (isSpacing && c.kind === "box" && (c.key === "padding" || c.key === "margin")) continue;
|
|
3194
|
+
const css = c.css;
|
|
3195
|
+
if (c.kind === "len" && c.hideWhenAuto && css && !this.revealedCtls.has(css) && this.controlState([css]) === "auto") {
|
|
3196
|
+
adds.push(`<button class="uiv-addctl" data-css="${css}">+ ${escapeHtml(c.label)}</button>`);
|
|
3197
|
+
} else {
|
|
3198
|
+
rows.push(this.controlRow(c));
|
|
3199
|
+
}
|
|
3200
|
+
}
|
|
3201
|
+
const addRow = adds.length ? `<div class="uiv-adds">${adds.join("")}</div>` : "";
|
|
3202
|
+
return `<div class="uiv-sec">${this.accordionTitle(sec.title)}${widget}${rows.join("")}${addRow}</div>`;
|
|
2337
3203
|
}).join("");
|
|
2338
3204
|
return legend + secs;
|
|
2339
3205
|
}
|
|
@@ -2462,7 +3328,10 @@ var Uivisor = class {
|
|
|
2462
3328
|
}
|
|
2463
3329
|
if (c.kind === "len") {
|
|
2464
3330
|
const v = this.liveNum(c.css);
|
|
2465
|
-
|
|
3331
|
+
const auto = c.hideWhenAuto && this.controlState([c.css]) === "auto";
|
|
3332
|
+
const value = auto || v == null ? "" : String(round2(v));
|
|
3333
|
+
const placeholder = auto && v != null ? `${round2(v)} (auto)` : "\u2014";
|
|
3334
|
+
return `<div class="uiv-ctl${this.controlStateClass([c.css])}">${this.ctlLabel(c.label, [c.css])}<div class="cfield">${this.numField(c.css, value, c.icon, this.isChanged([c.css]), false, placeholder)}</div><span></span></div>` + this.tokenRowHtml(c.css, "Token");
|
|
2466
3335
|
}
|
|
2467
3336
|
if (c.kind === "dim") {
|
|
2468
3337
|
return this.dimField(c);
|
|
@@ -2476,8 +3345,285 @@ var Uivisor = class {
|
|
|
2476
3345
|
const val = toHexInput(this.liveVal(c.css));
|
|
2477
3346
|
return `<div class="uiv-ctl${this.controlStateClass([c.css])}">${this.ctlLabel(c.label, [c.css])}<div class="cfield"><input type="color" class="uiv-color${this.isChanged([c.css]) ? " changed" : ""}" data-css="${c.css}" value="${val}"></div><span></span></div>` + this.tokenRowHtml(c.css, "Token");
|
|
2478
3347
|
}
|
|
3348
|
+
curatedCssProps() {
|
|
3349
|
+
if (this._curatedProps) return this._curatedProps;
|
|
3350
|
+
const set = /* @__PURE__ */ new Set();
|
|
3351
|
+
for (const sec of SECTIONS)
|
|
3352
|
+
for (const c of sec.controls) {
|
|
3353
|
+
if (c.kind === "box") c.sides.forEach((s) => set.add(s.css));
|
|
3354
|
+
else set.add(c.css || "");
|
|
3355
|
+
}
|
|
3356
|
+
set.delete("");
|
|
3357
|
+
this._curatedProps = set;
|
|
3358
|
+
return set;
|
|
3359
|
+
}
|
|
3360
|
+
/**
|
|
3361
|
+
* Search box + categorised accordions. By default each category shows only the
|
|
3362
|
+
* COMMON properties (Framer/Webflow-style — no logical/vendor/rare noise), box
|
|
3363
|
+
* groups as a 4-sided editor; "+ N more" reveals the long tail and search reaches
|
|
3364
|
+
* literally everything. Additive: the curated sections above are untouched.
|
|
3365
|
+
*/
|
|
3366
|
+
allCssHtml() {
|
|
3367
|
+
const reg = cssRegistry();
|
|
3368
|
+
const curated = this.curatedCssProps();
|
|
3369
|
+
const q = this.cssSearch.trim().toLowerCase();
|
|
3370
|
+
const search = `<div class="uiv-sec"><div class="uiv-sectitle">All CSS</div><input class="uiv-csssearch" placeholder="Search any of ${reg.byProp.size} properties\u2026" value="${escapeAttr(this.cssSearch)}" spellcheck="false"></div>`;
|
|
3371
|
+
if (q) {
|
|
3372
|
+
const hits = [...reg.byProp.values()].filter((m) => m.property.includes(q)).sort((a, b) => a.property.localeCompare(b.property));
|
|
3373
|
+
const rows = hits.slice(0, 60).map((m) => this.genericRow(m)).join("");
|
|
3374
|
+
const more = hits.length > 60 ? `<div class="uiv-bphint">+${hits.length - 60} more \u2014 refine the search</div>` : "";
|
|
3375
|
+
return search + `<div class="uiv-sec"><div class="uiv-sectitle">Results (${hits.length})</div>` + (rows || '<div class="uiv-empty">No property matches.</div>') + more + `</div>`;
|
|
3376
|
+
}
|
|
3377
|
+
const cats = reg.categories.map((c) => {
|
|
3378
|
+
const avail = c.props.filter((p) => !curated.has(p));
|
|
3379
|
+
if (!avail.length) return "";
|
|
3380
|
+
const common = avail.filter((p) => reg.byProp.get(p).common);
|
|
3381
|
+
const open = this.expandedCats.has(c.name);
|
|
3382
|
+
const head = `<button class="uiv-sectitle uiv-catacc${open ? "" : " collapsed"}" data-cat="${escapeAttr(c.name)}"><span class="uiv-chev">${ICONS.chevron}</span>${c.name} <span class="uiv-catn">${common.length}</span></button>`;
|
|
3383
|
+
let body = "";
|
|
3384
|
+
if (open) {
|
|
3385
|
+
const showAll = this.showAllCats.has(c.name);
|
|
3386
|
+
body = this.renderCommonControls(showAll ? avail : common);
|
|
3387
|
+
if (!showAll && avail.length > common.length)
|
|
3388
|
+
body += `<button class="uiv-showall" data-cat="${escapeAttr(c.name)}">+ ${avail.length - common.length} more</button>`;
|
|
3389
|
+
}
|
|
3390
|
+
return `<div class="uiv-sec">${head}${body}</div>`;
|
|
3391
|
+
}).filter(Boolean).join("");
|
|
3392
|
+
return search + cats;
|
|
3393
|
+
}
|
|
3394
|
+
/** Render a property list: box-groups (inset etc.) as a 4-sided editor, the rest
|
|
3395
|
+
* as smart inputs. Reuses the tested box control + the generic field. */
|
|
3396
|
+
renderCommonControls(props) {
|
|
3397
|
+
const reg = cssRegistry();
|
|
3398
|
+
const boxGroups = {};
|
|
3399
|
+
const singles = [];
|
|
3400
|
+
for (const p of props) {
|
|
3401
|
+
const m = reg.byProp.get(p);
|
|
3402
|
+
if (m.box && BOX_SIDES[m.box] && !m.shorthand) boxGroups[m.box] = true;
|
|
3403
|
+
else singles.push(p);
|
|
3404
|
+
}
|
|
3405
|
+
let html = "";
|
|
3406
|
+
for (const g of Object.keys(boxGroups)) html += this.boxGroupControl(g);
|
|
3407
|
+
for (const p of singles) html += this.genericRow(reg.byProp.get(p));
|
|
3408
|
+
return html;
|
|
3409
|
+
}
|
|
3410
|
+
/** A 4-sided box editor for a box group (inset/padding/…), via the curated control. */
|
|
3411
|
+
boxGroupControl(group) {
|
|
3412
|
+
const sides = BOX_SIDES[group];
|
|
3413
|
+
if (!sides) return "";
|
|
3414
|
+
const icon = group === "radius" ? ICONS.radius : group === "border-width" ? ICONS.border : group === "margin" ? ICONS.margin : group === "inset" ? ICONS.margin : ICONS.padding;
|
|
3415
|
+
const label = { inset: "Inset", padding: "Padding", margin: "Margin", radius: "Radius", "border-width": "Border" }[group] || group;
|
|
3416
|
+
return this.controlRow({ kind: "box", key: `g-${group}`, label, icon, sides });
|
|
3417
|
+
}
|
|
3418
|
+
genericRow(m) {
|
|
3419
|
+
const prop = m.property;
|
|
3420
|
+
return `<div class="uiv-ctl uiv-gctl${this.controlStateClass([prop])}"><span class="clabel uiv-gplabel" title="${escapeAttr(prop)}">${escapeHtml(prop)}</span><div class="cfield">${this.genericField(m)}</div></div>`;
|
|
3421
|
+
}
|
|
3422
|
+
/** Smart input for one property, by its registry type. Commits via the engine. */
|
|
3423
|
+
genericField(m) {
|
|
3424
|
+
const prop = m.property;
|
|
3425
|
+
const cur = this.liveVal(prop);
|
|
3426
|
+
const da = `data-gprop="${escapeAttr(prop)}"`;
|
|
3427
|
+
if (m.type === "enum" && m.keywords && m.keywords.length) {
|
|
3428
|
+
const c = cur.trim();
|
|
3429
|
+
const list = c && !m.keywords.includes(c) ? [c, ...m.keywords] : m.keywords;
|
|
3430
|
+
const opts = list.map((k) => `<option value="${escapeAttr(k)}"${k === c ? " selected" : ""}>${escapeHtml(k)}</option>`).join("");
|
|
3431
|
+
return `<select class="uiv-gsel" ${da}>${opts}</select>`;
|
|
3432
|
+
}
|
|
3433
|
+
if (m.type === "color") {
|
|
3434
|
+
return `<div class="uiv-gcolorwrap"><input type="color" class="uiv-gcolor" ${da} value="${toHexInput(cur)}"><input type="text" class="uiv-gtext uiv-gtextc" ${da} value="${escapeAttr(cur)}" placeholder="\u2014" spellcheck="false"></div>`;
|
|
3435
|
+
}
|
|
3436
|
+
const complex = (m.type === "shorthand" || m.shorthand || /^grid-template/.test(prop)) && !this.isChanged([prop]);
|
|
3437
|
+
const val = complex ? "" : cur;
|
|
3438
|
+
const ph = complex && cur ? escapeAttr(cur) : "\u2014";
|
|
3439
|
+
const numeric = m.type === "length" || m.type === "number" || m.type === "integer" || m.type === "percentage" || m.type === "time" || m.type === "angle";
|
|
3440
|
+
if (numeric) {
|
|
3441
|
+
return `<div class="uiv-gnum"><span class="uiv-scrub uiv-gscrub" ${da} title="Drag to change">${ICONS.size}</span><input type="text" class="uiv-gtext" ${da} value="${escapeAttr(val)}" placeholder="${ph}" spellcheck="false"></div>`;
|
|
3442
|
+
}
|
|
3443
|
+
return `<input type="text" class="uiv-gtext uiv-gtextonly" ${da} value="${escapeAttr(val)}" placeholder="${ph}" spellcheck="false">`;
|
|
3444
|
+
}
|
|
3445
|
+
/** Bind the "All CSS" search, category toggles and generic inputs. */
|
|
3446
|
+
bindGeneric() {
|
|
3447
|
+
const root = this.root;
|
|
3448
|
+
const search = root.querySelector(".uiv-csssearch");
|
|
3449
|
+
if (search) {
|
|
3450
|
+
search.addEventListener("input", () => {
|
|
3451
|
+
const pos = search.selectionStart ?? search.value.length;
|
|
3452
|
+
this.cssSearch = search.value;
|
|
3453
|
+
this.renderBody();
|
|
3454
|
+
const s2 = this.root.querySelector(".uiv-csssearch");
|
|
3455
|
+
if (s2) {
|
|
3456
|
+
s2.focus();
|
|
3457
|
+
s2.setSelectionRange(pos, pos);
|
|
3458
|
+
}
|
|
3459
|
+
});
|
|
3460
|
+
}
|
|
3461
|
+
root.querySelectorAll(".uiv-catacc").forEach((node) => {
|
|
3462
|
+
const btn = node;
|
|
3463
|
+
const cat = btn.getAttribute("data-cat");
|
|
3464
|
+
btn.addEventListener("click", () => {
|
|
3465
|
+
if (this.expandedCats.has(cat)) this.expandedCats.delete(cat);
|
|
3466
|
+
else this.expandedCats.add(cat);
|
|
3467
|
+
this.renderBody();
|
|
3468
|
+
});
|
|
3469
|
+
});
|
|
3470
|
+
root.querySelectorAll(".uiv-showall").forEach((node) => {
|
|
3471
|
+
const btn = node;
|
|
3472
|
+
const cat = btn.getAttribute("data-cat");
|
|
3473
|
+
btn.addEventListener("click", () => {
|
|
3474
|
+
this.showAllCats.add(cat);
|
|
3475
|
+
this.renderBody();
|
|
3476
|
+
});
|
|
3477
|
+
});
|
|
3478
|
+
const commit = (prop, value) => {
|
|
3479
|
+
this.pushHistory();
|
|
3480
|
+
this.commitValue([prop], value, true);
|
|
3481
|
+
};
|
|
3482
|
+
root.querySelectorAll(".uiv-gsel").forEach((node) => {
|
|
3483
|
+
const sel = node;
|
|
3484
|
+
sel.addEventListener("change", () => commit(sel.getAttribute("data-gprop"), sel.value));
|
|
3485
|
+
});
|
|
3486
|
+
root.querySelectorAll(".uiv-gcolor").forEach((node) => {
|
|
3487
|
+
const inp = node;
|
|
3488
|
+
const prop = inp.getAttribute("data-gprop");
|
|
3489
|
+
inp.addEventListener("change", () => {
|
|
3490
|
+
if (inp.value.toLowerCase() === toHexInput(this.liveVal(prop)).toLowerCase()) return;
|
|
3491
|
+
commit(prop, inp.value);
|
|
3492
|
+
});
|
|
3493
|
+
});
|
|
3494
|
+
root.querySelectorAll(".uiv-gtext").forEach((node) => {
|
|
3495
|
+
const inp = node;
|
|
3496
|
+
inp.addEventListener("change", () => commit(inp.getAttribute("data-gprop"), inp.value));
|
|
3497
|
+
inp.addEventListener("keydown", (e) => {
|
|
3498
|
+
if (e.key === "Enter") inp.blur();
|
|
3499
|
+
});
|
|
3500
|
+
});
|
|
3501
|
+
root.querySelectorAll(".uiv-gscrub").forEach((node) => {
|
|
3502
|
+
const handle = node;
|
|
3503
|
+
const prop = handle.getAttribute("data-gprop");
|
|
3504
|
+
const input = handle.parentElement.querySelector("input");
|
|
3505
|
+
this.bindGenericScrub(handle, input, prop);
|
|
3506
|
+
});
|
|
3507
|
+
}
|
|
3508
|
+
/** Default unit for a numeric property when the current value carries none —
|
|
3509
|
+
* from the registry type, so a unitless number never gets a bogus "px". */
|
|
3510
|
+
defaultUnit(prop) {
|
|
3511
|
+
const t = cssMeta(prop)?.type;
|
|
3512
|
+
if (t === "number" || t === "integer") return "";
|
|
3513
|
+
if (t === "time") return "s";
|
|
3514
|
+
if (t === "angle") return "deg";
|
|
3515
|
+
if (t === "percentage") return "%";
|
|
3516
|
+
return "px";
|
|
3517
|
+
}
|
|
3518
|
+
bindGenericScrub(handle, input, prop) {
|
|
3519
|
+
handle.addEventListener("pointerdown", (e) => {
|
|
3520
|
+
e.preventDefault();
|
|
3521
|
+
const startX = e.clientX;
|
|
3522
|
+
const m = /^(-?\d*\.?\d+)(\D*)$/.exec(input.value.trim());
|
|
3523
|
+
const start2 = m ? parseFloat(m[1]) : 0;
|
|
3524
|
+
const unit = m && m[2] ? m[2] : this.defaultUnit(prop);
|
|
3525
|
+
const unitless = unit === "";
|
|
3526
|
+
const step = unitless ? cssMeta(prop)?.type === "integer" ? 1 : 0.01 : 1;
|
|
3527
|
+
let pushed = false;
|
|
3528
|
+
try {
|
|
3529
|
+
handle.setPointerCapture(e.pointerId);
|
|
3530
|
+
} catch {
|
|
3531
|
+
}
|
|
3532
|
+
const move = (ev) => {
|
|
3533
|
+
if (!pushed) {
|
|
3534
|
+
this.pushHistory();
|
|
3535
|
+
pushed = true;
|
|
3536
|
+
}
|
|
3537
|
+
let nv = start2 + Math.round(ev.clientX - startX) * step;
|
|
3538
|
+
if (ev.shiftKey) nv = Math.round(nv / (10 * step)) * 10 * step;
|
|
3539
|
+
nv = +nv.toFixed(unitless && step < 1 ? 2 : 0);
|
|
3540
|
+
input.value = `${nv}${unit}`;
|
|
3541
|
+
this.liveSet([prop], input.value);
|
|
3542
|
+
};
|
|
3543
|
+
const up = () => {
|
|
3544
|
+
handle.removeEventListener("pointermove", move);
|
|
3545
|
+
handle.removeEventListener("pointerup", up);
|
|
3546
|
+
this.recordProps([prop]);
|
|
3547
|
+
};
|
|
3548
|
+
handle.addEventListener("pointermove", move);
|
|
3549
|
+
handle.addEventListener("pointerup", up);
|
|
3550
|
+
});
|
|
3551
|
+
}
|
|
2479
3552
|
bindControls() {
|
|
2480
3553
|
const root = this.root;
|
|
3554
|
+
this.bindGeneric();
|
|
3555
|
+
root.querySelectorAll(".uiv-tbtn").forEach((node) => {
|
|
3556
|
+
const btn = node;
|
|
3557
|
+
const prop = btn.getAttribute("data-prop");
|
|
3558
|
+
const val = btn.getAttribute("data-val");
|
|
3559
|
+
btn.addEventListener("click", () => {
|
|
3560
|
+
this.pushHistory();
|
|
3561
|
+
this.commitValue([prop], val);
|
|
3562
|
+
});
|
|
3563
|
+
});
|
|
3564
|
+
const bmPop = root.querySelector(".uiv-bm-pop");
|
|
3565
|
+
const bmPopLabel = bmPop?.querySelector(".uiv-bm-poplabel");
|
|
3566
|
+
root.querySelectorAll(".uiv-bm-i").forEach((node) => {
|
|
3567
|
+
const inp = node;
|
|
3568
|
+
const css = inp.getAttribute("data-css");
|
|
3569
|
+
inp.addEventListener("focus", () => {
|
|
3570
|
+
this.lastBmSide = css;
|
|
3571
|
+
if (bmPop) {
|
|
3572
|
+
bmPop.hidden = false;
|
|
3573
|
+
if (bmPopLabel) bmPopLabel.textContent = `${css} \u2192`;
|
|
3574
|
+
}
|
|
3575
|
+
});
|
|
3576
|
+
inp.addEventListener("blur", () => {
|
|
3577
|
+
window.setTimeout(() => {
|
|
3578
|
+
if (bmPop) bmPop.hidden = true;
|
|
3579
|
+
}, 140);
|
|
3580
|
+
});
|
|
3581
|
+
inp.addEventListener("change", () => {
|
|
3582
|
+
this.pushHistory();
|
|
3583
|
+
this.commitNumeric([css], inp.value);
|
|
3584
|
+
});
|
|
3585
|
+
inp.addEventListener("keydown", (e) => {
|
|
3586
|
+
if (e.key === "Enter") inp.blur();
|
|
3587
|
+
});
|
|
3588
|
+
inp.addEventListener("pointerdown", (e) => {
|
|
3589
|
+
const startX = e.clientX;
|
|
3590
|
+
const startVal = parseFloat(inp.value) || 0;
|
|
3591
|
+
let moved = false;
|
|
3592
|
+
let pushed = false;
|
|
3593
|
+
const move = (ev) => {
|
|
3594
|
+
if (!moved && Math.abs(ev.clientX - startX) < 3) return;
|
|
3595
|
+
if (!moved) {
|
|
3596
|
+
moved = true;
|
|
3597
|
+
inp.blur();
|
|
3598
|
+
}
|
|
3599
|
+
if (!pushed) {
|
|
3600
|
+
this.pushHistory();
|
|
3601
|
+
pushed = true;
|
|
3602
|
+
}
|
|
3603
|
+
let nv = startVal + Math.round(ev.clientX - startX);
|
|
3604
|
+
if (ev.shiftKey) nv = Math.round(nv / 10) * 10;
|
|
3605
|
+
nv = Math.max(0, nv);
|
|
3606
|
+
inp.value = String(nv);
|
|
3607
|
+
this.liveSet([css], `${nv}px`);
|
|
3608
|
+
};
|
|
3609
|
+
const up = () => {
|
|
3610
|
+
window.removeEventListener("pointermove", move);
|
|
3611
|
+
window.removeEventListener("pointerup", up);
|
|
3612
|
+
if (moved) this.recordProps([css]);
|
|
3613
|
+
};
|
|
3614
|
+
window.addEventListener("pointermove", move);
|
|
3615
|
+
window.addEventListener("pointerup", up);
|
|
3616
|
+
});
|
|
3617
|
+
});
|
|
3618
|
+
root.querySelectorAll(".uiv-bm-chip").forEach((node) => {
|
|
3619
|
+
const btn = node;
|
|
3620
|
+
const cssVar = btn.getAttribute("data-var");
|
|
3621
|
+
btn.addEventListener("mousedown", (e) => {
|
|
3622
|
+
e.preventDefault();
|
|
3623
|
+
const token = this.designSystem().tokens.find((t) => t.cssVar === cssVar);
|
|
3624
|
+
if (token) this.applyToken(this.lastBmSide, token);
|
|
3625
|
+
});
|
|
3626
|
+
});
|
|
2481
3627
|
root.querySelectorAll(".uiv-num:not(.uiv-dim)").forEach((node) => {
|
|
2482
3628
|
const box = node;
|
|
2483
3629
|
const cssList = (box.getAttribute("data-css") || "").split(",").filter(Boolean);
|
|
@@ -2512,6 +3658,7 @@ var Uivisor = class {
|
|
|
2512
3658
|
const input = node;
|
|
2513
3659
|
const css = input.getAttribute("data-css");
|
|
2514
3660
|
input.addEventListener("change", () => {
|
|
3661
|
+
if (input.value.toLowerCase() === toHexInput(this.liveVal(css)).toLowerCase()) return;
|
|
2515
3662
|
this.pushHistory();
|
|
2516
3663
|
this.commitValue([css], input.value);
|
|
2517
3664
|
});
|
|
@@ -2560,24 +3707,22 @@ var Uivisor = class {
|
|
|
2560
3707
|
this.renderBody();
|
|
2561
3708
|
});
|
|
2562
3709
|
});
|
|
3710
|
+
root.querySelectorAll(".uiv-addctl").forEach((node) => {
|
|
3711
|
+
const btn = node;
|
|
3712
|
+
const css = btn.getAttribute("data-css");
|
|
3713
|
+
btn.addEventListener("click", () => {
|
|
3714
|
+
this.revealedCtls.add(css);
|
|
3715
|
+
this.renderBody();
|
|
3716
|
+
});
|
|
3717
|
+
});
|
|
2563
3718
|
root.querySelectorAll(".uiv-chip").forEach((node) => {
|
|
2564
3719
|
const btn = node;
|
|
2565
3720
|
const bp = btn.getAttribute("data-bp");
|
|
2566
3721
|
btn.addEventListener("click", () => {
|
|
2567
|
-
|
|
2568
|
-
|
|
2569
|
-
|
|
2570
|
-
|
|
2571
|
-
}
|
|
2572
|
-
const w = bp === "base" ? 390 : this.bpSystem().breakpoints.find((b) => b.name === bp)?.minWidth ?? 768;
|
|
2573
|
-
this.frameWidth = w;
|
|
2574
|
-
if (!this.responsive) {
|
|
2575
|
-
this.toggleResponsive(true);
|
|
2576
|
-
} else {
|
|
2577
|
-
this.setFrameWidth(w);
|
|
2578
|
-
this.reapplyScope();
|
|
2579
|
-
this.renderBody();
|
|
2580
|
-
}
|
|
3722
|
+
const w = bp === "base" ? this.baseFrameWidth() : this.bpSystem().breakpoints.find((b) => b.name === bp)?.minWidth ?? 768;
|
|
3723
|
+
this.setFrameWidth(w);
|
|
3724
|
+
this.reapplyScope();
|
|
3725
|
+
this.renderBody();
|
|
2581
3726
|
});
|
|
2582
3727
|
});
|
|
2583
3728
|
root.querySelectorAll(".uiv-clschip").forEach((node) => {
|
|
@@ -2697,7 +3842,52 @@ var Uivisor = class {
|
|
|
2697
3842
|
}
|
|
2698
3843
|
// ---- actions ----
|
|
2699
3844
|
records() {
|
|
2700
|
-
return [...this.states.
|
|
3845
|
+
return [...this.states.entries()].filter(([, s]) => s.record.changes.length > 0).map(([el, s]) => ({ ...s.record, smells: this.detectSmells(el) }));
|
|
3846
|
+
}
|
|
3847
|
+
/**
|
|
3848
|
+
* Detect dead / redundant / contradictory CSS on an element so the prompt can ask
|
|
3849
|
+
* the agent to QUESTION it instead of blindly applying — e.g. flex-direction on a
|
|
3850
|
+
* non-flex element, offsets without positioning, a display:none node that may be
|
|
3851
|
+
* deletable. Only flags properties the project actually AUTHORED (matchedProps).
|
|
3852
|
+
*/
|
|
3853
|
+
detectSmells(el) {
|
|
3854
|
+
const out = [];
|
|
3855
|
+
try {
|
|
3856
|
+
const cs = getComputedStyle(el);
|
|
3857
|
+
const authored = this.matchedProps(el);
|
|
3858
|
+
const disp = cs.display;
|
|
3859
|
+
const flexGrid = /flex|grid/.test(disp);
|
|
3860
|
+
const parent = el.parentElement;
|
|
3861
|
+
const parentFlexGrid = parent ? /flex|grid/.test(getComputedStyle(parent).display) : false;
|
|
3862
|
+
const has = (p) => authored.has(p);
|
|
3863
|
+
if (disp === "none")
|
|
3864
|
+
out.push(
|
|
3865
|
+
`It computes to \`display:none\` \u2014 it renders nothing here. If it isn't toggled visible elsewhere, prefer DELETING the element and its now-dead styles/classes over shipping a permanently hidden node.`
|
|
3866
|
+
);
|
|
3867
|
+
if (cs.visibility === "hidden" || parseFloat(cs.opacity) === 0)
|
|
3868
|
+
out.push(`It's invisible (visibility/opacity 0) \u2014 question whether it's needed at all.`);
|
|
3869
|
+
if (!flexGrid) {
|
|
3870
|
+
for (const p of ["flex-direction", "justify-content", "align-items", "flex-wrap"])
|
|
3871
|
+
if (has(p))
|
|
3872
|
+
out.push(`\`${p}\` is set but \`display\` is \`${disp}\` (not flex/grid) \u2192 it has NO effect. Remove it, or the display is wrong \u2014 ask which.`);
|
|
3873
|
+
}
|
|
3874
|
+
if (!parentFlexGrid) {
|
|
3875
|
+
for (const p of ["flex-grow", "flex-shrink", "flex-basis", "align-self", "order"])
|
|
3876
|
+
if (has(p))
|
|
3877
|
+
out.push(`\`${p}\` is set but the PARENT isn't flex/grid \u2192 no effect. Remove it or fix the parent.`);
|
|
3878
|
+
}
|
|
3879
|
+
if (cs.position === "static") {
|
|
3880
|
+
for (const p of ["top", "right", "bottom", "left", "z-index"])
|
|
3881
|
+
if (has(p))
|
|
3882
|
+
out.push(`\`${p}\` is set but \`position\` is \`static\` \u2192 no effect. Add positioning or drop it.`);
|
|
3883
|
+
}
|
|
3884
|
+
if (disp === "inline") {
|
|
3885
|
+
for (const p of ["width", "height"])
|
|
3886
|
+
if (has(p)) out.push(`\`${p}\` on an \`inline\` element has no effect (needs inline-block/block).`);
|
|
3887
|
+
}
|
|
3888
|
+
} catch {
|
|
3889
|
+
}
|
|
3890
|
+
return [...new Set(out)].slice(0, 6);
|
|
2701
3891
|
}
|
|
2702
3892
|
async copyPrompt() {
|
|
2703
3893
|
const recs = this.records();
|
|
@@ -2822,7 +4012,7 @@ function escapeHtml(s) {
|
|
|
2822
4012
|
return s.replace(/[&<>"]/g, (c) => ({ "&": "&", "<": "<", ">": ">", '"': """ })[c]);
|
|
2823
4013
|
}
|
|
2824
4014
|
function escapeAttr(s) {
|
|
2825
|
-
return s.replace(/"/g, """);
|
|
4015
|
+
return s.replace(/&/g, "&").replace(/"/g, """);
|
|
2826
4016
|
}
|
|
2827
4017
|
function cssAttrEscape(s) {
|
|
2828
4018
|
return s.replace(/["\\]/g, "\\$&");
|