@justanarthur/modo-ui 0.0.0-stage → 0.2.0

package/dist/shared/components-yh3kwdhr.js

@@ -0,0 +1,981 @@
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  FluidHoverHighlight2
+} from "./components-kvr7f9hy.js";
+import {
+  useIcon
+} from "./components-zrkzcayz.js";
+import {
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  surfaceClasses2,
+  SurfaceProvider2
+} from "./components-zx6b6yby.js";
+import {
+  useControllableState
+} from "./components-n7mjr357.js";
+import {
+  useFluidHover2,
+  useRegisterFluidHoverItem2
+} from "./components-59efxjd9.js";
+import {
+  SizeProvider2
+} from "./components-jjw69c4c.js";
+import {
+  Button2
+} from "./components-b2wyq2cq.js";
+import {
+  Tooltip2
+} from "./components-ng72k97e.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
+
+// components/inputs/input-message/index.tsx
+import { AnimatePresence, motion, Reorder, useReducedMotion } from "motion/react";
+import {
+  forwardRef,
+  useCallback,
+  useEffect as useEffect2,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState as useState2
+} from "react";
+
+// components/inputs/input-message/file-thumbnail.tsx
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var pdfjsPromise = null;
+async function loadPdfjs() {
+  if (!pdfjsPromise) {
+    pdfjsPromise = import("pdfjs-dist").then((mod) => {
+      if (!mod.GlobalWorkerOptions.workerSrc) {
+        mod.GlobalWorkerOptions.workerSrc = `https://cdn.jsdelivr.net/npm/pdfjs-dist@${mod.version}/build/pdf.worker.min.mjs`;
+      }
+      return mod;
+    });
+  }
+  return pdfjsPromise;
+}
+async function renderPdfFirstPage(file, targetWidth) {
+  const pdfjs = await loadPdfjs();
+  const buffer = await file.arrayBuffer();
+  const pdf = await pdfjs.getDocument({ data: buffer }).promise;
+  const page = await pdf.getPage(1);
+  const baseViewport = page.getViewport({ scale: 1 });
+  const scale = targetWidth * 2 / baseViewport.width;
+  const viewport = page.getViewport({ scale });
+  const canvas = document.createElement("canvas");
+  canvas.width = viewport.width;
+  canvas.height = viewport.height;
+  await page.render({ canvas, viewport }).promise;
+  return canvas.toDataURL("image/png");
+}
+function FileThumbnail2({ file, size, className }) {
+  const shape = useShape();
+  const isImage = file.type.startsWith("image/");
+  const isPdf = file.type === "application/pdf";
+  const [imageUrl, setImageUrl] = useState(null);
+  useEffect(() => {
+    if (!isImage) {
+      setImageUrl(null);
+      return;
+    }
+    const url = URL.createObjectURL(file);
+    setImageUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [isImage, file]);
+  const [pdfUrl, setPdfUrl] = useState(null);
+  const [pdfError, setPdfError] = useState(false);
+  useEffect(() => {
+    setPdfError(false);
+    if (!isPdf) {
+      setPdfUrl(null);
+      return;
+    }
+    let cancelled = false;
+    renderPdfFirstPage(file, size).then((url) => {
+      if (!cancelled)
+        setPdfUrl(url);
+    }).catch(() => {
+      if (!cancelled)
+        setPdfError(true);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [file, isPdf, size]);
+  const previewUrl = imageUrl ?? pdfUrl;
+  const isPending = isImage && !imageUrl || isPdf && !pdfUrl && !pdfError;
+  return /* @__PURE__ */ jsx("div", {
+    className: cn2("relative shrink-0 overflow-hidden bg-accent border border-border", shape.bg, className),
+    style: { width: size, height: size },
+    children: previewUrl ? /* @__PURE__ */ jsx("img", {
+      src: previewUrl,
+      alt: file.name,
+      className: "absolute inset-0 w-full h-full object-cover"
+    }) : isPending ? /* @__PURE__ */ jsx("div", {
+      className: "absolute inset-0 flex items-center justify-center",
+      children: /* @__PURE__ */ jsx("div", {
+        className: "w-6 h-6 rounded-full border-2 border-border border-t-muted-foreground animate-spin",
+        "aria-label": "Loading preview",
+        role: "status"
+      })
+    }) : /* @__PURE__ */ jsx("div", {
+      className: "absolute inset-0 flex items-center justify-center text-muted-foreground",
+      role: "img",
+      "aria-label": file.name,
+      children: /* @__PURE__ */ jsxs("svg", {
+        width: Math.max(16, size * 0.35),
+        height: Math.max(16, size * 0.35),
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsx("path", {
+            d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"
+          }),
+          /* @__PURE__ */ jsx("path", {
+            d: "M14 3v5h5"
+          })
+        ]
+      })
+    })
+  });
+}
+
+// components/inputs/input-message/index.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect2;
+function useRegionHeight() {
+  const roRef = useRef(null);
+  const [height, setHeight] = useState2(null);
+  const ref = useCallback((el) => {
+    roRef.current?.disconnect();
+    roRef.current = null;
+    if (!el)
+      return;
+    const sync = () => {
+      const next = el.parentElement?.scrollHeight ?? el.offsetHeight;
+      if (next > 0)
+        setHeight(next);
+    };
+    sync();
+    const ro = new ResizeObserver(sync);
+    ro.observe(el);
+    roRef.current = ro;
+  }, []);
+  return [ref, height];
+}
+function useIsTouch() {
+  const [isTouch, setIsTouch] = useState2(false);
+  useEffect2(() => {
+    const mq = window.matchMedia("(hover: none)");
+    const update = () => setIsTouch(mq.matches);
+    update();
+    mq.addEventListener("change", update);
+    return () => mq.removeEventListener("change", update);
+  }, []);
+  return isTouch;
+}
+var DEFAULT_ACCEPT = "image/png,image/jpeg,application/pdf";
+var NO_FILES = [];
+var NO_QUEUE = [];
+var FilePreviewTile = forwardRef(function FilePreviewTile({ file, onRemove, size }, ref) {
+  const XIcon = useIcon("x");
+  return /* @__PURE__ */ jsxs2(motion.div, {
+    ref,
+    layout: true,
+    initial: { opacity: 0, scale: 0.9 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.9, transition: spring2.fast.exit },
+    transition: spring2.fast,
+    className: "relative shrink-0 cursor-default group/tile",
+    children: [
+      /* @__PURE__ */ jsx2(FileThumbnail2, {
+        file,
+        size
+      }),
+      /* @__PURE__ */ jsx2(Tooltip2, {
+        content: "Remove",
+        side: "top",
+        children: /* @__PURE__ */ jsx2("button", {
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            onRemove();
+          },
+          "aria-label": `Remove ${file.name}`,
+          className: "light absolute top-1 right-1 w-5 h-5 rounded-full bg-foreground text-background opacity-0 group-hover/tile:opacity-100 transition-opacity duration-fast flex items-center justify-center cursor-pointer outline-none focus-visible:opacity-100 focus-visible:ring-1 focus-visible:ring-focus-ring",
+          children: /* @__PURE__ */ jsx2(XIcon, {
+            size: 12,
+            strokeWidth: 2.5
+          })
+        })
+      })
+    ]
+  });
+});
+function QueuedRow({ item, index, total, reduceMotion, isTouch, onEdit, onRemove, onMove }) {
+  const XIcon = useIcon("x");
+  const ImageIcon = useIcon("image");
+  const compactStep = useSize2().variant === "compact";
+  const fileCount = item.files.length;
+  const label = item.text || `${fileCount} attachment${fileCount === 1 ? "" : "s"}`;
+  return /* @__PURE__ */ jsxs2(Reorder.Item, {
+    value: item,
+    layout: true,
+    initial: reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.97 },
+    animate: { opacity: 1, scale: 1 },
+    exit: reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.97, transition: spring2.fast.exit },
+    transition: spring2.fast,
+    "aria-label": `Queued message ${index + 1} of ${total}: ${label}`,
+    tabIndex: 0,
+    onDoubleClick: () => onEdit(item),
+    onKeyDown: (e) => {
+      if (e.key === "Enter" || e.key === "F2") {
+        e.preventDefault();
+        onEdit(item);
+      } else if (e.key === "Delete" || e.key === "Backspace") {
+        e.preventDefault();
+        onRemove(item);
+      } else if (e.altKey && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+        e.preventDefault();
+        onMove(item, e.key === "ArrowUp" ? -1 : 1);
+      }
+    },
+    className: cn2("group/qrow flex items-center gap-2 rounded-lg bg-muted", compactStep ? "h-7 px-2 text-body-compact" : "h-8 px-2.5 text-body", "text-foreground/85 select-none outline-none", "cursor-grab active:cursor-grabbing", "focus-visible:ring-1 focus-visible:ring-focus-ring", "weight-normal"),
+    children: [
+      fileCount > 0 && /* @__PURE__ */ jsxs2("span", {
+        className: "flex shrink-0 items-center gap-0.5 text-muted-foreground",
+        children: [
+          /* @__PURE__ */ jsx2(ImageIcon, {
+            size: 13
+          }),
+          item.text && /* @__PURE__ */ jsx2("span", {
+            className: "tabular-nums",
+            children: fileCount
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx2("span", {
+        className: "min-w-0 flex-1 truncate [text-box:trim-both_cap_alphabetic] py-1 -my-1",
+        children: label
+      }),
+      /* @__PURE__ */ jsx2(Tooltip2, {
+        content: "Remove",
+        side: "top",
+        children: /* @__PURE__ */ jsx2("button", {
+          type: "button",
+          onPointerDown: (e) => e.stopPropagation(),
+          onClick: (e) => {
+            e.stopPropagation();
+            onRemove(item);
+          },
+          "aria-label": `Remove queued message: ${label}`,
+          className: cn2("shrink-0 flex h-5 w-5 items-center justify-center rounded-full", "text-muted-foreground hover:text-foreground hover:bg-hover", isTouch ? "opacity-100" : "opacity-0 group-hover/qrow:opacity-100 focus-visible:opacity-100", "transition-opacity duration-fast cursor-pointer outline-none", "focus-visible:ring-1 focus-visible:ring-focus-ring"),
+          children: /* @__PURE__ */ jsx2(XIcon, {
+            size: 13,
+            strokeWidth: 2.5
+          })
+        })
+      })
+    ]
+  });
+}
+function SuggestionRow({ text, index, active, keyHint, optionId, registerItem, onSelect }) {
+  const EnterIcon = useIcon("corner-down-left");
+  const ArrowDownIcon = useIcon("arrow-down");
+  const compactStep = useSize2().variant === "compact";
+  const ref = useRef(null);
+  useRegisterFluidHoverItem2(registerItem, index, ref);
+  return /* @__PURE__ */ jsxs2("div", {
+    ref,
+    id: optionId,
+    role: "option",
+    "aria-selected": active,
+    onClick: onSelect,
+    className: cn2("relative flex cursor-pointer items-center gap-2", compactStep ? "h-7 px-2 text-subtitle-compact" : "h-8 px-2.5 text-subtitle", "text-muted-foreground transition-colors duration-fast", active && "text-foreground", "weight-normal"),
+    children: [
+      /* @__PURE__ */ jsx2("span", {
+        className: "min-w-0 flex-1 truncate [text-box:trim-both_cap_alphabetic] py-1 -my-1",
+        children: text
+      }),
+      !active && keyHint ? /* @__PURE__ */ jsx2(ArrowDownIcon, {
+        size: 13,
+        className: "shrink-0 text-muted-foreground/70 transition-opacity duration-fast"
+      }) : /* @__PURE__ */ jsx2(EnterIcon, {
+        size: 13,
+        className: cn2("shrink-0 transition-opacity duration-fast", active ? "opacity-100" : "opacity-0")
+      })
+    ]
+  });
+}
+var InputMessage2 = forwardRef(({
+  size,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  onSend,
+  placeholder = "Ask me anything…",
+  leftSlot,
+  rightSlot,
+  disabled,
+  minRows = 1,
+  maxRows = 8,
+  clickToFocus = true,
+  sendLabel = "Send",
+  files: filesProp,
+  defaultFiles,
+  onFilesChange,
+  accept = DEFAULT_ACCEPT,
+  maxFiles,
+  filePreviewSize = 80,
+  textareaProps,
+  status: statusProp,
+  defaultStatus,
+  onStatusChange,
+  onStop,
+  queue: queueProp,
+  defaultQueue,
+  onQueueChange,
+  showQueue = true,
+  history = [],
+  placeholderSuggestion,
+  suggestions,
+  className,
+  style,
+  ...props
+}, ref) => {
+  const shape = useShape();
+  const compactStep = useSize2(size).variant === "compact";
+  const ArrowUpIcon = useIcon("arrow-up");
+  const reduceMotion = useReducedMotion() ?? false;
+  const isTouch = useIsTouch();
+  const textareaRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const [focusVisible, setFocusVisible] = useState2(false);
+  const [dragOver, setDragOver] = useState2(false);
+  const [hovered, setHovered] = useState2(false);
+  const {
+    onFocus: _textareaOnFocus,
+    onBlur: _textareaOnBlur,
+    "aria-describedby": textareaDescribedBy,
+    ...restTextareaProps
+  } = textareaProps ?? {};
+  const valueControlled = valueProp !== undefined;
+  const [value, setValue] = useControllableState(valueProp, defaultValue ?? "", onValueChange);
+  const filesControlled = filesProp !== undefined;
+  const supportsFiles = onFilesChange !== undefined || defaultFiles !== undefined;
+  const [filesArr, setFiles] = useControllableState(filesProp, defaultFiles ?? NO_FILES, onFilesChange);
+  const statusEnabled = statusProp !== undefined || defaultStatus !== undefined;
+  const [statusValue, setStatus] = useControllableState(statusProp, defaultStatus ?? "idle", onStatusChange);
+  const status = statusEnabled ? statusValue : undefined;
+  const streaming = status === "streaming";
+  const [queueArr, setQueue] = useControllableState(queueProp, defaultQueue ?? NO_QUEUE, onQueueChange);
+  const queueRef = useRef(queueArr);
+  queueRef.current = queueArr;
+  const supportsQueue = statusEnabled && (onQueueChange !== undefined || defaultQueue !== undefined);
+  const [liveMsg, setLiveMsg] = useState2("");
+  const [historyIndex, setHistoryIndex] = useState2(null);
+  const draftBeforeHistory = useRef("");
+  const suggestionsArr = useMemo(() => suggestions ?? [], [suggestions]);
+  const suggestionsOpen = suggestionsArr.length > 0 && value === "";
+  const suggestionListRef = useRef(null);
+  const [filesRegionRef, filesRegionHeight] = useRegionHeight();
+  const [queueRegionRef, queueRegionHeight] = useRegionHeight();
+  const [suggestionsRegionRef, suggestionsRegionHeight] = useRegionHeight();
+  const suggestionHover = useFluidHover2(suggestionListRef);
+  const {
+    activeIndex: activeSuggestion,
+    setActiveIndex: setActiveSuggestion,
+    handlers: suggestionHandlers,
+    registerItem: registerSuggestion,
+    remeasure
+  } = suggestionHover;
+  useEffect2(() => {
+    if (suggestionsOpen)
+      remeasure();
+  }, [suggestionsOpen, remeasure]);
+  const suggestionListId = useId();
+  const ghostHintId = useId();
+  const showGhost = !!placeholderSuggestion && value === "" && !(dragOver && supportsFiles);
+  useEffect2(() => {
+    if (!suggestionsOpen)
+      setActiveSuggestion(null);
+  }, [suggestionsOpen, setActiveSuggestion]);
+  const acceptSuggestion = useCallback((text) => {
+    setActiveSuggestion(null);
+    setHistoryIndex(null);
+    setValue(text);
+    requestAnimationFrame(() => {
+      const el = textareaRef.current;
+      if (!el)
+        return;
+      el.focus();
+      el.setSelectionRange(el.value.length, el.value.length);
+    });
+  }, [setValue, setActiveSuggestion]);
+  const lineHeightCache = useRef(null);
+  const resizeTextarea = useCallback(() => {
+    const el = textareaRef.current;
+    if (!el)
+      return;
+    el.style.height = "auto";
+    let cache = lineHeightCache.current;
+    if (!cache || cache.el !== el) {
+      const lineHeight = parseFloat(getComputedStyle(el).lineHeight);
+      cache = { el, value: Number.isNaN(lineHeight) ? 20 : lineHeight };
+      lineHeightCache.current = cache;
+    }
+    const min = cache.value * minRows;
+    const max = cache.value * maxRows;
+    const next = Math.min(Math.max(el.scrollHeight, min), max);
+    el.style.height = `${next}px`;
+    el.style.overflowY = el.scrollHeight > max ? "auto" : "hidden";
+  }, [minRows, maxRows]);
+  useIsoLayoutEffect(() => {
+    resizeTextarea();
+  }, [value, resizeTextarea]);
+  useEffect2(() => {
+    const el = textareaRef.current;
+    if (!el || typeof ResizeObserver === "undefined")
+      return;
+    let lastWidth = el.offsetWidth;
+    const ro = new ResizeObserver(() => {
+      const width = el.offsetWidth;
+      if (width === lastWidth)
+        return;
+      lastWidth = width;
+      resizeTextarea();
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [resizeTextarea]);
+  const trimmed = value.trim();
+  const canSend = !disabled && (trimmed.length > 0 || filesArr.length > 0);
+  const EDGE_DROP = "0 1px 1px -0.5px var(--shadow-color)";
+  const edgeShadow = dragOver ? `0 0 0 1px var(--brand), ${EDGE_DROP}` : focusVisible ? `0 0 0 1px color-mix(in oklab, var(--foreground) 20%, transparent), ${EDGE_DROP}` : hovered && clickToFocus && !disabled ? `0 0 0 1px var(--border), ${EDGE_DROP}` : undefined;
+  const handleSend = useCallback(() => {
+    if (!canSend)
+      return;
+    setHistoryIndex(null);
+    if (streaming && supportsQueue) {
+      const item = {
+        id: crypto.randomUUID(),
+        text: trimmed,
+        files: filesArr
+      };
+      setQueue([...queueRef.current, item]);
+      setValue("");
+      if (supportsFiles)
+        setFiles([]);
+      requestAnimationFrame(() => textareaRef.current?.focus());
+      return;
+    }
+    onSend?.(trimmed, filesArr);
+    if (!valueControlled)
+      setValue("");
+    if (supportsFiles && !filesControlled)
+      setFiles([]);
+  }, [
+    canSend,
+    streaming,
+    supportsQueue,
+    onSend,
+    trimmed,
+    filesArr,
+    setQueue,
+    setValue,
+    supportsFiles,
+    setFiles,
+    valueControlled,
+    filesControlled
+  ]);
+  const statusControlled = statusProp !== undefined;
+  const handleStop = useCallback(() => {
+    onStop?.();
+    if (!statusControlled)
+      setStatus("idle");
+  }, [onStop, statusControlled, setStatus]);
+  const prevStatusRef = useRef(status);
+  useEffect2(() => {
+    const prev = prevStatusRef.current;
+    prevStatusRef.current = status;
+    if (!supportsQueue)
+      return;
+    if (prev === "streaming" && status === "idle" && queueArr.length > 0) {
+      const [next, ...rest] = queueArr;
+      if (!next)
+        return;
+      setQueue(rest);
+      onSend?.(next.text, next.files, { queuedId: next.id });
+      setLiveMsg(`Message sent.${rest.length ? ` ${rest.length} still queued.` : ""}`);
+    }
+  }, [status, supportsQueue, queueArr, setQueue, onSend]);
+  const editQueued = useCallback((item) => {
+    if (!supportsQueue)
+      return;
+    setHistoryIndex(null);
+    setValue(item.text);
+    if (supportsFiles) {
+      setFiles(maxFiles != null ? item.files.slice(0, maxFiles) : item.files);
+    }
+    setQueue(queueRef.current.filter((q) => q.id !== item.id));
+    requestAnimationFrame(() => {
+      const el = textareaRef.current;
+      if (!el)
+        return;
+      el.focus();
+      el.setSelectionRange(el.value.length, el.value.length);
+    });
+  }, [supportsQueue, supportsFiles, setValue, setFiles, maxFiles, setQueue]);
+  const removeQueued = useCallback((item) => setQueue(queueRef.current.filter((q) => q.id !== item.id)), [setQueue]);
+  const moveQueued = useCallback((item, dir) => {
+    const cur = queueRef.current;
+    const i = cur.findIndex((q) => q.id === item.id);
+    const j = i + dir;
+    if (i < 0 || j < 0 || j >= cur.length)
+      return;
+    const next = [...cur];
+    const a = next[i];
+    const b = next[j];
+    if (!a || !b)
+      return;
+    next[i] = b;
+    next[j] = a;
+    setQueue(next);
+  }, [setQueue]);
+  const canStop = onStop !== undefined || !statusControlled;
+  const buttonMode = !streaming ? "send" : canSend && supportsQueue ? "queue" : canStop ? "stop" : "send";
+  const buttonLabel = buttonMode === "stop" ? "Stop" : buttonMode === "queue" ? "Queue message" : sendLabel;
+  const setCaretEnd = useCallback(() => {
+    requestAnimationFrame(() => {
+      const el = textareaRef.current;
+      if (el)
+        el.setSelectionRange(el.value.length, el.value.length);
+    });
+  }, []);
+  const handleKeyDown = useCallback((e) => {
+    if (e.nativeEvent.isComposing)
+      return;
+    if (suggestionsOpen && !e.shiftKey && !e.altKey && !e.metaKey && !e.ctrlKey) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveSuggestion((prev) => prev == null ? 0 : Math.min(prev + 1, suggestionsArr.length - 1));
+        return;
+      }
+      if (activeSuggestion != null) {
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          setActiveSuggestion(activeSuggestion === 0 ? null : activeSuggestion - 1);
+          return;
+        }
+        if (e.key === "Enter") {
+          e.preventDefault();
+          const picked = suggestionsArr[activeSuggestion];
+          if (picked !== undefined)
+            acceptSuggestion(picked);
+          return;
+        }
+        if (e.key === "Escape") {
+          e.preventDefault();
+          setActiveSuggestion(null);
+          return;
+        }
+      }
+    }
+    if (e.key === "Tab" && !e.shiftKey && placeholderSuggestion && value === "") {
+      e.preventDefault();
+      acceptSuggestion(placeholderSuggestion);
+      return;
+    }
+    if (history.length > 0 && (e.key === "ArrowUp" || e.key === "ArrowDown") && !e.shiftKey && !e.altKey && !e.metaKey && !e.ctrlKey) {
+      const el = e.currentTarget;
+      const caret = el.selectionStart ?? 0;
+      const end = el.selectionEnd ?? caret;
+      if (e.key === "ArrowUp" && !value.slice(0, caret).includes(`
+`)) {
+        const start = historyIndex == null ? history.length : historyIndex;
+        if (start > 0) {
+          e.preventDefault();
+          if (historyIndex == null)
+            draftBeforeHistory.current = value;
+          const ni = start - 1;
+          setHistoryIndex(ni);
+          setValue(history[ni] ?? "");
+          setCaretEnd();
+        }
+        return;
+      }
+      if (e.key === "ArrowDown" && historyIndex != null && !value.slice(end).includes(`
+`)) {
+        e.preventDefault();
+        const ni = historyIndex + 1;
+        if (ni >= history.length) {
+          setHistoryIndex(null);
+          setValue(draftBeforeHistory.current);
+        } else {
+          setHistoryIndex(ni);
+          setValue(history[ni] ?? "");
+        }
+        setCaretEnd();
+        return;
+      }
+    }
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  }, [
+    history,
+    value,
+    historyIndex,
+    setValue,
+    setCaretEnd,
+    handleSend,
+    suggestionsOpen,
+    suggestionsArr,
+    activeSuggestion,
+    setActiveSuggestion,
+    acceptSuggestion,
+    placeholderSuggestion
+  ]);
+  const handleContainerMouseDown = useCallback((e) => {
+    if (!clickToFocus || disabled)
+      return;
+    const target = e.target;
+    if (target === textareaRef.current)
+      return;
+    if (target.closest('button, a, input, select, textarea, [contenteditable], [role="button"], [data-im-queue]')) {
+      return;
+    }
+    e.preventDefault();
+    textareaRef.current?.focus();
+  }, [clickToFocus, disabled]);
+  const acceptTokens = useMemo(() => accept.split(",").map((s) => s.trim()).filter(Boolean), [accept]);
+  const matchesAccept = useCallback((file) => acceptTokens.some((token) => {
+    if (token.endsWith("/*"))
+      return file.type.startsWith(token.slice(0, -1));
+    if (token.startsWith("."))
+      return file.name.toLowerCase().endsWith(token.toLowerCase());
+    return file.type === token;
+  }), [acceptTokens]);
+  const addFiles = useCallback((incoming) => {
+    if (!supportsFiles)
+      return;
+    const fingerprint = (f) => `${f.name}-${f.size}-${f.lastModified}`;
+    const existing = new Set(filesArr.map(fingerprint));
+    const accepted = [];
+    for (const f of incoming) {
+      if (!matchesAccept(f))
+        continue;
+      const fp = fingerprint(f);
+      if (existing.has(fp))
+        continue;
+      existing.add(fp);
+      accepted.push(f);
+    }
+    if (!accepted.length)
+      return;
+    const next = [...filesArr, ...accepted];
+    setFiles(maxFiles != null ? next.slice(0, maxFiles) : next);
+  }, [supportsFiles, setFiles, filesArr, matchesAccept, maxFiles]);
+  const removeFile = useCallback((idx) => {
+    if (!supportsFiles)
+      return;
+    setFiles(filesArr.filter((_, i) => i !== idx));
+  }, [supportsFiles, setFiles, filesArr]);
+  const openFilePicker = useCallback((overrideAccept) => {
+    const el = fileInputRef.current;
+    if (!el)
+      return;
+    if (overrideAccept) {
+      el.accept = overrideAccept;
+      el.click();
+      queueMicrotask(() => {
+        if (fileInputRef.current)
+          fileInputRef.current.accept = accept;
+      });
+      return;
+    }
+    el.click();
+  }, [accept]);
+  const slotCtx = useMemo(() => ({ openFilePicker, files: filesArr }), [openFilePicker, filesArr]);
+  const leftContent = typeof leftSlot === "function" ? leftSlot(slotCtx) : leftSlot;
+  const rightContent = typeof rightSlot === "function" ? rightSlot(slotCtx) : rightSlot;
+  const handleDragOver = useCallback((e) => {
+    if (!supportsFiles || disabled)
+      return;
+    if (!Array.from(e.dataTransfer.types).includes("Files"))
+      return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+    setDragOver(true);
+  }, [supportsFiles, disabled]);
+  const handleDragLeave = useCallback((e) => {
+    const wrapper = e.currentTarget;
+    const next = e.relatedTarget;
+    if (next && wrapper.contains(next))
+      return;
+    setDragOver(false);
+  }, []);
+  const handleDrop = useCallback((e) => {
+    e.preventDefault();
+    setDragOver(false);
+    if (!supportsFiles || disabled)
+      return;
+    addFiles(Array.from(e.dataTransfer.files));
+  }, [supportsFiles, disabled, addFiles]);
+  const handleFileInputChange = useCallback((e) => {
+    if (!e.target.files)
+      return;
+    addFiles(Array.from(e.target.files));
+    e.target.value = "";
+  }, [addFiles]);
+  const composer = /* @__PURE__ */ jsx2("div", {
+    ref,
+    onMouseDown: handleContainerMouseDown,
+    onDragOver: handleDragOver,
+    onDragLeave: handleDragLeave,
+    onDrop: handleDrop,
+    className: cn2("flex flex-col gap-1 p-2 transition-[box-shadow,color] duration-fast", surfaceClasses2(2, 2), shape.container, clickToFocus && !disabled && "cursor-text", disabled && "opacity-50 pointer-events-none", className),
+    style: edgeShadow ? { boxShadow: edgeShadow, ...style } : style,
+    onMouseEnter: () => setHovered(true),
+    onMouseLeave: () => setHovered(false),
+    ...props,
+    children: /* @__PURE__ */ jsxs2(SurfaceProvider2, {
+      value: 2,
+      children: [
+        supportsFiles && /* @__PURE__ */ jsx2("input", {
+          ref: fileInputRef,
+          type: "file",
+          accept,
+          multiple: maxFiles == null || maxFiles > 1,
+          className: "hidden",
+          onChange: handleFileInputChange,
+          "aria-hidden": "true",
+          tabIndex: -1
+        }),
+        /* @__PURE__ */ jsx2(AnimatePresence, {
+          initial: false,
+          children: filesArr.length > 0 && /* @__PURE__ */ jsx2(motion.div, {
+            initial: { height: 0, opacity: 0 },
+            animate: { height: filesRegionHeight ?? 0, opacity: 1 },
+            exit: { height: 0, opacity: 0 },
+            transition: { ...spring2.moderate, bounce: 0 },
+            className: "overflow-hidden",
+            children: /* @__PURE__ */ jsx2("div", {
+              ref: filesRegionRef,
+              className: "flex flex-wrap gap-2 pb-1",
+              children: /* @__PURE__ */ jsx2(AnimatePresence, {
+                initial: false,
+                mode: "popLayout",
+                children: filesArr.map((file, i) => /* @__PURE__ */ jsx2(FilePreviewTile, {
+                  file,
+                  onRemove: () => removeFile(i),
+                  size: filePreviewSize
+                }, `${file.name}-${file.size}-${file.lastModified}`))
+              })
+            })
+          }, "preview-row")
+        }),
+        supportsQueue && showQueue && /* @__PURE__ */ jsx2(AnimatePresence, {
+          initial: false,
+          children: queueArr.length > 0 && /* @__PURE__ */ jsx2(motion.div, {
+            initial: { height: 0, opacity: 0 },
+            animate: { height: queueRegionHeight ?? 0, opacity: 1 },
+            exit: { height: 0, opacity: 0 },
+            transition: { ...spring2.moderate, bounce: 0 },
+            className: "overflow-hidden",
+            children: /* @__PURE__ */ jsx2(Reorder.Group, {
+              ref: queueRegionRef,
+              axis: "y",
+              values: queueArr,
+              onReorder: (next) => setQueue(next),
+              "data-im-queue": true,
+              className: "flex flex-col gap-1 pb-1",
+              children: /* @__PURE__ */ jsx2(AnimatePresence, {
+                initial: false,
+                children: queueArr.map((item, i) => /* @__PURE__ */ jsx2(QueuedRow, {
+                  item,
+                  index: i,
+                  total: queueArr.length,
+                  reduceMotion,
+                  isTouch,
+                  onEdit: editQueued,
+                  onRemove: removeQueued,
+                  onMove: moveQueued
+                }, item.id))
+              })
+            })
+          }, "queue-row")
+        }),
+        /* @__PURE__ */ jsxs2("div", {
+          className: "relative",
+          children: [
+            /* @__PURE__ */ jsx2("textarea", {
+              ref: textareaRef,
+              value,
+              onChange: (e) => {
+                setHistoryIndex(null);
+                setActiveSuggestion(null);
+                setValue(e.target.value);
+              },
+              onKeyDown: handleKeyDown,
+              onFocus: (e) => {
+                if (e.target.matches(":focus-visible"))
+                  setFocusVisible(true);
+                textareaProps?.onFocus?.(e);
+              },
+              onBlur: (e) => {
+                setFocusVisible(false);
+                setActiveSuggestion(null);
+                textareaProps?.onBlur?.(e);
+              },
+              placeholder: dragOver && supportsFiles ? "Drop files here to add to chat" : placeholderSuggestion ? undefined : placeholder,
+              disabled,
+              rows: minRows,
+              "aria-label": textareaProps?.["aria-label"] ?? "Message",
+              "aria-describedby": [showGhost ? ghostHintId : null, textareaDescribedBy].filter(Boolean).join(" ") || undefined,
+              "aria-activedescendant": activeSuggestion != null ? `${suggestionListId}-${activeSuggestion}` : undefined,
+              className: cn2("w-full resize-none rounded-none bg-transparent outline-none", "text-foreground placeholder:text-muted-foreground", compactStep ? "text-subtitle-compact leading-4.5 px-1.5 py-1.5" : "text-subtitle leading-5 px-2 py-2", "weight-normal"),
+              ...restTextareaProps
+            }),
+            showGhost && /* @__PURE__ */ jsx2("div", {
+              "aria-hidden": "true",
+              className: cn2("pointer-events-none absolute inset-0 overflow-hidden text-muted-foreground", compactStep ? "text-subtitle-compact leading-4.5 px-1.5 py-1.5" : "text-subtitle leading-5 px-2 py-2", "weight-normal"),
+              children: /* @__PURE__ */ jsxs2("span", {
+                className: "flex max-w-full items-center gap-1.5",
+                children: [
+                  /* @__PURE__ */ jsx2("span", {
+                    className: "min-w-0 truncate",
+                    children: placeholderSuggestion
+                  }),
+                  /* @__PURE__ */ jsx2("kbd", {
+                    className: cn2("inline-flex shrink-0 -translate-y-px items-center rounded-box border border-border bg-background px-1 font-sans text-muted-foreground", compactStep ? "h-4 text-micro-compact" : "h-[18px] text-micro"),
+                    children: "Tab"
+                  })
+                ]
+              })
+            }),
+            showGhost && /* @__PURE__ */ jsxs2("span", {
+              id: ghostHintId,
+              className: "sr-only",
+              children: [
+                "Suggested prompt: ",
+                placeholderSuggestion,
+                ". Press Tab to fill the composer with it."
+              ]
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs2("div", {
+          className: cn2("flex items-center justify-between", compactStep ? "gap-1.5 [&_button]:h-6 [&_button.w-7]:w-6 [&_button]:text-caption-compact" : "gap-2"),
+          children: [
+            /* @__PURE__ */ jsx2("div", {
+              className: "flex items-center gap-1.5 min-w-0",
+              children: leftContent
+            }),
+            /* @__PURE__ */ jsxs2("div", {
+              className: "flex items-center gap-1.5 shrink-0",
+              children: [
+                rightContent,
+                /* @__PURE__ */ jsx2(Button2, {
+                  type: "button",
+                  variant: "primary",
+                  size: "icon-sm",
+                  onClick: buttonMode === "stop" ? handleStop : handleSend,
+                  disabled: buttonMode === "stop" ? disabled : !canSend,
+                  "aria-label": buttonLabel,
+                  children: /* @__PURE__ */ jsx2(AnimatePresence, {
+                    mode: "wait",
+                    initial: false,
+                    children: /* @__PURE__ */ jsx2(motion.span, {
+                      initial: reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.6 },
+                      animate: { opacity: 1, scale: 1 },
+                      exit: reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.6, transition: spring2.fast.exit },
+                      transition: spring2.fast,
+                      className: "flex items-center justify-center leading-none",
+                      children: buttonMode === "stop" ? /* @__PURE__ */ jsx2("span", {
+                        className: "h-3 w-3 rounded-glyph bg-current"
+                      }) : /* @__PURE__ */ jsx2(ArrowUpIcon, {
+                        size: compactStep ? 15 : 19,
+                        className: cn2("block", compactStep ? "!h-[15px] !w-[15px]" : "!h-[19px] !w-[19px]")
+                      })
+                    }, buttonMode === "stop" ? "stop" : "arrow")
+                  })
+                })
+              ]
+            })
+          ]
+        }),
+        suggestionsArr.length > 0 && /* @__PURE__ */ jsx2(AnimatePresence, {
+          initial: false,
+          children: suggestionsOpen && /* @__PURE__ */ jsx2(motion.div, {
+            initial: { height: 0, opacity: 0 },
+            animate: { height: suggestionsRegionHeight ?? 0, opacity: 1 },
+            exit: { height: 0 },
+            transition: { ...spring2.moderate, bounce: 0 },
+            className: "-mx-2 -mt-1 overflow-hidden",
+            children: /* @__PURE__ */ jsxs2("div", {
+              ref: (el) => {
+                suggestionListRef.current = el;
+                suggestionsRegionRef(el);
+              },
+              role: "listbox",
+              id: suggestionListId,
+              "aria-label": "Suggested prompts",
+              onMouseEnter: suggestionHandlers.onMouseEnter,
+              onMouseMove: suggestionHandlers.onMouseMove,
+              onMouseLeave: suggestionHandlers.onMouseLeave,
+              onClick: suggestionHandlers.onClick,
+              className: "relative mt-2 flex flex-col border-t border-border/60 px-1.5 pt-1.5",
+              children: [
+                /* @__PURE__ */ jsx2(FluidHoverHighlight2, {
+                  hover: suggestionHover,
+                  className: shape.bg
+                }),
+                suggestionsArr.map((s, i) => /* @__PURE__ */ jsx2(SuggestionRow, {
+                  text: s,
+                  index: i,
+                  active: i === activeSuggestion,
+                  keyHint: i === 0 && activeSuggestion == null,
+                  optionId: `${suggestionListId}-${i}`,
+                  registerItem: registerSuggestion,
+                  onSelect: () => acceptSuggestion(s)
+                }, `${s}-${i}`))
+              ]
+            })
+          }, "suggestions")
+        }),
+        /* @__PURE__ */ jsx2("span", {
+          className: "sr-only",
+          role: "status",
+          "aria-live": "polite",
+          children: liveMsg
+        })
+      ]
+    })
+  });
+  return size ? /* @__PURE__ */ jsx2(SizeProvider2, {
+    size,
+    children: composer
+  }) : composer;
+});
+InputMessage2.displayName = "InputMessage";
+var input_message_default = InputMessage2;
+
+export { FileThumbnail2, InputMessage2, input_message_default };