import { Editor } from 'tldraw';
import { ForwardRefExoticComponent } from 'react';
import { JsonObject } from 'tldraw';
import { JSX } from 'react/jsx-runtime';
import { MentionNodeAttrs } from '@tiptap/extension-mention';
import { MentionOptions } from '@tiptap/extension-mention';
import { Node as Node_2 } from 'tldraw';
import { ReactNode } from 'react';
import { RefAttributes } from 'react';
import type { SuggestionOptions } from '@tiptap/suggestion';

/** A person's avatar — their image if provided, otherwise a single-initial coloured circle.
 * @public @react */
export declare function Avatar({ author }: AvatarProps): JSX.Element;

/** @public */
export declare interface AvatarProps {
    author: CommentAuthor;
}

/** A comment author's display identity, resolved from an author id.
 * @public */
export declare interface CommentAuthor {
    name: string;
    /** The author's color (any CSS color) — colors their avatar and pins.
     *  Omit for the default tint. */
    color?: string;
    /** Avatar image URL. When set, avatars show the image instead of the colored initial;
     *  the canvas pin keeps the initial-on-color. */
    image?: string;
    /** User-defined metadata for the author, never read by the toolkit (like a shape's `meta`). */
    meta?: JsonObject;
}

/**
 * The \@-mention node — TipTap's `Mention` configured to render as a `.tlui-cmt-mention` pill.
 *
 * A factory rather than a shared constant because it's configured differently per context: the
 * read-only render paths pass `resolveName` (so the stored `{ id }` node always shows the member's
 * current name, not a copy frozen at insert time), while an editor passes a `suggestion` (the `@`
 * picker). Shape rich text passes both — the same extension both edits and renders. The node schema
 * is identical either way — only these two levers differ.
 * @public
 */
export declare function createMentionExtension({ resolveName, suggestion }?: MentionExtensionOptions): Node_2<MentionOptions<any, MentionNodeAttrs>, any>;

/**
 * Build the TipTap `suggestion` config for the \@-picker. `getSuggestions(query)` is the host's
 * resolver — the SDK owns neither the roster nor the filtering. The plugin runs outside React, so
 * `render` mounts `MentionPopup` via a `ReactRenderer` and forwards navigation keys to it.
 * @public
 */
export declare function createMentionSuggestion(getSuggestions: (query: string) => MentionMember[] | Promise<MentionMember[]>, options?: MentionSuggestionOptions): Omit<SuggestionOptions<MentionMember, MentionNodeAttrs>, 'editor'>;

/** Members whose name contains the query (case-insensitive), capped to the popup's length.
 * @public */
export declare function filterMentionMembers(members: MentionMember[], query: string): MentionMember[];

/**
 * Whether the \@-mention picker is currently showing. Host dismissal (Escape, outside-click) checks
 * this so it can defer to the picker instead of tearing down the composer or thread beneath it.
 * @public
 */
export declare function isMentionPickerOpen(): boolean;

/** An \@-mention pill for referencing a person. @public @react */
export declare function Mention({ name }: MentionProps): JSX.Element;

/** @public */
export declare interface MentionExtensionOptions {
    /**
     * Resolve a member id to its current display name — for the read-only render paths, and for the
     * editor while a mention is displayed. Returns `undefined` when the id can't be resolved, so the
     * render falls back to the mention's stored label.
     */
    resolveName?(id: string): string | undefined;
    /** The `@`-picker suggestion config — for editing (omit on read-only render paths). */
    suggestion?: MentionOptions['suggestion'];
}

/**
 * The \@-mention member picker: a popover list of people to mention, shown as the user types after
 * `@`. Presentational — the composer's suggestion plugin owns resolution, keyboard navigation, and
 * placement, and drives this with the host-resolved `members` and the highlighted `activeIndex`.
 * @public @react
 */
export declare const MentionList: ForwardRefExoticComponent<MentionListProps & RefAttributes<HTMLDivElement>>;

/** @public */
export declare interface MentionListProps {
    /** Members to choose from — already resolved for the current query by the host. */
    members: MentionMember[];
    /** Index of the highlighted row, driven by the composer's keyboard navigation. */
    activeIndex?: number;
    /** Called when a member is chosen (click, or Enter on the active row). */
    onSelect?(member: MentionMember): void;
    /** Shown when no member matches the query. Defaults to a translated "No matches". */
    emptyLabel?: string;
    /** Override a row's content (inside the selectable button). Defaults to avatar + name (+ secondary). */
    renderMember?(member: MentionMember): ReactNode;
}

/** A person the composer's \@-mention picker can offer: a {@link CommentAuthor} plus its id and
 * picker-only display fields. @public */
export declare interface MentionMember extends CommentAuthor {
    id: string;
    /** A secondary line under the name — e.g. an email or handle. Omit for a single-line row. */
    secondary?: string;
    /** Marks the current user; shown as a "(You)" suffix after the name. */
    you?: boolean;
    /** Hosts may carry extra fields; a custom `renderMember` can read them. */
    [key: string]: unknown;
}

/** @public */
export declare interface MentionProps {
    name: string;
}

/** @public */
export declare interface MentionSuggestionOptions {
    /** Override a member row's content in the picker. Defaults to avatar + name (+ secondary). */
    renderMember?(member: MentionMember): ReactNode;
    /**
     * The tldraw editor the composer lives in. When provided, the popup re-anchors reactively as the
     * canvas camera moves (the composer rides it) instead of polling every frame. Omit off-canvas.
     */
    editor?: null | Editor;
}

export { }