@particle-academy/react-fancy 5.38.0 → 5.39.0

package/dist/{chunk-Z4GO6N6N.js → chunk-2JOWGYAJ.js}

@@ -2,9 +2,37 @@ import { Tooltip } from './chunk-CF5KRDN4.js';
 import { useControllableState } from './chunk-EDYAXGUM.js';
 import { cn } from './chunk-MMW2JGKZ.js';
 import { forwardRef, useRef, useCallback, useLayoutEffect, useImperativeHandle, useMemo, useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
-import { jsxs, jsx, Fragment } from '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,
@@ -55,34 +83,67 @@ function usePastePills({
   const clear = useCallback(() => setHeldPastes([]), [setHeldPastes]);
   return { heldPastes, handlePaste, hold, expand, remove, clear };
 }
-
-// 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 withSeparators(n) {
+  return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }
-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 endsOf(text, chars) {
+  if (text.length <= chars * 2) return text;
+  return `${text.slice(0, chars)} \u2026 ${text.slice(-chars)}`;
 }
-function markedIds(value) {
-  return Array.from(value.matchAll(MARKER), (m) => m[1]);
+var PILL_BASE = "inline-flex select-none items-center rounded-md px-2 py-0.5 text-xs leading-5 transition-colors";
+var TEXT_PILL = "cursor-pointer bg-zinc-100 text-zinc-700 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700";
+var IMAGE_PILL = "bg-rose-100 font-medium text-rose-600 dark:bg-rose-500/20 dark:text-rose-300";
+var PREVIEW_BASE = "max-w-xs whitespace-pre-wrap break-all text-xs";
+function ImageThumb({ file }) {
+  const [url, setUrl] = useState(null);
+  useEffect(() => {
+    if (typeof URL.createObjectURL !== "function") return;
+    const made = URL.createObjectURL(file);
+    setUrl(made);
+    return () => URL.revokeObjectURL(made);
+  }, [file]);
+  return url ? /* @__PURE__ */ jsx("img", { src: url, alt: "", className: "max-h-40 max-w-[16rem] rounded" }) : /* @__PURE__ */ jsx("span", { children: file.name });
 }
-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 InlinePill({
+  preview,
+  previewChars,
+  renderPastePreview,
+  classNames,
+  disabled,
+  onExpand
+}) {
+  const id = preview.kind === "text" ? preview.paste.id : preview.image.id;
+  const content = /* @__PURE__ */ jsx("span", { "data-react-fancy-composer-paste-pill-preview": id, children: renderPastePreview?.(preview) ?? (preview.kind === "text" ? endsOf(preview.paste.text, previewChars) : /* @__PURE__ */ jsx(ImageThumb, { file: preview.image.file })) });
+  const tooltipClass = cn(PREVIEW_BASE, classNames?.preview);
+  if (preview.kind === "image") {
+    return /* @__PURE__ */ jsx(Tooltip, { content, className: tooltipClass, children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-react-fancy-composer-image-pill": id,
+        role: "img",
+        "aria-label": preview.image.label,
+        className: cn(PILL_BASE, IMAGE_PILL, classNames?.pill, classNames?.imagePill),
+        children: preview.image.label
+      }
+    ) });
+  }
+  const count = withSeparators(preview.paste.text.length);
+  return /* @__PURE__ */ jsx(Tooltip, { content, className: tooltipClass, children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-react-fancy-composer-paste-pill": id,
+      onClick: () => onExpand(id),
+      disabled,
+      "aria-label": `Insert this pasted text, ${count} characters`,
+      className: cn(PILL_BASE, TEXT_PILL, classNames?.pill, classNames?.textPill),
+      children: [
+        "Pasted text \xB7 ",
+        count,
+        " characters"
+      ]
+    }
+  ) });
 }
 var HOST_ATTR = "data-react-fancy-composer-paste-host";
 function serialize(parent, keep) {
@@ -132,8 +193,60 @@ function placeCaretAfter(node) {
   selection.removeAllRanges();
   selection.addRange(range);
 }
+function placeCaretAtOffset(root, offset, keep) {
+  const selection = window.getSelection();
+  if (!selection) return;
+  const range = document.createRange();
+  let remaining = offset;
+  let placed = false;
+  for (const node of Array.from(root.childNodes)) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const length = node.textContent?.length ?? 0;
+      if (remaining <= length) {
+        range.setStart(node, remaining);
+        placed = true;
+        break;
+      }
+      remaining -= length;
+      continue;
+    }
+    const id = node instanceof HTMLElement ? node.getAttribute(HOST_ATTR) : null;
+    if (id !== null && keep(id)) {
+      const length = pasteMarker(id).length;
+      if (remaining < length) {
+        range.setStartAfter(node);
+        placed = true;
+        break;
+      }
+      remaining -= length;
+    }
+  }
+  if (!placed) {
+    range.selectNodeContents(root);
+    range.collapse(false);
+    const last = root.lastChild;
+    if (last instanceof HTMLElement && last.tagName === "BR") range.setStartBefore(last);
+  }
+  range.collapse(true);
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
 var InlinePasteEditor = forwardRef(
-  function InlinePasteEditor2({ value, known, onChange, onSubmit, onPaste, onHostsChange, placeholder, disabled, className }, ref) {
+  function InlinePasteEditor2({
+    value,
+    known,
+    onChange,
+    onSubmit,
+    onPaste,
+    onHostsChange,
+    placeholder,
+    disabled,
+    className,
+    submitKey = "enter",
+    onKeyDown,
+    placeholderClassName,
+    maxHeight
+  }, ref) {
     const rootRef = useRef(null);
     const lastValue = useRef(null);
     const pending = useRef(/* @__PURE__ */ new Set());
@@ -153,17 +266,47 @@ var InlinePasteEditor = forwardRef(
       });
       onHostsChange(hosts);
     }, [keep, onHostsChange]);
+    const caretOffset = useCallback(
+      (whole) => {
+        const root = rootRef.current;
+        const selection = window.getSelection();
+        if (!root || !selection || selection.rangeCount === 0) return whole.length;
+        const range = selection.getRangeAt(0);
+        if (!root.contains(range.endContainer)) return whole.length;
+        const head = document.createRange();
+        head.selectNodeContents(root);
+        head.setEnd(range.endContainer, range.endOffset);
+        return serialize(head.cloneContents(), keep).length;
+      },
+      [keep]
+    );
     const emit = useCallback(() => {
       const root = rootRef.current;
       if (!root) return;
       const next = serialize(root, keep);
       ensureTrailingBreak(root, next);
       reportHosts();
-      if (next !== lastValue.current) {
+      lastValue.current = next;
+      onChange(next, caretOffset(next));
+    }, [keep, onChange, reportHosts, caretOffset]);
+    const render = useCallback(
+      (next) => {
+        const root = rootRef.current;
+        if (!root) return;
+        root.replaceChildren();
+        for (const segment of segmentValue(next, knownRef.current)) {
+          if (segment.type === "text") {
+            root.append(document.createTextNode(segment.text));
+          } else {
+            root.append(makeHost(segment.id));
+          }
+        }
+        ensureTrailingBreak(root, next);
         lastValue.current = next;
-        onChange(next);
-      }
-    }, [keep, onChange, reportHosts]);
+        reportHosts();
+      },
+      [reportHosts]
+    );
     const caret = useCallback(() => {
       const root = rootRef.current;
       const selection = window.getSelection();
@@ -216,18 +359,8 @@ var InlinePasteEditor = forwardRef(
       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);
       if (value === lastValue.current && wanted === onScreen) return;
-      root.replaceChildren();
-      for (const segment of segmentValue(value, known)) {
-        if (segment.type === "text") {
-          root.append(document.createTextNode(segment.text));
-        } else {
-          root.append(makeHost(segment.id));
-        }
-      }
-      ensureTrailingBreak(root, value);
-      lastValue.current = value;
-      reportHosts();
-    }, [value, known, keep, reportHosts]);
+      render(value);
+    }, [value, known, keep, render]);
     useImperativeHandle(
       ref,
       () => ({
@@ -251,9 +384,17 @@ var InlinePasteEditor = forwardRef(
           root.focus();
           placeCaretAfter(node);
           emit();
+        },
+        setValue(next, offset) {
+          const root = rootRef.current;
+          if (!root) return;
+          render(next);
+          root.focus();
+          placeCaretAtOffset(root, offset, keep);
+          emit();
         }
       }),
-      [caret, emit]
+      [caret, emit, render, keep]
     );
     const handlePaste = (e) => {
       e.preventDefault();
@@ -282,12 +423,15 @@ var InlinePasteEditor = forwardRef(
       });
     };
     const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented) return;
       if (e.key !== "Enter" || e.nativeEvent.isComposing) return;
       e.preventDefault();
-      if (e.shiftKey) {
-        insertText("\n");
-      } else {
+      const sends = submitKey === "mod-enter" ? e.ctrlKey || e.metaKey : !e.shiftKey;
+      if (sends) {
         onSubmit();
+      } else {
+        insertText("\n");
       }
     };
     return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
@@ -295,7 +439,10 @@ var InlinePasteEditor = forwardRef(
         "span",
         {
           "aria-hidden": "true",
-          className: "pointer-events-none absolute left-4 top-3 text-sm text-zinc-400",
+          className: cn(
+            "pointer-events-none absolute left-4 top-3 text-sm text-zinc-400",
+            placeholderClassName
+          ),
           children: placeholder
         }
       ),
@@ -313,6 +460,7 @@ var InlinePasteEditor = forwardRef(
           onInput: emit,
           onPaste: handlePaste,
           onKeyDown: handleKeyDown,
+          style: maxHeight === void 0 ? void 0 : { maxHeight },
           className: 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
@@ -322,374 +470,140 @@ var InlinePasteEditor = forwardRef(
     ] });
   }
 );
-var PREVIEW_CHARS = 20;
-function withSeparators(n) {
-  return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-}
-function endsOf(text, chars) {
-  if (text.length <= chars * 2) return text;
-  return `${text.slice(0, chars)} \u2026 ${text.slice(-chars)}`;
-}
-var PILL_BASE = "inline-flex select-none items-center rounded-md px-2 py-0.5 text-xs leading-5 transition-colors";
-var TEXT_PILL = "cursor-pointer bg-zinc-100 text-zinc-700 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700";
-var IMAGE_PILL = "bg-rose-100 font-medium text-rose-600 dark:bg-rose-500/20 dark:text-rose-300";
-var PREVIEW_BASE = "max-w-xs whitespace-pre-wrap break-all text-xs";
-function ImageThumb({ file }) {
-  const [url, setUrl] = useState(null);
-  useEffect(() => {
-    if (typeof URL.createObjectURL !== "function") return;
-    const made = URL.createObjectURL(file);
-    setUrl(made);
-    return () => URL.revokeObjectURL(made);
-  }, [file]);
-  return url ? /* @__PURE__ */ jsx("img", { src: url, alt: "", className: "max-h-40 max-w-[16rem] rounded" }) : /* @__PURE__ */ jsx("span", { children: file.name });
-}
-function InlinePill({
-  preview,
+function useInlinePaste({
+  pasteThreshold,
+  pasteImages = false,
   previewChars,
   renderPastePreview,
   classNames,
   disabled,
-  onExpand
+  heldPastes: controlledHeldPastes,
+  onHeldPastesChange,
+  heldImages: controlledHeldImages,
+  onHeldImagesChange,
+  editorRef
 }) {
-  const id = preview.kind === "text" ? preview.paste.id : preview.image.id;
-  const content = /* @__PURE__ */ jsx("span", { "data-react-fancy-composer-paste-pill-preview": id, children: renderPastePreview?.(preview) ?? (preview.kind === "text" ? endsOf(preview.paste.text, previewChars) : /* @__PURE__ */ jsx(ImageThumb, { file: preview.image.file })) });
-  const tooltipClass = cn(PREVIEW_BASE, classNames?.preview);
-  if (preview.kind === "image") {
-    return /* @__PURE__ */ jsx(Tooltip, { content, className: tooltipClass, children: /* @__PURE__ */ jsx(
-      "span",
-      {
-        "data-react-fancy-composer-image-pill": id,
-        role: "img",
-        "aria-label": preview.image.label,
-        className: cn(PILL_BASE, IMAGE_PILL, classNames?.pill, classNames?.imagePill),
-        children: preview.image.label
-      }
-    ) });
-  }
-  const count = withSeparators(preview.paste.text.length);
-  return /* @__PURE__ */ jsx(Tooltip, { content, className: tooltipClass, children: /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      "data-react-fancy-composer-paste-pill": id,
-      onClick: () => onExpand(id),
-      disabled,
-      "aria-label": `Insert this pasted text, ${count} characters`,
-      className: cn(PILL_BASE, TEXT_PILL, classNames?.pill, classNames?.textPill),
-      children: [
-        "Pasted text \xB7 ",
-        count,
-        " characters"
-      ]
-    }
-  ) });
-}
-var Composer = forwardRef(
-  function Composer2({
-    value: controlledValue,
-    defaultValue = "",
-    onChange,
-    onSubmit,
-    placeholder = "Type a message...",
-    actions,
-    disabled = false,
-    className,
-    pasteThreshold,
-    pastePlacement = "above",
-    pasteImages = false,
-    previewChars = PREVIEW_CHARS,
-    renderPastePreview,
-    classNames,
+  const pills = usePastePills({
+    threshold: pasteThreshold,
     heldPastes: controlledHeldPastes,
-    onHeldPastesChange,
-    heldImages: controlledHeldImages,
+    onHeldPastesChange
+  });
+  const heldPastes = pills.heldPastes;
+  const [heldImages, setHeldImages] = useControllableState(
+    controlledHeldImages,
+    [],
     onHeldImagesChange
-  }, ref) {
-    const inline = pastePlacement === "inline";
-    const [value, setValue] = useControllableState(
-      controlledValue,
-      defaultValue,
-      onChange
-    );
-    const pills = usePastePills({
-      threshold: pasteThreshold,
-      heldPastes: controlledHeldPastes,
-      onHeldPastesChange
-    });
-    const heldPastes = pills.heldPastes;
-    const [heldImages, setHeldImages] = useControllableState(
-      controlledHeldImages,
-      [],
-      onHeldImagesChange
-    );
-    const textareaRef = useRef(null);
-    const editorRef = useRef(null);
-    const imageCount = useRef(0);
-    const known = useMemo(
-      () => /* @__PURE__ */ new Set([...heldPastes.map((p) => p.id), ...heldImages.map((i) => i.id)]),
-      [heldPastes, heldImages]
-    );
-    const handlePaste = useCallback(
-      (e) => {
-        pills.handlePaste(e);
-      },
-      [pills]
-    );
-    const holdImage = 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 = 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 handleInlineChange = useCallback(
-      (next) => {
-        setValue(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)));
-        }
-      },
-      [setValue, heldPastes, heldImages, pills, setHeldImages]
-    );
-    const [hosts, setHosts] = useState(/* @__PURE__ */ new Map());
-    const handleHostsChange = useCallback((next) => {
-      setHosts((prev) => {
-        if (prev.size === next.size && [...next].every(([id, el]) => prev.get(id) === el)) {
-          return prev;
+  );
+  const imageCount = useRef(0);
+  const known = useMemo(
+    () => /* @__PURE__ */ new Set([...heldPastes.map((p) => p.id), ...heldImages.map((i) => i.id)]),
+    [heldPastes, heldImages]
+  );
+  const holdImage = 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 = 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 }));
         }
-        return next;
-      });
-    }, []);
-    const composeOutgoing = useCallback(() => {
-      if (inline) return expandMarkers(value, heldPastes, heldImages);
-      return [value, ...heldPastes.map((p) => p.text)].filter(Boolean).join("\n\n");
-    }, [inline, value, heldPastes, heldImages]);
-    const hasContent = value.trim().length > 0 || !inline && heldPastes.length > 0;
-    const focusInput = useCallback(() => {
-      if (inline) editorRef.current?.focus();
-      else textareaRef.current?.focus();
-    }, [inline]);
-    const handleSubmit = useCallback(() => {
-      if (!hasContent || disabled) return;
-      const order = markedIds(value);
-      const images = inline ? order.flatMap((id) => heldImages.filter((i) => i.id === id)) : [];
-      onSubmit?.(composeOutgoing(), { images });
-      setValue("");
-      pills.clear();
-      setHeldImages([]);
-      focusInput();
-    }, [
-      hasContent,
-      disabled,
-      value,
-      inline,
-      heldImages,
-      onSubmit,
-      composeOutgoing,
-      setValue,
-      pills,
-      setHeldImages,
-      focusInput
-    ]);
-    const handleKeyDown = (e) => {
-      if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        handleSubmit();
       }
-    };
-    const insertPaste = useCallback(
-      (paste) => {
-        const text = pills.expand(paste.id);
-        if (text === void 0) return;
-        setValue((current) => current ? `${current}
-
-${text}` : text);
-        textareaRef.current?.focus();
-      },
-      [pills, setValue]
-    );
-    const expandInline = useCallback(
-      (id) => {
-        const text = pills.expand(id);
-        if (text === void 0) return;
-        editorRef.current?.replacePill(id, text);
-      },
-      [pills]
-    );
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-react-fancy-composer": "",
-        ref,
-        className: cn(
-          "rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900",
-          disabled && "opacity-50",
-          className
-        ),
-        children: [
-          !inline && heldPastes.length > 0 && /* @__PURE__ */ jsx(
-            "div",
-            {
-              "data-react-fancy-composer-paste-pills": "",
-              className: "flex flex-wrap gap-1.5 px-3 pt-3",
-              children: heldPastes.map((paste) => (
-                // `group` + `group-hover` rather than hover state: the preview is
-                // presentation, and a useState for it would be one more thing an
-                // agent could desynchronise.
-                /* @__PURE__ */ jsxs("span", { className: "group relative inline-flex", children: [
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      "data-react-fancy-composer-paste-pill": paste.id,
-                      onClick: () => insertPaste(paste),
-                      disabled,
-                      "aria-label": `Insert this pasted text, ${withSeparators(paste.text.length)} characters`,
-                      "aria-describedby": `${paste.id}-preview`,
-                      className: cn(
-                        "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",
-                        classNames?.pill,
-                        classNames?.textPill
-                      ),
-                      children: /* @__PURE__ */ jsxs("span", { children: [
-                        "Pasted text \xB7 ",
-                        withSeparators(paste.text.length),
-                        " characters"
-                      ] })
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      "data-react-fancy-composer-paste-pill-remove": paste.id,
-                      onClick: () => pills.remove(paste.id),
-                      disabled,
-                      "aria-label": "Discard this pasted text",
-                      className: cn(
-                        "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",
-                        classNames?.remove
-                      ),
-                      children: "\xD7"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      id: `${paste.id}-preview`,
-                      "data-react-fancy-composer-paste-pill-preview": paste.id,
-                      role: "tooltip",
-                      className: cn(
-                        "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",
-                        classNames?.preview
-                      ),
-                      children: renderPastePreview?.({ kind: "text", paste }) ?? endsOf(paste.text, previewChars)
-                    }
-                  )
-                ] }, paste.id)
-              ))
-            }
-          ),
-          inline ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              InlinePasteEditor,
-              {
-                ref: editorRef,
-                value,
-                known,
-                onChange: handleInlineChange,
-                onSubmit: handleSubmit,
-                onPaste: decidePaste,
-                onHostsChange: handleHostsChange,
-                placeholder,
-                disabled,
-                className: classNames?.input
-              }
-            ),
-            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 ? createPortal(
-                /* @__PURE__ */ jsx(
-                  InlinePill,
-                  {
-                    preview,
-                    previewChars,
-                    renderPastePreview,
-                    classNames,
-                    disabled,
-                    onExpand: expandInline
-                  }
-                ),
-                host,
-                id
-              ) : null;
-            })
-          ] }) : /* @__PURE__ */ jsx(
-            "textarea",
-            {
-              ref: textareaRef,
-              value,
-              onChange: (e) => setValue(e.target.value),
-              onKeyDown: handleKeyDown,
-              onPaste: handlePaste,
-              placeholder,
-              disabled,
-              rows: 3,
-              className: cn(
-                "w-full resize-none bg-transparent px-4 pt-3 text-sm outline-none placeholder:text-zinc-400",
-                classNames?.input
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t border-zinc-100 px-3 py-2 dark:border-zinc-800", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: actions }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: handleSubmit,
-                disabled: disabled || !hasContent,
-                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",
-                children: "Send"
-              }
-            )
-          ] })
-        ]
+      if (pasteThreshold && pasteThreshold > 0 && text.length >= pasteThreshold) {
+        return [{ id: pills.hold(text), block: true }];
       }
-    );
-  }
-);
-Composer.displayName = "Composer";
+      return null;
+    },
+    [pasteImages, pasteThreshold, holdImage, pills]
+  );
+  const prune = 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] = useState(/* @__PURE__ */ new Map());
+  const onHostsChange = useCallback((next) => {
+    setHosts((prev) => {
+      if (prev.size === next.size && [...next].every(([id, el]) => prev.get(id) === el)) {
+        return prev;
+      }
+      return next;
+    });
+  }, []);
+  const expandPill = useCallback(
+    (id) => {
+      const text = pills.expand(id);
+      if (text === void 0) return;
+      editorRef.current?.replacePill(id, text);
+    },
+    [pills, editorRef]
+  );
+  const expand = useCallback(
+    (value) => expandMarkers(value, heldPastes, heldImages),
+    [heldPastes, heldImages]
+  );
+  const imagesIn = useCallback(
+    (value) => markedIds(value).flatMap((id) => heldImages.filter((i) => i.id === id)),
+    [heldImages]
+  );
+  const clear = 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 ? createPortal(
+      /* @__PURE__ */ jsx(
+        InlinePill,
+        {
+          preview,
+          previewChars,
+          renderPastePreview,
+          classNames,
+          disabled,
+          onExpand: expandPill
+        }
+      ),
+      host,
+      id
+    ) : null;
+  });
+  return {
+    pills,
+    heldPastes,
+    heldImages,
+    known,
+    decidePaste,
+    prune,
+    onHostsChange,
+    expand,
+    imagesIn,
+    clear,
+    portals
+  };
+}
 
-export { Composer, pasteMarker, usePastePills };
-//# sourceMappingURL=chunk-Z4GO6N6N.js.map
-//# sourceMappingURL=chunk-Z4GO6N6N.js.map
+export { InlinePasteEditor, endsOf, pasteMarker, useInlinePaste, usePastePills, withSeparators };
+//# sourceMappingURL=chunk-2JOWGYAJ.js.map
+//# sourceMappingURL=chunk-2JOWGYAJ.js.map