@netlisian/softconfig 0.0.0-alpha-20251026130436

package/dist/puck/index.css

@@ -0,0 +1,337 @@
+/* src/puck/components/error-boundary/styles.module.css */
+.ErrorBoundary {
+  padding: 20px;
+  border: 1px solid #ff5858;
+  border-radius: 4px;
+  background-color: #fff0f0;
+  margin: 10px 0;
+}
+.ErrorBoundary-title {
+  color: #d32f2f;
+  margin: 0 0 10px 0;
+}
+.ErrorBoundary-details {
+  white-space: pre-wrap;
+}
+.ErrorBoundary-button {
+  margin-top: 10px;
+  padding: 5px 10px;
+  background-color: #d32f2f;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.ErrorBoundary-button:hover {
+  background-color: #b71c1c;
+}
+
+/* src/puck/overrides/Header.module.css */
+.Header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+/* src/puck/overrides/ActionBar.module.css */
+.ActionBar {
+  align-items: center;
+  cursor: default;
+  display: flex;
+  width: auto;
+  padding: 4px;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border-radius: 8px;
+  background: var(--puck-color-grey-01);
+  color: var(--puck-color-white);
+  font-family: var(--puck-font-family);
+  min-height: 26px;
+}
+.ActionBar-label {
+  color: var(--puck-color-grey-08);
+  font-size: var(--puck-font-size-xxxs);
+  font-weight: 500;
+  padding-inline-start: 8px;
+  padding-inline-end: 8px;
+  margin-inline-start: 4px;
+  margin-inline-end: 4px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ActionBar-action + .ActionBar-label {
+  padding-inline-start: 0;
+}
+.ActionBar-label + .ActionBar-action {
+  margin-inline-start: -4px;
+}
+.ActionBar-group {
+  align-items: center;
+  border-inline-start: 0.5px solid var(--puck-color-grey-05);
+  display: flex;
+  height: 100%;
+  padding-inline-start: 4px;
+  padding-inline-end: 4px;
+}
+.ActionBar-group:first-of-type {
+  border-inline-start: 0;
+}
+.ActionBar-group:empty {
+  display: none;
+}
+.ActionBar-action {
+  background: transparent;
+  border: none;
+  color: var(--puck-color-grey-08);
+  cursor: pointer;
+  padding: 6px 8px;
+  margin-inline-start: 4px;
+  margin-inline-end: 4px;
+  border-radius: 4px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 50ms ease-in;
+}
+.ActionBar-action svg {
+  max-width: none !important;
+}
+.ActionBar-action:focus-visible {
+  outline: 2px solid var(--puck-color-azure-05);
+  outline-offset: -2px;
+}
+@media (hover: hover) and (pointer: fine) {
+  .ActionBar-action:hover {
+    color: var(--puck-color-azure-06);
+    transition: none;
+  }
+}
+.ActionBar-action:active {
+  color: var(--puck-color-azure-07);
+  transition: none;
+}
+.ActionBar-group * {
+  margin: 0;
+}
+
+/* src/puck/overrides/ComponentItem.module.css */
+.ComponentItem {
+  background: var(--puck-color-white);
+  cursor: grab;
+  border: 1px solid var(--puck-color-grey-09);
+  font-size: var(--puck-font-size-xxs);
+  border-radius: 4px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px;
+  transition: background-color 50ms ease-in, color 50ms ease-in;
+  display: flex;
+}
+.ComponentItem-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow-x: hidden;
+}
+.ComponentItem-name {
+  font-weight: 500;
+}
+.ComponentItem-version {
+  font-size: 10px;
+  color: var(--puck-color-grey-05);
+}
+.ComponentItem-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.ComponentItem-settingsButton {
+  opacity: 0;
+  transition: opacity 120ms ease;
+  color: var(--puck-color-grey-05);
+}
+.ComponentItem:hover .ComponentItem-settingsButton {
+  opacity: 1;
+}
+.ComponentItem-grip {
+  color: var(--puck-color-grey-05);
+  display: flex;
+  align-items: center;
+}
+.ComponentItem-modal {
+  background: var(--puck-color-white);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.ComponentItem-modalHeader {
+  padding: 24px 32px;
+  border-bottom: 1px solid var(--puck-color-grey-09);
+}
+.ComponentItem-modalTitle {
+  margin: 0 0 4px 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--puck-color-black);
+}
+.ComponentItem-modalSubtitle {
+  margin: 0;
+  font-size: 14px;
+  color: var(--puck-color-grey-04);
+}
+.ComponentItem-modalBody {
+  flex: 1;
+  padding: 32px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+.ComponentItem-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.ComponentItem-sectionTitle {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--puck-color-black);
+}
+.ComponentItem-sectionDescription {
+  margin: 0;
+  font-size: 14px;
+  color: var(--puck-color-grey-04);
+}
+.ComponentItem-versionList {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.ComponentItem-versionRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  border-radius: 6px;
+  border: 1px solid var(--puck-color-grey-09);
+  background: var(--puck-color-white);
+  transition: all 150ms ease;
+}
+.ComponentItem-versionRow--isDefault {
+  border-color: var(--puck-color-azure-07);
+  background: var(--puck-color-azure-10);
+}
+.ComponentItem-versionRow--isMarkedForDeletion {
+  opacity: 0.6;
+  background: var(--puck-color-grey-11);
+}
+.ComponentItem-versionInfo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+.ComponentItem-versionNumber {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--puck-color-black);
+}
+.ComponentItem-defaultBadge {
+  font-size: 11px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  background: var(--puck-color-azure-07);
+  color: var(--puck-color-white);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.ComponentItem-deleteBadge {
+  font-size: 11px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  background: var(--puck-color-grey-07);
+  color: var(--puck-color-white);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.ComponentItem-versionActions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.ComponentItem-migrationOptions {
+  width: 100%;
+}
+.ComponentItem-select {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--puck-color-grey-09);
+  border-radius: 6px;
+  font-size: 14px;
+  background: var(--puck-color-white);
+  color: var(--puck-color-black);
+  cursor: pointer;
+  transition: border-color 150ms ease;
+}
+.ComponentItem-select:hover {
+  border-color: var(--puck-color-grey-07);
+}
+.ComponentItem-select:focus {
+  outline: none;
+  border-color: var(--puck-color-azure-07);
+}
+.ComponentItem-modalFooter {
+  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);
+}
+.ComponentItem-footerLeft {
+  display: flex;
+  gap: 12px;
+}
+.ComponentItem-footerRight {
+  display: flex;
+  gap: 12px;
+}
+
+/* src/puck/components/modal/styles.module.css */
+.Modal {
+  background: color-mix(in srgb, var(--puck-color-black) 75%, transparent);
+  display: none;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 1;
+  padding: 32px;
+}
+.Modal--isOpen {
+  display: flex;
+}
+.Modal-inner {
+  width: 100%;
+  max-width: 1024px;
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--puck-color-white);
+  display: flex;
+  flex-direction: column;
+  max-height: 90dvh;
+}

package/dist/puck/index.d.mts

@@ -0,0 +1,345 @@
+import * as zustand from 'zustand';
+import { StoreApi } from 'zustand';
+import { History, AppState, PuckApi, ComponentConfig, ComponentData, DefaultComponentProps, Field, Fields, Config, 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';
+
+type BuildersSlice = {
+    /**
+     * Build a new soft component based on the selected item in history.
+     *
+     * Steps:
+     * 1. Data Modifications:
+     *    - Store History
+     *    - Set currently selected item to the root
+     * 2. Soft Config Modifications:
+     *    - Update root to include: name, fields, fieldSettings, for soft component
+     *    - Update each component config to map the soft fields to component fields
+     *    - Update each component for slot settings (Dropzone enable/disable)
+     */
+    build: (history: History<AppState>[], selectedItem: PuckApi["selectedItem"], itemSelector: {
+        index: number;
+        zone?: string;
+    } | null, puckDispatch: PuckApi["dispatch"]) => void | null;
+    /**
+     * Remodel the selected soft component by decomposing it and resetting as root.
+     *
+     * Steps:
+     * 1. Data Modifications:
+     *    - Store History
+     *    - Decompose and set selected soft component to root
+     * 2. Soft Config Modifications:
+     *    - Update root with name, fields, fieldSettings for soft component
+     *    - Update each component config to map soft fields to component fields
+     *    - Update each component for slot settings (Dropzone enable/disable)
+     *    - Remove selected component or dependencies to avoid circular dependencies
+     */
+    remodel: (history: History<AppState>[], selectedItem: PuckApi["selectedItem"], itemSelector: {
+        index: number;
+        zone?: string;
+    } | null, puckDispatch: PuckApi["dispatch"]) => void;
+    /**
+     * Switch to a different version of the soft component being remodeled.
+     *
+     * Steps:
+     * 1. Get the soft component for the selected version
+     * 2. Convert it back to AppState format
+     * 3. Update the puck data with the new version's content
+     */
+    setVersion: (componentName: string, newVersion: string, currentProps: Record<string, any>, puckDispatch: PuckApi["dispatch"]) => void;
+    /**
+     * Mark the current build/remodel as complete.
+     *
+     * Steps:
+     * 1. Config Modifications:
+     *    - Compose the build settings into soft component
+     *    - Set the component to the config
+     *    - Restore permissions, resolve fields and resolve data of all components
+     * 2. Data Modifications:
+     *    - Transform the last item of history to replace the source components into composed soft component
+     *    - Strip the build settings fields
+     *    - Apply modified history to puck data.
+     */
+    complete: (appState: AppState<any>, setHistories: PuckApi["history"]["setHistories"]) => string;
+    demolish: (componentName: string, data: AppState["data"], puckDispatch: PuckApi["dispatch"]) => void;
+    inspect: (componentName: string, puckDispatch: PuckApi["dispatch"]) => void;
+    /**
+     * Mark the current build/remodel as complete.
+     *
+     * Steps:
+     * 1. Config Modifications:
+     *    - Restore permissions, resolve fields and resolve data of all components
+     * 2. Data Modifications:
+     *    - Restore history to puck data.
+     */
+    cancel: (setHistories: PuckApi["history"]["setHistories"]) => void;
+    /** 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;
+    /** Break down a composed component into its parts.
+     * 1. Get softComponentProps
+     * 2. Create a virtual component with all the props from soft-component.
+     * 3. Replace the softComponent with hardComponent
+     */
+    decompose: (componentData: ComponentData) => ComponentData[];
+};
+
+type BuilderRootConfig = {
+    _name: string;
+    _version?: string;
+    _versions?: string[];
+    _fields?: {
+        name: string;
+        type: Field["type"];
+    }[];
+    _fieldSettings?: {
+        [key: string]: any;
+    };
+};
+type BuilderComponentConfig = {
+    _slot?: {
+        slot: string;
+    }[];
+    _map?: {
+        from: string | string[];
+        to: string | string[];
+        transform?: (inputs: any, props: DefaultComponentProps) => any;
+        graphState?: {
+            nodes: any[];
+            edges: any[];
+        };
+    }[];
+    [key: string]: any;
+};
+
+type SoftSubComponent = {
+    type: string;
+    map: BuilderComponentConfig['_map'];
+    components: {
+        [slot: string]: SoftSubComponent;
+    };
+    fixedProps?: DefaultComponentProps;
+    enabledSlots: {
+        slot: string;
+        name?: string;
+    }[];
+}[];
+type SoftComponent = {
+    fields: Fields;
+    defaultProps: DefaultComponentProps;
+    components: SoftSubComponent;
+    slots: {
+        [slot: string]: DefaultComponentProps;
+    };
+};
+type VersionedSoftComponent = {
+    defaultVersion: string;
+    versions: {
+        [version: string]: {
+            fields: Fields;
+            defaultProps: DefaultComponentProps;
+            components: SoftSubComponent;
+            slots: {
+                [slot: string]: DefaultComponentProps;
+            };
+        };
+    };
+};
+type SoftComponents = Record<string, VersionedSoftComponent>;
+
+type RenderFunc<Props extends {
+    [key: string]: any;
+} = {
+    children: ReactNode;
+}> = (props: Props) => ReactElement;
+type Overrides = {
+    map?: RenderFunc<{
+        rootProps: BuilderRootConfig;
+        toOptions: {
+            label: string;
+            value: string;
+            type: Field["type"];
+        }[];
+        fromOptions: {
+            label: string;
+            value: string;
+            type: Field["type"];
+        }[];
+        props: DefaultComponentProps;
+        value: BuilderComponentConfig["_map"];
+        onChange: (value: BuilderComponentConfig["_map"]) => void;
+        id: string;
+    }>;
+};
+
+type Status = "building" | "remodeling" | "ready" | "inspecting";
+type AppStore = {
+    softConfig: Config;
+    softComponents: SoftComponents;
+    state: Status;
+    originalHistory: History[];
+    storedConfig?: Config;
+    overrides: Overrides;
+    itemSelector: {
+        index: number;
+        zone: string;
+    } | null;
+    setItemSelector: (selector: {
+        index: number;
+        zone: string;
+    } | null) => void;
+    originalItem: DefaultComponentProps | null;
+    setOriginalItem: (item: DefaultComponentProps | null) => void;
+    storeHistory: (history: History[]) => void;
+    removeHistory: () => void;
+    setSoftComponentConfig: (key: string, config: ComponentConfig, category?: string) => void;
+    removeSoftComponentConfig: (key: string) => void;
+    removeSoftComponentVersion: (key: string, version: string) => void;
+    setSoftCategoryConfig: (key: string, category: {
+        components?: string[];
+        visible?: boolean;
+        defaultExpanded?: boolean;
+        title?: string;
+    }) => void;
+    removeSoftCategoryConfig: (key: string) => void;
+    builder: BuildersSlice;
+    setSoftComponent: (key: string, version: string, component: SoftComponent) => void;
+    setSoftComponentDefaultVersion: (key: string, version: string) => void;
+    removeSoftComponent: (key: string) => void;
+};
+type AppStoreApi = StoreApi<AppStore>;
+declare const createSoftConfigStore: (hardConfig?: Config, softComponents?: SoftComponents, overrides?: Overrides) => zustand.UseBoundStore<Omit<Omit<StoreApi<AppStore>, "subscribe"> & {
+    subscribe: {
+        (listener: (selectedState: AppStore, previousSelectedState: AppStore) => void): () => void;
+        <U>(selector: (state: AppStore) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
+            equalityFn?: ((a: U, b: U) => boolean) | undefined;
+            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 }: {
+    children: (softConfig: Config, softComponents: SoftComponents) => ReactNode;
+    hardConfig: Config;
+    softComponents: SoftComponents;
+    overrides: Overrides;
+}) => 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 useBuild: () => {
+    handleBuild: () => void;
+    canBuild: boolean;
+};
+
+declare const useRemodel: () => {
+    handleRemodel: (componentName?: string) => void;
+    canRemodel: (componentName?: string) => boolean;
+};
+
+declare const useComplete: () => {
+    handleComplete: () => string | null;
+    canComplete: boolean;
+    newComponent: string | null;
+    setNewComponent: react.Dispatch<react.SetStateAction<string | null>>;
+};
+
+declare const useCancel: () => {
+    handleCancel: () => void;
+    canCancel: boolean;
+};
+
+declare const useInspect: (componentName: string | null) => void;
+
+declare const useDecompose: () => {
+    handleDecompose: (componentData?: ComponentData) => void;
+    canDecompose: (componentData?: ComponentData) => boolean;
+};
+
+declare const useDemolish: () => {
+    handleDemolish: (componentName: string) => void;
+    canDemolish: (componentName: string) => boolean;
+};
+
+declare const useSetDefaultVersion: () => {
+    handleSetDefaultVersion: (componentName: string, version: string) => void;
+    canSetDefaultVersion: (componentName: string, version: string) => boolean;
+    getVersions: (componentName: string) => string[];
+    getDefaultVersion: (componentName: string) => string;
+};
+
+declare const Header: ({ onPublish, children, }: {
+    onPublish?: (data: Data, softComponents: SoftComponents) => void;
+    children: react__default.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const ActionBarOverride: (props: {
+    label?: string;
+    parentAction?: react__default.ReactNode;
+    children?: react__default.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const ComponentItem: (props: {
+    name: string;
+    children: React.ReactNode;
+}) => React.ReactElement;
+
+type NotificationHandler = (message: string, type: "error" | "success") => void;
+declare const setNotificationHandler: (handler: NotificationHandler) => void;
+declare const notify: {
+    error: (message: string) => void;
+    success: (message: string) => void;
+};
+
+type ConfirmHandler = (message: string) => Promise<boolean> | boolean;
+/**
+ * Set a custom confirmation handler
+ * @param handler - Function that shows confirmation dialog and returns boolean or Promise<boolean>
+ */
+declare const setConfirmHandler: (handler: ConfirmHandler) => void;
+/**
+ * Show a confirmation dialog
+ * @param message - The confirmation message
+ * @returns Promise<boolean> - true if confirmed, false otherwise
+ */
+declare const confirm: (message: string) => Promise<boolean>;
+
+/**
+ * Resolves soft components in data by dissolving them to hard components only.
+ *
+ * This function uses reverse topological sorting to ensure components are dissolved
+ * in the correct order (composite → leaf), guaranteeing that only hard components
+ * remain in the final output.
+ *
+ * @param data - The Puck data structure to resolve
+ * @param softComponents - The registry of soft components with their versions
+ * @param config - The Puck config containing component definitions
+ * @returns New data with all soft components fully dissolved to hard components
+ *
+ * @example
+ * ```ts
+ * const resolvedData = resolveSoftConfig(appState.data, softComponents, config);
+ * ```
+ */
+declare const resolveSoftConfig: (data: Data, softComponents: SoftComponents, config: Config) => Data;
+
+export { ActionBarOverride as ActionBar, type AppStore, type AppStoreApi, ComponentItem, Header, type SoftComponent, type SoftComponents, SoftConfigProvider, confirm, createSoftConfigStore, createUseSoftConfig, notify, resolveSoftConfig, setConfirmHandler, setNotificationHandler, useBuild, useCancel, useComplete, useDecompose, useDemolish, useInspect, useRemodel, useSetDefaultVersion, useSoftConfig };