@webstudio-is/react-sdk 0.95.0 → 0.96.0

package/lib/index.js

@@ -1,37 +1,1848 @@
-"use strict";
-export * from "./css";
-export * from "./tree";
-export * from "./pubsub";
-export * from "./app";
-export * from "./components/components-utils";
-export { PropMeta } from "./prop-meta";
+// src/css/global-rules.ts
+import { getFontFaces } from "@webstudio-is/fonts";
+var addGlobalRules = (engine, { assets, assetBaseUrl }) => {
+  engine.addPlaintextRule("html {margin: 0; display: grid; min-height: 100%}");
+  const fontAssets = [];
+  for (const asset of assets.values()) {
+    if (asset.type === "font") {
+      fontAssets.push(asset);
+    }
+  }
+  const fontFaces = getFontFaces(fontAssets, { assetBaseUrl });
+  for (const fontFace of fontFaces) {
+    engine.addFontFaceRule(fontFace);
+  }
+};
+
+// src/tree/create-elements-tree.tsx
+import {
+  Fragment
+} from "react";
+
+// src/context.tsx
+import { atom } from "nanostores";
+import { createContext } from "react";
+var ReactSdkContext = createContext({
+  imageBaseUrl: "/",
+  assetBaseUrl: "/",
+  propsByInstanceIdStore: atom(/* @__PURE__ */ new Map()),
+  assetsStore: atom(/* @__PURE__ */ new Map()),
+  pagesStore: atom(/* @__PURE__ */ new Map()),
+  dataSourceValuesStore: atom(/* @__PURE__ */ new Map()),
+  executeEffectfulExpression: () => {
+    throw Error("React SDK executeEffectfulExpression is not implemented");
+  },
+  setDataSourceValues: () => {
+    throw Error("React SDK setBoundDataSourceValue is not implemented");
+  },
+  setBoundDataSourceValue: () => {
+    throw Error("React SDK setBoundDataSourceValue is not implemented");
+  },
+  indexesWithinAncestors: /* @__PURE__ */ new Map()
+});
+
+// src/tree/create-elements-tree.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var createElementsTree = ({
+  renderer,
+  imageBaseUrl,
+  assetBaseUrl,
+  instances,
+  rootInstanceId,
+  propsByInstanceIdStore,
+  assetsStore,
+  pagesStore,
+  dataSourceValuesStore,
+  executeEffectfulExpression: executeEffectfulExpression2,
+  onDataSourceUpdate,
+  indexesWithinAncestors,
+  Component,
+  components,
+  scripts
+}) => {
+  const rootInstance = instances.get(rootInstanceId);
+  if (rootInstance === void 0) {
+    return null;
+  }
+  const rootInstanceSelector = [rootInstanceId];
+  const children = createInstanceChildrenElements({
+    instances,
+    instanceSelector: rootInstanceSelector,
+    Component,
+    children: rootInstance.children,
+    components
+  });
+  const root = createInstanceElement({
+    Component,
+    instance: rootInstance,
+    instanceSelector: rootInstanceSelector,
+    children: [
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        children,
+        scripts
+      ] }, "children")
+    ],
+    components
+  });
+  return /* @__PURE__ */ jsx(
+    ReactSdkContext.Provider,
+    {
+      value: {
+        propsByInstanceIdStore,
+        assetsStore,
+        pagesStore,
+        dataSourceValuesStore,
+        renderer,
+        imageBaseUrl,
+        assetBaseUrl,
+        indexesWithinAncestors,
+        executeEffectfulExpression: executeEffectfulExpression2,
+        setDataSourceValues: onDataSourceUpdate,
+        setBoundDataSourceValue: (instanceId, propName, value) => {
+          const propsByInstanceId = propsByInstanceIdStore.get();
+          const props = propsByInstanceId.get(instanceId);
+          const prop = props?.find((prop2) => prop2.name === propName);
+          if (prop?.type !== "dataSource") {
+            throw Error(`${propName} is not data source`);
+          }
+          const dataSourceId = prop.value;
+          const newValues = /* @__PURE__ */ new Map();
+          newValues.set(dataSourceId, value);
+          onDataSourceUpdate(newValues);
+        }
+      },
+      children: root
+    }
+  );
+};
+var createInstanceChildrenElements = ({
+  instances,
+  instanceSelector,
+  children,
+  Component,
+  components
+}) => {
+  const elements = [];
+  for (const child of children) {
+    if (child.type === "text") {
+      elements.push(child.value);
+      continue;
+    }
+    const childInstance = instances.get(child.value);
+    if (childInstance === void 0) {
+      continue;
+    }
+    const childInstanceSelector = [child.value, ...instanceSelector];
+    const children2 = createInstanceChildrenElements({
+      instances,
+      instanceSelector: childInstanceSelector,
+      children: childInstance.children,
+      Component,
+      components
+    });
+    const element = createInstanceElement({
+      instance: childInstance,
+      instanceSelector: childInstanceSelector,
+      Component,
+      children: children2,
+      components
+    });
+    elements.push(element);
+  }
+  return elements;
+};
+var createInstanceElement = ({
+  Component,
+  instance,
+  instanceSelector,
+  children = [],
+  components
+}) => {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      instance,
+      instanceSelector,
+      components,
+      children
+    },
+    instance.id
+  );
+};
+
+// src/tree/root.ts
+import {
+  useRef,
+  useCallback
+} from "react";
+import {
+  atom as atom2,
+  computed as computed2
+} from "nanostores";
+
+// src/tree/webstudio-component.tsx
+import { Fragment as Fragment2, forwardRef } from "react";
+
+// src/props.ts
+import { useContext, useMemo } from "react";
+import { computed } from "nanostores";
+import { useStore } from "@nanostores/react";
+var getPropsByInstanceId = (props) => {
+  const propsByInstanceId = /* @__PURE__ */ new Map();
+  for (const prop of props.values()) {
+    let instanceProps = propsByInstanceId.get(prop.instanceId);
+    if (instanceProps === void 0) {
+      instanceProps = [];
+      propsByInstanceId.set(prop.instanceId, instanceProps);
+    }
+    instanceProps.push(prop);
+  }
+  return propsByInstanceId;
+};
+var useInstanceProps = (instanceId) => {
+  const {
+    propsByInstanceIdStore,
+    dataSourceValuesStore,
+    executeEffectfulExpression: executeEffectfulExpression2,
+    setDataSourceValues,
+    indexesWithinAncestors
+  } = useContext(ReactSdkContext);
+  const index = indexesWithinAncestors.get(instanceId);
+  const instancePropsObjectStore = useMemo(() => {
+    return computed(
+      [propsByInstanceIdStore, dataSourceValuesStore],
+      (propsByInstanceId, dataSourceValues) => {
+        const instancePropsObject2 = {};
+        if (index !== void 0) {
+          instancePropsObject2[indexAttribute] = index.toString();
+        }
+        const instanceProps = propsByInstanceId.get(instanceId);
+        if (instanceProps === void 0) {
+          return instancePropsObject2;
+        }
+        for (const prop of instanceProps) {
+          if (prop.type === "asset" || prop.type === "page") {
+            continue;
+          }
+          if (prop.type === "dataSource") {
+            const dataSourceId = prop.value;
+            const value = dataSourceValues.get(dataSourceId);
+            if (value !== void 0) {
+              instancePropsObject2[prop.name] = value;
+            }
+            continue;
+          }
+          if (prop.type === "action") {
+            instancePropsObject2[prop.name] = (...args) => {
+              for (const value of prop.value) {
+                if (value.type === "execute") {
+                  const argsMap = /* @__PURE__ */ new Map();
+                  for (const [i, name] of value.args.entries()) {
+                    argsMap.set(name, args[i]);
+                  }
+                  const newValues = executeEffectfulExpression2(
+                    value.code,
+                    argsMap,
+                    dataSourceValues
+                  );
+                  setDataSourceValues(newValues);
+                }
+              }
+            };
+            continue;
+          }
+          instancePropsObject2[prop.name] = prop.value;
+        }
+        return instancePropsObject2;
+      }
+    );
+  }, [
+    propsByInstanceIdStore,
+    dataSourceValuesStore,
+    instanceId,
+    executeEffectfulExpression2,
+    setDataSourceValues,
+    index
+  ]);
+  const instancePropsObject = useStore(instancePropsObjectStore);
+  return instancePropsObject;
+};
+var usePropAsset = (instanceId, name) => {
+  const { propsByInstanceIdStore, assetsStore } = useContext(ReactSdkContext);
+  const assetStore = useMemo(() => {
+    return computed(
+      [propsByInstanceIdStore, assetsStore],
+      (propsByInstanceId, assets) => {
+        const instanceProps = propsByInstanceId.get(instanceId);
+        if (instanceProps === void 0) {
+          return;
+        }
+        for (const prop of instanceProps) {
+          if (prop.type === "asset" && prop.name === name) {
+            const assetId = prop.value;
+            return assets.get(assetId);
+          }
+        }
+      }
+    );
+  }, [propsByInstanceIdStore, assetsStore, instanceId, name]);
+  const asset = useStore(assetStore);
+  return asset;
+};
+var resolveUrlProp = (instanceId, name, {
+  props,
+  pages,
+  assets
+}) => {
+  const instanceProps = props.get(instanceId);
+  if (instanceProps === void 0) {
+    return;
+  }
+  let prop = void 0;
+  for (const intanceProp of instanceProps) {
+    if (intanceProp.name !== name) {
+      continue;
+    }
+    prop = intanceProp;
+  }
+  if (prop === void 0) {
+    return;
+  }
+  if (prop.type === "page") {
+    if (typeof prop.value === "string") {
+      const page2 = pages.get(prop.value);
+      return page2 && { type: "page", page: page2 };
+    }
+    const { instanceId: instanceId2, pageId } = prop.value;
+    const page = pages.get(pageId);
+    if (page === void 0) {
+      return;
+    }
+    const idProp = props.get(instanceId2)?.find((prop2) => prop2.name === "id");
+    return {
+      type: "page",
+      page,
+      instanceId: instanceId2,
+      hash: idProp === void 0 || idProp.type !== "string" ? void 0 : idProp.value
+    };
+  }
+  if (prop.type === "string") {
+    for (const page of pages.values()) {
+      if (page.path === prop.value) {
+        return { type: "page", page };
+      }
+    }
+    return { type: "string", url: prop.value };
+  }
+  if (prop.type === "asset") {
+    const asset = assets.get(prop.value);
+    return asset && { type: "asset", asset };
+  }
+  return;
+};
+var usePropUrl = (instanceId, name) => {
+  const { propsByInstanceIdStore, pagesStore, assetsStore } = useContext(ReactSdkContext);
+  const store = useMemo(
+    () => computed(
+      [propsByInstanceIdStore, pagesStore, assetsStore],
+      (props, pages, assets) => resolveUrlProp(instanceId, name, { props, pages, assets })
+    ),
+    [propsByInstanceIdStore, pagesStore, assetsStore, instanceId, name]
+  );
+  return useStore(store);
+};
+var getInstanceIdFromComponentProps = (props) => {
+  return props[idAttribute];
+};
+var getIndexWithinAncestorFromComponentProps = (props) => {
+  return props[indexAttribute];
+};
+
+// src/tree/webstudio-component.tsx
+import { Fragment as Fragment3, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var renderText = (text) => {
+  const lines = text.split("\n");
+  return lines.map((line, index) => /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    line,
+    index < lines.length - 1 ? /* @__PURE__ */ jsx2("br", {}) : null
+  ] }, index));
+};
+var renderWebstudioComponentChildren = (children) => {
+  if (children === void 0 || children.length === 0) {
+    return;
+  }
+  return children.map((child) => {
+    return typeof child === "string" ? renderText(child) : child;
+  });
+};
+var WebstudioComponent = forwardRef(({ instance, instanceSelector, children, components, ...rest }, ref) => {
+  const { [showAttribute]: show = true, ...instanceProps } = useInstanceProps(
+    instance.id
+  );
+  const props = {
+    ...instanceProps,
+    ...rest,
+    [idAttribute]: instance.id,
+    [componentAttribute]: instance.component
+  };
+  if (show === false) {
+    return /* @__PURE__ */ jsx2(Fragment3, {});
+  }
+  const Component = components.get(instance.component);
+  if (Component === void 0) {
+    return /* @__PURE__ */ jsx2(Fragment3, {});
+  }
+  return /* @__PURE__ */ jsx2(Component, { ...props, ref, children: renderWebstudioComponentChildren(children) });
+});
+var idAttribute = "data-ws-id";
+var selectorIdAttribute = "data-ws-selector";
+var componentAttribute = "data-ws-component";
+var showAttribute = "data-ws-show";
+var indexAttribute = "data-ws-index";
+var collapsedAttribute = "data-ws-collapsed";
+var splitPropsWithWebstudioAttributes = ({
+  [idAttribute]: idAttributeValue,
+  [componentAttribute]: componentAttributeValue,
+  [showAttribute]: showAttributeValue,
+  [collapsedAttribute]: collapsedAttributeValue,
+  [selectorIdAttribute]: parentIdAttributeValue,
+  ...props
+}) => [
+  {
+    [idAttribute]: idAttributeValue,
+    [componentAttribute]: componentAttributeValue,
+    [showAttribute]: showAttributeValue,
+    [collapsedAttribute]: collapsedAttributeValue,
+    [selectorIdAttribute]: parentIdAttributeValue
+  },
+  props
+];
+
+// src/tree/root.ts
+var InstanceRoot = ({
+  data,
+  utils,
+  Component,
+  components,
+  scripts
+}) => {
+  const {
+    indexesWithinAncestors,
+    executeComputingExpressions: executeComputingExpressions2,
+    executeEffectfulExpression: executeEffectfulExpression2
+  } = utils;
+  const dataSourceVariablesStoreRef = useRef(void 0);
+  if (dataSourceVariablesStoreRef.current === void 0) {
+    dataSourceVariablesStoreRef.current = atom2(/* @__PURE__ */ new Map());
+  }
+  const dataSourceVariablesStore = dataSourceVariablesStoreRef.current;
+  const dataSourceValuesStoreRef = useRef(void 0);
+  if (dataSourceValuesStoreRef.current === void 0) {
+    dataSourceValuesStoreRef.current = computed2(
+      dataSourceVariablesStore,
+      (dataSourceVariables) => {
+        const dataSourceValues = /* @__PURE__ */ new Map();
+        for (const [dataSourceId, dataSource] of data.build.dataSources) {
+          if (dataSource.type === "variable") {
+            const value = dataSourceVariables.get(dataSourceId) ?? dataSource.value.value;
+            dataSourceValues.set(dataSourceId, value);
+          }
+        }
+        try {
+          const result = executeComputingExpressions2(dataSourceValues);
+          for (const [id, value] of result) {
+            dataSourceValues.set(id, value);
+          }
+        } catch (error) {
+          console.error(error);
+        }
+        return dataSourceValues;
+      }
+    );
+  }
+  const dataSourceValuesStore = dataSourceValuesStoreRef.current;
+  const onDataSourceUpdate = useCallback(
+    (newValues) => {
+      const dataSourceVariables = new Map(dataSourceVariablesStore.get());
+      for (const [dataSourceId, value] of newValues) {
+        dataSourceVariables.set(dataSourceId, value);
+      }
+      dataSourceVariablesStore.set(dataSourceVariables);
+    },
+    [dataSourceVariablesStore]
+  );
+  return createElementsTree({
+    imageBaseUrl: data.params?.imageBaseUrl ?? "/",
+    assetBaseUrl: data.params?.assetBaseUrl ?? "/",
+    instances: new Map(data.build.instances),
+    rootInstanceId: data.page.rootInstanceId,
+    propsByInstanceIdStore: atom2(
+      getPropsByInstanceId(new Map(data.build.props))
+    ),
+    assetsStore: atom2(new Map(data.assets.map((asset) => [asset.id, asset]))),
+    pagesStore: atom2(new Map(data.pages.map((page) => [page.id, page]))),
+    indexesWithinAncestors,
+    executeEffectfulExpression: executeEffectfulExpression2,
+    dataSourceValuesStore,
+    onDataSourceUpdate,
+    Component: Component ?? WebstudioComponent,
+    components,
+    scripts
+  });
+};
+
+// src/css/style-rules.ts
+var getStyleRules = (styles, styleSourceSelections) => {
+  if (styles === void 0 || styleSourceSelections === void 0) {
+    return [];
+  }
+  const stylesByStyleSourceId = /* @__PURE__ */ new Map();
+  for (const styleDecl of styles.values()) {
+    const { styleSourceId } = styleDecl;
+    let styleSourceStyles = stylesByStyleSourceId.get(styleSourceId);
+    if (styleSourceStyles === void 0) {
+      styleSourceStyles = [];
+      stylesByStyleSourceId.set(styleSourceId, styleSourceStyles);
+    }
+    styleSourceStyles.push(styleDecl);
+  }
+  const styleRules = [];
+  for (const { instanceId, values } of styleSourceSelections.values()) {
+    const styleRuleByBreakpointId = /* @__PURE__ */ new Map();
+    for (const styleSourceId of values) {
+      const styleSourceStyles = stylesByStyleSourceId.get(styleSourceId);
+      if (styleSourceStyles === void 0) {
+        continue;
+      }
+      for (const {
+        breakpointId,
+        state,
+        property,
+        value
+      } of styleSourceStyles) {
+        const key = `${breakpointId}:${state ?? ""}`;
+        let styleRule = styleRuleByBreakpointId.get(key);
+        if (styleRule === void 0) {
+          styleRule = {
+            instanceId,
+            breakpointId,
+            state,
+            style: {}
+          };
+          styleRuleByBreakpointId.set(key, styleRule);
+        }
+        styleRule.style[property] = value;
+      }
+    }
+    styleRules.push(...styleRuleByBreakpointId.values());
+  }
+  return styleRules;
+};
+var getPresetStyleRules = (component, presetStyle) => {
+  const presetStyleRules = /* @__PURE__ */ new Map();
+  for (const [tag, styles] of Object.entries(presetStyle)) {
+    for (const styleDecl of styles) {
+      const selector = `${tag}:where([${componentAttribute}="${component}"])${styleDecl.state ?? ""}`;
+      let rule = presetStyleRules.get(selector);
+      if (rule === void 0) {
+        rule = {};
+        presetStyleRules.set(selector, rule);
+      }
+      rule[styleDecl.property] = styleDecl.value;
+    }
+  }
+  return presetStyleRules;
+};
+
+// src/css/css.ts
+import { createCssEngine } from "@webstudio-is/css-engine";
+var createImageValueTransformer = (assets, options) => (styleValue) => {
+  if (styleValue.type === "image" && styleValue.value.type === "asset") {
+    const asset = assets.get(styleValue.value.value);
+    if (asset === void 0) {
+      return { type: "keyword", value: "none" };
+    }
+    const { assetBaseUrl } = options;
+    const url = `${assetBaseUrl}${asset.name}`;
+    return {
+      type: "image",
+      value: {
+        type: "url",
+        url
+      },
+      hidden: styleValue.hidden
+    };
+  }
+};
+var generateCssText = (data, options) => {
+  const assets = new Map(data.assets.map((asset) => [asset.id, asset]));
+  const breakpoints = new Map(data.breakpoints);
+  const styles = new Map(data.styles);
+  const styleSourceSelections = new Map(data.styleSourceSelections);
+  const engine = createCssEngine({ name: "ssr" });
+  addGlobalRules(engine, {
+    assets,
+    assetBaseUrl: options.assetBaseUrl
+  });
+  for (const breakpoint of breakpoints.values()) {
+    engine.addMediaRule(breakpoint.id, breakpoint);
+  }
+  for (const [component, meta] of data.componentMetas) {
+    const presetStyle = meta.presetStyle;
+    if (presetStyle === void 0) {
+      continue;
+    }
+    const rules = getPresetStyleRules(component, presetStyle);
+    for (const [selector, style] of rules) {
+      engine.addStyleRule(selector, { style });
+    }
+  }
+  const styleRules = getStyleRules(styles, styleSourceSelections);
+  for (const { breakpointId, instanceId, state, style } of styleRules) {
+    engine.addStyleRule(
+      `[${idAttribute}="${instanceId}"]${state ?? ""}`,
+      {
+        breakpoint: breakpointId,
+        style
+      },
+      createImageValueTransformer(assets, options)
+    );
+  }
+  return engine.cssText;
+};
+
+// src/app/root.tsx
+import { Links, Meta, Outlet as DefaultOutlet } from "@remix-run/react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var Root = ({
+  Outlet = DefaultOutlet
+}) => {
+  return /* @__PURE__ */ jsxs3("html", { lang: "en", children: [
+    /* @__PURE__ */ jsxs3("head", { children: [
+      /* @__PURE__ */ jsx3("meta", { charSet: "utf-8" }),
+      /* @__PURE__ */ jsx3("meta", { name: "viewport", content: "width=device-width,initial-scale=1" }),
+      /* @__PURE__ */ jsx3("link", { rel: "icon", href: "/favicon.ico", type: "image/x-icon" }),
+      /* @__PURE__ */ jsx3("link", { rel: "shortcut icon", href: "/favicon.ico", type: "image/x-icon" }),
+      /* @__PURE__ */ jsx3(Meta, {}),
+      /* @__PURE__ */ jsx3(Links, {})
+    ] }),
+    /* @__PURE__ */ jsx3(Outlet, {})
+  ] });
+};
+
+// src/prop-meta.ts
+import { z } from "zod";
+var common = {
+  label: z.string().optional(),
+  description: z.string().optional(),
+  required: z.boolean()
+};
+var Number = z.object({
+  ...common,
+  control: z.literal("number"),
+  type: z.literal("number"),
+  defaultValue: z.number().optional()
+});
+var Range = z.object({
+  ...common,
+  control: z.literal("range"),
+  type: z.literal("number"),
+  defaultValue: z.number().optional()
+});
+var Text = z.object({
+  ...common,
+  control: z.literal("text"),
+  type: z.literal("string"),
+  defaultValue: z.string().optional(),
+  /**
+   * The number of rows in <textarea>. If set to 0 an <input> will be used instead.
+   * In line with Storybook team's plan: https://github.com/storybookjs/storybook/issues/21100
+   */
+  rows: z.number().optional()
+});
+var Code = z.object({
+  ...common,
+  control: z.literal("code"),
+  type: z.literal("string"),
+  defaultValue: z.string().optional(),
+  /**
+   * The number of rows in <textarea>. If set to 0 an <input> will be used instead.
+   * In line with Storybook team's plan: https://github.com/storybookjs/storybook/issues/21100
+   */
+  rows: z.number().optional()
+});
+var Color = z.object({
+  ...common,
+  control: z.literal("color"),
+  type: z.literal("string"),
+  defaultValue: z.string().optional()
+});
+var Boolean = z.object({
+  ...common,
+  control: z.literal("boolean"),
+  type: z.literal("boolean"),
+  defaultValue: z.boolean().optional()
+});
+var Radio = z.object({
+  ...common,
+  control: z.literal("radio"),
+  type: z.literal("string"),
+  defaultValue: z.string().optional(),
+  options: z.array(z.string())
+});
+var InlineRadio = z.object({
+  ...common,
+  control: z.literal("inline-radio"),
+  type: z.literal("string"),
+  defaultValue: z.string().optional(),
+  options: z.array(z.string())
+});
+var Select = z.object({
+  ...common,
+  control: z.literal("select"),
+  type: z.literal("string"),
+  defaultValue: z.string().optional(),
+  options: z.array(z.string())
+});
+var Check = z.object({
+  ...common,
+  control: z.literal("check"),
+  type: z.literal("string[]"),
+  defaultValue: z.array(z.string()).optional(),
+  options: z.array(z.string())
+});
+var InlineCheck = z.object({
+  ...common,
+  control: z.literal("inline-check"),
+  type: z.literal("string[]"),
+  defaultValue: z.array(z.string()).optional(),
+  options: z.array(z.string())
+});
+var MultiSelect = z.object({
+  ...common,
+  control: z.literal("multi-select"),
+  type: z.literal("string[]"),
+  defaultValue: z.array(z.string()).optional(),
+  options: z.array(z.string())
+});
+var File = z.object({
+  ...common,
+  control: z.literal("file"),
+  type: z.literal("string"),
+  defaultValue: z.string().optional(),
+  /** https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept */
+  accept: z.string().optional()
+});
+var Url = z.object({
+  ...common,
+  control: z.literal("url"),
+  type: z.literal("string"),
+  defaultValue: z.string().optional()
+});
+var ObjectType = z.object({
+  ...common,
+  control: z.literal("object"),
+  // @todo not sure what type should be here
+  // (we don't support Object yet, added for completeness)
+  type: z.literal("Record<string, string>"),
+  defaultValue: z.record(z.string()).optional()
+});
+var Date = z.object({
+  ...common,
+  control: z.literal("date"),
+  // @todo not sure what type should be here
+  // (we don't support Date yet, added for completeness)
+  type: z.literal("string"),
+  defaultValue: z.string().optional()
+});
+var Action = z.object({
+  ...common,
+  control: z.literal("action"),
+  type: z.literal("action"),
+  defaultValue: z.undefined().optional()
+});
+var PropMeta = z.union([
+  Number,
+  Range,
+  Text,
+  Code,
+  Color,
+  Boolean,
+  Radio,
+  InlineRadio,
+  Select,
+  MultiSelect,
+  Check,
+  InlineCheck,
+  File,
+  Url,
+  ObjectType,
+  Date,
+  Action
+]);
+
+// src/components/component-meta.ts
+import { z as z3 } from "zod";
+
+// src/embed-template.ts
+import { z as z2 } from "zod";
+import { nanoid } from "nanoid";
+import { titleCase } from "title-case";
+import { noCase } from "no-case";
+import { StyleValue } from "@webstudio-is/css-engine";
+
+// src/expression.ts
+import jsep from "jsep";
+import jsepAssignment from "@jsep-plugin/assignment";
+jsep.plugins.register(jsepAssignment);
+var generateCode = (node, failOnForbidden, effectful, transformIdentifier) => {
+  if (node.type === "Identifier") {
+    return transformIdentifier(node.name, false);
+  }
+  if (node.type === "MemberExpression") {
+    if (failOnForbidden) {
+      const object2 = generateCode(
+        node.object,
+        false,
+        effectful,
+        transformIdentifier
+      );
+      const property2 = generateCode(
+        node.property,
+        false,
+        effectful,
+        transformIdentifier
+      );
+      throw Error(`Cannot access "${property2}" of "${object2}"`);
+    }
+    const object = generateCode(
+      node.object,
+      failOnForbidden,
+      effectful,
+      transformIdentifier
+    );
+    const property = generateCode(
+      node.property,
+      failOnForbidden,
+      effectful,
+      transformIdentifier
+    );
+    return `${object}.${property}`;
+  }
+  if (node.type === "Literal") {
+    return node.raw;
+  }
+  if (node.type === "UnaryExpression") {
+    const arg = generateCode(
+      node.argument,
+      failOnForbidden,
+      effectful,
+      transformIdentifier
+    );
+    return `${node.operator}${arg}`;
+  }
+  if (node.type === "BinaryExpression") {
+    const left = generateCode(
+      node.left,
+      failOnForbidden,
+      effectful,
+      transformIdentifier
+    );
+    const right = generateCode(
+      node.right,
+      failOnForbidden,
+      effectful,
+      transformIdentifier
+    );
+    return `${left} ${node.operator} ${right}`;
+  }
+  if (node.type === "ArrayExpression") {
+    const elements = node.elements.map(
+      (element) => generateCode(
+        element,
+        failOnForbidden,
+        effectful,
+        transformIdentifier
+      )
+    );
+    return `[${elements.join(", ")}]`;
+  }
+  if (node.type === "CallExpression") {
+    if (failOnForbidden) {
+      const callee2 = generateCode(
+        node.callee,
+        false,
+        effectful,
+        transformIdentifier
+      );
+      throw Error(`Cannot call "${callee2}"`);
+    }
+    const callee = generateCode(
+      node.callee,
+      failOnForbidden,
+      effectful,
+      transformIdentifier
+    );
+    const args = node.arguments.map(
+      (arg) => generateCode(arg, failOnForbidden, effectful, transformIdentifier)
+    );
+    return `${callee}(${args.join(", ")})`;
+  }
+  if (node.type === "ThisExpression") {
+    if (failOnForbidden) {
+      throw Error(`"this" is not supported`);
+    }
+    return "this";
+  }
+  if (node.type === "ConditionalExpression") {
+    throw Error("Ternary operator is not supported");
+  }
+  if (node.type === "Compound") {
+    throw Error("Cannot use multiple expressions");
+  }
+  if (node.type === "AssignmentExpression") {
+    if (node.operator !== "=") {
+      throw Error(`Only "=" assignment operator is supported`);
+    }
+    if (effectful === false) {
+      throw Error(`Cannot use assignment in this expression`);
+    }
+    const left = generateCode(
+      node.left,
+      failOnForbidden,
+      effectful,
+      // override and mark all identifiers inside of left expression as assignee
+      (id) => transformIdentifier(id, true)
+    );
+    const right = generateCode(
+      node.right,
+      failOnForbidden,
+      effectful,
+      transformIdentifier
+    );
+    return `${left} ${node.operator} ${right}`;
+  }
+  if (node.type === "UpdateExpression") {
+    throw Error(`"${node.operator}" operator is not supported`);
+  }
+  node;
+  return "";
+};
+var validateExpression = (code, options) => {
+  const { effectful = false, transformIdentifier = (id) => id } = options ?? {};
+  const expression = jsep(code);
+  return generateCode(expression, true, effectful, transformIdentifier);
+};
+var sortTopologically = (list, depsById, explored = /* @__PURE__ */ new Set(), sorted = []) => {
+  for (const id of list) {
+    if (explored.has(id)) {
+      continue;
+    }
+    explored.add(id);
+    const deps = depsById.get(id);
+    if (deps) {
+      sortTopologically(deps, depsById, explored, sorted);
+    }
+    sorted.push(id);
+  }
+  return sorted;
+};
+var generateComputingExpressions = (expressions, allowedVariables) => {
+  const depsById = /* @__PURE__ */ new Map();
+  const inputVariables = /* @__PURE__ */ new Set();
+  for (const [id, code] of expressions) {
+    const deps = /* @__PURE__ */ new Set();
+    validateExpression(code, {
+      transformIdentifier: (identifier) => {
+        if (allowedVariables.has(identifier)) {
+          inputVariables.add(identifier);
+          return identifier;
+        }
+        if (expressions.has(identifier)) {
+          deps.add(identifier);
+          return identifier;
+        }
+        throw Error(`Unknown dependency "${identifier}"`);
+      }
+    });
+    depsById.set(id, deps);
+  }
+  const sortedExpressions = sortTopologically(
+    new Set(expressions.keys()),
+    depsById
+  );
+  let generatedCode = "";
+  for (const id of inputVariables) {
+    generatedCode += `const ${id} = _variables.get('${id}');
+`;
+  }
+  for (const id of sortedExpressions) {
+    const code = expressions.get(id);
+    if (code === void 0) {
+      continue;
+    }
+    generatedCode += `const ${id} = (${code});
+`;
+  }
+  generatedCode += `return new Map([
+`;
+  for (const id of sortedExpressions) {
+    generatedCode += `  ['${id}', ${id}],
+`;
+  }
+  generatedCode += `]);`;
+  return generatedCode;
+};
+var executeComputingExpressions = (expressions, variables) => {
+  const generatedCode = generateComputingExpressions(
+    expressions,
+    new Set(variables.keys())
+  );
+  const executeFn = new Function("_variables", generatedCode);
+  const values = executeFn(variables);
+  return values;
+};
+var generateEffectfulExpression = (code, args, allowedVariables) => {
+  const inputVariables = /* @__PURE__ */ new Set();
+  const outputVariables = /* @__PURE__ */ new Set();
+  validateExpression(code, {
+    effectful: true,
+    transformIdentifier: (identifier, assignee) => {
+      if (args.has(identifier)) {
+        return identifier;
+      }
+      if (allowedVariables.has(identifier)) {
+        if (assignee) {
+          outputVariables.add(identifier);
+        } else {
+          inputVariables.add(identifier);
+        }
+        return identifier;
+      }
+      throw Error(`Unknown dependency "${identifier}"`);
+    }
+  });
+  let generatedCode = "";
+  for (const id of args) {
+    generatedCode += `let ${id} = _args.get('${id}');
+`;
+  }
+  for (const id of inputVariables) {
+    generatedCode += `let ${id} = _variables.get('${id}');
+`;
+  }
+  for (const id of outputVariables) {
+    if (inputVariables.has(id) === false) {
+      generatedCode += `let ${id};
+`;
+    }
+  }
+  generatedCode += `${code};
+`;
+  generatedCode += `return new Map([
+`;
+  for (const id of outputVariables) {
+    generatedCode += `  ['${id}', ${id}],
+`;
+  }
+  generatedCode += `]);`;
+  return generatedCode;
+};
+var executeEffectfulExpression = (code, args, variables) => {
+  const generatedCode = generateEffectfulExpression(
+    code,
+    new Set(args.keys()),
+    new Set(variables.keys())
+  );
+  const executeFn = new Function("_variables", "_args", generatedCode);
+  const values = executeFn(variables, args);
+  return values;
+};
+var computeExpressionDependencies = (expressions, expressionId, dependencies) => {
+  const depsById = dependencies.get(expressionId);
+  if (depsById) {
+    return depsById;
+  }
+  const parentDeps = /* @__PURE__ */ new Set();
+  const code = expressions.get(expressionId);
+  if (code === void 0) {
+    return parentDeps;
+  }
+  dependencies.set(expressionId, parentDeps);
+  validateExpression(code, {
+    transformIdentifier: (id) => {
+      parentDeps.add(id);
+      const childDeps = computeExpressionDependencies(
+        expressions,
+        id,
+        dependencies
+      );
+      for (const depId of childDeps) {
+        parentDeps.add(depId);
+      }
+      return id;
+    }
+  });
+  return parentDeps;
+};
+var computeExpressionsDependencies = (expressions) => {
+  const dependencies = /* @__PURE__ */ new Map();
+  for (const id of expressions.keys()) {
+    computeExpressionDependencies(expressions, id, dependencies);
+  }
+  return dependencies;
+};
+var dataSourceVariablePrefix = "$ws$dataSource$";
+var encodeDataSourceVariable = (id) => {
+  const encoded = id.replaceAll("-", "__DASH__");
+  return `${dataSourceVariablePrefix}${encoded}`;
+};
+var encodeVariablesMap = (values) => {
+  const encodedValues = /* @__PURE__ */ new Map();
+  for (const [id, value] of values) {
+    encodedValues.set(encodeDataSourceVariable(id), value);
+  }
+  return encodedValues;
+};
+var decodeDataSourceVariable = (name) => {
+  if (name.startsWith(dataSourceVariablePrefix)) {
+    const encoded = name.slice(dataSourceVariablePrefix.length);
+    return encoded.replaceAll("__DASH__", "-");
+  }
+  return;
+};
+var decodeVariablesMap = (values) => {
+  const decodedValues = /* @__PURE__ */ new Map();
+  for (const [name, value] of values) {
+    const id = decodeDataSourceVariable(name);
+    if (id !== void 0) {
+      decodedValues.set(id, value);
+    }
+  }
+  return decodedValues;
+};
+
+// src/embed-template.ts
+var EmbedTemplateText = z2.object({
+  type: z2.literal("text"),
+  value: z2.string()
+});
+var EmbedTemplateDataSource = z2.union([
+  z2.object({
+    type: z2.literal("variable"),
+    initialValue: z2.union([
+      z2.string(),
+      z2.number(),
+      z2.boolean(),
+      z2.array(z2.string())
+    ])
+  }),
+  z2.object({
+    type: z2.literal("expression"),
+    code: z2.string()
+  })
+]);
+var EmbedTemplateProp = z2.union([
+  z2.object({
+    type: z2.literal("dataSource"),
+    name: z2.string(),
+    dataSourceName: z2.string()
+  }),
+  z2.object({
+    type: z2.literal("number"),
+    name: z2.string(),
+    value: z2.number()
+  }),
+  z2.object({
+    type: z2.literal("string"),
+    name: z2.string(),
+    value: z2.string()
+  }),
+  z2.object({
+    type: z2.literal("boolean"),
+    name: z2.string(),
+    value: z2.boolean()
+  }),
+  z2.object({
+    type: z2.literal("string[]"),
+    name: z2.string(),
+    value: z2.array(z2.string())
+  }),
+  z2.object({
+    type: z2.literal("action"),
+    name: z2.string(),
+    value: z2.array(
+      z2.object({
+        type: z2.literal("execute"),
+        args: z2.optional(z2.array(z2.string())),
+        code: z2.string()
+      })
+    )
+  })
+]);
+var EmbedTemplateStyleDeclRaw = z2.object({
+  // State selector, e.g. :hover
+  state: z2.optional(z2.string()),
+  property: z2.string(),
+  value: StyleValue
+});
+var EmbedTemplateStyleDecl = EmbedTemplateStyleDeclRaw;
+var EmbedTemplateInstance = z2.lazy(
+  () => z2.object({
+    type: z2.literal("instance"),
+    component: z2.string(),
+    label: z2.optional(z2.string()),
+    dataSources: z2.optional(z2.record(z2.string(), EmbedTemplateDataSource)),
+    props: z2.optional(z2.array(EmbedTemplateProp)),
+    tokens: z2.optional(z2.array(z2.string())),
+    styles: z2.optional(z2.array(EmbedTemplateStyleDecl)),
+    children: WsEmbedTemplate
+  })
+);
+var WsEmbedTemplate = z2.lazy(
+  () => z2.array(z2.union([EmbedTemplateInstance, EmbedTemplateText]))
+);
+var getDataSourceValue = (value) => {
+  if (typeof value === "string") {
+    return { type: "string", value };
+  }
+  if (typeof value === "number") {
+    return { type: "number", value };
+  }
+  if (typeof value === "boolean") {
+    return { type: "boolean", value };
+  }
+  if (Array.isArray(value)) {
+    return { type: "string[]", value };
+  }
+  value;
+  throw Error("Impossible case");
+};
+var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByRef, styleSourceSelections, styleSources, styles, metas, defaultBreakpointId) => {
+  const parentChildren = [];
+  for (const item of treeTemplate) {
+    if (item.type === "instance") {
+      const instanceId = nanoid();
+      if (item.dataSources) {
+        for (const [name, dataSource] of Object.entries(item.dataSources)) {
+          if (dataSourceByRef.has(name)) {
+            throw Error(`${name} data source already defined`);
+          }
+          if (dataSource.type === "variable") {
+            dataSourceByRef.set(name, {
+              type: "variable",
+              id: nanoid(),
+              scopeInstanceId: instanceId,
+              name,
+              value: getDataSourceValue(dataSource.initialValue)
+            });
+          }
+          if (dataSource.type === "expression") {
+            dataSourceByRef.set(name, {
+              type: "expression",
+              id: nanoid(),
+              scopeInstanceId: instanceId,
+              name,
+              // replace all references with variable names
+              code: validateExpression(dataSource.code, {
+                transformIdentifier: (ref) => {
+                  const id = dataSourceByRef.get(ref)?.id ?? ref;
+                  return encodeDataSourceVariable(id);
+                }
+              })
+            });
+          }
+        }
+      }
+      if (item.props) {
+        for (const prop of item.props) {
+          const propId = nanoid();
+          if (prop.type === "action") {
+            props.push({
+              id: propId,
+              instanceId,
+              type: "action",
+              name: prop.name,
+              value: prop.value.map((value) => {
+                const args = value.args ?? [];
+                return {
+                  type: "execute",
+                  args,
+                  // replace all references with variable names
+                  code: validateExpression(value.code, {
+                    effectful: true,
+                    transformIdentifier: (ref) => {
+                      if (args.includes(ref)) {
+                        return ref;
+                      }
+                      const id = dataSourceByRef.get(ref)?.id ?? ref;
+                      return encodeDataSourceVariable(id);
+                    }
+                  })
+                };
+              })
+            });
+            continue;
+          }
+          if (prop.type === "dataSource") {
+            const dataSource = dataSourceByRef.get(prop.dataSourceName);
+            if (dataSource === void 0) {
+              throw Error(`${prop.dataSourceName} data source is not defined`);
+            }
+            props.push({
+              id: propId,
+              instanceId,
+              type: "dataSource",
+              name: prop.name,
+              value: dataSource.id
+            });
+            continue;
+          }
+          props.push({ id: propId, instanceId, ...prop });
+        }
+      }
+      const styleSourceIds = [];
+      if (item.tokens) {
+        const meta = metas.get(item.component);
+        if (meta?.presetTokens) {
+          for (const name of item.tokens) {
+            const tokenValue = meta.presetTokens[name];
+            if (tokenValue) {
+              const styleSourceId = `${item.component}:${name}`;
+              styleSourceIds.push(styleSourceId);
+              styleSources.push({
+                type: "token",
+                id: styleSourceId,
+                name: titleCase(noCase(name))
+              });
+              for (const styleDecl of tokenValue.styles) {
+                styles.push({
+                  breakpointId: defaultBreakpointId,
+                  styleSourceId,
+                  state: styleDecl.state,
+                  property: styleDecl.property,
+                  value: styleDecl.value
+                });
+              }
+            }
+          }
+        }
+      }
+      if (item.styles) {
+        const styleSourceId = nanoid();
+        styleSources.push({
+          type: "local",
+          id: styleSourceId
+        });
+        styleSourceIds.push(styleSourceId);
+        for (const styleDecl of item.styles) {
+          styles.push({
+            breakpointId: defaultBreakpointId,
+            styleSourceId,
+            state: styleDecl.state,
+            property: styleDecl.property,
+            value: styleDecl.value
+          });
+        }
+      }
+      if (styleSourceIds.length > 0) {
+        styleSourceSelections.push({
+          instanceId,
+          values: styleSourceIds
+        });
+      }
+      const instance = {
+        type: "instance",
+        id: instanceId,
+        label: item.label,
+        component: item.component,
+        children: []
+      };
+      instances.push(instance);
+      instance.children = createInstancesFromTemplate(
+        item.children,
+        instances,
+        props,
+        dataSourceByRef,
+        styleSourceSelections,
+        styleSources,
+        styles,
+        metas,
+        defaultBreakpointId
+      );
+      parentChildren.push({
+        type: "id",
+        value: instanceId
+      });
+    }
+    if (item.type === "text") {
+      parentChildren.push({
+        type: "text",
+        value: item.value
+      });
+    }
+  }
+  return parentChildren;
+};
+var generateDataFromEmbedTemplate = (treeTemplate, metas, defaultBreakpointId) => {
+  const instances = [];
+  const props = [];
+  const dataSourceByRef = /* @__PURE__ */ new Map();
+  const styleSourceSelections = [];
+  const styleSources = [];
+  const styles = [];
+  const children = createInstancesFromTemplate(
+    treeTemplate,
+    instances,
+    props,
+    dataSourceByRef,
+    styleSourceSelections,
+    styleSources,
+    styles,
+    metas,
+    defaultBreakpointId
+  );
+  return {
+    children,
+    instances,
+    props,
+    dataSources: Array.from(dataSourceByRef.values()),
+    styleSourceSelections,
+    styleSources,
+    styles
+  };
+};
+var namespaceEmbedTemplateComponents = (template, namespace, components) => {
+  return template.map((item) => {
+    if (item.type === "text") {
+      return item;
+    }
+    if (item.type === "instance") {
+      const prefix = components.has(item.component) ? `${namespace}:` : "";
+      return {
+        ...item,
+        component: `${prefix}${item.component}`,
+        children: namespaceEmbedTemplateComponents(
+          item.children,
+          namespace,
+          components
+        )
+      };
+    }
+    item;
+    throw Error("Impossible case");
+  });
+};
+var namespaceMeta = (meta, namespace, components) => {
+  const newMeta = { ...meta };
+  if (newMeta.requiredAncestors) {
+    newMeta.requiredAncestors = newMeta.requiredAncestors.map(
+      (component) => components.has(component) ? `${namespace}:${component}` : component
+    );
+  }
+  if (newMeta.invalidAncestors) {
+    newMeta.invalidAncestors = newMeta.invalidAncestors.map(
+      (component) => components.has(component) ? `${namespace}:${component}` : component
+    );
+  }
+  if (newMeta.indexWithinAncestor) {
+    newMeta.indexWithinAncestor = components.has(newMeta.indexWithinAncestor) ? `${namespace}:${newMeta.indexWithinAncestor}` : newMeta.indexWithinAncestor;
+  }
+  if (newMeta.template) {
+    newMeta.template = namespaceEmbedTemplateComponents(
+      newMeta.template,
+      namespace,
+      components
+    );
+  }
+  return newMeta;
+};
+
+// src/components/component-meta.ts
+var WsComponentPropsMeta = z3.object({
+  props: z3.record(PropMeta),
+  // Props that will be always visible in properties panel.
+  initialProps: z3.array(z3.string()).optional()
+});
+var componentCategories = [
+  "general",
+  "text",
+  "media",
+  "forms",
+  "radix",
+  "hidden"
+];
+var stateCategories = ["states", "component-states"];
+var ComponentState = z3.object({
+  category: z3.enum(stateCategories).optional(),
+  selector: z3.string(),
+  label: z3.string()
+});
+var ComponentToken = z3.object({
+  variant: z3.optional(z3.string()),
+  styles: z3.array(EmbedTemplateStyleDecl)
+});
+var defaultStates = [
+  { selector: ":hover", label: "Hover" },
+  { selector: ":active", label: "Active" },
+  { selector: ":focus", label: "Focus" },
+  { selector: ":focus-visible", label: "Focus Visible" },
+  { selector: ":focus-within", label: "Focus Within" }
+];
+var WsComponentMeta = z3.object({
+  category: z3.enum(componentCategories).optional(),
+  // container - can accept other components with dnd or be edited as text
+  // control - usually form controls like inputs, without children
+  // embed - images, videos or other embeddable components, without children
+  // rich-text-child - formatted text fragment, not listed in components list
+  type: z3.enum(["container", "control", "embed", "rich-text-child"]),
+  requiredAncestors: z3.optional(z3.array(z3.string())),
+  invalidAncestors: z3.optional(z3.array(z3.string())),
+  // when this field is specified component receives
+  // prop with index of same components withiin specified ancestor
+  // important to automatically enumerate collections without
+  // naming every item manually
+  indexWithinAncestor: z3.optional(z3.string()),
+  stylable: z3.optional(z3.boolean()),
+  // specifies whether the instance can be deleted,
+  // copied or dragged out of its parent instance
+  // true by default
+  detachable: z3.optional(z3.boolean()),
+  label: z3.optional(z3.string()),
+  description: z3.string().optional(),
+  icon: z3.string(),
+  presetStyle: z3.optional(z3.record(z3.string(), EmbedTemplateStyleDecl)),
+  presetTokens: z3.optional(z3.record(z3.string(), ComponentToken)),
+  states: z3.optional(z3.array(ComponentState)),
+  template: z3.optional(WsEmbedTemplate),
+  order: z3.number().optional()
+});
+
+// src/component-renderer.tsx
+import { getStyleDeclKey } from "@webstudio-is/sdk";
+
+// src/instance-utils.ts
+var getIndexesWithinAncestors = (metas, instances, rootIds) => {
+  const ancestors = /* @__PURE__ */ new Set();
+  for (const meta of metas.values()) {
+    if (meta.indexWithinAncestor !== void 0) {
+      ancestors.add(meta.indexWithinAncestor);
+    }
+  }
+  const indexes = /* @__PURE__ */ new Map();
+  const traverseInstances = (instances2, instanceId, latestIndexes2 = /* @__PURE__ */ new Map()) => {
+    const instance = instances2.get(instanceId);
+    if (instance === void 0) {
+      return;
+    }
+    const meta = metas.get(instance.component);
+    if (meta === void 0) {
+      return;
+    }
+    if (ancestors.has(instance.component)) {
+      latestIndexes2 = new Map(latestIndexes2);
+      latestIndexes2.set(instance.component, /* @__PURE__ */ new Map());
+    }
+    if (meta.indexWithinAncestor !== void 0) {
+      const ancestorIndexes = latestIndexes2.get(meta.indexWithinAncestor);
+      if (ancestorIndexes !== void 0) {
+        let index = ancestorIndexes.get(instance.component) ?? -1;
+        index += 1;
+        ancestorIndexes.set(instance.component, index);
+        indexes.set(instance.id, index);
+      }
+    }
+    for (const child of instance.children) {
+      if (child.type === "id") {
+        traverseInstances(instances2, child.value, latestIndexes2);
+      }
+    }
+  };
+  const latestIndexes = /* @__PURE__ */ new Map();
+  for (const instanceId of rootIds) {
+    traverseInstances(instances, instanceId, latestIndexes);
+  }
+  return indexes;
+};
+
+// src/component-renderer.tsx
+import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var renderComponentTemplate = ({
+  name,
+  metas: metasRecord,
+  components,
+  props
+}) => {
+  const metas = new Map(Object.entries(metasRecord));
+  const template = metas.get(name)?.template ?? [
+    {
+      type: "instance",
+      component: name,
+      children: []
+    }
+  ];
+  if (template[0].type === "instance" && props !== void 0) {
+    template[0].props = Object.entries(props).map(([prop, value]) => {
+      if (typeof value === "string") {
+        return { type: "string", name: prop, value };
+      }
+      if (typeof value === "number") {
+        return { type: "number", name: prop, value };
+      }
+      if (typeof value === "boolean") {
+        return { type: "boolean", name: prop, value };
+      }
+      throw new Error(`Unsupported prop ${props} with value ${value}`);
+    });
+  }
+  const data = generateDataFromEmbedTemplate(template, metas, "base");
+  const instances = [
+    [
+      "root",
+      {
+        type: "instance",
+        id: "root",
+        component: "Box",
+        children: data.children
+      }
+    ],
+    ...data.instances.map(
+      (instance) => [instance.id, instance]
+    )
+  ];
+  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
+    /* @__PURE__ */ jsx4("style", { children: generateCssText(
+      {
+        assets: [],
+        breakpoints: [["base", { id: "base", label: "base" }]],
+        styles: data.styles.map((item) => [getStyleDeclKey(item), item]),
+        styleSourceSelections: data.styleSourceSelections.map((item) => [
+          item.instanceId,
+          item
+        ]),
+        componentMetas: metas
+      },
+      { assetBaseUrl: "/" }
+    ) }),
+    /* @__PURE__ */ jsx4(
+      InstanceRoot,
+      {
+        data: {
+          page: {
+            path: "",
+            id: "",
+            name: "",
+            title: "",
+            meta: {},
+            rootInstanceId: "root"
+          },
+          pages: [],
+          assets: [],
+          build: {
+            instances,
+            props: data.props.map((prop) => [prop.id, prop]),
+            dataSources: data.dataSources.map((dataSource) => [
+              dataSource.id,
+              dataSource
+            ])
+          }
+        },
+        utils: {
+          indexesWithinAncestors: getIndexesWithinAncestors(
+            metas,
+            new Map(instances),
+            ["root"]
+          ),
+          executeComputingExpressions: (values) => {
+            const expressions = /* @__PURE__ */ new Map();
+            for (const dataSource of data.dataSources) {
+              const name2 = encodeDataSourceVariable(dataSource.id);
+              if (dataSource.type === "expression") {
+                expressions.set(name2, dataSource.code);
+              }
+            }
+            return decodeVariablesMap(
+              executeComputingExpressions(
+                expressions,
+                encodeVariablesMap(values)
+              )
+            );
+          },
+          executeEffectfulExpression: (code, args, values) => {
+            return decodeVariablesMap(
+              executeEffectfulExpression(code, args, encodeVariablesMap(values))
+            );
+          }
+        },
+        Component: WebstudioComponent,
+        components: new Map(Object.entries(components))
+      }
+    )
+  ] });
+};
+
+// src/hook.ts
+var getClosestInstance = (instancePath, currentInstance, closestComponent) => {
+  let matched = false;
+  for (const instance of instancePath) {
+    if (currentInstance === instance) {
+      matched = true;
+    }
+    if (matched && instance.component === closestComponent) {
+      return instance;
+    }
+  }
+};
+
+// src/generator.ts
+var generateUtilsExport = (siteData) => {
+  const indexesWithinAncestors = getIndexesWithinAncestors(
+    siteData.metas,
+    siteData.instances,
+    [siteData.page.rootInstanceId]
+  );
+  let indexesWithinAncestorsEntries = "";
+  for (const [key, value] of indexesWithinAncestors) {
+    const keyString = JSON.stringify(key);
+    const valueString = JSON.stringify(value);
+    indexesWithinAncestorsEntries += `[${keyString}, ${valueString}],
+`;
+  }
+  const generatedIndexesWithinAncestors = `
+  const indexesWithinAncestors = new Map<string, number>([
+  ${indexesWithinAncestorsEntries}
+  ]);
+  `;
+  const variables = /* @__PURE__ */ new Set();
+  const expressions = /* @__PURE__ */ new Map();
+  for (const dataSource of siteData.dataSources.values()) {
+    if (dataSource.type === "variable") {
+      variables.add(encodeDataSourceVariable(dataSource.id));
+    }
+    if (dataSource.type === "expression") {
+      expressions.set(encodeDataSourceVariable(dataSource.id), dataSource.code);
+    }
+  }
+  const generatedExecuteComputingExpressions = `
+  const rawExecuteComputingExpressions = (
+    _variables: Map<string, unknown>
+  ): Map<string, unknown> => {
+    ${generateComputingExpressions(expressions, variables)}
+  };
+  const executeComputingExpressions = (variables: Map<string, unknown>) => {
+    const encodedvariables = sdk.encodeVariablesMap(variables);
+    const encodedResult = rawExecuteComputingExpressions(encodedvariables);
+    return sdk.decodeVariablesMap(encodedResult);
+  };
+  `;
+  let effectfulExpressionsEntries = "";
+  for (const prop of siteData.props.values()) {
+    if (prop.type === "action") {
+      for (const executableValue of prop.value) {
+        const codeString = JSON.stringify(executableValue.code);
+        const generatedCode = generateEffectfulExpression(
+          executableValue.code,
+          new Set(executableValue.args),
+          variables
+        );
+        const generatedFunction = `(_args: Map<string, any>, _variables: Map<string, any>) => { ${generatedCode} }`;
+        effectfulExpressionsEntries += `[${codeString}, ${generatedFunction}],
+`;
+      }
+    }
+  }
+  const generatedExecuteEffectfulExpression = `const generatedEffectfulExpressions = new Map<
+    string,
+    (args: Map<string, any>, variables: Map<string, any>) => Map<string, unknown>
+  >([
+  ${effectfulExpressionsEntries}
+  ]);
+
+  const rawExecuteEffectfulExpression = (
+    code: string,
+    args: Map<string, unknown>,
+    variables: Map<string, unknown>
+  ): Map<string, unknown> => {
+    if(generatedEffectfulExpressions.has(code)) {
+      return generatedEffectfulExpressions.get(code)!(args, variables);
+    }
+    console.error("Effectful expression not found", code);
+    throw new Error("Effectful expression not found");
+  };
+
+  const executeEffectfulExpression = (
+    code: string,
+    args: Map<string, unknown>,
+    variables: Map<string, unknown>
+  ) => {
+    const encodedvariables = sdk.encodeVariablesMap(variables);
+    const encodedResult = rawExecuteEffectfulExpression(code, args, encodedvariables);
+    return sdk.decodeVariablesMap(encodedResult);
+  };
+  `;
+  return `
+  /* eslint-disable */
+
+  ${generatedIndexesWithinAncestors.trim()}
+
+  ${generatedExecuteComputingExpressions.trim()}
+
+  ${generatedExecuteEffectfulExpression.trim()}
+
+  export const utils = {
+    indexesWithinAncestors,
+    executeComputingExpressions,
+    executeEffectfulExpression,
+  };
+
+  /* eslint-enable */
+  `;
+};
 export {
+  EmbedTemplateInstance,
+  EmbedTemplateStyleDecl,
+  InstanceRoot,
+  PropMeta,
+  ReactSdkContext,
+  Root,
+  WebstudioComponent,
+  WsEmbedTemplate,
+  addGlobalRules,
+  collapsedAttribute,
+  componentAttribute,
   componentCategories,
-  stateCategories,
-  defaultStates
-} from "./components/component-meta";
-export * from "./embed-template";
-export {
-  useInstanceProps,
-  usePropUrl,
-  usePropAsset,
-  getInstanceIdFromComponentProps,
-  getIndexWithinAncestorFromComponentProps
-} from "./props";
-export { ReactSdkContext } from "./context";
-export {
-  validateExpression,
-  generateComputingExpressions,
-  executeComputingExpressions,
-  generateEffectfulExpression,
-  executeEffectfulExpression,
   computeExpressionsDependencies,
+  createElementsTree,
+  createImageValueTransformer,
+  decodeDataSourceVariable,
+  decodeVariablesMap,
+  defaultStates,
   encodeDataSourceVariable,
   encodeVariablesMap,
-  decodeDataSourceVariable,
-  decodeVariablesMap
-} from "./expression";
-export { renderComponentTemplate } from "./component-renderer";
-export { getIndexesWithinAncestors } from "./instance-utils";
-export * from "./hook";
-export { generateUtilsExport } from "./generator";
+  executeComputingExpressions,
+  executeEffectfulExpression,
+  generateComputingExpressions,
+  generateCssText,
+  generateDataFromEmbedTemplate,
+  generateEffectfulExpression,
+  generateUtilsExport,
+  getClosestInstance,
+  getIndexWithinAncestorFromComponentProps,
+  getIndexesWithinAncestors,
+  getInstanceIdFromComponentProps,
+  getPresetStyleRules,
+  getStyleRules,
+  idAttribute,
+  indexAttribute,
+  namespaceMeta,
+  renderComponentTemplate,
+  renderWebstudioComponentChildren,
+  selectorIdAttribute,
+  showAttribute,
+  splitPropsWithWebstudioAttributes,
+  stateCategories,
+  useInstanceProps,
+  usePropAsset,
+  usePropUrl,
+  validateExpression
+};