fancy-ui-react 0.2.0

package/dist/components/composer/ComposerModelPicker.js

@@ -0,0 +1,223 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useContext, useState, useEffect, useCallback } from "react";
+import { cn } from "../../utils.js";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useEventCallback } from "../../internals/dom/use-event-callback.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+import { useFloat } from "../../internals/use-float.js";
+import { COMPOSER_CONTEXT_KEY } from "./types.js";
+/* empty css                          */
+function ComposerModelPicker({
+  models,
+  value: valueProp,
+  onValueChange,
+  onChange,
+  label = "Model",
+  className
+}) {
+  const composer = useContext(COMPOSER_CONTEXT_KEY);
+  const playCue = useSoundCue(composer?.sound);
+  const uid = useFancyId();
+  const menuId = `${uid}-menu`;
+  const optionId = (index) => `${uid}-option-${index}`;
+  const [uncontrolledValue, setUncontrolledValue] = useState(void 0);
+  const value = valueProp !== void 0 ? valueProp : uncontrolledValue;
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [triggerEl, triggerRef] = useElementRef();
+  const [menuEl, menuRef] = useElementRef();
+  const triggerLive = useLiveRef(triggerEl);
+  const menuLive = useLiveRef(menuEl);
+  const selectedId = value ?? models[0]?.id;
+  const selected = models.find((model) => model.id === selectedId);
+  const activeId = models[activeIndex] ? optionId(activeIndex) : void 0;
+  const isDisabled = (composer?.disabled ?? false) || models.length === 0;
+  function applyValue(next) {
+    if (valueProp === void 0) setUncontrolledValue(next);
+    onValueChange?.(next);
+  }
+  const openMenu = useEventCallback(() => {
+    if (isDisabled || open) return;
+    const current = models.findIndex((model) => model.id === selectedId);
+    setActiveIndex(current >= 0 ? current : 0);
+    setOpen(true);
+    playCue("open");
+  });
+  const closeMenu = useEventCallback(
+    (returnFocus, reason = "dismiss") => {
+      if (!open) return;
+      setOpen(false);
+      if (reason === "dismiss") playCue("close");
+      if (returnFocus) triggerLive.current?.focus();
+    }
+  );
+  const move = useEventCallback((delta) => {
+    if (models.length === 0) return;
+    setActiveIndex((index) => (index + delta + models.length) % models.length);
+  });
+  const select = useEventCallback((index) => {
+    const model = models[index];
+    if (!model || isDisabled) return;
+    const changed = model.id !== selectedId;
+    applyValue(model.id);
+    if (changed) playCue("select");
+    closeMenu(true, changed ? "commit" : "dismiss");
+    if (changed) onChange?.(model.id);
+  });
+  function handleTriggerKeydown(event) {
+    if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+    event.preventDefault();
+    openMenu();
+  }
+  function handleMenuKeydown(event) {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        move(1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        move(-1);
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        select(activeIndex);
+        break;
+      case "Escape":
+        event.preventDefault();
+        closeMenu(true);
+        break;
+      case "Tab":
+        closeMenu(true);
+        break;
+    }
+  }
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (target && (menuLive.current?.contains(target) || triggerLive.current?.contains(target)))
+        return;
+      closeMenu(false);
+    };
+    document.addEventListener("mousedown", onPointerDown, true);
+    return () => document.removeEventListener("mousedown", onPointerDown, true);
+  }, [open, closeMenu, menuLive, triggerLive]);
+  useIsomorphicLayoutEffect(() => {
+    if (!open) return;
+    menuEl?.focus();
+  }, [open, menuEl]);
+  useEffect(() => {
+    if (isDisabled) setOpen(false);
+  }, [isDisabled]);
+  const anchor = useCallback(
+    () => triggerLive.current?.getBoundingClientRect() ?? null,
+    [triggerLive]
+  );
+  useFloat(menuEl, { anchor, placement: "top-start", offset: 6 });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: cn(
+          "ft-composer-model text-foreground/70 hover:bg-muted hover:text-foreground inline-flex max-w-full cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 font-mono text-xs transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-40",
+          className
+        ),
+        disabled: isDisabled,
+        "data-open": open ? "" : void 0,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": open ? menuId : void 0,
+        "aria-label": selected ? `${label}: ${selected.label}` : label,
+        onClick: () => open ? closeMenu(true) : openMenu(),
+        onKeyDown: handleTriggerKeydown,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: selected?.label ?? label }),
+          selected?.badge ? /* @__PURE__ */ jsx("span", { className: "ft-composer-model-badge shrink-0 rounded px-1 py-px text-[0.625rem] tracking-wide", children: selected.badge }) : null,
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "ft-composer-model-chevron size-3 shrink-0",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx("path", { d: "m4 6 4 4 4-4" })
+            }
+          )
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: menuRef,
+        id: menuId,
+        role: "listbox",
+        tabIndex: -1,
+        "aria-label": label,
+        "aria-activedescendant": activeId,
+        className: "ft-composer-model-menu z-50 max-h-64 min-w-52 overflow-y-auto rounded-lg border p-1 shadow-lg outline-none",
+        onKeyDown: handleMenuKeydown,
+        children: models.map((model, index) => (
+          /*
+          	A button carrying `role="option"`: the row has to be clickable and
+          	it has to be an option, and starting from a button is what keeps
+          	the press, the pointer cursor and the disabled semantics native.
+          	`tabindex="-1"` keeps it out of the tab order, where the listbox
+          	does the walking.
+          */
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              tabIndex: -1,
+              id: optionId(index),
+              "aria-selected": model.id === selectedId,
+              "data-active": index === activeIndex ? "" : void 0,
+              className: "ft-composer-model-option flex w-full cursor-pointer flex-col items-start gap-0.5 rounded-md px-2 py-1.5 text-left",
+              onClick: () => select(index),
+              onMouseEnter: () => setActiveIndex(index),
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "flex w-full items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-medium", children: model.label }),
+                  model.badge ? /* @__PURE__ */ jsx("span", { className: "ft-composer-model-badge shrink-0 rounded px-1 py-px text-[0.625rem] tracking-wide", children: model.badge }) : null,
+                  model.id === selectedId ? /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      className: "ml-auto size-3 shrink-0",
+                      viewBox: "0 0 16 16",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsx("path", { d: "m3 8.5 3.5 3.5L13 5" })
+                    }
+                  ) : null
+                ] }),
+                model.description ? /* @__PURE__ */ jsx("span", { className: "ft-composer-model-description text-[0.6875rem] leading-snug", children: model.description }) : null
+              ]
+            },
+            `${model.id}#${index}`
+          )
+        ))
+      }
+    ) : null
+  ] });
+}
+export {
+  ComposerModelPicker
+};

package/dist/components/composer/ComposerSubmit.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+/**
+ * Props for ComposerSubmit
+ */
+export interface ComposerSubmitProps {
+    /** Accessible name while the composer is idle. */
+    label?: string;
+    /** Accessible name while a response is streaming. */
+    stopLabel?: string;
+    /** Replaces the built-in icon. Rendered in both the send and the stop state. */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/** The send button, which becomes a stop button for as long as a response is arriving. */
+export declare function ComposerSubmit({ label, stopLabel, children, className, }: ComposerSubmitProps): import("react").JSX.Element;

package/dist/components/composer/ComposerSubmit.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { cn } from "../../utils.js";
+import { COMPOSER_CONTEXT_KEY } from "./types.js";
+function ComposerSubmit({
+  label = "Send",
+  stopLabel = "Stop",
+  children,
+  className
+}) {
+  const composer = useContext(COMPOSER_CONTEXT_KEY);
+  const streaming = composer?.streaming ?? false;
+  const empty = (composer?.value.current ?? "").trim() === "" && (composer?.attachments.current.length ?? 0) === 0;
+  const stoppable = composer?.stoppable ?? false;
+  const isDisabled = (composer?.disabled ?? false) || (streaming ? !stoppable : empty);
+  const name = streaming ? stopLabel : label;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: streaming ? "button" : "submit",
+      className: cn(
+        "ft-composer-submit bg-foreground text-background hover:bg-foreground/90 focus-visible:ring-ring inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-40",
+        className
+      ),
+      disabled: isDisabled,
+      "aria-label": name,
+      title: name,
+      onClick: streaming ? () => composer?.stop() : void 0,
+      children: children ?? (streaming ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", className: "size-3.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "10", height: "10", rx: "2", fill: "currentColor" }) }) : /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          viewBox: "0 0 16 16",
+          className: "size-4",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsx("path", { d: "M14 2 2 6.8l4.6 2.6L9.2 14z" }),
+            /* @__PURE__ */ jsx("path", { d: "M14 2 6.6 9.4" })
+          ]
+        }
+      ))
+    }
+  );
+}
+export {
+  ComposerSubmit
+};

package/dist/components/composer/ComposerToolbar.d.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+/**
+ * Props for ComposerToolbar
+ */
+export interface ComposerToolbarProps {
+    /** The controls on the rail, laid out left to right in source order. */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * The bottom rail of a composer: one row, one gap, no opinions about what sits
+ * on it. A model picker, an attach button and a send button are all just
+ * children here, laid out left to right in source order.
+ *
+ * The trailing spacer convention
+ * ------------------------------
+ * The rail lays everything out from the left. Anything that belongs on the
+ * right — the send button, a token meter — is pushed there by a spacer the
+ * integrator writes into `children`, rather than by a second slot this
+ * component would have to invent:
+ *
+ * ```tsx
+ * <ComposerToolbar>
+ *   <ComposerModelPicker models={models} />
+ *   <div className="flex-1" />
+ *   <ComposerSubmit />
+ * </ComposerToolbar>
+ * ```
+ *
+ * One flexible box, any number of groups, and the split stays visible in the
+ * consumer's markup instead of being buried in ours.
+ *
+ * Deliberately not `role="toolbar"`: that role promises arrow-key roving focus
+ * between its controls, and a row that announces itself as a toolbar without
+ * implementing that is worse for a keyboard user than a plain row of tab stops.
+ */
+export declare function ComposerToolbar({ children, className }: ComposerToolbarProps): import("react").JSX.Element;

package/dist/components/composer/ComposerToolbar.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+function ComposerToolbar({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("ft-composer-toolbar flex items-center gap-1", className), children });
+}
+export {
+  ComposerToolbar
+};

package/dist/components/composer/caret.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Caret arithmetic and caret geometry for the composer's trigger menus.
+ *
+ * Two jobs, one file, because a completion menu needs both at the same moment:
+ * *what* the reader is typing after a trigger character, and *where* on screen
+ * that trigger sits so the menu can be pinned to it.
+ *
+ * `findTokenStart` and `findTriggerToken` are pure — no DOM, no globals,
+ * exhaustively testable. `measureCaretRect` has to touch the DOM, since a
+ * textarea exposes no caret geometry of its own: the only way to find out where
+ * character *n* landed is to lay the same text out again in an element that can
+ * be measured.
+ */
+import type { FloatRect } from "../../internals/float.js";
+/** The trigger token the caret currently sits in. */
+export interface TriggerToken {
+    /** Index of the trigger character itself, within the value. */
+    start: number;
+    /** Everything typed between the trigger and the caret. Empty right after the trigger. */
+    query: string;
+}
+/**
+ * Where the trigger token under `caret` starts, or -1 when there is none.
+ *
+ * This is *the* definition of a trigger token, and the only one: both the menus
+ * that open on a token and the `insertText` that replaces one measure it here,
+ * so the span a menu matched and the span a completion overwrites can never
+ * drift apart.
+ *
+ * The token is the whitespace-delimited run ending at the caret, and it counts
+ * as a trigger only when it opens with something other than a letter or a digit.
+ * That deliberately avoids a hardcoded trigger vocabulary: `/`, `@`, `#`, `:`
+ * and whatever a menu invents all behave the same, while an ordinary word — or a
+ * `/` sitting mid-word, as in a path fragment — does not.
+ *
+ * The walk counts code points rather than code units. Reading one unit would
+ * mistake the leading half of an astral character for a non-alphanumeric and
+ * swallow the whole word: `𝐀𝐁` is two letters, not a trigger token, and a caret
+ * the platform dropped between two halves belongs to the character as a whole.
+ */
+export declare function findTokenStart(value: string, caret: number): number;
+/**
+ * The trigger token under `caret`, or `null` when there is none.
+ *
+ * The same run `findTokenStart` reports, narrowed to the menus that own it: the
+ * run has to open with the exact `trigger` string. So `/de` and `@jo` open their
+ * own menu and nobody else's; `src/lib` opens neither, because its slash is
+ * mid-word, and neither does a caret sitting before the trigger it would
+ * otherwise match.
+ *
+ * The token deliberately ends *at the caret* rather than at the end of the word:
+ * completing `@jo|rdan` should search for `jo`, which is what the reader has
+ * actually committed to.
+ */
+export declare function findTriggerToken(value: string, caret: number, trigger: string): TriggerToken | null;
+/**
+ * Where character `index` of a textarea sits, in viewport coordinates.
+ *
+ * The mirror-div technique: a hidden div inherits the textarea's font, padding,
+ * borders and content width, receives the text up to `index`, and then a marker
+ * span holding the rest. The span's offset is the caret's offset, because the
+ * two layouts are the same layout. The rest is bookkeeping — the textarea's own
+ * position, its border, and how far it has been scrolled.
+ *
+ * Returns a zero-width rect one line tall, which is exactly what a float wants
+ * as a virtual anchor. Under jsdom nothing has a layout, so everything measures
+ * zero; the shape still holds and nothing throws.
+ */
+export declare function measureCaretRect(textarea: HTMLTextAreaElement, index: number): FloatRect;

package/dist/components/composer/caret.js

@@ -0,0 +1,112 @@
+"use client";
+function splitsPair(value, index) {
+  const high = value.charCodeAt(index - 1);
+  const low = value.charCodeAt(index);
+  return high >= 55296 && high <= 56319 && low >= 56320 && low <= 57343;
+}
+function tokenEnd(value, caret) {
+  const end = Math.max(0, Math.min(caret, value.length));
+  return end > 0 && end < value.length && splitsPair(value, end) ? end - 1 : end;
+}
+function findTokenStart(value, caret) {
+  const end = tokenEnd(value, caret);
+  let start = end;
+  while (start > 0) {
+    const step = splitsPair(value, start - 1) ? 2 : 1;
+    if (/\s/u.test(value.slice(start - step, start))) break;
+    start -= step;
+  }
+  if (start === end) return -1;
+  const first = String.fromCodePoint(value.codePointAt(start));
+  return /[\p{L}\p{N}]/u.test(first) ? -1 : start;
+}
+function findTriggerToken(value, caret, trigger) {
+  if (trigger === "") return null;
+  const end = tokenEnd(value, caret);
+  const start = findTokenStart(value, end);
+  if (start < 0) return null;
+  const token = value.slice(start, end);
+  if (!token.startsWith(trigger)) return null;
+  return { start, query: token.slice(trigger.length) };
+}
+const MIRRORED_STYLES = [
+  "border-bottom-width",
+  "border-left-width",
+  "border-right-width",
+  "border-top-width",
+  "direction",
+  "font-family",
+  "font-size",
+  "font-stretch",
+  "font-style",
+  "font-variant",
+  "font-weight",
+  "letter-spacing",
+  "line-height",
+  "padding-bottom",
+  "padding-left",
+  "padding-right",
+  "padding-top",
+  "tab-size",
+  "text-align",
+  "text-indent",
+  "text-transform",
+  "word-spacing"
+];
+const FALLBACK_LINE_HEIGHT = 20;
+const NORMAL_LINE_RATIO = 1.5;
+function px(input) {
+  const parsed = Number.parseFloat(input);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+function measureCaretRect(textarea, index) {
+  const box = textarea.getBoundingClientRect();
+  const doc = textarea.ownerDocument;
+  const win = doc.defaultView;
+  if (!win) return { x: box.left, y: box.top, width: 0, height: box.height };
+  const style = win.getComputedStyle(textarea);
+  const declaredLine = Number.parseFloat(style.lineHeight);
+  const fontSize = Number.parseFloat(style.fontSize);
+  const line = Number.isFinite(declaredLine) && declaredLine > 0 ? declaredLine : Number.isFinite(fontSize) && fontSize > 0 ? fontSize * NORMAL_LINE_RATIO : FALLBACK_LINE_HEIGHT;
+  const mirror = doc.createElement("div");
+  for (const property of MIRRORED_STYLES) {
+    mirror.style.setProperty(property, style.getPropertyValue(property));
+  }
+  const inner = textarea.clientWidth || box.width;
+  mirror.style.boxSizing = "content-box";
+  mirror.style.width = `${Math.max(0, inner - px(style.paddingLeft) - px(style.paddingRight))}px`;
+  mirror.style.height = "auto";
+  mirror.style.position = "absolute";
+  mirror.style.top = "0";
+  mirror.style.left = "-9999px";
+  mirror.style.visibility = "hidden";
+  mirror.style.overflow = "hidden";
+  mirror.style.whiteSpace = "pre-wrap";
+  mirror.style.overflowWrap = "break-word";
+  const value = textarea.value;
+  const clamped = Math.max(0, Math.min(index, value.length));
+  mirror.textContent = value.slice(0, clamped);
+  const marker = doc.createElement("span");
+  marker.textContent = value.slice(clamped) || ".";
+  mirror.appendChild(marker);
+  doc.body.appendChild(mirror);
+  let top = 0;
+  let left = 0;
+  try {
+    top = marker.offsetTop;
+    left = marker.offsetLeft;
+  } finally {
+    mirror.remove();
+  }
+  return {
+    x: box.left + px(style.borderLeftWidth) + left - textarea.scrollLeft,
+    y: box.top + px(style.borderTopWidth) + top - textarea.scrollTop,
+    width: 0,
+    height: line
+  };
+}
+export {
+  findTokenStart,
+  findTriggerToken,
+  measureCaretRect
+};

package/dist/components/composer/index.d.ts

@@ -0,0 +1,18 @@
+export { Composer } from "./Composer.js";
+export type { ComposerProps } from "./Composer.js";
+export { ComposerInput } from "./ComposerInput.js";
+export type { ComposerInputProps } from "./ComposerInput.js";
+export { ComposerSubmit } from "./ComposerSubmit.js";
+export type { ComposerSubmitProps } from "./ComposerSubmit.js";
+export { ComposerToolbar } from "./ComposerToolbar.js";
+export type { ComposerToolbarProps } from "./ComposerToolbar.js";
+export { ComposerModelPicker } from "./ComposerModelPicker.js";
+export type { ComposerModelPickerProps } from "./ComposerModelPicker.js";
+export { ComposerAttachments } from "./ComposerAttachments.js";
+export type { ComposerAttachmentsProps } from "./ComposerAttachments.js";
+export { ComposerAttachment } from "./ComposerAttachment.js";
+export type { ComposerAttachmentProps } from "./ComposerAttachment.js";
+export { ComposerCommandMenu } from "./ComposerCommandMenu.js";
+export type { ComposerCommandMenuProps } from "./ComposerCommandMenu.js";
+export { COMPOSER_CONTEXT_KEY } from "./types.js";
+export type { ComposerContext } from "./types.js";

package/dist/components/composer/types.d.ts

@@ -0,0 +1,86 @@
+/**
+ * The contract between the composer root and its parts.
+ *
+ * `Composer` owns the draft — the text, the attachments, the textarea element —
+ * and publishes a live, read-only view of it plus the handful of commands a part
+ * may issue. Every part reads it through context instead of having six values
+ * and four callbacks threaded back down as props, and every part must render
+ * harmlessly (inert, no-op) when the context is absent, so a part dropped
+ * outside a composer degrades instead of throwing.
+ *
+ * The root rebuilds the object on every render, which is what makes a part that
+ * reads `value.current` re-render when the draft changes. The commands are
+ * identity-stable and always call the root's latest logic, so a handle captured
+ * once — a menu's long-lived listener, a test's probe — never goes stale.
+ *
+ * `textareaRef` is typed read-only because exactly one part writes it —
+ * `ComposerInput`, which registers its own element through a documented cast to
+ * the writable shape the root actually publishes. Everyone else reads. It is the
+ * one member of the object that is NOT rebuilt per render: the root publishes a
+ * single accessor pair backed by a ref, so a write lands immediately and still
+ * wakes the parts that render off it.
+ */
+import type { AttachmentData } from "../../internals/ai-types.js";
+/** What the root publishes. Parts read it; only the root writes it. */
+export interface ComposerContext {
+    /** The current draft text, exactly as typed — untrimmed. */
+    readonly value: {
+        readonly current: string;
+    };
+    /** The attachments riding along with the draft. The consumer owns this list. */
+    readonly attachments: {
+        readonly current: AttachmentData[];
+    };
+    /** Nothing may be typed, sent, or attached. */
+    readonly disabled: boolean;
+    /** A response is arriving: send becomes stop. */
+    readonly streaming: boolean;
+    /**
+     * Whether `stop()` reaches anyone. The root always publishes a callable
+     * `stop`, so a control asking "is there a handler behind it" has to ask this
+     * instead — otherwise a stop button offers itself with nothing to stop.
+     */
+    readonly stoppable: boolean;
+    /** The live textarea, once `ComposerInput` has mounted one. */
+    readonly textareaRef: {
+        readonly current: HTMLTextAreaElement | null;
+    };
+    /**
+     * Whether this composer plays sound cues — forwarded from the root's own
+     * `sound` prop. Parts read `composer?.sound ?? false`, so a part rendered
+     * outside a `Composer` stays silent rather than throwing.
+     */
+    readonly sound?: boolean;
+    /** Send the draft. No-ops while disabled, while streaming, and on an empty draft. */
+    submit(): void;
+    /** Interrupt the stream. No-ops unless the composer is streaming. */
+    stop(): void;
+    /** Replace the draft outright. */
+    setValue(next: string): void;
+    /**
+     * Splice `text` in at the caret. With `replaceTriggerToken`, the trigger token
+     * the caret sits in — the whitespace-delimited run before it, when that run
+     * opens with a non-alphanumeric character — is replaced instead, and the
+     * completion closes with a trailing space.
+     */
+    insertText(text: string, replaceTriggerToken?: boolean): void;
+    /** Hand files to the consumer. It uploads them and pushes onto `attachments`. */
+    addFiles(files: File[]): void;
+    /** Drop one attachment from the draft by id. */
+    removeAttachment(id: string): void;
+}
+/**
+ * The context the parts read to find their root.
+ *
+ * The source publishes it under a `Symbol` context key; React's own context
+ * object plays that role here, so the exported name is kept and the value is a
+ * `React.Context` rather than a symbol:
+ *
+ * ```tsx
+ * const composer = useContext(COMPOSER_CONTEXT_KEY);
+ * ```
+ *
+ * Read it as optional — a part rendered outside a `Composer` gets `undefined`
+ * rather than throwing.
+ */
+export declare const COMPOSER_CONTEXT_KEY: import("react").Context<ComposerContext | undefined>;

package/dist/components/composer/types.js

@@ -0,0 +1,7 @@
+"use client";
+import { createContext } from "react";
+const COMPOSER_CONTEXT_KEY = createContext(void 0);
+COMPOSER_CONTEXT_KEY.displayName = "ComposerContext";
+export {
+  COMPOSER_CONTEXT_KEY
+};

package/dist/components/confetti/Confetti.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+import type { GlobalOptions as ConfettiGlobalOptions, Options as ConfettiOptions } from "canvas-confetti";
+/**
+ * The imperative surface the root exposes.
+ *
+ * The Svelte source declares `export function fire(...)`, which Svelte 5 hangs
+ * off the component instance (`bind:this={c}; c.fire()`). React has no instance,
+ * so the same method is published through the ref channel. This is the ONE place
+ * the port's `forwardRef` is not backed by a `ref = $bindable` declaration: the
+ * ref carries the handle, not the DOM node, because there is no bindable node to
+ * carry and dropping `fire` would delete a public method.
+ */
+export interface ConfettiHandle {
+    /** Fire the canvas instance. `opts` is merged over the component's `options`. */
+    fire: (opts?: ConfettiOptions) => void;
+}
+export interface ConfettiProps {
+    /** Default confetti options, merged under every `fire()` call. */
+    options?: ConfettiOptions;
+    /** Canvas creation options, read once when the instance is created. */
+    globalOptions?: ConfettiGlobalOptions;
+    /** Skip the automatic fire on mount. */
+    manualStart?: boolean;
+    /** Canvas CSS classes. */
+    className?: string;
+    /** Content rendered next to the canvas — typically the buttons that fire it. */
+    children?: ReactNode;
+}
+/**
+ * Canvas wrapper owning one `canvas-confetti` instance and publishing its
+ * `fire` through context, so any `ConfettiButton` below it paints onto this
+ * canvas rather than the library's own full-page one.
+ *
+ * Rest props are not spread: the Svelte source reads only these props off
+ * `$props()` and has no `...restProps`.
+ */
+export declare const Confetti: import("react").ForwardRefExoticComponent<ConfettiProps & import("react").RefAttributes<ConfettiHandle>>;