@webstudio-is/react-sdk 0.0.0-588fe22 → 0.0.0-7a19155

package/lib/index.js

@@ -54,182 +54,11 @@ var generateRemixParams = (pathname) => {
   return generated;
 };
 
-// src/css/global-rules.ts
-import { getFontFaces } from "@webstudio-is/fonts";
-var addGlobalRules = (sheet, { assets, assetBaseUrl }) => {
-  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) {
-    sheet.addFontFaceRule(fontFace);
-  }
-};
-
-// src/css/css.ts
-import {
-  createRegularStyleSheet,
-  generateAtomic
-} from "@webstudio-is/css-engine";
-import {
-  ROOT_INSTANCE_ID,
-  createScope,
-  parseComponentName,
-  descendantComponent,
-  rootComponent
-} from "@webstudio-is/sdk";
-import { kebabCase } from "change-case";
-var createImageValueTransformer = (assets, { assetBaseUrl }) => (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 url = `${assetBaseUrl}${asset.name}`;
-    return {
-      type: "image",
-      value: {
-        type: "url",
-        url
-      },
-      hidden: styleValue.hidden
-    };
-  }
-};
-var normalizeClassName = (name) => kebabCase(name);
-var generateCss = ({
-  assets,
-  instances,
-  props,
-  breakpoints,
-  styles,
-  styleSourceSelections,
-  componentMetas,
-  assetBaseUrl,
-  atomic
-}) => {
-  const globalSheet = createRegularStyleSheet({ name: "ssr" });
-  const sheet = createRegularStyleSheet({ name: "ssr" });
-  addGlobalRules(globalSheet, { assets, assetBaseUrl });
-  globalSheet.addMediaRule("presets");
-  const presetClasses = /* @__PURE__ */ new Map();
-  const scope = createScope([], normalizeClassName, "-");
-  for (const [component, meta] of componentMetas) {
-    const [_namespace, componentName] = parseComponentName(component);
-    const className = `w-${scope.getName(component, meta.label ?? componentName)}`;
-    const presetStyle = Object.entries(meta.presetStyle ?? {});
-    if (presetStyle.length > 0) {
-      presetClasses.set(component, className);
-    }
-    for (const [tag, styles2] of presetStyle) {
-      const selector = component === rootComponent ? ":root" : `:where(${tag}.${className})`;
-      const rule = globalSheet.addNestingRule(selector);
-      for (const declaration of styles2) {
-        rule.setDeclaration({
-          breakpoint: "presets",
-          selector: declaration.state ?? "",
-          property: declaration.property,
-          value: declaration.value
-        });
-      }
-    }
-  }
-  for (const breakpoint of breakpoints.values()) {
-    sheet.addMediaRule(breakpoint.id, breakpoint);
-  }
-  const imageValueTransformer = createImageValueTransformer(assets, {
-    assetBaseUrl
-  });
-  sheet.setTransformer(imageValueTransformer);
-  for (const styleDecl of styles.values()) {
-    const rule = sheet.addMixinRule(styleDecl.styleSourceId);
-    rule.setDeclaration({
-      breakpoint: styleDecl.breakpointId,
-      selector: styleDecl.state ?? "",
-      property: styleDecl.property,
-      value: styleDecl.value
-    });
-  }
-  const classes = /* @__PURE__ */ new Map();
-  const parentIdByInstanceId = /* @__PURE__ */ new Map();
-  for (const instance of instances.values()) {
-    const presetClass = presetClasses.get(instance.component);
-    if (presetClass) {
-      classes.set(instance.id, [presetClass]);
-    }
-    for (const child of instance.children) {
-      if (child.type === "id") {
-        parentIdByInstanceId.set(child.value, instance.id);
-      }
-    }
-  }
-  const descendantSelectorByInstanceId = /* @__PURE__ */ new Map();
-  for (const prop of props.values()) {
-    if (prop.name === "selector" && prop.type === "string") {
-      descendantSelectorByInstanceId.set(prop.instanceId, prop.value);
-    }
-  }
-  const instanceByRule = /* @__PURE__ */ new Map();
-  for (const selection of styleSourceSelections.values()) {
-    let { instanceId } = selection;
-    const { values } = selection;
-    if (instanceId === ROOT_INSTANCE_ID) {
-      const rule2 = sheet.addNestingRule(`:root`);
-      rule2.applyMixins(values);
-      continue;
-    }
-    let descendantSuffix = "";
-    const instance = instances.get(instanceId);
-    if (instance === void 0) {
-      continue;
-    }
-    if (instance.component === descendantComponent) {
-      const parentId = parentIdByInstanceId.get(instanceId);
-      const descendantSelector = descendantSelectorByInstanceId.get(instanceId);
-      if (parentId && descendantSelector) {
-        descendantSuffix = descendantSelector;
-        instanceId = parentId;
-      }
-    }
-    const meta = componentMetas.get(instance.component);
-    const [_namespace, shortName] = parseComponentName(instance.component);
-    const baseName = instance.label ?? meta?.label ?? shortName;
-    const className = `w-${scope.getName(instanceId, baseName)}`;
-    if (atomic === false) {
-      let classList = classes.get(instanceId);
-      if (classList === void 0) {
-        classList = [];
-        classes.set(instanceId, classList);
-      }
-      classList.push(className);
-    }
-    const rule = sheet.addNestingRule(`.${className}`, descendantSuffix);
-    rule.applyMixins(values);
-    instanceByRule.set(rule, instanceId);
-  }
-  if (atomic) {
-    const { cssText } = generateAtomic(sheet, {
-      getKey: (rule) => instanceByRule.get(rule),
-      transformValue: imageValueTransformer,
-      classes
-    });
-    return { cssText: `${globalSheet.cssText}
-${cssText}`, classes };
-  }
-  return {
-    cssText: `${globalSheet.cssText}
-${sheet.cssText}`,
-    classes
-  };
-};
-
 // src/props.ts
 import {
   getPagePath,
-  findPageByIdOrPath
+  findPageByIdOrPath,
+  findTreeInstanceIdsExcludingSubtrees
 } from "@webstudio-is/sdk";
 var normalizeProps = ({
   props,
@@ -269,6 +98,14 @@ var normalizeProps = ({
         });
         continue;
       }
+      if (prop.name === "alt" && asset.type === "image") {
+        newProps.push({
+          ...propBase,
+          type: "string",
+          value: asset.description ?? ""
+        });
+        continue;
+      }
       newProps.push({
         ...propBase,
         type: "string",
@@ -325,11 +162,25 @@ 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 inflatedAttribute = "data-ws-collapsed";
 var textContentAttribute = "data-ws-text-content";
-var editablePlaceholderVariable = "--data-ws-editable-placeholder";
-var editingPlaceholderVariable = "--data-ws-editing-placeholder";
+var findTreeInstanceIdsExcludingStaticHidden = ({
+  instances,
+  props,
+  rootInstanceId
+}) => {
+  const hiddenInstanceIds = /* @__PURE__ */ new Set();
+  for (const prop of props.values()) {
+    if (prop.name === showAttribute && prop.type === "boolean" && prop.value === false) {
+      hiddenInstanceIds.add(prop.instanceId);
+    }
+  }
+  return findTreeInstanceIdsExcludingSubtrees(
+    instances,
+    rootInstanceId,
+    hiddenInstanceIds
+  );
+};
 var attributeNameStartChar = "A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD";
 var attributeNameChar = attributeNameStartChar + ":\\-0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040";
 var validAttributeNameRegex = new RegExp(
@@ -353,349 +204,55 @@ var isAttributeNameSafe = (attributeName) => {
   return false;
 };
 
-// src/embed-template.ts
-import { nanoid } from "nanoid";
-import {
-  encodeDataSourceVariable,
-  transpileExpression
-} from "@webstudio-is/sdk";
-var getVariablValue = (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 };
+// src/collection-utils.ts
+var getCollectionEntries = (data) => {
+  if (data === null || data === void 0) {
+    return [];
   }
-  if (Array.isArray(value)) {
-    return { type: "string[]", value };
-  }
-  return { type: "json", value };
-};
-var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByRef, styleSourceSelections, styleSources, styles, metas, defaultBreakpointId, generateId) => {
-  const parentChildren = [];
-  for (const item of treeTemplate) {
-    if (item.type === "instance") {
-      const instanceId = generateId();
-      if (item.variables) {
-        for (const [name, variable] of Object.entries(item.variables)) {
-          if (dataSourceByRef.has(name)) {
-            throw Error(`${name} data source already defined`);
-          }
-          dataSourceByRef.set(name, {
-            type: "variable",
-            id: generateId(),
-            scopeInstanceId: instanceId,
-            name: variable.alias ?? name,
-            value: getVariablValue(variable.initialValue)
-          });
-        }
-      }
-      if (item.props) {
-        for (const prop of item.props) {
-          const propId = generateId();
-          if (prop.type === "expression") {
-            props.push({
-              id: propId,
-              instanceId,
-              name: prop.name,
-              type: "expression",
-              // replace all references with variable names
-              value: transpileExpression({
-                expression: prop.code,
-                replaceVariable: (ref) => {
-                  const id = dataSourceByRef.get(ref)?.id ?? ref;
-                  return encodeDataSourceVariable(id);
-                }
-              })
-            });
-            continue;
-          }
-          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: transpileExpression({
-                    expression: value.code,
-                    replaceVariable: (ref) => {
-                      if (args.includes(ref)) {
-                        return;
-                      }
-                      const id = dataSourceByRef.get(ref)?.id ?? ref;
-                      return encodeDataSourceVariable(id);
-                    }
-                  })
-                };
-              })
-            });
-            continue;
-          }
-          if (prop.type === "parameter") {
-            const dataSourceId = generateId();
-            dataSourceByRef.set(prop.variableName, {
-              type: "parameter",
-              id: dataSourceId,
-              scopeInstanceId: instanceId,
-              name: prop.variableAlias ?? prop.variableName
-            });
-            props.push({
-              id: propId,
-              instanceId,
-              name: prop.name,
-              type: "parameter",
-              // replace variable reference with variable id
-              value: dataSourceId
-            });
-            continue;
-          }
-          props.push({ id: propId, instanceId, ...prop });
-        }
-      }
-      const styleSourceIds = [];
-      if (item.styles) {
-        const styleSourceId = generateId();
-        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,
-        generateId
-      );
-      parentChildren.push({
-        type: "id",
-        value: instanceId
-      });
-    }
-    if (item.type === "text") {
-      parentChildren.push({
-        type: "text",
-        value: item.value,
-        placeholder: item.placeholder
-      });
-    }
-    if (item.type === "expression") {
-      parentChildren.push({
-        type: "expression",
-        // replace all references with variable names
-        value: transpileExpression({
-          expression: item.value,
-          replaceVariable: (ref) => {
-            const id = dataSourceByRef.get(ref)?.id ?? ref;
-            return encodeDataSourceVariable(id);
-          }
-        })
-      });
-    }
+  if (typeof data !== "object") {
+    return [];
   }
-  return parentChildren;
-};
-var generateDataFromEmbedTemplate = (treeTemplate, metas, generateId = nanoid) => {
-  const instances = [];
-  const props = [];
-  const dataSourceByRef = /* @__PURE__ */ new Map();
-  const styleSourceSelections = [];
-  const styleSources = [];
-  const styles = [];
-  const baseBreakpointId = generateId();
-  const children = createInstancesFromTemplate(
-    treeTemplate,
-    instances,
-    props,
-    dataSourceByRef,
-    styleSourceSelections,
-    styleSources,
-    styles,
-    metas,
-    baseBreakpointId,
-    generateId
-  );
-  const breakpoints = [];
-  if (styles.length > 0) {
-    breakpoints.push({
-      id: baseBreakpointId,
-      label: ""
-    });
+  const entries = Object.entries(data);
+  if (Array.isArray(data)) {
+    return entries.map(([key, value]) => [Number(key), value]);
   }
-  return {
-    children,
-    instances,
-    props,
-    dataSources: Array.from(dataSourceByRef.values()),
-    styleSourceSelections,
-    styleSources,
-    styles,
-    breakpoints,
-    assets: [],
-    resources: []
-  };
+  return entries;
 };
-var namespaceEmbedTemplateComponents = (template, namespace, components) => {
-  return template.map((item) => {
-    if (item.type === "text") {
-      return item;
-    }
-    if (item.type === "expression") {
-      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 isStaticCollectionExpression = (expression) => {
+  const trimmedExpression = expression.trim();
+  return trimmedExpression.startsWith("[") && trimmedExpression.endsWith("]") || trimmedExpression.startsWith("{") && trimmedExpression.endsWith("}") || trimmedExpression.startsWith("({") && trimmedExpression.endsWith("})");
 };
-var namespaceMatcher = (namespace, matcher) => {
-  const newMatcher = structuredClone(matcher);
-  if (newMatcher.component?.$eq) {
-    newMatcher.component.$eq = `${namespace}:${newMatcher.component.$eq}`;
-  }
-  if (newMatcher.component?.$neq) {
-    newMatcher.component.$neq = `${namespace}:${newMatcher.component.$neq}`;
-  }
-  if (newMatcher.component?.$in) {
-    newMatcher.component.$in = newMatcher.component.$in.map(
-      (component) => `${namespace}:${component}`
-    );
-  }
-  if (newMatcher.component?.$nin) {
-    newMatcher.component.$nin = newMatcher.component.$nin.map(
-      (component) => `${namespace}:${component}`
-    );
-  }
-  return newMatcher;
-};
-var namespaceMeta = (meta, namespace, components) => {
-  const newMeta = { ...meta };
-  if (newMeta.constraints) {
-    if (Array.isArray(newMeta.constraints)) {
-      newMeta.constraints = newMeta.constraints.map(
-        (matcher) => namespaceMatcher(namespace, matcher)
-      );
-    } else {
-      newMeta.constraints = namespaceMatcher(namespace, newMeta.constraints);
-    }
-  }
-  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/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;
+var generateCollectionIterationCode = ({
+  dataExpression,
+  keyVariable,
+  itemVariable
+}) => {
+  const safeDataExpression = isStaticCollectionExpression(dataExpression) ? dataExpression : `${dataExpression} ?? {}`;
+  return `Object.entries(
+  // @ts-ignore
+  ${safeDataExpression}
+).map(([_key, ${itemVariable}]: any) => {
+  const ${keyVariable} = Array.isArray(${dataExpression}) ? Number(_key) : _key;
+  return`;
 };
 
 // src/component-generator.ts
 import {
-  parseComponentName as parseComponentName2,
+  parseComponentName,
   generateExpression,
   decodeDataSourceVariable,
-  transpileExpression as transpileExpression2,
+  contentBlockDocumentProp,
   blockComponent,
+  blockBodyComponent,
   blockTemplateComponent,
   collectionComponent,
-  descendantComponent as descendantComponent2
+  descendantComponent,
+  getIndexesWithinAncestors,
+  elementComponent
 } from "@webstudio-is/sdk";
+import { transpileExpression } from "@webstudio-is/expression";
+import { indexProperty, tagProperty } from "@webstudio-is/sdk/runtime";
+import { getJsxPropName } from "@webstudio-is/content-engine/jsx-attributes";
 var generateAction = ({
   scope,
   prop,
@@ -707,7 +264,7 @@ var generateAction = ({
   let assignersCode = "";
   for (const value of prop.value) {
     args = value.args;
-    assignersCode += transpileExpression2({
+    assignersCode += transpileExpression({
       expression: value.code,
       executable: true,
       replaceVariable: (identifier, assignee) => {
@@ -758,7 +315,7 @@ var generatePropValue = ({
   if (prop.type === "asset" || prop.type === "page") {
     return;
   }
-  if (prop.type === "string" || prop.type === "number" || prop.type === "boolean" || prop.type === "string[]" || prop.type === "json") {
+  if (prop.type === "string" || prop.type === "number" || prop.type === "boolean" || prop.type === "string[]" || prop.type === "json" || prop.type === "animationAction") {
     return JSON.stringify(prop.value);
   }
   if (prop.type === "parameter") {
@@ -788,39 +345,83 @@ var generatePropValue = ({
 var generateJsxElement = ({
   context = "jsx",
   scope,
+  metas,
+  tagsOverrides,
   instance,
   props,
+  resources,
   dataSources,
   usedDataSources,
   indexesWithinAncestors,
   children,
   classesMap
 }) => {
-  if (instance.component === descendantComponent2) {
+  if (instance.component === descendantComponent) {
     return "";
   }
+  const meta = metas.get(instance.component);
+  const hasTags = Object.keys(meta?.presetStyle ?? {}).length > 0;
   let generatedProps = "";
   const index = indexesWithinAncestors.get(instance.id);
   if (index !== void 0) {
     generatedProps += `
-${indexAttribute}="${index}"`;
+${indexProperty}="${index}"`;
+  }
+  if (instance.tag !== void 0 && instance.component !== elementComponent) {
+    generatedProps += `
+${tagProperty}=${JSON.stringify(instance.tag)}`;
   }
   let conditionValue;
   let collectionDataValue;
   let collectionItemValue;
-  let classNameValue;
+  let collectionItemKeyValue;
+  const classNameValues = [];
+  const projectedResourceProps = /* @__PURE__ */ new Map();
+  const componentPropNames = new Set(Object.keys(meta?.props ?? {}));
+  const acceptsHtmlAttributes = hasTags || instance.tag !== void 0 || instance.component === elementComponent;
+  const getGeneratedPropName = (instancePropName) => getJsxPropName({
+    instancePropName,
+    componentPropNames,
+    acceptsHtmlAttributes
+  });
+  const propsByGeneratedName = /* @__PURE__ */ new Map();
+  const classProps = /* @__PURE__ */ new Map();
   for (const prop of props.values()) {
-    if (prop.instanceId !== instance.id) {
+    if (prop.instanceId !== instance.id || isAttributeNameSafe(prop.name) === false) {
+      continue;
+    }
+    const name = getGeneratedPropName(prop.name);
+    if (name === "className") {
+      classProps.set(prop.name, prop);
       continue;
     }
+    propsByGeneratedName.set(name, prop);
+  }
+  const generatedPropNames = /* @__PURE__ */ new Set([
+    ...propsByGeneratedName.keys(),
+    ...classProps.size > 0 ? ["className"] : []
+  ]);
+  for (const [name, prop] of [
+    ...propsByGeneratedName,
+    ...Array.from(classProps.values(), (prop2) => ["className", prop2])
+  ]) {
     const propValue = generatePropValue({
       scope,
       prop,
       dataSources,
       usedDataSources
     });
-    if (isAttributeNameSafe(prop.name) === false) {
-      continue;
+    if (prop.type === "resource") {
+      const propMeta = meta?.props?.[prop.name];
+      const resource = resources?.get(prop.value);
+      if (propMeta?.type === "resource" && resource !== void 0) {
+        for (const propName of propMeta.generatedProps ?? []) {
+          const generatedPropName = getGeneratedPropName(propName);
+          if (generatedPropNames.has(generatedPropName) === false && isAttributeNameSafe(propName)) {
+            projectedResourceProps.set(generatedPropName, resource[propName]);
+          }
+        }
+      }
     }
     if (prop.name === showAttribute) {
       if (propValue === "true") {
@@ -839,21 +440,28 @@ ${indexAttribute}="${index}"`;
       if (prop.name === "item") {
         collectionItemValue = propValue;
       }
+      if (prop.name === "itemKey") {
+        collectionItemKeyValue = propValue;
+      }
       continue;
     }
-    if (prop.name === "className" && propValue !== void 0) {
-      classNameValue = propValue;
+    if (name === "className" && propValue !== void 0) {
+      classNameValues.push(propValue);
       continue;
     }
     if (propValue !== void 0) {
       generatedProps += `
-${prop.name}={${propValue}}`;
+${name}={${propValue}}`;
     }
   }
+  for (const [name, value] of projectedResourceProps) {
+    generatedProps += `
+${name}={${JSON.stringify(value)}}`;
+  }
   const classMapArray = classesMap?.get(instance.id);
-  if (classMapArray || classNameValue) {
+  if (classMapArray || classNameValues.length > 0) {
     let classNameTemplate = classMapArray ? classMapArray.join(" ") : "";
-    if (classNameValue) {
+    for (const classNameValue of classNameValues) {
       if (classNameTemplate) {
         classNameTemplate += " ";
       }
@@ -870,20 +478,39 @@ ${prop.name}={${propValue}}`;
       return "";
     }
     const indexVariable = scope.getName(`${instance.id}-index`, "index");
-    generatedElement += `{${collectionDataValue}?.map((${collectionItemValue}: any, ${indexVariable}: number) =>
+    const keyVariable = collectionItemKeyValue ?? indexVariable;
+    generatedElement += `{${generateCollectionIterationCode({
+      dataExpression: collectionDataValue,
+      keyVariable,
+      itemVariable: collectionItemValue
+    })} (
 `;
-    generatedElement += `<Fragment key={${indexVariable}}>
+    generatedElement += `<Fragment key={${keyVariable}}>
 `;
     generatedElement += children;
     generatedElement += `</Fragment>
 `;
-    generatedElement += `)}
+    generatedElement += `)
+`;
+    generatedElement += `})
+`;
+    generatedElement += `}
 `;
-  } else if (instance.component === blockComponent) {
+  } else if (instance.component === blockComponent || instance.component === blockBodyComponent) {
     generatedElement += children;
   } else {
-    const [_namespace, shortName] = parseComponentName2(instance.component);
-    const componentVariable = scope.getName(instance.component, shortName);
+    let componentVariable;
+    if (instance.component === elementComponent) {
+      componentVariable = instance.tag === "" ? "div" : instance.tag ?? "div";
+      const componentDescriptor = tagsOverrides?.[componentVariable];
+      if (componentDescriptor !== void 0) {
+        const [_importSource, importSpecifier] = componentDescriptor.split(":");
+        componentVariable = scope.getName(componentDescriptor, importSpecifier);
+      }
+    } else {
+      const [_namespace, shortName] = parseComponentName(instance.component);
+      componentVariable = scope.getName(instance.component, shortName);
+    }
     if (instance.children.length === 0) {
       generatedElement += `<${componentVariable}${generatedProps} />
 `;
@@ -920,14 +547,19 @@ ${prop.name}={${propValue}}`;
 };
 var generateJsxChildren = ({
   scope,
+  metas,
+  tagsOverrides,
   children,
   instances,
   props,
+  resources,
   dataSources,
   usedDataSources,
   indexesWithinAncestors,
   classesMap,
-  excludePlaceholders
+  excludePlaceholders,
+  publishedContentBlocks,
+  contentBodyOverride
 }) => {
   let generatedChildren = "";
   for (const child of children) {
@@ -947,7 +579,7 @@ var generateJsxChildren = ({
         usedDataSources,
         scope
       });
-      generatedChildren = `{${expression}}
+      generatedChildren += `{renderText(${expression})}
 `;
       continue;
     }
@@ -957,26 +589,124 @@ var generateJsxChildren = ({
       if (instance === void 0) {
         continue;
       }
+      const publishedContent = publishedContentBlocks?.get(instance.id);
+      let generatedInstanceChildren;
+      if (contentBodyOverride?.instanceId === instance.id) {
+        generatedInstanceChildren = generateJsxChildren({
+          classesMap,
+          scope,
+          metas,
+          tagsOverrides,
+          children: contentBodyOverride.children,
+          instances,
+          props,
+          resources,
+          dataSources,
+          usedDataSources,
+          indexesWithinAncestors,
+          excludePlaceholders,
+          publishedContentBlocks
+        });
+      } else if (publishedContent === void 0) {
+        generatedInstanceChildren = generateJsxChildren({
+          classesMap,
+          scope,
+          metas,
+          tagsOverrides,
+          children: instance.children,
+          instances,
+          props,
+          resources,
+          dataSources,
+          usedDataSources,
+          indexesWithinAncestors,
+          excludePlaceholders,
+          publishedContentBlocks,
+          contentBodyOverride
+        });
+      } else {
+        const sourceExpression = publishedContent.sourceExpression === void 0 ? void 0 : generateExpression({
+          expression: publishedContent.sourceExpression,
+          dataSources,
+          usedDataSources,
+          scope
+        });
+        const documentParameter = Array.from(props.values()).find(
+          (prop) => prop.instanceId === instance.id && prop.name === contentBlockDocumentProp && prop.type === "parameter"
+        );
+        const documentDataSource = documentParameter === void 0 ? void 0 : dataSources.get(documentParameter.value);
+        if (documentDataSource !== void 0) {
+          usedDataSources.set(documentDataSource.id, documentDataSource);
+        }
+        const documentName = documentDataSource === void 0 ? void 0 : scope.getName(documentDataSource.id, documentDataSource.name);
+        const generatedCandidates = publishedContent.candidates.map(
+          ({
+            assetId,
+            dependencyRevision,
+            children: candidateChildren,
+            frontmatter
+          }) => {
+            const generated = generateJsxChildren({
+              classesMap,
+              scope,
+              metas,
+              tagsOverrides,
+              children: publishedContent.bodyInstanceId === void 0 ? candidateChildren : instance.children,
+              instances,
+              props,
+              resources,
+              dataSources,
+              usedDataSources,
+              indexesWithinAncestors,
+              excludePlaceholders,
+              publishedContentBlocks,
+              contentBodyOverride: publishedContent.bodyInstanceId === void 0 ? void 0 : {
+                instanceId: publishedContent.bodyInstanceId,
+                children: candidateChildren
+              }
+            });
+            const withDocument = documentName === void 0 ? generated : `{((${documentName}) => <Fragment>
+${generated}</Fragment>)(${JSON.stringify({ frontmatter })})}
+`;
+            return {
+              assetId,
+              dependencyRevision,
+              generated: withDocument
+            };
+          }
+        );
+        if (sourceExpression === void 0) {
+          generatedInstanceChildren = generatedCandidates.map(
+            ({ dependencyRevision, generated }) => `<Fragment key=${JSON.stringify(dependencyRevision)}>
+${generated}</Fragment>
+`
+          ).join("");
+        } else {
+          const sourceName = scope.getName(
+            `${instance.id}-published-source`,
+            "contentSource"
+          );
+          const branches = generatedCandidates.map(
+            ({ assetId, dependencyRevision, generated }) => `${sourceName} === ${JSON.stringify(assetId)} ? <Fragment key=${JSON.stringify(dependencyRevision)}>
+${generated}</Fragment>`
+          ).join(" : ");
+          generatedInstanceChildren = `{((${sourceName}) => ${branches.length === 0 ? "null" : `${branches} : null`})(${sourceExpression})}
+`;
+        }
+      }
       generatedChildren += generateJsxElement({
         context: "jsx",
         scope,
+        metas,
+        tagsOverrides,
         instance,
         props,
+        resources,
         dataSources,
         usedDataSources,
         indexesWithinAncestors,
         classesMap,
-        children: generateJsxChildren({
-          classesMap,
-          scope,
-          children: instance.children,
-          instances,
-          props,
-          dataSources,
-          usedDataSources,
-          indexesWithinAncestors,
-          excludePlaceholders
-        })
+        children: generatedInstanceChildren
       });
       continue;
     }
@@ -991,50 +721,67 @@ var generateWebstudioComponent = ({
   parameters,
   instances,
   props,
+  resources,
   dataSources,
-  indexesWithinAncestors,
-  classesMap
+  metas,
+  tagsOverrides,
+  classesMap,
+  publishedContentBlocks
 }) => {
   const instance = instances.get(rootInstanceId);
-  if (instance === void 0) {
-    return "";
-  }
+  const indexesWithinAncestors = getIndexesWithinAncestors(metas, instances, [
+    rootInstanceId
+  ]);
   const usedDataSources = /* @__PURE__ */ new Map();
-  const generatedJsx = generateJsxElement({
-    context: "expression",
-    scope,
-    instance,
-    props,
-    dataSources,
-    usedDataSources,
-    indexesWithinAncestors,
-    classesMap,
-    children: generateJsxChildren({
+  let generatedJsx = "<></>\n";
+  if (instance) {
+    generatedJsx = generateJsxElement({
+      context: "expression",
       scope,
-      children: instance.children,
-      instances,
+      metas,
+      tagsOverrides,
+      instance,
       props,
+      resources,
       dataSources,
       usedDataSources,
       indexesWithinAncestors,
-      classesMap
-    })
-  });
+      classesMap,
+      children: generateJsxChildren({
+        scope,
+        metas,
+        tagsOverrides,
+        children: instance.children,
+        instances,
+        props,
+        resources,
+        dataSources,
+        usedDataSources,
+        indexesWithinAncestors,
+        classesMap,
+        publishedContentBlocks
+      })
+    });
+  }
   let generatedProps = "";
+  let generatedParameters = "";
+  const uniqueParameters = new Set(
+    parameters.map((parameter) => parameter.name)
+  );
   if (parameters.length > 0) {
-    let generatedPropsValue = "{ ";
-    let generatedPropsType = "{ ";
+    let generatedPropsType = "";
+    for (const parameterName of uniqueParameters) {
+      generatedPropsType += `${parameterName}: any; `;
+    }
+    generatedProps = `_props: { ${generatedPropsType}}`;
     for (const parameter of parameters) {
       const dataSource = usedDataSources.get(parameter.value);
       if (dataSource) {
         const valueName = scope.getName(dataSource.id, dataSource.name);
-        generatedPropsValue += `${parameter.name}: ${valueName}, `;
+        generatedParameters += `const ${valueName} = _props.${parameter.name};
+`;
       }
-      generatedPropsType += `${parameter.name}: any; `;
     }
-    generatedPropsValue += `}`;
-    generatedPropsType += `}`;
-    generatedProps = `${generatedPropsValue}: ${generatedPropsType}`;
   }
   let generatedDataSources = "";
   for (const dataSource of usedDataSources.values()) {
@@ -1063,33 +810,40 @@ var generateWebstudioComponent = ({
   let generatedComponent = "";
   generatedComponent += `const ${name} = (${generatedProps}) => {
 `;
+  generatedComponent += `${generatedParameters}`;
   generatedComponent += `${generatedDataSources}`;
   generatedComponent += `return ${generatedJsx}`;
   generatedComponent += `}
 `;
   return generatedComponent;
 };
+
+// src/standard-attributes.ts
+import {
+  getInstancePropName,
+  getJsxPropName as getJsxPropName2,
+  reactPropsToStandardAttributes,
+  standardAttributesToReactProps
+} from "@webstudio-is/content-engine/jsx-attributes";
 export {
-  addGlobalRules,
-  collapsedAttribute,
   componentAttribute,
-  createImageValueTransformer,
-  editablePlaceholderVariable,
-  editingPlaceholderVariable,
-  generateCss,
-  generateDataFromEmbedTemplate,
+  findTreeInstanceIdsExcludingStaticHidden,
+  generateCollectionIterationCode,
   generateJsxChildren,
   generateJsxElement,
   generateRemixParams,
   generateRemixRoute,
   generateWebstudioComponent,
-  getIndexesWithinAncestors,
+  getCollectionEntries,
+  getInstancePropName,
+  getJsxPropName2 as getJsxPropName,
   idAttribute,
-  indexAttribute,
+  inflatedAttribute,
   isAttributeNameSafe,
-  namespaceMeta,
   normalizeProps,
+  reactPropsToStandardAttributes,
   selectorIdAttribute,
   showAttribute,
+  standardAttributesToReactProps,
   textContentAttribute
 };