@luzmo/lucero 1.0.1-alpha.9 → 1.0.2

package/components/prompt-box/controllers/rich-input-controller.d.ts

@@ -0,0 +1,89 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { type PromptBoxElement, type PromptBoxSegment } from '../types';
+export interface RichInputHost extends ReactiveControllerHost {
+    allowElements: boolean;
+    acceptedElementTypes: string[];
+    allowImages: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    pending: boolean;
+    value: string;
+    shadowRoot: ShadowRoot | null;
+    dispatchEvent(event: Event): boolean;
+    requestUpdate(): void;
+    handlePastedImages(clipboardData: DataTransfer | null): boolean;
+}
+/**
+ * Manages the contenteditable rich input: element badges, paste handling,
+ * drag-and-drop, and segment parsing.
+ */
+export declare class RichInputController implements ReactiveController {
+    private _host;
+    private _elements;
+    private _idCounter;
+    private _dragCaret;
+    isDragOver: boolean;
+    richInputElement: HTMLDivElement | null;
+    constructor(host: RichInputHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    get elements(): Map<string, PromptBoxElement>;
+    get elementCount(): number;
+    getSegments(): PromptBoxSegment[];
+    setSegments(value: PromptBoxSegment[]): void;
+    insertElement(elementType: string, label: string, data: unknown, icon?: unknown): string;
+    /**
+     * Core insertion logic. When a range is provided it is used directly,
+     * bypassing the Selection API (essential for Safari drag-and-drop where
+     * the Selection API cannot address nodes inside Shadow DOM).
+     * Pass `null` to read from the current selection, or `undefined` to skip
+     * range-based insertion entirely and append at the end.
+     */
+    private _insertElementAtRange;
+    private _getSelectionRange;
+    removeElement(id: string): void;
+    getElements(): PromptBoxElement[];
+    clearElements(): void;
+    handleRichInput: () => void;
+    handleRichPaste: (e: ClipboardEvent) => void;
+    handleRichDragOver: (e: DragEvent) => void;
+    handleRichDragLeave: (e: DragEvent) => void;
+    handleRichDrop: (e: DragEvent) => void;
+    /**
+     * Handle Backspace/Delete next to element badges.
+     * Returns true if a badge was removed (caller should preventDefault).
+     */
+    handleBadgeDelete(key: string): boolean;
+    /** Find an element badge immediately before `offset` within `container`. */
+    private _findBadgeBefore;
+    /** Find an element badge immediately after `offset` within `container`. */
+    private _findBadgeAfter;
+    /** Plain text + inline labels, in segment order (used for `value` / textarea parity). */
+    private _segmentsToPlainText;
+    private _cannotEditRichContent;
+    /**
+     * When there are no badges and no visible text, contenteditable still often
+     * leaves `<br>` or zero-width-only nodes. That prevents `:empty` from matching,
+     * so the CSS placeholder pseudo-element stays hidden. Clear the DOM in that case.
+     */
+    private _cleanupSemanticallyEmptyRichInput;
+    syncValue(): void;
+    private _parseSegments;
+    private _createBadgeNode;
+    /**
+     * Inserts a space text node after the given badge if the next character
+     * is not already a space (or there is no next sibling).
+     *
+     * Prepends a zero-width space (U+200B) so Safari renders the caret at
+     * the correct position instead of jumping to the start of the input.
+     */
+    private _ensureSpaceAfter;
+    private _showDragCaret;
+    private _hideDragCaret;
+    private _generateId;
+    /**
+     * Moves the caret to the character position closest to the given viewport
+     * coordinates. Used during `dragover` to show a live caret preview.
+     */
+    private _positionCaretAtPoint;
+}

package/components/prompt-box/controllers/trigger-menu-controller.d.ts

@@ -0,0 +1,107 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { VirtualTrigger } from '../../overlay/virtual-trigger';
+import type { TriggerConfig, TriggerOption } from '../types';
+export interface TriggerMenuHost extends ReactiveControllerHost {
+    allowElements: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    pending: boolean;
+    shadowRoot: ShadowRoot | null;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    dispatchEvent(event: Event): boolean;
+    requestUpdate(): void;
+    insertElement(elementType: string, label: string, data: unknown, icon?: unknown): string;
+    focus(): void;
+}
+/**
+ * Manages trigger menu detection, overlay positioning, option filtering,
+ * and keyboard navigation.
+ *
+ * Supports arbitrary trigger keys via a `TriggerConfig[]` — no longer
+ * hardcoded to `@` and `/`.
+ */
+export declare class TriggerMenuController implements ReactiveController {
+    private _host;
+    private _triggers;
+    /** Currently active trigger key, or null when no menu is open. */
+    activeTrigger: string | null;
+    /** Text typed after the trigger key (used for filtering). */
+    searchString: string;
+    /** Virtual anchor element for the overlay. */
+    virtualElement: VirtualTrigger | null;
+    /**
+     * Index of the currently highlighted option in the filtered list.
+     * -1 means nothing explicitly selected (but first item is visually active).
+     */
+    highlightedIndex: number;
+    /**
+     * Suppresses pointer-based highlighting after keyboard navigation
+     * until the user actually moves the mouse. Prevents scroll-induced
+     * `pointerenter` from stealing the highlight.
+     */
+    pointerMovedSinceKeyNav: boolean;
+    /** Index of the option currently under the pointer, -1 when none. */
+    hoveredIndex: number;
+    /** Filtered options for the active trigger, computed on each search change. */
+    filteredOptions: TriggerOption[];
+    /** Reference to the contenteditable element. */
+    richInputElement: HTMLDivElement | null;
+    constructor(host: TriggerMenuHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    get triggers(): TriggerConfig[];
+    set triggers(value: TriggerConfig[]);
+    /**
+     * Get the TriggerConfig for the currently active trigger.
+     */
+    get activeConfig(): TriggerConfig | undefined;
+    /**
+     * Whether any trigger configs are defined.
+     */
+    get hasTriggers(): boolean;
+    /**
+     * Check if a given trigger key has a slot defined.
+     */
+    getSlotName(triggerKey: string): string | undefined;
+    /**
+     * Get all distinct slot names across all trigger configs.
+     */
+    get allSlotNames(): string[];
+    /**
+     * Called on each input event in the rich input. When no menu is open, detects
+     * trigger keys typed at a word boundary; when open, updates the search string.
+     */
+    handleInput(inputEvent?: InputEvent): void;
+    open(triggerKey: string): void;
+    close(): void;
+    /**
+     * Handle keydown events in the rich input when a trigger menu is open.
+     * Returns true if the event was consumed (caller should preventDefault).
+     */
+    handleKeydown(e: KeyboardEvent): boolean;
+    /**
+     * Handle the overlay's closed event.
+     */
+    handleOverlayClosed: () => void;
+    /**
+     * Handle keydown inside the overlay (e.g. Escape from slotted content).
+     */
+    handleOverlayKeydown: (e: KeyboardEvent) => void;
+    private _detectTrigger;
+    private _extractTriggerSearchFromContent;
+    private _isTriggerKey;
+    private _updateFilteredOptions;
+    /**
+     * Find the first non-header option index starting from (and including) `start`.
+     * Returns -1 if none found.
+     */
+    private _findSelectableIndex;
+    handlePointerMove: () => void;
+    private _moveHighlight;
+    private _selectHighlighted;
+    selectOption(option: TriggerOption): void;
+    private _handleTriggerSelect;
+    private _handleDocumentPointerDown;
+    private _dispatchChange;
+}

package/components/prompt-box/index.cjs

@@ -0,0 +1,18 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../prompt-box-DV8Smf3Q.cjs`);exports.ELEMENT_MIME_TYPE=e.n,exports.LuzmoPromptBox=e.t;

package/components/prompt-box/index.d.ts

@@ -0,0 +1,9 @@
+import { LuzmoPromptBox } from './prompt-box';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-prompt-box': LuzmoPromptBox;
+    }
+}
+export { LuzmoPromptBox } from './prompt-box';
+export { ELEMENT_MIME_TYPE } from './types';
+export type { ActionValue, PromptBoxAttachment, PromptBoxElement, PromptBoxElementInsertedDetail, PromptBoxElementRemovedDetail, PromptBoxRecordErrorDetail, PromptBoxRecordingCompleteDetail, PromptBoxSegment, PromptBoxSubmitDetail, TriggerConfig, TriggerMenuChangeDetail, TriggerMenuSelectDetail, TriggerOption } from './types';

package/components/prompt-box/index.js

@@ -0,0 +1,25 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+(() => {
+	if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+		let e = document.createElement("style");
+		e.setAttribute("data-luzmo-vars", ""), e.textContent = "html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), black 45%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), black 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-primary: #4434ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), black 20%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5%);--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 7%), black 1%);--luzmo-background-color-focus: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5%);--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), black 25%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), black 45%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), black 25%);--luzmo-secondary: #d000d0;--luzmo-secondary-hover: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-down: color-mix(in oklch, var(--luzmo-secondary), black 20%);--luzmo-secondary-focus: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 208, 0, 208;--luzmo-scrollbar-size: 6px;--luzmo-scrollbar-thumb-background: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-scrollbar-thumb-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-hover-background: rgba( var(--luzmo-border-color-rgb), 0.4 );--luzmo-scrollbar-track-background: transparent;--luzmo-scrollbar-track-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-width: thin;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), black 20%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-negative-inverse-color: #ffffff;--luzmo-positive-color: rgb(18, 133, 90);--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), black 20%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-rgb: 18, 133, 90;--luzmo-positive-inverse-color: #ffffff;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), black 45%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), black 45%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-informative-color: #1670dd;--luzmo-informative-color-rgb: 22, 112, 221;--luzmo-notice-color: rgb(229, 127, 0);--luzmo-seafoam-color: rgb(0, 140, 140);--luzmo-indigo-color: rgb(68, 52, 255);--luzmo-purple-color: rgb(112, 48, 210);--luzmo-fuchsia-color: rgb(205, 30, 170);--luzmo-magenta-color: rgb(203, 36, 98);--luzmo-yellow-color: rgb(228, 208, 0);--luzmo-gray-color: rgb(110, 110, 110);--luzmo-red-color: rgb(202, 34, 28);--luzmo-orange-color: rgb(218, 123, 17);--luzmo-chartreuse-color: rgb(85, 135, 0);--luzmo-celery-color: rgb(48, 134, 22);--luzmo-green-color: rgb(18, 133, 90);--luzmo-cyan-color: rgb(0, 134, 180);--luzmo-blue-color: rgb(22, 112, 221);--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 10px;--luzmo-icon-size-xs: 12px;--luzmo-icon-size-s: 14px;--luzmo-icon-size-m: 16px;--luzmo-icon-size-l: 18px;--luzmo-icon-size-xl: 20px;--luzmo-icon-size-xxl: 32px}", document.head.appendChild(e);
+	}
+})();
+import { n as e, t } from "../prompt-box-BEloQP-R.js";
+export { e as ELEMENT_MIME_TYPE, t as LuzmoPromptBox };

package/components/prompt-box/keyboard-focus-tracker.d.ts

@@ -0,0 +1,3 @@
+export declare function subscribeKeyboardTracker(): void;
+export declare function unsubscribeKeyboardTracker(): void;
+export declare function wasKeyboardEvent(): boolean;

package/components/prompt-box/prompt-box-templates.d.ts

@@ -0,0 +1,10 @@
+import { nothing, TemplateResult } from 'lit';
+import type { LuzmoPromptBox } from './prompt-box';
+export declare function renderTopActions(el: LuzmoPromptBox, hasContent: boolean, onSlotChange: (e: Event) => void): TemplateResult;
+export declare function renderBottomActions(el: LuzmoPromptBox, hasContent: boolean, onSlotChange: (e: Event) => void): TemplateResult;
+export declare function renderRecordButton(el: LuzmoPromptBox): TemplateResult;
+export declare function renderSubmitButton(el: LuzmoPromptBox): TemplateResult;
+export declare function renderTriggerMenu(el: LuzmoPromptBox): TemplateResult;
+export declare function renderTextarea(el: LuzmoPromptBox): TemplateResult;
+export declare function renderAttachments(el: LuzmoPromptBox): TemplateResult | typeof nothing;
+export declare function renderHiddenFileInput(el: LuzmoPromptBox): TemplateResult | typeof nothing;

package/components/prompt-box/prompt-box.d.ts

@@ -0,0 +1,194 @@
+import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
+import { LuzmoElement } from '../../utils/base';
+import '../action-button';
+import '../button';
+import '../button/clear-button';
+import '../icon';
+import '../overlay';
+import '../tags';
+import '../text-field';
+import { AttachmentsController } from './controllers/attachments-controller';
+import { RecordingController } from './controllers/recording-controller';
+import { RichInputController } from './controllers/rich-input-controller';
+import { TriggerMenuController } from './controllers/trigger-menu-controller';
+import type { PromptBoxAttachment, PromptBoxElement, PromptBoxElementInsertedDetail, PromptBoxElementRemovedDetail, PromptBoxRecordErrorDetail, PromptBoxRecordingCompleteDetail, PromptBoxSegment, PromptBoxSubmitDetail, TriggerConfig, TriggerMenuChangeDetail, TriggerMenuSelectDetail, TriggerOption } from './types';
+declare const LuzmoPromptBox_base: typeof LuzmoElement & {
+    new (...args: any[]): import("../..").SizedElementInterface;
+    prototype: import("../..").SizedElementInterface;
+};
+/**
+ * A prompt box component for chat/AI interfaces with text input and action slots.
+ *
+ * @element luzmo-prompt-box
+ *
+ * @slot - Default slot for additional content
+ * @slot top-actions - Slot for action buttons displayed above the input
+ * @slot bottom-actions - Slot for action buttons displayed below the input
+ * @slot record-button - Slot for a custom record/voice button
+ * @slot submit-button - Slot for a custom submit button
+ *
+ * @fires luzmo-submit - Fired when the prompt is submitted.
+ * @fires luzmo-trigger-change - Fired when a trigger menu opens, closes, or the search string changes.
+ * @fires luzmo-element-inserted - Fired when an inline element badge is inserted.
+ * @fires luzmo-element-removed - Fired when an inline element badge is removed.
+ * @fires luzmo-attachments-change - Fired when attachments change.
+ * @fires luzmo-record - Fired when recording state changes.
+ * @fires luzmo-recording-complete - Fired when recording finishes.
+ * @fires luzmo-record-cancel - Fired when recording is cancelled.
+ * @fires luzmo-record-error - Fired when recording errors.
+ */
+export declare class LuzmoPromptBox extends LuzmoPromptBox_base {
+    static get styles(): CSSResultArray;
+    /** The number of visible text rows for the textarea. */
+    rows: number;
+    /** Whether the textarea should grow to accommodate content. */
+    grows: boolean;
+    /**
+     * Maximum rows the textarea can grow to (`-1` = unlimited).
+     * Values less than 1 are disregarded.
+     */
+    maxRows: number;
+    /** Whether to show the record/voice button. */
+    recording: boolean;
+    /** Whether the submit button is hidden. */
+    hideSubmit: boolean;
+    /** Whether submit behavior is disabled while keeping the input interactive. */
+    disableSubmit: boolean;
+    /** Whether to use single-line layout with actions, input, and submit in one row. */
+    singleLine: boolean;
+    /** Placeholder text for the input. */
+    placeholder: string;
+    /** The current value of the input. */
+    value: string;
+    /** Whether the prompt box is disabled. */
+    disabled: boolean;
+    /** Whether the input is readonly. */
+    readonly: boolean;
+    /** Maximum number of characters allowed. */
+    maxlength: number;
+    /** Whether the prompt box is in a pending/loading state. */
+    pending: boolean;
+    /** Whether to allow image attachments. */
+    allowImages: boolean;
+    /** Whether to allow file attachments. */
+    allowFiles: boolean;
+    /** Accepted file types for attachments (MIME types or extensions). */
+    acceptedFileTypes: string[];
+    /**
+     * Whether to enable rich input mode with inline element badges.
+     * When enabled, the textarea is replaced with a contenteditable div.
+     */
+    allowElements: boolean;
+    /** Optional filter for accepted element types during drag-and-drop. */
+    acceptedElementTypes: string[];
+    /**
+     * Trigger key configurations. Each entry defines a key character that
+     * opens a popover when typed at a word boundary.
+     *
+     * ```ts
+     * promptBox.triggers = [
+     *   { key: '@', options: assetOptions, slotName: 'assets-menu' },
+     *   { key: '/', options: skillOptions, lazy: true }
+     * ];
+     *
+     * ```
+     */
+    get triggers(): TriggerConfig[];
+    set triggers(value: TriggerConfig[]);
+    private _hasTopActions;
+    private _hasBottomActions;
+    private _hasRecordButton;
+    private _hasSubmitButton;
+    private _inputFocused;
+    private _inputElement;
+    private _richInputElement;
+    private _fileInput;
+    private _finishRecordingButton;
+    private _attachments;
+    private _recording;
+    private _richInput;
+    private _triggerMenu;
+    /** @internal — used by templates */
+    get attachmentsController(): AttachmentsController;
+    /** @internal — used by templates */
+    get recordingController(): RecordingController;
+    /** @internal — used by templates */
+    get richInputController(): RichInputController;
+    /** @internal — used by templates */
+    get triggerMenuController(): TriggerMenuController;
+    /** @internal — used by templates */
+    get hasRecordButton(): boolean;
+    /** @internal — used by templates */
+    get hasSubmitButton(): boolean;
+    get tagSize(): 's' | 'm';
+    get segments(): PromptBoxSegment[];
+    set segments(value: PromptBoxSegment[]);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    focus(): void;
+    clear(): void;
+    addFiles(files: File[]): string[];
+    removeAttachment(id: string): void;
+    clearAttachments(): void;
+    getAttachments(): PromptBoxAttachment[];
+    openFilePicker(): void;
+    insertElement(elementType: string, label: string, data: unknown, icon?: unknown): string;
+    removeElement(id: string): void;
+    getElements(): PromptBoxElement[];
+    getTopActions(): Element[];
+    getBottomActions(): Element[];
+    submit(): void;
+    /** @internal */
+    selectTriggerOption(option: TriggerOption): void;
+    /** @internal */
+    highlightTriggerOption(index: number): void;
+    /** @internal */
+    handleRecordButtonSlotChange: (e: Event) => void;
+    /** @internal */
+    handleSubmitButtonSlotChange: (e: Event) => void;
+    /** @internal */
+    handleRecordClick: (event: Event) => void;
+    /** @internal */
+    handleInput: (e: Event) => void;
+    /** @internal */
+    handleKeydown: (e: KeyboardEvent) => void;
+    /** @internal */
+    handleInputFocusIn: () => void;
+    /** @internal */
+    handleInputFocusOut: () => void;
+    /** @internal */
+    handleRichInputEvent: (e: InputEvent) => void;
+    /** @internal */
+    handleRichKeydown: (e: KeyboardEvent) => void;
+    private _slotPresenceHandler;
+    private _handleComponentFocusIn;
+    private _handleComponentFocusOut;
+    private _handlePaste;
+    /** @internal */
+    handlePastedImages(clipboardData: DataTransfer | null): boolean;
+    private _handleTopActionsSlotChange;
+    private _handleBottomActionsSlotChange;
+    private _submit;
+    protected render(): TemplateResult;
+}
+export type { ActionValue, PromptBoxAttachment, PromptBoxElement, PromptBoxElementInsertedDetail, PromptBoxElementRemovedDetail, PromptBoxRecordErrorDetail, PromptBoxRecordingCompleteDetail, PromptBoxSegment, PromptBoxSubmitDetail, TriggerConfig, TriggerMenuChangeDetail, TriggerMenuSelectDetail, TriggerOption } from './types';
+export { ELEMENT_MIME_TYPE } from './types';
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'luzmo-submit': CustomEvent<PromptBoxSubmitDetail>;
+        'luzmo-record': CustomEvent<{
+            isRecording: boolean;
+        }>;
+        'luzmo-recording-complete': CustomEvent<PromptBoxRecordingCompleteDetail>;
+        'luzmo-record-cancel': CustomEvent<void>;
+        'luzmo-record-error': CustomEvent<PromptBoxRecordErrorDetail>;
+        'luzmo-attachments-change': CustomEvent<{
+            attachments: PromptBoxAttachment[];
+        }>;
+        'luzmo-element-inserted': CustomEvent<PromptBoxElementInsertedDetail>;
+        'luzmo-element-removed': CustomEvent<PromptBoxElementRemovedDetail>;
+        'luzmo-trigger-change': CustomEvent<TriggerMenuChangeDetail>;
+        'luzmo-trigger-select': CustomEvent<TriggerMenuSelectDetail>;
+    }
+}

package/components/prompt-box/range-from-point.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Utilities for computing a collapsed Range at a given viewport coordinate,
+ * used by the drag-and-drop logic in `RichInputController` to position the
+ * caret and drag indicator at the drop point.
+ *
+ * Tries shadow-root-aware APIs first, then document-level APIs, and finally
+ * a manual text-node binary search for maximum browser coverage (Safari
+ * doesn't expose caret APIs for Shadow DOM).
+ */
+/**
+ * Compute a collapsed Range at the character position closest to the given
+ * viewport coordinates within `container`. Tries shadow-root-aware caret
+ * APIs first, then document-level APIs, then a manual walk.
+ *
+ * @param shadowRoot - Shadow root to try shadow-aware caret APIs on.
+ * @param container  - The contenteditable element to search within.
+ * @param x          - Viewport X coordinate.
+ * @param y          - Viewport Y coordinate.
+ * @param ignoreNode - Optional node to skip during the manual walk (e.g. drag caret).
+ */
+export declare function getRangeAtPoint(shadowRoot: ShadowRoot | null, container: HTMLElement, x: number, y: number, ignoreNode?: Node | null): Range | null;

package/components/prompt-box/selection-utils.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Get a Range from the current selection that can see into shadow DOM.
+ * Tries `shadowRoot.getSelection` (older Chrome), then `document.getSelection`
+ * with a containment check, then `getComposedRanges` (Safari 17+, Chrome 130+)
+ * as a fallback when `getRangeAt` can't cross the shadow boundary.
+ */
+export declare function getShadowRange(shadowRoot: ShadowRoot | null): Range | null;
+/**
+ * Whether the rich-input caret is at a valid trigger boundary (collapsed, after a
+ * newly typed character). Returns true when the character *before* that typed
+ * character is start-of-input, space, newline, NBSP, or an element badge — so
+ * call from `input` once the trigger key is in the DOM and selection sits after it.
+ */
+export declare function isAtWordBoundary(shadowRoot: ShadowRoot | null): boolean;
+/**
+ * Get the bounding position of the caret for overlay anchoring.
+ * Returns the position at the trigger character (one char before the caret).
+ */
+export declare function getCaretRect(shadowRoot: ShadowRoot | null, richInputElement: HTMLElement | null): {
+    x: number;
+    y: number;
+} | null;
+/**
+ * Extract the trigger search string from the rich input DOM.
+ * Scans backwards from the caret in the current text node to find text
+ * typed after the trigger character.
+ */
+export declare function extractTriggerSearchString(shadowRoot: ShadowRoot | null, triggerKey: string): string | null;
+/**
+ * Focus the rich input and place the caret right after the badge's
+ * trailing space node. Uses `setBaseAndExtent` for Safari shadow-DOM
+ * compatibility, with `addRange` as a fallback.
+ */
+export declare function placeCursorAfterBadge(input: HTMLElement, badgeId: string): void;
+/**
+ * Remove the trigger character and search string from a contenteditable.
+ * First tries selection-based removal, then falls back to a text-node scan.
+ */
+export declare function removeTriggerText(shadowRoot: ShadowRoot | null, richInputElement: HTMLElement, triggerKey: string, searchString: string): void;

package/components/prompt-box/slot-state-sync.d.ts

@@ -0,0 +1,10 @@
+import type { ActionValue } from './types';
+/**
+ * Synchronise disabled/pending/readonly state to all interactive elements
+ * inside the given slots.
+ */
+export declare function syncSlottedElementsState(shadowRoot: ShadowRoot | null, disabled: boolean, pending: boolean): void;
+/**
+ * Extract values from interactive elements (for submit detail).
+ */
+export declare function extractActionValues(elements: Element[]): ActionValue[];

package/components/prompt-box/types.d.ts

@@ -0,0 +1,112 @@
+export interface ActionValue {
+    element: Element;
+    name?: string;
+    value?: unknown;
+    checked?: boolean;
+}
+export interface PromptBoxAttachment {
+    file: File;
+    id: string;
+    previewUrl?: string;
+}
+export interface PromptBoxElement {
+    id: string;
+    elementType: string;
+    label: string;
+    data: unknown;
+    icon?: unknown;
+}
+export type PromptBoxSegment = {
+    type: 'text';
+    value?: string;
+} | {
+    type: 'element';
+    value: PromptBoxElement;
+};
+export interface PromptBoxSubmitDetail {
+    value: string;
+    segments: PromptBoxSegment[];
+    topActions: Element[];
+    bottomActions: Element[];
+    actionValues: ActionValue[];
+    attachments: PromptBoxAttachment[];
+}
+export interface PromptBoxElementInsertedDetail {
+    element: PromptBoxElement;
+}
+export interface PromptBoxElementRemovedDetail {
+    element: PromptBoxElement;
+}
+export interface PromptBoxRecordingCompleteDetail {
+    audioBlob: Blob;
+    duration: number;
+    mimeType: string;
+}
+export interface PromptBoxRecordErrorDetail {
+    error: string;
+}
+export interface TriggerOption {
+    label: string;
+    value: string;
+    description?: string;
+    icon?: unknown;
+    /** Arbitrary payload attached to the option when selected. */
+    data?: unknown;
+    /** Element type used when inserting as inline badge (defaults to trigger key). */
+    elementType?: string;
+    /** When true, renders as a non-interactive category header instead of a selectable option. */
+    header?: boolean;
+}
+/**
+ * Configuration for a single trigger key.
+ *
+ * When the user types this key at a word boundary the prompt box opens a
+ * popover. The popover can contain:
+ * - A named slot (if `slotName` is set) rendered inside the popover for fully custom content.
+ * - A built-in `luzmo-options` list populated from `options`.
+ * - Both at the same time (slot first, then auto-generated list).
+ *
+ * When `lazy` is true the component does **not** filter locally — it emits
+ * `luzmo-trigger-change` and expects the consumer to update `options` via the
+ * `triggers` property.
+ */
+export interface TriggerConfig {
+    /** The character that activates this trigger (e.g. `@`, `/`). */
+    key: string;
+    /** Named slot to render inside the popover for this trigger. */
+    slotName?: string;
+    /** Options rendered in a built-in `luzmo-options` component. */
+    options?: TriggerOption[];
+    /**
+     * When true the component skips local filtering and relies on the consumer
+     * to update `options` in response to `luzmo-trigger-change`.
+     */
+    lazy?: boolean;
+    /** When true, matching search text is highlighted in option labels. */
+    highlightSearch?: boolean;
+    /**
+     * Custom render function for the option icon. Receives the option and should
+     * return a Lit `TemplateResult`. When set, the returned template replaces
+     * the default `luzmo-icon` for every option in this trigger.
+     *
+     * ```ts
+     * iconTemplate: (option) => html`
+     *   <img src="/icons/${option.value}.svg" width="20" height="20" />
+     * `
+     * ```
+     */
+    iconTemplate?: (option: TriggerOption) => unknown;
+}
+export interface TriggerMenuChangeDetail {
+    trigger: string;
+    open: boolean;
+    searchString: string;
+}
+export interface TriggerMenuSelectDetail {
+    trigger: string;
+    elementType: string;
+    label: string;
+    data: unknown;
+    icon?: unknown;
+}
+export declare const ELEMENT_MIME_TYPE = "application/x-luzmo-element";