@webstudio-is/react-sdk 0.19.0 → 0.21.0

package/lib/cjs/css/categories.cjs

@@ -29,7 +29,6 @@ const layout = [
   "alignItems",
   "justifyContent",
   "alignContent",
-  "placeContent",
   "justifyItems",
   "rowGap",
   "columnGap",
@@ -56,7 +55,7 @@ const gridChild = [
   "justifySelf",
   "order"
 ];
-const spacing = [
+const space = [
   "marginTop",
   "marginRight",
   "marginBottom",
@@ -75,6 +74,7 @@ const size = [
   "maxHeight",
   "overflow",
   "objectFit",
+  "objectPosition",
   "aspectRatio"
 ];
 const position = [
@@ -214,7 +214,7 @@ const categories = {
     properties: gridChild,
     moreFrom: ""
   },
-  spacing: { label: "Spacing", properties: spacing, moreFrom: "" },
+  space: { label: "Space", properties: space, moreFrom: "" },
   size: { label: "Size", properties: size, moreFrom: "" },
   position: { label: "Position", properties: position, moreFrom: "" },
   typography: {

package/lib/cjs/css/get-browser-style.cjs

@@ -23,14 +23,15 @@ __export(get_browser_style_exports, {
 module.exports = __toCommonJS(get_browser_style_exports);
 var import_detect_font = require("detect-font");
 var import_css_data = require("@webstudio-is/css-data");
-const unitRegex = new RegExp(`${import_css_data.units.join("|")}`);
+const unitsList = Object.values(import_css_data.units).flat();
+const unitRegex = new RegExp(`${unitsList.join("|")}`);
 const parseValue = (property, value) => {
-  const number = parseFloat(value);
+  const number = Number.parseFloat(value);
   const parsedUnit = unitRegex.exec(value);
   if (value === "rgba(0, 0, 0, 0)") {
     value = "transparent";
   }
-  if (isNaN(number) || parsedUnit === null) {
+  if (Number.isNaN(number)) {
     return {
       type: "keyword",
       value
@@ -39,6 +40,13 @@ const parseValue = (property, value) => {
   if (number === 0 && property in import_css_data.properties) {
     return import_css_data.properties[property].initial;
   }
+  if (parsedUnit === null) {
+    return {
+      type: "unit",
+      unit: "number",
+      value: number
+    };
+  }
   return {
     type: "unit",
     unit: parsedUnit[0],

package/lib/cjs/db/index.cjs

@@ -17,3 +17,4 @@ var db_exports = {};
 module.exports = __toCommonJS(db_exports);
 __reExport(db_exports, require("./types"), module.exports);
 __reExport(db_exports, require("./instance"), module.exports);
+__reExport(db_exports, require("./style"), module.exports);

package/lib/cjs/db/instance.cjs

@@ -18,32 +18,42 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var instance_exports = {};
 __export(instance_exports, {
+  Id: () => Id,
   Instance: () => Instance,
+  Instances: () => Instances,
+  InstancesItem: () => InstancesItem,
   Text: () => Text,
   toBaseInstance: () => toBaseInstance
 });
 module.exports = __toCommonJS(instance_exports);
-var import_css_data = require("@webstudio-is/css-data");
 var import_zod = require("zod");
+var import_components = require("../components");
 const toBaseInstance = (instance) => {
   return {
     id: instance.id,
-    component: instance.component,
-    cssRules: instance.cssRules
+    component: instance.component
   };
 };
-const Text = import_zod.z.lazy(
-  () => import_zod.z.object({
-    type: import_zod.z.literal("text"),
-    value: import_zod.z.string()
-  })
-);
+const Text = import_zod.z.object({
+  type: import_zod.z.literal("text"),
+  value: import_zod.z.string()
+});
+const Id = import_zod.z.object({
+  type: import_zod.z.literal("id"),
+  value: import_zod.z.string()
+});
+const InstancesItem = import_zod.z.object({
+  type: import_zod.z.literal("instance"),
+  id: import_zod.z.string(),
+  component: import_zod.z.enum((0, import_components.getComponentNames)()),
+  children: import_zod.z.array(import_zod.z.union([Id, Text]))
+});
+const Instances = import_zod.z.array(InstancesItem);
 const Instance = import_zod.z.lazy(
   () => import_zod.z.object({
     type: import_zod.z.literal("instance"),
     id: import_zod.z.string(),
-    component: import_zod.z.string(),
-    children: import_zod.z.array(import_zod.z.union([Instance, Text])),
-    cssRules: import_zod.z.array(import_css_data.CssRule)
+    component: import_zod.z.enum((0, import_components.getComponentNames)()),
+    children: import_zod.z.array(import_zod.z.union([Instance, Text]))
   })
 );

package/lib/cjs/db/style.cjs

@@ -0,0 +1,67 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var style_exports = {};
+__export(style_exports, {
+  PresetStyles: () => PresetStyles,
+  PresetStylesItem: () => PresetStylesItem,
+  Styles: () => Styles,
+  StylesItem: () => StylesItem,
+  findMissingPresetStyles: () => findMissingPresetStyles
+});
+module.exports = __toCommonJS(style_exports);
+var import_zod = require("zod");
+var import_css_data = require("@webstudio-is/css-data");
+var import_components = require("../components");
+const PresetStylesItem = import_zod.z.object({
+  component: import_zod.z.enum((0, import_components.getComponentNames)()),
+  property: import_zod.z.string(),
+  value: import_css_data.SharedStyleValue
+});
+const PresetStyles = import_zod.z.array(PresetStylesItem);
+const findMissingPresetStyles = (presetStyles, components) => {
+  const populatedComponents = /* @__PURE__ */ new Set();
+  for (const style of presetStyles) {
+    populatedComponents.add(style.component);
+  }
+  const missingPresetStyles = [];
+  for (const component of components) {
+    if (populatedComponents.has(component)) {
+      continue;
+    }
+    const meta = (0, import_components.getComponentMeta)(component);
+    if (meta.presetStyle === void 0) {
+      continue;
+    }
+    for (const [property, value] of Object.entries(meta.presetStyle)) {
+      missingPresetStyles.push({
+        component,
+        property,
+        value
+      });
+    }
+  }
+  return missingPresetStyles;
+};
+const StylesItem = import_zod.z.object({
+  breakpointId: import_zod.z.string(),
+  instanceId: import_zod.z.string(),
+  property: import_zod.z.string(),
+  value: import_css_data.SharedStyleValue
+});
+const Styles = import_zod.z.array(StylesItem);

package/lib/cjs/tree/wrapper-component.cjs

@@ -19,6 +19,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var wrapper_component_exports = {};
 __export(wrapper_component_exports, {
   WrapperComponent: () => WrapperComponent,
+  componentAttribute: () => componentAttribute,
   idAttribute: () => idAttribute,
   renderWrapperComponentChildren: () => renderWrapperComponentChildren
 });
@@ -52,10 +53,16 @@ const WrapperComponent = ({
 }) => {
   const Component = (0, import_components.getComponent)(instance.component);
   const userProps = (0, import_use_user_props.useUserProps)(instance.id);
-  const props = { ...userProps, ...rest, [idAttribute]: instance.id };
+  const props = {
+    ...userProps,
+    ...rest,
+    [idAttribute]: instance.id,
+    [componentAttribute]: instance.component
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
     ...props,
     children: renderWrapperComponentChildren(children)
   });
 };
 const idAttribute = "data-ws-id";
+const componentAttribute = "data-ws-component";

package/lib/cjs/user-props/all-user-props.cjs

@@ -23,17 +23,18 @@ __export(all_user_props_exports, {
 });
 module.exports = __toCommonJS(all_user_props_exports);
 var import_react = require("react");
-var import_react_nano_state = require("react-nano-state");
-const allUserPropsContainer = (0, import_react_nano_state.createValueContainer)({});
+var import_nanostores = require("nanostores");
+var import_react2 = require("@nanostores/react");
+const allUserPropsContainer = (0, import_nanostores.atom)({});
 const useAllUserProps = (initialUserProps) => {
   const ref = (0, import_react.useRef)(false);
   if (ref.current === false && initialUserProps !== void 0) {
     const propsMap = {};
-    for (const props of initialUserProps) {
-      propsMap[props.instanceId] = props;
+    for (const item of initialUserProps) {
+      propsMap[item.instanceId] = item.props;
     }
-    allUserPropsContainer.value = propsMap;
+    allUserPropsContainer.set(propsMap);
     ref.current = true;
   }
-  return (0, import_react_nano_state.useValue)(allUserPropsContainer);
+  return (0, import_react2.useStore)(allUserPropsContainer);
 };

package/lib/cjs/user-props/index.cjs

@@ -17,5 +17,4 @@ var user_props_exports = {};
 module.exports = __toCommonJS(user_props_exports);
 __reExport(user_props_exports, require("./all-user-props"), module.exports);
 __reExport(user_props_exports, require("./use-user-props"), module.exports);
-__reExport(user_props_exports, require("./types"), module.exports);
 __reExport(user_props_exports, require("./schema"), module.exports);

package/lib/cjs/user-props/use-user-props-asset.cjs

@@ -24,13 +24,13 @@ module.exports = __toCommonJS(use_user_props_asset_exports);
 var import_react = require("react");
 var import_all_user_props = require("./all-user-props");
 const useUserPropsAsset = (instanceId, propName) => {
-  const [allUserProps] = (0, import_all_user_props.useAllUserProps)();
+  const allUserProps = (0, import_all_user_props.useAllUserProps)();
   const propsData = allUserProps[instanceId];
   const asset = (0, import_react.useMemo)(() => {
     if (propsData == null) {
       return void 0;
     }
-    const prop = propsData.props.find((prop2) => prop2.prop === propName);
+    const prop = propsData.find((prop2) => prop2.prop === propName);
     if (prop == null) {
       return void 0;
     }

package/lib/cjs/user-props/use-user-props.cjs

@@ -24,14 +24,14 @@ module.exports = __toCommonJS(use_user_props_exports);
 var import_react = require("react");
 var import_all_user_props = require("./all-user-props");
 const useUserProps = (instanceId) => {
-  const [allUserProps] = (0, import_all_user_props.useAllUserProps)();
+  const allUserProps = (0, import_all_user_props.useAllUserProps)();
   const propsData = allUserProps[instanceId];
   const props = (0, import_react.useMemo)(() => {
     if (propsData == null) {
       return {};
     }
     const result = {};
-    for (const userProp of propsData.props) {
+    for (const userProp of propsData) {
       if (userProp.type !== "asset") {
         result[userProp.prop] = userProp.value;
       }

package/lib/css/categories.js

@@ -5,7 +5,6 @@ const layout = [
   "alignItems",
   "justifyContent",
   "alignContent",
-  "placeContent",
   "justifyItems",
   "rowGap",
   "columnGap",
@@ -32,7 +31,7 @@ const gridChild = [
   "justifySelf",
   "order"
 ];
-const spacing = [
+const space = [
   "marginTop",
   "marginRight",
   "marginBottom",
@@ -51,6 +50,7 @@ const size = [
   "maxHeight",
   "overflow",
   "objectFit",
+  "objectPosition",
   "aspectRatio"
 ];
 const position = [
@@ -190,7 +190,7 @@ const categories = {
     properties: gridChild,
     moreFrom: ""
   },
-  spacing: { label: "Spacing", properties: spacing, moreFrom: "" },
+  space: { label: "Space", properties: space, moreFrom: "" },
   size: { label: "Size", properties: size, moreFrom: "" },
   position: { label: "Position", properties: position, moreFrom: "" },
   typography: {

package/lib/css/get-browser-style.js

@@ -1,13 +1,14 @@
 import { detectFont } from "detect-font";
 import { properties, units } from "@webstudio-is/css-data";
-const unitRegex = new RegExp(`${units.join("|")}`);
+const unitsList = Object.values(units).flat();
+const unitRegex = new RegExp(`${unitsList.join("|")}`);
 const parseValue = (property, value) => {
-  const number = parseFloat(value);
+  const number = Number.parseFloat(value);
   const parsedUnit = unitRegex.exec(value);
   if (value === "rgba(0, 0, 0, 0)") {
     value = "transparent";
   }
-  if (isNaN(number) || parsedUnit === null) {
+  if (Number.isNaN(number)) {
     return {
       type: "keyword",
       value
@@ -16,6 +17,13 @@ const parseValue = (property, value) => {
   if (number === 0 && property in properties) {
     return properties[property].initial;
   }
+  if (parsedUnit === null) {
+    return {
+      type: "unit",
+      unit: "number",
+      value: number
+    };
+  }
   return {
     type: "unit",
     unit: parsedUnit[0],

package/lib/db/index.js

@@ -1,2 +1,3 @@
 export * from "./types";
 export * from "./instance";
+export * from "./style";

package/lib/db/instance.js

@@ -1,29 +1,39 @@
-import { CssRule } from "@webstudio-is/css-data";
 import { z } from "zod";
+import { getComponentNames } from "../components";
 const toBaseInstance = (instance) => {
   return {
     id: instance.id,
-    component: instance.component,
-    cssRules: instance.cssRules
+    component: instance.component
   };
 };
-const Text = z.lazy(
-  () => z.object({
-    type: z.literal("text"),
-    value: z.string()
-  })
-);
+const Text = z.object({
+  type: z.literal("text"),
+  value: z.string()
+});
+const Id = z.object({
+  type: z.literal("id"),
+  value: z.string()
+});
+const InstancesItem = z.object({
+  type: z.literal("instance"),
+  id: z.string(),
+  component: z.enum(getComponentNames()),
+  children: z.array(z.union([Id, Text]))
+});
+const Instances = z.array(InstancesItem);
 const Instance = z.lazy(
   () => z.object({
     type: z.literal("instance"),
     id: z.string(),
-    component: z.string(),
-    children: z.array(z.union([Instance, Text])),
-    cssRules: z.array(CssRule)
+    component: z.enum(getComponentNames()),
+    children: z.array(z.union([Instance, Text]))
   })
 );
 export {
+  Id,
   Instance,
+  Instances,
+  InstancesItem,
   Text,
   toBaseInstance
 };

package/lib/db/style.js

@@ -0,0 +1,50 @@
+import { z } from "zod";
+import { SharedStyleValue } from "@webstudio-is/css-data";
+import {
+  getComponentMeta,
+  getComponentNames
+} from "../components";
+const PresetStylesItem = z.object({
+  component: z.enum(getComponentNames()),
+  property: z.string(),
+  value: SharedStyleValue
+});
+const PresetStyles = z.array(PresetStylesItem);
+const findMissingPresetStyles = (presetStyles, components) => {
+  const populatedComponents = /* @__PURE__ */ new Set();
+  for (const style of presetStyles) {
+    populatedComponents.add(style.component);
+  }
+  const missingPresetStyles = [];
+  for (const component of components) {
+    if (populatedComponents.has(component)) {
+      continue;
+    }
+    const meta = getComponentMeta(component);
+    if (meta.presetStyle === void 0) {
+      continue;
+    }
+    for (const [property, value] of Object.entries(meta.presetStyle)) {
+      missingPresetStyles.push({
+        component,
+        property,
+        value
+      });
+    }
+  }
+  return missingPresetStyles;
+};
+const StylesItem = z.object({
+  breakpointId: z.string(),
+  instanceId: z.string(),
+  property: z.string(),
+  value: SharedStyleValue
+});
+const Styles = z.array(StylesItem);
+export {
+  PresetStyles,
+  PresetStylesItem,
+  Styles,
+  StylesItem,
+  findMissingPresetStyles
+};

package/lib/tree/wrapper-component.js

@@ -27,15 +27,22 @@ const WrapperComponent = ({
 }) => {
   const Component = getComponent(instance.component);
   const userProps = useUserProps(instance.id);
-  const props = { ...userProps, ...rest, [idAttribute]: instance.id };
+  const props = {
+    ...userProps,
+    ...rest,
+    [idAttribute]: instance.id,
+    [componentAttribute]: instance.component
+  };
   return /* @__PURE__ */ jsx(Component, {
     ...props,
     children: renderWrapperComponentChildren(children)
   });
 };
 const idAttribute = "data-ws-id";
+const componentAttribute = "data-ws-component";
 export {
   WrapperComponent,
+  componentAttribute,
   idAttribute,
   renderWrapperComponentChildren
 };

package/lib/user-props/all-user-props.js

@@ -1,17 +1,18 @@
 import { useRef } from "react";
-import { createValueContainer, useValue } from "react-nano-state";
-const allUserPropsContainer = createValueContainer({});
+import { atom } from "nanostores";
+import { useStore } from "@nanostores/react";
+const allUserPropsContainer = atom({});
 const useAllUserProps = (initialUserProps) => {
   const ref = useRef(false);
   if (ref.current === false && initialUserProps !== void 0) {
     const propsMap = {};
-    for (const props of initialUserProps) {
-      propsMap[props.instanceId] = props;
+    for (const item of initialUserProps) {
+      propsMap[item.instanceId] = item.props;
     }
-    allUserPropsContainer.value = propsMap;
+    allUserPropsContainer.set(propsMap);
     ref.current = true;
   }
-  return useValue(allUserPropsContainer);
+  return useStore(allUserPropsContainer);
 };
 export {
   allUserPropsContainer,

package/lib/user-props/index.js

@@ -1,4 +1,3 @@
 export * from "./all-user-props";
 export * from "./use-user-props";
-export * from "./types";
 export * from "./schema";

package/lib/user-props/use-user-props-asset.js

@@ -1,13 +1,13 @@
 import { useMemo } from "react";
 import { useAllUserProps } from "./all-user-props";
 const useUserPropsAsset = (instanceId, propName) => {
-  const [allUserProps] = useAllUserProps();
+  const allUserProps = useAllUserProps();
   const propsData = allUserProps[instanceId];
   const asset = useMemo(() => {
     if (propsData == null) {
       return void 0;
     }
-    const prop = propsData.props.find((prop2) => prop2.prop === propName);
+    const prop = propsData.find((prop2) => prop2.prop === propName);
     if (prop == null) {
       return void 0;
     }

package/lib/user-props/use-user-props.js

@@ -1,14 +1,14 @@
 import { useMemo } from "react";
 import { useAllUserProps } from "./all-user-props";
 const useUserProps = (instanceId) => {
-  const [allUserProps] = useAllUserProps();
+  const allUserProps = useAllUserProps();
   const propsData = allUserProps[instanceId];
   const props = useMemo(() => {
     if (propsData == null) {
       return {};
     }
     const result = {};
-    for (const userProp of propsData.props) {
+    for (const userProp of propsData) {
       if (userProp.type !== "asset") {
         result[userProp.prop] = userProp.value;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -9,9 +9,9 @@
     "@babel/core": "^7.20.2",
     "@esbuild-kit/esm-loader": "^2.4.2",
     "@jest/globals": "^29.3.1",
-    "@remix-run/node": "^1.6.4",
-    "@remix-run/react": "^1.2.3",
-    "@remix-run/server-runtime": "^1.2.3",
+    "@remix-run/node": "1.9.0",
+    "@remix-run/react": "1.9.0",
+    "@remix-run/server-runtime": "1.9.0",
     "@storybook/react": "^6.5.14",
     "@storybook/testing-library": "^0.0.11",
     "@types/node": "^17.0.21",
@@ -34,25 +34,25 @@
     "@webstudio-is/tsconfig": "^1.0.1"
   },
   "peerDependencies": {
-    "@remix-run/react": "^1.2.3",
-    "@remix-run/server-runtime": "^1.2.3",
+    "@remix-run/react": "1.9.0",
+    "@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",
-    "immer": "^9.0.12",
     "mitt": "^3.0.0",
-    "react-nano-state": "^0.4.0",
+    "nanostores": "^0.7.1",
     "warn-once": "^0.1.1",
-    "@webstudio-is/asset-uploader": "^0.19.0",
-    "@webstudio-is/css-data": "^0.19.0",
-    "@webstudio-is/design-tokens": "^0.19.0",
-    "@webstudio-is/icons": "^0.19.0",
-    "@webstudio-is/image": "^0.19.0",
-    "@webstudio-is/prisma-client": "^0.19.0"
+    "@webstudio-is/asset-uploader": "^0.21.0",
+    "@webstudio-is/css-data": "^0.21.0",
+    "@webstudio-is/design-tokens": "^0.21.0",
+    "@webstudio-is/icons": "^0.21.0",
+    "@webstudio-is/image": "^0.21.0",
+    "@webstudio-is/prisma-client": "^0.21.0"
   },
   "exports": {
     "import": "./lib/index.js",

package/src/css/categories.ts

@@ -10,7 +10,6 @@ const layout = [
   "justifyContent",
   "alignContent",
   // Grid
-  "placeContent",
   "justifyItems",
   "rowGap",
   "columnGap",
@@ -40,7 +39,7 @@ const gridChild = [
   "order",
 ] as const;
 
-const spacing = [
+const space = [
   "marginTop",
   "marginRight",
   "marginBottom",
@@ -60,6 +59,7 @@ const size = [
   "maxHeight",
   "overflow",
   "objectFit",
+  "objectPosition",
   "aspectRatio",
 ] as const;
 
@@ -217,7 +217,7 @@ export const categories = {
     properties: gridChild,
     moreFrom: "",
   },
-  spacing: { label: "Spacing", properties: spacing, moreFrom: "" },
+  space: { label: "Space", properties: space, moreFrom: "" },
   size: { label: "Size", properties: size, moreFrom: "" },
   position: { label: "Position", properties: position, moreFrom: "" },
   typography: {

package/src/css/get-browser-style.ts

@@ -2,19 +2,20 @@ import { detectFont } from "detect-font";
 import type { Style, StyleValue, Unit } from "@webstudio-is/css-data";
 import { properties, units } from "@webstudio-is/css-data";
 
-const unitRegex = new RegExp(`${units.join("|")}`);
+const unitsList = Object.values(units).flat();
+const unitRegex = new RegExp(`${unitsList.join("|")}`);
 
 // @todo use a parser
 const parseValue = (
   property: keyof typeof properties,
   value: string
 ): StyleValue => {
-  const number = parseFloat(value);
+  const number = Number.parseFloat(value);
   const parsedUnit = unitRegex.exec(value);
   if (value === "rgba(0, 0, 0, 0)") {
     value = "transparent";
   }
-  if (isNaN(number) || parsedUnit === null) {
+  if (Number.isNaN(number)) {
     return {
       type: "keyword",
       value,
@@ -25,6 +26,14 @@ const parseValue = (
     return properties[property].initial;
   }
 
+  if (parsedUnit === null) {
+    return {
+      type: "unit",
+      unit: "number",
+      value: number,
+    };
+  }
+
   return {
     type: "unit",
     unit: parsedUnit[0] as Unit,

package/src/db/index.ts

@@ -1,2 +1,3 @@
 export * from "./types";
 export * from "./instance";
+export * from "./style";

package/src/db/instance.ts

@@ -1,18 +1,11 @@
-import { CssRule } from "@webstudio-is/css-data";
 import { z } from "zod";
-import { ComponentName } from "../components";
+import { type ComponentName, getComponentNames } from "../components";
 
 // This should be used when passing a lot of data is potentially costly.
 // For example, when passing data from an iframe.
 export type BaseInstance = {
   id: string;
   component: ComponentName;
-  cssRules: Array<CssRule>;
-};
-
-export type Text = {
-  type: "text";
-  value: string;
 };
 
 export type Instance = BaseInstance & {
@@ -24,25 +17,40 @@ export const toBaseInstance = (instance: Instance): BaseInstance => {
   return {
     id: instance.id,
     component: instance.component,
-    cssRules: instance.cssRules,
   };
 };
 
-export const Text = z.lazy(() =>
+export const Text = z.object({
+  type: z.literal("text"),
+  value: z.string(),
+});
+
+export type Text = z.infer<typeof Text>;
+
+export const Id = z.object({
+  type: z.literal("id"),
+  value: z.string(),
+});
+export type Id = z.infer<typeof Id>;
+
+export const InstancesItem = z.object({
+  type: z.literal("instance"),
+  id: z.string(),
+  component: z.enum(getComponentNames() as [ComponentName]),
+  children: z.array(z.union([Id, Text])),
+});
+
+export type InstancesItem = z.infer<typeof InstancesItem>;
+
+export const Instances = z.array(InstancesItem);
+
+export type Instances = z.infer<typeof Instances>;
+
+export const Instance: z.ZodType<Instance> = z.lazy(() =>
   z.object({
-    type: z.literal("text"),
-    value: z.string(),
+    type: z.literal("instance"),
+    id: z.string(),
+    component: z.enum(getComponentNames() as [ComponentName]),
+    children: z.array(z.union([Instance, Text])),
   })
 );
-
-export const Instance = z.lazy(
-  () =>
-    z.object({
-      type: z.literal("instance"),
-      id: z.string(),
-      component: z.string(),
-      children: z.array(z.union([Instance, Text])),
-      cssRules: z.array(CssRule),
-    })
-  // @todo can't figure out how to make component to be z.enum(Object.keys(components))
-) as z.ZodType<Instance>;

package/src/db/style.ts

@@ -0,0 +1,63 @@
+import { z } from "zod";
+import type { StyleProperty, StyleValue } from "@webstudio-is/css-data";
+import { SharedStyleValue } from "@webstudio-is/css-data";
+import {
+  type ComponentName,
+  getComponentMeta,
+  getComponentNames,
+} from "../components";
+
+export const PresetStylesItem = z.object({
+  component: z.enum(getComponentNames() as [ComponentName]),
+  // @todo can't figure out how to make property to be enum
+  property: z.string() as z.ZodType<StyleProperty>,
+  value: SharedStyleValue as z.ZodType<StyleValue>,
+});
+
+export type PresetStylesItem = z.infer<typeof PresetStylesItem>;
+
+export const PresetStyles = z.array(PresetStylesItem);
+
+export type PresetStyles = z.infer<typeof PresetStyles>;
+
+export const findMissingPresetStyles = (
+  presetStyles: PresetStyles,
+  components: ComponentName[]
+) => {
+  const populatedComponents = new Set();
+  for (const style of presetStyles) {
+    populatedComponents.add(style.component);
+  }
+  const missingPresetStyles: PresetStyles = [];
+  for (const component of components) {
+    if (populatedComponents.has(component)) {
+      continue;
+    }
+    const meta = getComponentMeta(component);
+    if (meta.presetStyle === undefined) {
+      continue;
+    }
+    for (const [property, value] of Object.entries(meta.presetStyle)) {
+      missingPresetStyles.push({
+        component,
+        property: property as StyleProperty,
+        value,
+      });
+    }
+  }
+  return missingPresetStyles;
+};
+
+export const StylesItem = z.object({
+  breakpointId: z.string(),
+  instanceId: z.string(),
+  // @todo can't figure out how to make property to be enum
+  property: z.string() as z.ZodType<StyleProperty>,
+  value: SharedStyleValue as z.ZodType<StyleValue>,
+});
+
+export type StylesItem = z.infer<typeof StylesItem>;
+
+export const Styles = z.array(StylesItem);
+
+export type Styles = z.infer<typeof Styles>;

package/src/db/types.ts

@@ -1,10 +1,13 @@
 import type { InstanceProps as DbInstanceProps } from "@webstudio-is/prisma-client";
 import type { UserProp } from "../user-props";
 import type { Instance } from "./instance";
+import type { PresetStyles, Styles } from "./style";
 
 export type Tree = {
   id: string;
   root: Instance;
+  presetStyles: PresetStyles;
+  styles: Styles;
 };
 
 export type Props = {
@@ -13,6 +16,7 @@ export type Props = {
   instanceId: string;
   treeId: string;
 };
+
 export type InstanceProps = Omit<DbInstanceProps, "props"> & {
   props: Array<UserProp>;
 };

package/src/tree/wrapper-component.tsx

@@ -41,10 +41,16 @@ export const WrapperComponent = ({
 }: WrapperComponentProps) => {
   const Component = getComponent(instance.component);
   const userProps = useUserProps(instance.id);
-  const props = { ...userProps, ...rest, [idAttribute]: instance.id };
+  const props = {
+    ...userProps,
+    ...rest,
+    [idAttribute]: instance.id,
+    [componentAttribute]: instance.component,
+  };
   return (
     <Component {...props}>{renderWrapperComponentChildren(children)}</Component>
   );
 };
 
 export const idAttribute = "data-ws-id";
+export const componentAttribute = "data-ws-component";

package/src/user-props/all-user-props.ts

@@ -1,22 +1,26 @@
 import { useRef } from "react";
-import { createValueContainer, useValue } from "react-nano-state";
+import { atom } from "nanostores";
+import { useStore } from "@nanostores/react";
 import type { InstanceProps, Instance } from "../db";
+import { UserProp } from "./schema";
 
-export type AllUserProps = { [id: Instance["id"]]: InstanceProps };
+export type AllUserProps = {
+  [id: Instance["id"]]: UserProp[];
+};
 
-export const allUserPropsContainer = createValueContainer<AllUserProps>({});
+export const allUserPropsContainer = atom<AllUserProps>({});
 
 export const useAllUserProps = (initialUserProps?: Array<InstanceProps>) => {
   // @todo ssr workaround for https://github.com/webstudio-is/webstudio-designer/issues/213
   const ref = useRef(false);
   if (ref.current === false && initialUserProps !== undefined) {
     const propsMap: AllUserProps = {};
-    for (const props of initialUserProps) {
-      propsMap[props.instanceId] = props;
+    for (const item of initialUserProps) {
+      propsMap[item.instanceId] = item.props;
     }
     //We don't need to trigger rerender when setting the initial value
-    allUserPropsContainer.value = propsMap;
+    allUserPropsContainer.set(propsMap);
     ref.current = true;
   }
-  return useValue(allUserPropsContainer);
+  return useStore(allUserPropsContainer);
 };

package/src/user-props/index.ts

@@ -1,4 +1,3 @@
 export * from "./all-user-props";
 export * from "./use-user-props";
-export * from "./types";
 export * from "./schema";

package/src/user-props/use-user-props-asset.ts

@@ -11,14 +11,14 @@ export const useUserPropsAsset = (
   instanceId: Instance["id"],
   propName: UserProp["prop"]
 ): Asset | undefined => {
-  const [allUserProps] = useAllUserProps();
+  const allUserProps = useAllUserProps();
 
   const propsData = allUserProps[instanceId];
   const asset = useMemo(() => {
     if (propsData == null) {
       return undefined;
     }
-    const prop = propsData.props.find((prop) => prop.prop === propName);
+    const prop = propsData.find((prop) => prop.prop === propName);
 
     if (prop == null) {
       return undefined;

package/src/user-props/use-user-props.ts

@@ -10,7 +10,7 @@ type UserProps = { [prop: UserProp["prop"]]: string | number | boolean };
  * up to date with props panel.
  */
 export const useUserProps = (instanceId: Instance["id"]) => {
-  const [allUserProps] = useAllUserProps();
+  const allUserProps = useAllUserProps();
 
   const propsData = allUserProps[instanceId];
   const props = useMemo(() => {
@@ -19,7 +19,7 @@ export const useUserProps = (instanceId: Instance["id"]) => {
     }
     const result: UserProps = {};
 
-    for (const userProp of propsData.props) {
+    for (const userProp of propsData) {
       if (userProp.type !== "asset") {
         result[userProp.prop] = userProp.value;
       }

package/lib/cjs/user-props/types.cjs

@@ -1,16 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var types_exports = {};
-module.exports = __toCommonJS(types_exports);

package/src/user-props/types.ts

@@ -1,13 +0,0 @@
-import type { InstanceProps, Instance } from "../db";
-import { UserProp } from "./schema";
-
-export type UserPropsUpdates = {
-  instanceId: Instance["id"];
-  propsId?: InstanceProps["id"];
-  updates: Array<UserProp>;
-};
-
-export type DeleteProp = {
-  instanceId: Instance["id"];
-  propId: UserProp["id"];
-};