@webstudio-is/react-sdk 0.7.0 → 0.7.2

package/lib/components/text-block.stories.d.ts

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

package/lib/components/text-block.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-block.stories.d.ts","sourceRoot":"","sources":["../../src/components/text-block.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;;AAItE,wBAI8C;AAM9C,eAAO,MAAM,SAAS,gOAAoB,CAAC"}
+{"version":3,"file":"text-block.stories.d.ts","sourceRoot":"","sources":["../../src/components/text-block.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;;AAGtE,wBAG8C;AAM9C,eAAO,MAAM,SAAS,kRAAoB,CAAC"}

package/lib/components/text-block.stories.js

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

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,8 +1,7 @@
 export * from "./css";
 export * from "./tree";
-export * from "./stitches";
 export * as components from "./components";
-export * as componentsMeta from "./components/meta";
+export * from "./components/meta";
 export * from "./user-props";
 export * from "./pubsub";
 export * from "./db";

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,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,MAAM,CAAC;AACrB,cAAc,SAAS,CAAC"}

package/lib/index.js

@@ -26,12 +26,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentsMeta = exports.components = void 0;
+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("./components/meta"), exports);
 __exportStar(require("./user-props"), exports);
 __exportStar(require("./pubsub"), exports);
 __exportStar(require("./db"), 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"}

package/lib/tree/session-storage-polyfill.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SessionStoragePolyfill = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// This is a temporary work around for https://github.com/remix-run/remix/issues/3659
+// The code is based on this discussion https://bugs.chromium.org/p/chromium/issues/detail?id=357625
+const polyfill = function () {
+    try {
+        const key = "__session_storage_availability_test__";
+        sessionStorage.setItem(key, "test"); // test
+        sessionStorage.removeItem(key); // cleanup
+    }
+    catch (error) {
+        alert('It looks like you have disabled cookies in your browser. Webstudio designer may not work properly.\n\nTo enable cookies, go to "Setting" > "Privacy and security" > "Cookies and other site data", and make sure neither "Block all cookies" nor "Block third-party cookies" are selected.\n\nRead more at https://support.google.com/chrome/answer/95647');
+        const data = new Map();
+        Object.defineProperty(window, "sessionStorage", {
+            value: {
+                setItem: (key, val) => {
+                    // eslint-disable-next-line no-console
+                    console.warn(`Session storage is unavailable due to Error "${error.message}". A polyfill is used to set value of "${key}". The value will be lost when the page is reloaded.`);
+                    data.set(key, String(val));
+                },
+                getItem: (key) => {
+                    // eslint-disable-next-line no-console
+                    console.warn(`Session storage is unavailable due to Error "${error.message}". A polyfill is used to get value of "${key}". The value will be undefined if the page was reloaded after it was set.`);
+                    return data.get(key);
+                },
+                removeItem: (key) => {
+                    data.delete(key);
+                },
+                clear: () => {
+                    data.clear();
+                },
+            },
+        });
+    }
+}.toString();
+const SessionStoragePolyfill = () => ((0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: `(${polyfill})()` }, suppressHydrationWarning: true }));
+exports.SessionStoragePolyfill = SessionStoragePolyfill;

package/lib/tree/wrapper-component.d.ts

@@ -1,12 +1,12 @@
 import type { Instance } from "../db";
-import { type CSS } from "../stitches";
 import type { OnChangeChildren } from "./create-elements-tree";
 export declare const renderWrapperComponentChildren: (children: Array<JSX.Element | string> | undefined) => Array<JSX.Element | string | Array<JSX.Element | string>> | undefined;
-export declare type WrapperComponentProps = {
+declare type WrapperComponentProps = {
     instance: Instance;
-    css: CSS;
     children: Array<JSX.Element | string>;
     onChangeChildren?: OnChangeChildren;
 };
-export declare const WrapperComponent: ({ instance, css, onChangeChildren, children, ...rest }: WrapperComponentProps) => JSX.Element;
+export declare const WrapperComponent: ({ instance, onChangeChildren, children, ...rest }: WrapperComponentProps) => JSX.Element;
+export declare const idAttribute = "data-ws-id";
+export {};
 //# sourceMappingURL=wrapper-component.d.ts.map

package/lib/tree/wrapper-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wrapper-component.d.ts","sourceRoot":"","sources":["../../src/tree/wrapper-component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,KAAK,GAAG,EAAoB,MAAM,aAAa,CAAC;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAY/D,eAAO,MAAM,8BAA8B,aAC/B,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,SAAS,KAChD,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,GAAG,SAO9D,CAAC;AAEF,oBAAY,qBAAqB,GAAG;IAClC,QAAQ,EAAE,QAAQ,CAAC;IACnB,GAAG,EAAE,GAAG,CAAC;IACT,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;IACtC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,gBAAgB,2DAM1B,qBAAqB,gBASvB,CAAC"}
+{"version":3,"file":"wrapper-component.d.ts","sourceRoot":"","sources":["../../src/tree/wrapper-component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAY/D,eAAO,MAAM,8BAA8B,aAC/B,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,SAAS,KAChD,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,GAAG,SAO9D,CAAC;AAEF,aAAK,qBAAqB,GAAG;IAC3B,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;IACtC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,gBAAgB,sDAK1B,qBAAqB,gBAOvB,CAAC;AAEF,eAAO,MAAM,WAAW,eAAe,CAAC"}

package/lib/tree/wrapper-component.js

@@ -23,12 +23,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WrapperComponent = exports.renderWrapperComponentChildren = void 0;
+exports.idAttribute = exports.WrapperComponent = exports.renderWrapperComponentChildren = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const components = __importStar(require("../components"));
 const use_user_props_1 = require("../user-props/use-user-props");
-const stitches_1 = require("../stitches");
 const renderText = (text) => {
     const lines = text.split("\n");
     return lines.map((line, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [line, index < lines.length - 1 ? (0, jsx_runtime_1.jsx)("br", {}) : null] }, index)));
@@ -43,11 +42,12 @@ const renderWrapperComponentChildren = (children) => {
     });
 };
 exports.renderWrapperComponentChildren = renderWrapperComponentChildren;
-const WrapperComponent = ({ instance, css, onChangeChildren, // prevent it from passing to sdk component
+const WrapperComponent = ({ instance, onChangeChildren, // prevent it from passing to sdk component
 children, ...rest }) => {
-    const className = (0, react_1.useMemo)(() => (0, stitches_1.css)(css)(), [css]);
     const { Component } = components[instance.component];
     const userProps = (0, use_user_props_1.useUserProps)(instance.id);
-    return ((0, jsx_runtime_1.jsx)(Component, { ...userProps, ...rest, id: instance.id, className: className, children: (0, exports.renderWrapperComponentChildren)(children) }));
+    const props = { ...userProps, ...rest, [exports.idAttribute]: instance.id };
+    return ((0, jsx_runtime_1.jsx)(Component, { ...props, children: (0, exports.renderWrapperComponentChildren)(children) }));
 };
 exports.WrapperComponent = WrapperComponent;
+exports.idAttribute = "data-ws-id";