@netlisian/softconfig 0.1.1 → 0.1.3

package/dist/puck/index.mjs

@@ -372,7 +372,7 @@ var builderRootConfig = (config, overrides, editingComponent, showVersionFields
           )
         };
       else delete fields._fieldSettings;
-    if (showVersionFields && ((_b = data == null ? void 0 : data._versions) == null ? void 0 : _b.length) && (!(data == null ? void 0 : data._version) || changed._version || changed._fieldSettings)) {
+    if (showVersionFields && ((_b = data == null ? void 0 : data._versions) == null ? void 0 : _b.length)) {
       const latestVersion = data._versions[data._versions.length - 1] || "1.0.0";
       delete fields._version;
       fields._version = {
@@ -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;
@@ -1554,7 +1557,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
     );
   },
   complete: (appState, setHistories, getItemBySelector) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     if (get().state === "ready") {
       throw new Error("Not building or remodeling a component.");
     }
@@ -1639,8 +1642,21 @@ var createBuildersSlice = (set, get, initialConfig) => ({
         editableComponentIds: /* @__PURE__ */ new Set()
       });
     });
+    if (!version) {
+      throw new Error("Failed to resolve completed component version.");
+    }
+    const completedSoftComponent = (_f = get().softComponents[componentName]) == null ? void 0 : _f.versions[version];
+    if (!completedSoftComponent) {
+      throw new Error(
+        `Completed soft component "${componentName}" version "${version}" not found.`
+      );
+    }
     get().rebuildDependents(componentName, version);
-    return componentName;
+    return {
+      id: componentName,
+      version,
+      softComponent: completedSoftComponent
+    };
   },
   inspect: (componentName, puckDispatch) => {
     if (get().state !== "inspecting") {
@@ -2523,7 +2539,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 +2553,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",
@@ -2570,28 +2586,42 @@ var useRemodel = () => {
   const refreshPermissions = useCustomPuck3((s) => s.refreshPermissions);
   const { triggerAction } = useActionEvent();
   const handleRemodel = (componentName) => {
+    var _a, _b, _c;
     if (status !== "ready") {
       notify.error("Can only remodel when in ready state.");
-      return;
+      return null;
     }
     const name = componentName || (selectedItem == null ? void 0 : selectedItem.type);
     if (!name || !Object.keys(softComponents).includes(name)) {
       notify.error("Selected component is not a soft component.");
-      return;
+      return null;
     }
+    const selectedVersion = ((_a = selectedItem == null ? void 0 : selectedItem.props) == null ? void 0 : _a.version) || ((_b = softComponents[name]) == null ? void 0 : _b.defaultVersion);
+    const selectedSoftComponent = selectedVersion ? (_c = softComponents[name]) == null ? void 0 : _c.versions[selectedVersion] : void 0;
     try {
       remodel(history, selectedItem, itemSelector, dispatch, refreshPermissions);
       void triggerAction({
         type: "remodel",
         payload: {
-          id: name
+          id: name,
+          version: selectedVersion,
+          softComponent: selectedSoftComponent
         }
       });
+      if (selectedVersion && selectedSoftComponent) {
+        return {
+          id: name,
+          version: selectedVersion,
+          softComponent: selectedSoftComponent
+        };
+      }
+      return { id: name, version: selectedVersion };
     } catch (error) {
       console.error("Failed to remodel:", error);
       notify.error(
         "Failed to remodel: " + (error instanceof Error ? error.message : String(error))
       );
+      return null;
     }
   };
   const canRemodel = (componentName) => {
@@ -2611,31 +2641,29 @@ var useComplete = () => {
   const setHistories = useCustomPuck4((s) => s.history.setHistories);
   const getItemBySelector = useCustomPuck4((s) => s.getItemBySelector);
   const status = useSoftConfig((s) => s.state);
-  const softComponents = useSoftConfig((s) => s.softComponents);
   const [newComponent, setNewComponent] = useState3(null);
   const { triggerAction } = useActionEvent();
   const handleComplete = useCallback2(() => {
-    var _a, _b;
     if (status === "ready") {
       notify.error("Not building or remodeling a component.");
       return null;
     }
     try {
-      const componentName = complete(appState, setHistories, getItemBySelector);
-      setNewComponent(componentName);
+      const completedComponent = complete(appState, setHistories, getItemBySelector);
+      setNewComponent(completedComponent);
       const componentData = appState.data.root;
-      const softComponent = (_b = softComponents[componentName]) == null ? void 0 : _b.versions[(_a = softComponents[componentName]) == null ? void 0 : _a.defaultVersion];
-      if (softComponent && componentData) {
+      if (componentData) {
         void triggerAction({
           type: "complete",
           payload: {
-            id: componentName,
+            id: completedComponent.id,
+            version: completedComponent.version,
             componentData,
-            softComponent
+            softComponent: completedComponent.softComponent
           }
         });
       }
-      return componentName;
+      return completedComponent;
     } catch (error) {
       console.error("Failed to complete:", error);
       notify.error(
@@ -2643,7 +2671,7 @@ var useComplete = () => {
       );
       return null;
     }
-  }, [complete, appState, setHistories, status, softComponents, triggerAction, getItemBySelector]);
+  }, [complete, appState, setHistories, status, triggerAction, getItemBySelector]);
   const canComplete = status === "building" || status === "remodeling";
   return { handleComplete, canComplete, newComponent, setNewComponent };
 };
@@ -2682,23 +2710,25 @@ var useCancel = () => {
 import { createUsePuck as createUsePuck6 } from "@measured/puck";
 import { useEffect as useEffect3 } from "react";
 var useCustomPuck6 = createUsePuck6();
-var useInspect = (componentName) => {
+var useInspect = (component) => {
   const inspect = useSoftConfig((s) => s.builder.inspect);
   const dispatch = useCustomPuck6((s) => s.dispatch);
   const status = useSoftConfig((s) => s.state);
   const { triggerAction } = useActionEvent();
   useEffect3(() => {
     if (status !== "inspecting") return;
-    if (!componentName) {
+    if (!component) {
       notify.error("No component to inspect.");
       return;
     }
     try {
-      inspect(componentName, dispatch);
+      inspect(component.id, dispatch);
       void triggerAction({
         type: "inspect",
         payload: {
-          id: componentName
+          id: component.id,
+          version: component.version,
+          softComponent: component.softComponent
         }
       });
     } catch (error) {
@@ -2707,7 +2737,7 @@ var useInspect = (componentName) => {
         "Failed to inspect: " + (error instanceof Error ? error.message : String(error))
       );
     }
-  }, [status, componentName, inspect, dispatch, triggerAction]);
+  }, [status, component, inspect, dispatch, triggerAction]);
 };
 
 // src/puck/actions/useDecompose.tsx
@@ -2923,9 +2953,9 @@ var Header = ({
       {
         variant: "primary",
         onClick: () => {
-          const name = handleComplete();
-          if (name) {
-            setNewComponent(name);
+          const completedComponent = handleComplete();
+          if (completedComponent) {
+            setNewComponent(completedComponent);
           }
         },
         children: "Complete"
@@ -2960,7 +2990,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 +3047,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,15 +3069,15 @@ 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_182aj_1", "DrawerItem--insertDisabled": "_DrawerItem--insertDisabled_182aj_14", "DrawerItem-content": "_DrawerItem-content_182aj_21", "DrawerItem-name": "_DrawerItem-name_182aj_31", "DrawerItem-version": "_DrawerItem-version_182aj_35", "DrawerItem-actions": "_DrawerItem-actions_182aj_40", "DrawerItem-settingsButton": "_DrawerItem-settingsButton_182aj_46", "DrawerItem-grip": "_DrawerItem-grip_182aj_56", "DrawerItem-modal": "_DrawerItem-modal_182aj_63", "DrawerItem-modalHeader": "_DrawerItem-modalHeader_182aj_71", "DrawerItem-modalTitle": "_DrawerItem-modalTitle_182aj_77", "DrawerItem-modalSubtitle": "_DrawerItem-modalSubtitle_182aj_84", "DrawerItem-modalBody": "_DrawerItem-modalBody_182aj_90", "DrawerItem-section": "_DrawerItem-section_182aj_100", "DrawerItem-sectionTitle": "_DrawerItem-sectionTitle_182aj_106", "DrawerItem-sectionDescription": "_DrawerItem-sectionDescription_182aj_113", "DrawerItem-versionList": "_DrawerItem-versionList_182aj_119", "DrawerItem-versionRow": "_DrawerItem-versionRow_182aj_125", "DrawerItem-versionRow--isDefault": "_DrawerItem-versionRow--isDefault_182aj_136", "DrawerItem-versionRow--isMarkedForDeletion": "_DrawerItem-versionRow--isMarkedForDeletion_182aj_141", "DrawerItem-versionInfo": "_DrawerItem-versionInfo_182aj_146", "DrawerItem-versionNumber": "_DrawerItem-versionNumber_182aj_153", "DrawerItem-defaultBadge": "_DrawerItem-defaultBadge_182aj_159", "DrawerItem-deleteBadge": "_DrawerItem-deleteBadge_182aj_170", "DrawerItem-versionActions": "_DrawerItem-versionActions_182aj_181", "DrawerItem-migrationOptions": "_DrawerItem-migrationOptions_182aj_187", "DrawerItem-migrationList": "_DrawerItem-migrationList_182aj_191", "DrawerItem-migrationOption": "_DrawerItem-migrationOption_182aj_187", "DrawerItem-migrationOption--isSelected": "_DrawerItem-migrationOption--isSelected_182aj_229", "DrawerItem-migrationOptionLabel": "_DrawerItem-migrationOptionLabel_182aj_234", "DrawerItem-modalFooter": "_DrawerItem-modalFooter_182aj_240", "DrawerItem-footerLeft": "_DrawerItem-footerLeft_182aj_250", "DrawerItem-footerRight": "_DrawerItem-footerRight_182aj_255" };
 
 // src/puck/components/modal/index.tsx
 import { useEffect as useEffect4, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
 
 // 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" };
+var styles_module_default2 = { "Modal": "_Modal_1t9ot_1", "Modal--isOpen": "_Modal--isOpen_1t9ot_29", "Modal-inner": "_Modal-inner_1t9ot_37" };
 
 // src/puck/components/modal/index.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
@@ -3061,28 +3091,53 @@ var Modal = ({
   useEffect4(() => {
     setRootEl(document.getElementById("puck-portal-root"));
   }, []);
+  useEffect4(() => {
+    if (!isOpen) {
+      return;
+    }
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, onClose]);
   if (!rootEl) {
     return /* @__PURE__ */ jsx10("div", {});
   }
   return createPortal(
-    /* @__PURE__ */ jsx10("div", { className: getClassName4({ isOpen }), onClick: onClose, children: /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx10(
       "div",
       {
-        className: getClassName4("inner"),
-        onClick: (e) => e.stopPropagation(),
-        children
+        className: getClassName4({ isOpen }),
+        onClick: (event) => {
+          if (event.target === event.currentTarget) {
+            onClose();
+          }
+        },
+        children: /* @__PURE__ */ jsx10(
+          "div",
+          {
+            className: getClassName4("inner"),
+            role: "dialog",
+            "aria-modal": "true",
+            onClick: (e) => e.stopPropagation(),
+            children
+          }
+        )
       }
-    ) }),
+    ),
     rootEl
   );
 };
 
-// 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(
@@ -3095,13 +3150,14 @@ var ComponentItem = (props) => {
   );
   const { handleDemolish } = useDemolish();
   const { handleSetDefaultVersion, getVersions, getDefaultVersion } = useSetDefaultVersion();
+  const { triggerAction } = useActionEvent();
   const [isEditing, setIsEditing] = useState5(false);
   const [isHovering, setIsHovering] = useState5(false);
   const [selectedVersion, setSelectedVersion] = useState5("");
   const [versionsToDelete, setVersionsToDelete] = useState5(
     /* @__PURE__ */ new Set()
   );
-  const [migrateVersionMap, setMigrateVersionMap] = useState5({});
+  const [migrationTarget, setMigrationTarget] = useState5("decompose");
   const useVersioning = useSoftConfig((s) => s.showVersionFields);
   const versions = getVersions(props.name);
   const defaultVersion = getDefaultVersion(props.name);
@@ -3122,19 +3178,27 @@ var ComponentItem = (props) => {
           break;
         } else {
           removeSoftComponentVersion(props.name, version);
+          void triggerAction({
+            type: "deleteVersion",
+            payload: {
+              id: props.name,
+              version,
+              migrateToVersion: migrationTarget
+            }
+          });
         }
       }
     }
     setIsEditing(false);
     setSelectedVersion("");
     setVersionsToDelete(/* @__PURE__ */ new Set());
-    setMigrateVersionMap({});
+    setMigrationTarget("decompose");
   });
   const handleCancel = () => {
     setIsEditing(false);
     setSelectedVersion("");
     setVersionsToDelete(/* @__PURE__ */ new Set());
-    setMigrateVersionMap({});
+    setMigrationTarget("decompose");
   };
   const toggleVersionForDeletion = (version) => {
     const newSet = new Set(versionsToDelete);
@@ -3156,6 +3220,13 @@ var ComponentItem = (props) => {
   });
   if (softComponents.has(props.name)) {
     const availableVersions = versions.filter((v) => !versionsToDelete.has(v));
+    const migrationTargets = [
+      { value: "decompose", label: "Decompose to basic elements" },
+      ...availableVersions.map((version) => ({
+        value: version,
+        label: `Migrate to Version ${version}`
+      }))
+    ];
     return /* @__PURE__ */ jsxs4(Fragment5, { children: [
       /* @__PURE__ */ jsxs4(
         "div",
@@ -3226,29 +3297,35 @@ var ComponentItem = (props) => {
               ] }, version);
             }) })
           ] }),
-          versionsToDelete.size > 0 && availableVersions.length > 0 && /* @__PURE__ */ jsxs4("div", { className: getClassName5("section"), children: [
+          versionsToDelete.size > 0 && /* @__PURE__ */ jsxs4("div", { className: getClassName5("section"), children: [
             /* @__PURE__ */ jsx11("h3", { className: getClassName5("sectionTitle"), children: "Migration Settings" }),
-            /* @__PURE__ */ jsx11("div", { className: getClassName5("migrationOptions"), children: /* @__PURE__ */ jsxs4(
-              "select",
+            /* @__PURE__ */ jsx11("div", { className: getClassName5("migrationOptions"), children: /* @__PURE__ */ jsx11(
+              "div",
               {
-                className: getClassName5("select"),
-                value: migrateVersionMap[Array.from(versionsToDelete)[0]] || "decompose",
-                onChange: (e) => {
-                  const newMap = __spreadValues({}, migrateVersionMap);
-                  versionsToDelete.forEach((v) => {
-                    newMap[v] = e.target.value;
-                  });
-                  setMigrateVersionMap(newMap);
-                },
-                children: [
-                  /* @__PURE__ */ jsx11("option", { value: "decompose", children: "Decompose to basic elements" }),
-                  availableVersions.map((v) => /* @__PURE__ */ jsxs4("option", { value: v, children: [
-                    "Migrate to Version ",
-                    v
-                  ] }, v))
-                ]
+                className: getClassName5("migrationList"),
+                role: "radiogroup",
+                "aria-label": "Migration target",
+                children: migrationTargets.map((target) => {
+                  const isSelected = migrationTarget === target.value;
+                  return /* @__PURE__ */ jsxs4(
+                    "button",
+                    {
+                      type: "button",
+                      role: "radio",
+                      "aria-checked": isSelected,
+                      className: `${getClassName5("migrationOption")} ${isSelected ? getClassName5("migrationOption--isSelected") : ""}`,
+                      onClick: () => setMigrationTarget(target.value),
+                      children: [
+                        /* @__PURE__ */ jsx11("span", { className: getClassName5("migrationOptionLabel"), children: target.label }),
+                        isSelected && /* @__PURE__ */ jsx11(Check, { size: 14 })
+                      ]
+                    },
+                    target.value
+                  );
+                })
               }
-            ) })
+            ) }),
+            /* @__PURE__ */ jsx11("p", { className: getClassName5("helpText"), children: "Choose where to move existing instances of the deleted versions." })
           ] })
         ] }) : /* @__PURE__ */ jsx11("div", { className: getClassName5("section"), children: /* @__PURE__ */ jsxs4("p", { children: [
           "Manage high-level settings for the ",
@@ -3276,6 +3353,119 @@ 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
+    )) });
+  }
+  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 +3692,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.3",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",