@particle-academy/react-fancy 5.37.0 → 5.39.0

package/CHANGELOG.md

@@ -11,6 +11,139 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [5.39.0] - 2026-10-15
+
+### Added
+
+- **`PromptInput` gets inline paste pills** — the same ones `Composer` gained in
+  5.38.0, built on the same code (react-fancy#32, asked for by Genie 2, whose chat
+  composer this is).
+
+  ```tsx
+  <PromptInput budgetTokens={200_000} pasteThreshold={500} pasteImages previewChars={30}
+    onSubmit={(text, attachments) => send(text, attachments)} />
+  ```
+
+  - A paste of `pasteThreshold`+ characters becomes `Pasted text · N characters`
+    **where it was pasted**, on a line of its own. Clicking it puts the full text
+    back right there; hovering shows the first and last `previewChars`.
+  - **`pasteImages`**: a pasted image becomes an inline `Pasted image N` pill AND
+    arrives in `onSubmit`'s attachments with its File, in message order. The text
+    marks where it sat as `[Pasted image N]`.
+  - `onSubmit` receives every text pill expanded where it sits — never a marker —
+    and **a message that is only a paste can be sent**.
+  - **The send contract is unchanged**: Ctrl/⌘+Enter sends, plain Enter is a
+    newline, and the `/` and `@` pickers, drop-to-attach and the file picker all
+    work in the inline editor exactly as in the textarea.
+  - `renderPastePreview` and `pasteClassNames` restyle the pills and popover.
+
+  Asked for as chips beside the input carried as `text/plain` attachments; built
+  inline instead, to the owner's own spec given against screenshots of this
+  composer. The text still reaches the model — positioned where the person put it.
+
+- **A quieter `PromptInput` footer**, each part opt-in:
+  - `attachButton="icon"` — paperclip only, with an accessible name and a tooltip.
+  - `sendButton="icon"` — a compact send button whose tooltip carries the shortcut
+    (`Send · Ctrl+Enter`), replacing the inline kbd hint.
+  - `meter="near-limit"` — hidden until usage passes `meterShowAt` (0.75), muted
+    until `meterWarnAt` (0.9), warning colour past it. `meter="hidden"` never
+    shows it.
+  - **`usedTokens`** — the caller's REAL usage (an agent's context, say). The
+    meter shows it plus the draft's estimate; before, it could only estimate the
+    draft as length ÷ `charsPerToken`, which is why a host had to fake the budget.
+
+  Handles: `data-react-fancy-prompt-input-attach`, `-send`, `-meter` (with
+  `data-level`: `ok` / `caution` / `warn` / `muted`).
+
+### Changed
+
+- `Composer` and `PromptInput` now share one implementation of inline paste
+  pills (`useInlinePaste`), so the two cannot disagree about what a pill means.
+  No behaviour change to `Composer`; all its tests pass untouched.
+- `Composer`'s internal inline pill moved to its own file. No behaviour or API
+  change; its props were being read as `Composer`'s by the showcase's docs
+  coverage check.
+
+**What you must DO: nothing.** Every option defaults to the old behaviour: no
+`pasteThreshold` or `pasteImages` means the textarea you had, and the footer is
+unchanged unless you ask.
+
+## [5.38.0] - 2026-10-14
+
+### Added
+
+- **`Composer` can put paste pills IN the message, where the paste happened.**
+
+  ```tsx
+  <Composer pasteThreshold={500} pastePlacement="inline" pasteImages previewChars={30}
+    onSubmit={(text, { images }) => send(text, images)} />
+  ```
+
+  ```
+  This is what [Pasted image 1] I mean and this
+  [Pasted text · 669 characters]
+  ```
+
+  - **A text pill gets a line to itself** — a newline above (unless it is already
+    at the start of a line) and below (unless one already follows).
+  - **Clicking a text pill removes it and puts the full text exactly where it
+    sat**, not appended to the end.
+  - **An image pill sits in the sentence** — `Pasted image 1`, numbered by
+    arrival, and the number survives deleting an earlier one. Hovering shows a
+    thumbnail. Opt-in with `pasteImages`; see below for why.
+  - **Backspace deletes a pill like a character**, and the held paste goes with
+    it: the message is the one record of what is attached.
+  - **A send carries every pill where it sits.** Text pills are expanded in place;
+    each image's place is marked `[Pasted image N]` in the text and the images
+    arrive as `onSubmit`'s new second argument, in message order.
+
+  With `pastePlacement="inline"`, `value` carries a marker per pill
+  (`pasteMarker(id)`, exported), so a host or agent can attach a paste by writing
+  the marker and the held paste. `onSubmit` never sees a marker. A marker naming
+  nothing held stays text, so pasted content cannot invent an attachment.
+
+  This is the MOIC estate's own design — the pill as a marker inside the message —
+  which is why they never adopted the beside-the-input layout. Asked for by the
+  owner against screenshots of exactly that layout.
+
+  **`pasteImages` is off by default** because turning it on is a promise to read
+  `onSubmit`'s second argument: a pill reads as "attached", and an image a host
+  never sends is one the person believes went and did not. A clipboard with text
+  AND an image pastes the text — copying from a document often adds a picture of
+  the selection, and holding it would turn a pasted sentence into a screenshot of
+  it.
+
+- **The pills and their hover popover are restyleable.** `classNames` —
+  `pill`, `textPill`, `imagePill`, `preview`, `remove`, `input` — merged onto the
+  defaults, so a restyle can be one class or a whole new look.
+  `renderPastePreview` replaces what the popover shows. Both placements.
+
+- **`previewChars`** — characters of a held paste shown at each end of the hover
+  preview. Default stays 20.
+
+- **`heldImages` / `onHeldImagesChange`** — controllable, per the component
+  contract, like `heldPastes`.
+
+- **`usePastePills().hold(text)`** — hold a paste unconditionally and get its id
+  back, for a host that places the pill itself. `Composer`'s inline placement is
+  its caller.
+
+### Fixed
+
+- **`usePastePills` could mint an id a controlled list already held.** Its counter
+  started at 1 whatever the list contained, so a host that seeded `paste-1` got a
+  second `paste-1` on the next paste — two pills on one id, and expanding either
+  took both. It now skips taken ids.
+
+- **`Tooltip`'s arrow kept its own dark colour when the bubble was restyled**, so
+  `className="bg-white"` gave a dark arrow pointing out of a white bubble. The
+  arrow now inherits the bubble's background.
+
+**What you must DO: nothing.** `pastePlacement` defaults to `"above"`, which is
+5.31.0's behaviour unchanged; `pasteImages` is off; `previewChars` defaults to the
+old 20; and `onSubmit`'s second argument is ignorable, so a one-argument handler
+still type-checks.
+
 ## [5.37.0] - 2026-10-11
 
 ### Changed

package/dist/{index-C8PKWA_5.d.cts → Composer.types-CuSPnaOt.d.cts}

@@ -1,4 +1,3 @@
-import * as react from 'react';
 import { ReactNode } from 'react';
 
 /**
@@ -56,6 +55,14 @@ interface UsePastePillsResult {
      *     }
      */
     handlePaste: (event: PasteEventLike) => boolean;
+    /**
+     * Hold `text` unconditionally and return the new pill's id.
+     *
+     * For a host that decides for itself what to hold and needs to know WHICH pill
+     * it made — `Composer`'s inline placement puts the pill at the caret, so it needs
+     * the id at paste time. Ignores `threshold`; the caller has already decided.
+     */
+    hold: (text: string) => string;
     /**
      * Removes the paste and returns its text, for the host to insert into its own
      * surface. `undefined` if there is no such id.
@@ -111,21 +118,78 @@ interface UsePastePillsResult {
  * **It gets no further surface without a real caller.** No extra options, no second
  * hook. An API with one hypothetical consumer is how a package accumulates surface
  * nobody uses.
+ *
+ * `hold` (5.38.0) met that bar: `Composer`'s inline placement — MOIC's
+ * pill-inside-the-message design, built into the component — needs the id of the
+ * pill it just made so it can put it at the caret.
  */
 declare function usePastePills({ threshold, heldPastes: controlledHeldPastes, onHeldPastesChange, }?: UsePastePillsOptions): UsePastePillsResult;
 
+/**
+ * An image pasted into a `Composer` and held as a pill.
+ *
+ * `label` is stored rather than derived because the number in it is the order of
+ * ARRIVAL: "Pasted image 2" must stay 2 after image 1 is deleted, and nothing left
+ * in the list could recompute that.
+ */
+interface HeldImage {
+    id: string;
+    file: File;
+    label: string;
+}
+/** The marker for a held paste or image, for a host or agent writing `value` itself. */
+declare function pasteMarker(id: string): string;
+
+/** What a hover preview is being asked to show. */
+type ComposerPastePreview = {
+    kind: "text";
+    paste: HeldPaste;
+} | {
+    kind: "image";
+    image: HeldImage;
+};
+/**
+ * Classes for the paste pills, MERGED onto the defaults rather than replacing them,
+ * so a restyle can be one class or a whole new look.
+ */
+interface ComposerPasteClassNames {
+    /** Every pill, text or image. */
+    pill?: string;
+    /** Text pills only — `Pasted text · 669 characters`. */
+    textPill?: string;
+    /** Image pills only — `Pasted image 1`. */
+    imagePill?: string;
+    /** The hover popover. */
+    preview?: string;
+    /** The × discard control (beside-the-input placement only; inline pills are backspaced). */
+    remove?: string;
+    /** The editable surface itself. */
+    input?: string;
+}
+interface ComposerSubmitExtras {
+    /**
+     * Images still pasted into the message when it was sent, in the order they
+     * appear in it. Each one's place in the sent text is marked `[Pasted image N]`,
+     * matching its `label`.
+     */
+    images: HeldImage[];
+}
 interface ComposerProps {
     value?: string;
     defaultValue?: string;
     onChange?: (value: string) => void;
-    onSubmit?: (value: string) => void;
+    /**
+     * The second argument only ever carries anything with `pasteImages` on. A
+     * one-argument handler stays valid.
+     */
+    onSubmit?: (value: string, extras: ComposerSubmitExtras) => void;
     placeholder?: string;
     actions?: ReactNode;
     disabled?: boolean;
     className?: string;
     /**
-     * Hold a paste of at least this many characters beside the composer as a pill,
-     * instead of inserting it. Try 500 — about a long paragraph.
+     * Hold a paste of at least this many characters as a pill, instead of inserting
+     * it. Try 500 — about a long paragraph.
      *
      * **Omit it and paste behaves exactly as it always has.** Opt-in on purpose:
      * paste is a fundamental interaction and this library is past 1.0, so a minor
@@ -136,6 +200,37 @@ interface ComposerProps {
      * ceremony for an address or a name.
      */
     pasteThreshold?: number;
+    /**
+     * Where a pill goes.
+     *
+     * - `"above"` (default, and the only behaviour before 5.38.0) — in a row above
+     *   the input; a send appends held text after what was typed.
+     * - `"inline"` — **in the message, where the paste happened.** A text pill gets
+     *   a line to itself; clicking it puts the full text back exactly there; an
+     *   image pill sits in the sentence. Backspace deletes a pill like a character.
+     *
+     * With `"inline"`, `value` carries a marker for each pill (see `pasteMarker`),
+     * because the message is then the one record of what is attached and where.
+     * `onSubmit` always receives the expanded text, never a marker.
+     */
+    pastePlacement?: "above" | "inline";
+    /**
+     * Hold a pasted IMAGE as a pill (`"inline"` placement only). Off by default —
+     * turning it on is a promise to read `onSubmit`'s second argument, because a pill
+     * reads as "attached" and an image a host never sends is an attachment the
+     * person believes went and did not.
+     *
+     * A clipboard carrying text as well as an image (copying from a document often
+     * includes a picture of the selection) pastes the TEXT: the image there is a
+     * rendering, not the thing that was copied.
+     */
+    pasteImages?: boolean;
+    /** Characters of a held text paste shown at EACH end of its hover preview. Default 20. */
+    previewChars?: number;
+    /** Replace the hover popover's content. Its box is styled by `classNames.preview`. */
+    renderPastePreview?: (preview: ComposerPastePreview) => ReactNode;
+    /** Restyle the pills and their popover. */
+    classNames?: ComposerPasteClassNames;
     /**
      * The held pastes, if you want to own them.
      *
@@ -146,8 +241,9 @@ interface ComposerProps {
      */
     heldPastes?: HeldPaste[];
     onHeldPastesChange?: (pastes: HeldPaste[]) => void;
+    /** The held images, if you want to own them. Same reasoning as `heldPastes`. */
+    heldImages?: HeldImage[];
+    onHeldImagesChange?: (images: HeldImage[]) => void;
 }
 
-declare const Composer: react.ForwardRefExoticComponent<ComposerProps & react.RefAttributes<HTMLDivElement>>;
-
-export { Composer as C, type HeldPaste as H, type PasteEventLike as P, type UsePastePillsOptions as U, type ComposerProps as a, type UsePastePillsResult as b, usePastePills as u };
+export { type ComposerPasteClassNames as C, type HeldImage as H, type PasteEventLike as P, type UsePastePillsOptions as U, type ComposerPastePreview as a, type ComposerProps as b, type ComposerSubmitExtras as c, type HeldPaste as d, type UsePastePillsResult as e, pasteMarker as p, usePastePills as u };

package/dist/{index-C8PKWA_5.d.ts → Composer.types-CuSPnaOt.d.ts}

@@ -1,4 +1,3 @@
-import * as react from 'react';
 import { ReactNode } from 'react';
 
 /**
@@ -56,6 +55,14 @@ interface UsePastePillsResult {
      *     }
      */
     handlePaste: (event: PasteEventLike) => boolean;
+    /**
+     * Hold `text` unconditionally and return the new pill's id.
+     *
+     * For a host that decides for itself what to hold and needs to know WHICH pill
+     * it made — `Composer`'s inline placement puts the pill at the caret, so it needs
+     * the id at paste time. Ignores `threshold`; the caller has already decided.
+     */
+    hold: (text: string) => string;
     /**
      * Removes the paste and returns its text, for the host to insert into its own
      * surface. `undefined` if there is no such id.
@@ -111,21 +118,78 @@ interface UsePastePillsResult {
  * **It gets no further surface without a real caller.** No extra options, no second
  * hook. An API with one hypothetical consumer is how a package accumulates surface
  * nobody uses.
+ *
+ * `hold` (5.38.0) met that bar: `Composer`'s inline placement — MOIC's
+ * pill-inside-the-message design, built into the component — needs the id of the
+ * pill it just made so it can put it at the caret.
  */
 declare function usePastePills({ threshold, heldPastes: controlledHeldPastes, onHeldPastesChange, }?: UsePastePillsOptions): UsePastePillsResult;
 
+/**
+ * An image pasted into a `Composer` and held as a pill.
+ *
+ * `label` is stored rather than derived because the number in it is the order of
+ * ARRIVAL: "Pasted image 2" must stay 2 after image 1 is deleted, and nothing left
+ * in the list could recompute that.
+ */
+interface HeldImage {
+    id: string;
+    file: File;
+    label: string;
+}
+/** The marker for a held paste or image, for a host or agent writing `value` itself. */
+declare function pasteMarker(id: string): string;
+
+/** What a hover preview is being asked to show. */
+type ComposerPastePreview = {
+    kind: "text";
+    paste: HeldPaste;
+} | {
+    kind: "image";
+    image: HeldImage;
+};
+/**
+ * Classes for the paste pills, MERGED onto the defaults rather than replacing them,
+ * so a restyle can be one class or a whole new look.
+ */
+interface ComposerPasteClassNames {
+    /** Every pill, text or image. */
+    pill?: string;
+    /** Text pills only — `Pasted text · 669 characters`. */
+    textPill?: string;
+    /** Image pills only — `Pasted image 1`. */
+    imagePill?: string;
+    /** The hover popover. */
+    preview?: string;
+    /** The × discard control (beside-the-input placement only; inline pills are backspaced). */
+    remove?: string;
+    /** The editable surface itself. */
+    input?: string;
+}
+interface ComposerSubmitExtras {
+    /**
+     * Images still pasted into the message when it was sent, in the order they
+     * appear in it. Each one's place in the sent text is marked `[Pasted image N]`,
+     * matching its `label`.
+     */
+    images: HeldImage[];
+}
 interface ComposerProps {
     value?: string;
     defaultValue?: string;
     onChange?: (value: string) => void;
-    onSubmit?: (value: string) => void;
+    /**
+     * The second argument only ever carries anything with `pasteImages` on. A
+     * one-argument handler stays valid.
+     */
+    onSubmit?: (value: string, extras: ComposerSubmitExtras) => void;
     placeholder?: string;
     actions?: ReactNode;
     disabled?: boolean;
     className?: string;
     /**
-     * Hold a paste of at least this many characters beside the composer as a pill,
-     * instead of inserting it. Try 500 — about a long paragraph.
+     * Hold a paste of at least this many characters as a pill, instead of inserting
+     * it. Try 500 — about a long paragraph.
      *
      * **Omit it and paste behaves exactly as it always has.** Opt-in on purpose:
      * paste is a fundamental interaction and this library is past 1.0, so a minor
@@ -136,6 +200,37 @@ interface ComposerProps {
      * ceremony for an address or a name.
      */
     pasteThreshold?: number;
+    /**
+     * Where a pill goes.
+     *
+     * - `"above"` (default, and the only behaviour before 5.38.0) — in a row above
+     *   the input; a send appends held text after what was typed.
+     * - `"inline"` — **in the message, where the paste happened.** A text pill gets
+     *   a line to itself; clicking it puts the full text back exactly there; an
+     *   image pill sits in the sentence. Backspace deletes a pill like a character.
+     *
+     * With `"inline"`, `value` carries a marker for each pill (see `pasteMarker`),
+     * because the message is then the one record of what is attached and where.
+     * `onSubmit` always receives the expanded text, never a marker.
+     */
+    pastePlacement?: "above" | "inline";
+    /**
+     * Hold a pasted IMAGE as a pill (`"inline"` placement only). Off by default —
+     * turning it on is a promise to read `onSubmit`'s second argument, because a pill
+     * reads as "attached" and an image a host never sends is an attachment the
+     * person believes went and did not.
+     *
+     * A clipboard carrying text as well as an image (copying from a document often
+     * includes a picture of the selection) pastes the TEXT: the image there is a
+     * rendering, not the thing that was copied.
+     */
+    pasteImages?: boolean;
+    /** Characters of a held text paste shown at EACH end of its hover preview. Default 20. */
+    previewChars?: number;
+    /** Replace the hover popover's content. Its box is styled by `classNames.preview`. */
+    renderPastePreview?: (preview: ComposerPastePreview) => ReactNode;
+    /** Restyle the pills and their popover. */
+    classNames?: ComposerPasteClassNames;
     /**
      * The held pastes, if you want to own them.
      *
@@ -146,8 +241,9 @@ interface ComposerProps {
      */
     heldPastes?: HeldPaste[];
     onHeldPastesChange?: (pastes: HeldPaste[]) => void;
+    /** The held images, if you want to own them. Same reasoning as `heldPastes`. */
+    heldImages?: HeldImage[];
+    onHeldImagesChange?: (images: HeldImage[]) => void;
 }
 
-declare const Composer: react.ForwardRefExoticComponent<ComposerProps & react.RefAttributes<HTMLDivElement>>;
-
-export { Composer as C, type HeldPaste as H, type PasteEventLike as P, type UsePastePillsOptions as U, type ComposerProps as a, type UsePastePillsResult as b, usePastePills as u };
+export { type ComposerPasteClassNames as C, type HeldImage as H, type PasteEventLike as P, type UsePastePillsOptions as U, type ComposerPastePreview as a, type ComposerProps as b, type ComposerSubmitExtras as c, type HeldPaste as d, type UsePastePillsResult as e, pasteMarker as p, usePastePills as u };

package/dist/autocomplete.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunkQBNR5IVM_cjs = require('./chunk-QBNR5IVM.cjs');
-require('./chunk-J2DI6RMR.cjs');
+var chunkMFBUK4RV_cjs = require('./chunk-MFBUK4RV.cjs');
 require('./chunk-KJ22KE56.cjs');
 require('./chunk-L3V3BYVS.cjs');
+require('./chunk-J2DI6RMR.cjs');
 require('./chunk-NBZC6LOB.cjs');
 require('./chunk-57FQGQJK.cjs');
 require('./chunk-RXDRYWVD.cjs');
@@ -14,7 +14,7 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "Autocomplete", {
   enumerable: true,
-  get: function () { return chunkQBNR5IVM_cjs.Autocomplete; }
+  get: function () { return chunkMFBUK4RV_cjs.Autocomplete; }
 });
 //# sourceMappingURL=autocomplete.cjs.map
 //# sourceMappingURL=autocomplete.cjs.map

package/dist/autocomplete.js

@@ -1,7 +1,7 @@
-export { Autocomplete } from './chunk-O2ZHORSC.js';
-import './chunk-MQ6VGG62.js';
+export { Autocomplete } from './chunk-Z6RVBZQ4.js';
 import './chunk-OL53XYHF.js';
 import './chunk-NRXK42LO.js';
+import './chunk-MQ6VGG62.js';
 import './chunk-WHEXTDPV.js';
 import './chunk-RGANGU7X.js';
 import './chunk-JXE5XID6.js';