@webstudio-is/react-sdk 0.191.4 → 0.192.0

package/lib/index.js

@@ -0,0 +1,1723 @@
+// src/remix.ts
+var getRemixSegment = (segment) => {
+  if (segment === "*") {
+    return "$";
+  }
+  const match = segment.match(/^:(?<name>\w+)(?<modifier>\*|\?)?$/);
+  const name = match?.groups?.name;
+  const modifier = match?.groups?.modifier;
+  if (name) {
+    if (modifier === "*") {
+      return "$";
+    }
+    if (modifier === "?") {
+      return `($${name})`;
+    }
+    return `$${name}`;
+  }
+  return `[${segment}]`;
+};
+var generateRemixRoute = (pathname) => {
+  if (pathname.startsWith("/")) {
+    pathname = pathname.slice(1);
+  }
+  if (pathname === "") {
+    return `_index`;
+  }
+  const base = pathname.split("/").map(getRemixSegment).join(".");
+  const tail = pathname.endsWith("*") ? "" : "._index";
+  return `${base}${tail}`;
+};
+var generateRemixParams = (pathname) => {
+  const name = pathname.match(/:(?<name>\w+)\*$/)?.groups?.name;
+  let generated = "";
+  generated += `type Params = Record<string, string | undefined>;
+`;
+  generated += `export const getRemixParams = ({ ...params }: Params): Params => {
+`;
+  if (name) {
+    generated += `  params["${name}"] = params["*"]
+`;
+    generated += `  delete params["*"]
+`;
+  }
+  if (pathname.endsWith("/*")) {
+    generated += `  params[0] = params["*"]
+`;
+    generated += `  delete params["*"]
+`;
+  }
+  generated += `  return params
+`;
+  generated += `}
+`;
+  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
+} from "@webstudio-is/sdk";
+
+// src/core-components.ts
+import {
+  EditIcon,
+  ListViewIcon,
+  PaintBrushIcon,
+  SettingsIcon,
+  AddTemplateInstanceIcon
+} from "@webstudio-is/icons/svg";
+import { html } from "@webstudio-is/sdk/normalize.css";
+var rootComponent = "ws:root";
+var rootMeta = {
+  category: "hidden",
+  type: "container",
+  label: "Global Root",
+  icon: SettingsIcon,
+  presetStyle: {
+    html
+  }
+};
+var rootPropsMeta = {
+  props: {}
+};
+var portalComponent = "Slot";
+var collectionComponent = "ws:collection";
+var collectionMeta = {
+  category: "data",
+  order: 2,
+  type: "container",
+  label: "Collection",
+  icon: ListViewIcon,
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: collectionComponent,
+      props: [
+        {
+          name: "data",
+          type: "json",
+          value: [
+            "Collection Item 1",
+            "Collection Item 2",
+            "Collection Item 3"
+          ]
+        },
+        {
+          name: "item",
+          type: "parameter",
+          variableName: "collectionItem",
+          variableAlias: "Collection Item"
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "Box",
+          children: [
+            {
+              type: "instance",
+              component: "Text",
+              children: [{ type: "expression", value: "collectionItem" }]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+var collectionPropsMeta = {
+  props: {
+    data: {
+      required: true,
+      control: "json",
+      type: "json"
+    }
+  },
+  initialProps: ["data"]
+};
+var descendantComponent = "ws:descendant";
+var descendantMeta = {
+  category: "internal",
+  type: "control",
+  label: "Descendant",
+  icon: PaintBrushIcon,
+  detachable: false
+};
+var descendantPropsMeta = {
+  props: {
+    selector: {
+      required: true,
+      type: "string",
+      control: "select",
+      options: [
+        " p",
+        " h1",
+        " h2",
+        " h3",
+        " h4",
+        " h5",
+        " h6",
+        " :where(strong, b)",
+        " :where(em, i)",
+        " a",
+        " img",
+        " blockquote",
+        " code",
+        " :where(ul, ol)",
+        " li",
+        " hr"
+      ]
+    }
+  },
+  initialProps: ["selector"]
+};
+var blockTemplateComponent = "ws:block-template";
+var blockTemplateMeta = {
+  category: "hidden",
+  detachable: false,
+  type: "container",
+  icon: AddTemplateInstanceIcon,
+  stylable: false
+};
+var blockTemplatePropsMeta = {
+  props: {},
+  initialProps: []
+};
+var blockComponent = "ws:block";
+var blockMeta = {
+  category: "data",
+  order: 2,
+  type: "container",
+  label: "Content Block",
+  icon: EditIcon,
+  constraints: {
+    relation: "ancestor",
+    component: { $neq: collectionComponent }
+  },
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: blockComponent,
+      props: [],
+      children: [
+        {
+          type: "instance",
+          label: "Templates",
+          component: blockTemplateComponent,
+          children: [
+            {
+              type: "instance",
+              component: "Paragraph",
+              children: [
+                {
+                  type: "text",
+                  value: "Paragraph text you can edit",
+                  placeholder: true
+                }
+              ]
+            },
+            {
+              type: "instance",
+              component: "List",
+              children: [
+                {
+                  type: "instance",
+                  component: "ListItem",
+                  children: [
+                    {
+                      type: "text",
+                      value: "List Item text you can edit",
+                      placeholder: true
+                    }
+                  ]
+                },
+                {
+                  type: "instance",
+                  component: "ListItem",
+                  children: [
+                    {
+                      type: "text",
+                      value: "List Item text you can edit",
+                      placeholder: true
+                    }
+                  ]
+                },
+                {
+                  type: "instance",
+                  component: "ListItem",
+                  children: [
+                    {
+                      type: "text",
+                      value: "List Item text you can edit",
+                      placeholder: true
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "Paragraph",
+          children: [
+            {
+              type: "text",
+              value: "The Content Block component designates regions on the page where pre-styled instances can be inserted in "
+            },
+            {
+              type: "instance",
+              component: "RichTextLink",
+              children: [
+                {
+                  type: "text",
+                  value: "Content mode"
+                }
+              ],
+              props: [
+                {
+                  type: "string",
+                  name: "href",
+                  value: "https://wstd.us/content-block"
+                }
+              ]
+            },
+            {
+              type: "text",
+              value: "."
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "List",
+          children: [
+            {
+              type: "instance",
+              component: "ListItem",
+              children: [
+                {
+                  type: "text",
+                  value: "In Content mode, you can edit any direct child instances that were pre-added to the Content Block, as well as add new instances predefined in Templates."
+                }
+              ]
+            },
+            {
+              type: "instance",
+              component: "ListItem",
+              children: [
+                {
+                  type: "text",
+                  value: "To predefine instances for insertion in Content mode, switch to Design mode and add them to the Templates container."
+                }
+              ]
+            },
+            {
+              type: "instance",
+              component: "ListItem",
+              children: [
+                {
+                  type: "text",
+                  value: "To insert predefined instances in Content mode, click the + button while hovering over the Content Block on the canvas and choose an instance from the list."
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+var blockPropsMeta = {
+  props: {},
+  initialProps: []
+};
+var coreMetas = {
+  [rootComponent]: rootMeta,
+  [collectionComponent]: collectionMeta,
+  [descendantComponent]: descendantMeta,
+  [blockComponent]: blockMeta,
+  [blockTemplateComponent]: blockTemplateMeta
+};
+var corePropsMetas = {
+  [rootComponent]: rootPropsMeta,
+  [collectionComponent]: collectionPropsMeta,
+  [descendantComponent]: descendantPropsMeta,
+  [blockComponent]: blockPropsMeta,
+  [blockTemplateComponent]: blockTemplatePropsMeta
+};
+var isCoreComponent = (component) => component === rootComponent || component === collectionComponent || component === descendantComponent || component === blockComponent || component === blockTemplateComponent;
+
+// src/css/css.ts
+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?.component === descendantComponent) {
+      const parentId = parentIdByInstanceId.get(instanceId);
+      const descendantSelector = descendantSelectorByInstanceId.get(instanceId);
+      if (parentId && descendantSelector) {
+        descendantSuffix = descendantSelector;
+        instanceId = parentId;
+      }
+    }
+    const meta = instance ? componentMetas.get(instance.component) : void 0;
+    const baseName = instance?.label ?? meta?.label ?? instance?.component ?? instanceId;
+    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
+} from "@webstudio-is/sdk";
+var normalizeProps = ({
+  props,
+  assetBaseUrl,
+  assets,
+  uploadingImageAssets,
+  pages,
+  source
+}) => {
+  const newProps = [];
+  for (const prop of props) {
+    if (prop.type === "asset") {
+      const assetId = prop.value;
+      const asset = assets.get(assetId) ?? uploadingImageAssets.find((asset2) => asset2.id === assetId);
+      if (asset === void 0) {
+        continue;
+      }
+      const propBase = {
+        id: prop.id,
+        name: prop.name,
+        required: prop.required,
+        instanceId: prop.instanceId
+      };
+      if (prop.name === "width" && asset.type === "image") {
+        newProps.push({
+          ...propBase,
+          type: "number",
+          value: asset.meta.width
+        });
+        continue;
+      }
+      if (prop.name === "height" && asset.type === "image") {
+        newProps.push({
+          ...propBase,
+          type: "number",
+          value: asset.meta.height
+        });
+        continue;
+      }
+      newProps.push({
+        ...propBase,
+        type: "string",
+        value: `${assetBaseUrl}${asset.name}`
+      });
+      if (source === "canvas") {
+        newProps.push({
+          id: `${prop.instanceId}-${asset.id}-assetId`,
+          name: "$webstudio$canvasOnly$assetId",
+          required: false,
+          instanceId: prop.instanceId,
+          type: "string",
+          value: asset.id
+        });
+      }
+      continue;
+    }
+    if (prop.type === "page") {
+      let idProp;
+      const pageId = typeof prop.value === "string" ? prop.value : prop.value.pageId;
+      const page = findPageByIdOrPath(pageId, pages);
+      if (page === void 0) {
+        continue;
+      }
+      if (typeof prop.value !== "string") {
+        const { instanceId } = prop.value;
+        idProp = props.find(
+          (prop2) => prop2.instanceId === instanceId && prop2.name === "id"
+        );
+      }
+      const path = getPagePath(page.id, pages);
+      const url = new URL(path, "https://any-valid.url");
+      let value = url.pathname;
+      if (idProp?.type === "string") {
+        const hash = idProp.value;
+        url.hash = encodeURIComponent(hash);
+        value = `${url.pathname}${url.hash}`;
+      }
+      newProps.push({
+        id: prop.id,
+        name: prop.name,
+        required: prop.required,
+        instanceId: prop.instanceId,
+        type: "string",
+        value
+      });
+      continue;
+    }
+    newProps.push(prop);
+  }
+  return newProps;
+};
+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 textContentAttribute = "data-ws-text-content";
+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(
+  // eslint-disable-next-line no-misleading-character-class
+  "^[" + attributeNameStartChar + "][" + attributeNameChar + "]*$"
+);
+var illegalAttributeNameCache = /* @__PURE__ */ new Map();
+var validatedAttributeNameCache = /* @__PURE__ */ new Map();
+var isAttributeNameSafe = (attributeName) => {
+  if (validatedAttributeNameCache.has(attributeName)) {
+    return true;
+  }
+  if (illegalAttributeNameCache.has(attributeName)) {
+    return false;
+  }
+  if (validAttributeNameRegex.test(attributeName)) {
+    validatedAttributeNameCache.set(attributeName, true);
+    return true;
+  }
+  illegalAttributeNameCache.set(attributeName, true);
+  return false;
+};
+
+// 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"),
+  language: z.union([z.literal("html"), z.literal("markdown")]),
+  defaultValue: z.string().optional()
+});
+var CodeText = z.object({
+  ...common,
+  control: z.literal("codetext"),
+  type: z.literal("string"),
+  defaultValue: z.string().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 Json = z.object({
+  ...common,
+  control: z.literal("json"),
+  type: z.literal("json"),
+  defaultValue: z.unknown().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 TextContent = z.object({
+  ...common,
+  control: z.literal("textContent"),
+  type: z.literal("string"),
+  defaultValue: z.string().optional()
+});
+var PropMeta = z.union([
+  Number,
+  Range,
+  Text,
+  Code,
+  CodeText,
+  Color,
+  Boolean,
+  Radio,
+  InlineRadio,
+  Select,
+  MultiSelect,
+  Check,
+  InlineCheck,
+  File,
+  Url,
+  Json,
+  Date,
+  Action,
+  TextContent
+]);
+
+// src/components/component-meta.ts
+import { z as z3 } from "zod";
+import { Matchers } from "@webstudio-is/sdk";
+
+// src/embed-template.ts
+import { z as z2 } from "zod";
+import { nanoid } from "nanoid";
+import { titleCase } from "title-case";
+import { noCase } from "change-case";
+import {
+  encodeDataSourceVariable,
+  transpileExpression
+} from "@webstudio-is/sdk";
+import { StyleValue } from "@webstudio-is/css-engine";
+var EmbedTemplateText = z2.object({
+  type: z2.literal("text"),
+  value: z2.string(),
+  placeholder: z2.boolean().optional()
+});
+var EmbedTemplateExpression = z2.object({
+  type: z2.literal("expression"),
+  value: z2.string()
+});
+var EmbedTemplateVariable = z2.object({
+  alias: z2.optional(z2.string()),
+  initialValue: z2.unknown()
+});
+var EmbedTemplateProp = z2.union([
+  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("json"),
+    name: z2.string(),
+    value: z2.unknown()
+  }),
+  z2.object({
+    type: z2.literal("expression"),
+    name: z2.string(),
+    code: z2.string()
+  }),
+  z2.object({
+    type: z2.literal("parameter"),
+    name: z2.string(),
+    variableName: z2.string(),
+    variableAlias: z2.optional(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()),
+    variables: z2.optional(z2.record(z2.string(), EmbedTemplateVariable)),
+    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, EmbedTemplateExpression])
+  )
+);
+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 };
+  }
+  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.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 = 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);
+          }
+        })
+      });
+    }
+  }
+  return parentChildren;
+};
+var generateDataFromEmbedTemplate = (treeTemplate, metas, defaultBreakpointId, generateId = nanoid) => {
+  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,
+    generateId
+  );
+  return {
+    children,
+    instances,
+    props,
+    dataSources: Array.from(dataSourceByRef.values()),
+    styleSourceSelections,
+    styleSources,
+    styles,
+    assets: [],
+    breakpoints: [],
+    resources: []
+  };
+};
+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 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/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",
+  "data",
+  "media",
+  "forms",
+  "radix",
+  "xml",
+  "hidden",
+  "internal"
+];
+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"]),
+  constraints: Matchers.optional(),
+  // 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(), z3.array(EmbedTemplateStyleDecl))
+  ),
+  presetTokens: z3.optional(z3.record(z3.string(), ComponentToken)),
+  states: z3.optional(z3.array(ComponentState)),
+  template: z3.optional(WsEmbedTemplate),
+  order: z3.number().optional()
+});
+
+// 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-generator.ts
+import {
+  parseComponentName as parseComponentName2,
+  generateExpression,
+  decodeDataSourceVariable,
+  transpileExpression as transpileExpression2
+} from "@webstudio-is/sdk";
+var generateAction = ({
+  scope,
+  prop,
+  dataSources,
+  usedDataSources
+}) => {
+  const setters = /* @__PURE__ */ new Set();
+  let args = [];
+  let assignersCode = "";
+  for (const value of prop.value) {
+    args = value.args;
+    assignersCode += transpileExpression2({
+      expression: value.code,
+      executable: true,
+      replaceVariable: (identifier, assignee) => {
+        if (args?.includes(identifier)) {
+          return;
+        }
+        const depId = decodeDataSourceVariable(identifier);
+        const dep = depId ? dataSources.get(depId) : void 0;
+        if (dep) {
+          usedDataSources.set(dep.id, dep);
+          if (assignee) {
+            setters.add(dep);
+          }
+          const valueName = scope.getName(dep.id, dep.name);
+          return valueName;
+        }
+        console.error(`Unknown dependency "${identifier}"`);
+      }
+    });
+    assignersCode += `
+`;
+  }
+  let settersCode = "";
+  for (const dataSource of setters) {
+    const valueName = scope.getName(dataSource.id, dataSource.name);
+    const setterName = scope.getName(
+      `set$${dataSource.id}`,
+      `set$${dataSource.name}`
+    );
+    settersCode += `${setterName}(${valueName})
+`;
+  }
+  const argsList = args.map((arg) => `${arg}: any`).join(", ");
+  let generated = "";
+  generated += `(${argsList}) => {
+`;
+  generated += assignersCode;
+  generated += settersCode;
+  generated += `}`;
+  return generated;
+};
+var generatePropValue = ({
+  scope,
+  prop,
+  dataSources,
+  usedDataSources
+}) => {
+  if (prop.type === "asset" || prop.type === "page") {
+    return;
+  }
+  if (prop.type === "string" || prop.type === "number" || prop.type === "boolean" || prop.type === "string[]" || prop.type === "json") {
+    return JSON.stringify(prop.value);
+  }
+  if (prop.type === "parameter") {
+    const dataSource = dataSources.get(prop.value);
+    if (dataSource === void 0) {
+      return;
+    }
+    usedDataSources.set(dataSource.id, dataSource);
+    return scope.getName(dataSource.id, dataSource.name);
+  }
+  if (prop.type === "expression") {
+    return generateExpression({
+      expression: prop.value,
+      dataSources,
+      usedDataSources,
+      scope
+    });
+  }
+  if (prop.type === "action") {
+    return generateAction({ scope, prop, dataSources, usedDataSources });
+  }
+  if (prop.type === "resource") {
+    return JSON.stringify(scope.getName(prop.value, prop.name));
+  }
+  prop;
+};
+var generateJsxElement = ({
+  context = "jsx",
+  scope,
+  instance,
+  props,
+  dataSources,
+  usedDataSources,
+  indexesWithinAncestors,
+  children,
+  classesMap
+}) => {
+  if (instance.component === descendantComponent) {
+    return "";
+  }
+  let generatedProps = "";
+  const index = indexesWithinAncestors.get(instance.id);
+  if (index !== void 0) {
+    generatedProps += `
+${indexAttribute}="${index}"`;
+  }
+  let conditionValue;
+  let collectionDataValue;
+  let collectionItemValue;
+  const classMapArray = classesMap?.get(instance.id);
+  const classes = classMapArray !== void 0 ? [JSON.stringify(classMapArray.join(" "))] : [];
+  for (const prop of props.values()) {
+    if (prop.instanceId !== instance.id) {
+      continue;
+    }
+    const propValue = generatePropValue({
+      scope,
+      prop,
+      dataSources,
+      usedDataSources
+    });
+    if (isAttributeNameSafe(prop.name) === false) {
+      continue;
+    }
+    if (prop.name === showAttribute) {
+      if (propValue === "true") {
+        continue;
+      }
+      if (propValue === "false") {
+        return "";
+      }
+      conditionValue = propValue;
+      continue;
+    }
+    if (instance.component === collectionComponent) {
+      if (prop.name === "data") {
+        collectionDataValue = propValue;
+      }
+      if (prop.name === "item") {
+        collectionItemValue = propValue;
+      }
+      continue;
+    }
+    if (prop.name === "className" && propValue !== void 0) {
+      classes.push(propValue);
+      continue;
+    }
+    if (propValue !== void 0) {
+      generatedProps += `
+${prop.name}={${propValue}}`;
+    }
+  }
+  if (classes.length !== 0) {
+    generatedProps += `
+className={${classes.join(` + " " + `)}}`;
+  }
+  let generatedElement = "";
+  if (instance.component === blockTemplateComponent) {
+    return "";
+  }
+  if (instance.component === collectionComponent) {
+    if (collectionDataValue === void 0 || collectionItemValue === void 0) {
+      return "";
+    }
+    const indexVariable = scope.getName(`${instance.id}-index`, "index");
+    generatedElement += `{${collectionDataValue}?.map((${collectionItemValue}: any, ${indexVariable}: number) =>
+`;
+    generatedElement += `<Fragment key={${indexVariable}}>
+`;
+    generatedElement += children;
+    generatedElement += `</Fragment>
+`;
+    generatedElement += `)}
+`;
+  } else if (instance.component === blockComponent) {
+    generatedElement += children;
+  } else {
+    const [_namespace, shortName] = parseComponentName2(instance.component);
+    const componentVariable = scope.getName(instance.component, shortName);
+    if (instance.children.length === 0) {
+      generatedElement += `<${componentVariable}${generatedProps} />
+`;
+    } else {
+      generatedElement += `<${componentVariable}${generatedProps}>
+`;
+      generatedElement += children;
+      generatedElement += `</${componentVariable}>
+`;
+    }
+  }
+  if (conditionValue) {
+    let conditionalElement = "";
+    let before = "";
+    let after = "";
+    if (context === "jsx") {
+      before = "{";
+      after = "}";
+    }
+    conditionalElement += `${before}(${conditionValue}) &&
+`;
+    if (instance.component === collectionComponent) {
+      conditionalElement += "<>\n";
+      conditionalElement += generatedElement;
+      conditionalElement += "</>\n";
+    } else {
+      conditionalElement += generatedElement;
+    }
+    conditionalElement += `${after}
+`;
+    return conditionalElement;
+  }
+  return generatedElement;
+};
+var generateJsxChildren = ({
+  scope,
+  children,
+  instances,
+  props,
+  dataSources,
+  usedDataSources,
+  indexesWithinAncestors,
+  classesMap,
+  excludePlaceholders
+}) => {
+  let generatedChildren = "";
+  for (const child of children) {
+    if (child.type === "text") {
+      if (excludePlaceholders && child.placeholder === true) {
+        continue;
+      }
+      generatedChildren += child.value.split("\n").map((line) => `{${JSON.stringify(line)}}
+`).join(`<br />
+`);
+      continue;
+    }
+    if (child.type === "expression") {
+      const expression = generateExpression({
+        expression: child.value,
+        dataSources,
+        usedDataSources,
+        scope
+      });
+      generatedChildren = `{${expression}}
+`;
+      continue;
+    }
+    if (child.type === "id") {
+      const instanceId = child.value;
+      const instance = instances.get(instanceId);
+      if (instance === void 0) {
+        continue;
+      }
+      generatedChildren += generateJsxElement({
+        context: "jsx",
+        scope,
+        instance,
+        props,
+        dataSources,
+        usedDataSources,
+        indexesWithinAncestors,
+        classesMap,
+        children: generateJsxChildren({
+          classesMap,
+          scope,
+          children: instance.children,
+          instances,
+          props,
+          dataSources,
+          usedDataSources,
+          indexesWithinAncestors,
+          excludePlaceholders
+        })
+      });
+      continue;
+    }
+    child;
+  }
+  return generatedChildren;
+};
+var generateWebstudioComponent = ({
+  scope,
+  name,
+  rootInstanceId,
+  parameters,
+  instances,
+  props,
+  dataSources,
+  indexesWithinAncestors,
+  classesMap
+}) => {
+  const instance = instances.get(rootInstanceId);
+  if (instance === void 0) {
+    return "";
+  }
+  const usedDataSources = /* @__PURE__ */ new Map();
+  const generatedJsx = generateJsxElement({
+    context: "expression",
+    scope,
+    instance,
+    props,
+    dataSources,
+    usedDataSources,
+    indexesWithinAncestors,
+    classesMap,
+    children: generateJsxChildren({
+      scope,
+      children: instance.children,
+      instances,
+      props,
+      dataSources,
+      usedDataSources,
+      indexesWithinAncestors,
+      classesMap
+    })
+  });
+  let generatedProps = "";
+  if (parameters.length > 0) {
+    let generatedPropsValue = "{ ";
+    let 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}, `;
+      }
+      generatedPropsType += `${parameter.name}: any; `;
+    }
+    generatedPropsValue += `}`;
+    generatedPropsType += `}`;
+    generatedProps = `${generatedPropsValue}: ${generatedPropsType}`;
+  }
+  let generatedDataSources = "";
+  for (const dataSource of usedDataSources.values()) {
+    if (dataSource.type === "variable") {
+      const valueName = scope.getName(dataSource.id, dataSource.name);
+      const setterName = scope.getName(
+        `set$${dataSource.id}`,
+        `set$${dataSource.name}`
+      );
+      const initialValue = dataSource.value.value;
+      const initialValueString = JSON.stringify(initialValue);
+      generatedDataSources += `let [${valueName}, ${setterName}] = useVariableState<any>(${initialValueString})
+`;
+    }
+    if (dataSource.type === "resource") {
+      const valueName = scope.getName(dataSource.id, dataSource.name);
+      const resourceName = scope.getName(
+        dataSource.resourceId,
+        dataSource.name
+      );
+      const resourceNameString = JSON.stringify(resourceName);
+      generatedDataSources += `let ${valueName} = useResource(${resourceNameString})
+`;
+    }
+  }
+  let generatedComponent = "";
+  generatedComponent += `const ${name} = (${generatedProps}) => {
+`;
+  generatedComponent += `${generatedDataSources}`;
+  generatedComponent += `return ${generatedJsx}`;
+  generatedComponent += `}
+`;
+  return generatedComponent;
+};
+export {
+  EmbedTemplateInstance,
+  EmbedTemplateProp,
+  EmbedTemplateStyleDecl,
+  PropMeta,
+  WsComponentMeta,
+  WsEmbedTemplate,
+  addGlobalRules,
+  blockComponent,
+  blockTemplateComponent,
+  blockTemplateMeta,
+  collapsedAttribute,
+  collectionComponent,
+  componentAttribute,
+  componentCategories,
+  coreMetas,
+  corePropsMetas,
+  createImageValueTransformer,
+  defaultStates,
+  descendantComponent,
+  generateCss,
+  generateDataFromEmbedTemplate,
+  generateJsxChildren,
+  generateJsxElement,
+  generateRemixParams,
+  generateRemixRoute,
+  generateWebstudioComponent,
+  getIndexesWithinAncestors,
+  idAttribute,
+  indexAttribute,
+  isAttributeNameSafe,
+  isCoreComponent,
+  namespaceMeta,
+  normalizeProps,
+  portalComponent,
+  rootComponent,
+  selectorIdAttribute,
+  showAttribute,
+  stateCategories,
+  textContentAttribute
+};