@webstudio-is/react-sdk 0.66.0 → 0.67.0

package/lib/app/custom-components/index.js

@@ -13,7 +13,10 @@ const customComponents = {
   Form
 };
 const customComponentPropsMetas = {
-  Image: { props: imageProps },
+  Image: {
+    props: imageProps,
+    initialProps: ["src", "width", "height", "alt", "loading"]
+  },
   Form: formPropsMeta
 };
 const customComponentMetas = {

package/lib/cjs/app/custom-components/index.js

@@ -38,7 +38,10 @@ const customComponents = {
   Form: import_form.Form
 };
 const customComponentPropsMetas = {
-  Image: { props: import_image.imageProps },
+  Image: {
+    props: import_image.imageProps,
+    initialProps: ["src", "width", "height", "alt", "loading"]
+  },
   Form: import_form2.propsMeta
 };
 const customComponentMetas = {

package/lib/cjs/components/__generated__/{code.props.js → code-text.props.js}

@@ -16,11 +16,11 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var code_props_exports = {};
-__export(code_props_exports, {
+var code_text_props_exports = {};
+__export(code_text_props_exports, {
   props: () => props
 });
-module.exports = __toCommonJS(code_props_exports);
+module.exports = __toCommonJS(code_text_props_exports);
 const props = {
   meta: { required: false, control: "text", type: "string" },
   slot: { required: false, control: "text", type: "string" },

package/lib/cjs/components/__generated__/{html.props.js → html-embed.props.js}

@@ -16,14 +16,14 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var html_props_exports = {};
-__export(html_props_exports, {
+var html_embed_props_exports = {};
+__export(html_embed_props_exports, {
   props: () => props
 });
-module.exports = __toCommonJS(html_props_exports);
+module.exports = __toCommonJS(html_embed_props_exports);
 const props = {
   code: { required: true, control: "text", type: "string" },
-  executeScriptInCanvas: {
+  executeScriptOnCanvas: {
     required: true,
     control: "boolean",
     type: "boolean"

package/lib/cjs/components/{code.js → code-text.js}

@@ -16,13 +16,13 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var code_exports = {};
-__export(code_exports, {
-  Code: () => Code,
+var code_text_exports = {};
+__export(code_text_exports, {
+  CodeText: () => CodeText,
   defaultTag: () => defaultTag,
   displayVarNamespace: () => displayVarNamespace
 });
-module.exports = __toCommonJS(code_exports);
+module.exports = __toCommonJS(code_text_exports);
 var import_react = require("react");
 var import_css_vars = require("@webstudio-is/css-vars");
 const defaultTag = "code";
@@ -30,10 +30,10 @@ const displayVarNamespace = import_css_vars.cssVars.unique("code-display");
 const blockStyle = {
   [import_css_vars.cssVars.define(displayVarNamespace, true)]: "block"
 };
-const Code = (0, import_react.forwardRef)(
+const CodeText = (0, import_react.forwardRef)(
   ({ inline = false, ...props }, ref) => {
     const style = inline ? void 0 : blockStyle;
     return (0, import_react.createElement)(defaultTag, { ...props, style, ref });
   }
 );
-Code.displayName = "Code";
+CodeText.displayName = "CodeText";

package/lib/cjs/components/{code.ws.js → code-text.ws.js}

@@ -16,16 +16,16 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var code_ws_exports = {};
-__export(code_ws_exports, {
+var code_text_ws_exports = {};
+__export(code_text_ws_exports, {
   meta: () => meta,
   propsMeta: () => propsMeta
 });
-module.exports = __toCommonJS(code_ws_exports);
+module.exports = __toCommonJS(code_text_ws_exports);
 var import_svg = require("@webstudio-is/icons/svg");
 var import_component_meta = require("./component-meta");
-var import_code = require("./code");
-var import_code2 = require("./__generated__/code.props");
+var import_code_text = require("./code-text");
+var import_code_text2 = require("./__generated__/code-text.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
   code: [
@@ -34,7 +34,7 @@ const presetStyle = {
       property: "display",
       value: {
         type: "var",
-        value: import_code.displayVarNamespace,
+        value: import_code_text.displayVarNamespace,
         fallbacks: [{ type: "keyword", value: "inline-block" }]
       }
     },
@@ -55,13 +55,13 @@ const presetStyle = {
 const meta = {
   category: "general",
   type: "rich-text",
-  label: "Code",
-  icon: import_svg.CodeIcon,
+  label: "Code Text",
+  icon: import_svg.CodeTextIcon,
   states: import_component_meta.defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Code you can edit" }]
 };
 const propsMeta = {
-  props: import_code2.props,
+  props: import_code_text2.props,
   initialProps: ["inline", "lang", "meta"]
 };

package/lib/cjs/components/components.js

@@ -25,12 +25,12 @@ __export(components_exports, {
   Button: () => import_button.Button,
   Checkbox: () => import_checkbox.Checkbox,
   CheckboxField: () => import_checkbox_field.CheckboxField,
-  Code: () => import_code.Code,
+  CodeText: () => import_code_text.CodeText,
   ErrorMessage: () => import_error_message.ErrorMessage,
   Form: () => import_form.Form,
   Fragment: () => import_fragment.Fragment,
   Heading: () => import_heading.Heading,
-  Html: () => import_html.Html,
+  HtmlEmbed: () => import_html_embed.HtmlEmbed,
   Image: () => import_image.Image,
   Input: () => import_input.Input,
   Italic: () => import_italic.Italic,
@@ -55,7 +55,7 @@ __export(components_exports, {
 module.exports = __toCommonJS(components_exports);
 var import_slot = require("./slot");
 var import_fragment = require("./fragment");
-var import_html = require("./html");
+var import_html_embed = require("./html-embed");
 var import_body = require("./body");
 var import_box = require("./box");
 var import_text_block = require("./text-block");
@@ -77,7 +77,7 @@ var import_blockquote = require("./blockquote");
 var import_list = require("./list");
 var import_list_item = require("./list-item");
 var import_separator = require("./separator");
-var import_code = require("./code");
+var import_code_text = require("./code-text");
 var import_label = require("./label");
 var import_success_message = require("./success-message");
 var import_error_message = require("./error-message");

package/lib/cjs/components/{html.js → html-embed.js}

@@ -16,11 +16,11 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var html_exports = {};
-__export(html_exports, {
-  Html: () => Html
+var html_embed_exports = {};
+__export(html_embed_exports, {
+  HtmlEmbed: () => HtmlEmbed
 });
-module.exports = __toCommonJS(html_exports);
+module.exports = __toCommonJS(html_embed_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_utils = require("@react-aria/utils");
@@ -64,17 +64,17 @@ const InnerHtml = (props) => {
 };
 const Placeholder = (props) => {
   const { code, innerRef, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: innerRef, ...rest, style: { padding: "20px" }, children: 'Paste html into "Code" prop' });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: innerRef, ...rest, style: { padding: "20px" }, children: 'Open "Properties" panel to insert HTML code' });
 };
-const Html = (0, import_react.forwardRef)((props, ref) => {
+const HtmlEmbed = (0, import_react.forwardRef)((props, ref) => {
   const { renderer } = (0, import_react.useContext)(import_context.ReactSdkContext);
-  const { code, executeScriptInCanvas, ...rest } = props;
+  const { code, executeScriptOnCanvas, ...rest } = props;
   if (code === void 0 || code.trim().length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Placeholder, { innerRef: ref, ...rest });
   }
-  if (renderer === "canvas" && executeScriptInCanvas === true) {
+  if (renderer === "canvas" && executeScriptOnCanvas === true) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExecutableHtml, { innerRef: ref, code, ...rest });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InnerHtml, { innerRef: ref, code, ...rest });
 });
-Html.displayName = "Html";
+HtmlEmbed.displayName = "HtmlEmbed";

package/lib/cjs/components/{html.ws.js → html-embed.ws.js}

@@ -16,23 +16,23 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var html_ws_exports = {};
-__export(html_ws_exports, {
+var html_embed_ws_exports = {};
+__export(html_embed_ws_exports, {
   meta: () => meta,
   propsMeta: () => propsMeta
 });
-module.exports = __toCommonJS(html_ws_exports);
+module.exports = __toCommonJS(html_embed_ws_exports);
 var import_svg = require("@webstudio-is/icons/svg");
-var import_html = require("./__generated__/html.props");
+var import_html_embed = require("./__generated__/html-embed.props");
 const meta = {
   category: "general",
   type: "embed",
-  label: "Html",
-  icon: import_svg.CodeIcon
+  label: "HTML Embed",
+  icon: import_svg.EmbedIcon
 };
 const propsMeta = {
   props: {
-    ...import_html.props,
+    ...import_html_embed.props,
     code: {
       required: true,
       control: "code",

package/lib/cjs/components/index.js

@@ -29,7 +29,7 @@ __export(components_exports, {
 module.exports = __toCommonJS(components_exports);
 var import_slot = require("./slot.ws");
 var import_fragment = require("./fragment.ws");
-var import_html = require("./html.ws");
+var import_html_embed = require("./html-embed.ws");
 var import_body = require("./body.ws");
 var import_box = require("./box.ws");
 var import_text_block = require("./text-block.ws");
@@ -51,7 +51,7 @@ var import_blockquote = require("./blockquote.ws");
 var import_list = require("./list.ws");
 var import_list_item = require("./list-item.ws");
 var import_separator = require("./separator.ws");
-var import_code = require("./code.ws");
+var import_code_text = require("./code-text.ws");
 var import_label = require("./label.ws");
 var import_success_message = require("./success-message.ws");
 var import_error_message = require("./error-message.ws");
@@ -62,7 +62,7 @@ var import_checkbox_field = require("./checkbox-field.ws");
 var import_checkbox = require("./checkbox.ws");
 var import_slot2 = require("./slot.ws");
 var import_fragment2 = require("./fragment.ws");
-var import_html2 = require("./html.ws");
+var import_html_embed2 = require("./html-embed.ws");
 var import_body2 = require("./body.ws");
 var import_box2 = require("./box.ws");
 var import_text_block2 = require("./text-block.ws");
@@ -84,7 +84,7 @@ var import_blockquote2 = require("./blockquote.ws");
 var import_list2 = require("./list.ws");
 var import_list_item2 = require("./list-item.ws");
 var import_separator2 = require("./separator.ws");
-var import_code2 = require("./code.ws");
+var import_code_text2 = require("./code-text.ws");
 var import_label2 = require("./label.ws");
 var import_success_message2 = require("./success-message.ws");
 var import_error_message2 = require("./error-message.ws");
@@ -96,7 +96,7 @@ var import_checkbox2 = require("./checkbox.ws");
 const defaultMetas = {
   Slot: import_slot.meta,
   Fragment: import_fragment.meta,
-  Html: import_html.meta,
+  HtmlEmbed: import_html_embed.meta,
   Box: import_box.meta,
   Body: import_body.meta,
   TextBlock: import_text_block.meta,
@@ -118,7 +118,7 @@ const defaultMetas = {
   List: import_list.meta,
   ListItem: import_list_item.meta,
   Separator: import_separator.meta,
-  Code: import_code.meta,
+  CodeText: import_code_text.meta,
   Label: import_label.meta,
   SuccessMessage: import_success_message.meta,
   ErrorMessage: import_error_message.meta,
@@ -142,7 +142,7 @@ const registerComponentMetas = (overrides) => {
 const defaultPropsMetas = {
   Slot: import_slot2.propsMeta,
   Fragment: import_fragment2.propsMeta,
-  Html: import_html2.propsMeta,
+  HtmlEmbed: import_html_embed2.propsMeta,
   Box: import_box2.propsMeta,
   Body: import_body2.propsMeta,
   TextBlock: import_text_block2.propsMeta,
@@ -164,7 +164,7 @@ const defaultPropsMetas = {
   List: import_list2.propsMeta,
   ListItem: import_list_item2.propsMeta,
   Separator: import_separator2.propsMeta,
-  Code: import_code2.propsMeta,
+  CodeText: import_code_text2.propsMeta,
   Label: import_label2.propsMeta,
   SuccessMessage: import_success_message2.propsMeta,
   ErrorMessage: import_error_message2.propsMeta,

package/lib/components/__generated__/{html.props.js → html-embed.props.js}

@@ -1,6 +1,6 @@
 const props = {
   code: { required: true, control: "text", type: "string" },
-  executeScriptInCanvas: {
+  executeScriptOnCanvas: {
     required: true,
     control: "boolean",
     type: "boolean"

package/lib/components/{code.js → code-text.js}

@@ -8,15 +8,15 @@ const displayVarNamespace = cssVars.unique("code-display");
 const blockStyle = {
   [cssVars.define(displayVarNamespace, true)]: "block"
 };
-const Code = forwardRef(
+const CodeText = forwardRef(
   ({ inline = false, ...props }, ref) => {
     const style = inline ? void 0 : blockStyle;
     return createElement(defaultTag, { ...props, style, ref });
   }
 );
-Code.displayName = "Code";
+CodeText.displayName = "CodeText";
 export {
-  Code,
+  CodeText,
   defaultTag,
   displayVarNamespace
 };

package/lib/components/{code.ws.js → code-text.ws.js}

@@ -1,9 +1,9 @@
-import { CodeIcon } from "@webstudio-is/icons/svg";
+import { CodeTextIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
-import { displayVarNamespace } from "./code";
-import { props } from "./__generated__/code.props";
+import { displayVarNamespace } from "./code-text";
+import { props } from "./__generated__/code-text.props";
 import { code } from "../css/normalize";
 const presetStyle = {
   code: [
@@ -33,8 +33,8 @@ const presetStyle = {
 const meta = {
   category: "general",
   type: "rich-text",
-  label: "Code",
-  icon: CodeIcon,
+  label: "Code Text",
+  icon: CodeTextIcon,
   states: defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Code you can edit" }]

package/lib/components/components.js

@@ -1,6 +1,6 @@
 import { Slot } from "./slot";
 import { Fragment } from "./fragment";
-import { Html } from "./html";
+import { HtmlEmbed } from "./html-embed";
 import { Body } from "./body";
 import { Box } from "./box";
 import { TextBlock } from "./text-block";
@@ -22,7 +22,7 @@ import { Blockquote } from "./blockquote";
 import { List } from "./list";
 import { ListItem } from "./list-item";
 import { Separator } from "./separator";
-import { Code } from "./code";
+import { CodeText } from "./code-text";
 import { Label } from "./label";
 import { SuccessMessage } from "./success-message";
 import { ErrorMessage } from "./error-message";
@@ -39,12 +39,12 @@ export {
   Button,
   Checkbox,
   CheckboxField,
-  Code,
+  CodeText,
   ErrorMessage,
   Form,
   Fragment,
   Heading,
-  Html,
+  HtmlEmbed,
   Image,
   Input,
   Italic,

package/lib/components/{html.js → html-embed.js}

@@ -46,20 +46,20 @@ const InnerHtml = (props) => {
 };
 const Placeholder = (props) => {
   const { code, innerRef, ...rest } = props;
-  return /* @__PURE__ */ jsx("div", { ref: innerRef, ...rest, style: { padding: "20px" }, children: 'Paste html into "Code" prop' });
+  return /* @__PURE__ */ jsx("div", { ref: innerRef, ...rest, style: { padding: "20px" }, children: 'Open "Properties" panel to insert HTML code' });
 };
-const Html = forwardRef((props, ref) => {
+const HtmlEmbed = forwardRef((props, ref) => {
   const { renderer } = useContext(ReactSdkContext);
-  const { code, executeScriptInCanvas, ...rest } = props;
+  const { code, executeScriptOnCanvas, ...rest } = props;
   if (code === void 0 || code.trim().length === 0) {
     return /* @__PURE__ */ jsx(Placeholder, { innerRef: ref, ...rest });
   }
-  if (renderer === "canvas" && executeScriptInCanvas === true) {
+  if (renderer === "canvas" && executeScriptOnCanvas === true) {
     return /* @__PURE__ */ jsx(ExecutableHtml, { innerRef: ref, code, ...rest });
   }
   return /* @__PURE__ */ jsx(InnerHtml, { innerRef: ref, code, ...rest });
 });
-Html.displayName = "Html";
+HtmlEmbed.displayName = "HtmlEmbed";
 export {
-  Html
+  HtmlEmbed
 };

package/lib/components/{html.ws.js → html-embed.ws.js}

@@ -1,10 +1,10 @@
-import { CodeIcon } from "@webstudio-is/icons/svg";
-import { props } from "./__generated__/html.props";
+import { EmbedIcon } from "@webstudio-is/icons/svg";
+import { props } from "./__generated__/html-embed.props";
 const meta = {
   category: "general",
   type: "embed",
-  label: "Html",
-  icon: CodeIcon
+  label: "HTML Embed",
+  icon: EmbedIcon
 };
 const propsMeta = {
   props: {

package/lib/components/index.js

@@ -1,6 +1,6 @@
 import { meta as SlotMeta } from "./slot.ws";
 import { meta as FragmentMeta } from "./fragment.ws";
-import { meta as HtmlMeta } from "./html.ws";
+import { meta as HtmlEmbedMeta } from "./html-embed.ws";
 import { meta as BodyMeta } from "./body.ws";
 import { meta as BoxMeta } from "./box.ws";
 import { meta as TextBlockMeta } from "./text-block.ws";
@@ -22,7 +22,7 @@ import { meta as BlockquoteMeta } from "./blockquote.ws";
 import { meta as ListMeta } from "./list.ws";
 import { meta as ListItemMeta } from "./list-item.ws";
 import { meta as SeparatorMeta } from "./separator.ws";
-import { meta as CodeMeta } from "./code.ws";
+import { meta as CodeTextMeta } from "./code-text.ws";
 import { meta as LabelMeta } from "./label.ws";
 import { meta as SuccessMessageMeta } from "./success-message.ws";
 import { meta as ErrorMessageMeta } from "./error-message.ws";
@@ -33,7 +33,7 @@ import { meta as CheckboxFieldMeta } from "./checkbox-field.ws";
 import { meta as CheckboxMeta } from "./checkbox.ws";
 import { propsMeta as SlotMetaPropsMeta } from "./slot.ws";
 import { propsMeta as FragmentMetaPropsMeta } from "./fragment.ws";
-import { propsMeta as HtmlMetaPropsMeta } from "./html.ws";
+import { propsMeta as HtmlEmbedMetaPropsMeta } from "./html-embed.ws";
 import { propsMeta as BodyMetaPropsMeta } from "./body.ws";
 import { propsMeta as BoxMetaPropsMeta } from "./box.ws";
 import { propsMeta as TextBlockMetaPropsMeta } from "./text-block.ws";
@@ -55,7 +55,7 @@ import { propsMeta as BlockquotePropsMeta } from "./blockquote.ws";
 import { propsMeta as ListPropsMeta } from "./list.ws";
 import { propsMeta as ListItemPropsMeta } from "./list-item.ws";
 import { propsMeta as SeparatorPropsMeta } from "./separator.ws";
-import { propsMeta as CodePropsMeta } from "./code.ws";
+import { propsMeta as CodeTextPropsMeta } from "./code-text.ws";
 import { propsMeta as LabelPropsMeta } from "./label.ws";
 import { propsMeta as SuccessMessagePropsMeta } from "./success-message.ws";
 import { propsMeta as ErrorMessagePropsMeta } from "./error-message.ws";
@@ -67,7 +67,7 @@ import { propsMeta as CheckboxPropsMeta } from "./checkbox.ws";
 const defaultMetas = {
   Slot: SlotMeta,
   Fragment: FragmentMeta,
-  Html: HtmlMeta,
+  HtmlEmbed: HtmlEmbedMeta,
   Box: BoxMeta,
   Body: BodyMeta,
   TextBlock: TextBlockMeta,
@@ -89,7 +89,7 @@ const defaultMetas = {
   List: ListMeta,
   ListItem: ListItemMeta,
   Separator: SeparatorMeta,
-  Code: CodeMeta,
+  CodeText: CodeTextMeta,
   Label: LabelMeta,
   SuccessMessage: SuccessMessageMeta,
   ErrorMessage: ErrorMessageMeta,
@@ -113,7 +113,7 @@ const registerComponentMetas = (overrides) => {
 const defaultPropsMetas = {
   Slot: SlotMetaPropsMeta,
   Fragment: FragmentMetaPropsMeta,
-  Html: HtmlMetaPropsMeta,
+  HtmlEmbed: HtmlEmbedMetaPropsMeta,
   Box: BoxMetaPropsMeta,
   Body: BodyMetaPropsMeta,
   TextBlock: TextBlockMetaPropsMeta,
@@ -135,7 +135,7 @@ const defaultPropsMetas = {
   List: ListPropsMeta,
   ListItem: ListItemPropsMeta,
   Separator: SeparatorPropsMeta,
-  Code: CodePropsMeta,
+  CodeText: CodeTextPropsMeta,
   Label: LabelPropsMeta,
   SuccessMessage: SuccessMessagePropsMeta,
   ErrorMessage: ErrorMessagePropsMeta,

package/lib/types/components/{code.d.ts → code-text.d.ts}

@@ -5,5 +5,5 @@ type Props = Omit<ComponentProps<typeof defaultTag>, "inline"> & {
     inline?: boolean;
     meta?: string;
 };
-export declare const Code: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export declare const CodeText: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLElement>>;
 export {};

package/lib/types/components/{code.stories.d.ts → code-text.stories.d.ts}

@@ -5,7 +5,7 @@ declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<
     meta?: string | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLElement>>>;
 export default _default;
-export declare const Code: ComponentStory<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "inline"> & {
+export declare const CodeText: ComponentStory<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "inline"> & {
     inline?: boolean | undefined;
     meta?: string | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLElement>>>;

package/lib/types/components/components.d.ts

@@ -7,7 +7,7 @@
  */
 export { Slot } from "./slot";
 export { Fragment } from "./fragment";
-export { Html } from "./html";
+export { HtmlEmbed } from "./html-embed";
 export { Body } from "./body";
 export { Box } from "./box";
 export { TextBlock } from "./text-block";
@@ -29,7 +29,7 @@ export { Blockquote } from "./blockquote";
 export { List } from "./list";
 export { ListItem } from "./list-item";
 export { Separator } from "./separator";
-export { Code } from "./code";
+export { CodeText } from "./code-text";
 export { Label } from "./label";
 export { SuccessMessage } from "./success-message";
 export { ErrorMessage } from "./error-message";

package/lib/types/components/html-embed.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type Props = {
+    code: string;
+    executeScriptOnCanvas: boolean;
+};
+export declare const HtmlEmbed: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/lib/types/components/{html.stories.d.ts → html-embed.stories.d.ts}

@@ -2,10 +2,10 @@
 import type { ComponentStory, ComponentMeta } from "@storybook/react";
 declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<{
     code: string;
-    executeScriptInCanvas: boolean;
+    executeScriptOnCanvas: boolean;
 } & import("react").RefAttributes<HTMLDivElement>>>;
 export default _default;
-export declare const Html: ComponentStory<import("react").ForwardRefExoticComponent<{
+export declare const HtmlEmbed: ComponentStory<import("react").ForwardRefExoticComponent<{
     code: string;
-    executeScriptInCanvas: boolean;
+    executeScriptOnCanvas: boolean;
 } & import("react").RefAttributes<HTMLDivElement>>>;

package/lib/types/css/style-rules.d.ts

@@ -193,9 +193,9 @@ export declare const getStyleRules: (styles: Map<string, {
             })[];
         })[];
     };
+    property: "filter" | "float" | "fontFamily" | "width" | "height" | "clip" | "top" | "right" | `--${string}` | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "animationTimeline" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockStyle" | "borderBlockWidth" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineStyle" | "borderInlineWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "color" | "printColorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontVariationSettings" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lineBreak" | "lineClamp" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflow" | "overflowAnchor" | "overflowBlock" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "scrollBehavior" | "scrollMarginBlockStart" | "scrollMarginBlockEnd" | "scrollMarginBottom" | "scrollMarginInlineStart" | "scrollMarginInlineEnd" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockStart" | "scrollPaddingBlockEnd" | "scrollPaddingBottom" | "scrollPaddingInlineStart" | "scrollPaddingInlineEnd" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex";
     styleSourceId: string;
     breakpointId: string;
-    property: "filter" | "float" | "fontFamily" | "width" | "height" | "clip" | "top" | "right" | `--${string}` | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "animationTimeline" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockStyle" | "borderBlockWidth" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineStyle" | "borderInlineWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "color" | "printColorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontVariationSettings" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lineBreak" | "lineClamp" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflow" | "overflowAnchor" | "overflowBlock" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "scrollBehavior" | "scrollMarginBlockStart" | "scrollMarginBlockEnd" | "scrollMarginBottom" | "scrollMarginInlineStart" | "scrollMarginInlineEnd" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockStart" | "scrollPaddingBlockEnd" | "scrollPaddingBottom" | "scrollPaddingInlineStart" | "scrollPaddingInlineEnd" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex";
 }>, styleSourceSelections: Map<string, {
     values: string[];
     instanceId: string;

package/lib/types/embed-template.d.ts

@@ -1718,9 +1718,9 @@ export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
                 })[];
             })[];
         };
+        property: "filter" | "float" | "fontFamily" | "width" | "height" | "clip" | "top" | "right" | `--${string}` | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "animationTimeline" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockStyle" | "borderBlockWidth" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineStyle" | "borderInlineWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "color" | "printColorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontVariationSettings" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lineBreak" | "lineClamp" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflow" | "overflowAnchor" | "overflowBlock" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "scrollBehavior" | "scrollMarginBlockStart" | "scrollMarginBlockEnd" | "scrollMarginBottom" | "scrollMarginInlineStart" | "scrollMarginInlineEnd" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockStart" | "scrollPaddingBlockEnd" | "scrollPaddingBottom" | "scrollPaddingInlineStart" | "scrollPaddingInlineEnd" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex";
         styleSourceId: string;
         breakpointId: string;
-        property: "filter" | "float" | "fontFamily" | "width" | "height" | "clip" | "top" | "right" | `--${string}` | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "animationTimeline" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockStyle" | "borderBlockWidth" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineStyle" | "borderInlineWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "color" | "printColorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontVariationSettings" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lineBreak" | "lineClamp" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflow" | "overflowAnchor" | "overflowBlock" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "scrollBehavior" | "scrollMarginBlockStart" | "scrollMarginBlockEnd" | "scrollMarginBottom" | "scrollMarginInlineStart" | "scrollMarginInlineEnd" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockStart" | "scrollPaddingBlockEnd" | "scrollPaddingBottom" | "scrollPaddingInlineStart" | "scrollPaddingInlineEnd" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex";
     }[];
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.66.0",
+  "version": "0.67.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -18,8 +18,8 @@
     "typescript": "5.0.3",
     "zod": "^3.19.1",
     "@webstudio-is/jest-config": "^1.0.6",
-    "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",
+    "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/tsconfig": "^1.0.6"
   },
   "peerDependencies": {
@@ -36,17 +36,17 @@
     "nanoevents": "^7.0.1",
     "nanoid": "^3.2.0",
     "nanostores": "^0.7.1",
-    "@webstudio-is/asset-uploader": "^0.66.0",
-    "@webstudio-is/css-data": "^0.66.0",
-    "@webstudio-is/css-engine": "^0.66.0",
-    "@webstudio-is/css-vars": "^0.66.0",
-    "@webstudio-is/fonts": "^0.66.0",
-    "@webstudio-is/form-handlers": "^0.66.0",
-    "@webstudio-is/generate-arg-types": "^0.66.0",
-    "@webstudio-is/icons": "^0.66.0",
-    "@webstudio-is/image": "^0.66.0",
-    "@webstudio-is/prisma-client": "^0.66.0",
-    "@webstudio-is/project-build": "^0.66.0"
+    "@webstudio-is/asset-uploader": "^0.67.0",
+    "@webstudio-is/css-data": "^0.67.0",
+    "@webstudio-is/css-engine": "^0.67.0",
+    "@webstudio-is/css-vars": "^0.67.0",
+    "@webstudio-is/fonts": "^0.67.0",
+    "@webstudio-is/form-handlers": "^0.67.0",
+    "@webstudio-is/generate-arg-types": "^0.67.0",
+    "@webstudio-is/icons": "^0.67.0",
+    "@webstudio-is/image": "^0.67.0",
+    "@webstudio-is/prisma-client": "^0.67.0",
+    "@webstudio-is/project-build": "^0.67.0"
   },
   "exports": {
     ".": {

package/src/app/custom-components/index.ts

@@ -16,7 +16,10 @@ export const customComponents = {
 };
 
 export const customComponentPropsMetas: Record<string, WsComponentPropsMeta> = {
-  Image: { props: imageProps },
+  Image: {
+    props: imageProps,
+    initialProps: ["src", "width", "height", "alt", "loading"],
+  },
   Form: formPropsMeta,
 };
 

package/src/components/__generated__/{html.props.ts → html-embed.props.ts}

@@ -2,7 +2,7 @@ import type { PropMeta } from "@webstudio-is/generate-arg-types";
 
 export const props: Record<string, PropMeta> = {
   code: { required: true, control: "text", type: "string" },
-  executeScriptInCanvas: {
+  executeScriptOnCanvas: {
     required: true,
     control: "boolean",
     type: "boolean",

package/src/components/code-text.stories.tsx

@@ -0,0 +1,16 @@
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { CodeText as CodeTextPrimitive } from "./code-text";
+
+export default {
+  title: "Components/CodeText",
+  component: CodeTextPrimitive,
+} as ComponentMeta<typeof CodeTextPrimitive>;
+
+const Template: ComponentStory<typeof CodeTextPrimitive> = (args) => (
+  <CodeTextPrimitive {...args} />
+);
+
+export const CodeText = Template.bind({});
+CodeText.args = {
+  children: "alert('Hello World!')",
+};

package/src/components/{code.tsx → code-text.tsx}

@@ -19,7 +19,7 @@ type Props = Omit<ComponentProps<typeof defaultTag>, "inline"> & {
   meta?: string;
 };
 
-export const Code = forwardRef<ElementRef<typeof defaultTag>, Props>(
+export const CodeText = forwardRef<ElementRef<typeof defaultTag>, Props>(
   ({ inline = false, ...props }, ref) => {
     // @todo in the future we should expose the inline prop a an attribute
     // and define the display style in `presetStyle` in meta.
@@ -28,4 +28,4 @@ export const Code = forwardRef<ElementRef<typeof defaultTag>, Props>(
   }
 );
 
-Code.displayName = "Code";
+CodeText.displayName = "CodeText";

package/src/components/{code.ws.tsx → code-text.ws.tsx}

@@ -1,12 +1,12 @@
-import { CodeIcon } from "@webstudio-is/icons/svg";
+import { CodeTextIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates,
   type PresetStyle,
   type WsComponentMeta,
   type WsComponentPropsMeta,
 } from "./component-meta";
-import { type defaultTag, displayVarNamespace } from "./code";
-import { props } from "./__generated__/code.props";
+import { type defaultTag, displayVarNamespace } from "./code-text";
+import { props } from "./__generated__/code-text.props";
 import { code } from "../css/normalize";
 
 const presetStyle = {
@@ -38,8 +38,8 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   category: "general",
   type: "rich-text",
-  label: "Code",
-  icon: CodeIcon,
+  label: "Code Text",
+  icon: CodeTextIcon,
   states: defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Code you can edit" }],

package/src/components/components.ts

@@ -7,7 +7,7 @@
  */
 export { Slot } from "./slot";
 export { Fragment } from "./fragment";
-export { Html } from "./html";
+export { HtmlEmbed } from "./html-embed";
 export { Body } from "./body";
 export { Box } from "./box";
 export { TextBlock } from "./text-block";
@@ -29,7 +29,7 @@ export { Blockquote } from "./blockquote";
 export { List } from "./list";
 export { ListItem } from "./list-item";
 export { Separator } from "./separator";
-export { Code } from "./code";
+export { CodeText } from "./code-text";
 export { Label } from "./label";
 export { SuccessMessage } from "./success-message";
 export { ErrorMessage } from "./error-message";

package/src/components/html-embed.stories.tsx

@@ -0,0 +1,16 @@
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { HtmlEmbed as HtmlEmbedPrimitive } from "./html-embed";
+
+export default {
+  title: "Components/HtmlEmbed",
+  component: HtmlEmbedPrimitive,
+} as ComponentMeta<typeof HtmlEmbedPrimitive>;
+
+const Template: ComponentStory<typeof HtmlEmbedPrimitive> = (args) => (
+  <HtmlEmbedPrimitive {...args} />
+);
+
+export const HtmlEmbed = Template.bind({});
+HtmlEmbed.args = {
+  code: "<strong>custom code</strong>",
+};

package/src/components/{html.tsx → html-embed.tsx}

@@ -10,7 +10,7 @@ import { ReactSdkContext } from "../context";
 
 type Props = {
   code: string;
-  executeScriptInCanvas: boolean;
+  executeScriptOnCanvas: boolean;
 };
 
 type ChildProps = {
@@ -72,25 +72,25 @@ const Placeholder = (props: ChildProps) => {
   const { code, innerRef, ...rest } = props;
   return (
     <div ref={innerRef} {...rest} style={{ padding: "20px" }}>
-      {'Paste html into "Code" prop'}
+      {'Open "Properties" panel to insert HTML code'}
     </div>
   );
 };
 
-export const Html = forwardRef<HTMLDivElement, Props>((props, ref) => {
+export const HtmlEmbed = forwardRef<HTMLDivElement, Props>((props, ref) => {
   const { renderer } = useContext(ReactSdkContext);
-  const { code, executeScriptInCanvas, ...rest } = props;
+  const { code, executeScriptOnCanvas, ...rest } = props;
 
   // code can be actually undefined when prop is not provided
   if (code === undefined || code.trim().length === 0) {
     return <Placeholder innerRef={ref} {...rest} />;
   }
 
-  if (renderer === "canvas" && executeScriptInCanvas === true) {
+  if (renderer === "canvas" && executeScriptOnCanvas === true) {
     return <ExecutableHtml innerRef={ref} code={code} {...rest} />;
   }
 
   return <InnerHtml innerRef={ref} code={code} {...rest} />;
 });
 
-Html.displayName = "Html";
+HtmlEmbed.displayName = "HtmlEmbed";

package/src/components/{html.ws.ts → html-embed.ws.ts}

@@ -1,12 +1,12 @@
-import { CodeIcon } from "@webstudio-is/icons/svg";
+import { EmbedIcon } from "@webstudio-is/icons/svg";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
-import { props } from "./__generated__/html.props";
+import { props } from "./__generated__/html-embed.props";
 
 export const meta: WsComponentMeta = {
   category: "general",
   type: "embed",
-  label: "Html",
-  icon: CodeIcon,
+  label: "HTML Embed",
+  icon: EmbedIcon,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/index.ts

@@ -2,7 +2,7 @@ import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import type { ComponentName } from "./components-utils";
 import { meta as SlotMeta } from "./slot.ws";
 import { meta as FragmentMeta } from "./fragment.ws";
-import { meta as HtmlMeta } from "./html.ws";
+import { meta as HtmlEmbedMeta } from "./html-embed.ws";
 import { meta as BodyMeta } from "./body.ws";
 import { meta as BoxMeta } from "./box.ws";
 import { meta as TextBlockMeta } from "./text-block.ws";
@@ -24,7 +24,7 @@ import { meta as BlockquoteMeta } from "./blockquote.ws";
 import { meta as ListMeta } from "./list.ws";
 import { meta as ListItemMeta } from "./list-item.ws";
 import { meta as SeparatorMeta } from "./separator.ws";
-import { meta as CodeMeta } from "./code.ws";
+import { meta as CodeTextMeta } from "./code-text.ws";
 import { meta as LabelMeta } from "./label.ws";
 import { meta as SuccessMessageMeta } from "./success-message.ws";
 import { meta as ErrorMessageMeta } from "./error-message.ws";
@@ -37,7 +37,7 @@ import { meta as CheckboxMeta } from "./checkbox.ws";
 // these are huge JSON objects that we want to be tree-shaken when not used!
 import { propsMeta as SlotMetaPropsMeta } from "./slot.ws";
 import { propsMeta as FragmentMetaPropsMeta } from "./fragment.ws";
-import { propsMeta as HtmlMetaPropsMeta } from "./html.ws";
+import { propsMeta as HtmlEmbedMetaPropsMeta } from "./html-embed.ws";
 import { propsMeta as BodyMetaPropsMeta } from "./body.ws";
 import { propsMeta as BoxMetaPropsMeta } from "./box.ws";
 import { propsMeta as TextBlockMetaPropsMeta } from "./text-block.ws";
@@ -59,7 +59,7 @@ import { propsMeta as BlockquotePropsMeta } from "./blockquote.ws";
 import { propsMeta as ListPropsMeta } from "./list.ws";
 import { propsMeta as ListItemPropsMeta } from "./list-item.ws";
 import { propsMeta as SeparatorPropsMeta } from "./separator.ws";
-import { propsMeta as CodePropsMeta } from "./code.ws";
+import { propsMeta as CodeTextPropsMeta } from "./code-text.ws";
 import { propsMeta as LabelPropsMeta } from "./label.ws";
 import { propsMeta as SuccessMessagePropsMeta } from "./success-message.ws";
 import { propsMeta as ErrorMessagePropsMeta } from "./error-message.ws";
@@ -73,7 +73,7 @@ import { propsMeta as CheckboxPropsMeta } from "./checkbox.ws";
 export const defaultMetas: Record<string, WsComponentMeta> = {
   Slot: SlotMeta,
   Fragment: FragmentMeta,
-  Html: HtmlMeta,
+  HtmlEmbed: HtmlEmbedMeta,
   Box: BoxMeta,
   Body: BodyMeta,
   TextBlock: TextBlockMeta,
@@ -95,7 +95,7 @@ export const defaultMetas: Record<string, WsComponentMeta> = {
   List: ListMeta,
   ListItem: ListItemMeta,
   Separator: SeparatorMeta,
-  Code: CodeMeta,
+  CodeText: CodeTextMeta,
   Label: LabelMeta,
   SuccessMessage: SuccessMessageMeta,
   ErrorMessage: ErrorMessageMeta,
@@ -126,7 +126,7 @@ export const registerComponentMetas = (
 export const defaultPropsMetas: Record<string, WsComponentPropsMeta> = {
   Slot: SlotMetaPropsMeta,
   Fragment: FragmentMetaPropsMeta,
-  Html: HtmlMetaPropsMeta,
+  HtmlEmbed: HtmlEmbedMetaPropsMeta,
   Box: BoxMetaPropsMeta,
   Body: BodyMetaPropsMeta,
   TextBlock: TextBlockMetaPropsMeta,
@@ -148,7 +148,7 @@ export const defaultPropsMetas: Record<string, WsComponentPropsMeta> = {
   List: ListPropsMeta,
   ListItem: ListItemPropsMeta,
   Separator: SeparatorPropsMeta,
-  Code: CodePropsMeta,
+  CodeText: CodeTextPropsMeta,
   Label: LabelPropsMeta,
   SuccessMessage: SuccessMessagePropsMeta,
   ErrorMessage: ErrorMessagePropsMeta,

package/lib/types/components/html.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-type Props = {
-    code: string;
-    executeScriptInCanvas: boolean;
-};
-export declare const Html: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
-export {};

package/src/components/code.stories.tsx

@@ -1,16 +0,0 @@
-import type { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Code as CodePrimitive } from "./code";
-
-export default {
-  title: "Components/Code",
-  component: CodePrimitive,
-} as ComponentMeta<typeof CodePrimitive>;
-
-const Template: ComponentStory<typeof CodePrimitive> = (args) => (
-  <CodePrimitive {...args} />
-);
-
-export const Code = Template.bind({});
-Code.args = {
-  children: "alert('Hello World!')",
-};

package/src/components/html.stories.tsx

@@ -1,16 +0,0 @@
-import type { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Html as HtmlPrimitive } from "./html";
-
-export default {
-  title: "Components/Html",
-  component: HtmlPrimitive,
-} as ComponentMeta<typeof HtmlPrimitive>;
-
-const Template: ComponentStory<typeof HtmlPrimitive> = (args) => (
-  <HtmlPrimitive {...args} />
-);
-
-export const Html = Template.bind({});
-Html.args = {
-  code: "<strong>custom code</strong>",
-};