@netlisian/softconfig 0.1.6 → 0.1.7

package/dist/puck/index.js

@@ -74,6 +74,7 @@ __export(puck_exports, {
   Drawer: () => Drawer,
   DrawerItem: () => DrawerItem,
   Header: () => Header,
+  HeaderActions: () => HeaderActions,
   Modal: () => Modal,
   SoftConfigProvider: () => SoftConfigProvider,
   applyMapping: () => applyMapping,
@@ -1121,7 +1122,7 @@ var getClassNameFactory = (rootClass, styles, config = { baseClass: "" }) => (op
 };
 var get_class_name_factory_default = getClassNameFactory;
 
-// css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/components/error-boundary/styles.module.css#css-module
+// 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
@@ -1647,26 +1648,18 @@ var generateId = (type) => type ? `${type}-${(0, import_uuid.v4)()}` : (0, impor
 var toSlug = (value) => {
   return value.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/-{2,}/g, "-").replace(/^-+|-+$/g, "");
 };
-var defaultComponentNameToKey = (displayName, context) => {
-  var _a, _b;
-  const registry = (_b = (_a = context.registryName) != null ? _a : context.registry) != null ? _b : "default";
-  return `${toSlug(registry)}/${toSlug(displayName)}`;
-};
-var defaultComponentKeyToName = (key) => {
-  const slashIndex = key.indexOf("/");
-  const componentPart = slashIndex === -1 ? key : key.slice(slashIndex + 1);
-  if (!componentPart) return "";
-  return componentPart.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+var slugTolabel = (name) => {
+  return name.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
 };
-var createComponentKeyFromName = (displayName, overrides, context) => {
-  const key = overrides.componentNameToKey ? overrides.componentNameToKey(displayName, context) : defaultComponentNameToKey(displayName, context);
+var componentNameFromLabel = (label, overrides, context) => {
+  const key = overrides.componentLabelToName ? overrides.componentLabelToName(label, context) : toSlug(label);
   return key.trim();
 };
-var getComponentNameFromKey = (key, overrides) => {
-  if (overrides == null ? void 0 : overrides.componentKeyToName) {
-    return overrides.componentKeyToName(key);
+var componentLabelFromName = (name, overrides) => {
+  if (overrides == null ? void 0 : overrides.componentNameToLabel) {
+    return overrides.componentNameToLabel(name);
   }
-  return defaultComponentKeyToName(key);
+  return slugTolabel(name);
 };
 
 // src/puck/lib/soft-component-to-appstate.ts
@@ -1862,7 +1855,7 @@ var softComponentToAppState = (softComponent, componentName, version, versions,
     mergedFieldSettings[field.name] = settings;
   });
   let rootProps = __spreadValues({
-    _name: displayName || getComponentNameFromKey(componentName, overrides),
+    _name: displayName || componentLabelFromName(componentName, overrides),
     _category: category,
     _version: version,
     _versions: versions,
@@ -2067,14 +2060,12 @@ var hydrateCustomField = (fieldName, field, fieldSettings, customFields) => {
 };
 var createVersionedComponentConfig = (componentName, displayName, version, allVersions, config, softComponents, defaultProps, showVersioning = true, customFields, overrides) => {
   var _a, _b;
-  const baseConfig = {
+  return {
     label: displayName,
     fields: Object.fromEntries(
       (Object.entries(
         (_b = (_a = softComponents[componentName].versions) == null ? void 0 : _a[version]) == null ? void 0 : _b.fields
-      ) || []).filter(
-        ([key, field]) => field.type === "slot"
-      ).map(([key, field]) => [key, __spreadValues({}, field)])
+      ) || []).filter(([key, field]) => field.type === "slot").map(([key, field]) => [key, __spreadValues({}, field)])
     ),
     defaultProps: __spreadProps(__spreadValues({}, defaultProps), {
       version
@@ -2117,10 +2108,6 @@ var createVersionedComponentConfig = (componentName, displayName, version, allVe
       );
     }
   };
-  if (overrides == null ? void 0 : overrides.mapComponentConfig) {
-    return __spreadValues(__spreadValues({}, baseConfig), overrides.mapComponentConfig(componentName, baseConfig));
-  }
-  return baseConfig;
 };
 
 // src/puck/lib/builder/sub-component-decomposer.tsx
@@ -2241,6 +2228,61 @@ function demolishSoftComponent(componentName, data, config, softComponents) {
   };
 }
 
+// src/puck/lib/edit-visibility-utils.ts
+var setEditVisibility = (doc, context) => {
+  if (!doc) return;
+  try {
+    const root = doc.documentElement;
+    if (context.mode === "none") {
+      root.removeAttribute("data-edit-mode");
+      root.classList.remove("edit-visibility-mode");
+      doc.querySelectorAll("[data-puck-component]").forEach((el) => {
+        el.removeAttribute("data-edit-visibility");
+        el.classList.remove("edit-visibility-greyed", "edit-visibility-editable", "edit-visibility-dependency");
+      });
+    } else {
+      root.setAttribute("data-edit-mode", context.mode);
+      root.classList.add("edit-visibility-mode");
+      doc.querySelectorAll("[data-puck-component]").forEach((el) => {
+        var _a;
+        const id = el.getAttribute("data-puck-component");
+        if (!id) return;
+        const isEditable = context.editableIds.has(id);
+        const isDependency = (_a = context.highlightDependencyIds) == null ? void 0 : _a.has(id);
+        if (isEditable) {
+          el.setAttribute("data-edit-visibility", "editable");
+          el.classList.remove("edit-visibility-greyed", "edit-visibility-dependency");
+          el.classList.add("edit-visibility-editable");
+        } else if (isDependency) {
+          el.setAttribute("data-edit-visibility", "dependency");
+          el.classList.remove("edit-visibility-greyed", "edit-visibility-editable");
+          el.classList.add("edit-visibility-dependency");
+        } else {
+          el.setAttribute("data-edit-visibility", "greyed");
+          el.classList.remove("edit-visibility-editable", "edit-visibility-dependency");
+          el.classList.add("edit-visibility-greyed");
+        }
+      });
+    }
+  } catch (error) {
+    console.warn(`Failed to set edit visibility:`, error);
+  }
+};
+var clearEditVisibility = (doc) => {
+  if (!doc) return;
+  try {
+    const root = doc.documentElement;
+    root.removeAttribute("data-edit-mode");
+    root.classList.remove("edit-visibility-mode");
+    doc.querySelectorAll("[data-puck-component]").forEach((el) => {
+      el.removeAttribute("data-edit-visibility");
+      el.classList.remove("edit-visibility-greyed", "edit-visibility-editable", "edit-visibility-dependency");
+    });
+  } catch (error) {
+    console.warn(`Failed to clear edit visibility:`, error);
+  }
+};
+
 // src/puck/store/slices/builder.tsx
 var createBuildersSlice = (set, get, initialConfig) => ({
   build: (history, selectedItem, itemSelector, puckDispatch, name) => {
@@ -2291,6 +2333,12 @@ var createBuildersSlice = (set, get, initialConfig) => ({
         return components;
       }
     );
+    requestAnimationFrame(
+      () => setEditVisibility(get().iframeDoc, {
+        mode: "build",
+        editableIds
+      })
+    );
     set((s) => __spreadProps(__spreadValues({}, s), {
       softConfig: buildConfig,
       storedConfig: config,
@@ -2303,15 +2351,14 @@ var createBuildersSlice = (set, get, initialConfig) => ({
       editableComponentIds: editableIds,
       state: "building"
     }));
-    setTimeout(
+    requestAnimationFrame(
       () => puckDispatch({
         type: "replaceRoot",
         root: {
           title: "Soft Component Builder",
           _name: name || "New Soft Component"
         }
-      }),
-      100
+      })
     );
   },
   remodel: (history, selectedItem, itemSelector, puckDispatch) => {
@@ -2399,6 +2446,12 @@ var createBuildersSlice = (set, get, initialConfig) => ({
         }).content
       })
     });
+    requestAnimationFrame(
+      () => setEditVisibility(get().iframeDoc, {
+        mode: "remodel",
+        editableIds
+      })
+    );
     set((s) => __spreadProps(__spreadValues({}, s), {
       storedConfig: config,
       softConfig: buildConfig,
@@ -2412,7 +2465,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
       editableComponentIds: editableIds,
       state: "remodeling"
     }));
-    setTimeout(
+    requestAnimationFrame(
       () => puckDispatch({
         type: "replaceRoot",
         root: {
@@ -2420,8 +2473,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
           _name: root.props._name,
           _category: root.props._category
         }
-      }),
-      100
+      })
     );
   },
   complete: (appState, setHistories, getItemBySelector) => {
@@ -2437,34 +2489,34 @@ var createBuildersSlice = (set, get, initialConfig) => ({
     if (!itemSelector) {
       throw new Error("No item selector found for completed component.");
     }
-    const selectedItem = getItemBySelector(
-      itemSelector
-    );
+    const selectedItem = getItemBySelector(itemSelector);
     if (!selectedItem) {
       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 rootProps = (_f = appState.data.root) == null ? void 0 : _f.props;
-    const componentName = createComponentKeyFromName(displayName, get().overrides, __spreadProps(__spreadValues({}, rootProps || {}), {
+    const componentName = componentNameFromLabel(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.");
     }
-    const [newSoftComponentConfig, version] = get().builder.compose(
+    const [defaultSoftComponentConfig, version] = get().builder.compose(
       appState,
       componentName,
       selectedItem,
       displayName,
       rootCategory
     ) || [];
-    if (!newSoftComponentConfig) {
+    if (!defaultSoftComponentConfig) {
       throw new Error("Failed to compose new soft component config.");
     }
     const storedHistories = get().originalHistory;
     setHistories([...storedHistories]);
     const config = __spreadValues({}, get().softConfig || initialConfig);
+    const mapComponentConfig = get().overrides.mapComponentConfig;
+    const newSoftComponentConfig = mapComponentConfig ? mapComponentConfig(componentName, defaultSoftComponentConfig, rootProps) : defaultSoftComponentConfig;
     set((s) => {
       var _a2, _b2;
       const nextComponents = __spreadProps(__spreadValues({}, Object.entries(config.components).reduce(
@@ -2506,10 +2558,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
         }),
         storedConfig: void 0,
         state: "inspecting",
-        originalHistory: [],
-        editingComponent: null,
-        editingComponentId: null,
-        editableComponentIds: /* @__PURE__ */ new Set()
+        originalHistory: []
       });
     });
     if (!version) {
@@ -2536,30 +2585,44 @@ var createBuildersSlice = (set, get, initialConfig) => ({
     if ((selector == null ? void 0 : selector.index) === void 0 || !(selector == null ? void 0 : selector.zone)) {
       throw new Error("No selector found for last item.");
     }
-    setTimeout(() => {
-      puckDispatch({
-        type: "remove",
-        index: selector.index,
-        zone: selector.zone
+    const editableComponentId = get().editingComponentId;
+    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;
+        });
       });
       puckDispatch({
-        type: "insert",
-        destinationIndex: selector.index,
-        destinationZone: selector.zone,
-        componentType: componentName
+        type: "setData",
+        data: (data) => {
+          return reconstructedTree(data);
+        }
       });
-    }, 500);
+    });
+    requestAnimationFrame(() => clearEditVisibility(get().iframeDoc));
     set((s) => __spreadProps(__spreadValues({}, s), {
       state: "ready",
       setItemSelector: void 0,
       setOriginalItem: void 0,
+      editingComponent: null,
       editingComponentId: null,
       editableComponentIds: /* @__PURE__ */ new Set()
     }));
   },
   cancel: (setHistories) => {
     const storedHistories = get().originalHistory;
-    setTimeout(() => setHistories([...storedHistories]), 100);
+    requestAnimationFrame(() => setHistories([...storedHistories]));
+    requestAnimationFrame(() => clearEditVisibility(get().iframeDoc));
     set((s) => __spreadProps(__spreadValues({}, s), {
       softConfig: get().storedConfig || initialConfig,
       storedConfig: void 0,
@@ -2888,74 +2951,12 @@ function buildInitialSoftComponents(hardConfig, softComponents, overrides, showV
   }
 }
 
-// src/puck/lib/edit-visibility-utils.ts
-var setEditVisibility = (doc, context) => {
-  if (!doc) return;
-  try {
-    const root = doc.documentElement;
-    if (context.mode === "none") {
-      root.removeAttribute("data-edit-mode");
-      root.classList.remove("edit-visibility-mode");
-      doc.querySelectorAll("[data-puck-component]").forEach((el) => {
-        el.removeAttribute("data-edit-visibility");
-        el.classList.remove("edit-visibility-greyed", "edit-visibility-editable", "edit-visibility-dependency");
-      });
-    } else {
-      root.setAttribute("data-edit-mode", context.mode);
-      root.classList.add("edit-visibility-mode");
-      doc.querySelectorAll("[data-puck-component]").forEach((el) => {
-        var _a;
-        const id = el.getAttribute("data-puck-component");
-        if (!id) return;
-        const isEditable = context.editableIds.has(id);
-        const isDependency = (_a = context.highlightDependencyIds) == null ? void 0 : _a.has(id);
-        if (isEditable) {
-          el.setAttribute("data-edit-visibility", "editable");
-          el.classList.remove("edit-visibility-greyed", "edit-visibility-dependency");
-          el.classList.add("edit-visibility-editable");
-        } else if (isDependency) {
-          el.setAttribute("data-edit-visibility", "dependency");
-          el.classList.remove("edit-visibility-greyed", "edit-visibility-editable");
-          el.classList.add("edit-visibility-dependency");
-        } else {
-          el.setAttribute("data-edit-visibility", "greyed");
-          el.classList.remove("edit-visibility-editable", "edit-visibility-dependency");
-          el.classList.add("edit-visibility-greyed");
-        }
-      });
-    }
-  } catch (error) {
-    console.warn(`Failed to set edit visibility:`, error);
-  }
-};
-var clearEditVisibility = (doc) => {
-  if (!doc) return;
-  try {
-    const root = doc.documentElement;
-    root.removeAttribute("data-edit-mode");
-    root.classList.remove("edit-visibility-mode");
-    doc.querySelectorAll("[data-puck-component]").forEach((el) => {
-      el.removeAttribute("data-edit-visibility");
-      el.classList.remove("edit-visibility-greyed", "edit-visibility-editable", "edit-visibility-dependency");
-    });
-  } catch (error) {
-    console.warn(`Failed to clear edit visibility:`, error);
-  }
-};
-
 // 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 = {}) => {
   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
-      })
-    ])
+    Object.entries(softComponents || {}).filter(([key]) => !hardConfig.components || !hardConfig.components[key]).map(([key, value]) => [key, __spreadProps(__spreadValues({}, value), { name: value.name || key })])
   );
-  const iframeDocRef = { current: null };
+  const iframeDoc = null;
   const hydratedSoftComponents = (overrides == null ? void 0 : overrides.hydrateMapTransform) ? hydrateSoftComponentsTransforms(
     normalizedSoftComponents,
     overrides.hydrateMapTransform
@@ -2964,323 +2965,369 @@ var createSoftConfigStore = (hardConfig = {
     hydratedSoftComponents
   );
   return (0, import_zustand2.create)()(
-    (0, import_middleware.subscribeWithSelector)(
-      (set, get) => ({
-        state: "ready",
-        originalHistory: [],
-        overrides,
-        customFields,
-        onActions,
-        iframeDocRef,
-        showVersionFields,
-        editingComponent: null,
-        setShowVersionFields: (show) => set({ showVersionFields: show }),
-        getIframeDoc: () => iframeDocRef.current,
-        setIframeDoc: (doc) => {
-          iframeDocRef.current = doc;
-          if (!doc) {
-            return;
+    (0, import_middleware.subscribeWithSelector)((set, get) => ({
+      // ─── Initial State ──────────────────────────────────────────────────────
+      state: "ready",
+      originalHistory: [],
+      overrides,
+      customFields,
+      onActions,
+      iframeDoc,
+      editingComponent: null,
+      editingComponentId: null,
+      editableComponentIds: /* @__PURE__ */ new Set(),
+      itemSelector: null,
+      originalItem: null,
+      hydratedSoftComponents,
+      softComponents: hydratedSoftComponents,
+      dependencyGraph: initialDependencyGraph,
+      showVersionFields,
+      // ─── Initial softConfig ─────────────────────────────────────────────────
+      softConfig: __spreadProps(__spreadValues({}, hardConfig), {
+        components: __spreadValues(__spreadValues({}, hardConfig.components), buildInitialSoftComponents(
+          hardConfig,
+          hydratedSoftComponents,
+          overrides,
+          showVersionFields,
+          customFields
+        )),
+        categories: __spreadValues({}, hardConfig.categories || {})
+      }),
+      // ─── UI Flags ───────────────────────────────────────────────────────────
+      setShowVersionFields: (show) => set({ showVersionFields: show }),
+      // ─── Iframe ─────────────────────────────────────────────────────────────
+      setIframeDoc: (doc) => set({
+        iframeDoc: doc
+      }),
+      // ─── History ────────────────────────────────────────────────────────────
+      storeHistory: (history) => set({ originalHistory: history }),
+      removeHistory: () => set({ originalHistory: [] }),
+      // ─── Item Selection ─────────────────────────────────────────────────────
+      setItemSelector: (selector) => set({ itemSelector: selector }),
+      setOriginalItem: (item) => set({ originalItem: item }),
+      // ─── Editing State ──────────────────────────────────────────────────────
+      setEditableComponentIds: (ids) => set({ editableComponentIds: ids }),
+      addEditableComponentId: (id) => set((state) => {
+        const newIds = new Set(state.editableComponentIds);
+        newIds.add(id);
+        return { editableComponentIds: newIds };
+      }),
+      clearEditingState: () => set({ editingComponentId: null, editableComponentIds: /* @__PURE__ */ new Set() }),
+      // ─── Action Validation ──────────────────────────────────────────────────
+      undoFn: null,
+      setUndoFn: (fn) => set({ undoFn: fn }),
+      validateAction: (action, previousAction) => {
+        var _a;
+        const { state, editableComponentIds, addEditableComponentId } = get();
+        if (state === "ready") return true;
+        if (action.type === "replace") {
+          if ((previousAction == null ? void 0 : previousAction.type) === "insert" && (previousAction == null ? void 0 : previousAction.id) === action.data.props.id) {
+            return true;
           }
-          const { state, editableComponentIds } = get();
-          if (state === "building") {
-            setEditVisibility(doc, {
-              mode: "build",
-              editableIds: editableComponentIds
-            });
-            return;
+          const parentId = (_a = action.destinationZone) == null ? void 0 : _a.split(":")[0];
+          if (action.data.props.id && editableComponentIds.has(action.data.props.id)) {
+            return true;
           }
-          if (state === "remodeling") {
-            setEditVisibility(doc, {
-              mode: "remodel",
-              editableIds: editableComponentIds
-            });
-            return;
+          if (parentId && editableComponentIds.has(parentId)) {
+            addEditableComponentId(action.data.props.id);
+            return true;
           }
-          clearEditVisibility(doc);
-        },
-        storeHistory: (history) => set({ originalHistory: history }),
-        removeHistory: () => set({ originalHistory: [] }),
-        itemSelector: null,
-        setItemSelector: (selector) => set({ itemSelector: selector }),
-        originalItem: null,
-        setOriginalItem: (item) => set({ originalItem: item }),
-        hydratedSoftComponents,
-        softComponents: hydratedSoftComponents,
-        dependencyGraph: initialDependencyGraph,
-        softConfig: __spreadProps(__spreadValues({}, hardConfig), {
-          components: __spreadValues(__spreadValues({}, hardConfig.components), buildInitialSoftComponents(
-            hardConfig,
-            hydratedSoftComponents,
-            overrides,
-            showVersionFields,
-            customFields
-          )),
-          categories: __spreadValues({}, hardConfig.categories || {})
-        }),
-        setSoftComponent: (name, version, component) => {
-          if (hardConfig.components && hardConfig.components[name]) {
-            console.warn(`Cannot set soft component "${name}" because it conflicts with a base hardConfig component.`);
-            return;
+          return false;
+        }
+        if (action.type === "insert" || action.type === "duplicate") {
+          const zone = action.type === "insert" ? action.destinationZone : action.sourceZone;
+          const parentId = zone == null ? void 0 : zone.split(":")[0];
+          const isEditable = parentId && editableComponentIds.has(parentId);
+          if (!isEditable && action.type === "duplicate") return false;
+          if (action.type === "insert" && action.id && isEditable) {
+            addEditableComponentId(action.id);
           }
-          const existing = get().softComponents[name];
-          set((state) => {
-            var _a, _b;
-            return {
-              softComponents: __spreadProps(__spreadValues({}, state.softComponents), {
-                [name]: __spreadProps(__spreadValues({}, existing), {
-                  name: component.name || (existing == null ? void 0 : existing.name) || name,
-                  category: (_a = component.category) != null ? _a : existing == null ? void 0 : existing.category,
-                  defaultVersion: version,
-                  versions: __spreadProps(__spreadValues({}, ((_b = state.softComponents[name]) == null ? void 0 : _b.versions) || {}), {
-                    [version]: component
-                  })
+        }
+        if (action.type === "remove" || action.type === "move" || action.type === "reorder") {
+          const zone = action.type === "remove" ? action.zone : action.destinationZone;
+          const parentId = zone == null ? void 0 : zone.split(":")[0];
+          if (parentId && !editableComponentIds.has(parentId)) return false;
+          return true;
+        }
+        return true;
+      },
+      // ─── Soft Component CRUD ─────────────────────────────────────────────────
+      setSoftComponent: (name, version, component) => {
+        var _a;
+        if ((_a = hardConfig.components) == null ? void 0 : _a[name]) {
+          console.warn(
+            `Cannot set soft component "${name}" because it conflicts with a hardConfig component.`
+          );
+          return;
+        }
+        const existing = get().softComponents[name];
+        set((state) => {
+          var _a2, _b;
+          return {
+            softComponents: __spreadProps(__spreadValues({}, state.softComponents), {
+              [name]: __spreadProps(__spreadValues({}, existing), {
+                name: component.name || (existing == null ? void 0 : existing.name) || name,
+                category: (_a2 = component.category) != null ? _a2 : existing == null ? void 0 : existing.category,
+                defaultVersion: version,
+                versions: __spreadProps(__spreadValues({}, ((_b = state.softComponents[name]) == null ? void 0 : _b.versions) || {}), {
+                  [version]: component
                 })
               })
-            };
-          });
-        },
-        setSoftComponents: (incomingComponents) => {
-          const state = get();
-          const nextSoftComponents = __spreadValues({}, state.softComponents);
-          const nextConfigComponents = __spreadValues({}, state.softConfig.components);
-          Object.entries(incomingComponents).forEach(([name, data]) => {
-            if (hardConfig.components && hardConfig.components[name]) {
-              return;
-            }
-            const existing = nextSoftComponents[name];
-            const finalComponentData = existing ? __spreadProps(__spreadValues(__spreadValues({}, existing), data), {
-              name: data.name || existing.name || name,
-              versions: __spreadValues(__spreadValues({}, existing.versions), data.versions)
-            }) : data;
-            finalComponentData.name = finalComponentData.name || name;
-            nextSoftComponents[name] = finalComponentData;
-            const activeVersion = finalComponentData.defaultVersion;
-            const activeVersionData = finalComponentData.versions[activeVersion];
-            if (activeVersionData) {
-              nextConfigComponents[name] = createVersionedComponentConfig(
-                name,
-                finalComponentData.name || name,
-                activeVersion,
-                Object.keys(finalComponentData.versions),
-                state.softConfig,
-                nextSoftComponents,
-                activeVersionData.defaultProps,
-                state.showVersionFields,
-                state.customFields
-              );
-            }
-          });
-          set({
-            softComponents: nextSoftComponents,
-            softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
-              components: nextConfigComponents
             })
-          });
-        },
-        hydrateTransforms: () => {
-          const { overrides: overrides2, softComponents: softComponents2, softConfig } = get();
-          if (!(overrides2 == null ? void 0 : overrides2.hydrateMapTransform)) return;
-          const hydratedComponents = hydrateSoftComponentsTransforms(
-            softComponents2,
-            overrides2.hydrateMapTransform
-          );
-          const nextConfigComponents = __spreadValues({}, softConfig.components);
-          Object.entries(hydratedComponents).forEach(([name, componentData]) => {
-            const activeVersion = componentData.defaultVersion;
-            const activeVersionData = componentData.versions[activeVersion];
-            if (activeVersionData) {
-              nextConfigComponents[name] = createVersionedComponentConfig(
-                name,
-                componentData.name || name,
-                activeVersion,
-                Object.keys(componentData.versions),
-                softConfig,
-                hydratedComponents,
-                activeVersionData.defaultProps,
-                get().showVersionFields,
-                get().customFields
-              );
-            }
-          });
-          set({
-            softComponents: hydratedComponents,
-            softConfig: __spreadProps(__spreadValues({}, softConfig), {
-              components: nextConfigComponents
-            })
-          });
-        },
-        setSoftComponentDefaultVersion: (name, version) => {
-          var _a, _b, _c, _d;
-          const softComponent = (_b = (_a = get().softComponents[name]) == null ? void 0 : _a.versions) == null ? void 0 : _b[version];
-          const allVersions = Object.keys(
-            ((_c = get().softComponents[name]) == null ? void 0 : _c.versions) || {}
-          );
-          const displayName = ((_d = get().softComponents[name]) == null ? void 0 : _d.name) || name;
-          if (!softComponent) {
-            throw new Error(
-              `Soft component "${name}" version "${version}" does not exist.`
+          };
+        });
+      },
+      setSoftComponents: (incomingComponents) => {
+        const state = get();
+        const nextSoftComponents = __spreadValues({}, state.softComponents);
+        const nextConfigComponents = __spreadValues({}, state.softConfig.components);
+        Object.entries(incomingComponents).forEach(([name, data]) => {
+          var _a;
+          if ((_a = hardConfig.components) == null ? void 0 : _a[name]) return;
+          const existing = nextSoftComponents[name];
+          const merged = existing ? __spreadProps(__spreadValues(__spreadValues({}, existing), data), {
+            name: data.name || existing.name || name,
+            versions: __spreadValues(__spreadValues({}, existing.versions), data.versions)
+          }) : data;
+          merged.name = merged.name || name;
+          nextSoftComponents[name] = merged;
+          const activeVersion = merged.defaultVersion;
+          const activeVersionData = merged.versions[activeVersion];
+          if (activeVersionData) {
+            nextConfigComponents[name] = createVersionedComponentConfig(
+              name,
+              merged.name,
+              activeVersion,
+              Object.keys(merged.versions),
+              state.softConfig,
+              nextSoftComponents,
+              activeVersionData.defaultProps,
+              state.showVersionFields,
+              state.customFields
+            );
+          }
+        });
+        set({
+          softComponents: nextSoftComponents,
+          softConfig: __spreadProps(__spreadValues({}, state.softConfig), { components: nextConfigComponents })
+        });
+      },
+      hydrateTransforms: () => {
+        const { overrides: overrides2, softComponents: softComponents2, softConfig } = get();
+        if (!(overrides2 == null ? void 0 : overrides2.hydrateMapTransform)) return;
+        const hydratedComponents = hydrateSoftComponentsTransforms(
+          softComponents2,
+          overrides2.hydrateMapTransform
+        );
+        const nextConfigComponents = __spreadValues({}, softConfig.components);
+        Object.entries(hydratedComponents).forEach(([name, componentData]) => {
+          const activeVersion = componentData.defaultVersion;
+          const activeVersionData = componentData.versions[activeVersion];
+          if (activeVersionData) {
+            nextConfigComponents[name] = createVersionedComponentConfig(
+              name,
+              componentData.name || name,
+              activeVersion,
+              Object.keys(componentData.versions),
+              softConfig,
+              hydratedComponents,
+              activeVersionData.defaultProps,
+              get().showVersionFields,
+              get().customFields
             );
           }
-          const newSoftComponentConfig = createVersionedComponentConfig(
-            name,
-            displayName,
-            version,
-            allVersions,
-            get().softConfig,
-            get().softComponents,
-            softComponent.defaultProps,
-            get().showVersionFields,
-            get().customFields
+        });
+        set({
+          softComponents: hydratedComponents,
+          softConfig: __spreadProps(__spreadValues({}, softConfig), { components: nextConfigComponents })
+        });
+      },
+      setSoftComponentDefaultVersion: (name, version) => {
+        var _a, _b, _c, _d;
+        const state = get();
+        const softComponent = (_b = (_a = state.softComponents[name]) == null ? void 0 : _a.versions) == null ? void 0 : _b[version];
+        if (!softComponent) {
+          throw new Error(
+            `Soft component "${name}" version "${version}" does not exist.`
           );
-          set((state) => ({
-            softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
-              components: __spreadProps(__spreadValues({}, state.softConfig.components), {
-                [name]: newSoftComponentConfig
-              })
-            }),
+        }
+        const allVersions = Object.keys(
+          ((_c = state.softComponents[name]) == null ? void 0 : _c.versions) || {}
+        );
+        const displayName = ((_d = state.softComponents[name]) == null ? void 0 : _d.name) || name;
+        const newConfig = createVersionedComponentConfig(
+          name,
+          displayName,
+          version,
+          allVersions,
+          state.softConfig,
+          state.softComponents,
+          softComponent.defaultProps,
+          state.showVersionFields,
+          state.customFields
+        );
+        set((s) => ({
+          softConfig: __spreadProps(__spreadValues({}, s.softConfig), {
+            components: __spreadProps(__spreadValues({}, s.softConfig.components), { [name]: newConfig })
+          }),
+          softComponents: __spreadProps(__spreadValues({}, s.softComponents), {
+            [name]: __spreadProps(__spreadValues({}, s.softComponents[name]), { defaultVersion: version })
+          })
+        }));
+      },
+      removeSoftComponentVersion: (key, version) => {
+        set((state) => {
+          const component = state.softComponents[key];
+          if (!component) return {};
+          const newVersions = Object.fromEntries(
+            Object.entries(component.versions || {}).filter(
+              ([k]) => k !== version
+            )
+          );
+          let newDefaultVersion = component.defaultVersion;
+          if (component.defaultVersion === version) {
+            const versionKeys = Object.keys(newVersions);
+            newDefaultVersion = versionKeys.length > 0 ? versionKeys[versionKeys.length - 1] : "";
+          }
+          return {
             softComponents: __spreadProps(__spreadValues({}, state.softComponents), {
-              [name]: __spreadProps(__spreadValues({}, state.softComponents[name]), {
-                defaultVersion: version
+              [key]: __spreadProps(__spreadValues({}, component), {
+                versions: newVersions,
+                defaultVersion: newDefaultVersion
               })
             })
-          }));
-        },
-        removeSoftComponentVersion: (key, version) => {
-          set((state) => {
-            const component = state.softComponents[key];
-            if (!component) return {};
-            const newVersions = Object.fromEntries(
-              Object.entries(component.versions || {}).filter(
-                ([k, _]) => k !== version
-              )
-            );
-            let newDefaultVersion = component.defaultVersion;
-            if (component.defaultVersion === version) {
-              const versionKeys = Object.keys(newVersions);
-              newDefaultVersion = versionKeys.length > 0 ? versionKeys[versionKeys.length - 1] : "";
-            }
-            return {
-              softComponents: __spreadProps(__spreadValues({}, state.softComponents), {
-                [key]: __spreadProps(__spreadValues({}, component), {
-                  versions: newVersions,
-                  defaultVersion: newDefaultVersion
-                })
-              })
-            };
-          });
-        },
-        removeSoftComponent: (key) => {
-          set((state) => ({
-            softComponents: Object.fromEntries(
-              Object.entries(state.softComponents).filter(([k, _]) => k !== key)
-            )
-          }));
-        },
-        setSoftComponentConfig: (key, config, category) => {
-          set((state) => {
-            var _a, _b, _c;
-            return {
-              softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
-                components: __spreadProps(__spreadValues({}, state.softConfig.components), {
-                  [key]: __spreadValues({}, config)
-                }),
-                categories: category ? __spreadProps(__spreadValues({}, state.softConfig.categories || {}), {
-                  [category]: __spreadProps(__spreadValues({}, ((_a = state.softConfig.categories) == null ? void 0 : _a[category]) || {}), {
-                    components: [
-                      ...((_c = (_b = state.softConfig.categories) == null ? void 0 : _b[category]) == null ? void 0 : _c.components) || [],
-                      key
-                    ]
-                  })
-                }) : state.softConfig.categories || {}
-              })
-            };
-          });
-        },
-        removeSoftComponentConfig: (key) => {
-          set((state) => ({
+          };
+        });
+      },
+      removeSoftComponent: (key) => set((state) => ({
+        softComponents: Object.fromEntries(
+          Object.entries(state.softComponents).filter(([k]) => k !== key)
+        )
+      })),
+      setSoftComponentConfig: (key, config, category) => {
+        set((state) => {
+          var _a, _b, _c;
+          return {
             softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
-              components: Object.fromEntries(
-                Object.entries(state.softConfig.components).filter(
-                  ([k, _]) => k !== key
-                )
-              )
-            })
-          }));
-        },
-        setSoftCategoryConfig: (key, category) => {
-          set((state) => {
-            var _a;
-            return {
-              softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
-                categories: __spreadProps(__spreadValues({}, state.softConfig.categories), {
-                  [key]: __spreadValues(__spreadValues({}, (_a = state.softConfig.categories) == null ? void 0 : _a[key]), category)
+              components: __spreadProps(__spreadValues({}, state.softConfig.components), {
+                [key]: __spreadValues({}, config)
+              }),
+              categories: category ? __spreadProps(__spreadValues({}, state.softConfig.categories || {}), {
+                [category]: __spreadProps(__spreadValues({}, ((_a = state.softConfig.categories) == null ? void 0 : _a[category]) || {}), {
+                  components: [
+                    ...((_c = (_b = state.softConfig.categories) == null ? void 0 : _b[category]) == null ? void 0 : _c.components) || [],
+                    key
+                  ]
                 })
-              })
-            };
-          });
-        },
-        removeSoftCategoryConfig: (key) => {
-          set((state) => ({
-            softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
-              categories: Object.fromEntries(
-                Object.entries(state.softConfig.categories || {}).filter(
-                  ([k, _]) => k !== key
-                )
-              )
+              }) : state.softConfig.categories || {}
             })
-          }));
-        },
-        builder: createBuildersSlice(set, get, hardConfig),
-        editingComponentId: null,
-        editableComponentIds: /* @__PURE__ */ new Set(),
-        setEditableComponentIds: (ids) => set({ editableComponentIds: ids }),
-        addEditableComponentId: (id) => {
-          set((state) => {
-            const newIds = new Set(state.editableComponentIds);
-            newIds.add(id);
-            return { editableComponentIds: newIds };
-          });
-        },
-        clearEditingState: () => set({
-          editingComponentId: null,
-          editableComponentIds: /* @__PURE__ */ new Set()
-        }),
-        rebuildDependents: (componentName, version) => {
-          const state = get();
-          const dependents = state.dependencyGraph.get(componentName) || /* @__PURE__ */ new Set();
-          if (dependents.size === 0) return;
-          const config = __spreadValues({}, state.softConfig);
-          const softComponents2 = state.softComponents;
-          const toBuild = Array.from(dependents);
-          for (const dependentName of toBuild) {
-            const dependent = softComponents2[dependentName];
-            const defaultVersion = dependent.defaultVersion || Object.keys(dependent.versions || {}).pop();
-            if (!defaultVersion) continue;
-            const versionedComponent = dependent.versions[defaultVersion];
-            const allVersions = Object.keys(dependent.versions || {});
-            if (!versionedComponent) continue;
-            const newConfig = createVersionedComponentConfig(
-              dependentName,
-              dependent.name || dependentName,
-              defaultVersion,
-              allVersions,
-              config,
-              softComponents2,
-              versionedComponent.defaultProps,
-              state.showVersionFields,
-              state.customFields
-            );
-            config.components[dependentName] = newConfig;
-          }
-          set((s) => __spreadProps(__spreadValues({}, s), { softConfig: config }));
+          };
+        });
+      },
+      removeSoftComponentConfig: (key) => set((state) => ({
+        softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
+          components: Object.fromEntries(
+            Object.entries(state.softConfig.components).filter(
+              ([k]) => k !== key
+            )
+          )
+        })
+      })),
+      setSoftCategoryConfig: (key, category) => set((state) => {
+        var _a;
+        return {
+          softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
+            categories: __spreadProps(__spreadValues({}, state.softConfig.categories), {
+              [key]: __spreadValues(__spreadValues({}, (_a = state.softConfig.categories) == null ? void 0 : _a[key]), category)
+            })
+          })
+        };
+      }),
+      removeSoftCategoryConfig: (key) => set((state) => ({
+        softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
+          categories: Object.fromEntries(
+            Object.entries(state.softConfig.categories || {}).filter(
+              ([k]) => k !== key
+            )
+          )
+        })
+      })),
+      // ─── Builder Slice ────────────────────────────────────────────────────────
+      builder: createBuildersSlice(set, get, hardConfig),
+      // ─── Dependency Graph ─────────────────────────────────────────────────────
+      rebuildDependents: (componentName) => {
+        const state = get();
+        const dependents = state.dependencyGraph.get(componentName) || /* @__PURE__ */ new Set();
+        if (dependents.size === 0) return;
+        const nextConfig = __spreadValues({}, state.softConfig);
+        const { softComponents: softComponents2 } = state;
+        for (const dependentName of Array.from(dependents)) {
+          const dependent = softComponents2[dependentName];
+          const defaultVersion = dependent.defaultVersion || Object.keys(dependent.versions || {}).pop();
+          if (!defaultVersion) continue;
+          const versionedComponent = dependent.versions[defaultVersion];
+          if (!versionedComponent) continue;
+          nextConfig.components[dependentName] = createVersionedComponentConfig(
+            dependentName,
+            dependent.name || dependentName,
+            defaultVersion,
+            Object.keys(dependent.versions || {}),
+            nextConfig,
+            softComponents2,
+            versionedComponent.defaultProps,
+            state.showVersionFields,
+            state.customFields
+          );
         }
-      })
-    )
+        set((s) => __spreadProps(__spreadValues({}, s), { softConfig: nextConfig }));
+      }
+    }))
   );
 };
 
 // src/puck/context/storeProvider.tsx
 var import_react5 = require("react");
+
+// src/puck/lib/notify.ts
+var customHandler = null;
+var defaultHandler = (message, type) => {
+  if (type === "error") {
+    console.error(`[Error] ${message}`);
+  } else {
+    console.log(`[Success] ${message}`);
+  }
+};
+var setNotificationHandler = (handler) => {
+  customHandler = handler;
+};
+var notify = {
+  error: (message) => {
+    const handler = customHandler || defaultHandler;
+    handler(message, "error");
+  },
+  success: (message) => {
+    const handler = customHandler || defaultHandler;
+    handler(message, "success");
+  }
+};
+
+// src/puck/lib/action-callback.ts
+var createActionCallback = (validateAction, undo) => {
+  return (action) => {
+    if (!undo) {
+      return;
+    }
+    const isValid = validateAction(action);
+    if (!isValid) {
+      notify.error(
+        "Editing outside the soft component is not allowed when you are editing component definition."
+      );
+      requestAnimationFrame(() => undo());
+    }
+  };
+};
+
+// src/puck/context/storeProvider.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var SoftConfigProvider = ({
   children,
@@ -3316,57 +3363,8 @@ var SoftConfigProvider = ({
   const [internalSoftComponents, setSoftComponents] = (0, import_react5.useState)(
     () => store.getState().softComponents
   );
-  const storeSetIframeDoc = (0, import_react5.useMemo)(
-    () => store.getState().setIframeDoc,
-    [store]
-  );
-  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;
-      }
-      if (action.type === "insert" || action.type === "duplicate") {
-        const zone = action.type === "insert" ? action.destinationZone : action.sourceZone;
-        const parentId = zone == null ? void 0 : zone.split(":")[0];
-        if (parentId && !editableIds.has(parentId)) {
-          return false;
-        }
-        if (action.type === "insert") {
-          const childId = action.id;
-          if (childId) {
-            currentState.addEditableComponentId(childId);
-          }
-        }
-        return true;
-      }
-      if (action.type === "remove" || action.type === "move" || action.type === "reorder") {
-        let parentId;
-        if (action.type === "remove") {
-          parentId = action.zone.split(":")[0];
-        } else if (action.type === "move" || action.type === "reorder") {
-          parentId = action.destinationZone.split(":")[0];
-        }
-        if (parentId && !editableIds.has(parentId)) {
-          return false;
-        }
-        return true;
-      }
-      return true;
-    },
-    [store]
+  const [actionGuard, setActionGuard] = (0, import_react5.useState)(
+    (action) => null
   );
   (0, import_react5.useEffect)(() => {
     const unsubscribe = store.subscribe(() => {
@@ -3379,59 +3377,26 @@ var SoftConfigProvider = ({
   }, [store]);
   (0, import_react5.useEffect)(() => {
     const unsubscribe = store.subscribe((state, prevState) => {
-      if (prevState && state.state === prevState.state && state.editableComponentIds === prevState.editableComponentIds) {
-        return;
-      }
-      const doc = store.getState().getIframeDoc();
-      if (!doc) return;
-      if (state.state === "building") {
-        setEditVisibility(doc, { mode: "build", editableIds: state.editableComponentIds });
+      if (prevState && prevState.undoFn === state.undoFn) {
         return;
       }
-      if (state.state === "remodeling") {
-        setEditVisibility(doc, { mode: "remodel", editableIds: state.editableComponentIds });
-        return;
-      }
-      requestAnimationFrame(() => {
-        const freshDoc = store.getState().getIframeDoc();
-        if (freshDoc) {
-          clearEditVisibility(freshDoc);
-        }
-      });
+      setActionGuard(
+        () => createActionCallback(
+          state.validateAction,
+          state.undoFn
+        )
+      );
     });
     return () => {
       unsubscribe();
     };
-  }, [store]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(appStoreContext.Provider, { value: store, children: children(softConfig, internalSoftComponents, storeSetIframeDoc, validateAction) });
+  }, [store.getState().undoFn]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(appStoreContext.Provider, { value: store, children: children(softConfig, internalSoftComponents, actionGuard) });
 };
 
 // src/puck/actions/useBuild.tsx
 var import_puck5 = require("@measured/puck");
 
-// src/puck/lib/notify.ts
-var customHandler = null;
-var defaultHandler = (message, type) => {
-  if (type === "error") {
-    console.error(`[Error] ${message}`);
-  } else {
-    console.log(`[Success] ${message}`);
-  }
-};
-var setNotificationHandler = (handler) => {
-  customHandler = handler;
-};
-var notify = {
-  error: (message) => {
-    const handler = customHandler || defaultHandler;
-    handler(message, "error");
-  },
-  success: (message) => {
-    const handler = customHandler || defaultHandler;
-    handler(message, "success");
-  }
-};
-
 // src/puck/hooks/useActionEvent.ts
 var import_react6 = require("react");
 var useActionEvent = () => {
@@ -3809,7 +3774,7 @@ var useSetDefaultVersion = () => {
 // src/puck/overrides/Header.tsx
 var import_puck13 = require("@measured/puck");
 
-// css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/Header.module.css#css-module
+// 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
@@ -3858,7 +3823,6 @@ var Header = ({
   const { handleComplete, newComponent, setNewComponent } = useComplete();
   const { handleCancel, canCancel } = useCancel();
   const { handlePublish } = usePublish();
-  const puck = usePuck((s) => s.config);
   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" }),
@@ -3894,7 +3858,7 @@ var import_react9 = require("react");
 var import_puck14 = require("@measured/puck");
 var import_lucide_react = require("lucide-react");
 
-// css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/ActionBar.module.css#css-module
+// css-module:/home/osamu/Documents/netlisian-soft/packages/soft-config/src/puck/overrides/ActionBar.module.css#css-module
 var ActionBar_module_default = { "ActionBar": "_ActionBar_pvuie_5", "ActionBar-label": "_ActionBar-label_pvuie_39", "ActionBar-action": "_ActionBar-action_pvuie_63", "ActionBar-group": "_ActionBar-group_pvuie_79" };
 
 // src/puck/overrides/ActionBar.tsx
@@ -3920,7 +3884,7 @@ var ActionBarOverride = (props) => {
     if (selectedType && softKeys.includes(selectedType)) {
       return selectedType;
     }
-    return createComponentKeyFromName(props.label || "", overrides, __spreadProps(__spreadValues({}, rootProps || {}), {
+    return componentNameFromLabel(props.label || "", overrides, __spreadProps(__spreadValues({}, rootProps || {}), {
       existingKeys: softKeys,
       state: status
     }));
@@ -3936,17 +3900,17 @@ 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 displayName = (0, import_react9.useMemo)(() => {
+  const label = (0, import_react9.useMemo)(() => {
     var _a2;
     if (isSoftComponent2) {
-      return ((_a2 = softComponents[key]) == null ? void 0 : _a2.name) || getComponentNameFromKey(key, overrides);
+      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: [
       props.parentAction,
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_puck14.ActionBar.Label, { label: displayName })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_puck14.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: [
@@ -4001,14 +3965,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
+// css-module:/home/osamu/Documents/netlisian-soft/packages/soft-config/src/puck/overrides/DrawerItem.module.css#css-module
 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
+// 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
@@ -4243,6 +4207,7 @@ var DrawerItem = (props) => {
                   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                     "button",
                     {
+                      "aria-label": target.label,
                       type: "button",
                       role: "radio",
                       "aria-checked": isSelected,
@@ -4293,7 +4258,7 @@ var import_react12 = require("react");
 var import_puck16 = require("@measured/puck");
 var import_lucide_react3 = require("lucide-react");
 
-// css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/Drawer.module.css#css-module
+// 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
@@ -4405,25 +4370,37 @@ var Drawer = (_props) => {
   ] });
 };
 
-// src/puck/lib/action-callback.ts
-var createActionCallback = (validateAction, undo) => {
-  return (action) => {
-    const isValid = validateAction(action);
-    if (!isValid) {
-      notify.error(
-        "Editing outside the soft component is not allowed when you are editing component definition."
-      );
-      if (typeof requestAnimationFrame === "function") {
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            undo();
-          });
-        });
-      } else {
-        setTimeout(() => undo(), 0);
+// src/puck/overrides/HeaderActions.tsx
+var import_puck17 = require("@measured/puck");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var usePuck5 = (0, import_puck17.createUsePuck)();
+var HeaderActions = ({ children }) => {
+  const { handleComplete } = useComplete();
+  const { handleCancel, canCancel } = useCancel();
+  const dispatch = usePuck5((s) => s.dispatch);
+  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,
+      {
+        variant: "primary",
+        onClick: () => {
+          const completedComponent = handleComplete();
+          if (completedComponent) {
+            try {
+              inspect(completedComponent.id, dispatch);
+            } catch (error) {
+              notify.error(
+                "Failed to inspect after completion: " + (error instanceof Error ? error.message : String(error))
+              );
+            }
+          }
+        },
+        children: "Complete"
       }
-    }
-  };
+    )
+  ] }) : children });
 };
 
 // src/puck/lib/dissolve-all-soft-components.ts
@@ -4635,6 +4612,7 @@ var resolveSoftConfig = (data, softComponents, config) => {
   Drawer,
   DrawerItem,
   Header,
+  HeaderActions,
   Modal,
   SoftConfigProvider,
   applyMapping,