@tempots/beatui 0.82.0 → 0.83.0

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

@@ -1,22 +1,65 @@
 import { Renderable, Value, TNode } from '@tempots/dom';
 import { OverlayEffect } from '../theme';
+/**
+ * Configuration options for the {@link Lightbox} component.
+ */
 export interface LightboxOptions {
-    /** Whether clicking outside/Escape closes the lightbox (default: true) */
+    /**
+     * Whether the lightbox can be closed by clicking outside or pressing the Escape key.
+     * When `false`, the overlay ignores dismiss gestures.
+     * @default true
+     */
     dismissable?: Value<boolean>;
-    /** Whether to show the close button in the top-end corner (default: true) */
+    /**
+     * Whether to show a close button in the top-end corner of the lightbox.
+     * @default true
+     */
     showCloseButton?: Value<boolean>;
-    /** Overlay effect (default: 'opaque') */
+    /**
+     * Visual effect applied to the overlay backdrop behind the lightbox.
+     * @default 'opaque'
+     */
     overlayEffect?: Value<OverlayEffect>;
-    /** Container for the overlay: 'body' (default) or 'element' */
+    /**
+     * Where to attach the overlay in the DOM.
+     * - `'body'` - Renders via a portal to the document body.
+     * - `'element'` - Renders as a child of the current element context.
+     * @default 'body'
+     */
     container?: 'body' | 'element';
-    /** Padding (in px) kept around content; content is capped by viewport minus padding (default: 32) */
+    /**
+     * Padding in pixels kept around the content. The content is constrained to the
+     * viewport dimensions minus this padding on each side.
+     * @default 32
+     */
     padding?: Value<number>;
 }
 /**
- * Lightbox overlay for displaying arbitrary content maximized and centered.
- * - Attaches via Portal to body by default
- * - Dark background via Overlay effect
- * - Fades in/out using the overlay's animated toggle
- * - Caps content to viewport (minus padding) and clips overflow; no transform scaling
+ * Lightbox overlay for displaying arbitrary content maximized and centered over a dark backdrop.
+ *
+ * The lightbox attaches via a portal to the document body by default, fades in/out using
+ * the overlay's animated toggle, and constrains content to the viewport dimensions minus
+ * configurable padding. Overflow is clipped without transform scaling.
+ *
+ * Built on top of {@link Overlay}.
+ *
+ * @param options - Configuration options controlling dismissability, close button, overlay effect, and padding
+ * @param fn - A render function that receives `open` and `close` callbacks and returns the trigger content.
+ *   Call `open(content)` with a `TNode` to display the lightbox content.
+ * @returns A renderable node
+ *
+ * @example
+ * ```typescript
+ * Lightbox(
+ *   { dismissable: true, padding: 48 },
+ *   (open, close) => html.img(
+ *     attr.src('/thumb.jpg'),
+ *     attr.alt('Thumbnail'),
+ *     on.click(() => open(
+ *       html.img(attr.src('/full-size.jpg'), attr.alt('Full size image'))
+ *     ))
+ *   )
+ * )
+ * ```
  */
 export declare function Lightbox(options: LightboxOptions, fn: (open: (content: TNode) => void, close: () => void) => TNode): Renderable;

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

@@ -1,40 +1,140 @@
 import { TNode, Value, Renderable } from '@tempots/dom';
 import { OverlayEffect } from '../theme';
+/**
+ * Configuration options for the {@link Modal} component.
+ */
 export interface ModalOptions {
-    /** Size of the modal */
+    /**
+     * Size preset controlling the maximum width of the modal dialog.
+     * @default 'md'
+     */
     size?: Value<'sm' | 'md' | 'lg' | 'xl'>;
-    /** Whether the modal can be closed by clicking outside or pressing escape */
+    /**
+     * Whether the modal can be closed by clicking outside or pressing the Escape key.
+     * When `false`, the overlay enters non-capturing mode and ignores dismiss gestures.
+     * @default true
+     */
     dismissable?: Value<boolean>;
-    /** Whether to show the close button in header (only applies if header is provided) */
+    /**
+     * Whether to show the close button in the modal header.
+     * Only rendered when header content is provided.
+     * @default true
+     */
     showCloseButton?: Value<boolean>;
-    /** Callback when modal is closed */
+    /**
+     * Callback invoked when the modal is closed via dismiss gestures (click outside or Escape).
+     */
     onClose?: () => void;
-    /** Overlay effect */
+    /**
+     * Visual effect applied to the overlay backdrop behind the modal.
+     * @default 'opaque'
+     */
     overlayEffect?: Value<OverlayEffect>;
-    /** Container for the overlay: 'body' (default) or 'element' (current element) */
+    /**
+     * Where to attach the overlay in the DOM.
+     * - `'body'` - Renders via a portal to the document body.
+     * - `'element'` - Renders as a child of the current element context.
+     * @default 'body'
+     */
     container?: 'body' | 'element';
-    /** Position of the modal: 'center' (default), 'top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end' */
+    /**
+     * Position of the modal dialog within the overlay.
+     * Controls alignment relative to the viewport or container.
+     * @default 'center'
+     */
     position?: Value<'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'>;
 }
+/**
+ * Content layout options for a modal dialog, defining the header, body, and footer sections.
+ */
 export interface ModalContentOptions {
-    /** Optional header content - if provided, overrides title */
+    /**
+     * Optional header content displayed at the top of the modal.
+     * When provided, an ARIA `labelledby` association is created for accessibility.
+     */
     header?: TNode;
-    /** Main body content */
+    /**
+     * Main body content of the modal dialog. This section is always rendered
+     * and is referenced via ARIA `describedby` for screen readers.
+     */
     body: TNode;
-    /** Optional footer content with action items */
+    /**
+     * Optional footer content, typically used for action buttons (e.g., confirm, cancel).
+     */
     footer?: TNode;
 }
 /**
- * Modal component that provides a structured dialog with optional header, body, and footer
- * Built on top of the overlay component
+ * Modal dialog component with structured header, body, and footer sections.
+ *
+ * Built on top of {@link Overlay}, it provides focus trapping, keyboard dismissal,
+ * click-outside dismissal, and proper ARIA attributes (`role="dialog"`, `aria-modal`,
+ * `aria-labelledby`, `aria-describedby`).
+ *
+ * @param options - Configuration options controlling size, position, dismissability, and overlay effect
+ * @param fn - A render function that receives `open` and `close` callbacks and returns the trigger content.
+ *   Call `open(content)` with a {@link ModalContentOptions} object to display the modal.
+ * @returns A renderable node
+ *
+ * @example
+ * ```typescript
+ * const isOpen = prop(false)
+ *
+ * Modal(
+ *   { size: 'lg', dismissable: true, onClose: () => isOpen.set(false) },
+ *   (open, close) => Button(
+ *     { onClick: () => open({
+ *       header: html.h2('Confirm Action'),
+ *       body: html.p('Are you sure you want to proceed?'),
+ *       footer: Fragment(
+ *         Button({ variant: 'outline', onClick: close }, 'Cancel'),
+ *         Button({ color: 'primary', variant: 'filled', onClick: close }, 'OK')
+ *       ),
+ *     })},
+ *     'Open Modal'
+ *   )
+ * )
+ * ```
  */
 export declare function Modal(options: ModalOptions, fn: (open: (content: ModalContentOptions) => void, close: () => void) => TNode): Renderable;
 /**
- * Convenience function to create a confirmation modal
+ * Convenience wrapper around {@link Modal} that provides a pre-built confirmation dialog
+ * with configurable confirm and cancel buttons.
+ *
+ * The modal automatically includes localized button labels (via {@link BeatUII18n}) and
+ * hides the header close button by default.
+ *
+ * @param options - Combined {@link ModalOptions} plus confirmation-specific settings:
+ * @param options.confirmText - Custom label for the confirm button. Falls back to the i18n `confirm` string.
+ * @param options.cancelText - Custom label for the cancel button. Falls back to the i18n `cancel` string.
+ * @param options.onConfirm - Callback invoked when the user clicks the confirm button.
+ * @param options.onCancel - Callback invoked when the user clicks the cancel button.
+ * @param fn - A render function that receives `open` and `close` callbacks and returns the trigger content.
+ *   Call `open(message)` with a `TNode` to display the confirmation message.
+ * @returns A renderable node
+ *
+ * @example
+ * ```typescript
+ * ConfirmModal(
+ *   {
+ *     onConfirm: () => console.log('Confirmed'),
+ *     onCancel: () => console.log('Cancelled'),
+ *     confirmText: 'Delete',
+ *     cancelText: 'Keep',
+ *   },
+ *   (open, close) => Button(
+ *     { onClick: () => open(html.p('Delete this item permanently?')) },
+ *     'Delete Item'
+ *   )
+ * )
+ * ```
  */
 export declare function ConfirmModal(options: 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. */
     cancelText?: Value<string>;
+    /** Callback invoked when the user clicks the confirm button. */
     onConfirm?: () => void;
+    /** Callback invoked when the user clicks the cancel button. */
     onCancel?: () => void;
 }, fn: (open: (message: TNode) => void, close: () => void) => TNode): Renderable;

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

@@ -1,11 +1,72 @@
 import { TNode, Value } from '@tempots/dom';
 import { OverlayEffect } from '../theme/types';
+/**
+ * Configuration options for the Overlay component.
+ */
 export type OverlayOptions = {
+    /**
+     * Visual effect applied to the overlay backdrop.
+     * @default 'opaque'
+     */
     effect?: Value<OverlayEffect>;
+    /**
+     * Interaction mode for the overlay.
+     * - `'capturing'` - Listens for Escape key presses and click-outside events to close the overlay.
+     * - `'non-capturing'` - Does not register any close event listeners, making the overlay non-dismissable via user interaction.
+     * @default 'capturing'
+     */
     mode?: Value<'capturing' | 'non-capturing'>;
+    /**
+     * Callback invoked when the user clicks outside the overlay content area.
+     * Only fires when `mode` is `'capturing'`.
+     */
     onClickOutside?: () => void;
+    /**
+     * Callback invoked when the user presses the Escape key.
+     * Only fires when `mode` is `'capturing'`.
+     */
     onEscape?: () => void;
+    /**
+     * Content to render inside the overlay.
+     */
     content?: TNode;
+    /**
+     * Where to attach the overlay in the DOM.
+     * - `'body'` - Renders via a portal to the document body.
+     * - `'element'` - Renders as a child of the current element context.
+     * @default 'body'
+     */
     container?: 'body' | 'element';
 };
+/**
+ * Low-level overlay primitive that manages a full-screen backdrop with animated open/close transitions.
+ *
+ * The overlay handles event delegation (Escape key, click-outside), inerts sibling elements
+ * for accessibility, and supports portal rendering to the document body.
+ *
+ * Higher-level components such as {@link Modal}, {@link Drawer}, and {@link Lightbox} are built
+ * on top of this primitive.
+ *
+ * @param fn - A render function that receives `open` and `close` callbacks and returns the trigger content.
+ *   Call `open(options)` to display the overlay and `close()` to dismiss it.
+ * @returns A renderable node
+ *
+ * @example
+ * ```typescript
+ * Overlay((open, close) => {
+ *   return Button(
+ *     { onClick: () => open({
+ *       effect: 'opaque',
+ *       content: html.div(
+ *         html.p('Overlay content'),
+ *         Button({ onClick: close }, 'Close')
+ *       ),
+ *       onEscape: close,
+ *       onClickOutside: close,
+ *     })},
+ *     'Open Overlay'
+ *   )
+ * })
+ * ```
+ */
 export declare function Overlay(fn: (open: (options: OverlayOptions) => void, close: () => void) => TNode): import("@tempots/dom").Renderable;

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

@@ -0,0 +1,100 @@
+import { TNode, Value, Renderable } from '@tempots/dom';
+import { Placement } from '@tempots/ui';
+import { FlyoutTrigger } from '../navigation/flyout';
+export type PopoverTrigger = FlyoutTrigger;
+/**
+ * Configuration options for the {@link Popover} component.
+ */
+export interface PopoverOptions {
+    /**
+     * The content to display inside the popover.
+     * Can be a static TNode or a factory function that returns TNode.
+     */
+    content: TNode | (() => TNode);
+    /**
+     * Placement of the popover relative to the trigger element.
+     * Uses the Floating UI placement model (e.g., `'top'`, `'bottom-start'`, `'right-end'`).
+     * @default 'bottom'
+     */
+    placement?: Value<Placement>;
+    /**
+     * Delay in milliseconds before showing the popover after trigger activation.
+     * @default 0
+     */
+    showDelay?: Value<number>;
+    /**
+     * Delay in milliseconds before hiding the popover after trigger deactivation.
+     * @default 0
+     */
+    hideDelay?: Value<number>;
+    /**
+     * Offset in pixels from the main axis (vertical for top/bottom placements,
+     * horizontal for left/right placements).
+     * @default 8
+     */
+    mainAxisOffset?: Value<number>;
+    /**
+     * Offset in pixels from the cross axis (horizontal for top/bottom placements,
+     * vertical for left/right placements).
+     * @default 0
+     */
+    crossAxisOffset?: Value<number>;
+    /**
+     * How the popover is triggered to show and hide.
+     * @default 'click'
+     */
+    showOn?: Value<PopoverTrigger>;
+    /**
+     * Whether the popover can be closed with the Escape key or by clicking outside.
+     * @default true
+     */
+    closable?: Value<boolean>;
+    /**
+     * ARIA role attribute applied to the popover container.
+     * @default 'dialog'
+     */
+    role?: Value<string>;
+    /**
+     * Value for the `aria-haspopup` attribute on the trigger element.
+     * Indicates the type of popup that the trigger controls.
+     * @default 'dialog'
+     */
+    hasPopup?: Value<boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid'>;
+}
+/**
+ * Popover component that displays arbitrary content in a positioned overlay panel
+ * triggered by clicking (or other interactions with) a trigger element.
+ *
+ * Unlike wrapper-based popover libraries, this component is designed to be a child
+ * of the trigger element, rather than wrapping it.
+ *
+ * Built on top of the Flyout component for positioning and interaction logic.
+ *
+ * @example
+ * ```typescript
+ * html.button(
+ *   'Click me',
+ *   Popover({
+ *     content: html.div(
+ *       html.p('Popover content'),
+ *       html.button('Action')
+ *     ),
+ *     placement: 'bottom-start'
+ *   })
+ * )
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // With lazy content loading
+ * html.button(
+ *   'Settings',
+ *   Popover({
+ *     content: () => SettingsPanel(),
+ *     placement: 'bottom-end',
+ *     showOn: 'click'
+ *   })
+ * )
+ * ```
+ */
+export declare function Popover(options: PopoverOptions): Renderable;

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

@@ -1,25 +1,74 @@
 import { TNode, Value, Renderable } from '@tempots/dom';
 import type { ThemeColorName } from '../../tokens';
 import { ExtendedColor } from '../theme/style-utils';
+/**
+ * Corner position for the {@link Ribbon} component.
+ * Determines which corner of the parent container the ribbon is placed at.
+ */
 export type RibbonCorner = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+/**
+ * Configuration options for the {@link Ribbon} component.
+ */
 export type RibbonOptions = {
-    /** Background/text color theme (defaults to 'primary') */
+    /**
+     * Theme color applied to the ribbon background and text.
+     * Accepts any named theme color or an extended color value.
+     * @default 'primary'
+     */
     color?: Value<ThemeColorName | ExtendedColor>;
-    /** Extra classes */
+    /**
+     * Additional CSS class names to apply to the ribbon element.
+     */
     class?: Value<string>;
-    /** Horizontal nudge along the top edge before rotation (px if number). Default: 0px */
+    /**
+     * Horizontal nudge along the edge before rotation. Accepts a pixel number or CSS length string.
+     * @default 0
+     */
     inset?: Value<number | string>;
-    /** Fine vertical correction to align the band crossing (px if number). Default: -1px */
+    /**
+     * Vertical offset correction to fine-tune the band crossing position.
+     * Accepts a pixel number or CSS length string.
+     * @default 40
+     */
     offset?: Value<number | string>;
-    /** Minimum width of the band (px if number). Default: null */
+    /**
+     * Minimum width of the ribbon band. Accepts a pixel number or CSS length string.
+     * @default 100
+     */
     width?: Value<number | string>;
-    /** Rotation angle in degrees. Default: 45 */
+    /**
+     * Rotation angle of the ribbon in degrees.
+     * @default 45
+     */
     angle?: Value<number>;
-    /** Corner position. Default: 'top-end' */
+    /**
+     * Corner of the parent container where the ribbon is positioned.
+     * @default 'top-end'
+     */
     corner?: Value<RibbonCorner>;
 };
 /**
- * Ribbon: renders diagonal content at a specified corner.
- * Note: The parent container should be positioned (e.g., position: relative) for best results.
+ * Renders a diagonal ribbon badge at a specified corner of its parent container.
+ *
+ * The ribbon is positioned absolutely, so the parent container should use
+ * `position: relative` (or another positioning context) for correct placement.
+ * Theme-aware colors are applied via CSS custom properties, supporting both
+ * light and dark modes.
+ *
+ * @param options - Configuration options controlling color, position, size, and rotation
+ * @param children - Content to display inside the ribbon (typically short text like "New" or "Sale")
+ * @returns A renderable node
+ *
+ * @example
+ * ```typescript
+ * html.div(
+ *   attr.style('position: relative'),
+ *   Ribbon(
+ *     { color: 'danger', corner: 'top-end', angle: 45 },
+ *     'Sale'
+ *   ),
+ *   html.p('Product card content')
+ * )
+ * ```
  */
 export declare function Ribbon({ color, class: cls, inset, offset, width, angle, corner, }: RibbonOptions, ...children: TNode[]): Renderable;

package/dist/types/components/prosemirror/etoolbar-button.d.ts

@@ -1,11 +1,11 @@
-import { Signal, Value } from '@tempots/dom';
-import { ControlSize } from '../theme';
-export declare function EToolbarButton({ active, display, onClick, disabled, label, icon, size, }: {
-    active: Signal<boolean>;
-    display: Signal<boolean>;
-    onClick: () => void;
-    disabled: Signal<boolean>;
-    label: Value<string>;
-    icon: Value<string>;
-    size: Value<ControlSize>;
-}): import("@tempots/dom").Renderable;
+/**
+ * Re-exports the shared {@link EditorToolbarButton} component under its
+ * legacy alias `EToolbarButton` for backwards compatibility with older
+ * ProseMirror toolbar integrations.
+ *
+ * New code should import `EditorToolbarButton` directly from
+ * `../editor-toolbar` instead.
+ *
+ * @module
+ */
+export { EditorToolbarButton as EToolbarButton } from '../editor-toolbar';

package/dist/types/components/prosemirror/etoolbar-group.d.ts

@@ -1,4 +1,11 @@
-import { Signal, TNode } from '@tempots/dom';
-export declare function EToolbarGroup({ display, }: {
-    display: Signal<boolean>[];
-}, ...children: TNode[]): import("@tempots/dom").Renderable;
+/**
+ * Re-exports the shared {@link EditorToolbarGroup} component under its
+ * legacy alias `EToolbarGroup` for backwards compatibility with older
+ * ProseMirror toolbar integrations.
+ *
+ * New code should import `EditorToolbarGroup` directly from
+ * `../editor-toolbar` instead.
+ *
+ * @module
+ */
+export { EditorToolbarGroup as EToolbarGroup } from '../editor-toolbar';

package/dist/types/components/prosemirror/link-control.d.ts

@@ -1,12 +1,53 @@
-import { Signal, TNode, Value } from '@tempots/dom';
+/**
+ * ProseMirror link editing control for the editor toolbar.
+ *
+ * Renders a toolbar button that toggles link marks on/off, along with an
+ * inline URL text input and a "go" button that opens the entered URL in a
+ * new tab.
+ *
+ * @module
+ */
+import { Signal, Value } from '@tempots/dom';
 import { EditorView } from 'prosemirror-view';
 import { ControlSize } from '../theme';
+/**
+ * Configuration properties for the {@link LinkControl} component.
+ */
 export interface LinkDialogButtonProps {
+    /** Ticker signal that increments on every ProseMirror state change. */
     stateUpdate: Signal<number>;
+    /** Signal holding the current ProseMirror `EditorView`. */
     view: Signal<EditorView>;
+    /** Signal indicating whether the editor is in read-only mode. */
     isReadOnly: Signal<boolean>;
+    /** Accessible label for the link toolbar button. */
     label: Value<string>;
+    /** Placeholder text shown in the URL input field. */
     linkUrlPlaceholder: Value<string>;
+    /** Size of the toolbar button and input controls. */
     size: Value<ControlSize>;
 }
-export declare function LinkControl({ stateUpdate, view, isReadOnly, label, linkUrlPlaceholder, size, }: LinkDialogButtonProps): TNode;
+/**
+ * A toolbar control for editing hyperlinks in a ProseMirror editor.
+ *
+ * Renders a link toggle button that creates or removes link marks on the
+ * current selection. When a link is active, an inline `TextInput` appears
+ * allowing the user to edit the URL, along with a "go" button to open the
+ * URL in a new browser tab.
+ *
+ * @param props - Configuration for the link control (view, state, labels, etc.).
+ * @returns A `TNode` renderable for inclusion in a ProseMirror toolbar.
+ *
+ * @example
+ * ```ts
+ * LinkControl({
+ *   stateUpdate: editorStateNotifier,
+ *   view: editorViewSignal,
+ *   isReadOnly: signal(false),
+ *   label: 'Link',
+ *   linkUrlPlaceholder: 'Enter URL...',
+ *   size: 'sm',
+ * })
+ * ```
+ */
+export declare function LinkControl({ stateUpdate, view, isReadOnly, label, linkUrlPlaceholder, size, }: LinkDialogButtonProps): import("@tempots/dom").Renderable<import("@tempots/dom").DOMContext>;

package/dist/types/components/prosemirror/prosemirror-toolbar.d.ts

@@ -1,18 +1,58 @@
-import { TNode, Value, Signal } from '@tempots/dom';
+/**
+ * Toolbar component for the ProseMirror markdown editor.
+ *
+ * Renders formatting buttons (bold, italic, code), heading level selectors,
+ * list toggles (bullet/ordered), block formatting (blockquote, code block,
+ * horizontal rule), and an inline link editor -- all driven by the
+ * {@link MarkdownFeatures} configuration.
+ *
+ * @module
+ */
+import { Value, Signal } from '@tempots/dom';
 import type { EditorView } from 'prosemirror-view';
 import type { MarkdownFeatures } from './prosemirror-markdown-input';
 import { ControlSize } from '../theme';
+/**
+ * Options for configuring the ProseMirror markdown toolbar.
+ */
 export interface ProseMirrorToolbarOptions {
-    /** The ProseMirror editor view */
+    /** Signal holding the ProseMirror editor view, or `null` before initialization. */
     view: Signal<EditorView | null>;
+    /** Ticker signal that increments on every ProseMirror state change. */
     stateUpdate: Signal<number>;
-    /** Enabled markdown features */
+    /** Signal of enabled markdown features controlling which toolbar buttons are visible. */
     features: Signal<MarkdownFeatures>;
-    /** Whether the editor is readonly */
+    /**
+     * Signal indicating whether the editor is in read-only mode.
+     * Toolbar buttons are disabled when `true`.
+     * @default signal(false)
+     */
     readOnly?: Signal<boolean>;
+    /**
+     * Size of the toolbar buttons.
+     * @default 'sm'
+     */
     size?: Value<ControlSize>;
 }
 /**
- * Create a toolbar for the ProseMirror markdown editor
+ * Creates a formatting toolbar for the ProseMirror markdown editor.
+ *
+ * The toolbar adapts dynamically to the enabled {@link MarkdownFeatures},
+ * showing only the relevant button groups. It integrates with BeatUI's
+ * i18n system for localised button labels and tooltips.
+ *
+ * @param options - Toolbar configuration including the editor view, features, and size.
+ * @returns A `TNode` renderable containing the complete toolbar.
+ *
+ * @example
+ * ```ts
+ * ProseMirrorToolbar({
+ *   view: editorViewSignal,
+ *   stateUpdate: editorStateNotifier,
+ *   features: signal(DEFAULT_FEATURES),
+ *   readOnly: signal(false),
+ *   size: 'sm',
+ * })
+ * ```
  */
-export declare function ProseMirrorToolbar({ view, stateUpdate, features, readOnly, size, }: ProseMirrorToolbarOptions): TNode;
+export declare function ProseMirrorToolbar({ view, stateUpdate, features, readOnly, size, }: ProseMirrorToolbarOptions): import("@tempots/dom").Renderable;