@cometchat/card-builder 2.0.2 → 2.0.3

package/dist/components/Canvas.d.ts

@@ -0,0 +1,2 @@
+import './Canvas.css';
+export declare const Canvas: import("react").NamedExoticComponent<object>;

package/dist/components/CanvasViewToggle.d.ts

@@ -0,0 +1,6 @@
+export declare const CanvasViewToggle: import("react").NamedExoticComponent<{
+    platform: "ios" | "android";
+    setPlatform: (p: "ios" | "android") => void;
+    darkMode: boolean;
+    setDarkMode: (d: boolean) => void;
+}>;

package/dist/components/CredentialsModal.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    onClose: () => void;
+    /** Called after credentials are saved (for Send flow) */
+    onSaved?: () => void;
+    /** Title override */
+    title?: string;
+    /** Label for the save button. Default: "Save & Continue" */
+    saveLabel?: string;
+}
+export declare const CredentialsModal: import("react").NamedExoticComponent<Props>;
+export {};

package/dist/components/EditorLayout.d.ts

@@ -0,0 +1,2 @@
+import './EditorLayout.css';
+export declare const EditorLayout: import("react").NamedExoticComponent<object>;

package/dist/components/ElementTree.d.ts

@@ -0,0 +1,2 @@
+import './ElementTree.css';
+export declare function ElementTree(): import("react/jsx-runtime").JSX.Element;

package/dist/components/LeftPanel.d.ts

@@ -0,0 +1,2 @@
+import './LeftPanel.css';
+export declare const LeftPanel: import("react").NamedExoticComponent<object>;

package/dist/components/NotificationPreview.d.ts

@@ -0,0 +1,3 @@
+export declare const NotificationPreview: import("react").NamedExoticComponent<{
+    platform: "ios" | "android";
+}>;

package/dist/components/RightPanel.d.ts

@@ -0,0 +1,2 @@
+import './RightPanel.css';
+export declare const RightPanel: import("react").NamedExoticComponent<object>;

package/dist/components/ShortcutsPanel.d.ts

@@ -0,0 +1,2 @@
+import './ShortcutsPanel.css';
+export declare const ShortcutsPanel: import("react").NamedExoticComponent<object>;

package/dist/components/TemplateLibrary.d.ts

@@ -0,0 +1,2 @@
+import './TemplateLibrary.css';
+export declare const TemplateLibrary: import("react").NamedExoticComponent<object>;

package/dist/components/TopBar.d.ts

@@ -0,0 +1,2 @@
+import './TopBar.css';
+export declare const TopBar: import("react").NamedExoticComponent<object>;

package/dist/components/properties/ActionEditor.d.ts

@@ -0,0 +1,7 @@
+import type { CardAction } from '../../types/schema';
+interface Props {
+    action: CardAction;
+    onChange: (action: CardAction) => void;
+}
+export declare const ActionEditor: import("react").NamedExoticComponent<Props>;
+export {};

package/dist/components/properties/CardStyleEditor.d.ts

@@ -0,0 +1,2 @@
+import './PropertyEditors.css';
+export declare const CardStyleEditor: import("react").NamedExoticComponent<object>;

package/dist/components/properties/ElementPropertyEditor.d.ts

@@ -0,0 +1,8 @@
+import type { CardElement } from '../../types/schema';
+import './PropertyEditors.css';
+interface Props {
+    element: CardElement;
+    onUpdate: (updates: Partial<CardElement>) => void;
+}
+export declare const ElementPropertyEditor: import("react").NamedExoticComponent<Props>;
+export {};

package/dist/components/properties/IconPicker.d.ts

@@ -0,0 +1,7 @@
+import type { IconRef } from '../../types/schema';
+interface Props {
+    value: IconRef | string | undefined;
+    onChange: (v: IconRef | undefined) => void;
+}
+export declare const IconPicker: import("react").NamedExoticComponent<Props>;
+export {};

package/dist/components/properties/NotificationEditor.d.ts

@@ -0,0 +1,2 @@
+import './PropertyEditors.css';
+export declare const NotificationEditor: import("react").NamedExoticComponent<object>;

package/dist/components/properties/VariableEditor.d.ts

@@ -0,0 +1,2 @@
+import './PropertyEditors.css';
+export declare const VariableEditor: import("react").NamedExoticComponent<object>;

package/dist/components/properties/VariableInput.d.ts

@@ -0,0 +1,10 @@
+interface VariableInputProps {
+    value: string;
+    onChange: (v: string) => void;
+    placeholder?: string;
+    multiline?: boolean;
+    rows?: number;
+    style?: React.CSSProperties;
+}
+export declare const VariableInput: import("react").NamedExoticComponent<VariableInputProps>;
+export {};

package/dist/components/renderers/ElementRenderer.d.ts

@@ -0,0 +1,20 @@
+import type { CardElement } from '../../types/schema';
+interface ElementRendererProps {
+    element: CardElement;
+    path: number[];
+    selectedPath: number[] | null;
+    selectedPaths: number[][];
+    onSelect: (path: number[] | null) => void;
+    onToggleSelect: (path: number[]) => void;
+    onMove: (path: number[], direction: 'up' | 'down') => void;
+    onRemove: (path: number[]) => void;
+    onWrap: (path: number[], wrapperType: 'row' | 'column' | 'grid') => void;
+    onUnwrap: (path: number[]) => void;
+    onDuplicate: (path: number[]) => void;
+    isFirst: boolean;
+    isLast: boolean;
+    inRow?: boolean;
+    colorMode?: 'light' | 'dark';
+}
+export declare const ElementRenderer: import("react").NamedExoticComponent<ElementRendererProps>;
+export {};

package/dist/components/ui/Button.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode, ButtonHTMLAttributes } from 'react';
+type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'link';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    children: ReactNode;
+}
+export declare const Button: import("react").NamedExoticComponent<ButtonProps>;
+export {};

package/dist/components/ui/ColorPicker.d.ts

@@ -0,0 +1,30 @@
+import type { ColorValue } from '../../types/schema';
+/**
+ * Color section with light/dark toggle header + color fields.
+ * Usage:
+ * ```
+ * <ColorSection>
+ *   {(mode) => (
+ *     <>
+ *       <ColorField label="Background" value={el.backgroundColor} onChange={(v) => onUpdate({ backgroundColor: v })} mode={mode} />
+ *       <ColorField label="Border" value={el.borderColor} onChange={(v) => onUpdate({ borderColor: v })} mode={mode} />
+ *     </>
+ *   )}
+ * </ColorSection>
+ * ```
+ */
+export declare function ColorSection({ children }: {
+    children: (mode: 'light' | 'dark') => React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Single color field: label + swatch + hex input.
+ * Respects light/dark mode to show/edit the correct side of a ColorValue.
+ */
+export declare function ColorField({ label, value, onChange, fallback, transparentValue, mode, }: {
+    label: string;
+    value: ColorValue | undefined;
+    onChange: (v: ColorValue | undefined) => void;
+    fallback?: string;
+    transparentValue?: ColorValue;
+    mode?: 'light' | 'dark';
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/EmptyState.d.ts

@@ -0,0 +1,7 @@
+interface EmptyStateProps {
+    icon: string;
+    title: string;
+    subtitle: string;
+}
+export declare const EmptyState: import("react").NamedExoticComponent<EmptyStateProps>;
+export {};

package/dist/components/ui/MaterialIcon.d.ts

@@ -0,0 +1,9 @@
+interface MaterialIconProps {
+    icon: string;
+    size?: number;
+    filled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const MaterialIcon: import("react").NamedExoticComponent<MaterialIconProps>;
+export {};

package/dist/components/ui/Modal.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode, CSSProperties } from 'react';
+interface ModalProps {
+    title: string;
+    onClose: () => void;
+    children: ReactNode;
+    footer?: ReactNode;
+    width?: number;
+    style?: CSSProperties;
+}
+export declare const Modal: import("react").NamedExoticComponent<ModalProps>;
+export {};

package/dist/config/app-credentials.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Unified app credentials state.
+ *
+ * Priority:
+ * 1. Props (highest) — passed via mountCardBuilder → read-only, non-editable
+ * 2. User-entered — set via App Credentials modal → editable (token cannot be set here)
+ * 3. Env vars (lowest, dev only) — from .env, set via builderConfig in App.tsx
+ *
+ * Note: `token` can only come from props or env (never user-entered).
+ */
+export interface AppCredentials {
+    appId: string;
+    region: string;
+    token: string;
+    apiKey: string;
+}
+/** Initialize credentials from mount props (highest priority, read-only) */
+export declare function initCredentials(appId?: string, region?: string, token?: string, apiKey?: string, lock?: boolean): void;
+/**
+ * Get resolved credentials (props > user-entered).
+ * Each field is resolved independently — props field wins if non-empty.
+ */
+export declare function getCredentials(): AppCredentials;
+/** Whether credentials were provided via props (should be non-editable) */
+export declare function isProvidedByProps(): boolean;
+/** Whether we have enough credentials for template API calls (appId + token) */
+export declare function hasApiCredentials(): boolean;
+/** Whether we have enough credentials for sending messages (appId + region + apiKey) */
+export declare function hasSendCredentials(): boolean;
+/** Legacy: whether all credentials are configured */
+export declare function hasCredentials(): boolean;
+/** Update user-entered credentials (only works if not provided by props) */
+export declare function setCredentials(creds: Partial<AppCredentials>): void;
+/** Get user-entered credentials (for displaying in the modal) */
+export declare function getUserCredentials(): AppCredentials;
+/** Subscribe to credential changes */
+export declare function subscribeCredentials(fn: () => void): () => void;
+/** Reset credentials (used on destroy) */
+export declare function resetCredentials(): void;
+/**
+ * React hook: reactively reports whether template/variable (apimgmt) APIs are usable
+ * (appId + bearer token). Use this to hide token-requiring UI when no token is present.
+ */
+export declare function useHasApiCredentials(): boolean;

package/dist/config/builder-config.d.ts

@@ -0,0 +1,56 @@
+import type { CardMessage } from '../types/schema';
+export interface CardVariable {
+    /** Variable name used in {{name}} tokens, e.g. 'user.name' */
+    name: string;
+    /** Human-readable label shown in the picker */
+    label?: string;
+    /** Short description */
+    description?: string;
+    /** Category for grouping in the picker */
+    category?: string;
+}
+export interface NotificationConfig {
+    /** App name shown in the notification preview */
+    appName?: string;
+    /** App icon URL shown in the notification preview */
+    appIcon?: string;
+    /** Show the Data key-value editor in the notification tab */
+    enableData?: boolean;
+    /** Show the push notification phone preview in the canvas. Default: true */
+    showPreview?: boolean;
+    /** Called when notification title or body changes */
+    onNotificationChange?: (notification: {
+        title: string;
+        body: string;
+    }) => void;
+    /** Called when notification data changes */
+    onNotificationDataChange?: (data: Record<string, string>) => void;
+}
+/** Which channels the builder supports */
+export type BuilderChannels = 'inapp' | 'push' | 'both';
+/** Module-level config accessible by components */
+export declare const builderConfig: {
+    appId?: string;
+    region?: string;
+    token?: string;
+    onSave?: (json: CardMessage, name: string, description: string) => void;
+    onChange?: (json: CardMessage) => void;
+    hideTopBar?: boolean;
+    hideTemplateLibrary?: boolean;
+    channels?: BuilderChannels;
+    /** Whether channels was explicitly provided by the host app (vs defaulted to 'both') */
+    channelsExplicit?: boolean;
+    /** Show the variable editor tab for creating/managing variables. Default: true */
+    enableVariableEditor?: boolean;
+    notification?: NotificationConfig;
+    /** Enable the built-in variable creation/management UI. Default: false */
+    enableVariableManager?: boolean;
+    /** Show the canvas toolbar (zoom, dark mode, preview, JSON). Default: false */
+    showCanvasToolbar?: boolean;
+    /** Hide the left panel (elements & components palette). Default: false */
+    /** Disable all editing interactions — read-only preview mode. Default: false */
+    readOnly?: boolean;
+    hideElementPalette?: boolean;
+    /** Hide the right panel (tree, element properties, card settings). Default: false */
+    hidePropertyPanel?: boolean;
+};

package/dist/config/component-templates.d.ts

@@ -0,0 +1,11 @@
+export interface ComponentTemplate {
+    name: string;
+    category: string;
+    icon: string;
+    description: string;
+    elements: Record<string, unknown>[];
+}
+export declare const COMPONENT_TEMPLATES: ComponentTemplate[];
+export declare const COMPONENT_CATEGORIES: string[];
+export declare const COMPONENT_TEMPLATE_NAMES: readonly ["Product Card", "Order Confirmation", "Announcement", "Quick Reply Buttons", "Order Tracking", "Event Card", "Feedback", "Data Table", "Carousel"];
+export type ComponentTemplateName = typeof COMPONENT_TEMPLATE_NAMES[number];

package/dist/config/element-defaults.d.ts

@@ -0,0 +1,8 @@
+import type { CardElement } from '../types/schema';
+export declare const ELEMENT_DEFAULTS: Map<string, () => CardElement>;
+export declare const ELEMENT_PALETTE: {
+    readonly Layout: readonly ["row", "column", "grid", "accordion", "tabs"];
+    readonly Content: readonly ["text", "image", "icon", "avatar", "badge", "divider", "spacer", "chip", "markdown", "codeBlock"];
+    readonly 'Data Display': readonly ["table", "progressBar"];
+    readonly Actions: readonly ["button", "iconButton", "link"];
+};

package/dist/config/icon-library.d.ts

@@ -0,0 +1,11 @@
+export interface IconEntry {
+    name: string;
+    label: string;
+    url: string;
+    category: string;
+}
+export declare const ICON_LIBRARY: IconEntry[];
+export declare const ICON_MAP: Map<string, IconEntry>;
+export declare const ICON_CATEGORIES: string[];
+/** Resolve an icon name to its URL. Returns the name as-is if it's already a URL. */
+export declare function resolveIconUrl(nameOrUrl: string): string;

package/dist/config/theme.d.ts

@@ -0,0 +1,11 @@
+import type { UIKitColorMode } from './uikit-theme';
+/** Build a flat token map from UIKit theme colors */
+export declare function buildTokensFromUIKit(colors: UIKitColorMode): Record<string, string>;
+export declare const THEME_TOKENS: Record<string, string>;
+export declare const DARK_THEME_TOKENS: Record<string, string>;
+export declare let THEME_TOKEN_NAMES: string[];
+export declare function setActiveTheme(dark: boolean): void;
+/** Sync active theme tokens from the UIKit theme store */
+export declare function syncThemeTokens(lightColors: UIKitColorMode, darkColors: UIKitColorMode, isDark: boolean): void;
+export declare function resolveColor(value: string | undefined, fallback?: string): string;
+export declare const TEXT_VARIANT_STYLES: Record<string, React.CSSProperties>;

package/dist/config/uikit-theme.d.ts

@@ -0,0 +1,73 @@
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare function rgbToHex(r: number, g: number, b: number): string;
+export declare const SHADE_KEYS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+export declare function generateExtendedPrimary(primary: string): {
+    light: Record<number, string>;
+    dark: Record<number, string>;
+};
+export declare function generateSpacingScale(baseUnit?: number, steps?: number): Record<string, number>;
+export declare function generatePadding(scale: Record<string, number>): Record<string, number>;
+export declare function generateRadius(scale: Record<string, number>): Record<string, number>;
+export interface UIKitColorMode {
+    primary: string;
+    extendedPrimary: Record<number, string>;
+    neutral: Record<number, string>;
+    alert: {
+        info: string;
+        warning: string;
+        success: string;
+        error: string;
+    };
+    staticColors: {
+        black: string;
+        white: string;
+    };
+    sendBubble: {
+        background: string;
+        text: string;
+        textHighlight: string;
+        link: string;
+        timestamp: string;
+        icon: string;
+    };
+    receiveBubble: {
+        background: string;
+        text: string;
+        textHighlight: string;
+        link: string;
+        timestamp: string;
+        icon: string;
+    };
+}
+export interface UIKitTheme {
+    name: string;
+    version: string;
+    spacing: {
+        baseUnit: number;
+        scale: Record<string, number>;
+        padding: Record<string, number>;
+        radius: Record<string, number>;
+    };
+    typography: {
+        fontFamily: string;
+        scale: Record<string, {
+            size: number;
+            lineHeight: number;
+            weight?: string;
+        }>;
+        weights: {
+            bold: string;
+            medium: string;
+            regular: string;
+        };
+    };
+    colors: {
+        light: UIKitColorMode;
+        dark: UIKitColorMode;
+    };
+}
+export declare function createDefaultTheme(): UIKitTheme;

package/dist/hooks/useKeyboardShortcuts.d.ts

@@ -0,0 +1 @@
+export declare function useKeyboardShortcuts(): void;

package/dist/lib.d.ts

@@ -0,0 +1,81 @@
+import type { CardMessage, ElementType } from './types/schema';
+import type { ComponentTemplateName } from './config/component-templates';
+import type { CardVariable, NotificationConfig, BuilderChannels } from './config/builder-config';
+import './index.css';
+export type { CardVariable } from './config/builder-config';
+export type { NotificationConfig, BuilderChannels } from './config/builder-config';
+export interface CardBuilderOptions {
+    /** CometChat app ID (required for template save/load APIs) */
+    appId?: string;
+    /** App region — us, eu, etc. (required for template save/load APIs) */
+    region?: string;
+    /** Bearer token — legacy; no longer used for template save/load auth (apiKey is). */
+    token?: string;
+    /** CometChat REST API Key (required for template save/load and sending messages) */
+    apiKey?: string;
+    /** Existing card JSON to load for editing */
+    card?: CardMessage;
+    /** Initial notification title (only used when channels includes push). */
+    notificationTitle?: string;
+    /** Initial notification body (only used when channels includes push). */
+    notificationBody?: string;
+    /** Template name */
+    templateName?: string;
+    /** Called when user clicks Save */
+    onSave?: (json: CardMessage, name: string, description: string) => void;
+    /** Called whenever the card JSON changes (any edit). Use for real-time sync. */
+    onChange?: (json: CardMessage) => void;
+    /** Available variables for {{placeholder}} insertion in text/URL fields */
+    variables?: CardVariable[];
+    /** Hide the top toolbar (save, export, import, undo/redo, template name). Default: false */
+    hideTopBar?: boolean;
+    /** Hide the template library view — go straight to editor. Default: false */
+    hideTemplateLibrary?: boolean;
+    /** Disable all editing interactions — read-only preview mode. Default: false */
+    readOnly?: boolean;
+    /** Show the variable editor tab for creating/managing variables in the builder. Default: true */
+    enableVariableEditor?: boolean;
+    /** Which channels to show: 'inapp', 'push', or 'both' (default). */
+    channels?: BuilderChannels;
+    /** Push notification preview config (app name, icon). Only used when channels is 'push' or 'both'. */
+    notification?: NotificationConfig;
+    /** Element types to hide from the palette (e.g. ['codeBlock', 'table', 'markdown']) */
+    hiddenElements?: ElementType[];
+    /** Component template names to hide from the palette (e.g. ['Product Card', 'Data Table']) */
+    hiddenComponents?: ComponentTemplateName[];
+    /** Hide the left panel (elements & components palette). Default: false */
+    hideElementPalette?: boolean;
+    /** Hide the right panel (tree, element properties, card settings). Default: false */
+    hidePropertyPanel?: boolean;
+    /** Show the canvas toolbar (zoom, dark mode, preview, JSON). Default: false */
+    showCanvasToolbar?: boolean;
+}
+export interface CardBuilderInstance {
+    loadCard: (card: CardMessage, name?: string) => void;
+    getCardJSON: () => CardMessage;
+    setVariables: (variables: CardVariable[]) => void;
+    setChannels: (channels: BuilderChannels) => void;
+    setCanvasView: (view: 'card' | 'notification') => void;
+    setReadOnly: (readOnly: boolean) => void;
+    /** Hide specific element types from the palette. Pass element type names (e.g. 'codeBlock', 'table'). */
+    setHiddenElements: (types: ElementType[]) => void;
+    /** Hide specific component templates from the palette. Pass template names (e.g. 'Product Card'). */
+    setHiddenComponents: (names: ComponentTemplateName[]) => void;
+    /** Show or hide the left panel at runtime. */
+    setHideElementPalette: (hide: boolean) => void;
+    /** Show or hide the right panel at runtime. */
+    setHidePropertyPanel: (hide: boolean) => void;
+    /** Show or hide the canvas toolbar at runtime. */
+    setShowCanvasToolbar: (show: boolean) => void;
+    /** Set notification title at runtime. */
+    setNotificationTitle: (title: string) => void;
+    /** Set notification body at runtime. */
+    setNotificationBody: (body: string) => void;
+    /** Set API key at runtime. */
+    setApiKey: (apiKey: string) => void;
+    destroy: () => void;
+}
+export { builderConfig } from './config/builder-config';
+export declare function mountCardBuilder(container: HTMLElement, options: CardBuilderOptions): CardBuilderInstance;
+export type { CardMessage, ElementType } from './types/schema';
+export type { ComponentTemplateName } from './config/component-templates';

package/dist/store/builder-store.d.ts

@@ -0,0 +1,128 @@
+import type { CardElement, CardStyle, CardMessage, Template, ElementType, MessageData } from '../types/schema';
+import type { ComponentTemplateName } from '../config/component-templates';
+import { type CardVariable } from '../config/builder-config';
+export interface BuilderState {
+    templateId: string | null;
+    templateName: string;
+    templateDescription: string;
+    body: CardElement[];
+    style: CardStyle;
+    fallbackText: string;
+    notificationTitle: string;
+    notificationBody: string;
+    notificationData: Array<{
+        key: string;
+        value: string;
+    }>;
+    /** Custom message type for CometChat message structure (e.g. 'product', 'order') */
+    messageType: string;
+    notificationEnabled: boolean;
+    /** Which view the canvas shows: card editor or notification preview */
+    canvasView: 'card' | 'notification';
+    /** Which channels are available */
+    channels: 'inapp' | 'push' | 'both';
+    /** Whether channels was explicitly set (vs default) */
+    channelsExplicit: boolean;
+    /** Read-only mode — disables all editing interactions */
+    readOnly: boolean;
+    selectedPath: number[] | null;
+    selectedPaths: number[][];
+    isDirty: boolean;
+    useThemePlaceholders: boolean;
+    /** Element types hidden from the palette */
+    hiddenElements: Set<ElementType>;
+    /** Component template names hidden from the palette */
+    hiddenComponents: Set<ComponentTemplateName>;
+    view: 'library' | 'editor';
+    clipboard: CardElement | null;
+    showTemplatePicker: boolean;
+    /** Hide the left panel (elements & components palette) */
+    hideElementPalette: boolean;
+    /** Hide the right panel (tree, element properties, card settings) */
+    hidePropertyPanel: boolean;
+    /** Show the canvas toolbar (zoom, dark mode, preview, JSON). Default: false */
+    showCanvasToolbar: boolean;
+    /** Show the variable editor tab. Default: true */
+    enableVariableEditor: boolean;
+    variables: CardVariable[];
+    history: {
+        body: CardElement[];
+        style: CardStyle;
+    }[];
+    historyIndex: number;
+    templates: Template[];
+    templatesLoading: boolean;
+    templatesMeta: {
+        previous?: {
+            affix: string;
+            createdAt: number;
+        };
+        next?: {
+            affix: string;
+            createdAt: number;
+        };
+    } | null;
+    setView: (view: 'library' | 'editor') => void;
+    setShowTemplatePicker: (show: boolean) => void;
+    setHideElementPalette: (hide: boolean) => void;
+    setHidePropertyPanel: (hide: boolean) => void;
+    setShowCanvasToolbar: (show: boolean) => void;
+    setEnableVariableEditor: (enable: boolean) => void;
+    selectElement: (path: number[] | null) => void;
+    toggleSelectElement: (path: number[]) => void;
+    addElement: (element: CardElement, parentPath?: number[]) => void;
+    updateElement: (path: number[], updates: Partial<CardElement>) => void;
+    removeElement: (path: number[]) => void;
+    moveElement: (path: number[], direction: 'up' | 'down') => void;
+    updateStyle: (settings: Partial<CardStyle>) => void;
+    setFallbackText: (text: string) => void;
+    setNotificationTitle: (text: string) => void;
+    setNotificationBody: (text: string) => void;
+    setMessageType: (type: string) => void;
+    setNotificationData: (data: Array<{
+        key: string;
+        value: string;
+    }>) => void;
+    setNotificationEnabled: (enabled: boolean) => void;
+    setCanvasView: (view: 'card' | 'notification') => void;
+    setChannels: (channels: 'inapp' | 'push' | 'both') => void;
+    setReadOnly: (readOnly: boolean) => void;
+    setHiddenElements: (types: ElementType[]) => void;
+    setHiddenComponents: (names: ComponentTemplateName[]) => void;
+    setUseThemePlaceholders: (use: boolean) => void;
+    setVariables: (variables: CardVariable[]) => void;
+    addVariable: (variable: CardVariable) => void;
+    updateVariable: (index: number, variable: CardVariable) => void;
+    removeVariable: (index: number) => void;
+    setTemplateName: (name: string) => void;
+    setTemplateDescription: (desc: string) => void;
+    loadCard: (card: CardMessage, templateId?: string, name?: string, desc?: string) => void;
+    loadTemplate: (template: Template) => void;
+    newCard: () => void;
+    getCardJSON: (opts?: {
+        stripEmpty?: boolean;
+    }) => CardMessage;
+    /** Get the full CometChat message structure wrapping the card (used when channels not set) */
+    getMessageJSON: () => MessageData;
+    setTemplates: (templates: Template[]) => void;
+    fetchTemplates: (search?: string) => Promise<void>;
+    fetchNextPage: () => Promise<void>;
+    fetchPrevPage: () => Promise<void>;
+    saveTemplate: () => Promise<void>;
+    deleteTemplate: (id: string) => Promise<void>;
+    reorderElement: (fromPath: number[], toPath: number[], toIndex: number) => void;
+    moveElementToPath: (fromPath: number[], toParentPath: number[], toIndex: number) => void;
+    wrapElement: (path: number[], wrapperType: 'row' | 'column' | 'grid') => void;
+    unwrapElement: (path: number[]) => void;
+    wrapSelected: (wrapperType: 'row' | 'column' | 'grid') => void;
+    duplicateElement: (path: number[]) => void;
+    copyElement: (path: number[]) => void;
+    pasteElement: (targetPath?: number[]) => void;
+    undo: () => void;
+    redo: () => void;
+    canUndo: () => boolean;
+    canRedo: () => boolean;
+    clearAll: () => void;
+}
+export declare const DEFAULT_STYLE: CardStyle;
+export declare const useBuilderStore: import("zustand").UseBoundStore<import("zustand").StoreApi<BuilderState>>;