@tempots/beatui 0.94.0 → 1.0.0

package/dist/types/components/navigation/breadcrumbs.d.ts

@@ -23,7 +23,7 @@ export interface BreadcrumbsOptions {
     items: Value<BreadcrumbItem[]>;
     /**
      * Separator character or string displayed between items.
-     * @default '/'
+     * @default '›'
      */
     separator?: Value<string>;
     /**

package/dist/types/components/navigation/menu.d.ts

@@ -83,15 +83,15 @@ export interface MenuItemOptions {
      */
     content: TNode;
     /**
-     * Optional content displayed at the start (left side) of the menu item,
+     * Optional content displayed before the menu item label,
      * typically used for icons or selection indicators.
      */
-    startContent?: TNode;
+    before?: TNode;
     /**
-     * Optional content displayed at the end (right side) of the menu item,
+     * Optional content displayed after the menu item label,
      * typically used for keyboard shortcuts or badges.
      */
-    endContent?: TNode;
+    after?: TNode;
     /**
      * Whether the menu item is disabled. Disabled items are skipped by keyboard
      * navigation and cannot be activated.
@@ -177,8 +177,8 @@ export declare function Menu(options: MenuOptions): Renderable;
  * MenuItem({
  *   key: 'edit',
  *   content: 'Edit',
- *   startContent: Icon({ icon: 'edit', size: 'sm' }),
- *   endContent: html.span(attr.class('shortcut'), 'Ctrl+E'),
+ *   before: Icon({ icon: 'edit', size: 'sm' }),
+ *   after: html.span(attr.class('shortcut'), 'Ctrl+E'),
  *   onClick: () => console.log('edit clicked'),
  * })
  * ```

package/dist/types/components/navigation/pagination.d.ts

@@ -1,5 +1,6 @@
 import { Value } from '@tempots/dom';
-import { ControlSize } from '../theme';
+import { ControlSize, PaginationVariant } from '../theme';
+import { ThemeColorName } from '../../tokens';
 /**
  * Configuration options for the {@link Pagination} component.
  */
@@ -9,7 +10,7 @@ export interface PaginationOptions {
     /** Total number of pages available. */
     totalPages: Value<number>;
     /** Callback invoked when a page is selected. */
-    onPageChange: (page: number) => void;
+    onChange: (page: number) => void;
     /** Number of page siblings to show around the current page. @default 1 */
     siblings?: Value<number>;
     /** Whether to show Previous/Next navigation buttons. @default true */
@@ -18,6 +19,10 @@ export interface PaginationOptions {
     showFirstLast?: Value<boolean>;
     /** Size affecting button dimensions and font size. @default 'md' */
     size?: Value<ControlSize>;
+    /** Visual style variant for the pagination items. @default 'filled' */
+    variant?: Value<PaginationVariant>;
+    /** Theme color for the active page indicator. @default 'primary' */
+    color?: Value<ThemeColorName>;
     /** Whether to distribute items across the full available width. @default false */
     justify?: Value<boolean>;
     /** Whether to dynamically adjust the number of visible page numbers to fit available space. @default false */
@@ -46,6 +51,14 @@ export interface PaginationOptions {
  * ```
  */
 export declare function generatePaginationRange(current: number, total: number, siblings: number): (number | 'dots')[];
+/**
+ * Generates inline CSS custom properties for pagination theming based on variant and color.
+ *
+ * @param variant - The visual style variant
+ * @param color - The theme color
+ * @returns Semicolon-separated CSS custom property declarations
+ */
+export declare function generatePaginationStyles(variant: PaginationVariant, color: ThemeColorName): string;
 /**
  * A pagination component for navigating through multiple pages of content.
  *
@@ -68,7 +81,7 @@ export declare function generatePaginationRange(current: number, total: number,
  * Pagination({
  *   currentPage,
  *   totalPages,
- *   onPageChange: (page) => {
+ *   onChange: (page) => {
  *     currentPage.set(page)
  *     // Load page data...
  *   },
@@ -79,4 +92,4 @@ export declare function generatePaginationRange(current: number, total: number,
  * })
  * ```
  */
-export declare function Pagination({ currentPage, totalPages, onPageChange, siblings, showPrevNext, showFirstLast, size, justify, responsive, }: PaginationOptions): import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;
+export declare function Pagination({ currentPage, totalPages, onChange, siblings, showPrevNext, showFirstLast, size, variant, color, justify, responsive, }: PaginationOptions): import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;

package/dist/types/components/navigation/sidebar/sidebar-link.d.ts

@@ -41,8 +41,8 @@ export type SidebarLinkOptions = {
     content: TNode;
     /** Optional icon identifier displayed at the start of the link. */
     icon?: Value<string>;
-    /** Optional content displayed at the right side of the link (e.g., badges, counts). */
-    right?: TNode;
+    /** Optional content displayed after the link label (e.g., badges, counts). */
+    after?: TNode;
     /**
      * Optional inline action button rendered at the end of the link.
      * Useful for quick actions like delete, settings, or expand/collapse toggles.

package/dist/types/components/navigation/tabs/tabs.d.ts

@@ -1,7 +1,16 @@
 import { TNode, Value } from '@tempots/dom';
-import { ControlSize, ButtonVariant } from '../../theme';
+import { ControlSize } from '../../theme';
 import { ThemeColorName } from '../../../tokens';
-export type TabsVariant = ButtonVariant | 'underline' | 'pill';
+/**
+ * Visual variant for tabs.
+ *
+ * - `'default'` — Standard tabs with bottom indicator
+ * - `'filled'` — Color-filled inactive tabs, white active tab
+ * - `'outline'` — Bordered tabs that connect to the panel
+ * - `'underline'` — Minimal underline indicator
+ * - `'pill'` — Contained segmented-button style
+ */
+export type TabsVariant = 'default' | 'filled' | 'outline' | 'underline' | 'pill';
 export interface TabItem<T extends string> {
     /** Unique identifier for the tab */
     key: T;
@@ -22,17 +31,17 @@ export interface TabsOptions<T extends string> {
     value: Value<T>;
     /** Callback when tab changes */
     onChange?: (key: T) => void;
-    /** Size of the tabs */
+    /** Size of the tabs. @default 'md' */
     size?: Value<ControlSize>;
-    /** Visual variant */
+    /** Visual variant. @default 'default' */
     variant?: Value<TabsVariant>;
-    /** Color used by certain variants (e.g., filled) */
+    /** Color used by certain variants (e.g., filled). @default 'primary' */
     color?: Value<ThemeColorName>;
-    /** Whether tabs are disabled */
+    /** Whether tabs are disabled. @default false */
     disabled?: Value<boolean>;
-    /** Orientation of the tabs */
+    /** Orientation of the tabs. @default 'horizontal' */
     orientation?: Value<TabsDirection>;
-    /** Whether to show tab content */
+    /** Whether to show tab content. @default true */
     showContent?: Value<boolean>;
     /** ARIA label for the tab list */
     ariaLabel?: Value<string>;

package/dist/types/components/navigation/toolbar/toolbar.d.ts

@@ -26,12 +26,15 @@ export interface ToolbarOptions {
  * @example
  * ```typescript
  * Toolbar(
+ *   { ariaLabel: 'Text formatting' },
  *   ToolbarGroup(
+ *     {},
  *     ToolbarButton({ onClick: () => bold() }, Icon({ icon: 'bold' })),
  *     ToolbarButton({ onClick: () => italic() }, Icon({ icon: 'italic' })),
  *   ),
  *   ToolbarDivider(),
  *   ToolbarGroup(
+ *     {},
  *     ToolbarButton({ onClick: () => alignLeft() }, Icon({ icon: 'align-left' })),
  *     ToolbarButton({ onClick: () => alignCenter() }, Icon({ icon: 'align-center' })),
  *   ),
@@ -40,7 +43,7 @@ export interface ToolbarOptions {
  * )
  * ```
  */
-export declare function Toolbar(...children: TNode[]): import("@tempots/dom").Renderable;
+export declare function Toolbar(options: ToolbarOptions, ...children: TNode[]): import("@tempots/dom").Renderable;
 /**
  * Configuration options for the {@link ToolbarButton} component.
  * Extends {@link ButtonOptions} with toolbar-specific properties.
@@ -75,7 +78,7 @@ export interface ToolbarButtonOptions extends ButtonOptions {
  * )
  * ```
  */
-export declare function ToolbarButton(options: ButtonOptions, ...children: TNode[]): import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;
+export declare function ToolbarButton(options: ToolbarButtonOptions, ...children: TNode[]): import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;
 /**
  * Configuration options for the {@link ToolbarGroup} component.
  */
@@ -98,13 +101,14 @@ export interface ToolbarGroupOptions {
  * @example
  * ```typescript
  * ToolbarGroup(
+ *   { ariaLabel: 'Text style' },
  *   ToolbarButton({ onClick: () => bold() }, Icon({ icon: 'bold' })),
  *   ToolbarButton({ onClick: () => italic() }, Icon({ icon: 'italic' })),
  *   ToolbarButton({ onClick: () => underline() }, Icon({ icon: 'underline' })),
  * )
  * ```
  */
-export declare function ToolbarGroup(...children: TNode[]): import("@tempots/dom").Renderable;
+export declare function ToolbarGroup(options: ToolbarGroupOptions, ...children: TNode[]): import("@tempots/dom").Renderable;
 /**
  * Visual divider for separating groups of items within a {@link Toolbar}.
  *
@@ -115,9 +119,10 @@ export declare function ToolbarGroup(...children: TNode[]): import("@tempots/dom
  * @example
  * ```typescript
  * Toolbar(
- *   ToolbarGroup(boldBtn, italicBtn),
+ *   {},
+ *   ToolbarGroup({}, boldBtn, italicBtn),
  *   ToolbarDivider(),
- *   ToolbarGroup(alignLeftBtn, alignCenterBtn),
+ *   ToolbarGroup({}, alignLeftBtn, alignCenterBtn),
  * )
  * ```
  */
@@ -133,7 +138,8 @@ export declare function ToolbarDivider(): import("@tempots/dom").Renderable;
  * @example
  * ```typescript
  * Toolbar(
- *   ToolbarGroup(editBtns),
+ *   {},
+ *   ToolbarGroup({}, editBtns),
  *   ToolbarSpacer(),
  *   ToolbarButton({ onClick: save }, 'Save'),
  * )

package/dist/types/components/overlay/announcement-bar.d.ts

@@ -23,17 +23,25 @@ export type AnnouncementBarOptions = {
      * Callback invoked when the user dismisses the announcement bar.
      * When provided and `closable` is not explicitly set, the bar is implicitly made dismissible.
      */
-    onDismiss?: () => void;
+    onClose?: () => void;
     /**
      * Additional CSS class names to apply to the announcement bar element.
      */
     class?: Value<string>;
+    /**
+     * Controls where the announcement bar is rendered in the DOM.
+     * - `true` (default) - Portals to the document body, fixed at the top of the viewport.
+     * - `false` - Renders inline as a child of the current parent element.
+     * - A CSS selector string - Portals to the element matching the selector.
+     * @default false
+     */
+    portal?: boolean | string;
 };
 /**
  * Displays a colored announcement bar, typically at the top of a page or container.
  *
  * Supports an optional leading icon, user-dismissible close button, and theme color
- * customization. When dismissed, the bar is removed from the DOM and the `onDismiss`
+ * customization. When dismissed, the bar is removed from the DOM and the `onClose`
  * callback is invoked.
  *
  * @param options - Configuration options controlling color, icon, closability, and styling
@@ -43,7 +51,7 @@ export type AnnouncementBarOptions = {
  * @example
  * ```typescript
  * AnnouncementBar(
- *   { color: 'warning', closable: true, onDismiss: () => console.log('dismissed') },
+ *   { color: 'warning', closable: true, onClose: () => console.log('dismissed') },
  *   "You're on our launch Free plan with unlimited resumes and redaction!"
  * )
  * ```
@@ -57,4 +65,4 @@ export type AnnouncementBarOptions = {
  * )
  * ```
  */
-export declare function AnnouncementBar({ color, icon, closable, onDismiss, class: cls, }: AnnouncementBarOptions, ...children: TNode[]): Renderable;
+export declare function AnnouncementBar({ color, icon, closable, onClose, class: cls, portal: portalTarget, }: AnnouncementBarOptions, ...children: TNode[]): Renderable;

package/dist/types/components/overlay/dialogs.d.ts

@@ -82,7 +82,7 @@ export declare function ConfirmationDialog(options: ConfirmationDialogOptions, f
 /**
  * Visual variant for the {@link AlertDialog}, controlling the default icon and color.
  */
-export type AlertDialogVariant = 'info' | 'success' | 'warning' | 'error';
+export type AlertDialogVariant = 'info' | 'success' | 'warning' | 'danger';
 /**
  * Configuration options for the {@link AlertDialog} component.
  */
@@ -122,7 +122,7 @@ export interface AlertDialogOptions {
 /**
  * An alert dialog for displaying important messages to the user.
  *
- * Supports info, success, warning, and error variants with appropriate icons and colors.
+ * Supports info, success, warning, and danger variants with appropriate icons and colors.
  * Has a single acknowledge button. Built on top of {@link Modal}.
  *
  * @param options - Configuration options for the alert content

package/dist/types/components/overlay/modal.d.ts

@@ -128,7 +128,13 @@ export declare function Modal(options: ModalOptions, fn: (open: (content: ModalC
  * )
  * ```
  */
-export declare function ConfirmModal(options: ModalOptions & {
+/**
+ * Configuration options for the {@link ConfirmModal} component.
+ *
+ * Extends {@link ModalOptions} with confirmation-specific settings for
+ * custom button labels and confirm/cancel callbacks.
+ */
+export interface ConfirmModalOptions extends ModalOptions {
     /** Custom label for the confirm button. Falls back to the i18n `confirm` string. */
     confirmText?: Value<string>;
     /** Custom label for the cancel button. Falls back to the i18n `cancel` string. */
@@ -137,4 +143,5 @@ export declare function ConfirmModal(options: ModalOptions & {
     onConfirm?: () => void;
     /** Callback invoked when the user clicks the cancel button. */
     onCancel?: () => void;
-}, fn: (open: (message: TNode) => void, close: () => void) => TNode): Renderable;
+}
+export declare function ConfirmModal(options: ConfirmModalOptions, fn: (open: (message: TNode) => void, close: () => void) => TNode): Renderable;

package/dist/types/components/overlay/tooltip.d.ts

@@ -5,17 +5,17 @@ export type TooltipTrigger = FlyoutTrigger;
 export interface TooltipOptions {
     /** The tooltip content to display */
     content: TNode;
-    /** Placement of the tooltip relative to the trigger element */
+    /** Placement of the tooltip relative to the trigger element. @default 'top' */
     placement?: Value<Placement>;
-    /** Delay in milliseconds before showing the tooltip on hover */
+    /** Delay in milliseconds before showing the tooltip on hover. @default 250 */
     showDelay?: Value<number>;
-    /** Delay in milliseconds before hiding the tooltip after mouse leave */
+    /** Delay in milliseconds before hiding the tooltip after mouse leave. @default 500 */
     hideDelay?: Value<number>;
-    /** Offset in pixels from the main axis (vertical for top/bottom, horizontal for left/right) */
+    /** Offset in pixels from the main axis (vertical for top/bottom, horizontal for left/right). @default 8 */
     mainAxisOffset?: Value<number>;
-    /** Offset in pixels from the cross axis (horizontal for top/bottom, vertical for left/right) */
+    /** Offset in pixels from the cross axis (horizontal for top/bottom, vertical for left/right). @default 0 */
     crossAxisOffset?: Value<number>;
-    /** How to show the tooltip */
+    /** How to show the tooltip. @default 'hover-focus' */
     showOn?: Value<TooltipTrigger>;
 }
 /**

package/dist/types/components/theme/types.d.ts

@@ -4,12 +4,14 @@ import { AppearanceType } from '@tempots/ui';
 /**
  * Visual style variant for button components.
  * - `'filled'`: Solid background with theme color
- * - `'light'`: Light background with colored text
+ * - `'light'`: Color-tinted background with normal text
  * - `'outline'`: Transparent background with colored border
- * - `'default'`: Default subtle styling
- * - `'text'`: No background, text-only styling
+ * - `'dashed'`: Transparent background with colored dashed border
+ * - `'default'`: Neutral background with subtle border and colored text
+ * - `'subtle'`: Transparent background with colored text, tinted background on hover
+ * - `'text'`: No background, text-only with underline on hover
  */
-export type ButtonVariant = 'filled' | 'light' | 'outline' | 'dashed' | 'default' | 'text';
+export type ButtonVariant = 'filled' | 'light' | 'outline' | 'dashed' | 'default' | 'subtle' | 'text';
 /**
  * Size options for form controls and interactive elements.
  * Ranges from `'xs'` (extra small) to `'xl'` (extra large).
@@ -123,6 +125,15 @@ export type AlignSelf = 'auto' | 'flex-start' | 'flex-end' | 'safe flex-end' | '
  * - `'outlined'`: Card with border outline
  */
 export type CardVariant = 'default' | 'elevated' | 'flat' | 'outlined';
+/**
+ * Visual style variant for pagination components.
+ * - `'filled'`: Solid primary background on active page
+ * - `'outline'`: Primary border on active page, no fill
+ * - `'light'`: Light color-tinted background on active page
+ * - `'subtle'`: Text-only with bold weight and underline on active page
+ * - `'pill'`: Fully rounded pill-shaped items with solid active fill
+ */
+export type PaginationVariant = 'filled' | 'outline' | 'light' | 'subtle' | 'pill';
 /**
  * Gap spacing size for centered layouts.
  * Ranges from `'none'` (no gap) to `'xl'` (extra large gap).

package/dist/types/lexical/index.d.ts

@@ -6,13 +6,13 @@
  * pre-configured presets (Bare, Docked, Contextual), full plugin coverage,
  * multi-format I/O, form integration, and theme/i18n support.
  */
-export type { ContentFormatType, JsonContent, LexicalPluginDefinition, PluginConfig, HistoryPluginOptions, TablePluginOptions, AutoLinkPluginOptions, AutoLinkMatcher, CodePluginOptions, HashtagPluginOptions, OverflowPluginOptions, SlashCommandPluginOptions, SlashCommandDefinition, ToolbarGroupId, ToolbarButtonId, ToolbarConfig, ToolbarLayoutGroup, ToolbarLayoutSeparator, ToolbarLayoutEntry, MarkMetadata, MarkPluginCallbacks, CollaborationConfig, CollaborationUser, LexicalEditorBaseOptions, BareEditorOptions, DockedEditorOptions, ContextualEditorOptions, LexicalStringInputOptions, LexicalJsonInputOptions, LexicalInputOptions, HeadlessEditorOptions, CharacterCountInfo, SelectionInfo, EditorPresetType, EditorHeightMode, } from './types';
+export type { ContentFormatType, JsonContent, LexicalPluginDefinition, PluginConfig, HistoryPluginOptions, TablePluginOptions, AutoLinkPluginOptions, AutoLinkMatcher, CodePluginOptions, HashtagPluginOptions, OverflowPluginOptions, SlashCommandPluginOptions, SlashCommandDefinition, ToolbarGroupId, ToolbarButtonId, ToolbarConfig, ToolbarLayoutGroup, ToolbarLayoutSeparator, ToolbarLayoutCustomGroup, ToolbarLayoutEntry, MarkMetadata, MarkPluginCallbacks, CollaborationConfig, CollaborationUser, LexicalEditorBaseOptions, BareEditorOptions, DockedEditorOptions, ContextualEditorOptions, LexicalStringInputOptions, LexicalJsonInputOptions, LexicalInputOptions, HeadlessEditorOptions, CharacterCountInfo, SelectionInfo, EditorPresetType, EditorHeightMode, ToolbarItemContext, ToolbarButtonItem, ToolbarSelectOption, ToolbarSelectItem, ToolbarCustomItem, CustomToolbarItem, CustomToolbarGroup, } from './types';
 export { TOOLBAR_SEPARATOR } from './types';
 export { getNodesForPlugins, createDefaultPluginConfig } from './nodes';
 export { HorizontalRuleNode, $createHorizontalRuleNode, $isHorizontalRuleNode, } from './horizontal-rule-node';
 export type { SerializedHorizontalRuleNode } from './horizontal-rule-node';
 export { loadLexicalCore } from './lazy-loader';
-export { registerRichTextPlugin, registerPlainTextPlugin, registerHistoryPlugin, registerClipboardPlugin, registerListPlugin, registerLinkPlugin, registerSlashCommandsPlugin, executeSlashCommand, exportToMarkdown, importFromMarkdown, getMarkdownTransformers, exportToHtml, importFromHtml, exportEditorToFile, importFileToEditor, registerTablePlugin, insertTable, registerCodePlugin, registerCodeShikiPlugin, registerHashtagPlugin, registerAutoLinkPlugin, registerMarkPlugin, applyMark, removeMark, registerOverflowPlugin, registerDragonPlugin, registerYjsPlugin, getSelectionInfo, getTextContent, getCharacterCount, getWordCount, loadOffsetUtils, registerHorizontalRulePlugin, HR_TRANSFORMER, buildInlineStyleImportMap, buildStyleImportMap, DEFAULT_INLINE_STYLE_PROPERTIES, } from './plugins';
+export { registerRichTextPlugin, registerPlainTextPlugin, registerHistoryPlugin, registerClipboardPlugin, registerListPlugin, registerLinkPlugin, registerSlashCommandsPlugin, executeSlashCommand, exportToMarkdown, importFromMarkdown, getMarkdownTransformers, exportToHtml, importFromHtml, exportEditorToFile, importFileToEditor, registerTablePlugin, insertTable, registerCodePlugin, registerCodeShikiPlugin, registerHashtagPlugin, registerAutoLinkPlugin, registerMarkPlugin, applyMark, removeMark, registerOverflowPlugin, registerDragonPlugin, registerYjsPlugin, getSelectionInfo, getTextContent, getCharacterCount, getWordCount, insertTextAtCursor, loadOffsetUtils, registerHorizontalRulePlugin, HR_TRANSFORMER, buildInlineStyleImportMap, buildStyleImportMap, DEFAULT_INLINE_STYLE_PROPERTIES, } from './plugins';
 export type { SlashCommandState, SlashCommandCallbacks } from './plugins';
 export { createHeadlessEditor, markdownToLexicalJson, lexicalJsonToMarkdown, htmlToLexicalJson, lexicalJsonToHtml, } from './headless';
 export { createCommand, ElementNode, DecoratorNode, TextNode, COMMAND_PRIORITY_LOW, COMMAND_PRIORITY_NORMAL, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_CRITICAL, } from 'lexical';

package/dist/types/lexical/plugins/index.d.ts

@@ -19,7 +19,7 @@ export { registerOverflowPlugin } from './overflow';
 export { registerDragonPlugin } from './dragon';
 export { registerYjsPlugin } from './yjs';
 export { getSelectionInfo } from './selection';
-export { getTextContent, getCharacterCount, getWordCount } from './text';
+export { getTextContent, getCharacterCount, getWordCount, insertTextAtCursor, } from './text';
 export { loadOffsetUtils } from './offset';
 export { registerHorizontalRulePlugin, HR_TRANSFORMER } from './horizontal-rule';
 export { registerElementStylePlugin, buildElementStyleExportMap, buildElementStyleImportMap, buildInlineStyleImportMap, buildStyleImportMap, DEFAULT_INLINE_STYLE_PROPERTIES, mergeElementStyle, getElementStyleProperty, } from './element-style';

package/dist/types/lexical/plugins/slash-commands.d.ts

@@ -10,7 +10,7 @@ export interface SlashCommandState {
 export interface SlashCommandCallbacks {
     onTrigger?: (state: SlashCommandState, removeText: () => void) => void;
     onUpdate?: (state: SlashCommandState, removeText: () => void) => void;
-    onDismiss?: () => void;
+    onClose?: () => void;
     onExecute?: (commandId: string, removeText: () => void) => void;
 }
 /**

package/dist/types/lexical/plugins/text.d.ts

@@ -11,3 +11,8 @@ export declare function getCharacterCount(editor: LexicalEditor): number;
  * Get the word count of the editor content.
  */
 export declare function getWordCount(editor: LexicalEditor): number;
+/**
+ * Insert text at the current cursor position, replacing any selected text.
+ * Designed for use as a snippet `onSelect` callback helper.
+ */
+export declare function insertTextAtCursor(editor: LexicalEditor, text: string): void;

package/dist/types/lexical/types.d.ts

@@ -1,7 +1,8 @@
-import type { Renderable, TNode, Value } from '@tempots/dom';
+import type { Renderable, Signal, TNode, Value } from '@tempots/dom';
 import type { Merge } from '@tempots/std';
 import type { LexicalEditor, LexicalNode, Klass } from 'lexical';
 import type { InputOptions } from '../components/form/input/input-options';
+import type { ControlSize } from '../components/theme';
 /**
  * Content format types supported by the editor
  */
@@ -282,7 +283,99 @@ export type ToolbarGroupId = 'text-formatting' | 'headings' | 'lists' | 'indent'
  * Stable identifiers for individual toolbar buttons/controls.
  * Each ID corresponds to a single button or widget within a toolbar group.
  */
-export type ToolbarButtonId = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'code' | 'clear-formatting' | 'paragraph' | 'heading-1' | 'heading-2' | 'heading-3' | 'heading-4' | 'heading-5' | 'heading-6' | 'bullet-list' | 'ordered-list' | 'check-list' | 'indent' | 'outdent' | 'blockquote' | 'code-block' | 'horizontal-rule' | 'insert-table' | 'link' | 'undo' | 'redo' | 'cut' | 'copy' | 'paste' | 'font-family' | 'font-size' | 'font-color' | 'highlight-color' | 'background-color';
+export type ToolbarButtonId = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'code' | 'clear-formatting' | 'paragraph' | 'heading-1' | 'heading-2' | 'heading-3' | 'heading-4' | 'heading-5' | 'heading-6' | 'bullet-list' | 'ordered-list' | 'check-list' | 'indent' | 'outdent' | 'blockquote' | 'code-block' | 'horizontal-rule' | 'insert-table' | 'link' | 'undo' | 'redo' | 'cut' | 'copy' | 'paste' | 'font-family' | 'font-size' | 'line-height' | 'font-color' | 'highlight-color' | 'background-color';
+/**
+ * Context passed to custom toolbar items, providing access to editor state,
+ * reactive signals, and the built-in button factory.
+ */
+export interface ToolbarItemContext {
+    /** Editor signal (guaranteed non-null inside the toolbar) */
+    editor: Signal<LexicalEditor>;
+    /** Incremented on every editor state update — use in `.map()` for reactive queries */
+    stateUpdate: Signal<number>;
+    /** Whether the editor is read-only */
+    readOnly: Signal<boolean>;
+    /** Control size */
+    size: Value<ControlSize>;
+    /** Create a toolbar button matching built-in styling */
+    button: (opts: {
+        active?: Signal<boolean>;
+        onClick: () => void;
+        label: Value<string>;
+        icon: string;
+    }) => TNode;
+}
+/**
+ * A custom icon button toolbar item, rendered identically to built-in buttons.
+ */
+export interface ToolbarButtonItem {
+    type: 'button';
+    /** Unique id (must not collide with built-in ToolbarButtonId values) */
+    id: string;
+    /** Accessible tooltip label */
+    label: string;
+    /** Iconify icon identifier (e.g. 'mdi:variable') */
+    icon: string;
+    /** Called when the button is clicked */
+    onClick: (editor: LexicalEditor) => void;
+    /** Optional reactive active state. Return a signal that tracks whether this button is "on". */
+    active?: (ctx: ToolbarItemContext) => Signal<boolean>;
+}
+/**
+ * A single option in a select dropdown toolbar item.
+ */
+export interface ToolbarSelectOption {
+    /** Value passed to onSelect when this option is chosen */
+    value: string;
+    /** Display label in the dropdown */
+    label: string;
+}
+/**
+ * A select dropdown toolbar item: renders a `<select>` and calls
+ * `onSelect(value, editor)` when the user picks an option.
+ */
+export interface ToolbarSelectItem {
+    type: 'select';
+    /** Unique id (must not collide with built-in ToolbarButtonId values) */
+    id: string;
+    /** Accessible tooltip / placeholder label */
+    label: string;
+    /** Dropdown options */
+    options: ToolbarSelectOption[];
+    /** Called when the user picks an option */
+    onSelect: (value: string, editor: LexicalEditor) => void;
+    /**
+     * Reset the dropdown to its placeholder after each selection.
+     * Use `true` for action menus (e.g. "Insert snippet"), `false` for
+     * stateful selections where the current value should remain visible.
+     * @default true
+     */
+    resetOnSelect?: boolean;
+}
+/**
+ * A fully custom toolbar item where the user supplies a render function
+ * that receives the full toolbar context.
+ */
+export interface ToolbarCustomItem {
+    type: 'custom';
+    /** Unique id (must not collide with built-in ToolbarButtonId values) */
+    id: string;
+    /** Render function. Receives the full toolbar context. */
+    render: (ctx: ToolbarItemContext) => TNode;
+}
+/**
+ * Union of all custom toolbar item types.
+ */
+export type CustomToolbarItem = ToolbarButtonItem | ToolbarSelectItem | ToolbarCustomItem;
+/**
+ * A custom group definition containing one or more custom items.
+ */
+export interface CustomToolbarGroup {
+    /** Unique group id (must not collide with built-in ToolbarGroupId values) */
+    id: string;
+    /** Custom toolbar items in this group */
+    items: CustomToolbarItem[];
+}
 /**
  * A group entry in the toolbar layout.
  * Specifies which group to render, optionally restricting to specific buttons.
@@ -292,9 +385,10 @@ export interface ToolbarLayoutGroup {
     group: ToolbarGroupId;
     /**
      * Optional subset of buttons/controls to include within this group.
+     * Accepts built-in `ToolbarButtonId` values and custom item IDs (strings).
      * When omitted, all buttons in the group are shown (respecting maxHeadingLevel).
      */
-    items?: ToolbarButtonId[];
+    items?: (ToolbarButtonId | string)[];
 }
 /**
  * A visual separator between toolbar groups.
@@ -302,11 +396,18 @@ export interface ToolbarLayoutGroup {
 export interface ToolbarLayoutSeparator {
     separator: true;
 }
+/**
+ * A layout entry referencing a custom group by its id.
+ */
+export interface ToolbarLayoutCustomGroup {
+    /** References a CustomToolbarGroup.id from ToolbarConfig.customGroups */
+    customGroup: string;
+}
 /**
  * A single entry in the toolbar layout.
- * Either a group (with optional button subset) or a visual separator.
+ * Either a built-in group, a custom group, or a visual separator.
  */
-export type ToolbarLayoutEntry = ToolbarLayoutGroup | ToolbarLayoutSeparator;
+export type ToolbarLayoutEntry = ToolbarLayoutGroup | ToolbarLayoutCustomGroup | ToolbarLayoutSeparator;
 /**
  * Convenience constant for inserting a separator in a toolbar layout.
  */
@@ -347,12 +448,32 @@ export interface ToolbarConfig {
      * A `{ value: '', label: 'Default' }` entry is always prepended automatically.
      */
     fontSizes?: FontOption[];
+    /**
+     * Custom line-height options for the line-height dropdown.
+     * Each entry has a unitless CSS `value` (e.g. '1.5') and a display `label`.
+     * A `{ value: '', label: 'Default' }` entry is always prepended automatically.
+     */
+    lineHeights?: FontOption[];
     /**
      * Declarative toolbar layout. When provided, takes full control over
      * which groups/buttons appear and in what order.
      * `visibleGroups` and `hiddenGroups` are ignored when `layout` is set.
+     * Use `{ customGroup: '<id>' }` entries to place custom groups.
      */
     layout?: ToolbarLayoutEntry[];
+    /**
+     * Standalone custom toolbar items, registered by their `id`.
+     * Place them in built-in groups via `layout[].items` arrays.
+     */
+    customItems?: CustomToolbarItem[];
+    /**
+     * Custom toolbar groups with user-defined buttons/dropdowns.
+     * When `layout` is not specified, custom groups are appended
+     * at the end of the default toolbar layout.
+     * When `layout` is specified, use `{ customGroup: '<id>' }` entries
+     * to place them.
+     */
+    customGroups?: CustomToolbarGroup[];
 }
 /**
  * Mark/annotation metadata

package/dist/types/lexical-i18n/default.d.ts

@@ -28,6 +28,7 @@ export declare const defaultMessages: {
     outdent: string;
     fontFamily: string;
     fontSize: string;
+    lineHeight: string;
     fontColor: string;
     highlightColor: string;
     backgroundColor: string;

package/dist/types/lexical-i18n/locales/ar.d.ts

@@ -7,6 +7,7 @@ declare const ar: {
     outdent: string;
     fontFamily: string;
     fontSize: string;
+    lineHeight: string;
     fontColor: string;
     highlightColor: string;
     backgroundColor: string;

package/dist/types/lexical-i18n/locales/de.d.ts

@@ -7,6 +7,7 @@ declare const de: {
     outdent: string;
     fontFamily: string;
     fontSize: string;
+    lineHeight: string;
     fontColor: string;
     highlightColor: string;
     backgroundColor: string;

package/dist/types/lexical-i18n/locales/en.d.ts

@@ -28,6 +28,7 @@ declare const en: {
     outdent: string;
     fontFamily: string;
     fontSize: string;
+    lineHeight: string;
     fontColor: string;
     highlightColor: string;
     backgroundColor: string;

package/dist/types/lexical-i18n/locales/es.d.ts

@@ -28,6 +28,7 @@ declare const es: {
     outdent: string;
     fontFamily: string;
     fontSize: string;
+    lineHeight: string;
     fontColor: string;
     highlightColor: string;
     backgroundColor: string;