@netlisian/softconfig 0.1.9 → 0.1.10

package/dist/puck/index.js

@@ -1,5 +1,6 @@
 'use client'
 "use strict";
+"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -69,7 +70,6 @@ var __async = (__this, __arguments, generator) => {
 var puck_exports = {};
 __export(puck_exports, {
   ActionBar: () => ActionBarOverride,
-  ComponentItem: () => ComponentItem,
   ComponentList: () => Drawer,
   Drawer: () => Drawer,
   DrawerItem: () => DrawerItem,
@@ -105,22 +105,45 @@ __export(puck_exports, {
 module.exports = __toCommonJS(puck_exports);
 
 // src/puck/store/index.tsx
-var import_zustand2 = require("zustand");
+var import_zustand = require("zustand");
 var import_middleware = require("zustand/middleware");
 
-// src/puck/store/slices/builder.tsx
-var import_puck4 = require("@measured/puck");
-
-// src/puck/lib/get-root-props.ts
-var getRootProps = (appState) => appState.data.root.props;
-
-// src/puck/lib/builder/root-config.tsx
-var import_react2 = require("react");
+// src/puck/lib/root-action-handler.ts
 var import_react_fast_compare2 = __toESM(require("react-fast-compare"));
-var import_puck2 = require("@measured/puck");
 
-// src/puck/lib/get-field-settings.tsx
-var import_puck = require("@measured/puck");
+// src/puck/lib/apply-mapping.ts
+var import_react_fast_compare = __toESM(require("react-fast-compare"));
+
+// src/puck/lib/set-prop-by-path.ts
+function setPropertyByPath(props, path, value) {
+  const parts = path.replace(/\[(\w+)\]/g, ".$1").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;
+}
+function setImmutablePropertyByPath(obj, path, value) {
+  if (!path) return value;
+  const parts = path.replace(/\[(\w+)\]/g, ".$1").split(".");
+  const root = Array.isArray(obj) ? [...obj] : __spreadValues({}, obj);
+  let current = root;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const part = parts[i];
+    const nextPart = parts[i + 1];
+    const isArrayNext = !isNaN(Number(nextPart));
+    if (current[part] === void 0 || current[part] === null) {
+      current[part] = isArrayNext ? [] : {};
+    } else {
+      current[part] = Array.isArray(current[part]) ? [...current[part]] : __spreadValues({}, current[part]);
+    }
+    current = current[part];
+  }
+  current[parts[parts.length - 1]] = value;
+  return root;
+}
 
 // src/puck/lib/get-settings-by-path.ts
 function getFieldSettingsByPath(fieldSettings, path) {
@@ -128,14 +151,6 @@ function getFieldSettingsByPath(fieldSettings, path) {
 }
 
 // src/puck/lib/array-field-utils.ts
-var primitiveFieldTypes = /* @__PURE__ */ new Set([
-  "text",
-  "textarea",
-  "number",
-  "select",
-  "radio",
-  "reference"
-]);
 var isPrimitiveValue = (value) => ["string", "number", "boolean"].includes(typeof value);
 var getFallbackValueForField = (type) => {
   switch (type) {
@@ -167,7 +182,6 @@ var resolveExpressionSummary = (item, index, expression) => {
   });
   return isValid ? result : "";
 };
-var isPrimitiveFieldType = (type) => primitiveFieldTypes.has(type);
 var buildArrayDefaultItemProps = (subFields = [], subFieldSettings = {}) => {
   if (!subFields.length) return void 0;
   const item = {};
@@ -220,486 +234,19 @@ var getArrayItemSubPath = (arrayPath) => {
   return match ? match[1] : null;
 };
 
-// src/puck/lib/custom-fields.ts
-var builtInSoftFieldTypes = /* @__PURE__ */ new Set([
-  "text",
-  "textarea",
-  "number",
-  "select",
-  "radio",
-  "array",
-  "object",
-  "reference"
-]);
-var warnedMessages = /* @__PURE__ */ new Set();
-var warnOnce = (message) => {
-  if (warnedMessages.has(message)) {
-    return;
-  }
-  warnedMessages.add(message);
-  console.warn(message);
-};
-var isBuiltInSoftFieldType = (fieldType) => {
-  return builtInSoftFieldTypes.has(fieldType);
-};
-var resolveCustomFieldDefinition = (fieldType, customFields) => {
-  if (isBuiltInSoftFieldType(fieldType)) {
-    return void 0;
-  }
-  return customFields == null ? void 0 : customFields[fieldType];
-};
-var resolveCustomFieldReturnType = (fieldType, customFields) => {
-  const customField = resolveCustomFieldDefinition(fieldType, customFields);
-  if (!customField) {
-    return null;
-  }
-  if (!customField.returnType) {
-    warnOnce(
-      `[soft-config] Custom field "${fieldType}" is missing a required returnType and will be skipped from mapping options.`
-    );
-    return null;
-  }
-  return customField.returnType;
-};
-var resolveCustomFieldSchema = (fieldType, customFields) => {
-  const customField = resolveCustomFieldDefinition(fieldType, customFields);
-  if (!customField) {
-    return null;
-  }
-  const returnType = resolveCustomFieldReturnType(fieldType, customFields);
-  if (!returnType) {
-    return null;
-  }
-  if (returnType !== "array" && returnType !== "object") {
-    return null;
-  }
-  const subFields = customField.subFields || [];
-  if (!subFields.length) {
-    warnOnce(
-      `[soft-config] Custom field "${fieldType}" returns ${returnType} but does not define subFields. It will be skipped from mapping options.`
-    );
-    return null;
-  }
-  return {
-    subFields,
-    subFieldSettings: customField.subFieldSettings || {}
-  };
-};
-var getCustomFieldTypeOptions = (customFields) => {
-  if (!customFields) {
-    return [];
-  }
-  return Object.entries(customFields).filter(([fieldType]) => !isBuiltInSoftFieldType(fieldType)).map(([fieldType, definition]) => ({
-    label: typeof definition.field.label === "string" && definition.field.label ? definition.field.label : fieldType,
-    value: fieldType
-  }));
-};
-var mapCustomReturnTypeToMappingType = (returnType) => {
-  switch (returnType) {
-    case "string":
-      return "textarea";
-    case "number":
-      return "number";
-    case "boolean":
-      return "select";
-    case "array":
-      return "array";
-    case "object":
-      return "object";
-    default:
-      return "textarea";
-  }
-};
-
-// src/puck/lib/get-field-settings.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var buildPuckField = (field, fieldSettings, customFields) => {
-  const customFieldDefinition = resolveCustomFieldDefinition(
-    field.type,
-    customFields
-  );
-  const customReturnType = resolveCustomFieldReturnType(field.type, customFields);
-  if (customFieldDefinition && customReturnType) {
-    return __spreadProps(__spreadValues({}, customFieldDefinition.field), {
-      type: "custom",
-      label: customFieldDefinition.field.label || field.name
-    });
-  }
-  const resolvedType = field.type;
-  switch (resolvedType) {
-    case "text":
-    case "textarea":
-      return { type: resolvedType, label: field.name };
-    case "number":
-      return {
-        type: resolvedType,
-        label: field.name,
-        min: fieldSettings == null ? void 0 : fieldSettings.min,
-        max: fieldSettings == null ? void 0 : fieldSettings.max,
-        step: fieldSettings == null ? void 0 : fieldSettings.step
-      };
-    case "select":
-    case "radio":
-      return {
-        type: resolvedType,
-        label: field.name,
-        options: (fieldSettings == null ? void 0 : fieldSettings.options) || []
-      };
-    case "array": {
-      const subFields = (fieldSettings == null ? void 0 : fieldSettings.subFields) || [];
-      const subFieldSettings = (fieldSettings == null ? void 0 : fieldSettings.subFieldSettings) || {};
-      return {
-        type: "array",
-        label: field.name,
-        min: fieldSettings == null ? void 0 : fieldSettings.min,
-        max: fieldSettings == null ? void 0 : fieldSettings.max,
-        arrayFields: buildDefaultEditorFields(
-          subFields,
-          subFieldSettings,
-          customFields
-        ),
-        defaultItemProps: buildArrayDefaultItemProps(subFields, subFieldSettings),
-        getItemSummary(item, index) {
-          return getArrayItemSummary(item, index, fieldSettings);
-        }
-      };
-    }
-    case "object":
-      return {
-        type: "object",
-        label: field.name,
-        objectFields: buildDefaultEditorFields(
-          (fieldSettings == null ? void 0 : fieldSettings.subFields) || [],
-          (fieldSettings == null ? void 0 : fieldSettings.subFieldSettings) || {},
-          customFields
-        )
-      };
-    default:
-      return { type: "text", label: field.name };
-  }
-};
-var buildDefaultEditorFields = (fields = [], fieldSettings = {}, customFields) => {
-  return fields.reduce((acc, field) => {
-    acc[field.name] = buildPuckField(
-      field,
-      fieldSettings[field.name],
-      customFields
-    );
-    return acc;
-  }, {});
-};
-var getFieldSettings = (_fields, _fieldSettings, customFields, deep) => {
-  const customTypeOptions = getCustomFieldTypeOptions(customFields);
-  return (_fields || []).reduce((fields, field) => {
-    const fieldSettings = {
-      // placeholder: { type: "text", label: "Placeholder" },
-    };
-    const currentFieldSettings = _fieldSettings == null ? void 0 : _fieldSettings[field.name];
-    const customFieldDefinition = resolveCustomFieldDefinition(
-      field.type,
-      customFields
-    );
-    const customReturnType = resolveCustomFieldReturnType(
-      field.type,
-      customFields
-    );
-    const resolvedType = field.type;
-    const customSchema = resolveCustomFieldSchema(field.type, customFields);
-    const resolvedSubFields = (customSchema == null ? void 0 : customSchema.subFields) || (currentFieldSettings == null ? void 0 : currentFieldSettings.subFields) || [];
-    const resolvedSubFieldSettings = (customSchema == null ? void 0 : customSchema.subFieldSettings) || (currentFieldSettings == null ? void 0 : currentFieldSettings.subFieldSettings) || {};
-    const customDefaultValueField = customFieldDefinition && customReturnType ? __spreadProps(__spreadValues({}, customFieldDefinition.field), {
-      type: "custom",
-      label: customFieldDefinition.field.label || "Default Value"
-    }) : null;
-    if (customDefaultValueField) {
-      fieldSettings.defaultValue = customDefaultValueField;
-    }
-    switch (resolvedType) {
-      case "text":
-      case "textarea":
-        if (!customDefaultValueField) {
-          fieldSettings.defaultValue = {
-            type: resolvedType,
-            label: "Default Value"
-          };
-        }
-        break;
-      case "number":
-        if (!customDefaultValueField) {
-          fieldSettings.defaultValue = {
-            type: resolvedType,
-            label: "Default Value"
-          };
-        }
-        fieldSettings.min = {
-          type: resolvedType,
-          label: "Minimum Value"
-        };
-        fieldSettings.max = {
-          type: resolvedType,
-          label: "Maximum Value"
-        };
-        fieldSettings.step = {
-          type: resolvedType,
-          label: "Step Size"
-        };
-        break;
-      case "radio":
-      case "select": {
-        const selectOptions = (currentFieldSettings == null ? void 0 : currentFieldSettings.options) || [];
-        if (!customDefaultValueField) {
-          fieldSettings.defaultValue = {
-            type: "custom",
-            label: "Default Value",
-            render: ({ value, onChange, id }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_puck.AutoField,
-              {
-                field: {
-                  type: resolvedType,
-                  label: "Default Value",
-                  options: selectOptions
-                },
-                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":
-      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"
-                },
-                ...customTypeOptions
-              ] : [
-                {
-                  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"
-                },
-                ...customTypeOptions
-              ]
-            }
-          },
-          getItemSummary(item, index) {
-            return item.name || `Field ${(index || 0) + 1}`;
-          }
-        };
-        if (!deep)
-          fieldSettings.subFieldSettings = {
-            type: "object",
-            label: "Sub Field Settings",
-            objectFields: resolvedSubFields ? getFieldSettings(
-              resolvedSubFields,
-              resolvedSubFieldSettings,
-              customFields,
-              true
-            ) : {}
-          };
-        if (resolvedType === "array") {
-          if (!customDefaultValueField) {
-            fieldSettings.defaultValue = {
-              type: "array",
-              label: "Default Items",
-              arrayFields: buildDefaultEditorFields(
-                resolvedSubFields,
-                resolvedSubFieldSettings,
-                customFields
-              ),
-              defaultItemProps: buildArrayDefaultItemProps(
-                resolvedSubFields,
-                resolvedSubFieldSettings
-              ),
-              getItemSummary(item, index) {
-                return getArrayItemSummary(item, index, currentFieldSettings);
-              }
-            };
-          }
-          fieldSettings.min = {
-            type: "number",
-            label: "Minimum Items"
-          };
-          fieldSettings.max = {
-            type: "number",
-            label: "Maximum Items"
-          };
-          fieldSettings.summary = {
-            type: "select",
-            label: "Summary",
-            options: [
-              {
-                label: "Default Numbering / Count",
-                value: "count"
-              },
-              {
-                label: "Field",
-                value: "field"
-              },
-              {
-                label: "Expression",
-                value: "expression"
-              }
-            ]
-          };
-          if ((currentFieldSettings == null ? void 0 : currentFieldSettings.summary) === "field") {
-            fieldSettings.summaryField = {
-              type: "select",
-              label: "Summary Field",
-              options: [
-                {
-                  label: "Select a field",
-                  value: ""
-                },
-                ...resolvedSubFields.filter((subField) => isPrimitiveFieldType(subField.type)).map((subField) => ({
-                  label: subField.name,
-                  value: subField.name
-                }))
-              ]
-            };
-          }
-          if ((currentFieldSettings == null ? void 0 : currentFieldSettings.summary) === "expression") {
-            fieldSettings.summaryExpression = {
-              type: "text",
-              label: "Summary Expression"
-            };
-          }
-        }
-        break;
-    }
-    const overriddenFieldSettings = (customFieldDefinition == null ? void 0 : customFieldDefinition.fieldSettingsOverride) ? customFieldDefinition.fieldSettingsOverride({
-      fieldName: field.name,
-      fieldType: field.type,
-      fieldSettings: currentFieldSettings,
-      originalFieldSettings: fieldSettings
-    }) : fieldSettings;
-    fields[field.name] = {
-      type: "object",
-      label: field.name,
-      objectFields: overriddenFieldSettings
-    };
-    return fields;
-  }, {});
-};
-var get_field_settings_default = getFieldSettings;
-
-// src/puck/context/useStore.ts
-var import_react = require("react");
-var import_zustand = require("zustand");
-var appStoreContext = (0, import_react.createContext)(null);
-var createUseSoftConfig = () => {
-  return function useSoftConfig2(selector, equalityFn) {
-    const context = (0, import_react.useContext)(appStoreContext);
-    if (!context) {
-      throw new Error(
-        "useSoftConfig must be used inside a SoftConfigProvider. Wrap your tree with <SoftConfigProvider value={store}>"
-      );
-    }
-    if (equalityFn) {
-      return (0, import_zustand.useStore)(context, selector, equalityFn);
-    }
-    return (0, import_zustand.useStore)(context, selector);
-  };
-};
-var useSoftConfig = createUseSoftConfig();
-var useSoftConfigStore = () => {
-  const context = (0, import_react.useContext)(appStoreContext);
-  if (!context) {
-    throw new Error(
-      "useSoftConfigStore must be used inside a SoftConfigProvider."
-    );
-  }
-  return context;
-};
-
 // src/puck/lib/apply-mapping.ts
-var import_react_fast_compare = __toESM(require("react-fast-compare"));
-
-// 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];
+var pathSegmentsCache = /* @__PURE__ */ new Map();
+var getPathSegments = (path) => {
+  let segments = pathSegmentsCache.get(path);
+  if (!segments) {
+    segments = path.split(".");
+    pathSegmentsCache.set(path, segments);
   }
-  cur[last] = value;
-}
-
-// src/puck/lib/apply-mapping.ts
+  return segments;
+};
 var resolveValueByPath = (source, path) => {
   if (!path) return source;
-  const segments = path.split(".");
+  const segments = getPathSegments(path);
   const resolveSegments = (current, index) => {
     if (current === null || current === void 0) return void 0;
     if (index >= segments.length) return current;
@@ -718,7 +265,7 @@ var resolveValueByPath = (source, path) => {
 };
 var resolveFieldSettingEntryByPath = (settings, path) => {
   if (!path) return void 0;
-  const segments = path.split(".");
+  const segments = getPathSegments(path);
   let currentSettings = settings;
   let currentEntry;
   for (const segmentWithArraySuffix of segments) {
@@ -736,11 +283,11 @@ var resolveFieldSettingEntryByPath = (settings, path) => {
 };
 function applyMapping(props, fieldSettings, map, resolveInput = "fieldSettings", options) {
   var _a, _b, _c;
-  const newProps = __spreadValues({}, props);
+  let newProps = props;
   const sourceProps = (_a = options == null ? void 0 : options.sourceProps) != null ? _a : props;
   const mappedArrayPaths = /* @__PURE__ */ new Set();
   let changed = false;
-  const changedArrayBases = /* @__PURE__ */ new Set();
+  const arrayRulesMap = /* @__PURE__ */ new Map();
   for (const entry of map) {
     const { from, to, transform } = entry;
     if (!from || !to) continue;
@@ -779,43 +326,21 @@ function applyMapping(props, fieldSettings, map, resolveInput = "fieldSettings",
     if (isSingleArrayTarget) {
       const toPath = toPaths[0];
       const arrayBase = getArrayBasePath(toPath);
-      const subProp = getArrayItemSubPath(toPath) || "";
       if (!arrayBase) continue;
-      const defaultArray = Array.isArray((_b = options == null ? void 0 : options.arrayDefaults) == null ? void 0 : _b[arrayBase]) ? (_c = options == null ? void 0 : options.arrayDefaults) == null ? void 0 : _c[arrayBase] : [];
-      const currentArrayAtPath = resolveValueByPath(newProps, arrayBase);
-      const currentArray = Array.isArray(currentArrayAtPath) ? currentArrayAtPath : [];
-      const isFromArrayPath = typeof fromPaths[0] === "string" && isArrayMappingPath(fromPaths[0]);
-      const sourceArray = isFromArrayPath ? Array.isArray(result) ? result : result !== void 0 ? [result] : [] : Array.isArray(result) ? result : defaultArray.map(() => result);
-      let defaults = entry.unmappedArrayItemDefaultValues || entry.defaultOverrides || {};
-      if (typeof defaults === "string") {
-        try {
-          defaults = JSON.parse(defaults);
-        } catch (e) {
-          defaults = {};
-        }
-      }
-      const targetLength = sourceArray.length;
-      const constructed = Array.from({ length: targetLength }).map((_, idx) => {
-        const mappedValue = sourceArray[idx];
-        const defaultItem = defaultArray[idx] && typeof defaultArray[idx] === "object" ? defaultArray[idx] : {};
-        const currentItem = currentArray[idx] && typeof currentArray[idx] === "object" ? currentArray[idx] : {};
-        const item = __spreadValues(__spreadValues(__spreadValues({}, defaultItem), defaults), currentItem);
-        if (subProp && mappedValue !== void 0) {
-          setPropertyByPath(item, subProp, mappedValue);
-        }
-        return item;
-      });
-      const originalArray = resolveValueByPath(newProps, arrayBase);
-      if (!(0, import_react_fast_compare.default)(originalArray, constructed)) {
-        setPropertyByPath(newProps, arrayBase, constructed);
-        changedArrayBases.add(arrayBase);
+      let rules = arrayRulesMap.get(arrayBase);
+      if (!rules) {
+        rules = [];
+        arrayRulesMap.set(arrayBase, rules);
       }
+      rules.push({ entry, toPath, fromPaths, result });
       mappedArrayPaths.add(arrayBase);
-    } else if (toPaths.length === 1 && Array.isArray(result) && toPaths[0].includes("array")) {
+      continue;
+    }
+    if (toPaths.length === 1 && Array.isArray(result) && toPaths[0].includes("array")) {
       const toPath = toPaths[0];
       const original = resolveValueByPath(newProps, toPath);
       if (!(0, import_react_fast_compare.default)(original, result)) {
-        setPropertyByPath(newProps, toPath, result);
+        newProps = setImmutablePropertyByPath(newProps, toPath, result);
         changed = true;
       }
     } else if (Array.isArray(result) && toPaths.length > 1) {
@@ -823,7 +348,7 @@ function applyMapping(props, fieldSettings, map, resolveInput = "fieldSettings",
         if (toPaths[idx]) {
           const orig = resolveValueByPath(newProps, toPaths[idx]);
           if (!(0, import_react_fast_compare.default)(orig, val)) {
-            setPropertyByPath(newProps, toPaths[idx], val);
+            newProps = setImmutablePropertyByPath(newProps, toPaths[idx], val);
             changed = true;
           }
         }
@@ -832,565 +357,231 @@ function applyMapping(props, fieldSettings, map, resolveInput = "fieldSettings",
       const finalValue = result;
       const originalValue = resolveValueByPath(newProps, toPaths[0]);
       if (!(0, import_react_fast_compare.default)(originalValue, finalValue)) {
-        setPropertyByPath(newProps, toPaths[0], finalValue);
+        newProps = setImmutablePropertyByPath(newProps, toPaths[0], finalValue);
         changed = true;
       }
     }
   }
-  const hasNetArrayChanges = Array.from(changedArrayBases).some(
-    (arrayBase) => !(0, import_react_fast_compare.default)(resolveValueByPath(props, arrayBase), resolveValueByPath(newProps, arrayBase))
-  );
-  return { newProps, mappedArrayPaths, changed: changed || hasNetArrayChanges };
-}
-
-// src/puck/lib/builder/root-config.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var useCustomPuck = (0, import_puck2.createUsePuck)();
-var getSerializableProps = (props) => {
-  const cleanProps = {
-    id: props.id
-  };
-  for (const key in props) {
-    const value = props[key];
-    if (["children", "puck", "editMode"].includes(key)) continue;
-    if (value && typeof value === "object" && value.$$typeof) continue;
-    if (typeof value === "function") continue;
-    cleanProps[key] = value;
-  }
-  return cleanProps;
-};
-var builderRootConfig = (config, overrides, editingComponent, showVersionFields = true, customFields) => {
-  const customTypeOptions = getCustomFieldTypeOptions(customFields);
-  return {
-    fields: __spreadValues({
-      _name: overrides.name || {
-        type: "text",
-        label: "Soft Component Name"
-      },
-      _category: overrides.categories || {
-        type: "select",
-        label: "Category",
-        options: [
-          ...Object.keys(config.categories || {}).map((cat) => {
-            var _a;
-            return {
-              label: ((_a = config.categories) == null ? void 0 : _a[cat].title) || cat,
-              value: cat
-            };
-          }) || [],
-          {
-            label: Object.keys(config.categories || {}).length ? "Other" : "Uncategorized",
-            value: void 0
+  for (const [arrayBase, rules] of arrayRulesMap.entries()) {
+    const defaultArray = Array.isArray((_b = options == null ? void 0 : options.arrayDefaults) == null ? void 0 : _b[arrayBase]) ? (_c = options == null ? void 0 : options.arrayDefaults) == null ? void 0 : _c[arrayBase] : [];
+    const currentArrayAtPath = resolveValueByPath(newProps, arrayBase);
+    const currentArray = Array.isArray(currentArrayAtPath) ? currentArrayAtPath : [];
+    let targetLength = 0;
+    const ruleSourceArrays = rules.map(({ entry, fromPaths, result }) => {
+      const isFromArrayPath = typeof fromPaths[0] === "string" && isArrayMappingPath(fromPaths[0]);
+      const sourceArray = isFromArrayPath ? Array.isArray(result) ? result : result !== void 0 ? [result] : [] : Array.isArray(result) ? result : defaultArray.map(() => result);
+      targetLength = Math.max(targetLength, sourceArray.length);
+      return sourceArray;
+    });
+    const constructed = Array.from({ length: targetLength }).map((_, idx) => {
+      const defaultItem = defaultArray[idx] && typeof defaultArray[idx] === "object" ? defaultArray[idx] : {};
+      const currentItem = currentArray[idx] && typeof currentArray[idx] === "object" ? currentArray[idx] : {};
+      let mergedDefaults = {};
+      for (const rule of rules) {
+        let ruleDefaults = rule.entry.unmappedArrayItemDefaultValues || rule.entry.defaultOverrides || {};
+        if (typeof ruleDefaults === "string") {
+          try {
+            ruleDefaults = JSON.parse(ruleDefaults);
+          } catch (e) {
           }
-        ]
-      },
-      _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" },
-              ...customTypeOptions
-            ]
+        }
+        mergedDefaults = __spreadValues(__spreadValues({}, mergedDefaults), ruleDefaults);
+      }
+      const baseItem = __spreadValues(__spreadValues({}, defaultItem), mergedDefaults);
+      let newItem = void 0;
+      for (const key of Object.keys(baseItem)) {
+        if (!(key in currentItem) && baseItem[key] !== void 0) {
+          if (!newItem) newItem = __spreadValues({}, currentItem);
+          if (newItem) {
+            newItem[key] = baseItem[key];
           }
         }
       }
-    }, overrides.additionalRootFields || {}),
-    resolveFields({ props: data }, { fields, changed }) {
-      const newFields = __spreadValues({}, fields);
-      const rootFields = Array.isArray(
-        data == null ? void 0 : data._fields
-      ) ? (data == null ? void 0 : data._fields) || [] : [];
-      const rootFieldSettings = (data == null ? void 0 : data._fieldSettings) || {};
-      if (changed._fields || changed._fieldSettings) {
-        if (rootFields.length) {
-          newFields._fieldSettings = {
-            type: "object",
-            label: "Field Settings",
-            objectFields: get_field_settings_default(
-              rootFields,
-              rootFieldSettings,
-              customFields
-            )
-          };
-        } else {
-          delete newFields._fieldSettings;
+      for (let i = 0; i < rules.length; i++) {
+        const { toPath } = rules[i];
+        const subProp = getArrayItemSubPath(toPath) || "";
+        const mappedValue = ruleSourceArrays[i][idx];
+        if (subProp && mappedValue !== void 0) {
+          const existingValue = resolveValueByPath(newItem || currentItem, subProp);
+          if (!(0, import_react_fast_compare.default)(existingValue, mappedValue)) {
+            newItem = setImmutablePropertyByPath(newItem || currentItem, subProp, mappedValue);
+          }
         }
       }
-      return newFields;
-    },
-    // resolveData: (props, params) => {
-    //   if (overrides.resolveRootData) {
-    //     return overrides.resolveRootData(props, params, { editingComponent });
-    //   }
-    //   const result: {
-    //     props: RootData<AsFieldProps<WithChildren<BuilderRootConfig>>>;
-    //     readOnly: Readonly<Record<string, boolean>> | undefined;
-    //   } = {
-    //     props,
-    //     readOnly: undefined,
-    //   };
-    //   return result;
-    // },
-    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);
-      (0, import_react2.useEffect)(() => {
-        if (!fieldSettings || Object.keys(fieldSettings).length === 0) return;
-        const replacements = [];
-        (0, import_puck2.walkTree)(
-          {
-            content: (data == null ? void 0 : data.content) || [],
-            root: (data == null ? void 0 : data.root) || {}
-          },
-          {
-            components: config.components
-          },
-          (content) => content.map((child) => {
-            var _a;
-            const map = ((_a = child.props) == null ? void 0 : _a._map) || [];
-            if (!map.length) return child;
-            const cleanProps = getSerializableProps(child.props);
-            const { newProps, changed } = applyMapping(
-              cleanProps,
-              fieldSettings,
-              map,
-              "fieldSettings"
-            );
-            if (!changed || (0, import_react_fast_compare2.default)(cleanProps, newProps)) return child;
-            replacements.push({
-              id: child.props.id,
-              data: __spreadProps(__spreadValues({}, child), { props: newProps })
-            });
-            return child;
-          })
-        );
-        if (!replacements.length) return;
-        replacements.forEach((replacement) => {
-          const itemSelector = getSelectorForId(replacement.id);
-          if (!itemSelector) return;
-          dispatch({
-            type: "replace",
-            data: replacement.data,
-            destinationIndex: itemSelector.index,
-            destinationZone: itemSelector.zone
-          });
-        });
-      }, [fieldSettings, data, dispatch, getSelectorForId]);
-      (0, import_react2.useEffect)(() => {
-        var _a;
-        if (state !== "remodeling" || !(props == null ? void 0 : props._version) || !(props == null ? void 0 : props._name)) return;
-        const currentVersion = props._version;
-        if (((_a = props._versions) == null ? void 0 : _a.includes(currentVersion)) && props._versions.length > 1) {
-          setVersion(props._name, currentVersion, props, dispatch);
+      return newItem !== void 0 ? newItem : currentItem;
+    });
+    let arrayChanged = currentArray.length !== constructed.length;
+    if (!arrayChanged) {
+      for (let i = 0; i < currentArray.length; i++) {
+        if (currentArray[i] !== constructed[i]) {
+          arrayChanged = true;
+          break;
         }
-      }, [props == null ? void 0 : props._version]);
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: props.children });
-    }
-  };
-};
-
-// src/puck/lib/builder/generate-field-options.ts
-var hasArrayMappingPath = (value) => value.includes("[]");
-var isBareArrayPath = (value) => !hasArrayMappingPath(value) && !value.includes(".");
-function filterToOptionsForFrom(fromPath, toOptions) {
-  if (!fromPath) return toOptions;
-  const fromHasArrayMapping = hasArrayMappingPath(fromPath);
-  const fromIsBareArray = isBareArrayPath(fromPath);
-  return toOptions.filter((option) => {
-    const optionHasArrayMapping = hasArrayMappingPath(option.value);
-    if (fromHasArrayMapping) {
-      return optionHasArrayMapping;
+      }
     }
-    if (fromIsBareArray) {
-      return isBareArrayPath(option.value);
+    if (arrayChanged) {
+      newProps = setImmutablePropertyByPath(newProps, arrayBase, constructed);
+      changed = true;
     }
-    return !optionHasArrayMapping;
-  });
-}
-function generateFieldOptions(fields, 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 (fld.type === "object" && fld.objectFields) {
-        recurse(fld.objectFields, path);
-      } else if (fld.type === "array" && fld.arrayFields) {
-        recurse(
-          fld.arrayFields,
-          path + "[]"
-        );
-      } else {
-        opts.push({ label: path, value: path, type: fld.type });
-      }
-    });
   }
-  recurse(fields, prefix);
-  return opts;
+  return { newProps, mappedArrayPaths, changed };
 }
-function generateDynamicFieldOptions(_fields, _fieldSettings, customFields, prefix = "") {
-  const opts = [];
-  if (!_fields) return opts;
-  function recurse(fields, fieldSettings, currentPrefix) {
-    fields.forEach((field) => {
-      var _a;
-      const settings = fieldSettings[field.name];
-      const customReturnType = resolveCustomFieldReturnType(
-        field.type,
-        customFields
-      );
-      const path = currentPrefix ? `${currentPrefix}.${field.name}` : field.name;
-      if (customReturnType) {
-        if (customReturnType === "array" || customReturnType === "object") {
-          const customSchema = resolveCustomFieldSchema(field.type, customFields);
-          if (!customSchema) {
-            return;
-          }
-          recurse(
-            customSchema.subFields,
-            customSchema.subFieldSettings,
-            path + (customReturnType === "array" ? "[]" : "")
-          );
-          return;
-        }
-        opts.push({
-          label: path,
-          value: path,
-          type: mapCustomReturnTypeToMappingType(customReturnType)
-        });
-        return;
-      }
-      if (!isBuiltInSoftFieldType(field.type)) {
-        return;
-      }
-      if ((_a = settings == null ? void 0 : settings.subFields) == null ? void 0 : _a.length) {
-        recurse(
-          settings.subFields,
-          settings.subFieldSettings || {},
-          path + (field.type === "array" ? "[]" : "")
-        );
-      } else if (field.type !== "array" && field.type !== "object") {
-        opts.push({ label: path, value: path, type: field.type });
+
+// src/puck/lib/root-action-handler.ts
+var currentGeneration = 0;
+function hasDefaultValueChanged(prev, curr) {
+  var _a, _b;
+  if (!prev && !curr) return false;
+  if (!prev || !curr) return true;
+  if (!(0, import_react_fast_compare2.default)(prev == null ? void 0 : prev.defaultValue, curr == null ? void 0 : curr.defaultValue)) return true;
+  if ((prev == null ? void 0 : prev.subFieldSettings) || (curr == null ? void 0 : curr.subFieldSettings)) {
+    const subKeys = /* @__PURE__ */ new Set([
+      ...Object.keys((prev == null ? void 0 : prev.subFieldSettings) || {}),
+      ...Object.keys((curr == null ? void 0 : curr.subFieldSettings) || {})
+    ]);
+    for (const subKey of subKeys) {
+      if (hasDefaultValueChanged(
+        (_a = prev == null ? void 0 : prev.subFieldSettings) == null ? void 0 : _a[subKey],
+        (_b = curr == null ? void 0 : curr.subFieldSettings) == null ? void 0 : _b[subKey]
+      )) {
+        return true;
       }
-    });
+    }
   }
-  recurse(_fields, _fieldSettings || {}, prefix);
-  return opts;
+  return false;
 }
-
-// src/puck/components/error-boundary/index.tsx
-var import_react3 = require("react");
-
-// src/puck/lib/get-class-name-factory.ts
-var import_classnames = __toESM(require("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}`] || "";
+var processReplacements = (appState, get, fieldSettings, changedKeys, zones, nodes) => __async(null, null, function* () {
+  var _a, _b;
+  const generation = ++currentGeneration;
+  yield new Promise((resolve) => setTimeout(resolve, 150));
+  if (generation !== currentGeneration) return;
+  const { puckDispatch, editableComponentIds } = get();
+  if (!puckDispatch) return;
+  if (changedKeys.size === 0) return;
+  const replacements = [];
+  const editableSet = new Set(editableComponentIds || []);
+  const hasEditableFilter = editableSet.size > 0;
+  const nodeEntries = Object.entries(nodes);
+  for (let i = 0; i < nodeEntries.length; i++) {
+    if (generation !== currentGeneration) return;
+    if (i > 0 && i % 50 === 0) {
+      yield new Promise((resolve) => setTimeout(resolve, 0));
+      if (generation !== currentGeneration) return;
     }
-    return "";
-  } else if (typeof options === "object") {
-    const modifiers = options;
-    const prefixedModifiers = {};
-    for (let modifier in modifiers) {
-      prefixedModifiers[styles[`${rootClass}--${modifier}`]] = modifiers[modifier];
+    const [id, node] = nodeEntries[i];
+    if (hasEditableFilter && !editableSet.has(id)) {
+      continue;
     }
-    const c = styles[rootClass];
-    return config.baseClass + (0, import_classnames.default)(__spreadValues({
-      [c]: !!c
-    }, prefixedModifiers));
-  } else {
-    return config.baseClass + styles[rootClass] || "";
-  }
-};
-var get_class_name_factory_default = getClassNameFactory;
-
-// css-module:/home/osamu/Documents/netlisian-soft/packages/soft-config/src/puck/components/error-boundary/styles.module.css#css-module
-var styles_module_default = { "ErrorBoundary": "_ErrorBoundary_1xl05_5", "ErrorBoundary-title": "_ErrorBoundary-title_1xl05_21", "ErrorBoundary-details": "_ErrorBoundary-details_1xl05_31", "ErrorBoundary-button": "_ErrorBoundary-button_1xl05_39" };
-
-// src/puck/components/error-boundary/index.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var getClassName = get_class_name_factory_default("ErrorBoundary", styles_module_default);
-var ErrorBoundary = class extends import_react3.Component {
-  constructor(props) {
-    super(props);
-    this.resetError = () => {
-      this.setState({
-        hasError: false,
-        error: null
-      });
-    };
-    this.state = {
-      hasError: false,
-      error: null
-    };
+    const map = ((_a = node.data.props) == null ? void 0 : _a._map) || [];
+    if (!map.length) continue;
+    let isAffected = false;
+    const flatProps = ((_b = node.flatData) == null ? void 0 : _b.props) || {};
+    for (const [flatKey, flatValue] of Object.entries(flatProps)) {
+      if (flatKey.includes("_map") && flatKey.includes("from") && typeof flatValue === "string") {
+        if (changedKeys.has(flatValue) || Array.from(changedKeys).some(
+          (ck) => flatValue.startsWith(ck + ".") || flatValue.startsWith(ck + "[")
+        )) {
+          isAffected = true;
+          break;
+        }
+      }
+    }
+    if (!isAffected) continue;
+    const { newProps } = applyMapping(
+      __spreadValues({}, node.data.props),
+      fieldSettings,
+      map,
+      "fieldSettings"
+    );
+    replacements.push({
+      id,
+      data: __spreadProps(__spreadValues({}, node.data), {
+        props: __spreadValues(__spreadValues({}, node.data.props), newProps)
+      })
+    });
   }
-  static getDerivedStateFromError(error) {
-    return {
-      hasError: true,
-      error
-    };
+  if (!replacements.length) return;
+  requestAnimationFrame(() => {
+    replacements.forEach((replacement) => {
+      var _a2;
+      const node = nodes[replacement.id];
+      if (!node) return;
+      const zoneName = `${node.parentId}:${node.zone}`;
+      const index = (_a2 = zones[zoneName]) == null ? void 0 : _a2.contentIds.indexOf(replacement.id);
+      if (index !== void 0 && index !== -1) {
+        puckDispatch({
+          type: "replace",
+          destinationIndex: index,
+          destinationZone: zoneName,
+          data: replacement.data,
+          ui: void 0
+        });
+      }
+    });
+  });
+});
+var processVersionChange = (rootProps, get, zones, nodes) => {
+  const currentVersion = rootProps._version;
+  const versions = rootProps._versions || [];
+  if (versions.includes(currentVersion) && versions.length > 1) {
+    const puckDispatch = get().puckDispatch;
+    if (puckDispatch) {
+      get().builder.setVersion(
+        rootProps._name,
+        currentVersion,
+        rootProps,
+        puckDispatch,
+        // Mock getItemBySelector using indexes
+        (selector) => {
+          var _a;
+          if (!selector.zone) return void 0;
+          const id = (_a = zones[selector.zone]) == null ? void 0 : _a.contentIds[selector.index];
+          return id ? nodes[id].data : void 0;
+        },
+        // Mock getSelectorForId using indexes
+        (id) => {
+          var _a;
+          const node = nodes[id];
+          if (!node) return void 0;
+          const index = (_a = zones[node.zone]) == null ? void 0 : _a.contentIds.indexOf(id);
+          return { zone: node.zone, index };
+        }
+      );
+    }
   }
-  componentDidCatch(error, errorInfo) {
-    console.error("Error caught by ErrorBoundary:", error, errorInfo);
+};
+var rootActionHandler = (set, get) => (action, appState, previousState) => {
+  const storeState = get().state;
+  if (storeState !== "building" && storeState !== "remodeling" || action.type !== "replaceRoot") {
+    return;
   }
-  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;
+  const { zones, nodes } = appState.indexes;
+  const rootProps = appState.data.root.props;
+  const previousRootProps = (previousState == null ? void 0 : previousState.data.root).props;
+  const fieldSettings = rootProps == null ? void 0 : rootProps._fieldSettings;
+  const previousFieldSettings = previousRootProps == null ? void 0 : previousRootProps._fieldSettings;
+  if (fieldSettings) {
+    const changedKeys = /* @__PURE__ */ new Set();
+    const allKeys = /* @__PURE__ */ new Set([
+      ...Object.keys(previousFieldSettings || {}),
+      ...Object.keys(fieldSettings || {})
+    ]);
+    for (const key of allKeys) {
+      if (hasDefaultValueChanged(previousFieldSettings == null ? void 0 : previousFieldSettings[key], fieldSettings == null ? void 0 : fieldSettings[key])) {
+        changedKeys.add(key);
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: getClassName(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: getClassName("title"), children: "Component Error" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("details", { className: getClassName("details"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("summary", { children: "Show error details" }),
-          this.state.error && this.state.error.toString()
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "button",
-          {
-            onClick: this.resetError,
-            className: getClassName("button"),
-            children: "Try Again"
-          }
-        )
-      ] });
     }
-    return this.props.children;
+    if (changedKeys.size > 0) {
+      processReplacements(appState, get, fieldSettings, changedKeys, zones, nodes);
+    }
+  }
+  if (storeState === "remodeling" && (rootProps == null ? void 0 : rootProps._version) && (rootProps == null ? void 0 : rootProps._name) && (rootProps == null ? void 0 : rootProps._version) !== (previousRootProps == null ? void 0 : previousRootProps._version)) {
+    processVersionChange(rootProps, get, zones, nodes);
   }
 };
 
-// src/puck/lib/builder/builder-config.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var builderConfig = (config, overrides, editingComponent, showVersionFields = true, dependents, customFields) => ({
-  root: builderRootConfig(
-    config,
-    overrides,
-    editingComponent,
-    showVersionFields,
-    customFields
-  ),
-  components: Object.entries(__spreadValues({}, config.components)).reduce(
-    (acc, [name, component]) => {
-      const tempComponent = __spreadProps(__spreadValues({}, component), {
-        permissions: {
-          insert: editingComponent !== name && !(dependents == null ? void 0 : dependents.has(name))
-        },
-        resolveFields(data, params) {
-          return __async(this, null, function* () {
-            var _a2;
-            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 _a3;
-                            return field.type === "slot" && !(((_a3 = data.props) == null ? void 0 : _a3._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 || params.changed._map) {
-              const rootProps = getRootProps(params.appState);
-              const fromOptions = generateDynamicFieldOptions(
-                (rootProps == null ? void 0 : rootProps._fields) || [],
-                (rootProps == null ? void 0 : rootProps._fieldSettings) || {},
-                customFields
-              );
-              const toOptionsFields = component.resolveFields && ((_a2 = data.props) == null ? void 0 : _a2._map) ? yield component.resolveFields(
-                __spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { _map: void 0 }) }),
-                params
-              ) : defaultFields;
-              const toOptions = generateFieldOptions(toOptionsFields);
-              fields._map = overrides.map ? {
-                type: "custom",
-                render: ({ value, onChange, id }) => {
-                  const rootProps2 = getRootProps(params.appState);
-                  return overrides.map({
-                    rootProps: rootProps2,
-                    value,
-                    onChange,
-                    id,
-                    props: data.props || {},
-                    fromOptions,
-                    toOptions
-                  });
-                }
-              } : (() => {
-                var _a3;
-                const mapEntries = ((_a3 = data.props) == null ? void 0 : _a3._map) || [];
-                const toPaths = mapEntries.flatMap(
-                  (entry) => Array.isArray(entry.to) ? entry.to : entry.to ? [entry.to] : []
-                );
-                const toPath = toPaths.find(
-                  (path) => typeof path === "string" && isArrayMappingPath(path)
-                );
-                const arrayBaseName = toPath ? getArrayBasePath(toPath) : null;
-                const targetArrayField = arrayBaseName ? defaultFields[arrayBaseName] : null;
-                const mappedSubProps = /* @__PURE__ */ new Set();
-                if (arrayBaseName) {
-                  toPaths.forEach((path) => {
-                    if (typeof path !== "string") return;
-                    if (getArrayBasePath(path) !== arrayBaseName) return;
-                    const subProp = getArrayItemSubPath(path);
-                    if (subProp) mappedSubProps.add(subProp);
-                  });
-                }
-                const defaultValueFields = {};
-                if (targetArrayField && targetArrayField.type === "array" && targetArrayField.arrayFields) {
-                  const arrayFields = targetArrayField.arrayFields;
-                  Object.entries(arrayFields).forEach(([key, fld]) => {
-                    if (mappedSubProps.has(key)) return;
-                    if (fld.type === "array" || fld.type === "object" || fld.type === "slot") return;
-                    defaultValueFields[key] = __spreadProps(__spreadValues({}, fld), { label: fld.label || key });
-                  });
-                }
-                const baseArrayFields = {
-                  from: {
-                    type: "select",
-                    label: "From",
-                    options: [
-                      { label: "Select a field", value: "" },
-                      ...fromOptions.map(({ label, value }) => ({
-                        label,
-                        value
-                      }))
-                    ]
-                  },
-                  to: {
-                    type: "select",
-                    label: "To",
-                    options: [
-                      { label: "Select a field", value: "" },
-                      ...toOptions.map(({ label, value }) => ({
-                        label,
-                        value
-                      }))
-                    ]
-                  }
-                };
-                if (arrayBaseName && Object.keys(defaultValueFields).length > 0) {
-                  baseArrayFields.unmappedArrayItemDefaultValues = {
-                    type: "object",
-                    label: "Default Item Values",
-                    objectFields: defaultValueFields
-                  };
-                }
-                return {
-                  type: "array",
-                  label: "Dynamic Field Map",
-                  arrayFields: baseArrayFields
-                };
-              })();
-            }
-            fields = __spreadValues(__spreadValues({}, fields), defaultFields);
-            return fields;
-          });
-        },
-        resolveData: ({ props }, { lastData }) => {
-          const _map = (props._map || []).map((item) => {
-            const newItem = __spreadValues({}, item);
-            if (typeof newItem.unmappedArrayItemDefaultValues === "string") {
-              try {
-                newItem.unmappedArrayItemDefaultValues = JSON.parse(
-                  newItem.unmappedArrayItemDefaultValues
-                );
-              } catch (e) {
-                newItem.unmappedArrayItemDefaultValues = {};
-              }
-            } else if (!newItem.unmappedArrayItemDefaultValues) {
-              newItem.unmappedArrayItemDefaultValues = {};
-            }
-            return newItem;
-          });
-          const readOnlyFields = _map.flatMap((item) => item.to);
-          const readOnlyArrayBases = readOnlyFields.filter((field) => typeof field === "string").map(getArrayBasePath).filter((base) => base !== null);
-          if (_map.length) {
-            return {
-              props: __spreadProps(__spreadValues({}, props), { _map }),
-              readOnly: [
-                ...readOnlyFields.map((f) => String(f)),
-                ...readOnlyArrayBases
-              ].reduce(
-                (acc2, field) => __spreadProps(__spreadValues({}, acc2), { [field]: true }),
-                {}
-              )
-            };
-          }
-          return {
-            props: __spreadProps(__spreadValues({}, props), { _map }),
-            readOnly: {}
-          };
-        },
-        render: (props) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorBoundary, { children: component.render(props) });
-        }
-      });
-      acc[name] = tempComponent;
-      return acc;
-    },
-    {}
-  ),
-  categories: config.categories || {}
-});
+// src/puck/store/slices/builder.tsx
+var import_puck2 = require("@measured/puck");
 
 // src/puck/lib/soft-component-constants.ts
 var TECHNICAL_KEYS = /* @__PURE__ */ new Set(["_map", "_slot", "id", "_version"]);
@@ -1414,6 +605,72 @@ var sanitizeComponent = (component, allowedTypes) => {
   });
 };
 
+// src/puck/lib/custom-fields.ts
+var builtInSoftFieldTypes = /* @__PURE__ */ new Set([
+  "text",
+  "textarea",
+  "number",
+  "select",
+  "radio",
+  "array",
+  "object",
+  "reference"
+]);
+var warnedMessages = /* @__PURE__ */ new Set();
+var warnOnce = (message) => {
+  if (warnedMessages.has(message)) {
+    return;
+  }
+  warnedMessages.add(message);
+  console.warn(message);
+};
+var isBuiltInSoftFieldType = (fieldType) => {
+  return builtInSoftFieldTypes.has(fieldType);
+};
+var resolveCustomFieldDefinition = (fieldType, customFields) => {
+  if (isBuiltInSoftFieldType(fieldType)) {
+    return void 0;
+  }
+  return customFields == null ? void 0 : customFields[fieldType];
+};
+var resolveCustomFieldReturnType = (fieldType, customFields) => {
+  const customField = resolveCustomFieldDefinition(fieldType, customFields);
+  if (!customField) {
+    return null;
+  }
+  if (!customField.returnType) {
+    warnOnce(
+      `[soft-config] Custom field "${fieldType}" is missing a required returnType and will be skipped from mapping options.`
+    );
+    return null;
+  }
+  return customField.returnType;
+};
+var resolveCustomFieldSchema = (fieldType, customFields) => {
+  const customField = resolveCustomFieldDefinition(fieldType, customFields);
+  if (!customField) {
+    return null;
+  }
+  const returnType = resolveCustomFieldReturnType(fieldType, customFields);
+  if (!returnType) {
+    return null;
+  }
+  if (returnType !== "array" && returnType !== "object") {
+    return null;
+  }
+  const subFields = customField.subFields || [];
+  if (!subFields.length) {
+    warnOnce(
+      `[soft-config] Custom field "${fieldType}" returns ${returnType} but does not define subFields. It will be skipped from mapping options.`
+    );
+    return null;
+  }
+  return {
+    subFields,
+    subFieldSettings: customField.subFieldSettings || {}
+  };
+};
+
 // src/puck/lib/soft-component-from-appstate.ts
 var getSubComponents = (content, componentConfigs, fieldSettings, slots) => {
   if (!content || !Array.isArray(content)) return [];
@@ -1569,8 +826,8 @@ var softComponentFromAppState = (appState, configComponents, editedItem, metadat
   var _a;
   const rootProps = ((_a = appState.data.root) == null ? void 0 : _a.props) || {};
   const fields = rootProps._fields || [];
-  const field_settings = rootProps._fieldSettings || {};
-  const normalizedFieldSettings = __spreadValues({}, field_settings);
+  const fieldSettings = rootProps._fieldSettings || {};
+  const normalizedFieldSettings = __spreadValues({}, fieldSettings);
   (fields || []).forEach((field) => {
     const customFieldDefinition = resolveCustomFieldDefinition(
       field.type,
@@ -1896,12 +1153,100 @@ var rootZone = "default-zone";
 var rootDroppableId = `${rootAreaId}:${rootZone}`;
 
 // src/puck/components/soft-render/index.tsx
-var import_react4 = __toESM(require("react"));
+var import_react2 = __toESM(require("react"));
 var import_react_fast_compare3 = __toESM(require("react-fast-compare"));
-var import_jsx_runtime5 = require("react/jsx-runtime");
+
+// src/puck/components/error-boundary/index.tsx
+var import_react = require("react");
+
+// src/puck/lib/get-class-name-factory.ts
+var import_classnames = __toESM(require("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 + (0, import_classnames.default)(__spreadValues({
+      [c]: !!c
+    }, prefixedModifiers));
+  } else {
+    return config.baseClass + styles[rootClass] || "";
+  }
+};
+var get_class_name_factory_default = getClassNameFactory;
+
+// css-module:/home/osamu/Documents/netlisian-soft/packages/soft-config/src/puck/components/error-boundary/styles.module.css#css-module
+var styles_module_default = { "ErrorBoundary": "_ErrorBoundary_1xl05_5", "ErrorBoundary-title": "_ErrorBoundary-title_1xl05_21", "ErrorBoundary-details": "_ErrorBoundary-details_1xl05_31", "ErrorBoundary-button": "_ErrorBoundary-button_1xl05_39" };
+
+// src/puck/components/error-boundary/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var getClassName = get_class_name_factory_default("ErrorBoundary", styles_module_default);
+var ErrorBoundary = class extends import_react.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: getClassName(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: getClassName("title"), children: "Component Error" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", { className: getClassName("details"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("summary", { children: "Show error details" }),
+          this.state.error && this.state.error.toString()
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            onClick: this.resetError,
+            className: getClassName("button"),
+            children: "Try Again"
+          }
+        )
+      ] });
+    }
+    return this.props.children;
+  }
+};
+
+// src/puck/components/soft-render/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function isPlainObject(val) {
   if (typeof val !== "object" || val === null) return false;
-  if (import_react4.default.isValidElement(val)) return false;
+  if (import_react2.default.isValidElement(val)) return false;
   if ("$$typeof" in val) return false;
   const proto = Object.getPrototypeOf(val);
   return proto === Object.prototype || proto === null;
@@ -1909,13 +1254,28 @@ function isPlainObject(val) {
 function cloneData(value) {
   if (value === null || value === void 0) return value;
   if (typeof value === "function") return value;
-  if (Array.isArray(value)) return value.map(cloneData);
+  if (Array.isArray(value))
+    return value.map(cloneData);
   if (!isPlainObject(value)) return value;
   return Object.fromEntries(
     Object.entries(value).map(([k, v]) => [k, cloneData(v)])
   );
 }
-var SubComponentRenderer = (0, import_react4.memo)(
+function shallowEqual(objA, objB) {
+  if (Object.is(objA, objB)) return true;
+  if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null)
+    return false;
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) return false;
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+}
+var SubComponentRenderer = (0, import_react2.memo)(
   ({
     subComponent,
     softComponentFields,
@@ -1927,11 +1287,11 @@ var SubComponentRenderer = (0, import_react4.memo)(
   }) => {
     const { id, puck, editMode } = props;
     const componentConfig = configComponents[subComponent == null ? void 0 : subComponent.type];
-    const stableId = (0, import_react4.useMemo)(
+    const stableId = (0, import_react2.useMemo)(
       () => depth === 0 ? id : `${subComponent.type}-${id}-d${depth}-i${index}`,
       [id, depth, subComponent.type, index]
     );
-    const finalProps = (0, import_react4.useMemo)(() => {
+    const finalProps = (0, import_react2.useMemo)(() => {
       var _a;
       if (!componentConfig) return {};
       const clonedProps = cloneData(subComponent.fixedProps || {});
@@ -1966,7 +1326,7 @@ var SubComponentRenderer = (0, import_react4.memo)(
               style
             }) => {
               var _a3, _b2;
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 SoftRender,
                 {
                   softComponentFields,
@@ -1993,7 +1353,7 @@ var SubComponentRenderer = (0, import_react4.memo)(
     ]);
     if (!componentConfig) return null;
     const ComponentRender = componentConfig.render;
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       ComponentRender,
       __spreadValues({
         id: stableId,
@@ -2002,17 +1362,14 @@ var SubComponentRenderer = (0, import_react4.memo)(
       }, finalProps)
     ) });
   },
-  // Custom comparator for SubComponentRenderer.
-  //
-  // Uses deep equality on subComponent (it may be a new reference even when
-  // semantically unchanged if the parent SoftRender array is reconstructed)
-  // and on props (the primary driver of field-mapping changes).
-  // configComponents and softComponentFields are treated as stable config
-  // references — reference equality is intentional and fast here.
-  (prev, next) => prev.depth === next.depth && prev.index === next.index && prev.configComponents === next.configComponents && prev.softComponentFields === next.softComponentFields && (0, import_react_fast_compare3.default)(prev.props, next.props) && (0, import_react_fast_compare3.default)(prev.subComponent, next.subComponent) && (0, import_react_fast_compare3.default)(prev.softComponentFieldSettings, next.softComponentFieldSettings)
+  (prev, next) => prev.depth === next.depth && prev.index === next.index && prev.configComponents === next.configComponents && prev.softComponentFields === next.softComponentFields && // Shallow compare: props may contain functions/React nodes; deep equality
+  // would risk retaining stale closures and is unnecessarily expensive here.
+  shallowEqual(prev.props, next.props) && // Deep compare: subComponent and fieldSettings are plain JSON configuration
+  // objects with no functions, so structural equality is safe and correct.
+  (0, import_react_fast_compare3.default)(prev.subComponent, next.subComponent) && (0, import_react_fast_compare3.default)(prev.softComponentFieldSettings, next.softComponentFieldSettings)
 );
 SubComponentRenderer.displayName = "SubComponentRenderer";
-var SoftRender = (0, import_react4.memo)(
+var SoftRender = (0, import_react2.memo)(
   ({
     softComponentFields,
     softComponentFieldSettings,
@@ -2022,9 +1379,9 @@ var SoftRender = (0, import_react4.memo)(
     depth = 0
   }) => {
     if (!(softSubComponent == null ? void 0 : softSubComponent.length)) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: softSubComponent.map((subComponent, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: softSubComponent.map((subComponent, index) => {
       var _a;
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         SubComponentRenderer,
         {
           subComponent,
@@ -2039,16 +1396,14 @@ var SoftRender = (0, import_react4.memo)(
       );
     }) });
   },
-  // Covers all five props — not just `props` and `softSubComponent`.
-  // configComponents / softComponentFields: reference equality (stable config).
-  // softComponentFieldSettings: deep equality (may carry dynamic defaults).
-  // props / softSubComponent: deep equality (primary render drivers).
-  (prev, next) => prev.configComponents === next.configComponents && prev.softComponentFields === next.softComponentFields && (0, import_react_fast_compare3.default)(prev.props, next.props) && (0, import_react_fast_compare3.default)(prev.softSubComponent, next.softSubComponent) && (0, import_react_fast_compare3.default)(prev.softComponentFieldSettings, next.softComponentFieldSettings)
+  (prev, next) => prev.configComponents === next.configComponents && prev.softComponentFields === next.softComponentFields && // Shallow compare: props may contain functions/React nodes; see shallowEqual.
+  shallowEqual(prev.props, next.props) && // Deep compare: softSubComponent and fieldSettings are plain JSON schemas.
+  (0, import_react_fast_compare3.default)(prev.softSubComponent, next.softSubComponent) && (0, import_react_fast_compare3.default)(prev.softComponentFieldSettings, next.softComponentFieldSettings)
 );
 SoftRender.displayName = "SoftRender";
 
 // src/puck/lib/create-versioned-component-config.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var hydrateCustomField = (fieldName, field, fieldSettings, customFields) => {
   var _a;
   if (field.type !== "custom") {
@@ -2106,7 +1461,7 @@ var createVersionedComponentConfig = (componentName, displayName, version, allVe
       var _a2;
       const selectedVersion = props.version || version;
       const versionedComponent = (_a2 = softComponents[componentName]) == null ? void 0 : _a2.versions[selectedVersion];
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         SoftRender,
         {
           softComponentFields: versionedComponent.fields,
@@ -2121,7 +1476,7 @@ var createVersionedComponentConfig = (componentName, displayName, version, allVe
 };
 
 // src/puck/lib/builder/sub-component-decomposer.tsx
-var subComponentDecomposer = (componentRootData, softSubComponent) => {
+var subComponentDecomposer = (componentRootData, softSubComponent, keepMapField) => {
   var _a;
   const resolvedProps = __spreadValues({}, softSubComponent.fixedProps);
   (_a = softSubComponent.map) == null ? void 0 : _a.forEach((mapItem) => {
@@ -2144,21 +1499,21 @@ var subComponentDecomposer = (componentRootData, softSubComponent) => {
   Object.entries(softSubComponent.components).forEach(
     ([slotKey, subComponents]) => {
       resolvedProps[slotKey] = subComponents.map(
-        (subComponent) => subComponentDecomposer(componentRootData, subComponent)
+        (subComponent) => subComponentDecomposer(componentRootData, subComponent, keepMapField)
       );
     }
   );
   const accItem = {
     type: softSubComponent.type,
-    props: __spreadProps(__spreadValues({}, resolvedProps), {
+    props: __spreadValues(__spreadProps(__spreadValues({}, resolvedProps), {
       id: generateId(softSubComponent.type)
-    })
+    }), keepMapField ? { _map: softSubComponent.map } : {})
   };
   return accItem;
 };
 
 // src/puck/lib/builder/resolve-soft-component-data.ts
-var resolveSoftComponentData = (props, _fieldSettings = {}) => {
+var resolveSoftComponentData = (props, _fieldSettings = {}, keepMapField) => {
   const map = props._map;
   if (!(map == null ? void 0 : map.length)) return __spreadValues({}, props);
   const { newProps } = applyMapping(
@@ -2167,11 +1522,16 @@ var resolveSoftComponentData = (props, _fieldSettings = {}) => {
     map,
     "propsFirst"
   );
+  if (keepMapField) {
+    return __spreadProps(__spreadValues({}, newProps), {
+      _map: map
+    });
+  }
   return newProps;
 };
 
 // src/puck/lib/decompose-soft-component.ts
-function decomposeSoftComponent(componentData, softComponents, fieldSettings) {
+function decomposeSoftComponent(componentData, softComponents, fieldSettings, keepMapField) {
   var _a, _b, _c, _d;
   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.");
@@ -2195,7 +1555,11 @@ function decomposeSoftComponent(componentData, softComponents, fieldSettings) {
   }
   const decomposedComponentData = softComponent.components.map(
     (softSubComponent) => {
-      return subComponentDecomposer(resolvedComponentData, softSubComponent);
+      return subComponentDecomposer(
+        resolvedComponentData,
+        softSubComponent,
+        keepMapField
+      );
     }
   );
   return decomposedComponentData;
@@ -2205,9 +1569,9 @@ function isSoftComponent(componentType, softComponents) {
 }
 
 // src/puck/lib/demolish-soft-component.ts
-var import_puck3 = require("@measured/puck");
+var import_puck = require("@measured/puck");
 function demolishSoftComponent(componentName, data, config, softComponents) {
-  const resolvedData = (0, import_puck3.walkTree)(data, config, (components) => {
+  const resolvedData = (0, import_puck.walkTree)(data, config, (components) => {
     components.forEach((componentData, index) => {
       if (componentData.type === componentName) {
         const decomposed = decomposeSoftComponent(componentData, softComponents);
@@ -2294,24 +1658,15 @@ var clearEditVisibility = (doc) => {
 };
 
 // src/puck/store/slices/builder.tsx
-var createBuildersSlice = (set, get, initialConfig) => ({
-  build: (history, selectedItem, itemSelector, puckDispatch, name) => {
-    if (!selectedItem || !itemSelector) {
-      throw new Error("No item selected to build from.");
-    }
-    const config = __spreadValues({}, get().softConfig);
-    const overrides = get().overrides;
-    const buildConfig = builderConfig(
-      config,
-      overrides,
-      void 0,
-      get().showVersionFields,
-      void 0,
-      get().customFields
-    );
+var createBuildersSlice = (set, get) => ({
+  build: (history, selectedItem, itemSelector, puckDispatch, name) => {
+    if (!selectedItem || !itemSelector) {
+      throw new Error("No item selected to build from.");
+    }
+    const config = get().softConfig;
     const editableIds = /* @__PURE__ */ new Set([selectedItem.props.id]);
     const initialContent = [__spreadValues({}, selectedItem)];
-    (0, import_puck4.walkTree)(
+    (0, import_puck2.walkTree)(
       {
         root: {},
         content: initialContent
@@ -2331,8 +1686,6 @@ var createBuildersSlice = (set, get, initialConfig) => ({
       })
     );
     set((s) => __spreadProps(__spreadValues({}, s), {
-      softConfig: buildConfig,
-      storedConfig: config,
       originalHistory: history,
       itemSelector: {
         index: itemSelector.index,
@@ -2342,28 +1695,24 @@ var createBuildersSlice = (set, get, initialConfig) => ({
       editableComponentIds: editableIds,
       state: "building"
     }));
-    requestAnimationFrame(
-      () => puckDispatch({
-        type: "set",
-        state: (previous) => {
-          var _a;
-          return {
-            ui: __spreadProps(__spreadValues({}, previous.ui), {
-              itemSelector: null
-            }),
-            data: __spreadProps(__spreadValues({}, previous.data), {
-              root: __spreadProps(__spreadValues({}, previous.data.root), {
-                props: __spreadProps(__spreadValues({}, (_a = previous.data.root) == null ? void 0 : _a.props), {
-                  _name: name || "New Soft Component"
-                })
-              })
-            })
-          };
-        }
-      })
-    );
+    requestAnimationFrame(() => {
+      puckDispatch({
+        type: "setUi",
+        ui: { itemSelector: null },
+        recordHistory: false
+      });
+      puckDispatch({
+        type: "replaceRoot",
+        root: {
+          props: {
+            _name: name || "New Soft Component"
+          }
+        },
+        recordHistory: false
+      });
+    });
   },
-  remodel: (history, selectedItem, itemSelector, puckDispatch) => {
+  remodel: (history, selectedItem, itemSelector, puckDispatch, refreshPermission) => {
     var _a, _b;
     if (!selectedItem || !itemSelector) {
       throw new Error("No item selected to build from.");
@@ -2383,7 +1732,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
         `Soft component "${softComponentName}" with version "${softComponentVersion}" not found.`
       );
     }
-    const { root, content } = softComponentToAppState(
+    const { root } = softComponentToAppState(
       softComponent,
       softComponentName,
       softComponentVersion,
@@ -2395,91 +1744,104 @@ var createBuildersSlice = (set, get, initialConfig) => ({
       softComponentMeta == null ? void 0 : softComponentMeta.category,
       get().customFields
     );
-    const config = __spreadValues({}, get().softConfig);
-    const overrides = get().overrides;
+    const config = get().softConfig;
     const dependents = get().dependencyGraph.get(softComponentName) || /* @__PURE__ */ new Set();
-    const buildConfig = builderConfig(
-      config,
-      overrides,
-      softComponentName,
-      get().showVersionFields,
-      dependents,
-      get().customFields
-    );
-    const editableIds = /* @__PURE__ */ new Set([]);
-    const decomposedComponents = get().builder.decompose(selectedItem);
-    (0, import_puck4.walkTree)(
-      { root: {}, content: decomposedComponents || [] },
+    const decomposedComponents = get().builder.decompose(selectedItem, true);
+    const editableIds = /* @__PURE__ */ new Set([decomposedComponents[0].props.id]);
+    const { content: decomposedComponentsWithId } = (0, import_puck2.walkTree)(
+      { root: {}, content: decomposedComponents },
       { components: config.components },
       (components) => {
-        components.forEach((comp) => {
-          editableIds.add(comp.props.id);
+        components.forEach((comp2) => {
+          const id2 = generateId(comp2.type);
+          comp2.props.id = id2;
+          editableIds.add(id2);
         });
         return components;
       }
     );
-    requestAnimationFrame(() => {
-      puckDispatch({
-        type: "set",
-        state: (previous) => ({
-          data: {
-            root: __spreadProps(__spreadValues({}, root), { _versions: versions }),
-            content: (0, import_puck4.walkTree)(
-              __spreadValues({}, previous.data),
-              __spreadValues({}, config),
-              (components) => {
-                const next = components.map((component) => __spreadProps(__spreadValues({}, component), {
-                  props: __spreadValues({}, component.props)
-                }));
-                const index = next.findIndex(
-                  (component) => component.props.id === selectedItem.props.id
-                );
-                if (index !== -1) {
-                  next.splice(
-                    index,
-                    1,
-                    ...decomposedComponents.map((component) => __spreadProps(__spreadValues({}, component), {
-                      props: __spreadValues({}, component.props)
-                    }))
-                  );
-                }
-                return next;
-              }
-            ).content
-          },
-          ui: __spreadProps(__spreadValues({}, previous.ui), {
-            itemSelector: null
-          })
-        })
-      });
-      setEditVisibility(get().iframeDoc, {
-        mode: "remodel",
-        editableIds
-      });
-    });
     set((s) => __spreadProps(__spreadValues({}, s), {
-      storedConfig: config,
-      softConfig: buildConfig,
       originalHistory: history,
       itemSelector: {
         index: itemSelector.index,
         zone: itemSelector.zone || rootDroppableId
       },
-      editingComponentId: selectedItem.props.id,
       editingComponent: softComponentName,
+      editingDependents: dependents,
       editableComponentIds: editableIds,
-      state: "remodeling"
+      state: "assessing"
     }));
-    requestAnimationFrame(
-      () => puckDispatch({
-        type: "replaceRoot",
-        root: {
-          title: root.props.title,
-          _name: root.props._name,
+    puckDispatch({
+      type: "remove",
+      index: itemSelector.index,
+      zone: itemSelector.zone || rootDroppableId,
+      recordHistory: false
+    });
+    const comp = decomposedComponentsWithId[0];
+    if (!comp) {
+      throw new Error("No decomposed components found.");
+    }
+    const id = comp.props.id;
+    puckDispatch({
+      type: "insert",
+      destinationIndex: itemSelector.index,
+      destinationZone: itemSelector.zone || rootDroppableId,
+      componentType: comp.type,
+      recordHistory: false,
+      id
+    });
+    requestAnimationFrame(() => {
+      var _a2;
+      const _map = ((_a2 = comp.props) == null ? void 0 : _a2._map) || [];
+      const readOnlyFields = _map.flatMap((item) => item.to);
+      const readOnlyArrayBases = readOnlyFields.filter((field) => typeof field === "string").map(getArrayBasePath).filter((base) => base !== null);
+      const readOnly = [
+        ...readOnlyFields.map((f) => String(f)),
+        ...readOnlyArrayBases
+      ].reduce((acc, field) => __spreadProps(__spreadValues({}, acc), { [field]: true }), {});
+      puckDispatch({
+        type: "replace",
+        destinationIndex: itemSelector.index,
+        destinationZone: itemSelector.zone || rootDroppableId,
+        data: __spreadProps(__spreadValues({}, comp), {
+          props: __spreadProps(__spreadValues({}, comp.props), {
+            id
+          }),
+          readOnly
+        }),
+        recordHistory: false
+      });
+      set((s) => __spreadProps(__spreadValues({}, s), {
+        state: "remodeling"
+      }));
+      setEditVisibility(get().iframeDoc, {
+        mode: "remodel",
+        editableIds: new Set(editableIds)
+      });
+    });
+    puckDispatch({
+      type: "replaceRoot",
+      root: {
+        props: __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, root.props), root.props.title !== void 0 && {
+          title: root.props.title
+        }), root.props._name !== void 0 && {
+          _name: root.props._name
+        }), root.props._category !== void 0 && {
           _category: root.props._category
-        }
-      })
-    );
+        }), {
+          _versions: versions
+        })
+      },
+      recordHistory: false
+    });
+    requestAnimationFrame(() => {
+      puckDispatch({
+        type: "setUi",
+        ui: { itemSelector: null },
+        recordHistory: false
+      });
+      refreshPermission();
+    });
   },
   complete: (appState, setHistories, getItemBySelector) => {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -2519,7 +1881,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
     }
     const storedHistories = get().originalHistory;
     setHistories([...storedHistories]);
-    const config = __spreadValues({}, get().softConfig || initialConfig);
+    const config = __spreadValues({}, get().softConfig);
     const mapComponentConfig = get().overrides.mapComponentConfig;
     const newSoftComponentConfig = mapComponentConfig ? mapComponentConfig(componentName, defaultSoftComponentConfig, rootProps) : defaultSoftComponentConfig;
     set((s) => {
@@ -2557,11 +1919,9 @@ var createBuildersSlice = (set, get, initialConfig) => ({
       }) : categories;
       return __spreadProps(__spreadValues({}, s), {
         softConfig: __spreadProps(__spreadValues({}, config), {
-          root: __spreadValues({}, initialConfig.root),
           components: nextComponents,
           categories: nextCategories
         }),
-        storedConfig: void 0,
         state: "inspecting",
         // Temporarily shift state to inspect() before finalizing back to ready
         originalHistory: []
@@ -2583,7 +1943,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
       softComponent: completedSoftComponent
     };
   },
-  inspect: (componentName, puckDispatch) => {
+  inspect: (componentName, puckDispatch, selectedItemSelector) => {
     if (get().state !== "inspecting") {
       throw new Error("Not in inspecting state.");
     }
@@ -2592,59 +1952,72 @@ var createBuildersSlice = (set, get, initialConfig) => ({
       throw new Error("No selector found for last item.");
     }
     const editableComponentId = get().editingComponentId;
+    const itemSelector = get().itemSelector;
     requestAnimationFrame(() => {
-      const config = get().softConfig;
-      const newComponent = config.components[componentName];
-      const reconstructedTree = (data) => (0, import_puck4.walkTree)(data, config, (components) => {
-        return components.map((comp) => {
-          if (comp.props.id === editableComponentId) {
-            return {
-              type: componentName,
-              props: __spreadProps(__spreadValues({}, newComponent.defaultProps), {
-                id: generateId(componentName)
-              })
-            };
-          }
-          return comp;
+      var _a;
+      if (editableComponentId && !Object.keys(get().softComponents).includes(
+        (_a = editableComponentId == null ? void 0 : editableComponentId.split(":")) == null ? void 0 : _a[0].split("-")[0]
+      )) {
+        requestAnimationFrame(() => {
+          puckDispatch({
+            type: "remove",
+            index: itemSelector.index,
+            zone: itemSelector.zone,
+            recordHistory: true
+          });
+          puckDispatch({
+            type: "insert",
+            destinationIndex: itemSelector.index,
+            destinationZone: itemSelector.zone,
+            componentType: componentName,
+            recordHistory: true
+          });
         });
-      });
-      puckDispatch({
-        type: "setData",
-        data: (data) => {
-          return reconstructedTree(data);
-        },
-        recordHistory: true
-        // Record this swap on the standard undo/redo stack
-      });
+      }
       clearEditVisibility(get().iframeDoc);
+      if (!selectedItemSelector && selector.index !== void 0) {
+        puckDispatch({
+          type: "setUi",
+          ui: { itemSelector: selector },
+          recordHistory: false
+        });
+      }
       set((s) => __spreadProps(__spreadValues({}, s), {
         state: "ready",
         setItemSelector: void 0,
         setOriginalItem: void 0,
+        itemSelector: null,
         editingComponent: null,
         editingComponentId: null,
         editableComponentIds: /* @__PURE__ */ new Set()
       }));
     });
   },
-  cancel: (setHistories) => {
+  cancel: (setHistories, puckDispatch, selectedItemSelector) => {
     const storedHistories = get().originalHistory;
+    const itemSelector = get().itemSelector;
     set((s) => __spreadProps(__spreadValues({}, s), {
       state: "cancelling"
     }));
     setHistories([...storedHistories]);
     requestAnimationFrame(() => {
       clearEditVisibility(get().iframeDoc);
+      if (!selectedItemSelector && itemSelector) {
+        puckDispatch({
+          type: "setUi",
+          ui: { itemSelector },
+          recordHistory: false
+        });
+      }
       set((s) => __spreadProps(__spreadValues({}, s), {
-        softConfig: get().storedConfig || initialConfig,
-        storedConfig: void 0,
         originalHistory: [],
         itemSelector: null,
         originalItem: null,
         state: "ready",
         editingComponent: null,
         editingComponentId: null,
-        editableComponentIds: /* @__PURE__ */ new Set()
+        editableComponentIds: /* @__PURE__ */ new Set(),
+        editingDependents: /* @__PURE__ */ new Set()
       }));
     });
   },
@@ -2691,11 +2064,16 @@ var createBuildersSlice = (set, get, initialConfig) => ({
     get().setSoftComponent(componentName, version, softComponent);
     return [newSoftComponentConfig, version];
   },
-  decompose: (componentData) => {
+  decompose: (componentData, keepMapField) => {
     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);
+    return decomposeSoftComponent(
+      componentData,
+      get().softComponents,
+      void 0,
+      keepMapField
+    );
   },
   demolish: (componentName, data, puckDispatch) => {
     if (get().state !== "ready") {
@@ -2716,7 +2094,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
       softConfig: result.config
     }));
   },
-  setVersion: (componentName, newVersion, currentProps, puckDispatch) => {
+  setVersion: (componentName, newVersion, currentProps, puckDispatch, getItemBySelector, getSelectorForId) => {
     var _a;
     if (get().state !== "remodeling") {
       throw new Error("Can only switch versions during remodeling.");
@@ -2743,12 +2121,91 @@ var createBuildersSlice = (set, get, initialConfig) => ({
       softComponentMeta == null ? void 0 : softComponentMeta.category,
       get().customFields
     );
-    puckDispatch({
-      type: "setData",
-      data: (previous) => __spreadProps(__spreadValues({}, previous), {
-        root: __spreadProps(__spreadValues({}, root), { props: __spreadProps(__spreadValues({}, root.props), { _versions: versions }) }),
-        content: content || []
-      })
+    const editableIds = get().editableComponentIds;
+    if (!editableIds || editableIds.size === 0) return;
+    const firstId = Array.from(editableIds)[0];
+    const itemSelector = getSelectorForId(firstId);
+    if (!itemSelector) return;
+    requestAnimationFrame(() => {
+      const countToRemove = Array.from(editableIds).filter(
+        (id) => {
+          var _a2;
+          return ((_a2 = getSelectorForId(id)) == null ? void 0 : _a2.zone) === itemSelector.zone;
+        }
+      ).length;
+      for (let i = 0; i < countToRemove; i++) {
+        puckDispatch({
+          type: "remove",
+          index: itemSelector.index,
+          zone: itemSelector.zone,
+          recordHistory: false
+        });
+      }
+      const newContent = content || [];
+      const comp = newContent[0];
+      if (comp) {
+        puckDispatch({
+          type: "insert",
+          destinationIndex: itemSelector.index,
+          destinationZone: itemSelector.zone,
+          componentType: comp.type,
+          recordHistory: false
+        });
+      }
+      requestAnimationFrame(() => {
+        if (comp) {
+          const insertedItem = getItemBySelector({
+            index: itemSelector.index,
+            zone: itemSelector.zone
+          });
+          if (insertedItem) {
+            puckDispatch({
+              type: "replace",
+              destinationIndex: itemSelector.index,
+              destinationZone: itemSelector.zone,
+              data: __spreadProps(__spreadValues({}, comp), {
+                props: __spreadProps(__spreadValues({}, comp.props), {
+                  id: insertedItem.props.id
+                })
+              }),
+              recordHistory: false
+            });
+          }
+        }
+        puckDispatch({
+          type: "replaceRoot",
+          root: {
+            props: __spreadProps(__spreadValues({}, root.props), {
+              _versions: versions
+            })
+          },
+          recordHistory: false
+        });
+        requestAnimationFrame(() => {
+          const newEditableIds = /* @__PURE__ */ new Set();
+          if (comp) {
+            const finalItem = getItemBySelector({
+              index: itemSelector.index,
+              zone: itemSelector.zone
+            });
+            if (finalItem) {
+              (0, import_puck2.walkTree)(
+                { root: {}, content: [finalItem] },
+                { components: get().softConfig.components },
+                (components) => {
+                  components.forEach((c) => newEditableIds.add(c.props.id));
+                  return components;
+                }
+              );
+            }
+          }
+          set((s) => __spreadProps(__spreadValues({}, s), { editableComponentIds: newEditableIds }));
+          setEditVisibility(get().iframeDoc, {
+            mode: "remodel",
+            editableIds: newEditableIds
+          });
+        });
+      });
     });
   }
 });
@@ -2965,7 +2422,7 @@ function buildInitialSoftComponents(hardConfig, softComponents, overrides, showV
 }
 
 // src/puck/store/index.tsx
-var createSoftConfigStore = (hardConfig = { components: {} }, softComponents = {}, overrides = {}, onActions, showVersionFields = true, customFields = {}) => {
+var createSoftConfigStore = (hardConfig = { components: {} }, softComponents = {}, overrides = {}, onActions, showVersionFields = true, customFields = {}, contentAreaNames) => {
   const normalizedSoftComponents = Object.fromEntries(
     Object.entries(softComponents || {}).filter(([key]) => !hardConfig.components || !hardConfig.components[key]).map(([key, value]) => [key, __spreadProps(__spreadValues({}, value), { name: value.name || key })])
   );
@@ -2977,7 +2434,7 @@ var createSoftConfigStore = (hardConfig = { components: {} }, softComponents = {
   const initialDependencyGraph = buildReverseDependencyGraph(
     hydratedSoftComponents
   );
-  return (0, import_zustand2.create)()(
+  return (0, import_zustand.create)()(
     (0, import_middleware.subscribeWithSelector)((set, get) => ({
       // ─── Initial State ──────────────────────────────────────────────────────
       state: "ready",
@@ -2995,6 +2452,11 @@ var createSoftConfigStore = (hardConfig = { components: {} }, softComponents = {
       softComponents: hydratedSoftComponents,
       dependencyGraph: initialDependencyGraph,
       showVersionFields,
+      contentAreaNames,
+      setContentAreaNames: (names) => set({ contentAreaNames: names }),
+      puckDispatch: null,
+      setPuckDispatch: (dispatch) => set({ puckDispatch: dispatch }),
+      rootActionHandler: rootActionHandler(set, get),
       // ─── Initial softConfig ─────────────────────────────────────────────────
       softConfig: __spreadProps(__spreadValues({}, hardConfig), {
         components: __spreadValues(__spreadValues({}, hardConfig.components), buildInitialSoftComponents(
@@ -3266,7 +2728,7 @@ var createSoftConfigStore = (hardConfig = { components: {} }, softComponents = {
         })
       })),
       // ─── Builder Slice ────────────────────────────────────────────────────────
-      builder: createBuildersSlice(set, get, hardConfig),
+      builder: createBuildersSlice(set, get),
       // ─── Dependency Graph ─────────────────────────────────────────────────────
       rebuildDependents: (componentName) => {
         const state = get();
@@ -3299,8 +2761,39 @@ var createSoftConfigStore = (hardConfig = { components: {} }, softComponents = {
 };
 
 // src/puck/context/storeProvider.tsx
-var import_react5 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react4 = require("react");
+
+// src/puck/context/useStore.ts
+var import_react3 = require("react");
+var import_zustand2 = require("zustand");
+var appStoreContext = (0, import_react3.createContext)(null);
+var createUseSoftConfig = () => {
+  return function useSoftConfig2(selector, equalityFn) {
+    const context = (0, import_react3.useContext)(appStoreContext);
+    if (!context) {
+      throw new Error(
+        "useSoftConfig must be used inside a SoftConfigProvider. Wrap your tree with <SoftConfigProvider value={store}>"
+      );
+    }
+    if (equalityFn) {
+      return (0, import_zustand2.useStore)(context, selector, equalityFn);
+    }
+    return (0, import_zustand2.useStore)(context, selector);
+  };
+};
+var useSoftConfig = createUseSoftConfig();
+var useSoftConfigStore = () => {
+  const context = (0, import_react3.useContext)(appStoreContext);
+  if (!context) {
+    throw new Error(
+      "useSoftConfigStore must be used inside a SoftConfigProvider."
+    );
+  }
+  return context;
+};
+
+// src/puck/context/storeProvider.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var SoftConfigProvider = ({
   children,
   hardConfig,
@@ -3309,27 +2802,25 @@ var SoftConfigProvider = ({
   overrides,
   value,
   onActions,
-  useVersioning = false
+  useVersioning = false,
+  contentAreaNames
 }) => {
-  const store = (0, import_react5.useMemo)(
+  const store = (0, import_react4.useMemo)(
     () => value != null ? value : createSoftConfigStore(
       hardConfig,
       softComponents,
       overrides,
       onActions,
       useVersioning,
-      customFields
+      customFields,
+      contentAreaNames
     ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [value]
-    // Intentionally omitting the rest: createSoftConfigStore params are
-    // treated as initialisation-time values. If callers need to react to
-    // prop changes they should pass a new `value` store instead.
   );
-  const [softConfig, setSoftConfig] = (0, import_react5.useState)(
+  const [softConfig, setSoftConfig] = (0, import_react4.useState)(
     () => store.getState().softConfig
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     let prev = store.getState().softConfig;
     const unsubscribe = store.subscribe((state) => {
       if (state.softConfig !== prev) {
@@ -3339,17 +2830,17 @@ var SoftConfigProvider = ({
     });
     return unsubscribe;
   }, [store]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(appStoreContext.Provider, { value: store, children: children(softConfig) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(appStoreContext.Provider, { value: store, children: children(softConfig) });
 };
 
 // src/puck/actions/useBuild.tsx
-var import_puck5 = require("@measured/puck");
+var import_puck3 = require("@measured/puck");
 
 // src/puck/lib/notify.ts
 var customHandler = null;
 var defaultHandler = (message, type) => {
   if (type === "error") {
-    console.error(`[Error] ${message}`);
+    alert(`[Error] ${message}`);
   } else {
     console.log(`[Success] ${message}`);
   }
@@ -3369,10 +2860,10 @@ var notify = {
 };
 
 // src/puck/hooks/useActionEvent.ts
-var import_react6 = require("react");
+var import_react5 = require("react");
 var useActionEvent = () => {
   const onActions = useSoftConfig((s) => s.onActions);
-  const triggerAction = (0, import_react6.useCallback)(
+  const triggerAction = (0, import_react5.useCallback)(
     (event) => __async(null, null, function* () {
       if (onActions) {
         try {
@@ -3388,13 +2879,13 @@ var useActionEvent = () => {
 };
 
 // src/puck/actions/useBuild.tsx
-var useCustomPuck2 = (0, import_puck5.createUsePuck)();
+var useCustomPuck = (0, import_puck3.createUsePuck)();
 var useBuild = (name) => {
   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 history = useCustomPuck((s) => s.history.histories);
+  const selectedItem = useCustomPuck((s) => s.selectedItem);
+  const itemSelector = useCustomPuck((s) => s.appState.ui.itemSelector);
+  const dispatch = useCustomPuck((s) => s.dispatch);
   const status = useSoftConfig((s) => s.state);
   const { triggerAction } = useActionEvent();
   const handleBuild = () => {
@@ -3413,7 +2904,7 @@ var useBuild = (name) => {
         });
       }
     } catch (error) {
-      console.error("Failed to build:", error);
+      alert("Failed to build: " + error);
       notify.error(
         "Failed to build: " + (error instanceof Error ? error.message : String(error))
       );
@@ -3423,17 +2914,17 @@ var useBuild = (name) => {
 };
 
 // src/puck/actions/useRemodel.tsx
-var import_puck6 = require("@measured/puck");
-var useCustomPuck3 = (0, import_puck6.createUsePuck)();
+var import_puck4 = require("@measured/puck");
+var useCustomPuck2 = (0, import_puck4.createUsePuck)();
 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 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 softComponents = useSoftConfig((s) => s.softComponents);
-  const refreshPermissions = useCustomPuck3((s) => s.refreshPermissions);
+  const refreshPermissions = useCustomPuck2((s) => s.refreshPermissions);
   const { triggerAction } = useActionEvent();
   const handleRemodel = (componentName) => {
     var _a, _b, _c;
@@ -3449,7 +2940,13 @@ var useRemodel = () => {
     const selectedVersion = ((_a = selectedItem == null ? void 0 : selectedItem.props) == null ? void 0 : _a.version) || ((_b = softComponents[name]) == null ? void 0 : _b.defaultVersion);
     const selectedSoftComponent = selectedVersion ? (_c = softComponents[name]) == null ? void 0 : _c.versions[selectedVersion] : void 0;
     try {
-      remodel(history, selectedItem, itemSelector, dispatch, refreshPermissions);
+      remodel(
+        history,
+        selectedItem,
+        itemSelector,
+        dispatch,
+        refreshPermissions
+      );
       void triggerAction({
         type: "remodel",
         payload: {
@@ -3467,9 +2964,9 @@ var useRemodel = () => {
       }
       return { id: name, version: selectedVersion };
     } catch (error) {
-      console.error("Failed to remodel:", error);
+      alert("Failed to remodel: " + error);
       notify.error(
-        "Failed to remodel: " + (error instanceof Error ? error.message : String(error))
+        "Failed to remodel: " + (error instanceof Error ? error.message : String(error)) + " " + String()
       );
       return null;
     }
@@ -3482,18 +2979,18 @@ var useRemodel = () => {
 };
 
 // src/puck/actions/useComplete.tsx
-var import_puck7 = require("@measured/puck");
-var import_react7 = require("react");
-var useCustomPuck4 = (0, import_puck7.createUsePuck)();
+var import_puck5 = require("@measured/puck");
+var import_react6 = require("react");
+var useCustomPuck3 = (0, import_puck5.createUsePuck)();
 var useComplete = () => {
   const complete = useSoftConfig((s) => s.builder.complete);
-  const appState = useCustomPuck4((s) => s.appState);
-  const setHistories = useCustomPuck4((s) => s.history.setHistories);
-  const getItemBySelector = useCustomPuck4((s) => s.getItemBySelector);
+  const appState = useCustomPuck3((s) => s.appState);
+  const setHistories = useCustomPuck3((s) => s.history.setHistories);
+  const getItemBySelector = useCustomPuck3((s) => s.getItemBySelector);
   const status = useSoftConfig((s) => s.state);
-  const [newComponent, setNewComponent] = (0, import_react7.useState)(null);
+  const [newComponent, setNewComponent] = (0, import_react6.useState)(null);
   const { triggerAction } = useActionEvent();
-  const handleComplete = (0, import_react7.useCallback)(() => {
+  const handleComplete = (0, import_react6.useCallback)(() => {
     if (status === "ready") {
       notify.error("Not building or remodeling a component.");
       return null;
@@ -3527,11 +3024,13 @@ var useComplete = () => {
 };
 
 // src/puck/actions/useCancel.tsx
-var import_puck8 = require("@measured/puck");
-var useCustomPuck5 = (0, import_puck8.createUsePuck)();
+var import_puck6 = require("@measured/puck");
+var useCustomPuck4 = (0, import_puck6.createUsePuck)();
 var useCancel = () => {
   const cancel = useSoftConfig((s) => s.builder.cancel);
-  const setHistories = useCustomPuck5((s) => s.history.setHistories);
+  const setHistories = useCustomPuck4((s) => s.history.setHistories);
+  const puckDispatch = useCustomPuck4((s) => s.dispatch);
+  const selectedItemSelector = useCustomPuck4((s) => s.appState.ui.itemSelector);
   const status = useSoftConfig((s) => s.state);
   const { triggerAction } = useActionEvent();
   const handleCancel = () => {
@@ -3540,13 +3039,13 @@ var useCancel = () => {
       return;
     }
     try {
-      cancel(setHistories);
+      cancel(setHistories, puckDispatch, selectedItemSelector);
       void triggerAction({
         type: "cancel",
         payload: {}
       });
     } catch (error) {
-      console.error("Failed to cancel:", error);
+      alert("Failed to cancel: " + error);
       notify.error(
         "Failed to cancel: " + (error instanceof Error ? error.message : String(error))
       );
@@ -3557,22 +3056,22 @@ var useCancel = () => {
 };
 
 // src/puck/actions/useInspect.tsx
-var import_puck9 = require("@measured/puck");
-var import_react8 = require("react");
-var useCustomPuck6 = (0, import_puck9.createUsePuck)();
+var import_puck7 = require("@measured/puck");
+var import_react7 = require("react");
+var useCustomPuck5 = (0, import_puck7.createUsePuck)();
 var useInspect = (component) => {
   const inspect = useSoftConfig((s) => s.builder.inspect);
-  const dispatch = useCustomPuck6((s) => s.dispatch);
+  const dispatch = useCustomPuck5((s) => s.dispatch);
   const status = useSoftConfig((s) => s.state);
   const { triggerAction } = useActionEvent();
-  (0, import_react8.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (status !== "inspecting") return;
     if (!component) {
       notify.error("No component to inspect.");
       return;
     }
     try {
-      inspect(component.id, dispatch);
+      inspect(component.id, dispatch, null);
       void triggerAction({
         type: "inspect",
         payload: {
@@ -3591,16 +3090,24 @@ var useInspect = (component) => {
 };
 
 // src/puck/actions/useDecompose.tsx
-var import_puck10 = require("@measured/puck");
-var useCustomPuck7 = (0, import_puck10.createUsePuck)();
+var import_puck8 = require("@measured/puck");
+
+// src/puck/lib/get-prop-by-path.ts
+function getPropertyByPath(props, path) {
+  return path.replace(/\[(\w+)\]/g, ".$1").split(".").reduce((o, key) => o ? o[key] : void 0, props);
+}
+
+// src/puck/actions/useDecompose.tsx
+var useCustomPuck6 = (0, import_puck8.createUsePuck)();
 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 appState = useCustomPuck6((s) => s.appState);
+  const dispatch = useCustomPuck6((s) => s.dispatch);
+  const selectedItem = useCustomPuck6((s) => s.selectedItem);
   const status = useSoftConfig((s) => s.state);
   const softComponents = useSoftConfig((s) => s.softComponents);
   const config = useSoftConfig((s) => s.softConfig);
+  const contentAreaNames = useSoftConfig((s) => s.contentAreaNames);
   const { triggerAction } = useActionEvent();
   const handleDecompose = (componentData) => {
     if (status !== "ready") {
@@ -3623,12 +3130,22 @@ var useDecompose = () => {
         notify.error("Nothing to decompose.");
         return;
       }
-      const newData = (0, import_puck10.walkTree)(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;
+      let newData = __spreadValues({}, appState.data);
+      const targetAreas = contentAreaNames && contentAreaNames.length > 0 ? contentAreaNames : ["content"];
+      targetAreas.forEach((path) => {
+        const contentArray = getPropertyByPath(newData, path) || [];
+        const walkedData = (0, import_puck8.walkTree)(
+          { content: contentArray, root: newData.root || {} },
+          config,
+          (components) => {
+            const index = components.findIndex((c) => c.props.id === target.props.id);
+            if (index !== -1) {
+              components.splice(index, 1, ...decomposedComponents);
+            }
+            return components;
+          }
+        );
+        setPropertyByPath(newData, path, walkedData.content);
       });
       dispatch({
         type: "setData",
@@ -3641,7 +3158,7 @@ var useDecompose = () => {
         }
       });
     } catch (error) {
-      console.error("Failed to decompose:", error);
+      alert("Failed to decompose: " + error);
       notify.error(
         "Failed to decompose: " + (error instanceof Error ? error.message : String(error))
       );
@@ -3655,12 +3172,12 @@ var useDecompose = () => {
 };
 
 // src/puck/actions/useDemolish.tsx
-var import_puck11 = require("@measured/puck");
-var useCustomPuck8 = (0, import_puck11.createUsePuck)();
+var import_puck9 = require("@measured/puck");
+var useCustomPuck7 = (0, import_puck9.createUsePuck)();
 var useDemolish = () => {
   const demolish = useSoftConfig((s) => s.builder.demolish);
-  const dispatch = useCustomPuck8((s) => s.dispatch);
-  const data = useCustomPuck8((s) => s.appState.data);
+  const dispatch = useCustomPuck7((s) => s.dispatch);
+  const data = useCustomPuck7((s) => s.appState.data);
   const status = useSoftConfig((s) => s.state);
   const softComponents = useSoftConfig((s) => s.softComponents);
   const { triggerAction } = useActionEvent();
@@ -3682,7 +3199,7 @@ var useDemolish = () => {
         }
       });
     } catch (error) {
-      console.error("Failed to demolish:", error);
+      alert("Failed to demolish: " + error);
       notify.error(
         "Failed to demolish: " + (error instanceof Error ? error.message : String(error))
       );
@@ -3743,17 +3260,17 @@ var useSetDefaultVersion = () => {
 };
 
 // src/puck/overrides/Header.tsx
-var import_puck13 = require("@measured/puck");
+var import_puck11 = require("@measured/puck");
 
 // css-module:/home/osamu/Documents/netlisian-soft/packages/soft-config/src/puck/overrides/Header.module.css#css-module
 var Header_module_default = { "Header": "_Header_19oj9_1" };
 
 // src/puck/actions/usePublish.tsx
-var import_puck12 = require("@measured/puck");
-var useCustomPuck9 = (0, import_puck12.createUsePuck)();
+var import_puck10 = require("@measured/puck");
+var useCustomPuck8 = (0, import_puck10.createUsePuck)();
 var usePublish = () => {
   const components = useSoftConfig((s) => s.softComponents);
-  const data = useCustomPuck9((s) => s.appState.data);
+  const data = useCustomPuck8((s) => s.appState.data);
   const status = useSoftConfig((s) => s.state);
   const { triggerAction } = useActionEvent();
   const handlePublish = (publish) => {
@@ -3784,7 +3301,7 @@ var usePublish = () => {
 };
 
 // src/puck/overrides/Header.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var getClassName2 = get_class_name_factory_default("Header", Header_module_default);
 var Header = ({
   onPublish,
@@ -3794,10 +3311,10 @@ var Header = ({
   const { handleCancel, canCancel } = useCancel();
   const { handlePublish } = usePublish();
   useInspect(newComponent);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName2(), children: canCancel ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_puck13.Button, { onClick: handleCancel, children: "Cancel" }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      import_puck13.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: getClassName2(), children: canCancel ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_puck11.Button, { onClick: handleCancel, children: "Cancel" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_puck11.Button,
       {
         variant: "primary",
         onClick: () => {
@@ -3809,8 +3326,8 @@ var Header = ({
         children: "Complete"
       }
     )
-  ] }) : children ? children : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_puck13.Button,
+  ] }) : children ? children : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_puck11.Button,
     {
       variant: "primary",
       onClick: () => {
@@ -3824,8 +3341,8 @@ var Header = ({
 };
 
 // src/puck/overrides/ActionBar.tsx
-var import_react9 = require("react");
-var import_puck14 = require("@measured/puck");
+var import_react8 = require("react");
+var import_puck12 = require("@measured/puck");
 var import_lucide_react = require("lucide-react");
 
 // css-module:/home/osamu/Documents/netlisian-soft/packages/soft-config/src/puck/overrides/ActionBar.module.css#css-module
@@ -3833,9 +3350,9 @@ var ActionBar_module_default = { "ActionBar": "_ActionBar_pvuie_5", "ActionBar-l
 
 // src/puck/overrides/ActionBar.tsx
 var import_shallow = require("zustand/shallow");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var useCustomPuck9 = (0, import_puck12.createUsePuck)();
 var getClassName3 = get_class_name_factory_default("ActionBar", ActionBar_module_default);
-var usePuck = (0, import_puck14.createUsePuck)();
 var ActionBarOverride = (props) => {
   var _a, _b;
   const { handleBuild } = useBuild(props.label ? props.label + " Soft Component" : "New Soft Component");
@@ -3844,12 +3361,13 @@ var ActionBarOverride = (props) => {
   const overrides = useSoftConfig((s) => s.overrides);
   const softComponents = useSoftConfig((s) => s.softComponents, import_shallow.shallow);
   const editableIds = useSoftConfig((s) => s.editableComponentIds);
-  const selectedItem = usePuck((s) => s.selectedItem);
-  const rootProps = usePuck((s) => s.appState.data.root.props);
+  const selectedItem = useCustomPuck9((s) => s.selectedItem);
+  const appState = useCustomPuck9((s) => s.appState);
+  const rootProps = appState.data.root.props;
   const status = useSoftConfig((s) => s.state);
-  const itemSelector = usePuck((s) => s.appState.ui.itemSelector);
+  const itemSelector = appState.ui.itemSelector;
   const softKeys = Object.keys(softComponents);
-  const key = (0, import_react9.useMemo)(() => {
+  const key = (0, import_react8.useMemo)(() => {
     const selectedType = selectedItem == null ? void 0 : selectedItem.type;
     if (selectedType && softKeys.includes(selectedType)) {
       return selectedType;
@@ -3870,42 +3388,42 @@ var ActionBarOverride = (props) => {
   const selectedId = (_a = selectedItem == null ? void 0 : selectedItem.props) == null ? void 0 : _a.id;
   const parentId = (_b = itemSelector == null ? void 0 : itemSelector.zone) == null ? void 0 : _b.split(":")[0];
   const isEditable = Boolean(selectedId && (editableIds.has(selectedId) || parentId && editableIds.has(parentId)));
-  const label = (0, import_react9.useMemo)(() => {
+  const label = (0, import_react8.useMemo)(() => {
     var _a2;
     if (isSoftComponent2) {
       return ((_a2 = softComponents[key]) == null ? void 0 : _a2.name) || componentLabelFromName(key, overrides);
     }
     return props.label || "";
   }, [isSoftComponent2, key, props.label, overrides, softComponents]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassName3(), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_puck14.ActionBar, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_puck14.ActionBar.Group, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: getClassName3(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_puck12.ActionBar, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_puck12.ActionBar.Group, { children: [
       props.parentAction,
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_puck14.ActionBar.Label, { label })
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_puck12.ActionBar.Label, { label })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_puck14.ActionBar.Group, { children: [
-      status === "ready" ? isSoftComponent2 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          import_puck14.ActionBar.Action,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_puck12.ActionBar.Group, { children: [
+      status === "ready" ? isSoftComponent2 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_puck12.ActionBar.Action,
           {
             onClick: () => handleRemodel(key),
             label: "Remodel Soft Component",
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.EditIcon, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.EditIcon, { size: 16 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          import_puck14.ActionBar.Action,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_puck12.ActionBar.Action,
           {
             onClick: () => handleDecompose(),
             label: "Decompose Soft Component",
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.Combine, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.Combine, { size: 16 })
           }
         )
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        import_puck14.ActionBar.Action,
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_puck12.ActionBar.Action,
         {
           onClick: handleBuild,
           label: "Build Soft Component",
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.ComponentIcon, { size: 16 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.ComponentIcon, { size: 16 })
         }
       ) : null,
       status !== "ready" && !isEditable ? null : props.children
@@ -3914,8 +3432,8 @@ var ActionBarOverride = (props) => {
 };
 
 // src/puck/overrides/DrawerItem.tsx
-var import_react11 = require("react");
-var import_puck15 = require("@measured/puck");
+var import_react10 = require("react");
+var import_puck13 = require("@measured/puck");
 var import_lucide_react2 = require("lucide-react");
 
 // src/puck/lib/confirm.ts
@@ -3930,7 +3448,7 @@ var confirm = (message) => __async(null, null, function* () {
     const result = confirmHandler(message);
     return result instanceof Promise ? yield result : result;
   } catch (error) {
-    console.error("Confirm handler error:", error);
+    alert("Confirm handler error: " + error);
     return false;
   }
 });
@@ -3939,25 +3457,25 @@ var confirm = (message) => __async(null, null, function* () {
 var DrawerItem_module_default = { "DrawerItem": "_DrawerItem_182aj_1", "DrawerItem--insertDisabled": "_DrawerItem--insertDisabled_182aj_14", "DrawerItem-content": "_DrawerItem-content_182aj_21", "DrawerItem-name": "_DrawerItem-name_182aj_31", "DrawerItem-version": "_DrawerItem-version_182aj_35", "DrawerItem-actions": "_DrawerItem-actions_182aj_40", "DrawerItem-settingsButton": "_DrawerItem-settingsButton_182aj_46", "DrawerItem-grip": "_DrawerItem-grip_182aj_56", "DrawerItem-modal": "_DrawerItem-modal_182aj_63", "DrawerItem-modalHeader": "_DrawerItem-modalHeader_182aj_71", "DrawerItem-modalTitle": "_DrawerItem-modalTitle_182aj_77", "DrawerItem-modalSubtitle": "_DrawerItem-modalSubtitle_182aj_84", "DrawerItem-modalBody": "_DrawerItem-modalBody_182aj_90", "DrawerItem-section": "_DrawerItem-section_182aj_100", "DrawerItem-sectionTitle": "_DrawerItem-sectionTitle_182aj_106", "DrawerItem-sectionDescription": "_DrawerItem-sectionDescription_182aj_113", "DrawerItem-versionList": "_DrawerItem-versionList_182aj_119", "DrawerItem-versionRow": "_DrawerItem-versionRow_182aj_125", "DrawerItem-versionRow--isDefault": "_DrawerItem-versionRow--isDefault_182aj_136", "DrawerItem-versionRow--isMarkedForDeletion": "_DrawerItem-versionRow--isMarkedForDeletion_182aj_141", "DrawerItem-versionInfo": "_DrawerItem-versionInfo_182aj_146", "DrawerItem-versionNumber": "_DrawerItem-versionNumber_182aj_153", "DrawerItem-defaultBadge": "_DrawerItem-defaultBadge_182aj_159", "DrawerItem-deleteBadge": "_DrawerItem-deleteBadge_182aj_170", "DrawerItem-versionActions": "_DrawerItem-versionActions_182aj_181", "DrawerItem-migrationOptions": "_DrawerItem-migrationOptions_182aj_187", "DrawerItem-migrationList": "_DrawerItem-migrationList_182aj_191", "DrawerItem-migrationOption": "_DrawerItem-migrationOption_182aj_187", "DrawerItem-migrationOption--isSelected": "_DrawerItem-migrationOption--isSelected_182aj_229", "DrawerItem-migrationOptionLabel": "_DrawerItem-migrationOptionLabel_182aj_234", "DrawerItem-modalFooter": "_DrawerItem-modalFooter_182aj_240", "DrawerItem-footerLeft": "_DrawerItem-footerLeft_182aj_250", "DrawerItem-footerRight": "_DrawerItem-footerRight_182aj_255" };
 
 // src/puck/components/modal/index.tsx
-var import_react10 = require("react");
+var import_react9 = require("react");
 var import_react_dom = require("react-dom");
 
 // css-module:/home/osamu/Documents/netlisian-soft/packages/soft-config/src/puck/components/modal/styles.module.css#css-module
 var styles_module_default2 = { "Modal": "_Modal_1t9ot_1", "Modal--isOpen": "_Modal--isOpen_1t9ot_29", "Modal-inner": "_Modal-inner_1t9ot_37" };
 
 // src/puck/components/modal/index.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var getClassName4 = get_class_name_factory_default("Modal", styles_module_default2);
 var Modal = ({
   children,
   onClose,
   isOpen
 }) => {
-  const [rootEl, setRootEl] = (0, import_react10.useState)(null);
-  (0, import_react10.useEffect)(() => {
+  const [rootEl, setRootEl] = (0, import_react9.useState)(null);
+  (0, import_react9.useEffect)(() => {
     setRootEl(document.getElementById("puck-portal-root"));
   }, []);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!isOpen) {
       return;
     }
@@ -3970,10 +3488,10 @@ var Modal = ({
     return () => document.removeEventListener("keydown", handleEscape);
   }, [isOpen, onClose]);
   if (!rootEl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", {});
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {});
   }
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {
         className: getClassName4({ isOpen }),
@@ -3982,7 +3500,7 @@ var Modal = ({
             onClose();
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
             className: getClassName4("inner"),
@@ -4000,16 +3518,16 @@ var Modal = ({
 
 // src/puck/overrides/DrawerItem.tsx
 var import_shallow2 = require("zustand/shallow");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var useCustomPuck10 = (0, import_puck13.createUsePuck)();
 var getClassName5 = get_class_name_factory_default("DrawerItem", DrawerItem_module_default);
-var usePuck2 = (0, import_puck15.createUsePuck)();
 var DrawerItem = (props) => {
   const componentMeta = useSoftConfig((s) => s.softComponents[props.name]);
   const displayName = props.label || (componentMeta == null ? void 0 : componentMeta.name) || props.name;
   const softComponents = new Set(
     Object.keys(useSoftConfig((s) => s.softComponents, import_shallow2.shallow))
   );
-  const getPermissions = usePuck2((s) => s.getPermissions);
+  const getPermissions = useCustomPuck10((s) => s.getPermissions);
   const insertAllowed = getPermissions({ type: props.name }).insert;
   const removeSoftComponentVersion = useSoftConfig(
     (s) => s.removeSoftComponentVersion
@@ -4017,13 +3535,13 @@ var DrawerItem = (props) => {
   const { handleDemolish } = useDemolish();
   const { handleSetDefaultVersion, getVersions, getDefaultVersion } = useSetDefaultVersion();
   const { triggerAction } = useActionEvent();
-  const [isEditing, setIsEditing] = (0, import_react11.useState)(false);
-  const [isHovering, setIsHovering] = (0, import_react11.useState)(false);
-  const [selectedVersion, setSelectedVersion] = (0, import_react11.useState)("");
-  const [versionsToDelete, setVersionsToDelete] = (0, import_react11.useState)(
+  const [isEditing, setIsEditing] = (0, import_react10.useState)(false);
+  const [isHovering, setIsHovering] = (0, import_react10.useState)(false);
+  const [selectedVersion, setSelectedVersion] = (0, import_react10.useState)("");
+  const [versionsToDelete, setVersionsToDelete] = (0, import_react10.useState)(
     /* @__PURE__ */ new Set()
   );
-  const [migrationTarget, setMigrationTarget] = (0, import_react11.useState)("decompose");
+  const [migrationTarget, setMigrationTarget] = (0, import_react10.useState)("decompose");
   const useVersioning = useSoftConfig((s) => s.showVersionFields);
   const versions = getVersions(props.name);
   const defaultVersion = getDefaultVersion(props.name);
@@ -4093,8 +3611,8 @@ var DrawerItem = (props) => {
         label: `Migrate to Version ${version}`
       }))
     ];
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "div",
         {
           className: getClassName5({ insertDisabled: !insertAllowed }),
@@ -4102,71 +3620,70 @@ var DrawerItem = (props) => {
           onMouseLeave: () => setIsHovering(false),
           children: [
             props.label,
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName5("content"), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName5("name"), children: displayName }),
-              useVersioning && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName5("version"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName5("content"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName5("name"), children: displayName }),
+              useVersioning && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName5("version"), children: [
                 "v",
                 defaultVersion
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName5("actions"), children: [
-              isHovering && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName5("settingsButton"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                import_puck15.IconButton,
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName5("actions"), children: [
+              isHovering && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName5("settingsButton"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                import_puck13.IconButton,
                 {
                   title: "Settings",
-                  variant: "secondary",
                   onClick: (e) => {
                     e.stopPropagation();
                     setIsEditing(true);
                     setSelectedVersion(defaultVersion || "");
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react2.Cog, { size: 12 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Cog, { size: 12 })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName5("grip"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react2.GripVertical, { size: 16 }) })
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName5("grip"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.GripVertical, { size: 16 }) })
             ] })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Modal, { isOpen: isEditing, onClose: handleCancel, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName5("modal"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName5("modalHeader"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h2", { className: getClassName5("modalTitle"), children: displayName }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: getClassName5("modalSubtitle"), children: "Component Settings" })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Modal, { isOpen: isEditing, onClose: handleCancel, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName5("modal"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName5("modalHeader"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { className: getClassName5("modalTitle"), children: displayName }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: getClassName5("modalSubtitle"), children: "Component Settings" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName5("modalBody"), children: useVersioning ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName5("section"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: getClassName5("sectionTitle"), children: "Versions" }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName5("versionList"), children: versions.map((version) => {
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName5("modalBody"), children: useVersioning ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName5("section"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: getClassName5("sectionTitle"), children: "Versions" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime11.jsxs)("div", { className: rowClass, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName5("versionInfo"), children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: getClassName5("versionNumber"), children: [
+              return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: rowClass, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName5("versionInfo"), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: getClassName5("versionNumber"), children: [
                     "Version ",
                     version
                   ] }),
-                  isDefault && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: getClassName5("defaultBadge"), children: "Default" }),
-                  isMarkedForDeletion && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: getClassName5("deleteBadge"), children: "Marked for deletion" })
+                  isDefault && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: getClassName5("defaultBadge"), children: "Default" }),
+                  isMarkedForDeletion && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: getClassName5("deleteBadge"), children: "Marked for deletion" })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName5("versionActions"), children: [
-                  !isDefault && !isMarkedForDeletion && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_puck15.Button, { variant: "secondary", onClick: () => setSelectedVersion(version), children: "Set as Default" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_puck15.Button, { variant: "secondary", onClick: () => toggleVersionForDeletion(version), children: isMarkedForDeletion ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react2.X, { size: 14 }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName5("versionActions"), children: [
+                  !isDefault && !isMarkedForDeletion && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_puck13.Button, { variant: "secondary", onClick: () => setSelectedVersion(version), children: "Set as Default" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_puck13.Button, { variant: "secondary", onClick: () => toggleVersionForDeletion(version), children: isMarkedForDeletion ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.X, { size: 14 }),
                     " Undo"
-                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react2.Trash2, { size: 14 }),
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Trash2, { size: 14 }),
                     " Delete"
                   ] }) })
                 ] })
               ] }, version);
             }) })
           ] }),
-          versionsToDelete.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName5("section"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: getClassName5("sectionTitle"), children: "Migration Settings" }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName5("migrationOptions"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          versionsToDelete.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName5("section"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: getClassName5("sectionTitle"), children: "Migration Settings" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName5("migrationOptions"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "div",
               {
                 className: getClassName5("migrationList"),
@@ -4174,7 +3691,7 @@ var DrawerItem = (props) => {
                 "aria-label": "Migration target",
                 children: migrationTargets.map((target) => {
                   const isSelected = migrationTarget === target.value;
-                  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                     "button",
                     {
                       "aria-label": target.label,
@@ -4184,8 +3701,8 @@ var DrawerItem = (props) => {
                       className: `${getClassName5("migrationOption")} ${isSelected ? getClassName5("migrationOption--isSelected") : ""}`,
                       onClick: () => setMigrationTarget(target.value),
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: getClassName5("migrationOptionLabel"), children: target.label }),
-                        isSelected && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react2.Check, { size: 14 })
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: getClassName5("migrationOptionLabel"), children: target.label }),
+                        isSelected && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Check, { size: 14 })
                       ]
                     },
                     target.value
@@ -4193,49 +3710,48 @@ var DrawerItem = (props) => {
                 })
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: getClassName5("helpText"), children: "Choose where to move existing instances of the deleted versions." })
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: getClassName5("helpText"), children: "Choose where to move existing instances of the deleted versions." })
           ] })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName5("section"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { children: [
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName5("section"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { children: [
           "Manage high-level settings for the ",
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { children: displayName }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: displayName }),
           " component."
         ] }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName5("modalFooter"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName5("footerLeft"), children: [
-            useVersioning ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_puck15.Button, { size: "medium", onClick: handleApply, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react2.Check, { size: 16 }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName5("modalFooter"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName5("footerLeft"), children: [
+            useVersioning ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_puck13.Button, { size: "medium", onClick: handleApply, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Check, { size: 16 }),
               " Apply Changes"
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_puck15.Button, { size: "medium", onClick: handleCancel, children: "Close" }),
-            useVersioning && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_puck15.Button, { size: "medium", variant: "secondary", onClick: handleCancel, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react2.X, { size: 16 }),
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_puck13.Button, { size: "medium", onClick: handleCancel, children: "Close" }),
+            useVersioning && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_puck13.Button, { size: "medium", variant: "secondary", onClick: handleCancel, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.X, { size: 16 }),
               " Cancel"
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName5("footerRight"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_puck15.Button, { size: "medium", variant: "secondary", onClick: handleDemolishClick, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react2.Trash2, { size: 16 }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName5("footerRight"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_puck13.Button, { size: "medium", variant: "secondary", onClick: handleDemolishClick, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Trash2, { size: 16 }),
             " Demolish Component"
           ] }) })
         ] })
       ] }) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: props.children });
 };
-var ComponentItem = DrawerItem;
 
 // src/puck/overrides/Drawer.tsx
-var import_react12 = require("react");
-var import_puck16 = require("@measured/puck");
+var import_react11 = require("react");
+var import_puck14 = require("@measured/puck");
 var import_lucide_react3 = require("lucide-react");
 
 // css-module:/home/osamu/Documents/netlisian-soft/packages/soft-config/src/puck/overrides/Drawer.module.css#css-module
 var Drawer_module_default = { "Drawer": "_Drawer_12zq5_1", "Drawer-category": "_Drawer-category_12zq5_7", "Drawer-category--isExpanded": "_Drawer-category--isExpanded_12zq5_15", "Drawer-categoryContent": "_Drawer-categoryContent_12zq5_19", "Drawer-categoryTitle": "_Drawer-categoryTitle_12zq5_27", "Drawer-categoryTitleIcon": "_Drawer-categoryTitleIcon_12zq5_63" };
 
 // src/puck/overrides/Drawer.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var useCustomPuck11 = (0, import_puck14.createUsePuck)();
 var getClassName6 = get_class_name_factory_default("Drawer", Drawer_module_default);
 var getCategoryClassName = get_class_name_factory_default("Drawer-category", Drawer_module_default);
-var usePuck3 = (0, import_puck16.createUsePuck)();
 var CategorySection = ({
   id,
   title,
@@ -4243,8 +3759,8 @@ var CategorySection = ({
   getPermissions,
   expanded,
   onToggle
-}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getCategoryClassName({ isExpanded: expanded }), children: [
-  title && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: getCategoryClassName({ isExpanded: expanded }), children: [
+  title && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "button",
     {
       type: "button",
@@ -4252,13 +3768,13 @@ var CategorySection = ({
       onClick: () => onToggle(id),
       title: expanded ? `Collapse ${title}` : `Expand ${title}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: getClassName6("categoryTitleIcon"), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.ChevronUp, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.ChevronDown, { size: 12 }) })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: getClassName6("categoryTitleIcon"), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ChevronUp, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ChevronDown, { size: 12 }) })
       ]
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassName6("categoryContent"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_puck16.Drawer, { children: componentKeys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_puck16.Drawer.Item,
+  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassName6("categoryContent"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_puck14.Drawer, { children: componentKeys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_puck14.Drawer.Item,
     {
       name: key,
       isDragDisabled: !getPermissions({ type: key }).insert,
@@ -4269,8 +3785,8 @@ var CategorySection = ({
 ] });
 var Drawer = (_props) => {
   var _a, _b;
-  const config = usePuck3((s) => s.config);
-  const getPermissions = usePuck3((s) => s.getPermissions);
+  const config = useCustomPuck11((s) => s.config);
+  const getPermissions = useCustomPuck11((s) => s.getPermissions);
   const categories = (_a = config.categories) != null ? _a : {};
   const categorised = new Set(
     Object.values(categories).flatMap((cat) => {
@@ -4287,7 +3803,7 @@ var Drawer = (_props) => {
   const categoryEntries = Object.entries(categories).filter(
     ([, cat]) => cat.visible !== false
   );
-  const [expanded, setExpanded] = (0, import_react12.useState)(() => {
+  const [expanded, setExpanded] = (0, import_react11.useState)(() => {
     const init = {};
     categoryEntries.forEach(([id, cat]) => {
       init[id] = cat.defaultExpanded !== false;
@@ -4297,8 +3813,8 @@ var Drawer = (_props) => {
   });
   const toggle = (id) => setExpanded((prev) => __spreadProps(__spreadValues({}, prev), { [id]: !prev[id] }));
   if (categoryEntries.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_puck16.Drawer, { children: allKeys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_puck16.Drawer.Item,
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_puck14.Drawer, { children: allKeys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_puck14.Drawer.Item,
       {
         name: key,
         label: labels[key],
@@ -4308,10 +3824,10 @@ var Drawer = (_props) => {
       key
     )) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassName6(), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: getClassName6(), children: [
     categoryEntries.map(([id, cat]) => {
       var _a2, _b2, _c;
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         CategorySection,
         {
           id,
@@ -4326,7 +3842,7 @@ var Drawer = (_props) => {
         id
       );
     }),
-    otherKeys.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    otherKeys.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       CategorySection,
       {
         id: "__other__",
@@ -4341,25 +3857,27 @@ var Drawer = (_props) => {
 };
 
 // src/puck/overrides/HeaderActions.tsx
-var import_puck17 = require("@measured/puck");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var usePuck4 = (0, import_puck17.createUsePuck)();
+var import_puck15 = require("@measured/puck");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var useCustomPuck12 = (0, import_puck15.createUsePuck)();
 var HeaderActions = ({ children }) => {
   const { handleComplete } = useComplete();
   const { handleCancel, canCancel } = useCancel();
-  const dispatch = usePuck4((s) => s.dispatch);
+  const dispatch = useCustomPuck12((s) => s.dispatch);
+  const appState = useCustomPuck12((s) => s.appState);
+  const selectedItemSelector = appState.ui.itemSelector;
   const inspect = useSoftConfig((s) => s.builder.inspect);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: canCancel ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_puck17.Button, { onClick: handleCancel, children: "Cancel" }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_puck17.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: canCancel ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_puck15.Button, { onClick: handleCancel, children: "Cancel" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_puck15.Button,
       {
         variant: "primary",
         onClick: () => {
           const completedComponent = handleComplete();
           if (completedComponent) {
             try {
-              inspect(completedComponent.id, dispatch);
+              inspect(completedComponent.id, dispatch, selectedItemSelector);
             } catch (error) {
               notify.error(
                 "Failed to inspect after completion: " + (error instanceof Error ? error.message : String(error))
@@ -4582,18 +4100,37 @@ var resolveSoftConfig = (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
+      alert(
+        "Warning: Soft components still present after dissolution: " + String(
+          validation.softComponentsFound
+        )
       );
     }
   }
   return dissolved;
 };
+
+// src/puck/lib/builder/generate-field-options.ts
+var hasArrayMappingPath = (value) => value.includes("[]");
+var isBareArrayPath = (value) => !hasArrayMappingPath(value) && !value.includes(".");
+function filterToOptionsForFrom(fromPath, toOptions) {
+  if (!fromPath) return toOptions;
+  const fromHasArrayMapping = hasArrayMappingPath(fromPath);
+  const fromIsBareArray = isBareArrayPath(fromPath);
+  return toOptions.filter((option) => {
+    const optionHasArrayMapping = hasArrayMappingPath(option.value);
+    if (fromHasArrayMapping) {
+      return optionHasArrayMapping;
+    }
+    if (fromIsBareArray) {
+      return isBareArrayPath(option.value);
+    }
+    return !optionHasArrayMapping;
+  });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionBar,
-  ComponentItem,
   ComponentList,
   Drawer,
   DrawerItem,