@intentface/chat 0.1.0

package/dist/chip/chip.d.ts

@@ -0,0 +1,25 @@
+import { type ReactElement, type ReactNode } from "react";
+import type { PrimitiveProps } from "../internal/primitive-props.js";
+type ChipPreviewProps = {
+    children: ReactNode;
+};
+export declare const ChipPreview: (_props: ChipPreviewProps) => ReactNode;
+export type ChipState = {
+    /** Opaque styling hook, surfaced as data-variant. */
+    variant: string | undefined;
+};
+export type ChipRootProps = PrimitiveProps<"span", ChipState> & {
+    variant?: string;
+    /**
+     * Called when a Chip.Preview child is present. Receives the rendered badge
+     * element and the preview content; compose your popup of choice around
+     * them. Without it, the preview content is ignored.
+     */
+    renderWithPreview?: (badge: ReactElement, preview: ReactNode) => ReactNode;
+};
+export declare const ChipRoot: ({ variant, renderWithPreview, className, render, style, children, ...elementProps }: ChipRootProps) => string | number | bigint | boolean | ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+export type ChipIconProps = PrimitiveProps<"span">;
+export declare const ChipIcon: ({ className, render, style, ...elementProps }: ChipIconProps) => ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ChipLabelProps = PrimitiveProps<"span">;
+export declare const ChipLabel: ({ className, render, style, ...elementProps }: ChipLabelProps) => ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export {};

package/dist/chip/chip.js

@@ -0,0 +1,25 @@
+"use client";
+// Headless inline chip. Renders an unstyled <span> flow-surface with
+// data-variant for styling hooks. Popups are not owned by this layer: a
+// Chip.Preview child is captured and handed to `renderWithPreview` so the
+// styled layer can compose its own hover-card/popover around the badge.
+// Every part supports the Base UI render prop.
+import { Children, isValidElement } from "react";
+import { useRenderElement } from "../internal/render/useRenderElement.js";
+// Marker component — never renders directly. ChipRoot inspects its children
+// and routes ChipPreview's content into `renderWithPreview`.
+export const ChipPreview = (_props) => null;
+export const ChipRoot = ({ variant, renderWithPreview, className, render, style, children, ...elementProps }) => {
+    const childArray = Children.toArray(children);
+    const previewChild = childArray.find((child) => isValidElement(child) && child.type === ChipPreview);
+    const inlineChildren = childArray.filter((child) => !isValidElement(child) || child.type !== ChipPreview);
+    const badge = useRenderElement("span", { className, render, style }, {
+        state: { variant },
+        props: [{ "data-chip": "", children: inlineChildren }, elementProps],
+    });
+    if (!previewChild || !renderWithPreview)
+        return badge;
+    return renderWithPreview(badge, previewChild.props.children);
+};
+export const ChipIcon = ({ className, render, style, ...elementProps }) => useRenderElement("span", { className, render, style }, { props: [{ "aria-hidden": true, "data-chip-icon": "" }, elementProps] });
+export const ChipLabel = ({ className, render, style, ...elementProps }) => useRenderElement("span", { className, render, style }, { props: [{ "data-chip-label": "" }, elementProps] });

package/dist/chip/index.d.ts

@@ -0,0 +1,2 @@
+export type { ChipIconProps, ChipLabelProps, ChipRootProps, ChipState } from "./chip.js";
+export * as Chip from "./index.parts.js";

package/dist/chip/index.js

@@ -0,0 +1,2 @@
+// Public surface of @intentface/chat/chip. No "use client" — see index.parts.ts.
+export * as Chip from "./index.parts.js";

package/dist/chip/index.parts.d.ts

@@ -0,0 +1 @@
+export { ChipIcon as Icon, ChipLabel as Label, ChipPreview as Preview, ChipRoot as Root, } from "./chip.js";

package/dist/chip/index.parts.js

@@ -0,0 +1,5 @@
+// Part names for the `Chip` namespace. Deliberately carries no "use client":
+// this module and index.ts must stay server-resolvable so a React Server
+// Component can reach Chip.Root / Chip.Label through them. The directive lives
+// one level down, on chip.tsx.
+export { ChipIcon as Icon, ChipLabel as Label, ChipPreview as Preview, ChipRoot as Root, } from "./chip.js";

package/dist/chip-markdown.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Opaque wire string. The styled layer owns the concrete union and narrows
+ * at its own boundary.
+ */
+export type ChipIconKey = string;
+export declare const CHIP_REF_PATTERN: RegExp;
+export type ChipData = {
+    prefix: string;
+    value: string;
+    label: string;
+    icon?: ChipIconKey;
+};
+export type ChipSegment = {
+    type: "text";
+    text: string;
+} | {
+    type: "chip";
+    label: string;
+    prefix: string;
+    value: string;
+    icon?: ChipIconKey;
+};
+export declare const escapeMarkdownLink: (input: string) => string;
+export declare const encodeChipMarkdown: (chip: ChipData) => string;
+export declare const parseChipSegments: (text: string) => ChipSegment[];

package/dist/chip-markdown.js

@@ -0,0 +1,52 @@
+// Wire format for inline chip references inside a message text part.
+// Shape: [Label](chip:prefix:value?icon=…). The icon rides along in the
+// token, so a rendered message reconstructs the chip from its own text
+// alone — no sidecar metadata array. Presentation that's derivable at render
+// time (e.g. a per-prefix variant) is the renderer's job, not wire data.
+export const CHIP_REF_PATTERN = /\[([^\]]+)\]\(chip:([^:)]+):([^)?]+)(?:\?([^)]*))?\)/g;
+export const escapeMarkdownLink = (input) => input.replace(/[[\]()\\]/g, (match) => `\\${match}`);
+// Tolerate legacy/un-encoded values — a stray "%" would otherwise throw and
+// take the whole message render down with it.
+const safeDecode = (value) => {
+    try {
+        return decodeURIComponent(value);
+    }
+    catch {
+        return value;
+    }
+};
+export const encodeChipMarkdown = (chip) => {
+    const params = new URLSearchParams();
+    if (chip.icon)
+        params.set("icon", chip.icon);
+    const query = params.toString();
+    const value = encodeURIComponent(chip.value);
+    return `[${escapeMarkdownLink(chip.label)}](chip:${chip.prefix}:${value}${query ? `?${query}` : ""})`;
+};
+export const parseChipSegments = (text) => {
+    const segments = [];
+    let lastIndex = 0;
+    for (const match of text.matchAll(CHIP_REF_PATTERN)) {
+        const start = match.index;
+        if (start > lastIndex) {
+            segments.push({ type: "text", text: text.slice(lastIndex, start) });
+        }
+        const [token, label = "", prefix = "", rawValue = "", rawQuery] = match;
+        const params = new URLSearchParams(rawQuery ?? "");
+        const icon = params.get("icon");
+        segments.push({
+            type: "chip",
+            label,
+            prefix,
+            value: safeDecode(rawValue),
+            ...(icon ? { icon } : {}),
+        });
+        lastIndex = start + token.length;
+    }
+    if (lastIndex < text.length) {
+        segments.push({ type: "text", text: text.slice(lastIndex) });
+    }
+    return segments;
+};
+// Building editor nodes from these segments lives with the document model in
+// composer/segments.ts — this module is only the neutral wire format.

package/dist/composer/actions.d.ts

@@ -0,0 +1,35 @@
+import type { PrimitiveProps } from "../internal/primitive-props.js";
+export type ComposerContextWindowState = {
+    /** Open (data-open) while the strip has content and no panel is active. */
+    open: boolean;
+};
+export type ComposerContextWindowProps = PrimitiveProps<"div", ComposerContextWindowState>;
+export declare const ComposerContextWindow: ({ children, className, render, style, ...elementProps }: ComposerContextWindowProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerActionsProps = PrimitiveProps<"div">;
+export declare const ComposerActions: ({ className, render, style, ...elementProps }: ComposerActionsProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type UseComposerSubmitOptions = {
+    isGenerating?: boolean;
+    onStop?: () => void;
+    disabled?: boolean;
+};
+export type ComposerSubmitState = {
+    /** "button" while generating (click stops), "submit" otherwise. */
+    type: "button" | "submit";
+    disabled: boolean;
+    isGenerating: boolean;
+};
+/**
+ * Send↔stop behavior: auto-disables while empty or submitting, flips the
+ * button type while generating, and aborts on Escape (unless something closer
+ * — the command list — already handled it).
+ */
+export declare const useComposerSubmit: ({ isGenerating, onStop, disabled, }: UseComposerSubmitOptions) => ComposerSubmitState;
+export type ComposerSubmitButtonState = {
+    /** Present as data-generating while the stop affordance is active. */
+    generating: boolean;
+};
+export type ComposerSubmitProps = PrimitiveProps<"button", ComposerSubmitButtonState> & {
+    isGenerating?: boolean;
+    onStop?: () => void;
+};
+export declare const ComposerSubmit: ({ disabled, isGenerating, onStop, onClick, className, render, style, ...elementProps }: ComposerSubmitProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/composer/actions.js

@@ -0,0 +1,75 @@
+"use client";
+// Composer.ContextWindow / Actions / Submit. ContextWindow is content-driven
+// like the panels — open (data-open / data-closed) while it has content and no
+// panel is active, yielding to an active panel. Submit owns the send↔stop
+// behavior via useComposerSubmit and renders a plain button — the styled layer
+// applies the same hook to its own button component.
+import { Children, useEffect } from "react";
+import { useRenderElement } from "../internal/render/useRenderElement.js";
+import { openStateMapping } from "../internal/state-mappings.js";
+import { useAsRef } from "./internals.js";
+import { useComposer } from "./store.js";
+export const ComposerContextWindow = ({ children, className, render, style, ...elementProps }) => {
+    // Yield while any native panel is active — the strip slides back out once they
+    // close. (Union of the native slices; no central registry.)
+    const anyPanelActive = useComposer((composer) => composer.commands.active || composer.askUser.active);
+    const hasContent = Children.toArray(children).length > 0;
+    const open = hasContent && !anyPanelActive;
+    return useRenderElement("div", { className, render, style }, {
+        state: { open },
+        stateAttributesMapping: openStateMapping,
+        props: [{ "data-composer-context-window": "", children }, elementProps],
+    });
+};
+export const ComposerActions = ({ className, render, style, ...elementProps }) => useRenderElement("div", { className, render, style }, { props: [{ "data-composer-actions": "" }, elementProps] });
+/**
+ * Send↔stop behavior: auto-disables while empty or submitting, flips the
+ * button type while generating, and aborts on Escape (unless something closer
+ * — the command list — already handled it).
+ */
+export const useComposerSubmit = ({ isGenerating = false, onStop, disabled, }) => {
+    const hasContent = useComposer((composer) => composer.textarea.hasContent);
+    const isSubmitting = useComposer((composer) => composer.isSubmitting);
+    const attachments = useComposer((composer) => composer.attachments);
+    // Esc aborts while generating — unless something already handled it (the
+    // command-list closes on Esc and preventDefaults first, so it wins).
+    const onStopRef = useAsRef(onStop);
+    useEffect(() => {
+        if (!isGenerating)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key !== "Escape" || event.defaultPrevented)
+                return;
+            event.preventDefault();
+            onStopRef.current?.();
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isGenerating]);
+    const autoDisabled = disabled ?? ((!hasContent && attachments.items.length === 0) || isSubmitting);
+    return {
+        type: isGenerating ? "button" : "submit",
+        disabled: isGenerating ? false : autoDisabled,
+        isGenerating,
+    };
+};
+export const ComposerSubmit = ({ disabled, isGenerating = false, onStop, onClick, className, render, style, ...elementProps }) => {
+    const submit = useComposerSubmit({ isGenerating, onStop, disabled });
+    return useRenderElement("button", { className, render, style }, {
+        state: { generating: isGenerating },
+        props: [
+            {
+                type: submit.type,
+                "data-composer-submit": "",
+                // Default overridable names for the (typically icon-only) morphing
+                // control — both states announce, not just the stop affordance.
+                "aria-label": isGenerating ? "Stop generating" : "Send message",
+                disabled: submit.disabled,
+                // Replaces (not chains) the consumer's onClick while generating —
+                // a stop click must never fall through to submit handlers.
+                onClick: isGenerating ? () => onStop?.() : onClick,
+            },
+            elementProps,
+        ],
+    });
+};

package/dist/composer/ask-user-machine.d.ts

@@ -0,0 +1,52 @@
+import type { AskUserQuestion, ComposerAnswerEntry } from "./types.js";
+export type AnswerEntry = {
+    selected: Set<string>;
+    freeText: string;
+};
+export type AskUserState = {
+    step: number;
+    answers: Map<number, AnswerEntry>;
+};
+export declare const INITIAL_ASK_USER_STATE: AskUserState;
+export type AskUserEffect = {
+    type: "clear-input";
+} | {
+    type: "set-input-text";
+    text: string;
+} | {
+    type: "focus-input";
+} | {
+    type: "focus-options";
+} | {
+    type: "reset-highlight";
+} | {
+    type: "submit-answers";
+    answers: ComposerAnswerEntry[];
+};
+export type AskUserAction = {
+    type: "toggle-option";
+    label: string;
+} | {
+    type: "select-option";
+    label: string;
+} | {
+    type: "clear-selections";
+} | {
+    type: "continue-step";
+    freeText: string;
+} | {
+    type: "dismiss-step";
+} | {
+    type: "step-back";
+    currentText: string;
+} | {
+    type: "step-forward";
+    currentText: string;
+};
+export type AskUserTransition = {
+    next: AskUserState;
+    effects: AskUserEffect[];
+};
+export declare const compileAnswers: (state: AskUserState, questions: AskUserQuestion[]) => ComposerAnswerEntry[];
+export declare const isLastStep: (state: AskUserState, questions: AskUserQuestion[]) => boolean;
+export declare const transitionAskUser: (state: AskUserState, questions: AskUserQuestion[], action: AskUserAction) => AskUserTransition;

package/dist/composer/ask-user-machine.js

@@ -0,0 +1,164 @@
+// Ask-user — pure state machine for the questionnaire flow. State is a current
+// step plus a map of per-step answers; every transition is an immutable map
+// operation, so the store only owns the state cell and the effect execution.
+export const INITIAL_ASK_USER_STATE = {
+    step: 0,
+    answers: new Map(),
+};
+// ---------------------------------------------------------------------------
+// Answer helpers — immutable operations on the per-step answer map, plus the
+// projection/query the store reads.
+// ---------------------------------------------------------------------------
+const emptyEntry = () => ({
+    selected: new Set(),
+    freeText: "",
+});
+const cloneAnswers = (source) => new Map(source);
+// Record `text` as the step's free-text answer. Single-select treats text and
+// a chosen option as mutually exclusive, so any selection is dropped;
+// multi-select keeps existing selections alongside the text. Empty text is a
+// no-op (returns an untouched clone).
+const writeFreeText = (answers, step, text, multiSelect) => {
+    const next = cloneAnswers(answers);
+    if (text.length === 0)
+        return next;
+    const previous = next.get(step) ?? emptyEntry();
+    next.set(step, {
+        selected: multiSelect ? previous.selected : new Set(),
+        freeText: text,
+    });
+    return next;
+};
+// Remove the step's entry entirely (skip / dismiss).
+const skipStep = (answers, step) => {
+    const next = cloneAnswers(answers);
+    next.delete(step);
+    return next;
+};
+// Toggle an option on the step's entry. Multi-select toggles membership and
+// keeps free text; single-select replaces both (option and text are mutually
+// exclusive).
+const toggleAnswer = (answers, step, label, multiSelect) => {
+    const next = cloneAnswers(answers);
+    const previous = next.get(step) ?? emptyEntry();
+    const selected = new Set(previous.selected);
+    if (multiSelect) {
+        if (selected.has(label))
+            selected.delete(label);
+        else
+            selected.add(label);
+    }
+    else {
+        selected.clear();
+        selected.add(label);
+    }
+    next.set(step, { selected, freeText: multiSelect ? previous.freeText : "" });
+    return next;
+};
+// Project the collected answers onto the public ComposerAnswerEntry union, one
+// entry per question in order. The chosen branch encodes the invariant:
+// single-select carries `option` *or* `text`; multi-select carries both;
+// an unanswered question is bare `{ question }`.
+export const compileAnswers = (state, questions) => questions.map(({ question, multiSelect }, index) => {
+    const entry = state.answers.get(index);
+    if (!entry)
+        return { question };
+    const selected = [...entry.selected];
+    const text = entry.freeText.trim();
+    if (multiSelect) {
+        if (selected.length === 0 && text === "")
+            return { question };
+        return { question, options: selected, text };
+    }
+    const firstSelected = selected[0];
+    if (firstSelected !== undefined)
+        return { question, option: firstSelected };
+    if (text !== "")
+        return { question, text };
+    return { question };
+});
+export const isLastStep = (state, questions) => state.step >= questions.length - 1;
+// ---------------------------------------------------------------------------
+// Transitions — the decide half of the flow: map an action onto the next state
+// plus the effects to run. transitionAskUser is the single entry point.
+// ---------------------------------------------------------------------------
+// Commit `nextAnswers`, advance one step, and reset the input — then either
+// arm the next question (blurred, highlight reset) or compile and submit on
+// the last step (input focused for the follow-up message).
+const advanceStep = (state, questions, nextAnswers) => {
+    const next = { step: state.step + 1, answers: nextAnswers };
+    if (state.step < questions.length - 1) {
+        return {
+            next,
+            effects: [{ type: "clear-input" }, { type: "reset-highlight" }, { type: "focus-options" }],
+        };
+    }
+    return {
+        next,
+        effects: [
+            { type: "clear-input" },
+            { type: "submit-answers", answers: compileAnswers(next, questions) },
+            { type: "focus-input" },
+        ],
+    };
+};
+// Navigate to `targetStep`, preserving any in-progress free text on the step
+// being left and restoring the target step's saved text into the input.
+const transitionToStep = (state, targetStep, currentText) => {
+    if (targetStep === state.step)
+        return { next: state, effects: [] };
+    const trimmed = currentText.trim();
+    const answers = cloneAnswers(state.answers);
+    if (trimmed.length > 0) {
+        const previous = answers.get(state.step) ?? emptyEntry();
+        answers.set(state.step, { ...previous, freeText: trimmed });
+    }
+    const next = { step: targetStep, answers };
+    return {
+        next,
+        effects: [
+            { type: "set-input-text", text: answers.get(targetStep)?.freeText ?? "" },
+            { type: "reset-highlight" },
+            { type: "focus-options" },
+        ],
+    };
+};
+// The decide half of the ask-user flow, mirroring interpretAskUserKey: map an
+// action onto the next state plus the effects to run. Composed actions
+// (select-option = toggle + advance) resolve atomically here, so no caller
+// ever chains transitions across a stale state snapshot.
+export const transitionAskUser = (state, questions, action) => {
+    const multiSelect = !!questions[state.step]?.multiSelect;
+    switch (action.type) {
+        case "toggle-option":
+            return {
+                next: {
+                    ...state,
+                    answers: toggleAnswer(state.answers, state.step, action.label, multiSelect),
+                },
+                effects: multiSelect ? [] : [{ type: "clear-input" }],
+            };
+        case "select-option": {
+            const toggled = toggleAnswer(state.answers, state.step, action.label, multiSelect);
+            if (multiSelect)
+                return { next: { ...state, answers: toggled }, effects: [] };
+            return advanceStep(state, questions, toggled);
+        }
+        case "clear-selections": {
+            const previous = state.answers.get(state.step);
+            if (!previous || previous.selected.size === 0)
+                return { next: state, effects: [] };
+            const answers = cloneAnswers(state.answers);
+            answers.set(state.step, { selected: new Set(), freeText: previous.freeText });
+            return { next: { ...state, answers }, effects: [] };
+        }
+        case "continue-step":
+            return advanceStep(state, questions, writeFreeText(state.answers, state.step, action.freeText.trim(), multiSelect));
+        case "dismiss-step":
+            return advanceStep(state, questions, skipStep(state.answers, state.step));
+        case "step-back":
+            return transitionToStep(state, Math.max(0, state.step - 1), action.currentText);
+        case "step-forward":
+            return transitionToStep(state, Math.min(questions.length - 1, state.step + 1), action.currentText);
+    }
+};

package/dist/composer/attachments-machine.d.ts

@@ -0,0 +1,34 @@
+import { type AttachmentErrorCode, type AttachmentItem } from "../attachments/index.js";
+export type AttachmentStoreState = {
+    items: AttachmentItem[];
+    error: AttachmentErrorCode | null;
+};
+export type AttachmentStoreAction = {
+    type: "add";
+    files: File[] | FileList;
+} | {
+    type: "remove";
+    id: string;
+} | {
+    type: "reset";
+};
+export type AttachmentStoreConfig = {
+    accept: string;
+    maxFiles: number;
+    maxFileSize: number;
+    convert: (file: File) => AttachmentItem;
+    destroy: (item: AttachmentItem) => void;
+};
+export declare const INITIAL_ATTACHMENT_STATE: AttachmentStoreState;
+export declare const attachmentReducer: (state: AttachmentStoreState, action: AttachmentStoreAction, config: AttachmentStoreConfig) => AttachmentStoreState;
+export type DragHandlerCallbacks = {
+    isInScope: (event: DragEvent) => boolean;
+    onFiles: (files: FileList) => void;
+    setDragging: (active: boolean) => void;
+};
+export declare const createDragHandlers: (callbacks: DragHandlerCallbacks) => {
+    onDragOver: (event: Event) => void;
+    onDragEnter: (event: Event) => void;
+    onDragLeave: (event: Event) => void;
+    onDrop: (event: Event) => void;
+};

package/dist/composer/attachments-machine.js

@@ -0,0 +1,91 @@
+// Attachments — pure store reducer that validates and accumulates files, plus
+// the drag-and-drop handler factory. The store owns the state cell; this owns
+// the rules.
+import { matchesAccept } from "../attachments/index.js";
+export const INITIAL_ATTACHMENT_STATE = {
+    items: [],
+    error: null,
+};
+export const attachmentReducer = (state, action, config) => {
+    switch (action.type) {
+        case "add": {
+            const incoming = [...action.files];
+            if (!incoming.length)
+                return state;
+            const accepted = incoming.filter((file) => matchesAccept(file, config.accept));
+            if (!accepted.length) {
+                return { ...state, error: "accept" };
+            }
+            const sized = accepted.filter((file) => file.size <= config.maxFileSize);
+            if (!sized.length) {
+                return { ...state, error: "max_file_size" };
+            }
+            const capacity = Math.max(0, config.maxFiles - state.items.length);
+            const capped = sized.slice(0, capacity);
+            const overCapacityError = sized.length > capacity ? "max_files" : null;
+            if (!capped.length) {
+                return { ...state, error: overCapacityError ?? state.error };
+            }
+            return {
+                items: [...state.items, ...capped.map(config.convert)],
+                error: overCapacityError,
+            };
+        }
+        case "remove": {
+            const found = state.items.find((item) => item.id === action.id);
+            if (found)
+                config.destroy(found);
+            return {
+                items: state.items.filter((item) => item.id !== action.id),
+                error: null,
+            };
+        }
+        case "reset": {
+            for (const item of state.items)
+                config.destroy(item);
+            return INITIAL_ATTACHMENT_STATE;
+        }
+    }
+};
+export const createDragHandlers = (callbacks) => {
+    const counter = { current: 0 };
+    const carriesFiles = (event) => event.dataTransfer?.types?.includes("Files") ?? false;
+    return {
+        onDragOver: (event) => {
+            const dragEvent = event;
+            if (!callbacks.isInScope(dragEvent))
+                return;
+            if (carriesFiles(dragEvent))
+                dragEvent.preventDefault();
+        },
+        onDragEnter: (event) => {
+            const dragEvent = event;
+            if (!callbacks.isInScope(dragEvent))
+                return;
+            if (carriesFiles(dragEvent)) {
+                counter.current++;
+                callbacks.setDragging(true);
+            }
+        },
+        onDragLeave: (event) => {
+            const dragEvent = event;
+            if (!callbacks.isInScope(dragEvent))
+                return;
+            counter.current--;
+            if (counter.current === 0)
+                callbacks.setDragging(false);
+        },
+        onDrop: (event) => {
+            const dragEvent = event;
+            if (!callbacks.isInScope(dragEvent))
+                return;
+            if (carriesFiles(dragEvent))
+                dragEvent.preventDefault();
+            counter.current = 0;
+            callbacks.setDragging(false);
+            const files = dragEvent.dataTransfer?.files;
+            if (files && files.length > 0)
+                callbacks.onFiles(files);
+        },
+    };
+};

package/dist/composer/attachments.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import { type AttachmentItem } from "../attachments/index.js";
+import type { PrimitiveProps } from "../internal/primitive-props.js";
+export type ComposerAttachmentsProps = {
+    convert?: (file: File) => AttachmentItem;
+    destroy?: (item: AttachmentItem) => void;
+    accept?: string;
+    maxFiles?: number;
+    maxFileSize?: number;
+    multiple?: boolean;
+    globalDrop?: boolean;
+    children?: ReactNode;
+};
+export declare const ComposerAttachments: ({ convert, destroy, accept, maxFiles, maxFileSize, multiple, globalDrop, children, }: ComposerAttachmentsProps) => import("react").JSX.Element;
+export type ComposerAttachmentTriggerProps = PrimitiveProps<"button">;
+export declare const ComposerAttachmentTrigger: ({ className, render, style, ...elementProps }: ComposerAttachmentTriggerProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/composer/attachments.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { revokeAttachmentUrl, toAttachmentItem } from "../attachments/index.js";
+import { useRenderElement } from "../internal/render/useRenderElement.js";
+import { useComposer, useComposerContextStore } from "./store.js";
+export const ComposerAttachments = ({ convert = toAttachmentItem, destroy = revokeAttachmentUrl, accept = "", maxFiles = Number.POSITIVE_INFINITY, maxFileSize = Number.POSITIVE_INFINITY, multiple = true, globalDrop = false, children, }) => {
+    const store = useComposerContextStore();
+    const attachments = useComposer((composer) => composer.attachments);
+    store.attachmentConfigRef.current = { accept, maxFiles, maxFileSize, convert, destroy };
+    attachments.globalDropRef.current = globalDrop;
+    const handleFileChange = (event) => {
+        if (event.currentTarget.files) {
+            attachments.add(event.currentTarget.files);
+        }
+        event.currentTarget.value = "";
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("input", { accept: accept, style: { display: "none" }, multiple: multiple, onChange: handleFileChange, ref: attachments.fileInputRef, type: "file" }), children] }));
+};
+export const ComposerAttachmentTrigger = ({ className, render, style, ...elementProps }) => {
+    const attachments = useComposer((composer) => composer.attachments);
+    return useRenderElement("button", { className, render, style }, {
+        props: [
+            {
+                // Default overridable name — the trigger is typically icon-only.
+                "aria-label": "Add attachment",
+                "data-composer-attachment-trigger": "",
+                onClick: () => attachments.openFileDialog(),
+            },
+            elementProps,
+        ],
+    });
+};