@netlisian/softconfig 0.1.2 → 0.1.3

package/dist/puck/index.d.ts

@@ -1,10 +1,91 @@
 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 _measured_puck from '@measured/puck';
+import { DefaultComponentProps, Field, Config, Fields, History, AppState, PuckApi, ComponentData, ComponentConfig, 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 BuilderRootConfig = {
+    _name: string;
+    _category?: string;
+    _version?: string;
+    _versions?: string[];
+    _fields?: {
+        name: string;
+        type: Field["type"];
+    }[];
+    _fieldSettings?: {
+        [key: string]: any;
+    };
+};
+type BuilderComponentConfig = {
+    _slot?: {
+        slot: string;
+    }[];
+    _map?: {
+        to: string | string[];
+        from: string | string[];
+        transform?: (inputs: any[], props: DefaultComponentProps) => any;
+        [key: string]: any;
+    }[];
+    [key: string]: any;
+};
+type BuilderConfig = Config<any, BuilderRootConfig>;
+
+type SoftSubComponent = {
+    type: string;
+    map: BuilderComponentConfig['_map'];
+    components: {
+        [slot: string]: SoftSubComponent;
+    };
+    fixedProps?: DefaultComponentProps;
+    enabledSlots: {
+        slot: string;
+        name?: string;
+    }[];
+}[];
+type SoftComponent = {
+    name: string;
+    category?: string;
+    fields: Fields;
+    fieldSettings?: Record<string, any>;
+    defaultProps: DefaultComponentProps;
+    components: SoftSubComponent;
+    slots: {
+        [slot: string]: DefaultComponentProps;
+    };
+};
+type VersionedSoftComponent = {
+    defaultVersion: string;
+    name: string;
+    category?: string;
+    versions: {
+        [version: string]: {
+            fields: Fields;
+            fieldSettings?: Record<string, any>;
+            defaultProps: DefaultComponentProps;
+            components: SoftSubComponent;
+            slots: {
+                [slot: string]: DefaultComponentProps;
+            };
+        };
+    };
+    /**
+     * Dependencies map: version -> Set of component names this component depends on
+     * Automatically inferred from component structure but can be overridden
+     */
+    dependencies?: {
+        [version: string]: Set<string>;
+    };
+};
+type SoftComponents = Record<string, VersionedSoftComponent>;
+
+type CompletedComponentResult = {
+    id: string;
+    version: string;
+    softComponent: VersionedSoftComponent["versions"][string];
+};
 type BuildersSlice = {
     /**
      * Build a new soft component based on the selected item in history.
@@ -61,7 +142,7 @@ type BuildersSlice = {
      *    - Strip the build settings fields
      *    - Apply modified history to puck data.
      */
-    complete: (appState: AppState<any>, setHistories: PuckApi["history"]["setHistories"], getItemBySelector: PuckApi["getItemBySelector"]) => string;
+    complete: (appState: AppState<any>, setHistories: PuckApi["history"]["setHistories"], getItemBySelector: PuckApi["getItemBySelector"]) => CompletedComponentResult;
     demolish: (componentName: string, data: AppState["data"], puckDispatch: PuckApi["dispatch"]) => void;
     inspect: (componentName: string, puckDispatch: PuckApi["dispatch"]) => void;
     /**
@@ -86,81 +167,6 @@ type BuildersSlice = {
     decompose: (componentData: ComponentData) => ComponentData[];
 };
 
-type BuilderRootConfig = {
-    _name: string;
-    _category?: string;
-    _version?: string;
-    _versions?: string[];
-    _fields?: {
-        name: string;
-        type: Field["type"];
-    }[];
-    _fieldSettings?: {
-        [key: string]: any;
-    };
-};
-type BuilderComponentConfig = {
-    _slot?: {
-        slot: string;
-    }[];
-    _map?: {
-        to: string | string[];
-        from: string | string[];
-        transform?: (inputs: any[], props: DefaultComponentProps) => any;
-        [key: string]: any;
-    }[];
-    [key: string]: any;
-};
-type BuilderConfig = Config<any, BuilderRootConfig>;
-
-type SoftSubComponent = {
-    type: string;
-    map: BuilderComponentConfig['_map'];
-    components: {
-        [slot: string]: SoftSubComponent;
-    };
-    fixedProps?: DefaultComponentProps;
-    enabledSlots: {
-        slot: string;
-        name?: string;
-    }[];
-}[];
-type SoftComponent = {
-    name: string;
-    category?: string;
-    fields: Fields;
-    fieldSettings?: Record<string, any>;
-    defaultProps: DefaultComponentProps;
-    components: SoftSubComponent;
-    slots: {
-        [slot: string]: DefaultComponentProps;
-    };
-};
-type VersionedSoftComponent = {
-    defaultVersion: string;
-    name: string;
-    category?: string;
-    versions: {
-        [version: string]: {
-            fields: Fields;
-            fieldSettings?: Record<string, any>;
-            defaultProps: DefaultComponentProps;
-            components: SoftSubComponent;
-            slots: {
-                [slot: string]: DefaultComponentProps;
-            };
-        };
-    };
-    /**
-     * Dependencies map: version -> Set of component names this component depends on
-     * Automatically inferred from component structure but can be overridden
-     */
-    dependencies?: {
-        [version: string]: Set<string>;
-    };
-};
-type SoftComponents = Record<string, VersionedSoftComponent>;
-
 type ActionEventPayload = {
     type: "build";
     payload: {
@@ -170,11 +176,14 @@ type ActionEventPayload = {
     type: "remodel";
     payload: {
         id: string;
+        version?: string;
+        softComponent?: VersionedSoftComponent["versions"][string];
     };
 } | {
     type: "complete";
     payload: {
         id: string;
+        version: string;
         componentData: Record<string, any>;
         softComponent: VersionedSoftComponent["versions"][string];
     };
@@ -192,10 +201,19 @@ type ActionEventPayload = {
         id: string;
         version: string;
     };
+} | {
+    type: "deleteVersion";
+    payload: {
+        id: string;
+        version: string;
+        migrateToVersion?: string;
+    };
 } | {
     type: "inspect";
     payload: {
         id: string;
+        version?: string;
+        softComponent?: VersionedSoftComponent["versions"][string];
     };
 } | {
     type: "decompose";
@@ -367,15 +385,31 @@ declare const useBuild: (name?: string) => {
 };
 
 declare const useRemodel: () => {
-    handleRemodel: (componentName?: string) => void;
+    handleRemodel: (componentName?: string) => {
+        id: string;
+        version: string;
+        softComponent: {
+            fields: _measured_puck.Fields;
+            fieldSettings?: Record<string, any>;
+            defaultProps: DefaultComponentProps;
+            components: SoftSubComponent;
+            slots: {
+                [slot: string]: DefaultComponentProps;
+            };
+        };
+    } | {
+        id: string;
+        version: string;
+        softComponent?: undefined;
+    } | null;
     canRemodel: (componentName?: string) => boolean;
 };
 
 declare const useComplete: () => {
-    handleComplete: () => string | null;
+    handleComplete: () => CompletedComponentResult | null;
     canComplete: boolean;
-    newComponent: string | null;
-    setNewComponent: React$1.Dispatch<React$1.SetStateAction<string | null>>;
+    newComponent: CompletedComponentResult | null;
+    setNewComponent: React$1.Dispatch<React$1.SetStateAction<CompletedComponentResult | null>>;
 };
 
 declare const useCancel: () => {
@@ -383,7 +417,7 @@ declare const useCancel: () => {
     canCancel: boolean;
 };
 
-declare const useInspect: (componentName: string | null) => void;
+declare const useInspect: (component: CompletedComponentResult | null) => void;
 
 declare const useDecompose: () => {
     handleDecompose: (componentData?: ComponentData) => void;

package/dist/puck/index.js

@@ -424,7 +424,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 = {
@@ -1609,7 +1609,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.");
     }
@@ -1694,8 +1694,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") {
@@ -2625,28 +2638,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) => {
@@ -2666,31 +2693,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] = (0, import_react7.useState)(null);
   const { triggerAction } = useActionEvent();
   const handleComplete = (0, import_react7.useCallback)(() => {
-    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(
@@ -2698,7 +2723,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 };
 };
@@ -2737,23 +2762,25 @@ var useCancel = () => {
 var import_puck9 = require("@measured/puck");
 var import_react8 = require("react");
 var useCustomPuck6 = (0, import_puck9.createUsePuck)();
-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();
   (0, import_react8.useEffect)(() => {
     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) {
@@ -2762,7 +2789,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
@@ -2978,9 +3005,9 @@ var Header = ({
       {
         variant: "primary",
         onClick: () => {
-          const name = handleComplete();
-          if (name) {
-            setNewComponent(name);
+          const completedComponent = handleComplete();
+          if (completedComponent) {
+            setNewComponent(completedComponent);
           }
         },
         children: "Complete"
@@ -3095,14 +3122,14 @@ var confirm = (message) => __async(null, null, function* () {
 });
 
 // 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" };
+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
 var import_react10 = require("react");
 var import_react_dom = require("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
 var import_jsx_runtime10 = require("react/jsx-runtime");
@@ -3116,18 +3143,43 @@ var Modal = ({
   (0, import_react10.useEffect)(() => {
     setRootEl(document.getElementById("puck-portal-root"));
   }, []);
+  (0, import_react10.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime10.jsx)("div", {});
   }
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: getClassName4({ isOpen }), onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "div",
       {
-        className: getClassName4("inner"),
-        onClick: (e) => e.stopPropagation(),
-        children
+        className: getClassName4({ isOpen }),
+        onClick: (event) => {
+          if (event.target === event.currentTarget) {
+            onClose();
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
+          {
+            className: getClassName4("inner"),
+            role: "dialog",
+            "aria-modal": "true",
+            onClick: (e) => e.stopPropagation(),
+            children
+          }
+        )
       }
-    ) }),
+    ),
     rootEl
   );
 };
@@ -3150,13 +3202,14 @@ var DrawerItem = (props) => {
   );
   const { handleDemolish } = useDemolish();
   const { handleSetDefaultVersion, getVersions, getDefaultVersion } = useSetDefaultVersion();
+  const { triggerAction } = useActionEvent();
   const [isEditing, setIsEditing] = (0, import_react11.useState)(false);
   const [isHovering, setIsHovering] = (0, import_react11.useState)(false);
   const [selectedVersion, setSelectedVersion] = (0, import_react11.useState)("");
   const [versionsToDelete, setVersionsToDelete] = (0, import_react11.useState)(
     /* @__PURE__ */ new Set()
   );
-  const [migrateVersionMap, setMigrateVersionMap] = (0, import_react11.useState)({});
+  const [migrationTarget, setMigrationTarget] = (0, import_react11.useState)("decompose");
   const useVersioning = useSoftConfig((s) => s.showVersionFields);
   const versions = getVersions(props.name);
   const defaultVersion = getDefaultVersion(props.name);
@@ -3177,19 +3230,27 @@ var DrawerItem = (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);
@@ -3211,6 +3272,13 @@ var DrawerItem = (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__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         "div",
@@ -3281,30 +3349,35 @@ var DrawerItem = (props) => {
               ] }, version);
             }) })
           ] }),
-          versionsToDelete.size > 0 && availableVersions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName5("section"), children: [
+          versionsToDelete.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName5("section"), children: [
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: getClassName5("sectionTitle"), children: "Migration Settings" }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName5("migrationOptions"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-              "select",
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName5("migrationOptions"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "div",
               {
-                title: "Select migration version",
-                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__ */ (0, import_jsx_runtime11.jsx)("option", { value: "decompose", children: "Decompose to basic elements" }),
-                  availableVersions.map((v) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("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__ */ (0, import_jsx_runtime11.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      role: "radio",
+                      "aria-checked": isSelected,
+                      className: `${getClassName5("migrationOption")} ${isSelected ? getClassName5("migrationOption--isSelected") : ""}`,
+                      onClick: () => setMigrationTarget(target.value),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: getClassName5("migrationOptionLabel"), children: target.label }),
+                        isSelected && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react2.Check, { size: 14 })
+                      ]
+                    },
+                    target.value
+                  );
+                })
               }
-            ) })
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: getClassName5("helpText"), children: "Choose where to move existing instances of the deleted versions." })
           ] })
         ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName5("section"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { children: [
           "Manage high-level settings for the ",
@@ -3414,11 +3487,6 @@ var Drawer = (_props) => {
       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;