@mathews_cometchat/bubble-builder 1.0.0-alpha12 → 1.0.0-alpha14

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,4 @@
+export declare const CanvasViewToggle: import("react").NamedExoticComponent<{
+    platform: "ios" | "android";
+    setPlatform: (p: "ios" | "android") => void;
+}>;

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 { BubbleAction } from '../../types/schema';
+interface Props {
+    action: BubbleAction;
+    onChange: (action: BubbleAction) => void;
+}
+export declare const ActionEditor: import("react").NamedExoticComponent<Props>;
+export {};

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

@@ -0,0 +1 @@
+export declare const BubbleSettingsEditor: import("react").NamedExoticComponent<object>;

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

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

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

@@ -0,0 +1,6 @@
+interface Props {
+    value: string;
+    onChange: (v: string) => void;
+}
+export declare const IconPicker: import("react").NamedExoticComponent<Props>;
+export {};

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

@@ -0,0 +1 @@
+export declare const NotificationEditor: 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,19 @@
+import type { BubbleElement } from '../../types/schema';
+interface ElementRendererProps {
+    element: BubbleElement;
+    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;
+}
+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/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/builder-config.d.ts

@@ -0,0 +1,31 @@
+import type { BubbleMessage } from '../types/schema';
+export interface BubbleVariable {
+    /** 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;
+}
+/** 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: BubbleMessage, name: string, description: string) => void;
+    onChange?: (json: BubbleMessage) => void;
+    hideTopBar?: boolean;
+    hideTemplateLibrary?: boolean;
+    channels?: BuilderChannels;
+    notification?: NotificationConfig;
+};

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

@@ -0,0 +1,9 @@
+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[];

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

@@ -0,0 +1,8 @@
+import type { BubbleElement } from '../types/schema';
+export declare const ELEMENT_DEFAULTS: Map<string, () => BubbleElement>;
+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,45 @@
+import type { BubbleMessage } from './types/schema';
+import type { BubbleVariable, NotificationConfig, BuilderChannels } from './config/builder-config';
+import './index.css';
+export type { BubbleVariable } from './config/builder-config';
+export type { NotificationConfig, BuilderChannels } from './config/builder-config';
+export interface BubbleBuilderOptions {
+    /** 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 for REST API calls (required for template save/load APIs) */
+    token?: string;
+    /** Existing bubble JSON to load for editing */
+    bubble?: BubbleMessage;
+    /** Template name */
+    templateName?: string;
+    /** Called when user clicks Save */
+    onSave?: (json: BubbleMessage, name: string, description: string) => void;
+    /** Called whenever the bubble JSON changes (any edit). Use for real-time sync. */
+    onChange?: (json: BubbleMessage) => void;
+    /** Available variables for {{placeholder}} insertion in text/URL fields */
+    variables?: BubbleVariable[];
+    /** 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;
+    /** Which channels to show: 'inapp' (default), 'push', or 'both'. */
+    channels?: BuilderChannels;
+    /** Push notification preview config (app name, icon). Only used when channels is 'push' or 'both'. */
+    notification?: NotificationConfig;
+}
+export interface BubbleBuilderInstance {
+    loadBubble: (bubble: BubbleMessage, name?: string) => void;
+    getBubbleJSON: () => BubbleMessage;
+    /** Update the available variables for {{placeholder}} insertion at any time */
+    setVariables: (variables: BubbleVariable[]) => void;
+    /** Switch which channels are available: 'inapp', 'push', or 'both' */
+    setChannels: (channels: BuilderChannels) => void;
+    /** Switch between 'bubble' (in-app) and 'notification' (push) canvas views */
+    setCanvasView: (view: 'bubble' | 'notification') => void;
+    destroy: () => void;
+}
+export { builderConfig } from './config/builder-config';
+export declare function mountBubbleBuilder(container: HTMLElement, options: BubbleBuilderOptions): BubbleBuilderInstance;
+export type { BubbleMessage } from './types/schema';

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

@@ -0,0 +1,86 @@
+import type { BubbleElement, BubbleSettings, BubbleMessage, Template } from '../types/schema';
+import type { BubbleVariable } from '../config/builder-config';
+export interface BuilderState {
+    templateId: string | null;
+    templateName: string;
+    templateDescription: string;
+    body: BubbleElement[];
+    settings: BubbleSettings;
+    fallbackText: string;
+    notificationTitle: string;
+    notificationBody: string;
+    notificationEnabled: boolean;
+    /** Which view the canvas shows: bubble editor or notification preview */
+    canvasView: 'bubble' | 'notification';
+    /** Which channels are available */
+    channels: 'inapp' | 'push' | 'both';
+    selectedPath: number[] | null;
+    selectedPaths: number[][];
+    isDirty: boolean;
+    useThemePlaceholders: boolean;
+    view: 'library' | 'editor';
+    clipboard: BubbleElement | null;
+    showTemplatePicker: boolean;
+    variables: BubbleVariable[];
+    history: {
+        body: BubbleElement[];
+        settings: BubbleSettings;
+    }[];
+    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;
+    selectElement: (path: number[] | null) => void;
+    toggleSelectElement: (path: number[]) => void;
+    addElement: (element: BubbleElement, parentPath?: number[]) => void;
+    updateElement: (path: number[], updates: Partial<BubbleElement>) => void;
+    removeElement: (path: number[]) => void;
+    moveElement: (path: number[], direction: 'up' | 'down') => void;
+    updateSettings: (settings: Partial<BubbleSettings>) => void;
+    setFallbackText: (text: string) => void;
+    setNotificationTitle: (text: string) => void;
+    setNotificationBody: (text: string) => void;
+    setNotificationEnabled: (enabled: boolean) => void;
+    setCanvasView: (view: 'bubble' | 'notification') => void;
+    setChannels: (channels: 'inapp' | 'push' | 'both') => void;
+    setUseThemePlaceholders: (use: boolean) => void;
+    setVariables: (variables: BubbleVariable[]) => void;
+    setTemplateName: (name: string) => void;
+    setTemplateDescription: (desc: string) => void;
+    loadBubble: (bubble: BubbleMessage, templateId?: string, name?: string, desc?: string) => void;
+    newBubble: () => void;
+    getBubbleJSON: (opts?: {
+        stripEmpty?: boolean;
+    }) => BubbleMessage;
+    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 useBuilderStore: import("zustand").UseBoundStore<import("zustand").StoreApi<BuilderState>>;