@particle-academy/react-fancy 5.37.0 → 5.39.0

package/dist/{chunk-23FTDEGR.cjs → chunk-BZOU7VJQ.cjs}

@@ -1,58 +1,12 @@
 'use strict';
 
+var chunk6TZPM43Q_cjs = require('./chunk-6TZPM43Q.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');
 
-function usePastePills({
-  threshold,
-  heldPastes: controlledHeldPastes,
-  onHeldPastesChange
-} = {}) {
-  const [heldPastes, setHeldPastes] = chunkSNHU2AI4_cjs.useControllableState(
-    controlledHeldPastes,
-    [],
-    onHeldPastesChange
-  );
-  const nextId = react.useRef(0);
-  const handlePaste = react.useCallback(
-    (event) => {
-      if (!threshold || threshold <= 0) return false;
-      const text = event.clipboardData?.getData("text/plain") ?? "";
-      if (text.length < threshold) return false;
-      event.preventDefault();
-      nextId.current += 1;
-      const id = `paste-${nextId.current}`;
-      setHeldPastes((current) => [...current, { id, text }]);
-      return true;
-    },
-    [threshold, setHeldPastes]
-  );
-  const expand = react.useCallback(
-    (id) => {
-      const found = heldPastes.find((p) => p.id === id);
-      if (found === void 0) return void 0;
-      setHeldPastes((current) => current.filter((p) => p.id !== id));
-      return found.text;
-    },
-    [heldPastes, setHeldPastes]
-  );
-  const remove = react.useCallback(
-    (id) => setHeldPastes((current) => current.filter((p) => p.id !== id)),
-    [setHeldPastes]
-  );
-  const clear = react.useCallback(() => setHeldPastes([]), [setHeldPastes]);
-  return { heldPastes, handlePaste, expand, remove, clear };
-}
 var PREVIEW_CHARS = 20;
-function withSeparators(n) {
-  return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-}
-function endsOf(text) {
-  if (text.length <= PREVIEW_CHARS * 2) return text;
-  return `${text.slice(0, PREVIEW_CHARS)} \u2026 ${text.slice(-PREVIEW_CHARS)}`;
-}
 var Composer = react.forwardRef(
   function Composer2({
     value: controlledValue,
@@ -64,39 +18,69 @@ var Composer = react.forwardRef(
     disabled = false,
     className,
     pasteThreshold,
+    pastePlacement = "above",
+    pasteImages = false,
+    previewChars = PREVIEW_CHARS,
+    renderPastePreview,
+    classNames,
     heldPastes: controlledHeldPastes,
-    onHeldPastesChange
+    onHeldPastesChange,
+    heldImages: controlledHeldImages,
+    onHeldImagesChange
   }, ref) {
+    const inline = pastePlacement === "inline";
     const [value, setValue] = chunkSNHU2AI4_cjs.useControllableState(
       controlledValue,
       defaultValue,
       onChange
     );
-    const pills = usePastePills({
-      threshold: pasteThreshold,
+    const textareaRef = react.useRef(null);
+    const editorRef = react.useRef(null);
+    const paste = chunk6TZPM43Q_cjs.useInlinePaste({
+      pasteThreshold,
+      pasteImages,
+      previewChars,
+      renderPastePreview,
+      classNames,
+      disabled,
       heldPastes: controlledHeldPastes,
-      onHeldPastesChange
+      onHeldPastesChange,
+      heldImages: controlledHeldImages,
+      onHeldImagesChange,
+      editorRef
     });
-    const heldPastes = pills.heldPastes;
-    const textareaRef = react.useRef(null);
+    const pills = paste.pills;
+    const heldPastes = paste.heldPastes;
     const handlePaste = react.useCallback(
       (e) => {
         pills.handlePaste(e);
       },
       [pills]
     );
-    const composeOutgoing = react.useCallback(
-      () => [value, ...heldPastes.map((p) => p.text)].filter(Boolean).join("\n\n"),
-      [value, heldPastes]
+    const handleInlineChange = react.useCallback(
+      (next) => {
+        setValue(next);
+        paste.prune(next);
+      },
+      [setValue, paste]
     );
-    const hasContent = value.trim().length > 0 || heldPastes.length > 0;
+    const composeOutgoing = react.useCallback(() => {
+      if (inline) return paste.expand(value);
+      return [value, ...heldPastes.map((p) => p.text)].filter(Boolean).join("\n\n");
+    }, [inline, value, heldPastes, paste]);
+    const hasContent = value.trim().length > 0 || !inline && heldPastes.length > 0;
+    const focusInput = react.useCallback(() => {
+      if (inline) editorRef.current?.focus();
+      else textareaRef.current?.focus();
+    }, [inline]);
     const handleSubmit = react.useCallback(() => {
       if (!hasContent || disabled) return;
-      onSubmit?.(composeOutgoing());
+      const images = inline ? paste.imagesIn(value) : [];
+      onSubmit?.(composeOutgoing(), { images });
       setValue("");
-      pills.clear();
-      textareaRef.current?.focus();
-    }, [hasContent, disabled, onSubmit, composeOutgoing, setValue, pills]);
+      paste.clear();
+      focusInput();
+    }, [hasContent, disabled, value, inline, paste, onSubmit, composeOutgoing, setValue, focusInput]);
     const handleKeyDown = (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
@@ -104,8 +88,8 @@ var Composer = react.forwardRef(
       }
     };
     const insertPaste = react.useCallback(
-      (paste) => {
-        const text = pills.expand(paste.id);
+      (held) => {
+        const text = pills.expand(held.id);
         if (text === void 0) return;
         setValue((current) => current ? `${current}
 
@@ -125,12 +109,12 @@ ${text}` : text);
           className
         ),
         children: [
-          heldPastes.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          !inline && heldPastes.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               "data-react-fancy-composer-paste-pills": "",
               className: "flex flex-wrap gap-1.5 px-3 pt-3",
-              children: heldPastes.map((paste) => (
+              children: heldPastes.map((paste2) => (
                 // `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.
@@ -139,15 +123,19 @@ ${text}` : text);
                     "button",
                     {
                       type: "button",
-                      "data-react-fancy-composer-paste-pill": paste.id,
-                      onClick: () => insertPaste(paste),
+                      "data-react-fancy-composer-paste-pill": paste2.id,
+                      onClick: () => insertPaste(paste2),
                       disabled,
-                      "aria-label": `Insert this pasted text, ${withSeparators(paste.text.length)} characters`,
-                      "aria-describedby": `${paste.id}-preview`,
-                      className: "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",
+                      "aria-label": `Insert this pasted text, ${chunk6TZPM43Q_cjs.withSeparators(paste2.text.length)} characters`,
+                      "aria-describedby": `${paste2.id}-preview`,
+                      className: chunkZU5Q77OT_cjs.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__ */ jsxRuntime.jsxs("span", { children: [
                         "Pasted text \xB7 ",
-                        withSeparators(paste.text.length),
+                        chunk6TZPM43Q_cjs.withSeparators(paste2.text.length),
                         " characters"
                       ] })
                     }
@@ -156,29 +144,52 @@ ${text}` : text);
                     "button",
                     {
                       type: "button",
-                      "data-react-fancy-composer-paste-pill-remove": paste.id,
-                      onClick: () => pills.remove(paste.id),
+                      "data-react-fancy-composer-paste-pill-remove": paste2.id,
+                      onClick: () => pills.remove(paste2.id),
                       disabled,
                       "aria-label": "Discard this pasted text",
-                      className: "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",
+                      className: chunkZU5Q77OT_cjs.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__ */ jsxRuntime.jsx(
                     "span",
                     {
-                      id: `${paste.id}-preview`,
-                      "data-react-fancy-composer-paste-pill-preview": paste.id,
+                      id: `${paste2.id}-preview`,
+                      "data-react-fancy-composer-paste-pill-preview": paste2.id,
                       role: "tooltip",
-                      className: "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",
-                      children: endsOf(paste.text)
+                      className: chunkZU5Q77OT_cjs.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: paste2 }) ?? chunk6TZPM43Q_cjs.endsOf(paste2.text, previewChars)
                     }
                   )
-                ] }, paste.id)
+                ] }, paste2.id)
               ))
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          inline ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              chunk6TZPM43Q_cjs.InlinePasteEditor,
+              {
+                ref: editorRef,
+                value,
+                known: paste.known,
+                onChange: handleInlineChange,
+                onSubmit: handleSubmit,
+                onPaste: paste.decidePaste,
+                onHostsChange: paste.onHostsChange,
+                placeholder,
+                disabled,
+                className: classNames?.input
+              }
+            ),
+            paste.portals
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(
             "textarea",
             {
               ref: textareaRef,
@@ -189,7 +200,10 @@ ${text}` : text);
               placeholder,
               disabled,
               rows: 3,
-              className: "w-full resize-none bg-transparent px-4 pt-3 text-sm outline-none placeholder:text-zinc-400"
+              className: chunkZU5Q77OT_cjs.cn(
+                "w-full resize-none bg-transparent px-4 pt-3 text-sm outline-none placeholder:text-zinc-400",
+                classNames?.input
+              )
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-t border-zinc-100 px-3 py-2 dark:border-zinc-800", children: [
@@ -213,6 +227,5 @@ ${text}` : text);
 Composer.displayName = "Composer";
 
 exports.Composer = Composer;
-exports.usePastePills = usePastePills;
-//# sourceMappingURL=chunk-23FTDEGR.cjs.map
-//# sourceMappingURL=chunk-23FTDEGR.cjs.map
+//# sourceMappingURL=chunk-BZOU7VJQ.cjs.map
+//# sourceMappingURL=chunk-BZOU7VJQ.cjs.map

package/dist/chunk-BZOU7VJQ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Composer/Composer.tsx"],"names":["forwardRef","Composer","useControllableState","useRef","useInlinePaste","useCallback","jsxs","cn","jsx","paste","withSeparators","endsOf","Fragment","InlinePasteEditor"],"mappings":"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","file":"chunk-BZOU7VJQ.cjs","sourcesContent":["import { forwardRef, useCallback, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport type { HeldPaste } from \"../../hooks/use-paste-pills\";\nimport { endsOf, withSeparators } from \"./InlinePill\";\nimport { InlinePasteEditor, type InlinePasteEditorHandle } from \"./InlinePasteEditor\";\nimport { useInlinePaste } from \"./use-inline-paste\";\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    },\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\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          </>\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-35EN5AYE.js → chunk-CF5KRDN4.js}

@@ -48,7 +48,10 @@ var Tooltip = forwardRef(
               "div",
               {
                 className: cn(
-                  "absolute h-2 w-2 rotate-45 bg-zinc-900 dark:bg-zinc-700",
+                  // `bg-inherit`, not a colour of its own: a `className` that
+                  // restyles the bubble would otherwise leave a dark arrow
+                  // pointing out of a light one.
+                  "absolute h-2 w-2 rotate-45 bg-inherit",
                   position.placement.startsWith("top") && "bottom-[-4px] left-1/2 -translate-x-1/2",
                   position.placement.startsWith("bottom") && "top-[-4px] left-1/2 -translate-x-1/2",
                   position.placement.startsWith("left") && "right-[-4px] top-1/2 -translate-y-1/2",
@@ -65,5 +68,5 @@ var Tooltip = forwardRef(
 Tooltip.displayName = "Tooltip";
 
 export { Tooltip };
-//# sourceMappingURL=chunk-35EN5AYE.js.map
-//# sourceMappingURL=chunk-35EN5AYE.js.map
+//# sourceMappingURL=chunk-CF5KRDN4.js.map
+//# sourceMappingURL=chunk-CF5KRDN4.js.map

package/dist/chunk-CF5KRDN4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tooltip/Tooltip.tsx"],"names":["Tooltip"],"mappings":";;;;;;AAaO,IAAM,OAAA,GAAU,UAAA;AAAA,EACrB,SAASA,QAAAA,CACP,EAAE,QAAA,EAAU,OAAA,EAAS,SAAA,GAAY,KAAA,EAAO,KAAA,GAAQ,GAAA,EAAK,MAAA,GAAS,CAAA,EAAG,SAAA,IACjE,IAAA,EACA;AACA,IAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AACtC,IAAA,MAAM,SAAA,GAAY,OAAoB,IAAI,CAAA;AAC1C,IAAA,MAAM,WAAA,GAAc,OAAuB,IAAI,CAAA;AAC/C,IAAA,MAAM,UAAA,GAAa,OAAsC,MAAS,CAAA;AAElE,IAAA,MAAM,QAAA,GAAW,mBAAA,CAAoB,SAAA,EAAW,WAAA,EAAa;AAAA,MAC3D,SAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA,EAAS;AAAA,KACV,CAAA;AAED,IAAA,MAAM,IAAA,GAAO,YAAY,MAAM;AAC7B,MAAA,UAAA,CAAW,UAAU,UAAA,CAAW,MAAM,OAAA,CAAQ,IAAI,GAAG,KAAK,CAAA;AAAA,IAC5D,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,IAAA,MAAM,IAAA,GAAO,YAAY,MAAM;AAC7B,MAAA,YAAA,CAAa,WAAW,OAAO,CAAA;AAC/B,MAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,IACf,CAAA,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,OAAA,GAAU,aAAa,QAAA,EAAmD;AAAA,MAC9E,GAAA,EAAK,SAAA;AAAA,MACL,YAAA,EAAc,IAAA;AAAA,MACd,YAAA,EAAc,IAAA;AAAA,MACd,OAAA,EAAS,IAAA;AAAA,MACT,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,MAAA,OAAA;AAAA,MACA,IAAA,wBACE,MAAA,EAAA,EACC,QAAA,kBAAA,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,WAAA;AAAA,UACL,0BAAA,EAAyB,EAAA;AAAA,UACzB,IAAA,EAAK,SAAA;AAAA,UACL,SAAA,EAAW,EAAA;AAAA,YACT,2JAAA;AAAA,YACA;AAAA,WACF;AAAA,UACA,OAAO,EAAE,IAAA,EAAM,SAAS,CAAA,EAAG,GAAA,EAAK,SAAS,CAAA,EAAE;AAAA,UAE1C,QAAA,EAAA;AAAA,YAAA,OAAA;AAAA,4BACD,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,EAAA;AAAA;AAAA;AAAA;AAAA,kBAIT,uCAAA;AAAA,kBACA,QAAA,CAAS,SAAA,CAAU,UAAA,CAAW,KAAK,CAAA,IACjC,yCAAA;AAAA,kBACF,QAAA,CAAS,SAAA,CAAU,UAAA,CAAW,QAAQ,CAAA,IACpC,sCAAA;AAAA,kBACF,QAAA,CAAS,SAAA,CAAU,UAAA,CAAW,MAAM,CAAA,IAClC,uCAAA;AAAA,kBACF,QAAA,CAAS,SAAA,CAAU,UAAA,CAAW,OAAO,CAAA,IACnC;AAAA;AACJ;AAAA;AACF;AAAA;AAAA,OACF,EACF;AAAA,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-CF5KRDN4.js","sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  type ReactElement,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Portal } from \"../Portal\";\nimport { useFloatingPosition } from \"../../hooks/use-floating-position\";\nimport type { TooltipProps } from \"./Tooltip.types\";\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(\n    { children, content, placement = \"top\", delay = 200, offset = 8, className },\n    _ref,\n  ) {\n    const [open, setOpen] = useState(false);\n    const anchorRef = useRef<HTMLElement>(null);\n    const floatingRef = useRef<HTMLDivElement>(null);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n    const position = useFloatingPosition(anchorRef, floatingRef, {\n      placement,\n      offset,\n      enabled: open,\n    });\n\n    const show = useCallback(() => {\n      timeoutRef.current = setTimeout(() => setOpen(true), delay);\n    }, [delay]);\n\n    const hide = useCallback(() => {\n      clearTimeout(timeoutRef.current);\n      setOpen(false);\n    }, []);\n\n    const trigger = cloneElement(children as ReactElement<Record<string, unknown>>, {\n      ref: anchorRef,\n      onMouseEnter: show,\n      onMouseLeave: hide,\n      onFocus: show,\n      onBlur: hide,\n    });\n\n    return (\n      <>\n        {trigger}\n        {open && (\n          <Portal>\n            <div\n              ref={floatingRef}\n              data-react-fancy-tooltip=\"\"\n              role=\"tooltip\"\n              className={cn(\n                \"fancy-fade-in pointer-events-none fixed z-50 max-w-xs rounded-lg bg-zinc-900 px-3 py-1.5 text-sm text-white shadow-lg dark:bg-zinc-700 dark:text-zinc-100\",\n                className,\n              )}\n              style={{ left: position.x, top: position.y }}\n            >\n              {content}\n              <div\n                className={cn(\n                  // `bg-inherit`, not a colour of its own: a `className` that\n                  // restyles the bubble would otherwise leave a dark arrow\n                  // pointing out of a light one.\n                  \"absolute h-2 w-2 rotate-45 bg-inherit\",\n                  position.placement.startsWith(\"top\") &&\n                    \"bottom-[-4px] left-1/2 -translate-x-1/2\",\n                  position.placement.startsWith(\"bottom\") &&\n                    \"top-[-4px] left-1/2 -translate-x-1/2\",\n                  position.placement.startsWith(\"left\") &&\n                    \"right-[-4px] top-1/2 -translate-y-1/2\",\n                  position.placement.startsWith(\"right\") &&\n                    \"left-[-4px] top-1/2 -translate-y-1/2\",\n                )}\n              />\n            </div>\n          </Portal>\n        )}\n      </>\n    );\n  },\n);\n\nTooltip.displayName = \"Tooltip\";\n"]}

package/dist/{chunk-DNV7MUEE.cjs → chunk-FJ2GMQLC.cjs}

@@ -1,6 +1,7 @@
 'use strict';
 
-var chunkISPCXIJZ_cjs = require('./chunk-ISPCXIJZ.cjs');
+var chunk6TZPM43Q_cjs = require('./chunk-6TZPM43Q.cjs');
+var chunkX7H75WVP_cjs = require('./chunk-X7H75WVP.cjs');
 var chunkRMJGF7MN_cjs = require('./chunk-RMJGF7MN.cjs');
 var chunkQKFOJKVE_cjs = require('./chunk-QKFOJKVE.cjs');
 var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
@@ -46,9 +47,31 @@ function PromptInput({
   maxHeight = 280,
   aboveInput,
   className,
+  pasteThreshold,
+  pasteImages = false,
+  previewChars = 20,
+  renderPastePreview,
+  pasteClassNames,
+  attachButton = "label",
+  sendButton = "label",
+  usedTokens,
+  meter = "always",
+  meterShowAt = 0.75,
+  meterWarnAt = 0.9,
   ...rest
 }) {
   const [text, setText] = react.useState("");
+  const inline = pasteThreshold !== void 0 || pasteImages;
+  const editorRef = react.useRef(null);
+  const paste = chunk6TZPM43Q_cjs.useInlinePaste({
+    pasteThreshold,
+    pasteImages,
+    previewChars,
+    renderPastePreview,
+    classNames: pasteClassNames,
+    disabled: false,
+    editorRef
+  });
   const [attachments, setAttachments] = react.useState([]);
   const [picker, setPicker] = react.useState(null);
   const taRef = react.useRef(null);
@@ -62,12 +85,14 @@ function PromptInput({
   }, [platform]);
   const modKey = modifierKeyLabel(platform ?? detected);
   const resolvedPlaceholder = placeholder ?? `Ask anything. Type / for commands, @ for mentions. ${modKey}+Enter to send.`;
-  const tokens = react.useMemo(
-    () => Math.ceil(text.length / Math.max(1, charsPerToken)),
-    [text, charsPerToken]
+  const draftTokens = react.useMemo(
+    () => Math.ceil((inline ? paste.expand(text) : text).length / Math.max(1, charsPerToken)),
+    [text, inline, paste, charsPerToken]
   );
+  const tokens = (usedTokens ?? 0) + draftTokens;
   const ratio = Math.min(1, tokens / budgetTokens);
-  const meterColor = ratio < 0.6 ? "#10b981" : ratio < 0.85 ? "#f59e0b" : "#ef4444";
+  const meterLevel = meter === "hidden" ? null : meter === "near-limit" ? ratio < meterShowAt ? null : ratio >= meterWarnAt ? "warn" : "muted" : ratio < 0.6 ? "ok" : ratio < 0.85 ? "caution" : "warn";
+  const meterColor = meterLevel === "ok" ? "#10b981" : meterLevel === "caution" ? "#f59e0b" : meterLevel === "warn" ? "#ef4444" : "#a1a1aa";
   const filteredCmds = react.useMemo(
     () => picker?.kind === "cmd" ? commands.filter(
       (c) => c.name.slice(1).toLowerCase().startsWith(picker.query.toLowerCase())
@@ -121,6 +146,10 @@ function PromptInput({
     const next = before + insert + after;
     setText(next);
     setPicker(null);
+    if (inline) {
+      editorRef.current?.setValue(next, before.length + insert.length);
+      return;
+    }
     requestAnimationFrame(() => {
       const ta = taRef.current;
       if (!ta) return;
@@ -131,7 +160,19 @@ function PromptInput({
   };
   const submit = () => {
     if (!text.trim() && attachments.length === 0) return;
-    onSubmit(text, attachments);
+    if (inline) {
+      const pastedImages = paste.imagesIn(text).map((image) => ({
+        id: image.id,
+        name: image.file.name,
+        bytes: image.file.size,
+        file: image.file,
+        type: image.file.type
+      }));
+      onSubmit(paste.expand(text), [...attachments, ...pastedImages]);
+      paste.clear();
+    } else {
+      onSubmit(text, attachments);
+    }
     setText("");
     setAttachments([]);
     setPicker(null);
@@ -233,7 +274,34 @@ function PromptInput({
           a.id
         )) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
+          inline ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              chunk6TZPM43Q_cjs.InlinePasteEditor,
+              {
+                ref: editorRef,
+                value: text,
+                known: paste.known,
+                onChange: (next, caret) => {
+                  updateText(next, caret);
+                  paste.prune(next);
+                },
+                onSubmit: submit,
+                submitKey: "mod-enter",
+                onKeyDown,
+                onPaste: paste.decidePaste,
+                onHostsChange: paste.onHostsChange,
+                placeholder: resolvedPlaceholder,
+                disabled: false,
+                maxHeight,
+                placeholderClassName: "left-3 top-2.5 text-[14px] leading-relaxed",
+                className: chunkZU5Q77OT_cjs.cn(
+                  "block min-h-[5.5rem] px-3 py-2.5 text-[14px] leading-relaxed",
+                  pasteClassNames?.input
+                )
+              }
+            ),
+            paste.portals
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(
             "textarea",
             {
               ref: taRef,
@@ -302,15 +370,17 @@ function PromptInput({
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-t border-zinc-200 bg-zinc-50/60 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900/40", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(chunkISPCXIJZ_cjs.Tooltip, { content: "Drop files here, or click", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(chunkX7H75WVP_cjs.Tooltip, { content: attachButton === "icon" ? "Attach files \u2014 or drop them here" : "Drop files here, or click", children: /* @__PURE__ */ jsxRuntime.jsx(
             chunkRMJGF7MN_cjs.Button,
             {
               variant: "ghost",
               size: "sm",
               icon: "paperclip",
               className: "shrink-0",
+              "data-react-fancy-prompt-input-attach": "",
+              "aria-label": attachButton === "icon" ? "Attach files" : void 0,
               onClick: () => fileRef.current?.click(),
-              children: "attach"
+              children: attachButton === "icon" ? null : "attach"
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -326,22 +396,30 @@ function PromptInput({
               }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-2 flex min-w-0 items-center gap-1.5 overflow-hidden", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-24 shrink overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: "h-full rounded-full transition-all",
-                style: { width: `${ratio * 100}%`, backgroundColor: meterColor }
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono text-[11px]", style: { color: meterColor }, children: [
-              fmtTokens(tokens),
-              " / ",
-              fmtTokens(budgetTokens)
-            ] })
-          ] }),
+          meterLevel !== null && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              "data-react-fancy-prompt-input-meter": "",
+              "data-level": meterLevel,
+              className: "ml-2 flex min-w-0 items-center gap-1.5 overflow-hidden",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-24 shrink overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "h-full rounded-full transition-all",
+                    style: { width: `${ratio * 100}%`, backgroundColor: meterColor }
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono text-[11px]", style: { color: meterColor }, children: [
+                  fmtTokens(tokens),
+                  " / ",
+                  fmtTokens(budgetTokens)
+                ] })
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
-            showHint && /* @__PURE__ */ jsxRuntime.jsxs(
+            showHint && sendButton !== "icon" && /* @__PURE__ */ jsxRuntime.jsxs(
               "span",
               {
                 className: "hidden text-[10px] text-zinc-500 sm:inline",
@@ -357,13 +435,25 @@ function PromptInput({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            sendButton === "icon" ? /* @__PURE__ */ jsxRuntime.jsx(chunkX7H75WVP_cjs.Tooltip, { content: `Send \xB7 ${modKey}+Enter`, children: /* @__PURE__ */ jsxRuntime.jsx(
+              chunkRMJGF7MN_cjs.Button,
+              {
+                color: "violet",
+                size: "sm",
+                icon: "arrow-up",
+                className: "shrink-0",
+                "data-react-fancy-prompt-input-send": "",
+                "aria-label": "Send",
+                onClick: submit
+              }
+            ) }) : /* @__PURE__ */ jsxRuntime.jsx(
               chunkRMJGF7MN_cjs.Button,
               {
                 color: "violet",
                 size: "sm",
                 iconTrailing: "arrow-right",
                 className: "shrink-0",
+                "data-react-fancy-prompt-input-send": "",
                 onClick: submit,
                 children: "send"
               }
@@ -388,5 +478,5 @@ exports.PromptInput = PromptInput;
 exports.browserPlatformHints = browserPlatformHints;
 exports.detectPlatform = detectPlatform;
 exports.modifierKeyLabel = modifierKeyLabel;
-//# sourceMappingURL=chunk-DNV7MUEE.cjs.map
-//# sourceMappingURL=chunk-DNV7MUEE.cjs.map
+//# sourceMappingURL=chunk-FJ2GMQLC.cjs.map
+//# sourceMappingURL=chunk-FJ2GMQLC.cjs.map