@webstudio-is/react-sdk 0.51.0 → 0.52.0

package/lib/types/css/presets.d.ts

@@ -0,0 +1,38 @@
+export declare const borders: {
+    readonly borderTopColor: {
+        readonly type: "keyword";
+        readonly value: "currentColor";
+    };
+    readonly borderRightColor: {
+        readonly type: "keyword";
+        readonly value: "currentColor";
+    };
+    readonly borderBottomColor: {
+        readonly type: "keyword";
+        readonly value: "currentColor";
+    };
+    readonly borderLeftColor: {
+        readonly type: "keyword";
+        readonly value: "currentColor";
+    };
+    readonly borderTopWidth: {
+        readonly type: "unit";
+        readonly value: 1;
+        readonly unit: "px";
+    };
+    readonly borderRightWidth: {
+        readonly type: "unit";
+        readonly value: 1;
+        readonly unit: "px";
+    };
+    readonly borderBottomWidth: {
+        readonly type: "unit";
+        readonly value: 1;
+        readonly unit: "px";
+    };
+    readonly borderLeftWidth: {
+        readonly type: "unit";
+        readonly value: 1;
+        readonly unit: "px";
+    };
+};

package/lib/types/css/style-rules.d.ts

@@ -0,0 +1,248 @@
+import type { Style } from "@webstudio-is/css-data";
+type StyleRule = {
+    instanceId: string;
+    breakpointId: string;
+    style: Style;
+};
+/**
+ * Merge styles from different style sources
+ * and group by instance and breakpoint
+ */
+export declare const getStyleRules: (styles: Map<`${string}:${string}:filter` | `${string}:${string}:float` | `${string}:${string}:fontFamily` | `${string}:${string}:width` | `${string}:${string}:height` | `${string}:${string}:color` | `${string}:${string}:left` | `${string}:${string}:right` | `${string}:${string}:top` | `${string}:${string}:bottom` | `${string}:${string}:contain` | `${string}:${string}:clip` | `${string}:${string}:content` | `${string}:${string}:--${string}` | `${string}:${string}:accentColor` | `${string}:${string}:alignContent` | `${string}:${string}:alignItems` | `${string}:${string}:alignSelf` | `${string}:${string}:alignTracks` | `${string}:${string}:animationComposition` | `${string}:${string}:animationDelay` | `${string}:${string}:animationDirection` | `${string}:${string}:animationDuration` | `${string}:${string}:animationFillMode` | `${string}:${string}:animationIterationCount` | `${string}:${string}:animationName` | `${string}:${string}:animationPlayState` | `${string}:${string}:animationTimingFunction` | `${string}:${string}:animationTimeline` | `${string}:${string}:appearance` | `${string}:${string}:aspectRatio` | `${string}:${string}:backdropFilter` | `${string}:${string}:backfaceVisibility` | `${string}:${string}:backgroundAttachment` | `${string}:${string}:backgroundBlendMode` | `${string}:${string}:backgroundClip` | `${string}:${string}:backgroundColor` | `${string}:${string}:backgroundImage` | `${string}:${string}:backgroundOrigin` | `${string}:${string}:backgroundPosition` | `${string}:${string}:backgroundPositionX` | `${string}:${string}:backgroundPositionY` | `${string}:${string}:backgroundRepeat` | `${string}:${string}:backgroundSize` | `${string}:${string}:blockOverflow` | `${string}:${string}:blockSize` | `${string}:${string}:borderBlockColor` | `${string}:${string}:borderBlockStyle` | `${string}:${string}:borderBlockWidth` | `${string}:${string}:borderBlockEndColor` | `${string}:${string}:borderBlockEndStyle` | `${string}:${string}:borderBlockEndWidth` | `${string}:${string}:borderBlockStartColor` | `${string}:${string}:borderBlockStartStyle` | `${string}:${string}:borderBlockStartWidth` | `${string}:${string}:borderBottomColor` | `${string}:${string}:borderBottomLeftRadius` | `${string}:${string}:borderBottomRightRadius` | `${string}:${string}:borderBottomStyle` | `${string}:${string}:borderBottomWidth` | `${string}:${string}:borderCollapse` | `${string}:${string}:borderEndEndRadius` | `${string}:${string}:borderEndStartRadius` | `${string}:${string}:borderImageOutset` | `${string}:${string}:borderImageRepeat` | `${string}:${string}:borderImageSlice` | `${string}:${string}:borderImageSource` | `${string}:${string}:borderImageWidth` | `${string}:${string}:borderInlineColor` | `${string}:${string}:borderInlineStyle` | `${string}:${string}:borderInlineWidth` | `${string}:${string}:borderInlineEndColor` | `${string}:${string}:borderInlineEndStyle` | `${string}:${string}:borderInlineEndWidth` | `${string}:${string}:borderInlineStartColor` | `${string}:${string}:borderInlineStartStyle` | `${string}:${string}:borderInlineStartWidth` | `${string}:${string}:borderLeftColor` | `${string}:${string}:borderLeftStyle` | `${string}:${string}:borderLeftWidth` | `${string}:${string}:borderRightColor` | `${string}:${string}:borderRightStyle` | `${string}:${string}:borderRightWidth` | `${string}:${string}:borderSpacing` | `${string}:${string}:borderStartEndRadius` | `${string}:${string}:borderStartStartRadius` | `${string}:${string}:borderTopColor` | `${string}:${string}:borderTopLeftRadius` | `${string}:${string}:borderTopRightRadius` | `${string}:${string}:borderTopStyle` | `${string}:${string}:borderTopWidth` | `${string}:${string}:boxDecorationBreak` | `${string}:${string}:boxShadow` | `${string}:${string}:boxSizing` | `${string}:${string}:breakAfter` | `${string}:${string}:breakBefore` | `${string}:${string}:breakInside` | `${string}:${string}:captionSide` | `${string}:${string}:caretColor` | `${string}:${string}:caretShape` | `${string}:${string}:clear` | `${string}:${string}:clipPath` | `${string}:${string}:printColorAdjust` | `${string}:${string}:colorScheme` | `${string}:${string}:columnCount` | `${string}:${string}:columnFill` | `${string}:${string}:columnGap` | `${string}:${string}:columnRuleColor` | `${string}:${string}:columnRuleStyle` | `${string}:${string}:columnRuleWidth` | `${string}:${string}:columnSpan` | `${string}:${string}:columnWidth` | `${string}:${string}:containIntrinsicBlockSize` | `${string}:${string}:containIntrinsicHeight` | `${string}:${string}:containIntrinsicInlineSize` | `${string}:${string}:containIntrinsicWidth` | `${string}:${string}:contentVisibility` | `${string}:${string}:counterIncrement` | `${string}:${string}:counterReset` | `${string}:${string}:counterSet` | `${string}:${string}:cursor` | `${string}:${string}:direction` | `${string}:${string}:display` | `${string}:${string}:emptyCells` | `${string}:${string}:flexBasis` | `${string}:${string}:flexDirection` | `${string}:${string}:flexGrow` | `${string}:${string}:flexShrink` | `${string}:${string}:flexWrap` | `${string}:${string}:fontFeatureSettings` | `${string}:${string}:fontKerning` | `${string}:${string}:fontLanguageOverride` | `${string}:${string}:fontOpticalSizing` | `${string}:${string}:fontVariationSettings` | `${string}:${string}:fontSize` | `${string}:${string}:fontSizeAdjust` | `${string}:${string}:fontStretch` | `${string}:${string}:fontStyle` | `${string}:${string}:fontSynthesis` | `${string}:${string}:fontVariant` | `${string}:${string}:fontVariantAlternates` | `${string}:${string}:fontVariantCaps` | `${string}:${string}:fontVariantEastAsian` | `${string}:${string}:fontVariantLigatures` | `${string}:${string}:fontVariantNumeric` | `${string}:${string}:fontVariantPosition` | `${string}:${string}:fontWeight` | `${string}:${string}:forcedColorAdjust` | `${string}:${string}:gridAutoColumns` | `${string}:${string}:gridAutoFlow` | `${string}:${string}:gridAutoRows` | `${string}:${string}:gridColumnEnd` | `${string}:${string}:gridColumnStart` | `${string}:${string}:gridRowEnd` | `${string}:${string}:gridRowStart` | `${string}:${string}:gridTemplateAreas` | `${string}:${string}:gridTemplateColumns` | `${string}:${string}:gridTemplateRows` | `${string}:${string}:hangingPunctuation` | `${string}:${string}:hyphenateCharacter` | `${string}:${string}:hyphens` | `${string}:${string}:imageOrientation` | `${string}:${string}:imageRendering` | `${string}:${string}:imageResolution` | `${string}:${string}:initialLetter` | `${string}:${string}:initialLetterAlign` | `${string}:${string}:inlineSize` | `${string}:${string}:inputSecurity` | `${string}:${string}:insetBlockEnd` | `${string}:${string}:insetBlockStart` | `${string}:${string}:insetInlineEnd` | `${string}:${string}:insetInlineStart` | `${string}:${string}:isolation` | `${string}:${string}:justifyContent` | `${string}:${string}:justifyItems` | `${string}:${string}:justifySelf` | `${string}:${string}:justifyTracks` | `${string}:${string}:letterSpacing` | `${string}:${string}:lineBreak` | `${string}:${string}:lineClamp` | `${string}:${string}:lineHeight` | `${string}:${string}:lineHeightStep` | `${string}:${string}:listStyleImage` | `${string}:${string}:listStylePosition` | `${string}:${string}:listStyleType` | `${string}:${string}:marginBlockEnd` | `${string}:${string}:marginBlockStart` | `${string}:${string}:marginBottom` | `${string}:${string}:marginInlineEnd` | `${string}:${string}:marginInlineStart` | `${string}:${string}:marginLeft` | `${string}:${string}:marginRight` | `${string}:${string}:marginTop` | `${string}:${string}:marginTrim` | `${string}:${string}:maskBorderMode` | `${string}:${string}:maskBorderOutset` | `${string}:${string}:maskBorderRepeat` | `${string}:${string}:maskBorderSlice` | `${string}:${string}:maskBorderSource` | `${string}:${string}:maskBorderWidth` | `${string}:${string}:maskClip` | `${string}:${string}:maskComposite` | `${string}:${string}:maskImage` | `${string}:${string}:maskMode` | `${string}:${string}:maskOrigin` | `${string}:${string}:maskPosition` | `${string}:${string}:maskRepeat` | `${string}:${string}:maskSize` | `${string}:${string}:maskType` | `${string}:${string}:masonryAutoFlow` | `${string}:${string}:mathDepth` | `${string}:${string}:mathShift` | `${string}:${string}:mathStyle` | `${string}:${string}:maxBlockSize` | `${string}:${string}:maxHeight` | `${string}:${string}:maxInlineSize` | `${string}:${string}:maxLines` | `${string}:${string}:maxWidth` | `${string}:${string}:minBlockSize` | `${string}:${string}:minHeight` | `${string}:${string}:minInlineSize` | `${string}:${string}:minWidth` | `${string}:${string}:mixBlendMode` | `${string}:${string}:objectFit` | `${string}:${string}:objectPosition` | `${string}:${string}:offsetAnchor` | `${string}:${string}:offsetDistance` | `${string}:${string}:offsetPath` | `${string}:${string}:offsetPosition` | `${string}:${string}:offsetRotate` | `${string}:${string}:opacity` | `${string}:${string}:order` | `${string}:${string}:orphans` | `${string}:${string}:outlineColor` | `${string}:${string}:outlineOffset` | `${string}:${string}:outlineStyle` | `${string}:${string}:outlineWidth` | `${string}:${string}:overflow` | `${string}:${string}:overflowAnchor` | `${string}:${string}:overflowBlock` | `${string}:${string}:overflowClipMargin` | `${string}:${string}:overflowInline` | `${string}:${string}:overflowWrap` | `${string}:${string}:overflowX` | `${string}:${string}:overflowY` | `${string}:${string}:overscrollBehavior` | `${string}:${string}:overscrollBehaviorBlock` | `${string}:${string}:overscrollBehaviorInline` | `${string}:${string}:overscrollBehaviorX` | `${string}:${string}:overscrollBehaviorY` | `${string}:${string}:paddingBlockEnd` | `${string}:${string}:paddingBlockStart` | `${string}:${string}:paddingBottom` | `${string}:${string}:paddingInlineEnd` | `${string}:${string}:paddingInlineStart` | `${string}:${string}:paddingLeft` | `${string}:${string}:paddingRight` | `${string}:${string}:paddingTop` | `${string}:${string}:pageBreakAfter` | `${string}:${string}:pageBreakBefore` | `${string}:${string}:pageBreakInside` | `${string}:${string}:paintOrder` | `${string}:${string}:perspective` | `${string}:${string}:perspectiveOrigin` | `${string}:${string}:pointerEvents` | `${string}:${string}:position` | `${string}:${string}:quotes` | `${string}:${string}:resize` | `${string}:${string}:rotate` | `${string}:${string}:rowGap` | `${string}:${string}:rubyAlign` | `${string}:${string}:rubyMerge` | `${string}:${string}:rubyPosition` | `${string}:${string}:scale` | `${string}:${string}:scrollbarColor` | `${string}:${string}:scrollbarGutter` | `${string}:${string}:scrollbarWidth` | `${string}:${string}:scrollBehavior` | `${string}:${string}:scrollMarginBlockStart` | `${string}:${string}:scrollMarginBlockEnd` | `${string}:${string}:scrollMarginBottom` | `${string}:${string}:scrollMarginInlineStart` | `${string}:${string}:scrollMarginInlineEnd` | `${string}:${string}:scrollMarginLeft` | `${string}:${string}:scrollMarginRight` | `${string}:${string}:scrollMarginTop` | `${string}:${string}:scrollPaddingBlockStart` | `${string}:${string}:scrollPaddingBlockEnd` | `${string}:${string}:scrollPaddingBottom` | `${string}:${string}:scrollPaddingInlineStart` | `${string}:${string}:scrollPaddingInlineEnd` | `${string}:${string}:scrollPaddingLeft` | `${string}:${string}:scrollPaddingRight` | `${string}:${string}:scrollPaddingTop` | `${string}:${string}:scrollSnapAlign` | `${string}:${string}:scrollSnapStop` | `${string}:${string}:scrollSnapType` | `${string}:${string}:scrollTimelineAxis` | `${string}:${string}:scrollTimelineName` | `${string}:${string}:shapeImageThreshold` | `${string}:${string}:shapeMargin` | `${string}:${string}:shapeOutside` | `${string}:${string}:tabSize` | `${string}:${string}:tableLayout` | `${string}:${string}:textAlign` | `${string}:${string}:textAlignLast` | `${string}:${string}:textCombineUpright` | `${string}:${string}:textDecorationColor` | `${string}:${string}:textDecorationLine` | `${string}:${string}:textDecorationSkip` | `${string}:${string}:textDecorationSkipInk` | `${string}:${string}:textDecorationStyle` | `${string}:${string}:textDecorationThickness` | `${string}:${string}:textEmphasisColor` | `${string}:${string}:textEmphasisPosition` | `${string}:${string}:textEmphasisStyle` | `${string}:${string}:textIndent` | `${string}:${string}:textJustify` | `${string}:${string}:textOrientation` | `${string}:${string}:textOverflow` | `${string}:${string}:textRendering` | `${string}:${string}:textShadow` | `${string}:${string}:textSizeAdjust` | `${string}:${string}:textTransform` | `${string}:${string}:textUnderlineOffset` | `${string}:${string}:textUnderlinePosition` | `${string}:${string}:touchAction` | `${string}:${string}:transform` | `${string}:${string}:transformBox` | `${string}:${string}:transformOrigin` | `${string}:${string}:transformStyle` | `${string}:${string}:transitionDelay` | `${string}:${string}:transitionDuration` | `${string}:${string}:transitionProperty` | `${string}:${string}:transitionTimingFunction` | `${string}:${string}:translate` | `${string}:${string}:unicodeBidi` | `${string}:${string}:userSelect` | `${string}:${string}:verticalAlign` | `${string}:${string}:visibility` | `${string}:${string}:whiteSpace` | `${string}:${string}:widows` | `${string}:${string}:willChange` | `${string}:${string}:wordBreak` | `${string}:${string}:wordSpacing` | `${string}:${string}:wordWrap` | `${string}:${string}:writingMode` | `${string}:${string}:zIndex`, {
+    value: {
+        type: "unit";
+        value: number;
+        unit: "number" | "x" | "s" | "%" | "px" | "dppx" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "st" | "ms";
+    } | {
+        type: "keyword";
+        value: string;
+    } | {
+        hidden?: boolean | undefined;
+        type: "unparsed";
+        value: string;
+    } | {
+        type: "fontFamily";
+        value: string[];
+    } | {
+        type: "rgb";
+        alpha: number;
+        r: number;
+        g: number;
+        b: number;
+    } | {
+        hidden?: boolean | undefined;
+        type: "image";
+        value: {
+            type: "asset";
+            value: {
+                name: string;
+                path: string;
+                type: "image";
+                format: string;
+                id: string;
+                projectId: string;
+                size: number;
+                description: string | null;
+                location: "FS" | "REMOTE";
+                createdAt: string;
+                meta: {
+                    width: number;
+                    height: number;
+                };
+            };
+        };
+    } | {
+        type: "invalid";
+        value: string;
+    } | {
+        type: "unset";
+        value: "";
+    } | {
+        type: "tuple";
+        value: ({
+            type: "unit";
+            value: number;
+            unit: "number" | "x" | "s" | "%" | "px" | "dppx" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "st" | "ms";
+        } | {
+            type: "keyword";
+            value: string;
+        } | {
+            hidden?: boolean | undefined;
+            type: "unparsed";
+            value: string;
+        })[];
+    } | {
+        type: "layers";
+        value: ({
+            type: "unit";
+            value: number;
+            unit: "number" | "x" | "s" | "%" | "px" | "dppx" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "st" | "ms";
+        } | {
+            type: "keyword";
+            value: string;
+        } | {
+            hidden?: boolean | undefined;
+            type: "unparsed";
+            value: string;
+        } | {
+            hidden?: boolean | undefined;
+            type: "image";
+            value: {
+                type: "asset";
+                value: {
+                    name: string;
+                    path: string;
+                    type: "image";
+                    format: string;
+                    id: string;
+                    projectId: string;
+                    size: number;
+                    description: string | null;
+                    location: "FS" | "REMOTE";
+                    createdAt: string;
+                    meta: {
+                        width: number;
+                        height: number;
+                    };
+                };
+            };
+        } | {
+            type: "invalid";
+            value: string;
+        } | {
+            type: "tuple";
+            value: ({
+                type: "unit";
+                value: number;
+                unit: "number" | "x" | "s" | "%" | "px" | "dppx" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "st" | "ms";
+            } | {
+                type: "keyword";
+                value: string;
+            } | {
+                hidden?: boolean | undefined;
+                type: "unparsed";
+                value: string;
+            })[];
+        })[];
+    } | {
+        type: "var";
+        value: string;
+        fallbacks: ({
+            type: "unit";
+            value: number;
+            unit: "number" | "x" | "s" | "%" | "px" | "dppx" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "st" | "ms";
+        } | {
+            type: "keyword";
+            value: string;
+        } | {
+            hidden?: boolean | undefined;
+            type: "unparsed";
+            value: string;
+        } | {
+            type: "fontFamily";
+            value: string[];
+        } | {
+            type: "rgb";
+            alpha: number;
+            r: number;
+            g: number;
+            b: number;
+        } | {
+            hidden?: boolean | undefined;
+            type: "image";
+            value: {
+                type: "asset";
+                value: {
+                    name: string;
+                    path: string;
+                    type: "image";
+                    format: string;
+                    id: string;
+                    projectId: string;
+                    size: number;
+                    description: string | null;
+                    location: "FS" | "REMOTE";
+                    createdAt: string;
+                    meta: {
+                        width: number;
+                        height: number;
+                    };
+                };
+            };
+        } | {
+            type: "tuple";
+            value: ({
+                type: "unit";
+                value: number;
+                unit: "number" | "x" | "s" | "%" | "px" | "dppx" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "st" | "ms";
+            } | {
+                type: "keyword";
+                value: string;
+            } | {
+                hidden?: boolean | undefined;
+                type: "unparsed";
+                value: string;
+            })[];
+        } | {
+            type: "layers";
+            value: ({
+                type: "unit";
+                value: number;
+                unit: "number" | "x" | "s" | "%" | "px" | "dppx" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "st" | "ms";
+            } | {
+                type: "keyword";
+                value: string;
+            } | {
+                hidden?: boolean | undefined;
+                type: "unparsed";
+                value: string;
+            } | {
+                hidden?: boolean | undefined;
+                type: "image";
+                value: {
+                    type: "asset";
+                    value: {
+                        name: string;
+                        path: string;
+                        type: "image";
+                        format: string;
+                        id: string;
+                        projectId: string;
+                        size: number;
+                        description: string | null;
+                        location: "FS" | "REMOTE";
+                        createdAt: string;
+                        meta: {
+                            width: number;
+                            height: number;
+                        };
+                    };
+                };
+            } | {
+                type: "invalid";
+                value: string;
+            } | {
+                type: "tuple";
+                value: ({
+                    type: "unit";
+                    value: number;
+                    unit: "number" | "x" | "s" | "%" | "px" | "dppx" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "st" | "ms";
+                } | {
+                    type: "keyword";
+                    value: string;
+                } | {
+                    hidden?: boolean | undefined;
+                    type: "unparsed";
+                    value: string;
+                })[];
+            })[];
+        })[];
+    };
+    styleSourceId: string;
+    breakpointId: string;
+    property: "filter" | "float" | "fontFamily" | "width" | "height" | "color" | "left" | "right" | "top" | "bottom" | "contain" | "clip" | "content" | `--${string}` | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "animationTimeline" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockStyle" | "borderBlockWidth" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineStyle" | "borderInlineWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "printColorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontVariationSettings" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "letterSpacing" | "lineBreak" | "lineClamp" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflow" | "overflowAnchor" | "overflowBlock" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "scrollBehavior" | "scrollMarginBlockStart" | "scrollMarginBlockEnd" | "scrollMarginBottom" | "scrollMarginInlineStart" | "scrollMarginInlineEnd" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockStart" | "scrollPaddingBlockEnd" | "scrollPaddingBottom" | "scrollPaddingInlineStart" | "scrollPaddingInlineEnd" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex";
+}>, styleSourceSelections: Map<string, {
+    values: string[];
+    instanceId: string;
+}>) => StyleRule[];
+export {};

package/lib/types/css/style-rules.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./css";
+export * from "./tree";
+export * from "./components";
+export * from "./pubsub";
+export * from "./app";
+export * from "./components/components";
+export * from "./components/components-utils";
+export { customComponents, customComponentMetas, customComponentPropsMetas, } from "./app/custom-components";
+export { type WsComponentPropsMeta, type WsComponentMeta, componentCategories, } from "./components/component-meta";

package/lib/types/props.d.ts

@@ -0,0 +1,97 @@
+import type { Instance, Page, Prop } from "@webstudio-is/project-build";
+export type PropsByInstanceId = Map<Instance["id"], Prop[]>;
+export type Pages = Map<Page["id"], Page>;
+export declare const getPropsByInstanceId: (props: Map<string, {
+    required?: boolean | undefined;
+    name: string;
+    type: "number";
+    value: number;
+    id: string;
+    instanceId: string;
+} | {
+    required?: boolean | undefined;
+    name: string;
+    type: "string";
+    value: string;
+    id: string;
+    instanceId: string;
+} | {
+    required?: boolean | undefined;
+    name: string;
+    type: "boolean";
+    value: boolean;
+    id: string;
+    instanceId: string;
+} | {
+    required?: boolean | undefined;
+    name: string;
+    type: "asset";
+    value: string;
+    id: string;
+    instanceId: string;
+} | {
+    required?: boolean | undefined;
+    name: string;
+    type: "page";
+    value: string;
+    id: string;
+    instanceId: string;
+} | {
+    required?: boolean | undefined;
+    name: string;
+    type: "string[]";
+    value: string[];
+    id: string;
+    instanceId: string;
+}>) => PropsByInstanceId;
+export declare const useInstanceProps: (instanceId: Instance["id"]) => Record<string, string | number | boolean | string[]>;
+export declare const usePropAsset: (instanceId: Instance["id"], name: string) => {
+    name: string;
+    path: string;
+    type: "font";
+    format: "ttf" | "woff" | "woff2" | "otf";
+    id: string;
+    projectId: string;
+    size: number;
+    description: string | null;
+    location: "FS" | "REMOTE";
+    createdAt: string;
+    meta: {
+        style: "normal" | "italic" | "oblique";
+        weight: number;
+        family: string;
+    } | {
+        variationAxes: Partial<Record<"wght" | "wdth" | "slnt" | "opsz" | "ital" | "GRAD" | "XTRA" | "XOPQ" | "YOPQ" | "YTLC" | "YTUC" | "YTAS" | "YTDE" | "YTFI", {
+            name: string;
+            min: number;
+            default: number;
+            max: number;
+        }>>;
+        family: string;
+    };
+} | {
+    name: string;
+    path: string;
+    type: "image";
+    format: string;
+    id: string;
+    projectId: string;
+    size: number;
+    description: string | null;
+    location: "FS" | "REMOTE";
+    createdAt: string;
+    meta: {
+        width: number;
+        height: number;
+    };
+} | undefined;
+export declare const resolveUrlProp: (instanceId: Instance["id"], name: string, propsByInstanceId: PropsByInstanceId, pages: Pages) => Page | string | undefined;
+export declare const usePropUrl: (instanceId: Instance["id"], name: string) => string | {
+    name: string;
+    path: string;
+    id: string;
+    meta: Record<string, string>;
+    title: string;
+    rootInstanceId: string;
+} | undefined;
+export declare const getInstanceIdFromComponentProps: (props: Record<string, unknown>) => string;

package/lib/types/props.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/pubsub/create.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+export declare const createPubsub: <PublishMap>() => {
+    /**
+     * To publish a postMessage event on the current window and parent window from the iframe.
+     */
+    publish<Type extends keyof PublishMap>(action: undefined extends PublishMap[Type] ? {
+        type: Type;
+        payload?: PublishMap[Type] | undefined;
+    } : {
+        type: Type;
+        payload: PublishMap[Type];
+    }): void;
+    /**
+     * To publish a postMessage event on the iframe and parent window from the parent window.
+     */
+    usePublish(): readonly [<Type_1 extends keyof PublishMap>(action: undefined extends PublishMap[Type_1] ? {
+        type: Type_1;
+        payload?: PublishMap[Type_1] | undefined;
+    } : {
+        type: Type_1;
+        payload: PublishMap[Type_1];
+    }) => void, import("react").MutableRefObject<HTMLIFrameElement | null>];
+    /**
+     * To subscribe a message event on the current window.
+     */
+    useSubscribe<Type_2 extends keyof PublishMap>(type: Type_2, onAction: (payload: PublishMap[Type_2]) => void): void;
+    subscribe<Type_3 extends keyof PublishMap>(type: Type_3, onAction: (payload: PublishMap[Type_3]) => void): import("nanoevents").Unsubscribe;
+};

package/lib/types/pubsub/index.d.ts

@@ -0,0 +1 @@
+export * from "./create";

package/lib/types/pubsub/raf-queue.d.ts

@@ -0,0 +1 @@
+export declare const batchUpdate: (update: () => void) => void;

package/lib/types/tree/create-elements-tree.d.ts

@@ -0,0 +1,16 @@
+import { type ComponentProps } from "react";
+import type { ReadableAtom } from "nanostores";
+import type { Assets } from "@webstudio-is/asset-uploader";
+import type { Instance } from "@webstudio-is/project-build";
+import type { GetComponent } from "../components/components-utils";
+import type { Pages, PropsByInstanceId } from "../props";
+import type { WebstudioComponent } from "./webstudio-component";
+export declare const createElementsTree: ({ sandbox, instance, propsByInstanceIdStore, assetsStore, pagesStore, Component, getComponent, }: {
+    sandbox?: boolean | undefined;
+    instance: Instance;
+    propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
+    assetsStore: ReadableAtom<Assets>;
+    pagesStore: ReadableAtom<Pages>;
+    Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
+    getComponent: GetComponent;
+}) => JSX.Element;

package/lib/types/tree/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./create-elements-tree";
+export * from "./root";
+export * from "./webstudio-component";

package/lib/types/tree/root.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentProps } from "react";
+import type { Build, Page } from "@webstudio-is/project-build";
+import type { Asset } from "@webstudio-is/asset-uploader";
+import { WebstudioComponent } from "./webstudio-component";
+import { registerComponents } from "../components";
+import { type Params } from "../app/params";
+import type { GetComponent } from "../components/components-utils";
+export type Data = {
+    page: Page;
+    pages: Array<Page>;
+    build: Build;
+    assets: Array<Asset>;
+    params?: Params;
+};
+export type RootPropsData = Omit<Data, "build"> & {
+    build: Pick<Data["build"], "instances" | "props">;
+};
+type RootProps = {
+    data: RootPropsData;
+    Component?: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
+    customComponents?: Parameters<typeof registerComponents>[0];
+    getComponent: GetComponent;
+};
+export declare const InstanceRoot: ({ data, Component, customComponents, getComponent, }: RootProps) => JSX.Element | null;
+export {};

package/lib/types/tree/session-storage-polyfill.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SessionStoragePolyfill: () => JSX.Element;

package/lib/types/tree/webstudio-component.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { Instance } from "@webstudio-is/project-build";
+import type { GetComponent } from "../components/components-utils";
+export declare const renderWebstudioComponentChildren: (children: Array<JSX.Element | string> | undefined) => Array<JSX.Element | string | Array<JSX.Element | string>> | undefined;
+type WebstudioComponentProps = {
+    instance: Instance;
+    instanceSelector: Instance["id"][];
+    children: Array<JSX.Element | string>;
+    getComponent: GetComponent;
+};
+export declare const WebstudioComponent: ({ instance, instanceSelector, children, getComponent, ...rest }: WebstudioComponentProps) => JSX.Element;
+export declare const idAttribute = "data-ws-id";
+export declare const componentAttribute = "data-ws-component";
+export declare const collapsedAttribute = "data-ws-collapsed";
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.51.0",
+  "version": "0.52.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -8,9 +8,9 @@
   "devDependencies": {
     "@babel/core": "^7.21.0",
     "@jest/globals": "^29.3.1",
-    "@remix-run/node": "1.14.3",
-    "@remix-run/react": "1.14.3",
-    "@remix-run/server-runtime": "1.14.3",
+    "@remix-run/node": "1.15.0",
+    "@remix-run/react": "1.15.0",
+    "@remix-run/server-runtime": "1.15.0",
     "@storybook/react": "^6.5.16",
     "@types/node": "^18.11.18",
     "@types/react": "^17.0.24",
@@ -18,8 +18,7 @@
     "jest": "^29.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "remix-utils": "^4.1.0",
-    "typescript": "4.9.5",
+    "typescript": "5.0.3",
     "zod": "^3.19.1",
     "@webstudio-is/jest-config": "^1.0.2",
     "@webstudio-is/scripts": "^0.0.0",
@@ -31,32 +30,33 @@
     "@remix-run/server-runtime": "1.9.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "remix-utils": "^4.1.0",
     "zod": "^3.19.1"
   },
   "dependencies": {
     "@nanostores/react": "^0.4.1",
     "detect-font": "^0.1.5",
-    "mitt": "^3.0.0",
+    "html-tags": "^3.2.0",
+    "nanoevents": "^7.0.1",
     "nanostores": "^0.7.1",
-    "warn-once": "^0.1.1",
-    "@webstudio-is/asset-uploader": "^0.51.0",
-    "@webstudio-is/css-data": "^0.51.0",
-    "@webstudio-is/css-vars": "^0.51.0",
-    "@webstudio-is/generate-arg-types": "^0.51.0",
-    "@webstudio-is/icons": "^0.51.0",
-    "@webstudio-is/image": "^0.51.0",
-    "@webstudio-is/prisma-client": "^0.51.0",
-    "@webstudio-is/project-build": "^0.51.0"
+    "@webstudio-is/asset-uploader": "^0.52.0",
+    "@webstudio-is/css-data": "^0.52.0",
+    "@webstudio-is/css-engine": "^0.52.0",
+    "@webstudio-is/css-vars": "^0.52.0",
+    "@webstudio-is/fonts": "^0.52.0",
+    "@webstudio-is/generate-arg-types": "^0.52.0",
+    "@webstudio-is/image": "^0.52.0",
+    "@webstudio-is/icons": "^0.52.0",
+    "@webstudio-is/prisma-client": "^0.52.0",
+    "@webstudio-is/project-build": "^0.52.0"
   },
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "import": "./lib/index.js",
-      "require": "./lib/cjs/index.cjs"
+      "require": "./lib/cjs/index.js"
     }
   },
-  "types": "src/index.ts",
+  "types": "lib/types/index.d.ts",
   "files": [
     "lib/*",
     "src/*",
@@ -69,6 +69,7 @@
     "dev": "build-package --watch",
     "build": "build-package",
     "build:args": "generate-arg-types './src/components/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx' && prettier --write \"**/*.props.ts\"",
+    "dts": "tsc --emitDeclarationOnly --declaration --declarationDir lib/types",
     "typecheck": "tsc --noEmit",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest --passWithNoTests",
     "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",