@webstudio-is/react-sdk 0.7.0 → 0.7.1

package/lib/components/superscript.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof import("react").HTMLAttributes<HTMLElement>> & import("react").RefAttributes<HTMLElement>>>;
+export default _default;
+export declare const Superscript: ComponentStory<import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof import("react").HTMLAttributes<HTMLElement>> & import("react").RefAttributes<HTMLElement>>>;
+//# sourceMappingURL=superscript.stories.d.ts.map

package/lib/components/superscript.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"superscript.stories.d.ts","sourceRoot":"","sources":["../../src/components/superscript.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;;AAItE,wBAIgD;AAMhD,eAAO,MAAM,WAAW,sQAAoB,CAAC"}

package/lib/components/superscript.stories.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Superscript = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const superscript_1 = require("./superscript");
+const superscript_props_json_1 = __importDefault(require("./superscript.props.json"));
+exports.default = {
+    title: "Components/Superscript",
+    component: superscript_1.Superscript,
+    argTypes: superscript_props_json_1.default,
+};
+const Template = (args) => ((0, jsx_runtime_1.jsx)(superscript_1.Superscript, { ...args }));
+exports.Superscript = Template.bind({});
+exports.Superscript.args = {
+    children: "some superscript text",
+};

package/lib/components/superscript.ws.d.ts

@@ -0,0 +1,5 @@
+import type { WsComponentMeta } from "./component-type";
+import { Superscript } from "./superscript";
+declare const meta: WsComponentMeta<typeof Superscript>;
+export default meta;
+//# sourceMappingURL=superscript.ws.d.ts.map

package/lib/components/superscript.ws.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"superscript.ws.d.ts","sourceRoot":"","sources":["../../src/components/superscript.ws.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,QAAA,MAAM,IAAI,EAAE,eAAe,CAAC,OAAO,WAAW,CAQ7C,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/superscript.ws.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const icons_1 = require("@webstudio-is/icons");
+const superscript_1 = require("./superscript");
+const meta = {
+    Icon: icons_1.SuperscriptIcon,
+    Component: superscript_1.Superscript,
+    canAcceptChildren: false,
+    isContentEditable: false,
+    label: "Superscript Text",
+    isInlineOnly: true,
+    isListed: false,
+};
+exports.default = meta;

package/lib/components/text-block.props.json

@@ -447,10 +447,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "yes",
-            "no"
-        ]
+        "options": ["yes", "no"]
     },
     "radioGroup": {
         "defaultValue": null,
@@ -739,6 +736,7 @@
         }
     },
     "color": {
+        "defaultValue": null,
         "description": "",
         "name": "color",
         "parent": {
@@ -943,10 +941,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "on",
-            "off"
-        ]
+        "options": ["on", "off"]
     },
     "inputMode": {
         "defaultValue": null,
@@ -1109,12 +1104,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "list",
-            "none",
-            "inline",
-            "both"
-        ]
+        "options": ["list", "none", "inline", "both"]
     },
     "aria-busy": {
         "defaultValue": null,
@@ -1378,14 +1368,7 @@
         "control": {
             "type": "select"
         },
-        "options": [
-            "link",
-            "none",
-            "copy",
-            "execute",
-            "move",
-            "popup"
-        ]
+        "options": ["link", "none", "copy", "execute", "move", "popup"]
     },
     "aria-errormessage": {
         "defaultValue": null,
@@ -1662,11 +1645,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "off",
-            "assertive",
-            "polite"
-        ]
+        "options": ["off", "assertive", "polite"]
     },
     "aria-modal": {
         "defaultValue": null,
@@ -1764,10 +1743,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "horizontal",
-            "vertical"
-        ]
+        "options": ["horizontal", "vertical"]
     },
     "aria-owns": {
         "defaultValue": null,
@@ -2136,12 +2112,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "none",
-            "ascending",
-            "descending",
-            "other"
-        ]
+        "options": ["none", "ascending", "descending", "other"]
     },
     "aria-valuemax": {
         "defaultValue": null,

package/lib/css/breakpoints.d.ts

@@ -1,4 +1,4 @@
-import { type Breakpoint } from "./schema";
+import type { Breakpoint } from "@webstudio-is/css-data";
 export declare type BaseBreakpoint = Pick<Breakpoint, "label" | "minWidth">;
 export declare const initialBreakpoints: Array<BaseBreakpoint>;
 //# sourceMappingURL=breakpoints.d.ts.map

package/lib/css/breakpoints.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../src/css/breakpoints.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,oBAAY,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAEpE,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,cAAc,CAKpD,CAAC"}
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../src/css/breakpoints.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEzD,oBAAY,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAEpE,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,cAAc,CAKpD,CAAC"}

package/lib/css/categories.d.ts

@@ -56,8 +56,6 @@ export declare const categories: {
     };
 };
 export declare const propertyCategoryMap: {
-    clip: "position" | "layout" | "flexChild" | "gridChild" | "spacing" | "size" | "typography" | "backgrounds" | "borders" | "effects" | "other";
-    top: "position" | "layout" | "flexChild" | "gridChild" | "spacing" | "size" | "typography" | "backgrounds" | "borders" | "effects" | "other";
     accentColor: "position" | "layout" | "flexChild" | "gridChild" | "spacing" | "size" | "typography" | "backgrounds" | "borders" | "effects" | "other";
     alignContent: "position" | "layout" | "flexChild" | "gridChild" | "spacing" | "size" | "typography" | "backgrounds" | "borders" | "effects" | "other";
     alignItems: "position" | "layout" | "flexChild" | "gridChild" | "spacing" | "size" | "typography" | "backgrounds" | "borders" | "effects" | "other";
@@ -142,6 +140,7 @@ export declare const propertyCategoryMap: {
     captionSide: "position" | "layout" | "flexChild" | "gridChild" | "spacing" | "size" | "typography" | "backgrounds" | "borders" | "effects" | "other";
     caretColor: "position" | "layout" | "flexChild" | "gridChild" | "spacing" | "size" | "typography" | "backgrounds" | "borders" | "effects" | "other";
     clear: "position" | "layout" | "flexChild" | "gridChild" | "spacing" | "size" | "typography" | "backgrounds" | "borders" | "effects" | "other";
+    clip: "position" | "layout" | "flexChild" | "gridChild" | "spacing" | "size" | "typography" | "backgrounds" | "borders" | "effects" | "other";
     clipPath: "position" | "layout" | "flexChild" | "gridChild" | "spacing" | "size" | "typography" | "backgrounds" | "borders" | "effects" | "other";
     color: "position" | "layout" | "flexChild" | "gridChild" | "spacing" | "size" | "typography" | "backgrounds" | "borders" | "effects" | "other";
     colorAdjust: "position" | "layout" | "flexChild" | "gridChild" | "spacing" | "size" | "typography" | "backgrounds" | "borders" | "effects" | "other";
@@ -380,6 +379,7 @@ export declare const propertyCategoryMap: {
     textTransform: "position" | "layout" | "flexChild" | "gridChild" | "spacing" | "size" | "typography" | "backgrounds" | "borders" | "effects" | "other";
     textUnderlineOffset: "position" | "layout" | "flexChild" | "gridChild" | "spacing" | "size" | "typography" | "backgrounds" | "borders" | "effects" | "other";
     textUnderlinePosition: "position" | "layout" | "flexChild" | "gridChild" | "spacing" | "size" | "typography" | "backgrounds" | "borders" | "effects" | "other";
+    top: "position" | "layout" | "flexChild" | "gridChild" | "spacing" | "size" | "typography" | "backgrounds" | "borders" | "effects" | "other";
     touchAction: "position" | "layout" | "flexChild" | "gridChild" | "spacing" | "size" | "typography" | "backgrounds" | "borders" | "effects" | "other";
     transform: "position" | "layout" | "flexChild" | "gridChild" | "spacing" | "size" | "typography" | "backgrounds" | "borders" | "effects" | "other";
     transformBox: "position" | "layout" | "flexChild" | "gridChild" | "spacing" | "size" | "typography" | "backgrounds" | "borders" | "effects" | "other";

package/lib/css/get-browser-style.d.ts

@@ -1,3 +1,3 @@
-import type { Style } from "./schema";
+import type { Style } from "@webstudio-is/css-data";
 export declare const getBrowserStyle: (element?: Element) => Style;
 //# sourceMappingURL=get-browser-style.d.ts.map

package/lib/css/get-browser-style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-browser-style.d.ts","sourceRoot":"","sources":["../../src/css/get-browser-style.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAoB,MAAM,UAAU,CAAC;AA6BxD,eAAO,MAAM,eAAe,aAAc,OAAO,KAAG,KAYnD,CAAC"}
+{"version":3,"file":"get-browser-style.d.ts","sourceRoot":"","sources":["../../src/css/get-browser-style.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,KAAK,EAGN,MAAM,wBAAwB,CAAC;AA4BhC,eAAO,MAAM,eAAe,aAAc,OAAO,KAAG,KAiBnD,CAAC"}

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getBrowserStyle = void 0;
-const properties_1 = require("./properties");
-const units_1 = require("./units");
-const unitRegex = new RegExp(`${units_1.units.join("|")}`);
+const detect_font_1 = require("detect-font");
+const css_data_1 = require("@webstudio-is/css-data");
+const unitRegex = new RegExp(`${css_data_1.units.join("|")}`);
 // @todo use a parser
 const parseValue = (property, value) => {
     const number = parseFloat(value);
@@ -17,7 +17,7 @@ const parseValue = (property, value) => {
         };
     }
     if (number === 0) {
-        return properties_1.properties[property].initial;
+        return css_data_1.properties[property].initial;
     }
     return {
         type: "unit",
@@ -31,13 +31,18 @@ const getBrowserStyle = (element) => {
         return browserStyle;
     let knownProperty;
     const computedStyle = getComputedStyle(element);
-    for (knownProperty in properties_1.properties) {
+    for (knownProperty in css_data_1.properties) {
         if (knownProperty in computedStyle === false)
             continue;
         // Typescript doesn't know we can access CSSStyleDeclaration properties by keys
         const computedValue = computedStyle[knownProperty];
         browserStyle[knownProperty] = parseValue(knownProperty, computedValue);
     }
+    // We need a single font-family that is actually rendered. Computed style will return a list of potential fonts.
+    browserStyle.fontFamily = {
+        type: "fontFamily",
+        value: [(0, detect_font_1.detectFont)(element)],
+    };
     return browserStyle;
 };
 exports.getBrowserStyle = getBrowserStyle;

package/lib/css/index.d.ts

@@ -1,9 +1,4 @@
-export * from "./properties";
-export * from "./units";
-export * from "./types";
-export * from "./schema";
 export * from "./get-browser-style";
 export * from "./categories";
-export * from "./keyword-values";
 export * from "./breakpoints";
 //# sourceMappingURL=index.d.ts.map

package/lib/css/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/css/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/css/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}

package/lib/css/index.js

@@ -14,11 +14,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./properties"), exports);
-__exportStar(require("./units"), exports);
-__exportStar(require("./types"), exports);
-__exportStar(require("./schema"), exports);
 __exportStar(require("./get-browser-style"), exports);
 __exportStar(require("./categories"), exports);
-__exportStar(require("./keyword-values"), exports);
 __exportStar(require("./breakpoints"), exports);

package/lib/db/instance.d.ts

@@ -1,6 +1,6 @@
+import { CssRule } from "@webstudio-is/css-data";
 import { z } from "zod";
 import * as components from "../components";
-import { CssRule } from "../css";
 export declare type BaseInstance = {
     id: string;
     component: keyof typeof components;

package/lib/db/instance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"instance.d.ts","sourceRoot":"","sources":["../../src/db/instance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,UAAU,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIjC,oBAAY,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,OAAO,UAAU,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;CAC1B,CAAC;AAEF,oBAAY,QAAQ,GAAG,YAAY,GAAG;IACpC,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,cAAc,aAAc,QAAQ,KAAG,YAMnD,CAAC;AAEF,eAAO,MAAM,QAAQ,6CASG,CAAC"}
+{"version":3,"file":"instance.d.ts","sourceRoot":"","sources":["../../src/db/instance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,UAAU,MAAM,eAAe,CAAC;AAI5C,oBAAY,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,OAAO,UAAU,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;CAC1B,CAAC;AAEF,oBAAY,QAAQ,GAAG,YAAY,GAAG;IACpC,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,cAAc,aAAc,QAAQ,KAAG,YAMnD,CAAC;AAEF,eAAO,MAAM,QAAQ,6CASG,CAAC"}

package/lib/db/instance.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Instance = exports.toBaseInstance = void 0;
+const css_data_1 = require("@webstudio-is/css-data");
 const zod_1 = require("zod");
-const css_1 = require("../css");
 const toBaseInstance = (instance) => {
     return {
         id: instance.id,
@@ -15,7 +15,7 @@ exports.Instance = zod_1.z.lazy(() => zod_1.z.object({
     id: zod_1.z.string(),
     component: zod_1.z.string(),
     children: zod_1.z.array(zod_1.z.union([exports.Instance, zod_1.z.string()])),
-    cssRules: zod_1.z.array(css_1.CssRule),
+    cssRules: zod_1.z.array(css_data_1.CssRule),
 })
 // @todo can't figure out how to make component to be z.enum(Object.keys(components))
 );

package/lib/index.d.ts

@@ -1,6 +1,5 @@
 export * from "./css";
 export * from "./tree";
-export * from "./stitches";
 export * as components from "./components";
 export * as componentsMeta from "./components/meta";
 export * from "./user-props";

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,cAAc,MAAM,mBAAmB,CAAC;AACpD,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,MAAM,CAAC;AACrB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,cAAc,MAAM,mBAAmB,CAAC;AACpD,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,MAAM,CAAC;AACrB,cAAc,SAAS,CAAC"}

package/lib/index.js

@@ -29,7 +29,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentsMeta = exports.components = void 0;
 __exportStar(require("./css"), exports);
 __exportStar(require("./tree"), exports);
-__exportStar(require("./stitches"), exports);
 exports.components = __importStar(require("./components"));
 exports.componentsMeta = __importStar(require("./components/meta"));
 __exportStar(require("./user-props"), exports);

package/lib/pubsub/create.d.ts

@@ -24,5 +24,6 @@ export declare const createPubsub: <PublishMap>() => {
      * 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;
+    useSubscribeAll(onAction: <Type_3 extends keyof PublishMap>(type: Type_3, payload: PublishMap[Type_3]) => void): void;
 };
 //# sourceMappingURL=create.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../src/pubsub/create.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;IA0BrB;;OAEG;;;;;;;;IAMH;;OAEG;;;;;;;;IAeH;;OAEG;2GAGwC,IAAI;CAUlD,CAAC"}
+{"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../src/pubsub/create.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;IA0BrB;;OAEG;;;;;;;;IAMH;;OAEG;;;;;;;;IAeH;;OAEG;2GAGwC,IAAI;8GAcxC,IAAI;CAUd,CAAC"}

package/lib/pubsub/create.js

@@ -53,6 +53,14 @@ const createPubsub = () => {
                 };
             }, [type, onAction]);
         },
+        useSubscribeAll(onAction) {
+            (0, react_1.useEffect)(() => {
+                emitter.on("*", onAction);
+                return () => {
+                    emitter.off("*", onAction);
+                };
+            }, [onAction]);
+        },
     };
 };
 exports.createPubsub = createPubsub;

package/lib/remix/handle-request.server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"handle-request.server.d.ts","sourceRoot":"","sources":["../../src/remix/handle-request.server.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,eAAO,MAAM,aAAa,YACf,OAAO,sBACI,MAAM,mBACT,OAAO,gBACV,YAAY,aAY3B,CAAC"}
+{"version":3,"file":"handle-request.server.d.ts","sourceRoot":"","sources":["../../src/remix/handle-request.server.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,eAAO,MAAM,aAAa,YACf,OAAO,sBACI,MAAM,mBACT,OAAO,gBACV,YAAY,aAY3B,CAAC"}

package/lib/remix/handle-request.server.js

@@ -4,11 +4,10 @@ exports.handleRequest = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const server_1 = require("react-dom/server");
 const react_1 = require("@remix-run/react");
-const insert_critical_css_1 = require("./insert-critical-css");
 const handleRequest = (request, responseStatusCode, responseHeaders, remixContext) => {
     const markup = (0, server_1.renderToString)((0, jsx_runtime_1.jsx)(react_1.RemixServer, { context: remixContext, url: request.url }));
     responseHeaders.set("Content-Type", "text/html");
-    return new Response("<!DOCTYPE html>" + (0, insert_critical_css_1.insertCriticalCss)(markup), {
+    return new Response(`<!DOCTYPE html>${markup}`, {
         status: responseStatusCode,
         headers: responseHeaders,
     });

package/lib/remix/root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/remix/root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,MAAM,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGxE;;GAEG;AACH,eAAO,MAAM,IAAI;YAGP,oBAAoB;iBAgB7B,CAAC"}
+{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/remix/root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,MAAM,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGxE;;GAEG;AACH,eAAO,MAAM,IAAI;YAGP,oBAAoB;iBAiB7B,CAAC"}

package/lib/remix/root.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Root = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@remix-run/react");
-const constants_1 = require("./constants");
+const remix_utils_1 = require("remix-utils");
 /**
  * We are using Outlet prop from index layout when user renders site from a subdomain.
  */
 const Root = ({ Outlet = react_1.Outlet, }) => {
-    return ((0, jsx_runtime_1.jsxs)("html", { lang: "en", children: [(0, jsx_runtime_1.jsxs)("head", { children: [(0, jsx_runtime_1.jsx)("meta", { charSet: "utf-8" }), (0, jsx_runtime_1.jsx)("meta", { name: "viewport", content: "width=device-width,initial-scale=1" }), (0, jsx_runtime_1.jsx)("link", { rel: "icon", href: "/favicon.ico", type: "image/x-icon" }), (0, jsx_runtime_1.jsx)("link", { rel: "shortcut icon", href: "/favicon.ico", type: "image/x-icon" }), (0, jsx_runtime_1.jsx)(react_1.Meta, {}), (0, jsx_runtime_1.jsx)(react_1.Links, {}), typeof document === "undefined" ? constants_1.CRITICAL_CSS_MARKER : null] }), (0, jsx_runtime_1.jsx)(Outlet, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("html", { lang: "en", children: [(0, jsx_runtime_1.jsxs)("head", { children: [(0, jsx_runtime_1.jsx)("meta", { charSet: "utf-8" }), (0, jsx_runtime_1.jsx)("meta", { name: "viewport", content: "width=device-width,initial-scale=1" }), (0, jsx_runtime_1.jsx)("link", { rel: "icon", href: "/favicon.ico", type: "image/x-icon" }), (0, jsx_runtime_1.jsx)("link", { rel: "shortcut icon", href: "/favicon.ico", type: "image/x-icon" }), (0, jsx_runtime_1.jsx)(react_1.Meta, {}), (0, jsx_runtime_1.jsx)(remix_utils_1.DynamicLinks, {}), (0, jsx_runtime_1.jsx)(react_1.Links, {})] }), (0, jsx_runtime_1.jsx)(Outlet, {})] }));
 };
 exports.Root = Root;

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

@@ -1,23 +1,19 @@
+import { type ComponentProps } from "react";
 import type { Instance } from "../db";
-import type { Breakpoint } from "../css";
-import { type WrapperComponentProps } from "./wrapper-component";
+import { WrapperComponent } from "./wrapper-component";
 export declare type ChildrenUpdates = Array<string | {
-    id: Instance["id"];
-    text: string;
-} | {
-    id: Instance["id"];
-    text: string;
+    id: undefined | Instance["id"];
     component: Instance["component"];
-    createInstance: true;
+    children: ChildrenUpdates;
 }>;
 export declare type OnChangeChildren = (change: {
     instanceId: Instance["id"];
     updates: ChildrenUpdates;
 }) => void;
-export declare const createElementsTree: ({ instance, breakpoints, Component, onChangeChildren, }: {
+export declare const createElementsTree: ({ sandbox, instance, Component, onChangeChildren, }: {
+    sandbox?: boolean | undefined;
     instance: Instance;
-    breakpoints: Array<Breakpoint>;
-    Component: (props: WrapperComponentProps) => JSX.Element;
+    Component: (props: ComponentProps<typeof WrapperComponent>) => JSX.Element;
     onChangeChildren?: OnChangeChildren | undefined;
 }) => JSX.Element;
 //# sourceMappingURL=create-elements-tree.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"create-elements-tree.d.ts","sourceRoot":"","sources":["../../src/tree/create-elements-tree.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAGjE,oBAAY,eAAe,GAAG,KAAK,CAC/B,MAAM,GAEN;IAAE,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAEpC;IACE,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;IACjC,cAAc,EAAE,IAAI,CAAC;CACtB,CACJ,CAAC;AAEF,oBAAY,gBAAgB,GAAG,CAAC,MAAM,EAAE;IACtC,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC3B,OAAO,EAAE,eAAe,CAAC;CAC1B,KAAK,IAAI,CAAC;AAEX,eAAO,MAAM,kBAAkB;cAMnB,QAAQ;iBACL,MAAM,UAAU,CAAC;uBACX,qBAAqB,KAAK,WAAW;;iBAsBzD,CAAC"}
+{"version":3,"file":"create-elements-tree.d.ts","sourceRoot":"","sources":["../../src/tree/create-elements-tree.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAIvD,oBAAY,eAAe,GAAG,KAAK,CAC/B,MAAM,GACN;IACE,EAAE,EAAE,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,SAAS,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;IACjC,QAAQ,EAAE,eAAe,CAAC;CAC3B,CACJ,CAAC;AAEF,oBAAY,gBAAgB,GAAG,CAAC,MAAM,EAAE;IACtC,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC3B,OAAO,EAAE,eAAe,CAAC;CAC1B,KAAK,IAAI,CAAC;AAEX,eAAO,MAAM,kBAAkB;;cAOnB,QAAQ;uBACC,eAAe,uBAAuB,CAAC,KAAK,WAAW;;iBAqB3E,CAAC"}

package/lib/tree/create-elements-tree.js

@@ -3,27 +3,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createElementsTree = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const stitches_1 = require("../stitches");
 const react_2 = require("@remix-run/react");
-const createElementsTree = ({ instance, breakpoints, Component, onChangeChildren, }) => {
+const session_storage_polyfill_1 = require("./session-storage-polyfill");
+const createElementsTree = ({ sandbox, instance, Component, onChangeChildren, }) => {
     const children = createInstanceChildrenElements({
         Component,
         children: instance.children,
-        breakpoints,
         onChangeChildren,
     });
     const body = createInstanceElement({
         Component,
         instance,
         children: [
-            (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [children, (0, jsx_runtime_1.jsx)(react_2.ScrollRestoration, {}), (0, jsx_runtime_1.jsx)(react_2.Scripts, {})] }, "children"),
+            (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [children, sandbox && (0, jsx_runtime_1.jsx)(session_storage_polyfill_1.SessionStoragePolyfill, {}), (0, jsx_runtime_1.jsx)(react_2.ScrollRestoration, {}), (0, jsx_runtime_1.jsx)(react_2.Scripts, {})] }, "children"),
         ],
-        breakpoints,
     });
     return body;
 };
 exports.createElementsTree = createElementsTree;
-const createInstanceChildrenElements = ({ children, breakpoints, Component, onChangeChildren, }) => {
+const createInstanceChildrenElements = ({ children, Component, onChangeChildren, }) => {
     const elements = [];
     for (const child of children) {
         if (typeof child === "string") {
@@ -32,13 +30,11 @@ const createInstanceChildrenElements = ({ children, breakpoints, Component, onCh
         }
         const children = createInstanceChildrenElements({
             children: child.children,
-            breakpoints,
             Component,
             onChangeChildren,
         });
         const element = createInstanceElement({
             instance: child,
-            breakpoints,
             Component,
             onChangeChildren,
             children,
@@ -47,11 +43,10 @@ const createInstanceChildrenElements = ({ children, breakpoints, Component, onCh
     }
     return elements;
 };
-const createInstanceElement = ({ Component, instance, children = [], breakpoints, onChangeChildren, }) => {
+const createInstanceElement = ({ Component, instance, children = [], onChangeChildren, }) => {
     const props = {
         instance,
         children,
-        css: (0, stitches_1.toCss)(instance.cssRules, breakpoints),
         key: instance.id,
         onChangeChildren,
     };

package/lib/tree/root.d.ts

@@ -1,19 +1,17 @@
 import type { Tree, InstanceProps } from "../db";
-import type { Breakpoint } from "../css";
-import { type WrapperComponentProps } from "./wrapper-component";
+import { WrapperComponent } from "./wrapper-component";
 import type { Asset } from "@webstudio-is/asset-uploader";
+import { type ComponentProps } from "react";
+import type { Breakpoint } from "@webstudio-is/css-data";
 export declare type Data = {
     tree: Tree | null;
     breakpoints: Array<Breakpoint>;
     props: Array<InstanceProps>;
     assets: Array<Asset>;
 };
-export declare const useGlobalStyles: ({ assets }: {
-    assets: Array<Asset>;
-}) => void;
 declare type RootProps = {
     data: Data;
-    Component?: (props: WrapperComponentProps) => JSX.Element;
+    Component?: (props: ComponentProps<typeof WrapperComponent>) => JSX.Element;
 };
 export declare const InstanceRoot: ({ data, Component, }: RootProps) => JSX.Element | null;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/tree/root.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAGzC,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,qBAAqB,CAAC;AAM7B,OAAO,KAAK,EAAE,KAAK,EAAa,MAAM,8BAA8B,CAAC;AAGrE,oBAAY,IAAI,GAAG;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,WAAW,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC/B,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAC5B,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,eAAe;YAA0B,MAAM,KAAK,CAAC;UAmBjE,CAAC;AAEF,aAAK,SAAS,GAAG;IACf,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,GAAG,CAAC,OAAO,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,YAAY,yBAGtB,SAAS,KAAG,WAAW,GAAG,IAY5B,CAAC"}
+{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/tree/root.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEzD,oBAAY,IAAI,GAAG;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,WAAW,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC/B,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAC5B,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;CACtB,CAAC;AAEF,aAAK,SAAS,GAAG;IACf,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC;CAC7E,CAAC;AAEF,eAAO,MAAM,YAAY,yBAGtB,SAAS,KAAG,WAAW,GAAG,IAS5B,CAAC"}

package/lib/tree/root.js

@@ -1,38 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InstanceRoot = exports.useGlobalStyles = void 0;
+exports.InstanceRoot = void 0;
 const user_props_1 = require("../user-props/");
-const stitches_1 = require("../stitches");
 const create_elements_tree_1 = require("./create-elements-tree");
 const wrapper_component_1 = require("./wrapper-component");
-const fonts_1 = require("@webstudio-is/fonts");
-const react_1 = require("react");
-const useGlobalStyles = ({ assets }) => {
-    const ref = (0, react_1.useRef)();
-    // This may look weird, but globalCss API doesn't allow us creating global styles with data,
-    // so we have to manually ensure calling it only once
-    if (ref.current === assets)
-        return;
-    const fontAssets = assets.filter((asset) => fonts_1.FONT_FORMATS.has(asset.format));
-    (0, stitches_1.globalCss)({
-        "@font-face": (0, fonts_1.getFontFaces)(fontAssets),
-        html: {
-            height: "100%",
-        },
-    })();
-    ref.current = assets;
-};
-exports.useGlobalStyles = useGlobalStyles;
 const InstanceRoot = ({ data, Component, }) => {
     if (data.tree === null) {
         throw new Error("Tree is null");
     }
-    (0, stitches_1.setBreakpoints)(data.breakpoints);
-    (0, exports.useGlobalStyles)({ assets: data.assets });
     (0, user_props_1.useAllUserProps)(data.props);
     return (0, create_elements_tree_1.createElementsTree)({
         instance: data.tree.root,
-        breakpoints: data.breakpoints,
         Component: Component ?? wrapper_component_1.WrapperComponent,
     });
 };

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

@@ -0,0 +1,2 @@
+export declare const SessionStoragePolyfill: () => JSX.Element;
+//# sourceMappingURL=session-storage-polyfill.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"session-storage-polyfill.d.ts","sourceRoot":"","sources":["../../src/tree/session-storage-polyfill.tsx"],"names":[],"mappings":"AA4CA,eAAO,MAAM,sBAAsB,mBAKlC,CAAC"}