@webstudio-is/react-sdk 0.82.0 → 0.84.0

package/lib/cjs/component-renderer.js

@@ -0,0 +1,125 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var component_renderer_exports = {};
+__export(component_renderer_exports, {
+  renderComponentTemplate: () => renderComponentTemplate
+});
+module.exports = __toCommonJS(component_renderer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_project_build = require("@webstudio-is/project-build");
+var import_embed_template = require("./embed-template");
+var import_css = require("./css");
+var import_tree = require("./tree");
+var import_expression = require("./expression");
+var import_instance_utils = require("./instance-utils");
+const renderComponentTemplate = ({
+  name,
+  metas: metasRecord,
+  components
+}) => {
+  const metas = new Map(Object.entries(metasRecord));
+  const data = (0, import_embed_template.generateDataFromEmbedTemplate)(
+    metas.get(name)?.template ?? [
+      {
+        type: "instance",
+        component: name,
+        children: []
+      }
+    ],
+    "base"
+  );
+  const instances = [
+    [
+      "root",
+      {
+        type: "instance",
+        id: "root",
+        component: "Box",
+        children: data.children
+      }
+    ],
+    ...data.instances.map(
+      (instance) => [instance.id, instance]
+    )
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: (0, import_css.generateCssText)(
+      {
+        assets: [],
+        breakpoints: [["base", { id: "base", label: "base" }]],
+        styles: data.styles.map((item) => [(0, import_project_build.getStyleDeclKey)(item), item]),
+        styleSourceSelections: data.styleSourceSelections.map((item) => [
+          item.instanceId,
+          item
+        ]),
+        componentMetas: metas
+      },
+      { assetBaseUrl: "/" }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tree.InstanceRoot,
+      {
+        data: {
+          page: {
+            path: "",
+            id: "",
+            name: "",
+            title: "",
+            meta: {},
+            rootInstanceId: "root"
+          },
+          pages: [],
+          assets: [],
+          build: {
+            instances,
+            props: data.props.map((prop) => [prop.id, prop]),
+            dataSources: data.dataSources.map((dataSource) => [
+              dataSource.id,
+              dataSource
+            ])
+          }
+        },
+        executeComputingExpressions: (values) => {
+          const expressions = /* @__PURE__ */ new Map();
+          for (const dataSource of data.dataSources) {
+            const name2 = (0, import_expression.encodeDataSourceVariable)(dataSource.id);
+            if (dataSource.type === "expression") {
+              expressions.set(name2, dataSource.code);
+            }
+          }
+          return (0, import_expression.decodeVariablesMap)(
+            (0, import_expression.executeComputingExpressions)(expressions, (0, import_expression.encodeVariablesMap)(values))
+          );
+        },
+        executeEffectfulExpression: (code, args, values) => {
+          return (0, import_expression.decodeVariablesMap)(
+            (0, import_expression.executeEffectfulExpression)(code, args, (0, import_expression.encodeVariablesMap)(values))
+          );
+        },
+        Component: import_tree.WebstudioComponent,
+        components: new Map(Object.entries(components)),
+        indexesWithinAncestors: (0, import_instance_utils.getIndexesWithinAncestors)(
+          metas,
+          new Map(instances),
+          ["root"]
+        )
+      }
+    )
+  ] });
+};

package/lib/cjs/components/component-meta.js

@@ -37,6 +37,7 @@ const componentCategories = [
   "text",
   "media",
   "forms",
+  "radix",
   "hidden"
 ];
 const stateCategories = ["states", "component-states"];
@@ -61,7 +62,16 @@ const WsComponentMeta = import_zod.z.object({
   type: import_zod.z.enum(["container", "control", "embed", "rich-text-child"]),
   requiredAncestors: import_zod.z.optional(import_zod.z.array(import_zod.z.string())),
   invalidAncestors: import_zod.z.optional(import_zod.z.array(import_zod.z.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: import_zod.z.optional(import_zod.z.string()),
   stylable: import_zod.z.optional(import_zod.z.boolean()),
+  // specifies whether the instance can be deleted,
+  // copied or dragged out of its parent instance
+  // true by default
+  detachable: import_zod.z.optional(import_zod.z.boolean()),
   label: import_zod.z.string(),
   description: import_zod.z.string().optional(),
   icon: import_zod.z.string(),

package/lib/cjs/components/components-utils.js

@@ -14,3 +14,4 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var components_utils_exports = {};
 module.exports = __toCommonJS(components_utils_exports);
+var import_tree = require("../tree");

package/lib/cjs/context.js

@@ -38,5 +38,6 @@ const ReactSdkContext = (0, import_react.createContext)({
   },
   setBoundDataSourceValue: () => {
     throw Error("React SDK setBoundDataSourceValue is not implemented");
-  }
+  },
+  indexesWithinAncestors: /* @__PURE__ */ new Map()
 });

package/lib/cjs/css/index.js

@@ -15,7 +15,6 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var css_exports = {};
 module.exports = __toCommonJS(css_exports);
-__reExport(css_exports, require("./get-browser-style"), module.exports);
 __reExport(css_exports, require("./global-rules"), module.exports);
 __reExport(css_exports, require("./style-rules"), module.exports);
 __reExport(css_exports, require("./css"), module.exports);

package/lib/cjs/css/style-rules.js

@@ -73,7 +73,7 @@ const getPresetStyleRules = (component, presetStyle) => {
   const presetStyleRules = /* @__PURE__ */ new Map();
   for (const [tag, styles] of Object.entries(presetStyle)) {
     for (const styleDecl of styles) {
-      const selector = `${tag}:where([${import_tree.componentAttribute}=${component}])${styleDecl.state ?? ""}`;
+      const selector = `${tag}:where([${import_tree.componentAttribute}="${component}"])${styleDecl.state ?? ""}`;
       let rule = presetStyleRules.get(selector);
       if (rule === void 0) {
         rule = {};

package/lib/cjs/embed-template.js

@@ -21,52 +21,58 @@ __export(embed_template_exports, {
   EmbedTemplateInstance: () => EmbedTemplateInstance,
   EmbedTemplateStyleDecl: () => EmbedTemplateStyleDecl,
   WsEmbedTemplate: () => WsEmbedTemplate,
-  generateDataFromEmbedTemplate: () => generateDataFromEmbedTemplate
+  generateDataFromEmbedTemplate: () => generateDataFromEmbedTemplate,
+  namespaceMeta: () => namespaceMeta
 });
 module.exports = __toCommonJS(embed_template_exports);
 var import_zod = require("zod");
 var import_nanoid = require("nanoid");
+var import_project_build = require("@webstudio-is/project-build");
 var import_css_data = require("@webstudio-is/css-data");
 var import_expression = require("./expression");
 const EmbedTemplateText = import_zod.z.object({
   type: import_zod.z.literal("text"),
   value: import_zod.z.string()
 });
-const DataSourceVariableRef = import_zod.z.object({
-  type: import_zod.z.literal("variable"),
-  name: import_zod.z.string()
-});
-const DataSourceRef = import_zod.z.union([
-  DataSourceVariableRef,
+const EmbedTemplateDataSource = import_zod.z.union([
+  import_zod.z.object({
+    type: import_zod.z.literal("variable"),
+    initialValue: import_zod.z.union([
+      import_zod.z.string(),
+      import_zod.z.number(),
+      import_zod.z.boolean(),
+      import_zod.z.array(import_zod.z.string())
+    ])
+  }),
   import_zod.z.object({
     type: import_zod.z.literal("expression"),
-    name: import_zod.z.string(),
     code: import_zod.z.string()
   })
 ]);
 const EmbedTemplateProp = import_zod.z.union([
+  import_zod.z.object({
+    type: import_zod.z.literal("dataSource"),
+    name: import_zod.z.string(),
+    dataSourceName: import_zod.z.string()
+  }),
   import_zod.z.object({
     type: import_zod.z.literal("number"),
     name: import_zod.z.string(),
-    dataSourceRef: import_zod.z.optional(DataSourceRef),
     value: import_zod.z.number()
   }),
   import_zod.z.object({
     type: import_zod.z.literal("string"),
     name: import_zod.z.string(),
-    dataSourceRef: import_zod.z.optional(DataSourceRef),
     value: import_zod.z.string()
   }),
   import_zod.z.object({
     type: import_zod.z.literal("boolean"),
     name: import_zod.z.string(),
-    dataSourceRef: import_zod.z.optional(DataSourceRef),
     value: import_zod.z.boolean()
   }),
   import_zod.z.object({
     type: import_zod.z.literal("string[]"),
     name: import_zod.z.string(),
-    dataSourceRef: import_zod.z.optional(DataSourceRef),
     value: import_zod.z.array(import_zod.z.string())
   }),
   import_zod.z.object({
@@ -75,6 +81,7 @@ const EmbedTemplateProp = import_zod.z.union([
     value: import_zod.z.array(
       import_zod.z.object({
         type: import_zod.z.literal("execute"),
+        args: import_zod.z.optional(import_zod.z.array(import_zod.z.string())),
         code: import_zod.z.string()
       })
     )
@@ -92,6 +99,7 @@ const EmbedTemplateInstance = import_zod.z.lazy(
     type: import_zod.z.literal("instance"),
     component: import_zod.z.string(),
     label: import_zod.z.optional(import_zod.z.string()),
+    dataSources: import_zod.z.optional(import_zod.z.record(import_zod.z.string(), EmbedTemplateDataSource)),
     props: import_zod.z.optional(import_zod.z.array(EmbedTemplateProp)),
     styles: import_zod.z.optional(import_zod.z.array(EmbedTemplateStyleDecl)),
     children: WsEmbedTemplate
@@ -100,11 +108,58 @@ const EmbedTemplateInstance = import_zod.z.lazy(
 const WsEmbedTemplate = import_zod.z.lazy(
   () => import_zod.z.array(import_zod.z.union([EmbedTemplateInstance, EmbedTemplateText]))
 );
+const getDataSourceValue = (value) => {
+  if (typeof value === "string") {
+    return { type: "string", value };
+  }
+  if (typeof value === "number") {
+    return { type: "number", value };
+  }
+  if (typeof value === "boolean") {
+    return { type: "boolean", value };
+  }
+  if (Array.isArray(value)) {
+    return { type: "string[]", value };
+  }
+  value;
+  throw Error("Impossible case");
+};
 const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByRef, styleSourceSelections, styleSources, styles, defaultBreakpointId) => {
   const parentChildren = [];
   for (const item of treeTemplate) {
     if (item.type === "instance") {
       const instanceId = (0, import_nanoid.nanoid)();
+      if (item.dataSources) {
+        for (const [name, dataSource] of Object.entries(item.dataSources)) {
+          if (dataSourceByRef.has(name)) {
+            throw Error(`${name} data source already defined`);
+          }
+          if (dataSource.type === "variable") {
+            dataSourceByRef.set(name, {
+              type: "variable",
+              id: (0, import_nanoid.nanoid)(),
+              scopeInstanceId: instanceId,
+              name,
+              value: getDataSourceValue(dataSource.initialValue)
+            });
+          }
+          if (dataSource.type === "expression") {
+            dataSourceByRef.set(name, {
+              type: "expression",
+              id: (0, import_nanoid.nanoid)(),
+              scopeInstanceId: instanceId,
+              name,
+              // replace all references with variable names
+              code: (0, import_expression.validateExpression)(dataSource.code, {
+                transformIdentifier: (ref) => {
+                  const id = dataSourceByRef.get(ref)?.id ?? ref;
+                  return (0, import_expression.encodeDataSourceVariable)(id);
+                }
+              })
+            });
+          }
+        }
+      }
       if (item.props) {
         for (const prop of item.props) {
           const propId = (0, import_nanoid.nanoid)();
@@ -115,12 +170,17 @@ const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceB
               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: (0, import_expression.validateExpression)(value.code, {
                     effectful: true,
                     transformIdentifier: (ref) => {
+                      if (args.includes(ref)) {
+                        return ref;
+                      }
                       const id = dataSourceByRef.get(ref)?.id ?? ref;
                       return (0, import_expression.encodeDataSourceVariable)(id);
                     }
@@ -130,51 +190,21 @@ const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceB
             });
             continue;
           }
-          if (prop.dataSourceRef === void 0) {
-            props.push({ id: propId, instanceId, ...prop });
-            continue;
-          }
-          let dataSource = dataSourceByRef.get(prop.dataSourceRef.name);
-          if (dataSource === void 0) {
-            const id = (0, import_nanoid.nanoid)();
-            const { name: propName, dataSourceRef, ...rest } = prop;
-            if (dataSourceRef.type === "variable") {
-              dataSource = {
-                type: "variable",
-                id,
-                // the first instance where data source is appeared in becomes its scope
-                scopeInstanceId: instanceId,
-                name: dataSourceRef.name,
-                value: rest
-              };
-              dataSourceByRef.set(dataSourceRef.name, dataSource);
-            } else if (dataSourceRef.type === "expression") {
-              dataSource = {
-                type: "expression",
-                id,
-                scopeInstanceId: instanceId,
-                name: dataSourceRef.name,
-                // replace all references with variable names
-                code: (0, import_expression.validateExpression)(dataSourceRef.code, {
-                  transformIdentifier: (ref) => {
-                    const id2 = dataSourceByRef.get(ref)?.id ?? ref;
-                    return (0, import_expression.encodeDataSourceVariable)(id2);
-                  }
-                })
-              };
-              dataSourceByRef.set(dataSourceRef.name, dataSource);
-            } else {
-              dataSourceRef;
-              continue;
+          if (prop.type === "dataSource") {
+            const dataSource = dataSourceByRef.get(prop.dataSourceName);
+            if (dataSource === void 0) {
+              throw Error(`${prop.dataSourceName} data source is not defined`);
             }
+            props.push({
+              id: propId,
+              instanceId,
+              type: "dataSource",
+              name: prop.name,
+              value: dataSource.id
+            });
+            continue;
           }
-          props.push({
-            id: propId,
-            instanceId,
-            type: "dataSource",
-            name: prop.name,
-            value: dataSource.id
-          });
+          props.push({ id: propId, instanceId, ...prop });
         }
       }
       if (item.styles) {
@@ -256,3 +286,48 @@ const generateDataFromEmbedTemplate = (treeTemplate, defaultBreakpointId) => {
     styles
   };
 };
+const namespaceEmbedTemplateComponents = (template, namespace, components) => {
+  return template.map((item) => {
+    if (item.type === "text") {
+      return item;
+    }
+    if (item.type === "instance") {
+      const prefix = components.has(item.component) ? `${namespace}:` : "";
+      return {
+        ...item,
+        component: `${prefix}${item.component}`,
+        children: namespaceEmbedTemplateComponents(
+          item.children,
+          namespace,
+          components
+        )
+      };
+    }
+    item;
+    throw Error("Impossible case");
+  });
+};
+const 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;
+};

package/lib/cjs/expression.js

@@ -28,6 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var expression_exports = {};
 __export(expression_exports, {
+  computeExpressionsDependencies: () => computeExpressionsDependencies,
   decodeDataSourceVariable: () => decodeDataSourceVariable,
   decodeVariablesMap: () => decodeVariablesMap,
   encodeDataSourceVariable: () => encodeDataSourceVariable,
@@ -249,12 +250,15 @@ const executeComputingExpressions = (expressions, variables) => {
   const values = executeFn(variables);
   return values;
 };
-const generateEffectfulExpression = (code, allowedVariables) => {
+const generateEffectfulExpression = (code, args, allowedVariables) => {
   const inputVariables = /* @__PURE__ */ new Set();
   const outputVariables = /* @__PURE__ */ new Set();
   validateExpression(code, {
     effectful: true,
     transformIdentifier: (identifier, assignee) => {
+      if (args.has(identifier)) {
+        return identifier;
+      }
       if (allowedVariables.has(identifier)) {
         if (assignee) {
           outputVariables.add(identifier);
@@ -267,6 +271,10 @@ const generateEffectfulExpression = (code, allowedVariables) => {
     }
   });
   let generatedCode = "";
+  for (const id of args) {
+    generatedCode += `let ${id} = _args.get('${id}');
+`;
+  }
   for (const id of inputVariables) {
     generatedCode += `let ${id} = _variables.get('${id}');
 `;
@@ -288,15 +296,50 @@ const generateEffectfulExpression = (code, allowedVariables) => {
   generatedCode += `]);`;
   return generatedCode;
 };
-const executeEffectfulExpression = (code, variables) => {
+const executeEffectfulExpression = (code, args, variables) => {
   const generatedCode = generateEffectfulExpression(
     code,
+    new Set(args.keys()),
     new Set(variables.keys())
   );
-  const executeFn = new Function("_variables", generatedCode);
-  const values = executeFn(variables);
+  const executeFn = new Function("_variables", "_args", generatedCode);
+  const values = executeFn(variables, args);
   return values;
 };
+const computeExpressionDependencies = (expressions, expressionId, dependencies) => {
+  const depsById = dependencies.get(expressionId);
+  if (depsById) {
+    return depsById;
+  }
+  const parentDeps = /* @__PURE__ */ new Set();
+  const code = expressions.get(expressionId);
+  if (code === void 0) {
+    return parentDeps;
+  }
+  dependencies.set(expressionId, parentDeps);
+  validateExpression(code, {
+    transformIdentifier: (id) => {
+      parentDeps.add(id);
+      const childDeps = computeExpressionDependencies(
+        expressions,
+        id,
+        dependencies
+      );
+      for (const depId of childDeps) {
+        parentDeps.add(depId);
+      }
+      return id;
+    }
+  });
+  return parentDeps;
+};
+const computeExpressionsDependencies = (expressions) => {
+  const dependencies = /* @__PURE__ */ new Map();
+  for (const id of expressions.keys()) {
+    computeExpressionDependencies(expressions, id, dependencies);
+  }
+  return dependencies;
+};
 const dataSourceVariablePrefix = "$ws$dataSource$";
 const encodeDataSourceVariable = (id) => {
   const encoded = id.replaceAll("-", "__DASH__");

package/lib/cjs/hook.js

@@ -0,0 +1,34 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var hook_exports = {};
+__export(hook_exports, {
+  getClosestInstance: () => getClosestInstance
+});
+module.exports = __toCommonJS(hook_exports);
+const getClosestInstance = (instanceSelection, currentInstance, closestComponent) => {
+  let matched = false;
+  for (const instance of instanceSelection) {
+    if (currentInstance === instance) {
+      matched = true;
+    }
+    if (matched && instance.component === closestComponent) {
+      return instance;
+    }
+  }
+};

package/lib/cjs/index.js

@@ -21,6 +21,7 @@ var src_exports = {};
 __export(src_exports, {
   ReactSdkContext: () => import_context.ReactSdkContext,
   componentCategories: () => import_component_meta.componentCategories,
+  computeExpressionsDependencies: () => import_expression.computeExpressionsDependencies,
   decodeDataSourceVariable: () => import_expression.decodeDataSourceVariable,
   decodeVariablesMap: () => import_expression.decodeVariablesMap,
   defaultStates: () => import_component_meta.defaultStates,
@@ -30,7 +31,10 @@ __export(src_exports, {
   executeEffectfulExpression: () => import_expression.executeEffectfulExpression,
   generateComputingExpressions: () => import_expression.generateComputingExpressions,
   generateEffectfulExpression: () => import_expression.generateEffectfulExpression,
+  getIndexWithinAncestorFromComponentProps: () => import_props.getIndexWithinAncestorFromComponentProps,
+  getIndexesWithinAncestors: () => import_instance_utils.getIndexesWithinAncestors,
   getInstanceIdFromComponentProps: () => import_props.getInstanceIdFromComponentProps,
+  renderComponentTemplate: () => import_component_renderer.renderComponentTemplate,
   stateCategories: () => import_component_meta.stateCategories,
   useInstanceProps: () => import_props.useInstanceProps,
   usePropAsset: () => import_props.usePropAsset,
@@ -48,3 +52,6 @@ __reExport(src_exports, require("./embed-template"), module.exports);
 var import_props = require("./props");
 var import_context = require("./context");
 var import_expression = require("./expression");
+var import_component_renderer = require("./component-renderer");
+var import_instance_utils = require("./instance-utils");
+__reExport(src_exports, require("./hook"), module.exports);

package/lib/cjs/instance-utils.js

@@ -0,0 +1,65 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var instance_utils_exports = {};
+__export(instance_utils_exports, {
+  getIndexesWithinAncestors: () => getIndexesWithinAncestors
+});
+module.exports = __toCommonJS(instance_utils_exports);
+const 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;
+};