@vizel/react 0.0.1-alpha.1

package/dist/index.d.ts

@@ -0,0 +1,965 @@
+import { ComponentProps } from 'react';
+import { CustomIconMap } from '@vizel/core';
+import { default as default_2 } from 'react';
+import { Editor } from '@vizel/core';
+import { Icon } from '@iconify/react';
+import { JSONContent } from '@vizel/core';
+import { JSX } from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { Ref } from 'react';
+import { SuggestionOptions } from '@vizel/core';
+import { VizelAutoSaveOptions } from '@vizel/core';
+import { VizelColorDefinition } from '@vizel/core';
+import { VizelCreateEditorOptions } from '@vizel/core';
+import { VizelEditorState } from '@vizel/core';
+import { VizelEmbedData } from '@vizel/core';
+import { VizelFeatureOptions } from '@vizel/core';
+import { VizelIconContextValue } from '@vizel/core';
+import { VizelIconName } from '@vizel/core';
+import { VizelMarkdownSyncOptions } from '@vizel/core';
+import { VizelNodeTypeOption } from '@vizel/core';
+import { VizelPortalLayer } from '@vizel/core';
+import { VizelSaveStatus } from '@vizel/core';
+import { VizelSlashCommandItem } from '@vizel/core';
+import { VizelSlashMenuRendererOptions } from '@vizel/core';
+import { VizelThemeProviderOptions } from '@vizel/core';
+import { VizelThemeState } from '@vizel/core';
+
+/**
+ * Creates a suggestion render configuration for the SlashCommand extension.
+ * This handles the popup positioning and React component lifecycle.
+ *
+ * @example
+ * ```tsx
+ * import { VizelSlashCommand } from '@vizel/core';
+ * import { createVizelSlashMenuRenderer } from '@vizel/react';
+ *
+ * const editor = useEditor({
+ *   extensions: [
+ *     VizelSlashCommand.configure({
+ *       suggestion: createVizelSlashMenuRenderer(),
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+export declare function createVizelSlashMenuRenderer(options?: VizelSlashMenuRendererOptions): Partial<SuggestionOptions<VizelSlashCommandItem>>;
+
+/**
+ * Hook for auto-saving editor content with debouncing.
+ *
+ * @param getEditor - Function that returns the editor instance
+ * @param options - Auto-save configuration options
+ * @returns Auto-save state and controls
+ *
+ * @example
+ * ```tsx
+ * function Editor() {
+ *   const editor = useVizelEditor({ ... });
+ *   const { status, lastSaved, save } = useVizelAutoSave(() => editor, {
+ *     debounceMs: 2000,
+ *     storage: 'localStorage',
+ *     key: 'my-document',
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <EditorContent editor={editor} />
+ *       <SaveIndicator status={status} lastSaved={lastSaved} />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useVizelAutoSave(getEditor: () => Editor | null | undefined, options?: VizelAutoSaveOptions): UseVizelAutoSaveResult;
+
+/**
+ * Auto-save hook result
+ */
+export declare interface UseVizelAutoSaveResult {
+    /** Current save status */
+    status: VizelSaveStatus;
+    /** Whether there are unsaved changes */
+    hasUnsavedChanges: boolean;
+    /** Timestamp of last successful save */
+    lastSaved: Date | null;
+    /** Last error that occurred */
+    error: Error | null;
+    /** Manually trigger save */
+    save: () => Promise<void>;
+    /** Restore content from storage */
+    restore: () => Promise<JSONContent | null>;
+}
+
+/**
+ * Hook to access the editor instance from context.
+ *
+ * @throws Error if used outside of VizelProvider
+ *
+ * @example
+ * ```tsx
+ * function BoldButton() {
+ *   const { editor } = useVizelContext();
+ *   if (!editor) return null;
+ *
+ *   return (
+ *     <button onClick={() => editor.chain().focus().toggleBold().run()}>
+ *       Bold
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export declare function useVizelContext(): VizelContextValue;
+
+/**
+ * Hook to access the editor instance from context.
+ * Returns null if used outside of VizelProvider (does not throw).
+ */
+export declare function useVizelContextSafe(): VizelContextValue | null;
+
+/**
+ * React hook to create and manage a Vizel editor instance.
+ *
+ * @example
+ * ```tsx
+ * const editor = useVizelEditor({
+ *   placeholder: "Start typing...",
+ *   onUpdate: ({ editor }) => {
+ *     console.log(editor.getJSON());
+ *   },
+ * });
+ *
+ * return <EditorContent editor={editor} />;
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With initial markdown content
+ * const editor = useVizelEditor({
+ *   initialMarkdown: "# Hello World\n\nThis is **bold** text.",
+ * });
+ * ```
+ */
+export declare function useVizelEditor(options?: UseVizelEditorOptions): Editor | null;
+
+/**
+ * Options for useVizelEditor hook.
+ * @see VizelCreateEditorOptions for available options.
+ */
+export declare type UseVizelEditorOptions = VizelCreateEditorOptions;
+
+/**
+ * Hook that returns the current editor state and re-renders on state changes.
+ * This is a convenience hook that combines `useVizelState` (for reactivity)
+ * and `getVizelEditorState` (for state extraction).
+ *
+ * @param getEditor - A function that returns the editor instance to observe
+ * @returns The current editor state including focus, empty status, undo/redo, and character/word counts
+ *
+ * @example
+ * ```tsx
+ * function StatusBar({ editor }: { editor: Editor | null }) {
+ *   const { characterCount, wordCount, canUndo, canRedo } = useVizelEditorState(() => editor);
+ *
+ *   return (
+ *     <div className="status-bar">
+ *       <span>{characterCount} characters</span>
+ *       <span>{wordCount} words</span>
+ *       <button disabled={!canUndo}>Undo</button>
+ *       <button disabled={!canRedo}>Redo</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useVizelEditorState(getEditor: () => Editor | null | undefined): VizelEditorState;
+
+/**
+ * Hook to access custom icon mappings from VizelIconProvider.
+ * Returns undefined if no VizelIconProvider is present (falls back to defaults).
+ */
+export declare function useVizelIconContext(): VizelIconContextValue;
+
+/**
+ * React hook for bidirectional Markdown synchronization with the editor.
+ *
+ * @param getEditor - Function to get the editor instance
+ * @param options - Sync options
+ * @returns Markdown state and control functions
+ *
+ * @example
+ * ```tsx
+ * import { useVizelEditor, useVizelMarkdown } from '@vizel/react';
+ *
+ * function App() {
+ *   const editor = useVizelEditor();
+ *   const { markdown, setMarkdown, isPending } = useVizelMarkdown(() => editor, {
+ *     debounceMs: 300,
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <VizelEditor editor={editor} />
+ *       <textarea
+ *         value={markdown}
+ *         onChange={(e) => setMarkdown(e.target.value)}
+ *       />
+ *       {isPending && <span>Syncing...</span>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With initial markdown value
+ * const { markdown, setMarkdown } = useVizelMarkdown(() => editor, {
+ *   initialValue: "# Hello World",
+ *   transformDiagrams: true,
+ * });
+ * ```
+ */
+export declare function useVizelMarkdown(getEditor: () => Editor | null | undefined, options?: UseVizelMarkdownOptions): UseVizelMarkdownResult;
+
+export declare interface UseVizelMarkdownOptions extends VizelMarkdownSyncOptions {
+    /**
+     * Initial markdown value. If provided, this will be set to the editor on mount.
+     */
+    initialValue?: string;
+}
+
+export declare interface UseVizelMarkdownResult {
+    /**
+     * Current markdown content (reactive).
+     * Updates with debounce when editor content changes.
+     */
+    markdown: string;
+    /**
+     * Set markdown content to the editor.
+     * Automatically transforms diagram code blocks if transformDiagrams is enabled.
+     */
+    setMarkdown: (markdown: string) => void;
+    /**
+     * Whether markdown export is currently pending (debounced).
+     */
+    isPending: boolean;
+    /**
+     * Force immediate export (flush pending debounced export).
+     */
+    flush: () => void;
+}
+
+/**
+ * Hook that forces a re-render whenever the editor's state changes.
+ * This is useful for components that need to reflect the current editor state
+ * (e.g., formatting buttons that show active state).
+ *
+ * @param getEditor - A function that returns the editor instance
+ * @returns A number that changes on each editor state update (can be ignored)
+ *
+ * @example
+ * ```tsx
+ * function FormattingButtons({ editor }: { editor: Editor }) {
+ *   useVizelState(() => editor);
+ *   // Now editor.isActive() will be re-evaluated on each state change
+ *   return (
+ *     <button className={editor.isActive("bold") ? "active" : ""}>
+ *       Bold
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export declare function useVizelState(getEditor: () => Editor | null | undefined): number;
+
+/**
+ * Hook to access theme state and controls
+ *
+ * Must be used within a VizelThemeProvider
+ *
+ * @example
+ * ```tsx
+ * const { theme, setTheme, resolvedTheme } = useVizelTheme();
+ *
+ * return (
+ *   <button onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}>
+ *     Toggle theme
+ *   </button>
+ * );
+ * ```
+ */
+export declare function useVizelTheme(): VizelThemeState;
+
+/**
+ * Hook to access theme state safely (returns null if not in provider)
+ */
+export declare function useVizelThemeSafe(): VizelThemeState | null;
+
+/**
+ * Vizel - All-in-one editor component
+ *
+ * A complete editor component that includes VizelEditor and VizelBubbleMenu.
+ * This is the recommended way to use Vizel for most use cases.
+ *
+ * @example
+ * ```tsx
+ * import { Vizel } from '@vizel/react';
+ *
+ * function App() {
+ *   return <Vizel placeholder="Type '/' for commands..." />;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { Vizel, type VizelRef } from '@vizel/react';
+ * import { useRef } from 'react';
+ *
+ * function App() {
+ *   const vizelRef = useRef<VizelRef>(null);
+ *
+ *   const handleSave = () => {
+ *     const content = vizelRef.current?.editor?.getJSON();
+ *     console.log(content);
+ *   };
+ *
+ *   return (
+ *     <>
+ *       <Vizel ref={vizelRef} onUpdate={({ editor }) => console.log(editor.getJSON())} />
+ *       <button onClick={handleSave}>Save</button>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare function Vizel({ ref, initialContent, initialMarkdown, transformDiagramsOnImport, placeholder, editable, autofocus, features, className, showBubbleMenu, enableEmbed, bubbleMenuContent, children, onUpdate, onCreate, onDestroy, onSelectionUpdate, onFocus, onBlur, }: VizelProps): ReactNode;
+
+/**
+ * A floating menu that appears when text is selected.
+ * Provides formatting options like bold, italic, strike, code, and link.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with default menu
+ * <VizelProvider editor={editor}>
+ *   <VizelEditor />
+ *   <VizelBubbleMenu />
+ * </VizelProvider>
+ *
+ * // With custom items using sub-components
+ * <VizelBubbleMenu>
+ *   <VizelBubbleMenuButton
+ *     onClick={() => editor.chain().toggleBold().run()}
+ *     isActive={editor.isActive("bold")}
+ *   >
+ *     Bold
+ *   </VizelBubbleMenuButton>
+ *   <VizelBubbleMenuDivider />
+ *   <VizelBubbleMenuButton onClick={() => setShowLinkEditor(true)}>
+ *     Link
+ *   </VizelBubbleMenuButton>
+ * </VizelBubbleMenu>
+ * ```
+ */
+export declare function VizelBubbleMenu({ editor: editorProp, className, children, showDefaultMenu, pluginKey, updateDelay, shouldShow, enableEmbed, }: VizelBubbleMenuProps): JSX.Element | null;
+
+/**
+ * A button component for use in the VizelBubbleMenu.
+ *
+ * @example
+ * ```tsx
+ * <VizelBubbleMenuButton
+ *   onClick={() => editor.chain().focus().toggleBold().run()}
+ *   isActive={editor.isActive("bold")}
+ *   title="Bold (Cmd+B)"
+ * >
+ *   <strong>B</strong>
+ * </VizelBubbleMenuButton>
+ * ```
+ */
+export declare function VizelBubbleMenuButton({ onClick, isActive, disabled, children, title, className, action, }: VizelBubbleMenuButtonProps): JSX.Element;
+
+export declare interface VizelBubbleMenuButtonProps {
+    /** Click handler. Optional when disabled is true. */
+    onClick?: () => void;
+    isActive?: boolean;
+    disabled?: boolean;
+    children: ReactNode;
+    title?: string;
+    className?: string;
+    /** Action identifier for testing */
+    action?: string;
+}
+
+/**
+ * A color picker component for the VizelBubbleMenu.
+ * Supports text color and highlight color selection with custom colors and recent colors.
+ */
+export declare function VizelBubbleMenuColorPicker({ editor, type, colors, className, allowCustomColor, showRecentColors, }: VizelBubbleMenuColorPickerProps): JSX.Element;
+
+export declare interface VizelBubbleMenuColorPickerProps {
+    editor: Editor;
+    /** Color picker type */
+    type: "textColor" | "highlight";
+    /** Custom color palette */
+    colors?: VizelColorDefinition[];
+    /** Custom class name */
+    className?: string;
+    /** Enable custom color input (default: true) */
+    allowCustomColor?: boolean;
+    /** Enable recent colors (default: true) */
+    showRecentColors?: boolean;
+}
+
+/**
+ * The default menu content for VizelBubbleMenu.
+ * Provides formatting buttons for bold, italic, strikethrough, code, and link.
+ *
+ * @example
+ * ```tsx
+ * <VizelBubbleMenu>
+ *   <VizelBubbleMenuDefault editor={editor} />
+ * </VizelBubbleMenu>
+ * ```
+ */
+export declare function VizelBubbleMenuDefault({ editor, className, enableEmbed, }: VizelBubbleMenuDefaultProps): JSX.Element;
+
+export declare interface VizelBubbleMenuDefaultProps {
+    editor: Editor;
+    className?: string;
+    /** Enable embed option in link editor (requires Embed extension) */
+    enableEmbed?: boolean;
+}
+
+/**
+ * A divider component for separating groups of buttons in the VizelBubbleMenu.
+ *
+ * @example
+ * ```tsx
+ * <VizelBubbleMenu>
+ *   <VizelBubbleMenuButton>B</VizelBubbleMenuButton>
+ *   <VizelBubbleMenuButton>I</VizelBubbleMenuButton>
+ *   <VizelBubbleMenuDivider />
+ *   <VizelBubbleMenuButton>Link</VizelBubbleMenuButton>
+ * </VizelBubbleMenu>
+ * ```
+ */
+export declare function VizelBubbleMenuDivider({ className }: VizelBubbleMenuDividerProps): JSX.Element;
+
+export declare interface VizelBubbleMenuDividerProps {
+    className?: string;
+}
+
+export declare interface VizelBubbleMenuProps {
+    /** Override the editor from context */
+    editor?: Editor | null;
+    /** Custom class name for the menu container */
+    className?: string;
+    /** Custom menu items (overrides default menu) */
+    children?: ReactNode;
+    /** Whether to show the default formatting menu */
+    showDefaultMenu?: boolean;
+    /** Plugin key for the bubble menu */
+    pluginKey?: string;
+    /** Delay in ms before updating the menu position */
+    updateDelay?: number;
+    /** Custom shouldShow function */
+    shouldShow?: (props: {
+        editor: Editor;
+        from: number;
+        to: number;
+    }) => boolean;
+    /** Enable embed option in link editor (requires Embed extension) */
+    enableEmbed?: boolean;
+}
+
+/**
+ * A reusable color picker component with keyboard navigation and accessibility support.
+ */
+export declare function VizelColorPicker({ colors, value, onChange, label, className, allowCustomColor, recentColors, showRecentColors, noneValues, }: VizelColorPickerProps): JSX.Element;
+
+export declare interface VizelColorPickerProps {
+    /** Color palette to display */
+    colors: VizelColorDefinition[];
+    /** Currently selected color */
+    value?: string | undefined;
+    /** Callback when color is selected */
+    onChange: (color: string) => void;
+    /** Label for accessibility */
+    label?: string;
+    /** Custom class name */
+    className?: string;
+    /** Enable custom HEX input (default: true) */
+    allowCustomColor?: boolean;
+    /** Recent colors to display */
+    recentColors?: string[];
+    /** Show recent colors section (default: true) */
+    showRecentColors?: boolean;
+    /** "None" option color values (e.g., ["transparent", "inherit"]) */
+    noneValues?: string[];
+}
+
+declare interface VizelContextValue {
+    editor: Editor | null;
+}
+
+/**
+ * Renders the editable content area of the Vizel editor.
+ *
+ * Can be used within an VizelProvider (no editor prop needed), or standalone with editor prop.
+ *
+ * @example
+ * ```tsx
+ * // With VizelProvider
+ * <VizelProvider editor={editor}>
+ *   <VizelEditor className="prose" />
+ * </VizelProvider>
+ *
+ * // Or directly with editor prop
+ * <VizelEditor editor={editor} className="prose" />
+ *
+ * // With ref to access container DOM
+ * const editorRef = useRef<VizelExposed>(null);
+ * <VizelEditor ref={editorRef} editor={editor} />
+ * // editorRef.current?.container gives you the container element
+ * ```
+ */
+export declare function VizelEditor({ ref, editor: editorProp, className }: VizelEditorProps): ReactNode;
+
+export declare interface VizelEditorProps {
+    /** Ref to access editor container */
+    ref?: Ref<VizelExposed>;
+    /** Override the editor from context */
+    editor?: Editor | null;
+    /** Optional className for the editor container */
+    className?: string;
+}
+
+/**
+ * Renders an embed based on its type.
+ * Supports oEmbed (rich), OGP (card), title (link with text), and plain link.
+ */
+export declare function VizelEmbedView({ data, className, selected }: VizelEmbedViewProps): default_2.JSX.Element;
+
+export declare interface VizelEmbedViewProps {
+    /** Embed data */
+    data: VizelEmbedData;
+    /** Additional class name */
+    className?: string;
+    /** Whether the embed is selected */
+    selected?: boolean;
+}
+
+export declare interface VizelExposed {
+    /** The container DOM element */
+    container: HTMLDivElement | null;
+}
+
+/**
+ * Icon component that renders Iconify icons based on semantic icon names.
+ * Uses Lucide icons by default, but can be customized via:
+ * 1. customIcons prop (highest priority)
+ * 2. VizelIconProvider context
+ * 3. Default Lucide icons (fallback)
+ *
+ * @example
+ * ```tsx
+ * // Using default Lucide icons
+ * <VizelIcon name="heading1" />
+ *
+ * // With custom icon override (prop takes precedence)
+ * <VizelIcon name="heading1" customIcons={{ heading1: "mdi:format-header-1" }} />
+ *
+ * // With VizelIconProvider context
+ * <VizelIconProvider icons={{ heading1: "ph:text-h-one" }}>
+ *   <VizelIcon name="heading1" /> {/* Uses Phosphor icon *\/}
+ * </VizelIconProvider>
+ *
+ * // With size and color
+ * <VizelIcon name="check" width={24} height={24} color="green" />
+ * ```
+ */
+export declare function VizelIcon({ name, customIcons, style, ...props }: VizelIconProps): JSX.Element;
+
+export declare interface VizelIconProps extends Omit<ComponentProps<typeof Icon>, "icon"> {
+    /**
+     * The semantic icon name from Vizel's icon system.
+     */
+    name: VizelIconName;
+    /**
+     * Custom icon mappings to override default Iconify icon IDs.
+     * If provided, will take precedence over context icons.
+     */
+    customIcons?: CustomIconMap;
+}
+
+/**
+ * Provider component for customizing icons throughout the application.
+ * Wrap your application or editor with this provider to use custom icon sets.
+ *
+ * @example
+ * ```tsx
+ * import { VizelIconProvider } from "@vizel/react";
+ *
+ * // Use Phosphor icons
+ * const phosphorIcons = {
+ *   heading1: "ph:text-h-one",
+ *   heading2: "ph:text-h-two",
+ *   bold: "ph:text-b-bold",
+ *   italic: "ph:text-italic",
+ *   // ... more icons
+ * };
+ *
+ * function App() {
+ *   return (
+ *     <VizelIconProvider icons={phosphorIcons}>
+ *       <VizelEditor />
+ *     </VizelIconProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function VizelIconProvider({ icons, children }: VizelIconProviderProps): JSX.Element;
+
+export declare interface VizelIconProviderProps {
+    /**
+     * Custom icon mappings to override default Lucide icons.
+     * Any icon not specified will fall back to the default Lucide icon.
+     *
+     * @example
+     * ```tsx
+     * // Use Material Design Icons for some icons
+     * <VizelIconProvider icons={{ bold: "mdi:format-bold", italic: "mdi:format-italic" }}>
+     *   <App />
+     * </VizelIconProvider>
+     *
+     * // Use Heroicons
+     * <VizelIconProvider icons={{ check: "heroicons:check", warning: "heroicons:exclamation-triangle" }}>
+     *   <App />
+     * </VizelIconProvider>
+     * ```
+     */
+    icons?: CustomIconMap;
+    children: ReactNode;
+}
+
+/**
+ * A link editor component for editing hyperlinks in the VizelBubbleMenu.
+ * Provides an input field for URL entry and buttons to apply or remove the link.
+ * Optionally supports converting links to embeds when the Embed extension is loaded.
+ *
+ * @example
+ * ```tsx
+ * const [showLinkEditor, setShowLinkEditor] = useState(false);
+ *
+ * {showLinkEditor ? (
+ *   <VizelLinkEditor
+ *     editor={editor}
+ *     onClose={() => setShowLinkEditor(false)}
+ *     enableEmbed
+ *   />
+ * ) : (
+ *   <VizelBubbleMenuButton onClick={() => setShowLinkEditor(true)}>
+ *     Link
+ *   </VizelBubbleMenuButton>
+ * )}
+ * ```
+ */
+export declare function VizelLinkEditor({ editor, onClose, className, enableEmbed, }: VizelLinkEditorProps): JSX.Element;
+
+export declare interface VizelLinkEditorProps {
+    editor: Editor;
+    onClose: () => void;
+    className?: string;
+    /** Enable embed option (requires Embed extension) */
+    enableEmbed?: boolean;
+}
+
+/**
+ * A dropdown selector for changing block node types.
+ * Displays the current node type and allows transformation to other types.
+ *
+ * @example
+ * ```tsx
+ * <VizelNodeSelector editor={editor} />
+ * ```
+ */
+export declare function VizelNodeSelector({ editor, nodeTypes, className, }: VizelNodeSelectorProps): JSX.Element;
+
+export declare interface VizelNodeSelectorProps {
+    /** The editor instance */
+    editor: Editor;
+    /** Custom node types (defaults to vizelDefaultNodeTypes) */
+    nodeTypes?: VizelNodeTypeOption[];
+    /** Custom class name */
+    className?: string;
+}
+
+/**
+ * Portal component for rendering content outside the DOM hierarchy.
+ *
+ * Renders children into a portal container at the document body level,
+ * ensuring proper z-index stacking for floating UI elements.
+ *
+ * @example
+ * ```tsx
+ * <VizelPortal layer="dropdown">
+ *   <DropdownMenu />
+ * </VizelPortal>
+ * ```
+ *
+ * @example Disabled portal (renders in place)
+ * ```tsx
+ * <VizelPortal disabled>
+ *   <Content />
+ * </VizelPortal>
+ * ```
+ */
+export declare function VizelPortal({ children, layer, className, disabled, }: VizelPortalProps): ReactNode;
+
+export declare namespace VizelPortal {
+    var displayName: string;
+}
+
+/**
+ * Props for the VizelPortal component.
+ */
+export declare interface VizelPortalProps {
+    /** Content to render in the portal */
+    children: ReactNode;
+    /** Z-index layer for the portal content */
+    layer?: VizelPortalLayer;
+    /** Additional CSS class name */
+    className?: string;
+    /** Whether the portal is disabled (renders children in place) */
+    disabled?: boolean;
+}
+
+export declare interface VizelProps {
+    /** Ref to access editor instance */
+    ref?: Ref<VizelRef>;
+    /** Initial content in JSON format */
+    initialContent?: JSONContent;
+    /**
+     * Initial content in Markdown format.
+     * If both initialContent and initialMarkdown are provided, initialMarkdown takes precedence.
+     * @example
+     * ```tsx
+     * <Vizel initialMarkdown="# Hello World\n\nThis is **bold** text." />
+     * ```
+     */
+    initialMarkdown?: string;
+    /**
+     * Automatically transform diagram code blocks (mermaid, graphviz) to diagram nodes
+     * when importing markdown content. Only applies when initialMarkdown is provided.
+     * @default true
+     */
+    transformDiagramsOnImport?: boolean;
+    /** Placeholder text when editor is empty */
+    placeholder?: string;
+    /** Whether the editor is editable (default: true) */
+    editable?: boolean;
+    /** Auto focus on mount */
+    autofocus?: boolean | "start" | "end" | "all" | number;
+    /** Feature configuration */
+    features?: VizelFeatureOptions;
+    /** Custom class name for the editor container */
+    className?: string;
+    /** Whether to show the bubble menu (default: true) */
+    showBubbleMenu?: boolean;
+    /** Enable embed option in bubble menu link editor (requires Embed extension) */
+    enableEmbed?: boolean;
+    /** Custom bubble menu content */
+    bubbleMenuContent?: ReactNode;
+    /** Additional children to render inside the editor root */
+    children?: ReactNode;
+    /** Callback when content changes */
+    onUpdate?: (props: {
+        editor: Editor;
+    }) => void;
+    /** Callback when editor is created */
+    onCreate?: (props: {
+        editor: Editor;
+    }) => void;
+    /** Callback when editor is destroyed */
+    onDestroy?: () => void;
+    /** Callback when selection changes */
+    onSelectionUpdate?: (props: {
+        editor: Editor;
+    }) => void;
+    /** Callback when editor gets focus */
+    onFocus?: (props: {
+        editor: Editor;
+    }) => void;
+    /** Callback when editor loses focus */
+    onBlur?: (props: {
+        editor: Editor;
+    }) => void;
+}
+
+/**
+ * Provider component for the Vizel editor.
+ * Provides editor context to all child components.
+ *
+ * @example
+ * ```tsx
+ * const editor = useVizelEditor();
+ *
+ * return (
+ *   <VizelProvider editor={editor}>
+ *     <VizelEditor />
+ *     <VizelBubbleMenu />
+ *   </VizelProvider>
+ * );
+ * ```
+ */
+export declare function VizelProvider({ editor, children, className }: VizelProviderProps): JSX.Element;
+
+export declare interface VizelProviderProps {
+    /** The editor instance from useVizelEditor */
+    editor: Editor | null;
+    /** Child components (VizelEditor, VizelBubbleMenu, etc.) */
+    children: ReactNode;
+    /** Optional className for the root container */
+    className?: string;
+}
+
+export declare interface VizelRef {
+    /** The underlying Tiptap editor instance */
+    editor: Editor | null;
+}
+
+/**
+ * Visual indicator for the current save state of the editor.
+ *
+ * @example
+ * ```tsx
+ * <VizelSaveIndicator
+ *   status={status}
+ *   lastSaved={lastSaved}
+ *   showTimestamp
+ * />
+ * ```
+ */
+export declare function VizelSaveIndicator({ status, lastSaved, showTimestamp, className, }: VizelSaveIndicatorProps): JSX.Element;
+
+export declare interface VizelSaveIndicatorProps {
+    /** Current save status */
+    status: VizelSaveStatus;
+    /** Timestamp of last successful save */
+    lastSaved?: Date | null;
+    /** Show relative timestamp (default: true) */
+    showTimestamp?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+
+/**
+ * Slash command menu component for displaying command suggestions.
+ * Supports grouping, keyboard navigation, and fuzzy search highlighting.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage via createVizelSlashMenuRenderer
+ * import { SlashCommand, createVizelSlashMenuRenderer } from '@vizel/react';
+ *
+ * const editor = useEditor({
+ *   extensions: [
+ *     SlashCommand.configure({
+ *       suggestion: createVizelSlashMenuRenderer(),
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+export declare function VizelSlashMenu({ ref, items, command, className, showGroups, renderItem, renderEmpty, groupOrder, }: VizelSlashMenuProps): ReactNode;
+
+/**
+ * An empty state component for the VizelSlashMenu when no results are found.
+ *
+ * @example
+ * ```tsx
+ * {items.length === 0 && (
+ *   <VizelSlashMenuEmpty>No commands found</VizelSlashMenuEmpty>
+ * )}
+ * ```
+ */
+export declare function VizelSlashMenuEmpty({ children, className }: VizelSlashMenuEmptyProps): JSX.Element;
+
+export declare interface VizelSlashMenuEmptyProps {
+    children?: ReactNode;
+    className?: string;
+}
+
+/**
+ * A menu item component for the VizelSlashMenu.
+ * Displays the command icon, title, description, and optional keyboard shortcut.
+ *
+ * @example
+ * ```tsx
+ * <VizelSlashMenuItem
+ *   item={{ title: "Heading 1", icon: "H1", description: "Large heading", shortcut: "⌘⌥1" }}
+ *   isSelected={selectedIndex === 0}
+ *   onClick={() => command(item)}
+ * />
+ * ```
+ */
+export declare function VizelSlashMenuItem({ item, isSelected, onClick, className, titleMatches, }: VizelSlashMenuItemProps): JSX.Element;
+
+export declare interface VizelSlashMenuItemProps {
+    item: VizelSlashCommandItem;
+    isSelected?: boolean;
+    onClick: () => void;
+    className?: string;
+    /** Match indices for highlighting (from fuzzy search) */
+    titleMatches?: [number, number][];
+}
+
+export declare interface VizelSlashMenuProps {
+    /** Ref to access menu methods */
+    ref?: Ref<VizelSlashMenuRef>;
+    items: VizelSlashCommandItem[];
+    command: (item: VizelSlashCommandItem) => void;
+    /** Custom class name for the menu container */
+    className?: string;
+    /** Whether to show items grouped by category (default: true when not searching) */
+    showGroups?: boolean;
+    /** Custom render function for items */
+    renderItem?: (props: {
+        item: VizelSlashCommandItem;
+        isSelected: boolean;
+        onClick: () => void;
+    }) => ReactNode;
+    /** Custom empty state component */
+    renderEmpty?: () => ReactNode;
+    /** Custom group order */
+    groupOrder?: string[];
+}
+
+export declare interface VizelSlashMenuRef {
+    onKeyDown: (props: {
+        event: KeyboardEvent;
+    }) => boolean;
+}
+
+export { VizelSlashMenuRendererOptions }
+
+/**
+ * Theme provider component for managing dark mode
+ *
+ * @example
+ * ```tsx
+ * <VizelThemeProvider defaultTheme="system">
+ *   <App />
+ * </VizelThemeProvider>
+ * ```
+ */
+export declare function VizelThemeProvider({ children, defaultTheme, storageKey, targetSelector, disableTransitionOnChange, }: VizelThemeProviderProps): JSX.Element;
+
+export declare interface VizelThemeProviderProps extends VizelThemeProviderOptions {
+    /** Children to render */
+    children: ReactNode;
+}
+
+export { }