@netlisian/softconfig 0.1.2 → 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 = {
@@ -1557,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.");
     }
@@ -1642,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") {
@@ -2573,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) => {
@@ -2614,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(
@@ -2646,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 };
 };
@@ -2685,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) {
@@ -2710,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
@@ -2926,9 +2953,9 @@ var Header = ({
       {
         variant: "primary",
         onClick: () => {
-          const name = handleComplete();
-          if (name) {
-            setNewComponent(name);
+          const completedComponent = handleComplete();
+          if (completedComponent) {
+            setNewComponent(completedComponent);
           }
         },
         children: "Complete"
@@ -3043,14 +3070,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
 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";
@@ -3064,18 +3091,43 @@ 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
   );
 };
@@ -3098,13 +3150,14 @@ var DrawerItem = (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);
@@ -3125,19 +3178,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);
@@ -3159,6 +3220,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__ */ jsxs4(Fragment5, { children: [
       /* @__PURE__ */ jsxs4(
         "div",
@@ -3229,30 +3297,35 @@ var DrawerItem = (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",
               {
-                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__ */ 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 ",
@@ -3362,11 +3435,6 @@ var Drawer = (_props) => {
       key
     )) });
   }
-  console.log(
-    getClassName6(),
-    getCategoryClassName(),
-    getCategoryClassName({ isExpanded: true })
-  );
   return /* @__PURE__ */ jsxs5("div", { className: getClassName6(), children: [
     categoryEntries.map(([id, cat]) => {
       var _a2, _b2, _c;

package/package.json

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