@netlisian/softconfig 0.1.0 → 0.1.2

package/dist/puck/index.js

@@ -82,6 +82,9 @@ var puck_exports = {};
 __export(puck_exports, {
   ActionBar: () => ActionBarOverride,
   ComponentItem: () => ComponentItem,
+  ComponentList: () => Drawer,
+  Drawer: () => Drawer,
+  DrawerItem: () => DrawerItem,
   Header: () => Header,
   Modal: () => Modal,
   SoftConfigProvider: () => SoftConfigProvider,
@@ -358,13 +361,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",
@@ -434,7 +451,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) ? {
@@ -605,7 +624,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
@@ -814,7 +833,8 @@ var builderConfig = (config, overrides, editingComponent, showVersionFields = tr
       return acc;
     },
     {}
-  )
+  ),
+  categories: config.categories || {}
 });
 
 // src/puck/lib/strip-id.ts
@@ -940,7 +960,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 || [];
@@ -961,6 +981,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;
@@ -1096,7 +1118,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,
@@ -1108,7 +1130,8 @@ var softComponentToAppState = (softComponent, componentName, version, versions,
     }
   });
   const rootProps = {
-    _name: componentName,
+    _name: displayName || componentName,
+    _category: category,
     _version: version,
     _versions: versions,
     _fields: fields,
@@ -1257,10 +1280,11 @@ function SoftRender({
 
 // src/puck/lib/create-versioned-component-config.tsx
 var import_jsx_runtime6 = require("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
@@ -1406,31 +1430,46 @@ 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.");
     }
     puckDispatch({
       type: "set",
-      state: (previous) => ({
-        ui: __spreadProps(__spreadValues({}, previous.ui), {
-          itemSelector: null
-        }),
-        data: __spreadProps(__spreadValues({}, previous.data), {
-          root: {
-            props: {
-              _name: "New Soft Component"
-            }
-          }
-          // content: [{ ...selectedItem }],
-        })
-      })
+      state: (previous) => {
+        var _a;
+        return {
+          ui: __spreadProps(__spreadValues({}, previous.ui), {
+            itemSelector: null
+          }),
+          data: __spreadProps(__spreadValues({}, previous.data), {
+            root: __spreadProps(__spreadValues({}, previous.data.root), {
+              props: __spreadProps(__spreadValues({}, (_a = previous.data.root) == null ? void 0 : _a.props), {
+                _name: name || "New Soft Component"
+              })
+            })
+            // content: [{ ...selectedItem }],
+          })
+        };
+      }
     });
     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)];
     (0, import_puck4.walkTree)(
@@ -1463,7 +1502,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
         type: "replaceRoot",
         root: {
           title: "Soft Component Builder",
-          _name: "New Soft Component"
+          _name: name || "New Soft Component"
         }
       }),
       100
@@ -1480,6 +1519,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 || {}
     );
@@ -1500,12 +1540,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([]);
@@ -1561,19 +1601,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;
@@ -1586,42 +1627,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;
   },
@@ -1668,7 +1740,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.");
     }
@@ -1678,12 +1750,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,
@@ -1731,6 +1812,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.`
@@ -1745,7 +1827,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",
@@ -1797,10 +1881,11 @@ function hydrateSoftComponentsTransforms(softComponents, hydrator) {
         })
       });
     });
-    hydrated[name] = {
+    hydrated[name] = __spreadProps(__spreadValues({}, comp), {
+      name: comp.name || name,
       defaultVersion: comp.defaultVersion,
       versions
-    };
+    });
   });
   return hydrated;
 }
@@ -1920,6 +2005,7 @@ function buildInitialSoftComponents(hardConfig, softComponents, overrides, showV
       }
       const newSoftComponentConfig = createVersionedComponentConfig(
         name,
+        comp.name || name,
         defaultVersion || "1.0.0",
         allVersions,
         buildingConfig,
@@ -1948,6 +2034,7 @@ function buildInitialSoftComponents(hardConfig, softComponents, overrides, showV
       }
       const newSoftComponentConfig = createVersionedComponentConfig(
         name,
+        comp.name || name,
         defaultVersion || "1.0.0",
         allVersions,
         hardConfig,
@@ -2020,11 +2107,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
   );
@@ -2075,19 +2170,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
                   })
-                }
+                })
               })
             };
           });
@@ -2099,14 +2198,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,
@@ -2137,6 +2239,7 @@ var createSoftConfigStore = (hardConfig = {
             if (activeVersionData) {
               nextConfigComponents[name] = createVersionedComponentConfig(
                 name,
+                componentData.name || name,
                 activeVersion,
                 Object.keys(componentData.versions),
                 softConfig,
@@ -2154,11 +2257,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.`
@@ -2166,6 +2270,7 @@ var createSoftConfigStore = (hardConfig = {
           }
           const newSoftComponentConfig = createVersionedComponentConfig(
             name,
+            displayName,
             version,
             allVersions,
             get().softConfig,
@@ -2219,20 +2324,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 || {}
               })
             };
           });
@@ -2302,6 +2407,7 @@ var createSoftConfigStore = (hardConfig = {
             if (!versionedComponent) continue;
             const newConfig = createVersionedComponentConfig(
               dependentName,
+              dependent.name || dependentName,
               defaultVersion,
               allVersions,
               config,
@@ -2411,7 +2517,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();
@@ -2467,7 +2578,7 @@ var useActionEvent = () => {
 
 // src/puck/actions/useBuild.tsx
 var useCustomPuck2 = (0, import_puck5.createUsePuck)();
-var useBuild = () => {
+var useBuild = (name) => {
   const build = useSoftConfig((s) => s.builder.build);
   const history = useCustomPuck2((s) => s.history.histories);
   const selectedItem = useCustomPuck2((s) => s.selectedItem);
@@ -2481,7 +2592,7 @@ var useBuild = () => {
       return;
     }
     try {
-      build(history, selectedItem, itemSelector, dispatch);
+      build(history, selectedItem, itemSelector, dispatch, name);
       if (selectedItem == null ? void 0 : selectedItem.type) {
         void triggerAction({
           type: "build",
@@ -2809,7 +2920,7 @@ var useSetDefaultVersion = () => {
 // src/puck/overrides/Header.tsx
 var import_puck13 = require("@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
@@ -2855,9 +2966,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__ */ (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" }),
@@ -2889,10 +3001,11 @@ var Header = ({
 };
 
 // src/puck/overrides/ActionBar.tsx
+var import_react9 = require("react");
 var import_puck14 = require("@measured/puck");
 var import_lucide_react = require("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
@@ -2902,14 +3015,25 @@ var getClassName3 = get_class_name_factory_default("ActionBar", ActionBar_module
 var usePuck2 = (0, import_puck14.createUsePuck)();
 var ActionBarOverride = (props) => {
   var _a;
-  const { handleBuild } = useBuild();
+  const { handleBuild } = useBuild("Custom Name");
   const { handleRemodel } = useRemodel();
   const { handleDecompose } = useDecompose();
+  const overrides = useSoftConfig((s) => s.overrides);
   const softComponents = useSoftConfig((s) => s.softComponents, import_shallow.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 = (0, import_react9.useMemo)(() => 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__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassName3(), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_puck14.ActionBar, { children: [
@@ -2922,7 +3046,7 @@ var ActionBarOverride = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           import_puck14.ActionBar.Action,
           {
-            onClick: () => handleRemodel(props.label),
+            onClick: () => handleRemodel(key),
             label: "Remodel Soft Component",
             children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.EditIcon, { size: 16 })
           }
@@ -2948,8 +3072,8 @@ var ActionBarOverride = (props) => {
   ] }) });
 };
 
-// src/puck/overrides/ComponentItem.tsx
-var import_react10 = require("react");
+// src/puck/overrides/DrawerItem.tsx
+var import_react11 = require("react");
 var import_puck15 = require("@measured/puck");
 var import_lucide_react2 = require("lucide-react");
 
@@ -2970,14 +3094,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
-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" };
+// css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/DrawerItem.module.css#css-module
+var DrawerItem_module_default = { "DrawerItem": "_DrawerItem_29z19_1", "DrawerItem--insertDisabled": "_DrawerItem--insertDisabled_29z19_14", "DrawerItem-content": "_DrawerItem-content_29z19_21", "DrawerItem-name": "_DrawerItem-name_29z19_31", "DrawerItem-version": "_DrawerItem-version_29z19_35", "DrawerItem-actions": "_DrawerItem-actions_29z19_40", "DrawerItem-settingsButton": "_DrawerItem-settingsButton_29z19_46", "DrawerItem-grip": "_DrawerItem-grip_29z19_56", "DrawerItem-modal": "_DrawerItem-modal_29z19_63", "DrawerItem-modalHeader": "_DrawerItem-modalHeader_29z19_70", "DrawerItem-modalTitle": "_DrawerItem-modalTitle_29z19_75", "DrawerItem-modalSubtitle": "_DrawerItem-modalSubtitle_29z19_82", "DrawerItem-modalBody": "_DrawerItem-modalBody_29z19_88", "DrawerItem-section": "_DrawerItem-section_29z19_97", "DrawerItem-sectionTitle": "_DrawerItem-sectionTitle_29z19_103", "DrawerItem-sectionDescription": "_DrawerItem-sectionDescription_29z19_110", "DrawerItem-versionList": "_DrawerItem-versionList_29z19_116", "DrawerItem-versionRow": "_DrawerItem-versionRow_29z19_122", "DrawerItem-versionRow--isDefault": "_DrawerItem-versionRow--isDefault_29z19_133", "DrawerItem-versionRow--isMarkedForDeletion": "_DrawerItem-versionRow--isMarkedForDeletion_29z19_138", "DrawerItem-versionInfo": "_DrawerItem-versionInfo_29z19_143", "DrawerItem-versionNumber": "_DrawerItem-versionNumber_29z19_150", "DrawerItem-defaultBadge": "_DrawerItem-defaultBadge_29z19_156", "DrawerItem-deleteBadge": "_DrawerItem-deleteBadge_29z19_167", "DrawerItem-versionActions": "_DrawerItem-versionActions_29z19_178", "DrawerItem-migrationOptions": "_DrawerItem-migrationOptions_29z19_184", "DrawerItem-select": "_DrawerItem-select_29z19_188", "DrawerItem-modalFooter": "_DrawerItem-modalFooter_29z19_209", "DrawerItem-footerLeft": "_DrawerItem-footerLeft_29z19_218", "DrawerItem-footerRight": "_DrawerItem-footerRight_29z19_223" };
 
 // src/puck/components/modal/index.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_react_dom = require("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
@@ -2988,8 +3112,8 @@ var Modal = ({
   onClose,
   isOpen
 }) => {
-  const [rootEl, setRootEl] = (0, import_react9.useState)(null);
-  (0, import_react9.useEffect)(() => {
+  const [rootEl, setRootEl] = (0, import_react10.useState)(null);
+  (0, import_react10.useEffect)(() => {
     setRootEl(document.getElementById("puck-portal-root"));
   }, []);
   if (!rootEl) {
@@ -3008,12 +3132,14 @@ var Modal = ({
   );
 };
 
-// src/puck/overrides/ComponentItem.tsx
+// src/puck/overrides/DrawerItem.tsx
 var import_shallow2 = require("zustand/shallow");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var getClassName5 = get_class_name_factory_default("ComponentItem", ComponentItem_module_default);
+var getClassName5 = get_class_name_factory_default("DrawerItem", DrawerItem_module_default);
 var usePuck3 = (0, import_puck15.createUsePuck)();
-var ComponentItem = (props) => {
+var DrawerItem = (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, import_shallow2.shallow))
   );
@@ -3024,13 +3150,13 @@ var ComponentItem = (props) => {
   );
   const { handleDemolish } = useDemolish();
   const { handleSetDefaultVersion, getVersions, getDefaultVersion } = useSetDefaultVersion();
-  const [isEditing, setIsEditing] = (0, import_react10.useState)(false);
-  const [isHovering, setIsHovering] = (0, import_react10.useState)(false);
-  const [selectedVersion, setSelectedVersion] = (0, import_react10.useState)("");
-  const [versionsToDelete, setVersionsToDelete] = (0, import_react10.useState)(
+  const [isEditing, setIsEditing] = (0, import_react11.useState)(false);
+  const [isHovering, setIsHovering] = (0, import_react11.useState)(false);
+  const [selectedVersion, setSelectedVersion] = (0, import_react11.useState)("");
+  const [versionsToDelete, setVersionsToDelete] = (0, import_react11.useState)(
     /* @__PURE__ */ new Set()
   );
-  const [migrateVersionMap, setMigrateVersionMap] = (0, import_react10.useState)({});
+  const [migrateVersionMap, setMigrateVersionMap] = (0, import_react11.useState)({});
   const useVersioning = useSoftConfig((s) => s.showVersionFields);
   const versions = getVersions(props.name);
   const defaultVersion = getDefaultVersion(props.name);
@@ -3076,7 +3202,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);
@@ -3094,7 +3220,7 @@ var ComponentItem = (props) => {
           onMouseLeave: () => setIsHovering(false),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName5("content"), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName5("name"), children: props.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName5("name"), children: displayName }),
               useVersioning && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName5("version"), children: [
                 "v",
                 defaultVersion
@@ -3121,7 +3247,7 @@ var ComponentItem = (props) => {
       ),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Modal, { isOpen: isEditing, onClose: handleCancel, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName5("modal"), children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName5("modalHeader"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h2", { className: getClassName5("modalTitle"), children: props.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h2", { className: getClassName5("modalTitle"), children: displayName }),
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: getClassName5("modalSubtitle"), children: "Component Settings" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName5("modalBody"), children: useVersioning ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
@@ -3160,6 +3286,7 @@ var ComponentItem = (props) => {
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName5("migrationOptions"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
               "select",
               {
+                title: "Select migration version",
                 className: getClassName5("select"),
                 value: migrateVersionMap[Array.from(versionsToDelete)[0]] || "decompose",
                 onChange: (e) => {
@@ -3181,7 +3308,7 @@ var ComponentItem = (props) => {
           ] })
         ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName5("section"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { children: [
           "Manage high-level settings for the ",
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { children: props.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { children: displayName }),
           " component."
         ] }) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName5("modalFooter"), children: [
@@ -3205,6 +3332,124 @@ var ComponentItem = (props) => {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: props.children });
 };
+var ComponentItem = DrawerItem;
+
+// src/puck/overrides/Drawer.tsx
+var import_react12 = require("react");
+var import_puck16 = require("@measured/puck");
+var import_lucide_react3 = require("lucide-react");
+
+// css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/Drawer.module.css#css-module
+var Drawer_module_default = { "Drawer": "_Drawer_12zq5_1", "Drawer-category": "_Drawer-category_12zq5_7", "Drawer-category--isExpanded": "_Drawer-category--isExpanded_12zq5_15", "Drawer-categoryContent": "_Drawer-categoryContent_12zq5_19", "Drawer-categoryTitle": "_Drawer-categoryTitle_12zq5_27", "Drawer-categoryTitleIcon": "_Drawer-categoryTitleIcon_12zq5_63" };
+
+// src/puck/overrides/Drawer.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var getClassName6 = get_class_name_factory_default("Drawer", Drawer_module_default);
+var getCategoryClassName = get_class_name_factory_default("Drawer-category", Drawer_module_default);
+var usePuck4 = (0, import_puck16.createUsePuck)();
+var CategorySection = ({
+  id,
+  title,
+  componentKeys,
+  getPermissions,
+  expanded,
+  onToggle
+}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getCategoryClassName({ isExpanded: expanded }), children: [
+  title && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: getClassName6("categoryTitle"),
+      onClick: () => onToggle(id),
+      title: expanded ? `Collapse ${title}` : `Expand ${title}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: getClassName6("categoryTitleIcon"), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.ChevronUp, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.ChevronDown, { size: 12 }) })
+      ]
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassName6("categoryContent"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_puck16.Drawer, { children: componentKeys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_puck16.Drawer.Item,
+    {
+      name: key,
+      isDragDisabled: !getPermissions({ type: key }).insert,
+      children: DrawerItem
+    },
+    key
+  )) }) })
+] });
+var Drawer = (_props) => {
+  var _a, _b;
+  const config = usePuck4((s) => s.config);
+  const getPermissions = usePuck4((s) => s.getPermissions);
+  const categories = (_a = config.categories) != null ? _a : {};
+  const categorised = new Set(
+    Object.values(categories).flatMap((cat) => {
+      var _a2;
+      return (_a2 = cat.components) != null ? _a2 : [];
+    })
+  );
+  const allKeys = Object.keys(config.components);
+  const otherKeys = allKeys.filter((k) => !categorised.has(k));
+  const categoryEntries = Object.entries(categories).filter(
+    ([, cat]) => cat.visible !== false
+  );
+  const [expanded, setExpanded] = (0, import_react12.useState)(() => {
+    const init = {};
+    categoryEntries.forEach(([id, cat]) => {
+      init[id] = cat.defaultExpanded !== false;
+    });
+    if (otherKeys.length > 0) init["__other__"] = true;
+    return init;
+  });
+  const toggle = (id) => setExpanded((prev) => __spreadProps(__spreadValues({}, prev), { [id]: !prev[id] }));
+  if (categoryEntries.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_puck16.Drawer, { children: allKeys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_puck16.Drawer.Item,
+      {
+        name: key,
+        isDragDisabled: !getPermissions({ type: key }).insert,
+        children: DrawerItem
+      },
+      key
+    )) });
+  }
+  console.log(
+    getClassName6(),
+    getCategoryClassName(),
+    getCategoryClassName({ isExpanded: true })
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassName6(), children: [
+    categoryEntries.map(([id, cat]) => {
+      var _a2, _b2, _c;
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        CategorySection,
+        {
+          id,
+          title: (_a2 = cat.title) != null ? _a2 : id,
+          componentKeys: ((_b2 = cat.components) != null ? _b2 : []).filter(
+            (k) => k in config.components
+          ),
+          getPermissions,
+          expanded: (_c = expanded[id]) != null ? _c : true,
+          onToggle: toggle
+        },
+        id
+      );
+    }),
+    otherKeys.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      CategorySection,
+      {
+        id: "__other__",
+        title: "Other components",
+        componentKeys: otherKeys,
+        getPermissions,
+        expanded: (_b = expanded["__other__"]) != null ? _b : true,
+        onToggle: toggle
+      }
+    )
+  ] });
+};
 
 // src/puck/lib/action-callback.ts
 var createActionCallback = (validateAction, undo) => {
@@ -3432,6 +3677,9 @@ var resolveSoftConfig = (data, softComponents, config) => {
 0 && (module.exports = {
   ActionBar,
   ComponentItem,
+  ComponentList,
+  Drawer,
+  DrawerItem,
   Header,
   Modal,
   SoftConfigProvider,