@particle-academy/react-fancy 5.43.0 → 5.44.0

package/dist/{chunk-MXAVGOHW.js → chunk-L637KPEA.js}

@@ -1,7 +1,7 @@
-import { useInlinePaste, withSeparators, endsOf, InlinePasteEditor } from './chunk-2JOWGYAJ.js';
+import { useInlinePaste, withSeparators, endsOf, InlinePasteEditor, PastedFilesInput } from './chunk-KYZNCVRD.js';
 import { useControllableState } from './chunk-EDYAXGUM.js';
 import { cn } from './chunk-MMW2JGKZ.js';
-import { forwardRef, useRef, useCallback } from 'react';
+import { forwardRef, useRef, useMemo, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var PREVIEW_CHARS = 20;
@@ -24,7 +24,8 @@ var Composer = forwardRef(
     heldPastes: controlledHeldPastes,
     onHeldPastesChange,
     heldImages: controlledHeldImages,
-    onHeldImagesChange
+    onHeldImagesChange,
+    pasteFilesName
   }, ref) {
     const inline = pastePlacement === "inline";
     const [value, setValue] = useControllableState(
@@ -49,6 +50,10 @@ var Composer = forwardRef(
     });
     const pills = paste.pills;
     const heldPastes = paste.heldPastes;
+    const pastedFiles = useMemo(
+      () => inline && pasteImages ? paste.imagesIn(value).map((i) => i.file) : [],
+      [inline, pasteImages, paste, value]
+    );
     const handlePaste = useCallback(
       (e) => {
         pills.handlePaste(e);
@@ -186,7 +191,8 @@ ${text}` : text);
                 className: classNames?.input
               }
             ),
-            paste.portals
+            paste.portals,
+            pasteImages && pasteFilesName && /* @__PURE__ */ jsx(PastedFilesInput, { name: pasteFilesName, files: pastedFiles })
           ] }) : /* @__PURE__ */ jsx(
             "textarea",
             {
@@ -225,5 +231,5 @@ ${text}` : text);
 Composer.displayName = "Composer";
 
 export { Composer };
-//# sourceMappingURL=chunk-MXAVGOHW.js.map
-//# sourceMappingURL=chunk-MXAVGOHW.js.map
+//# sourceMappingURL=chunk-L637KPEA.js.map
+//# sourceMappingURL=chunk-L637KPEA.js.map

package/dist/chunk-L637KPEA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Composer/Composer.tsx"],"names":["Composer","paste"],"mappings":"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","file":"chunk-L637KPEA.js","sourcesContent":["import { forwardRef, useCallback, useMemo, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport {\n  endsOf,\n  InlinePasteEditor,\n  PastedFilesInput,\n  useInlinePaste,\n  withSeparators,\n  type HeldPaste,\n  type InlinePasteEditorHandle,\n} from \"../PastePills\";\nimport type { ComposerProps } from \"./Composer.types\";\n\n/** Characters of a held paste shown at each end of the hover preview, unless `previewChars` says otherwise. */\nconst PREVIEW_CHARS = 20;\n\nexport const Composer = forwardRef<HTMLDivElement, ComposerProps>(\n  function Composer(\n    {\n      value: controlledValue,\n      defaultValue = \"\",\n      onChange,\n      onSubmit,\n      placeholder = \"Type a message...\",\n      actions,\n      disabled = false,\n      className,\n      pasteThreshold,\n      pastePlacement = \"above\",\n      pasteImages = false,\n      previewChars = PREVIEW_CHARS,\n      renderPastePreview,\n      classNames,\n      heldPastes: controlledHeldPastes,\n      onHeldPastesChange,\n      heldImages: controlledHeldImages,\n      onHeldImagesChange,\n      pasteFilesName,\n    },\n    ref,\n  ) {\n    const inline = pastePlacement === \"inline\";\n    const [value, setValue] = useControllableState(\n      controlledValue,\n      defaultValue,\n      onChange,\n    );\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const editorRef = useRef<InlinePasteEditorHandle>(null);\n    /*\n     * The holding logic lives in `usePastePills`, wrapped by `useInlinePaste` for\n     * the inline placement — which `PromptInput` shares, so the two components\n     * cannot disagree about what a pill means. The rule that must not drift is\n     * the one below: a send with pills still closed carries the text.\n     */\n    const paste = useInlinePaste({\n      pasteThreshold,\n      pasteImages,\n      previewChars,\n      renderPastePreview,\n      classNames,\n      disabled,\n      heldPastes: controlledHeldPastes,\n      onHeldPastesChange,\n      heldImages: controlledHeldImages,\n      onHeldImagesChange,\n      editorRef,\n    });\n    const pills = paste.pills;\n    const heldPastes = paste.heldPastes;\n    const pastedFiles = useMemo(\n      () => (inline && pasteImages ? paste.imagesIn(value).map((i) => i.file) : []),\n      [inline, pasteImages, paste, value],\n    );\n\n    const handlePaste = useCallback(\n      (e: React.ClipboardEvent<HTMLTextAreaElement>) => {\n        // Composable by design, so this reads as a question rather than a handover.\n        // Nothing else here wants the paste, so the answer is simply ignored.\n        pills.handlePaste(e);\n      },\n      [pills],\n    );\n\n    const handleInlineChange = useCallback(\n      (next: string) => {\n        setValue(next);\n        paste.prune(next);\n      },\n      [setValue, paste],\n    );\n\n    /** Everything the person believes they are sending, in the order they built it. */\n    const composeOutgoing = useCallback(() => {\n      if (inline) return paste.expand(value);\n\n      return [value, ...heldPastes.map((p) => p.text)].filter(Boolean).join(\"\\n\\n\");\n    }, [inline, value, heldPastes, paste]);\n\n    const hasContent = value.trim().length > 0 || (!inline && heldPastes.length > 0);\n\n    const focusInput = useCallback(() => {\n      if (inline) editorRef.current?.focus();\n      else textareaRef.current?.focus();\n    }, [inline]);\n\n    const handleSubmit = useCallback(() => {\n      if (!hasContent || disabled) return;\n\n      /*\n       * THE DANGEROUS STATE, and the reason this feature needed a spec rather than\n       * a guess. A pill reads as \"your paste is attached\" — so a send that drops it\n       * means asking a question about a document without the document, and nobody\n       * can tell: the sender believes it went, the receiver sees a question about\n       * nothing.\n       *\n       * Above the input, held pastes go out in arrival order after what was typed,\n       * because people type the question BEFORE pasting the thing it is about.\n       * Inline, every pill goes out exactly where it sits.\n       */\n      const images = inline ? paste.imagesIn(value) : [];\n\n      onSubmit?.(composeOutgoing(), { images });\n      setValue(\"\");\n      paste.clear();\n      focusInput();\n    }, [hasContent, disabled, value, inline, paste, onSubmit, composeOutgoing, setValue, focusInput]);\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === \"Enter\" && !e.shiftKey) {\n        e.preventDefault();\n        handleSubmit();\n      }\n    };\n\n    /** Above the input: click a pill to dump it in, APPENDED to what is already typed. */\n    const insertPaste = useCallback(\n      (held: HeldPaste) => {\n        // `expand` removes it and hands back the text; inserting is this\n        // component's job because the hook owns no DOM.\n        const text = pills.expand(held.id);\n\n        if (text === undefined) return;\n\n        setValue((current) => (current ? `${current}\\n\\n${text}` : text));\n        textareaRef.current?.focus();\n      },\n      [pills, setValue],\n    );\n\n    return (\n      <div\n        data-react-fancy-composer=\"\"\n        ref={ref}\n        className={cn(\n          \"rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900\",\n          disabled && \"opacity-50\",\n          className,\n        )}\n      >\n        {!inline && heldPastes.length > 0 && (\n          <div\n            data-react-fancy-composer-paste-pills=\"\"\n            className=\"flex flex-wrap gap-1.5 px-3 pt-3\"\n          >\n            {heldPastes.map((paste) => (\n              // `group` + `group-hover` rather than hover state: the preview is\n              // presentation, and a useState for it would be one more thing an\n              // agent could desynchronise.\n              <span key={paste.id} className=\"group relative inline-flex\">\n                <button\n                  type=\"button\"\n                  data-react-fancy-composer-paste-pill={paste.id}\n                  onClick={() => insertPaste(paste)}\n                  disabled={disabled}\n                  // No `title`. A native tooltip plus the hover preview below\n                  // renders TWO tooltips on the same hover, at different delays.\n                  // The label says what clicking does; the preview says what the\n                  // text is, and it is linked rather than merely adjacent so a\n                  // screen reader reaches it too.\n                  aria-label={`Insert this pasted text, ${withSeparators(paste.text.length)} characters`}\n                  aria-describedby={`${paste.id}-preview`}\n                  // `pr-7` leaves room for the absolutely-positioned × that sits\n                  // over this button's right edge. With a smaller right padding the\n                  // × lands on top of the label.\n                  className={cn(\n                    \"inline-flex items-center gap-1.5 rounded-full border border-zinc-200 bg-zinc-50 py-1 pl-2.5 pr-7 text-xs text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700\",\n                    classNames?.pill,\n                    classNames?.textPill,\n                  )}\n                >\n                  <span>\n                    Pasted text · {withSeparators(paste.text.length)} characters\n                  </span>\n                </button>\n\n                <button\n                  type=\"button\"\n                  data-react-fancy-composer-paste-pill-remove={paste.id}\n                  onClick={() => pills.remove(paste.id)}\n                  disabled={disabled}\n                  aria-label=\"Discard this pasted text\"\n                  className={cn(\n                    \"absolute right-1 top-1/2 -translate-y-1/2 rounded-full px-1 text-xs text-zinc-400 transition-colors hover:text-zinc-700 dark:hover:text-zinc-100\",\n                    classNames?.remove,\n                  )}\n                >\n                  ×\n                </button>\n\n                <span\n                  id={`${paste.id}-preview`}\n                  data-react-fancy-composer-paste-pill-preview={paste.id}\n                  role=\"tooltip\"\n                  className={cn(\n                    \"pointer-events-none absolute bottom-full left-0 z-10 mb-1 hidden max-w-xs whitespace-pre-wrap break-all rounded-md bg-zinc-900 px-2 py-1 text-xs text-white group-hover:block dark:bg-zinc-100 dark:text-zinc-900\",\n                    classNames?.preview,\n                  )}\n                >\n                  {renderPastePreview?.({ kind: \"text\", paste }) ??\n                    endsOf(paste.text, previewChars)}\n                </span>\n              </span>\n            ))}\n          </div>\n        )}\n\n        {inline ? (\n          <>\n            <InlinePasteEditor\n              ref={editorRef}\n              value={value}\n              known={paste.known}\n              onChange={handleInlineChange}\n              onSubmit={handleSubmit}\n              onPaste={paste.decidePaste}\n              onHostsChange={paste.onHostsChange}\n              placeholder={placeholder}\n              disabled={disabled}\n              className={classNames?.input}\n            />\n            {paste.portals}\n            {pasteImages && pasteFilesName && (\n              <PastedFilesInput name={pasteFilesName} files={pastedFiles} />\n            )}\n          </>\n        ) : (\n          <textarea\n            ref={textareaRef}\n            value={value}\n            onChange={(e) => setValue(e.target.value)}\n            onKeyDown={handleKeyDown}\n            onPaste={handlePaste}\n            placeholder={placeholder}\n            disabled={disabled}\n            rows={3}\n            className={cn(\n              \"w-full resize-none bg-transparent px-4 pt-3 text-sm outline-none placeholder:text-zinc-400\",\n              classNames?.input,\n            )}\n          />\n        )}\n        <div className=\"flex items-center justify-between border-t border-zinc-100 px-3 py-2 dark:border-zinc-800\">\n          <div className=\"flex items-center gap-1\">{actions}</div>\n          <button\n            type=\"button\"\n            onClick={handleSubmit}\n            disabled={disabled || !hasContent}\n            className=\"rounded-lg bg-zinc-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-zinc-800 disabled:opacity-50 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-100\"\n          >\n            Send\n          </button>\n        </div>\n      </div>\n    );\n  },\n);\n\nComposer.displayName = \"Composer\";\n"]}

package/dist/{chunk-6TZPM43Q.cjs → chunk-MSRYJETY.cjs}

@@ -4,37 +4,9 @@ var chunkX7H75WVP_cjs = require('./chunk-X7H75WVP.cjs');
 var chunkSNHU2AI4_cjs = require('./chunk-SNHU2AI4.cjs');
 var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
 var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
 
-// src/components/Composer/paste-markers.ts
-var PILL_MARK = "\uFFFC";
-var MARKER = /\uFFFC([^\uFFFC\n]+)\uFFFC/g;
-function pasteMarker(id) {
-  return `${PILL_MARK}${id}${PILL_MARK}`;
-}
-function segmentValue(value, known) {
-  const out = [];
-  let last = 0;
-  for (const match of value.matchAll(MARKER)) {
-    const id = match[1];
-    if (!known.has(id)) continue;
-    const start = match.index ?? 0;
-    if (start > last) out.push({ type: "text", text: value.slice(last, start) });
-    out.push({ type: "pill", id });
-    last = start + match[0].length;
-  }
-  if (last < value.length) out.push({ type: "text", text: value.slice(last) });
-  return out;
-}
-function markedIds(value) {
-  return Array.from(value.matchAll(MARKER), (m) => m[1]);
-}
-function expandMarkers(value, pastes, images) {
-  const text = new Map(pastes.map((p) => [p.id, p.text]));
-  const image = new Map(images.map((i) => [i.id, `[${i.label}]`]));
-  return value.replace(MARKER, (whole, id) => text.get(id) ?? image.get(id) ?? whole);
-}
 function usePastePills({
   threshold,
   heldPastes: controlledHeldPastes,
@@ -147,6 +119,169 @@ function InlinePill({
     }
   ) });
 }
+
+// src/components/PastePills/paste-markers.ts
+var PILL_MARK = "\uFFFC";
+var MARKER = /\uFFFC([^\uFFFC\n]+)\uFFFC/g;
+function pasteMarker(id) {
+  return `${PILL_MARK}${id}${PILL_MARK}`;
+}
+function segmentValue(value, known) {
+  const out = [];
+  let last = 0;
+  for (const match of value.matchAll(MARKER)) {
+    const id = match[1];
+    if (!known.has(id)) continue;
+    const start = match.index ?? 0;
+    if (start > last) out.push({ type: "text", text: value.slice(last, start) });
+    out.push({ type: "pill", id });
+    last = start + match[0].length;
+  }
+  if (last < value.length) out.push({ type: "text", text: value.slice(last) });
+  return out;
+}
+function markedIds(value) {
+  return Array.from(value.matchAll(MARKER), (m) => m[1]);
+}
+function expandMarkers(value, pastes, images) {
+  const text = new Map(pastes.map((p) => [p.id, p.text]));
+  const image = new Map(images.map((i) => [i.id, `[${i.label}]`]));
+  return value.replace(MARKER, (whole, id) => text.get(id) ?? image.get(id) ?? whole);
+}
+function useInlinePaste({
+  pasteThreshold,
+  pasteImages = false,
+  previewChars,
+  renderPastePreview,
+  classNames,
+  disabled,
+  heldPastes: controlledHeldPastes,
+  onHeldPastesChange,
+  heldImages: controlledHeldImages,
+  onHeldImagesChange,
+  editorRef,
+  blockText = true
+}) {
+  const pills = usePastePills({
+    threshold: pasteThreshold,
+    heldPastes: controlledHeldPastes,
+    onHeldPastesChange
+  });
+  const heldPastes = pills.heldPastes;
+  const [heldImages, setHeldImages] = chunkSNHU2AI4_cjs.useControllableState(
+    controlledHeldImages,
+    [],
+    onHeldImagesChange
+  );
+  const imageCount = react.useRef(0);
+  const known = react.useMemo(
+    () => /* @__PURE__ */ new Set([...heldPastes.map((p) => p.id), ...heldImages.map((i) => i.id)]),
+    [heldPastes, heldImages]
+  );
+  const holdImage = react.useCallback(
+    (file) => {
+      let id;
+      do {
+        imageCount.current += 1;
+        id = `image-${imageCount.current}`;
+      } while (heldImages.some((i) => i.id === id));
+      const image = { id, file, label: `Pasted image ${imageCount.current}` };
+      setHeldImages((current) => [...current, image]);
+      return id;
+    },
+    [heldImages, setHeldImages]
+  );
+  const decidePaste = react.useCallback(
+    (data) => {
+      const text = data?.getData("text/plain") ?? "";
+      if (pasteImages && text === "") {
+        const files = Array.from(data?.files ?? []).filter(
+          (f) => f.type.startsWith("image/")
+        );
+        if (files.length > 0) {
+          return files.map((file) => ({ id: holdImage(file), block: false }));
+        }
+      }
+      if (pasteThreshold && pasteThreshold > 0 && text.length >= pasteThreshold) {
+        return [{ id: pills.hold(text), block: blockText }];
+      }
+      return null;
+    },
+    [pasteImages, pasteThreshold, holdImage, pills, blockText]
+  );
+  const prune = react.useCallback(
+    (next) => {
+      const present = new Set(markedIds(next));
+      for (const paste of heldPastes) if (!present.has(paste.id)) pills.remove(paste.id);
+      if (heldImages.some((i) => !present.has(i.id))) {
+        setHeldImages((current) => current.filter((i) => present.has(i.id)));
+      }
+    },
+    [heldPastes, heldImages, pills, setHeldImages]
+  );
+  const [hosts, setHosts] = react.useState(/* @__PURE__ */ new Map());
+  const onHostsChange = react.useCallback((next) => {
+    setHosts((prev) => {
+      if (prev.size === next.size && [...next].every(([id, el]) => prev.get(id) === el)) {
+        return prev;
+      }
+      return next;
+    });
+  }, []);
+  const expandPill = react.useCallback(
+    (id) => {
+      const text = pills.expand(id);
+      if (text === void 0) return;
+      editorRef.current?.replacePill(id, text);
+    },
+    [pills, editorRef]
+  );
+  const expand = react.useCallback(
+    (value) => expandMarkers(value, heldPastes, heldImages),
+    [heldPastes, heldImages]
+  );
+  const imagesIn = react.useCallback(
+    (value) => markedIds(value).flatMap((id) => heldImages.filter((i) => i.id === id)),
+    [heldImages]
+  );
+  const clear = react.useCallback(() => {
+    pills.clear();
+    setHeldImages([]);
+  }, [pills, setHeldImages]);
+  const portals = Array.from(hosts, ([id, host]) => {
+    const paste = heldPastes.find((p) => p.id === id);
+    const image = paste ? void 0 : heldImages.find((i) => i.id === id);
+    const preview = paste ? { kind: "text", paste } : image ? { kind: "image", image } : null;
+    return preview ? reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InlinePill,
+        {
+          preview,
+          previewChars,
+          renderPastePreview,
+          classNames,
+          disabled,
+          onExpand: expandPill
+        }
+      ),
+      host,
+      id
+    ) : null;
+  });
+  return {
+    pills,
+    heldPastes,
+    heldImages,
+    known,
+    decidePaste,
+    prune,
+    onHostsChange,
+    expand,
+    imagesIn,
+    clear,
+    portals
+  };
+}
 var HOST_ATTR = "data-react-fancy-composer-paste-host";
 function serialize(parent, keep) {
   let out = "";
@@ -247,7 +382,12 @@ var InlinePasteEditor = react.forwardRef(
     submitKey = "enter",
     onKeyDown,
     placeholderClassName,
-    maxHeight
+    maxHeight,
+    multiline = true,
+    id,
+    ariaLabelledBy,
+    ariaInvalid,
+    style
   }, ref) {
     const rootRef = react.useRef(null);
     const lastValue = react.useRef(null);
@@ -255,7 +395,7 @@ var InlinePasteEditor = react.forwardRef(
     const knownRef = react.useRef(known);
     knownRef.current = known;
     const keep = react.useCallback(
-      (id) => knownRef.current.has(id) || pending.current.has(id),
+      (id2) => knownRef.current.has(id2) || pending.current.has(id2),
       []
     );
     const reportHosts = react.useCallback(() => {
@@ -263,8 +403,8 @@ var InlinePasteEditor = react.forwardRef(
       if (!root) return;
       const hosts = /* @__PURE__ */ new Map();
       root.querySelectorAll(`[${HOST_ATTR}]`).forEach((el) => {
-        const id = el.getAttribute(HOST_ATTR);
-        if (keep(id)) hosts.set(id, el);
+        const id2 = el.getAttribute(HOST_ATTR);
+        if (keep(id2)) hosts.set(id2, el);
       });
       onHostsChange(hosts);
     }, [keep, onHostsChange]);
@@ -357,9 +497,9 @@ var InlinePasteEditor = react.forwardRef(
     react.useLayoutEffect(() => {
       const root = rootRef.current;
       if (!root) return;
-      for (const id of pending.current) if (known.has(id)) pending.current.delete(id);
+      for (const id2 of pending.current) if (known.has(id2)) pending.current.delete(id2);
       const wanted = segmentValue(value, known).flatMap((s) => s.type === "pill" ? [s.id] : []).join(PILL_MARK);
-      const onScreen = Array.from(root.querySelectorAll(`[${HOST_ATTR}]`)).map((el) => el.getAttribute(HOST_ATTR)).filter((id) => id !== null && keep(id)).join(PILL_MARK);
+      const onScreen = Array.from(root.querySelectorAll(`[${HOST_ATTR}]`)).map((el) => el.getAttribute(HOST_ATTR)).filter((id2) => id2 !== null && keep(id2)).join(PILL_MARK);
       if (value === lastValue.current && wanted === onScreen) return;
       render(value);
     }, [value, known, keep, render]);
@@ -375,11 +515,11 @@ var InlinePasteEditor = react.forwardRef(
           selection?.removeAllRanges();
           selection?.addRange(range);
         },
-        replacePill(id, text) {
+        replacePill(id2, text) {
           const root = rootRef.current;
           const host = Array.from(
             root?.querySelectorAll(`[${HOST_ATTR}]`) ?? []
-          ).find((el) => el.getAttribute(HOST_ATTR) === id);
+          ).find((el) => el.getAttribute(HOST_ATTR) === id2);
           if (!root || !host) return;
           const node = document.createTextNode(text);
           host.replaceWith(node);
@@ -403,20 +543,21 @@ var InlinePasteEditor = react.forwardRef(
       if (disabled) return;
       const pills = onPaste(e.clipboardData);
       if (pills === null) {
-        insertText((e.clipboardData?.getData("text/plain") ?? "").replace(/\r\n?/g, "\n"));
+        const text = (e.clipboardData?.getData("text/plain") ?? "").replace(/\r\n?/g, "\n");
+        insertText(multiline ? text : text.replace(/\n+/g, " "));
         return;
       }
-      for (const { id } of pills) pending.current.add(id);
+      for (const { id: id2 } of pills) pending.current.add(id2);
       insert((before, after) => {
         const nodes = [];
-        for (const { id, block } of pills) {
+        for (const { id: id2, block } of pills) {
           if (block) {
             const precededByBreak = nodes.length === 0 ? before === "" || before.endsWith("\n") : nodes[nodes.length - 1].textContent === "\n";
             if (!precededByBreak) nodes.push(document.createTextNode("\n"));
-            nodes.push(makeHost(id));
+            nodes.push(makeHost(id2));
             nodes.push(document.createTextNode("\n"));
           } else {
-            nodes.push(makeHost(id));
+            nodes.push(makeHost(id2));
           }
         }
         const last = nodes[nodes.length - 1];
@@ -429,7 +570,7 @@ var InlinePasteEditor = react.forwardRef(
       if (e.defaultPrevented) return;
       if (e.key !== "Enter" || e.nativeEvent.isComposing) return;
       e.preventDefault();
-      const sends = submitKey === "mod-enter" ? e.ctrlKey || e.metaKey : !e.shiftKey;
+      const sends = !multiline || (submitKey === "mod-enter" ? e.ctrlKey || e.metaKey : !e.shiftKey);
       if (sends) {
         onSubmit();
       } else {
@@ -452,9 +593,12 @@ var InlinePasteEditor = react.forwardRef(
         "div",
         {
           ref: rootRef,
+          id,
           "data-react-fancy-composer-input": "",
           role: "textbox",
-          "aria-multiline": "true",
+          "aria-multiline": multiline,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-invalid": ariaInvalid || void 0,
           "aria-placeholder": placeholder,
           "aria-disabled": disabled || void 0,
           contentEditable: !disabled,
@@ -462,7 +606,7 @@ var InlinePasteEditor = react.forwardRef(
           onInput: emit,
           onPaste: handlePaste,
           onKeyDown: handleKeyDown,
-          style: maxHeight === void 0 ? void 0 : { maxHeight },
+          style: maxHeight === void 0 ? style : { ...style, maxHeight },
           className: chunkZU5Q77OT_cjs.cn(
             "max-h-72 min-h-[4.5rem] w-full overflow-y-auto whitespace-pre-wrap break-words bg-transparent px-4 pt-3 text-sm outline-none",
             className
@@ -472,145 +616,42 @@ var InlinePasteEditor = react.forwardRef(
     ] });
   }
 );
-function useInlinePaste({
-  pasteThreshold,
-  pasteImages = false,
-  previewChars,
-  renderPastePreview,
-  classNames,
-  disabled,
-  heldPastes: controlledHeldPastes,
-  onHeldPastesChange,
-  heldImages: controlledHeldImages,
-  onHeldImagesChange,
-  editorRef
-}) {
-  const pills = usePastePills({
-    threshold: pasteThreshold,
-    heldPastes: controlledHeldPastes,
-    onHeldPastesChange
-  });
-  const heldPastes = pills.heldPastes;
-  const [heldImages, setHeldImages] = chunkSNHU2AI4_cjs.useControllableState(
-    controlledHeldImages,
-    [],
-    onHeldImagesChange
-  );
-  const imageCount = react.useRef(0);
-  const known = react.useMemo(
-    () => /* @__PURE__ */ new Set([...heldPastes.map((p) => p.id), ...heldImages.map((i) => i.id)]),
-    [heldPastes, heldImages]
-  );
-  const holdImage = react.useCallback(
-    (file) => {
-      let id;
-      do {
-        imageCount.current += 1;
-        id = `image-${imageCount.current}`;
-      } while (heldImages.some((i) => i.id === id));
-      const image = { id, file, label: `Pasted image ${imageCount.current}` };
-      setHeldImages((current) => [...current, image]);
-      return id;
-    },
-    [heldImages, setHeldImages]
-  );
-  const decidePaste = react.useCallback(
-    (data) => {
-      const text = data?.getData("text/plain") ?? "";
-      if (pasteImages && text === "") {
-        const files = Array.from(data?.files ?? []).filter(
-          (f) => f.type.startsWith("image/")
-        );
-        if (files.length > 0) {
-          return files.map((file) => ({ id: holdImage(file), block: false }));
-        }
-      }
-      if (pasteThreshold && pasteThreshold > 0 && text.length >= pasteThreshold) {
-        return [{ id: pills.hold(text), block: true }];
-      }
-      return null;
-    },
-    [pasteImages, pasteThreshold, holdImage, pills]
-  );
-  const prune = react.useCallback(
-    (next) => {
-      const present = new Set(markedIds(next));
-      for (const paste of heldPastes) if (!present.has(paste.id)) pills.remove(paste.id);
-      if (heldImages.some((i) => !present.has(i.id))) {
-        setHeldImages((current) => current.filter((i) => present.has(i.id)));
-      }
-    },
-    [heldPastes, heldImages, pills, setHeldImages]
-  );
-  const [hosts, setHosts] = react.useState(/* @__PURE__ */ new Map());
-  const onHostsChange = react.useCallback((next) => {
-    setHosts((prev) => {
-      if (prev.size === next.size && [...next].every(([id, el]) => prev.get(id) === el)) {
-        return prev;
-      }
-      return next;
-    });
-  }, []);
-  const expandPill = react.useCallback(
-    (id) => {
-      const text = pills.expand(id);
-      if (text === void 0) return;
-      editorRef.current?.replacePill(id, text);
-    },
-    [pills, editorRef]
-  );
-  const expand = react.useCallback(
-    (value) => expandMarkers(value, heldPastes, heldImages),
-    [heldPastes, heldImages]
-  );
-  const imagesIn = react.useCallback(
-    (value) => markedIds(value).flatMap((id) => heldImages.filter((i) => i.id === id)),
-    [heldImages]
+function PastedFilesInput({ name, files, form }) {
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof DataTransfer === "undefined") return;
+    const transfer = new DataTransfer();
+    for (const file of files) transfer.items.add(file);
+    el.files = transfer.files;
+  }, [files]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref,
+      type: "file",
+      name,
+      form,
+      multiple: true,
+      hidden: true,
+      tabIndex: -1,
+      "data-react-fancy-pasted-files": name
+    }
   );
-  const clear = react.useCallback(() => {
-    pills.clear();
-    setHeldImages([]);
-  }, [pills, setHeldImages]);
-  const portals = Array.from(hosts, ([id, host]) => {
-    const paste = heldPastes.find((p) => p.id === id);
-    const image = paste ? void 0 : heldImages.find((i) => i.id === id);
-    const preview = paste ? { kind: "text", paste } : image ? { kind: "image", image } : null;
-    return preview ? reactDom.createPortal(
-      /* @__PURE__ */ jsxRuntime.jsx(
-        InlinePill,
-        {
-          preview,
-          previewChars,
-          renderPastePreview,
-          classNames,
-          disabled,
-          onExpand: expandPill
-        }
-      ),
-      host,
-      id
-    ) : null;
-  });
-  return {
-    pills,
-    heldPastes,
-    heldImages,
-    known,
-    decidePaste,
-    prune,
-    onHostsChange,
-    expand,
-    imagesIn,
-    clear,
-    portals
-  };
 }
 
+exports.HOST_ATTR = HOST_ATTR;
 exports.InlinePasteEditor = InlinePasteEditor;
+exports.InlinePill = InlinePill;
+exports.PILL_MARK = PILL_MARK;
+exports.PastedFilesInput = PastedFilesInput;
 exports.endsOf = endsOf;
+exports.expandMarkers = expandMarkers;
+exports.markedIds = markedIds;
 exports.pasteMarker = pasteMarker;
+exports.segmentValue = segmentValue;
 exports.useInlinePaste = useInlinePaste;
 exports.usePastePills = usePastePills;
 exports.withSeparators = withSeparators;
-//# sourceMappingURL=chunk-6TZPM43Q.cjs.map
-//# sourceMappingURL=chunk-6TZPM43Q.cjs.map
+//# sourceMappingURL=chunk-MSRYJETY.cjs.map
+//# sourceMappingURL=chunk-MSRYJETY.cjs.map