@netlisian/softconfig 0.1.3 → 0.1.4

package/dist/puck/index.mjs

@@ -18,18 +18,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 __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -308,7 +296,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"
@@ -358,7 +346,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)
@@ -400,14 +388,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;
@@ -913,6 +901,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],
@@ -937,6 +940,7 @@ var softComponentFromAppState = (appState, configComponents, editedItem, metadat
       }, {})),
       fieldSettings: field_settings,
       defaultProps,
+      rootProps: customRootProps,
       components,
       slots
     },
@@ -948,6 +952,24 @@ var softComponentFromAppState = (appState, configComponents, editedItem, metadat
 import { v4 as uuidv4 } from "uuid";
 var generateId = (type) => type ? `${type}-${uuidv4()}` : uuidv4();
 
+// 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 = [];
@@ -1066,7 +1088,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,
@@ -1077,14 +1099,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,
@@ -1106,114 +1131,111 @@ var rootZone = "default-zone";
 var rootDroppableId = `${rootAreaId}:${rootZone}`;
 
 // src/puck/components/soft-render/index.tsx
-import { useMemo, useRef } from "react";
-import { v4 as uuidv42 } from "uuid";
-import equal from "fast-deep-equal";
+import React2, { useMemo, memo } from "react";
+import equal from "react-fast-compare";
 import { Fragment as Fragment2, jsx as jsx5 } from "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 = useRef(/* @__PURE__ */ new Map());
-  const prevPropsRef = useRef(null);
-  if (!equal(prevPropsRef.current, props)) {
-    mapCacheRef.current.clear();
-    prevPropsRef.current = props;
-  }
-  const subComponentRootProps = 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 (React2.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__ */ jsx5(Fragment2, { children: (softSubComponent == null ? void 0 : softSubComponent.length) > 0 && softSubComponent.map((subComponent, index) => {
-    var _a2;
+}
+var SubComponentRenderer = 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 = useMemo(
-      () => depth === 0 ? id : `${subComponent.type}-${id}-d${depth}-${uuidv42()}`,
-      [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 = 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] = useMemo(
-              () => rest[slotName] || (() => null),
-              [slotName, rest[slotName]]
-            );
+            clonedProps[slotKey] = (_c = props[slotName]) != null ? _c : (() => null);
           } else {
-            resolvedProps[slotKey] = useMemo(() => {
-              return ({
-                className,
-                style
-              }) => {
-                var _a4, _b2;
-                return /* @__PURE__ */ jsx5("div", { className, style, children: /* @__PURE__ */ jsx5(
-                  SoftRender,
-                  {
-                    softComponentFields,
-                    softSubComponent: (_b2 = (_a4 = subComponent == null ? void 0 : subComponent.components) == null ? void 0 : _a4[slotKey]) != null ? _b2 : [],
-                    configComponents,
-                    props,
-                    depth: depth + 1
-                  },
-                  slotKey
-                ) });
-              };
-            }, [slotKey, subComponentRootProps]);
+            clonedProps[slotKey] = ({
+              className,
+              style
+            }) => {
+              var _a3, _b2;
+              return /* @__PURE__ */ jsx5("div", { className, style, children: /* @__PURE__ */ jsx5(
+                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__ */ jsx5(ErrorBoundary, { children: /* @__PURE__ */ jsx5(
       ComponentRender,
@@ -1221,10 +1243,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 && equal(prev.props, next.props) && equal(prev.subComponent, next.subComponent) && equal(prev.softComponentFieldSettings, next.softComponentFieldSettings)
+);
+SubComponentRenderer.displayName = "SubComponentRenderer";
+var SoftRender = memo(
+  ({
+    softComponentFields,
+    softComponentFieldSettings,
+    softSubComponent,
+    configComponents,
+    props,
+    depth = 0
+  }) => {
+    if (!(softSubComponent == null ? void 0 : softSubComponent.length)) return null;
+    return /* @__PURE__ */ jsx5(Fragment2, { children: softSubComponent.map((subComponent, index) => {
+      var _a;
+      return /* @__PURE__ */ jsx5(
+        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 && equal(prev.props, next.props) && equal(prev.softSubComponent, next.softSubComponent) && equal(prev.softComponentFieldSettings, next.softComponentFieldSettings)
+);
+SoftRender.displayName = "SoftRender";
 
 // src/puck/lib/create-versioned-component-config.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
@@ -1378,18 +1443,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) => {
@@ -1489,6 +1542,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
     );
@@ -1541,6 +1595,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
         zone: itemSelector.zone || rootDroppableId
       },
       editingComponentId: selectedItem.props.id,
+      editingComponent: softComponentName,
       editableComponentIds: editableIds,
       state: "remodeling"
     }));
@@ -1557,7 +1612,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
     );
   },
   complete: (appState, setHistories, getItemBySelector) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     if (get().state === "ready") {
       throw new Error("Not building or remodeling a component.");
     }
@@ -1576,10 +1631,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.");
     }
@@ -1638,6 +1694,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
         storedConfig: void 0,
         state: "inspecting",
         originalHistory: [],
+        editingComponent: null,
         editingComponentId: null,
         editableComponentIds: /* @__PURE__ */ new Set()
       });
@@ -1645,7 +1702,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
     if (!version) {
       throw new Error("Failed to resolve completed component version.");
     }
-    const completedSoftComponent = (_f = get().softComponents[componentName]) == null ? void 0 : _f.versions[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.`
@@ -1697,6 +1754,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
       itemSelector: null,
       originalItem: null,
       state: "ready",
+      editingComponent: null,
       editingComponentId: null,
       editableComponentIds: /* @__PURE__ */ new Set()
     }));
@@ -1789,6 +1847,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
     );
@@ -2093,6 +2152,7 @@ var createSoftConfigStore = (hardConfig = {
         onActions,
         iframeDocRef,
         showVersionFields,
+        editingComponent: null,
         setShowVersionFields: (show) => set({ showVersionFields: show }),
         getIframeDoc: () => iframeDocRef.current,
         setIframeDoc: (doc) => {
@@ -2386,7 +2446,7 @@ var createSoftConfigStore = (hardConfig = {
 };
 
 // src/puck/context/storeProvider.tsx
-import { useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
+import { useEffect as useEffect2, useMemo as useMemo2, useState } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var SoftConfigProvider = ({
   children,
@@ -2401,10 +2461,10 @@ var SoftConfigProvider = ({
     () => createSoftConfigStore(hardConfig, softComponents, overrides, onActions, useVersioning),
     [hardConfig, softComponents, overrides, onActions, useVersioning]
   );
-  const [softConfig, setSoftConfig] = useState2(
+  const [softConfig, setSoftConfig] = useState(
     () => store.getState().softConfig
   );
-  const [internalSoftComponents, setSoftComponents] = useState2(
+  const [internalSoftComponents, setSoftComponents] = useState(
     () => store.getState().softComponents
   );
   const storeSetIframeDoc = useMemo2(
@@ -2413,14 +2473,19 @@ var SoftConfigProvider = ({
   );
   const validateAction = useMemo2(
     () => (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;
       }
@@ -2633,7 +2698,7 @@ var useRemodel = () => {
 
 // src/puck/actions/useComplete.tsx
 import { createUsePuck as createUsePuck4 } from "@measured/puck";
-import { useState as useState3, useCallback as useCallback2 } from "react";
+import { useState as useState2, useCallback as useCallback2 } from "react";
 var useCustomPuck4 = createUsePuck4();
 var useComplete = () => {
   const complete = useSoftConfig((s) => s.builder.complete);
@@ -2641,7 +2706,7 @@ var useComplete = () => {
   const setHistories = useCustomPuck4((s) => s.history.setHistories);
   const getItemBySelector = useCustomPuck4((s) => s.getItemBySelector);
   const status = useSoftConfig((s) => s.state);
-  const [newComponent, setNewComponent] = useState3(null);
+  const [newComponent, setNewComponent] = useState2(null);
   const { triggerAction } = useActionEvent();
   const handleComplete = useCallback2(() => {
     if (status === "ready") {
@@ -2989,7 +3054,7 @@ import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs3 } from "react/jsx-run
 var getClassName3 = get_class_name_factory_default("ActionBar", ActionBar_module_default);
 var usePuck2 = createUsePuck11();
 var ActionBarOverride = (props) => {
-  var _a;
+  var _a, _b;
   const { handleBuild } = useBuild("Custom Name");
   const { handleRemodel } = useRemodel();
   const { handleDecompose } = useDecompose();
@@ -2997,20 +3062,31 @@ var ActionBarOverride = (props) => {
   const softComponents = useSoftConfig((s) => s.softComponents, 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 = useMemo3(() => createComponentKeyFromName(props.label || "", overrides, {
-    existingKeys: softKeys,
-    state: status
-  }), [
+  const key = useMemo3(() => {
+    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__ */ jsx9("div", { className: getClassName3(), children: /* @__PURE__ */ jsxs3(ActionBar, { children: [
     /* @__PURE__ */ jsxs3(ActionBar.Group, { children: [
       props.parentAction,
@@ -3048,7 +3124,7 @@ var ActionBarOverride = (props) => {
 };
 
 // src/puck/overrides/DrawerItem.tsx
-import { useState as useState5 } from "react";
+import { useState as useState4 } from "react";
 import { Button as Button2, IconButton, createUsePuck as createUsePuck12 } from "@measured/puck";
 import { GripVertical, Check, X, Trash2, Cog } from "lucide-react";
 
@@ -3073,7 +3149,7 @@ 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
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect4, useState as useState3 } from "react";
 import { createPortal } from "react-dom";
 
 // css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/components/modal/styles.module.css#css-module
@@ -3087,7 +3163,7 @@ var Modal = ({
   onClose,
   isOpen
 }) => {
-  const [rootEl, setRootEl] = useState4(null);
+  const [rootEl, setRootEl] = useState3(null);
   useEffect4(() => {
     setRootEl(document.getElementById("puck-portal-root"));
   }, []);
@@ -3151,13 +3227,13 @@ var DrawerItem = (props) => {
   const { handleDemolish } = useDemolish();
   const { handleSetDefaultVersion, getVersions, getDefaultVersion } = useSetDefaultVersion();
   const { triggerAction } = useActionEvent();
-  const [isEditing, setIsEditing] = useState5(false);
-  const [isHovering, setIsHovering] = useState5(false);
-  const [selectedVersion, setSelectedVersion] = useState5("");
-  const [versionsToDelete, setVersionsToDelete] = useState5(
+  const [isEditing, setIsEditing] = useState4(false);
+  const [isHovering, setIsHovering] = useState4(false);
+  const [selectedVersion, setSelectedVersion] = useState4("");
+  const [versionsToDelete, setVersionsToDelete] = useState4(
     /* @__PURE__ */ new Set()
   );
-  const [migrationTarget, setMigrationTarget] = useState5("decompose");
+  const [migrationTarget, setMigrationTarget] = useState4("decompose");
   const useVersioning = useSoftConfig((s) => s.showVersionFields);
   const versions = getVersions(props.name);
   const defaultVersion = getDefaultVersion(props.name);
@@ -3356,7 +3432,7 @@ var DrawerItem = (props) => {
 var ComponentItem = DrawerItem;
 
 // src/puck/overrides/Drawer.tsx
-import { useState as useState6 } from "react";
+import { useState as useState5 } from "react";
 import { createUsePuck as createUsePuck13, Drawer as PuckDrawer } from "@measured/puck";
 import { ChevronDown, ChevronUp } from "lucide-react";
 
@@ -3415,7 +3491,7 @@ var Drawer = (_props) => {
   const categoryEntries = Object.entries(categories).filter(
     ([, cat]) => cat.visible !== false
   );
-  const [expanded, setExpanded] = useState6(() => {
+  const [expanded, setExpanded] = useState5(() => {
     const init = {};
     categoryEntries.forEach(([id, cat]) => {
       init[id] = cat.defaultExpanded !== false;