@smwb/ui-react 2.7.0 → 2.9.0

package/dist/components/inputs/composer/composer.d.ts

@@ -0,0 +1,149 @@
+import React from "react";
+import type { DropzoneAccept } from "../../../hooks/useDropzone";
+import type { ComposerSendKey } from "./composerKeys";
+/** Where the toolbar and the action sit: under the field (`stacked`) or in one row with it (`inline`). */
+export type ComposerLayout = "stacked" | "inline";
+export interface ComposerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" | "onKeyDown" | "onFocus" | "onBlur" | "children"> {
+    /**
+     * Controlled text. The composer is controlled while this is not `undefined` (checked on every render); a parent
+     * that ignores `onValueChange` keeps the field showing this value.
+     */
+    value?: string;
+    /** Initial text while uncontrolled. Defaults to an empty string. */
+    defaultValue?: string;
+    /** Called on every text change: typing, a newline, and the clear after a send. Called in both modes. */
+    onValueChange?: (value: string) => void;
+    /**
+     * Called with the trimmed text when the user sends it: the send key (see `sendKey`) or a click on the action
+     * button. Nothing is called while sending is not allowed: no `onSend`, an empty or whitespace-only text, `disabled`,
+     * `readOnly`, `busy`, or a text over `maxLength`. Async work is shown with `busy`; the return value is ignored.
+     */
+    onSend?: (text: string) => void;
+    /**
+     * Which Enter sends. `"modEnter"` (default): Ctrl/⌘+Enter sends and Enter inserts a newline. `"enter"`: Enter sends,
+     * Shift+Enter inserts a newline, Ctrl/⌘+Enter sends too. An Enter that commits an IME composition never sends.
+     */
+    sendKey?: ComposerSendKey;
+    /**
+     * Clear the text after `onSend`: the composer's own state while uncontrolled, `onValueChange("")` while controlled.
+     * Defaults to `true`.
+     */
+    clearOnSend?: boolean;
+    /**
+     * The agent is working: the action button turns into Stop and calls `onStop`, and the keys and the button do not
+     * send. The text stays editable. The composer never changes `busy` itself, the parent owns it.
+     */
+    busy?: boolean;
+    /**
+     * Called when Stop is pressed (click, Enter or Space on the button) while `busy` and not `disabled`. Without it the
+     * Stop button does nothing, so pass it whenever `busy` can be set.
+     */
+    onStop?: () => void;
+    /** Placeholder of the textarea. It is not a name for the field, set `aria-label` or `aria-labelledby` as well. */
+    placeholder?: string;
+    /**
+     * Hard limit on the text (the native `maxlength` of the textarea, counted in UTF-16 units, so an emoji is 2).
+     * Turns the counter on.
+     */
+    maxLength?: number;
+    /** Show the counter (`n / maxLength`, or `n` without `maxLength`). Defaults to `true` when `maxLength` is set. */
+    counter?: boolean;
+    /**
+     * Text for the polite status region that announces how many characters are left. It is spoken only near the limit
+     * (within the larger of 10 characters and 10% of `maxLength`) and when the text is over it, with a negative
+     * `remaining`. Defaults to "N characters left" / "N characters over the limit".
+     */
+    counterAnnouncement?: (remaining: number, maxLength: number) => string;
+    /** Height of the empty field in rows, and the `rows` of the textarea. Defaults to `1`. */
+    minRows?: number;
+    /** Rows the field grows to before it scrolls. Clamped to at least `minRows`. Defaults to `8`. */
+    maxRows?: number;
+    /**
+     * `"stacked"` (default): the field on top, a bar under it with the attach button, the toolbar, the counter and the
+     * action. `"inline"`: the attach button, the field, the counter and the action in one row, the toolbar (if any)
+     * in a row under it.
+     */
+    layout?: ComposerLayout;
+    /**
+     * Slot under the field for chips and selectors (agent, model, mode, …). Drawn in every state. It is a plain `div`,
+     * not `role="toolbar"`: the content brings its own keyboard handling and disabled state.
+     */
+    toolbar?: React.ReactNode;
+    /**
+     * Slot above the field for the app's file chips. The composer keeps no file state: the app lists what `onAttach`
+     * gave it here.
+     */
+    attachments?: React.ReactNode;
+    /**
+     * Turns on the attach button, the hidden file input and the drop target (the whole composer). Called with the files
+     * of a pick or a drop that are left after `accept`, `multiple` and `maxFiles`, never with an empty list. Only a drag
+     * of files is taken: dragged text or a link still goes into the field.
+     */
+    onAttach?: (files: File[]) => void;
+    /**
+     * Accepted file types, as a record of mime type to extensions or a raw `accept` string (`image/*`, `.pdf`, an exact
+     * mime type). It sets the picker's filter, and the files of a pick or a drop that do not match are left out.
+     */
+    accept?: DropzoneAccept;
+    /** Allow several files per pick or drop. When `false` the picker takes one and a drop keeps the first. Defaults to `true`. */
+    multiple?: boolean;
+    /** Files beyond this number are dropped from a pick or a drop (counted after `accept`). */
+    maxFiles?: number;
+    /**
+     * Whether `onAttach` also makes the composer a drop target for files. Set `false` when a parent already takes drops
+     * (a chat panel): the attach button and the picker stay, and a drop on the composer bubbles to the parent untouched.
+     * Defaults to `true`.
+     */
+    dropTarget?: boolean;
+    /**
+     * Disables the textarea, the attach button, the action button and the drop target. Toolbar content is the app's to
+     * disable.
+     */
+    disabled?: boolean;
+    /** The textarea is `readonly`: sending is unavailable, Stop still works. */
+    readOnly?: boolean;
+    /** Focus the textarea on mount. */
+    autoFocus?: boolean;
+    /** Name of the textarea. */
+    name?: string;
+    /** Id of the textarea (the root keeps no id). Generated when not given. */
+    id?: string;
+    /** Accessible name of the textarea. Set this or `aria-labelledby`: a placeholder is not a name. */
+    "aria-label"?: string;
+    /** Id(s) of the element(s) that name the textarea. */
+    "aria-labelledby"?: string;
+    /** Id(s) that describe the textarea. They come first, the counter's id is appended. */
+    "aria-describedby"?: string;
+    /** Key handler of the textarea. It runs before the composer's own; if it calls `preventDefault()`, the composer does nothing for that key. */
+    onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
+    /** Focus handler of the textarea. */
+    onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
+    /** Blur handler of the textarea. */
+    onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
+    /** Ref of the textarea (the root takes the component's own `ref`). */
+    inputRef?: React.Ref<HTMLTextAreaElement>;
+    /** Accessible name of the action button while it sends. Defaults to "Send". */
+    sendLabel?: string;
+    /** Accessible name of the action button while `busy`. Defaults to "Stop". */
+    stopLabel?: string;
+    /** Accessible name of the attach button. Defaults to "Attach file". */
+    attachLabel?: string;
+    /**
+     * Class name(s) for the root `<div>`. `style`, `ref`, `data-*` attributes and every other HTML attribute or event
+     * handler go to the root too; the root's drag handlers run after yours.
+     */
+    className?: string;
+    /** Test id of the root `<div>`. Defaults to `composer`; the parts inside have their own (`composer-input`, `composer-action`, …). */
+    "data-testid"?: string;
+}
+/**
+ * A task input: a multi-line field that grows from `minRows` to `maxRows`, a `toolbar` slot under it for chip
+ * selectors, a send button that becomes Stop while `busy`, keyboard send (Ctrl/⌘+Enter by default), an optional
+ * attach button and drop target, and a character counter.
+ *
+ * ```tsx
+ * <Composer aria-label="Task for the agent" onSend={(text) => run(text)} busy={running} onStop={cancel} />
+ * ```
+ */
+export declare const Composer: React.ForwardRefExoticComponent<ComposerProps & React.RefAttributes<HTMLDivElement>>;
+export default Composer;

package/dist/components/inputs/composer/composer.js

@@ -0,0 +1,219 @@
+import { jsxs as De, jsx as t } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/composer/composer.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                           */
+import A, { useState as Ce } from "react";
+import L from "clsx";
+import { Icon as H } from "../../base/icon/icon.js";
+import { useControllableState as xe } from "../../../hooks/useControllableState.js";
+import { useDropzone as Ke } from "../../../hooks/useDropzone.js";
+import { useId as Ne } from "../../../hooks/useId.js";
+import { filterAttachedFiles as Le, isFileDrag as V } from "./composerFiles.js";
+import { resolveComposerKeyAction as Ae } from "./composerKeys.js";
+const ke = (o) => o >= 0 ? `${o} characters left` : `${-o} characters over the limit`;
+function Te(o) {
+  o.preventDefault();
+}
+function b(o) {
+  return Array.isArray(o) ? o.some(b) : A.isValidElement(o) && o.type === A.Fragment ? b(o.props.children) : o != null && typeof o != "boolean" && o !== "";
+}
+const qe = A.forwardRef(function(q, G) {
+  const {
+    value: J,
+    defaultValue: f,
+    onValueChange: Q,
+    onSend: h,
+    sendKey: U = "modEnter",
+    clearOnSend: W = !0,
+    busy: r = !1,
+    onStop: y,
+    placeholder: X,
+    maxLength: a,
+    counter: g,
+    counterAnnouncement: Y = ke,
+    minRows: w = 1,
+    maxRows: Z = 8,
+    layout: ee = "stacked",
+    toolbar: k,
+    attachments: T,
+    onAttach: i,
+    accept: S,
+    multiple: F = !0,
+    maxFiles: oe,
+    dropTarget: te = !0,
+    disabled: n = !1,
+    readOnly: R = !1,
+    autoFocus: ae,
+    name: re,
+    id: se,
+    "aria-label": ne,
+    "aria-labelledby": ie,
+    "aria-describedby": ce,
+    onKeyDown: _,
+    onFocus: v,
+    onBlur: D,
+    inputRef: le,
+    sendLabel: me = "Send",
+    stopLabel: de = "Stop",
+    attachLabel: pe = "Attach file",
+    className: ue,
+    "data-testid": C,
+    onDragOver: c,
+    onDragLeave: l,
+    onDrop: m,
+    ...be
+  } = q, [s, $] = xe({
+    value: J,
+    defaultValue: f != null ? f : "",
+    onChange: Q
+  }), [fe, M] = Ce(!1), O = Ne(se, "smwb-composer"), z = `${O}-counter`, d = Ke({
+    accept: S,
+    multiple: F,
+    disabled: n,
+    // `maxFiles` is not passed on: the cut has to come after `accept`, see `filterAttachedFiles`.
+    onDrop: (e) => {
+      const N = Le(e, { accept: S, multiple: F, maxFiles: oe });
+      N.length > 0 && (i == null || i(N));
+    }
+  }), x = d.getRootProps(), B = d.getInputProps(), K = i !== void 0, I = K && te, p = g != null ? g : a !== void 0, u = a !== void 0 && s.length > a, P = !!h && s.trim() !== "" && !n && !R && !r && !u;
+  let j = "";
+  if (p && a !== void 0) {
+    const e = a - s.length;
+    e <= Math.max(10, Math.ceil(a * 0.1)) && (j = Y(e, a));
+  }
+  const E = () => {
+    !P || !h || (h(s.trim()), W && $(""));
+  }, he = (e) => {
+    _ == null || _(e), !(e.defaultPrevented || Ae(
+      {
+        key: e.key,
+        shiftKey: e.shiftKey,
+        ctrlKey: e.ctrlKey,
+        metaKey: e.metaKey,
+        altKey: e.altKey,
+        isComposing: e.nativeEvent.isComposing,
+        keyCode: e.keyCode
+      },
+      U
+    ) === "native") && (e.preventDefault(), E());
+  }, ye = (e) => {
+    if (!(e.detail > 1)) {
+      if (r) {
+        n || y == null || y();
+        return;
+      }
+      E();
+    }
+  }, ge = I ? { onDragOver: (e) => {
+    c == null || c(e), V(e.dataTransfer) && x.onDragOver(e);
+  }, onDragLeave: (e) => {
+    l == null || l(e), !(e.relatedTarget instanceof Node && e.currentTarget.contains(e.relatedTarget)) && x.onDragLeave();
+  }, onDrop: (e) => {
+    m == null || m(e), V(e.dataTransfer) && x.onDrop(e);
+  } } : { onDragOver: c, onDragLeave: l, onDrop: m }, we = I && d.isDragActive, _e = {
+    "--smwb-composer-min-rows": w,
+    "--smwb-composer-max-rows": Math.max(Z, w)
+  }, ve = [ce, p ? z : void 0].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ De(
+    "div",
+    {
+      ...be,
+      ...ge,
+      ref: G,
+      className: L(
+        "smwb-composer",
+        `smwb-composer_${ee}`,
+        fe && "smwb-composer_focused",
+        r && "smwb-composer_busy",
+        n && "smwb-composer_disabled",
+        we && "smwb-composer_drag-active",
+        u && "smwb-composer_over-limit",
+        ue
+      ),
+      "data-testid": C != null ? C : "composer",
+      children: [
+        b(T) ? /* @__PURE__ */ t("div", { className: "smwb-composer__attachments", "data-testid": "composer-attachments", children: T }) : null,
+        /* @__PURE__ */ t("div", { className: "smwb-composer__field", "data-value": s, style: _e, children: /* @__PURE__ */ t(
+          "textarea",
+          {
+            ref: le,
+            className: "smwb-composer__input",
+            id: O,
+            name: re,
+            rows: w,
+            placeholder: X,
+            maxLength: a,
+            disabled: n,
+            readOnly: R,
+            autoFocus: ae,
+            "aria-label": ne,
+            "aria-labelledby": ie,
+            "aria-describedby": ve,
+            "aria-invalid": u || void 0,
+            value: s,
+            onChange: (e) => $(e.target.value),
+            onKeyDown: he,
+            onFocus: (e) => {
+              v == null || v(e), M(!0);
+            },
+            onBlur: (e) => {
+              D == null || D(e), M(!1);
+            },
+            "data-testid": "composer-input"
+          }
+        ) }),
+        K ? /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: "smwb-composer__icon-button smwb-composer__attach",
+            "aria-label": pe,
+            disabled: n,
+            onClick: d.open,
+            "data-testid": "composer-attach",
+            children: /* @__PURE__ */ t(H, { name: "attach_file", size: 20 })
+          }
+        ) : null,
+        b(k) ? /* @__PURE__ */ t("div", { className: "smwb-composer__toolbar", "data-testid": "composer-toolbar", children: k }) : null,
+        p ? /* @__PURE__ */ t(
+          "span",
+          {
+            id: z,
+            className: L("smwb-composer__counter", u && "smwb-composer__counter_error"),
+            "data-testid": "composer-counter",
+            children: a !== void 0 ? `${s.length} / ${a}` : s.length
+          }
+        ) : null,
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: L("smwb-composer__icon-button", "smwb-composer__action", r && "smwb-composer__action_stop"),
+            "aria-label": r ? de : me,
+            "aria-disabled": !r && !P ? !0 : void 0,
+            disabled: n,
+            "data-action": r ? "stop" : "send",
+            onMouseDown: Te,
+            onClick: ye,
+            "data-testid": "composer-action",
+            children: /* @__PURE__ */ t(H, { name: r ? "stop" : "send", size: 20 })
+          }
+        ),
+        p ? /* @__PURE__ */ t("span", { className: "smwb-composer__status", role: "status", "data-testid": "composer-status", children: j }) : null,
+        K ? /* @__PURE__ */ t(
+          "input",
+          {
+            ...B,
+            onChange: (e) => {
+              B.onChange(e), e.currentTarget.value = "";
+            },
+            "data-testid": "composer-file-input"
+          }
+        ) : null
+      ]
+    }
+  );
+});
+export {
+  qe as Composer
+};
+//# sourceMappingURL=composer.js.map

package/dist/components/inputs/composer/composer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composer.js","sources":["../../../../src/components/inputs/composer/composer.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { useDropzone } from \"../../../hooks/useDropzone\";\nimport type { DropzoneAccept } from \"../../../hooks/useDropzone\";\nimport { useId } from \"../../../hooks/useId\";\nimport { filterAttachedFiles, isFileDrag } from \"./composerFiles\";\nimport { resolveComposerKeyAction } from \"./composerKeys\";\nimport type { ComposerSendKey } from \"./composerKeys\";\n\n/** Where the toolbar and the action sit: under the field (`stacked`) or in one row with it (`inline`). */\nexport type ComposerLayout = \"stacked\" | \"inline\";\n\nexport interface ComposerProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"onChange\" | \"defaultValue\" | \"onKeyDown\" | \"onFocus\" | \"onBlur\" | \"children\"\n> {\n  /**\n   * Controlled text. The composer is controlled while this is not `undefined` (checked on every render); a parent\n   * that ignores `onValueChange` keeps the field showing this value.\n   */\n  value?: string;\n  /** Initial text while uncontrolled. Defaults to an empty string. */\n  defaultValue?: string;\n  /** Called on every text change: typing, a newline, and the clear after a send. Called in both modes. */\n  onValueChange?: (value: string) => void;\n  /**\n   * Called with the trimmed text when the user sends it: the send key (see `sendKey`) or a click on the action\n   * button. Nothing is called while sending is not allowed: no `onSend`, an empty or whitespace-only text, `disabled`,\n   * `readOnly`, `busy`, or a text over `maxLength`. Async work is shown with `busy`; the return value is ignored.\n   */\n  onSend?: (text: string) => void;\n  /**\n   * Which Enter sends. `\"modEnter\"` (default): Ctrl/⌘+Enter sends and Enter inserts a newline. `\"enter\"`: Enter sends,\n   * Shift+Enter inserts a newline, Ctrl/⌘+Enter sends too. An Enter that commits an IME composition never sends.\n   */\n  sendKey?: ComposerSendKey;\n  /**\n   * Clear the text after `onSend`: the composer's own state while uncontrolled, `onValueChange(\"\")` while controlled.\n   * Defaults to `true`.\n   */\n  clearOnSend?: boolean;\n  /**\n   * The agent is working: the action button turns into Stop and calls `onStop`, and the keys and the button do not\n   * send. The text stays editable. The composer never changes `busy` itself, the parent owns it.\n   */\n  busy?: boolean;\n  /**\n   * Called when Stop is pressed (click, Enter or Space on the button) while `busy` and not `disabled`. Without it the\n   * Stop button does nothing, so pass it whenever `busy` can be set.\n   */\n  onStop?: () => void;\n  /** Placeholder of the textarea. It is not a name for the field, set `aria-label` or `aria-labelledby` as well. */\n  placeholder?: string;\n  /**\n   * Hard limit on the text (the native `maxlength` of the textarea, counted in UTF-16 units, so an emoji is 2).\n   * Turns the counter on.\n   */\n  maxLength?: number;\n  /** Show the counter (`n / maxLength`, or `n` without `maxLength`). Defaults to `true` when `maxLength` is set. */\n  counter?: boolean;\n  /**\n   * Text for the polite status region that announces how many characters are left. It is spoken only near the limit\n   * (within the larger of 10 characters and 10% of `maxLength`) and when the text is over it, with a negative\n   * `remaining`. Defaults to \"N characters left\" / \"N characters over the limit\".\n   */\n  counterAnnouncement?: (remaining: number, maxLength: number) => string;\n  /** Height of the empty field in rows, and the `rows` of the textarea. Defaults to `1`. */\n  minRows?: number;\n  /** Rows the field grows to before it scrolls. Clamped to at least `minRows`. Defaults to `8`. */\n  maxRows?: number;\n  /**\n   * `\"stacked\"` (default): the field on top, a bar under it with the attach button, the toolbar, the counter and the\n   * action. `\"inline\"`: the attach button, the field, the counter and the action in one row, the toolbar (if any)\n   * in a row under it.\n   */\n  layout?: ComposerLayout;\n  /**\n   * Slot under the field for chips and selectors (agent, model, mode, …). Drawn in every state. It is a plain `div`,\n   * not `role=\"toolbar\"`: the content brings its own keyboard handling and disabled state.\n   */\n  toolbar?: React.ReactNode;\n  /**\n   * Slot above the field for the app's file chips. The composer keeps no file state: the app lists what `onAttach`\n   * gave it here.\n   */\n  attachments?: React.ReactNode;\n  /**\n   * Turns on the attach button, the hidden file input and the drop target (the whole composer). Called with the files\n   * of a pick or a drop that are left after `accept`, `multiple` and `maxFiles`, never with an empty list. Only a drag\n   * of files is taken: dragged text or a link still goes into the field.\n   */\n  onAttach?: (files: File[]) => void;\n  /**\n   * Accepted file types, as a record of mime type to extensions or a raw `accept` string (`image/*`, `.pdf`, an exact\n   * mime type). It sets the picker's filter, and the files of a pick or a drop that do not match are left out.\n   */\n  accept?: DropzoneAccept;\n  /** Allow several files per pick or drop. When `false` the picker takes one and a drop keeps the first. Defaults to `true`. */\n  multiple?: boolean;\n  /** Files beyond this number are dropped from a pick or a drop (counted after `accept`). */\n  maxFiles?: number;\n  /**\n   * Whether `onAttach` also makes the composer a drop target for files. Set `false` when a parent already takes drops\n   * (a chat panel): the attach button and the picker stay, and a drop on the composer bubbles to the parent untouched.\n   * Defaults to `true`.\n   */\n  dropTarget?: boolean;\n  /**\n   * Disables the textarea, the attach button, the action button and the drop target. Toolbar content is the app's to\n   * disable.\n   */\n  disabled?: boolean;\n  /** The textarea is `readonly`: sending is unavailable, Stop still works. */\n  readOnly?: boolean;\n  /** Focus the textarea on mount. */\n  autoFocus?: boolean;\n  /** Name of the textarea. */\n  name?: string;\n  /** Id of the textarea (the root keeps no id). Generated when not given. */\n  id?: string;\n  /** Accessible name of the textarea. Set this or `aria-labelledby`: a placeholder is not a name. */\n  \"aria-label\"?: string;\n  /** Id(s) of the element(s) that name the textarea. */\n  \"aria-labelledby\"?: string;\n  /** Id(s) that describe the textarea. They come first, the counter's id is appended. */\n  \"aria-describedby\"?: string;\n  /** Key handler of the textarea. It runs before the composer's own; if it calls `preventDefault()`, the composer does nothing for that key. */\n  onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;\n  /** Focus handler of the textarea. */\n  onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;\n  /** Blur handler of the textarea. */\n  onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;\n  /** Ref of the textarea (the root takes the component's own `ref`). */\n  inputRef?: React.Ref<HTMLTextAreaElement>;\n  /** Accessible name of the action button while it sends. Defaults to \"Send\". */\n  sendLabel?: string;\n  /** Accessible name of the action button while `busy`. Defaults to \"Stop\". */\n  stopLabel?: string;\n  /** Accessible name of the attach button. Defaults to \"Attach file\". */\n  attachLabel?: string;\n  /**\n   * Class name(s) for the root `<div>`. `style`, `ref`, `data-*` attributes and every other HTML attribute or event\n   * handler go to the root too; the root's drag handlers run after yours.\n   */\n  className?: string;\n  /** Test id of the root `<div>`. Defaults to `composer`; the parts inside have their own (`composer-input`, `composer-action`, …). */\n  \"data-testid\"?: string;\n}\n\nconst defaultCounterAnnouncement = (remaining: number): string =>\n  remaining >= 0 ? `${remaining} characters left` : `${-remaining} characters over the limit`;\n\nfunction stopMouseDown(event: React.MouseEvent<HTMLElement>): void {\n  // Keeps the focus in the textarea when the action button is clicked with a mouse.\n  event.preventDefault();\n}\n\n// Whether a slot draws anything: null, false, \"\" and empty arrays or fragments do not.\nfunction isDrawn(node: React.ReactNode): boolean {\n  if (Array.isArray(node)) return node.some(isDrawn);\n  if (React.isValidElement<{ children?: React.ReactNode }>(node) && node.type === React.Fragment) {\n    return isDrawn(node.props.children);\n  }\n  return node != null && typeof node !== \"boolean\" && node !== \"\";\n}\n\n/**\n * A task input: a multi-line field that grows from `minRows` to `maxRows`, a `toolbar` slot under it for chip\n * selectors, a send button that becomes Stop while `busy`, keyboard send (Ctrl/⌘+Enter by default), an optional\n * attach button and drop target, and a character counter.\n *\n * ```tsx\n * <Composer aria-label=\"Task for the agent\" onSend={(text) => run(text)} busy={running} onStop={cancel} />\n * ```\n */\nexport const Composer = React.forwardRef<HTMLDivElement, ComposerProps>(function Composer(props, ref) {\n  const {\n    value,\n    defaultValue,\n    onValueChange,\n    onSend,\n    sendKey = \"modEnter\",\n    clearOnSend = true,\n    busy = false,\n    onStop,\n    placeholder,\n    maxLength,\n    counter,\n    counterAnnouncement = defaultCounterAnnouncement,\n    minRows = 1,\n    maxRows = 8,\n    layout = \"stacked\",\n    toolbar,\n    attachments,\n    onAttach,\n    accept,\n    multiple = true,\n    maxFiles,\n    dropTarget = true,\n    disabled = false,\n    readOnly = false,\n    autoFocus,\n    name,\n    id,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    inputRef,\n    sendLabel = \"Send\",\n    stopLabel = \"Stop\",\n    attachLabel = \"Attach file\",\n    className,\n    \"data-testid\": testId,\n    onDragOver,\n    onDragLeave,\n    onDrop,\n    ...rest\n  } = props;\n\n  const [text, setText] = useControllableState<string>({\n    value,\n    defaultValue: defaultValue ?? \"\",\n    onChange: onValueChange,\n  });\n  const [focused, setFocused] = useState(false);\n  const textareaId = useId(id, \"smwb-composer\");\n  const counterId = `${textareaId}-counter`;\n\n  const dropzone = useDropzone({\n    accept,\n    multiple,\n    disabled,\n    // `maxFiles` is not passed on: the cut has to come after `accept`, see `filterAttachedFiles`.\n    onDrop: (files) => {\n      const attached = filterAttachedFiles(files, { accept, multiple, maxFiles });\n      if (attached.length > 0) onAttach?.(attached);\n    },\n  });\n  const dropHandlers = dropzone.getRootProps();\n  const inputProps = dropzone.getInputProps();\n\n  const attachable = onAttach !== undefined;\n  // `dropTarget={false}` keeps the attach button and the picker but hands drops to a parent that owns the target.\n  const dropping = attachable && dropTarget;\n\n  const showCounter = counter ?? maxLength !== undefined;\n  const overLimit = maxLength !== undefined && text.length > maxLength;\n  const canSend = !!onSend && text.trim() !== \"\" && !disabled && !readOnly && !busy && !overLimit;\n\n  let status = \"\";\n  if (showCounter && maxLength !== undefined) {\n    const remaining = maxLength - text.length;\n    if (remaining <= Math.max(10, Math.ceil(maxLength * 0.1))) status = counterAnnouncement(remaining, maxLength);\n  }\n\n  const send = () => {\n    if (!canSend || !onSend) return;\n    onSend(text.trim());\n    if (clearOnSend) setText(\"\");\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n\n    const action = resolveComposerKeyAction(\n      {\n        key: event.key,\n        shiftKey: event.shiftKey,\n        ctrlKey: event.ctrlKey,\n        metaKey: event.metaKey,\n        altKey: event.altKey,\n        isComposing: event.nativeEvent.isComposing,\n        keyCode: event.keyCode,\n      },\n      sendKey\n    );\n    if (action === \"native\") return;\n\n    event.preventDefault();\n    send();\n  };\n\n  const handleActionClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    // The second click of a double-click lands on the node the first one turned into the other action (Send into\n    // Stop once the parent sets `busy`). It is not a new press: keyboard activation has `detail` 0, a click 1.\n    if (event.detail > 1) return;\n    if (busy) {\n      if (!disabled) onStop?.();\n      return;\n    }\n    send();\n  };\n\n  const rootDragOver = (event: React.DragEvent<HTMLDivElement>) => {\n    onDragOver?.(event);\n    // Only a drag of files is the dropzone's. Text or a link keeps its default: the textarea inserts it.\n    if (isFileDrag(event.dataTransfer)) dropHandlers.onDragOver(event);\n  };\n  const rootDragLeave = (event: React.DragEvent<HTMLDivElement>) => {\n    onDragLeave?.(event);\n    // A leave onto a descendant is not a leave: it would flicker the drag-active state over the toolbar chips.\n    if (event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget)) return;\n    dropHandlers.onDragLeave();\n  };\n  const rootDrop = (event: React.DragEvent<HTMLDivElement>) => {\n    onDrop?.(event);\n    if (isFileDrag(event.dataTransfer)) dropHandlers.onDrop(event);\n  };\n  const dragHandlers = dropping\n    ? { onDragOver: rootDragOver, onDragLeave: rootDragLeave, onDrop: rootDrop }\n    : { onDragOver, onDragLeave, onDrop };\n\n  const dragActive = dropping && dropzone.isDragActive;\n  const fieldStyle = {\n    \"--smwb-composer-min-rows\": minRows,\n    \"--smwb-composer-max-rows\": Math.max(maxRows, minRows),\n  } as React.CSSProperties;\n  const describedBy = [ariaDescribedBy, showCounter ? counterId : undefined].filter(Boolean).join(\" \") || undefined;\n\n  return (\n    <div\n      {...rest}\n      {...dragHandlers}\n      ref={ref}\n      className={cn(\n        \"smwb-composer\",\n        `smwb-composer_${layout}`,\n        focused && \"smwb-composer_focused\",\n        busy && \"smwb-composer_busy\",\n        disabled && \"smwb-composer_disabled\",\n        dragActive && \"smwb-composer_drag-active\",\n        overLimit && \"smwb-composer_over-limit\",\n        className\n      )}\n      data-testid={testId ?? \"composer\"}\n    >\n      {isDrawn(attachments) ? (\n        <div className=\"smwb-composer__attachments\" data-testid=\"composer-attachments\">\n          {attachments}\n        </div>\n      ) : null}\n      <div className=\"smwb-composer__field\" data-value={text} style={fieldStyle}>\n        <textarea\n          ref={inputRef}\n          className=\"smwb-composer__input\"\n          id={textareaId}\n          name={name}\n          rows={minRows}\n          placeholder={placeholder}\n          maxLength={maxLength}\n          disabled={disabled}\n          readOnly={readOnly}\n          autoFocus={autoFocus}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={describedBy}\n          aria-invalid={overLimit || undefined}\n          value={text}\n          onChange={(event) => setText(event.target.value)}\n          onKeyDown={handleKeyDown}\n          onFocus={(event) => {\n            onFocus?.(event);\n            setFocused(true);\n          }}\n          onBlur={(event) => {\n            onBlur?.(event);\n            setFocused(false);\n          }}\n          data-testid=\"composer-input\"\n        />\n      </div>\n      {attachable ? (\n        <button\n          type=\"button\"\n          className=\"smwb-composer__icon-button smwb-composer__attach\"\n          aria-label={attachLabel}\n          disabled={disabled}\n          onClick={dropzone.open}\n          data-testid=\"composer-attach\"\n        >\n          <Icon name=\"attach_file\" size={20} />\n        </button>\n      ) : null}\n      {isDrawn(toolbar) ? (\n        <div className=\"smwb-composer__toolbar\" data-testid=\"composer-toolbar\">\n          {toolbar}\n        </div>\n      ) : null}\n      {showCounter ? (\n        <span\n          id={counterId}\n          className={cn(\"smwb-composer__counter\", overLimit && \"smwb-composer__counter_error\")}\n          data-testid=\"composer-counter\"\n        >\n          {maxLength !== undefined ? `${text.length} / ${maxLength}` : text.length}\n        </span>\n      ) : null}\n      <button\n        type=\"button\"\n        className={cn(\"smwb-composer__icon-button\", \"smwb-composer__action\", busy && \"smwb-composer__action_stop\")}\n        aria-label={busy ? stopLabel : sendLabel}\n        aria-disabled={!busy && !canSend ? true : undefined}\n        disabled={disabled}\n        data-action={busy ? \"stop\" : \"send\"}\n        onMouseDown={stopMouseDown}\n        onClick={handleActionClick}\n        data-testid=\"composer-action\"\n      >\n        <Icon name={busy ? \"stop\" : \"send\"} size={20} />\n      </button>\n      {showCounter ? (\n        <span className=\"smwb-composer__status\" role=\"status\" data-testid=\"composer-status\">\n          {status}\n        </span>\n      ) : null}\n      {attachable ? (\n        <input\n          {...inputProps}\n          onChange={(event) => {\n            inputProps.onChange(event);\n            // Lets the same file be picked again.\n            event.currentTarget.value = \"\";\n          }}\n          data-testid=\"composer-file-input\"\n        />\n      ) : null}\n    </div>\n  );\n});\n\nexport default Composer;\n"],"names":["defaultCounterAnnouncement","remaining","stopMouseDown","event","isDrawn","node","React","Composer","props","ref","value","defaultValue","onValueChange","onSend","sendKey","clearOnSend","busy","onStop","placeholder","maxLength","counter","counterAnnouncement","minRows","maxRows","layout","toolbar","attachments","onAttach","accept","multiple","maxFiles","dropTarget","disabled","readOnly","autoFocus","name","id","ariaLabel","ariaLabelledBy","ariaDescribedBy","onKeyDown","onFocus","onBlur","inputRef","sendLabel","stopLabel","attachLabel","className","testId","onDragOver","onDragLeave","onDrop","rest","text","setText","useControllableState","focused","setFocused","useState","textareaId","useId","counterId","dropzone","useDropzone","files","attached","filterAttachedFiles","dropHandlers","inputProps","attachable","dropping","showCounter","overLimit","canSend","status","send","handleKeyDown","resolveComposerKeyAction","handleActionClick","dragHandlers","isFileDrag","dragActive","fieldStyle","describedBy","jsxs","cn","jsx","Icon"],"mappings":";;;;;;;;;;;AAyJA,MAAMA,KAA6B,CAACC,MAClCA,KAAa,IAAI,GAAGA,CAAS,qBAAqB,GAAG,CAACA,CAAS;AAEjE,SAASC,GAAcC,GAA4C;AAEjE,EAAAA,EAAM,eAAA;AACR;AAGA,SAASC,EAAQC,GAAgC;AAC/C,SAAI,MAAM,QAAQA,CAAI,IAAUA,EAAK,KAAKD,CAAO,IAC7CE,EAAM,eAA+CD,CAAI,KAAKA,EAAK,SAASC,EAAM,WAC7EF,EAAQC,EAAK,MAAM,QAAQ,IAE7BA,KAAQ,QAAQ,OAAOA,KAAS,aAAaA,MAAS;AAC/D;AAWO,MAAME,KAAWD,EAAM,WAA0C,SAAkBE,GAAOC,GAAK;AACpG,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,eAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,aAAAC,IAAc;AAAA,IACd,MAAAC,IAAO;AAAA,IACP,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,qBAAAC,IAAsBrB;AAAA,IACtB,SAAAsB,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,QAAAC,KAAS;AAAA,IACT,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,YAAAC,KAAa;AAAA,IACb,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,IAAAC;AAAA,IACA,cAAcC;AAAA,IACd,mBAAmBC;AAAA,IACnB,oBAAoBC;AAAA,IACpB,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC,KAAY;AAAA,IACZ,WAAAC,KAAY;AAAA,IACZ,aAAAC,KAAc;AAAA,IACd,WAAAC;AAAA,IACA,eAAeC;AAAA,IACf,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACD5C,GAEE,CAAC6C,GAAMC,CAAO,IAAIC,GAA6B;AAAA,IACnD,OAAA7C;AAAA,IACA,cAAcC,KAAA,OAAAA,IAAgB;AAAA,IAC9B,UAAUC;AAAA,EAAA,CACX,GACK,CAAC4C,IAASC,CAAU,IAAIC,GAAS,EAAK,GACtCC,IAAaC,GAAMxB,IAAI,eAAe,GACtCyB,IAAY,GAAGF,CAAU,YAEzBG,IAAWC,GAAY;AAAA,IAC3B,QAAAnC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAG;AAAA;AAAA,IAEA,QAAQ,CAACgC,MAAU;AACjB,YAAMC,IAAWC,GAAoBF,GAAO,EAAE,QAAApC,GAAQ,UAAAC,GAAU,UAAAC,IAAU;AAC1E,MAAImC,EAAS,SAAS,MAAGtC,KAAA,QAAAA,EAAWsC;AAAA,IACtC;AAAA,EAAA,CACD,GACKE,IAAeL,EAAS,aAAA,GACxBM,IAAaN,EAAS,cAAA,GAEtBO,IAAa1C,MAAa,QAE1B2C,IAAWD,KAActC,IAEzBwC,IAAcnD,KAAA,OAAAA,IAAWD,MAAc,QACvCqD,IAAYrD,MAAc,UAAakC,EAAK,SAASlC,GACrDsD,IAAU,CAAC,CAAC5D,KAAUwC,EAAK,KAAA,MAAW,MAAM,CAACrB,KAAY,CAACC,KAAY,CAACjB,KAAQ,CAACwD;AAEtF,MAAIE,IAAS;AACb,MAAIH,KAAepD,MAAc,QAAW;AAC1C,UAAMlB,IAAYkB,IAAYkC,EAAK;AACnC,IAAIpD,KAAa,KAAK,IAAI,IAAI,KAAK,KAAKkB,IAAY,GAAG,CAAC,MAAGuD,IAASrD,EAAoBpB,GAAWkB,CAAS;AAAA,EAC9G;AAEA,QAAMwD,IAAO,MAAM;AACjB,IAAI,CAACF,KAAW,CAAC5D,MACjBA,EAAOwC,EAAK,MAAM,GACdtC,OAAqB,EAAE;AAAA,EAC7B,GAEM6D,KAAgB,CAACzE,MAAoD;AAgBzE,IAfAqC,KAAA,QAAAA,EAAYrC,IACR,EAAAA,EAAM,oBAEK0E;AAAA,MACb;AAAA,QACE,KAAK1E,EAAM;AAAA,QACX,UAAUA,EAAM;AAAA,QAChB,SAASA,EAAM;AAAA,QACf,SAASA,EAAM;AAAA,QACf,QAAQA,EAAM;AAAA,QACd,aAAaA,EAAM,YAAY;AAAA,QAC/B,SAASA,EAAM;AAAA,MAAA;AAAA,MAEjBW;AAAA,IAAA,MAEa,cAEfX,EAAM,eAAA,GACNwE,EAAA;AAAA,EACF,GAEMG,KAAoB,CAAC3E,MAA+C;AAGxE,QAAI,EAAAA,EAAM,SAAS,IACnB;AAAA,UAAIa,GAAM;AACR,QAAKgB,KAAUf,KAAA,QAAAA;AACf;AAAA,MACF;AACA,MAAA0D,EAAA;AAAA;AAAA,EACF,GAiBMI,KAAeT,IACjB,EAAE,YAhBe,CAACnE,MAA2C;AAC/D,IAAA8C,KAAA,QAAAA,EAAa9C,IAET6E,EAAW7E,EAAM,YAAY,KAAGgE,EAAa,WAAWhE,CAAK;AAAA,EACnE,GAYgC,aAXV,CAACA,MAA2C;AAGhE,IAFA+C,KAAA,QAAAA,EAAc/C,IAEV,EAAAA,EAAM,yBAAyB,QAAQA,EAAM,cAAc,SAASA,EAAM,aAAa,MAC3FgE,EAAa,YAAA;AAAA,EACf,GAM4D,QAL3C,CAAChE,MAA2C;AAC3D,IAAAgD,KAAA,QAAAA,EAAShD,IACL6E,EAAW7E,EAAM,YAAY,KAAGgE,EAAa,OAAOhE,CAAK;AAAA,EAC/D,EAEoE,IAChE,EAAE,YAAA8C,GAAY,aAAAC,GAAa,QAAAC,EAAA,GAEzB8B,KAAaX,KAAYR,EAAS,cAClCoB,KAAa;AAAA,IACjB,4BAA4B5D;AAAA,IAC5B,4BAA4B,KAAK,IAAIC,GAASD,CAAO;AAAA,EAAA,GAEjD6D,KAAc,CAAC5C,IAAiBgC,IAAcV,IAAY,MAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAExG,SACE,gBAAAuB;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGhC;AAAA,MACH,GAAG2B;AAAA,MACJ,KAAAtE;AAAA,MACA,WAAW4E;AAAA,QACT;AAAA,QACA,iBAAiB7D,EAAM;AAAA,QACvBgC,MAAW;AAAA,QACXxC,KAAQ;AAAA,QACRgB,KAAY;AAAA,QACZiD,MAAc;AAAA,QACdT,KAAa;AAAA,QACbzB;AAAA,MAAA;AAAA,MAEF,eAAaC,KAAA,OAAAA,IAAU;AAAA,MAEtB,UAAA;AAAA,QAAA5C,EAAQsB,CAAW,IAClB,gBAAA4D,EAAC,OAAA,EAAI,WAAU,8BAA6B,eAAY,wBACrD,UAAA5D,EAAA,CACH,IACE;AAAA,0BACH,OAAA,EAAI,WAAU,wBAAuB,cAAY2B,GAAM,OAAO6B,IAC7D,UAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK3C;AAAA,YACL,WAAU;AAAA,YACV,IAAIgB;AAAA,YACJ,MAAAxB;AAAA,YACA,MAAMb;AAAA,YACN,aAAAJ;AAAA,YACA,WAAAC;AAAA,YACA,UAAAa;AAAA,YACA,UAAAC;AAAA,YACA,WAAAC;AAAA,YACA,cAAYG;AAAA,YACZ,mBAAiBC;AAAA,YACjB,oBAAkB6C;AAAA,YAClB,gBAAcX,KAAa;AAAA,YAC3B,OAAOnB;AAAA,YACP,UAAU,CAAClD,MAAUmD,EAAQnD,EAAM,OAAO,KAAK;AAAA,YAC/C,WAAWyE;AAAA,YACX,SAAS,CAACzE,MAAU;AAClB,cAAAsC,KAAA,QAAAA,EAAUtC,IACVsD,EAAW,EAAI;AAAA,YACjB;AAAA,YACA,QAAQ,CAACtD,MAAU;AACjB,cAAAuC,KAAA,QAAAA,EAASvC,IACTsD,EAAW,EAAK;AAAA,YAClB;AAAA,YACA,eAAY;AAAA,UAAA;AAAA,QAAA,GAEhB;AAAA,QACCY,IACC,gBAAAiB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,cAAYxC;AAAA,YACZ,UAAAd;AAAA,YACA,SAAS8B,EAAS;AAAA,YAClB,eAAY;AAAA,YAEZ,UAAA,gBAAAwB,EAACC,GAAA,EAAK,MAAK,eAAc,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA,IAEnC;AAAA,QACHnF,EAAQqB,CAAO,IACd,gBAAA6D,EAAC,OAAA,EAAI,WAAU,0BAAyB,eAAY,oBACjD,UAAA7D,EAAA,CACH,IACE;AAAA,QACH8C,IACC,gBAAAe;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAIzB;AAAA,YACJ,WAAWwB,EAAG,0BAA0Bb,KAAa,8BAA8B;AAAA,YACnF,eAAY;AAAA,YAEX,UAAArD,MAAc,SAAY,GAAGkC,EAAK,MAAM,MAAMlC,CAAS,KAAKkC,EAAK;AAAA,UAAA;AAAA,QAAA,IAElE;AAAA,QACJ,gBAAAiC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAWD,EAAG,8BAA8B,yBAAyBrE,KAAQ,4BAA4B;AAAA,YACzG,cAAYA,IAAO6B,KAAYD;AAAA,YAC/B,iBAAe,CAAC5B,KAAQ,CAACyD,IAAU,KAAO;AAAA,YAC1C,UAAAzC;AAAA,YACA,eAAahB,IAAO,SAAS;AAAA,YAC7B,aAAad;AAAA,YACb,SAAS4E;AAAA,YACT,eAAY;AAAA,YAEZ,4BAACS,GAAA,EAAK,MAAMvE,IAAO,SAAS,QAAQ,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAE/CuD,IACC,gBAAAe,EAAC,QAAA,EAAK,WAAU,yBAAwB,MAAK,UAAS,eAAY,mBAC/D,UAAAZ,EAAA,CACH,IACE;AAAA,QACHL,IACC,gBAAAiB;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGlB;AAAA,YACJ,UAAU,CAACjE,MAAU;AACnB,cAAAiE,EAAW,SAASjE,CAAK,GAEzBA,EAAM,cAAc,QAAQ;AAAA,YAC9B;AAAA,YACA,eAAY;AAAA,UAAA;AAAA,QAAA,IAEZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/components/inputs/composer/composerFiles.d.ts

@@ -0,0 +1,26 @@
+/** Accepted file types as `Composer` takes them: a record of mime type to extensions, or a raw `accept` string. */
+export type ComposerAccept = Record<string, string[]> | string;
+/** The part of a `DataTransfer` the drag guard reads. */
+export interface ComposerDragData {
+    types?: ArrayLike<string> | null | undefined;
+    files?: ArrayLike<unknown> | null | undefined;
+}
+/** The options that decide which of the picked or dropped files `Composer` passes on. */
+export interface ComposerFileOptions {
+    accept?: ComposerAccept | undefined;
+    multiple?: boolean | undefined;
+    maxFiles?: number | undefined;
+}
+/**
+ * Whether a drag carries files. A text or link drag does not and stays with the browser (the textarea inserts it).
+ * `dragover` exposes only `types`, and Firefox gives a `DOMStringList` there, hence `Array.from`; a `drop` has the
+ * file list as well.
+ */
+export declare function isFileDrag(data: ComposerDragData | null | undefined): boolean;
+/**
+ * The files of a pick or a drop that `Composer` passes to `onAttach`: those that match `accept` (a drop is not
+ * filtered by the browser, and the picker's "All files" choice lifts its filter), cut to one file when `multiple` is
+ * `false`, then to `maxFiles`. The cut comes last, so the files it drops are the ones past the limit, not the ones
+ * `accept` would have refused anyway.
+ */
+export declare function filterAttachedFiles(files: File[], options: ComposerFileOptions): File[];

package/dist/components/inputs/composer/composerFiles.js

@@ -0,0 +1,19 @@
+function f(t) {
+  var e, r, s;
+  return t ? Array.from((e = t.types) != null ? e : []).includes("Files") ? !0 : ((s = (r = t.files) == null ? void 0 : r.length) != null ? s : 0) > 0 : !1;
+}
+function u(t) {
+  return t ? (typeof t == "string" ? t.split(",") : Object.entries(t).flatMap(([r, s]) => [r, ...s])).map((r) => r.trim().toLowerCase()).filter(Boolean) : [];
+}
+function a(t, e) {
+  return e === "*/*" ? !0 : e.startsWith(".") ? t.name.toLowerCase().endsWith(e) : e.endsWith("/*") ? t.type.toLowerCase().startsWith(e.slice(0, -1)) : t.type.toLowerCase() === e;
+}
+function o(t, e) {
+  const r = u(e.accept), s = r.length === 0 ? t : t.filter((n) => r.some((l) => a(n, l))), i = e.multiple === !1 ? 1 : e.maxFiles && e.maxFiles > 0 ? e.maxFiles : void 0;
+  return i === void 0 ? s : s.slice(0, i);
+}
+export {
+  o as filterAttachedFiles,
+  f as isFileDrag
+};
+//# sourceMappingURL=composerFiles.js.map

package/dist/components/inputs/composer/composerFiles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composerFiles.js","sources":["../../../../src/components/inputs/composer/composerFiles.ts"],"sourcesContent":["/** Accepted file types as `Composer` takes them: a record of mime type to extensions, or a raw `accept` string. */\nexport type ComposerAccept = Record<string, string[]> | string;\n\n/** The part of a `DataTransfer` the drag guard reads. */\nexport interface ComposerDragData {\n  types?: ArrayLike<string> | null | undefined;\n  files?: ArrayLike<unknown> | null | undefined;\n}\n\n/** The options that decide which of the picked or dropped files `Composer` passes on. */\nexport interface ComposerFileOptions {\n  accept?: ComposerAccept | undefined;\n  multiple?: boolean | undefined;\n  maxFiles?: number | undefined;\n}\n\n/**\n * Whether a drag carries files. A text or link drag does not and stays with the browser (the textarea inserts it).\n * `dragover` exposes only `types`, and Firefox gives a `DOMStringList` there, hence `Array.from`; a `drop` has the\n * file list as well.\n */\nexport function isFileDrag(data: ComposerDragData | null | undefined): boolean {\n  if (!data) return false;\n  if (Array.from(data.types ?? []).includes(\"Files\")) return true;\n  return (data.files?.length ?? 0) > 0;\n}\n\nfunction acceptTokens(accept: ComposerAccept | undefined): string[] {\n  if (!accept) return [];\n  const tokens =\n    typeof accept === \"string\" ? accept.split(\",\") : Object.entries(accept).flatMap(([mime, exts]) => [mime, ...exts]);\n  return tokens.map((token) => token.trim().toLowerCase()).filter(Boolean);\n}\n\n// The same three forms as the `accept` attribute: `.ext`, `type/*` and an exact mime type.\nfunction matchesToken(file: File, token: string): boolean {\n  if (token === \"*/*\") return true;\n  if (token.startsWith(\".\")) return file.name.toLowerCase().endsWith(token);\n  if (token.endsWith(\"/*\")) return file.type.toLowerCase().startsWith(token.slice(0, -1));\n  return file.type.toLowerCase() === token;\n}\n\n/**\n * The files of a pick or a drop that `Composer` passes to `onAttach`: those that match `accept` (a drop is not\n * filtered by the browser, and the picker's \"All files\" choice lifts its filter), cut to one file when `multiple` is\n * `false`, then to `maxFiles`. The cut comes last, so the files it drops are the ones past the limit, not the ones\n * `accept` would have refused anyway.\n */\nexport function filterAttachedFiles(files: File[], options: ComposerFileOptions): File[] {\n  const tokens = acceptTokens(options.accept);\n  const accepted =\n    tokens.length === 0 ? files : files.filter((file) => tokens.some((token) => matchesToken(file, token)));\n  const limit =\n    options.multiple === false ? 1 : options.maxFiles && options.maxFiles > 0 ? options.maxFiles : undefined;\n  return limit === undefined ? accepted : accepted.slice(0, limit);\n}\n"],"names":["isFileDrag","data","_a","_b","_c","acceptTokens","accept","mime","exts","token","matchesToken","file","filterAttachedFiles","files","options","tokens","accepted","limit"],"mappings":"AAqBO,SAASA,EAAWC,GAAoD;AAAxE,MAAAC,GAAAC,GAAAC;AACL,SAAKH,IACD,MAAM,MAAKC,IAAAD,EAAK,UAAL,OAAAC,IAAc,CAAA,CAAE,EAAE,SAAS,OAAO,IAAU,OACnDE,KAAAD,IAAAF,EAAK,UAAL,gBAAAE,EAAY,WAAZ,OAAAC,IAAsB,KAAK,IAFjB;AAGpB;AAEA,SAASC,EAAaC,GAA8C;AAClE,SAAKA,KAEH,OAAOA,KAAW,WAAWA,EAAO,MAAM,GAAG,IAAI,OAAO,QAAQA,CAAM,EAAE,QAAQ,CAAC,CAACC,GAAMC,CAAI,MAAM,CAACD,GAAM,GAAGC,CAAI,CAAC,GACrG,IAAI,CAACC,MAAUA,EAAM,KAAA,EAAO,YAAA,CAAa,EAAE,OAAO,OAAO,IAHnD,CAAA;AAItB;AAGA,SAASC,EAAaC,GAAYF,GAAwB;AACxD,SAAIA,MAAU,QAAc,KACxBA,EAAM,WAAW,GAAG,IAAUE,EAAK,KAAK,YAAA,EAAc,SAASF,CAAK,IACpEA,EAAM,SAAS,IAAI,IAAUE,EAAK,KAAK,YAAA,EAAc,WAAWF,EAAM,MAAM,GAAG,EAAE,CAAC,IAC/EE,EAAK,KAAK,YAAA,MAAkBF;AACrC;AAQO,SAASG,EAAoBC,GAAeC,GAAsC;AACvF,QAAMC,IAASV,EAAaS,EAAQ,MAAM,GACpCE,IACJD,EAAO,WAAW,IAAIF,IAAQA,EAAM,OAAO,CAACF,MAASI,EAAO,KAAK,CAACN,MAAUC,EAAaC,GAAMF,CAAK,CAAC,CAAC,GAClGQ,IACJH,EAAQ,aAAa,KAAQ,IAAIA,EAAQ,YAAYA,EAAQ,WAAW,IAAIA,EAAQ,WAAW;AACjG,SAAOG,MAAU,SAAYD,IAAWA,EAAS,MAAM,GAAGC,CAAK;AACjE;"}

package/dist/components/inputs/composer/composerKeys.d.ts

@@ -0,0 +1,29 @@
+/** Which Enter sends in a `Composer`: `"modEnter"` is Ctrl/⌘+Enter, `"enter"` is a plain Enter. */
+export type ComposerSendKey = "modEnter" | "enter";
+/**
+ * What the composer does with a key press in its textarea:
+ * - `"send"`: prevent the default and send, if sending is allowed;
+ * - `"native"`: leave the key to the browser (a newline, IME commit, …).
+ */
+export type ComposerKeyAction = "send" | "native";
+/** The part of a keyboard event the key map reads. */
+export interface ComposerKeyEvent {
+    key: string;
+    shiftKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    altKey: boolean;
+    /** Set by Chromium and Firefox while an IME composition is open. */
+    isComposing?: boolean | undefined;
+    /** Safari reports the commit Enter of a composition as keyCode 229 with `isComposing` false. */
+    keyCode?: number | undefined;
+}
+/**
+ * The composer's keyboard map (Escape and every other key stay native).
+ *
+ * - IME composition: always native, so an Enter that commits a CJK candidate is not a send.
+ * - Ctrl/⌘+Enter (no Shift, no Alt): send in both modes.
+ * - Enter alone: send with `sendKey="enter"`, a native newline with `"modEnter"`.
+ * - Shift+Enter and every other combination: native.
+ */
+export declare function resolveComposerKeyAction(event: ComposerKeyEvent, sendKey: ComposerSendKey): ComposerKeyAction;

package/dist/components/inputs/composer/composerKeys.js

@@ -0,0 +1,7 @@
+function i(r, e) {
+  return r.isComposing || r.keyCode === 229 || r.key !== "Enter" || r.altKey || r.shiftKey ? "native" : r.ctrlKey || r.metaKey || e === "enter" ? "send" : "native";
+}
+export {
+  i as resolveComposerKeyAction
+};
+//# sourceMappingURL=composerKeys.js.map

package/dist/components/inputs/composer/composerKeys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composerKeys.js","sources":["../../../../src/components/inputs/composer/composerKeys.ts"],"sourcesContent":["/** Which Enter sends in a `Composer`: `\"modEnter\"` is Ctrl/⌘+Enter, `\"enter\"` is a plain Enter. */\nexport type ComposerSendKey = \"modEnter\" | \"enter\";\n\n/**\n * What the composer does with a key press in its textarea:\n * - `\"send\"`: prevent the default and send, if sending is allowed;\n * - `\"native\"`: leave the key to the browser (a newline, IME commit, …).\n */\nexport type ComposerKeyAction = \"send\" | \"native\";\n\n/** The part of a keyboard event the key map reads. */\nexport interface ComposerKeyEvent {\n  key: string;\n  shiftKey: boolean;\n  ctrlKey: boolean;\n  metaKey: boolean;\n  altKey: boolean;\n  /** Set by Chromium and Firefox while an IME composition is open. */\n  isComposing?: boolean | undefined;\n  /** Safari reports the commit Enter of a composition as keyCode 229 with `isComposing` false. */\n  keyCode?: number | undefined;\n}\n\n/**\n * The composer's keyboard map (Escape and every other key stay native).\n *\n * - IME composition: always native, so an Enter that commits a CJK candidate is not a send.\n * - Ctrl/⌘+Enter (no Shift, no Alt): send in both modes.\n * - Enter alone: send with `sendKey=\"enter\"`, a native newline with `\"modEnter\"`.\n * - Shift+Enter and every other combination: native.\n */\nexport function resolveComposerKeyAction(event: ComposerKeyEvent, sendKey: ComposerSendKey): ComposerKeyAction {\n  if (event.isComposing || event.keyCode === 229) return \"native\";\n  if (event.key !== \"Enter\") return \"native\";\n  if (event.altKey || event.shiftKey) return \"native\";\n\n  if (event.ctrlKey || event.metaKey) return \"send\";\n  return sendKey === \"enter\" ? \"send\" : \"native\";\n}\n"],"names":["resolveComposerKeyAction","event","sendKey"],"mappings":"AA+BO,SAASA,EAAyBC,GAAyBC,GAA6C;AAG7G,SAFID,EAAM,eAAeA,EAAM,YAAY,OACvCA,EAAM,QAAQ,WACdA,EAAM,UAAUA,EAAM,WAAiB,WAEvCA,EAAM,WAAWA,EAAM,WACpBC,MAAY,UADwB,SACL;AACxC;"}

package/dist/components/inputs/composer/index.d.ts

@@ -0,0 +1,3 @@
+export { Composer } from "./composer";
+export type { ComposerProps, ComposerLayout } from "./composer";
+export type { ComposerSendKey } from "./composerKeys";