@netlisian/softconfig 0.1.2 → 0.1.4

package/dist/puck/index.js

@@ -23,18 +23,6 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -360,7 +348,7 @@ var updateVersion = (version, increment) => {
   return `${major}.${minor}.${patch}`;
 };
 var builderRootConfig = (config, overrides, editingComponent, showVersionFields = true) => ({
-  fields: {
+  fields: __spreadValues({
     _name: overrides.name || {
       type: "text",
       label: "Soft Component Name"
@@ -410,7 +398,7 @@ var builderRootConfig = (config, overrides, editingComponent, showVersionFields
         }
       }
     }
-  },
+  }, overrides.additionalRootFields || {}),
   resolveFields({ props: data }, { fields, changed }) {
     var _a, _b;
     if (!(data == null ? void 0 : data._fields) || changed._fields || changed._fieldSettings)
@@ -424,7 +412,7 @@ var builderRootConfig = (config, overrides, editingComponent, showVersionFields
           )
         };
       else delete fields._fieldSettings;
-    if (showVersionFields && ((_b = data == null ? void 0 : data._versions) == null ? void 0 : _b.length) && (!(data == null ? void 0 : data._version) || changed._version || changed._fieldSettings)) {
+    if (showVersionFields && ((_b = data == null ? void 0 : data._versions) == null ? void 0 : _b.length)) {
       const latestVersion = data._versions[data._versions.length - 1] || "1.0.0";
       delete fields._version;
       fields._version = {
@@ -452,14 +440,14 @@ var builderRootConfig = (config, overrides, editingComponent, showVersionFields
     return fields;
   },
   resolveData: (props, params) => {
-    if (overrides.onRootsDataChange)
-      overrides.onRootsDataChange(props, params);
-    return {
+    if (overrides.resolveRootData) {
+      return overrides.resolveRootData(props, params, { editingComponent });
+    }
+    let result = {
       props,
-      readOnly: Boolean(editingComponent) ? {
-        _name: true
-      } : void 0
+      readOnly: void 0
     };
+    return result;
   },
   render: (props) => {
     const fieldSettings = props == null ? void 0 : props._fieldSettings;
@@ -965,6 +953,21 @@ var softComponentFromAppState = (appState, configComponents, editedItem, metadat
   const rootProps = ((_a = appState.data.root) == null ? void 0 : _a.props) || {};
   const fields = rootProps._fields || [];
   const field_settings = rootProps._fieldSettings || {};
+  const builtInRootProps = /* @__PURE__ */ new Set([
+    "_name",
+    "_category",
+    "_version",
+    "_versions",
+    "_fields",
+    "_fieldSettings"
+  ]);
+  const customRootProps = Object.keys(rootProps).filter((key) => key.startsWith("_") && !builtInRootProps.has(key)).reduce(
+    (acc, key) => {
+      acc[key] = rootProps[key];
+      return acc;
+    },
+    {}
+  );
   const slots = {};
   const components = getSubComponents(
     [editedItem],
@@ -989,6 +992,7 @@ var softComponentFromAppState = (appState, configComponents, editedItem, metadat
       }, {})),
       fieldSettings: field_settings,
       defaultProps,
+      rootProps: customRootProps,
       components,
       slots
     },
@@ -1000,6 +1004,24 @@ var softComponentFromAppState = (appState, configComponents, editedItem, metadat
 var import_uuid = require("uuid");
 var generateId = (type) => type ? `${type}-${(0, import_uuid.v4)()}` : (0, import_uuid.v4)();
 
+// src/puck/lib/component-key.ts
+var defaultToCamelCase = (value) => {
+  const tokens = value.trim().replace(/[^a-zA-Z0-9\s_-]/g, " ").split(/[\s_-]+/).filter(Boolean);
+  if (tokens.length === 0) return "";
+  const [first, ...rest] = tokens;
+  return `${first.toLowerCase()}${rest.map((token) => token.charAt(0).toUpperCase() + token.slice(1).toLowerCase()).join("")}`;
+};
+var createComponentKeyFromName = (displayName, overrides, context) => {
+  const key = overrides.componentNameToKey ? overrides.componentNameToKey(displayName, context) : defaultToCamelCase(displayName);
+  return key.trim();
+};
+var getComponentNameFromKey = (key, overrides) => {
+  if (overrides.componentKeyToName) {
+    return overrides.componentKeyToName(key);
+  }
+  return key;
+};
+
 // src/puck/lib/soft-component-to-appstate.ts
 var puckFieldsToSoftFields = (fields, slots) => {
   const softFields = [];
@@ -1118,7 +1140,7 @@ var reconstructComponents = (subComponents, componentConfigs, softComponentProps
     return componentData;
   });
 };
-var softComponentToAppState = (softComponent, componentName, version, versions, componentProps, componentConfigs, displayName, category) => {
+var softComponentToAppState = (softComponent, componentName, version, versions, componentProps, componentConfigs, overrides, displayName, category) => {
   const slots = new Set(Object.keys(softComponent.slots));
   const { fields, fieldSettings } = puckFieldsToSoftFields(
     softComponent.fields,
@@ -1129,14 +1151,17 @@ var softComponentToAppState = (softComponent, componentName, version, versions,
       fieldSettings[key].defaultValue = value;
     }
   });
-  const rootProps = {
-    _name: displayName || componentName,
+  let rootProps = __spreadValues({
+    _name: displayName || getComponentNameFromKey(componentName, overrides),
     _category: category,
     _version: version,
     _versions: versions,
     _fields: fields,
     _fieldSettings: fieldSettings
-  };
+  }, softComponent.rootProps || {});
+  if (overrides.onRemodel) {
+    rootProps = __spreadValues(__spreadValues({}, rootProps), overrides.onRemodel(componentName));
+  }
   const content = reconstructComponents(
     softComponent.components,
     componentConfigs,
@@ -1158,114 +1183,111 @@ var rootZone = "default-zone";
 var rootDroppableId = `${rootAreaId}:${rootZone}`;
 
 // src/puck/components/soft-render/index.tsx
-var import_react4 = require("react");
-var import_uuid2 = require("uuid");
-var import_fast_deep_equal = __toESM(require("fast-deep-equal"));
+var import_react4 = __toESM(require("react"));
+var import_react_fast_compare = __toESM(require("react-fast-compare"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function SoftRender({
-  softComponentFields,
-  softComponentFieldSettings,
-  softSubComponent,
-  configComponents,
-  props,
-  depth = 0
-}) {
-  const _a = props, { id, puck, editMode } = _a, rest = __objRest(_a, ["id", "puck", "editMode"]);
-  const mapCacheRef = (0, import_react4.useRef)(/* @__PURE__ */ new Map());
-  const prevPropsRef = (0, import_react4.useRef)(null);
-  if (!(0, import_fast_deep_equal.default)(prevPropsRef.current, props)) {
-    mapCacheRef.current.clear();
-    prevPropsRef.current = props;
-  }
-  const subComponentRootProps = (0, import_react4.useMemo)(
-    () => Object.entries(softComponentFields || {}).filter(([_, field]) => field.type !== "slot").reduce(
-      (acc, [fieldKey]) => {
-        acc[fieldKey] = props[fieldKey];
-        return acc;
-      },
-      {}
-    ),
-    [softComponentFields, props]
+function isPlainObject(val) {
+  if (typeof val !== "object" || val === null) return false;
+  if (import_react4.default.isValidElement(val)) return false;
+  if ("$$typeof" in val) return false;
+  const proto = Object.getPrototypeOf(val);
+  return proto === Object.prototype || proto === null;
+}
+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 (!isPlainObject(value)) return value;
+  return Object.fromEntries(
+    Object.entries(value).map(([k, v]) => [k, cloneData(v)])
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: (softSubComponent == null ? void 0 : softSubComponent.length) > 0 && softSubComponent.map((subComponent, index) => {
-    var _a2;
+}
+var SubComponentRenderer = (0, import_react4.memo)(
+  ({
+    subComponent,
+    softComponentFields,
+    softComponentFieldSettings,
+    configComponents,
+    props,
+    depth,
+    index
+  }) => {
+    const { id, puck, editMode } = props;
     const componentConfig = configComponents[subComponent == null ? void 0 : subComponent.type];
-    if (!componentConfig) return null;
-    const resolvedProps = subComponent.fixedProps || {};
     const stableId = (0, import_react4.useMemo)(
-      () => depth === 0 ? id : `${subComponent.type}-${id}-d${depth}-${(0, import_uuid2.v4)()}`,
-      [id, depth, subComponent.type]
+      () => depth === 0 ? id : `${subComponent.type}-${id}-d${depth}-i${index}`,
+      [id, depth, subComponent.type, index]
     );
-    if ((_a2 = subComponent.map) == null ? void 0 : _a2.length) {
-      subComponent.map.forEach((mapItem) => {
-        const { from, to, transform } = mapItem || {};
-        const fromPaths = Array.isArray(from) ? from : from ? [from] : [];
-        const toPaths = Array.isArray(to) ? to : to ? [to] : [];
-        const inputValues = fromPaths.map((f) => {
-          const propValue = getFieldSettingsByPath(props || {}, f);
-          if (propValue !== void 0) return propValue;
-          const setting = getFieldSettingsByPath(
-            softComponentFieldSettings || {},
-            f
-          );
-          if (setting && Object.prototype.hasOwnProperty.call(setting, "defaultValue")) {
-            return setting.defaultValue;
+    const finalProps = (0, import_react4.useMemo)(() => {
+      var _a;
+      if (!componentConfig) return {};
+      const clonedProps = cloneData(subComponent.fixedProps || {});
+      if ((_a = subComponent.map) == null ? void 0 : _a.length) {
+        subComponent.map.forEach((mapItem) => {
+          const { from, to, transform } = mapItem || {};
+          const fromPaths = Array.isArray(from) ? from : from ? [from] : [];
+          const toPaths = Array.isArray(to) ? to : to ? [to] : [];
+          const inputValues = fromPaths.map((f) => {
+            const propValue = getFieldSettingsByPath(props, f);
+            if (propValue !== void 0) return propValue;
+            const setting = getFieldSettingsByPath(softComponentFieldSettings || {}, f);
+            if (setting && Object.prototype.hasOwnProperty.call(setting, "defaultValue")) {
+              return setting.defaultValue;
+            }
+            return propValue;
+          });
+          const result = transform ? transform(inputValues, props) : inputValues[0];
+          if (Array.isArray(result)) {
+            result.forEach(
+              (val, i) => toPaths[i] && setPropertyByPath(clonedProps, toPaths[i], val)
+            );
+          } else if (toPaths[0]) {
+            setPropertyByPath(clonedProps, toPaths[0], result);
           }
-          return propValue;
         });
-        const cacheKey = inputValues.map((v, i) => `${i}:${typeof v === "object" ? JSON.stringify(v) : v}`).join("|");
-        let result = mapCacheRef.current.get(cacheKey);
-        if (!result) {
-          const runner = transform;
-          result = runner ? runner(inputValues, props) : inputValues[0];
-          mapCacheRef.current.set(cacheKey, result);
-        }
-        if (Array.isArray(result)) {
-          result.forEach(
-            (val, i) => toPaths[i] && setPropertyByPath(resolvedProps, toPaths[i], val)
-          );
-        } else if (toPaths[0]) {
-          setPropertyByPath(resolvedProps, toPaths[0], result);
-        }
-      });
-    }
-    Object.entries(componentConfig.fields || {}).forEach(
-      ([slotKey, field]) => {
-        var _a3, _b;
-        if (field.type === "slot") {
-          const enabledSlot = (_a3 = subComponent == null ? void 0 : subComponent.enabledSlots) == null ? void 0 : _a3.find(
+      }
+      Object.entries(componentConfig.fields || {}).forEach(
+        ([slotKey, field]) => {
+          var _a2, _b, _c;
+          if (field.type !== "slot") return;
+          const enabledSlot = (_a2 = subComponent == null ? void 0 : subComponent.enabledSlots) == null ? void 0 : _a2.find(
             (s) => s.slot === slotKey
           );
           if (enabledSlot) {
             const slotName = enabledSlot.name || `${(_b = subComponent.fixedProps) == null ? void 0 : _b.id}-${slotKey}`;
-            resolvedProps[slotKey] = (0, import_react4.useMemo)(
-              () => rest[slotName] || (() => null),
-              [slotName, rest[slotName]]
-            );
+            clonedProps[slotKey] = (_c = props[slotName]) != null ? _c : (() => null);
           } else {
-            resolvedProps[slotKey] = (0, import_react4.useMemo)(() => {
-              return ({
-                className,
-                style
-              }) => {
-                var _a4, _b2;
-                return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                  SoftRender,
-                  {
-                    softComponentFields,
-                    softSubComponent: (_b2 = (_a4 = subComponent == null ? void 0 : subComponent.components) == null ? void 0 : _a4[slotKey]) != null ? _b2 : [],
-                    configComponents,
-                    props,
-                    depth: depth + 1
-                  },
-                  slotKey
-                ) });
-              };
-            }, [slotKey, subComponentRootProps]);
+            clonedProps[slotKey] = ({
+              className,
+              style
+            }) => {
+              var _a3, _b2;
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                SoftRender,
+                {
+                  softComponentFields,
+                  softComponentFieldSettings,
+                  softSubComponent: (_b2 = (_a3 = subComponent == null ? void 0 : subComponent.components) == null ? void 0 : _a3[slotKey]) != null ? _b2 : [],
+                  configComponents,
+                  props,
+                  depth: depth + 1
+                }
+              ) });
+            };
           }
         }
-      }
-    );
+      );
+      return clonedProps;
+    }, [
+      componentConfig,
+      subComponent,
+      props,
+      softComponentFields,
+      softComponentFieldSettings,
+      configComponents,
+      depth
+    ]);
+    if (!componentConfig) return null;
     const ComponentRender = componentConfig.render;
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       ComponentRender,
@@ -1273,10 +1295,53 @@ function SoftRender({
         id: stableId,
         editMode,
         puck
-      }, resolvedProps)
-    ) }, index);
-  }) });
-}
+      }, 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_compare.default)(prev.props, next.props) && (0, import_react_fast_compare.default)(prev.subComponent, next.subComponent) && (0, import_react_fast_compare.default)(prev.softComponentFieldSettings, next.softComponentFieldSettings)
+);
+SubComponentRenderer.displayName = "SubComponentRenderer";
+var SoftRender = (0, import_react4.memo)(
+  ({
+    softComponentFields,
+    softComponentFieldSettings,
+    softSubComponent,
+    configComponents,
+    props,
+    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) => {
+      var _a;
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        SubComponentRenderer,
+        {
+          subComponent,
+          softComponentFields,
+          softComponentFieldSettings: softComponentFieldSettings || {},
+          configComponents,
+          props,
+          depth,
+          index
+        },
+        `${(_a = subComponent == null ? void 0 : subComponent.type) != null ? _a : "comp"}-${index}-${depth}`
+      );
+    }) });
+  },
+  // 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_compare.default)(prev.props, next.props) && (0, import_react_fast_compare.default)(prev.softSubComponent, next.softSubComponent) && (0, import_react_fast_compare.default)(prev.softComponentFieldSettings, next.softComponentFieldSettings)
+);
+SoftRender.displayName = "SoftRender";
 
 // src/puck/lib/create-versioned-component-config.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -1430,18 +1495,6 @@ function demolishSoftComponent(componentName, data, config, softComponents) {
   };
 }
 
-// src/puck/lib/component-key.ts
-var defaultToCamelCase = (value) => {
-  const tokens = value.trim().replace(/[^a-zA-Z0-9\s_-]/g, " ").split(/[\s_-]+/).filter(Boolean);
-  if (tokens.length === 0) return "";
-  const [first, ...rest] = tokens;
-  return `${first.toLowerCase()}${rest.map((token) => token.charAt(0).toUpperCase() + token.slice(1).toLowerCase()).join("")}`;
-};
-var createComponentKeyFromName = (displayName, overrides, context) => {
-  const key = overrides.componentNameToKey ? overrides.componentNameToKey(displayName, context) : defaultToCamelCase(displayName);
-  return key.trim();
-};
-
 // src/puck/store/slices/builder.tsx
 var createBuildersSlice = (set, get, initialConfig) => ({
   build: (history, selectedItem, itemSelector, puckDispatch, name) => {
@@ -1541,6 +1594,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
       versions,
       selectedItem.props,
       get().softConfig.components,
+      get().overrides,
       (softComponentMeta == null ? void 0 : softComponentMeta.name) || softComponentName,
       softComponentMeta == null ? void 0 : softComponentMeta.category
     );
@@ -1593,6 +1647,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
         zone: itemSelector.zone || rootDroppableId
       },
       editingComponentId: selectedItem.props.id,
+      editingComponent: softComponentName,
       editableComponentIds: editableIds,
       state: "remodeling"
     }));
@@ -1609,7 +1664,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
     );
   },
   complete: (appState, setHistories, getItemBySelector) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     if (get().state === "ready") {
       throw new Error("Not building or remodeling a component.");
     }
@@ -1628,10 +1683,11 @@ var createBuildersSlice = (set, get, initialConfig) => ({
       throw new Error("Cannot find item being edited");
     }
     const rootCategory = (_e = (_d = appState.data.root) == null ? void 0 : _d.props) == null ? void 0 : _e._category;
-    const componentName = createComponentKeyFromName(displayName, get().overrides, {
+    const rootProps = (_f = appState.data.root) == null ? void 0 : _f.props;
+    const componentName = createComponentKeyFromName(displayName, get().overrides, __spreadProps(__spreadValues({}, rootProps || {}), {
       existingKeys: Object.keys(get().softComponents),
       state: get().state
-    });
+    }));
     if (!componentName) {
       throw new Error("Failed to generate component key from name.");
     }
@@ -1690,12 +1746,26 @@ var createBuildersSlice = (set, get, initialConfig) => ({
         storedConfig: void 0,
         state: "inspecting",
         originalHistory: [],
+        editingComponent: null,
         editingComponentId: null,
         editableComponentIds: /* @__PURE__ */ new Set()
       });
     });
+    if (!version) {
+      throw new Error("Failed to resolve completed component version.");
+    }
+    const completedSoftComponent = (_g = get().softComponents[componentName]) == null ? void 0 : _g.versions[version];
+    if (!completedSoftComponent) {
+      throw new Error(
+        `Completed soft component "${componentName}" version "${version}" not found.`
+      );
+    }
     get().rebuildDependents(componentName, version);
-    return componentName;
+    return {
+      id: componentName,
+      version,
+      softComponent: completedSoftComponent
+    };
   },
   inspect: (componentName, puckDispatch) => {
     if (get().state !== "inspecting") {
@@ -1736,6 +1806,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
       itemSelector: null,
       originalItem: null,
       state: "ready",
+      editingComponent: null,
       editingComponentId: null,
       editableComponentIds: /* @__PURE__ */ new Set()
     }));
@@ -1828,6 +1899,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
       versions,
       currentProps,
       get().softConfig.components,
+      get().overrides,
       (softComponentMeta == null ? void 0 : softComponentMeta.name) || componentName,
       softComponentMeta == null ? void 0 : softComponentMeta.category
     );
@@ -2132,6 +2204,7 @@ var createSoftConfigStore = (hardConfig = {
         onActions,
         iframeDocRef,
         showVersionFields,
+        editingComponent: null,
         setShowVersionFields: (show) => set({ showVersionFields: show }),
         getIframeDoc: () => iframeDocRef.current,
         setIframeDoc: (doc) => {
@@ -2452,14 +2525,19 @@ var SoftConfigProvider = ({
   );
   const validateAction = (0, import_react5.useMemo)(
     () => (action) => {
+      var _a;
       const currentState = store.getState();
       if (currentState.state === "ready") {
         return true;
       }
       const editableIds = currentState.editableComponentIds;
       if (action.type === "replace") {
+        const parentId = (_a = action.destinationZone) == null ? void 0 : _a.split(":")[0];
         if (action.data.props.id && editableIds.has(action.data.props.id)) {
           return true;
+        } else if (parentId && editableIds.has(parentId)) {
+          currentState.addEditableComponentId(action.data.props.id);
+          return true;
         }
         return false;
       }
@@ -2625,28 +2703,42 @@ var useRemodel = () => {
   const refreshPermissions = useCustomPuck3((s) => s.refreshPermissions);
   const { triggerAction } = useActionEvent();
   const handleRemodel = (componentName) => {
+    var _a, _b, _c;
     if (status !== "ready") {
       notify.error("Can only remodel when in ready state.");
-      return;
+      return null;
     }
     const name = componentName || (selectedItem == null ? void 0 : selectedItem.type);
     if (!name || !Object.keys(softComponents).includes(name)) {
       notify.error("Selected component is not a soft component.");
-      return;
+      return null;
     }
+    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);
       void triggerAction({
         type: "remodel",
         payload: {
-          id: name
+          id: name,
+          version: selectedVersion,
+          softComponent: selectedSoftComponent
         }
       });
+      if (selectedVersion && selectedSoftComponent) {
+        return {
+          id: name,
+          version: selectedVersion,
+          softComponent: selectedSoftComponent
+        };
+      }
+      return { id: name, version: selectedVersion };
     } catch (error) {
       console.error("Failed to remodel:", error);
       notify.error(
         "Failed to remodel: " + (error instanceof Error ? error.message : String(error))
       );
+      return null;
     }
   };
   const canRemodel = (componentName) => {
@@ -2666,31 +2758,29 @@ var useComplete = () => {
   const setHistories = useCustomPuck4((s) => s.history.setHistories);
   const getItemBySelector = useCustomPuck4((s) => s.getItemBySelector);
   const status = useSoftConfig((s) => s.state);
-  const softComponents = useSoftConfig((s) => s.softComponents);
   const [newComponent, setNewComponent] = (0, import_react7.useState)(null);
   const { triggerAction } = useActionEvent();
   const handleComplete = (0, import_react7.useCallback)(() => {
-    var _a, _b;
     if (status === "ready") {
       notify.error("Not building or remodeling a component.");
       return null;
     }
     try {
-      const componentName = complete(appState, setHistories, getItemBySelector);
-      setNewComponent(componentName);
+      const completedComponent = complete(appState, setHistories, getItemBySelector);
+      setNewComponent(completedComponent);
       const componentData = appState.data.root;
-      const softComponent = (_b = softComponents[componentName]) == null ? void 0 : _b.versions[(_a = softComponents[componentName]) == null ? void 0 : _a.defaultVersion];
-      if (softComponent && componentData) {
+      if (componentData) {
         void triggerAction({
           type: "complete",
           payload: {
-            id: componentName,
+            id: completedComponent.id,
+            version: completedComponent.version,
             componentData,
-            softComponent
+            softComponent: completedComponent.softComponent
           }
         });
       }
-      return componentName;
+      return completedComponent;
     } catch (error) {
       console.error("Failed to complete:", error);
       notify.error(
@@ -2698,7 +2788,7 @@ var useComplete = () => {
       );
       return null;
     }
-  }, [complete, appState, setHistories, status, softComponents, triggerAction, getItemBySelector]);
+  }, [complete, appState, setHistories, status, triggerAction, getItemBySelector]);
   const canComplete = status === "building" || status === "remodeling";
   return { handleComplete, canComplete, newComponent, setNewComponent };
 };
@@ -2737,23 +2827,25 @@ var useCancel = () => {
 var import_puck9 = require("@measured/puck");
 var import_react8 = require("react");
 var useCustomPuck6 = (0, import_puck9.createUsePuck)();
-var useInspect = (componentName) => {
+var useInspect = (component) => {
   const inspect = useSoftConfig((s) => s.builder.inspect);
   const dispatch = useCustomPuck6((s) => s.dispatch);
   const status = useSoftConfig((s) => s.state);
   const { triggerAction } = useActionEvent();
   (0, import_react8.useEffect)(() => {
     if (status !== "inspecting") return;
-    if (!componentName) {
+    if (!component) {
       notify.error("No component to inspect.");
       return;
     }
     try {
-      inspect(componentName, dispatch);
+      inspect(component.id, dispatch);
       void triggerAction({
         type: "inspect",
         payload: {
-          id: componentName
+          id: component.id,
+          version: component.version,
+          softComponent: component.softComponent
         }
       });
     } catch (error) {
@@ -2762,7 +2854,7 @@ var useInspect = (componentName) => {
         "Failed to inspect: " + (error instanceof Error ? error.message : String(error))
       );
     }
-  }, [status, componentName, inspect, dispatch, triggerAction]);
+  }, [status, component, inspect, dispatch, triggerAction]);
 };
 
 // src/puck/actions/useDecompose.tsx
@@ -2978,9 +3070,9 @@ var Header = ({
       {
         variant: "primary",
         onClick: () => {
-          const name = handleComplete();
-          if (name) {
-            setNewComponent(name);
+          const completedComponent = handleComplete();
+          if (completedComponent) {
+            setNewComponent(completedComponent);
           }
         },
         children: "Complete"
@@ -3014,7 +3106,7 @@ var import_jsx_runtime9 = require("react/jsx-runtime");
 var getClassName3 = get_class_name_factory_default("ActionBar", ActionBar_module_default);
 var usePuck2 = (0, import_puck14.createUsePuck)();
 var ActionBarOverride = (props) => {
-  var _a;
+  var _a, _b;
   const { handleBuild } = useBuild("Custom Name");
   const { handleRemodel } = useRemodel();
   const { handleDecompose } = useDecompose();
@@ -3022,20 +3114,31 @@ var ActionBarOverride = (props) => {
   const softComponents = useSoftConfig((s) => s.softComponents, import_shallow.shallow);
   const editableIds = useSoftConfig((s) => s.editableComponentIds);
   const selectedItem = usePuck2((s) => s.selectedItem);
+  const rootProps = usePuck2((s) => s.appState.data.root.props);
   const status = useSoftConfig((s) => s.state);
+  const itemSelector = usePuck2((s) => s.appState.ui.itemSelector);
   const softKeys = Object.keys(softComponents);
-  const key = (0, import_react9.useMemo)(() => createComponentKeyFromName(props.label || "", overrides, {
-    existingKeys: softKeys,
-    state: status
-  }), [
+  const key = (0, import_react9.useMemo)(() => {
+    const selectedType = selectedItem == null ? void 0 : selectedItem.type;
+    if (selectedType && softKeys.includes(selectedType)) {
+      return selectedType;
+    }
+    return createComponentKeyFromName(props.label || "", overrides, __spreadProps(__spreadValues({}, rootProps || {}), {
+      existingKeys: softKeys,
+      state: status
+    }));
+  }, [
     props.label,
     overrides,
+    selectedItem == null ? void 0 : selectedItem.type,
     softKeys,
-    status
+    status,
+    rootProps
   ]);
   const isSoftComponent2 = softKeys.includes(key);
   const selectedId = (_a = selectedItem == null ? void 0 : selectedItem.props) == null ? void 0 : _a.id;
-  const isEditable = Boolean(selectedId && editableIds.has(selectedId));
+  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)));
   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: [
       props.parentAction,
@@ -3095,14 +3198,14 @@ var confirm = (message) => __async(null, null, function* () {
 });
 
 // css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/DrawerItem.module.css#css-module
-var DrawerItem_module_default = { "DrawerItem": "_DrawerItem_29z19_1", "DrawerItem--insertDisabled": "_DrawerItem--insertDisabled_29z19_14", "DrawerItem-content": "_DrawerItem-content_29z19_21", "DrawerItem-name": "_DrawerItem-name_29z19_31", "DrawerItem-version": "_DrawerItem-version_29z19_35", "DrawerItem-actions": "_DrawerItem-actions_29z19_40", "DrawerItem-settingsButton": "_DrawerItem-settingsButton_29z19_46", "DrawerItem-grip": "_DrawerItem-grip_29z19_56", "DrawerItem-modal": "_DrawerItem-modal_29z19_63", "DrawerItem-modalHeader": "_DrawerItem-modalHeader_29z19_70", "DrawerItem-modalTitle": "_DrawerItem-modalTitle_29z19_75", "DrawerItem-modalSubtitle": "_DrawerItem-modalSubtitle_29z19_82", "DrawerItem-modalBody": "_DrawerItem-modalBody_29z19_88", "DrawerItem-section": "_DrawerItem-section_29z19_97", "DrawerItem-sectionTitle": "_DrawerItem-sectionTitle_29z19_103", "DrawerItem-sectionDescription": "_DrawerItem-sectionDescription_29z19_110", "DrawerItem-versionList": "_DrawerItem-versionList_29z19_116", "DrawerItem-versionRow": "_DrawerItem-versionRow_29z19_122", "DrawerItem-versionRow--isDefault": "_DrawerItem-versionRow--isDefault_29z19_133", "DrawerItem-versionRow--isMarkedForDeletion": "_DrawerItem-versionRow--isMarkedForDeletion_29z19_138", "DrawerItem-versionInfo": "_DrawerItem-versionInfo_29z19_143", "DrawerItem-versionNumber": "_DrawerItem-versionNumber_29z19_150", "DrawerItem-defaultBadge": "_DrawerItem-defaultBadge_29z19_156", "DrawerItem-deleteBadge": "_DrawerItem-deleteBadge_29z19_167", "DrawerItem-versionActions": "_DrawerItem-versionActions_29z19_178", "DrawerItem-migrationOptions": "_DrawerItem-migrationOptions_29z19_184", "DrawerItem-select": "_DrawerItem-select_29z19_188", "DrawerItem-modalFooter": "_DrawerItem-modalFooter_29z19_209", "DrawerItem-footerLeft": "_DrawerItem-footerLeft_29z19_218", "DrawerItem-footerRight": "_DrawerItem-footerRight_29z19_223" };
+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_react_dom = require("react-dom");
 
 // css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/components/modal/styles.module.css#css-module
-var styles_module_default2 = { "Modal": "_Modal_pvj02_1", "Modal--isOpen": "_Modal--isOpen_pvj02_29", "Modal-inner": "_Modal-inner_pvj02_37" };
+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");
@@ -3116,18 +3219,43 @@ var Modal = ({
   (0, import_react10.useEffect)(() => {
     setRootEl(document.getElementById("puck-portal-root"));
   }, []);
+  (0, import_react10.useEffect)(() => {
+    if (!isOpen) {
+      return;
+    }
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, onClose]);
   if (!rootEl) {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", {});
   }
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: getClassName4({ isOpen }), onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "div",
       {
-        className: getClassName4("inner"),
-        onClick: (e) => e.stopPropagation(),
-        children
+        className: getClassName4({ isOpen }),
+        onClick: (event) => {
+          if (event.target === event.currentTarget) {
+            onClose();
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
+          {
+            className: getClassName4("inner"),
+            role: "dialog",
+            "aria-modal": "true",
+            onClick: (e) => e.stopPropagation(),
+            children
+          }
+        )
       }
-    ) }),
+    ),
     rootEl
   );
 };
@@ -3150,13 +3278,14 @@ 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)(
     /* @__PURE__ */ new Set()
   );
-  const [migrateVersionMap, setMigrateVersionMap] = (0, import_react11.useState)({});
+  const [migrationTarget, setMigrationTarget] = (0, import_react11.useState)("decompose");
   const useVersioning = useSoftConfig((s) => s.showVersionFields);
   const versions = getVersions(props.name);
   const defaultVersion = getDefaultVersion(props.name);
@@ -3177,19 +3306,27 @@ var DrawerItem = (props) => {
           break;
         } else {
           removeSoftComponentVersion(props.name, version);
+          void triggerAction({
+            type: "deleteVersion",
+            payload: {
+              id: props.name,
+              version,
+              migrateToVersion: migrationTarget
+            }
+          });
         }
       }
     }
     setIsEditing(false);
     setSelectedVersion("");
     setVersionsToDelete(/* @__PURE__ */ new Set());
-    setMigrateVersionMap({});
+    setMigrationTarget("decompose");
   });
   const handleCancel = () => {
     setIsEditing(false);
     setSelectedVersion("");
     setVersionsToDelete(/* @__PURE__ */ new Set());
-    setMigrateVersionMap({});
+    setMigrationTarget("decompose");
   };
   const toggleVersionForDeletion = (version) => {
     const newSet = new Set(versionsToDelete);
@@ -3211,6 +3348,13 @@ var DrawerItem = (props) => {
   });
   if (softComponents.has(props.name)) {
     const availableVersions = versions.filter((v) => !versionsToDelete.has(v));
+    const migrationTargets = [
+      { value: "decompose", label: "Decompose to basic elements" },
+      ...availableVersions.map((version) => ({
+        value: version,
+        label: `Migrate to Version ${version}`
+      }))
+    ];
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         "div",
@@ -3281,30 +3425,35 @@ var DrawerItem = (props) => {
               ] }, version);
             }) })
           ] }),
-          versionsToDelete.size > 0 && availableVersions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName5("section"), children: [
+          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.jsxs)(
-              "select",
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName5("migrationOptions"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "div",
               {
-                title: "Select migration version",
-                className: getClassName5("select"),
-                value: migrateVersionMap[Array.from(versionsToDelete)[0]] || "decompose",
-                onChange: (e) => {
-                  const newMap = __spreadValues({}, migrateVersionMap);
-                  versionsToDelete.forEach((v) => {
-                    newMap[v] = e.target.value;
-                  });
-                  setMigrateVersionMap(newMap);
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: "decompose", children: "Decompose to basic elements" }),
-                  availableVersions.map((v) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("option", { value: v, children: [
-                    "Migrate to Version ",
-                    v
-                  ] }, v))
-                ]
+                className: getClassName5("migrationList"),
+                role: "radiogroup",
+                "aria-label": "Migration target",
+                children: migrationTargets.map((target) => {
+                  const isSelected = migrationTarget === target.value;
+                  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      role: "radio",
+                      "aria-checked": isSelected,
+                      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 })
+                      ]
+                    },
+                    target.value
+                  );
+                })
               }
-            ) })
+            ) }),
+            /* @__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_runtime11.jsx)("div", { className: getClassName5("section"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { children: [
           "Manage high-level settings for the ",
@@ -3414,11 +3563,6 @@ var Drawer = (_props) => {
       key
     )) });
   }
-  console.log(
-    getClassName6(),
-    getCategoryClassName(),
-    getCategoryClassName({ isExpanded: true })
-  );
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassName6(), children: [
     categoryEntries.map(([id, cat]) => {
       var _a2, _b2, _c;