@netlisian/softconfig 0.0.11 → 0.1.1

package/dist/puck/index.css

@@ -1,5 +1,4 @@
-/* css-module:D:osamuProjects
-etlisianpackagessoft-configsrcpuckcomponentserror-boundarystyles.module.css\#css-module-data */
+/* css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/components/error-boundary/styles.module.css/#css-module-data */
 ._ErrorBoundary_1xl05_5 {
   padding: 20px;
   border: 1px solid #ff5858;
@@ -27,8 +26,7 @@ etlisianpackagessoft-configsrcpuckcomponentserror-boundarystyles.module.css\#css
   background-color: #b71c1c;
 }
 
-/* css-module:D:osamuProjects
-etlisianpackagessoft-configsrcpuckoverridesHeader.module.css\#css-module-data */
+/* css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/Header.module.css/#css-module-data */
 ._Header_19oj9_1 {
   display: flex;
   justify-content: space-between;
@@ -37,8 +35,7 @@ etlisianpackagessoft-configsrcpuckoverridesHeader.module.css\#css-module-data */
   flex-wrap: wrap;
 }
 
-/* css-module:D:osamuProjects
-etlisianpackagessoft-configsrcpuckoverridesActionBar.module.css\#css-module-data */
+/* css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/ActionBar.module.css/#css-module-data */
 ._ActionBar_pvuie_5 {
   align-items: center;
   cursor: default;
@@ -122,9 +119,8 @@ etlisianpackagessoft-configsrcpuckoverridesActionBar.module.css\#css-module-data
   margin: 0;
 }
 
-/* css-module:D:osamuProjects
-etlisianpackagessoft-configsrcpuckoverridesComponentItem.module.css\#css-module-data */
-._ComponentItem_lp9eh_1 {
+/* css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/ComponentItem.module.css/#css-module-data */
+._ComponentItem_1kbi2_1 {
   background: var(--puck-color-white);
   cursor: grab;
   border: 1px solid var(--puck-color-grey-09);
@@ -136,7 +132,13 @@ etlisianpackagessoft-configsrcpuckoverridesComponentItem.module.css\#css-module-
   transition: background-color 50ms ease-in, color 50ms ease-in;
   display: flex;
 }
-._ComponentItem-content_lp9eh_14 {
+._ComponentItem--insertDisabled_1kbi2_14 {
+  cursor: not-allowed;
+  color: var(--puck-color-grey-5);
+  background: var(--puck-color-grey-11);
+  pointer-events: none;
+}
+._ComponentItem-content_1kbi2_21 {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -145,53 +147,53 @@ etlisianpackagessoft-configsrcpuckoverridesComponentItem.module.css\#css-module-
   white-space: nowrap;
   overflow-x: hidden;
 }
-._ComponentItem-name_lp9eh_24 {
-  font-weight: 500;
+._ComponentItem-name_1kbi2_31 {
+  font-weight: 400;
 }
-._ComponentItem-version_lp9eh_28 {
+._ComponentItem-version_1kbi2_35 {
   font-size: 10px;
   color: var(--puck-color-grey-05);
 }
-._ComponentItem-actions_lp9eh_33 {
+._ComponentItem-actions_1kbi2_40 {
   display: flex;
   align-items: center;
   gap: 8px;
 }
-._ComponentItem-settingsButton_lp9eh_39 {
+._ComponentItem-settingsButton_1kbi2_46 {
   opacity: 0;
   transition: opacity 120ms ease;
   color: var(--puck-color-grey-05);
 }
-._ComponentItem_lp9eh_1:hover ._ComponentItem-settingsButton_lp9eh_39 {
+._ComponentItem_1kbi2_1:hover ._ComponentItem-settingsButton_1kbi2_46 {
   opacity: 1;
 }
-._ComponentItem-grip_lp9eh_49 {
+._ComponentItem-grip_1kbi2_56 {
   color: var(--puck-color-grey-05);
   display: flex;
   align-items: center;
 }
-._ComponentItem-modal_lp9eh_56 {
+._ComponentItem-modal_1kbi2_63 {
   background: var(--puck-color-white);
   display: flex;
   flex-direction: column;
   height: 100%;
 }
-._ComponentItem-modalHeader_lp9eh_63 {
+._ComponentItem-modalHeader_1kbi2_70 {
   padding: 24px 32px;
   border-bottom: 1px solid var(--puck-color-grey-09);
 }
-._ComponentItem-modalTitle_lp9eh_68 {
+._ComponentItem-modalTitle_1kbi2_75 {
   margin: 0 0 4px 0;
   font-size: 24px;
   font-weight: 600;
   color: var(--puck-color-black);
 }
-._ComponentItem-modalSubtitle_lp9eh_75 {
+._ComponentItem-modalSubtitle_1kbi2_82 {
   margin: 0;
   font-size: 14px;
   color: var(--puck-color-grey-04);
 }
-._ComponentItem-modalBody_lp9eh_81 {
+._ComponentItem-modalBody_1kbi2_88 {
   flex: 1;
   padding: 32px;
   overflow-y: auto;
@@ -199,28 +201,28 @@ etlisianpackagessoft-configsrcpuckoverridesComponentItem.module.css\#css-module-
   flex-direction: column;
   gap: 32px;
 }
-._ComponentItem-section_lp9eh_90 {
+._ComponentItem-section_1kbi2_97 {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
-._ComponentItem-sectionTitle_lp9eh_96 {
+._ComponentItem-sectionTitle_1kbi2_103 {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
   color: var(--puck-color-black);
 }
-._ComponentItem-sectionDescription_lp9eh_103 {
+._ComponentItem-sectionDescription_1kbi2_110 {
   margin: 0;
   font-size: 14px;
   color: var(--puck-color-grey-04);
 }
-._ComponentItem-versionList_lp9eh_109 {
+._ComponentItem-versionList_1kbi2_116 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._ComponentItem-versionRow_lp9eh_115 {
+._ComponentItem-versionRow_1kbi2_122 {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -230,26 +232,26 @@ etlisianpackagessoft-configsrcpuckoverridesComponentItem.module.css\#css-module-
   background: var(--puck-color-white);
   transition: all 150ms ease;
 }
-._ComponentItem-versionRow--isDefault_lp9eh_126 {
+._ComponentItem-versionRow--isDefault_1kbi2_133 {
   border-color: var(--puck-color-azure-07);
   background: var(--puck-color-azure-10);
 }
-._ComponentItem-versionRow--isMarkedForDeletion_lp9eh_131 {
+._ComponentItem-versionRow--isMarkedForDeletion_1kbi2_138 {
   opacity: 0.6;
   background: var(--puck-color-grey-11);
 }
-._ComponentItem-versionInfo_lp9eh_136 {
+._ComponentItem-versionInfo_1kbi2_143 {
   display: flex;
   align-items: center;
   gap: 12px;
   flex: 1;
 }
-._ComponentItem-versionNumber_lp9eh_143 {
+._ComponentItem-versionNumber_1kbi2_150 {
   font-size: 14px;
   font-weight: 500;
   color: var(--puck-color-black);
 }
-._ComponentItem-defaultBadge_lp9eh_149 {
+._ComponentItem-defaultBadge_1kbi2_156 {
   font-size: 11px;
   padding: 3px 8px;
   border-radius: 4px;
@@ -259,7 +261,7 @@ etlisianpackagessoft-configsrcpuckoverridesComponentItem.module.css\#css-module-
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
-._ComponentItem-deleteBadge_lp9eh_160 {
+._ComponentItem-deleteBadge_1kbi2_167 {
   font-size: 11px;
   padding: 3px 8px;
   border-radius: 4px;
@@ -269,15 +271,15 @@ etlisianpackagessoft-configsrcpuckoverridesComponentItem.module.css\#css-module-
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
-._ComponentItem-versionActions_lp9eh_171 {
+._ComponentItem-versionActions_1kbi2_178 {
   display: flex;
   gap: 8px;
   align-items: center;
 }
-._ComponentItem-migrationOptions_lp9eh_177 {
+._ComponentItem-migrationOptions_1kbi2_184 {
   width: 100%;
 }
-._ComponentItem-select_lp9eh_181 {
+._ComponentItem-select_1kbi2_188 {
   width: 100%;
   padding: 10px 12px;
   border: 1px solid var(--puck-color-grey-09);
@@ -288,14 +290,14 @@ etlisianpackagessoft-configsrcpuckoverridesComponentItem.module.css\#css-module-
   cursor: pointer;
   transition: border-color 150ms ease;
 }
-._ComponentItem-select_lp9eh_181:hover {
+._ComponentItem-select_1kbi2_188:hover {
   border-color: var(--puck-color-grey-07);
 }
-._ComponentItem-select_lp9eh_181:focus {
+._ComponentItem-select_1kbi2_188:focus {
   outline: none;
   border-color: var(--puck-color-azure-07);
 }
-._ComponentItem-modalFooter_lp9eh_202 {
+._ComponentItem-modalFooter_1kbi2_209 {
   padding: 20px 32px;
   border-top: 1px solid var(--puck-color-grey-09);
   display: flex;
@@ -303,17 +305,16 @@ etlisianpackagessoft-configsrcpuckoverridesComponentItem.module.css\#css-module-
   align-items: center;
   background: var(--puck-color-grey-11);
 }
-._ComponentItem-footerLeft_lp9eh_211 {
+._ComponentItem-footerLeft_1kbi2_218 {
   display: flex;
   gap: 12px;
 }
-._ComponentItem-footerRight_lp9eh_216 {
+._ComponentItem-footerRight_1kbi2_223 {
   display: flex;
   gap: 12px;
 }
 
-/* css-module:D:osamuProjects
-etlisianpackagessoft-configsrcpuckcomponentsmodalstyles.module.css\#css-module-data */
+/* css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/components/modal/styles.module.css/#css-module-data */
 ._Modal_pvj02_1 {
   background: color-mix(in srgb, var(--puck-color-black) 75%, transparent);
   display: none;

package/dist/puck/index.d.mts

@@ -1,6 +1,6 @@
 import * as zustand from 'zustand';
 import { StoreApi } from 'zustand';
-import { History, AppState, PuckApi, ComponentConfig, ComponentData, DefaultComponentProps, Field, Config, Fields, Data } from '@measured/puck';
+import { History, AppState, PuckApi, ComponentData, ComponentConfig, DefaultComponentProps, Field, Config, Fields, RootData, AsFieldProps, WithChildren, Metadata, ResolveDataTrigger, PuckAction, Data } from '@measured/puck';
 import * as react from 'react';
 import react__default, { ReactNode, ReactElement } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -21,7 +21,7 @@ type BuildersSlice = {
     build: (history: History<AppState>[], selectedItem: PuckApi["selectedItem"], itemSelector: {
         index: number;
         zone?: string;
-    } | null, puckDispatch: PuckApi["dispatch"]) => void | null;
+    } | null, puckDispatch: PuckApi["dispatch"], name?: string) => void | null;
     /**
      * Remodel the selected soft component by decomposing it and resetting as root.
      *
@@ -38,7 +38,7 @@ type BuildersSlice = {
     remodel: (history: History<AppState>[], selectedItem: PuckApi["selectedItem"], itemSelector: {
         index: number;
         zone?: string;
-    } | null, puckDispatch: PuckApi["dispatch"]) => void;
+    } | null, puckDispatch: PuckApi["dispatch"], refreshPermission: () => void) => void;
     /**
      * Switch to a different version of the soft component being remodeled.
      *
@@ -61,7 +61,7 @@ type BuildersSlice = {
      *    - Strip the build settings fields
      *    - Apply modified history to puck data.
      */
-    complete: (appState: AppState<any>, setHistories: PuckApi["history"]["setHistories"]) => string;
+    complete: (appState: AppState<any>, setHistories: PuckApi["history"]["setHistories"], getItemBySelector: PuckApi["getItemBySelector"]) => string;
     demolish: (componentName: string, data: AppState["data"], puckDispatch: PuckApi["dispatch"]) => void;
     inspect: (componentName: string, puckDispatch: PuckApi["dispatch"]) => void;
     /**
@@ -77,7 +77,7 @@ type BuildersSlice = {
     /** Compose multiple components into a soft component.
      * 1. SoftComponent: Get soft fields + default values from the appState.root + sub-component maps + fixedProps
      */
-    compose: (appState: AppState, componentName: string) => [ComponentConfig, string] | undefined;
+    compose: (appState: AppState, componentName: string, editedItem: ComponentData, displayName: string, category?: string) => [ComponentConfig, string] | undefined;
     /** Break down a composed component into its parts.
      * 1. Get softComponentProps
      * 2. Create a virtual component with all the props from soft-component.
@@ -88,6 +88,7 @@ type BuildersSlice = {
 
 type BuilderRootConfig = {
     _name: string;
+    _category?: string;
     _version?: string;
     _versions?: string[];
     _fields?: {
@@ -125,6 +126,8 @@ type SoftSubComponent = {
     }[];
 }[];
 type SoftComponent = {
+    name: string;
+    category?: string;
     fields: Fields;
     fieldSettings?: Record<string, any>;
     defaultProps: DefaultComponentProps;
@@ -135,6 +138,8 @@ type SoftComponent = {
 };
 type VersionedSoftComponent = {
     defaultVersion: string;
+    name: string;
+    category?: string;
     versions: {
         [version: string]: {
             fields: Fields;
@@ -146,6 +151,13 @@ type VersionedSoftComponent = {
             };
         };
     };
+    /**
+     * Dependencies map: version -> Set of component names this component depends on
+     * Automatically inferred from component structure but can be overridden
+     */
+    dependencies?: {
+        [version: string]: Set<string>;
+    };
 };
 type SoftComponents = Record<string, VersionedSoftComponent>;
 
@@ -163,8 +175,8 @@ type ActionEventPayload = {
     type: "complete";
     payload: {
         id: string;
-        componentData: DefaultComponentProps;
-        softComponent: SoftComponent;
+        componentData: Record<string, any>;
+        softComponent: VersionedSoftComponent["versions"][string];
     };
 } | {
     type: "cancel";
@@ -205,6 +217,10 @@ type RenderFunc<Props extends {
     children: ReactNode;
 }> = (props: Props) => ReactElement;
 type Overrides = {
+    componentNameToKey?: (displayName: string, context: {
+        existingKeys: string[];
+        state: "building" | "remodeling" | "ready" | "inspecting";
+    }) => string;
     map?: RenderFunc<{
         rootProps: BuilderRootConfig;
         toOptions: {
@@ -229,6 +245,16 @@ type Overrides = {
         softComponent: VersionedSoftComponent["versions"][string];
     }) => ((inputs: any[], props: DefaultComponentProps) => any) | undefined;
     onActions?: OnActionsCallback;
+    name?: Field<string>;
+    categories?: Field<string | undefined>;
+    onRootsDataChange?: (data: RootData<AsFieldProps<WithChildren<BuilderRootConfig>>>, params: {
+        changed: Partial<Record<keyof BuilderRootConfig, boolean> & {
+            id: string;
+        }>;
+        lastData: RootData<AsFieldProps<WithChildren<BuilderRootConfig>>> | null;
+        metadata: Metadata;
+        trigger: ResolveDataTrigger;
+    }) => void;
 };
 
 type Status = "building" | "remodeling" | "ready" | "inspecting";
@@ -269,9 +295,50 @@ type AppStore = {
     hydrateTransforms: () => void;
     setSoftComponentDefaultVersion: (key: string, version: string) => void;
     removeSoftComponent: (key: string) => void;
+    editingComponentId: string | null;
+    editableComponentIds: Set<string>;
+    setEditableComponentIds: (ids: Set<string>) => void;
+    addEditableComponentId: (id: string) => void;
+    clearEditingState: () => void;
+    /**
+     * Reverse dependency graph: componentName -> Set of components that depend on it
+     * Used to efficiently rebuild dependent components when a soft component is updated
+     */
+    dependencyGraph: Map<string, Set<string>>;
+    /**
+     * Rebuild all dependent components after a soft component is updated
+     * Only rebuilds components that depend on the changed component
+     *
+     * @param componentName - The component that was updated
+     * @param version - The version that was updated
+     */
+    rebuildDependents: (componentName: string, version: string) => void;
+    /**
+     * Iframe document reference for applying styling and edit visibility
+     * Stored as a mutable ref to avoid triggering store updates.
+     */
+    iframeDocRef: {
+        current: Document | null;
+    };
+    /**
+     * Get the current iframe document reference
+     */
+    getIframeDoc: () => Document | null;
+    /**
+     * Set the iframe document reference without causing re-renders
+     */
+    setIframeDoc: (doc: Document | null) => void;
+    /**
+     * Flag to control visibility of version config fields
+     */
+    showVersionFields: boolean;
+    /**
+     * Toggle the visibility of version config fields
+     */
+    setShowVersionFields: (show: boolean) => void;
 };
 type AppStoreApi = StoreApi<AppStore>;
-declare const createSoftConfigStore: (hardConfig?: Config, softComponents?: SoftComponents, overrides?: Overrides, onActions?: OnActionsCallback) => zustand.UseBoundStore<Omit<Omit<StoreApi<AppStore>, "subscribe"> & {
+declare const createSoftConfigStore: (hardConfig?: Config, softComponents?: SoftComponents, overrides?: Overrides, onActions?: OnActionsCallback, showVersionFields?: boolean) => zustand.UseBoundStore<Omit<StoreApi<AppStore>, "subscribe"> & {
     subscribe: {
         (listener: (selectedState: AppStore, previousSelectedState: AppStore) => void): () => void;
         <U>(selector: (state: AppStore) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
@@ -279,35 +346,20 @@ declare const createSoftConfigStore: (hardConfig?: Config, softComponents?: Soft
             fireImmediately?: boolean;
         } | undefined): () => void;
     };
-}, "setState" | "devtools"> & {
-    setState(partial: AppStore | Partial<AppStore> | ((state: AppStore) => AppStore | Partial<AppStore>), replace?: false | undefined, action?: (string | {
-        [x: string]: unknown;
-        [x: number]: unknown;
-        [x: symbol]: unknown;
-        type: string;
-    }) | undefined): void;
-    setState(state: AppStore | ((state: AppStore) => AppStore), replace: true, action?: (string | {
-        [x: string]: unknown;
-        [x: number]: unknown;
-        [x: symbol]: unknown;
-        type: string;
-    }) | undefined): void;
-    devtools: {
-        cleanup: () => void;
-    };
 }>;
 
-declare const SoftConfigProvider: ({ children, hardConfig, softComponents, overrides, value, onActions, }: {
-    children: (softConfig: Config, softComponents: SoftComponents) => ReactNode;
+declare const SoftConfigProvider: ({ children, hardConfig, softComponents, overrides, value, onActions, useVersioning, }: {
+    children: (softConfig: Config, softComponents: SoftComponents, iframeDoc: AppStore["setIframeDoc"], validateAction: (action: PuckAction) => boolean) => ReactNode;
     hardConfig: Config;
     softComponents: SoftComponents;
-    overrides: Overrides;
+    overrides?: Overrides;
     value?: StoreApi<AppStore>;
     onActions?: OnActionsCallback;
+    useVersioning?: boolean;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const createUseSoftConfig: () => <T>(selector: (state: AppStore) => T) => T;
-declare const useSoftConfig: <T>(selector: (state: AppStore) => T) => T;
+declare const createUseSoftConfig: () => <T>(selector: (state: AppStore) => T, equalityFn?: (a: T, b: T) => boolean) => T;
+declare const useSoftConfig: <T>(selector: (state: AppStore) => T, equalityFn?: (a: T, b: T) => boolean) => T;
 
 declare const useBuild: () => {
     handleBuild: () => void;
@@ -386,6 +438,15 @@ declare const setConfirmHandler: (handler: ConfirmHandler) => void;
  */
 declare const confirm: (message: string) => Promise<boolean>;
 
+/**
+ * Create an action callback that validates and handles actions with undo support
+ *
+ * @param validateAction Function to validate if an action is allowed
+ * @param undo Function to undo the last action (from Puck's history)
+ * @returns Action handler function
+ */
+declare const createActionCallback: (validateAction: (action: PuckAction) => boolean, undo: PuckApi["history"]["back"]) => (action: PuckAction) => void;
+
 /**
  * Resolves soft components in data by dissolving them to hard components only.
  *
@@ -411,4 +472,4 @@ declare const Modal: ({ children, onClose, isOpen, }: {
     isOpen: boolean;
 }) => react_jsx_runtime.JSX.Element;
 
-export { ActionBarOverride as ActionBar, type ActionEventPayload, type AppStore, type AppStoreApi, type BuilderComponentConfig, type BuilderConfig, type BuilderRootConfig, ComponentItem, Header, Modal, type OnActionsCallback, type Overrides, type SoftComponent, type SoftComponents, SoftConfigProvider, type VersionedSoftComponent, confirm, createSoftConfigStore, createUseSoftConfig, notify, resolveSoftConfig, setConfirmHandler, setNotificationHandler, useBuild, useCancel, useComplete, useDecompose, useDemolish, useInspect, useRemodel, useSetDefaultVersion, useSoftConfig };
+export { ActionBarOverride as ActionBar, type ActionEventPayload, type AppStore, type AppStoreApi, type BuilderComponentConfig, type BuilderConfig, type BuilderRootConfig, ComponentItem, Header, Modal, type OnActionsCallback, type Overrides, type SoftComponent, type SoftComponents, SoftConfigProvider, type VersionedSoftComponent, confirm, createActionCallback, createSoftConfigStore, createUseSoftConfig, notify, resolveSoftConfig, setConfirmHandler, setNotificationHandler, useBuild, useCancel, useComplete, useDecompose, useDemolish, useInspect, useRemodel, useSetDefaultVersion, useSoftConfig };