@netlisian/softconfig 0.0.11 → 0.1.1

package/dist/puck/index.mjs

@@ -53,7 +53,12 @@ var __async = (__this, __arguments, generator) => {
 
 // src/puck/store/index.tsx
 import { create } from "zustand";
-import { subscribeWithSelector, devtools } from "zustand/middleware";
+import { subscribeWithSelector } from "zustand/middleware";
+
+// src/puck/store/slices/builder.tsx
+import {
+  walkTree as walkTree3
+} from "@measured/puck";
 
 // src/puck/lib/get-root-props.ts
 var getRootProps = (appState) => appState.data.root.props;
@@ -265,19 +270,23 @@ import { createContext, useContext } from "react";
 import { useStore } from "zustand";
 var appStoreContext = createContext(null);
 var createUseSoftConfig = () => {
-  return function useSoftConfig2(selector) {
+  return function useSoftConfig2(selector, equalityFn) {
     const context = useContext(appStoreContext);
     if (!context) {
       throw new Error(
         "useSoftConfig must be used inside a SoftConfigProvider. Wrap your tree with <SoftConfigProvider value={store}>"
       );
     }
+    if (equalityFn) {
+      return useStore(context, selector, equalityFn);
+    }
     return useStore(context, selector);
   };
 };
 var useSoftConfig = createUseSoftConfig();
 
 // src/puck/lib/builder/root-config.tsx
+import { useDebounce } from "use-debounce";
 import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
 var useCustomPuck = createUsePuck();
 var breakVersion = (version) => {
@@ -298,12 +307,29 @@ var updateVersion = (version, increment) => {
   }
   return `${major}.${minor}.${patch}`;
 };
-var builderRootConfig = (config, overrides, editingComponent) => ({
+var builderRootConfig = (config, overrides, editingComponent, showVersionFields = true) => ({
   fields: {
-    _name: {
+    _name: overrides.name || {
       type: "text",
       label: "Soft Component Name"
     },
+    _category: overrides.categories || {
+      type: "select",
+      label: "Category",
+      options: [
+        ...Object.keys(config.categories || {}).map((cat) => {
+          var _a;
+          return {
+            label: ((_a = config.categories) == null ? void 0 : _a[cat].title) || cat,
+            value: cat
+          };
+        }) || [],
+        {
+          label: Object.keys(config.categories || {}).length ? "Other" : "Uncategorized",
+          value: void 0
+        }
+      ]
+    },
     _fields: {
       type: "array",
       label: "Fields",
@@ -346,7 +372,7 @@ var builderRootConfig = (config, overrides, editingComponent) => ({
           )
         };
       else delete fields._fieldSettings;
-    if (((_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) && (!(data == null ? void 0 : data._version) || changed._version || changed._fieldSettings)) {
       const latestVersion = data._versions[data._versions.length - 1] || "1.0.0";
       delete fields._version;
       fields._version = {
@@ -368,10 +394,14 @@ var builderRootConfig = (config, overrides, editingComponent) => ({
           }
         ]
       };
+    } else {
+      delete fields._version;
     }
     return fields;
   },
-  resolveData: (props) => {
+  resolveData: (props, params) => {
+    if (overrides.onRootsDataChange)
+      overrides.onRootsDataChange(props, params);
     return {
       props,
       readOnly: Boolean(editingComponent) ? {
@@ -386,80 +416,78 @@ var builderRootConfig = (config, overrides, editingComponent) => ({
     const getSelectorForId = useCustomPuck((s) => s.getSelectorForId);
     const setVersion = useSoftConfig((s) => s.builder.setVersion);
     const state = useSoftConfig((s) => s.state);
+    const [debouncedFieldSettings] = useDebounce(fieldSettings, 500);
     useEffect(() => {
-      const propagateChanges = setTimeout(() => {
-        if (!fieldSettings || Object.keys(fieldSettings).length === 0) return;
-        walkTree(
-          data,
-          {
-            components: config.components
-          },
-          (content) => content.map((child) => {
-            var _a;
-            const map = ((_a = child.props) == null ? void 0 : _a._map) || [];
-            if (map.length) {
-              map.forEach(({ from, to, transform }) => {
-                if (!from || !to) return;
-                const fromPaths = Array.isArray(from) ? from : [from];
-                const toPaths = Array.isArray(to) ? to : [to];
-                const inputValues = fromPaths.map(
-                  (f) => getFieldSettingsByPath(props._fieldSettings || {}, f)
-                );
-                let value = transform ? transform(
-                  inputValues.map((v) => v == null ? void 0 : v.defaultValue),
-                  child.props
-                ) : inputValues[0];
-                if (Array.isArray(value)) {
-                  value.forEach((val, i) => {
-                    if (toPaths[i]) {
-                      const originalValue = getFieldSettingsByPath(
-                        child.props,
-                        toPaths[i]
-                      );
-                      if (originalValue !== val) {
-                        const itemSelector = getSelectorForId(child.props.id);
-                        if (!itemSelector) return;
-                        setPropertyByPath(child.props, toPaths[i], val);
-                        dispatch({
-                          type: "replace",
-                          data: child,
-                          destinationIndex: itemSelector == null ? void 0 : itemSelector.index,
-                          destinationZone: itemSelector == null ? void 0 : itemSelector.zone
-                        });
-                      }
+      if (!debouncedFieldSettings || Object.keys(debouncedFieldSettings).length === 0) return;
+      walkTree(
+        data,
+        {
+          components: config.components
+        },
+        (content) => content.map((child) => {
+          var _a;
+          const map = ((_a = child.props) == null ? void 0 : _a._map) || [];
+          if (map.length) {
+            map.forEach(({ from, to, transform }) => {
+              if (!from || !to) return;
+              const fromPaths = Array.isArray(from) ? from : [from];
+              const toPaths = Array.isArray(to) ? to : [to];
+              const inputValues = fromPaths.map(
+                (f) => getFieldSettingsByPath(props._fieldSettings || {}, f)
+              );
+              let value = transform ? transform(
+                inputValues.map((v) => v == null ? void 0 : v.defaultValue),
+                child.props
+              ) : inputValues[0];
+              if (Array.isArray(value)) {
+                value.forEach((val, i) => {
+                  if (toPaths[i]) {
+                    const originalValue = getFieldSettingsByPath(
+                      child.props,
+                      toPaths[i]
+                    );
+                    if (originalValue !== val) {
+                      const itemSelector = getSelectorForId(child.props.id);
+                      if (!itemSelector) return;
+                      setPropertyByPath(child.props, toPaths[i], val);
+                      dispatch({
+                        type: "replace",
+                        data: child,
+                        destinationIndex: itemSelector == null ? void 0 : itemSelector.index,
+                        destinationZone: itemSelector == null ? void 0 : itemSelector.zone
+                      });
                     }
-                  });
-                } else if (toPaths[0]) {
-                  const setting = getFieldSettingsByPath(
-                    fieldSettings,
-                    fromPaths.length === 1 ? fromPaths[0] : fromPaths.join(".")
-                  );
-                  const defaultValue = setting == null ? void 0 : setting.defaultValue;
-                  const originalValue = getFieldSettingsByPath(
-                    child.props,
-                    toPaths[0]
-                  );
-                  const finalValue = transform !== void 0 && value !== void 0 ? value : defaultValue !== void 0 ? defaultValue : value;
-                  if (originalValue !== finalValue) {
-                    const itemSelector = getSelectorForId(child.props.id);
-                    if (!itemSelector) return;
-                    setPropertyByPath(child.props, toPaths[0], finalValue);
-                    dispatch({
-                      type: "replace",
-                      data: child,
-                      destinationIndex: itemSelector == null ? void 0 : itemSelector.index,
-                      destinationZone: itemSelector == null ? void 0 : itemSelector.zone
-                    });
                   }
+                });
+              } else if (toPaths[0]) {
+                const setting = getFieldSettingsByPath(
+                  debouncedFieldSettings,
+                  fromPaths.length === 1 ? fromPaths[0] : fromPaths.join(".")
+                );
+                const defaultValue = setting == null ? void 0 : setting.defaultValue;
+                const originalValue = getFieldSettingsByPath(
+                  child.props,
+                  toPaths[0]
+                );
+                const finalValue = transform !== void 0 && value !== void 0 ? value : defaultValue !== void 0 ? defaultValue : value;
+                if (originalValue !== finalValue) {
+                  const itemSelector = getSelectorForId(child.props.id);
+                  if (!itemSelector) return;
+                  setPropertyByPath(child.props, toPaths[0], finalValue);
+                  dispatch({
+                    type: "replace",
+                    data: child,
+                    destinationIndex: itemSelector == null ? void 0 : itemSelector.index,
+                    destinationZone: itemSelector == null ? void 0 : itemSelector.zone
+                  });
                 }
-              });
-            }
-            return child;
-          })
-        );
-      }, 300);
-      return () => clearTimeout(propagateChanges);
-    }, [fieldSettings]);
+              }
+            });
+          }
+          return child;
+        })
+      );
+    }, [debouncedFieldSettings, data, dispatch, getSelectorForId, props._fieldSettings]);
     useEffect(() => {
       var _a;
       if (state !== "remodeling") return;
@@ -544,7 +572,7 @@ var getClassNameFactory = (rootClass, styles, config = { baseClass: "" }) => (op
 };
 var get_class_name_factory_default = getClassNameFactory;
 
-// css-module:D:\osamuProjects\netlisian\packages\soft-config\src\puck\components\error-boundary\styles.module.css#css-module
+// css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/components/error-boundary/styles.module.css#css-module
 var styles_module_default = { "ErrorBoundary": "_ErrorBoundary_1xl05_5", "ErrorBoundary-title": "_ErrorBoundary-title_1xl05_21", "ErrorBoundary-details": "_ErrorBoundary-details_1xl05_31", "ErrorBoundary-button": "_ErrorBoundary-button_1xl05_39" };
 
 // src/puck/components/error-boundary/index.tsx
@@ -603,157 +631,158 @@ var ErrorBoundary = class extends Component {
 
 // src/puck/lib/builder/builder-config.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
-var builderConfig = (config, overrides, editingComponent) => ({
-  root: builderRootConfig(config, overrides, editingComponent),
+var builderConfig = (config, overrides, editingComponent, showVersionFields = true, dependents) => ({
+  root: builderRootConfig(config, overrides, editingComponent, showVersionFields),
   components: Object.entries(__spreadValues({}, config.components)).reduce(
     (acc, [name, component]) => {
-      if (!editingComponent || name !== editingComponent) {
-        let _a;
-        const tempComponent = __spreadProps(__spreadValues({}, component), {
-          resolveFields(data, params) {
-            return __async(this, null, function* () {
-              let fields = {};
-              if (!fields._slot) {
-                const slotFields = Object.entries(params.fields).filter(
-                  ([_, field]) => field.type === "slot"
-                );
-                if (slotFields.length)
-                  fields._slot = {
-                    type: "array",
-                    label: "Enable Dropdown Slots",
-                    getItemSummary(item, index) {
-                      return item.slot || `Slot ${(index || 0) + 1}`;
-                    },
-                    arrayFields: {
-                      slot: {
-                        type: "select",
-                        label: "Slot",
-                        options: [
-                          { label: "Select a slot", value: "" },
-                          ...slotFields.filter(
-                            ([fieldName, field]) => {
-                              var _a2;
-                              return field.type === "slot" && !(((_a2 = data.props) == null ? void 0 : _a2._slot) || []).some(
-                                (s) => s.slot === fieldName
-                              );
-                            }
-                          ).map(([fieldName, field]) => ({
-                            label: field.label || fieldName,
-                            value: fieldName
-                          }))
-                        ]
-                      },
-                      name: {
-                        type: "text",
-                        label: "Name",
-                        placeholder: "Optional Slot Name"
-                      }
-                    }
-                  };
-              }
-              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: rootProps2,
-                      value,
-                      onChange,
-                      id,
-                      props: data.props || {},
-                      fromOptions,
-                      toOptions: toOptions2
-                    });
-                  }
-                } : {
+      const tempComponent = __spreadProps(__spreadValues({}, component), {
+        permissions: {
+          insert: editingComponent !== name && !(dependents == null ? void 0 : dependents.has(name))
+        },
+        resolveFields(data, params) {
+          return __async(this, null, function* () {
+            let fields = {};
+            if (!fields._slot) {
+              const slotFields = Object.entries(params.fields).filter(
+                ([_, field]) => field.type === "slot"
+              );
+              if (slotFields.length)
+                fields._slot = {
                   type: "array",
-                  label: "Dynamic Field Map",
+                  label: "Enable Dropdown Slots",
+                  getItemSummary(item, index) {
+                    return item.slot || `Slot ${(index || 0) + 1}`;
+                  },
                   arrayFields: {
-                    from: {
+                    slot: {
                       type: "select",
-                      label: "From",
+                      label: "Slot",
                       options: [
-                        { label: "Select a field", value: "" },
-                        ...fromOptions.map(({ label, value }) => ({
-                          label,
-                          value
+                        { label: "Select a slot", value: "" },
+                        ...slotFields.filter(
+                          ([fieldName, field]) => {
+                            var _a2;
+                            return field.type === "slot" && !(((_a2 = data.props) == null ? void 0 : _a2._slot) || []).some(
+                              (s) => s.slot === fieldName
+                            );
+                          }
+                        ).map(([fieldName, field]) => ({
+                          label: field.label || fieldName,
+                          value: fieldName
                         }))
                       ]
                     },
-                    to: {
-                      type: "select",
-                      label: "To",
-                      options: [
-                        { label: "Select a field", value: "" },
-                        ...toOptions.map(({ label, value }) => ({
-                          label,
-                          value
-                        }))
-                      ]
+                    name: {
+                      type: "text",
+                      label: "Name",
+                      placeholder: "Optional Slot Name"
                     }
                   }
                 };
-              }
-              fields = __spreadValues(__spreadValues({}, fields), defaultFields);
-              return fields;
-            });
-          },
-          resolveData: ({ props }, { lastData }) => {
-            var _a2;
-            const _map = props._map || [];
-            const readOnlyFields = _map.flatMap((item) => item.to);
-            if (_map.length) {
+            }
+            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: rootProps2,
+                    value,
+                    onChange,
+                    id,
+                    props: data.props || {},
+                    fromOptions,
+                    toOptions: toOptions2
+                  });
+                }
+              } : {
+                type: "array",
+                label: "Dynamic Field Map",
+                arrayFields: {
+                  from: {
+                    type: "select",
+                    label: "From",
+                    options: [
+                      { label: "Select a field", value: "" },
+                      ...fromOptions.map(({ label, value }) => ({
+                        label,
+                        value
+                      }))
+                    ]
+                  },
+                  to: {
+                    type: "select",
+                    label: "To",
+                    options: [
+                      { label: "Select a field", value: "" },
+                      ...toOptions.map(({ label, value }) => ({
+                        label,
+                        value
+                      }))
+                    ]
+                  }
+                }
+              };
+            }
+            fields = __spreadValues(__spreadValues({}, fields), defaultFields);
+            return fields;
+          });
+        },
+        resolveData: ({ props }, { lastData }) => {
+          var _a2;
+          const _map = props._map || [];
+          const readOnlyFields = _map.flatMap((item) => item.to);
+          if (_map.length) {
+            return {
+              props,
+              readOnly: readOnlyFields.reduce(
+                (acc2, field) => __spreadProps(__spreadValues({}, acc2), { [field]: true }),
+                {}
+              )
+            };
+          }
+          const prevMap = (_a2 = lastData == null ? void 0 : lastData.props) == null ? void 0 : _a2._map;
+          if (prevMap && prevMap.length === 1) {
+            const lastField = prevMap[0].to;
+            if (typeof lastField === "string") {
+              return {
+                props,
+                readOnly: { [lastField]: false }
+              };
+            }
+            if (Array.isArray(lastField)) {
               return {
                 props,
-                readOnly: readOnlyFields.reduce(
-                  (acc2, field) => __spreadProps(__spreadValues({}, acc2), { [field]: true }),
+                readOnly: lastField.reduce(
+                  (acc2, field) => __spreadProps(__spreadValues({}, acc2), { [String(field)]: false }),
                   {}
                 )
               };
             }
-            const prevMap = (_a2 = lastData == null ? void 0 : lastData.props) == null ? void 0 : _a2._map;
-            if (prevMap && prevMap.length === 1) {
-              const lastField = prevMap[0].to;
-              if (typeof lastField === "string") {
-                return {
-                  props,
-                  readOnly: { [lastField]: false }
-                };
-              }
-              if (Array.isArray(lastField)) {
-                return {
-                  props,
-                  readOnly: lastField.reduce(
-                    (acc2, field) => __spreadProps(__spreadValues({}, acc2), { [String(field)]: false }),
-                    {}
-                  )
-                };
-              }
-            }
-            return {
-              props,
-              readOnly: {}
-            };
-          },
-          render: (props) => {
-            return /* @__PURE__ */ jsx4(ErrorBoundary, { children: component.render(props) });
           }
-        });
-        acc[name] = tempComponent;
-      }
+          return {
+            props,
+            readOnly: {}
+          };
+        },
+        render: (props) => {
+          return /* @__PURE__ */ jsx4(ErrorBoundary, { children: component.render(props) });
+        }
+      });
+      acc[name] = tempComponent;
       return acc;
     },
     {}
-  )
+  ),
+  categories: config.categories || {}
 });
 
 // src/puck/lib/strip-id.ts
@@ -879,14 +908,14 @@ var softFieldsToPuckFields = (fields, fieldSettings) => {
     {}
   )) || {};
 };
-var softComponentFromAppState = (appState, configComponents) => {
+var softComponentFromAppState = (appState, configComponents, editedItem, metadata) => {
   var _a;
   const rootProps = ((_a = appState.data.root) == null ? void 0 : _a.props) || {};
   const fields = rootProps._fields || [];
   const field_settings = rootProps._fieldSettings || {};
   const slots = {};
   const components = getSubComponents(
-    appState.data.content || [],
+    [editedItem],
     configComponents,
     field_settings,
     slots
@@ -900,6 +929,8 @@ var softComponentFromAppState = (appState, configComponents) => {
   )), slots);
   return [
     {
+      name: metadata.name,
+      category: metadata.category,
       fields: __spreadValues(__spreadValues({}, softFieldsToPuckFields(fields, field_settings)), Object.keys(slots).reduce((acc, slot) => {
         acc[slot] = { type: "slot", label: slot };
         return acc;
@@ -1035,7 +1066,7 @@ var reconstructComponents = (subComponents, componentConfigs, softComponentProps
     return componentData;
   });
 };
-var softComponentToAppState = (softComponent, componentName, version, versions, componentProps, componentConfigs) => {
+var softComponentToAppState = (softComponent, componentName, version, versions, componentProps, componentConfigs, displayName, category) => {
   const slots = new Set(Object.keys(softComponent.slots));
   const { fields, fieldSettings } = puckFieldsToSoftFields(
     softComponent.fields,
@@ -1047,7 +1078,8 @@ var softComponentToAppState = (softComponent, componentName, version, versions,
     }
   });
   const rootProps = {
-    _name: componentName,
+    _name: displayName || componentName,
+    _category: category,
     _version: version,
     _versions: versions,
     _fields: fields,
@@ -1076,6 +1108,7 @@ var rootDroppableId = `${rootAreaId}:${rootZone}`;
 // src/puck/components/soft-render/index.tsx
 import { useMemo, useRef } from "react";
 import { v4 as uuidv42 } from "uuid";
+import equal from "fast-deep-equal";
 import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
 function SoftRender({
   softComponentFields,
@@ -1087,11 +1120,10 @@ function SoftRender({
 }) {
   const _a = props, { id, puck, editMode } = _a, rest = __objRest(_a, ["id", "puck", "editMode"]);
   const mapCacheRef = useRef(/* @__PURE__ */ new Map());
-  const prevPropsRef = useRef("");
-  const propsSnapshot = JSON.stringify(props);
-  if (prevPropsRef.current !== propsSnapshot) {
+  const prevPropsRef = useRef(null);
+  if (!equal(prevPropsRef.current, props)) {
     mapCacheRef.current.clear();
-    prevPropsRef.current = propsSnapshot;
+    prevPropsRef.current = props;
   }
   const subComponentRootProps = useMemo(
     () => Object.entries(softComponentFields || {}).filter(([_, field]) => field.type !== "slot").reduce(
@@ -1103,10 +1135,6 @@ function SoftRender({
     ),
     [softComponentFields, props]
   );
-  const valuesToUpdateKey = useMemo(
-    () => JSON.stringify(subComponentRootProps),
-    [subComponentRootProps]
-  );
   return /* @__PURE__ */ jsx5(Fragment2, { children: (softSubComponent == null ? void 0 : softSubComponent.length) > 0 && softSubComponent.map((subComponent, index) => {
     var _a2;
     const componentConfig = configComponents[subComponent == null ? void 0 : subComponent.type];
@@ -1133,7 +1161,7 @@ function SoftRender({
           }
           return propValue;
         });
-        const cacheKey = JSON.stringify(inputValues);
+        const cacheKey = inputValues.map((v, i) => `${i}:${typeof v === "object" ? JSON.stringify(v) : v}`).join("|");
         let result = mapCacheRef.current.get(cacheKey);
         if (!result) {
           const runner = transform;
@@ -1160,7 +1188,7 @@ function SoftRender({
             const slotName = enabledSlot.name || `${(_b = subComponent.fixedProps) == null ? void 0 : _b.id}-${slotKey}`;
             resolvedProps[slotKey] = useMemo(
               () => rest[slotName] || (() => null),
-              [slotName]
+              [slotName, rest[slotName]]
             );
           } else {
             resolvedProps[slotKey] = useMemo(() => {
@@ -1181,7 +1209,7 @@ function SoftRender({
                   slotKey
                 ) });
               };
-            }, [valuesToUpdateKey]);
+            }, [slotKey, subComponentRootProps]);
           }
         }
       }
@@ -1200,10 +1228,11 @@ function SoftRender({
 
 // src/puck/lib/create-versioned-component-config.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
-var createVersionedComponentConfig = (componentName, version, allVersions, config, softComponents, defaultProps) => {
+var createVersionedComponentConfig = (componentName, displayName, version, allVersions, config, softComponents, defaultProps, showVersioning = true) => {
   var _a, _b;
   const softConfig = config;
   return {
+    label: displayName,
     fields: Object.fromEntries(
       (Object.entries(
         (_b = (_a = softComponents[componentName].versions) == null ? void 0 : _a[version]) == null ? void 0 : _b.fields
@@ -1218,16 +1247,18 @@ var createVersionedComponentConfig = (componentName, version, allVersions, confi
       var _a2, _b2;
       const selectedVersion = ((_a2 = data.props) == null ? void 0 : _a2.version) || version;
       const versionedComponent = (_b2 = softComponents[componentName]) == null ? void 0 : _b2.versions[selectedVersion];
-      const fieldsWithoutSlots = Object.fromEntries(
-        Object.entries((versionedComponent == null ? void 0 : versionedComponent.fields) || {}).filter(([, field]) => field.type !== "slot").map(([key, field]) => [key, __spreadValues({}, field)])
-      );
-      return __spreadValues({
-        version: {
+      let fields = {};
+      if (showVersioning) {
+        fields.version = {
           label: "Version",
           type: "select",
           options: allVersions.map((v) => ({ label: v, value: v }))
-        }
-      }, fieldsWithoutSlots);
+        };
+      }
+      Object.entries((versionedComponent == null ? void 0 : versionedComponent.fields) || {}).filter(([, field]) => field.type !== "slot").forEach(([key, field]) => {
+        fields[key] = field;
+      });
+      return fields;
     },
     render: (props) => {
       var _a2;
@@ -1347,9 +1378,21 @@ function demolishSoftComponent(componentName, data, config, softComponents) {
   };
 }
 
+// src/puck/lib/component-key.ts
+var defaultToCamelCase = (value) => {
+  const tokens = value.trim().replace(/[^a-zA-Z0-9\s_-]/g, " ").split(/[\s_-]+/).filter(Boolean);
+  if (tokens.length === 0) return "";
+  const [first, ...rest] = tokens;
+  return `${first.toLowerCase()}${rest.map((token) => token.charAt(0).toUpperCase() + token.slice(1).toLowerCase()).join("")}`;
+};
+var createComponentKeyFromName = (displayName, overrides, context) => {
+  const key = overrides.componentNameToKey ? overrides.componentNameToKey(displayName, context) : defaultToCamelCase(displayName);
+  return key.trim();
+};
+
 // src/puck/store/slices/builder.tsx
 var createBuildersSlice = (set, get, initialConfig) => ({
-  build: (history, selectedItem, itemSelector, puckDispatch) => {
+  build: (history, selectedItem, itemSelector, puckDispatch, name) => {
     if (!selectedItem || !itemSelector) {
       throw new Error("No item selected to build from.");
     }
@@ -1362,16 +1405,31 @@ var createBuildersSlice = (set, get, initialConfig) => ({
         data: __spreadProps(__spreadValues({}, previous.data), {
           root: {
             props: {
-              _name: "New Soft Component"
+              _name: name || "New Soft Component"
             }
-          },
-          content: [__spreadValues({}, selectedItem)]
+          }
+          // content: [{ ...selectedItem }],
         })
       })
     });
     const config = __spreadValues({}, get().softConfig);
     const overrides = get().overrides;
-    const buildConfig = builderConfig(config, overrides);
+    const buildConfig = builderConfig(config, overrides, void 0, get().showVersionFields);
+    const editableIds = /* @__PURE__ */ new Set([selectedItem.props.id]);
+    const initialContent = [__spreadValues({}, selectedItem)];
+    walkTree3(
+      {
+        root: {},
+        content: initialContent
+      },
+      { components: config.components },
+      (components) => {
+        components.forEach((comp) => {
+          editableIds.add(comp.props.id);
+        });
+        return components;
+      }
+    );
     set((s) => __spreadProps(__spreadValues({}, s), {
       softConfig: buildConfig,
       storedConfig: config,
@@ -1380,6 +1438,8 @@ var createBuildersSlice = (set, get, initialConfig) => ({
         index: itemSelector.index,
         zone: itemSelector.zone || rootDroppableId
       },
+      editingComponentId: selectedItem.props.id,
+      editableComponentIds: editableIds,
       state: "building"
     }));
     setTimeout(
@@ -1387,7 +1447,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
         type: "replaceRoot",
         root: {
           title: "Soft Component Builder",
-          _name: "New Soft Component"
+          _name: name || "New Soft Component"
         }
       }),
       100
@@ -1404,6 +1464,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
     }
     const softComponentVersion = ((_a = selectedItem.props) == null ? void 0 : _a.version) || "1.0.0";
     const softComponent = (_b = get().softComponents[softComponentName]) == null ? void 0 : _b.versions[softComponentVersion];
+    const softComponentMeta = get().softComponents[softComponentName];
     const versions = Object.keys(
       get().softComponents[softComponentName].versions || {}
     );
@@ -1424,18 +1485,50 @@ var createBuildersSlice = (set, get, initialConfig) => ({
       softComponentVersion,
       versions,
       selectedItem.props,
-      get().softConfig.components
+      get().softConfig.components,
+      (softComponentMeta == null ? void 0 : softComponentMeta.name) || softComponentName,
+      softComponentMeta == null ? void 0 : softComponentMeta.category
+    );
+    const config = __spreadValues({}, get().softConfig);
+    const overrides = get().overrides;
+    const dependents = get().dependencyGraph.get(softComponentName) || /* @__PURE__ */ new Set();
+    const buildConfig = builderConfig(config, overrides, softComponentName, get().showVersionFields, dependents);
+    const editableIds = /* @__PURE__ */ new Set([]);
+    const decomposedComponents = get().builder.decompose(selectedItem);
+    walkTree3(
+      { root: {}, content: decomposedComponents || [] },
+      { components: config.components },
+      (components) => {
+        components.forEach((comp) => {
+          editableIds.add(comp.props.id);
+        });
+        return components;
+      }
     );
     puckDispatch({
       type: "setData",
-      data: (previous) => __spreadProps(__spreadValues({}, previous), {
+      data: (prevData) => ({
         root: __spreadProps(__spreadValues({}, root), { _versions: versions }),
-        content: content || []
+        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
       })
     });
-    const config = __spreadValues({}, get().softConfig);
-    const overrides = get().overrides;
-    const buildConfig = builderConfig(config, overrides, softComponentName);
     set((s) => __spreadProps(__spreadValues({}, s), {
       storedConfig: config,
       softConfig: buildConfig,
@@ -1444,62 +1537,109 @@ var createBuildersSlice = (set, get, initialConfig) => ({
         index: itemSelector.index,
         zone: itemSelector.zone || rootDroppableId
       },
+      editingComponentId: selectedItem.props.id,
+      editableComponentIds: editableIds,
       state: "remodeling"
     }));
     setTimeout(
       () => puckDispatch({
         type: "replaceRoot",
         root: {
-          title: "Soft Component Builder",
-          _name: "New Soft Component"
+          title: root.props.title,
+          _name: root.props._name,
+          _category: root.props._category
         }
       }),
       100
     );
   },
-  complete: (appState, setHistories) => {
-    var _a, _b;
+  complete: (appState, setHistories, getItemBySelector) => {
+    var _a, _b, _c, _d, _e;
     if (get().state === "ready") {
       throw new Error("Not building or remodeling a component.");
     }
-    const componentName = (_b = (_a = appState.data.root) == null ? void 0 : _a.props) == null ? void 0 : _b._name;
-    if (!componentName) {
+    const displayName = (_c = (_b = (_a = appState.data.root) == null ? void 0 : _a.props) == null ? void 0 : _b._name) == null ? void 0 : _c.trim();
+    if (!displayName) {
       throw new Error("Root component must have a name to compose.");
     }
-    const [newSoftComponentConfig, version] = get().builder.compose(appState, componentName) || [];
+    const itemSelector = get().itemSelector;
+    if (!itemSelector) {
+      throw new Error("No item selector found for completed component.");
+    }
+    const selectedItem = getItemBySelector(
+      itemSelector
+    );
+    if (!selectedItem) {
+      throw new Error("Cannot find item being edited");
+    }
+    const rootCategory = (_e = (_d = appState.data.root) == null ? void 0 : _d.props) == null ? void 0 : _e._category;
+    const componentName = createComponentKeyFromName(displayName, get().overrides, {
+      existingKeys: Object.keys(get().softComponents),
+      state: get().state
+    });
+    if (!componentName) {
+      throw new Error("Failed to generate component key from name.");
+    }
+    const [newSoftComponentConfig, version] = get().builder.compose(
+      appState,
+      componentName,
+      selectedItem,
+      displayName,
+      rootCategory
+    ) || [];
     if (!newSoftComponentConfig) {
       throw new Error("Failed to compose new soft component config.");
     }
     const storedHistories = get().originalHistory;
     setHistories([...storedHistories]);
     const config = __spreadValues({}, get().softConfig || initialConfig);
-    set((s) => __spreadProps(__spreadValues({}, s), {
-      softConfig: __spreadProps(__spreadValues({}, config), {
-        root: __spreadValues({}, initialConfig.root),
-        components: __spreadProps(__spreadValues({}, Object.entries(config.components).reduce(
-          (acc, [name, component]) => {
-            var _a2;
-            let tempComponent = (_a2 = config.components) == null ? void 0 : _a2[name];
-            if (tempComponent) {
-              acc[name] = tempComponent;
-              acc[name].render = tempComponent.render;
-            } else {
-              tempComponent = __spreadValues({}, component);
-              tempComponent == null ? true : delete tempComponent.resolvePermissions;
-              tempComponent == null ? true : delete tempComponent.resolveData;
-              acc[name] = tempComponent;
-            }
-            return acc;
-          },
-          {}
-        )), {
-          [componentName]: __spreadValues({}, newSoftComponentConfig)
+    set((s) => {
+      var _a2, _b2;
+      const nextComponents = __spreadProps(__spreadValues({}, Object.entries(config.components).reduce(
+        (acc, [name, component]) => {
+          var _a3;
+          let tempComponent = (_a3 = config.components) == null ? void 0 : _a3[name];
+          if (tempComponent) {
+            acc[name] = tempComponent;
+            acc[name].render = tempComponent.render;
+          } else {
+            tempComponent = __spreadValues({}, component);
+            tempComponent == null ? true : delete tempComponent.resolvePermissions;
+            tempComponent == null ? true : delete tempComponent.resolveData;
+            acc[name] = tempComponent;
+          }
+          return acc;
+        },
+        {}
+      )), {
+        [componentName]: __spreadValues({}, newSoftComponentConfig)
+      });
+      const categories = get().softConfig.categories || {};
+      const nextCategories = rootCategory ? __spreadProps(__spreadValues({}, categories), {
+        [rootCategory]: __spreadProps(__spreadValues({}, categories[rootCategory] || {}), {
+          title: ((_a2 = categories[rootCategory]) == null ? void 0 : _a2.title) || rootCategory,
+          components: Array.from(
+            /* @__PURE__ */ new Set([
+              ...((_b2 = categories[rootCategory]) == null ? void 0 : _b2.components) || [],
+              componentName
+            ])
+          )
         })
-      }),
-      storedConfig: void 0,
-      state: "inspecting",
-      originalHistory: []
-    }));
+      }) : categories;
+      return __spreadProps(__spreadValues({}, s), {
+        softConfig: __spreadProps(__spreadValues({}, config), {
+          root: __spreadValues({}, initialConfig.root),
+          components: nextComponents,
+          categories: nextCategories
+        }),
+        storedConfig: void 0,
+        state: "inspecting",
+        originalHistory: [],
+        editingComponentId: null,
+        editableComponentIds: /* @__PURE__ */ new Set()
+      });
+    });
+    get().rebuildDependents(componentName, version);
     return componentName;
   },
   inspect: (componentName, puckDispatch) => {
@@ -1526,7 +1666,9 @@ var createBuildersSlice = (set, get, initialConfig) => ({
     set((s) => __spreadProps(__spreadValues({}, s), {
       state: "ready",
       setItemSelector: void 0,
-      setOriginalItem: void 0
+      setOriginalItem: void 0,
+      editingComponentId: null,
+      editableComponentIds: /* @__PURE__ */ new Set()
     }));
   },
   cancel: (setHistories) => {
@@ -1538,10 +1680,12 @@ var createBuildersSlice = (set, get, initialConfig) => ({
       originalHistory: [],
       itemSelector: null,
       originalItem: null,
-      state: "ready"
+      state: "ready",
+      editingComponentId: null,
+      editableComponentIds: /* @__PURE__ */ new Set()
     }));
   },
-  compose: (appState, componentName) => {
+  compose: (appState, componentName, editedItem, displayName, category) => {
     if (!componentName) {
       throw new Error("Root component must have a name to compose.");
     }
@@ -1551,12 +1695,21 @@ var createBuildersSlice = (set, get, initialConfig) => ({
         `Component name "${componentName}" already exists in the configuration.`
       );
     }
-    const [softComponent, version] = softComponentFromAppState(appState, componentConfigs);
+    const [softComponent, version] = softComponentFromAppState(
+      appState,
+      componentConfigs,
+      editedItem,
+      {
+        name: displayName,
+        category
+      }
+    );
     const existingComponent = get().softComponents[componentName];
     const allVersions = Object.keys((existingComponent == null ? void 0 : existingComponent.versions) || {});
     const isNewVersion = !allVersions.includes(version);
     const newSoftComponentConfig = createVersionedComponentConfig(
       componentName,
+      displayName,
       version,
       isNewVersion ? [...allVersions, version] : allVersions,
       get().softConfig,
@@ -1567,7 +1720,8 @@ var createBuildersSlice = (set, get, initialConfig) => ({
           })
         })
       }),
-      softComponent.defaultProps
+      softComponent.defaultProps,
+      get().showVersionFields
     );
     get().setSoftComponent(componentName, version, softComponent);
     return [newSoftComponentConfig, version];
@@ -1603,6 +1757,7 @@ var createBuildersSlice = (set, get, initialConfig) => ({
       throw new Error("Can only switch versions during remodeling.");
     }
     const softComponent = (_a = get().softComponents[componentName]) == null ? void 0 : _a.versions[newVersion];
+    const softComponentMeta = get().softComponents[componentName];
     if (!softComponent) {
       throw new Error(
         `Soft component "${componentName}" with version "${newVersion}" not found.`
@@ -1617,7 +1772,9 @@ var createBuildersSlice = (set, get, initialConfig) => ({
       newVersion,
       versions,
       currentProps,
-      get().softConfig.components
+      get().softConfig.components,
+      (softComponentMeta == null ? void 0 : softComponentMeta.name) || componentName,
+      softComponentMeta == null ? void 0 : softComponentMeta.category
     );
     puckDispatch({
       type: "setData",
@@ -1669,10 +1826,11 @@ function hydrateSoftComponentsTransforms(softComponents, hydrator) {
         })
       });
     });
-    hydrated[name] = {
+    hydrated[name] = __spreadProps(__spreadValues({}, comp), {
+      name: comp.name || name,
       defaultVersion: comp.defaultVersion,
       versions
-    };
+    });
   });
   return hydrated;
 }
@@ -1699,6 +1857,27 @@ function extractDependencies(softComponents, componentName, version) {
   processSubComponents(component.components);
   return dependencies;
 }
+function buildReverseDependencyGraph(softComponents) {
+  const reverseDeps = /* @__PURE__ */ new Map();
+  for (const [componentName, component] of Object.entries(softComponents)) {
+    const defaultVersion = component.defaultVersion || Object.keys(component.versions || {}).pop();
+    if (!defaultVersion) continue;
+    Object.entries(component.versions || {}).forEach(([version, versionedComp]) => {
+      const dependencies = extractDependencies(softComponents, componentName, version);
+      if (!component.dependencies) {
+        component.dependencies = {};
+      }
+      component.dependencies[version] = dependencies;
+      for (const dep of dependencies) {
+        if (!reverseDeps.has(dep)) {
+          reverseDeps.set(dep, /* @__PURE__ */ new Set());
+        }
+        reverseDeps.get(dep).add(componentName);
+      }
+    });
+  }
+  return reverseDeps;
+}
 function topologicalSort(softComponents, hardComponentNames) {
   const sorted = [];
   const visiting = /* @__PURE__ */ new Set();
@@ -1742,7 +1921,7 @@ function topologicalSort(softComponents, hardComponentNames) {
   }
   return sorted;
 }
-function buildInitialSoftComponents(hardConfig, softComponents, overrides) {
+function buildInitialSoftComponents(hardConfig, softComponents, overrides, showVersioning = false) {
   var _a, _b;
   if (!softComponents || Object.keys(softComponents).length === 0) {
     return {};
@@ -1771,12 +1950,14 @@ function buildInitialSoftComponents(hardConfig, softComponents, overrides) {
       }
       const newSoftComponentConfig = createVersionedComponentConfig(
         name,
+        comp.name || name,
         defaultVersion || "1.0.0",
         allVersions,
         buildingConfig,
         // Pass the accumulating config
         hydratedSoftComponents,
-        versionedComponent.defaultProps
+        versionedComponent.defaultProps,
+        showVersioning
       );
       componentConfigs[name] = newSoftComponentConfig;
       buildingConfig.components[name] = newSoftComponentConfig;
@@ -1798,11 +1979,13 @@ function buildInitialSoftComponents(hardConfig, softComponents, overrides) {
       }
       const newSoftComponentConfig = createVersionedComponentConfig(
         name,
+        comp.name || name,
         defaultVersion || "1.0.0",
         allVersions,
         hardConfig,
         hydratedSoftComponents,
-        versionedComponent.defaultProps
+        versionedComponent.defaultProps,
+        showVersioning
       );
       componentConfigs[name] = newSoftComponentConfig;
     }
@@ -1810,21 +1993,114 @@ function buildInitialSoftComponents(hardConfig, softComponents, overrides) {
   }
 }
 
+// src/puck/lib/edit-visibility-utils.ts
+var setEditVisibility = (doc, context) => {
+  if (!doc) return;
+  try {
+    const root = doc.documentElement;
+    if (context.mode === "none") {
+      root.removeAttribute("data-edit-mode");
+      root.classList.remove("edit-visibility-mode");
+      doc.querySelectorAll("[data-puck-component]").forEach((el) => {
+        el.removeAttribute("data-edit-visibility");
+        el.classList.remove("edit-visibility-greyed", "edit-visibility-editable", "edit-visibility-dependency");
+      });
+    } else {
+      root.setAttribute("data-edit-mode", context.mode);
+      root.classList.add("edit-visibility-mode");
+      doc.querySelectorAll("[data-puck-component]").forEach((el) => {
+        var _a;
+        const id = el.getAttribute("data-puck-component");
+        if (!id) return;
+        const isEditable = context.editableIds.has(id);
+        const isDependency = (_a = context.highlightDependencyIds) == null ? void 0 : _a.has(id);
+        if (isEditable) {
+          el.setAttribute("data-edit-visibility", "editable");
+          el.classList.remove("edit-visibility-greyed", "edit-visibility-dependency");
+          el.classList.add("edit-visibility-editable");
+        } else if (isDependency) {
+          el.setAttribute("data-edit-visibility", "dependency");
+          el.classList.remove("edit-visibility-greyed", "edit-visibility-editable");
+          el.classList.add("edit-visibility-dependency");
+        } else {
+          el.setAttribute("data-edit-visibility", "greyed");
+          el.classList.remove("edit-visibility-editable", "edit-visibility-dependency");
+          el.classList.add("edit-visibility-greyed");
+        }
+      });
+    }
+  } catch (error) {
+    console.warn(`Failed to set edit visibility:`, error);
+  }
+};
+var clearEditVisibility = (doc) => {
+  if (!doc) return;
+  try {
+    const root = doc.documentElement;
+    root.removeAttribute("data-edit-mode");
+    root.classList.remove("edit-visibility-mode");
+    doc.querySelectorAll("[data-puck-component]").forEach((el) => {
+      el.removeAttribute("data-edit-visibility");
+      el.classList.remove("edit-visibility-greyed", "edit-visibility-editable", "edit-visibility-dependency");
+    });
+  } catch (error) {
+    console.warn(`Failed to clear edit visibility:`, error);
+  }
+};
+
 // src/puck/store/index.tsx
 var createSoftConfigStore = (hardConfig = {
   components: {}
-}, softComponents = {}, overrides = {}, onActions) => {
+}, softComponents = {}, overrides = {}, onActions, showVersionFields = true) => {
+  const normalizedSoftComponents = Object.fromEntries(
+    Object.entries(softComponents || {}).map(([key, value]) => [
+      key,
+      __spreadProps(__spreadValues({}, value), {
+        name: value.name || key
+      })
+    ])
+  );
+  const iframeDocRef = { current: null };
   const hydratedSoftComponents = (overrides == null ? void 0 : overrides.hydrateMapTransform) ? hydrateSoftComponentsTransforms(
-    softComponents,
+    normalizedSoftComponents,
     overrides.hydrateMapTransform
-  ) : softComponents;
+  ) : normalizedSoftComponents;
+  const initialDependencyGraph = buildReverseDependencyGraph(
+    hydratedSoftComponents
+  );
   return create()(
     subscribeWithSelector(
-      devtools((set, get) => ({
+      (set, get) => ({
         state: "ready",
         originalHistory: [],
         overrides,
         onActions,
+        iframeDocRef,
+        showVersionFields,
+        setShowVersionFields: (show) => set({ showVersionFields: show }),
+        getIframeDoc: () => iframeDocRef.current,
+        setIframeDoc: (doc) => {
+          iframeDocRef.current = doc;
+          if (!doc) {
+            return;
+          }
+          const { state, editableComponentIds } = get();
+          if (state === "building") {
+            setEditVisibility(doc, {
+              mode: "build",
+              editableIds: editableComponentIds
+            });
+            return;
+          }
+          if (state === "remodeling") {
+            setEditVisibility(doc, {
+              mode: "remodel",
+              editableIds: editableComponentIds
+            });
+            return;
+          }
+          clearEditVisibility(doc);
+        },
         storeHistory: (history) => set({ originalHistory: history }),
         removeHistory: () => set({ originalHistory: [] }),
         itemSelector: null,
@@ -1833,24 +2109,29 @@ var createSoftConfigStore = (hardConfig = {
         setOriginalItem: (item) => set({ originalItem: item }),
         hydratedSoftComponents,
         softComponents: hydratedSoftComponents,
+        dependencyGraph: initialDependencyGraph,
         softConfig: __spreadProps(__spreadValues({}, hardConfig), {
           components: __spreadValues(__spreadValues({}, hardConfig.components), buildInitialSoftComponents(
             hardConfig,
             hydratedSoftComponents,
             overrides
-          ))
+          )),
+          categories: __spreadValues({}, hardConfig.categories || {})
         }),
         setSoftComponent: (name, version, component) => {
+          const existing = get().softComponents[name];
           set((state) => {
-            var _a;
+            var _a, _b;
             return {
               softComponents: __spreadProps(__spreadValues({}, state.softComponents), {
-                [name]: {
+                [name]: __spreadProps(__spreadValues({}, existing), {
+                  name: component.name || (existing == null ? void 0 : existing.name) || name,
+                  category: (_a = component.category) != null ? _a : existing == null ? void 0 : existing.category,
                   defaultVersion: version,
-                  versions: __spreadProps(__spreadValues({}, ((_a = state.softComponents[name]) == null ? void 0 : _a.versions) || {}), {
+                  versions: __spreadProps(__spreadValues({}, ((_b = state.softComponents[name]) == null ? void 0 : _b.versions) || {}), {
                     [version]: component
                   })
-                }
+                })
               })
             };
           });
@@ -1862,19 +2143,23 @@ var createSoftConfigStore = (hardConfig = {
           Object.entries(incomingComponents).forEach(([name, data]) => {
             const existing = nextSoftComponents[name];
             const finalComponentData = existing ? __spreadProps(__spreadValues(__spreadValues({}, existing), data), {
+              name: data.name || existing.name || name,
               versions: __spreadValues(__spreadValues({}, existing.versions), data.versions)
             }) : data;
+            finalComponentData.name = finalComponentData.name || name;
             nextSoftComponents[name] = finalComponentData;
             const activeVersion = finalComponentData.defaultVersion;
             const activeVersionData = finalComponentData.versions[activeVersion];
             if (activeVersionData) {
               nextConfigComponents[name] = createVersionedComponentConfig(
                 name,
+                finalComponentData.name || name,
                 activeVersion,
                 Object.keys(finalComponentData.versions),
                 state.softConfig,
                 nextSoftComponents,
-                activeVersionData.defaultProps
+                activeVersionData.defaultProps,
+                state.showVersionFields
               );
             }
           });
@@ -1899,11 +2184,13 @@ var createSoftConfigStore = (hardConfig = {
             if (activeVersionData) {
               nextConfigComponents[name] = createVersionedComponentConfig(
                 name,
+                componentData.name || name,
                 activeVersion,
                 Object.keys(componentData.versions),
                 softConfig,
                 hydratedComponents,
-                activeVersionData.defaultProps
+                activeVersionData.defaultProps,
+                get().showVersionFields
               );
             }
           });
@@ -1915,11 +2202,12 @@ var createSoftConfigStore = (hardConfig = {
           });
         },
         setSoftComponentDefaultVersion: (name, version) => {
-          var _a, _b, _c;
+          var _a, _b, _c, _d;
           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) || {}
           );
+          const displayName = ((_d = get().softComponents[name]) == null ? void 0 : _d.name) || name;
           if (!softComponent) {
             throw new Error(
               `Soft component "${name}" version "${version}" does not exist.`
@@ -1927,11 +2215,13 @@ var createSoftConfigStore = (hardConfig = {
           }
           const newSoftComponentConfig = createVersionedComponentConfig(
             name,
+            displayName,
             version,
             allVersions,
             get().softConfig,
             get().softComponents,
-            softComponent.defaultProps
+            softComponent.defaultProps,
+            get().showVersionFields
           );
           set((state) => ({
             softConfig: __spreadProps(__spreadValues({}, state.softConfig), {
@@ -1979,20 +2269,20 @@ var createSoftConfigStore = (hardConfig = {
         },
         setSoftComponentConfig: (key, config, category) => {
           set((state) => {
-            var _a;
+            var _a, _b, _c;
             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]), {
+                categories: category ? __spreadProps(__spreadValues({}, state.softConfig.categories || {}), {
+                  [category]: __spreadProps(__spreadValues({}, ((_a = state.softConfig.categories) == null ? void 0 : _a[category]) || {}), {
                     components: [
-                      ...((_a = state.softConfig.categories[category]) == null ? void 0 : _a.components) || [],
+                      ...((_c = (_b = state.softConfig.categories) == null ? void 0 : _b[category]) == null ? void 0 : _c.components) || [],
                       key
                     ]
                   })
-                }) : state.softConfig.categories
+                }) : state.softConfig.categories || {}
               })
             };
           });
@@ -2031,8 +2321,50 @@ var createSoftConfigStore = (hardConfig = {
             })
           }));
         },
-        builder: createBuildersSlice(set, get, hardConfig)
-      }))
+        builder: createBuildersSlice(set, get, hardConfig),
+        editingComponentId: null,
+        editableComponentIds: /* @__PURE__ */ new Set(),
+        setEditableComponentIds: (ids) => set({ editableComponentIds: ids }),
+        addEditableComponentId: (id) => {
+          set((state) => {
+            const newIds = new Set(state.editableComponentIds);
+            newIds.add(id);
+            return { editableComponentIds: newIds };
+          });
+        },
+        clearEditingState: () => set({
+          editingComponentId: null,
+          editableComponentIds: /* @__PURE__ */ new Set()
+        }),
+        rebuildDependents: (componentName, version) => {
+          const state = get();
+          const dependents = state.dependencyGraph.get(componentName) || /* @__PURE__ */ new Set();
+          if (dependents.size === 0) return;
+          const config = __spreadValues({}, state.softConfig);
+          const softComponents2 = state.softComponents;
+          const toBuild = Array.from(dependents);
+          for (const dependentName of toBuild) {
+            const dependent = softComponents2[dependentName];
+            const defaultVersion = dependent.defaultVersion || Object.keys(dependent.versions || {}).pop();
+            if (!defaultVersion) continue;
+            const versionedComponent = dependent.versions[defaultVersion];
+            const allVersions = Object.keys(dependent.versions || {});
+            if (!versionedComponent) continue;
+            const newConfig = createVersionedComponentConfig(
+              dependentName,
+              dependent.name || dependentName,
+              defaultVersion,
+              allVersions,
+              config,
+              softComponents2,
+              versionedComponent.defaultProps,
+              state.showVersionFields
+            );
+            config.components[dependentName] = newConfig;
+          }
+          set((s) => __spreadProps(__spreadValues({}, s), { softConfig: config }));
+        }
+      })
     )
   );
 };
@@ -2046,11 +2378,12 @@ var SoftConfigProvider = ({
   softComponents,
   overrides,
   value,
-  onActions
+  onActions,
+  useVersioning = false
 }) => {
   const store = value != null ? value : useMemo2(
-    () => createSoftConfigStore(hardConfig, softComponents, overrides, onActions),
-    [hardConfig, softComponents, overrides, onActions]
+    () => createSoftConfigStore(hardConfig, softComponents, overrides, onActions, useVersioning),
+    [hardConfig, softComponents, overrides, onActions, useVersioning]
   );
   const [softConfig, setSoftConfig] = useState2(
     () => store.getState().softConfig
@@ -2058,6 +2391,53 @@ var SoftConfigProvider = ({
   const [internalSoftComponents, setSoftComponents] = useState2(
     () => store.getState().softComponents
   );
+  const storeSetIframeDoc = useMemo2(
+    () => store.getState().setIframeDoc,
+    [store]
+  );
+  const validateAction = useMemo2(
+    () => (action) => {
+      const currentState = store.getState();
+      if (currentState.state === "ready") {
+        return true;
+      }
+      const editableIds = currentState.editableComponentIds;
+      if (action.type === "replace") {
+        if (action.data.props.id && editableIds.has(action.data.props.id)) {
+          return true;
+        }
+        return false;
+      }
+      if (action.type === "insert" || action.type === "duplicate") {
+        const zone = action.type === "insert" ? action.destinationZone : action.sourceZone;
+        const parentId = zone == null ? void 0 : zone.split(":")[0];
+        if (parentId && !editableIds.has(parentId)) {
+          return false;
+        }
+        if (action.type === "insert") {
+          const childId = action.id;
+          if (childId) {
+            currentState.addEditableComponentId(childId);
+          }
+        }
+        return true;
+      }
+      if (action.type === "remove" || action.type === "move" || action.type === "reorder") {
+        let parentId;
+        if (action.type === "remove") {
+          parentId = action.zone.split(":")[0];
+        } else if (action.type === "move" || action.type === "reorder") {
+          parentId = action.destinationZone.split(":")[0];
+        }
+        if (parentId && !editableIds.has(parentId)) {
+          return false;
+        }
+        return true;
+      }
+      return true;
+    },
+    [store]
+  );
   useEffect2(() => {
     const unsubscribe = store.subscribe(() => {
       setSoftConfig(store.getState().softConfig);
@@ -2067,7 +2447,33 @@ var SoftConfigProvider = ({
       unsubscribe();
     };
   }, [store]);
-  return /* @__PURE__ */ jsx7(appStoreContext.Provider, { value: store, children: children(softConfig, internalSoftComponents) });
+  useEffect2(() => {
+    const unsubscribe = store.subscribe((state, prevState) => {
+      if (prevState && state.state === prevState.state && state.editableComponentIds === prevState.editableComponentIds) {
+        return;
+      }
+      const doc = store.getState().getIframeDoc();
+      if (!doc) return;
+      if (state.state === "building") {
+        setEditVisibility(doc, { mode: "build", editableIds: state.editableComponentIds });
+        return;
+      }
+      if (state.state === "remodeling") {
+        setEditVisibility(doc, { mode: "remodel", editableIds: state.editableComponentIds });
+        return;
+      }
+      requestAnimationFrame(() => {
+        const freshDoc = store.getState().getIframeDoc();
+        if (freshDoc) {
+          clearEditVisibility(freshDoc);
+        }
+      });
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [store]);
+  return /* @__PURE__ */ jsx7(appStoreContext.Provider, { value: store, children: children(softConfig, internalSoftComponents, storeSetIframeDoc, validateAction) });
 };
 
 // src/puck/actions/useBuild.tsx
@@ -2161,6 +2567,7 @@ var useRemodel = () => {
   const dispatch = useCustomPuck3((s) => s.dispatch);
   const status = useSoftConfig((s) => s.state);
   const softComponents = useSoftConfig((s) => s.softComponents);
+  const refreshPermissions = useCustomPuck3((s) => s.refreshPermissions);
   const { triggerAction } = useActionEvent();
   const handleRemodel = (componentName) => {
     if (status !== "ready") {
@@ -2173,7 +2580,7 @@ var useRemodel = () => {
       return;
     }
     try {
-      remodel(history, selectedItem, itemSelector, dispatch);
+      remodel(history, selectedItem, itemSelector, dispatch, refreshPermissions);
       void triggerAction({
         type: "remodel",
         payload: {
@@ -2202,6 +2609,7 @@ var useComplete = () => {
   const complete = useSoftConfig((s) => s.builder.complete);
   const appState = useCustomPuck4((s) => s.appState);
   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);
@@ -2213,7 +2621,7 @@ var useComplete = () => {
       return null;
     }
     try {
-      const componentName = complete(appState, setHistories);
+      const componentName = complete(appState, setHistories, getItemBySelector);
       setNewComponent(componentName);
       const componentData = appState.data.root;
       const softComponent = (_b = softComponents[componentName]) == null ? void 0 : _b.versions[(_a = softComponents[componentName]) == null ? void 0 : _a.defaultVersion];
@@ -2235,7 +2643,7 @@ var useComplete = () => {
       );
       return null;
     }
-  }, [complete, appState, setHistories, status, softComponents, triggerAction]);
+  }, [complete, appState, setHistories, status, softComponents, triggerAction, getItemBySelector]);
   const canComplete = status === "building" || status === "remodeling";
   return { handleComplete, canComplete, newComponent, setNewComponent };
 };
@@ -2303,7 +2711,7 @@ var useInspect = (componentName) => {
 };
 
 // src/puck/actions/useDecompose.tsx
-import { createUsePuck as createUsePuck7, walkTree as walkTree3 } from "@measured/puck";
+import { createUsePuck as createUsePuck7, walkTree as walkTree4 } from "@measured/puck";
 var useCustomPuck7 = createUsePuck7();
 var useDecompose = () => {
   const decompose = useSoftConfig((s) => s.builder.decompose);
@@ -2335,7 +2743,7 @@ var useDecompose = () => {
         notify.error("Nothing to decompose.");
         return;
       }
-      const newData = walkTree3(appState.data, config, (components) => {
+      const newData = walkTree4(appState.data, config, (components) => {
         const index = components.findIndex((c) => c.props.id === target.props.id);
         if (index !== -1) {
           components.splice(index, 1, ...decomposedComponents);
@@ -2455,9 +2863,9 @@ var useSetDefaultVersion = () => {
 };
 
 // src/puck/overrides/Header.tsx
-import { Button } from "@measured/puck";
+import { Button, createUsePuck as createUsePuck10 } from "@measured/puck";
 
-// css-module:D:\osamuProjects\netlisian\packages\soft-config\src\puck\overrides\Header.module.css#css-module
+// css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/Header.module.css#css-module
 var Header_module_default = { "Header": "_Header_19oj9_1" };
 
 // src/puck/actions/usePublish.tsx
@@ -2498,13 +2906,15 @@ 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
 }) => {
-  const { handleComplete, canComplete, newComponent, setNewComponent } = useComplete();
+  const { handleComplete, newComponent, setNewComponent } = useComplete();
   const { handleCancel, canCancel } = useCancel();
   const { handlePublish } = usePublish();
+  const puck = usePuck((s) => s.config);
   useInspect(newComponent);
   return /* @__PURE__ */ jsx8("div", { className: getClassName2(), children: canCancel ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
     /* @__PURE__ */ jsx8(Button, { onClick: handleCancel, children: "Cancel" }),
@@ -2536,22 +2946,41 @@ var Header = ({
 };
 
 // src/puck/overrides/ActionBar.tsx
-import { ActionBar } from "@measured/puck";
+import { useMemo as useMemo3 } from "react";
+import { ActionBar, createUsePuck as createUsePuck11 } from "@measured/puck";
 import { Combine, ComponentIcon, EditIcon } from "lucide-react";
 
-// css-module:D:\osamuProjects\netlisian\packages\soft-config\src\puck\overrides\ActionBar.module.css#css-module
+// css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/ActionBar.module.css#css-module
 var ActionBar_module_default = { "ActionBar": "_ActionBar_pvuie_5", "ActionBar-label": "_ActionBar-label_pvuie_39", "ActionBar-action": "_ActionBar-action_pvuie_63", "ActionBar-group": "_ActionBar-group_pvuie_79" };
 
 // src/puck/overrides/ActionBar.tsx
+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 ActionBarOverride = (props) => {
-  const { handleBuild, canBuild } = useBuild();
-  const { handleRemodel, canRemodel } = useRemodel();
-  const { handleDecompose, canDecompose } = useDecompose();
-  const softComponents = useSoftConfig((s) => s.softComponents);
+  var _a;
+  const { handleBuild } = useBuild();
+  const { handleRemodel } = useRemodel();
+  const { handleDecompose } = useDecompose();
+  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 status = useSoftConfig((s) => s.state);
-  const isSoftComponent2 = Object.keys(softComponents || {}).includes(props.label);
+  const softKeys = Object.keys(softComponents);
+  const key = useMemo3(() => createComponentKeyFromName(props.label || "", overrides, {
+    existingKeys: softKeys,
+    state: status
+  }), [
+    props.label,
+    overrides,
+    softKeys,
+    status
+  ]);
+  const isSoftComponent2 = softKeys.includes(key);
+  const selectedId = (_a = selectedItem == null ? void 0 : selectedItem.props) == null ? void 0 : _a.id;
+  const isEditable = Boolean(selectedId && editableIds.has(selectedId));
   return /* @__PURE__ */ jsx9("div", { className: getClassName3(), children: /* @__PURE__ */ jsxs3(ActionBar, { children: [
     /* @__PURE__ */ jsxs3(ActionBar.Group, { children: [
       props.parentAction,
@@ -2562,7 +2991,7 @@ var ActionBarOverride = (props) => {
         /* @__PURE__ */ jsx9(
           ActionBar.Action,
           {
-            onClick: () => handleRemodel(props.label),
+            onClick: () => handleRemodel(key),
             label: "Remodel Soft Component",
             children: /* @__PURE__ */ jsx9(EditIcon, { size: 16 })
           }
@@ -2575,15 +3004,22 @@ var ActionBarOverride = (props) => {
             children: /* @__PURE__ */ jsx9(Combine, { size: 16 })
           }
         )
-      ] }) : /* @__PURE__ */ jsx9(ActionBar.Action, { onClick: handleBuild, label: "Build Soft Component", children: /* @__PURE__ */ jsx9(ComponentIcon, { size: 16 }) }) : null,
-      props.children
+      ] }) : /* @__PURE__ */ jsx9(
+        ActionBar.Action,
+        {
+          onClick: handleBuild,
+          label: "Build Soft Component",
+          children: /* @__PURE__ */ jsx9(ComponentIcon, { size: 16 })
+        }
+      ) : null,
+      status !== "ready" && !isEditable ? null : props.children
     ] })
   ] }) });
 };
 
 // src/puck/overrides/ComponentItem.tsx
 import { useState as useState5 } from "react";
-import { Button as Button2, IconButton } from "@measured/puck";
+import { Button as Button2, IconButton, createUsePuck as createUsePuck12 } from "@measured/puck";
 import { GripVertical, Check, X, Trash2, Cog } from "lucide-react";
 
 // src/puck/lib/confirm.ts
@@ -2603,14 +3039,14 @@ var confirm = (message) => __async(null, null, function* () {
   }
 });
 
-// css-module:D:\osamuProjects\netlisian\packages\soft-config\src\puck\overrides\ComponentItem.module.css#css-module
-var ComponentItem_module_default = { "ComponentItem": "_ComponentItem_lp9eh_1", "ComponentItem-content": "_ComponentItem-content_lp9eh_14", "ComponentItem-name": "_ComponentItem-name_lp9eh_24", "ComponentItem-version": "_ComponentItem-version_lp9eh_28", "ComponentItem-actions": "_ComponentItem-actions_lp9eh_33", "ComponentItem-settingsButton": "_ComponentItem-settingsButton_lp9eh_39", "ComponentItem-grip": "_ComponentItem-grip_lp9eh_49", "ComponentItem-modal": "_ComponentItem-modal_lp9eh_56", "ComponentItem-modalHeader": "_ComponentItem-modalHeader_lp9eh_63", "ComponentItem-modalTitle": "_ComponentItem-modalTitle_lp9eh_68", "ComponentItem-modalSubtitle": "_ComponentItem-modalSubtitle_lp9eh_75", "ComponentItem-modalBody": "_ComponentItem-modalBody_lp9eh_81", "ComponentItem-section": "_ComponentItem-section_lp9eh_90", "ComponentItem-sectionTitle": "_ComponentItem-sectionTitle_lp9eh_96", "ComponentItem-sectionDescription": "_ComponentItem-sectionDescription_lp9eh_103", "ComponentItem-versionList": "_ComponentItem-versionList_lp9eh_109", "ComponentItem-versionRow": "_ComponentItem-versionRow_lp9eh_115", "ComponentItem-versionRow--isDefault": "_ComponentItem-versionRow--isDefault_lp9eh_126", "ComponentItem-versionRow--isMarkedForDeletion": "_ComponentItem-versionRow--isMarkedForDeletion_lp9eh_131", "ComponentItem-versionInfo": "_ComponentItem-versionInfo_lp9eh_136", "ComponentItem-versionNumber": "_ComponentItem-versionNumber_lp9eh_143", "ComponentItem-defaultBadge": "_ComponentItem-defaultBadge_lp9eh_149", "ComponentItem-deleteBadge": "_ComponentItem-deleteBadge_lp9eh_160", "ComponentItem-versionActions": "_ComponentItem-versionActions_lp9eh_171", "ComponentItem-migrationOptions": "_ComponentItem-migrationOptions_lp9eh_177", "ComponentItem-select": "_ComponentItem-select_lp9eh_181", "ComponentItem-modalFooter": "_ComponentItem-modalFooter_lp9eh_202", "ComponentItem-footerLeft": "_ComponentItem-footerLeft_lp9eh_211", "ComponentItem-footerRight": "_ComponentItem-footerRight_lp9eh_216" };
+// css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/ComponentItem.module.css#css-module
+var ComponentItem_module_default = { "ComponentItem": "_ComponentItem_1kbi2_1", "ComponentItem--insertDisabled": "_ComponentItem--insertDisabled_1kbi2_14", "ComponentItem-content": "_ComponentItem-content_1kbi2_21", "ComponentItem-name": "_ComponentItem-name_1kbi2_31", "ComponentItem-version": "_ComponentItem-version_1kbi2_35", "ComponentItem-actions": "_ComponentItem-actions_1kbi2_40", "ComponentItem-settingsButton": "_ComponentItem-settingsButton_1kbi2_46", "ComponentItem-grip": "_ComponentItem-grip_1kbi2_56", "ComponentItem-modal": "_ComponentItem-modal_1kbi2_63", "ComponentItem-modalHeader": "_ComponentItem-modalHeader_1kbi2_70", "ComponentItem-modalTitle": "_ComponentItem-modalTitle_1kbi2_75", "ComponentItem-modalSubtitle": "_ComponentItem-modalSubtitle_1kbi2_82", "ComponentItem-modalBody": "_ComponentItem-modalBody_1kbi2_88", "ComponentItem-section": "_ComponentItem-section_1kbi2_97", "ComponentItem-sectionTitle": "_ComponentItem-sectionTitle_1kbi2_103", "ComponentItem-sectionDescription": "_ComponentItem-sectionDescription_1kbi2_110", "ComponentItem-versionList": "_ComponentItem-versionList_1kbi2_116", "ComponentItem-versionRow": "_ComponentItem-versionRow_1kbi2_122", "ComponentItem-versionRow--isDefault": "_ComponentItem-versionRow--isDefault_1kbi2_133", "ComponentItem-versionRow--isMarkedForDeletion": "_ComponentItem-versionRow--isMarkedForDeletion_1kbi2_138", "ComponentItem-versionInfo": "_ComponentItem-versionInfo_1kbi2_143", "ComponentItem-versionNumber": "_ComponentItem-versionNumber_1kbi2_150", "ComponentItem-defaultBadge": "_ComponentItem-defaultBadge_1kbi2_156", "ComponentItem-deleteBadge": "_ComponentItem-deleteBadge_1kbi2_167", "ComponentItem-versionActions": "_ComponentItem-versionActions_1kbi2_178", "ComponentItem-migrationOptions": "_ComponentItem-migrationOptions_1kbi2_184", "ComponentItem-select": "_ComponentItem-select_1kbi2_188", "ComponentItem-modalFooter": "_ComponentItem-modalFooter_1kbi2_209", "ComponentItem-footerLeft": "_ComponentItem-footerLeft_1kbi2_218", "ComponentItem-footerRight": "_ComponentItem-footerRight_1kbi2_223" };
 
 // src/puck/components/modal/index.tsx
 import { useEffect as useEffect4, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
 
-// css-module:D:\osamuProjects\netlisian\packages\soft-config\src\puck\components\modal\styles.module.css#css-module
+// 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" };
 
 // src/puck/components/modal/index.tsx
@@ -2642,12 +3078,18 @@ var Modal = ({
 };
 
 // src/puck/overrides/ComponentItem.tsx
+import { shallow as shallow2 } from "zustand/shallow";
 import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 var getClassName5 = get_class_name_factory_default("ComponentItem", ComponentItem_module_default);
+var usePuck3 = createUsePuck12();
 var ComponentItem = (props) => {
+  const componentMeta = useSoftConfig((s) => s.softComponents[props.name]);
+  const displayName = (componentMeta == null ? void 0 : componentMeta.name) || props.name;
   const softComponents = new Set(
-    Object.keys(useSoftConfig((s) => s.softComponents))
+    Object.keys(useSoftConfig((s) => s.softComponents, shallow2))
   );
+  const getPermissions = usePuck3((s) => s.getPermissions);
+  const insertAllowed = getPermissions({ type: props.name }).insert;
   const removeSoftComponentVersion = useSoftConfig(
     (s) => s.removeSoftComponentVersion
   );
@@ -2660,6 +3102,7 @@ var ComponentItem = (props) => {
     /* @__PURE__ */ new Set()
   );
   const [migrateVersionMap, setMigrateVersionMap] = useState5({});
+  const useVersioning = useSoftConfig((s) => s.showVersionFields);
   const versions = getVersions(props.name);
   const defaultVersion = getDefaultVersion(props.name);
   const handleApply = () => __async(null, null, function* () {
@@ -2704,7 +3147,7 @@ var ComponentItem = (props) => {
   };
   const handleDemolishClick = () => __async(null, null, function* () {
     const confirmed = yield confirm(
-      `Demolish "${props.name}" entirely? This will remove all versions.`
+      `Demolish "${displayName}" entirely? This will remove all versions.`
     );
     if (confirmed) {
       handleDemolish(props.name);
@@ -2717,13 +3160,13 @@ var ComponentItem = (props) => {
       /* @__PURE__ */ jsxs4(
         "div",
         {
-          className: getClassName5(),
+          className: getClassName5({ insertDisabled: !insertAllowed }),
           onMouseEnter: () => setIsHovering(true),
           onMouseLeave: () => setIsHovering(false),
           children: [
             /* @__PURE__ */ jsxs4("div", { className: getClassName5("content"), children: [
-              /* @__PURE__ */ jsx11("div", { className: getClassName5("name"), children: props.name }),
-              /* @__PURE__ */ jsxs4("div", { className: getClassName5("version"), children: [
+              /* @__PURE__ */ jsx11("div", { className: getClassName5("name"), children: displayName }),
+              useVersioning && /* @__PURE__ */ jsxs4("div", { className: getClassName5("version"), children: [
                 "v",
                 defaultVersion
               ] })
@@ -2739,7 +3182,7 @@ var ComponentItem = (props) => {
                     setIsEditing(true);
                     setSelectedVersion(defaultVersion || "");
                   },
-                  children: /* @__PURE__ */ jsx11(Cog, { size: 14 })
+                  children: /* @__PURE__ */ jsx11(Cog, { size: 12 })
                 }
               ) }),
               /* @__PURE__ */ jsx11("div", { className: getClassName5("grip"), children: /* @__PURE__ */ jsx11(GripVertical, { size: 16 }) })
@@ -2749,10 +3192,10 @@ var ComponentItem = (props) => {
       ),
       /* @__PURE__ */ jsx11(Modal, { isOpen: isEditing, onClose: handleCancel, children: /* @__PURE__ */ jsxs4("div", { className: getClassName5("modal"), children: [
         /* @__PURE__ */ jsxs4("div", { className: getClassName5("modalHeader"), children: [
-          /* @__PURE__ */ jsx11("h2", { className: getClassName5("modalTitle"), children: props.name }),
-          /* @__PURE__ */ jsx11("p", { className: getClassName5("modalSubtitle"), children: "Manage versions and settings" })
+          /* @__PURE__ */ jsx11("h2", { className: getClassName5("modalTitle"), children: displayName }),
+          /* @__PURE__ */ jsx11("p", { className: getClassName5("modalSubtitle"), children: "Component Settings" })
         ] }),
-        /* @__PURE__ */ jsxs4("div", { className: getClassName5("modalBody"), children: [
+        /* @__PURE__ */ jsx11("div", { className: getClassName5("modalBody"), children: useVersioning ? /* @__PURE__ */ jsxs4(Fragment5, { children: [
           /* @__PURE__ */ jsxs4("div", { className: getClassName5("section"), children: [
             /* @__PURE__ */ jsx11("h3", { className: getClassName5("sectionTitle"), children: "Versions" }),
             /* @__PURE__ */ jsx11("div", { className: getClassName5("versionList"), children: versions.map((version) => {
@@ -2761,52 +3204,30 @@ var ComponentItem = (props) => {
               let rowClass = getClassName5("versionRow");
               if (isDefault) rowClass += " " + getClassName5("versionRow--isDefault");
               if (isMarkedForDeletion) rowClass += " " + getClassName5("versionRow--isMarkedForDeletion");
-              return /* @__PURE__ */ jsxs4(
-                "div",
-                {
-                  className: rowClass,
-                  children: [
-                    /* @__PURE__ */ jsxs4("div", { className: getClassName5("versionInfo"), children: [
-                      /* @__PURE__ */ jsxs4("span", { className: getClassName5("versionNumber"), children: [
-                        "Version ",
-                        version
-                      ] }),
-                      isDefault && /* @__PURE__ */ jsx11("span", { className: getClassName5("defaultBadge"), children: "Default" }),
-                      isMarkedForDeletion && /* @__PURE__ */ jsx11("span", { className: getClassName5("deleteBadge"), children: "Marked for deletion" })
-                    ] }),
-                    /* @__PURE__ */ jsxs4("div", { className: getClassName5("versionActions"), children: [
-                      !isDefault && !isMarkedForDeletion && /* @__PURE__ */ jsx11(
-                        Button2,
-                        {
-                          variant: "secondary",
-                          onClick: () => setSelectedVersion(version),
-                          children: "Set as Default"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx11(
-                        Button2,
-                        {
-                          variant: isMarkedForDeletion ? "secondary" : "secondary",
-                          onClick: () => toggleVersionForDeletion(version),
-                          children: isMarkedForDeletion ? /* @__PURE__ */ jsxs4(Fragment5, { children: [
-                            /* @__PURE__ */ jsx11(X, { size: 14 }),
-                            "Undo"
-                          ] }) : /* @__PURE__ */ jsxs4(Fragment5, { children: [
-                            /* @__PURE__ */ jsx11(Trash2, { size: 14 }),
-                            "Delete"
-                          ] })
-                        }
-                      )
-                    ] })
-                  ]
-                },
-                version
-              );
+              return /* @__PURE__ */ jsxs4("div", { className: rowClass, children: [
+                /* @__PURE__ */ jsxs4("div", { className: getClassName5("versionInfo"), children: [
+                  /* @__PURE__ */ jsxs4("span", { className: getClassName5("versionNumber"), children: [
+                    "Version ",
+                    version
+                  ] }),
+                  isDefault && /* @__PURE__ */ jsx11("span", { className: getClassName5("defaultBadge"), children: "Default" }),
+                  isMarkedForDeletion && /* @__PURE__ */ jsx11("span", { className: getClassName5("deleteBadge"), children: "Marked for deletion" })
+                ] }),
+                /* @__PURE__ */ jsxs4("div", { className: getClassName5("versionActions"), children: [
+                  !isDefault && !isMarkedForDeletion && /* @__PURE__ */ jsx11(Button2, { variant: "secondary", onClick: () => setSelectedVersion(version), children: "Set as Default" }),
+                  /* @__PURE__ */ jsx11(Button2, { variant: "secondary", onClick: () => toggleVersionForDeletion(version), children: isMarkedForDeletion ? /* @__PURE__ */ jsxs4(Fragment5, { children: [
+                    /* @__PURE__ */ jsx11(X, { size: 14 }),
+                    " Undo"
+                  ] }) : /* @__PURE__ */ jsxs4(Fragment5, { children: [
+                    /* @__PURE__ */ jsx11(Trash2, { size: 14 }),
+                    " Delete"
+                  ] }) })
+                ] })
+              ] }, version);
             }) })
           ] }),
           versionsToDelete.size > 0 && availableVersions.length > 0 && /* @__PURE__ */ jsxs4("div", { className: getClassName5("section"), children: [
             /* @__PURE__ */ jsx11("h3", { className: getClassName5("sectionTitle"), children: "Migration Settings" }),
-            /* @__PURE__ */ jsx11("p", { className: getClassName5("sectionDescription"), children: "Choose what to do with components using deleted versions" }),
             /* @__PURE__ */ jsx11("div", { className: getClassName5("migrationOptions"), children: /* @__PURE__ */ jsxs4(
               "select",
               {
@@ -2829,30 +3250,26 @@ var ComponentItem = (props) => {
               }
             ) })
           ] })
-        ] }),
+        ] }) : /* @__PURE__ */ jsx11("div", { className: getClassName5("section"), children: /* @__PURE__ */ jsxs4("p", { children: [
+          "Manage high-level settings for the ",
+          /* @__PURE__ */ jsx11("strong", { children: displayName }),
+          " component."
+        ] }) }) }),
         /* @__PURE__ */ jsxs4("div", { className: getClassName5("modalFooter"), children: [
           /* @__PURE__ */ jsxs4("div", { className: getClassName5("footerLeft"), children: [
-            /* @__PURE__ */ jsxs4(Button2, { size: "medium", onClick: handleApply, children: [
+            useVersioning ? /* @__PURE__ */ jsxs4(Button2, { size: "medium", onClick: handleApply, children: [
               /* @__PURE__ */ jsx11(Check, { size: 16 }),
-              "Apply Changes"
-            ] }),
-            /* @__PURE__ */ jsxs4(Button2, { size: "medium", variant: "secondary", onClick: handleCancel, children: [
+              " Apply Changes"
+            ] }) : /* @__PURE__ */ jsx11(Button2, { size: "medium", onClick: handleCancel, children: "Close" }),
+            useVersioning && /* @__PURE__ */ jsxs4(Button2, { size: "medium", variant: "secondary", onClick: handleCancel, children: [
               /* @__PURE__ */ jsx11(X, { size: 16 }),
-              "Cancel"
+              " Cancel"
             ] })
           ] }),
-          /* @__PURE__ */ jsx11("div", { className: getClassName5("footerRight"), children: /* @__PURE__ */ jsxs4(
-            Button2,
-            {
-              size: "medium",
-              variant: "secondary",
-              onClick: handleDemolishClick,
-              children: [
-                /* @__PURE__ */ jsx11(Trash2, { size: 16 }),
-                "Demolish Component"
-              ]
-            }
-          ) })
+          /* @__PURE__ */ jsx11("div", { className: getClassName5("footerRight"), children: /* @__PURE__ */ jsxs4(Button2, { size: "medium", variant: "secondary", onClick: handleDemolishClick, children: [
+            /* @__PURE__ */ jsx11(Trash2, { size: 16 }),
+            " Demolish Component"
+          ] }) })
         ] })
       ] }) })
     ] });
@@ -2860,6 +3277,27 @@ var ComponentItem = (props) => {
   return /* @__PURE__ */ jsx11(Fragment5, { children: props.children });
 };
 
+// src/puck/lib/action-callback.ts
+var createActionCallback = (validateAction, undo) => {
+  return (action) => {
+    const isValid = validateAction(action);
+    if (!isValid) {
+      notify.error(
+        "Editing outside the soft component is not allowed when you are editing component definition."
+      );
+      if (typeof requestAnimationFrame === "function") {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            undo();
+          });
+        });
+      } else {
+        setTimeout(() => undo(), 0);
+      }
+    }
+  };
+};
+
 // src/puck/lib/dissolve-all-soft-components.ts
 function extractDependencies2(softComponents, componentName, version) {
   var _a, _b;
@@ -3068,6 +3506,7 @@ export {
   Modal,
   SoftConfigProvider,
   confirm,
+  createActionCallback,
   createSoftConfigStore,
   createUseSoftConfig,
   notify,