@netlisian/softconfig 0.0.0-alpha-20251026130436

package/dist/puck/index.mjs

@@ -0,0 +1,2792 @@
+'use client'
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/puck/store/index.tsx
+import { create } from "zustand";
+import { subscribeWithSelector, devtools } from "zustand/middleware";
+
+// src/puck/lib/get-root-props.ts
+var getRootProps = (appState) => appState.data.root.props;
+
+// src/puck/lib/builder/root-config.tsx
+import {
+  createUsePuck,
+  walkTree
+} from "@measured/puck";
+
+// src/puck/lib/get-field-settings.tsx
+import { AutoField } from "@measured/puck";
+import { jsx } from "react/jsx-runtime";
+var getFieldSettings = (_fields, _fieldSettings, deep) => {
+  return (_fields || []).reduce((fields, field) => {
+    const fieldSettings = {
+      // placeholder: { type: "text", label: "Placeholder" },
+    };
+    const currentFieldSettings = _fieldSettings == null ? void 0 : _fieldSettings[field.name];
+    switch (field.type) {
+      case "text":
+      case "textarea":
+        fieldSettings.defaultValue = {
+          type: field.type,
+          label: "Default Value"
+        };
+        break;
+      case "number":
+        fieldSettings.defaultValue = {
+          type: field.type,
+          label: "Default Value"
+        };
+        fieldSettings.min = {
+          type: field.type,
+          label: "Minimum Value"
+        };
+        fieldSettings.max = {
+          type: field.type,
+          label: "Maximum Value"
+        };
+        fieldSettings.step = {
+          type: field.type,
+          label: "Step Size"
+        };
+        break;
+      case "radio":
+      case "select":
+        fieldSettings.defaultValue = {
+          type: "custom",
+          label: "Default Value",
+          render: ({ value, onChange, id }) => /* @__PURE__ */ jsx(
+            AutoField,
+            {
+              field: {
+                type: field.type,
+                label: "Default Value",
+                options: (currentFieldSettings == null ? void 0 : currentFieldSettings.options) || []
+              },
+              value,
+              onChange,
+              readOnly: false,
+              id
+            }
+          )
+        };
+        fieldSettings.options = {
+          type: "array",
+          label: "Options",
+          defaultItemProps: {
+            label: "New Option",
+            value: "new"
+          },
+          arrayFields: {
+            label: { type: "text", label: "Label" },
+            value: {
+              type: "text",
+              label: "Value"
+            }
+          },
+          getItemSummary(item, index) {
+            return item.label || `Option ${(index || 0) + 1}`;
+          }
+        };
+        break;
+      case "array":
+        fieldSettings.summary = {
+          type: "select",
+          label: "Summary Field",
+          options: [
+            {
+              label: "Default Numbering",
+              value: ""
+            },
+            ...((currentFieldSettings == null ? void 0 : currentFieldSettings.subFields) || []).map((f) => ({
+              label: f.name,
+              value: f.name
+            }))
+          ]
+        };
+      case "object":
+        fieldSettings.subFields = {
+          type: "array",
+          label: "Sub Fields",
+          defaultItemProps: {
+            name: "New Sub Field",
+            type: "text"
+          },
+          arrayFields: {
+            name: { type: "text", label: "Name" },
+            type: {
+              type: "select",
+              options: deep ? [
+                {
+                  label: "Text",
+                  value: "text"
+                },
+                {
+                  label: "Number",
+                  value: "number"
+                },
+                {
+                  label: "Select",
+                  value: "select"
+                },
+                {
+                  label: "Radio",
+                  value: "radio"
+                }
+              ] : [
+                {
+                  label: "Text",
+                  value: "text"
+                },
+                {
+                  label: "Number",
+                  value: "number"
+                },
+                {
+                  label: "Select",
+                  value: "select"
+                },
+                {
+                  label: "Radio",
+                  value: "radio"
+                },
+                {
+                  label: "Array",
+                  value: "array"
+                },
+                {
+                  label: "Object",
+                  value: "object"
+                },
+                {
+                  label: "Reference",
+                  value: "reference"
+                }
+              ]
+            }
+          },
+          getItemSummary(item, index) {
+            return item.name || `Field ${(index || 0) + 1}`;
+          }
+        };
+        if (!deep)
+          fieldSettings.subFieldSettings = {
+            type: "object",
+            label: "Sub Field Settings",
+            objectFields: (currentFieldSettings == null ? void 0 : currentFieldSettings.subFields) ? getFieldSettings(
+              currentFieldSettings.subFields,
+              currentFieldSettings.subFieldSettings,
+              true
+            ) : {}
+          };
+        break;
+    }
+    fields[field.name] = {
+      type: "object",
+      label: field.name,
+      objectFields: fieldSettings
+    };
+    return fields;
+  }, {});
+};
+var get_field_settings_default = getFieldSettings;
+
+// src/puck/lib/get-settings-by-path.ts
+function getFieldSettingsByPath(fieldSettings, path) {
+  return path.split(".").reduce((o, key) => o ? o[key] : void 0, fieldSettings);
+}
+
+// src/puck/lib/set-prop-by-path.ts
+function setPropertyByPath(props, path, value) {
+  const parts = path.split(".");
+  const last = parts.pop();
+  let cur = props;
+  for (const p of parts) {
+    if (typeof cur[p] !== "object" || cur[p] === null) cur[p] = {};
+    cur = cur[p];
+  }
+  cur[last] = value;
+}
+
+// src/puck/lib/builder/root-config.tsx
+import { useEffect } from "react";
+
+// src/puck/context/useStore.ts
+import { createContext, useContext } from "react";
+import { useStore } from "zustand";
+var appStoreContext = createContext(createSoftConfigStore());
+var createUseSoftConfig = () => {
+  return function useSoftConfig2(selector) {
+    const context = useContext(appStoreContext);
+    return useStore(context, selector);
+  };
+};
+var useSoftConfig = createUseSoftConfig();
+
+// src/puck/lib/builder/root-config.tsx
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+var useCustomPuck = createUsePuck();
+var breakVersion = (version) => {
+  const [major, minor, patch] = version.split(".").map((v) => parseInt(v));
+  return [major, minor, patch];
+};
+var updateVersion = (version, increment) => {
+  let [major, minor, patch] = breakVersion(version);
+  if (increment === "major") {
+    major += 1;
+    minor = 0;
+    patch = 0;
+  } else if (increment === "minor") {
+    minor += 1;
+    patch = 0;
+  } else {
+    patch += 1;
+  }
+  return `${major}.${minor}.${patch}`;
+};
+var builderRootConfig = (config, overrides, editingComponent) => ({
+  fields: {
+    _name: {
+      type: "text",
+      label: "Soft Component Name"
+    },
+    _fields: {
+      type: "array",
+      label: "Fields",
+      defaultItemProps: {
+        name: "New Field",
+        type: "text"
+      },
+      getItemSummary(item, index) {
+        return item.name || `Field ${(index || 0) + 1}`;
+      },
+      arrayFields: {
+        name: { type: "text", label: "Name" },
+        type: {
+          type: "select",
+          label: "Type",
+          options: [
+            { label: "Text", value: "text" },
+            { label: "Textarea", value: "textarea" },
+            { label: "Number", value: "number" },
+            { label: "Select", value: "select" },
+            { label: "Radio", value: "radio" },
+            { label: "Array", value: "array" },
+            { label: "Object", value: "object" }
+            // { label: "Reference", value: "reference" },
+          ]
+        }
+      }
+    }
+  },
+  resolveFields({ props: data }, { fields, changed }) {
+    var _a, _b;
+    if (!(data == null ? void 0 : data._fields) || changed._fields || changed._fieldSettings)
+      if ((_a = data == null ? void 0 : data._fields) == null ? void 0 : _a.length)
+        fields._fieldSettings = {
+          type: "object",
+          label: "Field Settings",
+          objectFields: get_field_settings_default(
+            data._fields || [],
+            data._fieldSettings || {}
+          )
+        };
+      else delete fields._fieldSettings;
+    if (((_b = data == null ? void 0 : data._versions) == null ? void 0 : _b.length) && (!(data == null ? void 0 : data._version) || changed._version || changed._fieldSettings)) {
+      const latestVersion = data._versions[data._versions.length - 1] || "1.0.0";
+      delete fields._version;
+      fields._version = {
+        type: "select",
+        label: "Version",
+        options: [
+          ...data._versions.map((v) => ({ label: v, value: v })),
+          {
+            label: `${updateVersion(latestVersion, "patch")} (Patch)`,
+            value: updateVersion(latestVersion, "patch")
+          },
+          {
+            label: `${updateVersion(latestVersion, "minor")} (Minor)`,
+            value: updateVersion(latestVersion, "minor")
+          },
+          {
+            label: `${updateVersion(latestVersion, "major")} (Major)`,
+            value: updateVersion(latestVersion, "major")
+          }
+        ]
+      };
+    }
+    return fields;
+  },
+  resolveData: (props) => {
+    return {
+      props,
+      readOnly: Boolean(editingComponent) ? {
+        _name: true
+      } : void 0
+    };
+  },
+  render: (props) => {
+    const fieldSettings = props == null ? void 0 : props._fieldSettings;
+    const data = useCustomPuck((s) => s.appState.data);
+    const dispatch = useCustomPuck((s) => s.dispatch);
+    const getSelectorForId = useCustomPuck((s) => s.getSelectorForId);
+    const setVersion = useSoftConfig((s) => s.builder.setVersion);
+    const state = useSoftConfig((s) => s.state);
+    useEffect(() => {
+      const propagateChanges = setTimeout(() => {
+        if (!fieldSettings || Object.keys(fieldSettings).length === 0) return;
+        walkTree(
+          data,
+          {
+            components: config.components
+          },
+          (content) => content.map((child) => {
+            var _a;
+            const map = ((_a = child.props) == null ? void 0 : _a._map) || [];
+            if (map.length) {
+              map.forEach(({ from, to, transform }) => {
+                if (!from || !to) return;
+                const fromPaths = Array.isArray(from) ? from : [from];
+                const toPaths = Array.isArray(to) ? to : [to];
+                const inputValues = fromPaths.map(
+                  (f) => getFieldSettingsByPath(props._fieldSettings || {}, f)
+                );
+                console.log(inputValues);
+                let value = transform ? transform(
+                  inputValues.map((v) => v == null ? void 0 : v.defaultValue),
+                  child.props
+                ) : inputValues[0];
+                if (Array.isArray(value)) {
+                  value.forEach((val, i) => {
+                    if (toPaths[i]) {
+                      const originalValue = getFieldSettingsByPath(
+                        child.props,
+                        toPaths[i]
+                      );
+                      if (originalValue !== val) {
+                        const itemSelector = getSelectorForId(child.props.id);
+                        if (!itemSelector) return;
+                        setPropertyByPath(child.props, toPaths[i], val);
+                        dispatch({
+                          type: "replace",
+                          data: child,
+                          destinationIndex: itemSelector == null ? void 0 : itemSelector.index,
+                          destinationZone: itemSelector == null ? void 0 : itemSelector.zone
+                        });
+                      }
+                    }
+                  });
+                } else if (toPaths[0]) {
+                  const setting = getFieldSettingsByPath(
+                    fieldSettings,
+                    fromPaths.length === 1 ? fromPaths[0] : fromPaths.join(".")
+                  );
+                  const defaultValue = setting == null ? void 0 : setting.defaultValue;
+                  const originalValue = getFieldSettingsByPath(
+                    child.props,
+                    toPaths[0]
+                  );
+                  const finalValue = transform !== void 0 && value !== void 0 ? value : defaultValue !== void 0 ? defaultValue : value;
+                  if (originalValue !== finalValue) {
+                    const itemSelector = getSelectorForId(child.props.id);
+                    if (!itemSelector) return;
+                    setPropertyByPath(child.props, toPaths[0], finalValue);
+                    dispatch({
+                      type: "replace",
+                      data: child,
+                      destinationIndex: itemSelector == null ? void 0 : itemSelector.index,
+                      destinationZone: itemSelector == null ? void 0 : itemSelector.zone
+                    });
+                  }
+                }
+              });
+            }
+            return child;
+          })
+        );
+      }, 300);
+      return () => clearTimeout(propagateChanges);
+    }, [fieldSettings]);
+    useEffect(() => {
+      var _a;
+      if (state !== "remodeling") return;
+      if (!(props == null ? void 0 : props._version) || !(props == null ? void 0 : props._name)) return;
+      const currentVersion = props == null ? void 0 : props._version;
+      if (((_a = props._versions) == null ? void 0 : _a.includes(currentVersion)) && props._versions.length > 1) {
+        setVersion(props._name, currentVersion, props, dispatch);
+      }
+    }, [props == null ? void 0 : props._version]);
+    return /* @__PURE__ */ jsx2(Fragment, { children: props.children });
+  }
+});
+
+// src/puck/lib/builder/generate-field-options.ts
+function generateFieldOptions(fields, selectedFields, prefix = "") {
+  const opts = [];
+  function recurse(current, prefix2) {
+    Object.entries(current).forEach(([key, fld]) => {
+      if (fld.type === "slot") return;
+      if (key === "_map") return;
+      if (key === "_slotEnabled") return;
+      const path = prefix2 ? `${prefix2}.${key}` : key;
+      if (selectedFields.includes(path)) {
+        return;
+      }
+      opts.push({ label: path, value: path });
+      if (fld.type === "object" && fld.objectFields) {
+        recurse(fld.objectFields, path);
+      }
+      if (fld.type === "array" && fld.arrayFields) {
+        recurse(fld.arrayFields, path);
+      }
+    });
+  }
+  recurse(fields, prefix);
+  return opts;
+}
+function generateDynamicFieldOptions(_fields, _fieldSettings, prefix = "") {
+  const opts = [];
+  if (!_fields || !_fieldSettings) return opts;
+  function recurse(fields, fieldSettings, currentPrefix) {
+    fields.forEach((field) => {
+      var _a;
+      const settings = fieldSettings[field.name];
+      const path = currentPrefix ? `${currentPrefix}.${field.name}` : field.name;
+      opts.push({ label: path, value: path });
+      if ((_a = settings == null ? void 0 : settings.subFields) == null ? void 0 : _a.length) {
+        recurse(settings.subFields, settings.subFieldSettings || {}, path);
+      }
+    });
+  }
+  recurse(_fields, _fieldSettings, prefix);
+  return opts;
+}
+
+// src/puck/components/error-boundary/index.tsx
+import { Component } from "react";
+
+// src/puck/lib/get-class-name-factory.ts
+import classnames from "classnames";
+var getClassNameFactory = (rootClass, styles, config = { baseClass: "" }) => (options = {}) => {
+  if (typeof options === "string") {
+    const descendant = options;
+    const style = styles[`${rootClass}-${descendant}`];
+    if (style) {
+      return config.baseClass + styles[`${rootClass}-${descendant}`] || "";
+    }
+    return "";
+  } else if (typeof options === "object") {
+    const modifiers = options;
+    const prefixedModifiers = {};
+    for (let modifier in modifiers) {
+      prefixedModifiers[styles[`${rootClass}--${modifier}`]] = modifiers[modifier];
+    }
+    const c = styles[rootClass];
+    return config.baseClass + classnames(__spreadValues({
+      [c]: !!c
+    }, prefixedModifiers));
+  } else {
+    return config.baseClass + styles[rootClass] || "";
+  }
+};
+var get_class_name_factory_default = getClassNameFactory;
+
+// src/puck/components/error-boundary/styles.module.css
+var styles_default = {};
+
+// src/puck/components/error-boundary/index.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var getClassName = get_class_name_factory_default("ErrorBoundary", styles_default);
+var ErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.resetError = () => {
+      this.setState({
+        hasError: false,
+        error: null
+      });
+    };
+    this.state = {
+      hasError: false,
+      error: null
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      hasError: true,
+      error
+    };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("Error caught by ErrorBoundary:", error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      if (typeof this.props.fallback === "function") {
+        return this.props.fallback(this.state.error, this.resetError);
+      }
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      return /* @__PURE__ */ jsxs("div", { className: getClassName(), children: [
+        /* @__PURE__ */ jsx3("h3", { className: getClassName("title"), children: "Component Error" }),
+        /* @__PURE__ */ jsxs("details", { className: getClassName("details"), children: [
+          /* @__PURE__ */ jsx3("summary", { children: "Show error details" }),
+          this.state.error && this.state.error.toString()
+        ] }),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            onClick: this.resetError,
+            className: getClassName("button"),
+            children: "Try Again"
+          }
+        )
+      ] });
+    }
+    return this.props.children;
+  }
+};
+
+// src/puck/lib/builder/builder-config.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var builderConfig = (config, overrides, editingComponent) => ({
+  root: builderRootConfig(config, overrides, editingComponent),
+  components: Object.entries(__spreadValues({}, config.components)).reduce(
+    (acc, [name, component]) => {
+      if (!editingComponent || name !== editingComponent) {
+        let _a;
+        const tempComponent = __spreadProps(__spreadValues({}, component), {
+          resolveFields(data, params) {
+            return __async(this, null, function* () {
+              let fields = {};
+              if (!fields._slot) {
+                const slotFields = Object.entries(params.fields).filter(
+                  ([_, field]) => field.type === "slot"
+                );
+                if (slotFields.length)
+                  fields._slot = {
+                    type: "array",
+                    label: "Enable Dropdown Slots",
+                    getItemSummary(item, index) {
+                      return item.slot || `Slot ${(index || 0) + 1}`;
+                    },
+                    arrayFields: {
+                      slot: {
+                        type: "select",
+                        label: "Slot",
+                        options: [
+                          { label: "Select a slot", value: "" },
+                          ...slotFields.filter(
+                            ([fieldName, field]) => {
+                              var _a2;
+                              return field.type === "slot" && !(((_a2 = data.props) == null ? void 0 : _a2._slot) || []).some(
+                                (s) => s.slot === fieldName
+                              );
+                            }
+                          ).map(([fieldName, field]) => ({
+                            label: field.label || fieldName,
+                            value: fieldName
+                          }))
+                        ]
+                      },
+                      name: {
+                        type: "text",
+                        label: "Name",
+                        placeholder: "Optional Slot Name"
+                      }
+                    }
+                  };
+              }
+              const defaultFields = component.resolveFields ? yield component.resolveFields(data, params) : component.fields || {};
+              if (!fields._map) {
+                const rootProps = getRootProps(params.appState);
+                fields._map = overrides.map ? {
+                  type: "custom",
+                  render: ({ value, onChange, id }) => {
+                    return overrides.map({
+                      rootProps,
+                      value,
+                      onChange,
+                      id,
+                      props: data.props || {},
+                      fromOptions: generateDynamicFieldOptions(
+                        (rootProps == null ? void 0 : rootProps._fields) || [],
+                        (rootProps == null ? void 0 : rootProps._fieldSettings) || {}
+                      ),
+                      toOptions: generateFieldOptions(defaultFields, [])
+                    });
+                  }
+                } : {
+                  type: "array",
+                  label: "Dynamic Field Map",
+                  arrayFields: {
+                    from: {
+                      type: "select",
+                      label: "From",
+                      options: [
+                        { label: "Select a field", value: "" },
+                        ...generateDynamicFieldOptions(
+                          (rootProps == null ? void 0 : rootProps._fields) || [],
+                          (rootProps == null ? void 0 : rootProps._fieldSettings) || {}
+                        )
+                      ]
+                    },
+                    to: {
+                      type: "select",
+                      label: "To",
+                      options: [
+                        { label: "Select a field", value: "" },
+                        ...generateFieldOptions(defaultFields, [])
+                      ]
+                    }
+                  }
+                };
+              }
+              fields = __spreadValues(__spreadValues({}, fields), defaultFields);
+              return fields;
+            });
+          },
+          resolveData: ({ props }, { lastData }) => {
+            var _a2;
+            const _map = props._map || [];
+            const readOnlyFields = _map.flatMap((item) => item.to);
+            if (_map.length) {
+              return {
+                props,
+                readOnly: readOnlyFields.reduce(
+                  (acc2, field) => __spreadProps(__spreadValues({}, acc2), { [field]: true }),
+                  {}
+                )
+              };
+            }
+            const prevMap = (_a2 = lastData == null ? void 0 : lastData.props) == null ? void 0 : _a2._map;
+            if (prevMap && prevMap.length === 1) {
+              const lastField = prevMap[0].to;
+              if (typeof lastField === "string") {
+                return {
+                  props,
+                  readOnly: { [lastField]: false }
+                };
+              }
+              if (Array.isArray(lastField)) {
+                return {
+                  props,
+                  readOnly: lastField.reduce(
+                    (acc2, field) => __spreadProps(__spreadValues({}, acc2), { [String(field)]: false }),
+                    {}
+                  )
+                };
+              }
+            }
+            return {
+              props,
+              readOnly: {}
+            };
+          },
+          render: (props) => {
+            return /* @__PURE__ */ jsx4(ErrorBoundary, { children: component.render(props) });
+          }
+        });
+        acc[name] = tempComponent;
+      }
+      return acc;
+    },
+    {}
+  )
+});
+
+// src/puck/lib/soft-component-from-appstate.ts
+var getSubComponents = (content, componentConfigs, fieldSettings, slots) => {
+  if (!content || !Array.isArray(content)) return [];
+  return content.map((componentProps) => {
+    var _a, _b, _c;
+    const componentConfig = componentConfigs[componentProps.type];
+    const enabledSlotNames = new Set(
+      (((_a = componentProps.props) == null ? void 0 : _a._slot) || []).map((s) => s.slot)
+    );
+    const components = Object.entries((componentConfig == null ? void 0 : componentConfig.fields) || {}).filter(
+      ([key, field]) => field.type === "slot" && !enabledSlotNames.has(key)
+      // Skip if slot is enabled
+    ).reduce(
+      (acc, [fieldKey, _]) => {
+        var _a2;
+        acc[fieldKey] = getSubComponents(
+          ((_a2 = componentProps.props) == null ? void 0 : _a2[fieldKey]) || [],
+          componentConfigs,
+          fieldSettings,
+          slots
+        );
+        return acc;
+      },
+      {}
+    ) || {};
+    const fixedProps = __spreadValues(__spreadValues({}, componentConfig == null ? void 0 : componentConfig.defaultProps), componentProps.props);
+    (componentProps.props._slot || []).forEach(
+      (s) => {
+        var _a2;
+        if (s.slot)
+          slots[s.name || `${componentProps.props.id}-${s.slot}`] = componentProps.props[s.slot] || ((_a2 = componentConfig == null ? void 0 : componentConfig.defaultProps) == null ? void 0 : _a2[s.slot]);
+      }
+    );
+    const subComponent = {
+      map: ((_b = componentProps.props) == null ? void 0 : _b._map) || [],
+      fixedProps,
+      type: componentProps.type,
+      components,
+      enabledSlots: ((_c = componentProps.props) == null ? void 0 : _c._slot) || []
+    };
+    return subComponent;
+  });
+};
+var softFieldsToPuckFields = (fields, fieldSettings) => {
+  return (fields == null ? void 0 : fields.reduce(
+    (acc, field) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      switch (field.type) {
+        case "text":
+        case "textarea":
+          acc[field.name] = { type: field.type, label: field.name };
+          break;
+        case "number":
+          acc[field.name] = {
+            type: field.type,
+            label: field.name,
+            min: (_a = fieldSettings == null ? void 0 : fieldSettings[field.name]) == null ? void 0 : _a.min,
+            max: (_b = fieldSettings == null ? void 0 : fieldSettings[field.name]) == null ? void 0 : _b.max,
+            step: (_c = fieldSettings == null ? void 0 : fieldSettings[field.name]) == null ? void 0 : _c.step
+          };
+          break;
+        case "select":
+        case "radio":
+          acc[field.name] = {
+            type: field.type,
+            label: field.name,
+            options: ((_d = fieldSettings == null ? void 0 : fieldSettings[field.name]) == null ? void 0 : _d.options) || []
+          };
+          break;
+        // TODO: Default item props
+        case "array":
+          acc[field.name] = {
+            type: field.type,
+            label: field.name,
+            arrayFields: softFieldsToPuckFields(
+              ((_e = fieldSettings == null ? void 0 : fieldSettings[field.name]) == null ? void 0 : _e.subFields) || [],
+              ((_f = fieldSettings == null ? void 0 : fieldSettings[field.name]) == null ? void 0 : _f.subFieldSettings) || {}
+            )
+          };
+          break;
+        // TODO: Needs testing to see if it works
+        case "object":
+          acc[field.name] = {
+            type: field.type,
+            label: field.name,
+            objectFields: softFieldsToPuckFields(
+              ((_g = fieldSettings == null ? void 0 : fieldSettings[field.name]) == null ? void 0 : _g.subFields) || [],
+              ((_h = fieldSettings == null ? void 0 : fieldSettings[field.name]) == null ? void 0 : _h.subFieldSettings) || {}
+            )
+          };
+          break;
+        default:
+          acc[field.name] = { type: "text", label: field.name };
+      }
+      return acc;
+    },
+    {}
+  )) || {};
+};
+var softComponentFromAppState = (appState, configComponents) => {
+  var _a;
+  const rootProps = ((_a = appState.data.root) == null ? void 0 : _a.props) || {};
+  const fields = rootProps._fields || [];
+  const field_settings = rootProps._fieldSettings || {};
+  const slots = {};
+  const components = getSubComponents(
+    appState.data.content || [],
+    configComponents,
+    field_settings,
+    slots
+  );
+  const defaultProps = __spreadValues(__spreadValues({}, Object.keys(field_settings).reduce(
+    (acc, field) => {
+      acc[field] = field_settings[field].defaultValue;
+      return acc;
+    },
+    {}
+  )), slots);
+  return [
+    {
+      fields: __spreadValues(__spreadValues({}, softFieldsToPuckFields(fields, field_settings)), Object.keys(slots).reduce((acc, slot) => {
+        acc[slot] = { type: "slot", label: slot };
+        return acc;
+      }, {})),
+      defaultProps,
+      components,
+      slots
+    },
+    rootProps._version || "1.0.0"
+  ];
+};
+
+// src/puck/lib/soft-component-to-appstate.ts
+var puckFieldsToSoftFields = (fields, slots) => {
+  const softFields = [];
+  const fieldSettings = {};
+  Object.entries(fields).forEach(([fieldName, field]) => {
+    if (slots.has(fieldName)) {
+      return;
+    }
+    if (fieldName === "_version") {
+      return;
+    }
+    switch (field.type) {
+      case "text":
+      case "textarea":
+        softFields.push({ name: fieldName, type: field.type });
+        break;
+      case "number":
+        softFields.push({ name: fieldName, type: "number" });
+        fieldSettings[fieldName] = {
+          min: field.min,
+          max: field.max,
+          step: field.step
+        };
+        break;
+      case "select":
+      case "radio":
+        softFields.push({ name: fieldName, type: field.type });
+        fieldSettings[fieldName] = {
+          options: field.options || []
+        };
+        break;
+      case "array":
+        softFields.push({ name: fieldName, type: "array" });
+        const arrayFieldsResult = puckFieldsToSoftFields(
+          field.arrayFields || {},
+          /* @__PURE__ */ new Set()
+        );
+        fieldSettings[fieldName] = {
+          subFields: arrayFieldsResult.fields,
+          subFieldSettings: arrayFieldsResult.fieldSettings
+        };
+        break;
+      case "object":
+        softFields.push({ name: fieldName, type: "object" });
+        const objectFieldsResult = puckFieldsToSoftFields(
+          field.objectFields || {},
+          /* @__PURE__ */ new Set()
+        );
+        fieldSettings[fieldName] = {
+          subFields: objectFieldsResult.fields,
+          subFieldSettings: objectFieldsResult.fieldSettings
+        };
+        break;
+      default:
+        softFields.push({ name: fieldName, type: "text" });
+    }
+    if (fieldSettings[fieldName]) {
+      fieldSettings[fieldName].defaultValue = void 0;
+    } else {
+      fieldSettings[fieldName] = { defaultValue: void 0 };
+    }
+  });
+  return { fields: softFields, fieldSettings };
+};
+var reconstructComponents = (subComponents, componentConfigs, softComponentProps) => {
+  return subComponents.map((subComponent) => {
+    const componentConfig = componentConfigs[subComponent.type];
+    const props = __spreadValues({}, subComponent.fixedProps);
+    subComponent.map.forEach(({ from, to }) => {
+      if (softComponentProps[from] !== void 0) {
+        props[to] = softComponentProps[from];
+      }
+    });
+    if (subComponent.enabledSlots.length > 0) {
+      props._slot = subComponent.enabledSlots;
+      subComponent.enabledSlots.forEach(({ slot, name }) => {
+        const slotName = name || `${props.id}-${slot}`;
+        if (softComponentProps[slotName] !== void 0) {
+          props[slot] = softComponentProps[slotName];
+        }
+      });
+    }
+    Object.entries(subComponent.components).forEach(([slotKey, nestedComponents]) => {
+      if (nestedComponents.length > 0) {
+        props[slotKey] = reconstructComponents(
+          nestedComponents,
+          componentConfigs,
+          softComponentProps
+        );
+      } else {
+        props[slotKey] = [];
+      }
+    });
+    const componentData = {
+      type: subComponent.type,
+      props: __spreadValues({
+        id: props.id || ""
+      }, props)
+    };
+    return componentData;
+  });
+};
+var softComponentToAppState = (softComponent, componentName, version, versions, componentProps, componentConfigs) => {
+  const slots = new Set(Object.keys(softComponent.slots));
+  const { fields, fieldSettings } = puckFieldsToSoftFields(
+    softComponent.fields,
+    slots
+  );
+  Object.entries(softComponent.defaultProps).forEach(([key, value]) => {
+    if (fieldSettings && fieldSettings[key] && !slots.has(key)) {
+      fieldSettings[key].defaultValue = value;
+    }
+  });
+  const rootProps = {
+    _name: componentName,
+    _version: version,
+    _versions: versions,
+    _fields: fields,
+    _fieldSettings: fieldSettings
+  };
+  const content = reconstructComponents(
+    softComponent.components,
+    componentConfigs,
+    componentProps
+  );
+  return {
+    root: {
+      props: __spreadValues({
+        title: "Soft Component Builder"
+      }, rootProps)
+    },
+    content
+  };
+};
+
+// src/puck/lib/root-droppable-id.ts
+var rootAreaId = "root";
+var rootZone = "default-zone";
+var rootDroppableId = `${rootAreaId}:${rootZone}`;
+
+// src/puck/components/soft-render/index.tsx
+import { useMemo, useRef } from "react";
+import { v4 as uuidv4 } from "uuid";
+import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
+function SoftRender({
+  softComponentFields,
+  softSubComponent,
+  configComponents,
+  props,
+  depth = 0
+}) {
+  const _a = props, { id, puck, editMode } = _a, rest = __objRest(_a, ["id", "puck", "editMode"]);
+  const mapCacheRef = useRef(/* @__PURE__ */ new Map());
+  const prevPropsRef = useRef("");
+  const propsSnapshot = JSON.stringify(props);
+  if (prevPropsRef.current !== propsSnapshot) {
+    mapCacheRef.current.clear();
+    prevPropsRef.current = propsSnapshot;
+  }
+  const subComponentRootProps = useMemo(
+    () => Object.entries(softComponentFields || {}).filter(([_, field]) => field.type !== "slot").reduce(
+      (acc, [fieldKey]) => {
+        acc[fieldKey] = props[fieldKey];
+        return acc;
+      },
+      {}
+    ),
+    [softComponentFields, props]
+  );
+  const valuesToUpdateKey = useMemo(
+    () => JSON.stringify(subComponentRootProps),
+    [subComponentRootProps]
+  );
+  return /* @__PURE__ */ jsx5(Fragment2, { children: (softSubComponent == null ? void 0 : softSubComponent.length) > 0 && softSubComponent.map((subComponent, index) => {
+    var _a2;
+    const componentConfig = configComponents[subComponent == null ? void 0 : subComponent.type];
+    if (!componentConfig) return null;
+    const resolvedProps = subComponent.fixedProps || {};
+    const stableId = useMemo(
+      () => depth === 0 ? id : `${subComponent.type}-${id}-d${depth}-${uuidv4()}`,
+      [id, depth, subComponent.type]
+    );
+    if ((_a2 = subComponent.map) == null ? void 0 : _a2.length) {
+      subComponent.map.forEach(({ from, to, transform }) => {
+        const fromPaths = Array.isArray(from) ? from : from ? [from] : [];
+        const toPaths = Array.isArray(to) ? to : to ? [to] : [];
+        const inputValues = fromPaths.map(
+          (f) => getFieldSettingsByPath(props || {}, f)
+        );
+        const cacheKey = JSON.stringify(inputValues);
+        let result = mapCacheRef.current.get(cacheKey);
+        if (!result) {
+          result = transform ? transform(inputValues, props) : inputValues[0];
+          mapCacheRef.current.set(cacheKey, result);
+        }
+        if (Array.isArray(result)) {
+          result.forEach(
+            (val, i) => toPaths[i] && setPropertyByPath(resolvedProps, toPaths[i], val)
+          );
+        } else if (toPaths[0]) {
+          setPropertyByPath(resolvedProps, toPaths[0], result);
+        }
+      });
+    }
+    Object.entries(componentConfig.fields || {}).forEach(
+      ([slotKey, field]) => {
+        var _a3, _b;
+        if (field.type === "slot") {
+          const enabledSlot = (_a3 = subComponent == null ? void 0 : subComponent.enabledSlots) == null ? void 0 : _a3.find(
+            (s) => s.slot === slotKey
+          );
+          if (enabledSlot) {
+            const slotName = enabledSlot.name || `${(_b = subComponent.fixedProps) == null ? void 0 : _b.id}-${slotKey}`;
+            resolvedProps[slotKey] = useMemo(
+              () => rest[slotName] || (() => null),
+              [slotName]
+            );
+          } else {
+            resolvedProps[slotKey] = useMemo(() => {
+              return ({
+                className,
+                style
+              }) => {
+                var _a4, _b2;
+                return /* @__PURE__ */ jsx5("div", { className, style, children: /* @__PURE__ */ jsx5(
+                  SoftRender,
+                  {
+                    softComponentFields,
+                    softSubComponent: (_b2 = (_a4 = subComponent == null ? void 0 : subComponent.components) == null ? void 0 : _a4[slotKey]) != null ? _b2 : [],
+                    configComponents,
+                    props,
+                    depth: depth + 1
+                  },
+                  slotKey
+                ) });
+              };
+            }, [valuesToUpdateKey]);
+          }
+        }
+      }
+    );
+    const ComponentRender = componentConfig.render;
+    return /* @__PURE__ */ jsx5(ErrorBoundary, { children: /* @__PURE__ */ jsx5(
+      ComponentRender,
+      __spreadValues({
+        id: stableId,
+        editMode,
+        puck
+      }, resolvedProps)
+    ) }, index);
+  }) });
+}
+
+// src/puck/lib/create-versioned-component-config.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var createVersionedComponentConfig = (componentName, version, allVersions, config, softComponents, defaultProps) => {
+  var _a, _b;
+  const softConfig = config;
+  return {
+    fields: Object.fromEntries(
+      (Object.entries(
+        (_b = (_a = softComponents[componentName].versions) == null ? void 0 : _a[version]) == null ? void 0 : _b.fields
+      ) || []).filter(
+        ([key, field]) => field.type === "slot"
+      ).map(([key, field]) => [key, __spreadValues({}, field)])
+    ),
+    defaultProps: __spreadProps(__spreadValues({}, defaultProps), {
+      version
+    }),
+    resolveFields: (data) => {
+      var _a2, _b2;
+      const selectedVersion = ((_a2 = data.props) == null ? void 0 : _a2.version) || version;
+      const versionedComponent = (_b2 = softComponents[componentName]) == null ? void 0 : _b2.versions[selectedVersion];
+      const fieldsWithoutSlots = Object.fromEntries(
+        Object.entries((versionedComponent == null ? void 0 : versionedComponent.fields) || {}).filter(([, field]) => field.type !== "slot").map(([key, field]) => [key, __spreadValues({}, field)])
+      );
+      return __spreadValues({
+        version: {
+          label: "Version",
+          type: "select",
+          options: allVersions.map((v) => ({ label: v, value: v }))
+        }
+      }, fieldsWithoutSlots);
+    },
+    render: (props) => {
+      var _a2;
+      const selectedVersion = props.version || version;
+      const versionedComponent = (_a2 = softComponents[componentName]) == null ? void 0 : _a2.versions[selectedVersion];
+      return /* @__PURE__ */ jsx6(
+        SoftRender,
+        {
+          softComponentFields: versionedComponent.fields,
+          softSubComponent: versionedComponent.components,
+          configComponents: softConfig.components,
+          props
+        }
+      );
+    }
+  };
+};
+
+// src/puck/lib/generate-id.ts
+import { v4 as uuidv42 } from "uuid";
+var generateId = (type) => type ? `${type}-${uuidv42()}` : uuidv42();
+
+// src/puck/lib/builder/sub-component-decomposer.tsx
+var subComponentDecomposer = (componentRootData, softSubComponent) => {
+  const resolvedProps = __spreadValues({}, softSubComponent.fixedProps);
+  softSubComponent.map.forEach((mapItem) => {
+    var _a;
+    const value = (_a = componentRootData.props) == null ? void 0 : _a[mapItem.from || ""];
+    if (value !== void 0) {
+      resolvedProps[mapItem.to] = value;
+    }
+  });
+  softSubComponent.enabledSlots.forEach(({ slot, name }) => {
+    var _a, _b;
+    const referenceName = name || `${(_a = softSubComponent.fixedProps) == null ? void 0 : _a.id}-${slot}`;
+    resolvedProps[slot] = ((_b = componentRootData.props) == null ? void 0 : _b[referenceName]) || [];
+  });
+  Object.entries(softSubComponent.components).forEach(
+    ([slotKey, subComponents]) => {
+      resolvedProps[slotKey] = subComponents.map(
+        (subComponent) => subComponentDecomposer(componentRootData, subComponent)
+      );
+    }
+  );
+  const accItem = {
+    type: softSubComponent.type,
+    props: __spreadProps(__spreadValues({}, resolvedProps), {
+      id: generateId(softSubComponent.type)
+    })
+  };
+  return accItem;
+};
+
+// src/puck/lib/decompose-soft-component.ts
+function decomposeSoftComponent(componentData, softComponents) {
+  var _a, _b;
+  if (!(componentData == null ? void 0 : componentData.type) || !(componentData == null ? void 0 : componentData.props.id)) {
+    throw new Error("Component data must have type and id to decompose.");
+  }
+  const version = ((_a = componentData.props) == null ? void 0 : _a.version) || "1.0.0";
+  const softComponent = (_b = softComponents[componentData.type]) == null ? void 0 : _b.versions[version];
+  if (!softComponent) {
+    throw new Error(
+      `Soft component "${componentData.type}" version "${version}" not found.`
+    );
+  }
+  const decomposedComponentData = softComponent.components.map(
+    (softSubComponent) => {
+      return subComponentDecomposer(componentData, softSubComponent);
+    }
+  );
+  return decomposedComponentData;
+}
+function isSoftComponent(componentType, softComponents) {
+  return componentType in softComponents;
+}
+
+// src/puck/lib/demolish-soft-component.ts
+import { walkTree as walkTree2 } from "@measured/puck";
+function demolishSoftComponent(componentName, data, config, softComponents) {
+  const resolvedData = walkTree2(data, config, (components) => {
+    components.forEach((componentData, index) => {
+      if (componentData.type === componentName) {
+        const decomposed = decomposeSoftComponent(componentData, softComponents);
+        if (decomposed.length) {
+          components.splice(index, 1, ...decomposed);
+        }
+      }
+    });
+    return components;
+  });
+  const newSoftComponents = __spreadValues({}, softComponents);
+  delete newSoftComponents[componentName];
+  const newConfig = __spreadProps(__spreadValues({}, config), {
+    components: Object.entries(config.components).reduce(
+      (acc, [name, component]) => {
+        if (name !== componentName) {
+          acc[name] = component;
+        }
+        return acc;
+      },
+      {}
+    )
+  });
+  return {
+    data: resolvedData,
+    config: newConfig,
+    softComponents: newSoftComponents
+  };
+}
+
+// src/puck/store/slices/builder.tsx
+var createBuildersSlice = (set, get, initialConfig) => ({
+  build: (history, selectedItem, itemSelector, puckDispatch) => {
+    if (!selectedItem || !itemSelector) {
+      throw new Error("No item selected to build from.");
+    }
+    puckDispatch({
+      type: "set",
+      state: (previous) => ({
+        ui: __spreadProps(__spreadValues({}, previous.ui), {
+          itemSelector: null
+        }),
+        data: __spreadProps(__spreadValues({}, previous.data), {
+          root: {
+            props: {
+              _name: "New Soft Component"
+            }
+          },
+          content: [__spreadValues({}, selectedItem)]
+        })
+      })
+    });
+    const config = __spreadValues({}, get().softConfig);
+    const overrides = get().overrides;
+    const buildConfig = builderConfig(config, overrides);
+    set((s) => __spreadProps(__spreadValues({}, s), {
+      softConfig: buildConfig,
+      storedConfig: config,
+      originalHistory: history,
+      itemSelector: {
+        index: itemSelector.index,
+        zone: itemSelector.zone || rootDroppableId
+      },
+      state: "building"
+    }));
+    setTimeout(
+      () => puckDispatch({
+        type: "replaceRoot",
+        root: {
+          title: "Soft Component Builder",
+          _name: "New Soft Component"
+        }
+      }),
+      100
+    );
+  },
+  remodel: (history, selectedItem, itemSelector, puckDispatch) => {
+    var _a, _b;
+    if (!selectedItem || !itemSelector) {
+      throw new Error("No item selected to build from.");
+    }
+    const softComponentName = selectedItem.type;
+    if (!softComponentName) {
+      throw new Error("Selected item must have a valid component type.");
+    }
+    const softComponentVersion = ((_a = selectedItem.props) == null ? void 0 : _a.version) || "1.0.0";
+    const softComponent = (_b = get().softComponents[softComponentName]) == null ? void 0 : _b.versions[softComponentVersion];
+    const versions = Object.keys(
+      get().softComponents[softComponentName].versions || {}
+    );
+    if (!softComponent) {
+      throw new Error(
+        `Soft component "${softComponentName}" with version "${softComponentVersion}" not found.`
+      );
+    }
+    puckDispatch({
+      type: "setUi",
+      ui: (previous) => __spreadProps(__spreadValues({}, previous), {
+        itemSelector: void 0
+      })
+    });
+    const { root, content } = softComponentToAppState(
+      softComponent,
+      softComponentName,
+      softComponentVersion,
+      versions,
+      selectedItem.props,
+      get().softConfig.components
+    );
+    puckDispatch({
+      type: "setData",
+      data: (previous) => __spreadProps(__spreadValues({}, previous), {
+        root: __spreadProps(__spreadValues({}, root), { _versions: versions }),
+        content: content || []
+      })
+    });
+    const config = __spreadValues({}, get().softConfig);
+    const overrides = get().overrides;
+    const buildConfig = builderConfig(config, overrides, softComponentName);
+    set((s) => __spreadProps(__spreadValues({}, s), {
+      storedConfig: config,
+      softConfig: buildConfig,
+      originalHistory: history,
+      itemSelector: {
+        index: itemSelector.index,
+        zone: itemSelector.zone || rootDroppableId
+      },
+      state: "remodeling"
+    }));
+    setTimeout(
+      () => puckDispatch({
+        type: "replaceRoot",
+        root: {
+          title: "Soft Component Builder",
+          _name: "New Soft Component"
+        }
+      }),
+      100
+    );
+  },
+  complete: (appState, setHistories) => {
+    var _a, _b;
+    if (get().state === "ready") {
+      throw new Error("Not building or remodeling a component.");
+    }
+    const componentName = (_b = (_a = appState.data.root) == null ? void 0 : _a.props) == null ? void 0 : _b._name;
+    if (!componentName) {
+      throw new Error("Root component must have a name to compose.");
+    }
+    const [newSoftComponentConfig, version] = get().builder.compose(appState, componentName) || [];
+    if (!newSoftComponentConfig) {
+      throw new Error("Failed to compose new soft component config.");
+    }
+    const storedHistories = get().originalHistory;
+    setHistories([...storedHistories]);
+    const config = __spreadValues({}, get().softConfig || initialConfig);
+    set((s) => __spreadProps(__spreadValues({}, s), {
+      softConfig: __spreadProps(__spreadValues({}, config), {
+        root: __spreadValues({}, initialConfig.root),
+        components: __spreadProps(__spreadValues({}, Object.entries(config.components).reduce(
+          (acc, [name, component]) => {
+            var _a2;
+            let tempComponent = (_a2 = config.components) == null ? void 0 : _a2[name];
+            if (tempComponent) {
+              acc[name] = tempComponent;
+              acc[name].render = tempComponent.render;
+            } else {
+              tempComponent = __spreadValues({}, component);
+              tempComponent == null ? true : delete tempComponent.resolvePermissions;
+              tempComponent == null ? true : delete tempComponent.resolveData;
+              acc[name] = tempComponent;
+            }
+            return acc;
+          },
+          {}
+        )), {
+          [componentName]: __spreadValues({}, newSoftComponentConfig)
+        })
+      }),
+      storedConfig: void 0,
+      state: "inspecting",
+      originalHistory: []
+    }));
+    return componentName;
+  },
+  inspect: (componentName, puckDispatch) => {
+    if (get().state !== "inspecting") {
+      throw new Error("Not in inspecting state.");
+    }
+    const selector = __spreadValues({}, get().itemSelector);
+    if ((selector == null ? void 0 : selector.index) === void 0 || !(selector == null ? void 0 : selector.zone)) {
+      throw new Error("No selector found for last item.");
+    }
+    setTimeout(() => {
+      puckDispatch({
+        type: "remove",
+        index: selector.index,
+        zone: selector.zone
+      });
+      puckDispatch({
+        type: "insert",
+        destinationIndex: selector.index,
+        destinationZone: selector.zone,
+        componentType: componentName
+      });
+    }, 500);
+    set((s) => __spreadProps(__spreadValues({}, s), {
+      state: "ready",
+      setItemSelector: void 0,
+      setOriginalItem: void 0
+    }));
+  },
+  cancel: (setHistories) => {
+    const storedHistories = get().originalHistory;
+    setTimeout(() => setHistories([...storedHistories]), 100);
+    set((s) => __spreadProps(__spreadValues({}, s), {
+      softConfig: get().storedConfig || initialConfig,
+      storedConfig: void 0,
+      originalHistory: [],
+      itemSelector: null,
+      originalItem: null,
+      state: "ready"
+    }));
+  },
+  compose: (appState, componentName) => {
+    if (!componentName) {
+      throw new Error("Root component must have a name to compose.");
+    }
+    const componentConfigs = get().softConfig.components;
+    if (get().state === "building" && Object.keys(componentConfigs).includes(componentName)) {
+      throw new Error(
+        `Component name "${componentName}" already exists in the configuration.`
+      );
+    }
+    const [softComponent, version] = softComponentFromAppState(appState, componentConfigs);
+    const existingComponent = get().softComponents[componentName];
+    const allVersions = Object.keys((existingComponent == null ? void 0 : existingComponent.versions) || {});
+    const isNewVersion = !allVersions.includes(version);
+    const newSoftComponentConfig = createVersionedComponentConfig(
+      componentName,
+      version,
+      isNewVersion ? [...allVersions, version] : allVersions,
+      get().softConfig,
+      __spreadProps(__spreadValues({}, get().softComponents), {
+        [componentName]: __spreadProps(__spreadValues({}, existingComponent), {
+          versions: __spreadProps(__spreadValues({}, existingComponent == null ? void 0 : existingComponent.versions), {
+            [version]: softComponent
+          })
+        })
+      }),
+      softComponent.defaultProps
+    );
+    get().setSoftComponent(componentName, version, softComponent);
+    return [newSoftComponentConfig, version];
+  },
+  decompose: (componentData) => {
+    if (!(componentData == null ? void 0 : componentData.type) || !(componentData == null ? void 0 : componentData.props.id)) {
+      throw new Error("Component data must have type and id to decompose.");
+    }
+    return decomposeSoftComponent(componentData, get().softComponents);
+  },
+  demolish: (componentName, data, puckDispatch) => {
+    if (get().state !== "ready") {
+      throw new Error("Components can only be demolished in ready state.");
+    }
+    const result = demolishSoftComponent(
+      componentName,
+      data,
+      get().softConfig,
+      get().softComponents
+    );
+    puckDispatch({
+      type: "setData",
+      data: result.data
+    });
+    set((s) => __spreadProps(__spreadValues({}, s), {
+      softComponents: result.softComponents,
+      softConfig: result.config
+    }));
+  },
+  setVersion: (componentName, newVersion, currentProps, puckDispatch) => {
+    var _a;
+    if (get().state !== "remodeling") {
+      throw new Error("Can only switch versions during remodeling.");
+    }
+    const softComponent = (_a = get().softComponents[componentName]) == null ? void 0 : _a.versions[newVersion];
+    if (!softComponent) {
+      throw new Error(
+        `Soft component "${componentName}" with version "${newVersion}" not found.`
+      );
+    }
+    const versions = Object.keys(
+      get().softComponents[componentName].versions || {}
+    );
+    const { root, content } = softComponentToAppState(
+      softComponent,
+      componentName,
+      newVersion,
+      versions,
+      currentProps,
+      get().softConfig.components
+    );
+    puckDispatch({
+      type: "setData",
+      data: (previous) => __spreadProps(__spreadValues({}, previous), {
+        root: __spreadProps(__spreadValues({}, root), { props: __spreadProps(__spreadValues({}, root.props), { _versions: versions }) }),
+        content: content || []
+      })
+    });
+  }
+});
+
+// src/puck/lib/build-initial-soft-components.ts
+function extractDependencies(softComponents, componentName, version) {
+  var _a, _b;
+  const dependencies = /* @__PURE__ */ new Set();
+  const component = (_b = (_a = softComponents[componentName]) == null ? void 0 : _a.versions) == null ? void 0 : _b[version];
+  if (!component) {
+    return dependencies;
+  }
+  const processSubComponents = (subComponents) => {
+    if (!Array.isArray(subComponents)) return;
+    for (const subComponent of subComponents) {
+      if (subComponent == null ? void 0 : subComponent.type) {
+        dependencies.add(subComponent.type);
+        if (subComponent.components) {
+          Object.values(subComponent.components).forEach((nestedComponents) => {
+            processSubComponents(nestedComponents);
+          });
+        }
+      }
+    }
+  };
+  processSubComponents(component.components);
+  return dependencies;
+}
+function topologicalSort(softComponents, hardComponentNames) {
+  const sorted = [];
+  const visiting = /* @__PURE__ */ new Set();
+  const visited = /* @__PURE__ */ new Set();
+  const dependencyGraph = /* @__PURE__ */ new Map();
+  for (const [componentName, component] of Object.entries(softComponents)) {
+    const defaultVersion = component.defaultVersion || Object.keys(component.versions || {}).pop();
+    if (!defaultVersion) continue;
+    const allDeps = extractDependencies(
+      softComponents,
+      componentName,
+      defaultVersion
+    );
+    const softDeps = new Set(
+      [...allDeps].filter((dep) => !hardComponentNames.has(dep))
+    );
+    dependencyGraph.set(componentName, softDeps);
+  }
+  function visit(componentName) {
+    if (visited.has(componentName)) return;
+    if (visiting.has(componentName)) {
+      throw new Error(
+        `Circular dependency detected involving component: ${componentName}`
+      );
+    }
+    visiting.add(componentName);
+    const dependencies = dependencyGraph.get(componentName) || /* @__PURE__ */ new Set();
+    for (const dep of dependencies) {
+      if (softComponents[dep]) {
+        visit(dep);
+      }
+    }
+    visiting.delete(componentName);
+    visited.add(componentName);
+    sorted.push(componentName);
+  }
+  for (const componentName of Object.keys(softComponents)) {
+    if (!visited.has(componentName)) {
+      visit(componentName);
+    }
+  }
+  return sorted;
+}
+function buildInitialSoftComponents(hardConfig, softComponents) {
+  var _a, _b;
+  if (!softComponents || Object.keys(softComponents).length === 0) {
+    return {};
+  }
+  const hardComponentNames = new Set(Object.keys(hardConfig.components || {}));
+  try {
+    const sortedComponentNames = topologicalSort(
+      softComponents,
+      hardComponentNames
+    );
+    const buildingConfig = __spreadProps(__spreadValues({}, hardConfig), {
+      components: __spreadValues({}, hardConfig.components)
+    });
+    const componentConfigs = {};
+    for (const name of sortedComponentNames) {
+      const comp = softComponents[name];
+      const defaultVersion = comp.defaultVersion || Object.keys(comp.versions || {}).pop();
+      const versionedComponent = (_a = comp.versions) == null ? void 0 : _a[defaultVersion || ""];
+      const allVersions = Object.keys(comp.versions || {});
+      if (!versionedComponent) {
+        console.warn(
+          `Soft component "${name}" does not have a valid default version. Skipping.`
+        );
+        continue;
+      }
+      const newSoftComponentConfig = createVersionedComponentConfig(
+        name,
+        defaultVersion || "1.0.0",
+        allVersions,
+        buildingConfig,
+        // Pass the accumulating config
+        softComponents,
+        versionedComponent.defaultProps
+      );
+      componentConfigs[name] = newSoftComponentConfig;
+      buildingConfig.components[name] = newSoftComponentConfig;
+    }
+    return componentConfigs;
+  } catch (error) {
+    console.error("Error building soft components:", error);
+    console.warn("Falling back to unordered component building");
+    const componentConfigs = {};
+    for (const [name, comp] of Object.entries(softComponents)) {
+      const defaultVersion = comp.defaultVersion || Object.keys(comp.versions || {}).pop();
+      const versionedComponent = (_b = comp.versions) == null ? void 0 : _b[defaultVersion || ""];
+      const allVersions = Object.keys(comp.versions || {});
+      if (!versionedComponent) {
+        console.warn(
+          `Soft component "${name}" does not have a valid default version. Skipping.`
+        );
+        continue;
+      }
+      const newSoftComponentConfig = createVersionedComponentConfig(
+        name,
+        defaultVersion || "1.0.0",
+        allVersions,
+        hardConfig,
+        softComponents,
+        versionedComponent.defaultProps
+      );
+      componentConfigs[name] = newSoftComponentConfig;
+    }
+    return componentConfigs;
+  }
+}
+
+// src/puck/store/index.tsx
+var createSoftConfigStore = (hardConfig = {
+  components: {}
+}, softComponents = {}, overrides = {}) => create()(
+  subscribeWithSelector(
+    devtools((set, get) => ({
+      state: "ready",
+      originalHistory: [],
+      overrides,
+      storeHistory: (history) => set({ originalHistory: history }),
+      removeHistory: () => set({ originalHistory: [] }),
+      itemSelector: null,
+      setItemSelector: (selector) => set({ itemSelector: selector }),
+      originalItem: null,
+      setOriginalItem: (item) => set({ originalItem: item }),
+      softComponents: __spreadValues({}, softComponents),
+      softConfig: __spreadProps(__spreadValues({}, hardConfig), {
+        components: __spreadValues(__spreadValues({}, hardConfig.components), buildInitialSoftComponents(hardConfig, softComponents))
+      }),
+      setSoftComponent: (name, version, component) => {
+        set((state) => {
+          var _a;
+          return {
+            softComponents: __spreadProps(__spreadValues({}, state.softComponents), {
+              [name]: {
+                defaultVersion: version,
+                versions: __spreadProps(__spreadValues({}, ((_a = state.softComponents[name]) == null ? void 0 : _a.versions) || {}), {
+                  [version]: component
+                })
+              }
+            })
+          };
+        });
+      },
+      setSoftComponentDefaultVersion: (name, version) => {
+        var _a, _b, _c;
+        const softComponent = (_b = (_a = get().softComponents[name]) == null ? void 0 : _a.versions) == null ? void 0 : _b[version];
+        const allVersions = Object.keys(
+          ((_c = get().softComponents[name]) == null ? void 0 : _c.versions) || {}
+        );
+        if (!softComponent) {
+          throw new Error(
+            `Soft component "${name}" version "${version}" does not exist.`
+          );
+        }
+        const newSoftComponentConfig = createVersionedComponentConfig(
+          name,
+          version,
+          allVersions,
+          get().softConfig,
+          get().softComponents,
+          softComponent.defaultProps
+        );
+        set((state) => ({
+          softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
+            components: __spreadProps(__spreadValues({}, state.softConfig.components), {
+              [name]: newSoftComponentConfig
+            })
+          }),
+          softComponents: __spreadProps(__spreadValues({}, state.softComponents), {
+            [name]: __spreadProps(__spreadValues({}, state.softComponents[name]), {
+              defaultVersion: version
+            })
+          })
+        }));
+      },
+      removeSoftComponentVersion: (key, version) => {
+        set((state) => {
+          const component = state.softComponents[key];
+          if (!component) return {};
+          const newVersions = Object.fromEntries(
+            Object.entries(component.versions || {}).filter(
+              ([k, _]) => k !== version
+            )
+          );
+          let newDefaultVersion = component.defaultVersion;
+          if (component.defaultVersion === version) {
+            const versionKeys = Object.keys(newVersions);
+            newDefaultVersion = versionKeys.length > 0 ? versionKeys[versionKeys.length - 1] : "";
+          }
+          return {
+            softComponents: __spreadProps(__spreadValues({}, state.softComponents), {
+              [key]: __spreadProps(__spreadValues({}, component), {
+                versions: newVersions,
+                defaultVersion: newDefaultVersion
+              })
+            })
+          };
+        });
+      },
+      removeSoftComponent: (key) => {
+        set((state) => ({
+          softComponents: Object.fromEntries(
+            Object.entries(state.softComponents).filter(([k, _]) => k !== key)
+          )
+        }));
+      },
+      setSoftComponentConfig: (key, config, category) => {
+        set((state) => {
+          var _a;
+          return {
+            softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
+              components: __spreadProps(__spreadValues({}, state.softConfig.components), {
+                [key]: __spreadValues({}, config)
+              }),
+              categories: category && state.softConfig.categories ? __spreadProps(__spreadValues({}, state.softConfig.categories), {
+                [category]: __spreadProps(__spreadValues({}, state.softConfig.categories[category]), {
+                  components: [
+                    ...((_a = state.softConfig.categories[category]) == null ? void 0 : _a.components) || [],
+                    key
+                  ]
+                })
+              }) : state.softConfig.categories
+            })
+          };
+        });
+      },
+      removeSoftComponentConfig: (key) => {
+        set((state) => ({
+          softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
+            components: Object.fromEntries(
+              Object.entries(state.softConfig.components).filter(
+                ([k, _]) => k !== key
+              )
+            )
+          })
+        }));
+      },
+      setSoftCategoryConfig: (key, category) => {
+        set((state) => {
+          var _a;
+          return {
+            softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
+              categories: __spreadProps(__spreadValues({}, state.softConfig.categories), {
+                [key]: __spreadValues(__spreadValues({}, (_a = state.softConfig.categories) == null ? void 0 : _a[key]), category)
+              })
+            })
+          };
+        });
+      },
+      removeSoftCategoryConfig: (key) => {
+        set((state) => ({
+          softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
+            categories: Object.fromEntries(
+              Object.entries(state.softConfig.categories || {}).filter(
+                ([k, _]) => k !== key
+              )
+            )
+          })
+        }));
+      },
+      builder: createBuildersSlice(set, get, hardConfig)
+    }))
+  )
+);
+
+// src/puck/context/storeProvider.tsx
+import { useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var SoftConfigProvider = ({
+  children,
+  hardConfig,
+  softComponents,
+  overrides
+}) => {
+  const store = useMemo2(
+    () => createSoftConfigStore(hardConfig, softComponents, overrides),
+    [hardConfig, softComponents, overrides]
+  );
+  const [softConfig, setSoftConfig] = useState2(
+    () => store.getState().softConfig
+  );
+  const [internalSoftComponents, setSoftComponents] = useState2(
+    () => store.getState().softComponents
+  );
+  useEffect2(() => {
+    const unsubscribe = store.subscribe(() => {
+      setSoftConfig(store.getState().softConfig);
+      setSoftComponents(store.getState().softComponents);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [store]);
+  return /* @__PURE__ */ jsx7(appStoreContext.Provider, { value: store, children: children(softConfig, internalSoftComponents) });
+};
+
+// src/puck/actions/useBuild.tsx
+import { createUsePuck as createUsePuck2 } from "@measured/puck";
+
+// src/puck/lib/notify.ts
+var customHandler = null;
+var defaultHandler = (message, type) => {
+  if (type === "error") {
+    console.error(`[Error] ${message}`);
+  } else {
+    console.log(`[Success] ${message}`);
+  }
+};
+var setNotificationHandler = (handler) => {
+  customHandler = handler;
+};
+var notify = {
+  error: (message) => {
+    const handler = customHandler || defaultHandler;
+    handler(message, "error");
+  },
+  success: (message) => {
+    const handler = customHandler || defaultHandler;
+    handler(message, "success");
+  }
+};
+
+// src/puck/actions/useBuild.tsx
+var useCustomPuck2 = createUsePuck2();
+var useBuild = () => {
+  const build = useSoftConfig((s) => s.builder.build);
+  const history = useCustomPuck2((s) => s.history.histories);
+  const selectedItem = useCustomPuck2((s) => s.selectedItem);
+  const itemSelector = useCustomPuck2((s) => s.appState.ui.itemSelector);
+  const dispatch = useCustomPuck2((s) => s.dispatch);
+  const status = useSoftConfig((s) => s.state);
+  const handleBuild = () => {
+    if (status !== "ready") {
+      notify.error("Can only build when in ready state.");
+      return;
+    }
+    try {
+      build(history, selectedItem, itemSelector, dispatch);
+    } catch (error) {
+      console.error("Failed to build:", error);
+      notify.error(
+        "Failed to build: " + (error instanceof Error ? error.message : String(error))
+      );
+    }
+  };
+  return { handleBuild, canBuild: status === "ready" };
+};
+
+// src/puck/actions/useRemodel.tsx
+import { createUsePuck as createUsePuck3 } from "@measured/puck";
+var useCustomPuck3 = createUsePuck3();
+var useRemodel = () => {
+  const remodel = useSoftConfig((s) => s.builder.remodel);
+  const history = useCustomPuck3((s) => s.history.histories);
+  const selectedItem = useCustomPuck3((s) => s.selectedItem);
+  const itemSelector = useCustomPuck3((s) => s.appState.ui.itemSelector);
+  const dispatch = useCustomPuck3((s) => s.dispatch);
+  const status = useSoftConfig((s) => s.state);
+  const softComponents = useSoftConfig((s) => s.softComponents);
+  const handleRemodel = (componentName) => {
+    if (status !== "ready") {
+      notify.error("Can only remodel when in ready state.");
+      return;
+    }
+    const name = componentName || (selectedItem == null ? void 0 : selectedItem.type);
+    if (!name || !Object.keys(softComponents).includes(name)) {
+      notify.error("Selected component is not a soft component.");
+      return;
+    }
+    try {
+      remodel(history, selectedItem, itemSelector, dispatch);
+    } catch (error) {
+      console.error("Failed to remodel:", error);
+      notify.error(
+        "Failed to remodel: " + (error instanceof Error ? error.message : String(error))
+      );
+    }
+  };
+  const canRemodel = (componentName) => {
+    const name = componentName || (selectedItem == null ? void 0 : selectedItem.type);
+    return status === "ready" && name !== void 0 && Object.keys(softComponents).includes(name);
+  };
+  return { handleRemodel, canRemodel };
+};
+
+// src/puck/actions/useComplete.tsx
+import { createUsePuck as createUsePuck4 } from "@measured/puck";
+import { useState as useState3, useCallback } from "react";
+var useCustomPuck4 = createUsePuck4();
+var useComplete = () => {
+  const complete = useSoftConfig((s) => s.builder.complete);
+  const appState = useCustomPuck4((s) => s.appState);
+  const setHistories = useCustomPuck4((s) => s.history.setHistories);
+  const status = useSoftConfig((s) => s.state);
+  const [newComponent, setNewComponent] = useState3(null);
+  const handleComplete = useCallback(() => {
+    if (status === "ready") {
+      notify.error("Not building or remodeling a component.");
+      return null;
+    }
+    try {
+      const componentName = complete(appState, setHistories);
+      setNewComponent(componentName);
+      return componentName;
+    } catch (error) {
+      console.error("Failed to complete:", error);
+      notify.error(
+        "Failed to complete: " + (error instanceof Error ? error.message : String(error))
+      );
+      return null;
+    }
+  }, [complete, appState, setHistories, status]);
+  const canComplete = status === "building" || status === "remodeling";
+  return { handleComplete, canComplete, newComponent, setNewComponent };
+};
+
+// src/puck/actions/useCancel.tsx
+import { createUsePuck as createUsePuck5 } from "@measured/puck";
+var useCustomPuck5 = createUsePuck5();
+var useCancel = () => {
+  const cancel = useSoftConfig((s) => s.builder.cancel);
+  const setHistories = useCustomPuck5((s) => s.history.setHistories);
+  const status = useSoftConfig((s) => s.state);
+  const handleCancel = () => {
+    if (status === "ready") {
+      notify.error("Nothing to cancel.");
+      return;
+    }
+    try {
+      cancel(setHistories);
+    } catch (error) {
+      console.error("Failed to cancel:", error);
+      notify.error(
+        "Failed to cancel: " + (error instanceof Error ? error.message : String(error))
+      );
+    }
+  };
+  const canCancel = status === "building" || status === "remodeling";
+  return { handleCancel, canCancel };
+};
+
+// src/puck/actions/useInspect.tsx
+import { createUsePuck as createUsePuck6 } from "@measured/puck";
+import { useEffect as useEffect3 } from "react";
+var useCustomPuck6 = createUsePuck6();
+var useInspect = (componentName) => {
+  const inspect = useSoftConfig((s) => s.builder.inspect);
+  const dispatch = useCustomPuck6((s) => s.dispatch);
+  const status = useSoftConfig((s) => s.state);
+  useEffect3(() => {
+    if (status !== "inspecting") return;
+    if (!componentName) {
+      notify.error("No component to inspect.");
+      return;
+    }
+    try {
+      inspect(componentName, dispatch);
+    } catch (error) {
+      console.error("Failed to inspect:", error);
+      notify.error(
+        "Failed to inspect: " + (error instanceof Error ? error.message : String(error))
+      );
+    }
+  }, [status, componentName, inspect, dispatch]);
+};
+
+// src/puck/actions/useDecompose.tsx
+import { createUsePuck as createUsePuck7, walkTree as walkTree3 } from "@measured/puck";
+var useCustomPuck7 = createUsePuck7();
+var useDecompose = () => {
+  const decompose = useSoftConfig((s) => s.builder.decompose);
+  const appState = useCustomPuck7((s) => s.appState);
+  const dispatch = useCustomPuck7((s) => s.dispatch);
+  const selectedItem = useCustomPuck7((s) => s.selectedItem);
+  const status = useSoftConfig((s) => s.state);
+  const softComponents = useSoftConfig((s) => s.softComponents);
+  const config = useSoftConfig((s) => s.softConfig);
+  const handleDecompose = (componentData) => {
+    if (status !== "ready") {
+      notify.error("Can only decompose when in ready state.");
+      return;
+    }
+    const target = componentData || selectedItem;
+    if (!target) {
+      notify.error("No component selected to decompose.");
+      return;
+    }
+    const componentName = target.type;
+    if (!Object.keys(softComponents).includes(componentName)) {
+      notify.error("Selected component is not a soft component.");
+      return;
+    }
+    try {
+      const decomposedComponents = decompose(target);
+      if (!decomposedComponents || decomposedComponents.length === 0) {
+        notify.error("Nothing to decompose.");
+        return;
+      }
+      const newData = walkTree3(appState.data, config, (components) => {
+        const index = components.findIndex((c) => c.props.id === target.props.id);
+        if (index !== -1) {
+          components.splice(index, 1, ...decomposedComponents);
+        }
+        return components;
+      });
+      dispatch({
+        type: "setData",
+        data: newData
+      });
+    } catch (error) {
+      console.error("Failed to decompose:", error);
+      notify.error(
+        "Failed to decompose: " + (error instanceof Error ? error.message : String(error))
+      );
+    }
+  };
+  const canDecompose = (componentData) => {
+    const target = componentData || selectedItem;
+    return status === "ready" && target !== null && Object.keys(softComponents).includes((target == null ? void 0 : target.type) || "");
+  };
+  return { handleDecompose, canDecompose };
+};
+
+// src/puck/actions/useDemolish.tsx
+import { createUsePuck as createUsePuck8 } from "@measured/puck";
+var useCustomPuck8 = createUsePuck8();
+var useDemolish = () => {
+  const demolish = useSoftConfig((s) => s.builder.demolish);
+  const dispatch = useCustomPuck8((s) => s.dispatch);
+  const data = useCustomPuck8((s) => s.appState.data);
+  const status = useSoftConfig((s) => s.state);
+  const softComponents = useSoftConfig((s) => s.softComponents);
+  const handleDemolish = (componentName) => {
+    if (status !== "ready") {
+      notify.error("Can only demolish when in ready state.");
+      return;
+    }
+    if (!Object.keys(softComponents).includes(componentName)) {
+      notify.error("Component is not a soft component.");
+      return;
+    }
+    try {
+      demolish(componentName, data, dispatch);
+    } catch (error) {
+      console.error("Failed to demolish:", error);
+      notify.error(
+        "Failed to demolish: " + (error instanceof Error ? error.message : String(error))
+      );
+    }
+  };
+  const canDemolish = (componentName) => {
+    return status === "ready" && Object.keys(softComponents).includes(componentName);
+  };
+  return { handleDemolish, canDemolish };
+};
+
+// src/puck/actions/useSetDefaultVersion.tsx
+var useSetDefaultVersion = () => {
+  const setSoftComponentDefaultVersion = useSoftConfig(
+    (s) => s.setSoftComponentDefaultVersion
+  );
+  const softComponents = useSoftConfig((s) => s.softComponents);
+  const status = useSoftConfig((s) => s.state);
+  const handleSetDefaultVersion = (componentName, version) => {
+    if (status !== "ready") {
+      return;
+    }
+    if (!Object.keys(softComponents).includes(componentName)) {
+      return;
+    }
+    const component = softComponents[componentName];
+    if (!(component == null ? void 0 : component.versions[version])) {
+      return;
+    }
+    setSoftComponentDefaultVersion(componentName, version);
+  };
+  const canSetDefaultVersion = (componentName, version) => {
+    const component = softComponents[componentName];
+    return status === "ready" && component !== void 0 && component.versions[version] !== void 0 && component.defaultVersion !== version;
+  };
+  const getVersions = (componentName) => {
+    var _a;
+    return Object.keys(((_a = softComponents[componentName]) == null ? void 0 : _a.versions) || {});
+  };
+  const getDefaultVersion = (componentName) => {
+    var _a;
+    return (_a = softComponents[componentName]) == null ? void 0 : _a.defaultVersion;
+  };
+  return {
+    handleSetDefaultVersion,
+    canSetDefaultVersion,
+    getVersions,
+    getDefaultVersion
+  };
+};
+
+// src/puck/overrides/Header.tsx
+import { Button } from "@measured/puck";
+
+// src/puck/overrides/Header.module.css
+var Header_default = {};
+
+// src/puck/actions/usePublish.tsx
+import { createUsePuck as createUsePuck9 } from "@measured/puck";
+var useCustomPuck9 = createUsePuck9();
+var usePublish = () => {
+  const components = useSoftConfig((s) => s.softComponents);
+  const data = useCustomPuck9((s) => s.appState.data);
+  const status = useSoftConfig((s) => s.state);
+  const handlePublish = (publish) => {
+    if (status !== "ready") {
+      notify.error("Can only publish when in ready state.");
+      return;
+    }
+    if (!data) {
+      notify.error("No data to publish.");
+      return;
+    }
+    publish(data, components);
+  };
+  const canPublish = status === "ready";
+  return { handlePublish, canPublish };
+};
+
+// src/puck/overrides/Header.tsx
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+var getClassName2 = get_class_name_factory_default("Header", Header_default);
+var Header = ({
+  onPublish,
+  children
+}) => {
+  const { handleComplete, canComplete, newComponent, setNewComponent } = useComplete();
+  const { handleCancel, canCancel } = useCancel();
+  const { handlePublish } = usePublish();
+  useInspect(newComponent);
+  return /* @__PURE__ */ jsx8("div", { className: getClassName2(), children: canCancel ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
+    /* @__PURE__ */ jsx8(Button, { onClick: handleCancel, children: "Cancel" }),
+    /* @__PURE__ */ jsx8(
+      Button,
+      {
+        variant: "primary",
+        onClick: () => {
+          const name = handleComplete();
+          if (name) {
+            setNewComponent(name);
+          }
+        },
+        children: "Complete"
+      }
+    )
+  ] }) : children ? children : /* @__PURE__ */ jsx8(
+    Button,
+    {
+      variant: "primary",
+      onClick: () => {
+        if (onPublish) {
+          handlePublish(onPublish);
+        }
+      },
+      children: "Publish"
+    }
+  ) });
+};
+
+// src/puck/overrides/ActionBar.tsx
+import { ActionBar } from "@measured/puck";
+import { Combine, ComponentIcon, EditIcon } from "lucide-react";
+
+// src/puck/overrides/ActionBar.module.css
+var ActionBar_default = {};
+
+// src/puck/overrides/ActionBar.tsx
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+var getClassName3 = get_class_name_factory_default("ActionBar", ActionBar_default);
+var ActionBarOverride = (props) => {
+  const { handleBuild, canBuild } = useBuild();
+  const { handleRemodel, canRemodel } = useRemodel();
+  const { handleDecompose, canDecompose } = useDecompose();
+  const softComponents = useSoftConfig((s) => s.softComponents);
+  const status = useSoftConfig((s) => s.state);
+  const isSoftComponent2 = Object.keys(softComponents || {}).includes(props.label);
+  return /* @__PURE__ */ jsx9("div", { className: getClassName3(), children: /* @__PURE__ */ jsxs3(ActionBar, { children: [
+    /* @__PURE__ */ jsxs3(ActionBar.Group, { children: [
+      props.parentAction,
+      /* @__PURE__ */ jsx9(ActionBar.Label, { label: props.label })
+    ] }),
+    /* @__PURE__ */ jsxs3(ActionBar.Group, { children: [
+      status === "ready" ? isSoftComponent2 ? /* @__PURE__ */ jsxs3(Fragment4, { children: [
+        /* @__PURE__ */ jsx9(
+          ActionBar.Action,
+          {
+            onClick: () => handleRemodel(props.label),
+            label: "Remodel Soft Component",
+            children: /* @__PURE__ */ jsx9(EditIcon, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          ActionBar.Action,
+          {
+            onClick: () => handleDecompose(),
+            label: "Decompose Soft Component",
+            children: /* @__PURE__ */ jsx9(Combine, { size: 16 })
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx9(ActionBar.Action, { onClick: handleBuild, label: "Build Soft Component", children: /* @__PURE__ */ jsx9(ComponentIcon, { size: 16 }) }) : null,
+      props.children
+    ] })
+  ] }) });
+};
+
+// src/puck/overrides/ComponentItem.tsx
+import { useState as useState5 } from "react";
+import { Button as Button2, IconButton } from "@measured/puck";
+import { GripVertical, Check, X, Trash2, Cog } from "lucide-react";
+
+// src/puck/lib/confirm.ts
+var confirmHandler = (message) => {
+  return window.confirm(message);
+};
+var setConfirmHandler = (handler) => {
+  confirmHandler = handler;
+};
+var confirm = (message) => __async(null, null, function* () {
+  try {
+    const result = confirmHandler(message);
+    return result instanceof Promise ? yield result : result;
+  } catch (error) {
+    console.error("Confirm handler error:", error);
+    return false;
+  }
+});
+
+// src/puck/overrides/ComponentItem.module.css
+var ComponentItem_default = {};
+
+// src/puck/components/modal/index.tsx
+import { useEffect as useEffect4, useState as useState4 } from "react";
+import { createPortal } from "react-dom";
+
+// src/puck/components/modal/styles.module.css
+var styles_default2 = {};
+
+// src/puck/components/modal/index.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var getClassName4 = get_class_name_factory_default("Modal", styles_default2);
+var Modal = ({
+  children,
+  onClose,
+  isOpen
+}) => {
+  const [rootEl, setRootEl] = useState4(null);
+  useEffect4(() => {
+    setRootEl(document.getElementById("puck-portal-root"));
+  }, []);
+  if (!rootEl) {
+    return /* @__PURE__ */ jsx10("div", {});
+  }
+  return createPortal(
+    /* @__PURE__ */ jsx10("div", { className: getClassName4({ isOpen }), onClick: onClose, children: /* @__PURE__ */ jsx10(
+      "div",
+      {
+        className: getClassName4("inner"),
+        onClick: (e) => e.stopPropagation(),
+        children
+      }
+    ) }),
+    rootEl
+  );
+};
+
+// src/puck/overrides/ComponentItem.tsx
+import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+var getClassName5 = get_class_name_factory_default("ComponentItem", ComponentItem_default);
+var ComponentItem = (props) => {
+  const softComponents = new Set(
+    Object.keys(useSoftConfig((s) => s.softComponents))
+  );
+  const removeSoftComponentVersion = useSoftConfig(
+    (s) => s.removeSoftComponentVersion
+  );
+  const { handleDemolish } = useDemolish();
+  const { handleSetDefaultVersion, getVersions, getDefaultVersion } = useSetDefaultVersion();
+  const [isEditing, setIsEditing] = useState5(false);
+  const [isHovering, setIsHovering] = useState5(false);
+  const [selectedVersion, setSelectedVersion] = useState5("");
+  const [versionsToDelete, setVersionsToDelete] = useState5(
+    /* @__PURE__ */ new Set()
+  );
+  const [migrateVersionMap, setMigrateVersionMap] = useState5({});
+  const versions = getVersions(props.name);
+  const defaultVersion = getDefaultVersion(props.name);
+  const handleApply = () => __async(null, null, function* () {
+    if (selectedVersion && selectedVersion !== defaultVersion) {
+      handleSetDefaultVersion(props.name, selectedVersion);
+    }
+    if (versionsToDelete.size > 0) {
+      for (const version of versionsToDelete) {
+        const remaining = versions.filter((v) => !versionsToDelete.has(v));
+        if (remaining.length === 0) {
+          const shouldDemolish = yield confirm(
+            `Deleting all versions will remove "${props.name}" entirely. Continue?`
+          );
+          if (shouldDemolish) {
+            handleDemolish(props.name);
+          }
+          break;
+        } else {
+          removeSoftComponentVersion(props.name, version);
+        }
+      }
+    }
+    setIsEditing(false);
+    setSelectedVersion("");
+    setVersionsToDelete(/* @__PURE__ */ new Set());
+    setMigrateVersionMap({});
+  });
+  const handleCancel = () => {
+    setIsEditing(false);
+    setSelectedVersion("");
+    setVersionsToDelete(/* @__PURE__ */ new Set());
+    setMigrateVersionMap({});
+  };
+  const toggleVersionForDeletion = (version) => {
+    const newSet = new Set(versionsToDelete);
+    if (newSet.has(version)) {
+      newSet.delete(version);
+    } else {
+      newSet.add(version);
+    }
+    setVersionsToDelete(newSet);
+  };
+  const handleDemolishClick = () => __async(null, null, function* () {
+    const confirmed = yield confirm(
+      `Demolish "${props.name}" entirely? This will remove all versions.`
+    );
+    if (confirmed) {
+      handleDemolish(props.name);
+      setIsEditing(false);
+    }
+  });
+  if (softComponents.has(props.name)) {
+    const availableVersions = versions.filter((v) => !versionsToDelete.has(v));
+    return /* @__PURE__ */ jsxs4(Fragment5, { children: [
+      /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          className: getClassName5(),
+          onMouseEnter: () => setIsHovering(true),
+          onMouseLeave: () => setIsHovering(false),
+          children: [
+            /* @__PURE__ */ jsxs4("div", { className: getClassName5("content"), children: [
+              /* @__PURE__ */ jsx11("div", { className: getClassName5("name"), children: props.name }),
+              /* @__PURE__ */ jsxs4("div", { className: getClassName5("version"), children: [
+                "v",
+                defaultVersion
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs4("div", { className: getClassName5("actions"), children: [
+              isHovering && /* @__PURE__ */ jsx11("div", { className: getClassName5("settingsButton"), children: /* @__PURE__ */ jsx11(
+                IconButton,
+                {
+                  title: "Settings",
+                  variant: "secondary",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setIsEditing(true);
+                    setSelectedVersion(defaultVersion || "");
+                  },
+                  children: /* @__PURE__ */ jsx11(Cog, { size: 14 })
+                }
+              ) }),
+              /* @__PURE__ */ jsx11("div", { className: getClassName5("grip"), children: /* @__PURE__ */ jsx11(GripVertical, { size: 16 }) })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx11(Modal, { isOpen: isEditing, onClose: handleCancel, children: /* @__PURE__ */ jsxs4("div", { className: getClassName5("modal"), children: [
+        /* @__PURE__ */ jsxs4("div", { className: getClassName5("modalHeader"), children: [
+          /* @__PURE__ */ jsx11("h2", { className: getClassName5("modalTitle"), children: props.name }),
+          /* @__PURE__ */ jsx11("p", { className: getClassName5("modalSubtitle"), children: "Manage versions and settings" })
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { className: getClassName5("modalBody"), children: [
+          /* @__PURE__ */ jsxs4("div", { className: getClassName5("section"), children: [
+            /* @__PURE__ */ jsx11("h3", { className: getClassName5("sectionTitle"), children: "Versions" }),
+            /* @__PURE__ */ jsx11("div", { className: getClassName5("versionList"), children: versions.map((version) => {
+              const isDefault = version === (selectedVersion || defaultVersion);
+              const isMarkedForDeletion = versionsToDelete.has(version);
+              let rowClass = getClassName5("versionRow");
+              if (isDefault) rowClass += " " + getClassName5("versionRow--isDefault");
+              if (isMarkedForDeletion) rowClass += " " + getClassName5("versionRow--isMarkedForDeletion");
+              return /* @__PURE__ */ jsxs4(
+                "div",
+                {
+                  className: rowClass,
+                  children: [
+                    /* @__PURE__ */ jsxs4("div", { className: getClassName5("versionInfo"), children: [
+                      /* @__PURE__ */ jsxs4("span", { className: getClassName5("versionNumber"), children: [
+                        "Version ",
+                        version
+                      ] }),
+                      isDefault && /* @__PURE__ */ jsx11("span", { className: getClassName5("defaultBadge"), children: "Default" }),
+                      isMarkedForDeletion && /* @__PURE__ */ jsx11("span", { className: getClassName5("deleteBadge"), children: "Marked for deletion" })
+                    ] }),
+                    /* @__PURE__ */ jsxs4("div", { className: getClassName5("versionActions"), children: [
+                      !isDefault && !isMarkedForDeletion && /* @__PURE__ */ jsx11(
+                        Button2,
+                        {
+                          variant: "secondary",
+                          onClick: () => setSelectedVersion(version),
+                          children: "Set as Default"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx11(
+                        Button2,
+                        {
+                          variant: isMarkedForDeletion ? "secondary" : "secondary",
+                          onClick: () => toggleVersionForDeletion(version),
+                          children: isMarkedForDeletion ? /* @__PURE__ */ jsxs4(Fragment5, { children: [
+                            /* @__PURE__ */ jsx11(X, { size: 14 }),
+                            "Undo"
+                          ] }) : /* @__PURE__ */ jsxs4(Fragment5, { children: [
+                            /* @__PURE__ */ jsx11(Trash2, { size: 14 }),
+                            "Delete"
+                          ] })
+                        }
+                      )
+                    ] })
+                  ]
+                },
+                version
+              );
+            }) })
+          ] }),
+          versionsToDelete.size > 0 && availableVersions.length > 0 && /* @__PURE__ */ jsxs4("div", { className: getClassName5("section"), children: [
+            /* @__PURE__ */ jsx11("h3", { className: getClassName5("sectionTitle"), children: "Migration Settings" }),
+            /* @__PURE__ */ jsx11("p", { className: getClassName5("sectionDescription"), children: "Choose what to do with components using deleted versions" }),
+            /* @__PURE__ */ jsx11("div", { className: getClassName5("migrationOptions"), children: /* @__PURE__ */ jsxs4(
+              "select",
+              {
+                className: getClassName5("select"),
+                value: migrateVersionMap[Array.from(versionsToDelete)[0]] || "decompose",
+                onChange: (e) => {
+                  const newMap = __spreadValues({}, migrateVersionMap);
+                  versionsToDelete.forEach((v) => {
+                    newMap[v] = e.target.value;
+                  });
+                  setMigrateVersionMap(newMap);
+                },
+                children: [
+                  /* @__PURE__ */ jsx11("option", { value: "decompose", children: "Decompose to basic elements" }),
+                  availableVersions.map((v) => /* @__PURE__ */ jsxs4("option", { value: v, children: [
+                    "Migrate to Version ",
+                    v
+                  ] }, v))
+                ]
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { className: getClassName5("modalFooter"), children: [
+          /* @__PURE__ */ jsxs4("div", { className: getClassName5("footerLeft"), children: [
+            /* @__PURE__ */ jsxs4(Button2, { size: "medium", onClick: handleApply, children: [
+              /* @__PURE__ */ jsx11(Check, { size: 16 }),
+              "Apply Changes"
+            ] }),
+            /* @__PURE__ */ jsxs4(Button2, { size: "medium", variant: "secondary", onClick: handleCancel, children: [
+              /* @__PURE__ */ jsx11(X, { size: 16 }),
+              "Cancel"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx11("div", { className: getClassName5("footerRight"), children: /* @__PURE__ */ jsxs4(
+            Button2,
+            {
+              size: "medium",
+              variant: "secondary",
+              onClick: handleDemolishClick,
+              children: [
+                /* @__PURE__ */ jsx11(Trash2, { size: 16 }),
+                "Demolish Component"
+              ]
+            }
+          ) })
+        ] })
+      ] }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx11(Fragment5, { children: props.children });
+};
+
+// src/puck/lib/dissolve-all-soft-components.ts
+function extractDependencies2(softComponents, componentName, version) {
+  var _a, _b;
+  const dependencies = /* @__PURE__ */ new Set();
+  const component = (_b = (_a = softComponents[componentName]) == null ? void 0 : _a.versions) == null ? void 0 : _b[version];
+  if (!component) {
+    return dependencies;
+  }
+  const processSubComponents = (subComponents) => {
+    if (!Array.isArray(subComponents)) return;
+    for (const subComponent of subComponents) {
+      if (subComponent == null ? void 0 : subComponent.type) {
+        dependencies.add(subComponent.type);
+        if (subComponent.components) {
+          Object.values(subComponent.components).forEach((nestedComponents) => {
+            processSubComponents(nestedComponents);
+          });
+        }
+      }
+    }
+  };
+  processSubComponents(component.components);
+  return dependencies;
+}
+function reverseTopologicalSort(softComponents, hardComponentNames) {
+  const sorted = [];
+  const visiting = /* @__PURE__ */ new Set();
+  const visited = /* @__PURE__ */ new Set();
+  const dependencyGraph = /* @__PURE__ */ new Map();
+  const dependents = /* @__PURE__ */ new Map();
+  for (const [componentName, component] of Object.entries(softComponents)) {
+    const defaultVersion = component.defaultVersion || Object.keys(component.versions || {}).pop();
+    if (!defaultVersion) continue;
+    const allDeps = extractDependencies2(
+      softComponents,
+      componentName,
+      defaultVersion
+    );
+    const softDeps = new Set(
+      [...allDeps].filter((dep) => !hardComponentNames.has(dep))
+    );
+    dependencyGraph.set(componentName, softDeps);
+    for (const dep of softDeps) {
+      if (!dependents.has(dep)) {
+        dependents.set(dep, /* @__PURE__ */ new Set());
+      }
+      dependents.get(dep).add(componentName);
+    }
+  }
+  const depths = /* @__PURE__ */ new Map();
+  function calculateDepth(componentName) {
+    if (depths.has(componentName)) {
+      return depths.get(componentName);
+    }
+    const deps = dependencyGraph.get(componentName) || /* @__PURE__ */ new Set();
+    if (deps.size === 0) {
+      depths.set(componentName, 0);
+      return 0;
+    }
+    let maxDepth = -1;
+    for (const dep of deps) {
+      if (softComponents[dep]) {
+        maxDepth = Math.max(maxDepth, calculateDepth(dep));
+      }
+    }
+    const depth = maxDepth + 1;
+    depths.set(componentName, depth);
+    return depth;
+  }
+  for (const componentName of Object.keys(softComponents)) {
+    calculateDepth(componentName);
+  }
+  const sortedByDepth = [...depths.entries()].sort(([, depthA], [, depthB]) => depthB - depthA).map(([name]) => name);
+  return sortedByDepth;
+}
+function dissolveComponentRecursively(componentData, softComponents, hardComponentNames, depth = 0) {
+  const MAX_DEPTH = 50;
+  if (depth > MAX_DEPTH) {
+    console.error(
+      `Maximum dissolution depth (${MAX_DEPTH}) exceeded for component ${componentData.type}. Possible circular dependency.`
+    );
+    return [componentData];
+  }
+  const componentType = componentData.type;
+  if (!isSoftComponent(componentType, softComponents)) {
+    return [dissolveComponentSlots(componentData, softComponents, hardComponentNames, depth)];
+  }
+  let decomposed;
+  try {
+    decomposed = decomposeSoftComponent(componentData, softComponents);
+  } catch (error) {
+    console.warn(
+      `Failed to decompose soft component "${componentType}":`,
+      error
+    );
+    return [componentData];
+  }
+  const fullyDissolved = [];
+  for (const component of decomposed) {
+    const dissolved = dissolveComponentRecursively(
+      component,
+      softComponents,
+      hardComponentNames,
+      depth + 1
+    );
+    fullyDissolved.push(...dissolved);
+  }
+  return fullyDissolved;
+}
+function dissolveComponentSlots(componentData, softComponents, hardComponentNames, depth) {
+  const newProps = __spreadValues({}, componentData.props);
+  Object.entries(newProps).forEach(([key, value]) => {
+    var _a;
+    if (Array.isArray(value) && value.length > 0 && ((_a = value[0]) == null ? void 0 : _a.type)) {
+      newProps[key] = value.flatMap(
+        (slotComponent) => dissolveComponentRecursively(
+          slotComponent,
+          softComponents,
+          hardComponentNames,
+          depth
+        )
+      );
+    }
+  });
+  return __spreadProps(__spreadValues({}, componentData), {
+    props: newProps
+  });
+}
+function dissolveAllSoftComponents(data, softComponents, config) {
+  const hardComponentNames = new Set(
+    Object.keys(config.components || {}).filter(
+      (name) => !isSoftComponent(name, softComponents)
+    )
+  );
+  const dissolutionOrder = reverseTopologicalSort(
+    softComponents,
+    hardComponentNames
+  );
+  const dissolveComponents = (components) => {
+    return components.flatMap((componentData) => {
+      return dissolveComponentRecursively(
+        componentData,
+        softComponents,
+        hardComponentNames,
+        0
+      );
+    });
+  };
+  const newContent = dissolveComponents(data.content || []);
+  const newZones = {};
+  if (data.zones) {
+    Object.entries(data.zones).forEach(([zoneName, zoneComponents]) => {
+      newZones[zoneName] = dissolveComponents(zoneComponents);
+    });
+  }
+  const result = __spreadValues(__spreadProps(__spreadValues({}, data), {
+    content: newContent
+  }), data.zones && { zones: newZones });
+  return result;
+}
+function validateOnlyHardComponents(data, softComponents) {
+  const softComponentsFound = [];
+  const checkComponents = (components) => {
+    for (const component of components) {
+      if (isSoftComponent(component.type, softComponents)) {
+        softComponentsFound.push(component.type);
+      }
+      Object.values(component.props || {}).forEach((value) => {
+        var _a;
+        if (Array.isArray(value) && value.length > 0 && ((_a = value[0]) == null ? void 0 : _a.type)) {
+          checkComponents(value);
+        }
+      });
+    }
+  };
+  checkComponents(data.content || []);
+  if (data.zones) {
+    Object.values(data.zones).forEach((zoneComponents) => {
+      checkComponents(zoneComponents);
+    });
+  }
+  return {
+    isValid: softComponentsFound.length === 0,
+    softComponentsFound: [...new Set(softComponentsFound)]
+  };
+}
+
+// src/puck/lib/resolve-soft-config.ts
+var resolveSoftConfig = (data, softComponents, config) => {
+  const dissolved = dissolveAllSoftComponents(data, softComponents, config);
+  if (process.env.NODE_ENV === "development") {
+    const validation = validateOnlyHardComponents(dissolved, softComponents);
+    if (!validation.isValid) {
+      console.warn(
+        "Warning: Soft components still present after dissolution:",
+        validation.softComponentsFound
+      );
+    }
+  }
+  return dissolved;
+};
+export {
+  ActionBarOverride as ActionBar,
+  ComponentItem,
+  Header,
+  SoftConfigProvider,
+  confirm,
+  createSoftConfigStore,
+  createUseSoftConfig,
+  notify,
+  resolveSoftConfig,
+  setConfirmHandler,
+  setNotificationHandler,
+  useBuild,
+  useCancel,
+  useComplete,
+  useDecompose,
+  useDemolish,
+  useInspect,
+  useRemodel,
+  useSetDefaultVersion,
+  useSoftConfig
+};