@netlisian/softconfig 0.0.5 → 0.0.6

package/dist/puck/index.mjs

@@ -405,7 +405,6 @@ var builderRootConfig = (config, overrides, editingComponent) => ({
                 const inputValues = fromPaths.map(
                   (f) => getFieldSettingsByPath(props._fieldSettings || {}, f)
                 );
-                console.log(inputValues);
                 let value = transform ? transform(
                   inputValues.map((v) => v == null ? void 0 : v.defaultValue),
                   child.props
@@ -486,7 +485,7 @@ function generateFieldOptions(fields, selectedFields, prefix = "") {
       if (selectedFields.includes(path)) {
         return;
       }
-      opts.push({ label: path, value: path });
+      opts.push({ label: path, value: path, type: fld.type });
       if (fld.type === "object" && fld.objectFields) {
         recurse(fld.objectFields, path);
       }
@@ -506,7 +505,7 @@ function generateDynamicFieldOptions(_fields, _fieldSettings, prefix = "") {
       var _a;
       const settings = fieldSettings[field.name];
       const path = currentPrefix ? `${currentPrefix}.${field.name}` : field.name;
-      opts.push({ label: path, value: path });
+      opts.push({ label: path, value: path, type: field.type });
       if ((_a = settings == null ? void 0 : settings.subFields) == null ? void 0 : _a.length) {
         recurse(settings.subFields, settings.subFieldSettings || {}, path);
       }
@@ -655,20 +654,24 @@ var builderConfig = (config, overrides, editingComponent) => ({
               const defaultFields = component.resolveFields ? yield component.resolveFields(data, params) : component.fields || {};
               if (!fields._map) {
                 const rootProps = getRootProps(params.appState);
+                const fromOptions = generateDynamicFieldOptions(
+                  (rootProps == null ? void 0 : rootProps._fields) || [],
+                  (rootProps == null ? void 0 : rootProps._fieldSettings) || {}
+                );
+                const toOptions = generateFieldOptions(defaultFields, []);
                 fields._map = overrides.map ? {
                   type: "custom",
                   render: ({ value, onChange, id }) => {
+                    const toOptions2 = generateFieldOptions(defaultFields, []);
+                    const rootProps2 = getRootProps(params.appState);
                     return overrides.map({
-                      rootProps,
+                      rootProps: rootProps2,
                       value,
                       onChange,
                       id,
                       props: data.props || {},
-                      fromOptions: generateDynamicFieldOptions(
-                        (rootProps == null ? void 0 : rootProps._fields) || [],
-                        (rootProps == null ? void 0 : rootProps._fieldSettings) || {}
-                      ),
-                      toOptions: generateFieldOptions(defaultFields, [])
+                      fromOptions,
+                      toOptions: toOptions2
                     });
                   }
                 } : {
@@ -680,10 +683,10 @@ var builderConfig = (config, overrides, editingComponent) => ({
                       label: "From",
                       options: [
                         { label: "Select a field", value: "" },
-                        ...generateDynamicFieldOptions(
-                          (rootProps == null ? void 0 : rootProps._fields) || [],
-                          (rootProps == null ? void 0 : rootProps._fieldSettings) || {}
-                        )
+                        ...fromOptions.map(({ label, value }) => ({
+                          label,
+                          value
+                        }))
                       ]
                     },
                     to: {
@@ -691,7 +694,10 @@ var builderConfig = (config, overrides, editingComponent) => ({
                       label: "To",
                       options: [
                         { label: "Select a field", value: "" },
-                        ...generateFieldOptions(defaultFields, [])
+                        ...toOptions.map(({ label, value }) => ({
+                          label,
+                          value
+                        }))
                       ]
                     }
                   }
@@ -750,6 +756,25 @@ var builderConfig = (config, overrides, editingComponent) => ({
   )
 });
 
+// src/puck/lib/strip-id.ts
+var stripIdFromProps = (components, allowedTypes) => {
+  return components.map((component) => sanitizeComponent(component, allowedTypes));
+};
+var sanitizeComponent = (component, allowedTypes) => {
+  const cleanProps = {};
+  for (const [key, value] of Object.entries(component.props)) {
+    if (key === "id") continue;
+    if (value && typeof value === "object" && "type" in value && allowedTypes.includes(value.type)) {
+      cleanProps[key] = sanitizeComponent(value, allowedTypes);
+      continue;
+    }
+    cleanProps[key] = value;
+  }
+  return __spreadProps(__spreadValues({}, component), {
+    props: cleanProps
+  });
+};
+
 // src/puck/lib/soft-component-from-appstate.ts
 var getSubComponents = (content, componentConfigs, fieldSettings, slots) => {
   if (!content || !Array.isArray(content)) return [];
@@ -779,8 +804,13 @@ var getSubComponents = (content, componentConfigs, fieldSettings, slots) => {
     (componentProps.props._slot || []).forEach(
       (s) => {
         var _a2;
-        if (s.slot)
-          slots[s.name || `${componentProps.props.id}-${s.slot}`] = componentProps.props[s.slot] || ((_a2 = componentConfig == null ? void 0 : componentConfig.defaultProps) == null ? void 0 : _a2[s.slot]);
+        if (s.slot) {
+          const slotComponentProps = componentProps.props[s.slot] || ((_a2 = componentConfig == null ? void 0 : componentConfig.defaultProps) == null ? void 0 : _a2[s.slot]);
+          slots[s.name || `${componentProps.props.id}-${s.slot}`] = stripIdFromProps(
+            slotComponentProps,
+            Object.keys(componentConfigs)
+          );
+        }
       }
     );
     const subComponent = {
@@ -883,6 +913,10 @@ var softComponentFromAppState = (appState, configComponents) => {
   ];
 };
 
+// src/puck/lib/generate-id.ts
+import { v4 as uuidv4 } from "uuid";
+var generateId = (type) => type ? `${type}-${uuidv4()}` : uuidv4();
+
 // src/puck/lib/soft-component-to-appstate.ts
 var puckFieldsToSoftFields = (fields, slots) => {
   const softFields = [];
@@ -949,11 +983,27 @@ var puckFieldsToSoftFields = (fields, slots) => {
 };
 var reconstructComponents = (subComponents, componentConfigs, softComponentProps) => {
   return subComponents.map((subComponent) => {
-    const componentConfig = componentConfigs[subComponent.type];
+    var _a;
     const props = __spreadValues({}, subComponent.fixedProps);
-    subComponent.map.forEach(({ from, to }) => {
-      if (softComponentProps[from] !== void 0) {
-        props[to] = softComponentProps[from];
+    (_a = subComponent.map) == null ? void 0 : _a.forEach((mapItem, i) => {
+      var _a2;
+      const { from, to, transform } = mapItem || {};
+      const fromPaths = Array.isArray(from) ? from : from ? [from] : [];
+      const toPaths = Array.isArray(to) ? to : to ? [to] : [];
+      const inputs = fromPaths.map(
+        (path) => getFieldSettingsByPath(softComponentProps || {}, path)
+      );
+      const runner = transform;
+      const result = runner ? runner(inputs, softComponentProps) : inputs[0];
+      if (Array.isArray(result)) {
+        result.forEach((val, idx) => {
+          if (toPaths[idx]) setPropertyByPath(props, toPaths[idx], val);
+        });
+      } else {
+        toPaths.forEach((toPath) => setPropertyByPath(props, toPath, result));
+      }
+      if (transform && ((_a2 = props._map) == null ? void 0 : _a2[i])) {
+        props._map[i].transform = transform;
       }
     });
     if (subComponent.enabledSlots.length > 0) {
@@ -979,7 +1029,7 @@ var reconstructComponents = (subComponents, componentConfigs, softComponentProps
     const componentData = {
       type: subComponent.type,
       props: __spreadValues({
-        id: props.id || ""
+        id: props.id || generateId(subComponent.type)
       }, props)
     };
     return componentData;
@@ -1025,7 +1075,7 @@ var rootDroppableId = `${rootAreaId}:${rootZone}`;
 
 // src/puck/components/soft-render/index.tsx
 import { useMemo, useRef } from "react";
-import { v4 as uuidv4 } from "uuid";
+import { v4 as uuidv42 } from "uuid";
 import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
 function SoftRender({
   softComponentFields,
@@ -1063,14 +1113,17 @@ function SoftRender({
     if (!componentConfig) return null;
     const resolvedProps = subComponent.fixedProps || {};
     const stableId = useMemo(
-      () => depth === 0 ? id : `${subComponent.type}-${id}-d${depth}-${uuidv4()}`,
+      () => depth === 0 ? id : `${subComponent.type}-${id}-d${depth}-${uuidv42()}`,
       [id, depth, subComponent.type]
     );
     if ((_a2 = subComponent.map) == null ? void 0 : _a2.length) {
-      subComponent.map.forEach(({ from, to, transform }) => {
+      subComponent.map.forEach((mapItem) => {
+        const { from, to, transform } = mapItem || {};
         const fromPaths = Array.isArray(from) ? from : from ? [from] : [];
         const toPaths = Array.isArray(to) ? to : to ? [to] : [];
         const inputValues = fromPaths.map((f) => {
+          const propValue = getFieldSettingsByPath(props || {}, f);
+          if (propValue !== void 0) return propValue;
           const setting = getFieldSettingsByPath(
             softComponentFieldSettings || {},
             f
@@ -1078,12 +1131,13 @@ function SoftRender({
           if (setting && Object.prototype.hasOwnProperty.call(setting, "defaultValue")) {
             return setting.defaultValue;
           }
-          return getFieldSettingsByPath(props || {}, f);
+          return propValue;
         });
         const cacheKey = JSON.stringify(inputValues);
         let result = mapCacheRef.current.get(cacheKey);
         if (!result) {
-          result = transform ? transform(inputValues, props) : inputValues[0];
+          const runner = transform;
+          result = runner ? runner(inputValues, props) : inputValues[0];
           mapCacheRef.current.set(cacheKey, result);
         }
         if (Array.isArray(result)) {
@@ -1193,23 +1247,30 @@ var createVersionedComponentConfig = (componentName, version, allVersions, confi
   };
 };
 
-// src/puck/lib/generate-id.ts
-import { v4 as uuidv42 } from "uuid";
-var generateId = (type) => type ? `${type}-${uuidv42()}` : uuidv42();
-
 // src/puck/lib/builder/sub-component-decomposer.tsx
 var subComponentDecomposer = (componentRootData, softSubComponent) => {
+  var _a;
   const resolvedProps = __spreadValues({}, softSubComponent.fixedProps);
-  softSubComponent.map.forEach((mapItem) => {
-    var _a;
-    const value = (_a = componentRootData.props) == null ? void 0 : _a[mapItem.from || ""];
-    if (value !== void 0) {
-      resolvedProps[mapItem.to] = value;
+  (_a = softSubComponent.map) == null ? void 0 : _a.forEach((mapItem) => {
+    const { from, to, transform } = mapItem || {};
+    const fromPaths = Array.isArray(from) ? from : from ? [from] : [];
+    const toPaths = Array.isArray(to) ? to : to ? [to] : [];
+    const inputs = fromPaths.map(
+      (path) => getFieldSettingsByPath(componentRootData.props || {}, path)
+    );
+    const runner = transform;
+    const result = runner ? runner(inputs, componentRootData.props) : inputs[0];
+    if (Array.isArray(result)) {
+      result.forEach((val, idx) => {
+        if (toPaths[idx]) setPropertyByPath(resolvedProps, toPaths[idx], val);
+      });
+    } else if (toPaths[0]) {
+      setPropertyByPath(resolvedProps, toPaths[0], result);
     }
   });
   softSubComponent.enabledSlots.forEach(({ slot, name }) => {
-    var _a, _b;
-    const referenceName = name || `${(_a = softSubComponent.fixedProps) == null ? void 0 : _a.id}-${slot}`;
+    var _a2, _b;
+    const referenceName = name || `${(_a2 = softSubComponent.fixedProps) == null ? void 0 : _a2.id}-${slot}`;
     resolvedProps[slot] = ((_b = componentRootData.props) == null ? void 0 : _b[referenceName]) || [];
   });
   Object.entries(softSubComponent.components).forEach(
@@ -1569,6 +1630,52 @@ var createBuildersSlice = (set, get, initialConfig) => ({
 });
 
 // src/puck/lib/build-initial-soft-components.ts
+function hydrateSubComponentsTransforms(subComponents, hydrator, context) {
+  return subComponents.map((subComponent, idx) => {
+    var _a;
+    const path = [...context.subComponentPath, `${subComponent.type}:${idx}`];
+    const mapped = (_a = subComponent.map) == null ? void 0 : _a.map((mapItem) => {
+      if (mapItem == null ? void 0 : mapItem.transform) return mapItem;
+      const transform = hydrator(mapItem, __spreadProps(__spreadValues({}, context), {
+        subComponentPath: path
+      }));
+      return transform ? __spreadProps(__spreadValues({}, mapItem), { transform }) : mapItem;
+    });
+    const nestedComponents = Object.fromEntries(
+      Object.entries(subComponent.components || {}).map(([slotKey, children]) => [
+        slotKey,
+        hydrateSubComponentsTransforms(children, hydrator, __spreadProps(__spreadValues({}, context), {
+          subComponentPath: [...path, slotKey]
+        }))
+      ])
+    );
+    return __spreadProps(__spreadValues({}, subComponent), {
+      map: mapped,
+      components: nestedComponents
+    });
+  });
+}
+function hydrateSoftComponentsTransforms(softComponents, hydrator) {
+  const hydrated = {};
+  Object.entries(softComponents || {}).forEach(([name, comp]) => {
+    const versions = {};
+    Object.entries(comp.versions || {}).forEach(([version, softComponent]) => {
+      versions[version] = __spreadProps(__spreadValues({}, softComponent), {
+        components: hydrateSubComponentsTransforms(softComponent.components, hydrator, {
+          componentName: name,
+          version,
+          subComponentPath: [],
+          softComponent
+        })
+      });
+    });
+    hydrated[name] = {
+      defaultVersion: comp.defaultVersion,
+      versions
+    };
+  });
+  return hydrated;
+}
 function extractDependencies(softComponents, componentName, version) {
   var _a, _b;
   const dependencies = /* @__PURE__ */ new Set();
@@ -1635,15 +1742,16 @@ function topologicalSort(softComponents, hardComponentNames) {
   }
   return sorted;
 }
-function buildInitialSoftComponents(hardConfig, softComponents) {
+function buildInitialSoftComponents(hardConfig, softComponents, overrides) {
   var _a, _b;
   if (!softComponents || Object.keys(softComponents).length === 0) {
     return {};
   }
+  const hydratedSoftComponents = (overrides == null ? void 0 : overrides.hydrateMapTransform) ? hydrateSoftComponentsTransforms(softComponents, overrides.hydrateMapTransform) : softComponents;
   const hardComponentNames = new Set(Object.keys(hardConfig.components || {}));
   try {
     const sortedComponentNames = topologicalSort(
-      softComponents,
+      hydratedSoftComponents,
       hardComponentNames
     );
     const buildingConfig = __spreadProps(__spreadValues({}, hardConfig), {
@@ -1651,7 +1759,7 @@ function buildInitialSoftComponents(hardConfig, softComponents) {
     });
     const componentConfigs = {};
     for (const name of sortedComponentNames) {
-      const comp = softComponents[name];
+      const comp = hydratedSoftComponents[name];
       const defaultVersion = comp.defaultVersion || Object.keys(comp.versions || {}).pop();
       const versionedComponent = (_a = comp.versions) == null ? void 0 : _a[defaultVersion || ""];
       const allVersions = Object.keys(comp.versions || {});
@@ -1667,7 +1775,7 @@ function buildInitialSoftComponents(hardConfig, softComponents) {
         allVersions,
         buildingConfig,
         // Pass the accumulating config
-        softComponents,
+        hydratedSoftComponents,
         versionedComponent.defaultProps
       );
       componentConfigs[name] = newSoftComponentConfig;
@@ -1678,7 +1786,7 @@ function buildInitialSoftComponents(hardConfig, softComponents) {
     console.error("Error building soft components:", error);
     console.warn("Falling back to unordered component building");
     const componentConfigs = {};
-    for (const [name, comp] of Object.entries(softComponents)) {
+    for (const [name, comp] of Object.entries(hydratedSoftComponents)) {
       const defaultVersion = comp.defaultVersion || Object.keys(comp.versions || {}).pop();
       const versionedComponent = (_b = comp.versions) == null ? void 0 : _b[defaultVersion || ""];
       const allVersions = Object.keys(comp.versions || {});
@@ -1693,7 +1801,7 @@ function buildInitialSoftComponents(hardConfig, softComponents) {
         defaultVersion || "1.0.0",
         allVersions,
         hardConfig,
-        softComponents,
+        hydratedSoftComponents,
         versionedComponent.defaultProps
       );
       componentConfigs[name] = newSoftComponentConfig;
@@ -1705,158 +1813,169 @@ function buildInitialSoftComponents(hardConfig, softComponents) {
 // src/puck/store/index.tsx
 var createSoftConfigStore = (hardConfig = {
   components: {}
-}, softComponents = {}, overrides = {}) => create()(
-  subscribeWithSelector(
-    devtools((set, get) => ({
-      state: "ready",
-      originalHistory: [],
-      overrides,
-      storeHistory: (history) => set({ originalHistory: history }),
-      removeHistory: () => set({ originalHistory: [] }),
-      itemSelector: null,
-      setItemSelector: (selector) => set({ itemSelector: selector }),
-      originalItem: null,
-      setOriginalItem: (item) => set({ originalItem: item }),
-      softComponents: __spreadValues({}, softComponents),
-      softConfig: __spreadProps(__spreadValues({}, hardConfig), {
-        components: __spreadValues(__spreadValues({}, hardConfig.components), buildInitialSoftComponents(hardConfig, softComponents))
-      }),
-      setSoftComponent: (name, version, component) => {
-        set((state) => {
-          var _a;
-          return {
-            softComponents: __spreadProps(__spreadValues({}, state.softComponents), {
-              [name]: {
-                defaultVersion: version,
-                versions: __spreadProps(__spreadValues({}, ((_a = state.softComponents[name]) == null ? void 0 : _a.versions) || {}), {
-                  [version]: component
-                })
-              }
-            })
-          };
-        });
-      },
-      setSoftComponentDefaultVersion: (name, version) => {
-        var _a, _b, _c;
-        const softComponent = (_b = (_a = get().softComponents[name]) == null ? void 0 : _a.versions) == null ? void 0 : _b[version];
-        const allVersions = Object.keys(
-          ((_c = get().softComponents[name]) == null ? void 0 : _c.versions) || {}
-        );
-        if (!softComponent) {
-          throw new Error(
-            `Soft component "${name}" version "${version}" does not exist.`
-          );
-        }
-        const newSoftComponentConfig = createVersionedComponentConfig(
-          name,
-          version,
-          allVersions,
-          get().softConfig,
-          get().softComponents,
-          softComponent.defaultProps
-        );
-        set((state) => ({
-          softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
-            components: __spreadProps(__spreadValues({}, state.softConfig.components), {
-              [name]: newSoftComponentConfig
-            })
-          }),
-          softComponents: __spreadProps(__spreadValues({}, state.softComponents), {
-            [name]: __spreadProps(__spreadValues({}, state.softComponents[name]), {
-              defaultVersion: version
-            })
-          })
-        }));
-      },
-      removeSoftComponentVersion: (key, version) => {
-        set((state) => {
-          const component = state.softComponents[key];
-          if (!component) return {};
-          const newVersions = Object.fromEntries(
-            Object.entries(component.versions || {}).filter(
-              ([k, _]) => k !== version
-            )
+}, softComponents = {}, overrides = {}) => {
+  const hydratedSoftComponents = (overrides == null ? void 0 : overrides.hydrateMapTransform) ? hydrateSoftComponentsTransforms(
+    softComponents,
+    overrides.hydrateMapTransform
+  ) : softComponents;
+  return create()(
+    subscribeWithSelector(
+      devtools((set, get) => ({
+        state: "ready",
+        originalHistory: [],
+        overrides,
+        storeHistory: (history) => set({ originalHistory: history }),
+        removeHistory: () => set({ originalHistory: [] }),
+        itemSelector: null,
+        setItemSelector: (selector) => set({ itemSelector: selector }),
+        originalItem: null,
+        setOriginalItem: (item) => set({ originalItem: item }),
+        hydratedSoftComponents,
+        softComponents: hydratedSoftComponents,
+        softConfig: __spreadProps(__spreadValues({}, hardConfig), {
+          components: __spreadValues(__spreadValues({}, hardConfig.components), buildInitialSoftComponents(
+            hardConfig,
+            hydratedSoftComponents,
+            overrides
+          ))
+        }),
+        setSoftComponent: (name, version, component) => {
+          set((state) => {
+            var _a;
+            return {
+              softComponents: __spreadProps(__spreadValues({}, state.softComponents), {
+                [name]: {
+                  defaultVersion: version,
+                  versions: __spreadProps(__spreadValues({}, ((_a = state.softComponents[name]) == null ? void 0 : _a.versions) || {}), {
+                    [version]: component
+                  })
+                }
+              })
+            };
+          });
+        },
+        setSoftComponentDefaultVersion: (name, version) => {
+          var _a, _b, _c;
+          const softComponent = (_b = (_a = get().softComponents[name]) == null ? void 0 : _a.versions) == null ? void 0 : _b[version];
+          const allVersions = Object.keys(
+            ((_c = get().softComponents[name]) == null ? void 0 : _c.versions) || {}
           );
-          let newDefaultVersion = component.defaultVersion;
-          if (component.defaultVersion === version) {
-            const versionKeys = Object.keys(newVersions);
-            newDefaultVersion = versionKeys.length > 0 ? versionKeys[versionKeys.length - 1] : "";
+          if (!softComponent) {
+            throw new Error(
+              `Soft component "${name}" version "${version}" does not exist.`
+            );
           }
-          return {
-            softComponents: __spreadProps(__spreadValues({}, state.softComponents), {
-              [key]: __spreadProps(__spreadValues({}, component), {
-                versions: newVersions,
-                defaultVersion: newDefaultVersion
-              })
-            })
-          };
-        });
-      },
-      removeSoftComponent: (key) => {
-        set((state) => ({
-          softComponents: Object.fromEntries(
-            Object.entries(state.softComponents).filter(([k, _]) => k !== key)
-          )
-        }));
-      },
-      setSoftComponentConfig: (key, config, category) => {
-        set((state) => {
-          var _a;
-          return {
+          const newSoftComponentConfig = createVersionedComponentConfig(
+            name,
+            version,
+            allVersions,
+            get().softConfig,
+            get().softComponents,
+            softComponent.defaultProps
+          );
+          set((state) => ({
             softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
               components: __spreadProps(__spreadValues({}, state.softConfig.components), {
-                [key]: __spreadValues({}, config)
-              }),
-              categories: category && state.softConfig.categories ? __spreadProps(__spreadValues({}, state.softConfig.categories), {
-                [category]: __spreadProps(__spreadValues({}, state.softConfig.categories[category]), {
-                  components: [
-                    ...((_a = state.softConfig.categories[category]) == null ? void 0 : _a.components) || [],
-                    key
-                  ]
-                })
-              }) : state.softConfig.categories
+                [name]: newSoftComponentConfig
+              })
+            }),
+            softComponents: __spreadProps(__spreadValues({}, state.softComponents), {
+              [name]: __spreadProps(__spreadValues({}, state.softComponents[name]), {
+                defaultVersion: version
+              })
             })
-          };
-        });
-      },
-      removeSoftComponentConfig: (key) => {
-        set((state) => ({
-          softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
-            components: Object.fromEntries(
-              Object.entries(state.softConfig.components).filter(
-                ([k, _]) => k !== key
+          }));
+        },
+        removeSoftComponentVersion: (key, version) => {
+          set((state) => {
+            const component = state.softComponents[key];
+            if (!component) return {};
+            const newVersions = Object.fromEntries(
+              Object.entries(component.versions || {}).filter(
+                ([k, _]) => k !== version
               )
+            );
+            let newDefaultVersion = component.defaultVersion;
+            if (component.defaultVersion === version) {
+              const versionKeys = Object.keys(newVersions);
+              newDefaultVersion = versionKeys.length > 0 ? versionKeys[versionKeys.length - 1] : "";
+            }
+            return {
+              softComponents: __spreadProps(__spreadValues({}, state.softComponents), {
+                [key]: __spreadProps(__spreadValues({}, component), {
+                  versions: newVersions,
+                  defaultVersion: newDefaultVersion
+                })
+              })
+            };
+          });
+        },
+        removeSoftComponent: (key) => {
+          set((state) => ({
+            softComponents: Object.fromEntries(
+              Object.entries(state.softComponents).filter(([k, _]) => k !== key)
             )
-          })
-        }));
-      },
-      setSoftCategoryConfig: (key, category) => {
-        set((state) => {
-          var _a;
-          return {
-            softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
-              categories: __spreadProps(__spreadValues({}, state.softConfig.categories), {
-                [key]: __spreadValues(__spreadValues({}, (_a = state.softConfig.categories) == null ? void 0 : _a[key]), category)
+          }));
+        },
+        setSoftComponentConfig: (key, config, category) => {
+          set((state) => {
+            var _a;
+            return {
+              softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
+                components: __spreadProps(__spreadValues({}, state.softConfig.components), {
+                  [key]: __spreadValues({}, config)
+                }),
+                categories: category && state.softConfig.categories ? __spreadProps(__spreadValues({}, state.softConfig.categories), {
+                  [category]: __spreadProps(__spreadValues({}, state.softConfig.categories[category]), {
+                    components: [
+                      ...((_a = state.softConfig.categories[category]) == null ? void 0 : _a.components) || [],
+                      key
+                    ]
+                  })
+                }) : state.softConfig.categories
               })
+            };
+          });
+        },
+        removeSoftComponentConfig: (key) => {
+          set((state) => ({
+            softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
+              components: Object.fromEntries(
+                Object.entries(state.softConfig.components).filter(
+                  ([k, _]) => k !== key
+                )
+              )
             })
-          };
-        });
-      },
-      removeSoftCategoryConfig: (key) => {
-        set((state) => ({
-          softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
-            categories: Object.fromEntries(
-              Object.entries(state.softConfig.categories || {}).filter(
-                ([k, _]) => k !== key
+          }));
+        },
+        setSoftCategoryConfig: (key, category) => {
+          set((state) => {
+            var _a;
+            return {
+              softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
+                categories: __spreadProps(__spreadValues({}, state.softConfig.categories), {
+                  [key]: __spreadValues(__spreadValues({}, (_a = state.softConfig.categories) == null ? void 0 : _a[key]), category)
+                })
+              })
+            };
+          });
+        },
+        removeSoftCategoryConfig: (key) => {
+          set((state) => ({
+            softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
+              categories: Object.fromEntries(
+                Object.entries(state.softConfig.categories || {}).filter(
+                  ([k, _]) => k !== key
+                )
               )
-            )
-          })
-        }));
-      },
-      builder: createBuildersSlice(set, get, hardConfig)
-    }))
-  )
-);
+            })
+          }));
+        },
+        builder: createBuildersSlice(set, get, hardConfig)
+      }))
+    )
+  );
+};
 
 // src/puck/context/storeProvider.tsx
 import { useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";