@netlisian/softconfig 0.1.7 → 0.1.9

package/dist/puck/index.mjs

@@ -611,6 +611,15 @@ var createUseSoftConfig = () => {
   };
 };
 var useSoftConfig = createUseSoftConfig();
+var useSoftConfigStore = () => {
+  const context = useContext(appStoreContext);
+  if (!context) {
+    throw new Error(
+      "useSoftConfigStore must be used inside a SoftConfigProvider."
+    );
+  }
+  return context;
+};
 
 // src/puck/lib/apply-mapping.ts
 import equal from "react-fast-compare";
@@ -2230,25 +2239,6 @@ var createBuildersSlice = (set, get, initialConfig) => ({
     if (!selectedItem || !itemSelector) {
       throw new Error("No item selected to build from.");
     }
-    puckDispatch({
-      type: "set",
-      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;
     const buildConfig = builderConfig(
@@ -2294,10 +2284,21 @@ var createBuildersSlice = (set, get, initialConfig) => ({
     }));
     requestAnimationFrame(
       () => puckDispatch({
-        type: "replaceRoot",
-        root: {
-          title: "Soft Component Builder",
-          _name: name || "New Soft Component"
+        type: "set",
+        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"
+                })
+              })
+            })
+          };
         }
       })
     );
@@ -2322,12 +2323,6 @@ var createBuildersSlice = (set, get, initialConfig) => ({
         `Soft component "${softComponentName}" with version "${softComponentVersion}" not found.`
       );
     }
-    puckDispatch({
-      type: "setUi",
-      ui: (previous) => __spreadProps(__spreadValues({}, previous), {
-        itemSelector: void 0
-      })
-    });
     const { root, content } = softComponentToAppState(
       softComponent,
       softComponentName,
@@ -2363,36 +2358,45 @@ var createBuildersSlice = (set, get, initialConfig) => ({
         return components;
       }
     );
-    puckDispatch({
-      type: "setData",
-      data: (prevData) => ({
-        root: __spreadProps(__spreadValues({}, root), { _versions: versions }),
-        content: walkTree3(__spreadValues({}, prevData), __spreadValues({}, config), (components) => {
-          const next = components.map((component) => __spreadProps(__spreadValues({}, component), {
-            props: __spreadValues({}, component.props)
-          }));
-          const index = next.findIndex(
-            (component) => component.props.id === selectedItem.props.id
-          );
-          if (index !== -1) {
-            next.splice(
-              index,
-              1,
-              ...decomposedComponents.map((component) => __spreadProps(__spreadValues({}, component), {
-                props: __spreadValues({}, component.props)
-              }))
-            );
-          }
-          return next;
-        }).content
-      })
-    });
-    requestAnimationFrame(
-      () => setEditVisibility(get().iframeDoc, {
+    requestAnimationFrame(() => {
+      puckDispatch({
+        type: "set",
+        state: (previous) => ({
+          data: {
+            root: __spreadProps(__spreadValues({}, root), { _versions: versions }),
+            content: walkTree3(
+              __spreadValues({}, previous.data),
+              __spreadValues({}, config),
+              (components) => {
+                const next = components.map((component) => __spreadProps(__spreadValues({}, component), {
+                  props: __spreadValues({}, component.props)
+                }));
+                const index = next.findIndex(
+                  (component) => component.props.id === selectedItem.props.id
+                );
+                if (index !== -1) {
+                  next.splice(
+                    index,
+                    1,
+                    ...decomposedComponents.map((component) => __spreadProps(__spreadValues({}, component), {
+                      props: __spreadValues({}, component.props)
+                    }))
+                  );
+                }
+                return next;
+              }
+            ).content
+          },
+          ui: __spreadProps(__spreadValues({}, previous.ui), {
+            itemSelector: null
+          })
+        })
+      });
+      setEditVisibility(get().iframeDoc, {
         mode: "remodel",
         editableIds
-      })
-    );
+      });
+    });
     set((s) => __spreadProps(__spreadValues({}, s), {
       storedConfig: config,
       softConfig: buildConfig,
@@ -2499,6 +2503,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
         }),
         storedConfig: void 0,
         state: "inspecting",
+        // Temporarily shift state to inspect() before finalizing back to ready
         originalHistory: []
       });
     });
@@ -2547,34 +2552,41 @@ var createBuildersSlice = (set, get, initialConfig) => ({
         type: "setData",
         data: (data) => {
           return reconstructedTree(data);
-        }
+        },
+        recordHistory: true
+        // Record this swap on the standard undo/redo stack
       });
+      clearEditVisibility(get().iframeDoc);
+      set((s) => __spreadProps(__spreadValues({}, s), {
+        state: "ready",
+        setItemSelector: void 0,
+        setOriginalItem: void 0,
+        editingComponent: null,
+        editingComponentId: null,
+        editableComponentIds: /* @__PURE__ */ new Set()
+      }));
     });
-    requestAnimationFrame(() => clearEditVisibility(get().iframeDoc));
-    set((s) => __spreadProps(__spreadValues({}, s), {
-      state: "ready",
-      setItemSelector: void 0,
-      setOriginalItem: void 0,
-      editingComponent: null,
-      editingComponentId: null,
-      editableComponentIds: /* @__PURE__ */ new Set()
-    }));
   },
   cancel: (setHistories) => {
     const storedHistories = get().originalHistory;
-    requestAnimationFrame(() => setHistories([...storedHistories]));
-    requestAnimationFrame(() => clearEditVisibility(get().iframeDoc));
     set((s) => __spreadProps(__spreadValues({}, s), {
-      softConfig: get().storedConfig || initialConfig,
-      storedConfig: void 0,
-      originalHistory: [],
-      itemSelector: null,
-      originalItem: null,
-      state: "ready",
-      editingComponent: null,
-      editingComponentId: null,
-      editableComponentIds: /* @__PURE__ */ new Set()
+      state: "cancelling"
     }));
+    setHistories([...storedHistories]);
+    requestAnimationFrame(() => {
+      clearEditVisibility(get().iframeDoc);
+      set((s) => __spreadProps(__spreadValues({}, s), {
+        softConfig: get().storedConfig || initialConfig,
+        storedConfig: void 0,
+        originalHistory: [],
+        itemSelector: null,
+        originalItem: null,
+        state: "ready",
+        editingComponent: null,
+        editingComponentId: null,
+        editableComponentIds: /* @__PURE__ */ new Set()
+      }));
+    });
   },
   compose: (appState, componentName, editedItem, displayName, category) => {
     if (!componentName) {
@@ -3228,47 +3240,6 @@ var createSoftConfigStore = (hardConfig = { components: {} }, softComponents = {
 
 // src/puck/context/storeProvider.tsx
 import { useEffect as useEffect2, useMemo as useMemo2, useState } from "react";
-
-// src/puck/lib/notify.ts
-var customHandler = null;
-var defaultHandler = (message, type) => {
-  if (type === "error") {
-    console.error(`[Error] ${message}`);
-  } else {
-    console.log(`[Success] ${message}`);
-  }
-};
-var setNotificationHandler = (handler) => {
-  customHandler = handler;
-};
-var notify = {
-  error: (message) => {
-    const handler = customHandler || defaultHandler;
-    handler(message, "error");
-  },
-  success: (message) => {
-    const handler = customHandler || defaultHandler;
-    handler(message, "success");
-  }
-};
-
-// src/puck/lib/action-callback.ts
-var createActionCallback = (validateAction, undo) => {
-  return (action) => {
-    if (!undo) {
-      return;
-    }
-    const isValid = validateAction(action);
-    if (!isValid) {
-      notify.error(
-        "Editing outside the soft component is not allowed when you are editing component definition."
-      );
-      requestAnimationFrame(() => undo());
-    }
-  };
-};
-
-// src/puck/context/storeProvider.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
 var SoftConfigProvider = ({
   children,
@@ -3280,8 +3251,8 @@ var SoftConfigProvider = ({
   onActions,
   useVersioning = false
 }) => {
-  const store = value != null ? value : useMemo2(
-    () => createSoftConfigStore(
+  const store = useMemo2(
+    () => value != null ? value : createSoftConfigStore(
       hardConfig,
       softComponents,
       overrides,
@@ -3289,55 +3260,54 @@ var SoftConfigProvider = ({
       useVersioning,
       customFields
     ),
-    [
-      hardConfig,
-      softComponents,
-      overrides,
-      onActions,
-      useVersioning,
-      customFields
-    ]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [value]
+    // Intentionally omitting the rest: createSoftConfigStore params are
+    // treated as initialisation-time values. If callers need to react to
+    // prop changes they should pass a new `value` store instead.
   );
   const [softConfig, setSoftConfig] = useState(
     () => store.getState().softConfig
   );
-  const [internalSoftComponents, setSoftComponents] = useState(
-    () => store.getState().softComponents
-  );
-  const [actionGuard, setActionGuard] = useState(
-    (action) => null
-  );
-  useEffect2(() => {
-    const unsubscribe = store.subscribe(() => {
-      setSoftConfig(store.getState().softConfig);
-      setSoftComponents(store.getState().softComponents);
-    });
-    return () => {
-      unsubscribe();
-    };
-  }, [store]);
   useEffect2(() => {
-    const unsubscribe = store.subscribe((state, prevState) => {
-      if (prevState && prevState.undoFn === state.undoFn) {
-        return;
+    let prev = store.getState().softConfig;
+    const unsubscribe = store.subscribe((state) => {
+      if (state.softConfig !== prev) {
+        prev = state.softConfig;
+        setSoftConfig(state.softConfig);
       }
-      setActionGuard(
-        () => createActionCallback(
-          state.validateAction,
-          state.undoFn
-        )
-      );
     });
-    return () => {
-      unsubscribe();
-    };
-  }, [store.getState().undoFn]);
-  return /* @__PURE__ */ jsx7(appStoreContext.Provider, { value: store, children: children(softConfig, internalSoftComponents, actionGuard) });
+    return unsubscribe;
+  }, [store]);
+  return /* @__PURE__ */ jsx7(appStoreContext.Provider, { value: store, children: children(softConfig) });
 };
 
 // src/puck/actions/useBuild.tsx
 import { createUsePuck as createUsePuck2 } from "@measured/puck";
 
+// src/puck/lib/notify.ts
+var customHandler = null;
+var defaultHandler = (message, type) => {
+  if (type === "error") {
+    console.error(`[Error] ${message}`);
+  } else {
+    console.log(`[Success] ${message}`);
+  }
+};
+var setNotificationHandler = (handler) => {
+  customHandler = handler;
+};
+var notify = {
+  error: (message) => {
+    const handler = customHandler || defaultHandler;
+    handler(message, "error");
+  },
+  success: (message) => {
+    const handler = customHandler || defaultHandler;
+    handler(message, "success");
+  }
+};
+
 // src/puck/hooks/useActionEvent.ts
 import { useCallback } from "react";
 var useActionEvent = () => {
@@ -3713,7 +3683,7 @@ var useSetDefaultVersion = () => {
 };
 
 // src/puck/overrides/Header.tsx
-import { Button, createUsePuck as createUsePuck10 } from "@measured/puck";
+import { Button } from "@measured/puck";
 
 // css-module:/home/osamu/Documents/netlisian-soft/packages/soft-config/src/puck/overrides/Header.module.css#css-module
 var Header_module_default = { "Header": "_Header_19oj9_1" };
@@ -3756,7 +3726,6 @@ var usePublish = () => {
 // src/puck/overrides/Header.tsx
 import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
 var getClassName2 = get_class_name_factory_default("Header", Header_module_default);
-var usePuck = createUsePuck10();
 var Header = ({
   onPublish,
   children
@@ -3806,7 +3775,7 @@ var ActionBar_module_default = { "ActionBar": "_ActionBar_pvuie_5", "ActionBar-l
 import { shallow } from "zustand/shallow";
 import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 var getClassName3 = get_class_name_factory_default("ActionBar", ActionBar_module_default);
-var usePuck2 = createUsePuck11();
+var usePuck = createUsePuck11();
 var ActionBarOverride = (props) => {
   var _a, _b;
   const { handleBuild } = useBuild(props.label ? props.label + " Soft Component" : "New Soft Component");
@@ -3815,10 +3784,10 @@ var ActionBarOverride = (props) => {
   const overrides = useSoftConfig((s) => s.overrides);
   const softComponents = useSoftConfig((s) => s.softComponents, shallow);
   const editableIds = useSoftConfig((s) => s.editableComponentIds);
-  const selectedItem = usePuck2((s) => s.selectedItem);
-  const rootProps = usePuck2((s) => s.appState.data.root.props);
+  const selectedItem = usePuck((s) => s.selectedItem);
+  const rootProps = usePuck((s) => s.appState.data.root.props);
   const status = useSoftConfig((s) => s.state);
-  const itemSelector = usePuck2((s) => s.appState.ui.itemSelector);
+  const itemSelector = usePuck((s) => s.appState.ui.itemSelector);
   const softKeys = Object.keys(softComponents);
   const key = useMemo3(() => {
     const selectedType = selectedItem == null ? void 0 : selectedItem.type;
@@ -3973,14 +3942,14 @@ var Modal = ({
 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("DrawerItem", DrawerItem_module_default);
-var usePuck3 = createUsePuck12();
+var usePuck2 = createUsePuck12();
 var DrawerItem = (props) => {
   const componentMeta = useSoftConfig((s) => s.softComponents[props.name]);
   const displayName = props.label || (componentMeta == null ? void 0 : componentMeta.name) || props.name;
   const softComponents = new Set(
     Object.keys(useSoftConfig((s) => s.softComponents, shallow2))
   );
-  const getPermissions = usePuck3((s) => s.getPermissions);
+  const getPermissions = usePuck2((s) => s.getPermissions);
   const insertAllowed = getPermissions({ type: props.name }).insert;
   const removeSoftComponentVersion = useSoftConfig(
     (s) => s.removeSoftComponentVersion
@@ -4206,7 +4175,7 @@ var Drawer_module_default = { "Drawer": "_Drawer_12zq5_1", "Drawer-category": "_
 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 usePuck3 = createUsePuck13();
 var CategorySection = ({
   id,
   title,
@@ -4240,8 +4209,8 @@ var CategorySection = ({
 ] });
 var Drawer = (_props) => {
   var _a, _b;
-  const config = usePuck4((s) => s.config);
-  const getPermissions = usePuck4((s) => s.getPermissions);
+  const config = usePuck3((s) => s.config);
+  const getPermissions = usePuck3((s) => s.getPermissions);
   const categories = (_a = config.categories) != null ? _a : {};
   const categorised = new Set(
     Object.values(categories).flatMap((cat) => {
@@ -4314,11 +4283,11 @@ var Drawer = (_props) => {
 // src/puck/overrides/HeaderActions.tsx
 import { Button as Button3, createUsePuck as createUsePuck14 } from "@measured/puck";
 import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
-var usePuck5 = createUsePuck14();
+var usePuck4 = createUsePuck14();
 var HeaderActions = ({ children }) => {
   const { handleComplete } = useComplete();
   const { handleCancel, canCancel } = useCancel();
-  const dispatch = usePuck5((s) => s.dispatch);
+  const dispatch = usePuck4((s) => s.dispatch);
   const inspect = useSoftConfig((s) => s.builder.inspect);
   return /* @__PURE__ */ jsx13(Fragment6, { children: canCancel ? /* @__PURE__ */ jsxs6(Fragment6, { children: [
     /* @__PURE__ */ jsx13(Button3, { onClick: handleCancel, children: "Cancel" }),
@@ -4344,6 +4313,22 @@ var HeaderActions = ({ children }) => {
   ] }) : children });
 };
 
+// src/puck/lib/action-callback.ts
+var createActionCallback = (validateAction, undo) => {
+  return (action) => {
+    if (!undo) {
+      return;
+    }
+    const isValid = validateAction(action);
+    if (!isValid) {
+      notify.error(
+        "Editing outside the soft component is not allowed when you are editing component definition."
+      );
+      requestAnimationFrame(() => undo());
+    }
+  };
+};
+
 // src/puck/lib/dissolve-all-soft-components.ts
 function extractDependencies2(softComponents, componentName, version) {
   var _a, _b;
@@ -4577,5 +4562,6 @@ export {
   useInspect,
   useRemodel,
   useSetDefaultVersion,
-  useSoftConfig
+  useSoftConfig,
+  useSoftConfigStore
 };

package/package.json

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