@netlisian/softconfig 0.1.0 → 0.1.1

package/dist/puck/index.mjs

@@ -309,13 +309,27 @@ var updateVersion = (version, increment) => {
 };
 var builderRootConfig = (config, overrides, editingComponent, showVersionFields = true) => ({
   fields: {
-    // _editor: {
-    //   type: "slot",
-    // },
-    _name: {
+    _name: overrides.name || {
       type: "text",
       label: "Soft Component Name"
     },
+    _category: overrides.categories || {
+      type: "select",
+      label: "Category",
+      options: [
+        ...Object.keys(config.categories || {}).map((cat) => {
+          var _a;
+          return {
+            label: ((_a = config.categories) == null ? void 0 : _a[cat].title) || cat,
+            value: cat
+          };
+        }) || [],
+        {
+          label: Object.keys(config.categories || {}).length ? "Other" : "Uncategorized",
+          value: void 0
+        }
+      ]
+    },
     _fields: {
       type: "array",
       label: "Fields",
@@ -385,7 +399,9 @@ var builderRootConfig = (config, overrides, editingComponent, showVersionFields
     }
     return fields;
   },
-  resolveData: (props) => {
+  resolveData: (props, params) => {
+    if (overrides.onRootsDataChange)
+      overrides.onRootsDataChange(props, params);
     return {
       props,
       readOnly: Boolean(editingComponent) ? {
@@ -556,7 +572,7 @@ var getClassNameFactory = (rootClass, styles, config = { baseClass: "" }) => (op
 };
 var get_class_name_factory_default = getClassNameFactory;
 
-// css-module:/media/osamu/3628738E28734BBD/osamuProjects/netlisian/packages/soft-config/src/puck/components/error-boundary/styles.module.css#css-module
+// css-module:/media/manual_mount/osamuProjects/netlisian/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
@@ -765,7 +781,8 @@ var builderConfig = (config, overrides, editingComponent, showVersionFields = tr
       return acc;
     },
     {}
-  )
+  ),
+  categories: config.categories || {}
 });
 
 // src/puck/lib/strip-id.ts
@@ -891,7 +908,7 @@ var softFieldsToPuckFields = (fields, fieldSettings) => {
     {}
   )) || {};
 };
-var softComponentFromAppState = (appState, configComponents, editedItem) => {
+var softComponentFromAppState = (appState, configComponents, editedItem, metadata) => {
   var _a;
   const rootProps = ((_a = appState.data.root) == null ? void 0 : _a.props) || {};
   const fields = rootProps._fields || [];
@@ -912,6 +929,8 @@ var softComponentFromAppState = (appState, configComponents, editedItem) => {
   )), slots);
   return [
     {
+      name: metadata.name,
+      category: metadata.category,
       fields: __spreadValues(__spreadValues({}, softFieldsToPuckFields(fields, field_settings)), Object.keys(slots).reduce((acc, slot) => {
         acc[slot] = { type: "slot", label: slot };
         return acc;
@@ -1047,7 +1066,7 @@ var reconstructComponents = (subComponents, componentConfigs, softComponentProps
     return componentData;
   });
 };
-var softComponentToAppState = (softComponent, componentName, version, versions, componentProps, componentConfigs) => {
+var softComponentToAppState = (softComponent, componentName, version, versions, componentProps, componentConfigs, displayName, category) => {
   const slots = new Set(Object.keys(softComponent.slots));
   const { fields, fieldSettings } = puckFieldsToSoftFields(
     softComponent.fields,
@@ -1059,7 +1078,8 @@ var softComponentToAppState = (softComponent, componentName, version, versions,
     }
   });
   const rootProps = {
-    _name: componentName,
+    _name: displayName || componentName,
+    _category: category,
     _version: version,
     _versions: versions,
     _fields: fields,
@@ -1208,10 +1228,11 @@ function SoftRender({
 
 // src/puck/lib/create-versioned-component-config.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
-var createVersionedComponentConfig = (componentName, version, allVersions, config, softComponents, defaultProps, showVersioning = true) => {
+var createVersionedComponentConfig = (componentName, displayName, version, allVersions, config, softComponents, defaultProps, showVersioning = true) => {
   var _a, _b;
   const softConfig = config;
   return {
+    label: displayName,
     fields: Object.fromEntries(
       (Object.entries(
         (_b = (_a = softComponents[componentName].versions) == null ? void 0 : _a[version]) == null ? void 0 : _b.fields
@@ -1357,9 +1378,21 @@ 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) => {
+  build: (history, selectedItem, itemSelector, puckDispatch, name) => {
     if (!selectedItem || !itemSelector) {
       throw new Error("No item selected to build from.");
     }
@@ -1372,7 +1405,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
         data: __spreadProps(__spreadValues({}, previous.data), {
           root: {
             props: {
-              _name: "New Soft Component"
+              _name: name || "New Soft Component"
             }
           }
           // content: [{ ...selectedItem }],
@@ -1381,7 +1414,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
     });
     const config = __spreadValues({}, get().softConfig);
     const overrides = get().overrides;
-    const buildConfig = builderConfig(config, overrides, selectedItem.type, get().showVersionFields);
+    const buildConfig = builderConfig(config, overrides, void 0, get().showVersionFields);
     const editableIds = /* @__PURE__ */ new Set([selectedItem.props.id]);
     const initialContent = [__spreadValues({}, selectedItem)];
     walkTree3(
@@ -1414,7 +1447,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
         type: "replaceRoot",
         root: {
           title: "Soft Component Builder",
-          _name: "New Soft Component"
+          _name: name || "New Soft Component"
         }
       }),
       100
@@ -1431,6 +1464,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
     }
     const softComponentVersion = ((_a = selectedItem.props) == null ? void 0 : _a.version) || "1.0.0";
     const softComponent = (_b = get().softComponents[softComponentName]) == null ? void 0 : _b.versions[softComponentVersion];
+    const softComponentMeta = get().softComponents[softComponentName];
     const versions = Object.keys(
       get().softComponents[softComponentName].versions || {}
     );
@@ -1451,12 +1485,12 @@ var createBuildersSlice = (set, get, initialConfig) => ({
       softComponentVersion,
       versions,
       selectedItem.props,
-      get().softConfig.components
+      get().softConfig.components,
+      (softComponentMeta == null ? void 0 : softComponentMeta.name) || softComponentName,
+      softComponentMeta == null ? void 0 : softComponentMeta.category
     );
     const config = __spreadValues({}, get().softConfig);
     const overrides = get().overrides;
-    const getStore = () => get();
-    const getEditableIds = () => getStore().editableComponentIds;
     const dependents = get().dependencyGraph.get(softComponentName) || /* @__PURE__ */ new Set();
     const buildConfig = builderConfig(config, overrides, softComponentName, get().showVersionFields, dependents);
     const editableIds = /* @__PURE__ */ new Set([]);
@@ -1512,19 +1546,20 @@ var createBuildersSlice = (set, get, initialConfig) => ({
         type: "replaceRoot",
         root: {
           title: root.props.title,
-          _name: root.props.name
+          _name: root.props._name,
+          _category: root.props._category
         }
       }),
       100
     );
   },
   complete: (appState, setHistories, getItemBySelector) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e;
     if (get().state === "ready") {
       throw new Error("Not building or remodeling a component.");
     }
-    const componentName = (_b = (_a = appState.data.root) == null ? void 0 : _a.props) == null ? void 0 : _b._name;
-    if (!componentName) {
+    const displayName = (_c = (_b = (_a = appState.data.root) == null ? void 0 : _a.props) == null ? void 0 : _b._name) == null ? void 0 : _c.trim();
+    if (!displayName) {
       throw new Error("Root component must have a name to compose.");
     }
     const itemSelector = get().itemSelector;
@@ -1537,42 +1572,73 @@ var createBuildersSlice = (set, get, initialConfig) => ({
     if (!selectedItem) {
       throw new Error("Cannot find item being edited");
     }
-    const [newSoftComponentConfig, version] = get().builder.compose(appState, componentName, selectedItem) || [];
+    const rootCategory = (_e = (_d = appState.data.root) == null ? void 0 : _d.props) == null ? void 0 : _e._category;
+    const componentName = createComponentKeyFromName(displayName, get().overrides, {
+      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(
+      appState,
+      componentName,
+      selectedItem,
+      displayName,
+      rootCategory
+    ) || [];
     if (!newSoftComponentConfig) {
       throw new Error("Failed to compose new soft component config.");
     }
     const storedHistories = get().originalHistory;
     setHistories([...storedHistories]);
     const config = __spreadValues({}, get().softConfig || initialConfig);
-    set((s) => __spreadProps(__spreadValues({}, s), {
-      softConfig: __spreadProps(__spreadValues({}, config), {
-        root: __spreadValues({}, initialConfig.root),
-        components: __spreadProps(__spreadValues({}, Object.entries(config.components).reduce(
-          (acc, [name, component]) => {
-            var _a2;
-            let tempComponent = (_a2 = config.components) == null ? void 0 : _a2[name];
-            if (tempComponent) {
-              acc[name] = tempComponent;
-              acc[name].render = tempComponent.render;
-            } else {
-              tempComponent = __spreadValues({}, component);
-              tempComponent == null ? true : delete tempComponent.resolvePermissions;
-              tempComponent == null ? true : delete tempComponent.resolveData;
-              acc[name] = tempComponent;
-            }
-            return acc;
-          },
-          {}
-        )), {
-          [componentName]: __spreadValues({}, newSoftComponentConfig)
+    set((s) => {
+      var _a2, _b2;
+      const nextComponents = __spreadProps(__spreadValues({}, Object.entries(config.components).reduce(
+        (acc, [name, component]) => {
+          var _a3;
+          let tempComponent = (_a3 = config.components) == null ? void 0 : _a3[name];
+          if (tempComponent) {
+            acc[name] = tempComponent;
+            acc[name].render = tempComponent.render;
+          } else {
+            tempComponent = __spreadValues({}, component);
+            tempComponent == null ? true : delete tempComponent.resolvePermissions;
+            tempComponent == null ? true : delete tempComponent.resolveData;
+            acc[name] = tempComponent;
+          }
+          return acc;
+        },
+        {}
+      )), {
+        [componentName]: __spreadValues({}, newSoftComponentConfig)
+      });
+      const categories = get().softConfig.categories || {};
+      const nextCategories = rootCategory ? __spreadProps(__spreadValues({}, categories), {
+        [rootCategory]: __spreadProps(__spreadValues({}, categories[rootCategory] || {}), {
+          title: ((_a2 = categories[rootCategory]) == null ? void 0 : _a2.title) || rootCategory,
+          components: Array.from(
+            /* @__PURE__ */ new Set([
+              ...((_b2 = categories[rootCategory]) == null ? void 0 : _b2.components) || [],
+              componentName
+            ])
+          )
         })
-      }),
-      storedConfig: void 0,
-      state: "inspecting",
-      originalHistory: [],
-      editingComponentId: null,
-      editableComponentIds: /* @__PURE__ */ new Set()
-    }));
+      }) : categories;
+      return __spreadProps(__spreadValues({}, s), {
+        softConfig: __spreadProps(__spreadValues({}, config), {
+          root: __spreadValues({}, initialConfig.root),
+          components: nextComponents,
+          categories: nextCategories
+        }),
+        storedConfig: void 0,
+        state: "inspecting",
+        originalHistory: [],
+        editingComponentId: null,
+        editableComponentIds: /* @__PURE__ */ new Set()
+      });
+    });
     get().rebuildDependents(componentName, version);
     return componentName;
   },
@@ -1619,7 +1685,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
       editableComponentIds: /* @__PURE__ */ new Set()
     }));
   },
-  compose: (appState, componentName, editedItem) => {
+  compose: (appState, componentName, editedItem, displayName, category) => {
     if (!componentName) {
       throw new Error("Root component must have a name to compose.");
     }
@@ -1629,12 +1695,21 @@ var createBuildersSlice = (set, get, initialConfig) => ({
         `Component name "${componentName}" already exists in the configuration.`
       );
     }
-    const [softComponent, version] = softComponentFromAppState(appState, componentConfigs, editedItem);
+    const [softComponent, version] = softComponentFromAppState(
+      appState,
+      componentConfigs,
+      editedItem,
+      {
+        name: displayName,
+        category
+      }
+    );
     const existingComponent = get().softComponents[componentName];
     const allVersions = Object.keys((existingComponent == null ? void 0 : existingComponent.versions) || {});
     const isNewVersion = !allVersions.includes(version);
     const newSoftComponentConfig = createVersionedComponentConfig(
       componentName,
+      displayName,
       version,
       isNewVersion ? [...allVersions, version] : allVersions,
       get().softConfig,
@@ -1682,6 +1757,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
       throw new Error("Can only switch versions during remodeling.");
     }
     const softComponent = (_a = get().softComponents[componentName]) == null ? void 0 : _a.versions[newVersion];
+    const softComponentMeta = get().softComponents[componentName];
     if (!softComponent) {
       throw new Error(
         `Soft component "${componentName}" with version "${newVersion}" not found.`
@@ -1696,7 +1772,9 @@ var createBuildersSlice = (set, get, initialConfig) => ({
       newVersion,
       versions,
       currentProps,
-      get().softConfig.components
+      get().softConfig.components,
+      (softComponentMeta == null ? void 0 : softComponentMeta.name) || componentName,
+      softComponentMeta == null ? void 0 : softComponentMeta.category
     );
     puckDispatch({
       type: "setData",
@@ -1748,10 +1826,11 @@ function hydrateSoftComponentsTransforms(softComponents, hydrator) {
         })
       });
     });
-    hydrated[name] = {
+    hydrated[name] = __spreadProps(__spreadValues({}, comp), {
+      name: comp.name || name,
       defaultVersion: comp.defaultVersion,
       versions
-    };
+    });
   });
   return hydrated;
 }
@@ -1871,6 +1950,7 @@ function buildInitialSoftComponents(hardConfig, softComponents, overrides, showV
       }
       const newSoftComponentConfig = createVersionedComponentConfig(
         name,
+        comp.name || name,
         defaultVersion || "1.0.0",
         allVersions,
         buildingConfig,
@@ -1899,6 +1979,7 @@ function buildInitialSoftComponents(hardConfig, softComponents, overrides, showV
       }
       const newSoftComponentConfig = createVersionedComponentConfig(
         name,
+        comp.name || name,
         defaultVersion || "1.0.0",
         allVersions,
         hardConfig,
@@ -1971,11 +2052,19 @@ var clearEditVisibility = (doc) => {
 var createSoftConfigStore = (hardConfig = {
   components: {}
 }, softComponents = {}, overrides = {}, onActions, showVersionFields = true) => {
+  const normalizedSoftComponents = Object.fromEntries(
+    Object.entries(softComponents || {}).map(([key, value]) => [
+      key,
+      __spreadProps(__spreadValues({}, value), {
+        name: value.name || key
+      })
+    ])
+  );
   const iframeDocRef = { current: null };
   const hydratedSoftComponents = (overrides == null ? void 0 : overrides.hydrateMapTransform) ? hydrateSoftComponentsTransforms(
-    softComponents,
+    normalizedSoftComponents,
     overrides.hydrateMapTransform
-  ) : softComponents;
+  ) : normalizedSoftComponents;
   const initialDependencyGraph = buildReverseDependencyGraph(
     hydratedSoftComponents
   );
@@ -2026,19 +2115,23 @@ var createSoftConfigStore = (hardConfig = {
             hardConfig,
             hydratedSoftComponents,
             overrides
-          ))
+          )),
+          categories: __spreadValues({}, hardConfig.categories || {})
         }),
         setSoftComponent: (name, version, component) => {
+          const existing = get().softComponents[name];
           set((state) => {
-            var _a;
+            var _a, _b;
             return {
               softComponents: __spreadProps(__spreadValues({}, state.softComponents), {
-                [name]: {
+                [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({}, ((_a = state.softComponents[name]) == null ? void 0 : _a.versions) || {}), {
+                  versions: __spreadProps(__spreadValues({}, ((_b = state.softComponents[name]) == null ? void 0 : _b.versions) || {}), {
                     [version]: component
                   })
-                }
+                })
               })
             };
           });
@@ -2050,14 +2143,17 @@ var createSoftConfigStore = (hardConfig = {
           Object.entries(incomingComponents).forEach(([name, data]) => {
             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,
@@ -2088,6 +2184,7 @@ var createSoftConfigStore = (hardConfig = {
             if (activeVersionData) {
               nextConfigComponents[name] = createVersionedComponentConfig(
                 name,
+                componentData.name || name,
                 activeVersion,
                 Object.keys(componentData.versions),
                 softConfig,
@@ -2105,11 +2202,12 @@ var createSoftConfigStore = (hardConfig = {
           });
         },
         setSoftComponentDefaultVersion: (name, version) => {
-          var _a, _b, _c;
+          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.`
@@ -2117,6 +2215,7 @@ var createSoftConfigStore = (hardConfig = {
           }
           const newSoftComponentConfig = createVersionedComponentConfig(
             name,
+            displayName,
             version,
             allVersions,
             get().softConfig,
@@ -2170,20 +2269,20 @@ var createSoftConfigStore = (hardConfig = {
         },
         setSoftComponentConfig: (key, config, category) => {
           set((state) => {
-            var _a;
+            var _a, _b, _c;
             return {
               softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
                 components: __spreadProps(__spreadValues({}, state.softConfig.components), {
                   [key]: __spreadValues({}, config)
                 }),
-                categories: category && state.softConfig.categories ? __spreadProps(__spreadValues({}, state.softConfig.categories), {
-                  [category]: __spreadProps(__spreadValues({}, state.softConfig.categories[category]), {
+                categories: category ? __spreadProps(__spreadValues({}, state.softConfig.categories || {}), {
+                  [category]: __spreadProps(__spreadValues({}, ((_a = state.softConfig.categories) == null ? void 0 : _a[category]) || {}), {
                     components: [
-                      ...((_a = state.softConfig.categories[category]) == null ? void 0 : _a.components) || [],
+                      ...((_c = (_b = state.softConfig.categories) == null ? void 0 : _b[category]) == null ? void 0 : _c.components) || [],
                       key
                     ]
                   })
-                }) : state.softConfig.categories
+                }) : state.softConfig.categories || {}
               })
             };
           });
@@ -2253,6 +2352,7 @@ var createSoftConfigStore = (hardConfig = {
             if (!versionedComponent) continue;
             const newConfig = createVersionedComponentConfig(
               dependentName,
+              dependent.name || dependentName,
               defaultVersion,
               allVersions,
               config,
@@ -2362,7 +2462,12 @@ var SoftConfigProvider = ({
         setEditVisibility(doc, { mode: "remodel", editableIds: state.editableComponentIds });
         return;
       }
-      clearEditVisibility(doc);
+      requestAnimationFrame(() => {
+        const freshDoc = store.getState().getIframeDoc();
+        if (freshDoc) {
+          clearEditVisibility(freshDoc);
+        }
+      });
     });
     return () => {
       unsubscribe();
@@ -2760,7 +2865,7 @@ var useSetDefaultVersion = () => {
 // src/puck/overrides/Header.tsx
 import { Button, createUsePuck as createUsePuck10 } from "@measured/puck";
 
-// css-module:/media/osamu/3628738E28734BBD/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/Header.module.css#css-module
+// css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/Header.module.css#css-module
 var Header_module_default = { "Header": "_Header_19oj9_1" };
 
 // src/puck/actions/usePublish.tsx
@@ -2806,9 +2911,10 @@ var Header = ({
   onPublish,
   children
 }) => {
-  const { handleComplete, canComplete, newComponent, setNewComponent } = useComplete();
+  const { handleComplete, newComponent, setNewComponent } = useComplete();
   const { handleCancel, canCancel } = useCancel();
   const { handlePublish } = usePublish();
+  const puck = usePuck((s) => s.config);
   useInspect(newComponent);
   return /* @__PURE__ */ jsx8("div", { className: getClassName2(), children: canCancel ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
     /* @__PURE__ */ jsx8(Button, { onClick: handleCancel, children: "Cancel" }),
@@ -2840,10 +2946,11 @@ var Header = ({
 };
 
 // src/puck/overrides/ActionBar.tsx
+import { useMemo as useMemo3 } from "react";
 import { ActionBar, createUsePuck as createUsePuck11 } from "@measured/puck";
 import { Combine, ComponentIcon, EditIcon } from "lucide-react";
 
-// css-module:/media/osamu/3628738E28734BBD/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/ActionBar.module.css#css-module
+// css-module:/media/manual_mount/osamuProjects/netlisian/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
@@ -2856,11 +2963,22 @@ var ActionBarOverride = (props) => {
   const { handleBuild } = useBuild();
   const { handleRemodel } = useRemodel();
   const { handleDecompose } = useDecompose();
+  const overrides = useSoftConfig((s) => s.overrides);
   const softComponents = useSoftConfig((s) => s.softComponents, shallow);
   const editableIds = useSoftConfig((s) => s.editableComponentIds);
   const selectedItem = usePuck2((s) => s.selectedItem);
   const status = useSoftConfig((s) => s.state);
-  const isSoftComponent2 = Object.keys(softComponents || {}).includes(props.label);
+  const softKeys = Object.keys(softComponents);
+  const key = useMemo3(() => createComponentKeyFromName(props.label || "", overrides, {
+    existingKeys: softKeys,
+    state: status
+  }), [
+    props.label,
+    overrides,
+    softKeys,
+    status
+  ]);
+  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));
   return /* @__PURE__ */ jsx9("div", { className: getClassName3(), children: /* @__PURE__ */ jsxs3(ActionBar, { children: [
@@ -2873,7 +2991,7 @@ var ActionBarOverride = (props) => {
         /* @__PURE__ */ jsx9(
           ActionBar.Action,
           {
-            onClick: () => handleRemodel(props.label),
+            onClick: () => handleRemodel(key),
             label: "Remodel Soft Component",
             children: /* @__PURE__ */ jsx9(EditIcon, { size: 16 })
           }
@@ -2921,14 +3039,14 @@ var confirm = (message) => __async(null, null, function* () {
   }
 });
 
-// css-module:/media/osamu/3628738E28734BBD/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/ComponentItem.module.css#css-module
+// css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/ComponentItem.module.css#css-module
 var ComponentItem_module_default = { "ComponentItem": "_ComponentItem_1kbi2_1", "ComponentItem--insertDisabled": "_ComponentItem--insertDisabled_1kbi2_14", "ComponentItem-content": "_ComponentItem-content_1kbi2_21", "ComponentItem-name": "_ComponentItem-name_1kbi2_31", "ComponentItem-version": "_ComponentItem-version_1kbi2_35", "ComponentItem-actions": "_ComponentItem-actions_1kbi2_40", "ComponentItem-settingsButton": "_ComponentItem-settingsButton_1kbi2_46", "ComponentItem-grip": "_ComponentItem-grip_1kbi2_56", "ComponentItem-modal": "_ComponentItem-modal_1kbi2_63", "ComponentItem-modalHeader": "_ComponentItem-modalHeader_1kbi2_70", "ComponentItem-modalTitle": "_ComponentItem-modalTitle_1kbi2_75", "ComponentItem-modalSubtitle": "_ComponentItem-modalSubtitle_1kbi2_82", "ComponentItem-modalBody": "_ComponentItem-modalBody_1kbi2_88", "ComponentItem-section": "_ComponentItem-section_1kbi2_97", "ComponentItem-sectionTitle": "_ComponentItem-sectionTitle_1kbi2_103", "ComponentItem-sectionDescription": "_ComponentItem-sectionDescription_1kbi2_110", "ComponentItem-versionList": "_ComponentItem-versionList_1kbi2_116", "ComponentItem-versionRow": "_ComponentItem-versionRow_1kbi2_122", "ComponentItem-versionRow--isDefault": "_ComponentItem-versionRow--isDefault_1kbi2_133", "ComponentItem-versionRow--isMarkedForDeletion": "_ComponentItem-versionRow--isMarkedForDeletion_1kbi2_138", "ComponentItem-versionInfo": "_ComponentItem-versionInfo_1kbi2_143", "ComponentItem-versionNumber": "_ComponentItem-versionNumber_1kbi2_150", "ComponentItem-defaultBadge": "_ComponentItem-defaultBadge_1kbi2_156", "ComponentItem-deleteBadge": "_ComponentItem-deleteBadge_1kbi2_167", "ComponentItem-versionActions": "_ComponentItem-versionActions_1kbi2_178", "ComponentItem-migrationOptions": "_ComponentItem-migrationOptions_1kbi2_184", "ComponentItem-select": "_ComponentItem-select_1kbi2_188", "ComponentItem-modalFooter": "_ComponentItem-modalFooter_1kbi2_209", "ComponentItem-footerLeft": "_ComponentItem-footerLeft_1kbi2_218", "ComponentItem-footerRight": "_ComponentItem-footerRight_1kbi2_223" };
 
 // src/puck/components/modal/index.tsx
 import { useEffect as useEffect4, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
 
-// css-module:/media/osamu/3628738E28734BBD/osamuProjects/netlisian/packages/soft-config/src/puck/components/modal/styles.module.css#css-module
+// css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/components/modal/styles.module.css#css-module
 var styles_module_default2 = { "Modal": "_Modal_pvj02_1", "Modal--isOpen": "_Modal--isOpen_pvj02_29", "Modal-inner": "_Modal-inner_pvj02_37" };
 
 // src/puck/components/modal/index.tsx
@@ -2965,6 +3083,8 @@ import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs4 } from "react/jsx-ru
 var getClassName5 = get_class_name_factory_default("ComponentItem", ComponentItem_module_default);
 var usePuck3 = createUsePuck12();
 var ComponentItem = (props) => {
+  const componentMeta = useSoftConfig((s) => s.softComponents[props.name]);
+  const displayName = (componentMeta == null ? void 0 : componentMeta.name) || props.name;
   const softComponents = new Set(
     Object.keys(useSoftConfig((s) => s.softComponents, shallow2))
   );
@@ -3027,7 +3147,7 @@ var ComponentItem = (props) => {
   };
   const handleDemolishClick = () => __async(null, null, function* () {
     const confirmed = yield confirm(
-      `Demolish "${props.name}" entirely? This will remove all versions.`
+      `Demolish "${displayName}" entirely? This will remove all versions.`
     );
     if (confirmed) {
       handleDemolish(props.name);
@@ -3045,7 +3165,7 @@ var ComponentItem = (props) => {
           onMouseLeave: () => setIsHovering(false),
           children: [
             /* @__PURE__ */ jsxs4("div", { className: getClassName5("content"), children: [
-              /* @__PURE__ */ jsx11("div", { className: getClassName5("name"), children: props.name }),
+              /* @__PURE__ */ jsx11("div", { className: getClassName5("name"), children: displayName }),
               useVersioning && /* @__PURE__ */ jsxs4("div", { className: getClassName5("version"), children: [
                 "v",
                 defaultVersion
@@ -3072,7 +3192,7 @@ var ComponentItem = (props) => {
       ),
       /* @__PURE__ */ jsx11(Modal, { isOpen: isEditing, onClose: handleCancel, children: /* @__PURE__ */ jsxs4("div", { className: getClassName5("modal"), children: [
         /* @__PURE__ */ jsxs4("div", { className: getClassName5("modalHeader"), children: [
-          /* @__PURE__ */ jsx11("h2", { className: getClassName5("modalTitle"), children: props.name }),
+          /* @__PURE__ */ jsx11("h2", { className: getClassName5("modalTitle"), children: displayName }),
           /* @__PURE__ */ jsx11("p", { className: getClassName5("modalSubtitle"), children: "Component Settings" })
         ] }),
         /* @__PURE__ */ jsx11("div", { className: getClassName5("modalBody"), children: useVersioning ? /* @__PURE__ */ jsxs4(Fragment5, { children: [
@@ -3132,7 +3252,7 @@ var ComponentItem = (props) => {
           ] })
         ] }) : /* @__PURE__ */ jsx11("div", { className: getClassName5("section"), children: /* @__PURE__ */ jsxs4("p", { children: [
           "Manage high-level settings for the ",
-          /* @__PURE__ */ jsx11("strong", { children: props.name }),
+          /* @__PURE__ */ jsx11("strong", { children: displayName }),
           " component."
         ] }) }) }),
         /* @__PURE__ */ jsxs4("div", { className: getClassName5("modalFooter"), children: [