@netlisian/softconfig 0.1.2 → 0.1.4

package/README.md

@@ -61,6 +61,56 @@ import "@netlisian/softconfig/styles.css";
 
 You can supply custom overrides (action bar, headers, map UI, etc.) through the `overrides` prop. See `src/puck/types/Overrides.ts` for the full surface.
 
+## Action Lifecycle Events
+
+`SoftConfigProvider` supports `onActions` for lifecycle callbacks:
+
+- `build` → when build mode starts
+- `remodel` → when remodel mode starts
+- `complete` → when a build/remodel is finalized
+- `inspect` → when inspect is requested
+- `demolish` → when a soft component is deleted
+- `setDefaultVersion`, `decompose`, `cancel`, `publish`
+
+Version-aware payloads are included for build finalization and inspection flows:
+
+```ts
+type ActionEventPayload =
+  | {
+      type: "remodel";
+      payload: {
+        id: string;
+        version?: string;
+        softComponent?: VersionedSoftComponent["versions"][string];
+      };
+    }
+  | {
+      type: "complete";
+      payload: {
+        id: string;
+        version: string;
+        componentData: Record<string, any>;
+        softComponent: VersionedSoftComponent["versions"][string];
+      };
+    }
+  | {
+      type: "inspect";
+      payload: {
+        id: string;
+        version?: string;
+        softComponent?: VersionedSoftComponent["versions"][string];
+      };
+    }
+  | {
+      type: "demolish";
+      payload: {
+        id: string;
+      };
+    };
+```
+
+This contract allows downstream consumers (for example, save/sync bridges) to persist using exact version metadata without relying on inferred/default versions.
+
 ## Development
 
 - Build: `pnpm --filter @netlisian/softconfig build`

package/dist/puck/index.css

@@ -120,7 +120,7 @@
 }
 
 /* css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/DrawerItem.module.css/#css-module-data */
-._DrawerItem_29z19_1 {
+._DrawerItem_182aj_1 {
   background: var(--puck-color-white);
   cursor: grab;
   border: 1px solid var(--puck-color-grey-09);
@@ -132,13 +132,13 @@
   transition: background-color 50ms ease-in, color 50ms ease-in;
   display: flex;
 }
-._DrawerItem--insertDisabled_29z19_14 {
+._DrawerItem--insertDisabled_182aj_14 {
   cursor: not-allowed;
   color: var(--puck-color-grey-5);
   background: var(--puck-color-grey-11);
   pointer-events: none;
 }
-._DrawerItem-content_29z19_21 {
+._DrawerItem-content_182aj_21 {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -147,82 +147,85 @@
   white-space: nowrap;
   overflow-x: hidden;
 }
-._DrawerItem-name_29z19_31 {
+._DrawerItem-name_182aj_31 {
   font-weight: 400;
 }
-._DrawerItem-version_29z19_35 {
+._DrawerItem-version_182aj_35 {
   font-size: 10px;
   color: var(--puck-color-grey-05);
 }
-._DrawerItem-actions_29z19_40 {
+._DrawerItem-actions_182aj_40 {
   display: flex;
   align-items: center;
   gap: 8px;
 }
-._DrawerItem-settingsButton_29z19_46 {
+._DrawerItem-settingsButton_182aj_46 {
   opacity: 0;
   transition: opacity 120ms ease;
   color: var(--puck-color-grey-05);
 }
-._DrawerItem_29z19_1:hover ._DrawerItem-settingsButton_29z19_46 {
+._DrawerItem_182aj_1:hover ._DrawerItem-settingsButton_182aj_46 {
   opacity: 1;
 }
-._DrawerItem-grip_29z19_56 {
+._DrawerItem-grip_182aj_56 {
   color: var(--puck-color-grey-05);
   display: flex;
   align-items: center;
 }
-._DrawerItem-modal_29z19_63 {
+._DrawerItem-modal_182aj_63 {
   background: var(--puck-color-white);
   display: flex;
   flex-direction: column;
-  height: 100%;
+  height: min(90dvh, 100%);
+  min-height: 0;
 }
-._DrawerItem-modalHeader_29z19_70 {
+._DrawerItem-modalHeader_182aj_71 {
   padding: 24px 32px;
   border-bottom: 1px solid var(--puck-color-grey-09);
+  flex-shrink: 0;
 }
-._DrawerItem-modalTitle_29z19_75 {
+._DrawerItem-modalTitle_182aj_77 {
   margin: 0 0 4px 0;
   font-size: 24px;
   font-weight: 600;
   color: var(--puck-color-black);
 }
-._DrawerItem-modalSubtitle_29z19_82 {
+._DrawerItem-modalSubtitle_182aj_84 {
   margin: 0;
   font-size: 14px;
   color: var(--puck-color-grey-04);
 }
-._DrawerItem-modalBody_29z19_88 {
+._DrawerItem-modalBody_182aj_90 {
   flex: 1;
+  min-height: 0;
   padding: 32px;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 32px;
 }
-._DrawerItem-section_29z19_97 {
+._DrawerItem-section_182aj_100 {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
-._DrawerItem-sectionTitle_29z19_103 {
+._DrawerItem-sectionTitle_182aj_106 {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
   color: var(--puck-color-black);
 }
-._DrawerItem-sectionDescription_29z19_110 {
+._DrawerItem-sectionDescription_182aj_113 {
   margin: 0;
   font-size: 14px;
   color: var(--puck-color-grey-04);
 }
-._DrawerItem-versionList_29z19_116 {
+._DrawerItem-versionList_182aj_119 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._DrawerItem-versionRow_29z19_122 {
+._DrawerItem-versionRow_182aj_125 {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -232,26 +235,26 @@
   background: var(--puck-color-white);
   transition: all 150ms ease;
 }
-._DrawerItem-versionRow--isDefault_29z19_133 {
+._DrawerItem-versionRow--isDefault_182aj_136 {
   border-color: var(--puck-color-azure-07);
   background: var(--puck-color-azure-10);
 }
-._DrawerItem-versionRow--isMarkedForDeletion_29z19_138 {
+._DrawerItem-versionRow--isMarkedForDeletion_182aj_141 {
   opacity: 0.6;
   background: var(--puck-color-grey-11);
 }
-._DrawerItem-versionInfo_29z19_143 {
+._DrawerItem-versionInfo_182aj_146 {
   display: flex;
   align-items: center;
   gap: 12px;
   flex: 1;
 }
-._DrawerItem-versionNumber_29z19_150 {
+._DrawerItem-versionNumber_182aj_153 {
   font-size: 14px;
   font-weight: 500;
   color: var(--puck-color-black);
 }
-._DrawerItem-defaultBadge_29z19_156 {
+._DrawerItem-defaultBadge_182aj_159 {
   font-size: 11px;
   padding: 3px 8px;
   border-radius: 4px;
@@ -261,7 +264,7 @@
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
-._DrawerItem-deleteBadge_29z19_167 {
+._DrawerItem-deleteBadge_182aj_170 {
   font-size: 11px;
   padding: 3px 8px;
   border-radius: 4px;
@@ -271,15 +274,26 @@
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
-._DrawerItem-versionActions_29z19_178 {
+._DrawerItem-versionActions_182aj_181 {
   display: flex;
   gap: 8px;
   align-items: center;
 }
-._DrawerItem-migrationOptions_29z19_184 {
+._DrawerItem-migrationOptions_182aj_187 {
   width: 100%;
 }
-._DrawerItem-select_29z19_188 {
+._DrawerItem-migrationList_182aj_191 {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 180px;
+  overflow-y: auto;
+  padding: 8px;
+  border: 1px solid var(--puck-color-grey-09);
+  border-radius: 6px;
+  background: var(--puck-color-white);
+}
+._DrawerItem-migrationOption_182aj_187 {
   width: 100%;
   padding: 10px 12px;
   border: 1px solid var(--puck-color-grey-09);
@@ -289,33 +303,48 @@
   color: var(--puck-color-black);
   cursor: pointer;
   transition: border-color 150ms ease;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  text-align: start;
 }
-._DrawerItem-select_29z19_188:hover {
+._DrawerItem-migrationOption_182aj_187:hover {
   border-color: var(--puck-color-grey-07);
 }
-._DrawerItem-select_29z19_188:focus {
+._DrawerItem-migrationOption_182aj_187:focus {
   outline: none;
   border-color: var(--puck-color-azure-07);
 }
-._DrawerItem-modalFooter_29z19_209 {
+._DrawerItem-migrationOption--isSelected_182aj_229 {
+  border-color: var(--puck-color-azure-07);
+  background: var(--puck-color-azure-10);
+}
+._DrawerItem-migrationOptionLabel_182aj_234 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+._DrawerItem-modalFooter_182aj_240 {
   padding: 20px 32px;
   border-top: 1px solid var(--puck-color-grey-09);
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: var(--puck-color-grey-11);
+  flex-shrink: 0;
 }
-._DrawerItem-footerLeft_29z19_218 {
+._DrawerItem-footerLeft_182aj_250 {
   display: flex;
   gap: 12px;
 }
-._DrawerItem-footerRight_29z19_223 {
+._DrawerItem-footerRight_182aj_255 {
   display: flex;
   gap: 12px;
 }
 
 /* css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/components/modal/styles.module.css/#css-module-data */
-._Modal_pvj02_1 {
+._Modal_1t9ot_1 {
   background: color-mix(in srgb, var(--puck-color-black) 75%, transparent);
   display: none;
   justify-content: center;
@@ -325,21 +354,22 @@
   left: 0;
   bottom: 0;
   right: 0;
-  z-index: 1;
+  z-index: 1000;
   padding: 32px;
 }
-._Modal--isOpen_pvj02_29 {
+._Modal--isOpen_1t9ot_29 {
   display: flex;
 }
-._Modal-inner_pvj02_37 {
+._Modal-inner_1t9ot_37 {
   width: 100%;
   max-width: 1024px;
   border-radius: 8px;
-  overflow: hidden;
+  overflow: visible;
   background: var(--puck-color-white);
   display: flex;
   flex-direction: column;
   max-height: 90dvh;
+  min-height: 0;
 }
 
 /* css-module:/media/manual_mount/osamuProjects/netlisian/packages/soft-config/src/puck/overrides/Drawer.module.css/#css-module-data */

package/dist/puck/index.d.mts

@@ -1,10 +1,94 @@
 import * as zustand from 'zustand';
 import { StoreApi } from 'zustand';
-import { History, AppState, PuckApi, ComponentData, ComponentConfig, DefaultComponentProps, Field, Config, Fields, RootData, AsFieldProps, WithChildren, Metadata, ResolveDataTrigger, PuckAction, Data } from '@measured/puck';
+import * as _measured_puck from '@measured/puck';
+import { DefaultComponentProps, Field, Config, Fields, History, AppState, PuckApi, ComponentData, ComponentConfig, RootData, AsFieldProps, WithChildren, Metadata, ResolveDataTrigger, PuckAction, Data } from '@measured/puck';
 import * as React$1 from 'react';
 import React__default, { ReactNode, ReactElement } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+type BuilderRootConfig = {
+    _name: string;
+    _category?: string;
+    _version?: string;
+    _versions?: string[];
+    _fields?: {
+        name: string;
+        type: Field["type"];
+    }[];
+    _fieldSettings?: {
+        [key: string]: any;
+    };
+    [key: string]: any;
+};
+type BuilderComponentConfig = {
+    _slot?: {
+        slot: string;
+    }[];
+    _map?: {
+        to: string | string[];
+        from: string | string[];
+        transform?: (inputs: any[], props: DefaultComponentProps) => any;
+        [key: string]: any;
+    }[];
+    [key: string]: any;
+};
+type BuilderConfig = Config<any, BuilderRootConfig>;
+
+type SoftSubComponent = {
+    type: string;
+    map: BuilderComponentConfig['_map'];
+    components: {
+        [slot: string]: SoftSubComponent;
+    };
+    fixedProps?: DefaultComponentProps;
+    enabledSlots: {
+        slot: string;
+        name?: string;
+    }[];
+}[];
+type SoftComponent = {
+    name: string;
+    category?: string;
+    fields: Fields;
+    fieldSettings?: Record<string, any>;
+    defaultProps: DefaultComponentProps;
+    rootProps?: Record<string, any>;
+    components: SoftSubComponent;
+    slots: {
+        [slot: string]: DefaultComponentProps;
+    };
+};
+type VersionedSoftComponent = {
+    defaultVersion: string;
+    name: string;
+    category?: string;
+    versions: {
+        [version: string]: {
+            fields: Fields;
+            fieldSettings?: Record<string, any>;
+            defaultProps: DefaultComponentProps;
+            rootProps?: Record<string, any>;
+            components: SoftSubComponent;
+            slots: {
+                [slot: string]: DefaultComponentProps;
+            };
+        };
+    };
+    /**
+     * 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>;
+
+type CompletedComponentResult = {
+    id: string;
+    version: string;
+    softComponent: VersionedSoftComponent["versions"][string];
+};
 type BuildersSlice = {
     /**
      * Build a new soft component based on the selected item in history.
@@ -61,7 +145,7 @@ type BuildersSlice = {
      *    - Strip the build settings fields
      *    - Apply modified history to puck data.
      */
-    complete: (appState: AppState<any>, setHistories: PuckApi["history"]["setHistories"], getItemBySelector: PuckApi["getItemBySelector"]) => string;
+    complete: (appState: AppState<any>, setHistories: PuckApi["history"]["setHistories"], getItemBySelector: PuckApi["getItemBySelector"]) => CompletedComponentResult;
     demolish: (componentName: string, data: AppState["data"], puckDispatch: PuckApi["dispatch"]) => void;
     inspect: (componentName: string, puckDispatch: PuckApi["dispatch"]) => void;
     /**
@@ -86,81 +170,6 @@ type BuildersSlice = {
     decompose: (componentData: ComponentData) => ComponentData[];
 };
 
-type BuilderRootConfig = {
-    _name: string;
-    _category?: string;
-    _version?: string;
-    _versions?: string[];
-    _fields?: {
-        name: string;
-        type: Field["type"];
-    }[];
-    _fieldSettings?: {
-        [key: string]: any;
-    };
-};
-type BuilderComponentConfig = {
-    _slot?: {
-        slot: string;
-    }[];
-    _map?: {
-        to: string | string[];
-        from: string | string[];
-        transform?: (inputs: any[], props: DefaultComponentProps) => any;
-        [key: string]: any;
-    }[];
-    [key: string]: any;
-};
-type BuilderConfig = Config<any, BuilderRootConfig>;
-
-type SoftSubComponent = {
-    type: string;
-    map: BuilderComponentConfig['_map'];
-    components: {
-        [slot: string]: SoftSubComponent;
-    };
-    fixedProps?: DefaultComponentProps;
-    enabledSlots: {
-        slot: string;
-        name?: string;
-    }[];
-}[];
-type SoftComponent = {
-    name: string;
-    category?: string;
-    fields: Fields;
-    fieldSettings?: Record<string, any>;
-    defaultProps: DefaultComponentProps;
-    components: SoftSubComponent;
-    slots: {
-        [slot: string]: DefaultComponentProps;
-    };
-};
-type VersionedSoftComponent = {
-    defaultVersion: string;
-    name: string;
-    category?: string;
-    versions: {
-        [version: string]: {
-            fields: Fields;
-            fieldSettings?: Record<string, any>;
-            defaultProps: DefaultComponentProps;
-            components: SoftSubComponent;
-            slots: {
-                [slot: string]: DefaultComponentProps;
-            };
-        };
-    };
-    /**
-     * 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>;
-
 type ActionEventPayload = {
     type: "build";
     payload: {
@@ -170,11 +179,14 @@ type ActionEventPayload = {
     type: "remodel";
     payload: {
         id: string;
+        version?: string;
+        softComponent?: VersionedSoftComponent["versions"][string];
     };
 } | {
     type: "complete";
     payload: {
         id: string;
+        version: string;
         componentData: Record<string, any>;
         softComponent: VersionedSoftComponent["versions"][string];
     };
@@ -192,10 +204,19 @@ type ActionEventPayload = {
         id: string;
         version: string;
     };
+} | {
+    type: "deleteVersion";
+    payload: {
+        id: string;
+        version: string;
+        migrateToVersion?: string;
+    };
 } | {
     type: "inspect";
     payload: {
         id: string;
+        version?: string;
+        softComponent?: VersionedSoftComponent["versions"][string];
     };
 } | {
     type: "decompose";
@@ -217,10 +238,13 @@ type RenderFunc<Props extends {
     children: ReactNode;
 }> = (props: Props) => ReactElement;
 type Overrides = {
-    componentNameToKey?: (displayName: string, context: {
+    componentNameToKey?: (displayName: string, context: Partial<BuilderRootConfig> & {
         existingKeys: string[];
         state: "building" | "remodeling" | "ready" | "inspecting";
     }) => string;
+    componentKeyToName?: (key: string) => string;
+    onRemodel?: (key: string) => Record<string, any>;
+    additionalRootFields?: Record<string, Field>;
     map?: RenderFunc<{
         rootProps: BuilderRootConfig;
         toOptions: {
@@ -247,14 +271,19 @@ type Overrides = {
     onActions?: OnActionsCallback;
     name?: Field<string>;
     categories?: Field<string | undefined>;
-    onRootsDataChange?: (data: RootData<AsFieldProps<WithChildren<BuilderRootConfig>>>, params: {
+    resolveRootData?: (props: RootData<AsFieldProps<WithChildren<BuilderRootConfig>>>, params: {
         changed: Partial<Record<keyof BuilderRootConfig, boolean> & {
             id: string;
         }>;
         lastData: RootData<AsFieldProps<WithChildren<BuilderRootConfig>>> | null;
         metadata: Metadata;
         trigger: ResolveDataTrigger;
-    }) => void;
+    }, context: {
+        editingComponent?: string;
+    }) => {
+        props: RootData<AsFieldProps<WithChildren<BuilderRootConfig>>> | Promise<RootData<AsFieldProps<WithChildren<BuilderRootConfig>>>>;
+        readOnly: Readonly<Record<string, boolean>> | undefined;
+    };
 };
 
 type Status = "building" | "remodeling" | "ready" | "inspecting";
@@ -295,6 +324,7 @@ type AppStore = {
     hydrateTransforms: () => void;
     setSoftComponentDefaultVersion: (key: string, version: string) => void;
     removeSoftComponent: (key: string) => void;
+    editingComponent: string | null;
     editingComponentId: string | null;
     editableComponentIds: Set<string>;
     setEditableComponentIds: (ids: Set<string>) => void;
@@ -367,15 +397,32 @@ declare const useBuild: (name?: string) => {
 };
 
 declare const useRemodel: () => {
-    handleRemodel: (componentName?: string) => void;
+    handleRemodel: (componentName?: string) => {
+        id: string;
+        version: string;
+        softComponent: {
+            fields: _measured_puck.Fields;
+            fieldSettings?: Record<string, any>;
+            defaultProps: DefaultComponentProps;
+            rootProps?: Record<string, any>;
+            components: SoftSubComponent;
+            slots: {
+                [slot: string]: DefaultComponentProps;
+            };
+        };
+    } | {
+        id: string;
+        version: string;
+        softComponent?: undefined;
+    } | null;
     canRemodel: (componentName?: string) => boolean;
 };
 
 declare const useComplete: () => {
-    handleComplete: () => string | null;
+    handleComplete: () => CompletedComponentResult | null;
     canComplete: boolean;
-    newComponent: string | null;
-    setNewComponent: React$1.Dispatch<React$1.SetStateAction<string | null>>;
+    newComponent: CompletedComponentResult | null;
+    setNewComponent: React$1.Dispatch<React$1.SetStateAction<CompletedComponentResult | null>>;
 };
 
 declare const useCancel: () => {
@@ -383,7 +430,7 @@ declare const useCancel: () => {
     canCancel: boolean;
 };
 
-declare const useInspect: (componentName: string | null) => void;
+declare const useInspect: (component: CompletedComponentResult | null) => void;
 
 declare const useDecompose: () => {
     handleDecompose: (componentData?: ComponentData) => void;