@chaibuilder/sdk 2.0.0-beta.9 → 2.0.0-beta.91

package/dist/core.d.ts

@@ -1,8 +1,10 @@
+import { Atom } from 'jotai';
+import { ChaiBlock as ChaiBlock_2 } from '@chaibuilder/runtime';
 import { ClassValue } from 'clsx';
-import i18n from 'i18next';
+import { default as default_2 } from 'react';
+import { default as i18n } from 'i18next';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import * as React_2 from 'react';
-import { default as React_3 } from 'react';
 import { ReactNode } from 'react';
 import { registerChaiBlock } from '@chaibuilder/runtime';
 import { RESET } from 'jotai/utils';
@@ -16,10 +18,11 @@ declare type AddBlocks = {
 
 export declare const AddBlocksDialog: () => JSX_2.Element;
 
-export declare const AddBlocksPanel: ({ className, showHeading, parentId, }: {
+export declare const AddBlocksPanel: ({ className, showHeading, parentId, position, }: {
     parentId?: string;
     showHeading?: boolean;
     className?: string;
+    position?: number;
 }) => JSX_2.Element;
 
 export declare const AISetContext: () => JSX_2.Element;
@@ -52,7 +55,7 @@ declare type Breakpoint = {
     title: string;
     content: string;
     breakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | string;
-    icon: React_3.ReactNode | Element;
+    icon: default_2.ReactNode | Element;
     width: number;
 };
 
@@ -62,25 +65,44 @@ export declare const CHAI_BUILDER_EVENTS: {
     SHOW_BLOCK_SETTINGS: string;
 };
 
-export declare type ChaiBlock = {
+export declare type ChaiBlock<T = Record<string, any>> = {
     _id: string;
-    _type: string;
     _name?: string;
     _parent?: string | null | undefined;
     _bindings?: Record<string, string>;
-} & Record<string, any>;
+    _type: string;
+} & T;
+
+declare type ChaiBuilderBlockWithAtom = {
+    _type: string;
+    _id: string;
+    _parent: string | null;
+    _atom: Atom<ChaiBlock>;
+};
 
-export declare const ChaiBuilderCanvas: React_3.FC;
+export declare const ChaiBuilderCanvas: default_2.FC;
 
 /**
  * ChaiBuilder is the main entry point for the Chai Builder Studio.
  */
-export declare const ChaiBuilderEditor: React_3.FC<ChaiBuilderEditorProps>;
+export declare const ChaiBuilderEditor: default_2.FC<ChaiBuilderEditorProps>;
 
 export declare interface ChaiBuilderEditorProps {
-    themePresets?: Record<string, ChaiBuilderThemeValues>[];
-    themeOptions?: (defaultThemeOptions: ChaiBuilderThemeOptions) => ChaiBuilderThemeOptions;
+    /**
+     * RJSF Fields and Widgets
+     */
+    rjsfFields?: Record<string, default_2.ComponentType<any>>;
+    rjsfWidgets?: Record<string, default_2.ComponentType<any>>;
+    rjsfTemplates?: Record<string, default_2.ComponentType<any>>;
+    /**
+     * Optional pageId. If not provided, a random pageId will be generated
+     */
+    pageId?: string;
+    pageExternalData?: Record<string, any>;
+    themePresets?: Record<string, Partial<ChaiBuilderThemeValues>>[];
+    themeOptions?: ChaiBuilderThemeOptions | ((defaultThemeOptions: ChaiBuilderThemeOptions) => ChaiBuilderThemeOptions);
     theme?: Partial<ChaiBuilderThemeValues>;
+    themePanelComponent?: ReactComponentType;
     /**
      * onError callback function
      * @param error
@@ -98,7 +120,7 @@ export declare interface ChaiBuilderEditorProps {
     /**
      * Custom layout component
      */
-    layout?: React_3.ComponentType;
+    layout?: default_2.ComponentType;
     /**
      * Layout variant. Not supported with custom layout
      */
@@ -106,9 +128,17 @@ export declare interface ChaiBuilderEditorProps {
     /**
      * Custom media Manager component
      */
-    mediaManagerComponent?: React_3.ComponentType<{
+    mediaManagerComponent?: default_2.ComponentType<{
         onSelect: (url: string) => void;
     }>;
+    /**
+     * Add blocks dialog components
+     */
+    addBlocksDialogTabs?: {
+        key: string;
+        tab: ReactComponentType;
+        tabContent: ReactComponentType;
+    }[];
     /**
      * HTML direction.
      */
@@ -164,7 +194,7 @@ export declare interface ChaiBuilderEditorProps {
     uiLibraries?: Omit<UILibrary, "blocks">[];
     getUILibraryBlocks?: (library: UILibrary) => Promise<UiLibraryBlock[]>;
     getUILibraryBlock?: (library: UILibrary, uiLibBlock: UiLibraryBlock) => Promise<ChaiBlock[]>;
-    getRSCBlock?: (block: ChaiBlock) => Promise<string>;
+    getBlockAsyncProps?: (block: ChaiBlock) => Promise<string>;
     /**
      * Get Global blocks
      */
@@ -220,10 +250,10 @@ export declare interface ChaiBuilderEditorProps {
     fallbackLang?: string;
     languages?: Array<string>;
     /**
-     * Collections props
+     * Page Types props
      */
-    collections?: Collection[];
-    searchCollectionItems?: (collectionKey: string, query: string) => Promise<CollectionItem[] | Error>;
+    pageTypes?: PageType[];
+    searchPageTypeItems?: (pageTypeKey: string, query: string) => Promise<PageTypeItem[] | Error>;
 }
 
 declare type ChaiBuilderInstance = {
@@ -261,25 +291,15 @@ declare type CodeEditorProps = {
     placeholder?: string;
 };
 
-declare type Collection = {
-    key: string;
-    name: string;
-};
-
-declare type CollectionItem = {
-    id: string;
-    name: string;
-    slug?: string;
-};
-
 declare type CopiedValue = string | null;
 
 declare type CopyFn = (text: string) => Promise<boolean>;
 
 export declare function DarkModeSwitcher(): JSX_2.Element;
 
-export declare const DefaultChaiBlocks: ({ parentId, gridCols }: {
+export declare const DefaultChaiBlocks: ({ parentId, position, gridCols, }: {
     parentId?: string;
+    position?: number;
     gridCols?: string;
 }) => JSX_2.Element;
 
@@ -315,8 +335,9 @@ declare type HSLColor = string;
 
 export { i18n }
 
-export declare const ImportHTML: ({ parentId }: {
+export declare const ImportHTML: ({ parentId, position }: {
     parentId?: string;
+    position?: number;
 }) => JSX_2.Element;
 
 declare type LayoutVariant = "SINGLE_SIDE_PANEL" | "DUAL_SIDE_PANEL" | "DUAL_SIDE_PANEL_ADVANCED";
@@ -326,7 +347,7 @@ export declare const mergeClasses: (...inputs: ClassValue[]) => string;
 export declare const Outline: () => JSX_2.Element;
 
 declare type OutlineMenuItem = {
-    item: React_3.ComponentType<{
+    item: default_2.ComponentType<{
         blockId: string;
     }>;
     tooltip: string | ReactNode;
@@ -334,7 +355,18 @@ declare type OutlineMenuItem = {
 
 declare type OutlineMenuItems = OutlineMenuItem[];
 
-declare type ReactComponentType = React_3.ComponentType<any>;
+declare type PageType = {
+    key: string;
+    name: string;
+};
+
+declare type PageTypeItem = {
+    id: string;
+    name: string;
+    slug?: string;
+};
+
+declare type ReactComponentType = default_2.ComponentType<any>;
 
 export { registerChaiBlock }
 
@@ -362,8 +394,9 @@ declare type TStyleBlock = {
     prop: string;
 };
 
-export declare const UILibraries: ({ parentId }: {
+export declare const UILibraries: ({ parentId, position }: {
     parentId?: string;
+    position?: number;
 }) => JSX_2.Element;
 
 declare interface UILibrary {
@@ -389,23 +422,29 @@ export declare const UndoRedo: () => JSX_2.Element;
 
 export declare const useAddBlock: () => AddBlocks;
 
-export declare const useAddClassesToBlocks: () => Function;
+export declare const useAddClassesToBlocks: () => (blockIds: Array<string>, newClasses: Array<string>, undo?: boolean) => void;
+
+export declare const useAskAi: () => {
+    askAi: (type: "styles" | "content", blockId: string, prompt: string, onComplete?: (response?: AskAiResponse) => void) => Promise<void>;
+    loading: boolean;
+    error: any;
+};
 
 export declare const useBlockHighlight: () => {
-    highlightBlock: (blockId: string) => void;
+    highlightBlock: (elementOrID: HTMLElement | string) => void;
     clearHighlight: () => void;
     lastHighlighted: HTMLElement;
 };
 
-export declare const useBlocksStore: () => [any[], (args_0: any[] | ((prev: any[]) => any[])) => void];
+export declare const useBlocksStore: () => [ChaiBuilderBlockWithAtom[], (args_0: ChaiBuilderBlockWithAtom[] | ((prev: ChaiBuilderBlockWithAtom[]) => ChaiBuilderBlockWithAtom[])) => void];
 
 export declare const useBlocksStoreUndoableActions: () => {
     moveBlocks: (blockIds: string[], parent: string | undefined, position: number) => void;
-    addBlocks: (newBlocks: ChaiBlock[], parent?: string, position?: number) => void;
-    removeBlocks: (blocks: ChaiBlock[]) => void;
+    addBlocks: (newBlocks: ChaiBuilderBlockWithAtom[], parent?: string, position?: number) => void;
+    removeBlocks: (blocks: ChaiBuilderBlockWithAtom[]) => void;
     updateBlocks: (blockIds: string[], props: Partial<ChaiBlock>, oldPropsState?: Partial<ChaiBlock>) => void;
     updateBlocksRuntime: (blockIds: string[], props: Record<string, any>) => void;
-    setNewBlocks: (newBlocks: ChaiBlock[]) => void;
+    setNewBlocks: (newBlocks: ChaiBuilderBlockWithAtom[]) => void;
     updateMultipleBlocksProps: (blocks: Array<{
         _id: string;
     } & Partial<ChaiBlock>>) => void;
@@ -428,7 +467,7 @@ export declare const useCanvasWidth: () => [number, string, Function];
 /**
  * Wrapper hook around useAtom
  */
-export declare const useCanvasZoom: () => [number, (args_0: number | typeof RESET | ((prev: number) => number | typeof RESET)) => void];
+export declare const useCanvasZoom: () => [number, (args_0: number | RESET | ((prev: number) => number | RESET)) => void];
 
 /**
  * Custom hook to access the current state of the code editor.
@@ -437,7 +476,7 @@ export declare const useCanvasZoom: () => [number, (args_0: number | typeof RESE
  */
 export declare const useCodeEditor: () => [CodeEditorProps, never];
 
-export declare const useCopyBlockIds: () => [Array<string>, Function];
+export declare const useCopyBlockIds: () => [Array<string>, (blockIds: Array<string>) => void];
 
 export declare const useCopyToClipboard: () => [CopiedValue, CopyFn];
 
@@ -464,7 +503,7 @@ export declare const useGlobalBlocksList: () => {
 };
 
 export declare const useGlobalBlocksStore: () => {
-    getGlobalBlocks: (block: ChaiBlock) => any;
+    getGlobalBlocks: (globalBlockId: string) => any;
     reset: () => void;
 };
 
@@ -482,11 +521,11 @@ export declare const useLanguages: () => {
     setSelectedLang: (lang: string) => void;
 };
 
-export declare const useLayoutVariant: () => readonly [LayoutVariant, (args_0: LayoutVariant | typeof RESET | ((prev: LayoutVariant) => LayoutVariant | typeof RESET)) => void];
+export declare const useLayoutVariant: () => readonly [LayoutVariant, (args_0: RESET | LayoutVariant | ((prev: LayoutVariant) => RESET | LayoutVariant)) => void];
 
 export declare const usePasteBlocks: () => {
-    canPaste: (newParentId: string) => boolean;
-    pasteBlocks: Function;
+    canPaste: (newParentId: string) => Promise<boolean>;
+    pasteBlocks: (newParentId: string | string[]) => Promise<void>;
 };
 
 /**
@@ -498,6 +537,8 @@ export declare const useRemoveBlocks: () => (blockIds: Array<string>) => void;
 
 export declare const useRemoveClassesFromBlocks: () => Function;
 
+export declare const useRightPanel: () => ["theme" | "block" | "ai" | "settings", (args_0: "theme" | "block" | "ai" | "settings" | ((prev: "theme" | "block" | "ai" | "settings") => "theme" | "block" | "ai" | "settings")) => void];
+
 export declare const useSavePage: () => {
     savePage: ThrottledFunction<(autoSave?: boolean) => Promise<boolean>>;
     saveState: "UNSAVED" | "SAVED" | "SAVING";
@@ -516,7 +557,7 @@ export declare const useSelectedBlockCurrentClasses: () => Array<ClassDerivedObj
 /**
  *
  */
-export declare const useSelectedBlockIds: () => [Array<string>, Function, Function];
+export declare const useSelectedBlockIds: () => readonly [string[], (args_0: string[] | ((prev: string[]) => string[])) => void, (blockId: string) => void];
 
 /**
  * Hook to get selected block ids
@@ -534,10 +575,22 @@ export declare const useSelectedBreakpoints: () => [string[], Function];
  */
 export declare const useSelectedStylingBlocks: () => [TStyleBlock[], (args_0: TStyleBlock[] | ((prev: TStyleBlock[]) => TStyleBlock[])) => void];
 
-export declare const useStylingBreakpoint: () => [string, (args_0: string | typeof RESET | ((prev: string) => string | typeof RESET)) => void];
+export declare const useStylingBreakpoint: () => [string, (args_0: string | RESET | ((prev: string) => string | RESET)) => void];
 
 export declare const useStylingState: () => [unknown, (...args: unknown[]) => unknown];
 
+export declare const useTheme: () => readonly [{
+    fontFamily: Record<string, string>;
+    borderRadius: string;
+    colors: Record<string, string[]>;
+} | {
+    fontFamily?: Record<string, string>;
+    borderRadius?: string;
+    colors?: Record<string, string[]>;
+}, (args_0: ChaiBuilderThemeValues | Partial<ChaiBuilderThemeValues> | ((prev: ChaiBuilderThemeValues | Partial<ChaiBuilderThemeValues>) => ChaiBuilderThemeValues | Partial<ChaiBuilderThemeValues>)) => void];
+
+export declare const useThemeOptions: () => ChaiBuilderThemeOptions;
+
 export { useTranslation }
 
 export declare const useUILibraryBlocks: () => {
@@ -561,6 +614,14 @@ export declare const useUpdateBlocksProps: () => (blockIds: Array<string>, props
 
 export declare const useUpdateBlocksPropsRealtime: () => (blockIds: Array<string>, props: Record<string, any>) => void;
 
+export declare const useWrapperBlock: () => ChaiBlock_2;
+
 declare type VariableKey = string;
 
 export { }
+
+declare global {
+    interface Window {
+        clarity: any;
+    }
+}