@webstudio-is/react-sdk 0.52.0 → 0.54.0

package/lib/app/custom-components/image.js

@@ -19,7 +19,7 @@ const Image = forwardRef(
       if (asset.location === "REMOTE") {
         return loaders.cloudflareImageLoader(params);
       }
-      return loaders.localImageLoader();
+      return loaders.localImageLoader(params);
     }, [asset, params]);
     let src = props.src;
     if (asset != null) {

package/lib/cjs/app/custom-components/image.js

@@ -39,7 +39,7 @@ const Image = (0, import_react.forwardRef)(
       if (asset.location === "REMOTE") {
         return import_image.loaders.cloudflareImageLoader(params);
       }
-      return import_image.loaders.localImageLoader();
+      return import_image.loaders.localImageLoader(params);
     }, [asset, params]);
     let src = props.src;
     if (asset != null) {

package/lib/cjs/components/image.ws.js

@@ -54,7 +54,7 @@ const propsMeta = {
     ...import_image.props,
     src: {
       type: "string",
-      control: "file-image",
+      control: "file",
       label: "Source",
       required: false
     }

package/lib/cjs/css/css.js

@@ -18,6 +18,7 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var css_exports = {};
 __export(css_exports, {
+  createImageValueTransformer: () => createImageValueTransformer,
   generateCssText: () => generateCssText
 });
 module.exports = __toCommonJS(css_exports);
@@ -27,7 +28,25 @@ var import_components = require("../components");
 var import_tree = require("../tree");
 var import_global_rules = require("./global-rules");
 var import_style_rules = require("./style-rules");
-const generateCssText = (data) => {
+const createImageValueTransformer = (assets, options) => (styleValue) => {
+  if (styleValue.type === "image" && styleValue.value.type === "asset") {
+    const asset = assets.get(styleValue.value.value);
+    if (asset === void 0) {
+      return { type: "keyword", value: "none" };
+    }
+    const { publicPath = "/" } = options;
+    const url = asset.location === "REMOTE" ? asset.path : `${publicPath}${asset.name}`;
+    return {
+      type: "image",
+      value: {
+        type: "url",
+        url
+      },
+      hidden: styleValue.hidden
+    };
+  }
+};
+const generateCssText = (data, options) => {
   const assets = new Map(
     data.assets.map((asset) => [asset.id, asset])
   );
@@ -55,10 +74,14 @@ const generateCssText = (data) => {
   }
   const styleRules = (0, import_style_rules.getStyleRules)(styles, styleSourceSelections);
   for (const { breakpointId, instanceId, style } of styleRules) {
-    engine.addStyleRule(`[${import_tree.idAttribute}="${instanceId}"]`, {
-      breakpoint: breakpointId,
-      style
-    });
+    engine.addStyleRule(
+      `[${import_tree.idAttribute}="${instanceId}"]`,
+      {
+        breakpoint: breakpointId,
+        style
+      },
+      createImageValueTransformer(assets, options)
+    );
   }
   return engine.cssText;
 };

package/lib/components/image.ws.js

@@ -30,7 +30,7 @@ const propsMeta = {
     ...props,
     src: {
       type: "string",
-      control: "file-image",
+      control: "file",
       label: "Source",
       required: false
     }

package/lib/css/css.js

@@ -4,7 +4,25 @@ import { getComponentMeta } from "../components";
 import { componentAttribute, idAttribute } from "../tree";
 import { addGlobalRules } from "./global-rules";
 import { getStyleRules } from "./style-rules";
-const generateCssText = (data) => {
+const createImageValueTransformer = (assets, options) => (styleValue) => {
+  if (styleValue.type === "image" && styleValue.value.type === "asset") {
+    const asset = assets.get(styleValue.value.value);
+    if (asset === void 0) {
+      return { type: "keyword", value: "none" };
+    }
+    const { publicPath = "/" } = options;
+    const url = asset.location === "REMOTE" ? asset.path : `${publicPath}${asset.name}`;
+    return {
+      type: "image",
+      value: {
+        type: "url",
+        url
+      },
+      hidden: styleValue.hidden
+    };
+  }
+};
+const generateCssText = (data, options) => {
   const assets = new Map(
     data.assets.map((asset) => [asset.id, asset])
   );
@@ -32,13 +50,18 @@ const generateCssText = (data) => {
   }
   const styleRules = getStyleRules(styles, styleSourceSelections);
   for (const { breakpointId, instanceId, style } of styleRules) {
-    engine.addStyleRule(`[${idAttribute}="${instanceId}"]`, {
-      breakpoint: breakpointId,
-      style
-    });
+    engine.addStyleRule(
+      `[${idAttribute}="${instanceId}"]`,
+      {
+        breakpoint: breakpointId,
+        style
+      },
+      createImageValueTransformer(assets, options)
+    );
   }
   return engine.cssText;
 };
 export {
+  createImageValueTransformer,
   generateCssText
 };

package/lib/types/app/params.d.ts

@@ -1,5 +1,6 @@
 export type Params = {
     resizeOrigin?: string;
+    publicPath?: string;
 };
 export declare const getParams: () => Params;
 export declare const setParams: (newParams: Params | null) => void;

package/lib/types/components/component-meta.d.ts

@@ -258,9 +258,10 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         required: boolean;
         control: "inline-check";
     }>, z.ZodObject<{
-        control: z.ZodLiteral<"file-image">;
+        control: z.ZodLiteral<"file">;
         type: z.ZodLiteral<"string">;
         defaultValue: z.ZodOptional<z.ZodString>;
+        accept: z.ZodOptional<z.ZodString>;
         label: z.ZodOptional<z.ZodString>;
         description: z.ZodOptional<z.ZodString>;
         required: z.ZodBoolean;
@@ -268,16 +269,18 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         description?: string | undefined;
         label?: string | undefined;
         defaultValue?: string | undefined;
+        accept?: string | undefined;
         type: "string";
         required: boolean;
-        control: "file-image";
+        control: "file";
     }, {
         description?: string | undefined;
         label?: string | undefined;
         defaultValue?: string | undefined;
+        accept?: string | undefined;
         type: "string";
         required: boolean;
-        control: "file-image";
+        control: "file";
     }>, z.ZodObject<{
         control: z.ZodLiteral<"url">;
         type: z.ZodLiteral<"string">;
@@ -433,9 +436,10 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         description?: string | undefined;
         label?: string | undefined;
         defaultValue?: string | undefined;
+        accept?: string | undefined;
         type: "string";
         required: boolean;
-        control: "file-image";
+        control: "file";
     } | {
         description?: string | undefined;
         label?: string | undefined;
@@ -548,9 +552,10 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         description?: string | undefined;
         label?: string | undefined;
         defaultValue?: string | undefined;
+        accept?: string | undefined;
         type: "string";
         required: boolean;
-        control: "file-image";
+        control: "file";
     } | {
         description?: string | undefined;
         label?: string | undefined;

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

@@ -1,3 +1,4 @@
+import { type TransformValue } from "@webstudio-is/css-engine";
 import type { Asset } from "@webstudio-is/asset-uploader";
 import type { Build } from "@webstudio-is/project-build";
 type Data = {
@@ -6,5 +7,48 @@ type Data = {
     styles?: Build["styles"];
     styleSourceSelections?: Build["styleSourceSelections"];
 };
-export declare const generateCssText: (data: Data) => string;
+type CssOptions = {
+    publicPath?: string;
+};
+export declare const createImageValueTransformer: (assets: Map<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>, options: CssOptions) => TransformValue;
+export declare const generateCssText: (data: Data, options: CssOptions) => string;
 export {};

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

@@ -8,7 +8,8 @@ type StyleRule = {
  * 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`, {
+export declare const getStyleRules: (styles: Map<string, {
+    state?: string | undefined;
     value: {
         type: "unit";
         value: number;
@@ -34,22 +35,10 @@ export declare const getStyleRules: (styles: Map<`${string}:${string}:filter` |
         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;
-                };
-            };
+            value: string;
+        } | {
+            type: "url";
+            url: string;
         };
     } | {
         type: "invalid";
@@ -89,22 +78,10 @@ export declare const getStyleRules: (styles: Map<`${string}:${string}:filter` |
             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;
-                    };
-                };
+                value: string;
+            } | {
+                type: "url";
+                url: string;
             };
         } | {
             type: "invalid";
@@ -152,22 +129,10 @@ export declare const getStyleRules: (styles: Map<`${string}:${string}:filter` |
             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;
-                    };
-                };
+                value: string;
+            } | {
+                type: "url";
+                url: string;
             };
         } | {
             type: "tuple";
@@ -201,22 +166,10 @@ export declare const getStyleRules: (styles: Map<`${string}:${string}:filter` |
                 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;
-                        };
-                    };
+                    value: string;
+                } | {
+                    type: "url";
+                    url: string;
                 };
             } | {
                 type: "invalid";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.52.0",
+  "version": "0.54.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -23,7 +23,7 @@
     "@webstudio-is/jest-config": "^1.0.2",
     "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",
-    "@webstudio-is/tsconfig": "^1.0.1"
+    "@webstudio-is/tsconfig": "^1.0.3"
   },
   "peerDependencies": {
     "@remix-run/react": "1.9.0",
@@ -38,16 +38,16 @@
     "html-tags": "^3.2.0",
     "nanoevents": "^7.0.1",
     "nanostores": "^0.7.1",
-    "@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"
+    "@webstudio-is/asset-uploader": "^0.54.0",
+    "@webstudio-is/css-data": "^0.54.0",
+    "@webstudio-is/css-engine": "^0.54.0",
+    "@webstudio-is/css-vars": "^0.54.0",
+    "@webstudio-is/fonts": "^0.54.0",
+    "@webstudio-is/generate-arg-types": "^0.54.0",
+    "@webstudio-is/icons": "^0.54.0",
+    "@webstudio-is/image": "^0.54.0",
+    "@webstudio-is/prisma-client": "^0.54.0",
+    "@webstudio-is/project-build": "^0.54.0"
   },
   "exports": {
     ".": {

package/src/app/custom-components/image.tsx

@@ -25,7 +25,7 @@ export const Image = forwardRef<ElementRef<typeof defaultTag>, Props>(
       if (asset.location === "REMOTE") {
         return loaders.cloudflareImageLoader(params);
       }
-      return loaders.localImageLoader();
+      return loaders.localImageLoader(params);
     }, [asset, params]);
 
     let src = props.src;

package/src/app/params.ts

@@ -1,5 +1,6 @@
 export type Params = {
   resizeOrigin?: string;
+  publicPath?: string;
 };
 
 let params: Params | null = {};

package/src/components/image.ws.tsx

@@ -37,7 +37,7 @@ export const propsMeta: WsComponentPropsMeta = {
     ...props,
     src: {
       type: "string",
-      control: "file-image",
+      control: "file",
       label: "Source",
       required: false,
     },

package/src/css/css.ts

@@ -1,5 +1,5 @@
-import { createCssEngine } from "@webstudio-is/css-engine";
-import type { Asset } from "@webstudio-is/asset-uploader";
+import { createCssEngine, type TransformValue } from "@webstudio-is/css-engine";
+import type { Asset, Assets } from "@webstudio-is/asset-uploader";
 import type { Build } from "@webstudio-is/project-build";
 import { getComponentNames } from "../components/components-utils";
 import { getComponentMeta } from "../components";
@@ -14,7 +14,36 @@ type Data = {
   styleSourceSelections?: Build["styleSourceSelections"];
 };
 
-export const generateCssText = (data: Data) => {
+type CssOptions = {
+  publicPath?: string;
+};
+
+export const createImageValueTransformer =
+  (assets: Assets, options: CssOptions): TransformValue =>
+  (styleValue) => {
+    if (styleValue.type === "image" && styleValue.value.type === "asset") {
+      const asset = assets.get(styleValue.value.value);
+      if (asset === undefined) {
+        return { type: "keyword", value: "none" };
+      }
+
+      // @todo reuse image loaders and generate image-set
+      const { publicPath = "/" } = options;
+      const url =
+        asset.location === "REMOTE" ? asset.path : `${publicPath}${asset.name}`;
+
+      return {
+        type: "image",
+        value: {
+          type: "url",
+          url,
+        },
+        hidden: styleValue.hidden,
+      };
+    }
+  };
+
+export const generateCssText = (data: Data, options: CssOptions) => {
   const assets = new Map<Asset["id"], Asset>(
     data.assets.map((asset) => [asset.id, asset])
   );
@@ -47,10 +76,14 @@ export const generateCssText = (data: Data) => {
 
   const styleRules = getStyleRules(styles, styleSourceSelections);
   for (const { breakpointId, instanceId, style } of styleRules) {
-    engine.addStyleRule(`[${idAttribute}="${instanceId}"]`, {
-      breakpoint: breakpointId,
-      style,
-    });
+    engine.addStyleRule(
+      `[${idAttribute}="${instanceId}"]`,
+      {
+        breakpoint: breakpointId,
+        style,
+      },
+      createImageValueTransformer(assets, options)
+    );
   }
 
   return engine.cssText;

package/src/css/style-rules.test.ts

@@ -1,75 +1,60 @@
 import { test, expect } from "@jest/globals";
-import type {
+import {
+  getStyleDeclKey,
+  StyleDecl,
   Styles,
   StyleSourceSelections,
 } from "@webstudio-is/project-build";
 import { getStyleRules } from "./style-rules";
 
+const createStyleDeclPair = (styleDecl: StyleDecl) => {
+  return [getStyleDeclKey(styleDecl), styleDecl] as const;
+};
+
 test("compute styles from different style sources", () => {
   const styles: Styles = new Map([
-    [
-      "styleSource1:a:width",
-      {
-        breakpointId: "a",
-        styleSourceId: "styleSource1",
-        property: "width",
-        value: { type: "unit", value: 10, unit: "px" },
-      },
-    ],
-    [
-      "styleSource2:a:display",
-      {
-        breakpointId: "a",
-        styleSourceId: "styleSource2",
-        property: "display",
-        value: { type: "keyword", value: "block" },
-      },
-    ],
-    [
-      "styleSource4:a:color",
-      {
-        breakpointId: "a",
-        styleSourceId: "styleSource4",
-        property: "color",
-        value: { type: "keyword", value: "green" },
-      },
-    ],
-    [
-      "styleSource4:a:width",
-      {
-        breakpointId: "a",
-        styleSourceId: "styleSource4",
-        property: "width",
-        value: { type: "keyword", value: "min-content" },
-      },
-    ],
-    [
-      "styleSource3:a:color",
-      {
-        breakpointId: "a",
-        styleSourceId: "styleSource3",
-        property: "color",
-        value: { type: "keyword", value: "red" },
-      },
-    ],
-    [
-      "styleSource5:b:color",
-      {
-        breakpointId: "b",
-        styleSourceId: "styleSource5",
-        property: "color",
-        value: { type: "keyword", value: "orange" },
-      },
-    ],
-    [
-      "styleSource6:a:color",
-      {
-        breakpointId: "a",
-        styleSourceId: "styleSource6",
-        property: "color",
-        value: { type: "keyword", value: "blue" },
-      },
-    ],
+    createStyleDeclPair({
+      breakpointId: "a",
+      styleSourceId: "styleSource1",
+      property: "width",
+      value: { type: "unit", value: 10, unit: "px" },
+    }),
+    createStyleDeclPair({
+      breakpointId: "a",
+      styleSourceId: "styleSource2",
+      property: "display",
+      value: { type: "keyword", value: "block" },
+    }),
+    createStyleDeclPair({
+      breakpointId: "a",
+      styleSourceId: "styleSource4",
+      property: "color",
+      value: { type: "keyword", value: "green" },
+    }),
+    createStyleDeclPair({
+      breakpointId: "a",
+      styleSourceId: "styleSource4",
+      property: "width",
+      value: { type: "keyword", value: "min-content" },
+    }),
+    createStyleDeclPair({
+      breakpointId: "a",
+      styleSourceId: "styleSource3",
+      property: "color",
+      value: { type: "keyword", value: "red" },
+    }),
+    createStyleDeclPair({
+      breakpointId: "b",
+      styleSourceId: "styleSource5",
+      property: "color",
+      value: { type: "keyword", value: "orange" },
+    }),
+    createStyleDeclPair({
+      breakpointId: "a",
+      styleSourceId: "styleSource6",
+      property: "color",
+      value: { type: "keyword", value: "blue" },
+    }),
   ]);
   const styleSourceSelections: StyleSourceSelections = new Map([
     [