@webstudio-is/react-sdk 0.5.1 → 0.6.1

package/lib/canvas/canvas.d.ts

@@ -0,0 +1,8 @@
+import { Outlet as DefaultOutlet } from "@remix-run/react";
+/**
+ * We are using Outlet prop from index layout when user renders site from a subdomain.
+ */
+export declare const Root: ({ Outlet, }: {
+    Outlet: typeof DefaultOutlet;
+}) => JSX.Element;
+//# sourceMappingURL=canvas.d.ts.map

package/lib/canvas/canvas.d.ts.map

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

package/lib/canvas/canvas.js

@@ -0,0 +1,13 @@
+"use strict";
+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 __1 = require("..");
+/**
+ * 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, {}), (0, jsx_runtime_1.jsx)(__1.CriticalCss, {})] }), (0, jsx_runtime_1.jsx)(Outlet, {})] }));
+};
+exports.Root = Root;

package/lib/canvas/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./canvas";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/canvas/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/lib/canvas/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./canvas"), exports);

package/lib/css/categories.d.ts

@@ -1,7 +1,7 @@
 export declare const categories: {
     layout: {
         label: string;
-        properties: readonly ["display", "flexDirection", "flexWrap", "alignItems", "justifyContent", "placeContent", "justifyItems", "alignContent", "rowGap", "columnGap", "gridAutoFlow", "gridAutoRows", "gridAutoColumns", "gridTemplateColumns", "gridTemplateRows", "gridTemplateAreas"];
+        properties: readonly ["display", "flexDirection", "flexWrap", "alignItems", "justifyContent", "alignContent", "placeContent", "justifyItems", "rowGap", "columnGap", "gridAutoFlow", "gridAutoRows", "gridAutoColumns", "gridTemplateColumns", "gridTemplateRows", "gridTemplateAreas"];
         moreFrom: string;
     };
     flexChild: {

package/lib/css/categories.js

@@ -9,10 +9,10 @@ const layout = [
     // Flex or grid
     "alignItems",
     "justifyContent",
+    "alignContent",
     // Grid
     "placeContent",
     "justifyItems",
-    "alignContent",
     "rowGap",
     "columnGap",
     "gridAutoFlow",

package/lib/css/properties.d.ts

@@ -838,8 +838,9 @@ export declare const properties: {
     readonly columnGap: {
         readonly inherited: false;
         readonly initial: {
-            readonly type: "keyword";
-            readonly value: "normal";
+            readonly type: "unit";
+            readonly value: 0;
+            readonly unit: "px";
         };
         readonly popularity: 0.09282422;
         readonly appliesTo: "multiColumnElementsFlexContainersGridContainers";
@@ -2413,8 +2414,9 @@ export declare const properties: {
     readonly rowGap: {
         readonly inherited: false;
         readonly initial: {
-            readonly type: "keyword";
-            readonly value: "normal";
+            readonly type: "unit";
+            readonly value: 0;
+            readonly unit: "px";
         };
         readonly popularity: 0.01955862;
         readonly appliesTo: "multiColumnElementsFlexContainersGridContainers";

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

@@ -1 +1 @@
-{"version":3,"file":"properties.d.ts","sourceRoot":"","sources":["../../src/css/properties.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2nGb,CAAC"}
+{"version":3,"file":"properties.d.ts","sourceRoot":"","sources":["../../src/css/properties.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6nGb,CAAC"}

package/lib/css/properties.js

@@ -842,8 +842,9 @@ exports.properties = {
     "columnGap": {
         "inherited": false,
         "initial": {
-            "type": "keyword",
-            "value": "normal"
+            "type": "unit",
+            "value": 0,
+            "unit": "px"
         },
         "popularity": 0.09282422,
         "appliesTo": "multiColumnElementsFlexContainersGridContainers"
@@ -2417,8 +2418,9 @@ exports.properties = {
     "rowGap": {
         "inherited": false,
         "initial": {
-            "type": "keyword",
-            "value": "normal"
+            "type": "unit",
+            "value": 0,
+            "unit": "px"
         },
         "popularity": 0.01955862,
         "appliesTo": "multiColumnElementsFlexContainersGridContainers"

package/lib/index.d.ts

@@ -6,4 +6,5 @@ export * as componentsMeta from "./components/meta";
 export * from "./user-props";
 export * from "./pubsub";
 export * from "./db";
+export * from "./canvas";
 //# sourceMappingURL=index.d.ts.map

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"}
+{"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,UAAU,CAAC"}

package/lib/index.js

@@ -35,3 +35,4 @@ exports.componentsMeta = __importStar(require("./components/meta"));
 __exportStar(require("./user-props"), exports);
 __exportStar(require("./pubsub"), exports);
 __exportStar(require("./db"), exports);
+__exportStar(require("./canvas"), exports);

package/lib/pubsub/create.d.ts

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

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

@@ -0,0 +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"}

package/lib/pubsub/create.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPubsub = void 0;
+const mitt_1 = __importDefault(require("mitt"));
+const react_1 = require("react");
+const createPubsub = () => {
+    // `mitt` has a somewhat annoying overload for `*` type that makes it hard to wrap in a generic context
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const emitter = (0, mitt_1.default)();
+    if (typeof window === "object") {
+        window.addEventListener("message", (event) => {
+            // @todo this has no type safety built in, could be anything from any source.
+            // we could potentially maintain a list of valid event types at runtime
+            // at the very least we could add a brand property or something to our events
+            if (typeof event.data?.type === "string") {
+                emitter.emit(event.data.type, event.data.payload);
+            }
+        }, false);
+    }
+    return {
+        /**
+         * To publish a postMessage event on the current window and parent window from the iframe.
+         */
+        publish(action) {
+            window.parent.postMessage(action, "*");
+            window.postMessage(action, "*");
+        },
+        /**
+         * To publish a postMessage event on the iframe and parent window from the parent window.
+         */
+        usePublish() {
+            const iframeRef = (0, react_1.useRef)(null);
+            const publishCallback = (0, react_1.useCallback)((action) => {
+                const element = iframeRef.current;
+                if (element?.contentWindow == null)
+                    return;
+                element.contentWindow.postMessage(action, "*");
+                window.postMessage(action, "*");
+            }, [iframeRef]);
+            return [publishCallback, iframeRef];
+        },
+        /**
+         * To subscribe a message event on the current window.
+         */
+        useSubscribe(type, onAction) {
+            (0, react_1.useEffect)(() => {
+                emitter.on(type, onAction);
+                return () => {
+                    emitter.off(type, onAction);
+                };
+            }, [type, onAction]);
+        },
+    };
+};
+exports.createPubsub = createPubsub;

package/lib/pubsub/index.d.ts

@@ -1,3 +1,2 @@
-export * from "./publish";
-export * from "./subscribe";
+export * from "./create";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pubsub/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pubsub/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/lib/pubsub/index.js

@@ -14,5 +14,4 @@ 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("./publish"), exports);
-__exportStar(require("./subscribe"), exports);
+__exportStar(require("./create"), exports);

package/lib/tree/root.d.ts

@@ -11,6 +11,6 @@ declare type RootProps = {
     data: Data;
     Component?: (props: WrapperComponentProps) => JSX.Element;
 };
-export declare const Root: ({ data, Component }: RootProps) => JSX.Element | null;
+export declare const InstanceRoot: ({ data, Component, }: RootProps) => JSX.Element | null;
 export {};
 //# sourceMappingURL=root.d.ts.map

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;AAE7B,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;CAC7B,CAAC;AAEF,eAAO,MAAM,YAAY,cAIvB,CAAC;AAEH,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,IAAI,wBAAyB,SAAS,KAAG,WAAW,GAAG,IAYnE,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;AACjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAGzC,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,qBAAqB,CAAC;AAE7B,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;CAC7B,CAAC;AAEF,eAAO,MAAM,YAAY,cAIvB,CAAC;AAEH,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"}

package/lib/tree/root.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Root = exports.globalStyles = void 0;
+exports.InstanceRoot = exports.globalStyles = void 0;
 const user_props_1 = require("../user-props/");
 const stitches_1 = require("../stitches");
 const create_elements_tree_1 = require("./create-elements-tree");
@@ -10,7 +10,7 @@ exports.globalStyles = (0, stitches_1.globalCss)({
         height: "100%",
     },
 });
-const Root = ({ data, Component }) => {
+const InstanceRoot = ({ data, Component, }) => {
     if (data.tree === null) {
         throw new Error("Tree is null");
     }
@@ -23,4 +23,4 @@ const Root = ({ data, Component }) => {
         Component: Component ?? wrapper_component_1.WrapperComponent,
     });
 };
-exports.Root = Root;
+exports.InstanceRoot = InstanceRoot;

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "scripts": {
     "dev": "tsup src/index.ts --format esm,cjs --watch --out-dir=lib",
     "build": "yarn build:mdn-data && yarn build:args && yarn build:lib",
-    "build:mdn-data": "node --experimental-loader esbuild-node-loader ./bin/mdn-data.ts ./src/css",
-    "build:args": "node --experimental-loader esbuild-node-loader ./bin/generate-arg-types.ts './src/components/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx'",
+    "build:mdn-data": "tsx ./bin/mdn-data.ts ./src/css",
+    "build:args": "tsx ./bin/generate-arg-types.ts './src/components/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx'",
     "typecheck": "tsc --noEmit",
     "build:lib": "rm -fr lib && tsc",
     "test": "jest",
@@ -20,6 +20,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.17.12",
+    "@esbuild-kit/esm-loader": "^2.4.2",
     "@remix-run/react": "^1.2.3",
     "@remix-run/server-runtime": "^1.2.3",
     "@storybook/addon-actions": "^6.5.6",
@@ -33,20 +34,20 @@
     "@types/css-tree": "^1.0.7",
     "@types/fs-extra": "^9.0.13",
     "@types/node": "^17.0.21",
+    "@webstudio-is/jest-config": "*",
+    "@webstudio-is/prisma-client": "*",
     "babel-loader": "^8.2.5",
     "camelcase": "^6.3.0",
     "css-tree": "^2.1.0",
     "esbuild": "^0.14.25",
     "esbuild-node-externals": "^1.4.1",
-    "esbuild-node-loader": "^0.8.0",
-    "@webstudio-is/jest-config": "*",
     "mdn-data": "2.0.23",
     "react": "^17.0.2",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^17.0.2",
-    "@webstudio-is/prisma-client": "*",
     "tsup": "^6.1.3",
-    "typescript": "^4.6.2"
+    "tsx": "^3.9.0",
+    "typescript": "4.7.4"
   },
   "peerDependencies": {
     "@remix-run/react": "^1.2.3",
@@ -58,10 +59,10 @@
   "dependencies": {
     "@stitches/core": "^1.2.7",
     "@webstudio-is/icons": "*",
+    "@webstudio-is/jest-config": "*",
     "immer": "^9.0.12",
     "mitt": "^3.0.0",
     "react-nano-state": "^0.4.0",
-    "@webstudio-is/jest-config": "*",
     "zod": "^3.17.3"
   },
   "main": "lib/index.js",

package/lib/pubsub/publish.d.ts

@@ -1,17 +0,0 @@
-import { MutableRefObject } from "react";
-declare type Action<Type, Payload> = {
-    type: Type;
-    payload?: Payload;
-};
-export declare type Publish = <Type, Payload = undefined>(action: Action<Type, Payload>) => void;
-declare type UsePublish = [Publish, MutableRefObject<HTMLIFrameElement | null>];
-/**
- * To publish a postMessage event on the iframe and parent window from the parent window.
- */
-export declare const usePublish: () => UsePublish;
-/**
- * To publish a postMessage event on the current window and parent window from the iframe.
- */
-export declare const publish: <Type extends string, Payload = undefined>(action: Action<Type, Payload>) => void;
-export {};
-//# sourceMappingURL=publish.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"publish.d.ts","sourceRoot":"","sources":["../../src/pubsub/publish.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAE9D,aAAK,MAAM,CAAC,IAAI,EAAE,OAAO,IAAI;IAC3B,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,oBAAY,OAAO,GAAG,CAAC,IAAI,EAAE,OAAO,GAAG,SAAS,EAC9C,MAAM,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,KAC1B,IAAI,CAAC;AAEV,aAAK,UAAU,GAAG,CAAC,OAAO,EAAE,gBAAgB,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC,CAAC;AAExE;;GAEG;AACH,eAAO,MAAM,UAAU,kBAYtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,mFAKnB,CAAC"}

package/lib/pubsub/publish.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.publish = exports.usePublish = void 0;
-const react_1 = require("react");
-/**
- * To publish a postMessage event on the iframe and parent window from the parent window.
- */
-const usePublish = () => {
-    const iframeRef = (0, react_1.useRef)(null);
-    const publishCallback = (0, react_1.useCallback)((action) => {
-        const element = iframeRef.current;
-        if (element?.contentWindow == null)
-            return;
-        element.contentWindow.postMessage(action, "*");
-        window.postMessage(action, "*");
-    }, [iframeRef]);
-    return [publishCallback, iframeRef];
-};
-exports.usePublish = usePublish;
-/**
- * To publish a postMessage event on the current window and parent window from the iframe.
- */
-const publish = (action) => {
-    window.parent.postMessage(action, "*");
-    window.postMessage(action, "*");
-};
-exports.publish = publish;

package/lib/pubsub/subscribe.d.ts

@@ -1,8 +0,0 @@
-declare type Events = Record<string, any>;
-export declare const emitter: import("mitt").Emitter<Events>;
-/**
- * To subscribe a message event on the current window.
- */
-export declare const useSubscribe: <Type extends string, Payload = undefined>(type: Type, onAction: (payload: Payload) => void) => void;
-export {};
-//# sourceMappingURL=subscribe.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"subscribe.d.ts","sourceRoot":"","sources":["../../src/pubsub/subscribe.ts"],"names":[],"mappings":"AAQA,aAAK,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAElC,eAAO,MAAM,OAAO,gCAAiB,CAAC;AAgBtC;;GAEG;AACH,eAAO,MAAM,YAAY,yFAES,IAAI,SAQrC,CAAC"}

package/lib/pubsub/subscribe.js

@@ -1,30 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSubscribe = exports.emitter = void 0;
-const mitt_1 = __importDefault(require("mitt"));
-const react_1 = require("react");
-exports.emitter = (0, mitt_1.default)();
-if (typeof window === "object") {
-    window.addEventListener("message", (event) => {
-        // @todo this has no type safety built in, could be anything from any source.
-        // we could potentially maintain a list of valid event types, but see prior contra points.
-        if (typeof event.data?.type === "string") {
-            exports.emitter.emit(event.data.type, event.data.payload);
-        }
-    }, false);
-}
-/**
- * To subscribe a message event on the current window.
- */
-const useSubscribe = (type, onAction) => {
-    (0, react_1.useEffect)(() => {
-        exports.emitter.on(type, onAction);
-        return () => {
-            exports.emitter.off(type, onAction);
-        };
-    }, [type, onAction]);
-};
-exports.useSubscribe = useSubscribe;