@netlisian/softconfig 0.1.0 → 0.1.2

package/dist/puck/index.css

@@ -1,4 +1,4 @@
-/* css-module:/media/osamu/3628738E28734BBD/osamuProjects/netlisian/packages/soft-config/src/puck/components/error-boundary/styles.module.css/#css-module-data */
+/* css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/components/error-boundary/styles.module.css/#css-module-data */
 ._ErrorBoundary_1xl05_5 {
   padding: 20px;
   border: 1px solid #ff5858;
@@ -26,7 +26,7 @@
   background-color: #b71c1c;
 }
 
-/* css-module:/media/osamu/3628738E28734BBD/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/Header.module.css/#css-module-data */
+/* css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/Header.module.css/#css-module-data */
 ._Header_19oj9_1 {
   display: flex;
   justify-content: space-between;
@@ -35,7 +35,7 @@
   flex-wrap: wrap;
 }
 
-/* css-module:/media/osamu/3628738E28734BBD/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/ActionBar.module.css/#css-module-data */
+/* css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/ActionBar.module.css/#css-module-data */
 ._ActionBar_pvuie_5 {
   align-items: center;
   cursor: default;
@@ -119,8 +119,8 @@
   margin: 0;
 }
 
-/* css-module:/media/osamu/3628738E28734BBD/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,16 +305,16 @@
   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;
 }
 
-/* css-module:/media/osamu/3628738E28734BBD/osamuProjects/netlisian/packages/soft-config/src/puck/components/modal/styles.module.css/#css-module-data */
+/* css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/components/modal/styles.module.css/#css-module-data */
 ._Modal_pvj02_1 {
   background: color-mix(in srgb, var(--puck-color-black) 75%, transparent);
   display: none;
@@ -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, PuckAction, Data } from '@measured/puck';
-import * as react from 'react';
-import react__default, { ReactNode, ReactElement } from 'react';
+import { History, AppState, PuckApi, ComponentData, ComponentConfig, DefaultComponentProps, Field, Config, Fields, RootData, AsFieldProps, WithChildren, Metadata, ResolveDataTrigger, PuckAction, Data } from '@measured/puck';
+import * as React$1 from 'react';
+import React__default, { ReactNode, ReactElement } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type BuildersSlice = {
@@ -21,7 +21,7 @@ type BuildersSlice = {
     build: (history: History<AppState>[], selectedItem: PuckApi["selectedItem"], itemSelector: {
         index: number;
         zone?: string;
-    } | null, puckDispatch: PuckApi["dispatch"]) => void | null;
+    } | null, puckDispatch: PuckApi["dispatch"], name?: string) => void | null;
     /**
      * Remodel the selected soft component by decomposing it and resetting as root.
      *
@@ -77,7 +77,7 @@ type BuildersSlice = {
     /** Compose multiple components into a soft component.
      * 1. SoftComponent: Get soft fields + default values from the appState.root + sub-component maps + fixedProps
      */
-    compose: (appState: AppState, componentName: string, editedItem: ComponentData) => [ComponentConfig, string] | undefined;
+    compose: (appState: AppState, componentName: string, editedItem: ComponentData, displayName: string, category?: string) => [ComponentConfig, string] | undefined;
     /** Break down a composed component into its parts.
      * 1. Get softComponentProps
      * 2. Create a virtual component with all the props from soft-component.
@@ -88,6 +88,7 @@ type BuildersSlice = {
 
 type BuilderRootConfig = {
     _name: string;
+    _category?: string;
     _version?: string;
     _versions?: string[];
     _fields?: {
@@ -125,6 +126,8 @@ type SoftSubComponent = {
     }[];
 }[];
 type SoftComponent = {
+    name: string;
+    category?: string;
     fields: Fields;
     fieldSettings?: Record<string, any>;
     defaultProps: DefaultComponentProps;
@@ -135,6 +138,8 @@ type SoftComponent = {
 };
 type VersionedSoftComponent = {
     defaultVersion: string;
+    name: string;
+    category?: string;
     versions: {
         [version: string]: {
             fields: Fields;
@@ -170,8 +175,8 @@ type ActionEventPayload = {
     type: "complete";
     payload: {
         id: string;
-        componentData: DefaultComponentProps;
-        softComponent: SoftComponent;
+        componentData: Record<string, any>;
+        softComponent: VersionedSoftComponent["versions"][string];
     };
 } | {
     type: "cancel";
@@ -212,6 +217,10 @@ type RenderFunc<Props extends {
     children: ReactNode;
 }> = (props: Props) => ReactElement;
 type Overrides = {
+    componentNameToKey?: (displayName: string, context: {
+        existingKeys: string[];
+        state: "building" | "remodeling" | "ready" | "inspecting";
+    }) => string;
     map?: RenderFunc<{
         rootProps: BuilderRootConfig;
         toOptions: {
@@ -236,6 +245,16 @@ type Overrides = {
         softComponent: VersionedSoftComponent["versions"][string];
     }) => ((inputs: any[], props: DefaultComponentProps) => any) | undefined;
     onActions?: OnActionsCallback;
+    name?: Field<string>;
+    categories?: Field<string | undefined>;
+    onRootsDataChange?: (data: RootData<AsFieldProps<WithChildren<BuilderRootConfig>>>, params: {
+        changed: Partial<Record<keyof BuilderRootConfig, boolean> & {
+            id: string;
+        }>;
+        lastData: RootData<AsFieldProps<WithChildren<BuilderRootConfig>>> | null;
+        metadata: Metadata;
+        trigger: ResolveDataTrigger;
+    }) => void;
 };
 
 type Status = "building" | "remodeling" | "ready" | "inspecting";
@@ -342,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;
 };
@@ -356,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: () => {
@@ -385,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: {
@@ -453,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, PuckAction, Data } from '@measured/puck';
-import * as react from 'react';
-import react__default, { ReactNode, ReactElement } from 'react';
+import { History, AppState, PuckApi, ComponentData, ComponentConfig, DefaultComponentProps, Field, Config, Fields, RootData, AsFieldProps, WithChildren, Metadata, ResolveDataTrigger, PuckAction, Data } from '@measured/puck';
+import * as React$1 from 'react';
+import React__default, { ReactNode, ReactElement } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type BuildersSlice = {
@@ -21,7 +21,7 @@ type BuildersSlice = {
     build: (history: History<AppState>[], selectedItem: PuckApi["selectedItem"], itemSelector: {
         index: number;
         zone?: string;
-    } | null, puckDispatch: PuckApi["dispatch"]) => void | null;
+    } | null, puckDispatch: PuckApi["dispatch"], name?: string) => void | null;
     /**
      * Remodel the selected soft component by decomposing it and resetting as root.
      *
@@ -77,7 +77,7 @@ type BuildersSlice = {
     /** Compose multiple components into a soft component.
      * 1. SoftComponent: Get soft fields + default values from the appState.root + sub-component maps + fixedProps
      */
-    compose: (appState: AppState, componentName: string, editedItem: ComponentData) => [ComponentConfig, string] | undefined;
+    compose: (appState: AppState, componentName: string, editedItem: ComponentData, displayName: string, category?: string) => [ComponentConfig, string] | undefined;
     /** Break down a composed component into its parts.
      * 1. Get softComponentProps
      * 2. Create a virtual component with all the props from soft-component.
@@ -88,6 +88,7 @@ type BuildersSlice = {
 
 type BuilderRootConfig = {
     _name: string;
+    _category?: string;
     _version?: string;
     _versions?: string[];
     _fields?: {
@@ -125,6 +126,8 @@ type SoftSubComponent = {
     }[];
 }[];
 type SoftComponent = {
+    name: string;
+    category?: string;
     fields: Fields;
     fieldSettings?: Record<string, any>;
     defaultProps: DefaultComponentProps;
@@ -135,6 +138,8 @@ type SoftComponent = {
 };
 type VersionedSoftComponent = {
     defaultVersion: string;
+    name: string;
+    category?: string;
     versions: {
         [version: string]: {
             fields: Fields;
@@ -170,8 +175,8 @@ type ActionEventPayload = {
     type: "complete";
     payload: {
         id: string;
-        componentData: DefaultComponentProps;
-        softComponent: SoftComponent;
+        componentData: Record<string, any>;
+        softComponent: VersionedSoftComponent["versions"][string];
     };
 } | {
     type: "cancel";
@@ -212,6 +217,10 @@ type RenderFunc<Props extends {
     children: ReactNode;
 }> = (props: Props) => ReactElement;
 type Overrides = {
+    componentNameToKey?: (displayName: string, context: {
+        existingKeys: string[];
+        state: "building" | "remodeling" | "ready" | "inspecting";
+    }) => string;
     map?: RenderFunc<{
         rootProps: BuilderRootConfig;
         toOptions: {
@@ -236,6 +245,16 @@ type Overrides = {
         softComponent: VersionedSoftComponent["versions"][string];
     }) => ((inputs: any[], props: DefaultComponentProps) => any) | undefined;
     onActions?: OnActionsCallback;
+    name?: Field<string>;
+    categories?: Field<string | undefined>;
+    onRootsDataChange?: (data: RootData<AsFieldProps<WithChildren<BuilderRootConfig>>>, params: {
+        changed: Partial<Record<keyof BuilderRootConfig, boolean> & {
+            id: string;
+        }>;
+        lastData: RootData<AsFieldProps<WithChildren<BuilderRootConfig>>> | null;
+        metadata: Metadata;
+        trigger: ResolveDataTrigger;
+    }) => void;
 };
 
 type Status = "building" | "remodeling" | "ready" | "inspecting";
@@ -342,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;
 };
@@ -356,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: () => {
@@ -385,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: {
@@ -453,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 };