@vizel/vue 0.0.1-alpha.1

package/dist/index.d.ts

@@ -0,0 +1,981 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { ComputedRef } from 'vue';
+import { CustomIconMap } from '@vizel/core';
+import { DefineComponent } from 'vue';
+import { Editor } from '@vizel/core';
+import { JSONContent } from '@vizel/core';
+import { PublicProps } from 'vue';
+import { Ref } from 'vue';
+import { ShallowRef } from 'vue';
+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 { VizelTheme } from '@vizel/core';
+import { VizelThemeProviderOptions } from '@vizel/core';
+import { VizelThemeState } from '@vizel/core';
+
+declare const __VLS_component: DefineComponent<__VLS_PublicProps, {
+/** The underlying Tiptap editor instance */
+editor: Editor | null;
+getEditor: () => Editor | null;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+destroy: () => any;
+blur: (args_0: {
+editor: Editor;
+}) => any;
+focus: (args_0: {
+editor: Editor;
+}) => any;
+create: (args_0: {
+editor: Editor;
+}) => any;
+update: (args_0: {
+editor: Editor;
+}) => any;
+selectionUpdate: (args_0: {
+editor: Editor;
+}) => any;
+"update:markdown": (value: string) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+onDestroy?: () => any;
+onBlur?: (args_0: {
+editor: Editor;
+}) => any;
+onFocus?: (args_0: {
+editor: Editor;
+}) => any;
+onCreate?: (args_0: {
+editor: Editor;
+}) => any;
+onUpdate?: (args_0: {
+editor: Editor;
+}) => any;
+onSelectionUpdate?: (args_0: {
+editor: Editor;
+}) => any;
+"onUpdate:markdown"?: (value: string) => any;
+}>, {
+transformDiagramsOnImport: boolean;
+editable: boolean;
+autofocus: boolean | "start" | "end" | "all" | number;
+enableEmbed: boolean;
+showBubbleMenu: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+declare const __VLS_component_2: DefineComponent<VizelBubbleMenuProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VizelBubbleMenuProps> & Readonly<{}>, {
+pluginKey: string;
+showDefaultMenu: boolean;
+updateDelay: number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+menuRef: HTMLDivElement;
+}, any>;
+
+declare const __VLS_component_3: DefineComponent<VizelBubbleMenuButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+click: () => any;
+}, string, PublicProps, Readonly<VizelBubbleMenuButtonProps> & Readonly<{
+onClick?: () => any;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
+
+declare const __VLS_component_4: DefineComponent<VizelIconProviderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VizelIconProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_component_5: DefineComponent<VizelPortalProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VizelPortalProps> & Readonly<{}>, {
+disabled: boolean;
+layer: VizelPortalLayer;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_component_6: DefineComponent<VizelProviderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VizelProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+declare const __VLS_component_7: DefineComponent<VizelSlashMenuProps, {
+onKeyDown: typeof handleKeyDown;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+command: (item: VizelSlashCommandItem) => any;
+}, string, PublicProps, Readonly<VizelSlashMenuProps> & Readonly<{
+onCommand?: (item: VizelSlashCommandItem) => any;
+}>, {
+showGroups: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+declare const __VLS_component_8: DefineComponent<VizelSlashMenuEmptyProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VizelSlashMenuEmptyProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+declare const __VLS_component_9: DefineComponent<VizelThemeProviderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VizelThemeProviderProps> & Readonly<{}>, {
+defaultTheme: VizelTheme;
+storageKey: string;
+disableTransitionOnChange: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare type __VLS_Props = VizelProps;
+
+declare type __VLS_PublicProps = {
+    "markdown"?: string;
+} & __VLS_Props;
+
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        'bubble-menu'?(_: {
+            editor: Editor;
+        }): any;
+        default?(_: {
+            editor: Editor | null;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+
+declare function __VLS_template_2(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        menuRef: HTMLDivElement;
+    };
+    rootEl: any;
+};
+
+declare function __VLS_template_3(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLButtonElement;
+};
+
+declare function __VLS_template_4(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_5(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_6(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+
+declare function __VLS_template_7(): {
+    attrs: Partial<{}>;
+    slots: {
+        empty?(_: {}): any;
+        item?(_: {
+            item: VizelSlashCommandItem;
+            isSelected: boolean;
+            onClick: () => void;
+        }): any;
+        item?(_: {
+            item: VizelSlashCommandItem;
+            isSelected: boolean;
+            onClick: () => void;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+
+declare function __VLS_template_8(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+
+declare function __VLS_template_9(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+
+declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
+
+declare type __VLS_TemplateResult_3 = ReturnType<typeof __VLS_template_3>;
+
+declare type __VLS_TemplateResult_4 = ReturnType<typeof __VLS_template_4>;
+
+declare type __VLS_TemplateResult_5 = ReturnType<typeof __VLS_template_5>;
+
+declare type __VLS_TemplateResult_6 = ReturnType<typeof __VLS_template_6>;
+
+declare type __VLS_TemplateResult_7 = ReturnType<typeof __VLS_template_7>;
+
+declare type __VLS_TemplateResult_8 = ReturnType<typeof __VLS_template_8>;
+
+declare type __VLS_TemplateResult_9 = ReturnType<typeof __VLS_template_9>;
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_2<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_3<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_4<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_5<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_6<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_7<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_8<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_9<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+/**
+ * Creates a suggestion render configuration for the SlashCommand extension.
+ * This handles the popup positioning and Vue component lifecycle.
+ *
+ * @example
+ * ```ts
+ * import { createVizelSlashMenuRenderer } from '@vizel/vue';
+ * import { VizelSlashCommand } from '@vizel/core';
+ *
+ * const editor = new Editor({
+ *   extensions: [
+ *     VizelSlashCommand.configure({
+ *       suggestion: createVizelSlashMenuRenderer(),
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+export declare function createVizelSlashMenuRenderer(options?: VizelSlashMenuRendererOptions): Partial<SuggestionOptions<VizelSlashCommandItem>>;
+
+declare function handleKeyDown(event: KeyboardEvent): boolean;
+
+/**
+ * Provide custom icon mappings to child components.
+ * Call this in a parent component's setup to customize icons for all descendants.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { provideVizelIcons } from "@vizel/vue";
+ *
+ * // Use Phosphor icons
+ * provideVizelIcons({
+ *   heading1: "ph:text-h-one",
+ *   heading2: "ph:text-h-two",
+ *   bold: "ph:text-b-bold",
+ *   italic: "ph:text-italic",
+ * });
+ * </script>
+ * ```
+ */
+export declare function provideVizelIcons(customIcons?: CustomIconMap): void;
+
+/**
+ * Composable 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
+ * ```vue
+ * <script setup lang="ts">
+ * import { useVizelEditor, useVizelAutoSave, VizelEditor, VizelSaveIndicator } from '@vizel/vue';
+ *
+ * const editor = useVizelEditor({ ... });
+ * const { status, lastSaved, save } = useVizelAutoSave(() => editor.value, {
+ *   debounceMs: 2000,
+ *   storage: 'localStorage',
+ *   key: 'my-document',
+ * });
+ * </script>
+ *
+ * <template>
+ *   <VizelEditor :editor="editor" />
+ *   <VizelSaveIndicator :status="status" :lastSaved="lastSaved" />
+ * </template>
+ * ```
+ */
+export declare function useVizelAutoSave(getEditor: () => Editor | null | undefined, options?: VizelAutoSaveOptions): UseVizelAutoSaveResult;
+
+/**
+ * Auto-save composable result
+ */
+export declare interface UseVizelAutoSaveResult {
+    /** Current save status */
+    status: ComputedRef<VizelSaveStatus>;
+    /** Whether there are unsaved changes */
+    hasUnsavedChanges: ComputedRef<boolean>;
+    /** Timestamp of last successful save */
+    lastSaved: ComputedRef<Date | null>;
+    /** Last error that occurred */
+    error: ComputedRef<Error | null>;
+    /** Manually trigger save */
+    save: () => Promise<void>;
+    /** Restore content from storage */
+    restore: () => Promise<JSONContent | null>;
+}
+
+/**
+ * Composable to access the editor instance from VizelProvider context.
+ * Returns a computed ref that reactively updates when the editor changes.
+ *
+ * @throws Error if used outside of VizelProvider
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { useVizelContext } from '@vizel/vue';
+ *
+ * const editor = useVizelContext();
+ * </script>
+ *
+ * <template>
+ *   <button @click="editor?.chain().focus().toggleBold().run()">
+ *     Bold
+ *   </button>
+ * </template>
+ * ```
+ */
+export declare function useVizelContext(): ComputedRef<Editor | null>;
+
+/**
+ * Composable to access the editor getter from context.
+ * Returns null if used outside of VizelProvider (does not throw).
+ *
+ * @returns A getter function that returns the editor, or null if outside VizelProvider
+ */
+export declare function useVizelContextSafe(): (() => Editor | null) | null;
+
+/**
+ * Vue composable to create and manage a Vizel editor instance.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { useVizelEditor, EditorContent } from '@vizel/vue';
+ *
+ * const editor = useVizelEditor({
+ *   placeholder: "Start typing...",
+ *   onUpdate: ({ editor }) => {
+ *     console.log(editor.getJSON());
+ *   },
+ * });
+ * </script>
+ *
+ * <template>
+ *   <EditorContent :editor="editor" />
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * // With initial markdown content
+ * const editor = useVizelEditor({
+ *   initialMarkdown: "# Hello World\n\nThis is **bold** text.",
+ * });
+ * </script>
+ * ```
+ */
+export declare function useVizelEditor(options?: UseVizelEditorOptions): ShallowRef<Editor | null>;
+
+/**
+ * Options for useVizelEditor composable.
+ * @see VizelCreateEditorOptions for available options.
+ */
+export declare type UseVizelEditorOptions = VizelCreateEditorOptions;
+
+/**
+ * Composable that returns the current editor state and re-renders on state changes.
+ * This is a convenience composable that combines `useVizelState` (for reactivity)
+ * and `getVizelEditorState` (for state extraction).
+ *
+ * @param getEditor - A function that returns the editor instance
+ * @returns A computed ref containing the current editor state
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * const props = defineProps<{ editor: Editor | null }>();
+ * const editorState = useVizelEditorState(() => props.editor);
+ * </script>
+ *
+ * <template>
+ *   <div class="status-bar">
+ *     <span>{{ editorState.characterCount }} characters</span>
+ *     <span>{{ editorState.wordCount }} words</span>
+ *     <button :disabled="!editorState.canUndo">Undo</button>
+ *     <button :disabled="!editorState.canRedo">Redo</button>
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare function useVizelEditorState(getEditor: () => Editor | null | undefined): ComputedRef<VizelEditorState>;
+
+/**
+ * Inject custom icon mappings from parent IconProvider.
+ * Returns an empty object if no provider is present.
+ */
+export declare function useVizelIconContext(): VizelIconContextValue;
+
+/**
+ * Vue composable 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
+ * ```vue
+ * <script setup lang="ts">
+ * import { useVizelEditor, useVizelMarkdown, VizelEditor } from '@vizel/vue';
+ *
+ * const editor = useVizelEditor();
+ * const { markdown, setMarkdown, isPending } = useVizelMarkdown(() => editor.value, {
+ *   debounceMs: 300,
+ * });
+ * </script>
+ *
+ * <template>
+ *   <VizelEditor :editor="editor" />
+ *   <textarea
+ *     :value="markdown"
+ *     @input="setMarkdown(($event.target as HTMLTextAreaElement).value)"
+ *   />
+ *   <span v-if="isPending">Syncing...</span>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * // With initial markdown value
+ * const { markdown, setMarkdown } = useVizelMarkdown(() => editor.value, {
+ *   initialValue: "# Hello World",
+ *   transformDiagrams: true,
+ * });
+ * </script>
+ * ```
+ */
+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: Ref<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: ComputedRef<boolean>;
+    /**
+     * Force immediate export (flush pending debounced export).
+     */
+    flush: () => void;
+}
+
+/**
+ * Composable 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 ref that changes on each editor state update (can be ignored)
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * const props = defineProps<{ editor: Editor }>();
+ * useVizelState(() => props.editor);
+ * </script>
+ * <template>
+ *   <button :class="{ active: props.editor.isActive('bold') }">Bold</button>
+ * </template>
+ * ```
+ */
+export declare function useVizelState(getEditor: () => Editor | null | undefined): Ref<number>;
+
+/**
+ * Composable to access theme state and controls
+ *
+ * Must be used within a VizelThemeProvider
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * const { theme, setTheme, resolvedTheme } = useVizelTheme();
+ * </script>
+ *
+ * <template>
+ *   <button @click="setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')">
+ *     Toggle theme
+ *   </button>
+ * </template>
+ * ```
+ */
+export declare function useVizelTheme(): VizelThemeState;
+
+/**
+ * Composable to access theme state safely (returns null if not in provider)
+ */
+export declare function useVizelThemeSafe(): VizelThemeState | null;
+
+export declare const Vizel: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+
+export declare const VizelBubbleMenu: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
+
+export declare const VizelBubbleMenuButton: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
+
+export declare interface VizelBubbleMenuButtonProps {
+    /** Whether the button is in active state */
+    isActive?: boolean;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Tooltip title */
+    title?: string;
+    /** Custom class name */
+    class?: string;
+    /** Action identifier for testing */
+    action?: string;
+}
+
+export declare const VizelBubbleMenuColorPicker: DefineComponent<VizelBubbleMenuColorPickerProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VizelBubbleMenuColorPickerProps> & Readonly<{}>, {
+allowCustomColor: boolean;
+showRecentColors: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+containerRef: HTMLDivElement;
+}, HTMLDivElement>;
+
+export declare interface VizelBubbleMenuColorPickerProps {
+    /** The editor instance */
+    editor: Editor;
+    /** Color picker type */
+    type: "textColor" | "highlight";
+    /** Custom color palette */
+    colors?: VizelColorDefinition[];
+    /** Custom class name */
+    class?: string;
+    /** Enable custom color input (default: true) */
+    allowCustomColor?: boolean;
+    /** Enable recent colors (default: true) */
+    showRecentColors?: boolean;
+}
+
+export declare const VizelBubbleMenuDefault: DefineComponent<VizelBubbleMenuDefaultProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VizelBubbleMenuDefaultProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+export declare interface VizelBubbleMenuDefaultProps {
+    /** The editor instance */
+    editor: Editor;
+    /** Custom class name */
+    class?: string;
+    /** Enable embed option in link editor (requires Embed extension) */
+    enableEmbed?: boolean;
+}
+
+export declare const VizelBubbleMenuDivider: DefineComponent<VizelBubbleMenuDividerProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VizelBubbleMenuDividerProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
+
+export declare interface VizelBubbleMenuDividerProps {
+    /** Custom class name */
+    class?: string;
+}
+
+export declare interface VizelBubbleMenuProps {
+    /** Override the editor from context */
+    editor?: Editor;
+    /** Custom class name for the menu container */
+    class?: string;
+    /** 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;
+}
+
+export declare const VizelColorPicker: DefineComponent<VizelColorPickerProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+change: (color: string) => any;
+"update:modelValue": (color: string) => any;
+}, string, PublicProps, Readonly<VizelColorPickerProps> & Readonly<{
+onChange?: (color: string) => any;
+"onUpdate:modelValue"?: (color: string) => any;
+}>, {
+label: string;
+allowCustomColor: boolean;
+recentColors: string[];
+showRecentColors: boolean;
+noneValues: string[];
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+inputRef: HTMLInputElement;
+}, HTMLDivElement>;
+
+export declare interface VizelColorPickerProps {
+    /** Color palette to display */
+    colors: VizelColorDefinition[];
+    /**
+     * Currently selected color (v-model supported)
+     * @deprecated Use modelValue instead for v-model binding
+     */
+    value?: string;
+    /** Currently selected color for v-model binding */
+    modelValue?: string;
+    /** Label for accessibility */
+    label?: string;
+    /** Custom class name */
+    class?: 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[];
+}
+
+export declare const VizelEditor: DefineComponent<VizelEditorProps, {
+/** The container DOM element */
+container: HTMLDivElement | null;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VizelEditorProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+containerRef: HTMLDivElement;
+}, any>;
+
+export declare interface VizelEditorProps {
+    /** Override the editor from context */
+    editor?: Editor | null;
+    /** Custom class name */
+    class?: string;
+}
+
+export declare const VizelEmbedView: DefineComponent<VizelEmbedViewProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VizelEmbedViewProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+containerRef: HTMLDivElement;
+}, any>;
+
+export declare interface VizelEmbedViewProps {
+    /** Embed data */
+    data: VizelEmbedData;
+    /** Additional class name */
+    class?: string;
+    /** Whether the embed is selected */
+    selected?: boolean;
+}
+
+export declare interface VizelExposed {
+    /** The container DOM element */
+    container: HTMLDivElement | null;
+}
+
+export declare const VizelIcon: DefineComponent<VizelIconProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VizelIconProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+export declare interface VizelIconProps {
+    /**
+     * 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;
+    /**
+     * Icon width in pixels or CSS value.
+     */
+    width?: string | number;
+    /**
+     * Icon height in pixels or CSS value.
+     */
+    height?: string | number;
+    /**
+     * Icon color.
+     */
+    color?: string;
+}
+
+export declare const VizelIconProvider: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
+
+/**
+ * Props for VizelIconProvider component.
+ */
+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
+     * ```vue
+     * <template>
+     *   <!-- 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>
+     * </template>
+     * ```
+     */
+    icons?: CustomIconMap;
+}
+
+export declare const VizelLinkEditor: DefineComponent<VizelLinkEditorProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+close: () => any;
+}, string, PublicProps, Readonly<VizelLinkEditorProps> & Readonly<{
+onClose?: () => any;
+}>, {
+enableEmbed: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+formRef: HTMLFormElement;
+inputRef: HTMLInputElement;
+}, HTMLFormElement>;
+
+export declare interface VizelLinkEditorProps {
+    /** The editor instance */
+    editor: Editor;
+    /** Custom class name */
+    class?: string;
+    /** Enable embed option (requires Embed extension) */
+    enableEmbed?: boolean;
+}
+
+export declare const VizelNodeSelector: DefineComponent<VizelNodeSelectorProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VizelNodeSelectorProps> & Readonly<{}>, {
+nodeTypes: VizelNodeTypeOption[];
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+containerRef: HTMLDivElement;
+dropdownRef: HTMLDivElement;
+}, HTMLDivElement>;
+
+export declare interface VizelNodeSelectorProps {
+    /** The editor instance */
+    editor: Editor;
+    /** Custom node types (defaults to vizelDefaultNodeTypes) */
+    nodeTypes?: VizelNodeTypeOption[];
+    /** Custom class name */
+    class?: string;
+}
+
+export declare const VizelPortal: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
+
+/**
+ * Props for the Portal component.
+ */
+export declare interface VizelPortalProps {
+    /** Z-index layer for the portal content */
+    layer?: VizelPortalLayer;
+    /** Additional CSS class name */
+    class?: string;
+    /** Whether the portal is disabled (renders children in place) */
+    disabled?: boolean;
+}
+
+export declare interface VizelProps {
+    /** Initial content in JSON format */
+    initialContent?: JSONContent;
+    /**
+     * Initial content in Markdown format.
+     * If both initialContent and initialMarkdown are provided, initialMarkdown takes precedence.
+     * @example
+     * ```vue
+     * <Vizel initial-markdown="# 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 */
+    class?: string;
+    /** Whether to show the bubble menu (default: true) */
+    showBubbleMenu?: boolean;
+    /** Enable embed option in bubble menu link editor (requires Embed extension) */
+    enableEmbed?: boolean;
+}
+
+export declare const VizelProvider: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
+
+export declare interface VizelProviderProps {
+    /** The editor instance */
+    editor: Editor | null;
+    /** Custom class name */
+    class?: string;
+}
+
+/**
+ * Exposed ref type for Vizel component.
+ * Use with `ref` attribute to access the editor instance.
+ */
+export declare interface VizelRef {
+    /** The underlying Tiptap editor instance */
+    editor: Editor | null;
+}
+
+export declare const VizelSaveIndicator: DefineComponent<VizelSaveIndicatorProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VizelSaveIndicatorProps> & Readonly<{}>, {
+showTimestamp: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+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 */
+    class?: string;
+}
+
+export declare const VizelSlashMenu: __VLS_WithTemplateSlots_7<typeof __VLS_component_7, __VLS_TemplateResult_7["slots"]>;
+
+export declare const VizelSlashMenuEmpty: __VLS_WithTemplateSlots_8<typeof __VLS_component_8, __VLS_TemplateResult_8["slots"]>;
+
+export declare interface VizelSlashMenuEmptyProps {
+    /** Custom class name */
+    class?: string;
+}
+
+export declare const VizelSlashMenuItem: DefineComponent<VizelSlashMenuItemProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+click: () => any;
+}, string, PublicProps, Readonly<VizelSlashMenuItemProps> & Readonly<{
+onClick?: () => any;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
+
+export declare interface VizelSlashMenuItemProps {
+    /** The slash command item to display */
+    item: VizelSlashCommandItem;
+    /** Whether the item is selected */
+    isSelected?: boolean;
+    /** Custom class name */
+    class?: string;
+    /** Match indices for highlighting (from fuzzy search) */
+    titleMatches?: [number, number][];
+}
+
+export declare interface VizelSlashMenuProps {
+    /** The list of slash command items */
+    items: VizelSlashCommandItem[];
+    /** Custom class name */
+    class?: string;
+    /** Whether to show items grouped by category (default: true when not searching) */
+    showGroups?: boolean;
+    /** Custom group order */
+    groupOrder?: string[];
+}
+
+/**
+ * Ref interface for VizelSlashMenu component.
+ * Exposes keyboard navigation handler for parent components.
+ */
+export declare interface VizelSlashMenuRef {
+    /** Handle keyboard navigation events (ArrowUp, ArrowDown, Enter, Tab) */
+    onKeyDown: (props: {
+        event: KeyboardEvent;
+    }) => boolean;
+}
+
+export { VizelSlashMenuRendererOptions }
+
+export declare const VizelThemeProvider: __VLS_WithTemplateSlots_9<typeof __VLS_component_9, __VLS_TemplateResult_9["slots"]>;
+
+export declare interface VizelThemeProviderProps extends VizelThemeProviderOptions {
+}
+
+export { }