@h-k-dev/angular-email-editor 0.0.0-stage → 0.0.2

package/types/h-k-dev-angular-email-editor-metrics.d.ts

@@ -0,0 +1,110 @@
+import { Node } from 'prosemirror-model';
+import { PreparedText } from '@chenglou/pretext';
+import { PreparedRichInline } from '@chenglou/pretext/rich-inline';
+import { FunctionalExtension } from '@h-k-dev/angular-email-editor';
+
+/**
+ * Math-based text measurement for the editor document, built on
+ * `@chenglou/pretext`. Block heights and line counts are computed from cached
+ * canvas glyph widths instead of DOM reads (`offsetHeight`,
+ * `getBoundingClientRect`), so measuring never triggers a layout reflow.
+ */
+/** Typography of the live editor surface, read from computed style once. */
+interface EditorTypography {
+    fontFamily: string;
+    /** Body text size in px. */
+    fontSize: number;
+    fontWeight: number;
+    fontStyle: string;
+    /** Body line height in px. */
+    lineHeight: number;
+    /** Vertical gap between sibling top-level blocks (`--prose-gap`), px. */
+    blockGap: number;
+    /** Heading font-size factors for levels 1-6, relative to the body size. */
+    headingScale: readonly number[];
+    /** Horizontal space consumed by wrapper blocks, px. */
+    indents: {
+        blockquote: number;
+        list: number;
+        /** Vertical gap between adjacent list items, px. */
+        listItemGap: number;
+    };
+}
+/**
+ * Reads the typography pretext needs from the editor's computed style. One
+ * DOM read at startup (and again once webfonts settle) — never per keystroke.
+ */
+declare function readTypography(dom: HTMLElement): EditorTypography;
+interface TextMetrics {
+    words: number;
+    characters: number;
+    /** Wrapped line count across all text blocks at the current width. */
+    lines: number;
+    /**
+     * Estimated rendered height of the document in px, block gaps included.
+     * Text-only: atom blocks (images) contribute no height since their
+     * rendered size isn't knowable without loading them.
+     */
+    estimatedHeight: number;
+}
+/**
+ * Prepared measurements for one textblock. Single-font blocks (the common
+ * case in email) go through `prepare()` with `pre-wrap`, matching the editor
+ * CSS exactly — hard breaks become `\n` in one prepared handle. Blocks with
+ * mark-dependent fonts (bold/italic) use the rich-inline API, one prepared
+ * handle per hard-break segment — `pre-wrap` too, so a bold word's line
+ * breaks and spaces count exactly as the plain line's.
+ */
+type PreparedBlock = {
+    kind: 'plain';
+    prepared: PreparedText;
+} | {
+    kind: 'rich';
+    segments: PreparedRichInline[];
+};
+interface CachedBlock {
+    block: PreparedBlock;
+    lineHeight: number;
+    words: number;
+    characters: number;
+    /** Line count memoised for the last width measured at. */
+    lastWidth: number;
+    lastLines: number;
+}
+/**
+ * Measurement cache keyed on ProseMirror's immutable nodes: blocks untouched
+ * by a transaction keep their node identity, so across keystrokes only the
+ * edited block is ever re-prepared. Create one per editor view; replace it
+ * wholesale to invalidate (e.g. after webfonts load).
+ */
+type BlockMeasureCache = WeakMap<Node, CachedBlock>;
+declare const createBlockMeasureCache: () => BlockMeasureCache;
+/**
+ * Measures the whole document at the given content width. Pure arithmetic
+ * over cached glyph widths — no DOM access.
+ */
+declare function measureDoc(doc: Node, contentWidth: number, typography: EditorTypography, cache: BlockMeasureCache): TextMetrics;
+
+interface TextMetricsOptions {
+    /** Called with fresh metrics after every doc change and width resize. */
+    onMetrics: (metrics: TextMetrics) => void;
+    /** Called when a measurement fails — no canvas to measure with (a server
+        render, jsdom), or a font the browser cannot use. The editor goes on
+        unharmed; that measurement reports nothing, and the next change, or
+        the web fonts arriving, tries again. */
+    onError?: (error: unknown) => void;
+}
+/**
+ * Live document metrics (words, lines, estimated height) computed with
+ * `@chenglou/pretext` — pure arithmetic over cached glyph widths, no DOM
+ * measurement on the keystroke path. Unchanged blocks are never re-measured:
+ * the cache keys on ProseMirror's immutable nodes.
+ *
+ * Metrics are an extra, never a dependency of the editor: a measurement
+ * that throws is reported through `onError` and skipped, and without a
+ * `ResizeObserver` the width read at mount stands.
+ */
+declare const createTextMetrics: (options: TextMetricsOptions) => FunctionalExtension;
+
+export { createBlockMeasureCache, createTextMetrics, measureDoc, readTypography };
+export type { BlockMeasureCache, EditorTypography, TextMetrics, TextMetricsOptions };

package/types/h-k-dev-angular-email-editor-palette.d.ts

@@ -0,0 +1,51 @@
+import { InjectionToken, Provider } from '@angular/core';
+import { PaletteColor, ExtensionContext, SuggestionCommandItem } from '@h-k-dev/angular-email-editor';
+
+/** The colours a host offers: for text, and for a background. */
+interface EmailPalette {
+    readonly text: readonly PaletteColor[];
+    readonly background: readonly PaletteColor[];
+}
+/** The library's own palette — the swatches that pass on both a light and a
+    dark client (`emailTextPalette`, `emailBackgroundPalette`). */
+declare const emailPalette: EmailPalette;
+/** A host's palette: either list, the other staying the library's — or a
+    function of the library's palette, to mix: keep it and add a brand
+    colour, take a few out, replace one side. */
+type EmailPaletteConfig = Partial<EmailPalette> | ((defaults: EmailPalette) => Partial<EmailPalette>);
+/**
+ * The palette in use — the library's unless a host provides its own
+ * ({@link providePalette}). What the colour pickers offer and what the `/`
+ * menu's colour rows are made of ({@link colorSuggestions}).
+ */
+declare const EMAIL_PALETTE: InjectionToken<EmailPalette>;
+/** The palette a config comes to, over the library's. */
+declare function resolvePalette(config: EmailPaletteConfig): EmailPalette;
+/**
+ * Makes a palette the app's — in `appConfig.providers`, or a component's:
+ *
+ *     providePalette({ text: BRAND_TEXT_COLORS })
+ *     providePalette((defaults) => ({
+ *       text: [...defaults.text, { name: 'Brand', value: '#0a5c36' }],
+ *     }))
+ *
+ * Every colour goes into an email as written: keep to what a client shows
+ * on both a light and a dark page (`passesDualContrast`).
+ */
+declare function providePalette(config: EmailPaletteConfig): Provider;
+/** The palette in use, in an injection context. */
+declare function injectPalette(): EmailPalette;
+/**
+ * The palette as rows of a `/` menu, the way a chat's slash menu lists
+ * colours: "Red text", "Red background" — one row per colour of either
+ * side, in the section `color`, each carrying its `swatch`. Picked, a row
+ * colours the selection, or what is typed next at a bare caret (the
+ * `TextStyle` mark's `setColor` / `setBackgroundColor`); nothing, when the
+ * kit has no `TextStyle`.
+ *
+ *     items: (ctx) => [...extensionSuggestions(ctx), ...colorSuggestions(ctx, palette)]
+ */
+declare function colorSuggestions(ctx: ExtensionContext, palette: EmailPalette): SuggestionCommandItem[];
+
+export { EMAIL_PALETTE, colorSuggestions, emailPalette, injectPalette, providePalette, resolvePalette };
+export type { EmailPalette, EmailPaletteConfig };

package/types/h-k-dev-angular-email-editor-proposal.d.ts

@@ -0,0 +1,170 @@
+import * as i0 from '@angular/core';
+import { Signal, Injector } from '@angular/core';
+import { ContentStreamRange, ContentStreamWriter, StreamContentOptions, ContentStreamRun, Editor } from '@h-k-dev/angular-email-editor';
+import { AnchorRect } from '@h-k-dev/angular-email-editor/anchor';
+
+/**
+ * A proposal in an editor, as a host's panel sees it: what is proposed and
+ * whether it is still coming, where it stands, and the three things to do
+ * about it. The reactive face of `proposeContent` / `acceptProposal` /
+ * `discardProposal` (the main entry, which needs `createContentProposal()`
+ * and `createContentStream()` in the kit).
+ */
+interface EditorProposal {
+    /** Something is proposed — written into the text, not the writer's yet. */
+    readonly active: Signal<boolean>;
+    /** The proposal is still being written. */
+    readonly streaming: Signal<boolean>;
+    /** Asked, and nothing has come yet: the model is thinking — for a host
+        to show it, since there is nothing in the text to see. */
+    readonly thinking: Signal<boolean>;
+    /** Where it stands, in the document. */
+    readonly range: Signal<ContentStreamRange | null>;
+    /** Its box in viewport coordinates — the last line's, for a panel to
+        stand under; a caret's when nothing is proposed yet. Measured anew on
+        every change of the editor, so it follows the writing. */
+    readonly box: Signal<AnchorRect | null>;
+    /** Proposes content at the selection (or at `target`), written by
+        `callback` — see `streamContent` for the writer and the options. A
+        proposal already there is discarded first. `null` without an editor. */
+    propose(callback: (writer: ContentStreamWriter) => Promise<void> | void, options?: Omit<StreamContentOptions, 'history'> & {
+        target?: number | ContentStreamRange;
+    }): ContentStreamRun | null;
+    /** Writes a part of the proposal again — `range`, inside it, or the
+        editor's selection when it lies inside — the rest standing. `null`
+        when there is no proposal holding it. */
+    revise(callback: (writer: ContentStreamWriter) => Promise<void> | void, options?: Omit<StreamContentOptions, 'history'> & {
+        range?: ContentStreamRange;
+    }): ContentStreamRun | null;
+    /** The editor's selection, when it is a range inside the proposal —
+        what {@link revise} would write again; null otherwise. */
+    readonly selectedPart: Signal<ContentStreamRange | null>;
+    /** Stops the writing where it is; what is proposed stays proposed. */
+    stop(): void;
+    /** Takes the proposal into the document: one change, one undo. */
+    accept(): boolean;
+    /** Takes it out, as if never written. */
+    discard(): boolean;
+}
+/**
+ * The proposal of an editor, bound and live — for a host's own panel: an
+ * input of its choosing to ask with, and buttons to accept or discard:
+ *
+ *     readonly proposal = injectProposal(() => this.editor());
+ *
+ *     this.proposal.propose(async ({ write, signal }) => {
+ *       for await (const piece of model.write(prompt, { signal })) write(piece);
+ *     }, { format: 'html' });
+ *
+ *     <button [emailProposalAccept]="proposal">Apply</button>
+ *     <button [emailProposalDiscard]="proposal">Discard</button>
+ *
+ * `editor` is read reactively: the proposal follows the editor it is given.
+ * Call in an injection context, or hand it an injector.
+ */
+declare function injectProposal(editor: () => Editor | undefined, options?: {
+    injector?: Injector;
+}): EditorProposal;
+/**
+ * The proposal of an editor, as a directive: put it on the element that
+ * holds the host's panel — the chat, the buttons — and everything inside
+ * has it, by injection, with nothing to bind:
+ *
+ *     <div [emailProposal]="editor" #p="emailProposal">
+ *       <button emailProposalAccept [disabled]="!p.active()">Apply</button>
+ *       <button emailProposalDiscard>Discard</button>
+ *     </div>
+ *
+ * The directive *is* the {@link EditorProposal}: `p.active()`,
+ * `p.propose(…)`, `p.accept()` — the same face `injectProposal` gives a
+ * class, for a host that lives in its template. The two are one thing
+ * looked at from two sides; a trigger takes either, bound or injected.
+ */
+declare class Proposal implements EditorProposal {
+    #private;
+    /** The editor the proposal is in — read reactively, so it may come
+        later, or change. */
+    readonly editor: i0.InputSignal<Editor | undefined>;
+    readonly active: Signal<boolean>;
+    readonly streaming: Signal<boolean>;
+    readonly thinking: Signal<boolean>;
+    readonly range: Signal<ContentStreamRange | null>;
+    readonly box: Signal<AnchorRect | null>;
+    readonly selectedPart: Signal<ContentStreamRange | null>;
+    propose(...args: Parameters<EditorProposal['propose']>): ContentStreamRun | null;
+    revise(...args: Parameters<EditorProposal['revise']>): ContentStreamRun | null;
+    stop(): void;
+    accept(): boolean;
+    discard(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Proposal, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Proposal, "[emailProposal]", ["emailProposal"], { "editor": { "alias": "emailProposal"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Makes the host's own button the one that accepts the proposal: a click
+ * takes it into the document and hands the caret back; disabled — by the
+ * host's own means, bound from `disabled()` — while nothing is proposed or
+ * it is still being written. The proposal is bound, or, bare, the
+ * `[emailProposal]` ancestor's.
+ *
+ *     <button mat-button [emailProposalAccept]="proposal" #apply="emailProposalAccept"
+ *             [disabled]="apply.disabled()">Apply</button>
+ */
+declare class ProposalAccept {
+    #private;
+    readonly proposal: i0.InputSignalWithTransform<EditorProposal | undefined, "" | EditorProposal | undefined>;
+    readonly disabled: Signal<boolean>;
+    run(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProposalAccept, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ProposalAccept, "[emailProposalAccept]", ["emailProposalAccept"], { "proposal": { "alias": "emailProposalAccept"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Makes the host's own button the one that discards the proposal: a click
+ * takes it out, wherever the writing has got to. The proposal is bound,
+ * or, bare, the `[emailProposal]` ancestor's.
+ *
+ *     <button mat-button [emailProposalDiscard]="proposal">Discard</button>
+ */
+declare class ProposalDiscard {
+    #private;
+    readonly proposal: i0.InputSignalWithTransform<EditorProposal | undefined, "" | EditorProposal | undefined>;
+    readonly disabled: Signal<boolean>;
+    run(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProposalDiscard, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ProposalDiscard, "[emailProposalDiscard]", ["emailProposalDiscard"], { "proposal": { "alias": "emailProposalDiscard"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * The keys of a proposal, heard from anywhere on the page — the text, the
+ * host's input, a button — while one stands, before anything else hears
+ * them (the document, capture phase):
+ *
+ * - **Ctrl-Enter** (⌘-Enter on a Mac) accepts: a proposal on the table is
+ *   what the key commits, and whatever the editor binds to it (a send,
+ *   say) never sees it. While the proposal is still being written the key
+ *   is swallowed — nothing is sent, nothing is applied; one thing at a
+ *   time. `accepted` says it happened.
+ * - **Escape** is the host's: `escape` carries the event, and the host
+ *   decides — close a menu over the text first, or let the proposal go —
+ *   because what else is open is the host's to know. Nothing is prevented
+ *   or stopped for it; the host does that on the event if it acts.
+ *
+ * Nothing is heard while nothing is proposed, and an IME's own keys stay
+ * the IME's. The proposal is bound, or, bare, the `[emailProposal]`
+ * ancestor's.
+ *
+ *     <div [emailProposal]="editor" emailProposalKeys
+ *          (accepted)="done()" (escape)="$event.preventDefault(); leave()">
+ */
+declare class ProposalKeys {
+    #private;
+    readonly proposal: i0.InputSignalWithTransform<EditorProposal | undefined, "" | EditorProposal | undefined>;
+    /** Ctrl-Enter (⌘-Enter) took the proposal into the document. */
+    readonly accepted: i0.OutputEmitterRef<void>;
+    /** Escape, with a proposal standing — for the host to act on. */
+    readonly escape: i0.OutputEmitterRef<KeyboardEvent>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProposalKeys, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ProposalKeys, "[emailProposalKeys]", ["emailProposalKeys"], { "proposal": { "alias": "emailProposalKeys"; "required": false; "isSignal": true; }; }, { "accepted": "accepted"; "escape": "escape"; }, never, never, true, never>;
+}
+
+export { Proposal, ProposalAccept, ProposalDiscard, ProposalKeys, injectProposal };
+export type { EditorProposal };

package/types/h-k-dev-angular-email-editor-suggestion-menu.d.ts

@@ -0,0 +1,177 @@
+import * as _h_k_dev_angular_email_editor from '@h-k-dev/angular-email-editor';
+import { SuggestionGroup, SuggestionMenuState, SuggestionItem } from '@h-k-dev/angular-email-editor';
+import * as _angular_core from '@angular/core';
+import { TemplateRef, ElementRef } from '@angular/core';
+
+/**
+ * A suggestion menu's header slot, shown on level 2 above the group's
+ * children. The default is a back button and the group's title; a host
+ * that wants its own — a Material icon button, the group's icon, a
+ * breadcrumb — hands the menu a template:
+ *
+ *     <div email-suggestion-menu [state]="state()">
+ *       <ng-template emailSuggestionMenuHeader let-group let-back="back" let-label="backLabel">
+ *         <button mat-icon-button tabindex="-1" [attr.aria-label]="label" (click)="back()">
+ *           <mat-icon>arrow_back</mat-icon>
+ *         </button>
+ *         {{ group.title }}
+ *       </ng-template>
+ *       …
+ *     </div>
+ *
+ * The template renders inside the menu's own `header` box.
+ */
+/** What the header template is given. */
+interface SuggestionMenuHeaderContext {
+    /** The group whose children are listed — its title already translated. */
+    readonly $implicit: SuggestionGroup;
+    /** Back to level 1 with an empty query. */
+    readonly back: () => void;
+    /** The back control's accessible name, as the menu was given it. */
+    readonly backLabel: string;
+}
+/** Marks the `ng-template` the menu renders as its level-2 header. */
+declare class SuggestionMenuHeader {
+    readonly template: TemplateRef<SuggestionMenuHeaderContext>;
+    static ngTemplateContextGuard(_directive: SuggestionMenuHeader, context: unknown): context is SuggestionMenuHeaderContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuggestionMenuHeader, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SuggestionMenuHeader, "ng-template[emailSuggestionMenuHeader]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * A suggestion menu's floating box — the element `createSuggestionMenu` is
+ * given, rendered from the state it reports. The extension does the work
+ * (finding the trigger, filtering, paging, the keys, placing the box,
+ * applying); this gives the state its roles and ids, so the editor's
+ * `aria-controls` and `aria-activedescendant` land on real elements, keeps
+ * the next page coming as the list scrolls, and says what is going on.
+ *
+ * **The pair.** The menu is the container; the host renders one
+ * `[email-suggestion-menu-item]` per item into it and decides what a row
+ * shows (an icon, the title, a detail). Rows are options of the menu's
+ * listbox and never take focus: the caret stays in the editor, which is the
+ * combobox. One pair serves every trigger — `/`, `{{`, `||` — at once: they
+ * never open together, so a menu of several triggers is still one element
+ * and one state, which says whose list it is (`trigger`, `label`).
+ *
+ *     <div email-suggestion-menu #menu [state]="state()">
+ *       @for (item of state()?.items; track item.id) {
+ *         <div email-suggestion-menu-item [item]="item">{{ item.title }}</div>
+ *       }
+ *     </div>
+ *
+ *     createSuggestionMenu({ element: menu, onChange: (s) => state.set(s), triggers: [
+ *       { trigger: '/', label: 'Insert block', items: extensionSuggestions },
+ *       { trigger: '{{', label: 'Tokens', source: fetchMergeTags },
+ *     ] })
+ *
+ * **Two levels.** Inside a group the menu shows a header above the list — a
+ * back button and the group's title by default, or the host's
+ * `ng-template[emailSuggestionMenuHeader]` — names the listbox after the
+ * group, and says "No results" rather than closing when nothing matches.
+ *
+ * **Said twice, differently.** What is going on shows as a line under the
+ * list, at once. A screen reader hears it from a separate live region that
+ * waits for the typing to settle (`announceDelay`) and also counts the
+ * results — the highlighted option's id does not change when the list is
+ * filtered under it, so nothing else would say the list is a new one.
+ *
+ * Every word it says is an input, English by default.
+ */
+declare class SuggestionMenu {
+    #private;
+    /** The extension's latest state — undefined before the editor mounts. */
+    readonly state: _angular_core.InputSignal<SuggestionMenuState | undefined>;
+    /** Names the listbox on level 1 when the open trigger has no `label` of
+        its own — a menu of several triggers names each list there ("Insert
+        block", "Personalization tokens"); level 2 is named by its group. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** The level-2 back button's accessible name. */
+    readonly backLabel: _angular_core.InputSignal<string>;
+    /** Said while a source is still searching. */
+    readonly loadingLabel: _angular_core.InputSignal<string>;
+    /** Said on level 2 when nothing matches. */
+    readonly emptyLabel: _angular_core.InputSignal<string>;
+    /** Said while a further page is on its way. */
+    readonly loadingMoreLabel: _angular_core.InputSignal<string>;
+    /** Said when the source's answer failed. */
+    readonly errorLabel: _angular_core.InputSignal<string>;
+    /** Announced once a list is in: how many rows it has. */
+    readonly resultsLabel: _angular_core.InputSignal<(count: number) => string>;
+    /** Milliseconds the announcement waits for the typing to settle, so a
+        screen reader hears the list that stayed, not one per letter. Going
+        quiet (the menu closes) never waits. 0 announces at once. */
+    readonly announceDelay: _angular_core.InputSignal<number>;
+    /** Gap between the trigger's line and the menu, in px. */
+    readonly offset: _angular_core.InputSignal<number>;
+    /** The keyboard-highlighted row's index; -1 before there is a state. */
+    readonly activeIndex: _angular_core.Signal<number>;
+    /** The extension's id for the option at an index — the same function for
+        the menu's whole life. */
+    readonly optionId: _angular_core.Signal<((index: number) => string) | undefined>;
+    /** Where `item` sits in the current list; -1 when it is not in it. */
+    indexOf(item: SuggestionItem): number;
+    protected readonly header: _angular_core.Signal<SuggestionMenuHeader | undefined>;
+    protected readonly listbox: _angular_core.Signal<ElementRef<HTMLElement>>;
+    protected readonly end: _angular_core.Signal<ElementRef<HTMLElement>>;
+    /** The group being searched, on level 2. */
+    protected readonly parent: _angular_core.Signal<_h_k_dev_angular_email_editor.SuggestionGroup | null>;
+    protected readonly listLabel: _angular_core.Signal<string>;
+    /** The header template's context, while there is a group to head. */
+    protected readonly headerContext: _angular_core.Signal<SuggestionMenuHeaderContext | null>;
+    /** The line under the list: failed, searching, loading more, nothing
+        found, or nothing. Not "searching" over stale rows — dimmed, they say
+        it themselves, and a line that came and went with every keystroke
+        would resize the box (and have it placed again) twice per letter. */
+    protected readonly status: _angular_core.Signal<string>;
+    /** The announcement, once the typing has settled. */
+    protected readonly announced: _angular_core.Resource<string>;
+    constructor();
+    protected readonly back: () => void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuggestionMenu, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuggestionMenu, "[email-suggestion-menu]", never, { "state": { "alias": "state"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "backLabel": { "alias": "backLabel"; "required": false; "isSignal": true; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; "isSignal": true; }; "emptyLabel": { "alias": "emptyLabel"; "required": false; "isSignal": true; }; "loadingMoreLabel": { "alias": "loadingMoreLabel"; "required": false; "isSignal": true; }; "errorLabel": { "alias": "errorLabel"; "required": false; "isSignal": true; }; "resultsLabel": { "alias": "resultsLabel"; "required": false; "isSignal": true; }; "announceDelay": { "alias": "announceDelay"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; }, {}, ["header"], ["*"], true, never>;
+}
+
+/**
+ * One row of a suggestion menu: an option of its listbox, standing for one of
+ * the state's items. The host fills the row; the row takes its id (the one
+ * the editor's `aria-activedescendant` names), reflects the highlight as
+ * `aria-selected` and `data-active` — which is what the menu keeps scrolled
+ * into view — and applies its item on click: a group opens, a command runs.
+ *
+ * Never focusable, never a button: the caret stays in the editor, and the
+ * extension keeps a press on the menu from taking it away.
+ */
+declare class SuggestionMenuItem {
+    #private;
+    /** The item this row stands for — one of the menu state's `items`. */
+    readonly item: _angular_core.InputSignal<SuggestionItem>;
+    /** The keyboard highlight is on this row. */
+    readonly active: _angular_core.Signal<boolean>;
+    protected readonly id: _angular_core.Signal<string | null>;
+    protected select(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuggestionMenuItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuggestionMenuItem, "[email-suggestion-menu-item]", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * A heading in a suggestion menu's list: the words of a section
+ * (`SuggestionItem.section`, worded by the state's `sectionTitle`), shown
+ * where the section changes from one row to the next. Never an option: it
+ * takes no highlight, no click, and no place in the count — presentation,
+ * the way a chat's slash menu heads its groups.
+ *
+ *     @for (item of state.items; track item.id) {
+ *       @if (item.section && item.section !== state.items[$index - 1]?.section) {
+ *         <div email-suggestion-menu-section>{{ state.sectionTitle(item.section) }}</div>
+ *       }
+ *       <div email-suggestion-menu-item [item]="item">…</div>
+ *     }
+ */
+declare class SuggestionMenuSection {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuggestionMenuSection, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuggestionMenuSection, "[email-suggestion-menu-section]", never, {}, {}, never, ["*"], true, never>;
+}
+
+export { SuggestionMenu, SuggestionMenuHeader, SuggestionMenuItem, SuggestionMenuSection };
+export type { SuggestionMenuHeaderContext };