@intentface/chat 0.1.0

package/dist/composer/internals.js

@@ -0,0 +1,102 @@
+"use client";
+// Component-wiring shared by the composer parts: the internals context
+// (command registry, editor-update reporting) and the small hooks the parts
+// build on. Not consumer API.
+import { createContext, use, useCallback, useEffect, useLayoutEffect, useRef, } from "react";
+import { createDragHandlers } from "./attachments-machine.js";
+// ---------------------------------------------------------------------------
+// Generic hooks — small, composer-agnostic utilities the parts build on.
+// ---------------------------------------------------------------------------
+// SSR-safe layout effect — same shape as cmdk's. useLayoutEffect runs before
+// paint; useEffect is a no-op fallback when window is undefined (SSR pass).
+export const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+// Mirror a prop into a ref so closures always see the latest value without
+// having to add the prop to dep arrays. Layout effect ensures `.current` is
+// updated before any sibling layout effect or sync user event observes it.
+export const useAsRef = (value) => {
+    const ref = useRef(value);
+    useIsomorphicLayoutEffect(() => {
+        ref.current = value;
+    });
+    return ref;
+};
+export const ComposerInternalsContext = createContext(null);
+export const useComposerInternals = () => {
+    const context = use(ComposerInternalsContext);
+    if (!context) {
+        throw new Error("useComposerInternals must be called inside a <Composer> subtree.");
+    }
+    return context;
+};
+// ---------------------------------------------------------------------------
+// Feature hooks — the composer-specific wiring: command registry, drag-and-drop
+// file intake, and the controlled/uncontrolled snapshot bridge.
+// ---------------------------------------------------------------------------
+export const useCommandRegistry = (commands) => {
+    const registryRef = useAsRef(commands);
+    const getRegisteredPrefixes = useCallback(() => {
+        const result = [];
+        for (const [prefix, entry] of Object.entries(registryRef.current)) {
+            result.push({ prefix, triggerRule: entry.trigger });
+        }
+        return result;
+    }, []);
+    return { getRegisteredPrefixes };
+};
+export const useDragDropFiles = ({ rootRef, globalDropRef, onFiles, setDragging, }) => {
+    const onFilesRef = useAsRef(onFiles);
+    useEffect(() => {
+        const isInScope = (event) => globalDropRef.current || (rootRef.current?.contains(event.target) ?? false);
+        const handlers = createDragHandlers({
+            isInScope,
+            onFiles: (files) => onFilesRef.current(files),
+            setDragging,
+        });
+        document.addEventListener("dragover", handlers.onDragOver);
+        document.addEventListener("dragenter", handlers.onDragEnter);
+        document.addEventListener("dragleave", handlers.onDragLeave);
+        document.addEventListener("drop", handlers.onDrop);
+        return () => {
+            document.removeEventListener("dragover", handlers.onDragOver);
+            document.removeEventListener("dragenter", handlers.onDragEnter);
+            document.removeEventListener("dragleave", handlers.onDragLeave);
+            document.removeEventListener("drop", handlers.onDrop);
+        };
+    }, [rootRef, globalDropRef, setDragging]);
+};
+export const useComposerSnapshot = ({ editorRef, defaultValue, value, onValueChange, }) => {
+    const isControlled = value !== undefined;
+    const lastAppliedRef = useRef(null);
+    const initializedRef = useRef(false);
+    const onValueChangeRef = useAsRef(onValueChange);
+    useEffect(() => {
+        const editor = editorRef.current;
+        if (!editor || initializedRef.current)
+            return;
+        if (defaultValue) {
+            editor.applySnapshot(defaultValue);
+            lastAppliedRef.current = defaultValue;
+        }
+        initializedRef.current = true;
+    }, [editorRef, defaultValue]);
+    useEffect(() => {
+        if (!isControlled)
+            return;
+        const editor = editorRef.current;
+        if (!editor || !value)
+            return;
+        if (lastAppliedRef.current === value)
+            return;
+        editor.applySnapshot(value);
+        lastAppliedRef.current = value;
+    }, [editorRef, isControlled, value]);
+    const reportEditorUpdate = useCallback(() => {
+        const editor = editorRef.current;
+        if (!editor || !onValueChangeRef.current)
+            return;
+        const snapshot = editor.getSnapshot();
+        lastAppliedRef.current = snapshot;
+        onValueChangeRef.current(snapshot);
+    }, [editorRef]);
+    return { reportEditorUpdate };
+};

package/dist/composer/keyboard.d.ts

@@ -0,0 +1,61 @@
+export type EditorKeyAction = {
+    type: "command-select";
+} | {
+    type: "command-close";
+} | {
+    type: "command-navigate";
+    direction: 1 | -1;
+} | {
+    type: "command-caret";
+    direction: 1 | -1;
+} | {
+    type: "ask-user-arrow";
+    direction: 1 | -1;
+} | {
+    type: "ask-user-dismiss";
+} | {
+    type: "remove-last-attachment";
+} | {
+    type: "submit-form";
+} | {
+    type: "soft-break";
+};
+/** Which Enter chord sends the message; the other inserts a soft break. */
+export type ComposerSubmitOn = "enter" | "shift-enter";
+export type EditorKeyContext = {
+    isCommandListOpen: boolean;
+    hasActiveAskUser: boolean;
+    isEditorEmpty: boolean;
+    hasAttachments: boolean;
+    /** Defaults to "enter" (Enter sends, Shift+Enter breaks). */
+    submitOn?: ComposerSubmitOn;
+};
+export declare const interpretEditorKey: (event: {
+    key: string;
+    shiftKey: boolean;
+}, context: EditorKeyContext) => EditorKeyAction | null;
+export type AskUserKeyAction = {
+    type: "dismiss-step";
+} | {
+    type: "navigate-options";
+    direction: 1 | -1;
+} | {
+    type: "select-option";
+} | {
+    type: "go-back";
+} | {
+    type: "go-next";
+} | {
+    type: "insert-character";
+    character: string;
+};
+export type AskUserKeyEvent = {
+    key: string;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    altKey: boolean;
+    defaultPrevented: boolean;
+};
+export declare const interpretAskUserKey: (event: AskUserKeyEvent, context: {
+    hasHighlight: boolean;
+}) => AskUserKeyAction | null;

package/dist/composer/keyboard.js

@@ -0,0 +1,75 @@
+// Keyboard interpreters — translate a raw key event (reduced to plain data)
+// plus surrounding state into a high-level action. No React or DOM access:
+// the component layer decides what a key means here and keeps the how
+// (preventDefault, focus, dispatch) at the call site.
+export const interpretEditorKey = (event, context) => {
+    const { key, shiftKey } = event;
+    const { isCommandListOpen, hasActiveAskUser } = context;
+    switch (true) {
+        case isCommandListOpen && key === "Tab":
+            return { type: "command-select" };
+        case isCommandListOpen && key === "Escape":
+            return { type: "command-close" };
+        case isCommandListOpen && key === "ArrowUp":
+            return { type: "command-navigate", direction: -1 };
+        case isCommandListOpen && key === "ArrowDown":
+            return { type: "command-navigate", direction: 1 };
+        case isCommandListOpen && key === "ArrowLeft":
+            return { type: "command-caret", direction: -1 };
+        case isCommandListOpen && key === "ArrowRight":
+            return { type: "command-caret", direction: 1 };
+        case isCommandListOpen && key === "Enter" && !shiftKey:
+            return { type: "command-select" };
+        case hasActiveAskUser && key === "ArrowUp":
+            return { type: "ask-user-arrow", direction: -1 };
+        case hasActiveAskUser && key === "ArrowDown":
+            return { type: "ask-user-arrow", direction: 1 };
+        // Question-mode keys now attach to the options container (roving focus),
+        // so an editor-focused Escape must dismiss from here.
+        case hasActiveAskUser && key === "Escape":
+            return { type: "ask-user-dismiss" };
+        case key === "Backspace" && context.isEditorEmpty && context.hasAttachments:
+            return { type: "remove-last-attachment" };
+        // Send / soft break — the chord mapping swaps on submitOn. Sending stays
+        // suppressed while the command list is open (its own Enter branch above
+        // selects; the surviving chord falls through to a soft break here, so
+        // neither mapping can submit mid-popup).
+        case key === "Enter": {
+            const sendChordPressed = (context.submitOn ?? "enter") === "enter" ? !shiftKey : shiftKey;
+            return sendChordPressed && !isCommandListOpen
+                ? { type: "submit-form" }
+                : { type: "soft-break" };
+        }
+        default:
+            return null;
+    }
+};
+export const interpretAskUserKey = (event, context) => {
+    const { key } = event;
+    switch (true) {
+        case event.defaultPrevented:
+            return null;
+        case key === "Escape":
+            return { type: "dismiss-step" };
+        case !context.hasHighlight:
+            return null;
+        case key === "ArrowUp":
+            return { type: "navigate-options", direction: -1 };
+        case key === "ArrowDown":
+            return { type: "navigate-options", direction: 1 };
+        case key === "Enter":
+            return { type: "select-option" };
+        // APG radio/checkbox: Space toggles the focused option. Wins over the
+        // printable branch — an answer can't meaningfully start with a space.
+        case key === " ":
+            return { type: "select-option" };
+        case key === "ArrowLeft":
+            return { type: "go-back" };
+        case key === "ArrowRight":
+            return { type: "go-next" };
+        default: {
+            const isPrintable = key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+            return isPrintable ? { type: "insert-character", character: key } : null;
+        }
+    }
+};

package/dist/composer/panel.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode, type RefObject } from "react";
+import type { PrimitiveProps } from "../internal/primitive-props.js";
+import { type AnchorAlign, type AnchorSide } from "../internal/render/positioning.js";
+import { type TransitionStatus } from "../internal/render/transition.js";
+import { type ComposerState } from "./store.js";
+export type ComposerPanelState = {
+    open: boolean;
+    transitionStatus: TransitionStatus;
+};
+export type ComposerPanelChildren = ReactNode | ((composer: ComposerState) => ReactNode);
+export type ComposerPanelProps = Omit<PrimitiveProps<"div", ComposerPanelState>, "children"> & {
+    children?: ComposerPanelChildren;
+    /**
+     * Positioned, portaled overlay (default `true`, anchored to the composer Container) or an
+     * in-flow block (`false`). Pass a ref/element to anchor elsewhere. Match the anchor's width
+     * with `width: var(--anchor-width)` in your styling.
+     */
+    anchor?: boolean | Element | RefObject<Element | null>;
+    /** Overlay preferred side; flips to the opposite on collision. Default "top". */
+    side?: AnchorSide;
+    /** Overlay alignment along the side. Default "center". */
+    align?: AnchorAlign;
+    /** Overlay gap between the anchor and the panel. Default 0. */
+    sideOffset?: number;
+    /** Hold `side`/`align` without collision repositioning (drops flip + shift). Default false. */
+    pin?: boolean;
+};
+export declare const ComposerPanel: ({ className, render, style, children, anchor, side, align, sideOffset, pin, ...elementProps }: ComposerPanelProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

package/dist/composer/panel.js

@@ -0,0 +1,80 @@
+"use client";
+// Composer.Panel — a surface region for the command list / ask-user / steps. `children`
+// is either normal nodes or a callback receiving the whole composer state, so you can pick
+// what to show by priority: `{(c) => c.commands.active ? <CommandList/> : …}`.
+//
+// Two layouts:
+//   • positioned overlay (default, `anchor`) — collision-aware (flip/shift/size) + portaled to
+//     the body via useAnchorPositioning; `anchor` (`true`) anchors to the composer Container, a
+//     ref/element anchors elsewhere. The positioner publishes --anchor-width /
+//     --anchor-available-height for the styling layer (e.g. width: var(--anchor-width)); it
+//     doesn't set the panel's own width. `pin` opts out of flip/shift (holds side/align).
+//   • in-flow block (`anchor={false}`) — grows the composer; contained by the styling layer's
+//     max-height. No positioning, no portal.
+//
+// Base UI-style open/close lifecycle either way: `open` tracks whether the resolved content is
+// non-empty (flips false the instant the source closes); the host stays mounted through its
+// close animation (keeps rendering the last content, exposes data-ending-style) and unmounts
+// only once animations finish (useOpenChangeComplete → store.finalizePanelClose clears the
+// native slices' sticky `present`). Seam: data-open / data-closed / data-starting-style /
+// data-ending-style (+ data-side/data-align when positioned) — animate with CSS or Motion.
+import { Children, useCallback, useRef } from "react";
+import { createPortal } from "react-dom";
+import { useAnchorPositioning, } from "../internal/render/positioning.js";
+import { useOpenTransition } from "../internal/render/transition.js";
+import { useRenderElement } from "../internal/render/useRenderElement.js";
+import { openStateMapping, transitionStatusMapping } from "../internal/state-mappings.js";
+import { useComposer, useComposerContextStore } from "./store.js";
+export const ComposerPanel = ({ className, render, style, children, anchor = true, side = "top", align = "center", sideOffset = 0, pin = false, ...elementProps }) => {
+    const store = useComposerContextStore();
+    const composer = useComposer((c) => c);
+    const content = typeof children === "function" ? children(composer) : children;
+    // Logical open — from the raw, source-gated content, so it goes false immediately on close.
+    const open = Children.toArray(content).length > 0;
+    const ref = useRef(null);
+    // Freeze the last non-empty content so the panel keeps rendering it while it animates closed.
+    // React reconciles by type+position, so the content fiber (e.g. the command list) isn't
+    // remounted — and it survives store-driven nulling because the native slices' sticky
+    // `present` flag keeps its own gate open until finalizePanelClose() below.
+    const lastContentRef = useRef(content);
+    if (open)
+        lastContentRef.current = content;
+    const rendered = open ? content : lastContentRef.current;
+    // Stay mounted through the exit; once the close animation finishes, unmount and clear
+    // `present` (via onClosed) so the frozen content can drop.
+    const { mounted, transitionStatus } = useOpenTransition(open, ref, {
+        onClosed: store.finalizePanelClose,
+    });
+    // Overlay mode: position against the anchor with collision handling + portal. `anchor` omitted
+    // (or false) → in-flow block, no positioning.
+    const positioned = anchor != null && anchor !== false;
+    const getAnchor = useCallback(() => {
+        if (anchor === true)
+            return store.containerRef.current;
+        if (anchor instanceof Element)
+            return anchor;
+        if (anchor && typeof anchor === "object" && "current" in anchor)
+            return anchor.current;
+        return null;
+    }, [anchor, store]);
+    useAnchorPositioning(getAnchor, ref, {
+        enabled: positioned && mounted,
+        side,
+        align,
+        sideOffset,
+        pin,
+    });
+    const element = useRenderElement("div", { className, render, style }, {
+        enabled: mounted,
+        state: { open, transitionStatus },
+        stateAttributesMapping: { ...openStateMapping, ...transitionStatusMapping },
+        ref,
+        props: [{ "data-composer-panel": "", children: rendered }, elementProps],
+    });
+    if (positioned) {
+        if (typeof document === "undefined")
+            return null;
+        return createPortal(element, document.body);
+    }
+    return element;
+};

package/dist/composer/placeholder.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { PrimitiveProps } from "../internal/primitive-props.js";
+export type ComposerPlaceholderProps = Omit<PrimitiveProps<"div">, "children"> & ({
+    placeholder: string;
+    children?: never;
+} | {
+    placeholder?: never;
+    children: ReactNode;
+});
+export declare const ComposerPlaceholder: ({ placeholder, children, className, render, style, ...elementProps }: ComposerPlaceholderProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/composer/placeholder.js

@@ -0,0 +1,8 @@
+"use client";
+import { useRenderElement } from "../internal/render/useRenderElement.js";
+export const ComposerPlaceholder = ({ placeholder, children, className, render, style, ...elementProps }) => useRenderElement("div", { className, render, style }, {
+    props: [
+        { "data-composer-placeholder-text": "", children: placeholder ?? children },
+        elementProps,
+    ],
+});

package/dist/composer/popover.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+import type { PrimitiveProps } from "../internal/primitive-props.js";
+import { type ComposerState } from "./store.js";
+export type ComposerPopoverState = {
+    open: boolean;
+};
+export type ComposerPopoverProps = Omit<PrimitiveProps<"div", ComposerPopoverState>, "children"> & {
+    children?: ReactNode | ((composer: ComposerState) => ReactNode);
+    /** Hold the placement without collision repositioning (drops flip + shift). Default false. */
+    pin?: boolean;
+};
+export declare const ComposerPopover: ({ children, className, render, style, pin, ...elementProps }: ComposerPopoverProps) => import("react").ReactPortal | null;

package/dist/composer/popover.js

@@ -0,0 +1,63 @@
+"use client";
+// Composer.Popover — the floating alternative to a Composer.Panel for the
+// command list. Where a Panel renders in-flow (growing the composer), Popover
+// lifts the same CommandList children into a portal above the field, so it
+// overlays instead of pushing layout. Like Panel, it's content-driven: the
+// consumer gates its children on `commands.active`, so an empty popover (all
+// gated out) stays closed. Positioned against the active command badge with
+// collision handling (flip / shift / size) via useAnchorPositioning, portaled to
+// the body. Exposes data-open/data-closed for the open/close animation plus
+// data-side/data-align (from the positioner) so the transition origin can follow
+// a flip, and a --anchor-available-height var so the list caps height + scrolls.
+import { Children, useCallback, useRef } from "react";
+import { createPortal } from "react-dom";
+import { useAnchorPositioning } from "../internal/render/positioning.js";
+import { useRenderElement } from "../internal/render/useRenderElement.js";
+import { openStateMapping } from "../internal/state-mappings.js";
+import { useComposer, useComposerContextStore } from "./store.js";
+export const ComposerPopover = ({ children, className, render, style, pin = false, ...elementProps }) => {
+    const store = useComposerContextStore();
+    const composer = useComposer((c) => c);
+    // `children` may be a callback receiving composer state (to gate on a native's
+    // active flag) or plain nodes. Open while the resolved content is non-empty —
+    // React can't read a child's rendered null off the prop, so count is the test.
+    const content = typeof children === "function" ? children(composer) : children;
+    const open = Children.toArray(content).length > 0;
+    const elementRef = useRef(null);
+    // Anchor to the active command badge, opening upward and left-aligned, with collision
+    // handling (flip below when there's no room above, shift into view, size to fit), tracked
+    // across scroll/resize/container growth. A getter (not a captured element) so the
+    // re-rendered badge decoration is always the current one.
+    const getBadge = useCallback(() => store.editorRef.current?.getRootElement()?.querySelector("[data-command-badge]") ?? null, [store]);
+    useAnchorPositioning(getBadge, elementRef, {
+        enabled: open,
+        side: "top",
+        align: "start",
+        sideOffset: 8,
+        pin,
+    });
+    const element = useRenderElement("div", { className, render, style }, {
+        ref: elementRef,
+        state: { open },
+        stateAttributesMapping: openStateMapping,
+        props: [
+            {
+                "data-composer-popover": "",
+                // position/left/top are written imperatively by useAnchorPositioning; the styled
+                // layer only supplies box/animation styling, not positioning.
+                // Keep the editor focused when clicking the popover chrome so it
+                // doesn't blur-dismiss; command items run their own selection on
+                // mousedown. The list never takes focus.
+                onMouseDown: (event) => event.preventDefault(),
+                children: content,
+            },
+            elementProps,
+        ],
+    });
+    // Stays mounted (positioning only runs while open, so a closed popover just
+    // holds its last position). Open/closed is exposed as data-open/data-closed
+    // for the styled layer to animate against — same as the other parts.
+    if (typeof document === "undefined")
+        return null;
+    return createPortal(element, document.body);
+};

package/dist/composer/prefix-detection.d.ts

@@ -0,0 +1,23 @@
+import type { TriggerRule } from "./types.js";
+export type RegisteredPrefix = {
+    prefix: string;
+    triggerRule: TriggerRule;
+};
+export type ActiveTokenState = {
+    isOpen: boolean;
+    trigger: string | null;
+    query: string;
+    triggerStartPosition: number;
+    triggerEndPosition: number;
+    dismissedAt: number | null;
+};
+export declare const CLOSED_COMMAND_STATE: ActiveTokenState;
+export declare const detectActivePrefix: (args: {
+    registered: RegisteredPrefix[];
+    blockStart: number;
+    blockEnd: number;
+    cursorPosition: number;
+    textBeforeCursor: string;
+    textAfterCursor: string;
+    fullDocText: string;
+}) => ActiveTokenState;

package/dist/composer/prefix-detection.js

@@ -0,0 +1,58 @@
+// Prefix detection — the engine-agnostic kernel of the command system: the
+// active-token state shape and the pure scan that derives it from the text
+// around the caret. Sticky range tracking and dismissal memory live one layer
+// up, in trigger-tracker.ts.
+export const CLOSED_COMMAND_STATE = {
+    isOpen: false,
+    trigger: null,
+    query: "",
+    triggerStartPosition: 0,
+    triggerEndPosition: 0,
+    dismissedAt: null,
+};
+// ---------------------------------------------------------------------------
+// Prefix detection — scan the block around the caret for a registered trigger
+// and derive the active-token state (pure; engine integrations call it).
+// ---------------------------------------------------------------------------
+export const detectActivePrefix = (args) => {
+    const { registered, blockStart, blockEnd, cursorPosition, textBeforeCursor, textAfterCursor, fullDocText, } = args;
+    for (const entry of registered) {
+        if (entry.triggerRule === "doc-start") {
+            if (fullDocText.startsWith(entry.prefix)) {
+                return {
+                    isOpen: true,
+                    trigger: entry.prefix,
+                    query: fullDocText.slice(entry.prefix.length),
+                    triggerStartPosition: blockStart,
+                    triggerEndPosition: blockEnd,
+                    dismissedAt: null,
+                };
+            }
+            continue;
+        }
+        // The token is the contiguous non-whitespace run the caret sits inside,
+        // taken from both sides of the caret so it stays whole as the caret moves
+        // within it. Text chars map 1:1 to positions and an atomic chip can never
+        // sit inside a run, so the run length is the position delta on each side.
+        const leftRun = textBeforeCursor.match(/\S*$/)?.[0] ?? "";
+        const rightRun = textAfterCursor.match(/^\S*/)?.[0] ?? "";
+        const runText = leftRun + rightRun;
+        if (!runText.startsWith(entry.prefix))
+            continue;
+        // The prefix must sit at a word boundary: line start or after whitespace.
+        const charBeforeRun = textBeforeCursor
+            .slice(0, textBeforeCursor.length - leftRun.length)
+            .at(-1);
+        if (charBeforeRun !== undefined && !/\s/.test(charBeforeRun))
+            continue;
+        return {
+            isOpen: true,
+            trigger: entry.prefix,
+            query: runText.slice(entry.prefix.length),
+            triggerStartPosition: cursorPosition - leftRun.length,
+            triggerEndPosition: cursorPosition + rightRun.length,
+            dismissedAt: null,
+        };
+    }
+    return CLOSED_COMMAND_STATE;
+};

package/dist/composer/root.d.ts

@@ -0,0 +1,21 @@
+import type { PrimitiveProps } from "../internal/primitive-props.js";
+import { type ComposerStore } from "./store.js";
+import type { AskUserQuestion, ComposerCommandsMap, ComposerSnapshot, ComposerSubmitData } from "./types.js";
+export type ComposerRootState = {
+    /** Present as data-submitting while a submission is in flight. */
+    submitting: boolean;
+    /** Present as data-dragging while files are dragged over the drop scope. */
+    dragging: boolean;
+};
+export type ComposerRootProps = Omit<PrimitiveProps<"form", ComposerRootState>, "onSubmit"> & {
+    onSubmit?: (data: ComposerSubmitData) => void | Promise<void>;
+    isSubmitting?: boolean;
+    commands?: ComposerCommandsMap;
+    questions?: AskUserQuestion[];
+    defaultValue?: ComposerSnapshot;
+    value?: ComposerSnapshot;
+    onValueChange?: (snapshot: ComposerSnapshot) => void;
+    /** Explicit Composer.createStore() handle; defaults to a per-mount instance. */
+    store?: ComposerStore;
+};
+export declare const ComposerRoot: ({ onSubmit, isSubmitting, commands, questions, defaultValue, value, onValueChange, store: storeProp, className, render, style, ...elementProps }: ComposerRootProps) => import("react").JSX.Element;

package/dist/composer/root.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+// Composer.Root — the form element that owns the submit flow, prop→store
+// bridges, drag-drop scope, and the per-instance store resolution: an explicit
+// Composer.createStore() handle via the store prop, or an instance created for
+// this mount. Every bare <Composer> is fully isolated.
+import { useEffect, useId, useMemo, useRef, useSyncExternalStore } from "react";
+import { useRefWithInit } from "../internal/render/useRefWithInit.js";
+import { useRenderElement } from "../internal/render/useRenderElement.js";
+import { ComposerInternalsContext, useAsRef, useCommandRegistry, useComposerSnapshot, useDragDropFiles, } from "./internals.js";
+import { ComposerStoreContext, createComposerStore } from "./store.js";
+const EMPTY_COMMANDS = {};
+export const ComposerRoot = ({ onSubmit, isSubmitting = false, commands = EMPTY_COMMANDS, questions, defaultValue, value, onValueChange, store: storeProp, className, render, style, ...elementProps }) => {
+    // SSR-stable per-mount id for the command listbox (aria-controls target +
+    // option-id root). Assigned onto the store in init below — the factory
+    // can't mint it because explicit handles are created outside React.
+    const listboxId = useId();
+    // Resolved once at mount (lazy-init ref, not reactive state): an explicit
+    // handle, or an instance this mount creates and owns. Swapping the store
+    // prop after mount is not supported.
+    const { store, ownsStore } = useRefWithInit(() => {
+        const resolved = storeProp ?? createComposerStore();
+        resolved.listboxId = listboxId;
+        return { store: resolved, ownsStore: !storeProp };
+    }).current;
+    const formRef = useRef(null);
+    const onSubmitRef = useAsRef(onSubmit);
+    // Register this mount on the store: answers submit through this mount's
+    // onSubmit. Only a store this mount created gets reset on unmount — an
+    // explicit handle's state belongs to its owner and survives remounts.
+    useEffect(() => {
+        store.submitAnswersRef.current = (answers) => onSubmitRef.current?.({ kind: "answers", answers });
+        return () => {
+            store.submitAnswersRef.current = null;
+            if (ownsStore)
+                store.reset();
+        };
+    }, [store, ownsStore]);
+    // Prop → store bridges. Actions and refs on the snapshot are identity-stable,
+    // so reading them here without subscribing is safe.
+    const { add: addAttachments, globalDropRef } = store.getSnapshot().attachments;
+    // Subscribed on the resolved store (not through useComposer — a `store` prop
+    // may differ from the nearest context) to surface drag state as data-dragging.
+    const getIsDragging = () => store.getSnapshot().attachments.isDragging;
+    const isDragging = useSyncExternalStore(store.subscribe, getIsDragging, getIsDragging);
+    useEffect(() => {
+        store.setIsSubmitting(isSubmitting);
+    }, [store, isSubmitting]);
+    // Sync the questions prop into the store and arm ask-user mode (editor blur
+    // + document-level keyboard handling) while questions are active.
+    useEffect(() => {
+        store.setQuestions(questions ?? null);
+        if (!questions?.length)
+            return;
+        return store.activateAskUser();
+    }, [store, questions]);
+    const { getRegisteredPrefixes } = useCommandRegistry(commands);
+    useDragDropFiles({
+        rootRef: formRef,
+        globalDropRef,
+        onFiles: addAttachments,
+        setDragging: store.setDragging,
+    });
+    const { reportEditorUpdate } = useComposerSnapshot({
+        editorRef: store.editorRef,
+        defaultValue,
+        value,
+        onValueChange,
+    });
+    const handleFormSubmit = async (event) => {
+        event.preventDefault();
+        const { askUser, attachments } = store.getSnapshot();
+        if (askUser.questions?.length) {
+            askUser.continueStep(store.controller.getText());
+            return;
+        }
+        if (isSubmitting)
+            return;
+        const serialized = store.controller.serialize();
+        const trimmedText = serialized.text.trim();
+        if (!trimmedText && !attachments.items.length)
+            return;
+        // Emit the generic attachment descriptors; the consumer's onSubmit adapts
+        // them to its wire format (e.g. FilePart via prepareAttachmentsForSend).
+        // Text may be empty on an attachments-only submit — any placeholder copy
+        // is the consumer's.
+        const files = attachments.items;
+        store.resetAttachments();
+        store.controller.clear();
+        await onSubmitRef.current?.({
+            kind: "message",
+            text: trimmedText,
+            files,
+        });
+    };
+    const internalsValue = useMemo(() => ({
+        commands,
+        getRegisteredPrefixes,
+        reportEditorUpdate,
+    }), [commands, getRegisteredPrefixes, reportEditorUpdate]);
+    const formElement = useRenderElement("form", { className, render, style }, {
+        state: { submitting: isSubmitting, dragging: isDragging },
+        ref: formRef,
+        props: [{ "data-composer-root": "", onSubmit: handleFormSubmit }, elementProps],
+    });
+    return (_jsx(ComposerStoreContext, { value: store, children: _jsx(ComposerInternalsContext, { value: internalsValue, children: formElement }) }));
+};