@fragmentsx/render-react 0.0.4 → 0.0.5

package/dist/index.es.js

@@ -1,32 +1,1347 @@
-import { render, createElement, Instance as Instance$1, Fragment as Fragment$1 } from "@fragmentsx/render-core";
-import require$$0, { createContext, useContext, useRef, useCallback, useState, useEffect } from "react";
-import "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+import require$$0, { createContext, useContext, useRef, useCallback, useState, useEffect, useMemo } from "react";
+import { isLinkKey } from "@graph-state/core";
 import { definition } from "@fragmentsx/definition";
-const GlobalManager = createContext(null);
-function createReactComponent(PreactComponent) {
-  return function ReactWrapper(props) {
-    const globalManager = useContext(GlobalManager);
-    const containerRef = require$$0.useRef(null);
-    require$$0.useEffect(() => {
-      if (containerRef.current) {
-        render(
-          createElement(PreactComponent, {
-            ...props,
-            globalManager: (props == null ? void 0 : props.globalManager) ?? globalManager
-          }),
-          containerRef.current
-        );
+const collectStyles = (globalManager) => {
+  if (!globalManager) return null;
+  const allFragments = globalManager.$fragments.getManagers();
+  const extractors = Object.entries(allFragments).filter(([, value]) => !!(value == null ? void 0 : value.resolve)).map(([fragmentId, manager]) => {
+    var _a;
+    const a = (_a = manager.extractStyleSheet()) == null ? void 0 : _a.at(0);
+    return a;
+  });
+  return extractors.map((extractor) => /* @__PURE__ */ jsx(
+    "style",
+    {
+      id: `fragments-${extractor == null ? void 0 : extractor.fragment}`,
+      dangerouslySetInnerHTML: { __html: extractor == null ? void 0 : extractor.styles.join("") }
+    }
+  ));
+};
+"function" == typeof Promise ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout;
+(function() {
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._fragment_1c708_1 {\n    width: 100%;\n    height: 100%;\n}\n\n._fragmentDocument_1c708_6 {\n    display: contents;\n}\n._text_1liuf_1 {\n    white-space: pre;\n    :where(p) {\n        margin: 0;\n    }\n}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const createConstants = (...constants) => {
+  return constants.reduce((acc, constant) => {
+    acc[constant] = constant;
+    return acc;
+  }, {});
+};
+const nodes = createConstants(
+  "Fragment",
+  "FragmentInstance",
+  "Instance",
+  "Breakpoint",
+  "Frame",
+  "Image",
+  "Text",
+  "SolidPaintStyle",
+  "CssLink",
+  "Variable",
+  "ComputedValue",
+  "TransformValue"
+);
+const fragmentGrowingMode = createConstants("auto", "fill");
+const borderType = createConstants("None", "Solid", "Dashed", "Dotted");
+const linkTarget = createConstants("_blank");
+const paintMode = createConstants("None", "Solid", "Image");
+const imagePaintScaleModes = createConstants(
+  "Fill",
+  "Fit",
+  "Crop",
+  "Tile"
+);
+const constrain = createConstants(
+  "Min",
+  "Center",
+  "Max",
+  "Stretch",
+  "Scale"
+);
+const positionType = createConstants("absolute", "relative");
+const sizing = createConstants("Fixed", "Hug", "Fill", "Relative");
+const layerMode = createConstants("none", "flex");
+const layerDirection = createConstants("vertical", "horizontal");
+const layerAlign = createConstants("start", "center", "end");
+const layerDistribute = createConstants(
+  "start",
+  "center",
+  "end",
+  "space-between",
+  "space-around"
+);
+const textTransform = createConstants(
+  "none",
+  "uppercase",
+  "lowercase",
+  "capitalize"
+);
+const textDecorations = createConstants(
+  "none",
+  "underline",
+  "line-through"
+);
+const effectType = createConstants("loop", "appear", "hover", "tap");
+const effectName = createConstants(
+  "fade",
+  "slide",
+  "bounce",
+  "wiggle",
+  "increase"
+);
+const variableType = createConstants(
+  "Event",
+  "String",
+  "Boolean",
+  "Array",
+  "Color",
+  "ComponentInstance",
+  "Date",
+  "Enum",
+  "Number",
+  "Object"
+);
+const whiteSpace = createConstants(
+  "normal",
+  "nowrap",
+  "pre",
+  "pre-wrap",
+  "pre-line",
+  "break-spaces"
+);
+const overflow = createConstants("visible", "hidden", "scroll");
+const variableTransforms = createConstants(
+  "convert",
+  "exists",
+  "equals",
+  "startWith",
+  "endWith",
+  "contains",
+  "dateBefore",
+  "dateAfter",
+  "dateBetween",
+  "feature",
+  "notFeature",
+  "gt",
+  // Greater than
+  "gte",
+  // Greater than or equals
+  "lt",
+  // Less than
+  "lte",
+  // Less than or equals,
+  "convertFromBoolean",
+  "negative"
+);
+const renderTarget = createConstants("canvas", "document");
+const renderMode = createConstants("viewport", "parent", "fixed");
+const interactions = createConstants("click", "mouseover");
+const eventMode = createConstants("goal", "callback");
+const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  borderType,
+  constrain,
+  createConstants,
+  effectName,
+  effectType,
+  eventMode,
+  fragmentGrowingMode,
+  imagePaintScaleModes,
+  interactions,
+  layerAlign,
+  layerDirection,
+  layerDistribute,
+  layerMode,
+  linkTarget,
+  nodes,
+  overflow,
+  paintMode,
+  positionType,
+  renderMode,
+  renderTarget,
+  sizing,
+  textDecorations,
+  textTransform,
+  variableTransforms,
+  variableType,
+  whiteSpace
+}, Symbol.toStringTag, { value: "Module" }));
+// @__NO_SIDE_EFFECTS__
+function getGlobalConfig(config2) {
+  return {
+    lang: (config2 == null ? void 0 : config2.lang) ?? void 0,
+    message: config2 == null ? void 0 : config2.message,
+    abortEarly: (config2 == null ? void 0 : config2.abortEarly) ?? void 0,
+    abortPipeEarly: (config2 == null ? void 0 : config2.abortPipeEarly) ?? void 0
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function getGlobalMessage(lang) {
+  return void 0;
+}
+// @__NO_SIDE_EFFECTS__
+function getSchemaMessage(lang) {
+  return void 0;
+}
+// @__NO_SIDE_EFFECTS__
+function getSpecificMessage(reference, lang) {
+  var _a;
+  return (_a = void 0) == null ? void 0 : _a.get(lang);
+}
+// @__NO_SIDE_EFFECTS__
+function _stringify(input) {
+  var _a, _b;
+  const type = typeof input;
+  if (type === "string") {
+    return `"${input}"`;
+  }
+  if (type === "number" || type === "bigint" || type === "boolean") {
+    return `${input}`;
+  }
+  if (type === "object" || type === "function") {
+    return (input && ((_b = (_a = Object.getPrototypeOf(input)) == null ? void 0 : _a.constructor) == null ? void 0 : _b.name)) ?? "null";
+  }
+  return type;
+}
+function _addIssue(context, label, dataset, config2, other) {
+  const input = other && "input" in other ? other.input : dataset.value;
+  const expected = (other == null ? void 0 : other.expected) ?? context.expects ?? null;
+  const received = (other == null ? void 0 : other.received) ?? /* @__PURE__ */ _stringify(input);
+  const issue = {
+    kind: context.kind,
+    type: context.type,
+    input,
+    expected,
+    received,
+    message: `Invalid ${label}: ${expected ? `Expected ${expected} but r` : "R"}eceived ${received}`,
+    requirement: context.requirement,
+    path: other == null ? void 0 : other.path,
+    issues: other == null ? void 0 : other.issues,
+    lang: config2.lang,
+    abortEarly: config2.abortEarly,
+    abortPipeEarly: config2.abortPipeEarly
+  };
+  const isSchema = context.kind === "schema";
+  const message = (other == null ? void 0 : other.message) ?? context.message ?? /* @__PURE__ */ getSpecificMessage(context.reference, issue.lang) ?? (isSchema ? /* @__PURE__ */ getSchemaMessage(issue.lang) : null) ?? config2.message ?? /* @__PURE__ */ getGlobalMessage(issue.lang);
+  if (message !== void 0) {
+    issue.message = typeof message === "function" ? (
+      // @ts-expect-error
+      message(issue)
+    ) : message;
+  }
+  if (isSchema) {
+    dataset.typed = false;
+  }
+  if (dataset.issues) {
+    dataset.issues.push(issue);
+  } else {
+    dataset.issues = [issue];
+  }
+}
+// @__NO_SIDE_EFFECTS__
+function _getStandardProps(context) {
+  return {
+    version: 1,
+    vendor: "valibot",
+    validate(value2) {
+      return context["~run"]({ value: value2 }, /* @__PURE__ */ getGlobalConfig());
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function _isValidObjectKey(object2, key) {
+  return Object.hasOwn(object2, key) && key !== "__proto__" && key !== "prototype" && key !== "constructor";
+}
+// @__NO_SIDE_EFFECTS__
+function _joinExpects(values2, separator) {
+  const list = [...new Set(values2)];
+  if (list.length > 1) {
+    return `(${list.join(` ${separator} `)})`;
+  }
+  return list[0] ?? "never";
+}
+// @__NO_SIDE_EFFECTS__
+function isOfKind(kind, object2) {
+  return object2.kind === kind;
+}
+var ValiError = class extends Error {
+  /**
+   * Creates a Valibot error with useful information.
+   *
+   * @param issues The error issues.
+   */
+  constructor(issues) {
+    super(issues[0].message);
+    this.name = "ValiError";
+    this.issues = issues;
+  }
+};
+// @__NO_SIDE_EFFECTS__
+function check(requirement, message) {
+  return {
+    kind: "validation",
+    type: "check",
+    reference: check,
+    async: false,
+    expects: null,
+    requirement,
+    message,
+    "~run"(dataset, config2) {
+      if (dataset.typed && !this.requirement(dataset.value)) {
+        _addIssue(this, "input", dataset, config2);
+      }
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function maxValue(requirement, message) {
+  return {
+    kind: "validation",
+    type: "max_value",
+    reference: maxValue,
+    async: false,
+    expects: `<=${requirement instanceof Date ? requirement.toJSON() : /* @__PURE__ */ _stringify(requirement)}`,
+    requirement,
+    message,
+    "~run"(dataset, config2) {
+      if (dataset.typed && !(dataset.value <= this.requirement)) {
+        _addIssue(this, "value", dataset, config2, {
+          received: dataset.value instanceof Date ? dataset.value.toJSON() : /* @__PURE__ */ _stringify(dataset.value)
+        });
+      }
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function metadata(metadata_) {
+  return {
+    kind: "metadata",
+    type: "metadata",
+    reference: metadata,
+    metadata: metadata_
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function minValue(requirement, message) {
+  return {
+    kind: "validation",
+    type: "min_value",
+    reference: minValue,
+    async: false,
+    expects: `>=${requirement instanceof Date ? requirement.toJSON() : /* @__PURE__ */ _stringify(requirement)}`,
+    requirement,
+    message,
+    "~run"(dataset, config2) {
+      if (dataset.typed && !(dataset.value >= this.requirement)) {
+        _addIssue(this, "value", dataset, config2, {
+          received: dataset.value instanceof Date ? dataset.value.toJSON() : /* @__PURE__ */ _stringify(dataset.value)
+        });
       }
-      return () => {
-        if (containerRef.current) {
-          render(null, containerRef.current);
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function transform(operation) {
+  return {
+    kind: "transformation",
+    type: "transform",
+    reference: transform,
+    async: false,
+    operation,
+    "~run"(dataset) {
+      dataset.value = this.operation(dataset.value);
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function getFallback(schema, dataset, config2) {
+  return typeof schema.fallback === "function" ? (
+    // @ts-expect-error
+    schema.fallback(dataset, config2)
+  ) : (
+    // @ts-expect-error
+    schema.fallback
+  );
+}
+// @__NO_SIDE_EFFECTS__
+function getDefault(schema, dataset, config2) {
+  return typeof schema.default === "function" ? (
+    // @ts-expect-error
+    schema.default(dataset, config2)
+  ) : (
+    // @ts-expect-error
+    schema.default
+  );
+}
+// @__NO_SIDE_EFFECTS__
+function any() {
+  return {
+    kind: "schema",
+    type: "any",
+    reference: any,
+    expects: "any",
+    async: false,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset) {
+      dataset.typed = true;
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function array(item, message) {
+  return {
+    kind: "schema",
+    type: "array",
+    reference: array,
+    expects: "Array",
+    async: false,
+    item,
+    message,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      var _a;
+      const input = dataset.value;
+      if (Array.isArray(input)) {
+        dataset.typed = true;
+        dataset.value = [];
+        for (let key = 0; key < input.length; key++) {
+          const value2 = input[key];
+          const itemDataset = this.item["~run"]({ value: value2 }, config2);
+          if (itemDataset.issues) {
+            const pathItem = {
+              type: "array",
+              origin: "value",
+              input,
+              key,
+              value: value2
+            };
+            for (const issue of itemDataset.issues) {
+              if (issue.path) {
+                issue.path.unshift(pathItem);
+              } else {
+                issue.path = [pathItem];
+              }
+              (_a = dataset.issues) == null ? void 0 : _a.push(issue);
+            }
+            if (!dataset.issues) {
+              dataset.issues = itemDataset.issues;
+            }
+            if (config2.abortEarly) {
+              dataset.typed = false;
+              break;
+            }
+          }
+          if (!itemDataset.typed) {
+            dataset.typed = false;
+          }
+          dataset.value.push(itemDataset.value);
         }
-      };
-    }, [props, globalManager]);
-    return require$$0.createElement("div", { ref: containerRef });
+      } else {
+        _addIssue(this, "type", dataset, config2);
+      }
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function boolean(message) {
+  return {
+    kind: "schema",
+    type: "boolean",
+    reference: boolean,
+    expects: "boolean",
+    async: false,
+    message,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      if (typeof dataset.value === "boolean") {
+        dataset.typed = true;
+      } else {
+        _addIssue(this, "type", dataset, config2);
+      }
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function enum_(enum__, message) {
+  const options2 = [];
+  for (const key in enum__) {
+    if (`${+key}` !== key || typeof enum__[key] !== "string" || !Object.is(enum__[enum__[key]], +key)) {
+      options2.push(enum__[key]);
+    }
+  }
+  return {
+    kind: "schema",
+    type: "enum",
+    reference: enum_,
+    expects: /* @__PURE__ */ _joinExpects(options2.map(_stringify), "|"),
+    async: false,
+    enum: enum__,
+    options: options2,
+    message,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      if (this.options.includes(dataset.value)) {
+        dataset.typed = true;
+      } else {
+        _addIssue(this, "type", dataset, config2);
+      }
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function literal(literal_, message) {
+  return {
+    kind: "schema",
+    type: "literal",
+    reference: literal,
+    expects: /* @__PURE__ */ _stringify(literal_),
+    async: false,
+    literal: literal_,
+    message,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      if (dataset.value === this.literal) {
+        dataset.typed = true;
+      } else {
+        _addIssue(this, "type", dataset, config2);
+      }
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function nullable(wrapped, default_) {
+  return {
+    kind: "schema",
+    type: "nullable",
+    reference: nullable,
+    expects: `(${wrapped.expects} | null)`,
+    async: false,
+    wrapped,
+    default: default_,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      if (dataset.value === null) {
+        if (this.default !== void 0) {
+          dataset.value = /* @__PURE__ */ getDefault(this, dataset, config2);
+        }
+        if (dataset.value === null) {
+          dataset.typed = true;
+          return dataset;
+        }
+      }
+      return this.wrapped["~run"](dataset, config2);
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function number(message) {
+  return {
+    kind: "schema",
+    type: "number",
+    reference: number,
+    expects: "number",
+    async: false,
+    message,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      if (typeof dataset.value === "number" && !isNaN(dataset.value)) {
+        dataset.typed = true;
+      } else {
+        _addIssue(this, "type", dataset, config2);
+      }
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function object(entries, message) {
+  return {
+    kind: "schema",
+    type: "object",
+    reference: object,
+    expects: "Object",
+    async: false,
+    entries,
+    message,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      var _a;
+      const input = dataset.value;
+      if (input && typeof input === "object") {
+        dataset.typed = true;
+        dataset.value = {};
+        for (const key in this.entries) {
+          const valueSchema = this.entries[key];
+          if (key in input || (valueSchema.type === "exact_optional" || valueSchema.type === "optional" || valueSchema.type === "nullish") && // @ts-expect-error
+          valueSchema.default !== void 0) {
+            const value2 = key in input ? (
+              // @ts-expect-error
+              input[key]
+            ) : /* @__PURE__ */ getDefault(valueSchema);
+            const valueDataset = valueSchema["~run"]({ value: value2 }, config2);
+            if (valueDataset.issues) {
+              const pathItem = {
+                type: "object",
+                origin: "value",
+                input,
+                key,
+                value: value2
+              };
+              for (const issue of valueDataset.issues) {
+                if (issue.path) {
+                  issue.path.unshift(pathItem);
+                } else {
+                  issue.path = [pathItem];
+                }
+                (_a = dataset.issues) == null ? void 0 : _a.push(issue);
+              }
+              if (!dataset.issues) {
+                dataset.issues = valueDataset.issues;
+              }
+              if (config2.abortEarly) {
+                dataset.typed = false;
+                break;
+              }
+            }
+            if (!valueDataset.typed) {
+              dataset.typed = false;
+            }
+            dataset.value[key] = valueDataset.value;
+          } else if (valueSchema.fallback !== void 0) {
+            dataset.value[key] = /* @__PURE__ */ getFallback(valueSchema);
+          } else if (valueSchema.type !== "exact_optional" && valueSchema.type !== "optional" && valueSchema.type !== "nullish") {
+            _addIssue(this, "key", dataset, config2, {
+              input: void 0,
+              expected: `"${key}"`,
+              path: [
+                {
+                  type: "object",
+                  origin: "key",
+                  input,
+                  key,
+                  // @ts-expect-error
+                  value: input[key]
+                }
+              ]
+            });
+            if (config2.abortEarly) {
+              break;
+            }
+          }
+        }
+      } else {
+        _addIssue(this, "type", dataset, config2);
+      }
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function optional(wrapped, default_) {
+  return {
+    kind: "schema",
+    type: "optional",
+    reference: optional,
+    expects: `(${wrapped.expects} | undefined)`,
+    async: false,
+    wrapped,
+    default: default_,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      if (dataset.value === void 0) {
+        if (this.default !== void 0) {
+          dataset.value = /* @__PURE__ */ getDefault(this, dataset, config2);
+        }
+        if (dataset.value === void 0) {
+          dataset.typed = true;
+          return dataset;
+        }
+      }
+      return this.wrapped["~run"](dataset, config2);
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function picklist(options2, message) {
+  return {
+    kind: "schema",
+    type: "picklist",
+    reference: picklist,
+    expects: /* @__PURE__ */ _joinExpects(options2.map(_stringify), "|"),
+    async: false,
+    options: options2,
+    message,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      if (this.options.includes(dataset.value)) {
+        dataset.typed = true;
+      } else {
+        _addIssue(this, "type", dataset, config2);
+      }
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function record(key, value2, message) {
+  return {
+    kind: "schema",
+    type: "record",
+    reference: record,
+    expects: "Object",
+    async: false,
+    key,
+    value: value2,
+    message,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      var _a, _b;
+      const input = dataset.value;
+      if (input && typeof input === "object") {
+        dataset.typed = true;
+        dataset.value = {};
+        for (const entryKey in input) {
+          if (/* @__PURE__ */ _isValidObjectKey(input, entryKey)) {
+            const entryValue = input[entryKey];
+            const keyDataset = this.key["~run"]({ value: entryKey }, config2);
+            if (keyDataset.issues) {
+              const pathItem = {
+                type: "object",
+                origin: "key",
+                input,
+                key: entryKey,
+                value: entryValue
+              };
+              for (const issue of keyDataset.issues) {
+                issue.path = [pathItem];
+                (_a = dataset.issues) == null ? void 0 : _a.push(issue);
+              }
+              if (!dataset.issues) {
+                dataset.issues = keyDataset.issues;
+              }
+              if (config2.abortEarly) {
+                dataset.typed = false;
+                break;
+              }
+            }
+            const valueDataset = this.value["~run"](
+              { value: entryValue },
+              config2
+            );
+            if (valueDataset.issues) {
+              const pathItem = {
+                type: "object",
+                origin: "value",
+                input,
+                key: entryKey,
+                value: entryValue
+              };
+              for (const issue of valueDataset.issues) {
+                if (issue.path) {
+                  issue.path.unshift(pathItem);
+                } else {
+                  issue.path = [pathItem];
+                }
+                (_b = dataset.issues) == null ? void 0 : _b.push(issue);
+              }
+              if (!dataset.issues) {
+                dataset.issues = valueDataset.issues;
+              }
+              if (config2.abortEarly) {
+                dataset.typed = false;
+                break;
+              }
+            }
+            if (!keyDataset.typed || !valueDataset.typed) {
+              dataset.typed = false;
+            }
+            if (keyDataset.typed) {
+              dataset.value[keyDataset.value] = valueDataset.value;
+            }
+          }
+        }
+      } else {
+        _addIssue(this, "type", dataset, config2);
+      }
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function string(message) {
+  return {
+    kind: "schema",
+    type: "string",
+    reference: string,
+    expects: "string",
+    async: false,
+    message,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      if (typeof dataset.value === "string") {
+        dataset.typed = true;
+      } else {
+        _addIssue(this, "type", dataset, config2);
+      }
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function _subIssues(datasets) {
+  let issues;
+  if (datasets) {
+    for (const dataset of datasets) {
+      if (issues) {
+        issues.push(...dataset.issues);
+      } else {
+        issues = dataset.issues;
+      }
+    }
+  }
+  return issues;
+}
+// @__NO_SIDE_EFFECTS__
+function union(options2, message) {
+  return {
+    kind: "schema",
+    type: "union",
+    reference: union,
+    expects: /* @__PURE__ */ _joinExpects(
+      options2.map((option) => option.expects),
+      "|"
+    ),
+    async: false,
+    options: options2,
+    message,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      let validDataset;
+      let typedDatasets;
+      let untypedDatasets;
+      for (const schema of this.options) {
+        const optionDataset = schema["~run"]({ value: dataset.value }, config2);
+        if (optionDataset.typed) {
+          if (optionDataset.issues) {
+            if (typedDatasets) {
+              typedDatasets.push(optionDataset);
+            } else {
+              typedDatasets = [optionDataset];
+            }
+          } else {
+            validDataset = optionDataset;
+            break;
+          }
+        } else {
+          if (untypedDatasets) {
+            untypedDatasets.push(optionDataset);
+          } else {
+            untypedDatasets = [optionDataset];
+          }
+        }
+      }
+      if (validDataset) {
+        return validDataset;
+      }
+      if (typedDatasets) {
+        if (typedDatasets.length === 1) {
+          return typedDatasets[0];
+        }
+        _addIssue(this, "type", dataset, config2, {
+          issues: /* @__PURE__ */ _subIssues(typedDatasets)
+        });
+        dataset.typed = true;
+      } else if ((untypedDatasets == null ? void 0 : untypedDatasets.length) === 1) {
+        return untypedDatasets[0];
+      } else {
+        _addIssue(this, "type", dataset, config2, {
+          issues: /* @__PURE__ */ _subIssues(untypedDatasets)
+        });
+      }
+      return dataset;
+    }
+  };
+}
+function parse(schema, input, config2) {
+  const dataset = schema["~run"]({ value: input }, /* @__PURE__ */ getGlobalConfig(config2));
+  if (dataset.issues) {
+    throw new ValiError(dataset.issues);
+  }
+  return dataset.value;
+}
+// @__NO_SIDE_EFFECTS__
+function pipe(...pipe2) {
+  return {
+    ...pipe2[0],
+    pipe: pipe2,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      for (const item of pipe2) {
+        if (item.kind !== "metadata") {
+          if (dataset.issues && (item.kind === "schema" || item.kind === "transformation")) {
+            dataset.typed = false;
+            break;
+          }
+          if (!dataset.issues || !config2.abortEarly && !config2.abortPipeEarly) {
+            dataset = item["~run"](dataset, config2);
+          }
+        }
+      }
+      return dataset;
+    }
   };
 }
-const useGlobalManager = () => useContext(GlobalManager);
+// @__NO_SIDE_EFFECTS__
+function safeParse(schema, input, config2) {
+  const dataset = schema["~run"]({ value: input }, /* @__PURE__ */ getGlobalConfig(config2));
+  return {
+    typed: dataset.typed,
+    success: !dataset.issues,
+    output: dataset.value,
+    issues: dataset.issues
+  };
+}
+const linkValidator = /* @__PURE__ */ check(
+  (value) => {
+    var _a, _b;
+    return !!value && ((_b = (_a = value == null ? void 0 : value.split) == null ? void 0 : _a.call(value, ":")) == null ? void 0 : _b.length) === 2;
+  }
+);
+const isLink = (value) => {
+  var _a;
+  return (_a = /* @__PURE__ */ safeParse(linkValidator, value)) == null ? void 0 : _a.success;
+};
+const isVariableLink = (value) => {
+  var _a, _b;
+  return isLink(value) && ((_b = (_a = value == null ? void 0 : value.split) == null ? void 0 : _a.call(value, ":")) == null ? void 0 : _b.at(0)) === nodes.Variable;
+};
+const getMetadata = (schema) => {
+  var _a;
+  const pipelines = (schema == null ? void 0 : schema.pipe) ?? [];
+  return ((_a = pipelines == null ? void 0 : pipelines.find((pipe2) => /* @__PURE__ */ isOfKind("metadata", pipe2))) == null ? void 0 : _a.metadata) ?? null;
+};
+const layerField = (schema, meta) => {
+  const modifiedSchema = (meta == null ? void 0 : meta.variable) ? /* @__PURE__ */ union([schema, /* @__PURE__ */ pipe(/* @__PURE__ */ string(), linkValidator)]) : schema;
+  return /* @__PURE__ */ pipe(
+    /* @__PURE__ */ optional(modifiedSchema),
+    /* @__PURE__ */ transform((meta == null ? void 0 : meta.transform) ?? ((v2) => v2)),
+    /* @__PURE__ */ metadata(meta ?? {})
+  );
+};
+const ChildrenSchema = /* @__PURE__ */ object({
+  children: layerField(/* @__PURE__ */ array(/* @__PURE__ */ string()), {
+    fallback: [],
+    overridable: false
+  })
+});
+const GraphFieldSchema = /* @__PURE__ */ object({
+  _id: /* @__PURE__ */ union([/* @__PURE__ */ string(), /* @__PURE__ */ number()]),
+  _type: /* @__PURE__ */ picklist(Object.keys(nodes))
+});
+const OverridesSchema = /* @__PURE__ */ object({
+  overrides: layerField(/* @__PURE__ */ array(/* @__PURE__ */ string()), { overridable: false }),
+  overrideFrom: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false })
+});
+const PositionSchema = /* @__PURE__ */ object({
+  position: layerField(/* @__PURE__ */ enum_(Object.keys(positionType)), {
+    fallback: positionType.absolute
+  }),
+  top: layerField(/* @__PURE__ */ number(), { fallback: 0, transform: Math.ceil }),
+  left: layerField(/* @__PURE__ */ number(), { fallback: 0, transform: Math.ceil })
+});
+const SceneSchema = /* @__PURE__ */ object({
+  opacity: layerField(/* @__PURE__ */ pipe(/* @__PURE__ */ number(), /* @__PURE__ */ minValue(0), /* @__PURE__ */ maxValue(1)), {
+    fallback: 1,
+    variable: true
+  }),
+  visible: layerField(/* @__PURE__ */ boolean(), { fallback: true, variable: true }),
+  zIndex: layerField(/* @__PURE__ */ number(), { fallback: -1 })
+});
+const FillSchema = /* @__PURE__ */ object({
+  fillType: layerField(/* @__PURE__ */ picklist(Object.keys(paintMode)), {
+    fallback: paintMode.None
+  }),
+  solidFill: layerField(/* @__PURE__ */ string(), { fallback: "#fff" }),
+  imageFill: layerField(/* @__PURE__ */ string()),
+  imageSize: layerField(/* @__PURE__ */ picklist(Object.keys(imagePaintScaleModes)), {
+    fallback: imagePaintScaleModes.Fill
+  })
+});
+const BorderSchema = /* @__PURE__ */ object({
+  borderType: layerField(/* @__PURE__ */ picklist(Object.keys(borderType)), {
+    fallback: borderType.None
+  }),
+  borderWidth: layerField(/* @__PURE__ */ pipe(/* @__PURE__ */ number(), /* @__PURE__ */ minValue(0)), { fallback: 0 }),
+  borderColor: layerField(/* @__PURE__ */ string(), { fallback: "#fff" })
+});
+const SizeSchema = /* @__PURE__ */ object({
+  widthType: layerField(/* @__PURE__ */ picklist(Object.keys(sizing)), {
+    fallback: sizing.Fixed
+  }),
+  heightType: layerField(/* @__PURE__ */ picklist(Object.keys(sizing)), {
+    fallback: sizing.Fixed
+  }),
+  width: layerField(/* @__PURE__ */ pipe(/* @__PURE__ */ number(), /* @__PURE__ */ minValue(0)), {
+    fallback: 0,
+    transform: Math.ceil
+  }),
+  height: layerField(/* @__PURE__ */ pipe(/* @__PURE__ */ number(), /* @__PURE__ */ minValue(0)), {
+    fallback: 0,
+    transform: Math.ceil
+  }),
+  aspectRatio: layerField(/* @__PURE__ */ number(), { fallback: -1 }),
+  minWidth: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ pipe(/* @__PURE__ */ number(), /* @__PURE__ */ minValue(-1))), {
+    fallback: -1,
+    transform: Math.ceil
+  }),
+  minWidthType: layerField(/* @__PURE__ */ picklist(Object.keys(sizing)), {
+    fallback: sizing.Fixed
+  }),
+  maxWidth: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ pipe(/* @__PURE__ */ number(), /* @__PURE__ */ minValue(-1))), {
+    fallback: -1,
+    transform: Math.ceil
+  }),
+  maxWidthType: layerField(/* @__PURE__ */ picklist(Object.keys(sizing)), {
+    fallback: sizing.Fixed
+  }),
+  minHeight: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ pipe(/* @__PURE__ */ number(), /* @__PURE__ */ minValue(-1))), {
+    fallback: -1,
+    transform: Math.ceil
+  }),
+  minHeightType: layerField(/* @__PURE__ */ picklist(Object.keys(sizing)), {
+    fallback: sizing.Fixed
+  }),
+  maxHeight: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ pipe(/* @__PURE__ */ number(), /* @__PURE__ */ minValue(-1))), {
+    fallback: -1,
+    transform: Math.ceil
+  }),
+  maxHeightType: layerField(/* @__PURE__ */ picklist(Object.keys(sizing)), {
+    fallback: sizing.Fixed
+  })
+});
+const LayerSchema = /* @__PURE__ */ object({
+  layerMode: layerField(/* @__PURE__ */ picklist(Object.keys(layerMode)), {
+    fallback: layerMode.none
+  }),
+  layerAlign: layerField(/* @__PURE__ */ picklist(Object.keys(layerAlign)), {
+    fallback: layerAlign.start
+  }),
+  layerDirection: layerField(/* @__PURE__ */ picklist(Object.keys(layerDirection)), {
+    fallback: layerDirection.horizontal
+  }),
+  layerDistribute: layerField(/* @__PURE__ */ picklist(Object.keys(layerDistribute)), {
+    fallback: layerDistribute.start
+  }),
+  layerWrap: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  layerGap: layerField(/* @__PURE__ */ pipe(/* @__PURE__ */ number(), /* @__PURE__ */ minValue(0)), { fallback: 0 }),
+  padding: layerField(/* @__PURE__ */ string(), { fallback: "0px" })
+});
+const OverflowSchema = layerField(/* @__PURE__ */ picklist(Object.keys(overflow)), {
+  fallback: overflow.hidden
+});
+const BorderRadiusSchema = layerField(/* @__PURE__ */ string(), { fallback: "0px" });
+const InteractionsSchema = /* @__PURE__ */ object({
+  interactions: layerField(
+    /* @__PURE__ */ array(
+      /* @__PURE__ */ object({
+        on: /* @__PURE__ */ enum_(Object.keys(interactions)),
+        event: /* @__PURE__ */ nullable(linkValidator)
+      })
+    ),
+    { fallback: [] }
+  )
+});
+const CssOverrideSchema = /* @__PURE__ */ object({
+  cssOverride: layerField(/* @__PURE__ */ string(), { fallback: "" })
+});
+const FrameSchema = /* @__PURE__ */ pipe(
+  /* @__PURE__ */ object({
+    name: layerField(/* @__PURE__ */ string(), { fallback: "Frame", overridable: false }),
+    isBreakpoint: layerField(/* @__PURE__ */ boolean(), {
+      fallback: false,
+      overridable: false
+    }),
+    isPrimary: layerField(/* @__PURE__ */ boolean(), { fallback: false, overridable: false }),
+    parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+    ...ChildrenSchema.entries,
+    ...GraphFieldSchema.entries,
+    ...OverridesSchema.entries,
+    ...PositionSchema.entries,
+    ...SceneSchema.entries,
+    ...FillSchema.entries,
+    ...BorderSchema.entries,
+    ...SizeSchema.entries,
+    ...LayerSchema.entries,
+    ...InteractionsSchema.entries,
+    ...CssOverrideSchema.entries,
+    overflow: OverflowSchema,
+    borderRadius: BorderRadiusSchema
+  })
+);
+const TextSchema = /* @__PURE__ */ object({
+  name: layerField(/* @__PURE__ */ string(), { fallback: "Text", overridable: false }),
+  content: layerField(/* @__PURE__ */ string(), {
+    fallback: ""
+  }),
+  whiteSpace: layerField(/* @__PURE__ */ enum_(Object.keys(whiteSpace)), {
+    fallback: whiteSpace.pre
+  }),
+  variableContent: layerField(/* @__PURE__ */ string(), { fallback: null, variable: true }),
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  attributes: layerField(
+    /* @__PURE__ */ object({
+      fontSize: layerField(/* @__PURE__ */ string(), { fallback: "14px" }),
+      color: layerField(/* @__PURE__ */ string(), { fallback: "#000" }),
+      lineHeight: layerField(/* @__PURE__ */ string(), { fallback: "14px" }),
+      fontWeight: layerField(/* @__PURE__ */ string(), { fallback: "normal" }),
+      letterSpacing: layerField(/* @__PURE__ */ string(), { fallback: "0px" }),
+      textTransform: layerField(/* @__PURE__ */ string(), { fallback: "none" }),
+      textDecoration: layerField(/* @__PURE__ */ string(), { fallback: "none" }),
+      whiteSpace: layerField(/* @__PURE__ */ string(), { fallback: "pre" }),
+      textAlign: layerField(/* @__PURE__ */ string(), { fallback: "left" })
+    }),
+    { fallback: {} }
+  ),
+  ...GraphFieldSchema.entries,
+  ...OverridesSchema.entries,
+  ...PositionSchema.entries,
+  ...SceneSchema.entries,
+  ...SizeSchema.entries
+});
+const FragmentSchema = /* @__PURE__ */ object({
+  name: layerField(/* @__PURE__ */ string(), { fallback: "Fragment", overridable: false }),
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  horizontalGrow: layerField(/* @__PURE__ */ enum_(Object.keys(fragmentGrowingMode)), {
+    fallback: fragmentGrowingMode.auto,
+    overridable: false
+  }),
+  verticalGrow: layerField(/* @__PURE__ */ enum_(Object.keys(fragmentGrowingMode)), {
+    fallback: fragmentGrowingMode.auto,
+    overridable: false
+  }),
+  properties: layerField(/* @__PURE__ */ array(/* @__PURE__ */ string()), {
+    fallback: [],
+    overridable: false
+  }),
+  ...GraphFieldSchema.entries,
+  ...ChildrenSchema.entries
+});
+const InstanceSchema = /* @__PURE__ */ object({
+  name: layerField(/* @__PURE__ */ string(), { fallback: "Instance", overridable: false }),
+  fragment: layerField(/* @__PURE__ */ number()),
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  props: layerField(
+    /* @__PURE__ */ record(
+      /* @__PURE__ */ string(),
+      /* @__PURE__ */ union([
+        /* @__PURE__ */ string(),
+        /* @__PURE__ */ number(),
+        /* @__PURE__ */ boolean(),
+        // For goals
+        /* @__PURE__ */ object({
+          code: /* @__PURE__ */ string(),
+          name: /* @__PURE__ */ string()
+        })
+      ])
+    ),
+    {
+      fallback: {}
+    }
+  ),
+  ...GraphFieldSchema.entries,
+  ...OverridesSchema.entries,
+  ...PositionSchema.entries,
+  ...SizeSchema.entries,
+  ...SceneSchema.entries
+});
+const NumberVariableSchema = /* @__PURE__ */ object({
+  name: layerField(/* @__PURE__ */ string(), {
+    fallback: "Number",
+    overridable: false
+  }),
+  type: layerField(/* @__PURE__ */ literal(variableType.Number), {
+    fallback: variableType.Number
+  }),
+  defaultValue: layerField(/* @__PURE__ */ number(), { fallback: 0 }),
+  required: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  min: layerField(/* @__PURE__ */ number(), { fallback: 1 }),
+  max: layerField(/* @__PURE__ */ number(), { fallback: 100 }),
+  step: layerField(/* @__PURE__ */ number(), { fallback: 1 }),
+  displayStepper: layerField(/* @__PURE__ */ boolean(), { fallback: true }),
+  ...GraphFieldSchema.entries
+});
+const BooleanVariableSchema = /* @__PURE__ */ object({
+  name: layerField(/* @__PURE__ */ string(), {
+    fallback: "Boolean",
+    overridable: false
+  }),
+  type: layerField(/* @__PURE__ */ literal(variableType.Boolean), {
+    fallback: variableType.Boolean
+  }),
+  defaultValue: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  required: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  ...GraphFieldSchema.entries
+});
+const ColorVariableSchema = /* @__PURE__ */ object({
+  name: layerField(/* @__PURE__ */ string(), {
+    fallback: "String",
+    overridable: false
+  }),
+  type: layerField(/* @__PURE__ */ literal(variableType.Color), {
+    fallback: variableType.Color
+  }),
+  // TODO Add color validator
+  defaultValue: layerField(/* @__PURE__ */ string(), { fallback: "#000" }),
+  required: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  ...GraphFieldSchema.entries
+});
+const StringVariableSchema = /* @__PURE__ */ object({
+  name: layerField(/* @__PURE__ */ string(), {
+    fallback: "String",
+    overridable: false
+  }),
+  type: layerField(/* @__PURE__ */ literal(variableType.String), {
+    fallback: variableType.String
+  }),
+  defaultValue: layerField(/* @__PURE__ */ string(), { fallback: "" }),
+  required: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  placeholder: layerField(/* @__PURE__ */ string(), { fallback: "" }),
+  isTextarea: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  ...GraphFieldSchema.entries
+});
+const EventVariableSchema = /* @__PURE__ */ object({
+  name: layerField(/* @__PURE__ */ string(), {
+    fallback: "Event",
+    overridable: false
+  }),
+  type: layerField(/* @__PURE__ */ literal(variableType.Event), {
+    fallback: variableType.Event
+  }),
+  mode: layerField(/* @__PURE__ */ picklist(Object.keys(eventMode)), {
+    fallback: eventMode.callback
+  }),
+  defaultValue: layerField(/* @__PURE__ */ any()),
+  required: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  ...GraphFieldSchema.entries
+});
+const getLayerSchema = (layer) => {
+  if (!(layer == null ? void 0 : layer._type)) return null;
+  if ((layer == null ? void 0 : layer._type) === nodes.Frame) return FrameSchema;
+  if ((layer == null ? void 0 : layer._type) === nodes.Text) return TextSchema;
+  if ((layer == null ? void 0 : layer._type) === nodes.Fragment) return FragmentSchema;
+  if ((layer == null ? void 0 : layer._type) === nodes.Instance) return InstanceSchema;
+  if (layer._type === nodes.Variable) {
+    const types = {
+      [variableType.Number]: NumberVariableSchema,
+      [variableType.Boolean]: BooleanVariableSchema,
+      [variableType.String]: StringVariableSchema,
+      [variableType.Color]: ColorVariableSchema,
+      [variableType.Event]: EventVariableSchema
+    };
+    if (layer.type in types) {
+      return types[layer.type];
+    }
+  }
+};
+const normalizeLayer = (schema, rawLayer, options2) => {
+  try {
+    if (!rawLayer) return null;
+    const withFallback = (options2 == null ? void 0 : options2.withFallback) ?? true;
+    const overrideTarget = options2 == null ? void 0 : options2.overrideTarget;
+    const parsedLayer = parse(schema, rawLayer);
+    return Object.fromEntries(
+      Object.entries(schema.entries).map(([key, schemaEntity]) => {
+        const schemaMeta = getMetadata(schemaEntity);
+        const fallback = withFallback ? schemaMeta == null ? void 0 : schemaMeta.fallback : null;
+        const overrideValue = (schemaMeta == null ? void 0 : schemaMeta.overridable) !== false && overrideTarget ? overrideTarget == null ? void 0 : overrideTarget[key] : null;
+        const resultValue = parsedLayer[key] ?? overrideValue ?? fallback;
+        return [key, resultValue];
+      })
+    );
+  } catch (e) {
+    console.error(e);
+    return null;
+  }
+};
+const getNormalizeLayer$1 = (layer, overrider) => {
+  if (!layer) return null;
+  const schema = getLayerSchema(layer);
+  if (!schema) return null;
+  return normalizeLayer(schema, layer, {
+    overrideTarget: overrider
+  });
+};
+const parseLayerField = (layer, field, value) => {
+  var _a, _b;
+  const schema = getLayerSchema(layer);
+  if (schema && ((_a = schema == null ? void 0 : schema.entries) == null ? void 0 : _a[field])) {
+    return /* @__PURE__ */ safeParse((_b = schema.entries) == null ? void 0 : _b[field], value);
+  }
+  return { success: false, output: value };
+};
+const RenderTargetContext = createContext(
+  index.renderTarget.document
+);
+RenderTargetContext.Provider;
+const useRenderTarget = () => {
+  const renderTarget2 = useContext(RenderTargetContext);
+  return {
+    renderTarget: renderTarget2,
+    isCanvas: renderTarget2 === index.renderTarget.canvas,
+    isDocument: renderTarget2 === index.renderTarget.document
+  };
+};
+const FragmentContext = createContext({
+  manager: null
+});
+var withSelector = { exports: {} };
+var withSelector_production_min = {};
 var shim = { exports: {} };
 var useSyncExternalStoreShim_production_min = {};
 /**
@@ -43,17 +1358,17 @@ function requireUseSyncExternalStoreShim_production_min() {
   if (hasRequiredUseSyncExternalStoreShim_production_min) return useSyncExternalStoreShim_production_min;
   hasRequiredUseSyncExternalStoreShim_production_min = 1;
   var e = require$$0;
-  function h(a, b) {
-    return a === b && (0 !== a || 1 / a === 1 / b) || a !== a && b !== b;
+  function h(a, b2) {
+    return a === b2 && (0 !== a || 1 / a === 1 / b2) || a !== a && b2 !== b2;
   }
   var k = "function" === typeof Object.is ? Object.is : h, l = e.useState, m = e.useEffect, n = e.useLayoutEffect, p = e.useDebugValue;
-  function q(a, b) {
-    var d = b(), f = l({ inst: { value: d, getSnapshot: b } }), c = f[0].inst, g = f[1];
+  function q(a, b2) {
+    var d = b2(), f2 = l({ inst: { value: d, getSnapshot: b2 } }), c = f2[0].inst, g = f2[1];
     n(function() {
       c.value = d;
-      c.getSnapshot = b;
+      c.getSnapshot = b2;
       r(c) && g({ inst: c });
-    }, [a, d, b]);
+    }, [a, d, b2]);
     m(function() {
       r(c) && g({ inst: c });
       return a(function() {
@@ -64,20 +1379,20 @@ function requireUseSyncExternalStoreShim_production_min() {
     return d;
   }
   function r(a) {
-    var b = a.getSnapshot;
+    var b2 = a.getSnapshot;
     a = a.value;
     try {
-      var d = b();
+      var d = b2();
       return !k(a, d);
-    } catch (f) {
+    } catch (f2) {
       return true;
     }
   }
-  function t(a, b) {
-    return b();
+  function t(a, b2) {
+    return b2();
   }
-  var u = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? t : q;
-  useSyncExternalStoreShim_production_min.useSyncExternalStore = void 0 !== e.useSyncExternalStore ? e.useSyncExternalStore : u;
+  var u2 = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? t : q;
+  useSyncExternalStoreShim_production_min.useSyncExternalStore = void 0 !== e.useSyncExternalStore ? e.useSyncExternalStore : u2;
   return useSyncExternalStoreShim_production_min;
 }
 var useSyncExternalStoreShim_development = {};
@@ -221,9 +1536,6 @@ function requireShim() {
   }
   return shim.exports;
 }
-var shimExports = requireShim();
-var withSelector = { exports: {} };
-var withSelector_production_min = {};
 /**
  * @license React
  * use-sync-external-store-shim/with-selector.production.min.js
@@ -238,46 +1550,46 @@ function requireWithSelector_production_min() {
   if (hasRequiredWithSelector_production_min) return withSelector_production_min;
   hasRequiredWithSelector_production_min = 1;
   var h = require$$0, n = requireShim();
-  function p(a, b) {
-    return a === b && (0 !== a || 1 / a === 1 / b) || a !== a && b !== b;
+  function p(a, b2) {
+    return a === b2 && (0 !== a || 1 / a === 1 / b2) || a !== a && b2 !== b2;
   }
-  var q = "function" === typeof Object.is ? Object.is : p, r = n.useSyncExternalStore, t = h.useRef, u = h.useEffect, v = h.useMemo, w = h.useDebugValue;
-  withSelector_production_min.useSyncExternalStoreWithSelector = function(a, b, e, l, g) {
+  var q = "function" === typeof Object.is ? Object.is : p, r = n.useSyncExternalStore, t = h.useRef, u2 = h.useEffect, v = h.useMemo, w = h.useDebugValue;
+  withSelector_production_min.useSyncExternalStoreWithSelector = function(a, b2, e, l, g) {
     var c = t(null);
     if (null === c.current) {
-      var f = { hasValue: false, value: null };
-      c.current = f;
-    } else f = c.current;
+      var f2 = { hasValue: false, value: null };
+      c.current = f2;
+    } else f2 = c.current;
     c = v(function() {
       function a2(a3) {
         if (!c2) {
           c2 = true;
           d2 = a3;
           a3 = l(a3);
-          if (void 0 !== g && f.hasValue) {
-            var b2 = f.value;
-            if (g(b2, a3)) return k = b2;
+          if (void 0 !== g && f2.hasValue) {
+            var b3 = f2.value;
+            if (g(b3, a3)) return k = b3;
           }
           return k = a3;
         }
-        b2 = k;
-        if (q(d2, a3)) return b2;
+        b3 = k;
+        if (q(d2, a3)) return b3;
         var e2 = l(a3);
-        if (void 0 !== g && g(b2, e2)) return b2;
+        if (void 0 !== g && g(b3, e2)) return b3;
         d2 = a3;
         return k = e2;
       }
       var c2 = false, d2, k, m = void 0 === e ? null : e;
       return [function() {
-        return a2(b());
+        return a2(b2());
       }, null === m ? void 0 : function() {
         return a2(m());
       }];
-    }, [b, e, l, g]);
+    }, [b2, e, l, g]);
     var d = r(a, c[0], c[1]);
-    u(function() {
-      f.hasValue = true;
-      f.value = d;
+    u2(function() {
+      f2.hasValue = true;
+      f2.value = d;
     }, [d]);
     w(d);
     return d;
@@ -310,7 +1622,7 @@ function requireWithSelector_development() {
       }
       var objectIs = typeof Object.is === "function" ? Object.is : is;
       var useSyncExternalStore = shim2.useSyncExternalStore;
-      var useRef2 = React.useRef, useEffect2 = React.useEffect, useMemo = React.useMemo, useDebugValue = React.useDebugValue;
+      var useRef2 = React.useRef, useEffect2 = React.useEffect, useMemo2 = React.useMemo, useDebugValue = React.useDebugValue;
       function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
         var instRef = useRef2(null);
         var inst;
@@ -323,7 +1635,7 @@ function requireWithSelector_development() {
         } else {
           inst = instRef.current;
         }
-        var _useMemo = useMemo(function() {
+        var _useMemo = useMemo2(function() {
           var hasMemo = false;
           var memoizedSnapshot;
           var memoizedSelection;
@@ -393,72 +1705,975 @@ function requireWithSelector() {
   }
   return withSelector.exports;
 }
-requireWithSelector();
-var y = (t, e, n) => {
+var withSelectorExports = requireWithSelector();
+var b = (t) => t, y = (t, e, n) => {
   var _a, _b;
-  let r = useRef((_a = t == null ? void 0 : t.resolve) == null ? void 0 : _a.call(t, e, n)), s = ((_b = t == null ? void 0 : t.keyOfEntity) == null ? void 0 : _b.call(t, e)) ?? e, u = useCallback((o) => {
+  let r = useRef((_a = t == null ? void 0 : t.resolve) == null ? void 0 : _a.call(t, e, n)), o = ((_b = t == null ? void 0 : t.keyOfEntity) == null ? void 0 : _b.call(t, e)) ?? e, p = useCallback((s) => {
     var _a2, _b2;
-    return s ? (r.current = (_a2 = t == null ? void 0 : t.resolve) == null ? void 0 : _a2.call(t, s, n), o(), (_b2 = t == null ? void 0 : t.subscribe) == null ? void 0 : _b2.call(t, s, () => {
+    return o ? (r.current = (_a2 = t == null ? void 0 : t.resolve) == null ? void 0 : _a2.call(t, o, n), s(), (_b2 = t == null ? void 0 : t.subscribe) == null ? void 0 : _b2.call(t, o, () => {
       var _a3;
-      return r.current = (_a3 = t == null ? void 0 : t.resolve) == null ? void 0 : _a3.call(t, s, n), o();
+      return r.current = (_a3 = t == null ? void 0 : t.resolve) == null ? void 0 : _a3.call(t, o, n), s();
     }, n)) : () => {
     };
-  }, [t, s]), i = useCallback((o) => {
-    let p = typeof e == "string" ? e : t.keyOfEntity(e);
-    e && p && t.mutate(p, o);
+  }, [t, o]), i = useCallback((s, u2) => {
+    let c = typeof e == "string" ? e : t.keyOfEntity(e);
+    e && c && t.mutate(c, s, u2);
   }, [t, e]), a = () => r.current;
-  return [shimExports.useSyncExternalStore(u, a, a), i];
+  return [withSelectorExports.useSyncExternalStoreWithSelector(p, a, a, b), i];
 };
-const useFragmentManager = (fragmentId) => {
-  const globalManager = useGlobalManager();
-  const [globalGraph] = y(globalManager, globalManager == null ? void 0 : globalManager.key);
-  const [loading, setLoading] = useState(false);
-  const getFragmentManager = (id) => {
-    var _a;
-    return (_a = globalGraph == null ? void 0 : globalGraph.fragmentsManagers) == null ? void 0 : _a[id];
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b2) => {
+  for (var prop in b2 || (b2 = {}))
+    if (__hasOwnProp.call(b2, prop))
+      __defNormalProp(a, prop, b2[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b2)) {
+      if (__propIsEnum.call(b2, prop))
+        __defNormalProp(a, prop, b2[prop]);
+    }
+  return a;
+};
+var toPx = (val) => typeof val === "string" || typeof val === "number" ? `${val}px` : "0px";
+var isEmptyValue = (value) => !value && (value === null || value === void 0);
+var isValue = (value) => !isEmptyValue(value);
+var toKebabCase = (value) => value.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? "-" : "") + $.toLowerCase());
+var noop = () => void 0;
+var pick = (obj, ...props) => {
+  return props.reduce((result, prop) => {
+    result[prop] = obj[prop];
+    return result;
+  }, {});
+};
+function omit(obj, ...props) {
+  const result = __spreadValues({}, obj);
+  props.forEach((prop) => {
+    delete result[prop];
+  });
+  return result;
+}
+var isBrowser_default = typeof window !== "undefined";
+function hashGenerator(layerKey) {
+  let hash = 0;
+  for (let i = 0; i < layerKey.length; i++) {
+    hash = (hash << 5) - hash + layerKey.charCodeAt(i);
+    hash |= 0;
+  }
+  const raw = Math.abs(hash).toString(36);
+  return /^[0-9]/.test(raw) ? `h${raw}` : raw;
+}
+const getKey = (v) => isKey(v) ? v.slice(1) : null;
+const isKey = (v) => typeof v === "string" && v.startsWith("$");
+const getParent = (manager, layerKey) => {
+  const layer = manager.resolve(layerKey);
+  return manager.resolve(getKey(layer == null ? void 0 : layer.parent) ?? null);
+};
+const isTopLevel = (manager, layerKey) => {
+  var _a;
+  return ((_a = getParent(manager, layerKey)) == null ? void 0 : _a._type) === index.nodes.Fragment;
+};
+const getAllParents = (manager, layerKey, stack = []) => {
+  const parent = getParent(manager, layerKey);
+  if (parent) {
+    stack.push(parent);
+    getAllParents(manager, manager.keyOfEntity(parent), stack);
+  }
+  return stack;
+};
+const isPartOfPrimary = (manager, layerKey) => {
+  var _a;
+  const allParents = getAllParents(manager, manager.keyOfEntity(layerKey));
+  const layer = manager.resolve(layerKey);
+  return (layer == null ? void 0 : layer.isPrimary) ?? !!((_a = allParents == null ? void 0 : allParents.find) == null ? void 0 : _a.call(allParents, (parent) => !!(parent == null ? void 0 : parent.isPrimary)));
+};
+const getOverrider = (manager, layerEntity) => {
+  const layer = manager.resolve(layerEntity);
+  return manager.resolve(getKey(layer == null ? void 0 : layer.overrideFrom) ?? layerEntity);
+};
+const isInheritField = (manager, layerEntity, field) => {
+  const layer = manager.resolve(layerEntity);
+  if (layer) {
+    const overrider = getOverrider(manager, layer);
+    if ((overrider == null ? void 0 : overrider._id) === (layer == null ? void 0 : layer._id)) return false;
+    return !!overrider && !isValue(layer == null ? void 0 : layer[field]);
+  }
+  return false;
+};
+const getLayer = (manager, layer) => {
+  if (!manager || !layer) return null;
+  const layerKey = manager.keyOfEntity(layer);
+  const layerData = manager.resolve(layerKey);
+  const overrider = getOverrider(manager, layerKey);
+  return getNormalizeLayer$1(layerData, overrider);
+};
+const getNormalizeLayer = (layerKey, manager) => {
+  const layer = manager == null ? void 0 : manager.resolve(layerKey);
+  const parsedLayer = getLayer(manager, layerKey);
+  return {
+    rawLayer: layer,
+    layer: parsedLayer
   };
-  const loadFragmentManager = async (id) => {
-    setLoading(true);
-    const fragmentDocument = await globalGraph.fetchManager.queryFragment(id);
-    const res = globalManager == null ? void 0 : globalManager.createFragmentManager(id, fragmentDocument);
-    setLoading(false);
-    return res;
+};
+const useNormalizeLayer = (layerKey, manager) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const resultManager = manager ?? fragmentManager;
+  return getNormalizeLayer(layerKey, resultManager);
+};
+const useReadVariable = (variableKey) => {
+  const isVariable = isVariableLink(variableKey);
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const { props, innerManager, layerKey } = useContext(InstanceContext);
+  const resultManager = innerManager ?? fragmentManager;
+  const { _id: propertyId } = (resultManager == null ? void 0 : resultManager.entityOfKey(variableKey)) ?? {};
+  const [variableLayer] = y(
+    isVariable ? fragmentManager : null,
+    variableKey,
+    {
+      selector: (graph) => graph ? pick(graph, "defaultValue", "required") : graph
+    }
+  );
+  (props == null ? void 0 : props[propertyId]) ?? null;
+  (variableLayer == null ? void 0 : variableLayer.required) ?? false;
+  (variableLayer == null ? void 0 : variableLayer.defaultValue) ?? null;
+  const readVariable = (variableKey2) => {
+    const isVariable2 = isVariableLink(variableKey2);
+    if (!isVariable2) {
+      return {
+        value: null,
+        layer: null
+      };
+    }
+    const variableLayer2 = pick(
+      (resultManager == null ? void 0 : resultManager.resolve(variableKey2)) ?? {},
+      "defaultValue",
+      "required"
+    );
+    const { _id: propertyId2 } = (resultManager == null ? void 0 : resultManager.entityOfKey(variableKey2)) ?? {};
+    const currentValue2 = (props == null ? void 0 : props[propertyId2]) ?? null;
+    const required2 = (variableLayer2 == null ? void 0 : variableLayer2.required) ?? false;
+    const defaultValue2 = (variableLayer2 == null ? void 0 : variableLayer2.defaultValue) ?? null;
+    const resultValue2 = required2 ? currentValue2 : currentValue2 ?? defaultValue2;
+    return {
+      value: resultValue2,
+      layer: variableLayer2
+    };
   };
+  const { layer, value } = readVariable(variableKey);
+  return {
+    value,
+    layer,
+    readVariable
+  };
+};
+const useLayerCssVariable = (inputValue) => {
+  const { manager } = useContext(FragmentContext);
+  const isVariable = isVariableLink(inputValue);
+  const [variableValue] = y(isVariable ? manager : null, inputValue, {
+    selector: (graph) => pick(graph, "defaultValue", "_id")
+  });
+  return {
+    value: isVariable ? `var(--${variableValue == null ? void 0 : variableValue._id}, ${variableValue == null ? void 0 : variableValue.defaultValue})` : null
+  };
+};
+const useLayerValue = (layerKey, fieldKey, manager) => {
+  const resultManager = manager;
+  const key = layerKey;
+  const [, updateLayerData] = y(resultManager, key, {
+    selector: (data) => data ? pick(data, fieldKey) : data
+  });
+  const { layer, rawLayer } = useNormalizeLayer(key, resultManager);
+  const rawValue = rawLayer == null ? void 0 : rawLayer[fieldKey];
+  const layerValue = layer == null ? void 0 : layer[fieldKey];
+  const { value: variableValue } = useReadVariable(layerValue);
+  const currentValue = variableValue ?? layerValue;
+  const isInherit = isInheritField(resultManager, key, fieldKey);
+  const isOverride = !isInherit && !isPartOfPrimary(resultManager, key);
+  const resetOverride = useCallback(() => {
+    resultManager.mutate(
+      layerKey,
+      (prev) => {
+        const r = omit(prev, fieldKey);
+        return r;
+      },
+      { replace: true }
+    );
+  }, [updateLayerData]);
+  const restore = useCallback(
+    (fallbackValue) => {
+      var _a, _b, _c;
+      const tempValue = (_c = (_b = resultManager.resolve((_a = resultManager == null ? void 0 : resultManager.$fragment) == null ? void 0 : _a.temp)) == null ? void 0 : _b[layerKey]) == null ? void 0 : _c[fieldKey];
+      updateLayerData({ [fieldKey]: tempValue ?? fallbackValue });
+    },
+    [updateLayerData, resultManager]
+  );
+  const updateValue = useCallback(
+    (value, options2) => {
+      var _a, _b;
+      const { success, output } = parseLayerField(layer, fieldKey, value);
+      if (success) {
+        if (isVariableLink(value)) {
+          resultManager.mutate((_a = resultManager == null ? void 0 : resultManager.$fragment) == null ? void 0 : _a.temp, {
+            [layerKey]: {
+              [fieldKey]: currentValue
+            }
+          });
+          resultManager.resolve((_b = resultManager == null ? void 0 : resultManager.$fragment) == null ? void 0 : _b.temp);
+        }
+        updateLayerData({ [fieldKey]: output }, options2);
+      }
+    },
+    [layer, fieldKey, updateLayerData, resultManager, layerKey, currentValue]
+  );
+  const { value: cssValue } = useLayerCssVariable(rawValue);
+  return [
+    currentValue,
+    updateValue,
+    {
+      isOverride,
+      resetOverride,
+      isVariable: isVariableLink(rawValue ?? layerValue),
+      cssVariableValue: cssValue ?? currentValue,
+      rawValue,
+      restore,
+      ...resultManager.entityOfKey(key)
+    }
+  ];
+};
+const autoSizes = [index.sizing.Hug];
+const useLayerSizeValue = (layerKey, sizeType) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const { layerKey: instanceLayerKey } = useContext(InstanceContext);
+  const { isDocument } = useRenderTarget();
+  const isTop = isTopLevel(fragmentManager, layerKey);
+  const isPartOfInstance = !!instanceLayerKey;
+  const layerParent = getParent(fragmentManager, layerKey);
+  const layerNode = fragmentManager.resolve(layerKey);
+  const [instanceType] = useLayerValue(
+    instanceLayerKey,
+    `${sizeType}Type`,
+    fragmentManager
+  );
+  const [valueType] = useLayerValue(
+    layerKey,
+    `${sizeType}Type`,
+    fragmentManager
+  );
+  const growType = sizeType === "width" ? "horizontalGrow" : "verticalGrow";
+  return useCallback(
+    (value) => {
+      if (isTop && isDocument && (layerParent == null ? void 0 : layerParent[growType]) === index.fragmentGrowingMode.fill) {
+        return "100%";
+      }
+      if (isTop && isPartOfInstance && !autoSizes.includes(instanceType)) {
+        return "100%";
+      }
+      if (autoSizes.includes(valueType)) {
+        return layerNode._type === index.nodes.Instance ? "auto" : "min-content";
+      }
+      if (valueType === index.sizing.Relative) {
+        return `${value}%`;
+      }
+      if (valueType === index.sizing.Fill) {
+        return `100%`;
+      }
+      return toPx(value);
+    },
+    [
+      isTop,
+      isDocument,
+      layerParent,
+      growType,
+      isPartOfInstance,
+      instanceType,
+      valueType,
+      layerNode
+    ]
+  );
+};
+const processOptionalSize = (value, type) => {
+  if (value === -1) return "";
+  if (type === index.sizing.Fixed) return toPx(value);
+  if (type === index.sizing.Relative) return `${value}%`;
+  return "";
+};
+const useOptionalSize = (type, layerKey) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const [value] = useLayerValue(layerKey, type, fragmentManager);
+  const [valueType] = useLayerValue(layerKey, `${type}Type`, fragmentManager);
+  return useMemo(
+    () => processOptionalSize(value, valueType),
+    [valueType, value]
+  );
+};
+const useLayerSize = (layerKey) => {
+  const { manager } = useContext(FragmentContext);
+  const [widthValue] = useLayerValue(layerKey, "width", manager);
+  const [heightValue] = useLayerValue(layerKey, "height", manager);
+  const widthCalc = useLayerSizeValue(layerKey, "width");
+  const heightCalc = useLayerSizeValue(layerKey, "height");
+  const minWidth = useOptionalSize("minWidth", layerKey);
+  const minHeight = useOptionalSize("minHeight", layerKey);
+  const maxWidth = useOptionalSize("maxWidth", layerKey);
+  const maxHeight = useOptionalSize("maxHeight", layerKey);
+  return {
+    width: widthCalc(widthValue),
+    height: heightCalc(heightValue),
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight
+  };
+};
+const useLayerPosition = (layerKey) => {
+  const { layerKey: instanceLayerKey } = useContext(InstanceContext);
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const { isDocument } = useRenderTarget();
+  const isTop = isTopLevel(fragmentManager, layerKey);
+  const skipPosition = isTop && isDocument || !!instanceLayerKey && isTop;
+  const [position] = useLayerValue(layerKey, "position", fragmentManager);
+  const [top] = useLayerValue(layerKey, "top", fragmentManager);
+  const [left] = useLayerValue(layerKey, "left", fragmentManager);
+  return useMemo(
+    () => ({
+      position: skipPosition ? index.positionType.relative : position,
+      top: position === index.positionType.absolute && !skipPosition ? toPx(top) : null,
+      left: position === index.positionType.absolute && !skipPosition ? toPx(left) : null
+    }),
+    [skipPosition, position, top]
+  );
+};
+const useLayerBackground = (layerKey) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const [fillType] = useLayerValue(layerKey, "fillType", fragmentManager);
+  const [, , { cssVariableValue: cssSolidFill }] = useLayerValue(
+    layerKey,
+    "solidFill",
+    fragmentManager
+  );
+  const [, , { cssVariableValue: cssImageFill }] = useLayerValue(
+    layerKey,
+    "imageFill",
+    fragmentManager
+  );
+  const [, , { cssVariableValue: cssImageSize }] = useLayerValue(
+    layerKey,
+    "imageSize",
+    fragmentManager
+  );
+  return useMemo(() => {
+    if (fillType === index.paintMode.Solid) {
+      return {
+        background: cssSolidFill
+      };
+    }
+    if (fillType === index.paintMode.Image && cssImageFill) {
+      const sizeMap = {
+        [index.imagePaintScaleModes.Fill]: "cover",
+        [index.imagePaintScaleModes.Fit]: "contain"
+      };
+      return {
+        background: `url(${cssImageFill})`,
+        backgroundSize: sizeMap[cssImageSize]
+      };
+    }
+    return {
+      background: "transparent"
+    };
+  }, [fillType, cssImageFill, cssSolidFill]);
+};
+const useLayerDisplay = (layerKey) => {
+  const { manager } = useContext(FragmentContext);
+  const [layerModeValue] = useLayerValue(layerKey, "layerMode", manager);
+  const [visible] = useLayerValue(layerKey, "visible", manager);
+  return useMemo(() => {
+    if (!visible) {
+      return "none";
+    }
+    return layerModeValue === index.layerMode.flex ? "flex" : null;
+  }, [layerModeValue, visible]);
+};
+const useCalcLayerBorder = (layerKey) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const [borderTypeValue] = useLayerValue(
+    layerKey,
+    "borderType",
+    fragmentManager
+  );
+  return (width, color) => {
+    let value = "";
+    if (typeof borderTypeValue === "string" && borderTypeValue !== index.borderType.None) {
+      value = `${toPx(width)} ${borderTypeValue.toLowerCase()} ${color}`;
+    }
+    return value;
+  };
+};
+const useLayerBorder = (layerKey) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const [borderWidth] = useLayerValue(layerKey, "borderWidth", fragmentManager);
+  const [borderColor] = useLayerValue(layerKey, "borderColor", fragmentManager);
+  const calcBorder = useCalcLayerBorder(layerKey);
+  return useMemo(
+    () => ({ border: calcBorder(borderWidth, borderColor) }),
+    [borderWidth, borderColor]
+  );
+};
+const useLayerLayout = (layerKey) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const [layerModeValue] = useLayerValue(
+    layerKey,
+    "layerMode",
+    fragmentManager
+  );
+  const [layerWrap] = useLayerValue(layerKey, "layerWrap", fragmentManager);
+  const [layerDistribute2] = useLayerValue(
+    layerKey,
+    "layerDistribute",
+    fragmentManager
+  );
+  const [layerDirectionValue] = useLayerValue(
+    layerKey,
+    "layerDirection",
+    fragmentManager
+  );
+  const [layerAlign2] = useLayerValue(layerKey, "layerAlign", fragmentManager);
+  const [padding] = useLayerValue(layerKey, "padding", fragmentManager);
+  const [gap] = useLayerValue(layerKey, "layerGap", fragmentManager);
+  const isFlex = layerModeValue === index.layerMode.flex;
+  return useMemo(
+    () => ({
+      display: isFlex ? "flex" : null,
+      gap: toPx(gap),
+      flexWrap: isFlex ? layerWrap ? "wrap" : null : null,
+      justifyContent: isFlex ? layerDistribute2 : null,
+      flexDirection: isFlex ? layerDirectionValue === index.layerDirection.vertical ? "column" : "row" : null,
+      alignItems: isFlex ? layerAlign2 : null,
+      padding: isFlex ? padding : null
+    }),
+    [
+      isFlex,
+      layerWrap,
+      layerDistribute2,
+      layerDirectionValue,
+      layerAlign2,
+      padding
+    ]
+  );
+};
+const useLayerStyles = (layerKey) => {
+  var _a;
+  try {
+    if (!layerKey) {
+      throw new Error("Empty layer key");
+    }
+    const { manager: fragmentManager } = useContext(FragmentContext);
+    const [opacity] = useLayerValue(layerKey, "opacity", fragmentManager);
+    const layerSize = useLayerSize(layerKey);
+    const { position, top, left } = useLayerPosition(layerKey);
+    const display = useLayerDisplay(layerKey);
+    const background = useLayerBackground(layerKey);
+    const { border } = useLayerBorder(layerKey);
+    const layout = useLayerLayout(layerKey);
+    const [zIndex] = useLayerValue(layerKey, "zIndex", fragmentManager);
+    const [borderRadius] = useLayerValue(
+      layerKey,
+      "borderRadius",
+      fragmentManager
+    );
+    const [whiteSpace2] = useLayerValue(layerKey, "whiteSpace", fragmentManager);
+    let props = {};
+    const { _type } = fragmentManager.entityOfKey(layerKey) ?? {};
+    if (_type === index.nodes.Instance) {
+      const instanceProps = omit(
+        (_a = fragmentManager == null ? void 0 : fragmentManager.resolve(layerKey)) == null ? void 0 : _a.props,
+        "_id",
+        "_type"
+      );
+      props = Object.entries(instanceProps).reduce((acc, [key, value]) => {
+        acc[`--${key}`] = value;
+        return acc;
+      }, {});
+    }
+    return {
+      ...props ?? {},
+      display,
+      border,
+      ...background,
+      position,
+      top,
+      left,
+      opacity,
+      "border-radius": borderRadius,
+      "white-space": whiteSpace2,
+      "z-index": zIndex !== -1 ? zIndex : null,
+      ...layout,
+      ...layerSize,
+      "user-select": "none"
+    };
+  } catch (e) {
+    console.debug(e);
+    return {};
+  }
+};
+const GlobalManager$1 = createContext(null);
+const useGlobalManager = (globalManager) => {
+  var _a, _b;
+  const currentGlobalManager = useContext(GlobalManager$1);
+  const resultManager = globalManager ?? currentGlobalManager;
+  const [fragmentsGraph] = y(
+    resultManager,
+    (_a = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _a.key
+  );
+  const queryFragmentManager = async (id) => {
+    var _a2;
+    const queryResult = await ((_a2 = resultManager == null ? void 0 : resultManager.$fetch) == null ? void 0 : _a2.queryFragment(id));
+    const { document: document2, linkedFragments } = queryResult ?? {};
+    if (linkedFragments) {
+      linkedFragments.forEach(({ id: id2, document: document22 }) => {
+        resultManager.$fragments.createFragmentManager(id2, document22);
+      });
+    }
+    return resultManager.$fragments.createFragmentManager(id, document2);
+  };
+  const setRenderTarget = (value) => {
+    resultManager == null ? void 0 : resultManager.setRenderTarget(value);
+  };
+  return {
+    fragmentsGraph,
+    manager: resultManager,
+    queryFragmentManager,
+    getFragmentManager: ((_b = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _b.getManager) ?? noop,
+    setRenderTarget
+  };
+};
+const useFragmentManager = (fragmentId, inputGlobalManager) => {
+  const {
+    fragmentsGraph,
+    manager: globalManager,
+    getFragmentManager,
+    queryFragmentManager
+  } = useGlobalManager(inputGlobalManager);
+  const [loading, setLoading] = useState(false);
   useEffect(() => {
-    loadFragmentManager(fragmentId);
-  }, [fragmentId]);
+    (async () => {
+      if (fragmentsGraph && !getFragmentManager(fragmentId)) {
+        setLoading(true);
+        await queryFragmentManager(fragmentId);
+        setLoading(false);
+      }
+    })();
+  }, [fragmentId, fragmentsGraph]);
   return {
     loading,
-    manager: getFragmentManager(fragmentId)
+    manager: getFragmentManager(fragmentId),
+    queryFragmentManager
+    // loadFragmentManager,
   };
 };
 const useFragmentProperties = (fragmentId) => {
   var _a;
   const { manager } = useFragmentManager(fragmentId);
   const [instanceFragment] = y(manager, (_a = manager == null ? void 0 : manager.$fragment) == null ? void 0 : _a.root);
-  return (instanceFragment == null ? void 0 : instanceFragment.properties) ?? [];
+  return {
+    properties: (instanceFragment == null ? void 0 : instanceFragment.properties) ?? [],
+    manager
+  };
 };
-const useRenderTarget = () => {
-  const globalManager = useGlobalManager();
-  const [globalManagerGraph] = y(globalManager, globalManager == null ? void 0 : globalManager.key);
-  const renderTargetValue = (globalManagerGraph == null ? void 0 : globalManagerGraph.renderTarget) ?? definition.renderTarget.canvas;
+const useHash = (layerKey) => {
+  const { manager } = useContext(FragmentContext);
+  if (!layerKey || !manager) return null;
+  const layer = manager.resolve(layerKey);
+  const overrideFrom = getKey(layer == null ? void 0 : layer.overrideFrom);
+  return hashGenerator(overrideFrom ?? layerKey);
+};
+const useInstance = (instanceProps) => {
+  const { manager: parentManager } = useContext(FragmentContext);
+  const [instanceLayer] = y(parentManager, instanceProps.layerKey);
+  const instanceLayerProps = (instanceLayer == null ? void 0 : instanceLayer.props) ?? {};
+  const styles2 = useLayerStyles(instanceProps.layerKey);
+  const { manager: resultGlobalManager } = useGlobalManager(
+    instanceProps == null ? void 0 : instanceProps.globalManager
+  );
+  const resultProps = { ...instanceLayerProps, ...instanceProps.props ?? {} };
+  const resultFragmentId = (instanceProps == null ? void 0 : instanceProps.fragmentId) ?? (instanceLayer == null ? void 0 : instanceLayer.fragment);
+  const { properties: definitions, manager: innerFragmentManager } = useFragmentProperties(resultFragmentId);
+  const hash = useHash(instanceProps.layerKey);
   return {
-    renderTarget: renderTargetValue,
-    isCanvas: renderTargetValue === definition.renderTarget.canvas,
-    isDocument: renderTargetValue === definition.renderTarget.document,
-    setRenderTarget: (target) => {
-      globalManager == null ? void 0 : globalManager.setRenderTarget(target);
+    hash,
+    styles: styles2,
+    definitions,
+    props: resultProps,
+    parentManager,
+    innerManager: innerFragmentManager,
+    fragmentId: resultFragmentId,
+    globalManager: resultGlobalManager
+  };
+};
+const InstanceContext = createContext({
+  layerKey: null,
+  parentManager: null,
+  innerManager: null,
+  props: {},
+  definitions: []
+});
+const useLayerChildren = (layerKey, customManager) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const [layerData] = y(customManager ?? fragmentManager, layerKey, {
+    selector: (data) => pick(data, "children")
+  });
+  return (layerData == null ? void 0 : layerData.children) ?? [];
+};
+const useFragmentChildren = (fragmentId) => {
+  const { layerKey: instanceLayerKey } = useContext(InstanceContext);
+  const { manager } = useFragmentManager(fragmentId);
+  const layerKey = `${index.nodes.Fragment}:${fragmentId}`;
+  const children = useLayerChildren(layerKey, manager);
+  const { isDocument } = useRenderTarget();
+  const [resizeChildren, setResizeChildren] = useState(null);
+  useRef();
+  const setRef = useCallback(
+    (node) => {
+    },
+    [isDocument, instanceLayerKey, manager, children]
+  );
+  const primary = children == null ? void 0 : children.find(
+    (breakpoint) => {
+      var _a;
+      return (_a = manager.resolve(breakpoint)) == null ? void 0 : _a.isPrimary;
+    }
+  );
+  return {
+    primary,
+    children,
+    //isBrowser && resizeChildren ? resizeChildren : children, //isStyleSheetRender ? children ?? [] : primary ? [primary] : [],
+    isResize: isBrowser_default && resizeChildren,
+    setRef
+  };
+};
+const getStylesheetKey = (fragmentKey) => {
+  const isLink2 = isLinkKey(fragmentKey);
+  if (isLink2) {
+    const [type, id] = fragmentKey.split(":");
+    return `stylesheet-${id}`;
+  }
+  return `stylesheet-unknown`;
+};
+function useInjectedStyle() {
+  const { manager } = useContext(FragmentContext);
+  const injectStyle = () => {
+    var _a, _b;
+    const styles2 = (_b = (_a = manager == null ? void 0 : manager.$styleSheet.extract()) == null ? void 0 : _a.at(0)) == null ? void 0 : _b.styles;
+    if (isBrowser_default && styles2) {
+      const stylesheetKey = getStylesheetKey(manager == null ? void 0 : manager.key);
+      if (document.getElementById(stylesheetKey)) {
+        const el = document.getElementById(stylesheetKey);
+        if (el) el.remove();
+      }
+      const style = document.createElement("style");
+      style.id = stylesheetKey;
+      style.textContent = styles2.join("");
+      document.head.appendChild(style);
     }
   };
+  return {
+    injectStyle
+  };
+}
+const useStyleSheet = () => {
+  const { manager } = useContext(FragmentContext);
+  const { injectStyle } = useInjectedStyle();
+  const addLayerStyle = useCallback(
+    (layerKey, styles2, layer) => {
+      var _a;
+      if ("addStyle" in (manager == null ? void 0 : manager.$styleSheet)) {
+        (_a = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a.addStyle(layerKey, styles2, layer);
+        if (isBrowser_default) {
+          injectStyle();
+        }
+      }
+    },
+    [manager]
+  );
+  return {
+    addLayerStyle
+  };
+};
+const useFragment = (fragmentId, globalManager) => {
+  const layerKey = `${index.nodes.Fragment}:${fragmentId}`;
+  const { manager } = useContext(FragmentContext);
+  const { isDocument } = useRenderTarget();
+  const { setRef, children, isResize } = useFragmentChildren(fragmentId);
+  const hash = useHash(layerKey);
+  const { addLayerStyle } = useStyleSheet();
+  if (manager) {
+    addLayerStyle(
+      layerKey,
+      {
+        width: "100%",
+        height: "100%",
+        "container-type": (children == null ? void 0 : children.length) === 1 ? "normal" : "inline-size"
+      },
+      manager == null ? void 0 : manager.resolve(layerKey),
+      manager == null ? void 0 : manager.key
+    );
+  }
+  return {
+    hash,
+    isDocument,
+    manager,
+    setRef,
+    children,
+    isResize
+  };
+};
+const useLayerInteractions = (layerKey) => {
+  const { manager: globalManager } = useGlobalManager();
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const [interactions2] = useLayerValue(
+    layerKey,
+    "interactions",
+    fragmentManager
+  );
+  const { readVariable } = useReadVariable();
+  const fireEvent = useCallback(
+    (eventLink) => {
+      var _a, _b;
+      const event = fragmentManager.resolve(eventLink);
+      const { value: eventValue } = readVariable(eventLink);
+      if ((event == null ? void 0 : event.mode) === index.eventMode.goal) {
+        (_b = (_a = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _a.reachGoal) == null ? void 0 : _b.call(_a, eventValue == null ? void 0 : eventValue.code);
+      }
+    },
+    [globalManager, fragmentManager]
+  );
+  return useMemo(() => {
+    if (!interactions2 || !Array.isArray(interactions2)) return {};
+    const clickEvents = interactions2 == null ? void 0 : interactions2.filter((el) => (el == null ? void 0 : el.on) === index.interactions.click).map((el) => el.event);
+    return {
+      onClick: () => {
+        clickEvents.map(fireEvent);
+      }
+    };
+  }, [interactions2, fireEvent]);
+};
+const useFrame = (layerKey) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const layer = fragmentManager.entityOfKey(layerKey);
+  const styles2 = useLayerStyles(layerKey);
+  const children = useLayerChildren(layerKey);
+  const hash = useHash(layerKey);
+  const { addLayerStyle } = useStyleSheet();
+  const events = useLayerInteractions(layerKey);
+  addLayerStyle(layerKey, styles2, fragmentManager.resolve(layerKey));
+  return {
+    type: layer == null ? void 0 : layer._type,
+    hash,
+    styles: {},
+    //isBrowser ? pick(styles, "background") : {},
+    children,
+    events
+  };
+};
+const allowAttributes = [
+  "fontSize",
+  "fontWeight",
+  "color",
+  "lineHeight",
+  "letterSpacing",
+  "textTransform",
+  "textDecoration",
+  "textAlign"
+];
+const wrapTextInParagraphWithAttributes = (text2, attributes) => {
+  if (text2.startsWith("<p")) return text2;
+  const style = Object.entries(attributes).filter(
+    ([key, value]) => isValue(value) && allowAttributes.includes(key) && typeof value === "string" && !!value.length
+  ).map(([key, value]) => `${toKebabCase(key)}: ${value}`).join("; ");
+  return `<p style="${style}">${text2}</p>`;
+};
+const useTextContent = (layerKey, manager) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const [content, , contentInfo] = useLayerValue(
+    layerKey,
+    "content",
+    fragmentManager
+  );
+  const [attributes] = useLayerValue(layerKey, "attributes", fragmentManager);
+  return useMemo(() => {
+    if (typeof content === "string" && isValue(attributes)) {
+      return wrapTextInParagraphWithAttributes(content, attributes);
+    }
+    return content;
+  }, [contentInfo, content, attributes]);
+};
+const useTextAttributes = (layerKey) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const styles2 = useLayerStyles(layerKey);
+  const content = useTextContent(layerKey);
+  const hash = useHash(layerKey);
+  const { addLayerStyle } = useStyleSheet();
+  addLayerStyle(layerKey, styles2, fragmentManager.resolve(layerKey));
+  return {
+    hash,
+    content
+  };
+};
+function useMounted() {
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+    return () => {
+      setIsMounted(false);
+    };
+  }, []);
+  return isMounted;
+}
+const StyleSheetContext = createContext(null);
+StyleSheetContext.Provider;
+const Text = ({ layerKey }) => {
+  const { hash, content } = useTextAttributes(layerKey);
+  return /* @__PURE__ */ jsx("div", { className: hash, "data-key": layerKey, children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: content } }) });
+};
+const Frame = ({ layerKey, hidden }) => {
+  const { styles, hash, children, type, events } = useFrame(layerKey);
+  const isMounted = useMounted();
+  if (isMounted && hidden) {
+    return null;
+  }
+  if (type === definition.nodes.Text) {
+    return /* @__PURE__ */ jsx(Text, { layerKey });
+  }
+  if (type === definition.nodes.Instance) {
+    return /* @__PURE__ */ jsx(Instance, { layerKey });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: hash,
+      "data-key": layerKey,
+      style: { ...styles, display: hidden ? "none" : styles.display },
+      ...events,
+      children: children.map((childLink) => /* @__PURE__ */ jsx(Frame, { layerKey: childLink }, childLink))
+    }
+  );
+};
+const FragmentInternal = ({ fragmentId, globalManager }) => {
+  const { children, manager, hash, isResize } = useFragment(
+    fragmentId
+  );
+  if (!manager) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-key": `${definition.nodes.Fragment}:${fragmentId}`,
+      className: hash,
+      children: children.map((childLink) => {
+        const childLayer = manager == null ? void 0 : manager.resolve(childLink);
+        const isPrimary = (childLayer == null ? void 0 : childLayer.isPrimary) ?? false;
+        return /* @__PURE__ */ jsx(
+          Frame,
+          {
+            layerKey: childLink,
+            hidden: !isResize && !isPrimary
+          },
+          childLink
+        );
+      })
+    }
+  );
+};
+const Fragment = (props) => {
+  const { manager: resultGlobalManager } = useGlobalManager();
+  const { manager } = useFragmentManager(props.fragmentId, resultGlobalManager);
+  return /* @__PURE__ */ jsx(FragmentContext.Provider, { value: { manager }, children: /* @__PURE__ */ jsx(FragmentInternal, { ...props }) });
+};
+const isBrowser = typeof window !== "undefined";
+const loadFragmentManager = async (globalManager, fragmentId) => {
+  var _a;
+  const { document: document2, linkedFragments } = await ((_a = globalManager == null ? void 0 : globalManager.queryFragment) == null ? void 0 : _a.call(
+    globalManager,
+    fragmentId
+  ));
+  if (fragmentId && document2) {
+    if (linkedFragments) {
+      linkedFragments.forEach(({ id, document: document22 }) => {
+        globalManager == null ? void 0 : globalManager.createFragmentManager(id, document22);
+      });
+    }
+    return globalManager == null ? void 0 : globalManager.createFragmentManager(fragmentId, document2);
+  }
+  return null;
+};
+function createResource(resourceCache, key, fetcher) {
+  if (resourceCache.has(key)) return resourceCache.get(key);
+  let status = "pending";
+  let result;
+  const suspender = fetcher().then(
+    (r) => {
+      status = "success";
+      result = r;
+    },
+    (e) => {
+      status = "error";
+      result = e;
+    }
+  );
+  const resource = {
+    read() {
+      if (status === "pending") throw suspender;
+      if (status === "error") throw result;
+      return result;
+    }
+  };
+  resourceCache.set(key, resource);
+  return resource;
+}
+const InstanceInitial = (instanceProps) => {
+  const {
+    fragmentId,
+    parentManager,
+    props,
+    hash,
+    innerManager,
+    definitions,
+    globalManager
+  } = useInstance(instanceProps);
+  if (!isBrowser) {
+    if (globalManager && !("resourceCache" in globalManager)) {
+      globalManager.resourceCache = /* @__PURE__ */ new Map();
+    }
+    const resource = createResource(
+      globalManager.resourceCache,
+      fragmentId,
+      () => loadFragmentManager(globalManager, fragmentId)
+    );
+    resource.read();
+  }
+  return /* @__PURE__ */ jsx(
+    InstanceContext.Provider,
+    {
+      value: {
+        layerKey: instanceProps.layerKey,
+        definitions,
+        innerManager,
+        parentManager,
+        props
+      },
+      children: parentManager ? /* @__PURE__ */ jsx("div", { className: hash, "data-key": instanceProps.layerKey, children: /* @__PURE__ */ jsx(Fragment, { fragmentId, globalManager }) }) : /* @__PURE__ */ jsx(Fragment, { fragmentId, globalManager })
+    }
+  );
+};
+const Instance = (props) => {
+  return "globalManager" in props ? /* @__PURE__ */ jsx(GlobalManager$1, { value: props.globalManager, children: /* @__PURE__ */ jsx(InstanceInitial, { ...props }) }) : /* @__PURE__ */ jsx(InstanceInitial, { ...props });
+};
+const GlobalManager = ({ children, value }) => {
+  return /* @__PURE__ */ jsx(GlobalManager$1, { value, children });
 };
-const Fragment = createReactComponent(Fragment$1);
-const Instance = createReactComponent(Instance$1);
 export {
-  Fragment,
   GlobalManager,
   Instance,
-  useFragmentManager,
-  useFragmentProperties,
-  useGlobalManager,
-  useRenderTarget
+  collectStyles,
+  useGlobalManager
 };