@webstudio-is/react-sdk 0.189.0 → 0.191.4

package/lib/index.js

@@ -1,1528 +0,0 @@
-// 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 {
-  ListViewIcon,
-  PaintBrushIcon,
-  SettingsIcon
-} 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 coreMetas = {
-  [rootComponent]: rootMeta,
-  [collectionComponent]: collectionMeta,
-  [descendantComponent]: descendantMeta
-};
-var corePropsMetas = {
-  [rootComponent]: rootPropsMeta,
-  [collectionComponent]: collectionPropsMeta,
-  [descendantComponent]: descendantPropsMeta
-};
-var isCoreComponent = (component) => component === rootComponent || component === collectionComponent || component === descendantComponent;
-
-// 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";
-
-// 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 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",
-  "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"]),
-  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(), 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 === 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 {
-    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,
-  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
-};