@netlisian/softconfig 0.1.1 → 0.1.2

package/dist/puck/index.css

@@ -119,8 +119,8 @@
   margin: 0;
 }
 
-/* css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/ComponentItem.module.css/#css-module-data */
-._ComponentItem_1kbi2_1 {
+/* css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/DrawerItem.module.css/#css-module-data */
+._DrawerItem_29z19_1 {
   background: var(--puck-color-white);
   cursor: grab;
   border: 1px solid var(--puck-color-grey-09);
@@ -132,13 +132,13 @@
   transition: background-color 50ms ease-in, color 50ms ease-in;
   display: flex;
 }
-._ComponentItem--insertDisabled_1kbi2_14 {
+._DrawerItem--insertDisabled_29z19_14 {
   cursor: not-allowed;
   color: var(--puck-color-grey-5);
   background: var(--puck-color-grey-11);
   pointer-events: none;
 }
-._ComponentItem-content_1kbi2_21 {
+._DrawerItem-content_29z19_21 {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -147,53 +147,53 @@
   white-space: nowrap;
   overflow-x: hidden;
 }
-._ComponentItem-name_1kbi2_31 {
+._DrawerItem-name_29z19_31 {
   font-weight: 400;
 }
-._ComponentItem-version_1kbi2_35 {
+._DrawerItem-version_29z19_35 {
   font-size: 10px;
   color: var(--puck-color-grey-05);
 }
-._ComponentItem-actions_1kbi2_40 {
+._DrawerItem-actions_29z19_40 {
   display: flex;
   align-items: center;
   gap: 8px;
 }
-._ComponentItem-settingsButton_1kbi2_46 {
+._DrawerItem-settingsButton_29z19_46 {
   opacity: 0;
   transition: opacity 120ms ease;
   color: var(--puck-color-grey-05);
 }
-._ComponentItem_1kbi2_1:hover ._ComponentItem-settingsButton_1kbi2_46 {
+._DrawerItem_29z19_1:hover ._DrawerItem-settingsButton_29z19_46 {
   opacity: 1;
 }
-._ComponentItem-grip_1kbi2_56 {
+._DrawerItem-grip_29z19_56 {
   color: var(--puck-color-grey-05);
   display: flex;
   align-items: center;
 }
-._ComponentItem-modal_1kbi2_63 {
+._DrawerItem-modal_29z19_63 {
   background: var(--puck-color-white);
   display: flex;
   flex-direction: column;
   height: 100%;
 }
-._ComponentItem-modalHeader_1kbi2_70 {
+._DrawerItem-modalHeader_29z19_70 {
   padding: 24px 32px;
   border-bottom: 1px solid var(--puck-color-grey-09);
 }
-._ComponentItem-modalTitle_1kbi2_75 {
+._DrawerItem-modalTitle_29z19_75 {
   margin: 0 0 4px 0;
   font-size: 24px;
   font-weight: 600;
   color: var(--puck-color-black);
 }
-._ComponentItem-modalSubtitle_1kbi2_82 {
+._DrawerItem-modalSubtitle_29z19_82 {
   margin: 0;
   font-size: 14px;
   color: var(--puck-color-grey-04);
 }
-._ComponentItem-modalBody_1kbi2_88 {
+._DrawerItem-modalBody_29z19_88 {
   flex: 1;
   padding: 32px;
   overflow-y: auto;
@@ -201,28 +201,28 @@
   flex-direction: column;
   gap: 32px;
 }
-._ComponentItem-section_1kbi2_97 {
+._DrawerItem-section_29z19_97 {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
-._ComponentItem-sectionTitle_1kbi2_103 {
+._DrawerItem-sectionTitle_29z19_103 {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
   color: var(--puck-color-black);
 }
-._ComponentItem-sectionDescription_1kbi2_110 {
+._DrawerItem-sectionDescription_29z19_110 {
   margin: 0;
   font-size: 14px;
   color: var(--puck-color-grey-04);
 }
-._ComponentItem-versionList_1kbi2_116 {
+._DrawerItem-versionList_29z19_116 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._ComponentItem-versionRow_1kbi2_122 {
+._DrawerItem-versionRow_29z19_122 {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -232,26 +232,26 @@
   background: var(--puck-color-white);
   transition: all 150ms ease;
 }
-._ComponentItem-versionRow--isDefault_1kbi2_133 {
+._DrawerItem-versionRow--isDefault_29z19_133 {
   border-color: var(--puck-color-azure-07);
   background: var(--puck-color-azure-10);
 }
-._ComponentItem-versionRow--isMarkedForDeletion_1kbi2_138 {
+._DrawerItem-versionRow--isMarkedForDeletion_29z19_138 {
   opacity: 0.6;
   background: var(--puck-color-grey-11);
 }
-._ComponentItem-versionInfo_1kbi2_143 {
+._DrawerItem-versionInfo_29z19_143 {
   display: flex;
   align-items: center;
   gap: 12px;
   flex: 1;
 }
-._ComponentItem-versionNumber_1kbi2_150 {
+._DrawerItem-versionNumber_29z19_150 {
   font-size: 14px;
   font-weight: 500;
   color: var(--puck-color-black);
 }
-._ComponentItem-defaultBadge_1kbi2_156 {
+._DrawerItem-defaultBadge_29z19_156 {
   font-size: 11px;
   padding: 3px 8px;
   border-radius: 4px;
@@ -261,7 +261,7 @@
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
-._ComponentItem-deleteBadge_1kbi2_167 {
+._DrawerItem-deleteBadge_29z19_167 {
   font-size: 11px;
   padding: 3px 8px;
   border-radius: 4px;
@@ -271,15 +271,15 @@
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
-._ComponentItem-versionActions_1kbi2_178 {
+._DrawerItem-versionActions_29z19_178 {
   display: flex;
   gap: 8px;
   align-items: center;
 }
-._ComponentItem-migrationOptions_1kbi2_184 {
+._DrawerItem-migrationOptions_29z19_184 {
   width: 100%;
 }
-._ComponentItem-select_1kbi2_188 {
+._DrawerItem-select_29z19_188 {
   width: 100%;
   padding: 10px 12px;
   border: 1px solid var(--puck-color-grey-09);
@@ -290,14 +290,14 @@
   cursor: pointer;
   transition: border-color 150ms ease;
 }
-._ComponentItem-select_1kbi2_188:hover {
+._DrawerItem-select_29z19_188:hover {
   border-color: var(--puck-color-grey-07);
 }
-._ComponentItem-select_1kbi2_188:focus {
+._DrawerItem-select_29z19_188:focus {
   outline: none;
   border-color: var(--puck-color-azure-07);
 }
-._ComponentItem-modalFooter_1kbi2_209 {
+._DrawerItem-modalFooter_29z19_209 {
   padding: 20px 32px;
   border-top: 1px solid var(--puck-color-grey-09);
   display: flex;
@@ -305,11 +305,11 @@
   align-items: center;
   background: var(--puck-color-grey-11);
 }
-._ComponentItem-footerLeft_1kbi2_218 {
+._DrawerItem-footerLeft_29z19_218 {
   display: flex;
   gap: 12px;
 }
-._ComponentItem-footerRight_1kbi2_223 {
+._DrawerItem-footerRight_29z19_223 {
   display: flex;
   gap: 12px;
 }
@@ -341,3 +341,60 @@
   flex-direction: column;
   max-height: 90dvh;
 }
+
+/* css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/Drawer.module.css/#css-module-data */
+._Drawer_12zq5_1 {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+._Drawer-category_12zq5_7 {
+  max-width: 100%;
+}
+._Drawer-category_12zq5_7 + ._Drawer-category_12zq5_7 {
+  margin-top: 4px;
+}
+._Drawer-category--isExpanded_12zq5_15 + ._Drawer-category_12zq5_7 {
+  margin-top: 12px;
+}
+._Drawer-categoryContent_12zq5_19 {
+  display: none;
+}
+._Drawer-category--isExpanded_12zq5_15 > ._Drawer-categoryContent_12zq5_19 {
+  display: block;
+}
+._Drawer-categoryTitle_12zq5_27 {
+  background-color: transparent;
+  border: 0;
+  color: var(--puck-color-grey-05);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  font-size: var(--puck-font-size-xxxs);
+  list-style: none;
+  margin-bottom: 6px;
+  padding: 8px;
+  text-transform: uppercase;
+  transition: background-color 50ms ease-in, color 50ms ease-in;
+  gap: 4px;
+  border-radius: 4px;
+  width: 100%;
+}
+._Drawer-categoryTitle_12zq5_27:focus-visible {
+  outline: 2px solid var(--puck-color-azure-05);
+  outline-offset: 2px;
+}
+@media (hover: hover) and (pointer: fine) {
+  ._Drawer-categoryTitle_12zq5_27:hover {
+    background-color: var(--puck-color-azure-11);
+    color: var(--puck-color-azure-04);
+    transition: none;
+  }
+}
+._Drawer-categoryTitle_12zq5_27:active {
+  background-color: var(--puck-color-azure-10);
+  transition: none;
+}
+._Drawer-categoryTitleIcon_12zq5_63 {
+  margin-inline-start: auto;
+}

package/dist/puck/index.d.mts

@@ -1,8 +1,8 @@
 import * as zustand from 'zustand';
 import { StoreApi } from 'zustand';
 import { History, AppState, PuckApi, ComponentData, ComponentConfig, DefaultComponentProps, Field, Config, Fields, RootData, AsFieldProps, WithChildren, Metadata, ResolveDataTrigger, PuckAction, Data } from '@measured/puck';
-import * as react from 'react';
-import react__default, { ReactNode, ReactElement } from 'react';
+import * as React$1 from 'react';
+import React__default, { ReactNode, ReactElement } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type BuildersSlice = {
@@ -361,7 +361,7 @@ declare const SoftConfigProvider: ({ children, hardConfig, softComponents, overr
 declare const createUseSoftConfig: () => <T>(selector: (state: AppStore) => T, equalityFn?: (a: T, b: T) => boolean) => T;
 declare const useSoftConfig: <T>(selector: (state: AppStore) => T, equalityFn?: (a: T, b: T) => boolean) => T;
 
-declare const useBuild: () => {
+declare const useBuild: (name?: string) => {
     handleBuild: () => void;
     canBuild: boolean;
 };
@@ -375,7 +375,7 @@ declare const useComplete: () => {
     handleComplete: () => string | null;
     canComplete: boolean;
     newComponent: string | null;
-    setNewComponent: react.Dispatch<react.SetStateAction<string | null>>;
+    setNewComponent: React$1.Dispatch<React$1.SetStateAction<string | null>>;
 };
 
 declare const useCancel: () => {
@@ -404,20 +404,42 @@ declare const useSetDefaultVersion: () => {
 
 declare const Header: ({ onPublish, children, }: {
     onPublish?: (data: Data, softComponents: SoftComponents) => void;
-    children: react__default.ReactNode;
+    children: React__default.ReactNode;
 }) => react_jsx_runtime.JSX.Element;
 
 declare const ActionBarOverride: (props: {
     label?: string;
-    parentAction?: react__default.ReactNode;
-    children?: react__default.ReactNode;
+    parentAction?: React__default.ReactNode;
+    children?: React__default.ReactNode;
 }) => react_jsx_runtime.JSX.Element;
 
+declare const DrawerItem: (props: {
+    name: string;
+    children: React.ReactNode;
+}) => React.ReactElement;
+/** @deprecated Use DrawerItem instead */
 declare const ComponentItem: (props: {
     name: string;
     children: React.ReactNode;
 }) => React.ReactElement;
 
+/**
+ * Drawer — custom drawer override for the Puck editor.
+ *
+ * Reads config.categories from puck and renders a collapsible section per
+ * category, each containing a PuckDrawer with DrawerItem as the item
+ * renderer (soft-config versioning, demolish, and settings modal included).
+ * Components not assigned to any category render under "Other components".
+ *
+ * Falls back to a flat list when no categories are defined.
+ *
+ * Usage:
+ *   overrides={{ drawer: Drawer }}
+ */
+declare const Drawer: (_props: {
+    children?: React__default.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
 type NotificationHandler = (message: string, type: "error" | "success") => void;
 declare const setNotificationHandler: (handler: NotificationHandler) => void;
 declare const notify: {
@@ -472,4 +494,4 @@ declare const Modal: ({ children, onClose, isOpen, }: {
     isOpen: boolean;
 }) => react_jsx_runtime.JSX.Element;
 
-export { ActionBarOverride as ActionBar, type ActionEventPayload, type AppStore, type AppStoreApi, type BuilderComponentConfig, type BuilderConfig, type BuilderRootConfig, ComponentItem, Header, Modal, type OnActionsCallback, type Overrides, type SoftComponent, type SoftComponents, SoftConfigProvider, type VersionedSoftComponent, confirm, createActionCallback, createSoftConfigStore, createUseSoftConfig, notify, resolveSoftConfig, setConfirmHandler, setNotificationHandler, useBuild, useCancel, useComplete, useDecompose, useDemolish, useInspect, useRemodel, useSetDefaultVersion, useSoftConfig };
+export { ActionBarOverride as ActionBar, type ActionEventPayload, type AppStore, type AppStoreApi, type BuilderComponentConfig, type BuilderConfig, type BuilderRootConfig, ComponentItem, Drawer as ComponentList, Drawer, DrawerItem, Header, Modal, type OnActionsCallback, type Overrides, type SoftComponent, type SoftComponents, SoftConfigProvider, type VersionedSoftComponent, confirm, createActionCallback, createSoftConfigStore, createUseSoftConfig, notify, resolveSoftConfig, setConfirmHandler, setNotificationHandler, useBuild, useCancel, useComplete, useDecompose, useDemolish, useInspect, useRemodel, useSetDefaultVersion, useSoftConfig };

package/dist/puck/index.d.ts

@@ -1,8 +1,8 @@
 import * as zustand from 'zustand';
 import { StoreApi } from 'zustand';
 import { History, AppState, PuckApi, ComponentData, ComponentConfig, DefaultComponentProps, Field, Config, Fields, RootData, AsFieldProps, WithChildren, Metadata, ResolveDataTrigger, PuckAction, Data } from '@measured/puck';
-import * as react from 'react';
-import react__default, { ReactNode, ReactElement } from 'react';
+import * as React$1 from 'react';
+import React__default, { ReactNode, ReactElement } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type BuildersSlice = {
@@ -361,7 +361,7 @@ declare const SoftConfigProvider: ({ children, hardConfig, softComponents, overr
 declare const createUseSoftConfig: () => <T>(selector: (state: AppStore) => T, equalityFn?: (a: T, b: T) => boolean) => T;
 declare const useSoftConfig: <T>(selector: (state: AppStore) => T, equalityFn?: (a: T, b: T) => boolean) => T;
 
-declare const useBuild: () => {
+declare const useBuild: (name?: string) => {
     handleBuild: () => void;
     canBuild: boolean;
 };
@@ -375,7 +375,7 @@ declare const useComplete: () => {
     handleComplete: () => string | null;
     canComplete: boolean;
     newComponent: string | null;
-    setNewComponent: react.Dispatch<react.SetStateAction<string | null>>;
+    setNewComponent: React$1.Dispatch<React$1.SetStateAction<string | null>>;
 };
 
 declare const useCancel: () => {
@@ -404,20 +404,42 @@ declare const useSetDefaultVersion: () => {
 
 declare const Header: ({ onPublish, children, }: {
     onPublish?: (data: Data, softComponents: SoftComponents) => void;
-    children: react__default.ReactNode;
+    children: React__default.ReactNode;
 }) => react_jsx_runtime.JSX.Element;
 
 declare const ActionBarOverride: (props: {
     label?: string;
-    parentAction?: react__default.ReactNode;
-    children?: react__default.ReactNode;
+    parentAction?: React__default.ReactNode;
+    children?: React__default.ReactNode;
 }) => react_jsx_runtime.JSX.Element;
 
+declare const DrawerItem: (props: {
+    name: string;
+    children: React.ReactNode;
+}) => React.ReactElement;
+/** @deprecated Use DrawerItem instead */
 declare const ComponentItem: (props: {
     name: string;
     children: React.ReactNode;
 }) => React.ReactElement;
 
+/**
+ * Drawer — custom drawer override for the Puck editor.
+ *
+ * Reads config.categories from puck and renders a collapsible section per
+ * category, each containing a PuckDrawer with DrawerItem as the item
+ * renderer (soft-config versioning, demolish, and settings modal included).
+ * Components not assigned to any category render under "Other components".
+ *
+ * Falls back to a flat list when no categories are defined.
+ *
+ * Usage:
+ *   overrides={{ drawer: Drawer }}
+ */
+declare const Drawer: (_props: {
+    children?: React__default.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
 type NotificationHandler = (message: string, type: "error" | "success") => void;
 declare const setNotificationHandler: (handler: NotificationHandler) => void;
 declare const notify: {
@@ -472,4 +494,4 @@ declare const Modal: ({ children, onClose, isOpen, }: {
     isOpen: boolean;
 }) => react_jsx_runtime.JSX.Element;
 
-export { ActionBarOverride as ActionBar, type ActionEventPayload, type AppStore, type AppStoreApi, type BuilderComponentConfig, type BuilderConfig, type BuilderRootConfig, ComponentItem, Header, Modal, type OnActionsCallback, type Overrides, type SoftComponent, type SoftComponents, SoftConfigProvider, type VersionedSoftComponent, confirm, createActionCallback, createSoftConfigStore, createUseSoftConfig, notify, resolveSoftConfig, setConfirmHandler, setNotificationHandler, useBuild, useCancel, useComplete, useDecompose, useDemolish, useInspect, useRemodel, useSetDefaultVersion, useSoftConfig };
+export { ActionBarOverride as ActionBar, type ActionEventPayload, type AppStore, type AppStoreApi, type BuilderComponentConfig, type BuilderConfig, type BuilderRootConfig, ComponentItem, Drawer as ComponentList, Drawer, DrawerItem, Header, Modal, type OnActionsCallback, type Overrides, type SoftComponent, type SoftComponents, SoftConfigProvider, type VersionedSoftComponent, confirm, createActionCallback, createSoftConfigStore, createUseSoftConfig, notify, resolveSoftConfig, setConfirmHandler, setNotificationHandler, useBuild, useCancel, useComplete, useDecompose, useDemolish, useInspect, useRemodel, useSetDefaultVersion, useSoftConfig };

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,
@@ -1447,19 +1450,22 @@ var createBuildersSlice = (set, get, initialConfig) => ({
     }
     puckDispatch({
       type: "set",
-      state: (previous) => ({
-        ui: __spreadProps(__spreadValues({}, previous.ui), {
-          itemSelector: null
-        }),
-        data: __spreadProps(__spreadValues({}, previous.data), {
-          root: {
-            props: {
-              _name: 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;
@@ -2572,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);
@@ -2586,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",
@@ -3009,7 +3015,7 @@ 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);
@@ -3066,7 +3072,7 @@ var ActionBarOverride = (props) => {
   ] }) });
 };
 
-// src/puck/overrides/ComponentItem.tsx
+// src/puck/overrides/DrawerItem.tsx
 var import_react11 = require("react");
 var import_puck15 = require("@measured/puck");
 var import_lucide_react2 = require("lucide-react");
@@ -3088,8 +3094,8 @@ var confirm = (message) => __async(null, null, function* () {
   }
 });
 
-// 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" };
+// 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_react10 = require("react");
@@ -3126,12 +3132,12 @@ 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(
@@ -3280,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) => {
@@ -3325,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) => {
@@ -3552,6 +3677,9 @@ var resolveSoftConfig = (data, softComponents, config) => {
 0 && (module.exports = {
   ActionBar,
   ComponentItem,
+  ComponentList,
+  Drawer,
+  DrawerItem,
   Header,
   Modal,
   SoftConfigProvider,

package/dist/puck/index.mjs

@@ -1398,19 +1398,22 @@ var createBuildersSlice = (set, get, initialConfig) => ({
     }
     puckDispatch({
       type: "set",
-      state: (previous) => ({
-        ui: __spreadProps(__spreadValues({}, previous.ui), {
-          itemSelector: null
-        }),
-        data: __spreadProps(__spreadValues({}, previous.data), {
-          root: {
-            props: {
-              _name: 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;
@@ -2523,7 +2526,7 @@ var useActionEvent = () => {
 
 // src/puck/actions/useBuild.tsx
 var useCustomPuck2 = createUsePuck2();
-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);
@@ -2537,7 +2540,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",
@@ -2960,7 +2963,7 @@ var getClassName3 = get_class_name_factory_default("ActionBar", ActionBar_module
 var usePuck2 = createUsePuck11();
 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);
@@ -3017,7 +3020,7 @@ var ActionBarOverride = (props) => {
   ] }) });
 };
 
-// src/puck/overrides/ComponentItem.tsx
+// src/puck/overrides/DrawerItem.tsx
 import { useState as useState5 } from "react";
 import { Button as Button2, IconButton, createUsePuck as createUsePuck12 } from "@measured/puck";
 import { GripVertical, Check, X, Trash2, Cog } from "lucide-react";
@@ -3039,8 +3042,8 @@ var confirm = (message) => __async(null, null, function* () {
   }
 });
 
-// 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" };
+// 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
 import { useEffect as useEffect4, useState as useState4 } from "react";
@@ -3077,12 +3080,12 @@ var Modal = ({
   );
 };
 
-// src/puck/overrides/ComponentItem.tsx
+// src/puck/overrides/DrawerItem.tsx
 import { shallow as shallow2 } from "zustand/shallow";
 import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs4 } from "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 = createUsePuck12();
-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(
@@ -3231,6 +3234,7 @@ var ComponentItem = (props) => {
             /* @__PURE__ */ jsx11("div", { className: getClassName5("migrationOptions"), children: /* @__PURE__ */ jsxs4(
               "select",
               {
+                title: "Select migration version",
                 className: getClassName5("select"),
                 value: migrateVersionMap[Array.from(versionsToDelete)[0]] || "decompose",
                 onChange: (e) => {
@@ -3276,6 +3280,124 @@ var ComponentItem = (props) => {
   }
   return /* @__PURE__ */ jsx11(Fragment5, { children: props.children });
 };
+var ComponentItem = DrawerItem;
+
+// src/puck/overrides/Drawer.tsx
+import { useState as useState6 } from "react";
+import { createUsePuck as createUsePuck13, Drawer as PuckDrawer } from "@measured/puck";
+import { ChevronDown, ChevronUp } from "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
+import { jsx as jsx12, jsxs as jsxs5 } from "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 = createUsePuck13();
+var CategorySection = ({
+  id,
+  title,
+  componentKeys,
+  getPermissions,
+  expanded,
+  onToggle
+}) => /* @__PURE__ */ jsxs5("div", { className: getCategoryClassName({ isExpanded: expanded }), children: [
+  title && /* @__PURE__ */ jsxs5(
+    "button",
+    {
+      type: "button",
+      className: getClassName6("categoryTitle"),
+      onClick: () => onToggle(id),
+      title: expanded ? `Collapse ${title}` : `Expand ${title}`,
+      children: [
+        /* @__PURE__ */ jsx12("span", { children: title }),
+        /* @__PURE__ */ jsx12("span", { className: getClassName6("categoryTitleIcon"), children: expanded ? /* @__PURE__ */ jsx12(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx12(ChevronDown, { size: 12 }) })
+      ]
+    }
+  ),
+  /* @__PURE__ */ jsx12("div", { className: getClassName6("categoryContent"), children: /* @__PURE__ */ jsx12(PuckDrawer, { children: componentKeys.map((key) => /* @__PURE__ */ jsx12(
+    PuckDrawer.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] = useState6(() => {
+    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__ */ jsx12(PuckDrawer, { children: allKeys.map((key) => /* @__PURE__ */ jsx12(
+      PuckDrawer.Item,
+      {
+        name: key,
+        isDragDisabled: !getPermissions({ type: key }).insert,
+        children: DrawerItem
+      },
+      key
+    )) });
+  }
+  console.log(
+    getClassName6(),
+    getCategoryClassName(),
+    getCategoryClassName({ isExpanded: true })
+  );
+  return /* @__PURE__ */ jsxs5("div", { className: getClassName6(), children: [
+    categoryEntries.map(([id, cat]) => {
+      var _a2, _b2, _c;
+      return /* @__PURE__ */ jsx12(
+        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__ */ jsx12(
+      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) => {
@@ -3502,6 +3624,9 @@ var resolveSoftConfig = (data, softComponents, config) => {
 export {
   ActionBarOverride as ActionBar,
   ComponentItem,
+  Drawer as ComponentList,
+  Drawer,
+  DrawerItem,
   Header,
   Modal,
   SoftConfigProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netlisian/softconfig",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",