@webstudio-is/react-sdk 0.5.0

package/lib/stitches/index.js

@@ -0,0 +1,19 @@
+"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("./to-css"), exports);
+__exportStar(require("./css"), exports);
+__exportStar(require("./critical-css"), exports);

package/lib/stitches/to-css.d.ts

@@ -0,0 +1,8 @@
+import type { CSS } from "./css";
+import type { StyleValue, CssRule, Breakpoint } from "../css";
+export declare const toValue: (value: StyleValue) => string;
+/**
+ * Convert instance cssRules to a stitches CSS object.
+ */
+export declare const toCss: (cssRules: Array<CssRule>, breakpoints: Array<Breakpoint>) => CSS;
+//# sourceMappingURL=to-css.d.ts.map

package/lib/stitches/to-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"to-css.d.ts","sourceRoot":"","sources":["../../src/stitches/to-css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAiB,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAE7E,eAAO,MAAM,OAAO,UAAW,UAAU,KAAG,MAK3C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,aACN,MAAM,OAAO,CAAC,eACX,MAAM,UAAU,CAAC,KAC7B,GAgCF,CAAC"}

package/lib/stitches/to-css.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toCss = exports.toValue = void 0;
+const toValue = (value) => {
+    if (value.type === "unit") {
+        return value.value + (value.unit === "number" ? "" : value.unit);
+    }
+    return value.value;
+};
+exports.toValue = toValue;
+/**
+ * Convert instance cssRules to a stitches CSS object.
+ */
+const toCss = (cssRules, breakpoints) => {
+    const css = {};
+    const breakpointsMap = {};
+    for (const breakpoint of breakpoints) {
+        breakpointsMap[breakpoint.id] = breakpoint.minWidth;
+    }
+    const sortedCssRules = [...cssRules].sort((ruleA, ruleB) => {
+        var _a, _b;
+        // If a rule references a breakpoint that was not found in breakpoints,
+        // we must have removed the breakpoint and now we fall back to 0.
+        const maxWidthA = (_a = breakpointsMap[ruleA.breakpoint]) !== null && _a !== void 0 ? _a : 0;
+        const maxWidthB = (_b = breakpointsMap[ruleB.breakpoint]) !== null && _b !== void 0 ? _b : 0;
+        return maxWidthA - maxWidthB;
+    });
+    for (const cssRule of sortedCssRules) {
+        const style = {};
+        for (const property in cssRule.style) {
+            const value = cssRule.style[property];
+            if (value === undefined)
+                continue;
+            style[property] = (0, exports.toValue)(value);
+        }
+        if (cssRule.breakpoint in breakpointsMap) {
+            css["@" + cssRule.breakpoint] = style;
+            continue;
+        }
+        Object.assign(css, style);
+    }
+    return css;
+};
+exports.toCss = toCss;

package/lib/stitches/to-css.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=to-css.test.d.ts.map

package/lib/stitches/to-css.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"to-css.test.d.ts","sourceRoot":"","sources":["../../src/stitches/to-css.test.ts"],"names":[],"mappings":""}

package/lib/stitches/to-css.test.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const css_1 = require("../css");
+const to_css_1 = require("./to-css");
+const breakpoints = css_1.initialBreakpoints.map((breakpoint, index) => ({
+    ...breakpoint,
+    id: String(index),
+    projectId: "projectId",
+}));
+describe("Convert WS CSS rules to stitches", () => {
+    test("basic", () => {
+        const cssRules = [
+            {
+                style: {
+                    color: {
+                        type: "keyword",
+                        value: "red",
+                    },
+                },
+                breakpoint: "0",
+            },
+        ];
+        const stitchesCss = (0, to_css_1.toCss)(cssRules, breakpoints);
+        expect(stitchesCss).toEqual({
+            "@0": {
+                color: "red",
+            },
+        });
+    });
+    test("sort order based on maxWidth in breakpoints", () => {
+        const cssRules = [
+            {
+                style: {
+                    color: {
+                        type: "keyword",
+                        value: "green",
+                    },
+                },
+                breakpoint: "2",
+            },
+            {
+                style: {
+                    color: {
+                        type: "keyword",
+                        value: "blue",
+                    },
+                },
+                breakpoint: "0",
+            },
+            {
+                style: {
+                    color: {
+                        type: "keyword",
+                        value: "red",
+                    },
+                },
+                breakpoint: "1",
+            },
+        ];
+        const stitchesCss = (0, to_css_1.toCss)(cssRules, breakpoints);
+        expect(Object.keys(stitchesCss)).toStrictEqual(["@0", "@1", "@2"]);
+    });
+});

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

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

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

@@ -0,0 +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;AAEjE,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;;MAEtD,WAwBH,CAAC"}

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createElementsTree = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const stitches_1 = require("../stitches");
+const createElementsTree = ({ instance, breakpoints, Component, onChangeChildren, }) => {
+    const children = [];
+    for (const child of instance.children) {
+        const element = typeof child === "string"
+            ? child
+            : (0, exports.createElementsTree)({
+                instance: child,
+                breakpoints,
+                Component,
+                onChangeChildren,
+            });
+        children.push(element);
+    }
+    const props = {
+        instance,
+        children,
+        css: (0, stitches_1.toCss)(instance.cssRules, breakpoints),
+        key: instance.id,
+        onChangeChildren,
+    };
+    return (0, jsx_runtime_1.jsx)(Component, { ...props });
+};
+exports.createElementsTree = createElementsTree;

package/lib/tree/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./create-elements-tree";
+export * from "./root";
+export * from "./wrapper-component";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tree/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC"}

package/lib/tree/index.js

@@ -0,0 +1,19 @@
+"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("./create-elements-tree"), exports);
+__exportStar(require("./root"), exports);
+__exportStar(require("./wrapper-component"), exports);

package/lib/tree/root.d.ts

@@ -0,0 +1,16 @@
+import type { Tree, InstanceProps } from "../db";
+import type { Breakpoint } from "../css";
+import { type WrapperComponentProps } from "./wrapper-component";
+export declare type Data = {
+    tree: Tree | null;
+    breakpoints: Array<Breakpoint>;
+    props: Array<InstanceProps>;
+};
+export declare const globalStyles: () => string;
+declare type RootProps = {
+    data: Data;
+    Component?: (props: WrapperComponentProps) => JSX.Element;
+};
+export declare const Root: ({ data, Component }: RootProps) => JSX.Element | null;
+export {};
+//# sourceMappingURL=root.d.ts.map

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

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

package/lib/tree/root.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Root = 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");
+const wrapper_component_1 = require("./wrapper-component");
+exports.globalStyles = (0, stitches_1.globalCss)({
+    body: {
+        margin: 0,
+    },
+});
+const Root = ({ data, Component }) => {
+    if (data.tree === null) {
+        throw new Error("Tree is null");
+    }
+    (0, stitches_1.setBreakpoints)(data.breakpoints);
+    (0, exports.globalStyles)();
+    (0, user_props_1.useAllUserProps)(data.props);
+    return (0, create_elements_tree_1.createElementsTree)({
+        instance: data.tree.root,
+        breakpoints: data.breakpoints,
+        Component: Component !== null && Component !== void 0 ? Component : wrapper_component_1.WrapperComponent,
+    });
+};
+exports.Root = Root;

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

@@ -0,0 +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 = {
+    instance: Instance;
+    css: CSS;
+    children: Array<JSX.Element | string>;
+    onChangeChildren?: OnChangeChildren;
+};
+export declare const WrapperComponent: ({ instance, css, onChangeChildren, children, ...rest }: WrapperComponentProps) => JSX.Element;
+//# sourceMappingURL=wrapper-component.d.ts.map

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

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

package/lib/tree/wrapper-component.js

@@ -0,0 +1,53 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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)));
+};
+const renderWrapperComponentChildren = (children) => {
+    // Some elements like input can't have children
+    // @todo needs to be made impossible to drag element into input
+    if (children === undefined || children.length === 0)
+        return;
+    return children.map((child) => {
+        return typeof child === "string" ? renderText(child) : child;
+    });
+};
+exports.renderWrapperComponentChildren = renderWrapperComponentChildren;
+const WrapperComponent = ({ instance, css, onChangeChildren, // prevent it from passing to primitives
+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) }));
+};
+exports.WrapperComponent = WrapperComponent;

package/lib/user-props/all-user-props.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react-nano-state" />
+import type { InstanceProps, Instance } from "../db";
+export declare type AllUserProps = {
+    [id: Instance["id"]]: InstanceProps;
+};
+export declare const allUserPropsContainer: import("react-nano-state").ValueContainer<AllUserProps>;
+export declare const useAllUserProps: (initialUserProps?: Array<InstanceProps>) => [AllUserProps, import("react-nano-state").Dispatch<AllUserProps>];
+//# sourceMappingURL=all-user-props.d.ts.map

package/lib/user-props/all-user-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"all-user-props.d.ts","sourceRoot":"","sources":["../../src/user-props/all-user-props.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,oBAAY,YAAY,GAAG;IAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,aAAa,CAAA;CAAE,CAAC;AAEnE,eAAO,MAAM,qBAAqB,yDAAyC,CAAC;AAE5E,eAAO,MAAM,eAAe,sBAAuB,MAAM,aAAa,CAAC,sEAWtE,CAAC"}

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAllUserProps = exports.allUserPropsContainer = void 0;
+const react_1 = require("react");
+const react_nano_state_1 = require("react-nano-state");
+exports.allUserPropsContainer = (0, react_nano_state_1.createValueContainer)({});
+const useAllUserProps = (initialUserProps) => {
+    (0, react_1.useMemo)(() => {
+        if (initialUserProps === undefined)
+            return;
+        const propsMap = {};
+        for (const props of initialUserProps) {
+            propsMap[props.instanceId] = props;
+        }
+        //We don't need to trigger rerender when setting the initial value
+        exports.allUserPropsContainer.value = propsMap;
+    }, []);
+    return (0, react_nano_state_1.useValue)(exports.allUserPropsContainer);
+};
+exports.useAllUserProps = useAllUserProps;

package/lib/user-props/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./all-user-props";
+export * from "./use-user-props";
+export * from "./types";
+export * from "./schema";
+//# sourceMappingURL=index.d.ts.map

package/lib/user-props/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/user-props/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}

package/lib/user-props/index.js

@@ -0,0 +1,20 @@
+"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("./all-user-props"), exports);
+__exportStar(require("./use-user-props"), exports);
+__exportStar(require("./types"), exports);
+__exportStar(require("./schema"), exports);

package/lib/user-props/schema.d.ts

@@ -0,0 +1,34 @@
+import { z } from "zod";
+export declare const UserPropSchema: z.ZodObject<{
+    id: z.ZodString;
+    prop: z.ZodString;
+    value: z.ZodUnion<[z.ZodString, z.ZodBoolean]>;
+    required: z.ZodOptional<z.ZodBoolean>;
+}, "strip", z.ZodTypeAny, {
+    required?: boolean | undefined;
+    value: string | boolean;
+    id: string;
+    prop: string;
+}, {
+    required?: boolean | undefined;
+    value: string | boolean;
+    id: string;
+    prop: string;
+}>;
+export declare const UserPropsSchema: z.ZodArray<z.ZodObject<{
+    id: z.ZodString;
+    prop: z.ZodString;
+    value: z.ZodUnion<[z.ZodString, z.ZodBoolean]>;
+    required: z.ZodOptional<z.ZodBoolean>;
+}, "strip", z.ZodTypeAny, {
+    required?: boolean | undefined;
+    value: string | boolean;
+    id: string;
+    prop: string;
+}, {
+    required?: boolean | undefined;
+    value: string | boolean;
+    id: string;
+    prop: string;
+}>, "many">;
+//# sourceMappingURL=schema.d.ts.map

package/lib/user-props/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/user-props/schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;EAKzB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;WAA0B,CAAC"}

package/lib/user-props/schema.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserPropsSchema = exports.UserPropSchema = void 0;
+const zod_1 = require("zod");
+exports.UserPropSchema = zod_1.z.object({
+    id: zod_1.z.string(),
+    prop: zod_1.z.string(),
+    value: zod_1.z.union([zod_1.z.string(), zod_1.z.boolean()]),
+    required: zod_1.z.optional(zod_1.z.boolean()),
+});
+exports.UserPropsSchema = zod_1.z.array(exports.UserPropSchema);

package/lib/user-props/types.d.ts

@@ -0,0 +1,15 @@
+import { z } from "zod";
+import type { InstanceProps, Instance } from "../db";
+import { UserPropSchema } from "./schema";
+export declare type UserProp = z.infer<typeof UserPropSchema>;
+export declare type UserPropsUpdates = {
+    treeId: InstanceProps["treeId"];
+    propsId: InstanceProps["id"];
+    instanceId: Instance["id"];
+    updates: Array<UserProp>;
+};
+export declare type DeleteProp = {
+    instanceId: Instance["id"];
+    propId: UserProp["id"];
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/user-props/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/user-props/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,oBAAY,QAAQ,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,cAAc,CAAC,CAAC;AAEtD,oBAAY,gBAAgB,GAAG;IAC7B,MAAM,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAChC,OAAO,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC7B,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC3B,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;CAC1B,CAAC;AAEF,oBAAY,UAAU,GAAG;IACvB,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC3B,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;CACxB,CAAC"}

package/lib/user-props/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/user-props/use-user-props.d.ts

@@ -0,0 +1,12 @@
+import { type Instance } from "../db";
+import { type UserProp } from "./types";
+declare type UserProps = {
+    [prop: UserProp["prop"]]: UserProp["value"];
+};
+/**
+ * User props mapped in prop:value format,
+ * up to date with props panel.
+ */
+export declare const useUserProps: (instanceId: Instance["id"]) => UserProps;
+export {};
+//# sourceMappingURL=use-user-props.d.ts.map

package/lib/user-props/use-user-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-user-props.d.ts","sourceRoot":"","sources":["../../src/user-props/use-user-props.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGxC,aAAK,SAAS,GAAG;IAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;CAAE,CAAC;AAEjE;;;GAGG;AACH,eAAO,MAAM,YAAY,eAAgB,QAAQ,CAAC,IAAI,CAAC,cAuBtD,CAAC"}

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUserProps = void 0;
+const react_1 = require("react");
+const all_user_props_1 = require("./all-user-props");
+/**
+ * User props mapped in prop:value format,
+ * up to date with props panel.
+ */
+const useUserProps = (instanceId) => {
+    const [allUserProps, setAllUserProps] = (0, all_user_props_1.useAllUserProps)();
+    const propsData = allUserProps[instanceId];
+    const initialUserProps = (0, react_1.useMemo)(() => {
+        if (propsData === undefined)
+            return {};
+        return propsData.props.reduce((props, { prop, value }) => {
+            props[prop] = value;
+            return props;
+        }, {});
+    }, [propsData]);
+    const [props, setProps] = (0, react_1.useState)(initialUserProps);
+    (0, react_1.useEffect)(() => {
+        if (propsData == undefined)
+            return;
+        const nextProps = {};
+        for (const prop of propsData.props) {
+            nextProps[prop.prop] = prop.value;
+        }
+        setProps(nextProps);
+    }, [propsData]);
+    return props;
+};
+exports.useUserProps = useUserProps;

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@webstudio-is/react-sdk",
+  "version": "0.5.0",
+  "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'",
+    "build:prisma": "prisma format && prisma generate",
+    "typecheck": "tsc --noEmit",
+    "build:lib": "rm -fr lib && tsc",
+    "postinstall": "prisma generate",
+    "test": "jest",
+    "checks": "yarn typecheck && yarn test",
+    "prepublishOnly": "yarn checks && yarn build:lib",
+    "storybook:run": "start-storybook -p 6006",
+    "storybook:build": "build-storybook"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.12",
+    "@remix-run/react": "^1.2.3",
+    "@remix-run/server-runtime": "^1.2.3",
+    "@storybook/addon-actions": "^6.5.6",
+    "@storybook/addon-essentials": "^6.5.6",
+    "@storybook/addon-interactions": "^6.5.6",
+    "@storybook/addon-links": "^6.5.6",
+    "@storybook/builder-webpack4": "^6.5.6",
+    "@storybook/manager-webpack4": "^6.5.6",
+    "@storybook/react": "^6.5.6",
+    "@storybook/testing-library": "^0.0.11",
+    "@types/css-tree": "^1.0.7",
+    "@types/fs-extra": "^9.0.13",
+    "@types/node": "^17.0.21",
+    "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",
+    "tsup": "^6.1.3",
+    "typescript": "^4.6.2"
+  },
+  "peerDependencies": {
+    "@remix-run/react": "^1.2.3",
+    "@remix-run/server-runtime": "^1.2.3",
+    "@storybook/react": "^6.5.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "dependencies": {
+    "@prisma/client": "^3.10.0",
+    "@stitches/core": "^1.2.7",
+    "immer": "^9.0.12",
+    "mitt": "^3.0.0",
+    "prisma": "^3.10.0",
+    "react-nano-state": "^0.4.0",
+    "@webstudio-is/jest-config": "*",
+    "zod": "^3.17.3"
+  },
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib/*",
+    "README.md",
+    "!*.test.*",
+    "prisma/*"
+  ],
+  "license": "MIT",
+  "private": false
+}